/* frontend-assets-3: Inter auto-hospedada (woff2 variable, subset latino + latino-ext) — elimina la
   dependencia render-blocking de fonts.googleapis.com/gstatic.com en el camino crítico (incl. Login
   pre-auth) y el envío de la IP del usuario a Google (RGPD). font-display: swap evita el FOIT. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* «Kit Táctil» — IBM Plex Sans (UI/texto) + IBM Plex Mono (IDs de ticket, tiempos, metadata
   numérica). SIL OFL, autohospedadas como Inter (RGPD, sin request a Google, font-display: swap).
   Mismos unicode-range que Inter (latin + latin-ext) para cubrir castellano y europeo. */
@font-face {
    font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/fonts/ibm-plex-sans/ibm-plex-sans-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/fonts/ibm-plex-sans/ibm-plex-sans-latin-ext-400.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/fonts/ibm-plex-sans/ibm-plex-sans-latin-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/fonts/ibm-plex-sans/ibm-plex-sans-latin-ext-500.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('/fonts/ibm-plex-sans/ibm-plex-sans-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('/fonts/ibm-plex-sans/ibm-plex-sans-latin-ext-600.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('/fonts/ibm-plex-sans/ibm-plex-sans-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('/fonts/ibm-plex-sans/ibm-plex-sans-latin-ext-700.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/fonts/ibm-plex-mono/ibm-plex-mono-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/fonts/ibm-plex-mono/ibm-plex-mono-latin-ext-400.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/fonts/ibm-plex-mono/ibm-plex-mono-latin-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/fonts/ibm-plex-mono/ibm-plex-mono-latin-ext-500.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html, body {
    font-family: var(--helix-font);
    background: var(--helix-bg);
    color: var(--helix-text);
    /* La página nunca necesita scroll horizontal; clip evita que un popover/tooltip pegado al
       borde derecho ensanche el documento y aparezca una barra de scroll. `clip` (no `hidden`)
       no crea contenedor de scroll, así que no rompe sticky/fixed ni el scroll vertical. */
    overflow-x: clip;
}

:root {
    /* ── Marca Juniper / Helix ─────────────────────────────────────────── */
    --helix-red: #CE0000;
    --helix-red-dark: #A30000;
    /* Texto de aviso destructivo (la nota de irreversibilidad del reset total). Token de ROL, no
       de escala: --helix-red-dark es ademas el fondo de :hover de los botones rojos con texto
       blanco, asi que no puede aclararse en oscuro sin dejar ese texto blanco por debajo del
       minimo. El tema oscuro redefine este token y no aquel (ver [data-helix-dark]). */
    --helix-danger-text: var(--helix-red-dark);
    /* Legacy aliases — neutros CÁLIDOS (rediseño «estilo Intercom»): el cromo deja
       de ser gris frío y pasa a una gama taupe cálida; el rojo de marca se mantiene
       solo como acento (nav activo + acción primaria). */
    --helix-ink: #1C1A16;
    --helix-muted: #7A7366;
    --helix-line: #ECE5D8;
    --helix-soft: #F1ECE2;
    --helix-panel: #FFFFFF;
    --helix-blue: #2563EB;
    --helix-green: #16A34A;
    --helix-amber: #F59E0B;
    /* Relleno del glifo de estrella (CSAT). El ámbar de marca se queda en 2.15:1 sobre las
       superficies claras y SC 1.4.11 pide 3:1 para componentes gráficos, así que el glifo lleva su
       propio ámbar profundo en vez de oscurecer el swatch compartido de data-viz. Es token de ROL,
       no de escala: el tema oscuro lo devuelve al ámbar de marca (ver [data-helix-dark]). */
    --helix-star-fill: #B45309;
    /* Dato negativo en data-viz (p.ej. «override humano» en reportes de Axis): rojo de DATO,
       deliberadamente NO el rojo de marca (#CE0000). Regla Earned-Red: el rojo de marca queda
       reservado a acción primaria/nav activa/conteo en vivo/alerta real; una métrica no es alerta. */
    --helix-data-neg: #B42318;

    /* ── Design system completo ───────────────────────────────────────── */
    --helix-black: #000000;
    --helix-dark: #05070A;
    --helix-dark-2: #10141C;
    --helix-white: #FFFFFF;
    --helix-bg: #F1ECE2;            /* lienzo cálido (antes #F7F8FA frío) */
    --helix-surface: #FFFFFF;       /* los paneles se mantienen blancos: el contraste
                                       blanco-sobre-cálido es justo el look limpio buscado */
    --helix-border: #E7E0D3;
    --helix-text: #1C1A16;
    --helix-success: #16A34A;
    --helix-warning: #F59E0B;
    --helix-info: #2563EB;
    --helix-danger-soft: rgba(206, 0, 0, 0.08);
    /* Fondo del avatar de iniciales. Token de ROL: el texto va con --helix-text, casi blanco en
       oscuro, así que el fondo tiene que oscurecerse con el tema o las iniciales desaparecen. */
    --helix-avatar-bg: #E8DDCC;

    /* Anillo de :focus-visible compartido por toda la app. Opaco a propósito: con canal alfa el
       color efectivo lo decide el fondo compuesto, y sobre los lienzos claros (--helix-bg,
       --helix-surface) caía por debajo del 3:1 que pide WCAG 2.2 SC 1.4.11.

       Rojo de marca por decisión de Daniel (2026-08-10): el foco se señala en rojo. Mide 4,92:1
       sobre el lienzo cálido, así que cumple el 3:1. Contrapartida aceptada a sabiendas: es el mismo
       rojo que el estado Error de la paleta de MudBlazor, de modo que en un control con borde de
       MudBlazor el foco y la invalidez no se distinguen por color — se distinguen por el texto de
       error. Por eso esos controles NO llevan anillo propio: el borde de MudBlazor ya es su
       indicador de foco y añadir otro pintaba dos contornos. */
    --helix-focus-ring: var(--helix-red);

    /* ── Shell flotante (paneles que «flotan» sobre el lienzo) ────────────
       Tokens nuevos consumidos por el workspace de agente; tema oscuro los
       reajusta en [data-helix-dark]. */
    --helix-canvas: #EAE3D6;        /* lienzo más profundo, detrás de los paneles */
    /* Lienzo del CHROME (topbar + carril del sidebar). Un único token para los dos: si
       divergen reaparece la costura vertical del encuentro topbar↔sidebar (#19452). */
    --helix-chrome-bg: var(--helix-bg);
    --helix-panel-2: #FAF7F1;       /* tinte cálido tenue (suelo de la conversación) */
    --helix-float-gap: 10px;
    --helix-float-radius: 16px;
    --helix-float-shadow: 0 1px 2px rgba(70, 60, 45, 0.05), 0 6px 20px rgba(70, 60, 45, 0.07);

    /* ── Easing & feedback de pulsado ─────────────────────────────────────
       Las curvas integradas de CSS (`ease`) son débiles; estas curvas fuertes dan
       intención al movimiento sin cambiar la duración. `--press` es el feedback
       táctil compartido (la UI «acusa» el clic). Filosofía de design-engineering:
       cada detalle invisible se suma. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entradas, salidas, hovers, pulsado */
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* movimiento en pantalla */
    --press: scale(0.97);                            /* botones/chips: pulsado */
    --press-soft: scale(0.985);                      /* cards grandes: pulsado sutil */

    /* ── «Kit Táctil» · Hundido (§4 del handoff) ──────────────────────────
       Borde inferior sólido de 2px que da el «motivo táctil»: el elemento pulsable
       parece hundirse al pulsar (baja --helix-press-y y el borde desaparece). NO es
       sombra flotante (Flat-By-Default). Primario usa el rojo profundo; superficies
       claras usan el tono cálido. */
    --helix-sink: #8F0000;    /* hundido del primario/rojo */
    --helix-sink-2: #DED6C6;  /* hundido de superficies claras (outlined/filled no-primario) */
    --helix-press-y: 2px;     /* desplazamiento al pulsar */

    /* ── Familias tipográficas («Kit Táctil») ─────────────────────────────
       IBM Plex Sans en toda la UI (una familia) + IBM Plex Mono para lo numérico
       (IDs de ticket HX-####, tiempos, columnas con tabular-nums, atajos ⌘K).
       Conducir SIEMPRE por estas vars, no hardcodear la familia. */
    --helix-font: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --helix-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ── Escala tipográfica (DESIGN.md) ───────────────────────────────────
       Roles fijos en rem (no clamp). Una sola familia (IBM Plex Sans); la jerarquía
       sale del tamaño y el peso. `--fs-meta` (12px) absorbe la sopa de 10/10.5/11/12.5;
       `--fs-body` (14px) es el caballo de batalla; `--fs-headline`/`--fs-title`
       para encabezados; `--fs-display` SOLO el hero del portal. Peso: sin 650. */
    --fs-meta: 0.75rem;        /* 12px — labels, chips, metadata */
    --fs-compact: 0.8125rem;   /* 13px — body compacto en UI densa (cola, timeline, controles) */
    --fs-body: 0.875rem;       /* 14px — texto base, celdas, conversación */
    --fs-lead: 1rem;           /* 16px — body cómodo (portal) / sub-título */
    --fs-headline: 1.125rem;   /* 18px — secciones, asunto de ticket */
    --fs-title: 1.5rem;        /* 24px — títulos de página / valores de stat */
    --fs-display: 2rem;        /* 32px — hero del portal SOLO */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --lh-tight: 1.15;          /* títulos */
    --lh-snug: 1.25;           /* encabezados */
    --lh-normal: 1.5;          /* body y prosa */
    --measure: 72ch;           /* ancho de lectura máx. (65–75ch) */

    /* ── Radios ───────────────────────────────────────────────────────── */
    --helix-radius: 9px;   /* radio de CONTROL («Kit Táctil»): botones/inputs (8–9px) */
    --helix-radius-sm: 10px;
    --helix-radius-md: 14px;
    --helix-radius-lg: 18px;
    --helix-radius-xl: 24px;

    /* ── Sombras ──────────────────────────────────────────────────────── */
    --helix-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.05);
    --helix-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
    --helix-shadow-lg: 0 24px 70px rgba(15, 23, 42, 0.12);

    /* ── Workspace de agente v2 — tokens semánticos ───────────────────────
       Tercer nivel de texto (text → muted → subtle) y colores SEMÁNTICOS de
       estado/SLA, separados del rojo de marca. Consumidos por la cabecera, la
       cola y el panel del workspace (pasos 2-6). El color de PRIORIDAD NO se
       tokeniza aquí: es data-driven (Tbl_Prioridades.Color, `_ticket.PriorityColor`).
       Tema oscuro: ver el bloque equivalente en [data-helix-dark]. */
    --helix-subtle: #A8A092;            /* chrome decorativo (chevrons/carets aria-hidden, iconos);
       NO usar en texto legible — a 2,4:1 sobre --helix-surface no cumple AA. Texto terciario → --helix-muted. */
    /* estado del ticket: pills semánticas, NO rojo */
    --st-open:    #2C5AA0; --st-open-bg:    #E7EEF8;
    --st-pending: #9A6A12; --st-pending-bg: #F7EFDD;
    --st-solved:  #2C7A43; --st-solved-bg:  #E3F2E7;
    --st-new:     #5B4BB3; --st-new-bg:     #ECE9F8;
    /* SLA: neutro por defecto; rojo SOLO vencido, ámbar SOLO en riesgo */
    --sla-danger: #B0291E; --sla-danger-bg: #FBE7E4; --sla-danger-border: #E9B8B1;
    --sla-warn:   #97600B; --sla-warn-bg:   #FBF0D6;
    --sla-ok:     #2C7A43; --sla-ok-bg:     #E3F2E7;
}

/* El feedback de pulsado (`--press`) es movimiento: con prefers-reduced-motion se
   neutraliza (se conservan color/opacidad/sombra, que ayudan a la comprensión). */
@media (prefers-reduced-motion: reduce) {
    :root { --press: none; --press-soft: none; --helix-press-y: 0px; }
}

/* Foco de teclado en los controles de MudBlazor: su :focus-visible solo tiñe el fondo igual que el
   hover y encima resetea `button:focus{outline:none}` y `a:focus-visible{outline:none}` —de ahí que
   los enlaces también entren aquí—. Este bloque va al principio de la hoja para que el anillo propio
   de cada pantalla, que aparece después, siga ganando. Los inputs quedan fuera: su borde de
   MudBlazor ya es el indicador y un segundo anillo pintaría dos contornos. */
.mud-link:focus-visible,
.mud-button-root:focus-visible,
.mud-expand-panel-header:focus-visible,
.mud-nav-link:focus-visible,
.mud-list-item-clickable:focus-visible,
.mud-clickable:focus-visible,
.mud-tab:focus-visible,
.mud-table-sort-label:focus-visible {
    outline: 3px solid var(--helix-focus-ring);
    outline-offset: 2px;
}
/* La cabecera ocupa el ancho de la tarjeta y hereda su radio: el anillo se dibuja por dentro. */
.mud-expand-panel-header:focus-visible { outline-offset: -3px; }

/* ---------- Topbar ---------- */
.helix-appbar {
    border-bottom: 1px solid rgba(0,0,0,.08);
    backdrop-filter: blur(12px);
}
/* Workspace compacto: topbar de 56px (antes 64). La variable alimenta tanto el
   padding del main content de MudBlazor como el calc() de .helix-ticket-wrap. */
:root, .mud-layout { --mud-appbar-height: 56px; }
/* #19452: el topbar era la ÚNICA superficie del chrome que se pintaba como losa blanca
   a sangre, y arrancaba en seco en el borde del sidebar (x = ancho del drawer). Contra el
   carril de lienzo del sidebar eso dejaba una costura vertical de 56px con esquina cuadrada.
   Pintarlo con el lienzo del chrome hace que la banda superior sea continua de lado a lado:
   el sidebar flotante y los paneles de cada página quedan apoyados sobre un único lienzo, sin
   encuentro que limpiar. Se conserva el hairline inferior (lo pone MainLayout en línea) para
   que el contenido que scrollea por debajo siga teniendo separación. */
.helix-appbar.mud-appbar { height: 56px; background-color: var(--helix-chrome-bg); }
.helix-appbar .mud-toolbar { min-height: 56px; height: 56px; }
.helix-logo {
    width: 34px; height: 34px; border-radius: 8px;
    background: #050505; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 18px rgba(206,0,0,.18);
    overflow: hidden;
}
.helix-logo img { width: 28px; height: 28px; display: block; object-fit: contain; }
.helix-brand-block { display: flex; flex-direction: column; line-height: 1.05; margin: 0 28px 0 10px; }
.helix-brand { font-weight: 700; letter-spacing: 0; }
.helix-brand-block span { font-size: var(--fs-meta); color: var(--helix-muted); }
.helix-search { width: 100%; }
/* Buscador global centrado en la topbar (entre dos MudSpacer). */
.helix-search-wrap { width: min(46vw, 560px); display: flex; }
/* Ítems del desplegable de sugerencias (tickets/clientes/orgs/buscar todo). */
.helix-search-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.helix-search-item-label {
    font-size: var(--fs-compact); color: var(--helix-text); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.helix-search-item-sub {
    font-size: var(--fs-meta); color: var(--helix-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Rail de iconos ---------- */
.helix-rail {
    position: fixed; top: var(--mud-appbar-height, 64px); left: 0; bottom: 0; width: 56px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 0; background: #171A21;
    border-right: 1px solid rgba(255,255,255,.08); z-index: 1100;
}
.helix-rail-spacer { flex: 1 1 auto; }
.helix-rail-item {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px;
    color: #D3D8E0; text-decoration: none;
    transition: background-color .15s var(--ease-out), color .15s var(--ease-out), transform .12s var(--ease-out);
}
.helix-rail-item:hover { background: rgba(255,255,255,.10); color: #fff; }
.helix-rail-item:active { transform: var(--press); }
.helix-rail-item.active { background: #CE0000; color: #fff; }

/* el contenido principal deja hueco para el rail */
.helix-content { padding-left: 56px; }

/* ---------- Home (tu trabajo) ---------- */
.helix-home { display: flex; height: calc(100vh - var(--mud-appbar-height, 64px)); }
.helix-work-panel {
    width: 230px; border-right: 1px solid var(--helix-border);
    padding: 12px 8px; overflow: auto; background: var(--helix-surface);
}
.helix-work-group {
    font-size: var(--fs-meta); text-transform: uppercase; color: var(--helix-muted);
    padding: 14px 10px 6px; font-weight: 600; letter-spacing: .4px;
}
.helix-work-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 8px; cursor: pointer; color: var(--helix-text); font-size: var(--fs-body);
}
.helix-work-item:hover { background: rgba(0,0,0,.04); }
.helix-work-item.active { background: rgba(206,0,0,.10); color: #CE0000; font-weight: 600; }
/* Centro como hoja blanca (antes transparente → mostraba el crema y la lista quedaba sin estructura). */
.helix-home-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; background: var(--helix-surface); }
.helix-home-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    padding: 12px 20px; border-bottom: 1px solid var(--helix-border);
}
.helix-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.helix-stats-panel {
    width: 300px; border-left: 1px solid var(--helix-border);
    padding: 20px; overflow: auto; background: var(--helix-canvas);
}
.helix-stat { display: flex; flex-direction: column; margin-top: 8px; }
.helix-stat-num { font-size: 28px; font-weight: 700; line-height: 1.1; }

/* ---------- Vistas ---------- */
.helix-views-wrap {
    display: flex; flex-direction: column;
    height: calc(100dvh - var(--mud-appbar-height, 64px));
    min-height: 0; overflow: hidden;
}
.helix-views-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px 6px; margin-bottom: 4px;
}
.helix-views-section {
    font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--helix-muted); padding: 12px 10px 4px; font-weight: 700;
}
.helix-view-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 10px; border-radius: 8px; text-decoration: none;
    color: var(--helix-text); font-size: var(--fs-body); font-weight: 500;
    transition: background 120ms;
}
.helix-view-item:hover { background: rgba(0,0,0,.04); }
.helix-view-item.active {
    background: rgba(206,0,0,.10); color: var(--helix-red); font-weight: 600;
    border-left: 2.5px solid var(--helix-red);
    padding-left: 7.5px;
}
.helix-view-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.helix-view-count {
    color: var(--helix-muted); font-variant-numeric: tabular-nums; font-size: var(--fs-meta);
    background: var(--helix-panel-2); border-radius: 10px; padding: 1px 7px; flex-shrink: 0;
}
.helix-views-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.helix-views-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid var(--helix-border);
    background: var(--helix-surface); flex-shrink: 0;
}

/* tabla de tickets */
.helix-tickets { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.helix-tickets thead th {
    text-align: left; padding: 10px 12px; color: var(--helix-muted); font-weight: 600;
    font-size: var(--fs-meta); text-transform: uppercase;
    border-bottom: 1px solid rgba(0,0,0,.08);
    position: sticky; top: 0; background: var(--helix-surface); z-index: 1;
}
.helix-priority-row td { background: var(--helix-panel-2); color: var(--helix-text); padding: 6px 12px; font-size: var(--fs-compact); }
.helix-ticket-row { cursor: pointer; border-bottom: 1px solid var(--helix-border); }
.helix-ticket-row:hover { background: var(--helix-panel-2); }
.helix-ticket-row:active { background: var(--helix-canvas); }
.helix-ticket-row td { padding: 10px 12px; vertical-align: top; }
.helix-ticket-row td:first-child, .helix-ticket-row td:last-child { vertical-align: middle; }
.helix-subject { font-weight: 500; color: var(--mud-palette-text-primary, var(--helix-text)); }
.helix-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: var(--fs-meta); font-weight: 600; }

/* ---------- Admin ---------- */
.helix-admin-shell {
    /* 100% y no 100vw: el shell vive dentro del layout con sidebar persistente de
       280px; 100vw mide el viewport completo y provocaba ~220px de overflow
       horizontal en /admin (BUG-20260612-011). */
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
    padding: 28px 0 40px;
}
.helix-admin-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 0 22px;
}
.helix-admin-kicker { color: var(--helix-primary, #ce0000); font-weight: 700; }
.helix-admin-title { font-weight: 700; letter-spacing: 0; }
.helix-admin-subtitle { color: var(--helix-muted); max-width: 620px; margin-top: 4px; }
.helix-admin-hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.helix-admin-hero--compact { padding-bottom: 18px; }
.helix-admin-shell--narrow { width: min(960px, calc(100% - 48px)); }
.helix-admin-title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.helix-admin-back-button,
.helix-icon-button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--helix-border);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--helix-text);
    background: var(--helix-surface);
    cursor: pointer;
    transition: border-color .15s var(--ease-out), color .15s var(--ease-out), background-color .15s var(--ease-out), transform .12s var(--ease-out);
}
.helix-admin-back-button:hover,
.helix-icon-button:hover {
    border-color: var(--helix-muted);
    color: var(--helix-text);
    background: var(--helix-panel-2);
}
/* Botón deshabilitado (p. ej. editar el rol Owner sin owner.grant): atributo disabled REAL, no solo
   estilo — sin este bloque se vería idéntico al activo. Sin hover ni feedback de pulsado. */
.helix-admin-back-button:disabled,
.helix-icon-button:disabled {
    opacity: .45;
    cursor: not-allowed;
    color: var(--helix-muted);
}
.helix-admin-back-button:disabled:hover,
.helix-icon-button:disabled:hover {
    border-color: var(--helix-border);
    color: var(--helix-muted);
    background: var(--helix-surface);
}
.helix-admin-back-button:disabled:active,
.helix-icon-button:disabled:active { transform: none; }
.helix-admin-back-button:active,
.helix-icon-button:active { transform: var(--press); }
.helix-admin-back-button:focus-visible,
.helix-icon-button:focus-visible,
.helix-admin-action-button:focus-visible,
.helix-admin-panel-action:focus-visible {
    outline: 3px solid var(--helix-focus-ring);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .helix-admin-back-button,
    .helix-icon-button { transition: none; }
}
/* Área táctil de 44x44 en el botón «volver» sin agrandar su recuadro de 34px. Por pseudo-elemento y
   no con un envoltorio como .helix-role-edit-hit porque la clase la comparten tres cabeceras, una
   de ellas el componente AdminPageHeader. */
.helix-admin-back-button { position: relative; }
.helix-admin-back-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
/* Amplía el área táctil del botón editar de /admin/roles a 44x44 sin agrandar el icono
   visual ni tocar .helix-icon-button (compartida con otros consumidores de 34px). */
.helix-role-edit-hit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}
.helix-admin-role-pill {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid var(--helix-border);
    border-radius: 8px;
    background: var(--helix-surface);
    color: var(--helix-muted);
    font-size: var(--fs-meta);
    line-height: 1;
    white-space: nowrap;
}
/* El color del rol lo pone RoleBadge (.hx-role); el contenedor es siempre neutro. */
.helix-admin-action-button,
.helix-admin-panel-action {
    min-height: 36px;
    border: 1px solid var(--helix-border);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 12px;
    background: var(--helix-surface);
    color: var(--helix-text);
    font-size: var(--fs-compact);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s var(--ease-out), background-color .15s var(--ease-out), color .15s var(--ease-out), transform .15s var(--ease-out);
}
.helix-admin-action-button:hover,
.helix-admin-panel-action:hover {
    border-color: var(--helix-muted);
    color: var(--helix-text);
    background: var(--helix-panel-2);
}
.helix-admin-action-button--primary {
    border-color: #ce0000;
    background: #ce0000;
    color: #fff;
}
.helix-admin-action-button--primary:hover {
    background: #aa0000;
    color: #fff;
}
.helix-admin-action-button:active:not(:disabled),
.helix-admin-panel-action:active:not(:disabled) {
    transform: var(--press);
}
.helix-admin-action-button:disabled,
.helix-admin-panel-action:disabled {
    cursor: default;
    opacity: .55;
    transform: none;
}
.helix-admin-panel-action { width: 100%; }
.helix-admin-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.helix-admin-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 92px;
    padding: 16px;
    border: 1px solid var(--helix-border);
    border-radius: 8px;
    background: var(--helix-surface);
}
.helix-admin-stat-icon,
.helix-admin-module-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #ce0000;
    background: #fff1f1;
}
.helix-admin-stat-value,
.helix-admin-stat-label,
.helix-admin-stat-context { display: block; }
.helix-admin-stat-value { font-size: var(--fs-title); line-height: 1; font-weight: 700; color: var(--helix-text); }
.helix-admin-stat-label { margin-top: 5px; color: var(--helix-text); font-size: var(--fs-compact); font-weight: 700; }
.helix-admin-stat-context { margin-top: 2px; color: var(--helix-muted); font-size: var(--fs-meta); }
.helix-admin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}
.helix-admin-main { display: grid; gap: 18px; }
.helix-admin-section,
.helix-admin-panel {
    border: 1px solid var(--helix-border);
    border-radius: 8px;
    background: var(--helix-surface);
}
.helix-admin-section { padding: 18px; }
.helix-admin-section-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.helix-admin-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.helix-admin-module {
    width: 100%;
    min-height: 96px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 14px;
    border: 1px solid var(--helix-border);
    border-radius: 8px;
    background: var(--helix-panel-2);
    color: inherit;
    cursor: pointer;
    transition: border-color .15s var(--ease-out), background-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.helix-admin-module:hover:not(:disabled) {
    border-color: var(--helix-muted);
    background: var(--helix-panel-2);
}
.helix-admin-module:focus-visible {
    outline: 3px solid var(--helix-focus-ring);
    outline-offset: 2px;
}
.helix-admin-module:active:not(.disabled) { transform: var(--press-soft); }
.helix-admin-module.disabled { cursor: default; opacity: .72; }
.helix-admin-module.disabled .helix-admin-module-icon { color: var(--helix-muted); background: var(--helix-panel-2); }
.helix-admin-module-copy { min-width: 0; flex: 1 1 auto; }
.helix-admin-module-title { display: block; color: var(--helix-text); font-weight: 700; font-size: var(--fs-body); }
.helix-admin-module-desc { display: block; margin-top: 4px; color: var(--helix-muted); font-size: var(--fs-compact); line-height: 1.35; }
.helix-admin-module-badge {
    align-self: flex-start;
    flex: 0 0 auto;
    padding: 2px 7px;
    border: 1px solid var(--helix-border);
    border-radius: 999px;
    color: var(--helix-muted);
    background: var(--helix-surface);
    font-size: var(--fs-meta);
    font-weight: 700;
    line-height: 1.5;
}
.helix-admin-module-badge.active {
    color: #7a0000;
    border-color: #ffc9c9;
    background: #fff1f1;
}
.helix-admin-aside { display: grid; gap: 12px; }
.helix-admin-panel { padding: 16px; }
.helix-admin-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--helix-text);
}
/* El icono de la cabecera de tarjeta va en un chip templado (mismo lenguaje que el
   estado vacío y la marca): eleva la tarjeta de «caja blanca» a tarjeta intencional. */
.helix-admin-panel-head > .mud-icon-root {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: 8px;
    background: var(--helix-panel-2);
    color: var(--helix-muted);
}
/* Tablas admin: la columna de acciones no se comprime ni recorta sus iconos
   (BUG-20260612-012); si la tabla no cabe, scroll horizontal en su contenedor. */
.helix-admin-table .mud-table-container { overflow-x: auto; }
.helix-admin-table th:last-child,
.helix-admin-table td:last-child {
    white-space: nowrap;
    min-width: 96px;
    padding-right: 16px;
}

.helix-admin-rbac-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.helix-admin-rbac-grid div {
    padding: 12px;
    border: 1px solid var(--helix-border);
    border-radius: 8px;
    background: var(--helix-panel-2);
}
.helix-admin-rbac-grid span,
.helix-admin-rbac-grid small { display: block; }
.helix-admin-rbac-grid span { color: var(--helix-text); font-size: 22px; line-height: 1; font-weight: 700; }
.helix-admin-rbac-grid small { margin-top: 5px; color: var(--helix-muted); font-size: var(--fs-meta); }

/* Tarjeta «Sistema» (release desplegada): filas clave-valor con separador tenue.
   La clave en sans templada; el valor en mono para versión/build. */
.helix-admin-sys-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--helix-panel-2);
}
.helix-admin-sys-row:first-of-type { border-top: 0; padding-top: 0; }
.helix-admin-sys-key { color: var(--helix-muted); font-size: var(--fs-compact); }
.helix-admin-sys-val {
    font-family: var(--helix-font-mono);
    font-size: var(--fs-compact);
    font-weight: 500;
    color: var(--helix-text);
}
.helix-admin-sys-val.strong { font-weight: 600; }

/* Badge de entorno: verde en Producción (estado OK), ámbar en el resto (aviso). */
.helix-admin-env-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: var(--fs-meta);
    font-weight: 600;
    line-height: 1.6;
    border: 1px solid var(--sla-warn);
    background: var(--sla-warn-bg);
    color: var(--sla-warn);
}
.helix-admin-env-badge.ok {
    border-color: var(--sla-ok);
    background: var(--sla-ok-bg);
    color: var(--sla-ok);
}
.helix-admin-env-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.helix-role-panels { margin-bottom: 12px; }
.helix-role-panel {
    border: 1px solid var(--helix-border);
    border-radius: 8px !important;
    background: var(--helix-surface);
    overflow: hidden;
}
.helix-role-panel-title {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.helix-role-desc {
    color: var(--helix-muted);
    font-size: var(--fs-compact);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.helix-role-count {
    color: var(--helix-muted);
    font-size: var(--fs-meta);
    font-weight: 700;
    white-space: nowrap;
}
/* .helix-role-pill eliminada en PR4d: RoleBadge usa ahora .hx-role (cap + tinte + texto neutro). */
.helix-permission-pill {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--helix-border);
    border-radius: 999px;
    background: var(--helix-panel-2);
    color: var(--helix-text);
    font-size: var(--fs-meta);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}
/* Paneles de /admin/settings: tarjetas en rejilla (ver .helix-settings-grid);
   el espaciado lo da el gap del grid, no un margin por tarjeta. */
.helix-settings-panel {
    padding: 20px 22px;
}
/* La nota de reinicio ocupa toda la fila, por encima de las tarjetas. */
.helix-settings-note { flex-basis: 100%; max-width: none; }
/* Ancho uniforme de los campos de cada panel: los de primer nivel (prefijo, etc.) se igualan a 560px,
   como los que ya van envueltos en contenedores; las filas flex (host+puerto) quedan intactas. */
.helix-settings-panel > .mud-input-control,
.helix-settings-panel > .mud-select { max-width: 560px; }
.helix-settings-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--helix-border);
    border-radius: 8px;
    background: var(--helix-panel-2);
}
.helix-settings-preview span {
    color: var(--helix-muted);
    font-size: var(--fs-meta);
    font-weight: 700;
}
.helix-settings-preview strong {
    color: var(--helix-text);
    font-size: var(--fs-headline);
    letter-spacing: 0;
}
/* Pestañas de /admin/settings: agrupan los 11 paneles en grupos navegables
   (General · IA y Axis · Servidor y seguridad) para no apilarlos en un solo scroll.
   La barra se ata al ancho de las tarjetas (720) y se estila con los tokens
   helix en vez del look Material por defecto. */
.helix-settings-tabs { margin-top: 8px; background: transparent; }
/* La barra es .mud-tabs-tabbar: MudBlazor 9.x no renderiza ningún .mud-tabs-toolbar, así que
   apuntar ahí deja la barra con el surface cuadrado de Material y sin hairline. */
.helix-settings-tabs .mud-tabs-tabbar {
    min-height: 46px;
    padding: 0 6px;
    background: var(--helix-surface);
    border: 1px solid var(--helix-border);
    /* 8px = el radio de .helix-admin-section, las tarjetas que encabeza. */
    border-radius: 8px 8px 0 0;
}
/* Sin bajar el min-height:48px que MudBlazor pone en el inner, el hijo estira la barra. */
.helix-settings-tabs .mud-tabs-tabbar-inner { min-height: 46px; }
.helix-settings-tabs .mud-tab {
    text-transform: none;
    font-weight: 600;
    font-size: var(--fs-compact);
    color: var(--helix-muted);
    min-height: 46px;
    min-width: 0;
    padding: 0 18px;
    /* Tabs limpios como el prototipo (solo texto + subrayado): fuera el fondo/ripple/borde
       de caja del look Material por defecto. */
    background-color: transparent !important;
    border: none;
    border-radius: 0;
}
.helix-settings-tabs .mud-tab:hover { color: var(--helix-text); background-color: transparent !important; }
.helix-settings-tabs .mud-tab.mud-tab-active { color: var(--helix-primary); }
.helix-settings-tabs .mud-tab-slider { background: var(--helix-primary, #ce0000); height: 2px; }
/* Las tarjetas de cada pestaña se apilan en UNA columna a todo el ancho de la tarjeta
   (decisión de producto: fidelidad al prototipo del handoff, que muestra tarjetas anchas
   apiladas). El grid va en .helix-settings-grid (div propio dentro del panel) porque
   MudTabPanel no expone su contenedor para estilarlo. */
/* El aire va aquí y no en el .mud-tab-panel: MudBlazor pinta el panel activo con
   `display: contents`, así que no genera caja y su padding se descarta. */
.helix-settings-tabs .mud-tabs-panels {
    padding-top: 22px;
    background: transparent !important;
}
.helix-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
.helix-settings-grid > .helix-settings-panel {
    width: auto;
    margin: 0;
}
/* Títulos de sección homogéneos y compactos (antes subtitle1 ~16px). */
.helix-admin-panel-head .mud-typography { font-size: var(--fs-body); font-weight: 700; line-height: 1.25; }

/* Columna de formulario dentro de cada panel: los controles ocupan el ancho de la tarjeta
   (una sola columna ancha, como el prototipo). Antes topaba a 560px para el layout multi-columna. */
.helix-settings-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 100%;
}
.helix-settings-field--short { max-width: 260px; }

/* ── Fidelidad del prototipo: etiqueta en MAYÚSCULAS encima del control (HlxField) ──
   Sustituye la etiqueta flotante de MudBlazor (esos controles llevan Label vacío). */
.helix-settings-panel .hlx-field { display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 0; }
.helix-settings-panel .hlx-field-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--helix-muted); line-height: 1.2;
}
/* El control envuelto no arrastra el margen superior propio de MudBlazor (ya no hay label flotante). */
.helix-settings-panel .hlx-field > .mud-input-control { margin-top: 0; }
.helix-settings-panel .hlx-field.helix-settings-field--short > .mud-input-control { max-width: 260px; }

/* Pares de campos en fila (SMTP host/puerto, remitente, Instance/Callback): grid a 2 columnas
   que colapsa a 1 en anchos estrechos. La proporción concreta va inline (2fr/1fr, 1fr/1fr…). */
.helix-settings-2col { display: grid; gap: 12px; align-items: start; }
/* Coste y tope mensual: rejilla 2×2 de campos etiquetados. */
.helix-settings-costgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: start; }
@media (max-width: 700px) {
    .helix-settings-2col,
    .helix-settings-costgrid { grid-template-columns: 1fr; }
}

/* Focus ring rojo del prototipo (0 0 0 3px rgba(212,31,44,.12) → token del repo) sobre el
   borde del input outlined de MudBlazor cuando tiene el foco. */
.helix-settings-panel .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--helix-primary) !important;
    box-shadow: 0 0 0 3px rgba(206, 0, 0, .12);
}

/* ═══════════════ «Kit Táctil» PR5a — modelo de input/select (opt-in .hlx-form) ═══════════════
   Nota de alcance: la app ya usa Variant.Outlined en ~todos los campos, así que un override CRUDO
   global tocaría todos los inputs de golpe (rompe el «solo piloto» del checkpoint). El modelo se
   activa con la clase .hlx-form en el formulario; la promoción a global se decide tras aprobación.
   Etiqueta ARRIBA (HlxField), sin subrayado Material, radio 9px, foco con anillo rojo tenue. */

/* Etiqueta encima del control (HlxField fuera de settings) */
.hlx-form .hlx-field { display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 0; }
.hlx-form .hlx-field-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--helix-muted); line-height: 1.2;
}
.hlx-form .hlx-field > .mud-input-control { margin-top: 0; }

/* (1) Reposo: borde neutro, radio 9px, sin subrayado */
.hlx-form .mud-input.mud-input-outlined { border-radius: var(--helix-radius); }
.hlx-form .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--helix-border); transition: border-color .15s var(--ease-out, ease);
}
.hlx-form .mud-input.mud-input-outlined:hover:not(.mud-disabled):not(.mud-input-error) .mud-input-outlined-border {
    border-color: var(--helix-muted);
}

/* (2) Foco: anillo rojo tenue (--helix-danger-soft) + borde rojo tenue. Verificable por teclado. */
.hlx-form .mud-input.mud-input-outlined.mud-focused {
    box-shadow: 0 0 0 3px var(--helix-danger-soft); border-radius: var(--helix-radius);
    transition: box-shadow .15s var(--ease-out, ease);
}
.hlx-form .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: rgba(206, 0, 0, .35); border-width: 1px;
}

/* (3) Error: rojo de DATO (--sla-danger), no el rojo de marca; comunica sin gritar */
.hlx-form .mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border {
    border-color: var(--sla-danger);
}
.hlx-form .mud-input.mud-input-outlined.mud-input-error.mud-focused {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sla-danger) 18%, transparent);
}
.hlx-form .mud-input-error + .mud-input-helper-text,
.hlx-form .mud-input-helper-text.mud-input-error,
.hlx-form .mud-input-error .mud-input-helper-text { color: var(--sla-danger); }

