/*
=====================================================================
 LOGIN
 cryptoemaillist.pro

 Location: /css/login.css

 WHAT CHANGED, AND WHY

   Two problems came from the same three lines:

       html,body{width:100%;height:100%;}
       body{... overflow:hidden;}

   1. THE PAGE ARRIVED OFF-CENTRE

      The inline critical CSS in login.php has padding:20px 0 and
      min-height:100dvh; this file had height:100% and overflow:hidden
      and no padding. So the first paint used one set of rules and the
      second used another, and the box moved between them.

      Worse than the movement: with height:100% the body is exactly as
      tall as the window, and overflow:hidden means anything past that
      is cut off with no way to scroll to it. On a short window the
      logo and the footer were simply gone.

      Both files now describe the same box, so there is nothing to jump
      between.

   2. THE BLUE STRIP WHEN THE KEYBOARD OPENS

      The gradient was painted on the body, and the body was pinned to
      the height of the window. Open the keyboard and the window gets
      shorter; the body follows, the gradient is repainted into a
      shorter box, and what shows below it is the pale end of the
      gradient stretched over the canvas.

      The gradient now lives on a fixed pseudo-element that covers the
      viewport whatever size it is. The body carries a flat fallback
      colour so a repaint can never expose white.

   WHY overflow:hidden WAS THERE AT ALL

      Inherited from signup.css, where it suits one short box that
      always fits. This page is taller — logo, box, two buttons, a
      note, a divider, a footer — and on a laptop in a half-height
      window it does not fit. A page that cannot scroll to its own
      content is broken in a way that only shows on some screens.

   dvh AND vh TOGETHER, IN THAT ORDER

      100dvh tracks the viewport as the browser chrome and the
      keyboard change it; 100vh does not. Older browsers ignore the
      dvh line and keep the vh one, so the pair degrades to what this
      file did before rather than to nothing.
=====================================================================
*/


/* =========================
   FONTS
========================= */
@font-face{
    font-family:'Lato';
    src:url('/fonts/lato/Lato-Regular.woff2') format('woff2');
    font-weight:400;
    font-display:swap;
}
@font-face{
    font-family:'Lato';
    src:url('/fonts/lato/Lato-Light.woff2') format('woff2');
    font-weight:300;
    font-display:swap;
}
@font-face{
    font-family:'Lato';
    src:url('/fonts/lato/Lato-Bold.woff2') format('woff2');
    font-weight:700;
    font-display:swap;
}


/* =========================
   VARIABLES
========================= */
:root{
    --color-primary: #4664ff;
    --color-primary-dark: #8e00ff;
    --color-primary-hover: #3a54e0;
    --color-accent: #24c8ff;

    --color-success: #28a745;
    --color-error: #d00000;
    --color-success-text: #198754;

    --color-text: #333;
    --color-text-muted: #404040;
    --color-border: #ddd;

    --transition-fast: .3s;
    --radius: 6px;
    --radius-lg: 12px;

    /* Ancho de los controles del formulario (inputs y botones) dentro
       de la caja. Definido aca para que inputs y botones coincidan
       siempre: cambiando este unico valor se mueven todos juntos. */
    --field-width: 92%;
}


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

/* height:100% se fue. Ataba el alto del body al de la ventana, y con
   overflow:hidden encima cualquier cosa que no entrara quedaba
   cortada sin forma de llegar a ella. */
html,body{
    width:100%;
}

/* Reserva el espacio de la barra de scroll siempre, aparezca o no.
   Sin esto, una pantalla que scrollea y una que no centran el
   contenido en lugares distintos, y la diferencia se ve al navegar
   entre ellas. */
html{
    scrollbar-gutter:stable;
}

body{
    font-family:'Lato',sans-serif;

    /* dvh primero para los navegadores que lo entienden; vh queda de
       respaldo para los que no. */
    min-height:100vh;
    min-height:100dvh;

    display:flex;
    justify-content:center;
    align-items:center;

    /* Aire arriba y abajo, igual que el CSS critico inline de
       login.php. Si los dos no coinciden, la caja salta entre el
       primer pintado y el segundo. */
    padding:20px 0;

    /* Color plano de respaldo. El degrade real lo pinta ::before; si
       por lo que sea no llegara a cubrir, lo que se ve es azul del
       sitio y no blanco. */
    background:var(--color-primary);

    color:var(--color-text);
    position:relative;
    -webkit-font-smoothing:antialiased;
}

