/*
 * refresh.css — Rediseño 2026 (Liquid Glass · Premium Dark)
 *
 * Carga DESPUÉS de style.css. Pisa selectivamente sin tocar la estructura.
 * Identidad mantenida (Orbitron en HUD/títulos, cyan dinámico via --accent-rgb).
 * Cambios:
 *   - Inter para prosa (chat, modales, descripciones)
 *   - Share Tech Mono solo en valores numéricos / mono
 *   - Liquid Glass (blur + saturate) en overlays y modales
 *   - HUD reorganizado, SVG icons consistentes (1.75 stroke), tap targets ≥44px
 *   - Modales con scrim, scale-fade, escape clara
 *   - Chat con burbujas tipográficamente respetuosas (max 65ch, line-height 1.55)
 *   - Estado del orbe con pulse sincronizado en el HUD
 *
 * Nota: usa --accent-rgb existente, NO introduce paletas nuevas.
 */

/* ─────────────────────────────────────────────────────────
   TIPOGRAFÍA GLOBAL — Inter para prosa, Share Tech Mono para mono
   ───────────────────────────────────────────────────────── */
body {
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "cv01", "cv11"; /* Inter mejoras */
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Mantener Orbitron en titulares y elementos display */
.hud-center h1,
.settings-sidebar-header h2,
.settings-section h3,
.token-dashboard-header h2,
.secondbrain-header h2,
.model-card .model-name,
.diag-value,
.slider-value {
    font-family: var(--font-display);
    font-feature-settings: normal;
}

/* Mantener Share Tech Mono SOLO donde aporta carácter de valor numérico/técnico */
.value, .hud-cost, .td-value, .sb-value,
input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="url"],
textarea, select, code, pre, kbd,
.cost-recent, .CodeMirror,
.account-tenant-id, .account-email,
.tasks-due, .agenda-when, .agenda-evt-time,
[class*="-value"]:not(.slider-value):not(.diag-value) {
    font-family: var(--font-mono);
    font-feature-settings: var(--tabular);
}

/* Body chat → Inter, mucho más legible */
.msg {
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.55;
    letter-spacing: -0.005em;
}
.dialogue {
    /* Mejor scroll y respiración */
    padding: 14px 16px 18px;
    gap: 12px;
}

/* Section descriptions y helpers — Inter, mejor jerarquía */
.section-desc, .field-help, .toggle-title,
.autom-desc, .agenda-desc, .tasks-desc-preview,
.sb-hint, .field label, label.field-label + .field-help {
    font-family: var(--font-sans);
}

/* Body prose dentro de modales también Inter */
.settings-section p,
.settings-section li,
.settings-section .field-label,
.settings-section h4,
.token-dashboard-panel p,
.secondbrain-panel p {
    font-family: var(--font-sans);
}

/* Field labels: Inter con tracking medio (más legible que Share Tech Mono uppercase) */
.field-label {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-2, var(--jarvis-text-dim));
}

/* ─────────────────────────────────────────────────────────
   GRID / FONDO — sutilmente más sofisticado
   ───────────────────────────────────────────────────────── */
.grid-bg {
    background-image:
        linear-gradient(rgba(var(--accent-rgb), 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--accent-rgb), 0.035) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.9) 20%, transparent 75%);
}

/* ─────────────────────────────────────────────────────────
   HUD — header reorganizado, alturas estables
   ───────────────────────────────────────────────────────── */
.hud {
    padding: 14px 28px;
    border-bottom: 1px solid var(--border-subtle);
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.04), rgba(var(--accent-rgb), 0) 60%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0));
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
}

.hud-center h1 {
    font-size: clamp(20px, 2.4vw, 26px);
    letter-spacing: 10px;
    font-weight: 700;
}

/* HUD label / value: jerarquía más fina */
.label {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 9.5px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--text-3, var(--jarvis-text-dim));
}

.value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--jarvis-cyan);
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.45);
}

/* HUD-right: gap consistente, items con mismo aire */
.hud-right .hud-right-inner {
    gap: 8px;
}

/* ──── Estado del orbe en HUD: dot pulsante + variantes ──── */
#orb-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border-radius: var(--r-full);
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid var(--border-subtle);
    transition: background var(--dur-3) var(--ease-out),
                border-color var(--dur-3) var(--ease-out),
                color var(--dur-3) var(--ease-out);
}
#orb-state .state-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    flex-shrink: 0;
}
#orb-state[data-state="idle"]      { color: var(--text-2); }
#orb-state[data-state="idle"] .state-dot { background: var(--text-3); box-shadow: none; }
#orb-state[data-state="listening"] { color: var(--jarvis-cyan); border-color: rgba(var(--accent-rgb), 0.45); }
#orb-state[data-state="listening"] .state-dot { animation: stateDotPulse 1.4s var(--ease-out) infinite; }
#orb-state[data-state="thinking"]  { color: var(--jarvis-warning, #ffb454); border-color: rgba(255, 180, 84, 0.45); background: rgba(255, 180, 84, 0.08); }
#orb-state[data-state="thinking"] .state-dot { animation: stateDotPulse 0.9s var(--ease-out) infinite; }
#orb-state[data-state="speaking"]  { color: var(--jarvis-success, #5dffa3); border-color: rgba(93, 255, 163, 0.45); background: rgba(93, 255, 163, 0.06); }
#orb-state[data-state="speaking"] .state-dot { animation: stateDotPulse 0.6s var(--ease-out) infinite; }

@keyframes stateDotPulse {
    0%, 100% { transform: scale(1);   opacity: 1;   box-shadow: 0 0 6px currentColor; }
    50%      { transform: scale(1.3); opacity: 0.7; box-shadow: 0 0 14px currentColor; }
}

/* ──── HUD ICON BUTTONS — tamaño consistente, tap-target 44px hit area ──── */
.hud-icon-btn {
    --hud-icon-size: 36px;
    width: var(--hud-icon-size);
    height: var(--hud-icon-size);
    padding: 0;
    margin: 0 2px;
    background: rgba(var(--accent-rgb), 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    color: var(--jarvis-cyan);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    transition:
        background var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        transform var(--dur-1) var(--ease-spring-soft),
        color var(--dur-2) var(--ease-out),
        box-shadow var(--dur-2) var(--ease-out);
}
.hud-icon-btn::after {
    /* Hit area expandida invisible para móvil (≥44pt) */
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 10px;
}
.hud-icon-btn svg {
    width: 17px;
    height: 17px;
    stroke-width: 1.75;
    flex-shrink: 0;
    transition: transform var(--dur-2) var(--ease-out);
}
.hud-icon-btn:hover {
    background: rgba(var(--accent-rgb), 0.14);
    border-color: rgba(var(--accent-rgb), 0.50);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.28);
    color: var(--jarvis-text);
}
.hud-icon-btn:active { transform: scale(0.92); }
.hud-icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.55), 0 0 16px rgba(var(--accent-rgb), 0.35);
}

/* Settings trigger: rotación al hover preservada */
.hud-icon-btn.settings-trigger:hover svg { transform: rotate(60deg); }
.hud-icon-btn.hud-panel-toggle.active {
    background: rgba(var(--accent-rgb), 0.22);
    border-color: var(--jarvis-cyan);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.45);
}

/* DND active: tonos ámbar, sin emoji */
.hud-icon-btn.hud-dnd.dnd-active {
    background: rgba(255, 180, 84, 0.14);
    border-color: rgba(255, 180, 84, 0.55);
    color: rgba(255, 220, 140, 1);
    box-shadow: 0 0 14px rgba(255, 180, 84, 0.3);
}
.hud-icon-btn.hud-dnd.dnd-quiet {
    background: rgba(120, 130, 200, 0.10);
    border-color: rgba(150, 160, 200, 0.4);
    color: rgba(180, 190, 220, 0.85);
}

