/* ---- COLORES (Jaime, 2026-10-11: modo noche) -----------------------------------------------------------------
   De día o de noche la pagina usa SIEMPRE estas variables: no poner colores sueltos en las reglas de abajo.
   El modo se elige en el menu ⚙ o con el boton 🌙 de la cabecera: claro, oscuro o «como el sistema» (lo de por
   defecto, que de noche se pone oscuro solo). LAS DOS LISTAS DE NOCHE DE ABAJO TIENEN QUE SER IGUALES: una es
   para «como el sistema» y la otra para cuando se elige oscuro a mano. */
:root {
  --fondo: #f4f5f7; --caja: #ffffff; --texto: #1d232b; --suave: #5f6b7a; --borde: #d6dbe1;
  --acento: #1c4f8a; --acento2: #d9480f; --ok: #2b8a3e; --mal: #c92a2a; --aviso: #e67700;
  /* Losetas CLARAS de día (Jaime, 2026-10-11: «¿se ve mejor con el sol?»): con luz fuerte la pantalla se lee mejor
     con el número oscuro sobre fondo claro, porque aprovecha todo el brillo del panel y los reflejos no borran el
     texto. De noche se invierten solas (abajo), que es cuando el fondo oscuro descansa la vista. */
  --loseta: #ffffff; --loseta-txt: #10161d; --loseta-borde: #c3ccd6;
  --cabecera: #1c4f8a;              /* la barra de arriba, la de bloques y la de pestañas (texto blanco encima) */
  --acento-fondo: #1c4f8a; --acento-txt: #ffffff;   /* botones y lo seleccionado: fondo de acento y su texto */
  --caja2: #f8f9fb;                 /* cajas y filas alternas, un punto distintas del fondo de caja */
  --sombra: rgba(0, 0, 0, .25);
  --marcado: rgba(28, 79, 138, .10); /* lo seleccionado o resaltado, sin tapar el texto */
  --sobre-blanco: #1c4f8a;          /* texto sobre un fondo blanco fijo (pastillas y botones de la cabecera) */
  --mal-fondo: #c92a2a;             /* rojo de fondo (con texto blanco encima); --mal es el rojo del TEXTO */
  --ok-txt: #ffffff;                /* texto sobre el verde de «conectado» */
  --aviso-txt: #a85400;             /* avisos en texto (el naranja de fondo no se lee sobre claro) */
  --sobre-aviso: #1d1300;           /* texto encima del naranja de aviso (loseta «Revisar» del modo emergencia) */
  --chip: #e9ecef; --chip-txt: #495057;   /* etiquetas pequeñas (de dónde sale cada dato) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #14181d; --caja: #1d232b; --texto: #e7ebf0; --suave: #9aa6b4; --borde: #333c47;
    --acento: #5c9ce6; --acento2: #ff8a4c; --ok: #51b96a; --mal: #ff6b6b; --aviso: #ffa94d;
    --loseta: #0b1f36; --loseta-txt: #ffffff; --loseta-borde: transparent;
    --cabecera: #16263a; --acento-fondo: #2f6db5; --acento-txt: #ffffff; --caja2: #222932; --sombra: rgba(0, 0, 0, .6); --marcado: rgba(92, 156, 230, .18);
    --sobre-blanco: #1c4f8a; --mal-fondo: #b03030; --ok-txt: #06240f; --aviso-txt: #ffb866; --sobre-aviso: #1d1300; --chip: #2b333d; --chip-txt: #c7d0da;
  }
}
:root[data-theme="dark"] {
  --fondo: #14181d; --caja: #1d232b; --texto: #e7ebf0; --suave: #9aa6b4; --borde: #333c47;
  --acento: #5c9ce6; --acento2: #ff8a4c; --ok: #51b96a; --mal: #ff6b6b; --aviso: #ffa94d;
  --loseta: #0b1f36; --loseta-txt: #ffffff; --loseta-borde: transparent;
  --cabecera: #16263a; --acento-fondo: #2f6db5; --acento-txt: #ffffff; --caja2: #222932; --sombra: rgba(0, 0, 0, .6); --marcado: rgba(92, 156, 230, .18);
  --sobre-blanco: #1c4f8a; --mal-fondo: #b03030; --ok-txt: #06240f; --aviso-txt: #ffb866; --sobre-aviso: #1d1300; --chip: #2b333d; --chip-txt: #c7d0da;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 14px "Segoe UI", Arial, sans-serif; }
.oculto { display: none !important; }
.cabecera { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto; align-items: center; gap: 4px 10px;
  padding: 6px 12px; background: var(--cabecera); color: var(--acento-txt);
  position: sticky; top: 0; z-index: 60; }   /* siempre a la vista al bajar: lo conectado se ve en todo momento (Jaime, 2026-10-07) */
.marca { display: flex; align-items: center; gap: 8px; grid-column: 1; grid-row: 1; min-width: 0; }
.logo { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: zoom-in; }
.logo:hover { border-color: transparent; background: rgba(255,255,255,.12); }
.logo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.logo img { width: 100%; height: 100%; display: block; border-radius: 0; object-fit: contain; }
.titulo { font-size: 18px; font-weight: 800; white-space: nowrap; }
.subtitulo { font-size: 11px; opacity: .85; white-space: nowrap; }
.cab-derecha { display: flex; grid-column: 2; grid-row: 1; justify-content: flex-end; gap: 6px; align-items: center; flex-wrap: nowrap; min-width: 0; }
.cab-derecha label { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.cab-derecha select { padding: 3px; }
.cab-derecha .cab-btn { min-height: 30px; padding: 4px 8px; font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
.cab-derecha > *, .cab-derecha .resumen-cab { min-width: 0; }
.pastilla { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; }
.pastilla.apagada { background: #868e96; }
.pastilla.encendida { background: var(--ok); }
.pastilla.simulacion { background: var(--aviso); }
/* la barra de bloques se desplaza con el dedo si no caben todos (radio del coche, móvil): nunca empuja la página */
.secciones { display: flex; flex-wrap: nowrap; gap: 4px; padding: 4px 12px 0; background: var(--cabecera); border-bottom: 1px solid rgba(255,255,255,.25); overflow-x: auto; scrollbar-width: none; }
.secciones::-webkit-scrollbar { height: 0; }
.secciones button { display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,.12); color: #fff; border: 0; padding: 5px 8px; font-size: 13px; font-weight: 700; border-radius: 4px 4px 0 0; cursor: pointer; white-space: nowrap; }
.secciones button.activa { background: #fff; color: var(--sobre-blanco); }
/* «Acerca de»: no es un bloque (no se queda marcado), va al final y algo más discreto */
.secciones button.seccion-acerca { margin-left: auto; background: rgba(255,255,255,.07); font-weight: 600; }
.secciones button.seccion-acerca:hover { background: rgba(255,255,255,.22); }
.seccion-icono { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; }
@media (max-width: 1100px) { .subtitulo { display: none; } }
@media (max-width: 850px) {
  .cabecera { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .marca { grid-column: 1; grid-row: 1; }
  .cab-derecha { grid-column: 1; grid-row: 2; flex-wrap: wrap; justify-content: flex-start; }
  .secciones { justify-content: flex-start; overflow-x: auto; }
}
.pestanas button[hidden] { display: none; }
.pestanas { display: flex; gap: 2px; padding: 0 16px; background: var(--cabecera); overflow-x: auto; }
.pestanas button { background: transparent; color: #dbe6f3; border: 0; padding: 10px 16px; font-size: 14px; font-weight: 600;
  border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; }
.pestanas button.activa { background: var(--fondo); color: var(--texto); }
main { padding: 14px 16px 12px; flex: 1 0 auto; }   /* crece: el pie queda siempre abajo de la ventana (Jaime, 2026-10-11) */
body { display: flex; flex-direction: column; min-height: 100vh; }   /* pie pegajoso */   /* poco hueco hasta el pie de pagina (Jaime, 2026-10-06) */
.panel { display: none; }
.panel.activo { display: block; }
.barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.sep { width: 1px; height: 24px; background: var(--borde); margin: 0 4px; }
button { padding: 7px 12px; border: 1px solid var(--borde); border-radius: 6px; background: var(--caja); color: var(--texto);
  cursor: pointer; font-size: 13px; font-weight: 600; }
button:hover { border-color: var(--acento); }
button:disabled { opacity: .45; cursor: default; }
button.primario { background: var(--acento-fondo); color: var(--acento-txt); border-color: var(--acento-fondo); }
/* conexión SIN hacer: naranja que llama la atención, igual en todas las secciones (Jaime, 2026-10-10: el gris no se veía); conectado: verde */
:root { --sin-conectar: #e8590c; }
button.boton-conexion { background: var(--sin-conectar); color: #fff; border-color: var(--sin-conectar); font-weight: 700; }
button.boton-conexion.conectado { background: var(--ok); color: #fff; border-color: var(--ok); }
button.boton-conexion:hover:not(:disabled) { filter: brightness(.92); border-color: currentColor; }
button.peligro { color: var(--mal); }
button.grabar { color: #fff; background: var(--mal-fondo); border-color: var(--mal-fondo); }
button.grabar.activo { animation: latido 1s infinite; }
@keyframes latido { 50% { opacity: .55; } }
.estado { color: var(--suave); font-size: 12px; }
.estado.ok { color: var(--ok); font-weight: 700; font-size: 13px; }
/* min-width: 0 en cajas, columnas, fieldsets, etiquetas y campos: sin eso el navegador no deja encoger
   nada por debajo de su contenido y los campos se montan unos sobre otros en ventanas estrechas */
.caja { background: var(--caja); border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; min-width: 0; }
.caja h3 { margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dos-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; }
.dos-col > * { min-width: 0; }
@media (max-width: 900px) { .dos-col { grid-template-columns: 1fr; } }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th, .tabla td { padding: 5px 8px; border-bottom: 1px solid var(--borde); text-align: left; white-space: nowrap; }
.tabla th { color: var(--suave); font-weight: 600; position: sticky; top: 0; background: var(--caja); }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover { background: rgba(28, 79, 138, .08); }
.tabla tr.sel { background: rgba(28, 79, 138, .16); }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* lista de coches: el texto largo (modelo, dueno) se parte en dos lineas en vez de salirse de la caja */
#tablaCoches th, #tablaCoches td { white-space: normal; }
#tablaCoches td:nth-child(1), #tablaCoches td:nth-child(2) { white-space: nowrap; }
.desplazable { max-height: 360px; overflow: auto; }
input[type=text], input[type=search], select, textarea { padding: 5px 7px; border: 1px solid var(--borde); border-radius: 5px;
  background: var(--caja); color: var(--texto); font: inherit; }
input[type=search] { width: 100%; margin-bottom: 8px; }
.ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 12px; }
.ficha fieldset { grid-column: 1 / -1; border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; margin: 0; min-width: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; }
.ficha legend { font-weight: 700; color: var(--acento); padding: 0 4px; }
.ficha label, .rejilla label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--suave); min-width: 0; }
.ficha input, .ficha textarea, .rejilla input, .rejilla select { color: var(--texto); font-size: 13px; width: 100%; min-width: 0; }
.ficha input.mal { border-color: var(--mal); background: rgba(201, 42, 42, .07); }
.ficha .ancho { grid-column: 1 / -1; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; }
.rejilla small { color: var(--suave); font-size: 11px; }
.en-linea { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 400; min-width: 0; max-width: 100%; }
/* en pantallas estrechas (movil) un selector con textos largos no puede ser mas ancho que su barra: que encoja */
.barra select, .en-linea select { min-width: 0; max-width: 100%; }
.en-linea select { flex: 0 1 auto; }
.chk { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; }
.resalte { color: var(--acento2); }
.nota { color: var(--suave); font-size: 12px; margin: 6px 0 0; }
.derivados { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; font-size: 13px; }
.derivados div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted var(--borde); padding: 2px 0; }
.derivados span:first-child { color: var(--suave); }
.derivados b.mal { color: var(--mal); }
.derivados .grupo { grid-column: 1 / -1; border: 0; font-weight: 700; color: var(--acento); padding-top: 6px; }
.losetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.loseta { background: var(--loseta); color: var(--loseta-txt); border: 1px solid var(--loseta-borde); border-radius: 10px; padding: 10px 12px; }
.loseta .et { font-size: 12px; opacity: .75; }
.loseta .valor { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loseta .valor small { font-size: 40%; font-weight: 600; opacity: .85; }
body.tablet .loseta .et { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loseta .valor.pequeno { font-size: 18px; }
.loseta .sub { font-size: 12px; opacity: .8; }
.loseta .mm { font-size: 11px; opacity: .75; min-height: 13px; font-variant-numeric: tabular-nums; }   /* min – max desde que empezo la grabacion */
.loseta .et small { opacity: .8; }
/* valor de si/no como semaforo (Jaime, 2026-10-04, como MemsMapper): rojo = 0, verde = 1, gris = sin dato, y la palabra que toca al lado */
/* (2026-10-14) aqui habia un .semaforo «bolita» de .8em con .on/.off que ya no usaba nadie y le robaba el ancho a la etiqueta de calidad
   («BUENA» metida en 20 px): el comprobador de texto de solapes.js lo caso. El .semaforo bueno es la etiqueta de abajo (ok/dudosa/mala). */
.estado-b { font-size: 55%; font-weight: 700; vertical-align: middle; }
.loseta.manija { cursor: grab; }
/* dialogo «Losetas…»: filas con casilla, etiqueta y flechas; las marcadas arriba, en su orden */
.fila-loseta { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-bottom: 1px solid var(--borde); }
.fila-loseta label { flex: 1 1 auto; display: flex; gap: 8px; align-items: center; cursor: pointer; min-width: 0; }
.fila-loseta label small { color: var(--suave); }
.fila-loseta button { padding: 2px 8px; min-height: 0; }
.fila-loseta.arrastrando { opacity: .4; }
.fila-loseta.grupo { background: var(--fondo); font-weight: 700; color: var(--acento); }
/* alto de las graficas en funcion de la ventana (Jaime: mas altas, para leerlas mejor), con tope por abajo y por arriba */
.grafica-alta { position: relative; height: clamp(300px, 58vh, 1000px); }
.grafica-media { position: relative; height: clamp(220px, 42vh, 760px); }
.avisos div { padding: 6px 10px; border-radius: 6px; margin-top: 6px; font-size: 13px; }
.avisos .aviso { background: rgba(230, 119, 0, .14); color: var(--aviso); }
.avisos .error { background: rgba(201, 42, 42, .12); color: var(--mal); }
.avisos .info { background: rgba(28, 79, 138, .10); color: var(--acento); }
.texto { line-height: 1.5; max-width: 980px; }
.dialogo-logo { width: min(90vw, 760px); text-align: center; }
/* logo en grande con el ratón encima (logoGrande en configuracion.js): flota junto al icono, sin tapar clics */
.logo-grande { position: fixed; z-index: 2000; pointer-events: none; background: var(--caja); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35); padding: 12px; }
.logo-grande > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dialogo-logo > img { display: block; width: auto; max-width: min(80vw, 640px); max-height: 70vh; margin: 0 auto 12px; object-fit: contain; }
.dialogo-logo form { display: flex; justify-content: center; }
/* ---- ventana «el cable de esta conexión» (botón 🔌 de cada cabecera) ---- */
.cab-resumen { margin: 0 0 10px; line-height: 1.5; }
.cab-dibujo { display: flex; justify-content: center; margin: 6px 0 12px; }
.cab-svg { width: min(100%, 420px); height: auto; }
.cab-vista { margin: -6px 0 12px; text-align: center; font-size: 12.5px; color: var(--suave); line-height: 1.45; }
.cab-tabla td:first-child { white-space: nowrap; font-weight: 700; }
.cab-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.cab-pasos { margin: 4px 0 10px; padding-left: 20px; line-height: 1.5; }
.cab-pasos li { margin: 3px 0; }
.cab-montaje { margin: 4px 0 10px; padding: 8px 10px; border-left: 3px solid var(--acento); background: var(--marcado); border-radius: 0 6px 6px 0; line-height: 1.5; }
.cab-aviso { margin: 6px 0; padding: 8px 10px; border-radius: 6px; line-height: 1.5; }
.cab-peligro { background: rgba(201, 42, 42, .12); border-left: 3px solid var(--mal); }
.cab-ojo { background: rgba(230, 119, 0, .12); border-left: 3px solid var(--aviso); }
.cab-info { background: var(--caja2); border-left: 3px solid var(--borde); }
.cab-enlaces { margin: 4px 0 0; padding-left: 20px; line-height: 1.6; }
/* ---- ventana «Acerca de ClassicMiniSuite» (menu ⚙ y pie): logo grande, autor y agradecimientos ---- */
.dialogo-acerca { width: min(94vw, 620px); }
.acerca-cuerpo { text-align: center; max-height: 72vh; overflow: auto; }
/* el logo a un lado y la ficha al otro: asi caben los agradecimientos sin tener que bajar (pantallas de 700 px de alto) */
.acerca-ficha { display: flex; align-items: center; justify-content: center; gap: 18px; text-align: left; }
.acerca-id { min-width: 0; }
.acerca-logo { display: block; margin: 6px 0; padding: 0; border: 0; background: none; cursor: zoom-in; flex: none; }
.acerca-logo > img { display: block; width: 100%; height: auto; max-width: min(42vw, 300px); object-fit: contain; }
.acerca-nombre { font-size: 22px; font-weight: 800; color: var(--acento); }
.acerca-sub { font-size: 13px; color: var(--suave); }
.acerca-version { font-size: 13px; margin-top: 4px; }
.acerca-datos { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px;
  text-align: left; margin: 12px 0 0; font-size: 14px; }
.acerca-datos dt { font-weight: 700; color: var(--suave); }
.acerca-datos dd { margin: 0; overflow-wrap: anywhere; }
.acerca-cuerpo h4 { margin: 18px 0 4px; font-size: 15px; color: var(--acento); }
.acerca-gracias { display: grid; gap: 10px; text-align: left; margin-top: 8px; }
.acerca-persona { border: 1px solid var(--borde); border-radius: 10px; padding: 9px 12px; background: var(--caja); }
.acerca-persona-nombre { font-weight: 700; }
.acerca-persona .nota { margin: 3px 0 0; }
@media (max-width: 560px) { .acerca-ficha { flex-direction: column; gap: 6px; text-align: center; }
  .acerca-logo > img { max-width: 70vw; } .acerca-datos { grid-template-columns: 1fr; text-align: center; }
  .acerca-datos dd { margin-bottom: 6px; } }
/* el pie es un boton: abre «Acerca de» */
.pie[role="button"] { cursor: pointer; }
.pie[role="button"]:hover { color: var(--acento); }
/* entrada «Acerca de…» del menu ⚙, con el aspecto de las demas lineas del menu */
.menu-accion { text-align: left; border: 0; background: none; padding: 4px 0; font-size: 14px; color: var(--acento);
  text-decoration: underline; cursor: pointer; }
.texto h2 { font-size: 17px; margin: 14px 0 6px; color: var(--acento); }
.plano { max-width: 100%; height: auto; border: 1px solid var(--borde); border-radius: 6px; }
.pie { padding: 10px 16px; font-size: 12px; color: var(--suave); border-top: 1px solid var(--borde); }
@media (max-width: 600px) { main { padding: 10px; } .loseta .valor { font-size: 24px; } }

/* ---- explicaciones (ⓘ) ---- */
.tip { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 5px; border-radius: 50%;
  background: var(--acento-fondo); color: var(--acento-txt); font: 700 11px/1 Georgia, serif; cursor: help; vertical-align: middle; flex: none; }
.tip::before { content: "i"; }
.tip:focus { outline: 2px solid var(--acento2); }
.cabecera .tip { background: #fff; color: var(--sobre-blanco); }
.burbuja { position: absolute; z-index: 75; background: #1d232b; color: #fff; padding: 9px 12px; border-radius: 8px; font-size: 13px;
  line-height: 1.45; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.burbuja b { color: #ffd43b; }
/* ---- guia ---- */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pasos li { border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; background: var(--caja); }
.pasos li.hecho { border-color: var(--ok); background: rgba(43,138,62,.07); }
.paso-cab { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.paso-cab .marca { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--acento-fondo); color: var(--acento-txt); font-weight: 800; flex: none; }
.pasos li.hecho .marca { background: var(--ok); }
.paso-txt { margin: 6px 0 8px 36px; color: var(--suave); font-size: 13px; line-height: 1.45; }
.pasos .barra { margin: 0 0 0 36px; }
.opc { color: var(--suave); font-weight: 400; }
/* ---- calidad ---- */
.semaforo { padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 800; color: #fff; }
.semaforo.ok { background: var(--ok); color: var(--ok-txt); } .semaforo.dudosa { background: var(--aviso); } .semaforo.mala { background: var(--mal-fondo); }
.motivos { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.motivos li.mala { color: var(--mal); } .motivos li.dudosa { color: var(--aviso); } .motivos li.info, .motivos li.ok { color: var(--suave); }
td.cal-mala { color: var(--mal); font-weight: 700; } td.cal-dudosa { color: var(--aviso); font-weight: 700; } td.cal-ok { color: var(--ok); font-weight: 700; }
/* ---- varios ---- */
.loseta.alarma { background: var(--mal-fondo); color: #fff; border-color: var(--mal-fondo); animation: latido .8s infinite; }   /* en rojo, el número siempre blanco */
/* MODO EMERGENCIA, estado «Revisar» (sospecha): hay avería del sensor O el valor por defecto, pero no las dos.
   En ÁMBAR y SIN latido: el latido se reserva para la emergencia de verdad, que si parpadea todo no avisa nada.
   Faltaba: app.js le ponía la clase desde el 2026-10-11 y el CSS no la tenía, así que «Revisar» salía en gris
   como si no pasara nada (encontrado el 2026-10-13 escribiendo pruebas/prueba_limp.js). */
.loseta.limp-ojo { background: var(--aviso); color: var(--sobre-aviso); border-color: var(--aviso); font-weight: 700; }
.loseta.limp-ojo .valor, .loseta.limp-ojo .et { color: var(--sobre-aviso); }
.loseta.pequena .valor { font-size: 20px; }
.ancho-total { width: 100%; font-family: Consolas, monospace; font-size: 13px; }
.mapa-calor td, .mapa-calor th { text-align: center; padding: 4px 6px; }
/* volante motor y embrague: desplegable + casilla del % o de k */
.volante { display: flex; gap: 6px; min-width: 0; }
.volante select { flex: 1 1 auto; min-width: 0; }
.ficha .volante input { width: 96px; flex: none; }
/* ---- desplegable con texto libre (campo + boton ▾ que enseña SIEMPRE todos los valores) ---- */
.combo { position: relative; display: flex; min-width: 0; }
.combo input { padding-right: 26px; }
.combo-btn { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 24px; padding: 0; border: 0; border-radius: 0 4px 4px 0;
  background: transparent; color: var(--suave); font-size: 10px; cursor: pointer; }
.combo-btn:hover { color: var(--acento); background: rgba(28, 79, 138, .08); }
.combo-btn:disabled { opacity: .4; cursor: not-allowed; background: transparent; }
.lista-combo { position: absolute; z-index: 65; background: var(--caja); color: var(--texto); border: 1px solid var(--borde); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2); max-height: 280px; overflow: auto; max-width: calc(100vw - 24px); padding: 4px 0; }
.lista-combo div { padding: 5px 10px; cursor: pointer; display: flex; gap: 12px; justify-content: space-between; align-items: baseline; font-size: 13px; }
.lista-combo div:hover, .lista-combo div.sel { background: rgba(28, 79, 138, .12); }
.lista-combo div.actual b { color: var(--acento); }
.lista-combo b { font-weight: 600; white-space: nowrap; }
.lista-combo small { color: var(--suave); font-size: 12px; text-align: right; }
#notaSistema { color: var(--suave); }
.rejilla label.chk { flex-direction: row; align-items: center; gap: 6px; color: var(--texto); font-size: 13px; }
.dialogo { border: 1px solid var(--borde); border-radius: 10px; padding: 14px 16px; background: var(--caja); color: var(--texto);
  width: min(760px, 94vw); }
.dialogo::backdrop { background: rgba(0,0,0,.35); }
.dialogo .desplazable { max-height: 55vh; }
.dialogo > .barra:last-child { justify-content: flex-end; margin: 10px 0 0; }
.dialogo > form[method="dialog"]:last-child { display: flex; justify-content: flex-end; margin-top: 10px; }
/* Jaime, 2026-10-14: «por convención todos los botones de cerrar al fondo a la derecha… y siempre visibles sin ir al final de la
   ventana». El pie se queda PEGADO abajo del diálogo mientras el contenido se desplaza (el <dialog> es su propio desplazable: el
   navegador le pone max-height y overflow). Fondo opaco para que no se transparente el contenido por debajo. */
.dialogo > form[method="dialog"]:last-child, .dialogo > .barra:last-child, .dialogo > .def-pie:last-child {
  position: sticky; bottom: 0; z-index: 2; background: var(--caja); padding: 8px 0 14px; margin-bottom: -14px; }
.mm-ventana > form[method="dialog"]:last-child, .mm-ventana > .barra:last-child, .mm-ventana > .def-pie:last-child { padding: 8px 12px; margin-bottom: 0; border-top: 1px solid var(--borde); }
.banner-carpeta { background: #fff3bf; color: #5c3c00; padding: 9px 16px; font-weight: 600; font-size: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#pastillaCarpeta { cursor: pointer; }
.banner { background: var(--mal-fondo); color: #fff; padding: 9px 16px; font-weight: 700; font-size: 14px; }
.aviso-suave { color: var(--aviso-txt); font-weight: 600; margin: -4px 0 10px; }
.aviso-suave:empty { display: none; }
/* .doble ocupa dos columnas solo si la rejilla tiene al menos dos (si no, se saldria de la caja) */
.rejilla { container-type: inline-size; }
.rejilla label.doble { grid-column: span 2; }
@container (max-width: 351px) { .rejilla label.doble { grid-column: auto; } }
.rejilla label > span:first-child, .ficha label > span:first-child { display: flex; align-items: center; }
details.avanzado { margin-top: 10px; border-top: 1px dashed var(--borde); padding-top: 8px; }
details.avanzado > summary, details.plegable > summary { cursor: pointer; font-weight: 700; color: var(--acento); display: flex; align-items: center; gap: 4px; padding: 4px 0; }
details.avanzado > .rejilla { margin-top: 8px; }
details.plegable { background: var(--caja); border: 1px solid var(--borde); border-radius: 10px; padding: 8px 14px; margin-bottom: 12px; }
details.plegable[open] { padding-bottom: 2px; }
details.plegable .caja { border: 0; padding: 8px 0; }
.pestanas { scrollbar-width: thin; scrollbar-color: #9cb6d6 transparent; }
input:disabled, select:disabled, textarea:disabled { opacity: .55; background: var(--fondo); cursor: not-allowed; }
.barra .chk { white-space: nowrap; }
#listaSalidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
#listaSalidas .salida { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }

/* ---- pantallas tactiles: botones y campos mas altos para el dedo ---- */
@media (pointer: coarse) {
  button { min-height: 42px; padding: 8px 14px; font-size: 15px; }
  input[type=text], input[type=search], select, textarea { min-height: 40px; font-size: 16px; }   /* 16px: Android no hace zoom al tocar */
  .tip { width: 22px; height: 22px; font-size: 13px; }
  .pestanas button { padding: 12px 18px; font-size: 15px; }
  .tabla th, .tabla td { padding: 8px 8px; }
}

/* ---- botones de la cabecera (Basico/Avanzado, Modo tablet, A- A+, ⛶, ⚙) ---- */
.cab-btn { padding: 4px 10px; font-size: 13px; border-radius: 12px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); min-height: 0; }
.cab-btn.activo { background: #fff; color: var(--sobre-blanco); }   /* sobre blanco, azul oscuro siempre (de noche el acento es claro) */
#btnLetraMenos, #btnLetraMas { font-weight: 800; padding: 4px 8px; }   /* sin margen negativo: en un movil A− cae al principio de fila y se saldria de la cabecera */
.solo-tablet { display: none; }
body.tablet .solo-tablet { display: block; }

/* ---- modo tablet: pantallas tactiles (radio del coche, tablet, movil Android/iOS) ----
   TODO se mide en rem, y 1 rem sale del ANCHO Y ALTO de la ventana: asi la letra, las losetas, los botones y las graficas
   se ajustan solos a cada pantalla y orientacion (la radio de 7" a 1024x444 da ~16 px; un movil vertical ~15; una tablet
   ~22). --escala es el A- / A+ de la cabecera (lo pone app.js). Sin zoom: el zoom multiplica tambien las medidas vw/vh y
   descoloca todo. Lo que SE VE no lo decide este modo sino Basico/Avanzado (.avz). Si no cabe en alto, se baja (scroll):
   losetas grandes y la grafica debajo (decision de Jaime, 2026-10-04). */
html.tablet { font-size: calc(clamp(14px, 1.1vw + 1.1vh, 22px) * var(--escala, 1)); }
body.tablet { font-size: 1rem; }
body.tablet .cabecera { padding: .25rem .75rem; gap: .25rem .5rem; }
body.tablet .cab-derecha { gap: .4rem; }
body.tablet .cabecera label, body.tablet .pastilla { font-size: .875rem; }
body.tablet .pastilla { padding: .25rem .6rem; }
body.tablet .cab-btn { font-size: .875rem; padding: .3rem .7rem; min-height: 2.2rem; }
body.tablet #btnLetraMenos, body.tablet #btnLetraMas { padding: .3rem .5rem; }
body.tablet .logo { width: 2.1rem; height: 2.1rem; font-size: .95rem; border-radius: .6rem; }
body.tablet .titulo { font-size: 1.125rem; }
body.tablet .subtitulo { display: none; }
body.tablet .pestanas { flex-wrap: wrap; overflow-x: visible; row-gap: 0; padding: 0 .75rem; }   /* en dos filas: nada que arrastrar de lado */
body.tablet .pestanas button { padding: .35rem .75rem; font-size: .95rem; min-height: 2.2rem; }
body.tablet button { font-size: .95rem; min-height: 2.6rem; padding: .4rem .9rem; }
body.tablet input[type=text], body.tablet input[type=search], body.tablet select, body.tablet textarea { font-size: max(16px, 1.05rem); min-height: 2.6rem; }
body.tablet .caja { padding: .7rem .9rem; margin-bottom: .4rem; border-radius: .6rem; }
body.tablet .caja h3 { font-size: 1.2rem; }
body.tablet .ficha label, body.tablet .rejilla label, body.tablet .nota, body.tablet .tabla, body.tablet .derivados { font-size: .95rem; }
body.tablet .en-linea, body.tablet .chk { font-size: 1rem; }
body.tablet .tip { width: 1.5rem; height: 1.5rem; font-size: .875rem; }
body.tablet .estado { font-size: .875rem; }
body.tablet main { padding: .4rem .6rem 1rem; }
body.tablet .barra { gap: .25rem .6rem; margin-bottom: .4rem; }
body.tablet .barra button { min-height: 2.75rem; font-size: 1.05rem; padding: .4rem .9rem; }
body.tablet details.plegable { margin-bottom: .4rem; padding: .15rem .75rem; }
body.tablet details.plegable > summary { padding: .15rem 0; }
body.tablet #ayudaGrabar { margin: 0 0 .25rem; }
body.tablet #btnGrabar { min-width: 9rem; font-size: 1.25rem; }
body.tablet .losetas { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .4rem; margin-bottom: .5rem; }
body.tablet .loseta { padding: .4rem .6rem; border-radius: .6rem; }
body.tablet .loseta .et { font-size: .875rem; }
body.tablet .loseta .valor { font-size: 2.5rem; line-height: 1.05; }
body.tablet .loseta .valor small { font-size: 34%; }
body.tablet #lKmhTt small { display: none; }   /* el ± no cabe con letra grande; se ve en modo normal */
body.tablet .loseta .valor.pequeno { font-size: 1.6rem; line-height: 1.2; padding-top: .35rem; }
body.tablet .menu { font-size: 1rem; min-width: 16rem; top: 2.4rem; }
body.tablet .menu label { font-size: 1rem; }
/* ---- ampliar con doble clic: la grafica o la loseta se MUEVE a esta capa (sigue siendo el mismo elemento, asi sigue
   actualizandose) y al cerrar vuelve a su sitio. manipulation: sin zoom del navegador al doble toque y sin retardo del toque ---- */
html { touch-action: manipulation; }
.grafica-alta, .grafica-media, .loseta { cursor: zoom-in; }
.capa-ampliar { position: fixed; inset: 0; z-index: 80; background: var(--fondo); display: flex; flex-direction: column; padding: 8px; }
.capa-ampliar .capa-cerrar { position: absolute; top: 8px; right: 8px; z-index: 81; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; padding: 0; }
.capa-ampliar > .grafica-alta, .capa-ampliar > .grafica-media { flex: 1 1 auto; height: auto !important; min-height: 0; margin: 0; cursor: zoom-out; }
.capa-ampliar > .loseta { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; cursor: zoom-out; margin: 0; }
.capa-ampliar > .loseta .et { font-size: clamp(16px, 4vmin, 40px); white-space: normal; }
.capa-ampliar > .loseta .valor { font-size: clamp(40px, 22vmin, 400px); line-height: 1.05; overflow: visible; white-space: nowrap; }
.capa-ampliar > .loseta .valor.pequeno { font-size: clamp(28px, 12vmin, 200px); }
.capa-ampliar > .loseta .valor small { font-size: 35%; }
.capa-ampliar > .loseta .sub { font-size: clamp(14px, 3vmin, 30px); }
/* modo CUADRO: la rejilla entera a pantalla completa; --cols/--filas los pone app.js (ajustarCuadro) segun cuantas losetas hay
   y la proporcion de la pantalla; cada loseta es un contenedor y su numero se escala a la celda (cqmin) */
.capa-ampliar.cuadro { padding: 6px; }
.capa-ampliar.cuadro > .losetas { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-template-rows: repeat(var(--filas, 3), minmax(0, 1fr)); gap: 6px; margin: 0; cursor: zoom-out; }
.capa-ampliar.cuadro > .losetas .loseta { container-type: size; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 0; padding: 2cqmin 3cqmin; }
.capa-ampliar.cuadro > .losetas .loseta .et { font-size: clamp(11px, min(9cqh, 7cqw), 44px); white-space: normal; line-height: 1.1; }
.capa-ampliar.cuadro > .losetas .loseta .valor { font-size: clamp(16px, min(44cqh, 24cqw), 320px); line-height: 1.05; overflow: visible; }
.capa-ampliar.cuadro > .losetas .loseta .valor.pequeno { font-size: clamp(14px, min(24cqh, 14cqw), 160px); }
.capa-ampliar.cuadro > .losetas .loseta .valor small { font-size: 40%; }
.capa-ampliar.cuadro > .losetas .loseta .mm { font-size: clamp(10px, min(8cqh, 6cqw), 30px); }
.capa-ampliar.cuadro > .losetas .loseta.solo-tablet { display: none; }   /* la loseta «Conexion» no hace falta en el cuadro */
/* losetas MARCADAS con un clic (para el Cuadro): borde de acento y una señal; con alguna marcada, el Cuadro solo enseña esas */
#losetas .loseta { position: relative; }
#losetas .loseta.marcada { box-shadow: 0 0 0 3px #ffd43b; }
#losetas .loseta.marcada::after { content: "✓"; position: absolute; top: 2px; right: 8px; font-size: 18px; font-weight: 800; color: #ffd43b; }
#btnCuadro.con-marcadas { border: 2px solid #ffd43b; box-shadow: 0 0 0 2px rgba(255, 212, 59, .35); }
.capa-ampliar.cuadro > .losetas .loseta.marcada { box-shadow: none; }
.capa-ampliar.cuadro > .losetas .loseta.marcada::after { display: none; }
.capa-ampliar.cuadro.seleccion > .losetas .loseta:not(.marcada) { display: none; }
/* ---- basico / avanzado: lo marcado .avz solo se ve en modo avanzado (menu ⚙) ---- */
body:not(.avanzado) .avz { display: none !important; }
/* ---- menu ⚙ de la cabecera ---- */
.menu-ancla { position: relative; }
.menu { position: absolute; right: 0; top: 36px; z-index: 70; background: var(--caja); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 250px; font-size: 14px; }
.menu label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.menu select { padding: 4px 6px; }
/* ---- caja «Conexiones» de Medir en vivo ---- */
#cajaConexiones .barra { margin: 4px 0 6px; }
#cajaConexiones .et-con { min-width: 64px; color: var(--suave); font-weight: 600; }
/* modo tablet: la caja Conexiones compacta y la loseta «Conexion» (solo-tablet) con el color del estado */
body.tablet #cajaConexiones { padding: .25rem .75rem; }
body.tablet #tConexion .valor { font-size: 1.2rem; line-height: 1.15; white-space: nowrap; }   /* «SIMULACIÓN» / «Sin conexión» enteros */
.pastilla { white-space: nowrap; }
body.tablet #tConexion.encendida { background: var(--ok); }
body.tablet #tConexion.simulacion { background: var(--aviso); }
body.tablet canvas { max-width: 100% !important; max-height: 100% !important; }
body.tablet #p-vivo #ayudaGrabar:empty { display: none; }
/* ---- reordenar losetas arrastrandolas (MD.arrastrarOrden): la que se mueve y la que recibe ---- */
.losetas .loseta.arrastrando { opacity: .6; cursor: grabbing; position: relative; pointer-events: none; }
.losetas .loseta.destino { outline: 3px dashed var(--acento); outline-offset: -3px; }
.losetas .loseta { user-select: none; -webkit-user-select: none; }   /* al arrastrar una loseta no se selecciona su texto */

#tablaLiveMap td.actual { outline: 3px solid var(--acento); outline-offset: -3px; font-weight: 700; }
#tablaLiveMap td small { opacity: .6; font-size: .7em; }
/* ---- reorganizacion 2026-10-05: resumen de conexiones en la cabecera y pestaña «Conexiones» ---- */
.resumen-cab { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; padding: 3px; border-radius: 14px; background: rgba(255,255,255,.12); }
.resumen-cab:hover, .resumen-cab:focus-visible { background: rgba(255,255,255,.28); outline: none; }
.resumen-cab .pastilla { padding: 3px 8px; font-size: 11px; }
body.tablet .resumen-cab .pastilla { padding: .15rem .45rem; font-size: .75rem; }
/* Tabla de conexiones (Jaime, 2026-10-07): una fila por aparato y columnas alineadas; los del cable OBD (que se excluyen) marcados a la izquierda */
.desplazable-x { overflow-x: auto; }
.tabla-con { width: 100%; border-collapse: collapse; }
.tabla-con th { text-align: left; color: var(--suave); font-weight: 600; font-size: 13px; padding: 4px 8px; border-bottom: 1px solid var(--borde); }
.tabla-con td { padding: 6px 8px; border-bottom: 1px solid rgba(0,0,0,.08); vertical-align: middle; }
.tabla-con td:first-child { white-space: nowrap; }
.tabla-con tr.grupo-obd td:first-child { box-shadow: inset 3px 0 0 var(--acento); }
.tabla-con td button { margin: 2px 4px 2px 0; }
.tabla-con .et-con { min-width: 0; }
/* Dos columnas (Jaime, 2026-10-07: «sin criterio de alineación»): la etiqueta en una columna fija y TODO lo demás de la fila
   (también lo que salta de línea) y el «Sirve para…» empiezan en la misma vertical. La barra deja el hueco de la columna con
   padding-left y la etiqueta se mete en él con el margen negativo. */
#cajaConexiones { --col-et: 10.5em; }
#cajaConexiones .fila-con { padding: 8px 0 2px; border-top: 1px solid rgba(0,0,0,.08); }
#cajaConexiones .fila-con .barra { margin: 0 0 4px; padding-left: var(--col-et); }
#cajaConexiones .fila-con .barra > .et-con { flex: 0 0 var(--col-et); width: var(--col-et); margin-left: calc(-1 * var(--col-et)); margin-right: -8px; box-sizing: border-box; }   /* -8px = el gap de .barra */
#cajaConexiones .para-que { margin: 0 0 6px var(--col-et); }
@media (max-width: 480px) {   /* movil estrecho: la etiqueta en su propia linea y el resto debajo, sin sangria */
  #cajaConexiones .fila-con .barra { padding-left: 0; }
  #cajaConexiones .fila-con .barra > .et-con { flex-basis: 100%; width: auto; margin-left: 0; }
  #cajaConexiones .para-que { margin-left: 0; }
  /* MÓVIL (Galaxy A10 de Jaime, 360 px; repaso con pruebas/capturas_movil.js, 2026-10-14): la tabla de 4 columnas quedaba
     CORTADA por la derecha (la columna «Cómo se conecta» con sus desplegables fuera de la tarjeta). A este ancho cada aparato
     pasa a ser un bloque: etiqueta arriba y debajo estado, cómo se conecta y botones, cada uno en su línea. Sin cabecera de tabla. */
  .tabla-con thead { display: none; }
  .tabla-con, .tabla-con tbody, .tabla-con tr, .tabla-con td { display: block; width: auto; }
  .tabla-con tr { padding: 6px 0 8px; border-bottom: 1px solid rgba(0,0,0,.12); }
  .tabla-con td { padding: 3px 0; border-bottom: 0; }
  .tabla-con td:first-child { white-space: normal; font-size: 1.05em; }
  .tabla-con td:empty { display: none; }
  .tabla-con td input[type=text] { max-width: 100%; box-sizing: border-box; }
  /* y la cabecera: a 360x740 ocupaba 430 px y era PEGAJOSA, dejando 300 px para la página al bajar. En móvil estrecho no se
     pega (lo conectado se sigue viendo arriba del todo) y los botones van más apretados. */
  .cabecera { position: static; }
  body.tablet .cab-btn { padding: .25rem .5rem; min-height: 2rem; }
  body.tablet .cab-derecha { gap: .3rem; }
}
.aviso-suave a { color: inherit; text-decoration: underline; }
#cajaAyuda .plano { max-width: 100%; }
body.tablet #btnGrabarTirada { min-width: 9rem; font-size: 1.25rem; }
.resumen-cab .resumen-et { font-size: 12px; font-weight: 700; padding: 0 2px 0 6px; }
body.tablet .resumen-cab .resumen-et { font-size: .8rem; }
#cajaConexiones .et-con.sub { font-weight: 600; padding-left: 10px; box-sizing: border-box; }
#cajaConexiones .fila-con .barra + .para-que + .barra { margin-top: 8px; }
.log-ecu { width: 100%; height: clamp(260px, 62vh, 1200px); box-sizing: border-box; font: 12px Consolas, "Courier New", monospace; white-space: pre; resize: vertical; }
#p-eculog { position: relative; }
.menu-contexto { position: absolute; z-index: 30; display: flex; flex-direction: column; min-width: 190px; padding: 4px; }
.menu-contexto.oculto { display: none; }
.menu-contexto button { text-align: left; border: 0; background: transparent; padding: 7px 12px; cursor: pointer; font-size: 14px; }
.menu-contexto button:hover { background: rgba(0,0,0,.08); }
.menu-contexto button:disabled { opacity: .45; cursor: default; background: transparent; }
.prog-mm2 { width: 100%; height: 16px; margin: 4px 0; }
.menu-contexto button { display: flex; justify-content: space-between; gap: 24px; }
.menu-contexto kbd { font: inherit; opacity: .6; }
.menu-contexto hr { border: 0; border-top: 1px solid rgba(0,0,0,.15); margin: 3px 0; width: 100%; }
.resumen-cab { display: flex; align-items: center; gap: 2px; border: 1.5px solid rgba(255,255,255,.75); padding: 3px 6px 3px 4px;
  flex-wrap: nowrap; white-space: nowrap; max-width: 100%; box-sizing: border-box; }
.resumen-cab .pastilla { flex: 0 0 auto; padding: 3px 6px; }
/* cabecera que no cabe en una línea (móvil apaisado, radio, tablet): las piezas NO encogen por debajo de su contenido (antes se salían
   las pastillas y el ⚙); la fila pasa a dos líneas y el resumen de conexiones puede partirse (2026-10-10) */
.cab-derecha { flex-wrap: wrap; row-gap: 4px; }
.cab-derecha > * { flex: 0 0 auto; }
.cab-derecha > .resumen-cab { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; white-space: normal; row-gap: 2px; }
.resumen-cab .pastilla { white-space: nowrap; }
/* dialogo «Losetas…» en rejilla: significado · origen · grupo · unidad · orden; los titulos ordenan */
#dlgLosetas { width: min(960px, 96vw); max-width: none; box-sizing: border-box; }
#dlgLosetas > .barra:last-child { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde); }   /* Cerrar / Restablecer separados de la lista */
.fila-loseta, .cab-losetas { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.1fr) minmax(0, 1.1fr) 52px 88px; align-items: center; gap: 8px; }
.cab-losetas { padding: 4px 6px; border-bottom: 2px solid var(--borde); }
.cab-losetas button { border: 0; background: transparent; text-align: left; font-weight: 700; padding: 4px 0; cursor: pointer; color: var(--suave); min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab-losetas button.activa { color: var(--acento); }
.fila-loseta label { flex-wrap: wrap; row-gap: 0; }
.fila-loseta .col { font-size: 13px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-loseta .col-orden { display: flex; gap: 4px; justify-content: flex-end; }
@media (max-width: 640px) { .fila-loseta, .cab-losetas { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 0 0 72px; } .fila-loseta .col:nth-of-type(3), .fila-loseta .col:nth-of-type(4) { display: none; } .cab-losetas button:nth-child(3), .cab-losetas button:nth-child(4) { display: none; } }
.opciones-grabar { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }

/* ---- Conexiones (Jaime, 2026-10-06): estado de cada aparato y de donde sale cada señal ---- */
.et-con[data-aparato]::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .4em; background: #adb5bd; vertical-align: middle; }
.et-con.ap-on::before { background: var(--ok); }          /* conectado */
.et-con.ap-falta::before { background: var(--aviso); }    /* hay losetas que lo necesitan y no esta conectado */
.tabla-senales { border-collapse: collapse; width: 100%; }
.tabla-senales th, .tabla-senales td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.fuente-sen { display: inline-block; padding: 1px 8px; margin: 1px 4px 1px 0; border-radius: 10px; background: var(--chip); color: var(--chip-txt); font-size: .9em; white-space: nowrap; }
.fuente-sen.on { background: var(--ok); color: var(--ok-txt); }
.fuente-sen.usada { outline: 2px solid var(--acento); outline-offset: 1px; }
.loseta.sin-fuente { opacity: .45; }
/* ---- Pestaña Hex (Jaime, 2026-10-06): como la de Andrew (MEMS Mapper / Lucas 5AS Tools): fondo negro, bytes en verde, campos en
   morado, la celda elegida en blanco y su fila y columna marcadas en amarillo. Solo se pintan las filas visibles. ---- */
#p-hex { position: relative; }
.hex-vista { position: relative; overflow: auto; height: 300px; border: 1px solid var(--borde); background: #fff; outline: none;
  font: 12px Consolas, "Courier New", monospace; user-select: none; }
.hex-filas { position: absolute; left: 0; top: 0; }
.hex-fila { display: flex; height: 22px; line-height: 20px; }
.hex-fila > span { box-sizing: border-box; width: 23px; text-align: center; border: 1px solid #fff; background: #000; color: #2fe12f; cursor: default; }
.hex-fila > span.dir { width: 62px; background: #e9ecef; color: #000; text-align: right; padding-right: 4px; border-color: #adb5bd; }
.hex-fila > span.asc { width: 140px; text-align: left; padding-left: 4px; letter-spacing: 0; white-space: pre; overflow: hidden; }
.hex-fila > span.campo { background: #4b1650; color: #fff; }
.hex-fila > span.sel { background: #fff; color: #000; border-color: #000; }
.hex-fila > span.hallado { background: #e67700; color: #000; }
.hex-fila.cab { position: sticky; top: 0; z-index: 2; }
.hex-fila.cab > span { background: #e9ecef; color: #000; border-color: #adb5bd; font-weight: 700; }
.hex-fila.cab > span.col-sel, .hex-fila > span.dir.fila-sel { background: #ffd43b; }
.hex-vista.todo .hex-fila:not(.cab) > span:not(.dir) { background: #1c4f8a; color: #fff; }
.hex-vacio { padding: 20px; color: var(--suave); font-family: inherit; }
/* Lucas 5AS: bytes en crudo de los datos en vivo; los que cambian, marcados */
.mono { font-family: Consolas, "Courier New", monospace; }
.mono span.cambia { background: #ffd43b; font-weight: 700; }

/* rejillas ordenables: cualquier tabla con cabecera (pulsar el titulo) */
table thead th { cursor: pointer; user-select: none; }
th.orden-asc::after { content: " \25B2"; font-size: .8em; }
th.orden-desc::after { content: " \25BC"; font-size: .8em; }
tr.oculto { display: none; }

/* Lucas 5AS: probar salidas, dos columnas como Andrew */
.rejilla-salidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 6px 18px; margin: 6px 0; }
.rejilla-salidas label { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* «Todas las averías posibles» (DTC 2J): fila de un bit activo */
#tablaDtcTodosT tr.activa td { background: rgba(220, 60, 40, .15); font-weight: bold; }

/* MAPAS (tablas y escalares para editar) */
body.tablet .no-tablet { display: none !important; }
.mapas-cuerpo { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.mapamem-fila:not(.oculto) { display: flex; align-items: flex-start; gap: 8px; }
.mapamem-zoom button { padding: 0 9px; min-width: 30px; line-height: 20px; }
.mapamem-zoom { flex: 0 0 auto; display: flex; gap: 4px; align-items: center; font-size: 12px; color: var(--suave); margin-top: 5px; white-space: nowrap; }
.mapamem-visor { flex: 1 1 0; min-width: 0; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
.mapamem-interior { min-width: 100%; }
.mapamem-barra { display: flex; height: 34px; border: 1px solid var(--borde); border-radius: 6px; overflow: hidden; }
.mapamem-seg { min-width: 2px; color: #fff; font-size: 11px; line-height: 34px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid rgba(255,255,255,.35); }
.mapamem-seg:last-child { border-right: 0; }
.mapamem-detalle .mapamem-seg { font-size: 10px; padding: 0 1px; }
.mapamem-seg.mapamem-claro { color: #343a40; font-weight: 600; }   /* «Libre» y huecos: blanco sobre gris claro no se leía (Jaime) */
.mapamem-grupos { position: relative; height: 17px; margin-bottom: 2px; font-size: 11px; font-weight: 700; }
.mapamem-grupo { position: absolute; top: 0; box-sizing: border-box; height: 17px; text-align: center; overflow: hidden; white-space: nowrap; border-bottom: 3px solid; line-height: 14px; }
.mapamem-barra { position: relative; }
.mapamem-grupo > span { position: sticky; left: 8px; right: 8px; display: inline-block; padding: 0 6px; }
.mapamem-tabla { border-right: 1px solid rgba(255,255,255,.6) !important; }
.mapamem-ns-off { background: repeating-linear-gradient(45deg, #adb5bd, #adb5bd 6px, #ced4da 6px, #ced4da 12px) !important; color: #495057 !important; }
.mapamem-ns-on { background: #2b8a3e !important; font-weight: 700; }
.mapamem-clic { cursor: pointer; }
.mapamem-clic:hover { filter: brightness(1.15); }
.mapamem-activo { outline: 3px solid var(--acento2); outline-offset: -3px; }
.mapamem-ejes { position: relative; height: 16px; margin-top: 2px; font-size: 10px; color: var(--suave); }
.mapamem-dir { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.mapamem-dir:first-child { transform: none; }
.mapamem-dir-fin { transform: translateX(-100%); }
.mapas-izq { flex: 0 0 340px; max-width: 100%; }
.mapas-izq .barra-lista { margin-bottom: 6px; gap: 6px; }
.mapas-izq .barra-lista input[type=text] { flex: 1 1 100px; min-width: 0; }
.caja-mapas { padding-top: 6px; }
.caja-mapas > .barra { margin-bottom: 6px; }
.mapamem-det { margin-bottom: 4px; }
.mapamem-det > summary { cursor: pointer; font-weight: 700; color: var(--acento); font-size: 13px; }
.lista-mapas { flex: 0 0 340px; max-width: 100%; max-height: calc(100vh - 230px); min-height: 260px; overflow: auto; border: 1px solid var(--borde); border-radius: 6px; font-size: calc(13px * var(--zoom-texto, 1)); }
.lista-mapas .grid-lista { width: 100%; border-collapse: collapse; }
.lista-mapas .grid-lista th { position: sticky; top: 0; z-index: 1; background: var(--caja); color: var(--suave); text-align: left; padding: 4px 8px; cursor: pointer; user-select: none; white-space: nowrap; border-bottom: 1px solid var(--borde); }
.lista-mapas .grid-lista th.num { text-align: left; }
.lista-mapas .grid-lista th:hover { color: var(--texto); }
.lista-mapas .it { cursor: pointer; }
.lista-mapas .it td { padding: 3px 8px; vertical-align: top; }
.lista-mapas .it .n { color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lista-mapas .it .v { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lista-mapas .it.clave { font-weight: 700; }
.lista-mapas .it.sel { background: var(--acento-fondo); color: var(--acento-txt); }
.lista-mapas .it.sel .n { color: #dbe6f3; }
.mapas-derecha { flex: 1 1 420px; min-width: 0; }
#detalleMapa { font-size: calc(1rem * var(--zoom-texto, 1)); }
#detalleMapa .texto-exp { font-size: calc(13px * var(--zoom-texto, 1)); }
.texto-exp { white-space: pre-wrap; font-size: 13px; color: var(--suave); }
#detalleMapa .rejilla-mapa { font-size: calc(12px * var(--zoom-texto, 1)); }
.rejilla-mapa { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.rejilla-mapa td:focus { outline: 2px solid var(--acento); outline-offset: -2px; }
.rejilla-mapa .celda-edit { width: auto; padding: 0 2px; font: inherit; text-align: right; }
.rejilla-mapa th { background: var(--caja); color: var(--suave); padding: 2px 6px; font-weight: 600; white-space: nowrap; }
.rejilla-mapa td { padding: 2px 6px; text-align: right; cursor: pointer; color: #000; border: 1px solid rgba(0,0,0,.08); user-select: none; white-space: nowrap; }
.rejilla-mapa td.sel { outline: 2px solid #000; outline-offset: -2px; }
.rejilla-mapa th[data-eje] { cursor: pointer; }
.rejilla-mapa th.sel { outline: 2px solid var(--acento); outline-offset: -2px; color: var(--texto); }
.lista-mapas .it.dif td:nth-child(2)::after { content: "≠"; color: var(--aviso); font-weight: 700; margin-left: 4px; }
.rejilla-mapa td.dif { box-shadow: inset 0 0 0 2px var(--aviso); font-weight: 700; }

/* Tools: grupos como los submenús del menú Tools de MEMS Mapper */
.grupo-tools { margin: 18px 0 8px; font-size: 14px; color: var(--suave); text-transform: none; border-bottom: 1px solid var(--borde); padding-bottom: 3px; }

/* Mapas: menús «Table ▾» / «Value ▾» como la botonera de MEMS Mapper */
.menu-ancla { position: relative; display: inline-block; }
.menu-desp { position: absolute; top: 100%; left: 0; z-index: 30; display: flex; flex-direction: column; min-width: 220px; background: var(--caja); border: 1px solid var(--borde); border-radius: 8px; padding: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.menu-desp.oculto { display: none; }
.menu-desp button { text-align: left; border: 0; background: none; padding: 5px 8px; }
.menu-desp button:hover:not(:disabled) { background: var(--acento-fondo); color: var(--acento-txt); }
.menu-desp .chk { padding: 4px 8px; }

/* Conexiones en móvil: la tabla de señales no puede salirse de la pantalla (solapes_movil a 360 y 412 px) */
@media (max-width: 520px) {
  .tabla-senales { table-layout: fixed; }
  .tabla-senales th, .tabla-senales td { padding: 4px 4px; overflow-wrap: anywhere; }
  .fuente-sen { white-space: normal; }
}
/* y la lista de salidas del 5AS: el texto se parte y el desplegable baja de línea si no cabe */
#listaInmo5Salidas .en-linea { flex-wrap: wrap; }
#listaInmo5Salidas .en-linea > span { min-width: 0; overflow-wrap: anywhere; }
#listaInmo5Salidas .en-linea select { max-width: 100%; }
/* Lucas 5AS: panel compacto inspirado en Lucas 5/10AS Tools. */
/* ---- 5AS como Lucas 5/10AS Tools (2026-10-10): misma cabecera clara y compacta que la ECU, la fila se parte si no cabe
   (antes desplazamiento horizontal en tablet / móvil apaisado) y pestañas con aspecto de pestaña ---- */
:is(#inmo5Cabecera, #srsCabecera).inmo5-cabecera { margin: 8px 0 0; border: 1px solid var(--borde); background: var(--caja); color: var(--texto); }
:is(#inmo5Cabecera, #srsCabecera) .inmo5-acciones { flex-wrap: wrap; gap: 3px; padding: 3px 6px; background: var(--caja); border: 0; }
:is(#inmo5Cabecera, #srsCabecera) .mm-b, :is(#inmo5Cabecera, #srsCabecera) .inmo5-menu summary.mm-b { background: var(--caja); color: var(--texto); border: 1px solid var(--borde); border-radius: 3px; min-height: 26px; padding: 2px 5px; font-size: .74rem; }
:is(#inmo5Cabecera, #srsCabecera) .mm-ico { margin-right: 2px; }
:is(#inmo5Cabecera, #srsCabecera) .mm-b:disabled { color: var(--suave); opacity: .55; }
:is(#inmo5Cabecera, #srsCabecera) .inmo5-menu > div button { text-align: left; border: 0; background: transparent; }
:is(#inmo5Cabecera, #srsCabecera) .inmo5-menu > div button:disabled { opacity: .45; }
:is(#inmo5Cabecera, #srsCabecera) .inmo5-menu > div { left: 0; right: auto; min-width: 280px; background: var(--caja); }
:is(#inmo5Cabecera, #srsCabecera) progress { height: 6px; }
:is(body[data-seccion="inmo"], body[data-seccion="srs"], body[data-seccion="banco"]) #pestanas { background: var(--caja); padding: 3px 8px 0; gap: 0; border-bottom: 1px solid var(--borde); }
:is(body[data-seccion="inmo"], body[data-seccion="srs"], body[data-seccion="banco"]) #pestanas > button { color: var(--texto); background: var(--fondo); border: 1px solid var(--borde); border-bottom: 0;
  border-radius: 3px 3px 0 0; margin-right: 2px; padding: 4px 12px; font-size: 13px; font-weight: 400; }
:is(body[data-seccion="inmo"], body[data-seccion="srs"], body[data-seccion="banco"]) #pestanas > button.activa { background: var(--caja); font-weight: 600; box-shadow: 0 1px 0 var(--caja); }
/* ---- ECU MEMS 2J como MEMS Mapper (2026-10-10): menús, botones con icono, proyecto, progreso común y ventanas ---- */
.mm-dup, #pestanas .pestana-ventana { display: none !important; }
#detalleMapa.sin-grafica .grafica-media { display: none; }   /* menú Gráfica → «Mostrar la gráfica» quitado */
/* la cabecera de la ECU como MEMS Mapper pisa los colores de la antigua .ecu-cabecera (banda azul, botones grises) */
:is(#ecuCabecera, #ecu16Cabecera).mm-cab { display: block; padding: 0; gap: 0; color: var(--texto); background: var(--caja); border-bottom: 1px solid var(--borde); }
:is(#ecuCabecera, #ecu16Cabecera).mm-cab[hidden] { display: none; }
:is(#ecuCabecera, #ecu16Cabecera) .chk, :is(#ecuCabecera, #ecu16Cabecera) .en-linea { color: var(--texto); }
:is(#ecuCabecera, #ecu16Cabecera) .mm-menu > div button { border: 0; background: transparent; color: var(--texto); min-height: 30px; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-menu > div button:hover:not(:disabled) { background: var(--fondo); }
:is(#ecuCabecera, #ecu16Cabecera) .mm-menu > div button:disabled { opacity: .45; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-menus { gap: 0; }
:is(#ecuCabecera, #ecu16Cabecera) .estado { color: var(--suave); max-width: none; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-progreso .prog-mm2 { height: 10px; }
.mm-et { font-weight: 600; color: var(--texto); }
.mm-campo { display: inline-block; min-width: 9em; padding: 2px 8px; border: 1px solid var(--borde); border-radius: 3px; background: var(--fondo); color: var(--texto); }
.mm-proyecto .mm-nombre { min-width: 18em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-filtro { border-bottom: 1px solid var(--borde); }
/* pestañas de la ECU como las de MEMS Mapper: debajo de la cabecera, claras y con borde de pestaña (Tables · Scalars · Hex · Log…) */
:is(body[data-seccion="ecu"], body[data-seccion="ecu16"]) #pestanas { background: var(--caja); padding: 6px 8px 0; gap: 0; border-bottom: 1px solid var(--borde); }
:is(body[data-seccion="ecu"], body[data-seccion="ecu16"]) #pestanas > button { color: var(--texto); background: var(--fondo); border: 1px solid var(--borde); border-bottom: 0;
  border-radius: 3px 3px 0 0; margin-right: 2px; padding: 6px 14px; font-size: 13px; font-weight: 400; }
/* compacto (Jaime: «que la zona de información empiece lo más arriba posible», «aprovechar bien el espacio») */
:is(#ecuCabecera, #ecu16Cabecera) .mm-fila { padding: 2px 6px; gap: 3px; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-menus { padding: 0 4px; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-menus .boton-conexion { min-height: 24px; padding: 2px 10px; font-size: .8rem; }
.mm-menu-dcha > div { left: auto; right: 0; }
.mm-protocolo { font-size: .78rem; padding: 1px 4px; margin: 0 4px; }
/* un menú que se abre desde un botón de la 2.ª fila (Diferencias ▾) */
:is(#ecuCabecera, #ecu16Cabecera) .mm-menu-b > summary.mm-b { list-style: none; cursor: pointer; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-menu-b > summary.mm-b::-webkit-details-marker { display: none; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-menu-b.apagado { pointer-events: none; opacity: .55; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-menu-b > div { min-width: 260px; gap: 8px; }   /* Opciones, a la derecha: el desplegable se abre hacia dentro */
:is(#ecuCabecera, #ecu16Cabecera) .mm-menu summary { padding: 2px 9px; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-proyecto { gap: 4px 8px; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-proyecto select, :is(#ecuCabecera, #ecu16Cabecera) .mm-proyecto input { padding: 1px 4px; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-campo { padding: 1px 6px; }
/* la línea de proyecto no se parte: el nombre ocupa lo que queda y se recorta con «…» (el entero, al pasar el ratón) */
:is(#ecuCabecera, #ecu16Cabecera) .mm-proyecto { flex-wrap: nowrap; }
/* en pantallas estrechas (radio del coche, tablet, móvil) la línea del proyecto se parte en varias en vez de
   empujar la página a lo ancho (Jaime, 2026-10-11: que valga para cualquier pantalla) */
@media (max-width: 1100px) {
  :is(#ecuCabecera, #ecu16Cabecera) .mm-proyecto { flex-wrap: wrap; }
  :is(#ecuCabecera, #ecu16Cabecera) .mm-proyecto .mm-nombre { min-width: 10em; }
  :is(#ecuCabecera, #ecu16Cabecera) .mm-campo { min-width: 6em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
:is(#ecuCabecera, #ecu16Cabecera) .mm-proyecto > * { flex: 0 0 auto; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-proyecto .mm-nombre { flex: 1 1 auto; min-width: 6em; max-width: none; }
:is(#ecuCabecera, #ecu16Cabecera) #ecuFirmware { min-width: 0; }
@media (max-width: 700px) { :is(#ecuCabecera, #ecu16Cabecera) .mm-proyecto { flex-wrap: wrap; } }
:is(#ecuCabecera, #ecu16Cabecera) .mm-progreso { padding: 0 6px 2px; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-memoria { display: block; padding: 2px 6px; margin: 0; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-memoria.oculto { display: none; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-progreso .prog-mm2 { height: 6px; margin: 0; }
:is(#ecuCabecera, #ecu16Cabecera) #zonaMm2 .barra { margin: 0; }
:is(#ecuCabecera, #ecu16Cabecera) #zonaMm2 .barra:has(#estadoMm2:empty), :is(#ecuCabecera, #ecu16Cabecera) #infoMm2:empty { display: none; }
:is(body[data-seccion="ecu"], body[data-seccion="ecu16"]) #pestanas { padding-top: 3px; }
:is(body[data-seccion="ecu"], body[data-seccion="ecu16"]) #pestanas > button { padding: 4px 12px; }
:is(body[data-seccion="ecu"], body[data-seccion="ecu16"]) main { padding-top: 4px; }
:is(body[data-seccion="ecu"], body[data-seccion="ecu16"]) main > .panel.activo { padding-top: 0; }
:is(body[data-seccion="ecu"], body[data-seccion="ecu16"]) main > .panel.activo > .caja:first-child { margin-top: 0; }
/* «Mapa:» a la derecha de las pestañas de la ECU, con el fondo FIJO en el color de su zona del diagrama
   (Jaime, 2026-10-11: el parpadeo se hacía muy pesado; se queda destacado, como el filtro de tablas) */
.mm-mapa-pestanas { display: none; margin-left: auto; order: 99; align-self: center; gap: 6px; align-items: center; padding: 0 4px 3px; white-space: nowrap; font-size: 13px; }
:is(body[data-seccion="ecu"], body[data-seccion="ecu16"]) .mm-mapa-pestanas { display: inline-flex; }
.mm-mapa-id { font-weight: 700; min-width: 0; padding: 2px 6px; border: 2px solid var(--borde); border-radius: 4px; cursor: pointer; }
.mm-mapa-id option { background: var(--caja); color: var(--texto); }
.mm-mapa-id.destacado { background: var(--mapa-col); border-color: var(--mapa-col); color: #fff; }
/* la zona del mapa elegido, bien marcada; las otras zonas de mapa, un poco apagadas */
:is(#ecuCabecera, #ecu16Cabecera) .mapamem-seg.mapamem-activo { outline: 3px solid var(--texto); outline-offset: -3px; position: relative; z-index: 1; font-weight: 700; }   /* sin parpadeo (Jaime) */
:is(#ecuCabecera, #ecu16Cabecera) .mapamem-seg.mapamem-clic:not(.mapamem-activo) { filter: saturate(.55) brightness(1.05); }
.mapamem-seg.mapamem-fuera { opacity: .35; }   /* tabla fuera del filtro de la lista */
:is(body[data-seccion="ecu"], body[data-seccion="ecu16"]) #pestanas > button.activa { background: var(--caja); font-weight: 600; box-shadow: 0 1px 0 var(--caja); }
/* botones como los de MEMS Mapper: el MISMO fondo que la ventana, solo con su borde (Jaime, 2026-10-10) */
:is(#ecuCabecera, #ecu16Cabecera) .mm-b, :is(#ecuCabecera, #ecu16Cabecera) .mm-menu summary { background: var(--caja); color: var(--texto); border: 1px solid var(--borde); border-radius: 3px; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-b:hover:not(:disabled), :is(#ecuCabecera, #ecu16Cabecera) .mm-menu summary:hover { background: var(--caja); border-color: var(--suave); }
:is(#ecuCabecera, #ecu16Cabecera) .mm-b:disabled { background: var(--caja); color: var(--suave); opacity: .55; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-b.peligro:not(:disabled) { color: var(--peligro, #c92a2a); }
:is(#ecuCabecera, #ecu16Cabecera) .mm-menu summary { border-color: transparent; }
.mm-cab { display: block; margin: 8px 0 0; padding: 0; border: 1px solid var(--borde); background: var(--caja); }
.mm-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 6px; }
.mm-menus { border-bottom: 1px solid var(--borde); padding-top: 2px; padding-bottom: 2px; }
.mm-menu { position: relative; }
.mm-menu summary { cursor: pointer; list-style: none; padding: 4px 10px; border-radius: 4px; }
.mm-menu summary::-webkit-details-marker { display: none; }
.mm-menu summary:hover, .mm-menu[open] summary { background: var(--fondo); }
/* un menú CERRADO no puede ocupar sitio: el display: flex de abajo anulaba el «oculto» del navegador y en pantallas
   estrechas (radio, tablet) empujaba la página a lo ancho (Jaime, 2026-10-11). Y abierto, nunca más ancho que la pantalla. */
.mm-menu:not([open]) > div { display: none; }
.mm-menu > div { max-width: calc(100vw - 16px); }
.mm-menu > div { position: absolute; z-index: 30; top: 100%; left: 0; min-width: 240px; display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border: 1px solid var(--borde); background: var(--caja); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.mm-menu > div button { text-align: left; border: 0; color: var(--texto); background: transparent; }
.mm-menu .mm-opciones { min-width: 300px; gap: 8px; }
.mm-botones { border-bottom: 1px solid var(--borde); }
/* botones rápidos compactos, como MEMS Mapper: icono a la izquierda y texto en una línea */
.mm-b { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; min-height: 26px; padding: 2px 7px; font-size: .78rem; white-space: nowrap; }
/* un boton o menu escondido (los que no sirven en la pestaña en la que estas) no deja hueco: los demas se recolocan */
.mm-fila > [hidden], .mm-botones > [hidden] { display: none !important; }
.mm-ico { font-size: .95rem; line-height: 1; }
.mm-hueco { flex: 1 1 auto; }
.mm-proyecto { font-size: .85rem; color: var(--suave); }
.mm-nombre { font-weight: 600; color: var(--texto); }
.mm-progreso { padding: 0 6px 4px; }
.mm-progreso .prog-mm2 { display: block; width: 100%; }
.mm-ventana { width: min(96vw, 980px); max-height: 92vh; padding: 0; }
.mm-ventana-cab { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--borde); background: var(--caja); }
.mm-ventana-cab h3 { margin: 0; }
.mm-ventana-cuerpo { padding: 8px 12px 12px; }
.mm-ventana-cuerpo > .panel { display: block; }
@media (max-width: 700px) {   /* móvil: botones más compactos y ventanas a pantalla completa */
  .mm-b { padding: 2px 5px; font-size: .72rem; }
  .mm-ventana { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; }
  .mm-menu > div { position: fixed; left: 8px; right: 8px; top: auto; min-width: 0; }
}
.inmo5-cabecera { margin: 8px 0 0; border: 1px solid #aeb5bf; background: #dfe3e8; color: #202124; }
.inmo5-acciones { flex-wrap: nowrap; gap: 4px; margin: 0; padding: 4px 6px; border-top: 1px solid #b9c0c9; border-bottom: 1px solid #b9c0c9; background: #eef0f3; }
.inmo5-acciones button, .inmo5-menu summary { min-height: 28px; padding: 3px 7px; border: 1px solid #aeb5bf; border-radius: 3px; background: #fafafa; color: #202124; font-size: 13px; white-space: nowrap; }
/* Jaime, 2026-10-14 (captura): al pasar el ratón por «Conectar» del 5AS el botón se quedaba BLANCO con letra blanca (esta regla le
   ponía fondo #fff al botón naranja). Igual que en las cabeceras de SRS y ECU: el de conexión no entra aquí, solo se oscurece abajo. */
.inmo5-acciones button:not(.boton-conexion):hover, .inmo5-menu summary:hover { background: #fff; border-color: #687789; }
.inmo5-acciones .inmo5-conectar { flex: 0 0 auto; margin-left: 4px; }
.inmo5-acciones .boton-conexion { border-color: var(--sin-conectar); background: var(--sin-conectar); color: #fff; }
.inmo5-acciones .boton-conexion.conectado { border-color: var(--ok); background: var(--ok); }
.inmo5-acciones .boton-conexion:hover:not(:disabled) { filter: brightness(.92); }
.inmo5-menu { position: relative; }
.inmo5-menu summary { cursor: pointer; list-style: none; }
.inmo5-menu summary::-webkit-details-marker { display: none; }
.inmo5-menu > div { position: absolute; z-index: 20; top: 100%; right: 0; min-width: 190px; display: flex; flex-direction: column; padding: 4px; border: 1px solid #aeb5bf; background: #fff; box-shadow: 0 3px 10px #0003; }
.inmo5-menu:not([open]) > div { display: none; }
.inmo5-menu > div button { text-align: left; }
.inmo5-cabecera progress { display: block; width: 100%; height: 12px; accent-color: #58a65c; }
/* Jaime, 2026-10-14: el nombre del proyecto y el estado del 5AS van a la DERECHA DE LAS PESTAÑAS (como «Mapa:» en la 2J/1.6): en la fila de
   botones no cabían y se cortaban o pisaban; aquí sobra sitio, ni más filas ni solapes. Solo se ven en la sección del 5AS. */
.inmo5-estado { display: none; order: 99; margin-left: auto; align-self: center; align-items: center; gap: 8px; padding: 0 8px 3px 4px; color: #3f4852; font-size: 13px; white-space: nowrap; }
body[data-seccion="inmo"] #inmo5EstadoPestanas, body[data-seccion="srs"] #estadoSrs { display: inline-flex; }
.inmo5-estado > span:first-child:has(+ .estado:not(:empty))::after { content: " ·"; }   /* el separador solo si hay estado */
/* [hidden] pierde contra «display: flex» de .barra: hay que decirlo aquí (la fila de Ajustes del 5AS sin proyecto seguía viéndose) */
.inmo5-filtro[hidden], #ayudaInmo5Grid[hidden] { display: none; }
.inmo5-estado .estado { white-space: nowrap; }
.inmo5-filtro { margin-top: 8px; }
.inmo5-vivo-progreso { height: 9px; margin: 6px 0 8px; overflow: hidden; border: 1px solid #9db69f; border-radius: 5px; background: #fff; }
.inmo5-vivo-progreso[hidden] { display: none; }
/* ventana de progreso independiente (Jaime, 2026-10-14): flota centrada arriba, por encima de todo; si hay un diálogo modal abierto,
   app.js la mete dentro de él (capa superior) */
.ventana-progreso { position: fixed; top: 22%; left: 50%; transform: translateX(-50%); z-index: 90; width: min(380px, 92vw); box-sizing: border-box;
  padding: 12px 16px 10px; border: 1px solid var(--borde); border-radius: 10px; background: var(--caja); color: var(--texto); box-shadow: 0 10px 34px rgba(0,0,0,.3); }
.ventana-progreso[hidden] { display: none; }
.ventana-progreso .vp-titulo { font-weight: 700; margin-bottom: 8px; }
.ventana-progreso progress { display: block; width: 100%; height: 12px; }
.ventana-progreso .vp-texto { font-size: 12px; color: var(--suave); margin-top: 6px; min-height: 1.2em; }
.inmo5-vivo-progreso > span { display: block; width: 34%; height: 100%; background: repeating-linear-gradient(45deg, #58a65c 0 8px, #fff 8px 16px); animation: inmo5-captura 1.1s linear infinite; }
@keyframes inmo5-captura { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
/* Windows con «Efectos de animación» apagados (el PC de Jaime, 2026-10-14: la barra «queda estática»): sin desplazamiento, pero LATE
   (intensidad), que si no parece parada. */
@media (prefers-reduced-motion: reduce) { .inmo5-vivo-progreso > span { animation: inmo5-latido 1.2s ease-in-out infinite; width: 100%; } }
@keyframes inmo5-latido { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.inmo5-no-activo td { color: #8a949e; }
.inmo5-no-activo .inmo5-valor { text-decoration: line-through; }
.inmo5-grid { max-height: min(58vh, 620px); overflow: auto; border: 1px solid var(--borde); background: var(--caja); }
#tablaInmo5Ajustes { width: 100%; }
#tablaInmo5Ajustes th:first-child, #tablaInmo5Ajustes td:first-child { width: 58%; }
#tablaInmo5Ajustes td { height: 25px; }
.inmo5-valor { display: inline-block; min-width: 42px; padding: 2px 5px; border: 1px solid transparent; color: inherit; font: inherit; text-align: left; background: transparent; }
.inmo5-valor[data-editable="1"] { cursor: pointer; }
.inmo5-valor[data-editable="1"]:hover, .inmo5-valor[data-editable="1"]:focus { border-color: #8b99a8; outline: none; background: #fff; }
.inmo5-valor.binario { min-width: 96px; }
.inmo5-editor { max-width: min(100%, 280px); }
.inmo5-verificacion { max-height: 180px; overflow: auto; margin: 8px 0; padding: 7px 10px; border: 1px solid var(--borde); background: var(--caja); font: 12px Consolas, "Courier New", monospace; white-space: pre-wrap; }
.inmo5-verificacion.coincide { border-color: var(--ok); }
.inmo5-verificacion.difiere { border-color: var(--aviso); }
.inmo5-vacio { padding: 14px; color: var(--suave); }
/* SRS RC5 y conexión ECU: controles disponibles en la pestaña correspondiente. */
.srs-cabecera { display: flex; align-items: center; flex: 0 0 auto; gap: 7px; min-width: 0; margin-left: auto; color: #fff; }
.srs-cabecera[hidden], .ecu-cabecera[hidden] { display: none; }
.ecu-cabecera { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 6px 16px; color: #fff; background: var(--cabecera); border-bottom: 1px solid rgba(255,255,255,.25); }
.srs-icono { width: 36px; height: 36px; flex: 0 0 36px; object-fit: contain; }
.srs-cabecera > strong, .srs-cable { white-space: nowrap; }
.srs-cabecera > strong { font-size: 14px; }
.srs-cable { font-size: 12px; }
.srs-cabecera button:not(.primario):not(.boton-conexion) { min-height: 28px; padding: 3px 10px; border: 1px solid #aeb5bf; border-radius: 3px; background: #fafafa; color: #202124; white-space: nowrap; }
.srs-cabecera button:not(.primario):not(.boton-conexion):hover { background: #fff; border-color: #687789; }
.srs-cabecera .estado { max-width: 220px; color: #dbe6f3; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecu-cabecera button:not(.primario):not(.boton-conexion) { min-height: 28px; padding: 3px 10px; border: 1px solid #aeb5bf; border-radius: 3px; background: #fafafa; color: #202124; white-space: nowrap; }
.ecu-cabecera button:not(.primario):not(.boton-conexion):hover { background: #fff; border-color: #687789; }
.ecu-cabecera .en-linea, .ecu-cabecera .chk { color: #fff; white-space: nowrap; }
.ecu-cabecera select { max-width: 170px; }
.ecu-cabecera > .estado { max-width: 260px; color: #dbe6f3; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  .inmo5-acciones { flex-wrap: wrap; }
  .inmo5-estado { flex: 1 1 100%; margin-left: 0; }
  .srs-cabecera { flex-basis: 100%; margin-left: 0; }
  .ecu-cabecera { padding: 6px 10px; }
  .srs-icono { width: 30px; height: 30px; flex-basis: 30px; }
  .inmo5-acciones { gap: 4px; }
  .inmo5-acciones button, .inmo5-menu summary { padding: 3px 7px; }
  .inmo5-estado { flex-basis: 100%; margin-left: 0; }
  .inmo5-grid { max-height: 55vh; }
  #tablaInmo5Ajustes th:first-child, #tablaInmo5Ajustes td:first-child { width: 48%; white-space: normal; }
}
.grafica-media.sin-ampliar { cursor: default; }
.grafica-media.grafica-3d > .tip-grafica { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; }
/* «⟲ Vista por defecto» de la 3D (Jaime, 2026-10-11): el doble clic no se ve, así que va un botón a la vista */
.grafica-media.grafica-3d > .graf3d-reset { position: absolute; top: 5px; right: 34px; z-index: 2; display: inline-flex;
  align-items: center; gap: 4px; padding: 2px 8px; font-size: 12px; border: 1px solid var(--borde); border-radius: 6px;
  background: var(--caja); color: var(--texto); cursor: pointer; opacity: .85; }
.grafica-media.grafica-3d > .graf3d-reset:hover { opacity: 1; border-color: var(--acento); color: var(--acento); }
#burbuja ul.vinetas { margin: 4px 0 0; padding-left: 18px; } #burbuja ul.vinetas li { margin: 2px 0; }
.grafica-media.grafica-3d { height: clamp(380px, 72vh, 1100px); }   /* la 3D de Mapas, más alta para poder agrandarla (Jaime) */
/* 5AS: el estado se encoge con puntos suspensivos para que la conexión no baje de línea; protocolo solo informativo (Andrew: única opción) */

:is(#inmo5Cabecera, #srsCabecera) .inmo5-proto { font-size: .72rem; color: var(--suave); border: 1px solid var(--borde); border-radius: 3px; padding: 2px 5px; white-space: nowrap; }
:is(#inmo5Cabecera, #srsCabecera) .inmo5-conectar { padding: 3px 8px; font-size: .78rem; min-height: 26px; }


/* «i» Pinout del 5AS y su ventana */
:is(#inmo5Cabecera, #srsCabecera) .inmo5-i { font-weight: 700; min-height: 24px; }
.p5-dialogo { width: min(980px, 96vw); }
.p5-dialogo .mm-ventana-cab a { margin-left: auto; margin-right: 10px; font-size: .85rem; }
.p5-tabla td:nth-child(-n+5) { white-space: nowrap; }
.p5-intro, .p5-nota, .p5-fuente { font-size: .85rem; color: var(--suave); }
.p5-conectores { display: flex; gap: 24px; flex-wrap: wrap; }
.p5-conector { margin: 0; } .p5-conector figcaption { font-weight: 600; margin-bottom: 4px; }
.p5-fila { display: flex; gap: 2px; margin-bottom: 2px; }
.p5-fila span { width: 24px; height: 22px; line-height: 22px; text-align: center; border: 1px solid var(--borde); font-size: .72rem; }

.p5-img { display: block; width: 100%; max-width: 360px; background: #fff; padding: 4px; border-radius: 3px; margin-bottom: 6px; }
.p5-conector .p5-pie { font-weight: 400; max-width: 360px; font-size: .85rem; }
.p5-vista { font-size: .8rem; font-style: italic; max-width: 360px; margin: 0 0 6px; color: var(--suave); }

.p5-esquema { margin: 0 0 14px; } .p5-esquema img { width: 100%; display: block; background: #fff; border: 1px solid var(--borde); } .p5-esquema figcaption { font-size: .85rem; color: var(--suave); }

/* SRS y Banco como el 5AS (2026-10-11): icono pequeño del módulo en la cabecera, y en el Banco los botones de cada pestaña compactos y claros */
#srsCabecera .srs-icono { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; }
#srsCabecera .srs-nombre { font-size: .8rem; white-space: nowrap; }
#srsCabecera .mm-b.peligro { color: #b3261e; }
body[data-seccion="banco"] main .panel > .barra button:not(.primario):not(.grabar) { background: var(--caja); color: var(--texto); border: 1px solid var(--borde); border-radius: 3px; min-height: 28px; padding: 3px 9px; font-size: .8rem; font-weight: 400; }
body[data-seccion="banco"] main .panel > .barra button:disabled { opacity: .55; }
/* «ⓘ Pinout» con texto en las cuatro cabeceras (Jaime, 2026-10-11: el «i» redondo no se veía) */
.mm-b.inmo5-i { width: auto; height: 24px; min-height: 0 !important; flex: 0 0 auto; padding: 0 8px !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px !important; white-space: nowrap; font-weight: 700; font-size: .78rem; }
/* el filtro de tablas va en un grupo que se lleva de la cabecera de la 2J a la de la 1.6: el grupo no cuenta en la fila */
/* ---- editar la definición de una tabla o un escalar (el «Definition» de MEMS Mapper) ---- */
.def-cuerpo { max-width: 680px; }
#defOriginal { white-space: pre-line; margin-top: 10px; }
.def-coment { margin: 12px 0 0; }
.def-pestanas { display: flex; flex-wrap: wrap; gap: 2px; }
.def-pestana { padding: 3px 10px; font-size: 12.5px; border: 1px solid var(--borde); border-bottom: 0;
  border-radius: 6px 6px 0 0; background: var(--caja2); color: var(--suave); cursor: pointer; }
.def-pestana.activa { background: var(--caja); color: var(--texto); font-weight: 700; }
.def-coment textarea { width: 100%; border-radius: 0 6px 6px 6px; }
.def-solo-lectura { white-space: pre-line; border: 1px solid var(--borde); border-radius: 0 6px 6px 6px;
  padding: 8px 10px; margin: 0; max-height: 180px; overflow: auto; line-height: 1.45; }
.def-donde { margin: 0 0 8px; font-weight: 700; }
.def-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 14px; align-items: end; }
.def-rejilla label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.def-rejilla label.chk { flex-direction: row; align-items: center; gap: 6px; }
.def-rejilla label.def-ancho { grid-column: 1 / -1; }
.def-rejilla input[type="text"], .def-rejilla input[type="number"], .def-rejilla textarea { width: 100%; }
.def-eje { border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; margin: 12px 0 0; }
.def-eje > legend { font-weight: 700; font-size: 13px; padding: 0 6px; }
.def-eje .nota { font-weight: 400; }
.def-pie { justify-content: flex-end; }
.def-pie .sep { flex: 1; background: none; }
/* LIVE MAPPING: la celda que la ECU está usando ahora. Como interpola entre las de alrededor, todas se marcan
   (más fuerte cuanto más peso tienen) y la más cercana lleva además un recuadro. */
/* las tablas que la ECU NO está usando en esta situación: atenuadas, pero a la vista (Jaime) */
#listaMapas .it.lm-apagada { opacity: .45; }
#listaMapas .it.lm-activa { font-weight: 700; box-shadow: inset 3px 0 0 var(--acento2); }
#detalleMapa td.lm-celda { box-shadow: inset 0 0 0 9999px rgba(217, 72, 15, calc(var(--lm-peso, .5) * .45)); }
#detalleMapa td.lm-cerca { outline: 3px solid var(--acento2); outline-offset: -3px; font-weight: 800; }
button#btnLiveMapping.activo { background: var(--acento2); color: #fff; border-color: var(--acento2); }
.mm-filtro-grupo { display: contents; }
/* El filtro de tablas/escalares es de lo más usado y se perdía entre lo demás (Jaime, 2026-10-11: «debe llamar
   más la atención, es importante»): va destacado con el color de acento y con sitio para que no se corte. */
/* el label que lleva el desplegable tiene que encoger con la fila: si no, el select se sale de él y se come
   el «Buscar:» de al lado (Jaime, 2026-10-11: «hay solapes en desplegable tablas») */
:is(#ecuCabecera, #ecu16Cabecera) .mm-filtro-grupo > label {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; max-width: 100%; }
:is(#ecuCabecera, #ecu16Cabecera) #selMapasOrden {
  flex: 0 1 auto; min-width: 11em; max-width: 20em; width: auto; padding: 2px 6px; font-weight: 700; color: var(--acento);
  text-overflow: ellipsis; background: var(--marcado); border: 2px solid var(--acento); border-radius: 5px; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-filtro-grupo > input[type=text] { flex: 0 1 12em; min-width: 7em; }
/* el «ⓘ» del filtro se montaba encima del «Buscar:» de al lado: que ocupe su sitio y no encoja */
:is(#ecuCabecera, #ecu16Cabecera) .mm-filtro-grupo > .tip,
:is(#ecuCabecera, #ecu16Cabecera) .mm-filtro-grupo label > .tip { flex: 0 0 auto; margin: 0 4px 0 2px; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-filtro-grupo > .mm-et { flex: 0 0 auto; white-space: nowrap; }
:is(#ecuCabecera, #ecu16Cabecera) #selMapasOrden:hover,
:is(#ecuCabecera, #ecu16Cabecera) #selMapasOrden:focus { background: var(--caja); outline: none; }
:is(#ecuCabecera, #ecu16Cabecera) .mm-filtro-grupo > .mm-et:first-child { font-weight: 700; color: var(--acento); }
@media (max-width: 1100px) { :is(#ecuCabecera, #ecu16Cabecera) #selMapasOrden { min-width: 8em; } }

.mm16-filas > div { display: flex; align-items: center; gap: 6px; margin: 4px 0; flex-wrap: wrap; }
.mm16-et { flex: 0 0 240px; font-size: .85rem; }
.mm16-filas .mm-campo { min-width: 48px; text-align: center; }
.mm16-hex { font-size: .78rem; line-height: 1.35; margin: 0; overflow-x: auto; }

.mm16-vivo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 10px; align-items: start; }
@media (max-width: 800px) { .mm16-vivo { grid-template-columns: 1fr; } }

/* 5AS: con «ⓘ Pinout» con texto (más ancho) la fila no cabía a 1036 px: un poco menos de relleno y separación */
#inmo5Cabecera .inmo5-acciones { gap: 2px; }
#inmo5Cabecera .mm-b, #inmo5Cabecera .inmo5-menu summary.mm-b { padding: 2px 4px; }
#inmo5Cabecera .inmo5-proto { font-size: .66rem; padding: 2px 3px; }

/* ---- VISTA CENITAL DEL MAPA (Jaime, 2026-10-11: «ver dentro de la superficie de la celda por donde va») -------
   El mapa desde arriba, con el mapa de calor de residencia/error debajo, la estela y el punto exacto. Va al lado
   de la 3D si la pantalla da de sí; si no, debajo. */
.grafica-cenital { position: relative; display: flex; flex-direction: column; min-height: 240px; }
.grafica-cenital > canvas { flex: 1 1 auto; width: 100%; min-height: 180px; }
.cen-mandos { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 2px 4px 4px; font-size: 12px; }
.cen-mandos .cen-b { padding: 1px 7px; font-size: 12px; }
.cen-mandos #cenZoom { min-width: 3.2em; text-align: center; }
.cen-mandos #cenInfo { flex: 1 1 100%; color: var(--suave); }
/* las dos gráficas, una al lado de otra, cuando hay sitio */
@media (min-width: 1200px) {
  .mapas-derecha { container-type: inline-size; }
  #detalleMapa { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
  #detalleMapa > .tabla-mapa, #detalleMapa > div:first-child { grid-column: 1 / -1; }
  #detalleMapa > .grafica-cenital, #detalleMapa > .grafica-3d { grid-column: auto; }
}
.grafica-cenital.cen-sola { grid-column: 1 / -1 !important; }
.cen-sug { max-height: 190px; overflow: auto; border-top: 1px solid var(--borde); padding: 4px 6px; font-size: 12px; }
.cen-sug .tabla-sug { border-collapse: collapse; width: 100%; }
.cen-sug .tabla-sug th, .cen-sug .tabla-sug td { border: 1px solid var(--borde); padding: 1px 5px; text-align: right; }
.cen-sug .tabla-sug th { background: var(--marcado); font-weight: 700; }
.cen-sug .sug-rico { color: #c92a2a; font-weight: 700; }
.cen-sug .sug-pobre { color: #1c7ed6; font-weight: 700; }

/* ---- PANTALLA DE CARGA (Jaime, 2026-10-13) -----------------------------------------------------------------
   La aplicacion tarda ~1 s en estar lista (35 modulos, 1,9 MB, Chart.js y las definiciones): sin esto la ventana
   se queda en blanco y parece que no ha pasado nada. Se pinta con la pagina, antes de que corra ningun script.
   LOS TIEMPOS ESTAN AQUI, no en configuracion.js, porque la barra tiene que empezar a moverse ANTES de que se
   cargue configuracion.js. Lo que se puede tocar:
     --carga-fase1-ms   cuanto dura la parte automatica de la barra (lo que cuesta cargar los modulos)
     --carga-fase1-pct  hasta donde llega esa parte; de ahi al 100 % la mueve app.js con las etapas de verdad
     --carga-fin-ms     lo que tarda en desvanecerse al acabar
   OJO: la barra se mueve con «transform», no con «width», A PROPOSITO. Mientras el navegador esta ocupado
   cargando los modulos el hilo principal esta BLOQUEADO y nada se repinta... salvo las animaciones de transform,
   que las lleva el compositor aparte. Con «width» la barra se quedaria congelada justo cuando hace falta. */
:root { --carga-fase1-ms: 900ms; --carga-fase1-pct: .55; --carga-fin-ms: 260ms; }
.cargando { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
  background: var(--fondo); color: var(--texto); }
.cargando.se-va { opacity: 0; transition: opacity var(--carga-fin-ms) ease-out; pointer-events: none; }
.cargando-caja { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 16px; width: min(420px, 100%); }
.cargando-logo { width: 150px; max-width: 60%; height: auto; }
.cargando-titulo { font-size: 1.5rem; font-weight: 700; color: var(--acento); letter-spacing: .5px; }
.cargando-pista { width: 100%; height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.cargando-barra { width: 100%; height: 100%; border-radius: 4px; background: var(--acento-fondo);
  transform: scaleX(0); transform-origin: left center;
  animation: carga-avance var(--carga-fase1-ms) cubic-bezier(.2, .7, .3, 1) forwards; }
.cargando-barra.a-mano { animation: none; transition: transform .2s ease-out; }   /* a partir de aqui manda app.js */
@keyframes carga-avance { from { transform: scaleX(.03); } to { transform: scaleX(var(--carga-fase1-pct)); } }
.cargando-etapa { font-size: .8125rem; color: var(--suave); text-align: center; min-height: 1.2em; }
@media (prefers-reduced-motion: reduce) {   /* sin animacion: la barra salta de golpe a cada etapa */
  .cargando-barra { animation-duration: 1ms; }
  .cargando-barra.a-mano { transition: none; }
  .cargando.se-va { transition: none; }
}

/* ---- AVISO AL CONECTAR O DESCONECTAR UN APARATO (Jaime, 2026-10-13) -----------------------------------------
   «un zoom o algo que destacase que se conecta o desconecta algo durante un corto periodo de tiempo»: la pastilla
   que cambia pega un golpe de zoom con un halo de su color (verde al conectar, rojo al desconectar).
   EL ZOOM NO SE HACE CON UNA CLASE NI CON @keyframes, A PROPOSITO: actualizarConexion() reescribe el className de
   las pastillas cada vez que se llama (y se llama a cada rato), asi que cualquier clase que le pongamos dura dos
   suspiros. Se anima el ELEMENTO desde app.js (avisarCambioConexion), que eso no se lo lleva un className.
   Aqui solo queda lo que la animacion necesita: que la pastilla admita transform y que el halo no la recorte. */
/* OJO: la pastilla NO lleva transicion de color. El color tiene que cambiar EN EL ACTO, porque las pruebas
   (y Jaime) comprueban que el boton de conectar y su pastilla se ponen verdes a la vez; con una transicion de
   200 ms la pastilla se queda a medio camino y parecen distintos. Lo que llama la atencion es el zoom. */
.resumen-cab .pastilla { display: inline-block; }   /* un <span> en linea no admite transform */
#resumenCab { overflow: visible; }                  /* el halo se sale de la pastilla: que no lo corte */

/* «Guardar esta tabla en el log»: barra propia debajo de la tabla, para que exista en tablas de UNO y de
   DOS ejes (antes vivía dentro de la vista cenital, que solo se dibuja con dos ejes). */
.mm-marcar { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; font-size: 13px; }

/* CABECERA DEL BANCO DE POTENCIA (Jaime, 2026-10-13: «el mismo estilo que al resto de pestañas»).
   Reutiliza .inmo5-cabecera (la del 5AS y el SRS) para que se vea igual; solo cambia el icono. */
.banco-cab .banco-icono { font-size: 18px; line-height: 1; }
.banco-cab .inmo5-proto { font-weight: 700; }

/* El texto de estado DENTRO de las cabeceras de aparato. Esas cabeceras llevan fondo claro FIJO en los dos temas
   (.inmo5-cabecera, #dfe3e8), así que no vale el gris del tema: de noche --suave es claro y queda ilegible
   (2,17:1, lo cazó modo_noche_e2e el 2026-10-13 con el estado nuevo del banco). Color fijo, como el resto de esa
   barra, y legible sobre su fondo (~6:1). Le vale a las cinco cabeceras, no solo a la del banco. */
.inmo5-cabecera .estado { color: #4a5159; }
.inmo5-cabecera .estado.ok { color: #1c6b2b; }
/* fotos de la ficha del cable (cables.js «imagenes»): siempre con su autor */
.cab-foto { margin: 0 auto 12px; max-width: 360px; text-align: center; }
.cab-foto img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--borde); }
.cab-foto figcaption { font-size: 12.5px; color: var(--suave); line-height: 1.45; margin-top: 4px; }
/* lo que no tiene lo que necesita (cfg.requisitos: sin ECU, sin proyecto…): apagado y sin responder */
.req-off { opacity: .45; pointer-events: none; cursor: default; filter: grayscale(.4); }