@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('/app/cabina/fuentes/archivo-latin-wght-normal.woff2') format('woff2')}@font-face{font-family:'PlexMono';font-style:normal;font-weight:400;font-display:swap;src:url('/app/cabina/fuentes/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}@font-face{font-family:'PlexMono';font-style:normal;font-weight:500;font-display:swap;src:url('/app/cabina/fuentes/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}
/* Sistema comun de las tres maquetas: el de la portada hibrida de AMPE (base clara de taller,
   islas oscuras donde se ensena producto) con los estados del plan anadidos. */
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: block; src: url(/app/ampe/fuentes/barlow-condensed-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: block; src: url(/app/ampe/fuentes/barlow-condensed-700.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 100 700; font-display: block; src: url(/app/ampe/fuentes/ibm-plex-sans-var.woff2) format('woff2-variations'); }

:root {
  --papel: #f3f6f8;
  --tarjeta: #ffffff;
  --isla: #101820;
  --isla-alta: #18232d;
  --isla-borde: #2c3b48;
  --tinta: #182b38;
  --tinta-suave: #4e6273;
  --tinta-tenue: #566d7c;
  --isla-tinta: #e8eff4;
  --isla-suave: #9fb3c2;
  --linea: #d5e0e8;
  --linea-fuerte: #6f8796;

  --accion: #2459d3;
  --accion-suave: #e3ebfb;
  --isla-accion: #7fa8ff;

  /* estados del plan: significan eso y nada mas */
  --a-tiempo: #1d6b52;
  --a-tiempo-suave: #d6ebe2;
  --tarde: #b0451c;
  --tarde-suave: #f7e0d5;
  --tarde-texto: #9a3a14;
  --choque: #b3202a;
  --choque-suave: #f9dcdc;
  --sin-fecha: #56666f;
  --sin-fecha-suave: #e4eaee;
  --isla-a-tiempo: #4fc39a;
  --isla-tarde: #ff9057;
  --isla-choque: #ff6b73;
  --isla-sin-fecha: #8ea3b2;

  --cerrado: repeating-linear-gradient(135deg, rgba(24,43,56,.055) 0 6px, rgba(24,43,56,0) 6px 12px);
  --noche: rgba(24,43,56,.028);

  --radio: 4px;
  --sombra: 0 1px 2px rgba(24,43,56,.06), 0 10px 30px rgba(24,43,56,.07);
  --titular: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
  --texto: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 14px;
  line-height: 1.45;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }

.titular { font-family: var(--titular); font-weight: 700; letter-spacing: .005em; line-height: 1.05; }

/* ---------- marca y barra superior ---------- */
.marca { display: flex; align-items: center; gap: 10px; font-family: var(--titular); font-weight: 700; font-size: 22px; letter-spacing: .04em; }
.marca svg { display: block; }
.aviso-maqueta { font-size: 13px; color: var(--tinta-suave); }

/* ---------- conmutador de plan ---------- */
.conmutador { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--tarjeta); border: 1px solid var(--linea); gap: 2px; }
.conmutador button { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; cursor: pointer; font-weight: 500; color: var(--tinta-suave); }
.conmutador button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.boton { border: 1px solid var(--linea-fuerte); background: var(--tarjeta); border-radius: 6px; padding: 8px 14px; cursor: pointer; font-weight: 500; }
.boton:hover { border-color: var(--tinta); }
.boton.primario { background: var(--accion); color: #fff; border-color: var(--accion); }
.boton.primario:hover { background: #1c47ad; }

/* ---------- Gantt ---------- */
.gantt { position: relative; overflow: auto; background: var(--tarjeta); border-radius: var(--radio); }
.gantt-lienzo { position: relative; }
.gantt-eje { position: sticky; top: 0; height: 40px; z-index: 4; background: inherit; border-bottom: 1px solid var(--linea); }
.gantt-dia { position: absolute; top: 0; height: 40px; border-left: 1px solid var(--linea); padding: 5px 0 0 8px; font-size: 13px; color: var(--tinta-suave); white-space: nowrap; }
.gantt-dia b { display: block; font-family: var(--titular); font-size: 15px; font-weight: 600; color: var(--tinta); line-height: 1.1; }
.gantt-dia.finde b { color: var(--tinta-tenue); }
.gantt-canalon { position: sticky; left: 0; z-index: 5; background: inherit; }
.gantt-fila { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--linea); }
.gantt-nombre { position: absolute; left: 0; width: 148px; will-change: transform; padding: 0 12px 0 20px; display: flex; flex-direction: column; justify-content: center; font-weight: 500; font-size: 13px; background: var(--tarjeta); border-right: 1px solid var(--linea); z-index: 7; }
.gantt-esquina { border-bottom: 1px solid var(--linea); z-index: 8; }
.gantt-nombre small { font-weight: 400; color: var(--tinta-tenue); font-size: 13px; }
.gantt-cerrado { position: absolute; background: var(--cerrado); pointer-events: none; }
.gantt-rejilla { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--linea); pointer-events: none; }
.gantt-ahora { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--accion); z-index: 2; pointer-events: none; }
.gantt-ahora span { position: absolute; top: 44px; left: 4px; font-size: 13px; font-weight: 600; color: var(--accion); background: var(--tarjeta); padding: 0 4px; border-radius: 3px; }

