/* Gazeti AI Portal — visual concept v1
   Paleta y componentes derivados del diseño en /home/dlastra/Desing/gazeti-ai-portal-v1.html */

:root,
:root[data-theme="dark"] {
    --bg-0: #0A0A0C;
    --bg-1: #111114;
    --bg-2: #16161A;
    --bg-3: #1C1C22;
    --bg-4: #24242C;

    --ink: #ECECEE;
    --ink-2: #B4B4BA;
    --ink-dim: #6E6E78;
    --ink-faint: #3A3A42;

    --line: #1F1F26;
    --line-bright: #2A2A33;

    --crimson: #E00030;
    --crimson-hover: #FF1040;
    --crimson-soft: rgba(224, 0, 48, 0.12);
    --crimson-glow: rgba(224, 0, 48, 0.25);

    --coral: #F07080;
    --coral-soft: rgba(240, 112, 128, 0.15);
    --rose: #F0A0B0;

    --success: #4ADE80;
    --warning: #FBBF24;
    --info: #60A5FA;

    --r-sm: 4px;
    --r: 6px;
    --r-lg: 10px;

    color-scheme: dark;
}

/* ============== LIGHT MODE PALETTE ============== */
:root[data-theme="light"] {
    --bg-0: #FFFFFF;
    --bg-1: #F7F7F8;
    --bg-2: #F0F0F2;
    --bg-3: #E5E5E8;
    --bg-4: #D8D8DC;

    --ink: #1A1A1F;
    --ink-2: #4A4A52;
    --ink-dim: #797982;
    --ink-faint: #B8B8BD;

    --line: #E0E0E4;
    --line-bright: #C8C8CD;

    /* Crimson un poco más oscuro en light para mejor contraste sobre blanco */
    --crimson: #C5002A;
    --crimson-hover: #E00030;
    --crimson-soft: rgba(197, 0, 42, 0.10);
    --crimson-glow: rgba(197, 0, 42, 0.18);

    --coral: #D85A6B;
    --coral-soft: rgba(216, 90, 107, 0.12);
    --rose: #B85565;

    /* Tonos de status más contrastados sobre fondo claro */
    --success: #15803D;
    --warning: #B45309;
    --info: #1D4ED8;

    color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: var(--bg-0);
    color: var(--ink);
    font-weight: 400;
    line-height: 1.5;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; }

/* ============== APP LAYOUT ============== */
.app {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    background: var(--bg-0);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.sidebar-brand {
    padding: 14px 20px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
}
.brand-cube { width: 56px; height: 56px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text .brand-name { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.brand-text .brand-name span { color: var(--crimson); font-weight: 600; }
.brand-text .brand-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.15em;
    color: var(--ink-dim);
    margin-top: 2px;
    text-transform: uppercase;
}

.sidebar-section { padding: 0 12px; margin-bottom: 20px; }
.sidebar-section-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-dim);
    padding: 6px 10px 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r);
    color: var(--ink-2);
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 1px;
    transition: background 0.15s, color 0.15s;
    position: relative;
    text-decoration: none;
}
.nav-item:hover { background: var(--bg-2); color: var(--ink); }
.nav-item.active { background: var(--bg-3); color: var(--ink); }
.nav-item.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--crimson);
    border-radius: 2px;
}
.nav-item.disabled { color: var(--ink-faint); cursor: not-allowed; }
.nav-item.disabled:hover { background: transparent; color: var(--ink-faint); }
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }
.nav-badge {
    margin-left: auto;
    background: var(--crimson);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
}
.nav-badge.muted { background: var(--bg-4); color: var(--ink-dim); }
.nav-badge.warn { background: var(--warning); color: var(--bg-0); }

.sidebar-footer { margin-top: auto; padding: 12px; border-top: 1px solid var(--line); }
.user-card { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r); }
.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--crimson), var(--coral));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 12px; font-weight: 500; line-height: 1.3; }
.user-role {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--ink-dim);
    letter-spacing: 0.1em;
}
.user-logout {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-dim);
    padding: 4px 8px;
    border-radius: var(--r-sm);
    font-size: 10px;
    transition: all 0.15s;
}
.user-logout:hover { color: var(--crimson); border-color: var(--crimson); }

/* Main area */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
    height: 52px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    background: var(--bg-1);
    position: sticky;
    top: 0;
    z-index: 5;
}
.breadcrumb { font-size: 13px; color: var(--ink-dim); display: flex; align-items: center; gap: 8px; }
.breadcrumb strong { color: var(--ink); font-weight: 500; }
.breadcrumb-sep { color: var(--ink-faint); }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-dim); }
.topbar-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--line-bright);
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--ink-2);
}
.topbar-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

.content { padding: 28px 32px 64px; max-width: 1480px; width: 100%; }

/* ============== TYPOGRAPHY ============== */
.page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
.page-subtitle { color: var(--ink-dim); font-size: 13px; margin-bottom: 24px; }
.section { margin-bottom: 32px; }
.section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.section-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.section-aside { font-size: 11px; color: var(--ink-dim); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }
.muted { color: var(--ink-dim); }

/* ============== CARDS ============== */
.card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px;
    transition: border-color 0.15s;
}
.card:hover { border-color: var(--line-bright); }
.card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-header h2 { font-size: 14px; font-weight: 600; }
.card-body { padding: 18px; }
.card-body.flush { padding: 0; }

/* Stat cards (KPI) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.stat-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px 18px;
}
.stat-card .stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.stat-card .stat-value {
    font-size: 28px;
    font-weight: 600;
    margin-top: 6px;
    letter-spacing: -0.02em;
}
.stat-card .stat-value .stat-unit {
    font-size: 14px;
    color: var(--ink-dim);
    margin-left: 4px;
    font-weight: 400;
}
.stat-card .stat-meta { font-size: 11px; color: var(--ink-dim); margin-top: 4px; }

/* Tenant cards */
.tenant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.tenant-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px;
    transition: border-color 0.15s;
}
.tenant-card:hover { border-color: var(--line-bright); }
.tenant-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tenant-name { font-size: 15px; font-weight: 600; line-height: 1.2; }
.tenant-phone { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.tenant-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; text-align: center; }
.tenant-metrics .m-val { font-size: 18px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.tenant-metrics .m-lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-dim); margin-top: 2px; }
.tenant-meta {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-dim);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tenant-meta-row { display: flex; justify-content: space-between; gap: 8px; }
.tenant-meta-row .lab { color: var(--ink-faint); }
.tenant-tags { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }

/* Empty state */
.empty {
    border: 1px dashed var(--line-bright);
    border-radius: var(--r-lg);
    padding: 48px 24px;
    text-align: center;
    color: var(--ink-dim);
}
.empty .empty-title { color: var(--ink-2); font-size: 14px; margin-bottom: 4px; }
.empty .empty-hint { font-size: 12px; color: var(--ink-faint); }

/* ============== BADGES ============== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.badge.success { background: rgba(74, 222, 128, 0.12); color: var(--success); }
.badge.success .dot { background: var(--success); }
.badge.warning { background: rgba(251, 191, 36, 0.12); color: var(--warning); }
.badge.warning .dot { background: var(--warning); }
.badge.error { background: var(--crimson-soft); color: var(--crimson); }
.badge.error .dot { background: var(--crimson); }
.badge.info { background: rgba(96, 165, 250, 0.12); color: var(--info); }
.badge.info .dot { background: var(--info); }
.badge.ghost { background: var(--bg-3); color: var(--ink-dim); }

/* ============== TABLES ============== */
.table-wrap { overflow-x: auto; }
table.t {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table.t thead th {
    text-align: left;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim);
    font-weight: 500;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
}
table.t tbody td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
table.t tbody tr:hover { background: var(--bg-2); }
table.t tbody tr:last-child td { border-bottom: none; }
table.t .cell-mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-2); }
table.t .cell-dim { color: var(--ink-dim); font-size: 12px; }
table.t .cell-summary {
    font-size: 12px;
    color: var(--ink-dim);
    font-style: italic;
    padding-top: 0;
    padding-bottom: 12px;
}

/* ============== FORMS ============== */
.input, .select, textarea {
    width: 100%;
    background: var(--bg-2);
    border: 1px solid var(--line-bright);
    color: var(--ink);
    border-radius: var(--r);
    padding: 9px 12px;
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.input:focus, .select:focus, textarea:focus {
    outline: none;
    border-color: var(--crimson);
    background: var(--bg-3);
}
.input.mono { font-family: 'JetBrains Mono', monospace; }
.label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 6px;
}
.form-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr auto; align-items: end; }
.form-row .form-row-grow { grid-column: span 2; }

/* ============== BUTTONS ============== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid transparent;
    background: var(--bg-3);
    color: var(--ink);
    transition: all 0.15s;
}
.btn:hover { background: var(--bg-4); border-color: var(--line-bright); }
.btn.primary {
    background: var(--crimson);
    color: white;
    box-shadow: 0 0 0 0 var(--crimson-glow);
}
.btn.primary:hover { background: var(--crimson-hover); box-shadow: 0 0 24px 0 var(--crimson-glow); }
.btn.ghost { background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--bg-2); color: var(--ink); border-color: var(--line); }
.btn.danger { color: var(--crimson); }
.btn.danger:hover { background: var(--crimson-soft); border-color: var(--crimson); }
.btn.sm { padding: 4px 10px; font-size: 11px; }

/* Filter chips for /leads */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--ink-2);
    background: var(--bg-2);
    border: 1px solid var(--line);
    text-decoration: none;
    transition: all 0.15s;
}
.chip:hover { background: var(--bg-3); color: var(--ink); }
.chip.active { background: var(--crimson); color: white; border-color: var(--crimson); }
.chips .chip-divider { color: var(--ink-faint); margin: 0 4px; }

/* ============== F6 polish v2 — refinamientos visuales adicionales ============ */

/* Hero summary: stat-grid compacto sobre listados (agents/inbox) */
.hero-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 28px;
}
.hero-grid .stat-grid { grid-template-columns: repeat(2, 1fr); }
.hero-aside {
    background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hero-aside-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-dim); }
.hero-aside-value { font-size: 14px; color: var(--ink); }
.hero-aside hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .hero-grid .stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* Card-link enriquecido con footer y meta */
.card-link .card-foot {
    padding: 10px 16px;
    border-top: 1px solid var(--line);
    background: var(--bg-2);
    font-size: 11px;
    color: var(--ink-dim);
    font-family: 'JetBrains Mono', monospace;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* Layout sticky para editor que no domina la pantalla */
.editor-collapsed {
    background: var(--bg-1);
    border: 1px dashed var(--line-bright);
    border-radius: var(--r-lg);
    padding: 36px 24px;
    text-align: center;
    color: var(--ink-dim);
    cursor: default;
}
.editor-collapsed .icon {
    width: 40px; height: 40px; margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--bg-3);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-2);
}
.editor-collapsed .title { color: var(--ink-2); font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.editor-collapsed .hint { font-size: 12px; color: var(--ink-faint); }

/* Inbox chat — burbujas compactas tipo WhatsApp/Telegram */
.chat-stream { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; max-width: 760px; margin: 0 auto; }
.chat-msg {
    max-width: 62%;
    padding: 7px 11px;
    border-radius: 12px;
    line-height: 1.4;
    font-size: 13px;
    word-wrap: break-word;
    white-space: pre-wrap;
    position: relative;
}
.chat-msg .chat-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 9.5px;
    color: var(--ink-dim);
    margin-bottom: 2px;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.75;
}
.chat-msg.user {
    align-self: flex-end;
    background: var(--crimson-soft);
    border: 1px solid rgba(224, 0, 48, 0.18);
    border-bottom-right-radius: 3px;
}
.chat-msg.user .chat-meta { color: var(--coral); }
.chat-msg.assistant {
    align-self: flex-start;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-bottom-left-radius: 3px;
}
.chat-msg.system {
    align-self: center;
    background: var(--bg-3);
    color: var(--ink-dim);
    font-size: 11px;
    font-style: italic;
    max-width: 80%;
    border-radius: 8px;
}
.chat-day-sep {
    align-self: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-faint);
    padding: 4px 12px;
    background: var(--bg-2);
    border-radius: 999px;
    margin: 8px 0 4px;
}

