/* =====================================================================
 *  LIVECOINS — Tema "Neon Glass" (azul cielo)
 *  Reskin global del panel: paleta azul cielo + glassmorphism fuerte,
 *  sin cambiar markup ni JS. Diseñado para cargarse DESPUÉS de todos los
 *  estilos existentes en index.html y heredarse en iframes panel.
 * =====================================================================*/

/* ---------------------------------------------------------------------
 *  1. Variables base
 * -------------------------------------------------------------------*/
:root {
    --tf-bg: #050a16 !important;
    --tf-surface: #0c1828 !important;
    --tf-surface-elevated: #122236 !important;

    --tf-border: rgba(56, 189, 248, 0.22) !important;
    --tf-teal: #22d3ee !important;
    --tf-teal-soft: rgba(34, 211, 238, 0.18) !important;
    --tf-pink: #f472b6 !important;
    --tf-pink-deep: #ec4899 !important;
    --tf-pink-glow: rgba(56, 189, 248, 0.32) !important;

    --tf-text: #e6f1ff !important;
    --tf-muted: #93a6c2 !important;

    --dash-sidebar: #06101e !important;
    --dash-card: #0e1a2c !important;
    --dash-green: #4ade80 !important;
    --dash-green-dim: #22c55e !important;
    --dash-blue: #38bdf8 !important;
    --dash-blue-hover: #0ea5e9 !important;
    --dash-danger: #ef4476 !important;

    --neon-blue: #38bdf8;
    --neon-blue-strong: #0ea5e9;
    --neon-blue-deep: #0284c7;
    --neon-cyan: #22d3ee;
    --neon-cyan-soft: rgba(34, 211, 238, 0.45);
    --neon-blue-soft: rgba(56, 189, 248, 0.45);
    --neon-glow-blue: 0 0 22px rgba(56, 189, 248, 0.45);
    --neon-glow-cyan: 0 0 22px rgba(34, 211, 238, 0.4);
}

/* ---------------------------------------------------------------------
 *  2. Fondo
 * -------------------------------------------------------------------*/
