/* =====================================================================
   MiTv 2.0 / LeCache - Portal publico: capa de identidad  (MITV-926)
   ---------------------------------------------------------------------
   El portal (landing, acceso, registro y recuperacion) traia su propia
   paleta morada (#6c5ce7), sin relacion con la del producto. El usuario
   veia una identidad al registrarse y otra al entrar.

   Esta hoja se carga DESPUES del <style> incrustado de cada pagina y
   redefine SOLO aspecto: tokens, superficies, botones y campos. No toca
   el marcado, ni los identificadores de los campos, ni el JavaScript de
   los pasos de registro/recuperacion, ni ninguna URL.

   Se apoya en que las cuatro paginas comparten el mismo vocabulario de
   clases (.page .card .btn .field .links .brand ...), que es lo que
   permite unificarlas con un unico archivo.
   ===================================================================== */

:root {
    --bg:          #06080c;
    --card:        rgba(17, 22, 31, .82);
    --accent:      #8ecbff;
    --accent-lt:   #b6ddff;
    --accent-glow: rgba(142, 203, 255, .32);
    --green:       #34d399;
    --green-glow:  rgba(52, 211, 153, .25);
    --red:         #f87171;
    --txt:         #f2f6fb;
    --txt2:        #9aa8bd;
    --txt3:        #6b7889;
    --border:      #202936;
    --radius:      14px;

    --mv-ink:      #05131f;   /* texto sobre el acento claro */
    --mv-surface:  #11161f;
    --mv-surface2: #171e29;
    --mv-font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

html, body {
    font-family: var(--mv-font);
    background: #06080c;
    color: var(--txt);
    -webkit-font-smoothing: antialiased;
}

/* Ambiente cinematografico: dos focos frios en lugar del morado */
body::before {
    background:
        radial-gradient(900px 520px at 18% 16%, rgba(142, 203, 255, .11), transparent 62%),
        radial-gradient(760px 460px at 84% 80%, rgba(167, 139, 250, .07), transparent 60%) !important;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .9);
}

/* --- Marca ---------------------------------------------------------- */
.brand-icon {
    background: linear-gradient(135deg, #a9d8ff 0%, #6bb6f5 100%);
    box-shadow: 0 0 26px -6px var(--accent-glow);
    border-radius: 22px;
}
.brand-icon svg { fill: var(--mv-ink); }
.brand h1 { color: #fff; letter-spacing: -.03em; font-weight: 800; }
.brand p { color: var(--txt2); }
.rotating-text span { color: var(--accent); font-weight: 750; letter-spacing: -.02em; }

/* --- Botones -------------------------------------------------------- */
/* Nota: el acento es claro, asi que el boton principal lleva tinta oscura.
   Mantener el texto blanco sobre el acento daria un contraste insuficiente
   y en television es directamente ilegible. */
.btn {
    border-radius: 999px;
    font-family: var(--mv-font);
    font-weight: 650;
    letter-spacing: .01em;
    min-height: 54px;
    transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}
.btn:active { transform: scale(.985); }

.btn-primary,
.btn-register {
    background: linear-gradient(135deg, #a9d8ff 0%, #6bb6f5 100%);
    color: var(--mv-ink);
    border: 0;
    box-shadow: 0 10px 26px -14px var(--accent-glow);
}
.btn-primary:hover,
.btn-register:hover { background: #fff; color: var(--mv-ink); transform: translateY(-1px); }
.btn-primary svg, .btn-register svg { stroke: currentColor; fill: none; }
.btn-primary:disabled { opacity: .45; }

.btn-login {
    background: transparent;
    border: 1px solid #2c3849;
    color: var(--txt);
}
.btn-login:hover { background: var(--mv-surface2); border-color: #3d4b5f; color: #fff; }

.btn-free,
.btn-green {
    background: rgba(52, 211, 153, .10);
    border: 1px solid rgba(52, 211, 153, .38);
    color: var(--green);
}
.btn-free:hover, .btn-green:hover { background: rgba(52, 211, 153, .18); color: var(--green); }
.btn-green:disabled { opacity: .45; }

/* --- Campos --------------------------------------------------------- */
.field label { color: var(--txt2); font-weight: 600; }
.field input,
.code-input {
    background: var(--mv-surface);
    border: 1px solid #2c3849;
    border-radius: 10px;
    color: var(--txt);
    font-family: var(--mv-font);
}
.field input::placeholder { color: var(--txt3); }
.field input:focus,
.code-input:focus {
    border-color: var(--accent);
    background: var(--mv-surface2);
    box-shadow: 0 0 0 3px rgba(142, 203, 255, .14);
    outline: none;
}
.field input:disabled { opacity: .55; }

/* --- Enlaces y avisos ------------------------------------------------ */
.links a, .promo a, .footer a, .forgot-link a, .back-link, .resend-link {
    color: var(--accent);
    font-weight: 600;
}
.links a:hover, .promo a:hover, .footer a:hover,
.forgot-link a:hover, .back-link:hover, .resend-link:hover { color: #fff; }
.links .sep { color: var(--txt3); }

.error-msg   { color: var(--red); }
.success-msg { color: var(--green); }
.info-msg    { color: var(--txt2); }
.result-box {
    background: var(--mv-surface);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.result-box .checkmark, .checkmark { color: var(--green); }
.username-display, .result-box .username-display { color: var(--accent); }

.divider span { color: var(--txt3); }
.divider::before, .divider::after { background: var(--border); }
.secure-badge { color: var(--txt3); }
.secure-badge svg { stroke: var(--green); }
.spinner { border-top-color: var(--mv-ink); }

/* --- Foco visible: teclado y mando ----------------------------------- */
.btn:focus-visible,
.field input:focus-visible,
.links a:focus-visible,
.back-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #06080c, 0 0 0 6px var(--accent);
}

/* --- Pantallas grandes / television ---------------------------------- */
@media (min-width: 1600px) {
    .page { zoom: 1.15; }
    .btn { min-height: 62px; font-size: 18px; }
}
@media (max-width: 480px) {
    .card { border-radius: 18px; }
}