/* Refinamiento visual del planificador: estilo profesional y sobrio.
   Solo presentación (colores, radios, sombras, espaciado, jerarquía). No toca la lógica del optimizador.
   Va después del estilo base de index.html y antes de mobile.css. */
:root{--r:5px;--r-lg:8px;--sh:0 1px 2px rgba(14,42,71,.06),0 3px 10px rgba(14,42,71,.05);--ring:color-mix(in srgb,var(--acc) 24%,transparent);--soft:color-mix(in srgb,var(--bg) 60%,var(--panel))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sh:0 1px 2px rgba(0,0,0,.35),0 3px 10px rgba(0,0,0,.22)}}
:root[data-theme="dark"]{--sh:0 1px 2px rgba(0,0,0,.35),0 3px 10px rgba(0,0,0,.22)}

/* Cabecera */
.top{box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 2px 10px rgba(5,12,22,.22);border-radius:0 0 var(--r-lg) var(--r-lg)}

/* Paneles: radio, sombra suave y encabezado con línea */
.pn{border-radius:var(--r-lg);box-shadow:var(--sh)}
.pn>.in{padding:16px}
.ph{padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line)}
h2{font-size:19px;gap:10px}
h2 .n{width:22px;height:22px;border:0;border-radius:var(--r);background:var(--ink);color:var(--panel);font-size:13px}
h3{font-size:15px;margin-bottom:10px}
.hint{font-size:12.5px}
.sh{padding:14px 18px}

/* Formularios */
label{font-weight:500;margin-bottom:4px}
input,select{height:36px;border-radius:var(--r);padding:4px 10px;transition:border-color .12s,box-shadow .12s}
input:hover,select:hover{border-color:var(--mut)}
input:focus,select:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--ring);outline:none}
input:focus-visible,select:focus-visible{outline:none}
.cargo td input{height:32px;border-radius:4px}
.fg{gap:12px}