html { background-color: #050a16; }

body.app-root {
    background:
        radial-gradient(900px 700px at 12% 6%, rgba(56, 189, 248, 0.18), transparent 60%),
        radial-gradient(720px 540px at 92% 18%, rgba(34, 211, 238, 0.14), transparent 60%),
        radial-gradient(820px 640px at 60% 110%, rgba(14, 165, 233, 0.16), transparent 60%),
        linear-gradient(180deg, #050a16 0%, #061021 60%, #08152a 100%) !important;
    background-attachment: fixed !important;
    color: var(--tf-text) !important;
}

body:not(.app-root) {
    background-color: transparent !important;
    color: var(--tf-text) !important;
}

/* ---------------------------------------------------------------------
 *  3. Glass
 * -------------------------------------------------------------------*/
.glass {
    background:
        linear-gradient(160deg,
            rgba(18, 36, 60, 0.62) 0%,
            rgba(10, 22, 40, 0.74) 50%,
            rgba(6, 14, 28, 0.82) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 0 28px rgba(56, 189, 248, 0.10) !important;
    backdrop-filter: blur(22px) saturate(1.35) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;
}
.glass:hover {
    border-color: rgba(56, 189, 248, 0.45) !important;
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 40px rgba(56, 189, 248, 0.22) !important;
}

/* ---------------------------------------------------------------------
 *  4. Scrollbar
 * -------------------------------------------------------------------*/
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #38bdf8, #22d3ee) !important;
    border-radius: 999px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #7dd3fc, #67e8f9) !important;
}
* { scrollbar-color: #38bdf8 transparent; }

/* ---------------------------------------------------------------------
 *  5. Sidebar
 * -------------------------------------------------------------------*/
#sidebar, .sidebar-shell {
    background:
        radial-gradient(800px 480px at -10% 8%, rgba(56, 189, 248, 0.22), transparent 60%),
        linear-gradient(180deg, #08182e 0%, #06101e 55%, #050a16 100%) !important;
    border-right: 1px solid rgba(56, 189, 248, 0.22) !important;
    box-shadow: 14px 0 60px rgba(0, 0, 0, 0.6),
                inset -1px 0 0 rgba(255, 255, 255, 0.03) !important;
}

.nav-btn {
    color: #b9d8f0 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    transition: all 0.18s ease !important;
}
.nav-btn:hover {
    background: linear-gradient(95deg,
        rgba(56, 189, 248, 0.16),
        rgba(34, 211, 238, 0.08)) !important;
    border-color: rgba(56, 189, 248, 0.38) !important;
    color: #e6f1ff !important;
    transform: translateX(2px);
}
.nav-btn.active,
.nav-btn[aria-current="page"] {
    background: linear-gradient(95deg,
        rgba(56, 189, 248, 0.28),
        rgba(34, 211, 238, 0.18)) !important;
    border-color: rgba(125, 211, 252, 0.55) !important;
    color: #f0f9ff !important;
    box-shadow:
        0 0 22px rgba(56, 189, 248, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

/* ---------------------------------------------------------------------
 *  6. Tipografía
 * -------------------------------------------------------------------*/
h1, h2, h3,
.inicio-dash-hero-title,
.aa-panel__title,
#inicio-streamdeck-title,
.dashboard-card h2,
.dashboard-card h3 {
    background: linear-gradient(95deg,
        #67e8f9 0%,
        #38bdf8 50%,
        #0ea5e9 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.28)) !important;
}
h4, h5, h6 { color: #c9e1f6 !important; }

.inicio-dash-hero-sub,
.inicio-dash-overview-sub,
.inicio-dash-stat-sub,
.inicio-dash-stat-kicker {
    color: #93a6c2 !important;
}

/* ---------------------------------------------------------------------
 *  7. Botones globales
 * -------------------------------------------------------------------*/
.btn-crear-alerta,
.btn-guardar-alertas,
.aa-btn-overlay,
button.dash-btn,
.inicio-dash-btn,
button.btn-primary,
.panel-admin-back {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
    color: #061021 !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    box-shadow:
        0 6px 18px rgba(56, 189, 248, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s !important;
}
.btn-crear-alerta:hover,
.btn-guardar-alertas:hover,
.aa-btn-overlay:hover,
button.dash-btn:hover,
.inicio-dash-btn:hover,
button.btn-primary:hover,
.panel-admin-back:hover {
    transform: translateY(-1px);
    box-shadow:
        0 10px 24px rgba(34, 211, 238, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
    filter: saturate(1.1) brightness(1.05);
}
.btn-crear-alerta:active,
.btn-guardar-alertas:active,
.aa-btn-overlay:active { transform: translateY(0); }

.aa-btn-eliminar,
button.dash-btn-ghost {
    background: rgba(56, 189, 248, 0.10) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    color: #bae6fd !important;
    border-radius: 999px !important;
}
.aa-btn-eliminar:hover,
button.dash-btn-ghost:hover {
    background: rgba(56, 189, 248, 0.18) !important;
    border-color: rgba(125, 211, 252, 0.6) !important;
}

/* ---------------------------------------------------------------------
 *  8. Inputs
 * -------------------------------------------------------------------*/
input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
    background: rgba(8, 18, 32, 0.72) !important;
    color: #e6f1ff !important;
    border: 1px solid rgba(56, 189, 248, 0.32) !important;
    border-radius: 10px !important;
    transition: border-color 0.15s, box-shadow 0.18s !important;
}
input:focus, textarea:focus, select:focus {
    border-color: #7dd3fc !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22),
                0 0 18px rgba(56, 189, 248, 0.32) !important;
    outline: none !important;
}

/* ---------------------------------------------------------------------
 *  9. Toggles / checkboxes
 * -------------------------------------------------------------------*/
input[type="checkbox"] {
    accent-color: #4ade80 !important;
}
input[type="range"] { accent-color: #38bdf8 !important; }

.aa-master-pill__view {
    background: rgba(56, 189, 248, 0.18) !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
}
.aa-master-pill__input:checked + .aa-master-pill__view {
    background: rgba(74, 222, 128, 0.28) !important;
    border-color: rgba(74, 222, 128, 0.6) !important;
    box-shadow: 0 0 18px rgba(74, 222, 128, 0.35) !important;
}

/* ---------------------------------------------------------------------
 *  10. Cards del dashboard
 * -------------------------------------------------------------------*/
.dashboard-card,
#panel-control,
.inicio-dash-card,
.inicio-dash-shell .inicio-dash-card,
.panel-io-config {
    background:
        linear-gradient(150deg,
            rgba(20, 40, 64, 0.62) 0%,
            rgba(10, 22, 40, 0.78) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    border-radius: 22px !important;
    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
}
.dashboard-card:hover,
#panel-control:hover,
.inicio-dash-card:hover {
    border-color: rgba(125, 211, 252, 0.55) !important;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.6),
        0 0 22px rgba(56, 189, 248, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
}

.inicio-dash-hero {
    background:
        radial-gradient(700px 360px at 95% -10%, rgba(34, 211, 238, 0.24), transparent 60%),
        radial-gradient(600px 400px at -5% 110%, rgba(56, 189, 248, 0.22), transparent 60%),
        linear-gradient(135deg, rgba(8, 30, 56, 0.7), rgba(10, 22, 40, 0.82)) !important;
    border-color: rgba(125, 211, 252, 0.4) !important;
    box-shadow:
        0 18px 48px rgba(56, 189, 248, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
}

/* Pills de estado */
.inicio-dash-pill,
.inicio-dash-pill--ok,
.inicio-dash-status-row .inicio-dash-pill {
    background: rgba(74, 222, 128, 0.18) !important;
    color: #bbf7d0 !important;
    border: 1px solid rgba(74, 222, 128, 0.45) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.18) !important;
}
.inicio-dash-pill--off,
.inicio-dash-pill[data-state="off"] {
    background: rgba(248, 113, 113, 0.18) !important;
    color: #fecaca !important;
    border-color: rgba(248, 113, 113, 0.45) !important;
    box-shadow: 0 0 12px rgba(248, 113, 113, 0.18) !important;
}

/* ---------------------------------------------------------------------
 *  11. Estadísticas
 * -------------------------------------------------------------------*/
.inicio-dash-stat-value {
    background: linear-gradient(95deg, #e6f1ff 0%, #7dd3fc 50%, #38bdf8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ---------------------------------------------------------------------
 *  12. Filas / tablas
 * -------------------------------------------------------------------*/
.fila-alerta,
.fila-interaccion,
.fila-video,
.fila-comunidad,
.aa-gif-card {
    background:
        linear-gradient(135deg,
            rgba(20, 40, 64, 0.55) 0%,
            rgba(10, 22, 40, 0.7) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35) !important;
}
.fila-alerta:hover,
.fila-interaccion:hover,
.fila-video:hover,
.fila-comunidad:hover,
.aa-gif-card:hover {
    border-color: rgba(125, 211, 252, 0.5) !important;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.4),
        0 0 22px rgba(56, 189, 248, 0.2) !important;
}

/* ---------------------------------------------------------------------
 *  13. Tabs / pestañas
 * -------------------------------------------------------------------*/
.panel-admin-tab,
.tab,
button[role="tab"] {
    background: rgba(56, 189, 248, 0.08) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    color: #bae6fd !important;
    border-radius: 999px !important;
}
.panel-admin-tab.is-active,
.tab.active,
button[role="tab"][aria-selected="true"] {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
    color: #061021 !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgba(56, 189, 248, 0.45) !important;
}

/* ---------------------------------------------------------------------
 *  14. Avatares
 * -------------------------------------------------------------------*/
.inicio-dash-hero-avatar,
.avatar-ring,
.user-avatar,
img.avatar {
    border: 2px solid transparent !important;
    background:
        linear-gradient(#08182e, #08182e) padding-box,
        linear-gradient(135deg, #22d3ee, #38bdf8 50%, #0ea5e9) border-box !important;
    box-shadow:
        0 0 0 1px rgba(56, 189, 248, 0.6),
        0 0 22px rgba(56, 189, 248, 0.45) !important;
}

/* ---------------------------------------------------------------------
 *  15. Modales
 * -------------------------------------------------------------------*/
.modal-accion-box,
.mitik-confirm-dialog__msg,
.modal-accion-panel .modal-accion-box {
    background:
        linear-gradient(150deg,
            rgba(16, 36, 60, 0.95),
            rgba(8, 18, 32, 0.96)) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.7),
        0 0 60px rgba(56, 189, 248, 0.22) !important;
    border-radius: 22px !important;
}
.modal-accion-backdrop {
    background: rgba(5, 10, 22, 0.78) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* ---------------------------------------------------------------------
 *  16. Streamdeck card en Inicio
 * -------------------------------------------------------------------*/
#inicio-streamdeck-card .glass {
    background:
        radial-gradient(700px 300px at 100% 0%, rgba(56, 189, 248, 0.20), transparent 60%),
        radial-gradient(500px 280px at 0% 100%, rgba(34, 211, 238, 0.18), transparent 60%),
        linear-gradient(150deg, rgba(20, 40, 64, 0.65), rgba(10, 22, 40, 0.82)) !important;
    border-color: rgba(125, 211, 252, 0.45) !important;
}
#streamdeck-qr {
    box-shadow: 0 0 28px rgba(56, 189, 248, 0.45),
                0 0 0 8px rgba(255, 255, 255, 0.06) !important;
}

/* ---------------------------------------------------------------------
 *  17. Iconos / botones de cabecera
 * -------------------------------------------------------------------*/
.header-icon,
.dashboard-header-icon,
.icon-btn {
    color: #bae6fd !important;
    background: rgba(56, 189, 248, 0.10) !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    border-radius: 12px !important;
    transition: all 0.18s !important;
}
.header-icon:hover,
.icon-btn:hover {
    background: rgba(56, 189, 248, 0.22) !important;
    border-color: rgba(125, 211, 252, 0.6) !important;
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.35) !important;
}

/* ---------------------------------------------------------------------
 *  18. Toolbars
 * -------------------------------------------------------------------*/
.aa-panel__toolbar,
.dashboard-toolbar {
    background:
        linear-gradient(180deg, rgba(20, 40, 64, 0.45), rgba(10, 22, 40, 0.5)) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.22) !important;
}

/* ---------------------------------------------------------------------
 *  19. Toggles tipo iOS en ON
 * -------------------------------------------------------------------*/
.check-on:checked + *,
.check-enabled:checked ~ .aa-gif-card__toggle-view {
    background: rgba(74, 222, 128, 0.28) !important;
    border-color: rgba(74, 222, 128, 0.6) !important;
}

/* ---------------------------------------------------------------------
 *  20. Selección
 * -------------------------------------------------------------------*/
::selection {
    background: rgba(56, 189, 248, 0.45);
    color: #fff;
}

/* ---------------------------------------------------------------------
 *  21. Bordes generales
 * -------------------------------------------------------------------*/
.aa-panel,
.panel-interacciones,
section.glass,
.dashboard-section,
.dashboard-card-shell {
    border-color: rgba(56, 189, 248, 0.26) !important;
}

/* ---------------------------------------------------------------------
 *  22. Bordes destacados de cards
 * -------------------------------------------------------------------*/
.inicio-dash-card::before,
.dashboard-card--connection::before {
    background: linear-gradient(135deg,
        rgba(34, 211, 238, 0.28),
        rgba(56, 189, 248, 0.28),
        rgba(14, 165, 233, 0.28)) !important;
}

/* ---------------------------------------------------------------------
 *  23. Botones de Conectar / acciones principales
 * -------------------------------------------------------------------*/
#btn-conectar-tiktok,
button.dash-btn--connect,
.panel-admin-tab--primary {
    background: linear-gradient(135deg, #22d3ee 0%, #38bdf8 60%, #0ea5e9 100%) !important;
    color: #061021 !important;
    box-shadow: 0 6px 20px rgba(34, 211, 238, 0.4) !important;
}
#btn-desconectar-tiktok {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.7), rgba(239, 68, 68, 0.7)) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(248, 113, 113, 0.32) !important;
}

/* ---------------------------------------------------------------------
 *  24. Catch-all
 * -------------------------------------------------------------------*/
[class*="glass"]:not(.streamdeck-host *):not(body) {
    border-color: rgba(56, 189, 248, 0.28);
}

/* =====================================================================
 *  INICIO LAYOUT — recreación del mockup "Centro de Control"
 *  Solo restyle; el HTML existente y la funcionalidad se mantienen.
 * =====================================================================*/

/* ---- Hero card ---- */
.inicio-dash-hero {
    padding: 30px 36px !important;
}
.inicio-dash-hero-top {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 28px !important;
}
.inicio-dash-hero-copy { gap: 8px !important; display: flex; flex-direction: column; }

.inicio-dash-badge { display: none !important; }

.inicio-dash-hero-title {
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #f0f9ff !important;
    filter: none !important;
}
.inicio-dash-hero-greet {
    color: #f0f9ff !important;
}
.inicio-dash-hero-user {
    background: linear-gradient(95deg, #67e8f9 0%, #38bdf8 60%, #0ea5e9 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 800 !important;
    filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.45));
}
.inicio-dash-hero-sub {
    color: #93a6c2 !important;
    font-size: 13.5px !important;
    margin: 0 !important;
}

.inicio-dash-hero-promo {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
}
.inicio-dash-hero-promo-kicker,
.inicio-dash-hero-promo-cta:not(button) {
    display: none !important;
}
.inicio-dash-hero-promo-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(56, 189, 248, 0.5) !important;
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 0.20), rgba(34, 211, 238, 0.12)) !important;
    color: #e6f1ff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 11px 22px !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: all 0.18s ease;
    box-shadow: 0 6px 18px rgba(56, 189, 248, 0.20);
}
.inicio-dash-hero-promo-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.7) !important;
    box-shadow: 0 10px 26px rgba(56, 189, 248, 0.35);
}

/* =====================================================================
 *  Optimización: pausa animaciones en secciones inactivas y cuando la
 *  pestaña entera está oculta. Esto reduce drásticamente el uso de
 *  CPU/GPU en idle sin alterar la funcionalidad ni el aspecto cuando
 *  la sección/pestaña vuelve a estar visible.
 * =====================================================================*/
.seccion-app:not(.activa),
.seccion-app:not(.activa) * {
    animation-play-state: paused !important;
}
body[data-doc-hidden="true"] *,
body[data-doc-hidden="true"] {
    animation-play-state: paused !important;
}
/* Cuando la ventana está oculta, también apagamos compositing pesado:
   shadows costosos, blurs, filtros. La pestaña sigue funcionando, solo
   que cuando vuelves a verla se reactivan inmediatamente. */
body[data-doc-hidden="true"] .glass,
body[data-doc-hidden="true"] [class*="-backdrop"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Respeto a usuarios con "Reducir movimiento" del SO: cero animaciones,
   cero transiciones. Hace la app ~30-50% más liviana en GPU para esos
   usuarios. El power-manager también inyecta esto por JS por si la regla
   se sobrescribe por specificity. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
        scroll-behavior: auto !important;
    }
}

/* ====== MODO LITE (laptops modestas: ≤ 4 GB RAM o ≤ 4 cores) ======
   `mitik-power-manager.js` añade `data-env-lite="true"` en <html> y <body>.
   Apagamos lo que más cuesta a GPU/CPU sin perder funcionalidad:
   - backdrop-filter (blur en cristal): el efecto más caro de pintar.
   - box-shadow grandes/animados: costoso re-paint.
   - filtros CSS (blur, drop-shadow, etc.).
   - animaciones decorativas no esenciales (pulse, glow, scintilleo). */
[data-env-lite="true"] *,
[data-env-lite="true"] *::before,
[data-env-lite="true"] *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-env-lite="true"] .glass,
[data-env-lite="true"] [class*="-backdrop"],
[data-env-lite="true"] [class*="-glow"],
[data-env-lite="true"] [class*="-blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

/* ====== MODO ULTRA-LITE (≤ 2 GB RAM, ≤ 2 cores o `Save Data` ON) ======
   Modo de emergencia para PCs realmente débiles. Adicionalmente apagamos
   shadows pesadas y animaciones cíclicas globalmente. */
[data-env-ultra-lite="true"] * {
    box-shadow: none !important;
    text-shadow: none !important;
}
[data-env-ultra-lite="true"] *, 
[data-env-ultra-lite="true"] *::before, 
[data-env-ultra-lite="true"] *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
}
/* No interrumpir transiciones cortas en uso (hover, click): solo pausamos
   animaciones cíclicas (infinite). Las transiciones se mantienen porque
   `animation-play-state` no afecta a `transition`. */

/* ---- Layout columna principal + Tu cuenta a la derecha ---- */
.inicio-dash-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 22px !important;
    align-items: stretch !important;
}
.inicio-dash-top .inicio-dash-hero {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
}
.inicio-dash-top .inicio-dash-account {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
}

