/* ============================================================
   CRM Terrenos — Login (rediseño 2026)
   Modo oscuro por defecto: fondo azul marino, elementos en blanco.
   Todos los colores viven en :root para ser modificables.
   NO reemplaza a login.css (ese lo usa google_login.php).
   ============================================================ */

:root {
    /* Marca / fondo */
    --navy:            #0d2436;
    --navy-2:          #102a43;
    --overlay:         rgba(11, 30, 46, 0.82);
    /* El color del logo/nombre/slogan se controla desde brand.css
       (clases .brand--blanco | .brand--azul | .brand--dorado) */

    /* Capa cuadrícula sobre el fondo (look modo oscuro) */
    --grid-line:       rgba(255, 255, 255, 0.06);  /* color de las líneas */
    --grid-size:       150px;                        /* separación de la cuadrícula */
    --grid-thickness:  3px;                         /* grosor de la línea */

    /* Celdas dinámicas de la cuadrícula (capa .grid-cells, la crea el JS).
       Alphas bajos a propósito: la foto debe seguir leyéndose detrás. */
    --cell-gold:       rgba(150, 132, 61, 0.18);   /* #96843D con alpha */
    --cell-navy:       rgba(78, 128, 178, 0.16);   /* más claro que el tinte, si no no se nota */
    --cell-gold-hover: rgba(150, 132, 61, 0.32);
    --cell-fade:       1.1s;                        /* fade ambiental y estela al salir */
    --cell-fade-hover: 0.25s;                       /* respuesta al cursor */

    /* Texto suelto de la página */
    --brand-text:      #ffffff;
    --tagline:         #cdd6df;

    /* Tarjeta: medidas. Todo el tamaño del panel se controla desde aquí.
       Los campos y la tipografía escalan junto con la caja, para que
       crezca sin dejar huecos en blanco. */
    --card-w:          560px;  /* ancho máximo */
    --card-pad:        60px;   /* aire interior (abajo lleva menos) */
    --card-radius:     18px;
    --title-size:      42px;
    --field-h:         60px;   /* alto de los inputs y del botón */
    --field-gap:       28px;   /* separación entre campos */
    --label-size:      15px;
    --input-size:      16px;

    /* Tarjeta blanca */
    --card-bg:         #ffffff;
    --card-title:      #0d2b4a;
    --label:           #16324f;
    --placeholder:     #9aa7b2;
    --input-text:      #1f2d3d;
    --input-border:    #d5dbe1;
    --input-focus:     #16324f;
    --icon:            #b6c9d7;

    /* Botón */
    --btn-bg:          #123a63;
    --btn-bg-hover:    #0d2c4d;
    --btn-text:        #ffffff;

    /* Estados */
    --error:           #d32f2f;
    --card-footer:     #9aa7b2;
    --divider:         #e8ecef;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
    color: var(--brand-text);
}

/* ---------- Página / fondo ---------- */
.login-page {
    position: relative;
    min-height: 100vh;
    width: 100%;
    /* --bg se inyecta inline desde el view con base_url() */
    background: var(--bg, var(--navy)) center center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 48px 6vw;
    overflow: hidden;
}

/* Capa entre el fondo y los elementos: cuadrícula + tinte azul marino.
   Da opacidad a la foto y produce el look de modo oscuro (azulado).
   La cuadrícula (2 primeros gradients) va encima del tinte (último). */
.login-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        /* 180deg (hacia abajo) ancla las franjas al borde SUPERIOR, igual
           que las celdas de .grid-cells. Con 0deg (hacia arriba) las líneas
           horizontales se anclan abajo y quedan corridas respecto a las
           celdas en cuanto la altura no es múltiplo de --grid-size. */
        repeating-linear-gradient(180deg,
            transparent 0,
            transparent calc(var(--grid-size) - var(--grid-thickness)),
            var(--grid-line) calc(var(--grid-size) - var(--grid-thickness)),
            var(--grid-line) var(--grid-size)),
        repeating-linear-gradient(90deg,
            transparent 0,
            transparent calc(var(--grid-size) - var(--grid-thickness)),
            var(--grid-line) calc(var(--grid-size) - var(--grid-thickness)),
            var(--grid-line) var(--grid-size)),
        linear-gradient(135deg, rgba(11,30,46,0.90) 0%, rgba(16,42,67,0.72) 60%, rgba(16,42,67,0.60) 100%);
}

.login-page > * { position: relative; z-index: 1; }

/* ---------- Cuadrícula interactiva ----------
   Capa de celdas alineada a las líneas del ::before (mismo --grid-size,
   ambas parten de la esquina superior izquierda). La inyecta el JS como
   primer hijo de .login-page; sin JS no existe y el fondo queda estático.
   Va en z-index 0 (pinta sobre el ::before por ser hijo real), debajo de
   la card (z1) y brand/tagline (z2): las celdas tapadas por la card no
   reciben hover y la card sigue recibiendo sus clicks. */
.login-page .grid-cells {
    position: absolute;   /* anula el .login-page > * de arriba */
    inset: 0;
    z-index: 0;
    display: grid;
    grid-auto-rows: var(--grid-size);
    /* grid-template-columns lo fija el JS: repeat(N, var(--grid-size)) */
}

