/* ═══════════════════════════════════════════════════════════
       ESCALADO RESPONSIVE — referencia 1440px
       ═══════════════════════════════════════════════════════════ */
    html { font-size: clamp(16px, 0.7vw + 6px, 24px); }

    /* ═══════════════════════════════════════════════════════════
       TEMA — inversión mecánica total. Único color fijo: el rojo.
       ═══════════════════════════════════════════════════════════ */
    :root {
        --red: #dc3545;
        --green: #2D5016;
        --green-light: #5a9c2f;
        --blue: #0096c7;
        --bg: #ffffff;
        --fg: #0a0a0a;
        --border: rgba(10,10,10,0.14);
        --border-strong: rgba(10,10,10,0.32);
        --muted: rgba(10,10,10,0.55);
    }
    [data-theme="dark"] {
        --bg: #0a0a0a;
        --fg: #ffffff;
        --border: rgba(255,255,255,0.14);
        --border-strong: rgba(255,255,255,0.32);
        --muted: rgba(255,255,255,0.55);
    }

    * , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body { height: 100%; overflow: hidden; }
    body {
        font-family: 'Oxanium', sans-serif;
        background: var(--bg);
        color: var(--fg);
        height: 100vh;
        display: flex;
        flex-direction: column;
        transition: background 0.25s ease, color 0.25s ease;
        overflow: hidden;
    }
    .mono { font-family: 'JetBrains Mono', monospace; }

    /* ── util: subrayado dinámico rojo, el único efecto hover del sitio ── */
    .hu { position: relative; text-decoration: none; color: inherit; }
    .hu::after {
        content: '';
        position: absolute;
        left: 0.1rem; right: 0.1rem; bottom: -0.2rem;
        height: 2px; width: 0;
        background: var(--red);
        transition: width 0.22s ease;
    }
    .hu:hover::after, .hu:focus-visible::after { width: calc(100% - 0.2rem); }
    button.hu { background: none; border: none; font: inherit; color: inherit; cursor: pointer; }

    /* ═══════════════════════════════════════════════════════════
       NAV
       ═══════════════════════════════════════════════════════════ */
    .topbar {
        display: flex; align-items: center; justify-content: space-between;
        gap: 0.75rem; padding: 0.6rem 1.25rem;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
        flex-wrap: wrap; row-gap: 0.4rem;
    }
    .brand { display: flex; align-items: center; gap: 0.65rem; }
    .brand img.logo { height: 2.4rem; width: 2.4rem; flex-shrink: 0; }
    .wordmark-block { display: flex; flex-direction: column; line-height: 1; }
    .wordmark { font-family: 'Oxanium', sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; display: inline-flex; }
    .w-orts { color: var(--fg); }
    .w-lab { color: var(--red); }
    .subtitle {
        font-family: 'JetBrains Mono', monospace; font-size: 0.48rem; letter-spacing: 0.05em;
        text-transform: uppercase; color: var(--muted); margin-top: 0.2rem; line-height: 1.35;
    }
    .subtitle-line { display: block; white-space: nowrap; }
    .subtitle .sub-red { color: var(--red); }
    .nav-links { display: flex; align-items: center; gap: 0.1rem; }
    .nav-item {
        padding: 0.5rem 0.6rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em;
        text-transform: uppercase; border-radius: 0.4rem; white-space: nowrap;
    }
    .nav-item.active { background: var(--fg); color: var(--bg); }
    .nav-item.active::after { display: none; }
    .nav-right { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; }
    .theme-toggle {
        width: 2.6rem; height: 1.35rem; border-radius: 999px; border: 1.5px solid var(--border-strong);
        background: transparent; position: relative; cursor: pointer; flex-shrink: 0;
    }
    .theme-toggle::after {
        content: ''; position: absolute; top: 0.1rem; left: 0.1rem;
        width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--fg);
        transition: transform 0.25s ease;
    }
    [data-theme="dark"] .theme-toggle::after { transform: translateX(1.2rem); }
    button.btn-mi-ortslab {
        padding: 0.5rem 1.1rem; background: var(--red); color: #ffffff; font-size: 0.75rem;
        font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; white-space: nowrap;
    }
    .btn-mi-ortslab::after { background: #ffffff; }
    button.btn-mi-ortslab.nivel-activo { outline: 2px solid var(--fg); outline-offset: 2px; }

    /* ── indicador de sesión activa — sustituye al botón cuando hay sesión guardada ── */
    .sesion-activa {
        display: flex; align-items: center; gap: 0.4rem;
        font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--fg);
        padding: 0.4rem 0.7rem; border: 1px solid var(--border-strong); border-radius: 999px;
        white-space: nowrap; cursor: pointer; min-width: 0;
    }
    #sesionEmail { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sesion-hazte-miembro {
        font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em;
        color: var(--red); white-space: nowrap; padding: 0.35rem 0.7rem; border: 1px solid var(--red);
        border-radius: 999px; cursor: pointer; background: none;
    }
    .sesion-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--green-light); flex-shrink: 0; }
    .badge-miembro {
        font-family: 'JetBrains Mono', monospace; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.08em;
        background: var(--red); color: #fff; padding: 0.15rem 0.4rem; border-radius: 0.25rem; margin-left: 0.15rem;
    }
    .modal-beneficios { text-align: left; font-size: 0.7rem; color: var(--fg); line-height: 1.9; padding-left: 1.1rem; margin-bottom: 1rem; }

    /* ── modal de acceso — flujo magic link ── */
    .modal-overlay {
        display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55);
        align-items: center; justify-content: center; z-index: 100;
    }
    .modal-overlay.activo { display: flex; }
    .modal-box {
        background: var(--bg); border: 1px solid var(--border-strong); border-radius: 0.9rem;
        padding: 1.8rem 1.6rem; width: 22rem; max-width: 90vw; text-align: center; position: relative;
    }
    .modal-cerrar {
        position: absolute; top: 0.7rem; right: 0.8rem; background: none; border: none;
        color: var(--muted); font-size: 0.9rem; cursor: pointer;
    }
    .modal-icono { font-size: 1.8rem; margin-bottom: 0.6rem; }
    .modal-titulo { font-weight: 800; font-size: 1rem; margin-bottom: 0.4rem; }
    .modal-sub { font-size: 0.72rem; color: var(--muted); line-height: 1.5; margin-bottom: 1.1rem; }
    .modal-input {
        width: 100%; padding: 0.65rem 0.8rem; border: 1.5px solid var(--border-strong); border-radius: 0.5rem;
        background: transparent; color: var(--fg); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;
        outline: none; margin-bottom: 0.8rem;
    }
    .modal-input:focus { border-color: var(--red); }
    .modal-btn {
        width: 100%; padding: 0.65rem; background: var(--red); color: #fff; border: none; border-radius: 0.5rem;
        font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
    }
    .modal-btn-secundario { background: transparent; color: var(--fg); border: 1px solid var(--border-strong); margin-top: 0.7rem; }
    .modal-simulacion { border-top: 1px dashed var(--border-strong); padding-top: 0.9rem; margin-top: 0.3rem; }
    .modal-simulacion .mono { font-size: 0.55rem; color: var(--muted); letter-spacing: 0.04em; }

    /* ═══════════════════════════════════════════════════════════
       CONTENEDOR CENTRAL — 3 estados intercambiables
       ═══════════════════════════════════════════════════════════ */
    .lab-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .estado { flex: 1; min-height: 0; display: none; }
    .estado.activo { display: flex; flex-direction: column; }

    /* ── Estado 1: reposo — 3 columnas ── */
    #estado-reposo.activo { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 1.25rem; padding: 1.25rem 1.5rem; }
    .zone {
        border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.1rem;
        display: flex; flex-direction: column; gap: 0.7rem; min-height: 0; overflow: hidden;
    }
    .zone-title {
        font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em;
        text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: 0.5rem;
    }
    .seo-text { overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; flex: 1; padding-right: 0.3rem; scrollbar-color: var(--red) transparent; scrollbar-width: thin; }
    .seo-text::-webkit-scrollbar { width: 6px; }
    .seo-text::-webkit-scrollbar-track { background: transparent; }
    .seo-text::-webkit-scrollbar-thumb { background: var(--red); border-radius: 99px; }
    .seo-text h2 { font-size: 0.85rem; font-weight: 800; line-height: 1.25; color: var(--fg); }
    .seo-text h3 { font-size: 0.68rem; font-weight: 700; color: var(--fg); margin-top: 0.15rem; }
    .seo-text p { font-size: 0.6rem; line-height: 1.4; color: var(--muted); }
    .seo-text ul { font-size: 0.6rem; line-height: 1.35; color: var(--muted); padding-left: 1rem; }
    .seo-text ul li { margin-bottom: 0.1rem; }
    .seo-text strong { color: var(--fg); }
    .seo-text a { color: var(--red); }

    .perfil-row { display: flex; gap: 0.5rem; }
    .perfil-card { flex: 1; display: flex; gap: 0.4rem; align-items: flex-start; padding: 0.5rem 0.55rem; border: 1px solid var(--border); border-radius: 0.5rem; min-width: 0; }
    .perfil-card .p-icon { font-size: 0.85rem; flex-shrink: 0; }
    .perfil-card .p-label { font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); margin-bottom: 0.15rem; }
    .perfil-card .p-desc { font-size: 0.6rem; color: var(--muted); line-height: 1.3; }

    .zone-center { justify-content: flex-start; border-color: rgba(220,53,69,0.4); }
    @keyframes focoRespira {
        0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,0); border-color: rgba(220,53,69,0.3); }
        50%      { box-shadow: 0 0 18px 2px rgba(220,53,69,0.35); border-color: var(--red); }
    }
    .buzon-textarea {
        flex: 0 0 50%; min-height: 0; width: 100%; background: transparent;
        border: 1.5px dashed rgba(220,53,69,0.55); border-radius: 0.6rem; padding: 0.9rem;
        font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--fg);
        resize: none; outline: none; transition: border-color 0.2s ease;
        animation: focoRespira 3.6s ease-in-out infinite;
    }
    .buzon-textarea:focus { border-color: var(--red); border-style: solid; animation: none; }
    .buzon-textarea.arrastrando { border-color: var(--red); border-style: solid; background: rgba(220,53,69,0.05); }
    .buzon-textarea::placeholder { color: var(--muted); }
    .buzon-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1rem; }
    .char-counter, .sms-hint { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: var(--muted); }
    .buzon-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
    .drop-hint { font-size: 0.68rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
    .btn-analizar {
        padding: 0.55rem 1.4rem; background: var(--fg); color: var(--bg); font-size: 0.72rem;
        font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 0.5rem;
        border: none; cursor: not-allowed; opacity: 0.55; transition: opacity 0.15s ease;
    }
    .btn-analizar:not(:disabled) { cursor: pointer; opacity: 1; }

    .senales-wrap { overflow-y: auto; min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 0.65rem; padding-right: 0.3rem; scrollbar-color: var(--red) transparent; scrollbar-width: thin; }
    .senales-wrap::-webkit-scrollbar { width: 6px; }
    .senales-wrap::-webkit-scrollbar-track { background: transparent; }
    .senales-wrap::-webkit-scrollbar-thumb { background: var(--red); border-radius: 99px; }
    .senal-cat-title { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: 0.25rem; }
    .senal-chip { display: flex; align-items: center; gap: 0.4rem; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--muted); padding: 0.22rem 0; }
    .senal-dot { width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--red); flex-shrink: 0; }
    .gratis-note { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--muted); letter-spacing: 0.08em; padding-top: 0.6rem; border-top: 1px solid var(--border); flex-shrink: 0; }

    /* ── Estado 2: analizando — transición genérica, sin detalles técnicos ── */
    #estado-analizando.activo { display: flex; align-items: center; justify-content: center; }
    .analizando-box { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
    .analizando-dot {
        width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--red);
        animation: analizandoPulso 1.1s ease-in-out infinite;
    }
    @keyframes analizandoPulso {
        0%, 100% { opacity: 0.25; transform: scale(0.85); }
        50% { opacity: 1; transform: scale(1); }
    }
    .analizando-texto { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: var(--muted); letter-spacing: 0.04em; }

    /* ── Estado 3: expediente — riel vertical ── */
    #estado-expediente.activo { display: grid; grid-template-columns: 12rem 1fr; }
    .riel { background: #000; border-right: 1px solid rgba(255,255,255,0.08); padding: 1rem 0; overflow-y: auto; }
    .riel-item {
        display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.2rem;
        font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.45);
        cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s;
    }
    .riel-item .num { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: rgba(255,255,255,0.25); width: 0.9rem; }
    .riel-item.activo { background: rgba(220,53,69,0.08); border-left-color: var(--red); color: #fff; }
    .riel-item.activo .num { color: var(--red); }
    .riel-item:not(.activo):hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.7); }
    .riel-candado { margin-left: auto; font-size: 0.68rem; }
    .expediente-col { display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
    .expediente-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 1.5rem 1.25rem; scrollbar-color: var(--red) transparent; scrollbar-width: thin; }
    .expediente-scroll::-webkit-scrollbar { width: 6px; }
    .expediente-scroll::-webkit-scrollbar-thumb { background: var(--red); border-radius: 99px; }

    .datos-basicos { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; padding: 0.7rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .dato-item { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--muted); }
    .dato-item strong { color: var(--fg); }
    .btn-nuevo-caso {
        margin-left: auto; padding: 0.35rem 0.8rem; font-size: 0.6rem; font-weight: 700;
        letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--border-strong);
        border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; white-space: nowrap;
    }

    .veredicto-fijo { padding: 1.1rem 1.5rem 0; }
    .veredicto {
        border-radius: 0.7rem; padding: 1.1rem 1.3rem 1rem; text-align: center; color: #fff;
    }
    .veredicto.familia-alerta { background: linear-gradient(135deg, #7f1d1d, #dc2626); }
    .veredicto.familia-verificado { background: linear-gradient(120deg, var(--green-light), var(--green)); }
    .veredicto.familia-informativa { background: linear-gradient(135deg, #023e5c, var(--blue)); }
    .veredicto-meta { display: flex; align-items: center; justify-content: center; gap: 0.45rem; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; opacity: 0.8; margin-bottom: 0.5rem; }
    .veredicto-icon { font-size: 1.8rem; margin-bottom: 0.25rem; }
    .veredicto-titulo { font-family: 'JetBrains Mono', monospace; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.35rem; }
    .veredicto-sub { font-size: 0.72rem; opacity: 0.9; max-width: 34rem; margin: 0 auto; }

    .panel-tab { display: none; padding-top: 1rem; }
    .panel-tab.activo { display: block; }

    .adn-row { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; margin-bottom: 1rem; }
    .adn-card { display: flex; flex-direction: column; align-items: center; padding: 0.8rem 0.4rem; gap: 0.35rem; border-right: 1px solid var(--border); }
    .adn-card:last-child { border-right: none; }
    .adn-donut { position: relative; width: 3rem; height: 3rem; }
    .adn-donut svg { transform: rotate(-90deg); }
    .adn-donut-bg { fill: none; stroke: var(--border); stroke-width: 5; }
    .adn-donut-fill { fill: none; stroke-width: 5; stroke-linecap: round; }
    .adn-donut-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 700; }
    .adn-name { font-family: 'JetBrains Mono', monospace; font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
    .adn-val { font-size: 0.62rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; }

    .evidencias-titulo { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
    .evidencia { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.6rem 0.7rem; border-radius: 0.5rem; font-size: 0.72rem; line-height: 1.45; margin-bottom: 0.4rem; background: rgba(220,53,69,0.06); border: 1px solid rgba(220,53,69,0.18); color: var(--fg); }

    .eje-bloque { border: 1px solid var(--border); border-radius: 0.6rem; margin-bottom: 0.7rem; overflow: hidden; }
    .eje-bloque.gated { border-style: dashed; border-color: var(--border-strong); }
    .eje-cabecera { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.9rem; }
    .eje-cabecera-izq { display: flex; align-items: center; gap: 0.6rem; }
    .eje-donut-mini { width: 1.8rem; height: 1.8rem; position: relative; flex-shrink: 0; }
    .eje-donut-mini svg { transform: rotate(-90deg); }
    .eje-nombre { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
    .eje-puntos { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 700; }
    .eje-detalle { padding: 0.2rem 0.9rem 0.7rem; font-size: 0.68rem; color: var(--muted); line-height: 1.5; }
    .badge-pro { font-family: 'JetBrains Mono', monospace; font-size: 0.48rem; font-weight: 700; letter-spacing: 0.06em; background: var(--red); color: #fff; padding: 0.1rem 0.4rem; border-radius: 0.25rem; margin-left: 0.4rem; }

    .teaser { border: 1px dashed var(--border-strong); border-radius: 0.6rem; padding: 1rem 1.1rem; text-align: center; margin-top: 0.4rem; }
    .teaser-icono { font-size: 1.15rem; margin-bottom: 0.4rem; }
    .teaser-titulo { font-weight: 700; font-size: 0.75rem; margin-bottom: 0.25rem; }
    .teaser-sub { font-size: 0.66rem; color: var(--muted); margin-bottom: 0.7rem; }
    .teaser-btn {
        display: inline-block; background: var(--red); color: #fff; font-size: 0.65rem; font-weight: 700;
        letter-spacing: 0.04em; text-transform: uppercase; padding: 0.5rem 1.1rem; border-radius: 0.5rem; cursor: pointer; border: none;
    }
    .datos-placeholder { display: flex; align-items: center; justify-content: center; height: 12rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; border: 1px dashed var(--border); border-radius: 0.6rem; text-align: center; padding: 1rem; }

    .ficha-seccion { margin-bottom: 1.1rem; }
    .ficha-campo { display: flex; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border); font-size: 0.7rem; }
    .ficha-campo:last-child { border-bottom: none; }
    .ficha-label { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); min-width: 6.5rem; flex-shrink: 0; }
    .ficha-valor { color: var(--fg); word-break: break-word; }
    .ficha-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
    .ficha-chip { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; padding: 0.2rem 0.5rem; border: 1px solid var(--border-strong); border-radius: 0.3rem; color: var(--fg); }
    .ficha-vacio { color: var(--muted); font-size: 0.68rem; font-style: italic; }

    /* ═══════════════════════════════════════════════════════════
       FOOTER
       ═══════════════════════════════════════════════════════════ */
    footer { border-top: 1px solid var(--border); padding: 0.75rem 1.5rem; flex-shrink: 0; }
    .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; margin-bottom: 0.5rem; }
    .footer-col p { font-size: 0.6rem; line-height: 1.5; color: var(--muted); margin-bottom: 0.2rem; }
    .footer-col .f-title { font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: 0.25rem; display: block; }
    .footer-bottom { display: flex; align-items: center; justify-content: center; gap: 0.9rem; padding-top: 0.5rem; border-top: 1px solid var(--border); flex-wrap: wrap; }
    .footer-bottom a { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.06em; padding: 0.25rem 0.7rem; border: 1px solid var(--border-strong); border-radius: 999px; }
    .footer-copy { font-family: 'JetBrains Mono', monospace; font-size: 0.52rem; color: var(--muted); letter-spacing: 0.06em; text-align: center; margin-top: 0.4rem; }

    .aviso-seguridad {
        display: flex; align-items: center; gap: 0.5rem;
        background: rgba(220,53,69,0.08); border: 1px solid rgba(220,53,69,0.3);
        border-radius: 0.5rem; padding: 0.65rem 0.9rem; margin-bottom: 1rem;
        font-size: 0.72rem; color: var(--fg); line-height: 1.4;
    }
    .cta-movil { display: none; }

    /* ── Escalón intermedio (nav apretado) — entre desktop ancho y el breakpoint
         móvil de 900px. A 1400-1440px el nav con Historial/Mis Casos añadidos
         no siempre cabe en una línea; aquí se reduce texto y espaciado para
         que quepa sin necesitar el salto a dos líneas del flex-wrap. ── */
    @media (max-width: 1500px) {
        .nav-links { gap: 0; }
        .nav-item { padding: 0.45rem 0.45rem; font-size: 0.62rem; }
        .nav-right { gap: 0.35rem; }
        .subtitle { display: none; }
        button.btn-mi-ortslab { padding: 0.45rem 0.85rem; font-size: 0.68rem; }
        .sesion-activa { padding: 0.35rem 0.55rem; font-size: 0.6rem; }
        #sesionEmail { max-width: 6rem; }
        .btn-abrir-historial, .btn-abrir-casos { font-size: 0.55rem; padding: 0.3rem 0.5rem; }
        .sesion-hazte-miembro { font-size: 0.55rem; padding: 0.3rem 0.55rem; }
    }

    /* ── Escalón más agresivo — anchos tipo 1270-1350px donde ni el ajuste
         anterior basta. Se quita el texto de Historial/Mis Casos dejando solo
         el icono (siguen siendo botones normales, con su title como respaldo
         accesible), y se aprieta más el resto. ── */
    @media (max-width: 1350px) {
        .btn-abrir-historial .btn-label, .btn-abrir-casos .btn-label { display: none; }
        .btn-abrir-historial, .btn-abrir-casos { padding: 0.3rem 0.45rem; font-size: 0.75rem; }
        .nav-item { padding: 0.4rem 0.35rem; font-size: 0.58rem; }
        .nav-links { gap: 0; }
        #sesionEmail { max-width: 4.5rem; }
        .sesion-activa { padding: 0.3rem 0.45rem; }
        .brand img.logo { height: 2rem; width: 2rem; }
        .wordmark { font-size: 1.05rem; }
    }

    /* ── EXPEDIENTE MÓVIL — solo existe Diagnóstico, sin riel ── */
    @media (max-width: 900px) {
        #estado-reposo.activo { grid-template-columns: 1fr; overflow-y: auto; }
        #estado-expediente.activo { display: flex; flex-direction: column; }
        .expediente-col { flex: 1; min-height: 0; }
        .riel { display: none; }
        .nav-links { display: none; }
        .subtitle { display: none; }
        .topbar { padding: 0.5rem 0.8rem; gap: 0.4rem; }
        .brand img.logo { height: 1.9rem; width: 1.9rem; }
        .wordmark { font-size: 1rem; }
        .nav-right { gap: 0.35rem; }
        #sesionEmail { max-width: 4.2rem; }
        .sesion-hazte-miembro { font-size: 0.52rem; padding: 0.3rem 0.5rem; }
        button.btn-mi-ortslab { padding: 0.4rem 0.7rem; font-size: 0.65rem; }
        .footer-grid { grid-template-columns: 1fr; }
        .datos-basicos { padding: 0.6rem 1rem; gap: 0.3rem 0.8rem; }
        .btn-nuevo-caso { width: 100%; margin-left: 0; margin-top: 0.3rem; text-align: center; }
        .veredicto-fijo { padding: 0.9rem 1rem 0; }
        .expediente-scroll { padding: 0 1rem 1.25rem; }
        .panel-tab { display: none !important; }
        .panel-tab#panel-tab-1 { display: block !important; }
        .cta-movil.visible-alerta {
            display: block; margin-top: 0.9rem; text-align: center;
            font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--muted);
            border-top: 1px solid var(--border); padding-top: 0.7rem; line-height: 1.5;
        }
    }

    /* ═══════════════════════════════════════════════════════════
       HISTORIAL DE EXPEDIENTES — Mi ORTSLAB → Historial
       Botón independiente de .sesion-activa (hermano, no hijo) para que
       su clic no dispare también el cierre de sesión por bubbling.
       ═══════════════════════════════════════════════════════════ */
    .btn-abrir-historial {
        font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em;
        color: var(--fg); background: none; white-space: nowrap; padding: 0.35rem 0.6rem;
        border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer;
    }
    .modal-box-historial { width: 26rem; text-align: left; max-height: 80vh; overflow-y: auto; }
    .modal-box-historial .modal-titulo, .modal-box-historial .modal-sub { text-align: center; }
    .historial-lista { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
    .historial-item {
        display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.8rem;
        border: 1px solid var(--border); border-radius: 0.6rem; cursor: pointer; transition: border-color 0.15s ease;
    }
    .historial-item:hover { border-color: var(--red); }
    .historial-icono { font-size: 1.1rem; flex-shrink: 0; }
    .historial-item-info { flex: 1; min-width: 0; }
    .historial-item-titulo { font-size: 0.75rem; font-weight: 700; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .historial-item-meta { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--muted); margin-top: 0.15rem; }
    .historial-item-flecha { color: var(--red); font-weight: 700; flex-shrink: 0; }
    .historial-vacio { text-align: center; font-size: 0.72rem; color: var(--muted); padding: 1.5rem 0.5rem; line-height: 1.5; }

    @media (max-width: 900px) {
        .btn-abrir-historial, .btn-abrir-casos { font-size: 0.52rem; padding: 0.3rem 0.5rem; }
        .modal-box-historial { width: 92vw; }
    }

    /* ═══════════════════════════════════════════════════════════
       VISTA PÚBLICA — HERRAMIENTAS (escaparate de Mis Casos)
       No requiere identidad para verse — es contenido, no funcionalidad.
       Vive fuera de .lab-stage porque no es parte del flujo de escaneo.
       ═══════════════════════════════════════════════════════════ */
    .vista-herramientas {
        flex: 1; min-height: 0; overflow-y: auto; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem;
        scrollbar-color: var(--red) transparent; scrollbar-width: thin;
    }
    .vista-herramientas::-webkit-scrollbar { width: 6px; }
    .vista-herramientas::-webkit-scrollbar-track { background: transparent; }
    .vista-herramientas::-webkit-scrollbar-thumb { background: var(--red); border-radius: 99px; }
    .herramientas-intro { max-width: 68rem; }
    .herramientas-intro h2 { font-size: 1.1rem; font-weight: 800; margin: 0.4rem 0 0.4rem; line-height: 1.3; }
    .herramientas-intro p { font-size: 0.78rem; line-height: 1.55; color: var(--muted); margin-bottom: 0.4rem; }
    .herramientas-intro strong { color: var(--fg); }

    .herramientas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.9rem; }
    @media (min-width: 1100px) {
        .herramientas-grid { grid-template-columns: repeat(5, 1fr); }
    }
    .herramienta-card {
        border: 1px solid var(--border); border-radius: 0.75rem; padding: 0.95rem;
        display: flex; flex-direction: column; gap: 0.4rem;
    }
    .herramienta-card-icono { font-size: 1.4rem; }
    .herramienta-card-titulo { font-weight: 700; font-size: 0.82rem; }
    .herramienta-card-desc { font-size: 0.68rem; color: var(--muted); line-height: 1.45; flex: 1; }
    .herramienta-card-estado {
        font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; letter-spacing: 0.05em; text-transform: uppercase;
        padding: 0.25rem 0.6rem; border-radius: 999px; width: fit-content;
    }
    .herramienta-card-estado.disponible { background: rgba(45,80,22,0.15); color: var(--green-light); border: 1px solid var(--green-light); }
    .herramienta-card-estado.proximamente { background: transparent; color: var(--muted); border: 1px dashed var(--border-strong); }

    .herramientas-como-funciona { max-width: 68rem; border-top: 1px solid var(--border); padding-top: 0.9rem; }
    .herramientas-como-funciona p { font-size: 0.75rem; line-height: 1.55; color: var(--muted); }
    .herramientas-como-funciona strong { color: var(--fg); }

    /* CTA — "mostrar, no empujar": informa primero, pertenencia después,
       precio al final y discreto. Nunca aparece dentro de contexto de alerta. */
    .herramientas-cta {
        max-width: 68rem; border: 1px dashed var(--border-strong); border-radius: 0.75rem;
        padding: 0.9rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start;
    }
    .herramientas-cta-titulo { font-weight: 700; font-size: 0.82rem; }
    .herramientas-cta-desc { font-size: 0.72rem; color: var(--muted); line-height: 1.5; }
    .herramientas-cta-precio { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--muted); margin-top: 0.2rem; }

    /* ═══════════════════════════════════════════════════════════
       OBSERVATORIO — conexión real, misma estructura de vista que
       Herramientas (fuera de .lab-stage, scroll interno propio).
       ═══════════════════════════════════════════════════════════ */
    .vista-observatorio {
        flex: 1; min-height: 0; overflow-y: auto; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem;
        scrollbar-color: var(--red) transparent; scrollbar-width: thin;
    }
    .vista-observatorio::-webkit-scrollbar { width: 6px; }
    .vista-observatorio::-webkit-scrollbar-track { background: transparent; }
    .vista-observatorio::-webkit-scrollbar-thumb { background: var(--red); border-radius: 99px; }
    .obs-cargando, .obs-error, .obs-vacio {
        font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--muted);
        text-align: center; padding: 2rem 1rem;
    }
    .obs-error { color: var(--red); }
    .obs-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
    .obs-header h2 { font-size: 1rem; font-weight: 800; }
    .obs-buscador {
        padding: 0.5rem 0.8rem; border: 1.5px solid var(--border-strong); border-radius: 0.5rem;
        background: transparent; color: var(--fg); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
        outline: none; min-width: 16rem;
    }
    .obs-buscador:focus { border-color: var(--red); }
    .obs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
    @media (min-width: 1100px) {
        .obs-grid { grid-template-columns: repeat(5, 1fr); }
    }
    .obs-card {
        display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 0.75rem;
        overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.15s ease;
    }
    .obs-card:hover { border-color: var(--red); }
    .obs-card::after { display: none; } /* .hu no aplica aquí, la tarjeta entera es el hover */
    .obs-card-thumb {
        height: 7rem; background: linear-gradient(135deg, #1a0303, var(--red));
        display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0;
    }
    .obs-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .obs-card-body { padding: 0.8rem; display: flex; flex-direction: column; gap: 0.35rem; }
    .obs-card-tag {
        font-family: 'JetBrains Mono', monospace; font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--red); border: 1px solid var(--red); border-radius: 0.3rem; padding: 0.15rem 0.4rem; width: fit-content;
    }
    .obs-card-titulo { font-size: 0.78rem; font-weight: 700; line-height: 1.3; }
    .obs-card-excerpt { font-size: 0.68rem; color: var(--muted); line-height: 1.5; }
    .obs-card-meta {
        display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace;
        font-size: 0.58rem; color: var(--muted); margin-top: 0.3rem;
    }

    /* ═══════════════════════════════════════════════════════════
       ESTAFAS — conexión real, mismo contenedor que Observatorio
       (.vista-observatorio reutilizado para ambas vistas)
       ═══════════════════════════════════════════════════════════ */
    .estafas-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
    .estafas-desc { font-size: 0.72rem; color: var(--muted); max-width: 34rem; }
    .estafas-contadores { display: flex; gap: 0.6rem; flex-shrink: 0; }
    .estafas-contador { background: var(--bg3, rgba(255,255,255,0.04)); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.4rem 0.9rem; text-align: center; }
    .estafas-contador-num { font-family: 'JetBrains Mono', monospace; font-size: 1.15rem; font-weight: 700; color: var(--fg); line-height: 1; }
    .estafas-contador-label { font-family: 'JetBrains Mono', monospace; font-size: 0.5rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.15rem; }

    .estafas-filtros { display: flex; gap: 0.35rem; flex-wrap: wrap; }
    .filtro-btn {
        font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; padding: 0.25rem 0.7rem; border-radius: 999px;
        border: 1px solid var(--border-strong); background: transparent; color: var(--muted); cursor: pointer; transition: all 0.15s ease;
    }
    .filtro-btn.filtro-activo { background: var(--red); border-color: var(--red); color: #fff; }

    .estafas-tabla { border: 1px solid var(--border); border-radius: 0.6rem; overflow: hidden; }
    .estafas-header, .estafa-card {
        display: grid; grid-template-columns: 2fr 5.5rem 5.5rem 6rem 5rem 3rem; gap: 0; align-items: center;
    }
    .estafas-header {
        background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border); padding: 0.5rem 0.9rem;
        font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
    }
    .estafa-card {
        padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; font-size: 0.7rem;
    }
    .estafa-card:last-child { border-bottom: none; }
    .ef-dom { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ef-tipo { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; padding: 0.1rem 0.4rem; border-radius: 0.25rem; border: 1px solid; width: fit-content; }
    .ef-ver { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 700; }
    .ef-pais, .ef-fecha { font-size: 0.62rem; color: var(--muted); }
    .ef-n { font-family: 'JetBrains Mono', monospace; font-weight: 700; text-align: right; }
    .estafas-footer-nota { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--muted); }

    @media (max-width: 700px) {
        .estafas-header { display: none; }
        .estafa-card { display: flex; flex-wrap: wrap; gap: 0 0.5rem; align-items: baseline; }
        .ef-dom { flex: 1 1 100%; }
        .ef-tipo, .ef-ver, .ef-pais, .ef-fecha { font-size: 0.55rem; }
        .ef-n { margin-left: auto; }
    }

    /* ═══════════════════════════════════════════════════════════
       ESTADÍSTICAS — conexión real, Chart.js
       ═══════════════════════════════════════════════════════════ */
    .estad-subtitulo { font-size: 0.72rem; color: var(--muted); margin: -0.4rem 0 0.2rem; }
    .estad-tarjetas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
    .estad-tarjeta { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.7rem 0.9rem; }
    .estad-tarjeta-label { font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.2rem; }
    .estad-tarjeta-num { font-size: 1.3rem; font-weight: 700; color: var(--fg); line-height: 1; }

    .estad-fila-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.7rem; }
    .estad-fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
    .estad-panel { border: 1px solid var(--border); border-radius: 0.7rem; padding: 0.9rem; }
    .estad-panel-titulo { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.6rem; }
    .estad-panel-sub { font-weight: 400; opacity: 0.6; text-transform: none; letter-spacing: 0; }
    .estad-leyenda { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
    .estad-leyenda-item { display: flex; align-items: center; gap: 0.25rem; font-size: 0.6rem; color: var(--muted); }
    .estad-dot { width: 0.5rem; height: 0.5rem; border-radius: 0.15rem; flex-shrink: 0; display: inline-block; }
    .estad-chart-wrap { position: relative; height: 150px; }
    .estad-sin-datos { font-size: 0.65rem; color: var(--muted); font-style: italic; }

    .estad-barra-fila { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; border-bottom: 1px solid var(--border); font-size: 0.68rem; }
    .estad-barra-fila:last-child { border-bottom: none; }
    .estad-barra-iso { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: var(--muted); width: 2.2rem; flex-shrink: 0; }
    .estad-barra-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
    .estad-barra-track { width: 3.5rem; flex-shrink: 0; background: rgba(255,255,255,0.08); border-radius: 0.15rem; height: 0.3rem; }
    .estad-barra-fill { height: 100%; border-radius: 0.15rem; }
    .estad-barra-n { font-size: 0.62rem; color: var(--muted); min-width: 1.4rem; text-align: right; }

    .estad-lista-fila { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; border-bottom: 1px solid var(--border); }
    .estad-lista-fila:last-child { border-bottom: none; }
    .estad-lista-nombre { flex: 1; font-size: 0.68rem; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .estad-lista-n { font-size: 0.62rem; color: var(--muted); flex-shrink: 0; }

    .estad-separador { border-top: 1px solid var(--border); margin: 0.3rem 0; }
    .estad-tipo-fila { margin-bottom: 0.6rem; }
    .estad-tipo-cabecera { display: flex; justify-content: space-between; font-size: 0.65rem; color: var(--fg); margin-bottom: 0.2rem; }
    .estad-canal-entrada { border-top: 1px solid var(--border); margin-top: 0.6rem; padding-top: 0.6rem; }
    .estad-canal-fila { display: flex; align-items: center; gap: 0.5rem; font-size: 0.65rem; color: var(--fg); margin-bottom: 0.3rem; }
    .estad-canal-fila span:first-child { width: 3rem; flex-shrink: 0; }
    .estad-canal-fila .estad-barra-track { flex: 1; width: auto; }
    .mono { font-family: 'JetBrains Mono', monospace; }

    @media (max-width: 900px) {
        .estad-fila-3, .estad-fila-2 { grid-template-columns: 1fr; }
        .estad-tarjetas { grid-template-columns: repeat(2, 1fr); }
    }

    /* ═══════════════════════════════════════════════════════════
       MIS CASOS — expedientes de Investigación (dominio/IP/web/
       archivo/teléfono), sin veredicto/semáforo. Exclusivo Miembro.
       ═══════════════════════════════════════════════════════════ */
    .btn-abrir-casos {
        font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em;
        color: var(--fg); background: none; white-space: nowrap; padding: 0.35rem 0.6rem;
        border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer;
    }

    /* selector de tipo de objeto — modal Añadir objeto */
    .tipo-objeto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.5rem; }
    .tipo-objeto-btn {
        display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
        padding: 0.8rem 0.4rem; border: 1px solid var(--border-strong); border-radius: 0.6rem;
        background: transparent; color: var(--fg); cursor: pointer; font-size: 1.2rem; transition: border-color 0.15s ease;
    }
    .tipo-objeto-btn span { font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
    .tipo-objeto-btn:hover, .tipo-objeto-btn.seleccionado { border-color: var(--red); }
    .tipo-objeto-btn.seleccionado span { color: var(--red); }

    /* plantilla de 5 secciones fijas dentro del caso */
    .plantilla-caso { display: flex; flex-direction: column; gap: 0.8rem; }
    .plantilla-seccion {
        border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.9rem 1rem;
    }
    .plantilla-seccion-titulo {
        display: flex; align-items: center; gap: 0.5rem;
        font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 700;
        letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); margin-bottom: 0.6rem;
    }
    .plantilla-seccion-contenido { font-size: 0.75rem; color: var(--fg); line-height: 1.55; }

    /* estado "no investigado" — inequívoco: falta ejecutar, no que salió limpio */
    .plantilla-seccion.no-investigado {
        border-style: dashed; border-color: var(--border-strong);
    }
    .no-investigado-aviso {
        display: flex; align-items: center; gap: 0.5rem;
        font-size: 0.7rem; color: var(--muted); font-style: italic;
    }
    .no-investigado-dot {
        width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1.5px solid var(--muted); flex-shrink: 0;
    }