/*
 * login.css
 * ============================================================
 * Cargado por: templates/login.html (bloque "head", con cache-bust
 *   "?v=20260825-violet-rebrand").
 * Página que estiliza: la pantalla de inicio de sesión del panel --
 *   un layout de dos columnas (panel de "intro" con degradado de marca
 *   a la izquierda + tarjeta del formulario de login a la derecha) que
 *   ocupa toda la altura de la ventana, sin scroll ni pie de página.
 * ============================================================
 */

/* Contenedor raíz de la página de login: reemplaza el layout normal
   del panel (que suele tener scroll y footer) por una rejilla de
   altura completa de viewport (100dvh, la unidad dinámica que
   descuenta barras de navegador móviles) con la topbar fija arriba y
   el contenido ocupando el resto. overflow: hidden evita que la página
   haga scroll -- todo debe caber en pantalla. */
.login-page {
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr);
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
}
/* La topbar dentro de esta página necesita position: relative para que
   sus elementos posicionados de forma absoluta (si los hay) se ubiquen
   respecto a ella. */
.login-page .topbar { position: relative; }
/* El <main> de la página ocupa todo el alto/ancho disponible sin el
   padding ni el max-width que tiene normalmente en el resto del panel
   (aquí el layout de login se controla enteramente con CSS propio). */
.login-page main {
  height: 100%;
  max-width: none;
  min-height: 0;
  padding: 0;
  width: 100%;
}
/* El pie de página global del panel se oculta por completo en login --
   la pantalla de acceso no lleva footer. */
.login-page > footer { display: none; }
/* Fondo de toda la zona de contenido: un degradado radial sutil de
   color primario en la esquina superior izquierda, combinado con el
   color de fondo base de la página, más un padding fluido (clamp) que
   crece con el ancho de la ventana. place-items: center centra la
   tarjeta de login dentro de este fondo. */
.login-shell {
  background:
    radial-gradient(circle at 9% 12%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 32%),
    var(--bg);
  display: grid;
  height: 100%;
  padding: clamp(18px, 4vw, 54px);
  place-items: center;
}
/* Tarjeta principal ("stage"): la caja blanca/oscura con sombra grande
   que contiene las dos columnas (intro + formulario). Se divide en dos
   columnas de ancho flexible (1.15fr para la intro, .85fr para el
   formulario) con un mínimo de 360px cada una para que no se aplasten
   en anchos intermedios. */
.login-stage {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgb(0 0 0 / 24%);
  display: grid;
  grid-template-columns: minmax(360px, 1.15fr) minmax(360px, .85fr);
  height: min(650px, 100%);
  max-width: 1080px;
  overflow: hidden;
  width: 100%;
}
/* Columna izquierda ("intro"): panel de marca con degradado del color
   primario al color de acento secundario, texto blanco fijo (no usa
   variables de tema porque siempre va sobre el degradado de color).
   position: relative sirve de referencia para el círculo decorativo
   (::after) definido a continuación. */
.login-intro {
  background: linear-gradient(145deg, var(--primary), var(--accent-2));
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(34px, 5vw, 66px);
  position: relative;
}
/* Círculo decorativo semitransparente que sobresale de la esquina
   superior derecha del panel de intro -- puro adorno visual, sin
   contenido (content: ""), posicionado fuera del borde con valores
   negativos de right/top. */
.login-intro::after {
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  content: "";
  height: 330px;
  position: absolute;
  right: -180px;
  top: -140px;
  width: 330px;
}
/* Texto pequeño en mayúsculas encima del titular (p. ej. "Bienvenido"),
   en blanco semitransparente para que destaque menos que el título. */
.login-intro .eyebrow { color: rgb(255 255 255 / 82%); }
/* Titular principal del panel de intro: tamaño fluido con clamp para
   adaptarse entre pantallas pequeñas y grandes. */
.login-intro h1 {
  font-size: clamp(30px, 3.3vw, 48px);
  letter-spacing: -.04em;
  line-height: 1.08;
  margin: 12px 0 18px;
  max-width: 650px;
}
/* Párrafo descriptivo debajo del titular (excluyendo el "eyebrow", que
   ya tiene su propio estilo de opacidad distinto). */
.login-intro p:not(.eyebrow) {
  color: rgb(255 255 255 / 72%);
  font-size: 14px;
  max-width: 460px;
}
/* Isotipo/logo mostrado en la parte superior del panel de intro. */
.login-intro-mark {
  display: block;
  height: 48px;
  object-fit: contain;
  width: 48px;
}
/* Texto al pie del panel de intro (p. ej. nombre de la compañía o
   claim), en mayúsculas y muy tenue. */
