/* =====================================================================================================
   tema-tower/maestros.css — «look del tower» (#478) para el ÁREA MAESTROS Y ADMIN:
   `/masters/*` (20 listas + sus diálogos «Nuevo/Editar»), `/admin/usuarios`, `/admin/permisos`,
   `/admin/roles`, `/admin/feedback`, `/admin/notificaciones` y `/cuenta/preferencias`.
   Se carga DESPUÉS de base.css (App.razor, solo dev; orden: base → inicio → contratos → traslados → maestros).

   Reglas: todo bajo html.tw-tema; solo selectores de clase o de atributo (nunca un elemento pelado como
   sujeto sin un ancestro de clase); guard :not(.tw *) en lo que pueda matchear dentro del área de
   contenido; valores tomados de tower.css citando la clase que imitan y su línea; !important SOLO donde
   MudBlazor (utilidades pa-N/mb-N, .mud-input-label-outlined, .mud-select-input) o app.css (radios,
   sombras, cabecera de tabla, chips, botones filled, .mud-alert, .ct-readonly) ya lo marcaron.
   Contexto: /root/tower-parity/identico/CONTEXTO-TEMA.md · guía: tema/guia-tower.md · base: tema/base.md.

   ANCLAS (cómo se acota cada regla sin tocar un solo .razor). Ninguna página de maestros/admin tiene
   DevSectionTag en el cuerpo (solo los diálogos), así que las anclas son ESTRUCTURALES y cada una se
   eligió porque describe la pieza, no una casualidad del marcado:

     · LISTA  = `.mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid)`
                «papel cuyo hijo directo es el buscador seguido de la grilla». Es la forma EXACTA de las
                20 listas de /masters/* y de /admin/usuarios (verificado con tema/maestros/sonda.js).
                /contracts y /transfers NO entran: ahí la búsqueda va envuelta en un `.d-flex` junto al
                menú de columnas, así que el `+` no se cumple (y esas dos ya las resolvieron
                contratos.css §1 y traslados.css §1 con el mismo vocabulario: la lista es UNA tarjeta).
     · PERMISOS = `.ct-perm` y sus clases (`.ct-perm-groups`, `.ct-perm-group-client/-cross`,
                `.ct-perm-module`, `.ct-perm-divider`), definidas en el <style> de Permissions.razor:215-223.
                Ese <style> va DESPUÉS de las hojas enlazadas, así que acá se gana por especificidad
                (html.tw-tema + la misma clase), nunca por orden.
     · ROLES  = `.mud-paper.pa-2:has(> .mud-table.mud-sm-table)` (RoleLabelsAdmin: paper outlined pa-2 con
                una MudTable densa; es el único paper pa-2 con MudTable del sistema).
     · FEEDBACK = `.mud-paper.pa-4 > .d-flex.flex-wrap.mb-3:has(> .mud-button-outlined-primary.mud-button-outlined-size-small)`
                (la barra de filtros «Abiertos / Cerrados / Todos» de FeedbackList: MudStack Row Wrap con
                Class="mb-3" como primer hijo del papel; se le exige que tenga al menos un botón outlined
                chico, o sea que sea un GRUPO de filtro y no una barra con un botón de acción suelto) y
                `.mud-paper.pa-4 > .d-flex.flex-column > .mud-card.mud-paper-outlined` para las tarjetas.
     · NOTIF  = `.mud-paper > .d-flex.mt-2.mb-1` (la cabecera «tipo de aviso + Suscribir por rol» que
                NotificationSubscriptions repite por cada tipo) y la página completa vía :has() de eso.
     · PREFERENCIAS = `.mud-container` (Preferences.razor es el ÚNICO MudContainer del sistema).
     · COLUMNAS = `.mud-table-cell[data-label="<título de la columna>"]`. MudDataGrid escribe ese atributo
                en cada <td>: es el ancla estable para tocar UNA columna (Roles, Autenticación, Modo, Tipo,
                Nombre) sin tocar el .razor ni inventar un :nth-child.
     · DIÁLOGOS = `.mud-dialog:has(.ct-devtag-anchor[data-testid="dialogo.usuario.dialogo"])` y el de
                `dialogo.importar_matriz.dialogo`, por su código exacto: el prefijo `dialogo.` suelto
                también lo usan los diálogos de contratos y traslados y no hay que pisarlos.

   Variables --stint-* que el marcado usa INLINE o en su <style> (bordes y fondos de la matriz de
   permisos, borde del panel de preferencias): no se pueden pisar sin un !important nuevo, así que se
   REDEFINE la variable en un ancestro acotado con el token del tower. Misma técnica de contratos.css
   y traslados.css.
   ===================================================================================================== */