/* (4) Disabled: legible pero claramente inactivo; sin anillo, borde discontinuo, cursor bloqueado */
.hlx-form .mud-input.mud-input-outlined.mud-disabled {
    background: var(--helix-panel-2); border-radius: var(--helix-radius); box-shadow: none;
}
.hlx-form .mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border {
    border-color: var(--helix-border); border-style: dashed;
}
.hlx-form .mud-input.mud-disabled input,
.hlx-form .mud-input.mud-disabled .mud-select-input { cursor: not-allowed; }

/* (5) Loading: los esqueletos se unifican en <MudSkeleton Animation="Wave"> (Motion Step 2 · PR 2).
   Se retiraron el keyframe hlx-shimmer y .hlx-field-skeleton*; el reduced-motion global de
   MudSkeleton vive más abajo. NUNCA spinner en medio del contenido (§5.5). */

/* prefers-reduced-motion: sin transición de foco (se conserva color/estado) */
@media (prefers-reduced-motion: reduce) {
    .hlx-form .mud-input.mud-input-outlined,
    .hlx-form .mud-input.mud-input-outlined .mud-input-outlined-border,
    .hlx-form .mud-input.mud-input-outlined.mud-focused { transition: none; }
}

/* ── Radios como tarjetas seleccionables (Registro de clientes · Asistente IA) ──
   Cada opción es una fila con borde a todo el ancho; la seleccionada gana borde rojo.
   El width:100% fuerza el apilado vertical independientemente del contenedor que MudBlazor
   ponga alrededor (no dependemos de que .hlx-radio-cards sea el flex-parent directo). */
.hlx-radio-cards { width: 100%; display: block; }
/* El contenedor interno que MudRadioGroup pone alrededor de los radios debe ocupar todo el
   ancho para que las tarjetas se estiren de borde a borde de la sección. */