/* Tabla más densa para inbox/leads */
table.t.dense thead th { padding: 10px 16px; font-size: 9.5px; }
table.t.dense tbody td { padding: 9px 16px; font-size: 12.5px; }
table.t tbody tr.row-link { cursor: pointer; transition: background 0.12s; }
table.t tbody tr.row-link:hover { background: var(--bg-3); }
table.t tbody tr.row-link:hover .cell-mono { color: var(--coral); }

/* Mini-list dentro de tarjeta (último mensaje, etc.) */
.card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.card-list-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--line);
    color: var(--ink-2);
}
.card-list-item:last-child { border-bottom: 0; }
.card-list-item .lab {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-dim);
}

/* ============== F6 — Cards genéricas para listados (agents/inbox/customer) ===== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.card-link {
    display: block;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 0;
    transition: border-color 0.15s, transform 0.15s;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}
.card-link:hover { border-color: var(--crimson); transform: translateY(-1px); }
.card-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.card-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.card-title.mono { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.card-pill {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
    background: var(--bg-3);
    padding: 3px 9px;
    border-radius: 999px;
}
.card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.card-link .card-body { gap: 6px; }

/* Key-value rows dentro de una card */
.kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.kv-k {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
}
.kv-v { color: var(--ink-2); font-size: 12px; }
.kv-v.mono { font-family: 'JetBrains Mono', monospace; }

/* btn-ghost (botón ghost compacto inline para cards/editor) — alias del .btn.ghost.sm */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--r);
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--line-bright);
    background: transparent;
    color: var(--ink-2);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-ghost:hover { background: var(--bg-2); color: var(--ink); border-color: var(--crimson); }
.btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-ghost.danger { color: var(--crimson); border-color: var(--crimson-soft); }
.btn-ghost.primary { background: var(--crimson); color: white; border-color: var(--crimson); }
.btn-ghost.primary:hover { background: var(--crimson-hover); border-color: var(--crimson-hover); box-shadow: 0 0 18px var(--crimson-glow); }

/* Status pills (estados de agente) */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-active { background: rgba(74, 222, 128, 0.12); color: var(--success); }
.status-idle { background: rgba(110, 110, 120, 0.15); color: var(--ink-2); }
.status-saturated { background: var(--crimson-soft); color: var(--crimson); }
.status-stale { background: rgba(110, 110, 120, 0.15); color: var(--ink-dim); }
.status-nodata { background: var(--bg-3); color: var(--ink-faint); }

/* Editor de archivos (agent_editor / agent_tenant) */
.editor-wrap { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.editor-wrap textarea {
    width: 100%;
    background: var(--bg-0);
    color: var(--ink);
    border: 1px solid var(--line-bright);
    border-radius: var(--r);
    padding: 12px;
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.15s;
}
.editor-wrap textarea:focus { outline: none; border-color: var(--crimson); }
.editor-wrap textarea:disabled { opacity: 0.7; background: var(--bg-1); }
.editor-toolbar { display: flex; gap: 10px; align-items: center; }
.editor-toolbar .input { flex: 1; }
.editor-result { font-size: 12px; color: var(--ink-2); min-height: 18px; }
.editor-result a { color: var(--crimson); text-decoration: underline; }
.editor-result .err { color: var(--crimson); }

/* Métricas por agente — KPI compactos */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.metric-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; }
.metric-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-dim); margin-bottom: 6px; }
.metric-value { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.metric-value.small { font-size: 18px; }
.metric-sub { font-size: 11px; color: var(--ink-dim); margin-top: 4px; font-family: 'JetBrains Mono', monospace; }

/* Sparkline */
.sparkline-wrap { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 14px; }
.sparkline-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-dim); margin-bottom: 10px; }
.metrics-footer { font-size: 11px; color: var(--ink-faint); text-align: right; font-family: 'JetBrains Mono', monospace; margin-top: 8px; }

/* Inbox — chat bubbles */
.chat-stream { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.chat-msg { max-width: 72%; padding: 10px 14px; border-radius: 14px; line-height: 1.5; font-size: 13.5px; word-wrap: break-word; white-space: pre-wrap; }
.chat-msg .chat-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; color: var(--ink-dim); margin-bottom: 4px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.05em; }
.chat-msg.user { align-self: flex-end; background: var(--crimson-soft); border: 1px solid var(--crimson-soft); border-bottom-right-radius: 4px; }
.chat-msg.assistant { align-self: flex-start; background: var(--bg-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-msg.system { align-self: center; background: var(--bg-3); color: var(--ink-dim); font-size: 11px; font-style: italic; max-width: 90%; }

/* Inline form panel (crear agente) */
.inline-panel {
    background: var(--bg-1);
    border: 1px solid var(--crimson-soft);
    border-radius: var(--r-lg);
    padding: 18px;
    margin-bottom: 14px;
}
.inline-panel-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.inline-panel .form-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-bottom: 12px; }
.inline-panel .form-actions { display: flex; gap: 10px; align-items: center; }
.inline-panel .hint { font-size: 11px; color: var(--ink-dim); margin-top: 10px; line-height: 1.5; }

/* ============== ALERT ============== */
.alert {
    border: 1px solid var(--line-bright);
    border-radius: var(--r);
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}
.alert.success { background: rgba(74, 222, 128, 0.08); border-color: var(--success); color: var(--success); }
.alert.error { background: var(--crimson-soft); border-color: var(--crimson); color: var(--crimson); }
.alert.warning { background: rgba(251, 191, 36, 0.08); border-color: var(--warning); color: var(--warning); }
.alert.info { background: rgba(96, 165, 250, 0.08); border-color: var(--info); color: var(--info); }

/* ============== LOGIN ============== */
.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 20% 10%, rgba(224, 0, 48, 0.08), transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(240, 112, 128, 0.06), transparent 40%),
        var(--bg-0);
}
.login-card {
    width: 100%;
    max-width: 360px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 32px 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.login-brand { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 6px; }
.login-brand .brand-cube { width: 36px; height: 36px; }
.login-brand-text { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.login-brand-text span { color: var(--crimson); font-weight: 600; }
.login-tagline { text-align: center; color: var(--ink-dim); font-size: 12px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 28px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-footer { text-align: center; font-size: 11px; color: var(--ink-faint); margin-top: 24px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.1em; }

/* ============== LOGIN FLAIR — split 50/50 (illust + quote) ============== */
.login-page-flair {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-0);
}
.lf-left {
    background: var(--bg-1);
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    position: relative;
}
.lf-right {
    background: var(--bg-0);
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}
[data-theme="light"] .lf-left,
:root[data-theme="light"] .lf-left { background: var(--bg-1); }
[data-theme="light"] .lf-right,
:root[data-theme="light"] .lf-right { background: var(--bg-0); }
.lf-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lf-brand .brand-cube { width: 36px; height: 36px; flex-shrink: 0; }
.lf-brand-text {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.lf-brand-text span { color: var(--crimson); font-weight: 600; }
.lf-illust {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
    background: radial-gradient(circle at center, rgba(224, 0, 48, 0.06) 0%, transparent 60%);
}
.lf-illust img {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: block;
}
.lf-quote { max-width: 460px; margin: 0; }
.lf-quote .qtext {
    margin: 0 0 6px;
    font-family: 'Newsreader', 'Georgia', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
}
.lf-quote .qtext::before { content: '“'; opacity: 0.55; }
.lf-quote .qtext::after  { content: '”'; opacity: 0.55; }
.lf-quote .qauthor {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink-dim);
}
.lf-form-inner {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}
.lf-form-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-bottom: 6px;
}
.lf-form-brand .brand-cube { width: 32px; height: 32px; }
.lf-form-brand-text {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.lf-form-brand-text span { color: var(--crimson); font-weight: 600; }
.lf-form-tagline {
    text-align: center;
    color: var(--ink-dim);
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 36px;
}
.lf-form-footer {
    text-align: center;
    font-size: 10px;
    color: var(--ink-faint);
    margin-top: 40px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.14em;
}
@media (max-width: 900px) {
    .login-page-flair { grid-template-columns: 1fr; }
    .lf-left { display: none; }
}

/* ============== BLOQUE 1 — TENANTS ROOT ====================== */

.page-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.page-actions .btn.disabled,
.page-actions .btn.disabled:hover {
    opacity: 0.55;
    pointer-events: none;
    background: var(--bg-2);
    border-color: var(--line);
    color: var(--ink-dim);
}
.small { font-size: 11px; }

.tenants-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.tenant-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: border-color 0.15s, transform 0.15s;
}
.tenant-row:hover { border-color: var(--crimson); transform: translateY(-1px); }
.tenant-row-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.tenant-row-title .tenant-name { font-size: 15px; font-weight: 600; }
.tenant-row-title .tenant-phone { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.tenant-row-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}

.tenant-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.tenant-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    margin-bottom: 24px;
    overflow-x: auto;
}
.tenant-tabs .tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r);
    font-size: 12px;
    color: var(--ink-2);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.tenant-tabs .tab:hover { background: var(--bg-2); color: var(--ink); }
.tenant-tabs .tab.active { background: var(--bg-3); color: var(--ink); }
.tenant-tabs .tab.disabled { color: var(--ink-faint); cursor: not-allowed; }
.tenant-tabs .tab.disabled:hover { background: transparent; color: var(--ink-faint); }
.tenant-tabs .tab .card-pill { font-size: 9px; padding: 2px 6px; }

.kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.card-list-compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
}
.tenant-agent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--ink-2);
    transition: border-color 0.15s, color 0.15s;
    min-height: 44px;
}
.tenant-agent-row:hover { border-color: var(--crimson); color: var(--ink); }

.nav-item-sub { padding-left: 28px; font-size: 12px; }

/* ============== BLOQUE 2 — Wizard onboarding ====================== */

.onboard-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 24px;
}
.onboard-section {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 20px 22px;
}
.onboard-section header { margin-bottom: 16px; }
.onboard-section header h2 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}
.onboard-section header p {
    font-size: 12.5px;
    color: var(--ink-dim);
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.field { display: flex; flex-direction: column; gap: 4px; }
.field.has-error .input,
.field.has-error .select { border-color: var(--crimson); }
.field-error {
    font-size: 11.5px;
    color: var(--crimson);
    font-family: 'JetBrains Mono', monospace;
    margin-top: 2px;
}
.field-hint {
    font-size: 11.5px;
    color: var(--ink-dim);
    margin-top: 4px;
    line-height: 1.45;
}
.field-hint code {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 1px 5px;
    font-size: 11px;
    color: var(--ink-2);
}

.input-with-toggle {
    position: relative;
    display: flex;
    align-items: stretch;
}
.input-with-toggle .input { padding-right: 56px; }
.pwd-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    background: var(--bg-3);
    border: 1px solid var(--line-bright);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all 0.15s;
}
.pwd-toggle:hover { background: var(--bg-4); color: var(--ink); }
.pwd-toggle.is-showing { background: var(--crimson-soft); border-color: var(--crimson); color: var(--crimson); }
.user-action-form .pwd-toggle { position: static; transform: none; min-height: 36px; }

