/* Lugo network — shared design system.
 *
 * Unifica paleta, tipografía y componentes que viven duplicados en las
 * páginas custom (home, kanban, imports, pendientes-revision, etc.).
 * Importar al inicio del <head>:
 *
 *   <link rel="stylesheet" href="/networks/lugo-inversio-medicio/_lib/lugo-shared.css">
 *
 * Cualquier página puede sobrescribir variables / componentes en su
 * <style> propio si necesita estética distinta (proyecto-dashboard
 * usa overrides para tema oscuro). Convención: las variables se
 * declaran en :root aquí; los overrides ad-hoc redefinen variables o
 * añaden clases específicas — nunca reescriban estas reglas base.
 */

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

:root {
    /* Paleta — Apple/iOS inspirada, modo claro */
    --bg: #F4F6FA;   /* off-white frío y limpio (light v2 — más blanco, plan 000015) */
    --card: #FFFFFF;
    --border: #E8E8ED;
    --text: #1D1D1F;
    --text2: #86868B;
    --text3: #AEAEB2;

    /* Color accents (semánticos — siguen usándose en badges/SLA/urgencia) */
    --blue: #007AFF;
    --red: #FF3B30;
    --orange: #FF9500;
    --green: #34C759;
    --purple: #5856D6;
    --yellow: #FFD60A;
    --gray: #8E8E93;

    /* Marca Occident (plan brand-refresh — accent primario). Reemplaza
     * gradualmente a `--blue` en botones primarios y estados "activos"
     * de navegación. Los semánticos de arriba siguen para badges. */
    --occident-red: #E30613;
    --occident-red-dark: #B00012;
    --occident-red-light: #FDEBEC;
    --occident-red-bg: #FFF1F2;

    /* Neutros alineados con la referencia del cliente (más fríos que
     * los Apple). Convivimos con `--bg`/`--card`/etc. — los neutrales
     * nuevos los usan sidebar + app-shell. */
    --neutral-bg: #F8F9FB;
    --neutral-surface: #FFFFFF;
    --neutral-border: #E5E7EB;
    --neutral-text: #111827;
    --neutral-text-2: #4B5563;
    --neutral-text-3: #6B7280;

    /* Dark backdrop — usar solo cuando la página declara tema oscuro */
    --dark-bg: #1a1e2e;
    --dark-card: #252a3d;
    --dark-text: #e6e8f0;

    /* Geometry */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);

    --transition: 200ms cubic-bezier(0.25, 0.1, 0.25, 1);

    /* Escala de superficies + estados (plan 000014). Light = valores actuales
     * (el modo claro NO cambia). El dark los redefine abajo. */
    --col-bg: #F2F2F7;          /* tracks / insets (barras de progreso, hovers) */
    --kanban-col: #FFFFFF;      /* columnas kanban — blancas (light v2, plan 000015) */
    --card-bd: rgba(0,0,0,0.06);/* hairline de card en claro (separa de columna blanca) */
    --surface-nav: #FFFFFF;     /* sidebar / header */
    --surface-panel: #FFFFFF;   /* drawer derecho (nivel 3) */
    --surface-box: #F9F9FB;     /* cajas internas (contacto/gestor/resumen) */
    --surface-input: #F2F2F7;   /* buscador, filtros, inputs */
    --border-subtle: rgba(0,0,0,0.06);
    --scrollbar-thumb: #D2D2D7;
    --scrollbar-thumb-hover: #AEAEB2;
    --text-faint: #D2D2D7;      /* iconos empty-state / placeholders muy sutiles */
    /* Estados por intención (light = tinte suave) */
    --state-critical-bg: rgba(255,59,48,0.10);  --state-critical-fg: #FF3B30;
    --state-warning-bg:  rgba(255,149,0,0.12);   --state-warning-fg:  #C97A00;
    --state-success-bg:  rgba(52,199,89,0.12);   --state-success-fg:  #1E8E3E;
    --state-info-bg:     rgba(0,122,255,0.10);   --state-info-fg:     #007AFF;
    --state-neutral-bg:  #F2F2F7;                --state-neutral-fg:  #6E6E73;
    /* Separación de rojos (plan 000014): focus y links NO usan rojo de marca.
     * Rojo = marca (logo/CTA) + crítico/error. Focus/links = azul. */
    --link: #007AFF;  --link-hover: #0056B3;
    --focus-ring: rgba(0,122,255,0.30);  --focus-border: var(--blue);
    --kpi-alert-bg: linear-gradient(180deg, #FFF, #FFF6F5);   /* KPI crítico */
}

