/* =====================================================================================================
   tema-tower/contratos.css — «look del tower» (#478) para el ÁREA CONTRATOS: `/contracts` (lista, filtros,
   paginación) y `/contracts/{id}` con todas sus pestañas (Resumen, Comercial, Logística, Transporte, Booking naviero,
   Contenedor, Aduana, Despacho, Portería, Descarga, Seguimiento, Documentos, Gestión Aérea, Costos, Reclamos) y sus
   diálogos (línea de producto, gasto local, reclamo, tramo aéreo). Se carga DESPUÉS de base.css (App.razor, solo dev).

   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, mb-N, mt-N y flex-grow-1: todas !important) o app.css/base.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 a estas páginas sin tocar .razor):
     · LISTA  = .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="contratos.lista.encabezado"])
                (el DevSectionTag de Contracts.razor:19 es hijo directo del wrapper de página).
     · DETALLE (cáscara: cabecera, tracker, pestañas) = .ct-page-wrapper:has(> .d-flex .ct-tipo-icon)
                (.ct-tipo-icon solo existe en ContractDetail.razor:52/58, los iconos de conservación/modo junto al título).
     · Paneles del detalle: por su propio DevSectionTag (contrato.resumen.*, contrato.comercial.*, contrato.costos.*,
                contrato.reclamos.panel, contrato.logistica.*, contrato.booking.*, contrato.documentos.*,
                contrato.historial.cambios) o por los data-testid de sus tablas/celdas. Los paneles COMPARTIDOS con
                traslados (Transporte, Contenedor, Aduana, Seguimiento, Portería, Despacho, Asignación) no se tocan acá:
                son de traslados.css; solo se verifica que no se rompan dentro del contrato.
     · Diálogos: por sus anclas dialogo.agregar_producto.* / dialogo.gasto_local.* / dialogo.reclamo.* /
                dialogo.tramo_aereo.* (viven bajo <body>, sin guard).
   Las pocas reglas GENERALES (piezas compartidas por todo el sistema: PageHeader con TitleExtra, papel del tracker,
   chip dentro de una pestaña activa, iconos en celda, selector de columnas) van al final, en el bloque «G», marcadas
   como candidatas a subir a base.css.

   Variables --stint-* con estilo INLINE en el .razor (border del papel del tracker, color de iconos, fondo de la fila
   de totales): no se pueden pisar sin !important, así que se REDEFINE la variable --stint-* en ese mismo elemento (o
   un ancestro acotado) con el token equivalente del tower. Nunca de forma global: base.css decidió no redefinirlas.
   ===================================================================================================== */

/* ============================================================================================
   1. LISTA /contracts — la lista del tower es UNA sola tarjeta (.tw-e-card, 622) con barra de herramientas
   (.tw-e-tbar, 654), cabecera surface2 (.tw-e-thead, 671), filas de una línea (.tw-e-row, 678) y paginación al
   pie (.tw-e-pag, 747). Hoy es paper pa-4 + barra + grilla con marco propio: se funden.
   ============================================================================================ */
/* 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="contratos.lista.encabezado"]) > .mud-paper:not(.tw *){
  padding:0 !important; border-radius:10px !important; overflow:hidden;
}
/* 1.2 barra de herramientas (MudStack con la búsqueda, «Limpiar filtros» y «Columnas») = .tw-e-tbar (654) */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="contratos.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, flex 1 1 190 y tope de ancho (el tower no la estira) */
html.tw-tema .mud-input-control:has([data-testid="contratos.lista.buscar"]):not(.tw *){ flex-basis:190px; max-width:420px; }
html.tw-tema .mud-input-control:has([data-testid="contratos.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="contratos.lista.buscar"]) .mud-input-root:not(.tw *){ padding-top:5px; padding-bottom:5px; }
html.tw-tema .mud-input-control:has([data-testid="contratos.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: búsqueda a la izquierda, «limpiar» y controles a la derecha) */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="contratos.lista.encabezado"]) > .mud-paper > .d-flex > .mud-input-control + *:not(.tw *){ margin-left:auto; }
/* 1.4 «Limpiar filtros» / «Columnas» / «Restablecer» = .tw-e-clear (534): mono 10 0,12em mayúsculas, 5×9, radio 6, hairline, ink2 */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="contratos.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);
}
/* 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="contratos.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="contratos.lista.encabezado"]) .mud-table-container:not(.tw *){ border-radius:0 !important; }
/* 1.6 filas de UNA línea (= .tw-e-row 678 + .tw-e-prod/-dest 688-690: nowrap): la grilla ya se desplaza en horizontal
   (13 columnas), así que el quiebre en 3-4 líneas del cliente solo alargaba las filas */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="contratos.lista.encabezado"]) .mud-table-body .mud-table-cell:not(.tw *){
  white-space:nowrap; vertical-align:middle; --stint-muted:var(--tt-ink3);   /* iconos y subtítulo de país traen color:var(--stint-muted) inline */
}
/* 1.6.1 …salvo el NOMBRE largo del puerto/aeropuerto, que se CORTA con elipsis igual que en el tower (.tw-e-name 690,
   .tw-e-sub 692: nowrap + overflow hidden + text-overflow ellipsis). Sin esto, «GRU · SÃO PAULO/GUARULHOS–GOVERNOR
   ANDRÉ FRANCO MONTORO INTERNATIONAL» estiraba «País Destino» de 159 a 573 px y el corte horizontal de la lista subía
   de 805 a 1.199 px: casi un 50 % más de recorrido para llegar a las 5 columnas que quedan fuera de la vista. Cortar
   con elipsis y no quebrar mantiene además la fila en una línea (quebrar dejaba filas de 100 px junto a otras de 53).
   El ancla es el data-label que MudDataGrid escribe en cada <td> (= el Title de la columna). */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="contratos.lista.encabezado"]) .mud-table-body .mud-table-cell[data-label="País Destino"]:not(.tw *){ max-width:190px; overflow:hidden; text-overflow:ellipsis; }
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="contratos.lista.encabezado"]) .mud-table-body .mud-table-cell[data-label="País Destino"] > div:not(.tw *){ overflow:hidden; text-overflow:ellipsis; }
/* fechas y cantidades (CellClass="ct-mono") = .tw-e-date (532) / .tw-c-td (290): mono 11,5 400 (base los dejaba en 12,5 600 como ID) */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="contratos.lista.encabezado"]) .mud-table-body .mud-table-cell.ct-mono:not(.tw *){ font-size:11.5px; font-weight:400; letter-spacing:normal; }
/* el N° de contrato (primera columna por defecto) = .tw-e-id (685): mono 12,5 600 0,02em. Si el usuario reordena, la
   primera columna que sea mono toma el rol de identificador: se degrada sin romper nada */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="contratos.lista.encabezado"]) .mud-table-body .mud-table-cell.ct-mono:first-child:not(.tw *){ font-size:12.5px; font-weight:600; letter-spacing:0.02em; }
