/* Fuentes Stint (Amplab) cargadas en App.razor (head): Archivo / Hanken Grotesk / JetBrains Mono. */

html, body {
    font-family: "Hanken Grotesk", system-ui, "Helvetica Neue", sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* NOTA: se quitó `html { zoom: 0.9 }`. El `zoom` CSS rompe el posicionamiento JS de los popovers
   de MudBlazor (selects/autocompletes/datepickers) en páginas scrolleadas: el dropdown aparecía por
   encima del control. Para ver el sistema más compacto, usar el zoom del NAVEGADOR (Ctrl + -), que el
   navegador maneja nativamente sin romper los dropdowns. */

/* Botón flotante "Reportar": colapsado = círculo coral con el icono; al pasar el mouse se expande
   y muestra el texto. */
.fb-fab {
    position: fixed; bottom: 24px; right: 24px; z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    height: 48px; width: 48px; padding: 0; overflow: hidden;
    background: var(--stint-coral); color: #fff; border-radius: 999px;
    box-shadow: 0 3px 12px rgba(14, 42, 59, .28); cursor: pointer;
    transition: width .18s ease, padding .18s ease;
}
.fb-fab:hover { width: auto; padding: 0 18px; gap: 8px; filter: brightness(.97); }
.fb-fab .fb-fab-text {
    max-width: 0; opacity: 0; white-space: nowrap; font-weight: 700; letter-spacing: .02em;
    transition: max-width .18s ease, opacity .18s ease;
}
.fb-fab:hover .fb-fab-text { max-width: 130px; opacity: 1; }

/* Barra "Grabando…" del reporte por video. */
.fb-recbar {
    position: fixed; bottom: 24px; right: 24px; z-index: 1300;
    display: flex; align-items: center; gap: 10px;
    background: #E5484D; color: #fff; padding: 7px 10px 7px 16px; border-radius: 999px;
    box-shadow: 0 3px 12px rgba(14, 42, 59, .3); font-weight: 700;
}
.fb-recdot { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: fbpulse 1s infinite; }
.fb-recbar .fb-recstop { background: #fff !important; color: #E5484D !important; }
@keyframes fbpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Datos / IDs / etiquetas técnicas en monoespaciada (regla Stint). */
.ct-mono {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.01em;
}

/* ── AppBar ───────────────────────────────────────────────── */
.ct-appbar {
    background: var(--stint-ink) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(8px);
}

.ct-brand {
    font-family: "Archivo", system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.92) !important;
}

.ct-brand-bold {
    font-weight: 800;
    color: var(--stint-coral);
}

/* Wordmark "stint." del logo único: es el del tower de Mario (Reportería V4), pedido por Nicolás
   el 21-09-2026 como logo general: Archivo 900, tracking apretado y punto coral. Vive SOLO en la
   cáscara (barra superior / drawer / login); la franja .tw-nav de Panorama ya no lo repite. */
.ct-brand-word {
    font-family: "Archivo", system-ui, sans-serif;
    font-weight: 900;
    font-size: 17px;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1;
}
.ct-brand-dot { color: var(--stint-coral, #FF6B5B); }
.ct-drawer-logo .ct-brand-word { font-size: 20px; }

.ct-user-chip {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.8rem;
}

/* ── Banderas de país en los selectores ───────────────────── */
/* La bandera (flagcdn, proporción real) se pinta como FONDO del propio input: con
   background-position center queda centrada en el eje Y con el texto de forma automática,
   sin importar el alto del campo ni el texto de ayuda debajo. La URL llega por --flag-url. */
.ct-flag-input .mud-input input {
    background-image: var(--flag-url);
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: auto 13px;       /* proporción real, sin deformar */
    padding-left: 50px !important;    /* deja aire para banderas anchas (~2.5:1) sin pisar el texto */
}

/* ── Campos no editables ──────────────────────────────────────
   Identificadores autogenerados, correlativos, valores calculados o campos que
   marca otro actor: se muestran en GRIS para comunicar que no se pueden editar,
   sin necesidad de un texto "(no editable)".
   • Solo-display (no se envían al guardar): usar Disabled="true" (gris nativo de MudBlazor).
   • ReadOnly cuyo valor debe persistir al guardar (Disabled lo dejaría fuera del
     submit): usar ReadOnly="true" + Class="ct-readonly". */
.ct-readonly .mud-input-slot,
.ct-readonly .mud-input input,
.ct-readonly .mud-input-root,
.ct-readonly .mud-input-label {
    color: var(--stint-muted) !important;
}

/* ── Modo códigos de sección (#194/#458) ─────────────
   El ancla de DevSectionTag no ocupa espacio en el layout (el chip en línea se reemplazó
   por el badge flotante). Con la preferencia "Mostrar códigos de sección" activa (solo dev),
   devTags.js pinta el código de cada ancla y data-testid como badge flotante en esta capa:
   referencia visual para diagramar procesos y el mismo selector que usan las pruebas de
   navegación. Es una capa aparte porque ::after no existe en <input> y los botones Mud lo
   recortan (overflow). */
.ct-devtag-anchor {
    display: inline-block;
    width: 0; height: 0;
    overflow: hidden;
}
/* Sin z-index en la capa: cada badge lleva el suyo. Por defecto quedan BAJO los popovers
   (~1200) y diálogos (~1400) de MudBlazor para no tapar desplegables abiertos; devTags.js
   eleva individualmente los badges de campos que viven dentro de un popover/diálogo. */
#ct-devtags-layer {
    position: absolute; top: 0; left: 0;
    pointer-events: none;
}
.ct-devtag-badge {
    position: absolute; z-index: 1000;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9.5px; line-height: 1.2;
    color: var(--stint-muted); background: #fdf6d8;
    border: 1px solid #e6ddb0; border-radius: 3px;
    padding: 0 3px; white-space: nowrap;
    pointer-events: auto; cursor: copy;
}
.ct-devtag-badge:hover { filter: brightness(0.94); }
.ct-devtag-badge--copied {
    color: #1c7c3c; background: #d9f2e0; border-color: #a8d8b5;
}
/* Campo obligatorio (detección en vivo: required/aria-required o asterisco del label). */
.ct-devtag-badge--req {
    color: #a8384b; background: #fdeaea; border-color: #eec3c8;
}
/* #460 Modo guía: anillo pulsante sobre el control seleccionado en draw.amplab.cl. */
.ct-qa-highlight {
    outline: 3px solid #f6d32d !important;
    outline-offset: 4px;
    border-radius: 4px;
    animation: ct-qa-pulse 1s ease-in-out infinite;
}
@keyframes ct-qa-pulse { 50% { outline-color: rgba(246, 211, 45, .15); } }
.ct-qa-toast {
    position: fixed; right: 16px; bottom: 16px; z-index: 3000;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; color: var(--stint-muted);
    background: #fdf6d8; border: 1px solid #e6ddb0; border-radius: 6px;
    padding: 8px 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

/* ── Badge de tipo de rol en el selector "Ver como" (#124) ─────
   Marca cada rol como client-side (tenant) o cross-tenant (proveedor externo). */
.ct-rolebadge {
    font-size: 0.6rem !important;
    height: 16px !important;
    padding: 0 6px !important;
}

/* Bandera en las opciones del desplegable (en línea con el texto). */
.ct-flag {
    height: 14px;
    width: auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    display: inline-block;
    vertical-align: middle;
}

/* ── Drawer ───────────────────────────────────────────────── */
.ct-drawer {
    background: var(--stint-ink) !important;
    border-right: none !important;
}

.ct-drawer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
}

.ct-drawer-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 4px 16px 8px;
    flex-shrink: 0;
}

/* Elimina todo espacio interno del drawer y nav */
.ct-drawer .mud-drawer-content > * {
    flex-shrink: 0;
}

/* Nada de scroll horizontal en el drawer — los labels largos se truncan */
.ct-drawer .mud-drawer-content {
    overflow-x: hidden !important;
}

.ct-drawer .mud-nav-menu {
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

.ct-drawer .mud-nav-menu > ul,
.ct-drawer .mud-navmenu {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
    overflow-x: hidden !important;
}

/* Truncar texto largo de los nav links con elipsis en vez de desbordar */
.ct-drawer .mud-nav-link {
    min-width: 0;
}

.ct-drawer .mud-nav-link .mud-nav-link-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nav links en sidebar oscuro */
.ct-drawer .mud-nav-link {
    color: var(--stint-mist) !important;
    border-radius: 8px !important;
    margin: 1px 8px !important;
    padding: 8px 12px !important;
    font-size: 0.875rem;
    transition: all 0.18s ease;
}

.ct-drawer .mud-nav-link:hover {
    background: rgba(28,114,147,0.20) !important;
    color: var(--stint-text-on-dark) !important;
}

/* Activo en TEAL de marca (el teal eléctrico de Amplab es de uso puntual, no para todo el nav). */
.ct-drawer .mud-nav-link.active {
    background: rgba(28,114,147,0.28) !important;
    color: #FFFFFF !important;
    font-weight: 600;
}

.ct-drawer .mud-nav-link .mud-icon-root {
    color: inherit !important;
    font-size: 1.15rem !important;
}

/* NavGroup headers = ETIQUETAS DE SECCIÓN (se distinguen claramente de las entradas).
   Las entradas son Title Case con ícono normal; los headers son MAYÚSCULAS, más
   chicos, bold y con tracking — más el chevron de expandir/colapsar a la derecha. */
.ct-drawer .mud-nav-group .mud-nav-group-header {
    color: var(--stint-slate) !important;
    border-radius: 8px !important;
    margin: 8px 8px 2px !important;
    font-family: var(--stint-font-mono) !important;   /* kicker de la guía: mono tracked */
    font-size: 0.66rem !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.ct-drawer .mud-nav-group .mud-nav-group-header:hover {
    background: rgba(28,114,147,0.10) !important;
    color: var(--stint-mist) !important;
}

/* Ícono del header de grupo: más chico y tenue que el de las entradas */
.ct-drawer .mud-nav-group .mud-nav-group-header .mud-nav-link-icon .mud-icon-root {
    font-size: 1rem !important;
    opacity: 0.7;
}

/* Chevron de expandir/colapsar — visible para que se note que es plegable */
.ct-drawer .mud-nav-group .mud-nav-group-header .mud-nav-link-expand-icon {
    opacity: 0.9;
}

/* Entradas dentro de un grupo: leve indentación + guía vertical para jerarquía */
.ct-drawer .mud-nav-group .mud-collapse-container .mud-nav-link {
    margin-left: 16px !important;
    border-left: 1px solid rgba(255,255,255,0.06);
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* ── Main Content ─────────────────────────────────────────── */
.ct-main-content {
    background: var(--stint-base) !important;
}

.ct-page-wrapper {
    padding: 24px;
    min-height: calc(100vh - 64px);
}

/* En pantallas chicas, menos padding para aprovechar el ancho disponible. */
@media (max-width: 960px) {
    .ct-page-wrapper { padding: 12px; }
}

/* ── Cards más modernas ───────────────────────────────────── */
.mud-card {
    border-radius: var(--stint-radius-lg) !important;
    box-shadow: var(--stint-shadow-sm) !important;
    border: 1px solid var(--stint-border);
    transition: box-shadow 0.2s ease;
}

.mud-card:hover {
    box-shadow: var(--stint-shadow-md) !important;
}

/* ── Paper / MudPaper ─────────────────────────────────────── */
.mud-paper {
    border-radius: var(--stint-radius-lg) !important;
}

/* ── DataGrid ─────────────────────────────────────────────── */
.mud-table-container {
    border-radius: var(--stint-radius-lg) !important;
    /* Scroll horizontal en pantallas angostas en vez de cortar columnas (ej. chip Conserv.). */
    overflow-x: auto;
}

/* Cabeceras de tabla al estilo de la guía: ink oscuro + texto blanco en mono MAYÚSCULAS. */
.mud-table thead th {
    background: var(--stint-ink) !important;
    color: #fff !important;
    font-family: var(--stint-font-mono) !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: none !important;
}

.mud-table tbody tr {
    transition: background 0.12s ease;
}

/* ── Buttons ──────────────────────────────────────────────── */
.mud-button-root {
    border-radius: var(--stint-radius-md) !important;
    font-weight: 600 !important;
}

/* ── Input fields ─────────────────────────────────────────── */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--stint-radius-md) !important;
}

/* ── Chips ────────────────────────────────────────────────── */
.mud-chip {
    border-radius: var(--stint-radius-sm) !important;
    font-weight: 500 !important;
    font-size: 0.78rem !important;
}

/* Badge de columnas (Estado / Conservación / Transporte) en las listas: mismo ancho y
   contenido centrado sin importar el largo del texto, para que todos se vean parejos. */
.mud-chip.ct-badge {
    min-width: 112px !important;
    justify-content: center !important;
}

/* Filas de lista clickeables: toda la fila entra al detalle (cursor de mano + realce al pasar). */
.ct-clickable-grid tbody tr {
    cursor: pointer;
}

/* Columnas numéricas alineadas a la derecha. */
.ct-num { text-align: right; }

/* Filtro sutil en la cabecera de columna (lista de contratos): título + ícono de embudo
   que abre un menú con las opciones; el ícono se colorea cuando el filtro está activo. */
.ct-head-filter { display: inline-flex; align-items: center; gap: 2px; }
.ct-head-filter .mud-button-root { padding: 3px; }

/* Filas del selector de columnas (lista de contratos): solo el grip ⠿ arrastra
   (así el "fantasma" del drag es el ícono chico, no toda la lista). */
.ct-col-row { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 6px; }
.ct-col-row:hover { background: var(--stint-base); }
.ct-col-grip { display: inline-flex; align-items: center; cursor: grab; flex-shrink: 0; }
.ct-col-grip:active { cursor: grabbing; }
/* Feedback al arrastrar: la fila origen se atenúa y la fila destino marca el borde coral. */
.ct-col-row--src { opacity: 0.4; }
.ct-col-row--over { box-shadow: inset 0 2px 0 0 var(--stint-coral); background: var(--stint-coral-bg); }

/* ── Stat Cards (Dashboard) ───────────────────────────────── */
.ct-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-radius: var(--stint-radius-lg);
    background: var(--stint-white);
    border: 1px solid var(--stint-border);
    box-shadow: var(--stint-shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor: default;
}

.ct-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--stint-shadow-md) !important;
}

