/*
 * ============================================================================
 *  DEGAS — Utilidades de layout globales
 * ============================================================================
 *  Clases de uso transversal referenciadas desde markup de páginas y módulos.
 *  Antes vivían "implícitas" (se usaban en markup pero no estaban definidas en
 *  ningún .css → divs sin estilo y controles desalineados). Acá quedan definidas
 *  en un solo lugar. Todo en tokens de degas-tokens.css — SIN fallbacks en los
 *  var() (regla #2 de degas-tokens.css: los fallbacks divergen de la paleta).
 *
 *  Para layout de barra de filtros + header de página usar los componentes
 *  <FilterBar>/<FilterField>/<PageHeader> (UI.Contracts) — estas clases cubren
 *  los forms dentro de diálogos y los helpers sueltos.
 * ============================================================================
 */

/* ---- Texto auxiliar -------------------------------------------------------*/
.muted {
    color: var(--degas-text-muted);
    font-size: var(--degas-text-sm);
}

/* ---- Monoespaciada / numérico (rediseño Consola) --------------------------- */
/* Códigos (nemónicos, contratos, IDs) en JetBrains Mono; numerales tabulares para que las
   columnas de cifras alineen dígito a dígito. Opt-in por celda/columna (Class="degas-mono"). */
.degas-mono {
    font-family: var(--degas-font-mono);
    font-size: var(--degas-text-xs);
}

.degas-num {
    font-variant-numeric: tabular-nums;
}

/* ---- Solo lectores de pantalla (técnica de clip, NO display:none) ---------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Alertas inline (<DegasAlert> — DEGAS-593) ---------------------------- */
/* Severidades sobre los pares fg/bg de estado de los tokens. El role (alert vs
   status) lo decide el componente según la severidad. */
.degas-alert {
    border: 1px solid;
    border-radius: var(--degas-radius);
    padding: var(--degas-space-2) var(--degas-space-3);
    margin: var(--degas-space-3) 0;
    font-size: var(--degas-text-sm);
}

.degas-alert--error   { background: var(--degas-danger-bg);  color: var(--degas-danger);  border-color: var(--degas-danger); }
.degas-alert--warning { background: var(--degas-warning-bg); color: var(--degas-warning); border-color: var(--degas-warning); }
.degas-alert--success { background: var(--degas-success-bg); color: var(--degas-success); border-color: var(--degas-success); }
.degas-alert--info    { background: var(--degas-info-bg);    color: var(--degas-info);    border-color: var(--degas-info); }

/* ---- Badge de estado (chips de Estado/Resultado en grids y campana) -------- */
/* Consolida .proc-estado / .log-estado / .notif-bell-item-estado (DEGAS-593).
   Modificadores = el vocabulario de estados de proceso + `is-brand` (categoría). */
.degas-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border-radius: var(--degas-radius);
    font-size: var(--degas-text-2xs);
    font-weight: var(--degas-font-weight-semibold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.degas-badge.is-ok       { background: var(--degas-success-bg);   color: var(--degas-success); }
.degas-badge.is-warn     { background: var(--degas-warning-bg);   color: var(--degas-warning); }
.degas-badge.is-err      { background: var(--degas-danger-bg);    color: var(--degas-danger); }
.degas-badge.is-progress { background: var(--degas-info-bg);      color: var(--degas-info); }
.degas-badge.is-pending  { background: var(--degas-pending-bg);   color: var(--degas-pending); }
.degas-badge.is-brand    { background: var(--degas-primary-soft); color: var(--degas-primary); }

/* ---- Barra de versión (<DegasVersionBar> — DEGAS-855) --------------------- */
/* Vive dentro del slot <Actions> del DegasFilterBar, así que se apoya en su
   baseline (align-items:flex-end) y sólo agrupa sus tres bloques: navegación,
   estado y comandos. Global y no scoped: es CSS transversal de UI.Contracts
   (regla #9 — el fingerprint del bundle scoped de la RCL se queda viejo). */
.degas-versionbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--degas-space-2) var(--degas-space-4);
}

.degas-versionbar-nav {
    display: flex;
    align-items: center;
    gap: var(--degas-space-1);
}

/* min-width para que el texto no baile de ancho al pasar de "1 de 9" a "10 de 12"
   y los botones de navegación no se muevan bajo el cursor. */
.degas-versionbar-indicador {
    font-size: var(--degas-text-sm);
    font-weight: var(--degas-font-weight-semibold);
    color: var(--degas-text);
    min-width: 10ch;
    text-align: center;
    white-space: nowrap;
}

.degas-versionbar-estado {
    display: flex;
    align-items: center;
    gap: var(--degas-space-2);
}

.degas-versionbar-detalle {
    font-size: var(--degas-text-sm);
    color: var(--degas-text-muted);
    white-space: nowrap;
}

.degas-versionbar-acciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--degas-space-2);
}

/* ---- Estado vacío del Log de Envíos (<DegasLogEnvios>) -------------------- */
.degas-log-empty {
    padding: var(--degas-space-4);
    color: var(--degas-text-muted);
    text-align: center;
}

/* ---- Hints junto a grids / toolbars --------------------------------------*/
.grid-hint,
.filter-hint {
    color: var(--degas-text-muted);
    font-size: var(--degas-text-sm);
}

/* ---- Mensajes de <ValidationMessage> (EditForm de Blazor) ----------------- */
.validation-message {
    color: var(--degas-danger);
    font-size: var(--degas-text-sm);
    margin-top: var(--degas-space-1);
}

/* ---- Form grid (dentro de DegasActionDialog) ------------------------------ */
/* Layout de 2 columnas para forms de ABM; los campos full-width ocupan ambas. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--degas-space-3) var(--degas-space-4);
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: var(--degas-space-1);
    grid-column: 1 / -1;          /* por defecto ocupa el ancho completo       */
}

.form-row-half {
    grid-column: span 1;          /* media fila (ej. vigencia desde/hasta)      */
}

.form-row label {
    font-size: var(--degas-text-xs);
    font-weight: var(--degas-font-weight-medium);
    color: var(--degas-text-muted);
}

@media (max-width: 560px) {
    .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .form-row-half {
        grid-column: 1 / -1;
    }
}