/* n° de traslado (enlace o texto) = .tw-e-id (685) en deep; base ya lo deja 12,5 600 */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="contratos.lista.encabezado"]) .mud-table-cell .mud-typography-body2.ct-mono:not(.tw *){ font-size:12.5px; }
/* subtítulo bajo el país (div inline .78rem) = .tw-e-sub (691): mono 9,5 0,08em mayúsculas ink3 */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="contratos.lista.encabezado"]) .mud-table-cell div[style*="font-size:.78rem"]:not(.tw *){ font-family:var(--tt-mono); font-size:9.5px !important; letter-spacing:0.08em; text-transform:uppercase; margin-top:2px; }
/* iconos de conservación/transporte en celda: chicos y apagados (§5.5 de la guía) */
html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="contratos.lista.encabezado"]) .mud-table-cell .mud-icon-root:not(.tw *){ font-size:14px; }
/* 1.7 cabecera con filtro (.ct-head-filter): título + embudo pegado; el embudo activo va en deep (Color.Primary, ya llega por variable) */
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); }
/* 1.8 leyendas de los tooltips de estado (.ct-legend, sin hoja hoy): título = .tw-e-side-lbl (555), texto Hanken 12 */
html.tw-tema .ct-legend{ font-family:var(--tt-sans); font-size:12px; line-height:1.45; letter-spacing:normal; text-align:left; display:flex; flex-direction:column; gap:2px; }
html.tw-tema .ct-legend-title{ font-family:var(--tt-mono); font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--tt-navInk2); margin-bottom:3px; }
html.tw-tema .ct-legend b{ font-weight:700; }

/* ============================================================================================
   2. DETALLE /contracts/{id} — cáscara: cabecera, papel del tracker y pestañas
   ============================================================================================ */
/* 2.1 iconos de conservación/modo junto al título (ContractDetail:52/58, color inline var(--stint-muted)) = apagados y chicos */
html.tw-tema .ct-tipo-icon:not(.tw *){ --stint-muted:var(--tt-ink3); font-size:16px; width:16px; height:16px; }
/* 2.2 chip de estado del encabezado (Size.Medium) = .tw-e-pill (609): 11 px, más legible que el tag de 9 px de las listas */
html.tw-tema .ct-page-wrapper:has(> .d-flex .ct-tipo-icon) > .d-flex .mud-chip.ct-badge.mud-chip-size-medium:not(.tw *){ font-size:11px !important; padding:3px 9px; border-radius:5px !important; }
/* 2.3 panel de pestañas: el contenido va al ras del tracker y de las pestañas (el tower no sangra el cuerpo);
   PanelClass="pa-4" es una utilidad !important de Mud */
html.tw-tema .ct-page-wrapper:has(> .d-flex .ct-tipo-icon) > .mud-tabs > .mud-tabs-panels:not(.tw *){ padding:14px 0 0 !important; border-radius:0; }

/* ============================================================================================
   3. RESUMEN — tarjetas de hechos (SectionCard: MudCard con DevSectionTag contrato.resumen.* en la cabecera y una
   MudSimpleTable de filas <strong>clave</strong> | valor). El MISMO patrón lo usa la tarjeta «Traslado N» de la
   pestaña Logística (paper con ancla contrato.logistica.traslado + tabla), así que el bloque cubre ambos con :is().
   En el tower el par clave/valor es .tw-e-hecho-k (728, mono 9,5 0,13em mayúsculas ink3) + .tw-e-hecho-v (729,
   13 px 600). La tabla interior pierde su marco: es una lista de hechos dentro de un panel, no una tabla.
   ============================================================================================ */