/* El degrade, en una capa fija propia.
 *
 * Pintado sobre el body quedaba atado al alto del body, y al abrirse
 * el teclado del telefono la ventana se achica: el degrade se
 * repintaba en una caja mas corta y al pie aparecia una franja celeste
 * -- la punta clara del degrade, estirada sobre el lienzo.
 *
 * Una capa con position:fixed cubre el viewport mida lo que mida. */
body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:0;
    background:linear-gradient(165deg,
        var(--color-primary-dark),
        var(--color-primary),
        var(--color-accent));
}


/* =========================
   PARTICLES BACKGROUND
========================= */

/* fixed y no absolute: con el body ya sin height:100%, un absolute al
   100% de alto se calcularia contra un contenedor que crece con el
   contenido, y las particulas se dibujarian mas largas que la
   pantalla. */
#particles-js{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
}


/* =========================
   LAYOUT
========================= */
.login-container{
    position:relative;
    z-index:2;
    width:550px;
    max-width:95%;
    text-align:center;
}

.brand-logo{
    width:450px;
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto 10px auto;
}

.login-box{
    width:100%;
    background:#fff;
    border-radius:var(--radius-lg);
    padding:35px;
    box-shadow:0 0 0 3px rgba(70,100,255,.3), 0 0 12px rgba(70,100,255,.35);
    text-align:center;
}

h2{
    font-weight:400;
    font-size:32px;
    color:var(--color-text);
    margin-bottom:28px;
}


/* =========================
   FORM ELEMENTS
========================= */
input{
    width:var(--field-width);
    display:block;
    margin:0 auto 12px auto; /* auto a los lados: centra el campo al no ocupar el 100% */
    padding:13px;
    border-radius:var(--radius);
    border:1px solid var(--color-border);
    font-family:inherit;
    font-size:18px; /* >=16px: evita el auto-zoom de iOS Safari al hacer foco */
    transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type="email"]:focus{
    caret-color:var(--color-primary);
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px rgba(70,100,255,.3), 0 0 12px rgba(70,100,255,.35);
    outline:none;
}

input.keep-highlight{
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px rgba(70,100,255,.3), 0 0 12px rgba(70,100,255,.35);
}

input[type="password"],
input[type="password"]:invalid{
    border-color:var(--color-border);
    box-shadow:none;
}

input[type="password"]:focus{
    caret-color:var(--color-primary);
    border-color:var(--color-primary);
    outline:none;
}

/* =========================
   BOTONES
   Jerarquia invertida: la mayoria de los usuarios va a preferir
   magic link antes que tipear una password de 12+ caracteres con
   mayusculas/minusculas/especiales/numeros. Magic link = accion
   primaria (solida). Login con password = accion secundaria (outline).
========================= */

/* Accion primaria: magic link */
.btn-primary{
    width:var(--field-width);
    display:block;
    margin:0 auto;
    padding:13px;
    border:none;
    border-radius:var(--radius);
    background:var(--color-primary);
    color:white;
    font-family:inherit;
    font-size:20px;
    cursor:pointer;
    transition:background-color var(--transition-fast), transform var(--transition-fast);
}

.btn-primary:hover{
    background:var(--color-primary-hover);
    transform:translateY(-2px);
}

