/*
 * Sistema visual del área pública de Alumetrica
 * (landing, login, registro y recuperación de contraseña).
 *
 * Estas páginas van con Layout = null: cada una es un documento HTML suelto, así que
 * sin este archivo cada una terminaba con su propia paleta y su propio botón. El
 * usuario que hace clic en "Registrar empresa" tiene que aterrizar en algo que se vea
 * del mismo producto que acaba de mirar.
 *
 * El lenguaje visual está tomado de comunaclic.cl (gradiente animado, fotos con
 * crossfade, malla de puntos, glass, tarjetas que levantan con rebote) y traducido al
 * azul de Alumetrica.
 */

/* ═══════════════════════════════════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Superficies y texto (tema claro) */
    --bg: #f0f4f8;
    --surface: #ffffff;
    --surface-2: #e8edf2;
    --text: #0c1526;
    --text-muted: #5a6a7e;
    --border: rgba(0, 0, 0, .07);
    --nav-bg: rgba(240, 244, 248, .85);
    --card-bg: #ffffff;

    /* Marca */
    --primary: #0057a8;
    --primary-2: #0078cc;
    --primary-glow: rgba(0, 87, 168, .2);
    --accent: #00aad4;
    --accent-glow: rgba(0, 170, 212, .12);

    /* Azules profundos del hero y del footer. Fijos: son el fondo sobre el que
       va texto blanco, y no deben cambiar con el tema. */
    --deep-900: #001f40;
    --deep-800: #002d5c;
    --deep-700: #003f7a;

    /* Radios */
    --radius-sm: .375rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    /* Sombras. La de hover va teñida de marca: es lo que hace que la tarjeta
       "encienda" en vez de solo levantarse. */
    --card-shadow: 0 4px 24px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
    --card-shadow-hover: 0 20px 60px rgba(0, 87, 168, .18), 0 4px 12px rgba(0, 0, 0, .06);
    --shadow-dramatic: 0 24px 64px -12px rgba(0, 0, 0, .55);

    /* Curva de rebote: la microinteracción característica de ComunaClic. */
    --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

[data-theme="dark"] {
    --bg: #070e1c;
    --surface: #0d1a2e;
    --surface-2: #111f35;
    --text: #dde6f0;
    --text-muted: rgba(221, 230, 240, .55);
    --border: rgba(255, 255, 255, .08);
    --nav-bg: rgba(7, 14, 28, .85);
    --card-bg: rgba(255, 255, 255, .04);

    --primary: #5ac8e0;
    --primary-2: #3db8d8;
    --primary-glow: rgba(90, 200, 224, .2);
    --accent: #00aad4;
    --accent-glow: rgba(0, 170, 212, .14);

    --card-shadow: 0 4px 24px rgba(0, 0, 0, .3);
    --card-shadow-hover: 0 20px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(90, 200, 224, .2);
}

/* ═══════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background .3s, color .3s;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}
.ms-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* El foco tiene que verse: media página es un formulario de registro. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA
   El rasgo que se toma de ComunaClic: titulares muy pesados, muy apretados.
   ═══════════════════════════════════════════════════════════════════════ */

.al-display {
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.06;
}

.al-h2 {
    font-size: clamp(26px, 3.6vw, 40px);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.al-eyebrow {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--primary);
}

.al-lead {
    font-size: clamp(15px, 1.6vw, 17.5px);
    line-height: 1.65;
    color: var(--text-muted);
}

/* Encabezado de sección: barra vertical + eyebrow + título.
   El color de la barra lo pone cada sección con --sec-color. */
.al-sec-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 26px; }
.al-sec-bar {
    width: 6px; flex-shrink: 0; align-self: stretch; min-height: 44px;
    border-radius: var(--radius-full);
    background: linear-gradient(to bottom, var(--sec-color, var(--accent)), var(--primary));
}

/* ═══════════════════════════════════════════════════════════════════════
   FONDOS Y CAPAS DEL HERO
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes al-hero-gradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Base del hero. Siempre visible bajo las fotos: si una foto no carga, el hero
   sigue siendo legible en vez de quedar en blanco. */
