/* =====================================================================================================
   tema-tower/traslados.css — «look del tower» (#478) para el ÁREA TRASLADOS: `/transfers` (lista y
   formulario/detalle, incluido el tramo terrestre), `/operaciones/calendario`, `/operaciones/variacion`,
   `/transporte/tracking` (mapa Leaflet: NO tocar el mapa, sí su marco) y `/proveedor`.
   Se carga DESPUÉS de base.css (App.razor, solo dev; orden: base → inicio → contratos → traslados → maestros).

   Reglas: todo bajo html.tw-tema; solo selectores de clase/atributo (nunca un elemento pelado como sujeto
   sin un ancestro de clase que no pueda vivir dentro de .tw); guard :not(.tw *) en lo que pueda matchear
   dentro del área de contenido; valores de tower.css citando la clase que se imita y su línea; !important
   SOLO donde MudBlazor (utilidades pa-N/ma-N, .mud-table thead th) o app.css ya lo marcaron en esa propiedad.
   Contexto: /root/tower-parity/identico/CONTEXTO-TEMA.md · guía: tema/guia-tower.md · base: tema/base.md.

   ANCLAS (cómo se acota cada regla sin tocar un solo .razor):
     · LISTA   = .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="traslados.lista.encabezado"])
                 (el DevSectionTag de Transfers.razor:18 es hijo directo del wrapper de página).
     · PANELES del traslado = su propio DevSectionTag traslado.<pestaña>.<sección> (TransferForm,
                 TransferContractsPanel, DispatchLoadEditor, TransferGatehousePanel, TransferContainerPanel,
                 TransferTrackingPanel). Son exclusivos de traslados y valen igual dentro del contrato
                 unificado (el marítimo 1:1 muestra estos mismos paneles en /contracts/{id}).
     · CAMIÓN  = .ct-lo / .ct-seg / .ct-cab / .ct-group-* (app.css:852-886), compartido por la pestaña
                 Asignación (plan) y Despacho (carga real): una sola definición para las dos.
     · CALENDARIO = .ct-cal* / .ct-evt* / .ct-trucks-* (el <style> del propio CalendarioContratos.razor) y
                 los data-testid de su barra (calendario.toolbar.*). Ojo: ese <style> va DESPUÉS de las hojas
                 enlazadas, así que empata por orden; acá se gana por especificidad (html.tw-tema + clase).
     · VARIACIÓN = .ct-delta-* / .ct-arrow / .ct-var-detail (<style> de LoadVariance.razor).
     · TRACKING  = el marco del mapa (div con estilo inline dentro de .mud-grid-item) y su panel de flota.
     · /proveedor no necesita nada propio: es PageHeader + alert + MudDataGrid, todo resuelto en base.css.

   Variables --stint-* que el .razor usa INLINE o en su <style> (fondos de evento, colores del camión,
   deltas): no se pueden pisar sin !important, así que se REDEFINE la variable --stint-* en el elemento
   (o en un ancestro acotado) con el token equivalente del tower. Nunca de forma global: base.css decidió
   no redefinirlas. Es la misma técnica que usa contratos.css.
   ===================================================================================================== */

/* ============================================================================================
   1. LISTA /transfers — en el tower una lista es UNA tarjeta (.tw-e-card, 622): barra de herramientas
   (.tw-e-tbar, 654) + cabecera surface2 (.tw-e-thead, 671) + filas de una línea (.tw-e-row, 678) +
   paginación al pie (.tw-e-pag, 747). Hoy es «paper pa-4 + barra + grilla con marco propio»: se funden.
   Mismo tratamiento que /contracts en contratos.css §1 (son la misma pieza en dos páginas).
   ============================================================================================ */
/* 1.1 papel = .tw-e-card (622): sin relleno (pa-4 es !important en Mud), radio 10, recorte */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="traslados.lista.encabezado"]) > .mud-paper:not(.tw *){
  padding:0 !important; border-radius:10px !important; overflow:hidden;
}
/* 1.2 barra de herramientas (búsqueda + «Limpiar filtros» + «Columnas») = .tw-e-tbar (654) */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="traslados.lista.encabezado"]) > .mud-paper > .d-flex:not(.tw *){
  padding:8px 13px; border-bottom:1px solid var(--tt-line2); margin:0 !important; gap:6px; flex-wrap:wrap;
}
/* 1.3 búsqueda = .tw-e-search (655): mono 11, 5×8, hairline radio 6; no se estira a toda la barra */
html.tw-tema .mud-input-control:has([data-testid="traslados.lista.buscar"]):not(.tw *){ flex-basis:190px; max-width:460px; }
html.tw-tema .mud-input-control:has([data-testid="traslados.lista.buscar"]) .mud-input:not(.tw *){ font-family:var(--tt-mono); font-size:11px; line-height:normal; }
html.tw-tema .mud-input-control:has([data-testid="traslados.lista.buscar"]) .mud-input-root:not(.tw *){ padding-top:5px; padding-bottom:5px; }
html.tw-tema .mud-input-control:has([data-testid="traslados.lista.buscar"]) .mud-input-adornment .mud-icon-root:not(.tw *){ font-size:15px; }
/* lo que sigue a la búsqueda se va a la derecha (= .tw-e-tbar: buscar a la izquierda, controles a la derecha) */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="traslados.lista.encabezado"]) > .mud-paper > .d-flex > .mud-input-control + *:not(.tw *){ margin-left:auto; }
/* 1.4 «Limpiar filtros» / «Columnas» = .tw-e-clear (534): mono 10 0,12em mayúsculas, 5×9, radio 6, hairline */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="traslados.lista.encabezado"]) > .mud-paper > .d-flex .mud-button-text:not(.tw *){
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase; font-weight:400 !important; padding:5px 9px;
  border:1px solid var(--tt-line); border-radius:6px !important; color:var(--tt-ink2);
}
/* el interruptor de Portería («Solo los que van a llegar») vive en la misma barra: que no la ensanche */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="traslados.lista.encabezado"]) > .mud-paper > .d-flex > .mud-switch:not(.tw *){ margin-right:0; }
/* 1.5 la grilla pierde su marco propio: el marco es el papel (= .tw-e-card) */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="traslados.lista.encabezado"]) .mud-table.mud-data-grid:not(.tw *){ border:0; border-radius:0 !important; background:transparent; }
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="traslados.lista.encabezado"]) .mud-table-container:not(.tw *){ border-radius:0 !important; }
/* 1.6 filas de UNA línea (= .tw-e-row 678 + .tw-e-dest/-name 688-690: nowrap). La grilla ya se desplaza en
   horizontal; el quiebre solo alargaba las filas. Los iconos de modo y los «/» traen color:var(--stint-muted). */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="traslados.lista.encabezado"]) .mud-table-body .mud-table-cell:not(.tw *){
  white-space:nowrap; vertical-align:middle; --stint-muted:var(--tt-ink3);
}
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="traslados.lista.encabezado"]) .mud-table-body .mud-table-cell .mud-icon-root:not(.tw *){ font-size:14px; }
/* N° de traslado y patentes: el <strong class="ct-mono"> es el identificador = .tw-e-id (685) mono 12,5 600 0,02em */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="traslados.lista.encabezado"]) .mud-table-body .mud-table-cell .ct-mono:not(.tw *){ font-size:12.5px; font-weight:600; letter-spacing:0.02em; }
/* la fecha es dato, no identificador = .tw-e-date (532) mono 11,5 400 */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="traslados.lista.encabezado"]) .mud-table-body .mud-table-cell > .ct-mono:not(.tw *){ font-size:11.5px; font-weight:400; letter-spacing:normal; }
/* varios contratos por fila: líneas juntas y compactas (= .tw-e-cell, 680: gap 2) */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="traslados.lista.encabezado"]) .mud-table-cell .mud-link.ct-mono:not(.tw *){ font-size:11.5px; line-height:1.45; }
/* 1.7 cabecera con filtro (.ct-head-filter): título + embudo pegado, apagado */
html.tw-tema .ct-head-filter:not(.tw *){ gap:3px; }
html.tw-tema .ct-head-filter .mud-icon-button:not(.tw *){ padding:0 1px; color:var(--tt-ink3); }