.hlx-radio-cards > *,
.hlx-radio-cards .mud-input-control-input-container { display: block; width: 100%; }
.hlx-radio-cards .mud-radio {
    display: flex; width: 100%; box-sizing: border-box; align-items: flex-start;
    margin: 0 0 8px;
    padding: 11px 14px;
    border: 1px solid var(--helix-border); border-radius: 10px;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.hlx-radio-cards .mud-radio:last-child { margin-bottom: 0; }
.hlx-radio-cards .mud-radio:hover { border-color: #d8d2c9; }
.hlx-radio-cards .mud-radio:has(.mud-checked),
.hlx-radio-cards .mud-radio.mud-checked {
    border-color: var(--helix-primary);
    box-shadow: 0 0 0 1px var(--helix-primary) inset;
    background-color: rgba(206, 0, 0, .03);
}

/* ── «Kit Táctil» PR6 · 6b Casillas (spec §4.2, sólo radio de control) ─────────
   MudCheckBox: el glifo (<svg>.mud-icon-root) adopta el radio de control (6px).
   HUNDIDO TÁCTIL DIFERIDO (decisión Daniel): no se aplica el sink `0 2px 0` en las
   casillas. Motivo: el glifo Material se dibuja con ~3px de margen dentro de su
   viewBox de 24u, así que una sombra sobre el border-box de .mud-icon-root flota ~3px
   por DEBAJO del cuadrado visible → se lee como un subrayado rojo suelto, no como un
   hundido de pulsado. Se difiere en paralelo a los radios (mismo problema de forma).
   RADIOS: tampoco se tocan (.hlx-radio-cards conserva su tratamiento). Indeterminate
   no se usa en la app (sólo MudProgress). */
.mud-checkbox .mud-icon-root{ border-radius:6px; }

/* ── Toggle propio (HlxToggle) fiel al prototipo ── pista 42×24, knob blanco 18px con sombra,
   ON = rojo de marca, OFF = neutro cálido, transición .18s. Reemplaza al MudSwitch (que se veía
   «de plantilla»). El <input> nativo va oculto pero enfocable: dirige :checked/:focus-visible. */
.hlx-toggle {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0; cursor: pointer; user-select: none;
}
.hlx-toggle--disabled { cursor: not-allowed; opacity: .6; }
.hlx-toggle-input {
    position: absolute; left: 0; top: 0;
    width: 42px; height: 24px; margin: 0;
    opacity: 0; cursor: inherit;
}
.hlx-toggle-track {
    position: relative; flex: 0 0 auto;
    width: 42px; height: 24px; border-radius: 99px;
    background: #D8D2C9; transition: background-color .18s ease;
}
.hlx-toggle-knob {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(20, 18, 15, .28);
    transition: transform .18s ease;
}
/* Estado ON dirigido por el valor enlazado (clase), no por :checked del input: en Blazor el
   pseudo-:checked no siempre refleja el re-render y el toggle se quedaba «blanco» al activarse.
   Fallback literal al rojo por si el custom-property no resolviera. */
.hlx-toggle-track--on { background: var(--helix-primary, #CE0000); }
.hlx-toggle-track--on .hlx-toggle-knob { transform: translateX(18px); }
/* Acentos semánticos puntuales (el toggle por defecto es rojo de marca en toda la app). */
.hlx-toggle--success .hlx-toggle-track--on { background: var(--helix-success, #2E7D32); }
.hlx-toggle--warning .hlx-toggle-track--on { background: var(--helix-amber, #F0B429); }
/* Foco por teclado: el <input> nativo va oculto (opacity:0), así que el anillo DEBE verse en la
   pista. Un outline con offset se dibuja sobre el fondo de página (no sobre la pista), por lo que
   es visible en cualquier estado —incl. ON, donde la pista es roja— y en claro/oscuro; el
   rgba(.12) anterior era invisible sobre la pista roja. Motion Step 2 · PR 3. */
.hlx-toggle-input:focus-visible ~ .hlx-toggle-track {
    outline: 2px solid var(--helix-primary, #CE0000);
    outline-offset: 2px;
}
.hlx-toggle-label { font-size: var(--fs-body); color: var(--helix-text); line-height: 1.4; }
/* Track OFF en oscuro: SOLO cuando NO está en ON (antes esta regla, más específica y posterior,
   pisaba el rojo/verde/ámbar del estado ON en modo oscuro → BUG-20260702-003). */
[data-helix-dark] .hlx-toggle-track:not(.hlx-toggle-track--on) { background: #4A443C; }
@media (prefers-reduced-motion: reduce) {
    .hlx-toggle-track, .hlx-toggle-knob { transition: none; }
}

/* Bloque tintado a todo el ancho para un toggle de cuerpo destacado (p. ej. «Requiere
   aprobación manual»), como el prototipo. Superficie suave theme-aware. */
.helix-settings-toggle-block {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--helix-panel-2);
    border-radius: 10px;
}
.helix-settings-toggle-block .hlx-toggle { margin: 0; align-items: flex-start; }

/* Lista de filas «etiqueta a la izquierda / control a la derecha» (p. ej. modo de
   Axis por capacidad): borde + divisores, control de ancho fijo alineado a la
   derecha de la columna. Sustituye al d-flex justify-space-between suelto. */
.helix-settings-rows {
    border: 1px solid var(--helix-border);
    border-radius: 8px;
    overflow: hidden;
}
.helix-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 14px;
}
.helix-settings-row + .helix-settings-row { border-top: 1px solid var(--helix-border); }
.helix-settings-row > .mud-input-control,
.helix-settings-row > .mud-select { flex: 0 0 190px; max-width: 190px; min-width: 0; }

/* Densidad de ayuda «mixed»: icono ⓘ junto al título con el detalle completo en tooltip
   (helix-settings-tip acota el ancho para textos largos). */
.helix-settings-info.mud-icon-button { padding: 2px; color: var(--helix-muted); }
.helix-settings-info.mud-icon-button:hover { color: var(--helix-text); background: transparent; }
.helix-settings-info .mud-icon-root { font-size: 16px; }
.helix-settings-info:focus-visible { outline: 2px solid rgba(206, 0, 0, .35); outline-offset: 2px; border-radius: 6px; }
.helix-settings-tip { max-width: 320px; }

/* Tarjetas con interruptor maestro (Respuesta automática, Borradores KB, Email SMTP):
   el toggle se alinea a la derecha de la cabecera de la tarjeta. */
.helix-settings-head-switch { margin-left: auto; margin-right: 0; }

/* Guardado global (saveMode=global): barra flotante que solo aparece cuando hay cambios
   sin guardar. Fija y centrada abajo; ink oscuro fijo en ambos temas (acción sobre el
   contenido). El toast de confirmación lo da el Snackbar de MudBlazor. */
.helix-save-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1300;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 8px 18px;
    border-radius: 14px;
    background: #1D1B18;
    color: #EDEAE3;
    box-shadow: 0 12px 34px rgba(20, 18, 15, .28);
    animation: helixSaveBarIn .22s var(--ease-out) both;
}
.helix-save-bar__dot {
    flex: 0 0 auto;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--helix-amber, #F0B429);
}
.helix-save-bar__text { font-size: var(--fs-compact); font-weight: 600; white-space: nowrap; }
.helix-save-bar__discard.mud-button-root { color: #C9C3BB; }
.helix-save-bar__discard.mud-button-root:hover { background: rgba(255, 255, 255, .08); }
.helix-save-bar__save.mud-button-root { margin-left: 2px; }
@keyframes helixSaveBarIn {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .helix-save-bar { animation: none; }
}
@media (max-width: 700px) {
    .helix-save-bar { left: 12px; right: 12px; transform: none; justify-content: flex-end; }
    @keyframes helixSaveBarIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
}

/* La navegación de admin vive ahora en el sidebar principal (AdminSidebar reusa las
   clases .helix-sidebar-*); el shell de dos paneles + rail propio se retiró. */
.hlx-admin-back { margin-bottom: 6px; }

/* Estado vacío estándar de las páginas de datos del admin (AdminEmptyState). */
.helix-admin-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 56px 24px;
    max-width: 440px;
    margin: 16px auto;
}
.helix-admin-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--helix-panel-2);
    color: var(--helix-muted);
    margin-bottom: 6px;
}
.helix-admin-empty-icon .mud-icon-root { font-size: 1.6rem; }
/* Delight sobrio: el icono del estado vacío se asienta una vez al aparecer. */
@keyframes helix-empty-pop {
    from { opacity: 0; transform: translateY(6px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
.helix-admin-empty-icon { animation: helix-empty-pop .45s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
    .helix-admin-empty-icon { animation: none; }
}
.helix-admin-empty-title { font-weight: 700; color: var(--helix-text); }
.helix-admin-empty-msg { max-width: 380px; line-height: 1.5; }
.helix-admin-empty-action { margin-top: 10px; }

/* Skeleton de carga de tablas/listas del admin (AdminTableSkeleton). */
.helix-admin-skeleton { display: flex; flex-direction: column; gap: 16px; padding: 14px 4px; }
.helix-admin-skeleton-row { display: flex; align-items: center; gap: 12px; }

@media (max-width: 1100px) {
    .helix-admin-layout { grid-template-columns: 1fr; }
    .helix-admin-aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .helix-admin-shell { width: min(100% - 28px, 1320px); padding-top: 18px; }
    .helix-admin-hero { flex-direction: column; }
    .helix-admin-title-row { width: 100%; }
    .helix-admin-hero-actions { justify-content: flex-start; }
    .helix-admin-stats,
    .helix-admin-module-grid,
    .helix-admin-aside { grid-template-columns: 1fr; }
    .helix-role-panel-title { flex-wrap: wrap; }
    .helix-role-desc { flex-basis: 100%; white-space: normal; }
}

/* ── Banda «Necesita tu atención» — /admin (AdminHome.razor) ─────────────────
   Reglas del sistema que este bloque respeta y NO debe romperse al tocarlo:
   · Earned-Red: el rojo de MARCA (#CE0000) no aparece aquí. La severidad usa la
     paleta semántica SLA (--sla-danger / --sla-warn) y neutros cálidos.
   · Suelo de severidad: como máximo UNA fila lleva --danger por render. Eso lo
     decide el servidor (C#), no el CSS.
   · Flat-By-Default: la fila no lleva sombra; el hover tinta a --helix-panel-2.
   · Sin border-left de acento en la fila — prohibido por DESIGN.md §6.

   La banda reutiliza .helix-admin-section (borde, radio 8px, padding 18px) y
   .helix-admin-panel-head (chip de icono 30px + título): es la MISMA tarjeta que
   «Configuration status», a la que sustituye. */

.helix-admin-attn-time {
    margin-left: auto;
    color: var(--helix-muted);
    font-size: var(--fs-meta);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Fila ─────────────────────────────────────────────────────────────────
   Siempre <a>: cada número es un enlace a su lista prefiltrada. La única
   excepción (outbox, sin página destino) usa .helix-admin-attn-row--dead, que
   se renderiza como <div> — no como <a href="#">. */
.helix-admin-attn-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 10px;
    /* el padding negativo hace que el hover llegue al borde interior del panel */
    margin: 0 -10px;
    border-top: 1px solid var(--helix-panel-2);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: background-color .15s var(--ease-out);
}
/* :first-of-type no sirve: la fila sin destino es <div> y las navegables <a>, así que el
   primer <a> también casaría. El servidor marca la primera fila real. */
.helix-admin-attn-row--first { border-top: 0; }

@media (hover: hover) and (pointer: fine) {
    .helix-admin-attn-row:hover { background: var(--helix-panel-2); }
}
.helix-admin-attn-row:active { transform: var(--press-soft); }
.helix-admin-attn-row:focus-visible {
    outline: 3px solid var(--helix-focus-ring);
    outline-offset: 2px;
}
/* El press ya lo neutraliza el token --press-soft (bloque global de reduced-motion). */
@media (prefers-reduced-motion: reduce) {
    .helix-admin-attn-row { transition: none; }
}

/* Fila sin destino navegable: no es pulsable, y se dice. */
.helix-admin-attn-row--dead { cursor: default; }
.helix-admin-attn-row--dead:hover { background: transparent; }
.helix-admin-attn-row--dead:active { transform: none; }

/* ── Chip de severidad (el ÚNICO portador de color de la fila) ─────────────
   El fondo de la fila NUNCA se tinta por severidad: es lo que impide que seis
   filas griten seis veces. */
.helix-admin-attn-icon {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* neutro por defecto: un hueco de configuración no es una alerta */
    color: var(--helix-muted);
    background: var(--helix-panel-2);
}
.helix-admin-attn-icon .mud-icon-root { font-size: 18px; }
.helix-admin-attn-row--danger .helix-admin-attn-icon {
    color: var(--sla-danger);
    background: var(--sla-danger-bg);
}
.helix-admin-attn-row--warn .helix-admin-attn-icon {
    color: var(--sla-warn);
    background: var(--sla-warn-bg);
}

/* ── Copy ─────────────────────────────────────────────────────────────────── */
.helix-admin-attn-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.helix-admin-attn-title { color: var(--helix-text); font-size: 13.5px; font-weight: var(--fw-bold); }
.helix-admin-attn-detail {
    color: var(--helix-muted);
    font-size: var(--fs-meta);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* SourceContext y demás identificadores técnicos van en mono. */
.helix-admin-attn-detail code {
    font-family: var(--helix-font-mono);
    font-size: 11.5px;
}

/* ── Cifra + chevron ──────────────────────────────────────────────────────── */
.helix-admin-attn-meta { display: flex; align-items: center; gap: 8px; }
.helix-admin-attn-count {
    color: var(--helix-muted);
    font-size: 20px;
    font-weight: var(--fw-bold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.helix-admin-attn-row--danger .helix-admin-attn-count { color: var(--sla-danger); }
.helix-admin-attn-row--warn   .helix-admin-attn-count { color: var(--sla-warn); }

.helix-admin-attn-chevron.mud-icon-root { color: var(--helix-subtle); font-size: 16px; }

/* Etiqueta «sin vista» de la fila sin destino. */
.helix-admin-attn-nodest {
    padding: 2px 8px;
    border: 1px solid var(--helix-border);
    border-radius: 999px;
    background: var(--helix-panel-2);
    color: var(--helix-muted);
    font-size: 11.5px;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

/* ── Calma ───────────────────────────────────────────────────────────────────
   Deliberadamente SIN verde y SIN icono de éxito: una raya neutra. El check
   verde es justo lo que retira esta pantalla (health tautológico);
   reintroducirlo aquí anula el cambio. */
.helix-admin-attn-calm {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    color: var(--helix-muted);
    font-size: var(--fs-body);
}
.helix-admin-attn-calm .mud-icon-root { color: var(--helix-subtle); font-size: 16px; }

/* ── Banda «Qué cambió» ─────────────────────────────────────────────────────
   NO define estilo propio de fila: reutiliza .hlx-ax-row (línea ~4019) tal cual,
   dentro de una .helix-admin-section con el chip de cabecera en violeta Axis.
   Earned-Violet: el violeta marca procedencia de Axis, y esta banda es traza de
   gobernanza de Axis — es exactamente su caso, no decoración. */
.helix-admin-section .helix-admin-panel-head--axis > .mud-icon-root {
    color: var(--st-new);
    background: var(--st-new-bg);
}
.helix-admin-attn-axis-link {
    margin-left: auto;
    color: var(--st-new);
    font-size: 12.5px;
    font-weight: var(--fw-semibold);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 6px;
}
.helix-admin-attn-axis-link:hover { text-decoration: underline; }
.helix-admin-attn-axis-link:focus-visible {
    outline: 3px solid var(--helix-focus-ring);
    outline-offset: 2px;
}

.helix-admin-attn-axis-list { display: flex; flex-direction: column; gap: 8px; }
/* Escopado a la lista: la hora del libro de auditoría es un dato numérico comparable
   entre filas, así que se alinea en tabular-nums. No se toca .hlx-ax-time global. */
.helix-admin-attn-axis-list .hlx-ax-time {
    color: var(--helix-muted);
    font-variant-numeric: tabular-nums;
}
.helix-admin-attn-axis-cap {
    font-size: var(--fs-meta);
    color: var(--helix-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* Solo para CapabilityKey real: el ámbito traducido (freno global) va en la fuente de UI. */
.helix-admin-attn-axis-cap--mono { font-family: var(--helix-font-mono); }

.helix-admin-attn-axis-val {
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--helix-panel-2);
    color: var(--helix-muted);
    font-size: var(--fs-meta);
    font-variant-numeric: tabular-nums;
}
.helix-admin-attn-axis-val--new {
    background: #F7F5FD;
    color: var(--st-new);
    box-shadow: 0 0 0 1px rgba(91, 75, 179, .16);
}
.helix-admin-attn-axis-arrow.mud-icon-root { color: var(--helix-subtle); font-size: 14px; }

/* ── Responsive ─────────────────────────────────────────────────────────────
   La fila aguanta el colapso a una columna: el detalle recorta con ellipsis y la
   cifra nunca se comprime. Solo se reduce el gap. */
@media (max-width: 700px) {
    .helix-admin-attn-row { gap: 10px; padding: 12px 8px; margin: 0 -8px; }
    .helix-admin-attn-nodest { display: none; } /* el texto ya lo dice en el detalle */
}

/* ---------- Editor Markdown ---------- */
/* overflow visible: el popup de menciones (G02) se ancla fuera del área de texto y
   con hidden quedaba recortado/tapado por la toolbar. Las esquinas se redondean
   pieza a pieza en vez de recortar el conjunto. */
.helix-mdeditor { border: 1px solid rgba(0,0,0,.15); border-radius: 8px; background: var(--helix-surface); }
.helix-md-toolbar { display: flex; align-items: center; gap: 2px; padding: 2px 6px; border-bottom: 1px solid rgba(0,0,0,.08); background: var(--helix-panel-2); flex-wrap: wrap; border-radius: 7px 7px 0 0; }
.helix-mdeditor > :last-child { border-radius: 0 0 7px 7px; }
.helix-md-preview { padding: 12px 14px; min-height: 120px; }
.helix-md-preview > :first-child { margin-top: 0; }
.helix-md-preview img { max-width: 100%; border-radius: 6px; }
.helix-md-attachments { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-top: 1px solid rgba(0,0,0,.08); }
.helix-md-attach { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 6px; border-radius: 8px; color: var(--helix-muted); }
.helix-md-attach:hover { background: rgba(0,0,0,.06); }
.helix-md-attach input { display: none; }

/* ---------- HelixMarkdownEditor (TOAST UI, visual-first) ---------- */
/* El editor debe parecer parte de Helix: misma tipografía, bordes y radios que
   el resto de inputs; la fila inferior agrupa Adjuntar y Mencionar. */
.helix-rich-editor .toastui-editor-defaultUI {
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 8px;
    font-family: inherit;
}
.helix-rich-editor .toastui-editor-defaultUI:focus-within { border-color: var(--helix-blue, #2563EB); }
.helix-rich-editor .toastui-editor-defaultUI-toolbar {
    background: var(--helix-panel-2);
    border-radius: 7px 7px 0 0;
    padding: 0 8px;
}
.helix-rich-editor .toastui-editor-contents,
.helix-rich-editor .toastui-editor-md-container .ProseMirror {
    font-family: inherit;
    font-size: var(--fs-body);
}
/* BUG-021: con height:auto el editor crece sin limite y desplaza el resto de la
   vista; tope con scroll interno (el caret sigue visible al escribir). */
.helix-rich-editor .toastui-editor-ww-container > .toastui-editor,
.helix-rich-editor .toastui-editor-md-container > .toastui-editor {
    max-height: var(--hlx-editor-max, min(46vh, 480px));
    overflow-y: auto;
}
/* Con height:'auto' (BUG-021) el contenedor .toastui-editor no tiene altura
   definida, por lo que el ProseMirror —cuyo estilo por defecto de TOAST UI es
   height:calc(100% - 36px)— colapsaba a 0 px y el editor quedaba inservible
   (no se podia escribir, asi que el boton Responder seguia deshabilitado).
   Forzamos altura por contenido con un minimo en ambos modos (visual y Markdown). */
.helix-rich-editor .toastui-editor-ww-container .toastui-editor,
.helix-rich-editor .toastui-editor-md-container .toastui-editor,
.helix-rich-editor .toastui-editor-ww-container .ProseMirror,
.helix-rich-editor .toastui-editor-md-container .ProseMirror,
.helix-rich-editor .toastui-editor-md-container .toastui-editor-md-preview {
    height: auto !important;
    min-height: 120px;
}
/* BUG-20260709-017: en viewports muy bajos el tope runtime del editor puede bajar de
   120px; el min-height del editor lo pisaría y volvería a estrujar el hilo. SOLO para
   los dos contenedores con tope, el min-height lo controla el runtime (--hlx-editor-min):
   normalmente 120px, e igual al tope cuando este cae por debajo (así min-height nunca
   pelea con max-height). Requiere !important porque TOAST UI fija min-height:120px como
   estilo INLINE en el nodo (según su opción `minHeight`), y un estilo inline gana a
   cualquier regla de hoja sin !important. El ProseMirror interior conserva su
   min-height:120 y scrollea dentro del contenedor menor. */
.helix-rich-editor .toastui-editor-ww-container > .toastui-editor,
.helix-rich-editor .toastui-editor-md-container > .toastui-editor {
    min-height: var(--hlx-editor-min, 120px) !important;
}
.helix-rich-editor .toastui-editor-mode-switch { background: transparent; }
.helix-rich-editor-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
}
.helix-rich-attach-label { font-size: var(--fs-compact); font-weight: 500; margin-left: 4px; }
/* El popup de menciones se ancla sobre el editor, igual que en el editor clásico. */
.helix-rich-editor .helix-mention-menu { bottom: calc(100% + 6px); }

/* ---------- Arrastrar ficheros al editor (adjuntos) ---------- */
/* El marco lo pinta la ZONA que recibe el arrastre: el propio editor, o el ancestro que
   elija el padre (el composer del agente, replegado por CSS en reposo). Su etiqueta viaja
   en data-hlx-drop-label para que el texto siga siendo el traducido del .resx. */
.helix-reply { position: relative; }
.hlx-dropping::after {
    content: attr(data-hlx-drop-label);
    position: absolute; inset: 6px; z-index: 45;
    display: flex; align-items: center; justify-content: center;
    border: 2px dashed var(--helix-blue); border-radius: 12px;
    background: rgba(37, 99, 235, .07);
    color: var(--helix-blue); font-size: var(--fs-compact); font-weight: 600;
    /* Imprescindible: si el marco recibe el puntero, el dragleave se dispara sin parar. */
    pointer-events: none;
}
.helix-reply--internal .hlx-dropping::after {
    border-color: #B45309; color: #B45309; background: rgba(180, 83, 9, .07);
}

/* ---------- Company logo — topbar (agent UI) ---------- */
.helix-topbar-company {
    display: flex; align-items: center;
    margin-left: 14px; padding-left: 14px;
    border-left: 1px solid rgba(0, 0, 0, .10);
    opacity: .60;
    flex-shrink: 0;
}
.helix-topbar-company:hover { opacity: 1; transition: opacity .15s; }
.helix-topbar-company-logo { height: 14px; display: block; }

/* ---------- Portal de cliente ---------- */
/* Portal de cliente: mismo lienzo cálido que el workspace (rediseño «estilo Intercom»).
   Las tarjetas del portal ya «flotan» (radio + sombra + hover), así que solo necesita
   la calidez del fondo y hairlines cálidos para quedar alineado. */
.portal-shell { min-height: 100vh; background: var(--helix-bg); }
.portal-topbar { display: flex; align-items: center; gap: 10px; padding: 12px 24px; background: var(--helix-surface); border-bottom: 1px solid rgba(0,0,0,.08); position: sticky; top: 0; z-index: 10; }
/* Company brand block in portal header */
.portal-brand-block { display: flex; flex-direction: column; line-height: 1.15; gap: 1px; }
.portal-company-logo { height: 22px; display: block; }
.portal-brand-sub { font-size: var(--fs-meta); color: var(--helix-muted); font-weight: 500; letter-spacing: .1px; }
.portal-main { max-width: 920px; margin: 0 auto; padding: 24px; }
.portal-hero { background: linear-gradient(135deg, #CE0000, #7A0000); color: #fff; border-radius: 16px; padding: 36px 32px; margin-bottom: 28px; box-shadow: 0 8px 24px rgba(206,0,0,.20); }
.portal-hero-logo { height: 20px; display: block; margin-bottom: 18px; opacity: .90; }
.portal-hero h1 { margin: 0 0 8px; font-size: 28px; font-weight: 700; }
.portal-hero p { margin: 0; opacity: .92; }
.portal-card { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--helix-border); border-radius: 12px; background: var(--helix-surface); margin-bottom: 12px; cursor: pointer; transition: box-shadow .15s var(--ease-out), transform .15s var(--ease-out); text-decoration: none; color: inherit; }
@media (hover: hover) and (pointer: fine) {
    .portal-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10); transform: translateY(-1px); }
}
.portal-card:active { transform: translateY(0) var(--press-soft); }
/* Pill de la tarjeta de SLA del portal. Clase propia (antes .portal-pill genérica): los
   estados del portal usan StatusChip desde 4a, así que esta pill es exclusiva del SLA. */
.portal-sla-pill { display: inline-block; padding: 3px 12px; border-radius: 14px; font-size: var(--fs-meta); font-weight: 600; white-space: nowrap; }

/* ---------- Portal content area ---------- */
.portal-content { display: flex; flex-direction: column; gap: 0; }

/* Status filter strip */
.portal-status-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.portal-status-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(0,0,0,.12);
    background: var(--helix-surface); font-size: var(--fs-compact); font-weight: 500; color: var(--helix-text);
    cursor: pointer; white-space: nowrap;
    transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out), transform .12s var(--ease-out);
}
.portal-status-chip:hover { border-color: var(--helix-red); color: var(--helix-red); }
.portal-status-chip:active { transform: var(--press); }
.portal-status-chip.active { background: var(--helix-red); color: #fff; border-color: var(--helix-red); }
.portal-chip-count { font-weight: 700; font-size: var(--fs-meta); opacity: .85; }

/* Contenedor de tarjeta-esqueleto del portal (solo layout; los hijos son <MudSkeleton Wave>). */
.portal-card-skeleton { pointer-events: none; padding: 14px 16px; border-radius: 12px; background: var(--helix-surface); border: 1px solid rgba(0,0,0,.06); margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }

/* ── reduced-motion para MudSkeleton (Motion Step 2 · PR 2) ───────────────────
   MudBlazor 9.5.0 NO respeta prefers-reduced-motion (0 reglas en su CSS): tanto la
   onda (.mud-skeleton-wave::after) como el pulso (.mud-skeleton-pulse) son bucles
   infinitos. Como los esqueletos ahora son <MudSkeleton>, se detienen aquí bajo
   reduce — crítico en el portal PÚBLICO de cliente, que no debe correr una
   animación infinita. El relleno neutro (--mud-palette-skeleton) permanece. */
@media (prefers-reduced-motion: reduce) {
    .mud-skeleton-wave::after { animation: none; }
    .mud-skeleton-pulse { animation: none; }
}

/* Avatares en la conversación del portal */
.portal-avatar-client {
    width: 36px; height: 36px; border-radius: 50%;
    background: #CE0000; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: var(--fs-compact); flex-shrink: 0;
}
.portal-avatar-agent {
    width: 36px; height: 36px; border-radius: 50%;
    background: #171A21; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: var(--fs-compact); flex-shrink: 0;
}

/* ---------- Modern agent workspace ---------- */
.helix-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.helix-link-button {
    border: 0; background: transparent; color: inherit; cursor: pointer;
    padding: 0; font: inherit; text-align: left;
}
.helix-link-button:hover { color: var(--helix-red); text-decoration: underline; }

.helix-side-summary {
    margin: 18px 8px 8px; padding: 14px; border-radius: 8px;
    background: #F0F4F8; border: 1px solid var(--helix-line);
    display: flex; flex-direction: column; gap: 3px; color: var(--helix-ink);
}
.helix-side-summary-kicker {
    color: var(--helix-muted); font-size: var(--fs-meta); text-transform: uppercase; font-weight: 700;
}
.helix-side-summary span:last-child { color: var(--helix-muted); font-size: var(--fs-meta); }

.helix-metric-strip {
    display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 10px; padding: 14px 20px 10px; background: var(--helix-bg); flex-shrink: 0;
}
.helix-metric-card {
    border: 1px solid var(--helix-border); background: var(--helix-surface);
    border-radius: var(--helix-radius-md); padding: 12px 16px;
    display: flex; flex-direction: column; gap: 4px;
    box-shadow: var(--helix-shadow-sm);
}
.helix-metric-card span { color: var(--helix-muted); font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.helix-metric-card strong { color: var(--helix-ink); font-size: var(--fs-title); font-weight: 700; line-height: 1; }
.helix-metric-card.danger { border-left: 3px solid var(--sla-danger); }
.helix-metric-card.danger strong { color: var(--sla-danger); }
.helix-metric-card.warning { border-left: 3px solid var(--helix-amber); }
.helix-metric-card.warning strong { color: var(--helix-amber); }

/* Stats planos: misma tipografía que .helix-metric-card pero SIN chrome de tarjeta (borde/fondo/sombra),
   para presentar cifras DENTRO de una .helix-card blanca sin meter mini-tarjetas con fondo. */
.helix-stat-row { display: flex; flex-wrap: wrap; gap: 28px; }
.helix-stat-row > * { flex: 1 1 0; min-width: 110px; }
.helix-stat-label { color: var(--helix-muted); font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.helix-stat-value { color: var(--helix-ink); font-size: var(--fs-title); font-weight: 700; line-height: 1; margin-top: 4px; }
.helix-stat-value .sub { font-size: 13px; font-weight: 600; color: var(--helix-muted); }

.helix-filter-strip {
    display: flex; align-items: center; gap: 6px; padding: 8px 20px 10px;
    background: var(--helix-bg); border-bottom: 1px solid var(--helix-border); flex-shrink: 0;
}
.helix-filter-strip button {
    height: 30px; border: 1px solid var(--helix-border); border-radius: 999px;
    background: var(--helix-surface); color: var(--helix-text); padding: 0 14px; font-size: var(--fs-compact); font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    transition: background-color 130ms var(--ease-out), border-color 130ms var(--ease-out), color 130ms var(--ease-out), transform .12s var(--ease-out);
}
.helix-filter-strip button:hover { border-color: var(--helix-muted); color: var(--helix-text); }
.helix-filter-strip button:active { transform: var(--press); }
.helix-filter-strip button.active { background: var(--helix-text); color: #fff; border-color: var(--helix-text); }
.helix-filter-strip button.ghost { background: transparent; border: 0; color: var(--helix-muted); }
.helix-filter-strip button.ghost:hover { background: rgba(0,0,0,.04); color: var(--helix-text); }
/* Chip de un filtro YA aplicado desde el panel: lleva su propio descarte, así que se lee como estado
   puesto y no como un filtro rápido disponible. */
.helix-filter-strip button.helix-filter-chip {
    background: var(--helix-soft); border-color: var(--helix-muted); padding-right: 8px;
    position: relative;
}
.helix-filter-strip button.helix-filter-chip:hover { background: var(--helix-sink-2); }
/* Objetivo táctil ≥44px sin tocar la altura de 30px de la tira (invariante visual de la cola):
   un pseudo-elemento amplía solo el área de toque, en vertical, fuera del flujo. */
.helix-filter-strip button.helix-filter-chip::after {
    content: "";
    position: absolute;
    inset: -7px 0;
}
.helix-filter-strip button.helix-filter-chip:focus-visible {
    outline: 2px solid var(--helix-focus-ring); outline-offset: 2px;
}

/* Modo búsqueda: la caja es el estado, así que se ve y se edita sobre la lista. */
.helix-search-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px; background: var(--helix-surface);
    border-bottom: 1px solid var(--helix-border); flex-shrink: 0;
}
.helix-search-bar .hlx-search-query { flex: 1 1 auto; min-width: 0; }
.helix-search-bar .mud-input-control { margin: 0; }

/* Etiqueta de alcance: dice que la vista no acota. No lleva el rojo de marca — informa, no alerta. */
.helix-search-scope {
    display: inline-flex; align-items: center; gap: 6px; align-self: center;
    font-size: var(--fs-compact); font-weight: 600; color: var(--helix-muted);
    padding-right: 4px;
}
.helix-filter-spacer { flex: 1; }

/* Filtros: los MudSelect (Etiquetas/Estado) igualan la altura de los chips (30px) en vez de la
   altura grande por defecto de MudBlazor, para que el strip quede homogéneo. */
.helix-filter-strip .mud-input-control { margin: 0; align-self: center; }
.helix-filter-strip .mud-input.mud-input-outlined .mud-input-slot {
    min-height: 30px; height: 30px; padding-top: 0; padding-bottom: 0;
}
.helix-filter-strip .mud-input.mud-input-outlined .mud-input-slot input,
.helix-filter-strip .mud-select .mud-select-input {
    font-size: var(--fs-compact); padding-top: 0; padding-bottom: 0;
}
.helix-filter-strip .mud-input.mud-input-outlined .mud-input-adornment { align-self: center; }

/* Tipografía uniforme de los items de menú desplegable (Asignar/Cambiar estado/Más/envío…).
   Los items con contenido propio (punto + nombre) heredaban la fuente del body (~16px) mientras
   que los de texto plano de MudMenuItem iban a ~14px → se igualan todos a 14px. */
.mud-menu-item { font-size: var(--fs-body); }
.mud-menu-item .mud-list-item-text,
.mud-menu-item .mud-typography { font-size: var(--fs-body); }

.helix-workspace-split { display: flex; min-height: 0; flex: 1 1 auto; background: var(--helix-soft); }
.helix-ticket-table-wrap {
    flex: 1 1 auto; min-width: 0; overflow: auto; background: var(--helix-surface);
    border-right: 1px solid var(--helix-line);
}
.helix-ticket-row.selected { background: color-mix(in srgb, var(--helix-red) 5%, transparent); box-shadow: inset 3px 0 0 var(--helix-red); }
.helix-ticket-row.bulk-selected { background: color-mix(in srgb, var(--helix-amber) 12%, transparent); box-shadow: inset 3px 0 0 var(--helix-amber); }
.helix-ticket-row.bulk-selected.selected { background: color-mix(in srgb, var(--helix-red) 8%, transparent); box-shadow: inset 3px 0 0 var(--helix-red); }

/* ── Bulk action bar ─────────────────────────────────────────────────────── */
.helix-bulk-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    background: color-mix(in srgb, var(--helix-amber) 9%, transparent); border-bottom: 1px solid var(--helix-amber);
    border-top: 1px solid var(--helix-amber);
    opacity: 1; transform: translateY(0);
    /* Entrada interrumpible: una transición + @starting-style retargetea desde el
       estado actual si la barra se re-inserta, en vez de reiniciar como un keyframe. */
    transition: opacity .15s var(--ease-out), transform .15s var(--ease-out);
}
@starting-style {
    .helix-bulk-bar { opacity: 0; transform: translateY(-6px); }
}
.helix-bulk-count {
    font-size: var(--fs-compact); font-weight: 600; color: #92400E; margin-right: 4px; white-space: nowrap;
}
.helix-ticket-meta { margin-top: 3px; color: var(--helix-muted); font-size: var(--fs-meta); line-height: 1.25; }
.helix-assignee { display: inline-flex; align-items: center; gap: 8px; color: var(--helix-text); }
.helix-assignee span {
    /* flex:0 0 26px → el círculo no se deforma (óvalo) cuando el nombre ocupa 2 líneas */
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--helix-avatar-bg);
    color: var(--helix-text); display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-meta); font-weight: 700; line-height: 1; box-sizing: border-box;
}
/* Avatar suelto en el grid (sin nombre; el nombre va en tooltip) */
.helix-avatar-chip {
    width: 26px; height: 26px; border-radius: 50%; background: var(--helix-avatar-bg);
    color: var(--helix-text); display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-meta); font-weight: 700; line-height: 1; box-sizing: border-box; cursor: default;
}
.helix-avatar-chip--empty { background: var(--helix-panel-2); color: var(--helix-muted); font-weight: 600; }
.helix-channel {
    display: inline-flex; align-items: center; border: 1px solid var(--helix-line);
    border-radius: 999px; padding: 3px 9px; color: var(--helix-text); background: var(--helix-surface); font-size: var(--fs-meta);
}
.helix-priority-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px;
}
.helix-priority-dot.urgent { background: #B42318; }
.helix-priority-dot.high { background: #F79009; }
.helix-priority-dot.normal { background: #2F80ED; }
.helix-priority-dot.low { background: var(--helix-muted); }
/* It. 2 cola: chip «Reabierto» (señal ReopenedAt) — ámbar discreto, reusa tokens SLA-warn (dark-aware). */
.hlx-reopened-chip {
    display: inline-flex; align-items: center; gap: 3px; margin-top: 4px;
    padding: 1px 7px; border-radius: 999px; font-size: var(--fs-meta); font-weight: 700;
    background: var(--sla-warn-bg); color: var(--sla-warn); white-space: nowrap;
}

/* Preview panel = mismo patrón que el panel de contexto: panel BLANCO, cards CREMA
   (antes panel y cards eran #fff → sin jerarquía, «los colores no aplicaban»). */
.helix-preview-panel {
    width: 320px; flex: 0 0 320px; overflow: auto; padding: 18px;
    background: var(--helix-surface);
}
.helix-preview-head { display: flex; align-items: center; justify-content: space-between; }
.helix-preview-block, .helix-property-card, .helix-sla-card {
    border: 1px solid var(--helix-border); border-radius: 8px; padding: 12px;
    display: flex; flex-direction: column; gap: 4px; margin-top: 14px; background: var(--helix-panel-2);
}
.helix-preview-block span, .helix-preview-grid span, .helix-property-card span, .helix-sla-card small {
    color: var(--helix-muted); font-size: var(--fs-meta);
}
.helix-preview-block strong, .helix-property-card strong, .helix-sla-card strong { color: var(--helix-ink); }
.helix-property-card small { color: var(--helix-muted); }
.helix-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.helix-preview-grid > div {
    border: 1px solid var(--helix-border); border-radius: 8px; padding: 10px;
    display: flex; flex-direction: column; gap: 3px; background: var(--helix-panel-2);
}
.helix-preview-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.helix-suggestion-card {
    border: 1px solid var(--helix-border); border-radius: 8px; padding: 12px; margin-top: 14px;
    display: flex; flex-direction: column; gap: 4px; background: var(--helix-panel-2);
    color: inherit; text-align: left;
}
.helix-suggestion-card span, .helix-suggestion-card small { color: var(--helix-muted); font-size: var(--fs-meta); }
.helix-suggestion-card.compact { width: 100%; cursor: pointer; }
.helix-suggestion-card.compact:hover { border-color: var(--helix-muted); background: var(--helix-panel-2); }
/* Dentro de una card del panel contextual se aplana: fila suave, sin card-en-card */
.helix-ctx-section .helix-suggestion-card.compact {
    border: 0; background: var(--helix-soft); border-radius: 10px;
    box-shadow: none; margin-bottom: 6px;
}
.helix-ctx-section .helix-suggestion-card.compact:hover { background: color-mix(in srgb, var(--helix-red) 6%, transparent); }

.helix-ticket-wrap {
    display: grid; grid-template-columns: minmax(460px, 1fr) 320px;
    height: calc(100dvh - var(--mud-appbar-height, 64px));
    min-height: 0; overflow: hidden; background: var(--helix-soft);
}
.helix-ticket-wrap.hlx-with-queue {
    grid-template-columns: 288px minmax(420px, 1fr) 320px;
}
/* Panel Información colapsable en pantallas anchas (toggle persistente, como el nav
   izquierdo): al colapsar desaparece la columna de 320px y la conversación gana ancho. */
.helix-ticket-wrap.hlx-ctx-collapsed { grid-template-columns: minmax(460px, 1fr); }
.helix-ticket-wrap.hlx-ctx-collapsed.hlx-with-queue { grid-template-columns: 288px minmax(420px, 1fr); }
.helix-ticket-wrap.hlx-ctx-collapsed > .helix-ticket-context { display: none; }
/* El toggle de colapso solo tiene sentido >1280px (donde el panel es columna);
   en pantallas estrechas se usa el botón ℹ️ (hlx-ctx-toggle) con overlay. */
.hlx-ctx-collapse-toggle {
    display: none !important;
    align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
    background: transparent; cursor: pointer; overflow: hidden;
    transition: background-color .12s;
}
.hlx-ctx-collapse-toggle:hover { background: rgba(16, 24, 40, 0.06); }
.hlx-ctx-collapse-toggle:focus-visible { outline: 2px solid var(--helix-focus-ring); outline-offset: 1px; }
/* El colapso del panel vive solo en las acciones de la cabecera (.hlx-ctx-collapse-toggle),
   visible en pantallas anchas; el chevron in-panel duplicado se retiró (sigue el prototipo). */
@media (min-width: 1281px) { .hlx-ctx-collapse-toggle { display: inline-flex !important; } }

/* Modo foco (pantalla completa): solo la columna de conversación, Esc sale.
   Sin padding de lectura fijo: el hilo usa todo el ancho que dejan libre
   queue/contexto al ocultarse. */
.helix-ticket-wrap.hlx-focus,
.helix-ticket-wrap.hlx-focus.hlx-with-queue { grid-template-columns: minmax(0, 1fr); }
.helix-ticket-wrap.hlx-focus .helix-queue-panel,
.helix-ticket-wrap.hlx-focus .helix-ticket-context { display: none; }

/* ── Paneles flotantes (rediseño «estilo Intercom») ───────────────────────────
   En pantallas anchas (≥1281px, el único punto donde vive el layout real de 3
   columnas) las columnas dejan de pegarse con hairlines y «flotan» sobre el
   lienzo cálido: hueco entre ellas, esquina redondeada y sombra suave. Por
   debajo de 1281px el panel de contexto colapsa/se vuelve overlay, así que el
   gesto flotante no aplica y se conserva el layout pegado existente.
   No se toca `overflow` de los paneles: su overflow:auto/hidden ya recorta el
   radio (la cola y el contexto siguen scrolleando dentro). */
@media (min-width: 1281px) {
    .helix-ticket-wrap {
        gap: var(--helix-float-gap);
        padding: var(--helix-float-gap);
        background: var(--helix-canvas);
    }
    .helix-ticket-wrap > .helix-queue-panel,
    .helix-ticket-wrap > .helix-ticket-main,
    .helix-ticket-wrap > .helix-ticket-context {
        border: 1px solid var(--helix-border);
        border-radius: var(--helix-float-radius);
        box-shadow: var(--helix-float-shadow);
    }
}

/* Queue panel */
.helix-queue-panel {
    border-right: 1px solid var(--helix-line); background: var(--helix-soft);
    overflow-y: auto; min-height: 0; display: flex; flex-direction: column;
}
.helix-queue-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px 8px; border-bottom: 1px solid var(--helix-line);
    flex-shrink: 0; background: var(--helix-surface); position: sticky; top: 0; z-index: 1;
}
.helix-queue-title { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--helix-text); display: inline-flex; align-items: center; gap: 7px; }
.helix-queue-count {
    background: var(--helix-red); color: #fff; font-size: var(--fs-meta); font-weight: 700;
    min-width: 20px; height: 17px; padding: 0 6px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
}
.helix-queue-search {
    display: flex; align-items: center; gap: 7px;
    margin: 8px 10px 4px; padding: 0 10px; height: 32px;
    border: 1px solid var(--helix-border); border-radius: 8px; background: var(--helix-surface);
    flex-shrink: 0;
}
.helix-queue-search input {
    border: 0; outline: none; background: transparent; flex: 1; min-width: 0;
    font-size: var(--fs-compact); font-family: inherit; color: var(--helix-text);
}
.helix-queue-search input::placeholder { color: var(--helix-muted); }
.helix-queue-search:focus-within { border-color: rgba(206,0,0,0.35); }
.helix-queue-list { flex: 1; overflow-y: auto; min-height: 0; }
.helix-queue-item-client {
    font-size: var(--fs-meta); color: var(--helix-muted); min-width: 0;
    display: inline-flex; align-items: center; gap: 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.helix-queue-more {
    display: block; width: calc(100% - 20px); margin: 8px 10px;
    padding: 7px 0; border: 1px solid var(--helix-border); border-radius: 8px;
    background: var(--helix-surface); font-size: var(--fs-meta); font-weight: 600; color: var(--helix-text);
    cursor: pointer; font-family: inherit; transition: border-color 130ms, color 130ms;
}
.helix-queue-more:hover { border-color: var(--helix-muted); color: var(--helix-text); }
/* P1 «contención»: filas planas (no tarjetas que levitan). Se quitan borde/sombra/
   radio de card y el lift; queda una fila con el rail de prioridad (inline border-left
   3px desde QueuePanel) + tinte de hover/activo NEUTRO cálido (sin rojo). */
.helix-queue-item {
    position: relative;
    padding: 9px 12px; margin: 1px 8px;
    background: transparent; border: 0; border-radius: 8px;
    box-shadow: none;
    cursor: pointer; transition: background 120ms;
}
.helix-queue-item:hover { background: var(--helix-panel-2); }
/* Activo (SELECCIONADO): tinte neutro + filo rojo izquierdo como BORDE de la card
   (border-left + el border-radius:8px del item ⇒ el filo CURVA en las esquinas y
   «abraza» el item como el resto de tarjetas, en vez de un rail recto cortado —
   BUG-20260713-002). El padding-left se reduce 3px para compensar el borde y que el
   contenido no se desplace al seleccionar. La prioridad la marca el pill «● Prioridad». */
.helix-queue-item.active {
    background: rgba(60, 52, 40, .09);
    border-left: 3px solid var(--helix-red); padding-left: 9px;
}
.helix-queue-item.active .helix-queue-item-subject { font-weight: 600; }
.helix-queue-item-top { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.helix-queue-item-ref { font-size: var(--fs-meta); font-weight: var(--fw-semibold); color: var(--helix-muted); margin-left: auto; flex-shrink: 0; }
.helix-queue-item-subject {
    font-size: var(--fs-compact); font-weight: 500; color: var(--helix-text);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.helix-queue-item-meta {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: var(--fs-meta); color: var(--helix-muted); margin-top: 4px;
}
.helix-badge-sm { font-size: var(--fs-meta); font-weight: 700; padding: 1px 6px; border-radius: 10px; flex-shrink: 0; }
.helix-sla-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.helix-sla-dot.hlx-breached { background: var(--sla-danger); }
/* Ticket action toolbar */
.hlx-ticket-actions { flex-wrap: nowrap; gap: 6px !important; }
.hlx-reply-group .mud-button-group-root { border-radius: 10px !important; overflow: hidden; }
.helix-ticket-context {
    width: auto; flex: unset; border-left: 1px solid var(--helix-line);
    min-height: 0; padding: 16px; overflow-y: auto; background: var(--helix-surface);
}
.helix-panel-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.helix-ticket-main { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--helix-panel-2); }
/* Barra de progreso fina al cambiar de ticket por la cola (no empuja el contenido) */
.hlx-nav-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 6; }
.helix-ticket-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 16px 20px; flex: 0 0 auto; gap: 16px; background: var(--helix-surface);
    border-bottom: 1px solid var(--helix-line);
}
.helix-ticket-header-left { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; }
.helix-ticket-refline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.helix-ticket-ref-label { font-size: var(--fs-meta); color: var(--helix-muted); font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
/* «Kit Táctil»: los identificadores de ticket (HX-####) en IBM Plex Mono con cifras tabulares.
   Solo los IDs (cortos, nowrap, dimensionados al contenido → sin riesgo de ancho fijo); los
   tiempos en prosa se quedan en sans a propósito (mono es más ancho y reventaría slots fijos). */
.helix-ticket-ref-label,
.helix-recent-ref,
.portal-ticket-ref { font-family: var(--helix-font-mono); font-variant-numeric: tabular-nums; }
.helix-ticket-subject { font-size: var(--fs-headline); font-weight: var(--fw-bold); margin-top: 4px; color: var(--helix-text); line-height: var(--lh-snug); }
.helix-meta-chip { display: inline-flex; align-items: center; gap: 3px; }
.helix-meta-sep { color: var(--helix-border); }
/* Priority badge */
/* Axis (IA): el chip de cabecera del ticket se retiró (redundante con el drawer «Axis ·
   Inteligencia» y el panel «Información»). El resumen del triaje se muestra ahora en el panel
   de previsualización de la cola (.helix-preview-block en /vistas). CSS del chip eliminado. */

/* Header v2.1: kicker (chips) + acciones → título propio → meta.
   Más aire vertical (no se siente comprimido) y la ref del ticket nunca se parte. */
.hlx-header-v2 { flex-direction: column; align-items: stretch; gap: 0; padding: 14px 20px 0; border-bottom: 0; }
/* fila 1: kicker a la izquierda (crece y envuelve), acciones a la derecha */
.hlx-headrow { display: flex; align-items: flex-start; gap: 12px; min-width: 0; min-height: 34px; flex-wrap: wrap; }
.hlx-kicker {
    display: flex; align-items: center; gap: 9px; row-gap: 6px; flex-wrap: wrap;
    flex: 1 1 auto; min-width: 0;
}
.hlx-titleline { display: flex; align-items: center; gap: 10px; min-width: 0; } /* legacy, sin uso */
/* fila 2: el asunto en su propia línea, grande y con aire por encima/abajo */
.hlx-title-own {
    margin: 11px 0 2px; font-size: var(--fs-headline); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: var(--lh-snug);
    color: var(--helix-text); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hlx-actionbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
    flex: 0 0 auto; padding-bottom: 0; border-bottom: 0;
}
/* Botonera: tipografía consistente (sin mayúsculas MudBlazor) y look del prototipo */
.hlx-actionbar .mud-button-root,
.helix-composer-actions .mud-button-root {
    text-transform: none; letter-spacing: 0;
    font-size: var(--fs-compact); font-family: inherit; border-radius: 10px;
}
.hlx-actionbar .mud-button-outlined {
    height: 36px; font-weight: 600; color: var(--helix-text);
    border-color: var(--helix-border); background: var(--helix-surface);
}
.hlx-actionbar .mud-button-outlined:hover {
    border-color: var(--helix-muted); color: var(--helix-text); background: var(--helix-panel-2);
}
.hlx-actionbar .mud-button-outlined .mud-icon-root { color: var(--helix-muted); }
.hlx-actionbar .mud-button-outlined:hover .mud-icon-root { color: var(--helix-text); }
/* Buscador y cabeceras de tramo dentro de los menús de la botonera (Asignar). */
.hlx-menu-search {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px 8px; border-bottom: 1px solid var(--helix-border);
}
.hlx-menu-search .mud-icon-root { color: var(--helix-muted); }
.hlx-menu-search:focus-within { border-bottom-color: var(--helix-red); }
.hlx-menu-search-input {
    flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: var(--fs-compact); color: var(--helix-text);
}
.hlx-menu-search-input::placeholder { color: var(--helix-muted); }
.hlx-menu-section {
    padding: 8px 12px 4px; font-size: var(--fs-meta); font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--helix-muted);
}
.hlx-menu-empty { color: var(--helix-muted); font-size: var(--fs-compact); }
.hlx-reply-group .mud-button-root { font-weight: 700; height: 36px; }
.helix-composer-actions .mud-button-text { color: var(--helix-muted); font-weight: 600; }
.helix-composer-actions .mud-button-text:hover { color: var(--helix-red); }
.hlx-metabar {
    display: flex; align-items: center; gap: 0; flex-wrap: wrap; row-gap: 6px;
    padding: 10px 0 12px;
}
/* UX (Daniel 2026-07-09): botón para mostrar/ocultar la meta del ticket cuando el editor está expandido
   (auto-colapso para ganar alto en el composer). */
.hlx-meta-toggle {
    display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px;
    border: 1px solid var(--helix-border); background: var(--helix-panel-2); color: var(--helix-muted);
    font: inherit; font-size: var(--fs-meta); font-weight: 600; padding: 4px 10px; border-radius: 8px; cursor: pointer;
}
.hlx-meta-toggle:hover { color: var(--helix-text); background: var(--helix-surface); }
.hlx-meta-toggle--hide { margin: 0 0 0 auto; padding: 4px; border-color: transparent; background: transparent; }
.hlx-meta-toggle--hide:hover { background: var(--helix-panel-2); }
.hlx-meta-toggle .mud-icon-root { font-size: var(--fs-lead); }
.hlx-meta-item {
    display: flex; flex-direction: column; gap: 1px;
    padding: 0 14px; border-right: 1px solid var(--helix-line); min-width: 0;
}
.hlx-meta-item:first-child { padding-left: 2px; }
.hlx-meta-item:last-child  { border-right: 0; }
.hlx-meta-label { font-size: var(--fs-meta); color: var(--helix-muted); font-weight: var(--fw-semibold); }
.hlx-meta-value {
    font-size: var(--fs-compact); font-weight: 600; color: var(--helix-text);
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.hlx-meta-link { color: var(--helix-red); text-decoration: none; }
.hlx-meta-link:hover { text-decoration: underline; }
/* Es un <button> real (no un <span>): el activador del MudMenu de etiquetas tiene que ser
   enfocable y activable por teclado, así que aquí se neutraliza el chrome nativo del botón. */
.hlx-tag-add {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border: 1px dashed var(--helix-border); border-radius: 6px;
    color: var(--helix-muted); font-weight: 700; cursor: pointer; font-size: var(--fs-compact);
    background: transparent; padding: 0; font-family: inherit; line-height: 1;
}
.hlx-tag-add:hover { border-color: var(--helix-blue); color: var(--helix-blue); }
.hlx-tag-add:focus-visible { outline: 2px solid var(--helix-focus-ring); outline-offset: 2px; }
/* G04: chips de etiqueta en la cabecera del ticket */
.hlx-meta-tags { flex-wrap: wrap; }
.hlx-tag-chip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 4px 1px 8px; border-radius: 999px;
    background: rgba(37, 99, 235, .10); color: var(--helix-blue);
    font-size: var(--fs-meta); font-weight: 600; white-space: nowrap;
}
.hlx-tag-chip button {
    border: 0; background: transparent; color: inherit; cursor: pointer;
    font-size: var(--fs-compact); line-height: 1; padding: 0 2px; opacity: .6;
}
.hlx-tag-chip button:hover { opacity: 1; }
/* Tabs bar */
.helix-ticket-tabs {
    display: flex; align-items: center; border-bottom: 2px solid var(--helix-line);
    background: var(--helix-surface); padding: 0 20px; flex: 0 0 auto;
}
/* v2.1: filtros del timeline en un único dropdown compacto a la derecha (separado de las
   pestañas, nunca trunca). Botón discreto estilo «filter-dd» del prototipo. */
.helix-tab-filter { margin-left: auto; display: flex; align-items: center; padding: 4px 0; }
.helix-tab-filter .mud-button-root {
    text-transform: none; letter-spacing: 0; font-size: var(--fs-meta); font-weight: 600;
    border-radius: 8px; height: 30px; font-family: inherit;
    color: var(--helix-muted); border-color: var(--helix-border); background: var(--helix-panel-2);
}
.helix-tab-filter .mud-button-root:hover { color: var(--helix-text); border-color: var(--helix-muted); }
.helix-tab-filter .mud-button-root .mud-icon-root { color: var(--helix-subtle); }
.helix-ticket-tab {
    border: 0; background: transparent; padding: 10px 16px;
    font-size: var(--fs-compact); font-weight: 600; color: var(--helix-muted);
    cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}
.helix-ticket-tab:hover { color: var(--helix-text); }
.helix-ticket-tab.active { color: var(--helix-red); border-bottom-color: var(--helix-red); }
.helix-ticket-tab-badge {
    background: var(--helix-red); color: #fff; border-radius: 10px;
    padding: 1px 6px; font-size: var(--fs-meta); font-weight: 700; margin-left: 4px; vertical-align: middle;
}
/* PR-1 (axis-timeline-routing): contador de la pestaña «Actividad de Axis» — VIOLETA (procedencia Axis),
   no el rojo de marca de .helix-ticket-tab-badge (Earned-Violet Rule, README §4). Legible también en
   pestaña activa (texto rojo de marca): el badge lleva su propio fondo/color fijos, no hereda. */
.hlx-axlog-tab-badge {
    background: var(--st-new-bg); color: var(--st-new); border-radius: 999px;
    padding: 1px 7px; font-size: var(--fs-meta); font-weight: 700; margin-left: 5px; vertical-align: middle;
}
/* Asterisco en la pestaña Detalles: campos obligatorios sin rellenar. */
.hlx-tab-required {
    color: var(--helix-red); font-weight: 700; font-size: 15px;
    margin-left: 3px; line-height: 1; vertical-align: middle;
}
/* Tab content areas */
/* Mismo suelo crema tenue que la conversación/actividad para que TODAS las pestañas
   (Detalles, Tareas, Aprobaciones) compartan fondo y no salten de crema a blanco. */
.helix-tab-content { flex: 1 1 auto; overflow-y: auto; padding: 20px 24px; background: var(--helix-panel-2); }
.helix-detalles-inner { max-width: 600px; }
/* BUG-20260625-020: en el panel derecho (estrecho) los controles MudBlazor deben ir a la escala densa
   del panel (12px), no a su 16px por defecto, que desbordaba y clipeaba. Sin max-width: ocupa el ancho. */
.helix-ctx-panel .helix-detalles-inner { max-width: none; }
.helix-ctx-panel .helix-detalles-inner .mud-input,
.helix-ctx-panel .helix-detalles-inner .mud-input-slot input,
.helix-ctx-panel .helix-detalles-inner .mud-select-input,
.helix-ctx-panel .helix-detalles-inner .mud-select-input .mud-input-slot,
.helix-ctx-panel .helix-detalles-inner .mud-input-label,
.helix-ctx-panel .helix-detalles-inner .mud-select .mud-input { font-size: var(--fs-meta); }
/* Etiqueta flotante: ligeramente menor para que no se solape al encoger el input. */
.helix-ctx-panel .helix-detalles-inner .mud-input-label { font-size: var(--fs-meta); }
.helix-ctx-panel .helix-detalles-inner .mud-chip { font-size: var(--fs-meta); }
/* BUG-20260625-020: cabecera de sección plegable (Observadores, Eventos). Toda la fila es el toggle. */
.hlx-ctx-collapse-head { cursor: pointer; user-select: none; }
.hlx-ctx-collapse-head:hover { color: var(--helix-text, var(--helix-text)); }
.hlx-ctx-collapse-head .mud-icon-root { color: var(--helix-muted); }
/* BUG-20260625-020: los items del desplegable (popover de MudSelect, renderizado fuera del panel) deben
   ir a 12px como el resto del panel. El popover lleva la clase hlx-ctx-menu vía PopoverClass. */
.hlx-ctx-menu .mud-list-item,
.hlx-ctx-menu .mud-list-item .mud-list-item-text,
.hlx-ctx-menu .mud-list-item .mud-typography { font-size: var(--fs-meta); }
.hlx-ctx-menu .mud-list-item { min-height: 32px; }
/* Selects/inputs del panel de contexto y del popover: bordes y label cálidos, foco rojo de
   marca (en vez del azul/gris frío de Material) e ítems del desplegable con hover crema. */
.helix-ctx-panel .mud-input.mud-input-outlined .mud-input-outlined-border { border-color: var(--helix-border); }
.helix-ctx-panel .mud-input.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--helix-muted); }
.helix-ctx-panel .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border { border-color: var(--helix-red); }
.helix-ctx-panel .mud-input-label { color: var(--helix-muted); }
.helix-ctx-panel .mud-input.mud-focused .mud-input-label { color: var(--helix-red); }
.hlx-ctx-menu .mud-list-item:hover { background: var(--helix-panel-2); }
.hlx-ctx-menu .mud-list-item.mud-selected-item { background: rgba(206, 0, 0, .08); color: var(--helix-red); }
.helix-actividad-panel { background: var(--helix-soft); }
.helix-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 240px; padding: 40px 20px; color: var(--helix-muted); gap: 12px;
    font-size: var(--fs-body); text-align: center;
}
.helix-empty-state p { margin: 0; max-width: 320px; line-height: 1.5; }
.helix-empty-state strong { color: var(--helix-text); font-weight: 700; }
/* SLA progress bars */
.helix-sla-item { margin-bottom: 12px; }
.helix-sla-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-size: var(--fs-meta); }
.helix-sla-bar { height: 6px; border-radius: 3px; background: rgba(0,0,0,.08); overflow: hidden; }
/* GPU: la barra escala con transform: scaleX en vez de animar `width` (layout/paint).
   El porcentaje llega como ENTERO en `--sla-pct` y se divide en calc() → sin coma
   decimal de locale es-ES. El contenedor tiene overflow:hidden; origen a la izquierda. */
.helix-sla-bar-fill { height: 100%; width: 100%; transform-origin: left center; transform: scaleX(calc(var(--sla-pct, 100) / 100)); transition: transform .3s var(--ease-out); }
/* «En plazo» = neutro (no verde): el rojo/ámbar se reserva para riesgo/vencido. */
.helix-sla-bar-fill--healthy { background: var(--helix-subtle); }
.helix-sla-bar-fill--due-soon { background: var(--sla-warn); }
.helix-sla-bar-fill--breached { background: var(--sla-danger); }
.helix-sla-bar-fill--paused { background: var(--helix-muted); }
/* Context panel sections */
.helix-ctx-panel .helix-context-section:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.helix-conversation { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--helix-panel-2); padding: 18px 20px 10px; border-bottom: 1px solid var(--helix-border); }

/* hilo-v3 (cards con clamp de 2 líneas + digest de seguimientos): sustituye al stub v2 de una línea.
   .helix-msg-collapsible sustituye a .helix-msg como contenedor del comentario; el <summary>
   (.hlx-msgcard-sum) es la cabecera + preview recortado a 2 líneas. Expandir SOLO quita el recorte — la
   card no cambia de forma (fin del salto 30px→200px del v2). Patch de diseño:
   docs/design/hilo-v3/hilo-colapsado-patch.css (nombres de producción .hlx-msgcard-* y .hlx-digest-*). */

/* ---------- Card colapsable (colapsado = card con clamp de 2 líneas) ---------- */
.helix-msg-collapsible {
    background: var(--helix-surface); border: 1px solid var(--helix-border); border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04); margin-bottom: 12px; overflow: hidden;
}
/* El cliente lleva rail azul (--st-open); Earned-Red: el rojo de marca no se usa aquí. */
.helix-msg-collapsible.helix-msg-client { border-left: 3px solid var(--st-open); }
.helix-msg-collapsible.internal { background: #FFFBEB; border-color: #FDE68A; }
/* Una regla legacy de «cards planas» (.helix-msg-public/-client/-internal { background:transparent }, ~L3706)
   dejaba la card pública/cliente sin fondo de superficie (se veía transparente y el fundido del clamp parecía
   una mancha blanca). La reafirmamos con mayor especificidad, sin tocar el `.helix-msg` plano legacy. */
.helix-msg-collapsible.helix-msg-public,
.helix-msg-collapsible.helix-msg-client { background: var(--helix-surface); }
.helix-msg-collapsible.helix-msg-ai .helix-msg-inner { background: transparent; }

.helix-msg-collapsible > summary.hlx-msgcard-sum { display: block; padding: 10px 14px 11px; cursor: pointer; list-style: none; }
.helix-msg-collapsible > summary.hlx-msgcard-sum::-webkit-details-marker { display: none; }
.helix-msg-collapsible > summary.hlx-msgcard-sum:focus-visible { outline: 2px solid var(--helix-focus-ring); outline-offset: 2px; border-radius: 12px; }

/* Cabecera: avatar 18px + autor + (badge de rol/estado) + hora + chevron a la derecha */
.hlx-msgcard-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-size: var(--fs-meta); color: var(--helix-muted); min-width: 0; }
/* BUG-20260713-012: cabecera de una sola línea. En columna estrecha (panel derecho abierto) + autor largo
   o varios badges, la card (overflow:hidden) recortaba fecha/adjuntos/chevron. El autor absorbe el recorte
   con elipsis (min-width:0 + ellipsis); la fecha/adjuntos/chevron/pulgares NO se encogen (flex-shrink:0). */
.hlx-msgcard-head b { font-size: var(--fs-compact); color: var(--helix-text); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlx-msgcard-head .hlx-msgcard-date { flex-shrink: 0; white-space: nowrap; }
.hlx-msgcard-chev { margin-left: auto; color: var(--helix-subtle); flex-shrink: 0; transition: transform .15s var(--ease-out); }
.helix-msg-collapsible[open] .hlx-msgcard-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .hlx-msgcard-chev { transition: none; } }
/* BUG-20260713-013: los pulgares de revisión de Axis viven en la cabecera de la card, no en fila propia.
   UN solo margin-left:auto (los pulgares) absorbe el hueco; el chevron adyacente resetea el suyo a 0 para
   quedar pegado a los pulgares (separados por el gap:7px de la cabecera). Con DOS auto, flex repartiría el
   hueco entre ambos y los pulgares quedarían en el medio (BUG visual reportado). */
.hlx-msgcard-head .hlx-ai-review { margin-left: auto; flex-shrink: 0; }
.hlx-msgcard-head .hlx-ai-review + .hlx-msgcard-chev { margin-left: 0; }

/* Badge de rol «Cliente» (solo el caso no-por-defecto lleva badge, como en el stub v2) */
.hlx-msgcard-role {
    flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    padding: 1px 6px; border-radius: 5px; color: var(--st-open);
    background: color-mix(in srgb, var(--st-open) 12%, transparent);
}

/* Cuerpo recortado a 2 líneas con fundido lateral. Al abrir, el clamp desaparece
   y el cuerpo completo se muestra en .helix-msg-inner (misma card, sin salto). */
.hlx-msgcard-clamp {
    position: relative; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--helix-text);
}
.hlx-msgcard-clamp::after { content: ""; position: absolute; right: 0; bottom: 0; width: 90px; height: 1.5em; background: linear-gradient(90deg, transparent, var(--helix-surface)); }
.internal .hlx-msgcard-clamp::after { background: linear-gradient(90deg, transparent, #FFFBEB); }
.helix-msg-collapsible[open] .hlx-msgcard-clamp { display: none; }

/* Avatar diminuto (18px, HelixAvatar Size=18) — identidad del emisor incluso colapsado, la card SIEMPRE
   muestra autor (no hay agrupación que lo oculte). */
.helix-msg-stub-avatar { flex-shrink: 0; }
.helix-msg-stub-attach { flex-shrink: 0; font-size: var(--fs-meta); color: var(--helix-muted); }

/* El cuerpo expandido vive DENTRO de la card (se anulan los estilos de card independiente del v2) */
.helix-msg-collapsible .helix-msg-inner { margin: 0; border: 0; box-shadow: none; border-radius: 0; padding: 0 14px 12px; background: transparent; }
.helix-msg-inner .helix-md-content { margin: 0; }

/* ---------- Digest de seguimientos (racha de >=3 públicos consecutivos del mismo agente) ---------- */
.hlx-digest { margin: 2px 0 14px; border: 1px dashed color-mix(in srgb, var(--helix-muted) 42%, transparent); border-radius: 10px; }
.hlx-digest > summary { display: flex; align-items: center; gap: 9px; padding: 8px 12px; cursor: pointer; list-style: none; font-size: var(--fs-compact); color: var(--helix-muted); }
.hlx-digest > summary::-webkit-details-marker { display: none; }
.hlx-digest > summary:hover { background: var(--helix-surface); border-radius: 9px; }
.hlx-digest > summary:focus-visible { outline: 2px solid var(--helix-focus-ring); outline-offset: 2px; border-radius: 10px; }
.hlx-digest[open] > summary { border-bottom: 1px dashed color-mix(in srgb, var(--helix-muted) 30%, transparent); }
.hlx-digest-count { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 19px; padding: 0 6px; border-radius: 10px; background: rgba(60, 52, 40, .10); color: var(--helix-muted); font-size: 11px; font-weight: 700; }
.hlx-digest-label { font-weight: 600; color: var(--helix-text); }
.hlx-digest-preview { color: var(--helix-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hlx-digest-range { margin-left: auto; font-size: var(--fs-meta); white-space: nowrap; color: var(--helix-muted); }
.hlx-digest-body { padding: 6px 10px 8px; }
.hlx-digest-chev { color: var(--helix-subtle); transition: transform .15s var(--ease-out); }
.hlx-digest[open] .hlx-digest-chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .hlx-digest-chev { transition: none; } }
/* Cards dentro del digest: un punto más compactas */
.hlx-digest-body > .helix-msg-collapsible > summary.hlx-msgcard-sum { padding: 8px 12px; }
.hlx-digest-body > .helix-msg-collapsible .hlx-msgcard-head { margin-bottom: 4px; }
.hlx-digest-body > .helix-msg-collapsible .helix-msg-inner { padding: 0 12px 10px; }
/* Eventos del timeline (v2.1): filas COMPACTAS que receden — no compiten con los
   mensajes reales. Más pequeños, color terciario y punto tenue. */
.helix-timeline-event {
    display: flex; align-items: center; gap: 9px; color: var(--helix-muted);
    font-size: var(--fs-meta); margin: 2px 0 9px 42px;
}
.helix-timeline-event > .helix-tl-dot {
    flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--helix-border);
}
.helix-timeline-event.warning > .helix-tl-dot { background: var(--helix-amber); }
.helix-timeline-event p { margin: 0; }
.helix-timeline-event p b { color: var(--helix-muted); font-weight: 600; }
/* History change events: icon replaces the dot, slightly indented */
.helix-history-event { margin-left: 32px; margin-bottom: 8px; font-size: var(--fs-meta); }
.helix-history-event p { color: var(--helix-muted); }
.helix-history-event p b { color: var(--helix-muted); font-weight: 600; }
.helix-history-event p i { font-style: normal; color: var(--helix-muted); }
/* PR-3 (axis-timeline-routing): línea de historial IsAiGenerated (Axis mutó un campo) — nodo ✦ violeta en vez
   del icono de campo por defecto, y nombre de autor en violeta/negrita. Reusa los tokens del spine (--st-new). */
.helix-history-event .hlx-ax-hist-node { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--st-new-bg); color: var(--st-new); }
.helix-history-event .hlx-ax-hist-node .mud-icon-root { font-size: 13px; }
.helix-history-event p b.hlx-ax-hist-author { color: var(--st-new); font-weight: 700; }
/* axis-triage-hairline: el triaje automático consolidado en UNA línea (nodo ✦ + resumen "Campo Old→New" +
   pill de modo + «Ver flujo»), en vez de la tarjeta .hlx-ax-item. Reusa el ritmo de .helix-history-event;
   el pill/enlace/confianza son inline-flex (heredan de .hlx-ax-pill/.hlx-ax-act/.hlx-ax-conf) y quedan bien
   dentro del <p> de flujo de texto. Sin tokens ni animación nuevos. */
.hlx-ax-hairline p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.helix-reply {
    flex: 0 0 auto; padding: 12px 18px max(16px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--helix-line); background: var(--helix-surface);
}
/* Slice 6 — Manager Briefing (/axis/briefing): rejilla de tarjetas de estadística. */
.hlx-brief-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.hlx-brief-stat {
    display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
    background: var(--helix-panel-2); border: 1px solid var(--helix-border); border-radius: 10px;
}
.hlx-brief-stat-val { font-size: var(--fs-lg, 20px); font-weight: 600; color: var(--helix-text); }
.hlx-brief-stat-lbl { font-size: var(--fs-xs, 12px); color: var(--helix-muted); }
/* BUG-20260706-005: ticket cerrado = terminal → en vez del composer, un aviso FLOTANTE (no un
   recuadro blanco a ancho completo): tarjeta redondeada sobre panel-2 con sombra, margen y borde,
   que "flota" sobre el fondo del hilo. */
.hlx-closed-composer {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 12px 18px max(16px, env(safe-area-inset-bottom));
    padding: 12px 16px;
    background: var(--helix-panel-2); color: var(--helix-muted);
    border: 1px solid var(--helix-border); border-radius: 12px;
    box-shadow: var(--helix-shadow-md);
}
.hlx-closed-composer .hlx-closed-composer-text { flex: 1 1 240px; font-size: var(--fs-sm, 13px); }
.hlx-closed-composer b { color: var(--helix-text); }
/* Composer sin filas propias (iteración 2): las herramientas se superponen al hueco
   derecho de la toolbar de TOAST y el envío flota sobre la esquina inferior derecha.
   .hlx-composer-bar usa display:contents para que ambos grupos se posicionen contra
   el shell; en pantallas estrechas vuelve a ser una fila normal bajo el editor. */
.hlx-composer-shell { position: relative; }
/* v2.1: toggle Responder/Nota segmentado, a la vista en el composer. */
.hlx-composer-modes {
    display: inline-flex; gap: 2px; margin-bottom: 8px; padding: 2px;
    background: var(--helix-panel-2); border: 1px solid var(--helix-border); border-radius: 8px;
}
.hlx-cmode {
    border: 0; background: transparent; font: inherit; font-size: var(--fs-meta); font-weight: 600;
    color: var(--helix-muted); padding: 5px 12px; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.hlx-cmode .mud-icon-root { font-size: var(--fs-lead); }
.hlx-cmode.active { background: var(--helix-surface); color: var(--helix-text); box-shadow: 0 1px 2px rgba(70,60,45,.1); }
.hlx-cmode.note.active { background: #FDF7E7; color: #B45309; }
/* UX (Daniel 2026-07-09): fila del segmented de modo + indicadores de Axis compactos a la derecha
   (procedencia + «Axis revisa» via tooltip). Reemplaza el banner ancho y la nota a pie para ganar alto. */
.hlx-composer-modes-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hlx-composer-modes-row > .hlx-composer-modes { margin-bottom: 0; }
.hlx-composer-modes-axis { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.hlx-ax-cchip {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
    font-size: var(--fs-meta); font-weight: 600; color: var(--st-pending); white-space: nowrap;
    background: linear-gradient(180deg, rgba(245,158,11,.14), rgba(245,158,11,.06));
    border: 1px solid rgba(245,158,11,.35);
}
.hlx-ax-cchip .hlx-ax-star { color: var(--st-pending); flex: none; }
.hlx-ax-cnote-ico {
    display: inline-flex; align-items: center; justify-content: center; cursor: help;
    width: 24px; height: 24px; border-radius: 6px; color: var(--helix-subtle);
}
.hlx-ax-cnote-ico:hover, .hlx-ax-cnote-ico:focus-visible { color: var(--st-pending); background: var(--helix-panel-2); outline: none; }
.hlx-ax-cnote-ico .mud-icon-root { font-size: var(--fs-lead); }
[data-helix-dark] .hlx-ax-cchip { border-color: rgba(245,158,11,.42); background: linear-gradient(180deg, rgba(245,158,11,.14), rgba(245,158,11,.06)); }
/* Composer replegado: se oculta el shell (editor + herramientas + envío) y queda la fila de modo con
   el botón de restaurar, así que el hilo (flex:1) recupera el alto que el editor había ganado. */
.helix-reply.hlx-composer-min .hlx-composer-shell { display: none; }
.helix-reply.hlx-composer-min .hlx-composer-modes-row { margin-bottom: 0; }
.hlx-composer-mintoggle {
    display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap;
    min-height: 34px; padding: 4px 10px; border-radius: 8px; cursor: pointer;
    font: inherit; font-size: var(--fs-meta); font-weight: 600;
    color: var(--helix-muted); background: var(--helix-panel-2);
    border: 1px solid var(--helix-border);
    transition: color .12s var(--ease-out), border-color .12s var(--ease-out);
}
.hlx-composer-mintoggle:hover { color: var(--helix-text); border-color: var(--helix-muted); }
.hlx-composer-mintoggle:focus-visible { outline: 2px solid var(--helix-red); outline-offset: 2px; }
.hlx-composer-mintoggle .mud-icon-root { font-size: var(--fs-lead); }
.hlx-composer-draft-chip {
    display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
    font-size: var(--fs-meta); font-weight: 600; white-space: nowrap;
    color: var(--helix-muted); background: var(--helix-panel-2); border: 1px solid var(--helix-border);
}
/* Animación "AI magic": overlay que bloquea el composer mientras la IA genera el borrador. */
.hlx-ai-magic {
    position: absolute; inset: 0; z-index: 40; border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.55); backdrop-filter: blur(1px); cursor: progress;
}
.hlx-ai-magic-sheen {
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 32%, rgba(206,0,0,.14) 50%, transparent 68%);
    background-size: 220% 100%;
    animation: hlxAiSheen 1.25s ease-in-out infinite;
}
@keyframes hlxAiSheen { from { background-position: 200% 0; } to { background-position: -60% 0; } }
.hlx-ai-magic-label {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--fs-compact); font-weight: 700; color: var(--helix-red);
    background: var(--helix-surface); border: 1px solid var(--helix-border); border-radius: 999px;
    padding: 6px 14px; box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.hlx-ai-magic-label .mud-icon-root { animation: hlxAiSpark 1s ease-in-out infinite; }
@keyframes hlxAiSpark { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.25); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .hlx-ai-magic-sheen, .hlx-ai-magic-label .mud-icon-root { animation: none; }
}
.hlx-composer-bar { display: contents; }
.hlx-editor-tools {
    position: absolute; top: 5px; right: 6px; z-index: 30;
    display: flex; align-items: center; gap: 0;
}
/* Iconos de la botonera derecha al MISMO tamaño que los de la toolbar TOAST (compacta, 30×30). */
.hlx-editor-tools .mud-icon-button { width: 30px; height: 30px; padding: 5px; }
.hlx-editor-tools .mud-icon-button .mud-icon-root { font-size: 17px; }
.helix-composer-actions {
    position: absolute; bottom: 10px; right: 10px; z-index: 30;
    display: flex; align-items: center; gap: 8px;
}
/* Hueco en la toolbar para los iconos superpuestos y en el área de texto para el
   botón flotante (que la última línea nunca quede tapada). */
.helix-reply .toastui-editor-defaultUI-toolbar { padding-right: 184px; padding-top: 2px; padding-bottom: 2px; }
.helix-reply .toastui-editor-defaultUI .ProseMirror { padding-bottom: 52px; }
/* v2.1 (Iteración 2): toolbar del composer más compacta (menos alto y espaciado entre iconos). */
.helix-reply .toastui-editor-defaultUI-toolbar .toastui-editor-toolbar-icons { width: 30px; height: 30px; margin: 1px 0; }
.helix-reply .toastui-editor-defaultUI-toolbar .toastui-editor-toolbar-group { margin-right: 5px; }
.helix-reply .toastui-editor-defaultUI-toolbar .toastui-editor-toolbar-divider { margin: 6px 5px; }
/* BUG-20260612-027: en modo Markdown TOAST muestra los tabs "Editar / Vista previa"
   (previewStyle tab) robando una fila; la vista previa real es el modo visual. */
.helix-reply .toastui-editor-md-tab-container { display: none !important; }

/* ── Composer compacto (expand-on-focus) ──────────────────────────────────────
   En reposo el composer es un prompt de una línea ("Responder…", ~52px); al
   pulsarlo o con los atajos R/N se expande (.hlx-composer-open) mostrando el
   editor completo. El editor real se mantiene montado (display:none) para no
   perder el borrador; el prompt es un botón aparte. */
.helix-reply.hlx-composer-compact { padding-top: 10px; padding-bottom: 10px; cursor: text; }
/* Animación de entrada al alternar prompt ↔ editor: SOLO opacidad (sin transform).
   Un transform persistente (fill-mode both) crea un stacking context y rompe el
   hit-testing: el clic atraviesa el botón (prompt y el envío flotante caían sobre
   el contenteditable). El fundido basta para quitar el "pop" seco. */
@keyframes hlxComposerFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.helix-reply.hlx-composer-open .hlx-composer-shell,
.hlx-composer-prompt { animation: hlxComposerFade .16s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .helix-reply.hlx-composer-open .hlx-composer-shell,
    .hlx-composer-prompt { animation: none; }
}
/* v2.1: el composer está SIEMPRE presente como una caja alta (no un prompt fino que
   "hay que buscar"). En reposo muestra una caja de ~88px con el placeholder arriba;
   al pulsarla/atajos R/N se expande al editor real (el montaje TOAST sigue siendo
   perezoso — perceived-ux-2 — así que no instanciamos el editor en tickets de solo lectura). */
.hlx-composer-prompt {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%;
    min-height: 88px; padding: 14px 16px; cursor: text;
    border: 1px solid var(--helix-border); border-radius: 12px;
    background: var(--helix-surface); color: var(--helix-muted); font-size: var(--fs-body);
    text-align: left; transition: border-color .12s var(--ease-out), background .12s var(--ease-out);
}
.hlx-composer-prompt:hover { border-color: var(--helix-muted); background: var(--helix-panel-2); }
.hlx-composer-mode-chip {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    font-size: var(--fs-meta); font-weight: var(--fw-bold); padding: 3px 9px; border-radius: 999px;
    background: var(--helix-panel-2); color: var(--helix-muted); border: 1px solid var(--helix-border);
}
.hlx-composer-mode-chip.note { background: #FDF7E7; color: #B45309; border-color: #F0E1B6; }
.hlx-composer-hint { color: var(--helix-muted); font-size: var(--fs-body); }
.hlx-composer-prompt .mud-icon-root { color: var(--helix-muted); flex-shrink: 0; }
/* Nota interna compacta: el prompt hereda el tinte ámbar para señalar el modo. */
.helix-reply--internal .hlx-composer-prompt {
    border-color: #F59E0B; background: #FFFBEB; color: #92400E;
}
.helix-reply--internal .hlx-composer-prompt .mud-icon-root { color: #B45309; }
@media (max-width: 1280px) {
    /* Fallback estrecho: una fila normal bajo el editor (la toolbar no tiene hueco) */
    .hlx-composer-bar { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
    .hlx-editor-tools, .helix-composer-actions { position: static; }
    .helix-composer-actions { margin-left: auto; }
    .helix-reply .toastui-editor-defaultUI-toolbar { padding-right: 0; }
    .helix-reply .toastui-editor-defaultUI .ProseMirror { padding-bottom: 8px; }
}
/* D1: el modo del composer vive en el botón Enviar; la nota interna se señala con
   tinte ámbar del editor + chip candado (señal textual, no solo color). */
.helix-reply--internal .helix-rich-editor .toastui-editor-defaultUI,
.helix-reply--internal .helix-md-editor {
    border-color: #F59E0B; background: #FFFBEB;
}
.helix-reply--internal .helix-rich-editor .toastui-editor-defaultUI .toastui-editor-main { background: #FFFBEB; }
.helix-reply--internal .hlx-reply-group .mud-button-filled { background: #B45309; }
.helix-reply--internal .hlx-reply-group .mud-button-filled:hover { background: #92400E; }
.hlx-internal-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A;
    /* Misma altura (36px) y tamaño de letra (13px) que el botón Enviar, para que cuadren. */
    font-size: var(--fs-compact); font-weight: 700; height: 36px; padding: 0 12px; border-radius: 999px;
    white-space: nowrap; box-sizing: border-box;
}
.hlx-internal-chip .mud-icon-root { font-size: 15px; }
/* Botón flotante "N mensajes nuevos": sticky al fondo del scroll de conversación */
.hlx-new-msgs {
    position: sticky; bottom: 8px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; border-radius: 999px; cursor: pointer;
    background: var(--helix-red); color: #fff;
    font-size: var(--fs-compact); font-weight: 700; padding: 7px 14px;
    box-shadow: 0 4px 12px rgba(206, 0, 0, .35);
}
.hlx-new-msgs:hover { background: #A80000; }
/* Variante icon-only «ir al último» (sin actividad nueva): círculo neutro, no rojo. */
.hlx-go-bottom { padding: 8px; background: var(--helix-surface); color: var(--helix-muted); border: 1px solid var(--helix-border); box-shadow: var(--helix-shadow-sm); }
.hlx-go-bottom:hover { background: var(--helix-panel-2); color: var(--helix-text); }
/* Chuleta de atajos (tecla ?) */
.hlx-shortcut-list { display: flex; flex-direction: column; gap: 10px; min-width: 340px; }
.hlx-shortcut-list > div { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); }
.hlx-shortcut-list span { color: var(--helix-muted); }
.hlx-shortcut-group { color: var(--helix-muted); text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-meta); font-weight: 700; margin: 14px 0 8px; }
.hlx-shortcut-group:first-child { margin-top: 0; }
.hlx-shortcut-list kbd {
    background: var(--helix-panel-2); border: 1px solid var(--helix-border); border-bottom-width: 2px;
    border-radius: 6px; padding: 2px 8px; font-size: var(--fs-meta); font-weight: 700;
    font-family: inherit; color: var(--helix-text); min-width: 26px; text-align: center;
}
.helix-context-section { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--helix-line); }
/* Card SLA: enlace Editar (solo manager+) y calendario aplicado */
.hlx-sla-edit { font-size: var(--fs-meta); font-weight: 600; color: var(--helix-red); text-decoration: none; text-transform: none; letter-spacing: 0; }
.hlx-sla-edit:hover { text-decoration: underline; }
.hlx-sla-schedule {
    display: flex; align-items: center; gap: 5px; margin-top: 10px;
    font-size: var(--fs-meta); color: var(--helix-muted);
}
.hlx-sla-schedule b { font-weight: 600; color: var(--helix-muted); }
/* Código de país del calendario SLA: texto normal, mismo tamaño que la fila, muted como el nombre. */
.hlx-tz-flag { cursor: help; font-size: inherit; color: var(--helix-muted); font-weight: 600; letter-spacing: .03em; }
/* Panel dinámico: card SLA compacta cuando no hay SLA pero el agente puede configurarlo. */
.hlx-sla-compact .hlx-sla-edit { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; }
.helix-context-title { display: flex; align-items: center; justify-content: space-between; color: var(--helix-muted); font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase; }
.helix-customer-card { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.helix-customer-card div:last-child { display: flex; flex-direction: column; min-width: 0; }
.helix-customer-card span { color: var(--helix-muted); font-size: var(--fs-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.helix-customer-avatar {
    width: 38px; height: 38px; border-radius: 50%; background: #171A21; color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-compact);
}
.helix-kb-link {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 9px 0; color: var(--helix-text); text-decoration: none;
    border-bottom: 1px solid rgba(15, 23, 42, .06); font-size: var(--fs-compact);
}
.helix-kb-link-title { flex: 1 1 auto; min-width: 0; }
.helix-kb-link:hover { color: var(--helix-red); }
.helix-kb-link:hover .helix-kb-link-title { color: var(--helix-red); }

/* Toggle del panel Información: oculto en escritorio ancho, visible cuando el panel colapsa */
.hlx-ctx-toggle { display: none !important; }
@media (max-width: 1280px) {
    .helix-ticket-wrap { grid-template-columns: minmax(420px, 1fr); }
    .helix-ticket-wrap.hlx-with-queue { grid-template-columns: 260px minmax(420px, 1fr); }
    .helix-ticket-context { display: none; }
    .hlx-ctx-toggle { display: inline-flex !important; }
    /* Panel Información como overlay lateral cuando se abre */
    .helix-ticket-wrap.hlx-ctx-open .helix-ticket-context {
        display: block; position: fixed; right: 0;
        top: var(--mud-appbar-height, 64px); bottom: 0;
        width: 340px; max-width: 92vw; z-index: 90;
        box-shadow: -10px 0 30px rgba(16, 24, 40, 0.18);
        border-left: 1px solid var(--helix-border);
    }
    .helix-preview-panel { width: 280px; flex-basis: 280px; }
}

@media (max-width: 980px) {
    .helix-search-wrap { width: 42vw; }
    .helix-metric-strip { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
    .helix-preview-panel { display: none; }
    .helix-ticket-wrap,
    .helix-ticket-wrap.hlx-with-queue { grid-template-columns: 1fr; height: auto; min-height: calc(100dvh - var(--mud-appbar-height, 64px)); overflow: visible; }
    .helix-queue-panel { display: none; }
}

@media (max-width: 700px) {
    .helix-brand-block { display: none; }
    .helix-search-wrap { width: 42vw; min-width: 120px; }
    .helix-ticket-header { flex-direction: column; align-items: stretch; }
    .helix-ticket-header .helix-toolbar-actions { justify-content: flex-start; }
    .helix-ticket-titleline { align-items: flex-start; }
    .helix-ticket-titleline .mud-typography { white-space: normal; }
    /* Workspace v2.1: cabecera más compacta y acciones alineadas a la izquierda al envolver. */
    .hlx-header-v2 { padding: 12px 14px 0; }
    .hlx-title-own { font-size: 17px; }
    .hlx-actionbar { justify-content: flex-start; }
}

/* ---------- Live dot (tiempo real) ---------- */
/* Punto verde pulsante que indica que la vista está recibiendo actualizaciones en tiempo real. */
.helix-live-dot {
    position: relative;
    /* Contexto de apilamiento local: mantiene el ::after (z-index:-1) por encima de la
       card pero por detrás del punto (si no, el anillo se pintaría tras la card opaca). */
    isolation: isolate;
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #10B981;
    flex-shrink: 0;
    animation: hlx-live-pulse 2.4s ease-in-out infinite;
    vertical-align: middle;
}
/* Anillo expansivo en GPU (transform + opacity) en vez de animar box-shadow (paint). */
.helix-live-dot::after, .portal-status-ok-dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: inherit; z-index: -1;
    animation: hlx-live-ring 2.4s ease-in-out infinite;
}
@keyframes hlx-live-pulse {
    0%,100% { opacity: 1;  transform: scale(1); }
    50%     { opacity: .8; transform: scale(1.2); }
}
@keyframes hlx-live-ring {
    0%   { opacity: .5; transform: scale(1); }
    70%  { opacity: 0;  transform: scale(2.4); }
    100% { opacity: 0;  transform: scale(2.4); }
}
@media (prefers-reduced-motion: reduce) {
    .helix-live-dot, .portal-status-ok-dot { animation: none; }
    .helix-live-dot::after, .portal-status-ok-dot::after { animation: none; opacity: 0; }
}

/* Hamburguesa del layout agente: solo visible en móvil (BUG-20260612-013). */
.helix-nav-burger { display: none !important; }
@media (max-width: 960px) {
    .helix-nav-burger { display: inline-flex !important; }
}

/* ---------- Presencia (G01 collision detection) ---------- */
/* Avatares solapados de otros agentes viendo el mismo ticket ahora. */
.hlx-presence {
    display: inline-flex;
    align-items: center;
}
.hlx-presence-avatar {
    display: inline-flex;
    border-radius: 50%;
    border: 2px solid var(--helix-surface, #fff);
}
.hlx-presence-avatar + .hlx-presence-avatar { margin-left: -7px; }
.hlx-presence-more {
    margin-left: 4px;
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--helix-muted);
}

/* ---------- Error UI ---------- */
#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    background: #ffefef; border-top: 2px solid #CE0000; color: #7a0000;
    padding: .75rem 1.25rem; box-shadow: 0 -1px 6px rgba(0,0,0,.1); z-index: 1200;
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "Se ha producido un error."; }

/* ── Admin Catálogo ─────────────────────────────────────────────────────── */

/* Badge de color genérico (tipos, estados, prioridades) */
.helix-catalog-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: var(--fs-meta);
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.6;
}

/* Color swatch + input nativo */
.helix-colorpatch {
    width: 32px; height: 32px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,.18);
    flex-shrink: 0;
}
.helix-colorinput {
    width: 32px; height: 32px;
    border: none; cursor: pointer;
    border-radius: 4px; padding: 0;
    background: transparent;
}

/* Tira de idiomas del nombre de catálogo (CatalogNameFields.razor) */
.hlx-catalog-langfield { display: flex; flex-direction: column; gap: 6px; }
.hlx-catalog-langfield-tabs { display: flex; gap: 4px; }
.hlx-catalog-langfield-tab {
    height: 32px; padding: 0 10px; border-radius: var(--helix-radius);
    border: 1px solid var(--helix-border); background: var(--helix-surface);
    color: var(--helix-muted); font-size: var(--fs-meta); font-weight: 600;
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out);
}
.hlx-catalog-langfield-tab.active {
    background: color-mix(in srgb, var(--helix-red) 8%, transparent);
    border-color: var(--helix-red); color: var(--helix-red);
}
.hlx-catalog-langfield-tab:disabled { opacity: .5; cursor: not-allowed; }
.hlx-catalog-langfield-tab:focus-visible { outline: 3px solid var(--helix-focus-ring); outline-offset: 2px; }
/* Sin opacity: atenuar un texto de 9px lo baja de AA (medido 2.9:1). El contraste es el del tab. */
.hlx-catalog-langfield-badge {
    font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
/* Neutro cálido, no rojo: una traducción ausente es una ausencia legítima, no una alerta. */
.hlx-catalog-langfield-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--helix-muted); flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
    .hlx-catalog-langfield-tab { transition: none; }
}
/* La tira de idiomas añade 38px por encima del campo de nombre. Alinear la fila por su base
   deja todos los inputs sobre la misma línea sin compensar alturas a mano en cada hermano. */
.hlx-catalog-formrow { align-items: flex-end; }

/* Tabla: matriz de transiciones del workflow */
.helix-matrix {
    border-collapse: collapse;
    font-size: var(--fs-meta);
    min-width: 600px;
}
.helix-matrix th,
.helix-matrix td {
    border: 1px solid rgba(0,0,0,.08);
    padding: 4px 6px;
    text-align: center;
    vertical-align: middle;
}
/* Altura de fila uniforme: las celdas con estrella (transición que exige motivo) no deben
   hacer su fila más alta que las que solo tienen checkbox o están vacías. */
.helix-matrix tbody td {
    height: 56px;
}
.helix-matrix th {
    background: var(--helix-panel-2);
    padding: 6px 8px;
}
.helix-matrix-corner {
    text-align: left !important;
    white-space: nowrap;
    background: var(--helix-panel-2) !important;
    min-width: 130px;
    font-weight: 600;
    padding: 6px 10px !important;
}
.helix-matrix-self {
    background: #f0f1f3;
    pointer-events: none;
}
.helix-matrix-cell {
    min-width: 72px;
}
.helix-matrix-dash {
    color: #d0d0d0;
    font-size: var(--fs-lead);
    user-select: none;
}

/* ---------- Home ticket list ---------- */
.helix-home-ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--helix-line);
    cursor: pointer;
    transition: background .15s;
}
.helix-home-ticket-row:hover { background: var(--helix-panel-2); }

/* ---------- Stats sidebar helpers ---------- */
.helix-stat-small {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: var(--fs-compact);
}

/* ================================================================
   LOGIN PAGE  (/login)
   Replica el diseño de test-xml.bookingengine.es/login.aspx
================================================================ */

/* Reset para evitar que el shell del app afecte a la página de login */
.hlx-login-root {
    position: relative;
    min-height: 100dvh;
    /* Fondo corporativo oscuro a pantalla completa (estilo login de bookingengine):
       degradado navy/carbón con un halo rojo Juniper sutil. Compartido por todas las
       páginas de auth del portal (login, reset, registro, MFA, activación). */
    background:
        radial-gradient(900px 500px at 78% -12%, rgba(37, 60, 96, .55) 0%, transparent 60%),
        radial-gradient(700px 500px at 8% 115%, rgba(206, 0, 0, .14) 0%, transparent 55%),
        linear-gradient(135deg, #0B1220 0%, #05070A 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    overflow: hidden;
    font-family: var(--helix-font);
}

/* Blobs decorativos: ya no aplican sobre el fondo oscuro. */
.hlx-login-blob {
    display: none;
}

/* Tarjeta central */
.hlx-login-card {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, .96);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .12);
    padding: 28px;
    width: min(100%, 460px);
}

/* Logo Juniper (legacy, conservado por compatibilidad) */
.hlx-login-logo-wrap {
    text-align: center;
    margin-bottom: 24px;
}
.hlx-login-logo {
    height: 36px;
    width: auto;
}

/* Marca: lockup horizontal de Resolve centrado en la tarjeta. Compartido con la página de login.
   El max-width lo fija el BYLINE, no el alto total: el respaldo ocupa 78 de los 506 px del lienzo
   (15,4%) y el lockup es apaisado (3,49:1), así que a 340 px de ancho el lockup mide 97 px de alto
   y el respaldo 15 px — el mínimo al que se lee. Cabe en la tarjeta más estrecha (420 px de
   PortalMfa, 364 px de contenido). Duplicada en Login.razor.css: cambiar las dos. */
.hlx-login-brand {
    margin-bottom: 22px;
}
.hlx-login-brand-logo {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto;
}

/* Título */
.hlx-login-title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #0B1929;
    margin: 0 0 24px 0;
    letter-spacing: -.3px;
}

/* Tabs agente / cliente */
.hlx-login-tabs {
    display: flex;
    background: #EEF1F8;
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
    margin-bottom: 24px;
}
.hlx-login-tab {
    flex: 1;
    text-align: center;
    padding: 9px 0;
    border-radius: 7px;
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--helix-muted);
    text-decoration: none;
    transition: background .15s, color .15s, box-shadow .15s;
    cursor: pointer;
}
.hlx-login-tab--active {
    background: var(--helix-surface);
    color: #0B1929;
    box-shadow: 0 1px 4px rgba(11, 25, 41, 0.12);
}
.hlx-login-tab:hover:not(.hlx-login-tab--active) {
    color: var(--helix-text);
}

