/* JuriSMA — estilos custom (clases `.j-*` + chrome de Streamlit repintado).
   Las variables CSS se redefinen en `:root[data-theme="dark"]` y los
   componentes leen `var(--j-*)`. Aplica el toggle de theme propio sin
   reinyectar CSS. */

/* =====================================================================
   TIPOGRAFIA
   ===================================================================== */
html, body, .stApp {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =====================================================================
   PALETA LIGHT (default)
   ===================================================================== */
:root {
    --j-brand:        #0a2540;
    --j-brand-soft:   #1e3a5f;
    --j-brand-hover:  #122e4f;
    --j-accent:       #b88a3a;
    --j-accent-soft:  #f5ecd9;

    --j-text:         #0b1525;
    --j-text-soft:    #475569;
    --j-text-muted:   #94a3b8;

    --j-bg:           #fafbfc;
    --j-surface:      #ffffff;
    --j-surface-2:    #f5f7fa;
    --j-surface-3:    #eef2f7;

    --j-border:       #e3e8ef;
    --j-border-soft:  #eef2f7;

    --j-success:      #047857;
    --j-success-soft: #d1fae5;
    --j-warning:      #b45309;
    --j-warning-soft: #fef3c7;
    --j-danger:       #b91c1c;
    --j-danger-soft:  #fee2e2;
    --j-info:         #1e40af;
    --j-info-soft:    #dbeafe;

    --j-shadow-sm:    0 1px 2px rgba(11,21,37,0.04);
    --j-shadow-md:    0 4px 12px rgba(11,21,37,0.06);
    --j-shadow-lg:    0 10px 30px rgba(11,21,37,0.10);
    --j-radius:       10px;
    --j-radius-lg:    14px;
}

/* =====================================================================
   PALETA DARK
   ===================================================================== */
:root[data-theme="dark"] {
    --j-brand:        #5b8def;
    --j-brand-soft:   #7ba4f3;
    --j-brand-hover:  #4a7be0;
    --j-accent:       #d4a85e;
    --j-accent-soft:  #2a2418;

    --j-text:         #e8edf5;
    --j-text-soft:    #b8c2d6;
    --j-text-muted:   #6b7795;

    --j-bg:           #0b1120;
    --j-surface:      #131a2c;
    --j-surface-2:    #1a2238;
    --j-surface-3:    #232c47;

    --j-border:       #2a3553;
    --j-border-soft:  #1e2740;

    --j-success-soft: #064e3b;
    --j-warning-soft: #422006;
    --j-danger-soft:  #450a0a;
    --j-info-soft:    #1e3a8a;

    --j-shadow-sm:    0 1px 2px rgba(0,0,0,0.3);
    --j-shadow-md:    0 4px 12px rgba(0,0,0,0.25);
    --j-shadow-lg:    0 10px 30px rgba(0,0,0,0.35);
}

/* =====================================================================
   CHROME DE STREAMLIT - pintado consistente con la paleta JuriSMA.
   Sin `!important`; usa cascada normal sobre vars que cambian segun theme.
   ===================================================================== */
.stApp { background-color: var(--j-bg); color: var(--j-text); }
section[data-testid="stSidebar"] {
    background: var(--j-surface);
    border-right: 1px solid var(--j-border);
}
section[data-testid="stSidebar"] > div { background: var(--j-surface); }

/* Header de Streamlit fuera del flujo: asi no ocupa altura arriba del
   contenido principal. El FAB hamburguer vive dentro del header y queda
   flotante sobre el contenido, no empuja el hero hacia abajo. */
header[data-testid="stHeader"] {
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    min-height: 0;
    z-index: 100;
    padding: 0;
}

/* Contenido principal arranca pegado al top (mobile) o con padding
   minimo en desktop. */
[data-testid="stAppViewBlockContainer"],
.main > .block-container,
section.main > div.block-container,
.stMainBlockContainer,
[data-testid="stMain"] > div,
[data-testid="stMain"] .block-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
@media (min-width: 992px) {
    [data-testid="stAppViewBlockContainer"],
    .main > .block-container,
    section.main > div.block-container,
    .stMainBlockContainer,
    [data-testid="stMain"] > div,
    [data-testid="stMain"] .block-container {
        padding-top: 1.4rem !important;
    }
}

/* Toolbar/header completos transparentes (sin reservar altura) */
[data-testid="stToolbar"] { background: transparent; padding: 0; }
[data-testid="stToolbarActions"] { padding: 0; }

/* =====================================================================
   LOCK SIDEBAR EN DESKTOP (>= 992px) / mobile usa top-bar custom.
   En desktop oculta el header nativo de la sidebar entero (Streamlit
   pone ahi `stLogoSpacer` + `stSidebarCollapseButton`, ninguno se usa).
   El brand-mark `.j-*` ya cubre la marca; sin el header, el contenido
   se pega al top sin padding muerto.
   ===================================================================== */
@media (min-width: 992px) {
    [data-testid="stSidebarHeader"]       { display: none; }
    [data-testid="stExpandSidebarButton"] { display: none; }
}

/* =====================================================================
   WIDGETS DE STREAMLIT - repintados con vars `--j-*` para que respondan
   al toggle propio (Streamlit no expone API para cambiar theme.base en
   runtime). Sin `!important`: solo cascada normal con especificidad ok.
   ===================================================================== */

.stButton > button {
    background: var(--j-surface);
    color: var(--j-text);
    border: 1px solid var(--j-border);
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.15s;
    box-shadow: var(--j-shadow-sm);
}
.stButton > button:hover {
    border-color: var(--j-brand);
    color: var(--j-brand);
    background: var(--j-surface-2);
}
.stButton > button[kind="primary"] {
    background: var(--j-brand);
    color: white;
    border-color: var(--j-brand);
    font-weight: 600;
    box-shadow: var(--j-shadow-md);
}
.stButton > button[kind="primary"]:hover {
    background: var(--j-brand-hover);
    border-color: var(--j-brand-hover);
    color: white;
}
section[data-testid="stSidebar"] .stButton > button {
    text-align: left;
    justify-content: flex-start;
}

.stDownloadButton > button {
    background: var(--j-brand);
    color: white;
    border: 1px solid var(--j-brand);
    border-radius: 8px;
    font-weight: 600;
    box-shadow: var(--j-shadow-md);
}
.stDownloadButton > button:hover {
    background: var(--j-brand-hover);
    border-color: var(--j-brand-hover);
    color: white;
}

.stTextInput input,
.stTextArea textarea,
.stNumberInput input,
.stDateInput input,
.stSelectbox > div > div {
    background: var(--j-surface);
    color: var(--j-text);
    border: 1px solid var(--j-border);
    border-radius: 8px;
}
.stTextInput input::placeholder,
.stTextArea textarea::placeholder { color: var(--j-text-muted); }
.stTextInput input:focus,
.stTextArea textarea:focus,
.stNumberInput input:focus {
    border-color: var(--j-brand);
    box-shadow: 0 0 0 3px var(--j-info-soft);
}

.stTextInput label,
.stTextArea label,
.stNumberInput label,
.stSelectbox label,
.stDateInput label,
.stSlider label,
.stRadio label,
.stCheckbox label {
    color: var(--j-text-soft);
    font-weight: 500;
    font-size: 0.88rem;
}

[data-testid="stExpander"] summary,
[data-testid="stExpander"] details > summary {
    background: var(--j-surface-2);
    color: var(--j-text);
    border: 1px solid var(--j-border);
    border-radius: 8px;
    font-weight: 500;
}
[data-testid="stExpander"] details[open] > summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
[data-testid="stExpander"] [data-testid="stExpanderDetails"] {
    background: var(--j-surface);
    color: var(--j-text);
    border: 1px solid var(--j-border);
    border-top: 0;
    border-radius: 0 0 8px 8px;
}

[data-testid="stAlert"],
[data-baseweb="notification"] {
    background: var(--j-surface);
    border: 1px solid var(--j-border);
    border-left: 3px solid var(--j-info);
    border-radius: 8px;
    color: var(--j-text);
}

[data-testid="stMetric"] {
    background: var(--j-surface);
    border: 1px solid var(--j-border);
    border-radius: 10px;
    padding: 14px 18px;
    box-shadow: var(--j-shadow-sm);
}
[data-testid="stMetricLabel"] { color: var(--j-text-soft); font-weight: 500; }
[data-testid="stMetricValue"] { color: var(--j-text); font-weight: 700; }

[data-testid="stContainer"][style*="border"] {
    background: var(--j-surface);
    border-color: var(--j-border);
    color: var(--j-text);
}

.stMarkdown, .stMarkdown p, .stMarkdown li, .stMarkdown span {
    color: var(--j-text);
}
.stMarkdown a { color: var(--j-brand); }
.stMarkdown strong { color: var(--j-text); }

/* =====================================================================
   COMPONENTES JURISMA - clases `.j-*` aditivas
   ===================================================================== */

.j-hero {
    background: var(--j-surface);
    border: 1px solid var(--j-border);
    border-radius: var(--j-radius-lg);
    padding: 1.6rem 1.8rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--j-shadow-sm);
    border-left: 3px solid var(--j-accent);
}
.j-hero h1 {
    color: var(--j-text);
    margin: 0 0 6px 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}