/*
 * ----------------------------------------------------------------------------
 *  Footer estándar de modales / diálogos / editores  (<DegasModalFooter>)
 * ----------------------------------------------------------------------------
 *  Único look de footer para TODA la app: cluster de acciones alineado a la
 *  DERECHA, compacto (los botones NO se estiran al ancho completo). La acción
 *  PRIMARIA va a la IZQUIERDA del cluster (convención Windows/WinForms del
 *  stack legacy); la secundaria (Cancelar/Cerrar) a su derecha.
 *
 *  Si hay una acción DESTRUCTIVA en un editor, va separada al extremo izquierdo
 *  (`--split` ⇒ space-between) para alejarla del cluster seguro y evitar
 *  clicks fatales. La confirmación de baja es la excepción documentada: ahí
 *  Cancelar toma el lugar seguro (izquierda) y Eliminar (rojo) va a la derecha
 *  — eso lo arma DegasActionDialog con Destructive=true, no esta clase.
 *
 *  Global (no scoped): el bundle scoped de UI.Contracts no se sirve confiable
 *  en el host del Api (ver docs/blazor-boilerplate.md gotcha #9). Por eso un
 *  editor de un módulo (RoleEditor) y uno de UI.Contracts (PuntoEditor) rinden
 *  idéntico. Todo en tokens de degas-tokens.css.
 * ----------------------------------------------------------------------------
 */
.degas-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--degas-space-2);
    margin-top: var(--degas-space-4);
    padding-top: var(--degas-space-3);
    border-top: 1px solid var(--degas-border);
}

/* Hay acción destructiva → separarla del cluster seguro. */
.degas-modal-footer--split {
    justify-content: space-between;
}

/* Embebido en un host que ya provee su propio chrome de acciones. */
.degas-modal-footer--hidden {
    display: none;
}

.degas-modal-footer-main,
.degas-modal-footer-danger {
    display: flex;
    align-items: center;
    gap: var(--degas-space-2);
}

/*
 * ----------------------------------------------------------------------------
 *  Búsqueda rápida client-side de la barra de filtros (Puntos, Roles, …)
 * ----------------------------------------------------------------------------
 *  Para listados sin filtros propios: una caja de búsqueda que filtra las filas
 *  ya cargadas en memoria. Mantiene la estructura de 3 filas (título · filtros ·
 *  grilla) sin inventar filtros server-side. Ancho cómodo por default.
 * ----------------------------------------------------------------------------
 */
.degas-quicksearch {
    width: 280px;
    max-width: 100%;
}

/*
 * ----------------------------------------------------------------------------
 *  Visor de "info adicional" de procesos (<NotificationResourceViewer>)
 * ----------------------------------------------------------------------------
 *  Global (no scoped) — el host vive en UI.Contracts, cuyo bundle scoped no se
 *  sirve confiablemente en este host (mismo motivo que el resto de este archivo).
 *  Comparte look con el visor de logs ABI2 del módulo.
 * ----------------------------------------------------------------------------
 */
.archivo-viewer {
    margin: 0;
    max-height: 60vh;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--degas-font-mono);
    font-size: var(--degas-text-sm);
    line-height: 1.45;
    background: var(--degas-surface-sunken);
    border: 1px solid var(--degas-border);
    border-radius: var(--degas-radius-sm);
    padding: var(--degas-space-3);
}

.archivo-cargando {
    padding: var(--degas-space-5);
    text-align: center;
    color: var(--degas-text-muted);
}

/* Disclosure "Ver contenido leído" de la carga de archivo local: el <summary> es la afordancia
   clickeable, así que lleva cursor y un área de toque de 24 px (WCAG 2.5.8). */
.archivo-preview {
    margin: var(--degas-space-3) 0;
}

.archivo-preview > summary {
    cursor: pointer;
    padding: var(--degas-space-1) 0;
    min-height: 24px;
    color: var(--degas-text-muted);
    font-size: var(--degas-text-sm);
}

.archivo-preview[open] > summary {
    margin-bottom: var(--degas-space-2);
}

.archivo-truncado {
    margin-bottom: var(--degas-space-3);
    padding: var(--degas-space-2) var(--degas-space-3);
    border-radius: var(--degas-radius-sm);
    background: var(--degas-warning-bg);
    color: var(--degas-warning);
    font-size: var(--degas-text-sm);
}

/*
 * ----------------------------------------------------------------------------
 *  Sección de grilla con título (páginas con varias grillas apiladas)
 * ----------------------------------------------------------------------------
 *  Global (no scoped) por la misma razón que el resto de este archivo (gotcha #9).
 *  Rotula cada grilla en una página multi-grilla — ej. el dual-grid coordinado de
 *  Nominación Transporte (DEGAS-532/556): "Transporte" y "Gas".
 * ----------------------------------------------------------------------------
 */
.degas-grid-section {
    margin-top: var(--degas-space-5);
}

.degas-grid-section:first-of-type {
    margin-top: 0;
}

.degas-grid-section-title {
    margin: 0 0 var(--degas-space-2);
    font-size: var(--degas-text-lg);
    font-weight: var(--degas-font-weight-semibold);
    color: var(--degas-text);
}

/* "Eyebrow" de subsistema en las cards del home (FeatureCards) — rotula el sub-menú (Gas /
   Transporte / …) arriba del título, para desambiguar cards homónimas en el grid plano del home. */
.home-card-eyebrow {
    font-size: var(--degas-text-2xs);
    font-weight: var(--degas-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--degas-text-muted);
}

/*
 * ----------------------------------------------------------------------------
 *  Cards del home de módulo (DegAbiHome / InfraestructuraHome / SeguridadHome)
 * ----------------------------------------------------------------------------
 *  Antes vivían byte-idénticas en 3 .razor.css scoped (y con la paleta Tailwind
 *  hardcodeada). Consolidadas acá en DEGAS-593, en tokens. Global por gotcha #9.
 * ----------------------------------------------------------------------------
 */
.module-intro {
    color: var(--degas-text-muted);
    max-width: 720px;
    line-height: 1.5;
    margin: var(--degas-space-1) 0 var(--degas-space-5) 0;
}

.home-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--degas-space-4);
}

