:root {
    /* Color base del tema — actualizado en vivo desde JS */
    --accent-rgb: 125, 249, 255;
    --jarvis-cyan: rgb(var(--accent-rgb));
    --jarvis-cyan-dim: rgba(var(--accent-rgb), 0.6);
    --jarvis-cyan-glow: rgba(var(--accent-rgb), 0.6);
    --jarvis-bg: #02060c;
    --jarvis-bg-2: #051120;
    --jarvis-text: #E6F4FF;
    --jarvis-text-dim: #6E89A0;
    --jarvis-warning: #ffb454;
    --jarvis-error: #ff6b9d;
    --jarvis-success: #5dffa3;

    /* ── Tokens semánticos: sistema "Bauhaus cyberpunk frío" ── */
    /* Acentos secundarios (no rompen --accent-rgb dinámico) */
    --accent-amber-rgb: 255, 180, 84;
    --accent-magenta-rgb: 255, 107, 157;

    /* Surfaces (glassmorphism por niveles) */
    --surface-0: #02060c;
    --surface-1: rgba(8, 16, 28, 0.65);
    --surface-2: rgba(12, 22, 38, 0.78);
    --surface-3: rgba(18, 30, 50, 0.88);

    /* Texto jerarquizado (WCAG AA sobre surface-2/3) */
    --text-1: #E6F4FF;
    --text-2: #9DB8CE;
    --text-3: #6E89A0;
    --text-disabled: #4A5E72;

    /* Borders */
    --border-subtle:  rgba(125, 249, 255, 0.10);
    --border-default: rgba(125, 249, 255, 0.22);
    --border-strong:  rgba(125, 249, 255, 0.45);
    --border-focus:   rgba(125, 249, 255, 0.70);

    /* Glows */
    --glow-soft:   0 0 12px rgba(var(--accent-rgb), 0.18);
    --glow-medium: 0 0 18px rgba(var(--accent-rgb), 0.30);
    --glow-strong: 0 0 24px rgba(var(--accent-rgb), 0.45);

    /* Spacing 4/8 system */
    --sp-0: 2px;  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;
    --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px;
    --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

    /* Tipografía fluida (escala extendida) */
    --fs-xs:         clamp(10px, 1.5vw, 11px);
    --fs-sm:         clamp(11px, 2vw, 13px);
    --fs-base:       clamp(13px, 2.5vw, 15px);
    --fs-md:         clamp(14px, 2.5vw, 16px);
    --fs-lg:         clamp(16px, 3vw, 20px);
    --fs-xl:         clamp(18px, 3.5vw, 24px);
    --fs-display:    clamp(20px, 4vw, 32px);
    --fs-display-xl: clamp(24px, 5vw, 40px);

    /* Easings */
    --ease-out:    cubic-bezier(0.2, 0.85, 0.25, 1);
    --ease-in:     cubic-bezier(0.55, 0, 0.65, 0.2);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring-soft: cubic-bezier(0.32, 1.25, 0.6, 1);
    --ease-emphasized:  cubic-bezier(0.2, 0, 0, 1);

    /* Radius */
    --r-sm: 3px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px; --r-2xl: 22px; --r-3xl: 28px; --r-full: 999px;

    /* z-index scale */
    --z-base: 0;     --z-stage: 1;    --z-hud: 4;      --z-dock: 5;
    --z-subtitle: 6; --z-modal: 50;   --z-overlay: 100; --z-toast: 200;

    /* ── Liquid Glass tokens (refresh 2026) ── */
    --blur-sm:  blur(8px)  saturate(140%);
    --blur-md:  blur(14px) saturate(160%);
    --blur-lg:  blur(22px) saturate(180%);
    --blur-xl:  blur(32px) saturate(200%);

    --scrim-modal:    rgba(2, 6, 12, 0.62);
    --scrim-modal-strong: rgba(2, 6, 12, 0.78);

    --shadow-1: 0 1px 2px rgba(0,0,0,0.40), 0 1px 1px rgba(0,0,0,0.30);
    --shadow-2: 0 4px 10px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25);
    --shadow-3: 0 12px 32px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.30);
    --shadow-4: 0 24px 64px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.35);
    --shadow-glow-soft:   0 0 24px rgba(var(--accent-rgb), 0.18), 0 0 48px rgba(var(--accent-rgb), 0.08);
    --shadow-glow-strong: 0 0 32px rgba(var(--accent-rgb), 0.32), 0 0 64px rgba(var(--accent-rgb), 0.14);

    /* Stack tipográfico (Inter para prosa, Orbitron en titulares, Share Tech Mono para mono/numérico) */
    --font-sans: 'Inter', 'InterVariable', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Orbitron', var(--font-sans);
    --font-mono: 'Share Tech Mono', ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

    /* Tabular numerals para columnas de cifras (precios, métricas) */
    --tabular: "tnum" 1, "lnum" 1;

    /* Duración de animaciones (centralizado para facilitar reduced-motion) */
    --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms; --dur-4: 380ms; --dur-5: 520ms;
}

/* prefers-reduced-motion: respetar siempre (regla #1 del checklist) */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-1: 0.01ms; --dur-2: 0.01ms; --dur-3: 0.01ms; --dur-4: 0.01ms; --dur-5: 0.01ms;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    /* iOS Safari: 100vh incluye la toolbar y se queda fija; 100dvh se ajusta
       cuando la barra aparece/desaparece. Triple fallback. */
    height: 100%;
    height: -webkit-fill-available;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    background:
        radial-gradient(ellipse at 30% 18%, rgba(var(--accent-rgb), 0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 78% 82%, rgba(var(--accent-amber-rgb), 0.035) 0%, transparent 55%),
        radial-gradient(ellipse at center, var(--jarvis-bg-2) 0%, var(--jarvis-bg) 100%);
    color: var(--jarvis-text);
    font-family: 'Share Tech Mono', monospace;
    display: grid;
    grid-template-rows: auto 1fr auto;
    user-select: none;
    /* Safe-area lateral (modo apaisado en iPhone con notch) */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* Vignette en bordes para profundidad cinematográfica */
    box-shadow: inset 0 0 240px rgba(0, 0, 0, 0.55);
}

/* ───── Áreas seleccionables / copiables ─────
   El body tiene user-select:none por defecto para que arrastrar sobre
   la UI no provoque selecciones rojas accidentales. Pero el usuario
   debe poder copiar el TEXTO del chat, subtítulos, calendario, logs y
   demás zonas de contenido. */
.dialogue, .dialogue *,
.subtitle-overlay,
.agenda-list, .agenda-list *,
.agenda-grid, .agenda-grid *,
.agenda-form, .agenda-form *,
.log-list, .log-list *,
.log-entry, .log-entry *,
.cost-table, .cost-table *,
.diagnostic-output, .diagnostic-output *,
.routing-debug, .routing-debug *,
.tool-badge-output, .tool-badge-output *,
.markdown-editor, .markdown-editor *,
.CodeMirror, .CodeMirror *,
.tool-detail, .tool-detail *,
.account-email, .account-tenant-id,
input, textarea, select,
[contenteditable],
pre, code {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* Pero los botones y controles dentro de esas áreas siguen NO seleccionables
   para que el click no genere selección visual antes de disparar la acción. */
.dialogue button,
.agenda-form button,
.msg-play-btn, .msg-copy-btn,
.panel-toggle, .panel-search-toggle, .panel-popout-toggle, .panel-raw-toggle,
.btn, .btn-primary, .btn-danger {
    user-select: none;
    -webkit-user-select: none;
}

.grid-bg {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--accent-rgb), 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--accent-rgb), 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    z-index: 0;
}

.hud {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 18px 32px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.05), transparent);
}

.hud-left, .hud-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    letter-spacing: 2px;
}

.hud-right {
    align-items: flex-end;
}

.label {
    color: var(--jarvis-text-dim);
    font-size: 10px;
    letter-spacing: 3px;
}

.value {
    color: var(--jarvis-cyan);
    text-shadow: 0 0 8px var(--jarvis-cyan-glow);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
}

.hud-center {
    text-align: center;
    /* Título arriba centrado, selector debajo. Stack vertical centrado. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.hud-center h1 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 28px;
    letter-spacing: 12px;
    color: var(--jarvis-cyan);
    text-shadow:
        0 0 12px var(--jarvis-cyan-glow),
        0 0 24px rgba(var(--accent-rgb), 0.3);
}

.subtitle {
    font-size: 10px;
    letter-spacing: 4px;
    color: var(--jarvis-text-dim);
    text-transform: uppercase;
}

.stage {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

#orb-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Subtítulo flotante: lo último que dice JARVIS, grande, debajo del orbe */
.subtitle-overlay {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%) translateY(8px);
    max-width: 70%;
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
    color: var(--jarvis-text);
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4), 0 2px 8px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    opacity: 0;
    /* Transición más larga + ligero slide para que entre y salga con empaque */
    transition: opacity 0.45s cubic-bezier(0.25, 0.85, 0.3, 1),
                transform 0.45s cubic-bezier(0.25, 0.85, 0.3, 1);
    z-index: 3;
    min-height: 1.5em;
}

.subtitle-overlay.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    /* Cuando está visible, permitimos interacción para que el usuario
       pueda seleccionar el texto y copiarlo. Cuando no está visible
       sigue con pointer-events:none para no robar clicks al orbe. */
    pointer-events: auto;
}

.subtitle-overlay::before {
    content: '';
    position: absolute;
    inset: -20px -30px;
    background: radial-gradient(ellipse at center, rgba(0, 7, 13, 0.6) 0%, transparent 70%);
    z-index: -1;
}

/* Panel lateral con el historial completo */
.dialogue-panel {
    position: absolute;
    top: 16px;
    right: 16px;
    bottom: 16px;
    width: 340px;
    background: rgba(2, 7, 13, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 4px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.5), inset 0 0 32px rgba(var(--accent-rgb), 0.04);
}

.dialogue-panel.collapsed {
    transform: translateX(calc(100% + 32px));
    opacity: 0;
    pointer-events: none;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--jarvis-cyan);
    text-transform: uppercase;
}

.panel-toggle {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: rgba(2, 7, 13, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 4px;
    color: var(--jarvis-cyan);
    cursor: pointer;
    z-index: 4;
    font-size: 14px;
    transition: all 0.2s;
    display: none;
}

/* Reglas antiguas eliminadas: el toggle del chat ahora vive en el HUD
   (.hud-panel-toggle) y siempre es visible. */

.panel-toggle:hover {
    background: rgba(var(--accent-rgb), 0.15);
    box-shadow: 0 0 12px var(--jarvis-cyan-glow);
}

.dialogue {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

.dialogue::-webkit-scrollbar {
    width: 4px;
}
.dialogue::-webkit-scrollbar-thumb {
    background: var(--jarvis-cyan-dim);
    border-radius: 2px;
}

/* Burbujas estilo chat: user a la DERECHA en color cálido,
   JARVIS a la IZQUIERDA en color del tema. */
.msg {
    max-width: 78%;
    padding: 9px 13px;
    font-size: 13.5px;
    line-height: 1.45;
    border: 1px solid transparent;
    animation: msgIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    position: relative;
}

@keyframes msgIn {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.msg.user {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(120, 230, 200, 0.18), rgba(80, 200, 170, 0.12));
    border-color: rgba(120, 230, 200, 0.35);
    color: var(--jarvis-text);
    /* Burbuja con cola en la esquina inferior derecha */
    border-radius: 16px 16px 4px 16px;
    box-shadow: 0 2px 8px rgba(80, 200, 170, 0.10);
}

.msg.jarvis {
    align-self: flex-start;
    background: rgba(var(--accent-rgb), 0.10);
    border-color: rgba(var(--accent-rgb), 0.35);
    color: var(--jarvis-text);
    /* Burbuja con cola en la esquina inferior izquierda */
    border-radius: 16px 16px 16px 4px;
    box-shadow: 0 2px 14px rgba(var(--accent-rgb), 0.10);
}

.msg.system {
    align-self: center;
    max-width: 90%;
    text-align: center;
    background: transparent;
    color: var(--jarvis-text-dim);
    font-size: 10.5px;
    letter-spacing: 1.6px;
    border: none;
    padding: 4px 10px;
    opacity: 0.7;
}

/* ───── Automatizaciones (Ajustes → Automatizaciones) ───── */
.automations-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.autom-block {
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 12px;
    padding: 16px 18px;
    background: rgba(var(--accent-rgb), 0.03);
    transition: all 0.2s ease;
}
.autom-block.disabled {
    opacity: 0.55;
    background: transparent;
}
.autom-block.enabled:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
}
.autom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
}
.autom-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--jarvis-text);
}
.autom-desc {
    font-size: 12px;
    color: var(--jarvis-text-dim);
    line-height: 1.5;
    margin-bottom: 8px;
}

/* Toggle switch para los main on/off */
.autom-toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    flex-shrink: 0;
}
.autom-toggle input { opacity: 0; width: 0; height: 0; }
.autom-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 22px;
    cursor: pointer;
    transition: 0.2s;
}
.autom-toggle-slider:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: var(--jarvis-text-dim);
    border-radius: 50%;
    transition: 0.2s;
}
.autom-toggle input:checked + .autom-toggle-slider {
    background: rgba(var(--accent-rgb), 0.45);
}
.autom-toggle input:checked + .autom-toggle-slider:before {
    transform: translateX(20px);
    background: rgba(var(--accent-rgb), 0.95);
}

/* Number / select inline */
.autom-num {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: var(--jarvis-text);
    padding: 4px 8px;
    border-radius: 6px;
    width: 70px;
    font-family: inherit;
    font-size: 13px;
}
.autom-num-label {
    font-size: 11.5px;
    color: var(--jarvis-text-dim);
    margin-left: 6px;
}
.autom-select {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: var(--jarvis-text);
    padding: 5px 10px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

/* Configuración avanzada (details/summary) */
.autom-extra {
    margin-top: 10px;
    border-top: 1px dashed rgba(var(--accent-rgb), 0.15);
    padding-top: 10px;
}
.autom-extra summary {
    cursor: pointer;
    font-size: 11px;
    color: rgba(var(--accent-rgb), 0.85);
    letter-spacing: 1px;
    text-transform: uppercase;
    list-style: none;
    user-select: none;
}
.autom-extra summary::-webkit-details-marker { display: none; }
.autom-extra summary::before { content: "▸ "; transition: 0.15s; display: inline-block; }
.autom-extra[open] summary::before { transform: rotate(90deg); }
.autom-extra-body {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.autom-extra-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--jarvis-text);
}
.autom-extra-row > span:first-child {
    flex: 1;
    color: var(--jarvis-text-dim);
}
.autom-extra-row input[type="number"] {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: var(--jarvis-text);
    padding: 3px 6px;
    border-radius: 4px;
    width: 56px;
    font-family: inherit;
    font-size: 12px;
    text-align: right;
}
.autom-cats { flex-direction: column; align-items: stretch; }
.autom-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.autom-cat-chip {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 12px;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.15s ease;
}
.autom-cat-chip.active {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.6);
    color: rgba(var(--accent-rgb), 0.95);
}
.autom-cat-chip input { display: none; }

/* Feedback al guardar */
.autom-saved { box-shadow: 0 0 0 2px rgba(80, 220, 140, 0.45); }