.checklist {
    list-style: decimal inside;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-2);
}
.checklist li { padding-left: 4px; }
.checklist li code {
    font-size: 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    padding: 1px 6px;
    border-radius: var(--r-sm);
    color: var(--ink);
}

@media (max-width: 767px) {
    .onboard-section { padding: 16px 14px; }
    .form-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ============== BLOQUE 8 — Reportes mensuales ===================== */

.report-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    flex-wrap: wrap;
}
.report-brand .brand-cube { width: 36px; height: 36px; flex-shrink: 0; }
.report-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.report-brand-text .brand-name { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.report-brand-text .brand-name span { color: var(--crimson); font-weight: 600; }
.report-brand-text .brand-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    color: var(--ink-dim);
    text-transform: uppercase;
    margin-top: 3px;
}
.report-brand-tenant {
    margin-left: auto;
    text-align: right;
    line-height: 1.2;
}
.report-tenant-name { font-size: 15px; font-weight: 600; }

.report-footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}
.report-footer-brand .brand-cube { width: 22px; height: 22px; }
.report-footer-brand .brand-name { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; }
.report-footer-brand .brand-name span { color: var(--crimson); font-weight: 600; }

.report-head { align-items: center; }
.report-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.report-month-picker {
    display: flex;
    gap: 10px;
    align-items: end;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    flex-wrap: wrap;
}
.report-month-picker .label { margin-bottom: 4px; }
.report-month-picker .input { max-width: 200px; }
.report-footer {
    margin-top: 30px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    text-align: center;
}

@media print {
    body { background: white; color: black; font-size: 11pt; }
    .sidebar, .topbar, .no-print, .report-month-picker { display: none !important; }
    .app { display: block; }
    .main, .content { padding: 0; max-width: none; }
    .report-brand {
        background: white !important;
        border: 1px solid #888 !important;
        page-break-after: avoid;
    }
    .report-brand-text .brand-name { color: black !important; }
    .report-brand-text .brand-name span { color: #c00 !important; }
    .report-brand-text .brand-sub { color: #555 !important; }
    .report-tenant-name { color: black !important; }
    .report-footer-brand .brand-name { color: black !important; }
    .report-footer-brand .brand-name span { color: #c00 !important; }
    .card, .stat-card, table.t { background: white !important; border-color: #ccc !important; color: black !important; }
    .stat-card .stat-label, .stat-card .stat-meta,
    .section-aside, .muted, .cell-dim, .cell-summary,
    .report-footer { color: #444 !important; }
    .stat-card .stat-value, .page-title, .section-title,
    .cell-mono, table.t tbody td, table.t thead th { color: black !important; }
    table.t thead th { background: #f0f0f0 !important; }
    .badge.success, .badge.warning, .badge.error, .badge.info, .badge.ghost {
        background: white !important;
        border: 1px solid #888 !important;
        color: black !important;
    }
    a { color: black !important; text-decoration: none !important; }
    .section { page-break-inside: avoid; margin-bottom: 16pt; }
}

/* ============== BLOQUE 9 — Auditoría visible ===================== */

.audit-filters {
    margin-bottom: 18px;
    padding: 16px 18px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.audit-filters .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.audit-filters .page-actions { margin-bottom: 0; }

.audit-table tbody td { vertical-align: top; }
.audit-detail summary {
    cursor: pointer;
    user-select: none;
    color: var(--ink-2);
    font-size: 12px;
}
.audit-detail summary:hover { color: var(--ink); }
.audit-detail .raw-block {
    margin-top: 6px;
    max-height: 240px;
    font-size: 11px;
}

.audit-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .audit-table thead { display: none; }
    .audit-table tbody td { padding: 8px 12px; }
}

/* ============== BLOQUE 5 — Usuarios ============================== */

.users-list { display: flex; flex-direction: column; gap: 12px; }
.user-row { padding: 16px 18px; }
.user-row-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 12px;
}
.user-row-title {
    font-size: 15px; font-weight: 600;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.user-row-sub { font-size: 11.5px; color: var(--ink-dim); margin-top: 2px; }
.user-row-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.user-row-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}

.user-row-actions { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.user-row-actions summary {
    cursor: pointer; user-select: none;
    font-size: 12.5px; color: var(--ink-2);
    padding: 4px 0;
}
.user-row-actions summary:hover { color: var(--ink); }
.user-action-form {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    display: flex; flex-direction: column; gap: 8px;
}
.user-action-form .label { margin-bottom: 0; }

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
}
.checkbox {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-size: 12.5px;
    cursor: pointer;
    min-height: 40px;
}
.checkbox input { width: 16px; height: 16px; accent-color: var(--crimson); }
.checkbox:hover { border-color: var(--line-bright); }

@media (max-width: 767px) {
    .user-row-meta { grid-template-columns: 1fr 1fr; }
    .checkbox-grid { grid-template-columns: 1fr; }
}

/* ============== BLOQUE 4 — Form estructurado del agente =========== */

.raw-disclosure {
    margin-top: 18px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 12px 16px;
}
.raw-disclosure summary {
    cursor: pointer;
    font-size: 12.5px;
    color: var(--ink-2);
    user-select: none;
    padding: 4px 0;
}
.raw-disclosure summary:hover { color: var(--ink); }
.raw-disclosure summary code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--coral);
}
.raw-block {
    margin-top: 12px;
    padding: 14px;
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 480px;
}

/* ============== RESPONSIVE BASELINE ============================
   Bloque 1 deja el sistema operativo en desktop, tablet y móvil.
   Reutilizable por todos los bloques siguientes — agregar reglas
   específicas en sus propios templates si hace falta.
*/

.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r);
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-2);
    margin-right: 12px;
    flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--bg-2); color: var(--ink); border-color: var(--line-bright); }
.sidebar-close {
    display: none;
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: var(--r);
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-size: 22px;
    line-height: 1;
}
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    border: 0;
    z-index: 40;
}
body.no-scroll { overflow: hidden; }

/* Tablet — sidebar más angosto */
@media (max-width: 1279px) {
    .app { grid-template-columns: 220px 1fr; }
    .content { padding: 24px 20px 56px; }
}

/* Móvil — sidebar como drawer fuera del flujo */
@media (max-width: 767px) {
    .app {
        grid-template-columns: 1fr;
    }
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(82vw, 300px);
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.2s ease-out;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    }
    .app[data-sidebar-state='open'] .sidebar {
        transform: translateX(0);
    }
    .app[data-sidebar-state='open'] .sidebar-backdrop {
        display: block;
    }
    .sidebar-toggle { display: inline-flex; }
    .sidebar-close { display: inline-flex; }

    .topbar {
        height: 56px;
        padding: 0 14px;
        gap: 10px;
    }
    .topbar-actions { gap: 6px; }
    .topbar-actions .topbar-pill { font-size: 9.5px; padding: 3px 8px; }
    .hide-on-mobile { display: none !important; }

    .content { padding: 18px 14px 56px; }
    .page-title { font-size: 19px; }
    .page-subtitle { font-size: 12.5px; }

    /* Tablas → scroll horizontal seguro */
    .table-wrap { -webkit-overflow-scrolling: touch; }
    table.t thead th, table.t tbody td { padding: 10px 12px; }

    /* Stat-grid + tenant grid → 1 columna */
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .tenant-grid { grid-template-columns: 1fr; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-grid .stat-grid { grid-template-columns: 1fr 1fr; }

    /* Bloque 1 */
    .tenant-row-meta { grid-template-columns: 1fr 1fr; }
    .tenant-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 4px;
        scrollbar-width: thin;
    }
    .kv-grid { grid-template-columns: 1fr; }
    .card-list-compact { grid-template-columns: 1fr; }

    /* Inputs y botones tap-friendly */
    .input, .select, textarea { padding: 11px 12px; font-size: 14px; }
    .btn { padding: 10px 14px; font-size: 13px; min-height: 40px; }
    .btn.sm, .btn-ghost { min-height: 36px; }

    /* Form-row → 1 columna */
    .form-row { grid-template-columns: 1fr; }
    .form-row .form-row-grow { grid-column: span 1; }
    .inline-panel .form-grid { grid-template-columns: 1fr; }

    /* Chat más ancho en móvil — el límite del 62% sofoca burbujas */
    .chat-msg { max-width: 88%; font-size: 13px; }
}

/* Pantallas chicas en alto: aprieta sidebar drawer */
@media (max-width: 767px) and (max-height: 600px) {
    .sidebar-section { margin-bottom: 12px; }
    .sidebar-brand { padding: 6px 16px 14px; margin-bottom: 10px; }
}

/* ── Sprint 1 · Dashboard owner ────────────────────────────── */
.health-grid-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.kpi-card { padding: 14px 16px; }
.kpi-label {
    font-size: 12px;
    color: var(--ink-2, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kpi-value {
    font-size: 28px;
    font-weight: 700;
    margin: 4px 0;
}
.kpi-sub { font-size: 12px; }
.kpi-trend { font-size: 13px; font-weight: 600; }
.kpi-trend--up   { color: var(--success, #16a34a); }
.kpi-trend--down { color: var(--crimson, #dc2626); }

/* Dashboard KPIs + chart layout */
.dashboard-kpi-row {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: 12px;
    align-items: start;
}
.dashboard-chart-card { padding: 16px 20px 14px; }
.chart-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2, #6b7280);
    margin-bottom: 12px;
}

@media (max-width: 860px) {
    .dashboard-kpi-row { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .health-grid-inner { grid-template-columns: 1fr 1fr; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Sprint 1 · Capacidad/planes ───────────────────────────── */
.capacity-list {
    display: grid;
    gap: 10px;
}
.capacity-row { padding: 12px 14px; }
.capacity-row-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.capacity-bar-track {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}
.capacity-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
}

/* ============== PHONE INPUT (country selector + national number) ============== */
.phone-input { position: relative; width: 100%; }
.phone-input .pi-combo {
    display: flex;
    align-items: stretch;
    background: var(--bg-2);
    border: 1px solid var(--line-bright);
    border-radius: var(--r);
    transition: border-color 0.15s, background 0.15s;
    overflow: hidden;
}
.phone-input .pi-combo:focus-within {
    border-color: var(--crimson);
    background: var(--bg-3);
}
.phone-input .pi-cc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--line-bright);
    color: var(--ink);
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s;
}
.phone-input .pi-cc-btn:hover { background: var(--bg-3); }
.phone-input .pi-flag { font-size: 16px; line-height: 1; }
.phone-input .pi-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--ink);
}
.phone-input .pi-caret {
    color: var(--ink-dim);
    font-size: 10px;
    margin-left: 2px;
}
.phone-input .pi-national {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    color: var(--ink);
    padding: 9px 12px;
    font-size: 13px;
    outline: none;
    font-family: 'JetBrains Mono', monospace;
    min-width: 0;
}
.phone-input .pi-national::placeholder { color: var(--ink-dim); }

.phone-input .pi-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--bg-2);
    border: 1px solid var(--line-bright);
    border-radius: var(--r);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    max-height: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.phone-input .pi-dropdown[hidden] { display: none; }
.phone-input .pi-search-wrap {
    padding: 8px;
    border-bottom: 1px solid var(--line);
}
.phone-input .pi-search {
    padding: 7px 10px;
    font-size: 12px;
}
.phone-input .pi-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    flex: 1 1 auto;
}
.phone-input .pi-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    cursor: pointer;
    color: var(--ink);
    font-size: 13px;
    transition: background 0.1s;
}
.phone-input .pi-item:hover,
.phone-input .pi-item.is-selected {
    background: var(--bg-3);
}
.phone-input .pi-item.is-selected { color: var(--ink); }
.phone-input .pi-item .pi-flag { font-size: 16px; }
.phone-input .pi-item .pi-name { flex: 1 1 auto; }
.phone-input .pi-item .pi-code-dim {
    color: var(--ink-dim);
    font-size: 12px;
}
.phone-input .pi-empty {
    padding: 16px;
    text-align: center;
    color: var(--ink-dim);
    font-size: 12px;
}
@media (max-width: 767px) {
    .phone-input .pi-cc-btn { padding: 0 8px; }
    .phone-input .pi-national { padding: 11px 12px; font-size: 14px; }
}