/* ---- Las 3 tarjetas de acción ---- */
.inicio-dash-hero-actions {
    margin-top: 42px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}
@media (max-width: 980px) {
    .inicio-dash-top { grid-template-columns: 1fr !important; }
    .inicio-dash-top .inicio-dash-account { grid-row: auto !important; }
    .inicio-dash-hero-actions { grid-template-columns: 1fr !important; }
}

.inicio-dash-btn {
    position: relative;
    padding: 22px 22px 20px !important;
    border-radius: 22px !important;
    background:
        linear-gradient(150deg,
            rgba(18, 44, 76, 0.7) 0%,
            rgba(10, 22, 40, 0.78) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.32) !important;
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.18s, box-shadow 0.22s, border-color 0.18s !important;
}
.inicio-dash-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(420px 200px at 100% 0%, rgba(34, 211, 238, 0.16), transparent 60%);
    opacity: 0.85;
}
.inicio-dash-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(125, 211, 252, 0.55) !important;
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.55),
        0 0 32px rgba(56, 189, 248, 0.30),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
}

/* Cabecera: icono arriba a la izquierda + título debajo */
.inicio-dash-btn-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    margin-bottom: 14px !important;
}
.inicio-dash-btn-ico {
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    background:
        linear-gradient(135deg,
            rgba(34, 211, 238, 0.20),
            rgba(56, 189, 248, 0.26),
            rgba(14, 165, 233, 0.22)) !important;
    border: 1px solid rgba(125, 211, 252, 0.5) !important;
    box-shadow:
        0 0 18px rgba(56, 189, 248, 0.36),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
    order: -1;
}
.inicio-dash-btn-title {
    display: block !important;
    color: #f0f9ff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
}
.inicio-dash-btn-sub {
    display: none !important;
}