/* ───── Tareas (Ajustes → Tareas) ───── */
.tasks-toolbar { gap: 10px; }
.tasks-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(var(--accent-rgb), 0.15);
}
.tasks-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.tasks-filter-label {
    font-size: 11px;
    color: var(--jarvis-text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-right: 4px;
}
.tasks-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: var(--jarvis-text-dim);
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 11.5px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.tasks-chip:hover {
    color: var(--jarvis-text);
    border-color: rgba(var(--accent-rgb), 0.5);
}
.tasks-chip.active {
    background: rgba(var(--accent-rgb), 0.18);
    color: rgba(var(--accent-rgb), 0.95);
    border-color: rgba(var(--accent-rgb), 0.6);
}

.tasks-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}
.tasks-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 8px;
    background: rgba(var(--accent-rgb), 0.03);
    cursor: pointer;
    transition: all 0.15s ease;
    border-left-width: 3px;
}
.tasks-item:hover {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.45);
    transform: translateX(2px);
}
.tasks-item.priority-urgent { border-left-color: #FF6B6B; }
.tasks-item.priority-high   { border-left-color: #FFB347; }
.tasks-item.priority-medium { border-left-color: #FFD166; }
.tasks-item.priority-low    { border-left-color: #94A3B8; }

.tasks-item.done {
    opacity: 0.55;
}
.tasks-item.done .tasks-title-row strong {
    text-decoration: line-through;
}
.tasks-item.cancelled {
    opacity: 0.4;
    text-decoration: line-through;
}

.tasks-check {
    margin-top: 4px;
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: rgba(var(--accent-rgb), 0.9);
    flex-shrink: 0;
}
.tasks-pri-chip {
    flex-shrink: 0;
    font-size: 14px;
    margin-top: 2px;
}
.tasks-body {
    flex: 1;
    min-width: 0;
}
.tasks-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 3px;
}
.tasks-title-row strong {
    color: var(--jarvis-text);
    font-size: 13.5px;
}
.tasks-author {
    font-size: 12px;
    opacity: 0.7;
}
.tasks-due {
    font-size: 11px;
    color: var(--jarvis-text-dim);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.tasks-overdue {
    color: rgba(255, 107, 107, 0.95);
    font-weight: 600;
}
.tasks-desc-preview {
    font-size: 11.5px;
    color: var(--jarvis-text-dim);
    line-height: 1.5;
    margin-top: 3px;
}
.tasks-tags-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 5px;
}
.tasks-tag {
    background: rgba(var(--accent-rgb), 0.1);
    color: rgba(var(--accent-rgb), 0.9);
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 8px;
    letter-spacing: 0.4px;
}

.tasks-form {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 12px;
    background: rgba(var(--accent-rgb), 0.04);
}
.tasks-form h4 {
    margin: 0 0 14px;
    color: rgba(var(--accent-rgb), 0.95);
    letter-spacing: 1.4px;
}
.tasks-form textarea {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12.5px;
    line-height: 1.55;
}

/* ───── Calendario interno (Ajustes → Calendario) ───── */

/* Switch lista/mes */
.agenda-view-switch {
    display: inline-flex;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 8px;
    overflow: hidden;
}
.agenda-view-btn {
    background: transparent;
    border: none;
    color: var(--jarvis-text-dim);
    padding: 6px 14px;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.agenda-view-btn:hover {
    color: var(--jarvis-text);
    background: rgba(var(--accent-rgb), 0.06);
}
.agenda-view-btn.active {
    background: rgba(var(--accent-rgb), 0.18);
    color: rgba(var(--accent-rgb), 0.95);
}

/* GRID MENSUAL */
.agenda-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: rgba(var(--accent-rgb), 0.18);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 10px;
    overflow: hidden;
}
.agenda-grid-dayheader {
    background: rgba(var(--accent-rgb), 0.08);
    padding: 8px;
    text-align: center;
    font-size: 10.5px;
    letter-spacing: 1.5px;
    color: rgba(var(--accent-rgb), 0.95);
    font-weight: 600;
}
.agenda-grid-cell {
    background: var(--jarvis-bg, #0a0e14);
    min-height: 92px;
    padding: 6px 6px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: background 0.12s ease;
    overflow: hidden;
}
.agenda-grid-cell:hover {
    background: rgba(var(--accent-rgb), 0.04);
}
.agenda-grid-cell-out {
    opacity: 0.35;
}
.agenda-grid-cell-today .agenda-grid-daynum {
    background: rgba(var(--accent-rgb), 0.95);
    color: #0a0e14;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.agenda-grid-daynum {
    font-size: 11.5px;
    color: var(--jarvis-text-dim);
    margin-bottom: 4px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.agenda-grid-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.agenda-evt {
    background: rgba(var(--accent-rgb), 0.18);
    color: var(--jarvis-text);
    border-left: 3px solid rgba(var(--accent-rgb), 0.7);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10.5px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: all 0.1s ease;
    display: flex;
    gap: 4px;
    align-items: baseline;
}
.agenda-evt:hover {
    background: rgba(var(--accent-rgb), 0.32);
}
.agenda-evt-time {
    font-variant-numeric: tabular-nums;
    color: rgba(var(--accent-rgb), 0.95);
    flex-shrink: 0;
    font-weight: 500;
}
.agenda-evt-title {
    overflow: hidden;
    text-overflow: ellipsis;
}
.agenda-evt-more {
    font-size: 10px;
    color: var(--jarvis-text-dim);
    margin-top: 2px;
    padding-left: 4px;
    font-style: italic;
}

/* Categorías → colores distintos en el grid */
.agenda-evt.cat-medico   { border-left-color: #FF8A95; background: rgba(255, 138, 149, 0.18); }
.agenda-evt.cat-trabajo  { border-left-color: #66B2FF; background: rgba(102, 178, 255, 0.18); }
.agenda-evt.cat-personal { border-left-color: #B5E48C; background: rgba(181, 228, 140, 0.18); }
.agenda-evt.cat-llamada  { border-left-color: #FFD166; background: rgba(255, 209, 102, 0.18); }
.agenda-evt.cat-reunion  { border-left-color: #C77DFF; background: rgba(199, 125, 255, 0.18); }
.agenda-evt.cat-otro     { border-left-color: #94A3B8; background: rgba(148, 163, 184, 0.18); }

/* Tareas (overlay desde tenant_tasks) — color por priority */
.agenda-evt.is-task.pri-urgent { border-left-color: #FF6B6B; background: rgba(255, 107, 107, 0.18); }
.agenda-evt.is-task.pri-high   { border-left-color: #FFB347; background: rgba(255, 179, 71, 0.18); }
.agenda-evt.is-task.pri-medium { border-left-color: #FFD166; background: rgba(255, 209, 102, 0.18); }
.agenda-evt.is-task.pri-low    { border-left-color: #94A3B8; background: rgba(148, 163, 184, 0.16); }
/* Mismo en vista lista */
.agenda-item.is-task.pri-urgent { border-left: 3px solid #FF6B6B; }
.agenda-item.is-task.pri-high   { border-left: 3px solid #FFB347; }
.agenda-item.is-task.pri-medium { border-left: 3px solid #FFD166; }
.agenda-item.is-task.pri-low    { border-left: 3px solid #94A3B8; }
.agenda-item.is-task.done strong { text-decoration: line-through; opacity: 0.6; }

/* Eventos cancelados (detectados como borrados en Google) */
.agenda-item.agenda-cancelled,
.agenda-evt.agenda-evt-cancelled {
    opacity: 0.45;
    text-decoration: line-through;
}

/* Badge G (sincronizado de Google) */
.agenda-provider {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(66, 133, 244, 0.2);
    color: #4285F4;
    letter-spacing: 0.5px;
    margin-left: 4px;
}
.agenda-provider.provider-google-pending {
    background: rgba(255, 209, 102, 0.22);
    color: #FFD166;
}
.agenda-cancel-badge {
    color: #FF6B6B;
    font-weight: 700;
    margin-left: 4px;
}

/* Responsive: en móvil reducimos altura de celdas */
@media (max-width: 720px) {
    .agenda-grid-cell { min-height: 64px; padding: 4px; }
    .agenda-grid-events { gap: 1px; }
    .agenda-evt { font-size: 9.5px; padding: 1px 4px; }
    .agenda-evt-time { display: none; }  /* solo título en móvil */
}

.agenda-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.agenda-month-header {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    color: rgba(var(--accent-rgb), 0.85);
    margin: 18px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
}
.agenda-month-header:first-child { margin-top: 0; }
.agenda-item {
    display: flex;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 8px;
    background: rgba(var(--accent-rgb), 0.03);
    cursor: pointer;
    transition: all 0.15s ease;
}
.agenda-item:hover {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.45);
    transform: translateX(2px);
}
.agenda-when {
    flex: 0 0 200px;
    color: rgba(var(--accent-rgb), 0.9);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
.agenda-body { flex: 1; min-width: 0; }
.agenda-title-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 3px;
}
.agenda-title-row strong {
    color: var(--jarvis-text);
    font-size: 13.5px;
}
.agenda-cat {
    font-size: 10.5px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.15);
    color: rgba(var(--accent-rgb), 0.95);
    letter-spacing: 0.4px;
}
.agenda-author {
    font-size: 12px;
    opacity: 0.7;
}
.agenda-desc {
    color: var(--jarvis-text-dim);
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.5;
}
.agenda-loc {
    display: inline-block;
    color: var(--jarvis-text-dim);
    font-size: 11.5px;
    margin-top: 4px;
}
.agenda-form {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 12px;
    background: rgba(var(--accent-rgb), 0.04);
}
.agenda-form h4 {
    margin: 0 0 14px;
    color: rgba(var(--accent-rgb), 0.95);
    letter-spacing: 1.4px;
}

.msg.system.soul-saved,
.msg.system.agenda-saved {
    color: rgba(var(--accent-rgb), 0.85);
    font-style: italic;
    letter-spacing: 0.6px;
    font-size: 11.5px;
    opacity: 0.9;
    background: rgba(var(--accent-rgb), 0.05);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 10px;
    padding: 6px 14px;
    margin: 6px auto;
}
.msg.system.agenda-saved {
    /* Acento amarillo cálido para distinguir de soul-saved */
    color: rgba(255, 209, 102, 0.95);
    background: rgba(255, 209, 102, 0.06);
    border-color: rgba(255, 209, 102, 0.2);
}

/* Card de OAuth de Google (Ajustes → Sistema → Reconectar Google) */
.gws-oauth-card {
    margin: 10px 0 12px;
    padding: 14px;
    border: 1px solid rgba(255, 180, 60, 0.4);
    background: rgba(255, 180, 60, 0.06);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gws-oauth-card.done {
    border-color: rgba(80, 220, 140, 0.5);
    background: rgba(80, 220, 140, 0.06);
}
.gws-oauth-msg {
    font-size: 12.5px;
    color: var(--jarvis-text);
    line-height: 1.5;
}
.gws-oauth-msg .muted {
    display: block;
    color: var(--jarvis-text-dim);
    font-size: 11px;
    margin-top: 2px;
}
.gws-oauth-msg.gws-oauth-ok {
    color: rgba(80, 220, 140, 0.95);
    font-weight: 600;
}
.gws-oauth-url {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 11px;
    word-break: break-all;
    user-select: all;
    -webkit-user-select: all;
}
.gws-oauth-url code {
    background: transparent;
    color: rgba(var(--accent-rgb), 0.9);
}
.gws-oauth-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.msg.system.external-failed.auth-expired {
    /* Reauth notice — naranja invitando a click */
    color: rgba(255, 180, 60, 0.95);
    background: rgba(255, 180, 60, 0.08);
    border: 1px solid rgba(255, 180, 60, 0.4);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 8px auto;
    max-width: 92%;
    text-align: left;
    font-style: normal;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.autom-relogin-btn {
    align-self: flex-start;
    background: rgba(255, 180, 60, 0.95);
    color: #1a1a1a;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.15s ease;
}
.autom-relogin-btn:hover {
    background: rgba(255, 200, 90, 1);
    transform: translateY(-1px);
}
.autom-relogin-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.msg.system.autoplay-blocked {
    color: rgba(255, 209, 102, 0.95);
    background: rgba(255, 209, 102, 0.08);
    border: 1px dashed rgba(255, 209, 102, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    margin: 6px auto;
    font-size: 11.5px;
    letter-spacing: 0.3px;
    text-align: left;
    cursor: pointer;
    font-style: normal;
    max-width: 92%;
}
.msg.system.autoplay-blocked:hover {
    background: rgba(255, 209, 102, 0.14);
    border-color: rgba(255, 209, 102, 0.6);
}

.msg.system.external-failed {
    /* Rojo coral para errores de servicios externos — visible pero no agresivo */
    color: rgba(255, 107, 107, 0.95);
    background: rgba(255, 107, 107, 0.07);
    border: 1px solid rgba(255, 107, 107, 0.3);
    font-style: normal;
    font-size: 11.5px;
    border-radius: 10px;
    padding: 8px 14px;
    margin: 6px auto;
    max-width: 92%;
    text-align: left;
    letter-spacing: 0.3px;
}

.input-bar {
    position: relative;
    z-index: 2;
    padding: 16px 32px 24px;
    border-top: 1px solid rgba(var(--accent-rgb), 0.15);
    background: linear-gradient(0deg, rgba(var(--accent-rgb), 0.05), transparent);
}

.input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 4px;
    padding: 4px 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-wrap:focus-within {
    border-color: var(--jarvis-cyan);
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.25);
}

.prompt-prefix {
    color: var(--jarvis-cyan);
    font-weight: bold;
    font-size: 16px;
    text-shadow: 0 0 6px var(--jarvis-cyan-glow);
}

#user-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--jarvis-text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 15px;
    padding: 12px 0;
    letter-spacing: 0.5px;
}

#user-input::placeholder {
    color: var(--jarvis-text-dim);
}

#send-btn, #reset-btn {
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: var(--jarvis-cyan);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s;
}

#send-btn:hover, #reset-btn:hover {
    background: rgba(var(--accent-rgb), 0.15);
    border-color: var(--jarvis-cyan);
    box-shadow: 0 0 12px var(--jarvis-cyan-glow);
}

#send-btn:active, #reset-btn:active {
    transform: scale(0.95);
}

/* Estado del valor de status según conexión */
.value.online { color: var(--jarvis-cyan); }
.value.offline { color: var(--jarvis-error); text-shadow: 0 0 8px rgba(255, 77, 109, 0.5); }
.value.warning { color: var(--jarvis-warning); text-shadow: 0 0 8px rgba(255, 184, 77, 0.5); }

/* ──────────────────────────────────────────────────────────
   PANEL DE SETTINGS — Overlay JARVIS-style
   ────────────────────────────────────────────────────────── */

.settings-trigger {
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: var(--jarvis-cyan);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    margin-left: 16px;
    font-size: 14px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.settings-trigger:hover {
    background: rgba(var(--accent-rgb), 0.15);
    box-shadow: 0 0 12px var(--jarvis-cyan-glow);
    transform: rotate(45deg);
}

/* Botón mostrar/ocultar el panel de chat. Mismo estilo que el de ajustes
   pero ligeramente menos margen, y "active" cuando el panel está abierto. */
.hud-panel-toggle {
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: var(--jarvis-cyan);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    margin-left: 12px;
    font-size: 14px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hud-panel-toggle:hover {
    background: rgba(var(--accent-rgb), 0.15);
    box-shadow: 0 0 12px var(--jarvis-cyan-glow);
}
.hud-panel-toggle.active {
    background: rgba(var(--accent-rgb), 0.20);
    border-color: var(--jarvis-cyan);
    box-shadow: 0 0 10px var(--jarvis-cyan-glow);
}

.settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    background: rgba(2, 7, 13, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: overlayIn 0.25s ease-out;
}
.settings-overlay.open { display: block; }

@keyframes overlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.settings-panel {
    position: absolute;
    top: 5vh;
    bottom: 5vh;
    left: 8vw;
    right: 8vw;
    background: linear-gradient(135deg, rgba(5, 16, 24, 0.95), rgba(2, 7, 13, 0.95));
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    border-radius: 6px;
    box-shadow:
        0 0 60px rgba(var(--accent-rgb), 0.15),
        inset 0 0 40px rgba(var(--accent-rgb), 0.04);
    display: grid;
    grid-template-columns: 220px 1fr;
    overflow: hidden;
    animation: panelIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes panelIn {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Marcas decorativas en las esquinas (estilo HUD) */
.settings-panel::before,
.settings-panel::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid var(--jarvis-cyan);
}
.settings-panel::before {
    top: 8px; left: 8px;
    border-right: none; border-bottom: none;
}
.settings-panel::after {
    bottom: 8px; right: 8px;
    border-left: none; border-top: none;
}

.settings-sidebar {
    background: rgba(0, 0, 0, 0.35);
    border-right: 1px solid rgba(var(--accent-rgb), 0.2);
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    position: relative;
    overflow: hidden;
    min-height: 0;   /* permite que .settings-tabs encoja y haga scroll */
}

.settings-sidebar-header {
    padding: 0 24px 20px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
    margin-bottom: 16px;
    flex-shrink: 0;
}

.settings-sidebar-header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    letter-spacing: 6px;
    color: var(--jarvis-cyan);
    text-shadow: 0 0 10px var(--jarvis-cyan-glow);
}

.settings-sidebar-header .label {
    margin-top: 4px;
}

.settings-tabs {
    list-style: none;
    position: relative;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}
.settings-tabs::-webkit-scrollbar { width: 4px; }
.settings-tabs::-webkit-scrollbar-track { background: transparent; }
.settings-tabs::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.25);
    border-radius: 2px;
}
.settings-tabs::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.55);
}

.settings-tab {
    padding: 12px 24px;
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--jarvis-text-dim);
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
    transition: color 0.2s, padding-left 0.2s;
    user-select: none;
}

.settings-tab:hover {
    color: var(--jarvis-text);
    padding-left: 28px;
}

.settings-tab.active {
    color: var(--jarvis-cyan);
    text-shadow: 0 0 8px var(--jarvis-cyan-glow);
    padding-left: 32px;
}

.settings-tab.active::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--jarvis-cyan);
    box-shadow: 0 0 8px var(--jarvis-cyan-glow);
}

.settings-tab-icon {
    margin-right: 10px;
    opacity: 0.6;
}

.settings-content {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 32px 40px;
    position: relative;
    min-height: 0;
    max-height: 100%;
}

.settings-content::-webkit-scrollbar { width: 6px; }
.settings-content::-webkit-scrollbar-thumb {
    background: var(--jarvis-cyan-dim);
    border-radius: 3px;
}

.settings-section { display: none; animation: sectionIn 0.3s ease-out; }
.settings-section.active { display: block; }

@keyframes sectionIn {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.settings-section h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    letter-spacing: 4px;
    color: var(--jarvis-cyan);
    margin-bottom: 4px;
    text-transform: uppercase;
}

.settings-section .section-desc {
    font-size: 12px;
    color: var(--jarvis-text-dim);
    letter-spacing: 1px;
    margin-bottom: 28px;
    line-height: 1.6;
}

.settings-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: var(--jarvis-cyan);
    cursor: pointer;
    font-size: 16px;
    z-index: 2;
    transition: all 0.2s;
}
.settings-close:hover {
    background: rgba(var(--accent-rgb), 0.15);
    box-shadow: 0 0 12px var(--jarvis-cyan-glow);
}

/* Campos de formulario */
.field {
    margin-bottom: 22px;
}
.field-label {
    display: block;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--jarvis-text-dim);
    margin-bottom: 8px;
    text-transform: uppercase;
}
.field-help {
    font-size: 11px;
    color: var(--jarvis-text-dim);
    margin-top: 6px;
    line-height: 1.5;
}

.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field textarea,
.field select {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 4px;
    color: var(--jarvis-text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    padding: 10px 12px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: var(--jarvis-cyan);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.2);
}

.field textarea {
    min-height: 200px;
    resize: vertical;
    line-height: 1.6;
}

.field-row {
    display: flex;
    gap: 8px;
}
.field-row input { flex: 1; }

.btn {
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    color: var(--jarvis-cyan);
    cursor: pointer;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    padding: 10px 18px;
    border-radius: 4px;
    text-transform: uppercase;
    transition: all 0.2s;
}
.btn:hover {
    background: rgba(var(--accent-rgb), 0.2);
    box-shadow: 0 0 14px var(--jarvis-cyan-glow);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-ghost {
    background: transparent;
    border-color: rgba(var(--accent-rgb), 0.2);
}

.btn-danger {
    color: var(--jarvis-error);
    border-color: rgba(255, 77, 109, 0.4);
    background: rgba(255, 77, 109, 0.05);
}
.btn-danger:hover {
    background: rgba(255, 77, 109, 0.15);
    box-shadow: 0 0 12px rgba(255, 77, 109, 0.4);
}

/* Indicador de estado de conexión */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 11px;
    letter-spacing: 2px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    text-transform: uppercase;
}
.status-pill .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--jarvis-text-dim);
    box-shadow: 0 0 4px currentColor;
}
.status-pill.ok    { color: var(--jarvis-success); border-color: rgba(93, 255, 163, 0.4); }
.status-pill.ok .dot { background: var(--jarvis-success); }
.status-pill.warn  { color: var(--jarvis-warning); border-color: rgba(255, 184, 77, 0.4); }
.status-pill.warn .dot { background: var(--jarvis-warning); }
.status-pill.err   { color: var(--jarvis-error); border-color: rgba(255, 77, 109, 0.4); }
.status-pill.err .dot { background: var(--jarvis-error); }
.status-pill.testing .dot {
    background: var(--jarvis-cyan);
    animation: pulse-dot 1s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.6); }
}

/* Tarjetas de modelo */
.model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.model-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 4px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.model-card:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.05);
}
.model-card.selected {
    border-color: var(--jarvis-cyan);
    background: rgba(var(--accent-rgb), 0.08);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.15), inset 0 0 16px rgba(var(--accent-rgb), 0.05);
}
.model-card.selected::after {
    content: '✓';
    position: absolute;
    top: 8px; right: 10px;
    color: var(--jarvis-cyan);
    font-size: 14px;
    text-shadow: 0 0 6px var(--jarvis-cyan-glow);
}
.model-card .model-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--jarvis-cyan);
    margin-bottom: 6px;
}
.model-card .model-desc {
    font-size: 11px;
    color: var(--jarvis-text-dim);
    line-height: 1.5;
}

/* Swatches de tema */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.theme-swatch {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 4px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
}
.theme-swatch:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
}
.theme-swatch.selected {
    border-color: var(--jarvis-cyan);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.2);
}
.theme-dot {
    width: 24px; height: 24px;
    border-radius: 50%;
    box-shadow: 0 0 12px currentColor, inset 0 0 6px rgba(255, 255, 255, 0.3);
}
.theme-name {
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--jarvis-text);
}

/* Slider para max_tokens */
.slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.slider-row input[type="range"] {
    flex: 1;
    accent-color: var(--jarvis-cyan);
}
.slider-value {
    font-family: 'Orbitron', sans-serif;
    color: var(--jarvis-cyan);
    font-size: 14px;
    min-width: 60px;
    text-align: right;
    text-shadow: 0 0 6px var(--jarvis-cyan-glow);
}

/* Diagnóstico */
.diag-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.diag-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 4px;
    padding: 14px;
}
.diag-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--jarvis-text-dim);
    margin-bottom: 6px;
    text-transform: uppercase;
}
.diag-value {
    font-family: 'Orbitron', sans-serif;
    color: var(--jarvis-cyan);
    font-size: 16px;
    text-shadow: 0 0 6px var(--jarvis-cyan-glow);
}

/* Toast de feedback */
.toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(2, 7, 13, 0.95);
    border: 1px solid var(--jarvis-cyan);
    color: var(--jarvis-cyan);
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 0 20px var(--jarvis-cyan-glow);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 200;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.toast.error { color: var(--jarvis-error); border-color: var(--jarvis-error); box-shadow: 0 0 20px rgba(255, 77, 109, 0.5); }

/* Modulos */
.module-list { display: flex; flex-direction: column; gap: 10px; }
.module-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 4px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.module-empty {
    text-align: center;
    color: var(--jarvis-text-dim);
    font-size: 13px;
    padding: 40px 20px;
    border: 1px dashed rgba(var(--accent-rgb), 0.2);
    border-radius: 4px;
}

/* Toggle switch */
.toggle {
    position: relative;
    width: 40px; height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.toggle::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--jarvis-text-dim);
    transition: transform 0.2s, background 0.2s;
}
.toggle.on {
    background: rgba(var(--accent-rgb), 0.3);
    border-color: var(--jarvis-cyan);
}
.toggle.on::after {
    transform: translateX(20px);
    background: var(--jarvis-cyan);
    box-shadow: 0 0 8px var(--jarvis-cyan-glow);
}

/* ──────── Micrófono y toggles ──────── */

.mic-btn {
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: var(--jarvis-cyan);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    font-size: 16px;
    transition: all 0.2s;
    position: relative;
}
.mic-btn:hover {
    background: rgba(var(--accent-rgb), 0.15);
    box-shadow: 0 0 12px var(--jarvis-cyan-glow);
}
.mic-btn:active { transform: scale(0.95); }

.mic-btn.listening {
    background: rgba(var(--accent-rgb), 0.25);
    border-color: var(--jarvis-cyan);
    box-shadow: 0 0 18px var(--jarvis-cyan-glow);
}
.mic-btn.listening::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 6px;
    border: 1px solid var(--jarvis-cyan);
    animation: micPulse 1.2s infinite;
}
@keyframes micPulse {
    0%   { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.4); }
}

.mic-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.mic-btn.speaking {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--jarvis-success);
    border-color: var(--jarvis-success);
}

/* Toggles inline en la sección de Voz */
.toggle-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 4px;
}
.toggle-title {
    font-size: 12px;
    color: var(--jarvis-text);
    letter-spacing: 1px;
    margin-bottom: 4px;
}

/* Indicador de transcripción en vivo */
.input-wrap.listening {
    border-color: var(--jarvis-cyan);
    box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.35);
}

#user-input.interim {
    color: var(--jarvis-text-dim);
    font-style: italic;
}

/* ──────── Editor de cadena del orquestador ──────── */
.chain-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chain-step {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 4px;
    padding: 10px 12px;
    transition: border-color 0.2s;
}
.chain-step:hover { border-color: rgba(var(--accent-rgb), 0.4); }
.chain-step .step-num {
    font-family: 'Orbitron', sans-serif;
    color: var(--jarvis-cyan);
    font-size: 14px;
    min-width: 22px;
    text-align: center;
    text-shadow: 0 0 6px var(--jarvis-cyan-glow);
}
.chain-step select {
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 4px;
    color: var(--jarvis-text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    padding: 6px 10px;
    outline: none;
}
.chain-step select:focus {
    border-color: var(--jarvis-cyan);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.2);
}
.chain-step .step-actions {
    display: flex;
    gap: 4px;
}
.chain-step .step-btn {
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: var(--jarvis-cyan);
    cursor: pointer;
    border-radius: 3px;
    font-size: 12px;
    transition: all 0.15s;
}
.chain-step .step-btn:hover {
    background: rgba(var(--accent-rgb), 0.15);
}
.chain-step .step-btn.danger {
    color: var(--jarvis-error);
    border-color: rgba(255, 77, 109, 0.3);
}
.chain-step .step-btn.danger:hover {
    background: rgba(255, 77, 109, 0.1);
}
.chain-empty {
    color: var(--jarvis-text-dim);
    font-size: 12px;
    padding: 16px;
    text-align: center;
    border: 1px dashed rgba(var(--accent-rgb), 0.2);
    border-radius: 4px;
}

/* ──────── Smart Router: badge de intent + lista de intents ──────── */
.routing-badge {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    padding: 6px 14px;
    background: rgba(2, 7, 13, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--jarvis-cyan);
    border-radius: 20px;
    color: var(--jarvis-cyan);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 0 16px var(--jarvis-cyan-glow);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 4;
    white-space: nowrap;
}
.routing-badge.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.routing-badge .arrow {
    margin: 0 8px;
    color: var(--jarvis-text-dim);
}
.routing-badge .target {
    color: var(--jarvis-success);
    text-shadow: 0 0 6px rgba(93, 255, 163, 0.5);
}

.intent-row {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.intent-row .intent-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}
.intent-row .intent-name {
    font-family: 'Orbitron', sans-serif;
    color: var(--jarvis-cyan);
    font-size: 12px;
    letter-spacing: 1px;
}
.intent-row .intent-id {
    font-size: 10px;
    color: var(--jarvis-text-dim);
    font-family: 'Share Tech Mono', monospace;
}
.intent-row .intent-desc {
    font-size: 11px;
    color: var(--jarvis-text-dim);
    margin-bottom: 6px;
    line-height: 1.4;
}
.intent-row .intent-chain {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 10px;
    color: var(--jarvis-text);
}
.intent-row .chain-step-pill {
    padding: 2px 8px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 10px;
    font-family: 'Share Tech Mono', monospace;
}

/* ══════════════════════════════════════════════════════════════════════════
   FLUID TYPOGRAPHY + RESPONSIVE + POLISH
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Breakpoints (referencia, no usables en @media) */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* Tipografía fluida — escala suavemente entre min y max según viewport */
    --fs-hero:     clamp(20px, 2.6vw + 0.5rem, 32px);   /* "J.A.R.V.I.S." */
    --fs-section:  clamp(15px, 1.4vw + 0.5rem, 18px);   /* títulos secciones */
    --fs-body:     clamp(13px, 0.7vw + 0.6rem, 15px);
    --fs-tiny:     clamp(9px, 0.4vw + 0.4rem, 11px);
    --fs-subtitle: clamp(15px, 1.6vw + 0.5rem, 22px);   /* respuesta de JARVIS bajo el orbe */
    --fs-orbitron-num: clamp(12px, 0.6vw + 0.5rem, 14px);
}

