/* ═══════════════════════════════════════════════════════════════════════════
   HidroVis — Sistema de diseño unificado
   Paleta: Azul profundo · referencia: landing institucional
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. VARIABLES ─────────────────────────────────────────────────────────── */
:root {
    /* Fondos */
    --bg:           #05131f;
    --bg-mid:       #0a1e2e;
    --surface:      #0c2d44;
    --surface-soft: #0d3555;
    --surface-card: rgba(10,30,46,.75);

    /* Texto */
    --ink:          #f4f8fb;
    --muted:        rgba(244,248,251,.55);
    --muted-2:      rgba(244,248,251,.3);

    /* Bordes */
    --line:         rgba(44,180,240,.18);
    --line-soft:    rgba(44,180,240,.09);

    /* Colores primarios */
    --primary:      #1a82c4;
    --primary-dark: #0e6aa0;
    --primary-glow: rgba(26,130,196,.28);
    --accent:       #2cb4f0;
    --accent-glow:  rgba(44,180,240,.22);
    --teal:         #0e9e8e;
    --teal-glow:    rgba(14,158,142,.22);

    /* Semánticos */
    --danger:       #e74c5c;
    --danger-soft:  rgba(231,76,92,.13);
    --success:      #2dc878;
    --success-soft: rgba(45,200,120,.13);
    --warn:         #f0b932;
    --warn-soft:    rgba(240,185,50,.13);
    --water:        #2cb4f0;

    /* Efectos */
    --shadow:       0 20px 60px rgba(0,0,0,.5);
    --shadow-soft:  0 4px 24px rgba(0,0,0,.3);
    --radius:       16px;
    --radius-sm:    10px;
    --radius-xs:    8px;

    /* Tipografía */
    --font-main: 'Inter', system-ui, sans-serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
}

/* ── 2. BASE & RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Garantiza que [hidden] siempre oculte el elemento, sin importar el display
   definido por las clases CSS (flex, grid, etc.) */
[hidden] { display: none !important; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ── 3. BRAND ─────────────────────────────────────────────────────────────── */
.brand {
    align-items: center;
    display: inline-flex;
    gap: .75rem;
}

.brand-mark {
    align-items: center;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 10px;
    color: #fff;
    display: inline-flex;
    font-family: var(--font-main);
    font-size: .85rem;
    font-weight: 700;
    height: 38px;
    justify-content: center;
    letter-spacing: .04em;
    width: 38px;
    flex-shrink: 0;
}

.brand-name {
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

.brand small,
.brand-sub,
.eyebrow {
    color: var(--muted);
    display: block;
    font-family: var(--font-main);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ── 4. BOTONES ───────────────────────────────────────────────────────────── */
.btn,
.button {
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-main);
    font-size: .875rem;
    font-weight: 500;
    gap: .45rem;
    justify-content: center;
    padding: .6rem 1.4rem;
    text-decoration: none;
    transition: all .22s;
    border: none;
}

.btn-primary,
.button {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 4px 18px var(--primary-glow);
    color: #fff;
}

.btn-primary:hover,
.button:hover {
    box-shadow: 0 8px 28px var(--accent-glow);
    transform: translateY(-2px);
}

.button-ghost,
.btn-ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
}

.button-ghost:hover,
.btn-ghost:hover {
    border-color: rgba(44,180,240,.4);
    color: var(--ink);
}

.button-ghost.light {
    border-color: rgba(255,255,255,.35);
    color: #fff;
}

.button-muted {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
}

/* Botón acción en tablas */
.btn-action {
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    padding: .38rem;
    transition: background .13s, transform .1s;
}

.btn-action svg {
    height: 15px;
    width: 15px;
}

.btn-edit {
    background: rgba(44,180,240,.1);
    border: 1px solid rgba(44,180,240,.25);
    color: var(--accent);
    text-decoration: none;
}

.btn-edit:hover {
    background: rgba(44,180,240,.2);
    transform: scale(1.1);
}

.btn-delete {
    background: rgba(231,76,92,.08);
    border: 1px solid rgba(231,76,92,.22);
    color: var(--danger);
    font: inherit;
}

.btn-delete:hover {
    background: rgba(231,76,92,.18);
    transform: scale(1.1);
}

/* Botón nueva estación / acción principal de panel */
.btn-nueva {
    align-items: center;
    background: var(--primary);
    border: none;
    border-radius: 10px;
    color: #fff;
    display: inline-flex;
    font-size: .85rem;
    font-weight: 600;
    gap: .4rem;
    padding: .55rem 1rem;
    text-decoration: none;
    transition: background .15s, transform .1s, box-shadow .15s;
}

.btn-nueva:hover {
    background: var(--primary-dark);
    box-shadow: 0 4px 16px var(--primary-glow);
    transform: translateY(-1px);
}

.btn-nueva svg {
    height: 16px;
    width: 16px;
}

/* ── 5. BADGES & PILLS ───────────────────────────────────────────────────── */
.status-pill,
.sar-low {
    background: var(--success-soft);
    border-radius: 999px;
    color: var(--success);
    display: inline-flex;
    font-family: var(--font-main);
    font-size: .78rem;
    font-weight: 700;
    padding: .35rem .75rem;
}

/* Badges de grupo */
.grupo-badge,
.ue-grupo-badge,
.u-grupo-badge {
    border-radius: 999px;
    font-family: var(--font-main);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: .22rem .65rem;
    text-transform: uppercase;
}

/* Colores por rol */
.ue-gb-superadmin,
.u-grupo-superadmin { background: var(--danger-soft); color: var(--danger); }

.ue-gb-admin,
.u-grupo-admin      { background: var(--primary-glow); color: var(--accent); }

.ue-gb-developer,
.u-grupo-developer  { background: var(--teal-glow); color: var(--teal); }

.ue-gb-user,
.u-grupo-user       { background: rgba(244,248,251,.08); color: var(--muted); }

.ue-gb-beta,
.u-grupo-beta       { background: rgba(155,89,182,.15); color: #c78cef; }

/* ── 6. FLASH MESSAGES ───────────────────────────────────────────────────── */
.flash-stack {
    display: grid;
    gap: .5rem;
    margin: 1rem clamp(1rem,3vw,2rem);
}

.flash {
    border-radius: 12px;
    font-size: .88rem;
    padding: .85rem 1rem;
}

.flash-success {
    background: var(--success-soft);
    border: 1px solid rgba(45,200,120,.25);
    color: var(--success);
}

.flash-error {
    background: var(--danger-soft);
    border: 1px solid rgba(231,76,92,.25);
    color: var(--danger);
}

/* ── 7. TOAST ────────────────────────────────────────────────────────────── */
.ue-toast,
.u-toast {
    backdrop-filter: blur(12px);
    background: rgba(5,19,31,.92);
    border-radius: 12px;
    bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    color: var(--ink);
    font-family: var(--font-main);
    font-size: .88rem;
    font-weight: 600;
    left: 50%;
    opacity: 0;
    padding: .75rem 1.25rem;
    position: fixed;
    transform: translateX(-50%) translateY(12px);
    transition: opacity .22s, transform .22s;
    z-index: 9999;
}

.ue-toast[hidden],
.u-toast[hidden] { display: none; }

.ue-toast.ue-visible,
.u-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.ue-toast.ue-ok,
.u-toast.u-toast-ok   { border-left: 3px solid var(--success); }

.ue-toast.ue-error,
.u-toast.u-toast-error { border-left: 3px solid var(--danger); }

/* ── 8. FORMULARIOS ──────────────────────────────────────────────────────── */
.field,
.form-row .field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.field label,
.field span:first-child {
    color: var(--muted);
    font-family: var(--font-main);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.field label .req {
    color: var(--accent);
    margin-left: 2px;
}

.field input,
.field select,
.field textarea {
    background: rgba(13,53,85,.7);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    font: inherit;
    font-size: .93rem;
    outline: none;
    padding: .75rem 1rem;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--muted-2);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-soft);
}

.field textarea {
    min-height: 90px;
    resize: vertical;
}

.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232cb4f0'%3E%3Cpath fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 18px;
    padding-right: 2.5rem;
}

.field-error {
    color: var(--danger);
    font-family: var(--font-main);
    font-size: .8rem;
    font-weight: 600;
}

.hint {
    color: var(--muted);
    font-size: .78rem;
}

.check-field {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: .92rem;
    font-weight: 700;
    gap: .6rem;
}

.check-field input {
    accent-color: var(--accent);
    height: 1.1rem;
    width: 1.1rem;
}