/* Footer: status pill (izq) + toggle iOS (der) */
.inicio-dash-btn-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 4px !important;
}
.inicio-dash-btn-status { order: 1 !important; }
.inicio-dash-btn-toggle { order: 2 !important; }

.inicio-dash-btn-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer;
}
.inicio-dash-btn-toggle-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    margin: -1px !important;
}
.inicio-dash-btn-toggle-track {
    width: 56px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: rgba(14, 165, 233, 0.25) !important;
    border: 1px solid rgba(56, 189, 248, 0.45) !important;
    position: relative;
    transition: all 0.18s ease;
}
.inicio-dash-btn-toggle-track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: left 0.18s ease, background 0.18s ease;
}
.inicio-dash-btn-toggle[aria-pressed="true"] .inicio-dash-btn-toggle-track {
    background: linear-gradient(135deg, #22c55e, #4ade80) !important;
    border-color: rgba(74, 222, 128, 0.6) !important;
    box-shadow: 0 0 18px rgba(74, 222, 128, 0.45) !important;
}
.inicio-dash-btn-toggle[aria-pressed="true"] .inicio-dash-btn-toggle-track::after {
    left: 30px;
}
.inicio-dash-btn-status {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-weight: 800 !important;
    color: #7dd3fc !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: rgba(56, 189, 248, 0.16) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
}
.inicio-dash-btn[data-enabled="true"] .inicio-dash-btn-status {
    color: #86efac !important;
    background: rgba(74, 222, 128, 0.16) !important;
    border-color: rgba(74, 222, 128, 0.45) !important;
}

/* Tints por tarjeta */
.inicio-dash-btn[data-home-card="alertas"] .inicio-dash-btn-ico {
    background:
        linear-gradient(135deg,
            rgba(34, 211, 238, 0.22),
            rgba(56, 189, 248, 0.24)) !important;
    box-shadow: 0 0 22px rgba(34, 211, 238, 0.4),
                inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
.inicio-dash-btn[data-home-card="acciones"] .inicio-dash-btn-ico {
    background:
        linear-gradient(135deg,
            rgba(56, 189, 248, 0.28),
            rgba(14, 165, 233, 0.22)) !important;
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.42),
                inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
.inicio-dash-btn[data-home-card="tts"] .inicio-dash-btn-ico {
    background:
        linear-gradient(135deg,
            rgba(125, 211, 252, 0.24),
            rgba(34, 211, 238, 0.24)) !important;
    box-shadow: 0 0 22px rgba(125, 211, 252, 0.42),
                inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

/* ---- Tu cuenta ---- */
.inicio-dash-account {
    padding: 24px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}
.inicio-dash-account-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.inicio-dash-account-title {
    color: #f0f9ff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    filter: none !important;
}
.inicio-dash-link-quiet {
    background: transparent !important;
    border: none !important;
    color: #7dd3fc !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer;
    text-decoration: none;
}
.inicio-dash-link-quiet:hover { color: #f0f9ff !important; }

.inicio-dash-profile-pill {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 0 !important;
    background: transparent !important;
    border: none !important;
}
.inicio-dash-avatar {
    width: 84px !important;
    height: 84px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #fff !important;
    position: relative;
    background:
        linear-gradient(#0a1b30, #0a1b30) padding-box,
        linear-gradient(135deg, #22d3ee, #38bdf8 50%, #0ea5e9) border-box !important;
    border: 3px solid transparent !important;
    box-shadow:
        0 0 0 4px rgba(56, 189, 248, 0.16),
        0 0 30px rgba(56, 189, 248, 0.45) !important;
}
.inicio-dash-avatar::after {
    content: "✓";
    position: absolute;
    right: -2px;
    bottom: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #4ade80);
    color: #061021;
    font-size: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #0c1828;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
    z-index: 2;
}
/* Foto de Google: rellena el círculo y respeta el aro neón */
.inicio-dash-avatar.has-photo {
    background: linear-gradient(#0a1b30, #0a1b30) padding-box,
                linear-gradient(135deg, #22d3ee, #38bdf8 50%, #0ea5e9) border-box !important;
    overflow: hidden;
    padding: 0 !important;
}
.inicio-dash-avatar .inicio-dash-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}
.inicio-dash-profile-text {
    text-align: center !important;
}
.inicio-dash-acc-name {
    color: #f0f9ff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}
.inicio-dash-acc-role {
    color: #93a6c2 !important;
    font-size: 11.5px !important;
    margin-top: 2px !important;
}

.inicio-dash-status-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}
.inicio-dash-status-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.12) !important;
}
.inicio-dash-status-row:last-child { border-bottom: none !important; }
.inicio-dash-status-label {
    color: #e6f1ff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}
.inicio-dash-status-sub {
    color: #93a6c2 !important;
    font-size: 11.5px !important;
    margin-top: 2px !important;
}

/* ---- Vista general (stat grid) ---- */
.inicio-dash-overview {
    margin-top: 22px !important;
}
.inicio-dash-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}
.inicio-dash-stat {
    padding: 20px !important;
}
.inicio-dash-stat-kicker {
    color: #93a6c2 !important;
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
}
.inicio-dash-stat-sub {
    color: #a3bdd6 !important;
    font-size: 12px !important;
}

/* ---- Streamdeck móvil ---- */
#inicio-streamdeck-card { margin-top: 22px !important; }
#inicio-streamdeck-card .glass {
    padding: 26px 28px !important;
    border-radius: 22px !important;
}
#inicio-streamdeck-title {
    font-size: 20px !important;
    font-weight: 800 !important;
}

/* =====================================================================
 *  TOPBAR — botones de acciones (notif / ayuda / asistente IA)
 * =====================================================================*/
/* Ajusta el grid del header para que el título quede al centro y los
 * botones de acciones tengan su propia columna a la derecha. */
.main-topbar__brand {
    position: relative;
    grid-template-columns: auto 1fr auto !important;
}
.main-topbar__brand-leading { grid-column: 1 !important; }
.main-topbar__center { grid-column: 2 !important; }
.main-topbar__actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 6px;
    position: relative;
    z-index: 3;
}
.topbar-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.32);
    background: rgba(56, 189, 248, 0.08);
    color: #bae6fd;
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.18s, border-color 0.18s, background 0.18s;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.topbar-icon-btn:hover {
    background: rgba(56, 189, 248, 0.18);
    border-color: rgba(125, 211, 252, 0.6);
    color: #f0f9ff;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.32);
    transform: translateY(-1px);
}
.topbar-icon-btn:active { transform: translateY(0); }
.topbar-icon-btn .topbar-icon {
    font-size: 17px;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.45));
}
.topbar-icon-dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef4476, #f472b6);
    box-shadow: 0 0 10px rgba(239, 68, 118, 0.6);
}
@media (max-width: 720px) {
    .topbar-icon-btn { width: 36px; height: 36px; border-radius: 11px; }
    .topbar-icon-btn .topbar-icon { font-size: 15px; }
}