/* ============================================================================================
   2. DETALLE /transfers/{id} — cáscara: el cuerpo de la pestaña va al ras (el tower no sangra el cuerpo
   bajo las pestañas) y el papel del tracker queda hairline. PanelClass="pa-4" es utilidad !important de Mud.
   Se acota por :has() a los paneles de TRASLADO para no pisar el contenedor de pestañas del contrato.
   ============================================================================================ */
html.tw-tema .mud-tabs-panels:has(.ct-devtag-anchor[data-testid^="traslado."]):not(.tw *){ padding:14px 0 0 !important; border-radius:0; }

/* ============================================================================================
   3. PANELES DEL TRASLADO — el patrón del área es SIEMPRE «MudPaper Outlined pa-3 > DevSectionTag +
   MudText subtitle2 (con icono) [+ caption de ayuda]». En el tower eso es un panel (.tw-panel, 173) con
   cabecera propia (.tw-panel-head, 176: 11×14 con hairline abajo) y título .tw-h14 (147).
   Base los dejaba como «tile» surface2 (paper outlined dentro de paper): acá suben a panel de verdad.
   ============================================================================================ */
html.tw-tema .mud-paper.mud-paper-outlined:has(> .ct-devtag-anchor[data-testid^="traslado."]):not(.tw *){
  background:var(--tt-surface); border:1px solid var(--tt-line); border-radius:12px !important;
}
/* cabecera = .tw-panel-head (176) + .tw-h14 (147). pa-3 = 12 px (utilidad !important de Mud): el título
   sale del relleno con márgenes negativos para llegar al borde del panel. */
html.tw-tema .mud-paper.mud-paper-outlined.pa-3 > .ct-devtag-anchor[data-testid^="traslado."] + .mud-typography-subtitle2:not(.tw *){
  display:block; margin:-12px -12px 12px !important; padding:11px 14px; border-bottom:1px solid var(--tt-line2);
  font-family:var(--tt-display); font-weight:800 !important; font-size:14px; line-height:normal; color:var(--tt-ink);
}
html.tw-tema .mud-paper.mud-paper-outlined > .ct-devtag-anchor[data-testid^="traslado."] + .mud-typography-subtitle2 .mud-icon-root:not(.tw *){
  font-size:15px; color:var(--tt-ink3) !important; margin-right:6px !important;
}
/* el contador «· n seleccionado(s)» del título (span con style inline) queda como nota mono (= .tw-e-pag-info, 748) */
html.tw-tema .mud-paper.mud-paper-outlined > .ct-devtag-anchor[data-testid^="traslado."] + .mud-typography-subtitle2 span[style*="font-weight:400"]:not(.tw *){
  font-family:var(--tt-mono); font-size:10.5px; color:var(--tt-ink3); opacity:1 !important; letter-spacing:normal;
}
/* la ayuda bajo el título (caption que base deja en mono 10) es texto corrido: Hanken 12 ink2 = .tw-e-prod (688) */
html.tw-tema .mud-paper.mud-paper-outlined > .ct-devtag-anchor[data-testid^="traslado."] ~ .mud-typography-caption:not(.tw *){
  font-family:var(--tt-sans); font-size:12px; line-height:1.45; color:var(--tt-ink2) !important; text-wrap:pretty;
}
/* rótulos de sub-sección dentro del panel («Contratos del traslado», «Disponibles…»): caption con
   font-weight:600/700 inline = .tw-e-side-lbl (555): mono 9,5 0,16em mayúsculas ink3 */
html.tw-tema .mud-paper.mud-paper-outlined:has(> .ct-devtag-anchor[data-testid^="traslado."]) .mud-typography-caption[style*="font-weight:600"]:not(.tw *),
html.tw-tema .mud-paper.mud-paper-outlined:has(> .ct-devtag-anchor[data-testid^="traslado."]) .mud-typography-caption[style*="font-weight:700"]:not(.tw *){
  font-family:var(--tt-mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--tt-ink3) !important; font-weight:400 !important;
}
/* las tarjetas con MudCardHeader (Transporte, Confirmación del transporte, Contenedor, Retiro del depósito)
   ya son .tw-panel + .tw-panel-head por base; acá solo el icono del título, apagado y chico (§5.5 de la guía) */