html.tw-tema :is(.mud-card:has(> .mud-card-header [data-testid^="contrato.resumen."]) > .mud-card-content, .mud-paper:has(> .ct-devtag-anchor[data-testid="contrato.logistica.traslado"])) > .mud-simple-table:not(.tw *){ border:0; border-radius:0 !important; background:transparent; }
html.tw-tema :is(.mud-card:has(> .mud-card-header [data-testid^="contrato.resumen."]) > .mud-card-content, .mud-paper:has(> .ct-devtag-anchor[data-testid="contrato.logistica.traslado"])) > .mud-simple-table > .mud-table-container > table > tbody > tr > td:not(.tw *){ padding:7px 0; vertical-align:middle; }
html.tw-tema :is(.mud-card:has(> .mud-card-header [data-testid^="contrato.resumen."]) > .mud-card-content, .mud-paper:has(> .ct-devtag-anchor[data-testid="contrato.logistica.traslado"])) > .mud-simple-table > .mud-table-container > table > tbody > tr:last-child > td:not(.tw *){ border-bottom:0; }
/* clave = .tw-e-hecho-k (728). En la tarjeta de Inspección las claves van en las columnas 1 y 3: se marcan por el <strong> */
html.tw-tema :is(.mud-card:has(> .mud-card-header [data-testid^="contrato.resumen."]) > .mud-card-content, .mud-paper:has(> .ct-devtag-anchor[data-testid="contrato.logistica.traslado"])) > .mud-simple-table > .mud-table-container > table > tbody > tr > td:not([colspan]):has(> strong:only-child):not(.tw *){
  width:1%; white-space:nowrap; padding-right:14px;
}
html.tw-tema :is(.mud-card:has(> .mud-card-header [data-testid^="contrato.resumen."]) > .mud-card-content, .mud-paper:has(> .ct-devtag-anchor[data-testid="contrato.logistica.traslado"])) > .mud-simple-table > .mud-table-container > table > tbody > tr > td > strong: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);
}
/* valor = .tw-e-hecho-v (729): 12,5 600 ink; el dato mono (fechas, N°, kg) = .tw-e-id (685) chico */
html.tw-tema :is(.mud-card:has(> .mud-card-header [data-testid^="contrato.resumen."]) > .mud-card-content, .mud-paper:has(> .ct-devtag-anchor[data-testid="contrato.logistica.traslado"])) > .mud-simple-table > .mud-table-container > table > tbody > tr > td:not([colspan]):not(:has(> strong:only-child)):not(.tw *){ font-weight:600; color:var(--tt-ink); }
html.tw-tema :is(.mud-card:has(> .mud-card-header [data-testid^="contrato.resumen."]) > .mud-card-content, .mud-paper:has(> .ct-devtag-anchor[data-testid="contrato.logistica.traslado"])) > .mud-simple-table > .mud-table-container > table > tbody > tr > td > .ct-mono:not(.tw *){ font-size:11.5px; font-weight:600; letter-spacing:0.02em; }
html.tw-tema :is(.mud-card:has(> .mud-card-header [data-testid^="contrato.resumen."]) > .mud-card-content, .mud-paper:has(> .ct-devtag-anchor[data-testid="contrato.logistica.traslado"])) > .mud-simple-table > .mud-table-container > table > tbody > tr > td .mud-icon-root:not(.tw *){ font-size:14px; --stint-muted:var(--tt-ink3); }
/* la nota en una fila entera (caption / body2 secundario) sigue siendo nota: Hanken 12 ink2 (= .tw-e-prod, 688) */
html.tw-tema :is(.mud-card:has(> .mud-card-header [data-testid^="contrato.resumen."]) > .mud-card-content, .mud-paper:has(> .ct-devtag-anchor[data-testid="contrato.logistica.traslado"])) > .mud-simple-table > .mud-table-container > table > tbody > tr > td[colspan] .mud-typography-caption:not(.tw *){ font-family:var(--tt-sans); font-size:12px; color:var(--tt-ink2); }
/* 3.1 tabla anidada de productos (contrato.resumen.productos.tabla) dentro de la fila «Productos (n)»: conserva su
   marco (= .tw-e-card, base) con celdas compactas. Las 6 columnas no entran en media pantalla: los datos cortos van
   en una línea (= .tw-num 189) y SOLO el nombre del producto y la bodega pueden quebrar (= .tw-e-name 690, que en el
   tower también corta), así la última columna no queda cortada contra el borde de la tarjeta (revisión 23-09). */
html.tw-tema [data-testid="contrato.resumen.productos.tabla"]:not(.tw *){ margin-top:8px; }
html.tw-tema .mud-simple-table[data-testid="contrato.resumen.productos.tabla"] table * tr > td:not(.tw *), html.tw-tema .mud-simple-table[data-testid="contrato.resumen.productos.tabla"] table * tr th:not(.tw *){ padding:6px 8px; white-space:nowrap; }
html.tw-tema .mud-simple-table[data-testid="contrato.resumen.productos.tabla"] table * tr > td:is(:first-child, :nth-child(4)):not(.tw *),
html.tw-tema .mud-simple-table[data-testid="contrato.resumen.productos.tabla"] table * tr th:is(:first-child, :nth-child(4)):not(.tw *){ white-space:normal; }
html.tw-tema .mud-simple-table[data-testid="contrato.resumen.productos.tabla"] table * tr > td:not(.tw *){ font-weight:400; }
html.tw-tema .mud-simple-table[data-testid="contrato.resumen.productos.tabla"] table * tr > td.ct-mono:not(.tw *){ font-size:11px; }   /* .tw-num (189) */
html.tw-tema [data-testid="contrato.resumen.productos.tabla"] .mud-typography-caption:not(.tw *){ font-family:var(--tt-mono); font-size:9.5px; color:var(--tt-ink3); }
/* 3.2 tarjeta Gestión Aérea del Resumen (contrato.resumen.gestion_aerea): grilla de caption+valor = .tw-e-hechos (726-729) */
html.tw-tema .mud-card:has(> .mud-card-header [data-testid="contrato.resumen.gestion_aerea"]) .mud-grid-item > .mud-typography-caption:not(.tw *){
  display:block; font-family:var(--tt-mono); font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--tt-ink3) !important; margin-bottom:2px;
}
html.tw-tema .mud-card:has(> .mud-card-header [data-testid="contrato.resumen.gestion_aerea"]) .mud-grid-item > .mud-typography-body1:not(.tw *){ font-size:13px; font-weight:600; line-height:1.3; }
html.tw-tema .mud-card:has(> .mud-card-header [data-testid="contrato.resumen.gestion_aerea"]) .mud-grid-item > .mud-typography-body1.ct-mono:not(.tw *){ font-size:12px; letter-spacing:0.02em; }
html.tw-tema .mud-card:has(> .mud-card-header [data-testid="contrato.resumen.gestion_aerea"]) .mud-card-header .mud-chip:not(.tw *){ margin-left:4px; }
/* 3.3 secciones «Costos» y «Reclamos» solo-vista del Resumen (contrato.resumen.costos / .reclamos): título de sección
   = .tw-h14 (147) con el icono apagado, como cabecera de panel sin caja */