.ct-stat-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    flex-shrink: 0;
}

.ct-stat-icon-wrap .mud-icon-root {
    font-size: 1.6rem !important;
}

.ct-stat-blue .ct-stat-icon-wrap  { background: rgba(28,114,147,0.10); color: var(--stint-teal); }
.ct-stat-green .ct-stat-icon-wrap { background: rgba(30,158,106,0.10); color: var(--stint-success); }
.ct-stat-orange .ct-stat-icon-wrap{ background: rgba(224,160,48,0.12); color: var(--stint-warning); }
.ct-stat-red .ct-stat-icon-wrap   { background: rgba(229,72,77,0.10);  color: var(--stint-danger); }
.ct-stat-teal .ct-stat-icon-wrap  { background: rgba(21,179,199,0.12); color: var(--amplab-teal-electric); }
.ct-stat-coral .ct-stat-icon-wrap { background: var(--stint-coral-bg);  color: var(--stint-coral); }

.ct-stat-body {
    flex: 1;
}

.ct-stat-value {
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--stint-ink);
    line-height: 1;
    margin-bottom: 4px;
}

.ct-stat-label {
    font-family: var(--stint-font-mono);
    font-size: 0.72rem;
    color: var(--stint-mist);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Auth / Login Layout ──────────────────────────────────── */
.ct-auth-wrapper {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--stint-ink) 0%, var(--stint-slate) 55%, var(--stint-teal) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    font-family: "Hanken Grotesk", system-ui, sans-serif;
}

.ct-auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
    color: #fff;
}