/* ============== CHANNEL CARDS (Apple-Mail-style channel picker) ============== */
.channel-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.channel-card {
    background: var(--bg-2);
    border: 1px solid var(--line-bright);
    border-radius: var(--r-lg);
    padding: 16px;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
    cursor: pointer;
}
.channel-card:hover { border-color: var(--ink-faint); }
.channel-card.is-on {
    border-color: var(--crimson);
    background: var(--bg-3);
}
.channel-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--r);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}
.channel-card-icon svg { width: 22px; height: 22px; }
.channel-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.channel-card-status {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
    font-weight: 500;
}
.channel-card.is-on .channel-card-status { color: var(--crimson); }
.channel-card-desc {
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.4;
}
.channel-card-tag {
    display: inline-block;
    margin-top: 8px;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-4);
    color: var(--ink-dim);
    font-weight: 500;
}
.channel-card-tag.runtime-ready { color: var(--success); background: rgba(74, 222, 128, 0.12); }
.channel-card-tag.runtime-beta { color: var(--info); background: rgba(96, 165, 250, 0.12); }
.channel-card-tag.config-only { color: var(--warning); background: rgba(251, 191, 36, 0.12); }

/* Brand colors for channel icons */
.channel-icon-whatsapp { background: #25D366; }
.channel-icon-telegram { background: #229ED9; }
.channel-icon-email    { background: linear-gradient(135deg, #4285F4, #EA4335); }
.channel-icon-teams    { background: #6264A7; }
.channel-icon-lark     { background: #00B4FF; }
.channel-icon-web      { background: var(--crimson); }

/* Channel detail panels */
.channel-panel {
    border: 1px solid var(--line-bright);
    border-radius: var(--r-lg);
    background: var(--bg-2);
    padding: 18px 20px;
    margin-bottom: 14px;
}
.channel-panel.is-off { display: none; }
.channel-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.channel-panel-head .channel-card-icon { margin: 0; }
.channel-panel-head h3 { font-size: 15px; font-weight: 600; }
.channel-panel-head .panel-sub {
    font-size: 12px;
    color: var(--ink-2);
    margin-top: 2px;
}
.channel-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

/* Email provider sub-picker */
.email-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}
.email-provider-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--bg-3);
    border: 1px solid var(--line-bright);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.email-provider-card:hover { border-color: var(--ink-faint); }
.email-provider-card.is-selected {
    border-color: var(--crimson);
    background: var(--bg-4);
}
.email-provider-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.email-provider-card .ep-logo {
    width: 32px; height: 32px;
    border-radius: var(--r);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 13px;
}
.email-provider-card .ep-name {
    font-size: 11px;
    color: var(--ink);
    font-weight: 500;
}
.ep-logo-gmail    { background: #EA4335; }
.ep-logo-outlook  { background: #0078D4; }
.ep-logo-icloud   { background: linear-gradient(135deg, #61aaff, #2c80ff); }
.ep-logo-yahoo    { background: #6001D2; }
.ep-logo-exchange { background: #0078D4; }
.ep-logo-bol      { background: #FF6A1A; }
.ep-logo-imap     { background: var(--bg-4); color: var(--ink); border: 1px solid var(--line-bright); }

.channel-toggle-track {
    width: 32px;
    height: 18px;
    background: var(--bg-4);
    border-radius: 12px;
    position: relative;
    transition: background 0.15s;
    flex-shrink: 0;
    border: 1px solid var(--line-bright);
}
.channel-toggle-track::after {
    content: "";
    position: absolute;
    top: 1px; left: 1px;
    width: 14px; height: 14px;
    background: var(--ink-2);
    border-radius: 50%;
    transition: transform 0.15s, background 0.15s;
}
.channel-card.is-on .channel-toggle-track {
    background: var(--crimson);
    border-color: var(--crimson);
}
.channel-card.is-on .channel-toggle-track::after {
    transform: translateX(13px);
    background: #fff;
}

/* ============== THEME TOGGLE BUTTON ============== */
.theme-toggle-btn {
    background: var(--bg-2);
    border: 1px solid var(--line-bright);
    color: var(--ink);
    border-radius: var(--r);
    width: 38px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.theme-toggle-btn:hover {
    background: var(--bg-3);
    border-color: var(--crimson);
    color: var(--crimson);
}
.theme-toggle-btn svg { display: block; }

/* Botón flotante para login y otras páginas standalone sin topbar */
.theme-toggle-floating {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
    background: var(--bg-2);
    border: 1px solid var(--line-bright);
    color: var(--ink);
    border-radius: var(--r);
    width: 40px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.theme-toggle-floating:hover {
    background: var(--bg-3);
    border-color: var(--crimson);
    color: var(--crimson);
}
.theme-toggle-floating svg { display: block; }

/* ── Sesión 18 / progress UX (botones loading + progress bar + spinners) ── */

@keyframes gz-spin {
    to { transform: rotate(360deg); }
}

@keyframes gz-shimmer {
    from { background-position: -200% 0; }
    to   { background-position:  200% 0; }
}

@keyframes gz-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.92); }
}

/* Spinner standalone — usable inline. .spinner.sm/.md/.lg controlan tamaño.
   Hereda currentColor para que combine con el contexto. */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: gz-spin 0.7s linear infinite;
    vertical-align: -3px;
}
.spinner.sm { width: 12px; height: 12px; border-width: 1.5px; }
.spinner.lg { width: 24px; height: 24px; border-width: 3px; }
.spinner.crimson { color: var(--crimson); }
.spinner.ink-2 { color: var(--ink-2); }

/* Botón en estado "is-loading" — reemplaza el texto con spinner pero
   conserva el ancho. data-loading-label se inyecta al lado del spinner
   si está presente. */
.btn.is-loading {
    pointer-events: none;
    position: relative;
    color: transparent !important;
}
.btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--ink);
    animation: gz-spin 0.7s linear infinite;
}
.btn.primary.is-loading::after { color: white; }

/* Progress bar — barra horizontal con relleno animado.
   Uso: <div class="progress"><div class="progress-fill" style="width: 42%"></div></div>
   Para indeterminate: <div class="progress indeterminate"><div class="progress-fill"></div></div> */
.progress {
    width: 100%;
    height: 6px;
    background: var(--bg-3);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.progress-fill {
    height: 100%;
    background: var(--crimson);
    border-radius: 999px;
    transition: width 0.4s ease-out;
}
.progress.success .progress-fill { background: var(--success); }
.progress.indeterminate .progress-fill {
    width: 35% !important;
    background: linear-gradient(
        90deg,
        var(--bg-3) 0%,
        var(--crimson) 50%,
        var(--bg-3) 100%
    );
    background-size: 200% 100%;
    animation: gz-shimmer 1.4s linear infinite;
}

/* Pulse aplicable a iconos de step "running" — los marca visualmente
   sin tener que reemplazarlos por un spinner. */
.is-pulsing {
    animation: gz-pulse 1.2s ease-in-out infinite;
}

/* Step-icon con estado "running" — fondo crimson y pulse.
   Complementa la lógica de tenant_onboarding.html (estados ok/skipped/
   error/pending ya cubiertos via background inline). */
.step-icon[data-status="running"] {
    background: var(--crimson) !important;
    color: white !important;
    border: none !important;
    animation: gz-pulse 1.2s ease-in-out infinite;
}

/* ── Dashboard Command Center ─────────────────────────────── */
.status-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-radius: var(--r);
    font-size: 13px;
    margin-bottom: 18px;
    border: 1px solid transparent;
}
.status-strip--green  { background: rgba(74,222,128,0.08);  border-color: rgba(74,222,128,0.22); color: var(--success); }
.status-strip--yellow { background: rgba(251,191,36,0.08);  border-color: rgba(251,191,36,0.22); color: var(--warning); }
.status-strip--red    { background: rgba(224,0,48,0.08);    border-color: rgba(224,0,48,0.22);   color: var(--crimson); }
.status-strip .ink2   { color: var(--ink-2); }

.dashboard-2col {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 960px) { .dashboard-2col { grid-template-columns: 1fr; } }

.kpi-grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Compact agent rows */
.agent-rows { display: flex; flex-direction: column; }
.agent-row {
    display: grid;
    grid-template-columns: 10px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}
.agent-row:hover { background: var(--bg-2); }
.agent-row:last-child { border-bottom: none; }
.agent-dot { display: block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.agent-dot--ok      { background: var(--success); }
.agent-dot--warn    { background: var(--warning); }
.agent-dot--down    { background: var(--crimson); }
.agent-dot--unknown { background: var(--ink-dim); }
.agent-row-metrics { font-family: var(--mono, monospace); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.agent-row-meta    { font-family: var(--mono, monospace); font-size: 11px; color: var(--ink-dim); text-align: right; white-space: nowrap; }

/* Health dots strip */
.health-dots { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.health-dot-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-2); cursor: default; }
.health-dot { display: block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.health-dot--green   { background: var(--success); }
.health-dot--yellow  { background: var(--warning); }
.health-dot--red     { background: var(--crimson); }
.health-dot--unknown { background: var(--ink-dim); }

/* Activity feed timeline */
.activity-feed { display: flex; flex-direction: column; }
.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
}
.activity-item:last-child { border-bottom: none; }
.activity-dot { display: block; width: 7px; height: 7px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.activity-dot--error { background: var(--crimson); }
.activity-dot--warn  { background: var(--warning); }
.activity-dot--ok    { background: var(--success); }
.activity-dot--info  { background: var(--info); }
.activity-body { flex: 1; min-width: 0; line-height: 1.5; }

/* ============================================================================
   FRONTIER LAB · sesión 50 (propuesta C)
   ----------------------------------------------------------------------------
   Aditivo. Aporta:
   - Mesh gradient backdrop globalmente.
   - Glass treatment para sidebar + topbar (backdrop-filter blur).
   - Display font + tabular numerics para hero/KPI tiles.
   - Componentes nuevos: .frontier-hero, .frontier-tile-grid, .frontier-tile,
     .frontier-panel, .frontier-pill-user, .live-dot.
   - Color-story con coral/rose para texto gradient.

   Las clases existentes (.app, .sidebar, .nav-item, .section, .card, .btn,
   .badge, .stat-card, .activity-feed) NO se tocan — siguen funcionando.
   ============================================================================ */

/* Mesh backdrop — capas fijas detrás de toda la app */
:root[data-theme="dark"] body::before,
:root:not([data-theme]) body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(224, 0, 48, 0.14) 0%, transparent 38%),
        radial-gradient(circle at 92% 8%,  rgba(139, 92, 246, 0.08) 0%, transparent 42%),
        radial-gradient(circle at 95% 95%, rgba(240, 112, 128, 0.08) 0%, transparent 35%),
        radial-gradient(circle at 5% 78%,  rgba(20, 184, 166, 0.05) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}
:root[data-theme="dark"] body::after,
:root:not([data-theme]) body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
    z-index: 0;
}
/* Light mode: mesh más suave en cálidos */
:root[data-theme="light"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(197, 0, 42, 0.06) 0%, transparent 38%),
        radial-gradient(circle at 92% 8%,  rgba(216, 90, 107, 0.04) 0%, transparent 42%),
        radial-gradient(circle at 95% 95%, rgba(216, 90, 107, 0.04) 0%, transparent 35%);
    pointer-events: none;
    z-index: 0;
}
/* Layout encima del mesh */
.app { position: relative; z-index: 1; }

/* Glass sidebar (dark mode) — translúcido con blur. Mantiene el border y padding. */
:root[data-theme="dark"] .sidebar,
:root:not([data-theme]) .sidebar {
    background: rgba(10, 10, 12, 0.65);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}
/* Light mode mantiene fondo sólido para legibilidad */

/* Glass topbar */
:root[data-theme="dark"] .topbar,
:root:not([data-theme]) .topbar {
    background: rgba(17, 17, 20, 0.55);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* Brand mark con glow sutil (cubo más vivo) */
.brand-cube {
    filter: drop-shadow(0 0 8px rgba(224, 0, 48, 0.28));
    transition: filter 0.3s;
}
.brand-cube:hover {
    filter: drop-shadow(0 0 12px rgba(224, 0, 48, 0.42));
}

/* Nav active state — agrega glow al accent left bar */
:root[data-theme="dark"] .nav-item.active::before,
:root:not([data-theme]) .nav-item.active::before {
    box-shadow: 0 0 10px var(--crimson);
}

/* Display utilities */
.display-num {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.text-gradient-brand {
    background: linear-gradient(90deg, var(--crimson), var(--coral) 60%, var(--rose));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
.text-gradient-light {
    background: linear-gradient(180deg, #FFFFFF 30%, #B8B8C8);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
:root[data-theme="light"] .text-gradient-light {
    background: linear-gradient(180deg, #1A1A1F 30%, #4A4A52);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/* Live pulse dot — animación verde para "online" */
.live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
    animation: livePulse 1.6s ease-in-out infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ─── Hero card (Frontier Lab) ─── */
.frontier-hero {
    position: relative;
    padding: 28px 32px 26px;
    margin: 0 0 22px;
    background: linear-gradient(135deg, rgba(224, 0, 48, 0.08), rgba(240, 112, 128, 0.04) 60%, transparent);
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
}
:root[data-theme="light"] .frontier-hero {
    background: linear-gradient(135deg, rgba(197, 0, 42, 0.05), rgba(216, 90, 107, 0.03) 60%, transparent);
}
.frontier-hero::before {
    content: "";
    position: absolute; right: -120px; top: -120px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(224, 0, 48, 0.22) 0%, transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}
:root[data-theme="light"] .frontier-hero::before {
    background: radial-gradient(circle, rgba(197, 0, 42, 0.12) 0%, transparent 70%);
}
.frontier-hero-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--crimson);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}
.frontier-hero-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 36px;
    align-items: center;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}
.frontier-hero-title {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin: 0;
    color: var(--ink);
}
.frontier-hero-title em {
    font-style: normal;
    background: linear-gradient(90deg, var(--crimson), var(--coral) 60%, var(--rose));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
.frontier-hero-sub {
    color: var(--ink-2);
    font-size: 14px;
    margin: 10px 0 0;
    max-width: 560px;
    line-height: 1.5;
    text-wrap: pretty;
}
.frontier-hero-actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.frontier-hero-metric {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-left: 36px;
    border-left: 1px solid var(--line);
    min-width: 220px;
}
.frontier-hero-metric .label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.frontier-hero-metric .num {
    font-size: 56px;
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
.frontier-hero-metric .delta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--success);
    margin-top: 6px;
}
.frontier-hero-metric .delta.down { color: var(--warning); }

/* ─── Tile grid (KPIs Frontier) ─── */
.frontier-tile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}
@media (max-width: 980px) {
    .frontier-tile-grid { grid-template-columns: repeat(2, 1fr); }
    .frontier-hero-row { grid-template-columns: 1fr; }
    .frontier-hero-metric { padding-left: 0; border-left: none; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 6px; }
}
.frontier-tile {
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
    border-radius: 18px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: transform 0.2s, background 0.2s, border-color 0.2s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
}
:root[data-theme="light"] .frontier-tile {
    background: rgba(255, 255, 255, 0.5);
}
.frontier-tile:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--line-bright);
    transform: translateY(-2px);
}
:root[data-theme="light"] .frontier-tile:hover {
    background: rgba(255, 255, 255, 0.75);
}
.frontier-tile-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.frontier-tile-num {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 6px 0 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.frontier-tile-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--ink-dim);
}
.frontier-tile-foot .delta {
    color: var(--success);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
}
.frontier-tile-foot .delta.down { color: var(--warning); }

/* Glow per-tile color (decorative) */
.frontier-tile.glow-crimson::after,
.frontier-tile.glow-coral::after,
.frontier-tile.glow-violet::after,
.frontier-tile.glow-teal::after,
.frontier-tile.glow-amber::after {
    content: "";
    position: absolute;
    bottom: -50%; right: -30%;
    width: 200px; height: 200px;
    pointer-events: none;
}
.frontier-tile.glow-crimson::after { background: radial-gradient(circle, rgba(224, 0, 48, 0.18) 0%, transparent 70%); }
.frontier-tile.glow-coral::after   { background: radial-gradient(circle, rgba(240, 112, 128, 0.16) 0%, transparent 70%); }
.frontier-tile.glow-violet::after  { background: radial-gradient(circle, rgba(139, 92, 246, 0.16) 0%, transparent 70%); }
.frontier-tile.glow-teal::after    { background: radial-gradient(circle, rgba(20, 184, 166, 0.16) 0%, transparent 70%); }
.frontier-tile.glow-amber::after   { background: radial-gradient(circle, rgba(245, 158, 11, 0.16) 0%, transparent 70%); }

/* ─── Pill user (sidebar bottom) ─── */
.frontier-pill-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid var(--line);
    margin: 0 12px 12px;
}
:root[data-theme="light"] .frontier-pill-user {
    background: rgba(0, 0, 0, 0.02);
}
.frontier-pill-user .avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: conic-gradient(from 140deg at 50% 50%, var(--crimson), var(--coral), #8B5CF6, var(--crimson));
    color: white;
    display: grid; place-items: center;
    font-weight: 600;
    font-size: 11.5px;
    box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}
.frontier-pill-user .meta-name { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.frontier-pill-user .meta-role { font-size: 10.5px; color: var(--ink-dim); margin-top: 1px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; text-transform: uppercase; }

/* ─── Search pill (topbar) ─── */
.frontier-search-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 18px;
    color: var(--ink-dim);
    font-size: 12.5px;
    cursor: pointer;
    min-width: 260px;
    transition: background 0.15s, border-color 0.15s;
}
:root[data-theme="light"] .frontier-search-pill {
    background: rgba(0, 0, 0, 0.03);
}
.frontier-search-pill:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--line-bright);
}
:root[data-theme="light"] .frontier-search-pill:hover {
    background: rgba(0, 0, 0, 0.05);
}
.frontier-search-pill .kbd {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    background: var(--bg-2);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--line-bright);
}

/* ─── Tenant card grid (lista /tenants) ─── */
.frontier-tenant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    margin-top: 20px;
}
.frontier-tenant-card {
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
    border-radius: 18px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: transform 0.2s, background 0.2s, border-color 0.2s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
:root[data-theme="light"] .frontier-tenant-card {
    background: rgba(255, 255, 255, 0.55);
}
.frontier-tenant-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--line-bright);
    transform: translateY(-2px);
}
:root[data-theme="light"] .frontier-tenant-card:hover {
    background: rgba(255, 255, 255, 0.8);
}
.frontier-tenant-card::after {
    content: "";
    position: absolute;
    bottom: -50%; right: -30%;
    width: 220px; height: 220px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(224, 0, 48, 0.10) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}
