/* ============================================================
   DESIGN TOKENS — DARK MODE (default)
   ============================================================ */
:root {
    --bg-app: #080b11;
    --bg-sidebar: #0f1320;
    --bg-card: #141824;
    --bg-card-hover: #191f30;
    --border-color: #1b2030;
    --border-hover: #262e45;
    --text-main: #f8fafc;
    --text-muted: #64748b;
    --text-label: #94a3b8;       /* etiqueta de campo */
    --text-section: #cbd5e1;     /* título de sección dentro modal */
    --bg-task-active: rgba(56, 189, 248, 0.1);

    --primary: #38bdf8;
    --primary-light: #7dd3fc;
    --primary-gradient: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    --accent-green: #10b981;
    --accent-red: #ef4444;
    --accent-orange: #fbbf24;
    --accent-blue: #38bdf8;

    /* Form field tokens */
    --field-bg: #0d1117;          /* fondo campo editable */
    --field-bg-readonly: #10151e; /* fondo campo sólo lectura */
    --field-border: #1e2a3a;
    --field-border-focus: #38bdf8;
    --field-text: #f8fafc;
    --field-placeholder: #475569;

    --font-main: 'Inter', sans-serif;
    --font-title: 'Outfit', sans-serif;

    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --border-radius: 10px;
    --radius-sm: 8px;
    --radius-pill: 999px;

    /* Elevation / sombras coherentes con el primary */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-primary: 0 4px 16px rgba(56, 189, 248, 0.25);
}

/* ============================================================
   DESIGN TOKENS — LIGHT MODE
   ============================================================ */
body.light-theme {
    --bg-app: #f0f4f8;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --border-color: #d1d9e0;
    --border-hover: #b0bac5;
    --text-main: #0f172a;        /* Muy oscuro, máximo contraste */
    --text-muted: #475569;
    --text-label: #334155;       /* label un paso más oscuro que muted */
    --text-section: #1e293b;     /* título sección: casi negro */
    --bg-task-active: rgba(153, 0, 0, 0.08);

    --primary: #990000;
    --primary-light: #b91c1c;
    --primary-gradient: linear-gradient(135deg, #990000 0%, #7f0000 100%);
    --accent-green: #059669;
    --accent-red: #dc2626;
    --accent-orange: #d97706;
    --accent-blue: #2563eb;

    /* Form field tokens — light */
    --field-bg: #f8fafc;          /* blanco suave */
    --field-bg-readonly: #eef2f7; /* gris muy claro para readonly */
    --field-border: #c8d3dd;
    --field-border-focus: #990000;
    --field-text: #0f172a;
    --field-placeholder: #94a3b8;
}

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

body {
    background-color: var(--bg-app);
    color: var(--text-main);
    font-family: var(--font-main);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.006em;
}

button, input, textarea {
    font-family: inherit;
    color: inherit;
}

/* ==========================================
   LAYOUT STRUCTURE
   ========================================== */
.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
}

.sidebar {
    width: 240px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 0;
    flex-shrink: 0;
}

.main-content {
    flex-grow: 1;
    height: 100%;
    overflow-y: auto;
    background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.05), transparent 60%);
    position: relative;
    container-type: inline-size;
}

/* Monitoring KPIs use the available workspace width, not the viewport. */
.monitoring-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}

.monitoring-user-link,
.drill-down-link {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--accent-blue);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    padding: 2px 3px;
    border-radius: 4px;
}

.drill-down-link { margin-left: 6px; }
.monitoring-user-link:hover,
.drill-down-link:hover { color: var(--accent-red); }
.monitoring-user-link:focus-visible,
.drill-down-link:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

#tab-dashboard .content-header .period-filter--dashboard{justify-content:flex-start;margin:13px 0 0}

.period-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 16px 16px}.period-filter--dashboard{justify-content:flex-end;margin-bottom:10px}.period-filter-label{margin-right:auto;color:var(--text-muted);font-size:10px;font-weight:800;text-transform:uppercase}.period-quick-actions{display:flex;align-items:center;gap:6px;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--bg-card) 80%,transparent)}.period-quick-actions button{min-width:46px;height:32px;padding:0 12px;border:1px solid var(--border-color);border-radius:999px;background:var(--bg-card);color:var(--text-main);font-size:11px;font-weight:700;cursor:pointer}.period-quick-actions button:hover,.period-quick-actions button:focus-visible{border-color:var(--accent-blue);outline:0}.period-quick-actions button.active{border-color:rgba(16,185,129,.28);background:rgba(16,185,129,.09);color:#059669}.period-quick-actions .period-calendar-btn{min-width:42px;padding:0}.period-custom-fields{display:flex;align-items:flex-end;gap:6px}.period-custom-fields label{display:grid;gap:3px;color:var(--text-muted);font-size:8px;font-weight:800;text-transform:uppercase}.period-custom-fields input{height:32px;padding:0 7px;border:1px solid var(--border-color);border-radius:7px;background:var(--bg-card);color:var(--text-main);font-size:10px}.period-custom-fields button{height:32px;padding:0 11px;border:0;border-radius:7px;background:var(--accent-blue);color:#fff;font-size:10px;font-weight:800;cursor:pointer}@media(max-width:650px){.period-filter,.period-filter--dashboard{justify-content:flex-start;margin-right:8px;margin-left:8px}.period-filter-label{flex-basis:100%}.period-quick-actions{width:100%;overflow-x:auto}.period-custom-fields{width:100%;flex-wrap:wrap}}

@container (max-width: 680px) {
    .profile-theme-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        justify-content: flex-end;
        padding: 16px 16px 4px;
        z-index: 10 !important;
    }
    .user-profile-badge {
        min-width: 0;
        max-width: calc(100% - 52px);
    }
    #user-display-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .monitoring-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   SIDEBAR COMPONENT
   ========================================== */
.logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.logo-icon {
    font-size: 20px;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-area h2 {
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
}

.logo-area span {
    color: var(--primary-light);
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 16px;
}

.nav-menu::-webkit-scrollbar {
    display: none;
}

.sidebar-section-header {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin: 8px 0 6px 8px;
    opacity: 0.7;
}

.nav-item {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: var(--border-radius);
    cursor: pointer;
    text-align: left;
    transition: var(--transition-smooth);
    width: 100%;
}

.nav-item i {
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.nav-item:hover {
    color: var(--text-main);
    background-color: rgba(255, 255, 255, 0.02);
}

.nav-item.active {
    color: var(--text-main);
    background: var(--primary-gradient);
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.15);
}

.sidebar-footer {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--text-muted);
}

/* ==========================================
   TAB VIEWS CONFIGURATION
   ========================================== */
.tab-content {
    display: none;
    height: 100%;
}

.tab-content.active {
    display: block;
}

/* ==========================================
   COMMON HEADER COMPONENT
   ========================================== */
.content-header {
    padding: 24px 24px 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.content-header h1 {
    font-family: var(--font-title);
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.subtitle {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

/* Stats Bar */
.stats-bar {
    display: flex;
    gap: 16px;
}

.stat-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 12px 20px;
    min-width: 110px;
    text-align: center;
}

.stat-num {
    display: block;
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-title);
    color: var(--primary-light);
}

.stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ==========================================
   DASHBOARD / LEADS TAB
   ========================================== */
.dashboard-controls {
    padding: 0 40px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.search-box {
    position: relative;
    flex-grow: 1;
    max-width: 480px;
}

.search-box i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-box input {
    width: 100%;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 40px;
    padding: 12px 16px 12px 48px;
    font-size: 14px;
    outline: none;
    transition: var(--transition-smooth);
}

.search-box input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.15);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 16px;
    background: none;
    border: none;
    padding: 0;
}

.filter-btn, .assign-filter-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.filter-btn .radio-indicator, .assign-filter-btn .radio-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.filter-btn .radio-indicator span, .assign-filter-btn .radio-indicator span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: transparent;
    display: inline-block;
    transition: all 0.2s ease;
}

.filter-btn .filter-text, .assign-filter-btn .filter-text {
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.filter-btn:hover .filter-text, .assign-filter-btn:hover .filter-text {
    color: var(--text-main);
}

.filter-btn.active .radio-indicator, .assign-filter-btn.active .radio-indicator {
    border-color: var(--accent-blue);
    background-color: var(--accent-blue);
}

.filter-btn.active .radio-indicator span, .assign-filter-btn.active .radio-indicator span {
    background-color: #ffffff;
}

.filter-btn.active .filter-text, .assign-filter-btn.active .filter-text {
    color: var(--text-main);
    font-weight: 700;
}

/* Leads Grid */
.leads-grid {
    padding: 0 16px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

@media (min-width: 1200px) {
    .leads-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.loading-state, .empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px;
    color: var(--text-muted);
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.loading-state i, .empty-state i {
    font-size: 40px;
    color: var(--primary);
}

/* Lead Card */
.lead-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    transition: var(--transition-smooth);
}

.lead-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.lead-card .lead-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
}

.lead-card .lead-badge.activo {
    background-color: rgba(0, 207, 149, 0.15);
    color: var(--accent-green);
}

.lead-card .lead-badge.archivado {
    background-color: rgba(255, 159, 26, 0.15);
    color: var(--accent-orange);
}

.lead-card-header h3 {
    font-family: var(--font-title);
    font-size: 12px;
    font-weight: 700;
    padding-right: 50px;
    line-height: 1.3;
    color: var(--text-main);
    margin: 0;
}

.lead-card-header .stars {
    color: var(--accent-orange);
    font-size: 11px;
    margin-top: 2px;
}

.lead-card-header .stars span {
    color: var(--text-muted);
    font-size: 10px;
    margin-left: 3px;
}

.lead-info-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    flex-grow: 1;
}
    color: var(--text-muted);
    flex-grow: 1;
}

.lead-info-item {
    display: flex;
    gap: 10px;
    line-height: 1.4;
}

.lead-info-item i {
    margin-top: 2px;
    width: 14px;
    text-align: center;
    color: var(--primary-light);
}

