/* ==========================================================================
   Login "Midnight + Cyan". Sin dependencias externas. Servido por /ui/basecmw-login.css?v=UI_VERSION
   ========================================================================== */
:root {
    --bl-bg-0: #070C16;
    --bl-bg-1: #0B1220;
    --bl-bg-2: #0F1A2E;
    --bl-cyan: #22D3EE;
    --bl-blue: #3B82F6;
    --bl-slate: #475569;
    --bl-text: #E2E8F0;
    --bl-muted: #94A3B8;
    --bl-err: #F87171;
    --bl-line: rgba(148, 163, 184, .2);
    --bl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --bl-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
.bl { background: var(--bl-bg-1); color: var(--bl-text); font-family: var(--bl-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.bl [hidden] { display: none !important; }

/* ---------- Estructura ---------- */
.bl-wrap { display: flex; min-height: 100vh; min-height: 100dvh; }
.bl-hero { position: relative; flex: 0 0 58%; overflow: hidden; background: var(--bl-bg-0); isolation: isolate; }
.bl-panel { position: relative; flex: 1 1 42%; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; overflow: hidden;
    background: radial-gradient(520px 420px at 100% 0%, rgba(34, 211, 238, .13), transparent 70%), var(--bl-bg-1); }

/* ---------- Hero: retícula + resplandor ---------- */
.bl-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(rgba(148, 163, 184, .06) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(148, 163, 184, .06) 1px, transparent 1px) 0 0 / 32px 32px,
        radial-gradient(70% 60% at 62% 38%, rgba(34, 211, 238, .08), transparent 70%),
        var(--bl-bg-0);
}
.bl-hero::after { /* viñeta para dar lectura al texto inferior-izquierdo */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top right, rgba(7, 12, 22, .92) 0%, rgba(7, 12, 22, .55) 32%, transparent 62%);
}
.bl-routes { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Rutas ---------- */
.bl-line { stroke-width: 3.5; }
.bl-line-a { stroke: var(--bl-cyan); }
.bl-line-b { stroke: var(--bl-blue); }
.bl-line-c, .bl-line-d { stroke: var(--bl-slate); stroke-width: 3; }
.bl-line-d { opacity: .8; }

.bl-pulse { stroke-width: 5; stroke-dasharray: 3 97; stroke-dashoffset: 100; filter: drop-shadow(0 0 5px currentColor); }
.bl-pulse-a { stroke: #A5F3FC; color: var(--bl-cyan); animation: bl-run 9s linear infinite; }
.bl-pulse-b { stroke: #BFDBFE; color: var(--bl-blue); animation: bl-run 12s linear infinite 1.5s; }
.bl-pulse-c { stroke: #CBD5E1; color: var(--bl-slate); animation: bl-run 15s linear infinite .8s; }
.bl-pulse-d { stroke: #A5F3FC; color: var(--bl-cyan); animation: bl-run 11s linear infinite 3.2s; }
@keyframes bl-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

.bl-stop { fill: var(--bl-bg-0); stroke-width: 3; }
.bl-stop.s-a { stroke: var(--bl-cyan); }
.bl-stop.s-b { stroke: var(--bl-blue); }
.bl-stop.s-c { stroke: var(--bl-slate); }
.bl-hub { fill: var(--bl-bg-0); stroke: var(--bl-text); stroke-width: 3; }
.bl-live { animation: bl-blink 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes bl-blink { 0%, 100% { fill: var(--bl-bg-0); } 50% { fill: currentColor; } }
.bl-stop.s-a.bl-live { color: var(--bl-cyan); }
.bl-stop.s-b.bl-live { color: var(--bl-blue); }
.bl-stop.s-c.bl-live { color: #64748B; }
.bl-bus rect, .bl-bus path, .bl-bus circle { fill: var(--bl-bg-0); stroke: var(--bl-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bl-bus path { fill: none; }

/* Modo foto: la foto va a sangre y el mapa queda como capa sutil */
.bl-hero.has-photo .bl-photo, .bl-hero.has-photo .bl-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-hero.has-photo .bl-shade { position: absolute; inset: 0; background: linear-gradient(to top right, #070C16 0%, rgba(7, 12, 22, .78) 30%, rgba(7, 12, 22, .1) 70%); }
.bl-hero.has-photo .bl-routes { opacity: .15; }
.bl-hero.has-photo::after { display: none; }

/* ---------- Texto del hero ---------- */
.bl-copy { position: absolute; left: 0; bottom: 0; z-index: 2; padding: clamp(2rem, 5vw, 4.5rem); max-width: 40rem; }
.bl-logo { display: block; height: auto; max-width: 100%; }
/* Solo si el logo es oscuro CON fondo transparente y logo_filter=true: lo vuelve blanco. */
.bl-logo.is-filtered { filter: brightness(0) invert(1); }
.bl-copy .bl-logo { width: clamp(210px, 22vw, 340px); margin: 0 0 clamp(.2rem, 1.5vh, 1rem) -6%; }
.bl-title { margin: 0; font-size: clamp(2rem, 3.6vw, 3.6rem); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.bl-sub { margin: .9rem 0 0; font-size: clamp(.95rem, 1.2vw, 1.15rem); color: var(--bl-muted); line-height: 1.5; max-width: 30rem; }

/* ---------- Formulario ---------- */
.bl-form-wrap { position: relative; width: 100%; max-width: 400px; }
.bl-logo-m { display: none; width: 200px; margin: 0 0 1rem -12px; }
.bl-h1 { margin: 0; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.bl-lead { margin: .35rem 0 1.6rem; font-size: .92rem; color: var(--bl-muted); }

.bl-alert { display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 1.1rem; padding: .7rem .85rem; border-radius: 10px; font-size: .85rem; line-height: 1.35;
    color: var(--bl-err); background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .3); }
.bl-alert svg { flex: 0 0 auto; margin-top: 1px; }
.bl-alert.is-info { color: #67E8F9; background: rgba(34, 211, 238, .08); border-color: rgba(34, 211, 238, .3); }
.bl-alert.is-warn { color: #FCD34D; background: rgba(251, 191, 36, .08); border-color: rgba(251, 191, 36, .3); }

.bl-field { margin-bottom: 1.1rem; }
.bl-field label { display: block; margin-bottom: .4rem; font-size: .8rem; font-weight: 600; color: var(--bl-muted); }
.bl-input { position: relative; }
.bl-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--bl-slate); pointer-events: none; transition: color .15s; }
.bl-input:focus-within .bl-ico { color: var(--bl-cyan); }
.bl-input input {
    width: 100%; height: 48px; padding: 0 44px 0 42px; font: inherit; font-size: 16px; color: var(--bl-text);
    background: var(--bl-bg-2); border: 1px solid var(--bl-line); border-radius: 10px; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.bl-input input::placeholder { color: #64748B; }
.bl-input input:focus { border-color: var(--bl-cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, .15); }
.bl-input input.is-invalid { border-color: var(--bl-err); }
.bl-input input.is-invalid:focus { box-shadow: 0 0 0 4px rgba(248, 113, 113, .15); }
.bl-input input:-webkit-autofill { -webkit-text-fill-color: var(--bl-text); box-shadow: 0 0 0 100px var(--bl-bg-2) inset; caret-color: var(--bl-text); }
.bl-err { margin: .4rem 0 0; font-size: .8rem; color: var(--bl-err); }

.bl-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 8px; color: var(--bl-muted); cursor: pointer; }
.bl-eye:hover { color: var(--bl-text); }
.bl-eye:focus-visible { outline: 2px solid var(--bl-cyan); outline-offset: 0; }
.bl-eye .eye-off { display: none; }
.bl-eye.is-on .eye-off { display: block; }
.bl-eye.is-on .eye-on { display: none; }

.bl-check { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; margin: .1rem 0 1rem; font-size: .88rem; color: var(--bl-muted); cursor: pointer; user-select: none; }
.bl-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bl-box { width: 20px; height: 20px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--bl-bg-2); border: 1px solid var(--bl-line); transition: background .15s, border-color .15s; }
.bl-box::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--bl-bg-0); border-bottom: 2px solid var(--bl-bg-0); transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .12s; }
.bl-check input:checked + .bl-box { background: var(--bl-cyan); border-color: var(--bl-cyan); }
.bl-check input:checked + .bl-box::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.bl-check input:focus-visible + .bl-box { box-shadow: 0 0 0 4px rgba(34, 211, 238, .25); }

.bl-btn { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: .6rem; font: inherit; font-size: 1rem; font-weight: 800; letter-spacing: .01em;
    color: var(--bl-bg-0); background: var(--bl-cyan); border: 0; border-radius: 10px; cursor: pointer; transition: background .15s, transform .05s, opacity .15s; }
.bl-btn:hover { background: #67E8F9; }
.bl-btn:active { transform: translateY(1px); }
.bl-btn:focus-visible { outline: 3px solid rgba(34, 211, 238, .45); outline-offset: 2px; }
.bl-btn:disabled { opacity: .75; cursor: progress; background: var(--bl-cyan); }
.bl-btn-busy { display: inline-flex; align-items: center; gap: .6rem; }
.bl-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(7, 12, 22, .3); border-top-color: var(--bl-bg-0); animation: bl-spin .7s linear infinite; }
@keyframes bl-spin { to { transform: rotate(360deg); } }

.bl-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.2rem; font-size: .75rem; color: var(--bl-slate); }
.bl-clock { font-family: var(--bl-mono); color: rgba(34, 211, 238, .55); }

/* ---------- Tablet (768–991): imagen arriba ~35vh, formulario debajo ---------- */
@media (max-width: 991.98px) {
    .bl-wrap { flex-direction: column; }
    .bl-hero { flex: 0 0 auto; height: 35vh; min-height: 250px; }
    .bl-panel { flex: 1 1 auto; align-items: flex-start; padding-top: 2.25rem; }
    .bl-copy { padding: 1.5rem 2rem; }
    .bl-copy .bl-logo { width: 180px; margin-bottom: .2rem; }
    .bl-title { font-size: 1.8rem; }
    .bl-sub { display: none; }
}

/* ---------- Móvil (<768): solo formulario; retícula + trazo de ruta como fondo sutil ---------- */
@media (max-width: 767.98px) {
    .bl-wrap { display: block; position: relative; }
    .bl-hero { position: fixed; inset: 0; height: auto; min-height: 0; z-index: -1; opacity: .35; }
    .bl-hero .bl-copy, .bl-hero .bl-photo, .bl-hero .bl-shade { display: none; }
    .bl-hero.has-photo .bl-routes { opacity: 1; }
    .bl-panel { position: relative; min-height: 100vh; min-height: 100dvh; align-items: center; background: radial-gradient(420px 320px at 100% 0%, rgba(34, 211, 238, .12), transparent 70%); padding: 2rem 1.25rem; }
    .bl-logo-m { display: block; }
}

/* ---------- Movimiento reducido: todo estático ---------- */
@media (prefers-reduced-motion: reduce) {
    .bl-pulse { display: none; }
    .bl-live { animation: none; }
    .bl-spin { animation-duration: 1.6s; }
    .bl-btn, .bl-input input, .bl-box, .bl-box::after, .bl-ico { transition: none; }
}