.j-hero .j-hero-sub {
    color: var(--j-text-soft);
    font-size: 1rem;
    line-height: 1.55;
    margin-top: 4px;
    max-width: 720px;
}
.j-hero .j-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--j-accent);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.j-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--j-surface-2);
    color: var(--j-text-soft);
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.81rem;
    font-weight: 500;
    border: 1px solid var(--j-border);
    line-height: 1.4;
}
.j-chip.j-chip-warn {
    background: var(--j-warning-soft);
    color: var(--j-warning);
    border-color: transparent;
}
.j-chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1rem 0; }

.j-card {
    background: var(--j-surface);
    border: 1px solid var(--j-border);
    border-radius: var(--j-radius-lg);
    margin-bottom: 1.2rem;
    overflow: hidden;
    box-shadow: var(--j-shadow-sm);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.j-card:hover { box-shadow: var(--j-shadow-md); }
.j-card-header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid var(--j-border-soft);
    background: var(--j-surface-2);
}
.j-card-num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--j-brand);
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.j-card-title {
    color: var(--j-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    flex-grow: 1;
}
.j-card-body { padding: 14px 20px 18px 20px; }

.j-badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.j-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.77rem;
    font-weight: 500;
    background: var(--j-surface-2);
    color: var(--j-text-soft);
    border: 1px solid var(--j-border);
    line-height: 1.5;
}
.j-badge strong { color: var(--j-text); font-weight: 600; }
.j-badge.j-badge-tribunal { background: var(--j-info-soft); color: var(--j-info); border-color: transparent; }
.j-badge.j-badge-fuero    { background: var(--j-success-soft); color: var(--j-success); border-color: transparent; }
.j-badge.j-badge-fecha    { background: var(--j-surface-3); color: var(--j-text-soft); }
.j-badge.j-badge-expte    { background: var(--j-accent-soft); color: var(--j-accent); border-color: transparent; font-family: "JetBrains Mono", monospace; }
.j-badge.j-badge-fuente   { background: var(--j-surface-3); color: var(--j-text-soft); }
.j-badge.j-badge-relevance-alta   { background: var(--j-success); color: white; border-color: transparent; font-weight: 600; }
.j-badge.j-badge-relevance-media  { background: var(--j-warning); color: white; border-color: transparent; font-weight: 600; }
.j-badge.j-badge-relevance-baja   { background: var(--j-text-muted); color: white; border-color: transparent; font-weight: 600; }