.lead-social-links {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.social-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.social-badge:hover {
    color: var(--text-main);
    background-color: var(--border-color);
}

.social-badge.fb:hover {
    color: #1877f2;
}

.social-badge.ig:hover {
    color: #e1306c;
}

.lead-actions {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}

/* Button Styles */
.primary-btn, .secondary-btn, .action-btn {
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: -0.01em;
    transition: var(--transition-smooth);
}

.primary-btn {
    background: var(--primary-gradient);
    color: #fff;
    padding: 9px 16px;
}

.primary-btn:hover {
    box-shadow: var(--shadow-primary);
    transform: translateY(-1px);
}

.secondary-btn {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 9px 16px;
}

.secondary-btn:hover {
    background-color: var(--bg-card-hover);
    border-color: var(--border-hover);
}

/* Botón de icono reutilizable (reemplaza botones de texto por iconos) */
.icon-btn {
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.icon-btn:hover {
    color: var(--text-main);
    border-color: var(--border-hover);
    background-color: var(--bg-card-hover);
}

.icon-btn.danger:hover {
    color: var(--accent-red);
    border-color: rgba(239, 68, 68, 0.4);
    background-color: rgba(239, 68, 68, 0.06);
}

.icon-btn.primary:hover {
    color: var(--primary);
    border-color: rgba(56, 189, 248, 0.4);
    background-color: rgba(56, 189, 248, 0.06);
}

.secondary-btn:disabled, .primary-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.action-btn {
    padding: 10px 14px;
}

.action-btn.design {
    flex-grow: 2;
    background: var(--primary-gradient);
    color: #fff;
}

.action-btn.design:hover {
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.35);
}

.action-btn.design.edit-btn {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid var(--primary-light);
    color: var(--primary-light);
}

.action-btn.design.edit-btn:hover {
    background: var(--primary);
    color: #fff;
}

.action-btn.archive {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.action-btn.archive:hover {
    color: var(--accent-orange);
    border-color: var(--accent-orange);
    background-color: rgba(255, 159, 26, 0.05);
}

/* ==========================================
   AI BUILDER TAB & SPLIT LAYOUT
   ========================================== */
#tab-builder {
    height: 100vh;
    overflow: hidden;
}

.builder-layout {
    display: flex;
    height: 100%;
    /* Deja espacio para el badge flotante de usuario/tema (.profile-theme-wrapper,
       position:absolute top:30px) que de otro modo tapa los botones Código/Abrir/Publicar. */
    padding-top: 72px;
}

/* Left Panel: Chat and Controls */
.builder-controls-panel {
    width: 440px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.builder-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.back-to-dash-btn {
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-smooth);
}

.back-to-dash-btn:hover {
    color: var(--text-main);
}

.builder-header h2 {
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.builder-header .lead-badge {
    position: static;
    display: inline-block;
    align-self: flex-start;
}

/* Chat container and Messages */
.chat-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 0; /* Important flex fix */
    position: relative;
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.message {
    display: flex;
    flex-direction: column;
    max-width: 85%;
}

.message.system {
    align-self: center;
    max-width: 90%;
}

.message.user {
    align-self: flex-end;
}

.message.ai {
    align-self: flex-start;
}

.message-content {
    padding: 12px 16px;
    border-radius: var(--border-radius);
    font-size: 14px;
    line-height: 1.5;
}

.message.system .message-content {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.message.user .message-content {
    background: var(--primary-gradient);
    color: #fff;
    border-bottom-right-radius: 2px;
}

.message.ai .message-content {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-bottom-left-radius: 2px;
}

.message.ai.loading-dots .message-content {
    background-color: transparent;
    border: none;
    color: var(--text-muted);
}

.chat-input-area {
    padding: 16px 24px 24px;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-sidebar);
    display: flex;
    gap: 12px;
    align-items: center;
}

.chat-input-area textarea {
    flex-grow: 1;
    background-color: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    font-size: 13px;
    outline: none;
    resize: none;
    height: 48px;
    max-height: 120px;
    transition: var(--transition-smooth);
}

.chat-input-area textarea:focus {
    border-color: var(--primary);
}

.chat-input-area textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.send-message-btn {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius);
    background: var(--primary-gradient);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: var(--transition-smooth);
    flex-shrink: 0;
}

.send-message-btn:hover {
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.4);
}

.send-message-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* Initial Generator CTA Panel overlay */
.initial-generator-cta {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    gap: 20px;
    z-index: 10;
}

.code-magic-icon {
    font-size: 60px;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.initial-generator-cta h3 {
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 700;
}

.initial-generator-cta p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    max-width: 320px;
}

.initial-generator-cta.hidden {
    display: none;
}

/* Right Panel: Live Preview Panel */
.builder-preview-panel {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-app);
}

.preview-header {
    height: 64px;
    border-bottom: 1px solid var(--border-color);
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.preview-actions-left {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.preview-actions-left .indicator i {
    color: var(--accent-green);
    margin-right: 6px;
    font-size: 8px;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { opacity: 0.4; }
    50% { opacity: 1; }
    100% { opacity: 0.4; }
}

.preview-actions-right {
    display: flex;
    gap: 8px;
}

.preview-action-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-smooth);
}

.preview-action-btn:hover:not(:disabled) {
    color: var(--text-main);
    border-color: var(--border-hover);
    background-color: rgba(255, 255, 255, 0.02);
}

.preview-action-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.iframe-container {
    flex-grow: 1;
    position: relative;
}

#preview-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #ffffff;
}

#preview-iframe.hidden {
    display: none;
}

.preview-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.preview-placeholder i {
    font-size: 60px;
    color: var(--border-hover);
}

/* ==========================================
   SETTINGS TAB
   ========================================== */
.settings-card {
    padding: 0 40px 40px;
    max-width: 680px;
}

.settings-section {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-section h2 {
    font-family: var(--font-title);
    font-size: 22px;
    font-weight: 700;
}

.settings-desc {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.api-key-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.api-key-input-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon i {
    position: absolute;
    left: 16px;
    color: var(--text-muted);
}

.input-with-icon input {
    width: 100%;
    background-color: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 12px 48px 12px 48px;
    font-size: 14px;
    outline: none;
    letter-spacing: 0.5px;
    transition: var(--transition-smooth);
}

.input-with-icon input:focus {
    border-color: var(--primary);
}

.toggle-password {
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
}

.api-status-badge {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.api-status-badge.configured {
    background-color: rgba(0, 207, 149, 0.15);
    color: var(--accent-green);
}

.api-status-badge.unconfigured {
    background-color: rgba(255, 74, 90, 0.15);
    color: var(--accent-red);
}

/* ==========================================
   CODE EDITOR MODAL COMPONENT
   ========================================== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 1;
    transition: var(--transition-smooth);
}

.modal.hidden {
    display: none;
}

.modal-content {
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;       /* nunca más alto que el viewport */
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;       /* recorta las esquinas redondeadas */
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-header h2 {
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
}

.close-modal-btn {
    background: none;
    border: none;
    font-size: 26px;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    transition: var(--transition-smooth);
}

.close-modal-btn:hover {
    color: var(--text-main);
}

.modal-body {
    flex-grow: 1;
    padding: 0;
    overflow-y: auto;       /* scroll dentro del modal, no en la página */
    overflow-x: hidden;
}

/* Scrollbar fino dentro modales */
.modal-body::-webkit-scrollbar { width: 5px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px; }

.modal-body textarea {
    width: 100%;
    height: 100%;
    background-color: #1e1e2e;
    color: #cdd6f4;
    border: none;
    padding: 24px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    resize: none;
    overflow-y: auto;
}

/* Editor de codigo dividido: previsualizacion en vivo arriba, codigo abajo */
.code-modal-content {
    width: 95vw;
    max-width: 1400px;
    height: 90vh;
    max-height: 90vh;
}

.code-modal-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
}

.code-modal-preview-pane,
.code-modal-editor-pane {
    flex: 1 1 50%;
    min-height: 0; /* permite que el iframe/textarea se achiquen dentro del flex */
    display: flex;
    flex-direction: column;
}

.code-modal-preview-pane {
    border-bottom: 2px solid var(--border-color);
}

.code-modal-pane-label {
    flex-shrink: 0;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    background-color: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 6px;
}

.code-modal-preview-pane .code-modal-pane-label i { color: var(--accent-green); }
.code-modal-editor-pane .code-modal-pane-label i { color: var(--primary); }

#code-editor-preview-iframe {
    flex-grow: 1;
    width: 100%;
    border: none;
    background-color: #fff;
}

.code-modal-editor-pane textarea {
    flex-grow: 1;
}

@media (max-width: 900px) {
    .code-modal-content {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

/* ==========================================
   MULTI-PROVIDER SETTINGS INPUT STYLES
   ========================================== */
.settings-select {
    width: 100%;
    background-color: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-main);
    outline: none;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.settings-select:focus {
    border-color: var(--primary);
}

.setting-row {
    display: flex;
    flex-direction: column;
    gap: 5px;  /* compact */
}

.setting-row label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Universal editable field */
.setting-row input,
.setting-row select,
.setting-row textarea {
    background-color: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--border-radius);
    padding: 8px 11px;
    font-size: 13px;
    color: var(--field-text);
    outline: none;
    transition: var(--transition-smooth);
    width: 100%;
}

.setting-row input:focus,
.setting-row select:focus,
.setting-row textarea:focus {
    border-color: var(--field-border-focus);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--field-border-focus) 15%, transparent);
}

/* Read-only / disabled field — visually distinct */
.setting-row input[disabled],
.setting-row input[readonly],
.setting-row textarea[disabled] {
    background-color: var(--field-bg-readonly);
    border-left: 3px solid var(--border-hover);
    color: var(--text-muted);
    cursor: default;
    opacity: 1; /* override browser dim */
}

.provider-panel {
    border-top: 1px solid var(--border-color);
    padding-top: 24px;
    margin-top: 12px;
}

.hidden {
    display: none !important;
}

/* ============================================================
   LIGHT MODE — COMPREHENSIVE OVERRIDE
   ============================================================ */
body.light-theme {
    background-color: var(--bg-app);
    color: var(--text-main);
}

/* ── Headings & Section Titles ───────────────────────────── */
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4 {
    color: var(--text-main) !important;
}
body.light-theme .content-header h1 {
    color: var(--text-main) !important;
}
body.light-theme .subtitle {
    color: var(--text-muted) !important;
}
/* modal section subheadings */
body.light-theme [style*="color: var(--text-muted)"] {
    color: var(--text-label) !important;
}