.frontier-tenant-card:hover::after { opacity: 1; }
.frontier-tenant-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.frontier-tenant-name {
    font-family: 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.2;
}
.frontier-tenant-slug {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-dim);
    margin-top: 4px;
}
.frontier-tenant-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.frontier-tenant-status .dot {
    width: 6px; height: 6px; border-radius: 50%;
}
.frontier-tenant-status.ok { background: rgba(20, 184, 166, 0.12); color: var(--success); border: 1px solid rgba(20, 184, 166, 0.3); }
.frontier-tenant-status.ok .dot { background: var(--success); box-shadow: 0 0 8px var(--success); }
.frontier-tenant-status.warn { background: rgba(245, 158, 11, 0.12); color: var(--warning); border: 1px solid rgba(245, 158, 11, 0.3); }
.frontier-tenant-status.warn .dot { background: var(--warning); }
.frontier-tenant-status.down { background: rgba(224, 0, 48, 0.12); color: var(--crimson); border: 1px solid rgba(224, 0, 48, 0.3); }
.frontier-tenant-status.down .dot { background: var(--crimson); }
.frontier-tenant-status.ghost { background: rgba(127, 127, 127, 0.08); color: var(--ink-dim); border: 1px solid var(--line); }
.frontier-tenant-status.ghost .dot { background: var(--ink-dim); }
.frontier-tenant-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    font-size: 12.5px;
}
.frontier-tenant-meta .kv {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.frontier-tenant-meta .kv-k {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.frontier-tenant-meta .kv-v {
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.frontier-tenant-meta .kv-v.mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}
.frontier-tenant-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 11.5px;
    color: var(--ink-dim);
}
.frontier-tenant-foot .ts {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}
.frontier-tenant-foot .open-arrow {
    color: var(--crimson);
    font-weight: 600;
    font-size: 13px;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}
.frontier-tenant-card:hover .frontier-tenant-foot .open-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* Status chips agregados en el hero */
.frontier-hero-stats {
    display: flex;
    gap: 18px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.frontier-hero-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink-dim);
}
.frontier-hero-stat .n {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.frontier-hero-stat .dot {
    width: 6px; height: 6px; border-radius: 50%;
}
.frontier-hero-stat.ok .dot { background: var(--success); }
.frontier-hero-stat.warn .dot { background: var(--warning); }
.frontier-hero-stat.down .dot { background: var(--crimson); }
.frontier-hero-stat.ghost .dot { background: var(--ink-dim); }

/* Botón primary "Frontier" (con glow crimson) */
.btn.frontier-primary {
    background: linear-gradient(180deg, var(--crimson-hover), var(--crimson));
    border-color: var(--crimson-hover);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 6px 20px rgba(224, 0, 48, 0.32);
    color: white;
    font-weight: 600;
}
.btn.frontier-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 10px 28px rgba(224, 0, 48, 0.42);
}

