/* =============================================================
   SiGesHuapi — Design System v1.1
   Referencia estética: gastos/fondo/index.php
   Incluido globalmente desde header.php
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   1. TOKENS
   ───────────────────────────────────────────────────────────── */
:root {
  /* Paleta corporativa */
  --sg-green:        #2C6E49;
  --sg-green-dark:   #1b4332;
  --sg-green-mid:    #52b788;
  --sg-green-light:  #e8f5e9;
  --sg-green-xlight: #f0faf4;

  /* Semánticos — se mantienen en colores Bootstrap estándar
     para conservar la semántica success/warning/danger */
  --sg-success:      #198754;
  --sg-warning:      #ffc107;
  --sg-danger:       #dc3545;
  --sg-info:         #0284c7;
  --sg-muted:        #6c757d;

  /* Superficie — inspirado en gastos/fondo */
  --sg-bg:           #f4f6f9;
  --sg-card-bg:      #ffffff;
  --sg-border:       rgba(0, 0, 0, .08);

  /* Sombra de card — exacta del módulo de referencia */
  --sg-card-shadow:  0 6px 16px rgba(0, 0, 0, .08);
  --sg-card-radius:  1rem;

  /* KPI */
  --sg-kpi-border-w: 6px;

  /* Tipografía */
  --sg-font:      'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --sg-font-size: 0.875rem;
}

/* ─────────────────────────────────────────────────────────────
   2. OVERRIDE BOOTSTRAP PRIMARY → VERDE CORPORATIVO
   Cambia botones, badges activos, nav-tabs, links.
   Los colores semánticos (success/warning/danger) no se tocan.
   ───────────────────────────────────────────────────────────── */
:root {
  --bs-primary:          #2C6E49;
  --bs-primary-rgb:      44, 110, 73;
  --bs-link-color:       #2C6E49;
  --bs-link-color-rgb:   44, 110, 73;
  --bs-link-hover-color: #1b4332;
}

.btn-primary {
  --bs-btn-bg:                 #2C6E49;
  --bs-btn-border-color:       #2C6E49;
  --bs-btn-hover-bg:           #245c3d;
  --bs-btn-hover-border-color: #1e4f34;
  --bs-btn-active-bg:          #1b4332;
  --bs-btn-focus-shadow-rgb:   44, 110, 73;
}
.btn-outline-primary {
  --bs-btn-color:              #2C6E49;
  --bs-btn-border-color:       #2C6E49;
  --bs-btn-hover-bg:           #2C6E49;
  --bs-btn-hover-border-color: #2C6E49;
  --bs-btn-active-bg:          #1b4332;
}

/* ─────────────────────────────────────────────────────────────
   3. BODY Y TIPOGRAFÍA — ref: gastos/fondo
   ───────────────────────────────────────────────────────────── */
body {
  background-color:       var(--sg-bg);
  font-family:            var(--sg-font);
  font-size:              var(--sg-font-size);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; }

.small-muted {
  color:     var(--sg-muted);
  font-size: .875rem;
}

/* ─────────────────────────────────────────────────────────────
   4. CARDS — ref exacta de gastos/fondo
   ───────────────────────────────────────────────────────────── */
.card {
  border-radius: var(--sg-card-radius) !important;
  box-shadow:    var(--sg-card-shadow) !important;
  border:        0 !important;
}
.card-header {
  background:    var(--sg-card-bg);
  border-bottom: 1px solid rgba(0,0,0,.07);
  font-weight:   600;
  font-size:     .88rem;
  border-radius: var(--sg-card-radius) var(--sg-card-radius) 0 0 !important;
}
.card-footer {
  background:  var(--sg-card-bg);
  border-top:  1px solid rgba(0,0,0,.07);
  border-radius: 0 0 var(--sg-card-radius) var(--sg-card-radius) !important;
}

/* ─────────────────────────────────────────────────────────────
   5. KPI CARDS — patrón de gastos/fondo
   .kpi + modificadores de color
   ───────────────────────────────────────────────────────────── */