/* ── Modo oscuro (plan 000013 A.8) ──────────────────────────────
 * Override de tokens. Gris azulado oscuro (no negro puro), rojo
 * Occident conservado. Se activa con html[data-theme="dark"]. */
html[data-theme="dark"] {
    /* Escala de elevación v2 (plan 000014): app < columna < card < panel < box.
     * Fondo un punto más claro que v1 (#15171f→#181b22) y pasos nítidos. */
    --bg: #181b22;              /* nivel 0 — canvas */
    --col-bg: #1e222b;          /* tracks / insets */
    --kanban-col: #1e222b;      /* columnas kanban */
    --card-bd: transparent;     /* sin borde en dark — elevación por superficie+sombra */
    --card: #272c37;            /* nivel 2 — cards (claramente > columna) */
    --surface-nav: #1c2029;     /* sidebar / header */
    --surface-panel: #2a3039;   /* nivel 3 — drawer derecho (elevado) */
    --surface-box: #2f3542;     /* cajas internas del panel */
    --surface-input: #232834;   /* buscador / filtros / inputs */
    --border: #333a47;          /* más perceptible que v1 (#2c2f3a) */
    --border-subtle: rgba(255,255,255,0.07);
    --scrollbar-thumb: rgba(255,255,255,0.14);
    --scrollbar-thumb-hover: rgba(255,255,255,0.28);
    --text: #f2f4f9;            /* títulos / principal — más luminoso */
    --text2: #aab2c0;           /* secundario / descripción */
    --text3: #7b8493;           /* caption / metadatos */
    --text-faint: #4a525f;      /* empty-state / placeholders */
    --neutral-bg: #181b22;
    --neutral-surface: #1c2029;
    --neutral-border: #333a47;
    --neutral-text: #f2f4f9;
    --neutral-text-2: #b4bcc8;
    --neutral-text-3: #8b93a1;
    /* Activos (sidebar/filtros): tinte rojo SUTIL, no bloque pesado. */
    --occident-red-light: rgba(227,6,19,0.14);
    --occident-red-bg: rgba(227,6,19,0.10);
    /* Estados dark-tuned (tintados, no invertidos) */
    --state-critical-bg: rgba(255,69,58,0.16);  --state-critical-fg: #ff6b61;
    --state-warning-bg:  rgba(255,159,10,0.16);  --state-warning-fg:  #ffb24d;
    --state-success-bg:  rgba(48,209,88,0.16);   --state-success-fg:  #5bd47e;
    --state-info-bg:     rgba(10,132,255,0.18);  --state-info-fg:     #4da3ff;
    --state-neutral-bg:  rgba(255,255,255,0.07); --state-neutral-fg:  #aab2c0;
    --link: #5aa9ff;  --link-hover: #7cbcff;
    --focus-ring: rgba(90,169,255,0.35);  --focus-border: #5aa9ff;
    --kpi-alert-bg: rgba(255,69,58,0.16);   /* dark: card oscura con tinte rojo, no blanca */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.50);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.40);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.40);
    color-scheme: dark;
}

/* Reveal circular del cambio de tema: el estado nuevo se "abre" en
 * círculo desde el toggle (animado por JS). Sin cross-fade. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 9999; }
/* Reverse (dark→light, "deshacer"): el snapshot viejo (oscuro) va ENCIMA y
   encoge hacia el punto, revelando el claro debajo. Ver setTheme(). */
html.theme-reverse::view-transition-old(root) { z-index: 9999; }
html.theme-reverse::view-transition-new(root) { z-index: 1; }

/* Preview en hover del toggle de tema (simétrico en ambos sentidos):
   el botón se va "tiñendo" del color del tema DESTINO mientras mantienes el
   hover, y el texto/icono se invierten — como si entraras en ese tema.
   --theme-peek = color del tema al que cambiarás. */
