/* ============================================================
   ACTORES S.C.G — INICIAR SESIÓN / ÁREA DE SOCIOS (iniciar-sesion.html)
   Pantalla dividida: panel de marca (naranja) + formulario (blanco).
   Standalone (sin nav/footer). Se carga junto a site.css.

   La pantalla cabe SIEMPRE en el alto de la ventana. Dos reglas la
   sostienen y conviene no romperlas:

   1. La página no scrollea: `.auth` mide exactamente el alto de la
      ventana y `body` recorta. El único que puede scrollear, y solo en
      el caso extremo (el teclado del móvil abierto sobre una ventana ya
      corta), es la columna del formulario. Por eso lleva
      `align-items:safe center`: centrado normal, pero sin recortar el
      arranque de la tarjeta cuando no cabe.
   2. El ritmo vertical se mide en `vh`, no en píxeles fijos. Los
      `clamp()` de esta hoja llevan el alto de la ventana en el término
      medio, así que altos de campo, márgenes y titulares encogen solos.
      Un `margin` fijo nuevo es lo que devuelve el scroll.

   Y el panel de marca suelta contenido por orden de importancia según
   baja la ventana: primero los puntos, luego la frase de pie y la
   entrada, luego la etiqueta. Está al final, en un solo bloque de
   consultas por alto, para poder leerlo de corrido.
   ============================================================ */
html{height:100%}
body{background:var(--paper); height:100%; overflow:hidden}

.auth{height:100vh; height:100dvh; overflow:hidden; display:grid; grid-template-columns:1.05fr 1fr;
  /* Ritmo vertical: encoge con la ventana. */
  --alto-campo:clamp(42px,5.6vh,50px);
  --sep-campo:clamp(8px,1.6vh,16px)}

/* ---- Panel de marca (izquierda) ---- */
.auth-side{position:relative; overflow:hidden; background:var(--orange); color:var(--ink);
  display:flex; flex-direction:column; justify-content:flex-start; gap:clamp(16px,3.4vh,40px);
  padding:clamp(22px,3.4vh,60px) clamp(28px,4vw,60px)}
/* El `position:absolute` se repite a propósito: `.auth-side > *` de abajo
   tiene la misma especificidad que el `.spiral` de site.css y va después,
   así que sin esta línea la espiral cae al flujo y suma 460px de alto a la
   columna. En el escritorio no se veía —la columna mide la ventana entera—;
   apilada en el móvil era media pantalla de aire. */
.auth-side .spiral{position:absolute; left:-160px; bottom:-180px; width:460px; height:460px; opacity:.16}
.auth-side .spiral path{stroke:#fff}
.auth-side > *{position:relative; z-index:2}
.auth-brand{font-family:var(--font-display); font-weight:700; letter-spacing:.34em; font-size:clamp(14px,1.9vh,17px); padding-left:.34em; color:var(--ink)}
.auth-brand .o{color:#fff}
/* El bloque del medio se centra con márgenes automáticos en vez de con un
   `space-between`: cuando la ventana baja y la frase de pie se retira, el
   titular se quedaba pegado al borde inferior. */
.as-mid{max-width:30ch; margin-block:auto}
.as-mid .lab{color:var(--ink); margin-bottom:clamp(8px,1.8vh,16px)}
.as-mid .lab::before{background:var(--ink)}
.as-mid h1{font-family:var(--font-display); font-weight:600; font-size:clamp(30px,2.2vw + 2.4vh,56px); line-height:1; letter-spacing:-.02em; margin:0; color:var(--ink)}
.as-mid h1 em{font-style:italic; color:#fff; font-weight:500}
.as-mid p{margin:clamp(12px,2.2vh,20px) 0 clamp(14px,2.8vh,26px); font-size:clamp(15px,1.9vh,17px); font-weight:500; color:rgba(14,14,12,.82); max-width:38ch}
.as-points{display:flex; flex-direction:column; gap:clamp(8px,1.4vh,12px); list-style:none; margin:0; padding:0}
.as-points li{display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:600; color:var(--ink)}
.as-points li svg{flex:0 0 auto; width:22px; height:22px; padding:4px; border-radius:50%; background:var(--ink); color:var(--orange); fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.auth-side .as-foot{font-family:var(--font-display); font-weight:500; font-size:16px; color:rgba(14,14,12,.72)}

/* ---- Formulario (derecha) ---- */
.auth-main{display:flex; align-items:center; align-items:safe center; justify-content:center;
  padding:clamp(20px,3.4vh,60px) clamp(20px,4vw,60px); background:var(--white);
  min-height:0; overflow-y:auto; overscroll-behavior:contain}
.auth-card{width:100%; max-width:404px}
.auth-card .back{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--g2); margin-bottom:clamp(14px,3vh,34px); transition:color .2s}
.auth-card .back:hover{color:var(--accent)}
.auth-card h2{font-family:var(--font-display); font-weight:600; font-size:clamp(24px,1vw + 2.4vh,34px); line-height:1.05; margin:0 0 8px; color:var(--ink)}
.auth-card .sub{font-size:15px; color:var(--g2); margin:0 0 clamp(14px,2.8vh,28px)}

.field{margin-bottom:var(--sep-campo)}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--g2); margin-bottom:clamp(4px,.9vh,7px)}
.inp{position:relative}
.field input{width:100%; height:var(--alto-campo); padding:0 15px; border:1px solid var(--line); border-radius:12px;
  font-family:var(--font-ui); font-size:15px; color:var(--ink); background:#fff; transition:border-color .2s, box-shadow .2s}
.field.pwd input{padding-right:48px}
.field input::placeholder{color:var(--g1)}
.field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,81,21,.15)}
.inp .toggle{position:absolute; right:7px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; color:var(--g2); border-radius:9px}
.inp .toggle:hover{color:var(--ink); background:var(--paper)}
.inp .toggle svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.inp .toggle .off{display:none}
.inp .toggle.on .on{display:none} .inp .toggle.on .off{display:block}