/* ============================================================================================
   1. LISTA DE MAESTRO / ADMIN — en el tower una lista es UNA tarjeta (.tw-e-card, 622): barra de
   herramientas (.tw-e-tbar, 654) + cabecera surface2 (.tw-e-thead, 671) + filas (.tw-e-row, 678) +
   paginación al pie (.tw-e-pag, 747). Hoy son tres marcos: papel con relleno 16, grilla con su propio
   borde y radio, y paginador adentro. Se funden en uno, igual que /contracts y /transfers.
   ============================================================================================ */
/* 1.1 el papel ES la tarjeta: sin relleno (pa-4 de Mud es !important), radio 10, recorte de las esquinas */
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid):not(.tw *){
  padding:0 !important; border-radius:10px !important; overflow:hidden;
}
/* 1.2 el control del buscador pasa a ser la barra de herramientas = .tw-e-tbar (654): 8×13 y hairline abajo */
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid) > .mud-input-control:not(.tw *){
  padding:8px 13px; margin:0 !important; border-bottom:1px solid var(--tt-line2);
}
/* la caja del buscador no se estira de lado a lado (el tower nunca lo hace) = .tw-e-search (655) */
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid) > .mud-input-control > .mud-input-control-input-container:not(.tw *){
  max-width:360px;
}
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid) > .mud-input-control .mud-input:not(.tw *){
  font-family:var(--tt-mono); font-size:11px; line-height:normal;
}
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid) > .mud-input-control .mud-input-root:not(.tw *){
  padding-top:5px; padding-bottom:5px;
}
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid) > .mud-input-control .mud-input-adornment .mud-icon-root:not(.tw *){
  font-size:15px;
}
/* 1.2.b algunas listas traen, antes del buscador, una bajada o un aviso (LocalChargeServices,
   ClaimReasons, DocumentTypes…). Con el papel sin relleno quedaban pegados al borde: se les da el
   mismo margen lateral de la barra (= .tw-e-tbar, 654) y aire arriba (= .tw-panel-head, 176). */
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid) > .mud-typography:not(.tw *),
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid) > .mud-alert:not(.tw *){ margin-left:13px; margin-right:13px; }
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid) > .mud-typography:not(.tw *){ padding-top:11px; font-size:12.5px; line-height:1.5; color:var(--tt-ink2); max-width:760px; }
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid) > .mud-alert:not(.tw *){ margin-top:11px; }

/* 1.3 la grilla pierde su marco propio: el marco es el papel (= .tw-e-card, 622) */
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid) > .mud-table.mud-data-grid:not(.tw *){
  border:0; border-radius:0 !important; background:transparent;
}
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid) .mud-table-container:not(.tw *){
  border-radius:0 !important;
}
/* 1.4 fila = .tw-e-row (678): 10×13 y alineación vertical al medio (hay celdas con chip y celdas con texto) */
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid) .mud-table-body .mud-table-cell:not(.tw *){
  vertical-align:middle;
}
/* 1.5 columna de acciones (lápiz / historial): iconos chicos y pegados = §5.5 de la guía (14-18 px) */
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid) .mud-table-body .mud-icon-button:not(.tw *){
  padding:3px;
}
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid) .mud-table-body .mud-icon-button .mud-icon-root:not(.tw *){
  font-size:15px;
}
/* 1.6 banderas de país en celda (span.fi de flag-icons + .ct-flag): al tamaño del texto de fila (12,5) */
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid) .mud-table-cell .fi:not(.tw *){
  font-size:11px; vertical-align:-1px;
}
/* 1.7 chips dentro de una celda. MudDataGrid pone `data-label="<título de columna>"` en cada celda:
   es el ancla estable para las dos columnas de /admin/usuarios que apilan chips (Roles y Autenticación).
   El tower no apila chips grandes en una celda: usa TAGS (.tw-e-grp, 686: mono 9,5 600 0,06em mayúsculas,
   2×6, radio 4, fondo --bar, ink2). Así las tres familias de hoy (Material sólido, hairline y pill
   tintada) quedan iguales y la fila baja de 93 px a ~60. El chip suelto de «Estado» conserva su pill. */
