/* ============================================================
   HUNTER THEME — Elixir Software (paleta corporativa)
   ============================================================ */

:root {
    /* Paleta Elixir Software */
    --elixir-primary: #121080;
    --elixir-secondary: #2D3FA3;
    --elixir-cyan: #6EC6F5;
    --elixir-turquoise: #6EC6F5; /* alias azul claro — sin turquesa verde */
    --elixir-gold: #FFC76E;
    --elixir-orange: #FF963D;
    --elixir-blue-medium: #2D3FA3;
    --elixir-blue-light: #6EC6F5;
    --elixir-violet: #7226B9;
    --elixir-violet-light: #B266E5;
    --elixir-success: #B7E249;
    --elixir-success-deep: #2FA36B;
    --elixir-error: #FF6B6B;
    --elixir-bg-light: #F5F3F0;
    --elixir-beige: #F3DDC8;
    --elixir-gray-light: #E6E6E6;
    --elixir-gray-medium: #9CA3AF;
    --elixir-gray-dark: #4B5563;
    --elixir-black: #050505;
    --elixir-white: #FFFFFF;

    --hunter-bg: #080660;
    --hunter-frame: #0e0c70;
    --hunter-accent-start: var(--elixir-primary);
    --hunter-accent-end: var(--elixir-secondary);
    --hunter-accent-cyan: var(--elixir-cyan);
    --hunter-accent-violet: var(--elixir-violet);
    --hunter-accent-green: var(--elixir-turquoise);
    --hunter-text: var(--elixir-white);
    --hunter-text-muted: var(--elixir-gray-medium);
    --hunter-radius-frame: 28px;
    --hunter-radius-card: 20px;
    --hunter-radius-input: 14px;
    --hunter-radius-sm: 12px;
    --hunter-accent-solid: var(--elixir-primary);
    --hunter-accent-solid-hover: var(--elixir-blue-medium);
    --hunter-accent-solid-active: #0e0d66;
    --hunter-accent-interactive: var(--elixir-primary);
    --hunter-shadow-accent: 0 4px 14px rgba(18, 16, 128, 0.24);
    --hunter-focus-ring: rgba(18, 16, 128, 0.12);
    --hunter-bg-dark:
        radial-gradient(ellipse 70% 55% at 12% 20%, rgba(114, 38, 185, 0.2) 0%, transparent 58%),
        radial-gradient(ellipse 55% 45% at 88% 75%, rgba(45, 63, 163, 0.18) 0%, transparent 52%),
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(18, 16, 128, 0.28) 0%, transparent 60%),
        #080660;
    --hunter-bg-light:
        radial-gradient(ellipse 70% 55% at 15% 10%, rgba(178, 102, 229, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 85% 80%, rgba(110, 198, 245, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(18, 16, 128, 0.04) 0%, transparent 60%),
        #F4F6FB;
}

/* ---------- Fondo global (mismo que login) ---------- */
body[data-theme="dark"],
html[data-theme="dark"],
body:has(.app-shell:not(.app-shell--guest)[data-theme="dark"]),
html:has(.app-shell:not(.app-shell--guest)[data-theme="dark"]) {
    background: var(--hunter-bg-dark) !important;
}

body[data-theme="light"],
html[data-theme="light"],
body:has(.app-shell:not(.app-shell--guest)[data-theme="light"]),
html:has(.app-shell:not(.app-shell--guest)[data-theme="light"]) {
    background: var(--hunter-bg-light) !important;
}

body:has(.app-shell:not(.app-shell--guest)),
body:has(.app-shell:not(.app-shell--guest)) #app {
    color: var(--hunter-card-text, var(--neutral-foreground-rest));
}

/* ============================================================
   TEMA CLARO — tarjetas blancas, fondo suave
   ============================================================ */
.app-shell[data-theme="light"] {
    --hunter-card: var(--elixir-white);
    --hunter-card-text: var(--elixir-black);
    --hunter-card-muted: var(--elixir-gray-dark);
    --hunter-border: var(--elixir-gray-light);
    --hunter-border-subtle: rgba(156, 163, 175, 0.22);
    --hunter-surface: var(--elixir-white);
    --hunter-surface-2: #F7F5FB;
    --hunter-surface-3: color-mix(in srgb, var(--elixir-violet) 4%, var(--elixir-white));
    --hunter-input-bg: var(--elixir-white);
    --hunter-input-border: var(--elixir-gray-light);
    --hunter-page-bg: #F4F6FB;
    --hunter-header-bg: rgba(255, 255, 255, 0.92);
    --hunter-sidebar-bg: rgba(255, 255, 255, 0.96);
    --hunter-sidebar-border: rgba(156, 163, 175, 0.2);
    --hunter-nav-hover: rgba(114, 38, 185, 0.06);
    --hunter-nav-active: rgba(18, 16, 128, 0.09);
    --hunter-accent-interactive: var(--elixir-primary);
    --hunter-shadow-card: 0 1px 2px rgba(5, 5, 5, 0.04),
                          0 8px 28px rgba(18, 16, 128, 0.06);

    /* Fluent UI — tema claro Elixir */
    --neutral-layer-1: #F4F6FB;
    --neutral-layer-2: var(--elixir-white);
    --neutral-layer-3: #F7F5FB;
    --neutral-layer-4: color-mix(in srgb, var(--elixir-violet) 5%, var(--elixir-white));
    --neutral-layer-card-container: var(--elixir-white);
    --neutral-layer-floating: var(--elixir-white);
    --neutral-foreground-rest: var(--elixir-black);
    --neutral-foreground-hint: var(--elixir-gray-medium);
    --neutral-stroke-rest: var(--elixir-gray-light);
    --neutral-stroke-divider-rest: var(--elixir-gray-light);
    --neutral-fill-rest: var(--elixir-white);
    --neutral-fill-input-rest: var(--elixir-white);
    --accent-fill-rest: var(--elixir-primary);
    --accent-fill-hover: var(--elixir-blue-medium);
    --accent-fill-active: var(--hunter-accent-solid-active);
    --foreground-on-accent-rest: var(--elixir-white);
}

/* ============================================================
   TEMA OSCURO — azul corporativo Elixir
   ============================================================ */