.barra {
  position: absolute; height: 26px; border-radius: 3px; cursor: pointer; overflow: hidden;
  display: flex; align-items: center; gap: 4px; padding: 0 6px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: #fff;
  transition: left .9s cubic-bezier(.6,.02,.2,1), top .9s cubic-bezier(.6,.02,.2,1), width .9s cubic-bezier(.6,.02,.2,1), height .3s, background-color .5s, opacity .35s, box-shadow .2s;
  z-index: 1;
}
.barra .cambio { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, rgba(0,0,0,.34) 0 2px, rgba(0,0,0,.12) 2px 4px); }
.barra .txt { position: relative; }
.barra.a-tiempo { background: var(--a-tiempo); }
.barra.tarde { background: var(--tarde); }
.barra.sin-fecha { background: var(--sin-fecha); }
.barra.choca { box-shadow: inset 0 0 0 2px var(--choque), 0 0 0 1px #fff; background-image: repeating-linear-gradient(135deg, rgba(179,32,42,.55) 0 5px, rgba(179,32,42,0) 5px 10px); }
.barra.fuera { outline: 2px dashed var(--choque); outline-offset: 1px; }
.barra.curso-movida { outline: 2.5px solid var(--choque); outline-offset: 1px; }
.gantt.oscuro .barra.curso-movida, .gantt.oscuro .barra.fuera { outline-color: var(--isla-choque); }
.barra:focus-visible { outline: 3px solid #f2b200; outline-offset: 2px; z-index: 5; }
.gantt-grupo { position: absolute; left: 0; display: flex; align-items: center; gap: 8px; padding-left: 14px; font-size: 13px; font-weight: 600; color: var(--tinta-suave); background: #eaf0f4; border-bottom: 1px solid var(--linea); z-index: 7; cursor: pointer; border: 0; width: auto; min-width: 148px; white-space: nowrap; padding-right: 14px; text-align: left; }
.gantt.oscuro .gantt-grupo { background: #22313d; color: var(--isla-suave); }
.gantt-grupo-banda { position: absolute; left: 0; background: #eaf0f4; border-bottom: 1px solid var(--linea); }
.gantt.oscuro .gantt-grupo-banda { background: #22313d; border-color: var(--isla-borde); }
.gantt-dia small { font-size: 13px; }
.barra.fijada { box-shadow: inset 0 0 0 2px var(--tinta); padding-right: 18px; }
.barra.fijada::after { content: ""; position: absolute; right: 5px; top: 8px; width: 8px; height: 7px; border-radius: 1px; background: #fff; }
.barra.fijada::before { content: ""; position: absolute; right: 6px; top: 4px; width: 4px; height: 5px; border: 1.5px solid #fff; border-bottom: 0; border-radius: 3px 3px 0 0; }
.barra.sel { box-shadow: 0 0 0 2px var(--tarjeta), 0 0 0 4px var(--accion); z-index: 3; }
.barra.misma-orden { box-shadow: 0 0 0 2px var(--tarjeta), 0 0 0 3px var(--accion); z-index: 2; }
.gantt.atenua .barra:not(.sel):not(.misma-orden):not(.ilumina):not(.averia) { opacity: .18; }
.gantt.atenua .barra.ilumina { outline: 3px solid #f2b200; outline-offset: 1px; min-width: 6px; overflow: visible; }
.gantt.atenua .barra.ilumina::before { content: ""; position: absolute; left: 50%; top: -9px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #f2b200; transform: translateX(-50%); }
.leyenda i.cambia { background: #1d6b52; outline: 3px solid #f2b200; outline-offset: 1px; }
.barra.ilumina { z-index: 3; animation: late 1.6s ease-out 1; box-shadow: 0 0 0 2px var(--tarjeta), 0 0 0 4px #f2b200; }
@keyframes late { 0% { box-shadow: 0 0 0 2px var(--tarjeta), 0 0 0 14px rgba(242,178,0,.0); } 25% { box-shadow: 0 0 0 2px var(--tarjeta), 0 0 0 8px rgba(242,178,0,.55); } 100% { box-shadow: 0 0 0 2px var(--tarjeta), 0 0 0 4px #f2b200; } }
.barra.fantasma { background: transparent !important; border: 2px dashed var(--accion); color: var(--accion); z-index: 2; pointer-events: none; }
.barra.averia { background-color: #3a4a57; background-image: repeating-linear-gradient(135deg, #3a4a57 0 6px, #52636f 6px 12px); cursor: default; color: #fff; z-index: 2; }

.gantt-flechas { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 4; overflow: visible; }
.flecha { fill: none; stroke: var(--accion); stroke-width: 1.8; }
.flecha.espera { stroke: var(--tarde); stroke-dasharray: 4 3; }
.flecha.alt { stroke: var(--accion); stroke-dasharray: 5 4; }
.onda { position: absolute; border-radius: 50%; border: 3px solid #f2b200; pointer-events: none; z-index: 6; animation: onda 1.8s ease-out forwards; }
@keyframes onda { from { width: 10px; height: 10px; opacity: .9; transform: translate(-50%,-50%); } to { width: 900px; height: 900px; opacity: 0; transform: translate(-50%,-50%); } }

/* tema oscuro del Gantt, para las islas */
.isla .gantt, .gantt.oscuro { background: var(--isla-alta); color: var(--isla-tinta); }
.gantt.oscuro .gantt-eje { border-color: var(--isla-borde); }
.gantt.oscuro .gantt-dia { border-color: var(--isla-borde); color: var(--isla-suave); }
.gantt.oscuro .gantt-dia b { color: var(--isla-tinta); }
.gantt.oscuro .gantt-fila { border-color: var(--isla-borde); }
.gantt.oscuro .gantt-esquina { border-color: var(--isla-borde); }
.gantt.oscuro .gantt-nombre { background: var(--isla-alta); border-color: var(--isla-borde); color: var(--isla-tinta); }
.gantt.oscuro .gantt-nombre small { color: var(--isla-suave); }
.gantt.oscuro .gantt-rejilla { border-color: var(--isla-borde); }
.gantt.oscuro .gantt-cerrado { background: repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 6px, rgba(255,255,255,0) 6px 12px); }
.gantt.oscuro .barra.a-tiempo { background: #1a7a5c; }
.gantt.oscuro .barra.tarde { background: #b94d20; }
.gantt.oscuro .barra.sin-fecha { background: #566b7a; }
.gantt.oscuro .barra.sel, .gantt.oscuro .barra.misma-orden { box-shadow: 0 0 0 2px var(--isla-alta), 0 0 0 4px var(--isla-accion); }
.gantt.oscuro .flecha { stroke: var(--isla-accion); }
.gantt.oscuro .flecha.espera { stroke: var(--isla-tarde); }
.gantt.oscuro .gantt-ahora { border-color: var(--isla-accion); }
.gantt.oscuro .gantt-ahora span { background: var(--isla-alta); color: var(--isla-accion); }
.gantt.oscuro .barra.fantasma { border-color: var(--isla-accion); color: var(--isla-accion); }

/* ---------- burbuja del porque en la barra ---------- */
.burbuja { position: fixed; z-index: 50; max-width: 340px; background: var(--isla); color: var(--isla-tinta); border-radius: 6px; padding: 10px 12px; font-size: 13px; line-height: 1.45; pointer-events: none; box-shadow: 0 8px 28px rgba(0,0,0,.25); opacity: 0; transition: opacity .12s; }
.burbuja.ver { opacity: 1; }
.burbuja b { color: #fff; }
.burbuja .pie { color: var(--isla-suave); margin-top: 4px; }

/* ---------- leyenda ---------- */
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--tinta-suave); }
.leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.leyenda i { width: 22px; height: 10px; border-radius: 2px; display: inline-block; }
.leyenda i.a-tiempo { background: var(--a-tiempo); }
.leyenda i.tarde { background: var(--tarde); }
.leyenda i.sin-fecha { background: var(--sin-fecha); }
.leyenda i.choca { background: repeating-linear-gradient(135deg, var(--choque) 0 3px, #fff 3px 6px); }
.leyenda i.fuera { border: 2px dashed var(--choque); background: transparent; }
.leyenda i.cerrado { background: var(--cerrado); border: 1px solid var(--linea); }
.leyenda i.cambio { background: repeating-linear-gradient(90deg, #0f4a37 0 2px, #1d6b52 2px 4px); }
.leyenda i.curso { border: 2px solid var(--choque); background: var(--a-tiempo); }

/* ---------- cadena del porque ---------- */
.cadena { display: flex; flex-direction: column; gap: 0; }
.eslabon { position: relative; border: 1px solid var(--linea); border-radius: 6px; background: var(--tarjeta); padding: 10px 12px; }
.eslabon .que { font-size: 13px; color: var(--tinta-tenue); }
.eslabon .dato { font-weight: 600; }
.eslabon .mas { font-size: 13px; color: var(--tinta-suave); }
.eslabon.clic { cursor: pointer; }
.eslabon.clic:hover { border-color: var(--accion); }
.eslabon.causa { border-color: var(--tarde); background: var(--tarde-suave); }
.eslabon.causa.sin-registro { border-color: var(--linea-fuerte); background: var(--sin-fecha-suave); border-style: dashed; }
.eslabon-flecha { height: 26px; display: flex; justify-content: center; }
.isla .eslabon { background: var(--isla-alta); border-color: var(--isla-borde); color: var(--isla-tinta); }
.isla .eslabon .que { color: var(--isla-suave); }
.isla .eslabon .mas { color: var(--isla-suave); }
.isla .eslabon.causa { border-color: var(--isla-tarde); background: rgba(255,144,87,.12); }
.isla .eslabon.causa.sin-registro { border-color: var(--isla-suave); background: rgba(159,179,194,.08); }
.isla .eslabon.clic:hover { border-color: var(--isla-accion); }

.estado-pastilla { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.estado-pastilla.a-tiempo { background: var(--a-tiempo-suave); color: var(--a-tiempo); }
.estado-pastilla.tarde { background: var(--tarde-suave); color: var(--tarde-texto); }
.estado-pastilla.sin-fecha { background: var(--sin-fecha-suave); color: var(--sin-fecha); }
.estado-pastilla.choque { background: var(--choque-suave); color: var(--choque); }

@media (prefers-reduced-motion: reduce) {
  .barra { transition: none; }
  .onda, .barra.ilumina { animation: none; }
}

/* ---------- segunda ronda ---------- */
.gantt-grupo.nivel1 { padding-left: 28px; font-weight: 500; }
.celda-carga { position: absolute; border: 0; border-radius: 3px; color: #fff; font: 600 13px var(--texto); cursor: pointer; padding: 0; overflow: hidden; }
.celda-carga.con-tarde { box-shadow: inset 0 -4px 0 var(--tarde); }
.celda-carga.con-violacion { outline: 2px solid var(--choque); outline-offset: 1px; }
.celda-carga:focus-visible { outline: 3px solid #f2b200; }
.flecha.traslado { stroke-dasharray: 2 4; stroke-width: 2.4; }
.rot-traslado { font: 600 13px var(--texto); fill: var(--accion); }
.gantt.oscuro .rot-traslado { fill: var(--isla-accion); }

/* ---------- piezas de la segunda ronda ---------- */
small { font-size: 13px; }
body { font-size: 14.5px; }
.estado-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: 13px; border: 1.5px solid currentColor; }
.estado-chip.oficial { color: var(--a-tiempo); }
.estado-chip.candidato { color: var(--accion); }
.estado-chip.bloqueado { color: var(--choque); }
.estado-chip.escenario { color: var(--tinta-suave); }
.estado-chip.referencia { color: var(--tarde-texto); }
.estado-chip svg { flex: none; }
.porque5 { font-size: 13.5px; }
.porque5 .porque-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.porque5 h3 { font-family: var(--titular); font-size: 23px; margin: 0; }
.porque5 .porque-sub { color: var(--tinta-suave); margin: 6px 0 10px; }
.porque-violacion { border: 1.5px solid var(--choque); background: var(--choque-suave); color: #7a1017; border-radius: 6px; padding: 8px 10px; margin: 8px 0; }
.capa { border-left: 4px solid var(--linea-fuerte); padding: 2px 0 2px 12px; margin: 12px 0; }
.capa h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.capa p { margin: 3px 0; }
.capa.c-hechos { border-color: var(--tinta); }
.capa.c-derivado { border-color: var(--tarde); }
.capa.c-registrada { border-color: var(--a-tiempo); }
.capa.c-simulada { border-color: var(--accion); }
.capa.c-nodisp { border-color: var(--linea-fuerte); border-left-style: dashed; color: var(--tinta-suave); }
.nota-capa { font-size: 13px; color: var(--tinta-suave); }
.nota-detalle { font-size: 13px; color: var(--tinta-suave); margin: -4px 0 10px; }
.nota-detalle summary { cursor: pointer; text-decoration: underline dotted; }
.nota-detalle ul { margin: 6px 0 0; padding-left: 20px; }
.nota-detalle li + li { margin-top: 4px; }
.por-que { font-size: 13.5px; line-height: 1.45; margin-top: 10px; max-width: 110ch; }
.movimientos { font-size: 13.5px; line-height: 1.45; margin-top: 6px; max-width: 110ch; }
.movimientos > summary { cursor: pointer; color: var(--accion); font-weight: 600; }
.movimientos > p { margin: 8px 0 2px; }
.movimientos > ul { margin: 0 0 4px; padding-left: 20px; }
.enlace-dato { border: 0; background: none; padding: 0; color: var(--accion); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.boton.pequeño { padding: 6px 10px; font-size: 13px; margin-top: 6px; }
.fantasma-boton { background: transparent; border-style: dashed; }
.confirmado { border: 1px solid var(--a-tiempo); border-radius: 6px; padding: 8px 10px; }
.menu-ctx { position: fixed; z-index: 60; background: var(--tarjeta); border: 1px solid var(--linea-fuerte); border-radius: 8px; box-shadow: 0 12px 34px rgba(16,24,32,.22); padding: 6px; min-width: 280px; }
.menu-tit { font-size: 13px; color: var(--tinta-suave); padding: 6px 10px 4px; }
.menu-sep { height: 1px; background: var(--linea); margin: 5px 4px; }
.menu-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 5px; cursor: pointer; font-size: 14px; }
.menu-item small { display: block; color: var(--tinta-suave); font-size: 13px; }
.menu-item:hover, .menu-item:focus { background: var(--accion-suave); }
.menu-item:focus-visible { outline: 2px solid var(--accion); outline-offset: -2px; }
.ejecutabilidad { background: var(--tarjeta); border-radius: 8px; box-shadow: var(--sombra); padding: 16px 20px; border-left: 5px solid var(--choque); }
.ejecutabilidad h2 { font-family: var(--titular); font-size: 26px; margin: 0 0 4px; }
.ejecutabilidad p { margin: 4px 0; }
.tabla-comp, .tabla-contrato { width: 100%; border-collapse: collapse; background: var(--tarjeta); font-size: 14px; }
.tabla-comp { margin-top: 18px; border-radius: 8px; box-shadow: var(--sombra); overflow: hidden; }
.tabla-comp caption { text-align: left; font-family: var(--titular); font-size: 20px; font-weight: 700; padding: 0 0 8px; }
.tabla-comp th, .tabla-comp td, .tabla-contrato th, .tabla-contrato td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-comp thead th, .tabla-contrato thead th { background: #eaf0f4; font-weight: 600; }
.tabla-comp tbody th { font-weight: 500; }
.tabla-comp td:nth-child(2), .tabla-comp td:nth-child(3) { font-variant-numeric: tabular-nums; font-weight: 600; }
.tabla-comp td:last-child { color: var(--tinta-suave); font-size: 13px; }
.tabla-comp .grupo-fila td { background: #f6f9fb; font-weight: 600; color: var(--tinta-suave); font-size: 13px; padding: 6px 12px; }
.d-mejor { color: var(--a-tiempo); font-weight: 600; }
.d-peor { color: var(--tarde-texto); font-weight: 600; }
.d-igual, .d-neutro { color: var(--tinta-suave); }
.contrato { background: var(--tarjeta); border-radius: 8px; box-shadow: var(--sombra); margin-top: 18px; padding: 12px 16px; }
.contrato summary { cursor: pointer; font-size: 15px; }
.contrato summary span { color: var(--tinta-suave); font-size: 13.5px; margin-left: 6px; }
.tabla-contrato { margin-top: 10px; font-size: 13.5px; }
.tabla-contrato small { color: var(--tinta-suave); font-weight: 400; }
.cambios-lineas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.grupo-lineas { background: var(--tarjeta); border-radius: 8px; box-shadow: var(--sombra); padding: 10px 14px; border-top: 4px solid var(--linea-fuerte); }
.grupo-lineas.mejor { border-top-color: var(--a-tiempo); }
.grupo-lineas.peor { border-top-color: var(--tarde); }
.grupo-lineas summary { cursor: pointer; }
.grupo-lineas summary b { font-family: var(--titular); font-size: 22px; margin-right: 4px; }
.grupo-lineas ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; max-height: 190px; overflow-y: auto; }
.grupo-lineas li { margin: 3px 0; }

/* El plan actual de la planta: solo se consulta, y su única acción es hacer una copia (decisión del 11-oct-2026). */
.franja.solo-lectura{display:flex;align-items:center;justify-content:space-between;gap:6px 18px;padding:8px 14px;margin:0 0 14px;background:var(--tarjeta);border:1px solid var(--linea);border-left:4px solid var(--accion);border-radius:8px;font-size:14px;color:var(--tinta)}
.franja.solo-lectura form{margin:0;flex:none}


/* Las paginas de la web de AMPE sobre el sistema de la segunda ronda de maquetas (comun.css,
   que va delante): base clara de taller, islas oscuras donde se ensena producto, Barlow
   Condensed en titulares, IBM Plex Sans en texto, y los colores de estado del plan solo para
   eso. Lo que sigue son las piezas de pagina que la maqueta no tenia: entrada, lista y
   administracion, y lo que hace falta para el movil. */
[hidden], .oculta { display: none !important; }
a { color: var(--accion); }
h1, h2, h3 { margin: 0; }

/* ---------- vistas de un plan, bajo la cabecera común (interfaz/cabecera-app.css) ---------- */
/* El mismo alto que la fila de pestañas de la interfaz (`--alto-pestanas`, 32 px): al pasar de una a otra no salta. */
.barra-vistas { display: flex; align-items: stretch; box-sizing: border-box; height: 32px; padding: 0 14px; background: var(--tarjeta); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 30; font-family: "IBM Plex Sans", system-ui, sans-serif; }
.pestanas { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a, .pestanas button { display: flex; align-items: center; white-space: nowrap; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: transparent; padding: 0 12px; font-weight: 500; color: var(--tinta-suave); cursor: pointer; font-size: 13px; text-decoration: none; }
.pestanas a:hover, .pestanas button:hover { color: var(--tinta); }
/* Mientras el plan calcula, el Gantt y Pedidos siguen en su sitio, sin enlace (ADP-899). */
.pestanas .pestana-desactivada { display: flex; align-items: center; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: 0 12px; font-weight: 500; font-size: 13px; color: var(--tinta-suave); opacity: .55; cursor: not-allowed; }
/* La activa se marca con un trazo y no con negrita: la negrita ensancha el texto y las pestañas de la derecha se movían 2 o 3 px
   al cambiar de pantalla (QA del piloto del 12-oct-2026). */
.pestanas [aria-current="page"], .pestanas [aria-selected="true"] { color: var(--tinta); text-shadow: 0 0 .6px currentColor; border-bottom-color: var(--tinta); }
.subbarra { display: flex; gap: 18px; padding: 8px 28px; font-size: 13.5px; color: var(--tinta-suave); background: #eaf0f4; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.subbarra b { color: var(--tinta); }
.subbarra .fin { margin-left: auto; }

/* ---------- hoja ---------- */
/* Ancho entero hasta su máximo, tenga lo que tenga dentro: con la Mesa sin tablas (#919) la hoja se encogía a su
   contenido y la regla de 2.400 de ADP-791 (#933) no se notaba. */
.hoja { padding: 22px 28px 40px; width: 100%; max-width: 1480px; margin: 0 auto; }
.hoja > h1 { font-family: var(--titular); font-size: 34px; margin: 4px 0 16px; }
.tarjeta { background: var(--tarjeta); border-radius: 8px; box-shadow: var(--sombra); padding: 16px 18px; margin-bottom: 16px; }
.tarjeta h2 { font-family: var(--titular); font-size: 22px; margin-bottom: 10px; }
.ayuda { color: var(--tinta-suave); font-size: 13.5px; margin: 8px 0 0; }
.aviso { border-radius: 6px; padding: 9px 12px; margin: 0 0 14px; font-size: 14px; }
.aviso.mal { background: var(--choque-suave); color: var(--choque); }
.aviso.bien { background: var(--a-tiempo-suave); color: var(--a-tiempo); }
.boton { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-height: 38px; color: var(--tinta); }
.boton.primario { color: #fff; }
.boton.pequeño, .boton.pequeno { padding: 5px 10px; min-height: 30px; font-size: 13px; }

/* ---------- formularios ---------- */
label { display: block; font-size: 13px; color: var(--tinta-suave); margin: 0 0 5px; font-weight: 500; }
input, select { font: inherit; font-size: 14.5px; color: var(--tinta); background: var(--tarjeta); border: 1px solid var(--linea-fuerte); border-radius: 6px; padding: 9px 11px; width: 100%; min-height: 42px; }
input:focus, select:focus { outline: 2px solid var(--accion); outline-offset: 0; border-color: var(--accion); }
/* Una casilla no es un campo de texto: sin el ancho, el alto ni el relleno de arriba, y su etiqueta a su lado (ADP-260). */
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: var(--accion); }
label.casilla { display: inline-flex; align-items: center; gap: 7px; margin: 0 16px 0 0; font-size: 14px; font-weight: 500; color: var(--tinta); white-space: nowrap; }
.alta-form fieldset { margin: 0; min-height: 42px; padding: 6px 11px; border: 1px solid var(--linea-fuerte); border-radius: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.alta-form fieldset legend { font-size: 13px; color: var(--tinta-suave); font-weight: 500; padding: 0 4px; }
.lanzar-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.lanzar-form > div { min-width: 280px; }
.lanzar-form .ayuda-penalizacion, .lanzar-form .ayuda-horizonte, .lanzar-form .ayuda-modo, .lanzar-form .ayuda-limite-cambios { flex-basis: 100%; margin: -4px 0 0; }
.lanzar-form > .limite-semanas { min-width: 0; }
.lanzar-form .limite-semanas .par { display: flex; align-items: center; gap: 8px; }
.lanzar-form .limite-semanas input { width: 6em; }
.lanzar-form .a-medida { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 10px 14px; border: 1px solid var(--linea); border-radius: 8px; padding: 10px 14px 14px; margin: 0; }
.lanzar-form .a-medida[hidden] { display: none; }
.lanzar-form .a-medida legend { font-size: 13px; color: var(--tinta-suave); padding: 0 4px; }
.lanzar-form .a-medida label { display: flex; flex-direction: column; gap: 4px; }
.alta-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }

/* ---------- tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; background: var(--tarjeta); box-shadow: var(--sombra); border-radius: 8px; overflow: hidden; font-size: 14px; }
.tabla th, .tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla thead th { background: #eaf0f4; font-weight: 600; font-size: 13px; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: #f6f9fb; }
.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla td small { display: block; color: var(--tinta-suave); font-size: 12.5px; }
.tabla form { margin: 0; }
.enlace-plan { font-weight: 600; color: var(--accion); text-decoration: none; }
.enlace-plan:hover { text-decoration: underline; }
.estado-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chip { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--linea-fuerte); color: var(--tinta-suave); white-space: nowrap; }
.chip.bien { color: var(--a-tiempo); border-color: var(--a-tiempo); background: var(--a-tiempo-suave); }
.chip.mal { color: var(--choque); border-color: var(--choque); background: var(--choque-suave); }
.chip.espera { color: var(--accion); border-color: var(--accion); background: var(--accion-suave); }

/* ---------- entrada: la isla oscura ensena producto ---------- */
.entrada { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--papel); }
.entrada-caja { width: 100%; max-width: 980px; display: grid; grid-template-columns: 1.15fr 1fr; border-radius: 10px; overflow: hidden; box-shadow: var(--sombra); }
.entrada .isla { background: var(--isla); color: var(--isla-tinta); padding: 40px 38px; display: flex; flex-direction: column; gap: 18px; }
.entrada .isla .marca { color: var(--isla-tinta); font-size: 30px; }
/* Con la marca de la instalación en el sitio de la de AMPE, solo su nombre: el logotipo del cliente exige sesión. */
.entrada .isla .marca.solo-nombre { overflow-wrap: anywhere; }
.entrada .isla h1 { font-family: var(--titular); font-size: 38px; line-height: 1.05; color: #fff; }
.entrada .isla p { margin: 0; color: var(--isla-suave); font-size: 15px; }
.mini-gantt { display: block; width: 100%; height: auto; margin-top: 6px; }
.entrada-form { background: var(--tarjeta); padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; }
.entrada-form h2 { font-family: var(--titular); font-size: 28px; margin-bottom: 18px; }
.entrada-form input { margin-bottom: 14px; }
.entrada-form .boton { width: 100%; margin-top: 4px; min-height: 44px; font-size: 15px; }
.nota-pie { margin: 16px 0 0; color: var(--tinta-suave); font-size: 13px; }

/* ---------- plan: cabecera, mesa y cajon ---------- */
.cabecera { display: grid; grid-template-columns: 1.1fr 1.5fr 1.1fr auto; gap: 12px; margin-bottom: 12px; }
.bloque-cab { background: var(--tarjeta); border-radius: 8px; box-shadow: var(--sombra); padding: 10px 14px; font-size: 13.5px; }
.bloque-cab h3 { margin: 0 0 4px; font-size: 13px; color: var(--tinta-suave); font-weight: 600; }
/* Una fila por indicador: la cifra a la derecha de su columna, con cifras de ancho fijo para que se lean
   escalonadas, y el rótulo en la suya. La nota del ámbito, debajo y en pequeño. */
.bloque-cab .cifras { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 10px; align-items: baseline; }
.bloque-cab .cifras > .fila { display: contents; }
.bloque-cab .cifras .r { white-space: normal; }
.bloque-cab .cifras b { font-family: var(--titular); font-size: 20px; color: var(--tinta); text-align: right; font-variant-numeric: tabular-nums; }
/* El plan estable (ADP-762): sus cambios frente al plan actual y, en una etiqueta, si respetó el límite. */
.linea-estabilidad { margin: 4px 0 8px; line-height: 1.45; }
.bloque-cab .linea-estabilidad { margin: 6px 0 0; }
.linea-estabilidad .chip { margin-left: 2px; vertical-align: baseline; }
.linea-cuello { margin: 6px 0 0; line-height: 1.45; }
.fila-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin: 1em 0; }
.fila-acciones > p { margin: 0; }
.fila-acciones .linea-cuello { margin: 0; max-width: 72ch; color: var(--tinta-suave); font-size: 14px; }
.linea-cuello .chip { margin-left: 2px; vertical-align: baseline; white-space: normal; overflow-wrap: anywhere; }
.bloque-cab .nota-capa { font-size: 11.5px; line-height: 1.35; color: var(--tinta-suave); margin-top: 6px; }
.bloque-cab .cifras b.mejor { color: var(--a-tiempo); }
/* La distancia al óptimo, dentro de «Horizonte y datos» (ADP-535): separada por una raya, el desglose por nivel flota
   para no alargar la cabecera. */
.cota-plan { border-top: 1px solid var(--linea); margin-top: 8px; padding-top: 8px; position: relative; }
.cota-plan .cota-titular { line-height: 1.4; }
.cota-plan .nota-capa { font-size: 12.5px; }
.cota-plan .cota-titular b { color: var(--tinta); }
.cota-plan .cota-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12.5px; color: var(--tinta-suave); }
.cota-plan .cota-pedir { margin: 0; flex: none; }
.cota-niveles { margin-top: 4px; font-size: 12.5px; }
.cota-niveles summary { cursor: pointer; color: var(--accion); width: max-content; border-radius: 4px; padding-block: 4px; }
.cota-niveles summary:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
/* «Cómo se calcula» se abre dentro de la página y empuja lo de abajo, nunca encima (ADP-775). */
.cota-niveles[open] > .cota-como-cuerpo { margin: 6px 0 2px; padding: 10px 12px; list-style: none; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio, 8px); }
.cota-como-cuerpo { line-height: 1.45; color: var(--tinta); font-size: 13px; }
.cota-como-cuerpo p { margin: 6px 0 0; max-width: 75ch; }
.cota-como-cuerpo .cota-como-nivel { margin: 0 0 6px; color: var(--tinta-suave); font-size: 12.5px; }
.cota-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; max-width: 46rem; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 6px; }
.cota-cifras > div { padding: 6px 12px; min-width: 0; }
.cota-cifras > div + div { border-left: 1px solid var(--linea); }
.cota-cifras dt { font-size: 12px; color: var(--tinta-suave); }
.cota-cifras dd { margin: 2px 0 0; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cota-mas { margin-top: 8px; font-size: 12.5px; }
.cota-mas summary { cursor: pointer; color: var(--accion); width: max-content; border-radius: 4px; padding-block: 4px; }
.cota-mas summary:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
.cota-mas ul { margin: 4px 0 0; padding-left: 1.1em; color: var(--tinta-suave); max-width: 75ch; }
.cota-mas li + li { margin-top: 3px; }
.cota-como-cuerpo .cota-fuente { color: var(--tinta-suave); }
.cota-detalles { display: block; margin-top: 4px; }
@media (max-width: 480px) {
  .cota-cifras { grid-template-columns: minmax(0, 1fr); }
  .cota-cifras > div + div { border-left: 0; border-top: 1px solid var(--linea); }
}
/* La distancia de cada nivel del criterio (ADP-769): una fila por nivel, el rótulo en su columna para que se alineen. */
.cota-plan .cota-entrada { font-size: 12.5px; color: var(--tinta-suave); }
.cota-por-nivel { list-style: none; margin: 2px 0 0; padding: 0; font-size: 13px; line-height: 1.4; }
.cota-por-nivel li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); column-gap: 6px; }
.cota-por-nivel li + li { margin-top: 3px; }
.cota-por-nivel .nivel { color: var(--tinta-suave); font-variant-numeric: tabular-nums; justify-self: start; }
.cota-por-nivel .cota-que-mide { overflow-wrap: anywhere; }
.cota-por-nivel .cota-cifra { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cota-por-nivel .sin-cifra .cota-cifra { font-weight: 400; color: var(--tinta-suave); }
.cota-por-nivel .cota-cifra .termino { white-space: nowrap; }
.cota-signo { font-weight: 600; }
.cota-signo.mejor { color: var(--a-tiempo); }
.cota-signo.peor { color: var(--choque); }
.sigue-cambios { list-style: none; margin: 4px 0 2px; padding: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sigue-cambios li + li { margin-top: 2px; }
.sigue-cambios .nivel { color: var(--tinta-suave); margin-right: 4px; }
/* En un móvil el botón baja a su línea antes que partir el «Sigue buscando: 30 min de 1 h.» */
.sigue-plan .cota-pie { flex-wrap: wrap; }
.sigue-plan .cota-pie > :last-child { margin-left: auto; }
.sigue-plan .sigue-reloj { white-space: nowrap; }
.sigue-distancia { line-height: 1.4; margin-top: 2px; font-variant-numeric: tabular-nums; }
.sigue-distancia b { color: var(--tinta); }
/* Las tres cifras del plan mejor en una línea: «Cómo se calcula» va uno solo, el de este plan (ADP-775, 21-oct). */
.sigue-cifras { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 4px 0 0; font-size: 13px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.sigue-cifras b { color: var(--tinta); font-weight: 600; }
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.bloque-cab.ok { border-left: 4px solid var(--a-tiempo); }
.bloque-cab.mal { border-left: 4px solid var(--choque); }
.mesa { display: block; }
/* Sin el Gantt de la cabina al lado, lo que pide atención ocupa el ancho y sus grupos van en columnas. */
.bandeja { background: var(--tarjeta); border-radius: 8px; box-shadow: var(--sombra); padding: 10px 0; max-height: calc(100vh - 250px); overflow-y: auto; }
.bandeja { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-content: start; }
/* La cabecera de la Mesa crece con sus notas: la bandeja toma el alto que queda en la caja y desplaza dentro. */
@media (min-width: 761px) {
  main:has(> #v-mesa) { display: flex; flex-direction: column; }
  #v-mesa { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }
  #v-mesa > * { flex: none; }
  #v-mesa > .mesa { flex: 1 1 0; min-height: 160px; display: flex; flex-direction: column; }
  #v-mesa .bandeja { flex: 1 1 0; min-height: 0; max-height: none; }
}
/* En una pantalla baja el margen de debajo cede su alto a la bandeja, que no baja de 160 px. */
@media (min-width: 761px) and (max-height: 700px) {
  #v-mesa { padding-bottom: 0; }
}
/* ADP-789. Más de 1.920 px: la Mesa se queda en 2.400 px centrados y lo que pide atención reparte cada grupo en
   columnas en vez de una lista larga y estrecha. Un grupo corto (hasta tres líneas) no crece. Hasta 1.920, como antes. */
@media (min-width: 1921px) {
  #v-mesa { width: 100%; max-width: 2400px; margin-inline: auto; }
  /* La página del plan sin las tablas del árbitro (Ficha del plan con los datos de una planta) y las demás hojas: también
     2.400, no 1.480 en medio de la pantalla (piloto, ADP-791). */
  .hoja { max-width: 2400px; }
  .bandeja { display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: 8px; }
  .bandeja > h2, .bandeja > .nota-capa { flex: 1 0 100%; }
  .bandeja > .grupo { flex: 1 1 360px; min-width: 0; columns: 340px; column-gap: 8px; }
  .bandeja > .grupo:not(:has(> :nth-child(5))) { flex: 0 1 420px; }
  .bandeja > .grupo > h3, .bandeja > .grupo > .mas { column-span: all; }
  /* El título y su cuenta, del ancho de una columna: a todo el grupo la cuenta se iba al otro extremo. */
  .bandeja > .grupo > h3 { max-width: 420px; }
  .bandeja > .grupo > .item { break-inside: avoid; }
}
.bandeja > h2, .bandeja > .nota-capa { grid-column: 1 / -1; }
.bandeja h2 { font-family: var(--titular); font-size: 21px; padding: 0 16px; }
.grupo h3 { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; margin: 12px 0 2px; padding: 0 16px; }
.grupo h3 .n { margin-left: auto; font-family: var(--titular); font-size: 18px; }
.grupo h3 .punto { width: 9px; height: 9px; border-radius: 50%; align-self: center; flex: none; }
.grupo h3 .punto.tarde { background: var(--tarde); }
.grupo h3 .punto.sin-fecha { background: var(--sin-fecha); }
.grupo h3 .punto.choque { background: var(--choque); }
.item { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid transparent; background: transparent; padding: 6px 16px 6px 33px; font-size: 13.5px; color: var(--tinta-suave); cursor: pointer; }
.item b { color: var(--tinta); }
.item:hover, .item:focus { background: var(--papel); border-left-color: var(--accion); }
.grupo .mas { padding: 2px 16px 0 33px; margin: 0; }
.centro-mesa { min-width: 0; }
.filtros { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.filtros input[type=search] { width: 220px; min-height: 36px; padding: 7px 10px; font-size: 14px; }
.filtros .cuenta { margin-left: auto; font-size: 13.5px; color: var(--tinta-suave); }
/* Alto a la medida de las maquinas que haya, con tope: con tres maquinas no sobra media pantalla. */
/* El lienzo mide lo que pide el dibujante, sin encogerlo: con un alto maximo el navegador lo
   aplastaba y los nombres de maquina y el eje dejaban de leerse. Lo que no cabe, se desplaza. */
canvas#gantt { max-height: none; }
.lienzo-caja { max-height: calc(100vh - 220px); overflow: auto; }
.leyenda { margin-top: 8px; }
.cajon { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100vw; background: var(--tarjeta); z-index: 40; box-shadow: -18px 0 44px rgba(16,24,32,.2); overflow-y: auto; padding: 18px 20px 24px; transform: translateX(105%); visibility: hidden; transition: transform .3s cubic-bezier(.3,.7,.2,1), visibility 0s linear .3s; }
.cajon.abierto { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.3,.7,.2,1), visibility 0s; }
.cajon .cerrar { position: absolute; right: 14px; top: 14px; }
.vista-plan { padding: 16px 28px 28px; }
.comp-gantt { margin-top: 18px; }
.comp-gantt .cab { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.comp-gantt h3 { font-family: var(--titular); font-size: 21px; margin: 0; }
.titular-comp { font-family: var(--titular); font-size: 26px; margin: 0 0 12px; }
.marco { display: block; width: 100%; height: calc(100vh - 170px); min-height: 560px; border: 0; border-radius: 8px; box-shadow: var(--sombra); background: var(--tarjeta); }
.en-curso { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; align-items: center; }
.en-curso h2 { margin: 0; }
.en-curso .registro { grid-column: 1 / -1; }
/* El progreso de un cálculo para personas (ADP-360): fases, tiempo y el mejor plan hasta ahora. */
/* Ancho fijo: sin él la tarjeta cambia de ancho con cada fase y la página salta. */
.en-curso { align-items: start; box-sizing: border-box; width: 900px; max-width: 100%; }
.en-curso .girando { margin-top: 4px; }
.progreso-fases { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 0; margin: 12px 0 0; font-size: 13.5px; }
.progreso-fases li { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linea); color: var(--tinta-suave); background: var(--tarjeta); }
.progreso-fases li.hecha { color: var(--a-tiempo); border-color: var(--a-tiempo-suave); background: var(--a-tiempo-suave); }
.progreso-fases li.hecha::before { content: "✓ "; }
.progreso-fases li.en_curso { color: var(--tinta); border-color: var(--accion); font-weight: 600; }
.progreso-tiempo { margin: 12px 0 0; font-size: 14px; color: var(--tinta); }
.progreso-tiempo span + span::before { content: " · "; color: var(--tinta-suave); }
.progreso-mejor { margin-top: 14px; }
.progreso-mejor h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.progreso-mejor dl { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; }
.progreso-mejor dt { font-size: 12.5px; color: var(--tinta-suave); }
.progreso-mejor dd { margin: 0; font-family: var(--titular); font-size: 22px; font-variant-numeric: tabular-nums; }
.girando { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--linea); border-top-color: var(--accion); animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.registro { background: #f6f9fb; border: 1px solid var(--linea); border-radius: 6px; padding: 10px 12px; margin: 0; font: 12.5px/1.5 ui-monospace, monospace; max-height: 260px; overflow: auto; white-space: pre-wrap; color: var(--tinta-suave); }
.termino { border-bottom: 1px dotted var(--tinta-tenue); cursor: help; }
#tooltip { position: fixed; z-index: 60; max-width: 44ch; background: var(--isla); color: var(--isla-tinta); font-size: 13px; line-height: 1.45; padding: 10px 12px; border-radius: 6px; pointer-events: none; box-shadow: 0 8px 26px rgba(16,24,32,.28); }
#tooltip .globo-mas { display: block; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }

/* ---------- movil ---------- */
@media (max-width: 1100px) {
  .cabecera { grid-template-columns: 1fr 1fr; }
  .mesa { grid-template-columns: 1fr; }
  .bandeja { max-height: 320px; min-height: 0; }
  .alta-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .barra-vistas { padding: 0 8px; }
  .subbarra { padding: 8px 14px; gap: 4px 14px; }
  .subbarra .fin { margin-left: 0; }
  .hoja, .vista-plan { padding: 16px 14px 32px; }
  .hoja > h1 { font-size: 30px; }
  .cabecera { grid-template-columns: 1fr; }
  .filtros input[type=search] { width: 100%; }
  .lienzo-caja { max-height: 70vh; }
  .lanzar-form > div, .lanzar-form .boton { width: 100%; min-width: 0; }
  .alta-form { grid-template-columns: 1fr; }
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla { background: transparent; box-shadow: none; }
  .tabla tr { background: var(--tarjeta); box-shadow: var(--sombra); border-radius: 8px; margin-bottom: 10px; padding: 4px 0; }
  .tabla td { border: 0; padding: 5px 14px; display: flex; justify-content: space-between; gap: 14px; text-align: right; }
  .tabla td::before { content: attr(data-titulo); color: var(--tinta-suave); font-size: 12.5px; text-align: left; }
  .tabla td[data-titulo=""]::before { content: none; }
  .tabla td small { display: inline; margin-left: 6px; }
  /* «Qué cuenta» es texto, no una cifra: debajo de su rótulo y a lo ancho de la tarjeta, cada frase en su renglón. En
     fila, el rótulo y sus dos frases se partían el ancho en tres columnas estrechas (ADP-549). */
  .tabla td[data-titulo="Qué cuenta"] { flex-wrap: wrap; gap: 2px 14px; text-align: left; }
  .tabla td[data-titulo="Qué cuenta"]::before, .tabla td[data-titulo="Qué cuenta"] > div { flex-basis: 100%; }
  .tabla td[data-titulo="Qué cuenta"] small { margin-left: 0; }
  .entrada-caja { grid-template-columns: 1fr; }
  .entrada .isla, .entrada-form { padding: 26px 22px; }
  .entrada .isla h1 { font-size: 30px; }
  .cajon { width: 100vw; }
  .tabla-comp, .tabla-contrato { display: block; overflow-x: auto; }
  .cambios-lineas { grid-template-columns: 1fr; }
}

/* ---------- mesa de control: mandos y porqué del dibujante de la cabina ---------- */
.mandos-gantt { gap: 8px 12px; }
.mandos-gantt .lab { font-size: 13px; color: var(--tinta-suave); font-weight: 600; }
.grupo-botones { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-right: 10px; }
.grupo-botones .btn { font: inherit; font-size: 13px; background: var(--tarjeta); color: var(--tinta-suave); border: 1px solid var(--linea); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.grupo-botones .btn[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
/* Mesa y Detalle técnico: la cara activa se ve, no solo se anuncia (ADP-747). */
.grupo-botones .boton[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.grupo-botones .btn .apagado { color: inherit; opacity: .7; font-size: 12px; }
/* Sin relleno: el dibujante mide el ancho del padre, y con relleno el lienzo se encogia al
   pintarse y las letras salian borrosas. */
.lienzo-caja { background: var(--tarjeta); border-radius: 8px; box-shadow: var(--sombra); }
.lienzo-caja canvas { display: block; width: 100%; outline-offset: -2px; }
.leyenda .muestra { display: inline-block; width: 11px; height: 11px; margin-right: 5px; border: 1px solid var(--tinta); vertical-align: -1px; }
#panel-porque dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 14px 0 0; font-size: 14px; }
#panel-porque dt { color: var(--tinta-suave); }
#panel-porque dd { margin: 0; }
#panel-porque .vacio { color: var(--tinta-suave); }
.cajon h2 { font-family: var(--titular); font-size: 25px; padding-right: 80px; }
.def { border-bottom: 1px dotted var(--tinta-tenue); cursor: help; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bandeja div.item { cursor: default; }

/* ---------- del pedido a la maquina ---------- */
.resumen-ped { display: flex; gap: 10px 26px; align-items: baseline; margin-bottom: 12px; font-size: 14px; color: var(--tinta-suave); flex-wrap: wrap; }
.resumen-ped b { font-family: var(--titular); font-size: 28px; color: var(--tinta); margin-right: 6px; }
.filtros-ped { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.filtros-ped a { text-decoration: none; font-weight: 600; font-size: 14px; color: var(--tinta-suave); background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 999px; padding: 7px 14px; }
.filtros-ped a[aria-current] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
/* «Qué quieres calcular» de Lanzar un plan (ADP-782): lo del escenario, apagado sin plan en curso. */
.que-calcular { margin-bottom: 12px; }
.que-calcular .apagada { font-weight: 600; font-size: 14px; color: var(--tinta-suave); border: 1px dashed var(--linea); border-radius: 999px; padding: 7px 14px; opacity: .7; }
#que-calcular-nota { margin: -4px 0 12px; font-size: 13.5px; }
.linea-ped { background: var(--tarjeta); border-radius: 8px; box-shadow: var(--sombra); margin-bottom: 8px; }
.linea-ped summary { display: grid; grid-template-columns: 1.3fr 1.2fr .8fr .8fr .8fr 1fr .9fr; gap: 12px; align-items: center; padding: 11px 16px; cursor: pointer; list-style: none; font-size: 14px; }
.linea-ped summary::-webkit-details-marker { display: none; }
.linea-ped summary > span { display: flex; flex-direction: column; min-width: 0; }
.linea-ped summary small { color: var(--tinta-tenue); font-size: 12.5px; }
.linea-ped summary .num { text-align: right; align-items: flex-end; }
.linea-ped[open] summary { border-bottom: 1px solid var(--linea); }
.tabla-ordenes { width: calc(100% - 32px); margin: 10px 16px 14px; border-collapse: collapse; font-size: 14px; }
.tabla-ordenes th, .tabla-ordenes td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--linea); }
.tabla-ordenes .num { text-align: right; }
.linea-ped .ayuda { margin: 10px 16px 14px; }
.chip.tarde { color: var(--tarde-texto); border-color: var(--tarde); background: var(--tarde-suave); }
@media (max-width: 900px) {
  .linea-ped summary { grid-template-columns: 1fr 1fr; }
  .linea-ped summary .num { text-align: left; align-items: flex-start; }
}

/* Simulador de perfiles (ADP-154) */
.en-linea { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.en-linea select { max-width: 240px; }
/* Con etiqueta encima de cada campo, todo se alinea por abajo: el selector, el de fase y el botón. Y no se parte:
   con un «Qué busca» largo al lado, es esa columna la que cede y no la fila del formulario. */
.en-linea.con-etiquetas { align-items: flex-end; flex-wrap: nowrap; }
.en-linea.con-etiquetas > div { display: flex; flex-direction: column; gap: 4px; }
/* «Volver a la anterior» con lo que de la anterior hoy no se aplica (segunda ronda de ampe#1143): el aviso ocupa la fila
   entera del formulario, encima del motivo y la firma, y su lista desplaza en su sitio si es larga. */
.en-linea.con-etiquetas:has(> .ajustes-vuelta) { flex-wrap: wrap; }
.en-linea.con-etiquetas > .ajustes-vuelta { display: grid; gap: 4px; flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.45; }
.ajustes-vuelta p { margin: 0; font-weight: 600; }
.ajustes-vuelta ul { margin: 0; padding-left: 18px; max-height: min(26vh, 168px); overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; }
.ajustes-vuelta ul:focus-visible { outline: 2px solid var(--foco, currentColor); outline-offset: 2px; border-radius: 4px; }
.perfil-form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.perfil-form > .campo-peso { max-width: 420px; }
.pesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 18px;
  align-items: end; }  /* una etiqueta de dos líneas no baja su campo frente a los de su fila */
.campo-peso { display: flex; flex-direction: column; gap: 4px; }
.campo-peso label { font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.campo-peso label small { color: var(--tinta-tenue); font-weight: 400; }
.perfil-form .boton { align-self: flex-start; }
.ejemplos { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--linea); color: var(--tinta-suave); }
.tabla-perfil td.peor { color: var(--tarde-texto); background: var(--tarde-suave); }
.tabla-perfil td small { display: block; font-size: 12px; color: var(--tarde-texto); }
/* Valoración con pesos de Prioridades del plan (ADP-769): otra cifra que la distancia al óptimo, en su propia tarjeta. */
.aviso.ojo { background: var(--tarde-suave); color: var(--tarde-texto); }
.valoracion .aviso { margin-top: 10px; }
.peso-campo { display: inline-flex; align-items: center; gap: 4px; }
.tabla-valoracion th small { color: var(--tinta-suave); font-weight: 400; margin-left: 4px; }
.tabla-valoracion td.peso { width: 1%; }
.tabla-valoracion td.peso input { width: 6em; text-align: right; font: inherit; font-variant-numeric: tabular-nums; padding: 4px 6px; }
.tabla-valoracion tfoot th, .tabla-valoracion tfoot td { border-top: 2px solid var(--linea); font-weight: 600; }
.valoracion-cifra { font-size: 18px; font-variant-numeric: tabular-nums; }
.valoracion-fuera { font-size: 13px; color: var(--tinta-suave); margin: 10px 0 0; }
.valoracion-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.valoracion-calcula { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
.valoracion-calcula small { color: var(--tinta-suave); font-size: 12.5px; flex: 1 1 18em; }
@media (max-width: 640px) {
  .tabla-valoracion tfoot, .tabla-valoracion tfoot tr { display: block; }
  .tabla-valoracion tfoot th { display: none; }
  .tabla-valoracion td.peso { width: 100%; }
  .valoracion-botones .boton, .valoracion-calcula .boton { width: 100%; }
}
@media (max-width: 640px) {
  .en-linea, .en-linea select, .en-linea .boton { width: 100%; max-width: none; }
  .en-linea.con-etiquetas { flex-wrap: wrap; }
  .perfil-form .boton { align-self: stretch; }
}
.nowrap { white-space: nowrap; }
small.bloque { display: block; color: var(--tinta-suave); font-size: 12px; }

/* «Ayuda de esta pantalla» en las pantallas de la barra antigua (Planes, Simulador, Registro). */
.como-pantalla{margin:-6px 0 14px}
.como-pantalla a{display:inline-flex;align-items:center;min-height:28px;font-size:13px}
#uso-ayuda{margin-top:16px;display:grid;gap:8px}
#uso-ayuda h3{margin-top:6px}
#uso-ayuda ol{margin:0;padding-left:20px}

/* Escritorio sin scroll de página, como la interfaz (base.css): la cabecera, la fila de vistas y la subbarra quedan
   fijas y el contenido desplaza dentro de su caja, el `main` de la pantalla o la vista del Comparador de la cabina,
   que trae su propio `main` dentro. Solo donde existe esa caja, para no recortar nada. */
@media (min-width: 761px) {
  html:has(> body > :is(main, .vista-comparador)) { height: 100%; }
  body:has(> :is(main, .vista-comparador)) { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
  body:has(> :is(main, .vista-comparador)) > :not(main, .vista-comparador) { flex: none; }
  /* `relative`: lo absoluto de dentro (los resúmenes solo para lectores) se queda en la caja y no alarga la página. */
  body > :is(main, .vista-comparador) { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-gutter: stable;
    position: relative; }
}

/* Áreas dentro de la planta (ADP-346): la línea de cada cuenta en Usuarios y la pantalla Áreas de Ajustes. */
.areas-linea { display: block; font-size: 14px; }
.areas-cambiar { margin-top: 4px; }
.areas-cambiar summary { cursor: pointer; color: var(--tinta-suave); font-size: 13px; }
.areas-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.areas-niveles { display: flex; flex-direction: column; gap: 6px; }
.area-nivel { display: grid; grid-template-columns: minmax(0, 1fr) 132px; align-items: center; gap: 12px; font-size: 14px; }
.area-nivel.sub span { padding-left: 14px; }
.area-nivel select { width: 100%; }
.areas-intro { margin: 0 0 20px; max-width: 80ch; }
.area-nueva { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.area-nueva .area-recursos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; }
.area-nueva .area-recursos .etiqueta { width: 100%; font-size: 13px; color: var(--tinta-suave); font-weight: 500; }
.area-nueva fieldset { margin: 0; padding: 6px 11px; border: 1px solid var(--linea-fuerte); border-radius: 6px; }
.area-nueva fieldset legend { font-size: 13px; color: var(--tinta-suave); font-weight: 500; padding: 0 4px; }
.tabla .sub { color: var(--tinta-suave); font-size: 13px; }
@media (max-width: 640px) {
  .area-nueva { grid-template-columns: 1fr; }
  .tabla td.celda-areas { flex-wrap: wrap; text-align: left; }
  .tabla td.celda-areas .areas-cambiar { flex-basis: 100%; }
}

/* ---------- borrar un plan (ficha y «Lanzar un plan») ---------- */
/* La confirmación va en la propia página, en un desplegable que funciona sin JavaScript: «Borrar» lo abre con el
   aviso y el botón que borra, y el mismo botón, que pasa a decir «No borrar», lo cierra. */
.borrar-plan > summary { list-style: none; display: inline-grid; margin: 0; }
.borrar-plan > summary::-webkit-details-marker { display: none; }
/* Los dos rótulos ocupan el mismo sitio y solo se esconde uno: el botón mide lo mismo cerrado que abierto, y abrirlo
   no mueve la tabla ni la página. */
.borrar-plan > summary > span { grid-area: 1 / 1; text-align: center; }
.borrar-plan .si-abierto, .borrar-plan[open] .si-cerrado { visibility: hidden; }
.borrar-plan[open] .si-abierto { visibility: visible; }
.borrar-confirma { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--choque); border-radius: 6px; background: var(--choque-suave); max-width: 440px; font-size: 13.5px; white-space: normal; }
.borrar-confirma p { margin: 0 0 8px; color: var(--tinta); }
.borrar-confirma form { margin: 0; }
.boton.peligro { background: var(--choque); color: #fff; border-color: var(--choque); }
.no-borra { margin: 0; color: var(--tinta-suave); font-size: 12.5px; }
.pie-plan { margin-top: 16px; display: flex; justify-content: flex-end; }
.pie-plan .borrar-plan[open] { text-align: right; }
.tabla .acciones-fila { text-align: right; width: 1%; white-space: nowrap; }
.borrar-plan[open] .borrar-confirma { text-align: left; }
/* En una celda de tabla estrecha el aviso se leía en columna de tres palabras: lleva su propio ancho. */
/* Fuera del flujo: la página se encoge a su contenido, y una confirmación de 340 px dentro de la celda ensanchaba la tabla y
   con ella toda la página (de 770 a 1.040 px al abrir «Borrar», QA del piloto 12-oct). Va como una capa bajo el botón,
   y la tabla de «Lanzar un plan» deja de recortar para que la capa de la última fila se vea. */
.tabla .acciones-fila { position: relative; }
.tabla .acciones-fila .borrar-confirma { position: absolute; right: 12px; z-index: 5; width: 340px; max-width: calc(100vw - 64px); box-shadow: var(--sombra); }
.tabla-lanzar { overflow: visible; }
.tabla-lanzar thead th:first-child { border-top-left-radius: 8px; }
.tabla-lanzar thead th:last-child { border-top-right-radius: 8px; }
/* Todos los planes sin terminar (`/app?todos=1`): la lista lleva su propio scroll y la página no (ADP-903). */
.lanzar-todos { max-height: 60vh; overflow: auto; scrollbar-gutter: stable; }
.lanzar-todos .tabla-lanzar thead th { position: sticky; top: 0; z-index: 1; }
/* En la hoja de paneles (ADP-900) desplaza el panel de la lista, no una caja dentro de él. */
.paneles .lanzar-todos { max-height: none; overflow: visible; }
.paneles .lanzar-todos .tabla-lanzar thead th { position: static; }
/* El «Borrar» de la ficha vive en el bloque Acción de la cabecera de la Mesa, no debajo: un pie fuera de la caja la desborda. */
.acciones-borrar { margin-top: 8px; }
.acciones-borrar .borrar-confirma { font-size: 12px; margin-top: 6px; }
/* Las dos tablas frente al plan actual (ADP-778): pedidos de venta y órdenes de fabricación, cada una en su tarjeta y
   una al lado de la otra. La misma forma que en Inicio (interfaz/hoy.css). */
.frente-plan-actual { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.frente-plan-actual .tarjeta.frente { margin-bottom: 0; }
.tabla-frente { box-shadow: none; }
.tabla-frente th, .tabla-frente td { padding-block: 8px; font-variant-numeric: tabular-nums; }
.tabla-frente thead th { vertical-align: bottom; line-height: 1.2; }
/* La cabecera parte en líneas, como en Inicio: con `.tabla .num` sin partir, «Plan de la planta, horizonte entero» no
   cabía en una sola línea y la cuarta columna se salía de su tarjeta a 1440 (piloto, 22-oct-2026). Las cifras siguen
   sin partir. */
.tabla-frente thead th.num { white-space: normal; }
.tabla-frente thead .sin-partir { white-space: nowrap; }
.tabla-frente tbody th { font-weight: 500; line-height: 1.25; }
.tabla-frente tr.sub th { padding-left: 30px; font-weight: 400; color: var(--tinta-suave); }
.tabla-frente tr.sub td { font-weight: 400; color: var(--tinta-suave); }
.tabla-frente td.num { font-weight: 600; }
.tabla-frente td.entero { color: var(--tinta-suave); font-weight: 500; border-left: 1px solid var(--linea); }
.tabla-frente tbody.aparte tr:first-child > * { border-top: 2px solid var(--linea); }
.tabla-frente .dif { white-space: nowrap; }
.tabla-frente .dif.mejor { color: var(--a-tiempo); }
.tabla-frente .dif.peor { color: var(--choque); }
.tabla-frente .dif.neutra { color: var(--tinta-suave); }
.tabla-frente .dif small { display: inline; margin-left: 0; font-size: 12px; font-weight: 500; color: var(--tinta-suave); }
.tabla-frente tbody tr:last-child > * { border-bottom: 0; }
.tabla-frente thead .nombre-plan { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--tinta-suave); }
.frente-ambito { margin: 10px 2px 0; font-size: 12.5px; line-height: 1.4; color: var(--tinta-suave); }
@media (max-width: 760px) { .tabla-frente tbody th { display: block; padding: 8px 14px 2px; } .tabla-frente td.entero { border-left: 0; } 
  /* El rótulo de cada cifra es el nombre de su columna, y el del plan de AMPE puede ser largo: parte en líneas y la
     cifra queda a la derecha (en la celda, `.tabla .num` no parte). */
  .tabla-frente td.num::before { white-space: normal; flex: 1 1 auto; min-width: 0; }
}

/* Cómo se calcula en Lanzar (receta del plan, apartado 5, ADP-855): las tarjetas de las recetas, el panel de Ajustar
   opciones, no modal y a la derecha, y el resumen «Qué se va a calcular». Solo el «cambia» lleva color. */
.lanzar-form > .lanzar-receta, .lanzar-form > .lanzar-campos { flex-basis: 100%; min-width: 0; }
.lanzar-campos { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.lanzar-campos > div { min-width: 280px; }
@media (min-width: 1100px) {
  .lanzar-form { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 0 32px;
    align-items: start; }
  .lanzar-receta .recetas { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .lanzar-campos { border-left: 1px solid var(--linea); padding-left: 24px; }
  .lanzar-campos > div { flex-basis: 100%; min-width: 0; }
}
.lanzar-form .como-se-calcula { border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
.como-se-calcula legend { font-weight: 600; color: var(--tinta); padding: 0; margin-bottom: 8px; }
.como-se-calcula legend small { font-weight: 400; color: var(--tinta-suave); margin-left: 6px; }
.recetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.receta-tarjeta { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; padding: 12px 14px;
  border: 1px solid var(--linea); border-radius: 8px; background: var(--tarjeta); cursor: pointer; min-height: 44px; }
.receta-tarjeta input { margin: 3px 0 0; grid-row: span 3; }
.receta-tarjeta:has(input:checked) { border-color: var(--accion); box-shadow: 0 0 0 1px var(--accion) inset; }
.receta-tarjeta:has(input:focus-visible) { outline: 2px solid var(--accion); outline-offset: 2px; }
.receta-tarjeta.apagada { cursor: not-allowed; color: var(--tinta-suave); }
.receta-nombre small, .receta-que, .receta-a-medida { color: var(--tinta-suave); font-size: 13px; line-height: 1.4; }
.receta-cuesta { display: block; margin-top: 2px; }
.receta-a-medida { color: var(--tinta); }
.receta-ajuste { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 10px 0 0;
  color: var(--tinta-suave); font-size: 13px; }
.lanzar-form .que-se-calcula { flex-basis: 100%; border-top: 1px solid var(--linea); padding-top: 10px; }
/* ADP-924: la cabecera de Lanzar lleva el título y «Qué quieres calcular» en una fila, y la columna de la derecha acaba
   en «Lanzar» con cuánto tarda y el escenario; el límite de cambios y el recargo van plegados en «Más opciones». */
.cab-lanzar, .paneles .cab-panel.cab-lanzar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.cab-lanzar h2 { margin: 0; }
.cab-lanzar .que-calcular { margin: 0; }
.cab-lanzar .lanzar-escenario { margin: 0 0 0 auto; max-width: 78ch; text-align: right; font-size: 13px; text-wrap: balance; }
.cab-lanzar #que-calcular-nota { flex-basis: 100%; margin: 0; order: 3; }
.lanzar-pie { display: flex; align-items: center; gap: 6px 14px; flex-basis: 100%; }
.lanzar-pie .boton { flex: none; }
.lanzar-pie .ayuda { margin: 0; font-size: 13px; line-height: 1.35; }
.mas-opciones { flex-basis: 100%; border: 1px solid var(--linea); border-radius: 8px; padding: 0 12px; }
.mas-opciones > summary { cursor: pointer; padding: 9px 0; font-weight: 600; font-size: 14px; color: var(--tinta);
  min-height: 24px; }
.mas-opciones-resumen { display: block; font-weight: 400; font-size: 13px; color: var(--tinta-suave); margin-top: 2px; }
.mas-opciones[open] > summary { border-bottom: 1px solid var(--linea); margin-bottom: 10px; }
.mas-opciones > summary:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; border-radius: 4px; }
.mas-opciones-campos { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; padding-bottom: 12px; }
.mas-opciones-campos > div { flex-basis: 100%; min-width: 0; }
/* Las ayudas, el límite por semanas y «A medida» de dentro llevan las reglas de `.lanzar-form` de arriba. */
.que-se-calcula h3 { font-size: 14px; margin: 0 0 4px; }
.que-se-calcula p { margin: 0 0 4px; overflow-wrap: anywhere; }
.cajon-ajustar { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); z-index: 40;
  display: flex; flex-direction: column; background: var(--tarjeta); border-left: 1px solid var(--linea);
  box-shadow: var(--sombra); }
.cajon-ajustar[hidden] { display: none; }
.cajon-ajustar > header, .cajon-ajustar > footer { padding: 14px 16px; border-bottom: 1px solid var(--linea); }
.cajon-ajustar > header { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.cajon-ajustar > header h3 { margin: 0; font-size: 16px; }
.cajon-ajustar > header p { grid-column: 1; margin: 0; }
.cajon-ajustar > header button { grid-row: 1 / span 2; grid-column: 2; align-self: start; }
.cajon-ajustar > footer { border-top: 1px solid var(--linea); border-bottom: 0; display: flex; flex-wrap: wrap;
  gap: 8px; align-items: center; justify-content: flex-end; }
.cajon-ajustar > footer p { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--tinta-suave); }
#ajustar-cuerpo { flex: 1; overflow-y: auto; padding: 4px 16px 16px; }
.ajustar-bloque { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; display: block; }
.ajustar-bloque legend, .ajustar-bloque h4 { font-size: 13.5px; font-weight: 600; margin: 0 0 6px; padding: 0; }
.ajustar-bloque h5 { font-size: 12.5px; font-weight: 500; color: var(--tinta-suave); margin: 10px 0 4px; }
.ajustar-radio { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; margin: 6px 0; min-height: 24px; }
.ajustar-radio input { grid-row: span 2; margin-top: 3px; }
.ajustar-radio small { color: var(--tinta-suave); font-size: 12px; }
.ajustar-lista { list-style: none; margin: 0; padding: 0; }
.ajustar-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 0;
  border-bottom: 1px solid var(--linea); }
.ajustar-lista .puesto { width: 1.4em; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.ajustar-lista .termino { flex: 1 1 160px; }
.ajustar-lista .que-mide { flex-basis: 100%; color: var(--tinta-suave); font-size: 12px; padding-left: 1.9em; }
/* Un objetivo encendido, en filas fijas para que nada se parta según lo largo del nombre o si se puede apagar: el
   nombre, lo que mide, y debajo los controles alineados con el nombre, en el mismo sitio en cada fila. */
ol.ajustar-lista li { display: grid; grid-template-columns: 1.4em repeat(4, auto) minmax(0, 1fr); gap: 4px 8px;
  align-items: center; }
ol.ajustar-lista li > * { grid-row: 1; }
ol.ajustar-lista .puesto { grid-column: 1; }
ol.ajustar-lista .termino { grid-column: 2 / -1; justify-self: start; }
ol.ajustar-lista .que-mide { grid-row: 2; grid-column: 2 / -1; padding-left: 0; }
ol.ajustar-lista li > button, ol.ajustar-lista li > select { grid-row: 3; }
ol.ajustar-lista li > [data-foco^="nivel "] { grid-column: 4; }
ol.ajustar-lista li > button[aria-label^="Subir "] { grid-column: 2; }
ol.ajustar-lista li > button[aria-label^="Bajar "] { grid-column: 3; }
ol.ajustar-lista li > button[aria-label^="Apagar "] { grid-column: 5; }
ol.ajustar-lista .etiqueta-cambia { grid-row: 4; grid-column: 2 / -1; padding-left: 0; }
.ajustar-lista select { min-height: 28px; width: auto; flex: 0 0 auto; padding-block: 2px; font-size: 12px; }
.ajustar-vacio { margin: 0 0 6px; font-size: 12.5px; color: var(--tinta-suave); }
.ajustar-bloque h5.ajustar-apagados { border-top: 1px solid var(--linea); padding-top: 12px; margin-top: 16px;
  color: var(--tinta); }
.boton.mini { min-height: 28px; padding: 2px 8px; font-size: 12px; width: auto; flex: 0 0 auto; }
.etiqueta-cambia { flex-basis: 100%; padding-left: 1.9em; font-size: 12px; color: var(--accion); font-weight: 500; }
.candado { font-size: 12.5px; color: var(--tinta-suave); margin: 4px 0; }
@media (prefers-reduced-motion: no-preference) { .receta-tarjeta { transition: border-color 150ms, box-shadow 150ms; } }

/* ---------- hoja de paneles (ADP-900) ---------- */
/* Lanzar un plan, la ficha del plan y el Comparador eran un documento largo dentro de <main>: el documento no desplazaba
   pero <main> sí, de 1,3 a 2,7 veces su alto, y para quien lo usa eso es scroll de página. Con sus tarjetas en un
   `<div class=paneles>` (web.py, `_paneles`), en escritorio <main> no desplaza: el título queda fijo, cada tarjeta lleva
   su scroll propio y visible, y en una pantalla ancha las tarjetas se reparten en columnas a todo el ancho, sin los
   2.400 px centrados de ADP-789. En el teléfono (hasta 760 px) la página fluye como las demás. */
@media (min-width: 761px) {
  main.hoja:has(> .paneles) { display: flex; flex-direction: column; overflow: hidden; max-width: none; position: relative; padding: 14px 28px 14px; }
  main.hoja:has(> .paneles) > * { flex: none; }
  main.hoja:has(> .paneles) > .paneles { flex: 1 1 0; }
  main.hoja:has(> .paneles) > h1 { margin: 0 0 10px; padding-right: 220px; }
  /* «Ayuda de esta pantalla», a la altura del título y no en una fila propia: su alto va a los paneles. */
  main.hoja:has(> .paneles) > h1 + .como-pantalla { position: absolute; top: 14px; right: 28px; height: 41px; margin: 0; display: flex; align-items: center; }
  main.hoja:has(> .paneles) > .pie-plan, main.hoja:has(> .paneles) > .pie-hoja { margin: 8px 0 0; }
  :where(main.hoja) > .paneles { flex: 1 1 0; min-height: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, auto); align-content: start; }
  .paneles > * { min-height: 0; margin: 0; }
  /* Cada panel con su scroll y la barra a la vista (sin el hueco que deja aparecer y desaparecer). El título de la
     tarjeta se queda arriba mientras su contenido desplaza. */
  .paneles > .tarjeta, .paneles > .frente-plan-actual { overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent;
    /* El foco de teclado no queda debajo del título fijo del panel (WCAG 2.4.11). */
    scroll-padding-block: 52px 16px; }
  .paneles > .tarjeta { margin: 0; }
  .paneles > .tarjeta > h2:first-child, .paneles > .tarjeta > .cab-panel:first-child { position: sticky; top: -16px; z-index: 2; background: var(--tarjeta); margin: -16px 0 10px; padding: 16px 0 6px; }
  .paneles .tabla { box-shadow: none; }
  .cab-panel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
  .cab-panel h2 { margin: 0; font-family: var(--titular); font-size: 22px; }
  .cab-panel > a { margin-left: auto; font-size: 13.5px; }
  .paneles > .frente-plan-actual { align-content: start; }

  /* Lanzar un plan: el formulario arriba con lo que necesite y la lista debajo con lo que quede (al menos 180 px). */
  .paneles.lanzar { grid-template-rows: minmax(min(320px, 45vh), auto) auto minmax(180px, 1fr); }
  .paneles.lanzar:not(:has(> #plan-actual-local)) { grid-template-rows: minmax(min(320px, 45vh), auto) minmax(180px, 1fr); }
  .paneles.lanzar > .panel-lista { align-self: stretch; }
  /* Sin planes en la lista, su tarjeta no pide más que su frase: el alto va al formulario. */
  .paneles.lanzar:has(> #sin-planes-en-cola) { grid-template-rows: minmax(min(320px, 45vh), auto) auto auto; }
  .paneles.lanzar:has(> #sin-planes-en-cola):not(:has(> #plan-actual-local)) { grid-template-rows: minmax(min(320px, 45vh), auto) auto; }
  /* La tabla de medidas, con sitio para lo que cuenta cada indicador también en media pantalla. */
  .paneles #medidas-del-plan .tabla { table-layout: fixed; }
  .paneles #medidas-del-plan .tabla:has(thead th:nth-child(5)) thead th:nth-child(1) { width: 17%; }
  .paneles #medidas-del-plan .tabla:has(thead th:nth-child(5)) thead th:is(:nth-child(2), :nth-child(3), :nth-child(4)) { width: 14%; }
  .paneles #medidas-del-plan .tabla:not(:has(thead th:nth-child(5))) thead th:nth-child(1) { width: 24%; }
  .paneles #medidas-del-plan .tabla:not(:has(thead th:nth-child(5))) thead th:nth-child(2) { width: 18%; }
  .paneles #medidas-del-plan .tabla th, .paneles #medidas-del-plan .tabla td { overflow-wrap: break-word; white-space: normal; }
}
/* Desde 1.280 px, la ficha y el Comparador en dos columnas: lo principal a la izquierda a todo el alto, y a la derecha
   lo demás, cada cosa con su scroll. */
@media (min-width: 1280px) {
  .paneles.ficha { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
  .paneles.ficha > #comprobador, .paneles.ficha > #motivo-error { grid-column: 1; grid-row: 1 / -1; align-self: start; max-height: 100%; }
  .paneles.ficha > :not(#comprobador):not(#motivo-error) { grid-column: 2; }
  .paneles.ficha > #lo-que-pide-atencion { align-self: start; max-height: 100%; }
  .paneles.ficha:not(:has(> #frente-resumen)) { grid-template-rows: minmax(0, 1fr); }

  /* El Comparador: a la izquierda la tabla de medidas, a la derecha las dos tablas frente al plan actual y la lista
     línea a línea. */
  .paneles.comparador { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(0, auto) minmax(0, 1fr); align-content: stretch; }
  .paneles.comparador > #medidas-del-plan { grid-column: 1; grid-row: 1 / -1; align-self: start; max-height: 100%; }
  .paneles.comparador > :not(#medidas-del-plan) { grid-column: 2; }
  .paneles.comparador > .frente-plan-actual { grid-template-columns: minmax(0, 1fr); }
  .paneles.comparador > #lineas-frente-al-mrp { align-self: start; max-height: 100%; }
  .paneles.comparador:not(:has(> .frente-plan-actual)) { grid-template-rows: minmax(0, 1fr); }
  .paneles.comparador:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
  .paneles.comparador > :only-child { grid-column: 1; }
  /* «Por qué cambian» (ADP-897) es su propio panel: abajo a la izquierda, bajo la tabla de medidas, y la lista línea a
     línea baja a su derecha; sin esto compartía la columna de la derecha con las otras dos y se quedaba en 32 px. */
  .paneles.comparador:has(> #explica) { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .paneles.comparador:has(> #explica) > #medidas-del-plan, .paneles.comparador:has(> #explica) > .frente-plan-actual { grid-row: 1; }
  .paneles.comparador > #explica { grid-column: 1; grid-row: 2; }
  .paneles.comparador:has(> #explica) > #lineas-frente-al-mrp { grid-row: 2; }
}
/* Pantalla ancha: todo a lo ancho, una columna por pieza. */
@media (min-width: 1921px) {
  .paneles.lanzar { grid-template-columns: minmax(0, 1560px) minmax(0, 1fr); grid-template-rows: minmax(0, auto) minmax(0, 1fr); align-content: stretch; }
  .paneles.lanzar:has(> #sin-planes-en-cola) { grid-template-rows: minmax(0, auto) minmax(0, 1fr); }
  .paneles.lanzar:not(:has(> #plan-actual-local)), .paneles.lanzar:has(> #sin-planes-en-cola):not(:has(> #plan-actual-local)) { grid-template-rows: minmax(0, 1fr); }
  .paneles.lanzar > #lanzar { grid-column: 1; align-self: start; max-height: 100%; }
  .paneles.lanzar > #plan-actual-local { grid-column: 1; align-self: start; }
  .paneles.lanzar > .panel-lista { grid-column: 2; grid-row: 1 / -1; }
  .paneles.comparador:has(> .frente-plan-actual) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .paneles.comparador:has(> .frente-plan-actual) > .frente-plan-actual { grid-column: 1; grid-row: 1; }
  .paneles.comparador:has(> .frente-plan-actual) > #medidas-del-plan { grid-column: 2; grid-row: 1; }
  .paneles.comparador:has(> .frente-plan-actual) > #lineas-frente-al-mrp { grid-column: 3; grid-row: 1; }
  .paneles.comparador:has(> .frente-plan-actual):has(> #explica) { grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr); }
  .paneles.comparador:has(> .frente-plan-actual) > #explica { grid-column: 1 / -1; grid-row: 2; }
  .paneles.comparador:has(> .frente-plan-actual):has(> #explica) > #lineas-frente-al-mrp { grid-column: 3; grid-row: 1; }
  .paneles.comparador:has(> .frente-plan-actual):has(> #explica) > .frente-plan-actual { grid-column: 1; grid-row: 1; }
  .paneles.comparador:has(> .frente-plan-actual):has(> #explica) > #medidas-del-plan { grid-column: 2; grid-row: 1; }
  .paneles.ficha { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .paneles.ficha > #frente-resumen { grid-column: 2; grid-row: 1; align-self: start; max-height: 100%; }
  .paneles.ficha > #lo-que-pide-atencion { grid-column: 3; grid-row: 1; }
  .paneles.ficha:not(:has(> #frente-resumen)) > #lo-que-pide-atencion { grid-column: 2 / -1; }
}
/* Dos columnas: las listas a la izquierda y la última tarjeta (un formulario) a la derecha, a todo el alto (Simulador). */
@media (min-width: 1280px) {
  .paneles.dos-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, auto)) minmax(0, 1fr); align-content: stretch; }
  .paneles.dos-columnas > :not(:last-child) { grid-column: 1; align-self: start; max-height: 100%; }
  .paneles.dos-columnas > :last-child:not(:only-child) { grid-column: 2; grid-row: 1 / -1; align-self: start; max-height: 100%; }
}
/* Un formulario en línea dentro de una tabla de un panel estrecho: el desplegable a su ancho y, si no cabe, a la línea
   de abajo (Simulador). La fila con etiquetas no se parte: se alinea por abajo (test_perfiles_guardados_alinea...). */
@media (min-width: 761px) {
  .paneles form.en-linea:not(.con-etiquetas) { flex-wrap: wrap; }
  .paneles form.en-linea select { width: auto; max-width: 100%; }
}
/* ADP-900: con el cálculo en marcha, la distancia al óptimo y «Sigue mejorando» crecían la cabecera de la Mesa hasta 750
   px y la página desplazaba por dentro a 1440 (la guarda de `scroll-escondido`). Cada bloque de la cabecera se queda en
   un tope de alto con su propio scroll, y la bandeja se lleva el resto. */
@media (min-width: 761px) {
  #v-mesa > .cabecera > .bloque-cab { max-height: max(220px, 40vh); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent; }
}
/* Por qué cambian frente al plan actual (ADP-897, api/diferencias.py): cada diferencia grande de las tablas de encima,
   partida en categorías que la suman. Un bloque por diferencia, en rejilla; cada categoría en una fila con su cifra, su
   barra y su nombre con globo, y debajo, plegado, lo que la forma. Órdenes y horas en tono neutro: más o menos órdenes
   no es por sí solo mejor ni peor. Las barras van en pasos de 5 % por clase (b0 a b20): la hoja de React no admite
   estilos en línea. */
.tarjeta.explica { margin-bottom: 16px; }
.explica-intro, .explica-aviso { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--tinta-suave); max-width: 90ch; }
.explica-aviso { color: var(--tarde-texto); }
.explica-bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; align-items: start; }
.explica-bloque { --explica-cifra: 72px; --explica-barra: 96px; min-width: 0; border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px 10px; scroll-margin-top: 12px; }
.explica-bloque:focus { outline: none; }
.explica-bloque:target, .explica-bloque:focus-visible, .explica-bloque:has(.explica-ancla:target) { border-color: var(--accion); box-shadow: 0 0 0 2px var(--accion-suave); }
.explica-ancla { display: block; height: 0; scroll-margin-top: 12px; }
.explica-bloque h3 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.explica-total { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; margin: 0 0 4px; font-size: 13px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.explica-total b { margin-left: auto; font-size: 17px; color: var(--tinta); }
.explica-ambito, .explica-fases { margin: 0 0 8px; font-size: 12.5px; line-height: 1.4; color: var(--tinta-suave); }
.explica-cats { list-style: none; margin: 0; padding: 0; }
.explica-cat { border-top: 1px solid var(--linea); padding: 6px 0; }
.explica-cat-fila { display: grid; grid-template-columns: var(--explica-cifra) var(--explica-barra) minmax(0, 1fr); gap: 10px; align-items: center; }
.explica-cifra { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.explica-cat.mejor .explica-cifra { color: var(--a-tiempo); }
.explica-cat.peor .explica-cifra { color: var(--choque); }
.explica-barra { display: block; height: 8px; border-radius: 4px; background: var(--sin-fecha-suave); overflow: hidden; }
.explica-barra > span { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--tinta-suave); }
.explica-cat.mejor .explica-barra > span { background: var(--a-tiempo); }
.explica-cat.peor .explica-barra > span { background: var(--choque); }
.explica-barra.b1 > span { width: 5%; } .explica-barra.b2 > span { width: 10%; } .explica-barra.b3 > span { width: 15%; }
.explica-barra.b4 > span { width: 20%; } .explica-barra.b5 > span { width: 25%; } .explica-barra.b6 > span { width: 30%; }
.explica-barra.b7 > span { width: 35%; } .explica-barra.b8 > span { width: 40%; } .explica-barra.b9 > span { width: 45%; }
.explica-barra.b10 > span { width: 50%; } .explica-barra.b11 > span { width: 55%; } .explica-barra.b12 > span { width: 60%; }
.explica-barra.b13 > span { width: 65%; } .explica-barra.b14 > span { width: 70%; } .explica-barra.b15 > span { width: 75%; }
.explica-barra.b16 > span { width: 80%; } .explica-barra.b17 > span { width: 85%; } .explica-barra.b18 > span { width: 90%; }
.explica-barra.b19 > span { width: 95%; } .explica-barra.b20 > span { width: 100%; }
.explica-nombre { min-width: 0; font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
.explica-partes { display: block; font-size: 12px; color: var(--tinta-suave); }
/* Lo plegado empieza en la columna del nombre: cifra, barra y sus dos huecos. */
.explica-det { margin: 2px 0 0 calc(var(--explica-cifra) + var(--explica-barra) + 20px); font-size: 12.5px; }
.explica-det > summary { cursor: pointer; color: var(--accion); width: fit-content; min-height: 24px; display: flex; align-items: center; gap: 4px; }
.explica-det > summary::-webkit-details-marker { display: none; }
.explica-det > summary::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent currentColor; transition: transform .12s ease-out; }
.explica-det[open] > summary::before { transform: rotate(90deg); }
.explica-det > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.explica-det > summary:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
.explica-items { list-style: none; margin: 4px 0 2px; padding: 0 4px 0 0; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent; }
.explica-items > li { display: grid; grid-template-columns: 3.6em minmax(0, 1fr); gap: 8px; padding: 3px 0; border-top: 1px dashed var(--linea); line-height: 1.35; }
.explica-items > li.explica-mas { display: block; color: var(--tinta-suave); }
.explica-item-cifra { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
.explica-item-nombre { min-width: 0; overflow-wrap: anywhere; }
.explica-suma { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--linea); font-size: 12.5px; color: var(--tinta-suave); }
.explica-recursos { margin-left: 0; margin-top: 8px; }
.explica-tabla { box-shadow: none; margin-top: 6px; font-size: 12.5px; }
.explica-tabla th, .explica-tabla td { padding: 5px 8px; }
.explica-tabla td.num { font-variant-numeric: tabular-nums; }
.explica-tabla .explica-porque { min-width: 12em; }
.explica-tabla .explica-ver { white-space: nowrap; }
.tabla-frente a.explica-enlace { text-decoration: none; border-bottom: 1px dotted currentColor; }
.tabla-frente a.explica-enlace:hover .dif, .tabla-frente a.explica-enlace:focus-visible .dif { color: var(--accion); }
@media (max-width: 760px) {
  .explica-cat-fila { grid-template-columns: var(--explica-cifra) minmax(0, 1fr); }
  .explica-bloque { --explica-cifra: 60px; }
  .explica-barra { grid-column: 1 / -1; grid-row: 2; }
  .explica-det { margin-left: 0; }
  .explica-det > summary { min-height: 44px; }
  .explica-tabla .explica-ver { white-space: normal; }
}

/* El motivo de un plan con error se lee en una pantalla ultrapanorámica (ADP-908): líneas de lectura, no de 1.800 px. */
#motivo-error > p { max-width: 75ch; }
/* Lanzar en el teléfono (ADP-924): «Lanzar» a todo el ancho y cuánto tarda debajo; el escenario, a la izquierda. */
@media (max-width: 760px) {
  .lanzar-pie { flex-wrap: wrap; }
  .cab-lanzar .lanzar-escenario { margin: 0; text-align: left; max-width: none; }
}

/* ---------- la espera tras arrancar (ADP-995) ---------- */
.hoja.aviso-espera { flex: none; align-self: start; height: auto; min-height: 0; overflow: visible; max-width: 560px; margin: 14vh auto 0; padding: 28px 32px 30px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--sombra); }
.hoja.aviso-espera > h1 { font-size: 30px; margin: 18px 0 10px; }
.aviso-espera > p { margin: 0; line-height: 1.5; max-width: 60ch; }
.aviso-espera-sello { display: flex; align-items: center; gap: 8px; min-height: 28px; font-family: var(--titular); font-size: 18px; }
.aviso-espera-sello img { display: block; max-height: 28px; width: auto; }
.aviso-espera-barra { position: relative; height: 4px; margin: 22px 0 10px; border-radius: 999px; background: var(--linea); overflow: hidden; }
.aviso-espera-barra span { position: absolute; inset: 0 auto 0 0; width: 34%; border-radius: inherit; background: var(--accion); animation: aviso-espera-pasa 1.6s ease-in-out infinite; }
@keyframes aviso-espera-pasa { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .aviso-espera-barra span { animation: none; width: 100%; opacity: .45; } }
.aviso-espera .aviso-espera-estado { font-size: 13.5px; color: var(--tinta-suave); }
.aviso-espera .aviso-espera-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
@media (max-width: 640px) { .hoja.aviso-espera { margin: 24px 16px 0; padding: 22px 20px; width: auto; } .aviso-espera .boton { min-height: 44px; } }

/* El comparador de la cabina (motor/cabina/comparador.js) servido en la web, vestido con el
   sistema de la segunda ronda. El codigo y el esqueleto son los del fichero para el papel;
   aqui solo cambia como se ve. */

/* Los tokens que leen el dibujante del Gantt y el comparador, con los valores del sistema. Van
   en la raiz porque el dibujante los lee del documento (`tono`), no del elemento. */
:root {
  --fondo: #ffffff; --mesa: #eaf0f4; --caja: #ffffff; --tinta-2: #4e6273; --tinta-3: #566d7c;
  --senal: #2459d3; --campana: #1d6b52; --fantasma: #8ea3b2;
  --o0: #182b38; --o1: #2f4a5c; --o2: #4e6273; --o3: #8ea3b2; --o4: #c9d6df; --o5: #e4eaee;
  --sans: var(--texto); --serif: var(--texto); --mono: var(--texto);
}
.vista-comparador { font-family: var(--texto); font-size: 14.5px; }
.vista-comparador main { max-width: 1480px; margin: 0 auto; padding: 18px 28px 12px; }
.vista-comparador section { margin-bottom: 30px; }
.vista-comparador h2 { font-family: var(--titular); font-size: 24px; margin: 0 0 12px; }
.vista-comparador h3 { font-weight: 600; }
.vista-comparador .barra { display: none; }
.vista-comparador .def { border-bottom: 1px dotted var(--tinta-3); cursor: help; }

.balanzas { display: grid; gap: 12px; }
.balanza { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: center; width: 100%; text-align: left; background: var(--tarjeta); border: 0; border-left: 4px solid transparent; border-radius: 8px; box-shadow: var(--sombra); padding: 16px 20px; cursor: pointer; font: inherit; color: inherit; }
.balanza[aria-checked="true"] { border-left-color: var(--accion); }
.balanza[aria-checked="false"] { background: #f8fafb; }
.lectura-papel { display: block; font-size: 12px; font-weight: 600; color: var(--tinta-suave); margin-bottom: 2px; }
.lectura-nombre { font-weight: 600; font-size: 15px; }
.lectura-explica { display: block; font-size: 13.5px; color: var(--tinta-suave); line-height: 1.4; margin-top: 3px; }
.platillos { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.lado { display: flex; flex-direction: column; min-width: 140px; }
.lado-b { text-align: right; align-items: flex-end; }
.lado-cifra { font-family: var(--titular); font-weight: 700; font-size: 38px; line-height: 1; color: var(--tinta); }
.lado-rotulo { font-size: 13px; color: var(--tinta-suave); margin-top: 4px; }
.fiel { display: flex; gap: 3px; height: 14px; }
.fiel span { display: block; height: 100%; border-radius: 2px; }
.fiel .t-a, .fiel .t-b { background: var(--tinta-suave); }
.fiel .t-n { background: var(--linea); }
.resto { grid-column: 1 / -1; font-size: 13px; color: var(--tinta-suave); }
.vista-comparador .porque { grid-column: 1 / -1; font-size: 14.5px; margin: 2px 0 0; line-height: 1.45; }

.ventajas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.columna { background: var(--tarjeta); border-radius: 8px; box-shadow: var(--sombra); padding: 14px 18px; }
.columna h3 { font-size: 15px; display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.columna ul { list-style: none; margin: 0; padding: 0; }
.columna li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-top: 1px solid var(--linea); font-size: 14px; }
.columna li:first-child { border-top: 0; }
.columna li.cab-ventajas { font-size: 12.5px; color: var(--tinta-tenue); justify-content: flex-end; padding: 0 0 4px; }
.columna .cifras { font-size: 13px; color: var(--tinta-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sin-ganador { margin-top: 14px; font-size: 14px; color: var(--tinta-suave); }
.sin-ganador b { font-weight: 600; color: var(--tinta); margin-right: 6px; }
.vacio { color: var(--tinta-tenue); font-size: 14px; padding: 6px 0; }
.vista-comparador .chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.5; }
.vista-comparador .chip.g-a, .vista-comparador .chip.g-b { background: var(--tinta); color: #fff; border: 0; }
.vista-comparador .chip.g-n { background: transparent; color: var(--tinta-suave); border: 1px solid var(--linea-fuerte); font-weight: 500; }

.tabla-caja { overflow-x: auto; border-radius: 8px; box-shadow: var(--sombra); }
#tabla { border-collapse: collapse; width: 100%; min-width: 760px; background: var(--tarjeta); font-size: 14px; }
#tabla th, #tabla td { border-bottom: 1px solid var(--linea); padding: 9px 12px; text-align: right; vertical-align: top; }
#tabla th:first-child, #tabla td:first-child { text-align: left; }
#tabla thead th { background: #eaf0f4; font-size: 13px; font-weight: 600; position: sticky; top: 0; }
col.c-metrica { width: 44%; } col.c-valor { width: 13%; } col.c-dif { width: 16%; } col.c-gana { width: 14%; }
tr.eje td { background: #f6f9fb; font-weight: 600; font-size: 13px; color: var(--tinta-suave); padding-top: 12px; }
.vista-comparador .nombre { font-weight: 500; font-size: 14.5px; }
.vista-comparador .ambito { display: block; font-size: 13px; line-height: 1.4; color: var(--tinta-suave); margin-top: 3px; }
.otra { display: block; font-size: 12.5px; color: var(--tinta-tenue); margin-top: 5px; }
.valor { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rango { display: block; font-size: 12.5px; color: var(--tinta-tenue); white-space: nowrap; margin-top: 3px; }
.dif { font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.a-favor { display: block; font-size: 12.5px; color: var(--tinta-tenue); }
tr.cota td { padding-top: 4px; padding-bottom: 6px; border-bottom-style: dotted; }
tr.cota .nombre { font-weight: 400; font-size: 13px; padding-left: 16px; color: var(--tinta-suave); }

.paneles { display: grid; grid-template-columns: 1fr; gap: 16px; }
.panel { background: var(--tarjeta); border-radius: 8px; box-shadow: var(--sombra); padding: 12px 14px; }
.panel h3 { font-size: 15px; margin-bottom: 8px; display: flex; gap: 9px; align-items: center; }
.panel canvas { display: block; width: 100%; }
.acta { font-size: 13.5px; color: var(--tinta-suave); margin: 10px 0 0; padding: 0; list-style: none; }
.acta li { padding: 2px 0; }
.vista-comparador .leyenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--tinta-suave); }
.vista-comparador .leyenda .muestra { display: inline-block; width: 11px; height: 11px; margin-right: 5px; border: 1px solid var(--tinta); vertical-align: -1px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.vista-comparador details { background: var(--tarjeta); border-radius: 8px; box-shadow: var(--sombra); padding: 0 18px; margin-top: 12px; }
.vista-comparador details[open] { padding-bottom: 14px; }
.vista-comparador summary { font-weight: 600; font-size: 15px; padding: 12px 0; cursor: pointer; }
.condiciones, .terminos { display: grid; grid-template-columns: 260px 1fr; gap: 6px 18px; margin: 4px 0 0; font-size: 14px; }
.condiciones dt { font-size: 13.5px; color: var(--tinta-suave); }
.terminos dt { font-weight: 600; font-size: 14px; }
.terminos dd, .condiciones dd { margin: 0; color: var(--tinta-suave); }
.formato p { font-size: 14px; margin: 4px 0 12px; }
.formato h3 { font-size: 13.5px; font-weight: 600; margin: 14px 0 6px; }
.formato table { table-layout: fixed; width: 100%; border-collapse: collapse; }
.formato td, .formato th { text-align: left; font-size: 13.5px; border-bottom: 1px solid var(--linea); padding: 6px 8px; }
.vista-comparador .pie { max-width: 1480px; margin: 0 auto; padding: 0 28px 28px; font-size: 13px; color: var(--tinta-tenue); }
.papel { display: flex; gap: 10px; align-items: center; justify-content: flex-end; max-width: 1480px; margin: 12px auto 0; padding: 0 28px; }
/* ADP-326: «Comparar con otra versión», en el Comparador de un plan. */
.c-otra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 14px; font-size: 13px; }
.papel .c-otra { margin: 0 auto 0 0; }
.papel .como-se-usa { margin-right: auto; font-size: 13px; }
.papel .como-se-usa + .c-otra { margin-left: 0; }

@media (max-width: 1100px) {
  .balanza { grid-template-columns: 1fr; }
  .ventajas, .condiciones, .terminos { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vista-comparador main { padding: 14px 14px 8px; }
  .lado { min-width: 0; }
  .lado-cifra { font-size: 28px; }
  /* Con «Exportar a Excel» (ADP-905) la fila lleva cuatro piezas: en un teléfono bajan de renglón en vez de sacar la
     página de lado. */
  .papel { padding: 0 14px; justify-content: flex-start; flex-wrap: wrap; }
  .papel .c-otra { flex: 1 1 100%; }
}
/* ADP-789. Más de 1.920 px: el Comparador pasa de 1.480 a 2.400 px y las dos lecturas del resultado van una al lado de la
   otra. Hasta 1.920, como antes. */
@media (min-width: 1921px) {
  .vista-comparador main, .vista-comparador .pie, .papel { max-width: 2400px; }
  .balanzas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 1000px), 1fr)); }
}

/* ADP-923. Escritorio sin scroll de página: la vista ya no desplaza entera. Es una hoja de paneles en dos columnas a todo
   el ancho (`web._con_frente`): a la izquierda las tablas frente al plan actual si las hay, el Resultado y las Ventajas,
   y a la derecha la tabla de métricas, los planes y las condiciones, cada bloque con su scroll. Es el mismo patrón que
   la hoja del Comparador (ADP-900). Solo cambia cómo se ve en la web: las secciones son las de la plantilla del papel. */
.vista-comparador > main.paneles, .columna-cmp { display: block; }
@media (min-width: 761px) {
  body > .vista-comparador { overflow: hidden; display: flex; flex-direction: column; }
  /* El ancho es el de siempre: 1.480 hasta 1.920 y 2.400 por encima (regla de abajo), centrado. */
  .vista-comparador > main.paneles { flex: 1 1 0; min-height: 0; width: 100%; padding: 14px 28px 10px;
    display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: minmax(0, 1fr); }
  .columna-cmp { min-height: 0; display: flex; flex-direction: column; gap: 14px; }
  /* Una plantilla que `web._con_frente` no parte sale en una columna: entonces desplaza la hoja entera, en su caja. */
  .vista-comparador > main.paneles:not(:has(> .columna-cmp)) { display: block; overflow: auto; overscroll-behavior: contain; }
  .columna-cmp > section { margin: 0; min-height: 0; flex: 0 1 auto; overflow: auto; overscroll-behavior: contain;
    scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent; padding: 0 4px 4px 0; }
  .columna-cmp > section[hidden] { display: none; }
  /* El panel se enfoca con el teclado para desplazarlo (tabindex=0): el foco se ve, y lo que se enfoca dentro no queda
     debajo del título fijo. */
  .columna-cmp > section { scroll-padding-top: 48px; }
  .columna-cmp > section:focus-visible { outline: 2px solid var(--accion); outline-offset: -2px; border-radius: 6px; }
  .columna-cmp > section > h2 { position: sticky; top: 0; z-index: 1; background: var(--papel); margin: 0 0 10px;
    padding-bottom: 4px; font-size: 21px; }
  /* Lo que se lee primero cabe entero si puede; lo de debajo se lleva el resto y nunca menos de un tercio. */
  .columna-cmp > .frente-en-panel { max-height: 45%; }
  .columna-cmp > section[aria-labelledby="t-ventajas"], .columna-cmp > section[aria-labelledby="t-metricas"] {
    flex: 1 1 0; min-height: 33%; }
  .columna-cmp > #planes { max-height: 28%; }
  .columna-cmp > section:last-child:not([aria-labelledby]):not(#planes) { flex: none; max-height: 45%; }
  .columna-cmp > section:last-child > details:first-child { margin-top: 0; }
  /* La tabla de métricas desplaza en su panel, con la cabecera arriba dentro de él, y su caja ya no recorta. */
  .vista-comparador [aria-labelledby="t-metricas"] .tabla-caja { overflow: visible; }
  .vista-comparador [aria-labelledby="t-metricas"] #tabla { min-width: 680px; }
  /* En la tabla de métricas el título se va al desplazar y la cabecera de la tabla se queda arriba en su panel. */
  .columna-cmp > section[aria-labelledby="t-metricas"] > h2 { position: static; }
  /* Las condiciones, los términos y el formato, plegados y juntos: tres filas cortas al pie de la columna. */
  .columna-cmp > section > details { margin-top: 6px; padding: 0 14px; }
  .columna-cmp > section > details > summary { padding: 8px 0; font-size: 14.5px; }
  .vista-comparador .frente-en-panel .frente-plan-actual { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
  .vista-comparador .ventajas { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* Media pantalla para cada lectura del Resultado: el rótulo encima y la balanza debajo. */
  .vista-comparador .balanza { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 18px; }
  .vista-comparador .lado { min-width: 0; }
  .vista-comparador .lado-rotulo { max-width: 20ch; }
  /* En media pantalla, el rango de los cálculos de AMPE parte línea en vez de ensanchar su columna. */
  .vista-comparador [aria-labelledby="t-metricas"] .rango { white-space: normal; }
  .vista-comparador .lado-cifra { font-size: 32px; }
  .vista-comparador .pie { flex: none; width: 100%; padding: 0 28px 8px; margin: 0 auto; }
}
/* Pantalla ancha: las Ventajas vuelven a dos columnas, que caben. */
@media (min-width: 1921px) {
  .vista-comparador .ventajas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vista-comparador .balanza { grid-template-columns: 240px minmax(0, 1fr); gap: 22px; }
}