/* `a.j-link-cta` (no `.j-link-cta` solo) para empatar especificidad con
   `.stMarkdown a { color: var(--j-brand) }` definido arriba: sin el `a`
   delante, el navy del selector generico pintaba sobre el navy del fondo
   del CTA y dejaba el texto invisible. Con (0,1,1)==(0,1,1) ganamos por
   orden de declaracion. */
a.j-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--j-brand);
    color: white;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s;
    box-shadow: var(--j-shadow-sm);
}
a.j-link-cta:hover { background: var(--j-brand-hover); color: white; }

.j-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--j-text-muted);
    margin: 14px 0 6px 0;
}
.j-section-resumen,
.j-section-relevancia,
.j-narrative-block,
.j-fuente-item,
.j-disclaimer {
    color: var(--j-text);
    line-height: 1.55;
}
.j-section-resumen {
    background: var(--j-surface-2);
    padding: 12px 14px;
    border-radius: 8px;
    border-left: 3px solid var(--j-brand);
    margin-bottom: 12px;
}
.j-section-relevancia {
    background: var(--j-accent-soft);
    padding: 12px 14px;
    border-radius: 8px;
    border-left: 3px solid var(--j-accent);
    margin-bottom: 12px;
}
.j-narrative-block {
    background: var(--j-surface);
    border: 1px solid var(--j-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 1.2rem;
    line-height: 1.65;
}
.j-narrative-block h2 {
    margin-top: 0;
    font-size: 1.1rem;
    color: var(--j-text);
    border-bottom: 2px solid var(--j-accent);
    padding-bottom: 6px;
    display: inline-block;
}

.j-cita-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: 6px; }
.j-cita-chip {
    background: var(--j-brand);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 4px;
    font-family: "JetBrains Mono", monospace;
}