.ct-auth-brand-icon {
    font-size: 2.4rem;
    background: rgba(255,107,91,0.20);
    color: var(--stint-coral);
    border-radius: 14px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 6px;
    box-sizing: border-box;
    text-align: center;
}

/* Login: mismo wordmark "stint." del logo único, más grande junto al isotipo de 46 px. */
.ct-auth-brand-name .ct-brand-word { font-size: 26px; }

.ct-auth-brand-sub {
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0.3px;
    color: rgba(255,255,255,0.55);
    margin-top: 2px;
}

.ct-auth-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--stint-shadow-lg);
    padding: 40px 44px;
    width: 100%;
    max-width: 440px;
}

.ct-auth-card h1 {
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--stint-ink);
    margin: 0 0 4px;
}

.ct-auth-card h2 {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--stint-muted);
    margin: 0 0 24px;
}

.ct-auth-card .form-floating {
    margin-bottom: 16px;
}

.ct-auth-card .form-control {
    border-radius: 10px !important;
    border: 1.5px solid var(--stint-border);
    background: var(--stint-base);
    font-size: 0.9rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ct-auth-card .form-control:focus {
    border-color: var(--stint-teal) !important;
    box-shadow: 0 0 0 3px rgba(28,114,147,0.14) !important;
    background: #fff;
}

.ct-auth-card label {
    color: var(--stint-muted);
    font-size: 0.85rem;
}

/* Botón primario del login = acción primaria → CORAL (regla Stint). */
.ct-auth-card .btn-primary {
    background: var(--stint-coral);
    border: none;
    border-radius: 10px !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 12px;
    letter-spacing: 0.02em;
    transition: opacity 0.18s ease, transform 0.12s ease;
}

.ct-auth-card .btn-primary:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.ct-auth-card hr {
    border-color: var(--stint-border);
    margin: 20px 0;
}

.ct-auth-card a {
    color: var(--stint-teal);
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 500;
}

.ct-auth-card a:hover {
    text-decoration: underline;
    color: var(--stint-ink);
}

.ct-auth-card p {
    margin: 6px 0;
}

.ct-auth-card .checkbox label {
    font-size: 0.85rem;
    color: var(--stint-muted);
}

.ct-auth-card .text-danger {
    font-size: 0.8rem;
}

.ct-auth-card .alert {
    border-radius: 10px;
    font-size: 0.875rem;
}

.ct-auth-card .btn-link {
    color: var(--stint-teal) !important;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.ct-auth-card .btn-link:hover {
    text-decoration: underline;
}

.ct-auth-footer {
    margin-top: 24px;
    color: rgba(255,255,255,0.45);
    font-size: 0.75rem;
    text-align: center;
}

/* ── Stint · acción primaria = CORAL ──────────────────────────
   El botón "filled primary" es la llamada a la acción (CTA) → coral. El resto de
   "primary" (links, nav activo, botones outlined/text, íconos, switches) se queda
   en el teal del tema. Así el coral queda reservado a la acción primaria + marca.
   #527 (revisión de experiencia) — también `:not(:disabled)`: MudBlazor marca el botón deshabilitado con el ATRIBUTO
   `disabled`, no con la clase `.mud-button-disabled`, así que estas reglas con !important pisaban el gris de
   `.mud-button-filled:disabled` y un botón deshabilitado se veía igual que uno habilitado (contra #416: el gris ES el
   aviso). La clase se deja para los botones-enlace (<a>), que no tienen :disabled. */
.mud-button-filled-primary:not(:disabled):not(.mud-button-disabled),
.mud-fab.mud-fab-primary:not(:disabled):not(.mud-button-disabled) {
    background-color: var(--stint-coral) !important;
    color: #fff !important;
    --mud-ripple-color: #fff !important;
}
.mud-button-filled-primary:not(:disabled):not(.mud-button-disabled):hover,
.mud-fab.mud-fab-primary:not(:disabled):not(.mud-button-disabled):hover {
    background-color: #EF5848 !important; /* hover canónico del .btn-primary de la guía */
}

/* Botón SECUNDARIO de la guía = ink filled (hover #143A4F). En MudBlazor: Variant.Filled Color.Secondary. */
.mud-button-filled-secondary:not(:disabled):not(.mud-button-disabled) {
    background-color: var(--stint-ink) !important;
    color: #fff !important;
    --mud-ripple-color: #fff !important;
}
.mud-button-filled-secondary:not(:disabled):not(.mud-button-disabled):hover {
    background-color: #143A4F !important;
}

/* ── Stint · pills de estado tintadas (fondo suave + texto del color) ──────
   Los chips de estado pasan de relleno sólido a tint, como en la guía Stint.
   Solo afecta a colores semánticos (success/error/warning/info), no a primary. */
/* Texto de pill OSCURECIDO según la guía (legibilidad sobre el tint): s-success #16744D,
   s-info #15566E, s-warn #9A6A12, s-danger #B3343A. El punto ::before hereda currentColor. */
.mud-chip.mud-chip-filled.mud-chip-color-success { background-color: var(--stint-success-bg) !important; color: #16744D !important; }
.mud-chip.mud-chip-filled.mud-chip-color-error   { background-color: var(--stint-danger-bg)  !important; color: #B3343A !important; }
.mud-chip.mud-chip-filled.mud-chip-color-warning { background-color: var(--stint-warning-bg) !important; color: #9A6A12 !important; }
.mud-chip.mud-chip-filled.mud-chip-color-info    { background-color: var(--stint-info-bg)    !important; color: #15566E !important; }

/* Pills de estado al estilo de la guía: monoespaciada, MAYÚSCULAS, radio pill, con PUNTO inicial. */
.mud-chip.mud-chip-filled.mud-chip-color-success,
.mud-chip.mud-chip-filled.mud-chip-color-error,
.mud-chip.mud-chip-filled.mud-chip-color-warning,
.mud-chip.mud-chip-filled.mud-chip-color-info,
.mud-chip.ct-badge {
    border-radius: var(--stint-radius-pill) !important;
    font-family: var(--stint-font-mono) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500 !important;
    font-size: 0.68rem !important;
}

/* Punto inicial (en el color del badge) como en la guía. Es el indicador; reemplaza al ícono. */
.mud-chip.mud-chip-filled.mud-chip-color-success::before,
.mud-chip.mud-chip-filled.mud-chip-color-error::before,
.mud-chip.mud-chip-filled.mud-chip-color-warning::before,
.mud-chip.mud-chip-filled.mud-chip-color-info::before,
.mud-chip.ct-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
    margin-right: 5px;
}
/* Con el punto como indicador, se oculta el ícono del chip (look de la guía). */
.mud-chip.mud-chip-filled.mud-chip-color-success .mud-icon-root,
.mud-chip.mud-chip-filled.mud-chip-color-error .mud-icon-root,
.mud-chip.mud-chip-filled.mud-chip-color-warning .mud-icon-root,
.mud-chip.mud-chip-filled.mud-chip-color-info .mud-icon-root,
.mud-chip.ct-badge .mud-icon-root { display: none !important; }
/* Tints neutros/teal para que TODOS los ct-badge sean pill tintado (no relleno sólido). */
.mud-chip.ct-badge.mud-chip-color-secondary,
.mud-chip.ct-badge.mud-chip-color-default { background-color: #EDF0F2 !important; color: var(--stint-muted) !important; }
.mud-chip.ct-badge.mud-chip-color-tertiary { background-color: rgba(21,179,199,0.16) !important; color: #0E7C8C !important; }

/* ── Stint · Tracker de hitos (timeline horizontal) ───────────────────────── */
/* Tracker de hitos: una sola barra horizontal continua con nombres en diagonal (estilo metro).
   Puntos de ancho fijo (88px) para que el encabezado de segmento calce con sus puntos. */
/* El alto lo fija el contenido de abajo (.ct-step-row reserva 56px). overflow-y visible
   para que el rótulo del hito no se corte cuando la barra scrollea en horizontal, que era
   lo que partía «llegada del barco» a la mitad en pantallas de 1280 y 1480. */
.ct-tracker { overflow-x:auto; overflow-y:visible; padding:4px 0 6px }
.ct-tracker-bar { display:flex; flex-direction:column; width:100% }
/* Fila de segmentos: rótulo de planta/destino sobre los puntos que abarca (separado de los hitos). */
.ct-trkseg-row { display:flex; align-items:flex-end; height:16px; margin-bottom:18px }
.ct-trkseg { flex:0 0 auto; display:flex; align-items:center; min-width:0; overflow:hidden }
.ct-trkseg-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
                color:var(--stint-muted); white-space:nowrap; padding-left:6px; line-height:1.3;
                border-left:2px solid var(--stint-border); overflow:hidden; text-overflow:ellipsis }
/* Fila de puntos: barra única. La fila reserva alto arriba para la bandera del puerto. */
.ct-step-row { display:flex; align-items:flex-start; padding-bottom:56px; padding-top:18px }
.ct-step { flex:1 1 0; min-width:0; position:relative; height:24px }
/* Bandera del puerto, justo ENCIMA del círculo y centrada con él. */
.ct-step-flag { position:absolute; top:-18px; left:50%; transform:translateX(-50%); height:14px; line-height:0 }
.ct-step-flag .ct-flag { height:14px; width:auto; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.08) }
.ct-step::before { content:""; position:absolute; top:11px; left:50%; width:100%; height:3px; background:var(--stint-border) }
.ct-step:last-child::before { display:none }
.ct-step-node { position:absolute; top:0; left:50%; transform:translateX(-50%); width:24px; height:24px; border-radius:50%;
                background:#fff; border:3px solid var(--stint-border); z-index:2; display:flex; align-items:center;
                justify-content:center; font-size:12px; color:#fff; line-height:1 }
/* Nombre horizontal centrado bajo cada punto; ajusta dentro del ancho del paso para no colisionar. */
.ct-step-info { position:absolute; top:30px; left:50%; transform:translateX(-50%);
                display:flex; flex-direction:column; align-items:center; text-align:center;
                white-space:normal; width:100%; padding:0 3px; box-sizing:border-box; z-index:1 }
.ct-step-t { font-size:12px; font-weight:600; color:var(--stint-ink); line-height:1.15 }
.ct-step-s { font-family:var(--stint-font-mono); font-size:10px; color:var(--stint-mist); line-height:1.15 }
/* Estados */
.ct-step--done .ct-step-node { background:var(--stint-coral); border-color:var(--stint-coral) }
/* El conector se pinta coral entre hitos cumplidos consecutivos Y al entrar al hito actual. */
.ct-step--done:has(+ .ct-step--done)::before,
.ct-step--done:has(+ .ct-step--current)::before { background:var(--stint-coral) }

/* Hito ACTUAL = locator de la guía: anillo coral con un punto coral al centro. */
.ct-step--current .ct-step-node { background:#fff; border-color:var(--stint-coral) }
.ct-step--current .ct-step-node::after {
    content:""; position:absolute; inset:5px; border-radius:50%; background:var(--stint-coral);
}

/* ── #534 · Los 13 hitos estándar en la barra operativa ─────────────────────────────────────
   La FORMA es la misma barra de puntos redondos (los cuadritos del tower no van acá). Cambia lo que
   va bajo el punto —número, hora real o estado, prevista, fuente y lugar, sub-hitos— y por eso la
   fila reserva más alto y cada punto un ancho mínimo («Posicionamiento» no cabe en menos). */
.ct-tracker--hitos .ct-step-row { padding-bottom:104px }
.ct-tracker--hitos .ct-step { min-width:92px; cursor:pointer }
.ct-tracker--hitos .ct-step:focus-visible { outline:none }
.ct-tracker--hitos .ct-step:focus-visible .ct-step-node,
.ct-step--open .ct-step-node { box-shadow:0 0 0 4px rgba(255,107,91,.22) }
.ct-step-head { display:block; line-height:1.15 }
.ct-step-n { font-family:var(--stint-font-mono); font-size:10px; font-weight:600; color:var(--stint-mist); margin-right:3px }
.ct-step-p { font-family:var(--stint-font-mono); font-size:10px; color:var(--stint-mist); line-height:1.15; opacity:.85 }
.ct-step-x { font-size:10px; color:var(--stint-muted); line-height:1.15 }
.ct-step-more { font-family:var(--stint-font-mono); font-size:10px; color:var(--stint-coral); line-height:1.3 }
/* El conector va pintado hasta el hito actual aunque en el medio haya un «directo» o un «no disponible». */
.ct-step--trail::before { background:var(--stint-coral) }
/* Sin registro: pasó, pero nadie marcó la hora (relleno más claro que un cumplido con su hora). */
.ct-step--sinreg .ct-step-node { background:color-mix(in srgb, var(--stint-coral) 40%, #fff); border-color:color-mix(in srgb, var(--stint-coral) 40%, #fff) }
/* Directo: el transbordo no aplica (viaje directo). Anillo punteado, distinto de «sin registro». */
.ct-step--directo .ct-step-node { border-style:dashed }
.ct-step--directo.ct-step--pasado .ct-step-node { border-color:var(--stint-coral) }
/* No disponible (#340): el dato es del seguimiento y quien mira es un proveedor. */
.ct-step--nodisp .ct-step-node { border-style:dotted; opacity:.6 }
.ct-step--nodisp .ct-step-s { font-style:italic }

/* Detalle del hito abierto: va bajo la barra (fuera del scroll horizontal). */
.ct-hito-det { margin-top:6px; border:1px solid var(--stint-border); border-radius:8px; padding:10px 12px; font-size:12.5px; color:var(--stint-ink) }
.ct-hito-det-head { display:flex; align-items:baseline; gap:10px; margin-bottom:8px }
.ct-hito-det-n { font-family:var(--stint-font-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--stint-mist) }
.ct-hito-det-t { font-weight:700 }
.ct-hito-det-x { margin-left:auto; border:0; background:none; cursor:pointer; color:var(--stint-muted); font-size:18px; line-height:1; padding:0 4px }
.ct-hito-det-grid { display:grid; grid-template-columns:max-content 1fr; gap:3px 14px }
.ct-hito-det-k { color:var(--stint-muted) }
.ct-hito-det-src { color:var(--stint-muted) }
.ct-hito-sub { width:100%; border-collapse:collapse; margin-top:10px; font-size:12px }
.ct-hito-sub th { text-align:left; font-weight:600; color:var(--stint-muted); border-bottom:1px solid var(--stint-border); padding:4px 8px 4px 0 }
.ct-hito-sub td { padding:4px 8px 4px 0; border-bottom:1px solid var(--stint-border); vertical-align:top }
.ct-hito-sub tr:last-child td { border-bottom:0 }
.ct-hito-sub-tipo { color:var(--stint-muted) }
.ct-hito-dot { display:inline-block; width:9px; height:9px; border-radius:50%; border:2px solid var(--stint-border); margin-right:6px; vertical-align:-1px; box-sizing:border-box }
.ct-hito-dot--done { background:var(--stint-coral); border-color:var(--stint-coral) }

/* ── Stint · Tabs al estilo de la guía ────────────────────────────────────────────────────
   La guía usa tabs en Title-case (Hanken 600), inactivo en muted y activo en ink, con un
   subrayado CORAL. MudBlazor por defecto los pone en MAYÚSCULAS con el slider del color del tema;
   acá lo alineamos a la guía. */
.mud-tabs .mud-tab {
    text-transform: none !important;
    font-family: var(--stint-font-text) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    color: var(--stint-muted) !important;
    /* Borde inferior transparente que se solapa con la hairline de la barra (técnica de la guía). */
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
}
.mud-tabs .mud-tab:hover { color: var(--stint-ink) !important; }
/* Pestaña activa: texto ink + "bordecito naranja" abajo (como la guía). */
.mud-tabs .mud-tab.mud-tab-active {
    color: var(--stint-ink) !important;
    border-bottom-color: var(--stint-coral) !important;
}
/* Tabs solo-texto como la guía: ocultar el ícono dentro de cada pestaña. */
.mud-tabs .mud-tab .mud-icon-root { display: none !important; }
/* Usamos el border-bottom de la pestaña activa como subrayado; ocultamos el slider nativo de MudBlazor. */
.mud-tabs .mud-tab-slider { display: none !important; }
/* Barra plana con hairline inferior, sin la tarjeta/elevación alrededor (como la guía). */
.mud-tabs { box-shadow: none !important; border-radius: 0 !important; }
.mud-tabs .mud-tabs-tabbar {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 2px solid var(--stint-border);
}

/* ── Stint · Forms: foco teal con halo suave (guía). Las etiquetas NO se ponen en mono/MAYÚSCULAS:
   en los inputs outlined ensanchaban el label y la línea del borde (notch) pisaba el texto. */
.mud-input-control:focus-within .mud-input-outlined-border {
    box-shadow: 0 0 0 3px rgba(28,114,147,0.14);
}

/* ── Stint · Alerts al estilo de la guía: tinte + acento de 4px a la izquierda + texto oscuro, radio md. ── */
.mud-alert { border-radius: var(--stint-radius-md) !important; }
.mud-alert.mud-alert-text-success { border-left: 4px solid var(--stint-success) !important; background-color: var(--stint-success-bg) !important; color: #125A3B !important; }
.mud-alert.mud-alert-text-error   { border-left: 4px solid var(--stint-danger)  !important; background-color: var(--stint-danger-bg)  !important; color: #8E2A2E !important; }
.mud-alert.mud-alert-text-warning { border-left: 4px solid var(--stint-warning) !important; background-color: var(--stint-warning-bg) !important; color: #7A520D !important; }
.mud-alert.mud-alert-text-info    { border-left: 4px solid var(--stint-info)    !important; background-color: var(--stint-info-bg)    !important; color: #114A60 !important; }

/* ── Stint · contador de la campana en CORAL (acento de marca; el rojo danger es solo crítico). ── */
.ct-notif-badge .mud-badge {
    background-color: var(--stint-coral) !important;
    color: #fff !important;
}

/* ── Stint · páginas /Account/Manage (Bootstrap crudo → tokens de la guía) ─────────────────── */
.ct-manage h1, .ct-manage h2, .ct-manage h3, .ct-manage h4 {
    font-family: var(--stint-font-display);
    color: var(--stint-ink);
}
.ct-manage .btn-primary {
    background: var(--stint-coral);
    border: none;
    border-radius: var(--stint-radius-md);
    font-weight: 600;
}
.ct-manage .btn-primary:hover { background: #EF5848; }
.ct-manage .form-control {
    border-radius: var(--stint-radius-md);
    border: 1.5px solid var(--stint-border);
}
.ct-manage .form-control:focus {
    border-color: var(--stint-teal);
    box-shadow: 0 0 0 3px rgba(28,114,147,0.14);
}
.ct-manage .nav-pills .nav-link {
    color: var(--stint-muted);
    border-radius: var(--stint-radius-sm);
    font-weight: 500;
}
.ct-manage .nav-pills .nav-link.active {
    background: var(--stint-teal);
    color: #fff;
}

/* ── Blazor error */
.blazor-error-boundary {
    background: var(--stint-danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 8px;
}

.blazor-error-boundary::after {
    content: "Ha ocurrido un error.";
}

/* ── #292 (fase 1) — Camión visto desde arriba: esqueleto COMPARTIDO entre "Orden de carga"
   (pestaña Asignación, plan del logístico) y "Carga real" (pestaña Despacho). UNA sola definición:
   si cambia el camión, cambia igual en ambas pestañas. Header unificado (oscuro/mono, como la
   tabla de candidatos). Cada panel conserva SOLO sus reglas particulares en su propio <style>. ── */
.ct-lo { width:100%; border-collapse:collapse; }
.ct-lo thead th { text-align:left; font-size:11px; font-weight:500; color:#fff; background:var(--stint-ink);
                  font-family:var(--stint-font-mono); text-transform:uppercase; letter-spacing:.08em;
                  padding:6px 8px; white-space:nowrap; }
.ct-lo tbody td { padding:6px 6px; border-bottom:1px solid var(--mud-palette-lines-default); vertical-align:top; font-size:.82rem; }
.ct-lo .ct-num, .ct-num { text-align:right; white-space:nowrap; font-family:var(--stint-font-mono); }
.ct-lo-truckh { width:74px; text-align:center !important; }
.ct-lo td.ct-seg { width:74px; padding:0 !important; text-align:center; vertical-align:middle; position:relative;
                   border-left:6px solid var(--stint-slate); border-right:6px solid var(--stint-slate); border-bottom:2px solid rgba(255,255,255,.55); }
.ct-lo td.ct-seg.ct-seg-rear { border-top:8px solid var(--stint-slate); border-radius:12px 12px 0 0; }
.ct-seg-rear::before { content:''; position:absolute; top:4px; left:calc(50% - 1px); width:2px; height:13px; background:rgba(255,255,255,.5); border-radius:1px; }
.ct-seg-pos { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
              background:rgba(255,255,255,.95); color:var(--stint-ink); font-weight:800; font-size:.95rem; box-shadow:0 1px 2px rgba(0,0,0,.3); }
.ct-lo td.ct-cab { width:74px; padding:0 !important; height:40px; background:var(--stint-ink); position:relative;
                   border-left:6px solid var(--stint-ink); border-right:6px solid var(--stint-ink); border-radius:0 0 18px 18px; }
.ct-lo td.ct-cab::after { content:''; position:absolute; left:15px; right:15px; bottom:9px; height:10px; background:var(--amplab-teal-electric); border-radius:3px; }
.ct-cab-row td { border-bottom:none !important; }
.ct-cab-cap { color:var(--mud-palette-text-secondary); font-size:.74rem; vertical-align:bottom !important; padding-bottom:12px !important; }
.ct-order-arrows { display:flex; flex-direction:column; }
.ct-order-arrows .mud-button-root.mud-icon-button { height:20px; width:24px; padding:0; }

/* ── #299 — Banda separadora de grupo de bodega (parada) en la tabla del camión: COMPARTIDA
   entre el plan (Orden de carga / Asignación) y el Despacho (carga real). ── */
.ct-group-header td { background:var(--stint-base); font-size:.74rem; font-weight:600; color:var(--stint-slate);
                      padding:6px 10px !important; border-bottom:2px solid var(--stint-border) !important;
                      border-top:1px solid var(--stint-border) !important; }
.ct-group-header .ct-group-arrow { color:var(--stint-teal); margin-right:6px; }

/* ── #312 — La MISMA banda de parada como bloque suelto (fuera de la tabla del camión): rotula
   los grupos de CVs DISPONIBLES por parada ("Parada N · Bodega · dd MMM") en la creación del
   traslado y en el buscador de la pestaña Asignación. ── */
.ct-group-band { background:var(--stint-base); font-size:.74rem; font-weight:600; color:var(--stint-slate);
                 padding:6px 10px; border:1px solid var(--stint-border); border-bottom-width:2px;
                 border-radius:6px; margin:10px 0 2px; }
.ct-group-band .ct-group-arrow { color:var(--stint-teal); margin-right:6px; }

/* ── #312 — Destello al MOVER un CV entre asignados y disponibles (sube/baja): patrón #309
   (ct-stop-flash de la ruta) — solo background + box-shadow interno, CERO impacto de layout.
   Compartido por la tabla del camión (Asignación) y las tablas de candidatos (creación +
   buscador). Se aplica al <tr>: los td animan para cubrir toda la fila. ── */
@keyframes ct-row-flash {
    0%   { background-color: color-mix(in srgb, var(--stint-teal) 16%, transparent); box-shadow: inset 3px 0 0 0 var(--stint-teal); }
    100% { background-color: transparent; box-shadow: inset 3px 0 0 0 transparent; }
}
tr.ct-row-flash > td { animation: ct-row-flash 1.1s ease-out; }

/* ── #323 — Líneas de la tabla de candidatos en COLUMNAS alineadas (misma posición en toda la
   tabla): producto | bodega (negrita) | salida | cajas. ── */
.ct-line-cols { display:grid; grid-template-columns: minmax(200px,1fr) 175px 44px 80px; gap:0 10px;
                font-size:.75rem; line-height:1.6; }
.ct-line-cols .ct-line-wh { font-weight:700; }
.ct-line-cols .ct-line-boxes { text-align:right; white-space:nowrap; }

/* Pestañas deshabilitadas VISIBLEMENTE grises (#416): sin esto se veían igual que las activas
   (feedback 05-ago sobre la pestaña Transporte gateada hasta declarar el gestor). */
.mud-tabs .mud-tab.mud-disabled,
.mud-tabs .mud-tab[disabled] {
    opacity: .38;
    filter: grayscale(1);
    cursor: not-allowed;
}


/* Badge de completitud de pestaña (06-ago): formato EXACTO del contador de Historial — sin el
   punto de los badges de estado del resto del sistema; solo el glifo, con su color. */
.mud-chip.ct-tab-check::before { content: none !important; }
.mud-chip.ct-tab-check { font-size: 1.15rem; font-weight: 900; line-height: 1; }

/* Estado de pestaña (06-ago, iterado): círculo pelado verde/amarillo, sin glifos.
   El wrapper del tooltip se vuelve flex centrado para que el punto quede ALINEADO con el
   texto de la pestaña en el eje Y (el inline-block quedaba colgando de la baseline). */
.mud-tab .mud-tooltip-root { display:inline-flex; align-items:center; }
.ct-tab-dot { display:block; width:12px; height:12px; border-radius:50%; }
.ct-tab-dot-ok { background:#1e9e57; }
.ct-tab-dot-warn { background:#f2a900; }

/* ── Panorama · indicadores de embarques (03-sep) ─────────────────────────────
   Barras DIVERGENTES para el drift de ETA y de zarpe: la métrica tiene signo
   (adelanto/atraso) y el cero es el eje, así que la barra crece desde el centro.

   El par de color es azul/naranjo y NO verde/rojo a propósito: el rojo-verde es
   el par que un daltónico no distingue (ΔE 5,8 en deuteranopía, bajo el piso de
   8). El elegido da ΔE 17,3. Además el lado de la barra ya codifica el signo y
   cada barra lleva su valor escrito, así que el color es refuerzo y no el único
   portador del dato. */
.kpi-div { display: flex; flex-direction: column; gap: 6px; }
.kpi-row { display: grid; grid-template-columns: 92px 1fr 74px; align-items: center; gap: 10px; }
.kpi-lbl { font-family: var(--stint-font-mono, monospace); font-size: 12.5px; color: var(--stint-muted, #5B6B73); text-align: right; }
.kpi-track { position: relative; height: 20px; background: var(--stint-base, #F4F6F7); border-radius: 4px; }
.kpi-zero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--stint-cloud, #C3CCD2); }
.kpi-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; }
.kpi-bar.pos { background: #C0561B; }   /* más tarde  */
.kpi-bar.neg { background: #0A6E96; }   /* más temprano */
.kpi-val { font-family: var(--stint-font-mono, monospace); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--stint-muted, #5B6B73); }
.kpi-val.pos { color: #C0561B; font-weight: 600; }
.kpi-val.neg { color: #0A6E96; font-weight: 600; }
.kpi-leg { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; font-size: 12.5px; color: var(--stint-muted, #5B6B73); align-items: center; }
.kpi-leg .sw { display: inline-block; width: 20px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.kpi-leg .sw.pos { background: #C0561B; }
.kpi-leg .sw.neg { background: #0A6E96; }
.kpi-leg .kpi-n { margin-left: auto; }
.kpi-num { font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi-pie { color: var(--stint-muted, #5B6B73); display: flex; align-items: center; margin-top: 2px; }
.kpi-pie.alerta { color: #C0561B; }

/* Modo oscuro: pasos elegidos contra el fondo oscuro, no el claro invertido. */
@media (prefers-color-scheme: dark) {
  .kpi-bar.pos, .kpi-leg .sw.pos { background: #CE7328; }
  .kpi-bar.neg, .kpi-leg .sw.neg { background: #2892BB; }
  .kpi-val.pos, .kpi-pie.alerta  { color: #CE7328; }
  .kpi-val.neg { color: #2892BB; }
}

/* ── Panorama › Reportes ──────────────────────────────────────────────────────────────
   Paleta de series validada para daltonismo (ΔE ≥ 8 bajo protanopia/deuteranopía) en modo
   claro y oscuro. Los dos primeros puestos son el mismo par que ya usa «Estado de los
   embarques», para no cambiarle el idioma visual al usuario entre dos páginas vecinas.
   El color sigue al PUESTO en la lista, nunca al valor: filtrar no debe repintar las series. */
.rep-s1, .s1 { --rep: #0A6E96; }
.rep-s2, .s2 { --rep: #C0561B; }
.rep-s3, .s3 { --rep: #1baf7a; }
.rep-s4, .s4 { --rep: #eda100; }
.rep-s5, .s5 { --rep: #e87ba4; }
.rep-s6, .s6 { --rep: #4a3aa7; }

/* Barras horizontales */
/* Las columnas (rótulo · pista · valor) las define el CONTENEDOR y cada fila las hereda (subgrid): así la pista
   mide lo mismo en todas las filas y las barras comparten escala aunque un valor sea más largo ("58.000,0 t"). */
.rep-barras { display: grid; grid-template-columns: 116px 1fr auto; gap: 7px 10px; }
.rep-barras.ancho { grid-template-columns: 200px 1fr auto; }
.rep-fila { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; }
/* Etiquetas largas (país · puerto): si no caben, el dato se pierde. El ellipsis es la red
   de seguridad, no el plan — por eso la columna es ancha antes de recortar. */
.rep-lbl { font-family: var(--stint-font-mono, monospace); font-size: 12.5px; color: var(--stint-muted, #5B6B73);
           text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-pista { position: relative; height: 18px; }
.rep-relleno { position: absolute; left: 0; top: 0; bottom: 0; background: #0A6E96; border-radius: 0 4px 4px 0; }
.rep-relleno.otros { background: var(--stint-cloud, #C3CCD2); }
.rep-num { font-family: var(--stint-font-mono, monospace); font-size: 12.5px;
           font-variant-numeric: tabular-nums; color: var(--stint-text, #0E2A3B); }

/* Apiladas: los tramos se separan con un hueco, no con un borde. */
.rep-apilada { display: flex; gap: 2px; height: 18px; }
.rep-tramo { height: 100%; border-radius: 2px; min-width: 3px; background: var(--rep, #0A6E96); }
.rep-tramo:last-child { border-radius: 2px 4px 4px 2px; }

.rep-leyenda { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px;
               font-size: 12.5px; color: var(--stint-muted, #5B6B73); align-items: center; }
.rep-leyenda .sw { display: inline-block; width: 14px; height: 10px; border-radius: 2px;
                   margin-right: 6px; vertical-align: -1px; background: var(--rep, #0A6E96); }

/* Columnas */
.rep-cols { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px;
            align-items: end; height: 200px; }
.rep-col { display: flex; flex-direction: column; align-items: center; height: 100%; }
.rep-col-val { font-family: var(--stint-font-mono, monospace); font-size: 11.5px;
               color: var(--stint-muted, #5B6B73); height: 16px; }
.rep-col-pista { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.rep-col-relleno { width: 100%; max-width: 24px; background: #0A6E96; border-radius: 4px 4px 0 0; min-height: 1px; }
.rep-col-lbl { font-family: var(--stint-font-mono, monospace); font-size: 11px;
               color: var(--stint-mist, #9FB4BD); margin-top: 6px; }

/* Líneas */
.rep-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rep-grid { stroke: var(--stint-border, #D9DEE2); stroke-width: 1; }
.rep-eje { font-family: var(--stint-font-mono, monospace); font-size: 11px; fill: var(--stint-mist, #9FB4BD); }
.rep-linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke: var(--rep, #0A6E96); }
.rep-punto { fill: var(--rep, #0A6E96); stroke: var(--mud-palette-surface, #fff); stroke-width: 2; }
.rep-fin { font-family: var(--stint-font-mono, monospace); font-size: 11.5px; fill: var(--stint-muted, #5B6B73); }

/* Lista de zarpes */
.rep-lista { display: grid; gap: 8px; }
.rep-it { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
          padding: 9px 12px; border: 1px solid var(--stint-border, #D9DEE2); border-radius: 6px; }
.rep-it .nm { font-weight: 600; font-size: 13.5px; }
.rep-it .mt { color: var(--stint-muted, #5B6B73); font-size: 12.5px; }
.rep-it .dt { font-family: var(--stint-font-mono, monospace); font-size: 12.5px; white-space: nowrap; }

/* Modo oscuro: pasos elegidos contra el fondo oscuro, no el claro invertido. */
@media (prefers-color-scheme: dark) {
  .rep-s1, .s1 { --rep: #2892BB; }
  .rep-s2, .s2 { --rep: #CE7328; }
  .rep-s3, .s3 { --rep: #199e70; }
  .rep-s4, .s4 { --rep: #c98500; }
  .rep-s5, .s5 { --rep: #d55181; }
  .rep-s6, .s6 { --rep: #9085e9; }
  .rep-relleno, .rep-col-relleno { background: #2892BB; }
  .rep-relleno.otros { background: #4a4a48; }
}

/* Gráfico de líneas: SVG para los trazos, HTML posicionado para puntos y rótulos. */
.rep-lin { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 170px auto;
           column-gap: 8px; align-items: stretch; }
.rep-lin-y { display: flex; flex-direction: column; justify-content: space-between;
             font-family: var(--stint-font-mono, monospace); font-size: 11px;
             color: var(--stint-mist, #9FB4BD); text-align: right; padding: 4px 0; }
.rep-lin-plot { position: relative; padding: 5px 34px 5px 0; }
.rep-lin-svg { position: absolute; inset: 5px 34px 5px 0; width: calc(100% - 34px); height: calc(100% - 10px); }
.rep-lin-pt { position: absolute; width: 8px; height: 8px; margin-left: -4px; margin-bottom: -4px;
              border-radius: 50%; background: var(--rep, #0A6E96);
              box-shadow: 0 0 0 2px var(--mud-palette-surface, #fff); }
.rep-lin-capa { position: absolute; inset: 5px 34px 5px 0; }
.rep-lin-fin { position: absolute; margin-left: 7px; margin-bottom: -8px; white-space: nowrap;
               font-family: var(--stint-font-mono, monospace); font-size: 11.5px; color: var(--stint-muted, #5B6B73); }
.rep-lin-x { grid-column: 2; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
             padding-right: 34px; font-family: var(--stint-font-mono, monospace); font-size: 11px;
             color: var(--stint-mist, #9FB4BD); text-align: center; margin-top: 4px; }

/* ── Panorama › Control Tower (V3) ──────────────────────────────────────────────────
   La gravedad SIEMPRE viaja con ícono además del color: en una pantalla ejecutiva el
   color solo no puede ser el portador del estado. */
.ct-kicker { font: 600 11px/1 var(--stint-font-mono, monospace); letter-spacing: .14em;
             text-transform: uppercase; color: var(--stint-muted, #5B6B73); margin-bottom: 10px; }
.ct-hero { font-size: 40px; font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.ct-hero.mal { color: #C0561B; }
.ct-hero-sub { font-size: 12.5px; color: var(--stint-muted, #5B6B73); margin-top: 2px; }

.ct-lineas { margin-top: 14px; display: grid; gap: 6px; font-size: 13px; }
.ct-lineas > div { display: flex; align-items: baseline; gap: 8px; }
.ct-lineas span { color: var(--stint-muted, #5B6B73); }
.ct-lineas b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.ct-lineas b.mal, .ct-num.mal { color: #C0561B; }
.ct-lineas b.bien, .ct-num.bien { color: #0A6E96; }

.ct-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-donde { color: var(--stint-muted, #5B6B73); font-size: 12.5px; }

/* Atención requerida */
.ct-alertas { display: grid; gap: 8px; }
.ct-alerta { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
             border: 1px solid var(--stint-border, #D9DEE2); border-left-width: 3px; border-radius: 6px; }
.ct-alerta.alta  { border-left-color: #C0561B; }
.ct-alerta.media { border-left-color: #E0A030; }
.ct-alerta.baja  { border-left-color: var(--stint-mist, #9FB4BD); }
.ct-alerta.ok    { border-left-color: #1E9E6A; }
.ct-alerta-ico  { margin-top: 1px; flex: none; }
.ct-alerta.alta  .ct-alerta-ico { color: #C0561B; }
.ct-alerta.media .ct-alerta-ico { color: #B07A18; }
.ct-alerta.baja  .ct-alerta-ico { color: var(--stint-mist, #9FB4BD); }
.ct-alerta.ok    .ct-alerta-ico { color: #1E9E6A; }
.ct-alerta-txt { flex: 1; min-width: 0; }
.ct-alerta-txt .t { font-weight: 600; font-size: 13.5px; }
.ct-alerta-txt .d { font-size: 12.5px; color: var(--stint-muted, #5B6B73); margin-top: 2px; }

/* Medidor de cumplimiento: pista del mismo matiz, más claro. */
.ct-medidor .pista { position: relative; height: 14px; background: #cde2fb;
                     border-radius: 999px; overflow: hidden; }
.ct-medidor .fill  { position: absolute; left: 0; top: 0; bottom: 0; background: #0A6E96;
                     border-radius: 999px; }
.ct-medidor .rot   { display: flex; justify-content: space-between; margin-top: 6px;
                     font-size: 12.5px; color: var(--stint-muted, #5B6B73); }

@media (prefers-color-scheme: dark) {
  .ct-hero.mal, .ct-lineas b.mal, .ct-num.mal { color: #CE7328; }
  .ct-lineas b.bien, .ct-num.bien { color: #2892BB; }
  .ct-alerta.alta { border-left-color: #CE7328; }  .ct-alerta.alta .ct-alerta-ico { color: #CE7328; }
  .ct-alerta.media .ct-alerta-ico { color: #E0A030; }
  .ct-medidor .pista { background: #184f95; }  .ct-medidor .fill { background: #2892BB; }
}
.ct-nota { font-size: 11.5px; color: var(--stint-mist, #9FB4BD); margin-top: 2px; line-height: 1.35; }

/* Fase 3 (#477): los ejes y valores escriben unidades ("20.000 t", "1,50", "675,6 M"); no se quiebran. */
.rep-num, .rep-col-val, .rep-lin-y span { white-space: nowrap; }
.rep-lin-y { min-width: 40px; padding-right: 6px; }

/* #527 (revisión de experiencia) — casilla con un texto largo (el consentimiento de WhatsApp): la casilla arriba, junto a
   la primera línea, y no centrada a media altura de 16 líneas en un celular. */
.ct-casilla-arriba .mud-checkbox { align-items: flex-start; }
.ct-casilla-arriba .mud-checkbox > .mud-typography { padding-top: 6px; }

/* #530 — AVISOS: /admin/notificaciones («Por rol», «Por persona», «WhatsApp de la empresa»), «Mis avisos» y su versión
   solo-vista de la ficha del usuario. Reporte de Nicolás (29-09): «esto se ve desordenado y el control está deformado».
   · Cada celda de canal lleva campanita y WhatsApp LADO A LADO y centrados bajo su encabezado (.ct-avisos-par; las
     casillas son AvisoCanal, del mismo tamaño). Antes la raíz de MudCheckBox (un bloque) dejaba la campanita a la
     izquierda y el tooltip del WhatsApp bajaba a una segunda línea, corrido hacia el centro.
   · La columna del aviso: nombre, UNA línea de conteo («Lo reciben N por campanita · M por WhatsApp», cada tramo sin
     quiebre) y el interruptor con el chip en una fila que se parte sin montarse (.ct-avisos-opciones). La raíz de los
     controles de Mud es flex 1 1 auto: en estas filas no crece (si creciera empujaría el chip al otro extremo).
   · En un celular la tabla se desplaza en horizontal con la columna del aviso fija (.ct-avisos-fija), para no perder
     de vista a qué aviso corresponde cada casilla.
   · Los textos secundarios (.ct-avisos-nota) van en la letra del cuerpo: el caption del tema tower es mono de 10 px y
     en estas pantallas son frases, no datos (maestros.css §5 bis).
   · Revisión (29-09): la casilla desmarcada pero editable va en tinta y no del color del canal (.ct-aviso-canal); los
     interruptores del bloque WhatsApp a ras, como los de «Por rol»; en «Por persona» el aviso y el filtro arriba
     (.ct-avisos-barra); el conteo, un tramo por línea en el celular. */
.ct-avisos-nota { font-family: var(--stint-font-text); font-size: 12.5px; line-height: 1.45; color: var(--mud-palette-text-secondary); }
.ct-avisos-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.ct-avisos-leyenda-item { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ct-avisos-leyenda-item .mud-icon-root { font-size: 18px; }
.ct-avisos-leyenda > .ct-avisos-nota { flex: 1 1 360px; }
.ct-avisos-tabla table > tbody > tr > td { vertical-align: middle; }
.ct-avisos-tabla .ct-avisos-col-aviso { min-width: 300px; text-align: left; }
.ct-avisos-tabla .ct-avisos-col-canal { text-align: center; white-space: nowrap; }
.ct-avisos-nombre { font-weight: 600; }
/* el conteo: tramos sin quiebre y el «·» entre ellos puesto acá (no en el texto), para que en el celular vayan uno por
   línea sin un punto colgando; si en el escritorio no cabe, la fila se parte entre tramos y nunca a mitad de uno */
.ct-avisos-conteo { display: flex; flex-wrap: wrap; margin-top: 1px; }
.ct-avisos-conteo > span { white-space: nowrap; }
.ct-avisos-conteo > span + span::before { content: "·"; margin: 0 .4em; }
.ct-avisos-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 2px; }
.ct-avisos-opciones > * { flex: 0 0 auto; }
.ct-avisos-opciones > .mud-input-control { margin-left: -12px; }   /* la pista del interruptor, a ras del texto de arriba.
   Se ancla en la raíz del control y NO en .mud-switch: Mud repite esa clase en el rótulo (p.mud-switch) y el margen
   negativo lo corría sobre el pulgar. */
/* el rótulo del interruptor, del tamaño del texto de la celda: Mud lo fija en 1rem con !important (.mud-switch-label-medium) */
.ct-avisos-opciones p.mud-switch { font-size: 13px !important; }
.ct-avisos-par { display: inline-flex; align-items: center; justify-content: center; gap: 2px; vertical-align: middle; }
.ct-avisos-par > * { flex: 0 0 auto; }
.ct-avisos-par .mud-input-control { flex: 0 0 auto; }
/* AvisoCanal: marcada = llena y del color del canal (Mud, con !important); editable sin marcar = contorno en tinta
   secundaria; no editable = gris de Mud y, si además está sin marcar, tenue (lo que «no aplica»). La no editable
   MARCADA (lo que asignó la empresa, lo que pidió la persona, la ficha solo-vista) queda gris pero entera: es lo que la
   persona recibe y tiene que leerse. */
.ct-aviso-canal .mud-checkbox:not(.mud-disabled) .mud-button-root { color: var(--mud-palette-text-secondary); }
.ct-aviso-canal .mud-checkbox.mud-disabled .mud-button-root:not(:has(input:checked)) { opacity: .5; }
/* los interruptores sueltos de un bloque (WhatsApp de la empresa): la pista a ras del título y los campos, como en
   .ct-avisos-opciones (Mud deja 12 px de relleno a la izquierda de la pista) */
.ct-avisos-interruptores > .mud-input-control { margin-left: -12px; }
/* «Por persona»: arriba el aviso, el filtro y la acción masiva (a la derecha, con MudSpacer); se parte si no cabe */
.ct-avisos-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.ct-avisos-barra > * { flex: 0 0 auto; }
.ct-avisos-barra > .mud-select { flex: 0 1 420px; min-width: 240px; }   /* el Class de MudSelect no llega a esta raíz */
.ct-avisos-barra > .flex-grow-1 { flex: 1 1 0; }
/* los roles en fila (con más de cuatro, tres y un «+N»: el marcado). Sin mínimo propio: la tabla de «Por persona» tiene
   siete columnas y a 1480 cabe justa; un mínimo de 230-300 la hacía desplazarse en horizontal */
.ct-avisos-roles { display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; }
.ct-avisos-personas .ct-avisos-col-persona { min-width: 190px; }
/* la campanita y su «según su rol» / «lo pidió la persona» (+ «volver a la regla») en una línea: sin quiebre, la celda
   ya mide lo que su texto (un mínimo fijo solo le quitaría ancho a las otras); y la casilla a ras del rótulo de la
   columna: la casilla es un botón con relleno (4 px denso; 6 en el tema tower, maestros.css §5 bis) */
.ct-avisos-personas td .ct-avisos-nota { white-space: nowrap; }
.ct-avisos-personas .ct-aviso-canal { margin-left: -4px; }
/* la tabla de UNA persona («Mis avisos» y la ficha del usuario, que es un diálogo angosto): columna del aviso más corta */
.ct-avisos-persona .ct-avisos-col-aviso { min-width: 200px; }
.ct-avisos-persona .ct-avisos-porque { min-width: 120px; }
.ct-avisos-personas th, .ct-avisos-persona th, .ct-avisos-personas .ct-avisos-estado { white-space: nowrap; }
.ct-avisos-tabla .ct-avisos-acciones { white-space: nowrap; text-align: right; }
.ct-avisos-fija .ct-avisos-col-aviso { position: sticky; left: 0; z-index: 1; }
.ct-avisos-fija td.ct-avisos-col-aviso { background-color: var(--mud-palette-surface); }
.ct-wa-campo > * { width: 100%; }
@media (max-width: 960px) {   /* donde la tabla ya puede desplazarse: el borde marca la columna fija */
    .ct-avisos-fija .ct-avisos-col-aviso { box-shadow: inset -1px 0 0 var(--mud-palette-lines-default); }
}
@media (max-width: 600px) {
    .ct-avisos-tabla .ct-avisos-col-aviso { min-width: 170px; max-width: 180px; }
    /* un tramo por línea («Lo reciben 5 por campanita» / «0 por WhatsApp»), nunca partido a mitad de frase */
    .ct-avisos-conteo { flex-direction: column; }
    .ct-avisos-conteo > span { font-size: 12px; }
    .ct-avisos-conteo > span + span::before { content: none; }
    /* el chip «Regla sugerida por Stint» es más ancho que la columna fija: se parte en vez de salirse sobre la vecina */
    .ct-avisos-opciones .mud-chip { height: auto; max-width: 100%; white-space: normal; }
    .ct-avisos-opciones .mud-chip .mud-chip-content { white-space: normal; }
}

/* #529 (muestra del 08-10) — la campanita: la lista se desplaza y el pie «Configurar mis avisos» queda FIJO debajo, a la
   vista con o sin notificaciones (antes, con 15 avisos, el engranaje de arriba era la única entrada y no se notaba). */
.ct-campanita-lista { max-height: min(60vh, 520px); overflow-y: auto; }
/* #529 — /cuenta/whatsapp en el celular: los botones del paso a paso («Activar por WhatsApp», «Abrir WhatsApp») a ancho
   completo, que es donde se tocan con el pulgar; en pantallas más anchas, de su tamaño. */
@media (max-width: 599.98px) {
    .ct-ancho-xs { width: 100%; }
}
/* #529 — la franja de WhatsApp de «Mis avisos»: el texto de los estados nuevos (ambiente, empresa, Pendiente) al lado del
   ícono también en el celular (antes, en una fila aparte), y el botón a la derecha cuando cabe. */
.ct-franja-texto { flex: 1 1 220px; min-width: 0; }