/* vistas/entrar.css — la página de entrada (/entrar, entrar.html; estilo.md §8.5): solo la carga ella.
   A la izquierda el cartel (la cruz de registro en semitono ultramar sobre papel, sin ningún dato de
   clientes); a la derecha el formulario. En el móvil el cartel es una banda arriba. */

body.entrar{min-height:100%;background:var(--papel)}
.entrar-marco{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}

/* ── El cartel ── */
.cartel{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
 gap:var(--e-6);padding:var(--e-8);border-right:1px solid var(--hilo);background:var(--hundido)}
/* La trama de fondo, que se desvanece hacia el centro */
.cartel::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--trama);
 -webkit-mask:linear-gradient(160deg,black 0%,transparent 70%);mask:linear-gradient(160deg,black 0%,transparent 70%)}
/* La cruz de registro gigante, hecha de puntos de tinta ultramar (una máscara sobre la trama) */
.cartel-trama{position:absolute;z-index:-1;right:-30%;bottom:-20%;width:min(80vh,85%);aspect-ratio:1;
 background:radial-gradient(circle,var(--acento) 2.6px,transparent 3.1px) 0 0/11px 11px;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='8.5' fill='none' stroke='black' stroke-width='2.6'/%3E%3Ccircle cx='16' cy='16' r='3.4' fill='black'/%3E%3Cpath d='M16 1v30M1 16h30' stroke='black' stroke-width='2.6'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='8.5' fill='none' stroke='black' stroke-width='2.6'/%3E%3Ccircle cx='16' cy='16' r='3.4' fill='black'/%3E%3Cpath d='M16 1v30M1 16h30' stroke='black' stroke-width='2.6'/%3E%3C/svg%3E") center/contain no-repeat}
.cartel-marca{display:flex;align-items:center;gap:var(--e-3);color:var(--tinta);font:700 var(--t-xl)/1 var(--f-display);letter-spacing:-.02em}
.cartel-marca svg{width:30px;height:30px;color:var(--acento)}
.cartel-lema{max-width:11ch;margin:0;font:700 clamp(var(--t-hero-movil),4.6vw,var(--t-hero))/1 var(--f-display);letter-spacing:-.035em;
 font-variation-settings:"opsz" 96;font-stretch:92%;color:var(--tinta);text-wrap:balance}
.cartel-pie{margin:0;font:500 var(--t-xs)/1.3 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-2)}

/* ── El formulario ── */
.entrar-caja{display:grid;place-items:center;padding:var(--e-8) var(--e-6)}
.forma{display:flex;flex-direction:column;gap:var(--e-4);width:100%;max-width:380px}
.forma-cab{display:flex;flex-direction:column;gap:var(--e-2);margin-bottom:var(--e-2)}
.forma .descr{margin:0;color:var(--tinta-2)}
.forma .campo{margin-top:0}
.forma .campo :is(input,.entrada){min-height:52px;font-size:var(--t-l)}
.forma .btn.xl{margin-top:var(--e-2)}
/* Bloq Mayús: el aviso tiene su sitio guardado y solo dice algo cuando están activadas (sin saltos) */
.mayus{min-height:1.4em}
.mayus:not(:empty)::before{content:"⚠ ";font-weight:700}
/* El error, en línea y con su sitio guardado: al aparecer no empuja nada */
.entrar-motivo{margin:var(--e-3) 0 0;padding:var(--e-2) var(--e-3);border-radius:var(--r-m);background:var(--acento-suave);color:var(--tinta);font-size:var(--t-m)}
.entrar-err{min-height:2.9em;font-size:var(--t-m);line-height:1.45;color:var(--mal)}
.entrar-err:not(:empty){padding:var(--e-2) var(--e-3);border-radius:var(--r-m);background:var(--mal-suave);color:var(--tinta);
 box-shadow:inset 3px 0 0 var(--mal)}
.forma .nota{margin:0}

@media (max-width:900px){
 .entrar-marco{grid-template-columns:1fr;grid-template-rows:auto 1fr}
 .cartel{min-height:140px;padding:var(--e-5) var(--gutter);border-right:0;border-bottom:1px solid var(--hilo)}
 .cartel-lema{max-width:16ch;font-size:var(--t-2xl)}
 .cartel-pie{display:none}
 .cartel-trama{width:200px;right:-60px;bottom:-70px}
 .entrar-caja{place-items:start center;padding:var(--e-7) var(--gutter) var(--e-9)}
 .forma h1{font-size:var(--t-3xl)}
}
@media (max-width:600px){.cartel-marca{font-size:var(--t-l)}}