/* Tablero de indicadores e incidentes (ADR-0011). Usa las variables de tema.css: sigue el modo claro u oscuro. */

:root {
  --g-azul: #1C7AD6;
  --g-rojo: #DC2626;
  --g-ambar: #C77700;
  --g-verde: #0F9F6E;
  --g-coral: #E0592A;
  --g-gris: #8A94A6;
}
:root[data-tema="oscuro"] {
  --g-azul: #4A9BEA;
  --g-rojo: #F87171;
  --g-ambar: #F5A524;
  --g-verde: #34D399;
  --g-coral: #FB8A5C;
  --g-gris: #8B9AB2;
}

.tablero-sub { margin-top: -4px; }

/* ---------------------------------------------------------------- periodo */
.tablero-periodo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr));
  gap: 10px;
  align-items: end;
}
.tablero-periodo .campo { margin: 0; min-width: 0; }
.tablero-periodo select { min-width: 0; width: 100%; }
@media (max-width: 599px) { .kpi-tarjeta { padding: 12px; } .tablero-periodo label { font-size: .875rem; } }

/* ---------------------------------------------------------------- tarjetas de indicador */
.kpi-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.kpi-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.kpi-tarjeta p { margin: 0; }
.kpi-tarjeta.destacada { background: var(--degradado-suave); border-color: color-mix(in srgb, var(--acento) 35%, var(--borde)); }
.kpi-nombre { display: flex; align-items: center; gap: 8px; color: var(--texto-2); font-weight: 700; font-size: .875rem; }
.kpi-punto { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--g-gris); }
.kpi-tarjeta[data-ok="si"] .kpi-punto { background: var(--verde); box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde) 20%, transparent); }
.kpi-tarjeta[data-ok="no"] .kpi-punto { background: var(--rojo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rojo) 20%, transparent); }
.kpi-tarjeta[data-ok="no"] { border-color: color-mix(in srgb, var(--rojo) 45%, var(--borde)); }
.kpi-valor { font-size: clamp(1.375rem, 5.5vw, 1.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.kpi-valor.kpi-sin { color: var(--texto-2); }
.kpi-meta { color: var(--texto-2); font-size: .8125rem; }
.kpi-cambio { color: var(--texto-2); font-size: .8125rem; font-weight: 700; }
.kpi-cambio.mejor { color: var(--verde-texto); }
.kpi-cambio.peor { color: var(--rojo-texto); }

/* ---------------------------------------------------------------- gráficas */
.kpi-graficas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 0 16px;
}
.kpi-panel { min-width: 0; }
.kpi-panel h2 { margin-bottom: 2px; }
.kpi-grafica { width: 100%; min-height: 220px; overflow: hidden; }
.kpi-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; font-size: .8125rem; color: var(--texto-2); }
.kpi-leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.kpi-muestra { width: 12px; height: 12px; border-radius: 3px; background: currentColor; }
.kpi-muestra-linea { width: 16px; height: 0; border-top: 2px dashed currentColor; }