.al-hero-bg {
    position: absolute; inset: 0;
    background: linear-gradient(-45deg, #001f40, #003f7a, #0057a8, #0078cc, #00aad4, #003f7a);
    background-size: 500% 500%;
    animation: al-hero-gradient 14s ease infinite;
}

/* Capa de foto. Se apilan dos y se alternan con opacidad. */
.al-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    will-change: opacity;
}
.al-slide--visible { opacity: 1; }

/* Overlays de legibilidad: uno direccional para el lado del texto y uno vertical
   para despegar el contenido de los bordes. */
.al-overlay-x {
    position: absolute; inset: 0;
    background: linear-gradient(100deg,
        rgba(0, 20, 45, .95) 0%,
        rgba(0, 45, 92, .82) 38%,
        rgba(0, 87, 168, .45) 68%,
        rgba(0, 120, 204, .12) 100%);
}
.al-overlay-y {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .38) 0%, transparent 35%, rgba(0, 0, 0, .5) 100%);
}

.al-dot-grid {
    background-image: radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 30px 30px;
}

.al-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   GLASS
   ═══════════════════════════════════════════════════════════════════════ */

.al-glass {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.al-glass-strong {
    background: rgba(6, 16, 32, .55);
    border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.al-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 15px;
    border-radius: var(--radius-full);
    font-size: 12.5px; font-weight: 700;
    color: rgba(255, 255, 255, .95);
}

@keyframes al-pulse-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 170, 212, .55); }
    50%      { box-shadow: 0 0 0 7px rgba(0, 170, 212, 0); }
}
.al-pulse-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    animation: al-pulse-ring 2.2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════════════════════════════════ */

.al-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; cursor: pointer;
    font-family: inherit; font-size: 15px; font-weight: 700;
    padding: 14px 28px;
    border-radius: var(--radius-full);
    text-decoration: none; white-space: nowrap;
    transition: transform .2s var(--ease-bounce), box-shadow .2s ease, background .2s ease, filter .2s ease;
}
.al-btn:active { transform: scale(.98); }

/* Primario: el CTA de conversión. */
.al-btn-primary {
    background: linear-gradient(135deg, #0078cc, #00aad4);
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 120, 204, .38);
}
.al-btn-primary:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 18px 44px rgba(0, 120, 204, .48); }

/* Sobre foto: vidrio. */
.al-btn-glass {
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .42);
    color: #fff;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.al-btn-glass:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .22); }

/* Sobre fondo oscuro sólido (banda de planes, CTA final). */
.al-btn-white {
    background: #fff;
    color: var(--deep-900);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}
.al-btn-white:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0, 0, 0, .3); }

/* Secundario en superficie clara. */
.al-btn-soft {
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--text);
    font-weight: 600;
}
.al-btn-soft:hover { transform: translateY(-3px); box-shadow: var(--card-shadow); }

.al-btn-sm { padding: 9px 18px; font-size: 13px; }
.al-btn-block { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   TARJETAS
   ═══════════════════════════════════════════════════════════════════════ */

.al-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--card-shadow);
}

.al-card-lift { transition: transform .28s var(--ease-bounce), box-shadow .28s ease; }
.al-card-lift:hover { transform: translateY(-7px) scale(1.015); box-shadow: var(--card-shadow-hover); }

/* ═══════════════════════════════════════════════════════════════════════
   TICKER (marquee de series)
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes al-marquee {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

.al-ticker {
    position: relative;
    overflow: hidden;
    /* Se difumina en los bordes para que las tarjetas no se corten en seco. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.al-ticker-track {
    display: flex; gap: 14px; width: max-content;
    animation: al-marquee 38s linear infinite;
    will-change: transform;
}
.al-ticker:hover .al-ticker-track { animation-play-state: paused; }

/* ═══════════════════════════════════════════════════════════════════════
   FORMULARIOS (login, registro, recuperación)
   ═══════════════════════════════════════════════════════════════════════ */

/* Pantalla de autenticación: el mismo fondo del hero, con la tarjeta encima. */
.al-auth {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 28px 16px;
    overflow: hidden;
}
.al-auth-layer { position: absolute; inset: 0; pointer-events: none; }
.al-auth-box { position: relative; z-index: 2; width: 100%; max-width: 440px; }
.al-auth-box--wide { max-width: 860px; }