/* ============================================================
   FRONTIER LAB · Dashboard B v2 — Rings + Tabs + Donut inline
   Sesión 51 · aterriza propuesta B con donuts de C
   ============================================================ */

/* ── Wrapper: stack vertical (NO grid) ──────────────────── */
.frontier-dashboard-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Hero rings (3 anillos por capa) ─────────────────────── */
.frontier-rings-panel {
    padding: 28px 32px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--line);
    border-radius: 22px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
:root[data-theme="light"] .frontier-rings-panel {
    background: rgba(255, 255, 255, 0.55);
}
.frontier-rings-panel::before {
    content: "";
    position: absolute;
    top: -60%; left: 20%;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.06) 0%, transparent 60%);
    pointer-events: none;
}
.frontier-rings-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    position: relative;
    align-items: center;
}
.frontier-ring {
    display: flex; flex-direction: column;
    align-items: center; gap: 14px; text-align: center;
}
.frontier-ring-svg {
    width: 180px; height: 180px;
    position: relative;
}
.frontier-ring-svg svg { transform: rotate(-90deg); display: block; }
.frontier-ring-track {
    fill: none;
    stroke: var(--line);
    stroke-width: 12;
}
.frontier-ring-fill {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease;
}
.frontier-ring-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-variant-numeric: tabular-nums;
}
.frontier-ring-pct {
    font-size: 38px; font-weight: 600;
    letter-spacing: -0.03em; line-height: 1;
    color: var(--ink);
}
.frontier-ring-pct .unit {
    font-size: 20px; color: var(--ink-dim);
    margin-left: 1px;
}
.frontier-ring-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px; color: var(--ink-dim);
    text-transform: uppercase; letter-spacing: 0.12em;
    margin-top: 4px;
}
.frontier-ring-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px; color: var(--ink-dim);
    text-transform: uppercase; letter-spacing: 0.12em;
}
.frontier-ring-title {
    font-size: 15px; font-weight: 600;
    letter-spacing: -0.005em;
}
.frontier-ring-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--ink-2);
    max-width: 260px;
    text-overflow: ellipsis; overflow: hidden;
    white-space: nowrap;
}

/* ── Tabs (filtrado por capa) ───────────────────────────── */
.frontier-tabs-bar {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
    border-radius: 11px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
:root[data-theme="light"] .frontier-tabs-bar {
    background: rgba(255, 255, 255, 0.55);
}
.frontier-tab {
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--ink-dim);
    cursor: pointer;
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex; align-items: center; gap: 7px;
    transition: color 0.15s, background 0.15s;
}
.frontier-tab:hover { color: var(--ink-2); }
.frontier-tab.active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
:root[data-theme="light"] .frontier-tab.active {
    background: rgba(0, 0, 0, 0.05);
}
.frontier-tab-count {
    background: rgba(255, 255, 255, 0.07);
    color: var(--ink-2);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
}
.frontier-tab.active .frontier-tab-count {
    background: var(--crimson);
    color: white;
}

/* ── Component cards (Frontier) ─────────────────────────── */
.frontier-comp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 16px;
}
.frontier-comp-card {
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--line);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex; flex-direction: column; gap: 9px;
    transition: transform 0.2s, border-color 0.2s, background 0.2s;
    position: relative; overflow: hidden;
}
:root[data-theme="light"] .frontier-comp-card {
    background: rgba(255, 255, 255, 0.55);
}
.frontier-comp-card[data-layer]:hover {
    transform: translateY(-2px);
    border-color: var(--line-bright);
    background: rgba(255, 255, 255, 0.04);
}
:root[data-theme="light"] .frontier-comp-card[data-layer]:hover {
    background: rgba(255, 255, 255, 0.8);
}
.frontier-comp-card.status-red {
    border-color: rgba(224, 0, 48, 0.4);
}
.frontier-comp-card.status-red::after {
    content: "";
    position: absolute;
    bottom: -50%; right: -30%;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(224, 0, 48, 0.12) 0%, transparent 70%);
    pointer-events: none;
}
.frontier-comp-card.status-yellow {
    border-color: rgba(245, 158, 11, 0.32);
}
.frontier-comp-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
}
.frontier-comp-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px; font-weight: 600;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    letter-spacing: -0.005em;
}
.frontier-comp-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.06em;
    border: 1px solid;
    flex-shrink: 0;
}
.frontier-comp-status .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor;
}
.frontier-comp-status.ok { background: rgba(20,184,166,0.10); color: var(--success); border-color: rgba(20,184,166,0.25); }
.frontier-comp-status.ok .dot { box-shadow: 0 0 6px var(--success); }
.frontier-comp-status.warn { background: rgba(245,158,11,0.10); color: var(--warning); border-color: rgba(245,158,11,0.25); }
.frontier-comp-status.down { background: rgba(224,0,48,0.10); color: var(--crimson); border-color: rgba(224,0,48,0.25); }
.frontier-comp-status.down .dot { box-shadow: 0 0 6px var(--crimson); }
.frontier-comp-status.ghost { background: rgba(127,127,127,0.08); color: var(--ink-dim); border-color: var(--line); }
.frontier-comp-status.stale { background: rgba(245,158,11,0.08); color: var(--warning); border-color: rgba(245,158,11,0.18); }

.frontier-comp-body {
    display: flex; gap: 12px; align-items: center;
}
.frontier-comp-metrics {
    flex: 1; min-width: 0;
    display: grid; grid-template-columns: auto 1fr;
    gap: 3px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-dim);
}
.frontier-comp-metrics .v { color: var(--ink-2); font-weight: 500; }

/* Donut inline en cards con capacity (idea robada de propuesta C) */
.frontier-cap-donut {
    width: 56px; height: 56px;
    position: relative;
    flex-shrink: 0;
}
.frontier-cap-donut svg { transform: rotate(-90deg); display: block; }
.frontier-cap-donut-track { fill: none; stroke: var(--line); stroke-width: 5; }
.frontier-cap-donut-fill {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}
.frontier-cap-donut-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 1;
}
.frontier-cap-donut-pct {
    font-size: 12px; font-weight: 600;
}
.frontier-cap-donut-pct.ok { color: var(--success); }
.frontier-cap-donut-pct.warn { color: var(--warning); }
.frontier-cap-donut-pct.down { color: var(--crimson); }
.frontier-cap-donut-unit {
    font-size: 8px; color: var(--ink-dim);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-top: 1px;
}

.frontier-comp-spark {
    width: 100%; height: 18px; display: block;
}
.frontier-comp-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 7px;
    border-top: 1px solid var(--line);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    color: var(--ink-dim);
}
.frontier-comp-layer-tag {
    text-transform: uppercase; letter-spacing: 0.08em;
}
.frontier-comp-layer-tag.infra { color: rgba(224,0,48,0.65); }
.frontier-comp-layer-tag.ia { color: rgba(139,92,246,0.7); }
.frontier-comp-layer-tag.tenant { color: rgba(20,184,166,0.75); }
.frontier-comp-layer-tag.poller { color: rgba(245,158,11,0.7); }

/* ── Capacity strip compacto (abajo, fallback + accesibilidad) ──── */
.frontier-cap-strip {
    margin-top: 18px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--line);
    border-radius: 18px;
    backdrop-filter: blur(20px);
}
:root[data-theme="light"] .frontier-cap-strip {
    background: rgba(255, 255, 255, 0.4);
}
.frontier-cap-strip-head {
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 12px;
}
.frontier-cap-strip-title { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.frontier-cap-strip-sub {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--ink-dim);
}
.frontier-cap-strip-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.frontier-cap-item {
    display: flex; align-items: center; gap: 14px;
}
.frontier-cap-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.frontier-cap-item-label {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.08em;
}
.frontier-cap-item-big {
    font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.frontier-cap-item-of { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-dim); }
/* Mantener clase capacity-bar-track por compatibilidad con tests existentes,
   pero visualmente integrada (barra delgada bajo el donut). */
.capacity-bar-track {
    position: relative;
    width: 100%; height: 3px;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}
.capacity-bar-fill {
    position: absolute; inset: 0 auto 0 0;
    border-radius: 2px;
    transition: width 0.6s ease;
}

@media (max-width: 900px) {
    .frontier-rings-row { grid-template-columns: 1fr; gap: 22px; }
    .frontier-ring-svg { width: 150px; height: 150px; }
}

/* ── Tab Pagos — badge dots tri-estado ─────────────────────────────── */
.tenant-tabs .dot {
    display:inline-block; width:6px; height:6px; border-radius:50%;
    margin-left:6px; vertical-align:middle;
}
.tenant-tabs .dot-live  { background: var(--accent); box-shadow: 0 0 0 2px rgba(0,200,100,0.25); }
.tenant-tabs .dot-error { background: var(--crimson, #E00030); }
.tenant-tabs .dot-empty { background: var(--ink-3, #b5b5b5); }

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  ATLAS PRO — Lenguaje visual para módulo Payments                    ║
   ║                                                                      ║
   ║  Evolución del Frontier Lab al nivel "fintech-grade dashboard":      ║
   ║  hero metric jerarquizado, sparkline real, ring conversion, mono     ║
   ║  para IDs/fechas/montos, badges semánticos con dot animado.          ║
   ║                                                                      ║
   ║  Reutiliza tokens existentes (--bg-*, --crimson, --success, etc.) y  ║
   ║  clases existentes (.btn, .live-dot, .frontier-hero). NO duplica.    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* === Hero metric panel ===================================== */
.atlas-metric-panel {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 32px;
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    border: 1px solid var(--line-bright);
    border-radius: 14px;
    padding: 28px 32px;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
}
.atlas-metric-panel::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--crimson), transparent 80%);
}
.atlas-metric-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.atlas-metric-value {
    font-size: 64px;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    margin: 0 0 6px;
}
.atlas-metric-value .currency {
    font-size: 24px;
    font-weight: 500;
    color: var(--ink-2);
    margin-left: 10px;
    letter-spacing: 0;
}
.atlas-metric-delta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    margin-top: 10px;
}
.atlas-metric-delta.up   { color: var(--success); }
.atlas-metric-delta.down { color: var(--crimson); }
.atlas-metric-delta.flat { color: var(--ink-2); }
.atlas-metric-delta .vs  { color: var(--ink-dim); font-weight: 400; }
.atlas-metric-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
.atlas-metric-meta-item { display: flex; flex-direction: column; gap: 4px; }
.atlas-metric-meta-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.atlas-metric-meta-value {
    font-size: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
    color: var(--ink);
}

/* === Sparkline ============================================ */
.atlas-spark { display: flex; flex-direction: column; justify-content: space-between; }
.atlas-spark-head {
    display: flex; justify-content: space-between;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 10px;
}
.atlas-spark-svg { width: 100%; height: 130px; display: block; }
.atlas-spark-axis {
    display: flex; justify-content: space-between;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-dim);
    margin-top: 4px;
}