.grafica { display: block; max-width: 100%; font-family: var(--fuente); }
.g-rejilla { stroke: var(--borde); stroke-width: 1; }
.g-eje { fill: var(--texto-2); font-size: 11px; font-weight: 600; }
.g-linea { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.g-punteada { stroke-width: 1.5; stroke-dasharray: 6 4; }
.g-punto { fill: var(--superficie); stroke: currentColor; stroke-width: 2.5; }
.g-barra { fill: currentColor; }
.g-azul { color: var(--g-azul); }
.g-rojo { color: var(--g-rojo); }
.g-ambar { color: var(--g-ambar); }
.g-verde { color: var(--g-verde); }
.g-coral { color: var(--g-coral); }
.g-gris { color: var(--g-gris); }

/* Barras horizontales (causas): la etiqueta arriba en el celular, a la izquierda en pantallas anchas. */
.barras-h { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.barras-h li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "etq valor" "pista pista"; gap: 4px 10px; align-items: center; }
.barras-h-etiqueta { grid-area: etq; font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.barras-h-valor { grid-area: valor; font-size: .875rem; font-weight: 700; color: var(--texto-2); }
.barras-h-pista { grid-area: pista; height: 12px; border-radius: 6px; background: var(--superficie-2); overflow: hidden; }
.barras-h-barra { display: block; height: 100%; border-radius: 6px; background: currentColor; }

/* ---------------------------------------------------------------- nodos, incidentes y comparar */
.kpi-modo { display: flex; flex-flow: row wrap; flex: 0 1 auto; }
.kpi-modo > button { flex: 1 1 auto; width: auto; min-height: 44px; padding: 0 14px; font-size: .875rem; }
.fila-total td { background: var(--superficie-2); font-weight: 700; }
/* Contraste AA (S-04): en modo oscuro los fondos de los estados son claros, así que el texto va oscuro. */
.badge.advertencia { background: #B45309; color: #FFFFFF; }
.badge.error { background: var(--rojo); }
:root[data-tema="oscuro"] .badge.ok { color: #052E16; }
:root[data-tema="oscuro"] .badge.error,
:root[data-tema="oscuro"] .badge:not(.ok):not(.info):not(.neutro):not(.advertencia) { color: #3B0A0A; }
:root[data-tema="oscuro"] .badge.advertencia { background: #F5A524; color: #1F1300; }
.kpi-cabecera-inc { flex-wrap: wrap; gap: 10px; }
.kpi-cabecera-inc p { margin: 0; }
.kpi-filtros { align-items: end; }
.kpi-filtros .casilla { margin-bottom: 8px; }
.kpi-tabla-inc .badge { margin-top: 4px; }
.kpi-id { text-decoration: none; }
.kpi-id:hover strong { text-decoration: underline; }
.kpi-cmp-selectores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.kpi-cmp-lado { margin: 0; }
.kpi-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.kpi-acciones > .boton { flex: 1 1 220px; }

/* ---------------------------------------------------------------- formulario del incidente */
.kpi-calculo {
  margin: 4px 0 12px;
  padding: 10px 12px;
  border-radius: var(--radio-chico);
  background: var(--superficie-2);
  font-size: .9375rem;
}
.kpi-calculo:empty { display: none; }
.kpi-servicio { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--borde); }
.texto-error { color: var(--rojo-texto); font-weight: 700; }

/* ---------------------------------------------------------------- impresión */
.solo-impresion { display: none; }
@media print {
  .solo-impresion { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .encabezado-impresion h2 { margin: 0 0 2px; font-size: 1.25rem; }
  .encabezado-impresion p { margin: 0; font-size: .8125rem; }
  .encabezado-vista, .tablero-sub, .tablero-periodo, .pestanas, .kpi-modo, .kpi-acciones, .kpi-en-curso { display: none !important; }
  .kpi-tarjeta, .kpi-panel { break-inside: avoid; box-shadow: none; }
  .kpi-graficas { grid-template-columns: 1fr 1fr; }
  .grafica { width: 100%; height: auto; }
  .kpi-todos-nodos:not([open]) { display: none; }
  /* Los colores (barras, muestras, estados) salen en el papel aunque el navegador quite los fondos. */
  .kpi-muestra, .kpi-punto, .barras-h-pista, .barras-h-barra, .badge, .kpi-tarjeta.destacada {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}
.kpi-tabla-inc th { white-space: normal; }
.form-incidente .casilla { margin: 10px 0; }
.form-incidente .fila-campos { align-items: start; }

/* Barra superior (860–1023 px): con el enlace «Tablero» son cinco opciones; se acortan para que la marca no se
   corte. En esa franja los íconos sobran: el texto basta. */
@media (min-width: 860px) and (max-width: 1023px) {
  .nav-principal { gap: 2px; margin-left: 6px; }
  .nav-principal a { padding: 0 8px; }
  .nav-principal a [data-icono] { display: none; }
}

/* ---------------------------------------------------------------- formulario: campos que no se desbordan */
.form-incidente .campo { min-width: 0; }
.form-incidente input[type="date"],
.form-incidente input[type="time"],
.form-incidente select { min-width: 0; width: 100%; }
.kpi-hora { display: flex; gap: 6px; align-items: stretch; }
.form-incidente .kpi-hora input { flex: 1 1 0; width: auto; min-width: 0; }
.kpi-ahora { flex: none; min-width: 0; min-height: 44px; padding: 0 10px; }
.form-incidente .fila-campos { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.kpi-casilla-curso { padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--ambar) 60%, var(--borde)); border-radius: var(--radio-chico); }
.kpi-cerrar-ahora { width: 100%; margin: 4px 0 8px; }
.kpi-enlace-unifilar { margin-top: 4px; }
.kpi-zona-peligro { border-color: color-mix(in srgb, var(--rojo) 35%, var(--borde)); }
.kpi-zona-peligro h2 { font-size: 1rem; }

/* ---------------------------------------------------------------- fallas en curso, resumen y nodos */
.kpi-en-curso { border: 2px solid color-mix(in srgb, var(--rojo) 55%, var(--borde)); background: color-mix(in srgb, var(--rojo-fondo) 55%, var(--superficie)); }
.kpi-en-curso h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--rojo-texto); }
.kpi-pulso { width: 12px; height: 12px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo) 60%, transparent); animation: kpi-pulso 1.6s infinite; }
@keyframes kpi-pulso { to { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) { .kpi-pulso { animation: none; } }
.kpi-lista-curso { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kpi-lista-curso a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: var(--radio-chico); background: var(--superficie); color: var(--texto); text-decoration: none; border: 1px solid var(--borde); }
.kpi-lista-curso a:hover { border-color: var(--rojo); }
.kpi-cerrar { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--rojo); color: #FFFFFF; font-weight: 800; font-size: .8125rem; }
:root[data-tema="oscuro"] .kpi-cerrar { color: #3B0A0A; }
.kpi-resumen { margin: 0 0 12px; font-size: 1rem; }
.kpi-todos-cumplen { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; color: var(--verde-texto); font-weight: 700; }
.kpi-todos-nodos { margin-top: 8px; }
.kpi-todos-nodos summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--enlace); }
.kpi-fila { cursor: pointer; }
.kpi-tabla-cmp th[scope="row"] { font-weight: 600; background: transparent; white-space: normal; }
/* En el celular cada indicador es un renglón: el nombre arriba y A, B y el cambio debajo, sin columnas cortadas. */
@media (max-width: 599px) {
  .kpi-tabla-cmp thead { display: none; }
  .kpi-tabla-cmp tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--borde); }
  .kpi-tabla-cmp tbody tr:last-child { border-bottom: 0; }
  .kpi-tabla-cmp th[scope="row"] { grid-column: 1 / -1; padding: 10px 10px 2px; border: 0; }
  .kpi-tabla-cmp td { padding: 2px 10px 10px; border: 0; text-align: left !important; white-space: normal; font-size: .875rem; }
  .kpi-tabla-cmp td::before { content: attr(data-etiqueta); display: block; color: var(--texto-2); font-size: .75rem; font-weight: 700; }
}