/* Descripción */
.hlx-login-desc {
    font-size: var(--fs-compact);
    color: var(--helix-muted);
    text-align: center;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* Botón Microsoft */
.hlx-login-ms-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    background: var(--helix-surface);
    border: 1px solid var(--helix-border);
    border-radius: 10px;
    font-size: var(--fs-body);
    font-weight: 500;
    color: #0B1929;
    text-decoration: none;
    transition: background .15s, box-shadow .15s;
    cursor: pointer;
    box-sizing: border-box;
}
.hlx-login-ms-btn:hover {
    background: var(--helix-panel-2);
    box-shadow: 0 2px 8px rgba(11, 25, 41, 0.08);
}

/* Separador "o" */
.hlx-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--helix-border);
    font-size: var(--fs-meta);
}
.hlx-login-divider::before,
.hlx-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--helix-border);
}
.hlx-login-divider span { color: var(--helix-muted); }

/* Email / password form (cliente) */
.hlx-login-field {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--helix-border);
    border-radius: 8px;
    /* 16px (no menos): por debajo de 16px, Safari/Chrome iOS hacen zoom de viewport al
       enfocar el input y la letra «aumenta de golpe». 16px lo evita. */
    font-size: var(--fs-lead);
    color: var(--helix-text);
    background: var(--helix-panel-2);
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
    margin-bottom: 12px;
}
.hlx-login-field:focus {
    border-color: #0B1929;
    box-shadow: 0 0 0 3px rgba(11, 25, 41, 0.08);
    background: var(--helix-surface);
}
.hlx-login-field::placeholder { color: var(--helix-muted); }

.hlx-login-submit {
    display: block;
    width: 100%;
    padding: 12px;
    background: var(--helix-red);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background .15s var(--ease-out), transform .12s var(--ease-out);
    letter-spacing: .2px;
}
@media (hover: hover) and (pointer: fine) {
    .hlx-login-submit:hover { background: var(--helix-red-dark); }
}
.hlx-login-submit:active { transform: var(--press); }
/* Deshabilitado: SIN afordancia de interactividad (ni cursor, ni hover, ni press). Importa
   sobre todo en /portal/rate, donde el estado por defecto (sin estrella elegida) es deshabilitado. */
.hlx-login-submit:disabled {
    opacity: .5;
    cursor: default;
    pointer-events: none;
    transform: none;
}

/* Enlace "Olvidé credenciales" */
.hlx-login-forgot {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-size: var(--fs-meta);
    color: var(--helix-muted);
    text-decoration: none;
}
.hlx-login-forgot:hover { color: #0B1929; text-decoration: underline; }

/* Modo desarrollo — panel amarillo */
.hlx-login-dev-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: var(--fs-meta);
    font-weight: 600;
    color: #92400E;
}

.hlx-login-dev-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.hlx-login-dev-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--helix-border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--helix-text);
    background: var(--helix-panel-2);
    transition: background .15s, border-color .15s;
    font-size: var(--fs-compact);
}
.hlx-login-dev-user:hover {
    background: #EEF1F8;
    border-color: #0B1929;
}

.hlx-login-dev-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0B1929;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-meta);
    font-weight: 700;
    flex-shrink: 0;
}
.hlx-login-dev-avatar--client { background: var(--helix-red); }

.hlx-login-dev-name  { font-weight: 500; font-size: var(--fs-meta); line-height: 1.3; }
.hlx-login-dev-role  { font-size: var(--fs-meta); color: var(--helix-muted); }

/* Footer copyright */
.hlx-login-footer {
    text-align: center;
    font-size: var(--fs-meta);
    color: var(--helix-muted);
    margin-top: 28px;
    margin-bottom: 0;
}
.hlx-login-footer a { color: inherit; text-decoration: none; }
.hlx-login-footer a:hover { text-decoration: underline; }

/* ── Portal auth — formulario email+password ─────────────────────────────── */
.hlx-login-portal-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}
.hlx-login-portal-form .hlx-login-field {
    margin-bottom: 12px;
}

/* Los MudTextField del registro (PortalRegistro.razor) reusan este contenedor; sin este
   override salen con el estilo Material por defecto de MudBlazor en vez del Kit Táctil. */
.hlx-login-portal-form .mud-input.mud-input-outlined {
    border-radius: 8px;
    background: var(--helix-panel-2);
}
.hlx-login-portal-form .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--helix-border);
    transition: border-color .15s, box-shadow .15s;
}
.hlx-login-portal-form .mud-input.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--helix-muted);
}
.hlx-login-portal-form .mud-input.mud-input-outlined.mud-focused {
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(11, 25, 41, 0.08);
    background: var(--helix-surface);
}
.hlx-login-portal-form .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: #0B1929;
}
.hlx-login-portal-form .mud-input-slot input {
    font-size: var(--fs-lead);
    color: var(--helix-text);
}
@media (prefers-reduced-motion: reduce) {
    .hlx-login-portal-form .mud-input.mud-input-outlined,
    .hlx-login-portal-form .mud-input.mud-input-outlined .mud-input-outlined-border,
    .hlx-login-portal-form .mud-input.mud-input-outlined.mud-focused { transition: none; }
}

/* Cancelar el MFA: es el submit de un formulario de logout, así que se despoja de aspecto de
   botón para leerse como el enlace que sustituye. */
.hlx-mfa-cancel {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: var(--fs-compact);
    color: var(--helix-muted);
    cursor: pointer;
    text-decoration: none;
}
.hlx-mfa-cancel:hover { text-decoration: underline; }
.hlx-mfa-cancel:focus-visible { outline: 3px solid var(--helix-focus-ring); outline-offset: 2px; border-radius: 2px; }

/* Error / info banners en login */
.hlx-login-error-banner {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: var(--fs-compact);
    margin-bottom: 16px;
}
.hlx-login-info-banner {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1D4ED8;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: var(--fs-compact);
    margin-bottom: 16px;
}

/* ---------- Adjuntos en conversación ---------- */
.helix-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
/* ── Paginación /views ───────────────────────────────────────────────────── */
.helix-pagination {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 12px 16px; border-top: 1px solid rgba(0,0,0,.06);
}
.helix-pagination-label {
    font-size: var(--fs-compact); color: var(--helix-muted); min-width: 120px; text-align: center;
}

.helix-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 7px;
    border-radius: 20px;
    border: 1px solid var(--helix-line);
    background: var(--helix-soft);
    color: var(--helix-ink);
    font-size: var(--fs-meta);
    text-decoration: none;
    transition: background .15s var(--ease-out), border-color .15s var(--ease-out), transform .12s var(--ease-out);
}
.helix-attachment-chip:hover {
    background: #e8eaf0;
    border-color: rgba(15,23,42,.2);
}
.helix-attachment-chip:active { transform: var(--press); }
.helix-attach-size {
    color: var(--helix-muted);
    font-size: var(--fs-meta);
}

/* ── Calendario de eventos (/events) ─────────────────────────────────────── */
.helix-calendar {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.helix-calendar th {
    padding: 6px 8px;
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--helix-muted);
    text-align: left;
    border-bottom: 1px solid var(--helix-line);
}
.helix-cal-cell {
    vertical-align: top;
    height: 108px;
    padding: 4px 6px;
    border: 1px solid var(--helix-line);
    transition: background .12s;
}
.helix-cal-cell:hover { background: var(--helix-soft); }
.helix-cal-cell:hover .helix-cal-add { opacity: 1; }
.helix-cal-other { background: var(--helix-soft); opacity: .55; }
.helix-cal-today { outline: 2px solid var(--helix-red); outline-offset: -2px; }
.helix-cal-daynum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-meta);
    font-weight: 600;
    margin-bottom: 2px;
}
.helix-cal-add { opacity: 0; transition: opacity .12s; }
.helix-cal-chip {
    font-size: var(--fs-meta);
    line-height: 1.3;
    border-radius: 4px;
    padding: 2px 5px;
    margin-bottom: 2px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.helix-cal-chip:hover { filter: brightness(.92); }
.helix-cal-chip-time { font-weight: 700; margin-right: 4px; }
.helix-cal-more {
    font-size: var(--fs-meta);
    color: var(--helix-muted);
    cursor: pointer;
    padding-left: 5px;
}
.helix-cal-more:hover { text-decoration: underline; }

.helix-avatar-button {
  min-width: 0;
  padding: 3px;
  border-radius: 50%;
  line-height: 1;
  /* G13: el punto de disponibilidad va en la esquina del avatar; sin esto el botón
     circular (overflow hidden de MudBlazor) recorta el trozo que sobresale. */
  overflow: visible;
}
.helix-avatar-button .mud-button-root,
.helix-avatar-button .mud-ripple { overflow: visible; }

.helix-user-menu-header {
  display: flex;
  flex-direction: column;
  min-width: 180px;
}

/* Fila de Salir: es un <button> de formulario, no un MudMenuItem, así que replica a mano la
   métrica de `.mud-menu-item.mud-menu-item-dense` (padding 2px 12px, icono a 12px del texto). */
.helix-user-menu-logout-form { margin: 0; }
.helix-user-menu-logout {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  gap: 12px;
  padding: 2px 12px;
  background: none;
  border: 0;
  text-align: start;
  font: inherit;
  font-size: var(--fs-body);
  color: inherit;
  cursor: pointer;
  transition: background-color .12s;
}
.helix-user-menu-logout-text { margin: 4px 0; }
.helix-user-menu-logout-icon { color: var(--mud-palette-action-default); flex-shrink: 0; }
.helix-user-menu-logout:hover { background-color: var(--mud-palette-action-default-hover, rgba(0,0,0,.04)); }
.helix-user-menu-logout:focus-visible { outline: 3px solid var(--helix-focus-ring); outline-offset: -3px; }
.helix-user-menu-logout:disabled { cursor: default; color: var(--mud-palette-action-disabled); }
.helix-user-menu-logout:disabled .helix-user-menu-logout-icon { color: var(--mud-palette-action-disabled); }
@media (prefers-reduced-motion: reduce) {
  .helix-user-menu-logout { transition: none; }
}

/* ── Knowledge Base portal ──────────────────────────────────────────────────── */
.portal-kb-result {
    cursor: pointer;
    transition: box-shadow .15s var(--ease-out), transform .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .portal-kb-result:hover {
        box-shadow: var(--helix-shadow-md) !important;
        transform: translateY(-1px);
    }
}
.portal-kb-result:active { transform: var(--press-soft); }

.portal-kb-category {
    transition: box-shadow .15s var(--ease-out), transform .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .portal-kb-category:hover {
        box-shadow: var(--helix-shadow-md) !important;
        transform: translateY(-1px);
    }
}
.portal-kb-category:active { transform: var(--press-soft); }

/* Markdown article rendered content */
.helix-md-content h1,
.helix-md-content h2,
.helix-md-content h3 { margin-top: 1.5rem; margin-bottom: .5rem; }
.helix-md-content p  { margin-bottom: .75rem; line-height: var(--lh-normal); }
/* Ancho de lectura cómodo (65–75ch) para artículos KB del portal; el workspace de
   agente no se toca (su markdown vive en columnas ya estrechas). */
.portal-article-body { max-width: var(--measure); }
.helix-md-content pre { background:var(--helix-panel-2); border-radius:6px; padding:1rem; overflow-x:auto; }
.helix-md-content code { font-size:.9em; background:var(--helix-panel-2); padding:2px 5px; border-radius:4px; }
.helix-md-content pre code { background:none; padding:0; }
.helix-md-content ul, .helix-md-content ol { padding-left:1.5rem; margin-bottom:.75rem; }
.helix-md-content li { margin-bottom:.25rem; }
.helix-md-content blockquote { border-left:4px solid var(--mud-palette-primary); padding:.5rem 1rem; margin:.5rem 0; background:rgba(0,0,0,.03); }
/* BUG-022: tablas y checklists (que el editor visual facilita crear) sin estilos */
.helix-md-content table { border-collapse: collapse; margin: .5rem 0 .75rem; font-size: .95em; }
.helix-md-content th, .helix-md-content td { border: 1px solid rgba(0,0,0,.18); padding: 6px 12px; }
.helix-md-content th { background: rgba(0,0,0,.04); font-weight: 600; }
.helix-md-content ul.contains-task-list { list-style: none; padding-left: .4rem; }
.helix-md-content li.task-list-item { display: flex; align-items: baseline; gap: 8px; }
.helix-md-content li.task-list-item input[type="checkbox"] { accent-color: var(--helix-blue, #2563EB); position: relative; top: 1px; }
/* Sin esto una imagen en linea conserva su tamano natural y desborda la burbuja. */
.helix-md-content img { max-width: 100%; height: auto; display: block; margin: .5rem 0; border-radius: 6px; }
/* Dentro de burbujas de comentario: sin margenes huerfanos arriba/abajo */
.helix-md-content > :first-child { margin-top: 0; }
.helix-md-content > :last-child { margin-bottom: 0; }

/* ── Notification panel ─────────────────────────────────────────────────── */
/* MudBlazor posiciona el popover pegado al borde derecho del viewport (por `left`, sin transform
   propio). Desplazamos el WRAPPER entero (fondo + sombra + panel) 10px a la izquierda para dejar
   margen; así no queda flush/recortado contra el borde. */
/* `!important` en z-index: MudBlazor escribe el z-index INLINE al posicionar el popover (1201 en el
   portal, 1302 bajo el AppBar), por debajo de la capa de cierre al clicar fuera (1390), que entonces
   se queda encima y absorbe todos los clics del panel. Sin `!important` no gana al estilo inline. */
.helix-notif-popover { z-index: 1400 !important; transform: translateX(-10px); }
.helix-notif-panel {
    width: 320px;
    max-height: 420px;
    overflow-y: auto;
    background: var(--helix-surface);
    border-radius: 8px;
}
.helix-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.06));
    transition: background .12s;
}
.helix-notif-item:hover { background: var(--mud-palette-action-hover, rgba(0,0,0,.04)); }
.helix-notif-item:focus-visible { outline: 3px solid var(--helix-focus-ring); outline-offset: -3px; }