html.tw-tema .mud-table-cell[data-label="Roles"] .mud-chip:not(.tw *),
html.tw-tema .mud-table-cell[data-label="Autenticación"] .mud-chip:not(.tw *){
  font-family:var(--tt-mono) !important; font-size:9.5px !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;
  height:auto; margin:0;
}
/* el color del rol sobrevive como PUNTO (= .tw-e-dot, 573: 7×7, radio 2), no como fondo saturado.
   Los que app.css ya pinta con punto (success/error/warning/info) lo traen; a los Material sólidos
   (primary, dark, tertiary) se les agrega acá con la misma medida. */
html.tw-tema .mud-table-cell[data-label="Roles"] .mud-chip::before,
html.tw-tema .mud-table-cell[data-label="Autenticación"] .mud-chip::before{
  width:5px; height:5px; border-radius:2px; margin-right:5px;
}
html.tw-tema .mud-table-cell[data-label="Roles"] .mud-chip.mud-chip-color-primary::before,
html.tw-tema .mud-table-cell[data-label="Roles"] .mud-chip.mud-chip-color-dark::before{
  content:""; display:inline-block; background:var(--tt-ink); vertical-align:1px;
}
html.tw-tema .mud-table-cell[data-label="Roles"] .mud-chip.mud-chip-color-tertiary::before{
  content:""; display:inline-block; background:var(--tt-accent); vertical-align:1px;
}
/* los iconos no caben en un tag de 9,5 px y el tower no los usa (§5.5 de la guía) */
html.tw-tema .mud-table-cell[data-label="Roles"] .mud-chip .mud-icon-root:not(.tw *),
html.tw-tema .mud-table-cell[data-label="Autenticación"] .mud-chip .mud-icon-root:not(.tw *){ display:none; }
html.tw-tema .mud-table-cell[data-label="Roles"] .d-flex:not(.tw *),
html.tw-tema .mud-table-cell[data-label="Autenticación"] .d-flex:not(.tw *){ gap:4px; }

/* la columna «Nombre» de /admin/usuarios parte los nombres cortos en dos líneas y estira la fila; se
   acota a esa grilla pidiendo que la celda siguiente sea la de «Email» (las otras listas no la tienen) */
html.tw-tema .mud-table-cell[data-label="Nombre"]:has(+ .mud-table-cell[data-label="Email"]):not(.tw *){ white-space:nowrap; }

/* los chips de MODO y TIPO (aéreo / marítimo) son en el tower un tag tintado: .tw-tag--aereo (194,
   deep sobre rgba(28,114,147,0.12)) y .tw-tag--mar (195, accent sobre rgba(21,179,199,0.14)). Mud los
   trae como Color.Info (aéreo) y Color.Primary (marítimo), relleno o outlined según la página: se
   unifican los cuatro casos. Tamaño 9,5 como los tags de rol, no 8,5, porque van en una fila de lista. */
html.tw-tema .mud-table-cell[data-label="Modo"] .mud-chip:not(.tw *),
html.tw-tema .mud-table-cell[data-label="Tipo"] .mud-chip:not(.tw *){
  font-family:var(--tt-mono) !important; font-size:9.5px !important; font-weight:600 !important;
  letter-spacing:0.08em; text-transform:uppercase; padding:2px 6px; border:0;
  border-radius:4px !important; height:auto; margin:0;
  background-color:var(--tt-bar) !important; color:var(--tt-ink2) !important;
}
html.tw-tema .mud-table-cell[data-label="Modo"] .mud-chip.mud-chip-color-info:not(.tw *),
html.tw-tema .mud-table-cell[data-label="Tipo"] .mud-chip.mud-chip-color-info:not(.tw *){
  background-color:rgba(28,114,147,0.12) !important; color:var(--tt-deep) !important;
}
/* marítimo: el tower pinta el texto en --accent sobre ese mismo tinte (.tw-tag--mar, 195), pero ahí es
   un tag decorativo de 8,5 px; acá es el DATO de la fila y #15B3C7 sobre el tinte da 2,2:1. Se conserva
   el tinte (que es lo que codifica el modo) y el texto va en --ink (13:1). */