/* ────────── Page-load reveal ────────── */
@keyframes hudIn      { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes inputBarIn { from { opacity: 0; transform: translateY(14px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes stageIn    { from { opacity: 0; transform: scale(0.94);       } to { opacity: 1; transform: scale(1); } }
@keyframes flicker    {
    0%, 100% { opacity: 1; }
    97%      { opacity: 1; }
    98%      { opacity: 0.85; }
    99%      { opacity: 0.95; }
}

.hud      { animation: hudIn      0.8s cubic-bezier(0.2, 0.85, 0.2, 1) 0.05s both; }
.stage    { animation: stageIn    1.2s cubic-bezier(0.2, 0.85, 0.2, 1) 0.20s both; }
.input-bar{ animation: inputBarIn 0.8s cubic-bezier(0.2, 0.85, 0.2, 1) 0.45s both; }

/* Título: tipea al cargar como un terminal y luego respira.
   El cursor (border-right cyan) parpadea 4 veces tras tipear y luego
   queda OCULTO permanentemente gracias a forwards. */
.hud-center h1 {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--jarvis-cyan);
    width: 0;
    animation:
        typeIn 1.1s steps(13, end) 0.45s forwards,
        cursorBlink 0.7s 1.6s 4 forwards,
        titleGlow 5s 3.6s ease-in-out infinite;
}
@keyframes typeIn      { to { width: max-content; } }
@keyframes cursorBlink {
    50%  { border-color: transparent; }
    100% { border-color: transparent; border-right-width: 0; }
}
@keyframes titleGlow {
    0%, 100% { text-shadow: 0 0 12px var(--jarvis-cyan-glow), 0 0 24px rgba(var(--accent-rgb), 0.3); }
    50%      { text-shadow: 0 0 22px rgba(var(--accent-rgb), 0.75), 0 0 38px rgba(var(--accent-rgb), 0.4); }
}

/* ────────── Grain / noise texture sutil ────────── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.035;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: overlay;
}

/* Scanline horizontal sutil que recorre el HUD */
.hud::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
    pointer-events: none;
    animation: scanline 8s linear infinite;
    opacity: 0.5;
}
@keyframes scanline {
    0%   { top: 0%;   }
    100% { top: 100%; }
}

/* ────────── Brackets decorativos en las esquinas del stage ────────── */
.stage::before,
.stage::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1.5px solid rgba(var(--accent-rgb), 0.5);
    pointer-events: none;
    z-index: 2;
    transition: border-color 0.3s;
}
.stage::before {
    top: 14px; left: 14px;
    border-right: none; border-bottom: none;
}
.stage::after {
    bottom: 14px; right: 14px;
    border-left: none; border-top: none;
}

/* ════════════════════════════════════════════════════════════
   FLUID TYPOGRAPHY APLICADO A ELEMENTOS EXISTENTES
   ════════════════════════════════════════════════════════════ */

.hud-center h1     { font-size: var(--fs-hero); }
.subtitle-overlay  { font-size: var(--fs-subtitle); }
.settings-section h3 { font-size: var(--fs-section); }
.value             { font-size: var(--fs-body); }
.label             { font-size: var(--fs-tiny); }

/* ════════════════════════════════════════════════════════════
   TABLET (≤1023px): paneles más estrechos
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .settings-panel {
        top: 3vh; bottom: 3vh; left: 4vw; right: 4vw;
        grid-template-columns: 180px 1fr;
    }
    .dialogue-panel { width: 300px; }
    .hud-center .subtitle { display: none; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE (≤767px): rediseño de layout
   Estética: chat-only forzado. El orbe, brackets, dock, badges
   flotantes y subtítulo se ocultan; el chat ocupa pantalla
   completa con input-bar fija abajo y HUD compacto arriba.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* HUD ultra-compacto */
    .hud {
        padding: 10px 12px;
        padding-top: max(10px, env(safe-area-inset-top, 10px));
        grid-template-columns: 1fr auto 1fr;
        gap: 8px;
        background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.06), transparent);
    }
    .hud-center .subtitle { display: none; }
    .hud-center h1 {
        font-size: clamp(14px, 4.5vw, 18px) !important;
        letter-spacing: clamp(3px, 1.2vw, 6px) !important;
    }
    .hud-left .label, .hud-right .label { display: none; }
    .hud-left .value, .hud-right .value { font-size: 11px; }
    /* Esconder cosas que no aportan en móvil chat-only */
    .hud-orb-info,
    .hud-alerts-wrapper,
    .hud-proactive-voice,
    .hud-secondbrain,
    .hud-manual,
    .hud-dnd { display: none !important; }

    /* Botón de settings: touch ≥44 */
    .settings-trigger {
        width: 44px; height: 44px;
        margin-left: 8px;
        border-radius: var(--r-md);
    }

    /* Stage: el orbe y sus brackets desaparecen — el chat ocupa todo */
    .stage::before, .stage::after { display: none !important; }
    #orb-canvas { display: none !important; }
    .subtitle-overlay { display: none !important; }
    #widget-dock { display: none !important; }

    /* Panel de diálogo: viewport completo siempre, ignorar collapsed */
    .dialogue-panel,
    .dialogue-panel.collapsed {
        position: fixed;
        top: 0; right: 0;
        bottom: 0; left: 0;
        width: 100%;
        border-radius: 0;
        border: none;
        border-top: 1px solid var(--border-subtle);
        z-index: 50;
        background: linear-gradient(180deg, rgba(2,6,12,0.94), rgba(5,17,32,0.96));
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        padding-top: env(safe-area-inset-top, 0);
    }
    /* En móvil el chat es siempre visible — el toggle no tiene sentido */
    .panel-toggle { display: none !important; }

    /* Mensajes con respiración generosa para touch */
    .msg {
        font-size: 14px;
        padding: var(--sp-3) var(--sp-4);
        max-width: 86%;
    }

    /* Input bar fija al fondo respetando safe-area */
    .input-bar {
        padding: var(--sp-3) var(--sp-4);
        padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom, var(--sp-3)));
        background: linear-gradient(0deg, rgba(2,6,12,0.96), rgba(2,6,12,0.85) 60%, transparent);
        border-top: 1px solid var(--border-default);
    }
    .input-wrap {
        padding: 4px 10px;
        gap: 6px;
        border-radius: var(--r-md);
    }
    #user-input { font-size: 16px; padding: 12px 0; } /* 16px evita zoom iOS */
    #send-btn, #reset-btn, #mic-btn {
        width: 48px;
        height: 48px;
        font-size: 16px;
        border-radius: var(--r-md);
    }

    /* Background simplificado — sin mesh ni grilla en móvil para batería */
    body {
        background: var(--jarvis-bg);
        box-shadow: none;
    }
    .grid-bg { display: none !important; }
    body::after { display: none !important; }

    /* Settings overlay: full screen sin márgenes */
    .settings-panel {
        top: 0; bottom: 0; left: 0; right: 0;
        border-radius: 0;
        grid-template-columns: 1fr;       /* sin sidebar lateral */
        grid-template-rows: auto 1fr;     /* tabs arriba, contenido abajo */
    }
    .settings-panel::before, .settings-panel::after { display: none; }

    /* Sidebar → tabs horizontales scrollables arriba */
    .settings-sidebar {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0;
        border-right: none;
        border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
        scrollbar-width: none;
    }
    .settings-sidebar::-webkit-scrollbar { display: none; }
    .settings-sidebar-header { display: none; }
    .settings-tabs {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        flex: 1;
    }
    .settings-tab {
        padding: 14px 16px;
        white-space: nowrap;
        font-size: 11px;
    }
    .settings-tab:hover { padding-left: 16px; } /* sin shift en mobile */
    .settings-tab.active { padding-left: 16px; }
    .settings-tab.active::before {
        left: 50%;
        top: auto;
        bottom: 4px;
        transform: translateX(-50%);
    }

    .settings-content { padding: 18px 16px 24px; }
    .settings-close {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
    }

    /* Cards y grids en una columna */
    .model-grid, .theme-grid, .diag-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Field rows wrapean cuando es necesario */
    .field-row {
        flex-wrap: wrap;
    }
    .field-row input { flex: 1 1 200px; min-width: 0; }
    .field-row .btn,
    .field-row .btn-ghost { flex: 0 0 auto; }

    /* Toggle items columna */
    .toggle-item {
        gap: 12px;
    }

    /* Chain steps: que no se salgan */
    .chain-step {
        flex-wrap: wrap;
    }
    .chain-step select {
        min-width: 100px;
        flex: 1 1 100px;
    }

    /* Botones touch-friendly en settings */
    .btn {
        min-height: 40px;
        padding: 10px 14px;
    }
    .step-btn {
        min-width: 32px;
        min-height: 32px;
    }

    /* Routing badge más pequeño y centrado bien */
    .routing-badge {
        top: 14px;
        font-size: 10px;
        padding: 5px 10px;
        max-width: 90vw;
    }

    /* Toast no se sale */
    .toast {
        max-width: 90vw;
        text-align: center;
    }

    /* ─────────────────────────────────────────────────────────
       MÓVIL: vista chat-only forzada
       En pantallas pequeñas el orbe no se renderiza y el panel de
       chat ocupa la pantalla entera, sin colapsable. La animación
       del orbe sigue siendo costosa para batería en móvil.
       ───────────────────────────────────────────────────────── */
    body:not(.chat-only) #orb-canvas {
        display: none !important;
    }
    body:not(.chat-only) .subtitle-overlay,
    body:not(.chat-only) .hud-center .subtitle {
        display: none !important;
    }
    /* Chat siempre desplegado en móvil, ignora collapsed */
    body:not(.chat-only) .dialogue-panel,
    body:not(.chat-only) .dialogue-panel.collapsed {
        transform: none !important;
    }
    /* Botón "colapsar/desplegar chat" no tiene sentido en móvil */
    body:not(.chat-only) .panel-toggle {
        display: none !important;
    }
    /* HUD: oculta el orbe-relacionado (contadores de coste flotantes etc.) */
    body:not(.chat-only) .hud-orb-info {
        display: none !important;
    }
    /* Brackets de la stage no aportan en móvil con chat full-screen */
    body:not(.chat-only) .stage::before,
    body:not(.chat-only) .stage::after {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════
   MOBILE pequeño (≤380px): ajustes finales
   ════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .hud-left .label, .hud-right .label, .hud-left .value, .hud-right .value {
        font-size: 10px;
    }
    .settings-tab { padding: 12px 12px; font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════
   DESKTOP grande (≥1280px): un poco más de aire
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
    .hud { padding: 22px 40px; }
    .input-bar { padding: 18px 40px 28px; }
    .settings-panel {
        top: 6vh; bottom: 6vh;
        left: 12vw; right: 12vw;
    }
}

/* ════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION: respetar preferencia del usuario
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .hud::after { animation: none; }
    .hud-center h1 { animation: none; }
}

/* ──────── Costes ──────── */
.cost-overview {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}
.cost-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 4px;
    padding: 16px;
}
.cost-card.highlight {
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.08), inset 0 0 16px rgba(var(--accent-rgb), 0.04);
}
.cost-label {
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--jarvis-text-dim);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.cost-value-big {
    font-family: 'Orbitron', sans-serif;
    color: var(--jarvis-cyan);
    font-size: clamp(22px, 3vw, 30px);
    text-shadow: 0 0 10px var(--jarvis-cyan-glow);
    margin-bottom: 6px;
}
.cost-sub {
    font-size: 11px;
    color: var(--jarvis-text-dim);
    letter-spacing: 1px;
}
.cost-bar-wrap { margin-top: 14px; }
.cost-bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
}
.cost-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--jarvis-success), var(--jarvis-cyan));
    transition: width 0.4s ease, background 0.3s;
    border-radius: 3px;
}
.cost-bar-fill.warn { background: linear-gradient(90deg, var(--jarvis-cyan), var(--jarvis-warning)); }
.cost-bar-fill.over { background: linear-gradient(90deg, var(--jarvis-warning), var(--jarvis-error)); }
.cost-bar-meta {
    margin-top: 6px;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--jarvis-text-dim);
    display: flex;
    justify-content: space-between;
}

.cap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 8px;
}
.cap-mini-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--jarvis-text-dim);
    margin-bottom: 4px;
    text-transform: uppercase;
}

.cost-list { display: flex; flex-direction: column; gap: 6px; }
.cost-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 3px;
    font-size: 12px;
}
.cost-row .model {
    font-family: 'Share Tech Mono', monospace;
    color: var(--jarvis-text);
}
.cost-row .calls {
    color: var(--jarvis-text-dim);
    font-size: 10px;
}
.cost-row .usd {
    color: var(--jarvis-cyan);
    font-family: 'Orbitron', sans-serif;
}
.cost-row .usd.untracked { color: var(--jarvis-warning); font-size: 10px; }

.cost-recent {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
}
.cost-recent .row {
    display: grid;
    grid-template-columns: 60px 1fr 70px 70px;
    gap: 8px;
    padding: 4px 8px;
    color: var(--jarvis-text-dim);
}
.cost-recent .row .model { color: var(--jarvis-text); }
.cost-recent .row .usd { color: var(--jarvis-cyan); text-align: right; }
.cost-recent .row .tk { text-align: right; }

/* HUD: contador del mes (siempre visible, clickable). Cambia entre USD y
   tokens según el provider activo (claude_code = tokens, resto = USD). */
.hud-cost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 12px;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    color: var(--jarvis-cyan);
    text-shadow: 0 0 6px var(--jarvis-cyan-glow);
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    cursor: pointer;
}
.hud-cost:hover {
    background: rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 0 12px var(--jarvis-cyan-glow);
}
.hud-cost.warn { border-color: var(--jarvis-warning); color: var(--jarvis-warning); }
.hud-cost.over { border-color: var(--jarvis-error); color: var(--jarvis-error); }
.hud-cost::before {
    content: '$';
    opacity: 0.6;
    font-size: 9px;
}
/* Cuando provider activo es claude_code: prefijo distinto y sin warn/over */
.hud-cost.tokens-mode::before { content: '◧'; }
.hud-cost.tokens-mode { color: var(--jarvis-cyan); border-color: rgba(var(--accent-rgb), 0.35); }
.hud-cost.bump { animation: costBump 0.45s ease-out; }

/* ──────── HUD: indicador de Proactividad / DND ──────── */
.hud-dnd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    padding: 0;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    color: var(--jarvis-cyan);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    user-select: none;
}
.hud-dnd:hover {
    background: rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.5);
    transform: scale(1.05);
}
.hud-dnd.dnd-active {
    border-color: rgba(255, 200, 80, 0.7);
    color: rgba(255, 220, 140, 1);
    text-shadow: 0 0 6px rgba(255, 200, 80, 0.5);
    background: rgba(255, 200, 80, 0.10);
}
.hud-dnd.dnd-quiet {
    border-color: rgba(150, 150, 200, 0.5);
    color: rgba(180, 180, 220, 0.85);
    background: rgba(0, 0, 30, 0.5);
}

/* ──────── HUD: botón Manual ──────── */
.hud-manual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    padding: 0;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 50%;
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--jarvis-cyan);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    user-select: none;
}
.hud-manual:hover {
    background: rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.6);
    transform: scale(1.05);
}

/* ──────── Modal: Token Dashboard ──────── */
.token-dashboard-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 7, 13, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 80;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 24px 24px;
    overflow-y: auto;
}
.token-dashboard-overlay.open { display: flex; }
.token-dashboard-panel {
    position: relative;
    background: rgba(2, 7, 13, 0.92);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 6px;
    width: 100%;
    max-width: 880px;
    padding: 28px 32px 36px;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.7), 0 0 64px rgba(var(--accent-rgb), 0.10);
    color: var(--jarvis-text);
    animation: msgIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.token-dashboard-header { margin-bottom: 24px; }
.token-dashboard-header h2 {
    font-family: 'Orbitron', sans-serif;
    color: var(--jarvis-cyan);
    letter-spacing: 4px;
    font-size: 18px;
    margin: 0;
    text-shadow: 0 0 12px var(--jarvis-cyan-glow);
}
.token-dashboard-header .label {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    letter-spacing: 1.4px;
    color: var(--jarvis-text-dim);
}

.td-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}
.td-card {
    background: rgba(var(--accent-rgb), 0.05);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 4px;
    padding: 14px 18px;
}
.td-card-hero {
    grid-column: 1 / 3;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.05));
    border-color: rgba(var(--accent-rgb), 0.40);
    box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.10);
}
.td-card .td-label {
    font-size: 10px;
    letter-spacing: 1.6px;
    color: var(--jarvis-text-dim);
    margin-bottom: 6px;
}
.td-card .td-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--jarvis-cyan);
    text-shadow: 0 0 10px var(--jarvis-cyan-glow);
    line-height: 1.1;
}
.td-card-hero .td-value { font-size: 36px; }
.td-card .td-sub {
    margin-top: 6px;
    font-size: 11px;
    color: var(--jarvis-text-dim);
    font-family: "Share Tech Mono", monospace;
}
.td-card-cost .td-value {
    color: var(--jarvis-text);
    font-size: 22px;
}
.td-card-cost.zero-cost .td-value { opacity: 0.55; }

.td-section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 2.4px;
    color: var(--jarvis-cyan);
    margin: 18px 0 10px;
    border-bottom: 1px dashed rgba(var(--accent-rgb), 0.28);
    padding-bottom: 6px;
}

.td-by-model {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.td-model-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 0.8fr;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    padding: 8px 10px;
    background: rgba(var(--accent-rgb), 0.04);
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 3px;
}
.td-model-row .td-mname {
    color: var(--jarvis-text);
    font-family: "Share Tech Mono", monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.td-model-row .td-stat {
    color: var(--jarvis-text-dim);
    font-family: "Share Tech Mono", monospace;
    text-align: right;
}
.td-model-row .td-bar {
    height: 4px;
    background: rgba(var(--accent-rgb), 0.15);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.td-model-row .td-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.65), var(--jarvis-cyan));
    box-shadow: 0 0 6px var(--jarvis-cyan-glow);
}

.td-by-day {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3px;
    height: 80px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 3px;
    padding: 8px;
}
.td-day-bar {
    flex: 1;
    background: linear-gradient(180deg, var(--jarvis-cyan), rgba(var(--accent-rgb), 0.3));
    border-radius: 1px;
    min-height: 2px;
    position: relative;
}
.td-day-bar:hover { box-shadow: 0 0 6px var(--jarvis-cyan-glow); }
.td-day-bar::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    white-space: nowrap;
    background: rgba(2, 7, 13, 0.95);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    color: var(--jarvis-cyan);
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.td-day-bar:hover::after { opacity: 1; }

.td-footer-help {
    margin-top: 24px;
    font-size: 11px;
    color: var(--jarvis-text-dim);
    line-height: 1.5;
    border-top: 1px solid rgba(var(--accent-rgb), 0.18);
    padding-top: 14px;
}

.td-deep-actions {
    margin-top: 18px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0.03));
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.td-deep-actions .btn {
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    font-size: 13px;
}
#td-deep-status {
    font-size: 11px;
    font-family: "Share Tech Mono", monospace;
    color: var(--jarvis-text-dim);
}

@media (max-width: 640px) {
    .token-dashboard-overlay { padding: 60px 12px 12px; }
    .token-dashboard-panel { padding: 20px; }
    .td-card .td-value { font-size: 22px; }
    .td-card-hero .td-value { font-size: 28px; }
    .td-model-row {
        grid-template-columns: 1.5fr 1fr 1fr;
    }
    .td-model-row .td-bar { display: none; }
}
@keyframes costBump {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); box-shadow: 0 0 14px var(--jarvis-cyan-glow); }
    100% { transform: scale(1); }
}

@media (max-width: 767px) {
    .cost-overview { grid-template-columns: 1fr; }
    .cap-grid { grid-template-columns: 1fr; }
    .hud-cost { font-size: 10px; padding: 3px 8px; margin-right: 8px; }
}

/* ════════════════════════════════════════════════════════════
   SKILLS MANAGER
   ════════════════════════════════════════════════════════════ */
.skills-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.skill-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 4px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
    position: relative;
}
.skill-card:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    transform: translateY(-1px);
}
.skill-card.disabled {
    opacity: 0.55;
}
.skill-card.has-error {
    border-color: rgba(255, 77, 109, 0.5);
}
.skill-card.has-error:hover {
    border-color: rgba(255, 77, 109, 0.7);
}
.skill-card .skill-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.skill-card .skill-title {
    font-family: 'Orbitron', sans-serif;
    color: var(--jarvis-cyan);
    font-size: 13px;
    letter-spacing: 1px;
}
.skill-card .skill-id {
    font-size: 10px;
    color: var(--jarvis-text-dim);
    font-family: 'Share Tech Mono', monospace;
}
.skill-card .skill-version {
    font-size: 9px;
    color: var(--jarvis-text-dim);
    padding: 2px 6px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 8px;
    flex-shrink: 0;
}
.skill-card .skill-desc {
    font-size: 11px;
    color: var(--jarvis-text-dim);
    line-height: 1.5;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.skill-card .skill-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.skill-tag {
    font-size: 9px;
    padding: 2px 7px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 8px;
    color: var(--jarvis-text);
    letter-spacing: 1px;
}
.skill-badge {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.skill-badge.builtin { color: var(--jarvis-cyan); border: 1px solid rgba(var(--accent-rgb), 0.4); }
.skill-badge.custom  { color: var(--jarvis-success); border: 1px solid rgba(93, 255, 163, 0.4); }
.skill-badge.error   { color: var(--jarvis-error); border: 1px solid rgba(255, 77, 109, 0.5); }
.skill-badge.disabled{ color: var(--jarvis-text-dim); border: 1px solid var(--jarvis-text-dim); }

/* Tabs internas del editor */
.skill-editor-tabs {
    display: flex;
    gap: 0;
    margin: 18px 0 12px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
}
.seteb {
    background: transparent;
    border: none;
    color: var(--jarvis-text-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    padding: 10px 16px;
    cursor: pointer;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.seteb:hover { color: var(--jarvis-text); }
.seteb.active {
    color: var(--jarvis-cyan);
    border-bottom-color: var(--jarvis-cyan);
    text-shadow: 0 0 6px var(--jarvis-cyan-glow);
}

.skill-editor-pane { display: none; animation: paneIn 0.25s ease-out; }
.skill-editor-pane.active { display: block; }
@keyframes paneIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.skill-editor-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--accent-rgb), 0.15);
    align-items: center;
}

.code-editor-wrap {
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.code-editor-wrap:focus-within {
    border-color: var(--jarvis-cyan);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.2);
}
.code-editor-wrap .CodeMirror {
    height: 360px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.5);
}
.code-editor-wrap .CodeMirror-gutters {
    background: rgba(0, 0, 0, 0.7);
    border-right: 1px solid rgba(var(--accent-rgb), 0.15);
}

.skill-result {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 4px;
    padding: 12px;
    color: var(--jarvis-text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 280px;
    overflow-y: auto;
}
.skill-result.error { color: var(--jarvis-error); border-color: rgba(255, 77, 109, 0.5); }

/* Modal generación */
.skill-gen-modal {
    /* Por defecto OCULTO. Visibilidad controlada por la clase .open */
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2, 7, 13, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 150;
    align-items: center;
    justify-content: center;
}
.skill-gen-modal.open {
    display: flex;
    animation: overlayIn 0.2s;
}
.skill-gen-card {
    background: linear-gradient(135deg, rgba(5, 16, 24, 0.98), rgba(2, 7, 13, 0.98));
    border: 1px solid var(--jarvis-cyan);
    border-radius: 6px;
    padding: 24px;
    width: min(560px, 90vw);
    box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.2);
}
.skill-gen-card textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 4px;
    color: var(--jarvis-text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    padding: 10px 12px;
    outline: none;
    resize: vertical;
}
.skill-gen-card textarea:focus {
    border-color: var(--jarvis-cyan);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.2);
}