.app-shell[data-theme="dark"] {
    --hunter-card: #1a1468;
    --hunter-card-text: var(--elixir-white);
    --hunter-card-muted: #B8B4D4;
    --hunter-border: #3a2f8a;
    --hunter-border-subtle: rgba(178, 102, 229, 0.18);
    --hunter-surface: #1a1468;
    --hunter-surface-2: #120e52;
    --hunter-surface-3: #241c78;
    --hunter-input-bg: #100c4a;
    --hunter-input-border: #3a2f8a;
    --hunter-page-bg: var(--hunter-bg-dark);
    --hunter-header-bg: rgba(10, 7, 72, 0.9);
    --hunter-sidebar-bg: rgba(10, 7, 72, 0.96);
    --hunter-sidebar-border: rgba(178, 102, 229, 0.14);
    --hunter-nav-hover: rgba(114, 38, 185, 0.2);
    --hunter-nav-active: rgba(0, 201, 183, 0.16);
    --hunter-accent-interactive: var(--elixir-secondary);
    --hunter-shadow-card: 0 0 0 1px rgba(178, 102, 229, 0.08),
                          0 8px 32px rgba(0, 0, 0, 0.35);
    --hunter-focus-ring: rgba(0, 201, 183, 0.3);

    /* Fluent UI — tema oscuro Elixir */
    --neutral-layer-1: #0a0748;
    --neutral-layer-2: #1a1468;
    --neutral-layer-3: #120e52;
    --neutral-layer-4: #241c78;
    --neutral-layer-card-container: #1a1468;
    --neutral-layer-floating: #241c78;
    --neutral-foreground-rest: var(--elixir-white);
    --neutral-foreground-hint: #B8B4D4;
    --neutral-stroke-rest: #3a2f8a;
    --neutral-stroke-divider-rest: rgba(178, 102, 229, 0.16);
    --neutral-fill-rest: #1a1468;
    --neutral-fill-hover: rgba(114, 38, 185, 0.2);
    --neutral-fill-active: rgba(0, 201, 183, 0.16);
    --neutral-fill-input-rest: #100c4a;
    --neutral-fill-input-hover: color-mix(in srgb, var(--elixir-violet) 10%, #100c4a);
    --neutral-fill-input-focus: color-mix(in srgb, var(--elixir-turquoise) 8%, #100c4a);
    --neutral-fill-stealth-rest: transparent;
    --neutral-fill-stealth-hover: rgba(114, 38, 185, 0.18);
    --neutral-fill-stealth-active: rgba(107, 79, 158, 0.16);
    --accent-fill-rest: var(--elixir-primary);
    --accent-fill-hover: var(--elixir-blue-medium);
    --accent-fill-active: var(--hunter-accent-solid-active);
    --foreground-on-accent-rest: var(--elixir-white);
    --focus-stroke-outer: var(--elixir-turquoise);
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--hunter-page-bg);
    color: var(--hunter-card-text);
    min-height: 100%;
}

.app-shell .app-header {
    background: var(--hunter-header-bg, var(--hunter-card)) !important;
    border-bottom: 1px solid var(--hunter-border-subtle) !important;
    box-shadow: 0 1px 0 rgba(5, 5, 5, 0.04);
}

.app-shell .app-header__title,
.app-shell .app-brand__text,
.app-shell .app-user__name {
    color: var(--hunter-card-text);
}

.app-shell .app-user__role {
    color: var(--hunter-card-muted);
}

.app-shell .app-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    overflow: visible;
}

.app-shell .app-brand__mark-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: transparent;
}

.app-shell[data-theme="dark"] .app-header__menu-btn,
.app-shell[data-theme="dark"] .app-header__icon-btn {
    color: var(--elixir-white);
}

.app-shell[data-theme="dark"] .app-header__menu-btn:hover,
.app-shell[data-theme="dark"] .app-header__icon-btn:hover,
.app-shell[data-theme="dark"] .app-header__icon-btn:focus-visible {
    color: var(--elixir-secondary);
    background: rgba(255, 255, 255, 0.1);
}

.app-shell[data-theme="light"] .app-header__menu-btn,
.app-shell[data-theme="light"] .app-header__icon-btn {
    color: var(--elixir-gray-dark);
}

.app-shell[data-theme="light"] .app-header__menu-btn:hover,
.app-shell[data-theme="light"] .app-header__icon-btn:hover,
.app-shell[data-theme="light"] .app-header__icon-btn:focus-visible {
    color: var(--elixir-primary);
}

.app-shell .app-header__icon-btn--theme {
    border: 1px solid transparent;
}

.app-shell[data-theme="dark"] .app-header__icon-btn--theme {
    border-color: rgba(255, 199, 110, 0.35);
    background: rgba(255, 199, 110, 0.08);
}

.app-shell[data-theme="light"] .app-header__icon-btn--theme {
    border-color: color-mix(in srgb, var(--elixir-primary) 20%, transparent);
    background: color-mix(in srgb, var(--elixir-primary) 6%, transparent);
}

.app-shell .app-brand__text {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.app-shell .app-header__sep {
    background: var(--hunter-border-subtle);
}

.app-shell .app-header__menu-btn,
.app-shell .app-header__icon-btn {
    color: var(--hunter-card-muted);
}

.app-shell .app-header__menu-btn:hover,
.app-shell .app-header__icon-btn:hover,
.app-shell .app-header__icon-btn:focus-visible {
    background: var(--hunter-nav-hover);
    color: var(--hunter-accent-start);
}

.app-shell .app-user__avatar {
    background: color-mix(in srgb, var(--hunter-accent-start) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--hunter-accent-start) 40%, transparent);
    color: var(--hunter-accent-interactive);
}

.app-shell .app-sidebar {
    background: var(--hunter-sidebar-bg);
    border-right: 1px solid var(--hunter-sidebar-border);
    backdrop-filter: blur(12px);
}

.app-shell .app-main {
    background: transparent;
}

.app-shell .body-content,
.app-shell fluent-body-content {
    background: transparent !important;
}

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
.app-shell .nav-panel {
    background: transparent;
    color: var(--hunter-card-text);
}

.app-shell ::deep a.nav-link-item,
.app-shell .nav-link-item {
    color: var(--hunter-card-muted) !important;
    border-radius: var(--hunter-radius-sm);
}

.app-shell ::deep a.nav-link-item:hover,
.app-shell .nav-link-item:hover {
    background: var(--hunter-nav-hover) !important;
    color: var(--hunter-card-text) !important;
}