html.tw-tema .ct-devtag-anchor:is([data-testid="contrato.resumen.costos"],[data-testid="contrato.resumen.reclamos"]) + .d-flex:not(.tw *){ gap:8px; margin-bottom:12px !important; }
html.tw-tema .ct-devtag-anchor:is([data-testid="contrato.resumen.costos"],[data-testid="contrato.resumen.reclamos"]) + .d-flex .mud-icon-root:not(.tw *){ font-size:15px; color:var(--tt-ink3) !important; }

/* ============================================================================================
   4. COMERCIAL (ContractForm embebido): tarjetas por sección (base) + tabla de productos
   ============================================================================================ */
/* fila «Total» (inline background:var(--stint-base) + font-weight:600) = .tw-c-tabla-tot (289): surface2, borde superior line, 9×14 */
html.tw-tema .mud-simple-table tr:has(> [data-testid="contrato.comercial.productos.total_monto"]):not(.tw *){ --stint-base:var(--tt-surface2); }
html.tw-tema .mud-simple-table tr:has(> [data-testid="contrato.comercial.productos.total_monto"]) > td:not(.tw *){ padding:9px 14px; border-top:1px solid var(--tt-line); border-bottom:0; font-weight:600; }
/* columnas numéricas (style="text-align:right" en el .razor) = .tw-num (189): mono 11, derecha, sin quiebre */
html.tw-tema .mud-simple-table:has([data-testid^="contrato.comercial.productos.col_"]) td[style*="text-align:right"]:not(.tw *){ font-family:var(--tt-mono); font-size:11px; white-space:nowrap; }
html.tw-tema .mud-simple-table:has([data-testid^="contrato.comercial.productos.col_"]) td:first-child:not(.tw *){ font-weight:600; }   /* nombre del producto = .tw-e-name (690) */
/* botones de edición/borrado por fila: chicos y pegados (el tower no lleva iconos en celda; si quedan, 16 px) */
html.tw-tema .mud-simple-table:has([data-testid^="contrato.comercial.productos.col_"]) .mud-icon-button:not(.tw *){ padding:3px; }

/* ============================================================================================
   5. COSTOS, GASTOS LOCALES, RECLAMOS, LOGÍSTICA y BOOKING — «panel con cabecera» del tower:
   .tw-panel (173) + .tw-panel-head (176: 11×14, hairline line2 abajo) + título .tw-h14 (147). Los papers son
   Outlined pa-3 / pa-4 con un DevSectionTag como PRIMER hijo y el título (MudStack con icono + subtitle1, o un
   subtitle1 con el icono adentro) inmediatamente después: esa pareja «ancla + título» ES la cabecera. Se le dan
   márgenes negativos para llegar al borde del papel (pa-3 = 12 px, pa-4 = 16 px; ambos !important en Mud).
   ============================================================================================ */
/* título del panel = .tw-h14 (147); el icono se apaga y achica (§5.5) */
html.tw-tema .mud-paper.mud-paper-outlined > .ct-devtag-anchor:is(
    [data-testid="contrato.costos.flete"],[data-testid="contrato.costos.tramo_terrestre"],[data-testid="contrato.costos.gastos_locales"],
    [data-testid^="contrato.logistica."],[data-testid="contrato.booking.booking"]) + :is(.d-flex, .mud-typography-subtitle1):not(.tw *){
  display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--tt-line2);
  font-family:var(--tt-display); font-weight:800; font-size:14px; line-height:normal; color:var(--tt-ink);
}
html.tw-tema .mud-paper.mud-paper-outlined.pa-3 > .ct-devtag-anchor:is(
    [data-testid="contrato.costos.flete"],[data-testid="contrato.costos.tramo_terrestre"],[data-testid="contrato.costos.gastos_locales"]) + :is(.d-flex, .mud-typography-subtitle1):not(.tw *){ margin:-12px -12px 12px !important; }
html.tw-tema .mud-paper.mud-paper-outlined.pa-4 > .ct-devtag-anchor:is(
    [data-testid^="contrato.logistica."],[data-testid="contrato.booking.booking"]) + :is(.d-flex, .mud-typography-subtitle1):not(.tw *){ margin:-16px -16px 14px !important; }