@media (max-width: 767px) {
    .skills-grid { grid-template-columns: 1fr; }
    .skill-editor-tabs { overflow-x: auto; white-space: nowrap; }
    .seteb { padding: 10px 12px; }
    .code-editor-wrap .CodeMirror { height: 280px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════
   iOS / iPhone — safe-areas, touch targets, arreglos específicos
   Estos overrides aplican siempre que haya safe-area-inset disponible
   (iPhone, iPad Pro, algunos Android). NO usamos max-width media query
   porque el notch puede aparecer en landscape también.
   ════════════════════════════════════════════════════════════ */

/* HUD: respeta el notch / Dynamic Island */
.hud {
    padding-top: max(18px, env(safe-area-inset-top, 18px));
}

/* Barra de input: respeta el home indicator */
.input-bar {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
}

/* Settings overlay: respeta safe areas en fullscreen móvil */
@media (max-width: 767px) {
    .settings-panel {
        top: env(safe-area-inset-top, 0);
        bottom: env(safe-area-inset-bottom, 0);
        left: env(safe-area-inset-left, 0);
        right: env(safe-area-inset-right, 0);
    }
    .settings-close {
        top: max(8px, env(safe-area-inset-top, 8px));
        right: max(8px, env(safe-area-inset-right, 8px));
    }

    /* Touch targets a 44px (norma iOS HIG) */
    .settings-trigger,
    .panel-toggle,
    #send-btn, #reset-btn, #mic-btn,
    .settings-close,
    .btn,
    .step-btn {
        min-width: 44px;
        min-height: 44px;
    }
    .btn { padding: 10px 16px; }

    /* Dialogue panel: respeta safe areas top/bottom cuando está en fullscreen */
    .dialogue-panel {
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* HUD móvil: que el contador de costes no se coma el espacio del título */
    .hud-cost {
        padding: 5px 9px;
        min-height: 26px;
        margin-right: 6px;
    }

    /* Subtítulo: bajar más para no chocar con teclado */
    .subtitle-overlay {
        bottom: 12%;
        font-size: clamp(14px, 4vw, 18px);
    }

    /* Stage: brackets más pequeños para iPhone */
    .stage::before, .stage::after {
        width: 12px; height: 12px;
    }

    /* Inputs siempre 16px+ para evitar zoom de iOS al focusear */
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Editor de skills: acciones que wrappeen si no caben */
    .skill-editor-actions {
        flex-wrap: wrap;
    }
    .skill-editor-actions .btn,
    .skill-editor-actions .btn-ghost,
    .skill-editor-actions .btn-danger {
        flex: 1 1 auto;
    }

    /* Tabs internas del editor: scroll horizontal */
    .skill-editor-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .skill-editor-tabs::-webkit-scrollbar { display: none; }

    /* Cards de skills: una columna, padding más cómodo */
    .skill-card { padding: 16px; }

    /* CodeMirror más alto en mobile (la edición es más cómoda) */
    .code-editor-wrap .CodeMirror { height: 320px; }

    /* HUD center: si falta espacio, ocultar también el subtítulo de cabecera ya estaba */
    .hud-center h1 { letter-spacing: 8px; }
}

/* iPhone pequeño en portrait */
@media (max-width: 380px) {
    .hud {
        grid-template-columns: auto 1fr auto;
    }
    .hud-center h1 { font-size: clamp(18px, 6vw, 22px); letter-spacing: 6px; }
    .hud-cost { font-size: 9px; padding: 4px 7px; }
    .input-wrap { padding: 4px 8px; }
    .input-wrap > * { flex-shrink: 0; }
    #user-input { min-width: 0; }

    /* Reducir el panel de settings en pantalla muy pequeña */
    .settings-content { padding: 14px 12px 24px; }
    .settings-tab { padding: 12px 10px; font-size: 10px; letter-spacing: 1.5px; }
}

/* Modo apaisado en iPhone (altura corta) */
@media (max-height: 500px) and (orientation: landscape) {
    .hud { padding: 8px 16px; }
    .hud-center h1 { font-size: 18px; letter-spacing: 6px; }
    .hud-center .subtitle { display: none; }
    .input-bar { padding: 8px 16px max(8px, env(safe-area-inset-bottom, 8px)); }
    .stage::before, .stage::after { display: none; }
    .subtitle-overlay { bottom: 4%; font-size: 14px; }
}

/* Hover effects fuera en touch (para no quedarse pegados) */
@media (hover: none) {
    .skill-card:hover { transform: none; }
    .settings-trigger:hover { transform: none; }
    .model-card:hover { transform: none; }
}

/* ──────── Logs viewer ──────── */
.logs-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.logs-toolbar select {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 4px;
    color: var(--jarvis-text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    padding: 8px 10px;
}
.logs-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 60vh;
    overflow-y: auto;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 4px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
}
.log-entry {
    display: grid;
    grid-template-columns: 80px 60px 80px 1fr;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 3px;
    border-left: 2px solid transparent;
    transition: background 0.15s;
    align-items: start;
}
.log-entry:hover { background: rgba(var(--accent-rgb), 0.06); }
.log-entry.error { border-left-color: var(--jarvis-error); }
.log-entry.warn  { border-left-color: var(--jarvis-warning); }
.log-entry.info  { border-left-color: var(--jarvis-cyan); }
.log-entry.debug { border-left-color: var(--jarvis-text-dim); }
.log-entry .ts  { color: var(--jarvis-text-dim); font-size: 10px; }
.log-entry .lev { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.log-entry.error .lev { color: var(--jarvis-error); }
.log-entry.warn  .lev { color: var(--jarvis-warning); }
.log-entry.info  .lev { color: var(--jarvis-cyan); }
.log-entry.debug .lev { color: var(--jarvis-text-dim); }
.log-entry .cat { color: var(--jarvis-text-dim); font-size: 10px; }
.log-entry .msg { color: var(--jarvis-text); word-break: break-word; }
.log-entry .det {
    grid-column: 4 / 5;
    margin-top: 4px;
    font-size: 10px;
    color: var(--jarvis-text-dim);
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 8px;
    border-radius: 3px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}
.log-entry.expanded .det { display: block; }
.log-entry .toggle-det {
    grid-column: 4 / 5;
    margin-top: 4px;
    font-size: 9px;
    color: var(--jarvis-cyan);
    cursor: pointer;
    user-select: none;
    letter-spacing: 1px;
}
.logs-empty {
    text-align: center;
    color: var(--jarvis-text-dim);
    padding: 30px 10px;
    font-size: 12px;
}

@media (max-width: 767px) {
    .log-entry {
        grid-template-columns: 60px 50px 70px 1fr;
        font-size: 11px;
    }
    .log-entry .ts { font-size: 9px; }
}

/* ──────── Botón ▶ en cada respuesta de JARVIS ──────── */
.msg.jarvis {
    position: relative;
    /* deja espacio a la derecha para el botón */
    padding-right: 38px;
}
.msg-play-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: var(--jarvis-cyan);
    border-radius: 50%;
    cursor: pointer;
    font-size: 10px;
    line-height: 0;
    padding: 0;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.msg-play-btn:hover {
    background: rgba(var(--accent-rgb), 0.2);
    box-shadow: 0 0 10px var(--jarvis-cyan-glow);
    transform: scale(1.08);
}
.msg-play-btn[data-playing="1"] {
    background: rgba(var(--accent-rgb), 0.25);
    border-color: var(--jarvis-cyan);
    box-shadow: 0 0 12px var(--jarvis-cyan-glow);
}

/* Botón copiar al portapapeles, justo debajo del ▶ */
.msg-copy-btn {
    position: absolute;
    top: 38px;
    right: 8px;
    width: 26px;
    height: 26px;
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: var(--jarvis-text-dim);
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 0;
    padding: 0;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.msg-copy-btn:hover {
    background: rgba(var(--accent-rgb), 0.18);
    color: var(--jarvis-cyan);
    box-shadow: 0 0 10px var(--jarvis-cyan-glow);
    transform: scale(1.08);
}
.msg-copy-btn.copied {
    color: #9DFF9D;
    border-color: rgba(157, 255, 157, 0.6);
    box-shadow: 0 0 10px rgba(157, 255, 157, 0.4);
}
@media (max-width: 767px) {
    .msg-copy-btn {
        width: 32px; height: 32px;
        font-size: 14px;
        top: 44px; right: 6px;
    }
    .msg.jarvis { padding-right: 44px; }
}

.msg-text { display: block; }

@media (max-width: 767px) {
    .msg-play-btn {
        width: 32px; height: 32px;
        font-size: 11px;
        top: 6px; right: 6px;
    }
    .msg.jarvis { padding-right: 44px; }
}

/* ──────── Botón de Modo Conversación por Voz ──────── */
.voice-mode-btn {
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: var(--jarvis-cyan);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    font-size: 16px;
    transition: all 0.2s;
    position: relative;
}
.voice-mode-btn:hover {
    background: rgba(var(--accent-rgb), 0.15);
    box-shadow: 0 0 12px var(--jarvis-cyan-glow);
}
.voice-mode-btn:active { transform: scale(0.95); }

.voice-mode-btn.active {
    background: rgba(var(--accent-rgb), 0.25);
    border-color: var(--jarvis-cyan);
    color: var(--jarvis-cyan);
    box-shadow:
        0 0 16px var(--jarvis-cyan-glow),
        inset 0 0 12px rgba(var(--accent-rgb), 0.15);
}
.voice-mode-btn.active::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 6px;
    border: 1.5px solid var(--jarvis-cyan);
    animation: voiceModePulse 1.6s ease-out infinite;
    pointer-events: none;
}
@keyframes voiceModePulse {
    0%   { opacity: 0.9; transform: scale(1);   }
    100% { opacity: 0;   transform: scale(1.45);}
}

@media (max-width: 767px) {
    .voice-mode-btn {
        width: 44px;
        height: 44px;
    }
}

/* ──────── Push-to-talk toast (modo conversación) ────────
   Se muestra mientras el usuario mantiene pulsada la barra espaciadora
   para grabar manualmente. Discreto, abajo-centro, fuera del subtítulo. */
.voice-ptt-toast {
    position: fixed;
    bottom: 96px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    padding: 6px 14px;
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    background: rgba(2, 7, 13, 0.78);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    letter-spacing: 0.6px;
    border-radius: 999px;
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 9000;
}
.voice-ptt-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ════════════════════════════════════════════════════════════
   FIX RESPONSIVE CRÍTICO — overrides finales (orden de cascada)
   El problema: flex children con min-width:auto (default) no se
   pueden encoger por debajo de su contenido. Si el placeholder
   del input mide 250px, fuerza al input-bar a expandirse.
   Añadimos `min-width: 0` defensivo en todos los puntos clave +
   overflow-x: hidden de seguridad.
   ════════════════════════════════════════════════════════════ */

/* Cinturón de seguridad: nada puede causar scroll horizontal */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Input field: que pueda encogerse por debajo del placeholder */
#user-input {
    min-width: 0;
    flex: 1 1 0;
}

/* Botones del input bar: tamaño consistente y no encogibles bajo touch min */
#mic-btn,
#voice-mode-btn,
#send-btn,
#reset-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

/* Prompt prefix también flex-shrink: 0 */
.prompt-prefix {
    flex-shrink: 0;
}

/* HUD: que ningún hijo pueda hacer overflow */
.hud > * {
    min-width: 0;
}
.hud-left, .hud-right { overflow: hidden; }
.hud-right > div {
    min-width: 0;
    overflow: hidden;
}

/* La pill de coste y el botón settings: no encogerlos */
.hud-cost,
.settings-trigger {
    flex-shrink: 0;
}

/* ──── Mobile-first móvil pequeño (≤767px) ──── */
@media (max-width: 767px) {

    /* Botones del input a 40×40 (touch friendly pero ahorrando espacio) */
    #mic-btn,
    #voice-mode-btn,
    #send-btn,
    #reset-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    /* En iPhone pequeño ocultamos el reset (queda accesible vía el header del panel
       de diálogo cuando está abierto, no es esencial en la barra). */
    #reset-btn { display: none; }

    /* Input bar: gap menor para que entren todos */
    .input-wrap {
        gap: 5px;
        padding: 4px 8px;
    }

    /* HUD: si en mobile la cost-pill se ve raro, la mantenemos sólo si hay sitio */
    .hud-cost {
        font-size: 10px;
        padding: 3px 7px;
    }
    .hud-right > div { gap: 6px; }
}

/* ──── Mobile muy pequeño (≤380px, iPhone SE 1ª gen, etc) ──── */
@media (max-width: 380px) {
    /* Reducimos aún más */
    #mic-btn,
    #voice-mode-btn,
    #send-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        font-size: 14px;
    }

    .input-wrap { gap: 4px; padding: 3px 6px; }

    /* HUD: ocultamos la pill de costes en pantallas mínimas (queda visible en el panel) */
    .hud-cost { display: none; }

    /* Título de JARVIS más compacto */
    .hud-center h1 {
        font-size: clamp(14px, 5vw, 18px);
        letter-spacing: 4px;
    }

    /* Settings trigger más pequeño */
    .settings-trigger {
        width: 36px;
        height: 36px;
        margin-left: 6px;
    }
}

/* ──── Body no debe heredar los safe-area paddings que metí antes en
   horizontal: pueden romper el layout si están duplicados ──── */
body {
    /* En portrait el inset lateral suele ser 0; mantengo solo el indispensable
       para el HUD y la input-bar internamente. */
    padding-left: 0;
    padding-right: 0;
}
.hud {
    padding-left: max(14px, env(safe-area-inset-left, 14px));
    padding-right: max(14px, env(safe-area-inset-right, 14px));
}
.input-bar {
    padding-left: max(14px, env(safe-area-inset-left, 14px));
    padding-right: max(14px, env(safe-area-inset-right, 14px));
}

/* En landscape con notch, los brackets del stage se quedan dentro del safe area */
@media (orientation: landscape) {
    .stage::before { left: max(14px, env(safe-area-inset-left, 14px)); top: 14px; }
    .stage::after  { right: max(14px, env(safe-area-inset-right, 14px)); bottom: 14px; }
}

/* ════════════════════════════════════════════════════════════
   Claude Code provider — perm cards + tool badges en chat
   ════════════════════════════════════════════════════════════ */
.cc-permission-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.cc-advanced {
    margin: 10px 0 18px;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 4px;
    padding: 0;
    background: rgba(0, 0, 0, 0.2);
}
.cc-advanced summary {
    cursor: pointer;
    padding: 10px 14px;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--jarvis-text-dim);
    user-select: none;
    text-transform: uppercase;
    list-style: none;
}
.cc-advanced summary::before {
    content: "▸";
    margin-right: 8px;
    color: var(--jarvis-cyan);
    transition: transform 0.15s;
    display: inline-block;
}
.cc-advanced[open] summary::before { content: "▾"; }
.cc-advanced summary:hover { color: var(--jarvis-text); }
.cc-advanced > *:not(summary) {
    padding: 0 14px;
}
.cc-advanced > *:last-child { padding-bottom: 14px; }
.cc-perm-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 4px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.cc-perm-card:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.cc-perm-card.selected {
    border-color: var(--jarvis-cyan);
    background: rgba(var(--accent-rgb), 0.08);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.15);
}
.cc-perm-card.cc-perm-danger.selected {
    border-color: var(--jarvis-error);
    box-shadow: 0 0 16px rgba(255, 77, 109, 0.3);
}
.cc-perm-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    color: var(--jarvis-cyan);
    margin-bottom: 4px;
}
.cc-perm-card.cc-perm-danger .cc-perm-name { color: var(--jarvis-error); }
.cc-perm-desc {
    font-size: 11px;
    color: var(--jarvis-text-dim);
    line-height: 1.5;
}

/* Tool badges en el chat: cuando Claude Code usa una tool.
   Por defecto OCULTOS — el usuario los ve solo si pulsa el botón "RAW" del
   header del chat. Mientras tanto, el thinking-indicator (palabra rotativa
   tipo "pensando · leyendo archivos") es la única señal visible. */
.tool-badge {
    display: none;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 12px;
    font-size: 11px;
    color: var(--jarvis-text-dim);
    font-family: 'Share Tech Mono', monospace;
    animation: msgIn 0.25s ease-out;
    max-width: 100%;
    word-break: break-word;
}
body.show-raw .tool-badge { display: inline-flex; }
.tool-badge .tool-icon { font-size: 12px; }
.tool-badge .tool-name { color: var(--jarvis-cyan); font-weight: 700; letter-spacing: 1px; }
.tool-badge .tool-arg { color: var(--jarvis-text); opacity: 0.85; }
.tool-badge.running .tool-icon::after {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--jarvis-cyan);
    animation: pulse-dot 1s infinite;
    margin-left: 4px;
    vertical-align: middle;
}
.tool-badge.done {
    background: rgba(93, 255, 163, 0.05);
    border-color: rgba(93, 255, 163, 0.2);
}
.tool-badge.done .tool-name { color: var(--jarvis-success); }
.tool-badge.error {
    background: rgba(255, 77, 109, 0.05);
    border-color: rgba(255, 77, 109, 0.3);
}
.tool-badge.error .tool-name { color: var(--jarvis-error); }

/* Sub-agente: indentado, indica que es ejecutado por una Task padre */
.tool-badge.nested {
    margin-left: 28px;
    border-left: 2px solid rgba(var(--accent-rgb), 0.3);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: rgba(var(--accent-rgb), 0.04);
}

/* Toggle expandible en cada badge */
.tool-toggle {
    cursor: pointer;
    width: 14px; height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--jarvis-text-dim);
    font-size: 10px;
    margin-left: 4px;
    border-radius: 3px;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}
.tool-toggle::before {
    content: "▸";
}
.tool-toggle:hover {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--jarvis-cyan);
}
.tool-badge.expanded .tool-toggle::before { content: "▾"; }

/* Detalle expandible: contenido del tool_result */
.tool-detail {
    display: none;
    flex: 1 1 100%;
    margin-top: 6px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    font-size: 10px;
    color: var(--jarvis-text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow-y: auto;
    line-height: 1.5;
}
.tool-badge.expanded .tool-detail { display: block; }
.tool-badge.error .tool-detail { color: var(--jarvis-error); }
.tool-badge .tool-detail::-webkit-scrollbar { width: 4px; }
.tool-badge .tool-detail::-webkit-scrollbar-thumb { background: var(--jarvis-cyan-dim); border-radius: 2px; }

/* ════════════════════════════════════════════════════════════
   Provider grid: jerarquía visual entre default y avanzados
   ════════════════════════════════════════════════════════════ */
.provider-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}
.provider-cat-badge {
    font-size: 9px;
    letter-spacing: 1.5px;
    padding: 2px 7px;
    border-radius: 8px;
    flex-shrink: 0;
    text-transform: uppercase;
    font-family: 'Share Tech Mono', monospace;
}
.provider-cat-badge.cat-primary {
    background: rgba(var(--accent-rgb), 0.15);
    border: 1px solid var(--jarvis-cyan);
    color: var(--jarvis-cyan);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
}
.provider-cat-badge.cat-advanced {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: var(--jarvis-text-dim);
}

/* Card del provider RECOMENDADO: borde más fuerte, glow sutil */
.provider-card.cat-primary {
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.06);
}
.provider-card.cat-primary:hover {
    border-color: var(--jarvis-cyan);
    box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.18);
}

/* Cards "DIRECTO/LOCAL/etc": un poco más tenues */
.provider-card.cat-advanced { opacity: 0.85; }
.provider-card.cat-advanced:hover { opacity: 1; }
.provider-card.cat-advanced.selected { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   Debug footer + selector de tamaño del orbe
   ════════════════════════════════════════════════════════════ */

/* Footer de debug bajo cada mensaje JARVIS cuando debug_mode = on */
.msg-debug {
    margin-top: 8px;
    padding: 6px 8px;
    border-top: 1px dashed rgba(var(--accent-rgb), 0.2);
    font-size: 9px;
    color: var(--jarvis-text-dim);
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 1px;
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.msg-debug .dbg-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 8px;
}
.msg-debug .dbg-key { color: var(--jarvis-text-dim); opacity: 0.7; }
.msg-debug .dbg-val { color: var(--jarvis-cyan); }
.msg-debug .dbg-cost { color: var(--jarvis-success); }
.msg-debug .dbg-warn { color: var(--jarvis-warning); }

/* Selector de tamaño del orbe (4 botones) */
.orb-size-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.orb-size-btn {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: var(--jarvis-text);
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 14px 0;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
}
.orb-size-btn:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.05);
}
.orb-size-btn.active {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: var(--jarvis-cyan);
    color: var(--jarvis-cyan);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.2);
    text-shadow: 0 0 6px var(--jarvis-cyan-glow);
}

/* ════════════════════════════════════════════════════════════
   Pestaña Sistema: secciones colapsables, listas, formularios
   ════════════════════════════════════════════════════════════ */
.sys-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.sys-section {
    margin-bottom: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
}
.sys-section summary {
    cursor: pointer;
    padding: 12px 14px;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--jarvis-cyan);
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-shadow: 0 0 6px var(--jarvis-cyan-glow);
}
.sys-section summary::after {
    content: "▸";
    color: var(--jarvis-text-dim);
    margin-left: 8px;
    transition: transform 0.15s;
}
.sys-section[open] summary::after { content: "▾"; }
.sys-count {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--jarvis-text-dim);
    background: rgba(var(--accent-rgb), 0.08);
    padding: 2px 8px;
    border-radius: 8px;
    margin-left: auto;
}
.sys-section > *:not(summary) {
    padding: 0 14px;
}
.sys-section > *:last-child { padding-bottom: 14px; }