html.tw-tema .mud-table-cell[data-label="Modo"] .mud-chip.mud-chip-color-primary:not(.tw *),
html.tw-tema .mud-table-cell[data-label="Tipo"] .mud-chip.mud-chip-color-primary:not(.tw *){
  background-color:rgba(21,179,199,0.14) !important; color:var(--tt-ink) !important;
}
html.tw-tema .mud-table-cell[data-label="Modo"] .mud-chip .mud-icon-root:not(.tw *),
html.tw-tema .mud-table-cell[data-label="Tipo"] .mud-chip .mud-icon-root:not(.tw *){ display:none; }
html.tw-tema .mud-table-cell[data-label="Modo"] .mud-chip::before,
html.tw-tema .mud-table-cell[data-label="Tipo"] .mud-chip::before{ display:none; }

/* 1.8 los chips traen `margin:4px` de MudBlazor: en una fila de 36 px eso son 8 px de más por celda
   (= .tw-e-row, 678, es 10×13 y nada más). Se anulan dentro de la grilla. */
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid) .mud-table-cell .mud-chip:not(.tw *){ margin:0; }
html.tw-tema .mud-paper:has(> .mud-input-control + .mud-table.mud-data-grid) .mud-table-cell .mud-chip-container:not(.tw *){ display:inline-flex; }


/* ============================================================================================
   2. MATRIZ DE PERMISOS (/admin/permisos, .ct-perm) — la pieza más «Material» del sistema: cabecera de
   dos filas en tinta, tintes azul/naranjo de Material y una columna que se cortaba por la derecha.
   Se lleva al vocabulario del tower: cabecera clara mono (.tw-e-th, 672), banda de módulo con rótulo
   mono (.tw-e-side-lbl, 555), tintes accent/warn del tower (§1.3 de la guía) y celdas compactas para
   que las 14 columnas entren sin desplazamiento horizontal a 1480 px.
   ============================================================================================ */
/* 2.1 las hairlines del <style> del razor vienen de var(--stint-border): se redefine la variable en el
   contenedor (no se puede pisar `border-left` sin un !important nuevo). Igual el fondo de la banda. */
html.tw-tema .ct-perm:not(.tw *){ --stint-border:var(--tt-line2); --stint-base:var(--tt-surface2); }
/* 2.2 la tabla ocupa el ancho disponible y reparte: la acción manda, los roles se aprietan */
html.tw-tema .ct-perm .mud-table:not(.tw *){ border:1px solid var(--tt-line); border-radius:10px !important; overflow:hidden; }
html.tw-tema .ct-perm .mud-table-container:not(.tw *){ border-radius:0 !important; }
html.tw-tema .ct-perm table:not(.tw *){ width:100%; table-layout:auto; }
/* 2.3 cabecera de roles = .tw-e-th (672) pero centrada y en DOS líneas si hace falta: el nowrap del
   <style> (línea 216) era lo que empujaba «Terminal de carga» fuera del papel */
html.tw-tema .ct-perm .mud-table-dense tr th:not(.tw *){
  white-space:normal; text-align:center; vertical-align:bottom;
  font-size:9px !important; letter-spacing:0.06em; line-height:1.25; padding:7px 5px;
}
html.tw-tema .ct-perm .mud-table-dense tr th:first-child:not(.tw *){ text-align:left; padding-left:13px; width:32%; }
html.tw-tema .ct-perm .mud-table-dense tr.ct-perm-groups th:not(.ct-perm-group-client):not(.ct-perm-group-cross):not(.tw *){
  font-size:9px !important; letter-spacing:0.12em; padding:5px 8px; color:var(--tt-ink3) !important;
}
html.tw-tema .ct-perm .mud-table-dense tr.ct-perm-groups th.ct-perm-group-client:not(.tw *),
html.tw-tema .ct-perm .mud-table-dense tr.ct-perm-groups th.ct-perm-group-cross:not(.tw *){ font-size:9px !important; letter-spacing:0.12em; padding:5px 8px; }
/* los dos rótulos con tinte quedan fuera del ink3 de arriba: son la referencia para leer 14 columnas de casillas y a
   9 px sobre su propio tinte daban 2,2-2,4:1. Con el color del tinte (deep y warn, que ya se usan ahí) pasan de 4,5:1
   y siguen siendo el mismo rótulo mono del tower. El ink3 de la guía §1.1 es para rótulos mono ≥ 9,5 px (23-09). */