#lugo-theme-toggle { --theme-peek: #181b22; position: relative; overflow: hidden; transition: color 0.9s ease; }
html[data-theme="dark"] #lugo-theme-toggle { --theme-peek: #f2f4f9; }
#lugo-theme-toggle::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    border-radius: inherit; opacity: 0;
    background: var(--theme-peek);              /* relleno del tema destino */
    transition: opacity 0.9s ease;              /* …que entra con el tiempo de hover */
}
#lugo-theme-toggle:hover::before { opacity: 0.96; }
html:not([data-theme="dark"]) #lugo-theme-toggle:hover { color: #f2f4f9; } /* claro→oscuro: texto claro */
html[data-theme="dark"] #lugo-theme-toggle:hover { color: #181b22; }       /* oscuro→claro: texto oscuro */
#lugo-theme-toggle > * { position: relative; z-index: 1; } /* icono+label por encima del relleno */

html, body { min-height: 100vh; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── DV4: pulido transversal ──────────────────────────────────────── */
/* Scrollbars finas y temáticas en todo el panel (antes solo en kanban). */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }
/* Números tabulares: alinean y no "bailan" de ancho (count-up, conteos, SLA). */
.kpi-value, .kpi-strip-num, .state-chip-num, .col-count, .kpi-strip-trend, .kpi-trend, .badge { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ── Header unificado ──────────────────────────────────────────────
 * Lo inyecta LUGO.injectHeader() en #header-mount. Estas reglas
 * estilan el HTML inyectado.
 */
#header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; height: 60px; flex-shrink: 0;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 0.5px solid rgba(0,0,0,0.09);
    z-index: 10; position: sticky; top: 0;
}
/* Dark: cristal oscuro en vez del blanco translúcido (plan 000014). */
html[data-theme="dark"] #header { background: rgba(24,27,34,0.72); border-bottom-color: var(--border); }
.header-left { display: flex; align-items: center; gap: 12px; }
.header-right { display: flex; align-items: center; gap: 8px; }

.brand-link {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; color: inherit;
    padding: 4px; border-radius: 8px;
    transition: background var(--transition);
}
.brand-link:hover { background: rgba(0,0,0,0.04); }
.brand-mark {
    width: 30px; height: 30px; border-radius: 9px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: white; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,122,255,0.25);
    flex-shrink: 0;
}
.brand-mark i { width: 16px; height: 16px; }
.brand-text { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; color: var(--text); white-space: nowrap; }
.brand-sep { color: var(--text3); font-size: 14px; }
.page-name { font-size: 15px; font-weight: 600; color: var(--text2); letter-spacing: -0.1px; }

.user-badge {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px 4px 4px; background: var(--surface-input); border-radius: 20px;
}
.user-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: white; display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 12px; flex-shrink: 0;
}
.user-name { font-size: 13px; font-weight: 500; color: #6E6E73; }

.header-help-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: transparent; border: none; cursor: pointer;
    color: var(--text2); transition: all var(--transition);
    text-decoration: none;
}
.header-help-btn:hover { background: var(--surface-input); color: var(--blue); }
.header-help-btn i { width: 18px; height: 18px; }

