/* =====================================================================
   Interfaz del sistema: sistema de componentes del sistema de los clientes y de la consola del dueño.
   Se carga después de tema-claro.css y usa solo variables del tema (App\Core\Temas):
   --n-* (neutros), --ac-* (acento), --radio-*, --fuente-*. Funciona con cualquier tema, claro y oscuro.

   Las vistas están escritas con clases de Tailwind; aquí se unifican sin reescribirlas:
     · tipografía y escala de pesos       · tarjetas y paneles (glass-panel, glass-card, rounded-2xl)
     · modales (velo, panel, cabecera, pie, botón de cerrar, animación de entrada)
     · pestañas ([data-pestana], que marca interfaz.js) con aspecto de control segmentado
     · campos, selects con flecha propia, casillas · tablas · botones con degradado → color sólido
   Componentes propios: menú lateral (.sb-*), barra superior (.tb-*) y piezas de la consola (.campo, .btn, .tarjeta…).
   ===================================================================== */

/* ---------------------------------------------------------------- Tipografía */
html[data-tema] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
html[data-tema] body { font-family: var(--fuente-texto); font-size: 14px; letter-spacing: -0.006em; font-feature-settings: "ss01", "cv11"; }
html[data-tema] :is(h1, h2, h3, h4) { font-family: var(--fuente-titulos); letter-spacing: -0.022em; }
html[data-tema] :is(.font-mono, code, kbd, samp, pre) { font-family: var(--fuente-mono, "JetBrains Mono", ui-monospace, monospace); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
html[data-tema] .font-extrabold { font-weight: 700; }
html[data-tema] .font-black { font-weight: 750; }
html[data-tema] .font-bold { font-weight: 600; }
html[data-tema] :is(h1, h2, h3).font-bold, html[data-tema] :is(h1, h2, h3).font-extrabold { font-weight: 650; }
html[data-tema] .tracking-wider { letter-spacing: .06em; }
html[data-tema] .tracking-widest { letter-spacing: .09em; }
html[data-tema] ::selection { background: rgb(var(--ac-500) / .28); }

/* ---------------------------------------------------------------- Lienzo */
html[data-tema]:not(.dark) body { background-color: rgb(var(--n-50)) !important; }
html[data-tema]:not(.dark) main { background-color: rgb(var(--n-50)) !important; }
html.dark[data-tema] body { background-color: rgb(var(--n-950)) !important; }
html.dark[data-tema] main { background-color: rgb(var(--n-950)); }
html[data-tema] main.overflow-y-auto { scroll-behavior: smooth; }
@media (min-width: 1024px) {
    html[data-tema] main[class*="p-6"], html[data-tema] main[class*="md:p-6"] { padding: 1.75rem 2rem 2.5rem !important; }
}

/* ---------------------------------------------------------------- Tarjetas y paneles */
html[data-tema] :is(.glass-panel, .glass-card, .tarjeta) { border-radius: var(--radio-2xl); }
html[data-tema]:not(.dark) :is(.glass-panel, .glass-card, .accordion-item, .perm-card) {
    background-color: #fff !important; border: 1px solid rgb(var(--n-200)) !important;
    box-shadow: 0 1px 2px rgb(var(--n-900) / .04), 0 1px 1px rgb(var(--n-900) / .02) !important;
}
html.dark[data-tema] :is(.glass-panel, .glass-card) {
    background: rgb(var(--n-900)) !important; backdrop-filter: none !important;
    border: 1px solid rgb(255 255 255 / .065) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .03) !important;
}
/* Sombras de color "neón" de las vistas → sombra corta y neutra */
html[data-tema] main :is([class*="shadow-cyan-"], [class*="shadow-blue-"], [class*="shadow-emerald-"], [class*="shadow-amber-"],
    [class*="shadow-rose-"], [class*="shadow-purple-"], [class*="shadow-indigo-"]) { --tw-shadow-color: rgb(var(--n-900) / .08) !important; --tw-shadow: var(--tw-shadow-colored); }
html[data-tema] main .shadow-2xl:not(.fixed *) { --tw-shadow: 0 8px 24px -8px rgb(var(--n-900) / .12); }
html[data-tema] main .shadow-lg:not(button):not(a) { --tw-shadow: 0 2px 8px -2px rgb(var(--n-900) / .08); }

/* ---------------------------------------------------------------- Botones */
html[data-tema] :is(button, [type="submit"], [type="button"], a[class*="rounded"]) {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease, opacity .15s ease;
}
html[data-tema] button:not(:disabled):active, html[data-tema] a[class*="px-"][class*="py-"]:active { transform: translateY(1px); }
html[data-tema] button:disabled { cursor: not-allowed; }
/* Degradados de color en botones y enlaces → color sólido del primer tono, con relieve sutil */
html[data-tema] :is(button, a, label)[class*="bg-gradient-to-"]:not([class~="from-slate-950"]):not([class~="from-slate-900"]):not([class~="from-slate-800"]):not([class~="from-slate-700"]):not(.sidebar-nav-item):not([data-pestana]) {
    background-image: none !important; background-color: var(--tw-gradient-from) !important;
    box-shadow: 0 1px 2px rgb(0 0 0 / .12), inset 0 1px 0 rgb(255 255 255 / .14) !important; color: #fff !important;
}
html[data-tema] :is(button, a, label)[class*="bg-gradient-to-"][class*="from-cyan-"]:not([data-pestana]) { background-color: rgb(var(--ac-600)) !important; }
html[data-tema] :is(button, a, label)[class*="bg-gradient-to-"]:not(:disabled):hover { filter: brightness(1.07); }
html[data-tema] :is(button, a)[class~="bg-cyan-600"]:not([data-pestana]), html[data-tema] :is(button, a)[class~="bg-cyan-500"]:not([data-pestana]) {
    background-color: rgb(var(--ac-600)) !important; color: #fff !important; box-shadow: 0 1px 2px rgb(0 0 0 / .12), inset 0 1px 0 rgb(255 255 255 / .14);
}
html[data-tema] :is(button, a)[class~="bg-cyan-600"]:hover, html[data-tema] :is(button, a)[class~="bg-cyan-500"]:hover { background-color: rgb(var(--ac-700)) !important; }
/* Botones de color decorativo (azul, índigo, violeta, morado) → acento del tema.
   Verde (guardar/éxito), ámbar (advertencia) y rojo (borrar/peligro) conservan su significado. */
