/* Serge en miniatura (mini.js): las siete pantallas del tablero del hero. */

.try-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 2px 14px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.try-hint b { color: #fff; font-weight: 500; }
.try-hint b::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-hi); box-shadow: 0 0 10px var(--brand-hi); margin-right: 8px; vertical-align: 1px; }
.try-side { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.try-reset { font: inherit; color: #E6E4E1; background: transparent; border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 11px; cursor: pointer; transition: border-color .2s, color .2s; }
.try-reset:hover { border-color: #fff; color: #fff; }

.app { position: relative; overflow: hidden; }
.app-crumb { color: #6E7079; }
.app-side { display: flex; flex-direction: column; padding: 22px 0; }
.app-side .lbl { font-size: 10px; color: #6E7079; letter-spacing: 0.1em; text-align: center; padding-bottom: 12px; }
.app-side .lbl-2 { padding-top: 22px; }
.app-side button { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 22px; color: #A09E9B; cursor: pointer; transition: background-color .2s, color .2s; }
.app-side button:hover { background: rgba(255, 255, 255, 0.04); color: #fff; }
.app-side button.on { background: rgba(200, 48, 74, 0.16); color: #fff; box-shadow: inset 2px 0 0 var(--brand); }
.app-side button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.side-n { font-size: 10px; color: #6E7079; }
.side-n.warn { color: #0B0B0D; background: var(--warn); padding: 1px 6px; border-radius: 999px; }
.side-n[hidden] { display: none; }

.app-main { position: relative; height: 610px; overflow: auto; padding: 22px; scrollbar-width: thin; scrollbar-color: #2C2C31 transparent; }
.app-main.is-swap .mv { animation: mvIn .45s var(--ease) both; }
@keyframes mvIn { from { opacity: 0; transform: translateY(8px); } }
.mv { display: grid; gap: 14px; }
.mv-tablero { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mv-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.mv-head h3 { font-family: var(--font); font-weight: 300; font-size: 26px; letter-spacing: -0.035em; color: #fff; line-height: 1.1; }
.mv-sub { display: block; margin-top: 4px; font-size: 11px; color: #7A7C85; }
.mv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mbtn { font: 500 11.5px var(--mono); color: #E6E4E1; background: #141417; border: 1px solid #2E2E33; border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .2s; white-space: nowrap; }
.mbtn:hover:not(:disabled) { border-color: #5A5C65; color: #fff; transform: translateY(-1px); }
.mbtn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.mbtn.primary:hover:not(:disabled) { background: #B02A43; }
.mbtn:disabled { opacity: 0.4; cursor: default; }
.empty { padding: 26px; text-align: center; color: #7A7C85; font-size: 12px; }
.empty.big { display: grid; gap: 14px; justify-items: center; padding: 60px 20px; border: 1px dashed #2E2E33; }

/* Tablero */
.kpi { all: unset; box-sizing: border-box; position: relative; border: 1px solid #232327; background: #0E0E10; padding: 18px 16px; text-align: center; cursor: pointer; transition: border-color .25s, background-color .25s, transform .25s; }
.kpi:hover { border-color: #3A3A40; background: #121215; transform: translateY(-2px); }
.kpi:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kpi .v { font-family: var(--font); font-weight: 300; font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -0.045em; color: #fff; margin: 8px 0 2px; line-height: 1.05; }
.kpi .s { font-size: 11px; color: #7A7C85; }
.kpi-go { position: absolute; right: 12px; top: 10px; font-size: 10px; color: var(--brand-hi); opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .25s; }
.kpi:hover .kpi-go, .kpi:focus-visible .kpi-go { opacity: 1; transform: none; }
.chart-box { position: relative; }
.chart-svg .cbar { fill: #2C2C31; transform-box: fill-box; transform-origin: 50% 100%; animation: grow 1.1s var(--ease) both; transition: fill .2s; cursor: crosshair; }
.chart-svg .cbar.hi { fill: var(--brand-lo); }
.chart-svg .cbar.top { fill: var(--brand); filter: drop-shadow(0 0 10px rgba(216, 69, 92, 0.65)); }
.chart-svg .cbar.is-hover { fill: #4A4A52; }
.chart-svg .cbar.top.is-hover { fill: var(--brand-hi); }
.chart-svg .line { fill: none; stroke: var(--ok); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.8s var(--ease) .35s both; pointer-events: none; }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.app:not(.is-shown) .mv-tablero .cbar, .app:not(.is-shown) .mv-tablero .line, .app:not(.is-shown) .live-rows li, .app:not(.is-shown) .bar i { animation-play-state: paused; }
.chart-tip { position: absolute; transform: translate(-50%, calc(-100% - 10px)); background: #fff; color: #111; font-size: 10.5px; padding: 5px 9px; white-space: nowrap; pointer-events: none; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.8); }
.chart-tip[hidden] { display: none; }
.live-rows li { opacity: 1; transform: none; animation: rowIn .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + .3s); padding: 0; border-bottom: 1px solid #1E1E22; display: block; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } }
.live-rows li button { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 1fr 1fr 34px 82px; align-items: center; gap: 8px; padding: 9px 4px; cursor: pointer; transition: background-color .2s; }
.live-rows li button:hover { background: rgba(255, 255, 255, 0.035); }
.live-rows li button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.live-rows b { color: #fff; font-weight: 500; }
.live-rows span { color: #9C9AA0; white-space: nowrap; }
.bar i { animation: fill 1.4s var(--ease) .5s both; transform: none; transition: none; }
@keyframes fill { from { transform: scaleX(0); } }

/* Piezas */
.drv { display: inline-grid; place-items: center; width: 26px; height: 20px; font-size: 9.5px; color: #0B0B0D !important; background: var(--c); font-weight: 500; }
.drv.none { background: transparent; color: #55575F !important; border: 1px dashed #3A3A40; }
.st { text-align: right; white-space: nowrap; }
.st-pendiente { color: #8B8D95 !important; }
.st-adjudicado { color: var(--warn) !important; }
.st-en_ruta { color: var(--blue) !important; }
.st-entregado { color: var(--ok) !important; }
.st-incidencia { color: #FF6B5E !important; }
.dc { font-size: 10.5px; white-space: nowrap; }
.dc.none { color: #55575F; }
.dc-emitida { color: #F08A9B; }
.dc-desactualizada { color: #0B0B0D; background: var(--warn); padding: 1px 6px; }
.dc-anulada { color: #6E7079; text-decoration: line-through; }
.mono { font-family: var(--mono); }
.b { color: #fff; font-weight: 500; }
.r { text-align: right; }
.dim { color: #6E7079; }

/* Tablas */
.tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mini-search, .mini-scan { flex: 1 1 220px; min-width: 0; font: 12px var(--mono); color: #fff; background: #0E0E10; border: 1px solid #2E2E33; padding: 9px 12px; outline: none; transition: border-color .2s; }
.mini-search:focus, .mini-scan:focus { border-color: var(--brand-hi); }
.fchips { display: flex; gap: 6px; flex-wrap: wrap; }
.fchips button { font: 11px var(--mono); color: #A09E9B; background: transparent; border: 1px solid #2E2E33; border-radius: 999px; padding: 5px 10px; cursor: pointer; }
.fchips button b { color: #6E7079; font-weight: 400; margin-left: 2px; }
.fchips button[aria-pressed='true'] { color: #fff; border-color: var(--brand); background: rgba(200, 48, 74, 0.16); }
.tbl { border: 1px solid #232327; background: #0E0E10; }
.th, .tr { display: grid; align-items: center; gap: 10px; padding: 9px 12px; }
.th { font-size: 9.5px; letter-spacing: 0.09em; color: #6E7079; border-bottom: 1px solid #232327; text-transform: uppercase; }
.tr { all: unset; box-sizing: border-box; display: grid; align-items: center; gap: 10px; padding: 9px 12px; width: 100%; border-bottom: 1px solid #1A1A1E; font-size: 11.5px; color: #B7B5B2; cursor: pointer; transition: background-color .2s; }
.tr:hover { background: rgba(255, 255, 255, 0.035); }
.tr:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.tr.is-open { background: rgba(200, 48, 74, 0.1); box-shadow: inset 2px 0 0 var(--brand); }
.tr > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-trans .th, .t-trans .tr { grid-template-columns: 82px 1.2fr 1.2fr 92px 30px 96px 80px 76px; }
.t-plan .th, .t-plan .tr { grid-template-columns: 18px 82px 1.2fr 1.2fr 92px 30px 96px; }
.t-portes .th, .t-portes .tr { grid-template-columns: 100px 1fr 30px 1.1fr; }
.t-stock .th, .t-stock .tr { grid-template-columns: 82px 1fr 1.1fr 50px 40px; }
.t-inv .th, .t-inv .tr { grid-template-columns: 96px 1.4fr 100px 84px 1.5fr; cursor: default; }
.t-inv .tr small { display: block; color: #6E7079; font-size: 10px; margin-top: 2px; }

/* Planificación */
.drivers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dchipx { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #2E2E33; background: #0E0E10; cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s; }
.dchipx i { width: 10px; height: 10px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.dchipx b { display: block; font-weight: 500; color: #fff; font-size: 11.5px; }
.dchipx small { font-size: 10px; color: #6E7079; }
.dchipx em { font-style: normal; font-size: 12px; color: #fff; }
.dchipx:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, #0E0E10); transform: translateY(-1px); }
.dchipx:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dchipx.over em { color: #0B0B0D; background: #FF6B5E; padding: 1px 6px; }
.plan-help { font-size: 11px; color: #7A7C85; }
.plan-help b { color: #fff; }
.plan-row { position: relative; }
.plan-row input { width: 14px; height: 14px; accent-color: var(--brand); margin: 0; cursor: pointer; }
.plan-row.is-asg { background: color-mix(in srgb, var(--c) 9%, transparent); box-shadow: inset 3px 0 0 var(--c); }
.plan-row.is-sel { background: rgba(255, 255, 255, 0.06); }
.plan-row.is-asg.is-sel { background: color-mix(in srgb, var(--c) 16%, transparent); }

/* Viajes */
.trips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.trip { border: 1px solid #232327; background: #0E0E10; padding: 14px; display: grid; gap: 10px; box-shadow: inset 0 2px 0 var(--c); }
.trip-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; }
.trip-h b { color: #fff; font-weight: 500; }
.trip-h .mono { color: #7A7C85; }
.trip-n { margin-left: auto; color: #fff; }
.trip-n.over { color: #FF6B5E; }
.trip-st { font-size: 10px; color: #0B0B0D; background: var(--c); padding: 1px 7px; }
.trip-truck { min-height: 70px; }
.trip-truck .truck { --t-ink: #8B8D95; --t-soft: #3A3B41; --t-fill: #16161A; --t-fill-2: #1C1C20; --luz: #E8A33A; --gris-500: #5A5C65; --accent-strong: var(--c); }
.trip-truck .t-slot .c-body { fill: var(--c); stroke: #0B0B0D; }
.trip-truck .t-slot.is-over .c-body { fill: #FF6B5E; }
.trip-truck .t-slot:not(.is-on) .c-body { fill: transparent; stroke: #4A4B52; stroke-width: 0.6; stroke-dasharray: 1.6 1.6; }
.trip-truck .t-slot:not(.is-on) :is(.c-glass, .c-seam, .c-crease, .c-rail, .c-handle, .c-lamp, .c-mirror, .c-rim, .c-spokes, .c-hub) { display: none; }
.trip-truck .t-slot:not(.is-on) .c-tyre { fill: transparent; stroke: #4A4B52; stroke-width: 0.5; stroke-dasharray: 1.6 1.6; }
.trip-cars { display: flex; flex-wrap: wrap; gap: 6px; }
.trip-cars button { font: 10.5px var(--mono); color: #D6D4D1; background: transparent; border: 1px solid #2E2E33; padding: 3px 8px; cursor: pointer; }
.trip-cars button:hover { border-color: var(--c); }
.trip-cars em { font-style: normal; color: var(--warn); }
.trip-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Portes */
.portes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.deca-prev { display: grid; gap: 10px; }
.dp-sheet { position: relative; background: #fff; color: #141416; padding: 16px; font-size: 11px; overflow: hidden; }
.dp-top { display: flex; justify-content: space-between; gap: 12px; }
.dp-top b { display: block; font-family: var(--font); font-weight: 400; font-size: 19px; letter-spacing: -0.02em; margin: 2px 0; }
.dp-top svg { width: 64px; height: 64px; flex: none; }
.dp-sheet small { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; color: #8A8C93; }
.dp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #ECECEE; }
.dp-grid span { display: block; margin-top: 3px; }
.dp-env { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ECECEE; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dp-env small { width: 100%; }
.dp-env span { font-size: 10.5px; background: #F1F1F3; padding: 2px 7px; }
.dp-warn { margin-top: 10px; background: #FFF4E0; color: #8A5300; padding: 7px 9px; font-size: 10.5px; }
.dp-void { position: absolute; inset: 0; display: grid; place-items: center; font: 500 26px var(--mono); letter-spacing: 0.2em; color: rgba(224, 73, 59, 0.85); background: rgba(255, 255, 255, 0.55); transform: rotate(-12deg); }
.dp-sheet.void > :not(.dp-void) { opacity: 0.45; }
.dp-url { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 10.5px; color: #7A7C85; border: 1px solid #232327; padding: 8px 10px; }
.dp-url .mono { color: #D6D4D1; }
.dp-actions { display: flex; gap: 8px; }

/* Campa y facturación */
.campa-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ck { border: 1px solid #232327; background: #0E0E10; padding: 12px 14px; }
.ck small { font-size: 9.5px; letter-spacing: 0.09em; color: #6E7079; }
.ck b { display: block; margin-top: 6px; font-family: var(--font); font-weight: 300; font-size: 24px; letter-spacing: -0.035em; color: #fff; }
.ck b.okc { color: var(--ok); }
.ck b.warnc { color: #FF6B5E; }
.scanner { display: flex; gap: 10px; flex-wrap: wrap; }
.scan-out { min-height: 54px; }
.scan-msg { font-size: 11.5px; color: #7A7C85; padding: 12px 0; }
.found { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid rgba(53, 194, 161, 0.5); background: rgba(53, 194, 161, 0.07); padding: 10px 14px; animation: mvIn .4s var(--ease) both; font-size: 12px; color: #fff; }
.found small { display: block; color: #8B8D95; font-size: 10.5px; margin-top: 3px; }
.campa-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: start; }
.by-client { display: grid; gap: 8px; padding: 14px 16px; }
.by-client .k2 { margin-top: 10px; }
.bc { display: grid; grid-template-columns: 1fr 70px 18px; align-items: center; gap: 8px; font-size: 11px; color: #B7B5B2; }
.bc i { display: block; height: 6px; width: var(--w); background: var(--ok); box-shadow: 0 0 8px rgba(53, 194, 161, 0.5); }
.bc b { color: #fff; font-weight: 500; text-align: right; }
.mvm { display: grid; grid-template-columns: 44px 60px 1fr; font-size: 11px; color: #B7B5B2; }
.mv-entrada { color: var(--ok); }
.mv-salida { color: var(--blue); }
.fs { font-size: 10.5px; }
.fs-borrador { color: #6E7079; }
.fs-pendiente { color: var(--warn); }
.fs-cobrada { color: var(--ok); }
.fs-vencida { color: #FF6B5E; }
.inv-act { display: flex; gap: 6px; justify-content: flex-end; align-items: center; overflow: visible !important; }
.sent { font-size: 10.5px; color: #6E7079; }

/* Cajón de ficha */
.mini-drawer { position: absolute; z-index: 8; top: 52px; right: 0; bottom: 0; width: min(380px, 100%); background: rgba(11, 11, 13, 0.97); border-left: 1px solid #2E2E33; box-shadow: -30px 0 80px -20px rgba(0, 0, 0, 0.9); transform: translateX(100%); transition: transform .35s var(--ease); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mini-drawer.is-on { transform: none; }
.mini-drawer[hidden] { display: none; }
.dw-in { padding: 20px; display: grid; gap: 16px; font-size: 12px; }
.dw-h { display: flex; justify-content: space-between; align-items: flex-start; }
.dw-h b { display: block; font-size: 20px; color: #fff; font-weight: 500; }
.dw-h span { color: #8B8D95; }
.dw-x { font: 300 26px var(--font); line-height: 1; color: #A09E9B; background: transparent; border: 0; cursor: pointer; padding: 0 4px; }
.dw-x:hover { color: #fff; }
.dw-rows { display: grid; gap: 8px; border-top: 1px solid #232327; padding-top: 14px; }
.dw-rows div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; }
.dw-rows small { font-size: 10px; letter-spacing: 0.08em; color: #6E7079; text-transform: uppercase; }
.dw-rows span { color: #E6E4E1; display: flex; align-items: center; gap: 6px; }
.dw-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.dw-line li { font-size: 10px; color: #55575F; padding-top: 8px; border-top: 2px solid #232327; }
.dw-line li.done { color: #A09E9B; border-color: #5A5C65; }
.dw-line li.now { color: #fff; border-color: var(--brand-hi); }
.dw-inc { background: rgba(224, 73, 59, 0.12); color: #FF8A80; padding: 8px 10px; font-size: 11px; }
.dw-act { display: flex; gap: 8px; flex-wrap: wrap; }
.dw-done { color: var(--ok); font-size: 11.5px; }

/* Avisos */
.mini-toasts { position: absolute; z-index: 9; right: 16px; bottom: 16px; display: grid; gap: 8px; justify-items: end; pointer-events: none; max-width: calc(100% - 32px); }
.mtoast { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 460px; font: 11.5px/1.4 var(--mono); color: #fff; background: #141417; border: 1px solid #34343A; border-left: 3px solid var(--ok); padding: 10px 12px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.9); opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.mtoast.is-on { opacity: 1; transform: none; }
.mtoast.mt-warn { border-left-color: var(--warn); }
.mtoast.mt-info { border-left-color: var(--blue); }
.mtoast button { font: 500 11px var(--mono); color: #0B0B0D; background: #fff; border: 0; border-radius: 999px; padding: 4px 10px; cursor: pointer; white-space: nowrap; }

/* ───────── Pantallas pequeñas ───────── */
@media (max-width: 960px) {
  .app-body { grid-template-columns: 1fr; }
  .app-side { flex-direction: row; overflow-x: auto; padding: 0; border-right: 0; border-bottom: 1px solid #222226; scrollbar-width: none; }
  .app-side .lbl { display: none; }
  .app-side button { padding: 12px 14px; white-space: nowrap; flex: none; }
  .app-side button.on { box-shadow: inset 0 -2px 0 var(--brand); }
  .app-main { height: 640px; padding: 14px; }
  .drivers { grid-template-columns: repeat(2, 1fr); }
  .trips, .portes-grid, .campa-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .try-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .app-main { height: 600px; }
  .mv-tablero { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mv-tablero .kpi:nth-child(3) { display: none; }
  .mv-tablero .app-row { grid-template-columns: 1fr; }
  .mv-tablero .meters { grid-template-columns: 1fr; gap: 12px; }
  .hide-sm { display: none !important; }
  .t-trans .th, .t-trans .tr { grid-template-columns: 76px 1fr 28px 74px 64px; }
  .t-plan .th, .t-plan .tr { grid-template-columns: 16px 74px 1fr 84px 28px; }
  .t-plan .th span:last-child, .t-plan .tr > span.dc { display: none; }
  .t-stock .th, .t-stock .tr { grid-template-columns: 76px 1fr 44px 34px; }
  .t-inv .th, .t-inv .tr { grid-template-columns: 1fr 86px; }
  .t-inv .th span:nth-child(1), .t-inv .tr > span:nth-child(1), .t-inv .th span:nth-child(4), .t-inv .tr > span:nth-child(4) { display: none; }
  .t-inv .inv-act { grid-column: 1 / -1; justify-content: flex-start; }
  .campa-kpis { grid-template-columns: 1fr 1fr; }
  .mini-drawer { top: 0; width: 100%; }
  .mtoast { max-width: 100%; }
}