/* Alerts SVG: badge con mejor posición */
.hud-icon-btn.hud-alerts { position: relative; }
.hud-icon-btn.hud-alerts.has-alerts {
    color: var(--jarvis-warning, #ffb454);
    border-color: rgba(255, 184, 77, 0.55);
    background: rgba(255, 184, 77, 0.08);
    animation: alertWiggle 1.6s var(--ease-out) infinite;
}
@keyframes alertWiggle {
    0%, 100%       { transform: rotate(0); }
    8%, 24%        { transform: rotate(-6deg); }
    16%            { transform: rotate(6deg); }
    32%            { transform: rotate(0); }
}

.hud-alerts-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--jarvis-error, #ff6b9d);
    color: #fff;
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    border: 2px solid var(--jarvis-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(255, 107, 157, 0.6);
}

/* HUD Cost: glass pill mejorado */
.hud-cost {
    margin-right: 6px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.30);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-full);
    font-family: var(--font-mono);
    font-feature-settings: var(--tabular);
    font-size: 11px;
    height: 28px;
    line-height: 16px;
    transition:
        background var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        box-shadow var(--dur-2) var(--ease-out),
        transform var(--dur-2) var(--ease-spring-soft);
}
.hud-cost:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--accent-rgb), 0.55);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.40), 0 0 14px rgba(var(--accent-rgb), 0.35);
}

/* Target selector: pill cohesionado con HUD */
.target-selector {
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    border-radius: var(--r-full) !important;
    transition:
        background var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        transform var(--dur-2) var(--ease-spring-soft);
}
.target-selector:hover { transform: translateY(-1px); }

/* HUD-state stack y label mejoras */
.hud-state-stack {
    margin-left: 4px;
    margin-right: 4px;
}

/* ─────────────────────────────────────────────────────────
   BUTTONS — sistema unificado (Liquid Glass)
   ───────────────────────────────────────────────────────── */
.btn,
.btn-primary,
.btn-danger {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1.4px;
    padding: 10px 16px;
    min-height: 36px;
    border-radius: var(--r-md);
    transition:
        background var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        color var(--dur-2) var(--ease-out),
        transform var(--dur-1) var(--ease-spring-soft),
        box-shadow var(--dur-2) var(--ease-out);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-transform: uppercase;
}

.btn {
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.08));
    border: 1px solid rgba(var(--accent-rgb), 0.40);
    color: var(--jarvis-cyan);
}
.btn:hover {
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.14));
    border-color: rgba(var(--accent-rgb), 0.65);
    color: var(--jarvis-text);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30), 0 0 14px rgba(var(--accent-rgb), 0.30);
    transform: translateY(-1px);
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.55);
}

.btn-ghost {
    background: transparent;
    border-color: rgba(var(--accent-rgb), 0.20);
}
.btn-ghost:hover {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.45);
}

.btn-primary {
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.78));
    color: #051018;
    border: 1px solid transparent;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30), 0 0 18px rgba(var(--accent-rgb), 0.35);
    text-shadow: none;
}
.btn-primary:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 28px rgba(var(--accent-rgb), 0.55);
    transform: translateY(-1px);
    filter: brightness(1.06);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-danger {
    background:
        linear-gradient(180deg, rgba(255, 107, 157, 0.16), rgba(255, 107, 157, 0.08));
    border: 1px solid rgba(255, 107, 157, 0.40);
    color: var(--jarvis-error, #ff6b9d);
}
.btn-danger:hover {
    background:
        linear-gradient(180deg, rgba(255, 107, 157, 0.28), rgba(255, 107, 157, 0.16));
    border-color: rgba(255, 107, 157, 0.65);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 18px rgba(255, 107, 157, 0.40);
}

.btn:disabled,
.btn-primary:disabled,
.btn-danger:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────
   MODALES — Liquid Glass (scrim + scale-fade + blur premium)
   ───────────────────────────────────────────────────────── */
.settings-overlay,
.token-dashboard-overlay,
.secondbrain-overlay {
    background: var(--scrim-modal-strong);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
}

@keyframes overlayFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes panelRise {
    from { opacity: 0; transform: translateY(12px) scale(0.965); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.settings-overlay,
.token-dashboard-overlay,
.secondbrain-overlay {
    animation: overlayFade var(--dur-3) var(--ease-out);
}

/* Settings panel — refinado, esquinas más suaves, glass real */
.settings-panel {
    background:
        linear-gradient(140deg, rgba(8, 18, 32, 0.86), rgba(2, 8, 14, 0.92) 60%);
    border: 1px solid rgba(var(--accent-rgb), 0.32);
    border-radius: var(--r-2xl);
    box-shadow:
        var(--shadow-4),
        0 0 80px rgba(var(--accent-rgb), 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: var(--blur-xl);
    -webkit-backdrop-filter: var(--blur-xl);
    grid-template-columns: 240px 1fr;
    overflow: hidden;
    animation: panelRise var(--dur-4) var(--ease-emphasized);
    top: 4vh;
    bottom: 4vh;
    left: 6vw;
    right: 6vw;
}

/* Marcas decorativas en esquinas — más sutiles */
.settings-panel::before,
.settings-panel::after {
    width: 18px;
    height: 18px;
    border-width: 1.5px;
    border-color: rgba(var(--accent-rgb), 0.7);
    opacity: 0.85;
}
.settings-panel::before { top: 12px; left: 12px; }
.settings-panel::after  { bottom: 12px; right: 12px; }

/* Sidebar — fondo más limpio, divider sutil */
.settings-sidebar {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.30));
    border-right: 1px solid var(--border-subtle);
    padding: 28px 0 16px;
}
.settings-sidebar-header {
    padding: 0 24px 18px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}
.settings-sidebar-header h2 {
    font-size: 13px;
    letter-spacing: 5px;
}

/* Tabs: hover/active como pill animado, no sólo padding-shift */
.settings-tab {
    margin: 1px 10px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: 0.6px;
    text-transform: none;
    color: var(--text-2, var(--jarvis-text-dim));
    transition:
        background var(--dur-2) var(--ease-out),
        color var(--dur-2) var(--ease-out),
        padding-left var(--dur-2) var(--ease-out);
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.settings-tab:hover {
    color: var(--jarvis-text);
    background: rgba(var(--accent-rgb), 0.07);
    padding-left: 14px;
}
.settings-tab.active {
    color: var(--jarvis-cyan);
    background:
        linear-gradient(90deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.06));
    padding-left: 14px;
    text-shadow: none;
    box-shadow: inset 3px 0 0 var(--jarvis-cyan), 0 0 14px rgba(var(--accent-rgb), 0.10);
}
.settings-tab.active::before {
    /* La pelota verde del original choca con el pill — la suprimimos */
    display: none;
}
.settings-tab-icon {
    opacity: 1;
    font-size: 15px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Settings content: respiración mejor, scrollbar fina */
.settings-content {
    padding: 36px 44px;
}
.settings-content::-webkit-scrollbar { width: 4px; }
.settings-content::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.30);
    border-radius: 2px;
}
.settings-content::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.55);
}

/* Section titles más limpios */
.settings-section h3 {
    font-size: 17px;
    letter-spacing: 3px;
    margin-bottom: 6px;
    text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.30);
}
.settings-section .section-desc {
    font-size: 13px;
    letter-spacing: 0.1px;
    color: var(--text-2, #9DB8CE);
    margin-bottom: 30px;
    line-height: 1.6;
    max-width: 68ch;
    text-transform: none;
    font-family: var(--font-sans);
}

/* Settings close: mismo lenguaje que los HUD icons */
.settings-close {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid var(--border-subtle);
    color: var(--jarvis-cyan);
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        transform var(--dur-2) var(--ease-spring-soft);
}
.settings-close:hover {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.55);
    transform: rotate(90deg);
}

/* Token dashboard — mismo lenguaje que settings */
.token-dashboard-overlay {
    padding: 64px 24px 24px;
}
.token-dashboard-panel {
    background:
        linear-gradient(140deg, rgba(8, 18, 32, 0.86), rgba(2, 8, 14, 0.92) 60%);
    border: 1px solid rgba(var(--accent-rgb), 0.32);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-4), 0 0 80px rgba(var(--accent-rgb), 0.10);
    backdrop-filter: var(--blur-xl);
    -webkit-backdrop-filter: var(--blur-xl);
    padding: 32px 36px 40px;
    animation: panelRise var(--dur-4) var(--ease-emphasized);
}
.token-dashboard-header h2 { font-size: 18px; letter-spacing: 4px; }

/* Secondbrain modal */
.secondbrain-panel {
    background:
        linear-gradient(140deg, rgba(8, 18, 32, 0.86), rgba(2, 8, 14, 0.92) 60%);
    border: 1px solid rgba(var(--accent-rgb), 0.32);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-4), 0 0 80px rgba(var(--accent-rgb), 0.10);
    backdrop-filter: var(--blur-xl);
    -webkit-backdrop-filter: var(--blur-xl);
    animation: panelRise var(--dur-4) var(--ease-emphasized);
}