.sys-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.sys-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 3px;
    padding: 10px 12px;
    transition: border-color 0.15s;
}
.sys-item:hover { border-color: rgba(var(--accent-rgb), 0.3); }
.sys-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.sys-item-name {
    font-family: 'Share Tech Mono', monospace;
    color: var(--jarvis-text);
    font-size: 13px;
    flex: 1;
    word-break: break-all;
}
.sys-item-source {
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--jarvis-text-dim);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 8px;
    padding: 2px 7px;
    flex-shrink: 0;
    text-transform: uppercase;
    white-space: nowrap;
}
.sys-item-status {
    font-size: 9px;
    letter-spacing: 1px;
    padding: 2px 7px;
    border-radius: 8px;
    flex-shrink: 0;
}
.sys-item-status.ok { background: rgba(93, 255, 163, 0.1); border: 1px solid rgba(93, 255, 163, 0.3); color: var(--jarvis-success); }
.sys-item-status.warn { background: rgba(255, 184, 77, 0.1); border: 1px solid rgba(255, 184, 77, 0.3); color: var(--jarvis-warning); }
.sys-item-desc {
    font-size: 11px;
    color: var(--jarvis-text-dim);
    margin-top: 6px;
    line-height: 1.5;
}
.sys-item-body {
    display: none;
    margin-top: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 3px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--jarvis-text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow-y: auto;
    line-height: 1.5;
}
.sys-item.expanded .sys-item-body { display: block; }
.sys-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 10px;
    color: var(--jarvis-text-dim);
    margin-top: 4px;
}
.sys-item-action {
    background: transparent;
    border: 1px solid rgba(255, 77, 109, 0.3);
    color: var(--jarvis-error);
    cursor: pointer;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 3px;
    margin-left: 6px;
}
.sys-item-action:hover {
    background: rgba(255, 77, 109, 0.1);
}

/* Formulario inline para env / repo */
.env-form {
    display: grid;
    grid-template-columns: 1fr 1.5fr auto;
    gap: 8px;
    margin-bottom: 10px;
    align-items: stretch;
}
.env-form input {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 4px;
    color: var(--jarvis-text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    padding: 8px 10px;
    outline: none;
}
.env-form input:focus {
    border-color: var(--jarvis-cyan);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.2);
}

@media (max-width: 767px) {
    .env-form { grid-template-columns: 1fr; }
    .sys-item-head { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════
   Target selector (orquestador / proyecto activo) en el HUD
   ════════════════════════════════════════════════════════════ */
.hud-center {
    position: relative;  /* para anclar el dropdown */
}

.target-selector {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 14px;
    color: var(--jarvis-text-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    user-select: none;
    max-width: 90%;
    overflow: hidden;
}
.target-selector:hover {
    border-color: var(--jarvis-cyan);
    color: var(--jarvis-text);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.2);
}
.target-selector .target-icon {
    color: var(--jarvis-cyan);
    text-shadow: 0 0 4px var(--jarvis-cyan-glow);
    font-size: 8px;
}
.target-selector .target-label {
    color: var(--jarvis-cyan);
    text-shadow: 0 0 4px var(--jarvis-cyan-glow);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.target-selector .target-chevron {
    color: var(--jarvis-text-dim);
    font-size: 9px;
    transition: transform 0.15s;
}
.target-selector.open .target-chevron { transform: rotate(180deg); }

.target-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 240px;
    max-width: 90vw;
    background: rgba(2, 7, 13, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--jarvis-cyan);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(var(--accent-rgb), 0.18);
    padding: 6px;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
}
.target-dropdown.open {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.target-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--jarvis-text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    transition: background 0.12s;
}
.target-option:hover {
    background: rgba(var(--accent-rgb), 0.1);
}
.target-option.active {
    background: rgba(var(--accent-rgb), 0.16);
    color: var(--jarvis-cyan);
}
.target-option .target-option-icon {
    width: 16px;
    text-align: center;
    color: var(--jarvis-cyan);
    flex-shrink: 0;
}
.target-option .target-option-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.target-option .target-option-sub {
    font-size: 9px;
    color: var(--jarvis-text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.target-divider {
    height: 1px;
    background: rgba(var(--accent-rgb), 0.15);
    margin: 4px 6px;
}
.target-empty {
    padding: 10px 12px;
    color: var(--jarvis-text-dim);
    font-size: 11px;
    text-align: center;
}

@media (max-width: 767px) {
    .target-selector {
        font-size: 9px;
        padding: 3px 9px;
    }
    .target-selector .target-label {
        max-width: 120px;
    }
    .target-dropdown {
        min-width: 200px;
        font-size: 11px;
    }
}

/* ──────── FAB scroll-al-final ──────── */
.scroll-fab {
    position: absolute;
    bottom: 86px;
    right: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(2, 7, 13, 0.85);
    border: 1px solid rgba(var(--accent-rgb), 0.5);
    color: var(--jarvis-cyan);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 4;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px rgba(var(--accent-rgb), 0.25);
}
.scroll-fab.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.scroll-fab:hover {
    background: rgba(var(--accent-rgb), 0.18);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 16px rgba(var(--accent-rgb), 0.45);
}

/* En vista chat-only: el FAB se posiciona respecto al panel completo */
body.chat-only .scroll-fab {
    bottom: 96px;
    right: max(20px, calc((100% - 720px) / 2 + 20px));
}

/* ──────── Indicador "JARVIS está pensando…" ──────── */
.thinking-indicator {
    align-self: flex-start;
    max-width: 78%;
    padding: 12px 16px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 16px 16px 16px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: msgIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.thinking-indicator .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--jarvis-cyan);
    opacity: 0.4;
    animation: thinkingPulse 1.3s ease-in-out infinite;
}
.thinking-indicator .dot:nth-child(2) { animation-delay: 0.18s; }
.thinking-indicator .dot:nth-child(3) { animation-delay: 0.36s; }
.thinking-indicator .thinking-label {
    margin-left: 6px;
    font-size: 12px;
    color: var(--jarvis-cyan);
    letter-spacing: 0.4px;
    font-style: italic;
    text-shadow: 0 0 6px rgba(var(--accent-rgb), 0.35);
    transition: opacity 0.25s ease;
    animation: thinkingWordIn 0.45s ease-out;
}
.thinking-indicator .thinking-hint {
    color: var(--jarvis-text-dim);
    font-style: normal;
    text-shadow: none;
    margin-left: 2px;
    opacity: 0.75;
}
.thinking-indicator .thinking-label:empty {
    display: none;
}
@keyframes thinkingWordIn {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ──────── Botón RAW del header del chat ──────── */
.panel-raw-toggle {
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    color: rgba(var(--accent-rgb), 0.55);
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 1.5px;
    padding: 3px 8px;
    margin-left: auto;
    margin-right: 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.panel-raw-toggle:hover {
    color: var(--jarvis-cyan);
    border-color: rgba(var(--accent-rgb), 0.55);
}
.panel-raw-toggle.active {
    color: var(--jarvis-cyan);
    border-color: var(--jarvis-cyan);
    background: rgba(var(--accent-rgb), 0.15);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.30);
}
@keyframes thinkingPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
    40%           { opacity: 1.0; transform: scale(1.15); }
}

/* ──────── Modo focus ────────
   Solo orbe + voz. Oculta paneles, HUD, badges. Esc o "F" lo desactiva. */
body.focus-mode .hud-top,
body.focus-mode .dialogue-panel,
body.focus-mode .panel-toggle,
body.focus-mode #routing-badge,
body.focus-mode .external-chat-pill,
body.focus-mode #subtitle,
body.focus-mode .target-selector,
body.focus-mode .input-bar {
    display: none !important;
}
/* Indicador discreto arriba a la izquierda para recordar cómo salir */
body.focus-mode::before {
    content: "FOCUS · esc o F";
    position: fixed;
    top: 12px;
    left: 16px;
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(var(--accent-rgb), 0.4);
    z-index: 99;
    pointer-events: none;
    font-family: "Share Tech Mono", monospace;
}

/* ──────── Command palette del input (slash y @) ──────── */
.cmd-palette {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 6px;
    background: rgba(2, 7, 13, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    max-height: 280px;
    overflow-y: auto;
    z-index: 6;
    display: none;
}
.cmd-palette.open { display: block; }
.cmd-palette-header {
    padding: 6px 12px;
    font-size: 9.5px;
    letter-spacing: 1.5px;
    color: var(--jarvis-cyan);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
    background: rgba(var(--accent-rgb), 0.04);
}
.cmd-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    transition: background 0.1s;
}
.cmd-item.active {
    background: rgba(var(--accent-rgb), 0.18);
}
.cmd-item:hover {
    background: rgba(var(--accent-rgb), 0.12);
}
.cmd-item-key {
    color: var(--jarvis-cyan);
    font-family: "Share Tech Mono", monospace;
    font-size: 12px;
    min-width: 80px;
    flex-shrink: 0;
}
.cmd-item-desc {
    color: var(--jarvis-text-dim);
    font-size: 11.5px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ──────── Botón disimulado de wake word ────────
   Pequeño, abajo izquierda, casi invisible salvo en hover. Cuando la
   escucha está activa el icono late en cyan. */
.quick-wake-btn {
    position: fixed;
    bottom: 18px;
    left: 18px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.05);
    border: 1px solid rgba(var(--accent-rgb), 0.40);
    color: rgba(var(--accent-rgb), 0.70);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 4;
    opacity: 0.7;
    transition: opacity 0.25s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.quick-wake-btn:hover {
    opacity: 1;
    color: var(--jarvis-cyan);
    border-color: rgba(var(--accent-rgb), 0.6);
    transform: scale(1.08);
}
.quick-wake-btn.active {
    opacity: 1;
    color: var(--jarvis-cyan);
    border-color: var(--jarvis-cyan);
    box-shadow: 0 0 14px var(--jarvis-cyan-glow);
    animation: wakePulse 2.4s ease-in-out infinite;
}
@keyframes wakePulse {
    0%, 100% { box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4); }
    50%      { box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.8); }
}
/* En vista chat-only el botón se posiciona dentro del panel */
body.chat-only .quick-wake-btn {
    bottom: 90px;
    left: 18px;
}
/* En modo focus el botón se mantiene accesible (más visible) */
body.focus-mode .quick-wake-btn {
    opacity: 0.5;
}

/* ──────── Panel chat: drag handle + resize handle ──────── */
.panel-header {
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
}
.panel-drag-grip {
    color: var(--jarvis-text-dim);
    font-family: "Share Tech Mono", monospace;
    margin-right: 8px;
    opacity: 0.5;
    letter-spacing: -2px;
    font-size: 14px;
}
.panel-title {
    flex: 1;
    letter-spacing: 2px;
}

.panel-resize-handle {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 16px;
    height: 16px;
    cursor: nesw-resize;
    background:
        linear-gradient(45deg,
            transparent 40%,
            rgba(var(--accent-rgb), 0.45) 40%,
            rgba(var(--accent-rgb), 0.45) 50%,
            transparent 50%,
            transparent 60%,
            rgba(var(--accent-rgb), 0.45) 60%,
            rgba(var(--accent-rgb), 0.45) 70%,
            transparent 70%);
    z-index: 5;
}
.panel-resize-handle:hover {
    background:
        linear-gradient(45deg,
            transparent 40%,
            var(--jarvis-cyan) 40%,
            var(--jarvis-cyan) 50%,
            transparent 50%,
            transparent 60%,
            var(--jarvis-cyan) 60%,
            var(--jarvis-cyan) 70%,
            transparent 70%);
}
/* En modo chat-only no aplican drag ni resize */
body.chat-only .panel-header { cursor: default; }
body.chat-only .panel-drag-grip,
body.chat-only .panel-resize-handle { display: none; }

/* ──────── Tipografía dentro de burbujas (markdown render) ──────── */
.msg .msg-text > * { margin: 0; }
.msg .msg-text > * + * { margin-top: 0.6em; }
.msg .msg-text p { line-height: 1.55; }
.msg .msg-text strong { color: var(--jarvis-text); font-weight: 700; }
.msg .msg-text em { color: var(--jarvis-text); font-style: italic; }

.msg .msg-text code {
    font-family: "Share Tech Mono", "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.92em;
    background: rgba(0, 0, 0, 0.32);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    color: var(--jarvis-cyan);
}
.msg .msg-text pre {
    font-family: "Share Tech Mono", "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.88em;
    background: rgba(0, 0, 0, 0.45);
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    overflow-x: auto;
    line-height: 1.5;
    color: var(--jarvis-text);
    margin: 0.6em 0 !important;
}
.msg .msg-text pre code {
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    font-size: 1em;
}

.msg .msg-text ul,
.msg .msg-text ol {
    padding-left: 22px;
    line-height: 1.55;
}
.msg .msg-text li {
    margin: 2px 0;
}
.msg .msg-text ul ul,
.msg .msg-text ol ol,
.msg .msg-text ul ol,
.msg .msg-text ol ul {
    margin-top: 4px;
    margin-bottom: 4px;
}

.msg .msg-text blockquote {
    border-left: 3px solid rgba(var(--accent-rgb), 0.5);
    padding: 2px 0 2px 12px;
    color: var(--jarvis-text-dim);
    font-style: italic;
    margin: 0.6em 0 !important;
}

.msg .msg-text h1,
.msg .msg-text h2,
.msg .msg-text h3,
.msg .msg-text h4,
.msg .msg-text h5,
.msg .msg-text h6 {
    line-height: 1.3;
    color: var(--jarvis-cyan);
    letter-spacing: 0.3px;
    margin: 0.8em 0 0.3em !important;
    font-weight: 700;
}
.msg .msg-text h1 { font-size: 1.20em; }
.msg .msg-text h2 { font-size: 1.12em; }
.msg .msg-text h3 { font-size: 1.05em; }
.msg .msg-text h4,
.msg .msg-text h5,
.msg .msg-text h6 { font-size: 1em; opacity: 0.92; }

.msg .msg-text hr {
    border: 0;
    border-top: 1px dashed rgba(var(--accent-rgb), 0.30);
    margin: 0.8em 0 !important;
}

.msg .msg-text a {
    color: var(--jarvis-cyan);
    text-decoration: none;
    border-bottom: 1px dotted rgba(var(--accent-rgb), 0.5);
}
.msg .msg-text a:hover {
    border-bottom-style: solid;
    text-shadow: 0 0 8px var(--jarvis-cyan-glow);
}

/* ──────── Badges de estado de proyectos en el dropdown ──────── */
.state-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: "Share Tech Mono", monospace;
    font-weight: 700;
    vertical-align: middle;
}
.state-badge.state-progress {
    background: rgba(120, 230, 200, 0.18);
    color: #80E6BD;
    border: 1px solid rgba(120, 230, 200, 0.35);
}
.state-badge.state-paused {
    background: rgba(255, 200, 100, 0.18);
    color: #FFCC80;
    border: 1px solid rgba(255, 200, 100, 0.35);
}
.state-badge.state-blocked {
    background: rgba(255, 100, 100, 0.18);
    color: #FF9090;
    border: 1px solid rgba(255, 100, 100, 0.40);
}
.state-badge.state-done {
    background: rgba(150, 150, 255, 0.16);
    color: #B0B0FF;
    border: 1px solid rgba(150, 150, 255, 0.35);
    opacity: 0.8;
}

/* ──────── Wake words editor (chips) ──────── */
.wake-words-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 32px;
}
.wake-word-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.32);
    color: var(--jarvis-text);
    padding: 5px 10px 5px 12px;
    border-radius: 18px;
    font-size: 12.5px;
    letter-spacing: 0.3px;
    transition: background 0.15s;
}
.wake-word-chip button {
    background: transparent;
    border: none;
    color: var(--jarvis-text-dim);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}
.wake-word-chip button:hover {
    color: #FF9090;
}
.wake-word-chip:hover {
    background: rgba(var(--accent-rgb), 0.18);
}

/* ──────── Programación (cronjobs) ──────── */
.schedules-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.schedules-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.schedule-card {
    background: rgba(var(--accent-rgb), 0.04);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 6px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: border-color 0.15s, background 0.15s;
}
.schedule-card.disabled {
    opacity: 0.55;
}
.schedule-card:hover {
    background: rgba(var(--accent-rgb), 0.07);
    border-color: rgba(var(--accent-rgb), 0.35);
}
.schedule-card-info {
    flex: 1;
    min-width: 0;
}
.schedule-card-name {
    font-weight: 600;
    color: var(--jarvis-text);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.schedule-card-when {
    color: var(--jarvis-cyan);
    font-size: 11.5px;
    letter-spacing: 0.4px;
    margin-top: 2px;
}
.schedule-card-prompt {
    color: var(--jarvis-text-dim);
    font-size: 12px;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.schedule-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.schedule-card-actions button {
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: var(--jarvis-text);
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}
.schedule-card-actions button:hover {
    background: rgba(var(--accent-rgb), 0.18);
    color: var(--jarvis-cyan);
}
.schedule-tag {
    font-size: 9.5px;
    letter-spacing: 1.5px;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(120, 230, 200, 0.18);
    color: #80E6BD;
    border: 1px solid rgba(120, 230, 200, 0.35);
}
.schedule-tag.off {
    background: rgba(255, 100, 100, 0.12);
    color: #FF9090;
    border-color: rgba(255, 100, 100, 0.3);
}
.schedule-tag.voice {
    background: rgba(var(--accent-rgb), 0.18);
    color: var(--jarvis-cyan);
    border-color: rgba(var(--accent-rgb), 0.4);
}

.schedule-editor {
    background: rgba(var(--accent-rgb), 0.04);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 6px;
    padding: 18px 20px;
    margin-top: 18px;
}
.schedule-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.schedule-editor-head h4 {
    margin: 0;
    color: var(--jarvis-cyan);
    letter-spacing: 1.5px;
}
.schedule-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}
.weekdays-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wd-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    color: var(--jarvis-text-dim);
    transition: all 0.15s;
}
.wd-pill input { display: none; }
.wd-pill:has(input:checked) {
    background: rgba(var(--accent-rgb), 0.25);
    color: var(--jarvis-cyan);
    border-color: var(--jarvis-cyan);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
}

/* Burbuja de mensaje proactivo (JARVIS habla solo) */
.msg.jarvis.proactive {
    border-left: 3px solid var(--jarvis-cyan);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.08));
}
.msg.jarvis.proactive::before {
    content: "PROGRAMADO · " attr(data-schedule-name);
    display: block;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--jarvis-cyan);
    margin-bottom: 6px;
    opacity: 0.85;
}

/* ──────── Drag & drop overlay ──────── */
.drop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 7, 13, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.drop-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}
.drop-overlay-inner {
    border: 2px dashed rgba(var(--accent-rgb), 0.6);
    border-radius: 24px;
    padding: 64px 80px;
    text-align: center;
    background: rgba(var(--accent-rgb), 0.04);
    box-shadow: 0 0 60px rgba(var(--accent-rgb), 0.25);
}
.drop-overlay .drop-icon {
    font-size: 72px;
    color: var(--jarvis-cyan);
    margin-bottom: 16px;
    text-shadow: 0 0 24px var(--jarvis-cyan-glow);
    animation: dropBob 1.2s ease-in-out infinite;
}
@keyframes dropBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.drop-overlay .drop-text {
    font-size: 18px;
    color: var(--jarvis-text);
    letter-spacing: 1px;
}

/* ──────── Pill "chat en otra pantalla" ──────── */
.external-chat-pill {
    position: fixed;
    top: 16px;
    right: 16px;
    background: rgba(2, 7, 13, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    color: var(--jarvis-text);
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 12px;
    letter-spacing: 0.5px;
    z-index: 5;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.external-chat-pill.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ──────── Vista /chat (chat-only) ────────
   El orbe, el HUD, los selectores de target, el subtítulo flotante y los
   badges de tool-use desaparecen. El panel de diálogo ocupa toda la ventana
   y nunca está colapsado. La caja de input se mantiene para que se pueda
   seguir conversando desde esta vista. */
body.chat-only #orb-canvas,
body.chat-only #subtitle,
body.chat-only #routing-badge,
body.chat-only #panel-toggle,
body.chat-only #panel-close,
body.chat-only .hud-top,
body.chat-only .target-selector {
    display: none !important;
}
/* En /chat MANTENEMOS mic y voice-mode operativos: en el móvil es donde más
   sentido tiene hablarle a JARVIS, y la vista chat-only no debería capar
   esa funcionalidad. */
body.chat-only #voice-mode-btn,
body.chat-only #mic-btn {
    display: flex;
}

/* ──────── Vista /chat: panel a viewport completo ────────
   La idea: misma estética del panel principal, pero ocupando toda la
   ventana. Mantenemos `display: flex` y `flex-direction: column` heredados
   del .dialogue-panel base. La input-bar vive FUERA del panel (en el HTML)
   así que la fijamos abajo con position: fixed. */

body.chat-only {
    display: block !important;
    min-height: 100dvh;
}

body.chat-only .dialogue-panel,
body.chat-only .dialogue-panel.collapsed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 96px !important;     /* deja espacio para la input-bar fija */
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 1;
    background: radial-gradient(ellipse at top,
        rgba(var(--accent-rgb), 0.04) 0%,
        rgba(2, 7, 13, 0.0) 60%);
}

/* Header: safe-area en iOS para el notch + branding visible */
body.chat-only .panel-header {
    padding: calc(14px + env(safe-area-inset-top, 0)) 18px 12px;
    background: rgba(2, 7, 13, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
    position: sticky;
    top: 0;
    z-index: 6;
}
body.chat-only .panel-title {
    font-family: 'Orbitron', sans-serif;
    color: var(--jarvis-cyan);
    text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
    font-size: 14px;
    letter-spacing: 4px;
}

/* Mensajes: más respiración para que el chat se sienta amplio */
body.chat-only .dialogue {
    padding: 18px 18px 24px;
    gap: 14px;
}
body.chat-only .msg {
    max-width: min(680px, 88%);
    font-size: 15px;
    line-height: 1.55;
}

/* Input-bar fija al fondo del viewport, centrada con max-width */
body.chat-only .input-bar {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0));
    z-index: 5;
    background: linear-gradient(0deg, rgba(2, 7, 13, 0.97) 0%, rgba(2, 7, 13, 0.78) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(var(--accent-rgb), 0.22);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.55);
}
body.chat-only .input-wrap {
    max-width: 720px;
    margin: 0 auto;
}

/* Indicador thinking en /chat: centrado, más prominente porque es la
   única señal visible mientras se trabaja con tool badges ocultos. */
body.chat-only .thinking-indicator {
    align-self: center;
    margin: 6px 0;
    padding: 14px 22px;
    border-radius: 20px;
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.18);
}
body.chat-only .thinking-indicator .thinking-label {
    font-size: 14px;
}

/* ──────── HUD: SecondBrain trigger ──────── */
.hud-secondbrain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    width: 30px;
    height: 26px;
    padding: 0;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 12px;
    font-size: 14px;
    color: var(--jarvis-cyan);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.hud-secondbrain:hover {
    background: rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 0 12px var(--jarvis-cyan-glow);
}

/* ──────── Modal: SecondBrain ──────── */
.secondbrain-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 7, 13, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 80;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 24px 24px;
    overflow-y: auto;
}
.secondbrain-overlay.open { display: flex; }
.secondbrain-panel {
    position: relative;
    background: rgba(2, 7, 13, 0.92);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 6px;
    width: 100%;
    max-width: 980px;
    padding: 28px 32px 36px;
    box-shadow: 0 0 32px rgba(var(--accent-rgb), 0.18);
}
.secondbrain-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
}
.secondbrain-header h2 {
    font-family: 'Orbitron', sans-serif;
    color: var(--jarvis-cyan);
    margin: 0;
    letter-spacing: 2px;
    font-size: 20px;
}
#secondbrain-sub {
    color: rgba(var(--accent-rgb), 0.6);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sb-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
    margin-bottom: 18px;
}
.sb-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
    color: rgba(var(--accent-rgb), 0.55);
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.sb-tab:hover { color: var(--jarvis-cyan); }
.sb-tab.active {
    color: var(--jarvis-cyan);
    border-bottom-color: var(--jarvis-cyan);
}