html.tw-tema .mud-card-header:has([data-testid^="traslado."]) .mud-icon-root:not(.tw *){ font-size:15px; color:var(--tt-ink3); }
/* pie de acciones de un panel (Guardar/Confirmar a la derecha) = .tw-p-card-foot (961) */
html.tw-tema .mud-paper.mud-paper-outlined:has(> .ct-devtag-anchor[data-testid^="traslado."]) > .mud-grid > .mud-grid-item.d-flex.justify-end:not(.tw *){ padding-top:2px; }

/* ============================================================================================
   4. CAMIÓN (.ct-lo) — plan de carga (Asignación) y carga real (Despacho). La cabecera TINTA de app.css
   (848-851, blanca sobre --stint-ink) pasa a la cabecera clara del tower (.tw-e-thead 671 + .tw-e-th 672).
   El dibujo del camión (cajón + cabina) se conserva: es un pictograma, no una pieza de UI; solo pierde la
   sombra (el tower no tiene sombras) y cambia el slate por la tinta secundaria del tower.
   ============================================================================================ */
html.tw-tema .ct-lo:not(.tw *){ --stint-slate:var(--tt-ink2); --stint-ink:var(--tt-nav); --stint-border:var(--tt-line); }
html.tw-tema .ct-lo thead th:not(.tw *){
  background:var(--tt-surface2); color:var(--tt-ink3);
  font-family:var(--tt-mono); font-size:9.5px; font-weight:600; letter-spacing:0.11em; text-transform:uppercase;
  padding:7px 8px; border-bottom:1px solid var(--tt-line2);
}
/* el relleno lateral se queda en los 6-8 px de app.css: la tabla tiene 11 columnas y el ancho la manda el
   contenido (width:100% + layout automático). Subirlo a los 13 px del tower (.tw-e-row, 678) la empujaba
   ~44 px fuera del panel y cortaba la última columna. Alto sí: 8 px arriba/abajo, fila densa del tower. */
html.tw-tema .ct-lo tbody td:not(.tw *){ font-size:12.5px; padding:8px 6px; border-bottom:1px solid var(--tt-line2); }
html.tw-tema .ct-lo tbody td.ct-num:not(.tw *){ font-family:var(--tt-mono); font-size:11px; }          /* .tw-num (189) */
html.tw-tema .ct-lo .ct-kg-total:not(.tw *){ font-family:var(--tt-mono); font-weight:600; }            /* mono 700 no existe: 600 */
/* el chip de «Conserv.» hereda de base el min-width:112px de .ct-badge (columnas parejas en las LISTAS),
   pero acá la columna mide 96 px: el chip empujaba la tabla y quedaba cortado a la mitad contra el borde
   del panel (se ve en tema/traslados/antes-mar-asignacion.png: antes ni siquiera entraba). Acá no hay
   columnas que emparejar, así que se le devuelve su ancho natural = .tw-e-pill (609). */
html.tw-tema .ct-lo .mud-chip.ct-badge:not(.tw *){ min-width:0 !important; }
/* el N° de contrato es un identificador: no se parte en dos líneas (= .tw-e-id, 685, nowrap por herencia de .tw-e-row) */
html.tw-tema .ct-lo td .mud-link:not(.tw *){ white-space:nowrap; font-family:var(--tt-mono); font-size:11.5px; letter-spacing:0.02em; }
/* sub-línea del destino (aeropuerto/puerto) y del consignatario: <div style="…font-size:0.85em"> = .tw-e-sub (691) */
html.tw-tema .ct-lo td > div[style*="font-size:0.85em"]:not(.tw *){
  font-family:var(--tt-mono); font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--tt-ink3) !important; line-height:1.4; margin-top:2px;
}
html.tw-tema .ct-lo td > div[style*="font-size:0.85em"] .mud-icon-root:not(.tw *){ font-size:12px !important; }
/* nombre del producto y su sub-línea = .tw-e-name (690) / .tw-e-prod (688) */
html.tw-tema .ct-prod-name:not(.tw *){ font-size:12.5px; font-weight:600; }
html.tw-tema .ct-prod-sub:not(.tw *){ font-size:11.5px; color:var(--tt-ink2); }
/* número de orden de carga = .tw-e-id (685) */
html.tw-tema .ct-order-num:not(.tw *){ font-family:var(--tt-mono); font-size:12.5px; font-weight:600; }
html.tw-tema .ct-order-arrows .mud-icon-button:not(.tw *){ color:var(--tt-ink3); }
/* posición dentro del cajón = .tw-p-num (945): cuadrado 26, radio 7, mono 600, SIN sombra */
html.tw-tema .ct-seg-pos:not(.tw *){ width:26px; height:26px; border-radius:7px; background:var(--tt-surface); color:var(--tt-ink);
  font-family:var(--tt-mono); font-size:11px; font-weight:600; box-shadow:none; }
html.tw-tema .ct-seg-pos.ct-seg-pos-sub:not(.tw *){ width:auto; min-width:42px; height:24px; border-radius:7px; font-size:11px; }
/* banda de parada dentro de la tabla y suelta = .tw-e-side-lbl (555) sobre surface2, con hairline */
html.tw-tema .ct-group-header td:not(.tw *){
  background:var(--tt-surface2); color:var(--tt-ink3);
  font-family:var(--tt-mono); font-size:9.5px; font-weight:400; letter-spacing:0.13em; text-transform:uppercase;
  padding:6px 10px !important; border-top:1px solid var(--tt-line2) !important; border-bottom:1px solid var(--tt-line2) !important;
}
html.tw-tema .ct-group-band:not(.tw *){
  background:var(--tt-surface2); color:var(--tt-ink3);
  font-family:var(--tt-mono); font-size:9.5px; font-weight:400; letter-spacing:0.13em; text-transform:uppercase;
  padding:6px 10px; border:1px solid var(--tt-line2); border-radius:6px; margin:10px 0 2px;
}
html.tw-tema .ct-group-arrow:not(.tw *){ color:var(--tt-ink3); }
/* el paréntesis de ayuda de la banda («(1 ítem(s) — se cargan al final)») es TEXTO, no rótulo: va en
   Hanken, en minúsculas y sin tracking (= .tw-e-prod, 688). En el .razor es un <span style="font-weight:400;
   color:var(--mud-palette-text-secondary);margin-left:8px">, NO un .mud-typography-caption: por eso la regla
   anterior (que apuntaba al caption) no lo alcanzaba y salía en MAYÚSCULAS mono, ilegible. */