.field-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:clamp(2px,.6vh,4px) 0 clamp(14px,2.6vh,24px)}
.remember{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--g2); cursor:pointer}
.remember input{width:16px; height:16px; accent-color:var(--accent); cursor:pointer}
.forgot{font-size:13.5px; font-weight:600; color:var(--accent)}
.forgot:hover{text-decoration:underline}

.auth-card .btn-full{width:100%; justify-content:center; padding:clamp(12px,1.9vh,15px)}
.demo-note2{display:none; margin-top:16px; font-size:13px; font-weight:500; color:var(--g2); background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.demo-note2.show{display:block}
.demo-note2 b{color:var(--ink)}

/* Mensajes junto a los campos: error de validación, ayuda y aviso de sesión. */
.field-error{color:var(--orange-700); font-size:13px; font-weight:500; margin:6px 0 0}
.field-hint{color:var(--g2); font-size:12.5px; margin:clamp(6px,1.2vh,8px) 0 0}
.auth-status{background:var(--orange-50); border:1px solid var(--orange-100); color:var(--orange-700);
  border-radius:12px; padding:clamp(9px,1.6vh,12px) 14px; font-size:13.5px; font-weight:600; margin:0 0 clamp(12px,2.2vh,22px)}
.auth-note{color:var(--g2); font-size:14.5px; line-height:1.5; margin:0 0 clamp(14px,2.6vh,24px)}
.linkbtn{background:none; border:0; padding:0; cursor:pointer; font-family:inherit; font-size:14.5px; font-weight:700; color:var(--accent)}
.linkbtn:hover{text-decoration:underline}

.auth-sep{display:flex; align-items:center; gap:14px; margin:clamp(14px,2.8vh,26px) 0; color:var(--g1); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase}
.auth-sep::before, .auth-sep::after{content:""; height:1px; flex:1; background:var(--line)}
.auth-alt{text-align:center; font-size:14.5px; color:var(--g2); margin:0}
.auth-alt a{font-weight:700; color:var(--accent)}
.auth-alt a:hover{text-decoration:underline}

/* ---- Responsive: por ancho ----
   Apilado, el panel de marca deja de ser media pantalla y pasa a ser la
   banda de cabecera; el formulario se queda con el resto (`auto 1fr`). */
@media(max-width:860px){
  .auth{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr)}
  .auth-side{justify-content:flex-start; gap:clamp(10px,2vh,20px);
    padding:clamp(16px,2.6vh,30px) clamp(20px,6vw,40px) clamp(18px,2.8vh,32px)}
  .auth-side .spiral{width:300px; height:300px; left:-130px; bottom:-160px}
  .as-mid{max-width:none; margin-block:0}
  .as-mid h1{font-size:clamp(24px,5.6vw,34px)}
  .as-mid p:not(.lab){margin-bottom:0; font-size:15px}
  .as-points, .auth-side .as-foot{display:none}
  .auth-main{padding:clamp(18px,3vh,40px) 20px}
}

