/* Panel de dirección.
   El color se usa con cuentagotas: dos tonos de dato en toda la pantalla
   (#008DD4 y #E08C1B, validados juntos para daltonismo), y el resto es tinta y
   aire. Lo único que puede gritar es un número. */

.dir-cab {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  justify-content: space-between; margin-bottom: 6px;
}
.dir-cab__periodo { display: flex; gap: 6px; flex-wrap: wrap; }
.dir-cab__nota {
  font-size: 12px; color: #64748B; margin: 2px 0 0; max-width: 62ch; line-height: 1.45;
}

/* ---------- señales: lo primero que se lee ---------- */
.dir-senales { display: grid; gap: 10px; margin: 16px 0 20px; }
@media (min-width: 900px) { .dir-senales { grid-template-columns: 1fr 1fr; } }

.dir-senal {
  display: flex; gap: 11px; padding: 13px 15px;
  background: #fff; border: 1px solid #E3E8EF; border-radius: 10px;
  border-left-width: 3px;
}
.dir-senal--alerta { border-left-color: #A2242F; }
.dir-senal--dato   { border-left-color: #008DD4; }
.dir-senal--bueno  { border-left-color: #2F9E5B; }
.dir-senal__icono { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
.dir-senal--alerta .dir-senal__icono { color: #A2242F; }
.dir-senal--dato   .dir-senal__icono { color: #008DD4; }
.dir-senal--bueno  .dir-senal__icono { color: #2F9E5B; }
.dir-senal__t { font-weight: 650; font-size: 14px; color: #0B1B2B; line-height: 1.3; }
.dir-senal__x { font-size: 13px; color: #475569; margin-top: 3px; line-height: 1.5; }

/* ---------- cifras de cabecera ---------- */
.dir-cifras { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: 20px; }
@media (min-width: 860px) { .dir-cifras { grid-template-columns: repeat(4, 1fr); } }

.dir-cifra { background: #fff; border: 1px solid #E3E8EF; border-radius: 10px; padding: 15px 16px; }
.dir-cifra__r { font-size: 12px; color: #64748B; text-transform: uppercase; letter-spacing: .4px; }
.dir-cifra__v { font-size: 30px; font-weight: 680; color: #0B1B2B; line-height: 1.15; margin-top: 7px;
                font-variant-numeric: tabular-nums; }
.dir-cifra__u { font-size: 14px; font-weight: 500; color: #64748B; margin-left: 3px; }
.dir-cifra__d { font-size: 12px; margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.dir-cifra__d--sube  { color: #2F9E5B; }
.dir-cifra__d--baja  { color: #A2242F; }
.dir-cifra__d--igual { color: #64748B; }
.dir-cifra__d svg { width: 13px; height: 13px; }
.dir-cifra__nd { font-size: 12px; color: #94A3B8; margin-top: 6px; font-style: italic; }

/* ---------- bloques y gráficos ---------- */
.dir-bloque { background: #fff; border: 1px solid #E3E8EF; border-radius: 10px; padding: 18px; margin-bottom: 18px; }
.dir-bloque__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.dir-bloque h3 { margin: 0; font-size: 15px; font-weight: 650; color: #0B1B2B; }
.dir-bloque__sub { font-size: 12.5px; color: #64748B; margin: 3px 0 16px; line-height: 1.5; }

.dir-grafico { width: 100%; overflow-x: auto; }
.dir-grafico svg { display: block; }
.dir-eje { fill: #64748B; font-size: 11.5px; }
.dir-valor { fill: #0B1B2B; font-size: 12px; font-weight: 620; font-variant-numeric: tabular-nums; }
.dir-rejilla { stroke: #E3E8EF; stroke-width: 1; }
.dir-barra { transition: opacity .12s ease; }
.dir-fila:hover .dir-barra { opacity: .78; }

/* ---------- leyenda (obligatoria con dos series) ---------- */
.dir-leyenda { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 12px; font-size: 12.5px; color: #475569; }
.dir-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.dir-leyenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ---------- tabla (para lectura exacta y lectores de pantalla) ---------- */
.dir-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.dir-tabla th, .dir-tabla td { padding: 8px 10px; text-align: right; border-bottom: 1px solid #E3E8EF; }
.dir-tabla th:first-child, .dir-tabla td:first-child { text-align: left; }
.dir-tabla th { font-size: 11.5px; color: #64748B; text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
.dir-tabla td { color: #0B1B2B; font-variant-numeric: tabular-nums; }
.dir-tabla tbody tr:hover { background: #F8FAFC; }
.dir-tabla__flojo { color: #A2242F; font-weight: 600; }
.dir-tabla__sin { color: #A2242F; font-size: 11.5px; }

.dir-vertabla { background: none; border: 0; padding: 0; color: #008DD4; font-size: 12.5px; cursor: pointer; }
.dir-vertabla:hover { text-decoration: underline; }

/* ---------- comparador ---------- */
.dir-comp { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.dir-comp .campo { margin: 0; min-width: 190px; }
.dir-comp__vs { color: #64748B; font-size: 13px; padding-bottom: 9px; }

.dir-caras { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .dir-caras { grid-template-columns: 1fr 1fr; } }
.dir-cara { border: 1px solid #E3E8EF; border-radius: 10px; padding: 14px 16px; }
.dir-cara__t { font-size: 14px; font-weight: 650; color: #0B1B2B; display: flex; align-items: center; gap: 7px; }
.dir-cara__t i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.dir-cara__l { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #F1F5F9; font-size: 13px; }
.dir-cara__l:last-child { border-bottom: 0; }
.dir-cara__l b { font-variant-numeric: tabular-nums; font-weight: 620; color: #0B1B2B; }
.dir-cara__l span { color: #64748B; }
.dir-cara__gana b { color: #2F9E5B; }

/* ---------- vacíos honestos ---------- */
.dir-vacio {
  padding: 26px 20px; text-align: center; color: #64748B; font-size: 13.5px;
  background: #F8FAFC; border: 1px dashed #E3E8EF; border-radius: 10px; line-height: 1.6;
}
.dir-vacio b { color: #0B1B2B; display: block; margin-bottom: 4px; font-size: 14px; }

/* ---------- globo de datos ---------- */
.dir-globo {
  position: fixed; z-index: 60; pointer-events: none;
  background: #0B1B2B; color: #fff; border-radius: 7px; padding: 8px 11px;
  font-size: 12.5px; line-height: 1.5; box-shadow: 0 6px 18px rgba(11,27,43,.22);
  max-width: 250px;
}
.dir-globo b { font-variant-numeric: tabular-nums; }
.dir-globo em { color: #9FB6CC; font-style: normal; }