/* Overview */
.sb-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr) 2fr;
    gap: 12px;
    margin-bottom: 18px;
}
.sb-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 4px;
    padding: 12px 14px;
}
.sb-card-wide { grid-column: 3 / 4; }
.sb-label {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: rgba(var(--accent-rgb), 0.5);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.sb-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    color: var(--jarvis-cyan);
}
.sb-value-sm { font-size: 12px; line-height: 1.4; }

.sb-dropzone {
    border: 2px dashed rgba(var(--accent-rgb), 0.35);
    border-radius: 6px;
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    margin-bottom: 14px;
}
.sb-dropzone:hover, .sb-dropzone.dragover {
    border-color: var(--jarvis-cyan);
    background: rgba(var(--accent-rgb), 0.06);
}
.sb-dropzone-icon {
    font-size: 26px;
    color: var(--jarvis-cyan);
    margin-bottom: 8px;
}
.sb-dropzone-title {
    font-family: 'Orbitron', sans-serif;
    color: var(--jarvis-cyan);
    letter-spacing: 1.5px;
    font-size: 14px;
    margin-bottom: 4px;
}
.sb-dropzone-sub {
    color: rgba(var(--accent-rgb), 0.55);
    font-size: 11px;
}
.sb-dropzone-sub code {
    color: var(--jarvis-cyan);
    background: rgba(var(--accent-rgb), 0.08);
    padding: 0 4px;
    border-radius: 2px;
}
.sb-hint {
    font-size: 12px;
    color: rgba(var(--accent-rgb), 0.7);
    line-height: 1.5;
    padding: 10px 14px;
    background: rgba(var(--accent-rgb), 0.04);
    border-left: 2px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 2px;
    margin-bottom: 14px;
}
.sb-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Wiki */
.sb-split {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 14px;
    min-height: 60vh;
}
.sb-list, .sb-list-raw, .sb-log {
    max-height: 70vh;
    overflow-y: auto;
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 4px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.2);
}
.sb-list-section {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(var(--accent-rgb), 0.5);
    padding: 8px 8px 4px;
}
.sb-list-item {
    display: block;
    padding: 6px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s;
}
.sb-list-item:hover { background: rgba(var(--accent-rgb), 0.08); }
.sb-list-item.active { background: rgba(var(--accent-rgb), 0.18); }
.sb-li-name {
    display: block;
    color: var(--jarvis-cyan);
    font-size: 13px;
}
.sb-li-sub {
    display: block;
    color: rgba(var(--accent-rgb), 0.45);
    font-size: 10px;
}
.sb-viewer {
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    padding: 0;
    overflow-y: auto;
    max-height: 70vh;
}
.sb-viewer-header {
    padding: 8px 14px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
    color: rgba(var(--accent-rgb), 0.65);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
}
.sb-viewer-empty {
    padding: 32px;
    text-align: center;
    color: rgba(var(--accent-rgb), 0.45);
}
.sb-viewer-md {
    padding: 16px 22px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.55;
    font-size: 14px;
}
.sb-viewer-md h1, .sb-viewer-md h2, .sb-viewer-md h3 {
    color: var(--jarvis-cyan);
    font-family: 'Orbitron', sans-serif;
    margin: 18px 0 8px;
}
.sb-viewer-md a { color: var(--jarvis-cyan); }
.sb-viewer-md code {
    background: rgba(var(--accent-rgb), 0.10);
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 13px;
}
.sb-viewer-md pre {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    padding: 10px 12px;
    border-radius: 3px;
    overflow-x: auto;
}
.sb-wikilink {
    border-bottom: 1px dashed rgba(var(--accent-rgb), 0.4);
    cursor: pointer;
}
.sb-empty {
    padding: 18px;
    text-align: center;
    color: rgba(var(--accent-rgb), 0.45);
    font-size: 12px;
}

/* Raw list */
.sb-raw-row {
    display: grid;
    grid-template-columns: 1fr auto 28px;
    gap: 12px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.10);
}
.sb-raw-name {
    color: var(--jarvis-cyan);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sb-raw-meta {
    color: rgba(var(--accent-rgb), 0.5);
    font-size: 10px;
}
.sb-raw-del {
    background: transparent;
    border: 1px solid rgba(var(--jarvis-error), 0.4);
    color: var(--jarvis-error);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
}
.sb-raw-del:hover {
    background: rgba(var(--jarvis-error-rgb, 230, 80, 80), 0.15);
}

/* Log */
.sb-log-row {
    border-left: 2px solid rgba(var(--accent-rgb), 0.25);
    padding: 8px 12px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.2);
}
.sb-log-head {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 12px;
}
.sb-log-date {
    color: rgba(var(--accent-rgb), 0.55);
    font-family: 'Share Tech Mono', monospace;
}
.sb-log-kind {
    color: var(--jarvis-cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
}
.sb-log-title { color: rgba(255,255,255,0.9); }
.sb-log-body {
    color: rgba(var(--accent-rgb), 0.65);
    font-size: 11px;
    margin-top: 4px;
    white-space: pre-wrap;
}
.sb-log-ingest { border-left-color: var(--jarvis-cyan); }
.sb-log-query  { border-left-color: rgba(var(--accent-rgb), 0.5); }
.sb-log-lint   { border-left-color: var(--jarvis-warning); }
.sb-log-init, .sb-log-upload { border-left-color: rgba(var(--accent-rgb), 0.4); }

/* Mobile */
@media (max-width: 720px) {
    .secondbrain-panel { padding: 18px 14px 28px; }
    .sb-grid { grid-template-columns: 1fr 1fr; }
    .sb-card-wide { grid-column: 1 / -1; }
    .sb-split { grid-template-columns: 1fr; }
}

/* ──────── Sistema · gws (Google Workspace CLI) ──────── */
.gws-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--jarvis-cyan);
}
.gws-cmd {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 3px;
    padding: 8px 12px;
    margin: 4px 0;
    color: var(--jarvis-cyan);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    overflow-x: auto;
}
.gws-cmd code { background: transparent; padding: 0; color: inherit; }

/* ─── Panel Módulos ─────────────────────────────────────── */
.modules-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.module-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 4px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s;
}
.module-card:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
}

.module-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.module-icon {
    width: 32px; height: 32px; flex-shrink: 0;
    border: 1px solid;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.module-meta { flex: 1; min-width: 0; }
.module-name {
    font-family: 'Orbitron', sans-serif;
    color: var(--jarvis-cyan);
    font-size: 13px;
    letter-spacing: 1px;
}
.module-id {
    font-size: 10px;
    font-family: 'Share Tech Mono', monospace;
}

.module-row {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.module-counts { font-size: 10px; }

.module-badge {
    font-size: 9px;
    padding: 2px 7px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 8px;
    letter-spacing: 1px;
    color: var(--jarvis-text);
}
.module-badge.ok    { color: #4ade80; border-color: rgba(74, 222, 128, 0.4); }
.module-badge.err   { color: #ff4d6d; border-color: rgba(255, 77, 109, 0.4); }
.module-badge.warn  { color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); }
.module-badge.muted { color: var(--jarvis-text-dim); }

.module-error {
    font-size: 10px;
    color: #ff4d6d;
    background: rgba(255, 77, 109, 0.08);
    padding: 4px 8px;
    border-radius: 4px;
    word-break: break-word;
}

.module-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.btn.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    min-width: auto;
}

.modal {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal.open { display: flex; }
.modal-content {
    background: var(--jarvis-bg, #0a0e16);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    border-radius: 6px;
    padding: 24px;
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
}

.modules-log-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    font-family: 'Share Tech Mono', monospace;
}
.modules-log-list li {
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.3);
    border-left: 2px solid rgba(var(--accent-rgb), 0.3);
}
.modules-log-list .log-error  { border-color: #ff4d6d; }
.modules-log-list .log-warn   { border-color: #fbbf24; }
.modules-log-list .log-info   { border-color: #4ade80; }

@media (max-width: 600px) {
    .modules-grid { grid-template-columns: 1fr; }
}

/* ──────── Editor de skills del módulo (module-skills.js) ──────── */
.skill-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: stretch;
    justify-content: center;
}
.skill-editor-modal.open { display: flex; }
.skill-editor-modal .se-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}
.skill-editor-modal .se-window {
    position: relative;
    margin: 24px;
    flex: 1;
    max-width: 1280px;
    background: rgba(10, 16, 26, 0.98);
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.se-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.10), transparent);
}
.se-title h3 {
    margin: 0;
    font-size: 16px;
    color: rgba(var(--accent-rgb), 0.95);
    letter-spacing: 1.5px;
}
.se-title .se-sub {
    display: block;
    font-size: 11px;
    opacity: 0.55;
    margin-top: 2px;
    font-family: 'Share Tech Mono', monospace;
}
.se-actions { display: flex; gap: 8px; }

.se-body {
    flex: 1;
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 0;
}
.se-sidebar {
    background: rgba(0, 0, 0, 0.25);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.se-section h4 {
    margin: 0 0 8px 0;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.55;
    font-weight: 700;
}
.se-skill-list, .se-version-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.se-skill-item {
    padding: 8px 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.se-skill-item:hover {
    border-color: rgba(var(--accent-rgb), 0.4);
    background: rgba(var(--accent-rgb), 0.08);
}
.se-skill-item.selected {
    border-color: rgba(var(--accent-rgb), 0.7);
    background: rgba(var(--accent-rgb), 0.14);
}
.se-skill-name {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}
.se-skill-meta {
    display: block;
    font-size: 10.5px;
    opacity: 0.55;
    margin-top: 2px;
}
.se-version-item {
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.se-version-line1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.se-version-num {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: rgba(var(--accent-rgb), 0.95);
}
.se-version-ts {
    font-size: 10px;
    opacity: 0.55;
}
.se-version-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.btn.btn-xs {
    font-size: 10.5px;
    padding: 2px 6px;
    height: auto;
}

.se-editor-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.se-editor-status {
    padding: 6px 14px;
    font-size: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
    min-height: 18px;
    color: rgba(255, 255, 255, 0.65);
}
.se-editor-status.kind-ok    { color: #6effa6; }
.se-editor-status.kind-error { color: #ff8c8c; }
.se-editor-status.kind-info  { color: rgba(180, 220, 255, 0.85); }

.se-editor-pane .CodeMirror {
    flex: 1;
    min-height: 0;
    height: auto;
    font-family: 'JetBrains Mono', 'Fira Code', Menlo, monospace;
    font-size: 13px;
}

@media (max-width: 800px) {
    .se-body { grid-template-columns: 1fr; }
    .se-sidebar { max-height: 220px; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
    .skill-editor-modal .se-window { margin: 0; border-radius: 0; }
}

/* ──────── Panel Ajustes → Alma (soul-panel.js) ──────── */
.soul-status-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 6px;
}
.soul-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: 13px;
}
.soul-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}
.soul-row select {
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.92);
    font-family: inherit;
    font-size: 12px;
    min-width: 140px;
}
.badge-ok, .badge-off, .badge-warn {
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.badge-ok    { background: rgba( 80, 220, 120, 0.20); color: #6effa6; border: 1px solid rgba(80, 220, 120, 0.45); }
.badge-off   { background: rgba(180, 180, 200, 0.18); color: #c9c9d0; border: 1px solid rgba(180, 180, 200, 0.35); }
.badge-warn  { background: rgba(255, 209, 102, 0.18); color: #ffd166; border: 1px solid rgba(255, 209, 102, 0.45); }

.hud-soul {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    margin-right: 8px;
    padding: 0 10px;
    background: rgba(224, 170, 255, 0.15);
    border: 1px solid rgba(224, 170, 255, 0.55);
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(240, 220, 255, 0.95);
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.hud-soul:hover {
    background: rgba(224, 170, 255, 0.28);
    transform: scale(1.05);
}

.btn.btn-danger-soft {
    background: rgba(255, 120, 120, 0.10);
    border: 1px solid rgba(255, 120, 120, 0.35);
    color: rgba(255, 180, 180, 0.92);
    transition: background 0.15s, border-color 0.15s;
}
.btn.btn-danger-soft:hover {
    background: rgba(255, 120, 120, 0.20);
    border-color: rgba(255, 120, 120, 0.55);
}



/* ───────── Login overlay (Fase 8) ───────── */
#jarvis-login-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

#jarvis-login-overlay .login-card {
    background: rgba(20, 22, 28, 0.95);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 16px;
    padding: 36px 32px;
    min-width: 320px;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 40px rgba(var(--accent-rgb), 0.15);
}

#jarvis-login-overlay h2 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 4px;
    color: rgb(var(--accent-rgb));
}

#jarvis-login-overlay .login-sub {
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

#jarvis-login-overlay input {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: white;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

#jarvis-login-overlay input:focus {
    border-color: rgba(var(--accent-rgb), 0.6);
}

#jarvis-login-overlay button {
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    background: rgb(var(--accent-rgb));
    color: black;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.2s;
}

#jarvis-login-overlay button:hover {
    filter: brightness(1.15);
}

#jarvis-login-overlay .login-error {
    margin-top: 12px;
    color: rgba(255, 120, 120, 0.9);
    font-size: 13px;
    min-height: 18px;
}


/* ─── Cuenta tab ─── */
.account-email, .account-tenant-id {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.04);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    word-break: break-all;
}
.btn-danger {
    background: rgba(220, 60, 80, 0.12);
    color: rgba(255, 120, 140, 0.95);
    border: 1px solid rgba(220, 60, 80, 0.4);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-danger:hover {
    background: rgba(220, 60, 80, 0.22);
    border-color: rgba(220, 60, 80, 0.7);
}


/* ─── Chat search ─── */
.panel-popout-toggle {
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    color: var(--jarvis-text-dim);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    margin-right: 6px;
    transition: all 0.15s ease;
}
.panel-popout-toggle:hover {
    color: var(--jarvis-text);
    border-color: rgba(var(--accent-rgb), 0.7);
    background: rgba(var(--accent-rgb), 0.08);
}
/* En la vista chat-only el botón de pop-out no tiene sentido (ya estás en él). */
body.chat-only .panel-popout-toggle { display: none; }

/* ───── Centro de alertas (campana en HUD) ───── */
.hud-alerts-wrapper {
    position: relative;
    margin-right: 8px;
}
.hud-alerts {
    position: relative;
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    color: var(--jarvis-text-dim);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hud-alerts:hover {
    color: var(--jarvis-text);
    border-color: rgba(var(--accent-rgb), 0.7);
    background: rgba(var(--accent-rgb), 0.08);
}
.hud-alerts.has-alerts {
    color: rgba(255, 180, 60, 0.95);
    border-color: rgba(255, 180, 60, 0.6);
    animation: alertsPulse 2.5s ease-in-out infinite;
}
@keyframes alertsPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 180, 60, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(255, 180, 60, 0.25); }
}
.hud-alerts-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: rgba(255, 107, 107, 0.95);
    color: white;
    font-size: 9px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 5px;
    min-width: 14px;
    text-align: center;
    line-height: 1.2;
}
.hud-alerts-panel {
    position: absolute;
    top: 38px;
    right: 0;
    width: 340px;
    max-width: calc(100vw - 32px);
    max-height: 480px;
    overflow-y: auto;
    background: rgba(10, 14, 20, 0.97);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    z-index: 999;
    backdrop-filter: blur(8px);
}
.hud-alerts-header {
    padding: 10px 14px;
    font-size: 11px;
    letter-spacing: 1.6px;
    color: rgba(var(--accent-rgb), 0.95);
    text-transform: uppercase;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
}
.hud-alerts-list {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hud-alerts-empty {
    padding: 16px;
    text-align: center;
    color: var(--jarvis-text-dim);
    font-size: 12px;
}
.hud-alert {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(var(--accent-rgb), 0.04);
    border-left: 3px solid rgba(var(--accent-rgb), 0.5);
}
.hud-alert.alert-critical { border-left-color: #FF6B6B; background: rgba(255, 107, 107, 0.08); }
.hud-alert.alert-warning  { border-left-color: #FFB347; background: rgba(255, 179, 71, 0.08); }
.hud-alert.alert-info     { border-left-color: #66B2FF; background: rgba(102, 178, 255, 0.06); }
.hud-alert-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--jarvis-text);
    margin-bottom: 3px;
}
.hud-alert-detail {
    font-size: 11px;
    color: var(--jarvis-text-dim);
    line-height: 1.5;
    margin-bottom: 6px;
}
.hud-alert-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.hud-alert-action {
    background: rgba(var(--accent-rgb), 0.18);
    color: rgba(var(--accent-rgb), 0.95);
    border: none;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.hud-alert-action:hover {
    background: rgba(var(--accent-rgb), 0.32);
}
.hud-alert-action:disabled { opacity: 0.6; cursor: not-allowed; }
.hud-alert-dismiss {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: var(--jarvis-text-dim);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.hud-alert-dismiss:hover {
    color: rgba(255, 107, 107, 0.95);
    border-color: rgba(255, 107, 107, 0.5);
}

/* Toggle voz proactiva en HUD */
.hud-proactive-voice {
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    color: var(--jarvis-text-dim);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 13px;
    cursor: pointer;
    margin-right: 8px;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hud-proactive-voice:hover {
    color: var(--jarvis-text);
    border-color: rgba(var(--accent-rgb), 0.7);
    background: rgba(var(--accent-rgb), 0.08);
}
.hud-proactive-voice.muted {
    opacity: 0.55;
}

.panel-search-toggle {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.65);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}
.panel-search-toggle:hover {
    background: rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-rgb));
}
.chat-search-bar {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    background: rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.chat-search-bar input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: white;
    font-size: 13px;
    outline: none;
}
.chat-search-bar input:focus {
    border-color: rgba(var(--accent-rgb), 0.5);
}
.chat-search-count {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    min-width: 50px;
    text-align: right;
}
.chat-search-bar button {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.chat-search-bar button:hover {
    background: rgba(var(--accent-rgb), 0.15);
}
.msg.search-match {
    background: rgba(var(--accent-rgb), 0.08) !important;
    box-shadow: inset 3px 0 0 rgba(var(--accent-rgb), 0.5);
}
.msg.search-current {
    background: rgba(var(--accent-rgb), 0.18) !important;
    box-shadow: inset 3px 0 0 rgb(var(--accent-rgb)),
                0 0 12px rgba(var(--accent-rgb), 0.3);
}


/* ─── Status panel ─── */
.status-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
}
.status-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}
.status-row > span:first-child {
    color: rgba(255,255,255,0.55);
    flex-shrink: 0;
    min-width: 100px;
}
.status-row > span:last-child {
    color: rgba(255,255,255,0.85);
    text-align: right;
    word-break: break-word;
}
.status-row .mono {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 11px;
}
.btn-mini {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.6);
    padding: 1px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    margin-left: 8px;
}
.btn-mini:hover { background: rgba(var(--accent-rgb), 0.2); }
.error-text { color: rgba(255, 130, 130, 0.9); font-size: 12px; }


/* ─── v3 voice hint ─── */
.voice-v3-hint {
    margin-top: 10px;
    padding: 10px 14px;
    background: linear-gradient(
        135deg,
        rgba(var(--accent-rgb), 0.12),
        rgba(var(--accent-rgb), 0.04)
    );
    border-left: 3px solid rgb(var(--accent-rgb));
    border-radius: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
}
.voice-v3-hint code {
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
}
.voice-v3-hint em {
    color: rgb(var(--accent-rgb));
    font-style: normal;
    font-weight: 500;
}


/* ─── Karaoke visualizer del TTS ─── */
.subtitle.karaoke-mode {
    /* Necesario para que cada char-span se posicione bien y respete word-wrap */
    white-space: pre-wrap;
}
.karaoke-char {
    display: inline-block;
    color: rgba(255, 255, 255, 0.32);
    transition: color 80ms ease, text-shadow 80ms ease, transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: color, text-shadow, transform;
}
.karaoke-char.karaoke-space {
    transition: none;
}
.karaoke-char.karaoke-active {
    color: rgb(var(--accent-rgb));
    text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8),
                 0 0 24px rgba(var(--accent-rgb), 0.4);
    transform: translateY(-1px) scale(1.05);
}
.karaoke-char.karaoke-spoken {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: none;
}


/* ─── Cuenta: cambio de password ─── */
.account-input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: white;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.account-input:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.55);
}
.btn-primary {
    background: rgb(var(--accent-rgb));
    color: black;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 4px;
    transition: filter 0.2s;
}
.btn-primary:hover { filter: brightness(1.15); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.account-status-line {
    margin-top: 10px;
    font-size: 13px;
    min-height: 18px;
}
.account-status-line.error  { color: rgba(255, 130, 130, 0.95); }
.account-status-line.ok     { color: rgb(var(--accent-rgb)); }
.account-status-line.info   { color: rgba(255, 255, 255, 0.65); }

/* ══════════════════════════════════════════════════════════════
   SISTEMA DE WIDGETS FLOTANTES
   Paneles glass-morphism en el stage, gestionados por widgets.js
   ══════════════════════════════════════════════════════════════ */

/* ─── Panel base ─── */
.widget-panel {
    position: absolute;
    width: 360px;
    height: 420px;
    background: rgba(2, 7, 13, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 4px;
    box-shadow: 0 0 32px rgba(0,0,0,0.6),
                inset 0 0 24px rgba(var(--accent-rgb), 0.03);
    display: flex;
    flex-direction: column;
    z-index: 4;
    transform: scale(0.94);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
    pointer-events: none;
    overflow: hidden;
}
.widget-panel.widget-open {
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
}

/* ─── Header / drag handle ─── */
.widget-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
    cursor: move;
    user-select: none;
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(var(--accent-rgb), 0.9);
    text-transform: uppercase;
    flex-shrink: 0;
}
.widget-icon  { font-size: 13px; line-height: 1; }
.widget-title { flex: 1; }
.widget-close {
    background: none;
    border: none;
    color: rgba(var(--accent-rgb), 0.5);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 2px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.widget-close:hover {
    color: rgba(var(--accent-rgb), 1);
    background: rgba(var(--accent-rgb), 0.08);
}

/* ─── Cuerpo ─── */
.widget-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    font-size: 12px;
    color: var(--jarvis-text);
}
.widget-body::-webkit-scrollbar { width: 4px; }
.widget-body::-webkit-scrollbar-track { background: transparent; }
.widget-body::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.25); border-radius: 2px; }