/* ─────────────────────────────────────────────────────────
   FORMS — inputs/selects/textareas cohesionados
   ───────────────────────────────────────────────────────── */
.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field input[type="email"],
.field input[type="url"],
.field textarea,
.field select,
input.account-input,
.cc-binary input, #cc-binary, #cc-base-url, #cc-auth-token {
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    border-radius: var(--r-md);
    padding: 11px 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.4;
    color: var(--jarvis-text);
    min-height: 40px;
    transition:
        border-color var(--dur-2) var(--ease-out),
        box-shadow var(--dur-2) var(--ease-out),
        background var(--dur-2) var(--ease-out);
}
.field input::placeholder,
.field textarea::placeholder {
    color: var(--text-3, #6E89A0);
    opacity: 0.65;
}
.field input:hover,
.field textarea:hover,
.field select:hover {
    border-color: rgba(var(--accent-rgb), 0.40);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--jarvis-cyan);
    background: rgba(0, 0, 0, 0.55);
    box-shadow:
        0 0 0 3px rgba(var(--accent-rgb), 0.15),
        0 0 16px rgba(var(--accent-rgb), 0.25);
}
.field textarea {
    line-height: 1.6;
    font-size: 13px;
    min-height: 180px;
}
.field {
    margin-bottom: 24px;
}

/* ─────────────────────────────────────────────────────────
   STATUS PILL — un poco más finos y consistentes
   ───────────────────────────────────────────────────────── */
.status-pill {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 1.2px;
    border-radius: var(--r-full);
    padding: 5px 12px;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
}

/* ─────────────────────────────────────────────────────────
   MODEL CARDS / THEME CARDS — más glass, mejor selección
   ───────────────────────────────────────────────────────── */
.model-card,
.theme-swatch,
.cc-perm-card {
    background: rgba(8, 18, 32, 0.45);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    transition:
        background var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        transform var(--dur-2) var(--ease-spring-soft),
        box-shadow var(--dur-2) var(--ease-out);
}
.model-card:hover,
.theme-swatch:hover,
.cc-perm-card:hover {
    background: rgba(var(--accent-rgb), 0.06);
    border-color: rgba(var(--accent-rgb), 0.45);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.30), 0 0 16px rgba(var(--accent-rgb), 0.12);
}
.model-card.selected,
.theme-swatch.selected,
.cc-perm-card.active {
    border-color: var(--jarvis-cyan);
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.04));
    box-shadow:
        inset 0 0 0 1px rgba(var(--accent-rgb), 0.25),
        0 0 28px rgba(var(--accent-rgb), 0.20);
}

/* ─────────────────────────────────────────────────────────
   TOGGLES — glass + spring
   ───────────────────────────────────────────────────────── */
.toggle {
    width: 44px;
    height: 24px;
    border-radius: var(--r-full);
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    cursor: pointer;
    transition:
        background var(--dur-3) var(--ease-out),
        border-color var(--dur-3) var(--ease-out);
}
.toggle::after {
    width: 18px;
    height: 18px;
    top: 2px;
    left: 2px;
    background: var(--text-3, var(--jarvis-text-dim));
    transition:
        transform var(--dur-3) var(--ease-spring-soft),
        background var(--dur-3) var(--ease-out),
        box-shadow var(--dur-3) var(--ease-out);
}
.toggle.on {
    background: rgba(var(--accent-rgb), 0.40);
    border-color: var(--jarvis-cyan);
}
.toggle.on::after {
    transform: translateX(20px);
    background: var(--jarvis-cyan);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.65);
}

.toggle-item {
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    transition:
        background var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out);
}
.toggle-item:hover {
    background: rgba(var(--accent-rgb), 0.04);
    border-color: rgba(var(--accent-rgb), 0.30);
}
.toggle-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.1px;
    color: var(--jarvis-text);
    margin-bottom: 4px;
}

/* ─────────────────────────────────────────────────────────
   PANEL CHAT — más respiración y micro-jerarquía
   ───────────────────────────────────────────────────────── */
.dialogue-panel {
    background: rgba(2, 8, 14, 0.62);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    width: 360px;
    top: 18px;
    right: 18px;
    bottom: 18px;
}

.panel-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 3.5px;
}

/* Burbujas: más respeto a la jerarquía y line-length 65ch */
.msg {
    max-width: 88%;
    padding: 10px 14px;
    border-radius: var(--r-xl);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.18);
}

.msg.user {
    background:
        linear-gradient(135deg, rgba(120, 230, 200, 0.22), rgba(80, 200, 170, 0.14));
    border-color: rgba(120, 230, 200, 0.42);
    border-radius: 18px 18px 4px 18px;
}
.msg.jarvis {
    background:
        linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.06));
    border-color: rgba(var(--accent-rgb), 0.40);
    border-radius: 18px 18px 18px 4px;
}
.msg.system {
    font-size: 10.5px;
    letter-spacing: 1.3px;
    color: var(--text-3, var(--jarvis-text-dim));
    background: transparent;
    box-shadow: none;
    border: none;
}

/* Botones acción del mensaje (play/copy) — fade en hover */
.msg .msg-play-btn,
.msg .msg-copy-btn {
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out);
}
.msg:hover .msg-play-btn,
.msg:hover .msg-copy-btn,
.msg:focus-within .msg-play-btn,
.msg:focus-within .msg-copy-btn {
    opacity: 1;
}
@media (hover: none) {
    .msg .msg-play-btn,
    .msg .msg-copy-btn { opacity: 1; }
}

.dialogue::-webkit-scrollbar { width: 3px; }
.dialogue::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.30);
    border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────
   SUBTÍTULO FLOTANTE — tipografía respirada + glow contextual
   ───────────────────────────────────────────────────────── */
.subtitle-overlay {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(17px, 2.2vw, 22px);
    line-height: 1.45;
    letter-spacing: -0.01em;
    max-width: min(70vw, 60ch);
    color: var(--jarvis-text);
    text-shadow:
        0 0 18px rgba(var(--accent-rgb), 0.45),
        0 2px 12px rgba(0, 0, 0, 0.85);
}
.subtitle-overlay::before {
    background:
        radial-gradient(ellipse at center, rgba(0, 6, 12, 0.78) 0%, rgba(0, 6, 12, 0.30) 50%, transparent 80%);
    inset: -28px -48px;
    filter: blur(8px);
}

/* Subtítulo cambia de tinte según estado del orbe (si añadimos data-state al body luego) */
body[data-orb-state="thinking"] .subtitle-overlay { text-shadow: 0 0 18px rgba(255, 180, 84, 0.45), 0 2px 12px rgba(0, 0, 0, 0.85); }
body[data-orb-state="speaking"] .subtitle-overlay { text-shadow: 0 0 18px rgba(93, 255, 163, 0.40), 0 2px 12px rgba(0, 0, 0, 0.85); }

/* ─────────────────────────────────────────────────────────
   STAGE — vignette más cinematográfica
   ───────────────────────────────────────────────────────── */
.stage::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.45) 100%);
    z-index: 2;
}

/* ─────────────────────────────────────────────────────────
   TOAST — Liquid Glass
   ───────────────────────────────────────────────────────── */
.toast {
    background: rgba(2, 8, 14, 0.85);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border-radius: var(--r-full);
    padding: 12px 22px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: none;
    box-shadow: var(--shadow-3), 0 0 24px rgba(var(--accent-rgb), 0.35);
}

/* ─────────────────────────────────────────────────────────
   FOCUS GLOBAL — visible siempre (a11y)
   ───────────────────────────────────────────────────────── */
*:focus-visible {
    outline: none;
}
button:focus-visible,
a:focus-visible,
.toggle:focus-visible,
.model-card:focus-visible,
.theme-swatch:focus-visible,
.settings-tab:focus-visible,
.cc-perm-card:focus-visible {
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.55), 0 0 14px rgba(var(--accent-rgb), 0.30);
    border-radius: var(--r-md);
}

/* ─────────────────────────────────────────────────────────
   SCROLLBARS — finos y discretos, consistentes en todo modal
   ───────────────────────────────────────────────────────── */