.kpi {
  border-left: var(--sg-kpi-border-w) solid #2C6E49;   /* verde = default */
}
.kpi.primary { border-left-color: #2C6E49;   }   /* verde corporativo */
.kpi.success { border-left-color: #198754;   }   /* verde Bootstrap */
.kpi.warn,
.kpi.warning { border-left-color: #ffc107;   }   /* ámbar */
.kpi.danger  { border-left-color: #dc3545;   }   /* rojo */
.kpi.info    { border-left-color: #0284c7;   }   /* azul */
.kpi.muted   { border-left-color: #6c757d;   }   /* gris */

/* Grid de KPIs — se usa con Bootstrap .row.g-3 */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.kpi-grid .kpi { padding: 1rem 1.25rem; }

/* ─────────────────────────────────────────────────────────────
   6. BADGES — ref: gastos/fondo
   rounded-pill + colores semánticos inline ya están en el código.
   Acá agregamos clases utilitarias para el patrón de chips de doc.
   ───────────────────────────────────────────────────────────── */

/* Doc chips — inspirado en .doc-chip de gastos/fondo */
.chip {
  display:      inline-flex;
  align-items:  center;
  gap:          .35rem;
  padding:      .22rem .65rem;
  border-radius: 6px;
  font-size:    .72rem;
  font-weight:  700;
  letter-spacing: .04em;
  white-space:  nowrap;
}
.chip-ok      { background: #dcfce7; color: #15803d; }
.chip-warn    { background: #fff8e1; color: #b45309; }
.chip-danger  { background: #fee2e2; color: #dc2626; }
.chip-info    { background: #dbeafe; color: #1d4ed8; }
.chip-purple  { background: #ede9fe; color: #7c3aed; }
.chip-muted   { background: #f1f5f9; color: #64748b; }
.chip-green   { background: #e8f5e9; color: #1b4332; }

/* ─────────────────────────────────────────────────────────────
   7. TABLAS — DataTables + Bootstrap
   ───────────────────────────────────────────────────────────── */
.table thead th {
  white-space:      nowrap;
  font-size:        .82rem;
  font-weight:      600;
  background-color: var(--sg-green);
  color:            #fff;
  border-bottom:    none;
}
.table tbody td { vertical-align: middle; font-size: .85rem; }
.table > :not(caption) > * { border-color: rgba(0,0,0,.06); }

/* DataTables controls */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: .375rem;
  border:        1px solid #dee2e6;
  font-size:     .84rem;
  padding:       .25rem .5rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: .375rem !important;
  font-size:     .82rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background:   var(--sg-green) !important;
  border-color: var(--sg-green) !important;
  color:        #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background:   var(--sg-green-light) !important;
  border-color: var(--sg-green) !important;
  color:        var(--sg-green-dark) !important;
}

/* ─────────────────────────────────────────────────────────────
   8. FORMULARIOS
   ───────────────────────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
  border-color: var(--sg-green-mid);
  box-shadow:   0 0 0 .2rem rgba(44, 110, 73, .18);
}
.form-label {
  font-weight:   600;
  font-size:     .82rem;
  margin-bottom: .25rem;
}

/* ─────────────────────────────────────────────────────────────
   9. MODALES
   ───────────────────────────────────────────────────────────── */
.modal-content {
  border:        none;
  border-radius: var(--sg-card-radius);
  box-shadow:    0 20px 60px rgba(0,0,0,.18);
}
.modal-header.bg-primary,
.modal-header.bg-success,
.modal-header.bg-danger,
.modal-header.bg-dark {
  border-radius: calc(var(--sg-card-radius) - 1px) calc(var(--sg-card-radius) - 1px) 0 0;
}
/* Header verde corporativo estándar */
.modal-header-sg {
  background:    var(--sg-green);
  color:         #fff;
  border-radius: calc(var(--sg-card-radius) - 1px) calc(var(--sg-card-radius) - 1px) 0 0;
}
.modal-header-sg .btn-close { filter: brightness(0) invert(1); }

/* ─────────────────────────────────────────────────────────────
   10. SIDEBAR 2026 — recolor acento a verde corporativo
   ───────────────────────────────────────────────────────────── */
#sidebar_siges_2026 {
  --sb-accent:        rgba(44, 110, 73, 1);
  --sb-active:        rgba(44, 110, 73, .15);
  --sb-hover:         rgba(44, 110, 73, .08);
  --sb-accent-border: rgba(44, 110, 73, .22);
}

/* ─────────────────────────────────────────────────────────────
   11. LAYOUT Y PÁGINA
   ───────────────────────────────────────────────────────────── */

/* Encabezado de página estándar */
.page-header {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             .75rem;
  margin-bottom:   1.5rem;
}
.page-header h3,
.page-header h4 {
  margin:      0;
  font-weight: 700;
}
.page-header-sub {
  color:     var(--sg-muted);
  font-size: .875rem;
  margin:    .2rem 0 0;
}

/* Contenedor principal estándar */
.page-wrap { padding: 1.5rem; }

/* Sección label */
.section-label {
  font-size:      .7rem;
  text-transform: uppercase;
  letter-spacing: .07rem;
  color:          #999;
  font-weight:    600;
  margin-bottom:  .5rem;
}

/* Panel de filtros */
.filter-card {
  background:    var(--sg-card-bg);
  border-radius: var(--sg-card-radius);
  box-shadow:    var(--sg-card-shadow);
  padding:       1rem 1.25rem;
  margin-bottom: 1.5rem;
}

/* Data blocks (como los de priorizadas en gastos/fondo) */
.data-block {
  padding:       .875rem 1rem;
  border-radius: .75rem;
  display:       flex;
  align-items:   center;
  gap:           .875rem;
  min-width:     180px;
}
.data-block-primary { background: #eef6ff; border: 1.5px solid #b6d4fe; }
.data-block-warning { background: #fffbea; border: 1.5px solid #ffe082; }
.data-block-success { background: #f0fdf4; border: 1.5px solid #bbf7d0; }
.data-block-danger  { background: #fff1f2; border: 1.5px solid #fecdd3; }
.data-block-muted   { background: #f8f9fa; border: 1.5px solid #dee2e6; }

/* ─────────────────────────────────────────────────────────────
   12. UTILITARIOS CORPORATIVOS
   ───────────────────────────────────────────────────────────── */
.text-sg        { color: var(--sg-green) !important; }
.text-sg-dark   { color: var(--sg-green-dark) !important; }
.bg-sg          { background-color: var(--sg-green) !important; color: #fff; }
.bg-sg-light    { background-color: var(--sg-green-light) !important; }
.border-sg      { border-color: var(--sg-green) !important; }

.btn-sg {
  background:    var(--sg-green);
  color:         #fff;
  border:        none;
  border-radius: .5rem;
}
.btn-sg:hover   { background: var(--sg-green-dark); color: #fff; }

/* ─────────────────────────────────────────────────────────────
   13. SCROLLBAR
   ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.30); }

/* ─────────────────────────────────────────────────────────────
   14. RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; }
}