/* tintes de grupo = §1.3 de la guía: accent 7 % (.tw-ia-current, 1097) y warn 12 % (.tw-p-tag--warn, 953).
   El fondo de th lo marcó app.css con !important (y base lo repite), así que acá también va !important. */
html.tw-tema .ct-perm .ct-perm-group-client:not(.tw *){ background:rgba(21,179,199,0.07) !important; color:var(--tt-deep) !important; }
html.tw-tema .ct-perm .ct-perm-group-cross:not(.tw *){ background:rgba(181,101,29,0.12) !important; color:var(--tt-warn) !important; }
/* 2.4 banda de módulo = rótulo de sección del tower (.tw-e-side-lbl, 555): mono 9,5 0,16em mayúsculas */
html.tw-tema .ct-perm .mud-table-dense tr.ct-perm-module td:not(.tw *){
  background:var(--tt-surface2); font-family:var(--tt-mono); font-size:9.5px; font-weight:400;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--tt-ink3); padding:7px 13px;
  border-bottom:1px solid var(--tt-line2);
}
/* 2.5 celdas: el nombre del permiso Hanken 12,5 (= .tw-e-name, 690) y el código mono 9,5 ink3 (= .tw-e-sub, 691) */
html.tw-tema .ct-perm .mud-table-dense tr td:not(.tw *){ padding:4px 5px; }
html.tw-tema .ct-perm .mud-table-dense tr td:first-child:not(.tw *){ padding:6px 13px; line-height:1.3; }
html.tw-tema .ct-perm tr td:first-child .mud-typography-caption:not(.tw *){
  font-size:9.5px; letter-spacing:0.02em; color:var(--tt-ink3) !important; display:block; margin-top:1px;
}
/* 2.6 casillas: 16 px y sin relleno, para que la columna sea del ancho del rótulo (= .tw-ia-box, 1036) */
html.tw-tema .ct-perm .mud-checkbox:not(.tw *){ margin:0; }
html.tw-tema .ct-perm .mud-checkbox .mud-button-root:not(.tw *){ padding:2px; }
html.tw-tema .ct-perm .mud-checkbox .mud-icon-root:not(.tw *){ font-size:16px; }
/* 2.7 el párrafo explicativo es texto corrido: en el tower eso es Hanken 12,5 ink2 (.tw-c-resumen, 217),
   no una nota mono (base deja caption = .tw-note10, 155, pensada para notas cortas) */
html.tw-tema .ct-page-wrapper:has(.ct-perm) .mud-typography-caption.d-block:not(.tw *){
  font-family:var(--tt-sans); font-size:12.5px; line-height:1.5; letter-spacing:normal; color:var(--tt-ink2) !important; text-wrap:pretty;
}
html.tw-tema .ct-page-wrapper:has(.ct-perm) .mud-typography-caption.d-block strong:not(.tw *){ font-weight:700; color:var(--tt-ink); }
/* 2.8 «Nota de la versión»: campo ancho pero no gigante, y el historial al pie como panel plano */
html.tw-tema .ct-page-wrapper:has(.ct-perm) .mud-expansion-panels:not(.tw *){ box-shadow:none !important; }


/* ============================================================================================
   3. /admin/roles (RoleLabelsAdmin) — paper outlined pa-2 + MudTable densa: dos marcos concéntricos y
   una fila de 65 px por un campo de 40. Se funde en una tarjeta (.tw-e-card, 622) con filas densas
   (.tw-trow, 274: 8×14) y el campo al ancho del dato.
   ============================================================================================ */
html.tw-tema .mud-paper.pa-2:has(> .mud-table.mud-sm-table):not(.tw *){
  padding:0 !important; border-radius:10px !important; overflow:hidden;
}
html.tw-tema .mud-paper.pa-2:has(> .mud-table.mud-sm-table) > .mud-table:not(.tw *){
  border:0; border-radius:0 !important; background:transparent;
}
/* el campo editable = .tw-e-search (655): 320 px, mono 11, alto de una fila */
html.tw-tema .mud-paper.pa-2:has(> .mud-table.mud-sm-table) .mud-table-cell .mud-input-control:not(.tw *){ max-width:320px; }
html.tw-tema .mud-paper.pa-2:has(> .mud-table.mud-sm-table) .mud-table-cell .mud-input:not(.tw *){ font-size:12.5px; }
html.tw-tema .mud-paper.pa-2:has(> .mud-table.mud-sm-table) .mud-table-cell .mud-input-root:not(.tw *){ padding-top:4px; padding-bottom:4px; }
/* «Guardar» por fila no es LA acción de la página: pasa de coral relleno a ink relleno (= .tw-ia-refresh,
   1113: pequeño relleno con el color de la franja). El coral queda solo para el botón del encabezado. */