.home-cards a.home-card {
    display: flex;
    flex-direction: column;
    gap: var(--degas-space-2);
    padding: var(--degas-space-4);
    background: var(--degas-surface);
    border: 1px solid var(--degas-border);
    border-radius: var(--degas-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.home-cards a.home-card:hover,
.home-cards a.home-card:focus-visible {
    border-color: var(--degas-primary);
    box-shadow: var(--degas-shadow);
}

.home-card h3 {
    margin: 0;
    font-size: var(--degas-text-lg);
    color: var(--degas-text);
}

.home-card p {
    margin: 0;
    font-size: var(--degas-text-md);
    color: var(--degas-text-muted);
}

/*
 * ----------------------------------------------------------------------------
 *  Combo con alta inline (<DegasLookupConAlta>)
 * ----------------------------------------------------------------------------
 *  Combo (ComboLookup) + botón "+" que abre el editor de esa entidad en modo Alta.
 *  El combo se estira (flex:1) y el "+" queda compacto a su derecha. min-width:0
 *  en el combo es imprescindible para que el flex item no desborde el ancho del
 *  DegasFormField que lo contiene.
 *
 *  Global (no scoped): el componente vive en UI.Contracts, cuyo bundle scoped no
 *  se sirve confiable en el host del Api (mismo motivo que el resto del archivo).
 * ----------------------------------------------------------------------------
 */
.degas-lookup-con-alta {
    display: flex;
    align-items: center;
    gap: var(--degas-space-2);
}

.degas-lookup-con-alta__combo {
    flex: 1 1 auto;
    min-width: 0;
}

.degas-lookup-con-alta__add {
    flex: 0 0 auto;
}

/*
 * ----------------------------------------------------------------------------
 *  Tabla pivot estándar (<DegasPivot>)
 * ----------------------------------------------------------------------------
 *  Global (no scoped) — el componente vive en UI.Contracts, cuyo bundle scoped
 *  no se sirve confiable en el host del Api (gotcha #9, mismo motivo que el
 *  resto de este archivo). Toolbar + panel de configuración (qué campo va a
 *  fila/columna/medida) + estado vacío. El render del cross-tab lo hace Telerik
 *  PivotGrid; estas clases son sólo el chrome alrededor. Todo en tokens.
 *
 *  DEGAS-593: se eliminó el hack .degas-pivot-config-btn — con las familias
 *  --kendo-color-* completas mapeadas, un TelerikButton ThemeColor=Primary
 *  estándar rinde el azul de marca sin !important.
 * ----------------------------------------------------------------------------
 */
.degas-pivot {
    display: flex;
    flex-direction: column;
    gap: var(--degas-space-2);
}

.degas-pivot-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--degas-space-1);
    padding-bottom: var(--degas-space-1);
    border-bottom: 1px solid var(--degas-border);
}

.degas-pivot-config {
    display: flex;
    flex-wrap: wrap;
    gap: var(--degas-space-4) var(--degas-space-5);
    padding: var(--degas-space-3);
    background: var(--degas-surface-sunken);
    border: 1px solid var(--degas-border);
    border-radius: var(--degas-radius-sm);
}

.degas-pivot-config-group {
    display: flex;
    flex-direction: column;
    gap: var(--degas-space-2);
    min-width: 200px;
}

.degas-pivot-config-title {
    font-size: var(--degas-text-xs);
    font-weight: var(--degas-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--degas-text-muted);
}

.degas-pivot-config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--degas-space-3);
    min-width: 240px;
}

.degas-pivot-config-label {
    font-size: var(--degas-text-md);
    color: var(--degas-text);
}

/* Reordenar dimensiones por drag (la jerarquía = el orden dentro de cada área). */
.degas-pivot-config-left {
    display: flex;
    align-items: center;
    gap: var(--degas-space-2);
    min-width: 0;
}

/* Handle de reorden: <button> nativo (draggable + operable por teclado, DEGAS-593).
   Target mínimo 24px (WCAG 2.5.8) — el glifo es chico pero el área clickeable no. */
.degas-pivot-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--degas-target-min);
    min-height: var(--degas-target-min);
    padding: 0;
    background: transparent;
    border: none;
    cursor: grab;
    color: var(--degas-text-muted);
    font-size: var(--degas-text-lg);
    line-height: 1;
    user-select: none;
    flex: none;
}

.degas-pivot-drag-handle:active { cursor: grabbing; }

/* Indicador de inserción: la fila bajo el cursor de drop recibe una línea azul arriba (clases puestas
   por pivot-dnd.js durante el drag). */
.degas-pivot-config-row.is-drag-over {
    box-shadow: inset 0 2px 0 0 var(--degas-primary);
    border-radius: var(--degas-radius-sm);
}

.degas-pivot-config-row.is-dragging { opacity: 0.45; }

/* Segmented control (Fila / Columna / Oculto) por dimensión. */
.degas-seg {
    display: inline-flex;
    border: 1px solid var(--degas-border-input);
    border-radius: var(--degas-radius-sm);
    overflow: hidden;
    background: var(--degas-surface);
}

.degas-seg-btn {
    font: inherit;
    font-size: var(--degas-text-xs);
    line-height: 1;
    min-height: var(--degas-target-min);   /* WCAG 2.5.8 */
    padding: 0.3rem 0.55rem;
    border: 0;
    border-left: 1px solid var(--degas-border);
    background: transparent;
    color: var(--degas-text-muted);
    cursor: pointer;
}

.degas-seg-btn:first-child { border-left: 0; }
.degas-seg-btn:hover { background: var(--degas-surface-hover); }

.degas-seg-btn.is-active {
    background: var(--degas-primary);
    color: var(--degas-on-primary);
    font-weight: var(--degas-font-weight-semibold);
}

/* Chips de medidas (toggle on/off). */
.degas-pivot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--degas-space-2);
}

.degas-chip {
    font: inherit;
    font-size: var(--degas-text-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: var(--degas-target-min);   /* WCAG 2.5.8 */
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--degas-border-input);
    border-radius: 999px;
    background: var(--degas-surface);
    color: var(--degas-text-muted);
    cursor: pointer;
}

.degas-chip:hover { background: var(--degas-surface-hover); }

.degas-chip.is-on {
    background: var(--degas-primary-soft);
    border-color: var(--degas-primary);
    color: var(--degas-primary);
    font-weight: var(--degas-font-weight-semibold);
}

.degas-chip-mark { font-size: var(--degas-text-xs); width: 0.8em; text-align: center; }

.degas-pivot-empty {
    padding: var(--degas-space-5);
    text-align: center;
    color: var(--degas-text-muted);
    background: var(--degas-surface-sunken);
    border: 1px dashed var(--degas-border);
    border-radius: var(--degas-radius-sm);
}

/*
 * ----------------------------------------------------------------------------
 *  Cross-tab propio (<DegasPivotTabla>) — DEGAS-983
 * ----------------------------------------------------------------------------
 *  Reemplaza el render del PivotGrid de Telerik por una tabla nuestra sobre el
 *  DegasPivotComputeResult (el mismo que exporta el .xlsx). Global igual que el
 *  resto de este archivo (gotcha #9: el bundle scoped de UI.Contracts no se
 *  sirve confiable desde el host del Api).
 *
 *  Dos cosas que este CSS tiene que sostener y no son obvias:
 *
 *   1. STICKY EN DOS EJES. Encabezado fijo arriba + columnas clave fijas a la
 *      izquierda exige `border-collapse: separate` (con collapse los bordes de
 *      una celda sticky se quedan atrás al scrollear), así que los bordes van
 *      celda por celda y no en la tabla.
 *
 *   2. EL ALTO DE LA FILA DE ENCABEZADO ES FIJO (--degas-pivot-th-h). El
 *      segundo nivel del encabezado necesita saber a qué altura pegarse, y eso
 *      no se puede leer del layout desde CSS. Si se cambia el padding de un th,
 *      hay que cambiar el token: si no, el nivel 2 se superpone al 1.
 *
 *  El ancho de las columnas clave lo inyecta el componente como
 *  --degas-pivot-clave-w (necesita el mismo número en C# para calcular el
 *  `left` de cada columna fija).
 * ----------------------------------------------------------------------------
 */