html.tw-tema .ct-group-header td span[style*="font-weight:400"]:not(.tw *){
  font-family:var(--tt-sans); font-size:11.5px; font-weight:400; letter-spacing:normal; text-transform:none; color:var(--tt-ink2) !important;
}
/* total del camión = .tw-lectura (234): franja nav con rótulo y cifra, radio 12, SIN sombra */
html.tw-tema .ct-truck-total:not(.tw *){ background:var(--tt-nav); color:var(--tt-navInk); border-radius:12px; padding:14px 18px; box-shadow:none; }
html.tw-tema .ct-tt-label:not(.tw *){ font-size:12.5px; font-weight:600; }
html.tw-tema .ct-tt-label .mud-icon-root:not(.tw *){ font-size:16px; color:var(--tt-navInk2); }
html.tw-tema .ct-tt-val:not(.tw *){ font-family:var(--tt-display); font-weight:800; font-size:22px; letter-spacing:-0.02em; }   /* .tw-c-kpi-value (222) */
/* banner de ruta del traslado = panel surface2 con hairline (.tw-f-tile, 336) y nodos = .tw-chip (126) */
html.tw-tema .ct-route:not(.tw *){ background:var(--tt-surface2); border:1px solid var(--tt-line2); border-radius:10px; padding:9px 12px; gap:6px; }
html.tw-tema .ct-route-node:not(.tw *){
  background:var(--tt-surface); border:1px solid var(--tt-line); border-radius:6px; padding:4px 9px;
  font-family:var(--tt-mono); font-size:10.5px; letter-spacing:0.03em; font-weight:400; color:var(--tt-ink2);
}
html.tw-tema .ct-route-node.ct-route-dest:not(.tw *){ background:var(--tt-nav); border-color:var(--tt-nav); color:#FFFFFF; font-weight:600; }   /* .tw-chip.is-on (130) */
html.tw-tema .ct-route-node .mud-icon-root:not(.tw *){ font-size:14px; }
html.tw-tema .ct-route-num:not(.tw *){ width:17px; height:17px; border-radius:5px; background:var(--tt-deep); color:#FFFFFF;
  font-family:var(--tt-mono); font-size:9.5px; font-weight:600; }                                        /* .tw-e-hito-n (732) */
html.tw-tema .ct-route-arrow:not(.tw *){ color:var(--tt-ink3); font-weight:400; }
html.tw-tema .ct-route-arrow .mud-icon-root:not(.tw *){ font-size:15px !important; color:var(--tt-ink3); }
/* líneas de los candidatos (buscador de contratos) = .tw-e-prod (688) + .tw-num (189) */
html.tw-tema .ct-line-cols:not(.tw *){ font-size:12px; line-height:1.5; color:var(--tt-ink2); }
html.tw-tema .ct-line-cols .ct-line-wh:not(.tw *){ font-weight:600; color:var(--tt-ink); }
html.tw-tema .ct-line-cols .ct-line-boxes:not(.tw *){ font-family:var(--tt-mono); font-size:11px; }
/* carga real: la fila quitada y el detalle del diff (= .tw-note95, 156) */
html.tw-tema .ct-le-diff:not(.tw *){ font-family:var(--tt-mono); font-size:9.5px; color:var(--tt-ink3); line-height:1.5; }
/* ruta del camión (TransferStopList): la grilla ya alinea; solo el número de parada en mono */
html.tw-tema .ct-stops-grid .ct-stop-num:not(.tw *){ font-family:var(--tt-mono); font-size:11px; color:var(--tt-ink3); }

/* ============================================================================================
   5. CALENDARIO /operaciones/calendario — la página con más CSS propio (60 líneas en su .razor).
   No se toca la lógica de la grilla (table-layout fijo, alturas): solo el vocabulario.
   ============================================================================================ */
/* 5.1 barra de herramientas: los toggles Contratos/Traslados y Mes/Semana/Semana+ son MudButton
   Filled (coral) / Outlined. En el tower un toggle es un chip: .tw-chip (126) y .tw-chip.is-on (130).
   Se estilan los BOTONES (no su contenedor: el de «Mes/Semana» comparte fila con el contador). */
html.tw-tema [data-testid^="calendario.toolbar.contenido_"]:not(.tw *),
html.tw-tema [data-testid^="calendario.toolbar.vista_"]:not(.tw *){
  font-family:var(--tt-mono); font-size:10.5px; font-weight:400 !important; letter-spacing:0.03em; text-transform:none;
  padding:5px 10px; border:1px solid var(--tt-line) !important; border-radius:6px !important;
  background:transparent !important; color:var(--tt-ink2) !important; box-shadow:none;
}
/* El chip elegido repite el relleno del no elegido: la regla general de base.css para .mud-button-filled-primary
   (0,4,1) le gana a la de arriba (0,3,1) y le imponía 8×9 en vez de 5×10, o sea 2 px menos de ancho y 6 px más de
   alto. Acá se empata la especificidad (0,4,1) y manda el orden: esta hoja va después de base.css. Igual que el
   tower, donde .tw-chip.is-on (130) solo cambia color, fondo y peso — nunca la caja (reporte de Nicolás, 24-09). */
html.tw-tema [data-testid^="calendario.toolbar.contenido_"].mud-button-filled:not(.tw *),
html.tw-tema [data-testid^="calendario.toolbar.vista_"].mud-button-filled:not(.tw *){
  background:var(--tt-nav) !important; border-color:var(--tt-nav) !important; color:#FFFFFF !important; font-weight:600 !important;
  padding:5px 10px;
}
/* ‹ Hoy › = .tw-e-pag-btn (749): hairline, radio 6, mono 10 mayúsculas (el alto 40 px viene inline) */
html.tw-tema [data-testid="calendario.toolbar.hoy"]:not(.tw *){
  font-family:var(--tt-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; font-weight:400 !important;
  border:1px solid var(--tt-line); border-radius:6px !important; background:var(--tt-surface); color:var(--tt-ink);
}
html.tw-tema [data-testid="calendario.toolbar.anterior"]:not(.tw *),
html.tw-tema [data-testid="calendario.toolbar.siguiente"]:not(.tw *){
  border:1px solid var(--tt-line); border-radius:6px !important; background:var(--tt-surface); color:var(--tt-ink3);
}
/* 5.2 la grilla del mes: cabecera = .tw-e-thead (671) + .tw-e-th (672); columna «Sem» = .tw-e-sub (691) */
html.tw-tema .ct-cal th:not(.tw *){
  background:var(--tt-surface2); color:var(--tt-ink3);
  font-family:var(--tt-mono); font-size:9.5px; font-weight:600; letter-spacing:0.11em; text-transform:uppercase; padding:6px 4px;
  border-color:var(--tt-line2);
}
html.tw-tema .ct-cal td:not(.tw *){ border-color:var(--tt-line2); }
html.tw-tema .ct-cal-wk:not(.tw *){ background:var(--tt-surface2); color:var(--tt-ink3); font-family:var(--tt-mono); font-size:9.5px; }
/* el número de día NO es un rótulo decorativo: es la referencia con la que se lee la grilla. En ink3
   (#93A3AC sobre blanco) da 2,6:1 y a 9,5 px casi no se ve; se deja mono pero en ink2 (7,6:1 sobre
   surface) y 10,5 px = .tw-e-pag-info (748), que es el «número chico legible» del tower. */
html.tw-tema .ct-cal-daynum:not(.tw *){ font-family:var(--tt-mono); font-size:10.5px; color:var(--tt-ink2); }
html.tw-tema .ct-cal-other:not(.tw *){ background:var(--tt-surface2); }                                  /* días de otro mes, apagados */
html.tw-tema .ct-cal-today:not(.tw *){ outline:2px solid var(--tt-accent); outline-offset:-2px; }       /* «ahora» = accent (.tw-e-hito-n.is-done, 734) */
/* 5.3 rótulo de sección del día (MARÍTIMO / EXPORTACIÓN / AÉREO / Terrestres) = .tw-eb-95-13 (151) */
html.tw-tema .ct-cal-sep:not(.tw *){
  font-family:var(--tt-mono); font-size:9.5px; font-weight:400; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--tt-ink3); border-top:1px solid var(--tt-line2); margin:7px 0 2px; padding-top:5px;
}
html.tw-tema .ct-cal-sep .mud-icon-root:not(.tw *){ color:var(--tt-ink3); }
/* 5.4 contador de camiones del día = .tw-e-pill (609) con los tintes del tower */
html.tw-tema .ct-cal-trucks:not(.tw *){
  font-family:var(--tt-mono); font-size:10.5px; font-weight:600; padding:3px 7px; border-radius:5px; margin:2px 0 5px;
}
html.tw-tema .ct-trucks-ok:not(.tw *)   { background:rgba(28,114,147,0.12); color:var(--tt-deep); }      /* .tw-tag--aereo (194) */
html.tw-tema .ct-trucks-pend:not(.tw *) { background:rgba(181,101,29,0.12); color:var(--tt-warn); }      /* .tw-p-tag--warn (953) */
html.tw-tema .ct-trucks-empty:not(.tw *){ background:var(--tt-bar); color:var(--tt-ink2); }              /* .tw-e-grp (686) */
/* 5.4.1 BARRA DE HERRAMIENTAS del calendario: los dos (o tres) MudSelect eran lo único que quedaba hablando Material
   —valor en Hanken 13, el texto más grande de toda la barra— al lado de botones mono de 10-10,5. Pasan al select de
   filtro del tower (.tw-e-sel, 657: mono 10,5; ink3 sin filtrar, ink cuando filtra, «único indicador de filtro
   activo»). El ancla es el papel que contiene los data-testid calendario.toolbar.*, así no hace falta tocar el razor.
   NO se les quita el rótulo flotante ni se les baja el alto: «Todos» y «Todas» no dicen nada sin su rótulo, y los
   vecinos (‹ HOY ›, «Quitar filtros») traen height:40px INLINE desde el razor, así que achicar solo los selects
   dejaría la barra más despareja que ahora. Eso queda anotado como pendiente de razor. */
html.tw-tema .mud-paper:has([data-testid^="calendario.toolbar."]) .mud-select .mud-input:not(.tw *){
  font-family:var(--tt-mono); font-size:10.5px; color:var(--tt-ink);
}
html.tw-tema .mud-paper:has([data-testid^="calendario.toolbar."]) .mud-select .mud-input-root:not(.tw *){ padding-top:12px; padding-bottom:12px; }   /* el alto sigue siendo el de los botones de al lado */
html.tw-tema .mud-paper:has([data-testid^="calendario.toolbar."]) .mud-select .mud-input-adornment .mud-icon-root:not(.tw *){ font-size:16px; }

/* «+» de la celda = .tw-e-hito-n (732): cuadrado 17, radio 5, deep, blanco */
html.tw-tema .ct-cal-add:not(.tw *){ width:17px; height:17px; border-radius:5px; background:var(--tt-deep);
  font-family:var(--tt-mono); font-size:12px; font-weight:600; }
html.tw-tema .ct-cal-add:not(.tw *):hover{ filter:none; background:var(--tt-deep); }                     /* el tower no tiene hover */
/* 5.5 tarjeta de contrato/traslado del día: tinte del tower + barra izquierda de 3 px (= .tw-g-ahorro, 450).
   Los .razor pintan fondo y borde con --stint-*: se redefinen EN la grilla, que es donde viven. */
html.tw-tema .ct-cal:not(.tw *){
  --stint-success:var(--tt-ok);    --stint-success-bg:rgba(21,127,95,0.10);
  --stint-warning:var(--tt-warn);  --stint-warning-bg:rgba(181,101,29,0.10);
  --stint-danger:var(--tt-crit);   --stint-danger-bg:rgba(192,64,46,0.10);
  --stint-info-bg:rgba(28,114,147,0.10); --stint-teal:var(--tt-deep);
  --stint-coral:var(--tt-coral);   --stint-coral-bg:rgba(255,107,91,0.08);                               /* .tw-c-tabla-tr.is-on (288) */
  --stint-base:var(--tt-bar); --stint-muted:var(--tt-ink2); --stint-ink:var(--tt-ink); --stint-border:var(--tt-line2);
}
html.tw-tema .ct-cal-evt:not(.tw *){ border-radius:5px; padding:3px 7px; font-size:11.5px; border-left-width:3px; }
html.tw-tema .ct-cal-evt:not(.tw *):hover{ background:var(--tt-surface2); }                               /* .tw-e-row:hover (679) */
html.tw-tema .ct-evt-id:not(.tw *){ font-family:var(--tt-mono); font-size:11px; font-weight:600; letter-spacing:0.02em; color:var(--tt-ink); }   /* .tw-e-id (685) */
html.tw-tema .ct-evt-wh:not(.tw *){ font-size:11px; opacity:1; color:var(--tt-ink2); }                    /* .tw-e-prod (688) */
html.tw-tema .ct-evt-ok:not(.tw *){ font-family:var(--tt-mono); font-size:9px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--tt-ok); }   /* .tw-e-grp (686) en ok */
html.tw-tema .ct-evt-mode:not(.tw *){ opacity:.7; color:var(--tt-ink3); }
/* total de kg del día = .tw-c-tabla-tr.is-on (288, coral al 8 % con barra coral) leído como KPI:
   rótulo mono arriba (.tw-kpi-label, 179) y cifra abajo, que en una celda angosta se lee mejor que en línea */