.settings-tabs::-webkit-scrollbar,
.dialogue::-webkit-scrollbar,
.settings-content::-webkit-scrollbar,
.token-dashboard-panel::-webkit-scrollbar,
.secondbrain-panel::-webkit-scrollbar,
.sb-list::-webkit-scrollbar,
.sb-log::-webkit-scrollbar,
.log-list::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
.settings-tabs::-webkit-scrollbar-thumb,
.dialogue::-webkit-scrollbar-thumb,
.settings-content::-webkit-scrollbar-thumb,
.token-dashboard-panel::-webkit-scrollbar-thumb,
.secondbrain-panel::-webkit-scrollbar-thumb,
.sb-list::-webkit-scrollbar-thumb,
.sb-log::-webkit-scrollbar-thumb,
.log-list::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.28);
    border-radius: 999px;
}
.settings-tabs::-webkit-scrollbar-thumb:hover,
.dialogue::-webkit-scrollbar-thumb:hover,
.settings-content::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.55);
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE — mobile (<768px)
   ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hud { padding: 10px 14px; }
    .hud-center h1 {
        font-size: 18px;
        letter-spacing: 6px;
    }
    .hud-icon-btn {
        --hud-icon-size: 34px;
    }
    .hud-icon-btn svg { width: 16px; height: 16px; }
    .hud-cost {
        height: 26px;
        padding: 4px 9px;
        font-size: 10px;
    }
    .hud-state-stack {
        display: none !important; /* en móvil el orbe central ya muestra el estado */
    }
    .settings-panel {
        top: 0; bottom: 0; left: 0; right: 0;
        border-radius: 0;
    }
    .settings-panel::before,
    .settings-panel::after { display: none; }
    .settings-content {
        padding: 24px 18px;
    }
    .settings-section h3 {
        font-size: 16px;
        letter-spacing: 2px;
    }
    .settings-section .section-desc {
        font-size: 13px;
        margin-bottom: 22px;
    }
    /* ════════════════════════════════════════════════════════════
       MOBILE — fix exhaustivo del flujo táctil
       Bug crónico: el style.css original ponía .dialogue-panel a
       `position:fixed; inset:0; z-index:50` cubriendo TODO el viewport
       (incluido el input-bar abajo). Resultado: ni el voice-mode-btn ni
       send/mic se podían pulsar — el panel se comía los taps.

       Fix:
       1. Body como grid 3-rows fijo (auto·1fr·auto).
       2. .dialogue-panel acotado al .stage con position:absolute (no fixed).
       3. .input-bar siempre encima en su grid-row con z-index alto.
       4. Botones con hit-area >=44px, pointer-events forzados, touch-action.
       5. .quick-wake-btn movido a la izquierda fuera del input-bar.
       ════════════════════════════════════════════════════════════ */

    /* Body grid forzado: garantía contra overrides accidentales. */
    body {
        display: grid !important;
        grid-template-rows: auto 1fr auto !important;
    }

    /* Stage: contenedor del orbe / panel. overflow:hidden recorta el panel
       absolute al stage, el panel NO sale al input-bar. */
    .stage {
        position: relative !important;
        overflow: hidden !important;
        min-height: 0 !important; /* permite que el grid 1fr encoja */
    }

    /* Panel del chat acotado al stage (no fixed) — anula el comportamiento
       fixed del style.css mobile que solapaba el input-bar. */
    .dialogue-panel,
    .dialogue-panel.collapsed {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        z-index: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        transform: none !important;
        pointer-events: auto;
    }
    .dialogue-panel .dialogue {
        padding: 12px 14px 14px !important;
    }

    /* Input-bar — z-index alto, position relative en grid-row 3 (no overlap
       con .dialogue-panel del stage). Pointer-events explícitos para que
       los taps NO los robe ningún overlay invisible. */
    .input-bar {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 100 !important;
        padding: 10px 12px max(10px, env(safe-area-inset-bottom, 10px)) !important;
        background: linear-gradient(0deg,
            rgba(var(--accent-rgb), 0.06) 0%,
            rgba(2, 6, 12, 0.30) 60%,
            transparent 100%) !important;
        border-top: 1px solid var(--border-subtle) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        pointer-events: auto !important;
    }
    .input-bar .input-wrap {
        gap: 6px !important;
        padding: 4px 8px !important;
        pointer-events: auto !important;
        position: relative;
        z-index: 1;
    }

    /* TODOS los botones del input-wrap: 44×44 (iOS HIG), tap inmediato,
       sin tap-highlight feo, pointer-events explícitos. */
    .input-wrap > button,
    .input-wrap #mic-btn,
    .input-wrap #voice-mode-btn,
    .input-wrap #send-btn,
    .input-wrap #reset-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        font-size: 17px !important;
        flex: 0 0 44px !important;
        flex-shrink: 0 !important;
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(var(--accent-rgb), 0.20);
        cursor: pointer;
        position: relative;
        z-index: 2;
    }
    /* Input field: que pueda encogerse y respete los 16px (sin zoom iOS) */
    .input-wrap #user-input {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        font-size: 16px !important;
        padding: 12px 0 !important;
        line-height: 1.3 !important;
    }
    /* Prompt prefix: no shrink, no roba taps */
    .input-wrap .prompt-prefix {
        flex-shrink: 0;
        pointer-events: none;
    }

    /* Quick-wake-btn (escucha pasiva): por defecto position:fixed con z-index 4
       quedaba encima del input-bar a la izquierda. En mobile lo movemos arriba
       a la izquierda del HUD para que NO coincida con la zona del input-wrap. */
    .quick-wake-btn {
        bottom: auto !important;
        top: max(72px, calc(env(safe-area-inset-top, 0) + 64px)) !important;
        left: 12px !important;
        z-index: 3 !important;
        width: 28px !important;
        height: 28px !important;
    }

    /* En mobile el #widget-dock está oculto desde style.css (line 2268). El
       holo-modal grande tampoco se monta en <900px, así que no hay nada
       flotante encima del input-bar más allá del .quick-wake-btn arriba. */

    /* Voice-mode-btn: indicador grande de "grabando ahora" durante long-press
       PTT mobile. Borde rojo pulsante, escala leve para sensación táctil. */
    .voice-mode-btn.recording-ptt {
        background: rgba(255, 100, 100, 0.22) !important;
        border-color: rgba(255, 100, 100, 0.95) !important;
        color: rgba(255, 200, 200, 1) !important;
        box-shadow: 0 0 0 0 rgba(255, 100, 100, 0.55);
        transform: scale(1.08);
        animation: pttRecordPulse 0.95s ease-out infinite;
    }
    @keyframes pttRecordPulse {
        0%   { box-shadow: 0 0 0 0 rgba(255, 100, 100, 0.55); }
        70%  { box-shadow: 0 0 0 14px rgba(255, 100, 100, 0); }
        100% { box-shadow: 0 0 0 0 rgba(255, 100, 100, 0); }
    }

    /* Hint discreto sobre cómo usar el botón en mobile (aparece la primera
       vez que el usuario abre la web tras el deploy). El hint se oculta tras
       cualquier interacción con el botón. */
    .voice-mode-btn::before {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: inherit;
        pointer-events: none;
    }
    .msg { max-width: 92%; font-size: 14px; }
    .subtitle-overlay {
        font-size: 16px;
        max-width: 86vw;
    }
}

/* Fold pequeño (< 380px): más compresión */
@media (max-width: 380px) {
    .hud-center h1 { font-size: 16px; letter-spacing: 4px; }
    .hud-icon-btn { --hud-icon-size: 32px; margin: 0 1px; }
    .hud-cost { display: none; } /* abrir desde Ajustes en pantallas mini */
}

/* ═══════════════════════════════════════════════════════════════════════
 *  WIDGETS — Brutalist refresh
 *  Holo-modal · widget-panel · widget-dock · clock · weather · brain
 *  Todo coherente con Liquid Glass + tokens del sistema.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   HOLO-MODAL — el panel cinemático del centro
   ───────────────────────────────────────────────────────── */
.holo-frame-bg {
    fill: rgba(4, 10, 18, 0.78);
    stroke: rgba(var(--accent-rgb), 0.30);
    stroke-width: 0.6;
    /* Original: opacity 0.4s ease 0.15s — demasiado lenta. */
    transition: opacity 200ms var(--ease-out) 50ms !important;
}
.holo-frame-ray {
    stroke-width: 1.4;
    filter:
        drop-shadow(0 0 8px rgba(var(--accent-rgb), 1))
        drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.55))
        drop-shadow(0 0 36px rgba(var(--accent-rgb), 0.25));
    /* Original: 0.65s — el efecto scan se nota incluso a 280ms. */
    transition: stroke-dashoffset 280ms cubic-bezier(0.18, 0.7, 0.22, 1) !important;
}
.holo-frame-ray-b { transition-delay: 30ms !important; }
.holo-modal {
    /* opacity transition más rápida al abrir y al cerrar */
    transition: opacity 140ms var(--ease-out) !important;
}
.holo-content {
    /* Original: opacity 0.22s ease 0.55s. El delay se cargaba la sensación
       de "responde al toque". Reducimos a 80ms de delay. */
    transition: opacity 180ms var(--ease-out) 80ms !important;
}