.degas-pivot-tabla-wrap {
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--degas-border);
    border-radius: var(--degas-radius-sm);
    background: var(--degas-surface);
    --degas-pivot-th-h: 2rem;
}

.degas-pivot-tabla {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--degas-text-sm);
    color: var(--degas-text);
}

.degas-pivot-tabla th,
.degas-pivot-tabla td {
    padding: var(--degas-space-1) var(--degas-space-2);
    border-right: 1px solid var(--degas-border);
    border-bottom: 1px solid var(--degas-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.degas-pivot-tabla thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: var(--degas-pivot-th-h);
    background: var(--degas-surface-sunken);
    font-weight: var(--degas-font-weight-semibold);
    text-align: center;
}

/* Segundo nivel del encabezado (la medida de cada columna, o la segunda dimensión de columna): se
   pega DEBAJO del primero. Con tres o más niveles, el componente pone el top de cada uno inline. */
.degas-pivot-tabla thead tr + tr th {
    top: var(--degas-pivot-th-h);
}

.degas-pivot-tabla-grupo { text-align: center; }

/* Encabezado por niveles (dos o más dimensiones de columna): el valor de la dimensión exterior abarca
   muchas columnas (un contrato sobre 19 referencias ronda los 2.400 px). Centrado, el rótulo se pierde
   al scrollear en horizontal: va a la izquierda y se pega junto a las claves fijas mientras su tramo
   esté a la vista. overflow: clip y no hidden, porque hidden haría de la celda un contenedor de scroll
   y anularía el sticky del rótulo. El top de cada nivel lo pone el componente (inline). */
.degas-pivot-tabla thead th.degas-pivot-tabla-tramo {
    text-align: left;
    overflow: clip;
}

/* El left es el borde derecho de la última clave fija más un respiro: las claves son content-box, así
   que cada una ocupa su ancho más el padding y el borde de la celda (160 + 2 × 8 + 1). */
.degas-pivot-tabla-tramo > span {
    display: inline-block;
    position: sticky;
    left: calc(var(--degas-pivot-fijas-w, 0px) + 3 * var(--degas-space-2) + 1px);
}

/* Columnas de clave de fila: a la izquierda, y las primeras N fijas en horizontal. */
.degas-pivot-tabla-clave {
    width: var(--degas-pivot-clave-w, 160px);
    text-align: left;
    font-weight: normal;  /* un <th> viene en bold por default y la clave de fila no lo necesita */
    background: var(--degas-surface);
}

.degas-pivot-tabla-clave.is-fija {
    position: sticky;
    z-index: 1;
    background: var(--degas-surface-sunken);
}

/* Intersección encabezado × clave fija: tiene que tapar a los dos. */
.degas-pivot-tabla thead th.degas-pivot-tabla-clave.is-fija,
.degas-pivot-tabla tfoot th.degas-pivot-tabla-clave.is-fija {
    z-index: 3;
    background: var(--degas-surface-sunken);
}

.degas-pivot-tabla-dato {
    text-align: right;
    /* Dígitos de ancho fijo: sin esto las columnas de números "bailan" al comparar filas. */
    font-variant-numeric: tabular-nums;
}

.degas-pivot-tabla td.is-total { background: var(--degas-surface-hover); }

/* Formato condicional de la Diferencia — el equivalente del legacy, resuelto en C#. */
.degas-pivot-tabla td.is-neg { color: var(--degas-danger); }
.degas-pivot-tabla td.is-pos { color: var(--degas-info); }

/* Fila de totales generales: fija abajo (Telerik la dejaba irse con el scroll). */
.degas-pivot-tabla tfoot th,
.degas-pivot-tabla tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--degas-surface-sunken);
    font-weight: var(--degas-font-weight-semibold);
    border-top: 1px solid var(--degas-border-strong);
}

.degas-pivot-tabla-nota {
    margin: var(--degas-space-1) 0 0;
    font-size: var(--degas-text-xs);
    color: var(--degas-text-muted);
}

/*
 * ----------------------------------------------------------------------------
 *  Gráfico de series estándar (<DegasChart>) — DEGAS-533
 * ----------------------------------------------------------------------------
 *  Global (no scoped) y NO hay DegasChart.razor.css, por consistencia con
 *  <DegasPivot> y por el gotcha #9 (el bundle scoped de UI.Contracts no se sirve
 *  confiable en el host del Api). No agregar uno.
 *
 *  Chrome alrededor del SVG: card, header con toggle/título/toolbar, estados
 *  vacío y notas. El plot lo dibuja Telerik, themeado por las variables
 *  --kendo-color-series-* de telerik-overrides.css + el Color explícito por
 *  serie que resuelve el componente desde --degas-chart-*.
 * ----------------------------------------------------------------------------
 */
.degas-chart {
    display: flex;
    flex-direction: column;
    gap: var(--degas-space-2);
    /* La card TIENE que declarar su fondo: sin esto, en tema oscuro el plot queda
       como un rectángulo más claro que la página (--degas-surface-muted). */
    background: var(--degas-surface);
    border: 1px solid var(--degas-border);
    border-radius: var(--degas-radius-lg);
    padding: var(--degas-space-3);
}

.degas-chart-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--degas-space-2);
}

.degas-chart-title {
    font-size: var(--degas-text-lg);
    font-weight: var(--degas-font-weight-semibold);
    color: var(--degas-text);
}

.degas-chart-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Mínimo de área clickable (WCAG 2.5.8). */
    min-width: var(--degas-target-min);
    min-height: var(--degas-target-min);
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--degas-radius-sm);
    color: var(--degas-text-muted);
    cursor: pointer;
    line-height: 1;
}

.degas-chart-toggle:hover {
    background: var(--degas-surface-sunken);
    color: var(--degas-text);
}

.degas-chart-busy {
    font-size: var(--degas-text-sm);
    color: var(--degas-text-muted);
}

/* Empuja la toolbar al extremo opuesto del título. */
.degas-chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--degas-space-1);
    margin-left: auto;
}

.degas-chart-body {
    display: flex;
    flex-direction: column;
    gap: var(--degas-space-2);
}

/* Estado vacío / "preparando": mismo lenguaje visual que .degas-pivot-empty.
   Es un div propio y NO un <DegasAlert>: los conteos exactos de .degas-alert
   del E2E del design-system dependen de que nadie sume alertas de más. */
.degas-chart-empty {
    padding: var(--degas-space-5);
    text-align: center;
    color: var(--degas-text-muted);
    background: var(--degas-surface-sunken);
    border: 1px dashed var(--degas-border);
    border-radius: var(--degas-radius-sm);
}