.j-fuente-item {
    background: var(--j-surface);
    border: 1px solid var(--j-border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.j-fuente-item .caratula { font-weight: 600; color: var(--j-text); font-size: 0.93rem; }
.j-fuente-item .meta { font-size: 0.81rem; color: var(--j-text-muted); margin-top: 2px; }

.j-disclaimer {
    background: var(--j-warning-soft);
    border: 1px solid var(--j-warning);
    border-left: 3px solid var(--j-warning);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.86rem;
    color: var(--j-warning);
    line-height: 1.55;
}
.j-disclaimer strong { color: var(--j-warning); }

.j-footer {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--j-border);
    color: var(--j-text-muted);
    font-size: 0.82rem;
    text-align: center;
}
.j-footer a { color: var(--j-brand); }

.j-example-card {
    background: var(--j-surface);
    border: 1px solid var(--j-border);
    border-radius: 10px;
    padding: 14px 16px 12px 16px;
    margin-bottom: 8px;
    min-height: 138px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: var(--j-shadow-sm);
}
.j-example-card:hover { border-color: var(--j-brand); box-shadow: var(--j-shadow-md); }
.j-example-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--j-brand);
    background: var(--j-info-soft);
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.j-example-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--j-text);
    margin-bottom: 6px;
    line-height: 1.35;
}
.j-example-sub {
    font-size: 0.83rem;
    color: var(--j-text-soft);
    line-height: 1.5;
}

/* Sidebar custom: brand mark, nav label, footer */
.j-nav-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--j-text-muted);
    padding: 0 4px;
    margin: 0 0 8px 0;
}
.j-sidebar-footer {
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid var(--j-border-soft);
    font-size: .76rem;
    color: var(--j-text-muted);
    line-height: 1.4;
}
.j-sidebar-footer a { color: var(--j-brand); }

.j-brand-mark {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 0 0;
}
.j-brand-mark .j-brand-icon {
    width: 36px;
    height: 36px;
    background: var(--j-brand);
    color: white;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: var(--j-shadow-md);
}
.j-brand-name { font-weight: 700; font-size: 1.05rem; color: var(--j-text); letter-spacing: -0.01em; }
.j-brand-tag  { font-size: 0.78rem; color: var(--j-text-muted); margin-top: -2px; }