/* === Stats triple row ===================================== */
.atlas-stats-triple {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
.atlas-stat {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 22px;
    transition: border-color 140ms, transform 140ms;
}
.atlas-stat:hover { border-color: var(--line-bright); }
.atlas-stat.with-ring {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
}
.atlas-stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 12px;
}
.atlas-stat-value {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 6px;
}
.atlas-stat-value .unit {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-2);
    margin-left: 2px;
}
.atlas-stat-value .sep {
    font-size: 16px;
    color: var(--ink-faint);
    margin: 0 4px;
}
.atlas-stat-meta {
    font-size: 12px;
    color: var(--ink-2);
    margin-top: 4px;
}
.atlas-ring { width: 64px; height: 64px; display: block; }
.atlas-ring .track { stroke: var(--line); }
.atlas-ring .arc { stroke: var(--crimson); }

/* === Atlas data table ===================================== */
.atlas-table-wrap {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.atlas-table-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line);
}
.atlas-table-head .title {
    font-size: 14px; font-weight: 600;
    display: flex; align-items: center; gap: 10px;
}
.atlas-filter-pill {
    display: inline-flex;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    padding: 3px 10px;
    border-radius: 99px;
    background: var(--bg-3);
    color: var(--ink-2);
    border: 1px solid var(--line-bright);
    letter-spacing: 0.04em;
}
.atlas-table-actions { display: flex; gap: 8px; align-items: center; }
table.atlas-data {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table.atlas-data thead th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
    font-weight: 500;
    padding: 12px 22px;
    text-align: left;
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
}
table.atlas-data tbody td {
    padding: 13px 22px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
table.atlas-data tbody tr { transition: background 100ms; }
table.atlas-data tbody tr:hover { background: var(--bg-2); }
table.atlas-data tbody tr:last-child td { border-bottom: none; }
table.atlas-data .mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--ink-2);
}
table.atlas-data .num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight: 500;
}
table.atlas-data .desc {
    color: var(--ink);
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atlas-sku-pill {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--bg-3);
    color: var(--ink-2);
    border: 1px solid var(--line-bright);
}
.atlas-sku-empty {
    color: var(--ink-faint);
    font-family: 'JetBrains Mono', monospace;
}
.atlas-table-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 22px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--ink-dim);
}
.atlas-table-foot .page-info { font-family: 'JetBrains Mono', monospace; }
.atlas-table-foot .actions { display: flex; gap: 8px; }

/* === Atlas status badges =================================== */
.atlas-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 99px;
    border: 1px solid transparent;
}
.atlas-badge::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.atlas-badge.paid          { color: var(--success); background: rgba(74,222,128,0.10); border-color: rgba(74,222,128,0.25); }
.atlas-badge.link_sent     { color: var(--info);    background: rgba(96,165,250,0.10); border-color: rgba(96,165,250,0.25); }
.atlas-badge.expired       { color: var(--warning); background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.28); }
.atlas-badge.refunded,
.atlas-badge.partially_refunded { color: var(--ink-2); background: var(--bg-3); border-color: var(--line-bright); }
.atlas-badge.failed        { color: var(--crimson); background: var(--crimson-soft); border-color: rgba(224,0,48,0.30); }
.atlas-badge.cancelled     { color: var(--ink-dim); background: var(--bg-3); border-color: var(--line-bright); }
.atlas-badge.disputed      { color: var(--crimson); background: var(--crimson-soft); border-color: rgba(224,0,48,0.30); }

/* === Atlas modal (sin background:white roto) ================ */
.atlas-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(5, 5, 7, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.atlas-modal-backdrop.open { display: flex; }
.atlas-modal {
    background: var(--bg-1);
    border: 1px solid var(--line-bright);
    border-radius: 14px;
    max-width: 560px;
    width: 100%;
    padding: 26px 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: var(--ink);
}
:root[data-theme="light"] .atlas-modal-backdrop {
    background: rgba(20, 20, 30, 0.45);
}
:root[data-theme="light"] .atlas-modal {
    background: var(--bg-0);
    border-color: var(--line-bright);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
}
.atlas-modal h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.atlas-modal .modal-sub {
    margin: 0 0 18px;
    color: var(--ink-2);
    font-size: 13px;
}
.atlas-modal .form-row { margin-bottom: 14px; }
.atlas-modal label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 6px;
}
.atlas-modal input, .atlas-modal select, .atlas-modal textarea {
    width: 100%;
    background: var(--bg-2);
    color: var(--ink);
    border: 1px solid var(--line-bright);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    transition: border-color 120ms, background 120ms;
}
.atlas-modal input:focus, .atlas-modal select:focus, .atlas-modal textarea:focus {
    outline: none;
    border-color: var(--crimson);
    background: var(--bg-1);
}
.atlas-modal .form-actions {
    display: flex; gap: 10px; align-items: center;
    margin-top: 18px;
}
.atlas-modal .modal-feedback {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    display: none;
}
.atlas-modal .modal-feedback.ok {
    background: rgba(74, 222, 128, 0.10);
    border: 1px solid rgba(74, 222, 128, 0.30);
    color: var(--success);
    display: block;
}
.atlas-modal .modal-feedback.err {
    background: var(--crimson-soft);
    border: 1px solid rgba(224, 0, 48, 0.35);
    color: var(--crimson);
    display: block;
}
.atlas-modal .modal-feedback code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    background: var(--bg-2);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--ink);
    word-break: break-all;
}

/* === Atlas Stepper (wizard payments_setup) ================ */
.atlas-stepper {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
    align-items: center;
    margin-bottom: 32px;
}
.atlas-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}
.atlas-step-num {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-2);
    border: 1px solid var(--line-bright);
    color: var(--ink-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all 180ms;
}
.atlas-step-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.atlas-step-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: -0.005em;
}
.atlas-step-hint {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.atlas-step-line {
    height: 1px;
    background: var(--line);
    align-self: center;
    margin: 0 14px;
    min-width: 40px;
    transition: background 200ms;
}
.atlas-step.active .atlas-step-num {
    background: var(--crimson);
    border-color: var(--crimson);
    color: white;
    box-shadow: 0 0 0 4px var(--crimson-soft);
}
.atlas-step.active .atlas-step-title { color: var(--ink); }
.atlas-step.active .atlas-step-hint  { color: var(--crimson); }
.atlas-step.done .atlas-step-num {
    background: var(--bg-2);
    border-color: var(--success);
    color: var(--success);
}
.atlas-step.done .atlas-step-title { color: var(--ink-2); }
.atlas-step.done + .atlas-step-line { background: var(--success); opacity: 0.6; }

/* === Atlas section card (wizard panels) ==================== */
.atlas-panel {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px 28px;
    margin-bottom: 18px;
    transition: opacity 200ms, transform 200ms, border-color 140ms;
}
.atlas-panel[hidden] { display: none; }
.atlas-panel .panel-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.atlas-panel .panel-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.atlas-panel .panel-step-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--crimson);
    padding: 3px 9px;
    background: var(--crimson-soft);
    border-radius: 99px;
    border: 1px solid rgba(224, 0, 48, 0.25);
}

/* === Atlas inline status text (después de un botón) ======== */
.atlas-inline-status { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-2); margin-left: 12px; }
.atlas-inline-status.ok  { color: var(--success); }
.atlas-inline-status.err { color: var(--crimson); }

/* === Switch toggle (catalog active/inactive) =============== */
.atlas-switch {
    position: relative; display: inline-block;
    width: 38px; height: 22px;
}
.atlas-switch input { opacity: 0; width: 0; height: 0; }
.atlas-switch-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: var(--bg-3); border: 1px solid var(--line-bright);
    border-radius: 99px;
    transition: 160ms;
}
.atlas-switch-slider::before {
    content: ""; position: absolute;
    height: 16px; width: 16px; left: 2px; top: 2px;
    background: var(--ink-2); border-radius: 50%;
    transition: 160ms;
}
.atlas-switch input:checked + .atlas-switch-slider { background: var(--crimson); border-color: var(--crimson); }
.atlas-switch input:checked + .atlas-switch-slider::before { transform: translateX(16px); background: white; }

/* === Audit log · celda metadata con ellipsis + tooltip nativo ===
   Antes: `{{ metadata[:140] }}` cortaba el JSON en medio del valor.
   Ahora: ellipsis tipográfico + valor completo en `title=` (hover HTML). */
.atlas-audit-meta {
    max-width: 0;  /* fuerza el ellipsis dentro de la celda flexible */
    overflow: hidden;
}
.atlas-audit-meta-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-2);
    cursor: help;
    font-size: 11.5px;
}
.atlas-audit-meta-text:hover { color: var(--ink); }


/* ============================================================================
   SYNAPSE · sesión 67 — capa visual para Cerebro Vivo
   ----------------------------------------------------------------------------
   Aditivo. Aporta vocabulario visual neural sin caer en AI slop:
   - .synapse-canvas: contenedor del grafo con backdrop "tejido neural" sutil
   - .synapse-legend: leyenda lateral fija que explica cada tipo de nodo
   - .synapse-pulse: anillo pulsante para nodos vivos / actividad reciente
   - .synapse-ring: anillo SVG conic-gradient para "approval rate"
   - .synapse-hero-narrative: bloque grande de venta sobre el grafo
   - .synapse-kpi-stripe: 3 KPIs grandes a la derecha del hero
   - .synapse-stage: marco del grafo con luz interna
   - .synapse-flow: estrellitas/partículas opcionales para edges activas
   No toca Frontier ni Atlas. Reusa --crimson / --rose / --bg-* / --ink-*.
   ============================================================================ */