/* ── Botones ───────────────────────────────────────────────────── */
.action-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    background: var(--card); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500; font-family: inherit;
    cursor: pointer; text-decoration: none;
    transition: all var(--transition);
}
.action-btn:hover { background: var(--bg); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.action-btn:active { transform: translateY(0); }
.action-btn i { width: 16px; height: 16px; }
.action-btn.primary { background: var(--occident-red); color: white; border-color: var(--occident-red); }
.action-btn.primary:hover { background: var(--occident-red-dark); border-color: var(--occident-red-dark); }
.action-btn.danger { color: var(--red); }
.action-btn.danger:hover { background: rgba(255,59,48,0.08); }
.action-btn.success { color: var(--green); }
.action-btn.success:hover { background: rgba(52,199,89,0.08); }
.action-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-link {
    background: none; border: none; color: var(--text2); cursor: pointer;
    font-size: 13px; font-family: inherit; padding: 6px 10px; border-radius: 6px;
    transition: all var(--transition);
}
.btn-link:hover { background: var(--surface-input); color: var(--text); }

/* Focus visible — anillo solo en navegación por teclado */
*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.brand-link:focus-visible, .btn-link:focus-visible, .header-help-btn:focus-visible { outline-offset: 4px; }

/* ── Loading & empty states ───────────────────────────────────── */
.loading { text-align: center; padding: 60px 20px; color: var(--text2); font-size: 14px; }
.loading i { width: 18px; height: 18px; vertical-align: middle; margin-right: 6px; animation: lugo-spin 0.8s linear infinite; }
@keyframes lugo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.empty { text-align: center; padding: 80px 20px; color: var(--text2); }
.empty i { width: 48px; height: 48px; color: var(--text3); margin-bottom: 12px; }
.empty .title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.empty .desc { font-size: 13px; line-height: 1.5; max-width: 420px; margin: 0 auto; }

/* ── Toasts (LUGO.showToast) ──────────────────────────────────── */
.toast-stack {
    position: fixed; bottom: 20px; right: 20px; z-index: 1000;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
.toast {
    padding: 12px 16px; border-radius: 10px;
    background: var(--text); color: white;
    font-size: 13px; box-shadow: var(--shadow-md);
    animation: lugo-slide-in 200ms ease;
    max-width: 360px; pointer-events: auto;
}
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }
.toast.warning { background: var(--orange); }
.toast.info { background: var(--blue); }
@keyframes lugo-slide-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* ── Modal (LUGO.openModal / closeModal) ──────────────────────── */
.modal-bg {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
    padding: 24px;
}
.modal-bg.open { display: flex; animation: lugo-fade-in 200ms ease; }
.modal {
    background: var(--card); border-radius: var(--radius-lg);
    padding: 28px; max-width: 480px; width: 100%;
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 48px); overflow-y: auto;
    animation: lugo-modal-pop 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 8px; }
