/* =====================================================================
   ESTILOS INSTITUCIONALES - SFIA GTO (ADN Pomelli)
   ===================================================================== */

:root {
  --sfia-navy: #142392;
  --sfia-blue: #0363c9;
  --sfia-teal: #00a985;
  --sfia-bg-light: #e4ecfa;
  --sfia-dark: #2c3e50;
  --white: #ffffff;
}

body {
  font-family: 'Proxima Nova', 'Google Sans Flex', -apple-system, sans-serif;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
  color: var(--sfia-dark);
}

.download-toolbar {
  background-color: var(--white);
  border-bottom: 1px solid rgba(20, 35, 146, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 1000;
}

.white-container {
    background-color: var(--white) !important;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(20, 35, 146, 0.08);
    position: relative;
    z-index: 1; /* Por encima de la marca de agua */
    margin-bottom: 20px;
}

/* Encabezados y Textos */
h2, h3, h4, h5 {
  font-weight: 700;
  color: var(--sfia-navy);
}
.text-info { color: var(--sfia-blue) !important; }
.text-primary { color: var(--sfia-navy) !important; }

/* Estilo de Pestañas (Tabs) */
.nav-tabs {
    border-bottom: 3px solid var(--sfia-bg-light);
}
.nav-tabs .nav-link {
    color: var(--sfia-navy);
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid transparent;
    margin-right: 5px;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s ease;
}
.nav-tabs .nav-link.active {
    background-color: var(--sfia-teal) !important;
    color: var(--white) !important;
    border-color: var(--sfia-teal) !important;
}

/* Tarjetas (Cards) */
.card {
  border: 1px solid rgba(20, 35, 146, 0.1) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  background-color: var(--white);
  z-index: 1;
}
.card-header {
  background-color: var(--sfia-navy) !important;
  color: var(--white) !important;
  border-radius: 10px 10px 0 0 !important;
}
.bg-info { background-color: var(--sfia-blue) !important; }

/* Tablas Dash */
.dash-spreadsheet-container .dash-spreadsheet-inner th {
  background-color: var(--sfia-navy) !important;
  color: white !important;
  font-weight: 600;
}