/* ===========================================================================
   MundoAutomotriz — Tablero rápido de OBD2 (clases .tab-*)

   Lo dibuja `obd2-tablero.js`, que devuelve una cadena de HTML y no toca el
   DOM. Estas clases estaban adentro del <style> de `copiloto/index.php` hasta
   la v6.9.0; se mudaron acá para que el MISMO tablero se pueda ver también en
   `ble-test.php`, que es la única página donde se lo puede probar con la ECU
   simulada y sin un auto enchufado.

   ⚠️ No define ni un color: todo sale de las variables de la página que lo
   carga (--green, --yellow, --orange, --red, --text-*, --border, --bg-surface,
   --bg-card, --mono).
   Una página que lo incluya sin definirlas lo va a mostrar sin color.
   =========================================================================== */

.tab-wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,260px);
            gap:1rem; margin-top:1rem; }
@media (max-width:820px) { .tab-wrap { grid-template-columns:1fr; } }
.tab-izq { min-width:0; }
.tab-bancos { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:.6rem; }
.tab-col { background:var(--bg-surface); border:1px solid var(--border);
           border-radius:10px; padding:.6rem; }
.tab-col-off { opacity:.45; }
.tab-col-tit { font-size:.74rem; font-weight:700; color:var(--text-2); text-align:center;
               margin-bottom:.5rem; text-transform:uppercase; letter-spacing:.05em; }
/* Los indicadores apagados quedan visibles pero al 30 %: que se vea la lista
   completa de estados posibles es parte de la lectura — igual que en un
   tablero de taller, donde uno ve qué NO está prendido. */
.tab-luz { text-align:center; font-size:.74rem; font-weight:700; letter-spacing:.03em;
           padding:.4rem .3rem; margin-bottom:.3rem; border-radius:6px;
           border:1px solid var(--border); color:var(--text-3); opacity:.3; }
