/* ==========================================================================
   Pantallas de acceso (inicio de sesion, recuperar y restablecer contraseña):
   diseño «Mapa operacional». Mapa de predios de fondo (includes/
   acceso_marco_inicio.php), columna izquierda con logo, titular y tarjeta.
   Claro por defecto; en oscuro, la misma escena de noche. Acento de la paleta
   elegida (índigo Maximo por defecto) e Inter (tema_head.php / tema.css).
   ========================================================================== */

:root {
    --marca-fondo:   #e8ece4;   /* suelo del mapa */
    --marca-tarjeta: #ffffff;
    --marca-campo:   #f7f8fb;
    --marca-titulo:  #1c1e2b;
    --marca-texto:   #3a3d4d;
    --marca-apagado: #4f5264;
    --marca-filete:  #d3d5df;
    --marca-acento:  rgb(var(--a-700, 74 85 184));   /* un paso más oscuro: contraste sobre blanco */
    --marca-peligro: #b42318;
    --marca-aviso:   #a15c07;
    --mapa-1: #d4dccb; --mapa-2: #c9d4bd; --mapa-3: #d9e0d0; --mapa-4: #c6d1ba;
    --mapa-borde: #ffffff; --mapa-rio: #9fb7cf; --mapa-camino: #ffffff;
    --mapa-destacado: rgb(var(--a-600, 94 106 210));
    --punto-cuadrilla: rgb(var(--a-600, 94 106 210)); --punto-maquina: #2f8f5b; --punto-estanque: #c27a12;
    --font-marca-cuerpo: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-marca-titulo: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
:root.dark {
    --marca-fondo:   #0c0e13;
    --marca-tarjeta: #13141b;
    --marca-campo:   #0c0e13;
    --marca-titulo:  #f4f5f8;
    --marca-texto:   #c9cbd6;
    --marca-apagado: #a9acbd;
    --marca-filete:  #2c2f3d;
    --marca-acento:  rgb(var(--a-400, 139 147 248));
    --marca-peligro: #f97066;
    --marca-aviso:   #f5b54a;
    --mapa-1: #1a1f24; --mapa-2: #1d2329; --mapa-3: #181c21; --mapa-4: #1e252b;
    --mapa-borde: #0c0e13; --mapa-rio: #24405c; --mapa-camino: #2a2f3a;
    --punto-cuadrilla: rgb(var(--a-400, 139 147 248)); --punto-maquina: #5fcf93; --punto-estanque: #f0b357;
}

.marca {
    font-family: var(--font-marca-cuerpo);
    color: var(--marca-texto);
    background: var(--marca-fondo);
}

/* ── Escena: mapa + velo ─────────────────────────────────────────────── */
.acceso { position: relative; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
.acceso-mapa { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mapa-predios path { stroke: var(--mapa-borde); stroke-width: 2; stroke-linejoin: round; }
.mapa-predios .t1 { fill: var(--mapa-1); } .mapa-predios .t2 { fill: var(--mapa-2); }
.mapa-predios .t3 { fill: var(--mapa-3); } .mapa-predios .t4 { fill: var(--mapa-4); }
.mapa-predios .dest  { fill: var(--mapa-destacado); fill-opacity: .30; }
.mapa-predios .dest2 { fill: var(--mapa-destacado); fill-opacity: .18; }
:root.dark .mapa-predios .dest  { fill-opacity: .42; }
:root.dark .mapa-predios .dest2 { fill-opacity: .24; }
.mapa-rio    { fill: none; stroke: var(--mapa-rio); stroke-width: 10; stroke-linecap: round; }
.mapa-camino { fill: none; stroke: var(--mapa-camino); stroke-width: 5; stroke-dasharray: 14 10; }
.mapa-halo   { fill: var(--punto-cuadrilla); fill-opacity: .2; }
.mapa-punto  { stroke: var(--mapa-borde); stroke-width: 3; }
.mapa-punto.cuadrilla { fill: var(--punto-cuadrilla); }
.mapa-punto.maquina   { fill: var(--punto-maquina); }
.mapa-punto.estanque  { fill: var(--punto-estanque); }
/* Velo: deja leer la columna izquierda y muestra el mapa a la derecha. */
.acceso-velo {
    position: fixed; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, var(--marca-fondo) 0%, color-mix(in srgb, var(--marca-fondo) 92%, transparent) 34%, transparent 60%);
}

/* Leyenda (solo escritorio, abajo a la derecha: arriba está el interruptor de tema). */
.acceso-leyenda {
    position: fixed; right: 40px; bottom: 36px; z-index: 1; display: none; flex-direction: column; gap: 10px;
    padding: 16px 18px; border-radius: .375rem; font-size: calc(13px * var(--fs, 1)); color: var(--marca-texto);
    background: color-mix(in srgb, var(--marca-tarjeta) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--marca-filete) 60%, transparent);
    box-shadow: 0 8px 24px rgba(28, 30, 43, .10);
}
.acceso-leyenda span { display: flex; align-items: center; gap: 8px; }
.acceso-leyenda i { width: 10px; height: 10px; border-radius: 50%; }
.acceso-leyenda i.cuadrilla { background: var(--punto-cuadrilla); }
.acceso-leyenda i.maquina   { background: var(--punto-maquina); }
.acceso-leyenda i.estanque  { background: var(--punto-estanque); }
.acceso-leyenda-titulo { font-size: calc(11px * var(--fs, 1)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--marca-apagado); }

/* ── Columna: logo, titular, tarjeta y pie ───────────────────────────── */
.acceso-columna {
    position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; box-sizing: border-box;
    width: 100%; max-width: 30rem; margin: 0 auto; padding: 28px 20px 24px;
    display: flex; flex-direction: column; gap: 28px;
}
.acceso-logo { width: 160px; height: auto; }
.acceso-centro { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.acceso-encabezado { display: flex; flex-direction: column; gap: 10px; }
.acceso-titular {
    margin: 0; font-family: var(--font-marca-titulo); font-weight: 800; letter-spacing: -.03em;
    font-size: calc(2.25rem * var(--fs, 1)); line-height: 1.08; color: var(--marca-titulo); text-wrap: balance;
}
.acceso-bajada { margin: 0; font-size: calc(1rem * var(--fs, 1)); line-height: 1.55; color: var(--marca-apagado); max-width: 30rem; }
.acceso-pie { margin: 0; font-size: calc(.8125rem * var(--fs, 1)); color: var(--marca-apagado); }

@media (max-width: 1023px) {
    /* Una columna: el mapa queda detrás, más velado. */
    .acceso-velo { background: color-mix(in srgb, var(--marca-fondo) 82%, transparent); }
}
@media (min-width: 1024px) {
    .acceso-columna { margin: 0; max-width: 35rem; padding: 56px 0 48px 96px; }
    .acceso-logo { width: 180px; }
    .acceso-titular { font-size: calc(2.75rem * var(--fs, 1)); }
    .acceso-leyenda { display: flex; }
}

/* ── Tarjeta y controles ─────────────────────────────────────────────── */
.marca-titulo {
    font-family: var(--font-marca-titulo);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--marca-titulo);
    text-wrap: balance;
}
.marca-rotulo {
    font-size: calc(11px * var(--fs, 1));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--marca-apagado);
}
.marca-filete { height: 2px; width: 8rem; background: var(--marca-acento); }
.marca-tarjeta {
    background: var(--marca-tarjeta); border: 1px solid transparent; border-radius: .375rem;
    box-shadow: 0 20px 50px rgba(28, 30, 43, .14);
}
:root.dark .marca-tarjeta { border-color: var(--marca-filete); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.marca-etiqueta { display: block; margin-bottom: .375rem; font-size: calc(.875rem * var(--fs, 1)); font-weight: 600; color: var(--marca-titulo); }
.marca-campo {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    border-radius: .25rem;
    padding: .625rem .875rem;
    font-size: calc(15px * var(--fs, 1));
    font-family: var(--font-marca-cuerpo);
    background: var(--marca-campo);
    border: 1px solid var(--marca-filete);
    color: var(--marca-titulo);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.marca-campo::placeholder { color: var(--marca-apagado); opacity: .7; }
.marca-campo:focus {
    border-color: var(--marca-acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-acento) 18%, transparent);
}
.marca-boton {
    display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: .5rem;
    border: 0; border-radius: .25rem; min-height: 50px; padding: .75rem 1rem; cursor: pointer; user-select: none;
    font-family: var(--font-marca-titulo); font-size: calc(1rem * var(--fs, 1)); font-weight: 600;
    background: var(--marca-acento); color: #ffffff;
    transition: background-color .15s;
}
.marca-boton:hover { background: color-mix(in srgb, var(--marca-acento) 85%, #000); }
/* En oscuro el acento es un indigo claro (texto y bordes); el boton conserva el
   indigo de marca para que el texto blanco tenga contraste. */
:root.dark .marca-boton { background: rgb(var(--a-600, 94 106 210)); }
:root.dark .marca-boton:hover { background: rgb(var(--a-700, 79 90 192)); }
.marca-boton:focus-visible, .marca-enlace:focus-visible, .marca-ojo:focus-visible {
    outline: 2px solid var(--marca-acento); outline-offset: 2px;
}
.marca-boton:disabled { opacity: .7; cursor: progress; }
.marca-enlace { font-weight: 600; color: var(--marca-acento); text-underline-offset: 2px; }
.marca-enlace:hover { text-decoration: underline; }
.marca-ojo { color: var(--marca-apagado); }
.marca-ojo:hover { color: var(--marca-titulo); }

/* Avisos: borde izquierdo de color sobre un tinte del mismo color. */
.marca-aviso {
    display: flex; align-items: flex-start; gap: .5rem;
    border-radius: 0 .25rem .25rem 0; padding: .625rem .75rem; font-size: calc(.875rem * var(--fs, 1));
    border-left: 3px solid var(--tono); color: var(--tono);
    background: color-mix(in srgb, var(--tono) 12%, transparent);
}
.marca-aviso.error { --tono: var(--marca-peligro); }
.marca-aviso.info  { --tono: var(--marca-aviso); }
.marca-aviso.exito { --tono: var(--marca-acento); }

/* Requisitos de la contraseña nueva: se marcan al cumplirse (assets/js/acceso.js). */
.marca-requisitos { display: grid; gap: .25rem; margin: .5rem 0 0; padding: 0; list-style: none; font-size: calc(.75rem * var(--fs, 1)); color: var(--marca-apagado); }
.marca-requisitos li { display: flex; align-items: center; gap: .4rem; }
.marca-requisitos li::before {
    content: ""; width: .5rem; height: .5rem; border-radius: 999px; flex: none;
    border: 1.5px solid var(--marca-filete);
}
.marca-requisitos li.cumple { color: var(--marca-acento); }
.marca-requisitos li.cumple::before { background: var(--marca-acento); border-color: var(--marca-acento); }

/* Boton secundario (enlace con forma de boton): mismo alto que .marca-boton. */
.marca-boton-sec {
    display: inline-flex; width: 100%; align-items: center; justify-content: center;
    border-radius: .25rem; min-height: 50px; padding: .7rem 1rem; box-sizing: border-box;
    font-family: var(--font-marca-titulo); font-size: calc(1rem * var(--fs, 1)); font-weight: 600;
    color: var(--marca-titulo); border: 1px solid var(--marca-filete); background: var(--marca-tarjeta);
}
.marca-boton-sec:hover { border-color: var(--marca-acento); color: var(--marca-acento); }
.marca-boton-sec:focus-visible { outline: 2px solid var(--marca-acento); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .marca-campo, .marca-boton { transition: none; }
}