.al-auth-card {
    background: rgba(8, 20, 38, .72);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-3xl);
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    box-shadow: var(--shadow-dramatic);
    padding: 32px;
    color: #eaf2fb;
}

.al-auth-title { font-size: 24px; font-weight: 900; letter-spacing: -.03em; color: #fff; }
.al-auth-sub   { font-size: 13.5px; color: rgba(234, 242, 251, .62); margin-top: 5px; line-height: 1.55; }

.al-field { margin-bottom: 16px; }
.al-label {
    display: block; margin-bottom: 6px;
    font-size: 12.5px; font-weight: 700;
    color: rgba(234, 242, 251, .78);
}
.al-label .req { color: #ff8a7a; margin-left: 2px; }

.al-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .06);
    border: 1.5px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-lg);
    color: #fff;
    font-family: inherit; font-size: 14.5px;
    transition: border-color .18s, background .18s, box-shadow .18s;
}
.al-input::placeholder { color: rgba(234, 242, 251, .34); }
.al-input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255, 255, 255, .09);
    box-shadow: 0 0 0 4px rgba(0, 170, 212, .16);
}
/* El desplegable nativo hereda el fondo del sistema: sus opciones necesitan
   color propio o quedan blanco sobre blanco en algunos navegadores. */
.al-input option { background: #0d1a2e; color: #fff; }

/* Icono dentro del campo */
.al-input-wrap { position: relative; }
.al-input-wrap .al-input { padding-left: 42px; }
.al-input-wrap .al-input-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 18px; color: rgba(234, 242, 251, .42); pointer-events: none;
}

.al-error {
    display: block; margin-top: 5px;
    font-size: 12px; font-weight: 600; color: #ff9a8c;
}
.al-alert {
    padding: 12px 14px; margin-bottom: 18px;
    border-radius: var(--radius-lg);
    font-size: 13px; line-height: 1.5;
    border: 1px solid rgba(255, 138, 122, .34);
    background: rgba(255, 78, 58, .12);
    color: #ffc4bb;
}
.al-alert-ok {
    border-color: rgba(52, 211, 153, .34);
    background: rgba(16, 185, 129, .12);
    color: #a7f3d0;
}

/* google-auth.js inyecta un div con esta clase cuando falla el login externo.
   El nombre lo fija ese archivo, así que la clase tiene que seguir existiendo
   aunque el marcado de las páginas ya no la use. */
.error-box {
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 138, 122, .4);
    background: rgba(40, 8, 4, .92);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: #ffc4bb;
    font-size: 13.5px; font-weight: 600;
    box-shadow: var(--shadow-dramatic);
}

.al-auth-link { color: var(--accent); text-decoration: none; font-weight: 700; }
.al-auth-link:hover { text-decoration: underline; }

.al-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0;
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
    color: rgba(234, 242, 251, .38);
}
.al-divider::before, .al-divider::after {
    content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .12);
}

/* Marca sobre fondo oscuro (cabecera de las pantallas de cuenta) */
.al-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.al-brand-logo {
    width: 46px; height: 46px; border-radius: 13px;
    background: linear-gradient(135deg, #0057a8, #00aad4);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 120, 204, .42);
    flex-shrink: 0;
}
.al-brand-name { font-size: 17px; font-weight: 900; letter-spacing: -.02em; color: #fff; }
.al-brand-sub {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .17em;
    color: rgba(234, 242, 251, .5); margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO
   Todo lo que se mueve solo se detiene; nada se oculta.
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .al-hero-bg    { animation: none; background-size: 100% 100%; }
    .al-slide      { transition: none; }
    .al-ticker-track { animation: none; }
    .al-pulse-dot  { animation: none; }
    .al-card-lift  { transition: none; }
    .al-card-lift:hover { transform: none; }
    .al-btn:hover  { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .al-auth-card { padding: 24px 20px; border-radius: var(--radius-2xl); }
    .al-btn { padding: 13px 22px; font-size: 14.5px; }
    .al-sec-head { gap: 11px; }
}