/* En pantallas estrechas de verdad, la cabecera es la marca y el titular. */
@media(max-width:520px){
  .as-mid p:not(.lab){display:none}
  .auth-card .back{margin-bottom:clamp(12px,2.4vh,20px)}
}

/* ---- Responsive: por alto ----
   Lo que sobra cuando la ventana es baja, de menos a más importante. */
@media(max-height:800px){ .as-points{display:none} }
@media(max-height:720px){ .auth-side .as-foot{display:none} }
@media(max-width:860px) and (max-height:900px){ .as-mid p:not(.lab){display:none} }
@media(min-width:861px) and (max-height:720px){ .as-mid p:not(.lab){display:none} }
@media(max-height:600px), (max-width:860px) and (max-height:780px){ .as-mid .lab{display:none} }
@media(max-height:560px){ .auth-card .back{margin-bottom:10px} .auth-card h2{margin-bottom:4px} }

/* Con un mensaje en pantalla —un error de validación o el aviso de sesión—
   la tarjeta crece de golpe casi cien píxeles. En ventanas bajas el aire
   sobra antes que el mensaje: se va el separador y se va el subtítulo, que
   es justo lo que el mensaje acaba de sustituir. (Si el navegador no
   entiende `:has()` no pasa nada grave: scrollea la columna.) */
@media(max-height:720px), (max-width:860px) and (max-height:940px){
  .auth:has(.field-error, .auth-status) .sub,
  .auth:has(.field-error, .auth-status) .auth-sep{display:none}
  .auth:has(.field-error, .auth-status) .auth-alt{margin-top:16px}
  .auth:has(.field-error, .auth-status) .field-hint{font-size:11.5px; line-height:1.35}
}
/* Apilado, el mensaje también le gana el sitio a la banda de marca. */
@media(max-width:860px) and (max-height:940px){
  .auth:has(.field-error, .auth-status) .as-mid .lab,
  .auth:has(.field-error, .auth-status) .as-mid p:not(.lab){display:none}
}

/* Apilado y bajo (el móvil de pantalla corta): la tarjeta se aprieta. El
   separador «o» es lo único que se va del todo —es decoración—; el resto
   solo encoge. */
@media(max-width:860px) and (max-height:700px){
  .auth-card .back{margin-bottom:10px}
  .auth-card h2{margin-bottom:4px}
  .auth-card .sub{font-size:13.5px; margin-bottom:14px}
  .auth-sep{display:none}
  .auth-alt{margin-top:16px}
  .field-hint{font-size:11.5px; line-height:1.4}
}

/* Bajo de verdad: el panel de marca se queda en su banda. El titular se
   va, pero la marca sigue siendo el enlace de vuelta al sitio. */
@media(max-width:860px) and (max-height:620px), (max-width:330px) and (max-height:760px), (max-height:480px) and (orientation:landscape){
  .auth{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr)}
  .auth-side{justify-content:center; padding:9px clamp(16px,4vw,28px)}
  .auth-side .as-mid, .auth-side .spiral{display:none}
  .auth-main{padding:14px 20px}
}

/* El móvil girado: apenas hay alto, así que los dos campos van a lo ancho
   en dos columnas y la vuelta al sitio la hace la marca de la banda. */
@media(max-height:480px) and (orientation:landscape){
  .auth{--alto-campo:40px; --sep-campo:8px}
  .auth-card{max-width:640px}
  .auth-card .back{display:none}
  .auth-card .sub{font-size:13px; margin-bottom:12px}
  .auth-card form{display:grid; grid-template-columns:1fr 1fr; column-gap:16px}
  .auth-card form > .field-row, .auth-card form > .btn{grid-column:1 / -1}
  .auth-card h2{font-size:23px}
  .field-row{margin-bottom:10px}
  .auth-sep{display:none}
  .auth-alt{margin-top:10px}
  .auth-status{padding:8px 12px; font-size:12.5px; margin-bottom:12px}
  .field-hint{font-size:11.5px; line-height:1.35}
}

/* Y el móvil pequeño de verdad (320×480 y parecidos): la vuelta al sitio
   la hace la marca de la banda, así que el enlace de arriba sobra. */
@media(max-width:860px) and (max-height:520px){
  .auth{--alto-campo:40px; --sep-campo:8px}
  .auth-card .back{display:none}
  .auth-card h2{font-size:22px}
  .auth-card .sub{font-size:13px; margin-bottom:12px}
  .auth-alt{margin-top:10px}
  .auth-status{padding:8px 12px; font-size:12.5px; margin-bottom:12px}
  .field-hint{font-size:11px}
}