.grid-cells > div {
    background-color: transparent;
    transition: background-color var(--cell-fade) ease;
}

.grid-cells > div.is-gold { background-color: var(--cell-gold); }
.grid-cells > div.is-navy { background-color: var(--cell-navy); }

/* Solo en dispositivos con cursor real: en táctiles el :hover se queda
   "pegado" tras un tap y una celda quedaría dorada para siempre. */
@media (hover: hover) {
    .grid-cells > div:hover {
        background-color: var(--cell-gold-hover);
        /* entra rápido; al salir aplica la duración base (1.1s) -> estela */
        transition-duration: var(--cell-fade-hover);
    }
}

@media (prefers-reduced-motion: reduce) {
    .grid-cells > div { transition-duration: 0.01s; }
}

/* ---------- Marca (arriba-izquierda) ----------
   El aspecto (isotipo, nombre, slogan y sus colores) vive en brand.css,
   que acompaña al partial template/brand/brand.php. Aquí solo se define
   su posición dentro de la página de login. */
.login-page .brand {
    position: absolute;
    top: 40px;
    left: 6vw;
    z-index: 2;
}

/* ---------- Tagline (abajo-izquierda) ---------- */
.tagline {
    position: absolute;
    left: 6vw;
    bottom: 36px;
    max-width: 360px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tagline);
    z-index: 2;
}

/* ---------- Tarjeta de login (derecha) ---------- */
.login-card {
    width: 100%;
    max-width: var(--card-w);
    background: var(--card-bg);
    border-radius: var(--card-radius);
    padding: var(--card-pad) var(--card-pad) calc(var(--card-pad) * 0.6);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.login-card h1 {
    margin: 0 0 36px;
    text-align: center;
    font-size: var(--title-size);
    font-weight: 700;  /* Roboto no llega a 800 */
    letter-spacing: -0.01em;
    color: var(--card-title);
}

.form-group { margin-bottom: var(--field-gap); }

.control-label {
    display: block;
    margin-bottom: 10px;
    font-size: var(--label-size);
    font-weight: 700;
    color: var(--label);
}

/* Contenedor de input (ids #divUsuario / #divContrasena para el shake) */
.inputForm {
    display: flex;
    align-items: center;
    height: var(--field-h);
    padding: 0 16px;
    border: 1.5px solid var(--input-border);
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.inputForm:focus-within {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(22, 50, 79, 0.10);
}

.input {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;  /* si no, el input usa la fuente del SO, no Roboto */
    font-size: var(--input-size);
    color: var(--input-text);
}

.input::placeholder { color: var(--placeholder); }

.inputForm .material-icons { color: var(--icon); font-size: 20px; margin-right: 4px; }

#togglePassword { cursor: pointer; fill: var(--icon); margin-left: 8px; flex: 0 0 auto; }

/* Mensaje de error/estado */
#msg {
    min-height: 20px;
    margin-bottom: 6px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 500;  /* 600 no existe en Roboto */
    color: var(--error);
}

/* Botón Entrar */
.button-submit {
    width: 100%;
    height: var(--field-h);
    margin-top: 20px;
    border: none;
    border-radius: 10px;
    background: var(--btn-bg);
    color: var(--btn-text);
    font-family: inherit;  /* los <button> tampoco heredan la fuente */
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.button-submit:hover { background: var(--btn-bg-hover); }
.button-submit:focus-visible { outline: 3px solid rgba(18, 58, 99, 0.35); outline-offset: 2px; }

/* Footer de la tarjeta */
.card-divider {
    height: 1px;
    margin: 32px 0 20px;
    background: var(--divider);
    border: 0;
}

.card-footer {
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: var(--card-footer);
}

/* ---------- Animación de error (shake) ----------
   Reemplaza la de animate.css que traía Material Dashboard,
   que ya no se carga en esta vista. login-terrenos.js añade
   la clase .animated.shake a #divUsuario / #divContrasena. */
.error-field { border-color: var(--error) !important; }

.animated { animation-duration: 0.75s; animation-fill-mode: both; }

.shake { animation-name: shake; }

@keyframes shake {
    0%, 100%   { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
    20%, 40%, 60%, 80%      { transform: translateX(8px); }
}

/* ---------- Responsive ---------- */
/* Pantallas bajas (portátiles de 768px de alto): la tarjeta grande no
   cabe con aire, así que encoge en bloque. Al escalar por variables,
   la caja se ajusta sin abrir huecos por dentro. */
@media (max-height: 820px) {
    :root {
        --card-pad:   40px;
        --title-size: 32px;
        --field-h:    52px;
        --field-gap:  20px;
    }
    .login-card h1 { margin-bottom: 24px; }
    .card-divider  { margin: 22px 0 16px; }
    .button-submit { margin-top: 14px; }
}

@media (max-width: 900px) {
    .login-page { justify-content: center; padding: 96px 20px 88px; }
    .login-page .brand { left: 20px; top: 24px; }
    .tagline { left: 20px; right: 20px; max-width: none; }
}

@media (max-width: 480px) {
    :root {
        --card-pad:    26px;
        --card-radius: 12px;
        --title-size:  28px;
        --field-h:     50px;
    }
    .login-page .brand { --brand-name-size: 18px; --brand-mark-size: 38px; }
    .tagline { font-size: 13px; }
}