html.tw-tema .mud-paper.mud-paper-outlined > .ct-devtag-anchor:is(
    [data-testid="contrato.costos.flete"],[data-testid="contrato.costos.tramo_terrestre"],[data-testid="contrato.costos.gastos_locales"],
    [data-testid^="contrato.logistica."],[data-testid="contrato.booking.booking"]) + :is(.d-flex, .mud-typography-subtitle1) .mud-typography-subtitle1:not(.tw *){
  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:is(
    [data-testid="contrato.costos.flete"],[data-testid="contrato.costos.tramo_terrestre"],[data-testid="contrato.costos.gastos_locales"],
    [data-testid^="contrato.logistica."],[data-testid="contrato.booking.booking"]) + :is(.d-flex, .mud-typography-subtitle1) .mud-icon-root:not(.tw *){
  font-size:15px; color:var(--tt-ink3) !important; vertical-align:-3px; margin-right:0 !important;
}
/* la cabecera con acción a la derecha (Gastos locales «Agregar gasto», Tramo terrestre «Ir a Transporte», Traslado «Ver traslado») */
html.tw-tema .mud-paper.mud-paper-outlined > .ct-devtag-anchor:is(
    [data-testid="contrato.costos.tramo_terrestre"],[data-testid="contrato.costos.gastos_locales"],[data-testid="contrato.logistica.traslado"]) + .d-flex.justify-space-between:not(.tw *){ padding:8px 14px 8px 14px; }
/* 5.1 flete: la alerta marítima y la nota van dentro del cuerpo; el pie con «Guardar flete y terminal» = .tw-p-card-foot (961) */
html.tw-tema .mud-paper.mud-paper-outlined:has(> .ct-devtag-anchor[data-testid="contrato.costos.flete"]) > .d-flex.justify-end:not(.tw *){ margin:12px -12px -12px !important; padding:10px 13px; border-top:1px solid var(--tt-line2); }
/* 5.2 gastos locales: la tabla va al ras del papel (= .tw-panel--ov 175: el panel recorta, la tabla no lleva marco propio) */
html.tw-tema .mud-paper.mud-paper-outlined:has(> .ct-devtag-anchor[data-testid="contrato.costos.gastos_locales"]) > .mud-simple-table:not(.tw *){ margin:0 -12px; width:auto; border:0; border-radius:0 !important; border-top:1px solid var(--tt-line2); }
html.tw-tema .mud-paper.mud-paper-outlined:has(> .ct-devtag-anchor[data-testid="contrato.costos.gastos_locales"]) > .mud-typography-body2:not(.tw *){ padding:4px 2px 2px; }
/* totales = pie del panel .tw-c-tabla-tot (289: surface2, borde superior line) con cuatro KPI = .tw-kpi-label (179) +
   .tw-c-kpi-value (222, Archivo 800 22) + .tw-kpi-note-h (180). El papel anidado deja de ser «tile». */
html.tw-tema .mud-paper[data-testid="contrato.costos.gastos_locales.totales"]:not(.tw *){
  margin:0 -12px -12px !important; padding:12px 14px 13px !important; background:var(--tt-surface2) !important; border:0 !important; border-top:1px solid var(--tt-line) !important; border-radius:0 0 12px 12px !important;
}
html.tw-tema .mud-paper[data-testid="contrato.costos.gastos_locales.totales"] .mud-grid-item:not(.tw *){ display:flex; flex-direction:column; gap:3px; }
html.tw-tema .mud-paper[data-testid="contrato.costos.gastos_locales.totales"] .mud-grid-item > .mud-typography-caption:first-child:not(.tw *){ font-family:var(--tt-mono); font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--tt-ink3) !important; }
html.tw-tema .mud-paper[data-testid="contrato.costos.gastos_locales.totales"] .mud-grid-item > .mud-typography-body1.ct-mono:not(.tw *){ font-family:var(--tt-display); font-weight:800; font-size:22px; letter-spacing:-0.02em; line-height:1.05; color:var(--tt-ink); }
html.tw-tema .mud-paper[data-testid="contrato.costos.gastos_locales.totales"] .mud-grid-item > .mud-typography-body1.ct-mono strong:not(.tw *){ font-weight:inherit; }
/* la nota bajo la cifra es una frase, no un rótulo: va en ink2 (5,5:1) y no en ink3 (2,46:1 sobre surface2). El
   tamaño y la familia quedan como .tw-kpi-note-h (180); el color, como .tw-e-pag-info (748), que es la otra nota del tower. */