/* Solo habilitado (#527, #416): deshabilitado queda el gris de base.css, no el ink. */
html.tw-tema .mud-paper.pa-2:has(> .mud-table.mud-sm-table) .mud-table-cell .mud-button-filled-primary:not(:disabled):not(.tw *){
  background-color:var(--tt-nav) !important; border-color:var(--tt-nav);
}
/* «Restablecer» = .tw-e-clear (534): mono 10 0,12em mayúsculas. En ink2, NO en ink3: es un control
   pulsable y el ink3 sobre blanco da 2,6:1 (la guía lo reserva para rótulos y notas). */
html.tw-tema .mud-paper.pa-2:has(> .mud-table.mud-sm-table) .mud-table-cell .mud-button-text:not(.tw *){
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--tt-ink2);
}


/* ============================================================================================
   4. /admin/feedback (FeedbackList) — barra de filtros y tarjetas de reporte.
   ============================================================================================ */
/* 4.1 barra de filtros = .tw-e-tbar (654) + botones de filtro .tw-e-fbtn (538) / .is-on (541): el activo
   es INK (invertido), no coral: el coral del tower es la acción primaria («Enviar», «Guardar»), no un filtro */
html.tw-tema .mud-paper.pa-4 > .d-flex.flex-wrap.mb-3:has(> .mud-button-outlined-primary.mud-button-outlined-size-small):not(.tw *){ gap:6px; }
html.tw-tema .mud-paper.pa-4 > .d-flex.flex-wrap.mb-3:has(> .mud-button-outlined-primary.mud-button-outlined-size-small) > .mud-button-filled-primary.mud-button-filled-size-small:not(.tw *){
  background-color:var(--tt-ink) !important; border:1px solid var(--tt-ink); color:var(--tt-surface) !important;
  font-family:var(--tt-sans); font-size:12px; font-weight:700 !important; padding:4px 11px; border-radius:7px !important;
}
html.tw-tema .mud-paper.pa-4 > .d-flex.flex-wrap.mb-3:has(> .mud-button-outlined-primary.mud-button-outlined-size-small) > .mud-button-outlined-primary.mud-button-outlined-size-small:not(.tw *){
  font-family:var(--tt-sans); font-size:12px; font-weight:700 !important; padding:4px 11px; border-radius:7px !important;
  color:var(--tt-ink2); background:var(--tt-surface);
}
/* 4.2 tarjeta de reporte = .tw-f-tile (336): superficie 2 con hairline suave, para que se despegue del papel */
html.tw-tema .mud-paper.pa-4 > .d-flex.flex-column > .mud-card.mud-paper-outlined:not(.tw *){
  background:var(--tt-surface2); border:1px solid var(--tt-line2); border-radius:9px !important;
}
html.tw-tema .mud-paper.pa-4 > .d-flex.flex-column > .mud-card.mud-paper-outlined > .mud-card-content:not(.tw *){ padding:11px 13px; }
/* el user-agent y la URL son notas, no datos: mono 9,5 ink3 (= .tw-note95, 156) */
html.tw-tema .mud-paper.pa-4 > .d-flex.flex-column > .mud-card .ct-mono:not(.tw *){ font-size:10px; color:var(--tt-ink3); }


/* ============================================================================================
   5. /admin/notificaciones (NotificationSubscriptions) — cabecera por tipo de aviso + tabla de personas.
   ============================================================================================ */
/* 5.1 cabecera del tipo = .tw-panel-head (176): título Archivo y descripción Hanken (hoy la descripción
   es un caption y salía en mono a ancho completo, ilegible) */