/* Botones: jerarquía clara (primario naranja, secundarios discretos) */
.btn{height:34px;border-radius:var(--r);padding:0 13px;transition:background .12s,border-color .12s,box-shadow .12s}
.btn:hover{background:var(--soft);border-color:var(--mut)}
.btn.pri{font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.btn.pri:hover{background:var(--acc);filter:brightness(1.08);border-color:var(--acc)}
.btn.sm{height:30px}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
.top .btn:hover{background:rgba(255,255,255,.08)}
.top .btn.pri:hover{background:var(--acc)}
.ib{border-radius:var(--r)}
.seg{border-radius:var(--r)}
.seg button{height:30px;padding:0 12px;transition:background .12s}
.seg button:not([aria-pressed=true]):hover{background:var(--soft)}
.banner,.ol{border-radius:var(--r)}
.st,.pill{border-radius:4px}
.pill{padding:4px 10px}

/* Resultados: indicadores con más aire y números más legibles */
.k{padding:14px 18px;gap:6px}
.kl{font-weight:500}
.kv{font-size:24px}
.ks{line-height:1.4}
.bt{height:6px;border-radius:3px}.bt i{border-radius:3px}
.tb{padding:10px 18px;background:var(--soft)}
.lg,.sel,.un{padding-left:18px;padding-right:18px}
.stat{padding:11px 18px}

/* Tablas: encabezado más claro, filas con respiración y fila resaltada al pasar */
th{font-size:12px;font-weight:600;padding:7px 3px}
td{padding:5px 3px}
tbody tr:hover td{background:color-mix(in srgb,var(--bg) 55%,transparent)}
.cargo tbody tr:hover td{background:transparent}
.cargo tr.r.rev:hover td{background:var(--rev)}
.tw:has(>table.ord){max-height:560px;overflow:auto;border:1px solid var(--line);border-radius:var(--r)}
.tw:has(>table.ord) th{position:sticky;top:0;z-index:1;background:var(--soft);box-shadow:0 1px 0 var(--line)}
.tw:has(>table.ord) th,.tw:has(>table.ord) td{padding-left:8px;padding-right:8px}

/* Firma: deja de flotar sobre el contenido y queda al final de la página */
.sig{position:static;margin:0 16px 24px auto;width:max-content;max-width:calc(100% - 32px);pointer-events:auto}
.lfoot{padding-bottom:10px;max-width:none;margin:8px 0 0}
.lfoot{padding-left:max(16px,calc((100% - 1560px)/2 + 16px))}

/* ===== Segunda pasada: jerarquía, cifras, barra de herramientas y tablas ===== */
:root{--num:var(--bd)}

/* Cabecera: marca a la izquierda, estado del plan como texto quieto con un punto de color, acción principal a la derecha */
.top{gap:12px;padding-block:8px}
.bs{padding-left:12px;border-left:1px solid rgba(255,255,255,.16);color:#aab6c3}
.tstat{display:inline-flex;align-items:center;gap:9px;color:#b9c4d0;font-size:13px}
.tstat .dot{width:8px;height:8px;border-radius:50%;background:#8493a4;flex:none}
.tstat .dot.ok{background:#4cc38a}.tstat .dot.wn{background:#e5a93a}.tstat .dot.bad{background:#ff7b72}
.tstat>span:not(.vh){overflow:hidden;text-overflow:ellipsis}

/* Resultado: una sola línea de estado con punto, sin barra gruesa ni mensajes repetidos en cajas distintas */
.stat,.stat.valid,.stat.warn,.stat.incomplete,.stat.invalid{border-left:0;display:flex;gap:10px;align-items:flex-start;line-height:1.45;color:var(--ink);background:color-mix(in srgb,var(--good) 7%,var(--panel))}
.stat::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;margin-top:.5em;background:var(--good)}
.stat.warn,.stat.incomplete{background:color-mix(in srgb,var(--warn) 9%,var(--panel))}
.stat.warn::before,.stat.incomplete::before{background:var(--warn)}
.stat.invalid{background:color-mix(in srgb,var(--bad) 9%,var(--panel));color:var(--ink)}
.stat.invalid::before{background:var(--bad)}

/* Indicadores: cifra legible con la unidad en pequeño, sin tipografía de terminal */
.kv{font:600 28px/1.05 var(--num);letter-spacing:-.015em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:4px}
.kv small{font-size:13px;font-weight:500;letter-spacing:0;color:var(--mut)}
.kv.ok small,.kv.bad small{color:inherit;opacity:.75}
.kl{font-size:12.5px;color:var(--mut);letter-spacing:.01em}
.k+.k{border-left:1px solid var(--line)}
.ks{font-size:12.5px;color:var(--mut)}

/* Barra de herramientas del plan: vistas a la izquierda, zoom y enfoque a la derecha */
.tb{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.tb>div:first-child{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center}
.tb .zm{margin-left:auto}
.seg{background:var(--panel)}

/* Mercadería: tres niveles de botón (cargar datos, editar la lista, acciones menores) */
#bFile,#scan,#bPaste{background:var(--soft);border-color:var(--line2)}
#bFile:hover,#scan:hover,#bPaste:hover{border-color:var(--ink)}
.btn.gh{border-color:transparent;background:transparent;color:var(--mut);padding:0 9px}
.btn.gh:hover{background:var(--soft);color:var(--ink);border-color:transparent}
.btn.gh.dn:hover{color:var(--bad)}

/* Exportación: Excel como acción principal, CSV e imprimible discretos */
.btn.dk{background:var(--soft);border-color:var(--ink);font-weight:600}
.btn.dk:hover{background:var(--panel);border-color:var(--ink)}
.btn.dk:disabled{opacity:.55}

/* Orden de carga y descarga: la secuencia ocupa el ancho y el resumen por parada queda a la vista */
@media (min-width:1100px){
  .res .two{grid-template-columns:minmax(0,1.9fr) minmax(320px,1fr);align-items:start}
  .res .two>div:last-child{position:sticky;top:calc(env(safe-area-inset-top,0px) + 70px)}
}
.ord tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--bg) 42%,transparent)}
.ord tbody tr:hover td{background:color-mix(in srgb,var(--acc) 9%,var(--panel))}
.ord tbody tr.on td{background:color-mix(in srgb,var(--acc) 16%,var(--panel));box-shadow:inset 3px 0 0 var(--acc) }
.ord td.m,.ord th{white-space:nowrap}
.ord td:nth-child(2){min-width:104px;white-space:nowrap}
.ord .sw{display:inline-block;vertical-align:middle}
th.r,td.r{text-align:right}
.res th,.res td{padding-left:8px;padding-right:8px}
th{color:var(--mut);letter-spacing:.01em}
.st-bad{color:var(--bad);font-weight:500}

/* Distribución por unidad: la tabla ocupa el ancho disponible y los encabezados se parten si hace falta */
.uni .tw table,.res .tw table{width:100%}
.uni th{white-space:normal;line-height:1.2;vertical-align:bottom}

/* Respeta la preferencia de movimiento reducido */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

@media (max-width:520px){
  .kv{font-size:24px}
  .bs,.tstat{display:none}
  .k+.k{border-left:0}
  .uni .tw table{min-width:0!important}
  .uni th{font-size:11px}.uni td{font-size:12px}
}