html[data-tema] :is(button, a, label)[class*="bg-gradient-to-"]:is([class*="from-blue-"], [class*="from-indigo-"], [class*="from-violet-"], [class*="from-purple-"]):not([data-pestana]),
html[data-tema] :is(button, a):is([class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-indigo-500"], [class~="bg-indigo-600"], [class~="bg-violet-600"], [class~="bg-purple-600"]):not([data-pestana]) {
    background-color: rgb(var(--ac-600)) !important; background-image: none !important; color: #fff !important;
    box-shadow: 0 1px 2px rgb(0 0 0 / .12), inset 0 1px 0 rgb(255 255 255 / .14) !important;
}
html[data-tema] :is(button, a, label)[class*="bg-gradient-to-"]:is([class*="from-blue-"], [class*="from-indigo-"], [class*="from-violet-"], [class*="from-purple-"]):not([data-pestana]):not(:disabled):hover,
html[data-tema] :is(button, a):is([class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-indigo-500"], [class~="bg-indigo-600"], [class~="bg-violet-600"], [class~="bg-purple-600"]):not([data-pestana]):not(:disabled):hover {
    background-color: rgb(var(--ac-700)) !important; filter: none;
}
/* Botones deshabilitados: mismo aspecto en todos los temas */
html[data-tema] :is(button, [type="submit"]):disabled { opacity: .55; filter: saturate(.6); box-shadow: none !important; }
/* Foco visible con el acento del tema en botones y enlaces con forma de botón (teclado) */
html[data-tema] :is(button, a[class*="rounded"], [role="button"]):focus-visible { outline: 2px solid rgb(var(--ac-500)); outline-offset: 2px; }

/* ---------------------------------------------------------------- Campos */
html[data-tema] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]), select, textarea) {
    border-radius: var(--radio-lg) !important; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
html[data-tema]:not(.dark) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea) {
    border-color: rgb(var(--n-200)) !important; box-shadow: 0 1px 1px rgb(var(--n-900) / .03);
}
html[data-tema]:not(.dark) :is(input, select, textarea):hover:not(:focus):not(:disabled) { border-color: rgb(var(--n-300)) !important; }
html.dark[data-tema] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea) {
    background-color: rgb(var(--n-950) / .7) !important; border-color: rgb(255 255 255 / .09) !important;
}
html[data-tema] :is(input, select, textarea):focus, html[data-tema] :is(input, select, textarea):focus-visible {
    outline: none !important; border-color: rgb(var(--ac-500)) !important; box-shadow: 0 0 0 3.5px rgb(var(--ac-500) / .16) !important;
    --tw-ring-shadow: 0 0 #0000;
}
html[data-tema] select:not([multiple]):not([size]) {
    -webkit-appearance: none; appearance: none; padding-right: 2.1rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23888896'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right .55rem center !important; background-size: 1.05rem !important;
}
html[data-tema] :is(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: rgb(var(--ac-600)); }
html[data-tema] input[type="checkbox"], html[data-tema] input[type="radio"] { cursor: pointer; }
html[data-tema] label + :is(input, select, textarea) { margin-top: .1rem; }