.modal-desc { font-size: 13px; color: var(--text2); margin-bottom: 18px; line-height: 1.5; }
.modal label { display: block; font-size: 12px; color: var(--text2); margin: 10px 0 6px; font-weight: 500; }
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="number"],
.modal select,
.modal textarea {
    width: 100%; padding: 10px 12px;
    border: 1.5px solid var(--border); border-radius: 10px;
    font-family: inherit; font-size: 14px; color: var(--text);
    background: var(--card); outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.modal input:focus, .modal select:focus, .modal textarea:focus {
    border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,122,255,0.1);
}
.modal-msg { font-size: 13px; margin: 12px 0 0; min-height: 18px; color: var(--red); }
.modal-msg.success { color: var(--green); }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
@keyframes lugo-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lugo-modal-pop { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* ── Componentes ───────────────────────────────────────────────── */
.panel {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 18px; box-shadow: var(--shadow-sm);
}
.panel h2 { font-size: 14px; font-weight: 600; color: var(--text2); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.panel h2 i { width: 14px; height: 14px; }

/* KPIs — grid + tarjetas con variantes de tamaño y estado.
 * - `.kpi-card` (default): compacta, para chrome embebido (cabecera kanban).
 * - `.kpi-card.large`: para dashboard. Valor mayor y padding generoso.
 * - `.kpi-card.alert`: borde rojo + tinte de fondo (KPI crítico).
 * Variantes de color (danger/warning/success/info) afectan solo al valor.
 */
.kpi-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
    margin-bottom: 28px;
}
/* En pantallas medianas, 5 en fila aprietan → 3 por fila antes del fallback móvil */
@media (max-width: 1180px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
.kpi-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 18px; box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}
.kpi-card.large { padding: 20px; }
.kpi-card.alert { border-color: var(--red); background: var(--kpi-alert-bg); }
html[data-theme="dark"] .kpi-card.alert { border-color: rgba(255,69,58,0.5); }
.kpi-card .kpi-label {
    font-size: 12px; font-weight: 500; color: var(--text2);
    text-transform: uppercase; letter-spacing: 0.4px;
    display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.kpi-card .kpi-value { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; color: var(--text); line-height: 1; }
.kpi-card.large .kpi-value { font-size: 36px; letter-spacing: -1px; }
.kpi-card .kpi-sub { font-size: 12px; color: var(--text2); margin-top: 4px; }
.kpi-card.alert .kpi-value { color: var(--red); }
.kpi-card.danger .kpi-value { color: var(--red); }
.kpi-card.warning .kpi-value { color: var(--orange); }
.kpi-card.success .kpi-value { color: var(--green); }
.kpi-card.info .kpi-value { color: var(--blue); }
/* Acento también en el icono del label (plan 000015 — KPI v2) */
.kpi-card.warning .kpi-label i { color: var(--orange); }
.kpi-card.success .kpi-label i { color: var(--green); }
.kpi-card.info .kpi-label i { color: var(--blue); }
.kpi-card.danger .kpi-label i { color: var(--red); }
/* Chip de tendencia vs semana anterior */
.kpi-trend { font-size: 11px; font-weight: 600; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.kpi-trend.good { color: var(--green); }
.kpi-trend.bad { color: var(--red); }
.kpi-trend.neutral { color: var(--text2); }
.kpi-trend.muted { color: var(--text3); font-weight: 500; }
@media (max-width: 900px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.badge {
    display: inline-block; font-size: 11px; font-weight: 600;
    padding: 3px 9px; border-radius: 10px;
    text-transform: uppercase; letter-spacing: 0.3px;
    background: rgba(142,142,147,0.18); color: var(--gray);
}
.badge.blue { background: rgba(0,122,255,0.12); color: var(--blue); }
.badge.red { background: rgba(255,59,48,0.12); color: var(--red); }
.badge.orange { background: rgba(255,149,0,0.12); color: var(--orange); }
.badge.green { background: rgba(52,199,89,0.12); color: var(--green); }
.badge.purple { background: rgba(88,86,214,0.12); color: var(--purple); }
.badge.yellow { background: rgba(255,214,10,0.18); color: #B58A00; }

/* ── Filtros compactos (dropdowns en una sola fila) ──────────────
 * Patrón: cada filtro es un botón "Etiqueta · Valor ⌄" que abre un
 * menú flotante con las opciones. Pensado para reemplazar las pills
 * gordas del kanban. Sustituye `.pill` + `.filter-group` cuando
 * acumulas >3 filtros y se quedan sin espacio horizontal.
 */
.filter-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 24px; min-height: 44px; flex-wrap: wrap;
    background: var(--neutral-surface);
    border-bottom: 1px solid var(--neutral-border);
}
.filter-bar-sep { width: 1px; height: 20px; background: var(--neutral-border); flex-shrink: 0; }

.filter-dd-wrap { position: relative; }
.filter-dd {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 8px;
    border: 1px solid var(--neutral-border); background: var(--neutral-surface);
    font-size: 12px; color: var(--neutral-text-2); cursor: pointer;
    font-family: inherit; transition: all var(--transition);
}
.filter-dd:hover { background: var(--neutral-bg); color: var(--neutral-text); }
.filter-dd.is-active {
    background: var(--occident-red-light); color: var(--occident-red);
    border-color: transparent;
}
.filter-dd-label { font-weight: 600; }
.filter-dd-sep { color: var(--neutral-text-3); }
.filter-dd .chevron { width: 12px; height: 12px; transition: transform var(--transition); }
.filter-dd-wrap.open .chevron { transform: rotate(180deg); }

.filter-dd-menu {
    position: absolute; top: calc(100% + 4px); left: 0;
    min-width: 180px; max-height: 320px; overflow-y: auto;
    background: var(--neutral-surface);
    border: 1px solid var(--neutral-border); border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: 4px; z-index: 50; display: none;
}
.filter-dd-wrap.open .filter-dd-menu { display: block; }
.filter-dd-wrap.dd-right .filter-dd-menu { left: auto; right: 0; }
.filter-dd-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 10px; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 13px; color: var(--neutral-text); border-radius: 6px;
    transition: background var(--transition);
}
.filter-dd-item:hover { background: var(--neutral-bg); }
.filter-dd-item.active {
    background: var(--occident-red-light); color: var(--occident-red);
    font-weight: 600;
}
.filter-dd-item.active::after { content: '✓'; color: var(--occident-red); }

/* ── Card de gestor (dashboard) ──────────────────────────────────
 * Tarjetas tipo perfil con stats. Usado en Dashboard para mostrar
 * carga de trabajo de cada gestor interno.
 */
.gestor-card {
    background: var(--neutral-surface);
    border: 1px solid var(--neutral-border);
    border-radius: var(--radius-md);
    padding: 18px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}
.gestor-card:hover { box-shadow: var(--shadow-md); }
.gestor-card-head { display: flex; align-items: center; gap: 12px; }
.gestor-card-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--occident-red), var(--occident-red-dark));
    color: white; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.gestor-card-name { font-size: 15px; font-weight: 700; color: var(--neutral-text); }
.gestor-card-role { font-size: 11px; color: var(--neutral-text-3); text-transform: uppercase; letter-spacing: 0.4px; }
.gestor-card-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
.gestor-card-stat { display: flex; flex-direction: column; }
.gestor-card-stat-label {
    font-size: 11px; color: var(--neutral-text-3); text-transform: uppercase;
    letter-spacing: 0.3px; margin-bottom: 2px;
}
.gestor-card-stat-value { font-size: 18px; font-weight: 700; color: var(--neutral-text); line-height: 1.2; }
.gestor-card-stat-value.alert { color: var(--red); }

/* ── Toolbar (cabecera de vista, debajo del sidebar/mobile bar) ────
 * Patrón usado por kanban: título de página + chips de KPI + acciones
 * (search, nueva, archive, refresh) sin redundar con la sidebar.
 */
.lugo-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; height: 60px; flex-shrink: 0; gap: 16px;
    background: var(--neutral-surface);
    border-bottom: 1px solid var(--neutral-border);
}
.lugo-toolbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lugo-toolbar-right { display: flex; align-items: center; gap: 8px; }
.lugo-toolbar-title {
    font-size: 18px; font-weight: 700; letter-spacing: -0.3px;
    color: var(--neutral-text); white-space: nowrap;
}
.lugo-toolbar-sub {
    font-size: 12px; color: var(--neutral-text-3);
    margin-top: 2px;
}

