/* Estilo del tablero OTD, portado de graficgold-otd/web/index.html.
 *
 * Todo va acotado a .mod-kpis porque este tablero y el de Despacho definen
 * `th`/`td` con reglas opuestas (aquí a la izquierda, allá a la derecha) y en un
 * mismo documento se pisarían.
 */

.mod-kpis .cifra{font-size:clamp(84px,14vw,210px);font-weight:600;line-height:.82;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.mod-kpis h2{padding-bottom:0}

/* ---- Los velocímetros: lo único visible sin abrir nada ---- */
.mod-kpis .velocimetros{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,3vw,52px);padding:clamp(14px,2vw,30px) 0;
  border-bottom:1px solid var(--ink);
}
.mod-kpis .velo{min-width:0;text-align:center}
.mod-kpis .velo svg{width:100%;max-width:400px;height:auto}
.mod-kpis .glosa-velo{
  font-size:clamp(12px,.9vw,15px);color:var(--meta);
  max-width:44ch;margin:6px auto 0;text-align:center;
}
.mod-kpis .glosa-velo b{color:var(--ink)}
.mod-kpis .sub-tit{
  font-size:clamp(12px,.9vw,15px);font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;border-bottom:1px solid var(--ink);
  padding-bottom:9px;margin:clamp(26px,3.2vw,48px) 0 14px;
}
.mod-kpis .cuerpo > .sub-tit:first-child{margin-top:0}