/* =====================================================================
 *  CHAT DIRECTO CON ADMIN — Drawer (modo usuario + modo admin/inbox)
 * =====================================================================*/
.topbar-icon-btn--chat {
    background: rgba(56, 189, 248, 0.10);
}
.topbar-icon-btn--chat .topbar-icon-dot {
    background: linear-gradient(135deg, #ef4476, #f472b6);
    box-shadow: 0 0 10px rgba(239, 68, 118, 0.65);
}
.topbar-icon-btn--chat .topbar-icon-dot[hidden] { display: none; }

.mitik-adm-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: none;
    pointer-events: none;
}
.mitik-adm-overlay[aria-hidden="false"] {
    display: block;
    pointer-events: auto;
}
.mitik-adm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 10, 22, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.22s ease;
}
.mitik-adm-overlay[aria-hidden="false"] .mitik-adm-backdrop { opacity: 1; }

.mitik-adm-drawer {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(440px, 92vw);
    background:
        radial-gradient(700px 360px at 100% -10%, rgba(34, 211, 238, 0.18), transparent 60%),
        radial-gradient(600px 400px at -10% 110%, rgba(56, 189, 248, 0.20), transparent 60%),
        linear-gradient(160deg, rgba(14, 28, 48, 0.95), rgba(6, 16, 30, 0.96));
    border-left: 1px solid rgba(125, 211, 252, 0.42);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6),
                0 0 80px rgba(56, 189, 248, 0.15) inset;
    display: flex;
    flex-direction: column;
    transform: translateX(20px);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.24s ease;
}
.mitik-adm-overlay[aria-hidden="false"] .mitik-adm-drawer {
    transform: translateX(0);
    opacity: 1;
}