/* ─── Handle resize (esquina inferior derecha) ─── */
.widget-resize {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    cursor: se-resize;
    opacity: 0.35;
    background: linear-gradient(135deg, transparent 50%, rgba(var(--accent-rgb), 0.6) 50%);
    border-radius: 0 0 4px 0;
    transition: opacity 0.2s;
}
.widget-panel:hover .widget-resize { opacity: 0.7; }

/* ─── Dock ─── */
#widget-dock {
    position: absolute;
    bottom: 72px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 4;
}
.widget-dock-btn {
    width: 34px;
    height: 34px;
    background: rgba(2, 7, 13, 0.72);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--jarvis-text);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.widget-dock-btn:hover,
.widget-dock-btn.active {
    border-color: rgba(var(--accent-rgb), 0.65);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.25);
    background: rgba(var(--accent-rgb), 0.07);
}

/* ─── Contenido interno de widgets ─── */
.wgt-loading, .wgt-empty, .wgt-error {
    padding: 20px 8px;
    text-align: center;
    color: rgba(255,255,255,0.45);
    font-size: 12px;
}
.wgt-error { color: rgba(255,100,100,0.8); }

.wgt-scroll {
    overflow-y: auto;
    max-height: calc(100% - 44px);
}

.wgt-day-header {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(var(--accent-rgb), 0.7);
    padding: 6px 0 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.wgt-day-count {
    background: rgba(var(--accent-rgb), 0.12);
    border-radius: 8px;
    padding: 0 5px;
    font-size: 9px;
}

.wgt-event {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 12px;
    line-height: 1.4;
}
.wgt-event-time {
    color: rgba(var(--accent-rgb), 0.6);
    font-size: 10px;
    min-width: 36px;
    flex-shrink: 0;
}
.wgt-event-title { flex: 1; }
.wgt-cal-tag {
    font-size: 9px;
    color: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 3px;
    padding: 0 4px;
    flex-shrink: 0;
}

/* Tasks */
.wgt-task {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 12px;
}
.wgt-task-check { accent-color: rgb(var(--accent-rgb)); cursor: pointer; }
.wgt-task-prio  { font-size: 10px; flex-shrink: 0; }
.wgt-task-title { flex: 1; }
.wgt-task-due   {
    font-size: 10px;
    color: rgba(255,200,100,0.7);
    flex-shrink: 0;
}

/* Botones de acción inferiores del widget */
.wgt-actions {
    display: flex;
    gap: 6px;
    padding: 6px 0 2px;
    flex-shrink: 0;
}
.wgt-btn {
    flex: 1;
    padding: 5px 8px;
    background: rgba(var(--accent-rgb), 0.07);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 3px;
    color: rgba(var(--accent-rgb), 0.85);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.wgt-btn:hover {
    background: rgba(var(--accent-rgb), 0.14);
    border-color: rgba(var(--accent-rgb), 0.4);
}
.wgt-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════
   LAYOUT INTEGRADO PERMANENTE (>= 900px)
   Orbe al primer tercio · chat al último tercio · sin marco
   El chat es transparente y queda sobre el canvas del orbe,
   dejando ver los efectos a través de las burbujas.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
    /* Panel del chat: posición fija para escapar del .stage y poder cubrir
       desde justo debajo del HUD hasta el fondo del viewport (incluyendo el
       área del input-bar). NO toca la línea separatoria del header. */
    body:not(.chat-only) .dialogue-panel {
        position: fixed !important;
        top: var(--hud-height, 60px) !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 40% !important;
        z-index: 3 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transition: none !important;
    }
    /* El chat permanente no se colapsa */
    body:not(.chat-only) .dialogue-panel.collapsed {
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* El input-bar deja de ser full-width y se acopla al tercio derecho,
       quedando integrado en la columna del chat. Sin línea separatoria
       arriba ni fondo plano: en su lugar usamos un halo radial difuminado
       como pseudo-elemento, que se funde suavemente con el chat. */
    body:not(.chat-only) .input-bar {
        position: fixed !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: 40% !important;
        z-index: 5 !important;
        padding: 12px 14px 16px !important;
        border-top: none !important;
        background: transparent !important;
        overflow: visible !important;
    }
    /* Halo radial detrás del input-wrap: blur enmascarado, extendido un
       poco hacia arriba para crear una transición sin bordes con el chat.
       Las máscaras ocultas apagan los bordes para que parezca flotar. */
    body:not(.chat-only) .input-bar::before {
        content: '';
        position: absolute;
        top: -22px;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(ellipse 95% 72% at 50% 60%,
            rgba(2, 7, 13, 0.62) 0%,
            rgba(2, 7, 13, 0.32) 50%,
            transparent 100%);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        -webkit-mask-image: radial-gradient(ellipse 95% 72% at 50% 60%,
            #000 0%, #000 55%, transparent 100%);
        mask-image: radial-gradient(ellipse 95% 72% at 50% 60%,
            #000 0%, #000 55%, transparent 100%);
        pointer-events: none;
    }
    /* Sombra suave bajo el input-wrap para reforzar la flotabilidad */
    body:not(.chat-only) .input-bar .input-wrap {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45),
                    0 0 28px rgba(var(--accent-rgb), 0.06) !important;
    }

    /* Sin cabecera del chat: las burbujas suben hasta el borde superior.
       Esto elimina los botones de búsqueda, popout y RAW en el desktop. */
    body:not(.chat-only) .panel-header,
    body:not(.chat-only) .panel-resize-handle,
    body:not(.chat-only) .chat-search-bar {
        display: none !important;
    }
    /* Subtítulo flotante: redundante porque el chat ya muestra todo */
    body:not(.chat-only) .subtitle-overlay {
        display: none !important;
    }

    /* Mejor legibilidad de las burbujas sin fondo de panel:
       sombra suave detrás del texto para que se lea sobre los efectos
       del orbe que ahora pasan por debajo del chat. */
    body:not(.chat-only) .dialogue .msg {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85),
                     0 0 8px rgba(0, 0, 0, 0.5);
    }
    /* Espacio interior para que las burbujas no peguen al borde.
       padding-bottom = input-bar-height + 24px para que la última burbuja
       quede totalmente nítida por encima del fade inferior.
       Máscaras: difuminado sutil de 16px arriba y otros 16px abajo, justo
       contra el borde superior del input-bar — el chat no se ve nunca por
       debajo de su zona, las burbujas se desvanecen al cruzar ese límite. */
    body:not(.chat-only) .dialogue {
        padding: 0 14px calc(var(--input-bar-height, 80px) + 24px) !important;
        -webkit-mask-image: linear-gradient(to bottom,
            transparent 0,
            rgba(0,0,0,0.4) 8px,
            #000 16px,
            #000 calc(100% - var(--input-bar-height, 80px) - 16px),
            rgba(0,0,0,0.4) calc(100% - var(--input-bar-height, 80px) - 8px),
            transparent calc(100% - var(--input-bar-height, 80px))) !important;
        mask-image: linear-gradient(to bottom,
            transparent 0,
            rgba(0,0,0,0.4) 8px,
            #000 16px,
            #000 calc(100% - var(--input-bar-height, 80px) - 16px),
            rgba(0,0,0,0.4) calc(100% - var(--input-bar-height, 80px) - 8px),
            transparent calc(100% - var(--input-bar-height, 80px))) !important;
    }

    /* La barra de búsqueda no debe tener fondo opaco tampoco;
       glass ligero solo cuando se abre. */
    body:not(.chat-only) .chat-search-bar {
        background: rgba(2, 7, 13, 0.65) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(var(--accent-rgb), 0.2) !important;
        border-radius: 4px !important;
        margin: 0 8px 6px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   HOLO-MODAL
   Modal cinemático centrado en la zona del orbe (30% de viewport,
   nunca invade el chat). El marco se dibuja con dos rayos partiendo
   de la esquina superior izquierda — uno hacia la derecha, otro hacia
   abajo — hasta encontrarse abajo-derecha. Efecto osciloscopio.
   ════════════════════════════════════════════════════════════ */
.holo-modal {
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    /* Tope absoluto, pero limitado por el viewport real para que en
       pantallas pequeñas (MacBook Air 13" ~800px) no desborde el stage.
       Resta el HUD (medido por JS en --hud-height) y un margen de 24px. */
    width:  min(960px, calc(60vw - 24px));
    height: min(880px, calc(100vh - var(--hud-height, 60px) - 24px));
    max-width:  calc(60vw - 24px);
    max-height: calc(100vh - var(--hud-height, 60px) - 24px);
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.holo-modal.drawing { opacity: 1; }
.holo-modal.open    { pointer-events: auto; }

/* SVG marco */
.holo-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.holo-frame-bg {
    fill: rgba(2, 7, 13, 0.78);
    stroke: rgba(var(--accent-rgb), 0.18);
    stroke-width: 0.4;
    vector-effect: non-scaling-stroke;
    /* El relleno aparece junto con los rayos al abrir */
    opacity: 0;
    transition: opacity 0.4s ease 0.15s;
}
.holo-modal.open .holo-frame-bg { opacity: 1; }

.holo-frame-ray {
    fill: none;
    stroke: rgba(var(--accent-rgb), 1);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.85))
            drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.45));
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.65s cubic-bezier(0.18, 0.7, 0.22, 1);
}
.holo-modal.open .holo-frame-ray { stroke-dashoffset: 0; }

/* Pequeño desfase entre los dos rayos para sensación de "scan" doble */
.holo-frame-ray-b { transition-delay: 0.05s; }

/* Contenido interior */
.holo-content {
    position: absolute;
    inset: 1px;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--jarvis-text);
    opacity: 0;
    transition: opacity 0.22s ease 0.55s;
    overflow: hidden;
}
.holo-modal.open .holo-content { opacity: 1; }

.holo-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
    flex-shrink: 0;
}
.holo-icon  { font-size: 16px; line-height: 1; }
.holo-title {
    flex: 1;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(var(--accent-rgb), 0.9);
}
.holo-close {
    background: none;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: rgba(var(--accent-rgb), 0.7);
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    font-size: 11px;
    line-height: 1;
    padding: 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.holo-close:hover {
    color: rgba(var(--accent-rgb), 1);
    border-color: rgba(var(--accent-rgb), 0.6);
    background: rgba(var(--accent-rgb), 0.08);
}

.holo-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 12px;
    /* Centrado vertical universal: cuando el contenido es más corto que
       el alto disponible, queda centrado (como el reloj). Los widgets con
       scroll interno (.wgt-scroll usa max-height: calc(100% - 44px))
       siguen funcionando porque su altura está acotada. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.holo-body::-webkit-scrollbar       { width: 4px; }
.holo-body::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.3); border-radius: 2px; }

.holo-error {
    color: rgba(255, 100, 100, 0.85);
    padding: 12px;
    text-align: center;
}

/* En pantalla estrecha (móvil) ocultamos el modal cinemático y
   dejamos que se use el widget flotante clásico si fuese necesario */
@media (max-width: 899px) {
    .holo-modal { display: none !important; }
}

/* ── Holo-modal: tipografía aumentada para mejor legibilidad ── */
.holo-modal .holo-title  { font-size: 13px; letter-spacing: 3px; }
.holo-modal .holo-icon   { font-size: 22px; }
.holo-modal .holo-close  { width: 28px; height: 28px; font-size: 14px; }
.holo-modal .holo-body   { font-size: 16px; }
.holo-modal .holo-content { padding: 18px 22px 22px; gap: 14px; }
.holo-modal .holo-head    { padding-bottom: 12px; gap: 12px; }

/* Calendario dentro del modal */
.holo-modal .wgt-day-header {
    font-size: 12px;
    gap: 8px;
    /* Línea separadora horizontal entre días (suprimida en el primero) */
    border-top: 2px solid rgba(var(--accent-rgb), 0.32);
    margin-top: 10px;
    padding: 16px 0 6px;
}
.holo-modal .wgt-scroll > .wgt-day-header:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 4px;
}
.holo-modal .wgt-day-count  { font-size: 11px; padding: 1px 7px; }
.holo-modal .wgt-event {
    padding: 7px 0;
    font-size: 16px;
    line-height: 1.5;
    gap: 10px;
}
.holo-modal .wgt-event-time  { font-size: 13px; min-width: 50px; }
.holo-modal .wgt-event-title { font-size: 16px; }
.holo-modal .wgt-cal-tag     { font-size: 11px; padding: 2px 7px; }

/* Tareas dentro del modal */
.holo-modal .wgt-task {
    padding: 8px 0;
    font-size: 16px;
    line-height: 1.45;
    gap: 10px;
}
.holo-modal .wgt-task-prio  { font-size: 14px; }
.holo-modal .wgt-task-title { font-size: 16px; }
.holo-modal .wgt-task-due   { font-size: 12px; }
.holo-modal .wgt-task-check {
    width: 18px; height: 18px;
    transform: scale(1.2);
    margin-right: 4px;
}

/* Botones de acciones (Sync, Nueva, Ver todas…) */
.holo-modal .wgt-actions { padding: 10px 0 4px; gap: 10px; }
.holo-modal .wgt-btn {
    padding: 9px 14px;
    font-size: 14px;
    border-radius: 4px;
}

/* Estados vacíos / loading / error con texto más visible */
.holo-modal .wgt-loading,
.holo-modal .wgt-empty,
.holo-modal .wgt-error {
    padding: 30px 14px;
    font-size: 14px;
}

.holo-modal .holo-body::-webkit-scrollbar { width: 6px; }

/* ── Holo-modal: ajustes responsive para portátiles 13" / 14"
   (MacBook Air, etc.) — entre 900 y 1280px de ancho de viewport.
   Reducimos un punto la fuente y los paddings para que entre
   más contenido sin desbordar. ── */
@media (min-width: 900px) and (max-width: 1280px) {
    .holo-modal .holo-content { padding: 14px 18px 18px; gap: 10px; }
    .holo-modal .holo-body    { font-size: 14px; }
    .holo-modal .wgt-event,
    .holo-modal .wgt-task        { font-size: 14px; padding: 6px 0; }
    .holo-modal .wgt-event-title,
    .holo-modal .wgt-task-title  { font-size: 14px; }
    .holo-modal .wgt-event-time  { font-size: 12px; min-width: 44px; }
    .holo-modal .wgt-task-prio   { font-size: 13px; }
    .holo-modal .wgt-task-due    { font-size: 11px; }
    .holo-modal .wgt-cal-tag     { font-size: 10px; }
    .holo-modal .wgt-day-header  { padding: 12px 0 5px; margin-top: 8px; }
    .holo-modal .wgt-btn         { font-size: 13px; padding: 7px 11px; }
}

/* En pantallas muy bajas (≤ 720px de alto) reducimos también los
   paddings del header y del scroll para ganar verticales. */
@media (min-width: 900px) and (max-height: 720px) {
    .holo-modal .holo-content { padding: 12px 16px 14px; gap: 8px; }
    .holo-modal .holo-head    { padding-bottom: 8px; }
    .holo-modal .wgt-event,
    .holo-modal .wgt-task     { padding: 5px 0; }
    .holo-modal .wgt-day-header { margin-top: 6px; padding: 10px 0 4px; }
}

/* Holo-modal: ocultamos los scrollbars del cuerpo y de la lista
   manteniendo el scroll funcional. */
.holo-modal .holo-body,
.holo-modal .wgt-scroll {
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge clásico */
}
.holo-modal .holo-body::-webkit-scrollbar,
.holo-modal .wgt-scroll::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none;
}

/* ── Clock widget (dentro de HoloModal) ── */
.holo-modal .holo-clock-host { padding: 0 !important; }
.clock-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 18px;
    padding: 20px;
}
.clock-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(60px, 11vw, 140px);
    color: rgba(var(--accent-rgb), 0.95);
    text-shadow: 0 0 22px rgba(var(--accent-rgb), 0.55),
                 0 0 4px rgba(var(--accent-rgb), 0.95);
    letter-spacing: 4px;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.clock-time .clock-num { display: inline-block; }
.clock-time .clock-sep { animation: clockBlink 1s steps(2) infinite; }
.clock-time .clock-sec {
    font-size: 0.42em;
    margin-left: 12px;
    opacity: 0.6;
    letter-spacing: 2px;
}
@keyframes clockBlink { 50% { opacity: 0.25; } }
.clock-date {
    font-size: 18px;
    color: rgba(255,255,255,0.85);
    text-transform: capitalize;
    letter-spacing: 1px;
    text-align: center;
}
.clock-tz {
    font-size: 11px;
    color: rgba(var(--accent-rgb), 0.6);
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

/* ── Weather widget (dentro de HoloModal) ── */
.weather-widget {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* centra verticalmente cuando hay aire */
    gap: 14px;
}
.weather-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.weather-city {
    font-size: 22px;
    color: rgba(255,255,255,0.95);
    letter-spacing: 1.5px;
}
.weather-country {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.weather-current {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    border-top: 1px solid rgba(var(--accent-rgb), 0.18);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
}
.weather-icon-big {
    font-size: 84px;
    line-height: 1;
    filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), 0.35));
}
.weather-temp {
    font-family: 'Share Tech Mono', monospace;
    font-size: 56px;
    color: rgba(var(--accent-rgb), 1);
    text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.55);
    line-height: 1;
}
.weather-name {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    letter-spacing: 1px;
}
.weather-meta {
    display: flex;
    justify-content: space-around;
    padding: 4px 0;
}
.weather-meta .wm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.weather-meta .wm span {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.weather-meta .wm b {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    font-weight: 400;
    color: rgba(var(--accent-rgb), 0.95);
}
.weather-days {
    display: flex;
    justify-content: space-around;
    padding-top: 6px;
    border-top: 1px solid rgba(var(--accent-rgb), 0.10);
}
.weather-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.wd-date {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    text-transform: capitalize;
    letter-spacing: 0.5px;
}
.wd-icon { font-size: 28px; line-height: 1; }
.wd-temps {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
}
.wd-temps b {
    color: rgba(var(--accent-rgb), 0.92);
    font-weight: 400;
}

/* ════════════════════════════════════════════════════════════
   DAYVIEW — vista de día tipo Notion en el HoloModal de Tareas
   ════════════════════════════════════════════════════════════ */

.dayview {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 10px;
}

.dayview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
    flex-wrap: wrap;
}
.dv-nav, .dv-today {
    background: rgba(2,7,13,0.7);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: rgba(var(--accent-rgb), 0.9);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    transition: border-color 0.15s, background 0.15s;
}
.dv-nav { font-size: 16px; padding: 2px 10px; }
.dv-nav:hover, .dv-today:hover {
    border-color: rgba(var(--accent-rgb), 0.55);
    background: rgba(var(--accent-rgb), 0.1);
}
.dv-label {
    flex: 1;
    text-transform: capitalize;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.4px;
    margin-left: 4px;
    min-width: 120px;
}
.dv-filter {
    background: rgba(2,7,13,0.7);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: rgba(var(--accent-rgb), 0.9);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 12px;
    cursor: pointer;
}

.dayview-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* hereda scrollbar oculto de holo-body */
}
.dayview-body::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none; }

.dv-section-title {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(var(--accent-rgb), 0.65);
    margin-top: 10px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
}
.dv-section-title:first-child { margin-top: 0; }

.dv-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 14px;
    line-height: 1.4;
    transition: background 0.15s;
    overflow: hidden;
}
.dv-row:hover { background: rgba(var(--accent-rgb), 0.05); }

.dv-check {
    cursor: pointer;
    accent-color: rgb(var(--accent-rgb));
    width: 16px; height: 16px;
    flex-shrink: 0;
}

.dv-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: rgba(var(--accent-rgb), 0.75);
    min-width: 56px;
    flex-shrink: 0;
}
.dv-prio { color: inherit; min-width: 22px; }

.dv-text {
    flex: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dv-text:hover { color: rgba(var(--accent-rgb), 1); }

.dv-meta, .dv-cat {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}
.dv-cat {
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 3px;
    padding: 1px 6px;
    text-transform: capitalize;
}
.dv-draft-badge {
    font-size: 12px;
    opacity: 0.8;
}

.dv-row.dv-done .dv-text {
    text-decoration: line-through;
    color: rgba(255,255,255,0.4);
}
.dv-row.dv-done .dv-time { opacity: 0.45; }

.dv-empty {
    padding: 28px 12px;
    text-align: center;
    color: rgba(255,255,255,0.45);
    font-size: 13px;
}

.dayview-footer {
    border-top: 1px solid rgba(var(--accent-rgb), 0.12);
    padding-top: 8px;
    flex-shrink: 0;
    display: flex;
    gap: 8px;
}
.dv-add-task { flex: 1; }

/* Botón primario reutilizable dentro del dayview */
.wgt-btn-primary {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.5);
    color: rgba(255,255,255,0.95);
}
.wgt-btn-primary:hover {
    background: rgba(var(--accent-rgb), 0.28);
}

/* ── Mini-modal de promoción task → evento ── */

.dv-promote-modal {
    position: fixed;
    inset: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dv-promote-modal[hidden] { display: none !important; }
.dvp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
}
.dvp-card {
    position: relative;
    background: rgba(2,7,13,0.95);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    border-radius: 6px;
    padding: 18px 20px;
    min-width: 280px;
    max-width: 90vw;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6),
                0 0 22px rgba(var(--accent-rgb), 0.15);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dvp-card h4 {
    margin: 0;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(var(--accent-rgb), 0.85);
}
.dvp-task-title {
    margin: 0;
    font-size: 15px;
    color: rgba(255,255,255,0.95);
    font-style: italic;
}
.dvp-card label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    letter-spacing: 1px;
    color: rgba(var(--accent-rgb), 0.7);
    text-transform: uppercase;
}
.dvp-card label.dvp-allday {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
}
.dvp-card input[type="date"],
.dvp-card input[type="time"] {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: rgba(255,255,255,0.95);
    padding: 6px 8px;
    border-radius: 4px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
}
.dvp-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.dvp-actions .wgt-btn { flex: 1; }

/* ── Filter bar para agenda-widget ── */
.wgt-filter-bar {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 6px;
}
.wgt-event-done .wgt-event-title {
    text-decoration: line-through;
    color: rgba(255,255,255,0.4);
}
.wgt-event-done .wgt-event-time { opacity: 0.45; }

/* Día seleccionado en el forecast del widget weather */
.weather-day-selected {
    background: rgba(var(--accent-rgb), 0.12);
    border-radius: 6px;
    padding: 4px 6px;
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35);
}
.weather-day-selected .wd-date {
    color: rgba(var(--accent-rgb), 0.95);
    font-weight: 600;
}

/* ── Lista de usuarios + modal de creación (Ajustes → Cuenta) ── */
.users-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 12px;
}
.users-empty {
    padding: 14px;
    color: rgba(255,255,255,0.45);
    font-size: 13px;
    text-align: center;
    border: 1px dashed rgba(var(--accent-rgb), 0.18);
    border-radius: 4px;
}
.user-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    background: rgba(2,7,13,0.55);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 4px;
    font-size: 13px;
}
.user-row .user-name {
    color: rgba(255,255,255,0.95);
    font-weight: 500;
}
.user-row .user-email {
    color: rgba(255,255,255,0.6);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
}
.user-row .user-meta {
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    text-align: right;
}