/* ---------------------------------------------------------------- periodo elegido en las gráficas y su ficha */
.g-banda { fill: transparent; }
.g-banda.activa { fill: color-mix(in srgb, var(--acento) 12%, transparent); stroke: color-mix(in srgb, var(--acento) 35%, transparent); stroke-width: 1; }
.g-zona { fill: transparent; cursor: pointer; }
.grafica:focus { outline: none; }
.grafica:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 8px; }
.grafica.con-seleccion .g-barra:not(.activa) { opacity: .45; }
.g-punto.activa { r: 7px; stroke-width: 3.5; fill: currentColor; }
.g-barra.activa { stroke: var(--texto); stroke-width: 1.5; }

.kpi-lectura:empty { display: none; }
.kpi-lectura {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--acento) 35%, var(--borde));
  border-radius: var(--radio-chico);
  background: color-mix(in srgb, var(--acento) 6%, var(--superficie));
}
.kpi-lectura-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 8px; }
.kpi-lectura-cab strong { font-size: 1rem; }
.kpi-lectura-cab .boton { min-height: 40px; }
.kpi-lectura-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); gap: 8px 14px; }
.kpi-lectura-dato { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.kpi-lectura-dato b { grid-column: 2; font-size: 1.5rem; font-weight: 800; line-height: 1.15; color: var(--texto); }
.kpi-lectura-dato small { grid-column: 2; color: var(--texto-2); font-size: .8125rem; font-weight: 600; }
.kpi-clave { grid-row: span 2; width: 4px; height: 34px; border-radius: 2px; background: currentColor; }
.kpi-lectura-estado { margin: 8px 0 0; font-weight: 700; font-size: .9375rem; }
.kpi-lectura-estado.cumple { color: var(--verde-texto); }
.kpi-lectura-estado.no-cumple { color: var(--rojo-texto); }
@media print { .kpi-lectura { display: none; } }