/* Halo glow detrás del marco para profundidad real */
.holo-modal::before {
    content: '';
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(ellipse at 50% 50%,
            rgba(var(--accent-rgb), 0.18) 0%,
            rgba(var(--accent-rgb), 0.06) 30%,
            transparent 60%);
    filter: blur(20px);
    z-index: -1;
    opacity: 0;
    transition: opacity var(--dur-4) var(--ease-out) 0.3s;
    pointer-events: none;
}
.holo-modal.open::before { opacity: 1; }

/* Contenido: añadir backdrop blur sobre el área del marco */
.holo-content {
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), 0.05) 0%, transparent 50%),
        linear-gradient(180deg, rgba(2, 8, 14, 0.55), rgba(2, 8, 14, 0.30));
}

/* Holo-head: title con Orbitron, separador suave */
.holo-modal .holo-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--jarvis-cyan);
    text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.45);
}
.holo-head {
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 14px;
}

/* Close button del holo-modal con el lenguaje del sistema */
.holo-modal .holo-close {
    width: 32px;
    height: 32px;
    border-radius: var(--r-md);
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid var(--border-subtle);
    color: var(--jarvis-cyan);
    font-size: 14px;
    font-family: var(--font-sans);
    transition:
        background var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        transform var(--dur-2) var(--ease-spring-soft);
}
.holo-modal .holo-close:hover {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.55);
    color: var(--jarvis-text);
    transform: rotate(90deg);
}

/* Holo-body: tipografía respirada, scrollbar fina */
.holo-modal .holo-body {
    font-family: var(--font-sans);
}
.holo-body::-webkit-scrollbar { width: 4px; }
.holo-body::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.30);
    border-radius: 999px;
}

/* ─────────────────────────────────────────────────────────
   WIDGET PANEL (flotante draggable)
   ───────────────────────────────────────────────────────── */
.widget-panel {
    background:
        linear-gradient(140deg, rgba(8, 18, 32, 0.78), rgba(2, 8, 14, 0.92) 70%);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    border-radius: var(--r-xl);
    box-shadow:
        var(--shadow-3),
        0 0 32px rgba(var(--accent-rgb), 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition:
        transform 140ms var(--ease-out),
        opacity 120ms var(--ease-out) !important;
}
.widget-panel.widget-open {
    transform: scale(1) translateY(0);
}
.widget-panel:not(.widget-open) {
    transform: scale(0.95) translateY(8px);
}

.widget-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--jarvis-cyan);
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.45);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.06), transparent);
}
.widget-title {
    font-weight: 600;
}
.widget-icon {
    font-size: 14px;
    filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.45));
}
.widget-close {
    width: 26px;
    height: 26px;
    border-radius: var(--r-sm);
    background: transparent;
    color: rgba(var(--accent-rgb), 0.55);
    font-size: 14px;
    transition:
        background var(--dur-2) var(--ease-out),
        color var(--dur-2) var(--ease-out),
        transform var(--dur-2) var(--ease-spring-soft);
}
.widget-close:hover {
    background: rgba(var(--accent-rgb), 0.14);
    color: var(--jarvis-text);
    transform: rotate(90deg);
}

.widget-body {
    padding: 14px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    line-height: 1.5;
}

/* Resize handle más visible y elegante */
.widget-resize {
    width: 16px;
    height: 16px;
    background:
        linear-gradient(135deg, transparent 50%, rgba(var(--accent-rgb), 0.5) 50%);
    border-bottom-right-radius: var(--r-xl);
    opacity: 0.4;
    transition: opacity var(--dur-2) var(--ease-out);
}
.widget-panel:hover .widget-resize { opacity: 0.85; }

/* ─────────────────────────────────────────────────────────
   WIDGET DOCK — barra horizontal centrada en la parte inferior del stage
   (justo encima del input-bar). Patrón "macOS dock" + glass blur.
   z-index ALTO (15) → siempre encima de holo-modal (z-index:6) y del grafo
   fullscreen, para poder cerrar el widget pulsando su mismo icono.
   ───────────────────────────────────────────────────────── */
#widget-dock {
    position: absolute;
    top: auto;
    bottom: 22px;
    /* En mobile/chat-only el orbe está al 50% del ancho.
       En desktop ≥900px con chat lateral, el orbe se dibuja al 30%
       (orb.js:41 → cx = W * 0.30) — el dock se alinea con eso. */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(2, 8, 14, 0.62);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-full);
    box-shadow:
        var(--shadow-3),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    z-index: 15;
    pointer-events: auto;
    /* Reflejo sutil arriba para feel de cristal sólido */
    isolation: isolate;
}
/* Desktop ≥900px: chat ocupa 40% derecha → orbe al 30% del ancho.
   Centramos el dock con el orbe (no con el viewport). */
@media (min-width: 900px) {
    body:not(.chat-only) #widget-dock {
        left: 30%;
    }
}
#widget-dock::before {
    content: '';
    position: absolute;
    inset: 1px 1px auto 1px;
    height: 50%;
    border-radius: var(--r-full) var(--r-full) 0 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
    pointer-events: none;
    z-index: -1;
}

/* Dock-button activo: anillo cyan más prominente para que el usuario vea
   inmediatamente cuál es el "icono del widget abierto" que ha de re-pulsar
   para cerrarlo. */
.widget-dock-btn.active {
    box-shadow:
        inset 0 0 0 1.5px var(--jarvis-cyan),
        0 0 0 2px rgba(var(--accent-rgb), 0.30),
        0 0 22px rgba(var(--accent-rgb), 0.55);
}
.widget-dock-btn.active::after {
    /* Pulse pulso fino para llamar la atención al icono "cerrar" */
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 1.5px solid rgba(var(--accent-rgb), 0.50);
    pointer-events: none;
    animation: dockActivePulse 2s var(--ease-out) infinite;
}
@keyframes dockActivePulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 0;   transform: scale(1.18); }
}
.widget-dock-btn { position: relative; }

.widget-dock-btn {
    width: 40px;
    height: 40px;
    background: rgba(var(--accent-rgb), 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    color: var(--jarvis-cyan);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        transform var(--dur-2) var(--ease-spring-soft),
        box-shadow var(--dur-2) var(--ease-out);
}
.widget-dock-btn:hover {
    background: rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.55);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.40), 0 0 14px rgba(var(--accent-rgb), 0.30);
}
.widget-dock-btn:active { transform: translateY(0) scale(0.96); }
.widget-dock-btn.active {
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.30), rgba(var(--accent-rgb), 0.14));
    border-color: var(--jarvis-cyan);
    box-shadow:
        inset 0 0 0 1px rgba(var(--accent-rgb), 0.40),
        0 0 18px rgba(var(--accent-rgb), 0.40);
    color: var(--jarvis-text);
}

/* ─────────────────────────────────────────────────────────
   CLOCK WIDGET — tipografía masiva, cinemática
   ───────────────────────────────────────────────────────── */
.clock-widget {
    gap: 22px;
    position: relative;
}
.clock-widget::before {
    /* Halo radial detrás del display de hora — sutil */
    content: '';
    position: absolute;
    width: 80%;
    height: 60%;
    top: 8%;
    left: 10%;
    background:
        radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.07) 0%, transparent 60%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}
