/* ============================================================
   ORIA Dashboard 2.0 — style.css
   Mejora visual sin alterar funcionalidad.
   Dash carga este archivo automáticamente desde assets/.
   ============================================================ */

/* ── Reset y base ─────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    background-color: #F5F5F5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333333;
    line-height: 1.5;
}





#main-tabs {
    margin-bottom: 0.75rem;
}


#tab-content {
    background: white;
    padding: 1.5rem;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    min-height: 600px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}


/* ── KPI Cards ─────────────────────────────────────────────── */
.oria-kpi {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    flex: 1 1 180px;
    min-width: 0;
    box-sizing: border-box;
    border-top: 3px solid #1976D2;
}

.oria-kpi .kpi-label {
    color: white;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.oria-kpi .kpi-value {
    padding: 0.8rem 0.8rem 0.2rem;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: #333333;
}

.oria-kpi .kpi-sub {
    padding: 0 0.8rem 0.7rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: #666666;
}

/* ── Estado sin datos ──────────────────────────────────────── */
.oria-nodata {
    color: #666666;
    text-align: center;
    padding: 3rem;
    font-size: 1rem;
}

/* ── Fuente / nota de fuente ──────────────────────────────── */
.oria-fuente {
    background-color: #F8F9FA;
    border: 1px solid #E0E0E0;
    border-left: 4px solid #2E7D32;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.oria-fuente .fuente-label {
    font-weight: 600;
}

.oria-fuente .fuente-fecha {
    color: #666666;
}

.oria-fuente .fuente-confiabilidad {
    font-weight: 600;
}

/* ── Sección / título de módulo ────────────────────────────── */
.oria-section {
    color: #01579B;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #0277BD;
    padding-bottom: 0.5rem;
}


/* ── Banner de fechas (arancales) ─────────────────────────── */
.oria-banner {
    background-color: #E3F2FD;
    border-left: 4px solid #0277BD;
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
}

.oria-banner .banner-note {
    color: #666666;
    font-style: italic;
    font-size: 0.72rem;
    flex-basis: 100%;
}










/* ── Gráficos Plotly ───────────────────────────────────────── */
.dash-graph {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    width: 100%;
}

/* ── Sidebar de coyuntura (contenedor) ────────────────────── */
.coy-sidebar {
    width: 230px;
    min-width: 230px;
    background: white;
    padding: 1rem;
    border-right: 1px solid #E0E0E0;
    box-shadow: 2px 0 8px rgba(0,0,0,0.04);
}

.coy-content {
    flex: 1;
    padding: 0.5rem 0;
    min-width: 0;
}

/* ── Sidebar de vigilancia ────────────────────────────────── */
.vig-sidebar {
    width: 240px;
    min-width: 240px;
    flex-shrink: 0;
    background: white;
    padding: 1rem;
    border-right: 1px solid #E0E0E0;
    box-shadow: 2px 0 8px rgba(0,0,0,0.04);
    height: 100%;
}

.vig-content {
    flex: 1 1 0%;
    max-width: 100%;
    padding: 0.5rem 0;
    min-width: 0;
}




/* ── Progress bar de loading de tabs ──────────────────────── */
#tab-content-loading .dash-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

/* ── Tabs de Dash ──────────────────────────────────────────── */
#main-tabs .tab {
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border-radius: 4px 4px 0 0;
    transition: all 0.15s ease;
}

#main-tabs .tab-selected {
    background-color: white;
    color: #0277BD;
    border-bottom: 3px solid #0277BD;
    font-weight: 600;
}

#main-tabs .tab:not(.tab-selected):hover {
    background-color: #F5F5F5;
    color: #0277BD;
}











/* ── Bloque de información de fuentes (Resumen Ejecutivo) ── */
.oria-fuente-info {
    background-color: #F8F9FA;
    border: 1px solid #E0E0E0;
    border-left: 4px solid #0277BD;
    padding: 0.75rem 1rem;
    margin-bottom: 1.2rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #333333;
    line-height: 1.6;
}