html.tw-tema .mud-paper[data-testid="contrato.costos.gastos_locales.totales"] .mud-grid-item > .mud-typography-caption:last-child:not(.tw *){ font-family:var(--tt-sans); font-size:11.5px; letter-spacing:normal; text-transform:none; color:var(--tt-ink2) !important; }
/* 5.3 tramo terrestre: campos deshabilitados + nota; nada más que la cabecera (arriba) */
/* 5.4 reclamos (sin papel: van sobre el fondo, como las tarjetas de Embarques): título = .tw-h14 y el «n sin cerrar» como pill (base) */
html.tw-tema .ct-devtag-anchor[data-testid="contrato.reclamos.panel"] ~ .d-flex .mud-typography-subtitle1:not(.tw *){ font-family:var(--tt-display); font-weight:800 !important; font-size:14px; color:var(--tt-ink); }
html.tw-tema .ct-devtag-anchor[data-testid="contrato.reclamos.panel"] ~ .d-flex > .d-flex > .mud-icon-root:not(.tw *){ font-size:15px; color:var(--tt-ink3) !important; }
html.tw-tema .ct-devtag-anchor[data-testid="contrato.reclamos.panel"] ~ .mud-typography-caption:not(.tw *){ padding:8px 2px 0; font-size:10.5px; color:var(--tt-ink2); }   /* «Total reclamado» = .tw-e-pag-info (748) */
/* 5.5 tablas de gastos, reclamos y tramos aéreos: importes = .tw-num (189) mono 11; fechas/facturas = .tw-e-date (532) mono 11,5; notas en <small> Hanken 12 ink2 (= .tw-e-prod 688) */
html.tw-tema .mud-simple-table:is([data-testid="contrato.costos.gastos_locales.tabla"],[data-testid="contrato.reclamos.tabla"]) table * tr > td.ct-mono:not(.tw *){ font-size:11.5px; white-space:nowrap; }
html.tw-tema .mud-simple-table:is([data-testid="contrato.costos.gastos_locales.tabla"],[data-testid="contrato.reclamos.tabla"]) table * tr > td.ct-mono[style*="text-align:right"]:not(.tw *){ font-size:11px; }
html.tw-tema .mud-simple-table:is([data-testid="contrato.costos.gastos_locales.tabla"],[data-testid="contrato.reclamos.tabla"]) table * tr > td:first-child:not(.tw *){ font-weight:600; white-space:nowrap; }
html.tw-tema .mud-simple-table:is([data-testid="contrato.costos.gastos_locales.tabla"],[data-testid="contrato.reclamos.tabla"]) table * tr > td small:not(.tw *){ font-size:12px; color:var(--tt-ink2); }
html.tw-tema .mud-simple-table:is([data-testid="contrato.costos.gastos_locales.tabla"],[data-testid="contrato.reclamos.tabla"]) table * tr > td small.ct-mono:not(.tw *){ font-size:11px; color:var(--tt-ink); }
html.tw-tema .mud-simple-table:is([data-testid="contrato.costos.gastos_locales.tabla"],[data-testid="contrato.reclamos.tabla"]) .mud-icon-button:not(.tw *){ padding:3px; }
html.tw-tema .mud-simple-table:is([data-testid="contrato.costos.gastos_locales.tabla"],[data-testid="contrato.reclamos.tabla"]) table * tr > td:last-child:not(.tw *){ white-space:nowrap; }
/* 5.6 booking: los rótulos de sección (caption con font-weight:700 inline tras cada DevSectionTag contrato.booking.*)
   = .tw-e-side-lbl (555): mono 9,5 mayúsculas ink3, en bloque con aire abajo. El tracking 0,04em viene inline y se respeta. */
html.tw-tema .ct-devtag-anchor[data-testid^="contrato.booking."] + .mud-typography-caption:not(.tw *),
/* «RUTA MARÍTIMA — TRAMOS (n)» no es hermano directo del ancla: va dentro del MudStack que comparte con el botón
   «Agregar parada» (TransferMaritimePanel:191-192) */
html.tw-tema .ct-devtag-anchor[data-testid^="contrato.booking."] + .d-flex > .mud-typography-caption:not(.tw *){ display:block; font-size:9.5px; color:var(--tt-ink3) !important; margin:2px 0 6px; font-weight:400 !important; }
/* el font-weight:700 viene en el style INLINE del .razor (TransferMaritimePanel:57 y ss.) y la cara 700 de JetBrains
   Mono no se carga (guía §0): Chromium la sintetiza y el rótulo se ve emborronado. Único modo de pisar un inline es
   !important; el tower usa 400 en este rótulo (.tw-e-side-lbl, 555). Misma solución que traslados.css:117-120. */

/* ============================================================================================
   6. GESTIÓN AÉREA (ContractAirPanel) — sin DevSectionTag propios (ver informe): solo lo acotable por sus data-testid
   y por .ct-awb-row (clase exclusiva del panel).
   ============================================================================================ */
/* tabla de tramos (contrato.gestion_aerea.tramos.col_atd en su cabecera): códigos IATA = .tw-e-id (685), horas = .tw-e-date (532) */
html.tw-tema .mud-simple-table:has([data-testid="contrato.gestion_aerea.tramos.col_atd"]) table * tr > td.ct-mono:not(.tw *){ font-size:11.5px; white-space:nowrap; }
html.tw-tema .mud-simple-table:has([data-testid="contrato.gestion_aerea.tramos.col_atd"]) table * tr > td.ct-mono strong:not(.tw *){ font-weight:600; font-size:12px; letter-spacing:0.02em; }
html.tw-tema .mud-simple-table:has([data-testid="contrato.gestion_aerea.tramos.col_atd"]) table * tr > td .mud-chip.ct-badge:not(.tw *){ min-width:0 !important; }
html.tw-tema .mud-simple-table:has([data-testid="contrato.gestion_aerea.tramos.col_atd"]) .mud-icon-button:not(.tw *){ padding:3px; }
/* fila AWB (input + botón «Guardar AWB» con height:40px inline, igual que la caja dense de Mud): solo se centra */
html.tw-tema .ct-awb-row:not(.tw *){ align-items:center; }

/* ============================================================================================
   7. DOCUMENTOS e HISTORIAL
   ============================================================================================ */
/* tarjetas por tipo de documento (contrato.documentos.tipos → MudStack de papers pa-3): nombre = .tw-f-name (316) 13/700 */
html.tw-tema .ct-devtag-anchor[data-testid="contrato.documentos.tipos"] + .d-flex .mud-paper > .d-flex .mud-typography-body1:not(.tw *){ font-size:13px; line-height:1.2; }
html.tw-tema .ct-devtag-anchor[data-testid="contrato.documentos.tipos"] + .d-flex .mud-paper > .d-flex > .d-flex > .mud-icon-root:not(.tw *){ font-size:18px; }
html.tw-tema .ct-devtag-anchor[data-testid="contrato.documentos.tipos"] + .d-flex .mud-paper .mud-chip:not(.tw *){ margin:2px 0; }
/* historial: celdas en <small> → Hanken 12 ink2 (= .tw-e-prod 688); fecha mono 11 */
html.tw-tema .ct-devtag-anchor[data-testid="contrato.historial.cambios"] ~ .mud-simple-table table * tr > td small:not(.tw *){ font-size:12px; color:var(--tt-ink2); }
html.tw-tema .ct-devtag-anchor[data-testid="contrato.historial.cambios"] ~ .mud-simple-table table * tr > td small.ct-mono:not(.tw *){ font-size:11px; color:var(--tt-ink); white-space:nowrap; }