/* ── Dark mode overrides ──────────────────────────────────────────────────
   MudBlazor switches its own CSS custom properties when the palette changes,
   but custom non-MudBlazor elements use hardcoded colors. These overrides
   fix them when [data-helix-dark] is set on <html> by the JS interop.
──────────────────────────────────────────────────────────────────────────── */
[data-helix-dark] {
    --helix-ink:   #E2E8F0;
    --helix-text:  #E2E8F0;
    --helix-muted: #9CA3AF;
    --helix-line:  rgba(255, 255, 255, .08);
    --helix-border: rgba(255, 255, 255, .10);
    --helix-bg:    #121216;
    --helix-soft:  #18181C;
    --helix-surface: #1E1E24;
    --helix-panel: #1E1E24;
    /* Shell flotante en oscuro: el lienzo es más profundo que los paneles y la
       sombra se hace más densa para que «floten» sobre fondo oscuro. */
    --helix-canvas: #0D0D10;
    --helix-chrome-bg: var(--helix-canvas);
    --helix-panel-2: #1B1B20;
    --helix-avatar-bg: #4A443C;
    --helix-float-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 20px rgba(0, 0, 0, .38);

    /* «Kit Táctil» · Hundido en oscuro: rojo más luminoso para el primario y un
       hundido casi negro para superficies oscuras. */
    --helix-sink: #B01414;
    --helix-sink-2: #0E0C07;

    /* Workspace v2 — tokens semánticos en oscuro (fg claro + bg translúcido,
       mismo patrón que las role-pills). */
    --helix-subtle: #6B7280;
    --st-open:    #AECBFF; --st-open-bg:    rgba(37, 99, 235, .18);
    --st-pending: #FCD9A0; --st-pending-bg: rgba(245, 158, 11, .16);
    --st-solved:  #9BE8BD; --st-solved-bg:  rgba(22, 163, 74, .18);
    --st-new:     #CBC2F2; --st-new-bg:     rgba(91, 75, 179, .22);
    --sla-danger: #FFB3B3; --sla-danger-bg: rgba(206, 0, 0, .18); --sla-danger-border: rgba(255, 179, 179, .28);
    --sla-warn:   #FCD9A0; --sla-warn-bg:   rgba(245, 158, 11, .16);
    --sla-ok:     #9BE8BD; --sla-ok-bg:     rgba(22, 163, 74, .18);
    /* Anillo de foco de input en oscuro: el rojo de marca al 8% (claro) es casi invisible sobre el
       fondo oscuro → se sube la luminosidad/alfa para que el foco se lea (PR5a). */
    --helix-danger-soft: rgba(255, 92, 92, .22);
    /* El rojo de marca opaco solo llega a 2,86:1 sobre los paneles oscuros, por debajo del 3:1 de SC
       1.4.11; este rojo luminoso mide 5,48:1. Un anillo de foco nuevo debe usar el token y no
       var(--helix-red) directamente: el token es lo único que tiene este override de tema. */
    --helix-focus-ring: #FF5C5C;
    /* El ámbar profundo del relleno de estrella se hunde contra el panel oscuro (2.9:1): aquí el
       que pasa el 3:1 es el ámbar de marca. */
    --helix-star-fill: var(--helix-amber);
    /* #A30000 sobre el panel oscuro mide 2,00:1, muy por debajo del 4,5:1 de SC 1.4.3, y es el
       texto que avisa de que el reset total no se puede deshacer. Este rojo luminoso mide 5,44:1
       contra el fondo de la zona de peligro. */
    --helix-danger-text: #FF5C5C;
}

[data-helix-dark] html,
[data-helix-dark] body {
    background: #121216;
    color: #E2E8F0;
}

[data-helix-dark] .helix-conversation,
[data-helix-dark] .helix-tab-content {
    background: #18181C;
}

[data-helix-dark] .helix-ticket-props,
[data-helix-dark] .helix-ticket-context,
[data-helix-dark] .helix-ticket-header {
    background: #1E1E24;
}

/* hilo-v3: .helix-msg-inner es transparente (vive DENTRO de la card, ver bloque .helix-msg-collapsible
   más arriba) — el fondo de la card ya sale de --helix-surface (token, coherente en dark). Solo interna/Axis
   necesitan overrides de dark aquí porque llevan un tinte propio no tokenizado. */
[data-helix-dark] .helix-msg-collapsible.internal .helix-msg-inner {
    background: #2C2410;
}
/* hilo-v3: la card interna lleva su tinte en el propio contenedor (.helix-msg-collapsible), no en
   .helix-msg-inner. En dark hay que oscurecer también la card y el fundido del clamp; si no, como la nota
   interna nace expandida, el summary queda en ámbar claro (#FFFBEB) sobre el cuerpo oscuro. */
[data-helix-dark] .helix-msg-collapsible.internal { background: #2C2410; border-color: #4A3A1C; }
[data-helix-dark] .helix-msg-collapsible.internal .hlx-msgcard-clamp::after {
    background: linear-gradient(90deg, transparent, #2C2410);
}

[data-helix-dark] .helix-msg-collapsible.helix-msg-ai .helix-msg-inner {
    background: rgba(124,58,237,0.12);
}

[data-helix-dark] .helix-preview-panel,
[data-helix-dark] .helix-preview-block,
[data-helix-dark] .helix-property-card,
[data-helix-dark] .helix-sla-card,
[data-helix-dark] .helix-preview-grid > div {
    background: #1E1E24;
}

[data-helix-dark] .helix-suggestion-card {
    background: #18181C;
    border-color: rgba(255,255,255,.10);
}
[data-helix-dark] .helix-suggestion-card.compact:hover {
    background: #2C1010;
}

[data-helix-dark] .helix-composer-tabs {
    background: #18181C;
}
[data-helix-dark] .helix-composer-tabs button {
    color: var(--helix-muted);
}
[data-helix-dark] .helix-composer-tabs button.active {
    background: #1E1E24;
}

[data-helix-dark] .helix-history-event p b,
[data-helix-dark] .helix-history-event p i {
    color: #CBD5E1;
}
[data-helix-dark] .helix-history-event p b.hlx-ax-hist-author {
    /* PR-3: la línea ✦ de Axis conserva el acento violeta también en oscuro (token ya theme-aware). */
    color: var(--st-new);
}

[data-helix-dark] .helix-work-item {
    color: #CBD5E1;
}
[data-helix-dark] .helix-work-item:hover {
    background: rgba(255,255,255,.05);
}

[data-helix-dark] .helix-md-content pre,
[data-helix-dark] .helix-md-content code {
    background: #18181C;
}
[data-helix-dark] .helix-md-content th,
[data-helix-dark] .helix-md-content td {
    border-color: rgba(255,255,255,.18);
}
[data-helix-dark] .helix-md-content th {
    background: rgba(255,255,255,.06);
}

[data-helix-dark] .helix-matrix th,
[data-helix-dark] .helix-matrix-corner,
[data-helix-dark] .helix-matrix-self {
    background: #18181C;
}

[data-helix-dark] #blazor-error-ui {
    background: #2C1010;
    color: #FCA5A5;
}

[data-helix-dark] .helix-notif-panel {
    background: #1E1E24;
}

/* ── Modo oscuro: chips/tints de color (los fondos de superficie ya se tokenizaron;
   aquí van los tintes claros que no invierten: pills de rol, iconos tintados, filas
   seleccionadas, barra de bulk, blockquote). Tinte oscuro translúcido + texto claro. */
/* Las pills de rol (RoleBadge y el banner de AdminHome) no necesitan variante dark: .hx-role tinta con
   color-mix sobre el color del rol y el texto va en --helix-text, que ya se adapta. */
[data-helix-dark] .helix-admin-stat-icon,
[data-helix-dark] .helix-admin-module-icon { background: rgba(206,0,0,.18); color: #ff9b9b; }
[data-helix-dark] .helix-admin-module-badge.active { background: rgba(206,0,0,.18); border-color: rgba(206,0,0,.35); color: #ffb3b3; }
[data-helix-dark] .helix-ticket-row.selected { background: rgba(206,0,0,.16); }
[data-helix-dark] .helix-ticket-row.bulk-selected { background: rgba(245,158,11,.14); }
[data-helix-dark] .helix-ticket-row.bulk-selected.selected { background: rgba(206,0,0,.20); }
[data-helix-dark] .helix-bulk-bar { background: rgba(245,158,11,.12); border-top-color: rgba(245,158,11,.40); border-bottom-color: rgba(245,158,11,.40); }
[data-helix-dark] .helix-bulk-count { color: #fcd9a0; }
[data-helix-dark] .helix-ctx-section .helix-suggestion-card.compact:hover { background: rgba(206,0,0,.12); }
[data-helix-dark] .helix-ctx-panel .helix-ctx-section.hlx-sla-breach { border-color: rgba(206,0,0,.40); }
[data-helix-dark] .hlx-cmode.note.active { background: rgba(245,158,11,.18); color: #FCD9A0; }
[data-helix-dark] .hlx-composer-mode-chip.note { background: rgba(245,158,11,.18); color: #FCD9A0; border-color: transparent; }
[data-helix-dark] .helix-md-content blockquote { background: rgba(255,255,255,.05); }
[data-helix-dark] .helix-channel { background: var(--helix-surface); }

/* ══════════════════════════════════════════════════════════════════════════
   HELIX DESIGN SYSTEM — Modern UI
   Rama claude/feature/helix-modern-ui
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Layout shell ────────────────────────────────────────────────────── */
.helix-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(206, 0, 0, 0.06), transparent 28rem),
        linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 40%, #F7F8FA 100%);
}

/* ── Cards ───────────────────────────────────────────────────────────── */
.helix-card {
    background: var(--helix-surface);
    border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius-lg);
    /* Flat-By-Default (DESIGN.md): en reposo la card lleva SOLO hairline, no sombra; la
       sombra es una respuesta al estado (ver .helix-card-hover). Antes: box-shadow-sm
       permanente, que era un «tell» del look legacy. */
    box-shadow: none;
}
.helix-card-hover {
    transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), border-color 160ms var(--ease-out);
    cursor: pointer;
}
/* La elevación al pasar el cursor solo en dispositivos con puntero real: en táctil
   el tap dispara :hover y la card se quedaría «levantada». */
@media (hover: hover) and (pointer: fine) {
    .helix-card-hover:hover {
        transform: translateY(-2px);
        box-shadow: var(--helix-shadow-md);
        border-color: rgba(206, 0, 0, 0.22);
    }
}
.helix-card-hover:active { transform: var(--press-soft); }

/* ── Sidebar oscura (agent workspace) ───────────────────────────────── */
.helix-sidebar-dark {
    background: linear-gradient(180deg, #05070A 0%, #10141C 100%) !important;
    color: white !important;
}
.helix-sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 10px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--sb-surface);
}
/* Sidebar FLOTANTE en desktop: el inner se separa del drawer (que ahora es lienzo) con un gap,
   esquina redondeada y sombra suave — coherente con los paneles flotantes del workspace, sin
   refactor de layout (el drawer sigue reservando su ancho y gestionando colapso/responsive).
   En móvil (<961px, overlay) el inner queda a pantalla completa con su superficie. */
@media (min-width: 961px) {
    .helix-sidebar-inner {
        margin: 8px;
        height: calc(100% - 16px);
        border: 1px solid var(--helix-border);
        border-radius: 14px;
        box-shadow: var(--helix-float-shadow);
    }
}

.helix-sidebar-logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 6px 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.helix-sidebar-section {
    font-size: var(--fs-meta);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.38);
    padding: 14px 6px 4px;
}
.helix-sidebar-item {
    height: 38px;
    border-radius: 9px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: var(--fs-body);
    font-weight: 500;
    transition: background 130ms var(--ease-out), color 130ms var(--ease-out);
    margin-bottom: 1px;
    position: relative;
    white-space: nowrap;
}
.helix-sidebar-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.helix-sidebar-item.active {
    background: rgba(206, 0, 0, 0.26);
    color: #fff;
    font-weight: 600;
    border-left: 3px solid var(--helix-red);
    padding-left: 7px;
}
.helix-sidebar-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    font-size: var(--fs-meta);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.helix-sidebar-badge.danger { background: var(--helix-red); color: #fff; }
.helix-sidebar-badge.muted  { background: rgba(255,255,255,.14); color: rgba(255,255,255,.8); }
.helix-sidebar-item--sub { padding-left: 28px; font-size: var(--fs-compact); opacity: 0.85; }
.helix-sidebar-item--sub:hover { opacity: 1; }
.helix-sidebar-item--primary { font-weight: 700; font-size: var(--fs-body); }
.hlx-sidebar-clickable { cursor: pointer; }
.helix-sidebar-spacer { flex: 1 1 auto; min-height: 20px; }
/* Sidebar count badges */
.hlx-nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlx-cnt {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; border-radius: 9px; padding: 0 5px;
    background: rgba(255,255,255,.15); color: rgba(255,255,255,.9);
    font-size: var(--fs-meta); font-weight: 700; flex-shrink: 0; margin-left: auto;
}
/* Sección con acción a la derecha (+ de Vistas guardadas) */
.helix-sidebar-section.hlx-section-action {
    display: flex; align-items: center; justify-content: space-between;
    padding-right: 2px;
}
/* Cabecera de sección plegable (Colas / Herramientas): botón a ancho completo con chevron. */
.helix-sidebar-section.hlx-section-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: transparent; border: none; cursor: pointer;
    font-family: inherit; /* el resto (size/weight/transform/color) viene de .helix-sidebar-section */
    transition: color .12s var(--ease-out);
}
.helix-sidebar-section.hlx-section-toggle:hover { color: rgba(255, 255, 255, 0.7); }
.hlx-section-chevron { color: rgba(255, 255, 255, 0.35); transition: transform .22s var(--ease-out); }
.hlx-section-chevron.is-open { transform: rotate(180deg); }

/* Plegado animado de una sección: grid 1fr↔0fr anima alturas auto sin conocer el contenido.
   El hijo interno necesita overflow:hidden + min-height:0 para recortarse durante la transición. */
