/* =====================================================================================================
   tema-tower/base.css — el «look del tower» sobre el resto de Stint (tarjeta #478, 22-09-2026). BASE.
   Ensayo SOLO en dev: App.razor enlaza esta hoja únicamente con Project:Environment = dev, y TODA regla cuelga de
   html.tw-tema (clase que pone el script del <head> desde localStorage['stint.tema']='tower' y que alterna el botón
   de la barra vía twTema, /js/tower.js). Sin la clase, el sistema se ve exactamente como hoy.

   Qué cubre esta hoja (lo transversal): tokens y variables de MudBlazor, tipografía, fondo, cáscara (barra, drawer,
   chips de la barra, wordmark), cabecera de página, paneles/tarjetas, botones, chips y pills, inputs/selects/
   autocomplete/pickers/casillas/interruptores, tablas (DataGrid, SimpleTable, Table), barras de progreso y tracker,
   badges, separadores, pestañas, alerts, diálogos, popovers/menús/listas, calendario del picker, tooltips, snackbar,
   overlay, barra de scroll del textarea y el tema oscuro (html.tw-tema.tw-dark). Las hojas de área (inicio, contratos,
   traslados, maestros) afinan lo propio de cada página encima de esto. La §18, al final, junta las reglas que TIENEN
   que ir últimas porque empatan en especificidad con un bloque anterior y ganan por orden: no moverlas hacia arriba.

   Fuente de los valores: wwwroot/tower.css (cada bloque cita la clase del tower que imita y su línea, p. ej.
   «= .tw-chip (126)»). Nada inventado: donde el tower no tiene pieza (diálogos, tooltips, snackbar) se arma con las
   suyas (panel .tw-panel + la única sombra del tower, .tw-p-card:hover 943, reservada a capas flotantes).

   CÓMO NO TOCA AL TOWER (.tw). Las páginas de Panorama son un <div class="tw tw-bleed"> dentro de .ct-page-wrapper y
   esta hoja va DESPUÉS de tower.css, así que en un empate de especificidad ganaría el tema. La exclusión es
   ESTRUCTURAL, no de especificidad (:where() no sirve de escudo, guía §5.6):
     1. Solo selectores de CLASE (.mud-*, .ct-*, .tt-*): nunca un elemento pelado (button, a, input, table…), que le
        ganaría al reset :where(.tw) button (0,0,1) de tower.css:56.
     2. Guard `:not(.tw *)` en el sujeto de toda regla que pueda matchear DENTRO del área de contenido (paneles,
        botones, chips, inputs, tablas, tipografía, iconos…): un elemento descendiente de .tw nunca cumple el guard.
        Hoy dentro de .tw no hay ni un .mud-* ni un .ct-* (sonda del 22-09: 0 en portada, Cierre y Analista), o sea que
        el guard es un seguro para el futuro, no un parche. Suma (0,1,0) parejo a todas las reglas: no altera el orden.
        Se omite solo donde es estructuralmente imposible estar dentro de .tw: la cáscara (.ct-appbar, .ct-drawer) y
        las capas que MudBlazor monta bajo <body> (.mud-popover, .mud-dialog*, .mud-snackbar, .mud-tooltip, .mud-overlay).
     3. Los tokens del tema se llaman --tt-* (no --bg/--ink/… que son los de .tw) y las --mud-* no las consume
        tower.css salvo --mud-appbar-height, que NO se toca (igual que --mud-drawer-width-left, el alto/borde de la
        barra, el padding de .mud-main-content y de .ct-page-wrapper: geometría de la que dependen las páginas tower).
     4. En los ancestros de .tw (html, body, .mud-main-content, .ct-page-wrapper) solo se declara `background`, que .tw
        repone; ninguna propiedad heredable que .tw no reponga (font-variant-numeric, text-rendering, cursor, etc.).
     5. Prueba: getComputedStyle de todos los .tw-* de /panorama/cierre-mensual con la clase puesta y quitada
        (tema/base/probar-base.js) → 0 diferencias.

   !important: solo en las MISMAS propiedades que app.css (o MudBlazor) ya marcaron con !important, siempre con
   html.tw-tema delante (más especificidad que app.css). Un !important sobre una propiedad que nadie marcó es un error.
   ===================================================================================================== */

/* ============================================================================================
   1. TOKENS (= .tw, tower.css:14-19) con prefijo --tt-: mismo valor, otro nombre, para no rozar a .tw
   ============================================================================================ */
html.tw-tema{
  --tt-bg:#EEF2F3; --tt-surface:#FFFFFF; --tt-surface2:#F7F9FA; --tt-ink:#0E2A3B; --tt-ink2:#52646E; --tt-ink3:#93A3AC;
  --tt-line:rgba(14,42,59,0.10); --tt-line2:rgba(14,42,59,0.06); --tt-bar:rgba(14,42,59,0.11);
  --tt-nav:#0E2A3B; --tt-navInk:#EDF3F5; --tt-navInk2:#8FA6B1;
  --tt-accent:#15B3C7; --tt-deep:#1C7293; --tt-ok:#157F5F; --tt-warn:#B5651D; --tt-crit:#C0402E; --tt-coral:#FF6B5B;
  --tt-deep-rgb:28,114,147; --tt-ink2-rgb:82,100,110;
  --tt-hover:rgba(14,42,59,0.06);                  /* = --tt-line2: el único hover del tower es fondo surface2/line2 (.tw-e-row:hover, 679) */
  --tt-sombra:0 10px 26px rgba(4,16,22,0.14);      /* la ÚNICA sombra del tower (.tw-p-card:hover, 943): solo capas flotantes */
  --tt-foco:2px solid rgba(21,179,199,0.45);       /* anillo de foco (.tw-ia textarea:focus, 999) */
  --tt-mono:'JetBrains Mono',monospace; --tt-sans:'Hanken Grotesk',sans-serif; --tt-display:'Archivo',sans-serif;

  /* ---- paleta MudBlazor: pisa el :root del MudThemeProvider (html.tw-tema 0,1,1 > :root 0,1,0), sin !important ---- */
  --mud-palette-primary:var(--tt-deep); --mud-palette-primary-rgb:var(--tt-deep-rgb); --mud-palette-primary-text:#FFFFFF;
  --mud-palette-primary-darken:var(--tt-deep); --mud-palette-primary-lighten:var(--tt-deep);   /* sin hover (tower.css:7) */
  --mud-palette-primary-hover:rgba(28,114,147,0.1);                                            /* .tw-ia-open.is-cur (1112) */
  --mud-palette-secondary:var(--tt-ink2); --mud-palette-secondary-rgb:var(--tt-ink2-rgb); --mud-palette-secondary-text:#FFFFFF;
  --mud-palette-secondary-darken:var(--tt-ink2); --mud-palette-secondary-lighten:var(--tt-ink2); --mud-palette-secondary-hover:var(--tt-hover);
  --mud-palette-tertiary:var(--tt-accent); --mud-palette-tertiary-rgb:21,179,199; --mud-palette-tertiary-text:#04222C;   /* .tw-r-seg-btn.is-on (807) */
  --mud-palette-tertiary-darken:var(--tt-accent); --mud-palette-tertiary-lighten:var(--tt-accent); --mud-palette-tertiary-hover:var(--tt-hover);
  --mud-palette-info:var(--tt-deep); --mud-palette-info-rgb:var(--tt-deep-rgb); --mud-palette-info-text:#FFFFFF;
  --mud-palette-info-darken:var(--tt-deep); --mud-palette-info-lighten:var(--tt-deep); --mud-palette-info-hover:var(--tt-hover);
  --mud-palette-success:var(--tt-ok); --mud-palette-success-rgb:21,127,95; --mud-palette-success-text:#FFFFFF;
  --mud-palette-success-darken:var(--tt-ok); --mud-palette-success-lighten:var(--tt-ok); --mud-palette-success-hover:var(--tt-hover);
  --mud-palette-warning:var(--tt-warn); --mud-palette-warning-rgb:181,101,29; --mud-palette-warning-text:#FFFFFF;
  --mud-palette-warning-darken:var(--tt-warn); --mud-palette-warning-lighten:var(--tt-warn); --mud-palette-warning-hover:var(--tt-hover);
  --mud-palette-error:var(--tt-crit); --mud-palette-error-rgb:192,64,46; --mud-palette-error-text:#FFFFFF;
  --mud-palette-error-darken:var(--tt-crit); --mud-palette-error-lighten:var(--tt-crit); --mud-palette-error-hover:var(--tt-hover);
  --mud-palette-dark:var(--tt-ink); --mud-palette-dark-rgb:14,42,59; --mud-palette-dark-text:#FFFFFF;
  --mud-palette-dark-darken:var(--tt-ink); --mud-palette-dark-lighten:var(--tt-ink); --mud-palette-dark-hover:var(--tt-hover);
  --mud-palette-background:var(--tt-bg); --mud-palette-background-gray:var(--tt-surface2); --mud-palette-surface:var(--tt-surface);
  --mud-palette-text-primary:var(--tt-ink); --mud-palette-text-secondary:var(--tt-ink2); --mud-palette-text-disabled:var(--tt-ink3);
  --mud-palette-action-default:var(--tt-ink2); --mud-palette-action-default-hover:var(--tt-hover);
  --mud-palette-action-disabled:var(--tt-ink3); --mud-palette-action-disabled-background:var(--tt-bar);   /* .tw-e-grp (686) */
  --mud-palette-divider:var(--tt-line2); --mud-palette-divider-light:var(--tt-line2);                       /* .tw-hr (161) */
  --mud-palette-lines-default:var(--tt-line); --mud-palette-lines-inputs:var(--tt-line);                    /* .tw-panel (173) / .tw-e-search (655) */
  --mud-palette-table-lines:var(--tt-line2); --mud-palette-table-hover:var(--tt-surface2); --mud-palette-table-striped:transparent;   /* .tw-e-tr (677) / .tw-e-row:hover (679) / .tw-r-row.is-alt (864) */
  --mud-palette-appbar-background:var(--tt-nav); --mud-palette-appbar-text:var(--tt-navInk);
  --mud-palette-drawer-background:var(--tt-surface); --mud-palette-drawer-text:var(--tt-ink2); --mud-palette-drawer-icon:var(--tt-ink3);   /* drawer claro = .tw-e-side (553), opción B de la guía */
  --mud-palette-skeleton:var(--tt-line2);
  /* overlay-dark, gray-*, white, black, border-opacity: se conservan (sin equivalente en el tower) */

  --mud-default-borderradius:6px;   /* radio más frecuente: .tw-chip, .tw-e-search, .tw-nav-back, .tw-e-pag-btn, .tw-ia-btn; paneles y diálogos fijan 10-14 aparte */
  --mud-ripple-opacity:0; --mud-ripple-opacity-secondary:0;   /* sin ripple ni transiciones (tower.css:7) */
  --mud-elevation-1:none; --mud-elevation-2:none; --mud-elevation-3:none; --mud-elevation-4:none; --mud-elevation-5:none;
  --mud-elevation-6:none; --mud-elevation-7:none; --mud-elevation-8:none; --mud-elevation-9:none; --mud-elevation-10:none;
  --mud-elevation-11:none; --mud-elevation-12:none; --mud-elevation-13:none; --mud-elevation-14:none; --mud-elevation-15:none;
  --mud-elevation-16:none; --mud-elevation-17:none; --mud-elevation-18:none; --mud-elevation-19:none; --mud-elevation-20:none;
  --mud-elevation-21:none; --mud-elevation-22:none; --mud-elevation-23:none; --mud-elevation-24:none; --mud-elevation-25:none;
  /* --mud-appbar-height, --mud-drawer-width-*, --mud-zindex-*: NO se tocan (tower.css los usa: 51, 206-211, 482) */

  /* ---- tipografía Mud (variables del MudThemeProvider) ---- */
  --mud-typography-default-family:var(--tt-sans); --mud-typography-default-size:13px; --mud-typography-default-weight:400;
  --mud-typography-default-lineheight:1.5; --mud-typography-default-letterspacing:normal; --mud-typography-default-text-transform:none;   /* .tw-ia-body-ai (1073) */
  --mud-typography-body1-family:var(--tt-sans); --mud-typography-body1-size:13.5px; --mud-typography-body1-weight:400;
  --mud-typography-body1-lineheight:1.5; --mud-typography-body1-letterspacing:normal;                                                     /* .tw-p-bajada (935) */
  --mud-typography-body2-family:var(--tt-sans); --mud-typography-body2-size:12.5px; --mud-typography-body2-weight:400;
  --mud-typography-body2-lineheight:1.5; --mud-typography-body2-letterspacing:normal;                                                     /* .tw-c-resumen (217) */
  --mud-typography-caption-family:var(--tt-mono); --mud-typography-caption-size:10px; --mud-typography-caption-weight:400;
  --mud-typography-caption-lineheight:1.5; --mud-typography-caption-letterspacing:normal; --mud-typography-caption-text-transform:none;  /* .tw-note10 (155) + lh de .tw-c-foot (291) */
  --mud-typography-subtitle1-family:var(--tt-sans); --mud-typography-subtitle1-size:13px; --mud-typography-subtitle1-weight:700;
  --mud-typography-subtitle1-lineheight:1.2; --mud-typography-subtitle1-letterspacing:normal;                                             /* .tw-f-name (316) */
  --mud-typography-subtitle2-family:var(--tt-sans); --mud-typography-subtitle2-size:12.5px; --mud-typography-subtitle2-weight:600;
  --mud-typography-subtitle2-lineheight:1.2; --mud-typography-subtitle2-letterspacing:normal;                                             /* .tw-ia-row-name (1040) */
  --mud-typography-overline-family:var(--tt-mono); --mud-typography-overline-size:9.5px; --mud-typography-overline-weight:400;
  --mud-typography-overline-lineheight:normal; --mud-typography-overline-letterspacing:0.13em; --mud-typography-overline-text-transform:uppercase;   /* .tw-kpi-label (179) */
  --mud-typography-button-family:var(--tt-mono); --mud-typography-button-size:10.5px; --mud-typography-button-weight:600;
  --mud-typography-button-lineheight:normal; --mud-typography-button-letterspacing:normal; --mud-typography-button-text-transform:none;  /* .tw-ia-save (1116): mono, sin mayúsculas */
  --mud-typography-h6-family:var(--tt-display); --mud-typography-h6-size:14px; --mud-typography-h6-weight:800;
  --mud-typography-h6-lineheight:normal; --mud-typography-h6-letterspacing:normal;                                                        /* .tw-h14 (147): título de panel */
  --mud-typography-h5-family:var(--tt-display); --mud-typography-h5-size:26px; --mud-typography-h5-weight:900;
  --mud-typography-h5-lineheight:1; --mud-typography-h5-letterspacing:-0.02em;                                                            /* .tw-c-titulo (216): título de página */
  --mud-typography-h4-family:var(--tt-display); --mud-typography-h4-size:34px; --mud-typography-h4-weight:900;
  --mud-typography-h4-lineheight:1; --mud-typography-h4-letterspacing:-0.025em;                                                           /* .tw-p-titulo (934) */
}

/* ============================================================================================
   2. FONDO Y TIPOGRAFÍA
   ============================================================================================ */
/* fondo de página = --bg (.tw, 46). app.css lo pone !important en .ct-main-content. Ancestros de .tw: solo background. */
html.tw-tema body{ background:var(--tt-bg); }
html.tw-tema .ct-main-content{ background:var(--tt-bg) !important; }