/* ============================================================================================
   8. DIÁLOGOS (bajo <body>, sin guard): línea de producto, gasto local, reclamo, tramo aéreo. Base ya los deja como
   .tw-panel con cabecera y pie; acá solo los rótulos de sección (caption con font-weight:700 inline tras un
   DevSectionTag dialogo.*) = .tw-e-side-lbl (555) y el aire entre secciones.
   ============================================================================================ */
html.tw-tema .mud-dialog .ct-devtag-anchor[data-testid^="dialogo."] + .mud-typography-caption{ display:block; font-size:9.5px; color:var(--tt-ink3) !important; margin:4px 0 2px; font-weight:400 !important; }
/* el 400 !important: mismo caso que el booking (inline font-weight:700 en ContractProductDialog:93 y
   FlightLegDialog:86/119) y la cara mono 700 no existe. */
html.tw-tema .mud-dialog .mud-dialog-content > .ct-devtag-anchor + .mud-grid{ margin-top:0; }
/* logo de aerolínea en el diálogo de tramo: contenido, sin salto */
html.tw-tema .mud-dialog img[style*="object-fit:contain"]{ border-radius:4px; }

/* ============================================================================================
   G. REGLAS GENERALES (piezas compartidas por todo el sistema, verificadas acá; candidatas a subir a base.css)
   ============================================================================================ */
/* G0 SUBIDO A base.css §8 el 23-09: el z-index que evita que el overlay del borde tape el texto de numéricos y
   pickers es transversal (arreglaba todo el sistema desde una hoja de área). Vive ahora junto a .tw-e-date. */
/* G1 PageHeader con TitleExtra (ContractDetail y cualquier detalle con iconos junto al título): el h5 va dentro de un
   MudStack y el subtítulo queda hermano del stack, no del h5, así que la regla de base (§3) no lo alcanza → mismo
   .tw-c-resumen (217): Hanken 12,5 ink2 */
html.tw-tema .ct-page-wrapper > .d-flex .d-flex:has(> .mud-typography-h5) + .mud-typography-caption:not(.tw *){ font-family:var(--tt-sans); font-size:12.5px; line-height:1.5; margin-top:6px; display:block; letter-spacing:normal; }
/* G2 papel del tracker (ContractDetail:84 y TransferDetail): trae border:1px solid var(--stint-border) y radio inline →
   se redefine la variable en el propio papel (= .tw-panel 173, hairline line, radio 12). El relleno pa-4 se queda. */