.clock-time {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(72px, 13vw, 168px);
    letter-spacing: 0;
    line-height: 0.95;
    background:
        linear-gradient(180deg,
            rgba(var(--accent-rgb), 0.92) 0%,
            rgba(var(--accent-rgb), 0.55) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Glow contenido — sutil, sin reventar la pantalla */
    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.28));
    font-feature-settings: "tnum" 1, "lnum" 1;
    position: relative;
    z-index: 1;
}
.clock-time .clock-num {
    display: inline-block;
    min-width: 1.2ch;
    text-align: center;
}
.clock-time .clock-sep {
    animation: clockBlinkSoft 1.05s ease-in-out infinite;
    margin: 0 2px;
    transform: translateY(-0.08em);
}
@keyframes clockBlinkSoft {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.20; }
}
.clock-time .clock-sec {
    font-size: 0.34em;
    margin-left: 14px;
    margin-bottom: 0.2em;
    align-self: flex-end;
    opacity: 0.7;
    letter-spacing: 0;
    /* Orden CRÍTICO: el shorthand `background:` resetea `background-clip`
       a su default. Por eso primero declaramos el background y DESPUÉS el
       clip. Si se invierte, sale un rectángulo cyan de fondo. */
    background-image: linear-gradient(180deg, rgba(var(--accent-rgb), 0.75), rgba(var(--accent-rgb), 0.40));
    background-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.18));
    font-family: var(--font-mono);
}
.clock-date {
    font-family: var(--font-sans);
    font-size: clamp(15px, 1.6vw, 19px);
    font-weight: 400;
    letter-spacing: 0.2px;
    color: var(--jarvis-text);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    text-transform: capitalize;
}
.clock-tz {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--jarvis-cyan);
    text-transform: uppercase;
    padding: 4px 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    border-radius: var(--r-full);
    background: rgba(var(--accent-rgb), 0.06);
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────
   WEATHER WIDGET — premium meteo card
   ───────────────────────────────────────────────────────── */
.weather-widget {
    gap: 18px;
}
.weather-header {
    gap: 4px;
    padding-bottom: 6px;
}
.weather-city {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(18px, 2.2vw, 26px);
    letter-spacing: 1.5px;
    color: var(--jarvis-text);
    text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.20);
}
.weather-country {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 2.4px;
    color: var(--text-2, var(--jarvis-text-dim));
}

.weather-current {
    position: relative;
    padding: 22px 20px;
    border-radius: var(--r-xl);
    border: 1px solid var(--border-subtle);
    background:
        radial-gradient(ellipse at 30% 20%, rgba(var(--accent-rgb), 0.10) 0%, transparent 55%),
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.04), transparent);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        var(--shadow-2);
    overflow: hidden;
}
.weather-current::after {
    /* Borde-glow superior sutil */
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background:
        linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.55), transparent);
    pointer-events: none;
}
.weather-icon-big {
    font-size: clamp(72px, 9vw, 110px);
    line-height: 1;
    filter:
        drop-shadow(0 4px 16px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 28px rgba(var(--accent-rgb), 0.35));
    animation: weatherFloat 4.5s ease-in-out infinite;
}
@keyframes weatherFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.weather-temp {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(48px, 6.5vw, 78px);
    letter-spacing: -0.02em;
    line-height: 0.95;
    background:
        linear-gradient(180deg, rgb(var(--accent-rgb)) 0%, rgba(var(--accent-rgb), 0.55) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.45));
    font-feature-settings: var(--tabular);
}
.weather-name {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.3px;
    color: var(--jarvis-text);
    text-transform: capitalize;
}

.weather-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0;
}
.weather-meta .wm {
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    background: rgba(var(--accent-rgb), 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.weather-meta .wm:hover {
    background: rgba(var(--accent-rgb), 0.10);
    border-color: rgba(var(--accent-rgb), 0.30);
}
.weather-meta .wm span {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 1.6px;
    color: var(--text-2, var(--jarvis-text-dim));
}
.weather-meta .wm b {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--jarvis-cyan);
    font-feature-settings: var(--tabular);
}

.weather-days {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}
.weather-day {
    gap: 8px;
    padding: 10px 6px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition:
        background var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        transform var(--dur-2) var(--ease-spring-soft);
    cursor: default;
}
.weather-day:hover {
    background: rgba(var(--accent-rgb), 0.06);
    border-color: var(--border-subtle);
    transform: translateY(-2px);
}
.weather-day.weather-day-selected {
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.20), rgba(var(--accent-rgb), 0.06));
    border-color: var(--jarvis-cyan);
    box-shadow:
        inset 0 0 0 1px rgba(var(--accent-rgb), 0.30),
        0 0 18px rgba(var(--accent-rgb), 0.25);
}
.wd-date {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--text-2, var(--jarvis-text-dim));
    text-transform: capitalize;
}
.weather-day-selected .wd-date {
    color: var(--jarvis-cyan);
}
.wd-icon {
    font-size: 30px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.40));
}
.wd-temps {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 13px;
    color: var(--text-2, var(--jarvis-text-dim));
    font-feature-settings: var(--tabular);
}
.wd-temps b {
    color: var(--jarvis-cyan);
    font-weight: 700;
}

/* ─────────────────────────────────────────────────────────
   ITEMS / EVENTS / TASKS WIDGET (calendario, tareas)
   ───────────────────────────────────────────────────────── */
.wgt-day-header {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--jarvis-cyan);
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.30);
    padding: 8px 0 6px;
    margin-top: 4px;
}
.wgt-day-count {
    background: rgba(var(--accent-rgb), 0.18);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-full);
    padding: 1px 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10px;
    color: var(--jarvis-cyan);
    font-feature-settings: var(--tabular);
}

.wgt-event {
    padding: 8px 10px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    border-left: 3px solid rgba(var(--accent-rgb), 0.55);
    background: rgba(var(--accent-rgb), 0.04);
    margin-bottom: 4px;
    transition:
        background var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        transform var(--dur-2) var(--ease-spring-soft);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.45;
}
.wgt-event:hover {
    background: rgba(var(--accent-rgb), 0.10);
    border-left-color: var(--jarvis-cyan);
    transform: translateX(2px);
}
.wgt-event-time {
    font-family: var(--font-mono);
    font-feature-settings: var(--tabular);
    font-size: 11px;
    color: var(--jarvis-cyan);
    min-width: 42px;
}
.wgt-event-title { color: var(--jarvis-text); font-weight: 500; }
.wgt-cal-tag {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.3px;
    color: var(--text-3, var(--jarvis-text-dim));
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-full);
    padding: 1px 8px;
    background: rgba(0, 0, 0, 0.30);
    text-transform: lowercase;
}

.wgt-task {
    padding: 8px 10px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    border-left: 3px solid rgba(var(--accent-rgb), 0.55);
    background: rgba(var(--accent-rgb), 0.04);
    margin-bottom: 4px;
    transition:
        background var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        transform var(--dur-2) var(--ease-spring-soft);
    font-family: var(--font-sans);
    font-size: 13px;
}
.wgt-task:hover {
    background: rgba(var(--accent-rgb), 0.10);
    transform: translateX(2px);
}
.wgt-task.priority-urgent { border-left-color: #FF6B6B; background: rgba(255, 107, 107, 0.06); }
.wgt-task.priority-high   { border-left-color: #FFB347; background: rgba(255, 179, 71, 0.06); }
.wgt-task.priority-medium { border-left-color: #FFD166; background: rgba(255, 209, 102, 0.04); }
.wgt-task.priority-low    { border-left-color: #94A3B8; background: rgba(148, 163, 184, 0.04); }
.wgt-task-check {
    accent-color: var(--jarvis-cyan);
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.wgt-task-prio {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: var(--r-full);
    background: rgba(0, 0, 0, 0.40);
    color: var(--text-2);
}
.wgt-task-title { color: var(--jarvis-text); font-weight: 500; flex: 1; }
.wgt-task-due {
    font-family: var(--font-mono);
    font-feature-settings: var(--tabular);
    font-size: 11px;
    color: var(--jarvis-warning, #ffb454);
    text-shadow: 0 0 6px rgba(255, 184, 77, 0.30);
}

/* Botones de acción dentro del widget */
.wgt-btn {
    background: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    border-radius: var(--r-md);
    color: var(--jarvis-cyan);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 0.4px;
    padding: 7px 12px;
    transition:
        background var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        transform var(--dur-1) var(--ease-spring-soft);
    cursor: pointer;
}
.wgt-btn:hover {
    background: rgba(var(--accent-rgb), 0.20);
    border-color: rgba(var(--accent-rgb), 0.55);
    transform: translateY(-1px);
}
.wgt-btn:active { transform: translateY(0) scale(0.97); }
.wgt-btn-primary {
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.78));
    color: #051018;
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30), 0 0 14px rgba(var(--accent-rgb), 0.35);
}
.wgt-btn-primary:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.40), 0 0 22px rgba(var(--accent-rgb), 0.55);
    filter: brightness(1.08);
}

/* Loading / empty / error con tipografía consistente */
.wgt-loading, .wgt-empty, .wgt-error {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-2, var(--jarvis-text-dim));
    padding: 28px 12px;
}
.wgt-loading {
    position: relative;
}
.wgt-loading::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(var(--accent-rgb), 0.20);
    border-top-color: var(--jarvis-cyan);
    border-radius: 50%;
    animation: wgtSpin 0.85s linear infinite;
    vertical-align: middle;
    margin-right: 10px;
}
@keyframes wgtSpin { to { transform: rotate(360deg); } }
.wgt-error {
    color: var(--jarvis-error, #ff6b9d);
}

.wgt-filter-bar {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: 6px 8px;
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
}

/* ─────────────────────────────────────────────────────────
   BRAIN WIDGET — modo ambient: solo el grafo + auto-rotación
   El widget se ha simplificado a propósito: la toolbar, el HUD,
   el minimapa, el tooltip y el side panel se ocultan para dejar
   ÚNICAMENTE el canvas del grafo girando lentamente. La rotación
   automática (360° en 30s) está implementada en brain-widget.js.
   ───────────────────────────────────────────────────────── */
.brain-root {
    font-family: var(--font-sans);
}

/* Ocultos en modo ambient — el usuario quiere el grafo a pantalla limpia */
.brain-toolbar,
.brain-minimap,
.brain-hud,
.brain-tooltip,
.brain-side {
    display: none !important;
}

/* El stage del grafo ahora ocupa el contenedor entero (sin toolbar arriba) */
.brain-stage {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
}

.brain-search {
    background: rgba(0, 0, 0, 0.50);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: 7px 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--jarvis-text);
    transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
    min-height: 32px;
}
.brain-search:focus {
    border-color: var(--jarvis-cyan);
    box-shadow:
        0 0 0 3px rgba(var(--accent-rgb), 0.18),
        0 0 14px rgba(var(--accent-rgb), 0.25);
}