/* ── Sidebar & Nav ───────────────────────────────────────── */
body.light-theme .main-content {
    background: radial-gradient(circle at top right, rgba(153,0,0,0.04), transparent 60%) !important;
}
body.light-theme .sidebar {
    background-color: var(--bg-sidebar);
    border-right-color: var(--border-color);
}
body.light-theme .nav-item {
    color: var(--text-muted);
}
body.light-theme .nav-item:hover {
    background-color: rgba(0,0,0,0.04);
    color: var(--text-main);
}
body.light-theme .nav-item.active {
    background: var(--primary-gradient);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(153,0,0,0.25);
}
body.light-theme .sidebar-footer {
    border-top-color: var(--border-color);
    color: var(--text-muted);
}
body.light-theme .sidebar-section-header {
    color: var(--text-muted);
}

/* ── Cards ──────────────────────────────────────────────── */
body.light-theme .lead-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
body.light-theme .lead-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    border-color: var(--border-hover);
}
body.light-theme .stat-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}
body.light-theme .stat-num {
    color: var(--primary);
}

/* ── Form Fields (global) ────────────────────────────────── */
body.light-theme input,
body.light-theme textarea {
    background-color: var(--field-bg) !important;
    color: var(--field-text) !important;
    border-color: var(--field-border) !important;
}
body.light-theme input::placeholder,
body.light-theme textarea::placeholder {
    color: var(--field-placeholder) !important;
}
body.light-theme input:focus,
body.light-theme textarea:focus {
    border-color: var(--field-border-focus) !important;
    box-shadow: 0 0 0 2px rgba(153,0,0,0.12) !important;
}
body.light-theme input[disabled],
body.light-theme input[readonly],
body.light-theme textarea[disabled] {
    background-color: var(--field-bg-readonly) !important;
    color: var(--text-muted) !important;
    border-left-color: var(--border-hover) !important;
}
body.light-theme select {
    background-color: var(--field-bg) !important;
    color: var(--field-text) !important;
    border-color: var(--field-border) !important;
}
body.light-theme select option {
    background-color: var(--bg-card) !important;
    color: var(--field-text) !important;
}
body.light-theme select:focus {
    border-color: var(--field-border-focus) !important;
}
body.light-theme label {
    color: var(--text-label) !important;
}
body.light-theme .setting-row label {
    color: var(--text-label) !important;
}

/* ── Modals ──────────────────────────────────────────────── */
body.light-theme .modal {
    background-color: rgba(15,23,42,0.5);
}
body.light-theme .modal-content {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
}
body.light-theme .modal-header {
    border-bottom-color: var(--border-color) !important;
}
body.light-theme .modal-header h2 {
    color: var(--text-main) !important;
}
body.light-theme .modal-footer {
    border-top-color: var(--border-color) !important;
}
body.light-theme .close-modal-btn {
    color: var(--text-muted) !important;
}
body.light-theme .close-modal-btn:hover {
    color: var(--text-main) !important;
}

/* ── CRM Modal sections ──────────────────────────────────── */
body.light-theme .crm-detail-section {
    background-color: var(--bg-app) !important;
    border-color: var(--border-color) !important;
}
body.light-theme .bitacora-item {
    border-bottom-color: var(--border-color) !important;
}

/* ── Buttons ─────────────────────────────────────────────── */
body.light-theme .secondary-btn {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-main);
}
body.light-theme .secondary-btn:hover {
    background-color: rgba(0,0,0,0.05);
}

/* ── Tables ──────────────────────────────────────────────── */
body.light-theme table th {
    color: var(--text-label) !important;
    background-color: var(--bg-app) !important;
}
body.light-theme table td {
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}
body.light-theme tr:hover td {
    background-color: var(--bg-card-hover) !important;
}