html.tw-tema .mud-paper:has(> .ct-tracker):not(.tw *){ --stint-border:var(--tt-line); --stint-radius-lg:12px; }
/* G3 chip contador dentro de una pestaña (Historial n): sobre la pestaña activa (fondo ink) = .tw-e-fbtn-n (543): blanco al 65 % */
html.tw-tema .mud-tabs .mud-tab .mud-chip:not(.tw *){ padding:1px 6px; margin:0 0 0 6px; font-size:10.5px !important; opacity:0.75; }
html.tw-tema .mud-tabs .mud-tab.mud-tab-active .mud-chip:not(.tw *){ border-color:rgba(255,255,255,0.3); color:#FFFFFF; }
/* G5 ARREGLO de base.css §3/§14: dentro de una alerta RELLENA (burbuja oscura .tw-ia-body-user) el título MudText h6
   quedaba ink sobre nav (invisible: «¡ATENCIÓN! Este traslado NO es de hoy» en Portería, TransferGatehousePanel:67)
   porque base fija color:ink a todo .mud-typography-h6 del área de contenido. Toda tipografía dentro de la burbuja hereda. */
html.tw-tema .mud-alert:is(.mud-alert-filled-error,.mud-alert-filled-warning,.mud-alert-filled-info,.mud-alert-filled-success) .mud-typography:not(.tw *){ color:inherit; }
/* G4 selector de columnas de las listas (.ct-col-row, Contracts y Transfers; popover bajo <body>): hover surface2
   (= .tw-e-row:hover 679), grip ink3, fila destino con la marca coral que ya tenía */
html.tw-tema .ct-col-row{ --stint-base:var(--tt-surface2); --stint-mist:var(--tt-ink3); border-radius:6px; }
html.tw-tema .ct-col-row:hover{ background:var(--tt-surface2); }
html.tw-tema .ct-col-row .mud-checkbox > .mud-typography{ font-size:12.5px !important; }
html.tw-tema .ct-col-row--over{ background:rgba(255,107,91,0.08); }   /* .tw-c-tabla-tr.is-on (288) */
/* G6 CONTRASTE del rótulo de campo (regla GENERAL, candidata a subir a base.css §9). base deja `.mud-input-label` en
   ink3 —2,6:1 sobre blanco— y solo lo sube a ink2 cuando el campo tiene valor o foco (base.css:397-398). En un campo
   VACÍO y habilitado el rótulo es el único texto visible del control («N° de BL (Bill of Lading)», «Gate Out», «Corte
   documental (hora)», «Notas»…) y con ink3 no se lee. Pasa a ink2 (5,5:1, el mismo que ya usa al encogerse) y se deja
   ink3 solo donde el gris ES el feedback: control deshabilitado o de solo lectura (#416; base.css:410-411 lo mantiene). */
html.tw-tema .mud-input-label:not(.tw *){ color:var(--tt-ink2); }
html.tw-tema .mud-input-control:has(.mud-disabled) .mud-input-label:not(.tw *){ color:var(--tt-ink3); }
/* G7 CONTRASTE del texto de ayuda bajo el campo (misma familia; candidata a base.css §9). No es una nota decorativa:
   explica qué se escribe («Cuántos CLP vale 1 US$ el día de la factura», «Estándar ISO 6346 (ej: CSQU3054383)») y es
   texto normal de 11,5 px, o sea le corresponde 4,5:1. ink3 daba 2,6:1; ink2 da 5,5:1. El tamaño y la familia quedan
   como los dejó base (= .tw-e-kpi-note, 612). */
html.tw-tema .mud-input-helper-text:not(.tw *){ color:var(--tt-ink2); }
/* G8 mono 700 no existe (guía §0: la cara 700 de JetBrains Mono no se carga y no se puede agregar). app.css:722 deja
   `.ct-trkseg-label` en 700 y base solo le cambió familia, tamaño y color, así que los rótulos de segmento del tracker
   («DEPÓSITO», «PUERTO ORIGEN»…) se dibujan con una cara sintética. El tower usa 400 en ese rótulo (.tw-e-side-lbl, 555). */
html.tw-tema .ct-trkseg-label:not(.tw *){ font-weight:400; }
/* G9 <strong> dentro de una nota mono (caption): mismo problema; el tower marca el énfasis con 600 (.tw-e-id, 685).
   Se ve en la nota del tramo terrestre («Se captura en la pestaña Transporte…», ContractCostsPanel:173). */
html.tw-tema .mud-typography-caption strong:not(.tw *){ font-weight:600; }
/* G10 mismo caso que G9 pero fuera de una nota: <b>/<strong> con .ct-mono (el N° de booking dentro del aviso de
   Seguimiento, el kg total del camión…). <b> trae 700 del navegador y la cara mono 700 no existe: 600 (.tw-e-id, 685). */
html.tw-tema b.ct-mono:not(.tw *), html.tw-tema strong.ct-mono:not(.tw *){ font-weight:600; }
/* G11 los campos de fecha y hora (MudDatePicker/MudTimePicker) llevan la clase .mud-typography-subtitle1 en su input:
   base la define Hanken 700 (= .tw-f-name, 316) y además pinta los pickers en mono (= .tw-e-date, 532), así que el
   valor se dibujaba con una cara mono 700 sintética. El tower escribe la fecha en 400 (.tw-e-date, 532). */
html.tw-tema .mud-picker .mud-input:not(.tw *), html.tw-tema .mud-input-number-control .mud-input:not(.tw *){ font-weight:400; }
/* G12 CONTRASTE de las notas (candidata a subir a base.css §2, junto con G6 y G7). base deja toda `caption` en mono 10
   ink3 (= .tw-note10, 155), que es lo que hace el tower; pero en contratos muchas captions NO son rótulos sino frases
   con información («Marcado = la tarifa está informada sin IVA…», el nombre del aeropuerto, «Sin foto», «Sin marcar»,
   «referencia para los tramos») y ink3 da 2,6:1. El CONTEXTO permite ink3 solo en rótulos mono: estas pasan a ink2
   (5,5:1), que también es un color de nota del tower (.tw-e-pag-info, 748: mono 10,5 ink2). Se declara con :where()
   —0 de especificidad, igual que base— para que cualquier MudText Color="…" (.mud-error-text, .mud-warning-text…)
   siga ganando; y como contratos.css va después de base.css, el empate lo gana esta regla. Los rótulos mono en
   MAYÚSCULAS que sí son rótulos (booking, gestión aérea, totales, diálogos) quedan en ink3 por sus reglas de arriba. */
:where(html.tw-tema .ct-page-wrapper:has(> .ct-devtag-anchor[data-testid="contratos.lista.encabezado"]) .mud-typography-caption:not(.tw *)),
:where(html.tw-tema .ct-page-wrapper:has(> .d-flex .ct-tipo-icon) .mud-typography-caption:not(.tw *)),
:where(html.tw-tema .mud-dialog:has(.ct-devtag-anchor[data-testid^="dialogo."]) .mud-typography-caption),
:where(html.tw-tema .mud-popover:has(.ct-col-row) .mud-typography-caption){ color:var(--tt-ink2); }
/* G13 CONTRASTE de la fecha bajo cada hito del tracker (.ct-step-s; candidata a base.css §11 porque el StintTracker
   es el mismo en el traslado). No es un rótulo: es el dato de cuándo ocurrió el hito, y en ink3 daba 2,6:1. Pasa a
   ink2 (5,5:1) conservando mono 9,5 y el tracking que puso base (= .tw-e-pag-info, 748). */
html.tw-tema .ct-step-s:not(.tw *){ color:var(--tt-ink2); }
/* G14 RETIRADA el 25-09-2026. Dejaba la pista gris también cuando el interruptor estaba marcado, porque el pulgar
   heredaba el deep de MudBlazor y deep sobre deep era «una mancha sin forma». Eso ya no pasa: base.css §8 ahora fija
   el pulgar a mano (ink3 apagado, BLANCO encendido), así que la pista puede quedarse con el deep que le pone Mud y
   el par lee como corresponde. Además esta regla vivía acá pero NO estaba acotada a contratos: como las cinco hojas
   se enlazan juntas, mandaba sobre TODOS los interruptores del sistema y competía con base. El interruptor es uno
   solo y se define en un solo lugar: base.css §8. */