.form-row {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ── 9. LAYOUT PÚBLICO (HEADER / FOOTER) ─────────────────────────────────── */
.public-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.public-header {
    align-items: center;
    background: rgba(5,19,31,.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    padding: 1.1rem clamp(1rem,4vw,4rem);
    position: sticky;
    top: 0;
    z-index: 50;
}

.public-nav {
    align-items: center;
    display: flex;
    gap: 1.5rem;
}

.public-nav a {
    color: var(--muted);
    font-family: var(--font-main);
    font-size: .875rem;
    text-decoration: none;
    transition: color .22s;
}

.public-nav a:hover { color: var(--ink); }

.public-footer {
    border-top: 1px solid var(--line);
    color: var(--muted);
    display: flex;
    font-size: .8rem;
    gap: 1rem;
    justify-content: space-between;
    margin-top: auto;
    padding: 1.5rem clamp(1rem,4vw,4rem);
    flex-wrap: wrap;
}

/* ── 10. LANDING PAGE ────────────────────────────────────────────────────── */
.landing-shell {
    background: var(--bg);
    overflow-x: hidden;
    position: relative;
}

/* Fondo de ondas */
.landing-waves {
    bottom: -2px;
    left: 0;
    opacity: .07;
    pointer-events: none;
    position: fixed;
    width: 100%;
    z-index: 0;
}

/* Degradados de fondo */
.landing-shell::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(26,130,196,.13) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(14,158,142,.10) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

/* Header de la landing */
.landing-header {
    align-items: center;
    background: rgba(5,19,31,.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    left: 0;
    padding: 1rem clamp(1.5rem,4vw,4rem);
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
}

.landing-nav {
    align-items: center;
    display: flex;
    gap: 2rem;
}

.landing-nav a {
    color: var(--muted);
    font-family: var(--font-main);
    font-size: .875rem;
    text-decoration: none;
    transition: color .22s;
}

.landing-nav a:hover { color: var(--ink); }

/* Secciones de la landing */
.landing-hero {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding: 8rem 2rem 5rem;
    position: relative;
    text-align: center;
    z-index: 1;
}

.hero-eyebrow {
    align-items: center;
    background: rgba(44,180,240,.1);
    border: 1px solid rgba(44,180,240,.25);
    border-radius: 999px;
    color: var(--accent);
    display: inline-flex;
    font-family: var(--font-main);
    font-size: .78rem;
    font-weight: 500;
    gap: .5rem;
    letter-spacing: .08em;
    margin-bottom: 1.75rem;
    padding: .35rem 1rem;
    text-transform: uppercase;
    animation: fadeUp .7s ease both;
}

.hero-eyebrow::before {
    background: var(--accent);
    border-radius: 50%;
    content: '';
    height: 6px;
    width: 6px;
}

.hero-title {
    animation: fadeUp .7s .1s ease both;
    font-family: var(--font-main);
    font-size: clamp(2.5rem,6vw,4.5rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.08;
    margin: 0 auto 1.25rem;
    max-width: 820px;
}

.hero-title span {
    background: linear-gradient(135deg, var(--accent) 0%, var(--teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-sub {
    animation: fadeUp .7s .2s ease both;
    color: var(--muted);
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.65;
    margin: 0 auto 2.5rem;
    max-width: 520px;
}

.hero-actions {
    animation: fadeUp .7s .3s ease both;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

/* Stats strip */
.stats-strip {
    background: rgba(10,30,46,.55);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.stat-item {
    animation: fadeUp .6s ease both;
    border-right: 1px solid var(--line);
    flex: 1;
    max-width: 220px;
    padding: 2rem 1.5rem;
    text-align: center;
}

.stat-item:last-child { border-right: none; }
.stat-item:nth-child(2) { animation-delay: .1s; }
.stat-item:nth-child(3) { animation-delay: .2s; }
.stat-item:nth-child(4) { animation-delay: .3s; }

.stat-number {
    background: linear-gradient(135deg, var(--accent), var(--teal));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    font-family: var(--font-main);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: .35rem;
}

.stat-label {
    color: var(--muted);
    font-family: var(--font-main);
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Features grid */
.landing-features {
    margin: 0 auto;
    max-width: 1100px;
    padding: 6rem 2rem;
    position: relative;
    z-index: 1;
}

.section-label {
    color: var(--accent);
    font-family: var(--font-main);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .1em;
    margin-bottom: 1rem;
    text-align: center;
    text-transform: uppercase;
}

.section-title {
    font-family: var(--font-main);
    font-size: clamp(1.6rem,3vw,2.25rem);
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 3.5rem;
    text-align: center;
}

.feature-grid {
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 1.5px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    overflow: hidden;
}

.feature-card {
    background: var(--bg-mid);
    padding: 2.5rem 2rem;
    transition: background .25s;
}

.feature-card:hover { background: var(--surface); }

.feature-icon {
    align-items: center;
    background: rgba(44,180,240,.1);
    border: 1px solid rgba(44,180,240,.18);
    border-radius: 12px;
    display: grid;
    font-size: 1.25rem;
    height: 44px;
    margin-bottom: 1.25rem;
    place-items: center;
    width: 44px;
}

.feature-card h3 {
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .6rem;
    margin-top: 0;
}

.feature-card p {
    color: var(--muted);
    font-size: .875rem;
    line-height: 1.6;
    margin: 0;
}

/* Logos */
.logos-section {
    border-top: 1px solid var(--line);
    padding: 4rem 2rem 5rem;
    position: relative;
    text-align: center;
    z-index: 1;
}

.logos-label {
    color: var(--muted);
    font-family: var(--font-main);
    font-size: .75rem;
    letter-spacing: .1em;
    margin-bottom: 2.5rem;
    text-transform: uppercase;
}

.logos-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    justify-content: center;
}

.logo-item {
    align-items: center;
    display: flex;
    filter: grayscale(30%);
    justify-content: center;
    opacity: .6;
    transition: opacity .3s, transform .3s, filter .3s;
}

.logo-item:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

.logo-item img {
    max-height: 70px;
    max-width: 180px;
    object-fit: contain;
    width: auto;
}

/* CTA */
.cta-section {
    background: linear-gradient(180deg, transparent, rgba(10,30,46,.65));
    border-top: 1px solid var(--line);
    padding: 5rem 2rem 6rem;
    position: relative;
    text-align: center;
    z-index: 1;
}

.cta-section h2 {
    font-family: var(--font-main);
    font-size: clamp(1.6rem,3vw,2.25rem);
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 1rem;
    margin-top: 0;
}

.cta-section p {
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 2rem;
}

/* Footer landing */
.landing-footer {
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.5rem clamp(1.5rem,4vw,4rem);
    position: relative;
    z-index: 1;
}

.landing-footer-brand {
    color: var(--muted);
    font-family: var(--font-main);
    font-size: .875rem;
    font-weight: 600;
}

.landing-footer-copy {
    color: var(--muted-2);
    font-size: .78rem;
}

/* ── 11. VIEJA LANDING / SECCIONES PÚBLICAS ──────────────────────────────── */
/* Usada por landing/publica.php */
.hero {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    min-height: 68vh;
    padding: clamp(2rem,6vw,6rem) clamp(1rem,4vw,4rem);
}

.hero h1 {
    font-family: var(--font-main);
    font-size: clamp(2.6rem,7vw,6.5rem);
    letter-spacing: -.04em;
    line-height: 1.02;
    margin: .4rem 0 1rem;
    max-width: 900px;
}

.hero-text {
    color: var(--muted);
    font-size: clamp(1.05rem,2vw,1.35rem);
    max-width: 720px;
}

.hero-actions-pub {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

.hero-card,
.panel,
.feature-card-pub {
    background: rgba(10,30,46,.7);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.hero-card {
    align-self: center;
    overflow: hidden;
    padding: 1rem;
}

.map-preview,
.visor-map-placeholder {
    background: radial-gradient(circle at 20% 20%, rgba(44,180,240,.25), transparent 28%),
                radial-gradient(circle at 80% 25%, rgba(14,158,142,.2), transparent 28%),
                linear-gradient(135deg, #0a1e2e, #0c2d44);
    border-radius: 14px;
    min-height: 390px;
    overflow: hidden;
    position: relative;
}

.map-preview::before,
.visor-map-placeholder::before {
    background-image: linear-gradient(rgba(44,180,240,.08) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(44,180,240,.08) 1px, transparent 1px);
    background-size: 42px 42px;
    content: "";
    inset: 0;
    position: absolute;
}

.well-point {
    background: var(--primary);
    border: 3px solid #fff;
    border-radius: 999px;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    padding: .45rem .55rem;
    position: absolute;
    z-index: 1;
}

.point-a { left: 18%; top: 28%; }
.point-b { right: 24%; top: 42%; }
.point-c { left: 42%; bottom: 20%; }

.hero-metrics,
.module-list {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 1rem;
}

.hero-metrics span,
.module-list span {
    background: rgba(13,53,85,.65);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    font-size: .85rem;
    padding: .9rem;
}

.section {
    padding: clamp(2rem,5vw,5rem) clamp(1rem,4vw,4rem);
}

.section-heading { max-width: 760px; }

.section h2,
.panel h2 {
    font-family: var(--font-main);
    font-size: clamp(2rem,4vw,4rem);
    letter-spacing: -.04em;
    line-height: 1.02;
    margin: .4rem 0 1rem;
}

.split-section {
    align-items: center;
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
}

.module-list { grid-template-columns: 1fr; }

.security-band {
    align-items: center;
    background: linear-gradient(135deg, var(--bg-mid), var(--surface));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    margin: clamp(1rem,4vw,4rem);
    padding: clamp(1rem,4vw,4rem);
}

.security-band .eyebrow { color: var(--muted); }

/* ── 12. AUTENTICACIÓN ────────────────────────────────────────────────────── */
.auth-page {
    padding: clamp(1rem,4vw,4rem);
}

.auth-panel {
    align-items: stretch;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0,1fr) minmax(340px,460px);
    min-height: calc(100vh - 220px);
}

.auth-copy {
    background: linear-gradient(135deg, rgba(5,19,31,.96), rgba(10,30,46,.9)),
                radial-gradient(circle at 15% 25%, rgba(44,180,240,.18), transparent 35%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: clamp(1.5rem,5vw,4rem);
    position: relative;
}

.auth-copy::before {
    background-image: linear-gradient(rgba(44,180,240,.06) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(44,180,240,.06) 1px, transparent 1px);
    background-size: 54px 54px;
    content: "";
    inset: 0;
    position: absolute;
}

.auth-copy > * { position: relative; }

.auth-copy .eyebrow { color: var(--muted); }

.auth-copy h1 {
    font-family: var(--font-main);
    font-size: clamp(2.5rem,6vw,5.8rem);
    letter-spacing: -.05em;
    line-height: 1;
    margin: .5rem 0 1rem;
    max-width: 760px;
}

.auth-copy p {
    color: var(--muted);
    font-size: 1.1rem;
    max-width: 620px;
}

.auth-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.5rem;
}

.auth-highlights span {
    background: rgba(44,180,240,.1);
    border: 1px solid rgba(44,180,240,.2);
    border-radius: 999px;
    color: var(--muted);
    padding: .55rem .85rem;
    font-size: .875rem;
}

.auth-card {
    align-self: center;
    background: rgba(10,30,46,.85);
    backdrop-filter: blur(12px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.25rem,4vw,2rem);
}

.auth-card-heading {
    align-items: center;
    display: flex;
    gap: .85rem;
    margin-bottom: 1.5rem;
}

.auth-card h2 {
    font-family: var(--font-main);
    font-size: 2rem;
    letter-spacing: -.04em;
    margin: .15rem 0 0;
}

.auth-form { display: grid; gap: 1rem; }

.auth-submit {
    border: 0;
    cursor: pointer;
    font: inherit;
    margin-top: .25rem;
    width: 100%;
}

.auth-links {
    border-top: 1px solid var(--line);
    color: var(--muted);
    display: grid;
    font-size: .875rem;
    gap: .35rem;
    margin-top: .25rem;
    padding-top: 1rem;
    text-align: center;
}

.auth-links p { margin: 0; }

.auth-links a {
    color: var(--accent);
    font-weight: 700;
}

/* ── 13. APP SHELL (layout autenticado) ──────────────────────────────────── */
.app-shell {
    background: var(--bg);
}

.app-frame {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    background: #030d16;
    border-right: 1px solid var(--line-soft);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem;
}

.sidebar .brand small { color: var(--muted); }

.sidebar-brand,
.topbar,
.panel-heading {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.sidebar-close,
.menu-button {
    background: rgba(44,180,240,.08);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: inherit;
    cursor: pointer;
    padding: .6rem .8rem;
    font-size: .8rem;
    font-family: var(--font-main);
    font-weight: 600;
}

.sidebar-close { display: none; }

.sidebar-nav {
    display: grid;
    gap: .3rem;
}

.sidebar-link {
    align-items: center;
    border-radius: 12px;
    color: var(--muted);
    display: flex;
    gap: .75rem;
    padding: .75rem .9rem;
    transition: background .18s, color .18s;
}

.sidebar-link:hover,
.sidebar-link.is-active {
    background: rgba(44,180,240,.1);
    color: var(--ink);
}

.sidebar-link.is-active { color: var(--accent); }

/* Grupo colapsable */
.sidebar-group-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    justify-content: flex-start;
    width: 100%;
}

.sidebar-caret {
    font-size: .8rem;
    margin-left: auto;
    transition: transform .22s ease;
}

.sidebar-group.is-open .sidebar-caret {
    transform: rotate(90deg);
}

.sidebar-children {
    display: grid;
    gap: .2rem;
    max-height: 0;
    overflow: hidden;
    padding-left: .75rem;
    transition: max-height .28s ease;
}

.sidebar-group.is-open .sidebar-children {
    max-height: 300px;
}

.sidebar-child {
    font-size: .88rem;
    padding: .6rem .9rem;
}

.sidebar-icon {
    align-items: center;
    background: rgba(44,180,240,.1);
    border-radius: 8px;
    display: inline-flex;
    font-size: .65rem;
    font-weight: 800;
    height: 32px;
    justify-content: center;
    width: 40px;
}

.sidebar-link.is-active .sidebar-icon {
    background: rgba(44,180,240,.2);
}

.sidebar-foot {
    border-top: 1px solid var(--line-soft);
    color: var(--muted);
    display: grid;
    font-size: .82rem;
    gap: .4rem;
    margin-top: auto;
    padding-top: 1rem;
}

.sidebar-foot a {
    color: var(--accent);
    font-weight: 600;
}

.sidebar-backdrop { display: none; }

/* Área principal */
.app-main { min-width: 0; }

.topbar {
    align-items: center;
    background: rgba(5,19,31,.88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .75rem clamp(1rem,3vw,2rem);
    position: sticky;
    top: 0;
    z-index: 5;
}

.topbar h1 {
    font-family: var(--font-main);
    font-size: clamp(1.4rem,2.4vw,2.2rem);
    letter-spacing: -.03em;
    line-height: 1;
    margin: 0;
}

/* Brand en la topbar */
.topbar-brand {
    align-items: center;
    color: inherit;
    display: inline-flex;
    gap: .75rem;
    text-decoration: none;
}

.topbar-brand strong {
    color: var(--ink);
    display: block;
    font-family: var(--font-main);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.15;
}

.topbar-brand small {
    color: var(--muted);
    display: block;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ── Dropdown de usuario (topbar) ───────────────────────────────────────── */
.topbar-user-wrap {
    position: relative;
}

.topbar-user-btn {
    align-items: center;
    background: rgba(44,180,240,.08);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    font-family: var(--font-main);
    font-size: .82rem;
    font-weight: 600;
    gap: .55rem;
    padding: .4rem .85rem .4rem .45rem;
    transition: background .15s, border-color .15s, color .15s;
}

.topbar-user-btn:hover,
.topbar-user-btn--open {
    background: rgba(26,130,196,.22);
    border-color: rgba(44,180,240,.45);
    color: var(--ink);
}

.topbar-user-avatar {
    align-items: center;
    background: var(--primary);
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-family: var(--font-main);
    font-size: .72rem;
    font-weight: 800;
    height: 26px;
    justify-content: center;
    letter-spacing: 0;
    width: 26px;
}

.topbar-user-chevron {
    color: var(--muted);
    font-size: .65rem;
    transition: transform .2s;
}

.topbar-user-btn--open .topbar-user-chevron {
    transform: rotate(180deg);
}

.topbar-user-menu {
    animation: fadeUp .15s ease;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(5,19,31,.97);
    border: 1px solid rgba(44,180,240,.22);
    border-radius: 14px;
    box-shadow: 0 10px 36px rgba(0,0,0,.55);
    min-width: 200px;
    overflow: hidden;
    padding: .35rem 0;
    position: absolute;
    right: 0;
    top: calc(100% + .6rem);
    z-index: 1000;
}

.topbar-menu-item {
    align-items: center;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    font-family: var(--font-main);
    font-size: .84rem;
    font-weight: 600;
    gap: .65rem;
    padding: .6rem 1.1rem;
    text-decoration: none;
    transition: background .12s, color .12s;
    white-space: nowrap;
}

.topbar-menu-item:hover {
    background: rgba(44,180,240,.1);
    color: var(--ink);
}

.topbar-menu-item--danger:hover {
    background: rgba(231,76,92,.1);
    color: var(--danger);
}

.topbar-menu-icon { flex-shrink: 0; font-size: .95rem; line-height: 1; }

.topbar-menu-divider {
    border: none;
    border-top: 1px solid rgba(44,180,240,.12);
    margin: .3rem 0;
}

.topbar-menu-section-label {
    color: var(--muted);
    font-family: var(--font-main);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    padding: .45rem .9rem .2rem;
    text-transform: uppercase;
}

.menu-button { display: none; }

.app-content {
    padding: clamp(1rem,3vw,2rem);
}

/* ── 14. PANELES & CARDS ──────────────────────────────────────────────────── */
.panel {
    background: rgba(10,30,46,.7);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1.25rem;
}

.panel-heading {
    margin-bottom: 1rem;
}

.panel-heading-actions {
    align-items: center;
    display: flex;
    gap: .75rem;
}

.workspace-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0,1.5fr) minmax(280px,.7fr);
}

.map-panel { min-height: 520px; }

.visor-map-placeholder {
    align-items: end;
    display: flex;
    min-height: 430px;
    padding: 1rem;
}

.visor-map-placeholder p {
    background: rgba(10,30,46,.78);
    border-radius: 999px;
    color: var(--muted);
    margin: 0;
    padding: .7rem 1rem;
    z-index: 1;
}

.chart-placeholder {
    align-items: end;
    display: flex;
    gap: .75rem;
    height: 220px;
    padding-top: 1rem;
}

.chart-placeholder span {
    background: linear-gradient(180deg, var(--accent), var(--primary));
    border-radius: 10px 10px 0 0;
    flex: 1;
}

.chart-placeholder span:nth-child(1) { height: 35%; }
.chart-placeholder span:nth-child(2) { height: 62%; }
.chart-placeholder span:nth-child(3) { height: 48%; }
.chart-placeholder span:nth-child(4) { height: 72%; }
.chart-placeholder span:nth-child(5) { height: 58%; }
.chart-placeholder span:nth-child(6) { height: 86%; }

.data-list {
    display: grid;
    gap: .8rem;
}

.data-list div {
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    padding-bottom: .8rem;
}

.data-list dt { color: var(--muted); font-size: .88rem; }
.data-list dd { font-size: .88rem; font-weight: 700; margin: 0; }

/* ── 15. TABLAS ───────────────────────────────────────────────────────────── */
.responsive-table { overflow-x: auto; }

table {
    border-collapse: collapse;
    min-width: 640px;
    width: 100%;
}

th, td {
    border-bottom: 1px solid var(--line);
    padding: .85rem;
    text-align: left;
}

th {
    color: var(--muted);
    font-family: var(--font-main);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ── 16. MÓDULO USUARIOS ─────────────────────────────────────────────────── */
.usuarios-wrap,
.ue-wrap {
    padding: clamp(1rem,2.5vw,2rem);
}

.usuarios-panel,
.ue-panel {
    background: rgba(10,30,46,.7);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
}

/* Grid usuarios/edit */
.ue-header { margin-bottom: 1.25rem; }

.ue-back {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: .88rem;
    font-weight: 600;
    gap: .4rem;
    text-decoration: none;
    transition: color .15s;
}

.ue-back:hover { color: var(--accent); }
.ue-back svg   { height: 16px; width: 16px; }

.ue-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}

.ue-panel-estado { grid-column: 1 / -1; }

.ue-panel-head { margin-bottom: 1.25rem; }
.ue-panel-head h2 { font-family: var(--font-main); font-size: 1.3rem; margin: .3rem 0 0; }

/* Form usuario */
.ue-form { display: grid; gap: .9rem; }

.ue-field { display: grid; gap: .4rem; }

.ue-field label {
    color: var(--muted);
    font-family: var(--font-main);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ue-field input {
    background: rgba(13,53,85,.7);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    font: inherit;
    outline: none;
    padding: .85rem 1rem;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}

.ue-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.ue-field--error input { border-color: var(--danger); }

.ue-error-msg { color: var(--danger); font-size: .82rem; font-weight: 600; }

.ue-errors {
    background: var(--danger-soft);
    border: 1px solid rgba(231,76,92,.28);
    border-radius: 12px;
    color: var(--danger);
    font-size: .88rem;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
}

.ue-errors p { margin: 0; }

.ue-form-footer { display: flex; justify-content: flex-end; margin-top: .25rem; }

.ue-btn-save {
    align-items: center;
    background: var(--primary);
    border: none;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    gap: .4rem;
    padding: .7rem 1.3rem;
    transition: background .15s, box-shadow .15s, transform .1s;
}

.ue-btn-save:hover {
    background: var(--primary-dark);
    box-shadow: 0 4px 16px var(--primary-glow);
    transform: translateY(-1px);
}

.ue-btn-save svg { height: 16px; width: 16px; }

/* Metadatos */
.ue-meta {
    border-top: 1px solid var(--line);
    display: grid;
    gap: .6rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
}

.ue-meta div { display: flex; justify-content: space-between; }
.ue-meta dt  { color: var(--muted); font-size: .85rem; }
.ue-meta dd  { font-size: .85rem; font-weight: 700; margin: 0; }

/* Grupos */
.ue-grupos-hint { color: var(--muted); font-size: .85rem; margin: 0 0 1rem; }

.ue-grupos-list { display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; }

.ue-grupo-item {
    align-items: center;
    background: rgba(13,53,85,.5);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding: .85rem 1rem;
    transition: border-color .2s, background .2s;
}

.ue-grupo-item.ue-grupo-on {
    background: rgba(44,180,240,.08);
    border-color: rgba(44,180,240,.3);
}

.ue-grupo-info { align-items: center; display: flex; gap: .6rem; min-width: 0; }

.ue-grupo-desc { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Toggle switch grupos */
.ue-grupo-toggle { background: transparent; border: none; cursor: pointer; flex-shrink: 0; padding: 0; }

.ue-gt-track {
    background: rgba(231,76,92,.3);
    border-radius: 999px;
    display: block;
    height: 22px;
    position: relative;
    transition: background .2s;
    width: 42px;
}

.ue-gt-on .ue-gt-track { background: var(--primary); }

.ue-gt-thumb {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 5px rgba(0,0,0,.35);
    height: 16px;
    left: 3px;
    position: absolute;
    top: 3px;
    transition: left .2s;
    width: 16px;
}

.ue-gt-on .ue-gt-thumb { left: 23px; }

.ue-grupo-ro { font-size: .78rem; font-weight: 700; }
.ue-ro-on  { color: var(--accent); }
.ue-ro-off { color: var(--muted); }

.ue-warning {
    background: var(--warn-soft);
    border: 1px solid rgba(240,185,50,.3);
    border-radius: 10px;
    color: var(--warn);
    font-size: .83rem;
    margin-top: 1rem;
    padding: .6rem .9rem;
}

/* Estado de cuenta */
.ue-estado-row { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.ue-estado-label { font-size: 1rem; font-weight: 700; margin: 0 0 .2rem; }
.ue-estado-desc  { color: var(--muted); font-size: .88rem; margin: 0; }

.ue-activo-toggle {
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    gap: .3rem;
}

.ue-at-track {
    background: rgba(231,76,92,.3);
    border-radius: 999px;
    height: 28px;
    position: relative;
    transition: background .2s;
    width: 54px;
}

.ue-at-on .ue-at-track { background: var(--primary); }

.ue-at-thumb {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    height: 20px;
    left: 4px;
    position: absolute;
    top: 4px;
    transition: left .2s;
    width: 20px;
}

.ue-at-on .ue-at-thumb { left: 30px; }

/* Tabla usuarios/index */
.u-search-wrap { margin-top: 1.25rem; }

.u-search-inner {
    align-items: center;
    background: rgba(13,53,85,.7);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    gap: .6rem;
    padding: .65rem 1rem;
    transition: border-color .15s, box-shadow .15s;
}

.u-search-inner:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.u-search-icon { color: var(--muted); flex-shrink: 0; height: 17px; width: 17px; }

#u-buscador {
    background: transparent;
    border: 0;
    color: var(--ink);
    flex: 1;
    font: inherit;
    font-size: .93rem;
    outline: none;
}

#u-buscador::placeholder { color: var(--muted); }

.u-row { transition: background .12s; }
.u-row:hover { background: rgba(44,180,240,.05); }

.u-id {
    background: rgba(44,180,240,.1);
    border-radius: 7px;
    color: var(--accent);
    font-family: var(--font-main);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: .25rem .5rem;
}

.u-self-badge {
    background: rgba(44,180,240,.15);
    border-radius: 999px;
    color: var(--accent);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    margin-left: .35rem;
    padding: .1rem .45rem;
    text-transform: uppercase;
}

.u-email { color: var(--muted); font-size: .9rem; }

.u-grupos { display: flex; flex-wrap: wrap; gap: .3rem; }
.u-grupo-none { color: var(--muted); font-size: .82rem; }

/* Toggle activo en tabla */
.u-toggle-activo {
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: .5rem;
    padding: .2rem 0;
}

.u-toggle-track {
    background: rgba(231,76,92,.28);
    border-radius: 999px;
    display: inline-block;
    height: 20px;
    position: relative;
    transition: background .2s ease;
    width: 38px;
}

.u-activo .u-toggle-track { background: var(--primary); }

.u-toggle-thumb {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    height: 14px;
    left: 3px;
    position: absolute;
    top: 3px;
    transition: left .2s ease;
    width: 14px;
}

.u-activo .u-toggle-thumb { left: 21px; }

.u-toggle-label { color: var(--muted); font-size: .82rem; font-weight: 700; }
.u-activo .u-toggle-label { color: var(--accent); }

.u-estado-badge { border-radius: 999px; font-size: .78rem; font-weight: 700; padding: .28rem .7rem; }
.u-activo-ro    { background: rgba(44,180,240,.12);  color: var(--accent); }
.u-inactivo-ro  { background: var(--danger-soft); color: var(--danger); }

.u-actions-cell { text-align: center; width: 50px; }

.u-empty { padding: 3rem 0; text-align: center; }

/* ── 17. MÓDULO ESTACIONES ───────────────────────────────────────────────── */
.estaciones-grid { display: block; }

.estaciones-panel {
    background: rgba(10,30,46,.7);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
}

/* IDs y celdas */
.estacion-id {
    background: rgba(44,180,240,.1);
    border-radius: 7px;
    color: var(--accent);
    display: inline-block;
    font-family: var(--font-main);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .28rem .55rem;
}

.estacion-row { cursor: default; transition: background .15s ease; }
.estacion-row:hover { background: rgba(44,180,240,.04); }

.coord-val {
    color: var(--accent);
    font-size: .9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cota-val {
    color: var(--teal);
    font-size: .9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.coord-empty { color: var(--muted); font-size: .9rem; }
.obs-cell    { max-width: 220px; }
.obs-text    { color: var(--muted); font-size: .88rem; }
.estaciones-empty { padding: 3rem 0; text-align: center; }

/* Form panel (create/edit wrapper) */
.form-panel {
    background: rgba(10,30,46,.7);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
}

.estacion-id-badge {
    background: rgba(44,180,240,.12);
    border-radius: 7px;
    color: var(--accent);
    font-size: .72em;
    font-weight: 800;
    letter-spacing: .04em;
    padding: .22rem .55rem;
    vertical-align: middle;
}

/* Buscador estaciones */
.sr-only {
    clip: rect(0,0,0,0);
    border: 0;
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.estaciones-search-wrap { margin-top: 1.25rem; }

.estaciones-search-inner {
    align-items: center;
    background: rgba(13,53,85,.7);
    border: 1px solid var(--line);
    border-radius: 14px;
    display: flex;
    gap: .6rem;
    padding: .7rem 1rem;
    transition: border-color .15s, box-shadow .15s;
}

.estaciones-search-inner:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.search-icon { color: var(--muted); flex-shrink: 0; height: 18px; width: 18px; }

#buscador-estaciones {
    background: transparent;
    border: 0;
    color: var(--ink);
    flex: 1;
    font: inherit;
    font-size: .95rem;
    min-width: 0;
    outline: none;
}

#buscador-estaciones::placeholder { color: var(--muted); }

.buscador-contador {
    color: var(--muted);
    flex-shrink: 0;
    font-family: var(--font-main);
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

.sin-resultados-cell {
    color: var(--muted);
    font-size: .95rem;
    padding: 2rem .85rem;
    text-align: center;
}

/* Botón ver mapa */
.map-btn-cell { text-align: center; width: 48px; }

.btn-ver-mapa {
    align-items: center;
    background: rgba(44,180,240,.08);
    border: 1px solid rgba(44,180,240,.2);
    border-radius: 10px;
    color: var(--accent);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    padding: .4rem;
    transition: background .15s, transform .1s;
}

.btn-ver-mapa:hover { background: rgba(44,180,240,.18); transform: scale(1.08); }
.btn-ver-mapa svg   { height: 17px; width: 17px; }

/* Acciones CRUD */
.actions-cell  { text-align: center; width: 84px; }
.row-actions   { align-items: center; display: inline-flex; gap: .35rem; }
.form-delete   { display: contents; }

/* Highlight buscador */
mark.search-hl {
    background: rgba(44,180,240,.22);
    border-radius: 3px;
    color: inherit;
    padding: 0 2px;
}

/* Formulario estaciones */
.form-estacion { display: grid; gap: 1.5rem; }

.btn-cancel {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    padding: .65rem 1.2rem;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.btn-cancel:hover {
    background: rgba(44,180,240,.08);
    border-color: var(--accent);
    color: var(--accent);
}

.form-actions {
    align-items: center;
    display: flex;
    gap: .75rem;
    padding-top: .5rem;
}

/* ── 18. MODAL ───────────────────────────────────────────────────────────── */
.modal-mapa-overlay {
    align-items: center;
    background: rgba(3,13,22,.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1.5rem;
    position: fixed;
    z-index: 200;
}

.modal-mapa-overlay[hidden] { display: none; }

.modal-mapa-box {
    animation: modalIn .22s ease;
    background: rgba(10,30,46,.95);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 32px 80px rgba(0,0,0,.55);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    max-width: 780px;
    overflow: hidden;
    width: 100%;
}

.modal-mapa-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.25rem 1.5rem .75rem;
}

.modal-mapa-header h3 {
    font-family: var(--font-main);
    font-size: 1.25rem;
    letter-spacing: -.03em;
    margin: .2rem 0 0;
}

.modal-mapa-close {
    align-items: center;
    background: rgba(44,180,240,.08);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    padding: .45rem;
    transition: background .12s, color .12s;
}

.modal-mapa-close:hover { background: rgba(44,180,240,.18); color: var(--ink); }
.modal-mapa-close svg   { height: 18px; width: 18px; }

#modal-mapa-leaflet { flex: 1; height: 420px; min-height: 300px; }

.modal-mapa-meta {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .85rem;
    padding: .75rem 1.5rem;
}

/* ── 19. VISOR GIS ────────────────────────────────────────────────────────── */
.app-content:has(.visor-shell) {
    overflow-y: auto;
    padding: 0;
}

.visor-shell {
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    grid-template-rows: 75vh auto auto;
    gap: 0;
}

.visor-map-wrap { grid-column: 1; grid-row: 1; position: relative; }

#visor-map {
    background: #030d16;
    height: 75vh;
    min-height: 420px;
    width: 100%;
}

/* Pills */
.visor-loading-pill,
.visor-count-pill {
    align-items: center;
    background: rgba(5,19,31,.88);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(44,180,240,.3);
    border-radius: 999px;
    bottom: 1.25rem;
    color: var(--ink);
    display: flex;
    font-family: var(--font-main);
    font-size: .8rem;
    font-weight: 700;
    gap: .5rem;
    left: 50%;
    padding: .6rem 1rem;
    position: absolute;
    transform: translateX(-50%);
    z-index: 800;
}

.visor-count-pill {
    background: rgba(26,130,196,.82);
    left: auto;
    right: 1rem;
    transform: none;
}

/* ── Selector de capa base (dropdown 5 opciones) ─────────────────────────── */
.visor-basemap-selector {
    bottom: 1.25rem;
    left: 1rem;
    position: absolute;
    z-index: 900;
}

/* Botón principal del selector */
.visor-basemap-btn {
    align-items: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(5,19,31,.88);
    border: 1px solid rgba(44,180,240,.28);
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    gap: .4rem;
    letter-spacing: .02em;
    padding: .5rem .85rem;
    transition: background .18s, border-color .18s, transform .12s;
}

.visor-basemap-btn:hover  { background: rgba(26,130,196,.85); border-color: rgba(44,180,240,.6); transform: translateY(-1px); }
.visor-basemap-btn:active { transform: scale(.96); }

.visor-basemap-icon    { font-size: .95rem; line-height: 1; }
.visor-basemap-label   { white-space: nowrap; }
.visor-basemap-chevron {
    color: var(--muted);
    font-size: .65rem;
    margin-left: .1rem;
    transition: transform .2s;
}

/* Menú desplegable */
.visor-basemap-menu {
    animation: fadeUp .15s ease;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(5,19,31,.96);
    border: 1px solid rgba(44,180,240,.25);
    border-radius: 14px;
    bottom: calc(100% + .6rem);
    box-shadow: 0 10px 36px rgba(0,0,0,.55);
    left: 0;
    min-width: 185px;
    overflow: hidden;
    padding: .4rem 0;
    position: absolute;
}

/* Opciones individuales dentro del menú */
.visor-basemap-option {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    gap: .65rem;
    padding: .55rem 1rem;
    text-align: left;
    transition: background .12s, color .12s;
    width: 100%;
}

.visor-basemap-option:hover {
    background: rgba(44,180,240,.1);
    color: var(--ink);
}

.visor-basemap-option--active {
    background: rgba(44,180,240,.13);
    color: var(--accent);
}

.visor-basemap-option--active::after {
    content: '✓';
    font-size: .75rem;
    margin-left: auto;
    opacity: .85;
}

.visor-basemap-opt-icon { flex-shrink: 0; font-size: 1rem; line-height: 1; }

.visor-spinner {
    animation: visor-spin .8s linear infinite;
    border: 2px solid rgba(44,180,240,.3);
    border-top-color: var(--accent);
    border-radius: 50%;
    display: inline-block;
    height: 14px;
    width: 14px;
}

/* Spinner grande para estado de carga del inspector */
.visor-spinner-lg {
    animation: visor-spin .75s linear infinite;
    border: 3px solid rgba(44,180,240,.18);
    border-top-color: var(--accent);
    border-radius: 50%;
    height: 38px;
    width: 38px;
}

.visor-loading-state {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 2rem 0 1.5rem;
    text-align: center;
}

.visor-loading-state p {
    font-size: .9rem;
    letter-spacing: .01em;
    margin: 0;
}

@keyframes visor-spin { to { transform: rotate(360deg); } }

/* Marcadores */
.visor-marker {
    align-items: center;
    background: var(--primary);
    border: 2.5px solid #fff;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: .65rem;
    font-weight: 800;
    height: 28px;
    justify-content: center;
    letter-spacing: -.02em;
    min-width: 52px;
    padding: 0 6px;
    transition: transform .15s, box-shadow .15s;
    white-space: nowrap;
}

.visor-marker:hover { box-shadow: 0 4px 14px rgba(44,180,240,.6); transform: scale(1.12); }

.visor-marker--active {
    background: #0a5a8a !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px var(--accent-glow), 0 4px 16px rgba(0,0,0,.4) !important;
    transform: scale(1.1);
}

/* Marcador tipo gotita — "Todos los tipos" (Subterránea, Superficial, Humedal, Hidroclimatológica) */
.visor-marker--small {
    background: var(--primary);   /* el color real se aplica via style="" inline */
    border: 2px solid rgba(255,255,255,.85);
    border-radius: 50% 50% 50% 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.55);
    height: 14px;
    min-width: 0;
    padding: 0;
    transform: rotate(-45deg);
    transition: transform .15s, box-shadow .15s;
    width: 14px;
}

.visor-marker--small:hover {
    box-shadow: 0 3px 12px rgba(44,180,240,.75);
    transform: rotate(-45deg) scale(1.35);
}

/* Panel capas */
.visor-layers-panel {
    background: rgba(5,19,31,.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(44,180,240,.22);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    left: 12px;
    min-width: 220px;
    overflow: hidden;
    position: absolute;
    top: 12px;
    z-index: 900;
}

.visor-layers-head {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 700;
    gap: .6rem;
    letter-spacing: .03em;
    padding: .75rem 1rem;
    text-transform: uppercase;
    width: 100%;
}

.visor-layers-head:hover { background: rgba(255,255,255,.04); }

.visor-layers-icon  { color: var(--accent); font-size: 1rem; }
.visor-layers-arrow { color: var(--muted); font-size: .7rem; margin-left: auto; transition: transform .2s; }

.visor-layers-body { border-top: 1px solid rgba(44,180,240,.12); padding: .5rem 0 .75rem; }

.visor-layers-hint {
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.4;
    margin: 0 0 .5rem;
    padding: .25rem 1rem;
}

.visor-layer-item {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: .6rem;
    padding: .5rem 1rem;
    transition: background .12s;
}

.visor-layer-item:hover { background: rgba(255,255,255,.05); }

.visor-layer-check { accent-color: var(--accent); cursor: pointer; flex-shrink: 0; height: 15px; width: 15px; }
.visor-layer-dot   { border-radius: 50%; box-shadow: 0 0 6px currentColor; flex-shrink: 0; height: 10px; width: 10px; }
.visor-layer-name  { color: var(--ink); flex: 1; font-size: .83rem; }

.visor-layer-count {
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    color: var(--muted);
    font-family: var(--font-main);
    font-size: .7rem;
    font-weight: 700;
    padding: .15rem .5rem;
}

.visor-layer-item.visor-layer-loading .visor-layer-name::after {
    animation: visor-pulse 1s infinite;
    content: ' …';
    opacity: .6;
}

/* Etiqueta separadora de grupos en el panel de capas */
.visor-layers-group-label {
    border-top: 1px solid rgba(44,180,240,.12);
    color: var(--muted);
    font-family: var(--font-main);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    margin: .4rem 0 .1rem;
    padding: .55rem 1rem .2rem;
    text-transform: uppercase;
}

/* Encabezado colapsable de sección (ej: Información Regional) */
.visor-section-toggle {
    align-items: center;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(44,180,240,.12);
    color: var(--muted);
    cursor: pointer;
    display: flex;
    font-family: var(--font-main);
    font-size: .68rem;
    font-weight: 700;
    gap: .4rem;
    justify-content: space-between;
    letter-spacing: .1em;
    margin: .4rem 0 0;
    padding: .55rem 1rem .45rem;
    text-transform: uppercase;
    transition: background .12s, color .12s;
    width: 100%;
}

.visor-section-toggle:hover {
    background: rgba(44,180,240,.06);
    color: var(--ink);
}

.visor-section-label { flex: 1; text-align: left; }

.visor-section-arrow {
    color: var(--muted);
    display: inline-block;
    font-size: .6rem;
    line-height: 1;
    transition: transform .2s ease;
    transform: rotate(-90deg);   /* apunta a la derecha cuando está cerrado */
}

.visor-section-toggle--open .visor-section-arrow {
    transform: rotate(0deg);     /* apunta abajo cuando está abierto */
}

/* ── Buscador de estaciones (dentro del panel de capas) ──────────────────── */
.visor-search-wrap {
    align-items: center;
    background: rgba(13,53,85,.55);
    border: 1px solid rgba(44,180,240,.18);
    border-radius: 999px;
    display: flex;
    gap: .4rem;
    margin: .25rem .75rem .6rem;
    padding: .38rem .65rem .38rem .75rem;
    transition: border-color .15s, box-shadow .15s;
}

.visor-search-wrap:focus-within {
    border-color: rgba(44,180,240,.5);
    box-shadow: 0 0 0 3px rgba(44,180,240,.12);
}

.visor-search-icon {
    color: var(--muted);
    flex-shrink: 0;
    font-size: .82rem;
    line-height: 1;
    pointer-events: none;
}

.visor-search-input {
    background: transparent;
    border: none;
    color: var(--ink);
    flex: 1;
    font-family: inherit;
    font-size: .82rem;
    min-width: 0;
    outline: none;
    padding: 0;
}

.visor-search-input::placeholder { color: var(--muted-2); }

/* Ocultar el botón ✕ nativo del type=search en Chrome/Edge */
.visor-search-input::-webkit-search-cancel-button { display: none; }

.visor-search-clear {
    align-items: center;
    background: rgba(255,255,255,.08);
    border: none;
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: .8rem;
    height: 18px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background .12s, color .12s;
    width: 18px;
}

.visor-search-clear:hover { background: rgba(231,76,92,.2); color: var(--danger); }

/* Panel lateral derecho — grid de dos secciones: inspector + raster */
.visor-side {
    background: var(--bg-mid);
    border-left: 1px solid var(--line);
    display: grid;
    grid-column: 2;
    grid-row: 1;
    grid-template-rows: 1fr 220px;
    height: 75vh;
    overflow: hidden;
}

.visor-inspector {
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
}

/* ── Panel de imágenes raster (parte inferior del panel derecho) ─────────── */
.visor-raster-panel {
    background: var(--bg-deep, #05131f);
    border-top: 1px solid rgba(44,180,240,.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.visor-raster-head {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-family: var(--font-main);
    font-size: .7rem;
    font-weight: 700;
    gap: .5rem;
    letter-spacing: .1em;
    padding: .55rem 1rem;
    text-transform: uppercase;
}

.visor-raster-head-icon { color: var(--accent); font-size: .9rem; }

.visor-raster-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 .5rem;
}

.visor-raster-empty {
    color: var(--muted);
    font-size: .8rem;
    padding: .75rem 1rem;
    text-align: center;
}

.visor-raster-item {
    align-items: center;
    border-left: 3px solid transparent;
    cursor: pointer;
    display: flex;
    gap: .65rem;
    padding: .55rem 1rem;
    transition: background .12s, border-color .12s;
    user-select: none;
}

.visor-raster-item:hover { background: rgba(255,255,255,.04); }

.visor-raster-item--active {
    background: rgba(44,180,240,.08);
    border-left-color: var(--accent);
}

.visor-raster-thumb {
    border-radius: 6px;
    flex-shrink: 0;
    height: 36px;
    object-fit: cover;
    opacity: .75;
    width: 36px;
}

.visor-raster-thumb-placeholder {
    align-items: center;
    background: rgba(44,180,240,.1);
    border: 1px solid rgba(44,180,240,.2);
    border-radius: 6px;
    color: var(--accent);
    display: flex;
    flex-shrink: 0;
    font-size: .9rem;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.visor-raster-info { flex: 1; min-width: 0; }

.visor-raster-name {
    color: var(--ink);
    font-size: .82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visor-raster-date {
    color: var(--muted);
    font-size: .72rem;
    margin-top: .1rem;
}

.visor-raster-toggle {
    align-items: center;
    background: rgba(44,180,240,.08);
    border: 1px solid rgba(44,180,240,.2);
    border-radius: 999px;
    color: var(--muted);
    display: flex;
    flex-shrink: 0;
    font-size: .7rem;
    font-weight: 700;
    gap: .3rem;
    letter-spacing: .03em;
    padding: .2rem .5rem;
    transition: background .12s, color .12s, border-color .12s;
    white-space: nowrap;
}

.visor-raster-item--active .visor-raster-toggle {
    background: rgba(44,180,240,.22);
    border-color: var(--accent);
    color: var(--accent);
}

/* Slider de opacidad del raster */
.visor-raster-opacity {
    align-items: center;
    animation: rasterOpacityIn .18s ease;
    background: rgba(0,0,0,.15);
    border-top: 1px solid rgba(44,180,240,.08);
    display: flex;
    gap: .5rem;
    padding: .35rem 1rem .4rem 1rem;
}

@keyframes rasterOpacityIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.visor-raster-opacity-label {
    color: var(--muted);
    flex-shrink: 0;
    font-family: var(--font-main);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    width: 52px;
}

.visor-raster-slider {
    accent-color: var(--accent);
    cursor: pointer;
    flex: 1;
    height: 3px;
}

.visor-raster-opacity-val {
    color: var(--muted);
    flex-shrink: 0;
    font-family: var(--font-main);
    font-size: .7rem;
    text-align: right;
    width: 30px;
}

.visor-empty-state {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 0 1.5rem;
    text-align: center;
}

.visor-empty-icon { color: var(--accent); font-size: 2.5rem; opacity: .5; }

.visor-empty-state p { font-size: .92rem; line-height: 1.55; margin: 0; max-width: 240px; }

.visor-inspector-header {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.visor-inspector-header h2 { font-family: var(--font-main); font-size: 1.6rem; letter-spacing: -.04em; margin: .2rem 0 0; }

.visor-tipo-pill {
    background: rgba(44,180,240,.12);
    border: 1px solid rgba(44,180,240,.25);
    border-radius: 999px;
    color: var(--accent);
    font-size: .75rem;
    font-weight: 700;
    padding: .3rem .7rem;
    white-space: nowrap;
}

.visor-data-list { margin: 0 0 1rem; }

.visor-obs {
    background: rgba(13,53,85,.65);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--muted);
    font-size: .87rem;
    line-height: 1.5;
    margin: 0;
    padding: .75rem;
}

/* Panel inferior gráfico */
.visor-chart-panel {
    background: var(--bg-mid);
    border-radius: 0;
    border-top: 1px solid var(--line);
    box-shadow: none;
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 1.5rem clamp(1rem,2vw,2rem);
}

.visor-chart-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.visor-chart-header h2 { font-family: var(--font-main); font-size: 1.4rem; letter-spacing: -.04em; margin: .25rem 0 0; }

.visor-chart-controls { align-items: flex-end; display: flex; flex-wrap: wrap; gap: .65rem; }

.visor-date-group { display: grid; gap: .25rem; }

.visor-date-group label {
    color: var(--muted);
    font-family: var(--font-main);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.visor-date-input {
    background: rgba(13,53,85,.7);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font: inherit;
    font-size: .88rem;
    outline: none;
    padding: .6rem .85rem;
}

.visor-date-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

.visor-btn-reset { font-size: .85rem; padding: .6rem 1rem; }

/* Granularity toggle (Diario / Mensual / Anual) */
.visor-gran-group {
    align-items: center;
    align-self: flex-end;
    display: flex;
    gap: 0;
}

.visor-gran-option {
    cursor: pointer;
    position: relative;
}

.visor-gran-option input[type="radio"] {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.visor-gran-option span {
    background: rgba(13, 53, 85, .7);
    border: 1px solid var(--line);
    border-left-width: 0;
    color: var(--muted);
    display: block;
    font-family: var(--font-main);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: .6rem .9rem;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}

.visor-gran-option:first-child span {
    border-left-width: 1px;
    border-radius: 10px 0 0 10px;
}

.visor-gran-option:last-child span {
    border-radius: 0 10px 10px 0;
}

.visor-gran-option:hover span {
    background: rgba(44, 180, 240, .12);
    border-color: rgba(44, 180, 240, .45);
    color: var(--ink);
}

.visor-gran-option input[type="radio"]:checked + span {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.visor-gran-option input[type="radio"]:focus-visible + span {
    box-shadow: 0 0 0 3px var(--accent-glow);
    outline: none;
}

/* ── Capa SAR ─────────────────────────────────────────────────────────────── */

/* Separador en el panel de capas */
.visor-layers-sep {
    border: none;
    border-top: 1px solid var(--line);
    margin: .6rem 0 .4rem;
}

/* Punto de color en el ítem "Datos SAR" */
.visor-sar-dot {
    background: conic-gradient(#2dc878 0 25%, #f0b932 25% 50%, #e67e22 50% 75%, #e74c3c 75%);
}

/* Leyenda SAR compacta */
.visor-sar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .6rem;
    padding: .3rem .5rem .5rem 1.6rem;
}

.visor-sar-leg-item {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: .72rem;
    gap: .3rem;
}

.visor-sar-leg-dot {
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    height: 8px;
    width: 8px;
}

/* Marcador SAR en el mapa */
.visor-sar-marker {
    align-items: center;
    border: 2px solid transparent;
    border-radius: 8px;
    color: #fff;
    display: flex;
    font-family: var(--font-main);
    font-size: .78rem;
    font-weight: 700;
    height: 26px;
    justify-content: center;
    letter-spacing: .02em;
    min-width: 56px;
    padding: 0 .5rem;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
    white-space: nowrap;
}

/* Popup SAR */
.visor-sar-popup strong {
    color: #111;
    display: block;
    font-family: var(--font-main);
    font-size: .95rem;
    margin-bottom: .35rem;
}

.visor-sar-popup-badge {
    border-radius: 6px;
    color: #fff;
    display: inline-block;
    font-family: var(--font-main);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: .5rem;
    padding: .15rem .55rem;
    text-transform: uppercase;
}

.visor-sar-popup table {
    border-collapse: collapse;
    font-size: .85rem;
    table-layout: fixed;
    width: 100%;
}

.visor-sar-popup td {
    overflow-wrap: break-word;
    padding: .2rem .3rem;
}

.visor-sar-popup td:first-child {
    color: var(--muted);
    width: 60%;
}

.visor-sar-popup td:last-child {
    font-weight: 600;
    text-align: right;
    width: 40%;
}

/* Filas flex (reemplazo de table) */
.visor-sar-rows {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-top: .35rem;
}

.visor-sar-row {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
    gap: .5rem;
}

.visor-sar-row span {
    color: #555;
    flex-shrink: 0;
}

.visor-sar-row b {
    color: #111;
    font-weight: 600;
    text-align: right;
}

/* Skeleton */
.visor-chart-skeleton {
    align-items: flex-end;
    display: flex;
    gap: .5rem;
    height: 220px;
    padding-top: 1rem;
}

.visor-chart-skeleton span {
    animation: visor-pulse 1.2s ease-in-out infinite;
    background: linear-gradient(180deg, rgba(44,180,240,.15), rgba(44,180,240,.06));
    border-radius: 8px 8px 0 0;
    flex: 1;
}

.visor-chart-skeleton span:nth-child(1) { height: 40%; animation-delay:  0ms; }
.visor-chart-skeleton span:nth-child(2) { height: 65%; animation-delay: 80ms; }
.visor-chart-skeleton span:nth-child(3) { height: 50%; animation-delay:160ms; }
.visor-chart-skeleton span:nth-child(4) { height: 78%; animation-delay:240ms; }
.visor-chart-skeleton span:nth-child(5) { height: 55%; animation-delay:320ms; }

@keyframes visor-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}

.visor-canvas-wrap { height: 220px; position: relative; }

.visor-no-data { align-items: center; color: var(--muted); display: flex; height: 180px; justify-content: center; }
.visor-no-data p { font-size: .95rem; margin: 0; }

.visor-chart-stats {
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1rem;
    padding-top: 1rem;
}

.visor-stat { display: grid; gap: .2rem; }

.visor-stat-label {
    color: var(--muted);
    font-family: var(--font-main);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.visor-stat strong { font-family: var(--font-main); font-size: 1rem; letter-spacing: -.02em; }

/* ── 20b. GRILLA DETALLE DE NIVELES ──────────────────────────────────────── */
.visor-niveles-grid-wrap {
    border-top: 1px solid var(--line);
    margin-top: 1rem;
}

.visor-grid-toggle {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    gap: .65rem;
    padding: .9rem 0;
    transition: color .15s;
    width: 100%;
}

.visor-grid-toggle:hover { color: var(--accent); }

.visor-grid-toggle-icon {
    color: var(--muted);
    font-size: 1rem;
    flex-shrink: 0;
}

.visor-grid-toggle-actions {
    align-items: center;
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

.visor-grid-badge {
    background: rgba(44,180,240,.14);
    border-radius: 999px;
    color: var(--accent);
    font-family: var(--font-main);
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .55rem;
}

.visor-grid-csv-btn {
    background: rgba(45,139,201,.12);
    border: 1px solid rgba(45,139,201,.28);
    border-radius: 8px;
    color: var(--accent);
    cursor: pointer;
    font-family: inherit;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .25rem .65rem;
    transition: background .14s, border-color .14s;
}

.visor-grid-csv-btn:hover {
    background: rgba(45,139,201,.25);
    border-color: rgba(45,139,201,.5);
}

.visor-grid-chevron {
    color: var(--muted);
    display: inline-block;
    font-size: .75rem;
    transition: transform .2s ease;
}

/* Cuerpo colapsable */
.visor-niveles-grid-body {
    padding-bottom: 1rem;
}

/* Barra de búsqueda interna */
.visor-niveles-search-bar {
    align-items: center;
    background: rgba(13,53,85,.55);
    border: 1px solid rgba(44,180,240,.18);
    border-radius: 10px;
    display: flex;
    gap: .5rem;
    margin-bottom: .85rem;
    padding: .4rem .8rem;
    transition: border-color .15s, box-shadow .15s;
}

.visor-niveles-search-bar:focus-within {
    border-color: rgba(44,180,240,.5);
    box-shadow: 0 0 0 3px rgba(44,180,240,.1);
}

.visor-niveles-search {
    background: transparent;
    border: none;
    color: var(--ink);
    flex: 1;
    font-family: inherit;
    font-size: .85rem;
    min-width: 0;
    outline: none;
}

.visor-niveles-search::placeholder { color: var(--muted-2); }
.visor-niveles-search::-webkit-search-cancel-button { display: none; }

.visor-grid-search-clear {
    align-items: center;
    background: rgba(255,255,255,.08);
    border: none;
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: .8rem;
    height: 18px;
    justify-content: center;
    padding: 0;
    transition: background .12s, color .12s;
    width: 18px;
}

.visor-grid-search-clear:hover { background: rgba(231,76,92,.2); color: var(--danger); }

/* Tabla */
.visor-niveles-table-wrap {
    border: 1px solid var(--line);
    border-radius: 12px;
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.visor-niveles-table {
    border-collapse: collapse;
    font-size: .85rem;
    width: 100%;
}

.visor-niveles-table th,
.visor-niveles-table td {
    border-bottom: 1px solid var(--line);
    padding: .6rem .9rem;
    text-align: left;
    white-space: nowrap;
}

.visor-niveles-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.visor-niveles-table th {
    background: rgba(5,19,31,.95);
    color: var(--muted);
    cursor: pointer;
    font-family: var(--font-main);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    user-select: none;
    transition: color .12s;
}

.visor-niveles-table th:hover { color: var(--ink); }
.visor-niveles-table th.vn-sorted { color: var(--accent); }

.vn-sort-icon {
    display: inline-block;
    font-size: .75em;
    margin-left: .2rem;
    opacity: .6;
    vertical-align: middle;
}

.visor-niveles-table th.vn-sorted .vn-sort-icon { opacity: 1; }

.vn-col-fecha { min-width: 130px; }
.vn-col-nivel { min-width: 100px; font-variant-numeric: tabular-nums; text-align: right; }
.vn-col-tipo  { min-width: 100px; }

.visor-niveles-table tbody tr:nth-child(even) td { background: rgba(10,30,46,.35); }
.visor-niveles-table tbody tr:hover td { background: rgba(44,180,240,.07); }
.visor-niveles-table tbody tr:last-child td { border-bottom: none; }

.visor-niveles-table td.vn-col-nivel {
    color: var(--ink);
    text-align: right;
}

.vn-tipo-badge {
    background: rgba(44,180,240,.1);
    border: 1px solid rgba(44,180,240,.22);
    border-radius: 999px;
    color: var(--accent);
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: .18rem .55rem;
}

.visor-niveles-footer {
    color: var(--muted);
    font-size: .78rem;
    margin: .5rem 0 0;
    padding-left: .25rem;
}

/* ── 20. PANEL FQ ─────────────────────────────────────────────────────────── */
.visor-fq-panel {
    background: var(--bg-mid);
    border-top: 1px solid var(--line);
    grid-column: 1 / -1;
    grid-row: 3;
    padding: 1.5rem clamp(1rem,2vw,2rem);
}

.visor-fq-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.visor-fq-header h2 { font-family: var(--font-main); font-size: 1.4rem; letter-spacing: -.04em; margin: .25rem 0 0; }

.visor-fq-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; }
.visor-fq-note   { color: var(--muted); font-size: .8rem; }
.visor-btn-csv   { font-size: .82rem; padding: .55rem 1rem; }

.visor-fq-skeleton { display: flex; flex-direction: column; gap: .5rem; }

.visor-fq-skeleton div {
    animation: visor-pulse 1.2s ease-in-out infinite;
    background: linear-gradient(90deg, rgba(44,180,240,.1), rgba(44,180,240,.05) 40%, rgba(44,180,240,.1));
    background-size: 200% 100%;
    border-radius: 8px;
    height: 36px;
}

.visor-fq-skeleton div:first-child { width: 100%; animation-delay:   0ms; }
.visor-fq-skeleton div:nth-child(2) { width: 100%; animation-delay:  80ms; opacity: .8; }
.visor-fq-skeleton div:nth-child(3) { width: 100%; animation-delay: 160ms; opacity: .65; }
.visor-fq-skeleton div:nth-child(4) { width: 80%;  animation-delay: 240ms; opacity: .5; }
.visor-fq-skeleton div:nth-child(5) { width: 60%;  animation-delay: 320ms; opacity: .35; }

.visor-fq-table-wrap { margin-top: .5rem; }

.visor-fq-scroll {
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow-x: auto;
}

.visor-fq-table {
    border-collapse: collapse;
    font-size: .85rem;
    min-width: 100%;
    width: max-content;
}

.visor-fq-table th,
.visor-fq-table td {
    border-bottom: 1px solid var(--line);
    padding: .65rem .9rem;
    text-align: right;
    white-space: nowrap;
}

.visor-fq-table th {
    background: rgba(13,53,85,.7);
    color: var(--muted);
    font-family: var(--font-main);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    position: sticky;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    z-index: 2;
}

.visor-fq-table th small {
    color: var(--accent);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}


.visor-fq-table tbody tr:nth-child(even) td { background: rgba(10,30,46,.4); }
.visor-fq-table tbody tr:nth-child(even) td.vfq-col-fecha { background: rgba(10,30,46,.55); }
.visor-fq-table tbody tr:hover td { background: rgba(44,180,240,.06); }

.visor-fq-table .vfq-val   { color: var(--ink); font-variant-numeric: tabular-nums; }
.visor-fq-table .vfq-empty { color: var(--muted-2); }

.visor-fq-table tbody tr:last-child td { border-bottom: none; }

.visor-fq-footer { color: var(--muted); font-size: .78rem; margin: .6rem 0 0; padding-left: .25rem; }

/* ── Encabezado agrupado de la tabla FQ ─────────────────────────────────── */
/* Fila 1 (supergrupos): "Iones" y celdas vacías */
.visor-fq-table thead tr:nth-child(1) th {
    background: rgba(5,19,31,.98);
    border-bottom: none;
    padding-bottom: .3rem;
    padding-top: .55rem;
    position: sticky;
    top: 0;
    z-index: 4;
}

/* Fila 2 (grupos) */
.visor-fq-table thead tr:nth-child(2) th {
    background: rgba(8,26,42,.97);
    border-bottom: 1px solid var(--line);
    border-top: none;
    padding-bottom: .45rem;
    padding-top: .35rem;
    position: sticky;
    top: 30px; /* altura aprox de fila 1 */
    z-index: 3;
}

/* Fila 3 (columnas individuales) */
.visor-fq-table thead tr:nth-child(3) th {
    background: rgba(13,53,85,.72);
    border-bottom: 2px solid rgba(44,180,240,.25);
    padding-bottom: .5rem;
    padding-top: .4rem;
    position: sticky;
    top: 60px; /* fila1 + fila2 */
    z-index: 2;
}

/* Celda vacía de supergrupo (relleno de alineación) */
.vfq-sg-empty {
    background: rgba(5,19,31,.98) !important;
    border-bottom: none !important;
}

/* Supergrupo "Iones" */
.vfq-supergrupo {
    border-bottom: 2px solid rgba(44,180,240,.4) !important;
    color: var(--accent) !important;
    font-family: var(--font-main);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
}

/* Grupos (fila 2) */
.vfq-grupo {
    border-left: 1px solid rgba(44,180,240,.15);
    color: rgba(180,210,230,.7);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
}

.vfq-grupo:first-child { border-left: none; }

/* Columna Fecha: sticky horizontal + rowspan 3 */
.visor-fq-table .vfq-th-fecha {
    background: rgba(5,19,31,.98) !important;
    border-right: 1px solid var(--line);
    font-family: var(--font-main);
    font-size: .75rem;
    left: 0;
    min-width: 130px;
    position: sticky;
    text-align: left;
    z-index: 10 !important;
}

/* Separadores verticales entre grupos en fila 3 */
.visor-fq-table thead tr:nth-child(3) th:first-of-type { border-left: none; }

.visor-fq-table .vfq-col-fecha {
    background: rgba(13,53,85,.7);
    border-right: 1px solid var(--line);
    font-weight: 700;
    left: 0;
    min-width: 130px;
    position: sticky;
    text-align: left;
    z-index: 1;
}

.visor-fq-table th.vfq-col-fecha { z-index: 10; }

.vfq-col-sar {
    border-left: 1px dashed var(--line);
    min-width: 90px;
    text-align: center !important;
    white-space: nowrap;
}


#vfq-sar-summary { margin-bottom: 1.5rem; }

.sar-card {
    background: linear-gradient(135deg, #05131f 0%, #0a1e2e 100%);
    border: 1px solid rgba(44,180,240,.2);
    border-radius: 18px;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 1.5rem 2rem;
}

.sar-card-left { display: flex; flex-direction: column; gap: .4rem; grid-column: 1; grid-row: 1; }

.sar-label {
    color: var(--muted);
    font-family: var(--font-main);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    margin: 0;
    text-transform: uppercase;
}

.sar-value {
    color: var(--ink);
    font-family: var(--font-main);
    font-size: 3rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1;
    margin: 0;
}

.sar-badge {
    border-radius: 999px;
    display: inline-block;
    font-family: var(--font-main);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .3rem .85rem;
    width: fit-content;
}

.sar-chip {
    border-radius: 999px;
    display: inline-block;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    padding: .2rem .65rem;
}

.sar-bajo     { background: rgba(45,200,120,.15); color: #2dc878; border: 1px solid rgba(45,200,120,.3); }
.sar-medio    { background: rgba(240,185,50,.15);  color: #f0b932; border: 1px solid rgba(240,185,50,.3); }
.sar-alto     { background: rgba(230,126,34,.15);  color: #e67e22; border: 1px solid rgba(230,126,34,.3); }
.sar-muy-alto { background: rgba(231,76,60,.15);   color: #e74c3c; border: 1px solid rgba(231,76,60,.3); }

/* ── Balance iónico ─────────────────────────────────────────────────────── */
.bal-chip {
    border-radius: 999px;
    display: inline-block;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    padding: .2rem .65rem;
}

.bal-optimo   { background: rgba(45,200,120,.15); color: #2dc878; border: 1px solid rgba(45,200,120,.3); }
.bal-aceptable{ background: rgba(240,185,50,.15);  color: #f0b932; border: 1px solid rgba(240,185,50,.3); }
.bal-marginal { background: rgba(230,126,34,.15);  color: #e67e22; border: 1px solid rgba(230,126,34,.3); }
.bal-alto     { background: rgba(231,76,60,.15);   color: #e74c3c; border: 1px solid rgba(231,76,60,.3); }

.vfq-col-balance {
    border-left: 1px dashed var(--line);
    min-width: 90px;
    text-align: center !important;
    white-space: nowrap;
}



.sar-card-stats {
    align-items: flex-start;
    display: flex;
    gap: 1.5rem;
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    padding-top: .25rem;
}

.sar-stat { display: flex; flex-direction: column; gap: .15rem; text-align: right; }
.sar-stat span   { color: var(--muted); font-family: var(--font-main); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }
.sar-stat strong { color: var(--ink); font-family: var(--font-main); font-size: 1.2rem; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.03em; }

.sar-card-scale { grid-column: 1 / -1; grid-row: 2; }

.sar-scale-bar {
    background: linear-gradient(to right, #2dc878 0%, #f0b932 33.3%, #e67e22 60%, #e74c3c 100%);
    border-radius: 999px;
    height: 8px;
    margin-bottom: .5rem;
    position: relative;
    width: 100%;
}

.sar-scale-fill { background: transparent; height: 100%; left: 0; position: absolute; top: 0; }

.sar-scale-thumb {
    background: #fff;
    border: 2px solid #05131f;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255,255,255,.3);
    height: 16px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: left .4s ease;
    width: 16px;
}

.sar-scale-labels {
    color: var(--muted);
    display: flex;
    font-family: var(--font-main);
    font-size: .68rem;
    font-weight: 600;
    justify-content: space-between;
    letter-spacing: .02em;
}

/* .vfq-col-sar definido en la sección de encabezado agrupado FQ */

/* ── 21b. CAMBIAR CONTRASEÑA ─────────────────────────────────────────────── */
.cp-wrap {
    display: flex;
    justify-content: center;
    padding: clamp(1rem,3vw,2.5rem);
}

.cp-panel {
    max-width: 540px;
    padding: 2.5rem;
    width: 100%;
}

.cp-header {
    align-items: flex-start;
    display: flex;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.cp-icon {
    background: rgba(44,180,240,.12);
    border-radius: 14px;
    flex-shrink: 0;
    font-size: 1.6rem;
    line-height: 1;
    padding: .75rem;
}

.cp-title {
    font-family: var(--font-main);
    font-size: 1.55rem;
    letter-spacing: -.04em;
    margin: .15rem 0 .4rem;
}

.cp-subtitle {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.5;
    margin: 0;
}

.cp-flash {
    border-radius: 12px;
    margin-bottom: 1.5rem;
    padding: .85rem 1rem;
}

.cp-error-list {
    margin: 0;
    padding-left: 1.25rem;
}

.cp-error-list li { margin: .2rem 0; }

.cp-form { display: grid; gap: 1.25rem; }

.cp-field { display: grid; gap: .4rem; }

.cp-label {
    color: var(--muted);
    font-family: var(--font-main);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.cp-input-wrap { position: relative; }

.cp-input {
    background: rgba(13,53,85,.7);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    font: inherit;
    font-size: .95rem;
    outline: none;
    padding: .75rem 2.8rem .75rem .95rem;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}

.cp-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.cp-eye {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: .9rem;
    line-height: 1;
    padding: .5rem;
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    transition: color .12s;
}

.cp-eye:hover { color: var(--accent); }

.cp-divider {
    border: none;
    border-top: 1px solid var(--line-soft);
    margin: .25rem 0;
}

.cp-strength {
    align-items: center;
    display: flex;
    gap: .65rem;
    margin-top: .35rem;
}

.cp-strength-track {
    background: rgba(255,255,255,.06);
    border-radius: 999px;
    flex: 1;
    height: 4px;
    overflow: hidden;
}

.cp-strength-fill {
    border-radius: 999px;
    height: 100%;
    transition: width .3s ease, background .3s;
    width: 0;
}

.cp-strength-label {
    font-family: var(--font-main);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    min-width: 70px;
    text-align: right;
    text-transform: uppercase;
}

.cp-match {
    font-family: var(--font-main);
    font-size: .78rem;
    font-weight: 600;
    margin: .15rem 0 0;
}

.cp-match--ok  { color: var(--success); }
.cp-match--err { color: var(--danger); }

.cp-actions {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    margin-top: .5rem;
}

.cp-btn-cancel  { background: rgba(255,255,255,.06); border-color: var(--line); color: var(--muted); }
.cp-btn-cancel:hover { background: rgba(255,255,255,.1); color: var(--ink); }
.cp-btn-submit  { }

/* ── 22. ANIMACIONES ─────────────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 23. RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .public-nav a:not(.btn):not(.button),
    .topbar-user-wrap { display: none; }

    .hero,
    .split-section,
    .workspace-grid,
    .auth-panel { grid-template-columns: 1fr; }

    .auth-panel { min-height: 0; }

    .hero-metrics,
    .feature-grid { grid-template-columns: 1fr; }

    .app-frame { grid-template-columns: 1fr; }

    .sidebar {
        bottom: 0;
        left: 0;
        max-width: 300px;
        position: fixed;
        top: 0;
        transform: translateX(-105%);
        transition: transform .2s ease;
        width: 86vw;
        z-index: 20;
    }

    .app-frame.sidebar-open .sidebar { transform: translateX(0); }

    .app-frame.sidebar-open .sidebar-backdrop {
        background: rgba(0,0,0,.55);
        display: block;
        inset: 0;
        position: fixed;
        z-index: 15;
    }

    .sidebar-close, .menu-button { display: inline-flex; }

    .security-band,
    .public-footer { align-items: flex-start; flex-direction: column; gap: 1rem; }

    .ue-grid { grid-template-columns: 1fr; }
    .ue-panel-estado { grid-column: 1; }
}

@media (max-width: 1100px) {
    .visor-shell { grid-template-columns: 1fr 280px; }
}

@media (max-width: 780px) {
    .visor-shell {
        grid-template-columns: 1fr;
        grid-template-rows: 55vh auto auto auto auto;
    }

    .visor-map-wrap  { grid-column: 1; grid-row: 1; }
    .visor-side      { border-left: none; border-top: 1px solid var(--line); grid-column: 1; grid-row: 2; grid-template-rows: auto 180px; height: auto; }
    .visor-raster-panel { height: 180px; }
    .visor-chart-panel { grid-column: 1; grid-row: 3; }
    .visor-fq-panel  { grid-column: 1; grid-row: 4; }

    #visor-map { height: 55vh; min-height: 300px; }

    .visor-chart-header,
    .visor-fq-header { flex-direction: column; gap: .75rem; }

    .sar-card { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 1.25rem; }
    .sar-card-left  { grid-column: 1; grid-row: 1; }
    .sar-card-stats { grid-column: 1; grid-row: 2; justify-content: flex-start; }
    .sar-card-scale { grid-column: 1; grid-row: 3; }
}

@media (max-width: 640px) {
    .hero { padding-top: 1rem; }
    .map-preview, .visor-map-placeholder { min-height: 300px; }

    .stats-strip { flex-wrap: wrap; }
    .stat-item   { border-bottom: 1px solid var(--line); border-right: none; min-width: 45%; }

    .landing-header,
    .landing-footer { padding-left: 1.25rem; padding-right: 1.25rem; }
    .landing-nav a:not(.btn) { display: none; }

    .logos-row { gap: 2rem; }
}

/* ── 24. FOOTER LOGOS (visor) ────────────────────────────────────────────── */
.visor-footer-logos {
    align-items: center;
    background: rgba(5, 13, 22, 0.6);
    border-top: 1px solid rgba(44, 180, 240, 0.1);
    display: flex;
    grid-column: 1 / -1;
    justify-content: center;
    padding: .85rem clamp(1rem, 2vw, 2rem);
}

.visor-footer-logos-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    justify-content: center;
    max-width: 1200px;
    width: 100%;
}

.visor-footer-logos-label {
    color: rgba(140, 170, 190, 0.55);
    flex-shrink: 0;
    font-family: var(--font-main);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.visor-footer-logos-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    justify-content: center;
}

.visor-footer-logo-link {
    align-items: center;
    display: flex;
    opacity: .72;
    transition: opacity .2s ease, transform .2s ease;
}

.visor-footer-logo-link:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.visor-footer-logo-img {
    display: block;
    height: 22px;
    max-width: 90px;
    object-fit: contain;
    width: auto;
    /* integra logos con fondo blanco en el diseño oscuro */
    filter: brightness(0.9) contrast(1.05);
    border-radius: 3px;
}

@media (max-width: 780px) {
    .visor-footer-logos { padding: .6rem 1rem; }
    .visor-footer-logos-inner { gap: .5rem 1.25rem; }
    .visor-footer-logo-img { height: 18px; }
}