/* ── App shell (sidebar + main) ────────────────────────────────────
 * Layout estándar de las páginas operativas. La sidebar la inyecta
 * LUGO.injectSidebar() en `#sidebar-mount`. El contenido va en `<main>`.
 *
 * Estructura esperada:
 *   <div class="app-shell">
 *     <div id="sidebar-mount"></div>
 *     <main>...</main>
 *   </div>
 *
 * Breakpoints:
 *   ≥1100px  220px sidebar | 1fr main
 *   <1100px  56px (solo iconos, tooltips on hover) | 1fr main
 *   <700px   sidebar oculta, hamburger en mini top-bar (50px)
 */
.app-shell {
    display: grid; grid-template-columns: 220px 1fr;
    min-height: 100vh; background: var(--neutral-bg);
}
.app-shell > main {
    overflow: auto; min-width: 0;
    background: var(--neutral-bg);
}
@media (max-width: 1100px) {
    .app-shell { grid-template-columns: 56px 1fr; }
}
@media (max-width: 700px) {
    .app-shell { grid-template-columns: 1fr; }
    /* drawer cerrado: fuera de pantalla a la izquierda (no display:none, para
     * poder animar la entrada/salida) */
    .app-shell > #sidebar-mount {
        position: fixed; inset: 0 auto 0 0; z-index: 90; width: 264px;
        transform: translateX(-100%);
        transition: transform 220ms cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    .app-shell.sidebar-open > #sidebar-mount { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.18); }
    /* drawer abierto: ancho completo CON etiquetas (anula el modo solo-iconos
     * que aplica el breakpoint de 1100px). */
    .app-shell.sidebar-open .lugo-sidebar { width: 264px; }
    .app-shell.sidebar-open .lugo-sidebar-brand .lugo-sidebar-brand-text,
    .app-shell.sidebar-open .lugo-sidebar-item .label,
    .app-shell.sidebar-open .lugo-sidebar-user-info,
    .app-shell.sidebar-open .lugo-sidebar-logout .label { display: block; }
    .app-shell.sidebar-open .lugo-sidebar-item,
    .app-shell.sidebar-open .lugo-sidebar-user,
    .app-shell.sidebar-open .lugo-sidebar-logout { justify-content: flex-start; }
}

/* Backdrop del drawer móvil — oscurece el contenido y cierra al tocar */
.lugo-sidebar-backdrop {
    display: none; position: fixed; inset: 0; z-index: 89;
    background: rgba(0,0,0,0.4);
    opacity: 0; transition: opacity 220ms ease;
}
@media (max-width: 700px) {
    .app-shell.sidebar-open .lugo-sidebar-backdrop { display: block; opacity: 1; }
}