/* ---------------------------------------------------------------- Tablas */
html[data-tema] :is(main, [data-modal-panel]) table thead th {
    font-family: var(--fuente-texto); font-size: 11px; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap;
}
html[data-tema]:not(.dark) :is(main, [data-modal-panel]) table thead { background-color: rgb(var(--n-50)) !important; }
html[data-tema]:not(.dark) :is(main, [data-modal-panel]) table thead th { color: rgb(var(--n-500)) !important; border-color: rgb(var(--n-200)) !important; }
html.dark[data-tema] :is(main, [data-modal-panel]) table thead { background-color: rgb(var(--n-950) / .6); }
html.dark[data-tema] :is(main, [data-modal-panel]) table thead th { color: rgb(var(--n-400)); }
html[data-tema]:not(.dark) :is(main, [data-modal-panel]) table tbody tr { border-color: rgb(var(--n-100)) !important; }
html[data-tema]:not(.dark) :is(main, [data-modal-panel]) table tbody tr:hover { background-color: rgb(var(--ac-50) / .55) !important; }
html.dark[data-tema] :is(main, [data-modal-panel]) table tbody tr:hover { background-color: rgb(255 255 255 / .025); }
html[data-tema] :is(main, [data-modal-panel]) table td { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Modales
   Velo: cualquier capa fija a pantalla completa con fondo oscuro translúcido (las vistas los abren quitando .hidden).
   Panel: su primer hijo. interfaz.js además marca [data-modal] / [data-modal-panel] y cierra con Esc. */
html[data-tema] :is(.fixed.inset-0[class*="bg-slate-950/"], .fixed.inset-0[class*="bg-slate-900/"], .fixed.inset-0[class*="bg-black/"]):not(#sidebar-backdrop):not(.hidden) {
    background-color: rgb(var(--n-950) / .52) !important; -webkit-backdrop-filter: blur(5px) saturate(1.1); backdrop-filter: blur(5px) saturate(1.1);
    animation: ui-velo .18s ease-out;
}
html[data-tema]:not(.dark) :is(.fixed.inset-0[class*="bg-slate-950/"], .fixed.inset-0[class*="bg-slate-900/"], .fixed.inset-0[class*="bg-black/"]):not(#sidebar-backdrop):not(.hidden) {
    background-color: rgb(var(--n-900) / .38) !important;
}
html[data-tema] #sidebar-backdrop { background-color: rgb(var(--n-950) / .45) !important; }
html[data-tema] [data-modal]:not(.hidden) > [data-modal-panel] { animation: ui-panel .24s cubic-bezier(.2, .9, .25, 1); }
html[data-tema] [data-modal-panel] {
    border-radius: var(--radio-3xl) !important; overflow: hidden;
    box-shadow: 0 0 0 1px rgb(var(--n-900) / .05), 0 24px 60px -12px rgb(var(--n-950) / .35), 0 8px 20px -8px rgb(var(--n-950) / .2) !important;
}
html[data-tema]:not(.dark) [data-modal-panel] { background-color: #fff !important; border-color: transparent !important; }
html.dark[data-tema] [data-modal-panel] { background-color: rgb(var(--n-900)) !important; border: 1px solid rgb(255 255 255 / .08) !important; }
/* Cabecera y pie del panel */
html[data-tema] [data-modal-panel] > [class*="border-b"]:first-child { padding-top: 1.05rem; padding-bottom: 1.05rem; }
html[data-tema]:not(.dark) [data-modal-panel] > [class*="border-b"]:first-child { background-color: #fff !important; border-color: rgb(var(--n-100)) !important; }
html.dark[data-tema] [data-modal-panel] > [class*="border-b"]:first-child { background-color: rgb(var(--n-900)) !important; border-color: rgb(255 255 255 / .06) !important; }
html[data-tema]:not(.dark) [data-modal-panel] > [class*="border-t"]:last-child { background-color: rgb(var(--n-50)) !important; border-color: rgb(var(--n-100)) !important; }
html.dark[data-tema] [data-modal-panel] > [class*="border-t"]:last-child { background-color: rgb(var(--n-950) / .5) !important; }
html[data-tema] [data-modal-panel] :is(h2, h3) { letter-spacing: -0.02em; }
/* Botón de cerrar (ícono ×) */
html[data-tema] [data-cerrar-modal] {
    width: 2rem; height: 2rem; display: inline-grid !important; place-items: center; border-radius: 999px; flex-shrink: 0;
    color: rgb(var(--n-500)) !important; background: transparent;
}
html[data-tema] [data-cerrar-modal] i { font-size: 1rem !important; }
html[data-tema]:not(.dark) [data-cerrar-modal]:hover { background-color: rgb(var(--n-100)) !important; color: rgb(var(--n-900)) !important; }
html.dark[data-tema] [data-cerrar-modal]:hover { background-color: rgb(255 255 255 / .07) !important; color: rgb(var(--n-50)) !important; }
@keyframes ui-velo { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-panel { from { opacity: 0; transform: translateY(10px) scale(.975); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Pestañas (control segmentado)
   interfaz.js marca cada grupo: contenedor [data-pestanas], botón [data-pestana] y el activo [data-pestana-activa]. */
html[data-tema] [data-pestanas] {
    display: flex; flex-wrap: wrap; gap: 3px !important; padding: 4px !important; border-radius: calc(var(--radio-xl) + 2px) !important;
    width: fit-content; max-width: 100%; border: 0 !important;
}
html[data-tema]:not(.dark) [data-pestanas] { background-color: rgb(var(--n-100)) !important; box-shadow: inset 0 0 0 1px rgb(var(--n-200) / .7); }
html.dark[data-tema] [data-pestanas] { background-color: rgb(var(--n-900)) !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
@media (max-width: 767px) { html[data-tema] [data-pestanas] { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; } }
html[data-tema] [data-pestana]:not(#ui) {
    background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important;
    border-radius: var(--radio-xl) !important; padding: .5rem .85rem !important; font-size: 12.5px !important; font-weight: 500 !important;
    color: rgb(var(--n-500)) !important; white-space: nowrap; display: inline-flex; align-items: center; gap: .45rem; filter: none !important;
}
html.dark[data-tema] [data-pestana]:not(#ui) { color: rgb(var(--n-400)) !important; }
html[data-tema] [data-pestana] i { color: inherit !important; opacity: .85; }
html[data-tema]:not(.dark) [data-pestana]:not([data-pestana-activa]):not(#ui):hover { color: rgb(var(--n-900)) !important; background-color: rgb(255 255 255 / .6) !important; }
html.dark[data-tema] [data-pestana]:not([data-pestana-activa]):not(#ui):hover { color: rgb(var(--n-100)) !important; background-color: rgb(255 255 255 / .04) !important; }
html[data-tema] [data-pestana][data-pestana-activa] { font-weight: 600 !important; }
html[data-tema]:not(.dark) [data-pestana][data-pestana-activa]:not(#ui) {
    background-color: #fff !important; color: rgb(var(--n-900)) !important;
    box-shadow: 0 1px 2px rgb(var(--n-900) / .08), 0 0 0 1px rgb(var(--n-200) / .8) !important;
}
html.dark[data-tema] [data-pestana][data-pestana-activa]:not(#ui) {
    background-color: rgb(var(--n-800)) !important; color: rgb(var(--n-50)) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 1px 2px rgb(0 0 0 / .3) !important;
}
html[data-tema] [data-pestana][data-pestana-activa] i { color: rgb(var(--ac-600)) !important; opacity: 1; }
html.dark[data-tema] [data-pestana][data-pestana-activa] i { color: rgb(var(--ac-400)) !important; }
html[data-tema] [data-pestana] :is([class*="rounded-full"], .badge) { font-size: 10px !important; }

/* ---------------------------------------------------------------- Insignias, alertas y barras */
html[data-tema] main [class*="rounded-full"][class*="text-[9px]"], html[data-tema] main [class*="rounded-full"][class*="text-[10px]"] { letter-spacing: .02em; }
html[data-tema] .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-tema] .custom-scrollbar::-webkit-scrollbar-thumb { border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
html[data-tema]:not(.dark) .custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgb(var(--n-300)); }
html[data-tema]:not(.dark) .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
html.dark[data-tema] .custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgb(var(--n-700)); }
html.dark[data-tema] .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
html[data-tema] * { scrollbar-color: rgb(var(--n-300)) transparent; }
html.dark[data-tema] * { scrollbar-color: rgb(var(--n-700)) transparent; }
html[data-tema] :focus-visible { outline: 2px solid rgb(var(--ac-500) / .55); outline-offset: 2px; }

/* =====================================================================
   Menú lateral (sistema de los clientes y consola)
   ===================================================================== */
html[data-tema] .sb {
    width: 262px; display: flex; flex-direction: column; flex-shrink: 0; border-right: 1px solid rgb(var(--n-200)); background: #fff;
    transition: width .22s ease, transform .25s ease;
}
html.dark[data-tema] .sb { background: rgb(var(--n-950)) !important; border-color: rgb(255 255 255 / .06) !important; }
html[data-tema]:not(.dark) aside.sb { background-color: #fff !important; border-color: rgb(var(--n-200)) !important; }
.sb-cabeza { height: 60px; display: flex; align-items: center; gap: .7rem; padding: 0 .9rem 0 1rem; flex-shrink: 0; }
.sb-logo {
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; color: #fff; font-weight: 700; font-size: 15px;
    background: linear-gradient(140deg, rgb(var(--ac-500)), rgb(var(--ac-700))); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 2px 6px -1px rgb(var(--ac-700) / .45);
}
.sb-logo-img { height: 34px; max-width: 120px; object-fit: contain; flex-shrink: 0; }
.sb-marca { min-width: 0; flex: 1; line-height: 1.15; }
.sb-marca b { display: block; font-size: 14.5px; font-weight: 650; letter-spacing: -.02em; color: rgb(var(--n-900)); font-family: var(--fuente-titulos); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-marca small { display: block; font-size: 11.5px; color: rgb(var(--n-500)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
html.dark .sb-marca b { color: rgb(var(--n-50)); }
html.dark .sb-marca small { color: rgb(var(--n-400)); }
.sb-icono-btn {
    width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; color: rgb(var(--n-400)); flex-shrink: 0; background: none; border: 0; cursor: pointer;
}
.sb-icono-btn:hover { background: rgb(var(--n-100)); color: rgb(var(--n-800)); }
.sb-icono-btn.sb-icono-activo { background: rgb(var(--ac-50)); color: rgb(var(--ac-700)); }
html.dark .sb-icono-btn.sb-icono-activo { background: rgb(var(--ac-500) / .15); color: rgb(var(--ac-300)); }
html.dark .sb-icono-btn:hover { background: rgb(255 255 255 / .06); color: rgb(var(--n-100)); }
.sb-nav { flex: 1; overflow-y: auto; padding: .35rem .7rem 1rem; scrollbar-width: thin; }
.sb-grupo { margin-top: 1.1rem; }
.sb-grupo:first-child { margin-top: .35rem; }
.sb-titulo { display: block; padding: 0 .65rem .4rem; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgb(var(--n-400)); }
html.dark .sb-titulo { color: rgb(var(--n-500)); }
.sb-item {
    position: relative; display: flex; align-items: center; gap: .7rem; padding: .5rem .65rem; margin: 1px 0; border-radius: 9px;
    font-size: 13.5px; font-weight: 500; color: rgb(var(--n-600)); text-decoration: none; white-space: nowrap;
}
.sb-item > i { width: 18px; text-align: center; font-size: 14px; color: rgb(var(--n-400)); flex-shrink: 0; transition: color .15s; }
.sb-item:hover { background: rgb(var(--n-100)); color: rgb(var(--n-900)); }
.sb-item:hover > i { color: rgb(var(--n-600)); }
html.dark .sb-item { color: rgb(var(--n-300)); }
html.dark .sb-item > i { color: rgb(var(--n-500)); }
html.dark .sb-item:hover { background: rgb(255 255 255 / .05); color: rgb(var(--n-50)); }
html.dark .sb-item:hover > i { color: rgb(var(--n-300)); }
.sb-item.sb-activo { background: rgb(var(--ac-50)); color: rgb(var(--ac-700)); font-weight: 600; }
.sb-item.sb-activo > i { color: rgb(var(--ac-600)); }
.sb-item.sb-activo::before { content: ""; position: absolute; left: -.7rem; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: rgb(var(--ac-600)); }
html.dark .sb-item.sb-activo { background: rgb(var(--ac-500) / .14); color: rgb(var(--ac-200)); }
html.dark .sb-item.sb-activo > i { color: rgb(var(--ac-300)); }
.sb-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sb-etiqueta { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: rgb(var(--n-100)); color: rgb(var(--n-500)); letter-spacing: .02em; }
html.dark .sb-etiqueta { background: rgb(255 255 255 / .06); color: rgb(var(--n-400)); }
.sb-item.sb-activo .sb-etiqueta { background: rgb(var(--ac-100)); color: rgb(var(--ac-700)); }
html.dark .sb-item.sb-activo .sb-etiqueta { background: rgb(var(--ac-500) / .2); color: rgb(var(--ac-200)); }
.sb-contador { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgb(var(--ac-600)); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-grid; place-items: center; }
.sb-pie { border-top: 1px solid rgb(var(--n-200)); padding: .65rem; display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
html.dark .sb-pie { border-color: rgb(255 255 255 / .06); }
.sb-usuario { display: flex; align-items: center; gap: .65rem; min-width: 0; flex: 1; padding: .4rem; border-radius: 10px; text-decoration: none; }
.sb-usuario:hover { background: rgb(var(--n-100)); }
html.dark .sb-usuario:hover { background: rgb(255 255 255 / .05); }
.sb-avatar { width: 34px; height: 34px; border-radius: 999px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgb(var(--n-200)); }
html.dark .sb-avatar { box-shadow: 0 0 0 2px rgb(var(--n-950)), 0 0 0 3px rgb(255 255 255 / .1); }
.sb-avatar-letra { display: grid; place-items: center; background: rgb(var(--ac-100)); color: rgb(var(--ac-700)); font-weight: 650; font-size: 13px; }
.sb-usuario b { display: block; font-size: 13px; font-weight: 600; color: rgb(var(--n-900)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-usuario small { display: block; font-size: 11.5px; color: rgb(var(--n-500)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dark .sb-usuario b { color: rgb(var(--n-50)); }
html.dark .sb-usuario small { color: rgb(var(--n-400)); }

/* Menú colapsado (escritorio) */
html[data-tema] .sb.sidebar-collapsed { width: 72px !important; }
.sb.sidebar-collapsed :is(.sb-marca, .sb-texto, .sb-etiqueta, .sb-titulo, .sb-usuario > div, .sb-ocultar-colapsado) { display: none !important; }
.sb.sidebar-collapsed .sb-cabeza { justify-content: center; padding: 0; }
.sb.sidebar-collapsed .sb-item { justify-content: center; padding: .6rem 0; }
.sb.sidebar-collapsed .sb-item.sb-activo::before { left: -.7rem; }
.sb.sidebar-collapsed .sb-grupo { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid rgb(var(--n-100)); }
html.dark .sb.sidebar-collapsed .sb-grupo { border-color: rgb(255 255 255 / .05); }
.sb.sidebar-collapsed .sb-grupo:first-child { border-top: 0; }
.sb.sidebar-collapsed .sb-pie { justify-content: center; }
.sb.sidebar-collapsed .sb-contador { position: absolute; top: 2px; right: 8px; }
.sb .sb-expandir { display: none; }
.sb.sidebar-collapsed .sb-expandir { display: inline-grid; }
.sb.sidebar-collapsed .sb-logo, .sb.sidebar-collapsed .sb-logo-img { display: none; }
@media (max-width: 1023px) {
    html[data-tema] .sb.sidebar-collapsed { width: 262px !important; }
}

/* =====================================================================
   Barra superior
   ===================================================================== */
html[data-tema] .tb {
    height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.25rem 0 1rem; flex-shrink: 0;
    position: relative; z-index: 30; border-bottom: 1px solid rgb(var(--n-200)); background: rgb(255 255 255 / .82) !important;
    -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
html.dark[data-tema] .tb { background: rgb(var(--n-950) / .8) !important; border-color: rgb(255 255 255 / .06) !important; }
@media (min-width: 1024px) { html[data-tema] .tb { padding: 0 2rem; } }
.tb-buscar { position: relative; flex: 1; max-width: 520px; }
.tb-buscar form { position: relative; }
.tb-buscar form > i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); font-size: 13px; color: rgb(var(--n-400)); pointer-events: none; }
html[data-tema] .tb-buscar input {
    width: 100%; height: 38px; padding: 0 3.2rem 0 2.2rem !important; font-size: 13.5px; border-radius: 10px !important;
    background: rgb(var(--n-100)) !important; border: 1px solid transparent !important; color: rgb(var(--n-900)) !important; box-shadow: none !important;
}
html[data-tema] .tb-buscar input:hover { border-color: rgb(var(--n-200)) !important; }
html[data-tema] .tb-buscar input:focus { background: #fff !important; border-color: rgb(var(--ac-500)) !important; box-shadow: 0 0 0 3.5px rgb(var(--ac-500) / .16) !important; }
html.dark[data-tema] .tb-buscar input { background: rgb(255 255 255 / .05) !important; color: rgb(var(--n-50)) !important; }
html.dark[data-tema] .tb-buscar input:focus { background: rgb(var(--n-900)) !important; }
.tb-tecla {
    position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); font: 600 10.5px var(--fuente-mono, monospace); color: rgb(var(--n-400));
    border: 1px solid rgb(var(--n-200)); border-radius: 5px; padding: 1px 5px; background: #fff; pointer-events: none;
}
html.dark .tb-tecla { background: transparent; border-color: rgb(255 255 255 / .1); }
.tb-acciones { display: flex; align-items: center; gap: .35rem; }
html[data-tema] .tb-btn {
    position: relative; height: 36px; min-width: 36px; padding: 0 .55rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    color: rgb(var(--n-500)) !important; background: transparent !important; border: 0 !important; font-size: 13px; font-weight: 500; box-shadow: none !important; cursor: pointer;
}
html[data-tema] .tb-btn:hover { background: rgb(var(--n-100)) !important; color: rgb(var(--n-900)) !important; }
html.dark[data-tema] .tb-btn { color: rgb(var(--n-400)) !important; }
html.dark[data-tema] .tb-btn:hover { background: rgb(255 255 255 / .06) !important; color: rgb(var(--n-50)) !important; }
.tb-btn > i { font-size: 15px; }
.tb-punto { position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #e11d48; color: #fff; font-size: 9.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
html.dark .tb-punto { box-shadow: 0 0 0 2px rgb(var(--n-950)); }
.tb-estado { display: inline-flex; align-items: center; gap: .45rem; height: 30px; padding: 0 .7rem; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid; }
.tb-estado::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.tb-estado.ok { color: #047857; border-color: #a7f3d0; background: #ecfdf5; }
.tb-estado.mal { color: #be123c; border-color: #fecdd3; background: #fff1f2; }
html.dark .tb-estado.ok { color: #6ee7b7; border-color: rgb(16 185 129 / .3); background: rgb(16 185 129 / .08); }
html.dark .tb-estado.mal { color: #fda4af; border-color: rgb(244 63 94 / .3); background: rgb(244 63 94 / .08); }
.tb-separador { width: 1px; height: 22px; background: rgb(var(--n-200)); margin: 0 .3rem; }
html.dark .tb-separador { background: rgb(255 255 255 / .08); }
html[data-tema] .tb-menu {
    position: absolute; top: calc(100% + 8px); border-radius: 14px; overflow: hidden; z-index: 50;
    background: #fff !important; border: 1px solid rgb(var(--n-200)) !important; box-shadow: 0 16px 40px -12px rgb(var(--n-950) / .22), 0 4px 10px -4px rgb(var(--n-950) / .08) !important;
    animation: ui-panel .18s cubic-bezier(.2, .9, .25, 1);
}
html.dark[data-tema] .tb-menu { background: rgb(var(--n-900)) !important; border-color: rgb(255 255 255 / .08) !important; }
.tb-menu-cabeza { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid rgb(var(--n-100)); }
html.dark .tb-menu-cabeza { border-color: rgb(255 255 255 / .06); }
.tb-menu-cabeza b { font-size: 13.5px; font-weight: 650; color: rgb(var(--n-900)); }
html.dark .tb-menu-cabeza b { color: rgb(var(--n-50)); }
.tb-menu-pie { padding: .6rem; border-top: 1px solid rgb(var(--n-100)); text-align: center; }
html.dark .tb-menu-pie { border-color: rgb(255 255 255 / .06); }
.tb-menu-pie a { font-size: 12.5px; font-weight: 600; color: rgb(var(--ac-600)); }
html.dark .tb-menu-pie a { color: rgb(var(--ac-300)); }
.tb-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgb(var(--n-100)); color: rgb(var(--n-600)); }
html.dark .tb-chip { background: rgb(255 255 255 / .07); color: rgb(var(--n-300)); }
.tb-notif { display: flex; align-items: flex-start; gap: .7rem; padding: .75rem 1rem; border-bottom: 1px solid rgb(var(--n-100)); }
html.dark .tb-notif { border-color: rgb(255 255 255 / .05); }
.tb-notif:hover { background: rgb(var(--n-50)); }
html.dark .tb-notif:hover { background: rgb(255 255 255 / .03); }
.tb-notif-icono { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; font-size: 13px; background: rgb(var(--ac-50)); color: rgb(var(--ac-600)); }
.tb-notif-icono.critico { background: #fff1f2; color: #e11d48; }
.tb-notif-icono.advertencia { background: #fffbeb; color: #d97706; }
html.dark .tb-notif-icono { background: rgb(var(--ac-500) / .14); color: rgb(var(--ac-300)); }
html.dark .tb-notif-icono.critico { background: rgb(244 63 94 / .12); color: #fda4af; }
html.dark .tb-notif-icono.advertencia { background: rgb(245 158 11 / .12); color: #fcd34d; }
.tb-notif b { display: block; font-size: 13px; font-weight: 600; color: rgb(var(--n-900)); }
html.dark .tb-notif b { color: rgb(var(--n-50)); }
.tb-notif p { font-size: 12.5px; color: rgb(var(--n-500)); line-height: 1.4; margin-top: 2px; }
.tb-notif small { font-size: 11px; color: rgb(var(--n-400)); }
.tb-resultado { display: block; padding: .65rem 1rem; border-bottom: 1px solid rgb(var(--n-100)); font-size: 13px; }
.tb-resultado:hover { background: rgb(var(--ac-50) / .6); }
html.dark .tb-resultado { border-color: rgb(255 255 255 / .05); }
html.dark .tb-resultado:hover { background: rgb(255 255 255 / .04); }

/* =====================================================================
   Piezas de la consola del dueño (.campo, .etiqueta, .btn, .tarjeta, .tabla, .chip)
   ===================================================================== */
html[data-tema] .campo {
    width: 100%; height: 40px; padding: 0 .8rem; font-size: 13.5px; border-radius: var(--radio-lg); border: 1px solid rgb(var(--n-200));
    background: #fff; color: rgb(var(--n-900));
}
html[data-tema] textarea.campo { height: auto; padding: .6rem .8rem; line-height: 1.5; }
html[data-tema] select.campo[multiple] { height: auto; padding: .4rem; }
html.dark[data-tema] .campo { background: rgb(var(--n-950) / .7); border-color: rgb(255 255 255 / .09); color: rgb(var(--n-50)); }
html[data-tema] .etiqueta { display: block; font-size: 12.5px; font-weight: 550; color: rgb(var(--n-700)); margin-bottom: .35rem; letter-spacing: -.005em; text-transform: none; }
html.dark[data-tema] .etiqueta { color: rgb(var(--n-300)); }
html[data-tema] .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 36px; padding: 0 .95rem; border-radius: var(--radio-lg);
    font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
html[data-tema] .btn-primario { background: rgb(var(--ac-600)); color: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .12), inset 0 1px 0 rgb(255 255 255 / .14); }
html[data-tema] .btn-primario:hover { background: rgb(var(--ac-700)); }
html[data-tema] .btn-gris { background: #fff; color: rgb(var(--n-800)); border-color: rgb(var(--n-200)); box-shadow: 0 1px 2px rgb(var(--n-900) / .05); }
html[data-tema] .btn-gris:hover { background: rgb(var(--n-50)); border-color: rgb(var(--n-300)); }
html.dark[data-tema] .btn-gris { background: rgb(255 255 255 / .05); color: rgb(var(--n-100)); border-color: rgb(255 255 255 / .09); box-shadow: none; }
html.dark[data-tema] .btn-gris:hover { background: rgb(255 255 255 / .09); }
html[data-tema] .btn-peligro { background: #e11d48; color: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .12), inset 0 1px 0 rgb(255 255 255 / .14); }
html[data-tema] .btn-peligro:hover { background: #be123c; }
html[data-tema] .btn:disabled { opacity: .5; }
html[data-tema] .tarjeta { background: #fff; border: 1px solid rgb(var(--n-200)); border-radius: var(--radio-2xl); box-shadow: 0 1px 2px rgb(var(--n-900) / .04); }
html.dark[data-tema] .tarjeta { background: rgb(var(--n-900)); border-color: rgb(255 255 255 / .065); box-shadow: inset 0 1px 0 rgb(255 255 255 / .03); }
html[data-tema] table.tabla { width: 100%; font-size: 13px; border-collapse: separate; border-spacing: 0; }
html[data-tema] .tabla th {
    text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; color: rgb(var(--n-500));
    padding: .6rem .75rem; border-bottom: 1px solid rgb(var(--n-200)); background: rgb(var(--n-50)); white-space: nowrap;
}
html[data-tema] .tabla th:first-child { border-top-left-radius: 8px; }
html[data-tema] .tabla th:last-child { border-top-right-radius: 8px; }
html[data-tema] .tabla td { padding: .7rem .75rem; border-bottom: 1px solid rgb(var(--n-100)); vertical-align: top; font-variant-numeric: tabular-nums; }
html[data-tema] .tabla tbody tr:hover td { background: rgb(var(--ac-50) / .5); }
html.dark[data-tema] .tabla th { background: rgb(var(--n-950) / .5); color: rgb(var(--n-400)); border-color: rgb(255 255 255 / .07); }
html.dark[data-tema] .tabla td { border-color: rgb(255 255 255 / .05); }
html.dark[data-tema] .tabla tbody tr:hover td { background: rgb(255 255 255 / .025); }
html[data-tema] .chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .01em; }
html[data-tema] .chip::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .8; }
html[data-tema] .chip-ACTIVA { background: #ecfdf5; color: #047857; } html[data-tema] .chip-PRUEBA { background: rgb(var(--ac-50)); color: rgb(var(--ac-700)); }
html[data-tema] .chip-SUSPENDIDA { background: #fffbeb; color: #b45309; } html[data-tema] .chip-CANCELADA { background: #fff1f2; color: #be123c; }
html.dark[data-tema] .chip-ACTIVA { background: rgb(16 185 129 / .12); color: #6ee7b7; } html.dark[data-tema] .chip-PRUEBA { background: rgb(var(--ac-500) / .15); color: rgb(var(--ac-200)); }
html.dark[data-tema] .chip-SUSPENDIDA { background: rgb(245 158 11 / .12); color: #fcd34d; } html.dark[data-tema] .chip-CANCELADA { background: rgb(244 63 94 / .12); color: #fda4af; }

/* Encabezado de página de la consola */
.cs-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.cs-migas { font-size: 12.5px; color: rgb(var(--n-500)); display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; }
/* Pestañas de una opción del menú de la consola (pantallas relacionadas) */
.cs-pestanas { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; margin: -.5rem 0 1.25rem; padding-bottom: 1px; border-bottom: 1px solid rgb(var(--n-200)); }
.cs-pestanas::-webkit-scrollbar { display: none; }
html.dark .cs-pestanas { border-color: rgb(255 255 255 / .07); }
.cs-pestana { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; padding: .6rem .85rem; font-size: 13px; font-weight: 600; color: rgb(var(--n-500)); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; border-radius: 8px 8px 0 0; }
.cs-pestana i { font-size: 12px; opacity: .8; }
.cs-pestana:hover { color: rgb(var(--n-800)); background: rgb(var(--n-100) / .7); }
html.dark .cs-pestana:hover { color: rgb(var(--n-100)); background: rgb(255 255 255 / .04); }
.cs-pestana.activa { color: rgb(var(--ac-700)); border-bottom-color: rgb(var(--ac-600)); }
html.dark .cs-pestana.activa { color: rgb(var(--ac-300)); border-bottom-color: rgb(var(--ac-400)); }
.cs-migas i { font-size: 9px; opacity: .6; }
.cs-titulo { font-size: 24px; font-weight: 650; letter-spacing: -.028em; color: rgb(var(--n-900)); line-height: 1.2; }
html.dark .cs-titulo { color: rgb(var(--n-50)); }
.ui-aviso { display: flex; align-items: flex-start; gap: .65rem; padding: .8rem 1rem; border-radius: 12px; font-size: 13.5px; margin-bottom: 1.25rem; border: 1px solid; }
.ui-aviso i { margin-top: 2px; }
.ui-aviso.ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.ui-aviso.mal { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
html.dark .ui-aviso.ok { background: rgb(16 185 129 / .08); border-color: rgb(16 185 129 / .25); color: #a7f3d0; }
html.dark .ui-aviso.mal { background: rgb(244 63 94 / .08); border-color: rgb(244 63 94 / .25); color: #fecdd3; }

@media (prefers-reduced-motion: reduce) {
    html[data-tema] [data-modal]:not(.hidden) > [data-modal-panel], html[data-tema] .tb-menu, html[data-tema] [data-modal] { animation: none !important; }
}

/* Contenido de las pestañas: hereda el color de la pestaña (tema-claro pinta de blanco el contenido de los botones con degradado) */
html[data-tema] [data-pestana]:not(#ui) :not(i):not([class*="rounded-full"]):not(.badge) { color: inherit !important; }
html[data-tema] [data-pestana]:not(#ui) i { color: inherit !important; }
html[data-tema] [data-pestana][data-pestana-activa]:not(#ui) i { color: rgb(var(--ac-600)) !important; }
html.dark[data-tema] [data-pestana][data-pestana-activa]:not(#ui) i { color: rgb(var(--ac-400)) !important; }

/* =====================================================================
   Barra superior: buscador agrupado, menús de usuario y ayuda, avisos emergentes
   ===================================================================== */
.tb-grupo { padding: .5rem 1rem .25rem; font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: rgb(var(--n-400)); display: flex; align-items: center; gap: .4rem; }
.tb-resultado { display: flex !important; align-items: center; gap: .7rem; border-bottom: 0 !important; padding: .5rem 1rem !important; }
.tb-resultado .tb-res-icono { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; font-size: 12.5px; background: rgb(var(--n-100)); color: rgb(var(--n-500)); }
html.dark .tb-resultado .tb-res-icono { background: rgb(255 255 255 / .06); color: rgb(var(--n-300)); }
.tb-resultado b { display: block; font-weight: 600; font-size: 13px; color: rgb(var(--n-900)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.dark .tb-resultado b { color: rgb(var(--n-50)); }
.tb-resultado small { display: block; font-size: 11.5px; color: rgb(var(--n-500)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-resultado[aria-selected="true"], .tb-resultado:focus-visible { background: rgb(var(--ac-50)) !important; outline: none; }
html.dark .tb-resultado[aria-selected="true"], html.dark .tb-resultado:focus-visible { background: rgb(var(--ac-500) / .12) !important; }
.tb-resultado[aria-selected="true"] .tb-res-icono { background: rgb(var(--ac-600)); color: #fff; }
mark.buscar-marca, .tb-resultado mark { background: rgb(var(--ac-500) / .18); color: inherit; border-radius: 3px; padding: 0 1px; }
.tb-menu-ayuda { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem 1rem; font-size: 11px; color: rgb(var(--n-400)); border-top: 1px solid rgb(var(--n-100)); }
html.dark .tb-menu-ayuda { border-color: rgb(255 255 255 / .06); }
.tb-menu-ayuda kbd { font: 600 10px var(--fuente-mono, monospace); border: 1px solid rgb(var(--n-200)); border-radius: 4px; padding: 0 4px; }
html.dark .tb-menu-ayuda kbd { border-color: rgb(255 255 255 / .12); }

.tb-avatar { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; display: grid; place-items: center; font-size: 12px; font-weight: 650;
    background: rgb(var(--ac-100)); color: rgb(var(--ac-700)); }
html.dark .tb-avatar { background: rgb(var(--ac-500) / .2); color: rgb(var(--ac-200)); }
.tb-opcion { display: flex; align-items: center; gap: .65rem; padding: .55rem 1rem; font-size: 13px; color: rgb(var(--n-700)); }
.tb-opcion > i { width: 18px; text-align: center; color: rgb(var(--n-400)); }
.tb-opcion:hover, .tb-opcion:focus-visible { background: rgb(var(--n-50)); color: rgb(var(--n-900)); outline: none; }
.tb-opcion small { margin-left: auto; font-size: 11px; color: rgb(var(--n-400)); }
html.dark .tb-opcion { color: rgb(var(--n-300)); }
html.dark .tb-opcion:hover, html.dark .tb-opcion:focus-visible { background: rgb(255 255 255 / .05); color: rgb(var(--n-50)); }
.tb-opcion.peligro, .tb-opcion.peligro > i { color: #e11d48; }
.tb-divisor { height: 1px; margin: .3rem 0; background: rgb(var(--n-100)); }
html.dark .tb-divisor { background: rgb(255 255 255 / .06); }
.tb-progreso { height: 4px; border-radius: 999px; background: rgb(var(--n-100)); overflow: hidden; }
.tb-progreso > span { display: block; height: 100%; background: rgb(var(--ac-500)); border-radius: inherit; }
html.dark .tb-progreso { background: rgb(255 255 255 / .08); }

/* Avisos emergentes (notificación nueva en tiempo real) */
.ui-toasts { position: fixed; right: 1rem; top: 4.5rem; z-index: 90; display: grid; gap: .5rem; width: min(360px, calc(100vw - 2rem)); pointer-events: none; }
.ui-toast { pointer-events: auto; display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .9rem; border-radius: 14px; background: #fff; border: 1px solid rgb(var(--n-200));
    box-shadow: 0 18px 40px -14px rgb(var(--n-950) / .3); animation: ui-toast .28s cubic-bezier(.2, .9, .25, 1); font-size: 13px; color: rgb(var(--n-700)); }
html.dark .ui-toast { background: rgb(var(--n-900)); border-color: rgb(255 255 255 / .08); color: rgb(var(--n-300)); }
.ui-toast b { display: block; color: rgb(var(--n-900)); font-weight: 600; }
html.dark .ui-toast b { color: rgb(var(--n-50)); }
.ui-toast p { margin-top: 2px; font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-toast.saliendo { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
@keyframes ui-toast { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

/* =====================================================================
   Asistente de IA flotante
   ===================================================================== */
.ia-flotante-btn { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 70; width: 52px; height: 52px; border-radius: 999px; border: 0; cursor: pointer;
    display: grid; place-items: center; font-size: 19px; color: #fff; background: linear-gradient(135deg, rgb(var(--ac-500)), rgb(var(--ac-700)));
    box-shadow: 0 12px 28px -10px rgb(var(--ac-700) / .7), 0 0 0 1px rgb(255 255 255 / .12) inset; transition: transform .18s ease, box-shadow .18s ease; }
.ia-flotante-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 34px -10px rgb(var(--ac-700) / .8); }
.ia-flotante-btn:focus-visible { outline: 3px solid rgb(var(--ac-500) / .45); outline-offset: 3px; }
.ia-flotante-btn.abierto i::before { content: "\f00d"; }
.ia-flotante { position: fixed; right: 1.25rem; bottom: 5.25rem; z-index: 70; width: min(420px, calc(100vw - 2.5rem)); height: min(640px, calc(100vh - 7rem));
    display: flex; flex-direction: column; border-radius: var(--radio-2xl, 18px); overflow: hidden; background: #fff; border: 1px solid rgb(var(--n-200));
    box-shadow: 0 28px 60px -20px rgb(var(--n-950) / .45); animation: ui-panel .22s cubic-bezier(.2, .9, .25, 1); }
.ia-flotante[hidden] { display: none; }
html.dark .ia-flotante { background: rgb(var(--n-950)); border-color: rgb(255 255 255 / .08); }
.ia-flotante-cabeza { display: flex; align-items: center; gap: .65rem; padding: .7rem .8rem .7rem 1rem; border-bottom: 1px solid rgb(var(--n-100));
    background: linear-gradient(180deg, rgb(var(--ac-50)), #fff); }
html.dark .ia-flotante-cabeza { border-color: rgb(255 255 255 / .06); background: linear-gradient(180deg, rgb(var(--ac-500) / .12), transparent); }
.ia-flotante-cabeza > div { flex: 1; }
.ia-flotante-cabeza b { display: block; font-size: 14px; font-weight: 650; color: rgb(var(--n-900)); }
html.dark .ia-flotante-cabeza b { color: rgb(var(--n-50)); }
.ia-flotante-cabeza small { display: block; font-size: 11.5px; color: rgb(var(--n-500)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ia-flotante-logo { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, rgb(var(--ac-500)), rgb(var(--ac-700))); }
.ia-flotante iframe { flex: 1; width: 100%; border: 0; background: transparent; }
/* Agente de negocio de la consola (panel sin iframe) */
.ag-mensajes { flex: 1; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .7rem; }
.ag-msg { max-width: 92%; border-radius: 14px; padding: .6rem .8rem; font-size: 13px; line-height: 1.5; }
.ag-usuario { align-self: flex-end; background: rgb(var(--ac-600)); color: #fff; white-space: pre-wrap; }
.ag-ia { align-self: flex-start; background: rgb(var(--n-50)); border: 1px solid rgb(var(--n-200)); color: rgb(var(--n-800)); }
html.dark .ag-ia { background: rgb(var(--n-900)); border-color: rgb(255 255 255 / .07); color: rgb(var(--n-100)); }
.ag-md p { margin: .25rem 0; } .ag-md ul, .ag-md ol { margin: .3rem 0 .3rem 1.1rem; } .ag-md ul { list-style: disc; } .ag-md ol { list-style: decimal; }
.ag-md h4 { font-weight: 700; margin: .55rem 0 .2rem; } .ag-md code { font-size: 12px; padding: 0 .25rem; border-radius: 4px; background: rgb(var(--n-200) / .6); }
.ag-pie { margin-top: .4rem; font-size: 10.5px; color: rgb(var(--n-500)); }
.ag-nota { font-size: 11px; color: rgb(180 83 9); margin-bottom: .25rem; } html.dark .ag-nota { color: rgb(252 211 77); }
.ag-error { font-size: 12px; color: rgb(225 29 72); margin-top: .3rem; }
.ag-bienvenida { text-align: center; color: rgb(var(--n-500)); font-size: 12.5px; padding: 1.25rem .5rem .25rem; }
.ag-bienvenida i { font-size: 1.9rem; color: rgb(var(--ac-500)); margin-bottom: .5rem; display: block; }
.ag-sugerencias { display: flex; flex-direction: column; gap: .4rem; }
.ag-sugerencias button { text-align: left; font-size: 12px; padding: .5rem .7rem; border-radius: 10px; border: 1px solid rgb(var(--n-200)); color: rgb(var(--n-700)); background: transparent; cursor: pointer; }
.ag-sugerencias button:hover { border-color: rgb(var(--ac-500)); color: rgb(var(--ac-700)); }
html.dark .ag-sugerencias button { border-color: rgb(255 255 255 / .1); color: rgb(var(--n-200)); }
.ag-form { display: flex; gap: .45rem; align-items: flex-end; padding: .65rem; border-top: 1px solid rgb(var(--n-100)); }
html.dark .ag-form { border-color: rgb(255 255 255 / .06); }
.ag-form textarea { flex: 1; resize: none; font-size: 13px; border-radius: 12px; padding: .5rem .7rem; border: 1px solid rgb(var(--n-300)); background: rgb(var(--n-0, 255 255 255)); color: inherit; }
html.dark .ag-form textarea { background: rgb(var(--n-900)); border-color: rgb(255 255 255 / .1); }
@media (max-width: 640px) {
    .ia-flotante { inset: 0; width: 100%; height: 100%; border-radius: 0; border: 0; }
    .ia-flotante-btn { right: 1rem; bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .ia-flotante, .ui-toast { animation: none; } .ia-flotante-btn { transition: none; } }

/* Consola → IA: cadena de prioridad, etiquetas de estado y proveedores */
button.cs-pestana { background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit; }
.ia-eslabon { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .65rem .8rem; border-radius: 12px; border: 1px solid rgb(var(--n-200)); background: rgb(var(--n-50) / .6); }
html.dark .ia-eslabon { border-color: rgb(255 255 255 / .07); background: rgb(255 255 255 / .02); }
.ia-eslabon-num { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: rgb(var(--ac-600)); flex-shrink: 0; }
.ia-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border-radius: 999px; font-weight: 600; border: 1px solid transparent; }
.ia-chip.verde { color: rgb(4 120 87); background: rgb(16 185 129 / .12); } html.dark .ia-chip.verde { color: rgb(110 231 183); }
.ia-chip.ambar { color: rgb(180 83 9); background: rgb(245 158 11 / .14); } html.dark .ia-chip.ambar { color: rgb(252 211 77); }
.ia-chip.rojo { color: rgb(190 18 60); background: rgb(244 63 94 / .12); } html.dark .ia-chip.rojo { color: rgb(253 164 175); }
.ia-chip.gris { color: rgb(var(--n-500)); background: rgb(var(--n-200) / .5); } html.dark .ia-chip.gris { background: rgb(255 255 255 / .06); }
.ia-proveedor { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .7rem; border-radius: 12px; border: 1px solid rgb(var(--n-200)); }
html.dark .ia-proveedor { border-color: rgb(255 255 255 / .07); }
/* Sub-pestañas dentro de una pantalla (píldoras, para no confundirlas con las de la sección) */
.cs-pestanas.cs-sub { border-bottom: 0; gap: .4rem; margin: 0 0 1rem; flex-wrap: wrap; overflow: visible; }
.cs-sub .cs-pestana { border: 1px solid rgb(var(--n-200)); border-radius: 999px; padding: .4rem .85rem; margin: 0; font-size: 12.5px; }
html.dark .cs-sub .cs-pestana { border-color: rgb(255 255 255 / .09); }
.cs-sub .cs-pestana.activa { background: rgb(var(--ac-600)); color: #fff; border-color: transparent; }
html.dark .cs-sub .cs-pestana.activa { color: #fff; }
/* Etiqueta con contador u otro dato a la derecha (class="etiqueta flex justify-between") */
html[data-tema] .etiqueta.flex { display: flex; gap: .5rem; }