.hlx-collapsible {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .22s var(--ease-out);
}
.hlx-collapsible.collapsed { grid-template-rows: 0fr; }
.hlx-collapsible > .hlx-collapsible-inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.hlx-section-add {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border: none; border-radius: 6px;
    background: transparent; color: rgba(255,255,255,.45); cursor: pointer;
    padding: 0;
}
.hlx-section-add:hover { background: rgba(255,255,255,.12); color: #fff; }
/* Eliminar vista guardada: visible solo al hover del item (sustituye al contador) */
.hlx-sv-delete {
    display: none; align-items: center; justify-content: center;
    width: 20px; height: 20px; border: none; border-radius: 6px;
    background: transparent; color: rgba(255,255,255,.5); cursor: pointer;
    padding: 0; flex-shrink: 0; margin-left: auto;
}
.hlx-saved-view:hover .hlx-sv-delete { display: inline-flex; }
.hlx-saved-view:hover .hlx-cnt { display: none; }
.hlx-sv-delete:hover { background: rgba(255,255,255,.15); color: #fff; }
.hlx-saved-empty {
    font-size: var(--fs-meta); color: rgba(255,255,255,.35);
    padding: 4px 8px 2px; font-style: italic;
}
/* ── Sidebar colapsada a iconos ─────────────────────────────────────── */
/* Transición coordinada: drawer y contenido principal se mueven a la vez. */
.mud-drawer.helix-sidebar-dark {
    transition: width 220ms var(--ease-out) !important;
}
.mud-main-content,
.mud-appbar {
    transition: margin-left 220ms var(--ease-out), padding-left 220ms var(--ease-out), left 220ms var(--ease-out), width 220ms var(--ease-out) !important;
}
.hlx-sidebar-collapse {
    margin: 14px auto 0; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.75); cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 130ms, color 130ms;
}
.hlx-sidebar-collapse:hover { background: rgba(255,255,255,.14); color: #fff; }
.helix-sidebar-inner.hlx-collapsed { padding: 0 8px 16px; }
.helix-sidebar-inner.hlx-collapsed .hlx-nav-label,
.helix-sidebar-inner.hlx-collapsed .helix-sidebar-section,
.helix-sidebar-inner.hlx-collapsed .hlx-sv-delete,
.helix-sidebar-inner.hlx-collapsed .hlx-cnt { display: none; }
/* Colapsado: cada ítem es un cuadrado redondeado centrado (no una barra a todo el ancho),
   con su hover/activo redondeado — como un icon-rail (estilo Intercom). */
.helix-sidebar-inner.hlx-collapsed .helix-sidebar-item {
    justify-content: center; padding: 0;
    width: 40px; height: 40px; margin: 2px auto; border-radius: 10px;
}
.helix-sidebar-inner.hlx-collapsed .helix-sidebar-logo-wrap {
    display: flex; justify-content: center;
}
/* Colapsada: los items con contador conservan señal — dot rojo sobre el icono */
.helix-sidebar-inner.hlx-collapsed .helix-sidebar-item:has(.hlx-cnt)::after {
    content: ''; position: absolute; top: 7px; right: 14px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--helix-red); box-shadow: 0 0 0 2px rgba(5, 7, 10, 0.9);
}
.hlx-cnt--red   { background: var(--helix-red); color: #fff; }
.hlx-cnt--amber { background: #92400E; color: #FDE68A; }
.hlx-cnt--muted { background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); }

/* ── Sidebar del agente — CLARA CÁLIDA (rediseño «estilo Intercom») ───────────
   La nav deja de ser un bloque oscuro frío y entra en la familia cálida del
   lienzo: superficie taupe clara, texto oscuro, rojo SOLO en el ítem activo.
   Capa de override (no reescribe el bloque base) con tokens locales --sb-*
   para que el modo oscuro (data-helix-dark) revierta a oscuro-CÁLIDO con una
   sola sobrescritura. La clase sigue llamándose helix-sidebar-dark por
   compatibilidad con MainLayout (es un nombre histórico, ya no es oscura). */
.helix-sidebar-dark {
    --sb-text: #5C5648;
    --sb-strong: #1C1A16;
    --sb-muted: #857C6A;
    --sb-hover: rgba(60, 52, 40, .07);
    --sb-divider: rgba(60, 52, 40, .12);
    --sb-cnt-bg: rgba(60, 52, 40, .10);
    --sb-cnt-text: #5C5648;
    --sb-ring: #ECE5D8;
    --sb-surface: #ECE5D8;          /* superficie de la sidebar (card flotante en desktop) */
    --sb-canvas: var(--helix-chrome-bg);   /* mismo lienzo que el topbar (#19452) */
    background: var(--sb-canvas) !important;
    color: var(--sb-text) !important;
}
.helix-sidebar-logo-wrap { border-bottom-color: var(--sb-divider) !important; }
/* El componente HelixLogo se invoca con Dark="true"; su regla .hx-logo.dark .hx-logo-text
   (color #fff) empata en especificidad y va después en el archivo, así que la ganaría.
   Subimos especificidad (+.dark) y forzamos para que el texto del logo sea oscuro en la
   sidebar clara (antes salía blanco e ilegible sobre el crema). */
.helix-sidebar-dark .hx-logo.dark .hx-logo-text { color: var(--sb-strong) !important; }
.helix-sidebar-section { color: var(--sb-muted) !important; }
.helix-sidebar-item { color: var(--sb-text) !important; }
.helix-sidebar-item:hover { background: var(--sb-hover) !important; color: var(--sb-strong) !important; }
.helix-sidebar-item.active {
    /* BUG-20260708-007: antes fondo blanco (var(--helix-surface)) — se veía como un chip blanco
       destacado; se usa el mismo rojo translúcido que el resto de estados activos de la app
       (.helix-work-item.active). */
    background: rgba(206, 0, 0, .10) !important;
    color: var(--helix-red) !important;
}
.helix-sidebar-item.active .mud-icon-root { color: var(--helix-red) !important; }
.helix-sidebar-badge.muted { background: var(--sb-cnt-bg); color: var(--sb-cnt-text); }
.hlx-cnt { background: var(--sb-cnt-bg); color: var(--sb-cnt-text); }
.hlx-cnt--muted { background: rgba(60, 52, 40, .07); color: var(--sb-muted); }
.helix-sidebar-section.hlx-section-toggle:hover { color: var(--sb-text) !important; }
.hlx-section-chevron { color: #B3A992 !important; }
.hlx-section-add { color: var(--sb-muted); }
.hlx-section-add:hover { background: var(--sb-hover); color: var(--sb-strong); }
.hlx-sv-delete { color: var(--sb-muted); }
.hlx-sv-delete:hover { background: var(--sb-hover); color: var(--sb-strong); }
.hlx-saved-empty { color: var(--sb-muted); }
.hlx-sidebar-collapse {
    border-color: rgba(60, 52, 40, .20) !important;
    background: rgba(60, 52, 40, .05) !important;
    color: var(--sb-text) !important;
}
.hlx-sidebar-collapse:hover { background: rgba(60, 52, 40, .10) !important; color: var(--sb-strong) !important; }
.helix-sidebar-inner.hlx-collapsed .helix-sidebar-item:has(.hlx-cnt)::after {
    box-shadow: 0 0 0 2px var(--sb-ring);
}

/* Modo oscuro: la sidebar vuelve a oscura pero CÁLIDA (no navy fría). */
[data-helix-dark] .helix-sidebar-dark {
    --sb-text: rgba(255, 240, 225, .78);
    --sb-strong: #FFFFFF;
    --sb-muted: rgba(255, 240, 225, .40);
    --sb-hover: rgba(255, 240, 225, .08);
    --sb-divider: rgba(255, 240, 225, .10);
    --sb-cnt-bg: rgba(255, 240, 225, .14);
    --sb-cnt-text: rgba(255, 240, 225, .90);
    --sb-ring: #1A140D;
    --sb-surface: linear-gradient(180deg, #221B12 0%, #15100A 100%);
    --sb-canvas: var(--helix-chrome-bg);   /* mismo lienzo que el topbar (#19452) */
    background: var(--sb-canvas) !important;
    color: var(--sb-text) !important;
}
[data-helix-dark] .helix-sidebar-dark .hx-logo.dark .hx-logo-text { color: #fff !important; }
[data-helix-dark] .helix-sidebar-item.active {
    background: rgba(206, 0, 0, .30) !important;
    color: #fff !important;
    box-shadow: none;
}
[data-helix-dark] .helix-sidebar-item.active .mud-icon-root { color: #fff !important; }
[data-helix-dark] .hlx-section-chevron { color: rgba(255, 240, 225, .35) !important; }

/* ── HelixLogo component ─────────────────────────────────────────────── */
.hx-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.hx-logo-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: #050505; display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 14px rgba(206,0,0,.20);
    overflow: hidden; flex-shrink: 0;
}
.hx-logo-icon img { width: 30px; height: 30px; object-fit: contain; display: block; }
.hx-logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.hx-logo-brand   { font-size: var(--fs-compact); font-weight: 500; letter-spacing: 0.2px; }
.hx-logo-product { font-size: 23px; font-weight: 700; letter-spacing: 0.2px; }
.hx-logo.dark  .hx-logo-text { color: #fff; }
.hx-logo.light .hx-logo-text { color: var(--helix-text); }

/* ── Priority chips ──────────────────────────────────────────────────── */
/* «Kit Táctil» — PriorityChip: tag mono «Pn» (derivado de Order) + nombre, con el color de catálogo
   (--hx-c) en el tinte y en el bloque del tag; TEXTO neutro (--helix-text) → AA holgado (modelo A, como
   StatusChip). Radio 8px (vs 999px del estado) para diferenciar prioridad de estado. Cero colores
   hardcodeados: el color sale de Tbl_Prioridades.Color vía --hx-c. */
.hx-priority {
    display: inline-flex; align-items: center; height: 24px; border-radius: 8px; overflow: hidden;
    flex-shrink: 0; vertical-align: middle;
    font-size: var(--fs-meta); font-weight: 600; line-height: 1;
    color: var(--helix-text); background: color-mix(in srgb, var(--hx-c) 12%, transparent);
}
.hx-priority-tag {
    align-self: stretch; display: flex; align-items: center; padding: 0 6px;
    font-family: var(--helix-font-mono); font-size: 10px; font-weight: 700; color: var(--helix-text);
    background: color-mix(in srgb, var(--hx-c) 22%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--hx-c) 30%, transparent);
}
.hx-priority-txt { padding: 0 10px 0 8px; white-space: nowrap; }
.hx-priority--sm { height: 20px; }
/* Compact = solo el tag: sin divisor a la derecha (no hay nombre después). */
.hx-priority--sm .hx-priority-tag { border-right: none; }

/* ── Status chip ─────────────────────────────────────────────────────── */
/* «Kit Táctil» — StatusChip: tope de color lateral (8px) + tinte 12%, ambos con el color PURO
   del catálogo (--hx-c); el TEXTO va en neutro (--helix-text, que ya se adapta claro/oscuro) →
   AA ≥13:1 en ambos temas sin tocar los colores del catálogo. «Cerrado» pasa var(--helix-muted). */
/* .hx-role reutiliza la misma anatomía (cap + tinte + texto neutro); el color del rol llega por --hx-c. */
.hx-status, .hx-role {
    display: inline-flex; align-items: center; height: 24px; border-radius: 999px; overflow: hidden;
    flex-shrink: 0; vertical-align: middle;
    font-size: var(--fs-meta); font-weight: 600; line-height: 1;
    color: var(--helix-text); background: color-mix(in srgb, var(--hx-c) 12%, transparent);
}
.hx-status-cap, .hx-role-cap { width: 8px; align-self: stretch; background: var(--hx-c, #7A7366); }
.hx-status-txt, .hx-role-txt { padding: 0 11px 0 9px; white-space: nowrap; }
.hx-status--sm { height: 20px; }
.hx-status--sm .hx-status-txt { padding: 0 9px 0 8px; }
.hx-role--sm { height: 20px; }
.hx-role--sm .hx-role-txt { padding: 0 9px 0 8px; }

/* ── SLA indicator ───────────────────────────────────────────────────── */
/* «Kit Táctil» — SlaIndicator: neutro salvo riesgo. En plazo = neutro + clock (silencioso);
   riesgo = cap ámbar (--sla-warn); vencido = cap rojo de DATO (--sla-danger, NUNCA #CE0000).
   Texto neutro (--helix-text) sobre el tinte → AA holgado, como estado/prioridad. */
.hx-sla { display: inline-flex; align-items: center; height: 24px; border-radius: 999px; overflow: hidden;
    flex-shrink: 0; vertical-align: middle; font-size: var(--fs-meta); font-weight: 600; line-height: 1;
    color: var(--helix-text); }
.hx-sla-cap { width: 8px; align-self: stretch; flex-shrink: 0; }
.hx-sla-ico { margin-left: 8px; color: var(--helix-muted); display: inline-flex; }
.hx-sla-txt { padding: 0 11px 0 9px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hx-sla--ontime { background: var(--helix-surface); border: 1px solid var(--helix-border); }
.hx-sla--ontime .hx-sla-txt { padding-left: 6px; }
.hx-sla--none   { background: var(--helix-panel-2); color: var(--helix-muted); }
.hx-sla--risk    { background: var(--sla-warn-bg); }
.hx-sla--risk    .hx-sla-cap { background: var(--sla-warn); }
.hx-sla--overdue { background: var(--sla-danger-bg); }
.hx-sla--overdue .hx-sla-cap { background: var(--sla-danger); }
/* Dentro de una tarjeta ya teñida con --sla-danger-bg el tinte del chip sería el mismo color que
   su contenedor y el pill desaparecería: pasa a superficie y la señal la sigue llevando el cap. */
.hlx-sla-breach .hx-sla--overdue { background: var(--helix-surface); border: 1px solid var(--sla-danger-border); }

/* ── UserAvatar component ────────────────────────────────────────────── */
.hx-avatar { display: flex; align-items: center; gap: 8px; }
.hx-avatar-circle {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: var(--fs-meta); flex-shrink: 0; position: relative;
}
.hx-avatar-circle img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.hx-avatar-online-dot {
    position: absolute; bottom: 0; right: 0;
    width: 9px; height: 9px; border-radius: 50%;
    background: #16A34A; border: 2px solid #fff;
}
.hx-avatar-name { font-weight: 600; font-size: var(--fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-avatar-sub  { font-size: var(--fs-meta); color: var(--helix-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Hero portal v2 */
.portal-hero-v2 {
    padding: 52px 0 40px;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px;
}
.portal-hero-v2-title { font-size: var(--fs-display); font-weight: var(--fw-bold); color: var(--helix-text); line-height: var(--lh-snug); margin: 0 0 10px; }

/* BUG-20260612-014: FocusOnNavigate (Routes.razor) enfoca el h1 tras cada navegación
   por accesibilidad; los headings no deben pintar anillo de foco visual. */
h1:focus, h1:focus-visible { outline: none; }
.portal-hero-v2-sub   { font-size: var(--fs-lead); color: var(--helix-muted); margin: 0 0 24px; line-height: 1.5; }
.portal-hero-v2-search {
    display: flex; align-items: center; gap: 10px; height: 52px;
    border-radius: var(--helix-radius-md); background: var(--helix-surface);
    border: 1.5px solid var(--helix-border); box-shadow: var(--helix-shadow-sm);
    padding: 0 16px; transition: border-color 150ms, box-shadow 150ms;
}
.portal-hero-v2-search:focus-within {
    border-color: rgba(206,0,0,0.4);
    box-shadow: 0 0 0 3px rgba(206,0,0,0.08), var(--helix-shadow-sm);
}
.portal-hero-v2-search input {
    border: 0; outline: none; background: transparent; flex: 1;
    font-size: var(--fs-body); font-family: inherit; color: var(--helix-text);
}
.portal-hero-v2-search input::placeholder { color: var(--helix-muted); }
.portal-hero-v2-kbd {
    display: inline-flex; align-items: center; padding: 3px 7px;
    border: 1px solid var(--helix-border); border-radius: 6px;
    font-size: var(--fs-meta); font-weight: 600; color: var(--helix-muted); background: var(--helix-panel-2); flex-shrink: 0;
}

/* Portal illustration — composición de tiles de marca */
.portal-illus { position: relative; width: 300px; height: 220px; display: none; }
@media (min-width: 1100px) { .portal-illus { display: block; } }
.portal-illus-tile {
    position: absolute; background: var(--helix-surface);
    border-radius: 18px; box-shadow: var(--helix-shadow-md);
    display: flex; align-items: center; justify-content: center;
}
.portal-illus-tile-logo {
    top: 30px; right: 60px; width: 96px; height: 96px; transform: rotate(6deg);
}
.portal-illus-tile-logo img { width: 52px; height: 52px; }
.portal-illus-tile-lines {
    top: 70px; left: 0; width: 120px; height: 84px; transform: rotate(-8deg);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 9px; padding: 0 16px;
}
.portal-illus-line { height: 7px; border-radius: 4px; background: #EDEFF3; display: block; }
.portal-illus-tile-lines .portal-illus-line:first-child { background: rgba(206,0,0,0.25); }
.portal-illus-tile-check {
    bottom: 24px; right: 110px; width: 44px; height: 44px; transform: rotate(-6deg);
}
.portal-illus-tile-user {
    bottom: 0; right: 24px; width: 52px; height: 52px; transform: rotate(8deg);
}
.portal-illus-bubble-chat {
    position: absolute; top: 0; left: 70px;
    width: 74px; height: 52px; border-radius: 16px 16px 16px 4px;
    background: var(--helix-red); transform: rotate(-5deg);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    box-shadow: 0 10px 24px rgba(206,0,0,0.30);
}
.portal-illus-bubble-chat span {
    width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.85); display: block;
}

/* Cards de accion portal */
.portal-actions-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 32px;
}
.portal-action-card {
    background: var(--helix-surface); border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius-lg); padding: 20px 18px;
    display: flex; flex-direction: row; align-items: center; gap: 16px;
    text-decoration: none; color: inherit; cursor: pointer; position: relative;
    transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .portal-action-card:hover {
        transform: translateY(-2px); box-shadow: var(--helix-shadow-md);
        border-color: rgba(206,0,0,0.18);
    }
}
.portal-action-card:active { transform: var(--press-soft); }
.portal-action-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(206,0,0,0.08); color: var(--helix-red);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.portal-action-arrow {
    position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
    color: var(--helix-red); opacity: 0.6;
    transition: opacity 150ms, transform 150ms;
}
@media (hover: hover) and (pointer: fine) {
    .portal-action-card:hover .portal-action-arrow { opacity: 1; transform: translateY(-50%) translateX(2px); }
}
.portal-action-card > div:last-child { padding-right: 22px; min-width: 0; }
.portal-action-title { font-size: var(--fs-body); font-weight: 700; color: var(--helix-text); margin-bottom: 3px; }
.portal-action-desc  { font-size: var(--fs-compact); color: var(--helix-muted); line-height: 1.45; }

/* Grid home portal */
.portal-home-grid {
    display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
    gap: 24px; align-items: start;
}
/* BUG-20260713-003: en escritorio la Home del portal cabe en el viewport y NO
   genera scroll de PÁGINA. El contenedor de la Home se acota a la altura visible
   (bajo el topbar de 72px) y se vuelve columna flex: hero y cards de acción
   conservan su tamaño natural, y SOLO el grid de paneles rellena el espacio
   restante. Dentro del grid, las DOS listas —«My recent requests» (izquierda) y
   los artículos sugeridos (derecha)— hacen scroll interno; sus tarjetas de
   cabecera y «Service status» conservan su tamaño. Así la página nunca desborda
   y ambas columnas terminan a la misma altura.
   Degradación elegante en viewports muy bajos: el propio contenedor cae a
   overflow-y:auto y el grid respeta un suelo (min-height) para no colapsar, de
   modo que el hero/las cards siguen siendo accesibles por scroll del contenedor.
   Solo aplica desde el breakpoint de 2 columnas (>960px); en móvil (1 columna,
   ver media query 960px) no se toca. */
@media (min-width: 961px) {
    .portal-home-page {
        height: calc(100vh - 72px);
        display: flex; flex-direction: column;
        overflow-y: auto;
    }
    .portal-home-grid {
        align-items: stretch;
        flex: 1 1 auto; min-height: 320px; padding-bottom: 24px;
    }
    /* Columna izquierda: la lista de tickets recientes es la que scrollea */
    .portal-recent-panel {
        display: flex; flex-direction: column; min-height: 0;
    }
    .portal-recent-panel .portal-ticket-list {
        flex: 1 1 auto; min-height: 0; overflow-y: auto;
    }
    /* Columna derecha: artículos sugeridos scrollean; «Service status» fijo */
    .portal-side-col {
        display: flex; flex-direction: column; min-height: 0;
    }
    .portal-articles-panel {
        display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto;
    }
    .portal-article-list {
        min-height: 0; overflow-y: auto; flex: 1 1 auto;
    }
    .portal-status-card { flex-shrink: 0; }
}
.portal-recent-panel {
    background: var(--helix-surface); border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius-lg); padding: 18px 20px;
}
.portal-recent-panel .portal-ticket-list { border: 0; border-radius: 0; }
.portal-recent-panel .portal-ticket-row { padding-left: 0; padding-right: 0; }
.portal-recent-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.portal-recent-title { font-size: var(--fs-lead); font-weight: 700; color: var(--helix-text); display: inline-flex; align-items: center; gap: 8px; }
.portal-recent-link {
    font-size: var(--fs-compact); font-weight: 500; color: var(--helix-red);
    text-decoration: none; display: flex; align-items: center; gap: 3px;
}
.portal-recent-link:hover { text-decoration: underline; }

/* Panel articulos sugeridos */
.portal-articles-panel {
    background: var(--helix-surface); border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius-lg); padding: 20px; margin-bottom: 16px;
}
.portal-articles-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.portal-article-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--helix-border);
    text-decoration: none; color: inherit; transition: color 130ms;
}
.portal-article-item:last-child { border-bottom: 0; padding-bottom: 0; }
.portal-article-item:hover { color: var(--helix-red); }
.portal-article-cat {
    font-size: var(--fs-meta); font-weight: 600; padding: 2px 8px; border-radius: 10px;
    background: var(--helix-panel-2); color: var(--helix-muted); white-space: nowrap; margin-left: auto; flex-shrink: 0;
}

/* Service status card */
/* M08: estrellas de valoración CSAT (portal) */
.csat-stars { display: inline-flex; align-items: center; gap: 2px; }
.csat-stars--interactive .csat-star { cursor: pointer; line-height: 0; transition: transform .12s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .csat-stars--interactive .csat-star:hover { transform: scale(1.15); }
}

/* Fase 14 — CSAT anónimo (/portal/rate): botones de estrella NATIVOS <button>, con aria-pressed y foco
   visible propio (a diferencia del <span role="button"> del CSAT in-app de PortalTicket.razor — deuda de
   accesibilidad conocida y ya registrada, fuera de este alcance). --helix-radius sí aplica aquí: son
   botones de verdad. */
.hlx-csat-rate-stars { display: flex; gap: 6px; justify-content: center; margin: 4px 0 16px; }
.hlx-csat-rate-star {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius);
    background: var(--helix-panel-2);
    color: var(--helix-muted);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .12s var(--ease-out);
}
.hlx-csat-rate-star[aria-pressed="true"] {
    background: rgba(245, 158, 11, .14);
    border-color: var(--helix-star-fill);
    color: var(--helix-star-fill);
}
@media (hover: hover) and (pointer: fine) {
    .hlx-csat-rate-star:hover { border-color: var(--helix-star-fill); color: var(--helix-star-fill); }
}
.hlx-csat-rate-star:active { transform: var(--press); }
.hlx-csat-rate-star:focus-visible { outline: 2px solid var(--helix-focus-ring); outline-offset: 2px; }
/* Disabled: sin afordancia de interactividad (Kit Táctil) — apagado y sin puntero. */
.hlx-csat-rate-star:disabled { cursor: default; opacity: .5; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .hlx-csat-rate-star { transition: none; }
}

.hlx-csat-rate-label { display: block; font-size: var(--fs-meta); color: var(--helix-muted); margin: 0 0 6px; }

/* Layout de 2 columnas del ticket del portal: conversación + lateral de contexto.
   Móvil (por defecto): apilado, el lateral arriba (order) para mantener visible el
   estado/SLA como antes. Escritorio (>=960px): dos columnas, lateral fijo y sticky. */
.portal-ticket-layout { display: flex; flex-direction: column; gap: 16px; }
.portal-ticket-main { min-width: 0; order: 2; }
.portal-ticket-side { min-width: 0; order: 1; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 960px) {
    .portal-ticket-layout { flex-direction: row; align-items: flex-start; gap: 24px; }
    .portal-ticket-main { flex: 1 1 auto; order: 1; }
    /* top = altura de la navbar sticky del portal (.portal-topbar-new, 72px) + 16px de aire,
       para que la card no quede oculta bajo la barra al hacer scroll. */
    .portal-ticket-side { flex: 0 0 300px; order: 2; position: sticky; top: 88px; }
}

/* M09: timeline de estado de la solicitud (portal) */
.portal-status-timeline { display: flex; flex-direction: column; }
.portal-status-step { position: relative; display: flex; gap: 12px; padding: 0 0 14px 2px; }
.portal-status-step:last-child { padding-bottom: 0; }
.portal-status-step::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: #E2E8F0; }
.portal-status-step:last-child::before { display: none; }
.portal-status-dot { position: relative; z-index: 1; flex: none; width: 12px; height: 12px; border-radius: 50%; margin-top: 2px; background: #CBD5E1; box-shadow: 0 0 0 3px #fff; }
.portal-status-step.is-current .portal-status-dot { background: #CE0000; }
.portal-status-info { min-width: 0; }
.portal-status-name { font-size: var(--fs-compact); font-weight: 600; color: var(--helix-text); }
.portal-status-step.is-current .portal-status-name { color: #CE0000; }
.portal-status-when { font-size: var(--fs-meta); color: var(--helix-muted); }

.portal-status-card {
    background: var(--helix-surface); border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius-lg); padding: 18px 20px;
}
.portal-status-ok-dot {
    position: relative; isolation: isolate;
    width: 9px; height: 9px; border-radius: 50%; background: var(--helix-success);
    flex-shrink: 0; animation: hlx-live-pulse 3s ease-in-out infinite;
}

/* CTA primario del portal (cabecera de «Mis tickets»). El footer del portal se retiró
   por duplicar el botón «Crear ticket» en todas las páginas; la clase se conserva para
   el CTA de cabecera. */
.portal-footer-cta {
    display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px;
    border-radius: 999px; background: var(--helix-red); color: #fff;
    font-size: var(--fs-body); font-weight: 700; box-shadow: 0 6px 18px rgba(206,0,0,0.28);
    text-decoration: none; transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .portal-footer-cta:hover {
        transform: translateY(-2px); box-shadow: 0 10px 26px rgba(206,0,0,0.36); color: #fff;
    }
}
.portal-footer-cta:active { transform: translateY(0) var(--press); }
/* Bloque usuario topbar portal */
.portal-user-block { flex-direction: column; align-items: flex-end; line-height: 1.2; }
.portal-user-name { font-size: var(--fs-body); font-weight: 600; color: var(--helix-text); white-space: nowrap; }
.portal-user-org  { font-size: var(--fs-meta); color: var(--helix-muted); white-space: nowrap; }

/* Conversation message new design — cards planas, el chip comunica el tipo */
.helix-msg-public, .helix-msg-client, .helix-msg-internal { border-left: 0; background: transparent; }

/* UX: aparición suave de un mensaje nuevo (fade + ligero slide-up). La animación se reproduce al CREARSE
   el nodo (mensaje recién llegado, sea de agente, cliente o Axis); los nodos existentes preservados por
   @key no la repiten. Respeta prefers-reduced-motion. */
@keyframes hlx-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.helix-msg, .helix-msg-collapsible, .portal-conv-msg { animation: hlx-msg-in 0.25s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .helix-msg, .helix-msg-collapsible, .portal-conv-msg { animation: none; }
}

/* Portal de cliente: entrada suave del contenido de página en cada navegación.
   Solo entrada (entrance-only): Blazor Server intercambia el contenido por el circuito
   y no controlamos el instante de salida — la página saliente es instantánea por diseño.
   Animación 100% local (mount), sin round-trip SignalR. El contenedor lleva @key por ruta
   en PortalLayout: se recrea al navegar (dispara la animación) pero no en re-renders
   incidentales del circuito. Reutiliza hlx-msg-in y el token --ease-out. */
.portal-page-enter { animation: hlx-msg-in 0.2s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
    .portal-page-enter { animation: none; }
}
.helix-msg-badge {
    display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 10px;
    font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.2px;
}
.helix-msg-badge-public   { background: rgba(22,163,74,0.12); color: #137638; }
.helix-msg-badge-internal { background: rgba(245,158,11,0.14); color: #92400E; }
.helix-msg-badge-client   { background: rgba(37,99,235,0.10); color: #1D4ED8; }
/* El fondo con alpha se recompone contra la superficie oscura, pero el color de texto no: sin override
   propio queda tinta oscura sobre fondo oscuro. Texto de 12px en negrita ⇒ umbral 4,5:1 (SC 1.4.3).
   Mismos pares medidos que las pastillas de entrega de esta cabecera. */
[data-helix-dark] .helix-msg-badge-public   { background: rgba(22,163,74,0.26);  color: #86EFAC; }
[data-helix-dark] .helix-msg-badge-internal { background: rgba(245,158,11,0.24); color: #FCD34D; }
[data-helix-dark] .helix-msg-badge-client   { background: rgba(96,165,250,0.22); color: #93C5FD; }
/* F3 — Axis (IA): respuesta/nota del agente IA. Pastilla violeta (#6D28D9, «IA»)
   + tinte sutil de la burbuja para distinguirla sin romper el diseño plano. */
.helix-msg-badge-ai       { background: rgba(124,58,237,0.12); color: #6D28D9; }
[data-helix-dark] .helix-msg-badge-ai { background: rgba(124,58,237,0.26); color: #C4B5FD; }
/* S4d — entrega de la respuesta en el sistema externo (solo agente). Escala de consecuencia, no de
   mecanismo: neutro mientras no ha pasado nada, ámbar cuando reintenta, verde entregada y ROJO cuando el
   cliente se ha quedado sin la respuesta (alerta real: rojo ganado, no decorativo). */
/* El neutro cálido de la pastilla en reposo NO es --helix-muted: sobre las superficies claras se queda en
   4,4:1 y este texto es pequeño (SC 1.4.3 pide 4,5:1). Neutro propio, medido a 5,9:1 sobre --helix-soft. */
.hlx-deliv--queued    { background: var(--helix-soft); color: #5F594E; }
[data-helix-dark] .hlx-deliv--queued { color: #C9C2B6; }
.hlx-deliv--sending   { background: rgba(37,99,235,0.10);  color: #1D4ED8; }
.hlx-deliv--retrying  { background: rgba(245,158,11,0.14); color: #92400E; }
.hlx-deliv--delivered { background: rgba(22,163,74,0.12);  color: #137638; }
.hlx-deliv--failed    { background: rgba(180,35,24,0.12);  color: #B42318; }
[data-helix-dark] .hlx-deliv--sending   { background: rgba(96,165,250,0.22);  color: #93C5FD; }
[data-helix-dark] .hlx-deliv--retrying  { background: rgba(245,158,11,0.24);  color: #FCD34D; }
[data-helix-dark] .hlx-deliv--delivered { background: rgba(22,163,74,0.26);   color: #86EFAC; }
[data-helix-dark] .hlx-deliv--failed    { background: rgba(248,113,113,0.20); color: #FCA5A5; }

/* PR2 (AXIS-GOV-013) — badges de gobernanza de Axis en el timeline (solo agente): razón de escalado
   (ámbar, coherente con la nota interna) y banda de confianza por nivel. */
.hlx-axis-reason { background: rgba(245,158,11,0.14); color: #92400E; }
.hlx-axis-conf.hlx-conf-baja    { background: rgba(180,35,24,0.12);  color: #B42318; }
.hlx-axis-conf.hlx-conf-media   { background: rgba(245,158,11,0.14); color: #92400E; }
.hlx-axis-conf.hlx-conf-alta    { background: rgba(37,99,235,0.10);  color: #1D4ED8; }
.hlx-axis-conf.hlx-conf-muyalta { background: rgba(22,163,74,0.12);  color: #15803D; }
[data-helix-dark] .hlx-axis-reason { background: rgba(245,158,11,0.24); color: #FCD34D; }
[data-helix-dark] .hlx-axis-conf.hlx-conf-baja    { background: rgba(248,113,113,0.20); color: #FCA5A5; }
[data-helix-dark] .hlx-axis-conf.hlx-conf-media   { background: rgba(245,158,11,0.24); color: #FCD34D; }
[data-helix-dark] .hlx-axis-conf.hlx-conf-alta    { background: rgba(96,165,250,0.22);  color: #93C5FD; }
[data-helix-dark] .hlx-axis-conf.hlx-conf-muyalta { background: rgba(74,222,128,0.20);  color: #86EFAC; }
/* PR2 (AXIS-GOV-013) — AxisIntelligencePanel (sección del panel derecho del ticket). */
.hlx-axis-intel { display: flex; flex-direction: column; gap: 8px; }
.hlx-axis-intel-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-compact); }
.hlx-axis-intel-k { color: var(--helix-muted); font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; flex: 0 0 78px; }
.hlx-axis-intel-v { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.hlx-axis-intel-sources { display: flex; flex-direction: column; gap: 2px; }
.hlx-axis-intel-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-meta); margin-top: 2px; }
.hlx-axis-intel-empty { font-size: var(--fs-compact); margin: 0; }
.hlx-axis-intel-note { font-size: var(--fs-meta); margin: 4px 0 0; }
/* Fila de confianza: la columna de valor apila el badge+% sobre el micro-medidor. */
.hlx-axis-intel-conf { align-items: flex-start; }
.hlx-axis-intel-conf .hlx-axis-intel-k { margin-top: 2px; }
.hlx-axis-intel-conf .hlx-axis-intel-v { flex-direction: column; align-items: stretch; gap: 4px; }
.hlx-axis-intel-conf-head { display: inline-flex; align-items: center; gap: 6px; }
.hlx-axis-result-ok        { background: rgba(22,163,74,0.12);  color: #15803D; }
.hlx-axis-result-escalated { background: rgba(245,158,11,0.14); color: #92400E; }
.hlx-axis-result-error     { background: rgba(180,35,24,0.12);  color: #B42318; }
.hlx-axis-result-noop      { background: var(--helix-border);    color: var(--helix-muted); }
[data-helix-dark] .hlx-axis-result-ok        { background: rgba(74,222,128,0.20);  color: #86EFAC; }
[data-helix-dark] .hlx-axis-result-escalated { background: rgba(245,158,11,0.24);  color: #FCD34D; }
[data-helix-dark] .hlx-axis-result-error     { background: rgba(248,113,113,0.20); color: #FCA5A5; }

/* Historial de Axis en el panel del ticket: una línea por intervención (hora · capacidad · qué hizo). */
.hlx-axis-intel-history { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--helix-border); }
.hlx-axis-hist-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: var(--fs-meta); flex-wrap: wrap; }
.hlx-axis-hist-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.hlx-axis-hist-cap { flex: 1 1 auto; min-width: 0; }
/* PR «Axis actions visibility» (Pass 3): la mayoría de .hlx-axis-draft* se retiraron (la sugerencia
   pendiente del ticket usa ahora la fila promovida .hlx-ax-item--promoted). Se CONSERVAN -badge y -body
   porque los COMPARTE la consola de Axis (Components/Pages/Axis.razor) para su vista de borrador. */
.hlx-axis-draft-badge { font-size: var(--fs-compact); font-weight: 700; color: #92400E;
    display: inline-flex; align-items: center; gap: 4px; }
[data-helix-dark] .hlx-axis-draft-badge { color: #FCD34D; }
.hlx-axis-draft-body { font-size: var(--fs-base, 0.95rem); line-height: var(--lh, 1.5); white-space: pre-wrap;
    max-height: 220px; overflow-y: auto; padding: 10px 12px; border-radius: var(--radius-sm, 8px);
    background: var(--helix-surface, #fff); border: 1px solid var(--helix-border); color: var(--helix-text); }

/* ── PR «Axis actions visibility» ─────────────────────────────────────────────────────────────────
   Spine de acciones de Axis en el hilo, sugerencia PROMOVIDA, banner de procedencia del composer y
   marcas in-situ del panel Detalles. VIOLETA = automático (token --st-new/--st-new-bg); ÁMBAR =
   sugerencia / acción requerida (token --st-pending/--st-pending-bg). Los tokens ya traen su variante
   oscura, así que nodos/pills/chips no necesitan override; solo los hexes de borde/gradiente/tooltip.
   El radio de CONTROL (--helix-radius) es SOLO para botones; tarjetas/nodos/pills llevan su propio radio. */

/* Fila del spine: nodo + tarjeta */
.hlx-ax-item { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; }
.hlx-ax-node { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--st-new-bg); color: var(--st-new); }
.hlx-ax-node .mud-icon-root { font-size: 18px; }
.hlx-ax-node--sug { background: var(--st-pending-bg); color: var(--st-pending); }
/* Inc 1: nodo del aviso NO-happy post-decisión (acción obsoleta / falló al aplicarse) — tono de alerta
   real (--sla-warn), no decorativo (Earned-Red: el rojo de marca queda fuera de esto). */
.hlx-ax-node--warn { background: var(--sla-warn-bg); color: var(--sla-warn); }

.hlx-ax-row { flex: 1 1 auto; min-width: 0; border: 1px solid #DAD3F1; border-radius: 13px;
    background: linear-gradient(180deg, #F8F6FD, #fff); padding: 12px 14px;
    display: flex; flex-direction: column; gap: 6px; }
.hlx-ax-row--sug { border-color: #E4D8B8; background: linear-gradient(180deg, #FCF7EA, #fff);
    box-shadow: 0 0 0 3px rgba(154,106,18,.07); }
.hlx-ax-row--warn { border-color: var(--sla-warn); background: var(--sla-warn-bg); }
/* Densidad acotada al card promovido del hilo (.hlx-ax-item--promoted): NO toca la base .hlx-ax-row
   que también usa ConversationTimeline (filas de acción ejecutada del spine, fuera de este scope). */
.hlx-ax-item--promoted .hlx-ax-row { padding: 10px 12px; gap: 5px; }
/* Card promovido minimizado a una fila única (densidad del hilo): título + pill + botón "Mostrar",
   sin preview/missing/chips/botonera. Altura objetivo ≤48px (1px padding vertical + botón 44px + bordes).
   Selector de 2 clases a propósito: empata en especificidad con .hlx-ax-item--promoted .hlx-ax-row
   de arriba y gana por orden de aparición (si no, esa regla más específica pisaría este padding). */
.hlx-ax-row.hlx-ax-row--min { flex-direction: row; align-items: center; gap: 8px; padding: 1px 10px; }
.hlx-ax-row--min .hlx-ax-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.hlx-ax-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hlx-ax-title { font-size: 13px; font-weight: 700; color: var(--helix-text); }
.hlx-ax-time { margin-left: auto; font-size: var(--fs-meta); white-space: nowrap; }

.hlx-ax-pill { font-size: var(--fs-meta); font-weight: 700; padding: 1px 8px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.hlx-ax-pill--auto { background: var(--st-new-bg); color: var(--st-new); }
.hlx-ax-pill--sug  { background: var(--st-pending-bg); color: var(--st-pending); }
/* Borrador que la conversación dejó atrás: mismo tono de alerta real (--sla-warn) que el aviso
   post-decisión, para que «ya no aplica» se lea como estado y no como una variante decorativa. */
.hlx-ax-pill--stale { background: var(--sla-warn-bg); color: var(--sla-warn); }

/* Motivo de la obsolescencia, dentro de la propia tarjeta y por delante de la botonera. */
.hlx-ax-stale { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-meta);
    color: var(--sla-warn); background: var(--sla-warn-bg); border-radius: 8px; padding: 6px 8px; }
.hlx-ax-stale .mud-icon-root { font-size: 15px; flex: 0 0 auto; }

.hlx-ax-body { font-size: var(--fs-compact); line-height: var(--lh, 1.5); color: var(--helix-text); white-space: pre-line; }
.hlx-ax-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.hlx-ax-conf { font-size: var(--fs-meta); color: var(--helix-muted); font-variant-numeric: tabular-nums; }
.hlx-ax-muted { font-size: var(--fs-meta); color: var(--helix-muted); }

/* Enlace/acción de la fila (ver flujo / ver borrador) */
.hlx-ax-act { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-meta);
    font-weight: 600; color: var(--st-new); text-decoration: none; background: none; border: 0;
    padding: 2px 4px; border-radius: 6px; cursor: pointer; }
.hlx-ax-act .mud-icon-root { font-size: 14px; }
.hlx-ax-act:hover { text-decoration: underline; }
.hlx-ax-act:focus-visible { outline: 2px solid var(--st-new); outline-offset: 2px; }
.hlx-ax-act--disabled { color: var(--helix-muted); cursor: default; opacity: .6; pointer-events: none; }
.hlx-ax-act--disabled:hover { text-decoration: none; }
/* Único control para expandir/colapsar el card promovido (Kit Táctil: hit-area >=44px en el botón,
   no en la fila, para que la fila minimizada se mantenga en ~48px). */
.hlx-ax-act--push { margin-left: auto; flex: none; white-space: nowrap; min-height: 44px; padding: 2px 10px; }

/* Sugerencia promovida: preview + chips de fuentes + acciones */
/* El card es hermano del scroll #hlx-conversation (padding 0 20px), no hijo: replica ese gutter
   horizontal para que el nodo alinee con el margen izquierdo de los mensajes del hilo. */
.hlx-ax-item--promoted { margin: 4px 0 8px; padding: 0 20px; }
.hlx-ax-preview { font-size: var(--fs-base, 0.95rem); line-height: var(--lh, 1.5); white-space: pre-wrap;
    max-height: 220px; overflow-y: auto; padding: 10px 12px; border-radius: 10px;
    background: var(--helix-surface, #fff); border: 1px solid var(--helix-border); color: var(--helix-text); }
/* Card promovido del hilo (AXIS-GOV-030): el preview del BORRADOR pendiente puede ocupar todo el
   alto visible y tapar el mensaje del cliente (feedback Daniel). Clampa a ~7 líneas por defecto con
   fade-out inferior; "Ver más/menos" (botón medido por JS, sin desborde → sin botón) expande SOLO
   el preview, nunca colapsa el card. Escopado a .hlx-ax-row--sug (no a .hlx-ax-item--promoted, que
   también envuelve el aviso .hlx-ax-row--warn de _axisActionNotice más abajo — ese NO debe clamparse,
   pues no tiene medición JS ni botón para expandirlo). Especificidad de clase compuesta gana sobre
   .hlx-ax-preview de arriba (pensado para el panel de revisión), neutralizando aquí su
   overflow-y:auto/max-height fijos. */
.hlx-ax-row--sug .hlx-ax-preview {
    margin: 0; position: relative; overflow: hidden;
    max-height: calc(var(--lh, 1.5) * 4em);
    transition: max-height .2s var(--ease-out, ease);
}
.hlx-ax-row--sug .hlx-ax-preview--expanded { max-height: none; overflow: visible; }
.hlx-ax-row--sug .hlx-ax-preview--fade::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em;
    background: linear-gradient(180deg, transparent, var(--helix-surface, #fff));
    pointer-events: none;
}
.hlx-ax-row--sug .hlx-ax-preview-toggle { margin: 6px 0 0; }
@media (prefers-reduced-motion: reduce) {
    .hlx-ax-row--sug .hlx-ax-preview { transition: none; }
}
/* Inc 1 (RequestInfo): campos requeridos que faltan como LISTA estructurada, no prosa. Mismo contenedor
   visual que .hlx-ax-preview (tarjeta clara + borde), con viñetas nativas en vez de párrafo. */
.hlx-ax-missing-list { margin: 0; padding: 10px 12px 10px 30px; border-radius: 10px;
    background: var(--helix-surface, #fff); border: 1px solid var(--helix-border);
    font-size: var(--fs-base, 0.95rem); line-height: var(--lh, 1.5); color: var(--helix-text); }
.hlx-ax-missing-list li { margin: 2px 0; }
/* Idioma del cliente (petición Daniel 2026-07-17): el Body real (arriba, .hlx-ax-preview /
   .hlx-axis-draft-body) es lo que se envía al cliente; esta lista pasa a ser SOLO contexto
   secundario para el aprobador (qué campos ancló el veredicto determinista) — caption + lista
   compacta, sin el tratamiento de tarjeta del preview principal. */
.hlx-ax-missing-caption { font-size: var(--fs-meta); font-weight: 600; color: var(--helix-muted);
    margin: 8px 0 4px; }
.hlx-ax-missing-list--secondary { background: transparent; border: 0; padding: 0 0 0 20px; }
/* Card promovido (TicketDetalle): la lista de campos faltantes se aplana a una línea con ellipsis
   en vez de caption + <ul> — misma información, sin ocupar alto vertical del hilo. El title="" lleva
   la lista completa para cuando trunca. */
.hlx-ax-missing-inline { font-size: var(--fs-meta); color: var(--helix-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hlx-ax-missing-cap { font-weight: 600; color: var(--helix-muted); }
.hlx-ax-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hlx-ax-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-meta);
    padding: 2px 8px; border-radius: 6px; background: var(--st-new-bg); color: var(--st-new);
    text-decoration: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlx-ax-chip .mud-icon-root { font-size: 13px; flex: none; }
.hlx-ax-chip:hover { text-decoration: underline; }
.hlx-ax-chip:focus-visible { outline: 2px solid var(--st-new); outline-offset: 2px; }
/* BUG-20260630-025: evidencia sin slug (auditada antes del fix) se renderiza sin enlace — sin el
   color "accionable" ni el hover subrayado, para no aparentar ser clicable (no-affordance). */
.hlx-ax-chip--nolink { background: var(--helix-border); color: var(--helix-muted); cursor: default; }
.hlx-ax-chip--nolink:hover { text-decoration: none; }

.hlx-ax-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 0; }
.hlx-ax-btn { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-compact);
    font-weight: 600; padding: 5px 12px; border-radius: var(--helix-radius); cursor: pointer;
    border: 1px solid transparent; transition: background .15s var(--ease-out, ease), box-shadow .15s var(--ease-out, ease); }
.hlx-ax-btn .mud-icon-root { font-size: 15px; }
.hlx-ax-btn--primary { background: var(--st-new); color: #fff; }
.hlx-ax-btn--primary:hover { background: #4A3D96; }
.hlx-ax-btn--outline { background: transparent; border-color: #C9BEEC; color: var(--st-new); }
.hlx-ax-btn--outline:hover { background: var(--st-new-bg); }
.hlx-ax-btn--ghost { background: transparent; color: var(--helix-muted); }
.hlx-ax-btn--ghost:hover { background: rgba(0,0,0,.05); }
.hlx-ax-btn:focus-visible { outline: 2px solid var(--st-new); outline-offset: 2px; }
.hlx-ax-btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Banner de procedencia del composer (borde inferior unido al editor) */
.hlx-ax-cbanner { display: flex; align-items: center; gap: 8px; padding: 10px 13px;
    border: 1px solid #E4D8B8; border-bottom: 0; border-radius: 12px 12px 0 0;
    background: linear-gradient(180deg, #FBF4E4, #FCF9F1); }
.hlx-ax-cbanner-ico.mud-icon-root { font-size: 16px; color: var(--st-pending); }
.hlx-ax-cbanner-txt { font-size: var(--fs-compact); font-weight: 700; color: var(--st-pending); }
.hlx-ax-cbanner-hint { margin-left: auto; font-size: var(--fs-meta); color: var(--helix-muted); }
.hlx-composer-shell--axis .helix-mdeditor { border-top-left-radius: 0; border-top-right-radius: 0; }
/* Con el banner de Axis, el menú «insertar variable» (absoluto, top:5px contra el shell) caería sobre el
   banner: se baja para quedar sobre la toolbar del editor, ya desplazada hacia abajo por el banner. En
   pantallas estrechas .hlx-editor-tools es position:static (media query), así que este offset se ignora. */
.hlx-composer-shell--axis .hlx-editor-tools { top: 46px; }

/* ── PR-3B: revisión pre-envío (modo Suggest) — panel in-composer, cuenta atrás, evaluando ──────
   Acento SIEMPRE la familia violeta --st-new (NUNCA el rojo del envío). Tokens locales derivados del
   handoff que no existen como variable global (bordes/sombra violeta y variante «dato incorrecto»). */
/* .helix-reply es el contenedor SIEMPRE presente del composer (envuelve modes/panel/shell/banner/nota),
   así que los tokens locales del panel se resuelven con seguridad en todos sus descendientes. */
.helix-reply {
    --ax-border: #C9BEEC;                 /* borde outline violeta del panel/banner */
    --ax-soft:   #DAD3F1;                  /* borde suave */
    --ax-warn:   #7A3E90; --ax-warn-ico: #8F5AA8; --ax-warn-bg: #F3E9F5;  /* «posible dato incorrecto» */
    --ax-shadow: 0 1px 2px rgba(74,61,150,.06), 0 8px 24px rgba(74,61,150,.10);
}

.hlx-ax-panel {
    margin: 14px 0 0; border: 1px solid var(--ax-border); border-radius: 14px;
    background: var(--helix-surface, #fff); box-shadow: var(--ax-shadow); overflow: hidden;
    animation: axpanelin .24s var(--ease-out);
}
@keyframes axpanelin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hlx-ax-panel-head { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px 0; flex-wrap: wrap; }
.hlx-ax-panel-node { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--st-new-bg); color: var(--st-new); }
.hlx-ax-panel-node .mud-icon-root { font-size: 17px; }
.hlx-ax-panel-pill { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-meta);
    font-weight: 700; color: var(--st-new); background: var(--st-new-bg); border-radius: 999px; padding: 2px 9px 2px 8px; }
.hlx-ax-star { display: inline-block; }
.hlx-ax-panel-title { font-size: 14px; font-weight: 700; color: var(--helix-ink, var(--helix-text)); }
.hlx-ax-panel-conf { margin-left: auto; font-family: var(--helix-font-mono, monospace); font-size: var(--fs-meta);
    color: var(--helix-muted); font-variant-numeric: tabular-nums; }

.hlx-ax-findings { list-style: none; margin: 0; padding: 9px 15px 0 56px; display: flex; flex-direction: column; gap: 9px; }
.hlx-ax-finding { display: flex; gap: 9px; align-items: flex-start; }
.hlx-ax-finding-ico.mud-icon-root { flex: none; font-size: 15px; margin-top: 1px; }
.hlx-ax-finding-chip { flex: none; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.hlx-ax-finding-txt { font-size: var(--fs-compact); line-height: 1.5; color: var(--helix-ink, var(--helix-text)); }
.hlx-ax-finding--info  .hlx-ax-finding-ico.mud-icon-root { color: var(--st-new); }
.hlx-ax-finding--info  .hlx-ax-finding-chip { background: var(--st-new-bg); color: var(--st-new); }
.hlx-ax-finding--warn  .hlx-ax-finding-ico.mud-icon-root { color: var(--ax-warn-ico); }
.hlx-ax-finding--warn  .hlx-ax-finding-chip { background: var(--ax-warn-bg); color: var(--ax-warn); }

.hlx-ax-preview-toggle { display: inline-flex; align-items: center; gap: 4px; margin: 11px 15px 0 56px;
    background: none; border: 0; padding: 2px 4px; border-radius: 6px; cursor: pointer;
    font-size: var(--fs-meta); font-weight: 600; color: var(--st-new); }
.hlx-ax-preview-toggle:hover { text-decoration: underline; }
.hlx-ax-preview-toggle:focus-visible { outline: 2px solid var(--st-new); outline-offset: 2px; }
.hlx-ax-preview-chev.mud-icon-root { font-size: 15px; transition: transform .18s var(--ease-out); }
.hlx-ax-preview-toggle.open .hlx-ax-preview-chev.mud-icon-root { transform: rotate(90deg); }
.hlx-ax-preview { margin: 8px 15px 0 56px; border: 1px solid var(--helix-border); border-radius: 10px;
    background: var(--helix-surface, #fff); padding: 12px 14px; font-size: 14px; line-height: 1.6;
    white-space: pre-wrap; max-height: 224px; overflow-y: auto; color: var(--helix-ink, var(--helix-text)); }

.hlx-ax-panel-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 15px 13px 56px; }
/* Botones táctiles (reutiliza .hlx-ax-btn de arriba); pulsado y touch-targets del Kit Táctil. */
.hlx-ax-panel-actions .hlx-ax-btn { min-height: 34px; }
.hlx-ax-panel-actions .hlx-ax-btn:active { transform: translateY(2px); }

.hlx-ax-countdown { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }
.hlx-ax-cd-ring { position: relative; width: 24px; height: 24px; display: inline-flex; }
.hlx-ax-cd-ring svg { display: block; }
.hlx-ax-cd-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--helix-font-mono, monospace); font-size: 10px; font-weight: 600; color: var(--st-new); }
.hlx-ax-cd-pause { width: 22px; height: 22px; border: 1.5px solid var(--helix-border); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; color: var(--helix-muted); }
.hlx-ax-cd-pause .mud-icon-root { font-size: 13px; }
.hlx-ax-cd-txt { font-size: var(--fs-compact); font-weight: 500; color: var(--helix-muted); }

.hlx-ax-panel-bar { height: 3px; background: var(--helix-panel-2, #F1ECE2); }
.hlx-ax-panel-bar-fill { display: block; height: 100%; background: var(--st-new); transition: width 1s linear; }

/* EVALUANDO: editor atenuado sin eventos + spinner en el botón «Enviando…» (sin layout shift). */
.hlx-composer-shell.hlx-composer-evaluating .helix-mdeditor { opacity: .5; }
.hlx-ax-evaluating { position: absolute; inset: 0; background: rgba(255,255,255,.35); pointer-events: none; z-index: 3; }
.hlx-ax-sending { display: inline-flex; align-items: center; gap: 7px; }
.hlx-ax-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5);
    border-top-color: #fff; animation: hlx-ax-spin .8s linear infinite; }
@keyframes hlx-ax-spin { to { transform: rotate(360deg); } }

/* Nota al pie del composer (solo Suggest + axis.view). */
.hlx-ax-composer-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0;
    font-size: 11px; color: var(--helix-muted); }
.hlx-ax-composer-note-ico.mud-icon-root { font-size: 12px; color: var(--helix-subtle); }

/* reduced-motion: sin entrada del panel, sin barra ambiental, sin transición del anillo ni spin.
   La cuenta atrás sigue siendo el número (texto), solo se quita el movimiento. */
@media (prefers-reduced-motion: reduce) {
    .hlx-ax-panel { animation: none; }
    .hlx-ax-panel-bar { display: none; }
    .hlx-ax-cd-ring svg circle { transition: none !important; }
    .hlx-ax-preview-chev.mud-icon-root { transition: none; }
    .hlx-ax-panel-actions .hlx-ax-btn:active { transform: none; }
    /* EVALUANDO sin movimiento: el aro giratorio se sustituye por TRES PUNTOS ESTÁTICOS (slice §3.4). */
    .hlx-ax-spinner { width: auto; height: auto; border: 0; border-radius: 0; animation: none;
        display: inline-flex; align-items: center; }
    .hlx-ax-spinner::before { content: "•••"; color: #fff; letter-spacing: 1px; line-height: 1; }
}

/* Marca in-situ del panel Detalles */
.hlx-ax-insitu { background: #F7F5FD; box-shadow: inset 0 0 0 1px rgba(91,75,179,.16); border-radius: 8px; }
.hlx-ax-flash { animation: axsettle 1.6s var(--ease-out, ease-out); }
.hlx-ax-hdr-pill { font-size: var(--fs-meta); font-weight: 700; padding: 1px 7px; border-radius: 999px;
    background: var(--st-new-bg); color: var(--st-new); margin-left: auto; }
.hlx-ax-mark { position: relative; display: inline-flex; align-items: center; cursor: help; margin-right: 2px; }
.hlx-ax-mark-ico.mud-icon-root { font-size: 14px; color: var(--st-new); }
.hlx-ax-mark:focus-visible { outline: 2px solid var(--st-new); outline-offset: 2px; border-radius: 6px; }

/* Tooltip antes→después. Va dentro de un MudPopover (capa de popovers de MudBlazor) para ESCAPAR del
   recorte de .hlx-prop-v (overflow:hidden) / .helix-ctx-panel (overflow:auto). MudPopover posiciona y
   muestra/oculta según Open (hover + foco); aquí solo damos el aspecto de la burbuja oscura. */
.hlx-ax-tip-pop.mud-popover { background: transparent; box-shadow: none; overflow: visible; }
.hlx-ax-tip { min-width: 200px; max-width: 260px; margin-top: 4px; padding: 10px 12px; border-radius: 10px;
    background: #2B2547; color: #EDEAFB; box-shadow: 0 8px 24px rgba(0,0,0,.28);
    display: flex; flex-direction: column; gap: 6px; }
.hlx-ax-tip-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #B9AEEC; }
.hlx-ax-tip-diff { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-meta); }
.hlx-ax-tip-old { text-decoration: line-through; color: #9A93C9; }
.hlx-ax-tip-new { font-weight: 700; color: #fff; }
.hlx-ax-tip-arrow.mud-icon-root { font-size: 13px; color: #9A93C9; }
.hlx-ax-tip-acts { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.hlx-ax-tip-btn { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-meta);
    font-weight: 600; padding: 3px 8px; border-radius: var(--helix-radius); cursor: pointer;
    background: rgba(255,255,255,.12); color: #EDEAFB; border: 0; }
.hlx-ax-tip-btn .mud-icon-root { font-size: 13px; }
.hlx-ax-tip-btn:hover { background: rgba(255,255,255,.2); }
.hlx-ax-tip-btn:focus-visible { outline: 2px solid #B9AEEC; outline-offset: 1px; }

/* Acción deshabilitada pero FOCALIZABLE (carve-out «Deshacer no disponible todavía»): a diferencia de
   .hlx-ax-act--disabled NO lleva pointer-events:none, para que conserve el foco y el title/sr-only se
   anuncien. aria-disabled comunica el estado (no se usa `disabled` nativo, que ocultaría el motivo). */
.hlx-ax-off { opacity: .55; cursor: default; }
.hlx-ax-act.hlx-ax-off:hover { text-decoration: none; }
.hlx-ax-tip-btn.hlx-ax-off:hover { background: rgba(255,255,255,.12); }

/* Solo lectores de pantalla: expone el motivo real de una acción aria-disabled sin ruido visual. */
.hlx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

@keyframes axsettle{0%{box-shadow:0 0 0 2px rgba(91,75,179,.55),0 0 20px 4px rgba(91,75,179,.4);background:#EAE4FA}70%{background:#F1EDFB}100%{box-shadow:0 0 0 1px rgba(91,75,179,.16);background:#F7F5FD}}
@media (prefers-reduced-motion:reduce){ .hlx-ax-flash{ animation:none !important; } }

/* PR-1 (axis-timeline-routing) — pestaña «Actividad de Axis»: log interno de baja densidad para las filas
   Auto/advisory + Auto/artefacto que antes saturaban el hilo como tarjetas grandes (.hlx-ax-item/.hlx-ax-row,
   arriba). Prefijo propio (.hlx-axlog-*) porque es una superficie distinta: filas compactas, expandibles. */
.hlx-axlog-wrap { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.hlx-axlog-banner {
    background: var(--st-new-bg); border: 1px solid #DAD3F1; border-radius: 10px;
    padding: 10px 13px; font-size: var(--fs-meta); line-height: 1.5; color: var(--helix-text);
}
.hlx-axlog-card { background: #fff; border: 1px solid var(--helix-border); border-radius: 14px; overflow: hidden; }
.hlx-axlog-row-wrap { border-bottom: 1px solid var(--helix-line); }
.hlx-axlog-row-wrap:last-child { border-bottom: 0; }
.hlx-axlog-row {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; min-height: 44px;
    border: 0; background: transparent; cursor: pointer; padding: 10px 14px;
    font: inherit; color: inherit; transition: background .12s;
}
.hlx-axlog-row:hover { background: var(--helix-panel-2); }
.hlx-axlog-row:focus-visible { outline: 2px solid var(--st-new); outline-offset: -2px; }
.hlx-axlog-time {
    flex: 0 0 auto; min-width: 38px; font-family: var(--helix-font-mono, monospace);
    font-size: 11px; color: var(--helix-muted);
}
.hlx-axlog-chip {
    flex: 0 0 auto; font-family: var(--helix-font-mono, monospace); font-size: 10.5px; font-weight: 600;
    color: var(--st-new); background: var(--st-new-bg); border-radius: 6px; padding: 2px 7px;
}
.hlx-axlog-summary {
    flex: 1 1 auto; min-width: 0; font-size: var(--fs-compact); color: var(--helix-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hlx-axlog-chevron.mud-icon-root { flex: 0 0 auto; font-size: 16px; color: var(--helix-subtle); transition: transform .18s var(--ease-out); }
.hlx-axlog-chevron--open.mud-icon-root { transform: rotate(90deg); }
.hlx-axlog-detail {
    margin: 0 14px 12px 64px; background: var(--helix-panel-2); border: 1px solid var(--helix-line);
    border-radius: 10px; padding: 10px 12px; font-size: var(--fs-compact); line-height: 1.55;
}
.hlx-axlog-detail-body { white-space: pre-line; color: var(--helix-text); }
.hlx-axlog-detail-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.hlx-axlog-conf { font-size: var(--fs-meta); color: var(--helix-muted); font-variant-numeric: tabular-nums; }
.hlx-axlog-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-meta); font-weight: 600; color: var(--st-new); }
.hlx-axlog-link .mud-icon-root { font-size: 14px; }
.hlx-axlog-link:hover { text-decoration: underline; }
.hlx-axlog-link:focus-visible { outline: 2px solid var(--st-new); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .hlx-axlog-chevron.mud-icon-root { transition: none; }
}
[data-helix-dark] .hlx-axlog-banner { border-color: rgba(91,75,179,.42); background: linear-gradient(180deg, rgba(91,75,179,.14), rgba(91,75,179,.06)); }
[data-helix-dark] .hlx-axlog-card { background: var(--helix-surface); border-color: var(--helix-border); }
[data-helix-dark] .hlx-axlog-detail { background: var(--helix-panel-2); border-color: var(--helix-line, var(--helix-border)); }

/* Dark theme — solo superficies con hexes fijos (los tokens --st-* ya adaptan nodos/pills/chips). */
[data-helix-dark] .hlx-ax-row { border-color: rgba(91,75,179,.42); background: linear-gradient(180deg, rgba(91,75,179,.14), transparent); }
[data-helix-dark] .hlx-ax-row--sug { border-color: rgba(245,158,11,.42); background: linear-gradient(180deg, rgba(245,158,11,.12), transparent); box-shadow: 0 0 0 3px rgba(245,158,11,.08); }
[data-helix-dark] .hlx-ax-preview { background: var(--helix-surface); border-color: var(--helix-line, var(--helix-border)); }
[data-helix-dark] .hlx-ax-missing-list { background: var(--helix-surface); border-color: var(--helix-line, var(--helix-border)); }
/* Contexto secundario (lista de campos bajo el Body real): se mantiene transparente también en dark
   (misma especificidad que la regla de arriba — gana por orden de aparición). */
[data-helix-dark] .hlx-ax-missing-list--secondary { background: transparent; border-color: transparent; }
[data-helix-dark] .hlx-ax-btn--primary { background: var(--st-new); color: #1A1726; }
[data-helix-dark] .hlx-ax-btn--primary:hover { background: #BBAEE8; }
[data-helix-dark] .hlx-ax-btn--outline { border-color: rgba(203,194,242,.5); }
[data-helix-dark] .hlx-ax-btn--ghost:hover { background: rgba(255,255,255,.08); }
[data-helix-dark] .hlx-ax-cbanner { border-color: rgba(245,158,11,.42); background: linear-gradient(180deg, rgba(245,158,11,.14), rgba(245,158,11,.06)); }
[data-helix-dark] .hlx-ax-insitu { background: rgba(91,75,179,.16); box-shadow: inset 0 0 0 1px rgba(203,194,242,.28); }
[data-helix-dark] .hlx-ax-tip { background: #1B1830; color: #E7E3FA; box-shadow: 0 8px 24px rgba(0,0,0,.5); }

/* F3 (supervisión) — controles 👍/👎 de revisión de Axis (manager/admin), compactos e inline. */
.hlx-ai-review { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; }
.hlx-ai-review-btn.mud-icon-button { padding: 2px; height: 24px; width: 24px; }
.hlx-ai-review-btn .mud-icon-root { font-size: 1rem; }

/* Medidor de proporción compartido — vocabulario único de barra para los reportes de Axis
   («Asistencia de Axis»: tasas y razones de escalado) y el micro-medidor de confianza del
   AxisIntelligencePanel. Sustituye el markup de barra inline que estaba duplicado en 3 sitios.
   Pista (track) tonal cálido + relleno pill; sin animar `width` (no se anima layout). */
.hlx-meter { display: block; height: 6px; background: var(--helix-border); border-radius: 999px; overflow: hidden; }
.hlx-meter-fill { display: block; height: 100%; border-radius: inherit; }
/* Fila etiqueta + valor sobre el medidor (reemplaza .d-flex inline con font-size hardcodeado). */
.hlx-meter-row { margin-bottom: 12px; }
.hlx-meter-row:last-child { margin-bottom: 0; }
.hlx-meter-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: var(--fs-meta); margin-bottom: 5px; min-width: 0;
}
.hlx-meter-head .hlx-meter-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlx-meter-head .hlx-meter-val { font-weight: var(--fw-semibold, 600); flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* Context panel agente derecho — diseño de cards sobre fondo suave */
/* Panel de contexto BLANCO con cards CREMA (como el prototipo aprobado y coherente
   con los otros paneles flotantes blancos). Antes estaba invertido (panel crema/cards blancas). */
.helix-ctx-panel { overflow-y: auto; overflow-x: hidden; border-left: 1px solid var(--helix-border); background: var(--helix-surface); padding: 0 12px 12px; }
.helix-ctx-panel .helix-ctx-section {
    background: var(--helix-panel-2); border: 1px solid var(--helix-border);
    border-radius: 14px; margin-top: 12px; padding: 16px;
    box-shadow: 0 1px 2px rgba(70, 60, 45, 0.05);
    border-bottom: 1px solid var(--helix-border);
}
/* v2.1: SLA vencido = tarjeta roja CONTENIDA (no tiñe la pantalla), solo cuando _ticket.SlaBreached. */
.helix-ctx-panel .helix-ctx-section.hlx-sla-breach {
    background: var(--sla-danger-bg); border-color: var(--sla-danger-border);
}
/* v2.1 (Iteración 2): propiedades como filas compactas leer/editar-inline (no selects de formulario). */
.hlx-props { display: flex; flex-direction: column; }
.hlx-props > * + * { border-top: 1px solid var(--helix-line); }
.hlx-prop {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 38px; padding: 7px 8px; border-radius: 8px;
}
.hlx-prop-l { font-size: var(--fs-meta); color: var(--helix-muted); flex: 0 0 auto; }
.hlx-prop-v {
    font-size: var(--fs-compact); font-weight: var(--fw-bold); color: var(--helix-text);
    display: inline-flex; align-items: center; gap: 6px; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
}
.hlx-prop--edit { cursor: pointer; transition: background .12s var(--ease-out); }
.hlx-prop--edit:hover { background: var(--helix-panel-2); }
.hlx-prop--edit:active { background: var(--helix-canvas); }
/* fila en edición: la etiqueta a la izquierda y el select ocupa el resto */
.hlx-prop--editing { align-items: center; gap: 12px; }
.hlx-prop--editing .hlx-prop-select { flex: 1 1 auto; min-width: 0; }
.hlx-prop-caret { font-size: var(--fs-lead) !important; color: var(--helix-subtle); flex: 0 0 auto; }
/* v2.1: campos personalizados plegables (ficha ejecutiva, no formulario). Chip plegado. */
.hlx-cf-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    margin-top: 4px; padding: 9px 11px; cursor: pointer;
    border: 1px dashed var(--helix-border); border-radius: 10px;
    background: var(--helix-panel-2); color: var(--helix-muted);
    font: inherit; font-size: var(--fs-meta); font-weight: 600; text-align: left;
    transition: border-color .12s var(--ease-out), color .12s var(--ease-out);
}
.hlx-cf-toggle:hover { border-color: var(--helix-muted); color: var(--helix-text); }
.hlx-cf-toggle b { color: var(--helix-text); font-weight: 700; }
.hlx-cf-toggle .mud-icon-root { color: var(--helix-subtle); }
/* Context panel secondary tabs */
.helix-ctx-tabs {
    display: flex; border-bottom: 1px solid var(--helix-border);
    background: var(--helix-surface); flex-shrink: 0;
    margin: 0 -12px; padding: 0 12px;
    position: sticky; top: 0; z-index: 2;
}
.helix-ctx-tab {
    flex: 1; padding: 10px 4px; background: transparent; border: 0;
    font-size: var(--fs-meta); font-weight: 600; color: var(--helix-muted);
    cursor: pointer; border-bottom: 2px solid transparent;
    margin-bottom: -1px; transition: color .15s, border-color .15s;
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.helix-ctx-tab:hover { color: var(--helix-text); }
.helix-ctx-tab.active { color: var(--helix-red); border-bottom-color: var(--helix-red); }
.helix-beta-chip {
    font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
    background: rgba(206,0,0,0.10); color: var(--helix-red);
    padding: 1px 5px; border-radius: 6px; vertical-align: middle;
    flex-shrink: 0; align-self: center; white-space: nowrap;
}
/* Profile link */
.helix-profile-link {
    font-size: var(--fs-meta); font-weight: 600; color: var(--helix-red);
    text-decoration: none; display: block; margin-top: 8px;
}
.helix-profile-link:hover { text-decoration: underline; }
/* Botón de subida (label + InputFile oculto) */
.hlx-upload-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px; border-radius: 10px; cursor: pointer;
    background: var(--helix-red); color: #fff; font-size: var(--fs-body); font-weight: 600;
    transition: filter 130ms; user-select: none;
}
.hlx-upload-btn:hover { filter: brightness(1.08); }
.hlx-upload-btn.compact {
    background: var(--helix-surface); color: var(--helix-text); border: 1px solid var(--helix-border);
    padding: 5px 12px; font-size: var(--fs-compact);
}
.hlx-upload-btn.compact:hover { border-color: rgba(206,0,0,0.35); color: var(--helix-red); filter: none; }
.hlx-upload-btn.disabled { opacity: .55; pointer-events: none; }
.hlx-upload-btn input[type="file"] { display: none; }
/* KB bulk import: el <label> lleva tabindex="0" (foco de teclado sobre el activador, ya que el
   <input type="file"> real va oculto); mismo anillo rojo de foco del resto del Kit Táctil. */
.hlx-upload-btn:focus-visible {
    outline: 3px solid var(--helix-focus-ring); outline-offset: 2px;
}
/* Variante con objetivo táctil ≥44px (Kit Táctil): usada donde el activador es la única acción visible
   del bloque (p. ej. el drawer de importación masiva de KB), a diferencia de .compact (icono pequeño
   junto a más contexto en una fila ya alta, como en Usuarios.razor). */
.hlx-upload-btn.hlx-upload-btn--target44 { min-height: 44px; }
/* Avatar con foto / iniciales — borde para fotos blancas/transparentes */
.hlx-avatar-photo {
    border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block;
    border: 2px solid var(--helix-border); background: var(--helix-surface);
    box-sizing: border-box;
}
.hlx-avatar-initials {
    border-radius: 50%; color: #fff; font-weight: 700; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: 0.3px; user-select: none;
    border: 2px solid rgba(255,255,255,.35); box-sizing: border-box;
}
/* Avatar en capas: iniciales (base) + foto encima; si la foto falla, quedan las iniciales. */
.hlx-avatar-stack { position: relative; display: inline-flex; flex-shrink: 0; border-radius: 50%; }
.hlx-avatar-stack .hlx-avatar-initials { position: absolute; inset: 0; }
/* G13 — indicador de disponibilidad del agente */
.hlx-avatar-wrap { position: relative; display: inline-flex; }
.hlx-avail-dot {
    position: absolute; right: -1px; bottom: -1px;
    width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid #fff; box-sizing: border-box; box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
/* Punto en línea (selector del menú / item de agente): sin posicionamiento absoluto */
.hlx-avail-dot--inline {
    position: static; width: 9px; height: 9px; flex-shrink: 0;
    border-width: 1px; box-shadow: none; display: inline-block;
}

/* Fase 14 — tabla pivote de Reportes */
.hlx-pivot { border-collapse: collapse; width: 100%; font-size: var(--fs-meta); }
.hlx-pivot th, .hlx-pivot td {
    border: 1px solid var(--helix-border); padding: 5px 8px; text-align: right; white-space: nowrap;
}
.hlx-pivot thead th {
    background: #f8fafc; font-weight: 700; text-align: center; color: var(--helix-ink);
    position: sticky; top: 0; z-index: 1;
}
.hlx-pivot tbody th[scope="row"], .hlx-pivot-corner {
    text-align: left; font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.hlx-pivot .hlx-pivot-total { font-weight: 700; background: #f1f5f9; }
.hlx-pivot tfoot th, .hlx-pivot tfoot td { border-top: 2px solid var(--helix-muted); }

/* Perfil de cliente (backoffice) */
.hlx-client-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
@media (max-width: 800px) { .hlx-client-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hlx-client-stat {
    background: var(--helix-soft); border: 1px solid var(--helix-border);
    border-radius: 12px; padding: 10px 14px;
    display: flex; flex-direction: column; gap: 2px;
}
.hlx-client-stat span   { font-size: var(--fs-meta); font-weight: 600; color: var(--helix-muted); text-transform: uppercase; letter-spacing: .4px; }
.hlx-client-stat strong { font-size: 17px; font-weight: 700; color: var(--helix-text); }
/* Asunto clicable en el panel de previsualización */
.hlx-preview-subject { cursor: pointer; }
.hlx-preview-subject:hover { color: var(--helix-red); text-decoration: underline; }
/* Tipografía Inter definida en HelixTheme.Typography (sin overrides CSS) */
/* Decisión de diseño: botones sin uppercase en toda la app */
.mud-button-root { text-transform: none !important; letter-spacing: 0 !important; }

/* ── «Kit Táctil» · Botones — hundido táctil (PR 3) ──────────────────────────
   Los botones de texto/filled/outlined llevan un borde inferior sólido de 2px
   (NO sombra flotante) y radio de control 9px; al pulsar (:active) «bajan»
   --helix-press-y y el borde desaparece. El press aplica también a los icon-buttons
   (heredan .mud-button-root:active), pero el radio 9px NO (siguen redondos). El
   fantasma/texto no lleva hundido, solo tinte en hover. */
.mud-button-filled,
.mud-button-outlined,
.mud-button-text {
    border-radius: var(--helix-radius);
    transition: transform .1s var(--ease-out), box-shadow .1s var(--ease-out);
}
.mud-button-filled { box-shadow: 0 2px 0 var(--helix-sink-2); }
.mud-button-filled.mud-button-filled-primary { box-shadow: 0 2px 0 var(--helix-sink); }
.mud-button-outlined { box-shadow: 0 2px 0 var(--helix-sink-2); }
.mud-button-root:active { transform: translateY(var(--helix-press-y)); box-shadow: 0 0 0 rgba(0,0,0,0); }
/* Fantasma/texto: sin hundido, solo tinte en hover */
.mud-button-text { box-shadow: none; }
.mud-button-text:hover { background: var(--helix-panel-2); }

/* ── Ripple de MudBlazor suprimido globalmente (Motion Step 2 · PR 1) ─────────
   Cada pulsación producía DOS respuestas: el ripple Material Y el hundido táctil
   de «Kit Táctil» (.mud-button-root:active, arriba) → doble feedback, ruido en el
   camino crítico del agente (responder/cambiar estado). El hundido queda como
   ÚNICA respuesta de pulsado.
   MudBlazor 9.5.0 NO expone un flag global de ripple (MudGlobal solo tiene
   defaults de menú/tooltip; `Ripple` es por-componente, default true), así que se
   anula por CSS — global y a prueba de futuro (cubre todo componente Mud).
   Seguro contra fugas de DOM: el span .mud-ripple-effect lo elimina un setTimeout
   del propio MudBlazor (no un transitionend), así que display:none no deja nodos
   huérfanos acumulándose por clic. */
.mud-ripple-effect { display: none !important; }

/* Controles cuyo ÚNICO feedback de pulsado era el ripple y que NO heredan
   .mud-button-root (nav-links, ítems de lista/menú clicables): reciben el mismo
   --press del sistema. Bajo prefers-reduced-motion, --press ya es `none` (:root). */
.mud-nav-link:not(.mud-nav-link-disabled):active,
.mud-list-item-clickable:active { transform: var(--press); }
/* Deshabilitado: sin hundido ni desplazamiento — la acción no está disponible, no debe
   parecer táctil/activa (el hundido rojo del primario deshabilitado era engañoso). */
.mud-button-filled:disabled,   .mud-button-filled.mud-disabled,
.mud-button-outlined:disabled, .mud-button-outlined.mud-disabled,
.mud-button-text:disabled,     .mud-button-text.mud-disabled { box-shadow: none; transform: none; }
/* Filas clave-valor (panel contextual) */
.hlx-kv-rows { display: flex; flex-direction: column; }
.hlx-kv-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 6px 0; border-bottom: 1px solid rgba(15, 23, 42, .05); font-size: var(--fs-compact);
}
.hlx-kv-row:last-child { border-bottom: 0; }
.hlx-kv-row > span { color: var(--helix-muted); }
.hlx-kv-row > strong { font-weight: 600; color: var(--helix-text); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Detalle SLA: objetivo / transcurrido */
.hlx-sla-detail {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 4px; font-size: var(--fs-meta); color: var(--helix-muted);
}
.hlx-sla-detail b { font-weight: 600; color: var(--helix-text); }
/* G05: indicador de SLA en pausa (ticket esperando al cliente). */
.hlx-sla-paused {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: var(--fs-meta); font-weight: var(--fw-bold); line-height: 1.4;
    color: #B54708; background: rgba(217, 119, 6, 0.12);
    border: 1px solid rgba(217, 119, 6, 0.30);
    border-radius: 6px; padding: 1px 7px;
    white-space: nowrap; width: fit-content; flex-shrink: 0;
}
.hlx-sla-paused-note {
    margin-top: 6px; font-size: var(--fs-meta); line-height: 1.45;
    color: #B54708; background: rgba(217, 119, 6, 0.08);
    border-radius: 6px; padding: 5px 8px;
}
/* Tickets recientes del cliente (panel contextual) */
.helix-recent-tickets { display: flex; flex-direction: column; gap: 2px; }
/* G07: fila de ticket vinculado (etiqueta de relación + ticket + desvincular). */
.hlx-linked-row { display: flex; align-items: center; gap: 4px; }
/* La X (desvincular) nunca se solapa con el pill de estado: no se comprime y queda a la derecha. */
.hlx-linked-row > .mud-icon-button { flex-shrink: 0; }
.hlx-linked-row .helix-recent-item { min-width: 0; }
.hlx-linked-row .helix-badge-sm { flex-shrink: 0; }
.hlx-link-rel {
    flex-shrink: 0; font-size: var(--fs-meta); font-weight: 700; letter-spacing: .2px;
    text-transform: uppercase; color: var(--helix-muted); margin-right: 4px;
}
.helix-recent-title {
    font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; color: var(--helix-muted); margin-bottom: 2px;
}
.helix-recent-item {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 6px; border-radius: 6px; text-decoration: none;
    color: inherit; min-width: 0;
}
.helix-recent-item:hover { background: var(--helix-bg); }
.helix-recent-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.helix-recent-ref {
    font-size: var(--fs-meta); font-weight: 600; color: var(--helix-muted); flex-shrink: 0;
}
.helix-recent-subject {
    font-size: var(--fs-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1 1 auto; min-width: 0;
}
/* IA placeholder */
.helix-ia-placeholder {
    display: flex; flex-direction: column; align-items: center;
    padding: 24px 16px; text-align: center;
}
.helix-ia-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: rgba(206,0,0,0.07); display: flex;
    align-items: center; justify-content: center; margin-bottom: 4px;
}
.helix-coming-soon-badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    background: rgba(206,0,0,0.08); color: var(--helix-red);
    font-size: var(--fs-meta); font-weight: 700; margin-top: 12px;
}
.helix-ctx-section { padding: 16px; border-bottom: 1px solid var(--helix-border); }
.helix-ctx-title {
    font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--helix-muted); margin-bottom: 10px;
    display: flex; align-items: center; justify-content: space-between;
}

/* Queue cards */
.helix-queue-card { padding: 12px 14px; border-bottom: 1px solid var(--helix-border); cursor: pointer; transition: background 120ms; }
.helix-queue-card:hover { background: var(--helix-panel-2); }
.helix-queue-card:active { transform: var(--press-soft); }
.helix-queue-card.selected {
    border-left: 3px solid var(--helix-red);
    background: linear-gradient(90deg, rgba(206,0,0,0.07), #FFFFFF 70%);
    padding-left: 11px;
}
.helix-queue-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.helix-queue-ref   { font-size: var(--fs-meta); font-weight: 600; color: var(--helix-muted); }
.helix-queue-time  { font-size: var(--fs-meta); color: var(--helix-muted); flex-shrink: 0; }
.helix-queue-subject { font-size: var(--fs-body); font-weight: 600; color: var(--helix-text); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.helix-queue-meta  { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.helix-queue-client { font-size: var(--fs-meta); color: var(--helix-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Portal topbar (definición única) */
.portal-topbar-new {
    display: flex; align-items: center; gap: 16px;
    height: 72px; padding: 0 24px;
    background: var(--helix-surface); border-bottom: 1px solid var(--helix-border);
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
/* Cards de categoría KB portal */
.portal-kb-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 1100px) { .portal-kb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .portal-kb-grid { grid-template-columns: 1fr; } }
.portal-kb-card {
    background: var(--helix-surface); border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius-lg); padding: 20px 18px;
    display: flex; align-items: center; gap: 16px;
    text-decoration: none; color: inherit; position: relative;
    transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .portal-kb-card:hover {
        transform: translateY(-2px); box-shadow: var(--helix-shadow-md);
        border-color: rgba(206,0,0,0.18);
    }
}
.portal-kb-card:active { transform: var(--press-soft); }
.portal-kb-card-icon {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.portal-kb-card-title { font-size: var(--fs-body); font-weight: 700; color: var(--helix-text); }
.portal-kb-card-desc  { font-size: var(--fs-compact); color: var(--helix-muted); line-height: 1.45; margin-top: 2px; }
.portal-kb-card-count { font-size: var(--fs-meta); color: var(--helix-muted); margin-top: 6px; font-weight: 600; }
.portal-topbar-nav {
    display: flex; align-items: center; gap: 4px;
}
.portal-topbar-nav--center {
    flex: 1; justify-content: center;
}
.portal-nav-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 8px;
    font-size: var(--fs-body); font-weight: 500; color: var(--helix-text);
    text-decoration: none; transition: background 130ms, color 130ms;
    white-space: nowrap;
}
.portal-nav-link:hover { background: rgba(0,0,0,0.05); color: var(--helix-text); }
.portal-nav-link:active { transform: var(--press); }
.portal-nav-link.active {
    color: var(--helix-red); font-weight: 600;
    position: relative;
}
.portal-nav-link.active::after {
    content: ''; position: absolute; bottom: -10px; left: 14px; right: 14px;
    height: 2px; background: var(--helix-red); border-radius: 2px;
}

/* ── Responsive new ──────────────────────────────────────────────────── */
@media (max-width: 1300px) {
    .portal-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    /* BUG-20260612-020: minmax(0,1fr) — con 1fr el min-width:auto del grid item
       deja que las filas nowrap ensanchen la columna más allá del viewport. */
    .portal-home-grid { grid-template-columns: minmax(0, 1fr); }
    .portal-hero-v2   { padding: 32px 0 28px; }
    .portal-hero-v2-title { font-size: 1.75rem; }   /* 28px tablet */
}
@media (max-width: 720px) {
    .portal-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    /* BUG-20260612-020: los elementos fijos de la fila (ref, pill, fecha, chevron)
       superan el ancho móvil; la fila pasa a dos líneas con el asunto debajo. */
    .portal-ticket-row { flex-wrap: wrap; gap: 6px 10px; padding: 12px 14px; }
    .portal-ticket-row .portal-ticket-subject { flex: 1 1 100%; order: 10; white-space: normal; }
    /* En móvil la fila se apila: los slots vuelven a ancho natural (sin columnas fijas). */
    .portal-ticket-status, .portal-ticket-action { width: auto; }
    .portal-ticket-time { width: auto; min-width: 0; justify-content: flex-start; }
    .portal-recent-header { flex-wrap: wrap; gap: 6px 12px; }
}
@media (max-width: 480px) {
    .portal-actions-grid { grid-template-columns: 1fr; }
    .portal-hero-v2-title { font-size: var(--fs-title); }   /* 24px móvil */
    /* Nav compacta y scrolleable — nunca desaparece */
    .portal-topbar-new { padding: 0 12px; gap: 8px; height: 60px; }
    .portal-topbar-new .hx-logo-text { display: none; }
    /* BUG-20260612-015: sin scroll horizontal oculto — en móvil los enlaces
       quedan en solo-icono y los tres caben siempre en el viewport. */
    .portal-topbar-nav--center { justify-content: center; }
    .portal-nav-link { padding: 8px 10px; font-size: var(--fs-compact); gap: 4px; }
    .portal-nav-link .portal-nav-label { display: none; }
    .portal-nav-link.active::after { left: 9px; right: 9px; }
}

/* ── Portal ticket list (row style — conceptual) ──────────────────────── */
.portal-ticket-list {
    background: var(--helix-surface); border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius-lg); overflow: hidden;
}
.portal-ticket-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 18px; border-bottom: 1px solid var(--helix-border);
    text-decoration: none; color: inherit;
    transition: background 120ms;
}
.portal-ticket-row:last-child { border-bottom: 0; }
.portal-ticket-row:hover { background: var(--helix-panel-2); }
.portal-ticket-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.portal-ticket-ref {
    font-size: var(--fs-compact); font-weight: 700; color: var(--helix-text); flex-shrink: 0; white-space: nowrap;
}
.portal-ticket-requester {
    font-size: var(--fs-meta); font-weight: 400; color: var(--helix-muted);
}
.portal-ticket-subject {
    flex: 1 1 auto; min-width: 0;
    font-size: var(--fs-body); font-weight: 500; color: var(--helix-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.portal-ticket-time {
    font-size: var(--fs-meta); color: var(--helix-muted); white-space: nowrap; flex-shrink: 0;
    display: flex; align-items: center; gap: 4px;
    /* Ancho FIJO (no min-width): con min-width el slot crecía con textos largos
       («Actualizado hace 47 min» vs «hace 1 d»), empujando el pill de estado a la
       izquierda → los pills bailaban fila a fila. Un ancho fijo mantiene el borde
       izquierdo del pill constante en toda la columna (BUG-20260702-024). */
    width: 168px; justify-content: flex-end; overflow: hidden; text-overflow: ellipsis;
}
/* El pill de estado ocupa un slot de ancho fijo (alineado a la izquierda) para que los pills
   queden en columna fila a fila; antes se desplazaban con el ancho variable de la fecha. */
/* BUG-20260702-027: el ancho fijo de 116px recortaba/desbordaba los estados largos
   («Pendiente de tu respuesta»). El chip (<StatusChip>, nowrap, flex-shrink:0) se dimensiona
   por contenido; el cap queda a la izquierda del slot. Sin max-width/truncado/wrap. */
.portal-ticket-status { display: flex; align-items: center; flex-shrink: 0; justify-content: flex-start; }
/* Slot de acción de ancho constante — presente aunque la fila no tenga botón «Cerrar» — para que
   los pills/fechas no se desplacen entre filas con y sin cierre rápido (BUG portal alineación). */
.portal-ticket-action { display: flex; justify-content: flex-end; flex-shrink: 0; width: 84px; }

/* Cierre rápido en la fila del listado: acción sutil que aparece al hover del ratón
   (en táctil se muestra siempre — no hay hover fiable). Reutiliza tokens del sistema. */
.portal-ticket-close {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    padding: 4px 10px; border: 1px solid var(--helix-border); border-radius: 999px;
    background: var(--helix-surface); color: var(--helix-muted);
    font-size: var(--fs-meta); font-weight: 600; cursor: pointer;
    transition: opacity .12s, color .12s, border-color .12s, background .12s, transform .12s;
}
.portal-ticket-close .mud-icon-root { font-size: 15px; }
.portal-ticket-close:hover {
    color: var(--helix-red); border-color: var(--helix-red); background: var(--helix-panel-2);
}
.portal-ticket-close:active { transform: var(--press); }
.portal-ticket-close:focus-visible { outline: 3px solid var(--helix-focus-ring); outline-offset: 1px; }
.portal-ticket-close[disabled] { opacity: .5; cursor: default; }
@media (hover: hover) and (pointer: fine) {
    .portal-ticket-close { opacity: 0; }
    .portal-ticket-row:hover .portal-ticket-close,
    .portal-ticket-close:focus-visible { opacity: 1; }
}

/* Control segmentado del portal (p. ej. urgencia percibida en «Crear solicitud»).
   Plano en reposo (hairline); la opción activa se marca con superficie + rojo ganado. */
.portal-segmented {
    display: inline-flex; padding: 3px; gap: 3px;
    border: 1px solid var(--helix-border); border-radius: 14px; background: var(--helix-panel-2);
}
.portal-segmented-option {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    padding: 7px 18px; border-radius: 10px;
    font-size: var(--fs-body); font-weight: 600; color: var(--helix-muted);
    transition: background .15s, color .15s, box-shadow .15s, transform .12s;
}
.portal-segmented-option:hover { color: var(--helix-text); }
.portal-segmented-option:active { transform: var(--press); }
.portal-segmented-option:focus-visible { outline: 3px solid var(--helix-focus-ring); outline-offset: 1px; }
.portal-segmented-option--active {
    background: var(--helix-surface); color: var(--helix-red);
    box-shadow: 0 1px 2px rgba(28, 26, 22, .08);
}

/* ── Portal conversation thread ──────────────────────────────────────── */
.portal-conv-msg {
    display: flex; align-items: flex-start; gap: 12px;
}
.portal-conv-msg--client { flex-direction: row; }
.portal-conv-msg--agent  { flex-direction: row; }

.portal-conv-bubble {
    flex: 1; min-width: 0; border-radius: 12px;
    padding: 14px 16px; border: 1px solid rgba(0,0,0,.08);
}
.portal-conv-bubble--client { background: var(--helix-surface); }
.portal-conv-bubble--agent  { background: var(--helix-panel-2); border-color: rgba(37,99,235,.14); }

.portal-conv-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: var(--fs-compact); margin-bottom: 8px; color: var(--helix-text);
}
.portal-conv-meta span { color: var(--helix-muted); font-size: var(--fs-meta); }
.portal-conv-badge-support {
    background: rgba(37,99,235,0.10); color: #1D4ED8;
    font-size: var(--fs-meta); font-weight: 700; padding: 2px 8px; border-radius: 10px;
}
/* F3 — respuesta del asistente de IA «Axis» en el portal (pastilla violeta). */
.portal-conv-badge-ai {
    background: rgba(124,58,237,0.12); color: #6D28D9;
    font-size: var(--fs-meta); font-weight: 700; padding: 2px 8px; border-radius: 10px;
}
/* F3 — indicador «Axis está escribiendo»: tres puntos que saltan (estilo chat tipo ChatGPT). Se
   muestra mientras el asistente IA genera su respuesta en background y se sustituye por el mensaje
   cuando llega por el bus. Respeta prefers-reduced-motion (atenuado, sin salto). */
.portal-typing { display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px; }
.portal-typing-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #7C3AED;
    animation: hlx-typing-bounce 1.3s infinite ease-in-out both;
}
.portal-typing-dot:nth-child(1) { animation-delay: -0.32s; }
.portal-typing-dot:nth-child(2) { animation-delay: -0.16s; }
[data-helix-dark] .portal-typing-dot { background: #C4B5FD; }
@keyframes hlx-typing-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: .4; }
    40%           { transform: translateY(-5px); opacity: 1; }
}
@keyframes hlx-typing-pulse { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
    .portal-typing-dot { animation: hlx-typing-pulse 1.4s infinite ease-in-out both; }
}
.portal-conv-body { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--helix-text); max-width: var(--measure); }
/* BUG-20260612-022 (review): unificar el margen de párrafo con .helix-md-content p (.75rem)
   del lado agente; antes 8px porque .portal-conv-body p pisaba a .helix-md-content p (misma
   especificidad, posterior). .portal-conv-body solo se usa en el hilo del portal. */
.portal-conv-body p { margin: 0 0 .75rem; }
.portal-conv-body p:last-child { margin-bottom: 0; }

/* ── Imagen importada que aún se está bajando (#20166) ─────────────────────────
   Skeleton y no spinner: es contenido que va a aparecer en su sitio, no una espera
   de la página. Un hueco resuelto ya es <img>; uno terminal, texto sin este span. */
.hlx-img-pending {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 2.25rem;
    padding: 6px 12px 6px 10px;
    border-radius: var(--helix-radius-sm, 6px);
    border: 1px dashed var(--helix-border, rgba(0, 0, 0, .14));
    background: var(--helix-surface-2, rgba(0, 0, 0, .03));
    color: var(--helix-text-muted, #6b6257);
    font-size: var(--fs-compact);
    max-width: 100%;
}
.hlx-img-pending::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    border-radius: 3px;
    background: linear-gradient(100deg,
        var(--helix-surface-3, rgba(0, 0, 0, .07)) 30%,
        var(--helix-surface, rgba(255, 255, 255, .65)) 50%,
        var(--helix-surface-3, rgba(0, 0, 0, .07)) 70%);
    background-size: 220% 100%;
    animation: hlx-img-pending-shimmer 1.4s ease-in-out infinite;
}
@keyframes hlx-img-pending-shimmer {
    from { background-position: 180% 0; }
    to   { background-position: -40% 0; }
}
/* El movimiento se va, el contraste se queda: sigue leyéndose como «en curso». */
@media (prefers-reduced-motion: reduce) {
    .hlx-img-pending::before {
        animation: none;
        background: var(--helix-surface-3, rgba(0, 0, 0, .07));
    }
}

/* ── G02: menciones @agente en notas internas ──────────────────────────────── */
.helix-mention {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .10);
    color: var(--helix-blue);
    font-weight: 600;
    font-size: .92em;
    white-space: nowrap;
}
.helix-mention-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 12px;
    right: auto;
    z-index: 1400;
    width: max-content;
    min-width: 220px;
    max-width: 320px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--helix-surface);
    border: 1px solid var(--helix-border);
    border-radius: 10px;
    box-shadow: var(--helix-shadow-lg);
    padding: 4px;
}
.helix-mention-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-compact);
    font-weight: 500;
    text-align: left;
    color: var(--mud-palette-text-primary, var(--helix-text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.helix-mention-item.active { background: rgba(37, 99, 235, .10); color: var(--helix-blue); }

/* ── Visor de logs (/admin/logs) ─────────────────────────────────────────────── */
/* Barra de filtros: campos de ancho uniforme (el buscador no se desborda) */
.hlx-log-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}
.hlx-logs .hlx-log-field { margin: 0; width: 170px; }
.hlx-logs .hlx-log-field--search { width: 300px; }
.hlx-logs .hlx-log-field--page { width: 120px; }
@media (max-width: 720px) {
    .hlx-logs .hlx-log-field,
    .hlx-logs .hlx-log-field--search { width: 100%; }
}
.hlx-logs .hlx-log-live-switch { margin: 0 4px 0 0; }

/* Línea de estado bajo los filtros (recuento · actualizado · en vivo) */
.hlx-log-cols {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 12px;
}
.hlx-log-cols-label {
    font-size: var(--fs-compact);
    font-weight: 600;
    color: var(--mud-palette-text-secondary, var(--helix-muted));
    margin-right: 2px;
}
.hlx-log-cols .mud-input-control { margin: 0; }

.hlx-log-statusline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: var(--fs-compact);
    color: var(--mud-palette-text-secondary, var(--helix-muted));
}
.hlx-log-dim { color: var(--mud-palette-text-secondary, var(--helix-muted)); font-size: var(--fs-compact); }
.hlx-log-live-tag { display: inline-flex; align-items: center; gap: 6px; color: #16a34a; font-weight: 600; }
.hlx-log-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #16a34a; animation: hlxLogPulse 1.4s ease-in-out infinite;
}
@keyframes hlxLogPulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) {
    .hlx-log-live-dot { animation: none; }
}
.hlx-log-progress { margin-bottom: 6px; }

/* Tabla: ancho fijo para que el contenido largo NO ensanche la tabla (evita el scroll
   horizontal que ocultaba el botón Copiar y desalineaba la card). */
.hlx-logs .hlx-log-table table { table-layout: fixed; width: 100%; }
.hlx-logs .hlx-log-table .mud-table-container { overflow-x: hidden; }
/* helix-admin-table fuerza nowrap+min-width en la última columna (Mensaje): aquí debe poder
   ajustar/envolver para no desbordar la tabla. */
.hlx-logs .hlx-log-table td:last-child,
.hlx-logs .hlx-log-table th:last-child {
    white-space: normal;
    min-width: 0;
}
.hlx-log-table td.hlx-log-cell {
    font-size: var(--fs-compact);
    vertical-align: top;
    padding-top: 8px;
    padding-bottom: 8px;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hlx-log-machine-cell,
.hlx-log-source-cell {
    display: block;
    font-size: var(--fs-meta);
    color: var(--mud-palette-text-secondary, var(--helix-muted));
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hlx-log-ts {
    font-family: var(--helix-font-mono);
    font-size: var(--fs-compact);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary, var(--helix-muted));
}
/* `white-space: nowrap` gana al `overflow-wrap: anywhere` de .hlx-log-cell: el nombre del proceso
   es un token corto que nunca debe partirse (rompía la altura de la fila). */
.hlx-log-proc { font-size: var(--fs-compact); font-weight: 600; line-height: 1.25; white-space: nowrap; }
.hlx-log-machine {
    display: block;
    font-size: var(--fs-meta);
    font-weight: 400;
    color: var(--mud-palette-text-secondary, var(--helix-muted));
    word-break: break-word;
}
.hlx-log-msg {
    font-family: var(--helix-font-mono);
    font-size: var(--fs-compact);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.hlx-log-msg--open {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Pastillas de nivel: todas del mismo tamaño */
/* Fase 12 — chips de operadores de la búsqueda avanzada admin */
.hlx-search-op {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    font-size: var(--fs-meta);
    font-family: var(--helix-font-mono);
    color: var(--mud-palette-text-secondary);
    cursor: default;
}

.hlx-log-level {
    display: inline-block;
    min-width: 80px;
    text-align: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.6;
}
.hlx-log-level--fatal   { background: #7f1d1d; color: #fff; }
.hlx-log-level--error   { background: rgba(220, 38, 38, .12); color: #b91c1c; }
.hlx-log-level--warning { background: rgba(217, 119, 6, .14); color: #b45309; }
.hlx-log-level--info    { background: rgba(37, 99, 235, .12); color: #1d4ed8; }
.hlx-log-level--debug   { background: rgba(100, 116, 139, .14); color: var(--helix-muted); }

.hlx-log-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}
.hlx-log-copy-row { display: flex; justify-content: flex-end; margin-bottom: 4px; }

.hlx-log-detail {
    border-top: 1px dashed var(--mud-palette-lines-default, #E0E4EA);
    padding-top: 8px;
}
.hlx-log-meta {
    font-size: var(--fs-meta);
    color: var(--mud-palette-text-secondary, var(--helix-muted));
    word-break: break-word;
    margin-bottom: 4px;
}

/* Auditoría de Axis — fila de detalle a ANCHO COMPLETO (ChildRowContent): la celda ocupa toda la fila
   y la meta fluye en filas, así no descompone la tabla al desplegar. */
.hlx-audit-detail-cell {
    padding: 12px 16px 16px;
    background: rgba(0, 0, 0, 0.025);
    border-bottom: 1px solid var(--mud-palette-lines-default, #E0E4EA);
}
/* Al ser el único td de su fila, la celda de detalle hereda el `white-space: nowrap`
   de `.helix-admin-table td:last-child` (pensado para la columna de acciones). Sin este
   reset, la meta no envuelve y columnas como Confianza y Motivo de escalado se solapan. */
.helix-admin-table td.hlx-audit-detail-cell { white-space: normal; }
[data-helix-dark] .hlx-audit-detail-cell { background: rgba(255, 255, 255, 0.03); }
/* Cada campo ocupa el ancho de su contenido y la fila salta cuando se llena: una rejilla de
   columnas fijas troceaba pares etiqueta/valor largos («Confianza», «Motivo de escalado») en
   varias líneas dentro de una columna de 220px mientras sobraba ancho a los lados. */
.hlx-audit-detail-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 24px;
}
.hlx-log-exception {
    margin: 6px 0 0;
    padding: 10px 12px;
    background: rgba(220, 38, 38, .06);
    border: 1px solid rgba(220, 38, 38, .18);
    border-radius: 8px;
    font-family: var(--helix-font-mono);
    font-size: var(--fs-meta);
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-height: 360px;
    overflow: auto;
}

/* ── Detalle (organización y cliente): panel de tabs como card nativa Helix ──────
   La card recorta con overflow:hidden para respetar el radius; la barra de tabs deja aire arriba
   (padding-top) para que los badges no toquen el borde superior. */
.hlx-detail-tabs { overflow: hidden; }
.hlx-detail-tabs .mud-tabs-tabbar {
    border-bottom: 1px solid var(--helix-border);
    padding: 10px 14px 0 14px;
    background: transparent;
}
.hlx-detail-tabs .mud-tabs-panels { background: var(--helix-surface); }
/* Tabs calmadas: icono + texto muted por defecto; activo = texto principal, icono e indicador
   rojo Helix (acento controlado), underline fino. */
.hlx-detail-tabs .mud-tab { text-transform: none; font-weight: 600; color: var(--helix-muted); }
.hlx-detail-tabs .mud-tab .mud-icon-root { color: var(--helix-muted); }
.hlx-detail-tabs .mud-tab.mud-tab-active { color: var(--helix-text); }
.hlx-detail-tabs .mud-tab.mud-tab-active .mud-icon-root { color: var(--helix-red); }
.hlx-detail-tabs .mud-tab-slider { height: 2px; }

/* ── «Kit Táctil» PR6 · 6c Pestañas (MudTabs, spec §4.3) ──────────────────────
   VERIFICACIÓN (MudBlazor 9.5.0): clases reales confirmadas — .mud-tab (botón),
   .mud-tab.mud-tab-active (activa), .mud-tab-slider (indicador). El .mud-tab base trae
   text-transform:uppercase y font-weight:500 → esta regla los normaliza (sin mayúsculas,
   600) alineado con el dialecto amable del portal. Es la ÚNICA regla de §4.3 que cambia
   algo de forma segura y global.
   COLOR ACTIVO + SLIDER: NO se re-declaran con var(--helix-red). Motivo (verificado en
   Theming/HelixTheme.cs): la paleta Mud ya define Primary = #CE0000 (claro) y #FF5A5A (oscuro),
   y MudBlazor ya colorea la activa y el slider con var(--mud-palette-primary) → YA son rojo
   correcto y con AA en AMBOS temas (activa/slider ≈5.8:1 claro sobre #FFFFFF, ≈5.4:1 oscuro
   sobre #1E1E24). Forzar var(--helix-red) sería redundante y, como --helix-red NO tiene override
   en [data-helix-dark] (#CE0000 sobre #1E1E24 = 2.86:1), REGRESARÍA el AA oscuro; además chocaría
   con el tratamiento deliberado de .hlx-detail-tabs (activa = --helix-text, no rojo). Se propone al
   lead confiar en la paleta del tema para el rojo activo/slider (ver informe). */
.mud-tabs .mud-tab { text-transform: none; font-weight: 600; }
/* El contenido de la pestaña Portal usa componentes MudBlazor estándar (MudCardContent/MudCard/
   MudChip/MudText) — sin clases CSS a medida, para que sea coherente con el resto de la consola. */

/* ── prefers-reduced-motion: anular el MOVIMIENTO de las superficies endurecidas ──
   Va al final del archivo a propósito: misma especificidad que las reglas :hover
   gateadas anteriores, así que debe ganar por orden de origen. Se conservan
   sombra/color/opacidad (ayudan a la comprensión); solo se elimina el desplazamiento.
   Resuelve BUG-20260629-001 (lift en hover de cards + entrada con transform de bulk-bar). */
@media (prefers-reduced-motion: reduce) {
    .helix-card-hover:hover,
    .portal-card:hover,
    .portal-footer-cta:hover,
    .portal-action-card:hover,
    .portal-kb-card:hover { transform: none; }
    .portal-action-card:hover .portal-action-arrow { transform: translateY(-50%); }
    /* La bulk-bar aparece sin translate (solo opacidad); sin transición en transform
       el valor de @starting-style no se anima. */
    .helix-bulk-bar { transition: opacity .15s var(--ease-out); }
}

/* ── HelixSpot: ilustración de marca para momentos ganados / estados vacíos ──────
   Line-art cálido (taupe) + un único acento semántico (verde «resuelto» por
   defecto, rojo de marca en la variante de invitación). Sin relleno ni gradiente.
   Se dibuja/asienta UNA vez al montar (.hlx-spot--play); el SVG es decorativo
   (aria-hidden) y el texto acompañante porta el significado. */
.hlx-spot { display: inline-flex; line-height: 0; }
.hlx-spot svg { overflow: visible; }

/* Iconos Lucide dentro de MudChip: los trazos se dibujan al borde del viewBox 0 0 24 24 y el viewport
   del <svg> recorta el medio-trazo (visible como «círculo del badge cortado», sobre todo en Size.Small).
   overflow visible lo revela sin alterar la geometría (mismo remedio que .hlx-spot svg). BUG-20260703. */
.mud-chip svg { overflow: visible; }
.hlx-spot-line { stroke: var(--helix-subtle); stroke-width: 3; }
.hlx-spot-line--soft { stroke: var(--helix-border); stroke-width: 2.5; }
.hlx-spot-ring { stroke: var(--st-solved); stroke-width: 3; }
.hlx-spot-check { stroke: var(--st-solved); stroke-width: 3.5; }
/* Acento rojo de marca, para invitaciones (uso puntual; el rojo «se gana»). */
.hlx-spot--accent-red .hlx-spot-ring,
.hlx-spot--accent-red .hlx-spot-check { stroke: var(--helix-red); }

/* Entrada: el line-art surge, el anillo entra a escala y el check se dibuja. */
.hlx-spot--play .hlx-spot-line { opacity: 0; animation: hlxSpotFade .5s var(--ease-out) forwards; }
.hlx-spot--play .hlx-spot-line:nth-of-type(2) { animation-delay: .06s; }
.hlx-spot--play .hlx-spot-line--soft { animation-delay: .12s; }
.hlx-spot--play .hlx-spot-ring {
    transform-origin: center; transform-box: fill-box;
    opacity: 0; animation: hlxSpotRing .45s var(--ease-out) .18s forwards;
}
.hlx-spot--play .hlx-spot-check {
    stroke-dasharray: 48; stroke-dashoffset: 48;
    animation: hlxSpotDraw .4s var(--ease-out) .42s forwards;
}
@keyframes hlxSpotFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hlxSpotRing { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes hlxSpotDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
    .hlx-spot--play .hlx-spot-line,
    .hlx-spot--play .hlx-spot-ring { opacity: 1; transform: none; animation: none; }
    .hlx-spot--play .hlx-spot-check { stroke-dashoffset: 0; animation: none; }
}

/* ── Inbox-zero: «Estás al día» (cola «Atención ahora» sin accionables) ──────────
   Momento ganado del agente. Centrado, calmado; el spot lleva el peso visual y el
   microcopy lo nombra. Se distingue del «sin resultados» (filtros) por copy + CTA. */
.hlx-inbox-zero {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 6px; padding: 48px 24px 52px;
}
.hlx-inbox-zero h3 {
    margin: 8px 0 0; font-size: var(--fs-headline); font-weight: var(--fw-bold);
    color: var(--helix-text); letter-spacing: 0;
}
.hlx-inbox-zero p {
    margin: 0; max-width: 360px; line-height: var(--lh-normal);
    font-size: var(--fs-body); color: var(--helix-muted);
}
.hlx-inbox-zero .hlx-inbox-zero-actions { margin-top: 14px; }

/* ── Sin resultados de búsqueda: distinto del «sin resultados» de cola (arriba, .helix-tickets
   inline) porque nombra la consulta y ofrece salir, no solo el icono genérico de filtro. */
.hlx-search-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 6px; padding: 40px 24px 44px;
}
.hlx-search-empty-icon.mud-icon-root { font-size: 32px; color: var(--helix-border); margin-bottom: 4px; }
.hlx-search-empty h3 {
    margin: 4px 0 0; font-size: var(--fs-headline); font-weight: var(--fw-bold);
    color: var(--helix-text); letter-spacing: 0; word-break: break-word;
}
.hlx-search-empty p {
    margin: 0; max-width: 360px; line-height: var(--lh-normal);
    font-size: var(--fs-body); color: var(--helix-muted);
}
.hlx-search-empty .hlx-search-empty-actions { margin-top: 14px; }

/* ── CSAT: beat de agradecimiento (solo tras enviar la valoración) ───────────────
   Check dibujado (HelixSpot) + estrellas que se asientan en cascada. El estado
   sobrio (recarga de un ticket ya valorado) no lleva .hlx-csat-thanks--play. */
.hlx-csat-thanks { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hlx-csat-thanks .csat-stars { gap: 3px; }
.hlx-csat-thanks--play .hlx-csat-star {
    display: inline-flex; line-height: 0;
    opacity: 0; transform: scale(.6);
    animation: hlxStarPop .34s var(--ease-out) forwards;
}
.hlx-csat-thanks--play .hlx-csat-star:nth-child(1) { animation-delay: .20s; }
.hlx-csat-thanks--play .hlx-csat-star:nth-child(2) { animation-delay: .27s; }
.hlx-csat-thanks--play .hlx-csat-star:nth-child(3) { animation-delay: .34s; }
.hlx-csat-thanks--play .hlx-csat-star:nth-child(4) { animation-delay: .41s; }
.hlx-csat-thanks--play .hlx-csat-star:nth-child(5) { animation-delay: .48s; }
@keyframes hlxStarPop { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .hlx-csat-thanks--play .hlx-csat-star { opacity: 1; transform: none; animation: none; }
}

/* ── Estados vacíos de primer uso (portal): enseñan, no solo dicen «nada» ─────────
   Ilustración de marca + titular + microcopy + CTA. Centrado y calmado. */
.hlx-portal-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 4px; padding: 40px 24px 44px;
}
.hlx-portal-empty h3 {
    margin: 10px 0 0; font-size: var(--fs-headline); font-weight: var(--fw-bold);
    color: var(--helix-text); letter-spacing: 0;
}
.hlx-portal-empty p {
    margin: 0; max-width: 340px; line-height: var(--lh-normal);
    font-size: var(--fs-body); color: var(--helix-muted);
}
.hlx-portal-empty .hlx-portal-empty-cta { margin-top: 14px; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   Asistente de Axis — disparador compacto del panel + popover con las HERRAMIENTAS
   INTERACTIVAS de IA (clasificación/duplicados/KB/macro/generar borrador) y un resumen de
   inteligencia. PR «Axis actions visibility» (Pass 3): el registro de acciones EJECUTADAS
   (antes aquí, AxisActionRegistry) se retiró — ese rol es la espina del hilo + marcas in-situ.
   Violeta = Axis (tokens --st-new/--st-new-bg, theme-aware).
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* Disparador compacto (panel informativo) */
.hlx-ax-assist-trigger {
    width: 100%; margin-top: 12px; text-align: left; font-family: inherit;
    padding: 9px 12px; border: 1px solid var(--st-new-bg); border-radius: 10px;
    background: var(--st-new-bg); color: var(--st-new);
    display: flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 700; font-size: 13px;
    transition: box-shadow .15s var(--ease-out), background .15s var(--ease-out);
}
.hlx-ax-assist-trigger:hover { box-shadow: 0 2px 10px rgba(91, 75, 179, .14); }
.hlx-ax-assist-trigger:focus-visible { outline: 2px solid var(--st-new); outline-offset: 2px; }
.hlx-ax-assist-trigger-ico {
    width: 26px; height: 26px; border-radius: 8px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--helix-surface); color: var(--st-new);
}
.hlx-ax-assist-trigger-ico .mud-icon-root { font-size: 16px; }
.hlx-ax-assist-trigger-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlx-ax-assist-trigger-chev.mud-icon-root { font-size: 18px; flex: none; opacity: .7; }

/* Popover: resumen de intel + wrapper del asistente (las cards reusan .helix-ctx-section pero SIN el
   ancestro .helix-ctx-panel, así que aquí se les da el mismo aspecto blanco sin margen). */
.hlx-ax-intel-sum { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
    padding: 12px 13px; border: 1px solid #DAD3F1; border-radius: 13px;
    background: linear-gradient(180deg, #F8F6FD, #fff); }
.hlx-ax-intel-sum-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hlx-ax-assist { display: flex; flex-direction: column; gap: 12px; }
.hlx-ax-assist .helix-ctx-section {
    background: var(--helix-surface, #fff); border: 1px solid var(--helix-border); border-radius: 13px;
    padding: 15px; margin: 0; box-shadow: none;
}

/* Scroll-lock del fondo mientras un drawer/modal hand-rolled está abierto (BUG-20260706-001).
   Lo activan/retiran OpenAxisDrawer/CloseAxisDrawer añadiendo/quitando la clase en <body>. */
body.hlx-modal-open { overflow: hidden; }

/* Drawer (overlay flotante sobre la conversación) */
.hlx-axis-backdrop {
    position: fixed; inset: 0; background: rgba(20, 18, 15, .28); z-index: 1400;
    animation: hlxAxisFade .18s ease;
}
.hlx-axis-drawer {
    position: fixed; top: 0; right: 0; height: 100%; width: min(404px, 100vw); z-index: 1401;
    background: #f6f3ee; border-left: 1px solid #e2ddd3; box-shadow: -20px 0 48px rgba(20, 18, 15, .16);
    display: flex; flex-direction: column;
    animation: hlxAxisSlide .22s cubic-bezier(.22, 1, .36, 1);
}
.hlx-axis-drawer-head {
    height: 60px; flex: none; display: flex; align-items: center; gap: 11px; padding: 0 20px;
    border-bottom: 1px solid #e9e3d9; background: #fff;
}
.hlx-axis-drawer-icon {
    width: 30px; height: 30px; border-radius: 8px; background: #ede7fb; color: #6d4fb0;
    display: flex; align-items: center; justify-content: center; flex: none;
}
.hlx-axis-drawer-icon .mud-icon-root { font-size: 17px; }
.hlx-axis-drawer-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hlx-axis-drawer-title { font-size: 15px; font-weight: 750; line-height: 1.1; color: #2c2925; }
.hlx-axis-drawer-sub { font-size: 11.5px; color: #8b847a; }
.hlx-axis-drawer-close {
    width: 34px; height: 34px; border-radius: 9px; border: 1px solid #e2ddd3; background: #fff;
    color: #6f6a62; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
    transition: background .12s var(--ease-out);
}
.hlx-axis-drawer-close .mud-icon-root { font-size: 18px; }
.hlx-axis-drawer-close:hover { background: #faf8f4; }
.hlx-axis-drawer-body { flex: 1; overflow-y: auto; padding: 20px; }

/* PR «Axis actions visibility» (Pass 3): las reglas .axr-* del registro de acciones (AxisActionRegistry)
   se retiraron junto con el componente — ese rol es ahora la espina del hilo (.hlx-ax-item). El asistente
   del popover usa .hlx-ax-assist (arriba). Se conservan solo las animaciones del drawer (Fade/Slide);
   hlxAxisPulse/hlxAxisShimmer se eliminaron (solo las usaba .axr-*). */
@keyframes hlxAxisFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hlxAxisSlide { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .hlx-axis-backdrop, .hlx-axis-drawer { animation: none; }
}

/* Dark mode (no accesible por UI hoy, roadmap): overrides mínimos con tokens theme-aware. */
[data-helix-dark] .hlx-axis-drawer { background: var(--helix-canvas); border-left-color: var(--helix-line); }
[data-helix-dark] .hlx-axis-drawer-head { background: var(--helix-surface); border-bottom-color: var(--helix-line); }
[data-helix-dark] .hlx-axis-drawer-title { color: var(--helix-text); }
[data-helix-dark] .hlx-ax-intel-sum { border-color: rgba(91,75,179,.42); background: linear-gradient(180deg, rgba(91,75,179,.14), transparent); }

/* ── Páginas de estado (404 / Error) ─────────────────────────────────────
   Wrapper compartido por NotFound.razor y Error.razor. Reemplaza las plantillas
   por defecto de Blazor (inglés, sin estilo). Flat-at-rest, tokens cálidos,
   Earned-Red solo en la acción primaria y en la etiqueta de un error real. */
.hlx-status-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
}
.hlx-status-card {
    width: 100%;
    max-width: 460px;
    text-align: center;
    background: var(--helix-surface);
    border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius-lg);
    padding: 40px 32px;
}
.hlx-status-code {
    display: block;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--helix-muted);
    font-variant-numeric: tabular-nums;
}
.hlx-status-code--error { font-size: 28px; color: var(--helix-red); }
.hlx-status-title {
    margin: 16px 0 8px;
    font-size: var(--fs-title);
    font-weight: 700;
    color: var(--helix-text);
}
.hlx-status-text {
    margin: 0 auto;
    max-width: 42ch;
    font-size: var(--fs-compact);
    line-height: 1.5;
    color: var(--helix-muted);
}
.hlx-status-meta {
    margin: 14px 0 0;
    font-size: var(--fs-meta);
    color: var(--helix-muted);
}
.hlx-status-meta code {
    font-family: var(--helix-font-mono);
    color: var(--helix-muted);
}
.hlx-status-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    height: 38px;
    padding: 0 18px;
    border-radius: var(--helix-radius-sm);
    background: var(--helix-red);
    color: #fff;
    font-size: var(--fs-compact);
    font-weight: 600;
    text-decoration: none;
    transition: background 140ms var(--ease-out);
}
.hlx-status-action:hover { background: var(--helix-red-dark); }
.hlx-status-action:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) { .hlx-status-action:active { transform: none; } }
[data-helix-dark] .hlx-status-card { background: var(--helix-surface); border-color: var(--helix-line); }
/* Dos acciones en la tarjeta de estado: la red de errores ofrece reintentar además de volver.
   El <button> hereda .hlx-status-action, que estaba escrita para un <a>. */
.hlx-status-actions {
    margin-top: 24px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.hlx-status-actions .hlx-status-action { margin-top: 0; }
button.hlx-status-action { border: 0; cursor: pointer; font-family: inherit; }
.hlx-status-action--ghost {
    background: transparent;
    color: var(--helix-text);
    border: 1px solid var(--helix-border);
}
/* :not(:disabled) (F2, S5): sin esto el botón «Enviar detalles» ya enviado (disabled) sigue
   reaccionando al ratón -el fondo cambia bajo la opacidad reducida y parece seguir vivo-. Los otros
   usos de --ghost son <a>, que no tienen atributo disabled, así que el selector no les cambia nada. */
.hlx-status-action--ghost:hover:not(:disabled) { background: var(--helix-bg); }
.hlx-status-detail {
    margin-top: 16px;
    text-align: left;
    font-size: var(--fs-meta);
    color: var(--helix-muted);
}
.hlx-status-detail summary { cursor: pointer; }
.hlx-status-detail pre {
    margin: 8px 0 0;
    padding: 10px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--helix-bg);
    border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius-sm);
    font-family: var(--helix-font-mono);
}
/* Informe manual (S5): nota opcional + botón, alineados a la izquierda a diferencia del resto de la
   tarjeta (centrada) porque un textarea centrado es ilegible. El input de MudBlazor no lleva anillo
   propio -su borde ya es el indicador de foco, ver el comentario de --helix-focus-ring-, así que solo el
   botón nativo necesita uno explícito. */
.hlx-report-block {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
}
.hlx-report-note { width: 100%; }
/* F5 (S5): ancla el foco a --helix-red en vez de dejarlo colgado del Primary de MudBlazor -hoy
   coinciden por casualidad, acoplamiento implícito que el resto del repo evita a propósito (mismo
   patrón que .hlx-form y .helix-ctx-panel). */
.hlx-report-note .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--helix-red);
}
.hlx-report-block .hlx-status-action { margin-top: 0; }
/* Objetivo táctil ≥44px (Kit Táctil): .hlx-status-action mide 38px de alto, escrito para Reintentar/
   Volver, que no llevan este requisito propio. */
.hlx-report-button { min-height: 44px; }
.hlx-report-button:focus-visible { outline: 3px solid var(--helix-focus-ring); outline-offset: 2px; }
.hlx-report-button:disabled { opacity: 0.6; cursor: not-allowed; }
.hlx-report-confirmation { margin-top: 0; }

/* ── Flat-By-Default dentro de la consola de administración ───────────────
   Corrección transversal (nivel diseño, no por componente): los MudPaper/MudCard/
   MudTable con elevación en reposo (Elevation="1|2") dentro del shell de admin
   pierden la sombra permanente y adoptan el hairline cálido del sistema. No afecta
   a menús/diálogos/popovers (se renderizan en providers fuera del shell) ni a los
   drawers (.mud-drawer, no .mud-paper). */
.helix-admin-shell .mud-paper.mud-elevation-1,
.helix-admin-shell .mud-paper.mud-elevation-2,
.helix-admin-shell .mud-table.mud-elevation-1,
.helix-admin-shell .mud-table.mud-elevation-2 {
    box-shadow: none;
    border: 1px solid var(--helix-border);
}

/* ── Drawer admin (HlxAdminDrawer) ─────────────────────────────────────────
   Panel lateral de edición/creación. Flat: la sombra es de OVERLAY
   (--helix-shadow-lg, capa temporal), no una sombra permanente en reposo.
   Estructura cabecera/cuerpo/pie con tokens cálidos. */
.hlx-admin-drawer {
    background: var(--helix-surface);
    box-shadow: var(--helix-shadow-lg);
}
/* Layout cabecera/cuerpo(scroll)/pie, independiente del wrapper interno de MudDrawer. */
.hlx-admin-drawer-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.hlx-admin-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--helix-border);
}
.hlx-admin-drawer-title { font-weight: 700; }
.hlx-admin-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.hlx-admin-drawer-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--helix-border);
}

/* ── «Kit Táctil» PR6 · 6a Diálogos (spec §4.1, aplicada literal) ──────────────
   MudDialog venía en crudo (Material). Superficie/borde/radio/sombra alineados con
   la familia plana tokenizada; pie con tinte cálido; overlay cálido (no negro puro).
   Dark: todo conmuta por token (--helix-border/--helix-line/--helix-panel-2 tienen
   override en [data-helix-dark]; radio/sombra son agnósticos, mismo criterio que
   .helix-card/.hlx-admin-drawer). El overlay rgba(40,32,22,.5) es un velo translúcido
   que oscurece sobre ambos temas → no requiere variante dark. */
.mud-dialog{ border-radius:var(--helix-radius-lg); border:1px solid var(--helix-border); box-shadow:var(--helix-shadow-lg); }
.mud-dialog-title{ font-weight:700; }
.mud-dialog-actions{ background:var(--helix-panel-2); border-top:1px solid var(--helix-line); }
.mud-overlay-dialog{ background:rgba(40,32,22,.5); }   /* overlay cálido, no negro puro */

/* ── «Kit Táctil» · Iconos Lucide (SVG de trazo, MIT) ─────────────────────────
   El <g fill=none stroke=currentColor> que inyecta LucideIcons.Mud() ya fija la
   presentación de trazo DENTRO del <svg> que MudBlazor pinta alrededor (anula su
   fill). Esta regla cubre además cualquier .lucide suelto (componente LucideIcon)
   y su alineación inline con el texto. */
.lucide { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.mud-icon-root .lucide,
.mud-icon-root.lucide { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* ── prefers-reduced-motion para MudBlazor (Motion Step 2 · PR 5) ─────────────
   MudBlazor 9.5.0 no trae NINGUNA regla de reduced-motion (0 en su CSS). Este
   bloque cubre SOLO el comportamiento bajo la preferencia: la motion base queda
   intacta para quien no la activa (popover/tooltip/menú/pestañas son «fontanería»
   invisible sin competidor hand-rolled → no se tocan sin la preferencia). Los
   ESQUELETOS NO se tocan aquí (son responsabilidad de PR 2). Se usan los selectores
   EXACTOS de MudBlazor para igualar especificidad: app.css carga DESPUÉS que
   MudBlazor.css, así que a igual especificidad gana el orden de fuente (sin
   !important). Prioridad #1: los loaders INFINITOS del portal público. */
@media (prefers-reduced-motion: reduce) {
    /* Loaders infinitos → estáticos (circular + linear indeterminados, buffer, striped, treeview). */
    .mud-progress-circular.mud-progress-indeterminate,
    .mud-progress-circular-indeterminate-child,
    .mud-progress-circular-circle.mud-progress-indeterminate,
    .mud-progress-linear .mud-progress-linear-bar.mud-progress-linear-1-indeterminate.horizontal,
    .mud-progress-linear .mud-progress-linear-bar.mud-progress-linear-1-indeterminate.vertical,
    .mud-progress-linear .mud-progress-linear-bar.mud-progress-linear-2-indeterminate.horizontal,
    .mud-progress-linear .mud-progress-linear-bar.mud-progress-linear-2-indeterminate.vertical,
    .mud-progress-linear.horizontal .mud-progress-linear-dashed,
    .mud-progress-linear.mud-progress-linear-striped .mud-progress-linear-bar,
    .mud-treeview-item-arrow .mud-treeview-item-arrow-load { animation: none; }

    /* Diálogo (pop-in) + scrim del overlay (fade): sin animación de entrada. */
    .mud-dialog { animation: none; }
    .mud-overlay .mud-overlay-scrim { animation: none; }

    /* Popover (cubre menú/tooltip/select/autocompletado, que se pintan como popover)
       + pestañas (slider y deslizamiento de paneles): sin transición. */
    .mud-popover.mud-popover-open { transition: none; }
    .mud-tab-slider.mud-tab-slider-horizontal,
    .mud-tab-slider.mud-tab-slider-vertical,
    .mud-tabs-tabbar-content .mud-tabs-tabbar-wrapper,
    .mud-tabs-panels { transition: none; }
}

/* ── i18n slice 2: LanguageSwitcher (globo del topbar) ───────────────────────────────────────
   Banderas SVG inline (NO emoji: en Windows Chrome/Edge los emoji de bandera regional se
   renderizan como texto "ES"/"GB" en vez del icono). Tamaño fijo 20×14 con esquinas redondeadas,
   estirando el viewBox del SVG (preserveAspectRatio="none") al recuadro para que ambas banderas
   midan igual en el menú pese a tener proporciones nativas distintas (3:2 vs 2:1). */
.hlx-lang-flag {
    display: inline-flex; flex: none;
    width: 20px; height: 14px; border-radius: 3px; overflow: hidden;
    /* Borde que separa la bandera del fondo del menú en AMBOS temas: en oscuro un rgba(0,0,0,…)
       fijo dejaba invisible el azul marino del Union Jack. var(--helix-border) es theme-aware. */
    box-shadow: 0 0 0 1px var(--helix-border) inset;
}
.hlx-lang-flag svg { display: block; width: 100%; height: 100%; }
.hlx-lang-flag-icon.mud-icon-root { font-size: 16px; flex: none; color: var(--helix-muted); width: 20px; text-align: center; }
.hlx-lang-menu .mud-list-item-icon { min-width: 0; }
/* Target táctil ≥44px en los ítems del menú de idioma (el MudMenu va Dense por compacidad del popover). */
.hlx-lang-menu .mud-list-item { min-height: 44px; }

/* Ídem para el menú «Añadir filtro» del panel de filtros: el popover de MudMenu se porta fuera del
   árbol del componente (PopoverClass, no Class), así que el CSS aislado del panel no lo alcanza y
   esto va en global. MudMenuItem renderiza .mud-menu-item, no .mud-list-item (MudList sí usa esa). */
.hlx-filter-add-menu .mud-menu-item { min-height: 44px; }

/* ── Rediseño «Mi perfil» (1c · Columna enfocada) ─────────────────────────────────────────────
   Contenedor centrado ~720px con dos grupos temáticos: un kicker + UNA .helix-card por grupo,
   con filas separadas por hairline en vez de una tarjeta por ajuste (regla: nunca anidar cards). */
.hlx-perfil-container { max-width: 720px; padding: 48px 24px; }
@media (max-width: 960px) {
    .hlx-perfil-container { max-width: 100%; padding: 32px 16px; }
}

.hlx-perfil-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    margin-bottom: 20px;
}

/* Chip de autoguardado: reposo (neutro) / flash "Guardado" (verde, ~1.6s, ver @code). Solo
   opacidad/color transicionan bajo reduced-motion (sin transform/scale). */
.hlx-autosave-chip {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    padding: 6px 12px; border-radius: 999px; font-size: 12px;
    background: var(--helix-panel-2); border: 1px solid var(--helix-border); color: var(--helix-muted);
    transition: background .2s var(--ease-out, ease), border-color .2s var(--ease-out, ease),
                color .2s var(--ease-out, ease), opacity .25s var(--ease-out, ease);
    white-space: nowrap;
}
.hlx-autosave-chip--saved {
    background: var(--st-solved-bg); border-color: var(--st-solved); color: var(--st-solved); font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
    .hlx-autosave-chip { transition: opacity .01s linear, color .01s linear; }
}

/* .hlx-collapsible (OOF reveal, ver Perfil.razor) no tenía override de prefers-reduced-motion
   pese al comentario que lo afirmaba (Julia, fix pass) — se añade aquí junto al resto de
   overrides de este rediseño. */
@media (prefers-reduced-motion: reduce) {
    .hlx-collapsible { transition: none; }
}

.hlx-perfil-hero { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }

/* Pill de disponibilidad: reflejo de solo lectura (AgentAvailability se cambia desde el topbar).
   Sin hover/focus interactivo a propósito — no es un control. */
.hlx-avail-pill {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: var(--st-solved-bg); color: var(--st-solved);
    cursor: default; user-select: none;
}

.hlx-perfil-kicker {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
    color: var(--helix-muted); margin: 0 2px 10px;
}
.hlx-perfil-kicker:not(:first-of-type) { margin-top: 28px; }

/* Fila de ajuste: label+descripción a la izquierda, control a la derecha. Hairline entre filas
   del mismo grupo (--helix-border, NO --helix-hairline: ese token no existe en el codebase). */
.hlx-perfil-row {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    padding: 18px 20px;
}
.hlx-perfil-row + .hlx-perfil-row,
.hlx-collapsible + .hlx-perfil-row { border-top: 1px solid var(--helix-border); }
.hlx-perfil-row-main { min-width: 0; }
.hlx-perfil-row-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.hlx-perfil-row-desc { font-size: 12px; color: var(--helix-muted); margin-top: 3px; }
.hlx-perfil-row-control { flex: 0 0 auto; margin-top: 2px; }
/* MudSelect en una fila de ajustes: `Class` aterriza en un elemento INTERNO, no en el div raíz que
   es el hijo flex, así que la raíz hay que acotarla aquí o se estira y el control no cuadra. */
.hlx-perfil-row > .mud-select { flex: 0 0 200px; width: 200px; margin-top: 2px; }
/* Fila del reveal OOF: continuación de la fila del toggle (dentro de .hlx-collapsible-inner),
   no una fila nueva — sin hairline propio ni padding superior. */
.hlx-perfil-row--sub { padding-top: 0; border-top: none; }

.hlx-perfil-radios { padding: 0 20px 6px; }

/* Empty state de snippets DENTRO de la card (icono + texto + botón adyacente), no una fila vacía. */
.hlx-perfil-empty {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    color: var(--helix-muted); font-size: 13px;
}

.hlx-perfil-snippet-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 0;
}
.hlx-perfil-snippet-row + .hlx-perfil-snippet-row { border-top: 1px solid var(--helix-border); }
.hlx-perfil-snippet-chip.mud-chip {
    font-family: var(--helix-font-mono, monospace); font-size: 12px;
    background: rgba(206, 0, 0, .08); color: var(--helix-red);
    padding: 4px 9px; border-radius: 7px; height: auto;
}

/* Target táctil ≥44px en icon-buttons de snippet / "Nuevo snippet", con foco visible propio
   (Kit Táctil: outline 2px rojo, offset 2px). */
.hlx-perfil-icon-btn.mud-icon-button {
    min-width: 44px; min-height: 44px;
}
.hlx-perfil-icon-btn.mud-icon-button:focus-visible,
.hlx-perfil-snippet-new:focus-visible {
    outline: 2px solid var(--helix-focus-ring); outline-offset: 2px;
}
.hlx-perfil-snippet-new.mud-button-root {
    min-height: 44px;
}