/* Loading overlay */
.j-loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--j-bg);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}
.j-loading-spinner {
    width: 64px;
    height: 64px;
    border: 3px solid var(--j-border);
    border-top-color: var(--j-brand);
    border-radius: 50%;
    animation: j-spin 0.9s linear infinite;
    margin-bottom: 1.4rem;
}
@keyframes j-spin { to { transform: rotate(360deg); } }
.j-loading-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--j-text);
    margin-bottom: 8px;
    letter-spacing: -0.015em;
}
.j-loading-sub {
    color: var(--j-text-soft);
    max-width: 480px;
    line-height: 1.55;
    font-size: 0.95rem;
}
.j-loading-sub b { color: var(--j-brand); font-weight: 600; }
.j-loading-steps {
    margin: 22px 0 0 0;
    text-align: left;
    color: var(--j-text-soft);
    font-size: 0.88rem;
    background: var(--j-surface);
    border: 1px solid var(--j-border);
    padding: 12px 20px;
    border-radius: 10px;
    max-width: 500px;
    list-style: none;
    box-shadow: var(--j-shadow-sm);
}
.j-loading-steps li {
    margin: 10px 0;
    display: grid;
    grid-template-columns: 22px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
}
.j-loading-steps li .step-icon {
    grid-row: 1 / span 2;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.j-loading-steps li .step-label {
    grid-column: 2;
    grid-row: 1;
    font-weight: 600;
    color: var(--j-text);
}
.j-loading-steps li .step-helper {
    grid-column: 2;
    grid-row: 2;
    color: var(--j-text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

/* Estado: done (etapa pasada) — check verde */
.j-loading-steps li.step-done .step-icon {
    background: var(--j-success);
    color: white;
}
.j-loading-steps li.step-done .step-label { color: var(--j-text-soft); }

/* Estado: active (etapa actual) — spinner navy + texto destacado */
.j-loading-steps li.step-active .step-icon.step-spinning {
    background: transparent;
    border: 2px solid var(--j-border);
    border-top-color: var(--j-brand);
    animation: j-spin 0.9s linear infinite;
    color: transparent;
}
.j-loading-steps li.step-active .step-label {
    color: var(--j-brand);
    font-weight: 700;
}
.j-loading-steps li.step-active .step-helper { color: var(--j-text-soft); }

/* Estado: pending (etapa futura) — circulo gris pelado */
.j-loading-steps li.step-pending .step-icon {
    background: transparent;
    color: var(--j-text-muted);
    border: 1.5px solid var(--j-border);
    font-size: 0.7rem;
}
.j-loading-steps li.step-pending .step-label { color: var(--j-text-muted); }
.j-loading-query {
    margin-top: 18px;
    max-width: 500px;
    font-size: 0.82rem;
    color: var(--j-text-muted);
    font-style: italic;
    padding: 8px 14px;
    border-left: 2px solid var(--j-accent);
    background: var(--j-surface-2);
    border-radius: 0 6px 6px 0;
}
.j-loading-hint {
    margin-top: 14px;
    font-size: 0.76rem;
    color: var(--j-text-muted);
}

/* Calculadora Vuoto-Mendez (y reusable por las demas calculadoras) */
.j-calc-result {
    background: var(--j-surface);
    border: 1px solid var(--j-accent);
    border-radius: var(--j-radius-lg);
    padding: 1.6rem 1.8rem;
    margin: 1.2rem 0;
    box-shadow: var(--j-shadow-md);
}
.j-calc-label {
    font-size: 0.78rem;
    color: var(--j-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
}
.j-calc-value {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--j-brand);
    margin: 4px 0;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}
.j-calc-breakdown {
    background: var(--j-surface-2);
    border-left: 3px solid var(--j-brand);
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 16px;
    font-size: 0.9rem;
    line-height: 1.7;
}
.j-calc-breakdown .label { color: var(--j-text-soft); font-weight: 500; }
.j-calc-breakdown .value { font-family: "JetBrains Mono", monospace; color: var(--j-brand); font-weight: 600; }
.j-calc-formula {
    background: var(--j-surface-2);
    border: 1px solid var(--j-border);
    padding: 12px 16px;
    border-radius: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.92rem;
    text-align: center;
    color: var(--j-brand);
    margin: 8px 0;
}
.j-calc-cta {
    background: var(--j-info-soft);
    border: 1px solid var(--j-info);
    border-left: 3px solid var(--j-info);
    border-radius: 8px;
    padding: 14px 18px;
    margin-top: 1.4rem;
    color: var(--j-info);
    line-height: 1.55;
}
.j-calc-cta strong { color: var(--j-info); }

/* =====================================================================
   MOBILE TOP-BAR — nav custom para pantallas chicas (< 992px).
   En mobile reemplazamos la sidebar nativa por una top-bar con logo
   a la izq + boton hamburguesa a la der + panel desplegable. El cierre
   automatico al elegir opcion se logra con un checkbox CSS-only: el
   navegador navega a la nueva URL, Streamlit re-renderea el HTML
   completo, el checkbox vuelve a su default unchecked => panel cerrado.
   Sin JavaScript propio.
   ===================================================================== */
.j-mnav-root { display: none; }
.j-mnav-input { display: none; }

@media (max-width: 991px) {
    .j-mnav-root { display: block; }

    /* Reemplazo arquitectonico: sidebar nativa oculta, top-bar custom
       toma su lugar. NO es un parche por bug, es la decision de UI
       para el viewport mobile. */
    section[data-testid="stSidebar"] { display: none; }
    [data-testid="stExpandSidebarButton"] { display: none; }
    [data-testid="stSidebarCollapseButton"] { display: none; }

    [data-testid="stAppViewBlockContainer"],
    .main > .block-container,
    section.main > div.block-container,
    .stMainBlockContainer,
    [data-testid="stMain"] > div,
    [data-testid="stMain"] .block-container {
        padding-top: 64px !important;
    }

    .j-mnav-topbar {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 56px;
        z-index: 1000;
        background: var(--j-surface);
        border-bottom: 1px solid var(--j-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-shadow: var(--j-shadow-sm);
    }

    .j-mnav-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: var(--j-text);
    }
    .j-mnav-brand .j-mnav-brand-icon {
        width: 34px;
        height: 34px;
        background: var(--j-brand);
        color: white;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-weight: 700;
        box-shadow: var(--j-shadow-sm);
    }
    .j-mnav-brand .j-mnav-brand-name {
        font-weight: 700;
        font-size: 1.05rem;
        color: var(--j-text);
        letter-spacing: -0.01em;
    }

    .j-mnav-burger {
        cursor: pointer;
        width: 44px;
        height: 44px;
        border-radius: 9px;
        background: transparent;
        color: var(--j-text);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        line-height: 1;
        transition: background 0.15s;
        user-select: none;
    }
    .j-mnav-burger:hover { background: var(--j-surface-2); }
    .j-mnav-burger .j-mnav-burger-close { display: none; }
    .j-mnav-input:checked ~ .j-mnav-topbar .j-mnav-burger .j-mnav-burger-open { display: none; }
    .j-mnav-input:checked ~ .j-mnav-topbar .j-mnav-burger .j-mnav-burger-close { display: inline; }

    .j-mnav-overlay {
        position: fixed;
        inset: 56px 0 0 0;
        background: rgba(11, 21, 37, 0.4);
        z-index: 998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .j-mnav-input:checked ~ .j-mnav-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .j-mnav-panel {
        position: fixed;
        top: 56px; left: 0; right: 0;
        z-index: 999;
        background: var(--j-surface);
        border-bottom: 1px solid var(--j-border);
        box-shadow: var(--j-shadow-lg);
        transform: translateY(-110%);
        transition: transform 0.25s ease;
        max-height: calc(100vh - 56px);
        overflow-y: auto;
        padding: 12px 12px 20px 12px;
    }
    .j-mnav-input:checked ~ .j-mnav-panel { transform: translateY(0); }

    .j-mnav-section {
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--j-text-muted);
        padding: 12px 12px 6px 12px;
    }
    .j-mnav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        border-radius: 9px;
        text-decoration: none;
        color: var(--j-text);
        font-size: 0.95rem;
        font-weight: 500;
        border: 1px solid transparent;
        transition: background 0.12s, border-color 0.12s;
    }
    /* Forzar herencia de color en los <span> hijos. Sin esto,
       `.stMarkdown span { color: var(--j-text) }` pinta los spans con
       color fijo y los items activos quedan ilegibles (texto casi-negro
       sobre fondo navy). (0,1,1)==(0,1,1) y ganamos por orden. */
    .j-mnav-item span { color: inherit; }
    .j-mnav-item:hover {
        background: var(--j-surface-2);
        border-color: var(--j-border-soft);
        color: var(--j-text);
    }
    .j-mnav-item.is-active {
        background: var(--j-brand);
        color: white;
        border-color: var(--j-brand);
    }
    .j-mnav-item.is-active:hover { background: var(--j-brand-hover); color: white; }
}

/* =====================================================================
   AUDIT a11y/contraste — bloque defensivo final.

   1) HERENCIA DE COLOR: los selectores genericos `.stMarkdown a/span/
      strong` (0,1,1) pisan el color de componentes `.j-*` que definen
      el propio (0,1,0). Cazamos este bug DOS VECES (CTA "Ver fallo
      original" + item activo mobile menu). Solucion sistematica: en
      cada componente con color custom, forzar `color: inherit` en
      todos sus descendientes. Asi el bug no puede volver a aparecer
      en componentes nuevos que sigan la convencion `.j-*`.

   2) FOCUS VISIBLE: agregar outlines accesibles en widgets navegables
      por teclado (Tab). Por default Streamlit usa el outline del browser
      pero lo pisa con CSS propio en varios casos.
   ===================================================================== */

/* 1) Herencia de color */
a.j-link-cta *,
.j-cita-chip *,
.j-card-num *,
.j-disclaimer *,
.j-disclaimer strong,
.j-badge *,
.j-chip *,
.j-mnav-item *,
.j-mnav-brand *,
.j-loading-overlay *,
.j-calc-result *,
.j-calc-value *,
.j-calc-cta *,
.j-section-resumen *,
.j-section-relevancia *,
.j-narrative-block *,
.j-fuente-item *,
.j-example-card *,
.j-hero * {
    color: inherit;
}
/* Excepciones: links dentro de componentes que SI deben tener color brand */
.j-narrative-block a,
.j-fuente-item a,
.j-example-card a,
.j-footer a,
.j-sidebar-footer a {
    color: var(--j-brand);
}

/* 2) Focus visible accesible (WCAG 2.4.7) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
.j-mnav-burger:focus-visible,
.j-mnav-item:focus-visible {
    outline: 2px solid var(--j-accent);
    outline-offset: 2px;
    border-radius: 4px;
}
.j-mnav-item:focus-visible {
    background: var(--j-surface-2);
}

/* =====================================================================
   PAGINAS SEO (Jinja, fuera de Streamlit) — `/calc/*`.
   Layout server-rendered con header propio + main + footer. Reutiliza
   las vars `--j-*` y los componentes `.j-card`, `.j-disclaimer`,
   `.j-calc-*` ya definidos. Solo agrega chrome (header/nav/footer).
   ===================================================================== */
.j-calc-page {
    margin: 0;
    padding: 0;
    background: var(--j-bg);
    color: var(--j-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.j-calc-header {
    background: var(--j-surface);
    border-bottom: 1px solid var(--j-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 32px;
    flex-wrap: wrap;
}
.j-calc-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--j-text);
}
.j-calc-brand-icon {
    width: 40px;
    height: 40px;
    background: var(--j-brand);
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    box-shadow: var(--j-shadow-sm);
}
.j-calc-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.j-calc-brand-name { font-weight: 700; font-size: 1.1rem; color: var(--j-text); letter-spacing: -0.015em; }
.j-calc-brand-tag  { font-size: 0.78rem; color: var(--j-text-muted); margin-top: 2px; }

.j-calc-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.j-calc-nav-item {
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--j-text-soft);
    font-size: 0.92rem;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
}
.j-calc-nav-item:hover { background: var(--j-surface-2); color: var(--j-text); }
.j-calc-nav-item.is-active { background: var(--j-brand); color: white; }
.j-calc-nav-cta {
    margin-left: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--j-accent);
    color: white;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.92rem;
    box-shadow: var(--j-shadow-sm);
    transition: background 0.12s;
}
.j-calc-nav-cta:hover { background: #94701c; color: white; }

.j-calc-main {
    flex: 1;
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 2.4rem 1.6rem 3rem 1.6rem;
}

.j-calc-h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--j-text);
    letter-spacing: -0.025em;
    margin: 0 0 .5rem 0;
    line-height: 1.15;
}
.j-calc-lead {
    color: var(--j-text-soft);
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 0 1.6rem 0;
    max-width: 700px;
}

