/* auth.css — Fase 3.14: login real multiusuario. Dos familias de estilos:
   1) El gate de PLATAFORMA (#auth-overlay): login, crear cuenta, onboarding, selector de
      negocio, invitacion. Vive ENCIMA de toda la app (z-index por encima de hojas/cintas) y
      nunca usa --marca (ese token es del TENANT; aca todavia no hay tenant resuelto). La
      identidad visual es MATRIZ/DARFU: papel/noche + neumorphism, ink neutro, serif editorial.
   2) La pantalla #/equipo (padron, invitar, roles): ya CON tenant resuelto, así que ahí sí puede
      convivir con --marca donde corresponda (nada nuevo: reusa .bloque/.campo/.boton de base.css). */

/* ============================================================ */
/* 1) El gate de plataforma                                      */
/* ============================================================ */
#auth-overlay{
  position:fixed; inset:0; z-index:200; background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  padding: var(--sp-5) var(--margen-movil); overflow-y:auto;
}
/* La trama de la marca, muy tenue, sobre el papel: la MATRIZ de celdas repetida. Es la unica
   textura de la pantalla y sale de la identidad, no de un adorno. Va con color-mix contra la
   tinta para que funcione igual en Papel y en Noche sin escribir dos veces el mismo fondo. */
#auth-overlay::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  /* Se desvanece hacia los bordes: en el centro, donde esta el contenido, casi no se ve. */
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 35%, #000 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 35%, #000 100%);
}
.auth-escena{
  position:relative; display:grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: clamp(32px, 6vw, 80px); align-items:center;
  width:100%; max-width:1060px; margin:auto;
}
/* minmax(0, 400px) y NO 400px a secas: 400 fijos son mas anchos que un iPhone (390), asi que la
   tarjeta se desbordaba por los lados y arrastraba la pagina en horizontal. El techo es 400; el
   piso, lo que haya. */
.auth-escena--sola{ grid-template-columns: minmax(0, 400px); justify-content:center; }
.auth-tarjeta{
  width:100%; max-width:400px; min-width:0; background:var(--superficie-neu);
  border-radius:var(--r-lg); box-shadow:var(--sombra-neu-alta);
  padding: var(--sp-7) var(--sp-6); margin: auto;
}