.brain-chip {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.3px;
    padding: 5px 12px;
    border-radius: var(--r-full);
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid var(--border-subtle);
    color: var(--text-2);
    transition:
        background var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        color var(--dur-2) var(--ease-out),
        transform var(--dur-1) var(--ease-spring-soft);
}
.brain-chip:hover {
    color: var(--jarvis-text);
    border-color: rgba(255, 255, 255, 0.30);
    transform: translateY(-1px);
}
.brain-chip.active {
    background: color-mix(in srgb, var(--c, rgb(var(--accent-rgb))) 22%, transparent);
    border-color: var(--c, rgb(var(--accent-rgb)));
    color: var(--c, rgb(var(--accent-rgb)));
    box-shadow: 0 0 12px color-mix(in srgb, var(--c, rgb(var(--accent-rgb))) 45%, transparent);
}
.brain-chip-tag.active {
    background: rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.7);
    color: var(--jarvis-cyan);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.40);
}

.brain-act {
    width: 32px;
    height: 32px;
    border-radius: var(--r-md);
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid var(--border-subtle);
    color: var(--text-2);
    transition:
        background var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        color var(--dur-2) var(--ease-out),
        transform var(--dur-1) var(--ease-spring-soft);
}
.brain-act:hover {
    color: var(--jarvis-cyan);
    border-color: rgba(var(--accent-rgb), 0.55);
    transform: translateY(-1px);
}
.brain-act.active {
    background: rgba(var(--accent-rgb), 0.22);
    border-color: var(--jarvis-cyan);
    color: var(--jarvis-cyan);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.40);
}

/* Side panel del brain */
.brain-side {
    background:
        linear-gradient(180deg, rgba(4, 10, 18, 0.95), rgba(2, 8, 14, 0.97));
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border-left: 1px solid var(--border-subtle);
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.55);
}

.brain-side-head {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border-subtle);
    gap: 6px;
}
.brain-side-cat {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--c, rgb(var(--accent-rgb))) 14%, transparent);
}
.brain-side-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: var(--jarvis-text);
    text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.20);
}
.brain-side-close {
    width: 28px;
    height: 28px;
    border-radius: var(--r-md);
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid var(--border-subtle);
    color: var(--text-2);
    font-size: 16px;
    transition: all var(--dur-2) var(--ease-out);
    margin-top: 0;
    align-self: flex-start;
    position: absolute;
    top: 12px;
    right: 12px;
}
.brain-side-close:hover {
    background: rgba(255, 107, 157, 0.18);
    border-color: rgba(255, 107, 157, 0.55);
    color: var(--jarvis-error, #ff6b9d);
    transform: rotate(90deg);
}

.brain-side-tag {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.4px;
    padding: 2px 8px;
    border-radius: var(--r-full);
    background: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    color: var(--jarvis-cyan);
}

.brain-side-actions button {
    background: rgba(var(--accent-rgb), 0.14);
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    border-radius: var(--r-md);
    color: var(--jarvis-cyan);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 11.5px;
    padding: 7px 14px;
    transition: all var(--dur-2) var(--ease-out);
}
.brain-side-actions button:hover {
    background: rgba(var(--accent-rgb), 0.24);
    border-color: var(--jarvis-cyan);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30), 0 0 12px rgba(var(--accent-rgb), 0.30);
}

.brain-side-preview {
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: var(--text-2, rgba(255, 255, 255, 0.78));
    line-height: 1.6;
    padding: 8px 16px 14px;
}

.brain-tooltip {
    background: rgba(2, 8, 14, 0.92);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border: 1px solid rgba(var(--accent-rgb), 0.55);
    border-radius: var(--r-md);
    padding: 8px 12px;
    font-family: var(--font-sans);
    font-size: 11.5px;
    box-shadow: var(--shadow-3);
}
.brain-tooltip-meta {
    font-family: var(--font-sans);
    font-size: 9.5px;
    color: var(--jarvis-cyan);
    letter-spacing: 0.5px;
}

.brain-hud {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-full);
    padding: 4px 12px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 10.5px;
    color: var(--text-2);
}
.brain-hud-stat {
    color: var(--jarvis-cyan);
    font-family: var(--font-display);
    font-weight: 600;
    font-feature-settings: var(--tabular);
}

.brain-minimap {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
}

.brain-spinner {
    background: rgba(2, 8, 14, 0.65);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
}
.brain-spinner-ring {
    border: 3px solid rgba(var(--accent-rgb), 0.16);
    border-top-color: rgb(var(--accent-rgb));
    border-right-color: rgba(167, 139, 250, 0.7);
    box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.40);
}
.brain-spinner-text {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--jarvis-cyan);
}