html.tw-tema .ct-cal-total:not(.tw *){
  display:flex; flex-direction:column; gap:1px; text-align:left;
  font-family:var(--tt-mono); font-size:11px; font-weight:600; letter-spacing:normal; color:var(--tt-ink);
  border-radius:5px; padding:4px 7px; border-left:3px solid var(--tt-coral);
}
html.tw-tema .ct-cal-total .lbl:not(.tw *){ font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--tt-ink3); opacity:1; font-weight:400; margin-right:0; }
/* 5.6 tooltip del calendario (vive bajo <body>, dentro de la burbuja nav de base.css § capas flotantes) */
html.tw-tema .ct-evt-tt{ font-family:var(--tt-sans); font-size:12px; line-height:1.45; letter-spacing:normal; text-align:left; }
/* alineado a la izquierda: MudBlazor centra el tooltip y acá son cinco líneas de ficha (nombre, ruta,
   producto, cajas, kg); centradas se leen como un poema. Las filas «rótulo … valor» ya van a los extremos. */
html.tw-tema .ct-evt-tt .ct-evt-tt-h{ font-family:var(--tt-mono); font-size:11px; font-weight:600; letter-spacing:0.06em; margin-bottom:3px; }
html.tw-tema .ct-evt-tt .ct-evt-tt-row strong{ font-family:var(--tt-mono); font-weight:600; }
html.tw-tema .ct-evt-tt hr{ border-top-color:rgba(255,255,255,0.18); opacity:1; }                        /* .tw-nav-vsep (99) */