.mitik-adm-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 22px 22px 16px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.22);
}
.mitik-adm-back {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(56, 189, 248, 0.32);
    background: rgba(56, 189, 248, 0.10);
    color: #bae6fd;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.16s;
}
.mitik-adm-back:hover {
    background: rgba(56, 189, 248, 0.22);
    border-color: rgba(125, 211, 252, 0.6);
    color: #fff;
}
.mitik-adm-back[hidden] { display: none; }
.mitik-adm-header-text { min-width: 0; }
.mitik-adm-kicker {
    margin: 0;
    font-size: 10.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #7dd3fc;
    font-weight: 800;
}
.mitik-adm-title {
    margin: 0;
    color: #f0f9ff !important;
    font-size: 18px;
    font-weight: 800;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    filter: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mitik-adm-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(56, 189, 248, 0.32);
    background: rgba(56, 189, 248, 0.10);
    color: #bae6fd;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.16s;
}
.mitik-adm-close:hover {
    background: rgba(56, 189, 248, 0.22);
    border-color: rgba(125, 211, 252, 0.6);
    color: #fff;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
}

/* ---- Bandeja del admin ---- */
.mitik-adm-inbox {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.mitik-adm-inbox[hidden] { display: none; }
.mitik-adm-inbox-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.16);
}
.mitik-adm-search {
    flex: 1;
    height: 38px;
    padding: 0 12px !important;
    border-radius: 10px !important;
    background: rgba(8, 18, 32, 0.82) !important;
    border: 1px solid rgba(56, 189, 248, 0.32) !important;
    color: #f0f9ff !important;
    font-size: 12.5px !important;
}
.mitik-adm-inbox-count {
    font-size: 10.5px;
    color: #93a6c2;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}
.mitik-adm-inbox-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mitik-adm-inbox-empty {
    margin: 0;
    padding: 30px 24px;
    text-align: center;
    color: #93a6c2;
    font-size: 13px;
}
.mitik-adm-inbox-empty[hidden] { display: none; }
.mitik-adm-thread-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(56, 189, 248, 0.20);
    background: rgba(20, 40, 64, 0.42);
    cursor: pointer;
    transition: all 0.16s;
}
.mitik-adm-thread-item:hover {
    background: rgba(56, 189, 248, 0.14);
    border-color: rgba(125, 211, 252, 0.5);
    transform: translateX(2px);
}
.mitik-adm-thread-item.is-unread {
    border-color: rgba(239, 68, 118, 0.45);
    background: rgba(239, 68, 118, 0.08);
}
.mitik-adm-thread-avatar {
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(#0a1b30, #0a1b30) padding-box,
                linear-gradient(135deg, #22d3ee, #38bdf8 50%, #0ea5e9) border-box;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    overflow: hidden;
    flex-shrink: 0;
}
.mitik-adm-thread-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.mitik-adm-thread-name {
    grid-column: 2;
    grid-row: 1;
    color: #f0f9ff;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mitik-adm-thread-preview {
    grid-column: 2;
    grid-row: 2;
    color: #93a6c2;
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mitik-adm-thread-time {
    grid-column: 3;
    grid-row: 1;
    color: #7dd3fc;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}
.mitik-adm-thread-badge {
    grid-column: 3;
    grid-row: 2;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4476, #f472b6);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(239, 68, 118, 0.45);
    justify-self: end;
}
.mitik-adm-thread-badge[hidden] { display: none; }

/* ---- Thread (chat) ---- */
.mitik-adm-thread-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.mitik-adm-thread-wrap[hidden] { display: none; }
.mitik-adm-hint {
    margin: 0;
    padding: 10px 18px;
    color: #7dd3fc;
    font-size: 11px;
    text-align: center;
    background: rgba(56, 189, 248, 0.08);
    border-bottom: 1px solid rgba(56, 189, 248, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.mitik-adm-noauth {
    margin: 0;
    padding: 24px;
    text-align: center;
    color: #fbcfe8;
    font-size: 13px;
    background: rgba(239, 68, 118, 0.08);
    border-bottom: 1px solid rgba(239, 68, 118, 0.22);
}
.mitik-adm-noauth[hidden] { display: none; }
.mitik-adm-thread {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
.mitik-adm-thread-empty {
    color: #93a6c2;
    text-align: center;
    padding: 18px 8px;
    font-size: 12.5px;
    line-height: 1.5;
}
.mitik-adm-msg {
    max-width: 86%;
    padding: 10px 13px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.5;
    word-wrap: break-word;
    white-space: pre-wrap;
    animation: mitikAiMsgIn 0.22s ease-out both;
    position: relative;
}
.mitik-adm-msg--user {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.32), rgba(34, 211, 238, 0.22));
    border: 1px solid rgba(125, 211, 252, 0.45);
    color: #f0f9ff;
    border-bottom-right-radius: 6px;
}
.mitik-adm-msg--admin {
    align-self: flex-start;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.18), rgba(34, 197, 94, 0.18));
    border: 1px solid rgba(74, 222, 128, 0.45);
    color: #f0fdf4;
    border-bottom-left-radius: 6px;
}
.mitik-adm-msg--error {
    align-self: center;
    max-width: 92%;
    background: rgba(239, 68, 118, 0.15);
    border: 1px solid rgba(239, 68, 118, 0.55);
    color: #fbcfe8;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 12px;
    box-shadow: 0 0 14px rgba(239, 68, 118, 0.18);
}
.mitik-adm-msg-time {
    display: block;
    margin-top: 4px;
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.55);
    text-align: right;
    letter-spacing: 0.5px;
}

.mitik-adm-form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid rgba(56, 189, 248, 0.22);
    background: linear-gradient(180deg, rgba(8, 18, 32, 0.4), rgba(8, 18, 32, 0.7));
}
.mitik-adm-input {
    flex: 1;
    height: 42px;
    padding: 0 14px !important;
    border-radius: 12px !important;
    background: rgba(8, 18, 32, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.34) !important;
    color: #f0f9ff !important;
    font-size: 13.5px !important;
}
.mitik-adm-input:disabled { opacity: 0.5; }
.mitik-adm-send {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
    color: #061021;
    font-weight: 900;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(56, 189, 248, 0.4);
    transition: transform 0.12s, box-shadow 0.18s, filter 0.18s;
}
.mitik-adm-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(34, 211, 238, 0.5);
    filter: saturate(1.1) brightness(1.05);
}
.mitik-adm-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Botón "Adjuntar foto" + preview ---- */
.mitik-adm-attach {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.34);
    background: rgba(8, 18, 32, 0.85);
    color: #7dd3fc;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    flex-shrink: 0;
}
.mitik-adm-attach:hover {
    background: rgba(56, 189, 248, 0.16);
    border-color: rgba(125, 211, 252, 0.6);
    color: #f0f9ff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(56, 189, 248, 0.22);
}
.mitik-adm-attach:disabled { opacity: 0.5; cursor: not-allowed; }
.mitik-adm-attach.is-loading {
    animation: mitikAdmAttachPulse 0.9s ease-in-out infinite;
    pointer-events: none;
}
@keyframes mitikAdmAttachPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.25); }
}