.app-shell ::deep a.nav-link-item.active,
.app-shell ::deep a.nav-link-item.active:hover,
.app-shell .nav-link-item.active {
    background: var(--elixir-primary, #121080) !important;
    color: var(--elixir-white, #FFFFFF) !important;
    font-weight: 650;
    box-shadow: 0 4px 14px rgba(18, 16, 128, 0.22);
}

.app-shell .nav-stats {
    background: color-mix(in srgb, var(--hunter-accent-start) 12%, var(--hunter-surface-2));
    border: 1px solid color-mix(in srgb, var(--hunter-accent-start) 22%, var(--hunter-border-subtle));
    border-radius: var(--hunter-radius-sm);
}

.app-shell .nav-stats__brand,
.app-shell .nav-stats__value {
    color: var(--hunter-card-text);
}

.app-shell .nav-stats__label {
    color: var(--hunter-card-muted);
}

.app-shell .nav-stats__version {
    color: var(--hunter-accent-interactive);
}

.app-shell.nav-open .app-backdrop {
    background: rgba(8, 6, 96, 0.65);
}

/* ============================================================
   WRAPPERS DE PÁGINA — tarjetas modernas
   ============================================================ */
.app-shell .contenedor-global,
.app-shell .contenedorgrilla,
.app-shell .contenedor-principal,
.app-shell .contenedor-principal-empresa,
.app-shell .contenedor,
.app-shell .theme-settings-panel {
    background: transparent;
    color: var(--hunter-card-text);
    padding: 1rem 1.15rem;
    box-sizing: border-box;
}

.app-shell .contenedor-global h3,
.app-shell .contenedorgrilla h3,
.app-shell .contenedor-principal h3,
.app-shell .contenedor-principal-empresa h3 {
    margin: 0 0 0.85rem;
    font-size: 1.15rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--hunter-card-text);
}

.app-shell .contenedor-global .subtitle,
.app-shell .contenedorgrilla .subtitle {
    color: var(--hunter-card-muted);
    font-size: 0.875rem;
    margin: 0;
}

/* FluentCard → estilo login card */
.app-shell fluent-card,
.app-shell .fluent-card {
    background: var(--hunter-card) !important;
    border: 1px solid var(--hunter-border-subtle) !important;
    border-radius: var(--hunter-radius-card) !important;
    box-shadow: var(--hunter-shadow-card) !important;
    color: var(--hunter-card-text) !important;
    overflow: hidden;
}

.app-shell fluent-card::part(card),
.app-shell .fluent-card::part(card) {
    background: var(--hunter-card);
    border-radius: var(--hunter-radius-card);
}

/* ============================================================
   TARJETAS, SECCIONES, FILTROS
   ============================================================ */
.app-shell .tarjeta,
.app-shell .tarjeta-config,
.app-shell .tarjeta-informativa,
.app-shell .seccion-secundaria,
.app-shell .filtros-simples,
.app-shell .columnaempresa-40,
.app-shell .columnaempresa-60,
.app-shell .contenedor-flex-filtro,
.app-shell .contenedor-flex-barra {
    background: var(--hunter-card);
    color: var(--hunter-card-text);
    border: 1px solid var(--hunter-border-subtle);
    border-radius: var(--hunter-radius-card);
    box-shadow: var(--hunter-shadow-card);
}

.app-shell .tarjeta-cabecera {
    background: var(--hunter-surface-3);
    color: var(--hunter-card-text);
    border-bottom: 1px solid var(--hunter-border-subtle);
}

.app-shell .filtros,
.app-shell .filtros-generales {
    background: color-mix(in srgb, var(--hunter-accent-start) 6%, var(--hunter-card));
    border: 1px solid color-mix(in srgb, var(--hunter-accent-start) 16%, var(--hunter-border-subtle));
    border-radius: var(--hunter-radius-card);
    box-shadow: var(--hunter-shadow-card);
}

.app-shell .contenedor-principal,
.app-shell .seccion-superior,
.app-shell .seccion-inferior,
.app-shell .columna-40,
.app-shell .columna-60 {
    background: transparent;
    color: var(--hunter-card-text);
}

.app-shell .contendor-reporte .col-30,
.app-shell .contendor-reporte .col-70,
.app-shell .tabla-header-reporte {
    background: var(--hunter-card);
    color: var(--hunter-card-text);
    border: 1px solid var(--hunter-border-subtle);
    border-radius: var(--hunter-radius-card);
    box-shadow: var(--hunter-shadow-card);
}

.app-shell .tarjeta-informativa .tarjeta-valor {
    color: var(--hunter-card-text);
    font-weight: 800;
}

.app-shell .tarjeta-informativa .tarjeta-texto {
    color: var(--hunter-card-muted);
}

/* ============================================================
   TICKETS
   ============================================================ */
.app-shell .containerTk {
    --tk-page-bg: transparent;
    --tk-card-bg: var(--hunter-card);
    --tk-border: 1px solid var(--hunter-border-subtle);
    --tk-shadow: var(--hunter-shadow-card);
    --tk-radius: var(--hunter-radius-card);
    background: transparent;
    color: var(--hunter-card-text);
    padding: 1rem;
}

.app-shell .tk-filters,
.app-shell .left_tk,
.app-shell .right_tk,
.app-shell .ticket-toolbar {
    background: var(--hunter-card);
    border-color: var(--hunter-border-subtle);
    box-shadow: var(--hunter-shadow-card);
}

.app-shell .tk-filters__title,
.app-shell .tk-label,
.app-shell .ticket-readonly-title {
    color: var(--hunter-card-text);
}

.app-shell .tk-label {
    color: var(--hunter-card-muted);
}

.app-shell .tk-filters__icon,
.app-shell .tk-btn-link {
    color: var(--hunter-accent-start) !important;
}

.app-shell .ticket-readonly-sub,
.app-shell .tk-state {
    color: var(--hunter-card-muted);
}

/* ============================================================
   DATA GRID
   ============================================================ */
.app-shell .dilitium-datagrid {
    background: var(--hunter-card);
    border: 1px solid var(--hunter-border-subtle);
    border-radius: var(--hunter-radius-sm);
    box-shadow: var(--hunter-shadow-card);
}

.app-shell .datagrid-table thead tr:first-child,
.app-shell .datagrid-table th {
    background: var(--hunter-surface-3) !important;
    background-image: none !important;
    color: var(--hunter-card-text) !important;
    border-color: var(--hunter-border-subtle) !important;
}

.app-shell .datagrid-table th .column-title,
.app-shell .datagrid-table th .btn-sort,
.app-shell .datagrid-table th .btn-group {
    color: var(--hunter-card-muted) !important;
}

.app-shell .datagrid-table th .btn-sort:hover,
.app-shell .datagrid-table th .btn-group:hover {
    color: var(--hunter-card-text) !important;
    background: color-mix(in srgb, var(--hunter-card-text) 8%, transparent);
}

.app-shell .datagrid-table tbody tr {
    background: var(--hunter-card);
    border-color: var(--hunter-border-subtle);
}

.app-shell .datagrid-table td {
    color: var(--hunter-card-text);
    border-color: var(--hunter-border-subtle);
    background: transparent;
}

/* Zebra: tonos azul corporativo (nunca negro puro) */
.app-shell .striped-rows tbody tr:nth-child(odd),
.app-shell .striped-rows .data-row:nth-child(odd) {
    background: var(--hunter-card) !important;
}

.app-shell .striped-rows tbody tr:nth-child(even),
.app-shell .striped-rows .data-row:nth-child(even) {
    background: color-mix(in srgb, var(--hunter-card-text) 5.5%, var(--hunter-card)) !important;
}

.app-shell[data-theme="dark"] .striped-rows tbody tr:nth-child(even),
.app-shell[data-theme="dark"] .striped-rows .data-row:nth-child(even) {
    background: #1a1878 !important;
}

.app-shell[data-theme="light"] .striped-rows tbody tr:nth-child(even),
.app-shell[data-theme="light"] .striped-rows .data-row:nth-child(even) {
    background: color-mix(in srgb, var(--elixir-primary) 3%, var(--elixir-white)) !important;
}

.app-shell .hover-rows .data-row:hover {
    background: var(--hunter-nav-hover) !important;
}

.app-shell .data-row.selected {
    background: var(--hunter-nav-active) !important;
    border-left-color: var(--hunter-accent-start);
}

.app-shell .datagrid-pagination,
.app-shell .datagrid-toolbar,
.app-shell .filter-row th {
    background: var(--hunter-surface-2);
    border-color: var(--hunter-border-subtle);
    color: var(--hunter-card-text);
}

.app-shell .filter-input {
    background: var(--hunter-input-bg);
    border-color: var(--hunter-input-border);
    color: var(--hunter-card-text);
}

.app-shell .btn-page.active {
    background: var(--hunter-accent-solid);
    border-color: var(--hunter-accent-solid);
    color: #fff;
    box-shadow: 0 2px 8px rgba(18, 16, 128, 0.28);
}

/* ============================================================
   FLUENT UI — inputs, selects, tabs (sin gris “plomo” en hover/foco)
   ============================================================ */
.app-shell fluent-text-field,
.app-shell fluent-text-area,
.app-shell fluent-select,
.app-shell fluent-combobox,
.app-shell fluent-date-picker,
.app-shell fluent-time-picker,
.app-shell fluent-number-field,
.app-shell fluent-search {
    --neutral-fill-rest: var(--hunter-input-bg);
    --neutral-fill-input-rest: var(--hunter-input-bg);
    --neutral-fill-hover: color-mix(in srgb, var(--hunter-accent-start) 8%, var(--hunter-input-bg));
    --neutral-fill-active: color-mix(in srgb, var(--hunter-accent-start) 12%, var(--hunter-input-bg));
    --neutral-fill-input-hover: color-mix(in srgb, var(--hunter-accent-start) 8%, var(--hunter-input-bg));
    --neutral-fill-input-focus: color-mix(in srgb, var(--hunter-accent-start) 10%, var(--hunter-input-bg));
    --neutral-fill-input-active: color-mix(in srgb, var(--hunter-accent-start) 12%, var(--hunter-input-bg));
    --neutral-stroke-rest: var(--hunter-input-border);
    --neutral-stroke-hover: color-mix(in srgb, var(--hunter-accent-start) 55%, var(--hunter-input-border));
    --neutral-stroke-focus: var(--hunter-accent-start);
    --neutral-stroke-active: var(--hunter-accent-start);
    --focus-stroke-outer: var(--hunter-accent-start);
    --focus-stroke-inner: transparent;
    --neutral-foreground-rest: var(--hunter-card-text);
    --neutral-foreground-hint: var(--hunter-card-muted);
    --neutral-layer-floating: var(--hunter-surface-3);
    --control-corner-radius: 12px;
}

/* Control interno: hover/foco con acento violeta (no gris Fluent) */
.app-shell fluent-text-field::part(control),
.app-shell fluent-text-area::part(control),
.app-shell fluent-select::part(control),
.app-shell fluent-combobox::part(control),
.app-shell fluent-date-picker::part(control),
.app-shell fluent-number-field::part(control),
.app-shell fluent-search::part(control) {
    background: var(--hunter-input-bg) !important;
    color: var(--hunter-card-text) !important;
    border-color: var(--hunter-input-border) !important;
    caret-color: var(--hunter-accent-start);
}

.app-shell fluent-text-field:hover::part(control),
.app-shell fluent-text-area:hover::part(control),
.app-shell fluent-select:hover::part(control),
.app-shell fluent-combobox:hover::part(control),
.app-shell fluent-date-picker:hover::part(control),
.app-shell fluent-number-field:hover::part(control),
.app-shell fluent-search:hover::part(control) {
    background: color-mix(in srgb, var(--hunter-accent-start) 8%, var(--hunter-input-bg)) !important;
    border-color: color-mix(in srgb, var(--hunter-accent-start) 55%, var(--hunter-input-border)) !important;
}

.app-shell fluent-text-field:focus-within::part(control),
.app-shell fluent-text-area:focus-within::part(control),
.app-shell fluent-select:focus-within::part(control),
.app-shell fluent-combobox:focus-within::part(control),
.app-shell fluent-date-picker:focus-within::part(control),
.app-shell fluent-number-field:focus-within::part(control),
.app-shell fluent-search:focus-within::part(control) {
    background: color-mix(in srgb, var(--hunter-accent-start) 10%, var(--hunter-input-bg)) !important;
    border-color: var(--hunter-accent-start) !important;
    box-shadow: 0 0 0 3px var(--hunter-focus-ring) !important;
}

/* Botones Fluent — sólidos, sin degradados ni hover gris */
.app-shell fluent-button {
    --control-corner-radius: 12px;
    --neutral-fill-stealth-rest: transparent;
    --neutral-fill-stealth-hover: var(--hunter-nav-hover);
    --neutral-fill-stealth-active: var(--hunter-nav-active);
    --neutral-fill-rest: var(--hunter-surface-3);
    --neutral-fill-hover: var(--hunter-nav-hover);
    --neutral-fill-active: var(--hunter-nav-active);
    --neutral-foreground-rest: var(--hunter-card-text);
    --neutral-stroke-rest: var(--hunter-border);
    --neutral-stroke-hover: var(--hunter-accent-start);
    --focus-stroke-outer: var(--hunter-accent-start);
}

.app-shell fluent-button[appearance="accent"],
.app-shell fluent-button[appearance="Accent"] {
    --accent-fill-rest: var(--hunter-accent-solid);
    --accent-fill-hover: var(--hunter-accent-solid-hover);
    --accent-fill-active: var(--hunter-accent-solid-active);
    --foreground-on-accent-rest: #ffffff;
    --foreground-on-accent-hover: #ffffff;
    --foreground-on-accent-active: #ffffff;
    background: transparent !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}

.app-shell fluent-button[appearance="accent"]::part(control),
.app-shell fluent-button[appearance="Accent"]::part(control) {
    background: var(--hunter-accent-solid) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: var(--hunter-shadow-accent) !important;
}

.app-shell fluent-button[appearance="accent"]:hover:not([disabled]),
.app-shell fluent-button[appearance="Accent"]:hover:not([disabled]) {
    background: transparent !important;
    color: #fff !important;
}

.app-shell fluent-button[appearance="accent"]:hover:not([disabled])::part(control),
.app-shell fluent-button[appearance="Accent"]:hover:not([disabled])::part(control) {
    background: var(--hunter-accent-solid-hover) !important;
    color: #fff !important;
    border: none !important;
}

.app-shell fluent-button[appearance="accent"]:active:not([disabled]),
.app-shell fluent-button[appearance="Accent"]:active:not([disabled]) {
    background: transparent !important;
}

.app-shell fluent-button[appearance="accent"]:active:not([disabled])::part(control),
.app-shell fluent-button[appearance="Accent"]:active:not([disabled])::part(control) {
    background: var(--hunter-accent-solid-active) !important;
    border: none !important;
}

.app-shell fluent-button[appearance="accent"]:focus-visible::part(control),
.app-shell fluent-button[appearance="Accent"]:focus-visible::part(control) {
    outline: 2px solid var(--hunter-accent-interactive) !important;
    outline-offset: 2px !important;
    box-shadow: var(--hunter-shadow-accent) !important;
}

.app-shell fluent-button[appearance="outline"],
.app-shell fluent-button[appearance="Outline"] {
    --neutral-stroke-rest: var(--hunter-border);
    --neutral-stroke-hover: var(--hunter-accent-interactive);
    --neutral-foreground-rest: var(--hunter-card-text);
    --neutral-fill-rest: transparent;
    --neutral-fill-hover: var(--hunter-nav-hover);
    --neutral-fill-active: var(--hunter-nav-active);
    background: transparent !important;
    color: var(--hunter-card-text) !important;
    border: none !important;
    box-shadow: none !important;
}

.app-shell fluent-button[appearance="outline"]::part(control),
.app-shell fluent-button[appearance="Outline"]::part(control) {
    background: transparent !important;
    color: var(--hunter-card-text) !important;
    border: 1px solid var(--hunter-border) !important;
    box-shadow: none !important;
}

.app-shell fluent-button[appearance="outline"]:hover:not([disabled]),
.app-shell fluent-button[appearance="Outline"]:hover:not([disabled]) {
    background: transparent !important;
    color: var(--hunter-accent-interactive) !important;
}

.app-shell fluent-button[appearance="outline"]:hover:not([disabled])::part(control),
.app-shell fluent-button[appearance="Outline"]:hover:not([disabled])::part(control) {
    background: var(--hunter-nav-hover) !important;
    border-color: var(--hunter-accent-interactive) !important;
    color: var(--hunter-accent-interactive) !important;
}

.app-shell fluent-button[appearance="stealth"],
.app-shell fluent-button[appearance="Stealth"],
.app-shell fluent-button[appearance="lightweight"],
.app-shell fluent-button[appearance="Lightweight"] {
    --neutral-fill-stealth-rest: transparent;
    --neutral-fill-stealth-hover: var(--hunter-nav-hover);
    --neutral-fill-stealth-active: var(--hunter-nav-active);
    --neutral-foreground-rest: var(--hunter-card-muted);
    background: transparent !important;
    color: var(--hunter-card-muted) !important;
    box-shadow: none !important;
    border: none !important;
}

.app-shell fluent-button[appearance="stealth"]:hover:not([disabled]),
.app-shell fluent-button[appearance="Stealth"]:hover:not([disabled]),
.app-shell fluent-button[appearance="lightweight"]:hover:not([disabled]),
.app-shell fluent-button[appearance="Lightweight"]:hover:not([disabled]) {
    background: var(--hunter-nav-hover) !important;
    color: var(--hunter-accent-interactive) !important;
}

.app-shell fluent-tabs::part(tablist) {
    border-bottom-color: var(--hunter-border-subtle);
}

.app-shell fluent-tab[aria-selected="true"] {
    color: var(--hunter-accent-start);
}

.app-shell fluent-tab:hover {
    color: var(--hunter-accent-interactive);
}

.app-shell fluent-divider {
    --neutral-stroke-divider-rest: var(--hunter-border-subtle);
}

.app-shell hr {
    border-color: var(--hunter-border-subtle);
    opacity: 1;
}

/* Listbox / popup flotante */
body:has(.app-shell[data-theme="dark"]) fluent-select::part(listbox),
body:has(.app-shell[data-theme="dark"]) fluent-combobox::part(listbox) {
    background: #1a1878;
    border: 1px solid #2D3FA3;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

body:has(.app-shell[data-theme="light"]) fluent-select::part(listbox),
body:has(.app-shell[data-theme="light"]) fluent-combobox::part(listbox) {
    background: var(--elixir-white);
    border: 1px solid var(--elixir-gray-light);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(5, 5, 5, 0.12);
}

/* ============================================================
   MODALES
   ============================================================ */
.app-shell .modal-overlay,
.modal-overlay {
    background: rgba(8, 6, 96, 0.62);
    backdrop-filter: blur(4px);
}

.app-shell .modal-container,
.modal-container {
    background: var(--hunter-card, var(--neutral-layer-2));
    border: 1px solid var(--hunter-border-subtle, var(--neutral-stroke-divider-rest));
    border-radius: var(--hunter-radius-card, 16px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    color: var(--hunter-card-text, var(--neutral-foreground-rest));
    overflow: hidden;
}

.app-shell .modal-header,
.modal-header {
    background: var(--hunter-accent-solid, var(--elixir-primary));
    color: #fff;
    border-bottom: none;
    padding: 0.85rem 1.15rem;
}

.app-shell .modal-header fluent-label,
.modal-header fluent-label {
    color: #fff !important;
}

.app-shell .modal-body,
.modal-body {
    background: var(--hunter-card, var(--neutral-layer-2));
    color: var(--hunter-card-text, var(--neutral-foreground-rest));
    padding: 1.15rem;
}

/* ============================================================
   BOTONES Y ENLACES
   ============================================================ */
.app-shell .btn-login,
.app-shell .btn-primary.hunter-accent {
    background: var(--hunter-accent-solid);
    border: none;
    box-shadow: var(--hunter-shadow-accent);
    color: #fff;
    border-radius: 12px;
}

.app-shell .btn-login:hover:not(:disabled),
.app-shell .btn-primary.hunter-accent:hover {
    background: var(--hunter-accent-solid-hover);
}

.app-shell a:not(.nav-link-item):not(.app-brand),
.app-shell .btn-link {
    color: var(--hunter-accent-start);
}

.app-shell .app-header .por-concluir-btn {
    border-color: color-mix(in srgb, var(--elixir-orange) 45%, var(--hunter-border-subtle));
    background: color-mix(in srgb, var(--elixir-orange) 14%, var(--hunter-card));
    color: var(--hunter-card-text);
    border-radius: 10px;
}

/* Selección de texto acorde a la paleta (no gris del sistema) */
.app-shell ::selection {
    background: color-mix(in srgb, var(--hunter-accent-start) 40%, transparent);
    color: var(--hunter-card-text);
}

.app-shell ::-moz-selection {
    background: color-mix(in srgb, var(--hunter-accent-start) 40%, transparent);
    color: var(--hunter-card-text);
}

/* ============================================================
   REPORTERÍA / USUARIOS — panel grilla
   ============================================================ */
.app-shell .usuarios-panel,
.app-shell .contenedorgrilla {
    min-height: 0;
}

.app-shell .usuarios-panel .usuarios-search-hint {
    color: var(--hunter-card-muted);
}

.app-shell .theme-settings__hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--hunter-card-muted);
    line-height: 1.5;
    max-width: 36rem;
}

.app-shell .header-flex {
    background: transparent;
}

/* Scrollbars modernos */
.app-shell ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.app-shell ::-webkit-scrollbar-track {
    background: transparent;
}

.app-shell ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--hunter-accent-start) 35%, var(--hunter-border));
    border-radius: 999px;
}