.j-calc-form {
    background: var(--j-surface);
    border: 1px solid var(--j-border);
    border-radius: var(--j-radius-lg);
    padding: 1.6rem 1.8rem;
    box-shadow: var(--j-shadow-sm);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem 1.4rem;
    margin-bottom: 1.5rem;
}
.j-calc-form .j-calc-field { display: flex; flex-direction: column; gap: 6px; }
.j-calc-form label {
    color: var(--j-text-soft);
    font-weight: 500;
    font-size: 0.88rem;
}
.j-calc-form input,
.j-calc-form select {
    background: var(--j-surface);
    color: var(--j-text);
    border: 1px solid var(--j-border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.j-calc-form input:focus,
.j-calc-form select:focus {
    outline: none;
    border-color: var(--j-brand);
    box-shadow: 0 0 0 3px var(--j-info-soft);
}
.j-calc-form .j-calc-hint { font-size: 0.78rem; color: var(--j-text-muted); }
.j-calc-form .j-calc-submit-wrap {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}
.j-calc-submit {
    background: var(--j-brand);
    color: white;
    border: 1px solid var(--j-brand);
    border-radius: 8px;
    padding: 10px 22px;
    font-weight: 600;
    font-size: 0.96rem;
    cursor: pointer;
    box-shadow: var(--j-shadow-md);
    transition: background 0.12s;
}
.j-calc-submit:hover { background: var(--j-brand-hover); }

.j-calc-error {
    background: var(--j-danger-soft);
    border: 1px solid var(--j-danger);
    border-left: 3px solid var(--j-danger);
    color: var(--j-danger);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.j-calc-footer {
    background: var(--j-surface);
    border-top: 1px solid var(--j-border);
    padding: 1.6rem 1.6rem;
    color: var(--j-text-soft);
    font-size: 0.88rem;
    line-height: 1.55;
}
.j-calc-footer-inner { max-width: 920px; margin: 0 auto; }
.j-calc-footer a { color: var(--j-brand); }
.j-calc-footer-meta { color: var(--j-text-muted); font-size: 0.82rem; margin-top: .5rem; }

.j-calc-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
    margin: 1.2rem 0 2rem 0;
}
.j-calc-index-card {
    display: block;
    background: var(--j-surface);
    border: 1px solid var(--j-border);
    border-radius: var(--j-radius-lg);
    padding: 1.4rem 1.5rem;
    text-decoration: none;
    color: var(--j-text);
    box-shadow: var(--j-shadow-sm);
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.j-calc-index-card:hover {
    box-shadow: var(--j-shadow-md);
    border-color: var(--j-brand);
    transform: translateY(-2px);
}
.j-calc-index-card .icon { font-size: 1.8rem; margin-bottom: .6rem; display: block; }
.j-calc-index-card .title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--j-text);
    margin-bottom: .35rem;
}
.j-calc-index-card .desc {
    color: var(--j-text-soft);
    font-size: 0.92rem;
    line-height: 1.5;
}

@media (max-width: 720px) {
    .j-calc-header { padding: 10px 14px; }
    .j-calc-nav { gap: 2px; }
    .j-calc-nav-item { padding: 6px 10px; font-size: 0.86rem; }
    .j-calc-main { padding: 1.4rem 1rem 2rem 1rem; }
    .j-calc-h1 { font-size: 1.5rem; }
}

/* =====================================================================
   ADMIN PANEL (QA del MVP) — `{ADMIN_PATH}/*`.
   Layout server-rendered, sobrio, denso (mucha info por pantalla). NO
   compartimos chrome con la UI publica para que sea visualmente claro
   "esto es admin". Mismas vars de color que el resto.
   ===================================================================== */
.j-admin-page {
    background: var(--j-bg);
    color: var(--j-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 14px;
}
.j-admin-header {
    background: var(--j-brand);
    color: white;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.j-admin-brand { font-weight: 700; font-size: 1.05rem; }
.j-admin-brand .badge {
    margin-left: 8px;
    background: var(--j-accent);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.j-admin-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.j-admin-nav a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.88rem;
    transition: background 0.12s, color 0.12s;
}
.j-admin-nav a:hover { background: rgba(255,255,255,0.12); color: white; }
.j-admin-nav a.is-active { background: rgba(255,255,255,0.18); color: white; font-weight: 600; }
.j-admin-user {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.65);
    font-family: "JetBrains Mono", monospace;
}

.j-admin-main {
    flex: 1;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 1.4rem 1.4rem 2rem 1.4rem;
}

.j-admin-h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--j-text);
    margin: 0 0 .25rem 0;
    letter-spacing: -0.015em;
}
.j-admin-lead {
    color: var(--j-text-muted);
    font-size: 0.88rem;
    margin: 0 0 1.4rem 0;
}