.tab-luz.on { opacity:1; }
.tab-luz.on.ok     { background:rgba(0,214,143,.18);  border-color:var(--green);  color:#fff; }
.tab-luz.on.aviso  { background:rgba(255,159,67,.18); border-color:var(--orange); color:#fff; }
.tab-luz.on.falla  { background:rgba(255,71,87,.18);  border-color:var(--red);    color:#fff; }
.tab-luz.on.activo { background:rgba(26,127,232,.18); border-color:var(--blue);   color:#fff; }

.tab-caja { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
            background:var(--bg-card); border:1px solid var(--border); border-radius:6px;
            padding:.3rem .5rem; margin-top:.3rem; flex:none; min-width:8.5rem; }
.tab-caja-et { font-size:.68rem; color:var(--text-2); text-transform:uppercase; letter-spacing:.04em; }

/* ⚠️ LA LECTURA VA SIEMPRE EN BLANCO. No hay excepcion por tono.
   El STFT, el LTFT, el Total fuel trim y todo lo demas que sea un NUMERO se
   leen en blanco puro, y el veredicto lo dan el borde y el fondo de la caja.

   Habia cuatro reglas que pintaban el numero del color del tono: verde sobre
   fondo verde al 10 %, amarillo sobre amarillo al 10 %. Ese numero es lo unico
   que el mecanico vino a mirar, y a un brazo de distancia de una tablet
   apoyada en el guardabarros no se leia. El color no se perdio: sigue estando
   donde no compite con el dato.

   No volver a poner un color de texto por tono sobre .tab-caja-v. */
.tab-caja-v  { font-family:var(--mono); font-size:.82rem; color:#fff; }

.tab-fila { display:flex; align-items:center; gap:.6rem; margin-bottom:.4rem; }
.tab-rot { flex:1; min-width:0; font-size:.82rem; color:var(--text-2); }
.tab-rot span { display:block; font-size:.72rem; color:var(--text-2); }
.tab-estado { flex:1; min-width:0; border-radius:8px; padding:.45rem .7rem;
              border:1px solid var(--border); background:var(--bg-surface); }
.tab-estado strong { display:block; font-size:.82rem; }
.tab-estado span { display:block; font-size:.72rem; opacity:.8; }
.tab-estado.ok    { background:rgba(0,214,143,.20);  border-color:rgba(0,214,143,.5);  color:#fff; }
.tab-estado.aviso { background:rgba(255,159,67,.20); border-color:rgba(255,159,67,.5); color:#fff; }
.tab-estado.falla { background:rgba(255,71,87,.20);  border-color:rgba(255,71,87,.5);  color:#fff; }
.tab-estado.off   { color:var(--text-3); }

.tab-dtcs { background:var(--bg-surface); border:1px solid var(--border);
            border-radius:10px; padding:.7rem; align-self:start; }
.tab-dtc-cab { font-size:.8rem; font-weight:700; color:var(--text-1); margin-bottom:.6rem; }
.tab-dtc-grupo { margin-bottom:.8rem; }
.tab-dtc-tit { font-size:.72rem; color:var(--text-2); text-transform:uppercase;
               letter-spacing:.04em; margin-bottom:.3rem; }
.tab-dtc-tit b { color:var(--text-1); font-family:var(--mono); }
.tab-dtc-nota { font-size:.7rem; color:var(--text-2); margin-top:.25rem; line-height:1.4; }
.tab-codigos { display:flex; flex-wrap:wrap; gap:.3rem; }
.tab-cod { font-family:var(--mono); font-size:.78rem; padding:.15rem .45rem; border-radius:5px;
           border:1px solid var(--border); }
.tab-cod.falla { color:#fff; border-color:rgba(255,71,87,.6);  background:rgba(255,71,87,.20); }
.tab-cod.aviso { color:#fff; border-color:rgba(255,159,67,.6); background:rgba(255,159,67,.20); }
.tab-nd { font-size:.76rem; color:var(--text-2); font-style:italic; }

/* Tono de una caja de valor. Lo usa la diferencia de trim entre bancos, que
   desde la v1.2.0 del contrato SÍ tiene banda y por lo tanto se pinta.
   ⚠️ Sin clase de tono la caja queda neutra, que es lo correcto cuando el
   contrato no publica banda para ese número: gris = "dato, no veredicto". */
/* El tono se ve en el borde y en el fondo. El numero, en blanco: ver arriba.
   El fondo sube de 10 % a 16 % para que el tono siga siendo evidente ahora que
   ya no lo repite el texto. */
.tab-caja.ok     { border-color:rgba(0,214,143,.55);  background:rgba(0,214,143,.16); }
.tab-caja.medio  { border-color:rgba(255,217,61,.55); background:rgba(255,217,61,.16); }
.tab-caja.aviso  { border-color:rgba(255,159,67,.55); background:rgba(255,159,67,.16); }
.tab-caja.falla  { border-color:rgba(255,71,87,.55);  background:rgba(255,71,87,.16); }

/* Aviso de datos simulados. Sólo lo pinta ble-test.php: en el copiloto no hay
   ECU simulada, y si algún día la hubiera este cartel tiene que estar. */
.tab-simulado { margin-bottom:.6rem; padding:.5rem .7rem; border-radius:8px; font-size:.78rem;
                border:1px solid rgba(255,159,67,.45); background:rgba(255,159,67,.10);
                color:var(--orange); }

/* ═══ La nota al pie de una caja ═══════════════════════════════════════════
   El número grande de un trim es el promedio de la ventana y su COLOR sale
   del pico de la captura entera. Sin esta línea, un borde rojo con un +4 %
   adentro parecería un error del tablero — y es justamente el hallazgo. */
.tab-caja.con-nota { flex-wrap:wrap; }
.tab-caja-nota { flex-basis:100%; font-family:var(--mono); font-size:.64rem;
                 color:var(--text-2); text-align:right; margin-top:.1rem; }

/* ═══ Matriz de trim por condición de manejo ═══════════════════════════════
   RPM en las abscisas, carga en las ordenadas, y la carga CRECE HACIA ARRIBA
   como en cualquier mapa de motor: la fila de arriba es plena carga. */
.tab-mat-bloque { margin-top:1rem; background:var(--bg-surface); border:1px solid var(--border);
                  border-radius:10px; padding:.8rem; }
.tab-mat-cab { display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem; margin-bottom:.7rem; }
.tab-mat-cab b { font-size:.85rem; color:var(--text-1); }
.tab-mat-cab span { font-size:.72rem; color:var(--text-3); font-family:var(--mono); }
.tab-mat-bancos { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
                  gap:1rem; }
.tab-mat-uno { min-width:0; }
.tab-mat-tit { font-size:.72rem; font-weight:700; color:var(--text-2); text-transform:uppercase;
               letter-spacing:.05em; margin-bottom:.4rem; }
/* Diez columnas no entran en un teléfono: la tabla scrollea sola y la página
   nunca se va de ancho. */
.tab-mat-scroll { overflow-x:auto; }
.tab-mat { border-collapse:collapse; font-family:var(--mono); }
.tab-mat td, .tab-mat th { border:1px solid var(--border); padding:0; text-align:center; }
.tab-mat-c { width:2.5rem; height:1.9rem; font-size:.72rem; color:#fff;
             background:var(--bg-card); }
.tab-mat-c.vacia { background:transparent; }
/* Una sola muestra no es una medición: se ve, pero se ve que es floja. */
.tab-mat-c.poca { border-style:dashed; opacity:.65; }
/* Blanco tambien aca: cada celda es un Total fuel trim, el mismo numero que la
   caja de arriba. El tono lo da el fondo, que es lo que se lee de lejos. */
.tab-mat-c.ok    { background:rgba(0,214,143,.30); }
.tab-mat-c.medio { background:rgba(255,217,61,.30); }
.tab-mat-c.aviso { background:rgba(255,159,67,.32); }
.tab-mat-c.falla { background:rgba(255,71,87,.34);  font-weight:700; }
.tab-mat-y, .tab-mat-x, .tab-mat-esq {
  font-size:.62rem; font-weight:500; color:var(--text-2); background:transparent;
  border-color:transparent; padding:.15rem .3rem; }
.tab-mat-y { text-align:right; min-width:1.9rem; }
.tab-mat-esq { color:var(--text-2); }
.tab-mat-eje { font-size:.62rem; color:var(--text-2); text-align:center; margin-top:.15rem;
               letter-spacing:.08em; }

.tab-mat-leyenda { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.7rem; }
.tab-mat-lg { font-size:.66rem; font-family:var(--mono); padding:.15rem .45rem;
              border-radius:5px; border:1px solid var(--border); }
.tab-mat-lg.ok    { color:var(--green);  border-color:rgba(0,214,143,.4);  background:rgba(0,214,143,.12); }
.tab-mat-lg.medio { color:var(--yellow); border-color:rgba(255,217,61,.4); background:rgba(255,217,61,.12); }
.tab-mat-lg.aviso { color:var(--orange); border-color:rgba(255,159,67,.4); background:rgba(255,159,67,.12); }
.tab-mat-lg.falla { color:var(--red);    border-color:rgba(255,71,87,.4);  background:rgba(255,71,87,.12); }
.tab-mat-pie { font-size:.7rem; color:var(--text-2); line-height:1.5; margin-top:.6rem; }
/* Aclarador dentro de un título: dice algo del DIBUJO, no de la medición. */
.tab-mat-fino { font-weight:400; text-transform:none; letter-spacing:0;
                color:var(--text-2); font-size:.92em; }
.tab-mat-pie b { color:var(--text-2); font-family:var(--mono); }

/* ═══ MAF teórico contra MAF real, y la VE por condición ═══════════════════
   El gráfico es SVG dibujado por obd2-tablero.js: ble-test.php no carga
   Chart.js y el tablero tiene que verse igual en las dos páginas. */
.tab-maf-par { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
               gap:1rem; }
.tab-maf-uno { min-width:0; }
.tab-maf-svg { width:100%; height:auto; display:block; margin-top:.2rem;
               background:var(--bg-card); border:1px solid var(--border); border-radius:8px; }
.tab-maf-rej  { stroke:var(--border); stroke-width:1; }
.tab-maf-rot  { fill:var(--text-2); font-size:10px; font-family:var(--mono); }
.tab-maf-roty { text-anchor:end; }
.tab-maf-rotx { text-anchor:middle; }
/* ⚠️ A propósito FUERA del semáforo del tablero. El teórico va siempre por
   encima del real salvo a plena mariposa —es como está hecha la cuenta— así que
   pintarlo de rojo haría ver alarmante a un motor sano. Acá el rojo, el amarillo
   y el verde significan algo; estas dos curvas son mediciones, no veredictos. */
.tab-maf-teo  { fill:none; stroke:var(--text-2);  stroke-width:1.6; stroke-dasharray:5 3;
                stroke-linejoin:round; }
.tab-maf-real { fill:none; stroke:var(--blue-lt); stroke-width:2;
                stroke-linejoin:round; stroke-linecap:round; }
.tab-maf-eje  { font-size:.62rem; color:var(--text-2); text-align:center;
                margin-top:.15rem; letter-spacing:.06em; }
.tab-mat-lg.lg-teo  { color:var(--text-2);  border-color:var(--border); }
.tab-mat-lg.lg-teo::before  { content:'– – '; }
.tab-mat-lg.lg-real { color:var(--blue-lt); border-color:rgba(61,158,255,.4);
                      background:rgba(61,158,255,.10); }
.tab-mat-lg.lg-real::before { content:'—— '; }

/* Celda de VE sin mariposa suficiente: se ve el número, no se ve un veredicto.
   Las rayas dicen "esto no se está juzgando" sin necesidad de leer la nota. */
.tab-mat-c.no-rep {
  /* El numero va en blanco como todos: que la celda no se juzgue no es motivo
     para que el dato no se lea. Lo que dice "esto no es un veredicto" son las
     rayas y la bastardilla, no un gris que ademas lo vuelve ilegible. */
  color:#fff; font-style:italic;
  background:repeating-linear-gradient(45deg, var(--bg-card), var(--bg-card) 4px,
             rgba(255,255,255,.035) 4px, rgba(255,255,255,.035) 8px); }
.tab-mat-lg.no-rep { color:var(--text-2); border-color:var(--border);
  background:repeating-linear-gradient(45deg, transparent, transparent 4px,
             rgba(255,255,255,.05) 4px, rgba(255,255,255,.05) 8px); }

/* ⚠️ La celda MIXTA raya al revés, y la diferencia importa: "nunca abriste la
   mariposa acá" manda a acelerar, y "la abriste pero esta celda quedó a medias"
   manda a SOSTENER el acelerador en vez de pisar y soltar. Son dos consejos
   distintos, y el de la celda mixta es el que un mecánico no adivina. */
.tab-mat-c.no-rep.mixta {
  background:repeating-linear-gradient(-45deg, var(--bg-card), var(--bg-card) 3px,
             rgba(61,158,255,.10) 3px, rgba(61,158,255,.10) 7px); }
.tab-mat-lg.mixta { color:var(--text-2); border-color:var(--border);
  background:repeating-linear-gradient(-45deg, transparent, transparent 3px,
             rgba(61,158,255,.12) 3px, rgba(61,158,255,.12) 7px); }

/* ⚠️ El promedio de VE y las pastillas de la leyenda son las DOS excepciones, y
   por un motivo concreto: no tienen caja. El promedio va suelto adentro de un
   titulo y las pastillas explican QUE QUIERE DECIR cada color. En los dos casos
   el color del texto es el unico portador del dato — pintarlos de blanco no
   mejoraria el contraste, borraria la informacion. La regla es "el numero que
   ya tiene fondo de color va en blanco", no "todo va en blanco". */
.tab-ve-prom { font-family:var(--mono); }
.tab-ve-prom.ok    { color:var(--green); }
.tab-ve-prom.aviso { color:var(--orange); }
.tab-ve-prom.falla { color:var(--red); }

/* ═══ Horizontal en pantalla baja ══════════════════════════════════════════
   ⚠️ La condición es el ALTO, no el ancho. Una tablet acostada —el dispositivo
   para el que está pensada la app— tiene de sobra y no entra acá. Un teléfono
   acostado tiene 390–430 px y ahí cada rem vertical se nota.

   El ancho NO hace falta tocarlo: las dos matrices de trim miden ~440 px cada
   una y `auto-fit` ya las apila solas cuando no entran las dos. */
@media (orientation: landscape) and (max-height: 600px) {
  .tab-wrap        { gap:.7rem; margin-top:.7rem; }
  .tab-mat-bloque  { padding:.6rem; margin-top:.7rem; }
  .tab-mat-cab     { margin-bottom:.45rem; }
  .tab-col         { padding:.45rem; }
  .tab-luz         { padding:.28rem .3rem; margin-bottom:.22rem; }
  .tab-mat-c       { height:1.6rem; }
  .tab-mat-pie     { line-height:1.4; }
}

/* ═══ Pantallas anchas: que la lectura no quede desparramada ═══════════════
   En una tablet acostada la página llega a 1036 px útiles y las dos matrices
   entran juntas (~440 px cada una). El gráfico de MAF y la matriz de VE
   también. No hace falta más que dejarlas. */

/* ═══ Tablet acostada: el tablero a tamaño de taller ═══════════════════════
   Las celdas y los rótulos estaban calibrados para caber, no para leerse a un
   brazo de distancia con las manos ocupadas. Acá crecen.

   ⚠️ Las dos matrices de trim dejan de entrar lado a lado en una tablet de
   1080 cuando las celdas crecen, y se apilan solas — `auto-fit` ya lo
   resuelve. Es el intercambio correcto: en una pantalla que se mira de reojo,
   grande y apilado gana a chico y en dos columnas. En 1280 o más entran las dos.

   ⚠️ El SVG del MAF no aparece acá: tiene `height:auto` sobre su viewBox, así
   que crece solo con el ancho de su columna. Fijarle un alto lo deformaría. */
@media (min-width:1024px) {
  .tab-wrap      { grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:1.25rem; }
  .tab-mat-c     { width:3rem; height:2.3rem; font-size:.88rem; }
  .tab-mat-y, .tab-mat-x, .tab-mat-esq { font-size:.74rem; padding:.2rem .4rem; }
  .tab-mat-y     { min-width:2.4rem; }
  .tab-caja      { padding:.45rem .7rem; min-width:10rem; }
  .tab-caja-v    { font-size:1rem; }
  .tab-caja-et   { font-size:.74rem; }
  .tab-caja-nota { font-size:.72rem; }
  .tab-luz       { font-size:.82rem; padding:.5rem .4rem; }
  .tab-col       { padding:.8rem; }
  .tab-col-tit   { font-size:.82rem; }
  .tab-rot       { font-size:.92rem; }
  .tab-rot span  { font-size:.8rem; }
  .tab-estado strong { font-size:.92rem; }
  .tab-estado span   { font-size:.8rem; }
  .tab-mat-cab b { font-size:.98rem; }
  .tab-mat-cab span, .tab-mat-tit { font-size:.82rem; }
  .tab-mat-lg    { font-size:.76rem; padding:.22rem .55rem; }
  .tab-mat-pie   { font-size:.8rem; }
  .tab-mat-eje, .tab-maf-eje { font-size:.72rem; }
  .tab-dtc-cab   { font-size:.92rem; }
  .tab-dtc-tit   { font-size:.8rem; }
  .tab-dtc-nota  { font-size:.78rem; }
  .tab-cod       { font-size:.9rem; padding:.2rem .55rem; }
  .tab-nd        { font-size:.86rem; }
  .tab-maf-rot   { font-size:12px; }
}

@media (min-width:1400px) {
  .tab-mat-c     { width:3.4rem; height:2.6rem; font-size:.98rem; }
  .tab-mat-y, .tab-mat-x, .tab-mat-esq { font-size:.8rem; }
  .tab-caja-v    { font-size:1.1rem; }
  .tab-luz       { font-size:.88rem; }
  .tab-mat-pie   { font-size:.84rem; }
}