.app-shell ::-webkit-scrollbar-thumb:hover {
    background: var(--hunter-accent-start);
}

/* ============================================================
   COMFORT LAYER — páginas internas alineadas al login
   (sobrescribe CSS de dominio: bordes light-only, tipografías,
   sombras agresivas, tablas y FluentDataGrid)
   ============================================================ */

.app-shell {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.app-shell .contenedor-principal,
.app-shell .contenedor-principal-empresa,
.app-shell .contenedorgrilla,
.app-shell .contendor-reporte,
.app-shell .containerTk,
.app-shell .tarjeta-informativa,
.app-shell .dilitium-datagrid,
.app-shell .grilla-detalle,
.app-shell .usuarios-panel,
.app-shell .brand-title,
.app-shell .brand-subtitle {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Sombras suaves (sin glow violeta agresivo del legacy) */
.app-shell .filtros-simples,
.app-shell .columna-40,
.app-shell .columna-60,
.app-shell .columnaempresa-40,
.app-shell .columnaempresa-60,
.app-shell .tabla-header,
.app-shell .contendor-reporte .col-30,
.app-shell .contendor-reporte .col-70,
.app-shell .tarjeta-informativa {
    background: var(--hunter-card) !important;
    color: var(--hunter-card-text) !important;
    border: 1px solid var(--hunter-border-subtle) !important;
    border-radius: var(--hunter-radius-card) !important;
    box-shadow: var(--hunter-shadow-card) !important;
}

.app-shell .contenedor-principal {
    background: transparent !important;
    color: var(--hunter-card-text);
    font-family: inherit;
    padding: 1rem 1.15rem;
}

.app-shell .seccion-inferior,
.app-shell .seccion-inferior-empresa {
    gap: 1rem;
}

/* Bordes y zebra dark-aware en grillas legacy */
.app-shell .grilla-detalle th {
    background: var(--hunter-surface-3) !important;
    color: var(--hunter-card-text) !important;
    border-color: var(--hunter-border-subtle) !important;
}

.app-shell .grilla-detalle td {
    background: var(--hunter-card) !important;
    color: var(--hunter-card-text) !important;
    border-right: 1px solid var(--hunter-border-subtle) !important;
    border-bottom: 1px solid var(--hunter-border-subtle) !important;
}

.app-shell .grilla-detalle tr:nth-child(even) td {
    background: color-mix(in srgb, var(--elixir-primary) 3%, var(--hunter-card)) !important;
}

.app-shell .grilla-detalle tr:hover td {
    background: var(--hunter-nav-hover) !important;
    border-bottom-color: color-mix(in srgb, var(--hunter-accent-start) 35%, var(--hunter-border-subtle)) !important;
}

.app-shell .form-header {
    border-bottom: 1px solid var(--hunter-border-subtle) !important;
}

.app-shell .form-header h3,
.app-shell .tabla-header h3,
.app-shell .tabla-header-reporte h3,
.app-shell .filtro-item label,
.app-shell .form-label {
    color: var(--hunter-card-text) !important;
}

.app-shell .tarjeta-informativa {
    font-family: inherit !important;
}

.app-shell .tarjeta-informativa .tarjeta-valor {
    color: var(--hunter-accent-start);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.app-shell .tarjeta-informativa .tarjeta-texto {
    color: var(--hunter-card-muted);
}

.app-shell .tarjeta-izquierda {
    border-right-color: var(--hunter-border-subtle) !important;
}

.app-shell .tarjeta-config:hover {
    box-shadow: var(--hunter-shadow-card);
}

/* Botones Bootstrap legacy → accent Hunter sólido */
.app-shell .btn-primary {
    color: #fff !important;
    background: var(--hunter-accent-solid) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: var(--hunter-shadow-accent);
    font-weight: 700;
}

.app-shell .btn-primary:hover {
    background: var(--hunter-accent-solid-hover) !important;
    filter: none;
}

.app-shell .btn-secondary-outline {
    border-color: var(--hunter-border) !important;
    color: var(--hunter-card-muted) !important;
    border-radius: 12px;
}

.app-shell .btn-secondary-outline:hover {
    background: var(--hunter-nav-hover) !important;
    color: var(--hunter-card-text) !important;
    border-color: var(--hunter-accent-start) !important;
}

/* FluentDataGrid (Usuarios, Reportería, Soporte) */
.app-shell fluent-data-grid,
.app-shell .fluent-data-grid,
.app-shell .tabla-dinamica .fluent-data-grid {
    background: var(--hunter-card) !important;
    color: var(--hunter-card-text) !important;
    border: 1px solid var(--hunter-border-subtle);
    border-radius: var(--hunter-radius-sm);
    overflow: hidden;
}

.app-shell fluent-data-grid-row,
.app-shell .fluent-data-grid-row,
.app-shell .tabla-dinamica .fluent-data-grid-row {
    background: var(--hunter-card) !important;
    border-bottom: 1px solid var(--hunter-border-subtle) !important;
    color: var(--hunter-card-text) !important;
}

.app-shell fluent-data-grid-row:hover,
.app-shell .fluent-data-grid-row:hover,
.app-shell .tabla-dinamica .fluent-data-grid-row:hover {
    background: var(--hunter-nav-hover) !important;
}

.app-shell .tabla-dinamica .fluent-data-grid-row.fila-seleccionada,
.app-shell .tabla-dinamica .fluent-data-grid-row.fila-seleccionada:hover {
    background: var(--hunter-nav-active) !important;
}

.app-shell fluent-data-grid-cell,
.app-shell .fluent-data-grid-cell,
.app-shell .tabla-dinamica .fluent-data-grid-cell,
.app-shell fluent-data-grid-header-cell,
.app-shell .fluent-data-grid-header-cell,
.app-shell .tabla-dinamica .fluent-data-grid-header-cell {
    color: var(--hunter-card-text) !important;
    border-color: var(--hunter-border-subtle) !important;
}

.app-shell .tabla-dinamica .fluent-data-grid-header,
.app-shell .tabla-dinamica .fluent-data-grid-header-row,
.app-shell fluent-data-grid-header-row {
    background: var(--hunter-surface-3) !important;
    color: var(--hunter-card-muted) !important;
}

/* Campos Fluent — hover/foco con tinte violeta (sin gris plomo) */
.app-shell .fluent-text-field,
.app-shell .fluent-text-area,
.app-shell .fluent-combobox {
    background: var(--hunter-input-bg) !important;
    color: var(--hunter-card-text) !important;
    box-shadow: none !important;
    border-radius: var(--hunter-radius-sm) !important;
}

.app-shell .fluent-text-field:hover,
.app-shell .fluent-text-area:hover,
.app-shell .fluent-combobox:hover {
    transform: none !important;
    background: color-mix(in srgb, var(--hunter-accent-start) 8%, var(--hunter-input-bg)) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--hunter-accent-start) 45%, transparent) !important;
}

.app-shell .fluent-text-field:focus-within,
.app-shell .fluent-text-area:focus-within,
.app-shell .fluent-combobox:focus-within {
    transform: none !important;
    background: color-mix(in srgb, var(--hunter-accent-start) 10%, var(--hunter-input-bg)) !important;
    box-shadow: 0 0 0 3px var(--hunter-focus-ring) !important;
}

.app-shell[data-theme="dark"] {
    --hunter-focus-ring: rgba(22, 182, 220, 0.32);
}

/* Inputs nativos / filtros de grilla */
.app-shell .filter-input,
.app-shell .debounced-search-with-icon,
.app-shell input[type="text"],
.app-shell input[type="search"],
.app-shell input[type="password"],
.app-shell textarea,
.app-shell select {
    caret-color: var(--hunter-accent-start);
}

.app-shell .filter-input:hover,
.app-shell .debounced-search-with-icon:hover {
    background: color-mix(in srgb, var(--hunter-accent-start) 8%, var(--hunter-input-bg)) !important;
    border-color: color-mix(in srgb, var(--hunter-accent-start) 50%, var(--hunter-input-border)) !important;
}

.app-shell .filter-input:focus,
.app-shell .debounced-search-with-icon:focus {
    background: color-mix(in srgb, var(--hunter-accent-start) 10%, var(--hunter-input-bg)) !important;
    border-color: var(--hunter-accent-start) !important;
    box-shadow: 0 0 0 2px var(--hunter-focus-ring) !important;
    outline: none;
}

.app-shell .debounced-search-with-icon {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    color: var(--hunter-card-text) !important;
    background-color: var(--hunter-input-bg) !important;
}

/* Tickets — tipografía y labels más cómodos */
.app-shell .tk-filters__title {
    font-weight: 750;
    letter-spacing: -0.02em;
}

.app-shell .tk-label {
    color: var(--hunter-card-muted);
}

.app-shell .ticket-toolbar {
    background: color-mix(in srgb, var(--hunter-accent-start) 5%, var(--hunter-card));
}

.app-shell .ticket-readonly-icon {
    background: color-mix(in srgb, var(--hunter-accent-start) 18%, transparent);
    color: var(--hunter-accent-interactive);
}

/* Iconos en botones — visibles en claro y oscuro */
.app-shell {
    --hunter-icon-accent: var(--elixir-primary, #121080);
    --hunter-icon-on-dark: var(--elixir-secondary, #16B6DC);
}

.app-shell[data-theme="dark"] {
    --hunter-icon-accent: var(--elixir-secondary, #16B6DC);
}

/* FluentIcon global — forzar contraste en oscuro */
.app-shell[data-theme="dark"] fluent-icon svg path,
.app-shell[data-theme="dark"] fluent-icon svg circle,
.app-shell[data-theme="dark"] fluent-icon svg rect {
    fill: var(--hunter-icon-on-dark) !important;
}

.app-shell[data-theme="dark"] .tk-icon-themed fluent-icon svg path {
    fill: var(--hunter-icon-accent) !important;
}

.app-shell[data-theme="dark"] .tk-field fluent-icon svg path,
.app-shell[data-theme="dark"] .tk-field fluent-icon svg circle {
    fill: var(--hunter-icon-on-dark) !important;
}

.app-shell[data-theme="dark"] .tk-label__icon--warn fluent-icon svg path {
    fill: var(--elixir-orange, #FF963D) !important;
}

.app-shell[data-theme="dark"] .tk-label__icon--ok fluent-icon svg path {
    fill: var(--elixir-success, #B7E249) !important;
}

/* Iconos dentro de botones (host + shadow parts) */
.app-shell fluent-button[appearance="accent"] fluent-icon,
.app-shell fluent-button[appearance="Accent"] fluent-icon,
.app-shell fluent-button[appearance="accent"]::part(start),
.app-shell fluent-button[appearance="Accent"]::part(start),
.app-shell fluent-button[appearance="accent"]::part(end),
.app-shell fluent-button[appearance="Accent"]::part(end) {
    color: #ffffff !important;
}

.app-shell fluent-button[appearance="accent"] fluent-icon svg path,
.app-shell fluent-button[appearance="Accent"] fluent-icon svg path,
.app-shell fluent-button[appearance="accent"]::part(start) svg path,
.app-shell fluent-button[appearance="Accent"]::part(start) svg path,
.app-shell fluent-button[appearance="accent"]::part(end) svg path,
.app-shell fluent-button[appearance="Accent"]::part(end) svg path {
    fill: #ffffff !important;
}

.app-shell fluent-button[appearance="outline"] fluent-icon,
.app-shell fluent-button[appearance="Outline"] fluent-icon,
.app-shell fluent-button[appearance="outline"]::part(start),
.app-shell fluent-button[appearance="Outline"]::part(start),
.app-shell fluent-button[appearance="outline"]::part(end),
.app-shell fluent-button[appearance="Outline"]::part(end) {
    color: var(--hunter-icon-accent) !important;
}

.app-shell fluent-button[appearance="outline"] fluent-icon svg path,
.app-shell fluent-button[appearance="Outline"] fluent-icon svg path,
.app-shell fluent-button[appearance="outline"]::part(start) svg path,
.app-shell fluent-button[appearance="Outline"]::part(start) svg path,
.app-shell fluent-button[appearance="outline"]::part(end) svg path,
.app-shell fluent-button[appearance="Outline"]::part(end) svg path {
    fill: currentColor !important;
}

.app-shell[data-theme="dark"] fluent-button[appearance="outline"] fluent-icon,
.app-shell[data-theme="dark"] fluent-button[appearance="Outline"] fluent-icon,
.app-shell[data-theme="dark"] fluent-button[appearance="outline"]::part(start),
.app-shell[data-theme="dark"] fluent-button[appearance="Outline"]::part(start),
.app-shell[data-theme="dark"] fluent-button[appearance="outline"]::part(end),
.app-shell[data-theme="dark"] fluent-button[appearance="Outline"]::part(end) {
    color: var(--hunter-icon-on-dark) !important;
}

.app-shell[data-theme="dark"] fluent-button[appearance="outline"] fluent-icon svg path,
.app-shell[data-theme="dark"] fluent-button[appearance="Outline"] fluent-icon svg path,
.app-shell[data-theme="dark"] fluent-button[appearance="outline"]::part(start) svg path,
.app-shell[data-theme="dark"] fluent-button[appearance="Outline"]::part(start) svg path,
.app-shell[data-theme="dark"] fluent-button[appearance="outline"]::part(end) svg path,
.app-shell[data-theme="dark"] fluent-button[appearance="Outline"]::part(end) svg path {
    fill: var(--hunter-icon-on-dark) !important;
}

.app-shell[data-theme="dark"] fluent-button[appearance="stealth"] fluent-icon svg path,
.app-shell[data-theme="dark"] fluent-button[appearance="Stealth"] fluent-icon svg path,
.app-shell[data-theme="dark"] .tk-btn-link fluent-icon svg path {
    fill: var(--hunter-icon-on-dark) !important;
}

.app-shell[data-theme="dark"] .ticket-actions-secondary fluent-button,
.app-shell[data-theme="dark"] .ticket-toolbar__actions fluent-button[appearance="outline"],
.app-shell[data-theme="dark"] .ticket-toolbar__actions fluent-button[appearance="Outline"] {
    color: var(--elixir-white) !important;
}

.app-shell[data-theme="dark"] .ticket-actions-secondary fluent-button::part(control),
.app-shell[data-theme="dark"] .ticket-toolbar__actions fluent-button[appearance="outline"]::part(control),
.app-shell[data-theme="dark"] .ticket-toolbar__actions fluent-button[appearance="Outline"]::part(control) {
    color: var(--elixir-white) !important;
    border-color: color-mix(in srgb, var(--elixir-secondary) 65%, var(--hunter-border)) !important;
}

/* Chips cola, macros y filtros — contraste en oscuro */
.app-shell[data-theme="dark"] .tk-chip {
    background: var(--hunter-surface-3);
    color: var(--elixir-white);
    border-color: color-mix(in srgb, var(--elixir-secondary) 45%, var(--hunter-border));
}

.app-shell[data-theme="dark"] .tk-chip:hover {
    color: var(--elixir-cyan);
    border-color: var(--elixir-secondary);
    background: color-mix(in srgb, var(--elixir-primary) 35%, var(--hunter-surface-3));
}

.app-shell[data-theme="dark"] .tk-chip__count {
    background: color-mix(in srgb, var(--elixir-secondary) 22%, transparent);
    color: var(--elixir-white);
}

.app-shell[data-theme="dark"] .tk-macro {
    background: color-mix(in srgb, var(--elixir-secondary) 14%, var(--hunter-card));
    color: var(--elixir-white);
    border-color: color-mix(in srgb, var(--elixir-secondary) 50%, var(--hunter-border));
}

.app-shell[data-theme="dark"] .tk-macro:hover {
    background: color-mix(in srgb, var(--elixir-secondary) 22%, var(--hunter-card));
    color: var(--elixir-cyan);
    border-color: var(--elixir-secondary);
}

.app-shell[data-theme="dark"] .tk-btn-link,
.app-shell[data-theme="dark"] .tk-btn-link::part(control) {
    color: var(--elixir-secondary) !important;
}

.app-shell[data-theme="dark"] .tk-filters__icon fluent-icon svg path {
    fill: var(--hunter-icon-accent) !important;
}

.app-shell[data-theme="dark"] .tk-grid-estado--pending { color: var(--elixir-cyan); }
.app-shell[data-theme="dark"] .tk-grid-estado--active { color: var(--elixir-orange); }
.app-shell[data-theme="dark"] .tk-grid-estado--done { color: var(--elixir-success); }
.app-shell[data-theme="dark"] .tk-grid-estado--muted { color: var(--elixir-gray-medium); }

.app-shell[data-theme="dark"] .tk-btn-danger,
.app-shell[data-theme="dark"] .tk-btn-danger::part(control) {
    color: var(--elixir-error) !important;
    border-color: color-mix(in srgb, var(--elixir-error) 55%, var(--hunter-border)) !important;
}

.app-shell[data-theme="dark"] .tk-btn-danger fluent-icon,
.app-shell[data-theme="dark"] .tk-btn-danger fluent-icon svg path {
    fill: var(--elixir-error) !important;
}

/* Espaciado y legibilidad general */
.app-shell .filtro-item label,
.app-shell .form-label,
.app-shell .tk-label {
    letter-spacing: 0.02em;
}

.app-shell .row-color {
    background-color: var(--hunter-surface-3) !important;
}

/* Dark: superficies de input/columna más profundas como el login */
.app-shell[data-theme="dark"] .columna-40,
.app-shell[data-theme="dark"] .columna-60,
.app-shell[data-theme="dark"] .columnaempresa-40,
.app-shell[data-theme="dark"] .columnaempresa-60,
.app-shell[data-theme="dark"] .filtros-simples,
.app-shell[data-theme="dark"] .contendor-reporte .col-30,
.app-shell[data-theme="dark"] .contendor-reporte .col-70 {
    background: var(--hunter-card) !important;
}

.app-shell[data-theme="dark"] .app-header {
    background: var(--hunter-header-bg, rgba(8, 6, 96, 0.96)) !important;
    border-bottom-color: var(--hunter-border-subtle, rgba(110, 198, 245, 0.18)) !important;
}

.app-shell[data-theme="dark"] .app-header__badge {
    box-shadow: 0 0 0 2px var(--hunter-header-bg, #080660);
}

.app-shell[data-theme="dark"] .tabla-header,
.app-shell[data-theme="dark"] .tabla-header-reporte {
    background: var(--hunter-surface-3) !important;
}

/* Controles e iconos — legibles en modo oscuro */
.app-shell[data-theme="dark"] .theme-settings fluent-button[appearance="stealth"],
.app-shell[data-theme="dark"] .theme-settings fluent-button[appearance="Stealth"],
.app-shell[data-theme="dark"] .theme-settings fluent-button[appearance="lightweight"],
.app-shell[data-theme="dark"] .theme-settings fluent-button[appearance="Lightweight"] {
    --neutral-foreground-rest: var(--elixir-white);
    --neutral-fill-stealth-rest: transparent;
    --neutral-fill-stealth-hover: rgba(255, 255, 255, 0.1);
    --neutral-fill-stealth-active: rgba(22, 182, 220, 0.18);
    color: var(--elixir-white) !important;
}

.app-shell[data-theme="dark"] .theme-settings fluent-button[appearance="stealth"]:hover:not([disabled]),
.app-shell[data-theme="dark"] .theme-settings fluent-button[appearance="Stealth"]:hover:not([disabled]) {
    color: var(--elixir-secondary) !important;
}

.app-shell[data-theme="dark"] .theme-settings fluent-icon {
    color: var(--elixir-secondary) !important;
}

.app-shell[data-theme="dark"] .app-user__role,
.app-shell[data-theme="dark"] .app-header__title {
    color: var(--elixir-gray-medium);
}

.app-shell[data-theme="dark"] .app-user__name,
.app-shell[data-theme="dark"] .app-brand__text {
    color: var(--elixir-white);
}

.app-shell[data-theme="dark"] .app-user__avatar {
    color: var(--elixir-secondary);
    border-color: color-mix(in srgb, var(--elixir-secondary) 50%, transparent);
    background: color-mix(in srgb, var(--elixir-secondary) 18%, transparent);
}

/* Responsive — páginas internas */
@media (max-width: 960px) {
    .app-shell .contenedor-principal,
    .app-shell .contenedor-principal-empresa,
    .app-shell .contenedorgrilla,
    .app-shell .contenedor-global,
    .app-shell .containerTk,
    .app-shell .contendor-reporte {
        padding: 0.75rem !important;
    }

    .app-shell .seccion-inferior,
    .app-shell .seccion-inferior-empresa {
        flex-direction: column;
        height: auto;
    }

    .app-shell .columna-40,
    .app-shell .columna-60,
    .app-shell .columnaempresa-40,
    .app-shell .columnaempresa-60 {
        flex: 1 1 auto !important;
        max-height: none;
        min-height: 280px;
    }
}

@media (max-width: 560px) {
    .app-shell .contenedor-principal,
    .app-shell .contenedor-principal-empresa,
    .app-shell .contenedorgrilla,
    .app-shell .containerTk,
    .app-shell .contendor-reporte {
        padding: 0.55rem !important;
    }

    .app-shell .filtros-simples,
    .app-shell .tk-filters,
    .app-shell .tarjeta,
    .app-shell .tarjeta-config,
    .app-shell fluent-card {
        border-radius: 16px !important;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .app-shell .tarjeta-informativa .tarjeta-valor {
        font-size: 1.5rem;
    }

    .app-shell .form-buttons {
        flex-wrap: wrap;
        width: 100%;
    }

    .app-shell .form-buttons .fluent-button,
    .app-shell .filtro-actions .fluent-button {
        flex: 1 1 auto;
        min-width: 0;
    }
}