/* Nota discreta arriba del plot (tope de series, presupuesto de puntos). */
.degas-chart-note {
    font-size: var(--degas-text-sm);
    color: var(--degas-text-muted);
}

/* Selector inline en la toolbar del gráfico. En Linepack es un <select> NATIVO: no re-consulta, sólo
   elige qué serie se dibuja, y así no arrastra el peso ni los gotchas de ValueExpression de un
   TelerikDropDownList dentro de un RenderFragment. DegasChartSelectorSeries reusa la misma caja con
   chips. */
.degas-chart-picker {
    display: inline-flex;
    align-items: center;
    /* wrap: el selector de series puede tener una chip por versión/marca y no entra en una línea
       del header del gráfico. */
    flex-wrap: wrap;
    gap: var(--degas-space-1);
    font-size: var(--degas-text-sm);
}

.degas-chart-picker-label {
    color: var(--degas-text-muted);
}

.degas-chart-picker-select {
    min-height: var(--degas-control-height);
    padding: 0 var(--degas-space-1);
    font-family: inherit;
    font-size: var(--degas-text-sm);
    color: var(--degas-text);
    background: var(--degas-surface);
    border: 1px solid var(--degas-border-input);
    border-radius: var(--degas-radius-sm);
}

/* Checkbox + etiqueta en línea (ej. "Mostrar columnas de diferencia" en la barra de filtros). */
.degas-check-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--degas-space-1);
    cursor: pointer;
    font-size: var(--degas-text-md);
    color: var(--degas-text);
}

/*
 * ----------------------------------------------------------------------------
 *  Barra de filtros — botón Actualizar icon-only + rango de fechas (DEGAS-648)
 * ----------------------------------------------------------------------------
 *  Global (no scoped): el <svg> del ícono y el <span> de error los renderizan
 *  Telerik / componentes de UI.Contracts fuera del scope; global garantiza que
 *  el estilo aplique en el host del Api (mismo criterio que el resto del archivo).
 * ----------------------------------------------------------------------------
 */

/* <DegasRefreshButton> Busy ⇒ ícono de refresh girando (reemplaza el label "Cargando…").
   Bajo prefers-reduced-motion lo anula el kill-switch global (degas-app-shell.css). */
.degas-refresh-btn.is-busy .k-svg-icon,
.degas-refresh-btn.is-busy .k-icon {
    animation: degas-spin 0.8s linear infinite;
}

@keyframes degas-spin {
    to { transform: rotate(360deg); }
}

/* <DegasDateRangeFilter> aviso inline cuando Desde > Hasta. Se alinea al baseline de los pickers
   (la barra usa align-items:flex-end); wrap natural si no entra en la fila. */
.degas-daterange-error {
    align-self: center;
    color: var(--degas-danger);
    font-size: var(--degas-text-sm);
    font-weight: var(--degas-font-weight-medium);
}

/* <DegasToggleButton> (DEGAS-648): estado on/off inequívoco. OFF = outline atenuado; ON = sólido
   primary. !important para ganarle a las reglas del tema Telerik (el ToggleButton "selected"
   default usa la familia base, no primary). Como los valores son tokens, el tema oscuro
   los resuelve igual — el !important no bloquea el theme switch. */
.degas-toggle.k-button {
    background: var(--degas-surface) !important;
    border: 1px solid var(--degas-border-input) !important;
    color: var(--degas-text-muted) !important;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.degas-toggle.k-button:hover {
    border-color: var(--degas-primary) !important;
    color: var(--degas-text) !important;
}

.degas-toggle.k-button.k-selected {
    background: var(--degas-primary) !important;
    border-color: var(--degas-primary) !important;
    color: var(--degas-on-primary) !important;
}

.degas-toggle.k-button.k-selected:hover {
    background: var(--degas-primary-hover) !important;
    border-color: var(--degas-primary-hover) !important;
    color: var(--degas-on-primary) !important;
}

/* Selector de período multimodo (DegasPeriodFilter, DEGAS-890): los botones Día | Mes | Rango y el
   toggle de vínculo, en línea dentro del mismo DegasFilterField "Período". */
.degas-period-selector {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   Detalle read-only (DegasDetailList / DegasDetailItem) y estado vacío
   (DegasEmptyState) — DEGAS-544 (rediseño de los tabs de rol de Entidad Legal).

   Van ACÁ, global, y no en un .razor.css de UI.Contracts, por la norma de
   ui-ux-standards.md §3 (misma decisión que .degas-modal-footer*): el CSS
   transversal de la RCL va global.

   El bundle scoped de la RCL SÍ se sirve — Api.styles.css lo trae con un
   @import fingerprinteado y las reglas de DegasFilterBar / RefSec se aplican.
   El problema es que ese fingerprint se queda viejo con facilidad (agregar un
   .razor.css nuevo a la RCL con dotnet watch corriendo): medido en el browser,
   .degas-rol-datos tenía 0 reglas mientras .degas-filterbar tenía 8 del MISMO
   bundle, así que el <dl> del editor caía al default (etiqueta arriba, valor
   indentado) — la razón por la que los tabs "se veían mal". Global elimina toda
   esa clase de problema.
   ========================================================================== */

.degas-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--degas-space-2) var(--degas-space-5);
    margin: 0;
    padding: var(--degas-space-4);
    background: var(--degas-surface-sunken);
    border: 1px solid var(--degas-border);
    border-radius: var(--degas-radius);
}

/* Un ítem = etiqueta arriba, valor abajo. Apilado (no 2 columnas por ítem) para que los
   valores largos no empujen la etiqueta ni desalineen las filas entre sí. */
.degas-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.degas-detail-item.is-wide {
    grid-column: 1 / -1;
}

.degas-detail dt {
    font-size: var(--degas-text-sm);
    font-weight: var(--degas-font-weight-medium);
    color: var(--degas-text-muted);
}

.degas-detail dd {
    margin: 0;
    font-size: var(--degas-text-md);
    color: var(--degas-text);
    overflow-wrap: anywhere;
}

/* Flag booleano en negativo: texto atenuado, no badge (ver DegasDetailItem y DegasFlag:
   el badge "pending" no se distingue del fondo del panel). */
.degas-detail-no,
.degas-flag-no {
    color: var(--degas-text-muted);
}

/* Sin dato: el guion ES el portador de la información "este campo está vacío", no un adorno,
   así que va con --degas-text-muted (5.4:1 sobre el panel). NO --degas-text-subtle: §0.1 lo
   reserva a deshabilitado/decorativo y da 2.8:1 sobre surface-sunken — abajo del piso de 3:1,
   y el par no está en DesignTokensContrastTests, así que CI no lo atraparía. */
.degas-detail-vacio {
    color: var(--degas-text-muted);
}