html.tw-tema .mud-paper > .d-flex.mt-2.mb-1 .mud-typography-caption:not(.tw *),
html.tw-tema .ct-page-wrapper:has(> .mud-paper > .d-flex.mt-2.mb-1) .mud-typography-caption.d-block:not(.tw *){
  font-family:var(--tt-sans); font-size:12.5px; line-height:1.5; letter-spacing:normal; color:var(--tt-ink2) !important; text-wrap:pretty;
}
/* «Suscribir por rol…» no debe partirse en dos líneas (= .tw-e-clear, 534: nowrap) */
html.tw-tema .mud-paper > .d-flex.mt-2.mb-1 > .mud-button-root:not(.tw *){ white-space:nowrap; flex:none; }
/* 5.2 el nombre del tipo = .tw-e-dest (689): Hanken 12,5 700 */
html.tw-tema .ct-page-wrapper:has(> .mud-paper > .d-flex.mt-2.mb-1) .mud-typography-subtitle2:not(.tw *){
  font-size:12.5px; font-weight:700;
}
/* 5.3 los códigos de permiso/estado embebidos siguen en mono, pero como tag (= .tw-e-grp, 686) */
html.tw-tema .ct-page-wrapper:has(> .mud-paper > .d-flex.mt-2.mb-1) .mud-typography-caption .ct-mono:not(.tw *){
  font-family:var(--tt-mono); font-size:10px; color:var(--tt-ink3);
}


/* ============================================================================================
   5 bis. AVISOS (#530): /admin/notificaciones («Por rol», «Por persona», «WhatsApp de la empresa»), «Mis avisos» y la
   ficha del usuario. La maqueta (casillas lado a lado, conteo en una línea, columna fija en el celular) está en app.css
   y vale con el tema apagado; acá solo la letra del tower. Las anclas son las clases ct-avisos-* del propio marcado.
   (Las reglas del §5 son del marcado anterior a #529, que ya no existe en esa página.)
   ============================================================================================ */
/* notas y conteos = .tw-e-prod (688): Hanken 12 ink2. Antes eran captions → mono 10 ink3 (.tw-note10), ilegibles como frase */
html.tw-tema .ct-avisos-nota:not(.tw *){ font-family:var(--tt-sans); font-size:12px; line-height:1.45; letter-spacing:normal; color:var(--tt-ink2); }
/* nombre del aviso / de la persona = .tw-e-dest (689): Hanken 12,5 700 ink */
html.tw-tema .ct-avisos-nombre:not(.tw *){ font-family:var(--tt-sans); font-size:12.5px; font-weight:700; color:var(--tt-ink); }
/* leyenda de los íconos: rótulo Hanken 12,5 600 ink, ícono 16 */
html.tw-tema .ct-avisos-leyenda-item:not(.tw *){ font-family:var(--tt-sans); font-size:12.5px; font-weight:600; color:var(--tt-ink); }
html.tw-tema .ct-avisos-leyenda-item .mud-icon-root:not(.tw *){ font-size:16px; }
/* columna fija: fondo de la tarjeta (la cabecera ya trae el suyo, surface2, con !important); el borde, solo donde la
   tabla puede desplazarse (app.css) y en la hairline del tower */
html.tw-tema .ct-avisos-fija td.ct-avisos-col-aviso:not(.tw *){ background-color:var(--tt-surface); }
@media (max-width: 960px){
  html.tw-tema .ct-avisos-fija .ct-avisos-col-aviso:not(.tw *){ box-shadow:inset -1px 0 0 var(--tt-line2); }
}
/* revisión de #530 — la casilla editable sin marcar en tinta 2: la regla de casillas (base.css §8, ink3) pinta igual la
   editable y la deshabilitada. Marcada = deep/verde de Mud (!important); no editable = ink3 (y tenue sin marcar, app.css). */
html.tw-tema .ct-aviso-canal .mud-checkbox:not(.mud-disabled) .mud-button-root:not(.tw *){ color:var(--tt-ink2); }
/* «Por persona»: la casilla a ras del rótulo CAMPANITA (el relleno del botón aquí es 6 px, base.css §8) */
html.tw-tema .ct-avisos-personas .ct-aviso-canal:not(.tw *){ margin-left:-6px; }
/* Pestañas en el celular: el aire de 8 px entre ellas (base.css §13) no entra en la cuenta con que Mud decide si
   muestra las flechas de desplazamiento, así que «WhatsApp de la empresa» quedaba cortada en el borde, sin flechas.
   Aquí se parten en dos líneas. */
@media (max-width: 600px){
  html.tw-tema .ct-avisos-pestanas .mud-tabs-tabbar-wrapper:not(.tw *){ flex-wrap:wrap; width:auto; }
}