/* La nota mono es ink3 en el tower, pero MudText Color="…" agrega .mud-*-text (0,1,0): :where() deja que esas clases
   sigan ganando y el color del tema sea solo el valor por omisión. */
:where(html.tw-tema .mud-typography-caption:not(.tw *)){ color:var(--tt-ink3); }
/* Receta de encabezado (= .tw-c-title, tower.css:215-217): ceja mono + título + resumen. Clases para markup nuevo. */
html.tw-tema .tt-ceja:not(.tw *){ font-family:var(--tt-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--tt-ink3); }   /* .tw-eb-10-14 (153) */
html.tw-tema .tt-resumen:not(.tw *){ font-size:12.5px; color:var(--tt-ink2); text-wrap:pretty; max-width:720px; line-height:1.5; }               /* .tw-c-resumen (217) */
/* Clases de Stint que ya cumplen esos roles */
html.tw-tema .ct-kicker:not(.tw *){ font:400 9.5px/normal var(--tt-mono); letter-spacing:0.13em; text-transform:uppercase; color:var(--tt-ink3); }   /* .tw-kpi-label (179) */
html.tw-tema .ct-mono:not(.tw *){ font-family:var(--tt-mono); font-feature-settings:normal; letter-spacing:normal; }                        /* el tower no usa tnum ni tracking negativo */
html.tw-tema .ct-num:not(.tw *){ font-family:var(--tt-mono); font-size:11px; text-align:right; white-space:nowrap; font-variant-numeric:normal; }   /* .tw-num (189) */
html.tw-tema .ct-nota:not(.tw *){ font-family:var(--tt-mono); font-size:10px; color:var(--tt-ink3); line-height:1.5; }                       /* .tw-note10 (155) */
/* enlaces = :where(.tw) a (55): deep sin subrayado ni hover */
html.tw-tema .mud-link:not(.tw *){ color:var(--tt-deep); text-decoration:none; font-weight:600; }
html.tw-tema .mud-link:not(.tw *):hover{ text-decoration:none; }

/* ============================================================================================
   3. CABECERA DE PÁGINA (Components/Shared/PageHeader.razor, única para todo el sistema)
   El tower no tiene avatar con icono: título Archivo 900 26 px (.tw-c-titulo, 216) sobre un resumen 12,5 ink2
   (.tw-c-resumen, 217). El avatar se detecta por estructura: MudAvatar relleno seguido del <div> que trae el h5.
   ============================================================================================ */
html.tw-tema .ct-page-wrapper .mud-avatar.mud-avatar-filled-primary:has(+ div .mud-typography-h5):not(.tw *){ display:none; }   /* con TitleExtra el h5 va un nivel más abajo */
html.tw-tema .ct-page-wrapper .mud-typography-h5:not(.tw *){ color:var(--tt-ink); }
html.tw-tema .ct-page-wrapper .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; }   /* .tw-c-resumen (217) */
html.tw-tema .ct-page-wrapper .mud-typography-h6:not(.tw *){ color:var(--tt-ink); }

/* ============================================================================================
   4. CÁSCARA: barra superior (= .tw-nav, 87) y drawer claro (= .tw-e-side, 553)
   Alto (64 px + 1 px de borde), --mud-appbar-height y --mud-drawer-width-left NO cambian: las páginas tower los usan.
   ============================================================================================ */