@media (max-width: 560px) {
    .degas-detail {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Estado vacío enmarcado -------------------------------------------- */
.degas-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--degas-space-2);
    padding: var(--degas-space-6) var(--degas-space-4);
    background: var(--degas-surface-sunken);
    border: 1px dashed var(--degas-border-strong);
    border-radius: var(--degas-radius);
}

/* El ícono sí es decorativo (aria-hidden), así que acá --degas-text-subtle es su rol correcto.
   El tamaño lo fija el width/height del svg de abajo — sin font-size literal (§0.2). */
.degas-empty-icon {
    display: inline-flex;
    color: var(--degas-text-subtle);
}

.degas-empty-icon .k-svg-icon {
    width: 1.75rem;
    height: 1.75rem;
}

.degas-empty-title {
    margin: 0;
    font-size: var(--degas-text-lg);
    font-weight: var(--degas-font-weight-semibold);
    color: var(--degas-text);
}

.degas-empty-desc {
    margin: 0;
    max-width: 46ch;
    font-size: var(--degas-text-sm);
    color: var(--degas-text-muted);
}

.degas-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--degas-space-2);
    margin-top: var(--degas-space-1);
}

/* ---- Cabecera de sección con acciones a la derecha --------------------- */
/* Complementa .degas-grid-section-title cuando la sección tiene comandos propios
   (los tabs de rol: título del rol + Ver/Editar/Eliminar). */
.degas-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--degas-space-2);
    margin-bottom: var(--degas-space-2);
}

.degas-section-head > .degas-grid-section-title {
    margin: 0;
}

.degas-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--degas-space-2);
}

/* Fila de acciones de PÁGINA justo debajo de un form (los diálogos usan DegasModalFooter / el
   override de TelerikDialog, que ya traen su propio separador). Sin esto los botones quedan pegados
   al último campo — se vio en la pantalla de carga de archivo local ABI2 (DEGAS-567). El selector
   por hermano deja intactos los .degas-section-actions que van dentro de un .degas-section-head.
   Lo mismo debajo de un panel de sólo lectura (DegasDetailList), que tiene margin 0 (DEGAS-947). */
.form-grid + .degas-section-actions,
.degas-detail + .degas-section-actions {
    margin-top: var(--degas-space-3);
    margin-bottom: var(--degas-space-3);
}

/* ---- Marca de "rol asignado" en el header de un tab -------------------- */
/* El tab strip de Entidad Legal muestra 5 roles posibles; sin esta marca hay que
   entrar a cada tab para descubrir cuáles cumple la entidad. */
.degas-tab-head {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.degas-tab-head .degas-badge {
    /* Compacto: el badge convive con el label del tab, no es un chip de grilla. */
    padding: 0 0.35rem;
    letter-spacing: 0.02em;
}

/* Selector de contacto del tab Contactos de Entidad Legal. Estaba en el .razor.css scoped
   (que no se sirve, gotcha #9) — el label y el combo quedaban apilados sin alinear. */
.degas-contacto-selector {
    display: flex;
    align-items: center;
    gap: var(--degas-space-3);
    margin-bottom: var(--degas-space-3);
    max-width: 480px;
}

.degas-contacto-selector label {
    font-size: var(--degas-text-sm);
    font-weight: var(--degas-font-weight-medium);
    color: var(--degas-text-muted);
    white-space: nowrap;
}

.degas-contacto-selector > :last-child {
    flex: 1 1 auto;
}

/* ===== DegasSplit — splitter vertical (TelerikSplitter) =====
   El contenido de un panel tiene que LLENARLO. Se hace con flex y NO con height:100%: el panel
   flexible del splitter no tiene alto explicito (se lo da flex), y un porcentaje contra un padre sin
   alto definido cae a `auto` sin avisar — medido en el spike. min-height:0 es imprescindible o el
   item se niega a encogerse por debajo de su contenido. */
.degas-split .k-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.degas-split .k-pane > .degas-pivot,
.degas-split .k-pane > .degas-chart {
    flex: 1 1 auto;
    min-height: 0;
}

.degas-split .k-pane > .degas-pivot > .k-pivotgrid,
.degas-split .k-pane > .degas-pivot > .degas-pivot-tabla-wrap,
.degas-split .k-pane > .degas-chart > .degas-chart-body {
    flex: 1 1 auto;
    /* Piso del dibujo: sin esto el panel chico se come el cuerpo entero (medido: header + toolbar
       de chips = 164 px, con el panel en 162 el <svg> quedaba en 0 y el grafico desaparecia). Al
       llegar al piso, el panel scrollea en vez de aplastarlo. */
    min-height: 120px;
}

/* ===================================================================
   Asistente IA
   Global y no scoped: es un componente de UI.Contracts (gotcha #9).
   Sólo tokens, sin hex y sin fallbacks en var() — regla de degas-tokens.css.
   =================================================================== */

/* --- pestaña del borde derecho (DegasAsistentePestana) ---
   El lanzador que se ve desde cualquier pantalla; el otro es el ícono del pie del sidebar
   (DegasAsistenteToggle, con el resto del pie en degas-app-shell.css). Fija contra la ventana,
   pegada al borde derecho y ABAJO, lejos de los toasts, que salen arriba a la derecha: queda a
   --degas-space-6 del borde inferior, el mismo token del padding inferior de .app-main, así que en
   las pantallas cuya grilla llena el alto queda a la altura del paginador. Mide 4px menos que el
   gutter del shell y vive adentro de él, así que no tapa la grilla, su barra de scroll ni el conteo
   del paginador: el botón flotante que tuvo el asistente hasta oct-2026 sí (ui-ux-standards § 5.7).
   Los 20px de ancho cumplen WCAG 2.5.8 por control equivalente (el ícono de 28px del pie abre el
   mismo panel) y por espaciado (el círculo de 24px centrado en la pestaña no toca otro target: la
   grilla termina donde empieza el gutter); ver ui-ux-standards § 0.4. Sin sombra (Consola): el
   relleno primario ya la separa del fondo. */
.degas-asistente-pestana {
    position: fixed;
    right: 0;
    bottom: var(--degas-space-6);
    z-index: var(--degas-z-lanzador);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--degas-space-1);
    width: calc(var(--degas-shell-gutter) - var(--degas-space-1));
    padding: var(--degas-space-2) 0;
    border: none;
    border-radius: var(--degas-radius-lg) 0 0 var(--degas-radius-lg);
    background: var(--degas-primary);
    color: var(--degas-on-primary);
    font-family: inherit;
    font-size: var(--degas-text-xs);
    font-weight: var(--degas-font-weight-semibold);
    letter-spacing: 0.04em;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--degas-duration-fast) var(--degas-ease-out);
}

.degas-asistente-pestana:hover {
    background: var(--degas-primary-hover);
}

.degas-asistente-pestana:active {
    background: var(--degas-primary-active);
}

