/* ─── auth-brand.css — panel de marca Vitalis-BO para pantallas de login ────
   Compartido entre login.html y superadmin/index.html. El formulario en sí
   (.login-card y sus campos) se define aparte en cada página. */

.auth-brand{
  flex:1 1 46%;background-color:#0b1622;color:#e8fbf9;position:relative;
  display:flex;align-items:center;justify-content:center;padding:48px 40px;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:36px 36px;
}
.auth-brand-inner{max-width:360px;text-align:center}
.vb-logo-wrap{margin-bottom:22px}
/* La marca vectorial. 84px = los mismos 3x24 + 2x6 de gap que arma la cruz
   de CSS de abajo, para que el respaldo ocupe exactamente lo mismo y la
   palabra no salte de lugar si el SVG no llega. */
.vb-marca{width:84px;height:84px;display:block;margin:0 auto 16px}
.vb-logo-img{max-width:220px;width:100%;display:none;margin:0 auto}
.vb-cross{width:84px;display:grid;grid-template-columns:repeat(3,24px);grid-template-rows:repeat(3,24px);gap:6px;margin:0 auto 16px;justify-content:center}
.vb-cross span{border-radius:6px}
.vb-cross span:nth-child(1),.vb-cross span:nth-child(3),.vb-cross span:nth-child(7),.vb-cross span:nth-child(9){background:transparent}
.vb-cross span:nth-child(2),.vb-cross span:nth-child(8){background:linear-gradient(135deg,#5ee7df,#2fb6c4)}
.vb-cross span:nth-child(4),.vb-cross span:nth-child(6){background:linear-gradient(135deg,#2fb6c4,#187f96)}
.vb-cross span:nth-child(5){background:linear-gradient(135deg,#8ff3ec,#3fc6d1)}
.vb-wordmark{font-size:24px;font-weight:800;letter-spacing:1px;color:#5ee7df}
.vb-wordmark span{color:#fff}
.auth-tagline{font-size:14.5px;color:#a9cfcb;margin:14px 0 26px;line-height:1.6}
.auth-points{list-style:none;text-align:left;display:flex;flex-direction:column;gap:14px}
.auth-points li{font-size:13px;color:#cfeeeb;display:flex;align-items:flex-start;gap:10px}
.auth-points i{color:#5ee7df;margin-top:2px;flex-shrink:0}

.auth-panel{flex:1 1 54%;display:flex;align-items:center;justify-content:center;padding:24px}


/* ─── El FONDO de la pantalla de entrada ────────────────────────────────────
   Va detras de LAS DOS mitades: del panel de Vitalis y de la ventana donde se
   escriben las credenciales.

   Gateado por .auth-fondo a proposito. Esta hoja la comparten CUATRO pantallas
   -- login, establecer-contrasena, shell.html (Tauri) y el panel super-admin --
   y solo las dos primeras son de un tenant. Sin la clase, las otras dos quedan
   exactamente como estaban.

   La imagen es la variable --auth-fondo, que arranca en el SVG local.
   login.html la pisa con /img/fondo-login.jpg si esa foto existe. El SVG NO
   puede fallar: es un archivo del propio servidor, que en una clinica corre en
   la maquina del cliente y puede no tener internet (CLAUDE.md §6). */
/* La maqueta de .auth-shell (display:flex, min-height) NO se declara acá: ya
   vive en page-transition.css, que estas pantallas cargan. Estuvo repetida un
   rato y se saco — dos definiciones de lo mismo en dos hojas es como terminan
   diciendo cosas distintas. Las capas del fondo son position:fixed, o sea que
   se ubican contra la ventana y no necesitan un ancestro posicionado. */
.auth-fondo{
  --auth-fondo:url('/img/fondo-login.svg');
  isolation:isolate;
}
.auth-fondo::before{
  content:'';position:fixed;inset:0;z-index:-1;
  background-image:var(--auth-fondo);
  background-size:cover;background-position:center;
}
/* El velo. Oscuro a la izquierda, donde va el texto blanco de Vitalis, y casi
   transparente a la derecha, donde el pasillo TIENE que verse.

   ⚠ Dos cosas que la primera version hizo mal, y las dos las mostro una
   captura con la geometria en verde:
   · terminaba en rgba(233,241,246,.58) -- casi medio punto de blanco encima de
     una imagen ya clara. El pasillo desaparecia y quedaba un rectangulo pastel;
   · pasaba de .55 a .42 entre el 46% y el 62%, un salto corto sobre colores muy
     distintos: se veia una COSTURA vertical a la altura del corte de los dos
     paneles. La transicion va de 38% a 66%, y por eso son cinco paradas y no
     tres. */
.auth-fondo::after{
  content:'';position:fixed;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(8,24,32,.94) 0%,  rgba(8,24,32,.91) 30%,
    rgba(9,26,36,.78) 38%, rgba(12,32,44,.40) 48%,
    rgba(120,150,170,.10) 58%, rgba(150,178,196,.06) 66%,
    rgba(190,214,230,.05) 100%);
}
/* ⚠ HAY DOS VELOS Y NO ES UN CAPRICHO: DEPENDE DE QUÉ IMAGEN ESTÉ PUESTA.
   El de arriba es para el VECTOR, donde el lado oscuro lo pone el velo —
   sin él, el texto claro de Vitalis quedaría sobre un pasillo iluminado.
   El de abajo es para una FOTO, que viene compuesta con su mitad oscura: con
   el velo fuerte encima se oscurece DOS VECES y se pierde la malla del piso.
   La clase la pone `fondo-auth.js` cuando la foto carga de verdad, así que el
   velo correcto se elige solo. Con un valor único, una de las dos queda mal —
   y las dos versiones ya pasaron por acá. */
.auth-fondo.fondo-foto::after{
  background:linear-gradient(100deg,
    rgba(8,24,32,.42) 0%,  rgba(8,24,32,.38) 30%,
    rgba(9,26,36,.32) 38%, rgba(12,32,44,.20) 48%,
    rgba(120,150,170,.10) 58%, rgba(150,178,196,.06) 66%,
    rgba(190,214,230,.05) 100%);
}

/* La mitad de Vitalis deja de pintar su propio fondo opaco: ahora el fondo es
   de la pantalla entera y esta mitad solo aporta su trama. Con el color de
   antes (#0b1622 solido) la foto quedaba tapada justo del lado que en la
   referencia se ve oscuro pero VIVO. */
.auth-fondo .auth-brand{
  background-color:transparent;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:38px 38px;
}
/* ⚠ Y LA CUADRÍCULA, POR LO MISMO. Con el vector es lo único que da textura a
   ese lado. Una foto ya trae la suya —la del pasillo tiene una malla en
   perspectiva sobre el piso— y las dos encima no se leen como textura sino
   como un error de maqueta. */
.auth-fondo.fondo-foto .auth-brand{
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
}
.auth-fondo .auth-panel{background:transparent}

/* ─── La identidad del TENANT en la tarjeta ─────────────────────────────────
   Reemplaza al par .brand-icon + .brand-name que venia del prototipo, y no por
   gusto: ese icono es de 48px con object-fit:cover, y los logos que la gente
   sube son de 512x512 con el logotipo chico y mucho margen blanco alrededor --
   a 48px eso es una mancha ilegible. Encima el logo de esta clinica trae la
   palabra "Virgen del Rosario" DENTRO, asi que al lado de un texto que decia lo
   mismo el nombre aparecia DOS VECES.

   Y los logos no son todos iguales: uno de los consultorios subio una FOTO del
   profesional a sangre completa. Por eso el logo va en una caja cuadrada, con
   fondo blanco y contain: un logotipo con margenes se apoya sobre su propio
   blanco y una foto llena la caja sin recortarse. Todos los que hay hoy son 1:1
   porque el recortador lo fuerza, pero contain es lo que aguanta el dia que
   entre uno que no lo sea. */
.tenant-id{text-align:center;margin-bottom:26px}
.tenant-logo{
  width:104px;height:104px;margin:0 auto 14px;border-radius:22px;
  background:#fff;border:1px solid #e2e8f0;
  box-shadow:0 6px 20px rgba(15,42,58,.14);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:38px;color:#1a6fc4;
}
.tenant-logo img{width:100%;height:100%;object-fit:contain;display:block;padding:9px}
/* El rotulo del tipo de establecimiento: "Clinica", "Consultorio dental". Sale
   del VERTICAL, no se escribe a mano -- es el dato que ya dice que edicion
   compro el cliente. */
.tenant-kicker{
  font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:#64748b;margin-bottom:1px;
}
.tenant-name{font-size:25px;font-weight:800;color:#0f2a3a;line-height:1.15;letter-spacing:-.3px}
.tenant-sub{font-size:12.5px;color:#64748b;margin-top:6px;line-height:1.45}

/* La tarjeta, sobre la foto. El desenfoque de atras es un extra: donde no
   exista, queda el blanco de siempre y no se pierde nada. */
.auth-fondo .login-card{
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 18px 50px rgba(8,24,33,.30);
}

/* En pantalla angosta la mitad de Vitalis se esconde (regla de abajo) y la
   tarjeta queda sola sobre la foto. Ahi el velo tiene que ser parejo de los dos
   lados, o la tarjeta flota sobre un pasillo a plena luz. */
@media (max-width:820px){
  .auth-fondo::after{background:linear-gradient(180deg,rgba(9,26,34,.86),rgba(9,26,34,.72))}
  .tenant-logo{width:88px;height:88px;border-radius:19px}
  .tenant-name{font-size:22px}
}

@media (max-width:820px){ .auth-brand{display:none} .auth-panel{flex:1 1 100%} }