.mitik-adm-attach-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 0 14px 0;
    border-top: 1px dashed rgba(56, 189, 248, 0.28);
    background: rgba(8, 18, 32, 0.6);
    animation: mitikAiMsgIn 0.22s ease-out both;
}
.mitik-adm-attach-preview[hidden] { display: none; }
.mitik-adm-attach-preview img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(125, 211, 252, 0.4);
    flex-shrink: 0;
}
.mitik-adm-attach-preview-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #cde7ff;
    font-size: 12px;
    line-height: 1.4;
}
.mitik-adm-attach-preview-info strong {
    color: #f0f9ff;
    font-size: 12.5px;
    font-weight: 700;
}
.mitik-adm-attach-preview-info span {
    color: #93a6c2;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.mitik-adm-attach-preview-x {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(239, 68, 118, 0.45);
    background: rgba(239, 68, 118, 0.12);
    color: #fbcfe8;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease;
    flex-shrink: 0;
}
.mitik-adm-attach-preview-x:hover {
    background: rgba(239, 68, 118, 0.28);
    transform: scale(1.06);
}

/* ---- Mensajes con imagen ---- */
.mitik-adm-msg--has-image {
    padding: 6px;
    max-width: 70%;
}
.mitik-adm-msg--has-image .mitik-adm-msg-img {
    display: block;
    max-width: 100%;
    max-height: 320px;
    border-radius: 12px;
    cursor: zoom-in;
    background: rgba(0, 0, 0, 0.35);
}
.mitik-adm-msg--has-image .mitik-adm-msg-caption {
    padding: 6px 8px 4px;
    font-size: 13px;
    line-height: 1.45;
    color: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.mitik-adm-msg--has-image .mitik-adm-msg-time {
    padding: 0 8px 4px;
}

/* ---- Lightbox para ver imagen ampliada ---- */
.mitik-adm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(2, 8, 18, 0.92);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
    animation: mitikAdmLightboxIn 0.2s ease-out both;
}
@keyframes mitikAdmLightboxIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.mitik-adm-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(125, 211, 252, 0.3);
}