/* ---- Panel editorial (solo pantallas anchas) ---- */
.auth-panel{ min-width:0; }
.auth-panel__ceja{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:var(--sp-4);
}
.auth-panel__titular{
  font-family:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif;
  font-weight:420; font-size:clamp(30px, 3.6vw, 46px); line-height:1.14; color:var(--ink);
  letter-spacing:-.01em; margin-bottom:var(--sp-6);
}
.auth-panel__titular em{ font-style:italic; color:var(--brasa-matriz); }
.auth-panel{ --brasa-matriz:#D8431E; }
[data-tema="noche"] .auth-panel{ --brasa-matriz:#F0603A; }

.auth-panel__pieza{
  background:var(--superficie-neu); border-radius:var(--r-md);
  box-shadow:var(--sombra-neu-media); padding:var(--sp-5); max-width:400px;
}
.auth-panel__pieza-ceja{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:var(--sp-3);
}
.auth-despiece{ width:100%; border-collapse:collapse; }
.auth-despiece td{
  padding:7px 0; font-size:14px; color:var(--ink-2);
  border-bottom:1px solid var(--line);
}
.auth-despiece tr:last-child td{ border-bottom:none; }
.auth-despiece__cifra{
  text-align:right; font-family:'Fraunces',Georgia,serif; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.auth-panel__total{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
  margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:2px solid var(--ink);
  font-size:14px; color:var(--ink-2);
}
.auth-panel__total-cifra{
  font-family:'Fraunces',Georgia,serif; font-size:26px; color:var(--brasa-matriz);
  font-variant-numeric:tabular-nums;
}
.auth-panel__remate{
  margin-top:var(--sp-3); font-size:13.5px; color:var(--ink-2); line-height:1.5;
}
.auth-panel__remate b{ color:var(--ink); }
.auth-panel__nota{ margin-top:var(--sp-4); font-size:12px; color:var(--ink-3); font-style:italic; }

/* Por debajo de 1000px el panel desaparece: la tarjeta ya lleva la promesa, y en un celular lo
   que importa es entrar, no leer. No se achica, se va: media pieza editorial es peor que ninguna. */
@media (max-width:999px){
  .auth-escena{ grid-template-columns: minmax(0, 400px); justify-content:center; }
  .auth-panel{ display:none; }
}
/* Firma de plataforma (2026-07-28), calcada de VECTOR: linea de version + descriptor, la marca,
   el wordmark y "Powered by DARFU". Sin nombre de cliente: en el gate no hay tenant resuelto. */
.auth-marca{ text-align:center; margin-bottom:var(--sp-5); }
.auth-legales__descarga{ margin-bottom:var(--sp-3); font-size:13px; }
.auth-legales__descarga a{ color:var(--ink-2); font-weight:600; margin-left:5px; }
.auth-legales__descarga a:hover{ color:var(--ink); }
.auth-legales__nota{ color:var(--ink-3); font-size:12.5px; }
.auth-legales__salida{ margin-top:var(--sp-2); font-size:12px; }
.auth-legales__salida a{ color:var(--ink-3); text-decoration:underline; text-underline-offset:2px; }
.auth-legales__salida a:hover{ color:var(--ink); }
.auth-legales__version{
  font-size:11.5px; color:var(--ink-3); letter-spacing:.04em; margin-top:var(--sp-2);
}
/* La brasa de MATRIZ. No es --marca (ese token es del TENANT y aca todavia no hay ninguno) ni
   sale de la paleta de datos (D2). Los dos valores son los mismos del favicon. */
.auth-marca__signo{
  width:34px; height:34px; display:block; margin:0 auto var(--sp-2);
  --brasa:#D8431E;
}
[data-tema="noche"] .auth-marca__signo{ --brasa:#F0603A; }
.auth-marca__signo rect{ fill:var(--ink); }
.auth-marca__signo .auth-marca__celda{ fill:var(--brasa); }
.auth-marca__nombre{
  font-family:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif;
  font-weight:460; font-size:27px; letter-spacing:.14em; color:var(--ink);
  text-indent:.14em; /* compensa el espaciado de la ultima letra para que quede centrado de verdad */
}
.auth-marca__inicio{ display:block; text-decoration:none; color:inherit; border-radius:var(--r-sm); }
.auth-marca__inicio:hover .auth-marca__nombre{ color:var(--ink-2); }
.auth-marca__inicio:focus-visible{ outline:none; box-shadow:var(--sombra-foco-neu); }
.auth-marca__promesa{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif; font-style:italic;
  font-size:14.5px; color:var(--ink-2); margin-top:6px; line-height:1.35;
}
.auth-marca__pie{ font-size:12px; color:var(--ink-3); margin-top:6px; }

/* El ojo para ver la clave. El input lleva padding a la derecha para que el texto no se meta
   debajo del boton, incluso con una clave larga. */
.campo-clave{ position:relative; }
.campo-clave input{ padding-right:44px; width:100%; }
.campo-clave__ojo{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:var(--r-sm); cursor:pointer; color:var(--ink-3);
}
.campo-clave__ojo svg{ width:19px; height:19px; }
.campo-clave__ojo:hover{ color:var(--ink-2); }
.campo-clave__ojo.activo{ color:var(--ink); }
.campo-clave__ojo:focus-visible{ outline:none; box-shadow:var(--sombra-foco-neu); color:var(--ink); }
.auth-marca__pie b{ color:var(--ink-2); font-weight:700; letter-spacing:.02em; }
.auth-mensaje{ font-size:14px; color:var(--ink-2); line-height:1.5; margin-bottom:var(--sp-4); }

/* Enlaces de texto del gate (¿olvidaste tu clave?, volver). Son <button> porque no navegan a
   ningun lado: cambian de vista dentro de la misma tarjeta. */
.auth-enlace-fila{ text-align:center; margin-top:var(--sp-3); }
.auth-enlace{
  background:none; border:0; padding:2px 4px; cursor:pointer;
  font-family:inherit; font-size:13px; color:var(--ink-3); text-decoration:underline;
  text-underline-offset:2px; border-radius:var(--r-sm);
}
.auth-enlace:hover{ color:var(--ink); }
.auth-enlace:focus-visible{ outline:none; box-shadow:var(--sombra-foco-neu); color:var(--ink); }
.auth-ok{ color:var(--ink-2); }

/* Aceptacion de terminos: va pegada a los botones que la disparan, no en la letra chica del pie.
   Se lee, no se esconde: mismo tamano que la ayuda de un campo, y los enlaces subrayados. */
.auth-consentimiento{
  margin-top:var(--sp-4); font-size:12.5px; line-height:1.5; color:var(--ink-3); text-align:center;
}
.auth-consentimiento .auth-enlace{ font-size:12.5px; padding:0 1px; }

.auth-legales{
  margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--line);
  text-align:center; font-size:12px; color:var(--ink-3);
}
.auth-legales a{ color:var(--ink-3); text-decoration:underline; text-underline-offset:2px; }
.auth-legales a:hover{ color:var(--ink); }
.auth-legales__enlaces span{ margin:0 var(--sp-2); }

/* Hoja de texto legal, ADENTRO del gate. Se lee sin salir de la app: mandar a alguien a otra
   pagina justo cuando iba a entrar se siente a expulsion. Los estilos de tipografia replican los
   de la landing para el mismo fragmento (h2/h3/p/.upd/.legal-draft). */
.auth-legal-hoja{
  position:fixed; inset:0; z-index:210; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; padding:var(--sp-4);
}
.auth-legal-panel{
  position:relative; width:100%; max-width:640px; max-height:min(82vh, 700px); overflow-y:auto;
  background:var(--paper); border-radius:var(--r-lg); box-shadow:var(--sombra-neu-alta);
  padding: var(--sp-6);
}
.auth-legal-cerrar{
  position:absolute; top:var(--sp-3); right:var(--sp-3); width:32px; height:32px;
  background:var(--surface); border:1px solid var(--line-fuerte); border-radius:var(--r-sm);
  color:var(--ink-2); font-size:20px; line-height:1; cursor:pointer;
}
.auth-legal-cerrar:hover{ color:var(--ink); }
.auth-legal-cerrar:focus-visible{ outline:none; box-shadow:var(--sombra-foco-neu); }
.auth-legal-panel h2{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif; font-weight:500; font-size:24px;
  color:var(--ink); margin-bottom:2px; padding-right:var(--sp-6);
}
.auth-legal-panel h3{
  font-family:var(--font-sis); font-weight:700; font-size:15px; color:var(--ink);
  margin-top:var(--sp-5); margin-bottom:var(--sp-1);
}
.auth-legal-panel p{ font-size:14px; line-height:1.6; color:var(--ink-2); }
.auth-legal-panel .upd{ font-size:12.5px; color:var(--ink-3); margin-bottom:var(--sp-4); }
.auth-legal-panel .legal-draft{
  background:var(--paper-2); border-radius:var(--r-sm); padding:var(--sp-3);
  margin-bottom:var(--sp-4); font-size:13px;
}
.auth-legal-panel .legal-draft b{ color:var(--neg); }

/* Entrar con Google: alternativa de PLATAFORMA, no del tenant, asi que nunca usa --marca. Se
   dibuja como superficie (no como el boton primario de tinta) para que "Entrar" siga siendo la
   accion principal de la tarjeta y esta sea claramente la otra puerta, no una segunda igual. */
.auth-o{
  display:flex; align-items:center; gap:var(--sp-3);
  margin:var(--sp-4) 0; color:var(--ink-3); font-size:12px;
}
.auth-o::before, .auth-o::after{ content:''; flex:1; height:1px; background:var(--line); }
.boton--google{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-3);
  background:var(--surface); color:var(--ink); border:1px solid var(--line-fuerte);
}
.boton--google:hover{ box-shadow:var(--sombra-neu-media); }
.boton--google svg{ width:18px; height:18px; flex:none; }
.auth-titulo{
  font-family:var(--font-sis); font-weight:700; font-size:19px; color:var(--ink);
  margin-bottom:var(--sp-2);
}
.auth-segmentado{ margin-top:0; margin-bottom:var(--sp-5); }
/* .segmentado trae display:flex propio, que le gana al [hidden] del navegador (el UA solo aporta
   display:none con la especificidad mas baja que existe). Sin esto, el segmentado seguia visible
   durante la recuperacion de clave y ofrecia "Crear cuenta" en medio del desvio. */
.auth-segmentado[hidden]{ display:none; }
.auth-segmentado button{ min-width:0; padding:0 var(--sp-1); } /* deja que "Iniciar sesión"/"Crear cuenta" achiquen sin desbordar la tarjeta angosta */
.auth-error{ color:var(--neg); }

/* Boton primario del gate: nunca --marca (identidad de TENANT), un neumorphism "de tinta"
   propio, en vez de "de color". Mismo trato tactil que .boton--marca (relieve, inset al
   presionar, aro de foco de doble capa), solo que con --ink como base en vez de --marca-accion. */
.boton--plataforma{
  background:var(--ink); border-color:var(--ink); color:var(--ink-inv);
  box-shadow: -3px -3px 7px rgba(255,255,255,.10), 3px 3px 8px rgba(0,0,0,.28);
  transition: box-shadow var(--mo-tacto), transform var(--mo-tacto);
}
[data-tema="noche"] .boton--plataforma{
  box-shadow: -3px -3px 7px rgba(255,255,255,.06), 3px 3px 9px rgba(0,0,0,.55);
}
.boton--plataforma:active{ box-shadow:inset 2px 2px 6px rgba(0,0,0,.35), inset -2px -2px 6px rgba(255,255,255,.10); transform:none; }
.boton--plataforma:focus-visible{ box-shadow: -3px -3px 7px rgba(255,255,255,.10), 3px 3px 8px rgba(0,0,0,.28), var(--sombra-foco-neu); }
.boton--plataforma:disabled{ background:var(--paper-2); border-color:var(--line-fuerte); color:var(--ink-3); box-shadow:none; cursor:default; }

/* Selector de negocio (mi_perfil con >1 tenant) */
.auth-tenants{ display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-4); }
.auth-tenant-fila{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  width:100%; padding:var(--sp-4); border-radius:var(--r-md); border:1px solid var(--line-fuerte);
  background:var(--surface); cursor:pointer; transition: box-shadow var(--mo-tacto), transform var(--mo-tacto);
}
.auth-tenant-fila:hover{ box-shadow:var(--sombra-neu-media); }
.auth-tenant-fila:active{ transform:scale(.98); }
.auth-tenant-fila:focus-visible{ box-shadow:var(--sombra-foco-neu); outline:none; }
.auth-tenant-fila__nombre{ font-family:var(--font-sis); font-weight:700; font-size:15.5px; color:var(--ink); }
.auth-tenant-fila__meta{ font-size:13px; color:var(--ink-3); }

/* CELULAR: la tarjeta SE DISUELVE. En un escritorio, una caja con sombra flotando sobre el papel
   se lee como una pieza; en un telefono esa caja ES la pantalla, asi que el marco no separa nada:
   solo agranda todo y se come el ancho. Dario, viendola en su Android: "cubre todo, se mira
   grotezco". Sin fondo, sin sombra y sin esquinas, el contenido pasa a ser la pagina, y de paso
   gana los ~48px que gastaban los bordes: los campos y los botones respiran.
   Las alturas de los controles NO se tocan (44px es la medida del dedo, no un capricho). */
@media (max-width:479px){
  .auth-tarjeta{
    background:none; box-shadow:none; border-radius:0;
    padding:var(--sp-4) 0; max-width:none;
  }
  #auth-overlay{ padding-inline:var(--sp-5); }
  .auth-escena, .auth-escena--sola{ grid-template-columns: minmax(0, 1fr); }
}

/* CELULAR: que la puerta entre ENTERA, sin scroll (Dario, 2026-07-28: "no se queda en la misma
   pantalla, me da scroll"). Medido en un iPhone de 402x874: el viewport util son 749px (Safari se
   come 125 con sus barras) y la tarjeta media 745 + margenes = sobraban 28px. Se recorta el aire
   del marco y del pie, NUNCA el alto de los campos ni de los botones: en un telefono, achicar el
   area que se toca es cambiar un scroll por un error de dedo. */
@media (max-width:479px) and (max-height:820px){
  #auth-overlay{ padding-block:8px; }
  .auth-tarjeta{ padding-block:var(--sp-3); }
  .auth-marca{ margin-bottom:var(--sp-3); }
  /* El segmentado ya no necesita tanto aire ahora que no hay marco alrededor. */
  .auth-segmentado{ margin-bottom:var(--sp-3); }
  .auth-marca__signo{ width:26px; height:26px; margin-bottom:6px; }
  .auth-marca__nombre{ font-size:21px; }
  .auth-marca__promesa{ font-size:12.5px; margin-top:3px; }
  .auth-marca__pie{ margin-top:3px; }
  .auth-o{ margin:var(--sp-3) 0; }
  .auth-enlace-fila{ margin-top:var(--sp-2); }
  .auth-consentimiento{ margin-top:var(--sp-3); }
  .auth-legales{ margin-top:var(--sp-3); padding-top:var(--sp-3); }
  .auth-legales__descarga{ margin-bottom:var(--sp-2); }
}

/* Pantallas BAJAS (laptops de 768px de alto, o cualquiera con la barra de marcadores abierta): la
   tarjeta entera medía mas que el viewport y "Entrar" nacia debajo del pliegue, o sea que la
   accion principal habia que ir a buscarla con scroll. Cazado el 2026-07-28 en una captura de
   Dario. Se aprieta el ritmo vertical en vez de esconder nada: no se cae ni un dato. */
@media (max-height:760px){
  #auth-overlay{ padding-block:var(--sp-4); }
  .auth-tarjeta{ padding-block:var(--sp-5); }
  .auth-marca{ margin-bottom:var(--sp-4); }
  .auth-firma__version{ margin-bottom:var(--sp-3); }
  .auth-marca__signo{ width:28px; height:28px; }
  .auth-marca__nombre{ font-size:23px; }
  .auth-segmentado{ margin-bottom:var(--sp-4); }
  .auth-legales{ margin-top:var(--sp-4); padding-top:var(--sp-3); }
  /* Segunda pasada (2026-07-28, tarde): la promesa, la descarga y la salida sumaron tres lineas
     y la tarjeta volvio a pasarse del alto. Se aprieta el interlineado del pie, que es texto de
     referencia, en vez de tocar los campos, que son con lo que la persona trabaja. */
  .auth-marca__promesa{ font-size:13.5px; margin-top:4px; }
  .auth-marca__pie{ margin-top:4px; }
  .auth-legales__descarga{ margin-bottom:var(--sp-2); }
  .auth-legales__version{ margin-top:4px; }
  .auth-legales__salida{ margin-top:4px; }
  .auth-o{ margin:var(--sp-3) 0; }
}

/* ============================================================ */
/* 2) #/equipo: padron, invitar, roles (ya con tenant resuelto)   */
/* ============================================================ */
.miembro-fila{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  padding:var(--sp-3) 0; border-bottom:1px solid var(--line);
}
.miembro-fila:last-child{ border-bottom:none; }
.miembro-fila__info{ flex:1; min-width:160px; display:flex; flex-direction:column; }
.miembro-fila__nombre{ font-size:14.5px; font-weight:600; color:var(--ink); }
.miembro-fila__email{ font-size:12.5px; color:var(--ink-3); }
.miembro-fila__nota{ font-size:12px; color:var(--ink-3); font-style:italic; }
.miembro-fila__rol-select{
  min-height:36px; padding:0 var(--sp-2); border-radius:var(--r-sm); border:1px solid var(--line-fuerte);
  background:var(--paper); color:var(--ink); font-size:13px;
}

/* Insignia de rol: dueño usa el acento de marca (identidad del negocio); el resto, una escala
   neutra de jerarquia (nunca la paleta de datos: D2, ningun rol es "un dato"). */
.rol-badge{
  display:inline-flex; align-items:center; min-height:26px; padding:0 var(--sp-3); border-radius:var(--r-pill);
  font-size:12.5px; font-weight:700; white-space:nowrap; flex:none;
}
.rol-badge--dueno{ background:var(--marca-tenue); color:var(--marca-ink); }
.rol-badge--admin{ background:var(--superficie-neu); color:var(--ink); box-shadow:var(--sombra-neu-media); }
.rol-badge--operador{ background:var(--surface); color:var(--ink-2); border:1px solid var(--line-fuerte); }
.rol-badge--lectura{ background:transparent; color:var(--ink-3); border:1px solid var(--line); }

.invitacion-link{ margin-top:var(--sp-4); padding:var(--sp-4); background:var(--paper-2); border-radius:var(--r-sm); }
.invitacion-link__fila{ display:flex; gap:var(--sp-2); margin-top:var(--sp-2); }
.invitacion-link__fila input{
  flex:1; min-height:40px; padding:0 var(--sp-3); border-radius:var(--r-sm); border:1px solid var(--line-fuerte);
  background:var(--surface); color:var(--ink-2); font-size:12.5px;
}