.login-intro-foot {
  color: rgb(255 255 255 / 62%);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Columna derecha: la tarjeta del formulario en sí. Se le quita el
   fondo/borde/sombra propios de ".login-card" como clase genérica
   (background/border/box-shadow anulados a "transparente/0/none")
   porque aquí ya vive dentro de .login-stage, que aporta su propia
   caja visual -- evita duplicar el efecto de tarjeta dentro de la
   tarjeta. */
.login-card {
  align-self: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: clamp(34px, 5vw, 64px);
  width: 100%;
}
/* Cabecera alternativa con logo + nombre de marca dentro de la propia
   tarjeta del formulario -- oculta en escritorio (display: none) y
   solo se muestra en el layout móvil (ver media query al final),
   donde el panel de intro desaparece y esta cabecera lo sustituye. */
.login-card-heading { align-items: center; display: none; gap: 10px; margin-bottom: 28px; }
.login-card-heading > div { display: grid; line-height: 1; }
.login-card-heading strong { font-size: 13px; letter-spacing: .06em; }
.login-card-heading small { color: var(--muted); font-size: 8px; letter-spacing: .12em; margin-top: 5px; text-transform: uppercase; }
/* Logo pequeño usado dentro de la cabecera móvil de la tarjeta. */
.login-card-mark { display: block; height: 34px; object-fit: contain; width: 34px; }
/* Título del formulario (p. ej. "Iniciar sesión"). */
.login-card h2 { font-size: 30px; letter-spacing: -.025em; margin: 5px 0 4px; }
/* Pila vertical de campos del formulario (usuario/contraseña + botón),
   con espaciado uniforme entre elementos. */
.stack { display: grid; gap: 13px; margin-top: 22px; }
.stack label { color: var(--muted); display: grid; font-size: 11px; gap: 5px; }
.login-card .stack input { border-radius: 9px; min-height: 43px; padding-inline: 12px; width: 100%; }
/* Botón de envío del formulario: color primario sólido, texto blanco. */
.login-card .stack button { background: var(--primary); border: 0; border-radius: 9px; color: #fff; cursor: pointer; font-weight: 800; margin-top: 4px; min-height: 44px; }
.login-card .stack button:hover { background: var(--primary-hover); }
/* Nota de seguridad debajo del formulario (p. ej. "conexión cifrada"),
   centrada y en tamaño muy pequeño. */
.login-security-note { color: var(--muted); font-size: 9px; margin: 18px 0 0; text-align: center; }
/* Icono/símbolo (p. ej. candado) antes del texto de la nota de
   seguridad, en verde para transmitir confianza. */
.login-security-note span { color: var(--green); font-size: 8px; margin-right: 5px; }
/* Bloque de "recuperación de acceso" (p. ej. enlace de soporte/reset de
   contraseña) separado del formulario por una línea divisoria. */
.login-recovery { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 10px; margin-top: 20px; padding-top: 16px; }
/* Icono cuadrado junto al texto de recuperación. */
.login-recovery-icon { align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; color: var(--primary); display: flex; flex: 0 0 auto; font-size: 15px; height: 32px; justify-content: center; width: 32px; }
.login-recovery > span:last-child { display: grid; gap: 2px; }
.login-recovery small { color: var(--muted); font-size: 9px; }
.login-recovery a { color: var(--primary); font-size: 11px; font-weight: 750; text-decoration: none; }
.login-recovery a:hover { text-decoration: underline; }
/* Responsive: en pantallas angostas se abandona el layout de dos
   columnas -- el panel de intro (.login-intro) se oculta por completo,
   la tarjeta pasa a ocupar todo el ancho disponible en modo bloque
   (no grid) con altura automática, y aparece la cabecera compacta
   (.login-card-heading) con logo + marca que reemplaza visualmente al
   panel de intro ausente. También se reduce la topbar y se oculta el
   texto de la marca en ella (dejando solo el isotipo) para ahorrar
   espacio vertical. */
@media (max-width: 760px) {
  .login-page { grid-template-rows: 54px minmax(0, 1fr); min-height: 540px; }
  .login-page .topbar { min-height: 54px; padding-block: 8px; }
  .login-page .topbar .brand { visibility: hidden; }
  .login-page .topbar .brand-mark { visibility: visible; }
  .login-shell { padding: 12px; }
  .login-stage { border-radius: 16px; display: block; height: auto; max-width: 430px; }
  .login-intro { display: none; }
  .login-card { padding: clamp(24px, 7vw, 38px); }
  .login-card-heading { display: flex; }
  .login-card h2 { font-size: 27px; }
  .login-card .stack { gap: 10px; margin-top: 17px; }
  .login-card .stack input, .login-card .stack button { min-height: 41px; }
}