html.tw-tema .ct-appbar{ background:var(--tt-nav) !important; color:var(--tt-navInk); backdrop-filter:none; }
html.tw-tema .ct-appbar .mud-toolbar{ gap:10px; padding:0 18px; }
html.tw-tema .ct-appbar .mud-icon-button{ color:var(--tt-navInk2); }
html.tw-tema .ct-appbar .mud-icon-button:hover{ color:var(--tt-navInk); background:transparent; }
html.tw-tema .ct-appbar .mud-icon-button .mud-icon-root{ font-size:18px; }
/* chip de empresa / contexto / «ver como» = .tw-nav-select (102-107): mono 10, borde y fondo blancos translúcidos, navInk2 */
html.tw-tema .ct-appbar .mud-chip.ct-user-chip{
  font-family:var(--tt-mono); font-size:10px !important; letter-spacing:0.06em; font-weight:400 !important; padding:5px 8px; height:auto;
  border-radius:6px !important; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.06) !important; color:var(--tt-navInk2) !important;
  text-transform:none; transition:none; box-shadow:none;
}
html.tw-tema .ct-appbar .mud-chip.ct-user-chip:hover{ background:rgba(255,255,255,0.06) !important; }   /* sin hover */
html.tw-tema .ct-appbar .mud-chip.ct-user-chip .mud-icon-root{ font-size:13px; color:inherit; }
html.tw-tema .ct-appbar .mud-chip.ct-user-chip .mud-chip-content{ gap:6px; }
/* versión y correo (chips Text) = .tw-nav-note (101): mono 10,5 0,1em navInk2, sin caja */
html.tw-tema .ct-appbar .mud-chip.mud-chip-text.ct-user-chip{ border:0; background:transparent !important; font-size:10.5px !important; letter-spacing:0.1em; }
html.tw-tema .ct-appbar .mud-typography{ font-family:var(--tt-mono); font-size:10.5px; letter-spacing:0.1em; color:var(--tt-navInk2); }
/* wordmark en la barra (drawer cerrado) = .tw-nav-brand-word (89): ya es idéntico; solo el color sobre la franja */
html.tw-tema .ct-appbar .ct-brand-word{ color:#FFFFFF; }
/* migas para las áreas que quieran el título en la franja = .tw-nav-slash (97) + .tw-nav-title (98) */
html.tw-tema .tt-nav-slash{ font-family:var(--tt-mono); font-size:10px; color:var(--tt-navInk2); }
html.tw-tema .tt-nav-title{ font-family:var(--tt-mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:#FFFFFF; font-weight:600; white-space:nowrap; }
/* separador vertical sobre la franja = .tw-nav-vsep (99) */
html.tw-tema .ct-appbar .mud-divider-vertical{ height:16px; align-self:center; border-color:rgba(255,255,255,0.18); }

/* drawer claro = .tw-e-side (553): surface, borde derecho line, 14×10 de aire, gap 3. Opción B de la guía (§3.9). */
html.tw-tema .ct-drawer{ background:var(--tt-surface) !important; border-right:1px solid var(--tt-line) !important; color:var(--tt-ink2); }
html.tw-tema .ct-drawer .mud-drawer-content{ padding:14px 10px; gap:3px; }
html.tw-tema .ct-drawer-logo{ padding:2px 6px 12px; }
html.tw-tema .ct-drawer .ct-brand-word{ color:var(--tt-ink); }                       /* wordmark ink sobre claro (= título de portada) */
html.tw-tema .ct-drawer .ct-stint-logo [stroke]{ stroke:var(--tt-ink); }              /* anillo y cruz del isotipo; el punto coral no cambia */
html.tw-tema .ct-drawer-divider{ background:var(--tt-line2); margin:0 0 12px; }       /* .tw-e-side-hr (557) */
/* ítem = .tw-e-item + --cons (563-564); activo = .is-on (569): fondo ink, texto surface, 700 */
html.tw-tema .ct-drawer .mud-nav-link{
  color:var(--tt-ink2) !important; border-radius:8px !important; margin:0 !important; padding:9px 11px !important;
  font-family:var(--tt-sans); font-size:13.5px; font-weight:600; line-height:normal; gap:9px; transition:none; align-items:center;
}
html.tw-tema .ct-drawer .mud-nav-link .mud-nav-link-text{ margin-left:0; font-weight:inherit; }
html.tw-tema .ct-drawer .mud-nav-link:hover{ background:transparent !important; color:var(--tt-ink) !important; }
html.tw-tema .ct-drawer .mud-nav-link.active{ background:var(--tt-ink) !important; color:var(--tt-surface) !important; font-weight:700 !important; border-inline-end:0; }
/* el 700 va con !important porque Mud 8.7 trae .mud-nav-link.active:not(.mud-nav-link-disabled){font-weight:500 !important}:
   sin esto el ítem ACTIVO quedaba MÁS LIVIANO que los inactivos (600) y la jerarquía del tower se invertía (revisión 23-09). */
html.tw-tema .ct-drawer .mud-nav-link .mud-icon-root{ font-size:16px !important; color:var(--tt-ink3) !important; }
html.tw-tema .ct-drawer .mud-nav-link.active .mud-icon-root{ color:var(--tt-accent) !important; }   /* como el punto .tw-e-dot al activarse (579-582) */
/* rótulo de grupo = .tw-e-side-lbl (555): mono 9,5 0,16em mayúsculas ink3. En Mud 8.7 el encabezado del grupo es
   nav.mud-nav-group > button.mud-nav-link (no existe .mud-nav-group-header; app.css:266-294 apunta a una clase muerta). */
html.tw-tema .ct-drawer .mud-nav-group > .mud-nav-link{
  color:var(--tt-ink2) !important; font-family:var(--tt-mono); font-size:9.5px; font-weight:400; letter-spacing:0.16em; text-transform:uppercase;
  margin:6px 0 0 !important; padding:4px 10px 8px !important; border-radius:0 !important;
}
/* ink2 y no ink3 (revisión 23-09): en el tower .tw-e-side-lbl es un RÓTULO estático, pero acá el encabezado del grupo
   es un <button> que colapsa y expande («OPERACIONES», «MAESTROS», «SISTEMA»). La excepción de ink3 de la guía §1.1
   («solo rótulos y notas mono ≥ 9,5 px») no cubre controles: ink3 sobre el drawer claro da 2,60:1 y ink2 da 5,5:1.
   Se conservan mono 9,5 / 0,16em / mayúsculas, o sea el rótulo sigue siendo el del tower. */
html.tw-tema .ct-drawer .mud-nav-group > .mud-nav-link > .mud-nav-link-text{ font-weight:400; }
html.tw-tema .ct-drawer .mud-nav-group > .mud-nav-link:hover{ background:transparent !important; color:var(--tt-ink) !important; }
html.tw-tema .ct-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-icon{ display:none; }                    /* el rótulo del tower no lleva icono */
html.tw-tema .ct-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-expand-icon{ font-size:14px !important; opacity:1; color:var(--tt-ink2) !important; }   /* el chevron es la única pista de que el grupo colapsa: ink2 */
/* anidados = .tw-e-item--pais (567): 7×11, sangría 22, 12,5 px, sin guía vertical */
html.tw-tema .ct-drawer .mud-nav-group .mud-collapse-container .mud-nav-link{ margin-left:0 !important; padding:7px 11px 7px 22px !important; font-size:12.5px; border-left:0; border-radius:8px !important; }
/* tarjeta de sesión al pie (markup propio para inicio.css) = .tw-e-ses (585-588) */
html.tw-tema .tt-ses{ margin:auto 0 0; padding:10px 12px; border-radius:9px; background:var(--tt-surface2); border:1px solid var(--tt-line2); display:flex; flex-direction:column; gap:4px; }
html.tw-tema .tt-ses-lbl{ font-family:var(--tt-mono); font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--tt-ink3); }
html.tw-tema .tt-ses-rol{ font-size:12.5px; font-weight:700; color:var(--tt-ink); }
html.tw-tema .tt-ses-note{ font-size:11.5px; color:var(--tt-ink3); }

/* ============================================================================================
   5. PANELES Y TARJETAS (= .tw-panel 173, .tw-panel-head 176, .tw-kpi 177, .tw-e-card 622, .tw-f-tile 336)
   Las --mud-elevation-* ya son none; acá caen los literales y los !important de app.css.
   ============================================================================================ */
html.tw-tema .mud-paper:not(.tw *){ border-radius:12px !important; box-shadow:none !important; transition:none; }
/* lo que tenía sombra (Elevation ≥ 1) pasa a borde hairline; Elevation=0 sin Outlined era un contenedor invisible y sigue así */
html.tw-tema .mud-paper:not(.mud-paper-outlined):not(.mud-elevation-0):not(.mud-popover):not(.tw *){ border:1px solid var(--tt-line); }
html.tw-tema .mud-paper.mud-paper-outlined:not(.tw *){ border:1px solid var(--tt-line); }
html.tw-tema .mud-card:not(.tw *){ border-radius:12px !important; box-shadow:none !important; border:1px solid var(--tt-line); transition:none; }
html.tw-tema .mud-card:not(.tw *):hover{ box-shadow:none !important; }
html.tw-tema .mud-card-header:not(.tw *){ padding:11px 14px; border-bottom:1px solid var(--tt-line2); }   /* .tw-panel-head (176) */
html.tw-tema .mud-card-header .mud-icon-root:not(.tw *){ font-size:15px; color:var(--tt-ink3) !important; }   /* el tower no lleva icono en el título: chico y apagado (§5.5) */
/* el !important es obligado: cuando el razor pone Color="Color.Primary" (las 7 cabeceras del contrato, los diálogos),
   Mud agrega .mud-primary-text{color:var(--mud-palette-primary) !important} y el icono se quedaba en teal Material. */
html.tw-tema .mud-card-content:not(.tw *){ padding:14px 16px; }                                            /* .tw-c-chart (243) */
html.tw-tema .mud-card-actions:not(.tw *){ padding:6px 14px 12px; gap:8px; border-top:1px solid var(--tt-line2); }   /* .tw-p-card-foot (961) */
html.tw-tema .mud-expansion-panels:not(.tw *){ border-radius:12px; }
html.tw-tema .mud-expand-panel:not(.tw *){ border:1px solid var(--tt-line); border-radius:12px; background:var(--tt-surface); }
html.tw-tema .mud-expand-panel-header:not(.tw *){ padding:11px 14px; min-height:0; font-family:var(--tt-display); font-weight:800; font-size:14px; }   /* .tw-panel-head + .tw-h14 */
html.tw-tema .mud-expand-panel-content:not(.tw *){ padding:0 14px 14px; }
/* tile anidado (paper outlined dentro de otro paper) = .tw-f-tile (336): surface2, line2, radio 9 */
html.tw-tema .tt-tile:not(.tw *), html.tw-tema .mud-paper .mud-paper.mud-paper-outlined:not(.tw *){ background:var(--tt-surface2); border:1px solid var(--tt-line2); border-radius:9px !important; }
/* vacío = .tw-r-vacio (828) */
html.tw-tema .tt-vacio:not(.tw *){ background:var(--tt-surface); border:1px dashed var(--tt-line); border-radius:10px; padding:22px; text-align:center; font-size:12.5px; color:var(--tt-ink3); }
html.tw-tema .mud-table-empty-row .mud-table-cell:not(.tw *){ text-align:center; font-size:12.5px; color:var(--tt-ink3); padding:22px; }
/* panel oscuro «lectura» = .tw-lectura (234), para resúmenes o avisos destacados */
html.tw-tema .tt-lectura:not(.tw *){ background:var(--tt-nav); color:var(--tt-navInk); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
html.tw-tema .tt-lectura-label:not(.tw *){ font-family:var(--tt-mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--tt-navInk2); }
html.tw-tema .tt-lectura-text:not(.tw *){ font-size:12.5px; line-height:1.5; text-wrap:pretty; }
/* KPI del dashboard = .tw-kpi (177): radio 10, 12×13, sin sombra ni salto; rótulo arriba, valor Archivo 800 22 */
html.tw-tema .ct-stat-card:not(.tw *){ border-radius:10px; padding:12px 13px; gap:10px; background:var(--tt-surface); border:1px solid var(--tt-line); box-shadow:none; transition:none; }
html.tw-tema .ct-stat-card:not(.tw *):hover{ transform:none; box-shadow:none !important; }
html.tw-tema .ct-stat-label:not(.tw *){ font-family:var(--tt-mono); font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--tt-ink3); font-weight:400; }   /* .tw-kpi-label (179) */
html.tw-tema .ct-stat-value: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); margin-bottom:0; }   /* .tw-c-kpi-value (222) */
/* el cuadrado con icono pasa a la numeración de la portada = .tw-p-num (945): 26×26, radio 7, blanco sobre color */
html.tw-tema .ct-stat-icon-wrap:not(.tw *){ width:26px; height:26px; border-radius:7px; color:#FFFFFF; align-self:flex-start; }
html.tw-tema .ct-stat-icon-wrap .mud-icon-root:not(.tw *){ font-size:16px !important; }
html.tw-tema .ct-stat-blue .ct-stat-icon-wrap:not(.tw *), html.tw-tema .ct-stat-teal .ct-stat-icon-wrap:not(.tw *){ background:var(--tt-deep); color:#FFF; }
html.tw-tema .ct-stat-green .ct-stat-icon-wrap:not(.tw *) { background:var(--tt-ok);   color:#FFF; }
html.tw-tema .ct-stat-orange .ct-stat-icon-wrap:not(.tw *){ background:var(--tt-warn); color:#FFF; }
html.tw-tema .ct-stat-red .ct-stat-icon-wrap:not(.tw *)   { background:var(--tt-crit); color:#FFF; }
html.tw-tema .ct-stat-coral .ct-stat-icon-wrap:not(.tw *) { background:var(--tt-coral); color:#FFF; }
html.tw-tema .ct-stat-go:not(.tw *), html.tw-tema .ct-stat-link:not(.tw *){ font-family:var(--tt-mono); font-size:10.5px; font-weight:600; color:var(--tt-deep); text-transform:none; letter-spacing:normal; }   /* .tw-p-abrir (962) */
/* cabecera de sección del dashboard (.ct-sec-head) = .tw-panel-head (176) con .tw-h14 */
html.tw-tema .ct-sec-head:not(.tw *){ padding-bottom:9px; margin-bottom:10px; border-bottom:1px solid var(--tt-line2); }
html.tw-tema .ct-sec-head .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-sec-head .mud-icon-root:not(.tw *){ font-size:15px; color:var(--tt-ink3) !important; }

/* ============================================================================================
   6. BOTONES (= .tw-ia-save 1116, .tw-ia-dl 1119, .tw-ia-dl-md 1121, .tw-ia-open 1111, .tw-p-abrir 962)
   mono 10,5 600 (por variable), radio 7, sin sombra, sin transición, sin mínimo, sin mayúsculas, sin hover.
   ============================================================================================ */
html.tw-tema .mud-button-root:not(.tw *){ border-radius:7px !important; font-weight:600 !important; transition:none; box-shadow:none; min-width:0; line-height:normal; }
html.tw-tema .mud-button:not(.tw *){ padding:9px 10px; }
html.tw-tema .mud-button-filled:not(.tw *), html.tw-tema .mud-button-filled:not(.tw *):hover{ box-shadow:none; }
/* primario relleno = coral (.tw-ia-save, 1116); grande = .tw-ia-send (1087); apagado = .tw-ia-send.is-off (1088) */
/* El relleno horizontal es el MISMO que el de .mud-button-outlined (8px 10px, ambos con borde de 1 px): si no,
   un par de botones que alternan relleno/contorno —el patrón «seleccionado/no seleccionado» del calendario y de
   cualquier grupo de alternancia— cambia 2 px de ancho al elegirlo y se ve deformado (reporte de Nicolás, 24-09). */
/* #527 — el tamaño (borde y relleno) vale también deshabilitado, para que no salte al habilitarse; el color, solo
   habilitado: MudBlazor deshabilita con el atributo `disabled` y sin `:not(:disabled)` el gris no se veía (#416). */
html.tw-tema .mud-button-filled-primary:not(.mud-button-disabled):not(.tw *){ border:1px solid transparent; padding:8px 10px; }
html.tw-tema .mud-button-filled-primary:not(:disabled):not(.mud-button-disabled):not(.tw *){ background-color:var(--tt-coral) !important; color:#FFFFFF !important; border-color:var(--tt-coral); }
html.tw-tema .mud-button-filled-primary:not(:disabled):not(.mud-button-disabled):not(.tw *):hover{ background-color:var(--tt-coral) !important; }
html.tw-tema .mud-button-filled-primary.mud-button-filled-size-large:not(.tw *){ font-size:11px; padding:11px 16px; border:0; border-radius:9px !important; }
/* apagado: MudBlazor 8.7 no emite .mud-button-disabled (0 veces en MudBlazor.min.css) y deshabilita con el atributo, así
   que la regla va por :disabled; la clase queda para los botones-enlace (<a>), igual que en app.css. Hoy es el mismo
   gris que ya daba la paleta (--mud-palette-action-disabled[-background], §1): acá queda dicho y no por casualidad. */
html.tw-tema .mud-button-filled:disabled:not(.tw *),
html.tw-tema .mud-button-filled.mud-button-disabled:not(.tw *){ background-color:var(--tt-bar) !important; color:var(--tt-ink3) !important; }
/* secundario relleno = ink (.tw-ia-dl, 1119). #527 — color solo habilitado, como el primario: con (0,4,1) y !important
   le ganaba al gris de .mud-button-filled:disabled (0,2,0) y «Marcar fin» deshabilitado se veía habilitado (#416). */
html.tw-tema .mud-button-filled-secondary:not(:disabled):not(.mud-button-disabled):not(.tw *),
html.tw-tema .mud-button-filled-dark:not(:disabled):not(.mud-button-disabled):not(.tw *){ background-color:var(--tt-nav) !important; color:#FFFFFF !important; }
html.tw-tema .mud-button-filled-secondary:not(:disabled):not(.mud-button-disabled):not(.tw *):hover{ background-color:var(--tt-nav) !important; }
/* otros rellenos (error/success/warning/info/tertiary): color plano del tower, sin oscurecer al hover */
html.tw-tema .mud-button-filled-error:not(.mud-button-disabled):not(.tw *):hover{ background-color:var(--tt-crit); }
html.tw-tema .mud-button-filled-success:not(.mud-button-disabled):not(.tw *):hover{ background-color:var(--tt-ok); }
html.tw-tema .mud-button-filled-warning:not(.mud-button-disabled):not(.tw *):hover{ background-color:var(--tt-warn); }
html.tw-tema .mud-button-filled-info:not(.mud-button-disabled):not(.tw *):hover{ background-color:var(--tt-deep); }
/* outlined = .tw-ia-dl-md (1121): borde line, transparente, ink2, peso 400; primario outlined en deep */
html.tw-tema .mud-button-outlined:not(.tw *){ padding:8px 10px; font-weight:400 !important; border:1px solid var(--tt-line); color:var(--tt-ink2); background:transparent; }
html.tw-tema .mud-button-outlined-primary:not(.tw *){ color:var(--tt-deep); border-color:var(--tt-line); }
html.tw-tema .mud-button-outlined:not(.tw *):hover, html.tw-tema .mud-button-outlined-primary:not(.tw *):hover{ border:1px solid var(--tt-line); background-color:transparent; }
html.tw-tema .mud-button-outlined.tt-activo:not(.tw *){ border-color:var(--tt-deep); background:rgba(28,114,147,0.1); color:var(--tt-deep); }   /* .tw-ia-open.is-cur (1112) */
html.tw-tema .mud-button-outlined:disabled:not(.tw *),
html.tw-tema .mud-button-outlined.mud-button-disabled:not(.tw *){ border-color:var(--tt-line2); color:var(--tt-ink3); }
/* texto = enlace de acción (.tw-p-abrir, 962) con el padding de .tw-ia-btn (1056) */
html.tw-tema .mud-button-text:not(.tw *){ padding:5px 9px; color:var(--tt-deep); }
html.tw-tema .mud-button-text-default:not(.tw *), html.tw-tema .mud-button-text-secondary:not(.tw *){ color:var(--tt-ink2); }
html.tw-tema .mud-button-text:not(.tw *):hover, html.tw-tema .mud-button-text-primary:not(.tw *):hover{ background-color:transparent; }
html.tw-tema .mud-button-text:disabled:not(.tw *),
html.tw-tema .mud-button-text.mud-button-disabled:not(.tw *){ color:var(--tt-ink3); }
/* pequeño = .tw-ia-open (1111) / .tw-ia-refresh (1113): mono 9,5, 4×8, radio 5 */
html.tw-tema .mud-button-filled-size-small:not(.tw *), html.tw-tema .mud-button-outlined-size-small:not(.tw *), html.tw-tema .mud-button-text-size-small:not(.tw *){
  font-size:9.5px; padding:4px 8px; border-radius:5px !important;
}
/* iconos de botón: el tower no los usa; si quedan, chicos y pegados (§5.5) */
html.tw-tema .mud-button-root .mud-icon-root:not(.tw *){ font-size:14px; }
html.tw-tema .mud-button-icon-start:not(.tw *){ margin-left:0; margin-right:5px; }
html.tw-tema .mud-button-icon-end:not(.tw *){ margin-right:0; margin-left:5px; }
/* botón de icono = «×» del tower (.tw-ia-x, 1043): ink3, sin fondo */
/* El tower achica el ICONO (14-18 px, guía §5.5), no el área que se puede pulsar: la caja queda en 24x24 mínimo
   (WCAG 2.2 AA 2.5.8). Antes del ajuste del 23-09 los lápices de fila medían 21x21 y los embudos 18x18. */
html.tw-tema .mud-icon-button:not(.tw *){ color:var(--tt-ink3); padding:5px; min-width:24px; min-height:24px; }
html.tw-tema .mud-icon-button:not(.tw *):hover{ background-color:var(--tt-hover); }
html.tw-tema .mud-icon-button .mud-icon-root:not(.tw *){ font-size:18px; }
html.tw-tema .mud-icon-button.mud-icon-button-size-small .mud-icon-root:not(.tw *){ font-size:16px; }
html.tw-tema .mud-icon-button.mud-primary-text:not(.tw *){ color:var(--tt-deep); }
html.tw-tema .mud-icon-button.mud-error-text:not(.tw *){ color:var(--tt-crit); }
/* control segmentado claro = .tw-e-seg (629-632). Markup: <div class="tt-seg"><button class="tt-seg-btn is-on">…</button>…</div> */
html.tw-tema .tt-seg:not(.tw *){ display:flex; gap:3px; background:var(--tt-line2); padding:2px; border-radius:6px; }
html.tw-tema .tt-seg-btn:not(.tw *){ border:none; cursor:pointer; font-family:var(--tt-mono); font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; padding:4px 8px; border-radius:4px; background:transparent; color:var(--tt-ink3); }
html.tw-tema .tt-seg-btn.is-on:not(.tw *){ background:var(--tt-surface); color:var(--tt-ink); }
/* grupo de MudButton (toggle) → mismo segmentado: relleno activo = .tw-e-seg-btn.is-on (632), resto transparente.
   #530: MudBlazor 8.7 escribe .mud-button-group-ROOT, no .mud-button-group, así que esta regla no le llegaba a nadie: el
   filtro «Todos / Fallidos / Omitidos» de WhatsApp de la empresa (el único MudButtonGroup del sistema) salía como tres
   botones outlined de 13 px, más grandes que su título. Se nombra la clase real y se deja la vieja por si vuelve. El
   activo es el que la página pinta Color.Primary (mud-button-outlined-primary). */
html.tw-tema :is(.mud-button-group, .mud-button-group-root):not(.tw *){ gap:3px; background:var(--tt-line2); padding:2px; border-radius:6px; box-shadow:none; border:0; }
html.tw-tema :is(.mud-button-group, .mud-button-group-root) .mud-button-root:not(.tw *){ border:0 !important; border-radius:4px !important; margin-left:0; font-family:var(--tt-mono); font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; padding:4px 8px; background:transparent; color:var(--tt-ink3); }
html.tw-tema :is(.mud-button-group, .mud-button-group-root) .mud-button-root:is(.mud-button-outlined-primary, .mud-button-text-primary, .mud-button-filled-primary):not(.tw *){ background:var(--tt-surface); color:var(--tt-ink); }
/* «volver» sobre la franja = .tw-nav-back (91-96) */
html.tw-tema .tt-volver{ display:inline-flex; align-items:center; gap:6px; font-family:var(--tt-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--tt-navInk2); padding:4px 9px 4px 7px; border-radius:6px; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.06); white-space:nowrap; }
html.tw-tema .tt-volver-flecha{ font-size:13px; line-height:1; }
/* FAB (Reportar, si vuelve): coral plano sin sombra */
html.tw-tema .mud-fab:not(.tw *){ box-shadow:none; }

/* ============================================================================================
   7. CHIPS (= .tw-chip 126 / .is-on 130) y PILLS de estado (= .tw-e-pill 609 / .is-bad 611)
   Lo que app.css marcó !important se repite con !important y html.tw-tema delante.
   ============================================================================================ */
html.tw-tema .mud-chip:not(.tw *){
  font-family:var(--tt-mono); font-size:10.5px !important; letter-spacing:0.03em; font-weight:400 !important; text-transform:none;
  padding:5px 10px; height:auto; border-radius:6px !important; border:1px solid var(--tt-line);
  background:transparent; color:var(--tt-ink2); transition:none; box-shadow:none;
}
html.tw-tema .mud-chip.mud-chip-size-medium:not(.ct-user-chip):not(.tw *){ font-size:10.5px !important; height:auto; }   /* el tower no tiene tamaños de chip; los de la franja llevan su propio 10 px (§4) */
html.tw-tema .mud-chip .mud-icon-root:not(.tw *){ font-size:14px; color:inherit; }                  /* el tower no lleva iconos en chips (§5.5) */
html.tw-tema .mud-chip .mud-chip-content:not(.tw *){ gap:6px; }
/* chips de color Material (roles, filtros, tipos): mismo chip hairline, solo cambia la tinta del texto */
html.tw-tema .mud-chip.mud-chip-filled.mud-chip-color-secondary:not(.ct-badge):not(.tw *),
html.tw-tema .mud-chip.mud-chip-filled.mud-chip-color-default:not(.ct-badge):not(.tw *),
html.tw-tema .mud-chip.mud-chip-filled.mud-chip-color-dark:not(.tw *){ background:transparent; color:var(--tt-ink2); }
html.tw-tema .mud-chip.mud-chip-filled.mud-chip-color-tertiary:not(.ct-badge):not(.tw *){ background:transparent; color:var(--tt-accent); }
html.tw-tema .mud-chip.mud-chip-outlined:not(.tw *){ border:1px solid var(--tt-line); }
html.tw-tema .mud-chip.mud-chip-outlined.mud-chip-color-primary:not(.tw *){ color:var(--tt-deep); }
/* activo / seleccionado = .tw-chip.is-on (130): fondo nav, blanco, 600.
   Los chips de la FRANJA (.ct-user-chip: «Empresa», «Contexto», «Ver como», «Forwarder»…) quedan fuera: son selectores
   sobre fondo oscuro y su pieza es .tw-nav-select (102), no .tw-chip.is-on. Sin esta exclusión el chip quedaba ink
   sólido sobre la franja ink —una caja invisible— y los de «Contexto» (Warning/Info) tomaban el tinte de las pills,
   ilegible sobre el nav. Su look completo está en §4 (revisión 23-09). */
html.tw-tema .mud-chip.mud-chip-filled.mud-chip-color-primary:not(.ct-user-chip):not(.tw *),
html.tw-tema .mud-chip.mud-chip-selected:not(.ct-user-chip):not(.tw *){ border-color:var(--tt-nav); background:var(--tt-nav) !important; color:#FFFFFF !important; font-weight:600 !important; }
html.tw-tema .mud-chip.mud-clickable:not(.mud-disabled):not(.tw *):hover{ background:transparent; }   /* sin hover (tower.css:7) */
html.tw-tema .mud-chip.mud-chip-filled.mud-chip-color-primary.mud-clickable:not(.ct-user-chip):not(.mud-disabled):not(.tw *):hover{ background:var(--tt-nav) !important; }
/* contador dentro del chip = .tw-e-fbtn-n (543) */
html.tw-tema .mud-chip .tt-n:not(.tw *){ font-family:var(--tt-mono); font-size:10.5px; font-weight:600; opacity:0.6; margin-left:6px; }
/* pills de estado = .tw-e-pill (609) / .is-bad (611); warn e info con los tintes de .tw-p-tag--warn (953) y .tw-tag--aereo (194) */
html.tw-tema .mud-chip.mud-chip-filled.mud-chip-color-success:not(.ct-user-chip):not(.tw *),
html.tw-tema .mud-chip.mud-chip-filled.mud-chip-color-error:not(.ct-user-chip):not(.tw *),
html.tw-tema .mud-chip.mud-chip-filled.mud-chip-color-warning:not(.ct-user-chip):not(.tw *),
html.tw-tema .mud-chip.mud-chip-filled.mud-chip-color-info:not(.ct-user-chip):not(.tw *){
  font-family:var(--tt-mono) !important; font-size:11px !important; font-weight:600 !important; letter-spacing:normal; text-transform:none;
  padding:1px 6px; border:0; border-radius:5px !important; white-space:nowrap;
}
html.tw-tema .mud-chip.mud-chip-filled.mud-chip-color-success:not(.ct-user-chip):not(.tw *){ color:var(--tt-ok)   !important; background-color:rgba(21,127,95,0.13) !important; }
html.tw-tema .mud-chip.mud-chip-filled.mud-chip-color-error:not(.ct-user-chip):not(.tw *)  { color:var(--tt-crit) !important; background-color:rgba(192,64,46,0.12) !important; }
html.tw-tema .mud-chip.mud-chip-filled.mud-chip-color-warning:not(.ct-user-chip):not(.tw *){ color:var(--tt-warn) !important; background-color:rgba(181,101,29,0.12) !important; }
html.tw-tema .mud-chip.mud-chip-filled.mud-chip-color-info:not(.ct-user-chip):not(.tw *)   { color:var(--tt-deep) !important; background-color:rgba(28,114,147,0.12) !important; }
/* neutro / secundario = .tw-e-grp (686): mono 9 600 0,06em mayúsculas sobre --bar; tertiary = .tw-tag--mar (195) */
html.tw-tema .mud-chip.ct-badge.mud-chip-color-default:not(.tw *),
html.tw-tema .mud-chip.ct-badge.mud-chip-color-secondary:not(.tw *){ font-size:9px !important; font-weight:600 !important; letter-spacing:0.06em; text-transform:uppercase; padding:2px 6px; border:0; border-radius:4px !important; background-color:var(--tt-bar) !important; color:var(--tt-ink2) !important; }
html.tw-tema .mud-chip.ct-badge.mud-chip-color-tertiary:not(.tw *){ padding:1px 6px; border:0; border-radius:5px !important; font-size:11px !important; font-weight:600 !important; background-color:rgba(21,179,199,0.14) !important; color:var(--tt-accent) !important; }
/* El ancho mínimo de 112 px de .ct-badge (app.css:382) es semántica de Stint: columnas parejas en las LISTAS. Fuera de
   una grilla no hay columna que emparejar y la pill quedaba como una barra de 112 px con el texto flotando al medio
   (encabezado del contrato y del traslado, fichas clave/valor). El tower ajusta la pill al texto (.tw-e-pill, 609). */
html.tw-tema .mud-chip.ct-badge:not(.tw *){ min-width:0 !important; }
html.tw-tema .mud-table-cell .mud-chip.ct-badge:not(.tw *){ min-width:112px !important; }   /* columnas parejas: solo en grilla */
/* El punto ::before de 6 px de app.css coincide con .tw-e-linedot (683): se deja. */

/* ============================================================================================
   8. INPUTS, SELECTS, AUTOCOMPLETE, PICKERS, CASILLAS, INTERRUPTORES
   borde = .tw-e-search (655): 1 px line, radio 6, sin cambio al hover ni al foco; foco = anillo cian (999)
   ============================================================================================ */
/* RELLENO DE CAMPO (25-09-2026). Hasta hoy el relleno --surface2 lo tenían SOLO los numéricos con flechas y los
   pickers (§8, la regla de abajo); el resto quedaba transparente, o sea del color de la tarjeta, y el campo se
   delimitaba nada más que con la línea al 10 %. A Nicolás le gustó el contraste de los numéricos y pidió que fuera
   el de todos: el campo se lee como una caja con fondo propio, no como un hueco con borde. Va acá, en la regla
   genérica, y la de los numéricos/pickers se queda solo con lo suyo (el radio 7). */
html.tw-tema .mud-input-outlined .mud-input-outlined-border:not(.tw *){ border-radius:6px !important; border-color:var(--tt-line); border-width:1px; transition:none; background:var(--tt-surface2); }
html.tw-tema .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):not(.tw *):hover .mud-input-outlined-border{ border-color:var(--tt-line); }
html.tw-tema .mud-input.mud-input-outlined:focus-within:not(.tw *) > .mud-input-outlined-border,
html.tw-tema .mud-input.mud-input-outlined:focus-within:not(.tw *) .mud-shrink > .mud-input-outlined-border{
  border-width:1px; border-color:var(--tt-line); outline:var(--tt-foco); outline-offset:1px;    /* .tw-ia textarea:focus (999) */
}
html.tw-tema .mud-input-control:focus-within .mud-input-outlined-border:not(.tw *){ box-shadow:none; }      /* halo de app.css:789 */
/* texto tecleado = .tw-ia-textarea (1086): Hanken 13 / 1.45. El padding vertical de Mud se CONSERVA (§5.7: geometría del label) */
html.tw-tema .mud-input:not(.tw *){ font-family:var(--tt-sans); font-size:13px; line-height:1.45; color:var(--tt-ink); }
html.tw-tema .mud-input-outlined .mud-input-root:not(.tw *){ padding-left:8px; padding-right:8px; }              /* .tw-e-search: 8 px laterales */

/* ---- 5.7-bis DENSIDAD ÚNICA (25-09-2026) --------------------------------------------------------------
   «los controles son más anchos que el formulario principal, normalicemos». Y tenía razón: `Margin.Dense`
   se pone a mano en cada control del .razor, y CONTANDO hoy hay 25 archivos con inputs donde no aparece ni
   una vez — casi todos diálogos (ContractProductDialog, UserDialog y prácticamente todos los de Maestros).
   O sea: las páginas quedaron densas y los diálogos no, y al abrir un popup sobre el formulario se ven dos
   sistemas distintos, uno encima del otro.
   No se arregla tocando 25 archivos: se arregla acá, obligando a la métrica densa SIEMPRE. Así deja de
   importar si alguien se acuerda o no del atributo, que es justo lo que significa «estándar». Los valores
   son los de MudBlazor.min.css, copiados tal cual de sus reglas `*-margin-dense`, para que denso y no-denso
   caigan exactamente en el mismo píxel: caja de 40 px de alto y paso vertical de 4/8 px.
   Si algún día se quiere un control alto de verdad, se pide con una clase propia, no con la ausencia de un
   atributo. */
/* SIN el calificador `div`: la caja que trae los 18,5 px es el <input> (o el <textarea>), no el div hermano que
   Mud usa de medida. La regla de Mud sí dice `div.mud-input-slot…`, pero el <input> recibe el mismo padding por
   otra vía; apuntando a la clase sola se cubren los dos y se gana por especificidad. Verificado en el DOM. */
html.tw-tema .mud-input-slot.mud-input-root-outlined:not(.tw *){ padding-top:10.5px; padding-bottom:10.5px; }   /* normal: 18,5 → dense: 10,5 */
html.tw-tema .mud-input-control-margin-normal:not(.tw *){ margin:4px 0; }                                          /* normal: 8px 0 */
html.tw-tema .mud-input-control-margin-normal.mud-input-outlined-with-label:not(.tw *){ margin-top:8px; margin-bottom:4px; }   /* normal: 16/8 */
/* el rótulo sin encoger va al mismo sitio en las dos densidades, porque la caja ya es la misma */
html.tw-tema .mud-input-label-outlined:not(.tw *),
html.tw-tema .mud-input-label-outlined.mud-input-label-margin-dense:not(.tw *){ transform:translate(8px, 12px) scale(1); }
html.tw-tema .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined:not(.tw *),
html.tw-tema .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined:not(.tw *){ transform:translate(8px, -6px) scale(0.75); }
html.tw-tema .mud-input-label:not(.tw *){ font-family:var(--tt-sans); font-size:13px; color:var(--tt-ink3); line-height:1.15rem; }   /* sin mono/mayúsculas: rompe el notch (app.css:787-788) */
/* la muesca del borde la dibuja un <legend> con font-size en REM (0,75rem = 12 px), o sea que NO sigue al rótulo cuando
   el tema lo baja de 16 a 13 px: el hueco quedaba ~39 px más ancho que el texto en los 102 campos Outlined. 13 × 0,75
   es el mismo factor del scale() del rótulo encogido, así que la muesca vuelve a calzar (revisión 23-09). */
html.tw-tema .mud-input-outlined-border:not(.tw *) legend{ font-size:9.75px; font-family:var(--tt-sans); }
/* la familia hay que fijarla igual que el tamaño: el <legend> vive DENTRO de .mud-input y en los numéricos y los
   pickers heredaba la JetBrains Mono de .tw-e-date (§8), que a 9,75 px es bastante más ancha que la Hanken del
   rótulo → ahí el hueco seguía sobrando 21-42 px. El rótulo siempre es Hanken (regla de arriba). */
html.tw-tema .mud-input-helper-text:not(.tw *){ font-family:var(--tt-sans); font-size:11.5px; line-height:normal; letter-spacing:normal; color:var(--tt-ink3); }   /* .tw-e-kpi-note (612) */
html.tw-tema .mud-input input::placeholder, html.tw-tema .mud-input textarea::placeholder{ color:var(--tt-ink3); opacity:1; }
html.tw-tema .mud-input-adornment .mud-icon-root:not(.tw *){ color:var(--tt-ink3); font-size:18px; }
html.tw-tema .mud-input-adornment .mud-icon-button:not(.tw *){ color:var(--tt-ink3); }
/* variante subrayada (los diálogos de maestros): el tower no tiene subrayados → misma caja hairline radio 6 (.tw-e-search, 655).
   La línea y la animación de foco de Mud son ::before/::after: se apagan. El label queda 8 px adentro para seguir al texto. */
html.tw-tema .mud-input.mud-input-underline:not(.tw *){ border:1px solid var(--tt-line); border-radius:6px; background:var(--tt-surface); padding:0 8px; transition:none; }
html.tw-tema .mud-input.mud-input-underline:not(.tw *)::before, html.tw-tema .mud-input.mud-input-underline:not(.tw *)::after{ display:none; }
html.tw-tema .mud-input.mud-input-underline:focus-within:not(.tw *){ outline:var(--tt-foco); outline-offset:1px; }
html.tw-tema .mud-input.mud-input-underline.mud-disabled:not(.tw *){ background:var(--tt-surface2); }
html.tw-tema .mud-input-label-inputcontrol:not(.mud-input-label-outlined):not(.mud-input-label-filled):not(.tw *){ left:8px; }
/* label activo/enfocado: ink2, nunca el primario (el tower no colorea rótulos) */
html.tw-tema .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol:not(.tw *){ color:var(--tt-ink2); }
html.tw-tema .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol:not(.tw *){ color:var(--tt-ink2); }
/* textarea = .tw-ia-textarea (1086): fondo surface2 y radio 9 */
html.tw-tema .mud-input-control:has(> .mud-input-control-input-container > .mud-input > textarea) .mud-input-outlined-border:not(.tw *){ border-radius:9px !important; background:var(--tt-surface2); }
/* numéricos y fechas = .tw-e-date (532): mono 11,5, fondo surface2, radio 7 */
html.tw-tema .mud-input-number-control .mud-input:not(.tw *), html.tw-tema .mud-picker .mud-input:not(.tw *){ font-family:var(--tt-mono); font-size:11.5px; }
/* …pero la mono a 11,5 px da una caja de línea de 17 px contra los 19 de la Hanken de 13, así que estos campos
   medían 38 px y los de al lado 40: en el formulario de contrato las tres fechas quedaban dos píxeles más bajas
   que todo lo demás de su fila. Se fija la caja de línea en 19 px para que el alto NO dependa del tamaño de
   letra: 19 + 10,5 + 10,5 = 40, igual que el resto. (25-09-2026, junto con la densidad única de §5.7-bis.) */
html.tw-tema .mud-input-number-control .mud-input .mud-input-slot:not(.tw *),
html.tw-tema .mud-picker .mud-input .mud-input-slot:not(.tw *){ line-height:19px; }
/* El `background:--surface2` que estaba acá SUBIÓ a la regla genérica de §5.7 el 25-09: ahora lo llevan todos los
   campos, no solo estos dos. Acá queda únicamente lo que sí es propio del numérico y del picker: el radio 7. */
html.tw-tema .mud-input-number-control .mud-input-outlined-border:not(.tw *), html.tw-tema .mud-picker .mud-input-outlined-border:not(.tw *){ border-radius:7px !important; }
/* …y como .mud-input-outlined-border es un overlay absoluto que va DESPUÉS del <input> en el DOM, con fondo TAPA el
   texto tecleado, el placeholder y los adornos (los campos se veían vacíos: ETD, temperatura, días libres, flete…).
   El input ya es position:relative en Mud: basta subirlo. Vale para todo outlined: sin fondo en el overlay no cambia
   nada. Vivía en contratos.css §G0 y era global desde una hoja de área; se sube acá (23-09). */
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; }
/* campos de FILTRO sin label (Class="tt-filtro" en la barra de una lista) = .tw-e-search (655) / .tw-e-sel (657) */
html.tw-tema .tt-filtro .mud-input:not(.tw *){ font-family:var(--tt-mono); font-size:11px; }
html.tw-tema .tt-filtro .mud-input-root:not(.tw *){ padding:5px 8px; }
html.tw-tema .tt-filtro.mud-select .mud-input:not(.tw *){ font-size:10.5px; color:var(--tt-ink3); }             /* sin valor: ink3 */
html.tw-tema .tt-filtro.mud-select:has(.mud-shrink) .mud-input:not(.tw *){ color:var(--tt-ink); }                /* con valor: ink (.tw-e-sel.is-on, 658) */
/* campo con ERROR de validación: el tower no tiene estado de error, pero al pasar los subrayados a caja hairline
   (§8, decisión de base) el campo culpable dejó de distinguirse del de al lado: solo cambiaban el rótulo y la ayuda.
   El borde en --tt-crit lo repone. MudBlazor ya marca border-color con !important en el outlined con error, o sea que
   la propiedad está «abierta» (§5.3): el !important acá es el mismo, no uno nuevo. */
html.tw-tema .mud-input-error .mud-input-outlined-border:not(.tw *){ border-color:var(--tt-crit) !important; }
html.tw-tema .mud-input.mud-input-underline.mud-input-error:not(.tw *){ border-color:var(--tt-crit); }
/* no editable (#416): el gris ES el feedback */
html.tw-tema .ct-readonly .mud-input-slot:not(.tw *), html.tw-tema .ct-readonly .mud-input input:not(.tw *), html.tw-tema .ct-readonly .mud-input-root:not(.tw *),
html.tw-tema .ct-readonly .mud-input-label:not(.tw *), html.tw-tema .mud-disabled .mud-input:not(.tw *), html.tw-tema .mud-input.mud-disabled:not(.tw *){ color:var(--tt-ink3) !important; }
/* casilla = .tw-ia-box (1036-1037): sin marcar ink3, marcada deep (los colores llegan por --mud-palette-*; solo tamaño) */
html.tw-tema .mud-checkbox .mud-icon-root:not(.tw *), html.tw-tema .mud-radio .mud-icon-root:not(.tw *){ font-size:18px; }
html.tw-tema .mud-checkbox .mud-button-root:not(.tw *), html.tw-tema .mud-radio .mud-button-root:not(.tw *){ color:var(--tt-ink3); padding:6px; }
html.tw-tema .mud-checkbox .mud-button-root:not(.tw *):hover, html.tw-tema .mud-radio .mud-button-root:not(.tw *):hover{ background-color:transparent; }
/* rótulo de casilla/radio/interruptor: Mud le repite la clase del control (p.mud-typography.mud-switch.mud-switch-label-medium) y fija
   `.mud-switch-label-medium{font-size:1rem !important}` en MudBlazor.min.css → el único !important que MudBlazor obliga acá → 13 px Hanken ink */
html.tw-tema .mud-checkbox > .mud-typography.mud-checkbox:not(.tw *), html.tw-tema .mud-radio > .mud-typography.mud-radio:not(.tw *), html.tw-tema .mud-switch > .mud-typography.mud-switch:not(.tw *){ font-size:13px !important; font-family:var(--tt-sans); color:var(--tt-ink); }
html.tw-tema .mud-switch.mud-disabled > .mud-typography.mud-switch:not(.tw *), html.tw-tema .mud-checkbox.mud-disabled > .mud-typography.mud-checkbox:not(.tw *){ color:var(--tt-ink3); }
/* INTERRUPTOR (25-09-2026, reescrito: «se ve como el hoyo»). Tres defectos que se arrastraban:
   1. GEOMETRÍA. `.mud-switch-base` también es `.mud-icon-button`, así que le caía el `padding:5px` de la regla
      genérica (316) y la caja pasaba de los 38x38 de Mud a 30x30. Como la pista es un hermano ESTÁTICO centrado
      en el span de 38, el pulgar quedaba 4 px MÁS ARRIBA que la pista y asomaba 7 px por la izquierda en vez de
      los 3 simétricos de Mud. Medido: centroY 248,3 (pulgar) contra 252,3 (pista). Se devuelven los 9 px, que es
      lo único que centra los dos. NO tocar con `min-width/min-height`: el ancho lo fija el padding + el pulgar.
   2. FIGURA Y FONDO. El pulgar era `--tt-surface`, o sea EXACTAMENTE el color de la tarjeta que tiene detrás
      (#0F2C3B sobre #0F2C3B en oscuro): no se leía como perilla sino como un agujero recortado en la pista, y el
      borde de 1 px era lo único que lo insinuaba. Ahora es `--tt-ink3` macizo, que contrasta con la pista y con
      la tarjeta en los DOS modos, y blanco cuando está encendido, sobre el deep.
   3. Sin sombra, a propósito: en este look la elevación se reserva para las capas flotantes (§15). La perilla se
      lee por color, no por relieve.
   4. POR TAMAÑO (#530, 29-09-2026: «el control está deformado» en /admin/notificaciones). El arreglo 1 devolvía
      9 px a TODOS los interruptores, pero 9 es el relleno del MEDIANO: el chico (Size.Small) usa 5 px (pista 44x24,
      pulgar 14) y el grande 13. Como esta regla (0,3,1) le gana a la de Mud (.mud-switch-base-small.mud-switch-base,
      0,2,0), el chico quedaba con una caja de 32 en un span de 24: pulgar 4 px más abajo que la pista y, encendido,
      pegado al rótulo. Pasaba en los TRES chicos que había (Ofrecer por WhatsApp —que ahora es mediano—, Multibodega
      del contrato nuevo y «Solo los que van a llegar» de Portería). Ahora cada tamaño recupera el relleno de Mud;
      medido en los 15 interruptores que se alcanzan (2 chicos y 13 medianos; claro, oscuro y sin tema): centro del pulgar = centro
      de la pista. El grande no se usa hoy; se deja por simetría con Mud. */
html.tw-tema .mud-switch-base.mud-switch-base-small:not(.tw *){ padding:5px; }
html.tw-tema .mud-switch-base.mud-switch-base-medium:not(.tw *){ padding:9px; }
html.tw-tema .mud-switch-base.mud-switch-base-large:not(.tw *){ padding:13px; }
html.tw-tema .mud-switch-track:not(.tw *){ background-color:var(--tt-bar); opacity:1; }
html.tw-tema .mud-switch-thumb:not(.tw *),
html.tw-tema .mud-switch-thumb-medium:not(.tw *), html.tw-tema .mud-switch-thumb-small:not(.tw *){   /* la clase genérica no existe en el DOM de Mud 8.7: la real lleva tamaño (venía de traslados.css §G2, 23-09) */
  background-color:var(--tt-ink3); box-shadow:none; border:none;
}
html.tw-tema .mud-switch-base.mud-checked + .mud-switch-track:not(.tw *){ background-color:var(--tt-deep); opacity:1; }
/* El aro es obligatorio, no decorativo: el pulgar de Mud ASOMA 3 px fuera de la pista por cada lado, así que en
   claro la mitad derecha del pulgar blanco cae sobre la tarjeta BLANCA y el control marcado se leía como una media
   luna deep sin perilla. El aro deep le devuelve el borde. En oscuro no molesta y deja el par idéntico en los dos
   modos. box-sizing:border-box (Mud) ⇒ el aro NO agranda el pulgar: sigue midiendo 20x20. */
html.tw-tema .mud-switch-base.mud-checked [class*="mud-switch-thumb"]:not(.tw *){ background-color:#FFFFFF; border:1px solid var(--tt-deep); }
/* el aro, del color de la pista: los interruptores de WhatsApp son Color.Success (verdes) y el aro deep sobre la pista
   verde se veía como un borde ajeno (#530). Mud solo pone la clase de color al habilitado. */
html.tw-tema .mud-switch-base.mud-checked.mud-success-text [class*="mud-switch-thumb"]:not(.tw *){ border-color:var(--mud-palette-success); }
/* DESHABILITADO (#530, revisión 29-09: «Ofrecer por WhatsApp» con la empresa sin WhatsApp se leía como un aro hueco).
   El pulgar era --tt-bar (en oscuro rgba(255,255,255,.13), el mismo tono de la pista) y, marcado, conservaba el aro
   deep de la regla de arriba; y la pista quedaba a la opacidad .12 !important de Mud (.mud-switch-disabled + track),
   casi invisible sobre la tarjeta. Ahora: pulgar ink3 macizo SIN aro, pista --tt-bar entera (Mud fija la opacidad con
   !important: la propiedad está «abierta», §5.3) y el control completo a media opacidad. Queda como un interruptor
   gris tenue, con el pulgar donde corresponde (marcado a la derecha), y se distingue del apagado editable (pista
   --tt-bar y pulgar ink3 a opacidad entera) sin textos extra (#416). Misma especificidad que la del aro: gana por orden. */
html.tw-tema .mud-switch.mud-disabled [class*="mud-switch-thumb"]:not(.tw *){ background-color:var(--tt-ink3); border-color:transparent; }
html.tw-tema .mud-switch-base.mud-switch-disabled + .mud-switch-track:not(.tw *){ background-color:var(--tt-bar) !important; opacity:1 !important; }
html.tw-tema .mud-switch.mud-disabled .mud-switch-span:not(.tw *){ opacity:.5; }
html.tw-tema .mud-switch-base:not(.tw *):hover{ background-color:transparent; }
/* select: la flecha en ink3 chica */
html.tw-tema .mud-select .mud-input-adornment-end .mud-icon-root:not(.tw *){ font-size:18px; color:var(--tt-ink3); }

/* ============================================================================================
   9. TABLAS: MudDataGrid, MudSimpleTable y MudTable (tres marcados: la misma cabecera y la misma fila en los tres, §5.4)
   contenedor = .tw-e-card (622); cabecera = .tw-e-thead (671) + .tw-e-th (672); fila = .tw-e-row (678) / .tw-e-tr (677)
   ============================================================================================ */
html.tw-tema .mud-table:not(.tw *){ border-radius:10px !important; box-shadow:none !important; border:1px solid var(--tt-line); background:var(--tt-surface); }
html.tw-tema .mud-table-container:not(.tw *){ border-radius:10px !important; }
/* cabecera: app.css la pintaba ink/blanco con !important */
html.tw-tema .mud-table thead th:not(.tw *), html.tw-tema .mud-table-head .mud-table-cell:not(.tw *), html.tw-tema .mud-simple-table table * tr th:not(.tw *){
  background:var(--tt-surface2) !important; color:var(--tt-ink3) !important;
  font-family:var(--tt-mono) !important; font-size:9.5px !important; font-weight:600 !important; letter-spacing:0.11em; text-transform:uppercase;
  line-height:normal; padding:7px 13px; border-bottom:1px solid var(--tt-line2) !important; white-space:nowrap;
}
html.tw-tema .mud-table-head .mud-table-cell .mud-table-sort-label:not(.tw *){ color:inherit; }
html.tw-tema .mud-table-head .mud-table-cell .mud-table-sort-label.mud-clickable:not(.tw *):hover{ opacity:1; }
html.tw-tema .mud-table-head .mud-table-cell .mud-table-sort-label-icon:not(.tw *){ font-size:14px; color:var(--tt-ink3); }
html.tw-tema .mud-table-head .mud-table-cell:has(.mud-table-sort-label-icon.mud-direction-asc, .mud-table-sort-label-icon.mud-direction-desc,
  .sort-direction-icon.mud-direction-asc, .sort-direction-icon.mud-direction-desc):not(.tw *){ color:var(--tt-ink) !important; }   /* .tw-e-th.is-on (676) */
/* MudTable marca la dirección en .mud-table-sort-label-icon, pero MudDataGrid 8.7 la marca en .sort-direction-icon
   (dentro de .column-options): con un solo selector la columna ordenada NO se resaltaba en las grillas (23-09). */
html.tw-tema .mud-table-head .mud-table-cell .sort-direction-icon:not(.tw *){ font-size:14px; color:var(--tt-ink3); }
html.tw-tema .mud-table-head .column-header .mud-icon-button:not(.tw *){ color:inherit; padding:2px; margin-top:-3px; margin-bottom:-3px; }   /* mismo truco que el embudo: 24x24 de objetivo, 18 px de alto en la fila */
html.tw-tema .mud-table-head .column-header .mud-icon-root:not(.tw *){ font-size:14px; }
html.tw-tema .ct-head-filter .mud-button-root:not(.tw *){ padding:0 2px; }
html.tw-tema .ct-head-filter .mud-icon-root:not(.tw *){ font-size:14px; }
/* el embudo (y el botón de orden/opciones de arriba) miden 24x24 por el mínimo de §6, pero se les restan 3 px arriba
   y abajo para que la cabecera siga midiendo lo del tower (.tw-e-thead, 671: 7px 13px; con el mínimo a secas la fila
   de cabecera pasaba de 33 a 39 px). El área que se puede pulsar se mete en el relleno de la celda, que no es
   clicable: se gana el objetivo accesible sin perder la densidad (23-09). */
html.tw-tema .ct-head-filter .mud-icon-button:not(.tw *){ margin-top:-3px; margin-bottom:-3px; }
/* filas; hover y zebra van por --mud-palette-table-hover / -striped (§1) */
html.tw-tema .mud-table-cell:not(.tw *), html.tw-tema .mud-simple-table table * tr>td:not(.tw *){
  padding:10px 13px; font-family:var(--tt-sans); font-size:12.5px; line-height:normal; letter-spacing:normal; border-bottom:1px solid var(--tt-line2); color:var(--tt-ink);
}
html.tw-tema .mud-table-dense * .mud-table-row .mud-table-cell:not(.tw *), html.tw-tema .mud-simple-table.mud-table-dense * tr td:not(.tw *){ padding:8px 14px; }   /* .tw-trow (274) */
html.tw-tema .mud-simple-table.mud-table-dense * tr th:not(.tw *){ padding:6px 14px; }                                                                 /* .tw-thead (273) */
html.tw-tema .mud-table tbody tr:not(.tw *){ transition:none; }
html.tw-tema .mud-table-body .mud-table-row:last-child .mud-table-cell:not(.tw *){ border-bottom:0; }
/* numéricas = .tw-c-td (290) / .tw-num (189): mono 11, derecha, sin quiebre; también su cabecera */
html.tw-tema .mud-table-cell.ct-num:not(.tw *), html.tw-tema .mud-simple-table td.ct-num:not(.tw *){ font-family:var(--tt-mono); font-size:11px; text-align:right; white-space:nowrap; }
html.tw-tema .mud-table-head .mud-table-cell.ct-num .column-header:not(.tw *){ justify-content:flex-end; }
/* identificador = .tw-e-id (685); texto secundario en celda = .tw-e-prod (688) */
html.tw-tema .mud-table-cell .ct-mono:not(.tw *){ font-size:12.5px; font-weight:600; letter-spacing:0.02em; }
html.tw-tema .mud-table-cell .mud-typography-caption:not(.tw *){ font-family:var(--tt-sans); font-size:12px; color:var(--tt-ink2); }
/* seleccionada = .tw-c-tabla-tr.is-on (288): MudDataGrid no tiene clase estable de fila seleccionada; aplicar por RowClassFunc="tt-sel" */
html.tw-tema .mud-table-row.tt-sel .mud-table-cell:not(.tw *){ background:rgba(255,107,91,0.08); }
html.tw-tema .mud-table-row.tt-sel .mud-table-cell:first-child:not(.tw *){ box-shadow:inset 3px 0 0 var(--tt-coral); }
/* totales = .tw-c-tabla-tot (289) */
html.tw-tema .mud-table-foot .mud-table-cell:not(.tw *), html.tw-tema .mud-simple-table tfoot td:not(.tw *){ padding:9px 14px; background:var(--tt-surface2); border-top:1px solid var(--tt-line); font-weight:600; }
/* paginación = .tw-e-pag (747-749): info mono 10,5 ink2; botones hairline radio 6 que nunca «desaparecen» */
html.tw-tema .mud-table-pagination:not(.tw *){ border-top:1px solid var(--tt-line2); }
html.tw-tema .mud-table-pagination-toolbar:not(.tw *){ height:auto; min-height:0; padding:8px 13px; gap:8px; }
html.tw-tema .mud-table-pagination-caption:not(.tw *), html.tw-tema .mud-table-pagination-information:not(.tw *){ font-family:var(--tt-mono); font-size:10.5px; color:var(--tt-ink2); padding:0; }
html.tw-tema .mud-table-pagination-select .mud-input-root:not(.tw *){ font-family:var(--tt-mono); font-size:10.5px; color:var(--tt-ink); }
html.tw-tema .mud-table-pagination-actions .mud-icon-button:not(.tw *){ border:1px solid var(--tt-line); border-radius:6px !important; background:var(--tt-surface); color:var(--tt-ink); padding:4px; margin:0 2px; }   /* radio 6 = .tw-e-pag-btn (749): .mud-button-root lo marcó en 7 con !important. Relleno 4 + icono 16 = 24 px de caja (23-09) */
html.tw-tema .mud-table-pagination-actions .mud-icon-button .mud-icon-root:not(.tw *){ font-size:16px; }
html.tw-tema .mud-table-pagination-actions .mud-icon-button.mud-disabled:not(.tw *){ color:var(--tt-ink3); background:var(--tt-surface); }
/* barra de herramientas sobre la tabla = .tw-e-tbar (654) */
html.tw-tema .mud-table-toolbar:not(.tw *){ padding:8px 13px; border-bottom:1px solid var(--tt-line2); gap:6px; min-height:0; }
/* tablas de la app fuera de Mud que comparten el look de cabecera tinta (camión .ct-lo, permisos .ct-perm): las hojas de área las cubren */

/* ============================================================================================
   10. BARRAS DE PROGRESO (= .tw-track 183 / .tw-fill 184) y TRACKER DE HITOS (forma de Stint, colores del tower: #523)
   ============================================================================================ */
html.tw-tema .mud-progress-linear:not(.tw *){ background:var(--tt-bar); border-radius:3px; overflow:hidden; }
html.tw-tema .mud-progress-linear:not(.tw *)::before{ display:none; }                                           /* la pista ya es --bar; fuera el color al 20 % */
html.tw-tema .mud-progress-linear.mud-progress-linear-small:not(.tw *) { height:5px; border-radius:3px; }
html.tw-tema .mud-progress-linear.mud-progress-linear-medium:not(.tw *){ height:7px; border-radius:4px; }
html.tw-tema .mud-progress-linear.mud-progress-linear-large:not(.tw *) { height:9px; border-radius:5px; }
html.tw-tema .mud-progress-linear.mud-progress-linear-rounded:not(.tw *){ border-radius:3px; }
html.tw-tema .mud-progress-linear .mud-progress-linear-bar:not(.tw *){ border-radius:inherit; transition:none; }
html.tw-tema .mud-progress-linear.mud-progress-linear-color-primary .mud-progress-linear-bar:not(.tw *){ background-color:var(--tt-deep); }     /* .tw-fill (184) */
html.tw-tema .mud-progress-linear.mud-progress-linear-color-tertiary .mud-progress-linear-bar:not(.tw *){ background-color:var(--tt-accent); }  /* .tw-fill--accent (185) */
html.tw-tema .mud-progress-linear.mud-progress-linear-color-secondary .mud-progress-linear-bar:not(.tw *){ background-color:var(--tt-ink2); }   /* .tw-fill--ink2 (186) */
html.tw-tema .mud-progress-linear.mud-progress-linear-color-warning .mud-progress-linear-bar:not(.tw *){ background-color:var(--tt-warn); }     /* .tw-f-fill7 ≥ 40 % (364) */
html.tw-tema .mud-progress-circular:not(.tw *){ color:var(--tt-deep); }
/* tracker de hitos de Stint (#523, 29-09-2026): la FORMA es la de Stint (app.css:727-752) —círculo de 24 con anillo de
   3, conector de 3 centrado en el círculo, hito actual = anillo con un punto al centro— y el tema pone solo los COLORES
   del tower. Antes copiaba .tw-e-hito-n/.tw-e-step (cuadrito de 17 radio 5 sobre una barra de 8) y Nicolás lo pidió
   de vuelta: «esas líneas con cuadritos se ven horrendas». Por eso acá no hay medidas: solo colores.
   Cumplido = accent relleno, y accent el conector entre cumplidos y al entrar al actual; actual = anillo y punto warn;
   pendiente = anillo y conector --bar. El relleno del anillo es el PAPEL (surface), no #fff: en oscuro es el color de
   la tarjeta. --bar es translúcido, pero el anillo se pinta sobre ese relleno, así que da el mismo gris que el conector. */
html.tw-tema .ct-step-node:not(.tw *){ background:var(--tt-surface); border-color:var(--tt-bar); }
html.tw-tema .ct-step:not(.tw *)::before{ background:var(--tt-bar); }
html.tw-tema .ct-step--done .ct-step-node:not(.tw *){ background:var(--tt-accent); border-color:var(--tt-accent); }
html.tw-tema .ct-step--done:has(+ .ct-step--done):not(.tw *)::before, html.tw-tema .ct-step--done:has(+ .ct-step--current):not(.tw *)::before{ background:var(--tt-accent); }
html.tw-tema .ct-step--current .ct-step-node:not(.tw *){ background:var(--tt-surface); border-color:var(--tt-warn); }
html.tw-tema .ct-step--current .ct-step-node:not(.tw *)::after{ background:var(--tt-warn); }
html.tw-tema .ct-step-t:not(.tw *){ font-size:12.5px; font-weight:500; color:var(--tt-ink); }               /* .tw-e-hito-txt (738-740) */
html.tw-tema .ct-step-s:not(.tw *){ font-family:var(--tt-mono); font-size:9.5px; letter-spacing:0.06em; color:var(--tt-ink3); }   /* .tw-e-hito-own (743) */
/* #534 — los 13 hitos estándar: la misma forma de app.css, con los colores del tower. El conector va accent hasta el
   actual (también a través de un «directo» o un «no disponible»); «sin registro» es el accent aclarado sobre el papel. */
html.tw-tema .ct-step--trail:not(.tw *)::before{ background:var(--tt-accent); }
html.tw-tema .ct-step--sinreg .ct-step-node:not(.tw *){ background:color-mix(in srgb, var(--tt-accent) 40%, var(--tt-surface)); border-color:color-mix(in srgb, var(--tt-accent) 40%, var(--tt-surface)); }
html.tw-tema .ct-step--directo.ct-step--pasado .ct-step-node:not(.tw *){ border-color:var(--tt-accent); }
html.tw-tema .ct-step--open .ct-step-node:not(.tw *), html.tw-tema .ct-tracker--hitos .ct-step:focus-visible .ct-step-node:not(.tw *){ box-shadow:0 0 0 4px color-mix(in srgb, var(--tt-warn) 25%, transparent); }
html.tw-tema .ct-step-n:not(.tw *), html.tw-tema .ct-step-p:not(.tw *){ font-family:var(--tt-mono); color:var(--tt-ink3); }
html.tw-tema .ct-step-x:not(.tw *){ color:var(--tt-ink2); }
html.tw-tema .ct-step-more:not(.tw *){ font-family:var(--tt-mono); color:var(--tt-accent); }
html.tw-tema .ct-hito-det:not(.tw *){ border-color:var(--tt-line); color:var(--tt-ink); }
html.tw-tema .ct-hito-det-n:not(.tw *){ font-family:var(--tt-mono); color:var(--tt-ink3); }
html.tw-tema .ct-hito-det-k:not(.tw *), html.tw-tema .ct-hito-det-src:not(.tw *), html.tw-tema .ct-hito-sub-tipo:not(.tw *), html.tw-tema .ct-hito-sub th:not(.tw *){ color:var(--tt-ink2); }
html.tw-tema .ct-hito-sub th:not(.tw *), html.tw-tema .ct-hito-sub td:not(.tw *){ border-bottom-color:var(--tt-line); }
html.tw-tema .ct-hito-dot:not(.tw *){ border-color:var(--tt-bar); }
html.tw-tema .ct-hito-dot--done:not(.tw *){ background:var(--tt-accent); border-color:var(--tt-accent); }
/* line-height 1.3: app.css le deja line-height:1 con overflow:hidden, y con la mono a 9,5 el tilde de la mayúscula
   quedaba fuera de la caja y se cortaba («DEPOSITO», «TRANSITO»). La fila de segmentos mide 16 fijos: los nodos no se mueven. */
html.tw-tema .ct-trkseg-label:not(.tw *){ font-family:var(--tt-mono); font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--tt-ink3); border-left-color:var(--tt-line); line-height:1.3; }   /* .tw-e-side-lbl (555) */

/* ============================================================================================
   11. BADGES Y PILLS SUELTAS (= .tw-e-rmark 662, .tw-e-alert 521, .tw-e-linetag 649, .tw-delta 165)
   ============================================================================================ */
html.tw-tema .mud-badge:not(.tw *){ height:15px; min-width:15px; padding:0 3px; border-radius:4px; font-family:var(--tt-mono); font-size:9.5px; font-weight:600; transition:none; box-shadow:none; }
html.tw-tema .ct-notif-badge .mud-badge:not(.tw *){ background-color:var(--tt-crit) !important; color:#FFFFFF !important; }   /* .tw-e-rmark (662) */
html.tw-tema .mud-badge.mud-badge-dot:not(.tw *){ width:7px; height:7px; min-width:0; border-radius:50%; background-color:var(--tt-coral); }   /* .tw-lectura-dot (239) */
html.tw-tema .tt-alerta-chip:not(.tw *){ display:flex; align-items:center; gap:7px; background:rgba(192,64,46,0.2); border:1px solid rgba(240,112,90,0.42); padding:4px 10px; border-radius:7px; }
html.tw-tema .tt-alerta-chip:not(.tw *)::before{ content:""; width:6px; height:6px; border-radius:50%; background:#F0705A; flex:none; }
html.tw-tema .tt-alerta-chip-txt:not(.tw *){ font-size:12px; font-weight:700; color:#FFC9C0; }
html.tw-tema .tt-linetag:not(.tw *){ font-family:var(--tt-mono); font-size:10px; letter-spacing:0.12em; padding:3px 9px; border-radius:99px; font-weight:600; color:var(--tt-accent); background:rgba(21,179,199,0.14); }
html.tw-tema .tt-delta:not(.tw *){ font-family:var(--tt-mono); font-size:10px; font-weight:600; white-space:nowrap; text-align:right; color:var(--tt-ink3); }
html.tw-tema .tt-delta.is-up:not(.tw *){ color:var(--tt-ok); } html.tw-tema .tt-delta.is-down:not(.tw *){ color:var(--tt-crit); }
/* punto de estado de pestaña (app.css:923-926): tonos del tower */
html.tw-tema .ct-tab-dot-ok:not(.tw *){ background:var(--tt-ok); } html.tw-tema .ct-tab-dot-warn:not(.tw *){ background:var(--tt-warn); }
/* avatar de MudBlazor fuera de la cabecera: cuadrado 26 radio 7 (= .tw-p-num, 945) */
html.tw-tema .mud-avatar:not(.tw *){ border-radius:7px; font-family:var(--tt-mono); font-size:11px; font-weight:600; }

/* ============================================================================================
   12. SEPARADORES (= .tw-hr 161 / .tw-bar-vsep 121): dentro de un panel line2, contorno line
   ============================================================================================ */
html.tw-tema .mud-divider:not(.tw *){ border-color:var(--tt-line2); }
html.tw-tema .mud-divider.mud-divider-vertical:not(.tw *){ height:20px; align-self:center; margin:0 4px; }

/* ============================================================================================
   13. PESTAÑAS (= .tw-e-fbtn--tab 538-543): botones Hanken 12,5/700 con borde, activa invertida; sin subrayado ni slider.
   app.css marcó todo con !important. contratos.css puede cambiar a segmentado mono (.tt-seg) si prefiere.
   ============================================================================================ */
html.tw-tema .mud-tabs:not(.tw *){ box-shadow:none !important; border-radius:0 !important; background:transparent; }
html.tw-tema .mud-tabs .mud-tabs-tabbar:not(.tw *){ border-bottom:0; background:transparent !important; box-shadow:none !important; min-height:0; }
/* El aire entre pestañas es el mismo que entre los filtros del tower: 8 px (.tw-bar-row, 116).
   OJO CON EL ELEMENTO: en MudBlazor 8.7 la cadena es tabbar-inner (flex) > tabbar-content (BLOCK) >
   tabbar-wrapper (flex) > tooltip-root > .mud-tab. Poner el gap solo en `content` no hacía NADA, porque ese
   div es display:block; el que reparte las pestañas de verdad es `wrapper`. Por eso las pestañas se veían
   pegadas mientras los filtros del tower respiraban. Se listan los tres: si Mud vuelve a mover el DOM, el que
   sea flex en ese momento toma el gap y los otros lo ignoran sin romper nada. */
html.tw-tema .mud-tabs .mud-tabs-tabbar-content:not(.tw *),
html.tw-tema .mud-tabs .mud-tabs-tabbar-wrapper:not(.tw *),
html.tw-tema .mud-tabs .mud-tabs-tabbar-inner:not(.tw *){ gap:8px; }
html.tw-tema .mud-tabs .mud-tab:not(.tw *){
  /* line-height: MudBlazor le pone 1.75, que a 12,5 px son 22 px de caja de línea y dejaban la pestaña en 34 px
     de alto contra los ~28 del filtro del tower. El tower no fija caja de línea en .tw-e-fbtn: usa la normal. */
  min-height:0; min-width:0 !important; padding:5px 12px !important; font-size:12.5px !important; line-height:normal !important; font-weight:700 !important; font-family:var(--tt-sans) !important;
  letter-spacing:0 !important; text-transform:none !important;
  border:1px solid var(--tt-line) !important; border-radius:7px !important; margin-bottom:0 !important; background:var(--tt-surface); color:var(--tt-ink2) !important; transition:none;
}
html.tw-tema .mud-tabs .mud-tab:not(.tw *):hover{ color:var(--tt-ink2) !important; background:var(--tt-surface); }
html.tw-tema .mud-tabs .mud-tab.mud-tab-active:not(.tw *){ border-color:var(--tt-ink) !important; background:var(--tt-ink); color:var(--tt-surface) !important; }
html.tw-tema .mud-tabs .mud-tab .ct-tab-dot:not(.tw *){ margin-left:6px; }
html.tw-tema .mud-tabs .mud-tabs-panels:not(.tw *){ padding-top:12px; }
html.tw-tema .mud-tabs .mud-tabs-scroll-button .mud-icon-button:not(.tw *){ border:1px solid var(--tt-line); border-radius:6px; padding:2px; }

/* ============================================================================================
   14. ALERTS (= .tw-e-alerta 713-721 para error; .tw-g-ahorro 450 / .tw-f-alert 372 para el resto):
   surface + hairline + barra izquierda 3 px + texto 12,5 ink2. app.css marcó radio, borde, fondo y color.
   ============================================================================================ */
html.tw-tema .mud-alert:not(.tw *){ border-radius:8px !important; padding:9px 11px; gap:9px; align-items:flex-start; background:var(--tt-surface) !important; border:1px solid var(--tt-line); border-left-width:3px !important; color:var(--tt-ink2) !important; box-shadow:none; }
html.tw-tema .mud-alert .mud-alert-message:not(.tw *){ padding:0; font-size:12.5px; line-height:1.4; text-wrap:pretty; }
html.tw-tema .mud-alert .mud-alert-icon:not(.tw *){ font-size:16px; margin-top:1px; padding:0; }
html.tw-tema .mud-alert .mud-alert-icon .mud-icon-root:not(.tw *){ font-size:16px; }
html.tw-tema .mud-alert.mud-alert-text-error:not(.tw *)  { border-left-color:var(--tt-crit) !important; background-color:rgba(199,62,48,0.08) !important; border-color:rgba(199,62,48,0.25); border-left-color:var(--tt-crit) !important; }
html.tw-tema .mud-alert.mud-alert-text-warning:not(.tw *){ border-left-color:var(--tt-warn) !important; background-color:var(--tt-surface) !important; }
html.tw-tema .mud-alert.mud-alert-text-info:not(.tw *)   { border-left-color:var(--tt-deep) !important; background-color:var(--tt-surface) !important; }
html.tw-tema .mud-alert.mud-alert-text-success:not(.tw *){ border-left-color:var(--tt-ok)   !important; background-color:var(--tt-surface) !important; }
html.tw-tema .mud-alert.mud-alert-text-error .mud-alert-icon:not(.tw *){ color:var(--tt-crit); } html.tw-tema .mud-alert.mud-alert-text-warning .mud-alert-icon:not(.tw *){ color:var(--tt-warn); }
html.tw-tema .mud-alert.mud-alert-text-info .mud-alert-icon:not(.tw *){ color:var(--tt-deep); }  html.tw-tema .mud-alert.mud-alert-text-success .mud-alert-icon:not(.tw *){ color:var(--tt-ok); }
/* alerts rellenas (Filled): burbuja oscura .tw-ia-body-user (1074) para info y éxito. Error y advertencia NO: el aviso
   relleno es el que más tiene que llamar la atención y en azul marino se perdía («NO es de hoy» de Portería, FLU-60 #478).
   Conservan el rojo y el ámbar de la paleta del tower, con texto blanco, como sin el tema. El ámbar del relleno es más
   oscuro que --tt-warn: con #B5651D el texto blanco quedaba en 4,3:1, bajo el 4,5:1 del texto chico; #A85A1A da 5,1:1.
   El rojo (--tt-crit, #C0402E) da 5,2:1. En oscuro, ver 17: los tokens se aclaran y el relleno no puede seguirlos. */
html.tw-tema .mud-alert.mud-alert-filled-info:not(.tw *), html.tw-tema .mud-alert.mud-alert-filled-success:not(.tw *){ background:var(--tt-nav) !important; color:var(--tt-navInk) !important; border-color:var(--tt-nav); }
html.tw-tema .mud-alert.mud-alert-filled-error:not(.tw *)  { background:var(--tt-crit) !important; color:#FFFFFF !important; border-color:var(--tt-crit); }
html.tw-tema .mud-alert.mud-alert-filled-warning:not(.tw *){ background:#A85A1A !important; color:#FFFFFF !important; border-color:#A85A1A; }

/* ============================================================================================
   15. CAPAS FLOTANTES: diálogo, popover/menú/lista, calendario, tooltip, snackbar, overlay.
   Viven bajo <body> (fuera de .mud-main-content y de .tw), o sea bajo html.tw-tema: no necesitan guard. No se tocan
   position/top/left/transform/z-index de .mud-popover* (los posiciona JS; app.css:10-13 cuenta el incidente del zoom).
   ============================================================================================ */
/* diálogo = .tw-panel (173) + cabecera .tw-panel-head (176) + pie; la única sombra del tower (943) porque flota */
html.tw-tema .mud-dialog{ border-radius:12px; border:1px solid var(--tt-line); box-shadow:var(--tt-sombra); animation:none; background:var(--tt-surface); }
html.tw-tema .mud-dialog-title{ padding:11px 14px; border-bottom:1px solid var(--tt-line2); }     /* el título es .mud-typography-h6 → Archivo 800 14 por variable */
html.tw-tema .mud-dialog-title .mud-typography-h6{ display:flex; align-items:center; gap:8px; }
html.tw-tema .mud-dialog-title .mud-icon-root{ font-size:15px; color:var(--tt-ink3) !important; }   /* mismo caso que la cabecera de tarjeta (§5): Mud pinta con .mud-*-text{color:… !important} */
html.tw-tema .mud-dialog-title .mud-button-close{ top:8px; right:8px; }
html.tw-tema .mud-dialog-content{ padding:14px 16px; margin:0; }
html.tw-tema .mud-dialog-actions{ padding:10px 13px; gap:6px; border-top:1px solid var(--tt-line2); }
html.tw-tema .mud-overlay-scrim{ background-color:rgba(14,42,59,0.5); }   /* se conserva el overlay de hoy */
/* popover / menú / lista desplegable = .tw-e-card (622) + ítems .tw-e-item--all (565) + activo .is-on (569) */
/* El popover es TAMBIÉN .mud-paper, y esa regla (§5) lleva el guard :not(.tw *), que suma (0,1,0) y le ganaba:
   los menús, los MudSelect, los autocomplete y el calendario quedaban SIN la sombra y con radio 12. El guard acá no
   es un escudo (nada de esto puede estar dentro de .tw: cuelga de <body>), es un igualador de peso. La sombra es la
   ÚNICA del tower (.tw-p-card:hover, 943) y es lo que separa la capa flotante de la superficie que tapa (23-09). */
html.tw-tema .mud-popover:not(.tw *){ border:1px solid var(--tt-line); border-radius:10px !important; box-shadow:var(--tt-sombra) !important; background:var(--tt-surface); transition:none; }
html.tw-tema .mud-popover .mud-list, html.tw-tema .mud-menu-list{ padding:4px; }
html.tw-tema .mud-list-item, html.tw-tema .mud-menu-item{ padding:8px 11px; border-radius:8px; font-size:13px; font-weight:600; color:var(--tt-ink2); gap:9px; transition:none; }
html.tw-tema .mud-list-item-clickable:hover, html.tw-tema .mud-menu-item:hover{ background-color:var(--tt-surface2); }
/* Mud marca .mud-selected-item{color/background:… !important}: sin repetirlo, el ítem elegido quedaba teal sobre
   tinte teal en vez del .tw-e-item.is-on (569) invertido. Mismo caso en los ítems que el razor pinta con Color= */
html.tw-tema .mud-list-item.mud-selected-item:not(.tw *){ background-color:var(--tt-ink) !important; color:var(--tt-surface) !important; font-weight:700; }
html.tw-tema .mud-list-item.mud-selected-item .mud-typography, html.tw-tema .mud-list-item.mud-selected-item .mud-icon-root{ color:inherit; }
html.tw-tema .mud-popover .mud-list-item.mud-primary-text:not(.mud-selected-item):not(.tw *){ color:var(--tt-ink2) !important; }   /* = .tw-e-item (563): los 50 resultados del autocomplete salían en deep */
html.tw-tema .mud-list-item-icon{ min-width:0; margin-right:9px; color:var(--tt-ink3); }
html.tw-tema .mud-list-item-icon .mud-icon-root, html.tw-tema .mud-menu-item .mud-icon-root{ font-size:16px; }
html.tw-tema .mud-list-item-text{ margin:0; }
html.tw-tema .mud-popover .mud-list-item-text .mud-typography{ font-size:13px; }
html.tw-tema .mud-list-subheader{ font-family:var(--tt-mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--tt-ink3); padding:4px 10px 8px; }   /* .tw-e-side-lbl (555) */
/* listas en línea (dashboard): mismo ítem, sin caja; la línea secundaria de una fila = .tw-e-prod (688), Hanken 12 ink2 */
html.tw-tema .ct-page-wrapper .mud-list-item:not(.tw *){ padding:8px 11px; }
html.tw-tema .ct-page-wrapper .mud-list-item-dense:not(.tw *){ padding-top:6px; padding-bottom:6px; }
html.tw-tema .mud-list-item .mud-typography-caption:not(.tw *){ font-family:var(--tt-sans); font-size:12px; color:var(--tt-ink2); line-height:1.4; }
/* calendario del MudDatePicker: hereda el popover; días = .tw-chip; el seleccionado = .tw-chip.is-on (130) */
html.tw-tema .mud-picker-calendar .mud-day{ font-family:var(--tt-mono); font-size:10.5px; font-weight:400; border-radius:6px !important; }
/* CONTRASTE HABILITADO vs DESHABILITADO (25-09-2026). Medido antes del arreglo: el día que SÍ se puede elegir salía
   deep (#1C7293, 5,4:1) y el que NO salía ink3 (#93A3AC, 2,6:1). Los dos son colores medios y la única diferencia
   era el TONO, sin peso ni fondo: a 10,5 px de mono, azul apagado contra gris no se distingue, y el día bloqueado
   se veía perfectamente legible, o sea no parecía bloqueado.
   Ahora la diferencia es de INTENSIDAD, que sí se ve de reojo: el día elegible usa la tinta normal del texto
   (--ink, ~13:1) y el bloqueado se apaga de verdad (ink3 al 45 %, ~1,6:1). Sirve igual en claro y en oscuro
   porque los dos tokens se redefinen en §17, y no depende de distinguir dos tonos.
   El hover vuelve: estaba anulado a `transparent` para TODOS los días, así que el calendario no respondía al
   mouse ni en los días que sí se podían tocar. Se anula solo donde corresponde (bloqueado y seleccionado). */
html.tw-tema .mud-picker-calendar .mud-day:disabled{ color:var(--tt-ink3); opacity:.45; }
html.tw-tema .mud-picker-calendar .mud-day:not(:disabled):not(.mud-selected){ color:var(--tt-ink); font-weight:500; }
html.tw-tema .mud-picker-calendar .mud-day:hover{ background-color:transparent; }
html.tw-tema .mud-picker-calendar .mud-day:not(:disabled):not(.mud-selected):hover{ background-color:var(--tt-hover); }
html.tw-tema .mud-picker-calendar .mud-day.mud-selected{ background:var(--tt-nav) !important; color:#FFFFFF !important; font-weight:600; box-shadow:none; }
html.tw-tema .mud-picker-calendar-header .mud-day-label, html.tw-tema .mud-picker-calendar-header .mud-typography{ font-family:var(--tt-mono); font-size:9.5px; letter-spacing:0.11em; text-transform:uppercase; color:var(--tt-ink3); }
/* La barra del MudDatePicker es un .mud-theme-primary, y Mud la pinta con `color/background: … !important`.
   Sin repetir ese !important, esta regla NO ganaba y la barra quedaba en el azul primario de Material; peor
   todavía, los botones de dentro (el año y la fecha elegida) los pinta §7 en --tt-deep, que ES ese mismo azul:
   texto invisible sobre su propio fondo, 1,00:1, en CLARO y en OSCURO (medido en /contracts/new, 24-09-2026).
   Se repone el gesto del tower —cabecera en la paleta de la franja— y el contenido sigue al color de la barra. */
html.tw-tema .mud-picker-toolbar:not(.tw *){ background:var(--tt-nav) !important; color:var(--tt-navInk) !important; }
html.tw-tema .mud-picker-toolbar .mud-button-root:not(.tw *){ color:var(--tt-navInk); }
html.tw-tema .mud-picker-container:not(.tw *){ border-radius:10px !important; box-shadow:none !important; }   /* mismo empate con .mud-paper: la sombra la pone el popover que lo envuelve */
/* tooltip: no hay en el tower; paleta de la franja y medidas de .tw-nav-back (91-95) */
html.tw-tema .mud-tooltip:not(.tw *){
  font-family:var(--tt-mono); font-size:10px; font-weight:400; line-height:1.5; letter-spacing:0.04em; padding:4px 9px;
  border-radius:6px !important; border:1px solid rgba(255,255,255,0.16); box-shadow:var(--tt-sombra) !important;   /* el tooltip TAMBIÉN es .mud-popover (radio 10): el radio del tower acá es 6 (.tw-nav-back, 91) */
  text-align:left; max-width:320px;                  /* frases largas en mono centrado costaban de leer (23-09) */
}
html.tw-tema .mud-tooltip.mud-tooltip-default{ background-color:var(--tt-nav); color:var(--tt-navInk); }
html.tw-tema .mud-tooltip.mud-tooltip-default.mud-tooltip-arrow::after{ border-color:var(--tt-nav) transparent transparent transparent; }
/* snackbar = burbuja oscura .tw-ia-body-user (1074) + barra izquierda 3 px por variante (.tw-g-ahorro, 450) */
html.tw-tema .mud-snackbar{ border-radius:10px; padding:10px 13px; background:var(--tt-nav); color:var(--tt-navInk); font-size:13px; line-height:1.45; box-shadow:var(--tt-sombra); border-left:3px solid transparent; }
html.tw-tema .mud-snackbar.mud-alert-filled-success{ border-left-color:var(--tt-ok); }   html.tw-tema .mud-snackbar.mud-alert-filled-error{ border-left-color:var(--tt-crit); }
html.tw-tema .mud-snackbar.mud-alert-filled-warning{ border-left-color:var(--tt-warn); } html.tw-tema .mud-snackbar.mud-alert-filled-info{ border-left-color:var(--tt-deep); }
html.tw-tema .mud-snackbar .mud-snackbar-content-message{ padding:0; }
html.tw-tema .mud-snackbar .mud-snackbar-icon .mud-icon-root{ font-size:16px; }
html.tw-tema .mud-snackbar .mud-button-root{ color:var(--tt-navInk); }

/* ============================================================================================
   16. BARRAS DE DESPLAZAMIENTO: el tower usa la NATIVA (tower.css:34-44). Mud 8.7 solo estiliza la del textarea;
   no se declara nada global (cambiaría el ancho disponible de las páginas tower). Solo se recolorea el pulgar.
   ============================================================================================ */
html.tw-tema .mud-input>textarea.mud-input-root:not(.tw *)::-webkit-scrollbar-thumb{ background:var(--tt-bar); border-radius:3px; }
/* esqueleto de carga = hairline */
html.tw-tema .mud-skeleton:not(.tw *){ background-color:var(--tt-line2); border-radius:6px; }

/* ============================================================================================
   16.1 MAPAS (Leaflet), lo que vale en LOS DOS TEMAS. El papel del mapa —lo que se ve mientras llegan las teselas,
   y para siempre si OpenStreetMap no responde— viene del `style="…background:var(--stint-ink)"` que los cuatro
   componentes de mapa escriben en línea: es el azul marino de la cáscara vieja de Stint y con el look nuevo
   desentona en los dos temas. Pasa a ser papel del tema. El !important es el único modo de alcanzar un estilo en
   línea; lo del oscuro (invertir las teselas y recolorear los controles) sigue en §17.2.
   ============================================================================================ */
html.tw-tema .leaflet-container:not(.tw *){ background:var(--tt-surface2) !important; }

/* ============================================================================================
   17. TEMA OSCURO = .tw[data-theme="dark"] (tower.css:21-27). Exige las DOS clases (html.tw-tema.tw-dark): con el
   tema apagado, tw-dark solo afecta a .tw como hoy. Se redefinen los --tt-*; las --mud-* apuntan a ellos y siguen solas.
   Desde el 24-09-2026 el oscuro ya no es solo de las páginas del tower: el botón sol/luna de la barra superior
   (MainLayout, mismo localStorage['stint.theme'] que la franja) lo prende en TODO el sistema. Lo que sigue a los
   tokens son las tres cosas que los tokens no alcanzan: la sombra de las capas flotantes (17), el atenuado del
   diálogo (17.1) y los mapas de Leaflet (17.2), que traen su color en hojas y estilos ajenos al tema.
   ============================================================================================ */
html.tw-tema.tw-dark{
  --tt-bg:#071620; --tt-surface:#0F2C3B; --tt-surface2:#0B2331; --tt-ink:#EDF3F5; --tt-ink2:#A8BCC4; --tt-ink3:#7C8D97;
  --tt-line:rgba(255,255,255,0.11); --tt-line2:rgba(255,255,255,0.06); --tt-bar:rgba(255,255,255,0.13);
  --tt-nav:#041016; --tt-navInk:#EDF3F5; --tt-navInk2:#8FA6B1;
  --tt-accent:#15B3C7; --tt-deep:#3E9BBF; --tt-ok:#3FB78C; --tt-warn:#E0913F; --tt-crit:#F0705A; --tt-coral:#FF6B5B;
  --tt-deep-rgb:62,155,191; --tt-ink2-rgb:168,188,196; --tt-hover:rgba(255,255,255,0.06);
  --mud-palette-primary-hover:rgba(28,114,147,0.1);        /* literal, igual que en claro (1112) */
  --mud-palette-dark-text:#0F2C3B;                          /* texto sobre ink invertido = --surface (.tw-e-fbtn.is-on, 541) */
  --mud-palette-success-rgb:63,183,140; --mud-palette-warning-rgb:224,145,63; --mud-palette-error-rgb:240,112,90; --mud-palette-dark-rgb:237,243,245;
  --mud-native-html-color-scheme:dark;                      /* controles nativos (fechas, select, scroll) en oscuro */
  /* La sombra del tower está calculada para papel blanco: sobre el oscuro, rgba(4,16,22,0.14) no se ve y el
     diálogo, el menú de la campana y el popover del select quedaban pegados a la superficie que tapan. Se
     redefine el MISMO token y lo heredan las cinco capas flotantes de §15 sin repetir ni un selector. */
  --tt-sombra:0 14px 34px rgba(0,0,0,0.58);
}
html.tw-tema.tw-dark .mud-input:not(.tw *){ color-scheme:dark; }
html.tw-tema.tw-dark .mud-chip.mud-chip-filled.mud-chip-color-primary:not(.ct-user-chip):not(.tw *), html.tw-tema.tw-dark .mud-chip.mud-chip-selected:not(.ct-user-chip):not(.tw *){ color:#FFFFFF !important; }   /* nav oscuro + blanco, como .tw-chip.is-on */
html.tw-tema.tw-dark .mud-list-item.mud-selected-item, html.tw-tema.tw-dark .ct-drawer .mud-nav-link.active{ color:var(--tt-surface) !important; }
/* …y su ICONO con él. En claro el ítem activo del cajón es pastilla oscura con icono teal (§4, línea 199: «como
   el punto .tw-e-dot al activarse»); en oscuro la pastilla se invierte a --tt-ink (claro) y ese mismo teal cae a
   2,26:1 — el único icono del sistema que se pierde en oscuro (verif-iconos, 24-09-2026). Sigue al texto, igual
   que ya hace el ítem de lista (línea 643, color:inherit): con toda la pastilla invertida, el color del icono ya
   no es la señal de «activo». */
html.tw-tema.tw-dark .ct-drawer .mud-nav-link.active .mud-icon-root{ color:var(--tt-surface) !important; }
html.tw-tema.tw-dark .ct-drawer .ct-stint-logo [stroke]{ stroke:var(--tt-ink); }
html.tw-tema.tw-dark .mud-tabs .mud-tab.mud-tab-active:not(.tw *){ color:var(--tt-surface) !important; }
/* El aviso relleno de error (§14) toma --tt-crit, que en oscuro se aclara a #F0705A para leerse como texto sobre el
   fondo; con texto blanco encima quedaba en 2,9:1 («NO es de hoy» de Portería). El relleno vuelve al rojo del claro,
   #C0402E: 5,2:1 con el blanco y 3,5:1 contra el fondo de la página, así que la caja se sigue viendo. El ámbar de §14 ya
   es fijo (#A85A1A, 5,1:1) y no se aclara. */
html.tw-tema.tw-dark .mud-alert.mud-alert-filled-error:not(.tw *){ background:#C0402E !important; border-color:#C0402E; }

/* 17.1 ATENUADO DEL DIÁLOGO. El scrim de §15 era PEOR que invisible en oscuro: rgba(14,42,59,0.5) es más claro
   que el fondo (#071620), o sea que «atenuar» ACLARABA la página de atrás y el diálogo perdía el foco. Acá el
   mismo gesto con el tono de la franja, que sí oscurece. Medido: 4,3:1 entre el papel del diálogo y lo atenuado. */
html.tw-tema.tw-dark .mud-overlay-scrim{ background-color:rgba(2,8,11,0.64); }

/* ============================================================================================
   17.2 MAPAS (Leaflet). Las teselas son de OpenStreetMap y no tienen versión oscura: flightMap.js y truckMap.js
   piden tile.openstreetmap.org, así que el mapa del contrato quedaba como un rectángulo blanco de 1.000×340 en
   medio de la pantalla oscura —lo más visible de todo el repaso—. Se invierte SOLO el panel de teselas: los
   marcadores, la ruta punteada y los camiones viven en otros paneles (hermanos dentro de .leaflet-map-pane, el
   filtro no se hereda) y conservan su color. hue-rotate(180) después del invert devuelve el agua al azul, y el
   grayscale a medias mata el pardo que ese mismo giro le deja a la tierra (se probaron cuatro mezclas: sin él la
   tierra sale marrón y desentona con la paleta fría del tower). Es la receta estándar para OSM sin proveedor oscuro.
   ============================================================================================ */
html.tw-tema.tw-dark .leaflet-tile-pane:not(.tw *){ filter:invert(1) hue-rotate(180deg) grayscale(0.45) brightness(0.95) contrast(0.88); }
/* El «mar» mientras cargan las teselas NO es del tema oscuro: el <div> del mapa trae `background:var(--stint-ink)`
   EN LÍNEA (ContractAirPanel:265, ContractSummaryPanel:307, FleetTracking:76, TransferTruckTrackingPanel:66), o sea
   el azul marino de Stint, y a un estilo en línea solo le gana un !important (mismo caso que el rótulo IATA de más
   abajo). Sin él, la regla de acá era letra muerta: medido 24-09-2026, el contenedor calculaba rgb(14,42,59) en los
   DOS temas. Y se ve: en dev llegan 8 de 10 teselas y queda una banda marino de ~100 px al borde del mapa —en claro,
   un rectángulo oscuro encima del mapa claro—. Por eso la regla vale para los dos temas y sube a §16.1. */
/* Los controles traen su blanco propio en leaflet.css y no los alcanza ningún token del tema. */
html.tw-tema.tw-dark .leaflet-control-attribution:not(.tw *){ background:rgba(4,16,22,0.78); color:var(--tt-ink3); }
html.tw-tema.tw-dark .leaflet-control-attribution a:not(.tw *){ color:var(--tt-ink2); }   /* era #0078A8 sobre blanco: 3,3:1 ya en claro */
html.tw-tema.tw-dark .leaflet-bar a:not(.tw *){ background:var(--tt-surface); color:var(--tt-ink); border-bottom-color:var(--tt-line); }
html.tw-tema.tw-dark .leaflet-bar a:not(.tw *):hover{ background:var(--tt-surface2); color:var(--tt-ink); }
/* Rótulo IATA del mapa de vuelo (SCL, KIX): flightMap.js lo escribe con estilo EN LÍNEA —pastilla blanca con
   texto #1e293b— y a un estilo en línea solo le gana un !important. Es el único caso de la hoja en que el
   !important no repite uno de app.css: no hay otra forma de alcanzar un style="" escrito por JS. Queda en la
   paleta del tema (12,4:1) en vez de ser un parche blanco de otro dibujo sobre el mapa ya oscuro. */
html.tw-tema.tw-dark .leaflet-marker-icon span:not(.tw *){
  background:var(--tt-surface) !important; color:var(--tt-ink) !important; box-shadow:0 1px 3px rgba(0,0,0,0.5) !important;
}

/* ============================================================================================
   18. AJUSTES DE ORDEN (revisión del 23-09-2026). Acá viven SOLO las reglas que necesitan ir al final de la hoja
   porque empatan en especificidad con un bloque anterior y tienen que ganar por orden. Si se mueven más arriba,
   vuelven los defectos que están anotados en cada una.
   ============================================================================================ */

/* 18.1 .ct-mono y .ct-num marcan «esto es un dato»: el tower pone TODO identificador y toda cifra en mono
   (.tw-e-id 685, .tw-c-td 290, .tw-num 189). El bloque de tablas (§9) declara font-family:var(--tt-sans) para la
   celda y empata (DataGrid) o gana (SimpleTable, que llega por `table * tr>td`), así que en /contracts el N° de
   contrato, las fechas y las cajas salían en Hanken mientras el N° de traslado —mono por ir en un <p> anidado—
   salía en JetBrains: dos tipografías de dato en la misma fila, y encima una REGRESIÓN (sin tema ya eran mono). */
html.tw-tema .mud-table-cell.ct-mono:not(.tw *),
html.tw-tema .mud-table-cell.ct-num:not(.tw *),
html.tw-tema .mud-simple-table table * tr > td.ct-mono:not(.tw *),
html.tw-tema .mud-simple-table table * tr > td.ct-num:not(.tw *){ font-family:var(--tt-mono); }

/* 18.2 Ficha clave/valor dentro de una tarjeta (= .tw-e-hecho-k 728 + .tw-e-hecho-v 729): la MudSimpleTable de pares
   <strong>clave</strong> | valor es una lista de hechos, no una tabla, así que pierde su marco (caja dentro de caja)
   y la clave pasa a rótulo mono. contratos.css ya lo resolvía, pero anclado a los DevSectionTag del contrato; el
   detalle de traslado no tiene ninguno (0 .ct-devtag-anchor en /transfers/{id}), así que las mismas tarjetas
   —Transporte, Choferes, Contenedor, Carga— quedaban en el dialecto Material. Acá va la versión SIN ancla: cubre
   contratos, traslados y cualquier ficha futura, y contratos.css la sigue afinando con más especificidad.
   Los dos filtros de la tabla son los que distinguen una FICHA de una tabla de datos metida en una tarjeta (que
   conserva su marco): la ficha tiene filas con un <strong> solo y NO tiene <thead>. Verificado contra las siete
   tarjetas con MudSimpleTable del sistema: las fichas (ContractSummaryPanel:402, TransferSummaryPanel:240) son
   solo <tbody>, y las tablas de datos (tramos aéreos, contratos asignados, /operaciones/variacion) traen <thead>.
   Va al final porque empata con §9 (bloque de tablas). */
html.tw-tema .mud-card > .mud-card-content > .mud-simple-table:has(tbody td > strong:only-child):not(:has(thead)):not(.tw *){
  border:0; border-radius:0 !important; background:transparent;
}
html.tw-tema .mud-card > .mud-card-content > .mud-simple-table:has(tbody td > strong:only-child):not(:has(thead)) table * tr > td:not(.tw *){ padding:7px 0; vertical-align:middle; }
html.tw-tema .mud-card > .mud-card-content > .mud-simple-table:has(tbody td > strong:only-child):not(:has(thead)) table * tr:last-child > td:not(.tw *){ border-bottom:0; }
/* clave = .tw-e-hecho-k (728): mono 9,5 / 0,13em / mayúsculas / ink3 */
html.tw-tema .mud-card > .mud-card-content > .mud-simple-table:has(tbody td > strong:only-child):not(:has(thead)) table * tr > td:not([colspan]):has(> strong:only-child):not(.tw *){ width:1%; white-space:nowrap; padding-right:14px; }
html.tw-tema .mud-card > .mud-card-content > .mud-simple-table:has(tbody td > strong:only-child):not(:has(thead)) table * tr > td:not([colspan]):has(> strong:only-child):not(.tw *) > strong{
  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): 600 en ink; el dato mono (fechas, patentes, montos) un punto más chico = .tw-e-id (685) */
html.tw-tema .mud-card > .mud-card-content > .mud-simple-table:has(tbody td > strong:only-child):not(:has(thead)) table * tr > td:not([colspan]):not(:has(> strong:only-child)):not(.tw *){ font-weight:600; color:var(--tt-ink); }
html.tw-tema .mud-card > .mud-card-content > .mud-simple-table:has(tbody td > strong:only-child):not(:has(thead)) table * tr > td .ct-mono:not(.tw *){ font-size:11.5px; font-weight:600; letter-spacing:0.02em; }

/* 18.3 Iconos de acción dentro de una fila: apagados a ink3 como todo icono del tema (§5.5 de la guía), salvo el
   destructivo, que se queda en --tt-crit porque el color ES la advertencia. Mud los pinta con
   .mud-primary-text/.mud-error-text{color:… !important}, por eso el !important. */
html.tw-tema .mud-table-cell .mud-icon-button:not(.mud-error-text) .mud-icon-root:not(.tw *){ color:var(--tt-ink3) !important; }

/* 18.4 El tower no anima nada (tower.css:7); Mud deja .mud-icon-root{transition:fill .2s} en todas las páginas. */
html.tw-tema .mud-icon-root:not(.tw *){ transition:none; }

/* 18.5 La bandera en línea traía el anillo Material rgba(0,0,0,0.12) de app.css:175: pasa a la hairline del tower.
   Era la única «sombra» real fuera de las capas flotantes. */
html.tw-tema .ct-flag:not(.tw *){ box-shadow:0 0 0 1px var(--tt-line); }


/* ============================================================================================
   19. CARTEL DE RECONEXIÓN (#components-reconnect-modal). Es el diálogo que Blazor levanta cuando se
   corta el circuito. Su hoja es de ámbito (ReconnectModal.razor.css → `#id[b-xxxx]`, 1,1,0) y trae
   `background-color:white` fijo: con el look nuevo quedaba fuera de tono y en oscuro, ilegible
   (reporte de Nicolás, 24-09-2026). Acá se repinta con los tokens del tema; `html.tw-tema #id` es
   (1,1,1) y le gana al ámbito sin !important. Solo color y forma: NADA de display, porque las reglas
   de estado de esa hoja (qué mensaje se ve en cada intento) son las que mandan y no se tocan.
   ============================================================================================ */
html.tw-tema #components-reconnect-modal{
  background-color:var(--tt-surface); color:var(--tt-ink);
  border:1px solid var(--tt-line); border-radius:12px;            /* = .tw-panel (152) */
  box-shadow:var(--tt-sombra);                                    /* la única sombra del tower, reservada a capas flotantes */
  font-family:var(--tt-sans); font-size:13px; line-height:1.5;
}
html.tw-tema #components-reconnect-modal p{ color:var(--tt-ink2); }
html.tw-tema #components-reconnect-modal::backdrop{ background-color:rgba(4,16,22,0.55); }
/* los dos botones (Reintentar / Reanudar) = botón coral del tower (.tw-ia-send, 1043) */
html.tw-tema #components-reconnect-modal button{
  font-family:var(--tt-mono); font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  background:var(--tt-coral); color:#FFFFFF; border:0; border-radius:9px; padding:10px 16px; cursor:pointer;
}
/* la animación de puntos del tower es cyan sobre el fondo del panel */
html.tw-tema #components-reconnect-modal .components-rejoining-animation > div{ border-color:var(--tt-accent); }