/* ==========================================================
   NOXIS — ESTILOS COMPARTIDOS (login.html y registrate.html)
   Tokens de color, mecánica del "stage" responsivo (cqw) y
   componentes visuales reutilizables. Cada página (stylelogin.css,
   styleregister.css) importa este archivo y solo agrega POSICIONES
   y tamaños específicos de su propio layout.
   ========================================================== */

:root {
  --color-bg: #04070A;
  --color-gold: #BE8A44;
  --color-panel: #28113E;        /* activo / hover / seleccionado */
  --color-panel-dark: #0C0A12;   /* tarjetas y contenedores en reposo */
  --color-panel-50: rgba(40, 17, 62, 0.502);
  --color-panel-dark-50: rgba(12, 10, 18, 0.85); /* formularios y ventanas emergentes */
  --color-input-bg: rgba(255, 255, 255, 0.102);
  --color-placeholder: rgba(255, 255, 255, 0.302);
  --color-white: #FFFFFF;
  --font-body: 'Segoe UI', Arial, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

.login-page {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--color-bg);
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fondo de pantalla completa */
.login-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ----------------------------------------------------------
   Escenario: mantiene proporción exacta 390 x 844 y se
   centra/escala según el tamaño de pantalla (sin JS).
   ---------------------------------------------------------- */
.login-stage {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  width: min(390px, 100vw, calc(100vh * 390 / 844));
  aspect-ratio: 390 / 844;
}

/* ----------------------------------------------------------
   Tarjeta translúcida (fil2: #28113E al 50% opacidad)
   left/width/radius son iguales en ambas páginas; cada página
   define su propio top/height según cuánto contenido tenga.
   ---------------------------------------------------------- */
.login-card {
  position: absolute;
  left: 6.666cqw;
  width: 86.667cqw;
  border-radius: 1.538cqw;
  background-color: var(--color-panel-dark-50);
}

/* Envoltorios de tamaño completo que NO deben bloquear clics
   (solo sus hijos interactivos los reciben vía pointer-events:auto) */
.login-header,
.login-form {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Logo NOXIS — posición idéntica en ambas páginas */
.login-logo {
  position: absolute;
  top: 7.179cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 45.128cqw;   /* 176px a tamaño completo */
  height: auto;
}

/* ----------------------------------------------------------
   Tipografía base reutilizable
   ---------------------------------------------------------- */
/* fnt1: Segoe UI bold 4.211px -> 16.55px (títulos) */
.heading-bold {
  margin: 0;
  font-size: 4.244cqw;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.02em;
}

/* fnt3: Segoe UI normal 4.211px -> 16.55px (texto de cuerpo) */
.text-body {
  margin: 0;
  font-size: 4.244cqw;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-white);
}

/* fnt2: Segoe UI normal 3.088px -> 12.14px (texto pequeño) */
.text-small {
  font-size: 3.113cqw;
  color: var(--color-white);
}

.hover-underline:hover,
.hover-underline:focus {
  text-decoration: underline;
}

/* Enlace dorado (fil3 / fnt4 bold) — "REGISTRATE", "INICIA SESIÓN", etc. */
.gold-link {
  color: var(--color-gold);
  font-weight: 700;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
}
.gold-link:hover,
.gold-link:focus {
  text-decoration: underline;
}

/* ----------------------------------------------------------
   Campos de texto (fil5: blanco al 10% opacidad)
   El tamaño/posición lo da el contenedor .input-group de cada
   página; este input es 100% del contenedor.
   ---------------------------------------------------------- */
.input-field {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  border-radius: 1.572cqw;
  background-color: var(--color-input-bg);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 4.244cqw;
  padding: 0 6cqw;
  pointer-events: auto;
}
.input-field::placeholder {
  color: var(--color-placeholder);
}
.input-field:focus {
  background-color: rgba(255, 255, 255, 0.16);
}

/* ----------------------------------------------------------
   Botones (fil7: #28113E sólido + borde dorado)
   Cada página define left/top/width específicos.
   ---------------------------------------------------------- */
.btn {
  position: absolute;
  height: 12.821cqw;
  background-color: var(--color-panel);
  border: 0.257cqw solid var(--color-gold);
  border-radius: 1.538cqw;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 4.244cqw;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.btn:hover {
  background-color: #341a4d;
}

.btn-google {
  gap: 4.73cqw;
}

.google-icon {
  width: 7.179cqw;
  height: 7.179cqw;
  flex-shrink: 0;
}

/* Divisor "O" entre el botón principal y el de Google */
.login-divider {
  position: absolute;
  font-size: 4.244cqw;
  color: var(--color-white);
}

/* Botón "ojo" (mostrar/ocultar contraseña) y botón "calendario"
   (abrir selector de fecha) — mismo estilo visual para ambos, dentro
   del .input-group (que sirve de contenedor de referencia para
   posicionar el icono sin afectar su propia posición) */
.input-field.has-toggle {
  padding-right: 12cqw;
}

.toggle-password,
.date-icon {
  position: absolute;
  right: 3cqw;
  top: 50%;
  transform: translateY(-50%);
  width: 7cqw;
  height: 7cqw;
  min-width: 18px;
  min-height: 18px;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  pointer-events: auto;
}
.toggle-password:hover,
.toggle-password:focus,
.date-icon:hover,
.date-icon:focus {
  color: var(--color-white);
}
.toggle-password svg,
.date-icon svg {
  width: 100%;
  height: 100%;
}

/* Banner de error del servidor (login/registro incorrecto, etc.)
   Cada página define su propia posición/margen. */
.server-error {
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid #FF6B6B;
  color: #FF6B6B;
  border-radius: 1.2cqw;
  padding: 2.5cqw 3cqw;
  font-size: 3.3cqw;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}

/* El banner en sí no recibe clics (pointer-events: none arriba), pero si
   contiene un enlace (p. ej. "Inicia sesión en su lugar.") ese enlace sí
   debe ser clicable. */
.server-error a {
  pointer-events: auto;
}

/* Accesibilidad: oculta visualmente las etiquetas de los inputs
   sin quitarlas del árbol de accesibilidad */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ----------------------------------------------------------
   Portada (banner de fondo, sin texto de datos): usada por
   Eventos, Producciones, Media, Tienda y Contacto. La imagen
   se sube desde el CMS (ver CMS/portada-widget.js) y se carga
   aquí con assets/js/portada-publica.js. Se queda oculto si no
   hay portada guardada.
   ---------------------------------------------------------- */
.portada-hero {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  background-color: var(--color-panel-dark);
}
.portada-hero[hidden] { display: none; }

.portada-hero-img {
  display: block;
  width: 100%;
  height: auto;
}

.portada-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 7, 10, 0.05) 0%, rgba(4, 7, 10, 0.55) 55%, rgba(4, 7, 10, 0.92) 100%);
}