/* ---- El renglón: todo lo que se lee de un vistazo, sin scroll ---- */
.mod-kpis .renglon{
  display:flex;align-items:baseline;gap:clamp(20px,3vw,52px);flex-wrap:wrap;
  border-bottom:1px solid var(--ink);padding:clamp(14px,1.8vw,26px) 0;
}
.mod-kpis .cifra-linea{
  font-size:clamp(48px,6.5vw,96px);font-weight:600;line-height:.9;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.mod-kpis .datos{display:flex;align-items:baseline;gap:clamp(18px,2.6vw,44px);flex-wrap:wrap}
.mod-kpis .dato b{display:block;font-size:clamp(19px,1.9vw,27px);font-weight:600;
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mod-kpis .dato .lbl{display:block;margin-top:6px}
.mod-kpis .renglon .veredicto{margin-left:auto;font-size:clamp(12px,.9vw,15px)}

/* ---- Plegables ---- */
.mod-kpis .bloque{border-bottom:1px solid var(--rule)}
.mod-kpis .bloque summary{
  cursor:pointer;list-style:none;user-select:none;
  padding:clamp(13px,1.4vw,19px) 0;display:flex;align-items:center;gap:9px;
}
.mod-kpis .bloque summary::-webkit-details-marker{display:none}
.mod-kpis .bloque summary::before{content:"▸";color:var(--meta);font-size:.85em}
.mod-kpis .bloque[open] summary::before{content:"▾"}
.mod-kpis .bloque summary:hover h2{color:var(--meta)}
.mod-kpis .bloque .cuerpo{padding-bottom:clamp(20px,2.6vw,40px)}

@media (max-width:700px){
  .mod-kpis .renglon .veredicto{margin-left:0;width:100%}
  .mod-kpis .velocimetros{grid-template-columns:1fr}
}

/* ---- Mosaico de indicadores ---- */
.mod-kpis .mosaico{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--ink)}
.mod-kpis .tile{padding:clamp(14px,1.5vw,22px) 0;border-right:1px solid var(--rule)}
.mod-kpis .tile:last-child{border-right:0}
.mod-kpis .tile .n{font-size:clamp(30px,3.6vw,54px);font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mod-kpis .tile .lbl{margin-top:6px;padding-right:12px}
.mod-kpis .tile .pie{font-size:clamp(11px,.8vw,13px);color:var(--meta);margin-top:3px}

/* ---- Tacómetro ---- */
.mod-kpis .tacometro{display:flex;align-items:center;gap:clamp(20px,3.5vw,60px);flex-wrap:wrap;padding:clamp(14px,2vw,30px) 0}
.mod-kpis .tacometro svg{width:clamp(260px,32vw,440px);height:auto;flex:0 0 auto}
.mod-kpis .tacometro .glosa{flex:1 1 300px;min-width:0}
.mod-kpis .tacometro .glosa p{font-size:clamp(13px,1vw,17px)}

/* ---- Histórico ---- */
.mod-kpis .hist-wrap{overflow-x:auto}
.mod-kpis table.hist{width:100%;border-collapse:collapse;font-size:clamp(13px,1vw,16px);font-variant-numeric:tabular-nums;min-width:460px}
.mod-kpis table.hist th{text-align:right;padding:8px 10px 8px 0;border-bottom:1px solid var(--ink);font-size:clamp(10px,.72vw,12px);text-transform:uppercase;letter-spacing:.07em;font-weight:600;white-space:nowrap}
.mod-kpis table.hist th:first-child{text-align:left}
.mod-kpis table.hist td{padding:10px 10px 10px 0;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap}
.mod-kpis table.hist td:first-child{text-align:left;white-space:normal}
.mod-kpis table.hist tbody tr:last-child td{border-bottom:0}
.mod-kpis table.hist .val{font-weight:600}
.mod-kpis table.hist .sub{display:block;color:var(--meta);font-size:.78em;font-weight:400;letter-spacing:0}
.mod-kpis table.hist .vacio{color:var(--rule);padding:10px 10px 10px 0}
.mod-kpis table.hist th.curso{font-style:italic}
.mod-kpis .grupo-fila td{padding-top:20px;font-size:clamp(10px,.72vw,12px);text-transform:uppercase;letter-spacing:.07em;color:var(--meta);font-weight:600;border-bottom:1px solid var(--ink)}

/* ---- Cortes del OTD ---- */
.mod-kpis .cortes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,3vw,44px)}
.mod-kpis .corte h3{font-size:clamp(12px,.85vw,14px);font-weight:600;padding-bottom:3px}
.mod-kpis .corte .sub{color:var(--meta);font-size:clamp(11px,.82vw,13px);margin-bottom:12px}
.mod-kpis .corte .par{display:flex;gap:clamp(16px,2vw,34px);border-top:1px solid var(--ink);padding-top:12px}
.mod-kpis .corte .par > div{flex:1 1 0;min-width:0}
.mod-kpis .corte .n{font-size:clamp(32px,3.6vw,52px);font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mod-kpis .corte .pie{font-size:clamp(11px,.8vw,13px);color:var(--meta);margin-top:3px}
.mod-kpis .corte .nota{margin-top:12px;font-size:clamp(11px,.84vw,13px);color:var(--meta)}
.mod-kpis .corte .nota.pend{color:var(--alarma)}

/* ---- Descomposición del tiempo del pedido ---- */
.mod-kpis .tiempos{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(24px,3.5vw,52px)}
.mod-kpis .grupo h3{font-size:clamp(12px,.85vw,14px);font-weight:600}
.mod-kpis .grupo .sub{color:var(--meta);font-size:clamp(11px,.82vw,13px);margin-bottom:10px}
.mod-kpis .grupo .cifras{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-top:1px solid var(--ink);padding-top:12px;margin-bottom:12px}
.mod-kpis .grupo .n{font-size:clamp(34px,3.8vw,56px);font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mod-kpis .grupo .vs{font-size:clamp(12px,.9vw,15px);color:var(--meta);font-variant-numeric:tabular-nums}
.mod-kpis .grupo .veredicto{font-size:clamp(12px,.88vw,15px);margin-top:12px}
.mod-kpis .pista{width:100%}
.mod-kpis .barra{display:flex;height:clamp(28px,3.2vw,42px);border:1px solid var(--ink);max-width:100%}
.mod-kpis .barra div{min-width:2px}
.mod-kpis .seg-espera{background:var(--ink)}
.mod-kpis .seg-fab{background:var(--meta)}
.mod-kpis .seg-desp{background:var(--rule)}
.mod-kpis .leyenda{margin-top:14px;display:grid;gap:8px}
.mod-kpis .leyenda .fila{display:flex;align-items:baseline;gap:10px;font-size:clamp(13px,1vw,16px);font-variant-numeric:tabular-nums}
.mod-kpis .leyenda .sw{flex:0 0 auto;width:14px;height:14px;border:1px solid var(--ink);transform:translateY(2px)}
.mod-kpis .leyenda .nom{flex:1 1 auto}
.mod-kpis .leyenda .val{font-weight:600;white-space:nowrap}
.mod-kpis .leyenda .med{color:var(--meta);font-size:.88em;white-space:nowrap}

/* ---- Gráfico ---- */
.mod-kpis .grafico{width:100%;height:auto;display:block;overflow:visible}
.mod-kpis .grafico text{font-family:inherit;font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .mod-kpis .tile{border-right:0;border-bottom:1px solid var(--rule)}
  .mod-kpis .mosaico .tile:last-child{border-bottom:0}
}