/* Dock institucional y temas de espacio de trabajo. El drawer móvil conserva su navegación original. */
:root {
    --workspace-accent: #6687b3;
    --workspace-accent-strong: #5279aa;
    --workspace-canvas: #e9eef4;
    --workspace-surface: #ffffff;
    --workspace-ink: #0f172a;
    --workspace-muted: #64748b;
    --workspace-line: #e2e8f0;
    --workspace-sidebar: #425573;
    --workspace-dock: #2d3d56;
    --workspace-header: #2d3c53;
    --workspace-header-ink: #ffffff;
}

html[data-workspace-theme="light-emerald"] {
    --workspace-accent: #10b981;
    --workspace-accent-strong: #059669;
    --workspace-canvas: #f6f7fb;
    --workspace-sidebar: #f6f7fb;
    --workspace-dock: #f4f8fb;
    --workspace-header: #ffffff;
    --workspace-header-ink: #0f172a;
}

html[data-workspace-theme="midnight-cyan"] {
    --workspace-accent: #13e6eb;
    --workspace-accent-strong: #08cbd5;
    --workspace-canvas: #121a2d;
    --workspace-surface: #151c2f;
    --workspace-ink: #f8fafc;
    --workspace-muted: #aab6c8;
    --workspace-line: #334761;
    --workspace-sidebar: #0c1323;
    --workspace-dock: #131e30;
    --workspace-header: #0f1a2c;
    --workspace-header-ink: #ffffff;
    color-scheme: dark;
    --pi-bg: #121a2d !important;
    --pi-surface: #151c2f !important;
    --pi-surface-soft: #1a2940 !important;
    --pi-border: #334761 !important;
    --pi-text: #f8fafc !important;
    --pi-muted: #aab6c8 !important;
    --pi-primary: #08cbd5 !important;
    --pi-primary-hover: #13e6eb !important;
    --pi-accent: #13e6eb !important;
    --pi-sidebar-bg: #0c1323 !important;
}

/* El motor heredado y los módulos consumen --pi-*. Se fijan aquí para que
   todos los tableros pertenezcan a la misma paleta aprobada. */
html[data-workspace-theme="slate-light"],
html[data-workspace-theme="light-emerald"] {
    color-scheme: light;
    --pi-bg: var(--workspace-canvas) !important;
    --pi-surface: #ffffff !important;
    --pi-surface-soft: #f3f6f9 !important;
    --pi-border: #d6dee8 !important;
    --pi-text: #111827 !important;
    --pi-muted: #526171 !important;
    --pi-primary: var(--workspace-accent-strong) !important;
    --pi-primary-hover: var(--workspace-accent) !important;
    --pi-accent: var(--workspace-accent) !important;
    --pi-sidebar-bg: var(--workspace-sidebar) !important;
}