/* ── Sidebar (LUGO.injectSidebar) ────────────────────────────────── */
.lugo-sidebar {
    display: flex; flex-direction: column;
    height: 100vh; position: sticky; top: 0;
    background: var(--neutral-surface);
    border-right: 1px solid var(--neutral-border);
    z-index: 5;
}
.lugo-sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    height: 60px; padding: 0 16px; flex-shrink: 0;
    border-bottom: 1px solid var(--neutral-border);
    text-decoration: none; color: inherit;
}
.lugo-sidebar-brand img {
    height: 28px; width: auto; object-fit: contain;
}
.lugo-sidebar-nav {
    flex: 1; overflow-y: auto; padding: 12px 8px;
    display: flex; flex-direction: column; gap: 2px;
}
.lugo-sidebar-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    color: var(--neutral-text-2); text-decoration: none;
    font-size: 14px; font-weight: 500;
    transition: all var(--transition);
    position: relative; cursor: pointer;
    border: none; background: none; font-family: inherit;
    width: 100%; text-align: left;
}
.lugo-sidebar-item:hover {
    background: var(--neutral-bg); color: var(--neutral-text);
}
.lugo-sidebar-item.active {
    background: var(--occident-red-light); color: var(--occident-red);
    font-weight: 600;
}
html[data-theme="dark"] .lugo-sidebar-item.active { color: #ff6b61; }
.lugo-sidebar-item.active::before {
    content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px;
    background: var(--occident-red); border-radius: 0 3px 3px 0;
}
.lugo-sidebar-item i { width: 18px; height: 18px; flex-shrink: 0; }
.lugo-sidebar-item .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lugo-sidebar-sep { height: 1px; background: var(--neutral-border); margin: 8px 4px; }

.lugo-sidebar-foot {
    padding: 12px 8px; border-top: 1px solid var(--neutral-border);
    flex-shrink: 0;
}
.lugo-sidebar-user {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 10px;
    cursor: pointer; transition: background var(--transition);
    border: none; background: none; font-family: inherit;
    width: 100%; text-align: left; color: inherit;
}
.lugo-sidebar-user:hover { background: var(--neutral-bg); }
.lugo-sidebar-user .lugo-sidebar-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--occident-red), var(--occident-red-dark));
    color: white; display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 12px;
}
.lugo-sidebar-user .lugo-sidebar-user-name {
    font-size: 13px; font-weight: 600; color: var(--neutral-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lugo-sidebar-user .lugo-sidebar-user-role {
    font-size: 11px; color: var(--neutral-text-3);
}
.lugo-sidebar-logout {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 8px 12px; margin-top: 4px;
    background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 12px; color: var(--neutral-text-3);
    text-align: left; border-radius: 8px;
    transition: all var(--transition);
}
.lugo-sidebar-logout:hover { background: var(--neutral-bg); color: var(--occident-red); }
.lugo-sidebar-logout i { width: 14px; height: 14px; }

/* Colapsada (1100px–700px): solo iconos + tooltip on hover */
@media (max-width: 1100px) {
    .lugo-sidebar-brand .lugo-sidebar-brand-text { display: none; }
    .lugo-sidebar-item .label,
    .lugo-sidebar-user-info,
    .lugo-sidebar-logout .label { display: none; }
    .lugo-sidebar-item { justify-content: center; }
    .lugo-sidebar-user { justify-content: center; padding: 8px 6px; }
    .lugo-sidebar-logout { justify-content: center; }
}

/* Mini top-bar (mobile, <700px) — hamburger para abrir sidebar overlay */
.lugo-mobilebar {
    display: none; height: 50px; padding: 0 16px;
    align-items: center; justify-content: space-between;
    background: var(--neutral-surface); border-bottom: 1px solid var(--neutral-border);
    position: sticky; top: 0; z-index: 80;
}
.lugo-mobilebar img { height: 24px; }
.lugo-mobilebar .lugo-mobilebar-mark { height: 30px; width: 30px; object-fit: contain; border-radius: 7px; }
.lugo-mobilebar button {
    background: none; border: none; cursor: pointer; padding: 8px;
    color: var(--neutral-text); display: inline-flex;
}
.lugo-mobilebar button i { width: 22px; height: 22px; }
@media (max-width: 700px) {
    .lugo-mobilebar { display: flex; }
}

/* ── Responsive header (legacy injectHeader) ──────────────────────── */
@media (max-width: 700px) {
    .brand-name { display: none; }
    .brand-sep { display: none; }
    .user-name { display: none; }
    #header { padding: 0 16px; }
}