/* =====================================================================
 *  Inicio · 🔴 En vivo ahora
 *  Fila horizontal de streamers que están actualmente en LIVE.
 * =====================================================================*/
.inicio-live-now {
    margin-bottom: 24px;
    padding: 18px 22px;
    border-radius: 18px;
    border: 1px solid rgba(125, 211, 252, 0.22);
}
.inicio-live-now-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.inicio-live-now-title {
    margin: 0;
    font-size: 17px;
    color: #e0f2fe;
    font-weight: 700;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.inicio-live-now-pulse {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: inicioLiveNowPulse 1.6s ease-out infinite;
}
@keyframes inicioLiveNowPulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.65); }
    70%  { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.inicio-live-now-count {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: rgba(56, 189, 248, 0.16);
    color: #7dd3fc;
    border: 1px solid rgba(125, 211, 252, 0.35);
}

.inicio-live-now-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px 2px 10px;
    margin: 0 -4px;
    -webkit-overflow-scrolling: touch;
}
.inicio-live-now-grid::-webkit-scrollbar { height: 6px; }
.inicio-live-now-grid::-webkit-scrollbar-thumb {
    background: rgba(125, 211, 252, 0.28);
    border-radius: 4px;
}

.inicio-live-now-empty {
    width: 100%;
    text-align: center;
    color: rgba(186, 230, 253, 0.65);
    font-size: 13px;
    padding: 22px 14px;
    border-radius: 12px;
    background: rgba(8, 20, 36, 0.45);
    border: 1px dashed rgba(125, 211, 252, 0.2);
}

.inicio-live-now-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 14px 14px;
    border-radius: 16px;
    background: rgba(8, 22, 40, 0.6);
    border: 1px solid rgba(125, 211, 252, 0.22);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease, background 0.18s ease;
    min-width: 100px;
}
.inicio-live-now-card:hover {
    transform: translateY(-2px);
    border-color: rgba(239, 68, 68, 0.55);
    background: rgba(28, 14, 22, 0.65);
    box-shadow: 0 12px 28px rgba(239, 68, 68, 0.22);
}
.inicio-live-now-card.is-disabled { cursor: default; opacity: 0.65; }
.inicio-live-now-card.is-disabled:hover { transform: none; box-shadow: none; border-color: rgba(125, 211, 252, 0.22); background: rgba(8, 22, 40, 0.6); }

.inicio-live-now-avatar {
    position: relative;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(99, 102, 241, 0.35));
    border: 2px solid rgba(239, 68, 68, 0.75);
    color: #e0f2fe;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2),
                0 10px 24px rgba(239, 68, 68, 0.18);
}
.inicio-live-now-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.inicio-live-now-avatar-letter {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inicio-live-now-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    pointer-events: none;
    border: 1px solid rgba(239, 68, 68, 0.55);
    animation: inicioLiveNowRing 2s ease-out infinite;
}
@keyframes inicioLiveNowRing {
    0%   { transform: scale(0.95); opacity: 0.9; }
    100% { transform: scale(1.18); opacity: 0; }
}

.inicio-live-now-badge {
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.18em;
    padding: 2px 9px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #f43f5e);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);
    text-transform: uppercase;
}
.inicio-live-now-name {
    margin-top: 2px;
    font-size: 12px;
    color: #e0f2fe;
    font-weight: 600;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .inicio-live-now { padding: 14px 14px; }
    .inicio-live-now-title { font-size: 15px; }
    .inicio-live-now-avatar { width: 64px; height: 64px; font-size: 22px; }
    .inicio-live-now-name { max-width: 90px; font-size: 11.5px; }
}