/* ============================================================================================
   6. VARIACIÓN DE CARGA /operaciones/variacion — dos paneles y una tabla plan→real. Lo propio son los
   deltas y la fila de detalle desplegada (= .tw-e-detalle, 712: surface2 con hairline arriba).
   ============================================================================================ */
html.tw-tema .ct-delta-pos:not(.tw *){ font-family:var(--tt-mono); font-size:11px; font-weight:600; color:var(--tt-ok); }     /* .tw-delta.is-up (168) */
html.tw-tema .ct-delta-neg:not(.tw *){ font-family:var(--tt-mono); font-size:11px; font-weight:600; color:var(--tt-crit); }   /* .tw-delta.is-down (169) */
html.tw-tema .ct-arrow:not(.tw *){ color:var(--tt-ink3); opacity:1; }
html.tw-tema .ct-var-detail td:not(.tw *){ background:var(--tt-surface2); }                                                   /* .tw-e-detalle (712) */
html.tw-tema .ct-var-detail .mud-simple-table:not(.tw *){ background:transparent; border:0; border-radius:0 !important; }
html.tw-tema .ct-var-detail .mud-simple-table table * tr th:not(.tw *){ background:transparent !important; }

/* ============================================================================================
   7. TRACKING DE FLOTA /transporte/tracking — el mapa NO se toca (Leaflet pinta dentro); sí su marco:
   hairline y radio 10 como .tw-e-card (622). El div del mapa no tiene clase (solo estilo inline con el
   alto): se ancla por su padre .mud-grid-item. Si se le agrega una clase en el .razor, cambiar acá.
   ============================================================================================ */
html.tw-tema .mud-grid-item > div[style*="height:480px"]:not(.tw *){ border:1px solid var(--tt-line); border-radius:10px; }
/* panel de la flota: ítems densos (= .tw-e-item--all, 565) con el chip de patente a la izquierda */
html.tw-tema .mud-grid-item > .mud-paper:has(.mud-list) .mud-list-item:not(.tw *){ padding:7px 9px; }
html.tw-tema .mud-grid-item > .mud-paper:has(.mud-list) .mud-list-item .mud-typography-body2:not(.tw *){ font-size:12.5px; }
html.tw-tema .mud-grid-item > .mud-paper:has(.mud-list) .mud-list-item .mud-typography-caption:not(.tw *){ font-family:var(--tt-sans); font-size:11.5px; color:var(--tt-ink3); }