.workspace-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.25rem;
    padding: .35rem .55rem;
    border: 1px solid var(--workspace-line);
    border-radius: .8rem;
    color: var(--workspace-ink);
    background: rgba(255,255,255,.96);
    font-size: .72rem;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(15,23,42,.07);
}
.workspace-theme-toggle > svg { width: 1rem; height: 1rem; color: var(--workspace-accent-strong); }
.workspace-theme-switch { width: 2.5rem; height: 1rem; padding: .125rem; border-radius: 999px; background: #91a4ba; }
.workspace-theme-switch span { display: block; width: .75rem; height: .75rem; border-radius: 50%; background: white; transition: transform .2s ease; }
html[data-workspace-theme="light-emerald"] .workspace-theme-switch { background: var(--workspace-accent); }
html[data-workspace-theme="light-emerald"] .workspace-theme-switch span { transform: translateX(.75rem); }
html[data-workspace-theme="midnight-cyan"] .workspace-theme-toggle { background: #151c2f; color: #fff; border-color: #3a506c; }
html[data-workspace-theme="midnight-cyan"] .workspace-theme-switch { background: #13e6eb; }
html[data-workspace-theme="midnight-cyan"] .workspace-theme-switch span { transform: translateX(1.5rem); }

html[data-workspace-theme] #app-shell > main { background: var(--workspace-canvas); color: var(--workspace-ink); }
html[data-workspace-theme] #app-shell > main > header {
    background: var(--workspace-header) !important;
    border-color: var(--workspace-line) !important;
    color: var(--workspace-header-ink);
    box-shadow: 0 1px 10px rgba(15,23,42,.08);
}
html[data-workspace-theme="slate-light"] #app-shell > main > header .text-slate-100,
html[data-workspace-theme="slate-light"] #app-shell > main > header .text-slate-200,
html[data-workspace-theme="slate-light"] #app-shell > main > header .text-slate-300 { color: #fff !important; }
html[data-workspace-theme="slate-light"] #app-shell > main > header .text-slate-400,
html[data-workspace-theme="slate-light"] #app-shell > main > header .text-slate-500 { color: #d9e3ef !important; }
html[data-workspace-theme] #app-shell > main > div { background: var(--workspace-canvas); }
html[data-workspace-theme] #app-shell > main .bg-slate-950,
html[data-workspace-theme] #app-shell > main .bg-slate-950\/70,
html[data-workspace-theme] #app-shell > main .bg-slate-900,
html[data-workspace-theme] #app-shell > main .bg-slate-900\/70,
html[data-workspace-theme] #app-shell > main .bg-slate-800 { background-color: var(--workspace-surface) !important; }
html[data-workspace-theme] #app-shell > main .border-slate-800,
html[data-workspace-theme] #app-shell > main .border-slate-700 { border-color: var(--workspace-line) !important; }
html[data-workspace-theme] #app-shell > main .text-slate-100,
html[data-workspace-theme] #app-shell > main .text-slate-200,
html[data-workspace-theme] #app-shell > main .text-slate-300 { color: var(--workspace-ink) !important; }
html[data-workspace-theme] #app-shell > main .text-slate-400,
html[data-workspace-theme] #app-shell > main .text-slate-500 { color: var(--workspace-muted) !important; }
html[data-workspace-theme] #app-shell > main input,
html[data-workspace-theme] #app-shell > main select,
html[data-workspace-theme] #app-shell > main textarea { color: var(--workspace-ink); border-color: var(--workspace-line); }

/* Normalización de tableros: tarjetas, calendarios, tablas y formularios. */
html[data-workspace-theme] body,
html[data-workspace-theme] #app-shell { background: var(--workspace-canvas) !important; }
html[data-workspace-theme] #app-shell > main section [class*="-card"]:not([class*="badge"]),
html[data-workspace-theme] #app-shell > main section [class*="-panel"],
html[data-workspace-theme] #app-shell > main section [class*="-metric"],
html[data-workspace-theme] #app-shell > main section [class*="-hero"],
html[data-workspace-theme] #app-shell > main section .card-metrica,
html[data-workspace-theme] #app-shell > main section .bg-slate-950.border {
    background: #fff !important;
    border-color: #d6dee8 !important;
    color: #111827 !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.055) !important;
}
html[data-workspace-theme] #app-shell > main section [class*="-card"]::before,
html[data-workspace-theme] #app-shell > main section [class*="-panel"]::before,
html[data-workspace-theme] #app-shell > main section [class*="-hero"]::before { opacity: .08 !important; }
html[data-workspace-theme] #app-shell > main section h1,
html[data-workspace-theme] #app-shell > main section h2,
html[data-workspace-theme] #app-shell > main section h3,
html[data-workspace-theme] #app-shell > main section h4,
html[data-workspace-theme] #app-shell > main section p,
html[data-workspace-theme] #app-shell > main section label,
html[data-workspace-theme] #app-shell > main section td { color: #172033; }
html[data-workspace-theme] #app-shell > main section table { background: #fff; color: #172033; }
html[data-workspace-theme] #app-shell > main section th { background: #edf2f7 !important; color: #263548 !important; border-color: #d6dee8 !important; }
html[data-workspace-theme] #app-shell > main section td { background: #fff; border-color: #e1e7ee !important; }
html[data-workspace-theme] #app-shell > main .ci-calendar-grid { background: #d6dee8 !important; border-color: #d6dee8 !important; }
html[data-workspace-theme] #app-shell > main .ci-weekday { background: #edf2f7 !important; color: #35445a !important; }
html[data-workspace-theme] #app-shell > main .ci-day,
html[data-workspace-theme] #app-shell > main .ci-mini-month,
html[data-workspace-theme] #app-shell > main .ci-week-column,
html[data-workspace-theme] #app-shell > main .ci-checklist-card,
html[data-workspace-theme] #app-shell > main .ci-agenda-item,
html[data-workspace-theme] #app-shell > main .ci-personal-pending { background: #fff !important; color: #172033 !important; border-color: #d6dee8 !important; }
html[data-workspace-theme] #app-shell > main .ci-day-muted { background: #f5f7fa !important; color: #708094 !important; }
html[data-workspace-theme] #app-shell > main .ci-day-number,
html[data-workspace-theme] #app-shell > main .ci-mini-title,
html[data-workspace-theme] #app-shell > main .ci-week-heading { color: #172033 !important; }
html[data-workspace-theme] #app-shell > main .ci-week-heading { background: #edf2f7 !important; }
html[data-workspace-theme] #app-shell > main section input,
html[data-workspace-theme] #app-shell > main section select,
html[data-workspace-theme] #app-shell > main section textarea,
html[data-workspace-theme] #app-shell > main .ci-input,
html[data-workspace-theme] #app-shell > main .sn-ent-input { background: #fff !important; color: #172033 !important; border-color: #cbd5e1 !important; }
html[data-workspace-theme="slate-light"] #app-shell > main section [class*="-tab"].active,
html[data-workspace-theme="slate-light"] #app-shell > main section [class*="-btn-primary"] { background: #5279aa !important; color: #fff !important; }
html[data-workspace-theme="light-emerald"] #app-shell > main section [class*="-tab"].active,
html[data-workspace-theme="light-emerald"] #app-shell > main section [class*="-btn-primary"] { background: #059669 !important; color: #fff !important; }

/* Tercera vista: azul petróleo nocturno y cian, medida desde la referencia. */
html[data-workspace-theme="midnight-cyan"] body,
html[data-workspace-theme="midnight-cyan"] #app-shell,
html[data-workspace-theme="midnight-cyan"] #app-shell > main,
html[data-workspace-theme="midnight-cyan"] #app-shell > main > div { background: #121a2d !important; color: #f8fafc !important; }
html[data-workspace-theme="midnight-cyan"] #app-shell > main section [class*="-card"]:not([class*="badge"]),
html[data-workspace-theme="midnight-cyan"] #app-shell > main section [class*="-panel"],
html[data-workspace-theme="midnight-cyan"] #app-shell > main section [class*="-metric"],
html[data-workspace-theme="midnight-cyan"] #app-shell > main section [class*="-hero"],
html[data-workspace-theme="midnight-cyan"] #app-shell > main section .card-metrica,
html[data-workspace-theme="midnight-cyan"] #app-shell > main section .bg-slate-950.border { background: #151c2f !important; border-color: #334761 !important; color: #f8fafc !important; box-shadow: 0 8px 24px rgba(0,0,0,.24) !important; }
html[data-workspace-theme="midnight-cyan"] #app-shell > main section h1,
html[data-workspace-theme="midnight-cyan"] #app-shell > main section h2,
html[data-workspace-theme="midnight-cyan"] #app-shell > main section h3,
html[data-workspace-theme="midnight-cyan"] #app-shell > main section h4,
html[data-workspace-theme="midnight-cyan"] #app-shell > main section p,
html[data-workspace-theme="midnight-cyan"] #app-shell > main section label,
html[data-workspace-theme="midnight-cyan"] #app-shell > main section td { color: #eef5ff; }
html[data-workspace-theme="midnight-cyan"] #app-shell > main section table,
html[data-workspace-theme="midnight-cyan"] #app-shell > main section td { background: #151c2f !important; border-color: #334761 !important; color: #eef5ff !important; }
html[data-workspace-theme="midnight-cyan"] #app-shell > main section th,
html[data-workspace-theme="midnight-cyan"] #app-shell > main .ci-weekday,
html[data-workspace-theme="midnight-cyan"] #app-shell > main .ci-week-heading { background: #1a2940 !important; color: #dce7f5 !important; border-color: #334761 !important; }
html[data-workspace-theme="midnight-cyan"] #app-shell > main .ci-calendar-grid { background: #334761 !important; border-color: #334761 !important; }
html[data-workspace-theme="midnight-cyan"] #app-shell > main .ci-day,
html[data-workspace-theme="midnight-cyan"] #app-shell > main .ci-mini-month,
html[data-workspace-theme="midnight-cyan"] #app-shell > main .ci-week-column,
html[data-workspace-theme="midnight-cyan"] #app-shell > main .ci-checklist-card,
html[data-workspace-theme="midnight-cyan"] #app-shell > main .ci-agenda-item,
html[data-workspace-theme="midnight-cyan"] #app-shell > main .ci-personal-pending { background: #151c2f !important; color: #eef5ff !important; border-color: #334761 !important; }
html[data-workspace-theme="midnight-cyan"] #app-shell > main section input,
html[data-workspace-theme="midnight-cyan"] #app-shell > main section select,
html[data-workspace-theme="midnight-cyan"] #app-shell > main section textarea { background: #0f1a2c !important; color: #f8fafc !important; border-color: #3a506c !important; }
html[data-workspace-theme="midnight-cyan"] #app-shell > main section [class*="-tab"].active,
html[data-workspace-theme="midnight-cyan"] #app-shell > main section [class*="-btn-primary"] { background: #08cbd5 !important; color: #06111e !important; }
html[data-workspace-theme="midnight-cyan"] #liam-panel { background: rgba(15,26,44,.96) !important; color: #f8fafc !important; border-color: #13e6eb !important; }
html[data-workspace-theme="midnight-cyan"] #liam-panel > header,
html[data-workspace-theme="midnight-cyan"] #liam-panel .liam-actions button,
html[data-workspace-theme="midnight-cyan"] #liam-panel .liam-conversation > div,
html[data-workspace-theme="midnight-cyan"] #liam-panel .liam-composer textarea { background: #151c2f !important; color: #f8fafc !important; border-color: #3a506c !important; }

/* LIAM conserva la tarjeta clara y translúcida de la referencia en ambas vistas. */
html[data-workspace-theme] .liam-panel {
    border-color: rgba(148,163,184,.42) !important;
    background: rgba(248,250,252,.94) !important;
    color: #0f172a !important;
    box-shadow: 0 24px 70px rgba(15,23,42,.24) !important;
    backdrop-filter: blur(18px);
}
html[data-workspace-theme] .liam-panel > header { background: rgba(248,250,252,.94) !important; border-color: #e2e8f0 !important; }
html[data-workspace-theme] .liam-panel > header b { color: #0f172a !important; }
html[data-workspace-theme] .liam-panel > header small,
html[data-workspace-theme] .liam-content > p { color: #475569 !important; }
html[data-workspace-theme] .liam-stage { background: radial-gradient(circle at 50% 82%, color-mix(in srgb, var(--workspace-accent) 24%, transparent), transparent 60%) !important; }
html[data-workspace-theme] .liam-actions button,
html[data-workspace-theme] .liam-composer button,
html[data-workspace-theme] .liam-conversation > div { background: rgba(255,255,255,.86) !important; color: #172033 !important; border-color: #d5dde7 !important; }
html[data-workspace-theme] .liam-composer button[data-action="realtime"] { background: var(--workspace-accent-strong) !important; color: #fff !important; }
html[data-workspace-theme] .liam-composer textarea { background: #fff !important; color: #172033 !important; border-color: #cbd5e1 !important; }

@media (min-width: 1025px) {
    html[data-workspace-nav="dock"] #sidebar-institucional {
        width: 230px !important;
        min-width: 230px;
        padding: .65rem !important;
        overflow-x: visible;
        background: var(--workspace-sidebar) !important;
        transition: background .2s ease;
        z-index: 40;
    }
    html[data-workspace-nav="dock"] #sidebar-institucional::before { content: ''; position: absolute; inset: 8px auto 8px 8px; width: 56px; border: 1px solid rgba(148,163,184,.28); border-radius: 12px; background: var(--workspace-dock); box-shadow: 0 8px 24px rgba(15,23,42,.09); }
    html[data-workspace-nav="dock"] #sidebar-institucional > div:first-child { position: relative; width: 54px; z-index: 1; }
    html[data-workspace-nav="dock"] #sidebar-institucional > div:first-child > div:first-child { justify-content: center; padding: .55rem 0 1rem; margin-bottom: .75rem; border-color: transparent; }
    html[data-workspace-nav="dock"] #sidebar-institucional > div:first-child > div:first-child > div:last-child,
    html[data-workspace-nav="dock"] #sidebar-institucional > div:last-child { display: none; }
    html[data-workspace-nav="dock"] .pi-menu-institucional { gap: .32rem; }
    html[data-workspace-nav="dock"] .pi-menu-group { position: static; overflow: visible; border: 0; border-radius: .85rem; background: transparent; box-shadow: none; }
    html[data-workspace-nav="dock"] .pi-menu-group-toggle {
        position: relative; width: 52px; height: 46px; padding: 0; justify-content: center; border-radius: .8rem;
        color: #dbe5f0; font-size: 0; background: transparent;
    }
    html[data-workspace-theme="light-emerald"][data-workspace-nav="dock"] .pi-menu-group-toggle { color: #526171; }
    html[data-workspace-nav="dock"] .pi-menu-group-toggle:hover,
    html[data-workspace-nav="dock"] .pi-menu-group-toggle:focus-visible,
    html[data-workspace-nav="dock"] .pi-menu-group-active .pi-menu-group-toggle { color: white; background: var(--workspace-accent-strong); outline: none; }
    html[data-workspace-nav="dock"] .pi-menu-group-active .pi-menu-group-toggle::after { content: ''; position: absolute; left: -8px; width: 3px; height: 22px; border-radius: 4px; background: var(--workspace-accent); }
    html[data-workspace-nav="dock"] .pi-menu-group-toggle span { justify-content: center; }
    html[data-workspace-nav="dock"] .pi-menu-group-toggle svg:first-child { width: 21px; height: 21px; color: currentColor; filter: none; }
    html[data-workspace-nav="dock"] .pi-menu-chevron { display: none; }
    html[data-workspace-nav="dock"] .pi-menu-group-items,
    html[data-workspace-nav="dock"] .pi-menu-group[data-open="true"] .pi-menu-group-items { display: none; }
    html[data-workspace-nav="dock"] .pi-menu-group.dock-flyout-open .pi-menu-group-items {
        display: flex; position: fixed; left: 73px; z-index: 100; width: 170px; max-height: min(520px, calc(100vh - 24px)); overflow-y: auto;
        padding: .65rem; border: 1px solid rgba(148,163,184,.22); border-radius: .7rem;
        background: rgba(255,255,255,.97); box-shadow: 0 10px 30px rgba(15,23,42,.16); backdrop-filter: blur(18px);
    }
    html[data-workspace-nav="dock"] .pi-menu-group.dock-flyout-open .pi-menu-group-items::before {
        display: none;
    }
    html[data-workspace-nav="dock"] .pi-menu-group.dock-flyout-open .pi-menu-item,
    html[data-workspace-nav="dock"] .pi-menu-group.dock-flyout-open .pi-menu-placeholder {
        color: #000 !important;
        padding: .55rem .72rem;
        font-size: .92rem;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: .005em;
    }
    html[data-workspace-nav="dock"] .pi-menu-group.dock-flyout-open .pi-menu-item svg,
    html[data-workspace-nav="dock"] .pi-menu-group.dock-flyout-open .pi-menu-placeholder svg { display: none; }
    html[data-workspace-nav="dock"] .pi-menu-group.dock-flyout-open .pi-menu-item:hover,
    html[data-workspace-nav="dock"] .pi-menu-group.dock-flyout-open .pi-menu-item[data-dock-selected="true"] {
        color: #000 !important;
        background: #e7edf4 !important;
        border-color: #c8d3df !important;
        transform: none;
    }
    html[data-workspace-theme="light-emerald"][data-workspace-nav="dock"] .pi-menu-group.dock-flyout-open .pi-menu-item:hover,
    html[data-workspace-theme="light-emerald"][data-workspace-nav="dock"] .pi-menu-group.dock-flyout-open .pi-menu-item[data-dock-selected="true"] { background: #e3f5ef !important; border-color: #a7dcca !important; }
    html[data-workspace-nav="dock"] .pi-menu-item small,
    html[data-workspace-nav="dock"] .pi-menu-placeholder small { display: none !important; }
    html[data-workspace-nav="dock"] .pi-menu-group.dock-flyout-open .pi-menu-item-active { color: #000 !important; background: #dce6f1 !important; box-shadow: none; }
}

@media (max-width: 1024px) {
    .workspace-theme-toggle [data-theme-label] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .workspace-theme-switch span, #sidebar-institucional { transition: none !important; }
}