/* Modal */
.user-create-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-create-modal[hidden] { display: none !important; }
.ucm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}
.ucm-card {
    position: relative;
    background: rgba(2,7,13,0.97);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    border-radius: 6px;
    padding: 22px 24px;
    min-width: 320px;
    max-width: 92vw;
    box-shadow: 0 10px 50px rgba(0,0,0,0.7),
                0 0 28px rgba(var(--accent-rgb), 0.18);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ucm-card h4 {
    margin: 0;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(var(--accent-rgb), 0.9);
}
.ucm-card .field-label {
    display: block;
    font-size: 11px;
    letter-spacing: 1px;
    color: rgba(var(--accent-rgb), 0.7);
    text-transform: uppercase;
    margin-top: 4px;
}
.ucm-card .account-input {
    width: 100%;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: rgba(255,255,255,0.95);
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
}
.ucm-card .account-input:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.65);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15);
}
.ucm-actions .btn,
.ucm-actions .btn-primary { flex: 1; }

/* ─────────────────────────────────────────────────────────────────
 * items-widget (HoloModal unificado tareas + calendario + hoy)
 * ───────────────────────────────────────────────────────────────── */
.it-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
    margin-bottom: 10px;
}
.it-tab {
    background: transparent;
    border: 0;
    color: rgba(var(--accent-rgb), 0.55);
    padding: 8px 14px;
    cursor: pointer;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-family: inherit;
    border-bottom: 2px solid transparent;
}
.it-tab:hover { color: rgba(var(--accent-rgb), 0.85); }
.it-tab.active {
    color: rgba(var(--accent-rgb), 1);
    border-bottom-color: rgba(var(--accent-rgb), 0.9);
}

/* Tab Pendientes con badge contador */
.it-tab-drafts .it-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(255, 168, 0, 0.18);
    color: #ffa800;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    border: 1px solid rgba(255, 168, 0, 0.45);
}
.it-tab.it-tab-drafts.active .it-badge {
    background: rgba(255, 168, 0, 0.32);
    color: #ffd47e;
    border-color: rgba(255, 168, 0, 0.7);
}

/* Bloque draft (fila + pista de lo que falta) */
.it-draft-wrap {
    border-left: 2px solid rgba(255, 168, 0, 0.35);
    padding-left: 8px;
    margin-bottom: 6px;
}
.it-missing {
    font-size: 10.5px;
    color: rgba(255, 168, 0, 0.85);
    padding: 2px 0 4px 28px;
    letter-spacing: 0.4px;
}
.it-missing.it-ready {
    color: rgba(123, 211, 234, 0.85);
}
.it-finalize-btn {
    margin-left: 28px;
    margin-bottom: 6px;
    background: rgba(123, 211, 234, 0.12);
    color: rgba(123, 211, 234, 0.95);
    border: 1px solid rgba(123, 211, 234, 0.5);
    padding: 3px 9px;
    font-size: 10px;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.it-finalize-btn:hover {
    background: rgba(123, 211, 234, 0.25);
    border-color: rgba(123, 211, 234, 0.85);
}
.it-finalize-btn:disabled { opacity: 0.5; cursor: wait; }
.it-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.it-search {
    flex: 1;
    min-width: 120px;
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    color: inherit;
    font-family: inherit;
    font-size: 12px;
    padding: 5px 9px;
    border-radius: 3px;
}
.it-search:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.55);
    background: rgba(var(--accent-rgb), 0.1);
}
.it-filter,
.it-toolbar select {
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    color: inherit;
    font-family: inherit;
    font-size: 11px;
    padding: 4px 6px;
    border-radius: 3px;
}
.it-nav, .it-today {
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    padding: 3px 9px;
    border-radius: 3px;
    font-size: 12px;
}
.it-nav:hover, .it-today:hover {
    background: rgba(var(--accent-rgb), 0.1);
}
.it-day-label {
    font-size: 11px;
    letter-spacing: 1.2px;
    color: rgba(var(--accent-rgb), 0.7);
    margin-bottom: 8px;
    text-transform: uppercase;
}
.it-section-title {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(var(--accent-rgb), 0.55);
    margin: 14px 0 6px;
}
.it-empty {
    color: rgba(var(--accent-rgb), 0.4);
    font-style: italic;
    padding: 16px;
    text-align: center;
}
.it-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-bottom: 1px dashed rgba(var(--accent-rgb), 0.08);
    position: relative;
    transition: background 0.15s;
}
.it-row:hover { background: rgba(var(--accent-rgb), 0.05); }
.it-row.is-focused {
    outline: 1px solid rgba(var(--accent-rgb), 0.6);
    outline-offset: -1px;
    background: rgba(var(--accent-rgb), 0.07);
}
.it-row.it-done .it-title { text-decoration: line-through; opacity: 0.55; }
.it-row.it-cancelled { opacity: 0.5; }
.it-check {
    flex-shrink: 0;
    accent-color: rgba(var(--accent-rgb), 0.85);
    cursor: pointer;
}
.it-time {
    flex-shrink: 0;
    min-width: 56px;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--accent-rgb), 0.85);
    font-size: 12px;
    cursor: pointer;
}
.it-time-empty { color: rgba(var(--accent-rgb), 0.25); cursor: default; }
.it-time:hover:not(.it-time-empty) {
    background: rgba(var(--accent-rgb), 0.1);
    border-radius: 3px;
}
.it-title {
    flex: 1;
    min-width: 0;
    cursor: text;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.it-title-edit {
    background: rgba(var(--accent-rgb), 0.08);
    outline: 1px solid rgba(var(--accent-rgb), 0.5);
    padding: 2px 6px;
    border-radius: 3px;
    color: inherit;
    font-family: inherit;
    font-size: 13px;
    border: 0;
}
.it-meta {
    font-size: 10px;
    color: rgba(var(--accent-rgb), 0.6);
    flex-shrink: 0;
}
.it-draft, .it-cancelled-badge {
    font-size: 11px;
    flex-shrink: 0;
}
.it-delete-btn {
    opacity: 0.4;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 6px;
    flex-shrink: 0;
}
.it-row:hover .it-delete-btn { opacity: 0.85; }
.it-delete-btn:hover { color: #FF6B6B; }
.it-chip {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}
.it-chip-category-medico   { background: rgba(255, 107, 107, 0.15); color: #FF6B6B; }
.it-chip-category-trabajo  { background: rgba(107, 184, 255, 0.15); color: #6BB8FF; }
.it-chip-category-personal { background: rgba(167, 255, 107, 0.15); color: #A7FF6B; }
.it-chip-category-llamada  { background: rgba(255, 189, 107, 0.15); color: #FFBD6B; }
.it-chip-category-reunion  { background: rgba(207, 107, 255, 0.15); color: #CF6BFF; }
.it-chip-category-otro     { background: rgba(180, 180, 180, 0.15); color: #B4B4B4; }
.it-chip-priority-urgent {
    background: linear-gradient(90deg, #FF6B6B, #FF8B6B);
    color: #fff;
}
.it-chip-priority-high   { background: rgba(255, 179, 71, 0.18); color: #FFB347; }
.it-chip-priority-medium { background: rgba(255, 209, 102, 0.15); color: #FFD166; }
.it-chip-priority-low    { background: rgba(148, 163, 184, 0.18); color: #94A3B8; }
.it-chip-people {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(var(--accent-rgb), 0.07);
    color: rgba(var(--accent-rgb), 0.75);
    padding: 1px 6px;
    font-size: 10px;
    border-radius: 8px;
    flex-shrink: 0;
}
.it-undo-banner {
    background: #FF8B47;
    color: #1A1A1A;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    border-radius: 4px;
    margin-top: 10px;
    justify-content: space-between;
}
.it-undo-banner button {
    background: #1A1A1A;
    color: #FF8B47;
    border: 0;
    padding: 4px 12px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 3px;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.it-row-flash { animation: itFlash 1.6s ease; }
@keyframes itFlash {
    0%   { background: rgba(var(--accent-rgb), 0.35); }
    100% { background: transparent; }
}
.it-add-input {
    width: 100%;
    background: transparent;
    border: 1px dashed rgba(var(--accent-rgb), 0.25);
    padding: 8px 10px;
    color: inherit;
    font-family: inherit;
    font-size: 13px;
    margin-top: 10px;
    border-radius: 3px;
    box-sizing: border-box;
}
.it-add-input:focus {
    border-color: rgba(var(--accent-rgb), 0.7);
    border-style: solid;
    outline: none;
    background: rgba(var(--accent-rgb), 0.04);
}
.it-time-pop {
    position: absolute;
    z-index: 50;
    top: 100%;
    left: 0;
    background: rgba(15, 15, 15, 0.96);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 240px;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.it-time-pop input[type="datetime-local"] {
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: inherit;
    font-family: inherit;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 12px;
}
.it-time-pop button {
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 11px;
}
.it-time-pop button:hover { background: rgba(var(--accent-rgb), 0.2); }
.it-pending-delete { pointer-events: none; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  R E W O R K   E S T É T I C O — Bauhaus cyberpunk frío          ║
   ║  Se aplica al final para sobreescribir reglas previas con la     ║
   ║  misma especificidad. Sin tocar JS ni selectores.                ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── Nums tabulares en datos/contadores (legibilidad) ─────────────── */
.value, .hud-cost, .agenda-list time, .log-entry .ts,
.cost-table, .cost-table *, .msg-time, .wgt-event-time,
.tasks-pri-chip, .badge-num, .hud-alerts-badge {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ── Smooth transitions globales (suavizan hovers heredados) ─────── */
button, .btn, .btn-primary, .btn-danger, .btn-ghost,
.settings-tab, .tasks-chip, .tasks-item, .autom-cat-chip,
.widget-dock-btn, .panel-toggle, .hud-panel-toggle,
.settings-trigger, .skill-card, .model-card,
input[type="text"], input[type="password"], input[type="number"],
input[type="search"], textarea, select {
    transition:
        background-color 220ms var(--ease-out),
        border-color     220ms var(--ease-out),
        color            220ms var(--ease-out),
        box-shadow       220ms var(--ease-out),
        transform        220ms var(--ease-out);
}

/* ── Focus rings cyan visibles SIEMPRE (a11y) ─────────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.settings-tab:focus-visible,
.tasks-chip:focus-visible,
.widget-dock-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    box-shadow: var(--glow-soft);
}
/* En inputs, el focus-within ya da feedback — evitamos doble línea */
.input-wrap:focus-within #user-input:focus-visible,
.input-wrap:focus-within input:focus-visible,
.input-wrap:focus-within textarea:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ── Custom scrollbars finos con glow on hover ────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.30) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.22);
    border-radius: 3px;
    transition: background 220ms var(--ease-out);
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.55);
    box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.45);
}

/* ── HUD refinado ─────────────────────────────────────────────────── */
.hud {
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.hud-center h1 {
    font-size: var(--fs-display);
    letter-spacing: clamp(6px, 1.6vw, 12px);
    text-shadow:
        0 0 14px rgba(var(--accent-rgb), 0.55),
        0 0 28px rgba(var(--accent-rgb), 0.22);
}
.label {
    color: var(--text-3);
    letter-spacing: 3px;
    text-transform: uppercase;
}
.value {
    color: var(--jarvis-cyan);
    font-weight: 700;
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.45);
}
.hud-right > * + * { /* separadores sutiles entre grupos del HUD-right */
    position: relative;
}

/* Touch targets HUD ≥ 44px en cualquier tamaño */
.settings-trigger,
.hud-panel-toggle,
.hud-cost,
.hud-alerts,
.hud-secondbrain,
.hud-manual,
.hud-proactive-voice,
.hud-dnd {
    min-width: 36px;
    min-height: 36px;
}
@media (hover: none) and (pointer: coarse) {
    .settings-trigger, .hud-panel-toggle,
    .hud-cost, .hud-alerts, .hud-secondbrain,
    .hud-manual, .hud-proactive-voice, .hud-dnd {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ── Stage brackets más sutiles y elegantes ───────────────────────── */
.stage::before, .stage::after {
    border-color: rgba(var(--accent-rgb), 0.40);
    width: 26px;
    height: 26px;
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.10);
}

/* ── Subtítulo flotante: tipografía mejor con leading airoso ──────── */
.subtitle-overlay {
    line-height: 1.55;
    letter-spacing: 0.4px;
    color: var(--text-1);
    text-shadow:
        0 0 14px rgba(var(--accent-rgb), 0.45),
        0 2px 10px rgba(0, 0, 0, 0.85);
}

/* ── Dialogue panel: glassmorphism sobrio nivel 2 ─────────────────── */
.dialogue-panel {
    background: var(--surface-2);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    border-color: var(--border-default);
    border-radius: var(--r-lg);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.55),
        inset 0 0 32px rgba(var(--accent-rgb), 0.04);
}
.panel-header {
    border-bottom-color: var(--border-subtle);
    color: var(--jarvis-cyan);
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.35);
}

/* ── Burbujas chat refinadas ──────────────────────────────────────── */
.msg {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-lg);
    line-height: 1.5;
    transition: transform 200ms var(--ease-out),
                box-shadow 200ms var(--ease-out);
}
.msg:hover {
    transform: translateY(-1px);
}
.msg.user {
    border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
    background: linear-gradient(135deg, rgba(120, 230, 200, 0.16), rgba(80, 200, 170, 0.10));
    border-color: rgba(120, 230, 200, 0.32);
    box-shadow: 0 2px 10px rgba(80, 200, 170, 0.10);
}
.msg.user:hover {
    box-shadow: 0 6px 18px rgba(80, 200, 170, 0.18);
}
.msg.jarvis {
    border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm);
    background: rgba(var(--accent-rgb), 0.09);
    border-color: rgba(var(--accent-rgb), 0.30);
    box-shadow: 0 2px 14px rgba(var(--accent-rgb), 0.08);
}
.msg.jarvis:hover {
    box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.18);
}
.msg.system {
    color: var(--text-3);
    letter-spacing: 1.8px;
}

/* ── Input bar refinado: focus state cinematográfico ──────────────── */
.input-bar {
    border-top: 1px solid var(--border-subtle);
    background: linear-gradient(0deg, rgba(var(--accent-rgb), 0.06), transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.input-wrap {
    border-radius: var(--r-md);
    border-color: var(--border-default);
    background: rgba(0, 0, 0, 0.42);
    transition: border-color 220ms var(--ease-out),
                box-shadow   220ms var(--ease-out),
                background   220ms var(--ease-out);
}
.input-wrap:hover {
    border-color: var(--border-strong);
}
.input-wrap:focus-within {
    border-color: var(--border-focus);
    background: rgba(0, 0, 0, 0.55);
    box-shadow:
        0 0 0 3px rgba(var(--accent-rgb), 0.10),
        0 0 24px rgba(var(--accent-rgb), 0.30),
        inset 0 0 18px rgba(var(--accent-rgb), 0.04);
}
#user-input {
    font-size: var(--fs-md);
    letter-spacing: 0.4px;
}
#send-btn, #reset-btn, #mic-btn {
    border-radius: var(--r-md);
    transition: background 200ms var(--ease-out),
                border-color 200ms var(--ease-out),
                box-shadow 200ms var(--ease-out),
                transform 120ms var(--ease-out);
}
#send-btn:hover, #reset-btn:hover, #mic-btn:hover {
    box-shadow: var(--glow-medium);
    transform: translateY(-1px);
}
#send-btn:active, #reset-btn:active, #mic-btn:active {
    transform: scale(0.96);
}

/* ── Settings overlay + panel: blur y stagger ─────────────────────── */
.settings-overlay {
    background: rgba(2, 6, 12, 0.82);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
}
.settings-panel {
    background: linear-gradient(135deg,
        rgba(8, 16, 28, 0.96),
        rgba(2, 7, 13, 0.96));
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.65),
        0 0 60px rgba(var(--accent-rgb), 0.15),
        inset 0 0 40px rgba(var(--accent-rgb), 0.04);
}
.settings-sidebar {
    border-right-color: var(--border-subtle);
}
.settings-section {
    animation: sectionIn 320ms var(--ease-out) both;
}
.settings-section > * { animation: itemIn 360ms var(--ease-out) both; }
.settings-section > *:nth-child(1) { animation-delay: 40ms; }
.settings-section > *:nth-child(2) { animation-delay: 90ms; }
.settings-section > *:nth-child(3) { animation-delay: 140ms; }
.settings-section > *:nth-child(4) { animation-delay: 190ms; }
.settings-section > *:nth-child(5) { animation-delay: 240ms; }
.settings-section > *:nth-child(6) { animation-delay: 290ms; }
@keyframes sectionIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes itemIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.settings-tab:hover { color: var(--text-1); }
.settings-tab.active {
    color: var(--jarvis-cyan);
    text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.55);
}

/* ── Dock widgets: tooltips CSS-only + glow ───────────────────────── */
.widget-dock-btn {
    position: relative;
    border-radius: var(--r-md);
    background: var(--surface-1);
    border-color: var(--border-default);
}
.widget-dock-btn:hover,
.widget-dock-btn.active {
    border-color: var(--border-strong);
    box-shadow: var(--glow-medium);
    background: rgba(var(--accent-rgb), 0.10);
    transform: translateX(2px);
}
.widget-dock-btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    background: var(--surface-3);
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    color: var(--text-1);
    font-size: 11px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.55), var(--glow-soft);
    z-index: var(--z-toast);
    animation: tooltipIn 160ms var(--ease-out);
}
@keyframes tooltipIn {
    from { opacity: 0; transform: translate(-4px, -50%); }
    to   { opacity: 1; transform: translate(0, -50%); }
}
@media (hover: none) and (pointer: coarse) {
    .widget-dock-btn[title]:hover::after { display: none; }
    .widget-dock-btn { width: 44px; height: 44px; }
}

/* ── Cards / items hover lift ─────────────────────────────────────── */
.skill-card:hover,
.model-card:hover,
.tasks-item:hover,
.autom-block.enabled:hover {
    transform: translateY(-1px);
}
@media (hover: none) and (pointer: coarse) {
    .skill-card:hover,
    .model-card:hover,
    .tasks-item:hover,
    .autom-block.enabled:hover { transform: none; }
}

/* ── Toggle switch refinado (autom-toggle, etc.) ──────────────────── */
.autom-toggle-slider {
    transition: background 220ms var(--ease-out);
}
.autom-toggle input:checked + .autom-toggle-slider {
    background: rgba(var(--accent-rgb), 0.50);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.30);
}
.autom-toggle-slider:before {
    transition: transform 220ms var(--ease-spring),
                background 220ms var(--ease-out);
}

/* ── Modales: cerrar buttons hit-area mínimo ──────────────────────── */
.settings-close,
.token-dashboard-close,
.skill-gen-close,
.modal-close,
.holo-close {
    min-width: 44px;
    min-height: 44px;
}

/* ── Selección de texto con tinte cyan ────────────────────────────── */
::selection {
    background: rgba(var(--accent-rgb), 0.32);
    color: var(--text-1);
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.45);
}
::-moz-selection {
    background: rgba(var(--accent-rgb), 0.32);
    color: var(--text-1);
}

/* ── Loaders / spinners adaptados al cyan ─────────────────────────── */
.spinner, .loader {
    color: var(--jarvis-cyan);
    filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.45));
}

/* ── Color helpers semánticos para alertas ────────────────────────── */
.value.online { color: var(--jarvis-cyan); }
.value.offline {
    color: rgb(var(--accent-magenta-rgb));
    text-shadow: 0 0 10px rgba(var(--accent-magenta-rgb), 0.55);
}
.value.warning {
    color: rgb(var(--accent-amber-rgb));
    text-shadow: 0 0 10px rgba(var(--accent-amber-rgb), 0.55);
}

/* ── Tipografía base más airosa ───────────────────────────────────── */
body { font-feature-settings: "tnum" 1, "ss01" 1; }
h1, h2, h3 { font-family: 'Orbitron', sans-serif; letter-spacing: 0.06em; }

/* ── prefers-reduced-motion: cubrir las nuevas animaciones ────────── */
@media (prefers-reduced-motion: reduce) {
    .msg:hover,
    .skill-card:hover,
    .model-card:hover,
    .tasks-item:hover,
    .autom-block.enabled:hover,
    .widget-dock-btn:hover,
    #send-btn:hover, #reset-btn:hover, #mic-btn:hover {
        transform: none !important;
    }
    .settings-section,
    .settings-section > * {
        animation: none !important;
    }
    .widget-dock-btn[title]:hover::after { animation: none !important; }
}

/* ── Vignette extra muy sutil sobre el stage para profundidad ─────── */
.stage::before, .stage::after { /* asegurar visibilidad sobre fondo */
    z-index: 2;
}

/* ── Forzar contraste mínimo en text-3/dim sobre surface profundo ── */
.label,
.hud-left .label, .hud-right .label,
.subtitle,
.tasks-filter-label,
.autom-num-label,
.field-help,
.msg.system {
    color: var(--text-3);
}

/* ── Botones primarios refinados ──────────────────────────────────── */
.btn, .btn-primary {
    border-radius: var(--r-md);
    letter-spacing: 0.5px;
}
.btn-primary {
    background: linear-gradient(135deg,
        rgba(var(--accent-rgb), 0.22),
        rgba(var(--accent-rgb), 0.12));
    border: 1px solid var(--border-strong);
    color: var(--jarvis-cyan);
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.35);
}
.btn-primary:hover {
    background: linear-gradient(135deg,
        rgba(var(--accent-rgb), 0.32),
        rgba(var(--accent-rgb), 0.18));
    box-shadow: var(--glow-medium);
    transform: translateY(-1px);
}
.btn-danger {
    border-radius: var(--r-md);
    color: rgb(var(--accent-magenta-rgb));
    border-color: rgba(var(--accent-magenta-rgb), 0.45);
}
.btn-danger:hover {
    background: rgba(var(--accent-magenta-rgb), 0.12);
    box-shadow: 0 0 18px rgba(var(--accent-magenta-rgb), 0.25);
}
@media (hover: none) and (pointer: coarse) {
    .btn-primary:hover { transform: none; }
}

/* ── Stagger entrada para items de listas largas (sutil) ──────────── */
.tasks-list .tasks-item,
.skills-grid .skill-card,
.dialogue .msg {
    animation-fill-mode: both;
}

/* ── Final: fix z-index del subtítulo para no chocar con dock ─────── */
.subtitle-overlay { z-index: var(--z-subtitle); }
#widget-dock     { z-index: var(--z-dock); }
.hud             { z-index: var(--z-hud); }
.settings-overlay { z-index: var(--z-overlay); }
.toast            { z-index: var(--z-toast); }

/* ╚══════════════════════════════════════════════════════════════════╝ */