/* ============================================================================================
   8. TABLERO «SEMANA+» /operaciones/calendario (vista Semana+) — SemanaPlusBoard.razor trae 48 líneas
   de <style> propio con su vocabulario `sp-*` (columna por día, pool «Sin asignar», tarjetas de
   traslado y de contrato arrastrables). Es la tercera vista del calendario y hasta ahora quedaba
   entera con el look Material: bandas rosadas, tarjetas verdes/ámbar de Stint y mono 700.
   Se traduce pieza por pieza; NO se toca la geometría (el drag-drop de MudDropContainer depende de
   ella: .sp-week scrollea en horizontal, .sp-day mide 230-250 px, .sp-zone tiene min-height).
   ============================================================================================ */
/* 8.1 tokens: las tarjetas pintan fondo y borde con --stint-* desde el <style> del .razor; se redefinen
   DENTRO del tablero (como en §5.5 con .ct-cal), nunca global. */
html.tw-tema .sp-week:not(.tw *){
  --stint-success:var(--tt-ok);    --stint-success-bg:rgba(21,127,95,0.10);      /* .tw-e-pill (609) */
  --stint-warning:var(--tt-warn);  --stint-warning-bg:rgba(181,101,29,0.10);     /* .tw-p-tag--warn (953) */
  --stint-info:var(--tt-deep);     --stint-coral-bg:rgba(255,107,91,0.08);       /* .tw-c-tabla-tr.is-on (288) */
  --stint-border:var(--tt-line);   --stint-white:var(--tt-surface); --stint-ink:var(--tt-ink); --stint-teal:var(--tt-accent);
}
/* 8.2 cabecera del día = .tw-e-map-title (627): Archivo 700 13,5 ink, con hairline abajo (no la barra
   de 2 px en primary de hoy). El día de hoy se marca con accent, como el hito cumplido (.tw-e-hito-n.is-done, 734). */
html.tw-tema .sp-day-head:not(.tw *){
  font-family:var(--tt-display); font-weight:800; font-size:13.5px; letter-spacing:-0.01em; color:var(--tt-ink);
  padding:2px 2px 6px; border-bottom:1px solid var(--tt-line);
}
html.tw-tema .sp-day-head.sp-today:not(.tw *){ color:var(--tt-ink); border-bottom-color:var(--tt-accent); }
/* 8.3 total aéreo del día = el mismo KPI de franja del mes (.ct-cal-total, §5.5): tinte coral y barra de 3 px */
html.tw-tema .sp-airtotal:not(.tw *){
  font-family:var(--tt-mono); font-size:10.5px; font-weight:600; letter-spacing:normal; color:var(--tt-ink);
  background:rgba(255,107,91,0.08); border-radius:5px; border-left:3px solid var(--tt-coral); padding:4px 8px;
}
html.tw-tema .sp-airtotal .mud-icon-root:not(.tw *){ font-size:13px !important; color:var(--tt-ink3); }
/* 8.4 contador de camiones = .tw-e-pill (609); los colores ya los pone §5.4 (.ct-trucks-ok/-pend/-empty) */
html.tw-tema .sp-trucks:not(.tw *){ font-family:var(--tt-mono); font-size:10.5px; font-weight:600; border-radius:5px; padding:4px 8px; }
/* «+» = .tw-e-hito-n (732): cuadrado 17, radio 5, deep, blanco, sin hover (tower.css:7) */
html.tw-tema .sp-trucks-add:not(.tw *){
  width:17px; height:17px; border-radius:5px; background:var(--tt-deep); color:#FFFFFF;
  font-family:var(--tt-mono); font-size:12px; font-weight:600;
}
html.tw-tema .sp-trucks-add:not(.tw *):hover{ filter:none; background:var(--tt-deep); }
/* 8.5 columnas «Sin asignar» y «Traslado N» = .tw-e-card (622): hairline, radio 10, cabecera con hairline abajo */
html.tw-tema .sp-pool:not(.tw *), html.tw-tema .sp-transfer:not(.tw *){ border:1px solid var(--tt-line); border-radius:10px; }
html.tw-tema .sp-pool:not(.tw *){ background:var(--tt-surface2); }                        /* .tw-f-tile (336) */
html.tw-tema .sp-transfer:not(.tw *){ background:var(--tt-surface); }
html.tw-tema .sp-mini-head:not(.tw *){ padding:7px 9px; border-bottom:1px solid var(--tt-line2); gap:2px; }
html.tw-tema .sp-mini-head .mud-icon-root:not(.tw *){ font-size:13px !important; color:var(--tt-ink3); }
html.tw-tema .sp-mini-head .sp-line > span:first-child:not(.tw *){ font-size:12.5px; font-weight:600; color:var(--tt-ink); }   /* .tw-e-name (690) */
html.tw-tema .sp-sub:not(.tw *){ font-family:var(--tt-sans); font-size:11.5px; color:var(--tt-ink2); }                          /* .tw-e-prod (688) */
html.tw-tema .sp-kg:not(.tw *){ font-family:var(--tt-mono); font-size:11px; font-weight:600; letter-spacing:normal; }           /* .tw-num (189) */
html.tw-tema .sp-mixed:not(.tw *){ font-family:var(--tt-sans); font-size:11.5px; color:var(--tt-deep); }
html.tw-tema .sp-mismatch:not(.tw *){ color:var(--tt-warn); }
html.tw-tema .sp-open:not(.tw *){ opacity:1; color:var(--tt-ink3); }                                                            /* .tw-ia-x (1043) */
/* 8.6 tarjeta de contrato arrastrable = .tw-ia-card (1101): surface2/hairline, radio 9, con la barra de
   3 px del estado a la izquierda (.tw-g-ahorro, 450). Es un MudPaper: hay que pisar el radio de base. */
