/* Paleta de la referencia (vista.webp / vista2.webp). Ajustar con la paleta oficial. */
:root {
  --sd-azul: #3B82F6;
  --sd-marino: #0B2A5B;
  --sd-rojo: #C8102E;
  --sd-verde: #1F5F5B;
  --sd-celeste: #5AB4F5;
  --sd-amarillo: #F5C518;
  --sd-naranja: #C55A11;
  --sd-gris: #6B7280;
  --sd-fondo: #F4F6FA;
  --sd-superficie: #FFFFFF;
  --sd-borde: #DCE3EE;
  --sd-texto: #1F2937;
  --sd-radio: .6rem;
  --sd-sidebar: 15rem;
}
[data-bs-theme="dark"] {
  --sd-marino: #1E3A6E;
  --sd-gris: #9CA3AF;
  --sd-fondo: #0F172A;
  --sd-superficie: #1E293B;
  --sd-borde: #334155;
  --sd-texto: #E5E7EB;
}

body { background: var(--sd-fondo); color: var(--sd-texto); }

/* Encabezado: franja delgada, logo + título, franja ancha */
.sd-franja { background: var(--sd-azul); height: .5rem; }
.sd-franja.ancha { height: 1.4rem; }
.sd-header { background: var(--sd-superficie); padding: .75rem 1rem; }
.sd-logo { font-weight: 800; font-size: 1.6rem; letter-spacing: .02em; color: var(--sd-gris); line-height: 1; }
.sd-logo::before { content: ""; display: block; width: 4.2rem; height: .55rem; margin-bottom: .2rem;
  background: linear-gradient(90deg, var(--sd-marino) 50%, var(--sd-rojo) 50%); }
.sd-titulo { color: var(--sd-gris); font-weight: 300; font-size: 1.4rem; }

/* Menú lateral */
.sd-sidebar { width: var(--sd-sidebar); background: var(--sd-superficie); border-right: 1px solid var(--sd-borde); }
.sd-sidebar .nav-link { color: var(--sd-texto); border-radius: .4rem; padding: .55rem .75rem; min-height: 44px;
  display: flex; align-items: center; gap: .5rem; }
.sd-sidebar .nav-link.active, .sd-sidebar .nav-link:hover { background: var(--sd-azul); color: #fff; }
.sd-sidebar .titulo-seccion { font-size: .75rem; text-transform: uppercase; color: var(--sd-gris); margin: 1rem .75rem .25rem; }
@media (min-width: 992px) { .sd-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; } }

/* Paneles */
.sd-panel { background: var(--sd-superficie); border: 1px solid var(--sd-borde); border-radius: var(--sd-radio); padding: 1rem; }
.sd-panel-azul { border: 3px solid var(--sd-azul); }

/* Bloque KPI: título gris + caja de color */
.sd-kpi { display: flex; align-items: stretch; background: var(--sd-superficie); border-radius: var(--sd-radio); overflow: hidden; }
.sd-kpi .titulo { flex: 1; font-size: 1.5rem; color: var(--sd-gris); padding: .5rem .75rem; }
.sd-kpi .valor { min-width: 7.5rem; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 700; color: #fff; padding: .5rem 1rem; }
.sd-kpi .valor.rojo { background: var(--sd-rojo); }
.sd-kpi .valor.verde { background: var(--sd-verde); }

/* Sub-bloque KPI: barra marino + valor + % celeste */
.sd-subkpi { background: var(--sd-superficie); border-radius: var(--sd-radio); overflow: hidden; }
.sd-subkpi .barra { background: var(--sd-marino); color: #fff; font-weight: 700; font-size: .8rem; text-transform: uppercase;
  padding: .2rem .5rem; border-top: .45rem solid var(--sd-azul); }
.sd-subkpi .cuerpo { display: flex; }
.sd-subkpi .cuerpo > div { flex: 1; font-size: 1.6rem; text-align: center; padding: .4rem; }
.sd-subkpi .cuerpo .pct { background: var(--sd-celeste); color: #08223f; flex: 0 0 40%; }

/* Tablas estilo reporte */
.sd-tabla { font-size: .85rem; margin: 0; }
.sd-tabla thead th { background: var(--sd-marino); color: #fff; position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.sd-tabla tfoot td, .sd-tabla tr.total td { background: var(--sd-celeste); color: #08223f; font-weight: 700; }
.sd-tabla-scroll { max-height: 26rem; overflow: auto; }

/* Gráficos */
.sd-grafico { width: 100%; min-height: 18rem; }
.sd-grafico.alto { min-height: 34rem; }

/* Grilla del Dashboard de Capacitación (vista.webp): móvil 1 col → tablet 2 → escritorio 4 */
.sd-grid-cap { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kpis" "linea" "avance" "cursos" "consultas"; }
.sd-grid-cap > .a-kpis { grid-area: kpis; } .sd-grid-cap > .a-linea { grid-area: linea; }
.sd-grid-cap > .a-consultas { grid-area: consultas; }
.sd-grid-cap > .a-cursos { grid-area: cursos; } .sd-grid-cap > .a-avance { grid-area: avance; }
@media (min-width: 768px) {
  .sd-grid-cap { grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "kpis cursos" "linea linea" "avance avance" "consultas consultas"; }
}
@media (min-width: 1400px) {
  .sd-grid-cap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: "kpis linea linea consultas" "cursos avance avance consultas"; }
}

/* Barra de filtros */
.sd-filtros { background: var(--sd-superficie); border: 1px solid var(--sd-borde); border-radius: var(--sd-radio); padding: .75rem; }

.btn, .form-control, .form-select { min-height: 44px; }
.btn-sm { min-height: 36px; }
.sd-pendiente { color: var(--sd-gris); font-style: italic; }
.htmx-request .sd-cargando { opacity: .5; transition: opacity .2s; }