/* Hero del Cerebro — más grande que frontier-hero estándar, con narrativa */
.synapse-hero {
    position: relative;
    padding: 28px 32px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    overflow: hidden;
    isolation: isolate;
}
.synapse-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 8% 20%,  rgba(224, 0, 48, 0.10) 0%, transparent 45%),
        radial-gradient(circle at 95% 12%, rgba(240, 112, 128, 0.07) 0%, transparent 42%),
        radial-gradient(circle at 70% 90%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
    z-index: -1;
}
:root[data-theme="light"] .synapse-hero::before {
    background:
        radial-gradient(circle at 8% 20%,  rgba(197, 0, 42, 0.05) 0%, transparent 45%),
        radial-gradient(circle at 95% 12%, rgba(216, 90, 107, 0.04) 0%, transparent 42%);
}
.synapse-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--crimson);
    margin-bottom: 14px;
}
.synapse-hero-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
}
.synapse-hero-title {
    font-family: 'Söhne', 'Inter Display', 'Inter', system-ui, sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.022em;
    margin: 0 0 10px 0;
    color: var(--ink);
}
.synapse-hero-title em {
    font-style: normal;
    background: linear-gradient(90deg, var(--crimson), var(--rose, #f07080));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.synapse-hero-narrative {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 56ch;
    margin: 0;
}
.synapse-hero-narrative strong {
    color: var(--ink);
    font-weight: 600;
}
.synapse-hero-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* KPI stripe (3 cifras a la derecha del hero) */
.synapse-kpi-stripe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-left: 28px;
    border-left: 1px solid var(--border);
    align-self: stretch;
    align-items: center;
}
@media (max-width: 920px) {
    .synapse-hero-row { grid-template-columns: 1fr; }
    .synapse-kpi-stripe {
        padding-left: 0; border-left: none;
        border-top: 1px solid var(--border);
        padding-top: 18px; margin-top: 6px;
    }
}
.synapse-kpi {
    display: flex; flex-direction: column; gap: 6px;
}
.synapse-kpi-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-dim, var(--ink-2));
    font-weight: 500;
}
.synapse-kpi-value {
    font-family: 'Söhne Mono', 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
    font-size: 28px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.synapse-kpi-value.alive { color: var(--crimson); }
.synapse-kpi-foot {
    font-size: 11px;
    color: var(--ink-2);
    opacity: .8;
}

/* Panel del extractor — más visual y vivo */
.synapse-extractor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 18px 22px;
    margin: 14px 0;
    border-radius: 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    position: relative;
}
.synapse-extractor::before {
    content: "";
    position: absolute;
    left: 0; top: 18px; bottom: 18px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ink-dim, var(--border));
}
.synapse-extractor.on::before {
    background: linear-gradient(180deg, var(--crimson), var(--rose, #f07080));
    box-shadow: 0 0 12px rgba(224, 0, 48, 0.4);
}
.synapse-extractor-body { min-width: 0; }
.synapse-extractor-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 600;
    margin-bottom: 4px;
}
.synapse-extractor-sub {
    font-size: 12.5px; color: var(--ink-2); margin-bottom: 12px;
    line-height: 1.5;
}
.synapse-extractor-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px;
    margin-top: 4px;
}
.synapse-extractor-meta-item {
    display: flex; flex-direction: column; gap: 3px;
}
.synapse-extractor-meta-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-dim, var(--ink-2)); opacity: .75;
}
.synapse-extractor-meta-value {
    font-size: 13px; font-weight: 500; color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.synapse-extractor-actions {
    display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}

/* Anillo SVG para approval rate (factual aprobados / propuestos) */
.synapse-ring {
    --ring-pct: 0;
    --ring-size: 96px;
    --ring-stroke: 9px;
    width: var(--ring-size); height: var(--ring-size);
    border-radius: 50%;
    background: conic-gradient(
        var(--crimson) 0%,
        var(--crimson) calc(var(--ring-pct) * 1%),
        var(--bg-3, rgba(255,255,255,0.06)) calc(var(--ring-pct) * 1%),
        var(--bg-3, rgba(255,255,255,0.06)) 100%);
    display: grid; place-items: center;
    position: relative;
    flex-shrink: 0;
}
.synapse-ring::before {
    content: "";
    position: absolute; inset: var(--ring-stroke);
    background: var(--bg-2);
    border-radius: 50%;
}
.synapse-ring-inner {
    position: relative; z-index: 1;
    text-align: center;
    line-height: 1;
}
.synapse-ring-inner .pct {
    font-family: 'Söhne Mono', 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 22px; font-weight: 500;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.synapse-ring-inner .label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-2);
    margin-top: 3px;
}

/* Stage del grafo — marco con borde sutil y luz interior */
.synapse-stage {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-1);
    height: calc(100vh - 360px);
    min-height: 480px;
    isolation: isolate;
}
.synapse-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(224, 0, 48, 0.04) 0%, transparent 60%),
        radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.synapse-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 0 0, rgba(255,255,255,0.014) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 0;
}
.synapse-stage > #cy {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Toolbar flotante sobre el stage */
.synapse-toolbar {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 2;
    display: flex; gap: 6px; align-items: center;
    padding: 6px 10px;
    background: rgba(17, 17, 20, 0.78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 11.5px;
}
:root[data-theme="light"] .synapse-toolbar {
    background: rgba(255, 255, 255, 0.85);
}
.synapse-toolbar label {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--ink); cursor: pointer;
    padding: 2px 6px;
}
.synapse-toolbar button {
    background: transparent;
    border: 0;
    color: var(--ink-2);
    font-size: 11.5px;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 999px;
    transition: color .15s, background .15s;
}
.synapse-toolbar button:hover {
    color: var(--ink);
    background: rgba(255,255,255,0.04);
}
:root[data-theme="light"] .synapse-toolbar button:hover {
    background: rgba(0,0,0,0.04);
}

/* Leyenda lateral del grafo */
.synapse-legend {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 2;
    width: 240px;
    padding: 14px 16px;
    background: rgba(17, 17, 20, 0.82);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 12px;
    color: var(--ink);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
:root[data-theme="light"] .synapse-legend {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.synapse-legend-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.synapse-legend-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.synapse-legend-item {
    display: flex; align-items: flex-start; gap: 10px;
    line-height: 1.35;
}
.synapse-legend-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.05);
}
.synapse-legend-dot.tenant       { background: #5a8dee; }
.synapse-legend-dot.agent        { background: #0a7;
                                   box-shadow: 0 0 0 2px rgba(0, 170, 119, 0.25); }
.synapse-legend-dot.scope        { background: #9ca3af; }
.synapse-legend-dot.file         { background: #e5e7eb; }
.synapse-legend-dot.proposal     { background: #f0a000;
                                   box-shadow: 0 0 0 2px rgba(240, 160, 0, 0.3); }
.synapse-legend-dot.source       { background: #a78bfa; }
.synapse-legend-text {
    display: flex; flex-direction: column;
    gap: 2px;
    min-width: 0; flex: 1;
}
.synapse-legend-text .name {
    font-weight: 500;
    color: var(--ink);
}
.synapse-legend-text .desc {
    font-size: 10.5px;
    color: var(--ink-2);
    opacity: .85;
}
.synapse-legend-foot {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 10.5px;
    color: var(--ink-2);
    line-height: 1.5;
    opacity: .85;
}

/* Pulse para indicar "vivo" — usado en eyebrow + hero kpi alive */
@keyframes synapse-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(224, 0, 48, 0.6); }
    50%      { opacity: .85; box-shadow: 0 0 0 6px rgba(224, 0, 48, 0); }
}
.synapse-live-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--crimson);
    animation: synapse-pulse 2.4s ease-in-out infinite;
}

/* Stat run-now button — más prominente */
.synapse-run-btn {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--crimson), var(--rose, #f07080));
    color: white;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(224, 0, 48, 0.25);
    transition: transform .15s, box-shadow .15s;
    display: inline-flex; align-items: center; gap: 8px;
}
.synapse-run-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(224, 0, 48, 0.35);
}
.synapse-run-btn:disabled {
    background: var(--bg-3, var(--bg-2));
    color: var(--ink-2);
    cursor: not-allowed;
    box-shadow: none;
}
.synapse-run-status {
    font-size: 12px;
    color: var(--ink-2);
    margin-top: 8px;
    min-height: 18px;
}

/* Banner "Paquete pendiente" — call to action vivo */
.synapse-pending {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    margin: 14px 0;
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(240, 160, 0, 0.12), rgba(240, 160, 0, 0.04));
    border: 1px solid rgba(240, 160, 0, 0.35);
    color: var(--ink);
}
.synapse-pending-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(240, 160, 0, 0.2);
    color: #f0a000;
    font-size: 18px;
    flex-shrink: 0;
    animation: synapse-pulse 2.4s ease-in-out infinite;
}
.synapse-pending-body { flex: 1; min-width: 0; }
.synapse-pending-title {
    font-weight: 600; font-size: 14px;
    margin-bottom: 2px;
}
.synapse-pending-sub {
    font-size: 12.5px; color: var(--ink-2);
    line-height: 1.45;
}

/* Onboarding · visual del agente "construyéndose"  */
.synapse-onboarding-stage {
    position: relative;
    padding: 36px 24px 24px;
    margin: 14px 0 22px;
    border-radius: 16px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
.synapse-onboarding-stage::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(224, 0, 48, 0.08) 0%, transparent 55%),
        radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.04) 0%, transparent 50%);
    z-index: -1;
}
.synapse-orb {
    --orb-pct: 0;
    width: 140px; height: 140px;
    border-radius: 50%;
    margin: 0 auto 18px;
    position: relative;
    background:
        radial-gradient(circle at 50% 40%, rgba(224, 0, 48, 0.25), transparent 65%),
        conic-gradient(
            from -90deg,
            var(--crimson) 0%,
            var(--crimson) calc(var(--orb-pct) * 1%),
            rgba(255,255,255,0.06) calc(var(--orb-pct) * 1%),
            rgba(255,255,255,0.06) 100%);
    box-shadow: 0 0 60px rgba(224, 0, 48, 0.15) inset;
    transition: --orb-pct .8s ease;
}
.synapse-orb::before {
    content: "";
    position: absolute; inset: 9px;
    border-radius: 50%;
    background: var(--bg-2);
}
.synapse-orb::after {
    content: "";
    position: absolute; inset: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, var(--crimson), transparent 70%);
    opacity: calc(var(--orb-pct) * 0.01);
    transition: opacity .6s ease;
    animation: synapse-pulse 3s ease-in-out infinite;
}
.synapse-orb-pct {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    z-index: 2;
    font-family: 'Söhne Mono', 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 28px; font-weight: 500;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.synapse-onboarding-headline {
    font-family: 'Söhne', 'Inter Display', 'Inter', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 6px 0;
}
.synapse-onboarding-sub {
    font-size: 13.5px;
    color: var(--ink-2);
    max-width: 52ch;
    margin: 0 auto;
    line-height: 1.55;
}

/* Companion · scopes visuales */
.synapse-companion-scopes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 14px 0;
}
.synapse-companion-scope {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
    display: flex; flex-direction: column; gap: 4px;
    position: relative;
}
.synapse-companion-scope:hover {
    border-color: var(--crimson);
    transform: translateY(-1px);
}
.synapse-companion-scope.selected {
    border-color: var(--crimson);
    background: linear-gradient(135deg, rgba(224, 0, 48, 0.08), rgba(224, 0, 48, 0.02));
}
.synapse-companion-scope.selected::before {
    content: "✓";
    position: absolute;
    top: 8px; right: 10px;
    color: var(--crimson);
    font-weight: 700;
    font-size: 14px;
}
.synapse-companion-scope-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-2);
}
.synapse-companion-scope-name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink);
}
.synapse-companion-scope-hint {
    font-size: 11.5px;
    color: var(--ink-2);
    line-height: 1.4;
    margin-top: 2px;
}

/* Companion spinner — el LLM "pensando" sobre el cerebro */
.synapse-thinking {
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    padding: 48px 24px;
    text-align: center;
}
.synapse-thinking-orb {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, var(--crimson), transparent 60%);
    position: relative;
    animation: synapse-thinking-spin 2.4s linear infinite;
}
.synapse-thinking-orb::before,
.synapse-thinking-orb::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1.5px solid rgba(224, 0, 48, 0.3);
    border-top-color: var(--crimson);
    animation: synapse-thinking-spin 1.8s linear infinite reverse;
}
.synapse-thinking-orb::after {
    inset: -18px;
    border-color: rgba(224, 0, 48, 0.15);
    border-top-color: rgba(224, 0, 48, 0.55);
    animation-duration: 2.6s;
}
@keyframes synapse-thinking-spin {
    to { transform: rotate(360deg); }
}
.synapse-thinking-text {
    font-size: 13.5px;
    color: var(--ink-2);
    max-width: 36ch;
    line-height: 1.55;
}
.synapse-thinking-text strong { color: var(--ink); font-weight: 600; }