/* ── Tailwind overrides (Kanban / seller view) ───────────── */
body.light-theme .bg-\[\#1e293b\] {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
body.light-theme .border-gray-700 { border-color: var(--border-color) !important; }
body.light-theme .border-gray-600 { border-color: var(--border-color) !important; }
body.light-theme .text-white      { color: var(--text-main) !important; }
body.light-theme .text-gray-100   { color: var(--text-main) !important; }
body.light-theme .text-gray-300   { color: var(--text-main) !important; }
body.light-theme .text-gray-400   { color: var(--text-muted) !important; }
body.light-theme .text-gray-500   { color: var(--text-muted) !important; }
body.light-theme .bg-\[\#0f172a\] { background-color: var(--bg-app) !important; }
body.light-theme .bg-\[\#0b0f19\] { background-color: var(--bg-app) !important; }
body.light-theme .bg-slate-900    { background-color: var(--bg-app) !important; }
body.light-theme .bg-gray-800     { background-color: var(--bg-app) !important; }
body.light-theme .bg-gray-700     { background-color: var(--bg-card-hover) !important; }
body.light-theme .hover\:bg-gray-700:hover { background-color: var(--bg-card-hover) !important; }
body.light-theme .divide-gray-700 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color) !important; }
body.light-theme .divide-y { border-color: var(--border-color) !important; }

/* Kanban status chips */
body.light-theme .bg-yellow-900\/30 { background-color: rgba(251,191,36,0.18)  !important; color: #92400e !important; }
body.light-theme .text-yellow-300   { color: #92400e !important; }
body.light-theme .bg-green-900\/30  { background-color: rgba(52,211,153,0.18)  !important; color: #065f46 !important; }
body.light-theme .text-green-300    { color: #065f46 !important; }
body.light-theme .bg-blue-900\/30   { background-color: rgba(96,165,250,0.18)  !important; color: #1e40af !important; }
body.light-theme .text-blue-300     { color: #1e40af !important; }
body.light-theme .text-yellow-500\/90 { color: #b45309 !important; }
body.light-theme .bg-gray-700.text-gray-300 { background-color: rgba(0,0,0,0.08) !important; color: #334155 !important; }

/* ── Seller Kanban columns ───────────────────────────────── */
.kanban-column {
    background-color: rgba(17, 24, 39, 0.4);
    border: 1px solid var(--border-color);
    transition: var(--transition-smooth);
}
body.light-theme .kanban-column {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme [id^="seller-kanban-"] {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Kanban column header text contrast in light theme */
body.light-theme .text-blue-400 {
    color: var(--accent-blue) !important;
}
body.light-theme .text-green-400 {
    color: var(--accent-green) !important;
}
body.light-theme .text-yellow-500 {
    color: var(--accent-orange) !important;
}

/* ── Tasks Tab Row Styling ──────────────────────────────── */
.task-item-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 7px 8px 7px 11px;
    border-bottom: 1px solid var(--border-color);
    gap: 7px;
    cursor: pointer;
    background-color: var(--bg-card);
    transition: background-color 0.2s;
    border-left: 4px solid #10b981;
}
.task-item-row.task-urgency--overdue{border-left-color:#ef4444}.task-item-row.task-urgency--soon{border-left-color:#eab308}.task-item-row.task-urgency--undated{border-left-color:#94a3b8}.task-item-row.task-urgency--completed{border-left-color:#8b5cf6}.task-item-row.task-urgency--future{border-left-color:#10b981}
.task-item-row:hover {
    background-color: var(--bg-card-hover) !important;
}
.task-item-row.selected {
    background-color: var(--bg-task-active) !important;
}

.task-card-title {
    color: var(--text-main);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-compact-main{display:grid;grid-template-columns:14px minmax(120px,1.5fr) minmax(90px,.8fr) auto auto;align-items:center;gap:7px;min-width:0}.task-type-icon{color:var(--text-muted);font-size:9px;text-align:center}.task-compact-lead{overflow:hidden;color:var(--text-muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}.task-compact-actions{display:flex;align-items:center;gap:3px}.task-icon-action,.task-icon-state{display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-app);color:var(--text-muted);font-size:10px;text-decoration:none;cursor:pointer}.task-icon-action:hover,.task-icon-action:focus-visible{border-color:var(--accent-blue);color:var(--accent-blue);outline:0;box-shadow:0 0 0 2px rgba(56,189,248,.12)}.task-icon-action--whatsapp{color:#16a34a}.task-icon-action--danger{color:#ef4444}.task-icon-action--complete{border-color:rgba(16,185,129,.28);background:rgba(16,185,129,.1);color:#059669}.task-icon-state{border-color:rgba(139,92,246,.25);color:#8b5cf6;cursor:default}

.task-card-context,
.task-meta-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.task-card-context strong {
    color: var(--text-main);
    font-size: 10px;
}

.task-owner-badge,
.task-status-badge,
.task-priority-meta,
.task-date-meta {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 9px;
    font-weight: 700;
    gap: 4px;
    line-height: 1;
    padding: 4px 7px;
    white-space: nowrap;
}

.task-owner-badge {
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.22);
    color: var(--accent-blue);
}

.task-status-badge.task-status--pending {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.task-status-badge.task-status--completed {
    background: rgba(139, 92, 246, 0.13);
    color: #7c3aed;
}

.task-status-badge.task-status--overdue {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}
.task-status-badge.task-status--undated{background:rgba(148,163,184,.13);color:#64748b}

.task-date-meta {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    padding: 0;
}

.task-priority-meta {
    background: transparent;
    border: 0;
    padding: 0;
}

@container (max-width: 760px){.task-compact-main{grid-template-columns:14px minmax(110px,1fr) auto auto}.task-compact-lead{display:none}}

@media (max-width: 768px) {
    .task-item-row{grid-template-columns:minmax(0,1fr) auto;padding:8px 7px 8px 9px}.task-compact-main{display:flex;flex-wrap:wrap;gap:5px}.task-card-title{flex:1 1 calc(100% - 22px)}.task-compact-lead{display:block;flex:1 1 100%}.task-date-meta,.task-priority-meta{font-size:8px}.task-icon-action,.task-icon-state{width:30px;height:30px}
    .task-card-title {
        white-space: normal;
    }

    .task-meta-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ===========================================================================
   MOBILE RESPONSIVENESS AND HAMBURGER MENU
   ========================================================================== */
@media (max-width: 768px) {
    /* app-container height adjustment */
    .app-container {
        flex-direction: column;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }

    /* Fixed floating sidebar on mobile */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 8000;
        width: 260px;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.25);
    }
    
    /* Active slide-in sidebar */
    .sidebar.active {
        transform: translateX(0);
    }

    /* Mobile Header Bar block display */
    #mobile-header {
        display: flex !important;
    }

    /* Hide absolute desktop profile bar on mobile */
    .profile-theme-wrapper {
        display: none !important;
    }

    /* Adjust main content for mobile header */
    .main-content {
        flex-grow: 1;
        height: calc(100vh - 50px);
        overflow-y: auto;
    }

    /* Collapse headers and padding on mobile */
    .content-header {
        padding: 16px !important;
        margin-bottom: 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .content-header h1 {
        font-size: 18px !important;
    }

    /* Stats bar (Panel de Leads): cae debajo del texto, no al lado, y no se corta */
    .stats-bar {
        margin-top: 12px !important;
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .stat-card {
        flex: 1 1 calc(33.333% - 11px) !important;
        min-width: 0 !important;
        padding: 10px 8px !important;
    }

    /* Form and search grids layout */
    .extractor-card {
        padding: 16px !important;
        margin: 12px !important;
        max-width: calc(100% - 24px) !important;
    }

    .extractor-card > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* General multi-column grid collapses */
    .dashboard-grid, 
    .grid-3col, 
    .grid-2col,
    .sbs-layout-grid,
    .builder-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 12px !important;
    }

    /* Horizontal scroll for Kanban columns */
    .kanban-board {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 14px !important;
        padding: 12px !important;
        height: auto !important;
        min-height: calc(100vh - 180px);
    }

    .kanban-column {
        flex-shrink: 0 !important;
        width: 290px !important;
        max-height: calc(100vh - 200px) !important;
        overflow-y: auto !important;
    }

    /* Responsive modal adjustments */
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto !important;
        padding: 16px !important;
        max-height: 94vh !important;
    }

    .modal-body {
        padding: 10px 4px !important;
        max-height: 70vh !important;
    }
}
/* Historial por prospecto: una línea de tiempo operativa, no una tabla de auditoría. */
.history-shell,.history-detail{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;overflow:hidden}.history-list-head,.history-lead-row{display:grid;grid-template-columns:minmax(220px,1.25fr) minmax(140px,.75fr) minmax(280px,1.5fr) 80px;gap:18px;align-items:center}.history-list-head{padding:12px 18px;background:var(--bg-app);color:var(--text-muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}.history-lead-row{width:100%;padding:15px 18px;border:0;border-bottom:1px solid var(--border-color);background:transparent;color:var(--text-main);text-align:left;cursor:pointer;transition:background .18s ease,transform .18s ease}.history-lead-row:hover,.history-lead-row:focus-visible{background:rgba(239,68,68,.045);outline:none}.history-lead-row strong,.history-lead-row b{display:block;font-size:12px}.history-lead-row small{display:block;margin-top:3px;color:var(--text-muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-row-count{justify-self:end;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(239,68,68,.1);color:#ef4444;font-weight:800}.history-detail{padding:22px}.history-back{border:0;background:transparent;color:var(--text-muted);cursor:pointer;font-size:12px;font-weight:700;padding:0 0 16px}.history-back:hover{color:#ef4444}.history-detail-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--border-color)}.history-detail-header h2{margin:3px 0;font-size:24px}.history-detail-header p{margin:0;color:var(--text-muted);font-size:12px}.history-count{padding:7px 10px;border:1px solid rgba(239,68,68,.25);border-radius:99px;color:#ef4444;font-size:11px;font-weight:800}.history-activity-list{position:relative;display:grid;gap:10px;padding:18px 0}.history-activity-card{display:grid;grid-template-columns:36px 1fr;gap:12px}.history-rail-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(59,130,246,.1);color:var(--accent-blue);position:relative}.history-activity-card.is-task .history-rail-icon{background:rgba(239,68,68,.1);color:#ef4444}.history-activity-content{padding:12px 14px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-app);min-width:0}.history-activity-top,.history-activity-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.history-activity-top{justify-content:space-between}.history-action-label{font-size:10px;font-weight:800;text-transform:uppercase;color:var(--text-main)}.history-activity-top time,.history-activity-meta{font-size:10px;color:var(--text-muted)}.history-message-preview{margin:8px 0;font-size:12px;line-height:1.45;color:var(--text-main);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.history-activity-meta button{margin-left:auto;border:0;background:transparent;color:#ef4444;font-weight:800;cursor:pointer}.history-pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding-top:14px;border-top:1px solid var(--border-color)}.history-pagination button{min-width:32px;height:32px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-app);color:var(--text-main);cursor:pointer}.history-pagination button.active{background:#a80000;border-color:#a80000;color:#fff}.history-pagination button:disabled{opacity:.35;cursor:not-allowed}.history-page-summary{margin-left:8px;color:var(--text-muted);font-size:10px}.history-message-dialog{max-width:680px;width:92%}.history-message-body{display:grid;gap:14px}.history-message-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.history-message-facts span{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--border-color);border-radius:9px;background:var(--bg-app)}.history-message-facts small,.history-full-message>span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted)}.history-message-facts strong{font-size:12px}.history-full-message{padding:16px;border-left:3px solid #ef4444;border-radius:4px 10px 10px 4px;background:var(--bg-app)}.history-full-message p{margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.65;color:var(--text-main)}
@media(max-width:760px){.history-list-head{display:none}.history-lead-row{grid-template-columns:1fr auto;gap:8px}.history-lead-row>span:nth-child(2),.history-lead-row>span:nth-child(3){grid-column:1}.history-row-count{grid-column:2;grid-row:1}.history-detail{padding:15px}.history-detail-header{align-items:flex-start}.history-message-facts{grid-template-columns:1fr}.history-activity-meta button{width:100%;text-align:left;margin-left:0;padding:4px 0}}

/* Catálogo comercial: identidad sobria de ficha de costos, integrada al CRM. */
.commercial-settings-strip{display:flex;align-items:center;gap:16px;margin-bottom:18px;padding:14px 18px;background:var(--bg-card);border:1px solid var(--border-color);border-left:3px solid #ef4444;border-radius:10px}.commercial-settings-strip>div{display:grid;flex:1}.commercial-settings-strip small{color:var(--text-muted)}.commercial-settings-strip label{display:flex;align-items:center;gap:6px;font-weight:800}.commercial-settings-strip input{width:80px;padding:8px;border:1px solid var(--border-color);border-radius:7px;background:var(--bg-app);color:var(--text-main)}
.commercial-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.commercial-admin-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:14px;padding:22px;box-shadow:0 8px 24px rgba(15,23,42,.08)}.commercial-admin-heading,.crm-commercial-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.commercial-admin-heading h2,.crm-commercial-head h3{margin:2px 0 0;font-size:18px}.commercial-kicker{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;color:#ef4444}.commercial-list{display:flex;flex-direction:column;gap:8px}.commercial-list-item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-app)}.commercial-list-item strong{display:block;font-size:13px}.commercial-list-item small{color:var(--text-muted)}.commercial-editor{display:flex;flex-direction:column;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border-color)}.commercial-editor label{font-size:11px;font-weight:700;color:var(--text-muted)}.commercial-editor input,.commercial-editor textarea{display:block;width:100%;margin-top:5px;padding:9px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-app);color:var(--text-main);font:inherit}.commercial-fields-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.commercial-check{display:flex!important;align-items:center;gap:8px}.commercial-check input{width:auto!important;margin:0!important}.commercial-editor-actions{display:flex;justify-content:flex-end;gap:8px}.commercial-product-checks{display:grid;gap:7px;margin-top:8px}.commercial-product-checks label{display:flex;gap:8px;align-items:center}.commercial-product-checks input{width:auto;margin:0}.crm-commercial-panel{border:1px solid rgba(239,68,68,.22);border-radius:12px;padding:16px;background:linear-gradient(135deg,rgba(239,68,68,.045),transparent 58%)}.crm-tax-badge{font-size:10px;font-weight:800;color:#ef4444;border:1px solid rgba(239,68,68,.28);padding:5px 8px;border-radius:999px}.crm-commercial-products{display:grid;gap:8px}.crm-product-row{display:grid;grid-template-columns:auto 1fr 78px 90px;gap:10px;align-items:center;padding:10px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:9px}.crm-product-row strong{font-size:12px}.crm-product-row small{display:block;color:var(--text-muted);margin-top:2px}.crm-product-row input[type=number]{width:70px;padding:6px;border:1px solid var(--border-color);border-radius:7px;background:var(--bg-app);color:var(--text-main)}.crm-product-price{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}.crm-commercial-summary{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;align-items:end;margin-top:14px;padding-top:12px;border-top:1px dashed var(--border-color)}.crm-commercial-summary small{display:block;color:var(--text-muted);font-size:10px;text-transform:uppercase}.crm-commercial-summary strong{font-size:14px;font-variant-numeric:tabular-nums}.crm-commercial-actions{display:flex;gap:8px;margin-top:12px}.commercial-empty{font-size:12px;color:var(--text-muted);padding:12px;text-align:center}.status-pill{font-size:9px;padding:3px 6px;border-radius:99px;background:rgba(16,185,129,.12);color:#10b981}.status-pill.off{background:rgba(148,163,184,.12);color:var(--text-muted)}
@media(max-width:900px){.commercial-admin-grid{grid-template-columns:1fr}.commercial-fields-3{grid-template-columns:1fr}.crm-product-row{grid-template-columns:auto 1fr 64px}.crm-product-price{grid-column:2/-1;text-align:left}.crm-commercial-summary{grid-template-columns:1fr 1fr}.crm-commercial-summary button{grid-column:1/-1}}

/* Accesibilidad operativa y responsive del CRM, sin alterar la identidad MAT. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="dialog"]:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.close-modal-btn {
    min-width: 40px;
    min-height: 40px;
    display: inline-grid;
    place-items: center;
}

.crm-commercial-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.commercial-dirty {
    padding: 5px 8px;
    border: 1px solid rgba(217, 119, 6, .3);
    border-radius: 999px;
    background: rgba(217, 119, 6, .1);
    color: var(--accent-orange);
    font-size: 10px;
    font-weight: 800;
}

.commercial-summary-note {
    margin-top: 3px;
    color: var(--accent-orange) !important;
    text-transform: none !important;
}

.crm-commercial-actions button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    #crm-modal .modal-content {
        width: min(96vw, 720px) !important;
        max-height: 94dvh;
    }

    .crm-workspace-grid {
        grid-template-columns: 1fr !important;
    }

    .crm-workspace-column--divided {
        border-right: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border-color);
    }

    .tasks-workspace {
        flex-direction: column !important;
        min-height: 0 !important;
    }

    #tasks-list-container {
        max-height: 44dvh !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--border-color);
    }

    #task-edit-panel {
        max-height: none !important;
    }

    .tasks-toolbar {
        align-items: flex-start !important;
        gap: 10px;
        flex-wrap: wrap;
    }

    .tasks-toolbar-actions {
        width: 100%;
        justify-content: space-between;
        overflow-x: auto;
        padding-bottom: 2px;
    }
}

@media (max-width: 768px) {
    #tasks-tab-add-btn,
    #seller-panel-add-task-btn,
    #close-task-modal-btn,
    #crm-save-task-btn,
    #crm-cancel-task-edit-btn,
    #crm-trigger-upload-btn,
    #crm-assets-gallery-container .secondary-btn {
        min-width: 40px !important;
        min-height: 40px !important;
        height: auto !important;
    }
}

@media (max-width: 560px) {
    #crm-modal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0;
    }

    #crm-lead-info-bar {
        gap: 8px !important;
    }

    .crm-commercial-head {
        align-items: flex-start;
    }

    .crm-commercial-actions {
        flex-direction: column;
    }

    .crm-commercial-actions button {
        width: 100%;
        min-height: 44px;
    }

    .tasks-workspace {
        display: block !important;
    }
}

/* Descuentos comerciales: ficha desplegable y simulador de impacto. */
.commercial-guidance{margin:-6px 0 12px;color:var(--text-muted);font-size:11px;line-height:1.45}.commercial-guidance i{margin-right:5px;color:#ef4444}
.crm-product-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;overflow:hidden}
.crm-product-card:has(.crm-product-select:checked){border-color:rgba(239,68,68,.32);box-shadow:inset 3px 0 #ef4444}
.crm-product-card .crm-product-row{grid-template-columns:auto minmax(220px,1fr) auto 78px 90px;padding:12px;border:0;border-radius:0}
.crm-product-detail-toggle{border:0;background:transparent;color:var(--accent-blue);font-size:11px;font-weight:800;cursor:pointer;padding:7px}
.crm-product-detail{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;padding:14px 16px 16px 45px;border-top:1px solid var(--border-color);background:var(--bg-app)}
.crm-product-detail h4{margin:0 0 5px;font-size:10px;text-transform:uppercase;letter-spacing:.65px;color:var(--text-muted)}
.crm-product-detail p{margin:0;white-space:pre-wrap;font-size:12px;line-height:1.5}
.crm-product-scope{padding:14px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-card)}.crm-product-scope ul{display:grid;gap:5px;margin:7px 0 0;padding-left:18px;color:var(--text-main);font-size:11px;line-height:1.45}.crm-product-scope li::marker{color:#ef4444}.crm-product-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;grid-column:1/-1}
.crm-product-facts span{padding:8px 10px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card)}
.crm-product-facts small,.crm-product-facts strong{display:block}
.crm-product-facts small{font-size:9px;text-transform:uppercase}.crm-product-facts strong{margin-top:3px;font-size:11px}
.crm-product-detail-actions{grid-column:1/-1;display:flex;justify-content:flex-end}
.discount-request-dialog{max-width:720px;width:94%}
.commercial-message-dialog{width:min(94vw,920px);max-width:920px;max-height:min(90vh,760px);border-radius:16px}.commercial-message-header{align-items:flex-start;padding:20px 24px}.commercial-message-header h2{margin:4px 0;font-size:22px}.commercial-message-header p{margin:0;color:var(--text-muted);font-size:11px}.commercial-message-body{display:grid;gap:16px;overflow:auto;padding:20px 24px}.commercial-message-context{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--border-color)}.commercial-message-context>span:last-child{display:grid;gap:2px}.commercial-message-context small{color:var(--text-muted);font-size:9px;font-weight:800;text-transform:uppercase}.commercial-message-context strong{font-size:12px}.commercial-message-channel{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:rgba(59,130,246,.1);color:var(--accent-blue);font-size:10px;font-weight:800;text-transform:uppercase}.commercial-message-channel.is-whatsapp{background:rgba(37,211,102,.12);color:#16a34a}.commercial-message-fields{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(300px,1.2fr);gap:14px}.commercial-message-fields label,.commercial-message-editor{display:grid;gap:6px;color:var(--text-muted);font-size:10px;font-weight:800;text-transform:uppercase}.commercial-message-fields input,.commercial-message-editor textarea{width:100%;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-app);color:var(--text-main);font:500 13px/1.55 var(--font-main);outline:0}.commercial-message-fields input{height:42px;padding:0 12px}.commercial-message-editor textarea{min-height:300px;padding:16px;resize:vertical;white-space:pre-wrap}.commercial-message-fields input:focus,.commercial-message-editor textarea:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px rgba(56,189,248,.12)}.commercial-message-meta{display:flex;justify-content:space-between;gap:15px;min-height:18px;color:var(--text-muted);font-size:10px}.commercial-message-status{color:#16a34a;font-weight:700}.commercial-message-actions{gap:9px;padding:14px 24px}.commercial-message-actions #commercial-message-open{min-width:170px}.commercial-message-actions #commercial-message-copy{margin-left:auto}@media(max-width:650px){.commercial-message-dialog{width:100%;max-height:100dvh;height:100dvh;border:0;border-radius:0}.commercial-message-header{padding:16px}.commercial-message-header h2{font-size:19px}.commercial-message-body{gap:12px;padding:14px 16px}.commercial-message-fields{grid-template-columns:1fr}.commercial-message-editor textarea{min-height:38dvh}.commercial-message-actions{display:grid;grid-template-columns:1fr 1fr;padding:12px 16px}.commercial-message-actions #commercial-message-cancel{grid-column:1/-1;grid-row:2}.commercial-message-actions #commercial-message-copy{margin-left:0}.commercial-message-actions button{min-height:44px}}
.commercial-message-consent{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid rgba(37,211,102,.28);border-radius:10px;background:rgba(37,211,102,.07);color:var(--text-main);font-size:11px;line-height:1.45;cursor:pointer}.commercial-message-consent input{width:17px;height:17px;margin-top:2px;accent-color:#16a34a}.commercial-message-consent strong{display:block;margin-bottom:2px;color:#16a34a}.commercial-message-policy{margin:0;padding:10px 12px;border-left:3px solid var(--accent-blue);background:rgba(56,189,248,.07);color:var(--text-muted);font-size:10px;line-height:1.5}.commercial-message-policy i{margin-right:6px;color:var(--accent-blue)}
.discount-request-form{display:grid;gap:14px;padding:20px}
.discount-request-form label{display:grid;gap:6px;color:var(--text-muted);font-size:11px;font-weight:800}
.discount-request-form input,.discount-request-form select,.discount-request-form textarea{width:100%;padding:10px 11px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-app);color:var(--text-main);font:inherit}
.discount-request-form textarea{min-height:92px;resize:vertical}.discount-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.discount-impact{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:12px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-app)}
.discount-impact div{padding:9px;border-radius:8px}.discount-impact small,.discount-impact strong{display:block}
.discount-impact small{font-size:9px;text-transform:uppercase;color:var(--text-muted)}.discount-impact strong{margin-top:5px;font-size:13px;font-variant-numeric:tabular-nums}
.discount-impact-primary{background:rgba(239,68,68,.09);color:#ef4444}.discount-rule{margin:0;color:var(--text-muted);font-size:11px;line-height:1.5}
.form-error{margin:0;padding:9px 11px;border-left:3px solid #ef4444;background:rgba(239,68,68,.08);color:#ef4444;font-size:11px}
.discount-request-actions{display:flex;justify-content:flex-end;gap:8px}.price-request-summary{max-width:260px}
.price-request-summary strong,.price-request-summary small{display:block}.price-request-summary small{margin-top:3px;color:var(--text-muted)}.price-request-reason{margin-top:6px;font-size:11px;color:var(--text-muted)}
@media(max-width:900px){.crm-product-card .crm-product-row{grid-template-columns:auto 1fr auto}.crm-product-card .crm-product-qty{grid-column:2}.crm-product-card .crm-product-price{grid-column:3;text-align:right}.crm-product-detail-toggle{grid-column:3;grid-row:1}.crm-product-detail{grid-template-columns:1fr;padding-left:16px}.crm-product-facts{grid-template-columns:1fr 1fr}.discount-impact{grid-template-columns:1fr 1fr}.discount-impact-primary{grid-column:1/-1}.discount-fields{grid-template-columns:1fr}}
/* Visible para lectores de pantalla sin alterar el layout. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Assignment intelligence + universal report workspace */
.chart-action-hint{margin:0 0 10px;color:var(--text-muted);font-size:10px}.assignment-overview-card{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(240px,320px) minmax(220px,.8fr);align-items:center;gap:26px;margin:0 10px 24px;padding:24px 28px;border:1px solid var(--border-color);border-radius:16px;background:linear-gradient(135deg,var(--bg-card),color-mix(in srgb,var(--bg-card) 92%,#ef4444));box-shadow:0 14px 36px rgba(0,0,0,.12);overflow:hidden}.assignment-copy h2{margin:8px 0 6px;font:800 23px/1.1 var(--font-title);color:var(--text-main)}.assignment-copy p{max-width:360px;margin:0 0 17px;color:var(--text-muted);font-size:12px;line-height:1.55}.report-eyebrow{display:inline-flex;align-items:center;gap:7px;color:#ef4444;font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.assignment-chart-wrap{position:relative;height:220px}.assignment-chart-center{pointer-events:none;position:absolute;inset:50% auto auto 50%;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-50%)}.assignment-chart-center strong{font:800 31px/1 var(--font-title);color:var(--text-main)}.assignment-chart-center span{margin-top:4px;color:var(--text-muted);font-size:9px;text-transform:uppercase}.assignment-legend{display:grid;gap:6px;max-height:205px;overflow:auto;padding-right:4px}.assignment-legend-item{display:grid;grid-template-columns:9px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;padding:8px 10px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--text-main);font-size:11px;text-align:left;cursor:pointer}.assignment-legend-item:hover,.assignment-legend-item:focus-visible{border-color:var(--border-color);background:var(--bg-app)}.assignment-legend-item>span:first-child{width:8px;height:8px;border-radius:50%;background:var(--legend-color)}.assignment-legend-item strong{font-variant-numeric:tabular-nums}.assignment-legend-item.is-pending{background:rgba(239,68,68,.06);color:#ef4444}
.report-workspace{padding-bottom:32px}.report-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:28px 26px 22px}.report-hero h1{margin:7px 0 6px;font:800 27px/1.1 var(--font-title);color:var(--text-main)}.report-hero h1 span{color:#ef4444}.report-hero p{max-width:720px;margin:0;color:var(--text-muted);font-size:12px;line-height:1.55}.report-command-bar{position:relative;z-index:4;display:flex;align-items:center;gap:8px;margin:0 18px;padding:12px;border:1px solid var(--border-color);border-radius:12px 12px 0 0;background:var(--bg-card)}.report-search{display:flex;align-items:center;gap:9px;min-width:250px;flex:1;max-width:420px;padding:0 11px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-app);color:var(--text-muted)}.report-search:focus-within{border-color:var(--accent-blue);box-shadow:0 0 0 3px rgba(56,189,248,.1)}.report-search input{width:100%;padding:9px 0;border:0;outline:0;background:transparent;color:var(--text-main);font:inherit;font-size:12px}.report-popover{position:relative}.report-popover>summary,.report-icon-btn,.report-secondary-btn,.report-primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:8px 11px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card);color:var(--text-main);font:700 11px var(--font-main);cursor:pointer;list-style:none}.report-popover>summary::-webkit-details-marker{display:none}.report-popover[open]>summary{border-color:var(--accent-blue);color:var(--accent-blue);background:rgba(56,189,248,.07)}.report-count{display:grid;place-items:center;min-width:18px;height:18px;border-radius:5px;background:rgba(56,189,248,.13);color:var(--accent-blue);font-size:9px}.report-popover-panel{position:absolute;top:calc(100% + 7px);right:0;z-index:20;min-width:370px;padding:14px;border:1px solid var(--border-color);border-radius:11px;background:var(--bg-card);box-shadow:0 18px 45px rgba(0,0,0,.25)}.report-filter-builder{display:grid;grid-template-columns:1fr 1fr;gap:10px}.report-filter-builder label{display:grid;gap:5px;color:var(--text-muted);font-size:9px;font-weight:800;text-transform:uppercase}.report-filter-builder label:nth-child(3){grid-column:1/-1}.report-filter-builder select,.report-filter-builder input,.report-sort-list select,.report-result-head select{padding:9px;border:1px solid var(--border-color);border-radius:7px;background:var(--bg-app);color:var(--text-main);font:500 11px var(--font-main);outline:0}.report-primary-btn{border-color:#ef4444;background:#ef4444;color:#fff}.report-secondary-btn:hover,.report-icon-btn:hover{border-color:var(--accent-blue);color:var(--accent-blue)}.report-filter-chips{display:flex;flex-wrap:wrap;gap:7px;min-height:0;margin:0 18px;padding:0 12px;background:var(--bg-card)}.report-filter-chips:not(:empty){padding-bottom:11px;border-right:1px solid var(--border-color);border-left:1px solid var(--border-color)}.report-filter-chips button{display:flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid rgba(56,189,248,.26);border-radius:6px;background:rgba(56,189,248,.07);color:var(--accent-blue);font:700 10px var(--font-main);cursor:pointer}.report-columns-popover .report-popover-panel{min-width:270px;max-height:400px;overflow:auto}.report-popover-title{margin-bottom:9px;color:var(--text-muted);font-size:10px;font-weight:800;text-transform:uppercase}.report-column-list{display:grid;gap:3px}.report-column-list label{display:flex;align-items:center;gap:9px;padding:7px;border-radius:6px;color:var(--text-main);font-size:11px;cursor:pointer}.report-column-list label:hover{background:var(--bg-app)}.report-sort-list{display:grid;gap:7px;margin-bottom:10px}.report-sort-list>div{display:grid;grid-template-columns:24px 1fr 118px 28px;align-items:center;gap:6px}.sort-rank{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:var(--bg-app);color:var(--text-muted);font-size:9px;font-weight:800}.report-sort-list button{border:0;background:transparent;color:var(--text-muted);cursor:pointer}.report-result-head,.report-pagination{display:flex;justify-content:space-between;align-items:center;margin:0 18px;padding:10px 13px;border-right:1px solid var(--border-color);border-left:1px solid var(--border-color);background:var(--bg-card);color:var(--text-muted);font-size:10px}.report-result-head strong{color:var(--text-main);font-size:13px}.report-result-head label{display:flex;align-items:center;gap:8px}.report-table-shell{position:relative;margin:0 18px;overflow:auto;max-height:calc(100vh - 340px);min-height:300px;border:1px solid var(--border-color);background:var(--bg-card)}.report-table-shell[aria-busy=true]{opacity:.62}.report-data-table{width:100%;border-collapse:separate;border-spacing:0;white-space:nowrap;font-size:11px}.report-data-table thead{position:sticky;top:0;z-index:2}.report-data-table th{padding:0;border-right:1px solid var(--border-color);border-bottom:1px solid var(--border-color);background:color-mix(in srgb,var(--bg-card) 92%,#64748b)}.report-data-table th button{display:flex;align-items:center;gap:7px;width:100%;padding:11px 12px;border:0;background:transparent;color:var(--text-muted);font:800 9px var(--font-main);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}.report-data-table th button:hover{color:var(--accent-blue)}.report-data-table td{max-width:320px;overflow:hidden;padding:10px 12px;border-right:1px solid color-mix(in srgb,var(--border-color) 65%,transparent);border-bottom:1px solid color-mix(in srgb,var(--border-color) 65%,transparent);color:var(--text-main);text-overflow:ellipsis}.report-data-table tbody tr:hover td{background:rgba(56,189,248,.035)}.header-sort-rank{display:grid;place-items:center;width:16px;height:16px;margin-left:auto;border-radius:4px;background:rgba(56,189,248,.13);color:var(--accent-blue);font-size:8px}.report-null{color:var(--text-muted);font-style:italic}.report-status,.report-pill{display:inline-flex;padding:4px 7px;border-radius:5px;background:rgba(139,92,246,.11);color:#a78bfa;font-size:9px;font-weight:800}.report-pill{background:rgba(100,116,139,.12);color:var(--text-muted)}.report-pill.is-yes{background:rgba(16,185,129,.11);color:#10b981}.report-empty{height:250px!important;text-align:center!important;color:var(--text-muted)!important}.report-empty i,.report-empty strong,.report-empty span{display:block;margin:7px auto}.report-empty i{font-size:24px}.report-pagination{border-bottom:1px solid var(--border-color);border-radius:0 0 12px 12px}.report-pagination>div{display:flex;gap:6px}.report-pagination .report-icon-btn{min-width:34px;padding:6px}.report-icon-btn:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:1000px){.assignment-overview-card{grid-template-columns:1fr 1fr}.assignment-legend{grid-column:1/-1;grid-template-columns:repeat(2,1fr)}.report-command-bar{flex-wrap:wrap}.report-search{max-width:none;flex-basis:100%}}@media(max-width:650px){.assignment-overview-card{grid-template-columns:1fr;padding:20px}.assignment-chart-wrap{height:200px}.assignment-legend{grid-template-columns:1fr}.report-hero{padding:20px 16px}.report-command-bar,.report-result-head,.report-table-shell,.report-pagination,.report-filter-chips{margin-right:8px;margin-left:8px}.report-command-bar>details{flex:1}.report-popover>summary{width:100%}.report-popover-panel{position:fixed;top:auto;right:10px;bottom:12px;left:10px;min-width:0;max-height:70vh;overflow:auto}.report-filter-builder{grid-template-columns:1fr}.report-filter-builder label:nth-child(3){grid-column:auto}.report-table-shell{max-height:55vh}}
.assignment-legend-manager{grid-template-columns:repeat(2,minmax(0,1fr));max-height:112px;margin-top:10px}.report-sort-help{display:block;margin-top:3px;color:var(--text-muted);font-size:9px}@media(max-width:650px){.assignment-legend-manager{grid-template-columns:1fr}.report-sort-help{display:none}}
.report-scope-note{margin:-7px 16px 15px;padding:9px 11px;border-left:3px solid var(--accent-blue);background:rgba(56,189,248,.05);color:var(--text-muted);font-size:10px;line-height:1.45}.report-scope-note i{margin-right:6px;color:var(--accent-blue)}
.report-inline-error-row td{padding:0!important;background:rgba(239,68,68,.08)!important}.report-inline-error-row div{padding:8px 12px;border-left:3px solid #ef4444;color:#ef4444;font-size:10px;font-weight:700}.report-maintenance button:disabled{cursor:wait;opacity:.45}
.report-view-switch{display:flex;margin-left:auto;padding:3px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-app)}.report-view-switch button{display:flex;align-items:center;gap:6px;padding:6px 9px;border:0;border-radius:5px;background:transparent;color:var(--text-muted);font:700 10px var(--font-main);cursor:pointer}.report-view-switch button.active{background:var(--bg-card);color:var(--accent-blue);box-shadow:0 1px 5px rgba(0,0,0,.16)}.report-maintenance-head,.report-maintenance{position:sticky!important;left:0;z-index:3;width:76px;min-width:76px;max-width:76px;text-align:center;background:var(--bg-card)!important;box-shadow:1px 0 var(--border-color)}.report-maintenance-head{z-index:5!important;color:var(--text-muted);padding:10px!important}.report-maintenance{padding:5px!important}.report-maintenance button{display:inline-grid;place-items:center;width:27px;height:27px;margin:0 2px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text-muted);cursor:pointer}.report-maintenance button:hover,.report-maintenance button:focus-visible{border-color:var(--border-color);background:var(--bg-app);color:var(--accent-blue)}.report-maintenance [data-row-action=save]{color:#10b981}.report-maintenance [data-row-action=cancel]{color:#ef4444}.report-data-table tr.is-editing td{background:rgba(56,189,248,.055)}.report-data-table tr.is-editing{box-shadow:inset 3px 0 var(--accent-blue)}.report-data-table tr.has-error{box-shadow:inset 3px 0 #ef4444}.report-inline-input,.report-form-control{width:100%;min-width:120px;padding:7px 8px;border:1px solid var(--accent-blue);border-radius:6px;background:var(--bg-app);color:var(--text-main);font:500 11px var(--font-main);outline:0}.report-inline-input:focus,.report-form-control:focus{box-shadow:0 0 0 3px rgba(56,189,248,.12)}.report-detail-view{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:480px;max-height:calc(100vh - 340px);margin:0 18px;border:1px solid var(--border-color);background:var(--bg-card)}.report-detail-view.hidden{display:none}.report-record-list{overflow:hidden;border-right:1px solid var(--border-color);background:var(--bg-app)}.report-record-list-head{display:flex;justify-content:space-between;padding:13px 14px;border-bottom:1px solid var(--border-color);color:var(--text-muted);font-size:10px;text-transform:uppercase}.report-record-list>div:last-child{height:calc(100% - 43px);overflow:auto;padding:6px}.report-record-list button{position:relative;display:grid;gap:4px;width:100%;padding:11px 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-main);text-align:left;cursor:pointer}.report-record-list button:hover{background:var(--bg-card)}.report-record-list button.active{border-color:rgba(56,189,248,.28);background:rgba(56,189,248,.08);box-shadow:inset 3px 0 var(--accent-blue)}.report-record-list button strong{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.report-record-list button span{overflow:hidden;color:var(--text-muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}.report-record-list button small{position:absolute;right:9px;bottom:9px;color:#a78bfa;font-size:8px}.report-record-editor{overflow:auto;padding:24px 28px}.report-editor-empty{display:grid;place-items:center;align-content:center;height:100%;color:var(--text-muted);text-align:center}.report-editor-empty i{margin-bottom:12px;font-size:24px}.report-editor-empty strong,.report-editor-empty span{display:block;margin-top:4px}.report-record-editor form>header{display:flex;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--border-color)}.report-record-editor h2{margin:6px 0 2px;font:800 22px var(--font-title);color:var(--text-main)}.report-record-editor header p{margin:0;color:var(--text-muted);font-size:10px}.report-editor-fields{display:grid;grid-template-columns:1fr 1fr;gap:17px;padding:22px 0}.report-editor-fields label{display:grid;gap:6px;color:var(--text-muted);font-size:9px;font-weight:800;text-transform:uppercase}.report-form-control{min-height:39px;border-color:var(--border-color);font-size:12px;text-transform:none}.report-record-editor form>footer{display:flex;justify-content:flex-end;gap:8px;padding-top:17px;border-top:1px solid var(--border-color)}@media(max-width:800px){.report-view-switch span{display:none}.report-detail-view{grid-template-columns:1fr;max-height:none}.report-record-list{max-height:220px;border-right:0;border-bottom:1px solid var(--border-color)}.report-record-list>div:last-child{max-height:176px}.report-record-editor{padding:18px}.report-editor-fields{grid-template-columns:1fr}}

/* Decision intelligence layer */
#tab-dashboard .content-header,#tab-reportes-gerenciales .content-header{padding:26px 24px 10px}#tab-dashboard .content-header h1,#tab-reportes-gerenciales .content-header h1{font-size:clamp(22px,2.2vw,31px);letter-spacing:-.035em}#tab-dashboard .period-filter,#tab-reportes-gerenciales .period-filter{margin:8px 24px 12px;padding:5px;width:max-content;max-width:calc(100% - 48px);border:1px solid var(--border-color);border-radius:999px;background:color-mix(in srgb,var(--bg-card) 92%,transparent);box-shadow:var(--shadow-sm)}#tab-dashboard .period-quick-actions,#tab-reportes-gerenciales .period-quick-actions{padding:0;background:transparent}#tab-dashboard .period-quick-actions button,#tab-reportes-gerenciales .period-quick-actions button{height:36px;min-width:52px;border-color:transparent;background:transparent}#tab-dashboard .period-quick-actions button.active,#tab-reportes-gerenciales .period-quick-actions button.active{border-color:color-mix(in srgb,var(--primary) 35%,transparent);background:color-mix(in srgb,var(--primary) 12%,var(--bg-card));color:var(--primary)}
.management-context-filters{display:flex;align-items:end;gap:9px;margin:0 24px 16px;padding:12px 14px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-card)}.management-context-filters label{display:grid;gap:5px;min-width:180px}.management-context-filters label span{font-size:9px;font-weight:800;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase}.management-context-filters select{height:36px;padding:0 34px 0 10px;border:1px solid var(--field-border);border-radius:8px;background:var(--field-bg);color:var(--field-text)}
.management-insight-grid,.dashboard-decision-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:14px;margin:0 16px 18px}.management-chart-card{min-width:0;padding:18px;border:1px solid var(--border-color);border-radius:14px;background:var(--bg-card);box-shadow:0 12px 32px rgba(15,23,42,.07)}.management-card-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px}.management-card-head h3{margin:5px 0 2px;font-size:16px;letter-spacing:-.015em}.management-card-head p,.management-meta{color:var(--text-muted);font-size:11px}.management-meta{white-space:nowrap}.management-chart-stage{height:250px}.stage-distribution{display:grid;gap:7px}.stage-distribution-row{display:grid;grid-template-columns:92px 1fr 34px 38px;align-items:center;gap:8px;width:100%;padding:8px;border:0;border-radius:8px;background:transparent;color:var(--text-main);text-align:left;cursor:pointer}.stage-distribution-row:hover,.stage-distribution-row:focus-visible{background:var(--bg-card-hover);outline:2px solid color-mix(in srgb,var(--primary) 40%,transparent)}.stage-distribution-row>i{height:8px;overflow:hidden;border-radius:999px;background:var(--border-color)}.stage-distribution-row>i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--accent-orange))}.stage-distribution-row small{color:var(--text-muted);text-align:right}.stage-distribution-total{display:flex;justify-content:space-between;padding:11px 8px 0;border-top:1px solid var(--border-color);font-size:11px}.management-empty{padding:28px;text-align:center;color:var(--text-muted)}
.dashboard-action-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 16px 14px}.dashboard-action-kpi{display:grid;gap:7px;min-height:118px;padding:16px;border:1px solid var(--border-color);border-radius:14px;background:var(--bg-card);color:var(--text-main);text-align:left;cursor:pointer;box-shadow:0 10px 28px rgba(15,23,42,.06);transition:transform .18s ease,border-color .18s ease}.dashboard-action-kpi:hover,.dashboard-action-kpi:focus-visible{transform:translateY(-2px);border-color:var(--primary);outline:0}.dashboard-action-kpi span{display:flex;align-items:center;gap:7px;color:var(--text-label);font-size:11px;font-weight:700}.dashboard-action-kpi strong{font-family:var(--font-title);font-size:30px;line-height:1}.dashboard-action-kpi small{color:var(--text-muted)}.dashboard-action-kpi.is-critical strong,.dashboard-action-kpi.is-critical span i{color:var(--accent-red)}.dashboard-action-kpi.is-warning strong,.dashboard-action-kpi.is-warning span i{color:var(--accent-orange)}
.dashboard-decision-grid{grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr)}.dashboard-risk-list{display:grid;gap:6px}.dashboard-risk-row{display:grid;grid-template-columns:130px 1fr 34px 12px;align-items:center;gap:9px;width:100%;padding:10px;border:0;border-radius:9px;background:transparent;color:var(--text-main);text-align:left;cursor:pointer}.dashboard-risk-row:hover,.dashboard-risk-row:focus-visible{background:var(--bg-card-hover);outline:2px solid color-mix(in srgb,var(--primary) 35%,transparent)}.dashboard-risk-row>i:not(.fa-solid){height:8px;overflow:hidden;border-radius:999px;background:var(--border-color)}.dashboard-risk-row>i b{display:block;height:100%;border-radius:inherit;background:var(--accent-orange)}.dashboard-risk-row.severity-critical>i b{background:var(--accent-red)}.dashboard-critical-table-wrap{overflow:auto;max-height:270px}.dashboard-critical-table{width:100%;border-collapse:collapse;font-size:11px}.dashboard-critical-table th,.dashboard-critical-table td{padding:10px 8px;border-bottom:1px solid var(--border-color);text-align:left;white-space:nowrap}.dashboard-critical-table th{position:sticky;top:0;background:var(--bg-card);color:var(--text-muted);font-size:9px;text-transform:uppercase}.critical-lead-link{border:0;background:transparent;color:var(--primary);font-weight:700;cursor:pointer}.risk-chip{display:inline-block;padding:4px 7px;border-radius:999px;background:color-mix(in srgb,var(--accent-orange) 12%,transparent);color:var(--accent-orange);font-size:9px;font-weight:800}.risk-chip.critical{background:color-mix(in srgb,var(--accent-red) 12%,transparent);color:var(--accent-red)}
@media(max-width:1000px){.dashboard-action-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.management-insight-grid,.dashboard-decision-grid{grid-template-columns:1fr}}@media(max-width:650px){#tab-dashboard .content-header,#tab-reportes-gerenciales .content-header{padding:18px 12px 8px}#tab-dashboard .period-filter,#tab-reportes-gerenciales .period-filter{margin:8px 12px 12px;max-width:calc(100% - 24px)}.dashboard-action-kpis{grid-template-columns:1fr 1fr;margin-inline:10px}.management-insight-grid,.dashboard-decision-grid{margin-inline:10px}.management-context-filters{margin-inline:12px;align-items:stretch;flex-direction:column}.management-context-filters label{min-width:0}.dashboard-critical-card{padding:12px}}
@container (max-width:1100px){.profile-theme-wrapper{position:relative!important;top:auto!important;right:auto!important;justify-content:flex-end;padding:16px 18px 0;z-index:10!important}}
.management-product-card{margin:0 16px 18px}.management-product-list{display:grid;gap:8px}.management-product-row{display:grid;grid-template-columns:minmax(140px,.8fr) minmax(180px,1.4fr) 100px 90px;align-items:center;gap:10px;padding:8px;border-bottom:1px solid var(--border-color);font-size:11px}.management-product-row>i{height:9px;overflow:hidden;border-radius:999px;background:var(--border-color)}.management-product-row>i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--accent-green))}.management-product-row span,.management-product-row small{text-align:right}.management-product-row small{color:var(--accent-green);font-weight:700}@media(max-width:650px){.management-product-card{margin-inline:10px}.management-product-row{grid-template-columns:1fr 70px}.management-product-row>i{grid-column:1/-1;grid-row:2}.management-product-row span{grid-column:2;grid-row:1}.management-product-row small{grid-column:2;grid-row:3}.management-product-row strong{grid-column:1;grid-row:1}}

/* Commercial Dashboard — the management landing page, intentionally separate from Panel de Leads. */
#tab-ventas-dashboard{font-size:14px}#tab-ventas-dashboard .content-header{padding:28px 32px 10px}#tab-ventas-dashboard .content-header h1{font-size:30px;letter-spacing:-.035em}#tab-ventas-dashboard .content-header .subtitle{font-size:16px;line-height:1.5}#tab-ventas-dashboard .period-filter--commercial{margin:16px 0 4px;max-width:100%;overflow-x:auto}#tab-ventas-dashboard .period-quick-actions button,#tab-reportes-gerenciales .period-quick-actions button{font-size:12px}#tab-ventas-dashboard .dashboard-action-kpi span{font-size:13px}#tab-ventas-dashboard .dashboard-action-kpi small{font-size:12px}#tab-ventas-dashboard .dashboard-action-kpi strong{font-size:34px}.commercial-dashboard-v2{margin-bottom:22px}.commercial-dashboard-insights{display:grid;grid-template-columns:minmax(320px,.85fr) minmax(420px,1.15fr);gap:16px;margin:0 16px 16px}.commercial-dashboard-v2 .management-chart-card h3{font-size:18px}.commercial-dashboard-v2 .management-card-head p{font-size:13px;line-height:1.45}.commercial-assignment-content{display:grid;grid-template-columns:minmax(210px,.8fr) minmax(190px,1fr);align-items:center;gap:18px}.commercial-assignment-chart{position:relative;height:230px}.commercial-assignment-chart>span{pointer-events:none;position:absolute;inset:50% auto auto 50%;display:grid;place-items:center;transform:translate(-50%,-50%);color:var(--text-muted);font-size:11px;text-align:center}.commercial-assignment-chart>span strong{display:block;color:var(--text-main);font:800 29px var(--font-title)}.commercial-actions-card{margin:0 16px 20px}.commercial-dashboard-v2 .dashboard-risk-row{font-size:13px}.commercial-dashboard-v2 .dashboard-critical-table{font-size:12px}.commercial-dashboard-v2 .dashboard-critical-table th{font-size:10px}
#tab-reportes-gerenciales{font-size:14px}#tab-reportes-gerenciales .content-header .subtitle{font-size:15px}#tab-reportes-gerenciales .management-card-head h3{font-size:18px}#tab-reportes-gerenciales .management-card-head p,#tab-reportes-gerenciales .report-scope-note{font-size:12px}#tab-reportes-gerenciales .stage-distribution-row,#tab-reportes-gerenciales .management-product-row{font-size:12px}
@media(max-width:1050px){.commercial-dashboard-insights{grid-template-columns:1fr}.commercial-assignment-content{grid-template-columns:minmax(200px,.7fr) 1fr}}@media(max-width:650px){#tab-ventas-dashboard .content-header{padding:20px 14px 8px}#tab-ventas-dashboard .content-header h1{font-size:25px}#tab-ventas-dashboard .dashboard-action-kpis{grid-template-columns:1fr}.commercial-dashboard-insights,.commercial-actions-card{margin-inline:10px}.commercial-assignment-content{grid-template-columns:1fr}.commercial-assignment-chart{height:210px}}

/* 3.7.2 — compact, collision-free header for Panel de Leads. */
#tab-dashboard .content-header{
    display:grid;
    grid-template-columns:minmax(470px,1fr) auto;
    gap:14px 22px;
    align-items:start;
    padding:22px 24px 12px;
}
#tab-dashboard .content-header>div:first-child{min-width:0}
#tab-dashboard .content-header h1{font-size:clamp(22px,1.8vw,28px);line-height:1.08;margin-bottom:3px}
#tab-dashboard .content-header .subtitle{font-size:12px;line-height:1.35}
#tab-dashboard .content-header .period-filter--dashboard{
    flex-wrap:nowrap;
    gap:7px;
    margin:10px 0 0;
    padding:3px;
    width:max-content;
    max-width:100%;
    min-height:38px;
    overflow-x:auto;
    border-radius:14px;
}
#tab-dashboard .period-quick-actions{flex:0 0 auto;gap:2px}
#tab-dashboard .period-quick-actions button{height:30px;min-width:39px;padding:0 8px;font-size:10px}
#tab-dashboard .period-quick-actions .period-calendar-btn{min-width:34px}
#tab-dashboard .period-custom-fields{flex:0 0 auto;gap:5px}
#tab-dashboard .period-custom-fields label{font-size:7px}
#tab-dashboard .period-custom-fields input{width:124px;height:30px;padding-inline:6px;font-size:9px}
#tab-dashboard .stats-bar{gap:8px;margin-top:54px}
#tab-dashboard .stat-card{min-width:92px;padding:8px 10px;border-radius:12px}
#tab-dashboard .stat-num{font-size:20px;line-height:1.15}
#tab-dashboard .stat-label{font-size:9px;letter-spacing:.35px}

@media(max-width:1280px){
    #tab-dashboard .content-header{grid-template-columns:1fr;padding-top:22px}
    #tab-dashboard .stats-bar{margin-top:0;justify-content:flex-start}
    #tab-dashboard .stat-card{flex:0 1 112px}
}

@media(max-width:768px){
    #tab-dashboard .content-header{display:flex!important;padding:14px 12px 8px!important;gap:0;margin-bottom:4px!important}
    #tab-dashboard .content-header h1{font-size:21px!important}
    #tab-dashboard .content-header .subtitle{font-size:11px}
    #tab-dashboard .content-header .period-filter--dashboard{width:100%;max-width:100%;margin:9px 0 0;padding:3px;overflow:visible;flex-wrap:wrap}
    #tab-dashboard .period-quick-actions{width:100%;overflow-x:auto;scrollbar-width:none}
    #tab-dashboard .period-custom-fields{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:6px;padding:0 3px 3px}
    #tab-dashboard .period-custom-fields label{min-width:0}
    #tab-dashboard .period-custom-fields input{width:100%;min-width:0}
    #tab-dashboard .stats-bar{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:9px!important}
    #tab-dashboard .stat-card{width:auto!important;min-width:0!important;padding:7px 4px!important}
    #tab-dashboard .stat-num{font-size:18px}
    #tab-dashboard .stat-label{font-size:8px;white-space:nowrap}
}

@media(max-width:390px){
    #tab-dashboard .content-header{padding-inline:9px!important}
    #tab-dashboard .period-quick-actions button{min-width:37px;padding-inline:7px}
    #tab-dashboard .stat-label{font-size:7px;letter-spacing:.2px}
}

/* 3.8.0 — one visual header system across every top-level workspace. */
:root{
    --page-header-pad-x:32px;
    --page-header-pad-top:28px;
    --page-title-size:30px;
    --page-subtitle-size:15px;
}
.tab-content>.content-header{
    padding:var(--page-header-pad-top) var(--page-header-pad-x) 14px;
    min-height:112px;
    box-sizing:border-box;
}
.tab-content>.content-header h1,
.report-workspace>.report-hero h1{
    max-width:72%;
    margin:0 0 6px;
    color:var(--text-main);
    font:800 var(--page-title-size)/1.12 var(--font-title)!important;
    letter-spacing:-.035em;
}
.tab-content>.content-header .subtitle,
.report-workspace>.report-hero p{
    max-width:72%;
    margin:0;
    color:var(--text-muted);
    font-size:var(--page-subtitle-size)!important;
    line-height:1.45;
}
.report-workspace>.report-hero{
    min-height:112px;
    padding:var(--page-header-pad-top) var(--page-header-pad-x) 14px;
    box-sizing:border-box;
}
.report-workspace>.report-hero h1{margin-top:5px}

/* The Leads header contains its own metric rail, so it keeps the full grid width. */
#tab-dashboard .content-header{
    padding:var(--page-header-pad-top) var(--page-header-pad-x) 14px;
}
#tab-dashboard .content-header h1,
#tab-dashboard .content-header .subtitle{max-width:100%}
#tab-dashboard .content-header h1{font-size:var(--page-title-size)!important;line-height:1.12;margin-bottom:6px}
#tab-dashboard .content-header .subtitle{font-size:var(--page-subtitle-size)!important;line-height:1.45}
#tab-dashboard .content-header .period-filter--dashboard{margin-top:14px}
#tab-dashboard .stats-bar{margin-top:58px}

@container (max-width:900px){
    .tab-content>.content-header h1,
    .tab-content>.content-header .subtitle,
    .report-workspace>.report-hero h1,
    .report-workspace>.report-hero p{max-width:100%}
}

@media(max-width:768px){
    :root{
        --page-header-pad-x:12px;
        --page-header-pad-top:16px;
        --page-title-size:23px;
        --page-subtitle-size:12px;
    }
    .tab-content>.content-header,
    .report-workspace>.report-hero{min-height:0;padding:var(--page-header-pad-top) var(--page-header-pad-x) 10px!important}
    .tab-content>.content-header h1,
    .report-workspace>.report-hero h1{font-size:var(--page-title-size)!important;line-height:1.16}
    .tab-content>.content-header .subtitle,
    .report-workspace>.report-hero p{font-size:var(--page-subtitle-size);line-height:1.4}
    #tab-dashboard .content-header h1{font-size:var(--page-title-size)!important}
    #tab-dashboard .content-header .subtitle{font-size:var(--page-subtitle-size)}
}