/* Cuadros de mando: «Dirección» y «Resumen» del portal. Colores de las series para claro y oscuro. */
:root {
  --c1: #0b6477;
  --c2: #d08a1e;
  --c3: #5b6fd1;
  --c4: #c2556b;
  --c5: #3f9c6b;
  --c6: #8a97a6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --c1: #43b4c7;
    --c2: #e8a64a;
    --c3: #8d9df0;
    --c4: #e07d90;
    --c5: #6cc795;
    --c6: #6f7e8f;
  }
}
:root[data-theme='dark'] {
  --c1: #43b4c7;
  --c2: #e8a64a;
  --c3: #8d9df0;
  --c4: #e07d90;
  --c5: #6cc795;
  --c6: #6f7e8f;
}

.dsh-filtros {
  gap: 8px;
}
.dsh-per {
  font-family: var(--f-display);
  font-size: 15px;
  min-width: 120px;
  text-align: center;
}
.dsh-f {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.dsh-kpis .kpi .val small + small,
.dsh-kpis .kpi .val small {
  margin-right: 8px;
}
.kpi.warn .val {
  color: var(--warn);
}
.dsh-dlt {
  color: var(--muted);
}
.dsh-dlt.buena {
  color: var(--ok);
}
.dsh-dlt.mala {
  color: var(--crit);
}
.dsh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
  align-items: stretch;
}
/* Pares de tarjetas (gráficos de barras, tablas): siempre a la misma altura y del mismo ancho. */
.dsh-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Los cuatro quesitos: 4 columnas en pantallas anchas, 2 en medianas, 1 en el móvil. */
.dsh-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dsh-grid-4 .dsh-quesito {
  flex-direction: column;
  align-items: stretch;
}
.dsh-grid-4 .dsh-anillo {
  align-self: center;
}
@media (max-width: 1280px) {
  .dsh-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dsh-grid-4 .dsh-quesito {
    flex-direction: row;
    align-items: center;
  }
}
@media (max-width: 900px) {
  .dsh-grid,
  .dsh-grid-2,
  .dsh-grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.dsh-card {
  min-width: 0;
  margin: 0;
}
/* Dentro de las rejillas la separación la pone el «gap»: sin márgenes que descuadren las filas. */
.dsh-grid > .dsh-card {
  margin: 0 !important;
}
.dsh-grid + .dsh-card,
.dsh-card + .dsh-card {
  margin-top: 12px;
}
.dsh-card.flush .sec {
  padding: 14px 16px 0;
}
.dsh-quesito {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}
.dsh-anillo {
  width: 128px;
  height: 128px;
  flex: none;
}
.dsh-c1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 19px;
  fill: var(--fg);
}
.dsh-c2 {
  font-size: 9.5px;
  fill: var(--muted);
}
.dsh-ley {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
  font-size: 13px;
}
.dsh-ley li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.dsh-ley i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}
.dsh-ley .n {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dsh-ley .v {
  font-family: var(--f-mono);
  font-size: 12px;
  white-space: nowrap;
}
.dsh-ley .p {
  color: var(--muted);
  font-size: 12px;
  width: 38px;
  text-align: right;
}
.dsh-ley-h {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 8px 0 6px;
}
.dsh-ley-h li .n {
  flex: none;
}
.dsh-barras {
  width: 100%;
  height: auto;
  display: block;
}
.dsh-datos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}
.dsh-nota {
  padding: 0 16px;
  margin: 4px 0 0;
}
.dsh-vacio {
  padding: 4px 16px 14px;
  margin: 8px 0 0;
}
.dsh-card .tbl-wrap {
  margin-top: 10px;
}
.dsh-celda {
  white-space: nowrap;
}
.dsh-mini {
  display: inline-block;
  width: 80px;
  height: 7px;
  border-radius: 4px;
  background: var(--bar-track);
  overflow: hidden;
  vertical-align: middle;
  margin-right: 8px;
}
.dsh-mini > span {
  display: block;
  height: 100%;
  background: var(--bar-fill);
  border-radius: 4px;
}
.dsh-mini.warn > span {
  background: var(--warn);
}
.dsh-mini.crit > span {
  background: var(--crit);
}
.dsh-aviso {
  margin-bottom: 12px;
}
@media (max-width: 420px) {
  .dsh-quesito {
    flex-direction: column;
    align-items: stretch;
  }
  .dsh-anillo {
    align-self: center;
  }
}