.j-admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .8rem;
    margin-bottom: 1.4rem;
}
.j-admin-card {
    background: var(--j-surface);
    border: 1px solid var(--j-border);
    border-radius: 10px;
    padding: 14px 18px;
    box-shadow: var(--j-shadow-sm);
}
.j-admin-card-label {
    color: var(--j-text-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    margin-bottom: 6px;
}
.j-admin-card-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--j-text);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.j-admin-card-sub {
    margin-top: 4px;
    color: var(--j-text-muted);
    font-size: 0.76rem;
}

.j-admin-section {
    background: var(--j-surface);
    border: 1px solid var(--j-border);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.2rem;
    box-shadow: var(--j-shadow-sm);
}
.j-admin-section h2 {
    margin: 0 0 .8rem 0;
    font-size: 1rem;
    color: var(--j-text);
    font-weight: 600;
}

.j-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.j-admin-table th {
    text-align: left;
    color: var(--j-text-muted);
    font-weight: 600;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 10px;
    border-bottom: 1px solid var(--j-border);
}
.j-admin-table td {
    padding: 10px;
    border-bottom: 1px solid var(--j-border-soft);
    vertical-align: top;
    color: var(--j-text);
}
.j-admin-table tr:hover td { background: var(--j-surface-2); }
.j-admin-table td a { color: var(--j-brand); text-decoration: none; }
.j-admin-table td a:hover { text-decoration: underline; }
.j-admin-table td.mono {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    color: var(--j-text-soft);
}
.j-admin-table td.truncate {
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.j-admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.74rem;
    font-weight: 600;
    background: var(--j-surface-2);
    color: var(--j-text-soft);
    border: 1px solid var(--j-border);
}
.j-admin-badge.ok { background: var(--j-success-soft); color: var(--j-success); border-color: transparent; }
.j-admin-badge.err { background: var(--j-danger-soft); color: var(--j-danger); border-color: transparent; }
.j-admin-badge.warn { background: var(--j-warning-soft); color: var(--j-warning); border-color: transparent; }
.j-admin-badge.info { background: var(--j-info-soft); color: var(--j-info); border-color: transparent; }

