/* 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; } }

/* Sin franja lateral de color: el tono lo dicen el icono, el título y un
   fondo semántico suave con su borde completo. */
.dir-senal {
  display: flex; gap: 11px; padding: 13px 15px;
  background: #fff; border: 1px solid #E3E8EF; border-radius: 10px;
}
.dir-senal--alerta { background: var(--estado-peligro-fondo, #FBEFED); border-color: rgba(150, 41, 29, .22); }
.dir-senal--dato   { background: var(--estado-info-fondo, #E9F5FC); border-color: rgba(2, 104, 155, .2); }
.dir-senal--bueno  { background: var(--estado-ok-fondo, #EFF8F2); border-color: rgba(33, 117, 68, .2); }
.dir-senal__icono { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
.dir-senal--alerta .dir-senal__icono { color: var(--peligro-tinta, #96291D); }
.dir-senal--dato   .dir-senal__icono { color: var(--cyan-tinta, #02689B); }
.dir-senal--bueno  .dir-senal__icono { color: var(--ok-tinta, #217544); }
.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: var(--ok-tinta, #217544); }
.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: var(--suave); 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; }
@media (hover: hover) and (pointer: fine) {
  .dir-fila:hover .dir-barra { opacity: .78; }
}

/* ---------- filas de barras (antes en línea dentro de barras()) ---------- */
.dir-barras .dir-fila {
  display: grid; grid-template-columns: minmax(96px, 132px) minmax(0, 1fr);
  gap: 12px; align-items: center; padding: 5px 0;
}
.dir-fila__nombre {
  font-size: 13px; color: #0B1B2B; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dir-fila__dato { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* la pista se lleva el ancho sobrante; la cifra conserva el suyo */
.dir-fila__pista { flex: 1 1 auto; min-width: 0; }
.dir-barras .dir-barra { height: 20px; border-radius: 0 4px 4px 0; min-width: 3px; }
.dir-barras .dir-barra--cero { min-width: 0; }
.dir-fila__valor { flex: 0 0 auto; white-space: nowrap; }
/* El detalle sustituye al globo donde no hay cursor que flote */
.dir-fila__detalle { display: none; grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 20px; color: #475569; }
@media (hover: none), (max-width: 600px) {
  .dir-fila__detalle { display: block; }
}

.dir-tabla-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dir-comp__sub { margin: 20px 0 10px; font-size: 13.5px; color: #0B1B2B; }

/* ---------- 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%; min-width: 620px; 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: var(--cyan-tinta, #02689B); 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: var(--ok-tinta, #217544); }

/* ---------- 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: 70; 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; }

/* D07: el valor es precio de referencia, no facturación */
.dir-cifra__ref { text-transform: none; letter-spacing: 0; font-size: 11.5px; }

/* ---------- teléfono (contrato del portal §7.3) ---------- */
.dir-deslizar { display: none; }
@media (max-width: 768px) {
  .dir-cab__periodo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .dir-cab__periodo .btn { height: auto; min-height: 44px; }
  .dir-vertabla { min-height: 44px; padding: 0 4px; }
  .v-direccion select, .dir-bloque select { min-height: 44px; }
  .dir-grafico--linea svg { max-width: none; }
  .dir-deslizar { display: block; margin: -8px 0 8px; font-size: 11.5px; color: #64748B; }
}

/* ---------- teléfono (600px o menos) ---------- */
@media (max-width: 600px) {
  .dir-cab { display: block; }
  .dir-cab__periodo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dir-cab__periodo .btn {
    height: auto; min-height: 44px; padding: 6px 10px; font-size: 16px; line-height: 20px;
    white-space: normal; font-size-adjust: none;
  }
  .dir-cab__nota { font-size: 14px; line-height: 20px; max-width: none; margin-top: 12px; }

  .dir-senales { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 16px 0; }
  .dir-senal { padding: 12px; }
  .dir-senal__t { font-size: 16px; line-height: 22px; }
  .dir-senal__x { font-size: 14px; line-height: 20px; color: #3E4C5E; }

  .dir-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  .dir-cifra { padding: 12px; min-width: 0; }
  .dir-cifra__r { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .2px; font-size-adjust: none; }
  .dir-cifra__v { font-family: var(--tipo-titulo); font-size: 26px; line-height: 30px; font-weight: 500; font-size-adjust: none; overflow-wrap: anywhere; }
  .dir-cifra__d, .dir-cifra__nd { font-size: 14px; line-height: 20px; align-items: flex-start; }
  .dir-cifra__d svg { flex: 0 0 13px; margin-top: 3px; }
  .dir-cifra__ref { font-size: 12px; }

  .dir-bloque { padding: 16px; margin-bottom: 16px; }
  .dir-bloque__cab { flex-wrap: wrap; }
  .dir-bloque h3 { font-family: var(--tipo-titulo); font-size: 20px; line-height: 26px; font-weight: 600; }
  .dir-bloque__sub { font-size: 14px; line-height: 20px; margin-bottom: 12px; }
  .dir-vertabla { min-height: 44px; padding: 0 4px; font-size: 16px; font-weight: 600; }

  /* barras: nombre arriba, barra y cifra debajo */
  .dir-barras .dir-fila { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 0; }
  .dir-barras .dir-fila + .dir-fila { border-top: 1px solid #F1F5F9; }
  .dir-fila__nombre { text-align: left; white-space: normal; font-size: 16px; line-height: 22px; font-weight: 600; }
  .dir-fila__valor { min-width: 4.5em; text-align: right; font-size: 14px; }

  .dir-deslizar { margin: -4px 0 8px; font-size: 14px; line-height: 20px; color: var(--suave); }
  .dir-leyenda { font-size: 14px; }
  .dir-tabla { font-size: 14px; }

  .dir-comp { flex-direction: column; align-items: stretch; gap: 8px; }
  .dir-comp .campo { min-width: 0; width: 100%; }
  .dir-comp .campo > label { font-size: 14px; line-height: 20px; font-weight: 600; }
  .dir-comp select {
    width: 100%; height: 48px; font-size: 16px; font-size-adjust: none;
    border-color: var(--borde-control, #7B8797); border-radius: 8px;
  }
  .dir-comp__vs { padding: 0; font-size: 14px; }
  .dir-caras { grid-template-columns: minmax(0, 1fr); }
  .dir-cara__t { font-size: 16px; }
  .dir-cara__l { font-size: 14px; line-height: 20px; }

  .dir-vacio { font-size: 14px; padding: 20px 16px; }
}