/* Botón "🧠 Ver grafo" — botón secundario coherente con el sistema */
.sb-graph-btn {
    background:
        linear-gradient(180deg, rgba(167, 139, 250, 0.22), rgba(167, 139, 250, 0.10));
    border: 1px solid rgba(167, 139, 250, 0.55);
    border-radius: var(--r-md);
    color: rgba(220, 200, 255, 0.95);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.6px;
    padding: 7px 14px;
    text-transform: uppercase;
    transition: all var(--dur-2) var(--ease-out);
}
.sb-graph-btn:hover {
    background:
        linear-gradient(180deg, rgba(167, 139, 250, 0.40), rgba(167, 139, 250, 0.20));
    border-color: rgba(167, 139, 250, 0.95);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.40), 0 0 18px rgba(167, 139, 250, 0.55);
    transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE WIDGETS
   ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .widget-panel {
        border-radius: var(--r-lg);
    }
    #widget-dock {
        bottom: 64px;
        left: 12px;
        gap: 6px;
        padding: 8px 6px;
    }
    .widget-dock-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    .clock-time { font-size: clamp(56px, 18vw, 96px); }
    .weather-current { padding: 16px 14px; }
    .weather-icon-big { font-size: clamp(56px, 14vw, 84px); }
    .weather-temp { font-size: clamp(38px, 11vw, 56px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   BRAIN dentro de HOLO-MODAL — modo "ambient": sin marco, sin fondo,
   integrado con la escena del orbe (es como si el orbe se transformara
   en el grafo girando). Usa :has() para detectar brain dentro del modal.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Cuando el holo-modal contiene el brain, todo el chrome (frame SVG,
   head con título, padding interno) desaparece. Queda solo el grafo. */
.holo-modal:has(.brain-root) .holo-frame-bg {
    fill: transparent !important;
    stroke: transparent !important;
}
.holo-modal:has(.brain-root) .holo-frame-ray {
    stroke: transparent !important;
    filter: none !important;
}
.holo-modal:has(.brain-root) .holo-content {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    gap: 0 !important;
}
/* Head: ocultamos todo (icon, title, X) — el cierre es re-pulsar el icono
   del dock o el botón libro. La X es redundante y rompe el efecto ambient. */
.holo-modal:has(.brain-root) .holo-head,
.holo-modal:has(.clock-widget) .holo-head,
.holo-modal:has(.weather-widget) .holo-head,
.holo-modal:has(.it-tabs) .holo-head {
    display: none !important;
}

/* Mismo tratamiento ambient para clock, weather, items (calendario+tareas):
   sin marco, sin fondo, el widget flota sobre la escena del orbe. El cierre
   es por re-pulsar el icono del dock o auto-close 5s. */
.holo-modal:has(.clock-widget) .holo-frame-bg,
.holo-modal:has(.weather-widget) .holo-frame-bg,
.holo-modal:has(.it-tabs) .holo-frame-bg {
    fill: transparent !important;
    stroke: transparent !important;
}
.holo-modal:has(.clock-widget) .holo-frame-ray,
.holo-modal:has(.weather-widget) .holo-frame-ray,
.holo-modal:has(.it-tabs) .holo-frame-ray {
    stroke: transparent !important;
    filter: none !important;
}
.holo-modal:has(.clock-widget) .holo-content,
.holo-modal:has(.weather-widget) .holo-content,
.holo-modal:has(.it-tabs) .holo-content {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.holo-modal:has(.clock-widget)::before,
.holo-modal:has(.weather-widget)::before,
.holo-modal:has(.it-tabs)::before {
    display: none !important;
}
/* Texto del widget tiene halo legible sobre el fondo de la app sin marco. */
.clock-widget,
.weather-widget,
.it-tabs,
.it-toolbar,
.it-day-label,
.it-body,
.it-footer {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
/* Items: las burbujas de eventos y tareas SÍ mantienen un fondo sutil
   (ya lo tienen en .wgt-event/.wgt-task) para legibilidad — solo el chrome
   del widget (tabs, toolbar, day-label) es transparente. */
.it-tabs,
.it-toolbar,
.it-day-label,
.it-footer {
    background: transparent !important;
}
/* Inputs del items widget mantienen background propio para destacar */
.it-search,
.it-filter,
.it-add-input {
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
}
.holo-modal:has(.brain-root) .holo-body {
    padding: 0 !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden;
}

/* Halo glow del modal también desaparece (era el ::before cyan) */
.holo-modal:has(.brain-root)::before {
    display: none !important;
}

/* Canvas del grafo: fondo transparente para que se mezcle con la escena */
.brain-stage {
    background: transparent !important;
}
.brain-canvas {
    background: transparent !important;
}

/* En modo fullscreen (botón "🧠 Ver grafo" desde SecondBrain): sin marcos,
   sin fondo. El grafo flota sobre la escena del orbe.
   En desktop (≥900px) el chat ocupa el 40% derecho fijo: limitamos el
   grafo a la franja izquierda (60% del viewport) para que NO tape el chat
   y sus burbujas se vean encima del grafo girando. */
.holo-modal.holo-modal-fullscreen:has(.brain-root) {
    top: var(--hud-height, 64px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
}
@media (min-width: 900px) {
    body:not(.chat-only) .holo-modal.holo-modal-fullscreen:has(.brain-root) {
        right: 40% !important;  /* borde izquierdo del chat */
    }
}
.holo-modal.holo-modal-fullscreen:has(.brain-root) .holo-content {
    inset: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   HUD MÓVIL — header limpio y compacto
   En mobile el header se desbordaba: 8 iconos + título + selector + estado
   no caben. Estrategia: ocultar lo que no es esencial, compactar el resto,
   y dejar que el usuario abra todo lo demás desde Ajustes.
 * ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* HUD: layout 2 columnas en lugar de 3, sin .hud-left
       (SYSTEM/INITIALIZING no aporta en mobile y comía espacio). */
    .hud {
        grid-template-columns: 1fr auto;
        gap: 8px;
        padding: 8px 12px;
        min-height: 52px;
    }
    .hud-left {
        display: none !important;
    }
    /* hud-center pasa a la columna 1 (izquierda), alineado al inicio */
    .hud-center {
        align-items: flex-start;
        gap: 4px;
        min-width: 0;
    }
    .hud-center h1 {
        font-size: 16px;
        letter-spacing: 4px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Target selector compacto */
    .target-selector {
        font-size: 10px !important;
        padding: 3px 9px !important;
        max-width: 60vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .target-selector .target-icon { font-size: 9px !important; }
    .target-selector .target-label {
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* hud-right: alineado a la derecha, gap mínimo, sin wrap */
    .hud-right .hud-right-inner {
        gap: 4px;
        flex-wrap: nowrap;
    }
    .hud-icon-btn {
        --hud-icon-size: 32px;
        margin: 0;
    }
    .hud-icon-btn svg { width: 14px; height: 14px; }

    /* Iconos secundarios (proactive-voice, manual, secondbrain) escondidos
       en pantallas pequeñas — siempre accesibles desde Ajustes/SecondBrain. */
    .hud-proactive-voice,
    .hud-manual,
    .hud-secondbrain {
        display: none !important;
    }

    /* Cost pill compacto, sin afectar la legibilidad */
    .hud-cost {
        height: 26px;
        padding: 4px 8px;
        font-size: 10px;
        margin-right: 0;
    }

    /* Pill del estado del orbe ya estaba oculto — confirmamos */
    .hud-state-stack {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────────────────
   ADMIN: gestión de usuarios (solo superadmin)
   ───────────────────────────────────────────────────────── */
.admin-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: var(--r-full);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: 1.5px;
    color: #ffd166;
    background: rgba(255, 209, 102, 0.10);
    border: 1px solid rgba(255, 209, 102, 0.45);
    text-transform: uppercase;
}

.user-row {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin-bottom: 10px;
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    transition: border-color var(--dur-2) var(--ease-out);
}
.user-row:hover {
    border-color: rgba(var(--accent-rgb), 0.30);
}
.user-row-head {
    display: grid;
    grid-template-columns: 1fr 1.4fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
    font-family: var(--font-sans);
}
.user-row .user-name {
    font-weight: 600;
    color: var(--jarvis-text);
}
.user-row .user-email {
    color: var(--text-2, var(--jarvis-text-dim));
    font-family: var(--font-mono);
    font-size: 12px;
}
.user-row .user-meta {
    color: var(--text-3, var(--jarvis-text-dim));
    font-size: 11px;
    font-family: var(--font-sans);
    text-align: right;
}
.user-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.user-row-actions .btn-xs {
    font-size: 11px;
    padding: 5px 9px;
    letter-spacing: 0.3px;
    text-transform: none;
    min-height: 28px;
}
.user-row-detail {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: rgba(var(--accent-rgb), 0.04);
    border: 1px solid var(--border-subtle);
}
.user-form .field-label {
    margin-top: 8px;
    margin-bottom: 4px;
}
.user-form .account-input {
    width: 100%;
}
.user-form-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.user-cost-table {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 12px;
}
.user-cost-table th,
.user-cost-table td {
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-subtle);
}
.user-cost-table th {
    color: var(--text-3, var(--jarvis-text-dim));
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.user-cost-table td:nth-child(3),
.user-cost-table td:nth-child(4) {
    font-family: var(--font-mono);
    font-feature-settings: var(--tabular);
    text-align: right;
}
.users-empty {
    padding: 18px 14px;
    text-align: center;
    color: var(--text-3, var(--jarvis-text-dim));
    font-family: var(--font-sans);
    font-size: 13px;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--r-md);
}

/* Pantallas muy pequeñas (<420px iPhone SE etc.): aún más compacto */
@media (max-width: 420px) {
    .hud {
        padding: 8px 10px;
        gap: 6px;
    }
    .hud-center h1 {
        font-size: 14px;
        letter-spacing: 3px;
    }
    /* En SE no caben todos: dejamos solo lo esencial */
    .hud-dnd,
    .hud-alerts {
        display: none !important;
    }
    .hud-cost {
        display: none;
    }
    .target-selector {
        font-size: 9px !important;
        padding: 2px 8px !important;
    }
    .hud-icon-btn {
        --hud-icon-size: 30px;
    }
    .hud-icon-btn svg { width: 13px; height: 13px; }
}