/* Texto en vertical, de abajo hacia arriba (como el lomo de un libro). */
.degas-asistente-pestana-texto {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Alto contraste forzado: el relleno desaparece, el borde conserva la forma de la pestaña. */
@media (forced-colors: active) {
    .degas-asistente-pestana {
        border: 1px solid ButtonText;
        border-right: none;
    }
}

/* --- drawer ---
   z-index de DRAWER a proposito, que es el escalon mas bajo de la escala de superposicion:
   el asistente es PERSISTENTE, asi que todo lo transitorio tiene que poder taparlo — el panel
   de la campana (z-dropdown), el command palette, el spinner global y los toasts. Con z-overlay
   el asistente tapaba el panel de notificaciones, que es exactamente al reves de lo que se espera. */
.degas-asistente {
    position: fixed;
    top: 0;   /* Consola: no hay header, el drawer va de arriba a abajo */
    right: 0;
    bottom: 0;
    z-index: var(--degas-z-drawer);
    width: min(420px, 92vw);
    display: flex;
    flex-direction: column;
    background: var(--degas-surface);
    border-left: 1px solid var(--degas-border);
    box-shadow: var(--degas-shadow-lg);
}

/* El drawer toma el foco cuando el composer no puede (respuesta en curso). Va pegado a los bordes
   de la ventana, así que el anillo se dibuja hacia adentro. */
.degas-asistente:focus-visible {
    outline-offset: calc(var(--degas-focus-ring-width) * -1);
}

.degas-asistente-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--degas-space-2);
    padding: var(--degas-space-2) var(--degas-space-3);
    border-bottom: 1px solid var(--degas-border);
}

.degas-asistente-titulo {
    display: inline-flex;
    align-items: center;
    gap: var(--degas-space-2);
    font-size: var(--degas-text-sm);
    font-weight: var(--degas-font-weight-semibold);
    color: var(--degas-text);
}

.degas-asistente-icono {
    display: inline-flex;
    color: var(--degas-primary);
}

.degas-asistente-header-acciones {
    display: inline-flex;
    align-items: center;
    gap: var(--degas-space-1);
}

/* Selector de modelo. Sólo se dibuja con Asistente:PermitirElegirModelo=true y más de un modelo.
   Control "quieto": es metadata de la sesión, no una acción — así que no compite con los botones.
   Sin borde hasta hover/foco, y a la misma altura que los íconos para que la fila quede alineada. */
.degas-asistente-modelo {
    height: var(--degas-control-height);
    max-width: 9.5rem;
    padding: 0 var(--degas-space-1);
    border: 1px solid transparent;
    border-radius: var(--degas-radius);
    background: transparent;
    color: var(--degas-text-muted);
    font-family: var(--degas-font-sans);
    font-size: var(--degas-text-xs);
    cursor: pointer;
    transition: background-color var(--degas-duration-fast) var(--degas-ease-out),
                border-color var(--degas-duration-fast) var(--degas-ease-out),
                color var(--degas-duration-fast) var(--degas-ease-out);
}

.degas-asistente-modelo:hover:not(:disabled) {
    background: var(--degas-surface-sunken);
    border-color: var(--degas-border);
    color: var(--degas-text);
}

.degas-asistente-modelo:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Botones de ícono del header. A la altura de control del sistema (32px): con el mínimo de
   target (24px) quedaban chicos y sin peso visual al lado del título. */
.degas-asistente-btn-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--degas-control-height);
    height: var(--degas-control-height);
    padding: 0;
    border: none;
    border-radius: var(--degas-radius);
    background: transparent;
    color: var(--degas-text-muted);
    cursor: pointer;
    transition: background-color var(--degas-duration-fast) var(--degas-ease-out),
                color var(--degas-duration-fast) var(--degas-ease-out);
}

.degas-asistente-btn-icono:hover:not(:disabled) {
    background: var(--degas-surface-sunken);
    color: var(--degas-text);
}

.degas-asistente-btn-icono:active:not(:disabled) {
    background: var(--degas-border);
}

/* Deshabilitado real (p. ej. "nueva conversación" con el hilo vacío): sin hover y sin cursor
   de acción, para que no prometa algo que no va a pasar. */
.degas-asistente-btn-icono:disabled {
    opacity: 0.4;
    cursor: default;
}

/* --- hilo --- */
.degas-asistente-hilo {
    flex: 1;
    overflow-y: auto;
    padding: var(--degas-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--degas-space-3);
}

.degas-asistente-vacio {
    color: var(--degas-text-muted);
    font-size: var(--degas-text-sm);
}

.degas-asistente-vacio-titulo {
    margin: 0 0 var(--degas-space-1);
    font-size: var(--degas-text-md);
    font-weight: var(--degas-font-weight-semibold);
    color: var(--degas-text);
}

.degas-asistente-vacio-texto {
    margin: 0 0 var(--degas-space-3);
    line-height: var(--degas-leading-normal);
}

.degas-asistente-sugerencias {
    display: flex;
    flex-direction: column;
    gap: var(--degas-space-2);
}

.degas-asistente-sugerencia {
    text-align: left;
    padding: var(--degas-space-2);
    border: 1px solid var(--degas-border);
    border-radius: var(--degas-radius);
    background: var(--degas-surface-sunken);
    color: var(--degas-text);
    font-size: var(--degas-text-sm);
    cursor: pointer;
}

.degas-asistente-sugerencia:hover {
    border-color: var(--degas-primary);
}

/* --- mensajes --- */
.degas-asistente-msg {
    display: flex;
    flex-direction: column;
    gap: var(--degas-space-1);
    max-width: 100%;
}

.degas-asistente-msg.is-usuario {
    align-items: flex-end;
}

.degas-asistente-burbuja {
    padding: var(--degas-space-2) var(--degas-space-3);
    border-radius: var(--degas-radius-lg);
    font-size: var(--degas-text-sm);
    line-height: var(--degas-leading-normal);
    overflow-wrap: anywhere;
}

.degas-asistente-msg.is-usuario .degas-asistente-burbuja {
    background: var(--degas-primary);
    color: var(--degas-on-primary);
    max-width: 85%;
}

.degas-asistente-msg.is-asistente .degas-asistente-burbuja {
    background: var(--degas-surface-sunken);
    color: var(--degas-text);
    border: 1px solid var(--degas-border);
}

.degas-asistente-msg.is-sistema .degas-asistente-burbuja {
    background: var(--degas-warning-bg);
    color: var(--degas-warning);
    font-size: var(--degas-text-xs);
}

/* markdown que devuelve el modelo — el HTML lo genera Markdig con DisableHtml() */
.degas-asistente-burbuja > :first-child { margin-top: 0; }
.degas-asistente-burbuja > :last-child  { margin-bottom: 0; }

