/* ============================================================
   SERIES — TEMA "STREAMING EN CASA AZUL MARINO" (CSS/SeriesAzul) · PÁGINA LOGIN
   Misma paleta que series.css; esta página solo carga login.css,
   así que el fichero es autosuficiente para el DOM del login.
   Los estilos inline del HTML se neutralizan con !important.
   ============================================================ */

:root {
    --sx-bg: #0b0b10;
    --sx-bg-2: #111118;
    --sx-bg-3: #1a1a26;
    --sx-card: #15151d;
    --sx-fg: #ececf1;
    --sx-fg-dim: #9a9aa6;
    --sx-fg-faint: #5c5c6b;
    --sx-accent: #1e4e9e;
    --sx-accent-br: #4a82e8;
    --sx-accent-dark: #0f2b63;
    --sx-gold: #f5c518;
    --sx-err: #ff4d5e;
    --sx-border: rgba(255, 255, 255, 0.10);
    --sx-border-2: rgba(255, 255, 255, 0.18);
    --sx-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
    --sx-glow: 0 0 22px rgba(30, 78, 158, 0.35);
    --sx-radius: 12px;
    --sx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    width: 99%;
    font-family: var(--sx-font);
    align: center;
    padding: 3px;
    margin: 0;
    color: var(--sx-fg);
    background:
        radial-gradient(1100px 520px at 50% -12%, rgba(30, 78, 158, 0.14), transparent 62%),
        radial-gradient(800px 460px at 88% 112%, rgba(245, 197, 24, 0.06), transparent 60%),
        linear-gradient(180deg, #0c0c12 0%, #08080c 100%);
    background-color: var(--sx-bg);
    animation: sxFadeIn 0.35s ease-out;
}
@keyframes sxFadeIn { from { opacity: 0; } to { opacity: 1; } }

::selection { background: var(--sx-accent); color: #fff; }

:focus-visible { outline: 2px solid var(--sx-accent); outline-offset: 2px; }

/* Tarjeta principal de login (div.contenedor.clarisimo) */
.contenedor {
    width: 99%;
    margin: auto auto;
    padding: 16px;
    border: 1px solid var(--sx-border-2);
    border-radius: var(--sx-radius);
    box-shadow: var(--sx-shadow);
}
.clarisimo {
    background-color: var(--sx-card) !important;
    background-image: none !important;
    color: var(--sx-fg) !important;
}

a {
    text-decoration: none;
    display: block;
    text-align: center;
    margin-top: 10px;
    color: var(--sx-fg);
}
a:hover { color: var(--sx-accent-br); }

/* Caja del logo (div name="titulo" class="titulo") */
.titulo {
    max-width: 1024px; width: 80%; height: 100%;
    border: 1px solid var(--sx-border-2);
    background-color: var(--sx-bg-2);
    color: var(--sx-fg);
    text-transform: uppercase;
    border-radius: var(--sx-radius);
    box-shadow: var(--sx-shadow);
    padding: 8px;
}

/* Resplandor del logo (mismo detalle que la cabecera de la app) */
@keyframes sxLogoGlow {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(30, 78, 158, 0.25)); }
    50%      { filter: drop-shadow(0 0 14px rgba(30, 78, 158, 0.6)); }
}
div[name="titulo"] img { animation: sxLogoGlow 3.4s ease-in-out infinite; }

/* Formulario de login */
#formularioLogin { margin: 0 auto; }

input[type="text"], input[type="password"] {
    width: 90%;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 8px;
    border: 1px solid var(--sx-border-2);
    background-color: #0e0e15 !important;
    background-image: none !important;
    color: var(--sx-fg) !important;
    font-family: var(--sx-font);
    caret-color: var(--sx-accent-br);
    transition: border-color 0.2s, box-shadow 0.2s;
}
input::placeholder { color: var(--sx-fg-faint); }
input:focus {
    border-color: var(--sx-accent);
    box-shadow: 0 0 0 3px rgba(30, 78, 158, 0.25);
}

/* Botón "Iniciar sesión": rojo tipo Netflix */
button {
    background: linear-gradient(135deg, var(--sx-accent), var(--sx-accent-dark)) !important;
    background-image: linear-gradient(135deg, var(--sx-accent), var(--sx-accent-dark)) !important;
    color: #fff !important;
    margin: 5px;
    padding: 1em 1.6em;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(30, 78, 158, 0.4);
    font-family: var(--sx-font);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
button:hover {
    background: linear-gradient(135deg, var(--sx-accent-br), var(--sx-accent)) !important;
    box-shadow: var(--sx-glow), 0 6px 22px rgba(30, 78, 158, 0.5);
    transform: translateY(-1px);
}
button:active { transform: translate(0, 1px); }

/* Mensaje de error (bloqueo / credenciales) */
.error {
    background-color: #2b0d10 !important;
    background-image: none !important;
    color: #ffb3ba !important;
    padding: 10px;
    border: 1px solid rgba(255, 77, 94, 0.6) !important;
    border-radius: 10px;
    font-size: 18px;
    text-align: center;
    box-shadow: 0 0 18px rgba(30, 78, 158, 0.25);
}

/* Etiqueta de versión "vX.Y · pispo'2026" (inline color:#003366) */
[style*="color:#003366"] { color: var(--sx-fg-faint) !important; }