.j-admin-filters {
    background: var(--j-surface-2);
    border: 1px solid var(--j-border);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 1rem;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: end;
}
.j-admin-filters .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.j-admin-filters label {
    font-size: 0.7rem;
    color: var(--j-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.j-admin-filters input,
.j-admin-filters select {
    background: var(--j-surface);
    color: var(--j-text);
    border: 1px solid var(--j-border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.84rem;
    font-family: inherit;
    min-width: 120px;
}
.j-admin-filters button {
    background: var(--j-brand);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    font-weight: 600;
    font-size: 0.84rem;
    cursor: pointer;
}
.j-admin-filters button:hover { background: var(--j-brand-hover); }

.j-admin-pagination {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--j-text-muted);
    font-size: 0.82rem;
}
.j-admin-pagination a {
    color: var(--j-brand);
    text-decoration: none;
    padding: 5px 12px;
    border: 1px solid var(--j-border);
    border-radius: 6px;
    margin-left: 6px;
}
.j-admin-pagination a:hover { background: var(--j-surface-2); }
.j-admin-pagination .disabled {
    color: var(--j-text-muted);
    pointer-events: none;
    opacity: 0.5;
}

.j-admin-empty {
    padding: 2rem;
    text-align: center;
    color: var(--j-text-muted);
    font-style: italic;
}

.j-admin-mono-block {
    background: var(--j-surface-2);
    border: 1px solid var(--j-border);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.82rem;
    color: var(--j-text);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
}

.j-admin-sparkline {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 60px;
    margin-top: 8px;
}
.j-admin-sparkline .bar {
    flex: 1;
    background: var(--j-brand);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: background 0.12s;
}
.j-admin-sparkline .bar:hover { background: var(--j-accent); }