html.tw-tema .mud-paper.sp-card:not(.tw *){
  border:1px solid var(--tt-line); border-left:3px solid var(--tt-line); border-radius:9px !important;
  padding:7px 28px 7px 9px; box-shadow:none !important; background:var(--tt-surface);
}
html.tw-tema .mud-paper.sp-card.sp-assigned:not(.tw *){ border-left-color:var(--tt-ok);   background:rgba(21,127,95,0.08); }
html.tw-tema .mud-paper.sp-card.sp-pool:not(.tw *)    { border-left-color:var(--tt-warn); background:rgba(181,101,29,0.10); }
html.tw-tema .sp-card-id:not(.tw *){ font-family:var(--tt-sans); font-size:12.5px; font-weight:700; color:var(--tt-ink); }      /* .tw-e-dest (689) */
html.tw-tema .sp-card-kg:not(.tw *){ font-family:var(--tt-mono); font-size:11px; font-weight:600; }                             /* .tw-num (189) */
html.tw-tema .sp-card-sub:not(.tw *){ font-family:var(--tt-sans); font-size:11.5px; color:var(--tt-ink2); }                     /* .tw-e-prod (688) */
html.tw-tema .sp-card-sub2:not(.tw *){ font-family:var(--tt-sans); font-size:11px; color:var(--tt-ink2); }   /* ink2, no ink3: son DATOS (país, cajas, conservación), no rótulos; ink3 a 11 px Hanken da 2,6:1 */
html.tw-tema .sp-card-ok:not(.tw *){
  font-family:var(--tt-mono); font-size:9px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--tt-ok);
}                                                                                                                                /* .tw-e-grp (686) en ok */
html.tw-tema .sp-card-ok .mud-icon-root:not(.tw *){ font-size:11px !important; }
/* 8.7 destino válido del arrastre: el punteado pasa a accent (= el color de «cumplido» del tower) */
html.tw-tema .sp-candrop:not(.tw *){ outline:2px dashed var(--tt-accent); background:rgba(21,179,199,0.07); }                   /* .tw-ia-current (1097) */
/* 8.8 el número de contrato/traslado va en mono: JetBrains Mono 700 NO está cargada (guía §0) y Chromium
   la sintetiza (se ve emborronada). El tower usa 600 en su lugar (.tw-e-id, 685). */
html.tw-tema .sp-num:not(.tw *){ font-weight:600; white-space:nowrap; }   /* el n° no se parte: la tarjeta mide 230 px */

/* ============================================================================================
   G. REGLAS GENERALES (piezas de TODO el sistema que se vieron rotas en estas páginas; candidatas a
   subir a base.css tal cual — acá van acotadas solo por :not(.tw *), como el bloque G de contratos.css).
   ============================================================================================ */
/* G1 — MudBlazor le pone .mud-typography-subtitle1 al <div class="mud-input">, y base.css dejó esa
   tipografía en 700 (= .tw-f-name, 316). Resultado: TODO valor tecleado o elegido sale en negrita, y en
   los numéricos/fechas (mono) sale en mono 700, que no existe y Chromium sintetiza. En el tower el valor
   de un campo es peso normal (.tw-e-search, 655). base.css fija familia, tamaño y color: falta el peso. */
html.tw-tema .mud-input:not(.tw *){ font-weight:400; }
html.tw-tema .mud-input-root:not(.tw *){ font-weight:inherit; }
/* G2 SUBIDO A base.css §8 el 23-09: el pulgar real del interruptor (.mud-switch-thumb-medium/-small) es transversal
   y arreglaba todo el sistema desde una hoja de área. Vive ahora junto a la pista. */
/* G3 — rótulo de segmento del tracker (app.css:722, 11 px/700): base le puso mono 9,5 pero no el peso,
   y mono 700 no existe (§0 de la guía). Es el mismo tracker del contrato y del traslado. */
html.tw-tema .ct-trkseg-label:not(.tw *){ font-weight:400; }
/* G4 — el fondo surface2 que base.css le pone al <fieldset class="mud-input-outlined-border"> de numéricos,
   pickers y textarea TAPA el texto: ese fieldset es un overlay absoluto que va DESPUÉS del <input> en el DOM.
   Se veían vacíos el costo del tramo terrestre, el TC, la temperatura y las fechas de /operaciones/variacion.
   Basta con subir el input (y sus adornos y flechas) por encima del overlay; sin fondo no cambia nada.
   MISMA regla que contratos.css §G0 (idéntica a propósito: el área no puede depender del orden de hojas);
   las dos sobran el día que suba a base.css junto a las reglas de .tw-e-date / .tw-ia-textarea. */
html.tw-tema .mud-input.mud-input-outlined > .mud-input-slot:not(.tw *),
html.tw-tema .mud-input.mud-input-outlined > .mud-input-adornment:not(.tw *),
html.tw-tema .mud-input.mud-input-outlined > .mud-input-numeric-spin:not(.tw *){ position:relative; z-index:1; }
/* G5 — las flechas del MudNumericField son botones .mud-button-text (no icon-button): MudBlazor les da
   `padding:2px 0` con `.mud-input-numeric-spin button` (0,1,1) y base.css las pisa con `.mud-button-text
   {padding:5px 9px}` (0,2,1). El campo numérico crece 8 px y queda desalineado con el select de al lado
   (medido: 48 px contra 40 px en «Costo del tramo terrestre» vs «Moneda»). Se les devuelve su padding. */
html.tw-tema .mud-input-numeric-spin .mud-button-root:not(.tw *){ padding:2px 0; min-width:0; }
html.tw-tema .mud-input-numeric-spin .mud-icon-root:not(.tw *){ font-size:16px; }
/* G6 — «negrita» dentro de una pieza mono. JetBrains Mono 700 NO está cargada a propósito (App.razor:19-30
   y guía §0: pedirla rompería la paridad de Cierre/Forwarders/Gastos), así que un <strong>/<b> dentro de un
   texto mono deja a Chromium sintetizando la negrita: se ve emborronada y más ancha. El tower resuelve lo
   mismo pidiendo 600 (.tw-e-id 685, .tw-e-th 672, .tw-c-td 290 en negrita). Aparece en la nota de Portería
   («Al marcar Salida…»), en «Orden de carga — el #1…», en el n° de traslado de la lista y en Seguimiento.
   Candidata clara a subir a base.css: no es de traslados, es de todo el sistema. */
html.tw-tema .ct-mono strong:not(.tw *),
html.tw-tema .ct-mono b:not(.tw *),
html.tw-tema strong.ct-mono:not(.tw *),
html.tw-tema b.ct-mono:not(.tw *),
html.tw-tema .mud-typography-caption strong:not(.tw *),
html.tw-tema .mud-typography-caption b:not(.tw *){ font-weight:600; }