/* ── Capítulo 5 · Capítulos HS/TARIC ─────────────────────── */
.cap5-container {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.cap5-chart-box {
    flex: 1;
    min-width: 420px;
    height: 500px;
}

.cap5-title {
    color: #01579B;
    margin-top: 0;
    margin-bottom: 0.4rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.cap5-source {
    font-size: 0.75rem;
    color: #999999;
    margin-bottom: 0.9rem;
}




/* ── Ajustes responsive ────────────────────────────────────── */
@media (max-width: 768px) {
    .oria-kpi .kpi-value {
        font-size: 1.4rem;
    }
}


/* ── FIX ORIA · Bugs #1 (spinner) y #2 (responsive movil) ── */

/* Bug #1: @keyframes real para el spinner de _load_indicator() en dashboard.py
   (antes se intentaba declarar como kwarg de html.Div, lo cual es invalido) */
@keyframes dash-arrow-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.spinner-container {
    display: inline-flex;
    align-items: center;
}

/* Bug #2: los sidebars/paneles de Coyuntura y Vigilancia solo tenian
   "style=" inline (sin className), por lo que el @media (max-width:768px)
   ya existente en este archivo nunca los alcanzaba. Con className ya
   agregado en dashboard.py (fix_oria_bugs.py), forzamos aqui la prioridad
   sobre el inline con !important solo dentro del breakpoint movil. */
@media (max-width: 768px) {
    .coy-layout,
    .vig-layout {
        flex-direction: column !important;
    }
    .coy-sidebar,
    .vig-sidebar {
        width: 100% !important;
        min-width: unset !important;
        flex-shrink: 1 !important;
        border-right: none !important;
        border-bottom: 1px solid #E0E0E0;
    }
}

/* ── Vigilancia v2 · sistema visual común ─────────────────── */
.vig-v2-shell {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    overflow: hidden;
}
.vig-v2-sidebar {
    background: #01579B !important;
    color: #ffffff !important;
}
.vig-v2-sidebar label,
.vig-v2-sidebar button,
.vig-v2-sidebar span {
    color: #ffffff !important;
}
.vig-v2-main { background: #ffffff; }
.vig-v2-filters {
    border: 1px solid #E0E0E0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.vig-v2-view {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.vig-v2-view .oria-section {
    color: #01579B;
    border-bottom: 2px solid #0288D1;
    padding-bottom: 0.35rem;
    margin-top: 1.35rem;
    margin-bottom: 0.8rem;
}
.vig-v2-view .oria-fuente,
.vig-v2-view .oria-fuente-info {
    margin-bottom: 1rem;
}
.vig-v2-view .oria-kpi {
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.vig-v2-view .dash-graph {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 0.35rem;
}
.vig-v2-view .oria-nodata {
    border: 1px dashed #BDBDBD;
    border-radius: 6px;
}
.vig-v2-vig-1 .oria-section { border-color: #0288D1; }
.vig-v2-vig-2 .oria-section { border-color: #C00000; }
.vig-v2-vig-3 .oria-section { border-color: #00A6A6; }
.vig-v2-vig-4 .oria-section { border-color: #ED7D31; }
.vig-v2-vig-5 .oria-section { border-color: #00A6A6; }
.vig-v2-vig-7 .oria-section { border-color: #C00000; }
@media (max-width: 768px) {
    .vig-v2-shell { flex-direction: column !important; }
    .vig-v2-sidebar { width: 100% !important; min-width: 0 !important; }
}

/* ── Vigilancia Internacional v3 ─────────────────────────── */
.vig3-nav-item,
.vig3-nav-secondary { display: block; color: #ffffff; padding: 0.7rem 0.65rem; border-radius: 5px; cursor: pointer; margin-bottom: 0.25rem; }
.vig3-nav-item:hover,
.vig3-nav-secondary:hover { background: rgba(255,255,255,0.14); }
.vig3-nav-secondary { color: #D7ECFF; font-size: 0.82rem; }
.vig3-global-filters label { display: block; font-size: 0.78rem; font-weight: 700; color: #666666; margin-bottom: 0.25rem; }
.vig3-method-note { background: #F8F9FA; border-left: 4px solid #0288D1; padding: 0.65rem 0.8rem; border-radius: 4px; color: #666666; font-size: 0.82rem; }
.vig3-event-card { background: #ffffff; border: 1px solid #E0E0E0; border-top: 4px solid #0288D1; border-radius: 7px; padding: 0.9rem; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.vig3-event-card h4 { color: #01579B; margin: 0.35rem 0; }
.vig3-event-card p { color: #333333; margin: 0.35rem 0 0.6rem; }
.vig3-event-badge { color: #01579B; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; }
.vig3-source { color: #666666; font-size: 0.75rem; margin-bottom: 0.6rem; }
.vig3-action,
.vig3-shortcut { border: 1px solid #0288D1; background: #ffffff; color: #01579B; padding: 0.45rem 0.7rem; border-radius: 4px; cursor: pointer; font-weight: 600; }
.vig3-action:hover,
.vig3-shortcut:hover { background: #E3F2FD; }
.vig3-drawer-close { border: 0; background: transparent; color: #666666; font-size: 1.4rem; cursor: pointer; }
@media (max-width: 768px) {
    #vig3-global-filters { flex-direction: column !important; }
    .vig3-nav-item, .vig3-nav-secondary { display: inline-block; margin-right: 0.3rem; }
}