.degas-asistente-burbuja p {
    margin: 0 0 var(--degas-space-2);
}

.degas-asistente-burbuja ul,
.degas-asistente-burbuja ol {
    margin: 0 0 var(--degas-space-2);
    padding-left: var(--degas-space-4);
}

.degas-asistente-burbuja code {
    font-family: var(--degas-font-mono);
    font-size: var(--degas-text-xs);
    background: var(--degas-surface-sunken);
    border-radius: var(--degas-radius-sm);
    padding: 0 var(--degas-space-1);
}

.degas-asistente-burbuja pre {
    background: var(--degas-surface-sunken);
    border-radius: var(--degas-radius);
    padding: var(--degas-space-2);
    overflow-x: auto;
}

/* Las tablas del asistente pueden ser anchas: scrollean solas en vez de romper el drawer. */
.degas-asistente-burbuja table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: var(--degas-text-xs);
}

.degas-asistente-burbuja th,
.degas-asistente-burbuja td {
    border: 1px solid var(--degas-border);
    padding: var(--degas-space-1) var(--degas-space-2);
    text-align: left;
    white-space: nowrap;
}

.degas-asistente-burbuja th {
    background: var(--degas-surface-sunken);
}

/* --- navegación propuesta + botones de interacción --- */
.degas-asistente-navegar {
    display: inline-flex;
    align-items: center;
    gap: var(--degas-space-2);
    align-self: flex-start;
    padding: var(--degas-space-1) var(--degas-space-2);
    min-height: var(--degas-target-min);
    border: 1px solid var(--degas-primary);
    border-radius: var(--degas-radius);
    background: transparent;
    color: var(--degas-primary);
    font-size: var(--degas-text-xs);
    cursor: pointer;
}

.degas-asistente-navegar:hover {
    background: var(--degas-primary);
    color: var(--degas-on-primary);
}

.degas-asistente-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--degas-space-2);
}

.degas-asistente-chip {
    padding: var(--degas-space-1) var(--degas-space-3);
    min-height: var(--degas-target-min);
    border: 1px solid var(--degas-border-input);
    border-radius: var(--degas-radius);
    background: var(--degas-surface);
    color: var(--degas-text);
    font-size: var(--degas-text-xs);
    cursor: pointer;
}

.degas-asistente-chip:hover {
    border-color: var(--degas-primary);
}

.degas-asistente-chip.is-primary {
    background: var(--degas-primary);
    border-color: var(--degas-primary);
    color: var(--degas-on-primary);
}

/* --- progreso de tools --- */
.degas-asistente-progreso {
    display: flex;
    flex-direction: column;
    gap: var(--degas-space-1);
    font-size: var(--degas-text-xs);
    color: var(--degas-text-muted);
}

.degas-asistente-paso {
    display: flex;
    align-items: center;
    gap: var(--degas-space-2);
}

.degas-asistente-paso-icono {
    display: inline-flex;
}

.degas-asistente-paso.is-ok .degas-asistente-paso-icono    { color: var(--degas-success-fg); }
.degas-asistente-paso.is-error .degas-asistente-paso-icono { color: var(--degas-danger-fg); }
.degas-asistente-paso.is-error                             { color: var(--degas-danger-fg); }

.degas-asistente-pensando {
    display: flex;
    align-items: center;
    gap: var(--degas-space-2);
}

/* --- composer --- */
.degas-asistente-composer {
    display: flex;
    align-items: flex-end;
    gap: var(--degas-space-2);
    padding: var(--degas-space-3);
    border-top: 1px solid var(--degas-border);
}

/* El alto lo maneja dom.js siguiendo al contenido: arranca en un renglón y crece hasta el tope.
   El max-height tiene que coincidir con MaxAltoComposerPx del panel (128px = 8rem), que es el
   punto donde JS habilita el scroll interno. resize:none porque no hay que estirarlo a mano. */
.degas-asistente-input {
    flex: 1;
    resize: none;
    /* border-box: el auto-grow de dom.js setea height con el alto TOTAL. Con content-box
       (el default de la app) el padding se sumaba aparte y el campo arrancaba con casi dos
       renglones de alto. */
    box-sizing: border-box;
    max-height: 8rem;
    overflow-y: hidden;
    padding: var(--degas-space-2);
    border: 1px solid var(--degas-border-input);
    border-radius: var(--degas-radius);
    background: var(--degas-surface);
    color: var(--degas-text);
    font-family: var(--degas-font-sans);
    font-size: var(--degas-text-md);
    line-height: var(--degas-leading-normal);
    transition: border-color var(--degas-duration-fast) var(--degas-ease-out);
}

.degas-asistente-input:hover:not(:disabled) {
    border-color: var(--degas-border-strong);
}

.degas-asistente-input:disabled {
    background: var(--degas-surface-sunken);
    color: var(--degas-text-subtle);
}

.degas-asistente-enviar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* flex-shrink:0 — sin esto el botón se comprime cuando el textarea crece. */
    flex-shrink: 0;
    min-width: var(--degas-control-height);
    min-height: var(--degas-control-height);
    border: none;
    border-radius: var(--degas-radius);
    background: var(--degas-primary);
    color: var(--degas-on-primary);
    cursor: pointer;
    transition: background-color var(--degas-duration-fast) var(--degas-ease-out);
}

.degas-asistente-enviar:hover:not(:disabled) {
    background: var(--degas-primary-hover);
}

.degas-asistente-enviar:active:not(:disabled) {
    background: var(--degas-primary-active);
}

.degas-asistente-enviar:disabled {
    background: var(--degas-surface-sunken);
    color: var(--degas-text-subtle);
    cursor: default;
}

/* Traza de tools de un mensaje ya respondido. Colapsada por defecto: es información de respaldo,
   no parte de la respuesta. Se distingue del indicador de progreso (efímero) en que ésta queda. */
.degas-asistente-traza {
    margin-top: var(--degas-space-1);
    font-size: var(--degas-text-2xs);
    color: var(--degas-text-subtle);
}

.degas-asistente-traza > summary {
    cursor: pointer;
    list-style: none;
    padding: 0 var(--degas-space-1);
    border-radius: var(--degas-radius-sm);
    user-select: none;
}

.degas-asistente-traza > summary::before {
    content: "▸ ";
}

.degas-asistente-traza[open] > summary::before {
    content: "▾ ";
}

.degas-asistente-traza > summary:hover {
    background: var(--degas-surface-hover);
    color: var(--degas-text-muted);
}

.degas-asistente-traza ul {
    margin: var(--degas-space-1) 0 0;
    padding-left: var(--degas-space-4);
    list-style: none;
}

.degas-asistente-traza li::before {
    content: "✓ ";
}

.degas-asistente-traza li.is-error {
    color: var(--degas-danger);
}

.degas-asistente-traza li.is-error::before {
    content: "✕ ";
}