/* Accion secundaria: login con password */
.btn-secondary{
    width:var(--field-width);
    display:block;
    margin:5px auto 0 auto;
    padding:12px;
    border:1px solid var(--color-primary);
    border-radius:var(--radius);
    background:var(--color-primary);
    color:white;
    font-family:inherit;
    font-size:18px;
    cursor:pointer;
    transition:background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn-secondary:hover{
    background:var(--color-primary-hover);
    transform:translateY(-2px);
}

/* Foco visible consistente entre navegadores (accesibilidad teclado) */
.btn-primary:focus-visible,
.btn-secondary:focus-visible{
    outline:3px solid rgba(70,100,255,.5);
    outline-offset:2px;
}


/* =========================
   MAGIC LINK NOTE
   Aclaracion general bajo el boton primario. Es deliberadamente
   generica: no dice nada sobre una cuenta en particular, asi que no
   revela si un email esta registrado ni si tiene contrasena.
========================= */
.magic-note{
    width:var(--field-width);
    margin:8px auto 0 auto;
    font-size:15px;
    color:var(--color-text-muted);
    line-height:1.5;
    text-align:center;
}


/* =========================
   DIVIDER TEXT
   Leyenda entre el flujo primario (magic link) y el secundario
   (password), a modo de separador suave.
========================= */
.divider-text{
    margin:18px 0 10px;
    font-size:17px;
    color:var(--color-text-muted);
    text-align:center;
}


/* =========================
   LINKS / FOOTER
========================= */
.links{
    margin-top:20px;
    font-size:16px;
}

.links a{
    color:var(--color-primary);
    text-decoration:none;
}

.links a:hover{
    text-decoration:underline;
}

.forgot-link{
    margin-bottom:25px;
}

.brand-footer{
    position:relative;
    z-index:2;
    margin-top:25px;
    color:rgba(255,255,255,.85);
    font-size:18px;
    letter-spacing:.3px;
    line-height:1.8;
    text-align:center;
}


/* =========================
   NOSCRIPT
   El HTML lo tiene y el CSS no lo definia: salia como texto negro
   sobre el degrade, ilegible justo cuando mas hace falta leerlo.
========================= */
.noscript-banner{
    position:relative;
    z-index:3;
    max-width:550px;
    margin:0 auto 14px;
    padding:14px 16px;
    background:#fff4d4;
    border:1px solid #ffe08a;
    border-radius:var(--radius);
    color:#6b5400;
    font-size:15px;
    line-height:1.6;
    text-align:center;
}


/* =========================
   MESSAGES
========================= */
.server-error{
    display:block;
    color:var(--color-error);
    font-size:20px;
    font-weight:700;
    margin-top:20px;
    margin-bottom:5px;
    text-align:center;
}

.server-success{
    display:block;
    color:var(--color-success-text);
    font-size:20px;
    font-weight:700;
    margin-top:20px;
    margin-bottom:5px;
    text-align:center;
}

/* Mismo ancho que los inputs para que el texto del error quede
   alineado con el borde izquierdo del campo al que se refiere. */
.error-msg{
    display:none;
    width:var(--field-width);
    margin:5px auto 12px auto;
    color:var(--color-error);
    font-size:19px;
    font-weight:400;
    text-align:left;
}


/* =========================
   RESPONSIVE - TABLET (breakpoint intermedio)
========================= */
@media(max-width:768px){

    .login-container{
        width:100%;
        max-width:550px;
        padding:0 20px;
    }

    .login-box{
        padding:32px;
    }
}


/* =========================
   RESPONSIVE - MOBILE
========================= */
@media(max-width:600px){

    /* En pantallas chicas la caja ya es angosta: achicar mas los campos
       solo desperdicia espacio util, asi que vuelven al 100%. */
    :root{
        --field-width: 100%;
    }

    .login-container{
        width:100%;
        max-width:550px;
        padding:0 15px;
    }

    .brand-logo{
        width:100%;
        max-width:340px;
        margin-left:auto;
        margin-right:auto;
    }

    .login-box{
        padding:24px;
    }

    h2{
        font-size:28px;
        font-weight:400;
        color:var(--color-text);
        margin-bottom:22px;
    }

    /* Reduce la carga de fondo animado en dispositivos con menos
       GPU/bateria. Si se prefiere mantenerlo, ajustar la densidad en
       particles-config.js en vez de atenuarlo. */
    #particles-js{
        opacity:.5;
    }
}


/* =========================
   ACCESIBILIDAD
========================= */
@media (prefers-reduced-motion: reduce){
    *{
        transition:none !important;
        animation:none !important;
    }
}