/* ============================================================
   theme_sikuri.css
   Sistema de marca — Dashboard Financiero Grupo Sikuri
   Colocar en la carpeta assets/ de la app Dash (Dash carga todo
   lo que hay en assets/ automáticamente, no requiere <link> manual).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Marca */
  --sikuri-navy:      #002342;
  --sikuri-turquesa:  #00C3DD;
  --sikuri-amarillo:  #FFAF2E;
  --sikuri-cafe:      #D07131;

  /* Semántico */
  --sikuri-exito:     #1E8E5A;
  --sikuri-alerta:    #C23A2B;

  /* Neutros */
  --sikuri-fondo:     #F7F9FA;
  --sikuri-panel:     #EDF0F2;
  --sikuri-borde:     #D7DCE0;
  --sikuri-texto-2:   #8B95A0;
  --sikuri-texto-1:   #3D4652;
  --sikuri-texto-0:   #101820;

  /* Tipografía */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

body {
  font-family: var(--font-body);
  color: var(--sikuri-texto-1);
  background: var(--sikuri-fondo);
}

/* Navbar / header principal */
.navbar-sikuri {
  background: var(--sikuri-navy) !important;
  font-family: var(--font-display);
}
.navbar-sikuri .navbar-brand,
.navbar-sikuri h1, .navbar-sikuri h2 {
  font-family: var(--font-display);
  font-weight: 600;
  color: #FFFFFF;
}

/* Tab activa — usa navy como color de interacción primario */
.tab-activa,
.nav-link.active,
.nav-pills .nav-link.active {
  color: var(--sikuri-navy) !important;
  border-bottom: 2px solid var(--sikuri-navy) !important;
  font-weight: 600;
}

/* Encabezado de tabla financiera — separador navy */
table.tabla-financiera th {
  border-bottom: 2px solid var(--sikuri-navy) !important;
}

/* Títulos de sección / tabs */
.titulo-seccion, h2.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--sikuri-texto-0);
}

/* Tarjetas KPI */
.kpi-card {
  background: var(--sikuri-panel);
  border-radius: 10px;
  padding: 12px 14px;
}
.kpi-card.activo {
  border: 1px solid var(--sikuri-turquesa);
}
.kpi-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--sikuri-texto-2);
  margin-bottom: 4px;
}
.kpi-valor {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 19px;
  color: var(--sikuri-texto-0);
}
.kpi-variacion-positiva {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--sikuri-exito);
}
.kpi-variacion-negativa {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--sikuri-alerta);
}

/* Tablas */
table.tabla-financiera {
  font-family: var(--font-body);
  font-size: 13px;
  border-collapse: collapse;
  width: 100%;
}
table.tabla-financiera th {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--sikuri-texto-2);
  font-weight: 500;
  text-align: right;
  padding: 6px 0;
}
table.tabla-financiera th:first-child { text-align: left; }
table.tabla-financiera td {
  border-top: 0.5px solid var(--sikuri-borde);
  padding: 7px 0;
  text-align: right;
}
table.tabla-financiera td:first-child {
  text-align: left;
  color: var(--sikuri-texto-0);
  font-family: var(--font-body);
}
table.tabla-financiera td:not(:first-child) {
  font-family: var(--font-mono);
  color: var(--sikuri-texto-1);
}
table.tabla-financiera td.numero {
  font-family: var(--font-mono);
  color: var(--sikuri-texto-1);
}
table.tabla-financiera td.variacion-positiva {
  font-family: var(--font-mono);
  color: var(--sikuri-exito);
  font-weight: 500;
}
table.tabla-financiera td.variacion-negativa {
  font-family: var(--font-mono);
  color: var(--sikuri-alerta);
  font-weight: 500;
}

@media (max-width: 767px) {
  table.tabla-financiera {
    font-size: 12px;
  }
  table.tabla-financiera th,
  table.tabla-financiera td {
    padding: 5px 6px;
  }
  table.tabla-financiera th:first-child,
  table.tabla-financiera td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #FFFFFF;
    box-shadow: 2px 0 4px rgba(0,0,0,0.06);
  }
}