/* ============================================================================================
   6. /cuenta/preferencias — único MudContainer del sistema.
   ============================================================================================ */
/* 6.1 el panel trae `border:1px solid var(--stint-border)` INLINE: se redefine la variable (pisar la
   propiedad exigiría un !important nuevo). El radio ya lo fija base con el !important de app.css. */
html.tw-tema .mud-container > .mud-paper:not(.tw *){ --stint-border:var(--tt-line); --stint-radius-lg:12px; }
/* 6.2 título del panel = .tw-h14 (147): Archivo 800 14, con hairline abajo como .tw-panel-head (176) */
html.tw-tema .mud-container > .mud-paper > .mud-typography-subtitle1:not(.tw *){
  font-family:var(--tt-display); font-weight:800; font-size:14px; line-height:normal;
  padding-bottom:9px; border-bottom:1px solid var(--tt-line2);
}
/* 6.3 el nombre de la preferencia = .tw-e-hecho-v (729) y su explicación = .tw-c-resumen (217) */
html.tw-tema .mud-container .mud-typography-body1:not(.tw *){ font-size:13px; font-weight:600; }
html.tw-tema .mud-container .mud-typography-caption:not(.tw *){
  font-family:var(--tt-sans); font-size:12.5px; line-height:1.5; letter-spacing:normal; color:var(--tt-ink2) !important; display:block; margin-top:2px; text-wrap:pretty;
}


/* ============================================================================================
   7. DIÁLOGOS «Nuevo / Editar» de maestros y admin. base.css ya les dio el panel plano, la cabecera con
   hairline, el pie y la caja hairline de los campos subrayados. Acá solo el ritmo vertical y los
   bloques propios del diálogo de usuario y del de importar matriz. Se acotan por su DevSectionTag
   (`dialogo.usuario.dialogo` / `dialogo.importar_matriz.dialogo`), para no rozar los diálogos de
   contratos ni de traslados, que también usan el prefijo `dialogo.`.
   ============================================================================================ */
/* 7.1 textos de ayuda del diálogo (Class="d-block") = .tw-c-resumen (217): Hanken 12,5 ink2 */
html.tw-tema .mud-dialog:has(.ct-devtag-anchor[data-testid="dialogo.usuario.dialogo"]) .mud-typography-caption.d-block,
html.tw-tema .mud-dialog:has(.ct-devtag-anchor[data-testid="dialogo.importar_matriz.dialogo"]) .mud-typography-caption.d-block{
  font-family:var(--tt-sans); font-size:12.5px; line-height:1.5; letter-spacing:normal; color:var(--tt-ink2) !important; text-wrap:pretty;
}
/* 7.2 tarjetas de método de acceso (Local / Google / Microsoft) = .tw-f-tile (336) */
html.tw-tema .mud-dialog:has(.ct-devtag-anchor[data-testid="dialogo.usuario.dialogo"]) .mud-paper.mud-paper-outlined.pa-3{
  background:var(--tt-surface2); border:1px solid var(--tt-line2); border-radius:9px !important; padding:10px 11px !important;
}
html.tw-tema .mud-dialog:has(.ct-devtag-anchor[data-testid="dialogo.usuario.dialogo"]) .mud-paper.mud-paper-outlined.pa-3 .mud-typography-caption{
  font-family:var(--tt-sans); font-size:11.5px; color:var(--tt-ink3) !important;   /* .tw-e-kpi-note (612) */
}
/* 7.3 rótulos de sección del diálogo («Métodos de inicio de sesión», «Roles», «Empresa(s)…»,
   «Bodegas…») = ceja del tower (.tw-eb-10-14, 153: mono 10, 0,14em, mayúsculas, ink3), con hairline
   abajo como .tw-panel-head (176). En el diálogo son los únicos subtitle2. */
html.tw-tema .mud-dialog:has(.ct-devtag-anchor[data-testid="dialogo.usuario.dialogo"]) .mud-typography-subtitle2{
  font-family:var(--tt-mono); font-size:10px; font-weight:400; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--tt-ink3); line-height:normal; padding-bottom:6px; border-bottom:1px solid var(--tt-line2); display:block;
}
html.tw-tema .mud-dialog:has(.ct-devtag-anchor[data-testid="dialogo.usuario.dialogo"]) .mud-typography-subtitle2 .mud-icon-root{
  font-size:13px !important; color:var(--tt-ink3);
}