/* =====================================================
   Alfred Smart - Backoffice
   Estilos Globales
   ===================================================== */

/* =====================================================
   CSS Variables - Alfred Smart Brand
   ===================================================== */
:root {
    /* Alfred Smart Primary Colors */
    --alfred-cobalto: #003D59;
    --alfred-indigo: #005898;
    --alfred-celeste: #DDE5ED;
    --alfred-white: #ffffff;
    --alfred-black: #000000;
    
    /* Alfred Smart Secondary Colors */
    --alfred-jade: rgb(0, 200, 160);
    --alfred-teal: rgb(0, 178, 169);  /* Alias para jade - usado en filtros */
    --alfred-rubio: rgb(244, 201, 93);
    --alfred-cielo: rgb(110, 193, 228);
    --alfred-violeta: rgb(162, 94, 217);
    --alfred-lavanda: rgb(175, 166, 242);
    --alfred-manzana: rgb(219, 89, 78);
    --alfred-verde-bosque: rgb(56, 125, 87);
    --alfred-mango: rgb(255, 170, 51);
    --alfred-indigo-light: rgba(0, 88, 152, 0.7);
    
    /* Text Colors */
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
    --text-color: #374151;
    
    /* Background variations */
    --bg-primary: #ffffff;
    --bg-secondary: #F8FAFC;
    --bg-tertiary: #f0f4f8;
    
    /* Border */
    --border-color: #E5E7EB;
    --border-default: var(--border-color);
    --border-light: #F3F4F6;
    
    /* Semantic Colors */
    --color-error: #EF4444;
    --color-error-dark: #DC2626;
    --color-error-bg: #FEF2F2;
    --color-warning: #F59E0B;
    --color-warning-dark: #D97706;
    --color-warning-bg: #FFFBEB;
    --color-success: #10B981;
    --color-success-dark: #059669;
    --color-success-bg: #ECFDF5;
    --color-indigo: #6366F1;
    --color-indigo-bg: #EEF2FF;
    --color-purple: #8B5CF6;
    --color-purple-bg: #F5F3FF;
    
    /* Border Radius Scale */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-pill: 9999px;
    --radius-circle: 50%;

    /* Typography */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Poppins', sans-serif;
    
    /* Layout - Sidebar */
    --sidebar-width-expanded: 240px;
    --sidebar-width-collapsed: 68px;
    --sidebar-width: var(--sidebar-width-expanded);
    --header-height: 64px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 61, 89, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 61, 89, 0.12);
    --shadow-lg: 0 12px 32px rgba(0, 61, 89, 0.16);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-sidebar: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =====================================================
   Lucide Icons - Global Styles
   ===================================================== */

/* Inline icons (next to text in labels, buttons, etc.) */
.icon-inline {
    display: inline-flex;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    margin-right: 0.35em;
}

.icon-inline svg {
    width: 100%;
    height: 100%;
    stroke-width: 2;
}

/* Button icons */
.btn svg,
button svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    vertical-align: middle;
}

.btn-primary svg {
    stroke: currentColor;
}

/* Mobile menu button icon */
.mobile-menu-btn svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

/* Logout button icon */
#logout-btn svg {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: middle;
}

/* Header user role icon */
.header-user-role .icon-inline {
    width: 14px;
    height: 14px;
    color: var(--alfred-jade);
}

/* Frequency selector icons */
.frequency-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.frequency-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
}

/* Card title icons */
.card-title .icon-inline {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.15em;
    color: var(--alfred-indigo);
}

/* Action buttons icons */
.action-buttons .btn svg {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: -0.15em;
}

/* Tab icons */
.tab-icon svg,
.pricing-tab .tab-icon svg,
.module-tab svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* Empty state icons */
.empty-icon svg,
.empty-state svg,
.placeholder-icon svg {
    width: 48px;
    height: 48px;
    stroke-width: 1.5;
    color: var(--alfred-celeste);
}

/* Search button icons */
.btn-search svg {
    width: 16px;
    height: 16px;
}

/* Summary card icons */
.summary-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.75;
}

/* Drawer icons */
.drawer-icon svg {
    width: 32px;
    height: 32px;
}

/* KPI icons */
.kpi-icon svg,
.mgr-kpi-icon svg {
    width: 20px;
    height: 20px;
}

/* Source icons */
.source-icon svg {
    width: 24px;
    height: 24px;
}

/* =====================================================
   Base Styles
   ===================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    background: var(--alfred-celeste);
    color: var(--alfred-cobalto);
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--alfred-cobalto);
}

/* =====================================================
   App Layout
   ===================================================== */
.app-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* =====================================================
   Sidebar - Collapsible Design
   ===================================================== */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: #FFFFFF;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: width var(--transition-sidebar), min-width var(--transition-sidebar);
    overflow: hidden;
}

/* Sidebar Collapsed State */
.sidebar.collapsed {
    --sidebar-width: var(--sidebar-width-collapsed);
}

.sidebar-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 65px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    transition: opacity var(--transition-sidebar);
}

.sidebar-logo {
    height: 32px;
    width: auto;
    flex-shrink: 0;
}

.sidebar-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    opacity: 1;
    transition: opacity var(--transition-sidebar);
}

.sidebar.collapsed .sidebar-title {
    opacity: 0;
    width: 0;
}

/* Toggle Button */
.sidebar-toggle {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.sidebar-toggle:hover {
    background: var(--border-light);
    border-color: var(--border-color);
    color: var(--text-color);
}

.sidebar-toggle .toggle-icon {
    transition: transform var(--transition-sidebar);
}

.sidebar.collapsed .sidebar-toggle .toggle-icon {
    transform: rotate(180deg);
}

.sidebar-nav {
    flex: 1;
    padding: 12px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-section {
    padding: 0 8px;
    margin-bottom: 4px;
}

.nav-section-title {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 12px 12px 6px 12px;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--transition-sidebar);
}

.sidebar.collapsed .nav-section-title {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    color: var(--text-color);
    margin-bottom: 2px;
    position: relative;
    font-size: 14px;
    white-space: nowrap;
}

.nav-item:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.nav-item.active {
    background: #F0F7FF;
    color: var(--alfred-indigo);
    font-weight: 500;
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--alfred-indigo);
    border-radius: 0 3px 3px 0;
}

.nav-item.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.nav-item.disabled:hover {
    background: transparent;
    color: var(--text-color);
}

.nav-icon {
    font-size: 18px;
    width: 22px;
    min-width: 22px;
    text-align: center;
    opacity: 0.9;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.75;
}

.nav-item.active .nav-icon {
    opacity: 1;
}

.nav-item.active .nav-icon svg {
    stroke-width: 2;
}

.nav-label {
    font-size: 14px;
    font-weight: inherit;
    overflow: hidden;
    transition: opacity var(--transition-sidebar), width var(--transition-sidebar);
}

.sidebar.collapsed .nav-label {
    opacity: 0;
    width: 0;
}

.nav-badge {
    margin-left: auto;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--border-color);
    color: var(--text-secondary);
    font-weight: 500;
    transition: opacity var(--transition-sidebar);
}

.sidebar.collapsed .nav-badge {
    opacity: 0;
    width: 0;
    padding: 0;
}

.nav-item.active .nav-badge {
    background: rgba(255, 255, 255, 0.2);
    color: var(--alfred-white);
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 12px;
    border-top: 1px solid var(--border-color);
}

.sidebar-footer .btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 400;
    padding: 8px 12px;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-footer .btn:hover {
    background: var(--border-light);
    color: var(--text-color);
}

.sidebar.collapsed .sidebar-footer .btn {
    padding: 8px;
    justify-content: center;
}

.sidebar.collapsed .sidebar-footer .btn-text {
    display: none;
}

/* Tooltip for collapsed sidebar */
.sidebar.collapsed .nav-item {
    position: relative;
}

.sidebar.collapsed .nav-item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--text-primary);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 1000;
    pointer-events: none;
}

.sidebar.collapsed .nav-item::before {
    z-index: 1001;
}

.sidebar.collapsed .nav-item:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Tooltip arrow */
.sidebar.collapsed .nav-item[data-tooltip]::before {
    content: '';
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: var(--text-primary);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
}

.sidebar.collapsed .nav-item[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Keep active indicator visible but adjust position */
.sidebar.collapsed .nav-item.active::before {
    opacity: 1;
    visibility: visible;
    border: none;
    background: var(--alfred-indigo);
}

/* =====================================================
   Main Content Area
   ===================================================== */
.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0; /* Prevents flex item from overflowing */
    transition: margin-left var(--transition-sidebar);
}

/* =====================================================
   Header
   ===================================================== */
.main-header {
    height: var(--header-height);
    background: var(--alfred-white);
    border-bottom: 1px solid var(--alfred-celeste);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow-sm);
}

.header-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    flex: 1;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
}

.header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: var(--alfred-celeste);
    border-radius: 12px;
    color: var(--alfred-cobalto);
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-icon-btn:hover {
    background: var(--alfred-cobalto);
    color: white;
    transform: scale(1.05);
}

.header-icon-btn:active {
    transform: scale(0.95);
}

.header-icon-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.header-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--alfred-celeste) 0%, var(--alfred-white) 100%);
    border-radius: 24px;
    border: 1px solid var(--alfred-celeste);
}

.header-user-email {
    font-size: 13px;
    color: var(--alfred-cobalto);
    font-family: var(--font-secondary);
}

.header-user-role {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--alfred-jade) 0%, var(--alfred-verde-bosque) 100%);
    color: var(--alfred-white);
}

/* =====================================================
   Module Container
   ===================================================== */
.module-container {
    flex: 1;
    padding: 24px;
    background: linear-gradient(135deg, var(--alfred-celeste) 0%, #f8fafc 100%);
    overflow-y: auto;
}

/* =====================================================
   Cards
   ===================================================== */
.card {
    background: var(--alfred-white);
    border: 1px solid var(--alfred-celeste);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    padding: 24px;
    margin-bottom: 24px;
}

.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--alfred-indigo);
}

.card-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin-bottom: 16px;
}

/* =====================================================
   Buttons
   ===================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition-normal);
    border: none;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, var(--alfred-indigo) 100%);
    color: var(--alfred-white);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 61, 89, 0.4);
}

.btn-success {
    background: linear-gradient(135deg, var(--alfred-jade) 0%, var(--alfred-verde-bosque) 100%);
    color: var(--alfred-white);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 200, 160, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--alfred-violeta) 0%, var(--alfred-lavanda) 100%);
    color: var(--alfred-white);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(162, 94, 217, 0.4);
}

.btn-warning {
    background: linear-gradient(135deg, var(--alfred-rubio) 0%, var(--alfred-manzana) 100%);
    color: var(--alfred-white);
}

.btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(244, 201, 93, 0.4);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.btn-outline {
    background: #fff;
    border: 2px solid var(--alfred-indigo);
    color: var(--alfred-indigo);
}

.btn-outline:hover {
    background: var(--alfred-indigo);
    color: #fff;
}

.btn-danger {
    background: var(--color-error-dark);
    color: #fff;
    border: none;
}

.btn-danger:hover {
    background: #b91c1c;
}

.proposal-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* =====================================================
   Form Elements
   ===================================================== */
.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.form-input,
.form-select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--alfred-cobalto);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: #fff;
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--alfred-indigo);
    box-shadow: 0 0 0 3px rgba(0, 88, 152, 0.1);
}

.form-input:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--border-color);
}

.form-input:disabled,
.form-select:disabled {
    background: var(--border-light);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* Form select specific */
.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* =====================================================
   Summary Section
   ===================================================== */
.summary-section {
    background: linear-gradient(135deg, var(--alfred-celeste) 0%, var(--alfred-white) 100%);
    border: 2px dashed var(--alfred-indigo);
    border-radius: 16px;
    padding: 24px;
}

.summary-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--alfred-cobalto);
}

.summary-total-value {
    color: var(--alfred-jade);
}

/* =====================================================
   Login Screen
   ===================================================== */
.login-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, var(--alfred-indigo) 50%, var(--alfred-cielo) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.login-container {
    background: var(--alfred-white);
    padding: 48px;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0, 61, 89, 0.2);
    max-width: 420px;
    width: 90%;
    border: 1px solid var(--alfred-celeste);
}

.login-logo {
    height: 60px;
    width: auto;
    display: block;
    margin: 0 auto 24px;
}

.login-title {
    font-size: 28px;
    text-align: center;
    margin-bottom: 8px;
}

.login-subtitle {
    text-align: center;
    color: var(--alfred-indigo);
    margin-bottom: 8px;
}

.login-hint {
    text-align: center;
    font-size: 13px;
    color: var(--alfred-indigo);
    opacity: 0.8;
    margin-bottom: 32px;
}

.login-error {
    background: rgba(219, 89, 78, 0.1);
    border: 1px solid var(--alfred-manzana);
    color: var(--alfred-manzana);
    padding: 12px 16px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    margin-top: 16px;
    display: none;
}

.login-footer {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 24px;
}

/* =====================================================
   Animations
   ===================================================== */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* =====================================================
   Message Box (Toast)
   ===================================================== */
.message-box {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 99999;
    display: none;
    opacity: 0;
    transition: var(--transition-normal);
    font-weight: 500;
    color: var(--alfred-white);
}

.message-box.show {
    display: block;
    opacity: 1;
}

.message-box.success {
    background: linear-gradient(135deg, var(--alfred-jade) 0%, var(--alfred-verde-bosque) 100%);
}

.message-box.error {
    background: linear-gradient(135deg, var(--alfred-manzana) 0%, #c0392b 100%);
}

.message-box.warning {
    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
}

/* =====================================================
   Shared UI Components (used across modules)
   ===================================================== */

/* --- Prop buttons (shared) --- */
.prop-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.prop-btn:hover {
    border-color: var(--alfred-indigo);
    color: var(--alfred-indigo);
}
.prop-btn-primary {
    background: var(--alfred-indigo);
    border-color: var(--alfred-indigo);
    color: #fff;
}
.prop-btn-primary:hover {
    background: var(--alfred-cobalto);
    border-color: var(--alfred-cobalto);
    color: #fff;
}
.prop-btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
}
.prop-btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}
.prop-btn-danger {
    background: var(--color-error);
    border-color: var(--color-error);
    color: #fff;
}
.prop-btn-danger:hover {
    background: var(--color-error-dark);
    border-color: var(--color-error-dark);
}

/* --- Modal overlay (shared) --- */
.email-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    backdrop-filter: blur(4px);
}
.email-modal {
    background: white;
    border-radius: 16px;
    width: 95%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    animation: slideIn 0.3s ease;
}
.email-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}
.email-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--alfred-cobalto);
    display: flex;
    align-items: center;
    gap: 10px;
}
.email-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}
.email-modal-close:hover {
    background: var(--border-light);
    color: var(--text-color);
}
.email-modal-body {
    padding: 24px;
}
.email-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 0 0 16px 16px;
}
.email-form-group {
    margin-bottom: 16px;
}
.email-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 6px;
}
.email-form-group input,
.email-form-group textarea,
.email-form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    background: #fff;
}
.email-form-group input:focus,
.email-form-group textarea:focus,
.email-form-group select:focus {
    outline: none;
    border-color: var(--alfred-cobalto);
    box-shadow: 0 0 0 3px rgba(0, 61, 89, 0.1);
}
.email-form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* --- Form input (shared) --- */
.form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    font-family: inherit;
    box-sizing: border-box;
}
.form-input:focus {
    outline: none;
    border-color: var(--alfred-teal);
    box-shadow: 0 0 0 3px rgba(0, 178, 169, 0.1);
}

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

/* --- Doc filter buttons --- */
.doc-filter-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.doc-filter-btn:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
}
.doc-filter-btn.active {
    background: var(--color-purple);
    border-color: var(--color-purple);
    color: #fff;
}

/* --- Doc Library Module (dl-*) --- */
.dl-module {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 20px;
}
.dl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.dl-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.dl-title i,
.dl-title svg {
    width: 22px;
    height: 22px;
    color: var(--color-purple);
}
.dl-subtitle {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
}
.dl-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.dl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.dl-grid-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.dl-grid-state .spinner {
    margin: 0 auto;
}
.dl-grid-error {
    text-align: center;
    padding: 48px 24px;
    color: var(--color-error);
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.doc-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.doc-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--alfred-celeste);
}
.dl-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.dl-card-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.dl-cat-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dl-cat-icon svg,
.dl-cat-icon i {
    width: 18px;
    height: 18px;
}
.dl-card-name-wrap {
    min-width: 0;
}
.dl-card-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dl-card-cat {
    font-size: 11px;
    font-weight: 500;
    margin-top: 2px;
}
.dl-card-desc {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}
.dl-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.dl-tag {
    background: var(--border-light);
    color: var(--text-color);
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
}
.dl-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
}
.dl-card-date {
    font-size: 11px;
    color: var(--text-muted);
}
.dl-card-actions {
    display: flex;
    gap: 6px;
}
.prop-btn-xs {
    padding: 4px 8px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.prop-btn-xs svg,
.prop-btn-xs i {
    width: 12px;
    height: 12px;
}
.prop-btn-xs.prop-btn-danger {
    color: var(--color-error);
    border-color: #FCA5A5;
}
.prop-btn-xs.prop-btn-danger:hover {
    background: var(--color-error-bg);
}
.doc-hint {
    color: var(--text-muted);
    font-size: 11px;
    display: block;
    margin-top: 4px;
}
.text-required {
    color: var(--color-error);
}
.doc-upload-progress {
    display: none;
    padding: 10px;
    background: #F0FDF4;
    border-radius: var(--radius-sm);
    color: var(--color-success-dark);
    font-size: 13px;
    text-align: center;
}
.doc-upload-error {
    display: none;
    padding: 10px 12px;
    background: var(--color-error-bg);
    border: 1px solid #FECACA;
    border-radius: var(--radius-sm);
    color: var(--color-error-dark);
    font-size: 13px;
    margin-top: 8px;
}

/* =====================================================
   Shared Utility Classes
   ===================================================== */

/* --- Layout utilities --- */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-end { display: flex; align-items: center; justify-content: flex-end; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

/* --- Typography utilities --- */
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-primary-color { color: var(--text-primary); }
.text-brand { color: var(--alfred-indigo); }
.text-sm { font-size: 12px; }
.text-base { font-size: 14px; }
.text-lg { font-size: 16px; }
.text-xl { font-size: 18px; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; letter-spacing: 0.5px; }

/* --- Spacing utilities --- */
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }

/* --- Shared Badge System --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.badge-success {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
}
.badge-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
}
.badge-error {
    background: var(--color-error-bg);
    color: var(--color-error-dark);
}
.badge-info {
    background: var(--color-indigo-bg);
    color: var(--color-indigo);
}
.badge-neutral {
    background: var(--border-light);
    color: var(--text-secondary);
}
.badge-brand {
    background: rgba(0, 88, 152, 0.1);
    color: var(--alfred-indigo);
}
.badge-pill {
    border-radius: var(--radius-pill);
}

/* --- Shared State Classes --- */
.state-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: var(--text-muted);
    gap: 12px;
    text-align: center;
}
.state-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--alfred-indigo);
    border-radius: var(--radius-circle);
    animation: spin 0.8s linear infinite;
}
.state-loading p {
    margin: 0;
    font-size: 14px;
}

.state-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: var(--text-muted);
    gap: 12px;
    text-align: center;
}
.state-empty .state-icon {
    font-size: 40px;
    opacity: 0.5;
}
.state-empty h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
}
.state-empty p {
    margin: 0;
    font-size: 13px;
}

.state-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    color: var(--color-error);
    gap: 8px;
    text-align: center;
    font-size: 13px;
}

/* --- Shared Data Table --- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.data-table th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.data-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-color);
    vertical-align: middle;
}
.data-table tbody tr:hover {
    background: var(--bg-secondary);
}
.data-table tbody tr:last-child td {
    border-bottom: none;
}
.data-table-wrapper {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* --- Shared KPI Card --- */
.kpi-card-shared {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
}
.kpi-card-shared .kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.kpi-card-shared .kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    line-height: 1.2;
}
.kpi-card-shared .kpi-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* --- Section header (shared pattern) --- */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin: 0;
}

/* =====================================================
   Loading Indicator
   ===================================================== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 61, 89, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.loading-overlay.show {
    display: flex;
}

.loading-spinner-box {
    background: var(--alfred-white);
    padding: 32px 48px;
    border-radius: 16px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.loading-spinner-box .loading-spinner {
    margin: 0;
}

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

/* Spin class for inline icons */
.spin {
    animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* =====================================================
   Coming Soon / Placeholder Module
   ===================================================== */
.coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    padding: 48px;
}

.coming-soon-icon {
    font-size: 64px;
    margin-bottom: 24px;
}

.coming-soon-title {
    font-size: 28px;
    margin-bottom: 12px;
}

.coming-soon-description {
    font-size: 16px;
    color: var(--alfred-indigo);
    max-width: 400px;
    line-height: 1.6;
}

/* =====================================================
   Responsive Design
   ===================================================== */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
        --sidebar-width: var(--sidebar-width-expanded);
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .sidebar.collapsed {
        --sidebar-width: var(--sidebar-width-expanded);
    }
    
    .sidebar-toggle {
        display: none;
    }
    
    .main-wrapper {
        width: 100%;
    }
    
    .mobile-menu-btn {
        display: flex;
    }
    
    .header-user-email {
        display: none;
    }
    
    /* Reset collapsed styles on mobile */
    .sidebar.collapsed .nav-label,
    .sidebar.collapsed .nav-section-title,
    .sidebar.collapsed .sidebar-title,
    .sidebar.collapsed .nav-badge {
        opacity: 1;
        width: auto;
        height: auto;
        padding: initial;
    }
    
    .sidebar.collapsed .sidebar-footer .btn-text {
        display: inline;
    }
}

@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none;
    }
    
    .mobile-overlay {
        display: none !important;
    }
}

/* Large screens - sidebar always visible */
@media (min-width: 1024px) {
    .sidebar-toggle {
        display: flex;
    }
}

/* =====================================================
   Mobile Menu Button
   ===================================================== */
.mobile-menu-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: var(--alfred-celeste);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    display: none;
}

.mobile-overlay.show {
    display: block;
}

/* =====================================================
   Propuestas Module Styles
   ===================================================== */
.propuestas-module {
    max-width: 1000px;
    margin: 0 auto;
}

/* Module Tabs */
.module-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background: var(--alfred-white);
    padding: 8px;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.module-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 14px;
    color: var(--alfred-indigo);
    cursor: pointer;
    transition: var(--transition-fast);
}

.module-tab:hover {
    background: var(--alfred-celeste);
}

.module-tab.active {
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, var(--alfred-indigo) 100%);
    color: var(--alfred-white);
    box-shadow: var(--shadow-md);
}

.tab-icon {
    font-size: 18px;
}

.tab-badge {
    background: var(--alfred-celeste);
    color: var(--alfred-indigo);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.module-tab.active .tab-badge {
    background: rgba(255, 255, 255, 0.2);
    color: var(--alfred-white);
}

/* Tab Content */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

/* Wizard Steps */
.propuesta-wizard {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wizard-step {
    background: var(--alfred-white);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border: 2px solid transparent;
    transition: var(--transition-normal);
}

.wizard-step:not(.disabled):hover {
    border-color: var(--alfred-indigo);
    box-shadow: var(--shadow-md);
}

.wizard-step.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.step-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 0 20px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.step-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin: 0;
}

.step-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--alfred-indigo);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

.step-info h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin-bottom: 2px;
}

.step-info p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.step-content {
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

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

/* Search Container */
.search-container {
    position: relative;
    margin-bottom: 16px;
}

.search-input {
    width: 100%;
    padding: 14px 20px 14px 48px;
    border: 2px solid var(--alfred-celeste);
    border-radius: 12px;
    font-family: var(--font-secondary);
    font-size: 15px;
    transition: var(--transition-fast);
    background: var(--alfred-white);
}

.search-input:focus {
    outline: none;
    border-color: var(--alfred-indigo);
    box-shadow: 0 0 0 4px rgba(0, 88, 152, 0.1);
}

.search-input.hidden {
    display: none;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: 0.6;
}

/* Selector List */
.selector-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--alfred-celeste);
    border-radius: 12px;
}

.selector-list.hidden {
    display: none;
}

.selector-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: var(--transition-fast);
    border-bottom: 1px solid var(--alfred-celeste);
}

.selector-item:last-child {
    border-bottom: none;
}

.selector-item:hover {
    background: var(--alfred-celeste);
}

.item-icon {
    font-size: 24px;
}

.item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-info strong {
    font-size: 14px;
    color: var(--alfred-cobalto);
}

.item-info span {
    font-size: 12px;
    color: var(--alfred-indigo);
    opacity: 0.8;
}

.item-arrow {
    font-size: 16px;
    color: var(--alfred-indigo);
    opacity: 0.5;
}

/* Selected Item */
.selected-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: linear-gradient(135deg, var(--alfred-jade) 0%, var(--alfred-verde-bosque) 100%);
    border-radius: 12px;
    color: var(--alfred-white);
}

.selected-item.hidden {
    display: none;
}

.selected-item-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.selected-icon {
    font-size: 28px;
}

.selected-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.selected-info strong {
    font-size: 15px;
}

.selected-info span {
    font-size: 12px;
    opacity: 0.9;
}

.btn-clear {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: var(--alfred-white);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.btn-clear:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Empty & Loading States */
.empty-state,
.loading-state,
.error-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--alfred-indigo);
}

.empty-icon,
.error-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

.empty-state p,
.loading-state p,
.error-state p {
    font-size: 14px;
    margin-bottom: 8px;
}

.empty-state small,
.error-state small {
    font-size: 12px;
    opacity: 0.7;
}

.spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, var(--alfred-indigo) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    margin: 0 auto 12px;
}

.spinner-sm {
    width: 20px;
    height: 20px;
    background: conic-gradient(from 0deg, transparent 0%, var(--alfred-indigo) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    margin: 0;
}

/* Proposal Form */
.proposal-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

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

.form-textarea {
    width: 100%;
    padding: 14px;
    border: 2px solid var(--alfred-celeste);
    border-radius: 12px;
    font-family: var(--font-secondary);
    font-size: 14px;
    resize: vertical;
    min-height: 100px;
    transition: var(--transition-fast);
}

.form-textarea:focus {
    outline: none;
    border-color: var(--alfred-indigo);
    box-shadow: 0 0 0 4px rgba(0, 88, 152, 0.1);
}

/* Project Type Grid */
.project-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.type-option input {
    display: none;
}

.type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: var(--alfred-celeste);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.type-option input:checked + .type-card {
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, var(--alfred-indigo) 100%);
    color: var(--alfred-white);
    border-color: var(--alfred-cobalto);
    box-shadow: var(--shadow-md);
}

.type-card:hover {
    border-color: var(--alfred-indigo);
}

.type-icon {
    font-size: 28px;
}

.type-label {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.product-option input {
    display: none;
}

.product-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--alfred-celeste);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.product-option input:checked + .product-card {
    background: linear-gradient(135deg, var(--alfred-jade) 0%, var(--alfred-verde-bosque) 100%);
    color: var(--alfred-white);
    border-color: var(--alfred-jade);
    box-shadow: var(--shadow-md);
}

.product-card:hover {
    border-color: var(--alfred-jade);
}

.product-icon {
    font-size: 24px;
}

.product-icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-info strong {
    font-size: 14px;
}

.product-info span {
    font-size: 11px;
    opacity: 0.8;
}

/* Form Actions */
.form-actions {
    display: flex;
    justify-content: center;
    padding-top: 16px;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 16px;
}

.btn-icon {
    font-size: 18px;
}

/* Proposals List (Historial) */
.proposals-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.toolbar-filters {
    display: flex;
    gap: 12px;
}

.filter-select {
    padding: 10px 16px;
    border: 2px solid var(--alfred-celeste);
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 14px;
    background: var(--alfred-white);
    cursor: pointer;
    min-width: 180px;
}

.filter-select:focus {
    outline: none;
    border-color: var(--alfred-indigo);
}

.proposals-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.proposal-card {
    background: var(--alfred-white);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition-normal);
}

.proposal-card:hover {
    box-shadow: var(--shadow-md);
}

.proposal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--alfred-celeste) 0%, var(--alfred-white) 100%);
    border-bottom: 1px solid var(--alfred-celeste);
}

.proposal-company {
    display: flex;
    align-items: center;
    gap: 12px;
}

.company-icon {
    font-size: 28px;
}

.proposal-company strong {
    font-size: 15px;
    color: var(--alfred-cobalto);
}

.deal-name {
    display: block;
    font-size: 12px;
    color: var(--alfred-indigo);
    margin-top: 2px;
}

.proposal-status {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-pending {
    background: var(--alfred-rubio);
    color: var(--alfred-cobalto);
}

.status-progress {
    background: var(--alfred-cielo);
    color: var(--alfred-cobalto);
}

.status-completed {
    background: var(--alfred-jade);
    color: var(--alfred-white);
}

.status-cancelled {
    background: var(--alfred-manzana);
    color: var(--alfred-white);
}

.proposal-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding: 16px 20px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label {
    font-size: 11px;
    color: var(--alfred-indigo);
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.8;
}

.detail-value {
    font-size: 14px;
    color: var(--alfred-cobalto);
}

.proposal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: var(--alfred-celeste);
    font-size: 12px;
    color: var(--alfred-indigo);
}

.proposal-date,
.proposal-author {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* =====================================================
   Product Configuration Styles
   ===================================================== */
.product-option .config-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 12px;
}

.product-card {
    position: relative;
}

.product-configs {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.product-config-panel {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.config-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--alfred-celeste) 0%, var(--alfred-white) 100%);
    border-bottom: 1px solid var(--border-color);
}

.config-header .config-icon {
    font-size: 24px;
}

.config-header h4 {
    margin: 0;
    font-size: 15px;
    color: var(--alfred-cobalto);
}

.config-body {
    padding: 20px;
}

.config-section {
    margin-bottom: 20px;
}

.config-section:last-child {
    margin-bottom: 0;
}

.config-section h5 {
    font-size: 13px;
    color: var(--alfred-indigo);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-color);
}

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

.config-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.config-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.config-field .form-input,
.config-field .form-select {
    padding: 8px 12px;
    font-size: 14px;
}

.checkbox-number-field {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.checkbox-number-field .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex: 1;
}

.checkbox-number-field .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.checkbox-number-field .form-input {
    width: 100px;
}

.checkbox-number-field .form-input:disabled {
    background: var(--bg-tertiary);
    cursor: not-allowed;
}

/* =====================================================
   Device Selector in Proposals
   ===================================================== */
.devices-selector {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.devices-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.devices-selector-header h4 {
    margin: 0;
    font-size: 16px;
    color: var(--alfred-cobalto);
}

.devices-search {
    display: flex;
    gap: 12px;
    flex: 1;
    max-width: 500px;
}

.devices-search .form-input {
    flex: 1;
}

.devices-search .form-select {
    width: 200px;
}

.devices-catalog-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: white;
    margin-bottom: 16px;
}

.catalog-device-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

.catalog-device-item:last-child {
    border-bottom: none;
}

.catalog-device-item:hover {
    background: rgba(0, 88, 152, 0.04);
}

.catalog-device-item .device-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.catalog-device-item .device-ref {
    font-family: monospace;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

.catalog-device-item .device-name {
    font-size: 13px;
    color: var(--alfred-cobalto);
}

.catalog-device-item .device-brand {
    font-size: 11px;
    color: var(--text-secondary);
}

.catalog-device-item .device-add {
    display: flex;
    align-items: center;
    gap: 8px;
}

.catalog-device-item .device-qty-input {
    width: 70px;
    padding: 6px 8px;
    font-size: 13px;
    text-align: center;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.selected-devices-section {
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

.selected-devices-section h5 {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--alfred-cobalto);
}

.selected-devices-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.selected-device-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--alfred-celeste) 0%, white 100%);
    border: 1px solid var(--alfred-indigo);
    border-radius: 8px;
    gap: 12px;
}

.selected-device-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.selected-device-info .device-ref {
    font-family: monospace;
    font-size: 10px;
    color: var(--text-secondary);
}

.selected-device-info .device-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--alfred-cobalto);
}

.selected-device-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selected-device-actions .device-qty-edit {
    width: 60px;
    padding: 4px 8px;
    font-size: 13px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.selected-device-actions .qty-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.selected-device-actions .btn-remove-device {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
}

.selected-device-actions .btn-remove-device:hover {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .devices-search {
        flex-direction: column;
        max-width: none;
    }
    
    .devices-search .form-select {
        width: 100%;
    }
    
    .catalog-device-item {
        flex-direction: column;
        align-items: stretch;
    }
    
    .catalog-device-item .device-add {
        justify-content: flex-end;
        margin-top: 8px;
    }
}

/* =====================================================
   Propuestas - Products Accordion Styles
   ===================================================== */
.products-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-item {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.product-item:hover {
    border-color: var(--alfred-indigo);
}

.product-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    cursor: pointer;
    background: #fff;
    transition: background 0.15s ease;
}

.product-header:hover {
    background: var(--bg-secondary);
}

.product-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.product-icon-box img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.product-info {
    flex: 1;
    min-width: 0;
}

.product-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.product-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    background: var(--alfred-indigo);
    color: #fff;
    border-radius: 10px;
}

.product-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.4;
}

.product-toggle {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.product-item.expanded .product-toggle {
    transform: rotate(180deg);
}

.product-functions {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-top: 1px solid var(--border-color);
}

.product-item.expanded .product-functions {
    max-height: 1000px;
}

.function-list {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.function-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    gap: 12px;
    transition: all 0.15s ease;
}

.function-row:hover {
    border-color: var(--alfred-indigo);
    background: #f0f7ff;
}

.function-row.active {
    background: #f0f7ff;
    border-color: var(--alfred-indigo);
}

.function-name {
    flex: 1;
    min-width: 0;
}

.fn-label {
    font-size: 14px;
    color: var(--alfred-cobalto);
    display: flex;
    align-items: center;
    gap: 6px;
}

.fn-hw-badge {
    font-size: 14px;
    cursor: help;
}

.function-controls {
    flex-shrink: 0;
}

.qty-input {
    width: 70px;
    padding: 8px 10px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--alfred-cobalto);
    background: #fff;
    transition: border-color 0.15s ease;
}

.qty-input:focus {
    outline: none;
    border-color: var(--alfred-indigo);
}

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
    opacity: 1;
}

/* Proposal Summary */
.proposal-summary {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}

.summary-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.proposal-summary .summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}

.proposal-summary .summary-item:last-child {
    border-bottom: none;
}

/* Step Hint */
.step-hint {
    font-size: 13px;
    color: var(--alfred-cobalto);
    background: #f0f7ff;
    border: 1px solid var(--alfred-indigo);
    border-radius: 8px;
    padding: 12px 16px;
}

/* =====================================================
   Propuestas - Hardware Config Styles
   ===================================================== */
.hardware-config-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hw-config-item {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.hw-config-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.hw-config-qty {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--alfred-indigo);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.hw-config-info {
    flex: 1;
    min-width: 0;
}

.hw-config-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--alfred-cobalto);
}

.hw-config-product {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.hw-config-controls {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hw-source-toggle {
    display: flex;
    gap: 8px;
}

.hw-source-btn {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.hw-source-btn:hover {
    border-color: var(--alfred-indigo);
    color: var(--alfred-indigo);
}

.hw-source-btn.active {
    background: var(--alfred-indigo);
    border-color: var(--alfred-indigo);
    color: #fff;
}

.hw-device-selector,
.hw-protocol-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hw-device-selector.hidden,
.hw-protocol-selector.hidden {
    display: none;
}

.hw-device-select,
.hw-protocol-select {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    color: var(--alfred-cobalto);
    background: #fff;
    cursor: pointer;
}

.hw-device-select:focus,
.hw-protocol-select:focus {
    outline: none;
    border-color: var(--alfred-indigo);
}

.hw-recommended-badge {
    font-size: 12px;
    color: var(--color-warning);
    font-weight: 500;
    white-space: nowrap;
}

/* Device preview below hardware select */
.hw-device-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 6px;
}
.hw-device-preview:empty { display: none; }
.hw-device-preview-img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}
.hw-device-preview-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border-color);
}
.hw-device-preview-placeholder i { width: 22px; height: 22px; }
.hw-device-preview-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.hw-device-preview-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hw-device-preview-ref {
    font-size: 11px;
    color: var(--text-secondary);
}
.hw-device-preview-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--alfred-indigo);
    margin-top: 2px;
}

/* Hardware Summary */
.hardware-summary-box {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}

.hw-summary-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

.hw-stat {
    text-align: center;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.hw-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    line-height: 1;
}

.hw-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* Responsive */
@media (max-width: 600px) {
    .product-header {
        padding: 14px 16px;
    }
    
    .product-icon-box {
        width: 38px;
        height: 38px;
    }
    
    .function-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .function-controls {
        margin-top: 8px;
    }
    
    .qty-input {
        width: 100%;
    }
    
    .hw-source-toggle {
        flex-direction: column;
    }
    
    .hw-summary-stats {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   Functions Selector Styles
   ===================================================== */
.functions-selector {
    margin-bottom: 24px;
}

.function-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.function-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--alfred-celeste) 0%, white 100%);
    border-bottom: 1px solid var(--border-color);
}

.function-panel-header .panel-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.function-panel-header .panel-icon-emoji {
    font-size: 24px;
}

.function-panel-header h4 {
    margin: 0;
    font-size: 16px;
    color: var(--alfred-cobalto);
}

.function-panel-body {
    padding: 16px 20px;
}

.function-category {
    margin-bottom: 16px;
}

.function-category:last-child {
    margin-bottom: 0;
}

.function-category h5 {
    font-size: 13px;
    color: var(--alfred-indigo);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border-color);
}

.function-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.function-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    gap: 12px;
}

.function-item:hover {
    border-color: var(--alfred-indigo);
}

.function-info {
    flex: 1;
}

.function-label {
    font-size: 14px;
    color: var(--alfred-cobalto);
}

.function-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.function-qty {
    width: 70px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
}

.function-qty:focus {
    border-color: var(--alfred-indigo);
    outline: none;
}

.qty-unit {
    font-size: 12px;
    color: var(--text-secondary);
}

.btn-suggest-devices {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

.btn-suggest-devices:hover {
    background: var(--alfred-celeste);
    border-color: var(--alfred-indigo);
}

/* Selection Summary */
.selection-summary {
    background: var(--bg-secondary);
    border: 2px solid var(--alfred-indigo);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.selection-summary h4 {
    margin: 0 0 16px;
    font-size: 16px;
    color: var(--alfred-cobalto);
}

.selection-summary-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.summary-product {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.summary-product-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--alfred-celeste);
    border-bottom: 1px solid var(--border-color);
}

.summary-product-header .summary-icon {
    width: 20px;
    height: 20px;
}

.summary-product-header strong {
    font-size: 14px;
    color: var(--alfred-cobalto);
}

.summary-items {
    padding: 12px 16px;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-label {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
}

.summary-qty {
    font-weight: 600;
    font-size: 13px;
    color: var(--alfred-indigo);
    background: var(--alfred-celeste);
    padding: 2px 8px;
    border-radius: 4px;
}

.summary-device {
    font-size: 11px;
    color: var(--text-secondary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Suggestions Modal */
.suggestions-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 20px;
}

.suggestions-content {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 70vh;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

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

.suggestions-header h4 {
    margin: 0;
    font-size: 16px;
}

.btn-close-suggestions {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
}

.suggestions-list {
    max-height: 50vh;
    overflow-y: auto;
    padding: 12px;
}

.suggestion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    gap: 12px;
}

.suggestion-item:hover {
    border-color: var(--alfred-indigo);
    background: rgba(0, 88, 152, 0.04);
}

.suggestion-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@media (max-width: 768px) {
    .function-item {
        flex-direction: column;
        align-items: stretch;
    }
    
    .function-controls {
        justify-content: flex-end;
        margin-top: 8px;
    }
    
    .summary-item {
        flex-wrap: wrap;
    }
    
    .summary-device {
        width: 100%;
        max-width: none;
    }
}

/* =====================================================
   Pipeline Module Styles
   ===================================================== */
.pipeline-module {
    max-width: 1400px;
}

.quarter-buttons,
.view-toggle {
    display: flex;
    gap: 4px;
}

.quarter-btn,
.view-btn {
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.quarter-btn:hover,
.view-btn:hover {
    background: var(--alfred-celeste);
    border-color: var(--alfred-indigo);
}

.quarter-btn.active,
.view-btn.active {
    background: var(--alfred-indigo);
    color: white;
    border-color: var(--alfred-indigo);
}

/* Year tabs */
.year-tab {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.year-tab:hover {
    background: var(--alfred-celeste);
    border-color: var(--alfred-indigo);
    color: var(--alfred-indigo);
}

.year-tab.active {
    background: var(--alfred-indigo);
    color: white;
    border-color: var(--alfred-indigo);
}

.kpi-card {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.funnel-stages {
    /* Sin restricción de altura - se muestra todo sin scroll */
}

.conversions-table {
    /* Sin restricción de altura - se muestra todo sin scroll */
}

/* Responsive adjustments for pipeline */
@media (max-width: 1024px) {
    .pipeline-module > div:nth-child(4) {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .kpis-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .quarter-buttons {
        flex-wrap: wrap;
    }
    
    .filters-bar > div {
        flex-direction: column;
        align-items: stretch !important;
    }
    
    .filter-group {
        width: 100%;
    }
    
    #apply-filters {
        margin-left: 0 !important;
        margin-top: 8px;
    }
}

/* Pipeline realtime indicator animation */
@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* =====================================================
   Catálogo de Dispositivos - Estilo Tabla Dynamics
   ===================================================== */
.cat-module {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

/* Header tipo Inicio */
.cat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    gap: 16px;
}

.cat-header h1 {
    font-size: 28px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin: 0 0 4px 0;
    letter-spacing: -0.5px;
}

.cat-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.cat-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Botones estilo limpio */
.cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.cat-btn svg {
    width: 16px;
    height: 16px;
}

.cat-btn-primary {
    background: var(--alfred-indigo);
    color: white;
    border-color: var(--alfred-indigo);
}

.cat-btn-primary:hover {
    background: var(--alfred-cobalto);
    border-color: var(--alfred-cobalto);
}

.cat-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.cat-btn-ghost:hover {
    background: var(--border-light);
    color: var(--text-color);
}

/* KPIs tipo Metrics */
.cat-kpi-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.cat-kpi {
    flex: 1;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    text-align: center;
}

.cat-kpi-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    line-height: 1;
    margin-bottom: 4px;
}

.cat-kpi-value.cat-kpi-success { color: #22c55e; }
.cat-kpi-value.cat-kpi-warning { color: var(--color-warning); }
.cat-kpi-value.cat-kpi-danger { color: var(--color-error); }

.cat-kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Buscador tipo Metrics */
.cat-search {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 15px;
    background: #fff;
    color: var(--text-color);
    margin-bottom: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cat-search::placeholder {
    color: var(--text-muted);
}

.cat-search:focus {
    outline: none;
    border-color: var(--alfred-indigo);
    box-shadow: 0 0 0 3px rgba(0, 88, 152, 0.1);
}

/* Filtros compactos */
.cat-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.cat-filter-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: var(--text-color);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s;
    min-width: 120px;
}

.cat-filter-select:hover {
    border-color: var(--border-color);
}

.cat-filter-select:focus {
    outline: none;
    border-color: var(--alfred-indigo);
}

/* Tabla wrapper */
.cat-table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.cat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* Header */
.cat-table thead th {
    background: #f8fafc;
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    color: #475569;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    user-select: none;
}

.cat-sortable {
    cursor: pointer;
}

.cat-sortable:hover {
    background: #eef2ff;
}

.cat-sort-icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    opacity: 0.3;
}

.cat-sort-icon.active {
    opacity: 1;
    color: var(--color-indigo);
}

.cat-sort-active {
    color: var(--color-indigo);
}

.cat-sort-active .cat-sort-icon {
    opacity: 1;
    color: var(--color-indigo);
}

/* Body rows */
.cat-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-row {
    cursor: pointer;
    transition: background 0.15s;
}

.cat-row:hover {
    background: #fafbff;
}

.cat-table tbody tr:last-child td {
    border-bottom: none;
}

.cat-row-discontinued {
    opacity: 0.5;
}

.cat-row-discontinued td {
    background: #fef2f2;
}

.cat-row-discontinued:hover td {
    background: #fee2e2;
}

/* Column utilities */
.cat-col-right {
    text-align: right;
}

.cat-col-wide {
    min-width: 200px;
}

.cat-col-actions {
    width: 72px;
    text-align: right;
    white-space: nowrap;
}

/* Cell-specific styles */
.cat-cell-ref code {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 11px;
    background: var(--border-light);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-secondary);
}

.cat-gw-code {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 10px;
    background: var(--border-light);
    padding: 2px 5px;
    border-radius: 4px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.cat-cell-product {
    font-weight: 500;
    color: var(--text-primary);
}

.cat-muted {
    color: #d1d5db;
}

.cat-price-value {
    font-weight: 600;
    color: var(--color-success-dark);
    font-variant-numeric: tabular-nums;
}

/* Badges - paleta Dynamics */
.cat-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.cat-badge-green { background: #ecfdf5; color: var(--color-success-dark); }
.cat-badge-orange { background: #fff7ed; color: var(--color-warning-dark); }
.cat-badge-red { background: #fef2f2; color: var(--color-error-dark); }
.cat-badge-blue { background: #eff6ff; color: #2563eb; }
.cat-badge-purple { background: #f5f3ff; color: var(--color-purple); }
.cat-badge-gray { background: #f1f5f9; color: #64748b; }

/* Connectivity badges */
.cat-badge-zwave  { background: #f0fdf4; color: #16a34a; }
.cat-badge-lorawan { background: #eff6ff; color: #1d4ed8; }
.cat-badge-knx    { background: #fff1f2; color: #be123c; }
.cat-badge-wifi   { background: #fefce8; color: #a16207; }
.cat-badge-ip     { background: #f0f9ff; color: #0369a1; }

/* Device detail drawer */
.cat-device-drawer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1100; }
.cat-device-drawer .drawer-panel { width: 480px; transform: translateX(0); transition: none; }
.cat-drawer-field {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--bg-secondary);
    font-size: 13px;
    color: var(--text-primary);
}
.cat-drawer-field-wide { align-items: flex-start; }
.cat-drawer-label {
    flex: 0 0 130px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.cat-drawer-notes {
    font-size: 13px;
    color: var(--text-color);
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 10px 12px;
    line-height: 1.5;
    white-space: pre-wrap;
}
.cat-bc-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--alfred-indigo);
    text-decoration: none;
    font-weight: 500;
    padding: 2px 8px;
    border: 1px solid var(--alfred-indigo);
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.cat-bc-link:hover {
    background: var(--alfred-indigo);
    color: #fff;
}
.cat-bc-link i { width: 12px; height: 12px; }

/* Fetch image from BC button */
.cat-btn-fetch-image {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--alfred-indigo);
    background: #F0F7FF;
    border: 1px solid #BFD9EF;
    border-radius: 5px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.cat-btn-fetch-image:hover:not(:disabled) { background: var(--alfred-indigo); color: #fff; border-color: var(--alfred-indigo); }
.cat-btn-fetch-image:disabled { opacity: 0.6; cursor: not-allowed; }
.cat-btn-fetch-image i { width: 13px; height: 13px; }

/* Comments section */
.cat-comments-section { display: flex; flex-direction: column; gap: 12px; }
.cat-comments-list { display: flex; flex-direction: column; gap: 10px; }
.cat-comments-empty { font-size: 12px; color: var(--text-muted); padding: 4px 0; }
.cat-comments-loading { font-size: 12px; padding: 4px 0; }
.cat-comment { display: flex; gap: 10px; align-items: flex-start; }
.cat-comment-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: #E0EDFA; color: var(--alfred-indigo);
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cat-comment-body { flex: 1; min-width: 0; }
.cat-comment-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.cat-comment-author { font-size: 12px; font-weight: 600; color: var(--text-color); }
.cat-comment-date { font-size: 11px; color: var(--text-muted); flex: 1; }
.cat-comment-delete {
    background: none; border: none; cursor: pointer; padding: 1px 3px;
    color: var(--border-color); border-radius: 3px; display: flex; align-items: center;
    transition: color 0.15s;
}
.cat-comment-delete:hover { color: var(--color-error); }
.cat-comment-delete i { width: 13px; height: 13px; }
.cat-comment-text { font-size: 13px; color: var(--text-color); line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.cat-comments-input-row { display: flex; gap: 8px; align-items: flex-end; }
.cat-comment-textarea {
    flex: 1; min-height: 54px; padding: 8px 10px;
    border: 1px solid var(--border-color); border-radius: 6px;
    font-size: 13px; font-family: inherit; resize: none;
    outline: none; color: var(--text-color);
    transition: border-color 0.15s;
}
.cat-comment-textarea:focus { border-color: var(--alfred-indigo); }
.cat-comment-submit { padding: 8px 12px; flex-shrink: 0; height: 38px; }
.cat-comment-submit i { width: 15px; height: 15px; }

.cat-drawer-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: #fff;
    flex-shrink: 0;
}

/* Product image in drawer */
.cat-drawer-image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    background: var(--bg-secondary);
    border-radius: 10px;
    overflow: hidden;
    min-height: 140px;
    max-height: 200px;
}
.cat-drawer-image img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    padding: 12px;
}
.cat-drawer-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    padding: 32px;
    font-size: 12px;
}
.cat-drawer-image-placeholder i {
    width: 40px;
    height: 40px;
    opacity: 0.4;
}

/* Datasheet section */
.cat-drawer-ds-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}
.cat-drawer-ds-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-drawer-ds-link:hover { text-decoration: underline; }
.cat-drawer-ds-link i { flex-shrink: 0; width: 16px; height: 16px; }
.cat-drawer-ds-replace {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    flex-shrink: 0;
}
.cat-drawer-ds-replace:hover { border-color: var(--color-indigo); color: var(--color-indigo); }
.cat-drawer-ds-replace i { width: 12px; height: 12px; }
.cat-drawer-ds-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    transition: border-color 0.15s, color 0.15s;
    margin: 4px 0;
}
.cat-drawer-ds-upload:hover { border-color: var(--color-indigo); color: var(--color-indigo); }
.cat-drawer-ds-upload i { width: 22px; height: 22px; margin-bottom: 2px; }

.cat-product-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.cat-product-icon {
    width: 14px;
    height: 14px;
}

.cat-product-label {
    line-height: 1;
}

/* Actions in table */
.cat-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #94a3b8;
    transition: all 0.15s ease;
    opacity: 0;
}

.cat-row:hover .cat-action-btn {
    opacity: 1;
}

.cat-action-btn svg {
    width: 15px;
    height: 15px;
}

.cat-action-btn:hover {
    background: var(--border-light);
    color: var(--text-color);
}

.cat-action-danger:hover {
    background: #fee2e2;
    color: var(--color-error-dark);
}

/* Loading & empty states */
.cat-loading-cell {
    text-align: center;
    padding: 60px 20px !important;
    color: #94a3b8;
    font-size: 14px;
}

.cat-loading-cell .cat-spinner {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.cat-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top-color: var(--alfred-indigo);
    border-radius: 50%;
    animation: cat-spin 0.6s linear infinite;
}

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

.cat-empty-cell {
    text-align: center;
    padding: 60px 20px !important;
}

.cat-empty-cell svg {
    width: 48px;
    height: 48px;
    color: #d1d5db;
    margin-bottom: 16px;
}

.cat-empty-cell h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 4px 0;
}

.cat-empty-cell p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .cat-module {
        padding: 12px;
    }
    
    .cat-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .cat-header-actions {
        justify-content: stretch;
    }
    
    .cat-header-actions .cat-btn {
        flex: 1;
        justify-content: center;
    }
    
    .cat-kpi-row {
        flex-wrap: wrap;
    }
    
    .cat-kpi {
        flex: 1 1 calc(50% - 8px);
        min-width: 100px;
    }
    
    .cat-filters {
        flex-direction: column;
    }
    
    .cat-filter-select {
        width: 100%;
    }

    .cat-action-btn {
        opacity: 1;
    }
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

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

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--alfred-cobalto);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px 8px;
}

.modal-close:hover {
    color: var(--alfred-cobalto);
}

#device-form {
    padding: 24px;
}

#device-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

#device-form .form-group {
    margin-bottom: 16px;
}

#device-form .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-secondary);
}

#device-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

#device-form .checkbox-label input {
    width: 18px;
    height: 18px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
}

@media (max-width: 768px) {
    #device-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .devices-table {
        font-size: 12px;
    }
    
    .devices-table th,
    .devices-table td {
        padding: 8px 12px;
    }
}


/* =====================================================
   Pricing Module - Información Comercial
   ===================================================== */

.pricing-module {
    min-height: calc(100vh - var(--header-height) - 40px);
}

/* Tabs principales */
.pricing-tabs {
    display: flex;
    gap: 8px;
    padding: 0 0 24px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pricing-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    background: var(--border-light);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.pricing-tab:hover {
    background: var(--border-color);
    color: var(--alfred-cobalto);
}

.pricing-tab.active {
    background: var(--alfred-cobalto);
    color: white;
}

.pricing-tab .tab-icon {
    font-size: 18px;
}

/* Contenido de tabs */
.pricing-content {
    padding-top: 0;
}

.pricing-section {
    animation: fadeInUp 0.4s ease;
}

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

/* =====================================================
   Pricing Hero Sections
   ===================================================== */

.pricing-hero {
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, var(--alfred-indigo) 100%);
    border-radius: 24px;
    padding: 48px;
    margin: 24px 0;
    position: relative;
    overflow: hidden;
}

.pricing-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.pricing-hero .hero-decoration {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
}

.pricing-hero .hero-blob-1 {
    width: 400px;
    height: 400px;
    background: var(--alfred-jade);
    top: -200px;
    right: -100px;
}

.pricing-hero .hero-blob-2 {
    width: 300px;
    height: 300px;
    background: var(--alfred-violeta);
    bottom: -150px;
    left: -50px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--alfred-jade);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.hero-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    color: white;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.hero-highlight {
    background: linear-gradient(135deg, var(--alfred-jade) 0%, var(--alfred-cielo) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 24px;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--alfred-jade);
    color: var(--alfred-cobalto);
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 8px 24px rgba(0, 200, 160, 0.3);
}

.btn-hero-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 200, 160, 0.4);
}

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* =====================================================
   Inicio Section - Alfred Smart Overview
   ===================================================== */

.inicio-section {
    max-width: 100%;
}

.inicio-hero {
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, var(--alfred-cobalto) 50%, var(--alfred-indigo) 100%);
    padding: 60px 48px;
    text-align: center;
}

.inicio-hero .hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.hero-logo {
    height: 60px;
    margin-bottom: 32px;
    filter: brightness(0) invert(1);
}

.hero-title-large {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero-subtitle-large {
    font-size: 20px;
    max-width: 700px;
    margin: 0 auto 40px auto;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 36px;
    font-weight: 800;
    color: var(--alfred-jade);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

/* About Section */
.about-section {
    padding: 60px 0;
    background: white;
    border-radius: 24px;
    margin: -40px 20px 40px 20px;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.about-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
}

.about-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.about-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.about-lead {
    font-size: 18px;
    margin-bottom: 20px;
}

.about-video {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--alfred-celeste) 0%, #E0E7FF 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid var(--border-color);
}

.about-video:hover {
    transform: scale(1.02);
    box-shadow: 0 16px 40px rgba(0, 61, 89, 0.15);
}

.video-placeholder {
    text-align: center;
}

.play-icon {
    display: flex;
    width: 80px;
    height: 80px;
    background: var(--alfred-cobalto);
    color: white;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 16px auto;
    box-shadow: 0 8px 24px rgba(0, 61, 89, 0.3);
}

.video-text {
    font-weight: 600;
    color: var(--alfred-cobalto);
}

/* Process Section - Timeline */
.process-section {
    padding: 60px 20px;
    background: white;
}

.process-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.process-step {
    flex: 1;
    min-width: 180px;
    max-width: 220px;
    text-align: center;
    padding: 20px;
    position: relative;
}

.step-number {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    background: var(--alfred-jade);
    color: white;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--alfred-celeste) 0%, #E0E7FF 100%);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin: 20px auto 16px auto;
    transition: all 0.3s ease;
}

.process-step:hover .step-icon {
    transform: scale(1.1);
    box-shadow: 0 12px 32px rgba(0, 61, 89, 0.15);
}

.process-step h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--alfred-cobalto);
}

.process-step p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.process-connector {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--alfred-celeste), var(--alfred-jade));
    margin-top: 70px;
    flex-shrink: 0;
}

/* Integral Section */
.integral-section {
    padding: 60px 20px;
    background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 50%, #F0FDFA 100%);
    border-top: 4px solid var(--alfred-jade);
}

.integral-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

.integral-badge {
    display: inline-block;
    padding: 6px 14px;
    background: var(--alfred-jade);
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.integral-text h2 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--alfred-cobalto);
}

.integral-lead {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.integral-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.integral-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: var(--text-color);
}

.integral-feature .feature-icon {
    width: 24px;
    height: 24px;
    background: var(--alfred-jade);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.integral-protocols {
    background: white;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 16px 48px rgba(0, 61, 89, 0.1);
}

.integral-protocols h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: var(--alfred-cobalto);
}

.integral-protocols > p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.protocols-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.protocol-item {
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 20px 16px;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.protocol-item:hover {
    border-color: var(--alfred-jade);
    background: white;
    transform: translateY(-2px);
}

.protocol-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.protocol-logo {
    height: 36px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    margin-bottom: 12px;
    filter: grayscale(30%);
    transition: all 0.3s ease;
}

.protocol-item:hover .protocol-logo {
    filter: grayscale(0%);
    transform: scale(1.1);
}

.protocol-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    margin-bottom: 4px;
}

.protocol-desc {
    font-size: 11px;
    color: var(--text-muted);
}

/* Responsive Process & Integral */
@media (max-width: 1024px) {
    .integral-content {
        grid-template-columns: 1fr;
    }
    
    .protocols-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .process-timeline {
        flex-direction: column;
        align-items: center;
    }
    
    .process-connector {
        width: 2px;
        height: 30px;
        margin: 0;
        background: linear-gradient(180deg, var(--alfred-celeste), var(--alfred-jade));
    }
    
    .process-step {
        max-width: 100%;
    }
    
    .integral-text h2 {
        font-size: 28px;
    }
    
    .protocols-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Value Section */
.value-section {
    padding: 60px 20px;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, white 100%);
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.value-item {
    background: white;
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.value-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 61, 89, 0.1);
    border-color: var(--alfred-jade);
}

.value-icon-large {
    font-size: 48px;
    margin-bottom: 16px;
}

.value-item h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.value-item p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Sectors Section */
.sectors-section {
    padding: 60px 20px;
    background: var(--alfred-cobalto);
}

.sectors-section .section-header h2,
.sectors-section .section-header p {
    color: white;
}

.sectors-section .section-header p {
    opacity: 0.8;
}

.sectors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.sector-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.sector-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.15);
}

.sector-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.2);
}

.sector-content {
    padding: 24px;
    color: white;
}

.sector-content h3 {
    font-size: 20px;
    color: white;
    margin-bottom: 4px;
}

.sector-content > p {
    font-size: 13px;
    color: var(--alfred-jade);
    margin-bottom: 16px;
}

.sector-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sector-content li {
    font-size: 13px;
    padding: 6px 0;
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sector-content li:last-child {
    border-bottom: none;
}

.sector-content li::before {
    content: "✓ ";
    color: var(--alfred-jade);
    margin-right: 8px;
}

/* Ecosystem Section */
.ecosystem-section {
    padding: 60px 20px;
    background: white;
}

.ecosystem-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto 32px auto;
}

.ecosystem-item {
    width: 110px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 20px;
    text-align: center;
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
    cursor: pointer;
}

.ecosystem-item:hover {
    transform: translateY(-4px);
    border-color: var(--eco-color, var(--alfred-indigo));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.ecosystem-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
}

.ecosystem-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    margin-bottom: 2px;
}

.ecosystem-desc {
    font-size: 11px;
    color: var(--text-muted);
}

.ecosystem-cta {
    text-align: center;
}

.btn-explore {
    padding: 14px 32px;
    background: transparent;
    color: var(--alfred-indigo);
    border: 2px solid var(--alfred-indigo);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-explore:hover {
    background: var(--alfred-indigo);
    color: white;
}

/* Final CTA */
.final-cta {
    margin: 40px 20px;
    padding: 48px;
    background: linear-gradient(135deg, var(--alfred-jade) 0%, var(--color-success-dark) 100%);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.cta-content {
    flex: 1;
}

.cta-content h2 {
    font-size: 28px;
    color: white;
    margin-bottom: 8px;
}

.cta-content p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 24px;
}

.cta-buttons {
    display: flex;
    gap: 16px;
}

.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: white;
    color: var(--alfred-cobalto);
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

.cta-decoration {
    flex-shrink: 0;
}

.cta-logo {
    height: 80px;
    opacity: 0.3;
    filter: brightness(0) invert(1);
}

/* Responsive Inicio */
@media (max-width: 1024px) {
    .about-main {
        grid-template-columns: 1fr;
    }
    
    .value-grid,
    .sectors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .inicio-hero {
        padding: 40px 24px;
    }
    
    .hero-title-large {
        font-size: 32px;
    }
    
    .hero-subtitle-large {
        font-size: 16px;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 24px;
    }
    
    .stat-number {
        font-size: 28px;
    }
    
    .about-section {
        margin: -20px 12px 24px 12px;
        padding: 40px 20px;
    }
    
    .value-grid,
    .sectors-grid {
        grid-template-columns: 1fr;
    }
    
    .ecosystem-item {
        width: 90px;
        padding: 16px;
    }
    
    .ecosystem-icon {
        width: 32px;
        height: 32px;
    }
    
    .final-cta {
        flex-direction: column;
        text-align: center;
        padding: 32px 24px;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .cta-decoration {
        display: none;
    }
}

/* =====================================================
   Servicios Section
   ===================================================== */

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.service-card {
    background: white;
    border-radius: 20px;
    padding: 28px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    position: relative;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 61, 89, 0.12);
    border-color: var(--alfred-indigo);
}

.service-icon {
    font-size: 40px;
    margin-bottom: 16px;
}

.service-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    margin-bottom: 8px;
}

.service-description {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.5;
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-light);
}

.service-features li:last-child {
    border-bottom: none;
}

.service-features .check {
    color: var(--alfred-jade);
    font-weight: 700;
}

.service-category {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 4px 12px;
    background: var(--alfred-celeste);
    color: var(--alfred-cobalto);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

/* CTA Section */
.pricing-cta {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--alfred-celeste) 100%);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.pricing-cta h3 {
    font-size: 24px;
    margin-bottom: 8px;
}

.pricing-cta p {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--alfred-cobalto);
    color: white;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-cta:hover {
    background: var(--alfred-indigo);
    transform: translateY(-2px);
}

/* =====================================================
   Productos Section
   ===================================================== */

.productos-hero {
    background: linear-gradient(135deg, #1E293B 0%, var(--alfred-cobalto) 100%);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 28px;
    margin-bottom: 48px;
}

.product-card {
    background: white;
    border-radius: 24px;
    padding: 0;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 61, 89, 0.15);
    border-color: var(--product-accent, var(--alfred-indigo));
}

.product-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 28px 28px 0 28px;
}

.product-icon-container {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-icon-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.product-icon-fallback {
    font-size: 32px;
    font-weight: 800;
    color: var(--product-accent, var(--alfred-indigo));
}

.product-title-section {
    flex: 1;
    min-width: 0;
}

.product-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.product-category-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    padding: 16px 28px;
    margin: 0;
    border-bottom: 1px solid var(--border-light);
}

.product-benefits-section {
    padding: 20px 28px;
    flex: 1;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.4;
}

.benefit-icon {
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.benefit-text {
    color: var(--text-secondary);
}

.product-pricing-section {
    background: var(--bg-secondary);
    padding: 20px 28px;
    margin-top: auto;
}

.pricing-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 12px;
}

.pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.pricing-row:last-child {
    border-bottom: none;
}

.pricing-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.pricing-value {
    font-size: 14px;
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.pricing-value strong {
    font-size: 18px;
    font-weight: 700;
}

.pricing-value small {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}

/* Products Info Section - New Design */
.products-info-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.info-card-new {
    display: flex;
    gap: 20px;
    padding: 28px;
    background: white;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.info-card-new:hover {
    box-shadow: 0 8px 24px rgba(0, 61, 89, 0.08);
}

.info-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.info-content h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    margin: 0 0 6px 0;
}

.info-content p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Legacy info-card styles (keep for other sections) */
.info-card {
    display: flex;
    gap: 16px;
    padding: 24px;
    background: white;
    border-radius: 16px;
    border: 1px solid var(--border-color);
}

.info-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.products-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* Product Study CTA Button */
.product-study-cta {
    padding: 16px 28px 28px 28px;
}

.btn-study {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-study:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* =====================================================
   ECO Study Modal
   ===================================================== */

.study-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.study-modal-content {
    background: white;
    border-radius: 24px;
    max-width: 800px;
    width: 100%;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
}

.study-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

.study-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Study Header */
.study-header {
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, #1E293B 100%);
    color: white;
    padding: 48px 40px;
    position: relative;
    overflow: hidden;
}

.study-header::before {
    content: "⚡";
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 200px;
    opacity: 0.05;
}

.study-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-success);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.study-title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
}

.study-subtitle {
    font-size: 16px;
    color: #94A3B8;
    max-width: 500px;
}

.text-green { color: var(--color-success); }
.text-blue { color: #3B82F6; }
.text-red { color: var(--color-error); }

/* Study Project Info */
.study-project-info {
    background: white;
    padding: 20px 40px;
    border-bottom: 1px solid var(--border-color);
}

.project-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
}

.project-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.2s ease;
}

.project-input:focus {
    outline: none;
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Study Controls */
.study-controls {
    background: var(--bg-secondary);
    padding: 24px 40px;
    border-bottom: 1px solid var(--border-color);
}

.study-controls h3 {
    font-size: 13px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.study-controls h3.mt-24 {
    margin-top: 24px;
}

.controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.controls-grid-full {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.control-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.control-item-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.control-item-input label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

.input-euro {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.input-euro input {
    flex: 1;
    padding: 10px 12px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.input-euro input:focus {
    outline: none;
}

.input-euro span {
    padding: 10px 16px;
    background: var(--border-light);
    color: var(--text-secondary);
    font-weight: 600;
}

.control-checkbox {
    margin-top: 8px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-color);
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-success);
}

.control-item label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 12px;
}

.control-item input[type="range"] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--border-color);
    appearance: none;
    cursor: pointer;
}

.control-item input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-success);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.control-item:last-child input[type="range"]::-webkit-slider-thumb {
    background: #3B82F6;
}

.control-values {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

.control-current {
    font-size: 16px;
    font-weight: 700;
}

.control-current.green { color: var(--color-success); }
.control-current.blue { color: #3B82F6; }

/* Study Sections */
.study-section {
    padding: 40px;
}

.study-section h2 {
    font-size: 24px;
    margin-bottom: 24px;
    text-align: center;
}

/* Problem Section */
.study-problem {
    background: white;
}

.problem-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
}

.problem-text h2 {
    text-align: left;
    margin-bottom: 16px;
}

.problem-text p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 24px;
}

.problem-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.problem-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    color: var(--text-color);
}

.icon-red, .icon-orange {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.icon-red { background: var(--color-error-bg); }
.icon-orange { background: #FFEDD5; }

.problem-stat {
    background: #FEF2F2;
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    border: 1px solid #FECACA;
    position: relative;
}

.problem-stat .stat-label {
    display: block;
    font-size: 12px;
    color: #F87171;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
}

.problem-stat .stat-value {
    display: block;
    font-size: 56px;
    font-weight: 900;
    color: var(--color-error);
    line-height: 1;
}

.problem-stat .stat-unit {
    display: block;
    font-size: 14px;
    color: #F87171;
    margin-top: 8px;
}

.problem-stat .stat-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 32px;
    opacity: 0.3;
}

/* Solution Section */
.study-solution {
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, #1E293B 100%);
    color: white;
}

.study-solution h2 {
    color: white;
}

.solution-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.solution-step {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.solution-step:hover {
    border-color: var(--color-success);
    background: rgba(16, 185, 129, 0.1);
}

.step-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 16px auto;
}

.solution-step:hover .step-icon {
    background: var(--color-success);
}

.solution-step h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: white;
}

.solution-step p {
    font-size: 13px;
    color: #94A3B8;
    line-height: 1.5;
    margin: 0;
}

/* Economics Section */
.study-economics {
    background: var(--bg-secondary);
}

.economics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.economics-card {
    background: white;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.economics-card.green {
    border-left: 6px solid var(--color-success);
}

.economics-card.blue {
    border-left: 6px solid #3B82F6;
}

.economics-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.economics-card .card-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

.economics-card .card-header span {
    font-size: 24px;
}

.economics-card .card-value {
    margin-bottom: 8px;
}

.economics-card .card-value span {
    font-size: 40px;
    font-weight: 900;
}

.economics-card.green .card-value span { color: var(--color-success); }
.economics-card.blue .card-value span { color: #3B82F6; }

.economics-card .card-value small {
    font-size: 16px;
    color: var(--text-muted);
    font-weight: 500;
}

.economics-card > p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 16px 0;
}

.economics-card .card-footer {
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.economics-card .card-footer span {
    font-size: 13px;
    color: var(--text-secondary);
}

.economics-card .card-footer strong {
    font-size: 18px;
    color: var(--text-primary);
}

.economics-card .card-footer .noi-text {
    font-size: 12px;
    font-style: italic;
    color: var(--text-muted);
}

/* ROI Section */
.study-roi {
    background: white;
}

.roi-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    margin-bottom: 32px;
}

.roi-text {
    flex: 1;
}

.roi-text h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.roi-text p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

.roi-badge {
    display: inline-block;
    padding: 8px 16px;
    background: var(--color-success-bg);
    color: var(--color-success-dark);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}

.roi-circle {
    width: 120px;
    height: 120px;
    border: 8px solid var(--color-success);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2);
    flex-shrink: 0;
}

.roi-value {
    font-size: 36px;
    font-weight: 900;
    color: var(--color-success);
    line-height: 1;
}

.roi-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.roi-timeline {
    position: relative;
}

.timeline-bar {
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    position: relative;
}

.timeline-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 35%;
    background: linear-gradient(90deg, var(--color-success), #3B82F6);
    border-radius: 4px;
}

.timeline-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-secondary);
}

.timeline-labels .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.timeline-labels .dot.green { background: var(--color-success); }
.timeline-labels .dot.blue { background: #3B82F6; }

/* Problem Compact */
.study-problem-compact {
    background: #FEF2F2;
    padding: 24px 40px;
    border-bottom: 1px solid #FECACA;
}

.problem-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.problem-header h2 {
    font-size: 16px;
    margin: 0;
    color: #991B1B;
}

.problem-stat-inline {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-error);
}

.study-problem-compact p {
    font-size: 13px;
    color: #7F1D1D;
    margin: 0;
}

/* Investment Section */
.study-investment {
    background: white;
}

.investment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.investment-card {
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 24px;
}

.investment-card h4 {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.investment-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inv-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.inv-row:last-child {
    border-bottom: none;
}

.inv-row span:first-child {
    color: var(--text-secondary);
}

.inv-row span:last-child {
    font-weight: 600;
    color: var(--text-primary);
}

.inv-row.inv-total {
    border-top: 2px solid var(--border-color);
    padding-top: 12px;
    margin-top: 4px;
}

.inv-row.inv-total span:last-child {
    font-size: 18px;
    font-weight: 800;
    color: #3B82F6;
}

.investment-card.investment-total {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.investment-total h4 {
    color: rgba(255, 255, 255, 0.8);
}

.investment-total .total-amount {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 8px;
}

.investment-total p {
    font-size: 14px;
    opacity: 0.8;
    margin: 0;
}

/* Savings Section */
.study-savings {
    background: var(--bg-secondary);
}

.savings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.savings-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    border-top: 4px solid;
}

.savings-card.green { border-color: var(--color-success); }
.savings-card.blue { border-color: #3B82F6; }
.savings-card.purple { border-color: #8B5CF6; }

.savings-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.savings-header span {
    font-size: 24px;
}

.savings-header h4 {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    text-transform: uppercase;
}

.savings-value {
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 8px;
}

.savings-card.green .savings-value { color: var(--color-success); }
.savings-card.blue .savings-value { color: #3B82F6; }
.savings-card.purple .savings-value { color: #8B5CF6; }

.savings-value small {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

.savings-value.payback small {
    display: block;
    margin-top: 4px;
}

.savings-annual {
    font-size: 13px;
    color: var(--text-secondary);
}

.savings-annual strong {
    color: var(--text-primary);
}

/* Projection Section */
.study-projection {
    background: white;
}

.projection-table {
    background: var(--bg-secondary);
    border-radius: 16px;
    overflow: hidden;
}

.projection-header {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr;
    padding: 16px 24px;
    background: var(--text-primary);
    color: white;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.projection-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.projection-row:last-child {
    border-bottom: none;
}

.projection-row span:first-child {
    font-weight: 600;
    color: var(--text-color);
}

.projection-row .saving {
    color: var(--text-secondary);
}

.projection-row .accumulated {
    font-weight: 600;
    color: var(--text-primary);
}

.projection-row .balance {
    font-weight: 700;
}

.projection-row .balance.positive {
    color: var(--color-success);
}

.projection-row .balance.negative {
    color: var(--color-error);
}

/* Export Section */
.study-export {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, #EFF6FF 100%);
    padding: 32px 40px;
    border-top: 1px solid var(--border-color);
}

.export-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-export {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-export:hover {
    transform: translateY(-2px);
}

.btn-pdf {
    background: var(--color-error);
    color: white;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
}

.btn-pdf:hover {
    background: var(--color-error-dark);
    box-shadow: 0 12px 28px rgba(239, 68, 68, 0.4);
}

.btn-email {
    background: #3B82F6;
    color: white;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.btn-email:hover {
    background: #2563EB;
    box-shadow: 0 12px 28px rgba(59, 130, 246, 0.4);
}

/* Study Footer */
.study-footer {
    background: var(--alfred-cobalto);
    color: #64748B;
    padding: 24px 40px;
    text-align: center;
    font-size: 12px;
}

.study-footer p {
    margin: 4px 0;
}

/* Study Modal Responsive */
@media (max-width: 768px) {
    .study-modal {
        padding: 10px;
    }
    
    .study-modal-content {
        margin: 10px 0;
    }
    
    .study-header {
        padding: 32px 24px;
    }
    
    .study-title {
        font-size: 26px;
    }
    
    .study-project-info {
        padding: 16px 24px;
    }
    
    .study-controls {
        padding: 20px 24px;
    }
    
    .controls-grid,
    .control-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .study-section {
        padding: 28px 24px;
    }
    
    .problem-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .problem-content {
        grid-template-columns: 1fr;
    }
    
    .problem-stat .stat-value {
        font-size: 42px;
    }
    
    .solution-steps {
        grid-template-columns: 1fr;
    }
    
    .investment-grid,
    .economics-grid {
        grid-template-columns: 1fr;
    }
    
    .investment-total .total-amount {
        font-size: 32px;
    }
    
    .savings-grid {
        grid-template-columns: 1fr;
    }
    
    .savings-value {
        font-size: 28px;
    }
    
    .projection-header,
    .projection-row {
        grid-template-columns: 0.8fr 1fr 1fr 1fr;
        padding: 12px 16px;
        font-size: 12px;
    }
    
    .roi-content {
        flex-direction: column;
        text-align: center;
    }
    
    .roi-circle {
        width: 100px;
        height: 100px;
    }
    
    .roi-value {
        font-size: 28px;
    }
    
    .timeline-labels {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    
    .export-buttons {
        flex-direction: column;
    }
    
    .btn-export {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================
   ECO Infographic Modal - New Design
   ===================================================== */

/* ECO Infographic Container */
.eco-infographic {
    font-family: var(--font-primary);
}

/* ECO Header */
.eco-header {
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, #1E293B 100%);
    color: white;
    padding: 48px 40px;
    position: relative;
    overflow: hidden;
}

.eco-header-decoration {
    position: absolute;
    top: -20px;
    right: -20px;
    opacity: 0.08;
}

.eco-zap-icon {
    font-size: 180px;
}

.eco-zap-icon svg {
    width: 180px;
    height: 180px;
    stroke: white;
    stroke-width: 1;
}

.eco-header-content {
    position: relative;
    z-index: 1;
}

.eco-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-success);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.eco-badge svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-success);
    stroke-width: 2;
}

.eco-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
    color: white;
}

.eco-subtitle {
    font-size: 16px;
    color: #94A3B8;
    max-width: 520px;
}

.text-emerald { color: var(--color-success); }
.text-blue { color: #3B82F6; }

/* ECO Project Info */
.eco-project-info {
    background: white;
    padding: 20px 40px;
    border-bottom: 1px solid var(--border-color);
}

.eco-project-info label svg {
    width: 16px;
    height: 16px;
    stroke: #64748B;
    stroke-width: 2;
    vertical-align: middle;
    margin-right: 4px;
}

/* ECO Controls */
.eco-controls {
    background: var(--bg-secondary);
    padding: 24px 40px;
    border-bottom: 1px solid var(--border-color);
}

.eco-controls-inner {
    background: white;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-color);
}

.eco-controls-title {
    font-size: 13px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.eco-controls-title svg {
    width: 18px;
    height: 18px;
    stroke: #64748B;
    stroke-width: 2;
    gap: 8px;
}

.eco-controls-title.mt-20 {
    margin-top: 28px;
}

.eco-sliders-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.eco-slider-item {
    position: relative;
}

.eco-slider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 12px;
}

.eco-slider-icon {
    font-size: 16px;
}

.eco-slider-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.eco-slider-icon.red svg { stroke: var(--color-error); }
.eco-slider-icon.green svg { stroke: var(--color-success); }
.eco-slider-icon.blue svg { stroke: #3B82F6; }
.eco-slider-icon.orange svg { stroke: var(--color-warning); }

.eco-range {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #E2E8F0;
    outline: none;
    appearance: none;
    cursor: pointer;
}

.eco-range::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.eco-range:active::-webkit-slider-thumb {
    transform: scale(1.15);
}

.eco-range.red::-webkit-slider-thumb { background: var(--color-error); }
.eco-range.green::-webkit-slider-thumb { background: var(--color-success); }
.eco-range.blue::-webkit-slider-thumb { background: #3B82F6; }

.eco-slider-values {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.eco-current-value {
    font-size: 17px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 8px;
}

.eco-current-value.red {
    color: var(--color-error);
    background: #FEF2F2;
}

.eco-current-value.green {
    color: var(--color-success);
    background: #ECFDF5;
}

.eco-current-value.blue {
    color: #3B82F6;
    background: #EFF6FF;
}

.eco-current-value.orange {
    color: #F97316;
    background: #FFF7ED;
}

/* Editable value with inline input */
.eco-editable-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.eco-inline-input {
    width: 60px;
    border: none;
    background: transparent;
    font-size: 17px;
    font-weight: 800;
    text-align: center;
    padding: 0;
    -moz-appearance: textfield;
}

.eco-inline-input::-webkit-outer-spin-button,
.eco-inline-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.eco-inline-input:focus {
    outline: none;
    background: rgba(255,255,255,0.5);
    border-radius: 4px;
}

.eco-inline-input.blue {
    color: #3B82F6;
}

.eco-inline-input.red {
    color: var(--color-error);
}

.eco-inline-input.green {
    color: var(--color-success);
}

.eco-inline-input.orange {
    color: #F97316;
}

/* ECO Investment Inputs */
.eco-investment-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

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

.eco-input-euro {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.eco-input-euro:focus-within {
    border-color: var(--color-success);
}

.eco-input-euro input {
    flex: 1;
    padding: 10px 12px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    width: 100%;
}

.eco-input-euro input:focus {
    outline: none;
}

.eco-input-euro span {
    padding: 10px 16px;
    background: var(--border-light);
    color: var(--text-secondary);
    font-weight: 600;
}

/* Features Selector ECO */
.eco-features-selector {
    grid-column: span 2;
    margin-bottom: 16px;
}

.eco-features-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 12px;
}

.eco-features-label svg {
    width: 16px;
    height: 16px;
}

.eco-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.eco-feature-option {
    cursor: pointer;
}

.eco-feature-option input {
    display: none;
}

.eco-feature-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.eco-feature-option input:checked + .eco-feature-card {
    border-color: var(--color-success);
    background: #ECFDF5;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.eco-feature-card:hover {
    border-color: var(--color-success);
}

.eco-feature-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 10px;
    flex-shrink: 0;
}

.eco-feature-icon svg {
    width: 20px;
    height: 20px;
    color: var(--color-success);
}

.eco-feature-option input:not(:checked) + .eco-feature-card .eco-feature-icon svg {
    color: var(--text-muted);
}

.eco-feature-content {
    flex: 1;
    min-width: 0;
}

.eco-feature-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.eco-feature-desc {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
}

.eco-feature-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-success);
    flex-shrink: 0;
}

.eco-feature-price small {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
}

.eco-feature-option input:not(:checked) + .eco-feature-card .eco-feature-price {
    color: var(--text-muted);
}

/* Plan Result */
.eco-plan-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    border-radius: 10px;
    color: white;
}

.eco-plan-result-label {
    font-size: 12px;
    opacity: 0.9;
}

.eco-plan-result-name {
    font-size: 14px;
    font-weight: 700;
}

.eco-plan-result-price {
    font-size: 16px;
    font-weight: 800;
    margin-left: auto;
}

.eco-plan-result-savings {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 8px;
    border-radius: 20px;
}

.eco-checkbox-group {
    grid-column: span 2;
    margin-top: 8px;
}

.eco-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-color);
}

.eco-checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-success);
}

.eco-label-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}

.eco-label-icon svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-warning);
    stroke-width: 2;
}

/* ECO Problem Section */
.eco-problem-section {
    padding: 40px;
    background: white;
}

.eco-problem-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

.eco-problem-text h2 {
    font-size: 26px;
    font-weight: 800;
    color: #1E293B;
    margin-bottom: 16px;
    text-align: left;
}

.eco-problem-desc {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 24px;
}

.eco-highlight-red {
    font-weight: 700;
    color: var(--color-error);
    background: #FEF2F2;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #FECACA;
}

.eco-problem-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.eco-problem-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    font-size: 14px;
    color: var(--text-color);
}

.eco-problem-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.eco-problem-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.eco-problem-icon.red {
    background: var(--color-error-bg);
}

.eco-problem-icon.red svg {
    stroke: var(--color-error);
}

.eco-problem-icon.orange {
    background: #FFEDD5;
}

.eco-problem-icon.orange svg {
    stroke: var(--color-warning);
}

.eco-problem-stat {
    background: #FEF2F2;
    border-radius: 24px;
    padding: 40px 32px;
    text-align: center;
    border: 2px solid #FECACA;
    position: relative;
}

.eco-problem-stat-label {
    font-size: 12px;
    color: #F87171;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.eco-problem-stat-value {
    font-size: 64px;
    font-weight: 900;
    color: var(--color-error);
    line-height: 1;
}

.eco-problem-stat-unit {
    font-size: 15px;
    color: #F87171;
    margin-top: 8px;
    font-weight: 500;
}

.eco-problem-stat-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 36px;
    opacity: 0.3;
}

.eco-problem-stat-icon svg {
    width: 36px;
    height: 36px;
    stroke: var(--color-error);
    stroke-width: 2;
}

/* ECO Solution Section */
.eco-solution-section {
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, #1E293B 100%);
    color: white;
    padding: 48px 40px;
}

.eco-solution-title {
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 40px;
    color: white;
}

.eco-solution-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.eco-step {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.eco-step:hover {
    border-color: var(--color-success);
    background: rgba(16, 185, 129, 0.1);
}

.eco-step-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.eco-step-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
    stroke-width: 2;
    margin: 0 auto 20px auto;
    transition: background 0.3s ease;
}

.eco-step:hover .eco-step-icon {
    background: var(--color-success);
}

.eco-step h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: white;
}

.eco-step p {
    font-size: 14px;
    color: #94A3B8;
    line-height: 1.6;
    margin: 0;
}

/* ECO Section Generic */
.eco-section {
    padding: 40px;
}

.eco-section h2 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 28px;
    text-align: center;
    color: #1E293B;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.eco-section h2 svg {
    width: 24px;
    height: 24px;
    stroke: #3B82F6;
    stroke-width: 2;
}

/* ECO Investment Summary */
.eco-investment-summary {
    background: white;
}

.eco-investment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.eco-investment-card {
    background: var(--bg-secondary);
    border-radius: 20px;
    padding: 28px;
}

.eco-investment-card h4 {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.eco-investment-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eco-inv-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.eco-inv-row:last-child {
    border-bottom: none;
}

.eco-inv-row span:first-child {
    color: var(--text-secondary);
}

.eco-inv-row span:last-child {
    font-weight: 600;
    color: var(--text-primary);
}

.eco-inv-row.eco-inv-total {
    border-top: 2px solid var(--border-color);
    padding-top: 16px;
    margin-top: 8px;
}

.eco-inv-row.eco-inv-total span:last-child {
    font-size: 20px;
    font-weight: 800;
    color: #3B82F6;
}

.eco-investment-card.eco-investment-total-card {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.eco-investment-total-card h4 {
    color: rgba(255, 255, 255, 0.8);
}

.eco-total-amount {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 8px;
}

.eco-investment-total-card p {
    font-size: 15px;
    opacity: 0.85;
    margin: 0;
}

/* ECO Subscription Card */
.eco-subscription-card {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    color: white;
}

.eco-subscription-card h4 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

.eco-subscription-card #eco-plan-name-display {
    font-weight: 700;
    color: white;
}

.eco-subscription-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eco-subscription-card .eco-inv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.eco-subscription-card .eco-inv-row span:first-child {
    color: rgba(255, 255, 255, 0.8);
}

.eco-subscription-card .eco-inv-row span:last-child {
    color: white;
    font-weight: 600;
}

.eco-subscription-card .eco-inv-row.eco-inv-total {
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    padding-top: 16px;
    margin-top: 8px;
}

.eco-subscription-card .eco-inv-row.eco-inv-total span:last-child {
    font-size: 20px;
    font-weight: 800;
    color: white;
}

/* ECO Economics Section */
.eco-economics-section {
    background: var(--bg-secondary);
    background-image: radial-gradient(#CBD5E1 1px, transparent 1px);
    background-size: 20px 20px;
    padding: 48px 40px;
}

.eco-economics-title {
    font-size: 28px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 32px;
    color: #1E293B;
}

.eco-economics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.eco-economics-card.eco-card-emerald {
    grid-column: span 2;
}

.eco-economics-card {
    background: white;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.eco-card-green {
    border-left: 8px solid var(--color-success);
}

.eco-card-emerald {
    border-left: none;
    border-top: 8px solid var(--color-success-dark);
    background: linear-gradient(135deg, var(--color-success-dark) 0%, var(--color-success) 100%);
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.eco-card-emerald .eco-card-header {
    flex-shrink: 0;
    margin-bottom: 0;
}

.eco-card-emerald .eco-card-header h4 {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.eco-card-emerald .eco-card-header svg {
    color: rgba(255, 255, 255, 0.8);
}

.eco-card-emerald .eco-card-value {
    color: white;
    font-size: 42px;
    flex: 1;
    text-align: center;
    min-width: 150px;
}

.eco-card-emerald .eco-card-value small {
    color: rgba(255, 255, 255, 0.8);
}

.eco-card-emerald .eco-card-desc {
    color: rgba(255, 255, 255, 0.85);
    display: none;
}

.eco-card-emerald .eco-card-footer {
    flex-shrink: 0;
}

.eco-card-emerald .eco-noi-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.eco-value-highlight {
    font-size: 48px !important;
}

.eco-gross-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.eco-card-blue {
    border-left: 8px solid #3B82F6;
}

.eco-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.eco-card-header h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

.eco-card-header span {
    font-size: 28px;
}

.eco-card-header svg {
    width: 28px;
    height: 28px;
    stroke-width: 2;
}

.eco-card-green .eco-card-header svg {
    stroke: var(--color-success);
}

.eco-card-blue .eco-card-header svg {
    stroke: #3B82F6;
}

.eco-card-value {
    margin-bottom: 12px;
}

.eco-card-value span {
    font-size: 48px;
    font-weight: 900;
}

.eco-card-green .eco-card-value span { color: var(--color-success); }
.eco-card-blue .eco-card-value span { color: #3B82F6; }

.eco-card-value small {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 500;
}

.eco-card-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 20px 0;
}

.eco-card-footer {
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.eco-card-footer span {
    font-size: 14px;
    color: var(--text-secondary);
}

.eco-card-footer strong {
    font-size: 20px;
    color: var(--text-primary);
}

.eco-noi-badge {
    font-size: 12px !important;
    font-style: italic;
    color: var(--text-muted) !important;
    background: var(--border-light);
    padding: 6px 12px;
    border-radius: 20px;
}

/* ECO ROI Section */
.eco-roi-section {
    background: white;
    padding: 48px 40px;
}

.eco-roi-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
    background: var(--bg-secondary);
    border-radius: 24px;
    padding: 32px;
    border: 1px solid #E2E8F0;
}

.eco-roi-text {
    flex: 1;
}

.eco-roi-text h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #1E293B;
}

.eco-roi-text p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.eco-roi-badge {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
}

.eco-badge-green {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
}

.eco-badge-blue {
    background: #DBEAFE;
    color: #2563EB;
}

.eco-badge-gray {
    background: var(--border-light);
    color: var(--text-secondary);
}

.eco-roi-circle-container {
    text-align: center;
    flex-shrink: 0;
}

.eco-roi-circle {
    width: 140px;
    height: 140px;
    border: 10px solid var(--color-success);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.25);
    transition: all 0.4s ease;
}

.eco-circle-green {
    border-color: var(--color-success);
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.25);
}

.eco-circle-blue {
    border-color: #3B82F6;
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.25);
}

.eco-circle-gray {
    border-color: var(--text-muted);
    box-shadow: 0 12px 32px rgba(156, 163, 175, 0.25);
}

.eco-roi-years {
    font-size: 42px;
    font-weight: 900;
    color: var(--color-success);
    line-height: 1;
}

.eco-circle-green .eco-roi-years { color: var(--color-success); }
.eco-circle-blue .eco-roi-years { color: #3B82F6; }
.eco-circle-gray .eco-roi-years { color: var(--text-secondary); }

.eco-roi-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-top: 4px;
}

.eco-roi-caption {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 12px;
}

/* ECO Timeline */
.eco-timeline {
    position: relative;
    margin-top: 20px;
}

.eco-timeline-bar {
    height: 10px;
    background: var(--border-color);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.eco-timeline-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 35%;
    border-radius: 5px;
    transition: all 0.5s ease;
}

.eco-progress-green {
    background: linear-gradient(90deg, var(--color-success), #34D399);
}

.eco-progress-blue {
    background: linear-gradient(90deg, #3B82F6, #60A5FA);
}

.eco-progress-gray {
    background: linear-gradient(90deg, var(--text-muted), var(--border-color));
}

.eco-timeline-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-secondary);
}

.eco-timeline-point {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eco-timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.eco-timeline-dot.green { background: var(--color-success); }
.eco-timeline-dot.blue { background: #3B82F6; }

/* ECO Projection */
.eco-projection {
    background: white;
}

.eco-projection-table {
    background: var(--bg-secondary);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.eco-projection-header {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr;
    padding: 18px 28px;
    background: var(--text-primary);
    color: white;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.eco-projection-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr;
    padding: 16px 28px;
    border-bottom: 1px solid var(--border-color);
    font-size: 15px;
    transition: background 0.2s ease;
}

.eco-projection-row:hover {
    background: var(--border-light);
}

.eco-projection-row:last-child {
    border-bottom: none;
}

.eco-projection-row span:first-child {
    font-weight: 700;
    color: var(--text-color);
}

.eco-projection-row .saving {
    color: var(--text-secondary);
}

.eco-projection-row .accumulated {
    font-weight: 600;
    color: var(--text-primary);
}

.eco-projection-row .balance {
    font-weight: 800;
}

.eco-projection-row .balance.positive {
    color: var(--color-success);
}

.eco-projection-row .balance.negative {
    color: var(--color-error);
}

/* ECO Export Section */
.eco-export {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, #EFF6FF 100%);
    padding: 36px 40px;
    border-top: 1px solid var(--border-color);
}

.eco-export-buttons {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.eco-btn-export {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 36px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}

.eco-btn-export svg {
    width: 20px;
    height: 20px;
    stroke: white;
    stroke-width: 2;
}

.eco-btn-export:hover {
    transform: translateY(-3px);
}

.eco-btn-pdf {
    background: linear-gradient(135deg, var(--color-error) 0%, var(--color-error-dark) 100%);
    color: white;
    box-shadow: 0 10px 28px rgba(239, 68, 68, 0.35);
}

.eco-btn-pdf:hover {
    box-shadow: 0 14px 36px rgba(239, 68, 68, 0.45);
}

.eco-btn-email {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: white;
    box-shadow: 0 10px 28px rgba(59, 130, 246, 0.35);
}

.eco-btn-email:hover {
    box-shadow: 0 14px 36px rgba(59, 130, 246, 0.45);
}

/* ECO Footer */
.eco-footer {
    background: var(--alfred-cobalto);
    color: #64748B;
    padding: 28px 40px;
    text-align: center;
    font-size: 12px;
}

.eco-footer p {
    margin: 6px 0;
}

/* ECO Responsive */
@media (max-width: 768px) {
    .eco-header {
        padding: 32px 24px;
    }
    
    .eco-title {
        font-size: 28px;
    }
    
    .eco-controls {
        padding: 20px 24px;
    }
    
    .eco-sliders-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .eco-investment-inputs {
        grid-template-columns: 1fr;
    }
    
    .eco-checkbox-group {
        grid-column: span 1;
    }
    
    .eco-features-selector {
        grid-column: span 1;
    }
    
    .eco-features-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .eco-plan-result {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .eco-plan-result-price {
        margin-left: 0;
    }
    
    .eco-problem-section {
        padding: 28px 24px;
    }
    
    .eco-problem-content {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    
    .eco-problem-stat-value {
        font-size: 48px;
    }
    
    .eco-solution-section {
        padding: 32px 24px;
    }
    
    .eco-solution-steps {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .eco-section {
        padding: 28px 24px;
    }
    
    .eco-investment-grid,
    .eco-economics-grid {
        grid-template-columns: 1fr;
    }
    
    .eco-economics-card.eco-card-emerald {
        grid-column: span 1;
        flex-direction: column;
        text-align: center;
    }
    
    .eco-total-amount {
        font-size: 36px;
    }
    
    .eco-card-value span {
        font-size: 36px;
    }
    
    .eco-roi-section {
        padding: 28px 24px;
    }
    
    .eco-roi-content {
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }
    
    .eco-roi-circle {
        width: 120px;
        height: 120px;
    }
    
    .eco-roi-years {
        font-size: 34px;
    }
    
    .eco-timeline-labels {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .eco-projection-header,
    .eco-projection-row {
        grid-template-columns: 0.8fr 1fr 1fr 1fr;
        padding: 14px 18px;
        font-size: 13px;
    }
    
    .eco-export {
        padding: 28px 24px;
    }
    
    .eco-export-buttons {
        flex-direction: column;
    }
    
    .eco-btn-export {
        width: 100%;
        justify-content: center;
    }
    
    .eco-footer {
        padding: 20px 24px;
    }
}

/* =====================================================
   Mantenimiento Section
   ===================================================== */

.mantenimiento-hero {
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, var(--alfred-cobalto) 100%);
}

/* Value Props */
.value-props {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 48px;
}

.value-card {
    background: white;
    border-radius: 20px;
    padding: 28px;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 61, 89, 0.12);
}

.value-blue {
    border-color: rgba(0, 88, 152, 0.2);
    background: linear-gradient(to bottom, rgba(0, 88, 152, 0.05), white);
}

.value-green {
    border-color: rgba(0, 200, 160, 0.2);
    background: linear-gradient(to bottom, rgba(0, 200, 160, 0.05), white);
}

.value-purple {
    border-color: rgba(162, 94, 217, 0.2);
    background: linear-gradient(to bottom, rgba(162, 94, 217, 0.05), white);
}

.value-icon {
    font-size: 40px;
    margin-bottom: 16px;
}

.value-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.value-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 32px;
}

.section-header h2 {
    font-size: 28px;
    margin-bottom: 8px;
}

.section-header p {
    font-size: 16px;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Maintenance Tabs */
.maintenance-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.maint-tab {
    padding: 12px 24px;
    border: none;
    background: white;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.maint-tab:hover {
    background: var(--border-light);
}

.maint-tab.active {
    background: var(--alfred-indigo);
    color: white;
    box-shadow: 0 8px 24px rgba(0, 88, 152, 0.3);
}

/* Pricing Cards */
.pricing-card {
    max-width: 700px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.4s ease;
}

.pricing-card .card-header {
    padding: 32px;
    text-align: center;
}

.pricing-card .card-header h3 {
    font-size: 24px;
    color: white;
    margin-bottom: 8px;
}

.pricing-card .card-header p {
    font-size: 15px;
    opacity: 0.8;
    margin: 0;
}

.pricing-card .card-body {
    padding: 32px;
    background: white;
}

.pricing-card-dark .card-header {
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, #1E293B 100%);
}

.pricing-card-dark .card-header p {
    color: var(--alfred-cielo);
}

.pricing-card-blue .card-header {
    background: linear-gradient(135deg, var(--alfred-indigo) 0%, #0284C7 100%);
}

.pricing-card-gradient .card-header {
    background: linear-gradient(135deg, var(--text-color) 0%, var(--text-primary) 100%);
}

/* Price Display */
.price-display {
    text-align: center;
    margin-bottom: 32px;
}

.price-amount {
    font-size: 56px;
    font-weight: 800;
    color: var(--alfred-cobalto);
}

.price-unit {
    display: block;
    font-size: 15px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Tier Table */
.tier-table {
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.tier-table h4 {
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.tier-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.tier-row:last-child {
    border-bottom: none;
}

.tier-range {
    color: var(--text-secondary);
    font-size: 14px;
}

.tier-price {
    font-weight: 700;
    font-size: 16px;
    color: var(--alfred-cobalto);
}

.tier-price.tier-discount {
    color: var(--alfred-jade);
}

.tier-price small {
    font-weight: 400;
    font-size: 12px;
    color: var(--text-muted);
}

/* Includes List */
.includes-list {
    margin-bottom: 24px;
}

.include-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
}

.include-check {
    color: var(--alfred-jade);
    font-weight: 700;
    font-size: 16px;
}

.include-item span:last-child {
    font-size: 14px;
    color: var(--text-color);
}

.unit-definition {
    background: var(--alfred-celeste);
    padding: 16px;
    border-radius: 12px;
    font-size: 14px;
    color: var(--alfred-cobalto);
}

/* Add-ons Grid */
.addons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.addon-box {
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 24px;
}

.addon-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.addon-icon {
    font-size: 28px;
}

.addon-header h4 {
    font-size: 18px;
    margin: 0;
}

.addon-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.addon-tiers {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}

.addon-tier {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
}

.addon-tier span:first-child {
    color: var(--text-secondary);
}

.addon-tier strong {
    color: var(--alfred-cobalto);
}

.addon-note {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(255, 170, 51, 0.1);
    border-radius: 8px;
    font-size: 12px;
    color: #B45309;
}

/* Ad Hoc Content */
.adhoc-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.adhoc-cases h4 {
    font-size: 18px;
    margin-bottom: 16px;
}

.adhoc-cases ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.adhoc-cases li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.adhoc-cases .arrow {
    color: var(--alfred-indigo);
    font-weight: 700;
}

.adhoc-solution h4 {
    font-size: 14px;
    color: var(--alfred-indigo);
    margin-bottom: 12px;
}

.solution-box {
    background: linear-gradient(135deg, rgba(0, 88, 152, 0.05) 0%, rgba(0, 200, 160, 0.05) 100%);
    border: 1px solid rgba(0, 88, 152, 0.2);
    border-radius: 16px;
    padding: 24px;
}

.solution-title {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--alfred-indigo);
    margin-bottom: 12px;
}

.solution-box p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.btn-consult {
    display: block;
    width: 100%;
    padding: 12px;
    background: var(--alfred-indigo);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-consult:hover {
    background: var(--alfred-cobalto);
}

/* =====================================================
   Calculator Section
   ===================================================== */

.calculator-section {
    margin: 48px 0;
    padding: 48px 0;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, white 100%);
    border-radius: 24px;
}

.calculator-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}

.calc-inputs {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
}

.calc-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
}

.calc-icon {
    font-size: 40px;
}

.calc-header h3 {
    font-size: 24px;
    margin: 0 0 4px 0;
}

.calc-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.calc-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.calc-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
}

.calc-toggle {
    display: flex;
    gap: 12px;
}

.toggle-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border: 2px solid var(--border-color);
    background: white;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-btn:hover {
    border-color: var(--border-color);
}

.toggle-btn.active {
    border-color: var(--alfred-indigo);
    background: rgba(0, 88, 152, 0.05);
    color: var(--alfred-indigo);
}

.calc-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.2s ease;
}

.calc-input:focus {
    outline: none;
    border-color: var(--alfred-indigo);
    box-shadow: 0 0 0 4px rgba(0, 88, 152, 0.1);
}

.calc-hint {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

.calc-extras {
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.extras-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    margin-bottom: 12px;
    display: block;
}

.extras-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.extra-field label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: block;
}

.calc-input-sm {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.calc-input-sm:focus {
    outline: none;
    border-color: var(--alfred-indigo);
}

/* Calculator Result */
.calc-result {
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, var(--alfred-cobalto) 100%);
    border-radius: 24px;
    padding: 32px;
    color: white;
    position: relative;
    overflow: hidden;
}

.result-decoration {
    position: absolute;
    width: 300px;
    height: 300px;
    background: var(--alfred-indigo);
    border-radius: 50%;
    top: -150px;
    right: -100px;
    opacity: 0.3;
    filter: blur(60px);
}

.result-title {
    font-size: 18px;
    color: var(--alfred-cielo);
    margin-bottom: 24px;
    position: relative;
}

.result-breakdown {
    position: relative;
    margin-bottom: 24px;
}

.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.result-label strong {
    display: block;
    font-size: 15px;
}

.result-label span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.result-value {
    text-align: right;
    font-size: 18px;
    font-weight: 700;
}

.result-value small {
    font-weight: 400;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.result-total {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    backdrop-filter: blur(10px);
    position: relative;
    margin-bottom: 24px;
}

.total-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--alfred-cielo);
    margin-bottom: 8px;
}

.total-value {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -1px;
}

.total-currency {
    font-size: 24px;
    font-weight: 600;
}

.total-note {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 12px;
}

.btn-request-quote {
    width: 100%;
    padding: 16px;
    background: var(--alfred-jade);
    color: var(--alfred-cobalto);
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 200, 160, 0.3);
}

.btn-request-quote:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 200, 160, 0.4);
}

/* =====================================================
   FAQ Section
   ===================================================== */

.faq-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 48px 0;
}

.faq-section h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 32px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-color);
}

.faq-question {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin-bottom: 12px;
}

.faq-icon {
    color: var(--alfred-indigo);
}

.faq-answer {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    padding-left: 32px;
}

.faq-answer strong {
    color: var(--alfred-cobalto);
}

/* =====================================================
   Plataforma Section
   ===================================================== */

.plataforma-hero {
    background: linear-gradient(135deg, var(--alfred-violeta) 0%, var(--alfred-indigo) 100%);
}

.packs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.pack-card {
    background: white;
    border-radius: 20px;
    padding: 28px;
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.pack-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 61, 89, 0.12);
}

.pack-gray { border-color: var(--border-color); }
.pack-blue { border-color: rgba(0, 88, 152, 0.3); }
.pack-green { border-color: rgba(0, 200, 160, 0.3); }
.pack-purple { border-color: rgba(162, 94, 217, 0.3); }
.pack-orange { border-color: rgba(255, 170, 51, 0.3); }

.pack-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.pack-icon {
    font-size: 32px;
}

.pack-name {
    font-size: 18px;
    margin: 0;
}

.pack-price {
    margin-bottom: 16px;
}

.pack-price .price-value {
    font-size: 36px;
    font-weight: 800;
    color: var(--alfred-cobalto);
}

.pack-price .price-period {
    font-size: 14px;
    color: var(--text-secondary);
}

.pack-price .price-free {
    font-size: 24px;
    font-weight: 700;
    color: var(--alfred-jade);
}

.pack-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.5;
}

.pack-components {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.pack-components h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.component-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border-color);
}

.component-row:last-child {
    border-bottom: none;
}

.comp-name {
    color: var(--text-secondary);
}

.comp-value {
    font-weight: 600;
    color: var(--alfred-cobalto);
}

.pack-extras {
    padding-top: 12px;
}

.pack-extras h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.extra-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.extra-row span:last-child {
    color: var(--alfred-mango);
    font-weight: 600;
}

/* Platform Notes */
.platform-notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.note-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: white;
    border-radius: 16px;
    border: 1px solid var(--border-color);
}

.note-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.note-card strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.note-card p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

/* =====================================================
   Pricing Module - Responsive
   ===================================================== */

@media (max-width: 1024px) {
    .calculator-container {
        grid-template-columns: 1fr;
    }
    
    .adhoc-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .pricing-tabs {
        padding-bottom: 16px;
    }
    
    .pricing-tab {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .pricing-tab .tab-label {
        display: none;
    }
    
    .pricing-tab .tab-icon {
        font-size: 20px;
    }
    
    .pricing-hero {
        padding: 32px 24px;
        margin: 16px 0;
    }
    
    .hero-title {
        font-size: 28px;
    }
    
    .hero-subtitle {
        font-size: 15px;
    }
    
    .hero-actions {
        flex-direction: column;
    }
    
    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .services-grid,
    .products-grid,
    .value-props,
    .packs-grid,
    .products-info-section {
        grid-template-columns: 1fr;
    }
    
    .product-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .product-icon-container {
        width: 60px;
        height: 60px;
    }
    
    .product-icon-img {
        width: 32px;
        height: 32px;
    }
    
    .maintenance-tabs {
        flex-direction: column;
        align-items: stretch;
    }
    
    .maint-tab {
        text-align: center;
    }
    
    .pricing-card {
        margin: 0 -8px;
        border-radius: 16px;
    }
    
    .calc-inputs,
    .calc-result {
        padding: 24px;
    }
    
    .extras-grid {
        grid-template-columns: 1fr;
    }
    
    .total-value {
        font-size: 36px;
    }
    
    .faq-question {
        font-size: 14px;
    }
    
    .faq-answer {
        padding-left: 0;
    }
}

/* === SOLUCIONES === */
.soluciones-hero { background: linear-gradient(135deg, var(--color-indigo) 0%, #8B5CF6 50%, #A855F7 100%); }
.solutions-filters { background: white; border-radius: 16px; padding: 24px; margin: 24px 0; box-shadow: var(--shadow-sm); }
.filters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); }
.filters-header h3 { font-size: 16px; font-weight: 600; color: var(--alfred-cobalto); display: flex; align-items: center; gap: 8px; }
.btn-clear-filters { background: transparent; border: 1px solid var(--border-color); padding: 8px 16px; border-radius: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); }
.btn-clear-filters:hover:not(:disabled) { background: var(--border-light); border-color: var(--border-color); color: var(--alfred-cobalto); }
.btn-clear-filters:disabled { opacity: 0.5; cursor: not-allowed; }
.filters-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.filter-group { display: flex; flex-direction: column; gap: 10px; }
.filter-label { font-size: 13px; font-weight: 600; color: var(--alfred-cobalto); display: flex; align-items: center; gap: 6px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--border-light); border: 1px solid var(--border-color); border-radius: 20px; font-size: 12px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); }
.filter-chip:hover { background: var(--border-color); border-color: var(--border-color); color: var(--alfred-cobalto); }
.filter-chip.active { background: var(--alfred-cobalto); border-color: var(--alfred-cobalto); color: white; }
.solutions-results-count { display: flex; align-items: center; gap: 8px; padding: 12px 0; margin-bottom: 8px; }
.results-number { font-size: 24px; font-weight: 700; color: var(--alfred-cobalto); }
.results-text { font-size: 14px; color: var(--text-secondary); }
.results-filtered { font-size: 12px; color: #8B5CF6; background: var(--color-purple-bg); padding: 4px 10px; border-radius: 12px; }
.solutions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.solution-card { background: white; border-radius: 16px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); transition: all var(--transition-normal); display: flex; flex-direction: column; }
.solution-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--solution-color, var(--color-indigo)); }
.solution-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.solution-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.solution-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.solution-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 8px; border-radius: 6px; background: var(--border-light); color: var(--text-secondary); }
.solution-badge-type { background: var(--color-purple-bg); color: var(--color-purple); }
.solution-name { font-size: 20px; font-weight: 700; color: var(--alfred-cobalto); margin-bottom: 8px; }
.solution-description { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 16px; flex-grow: 1; }
.solution-products { margin-bottom: 12px; }
.products-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 8px; display: block; }
.products-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.product-chip { font-size: 11px; font-weight: 600; padding: 4px 10px; background: var(--alfred-celeste); color: var(--alfred-cobalto); border-radius: 6px; }
.solution-certifications { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.cert-tag { font-size: 11px; font-weight: 500; padding: 4px 8px; background: var(--color-success-bg); color: var(--color-success-dark); border-radius: 6px; }
.solution-card-actions { margin-top: auto; padding-top: 16px; }
.btn-solution-detail { width: 100%; padding: 12px 20px; background: var(--solution-color, var(--alfred-cobalto)); color: white; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all var(--transition-fast); }
.btn-solution-detail:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn-solution-detail .arrow { transition: transform var(--transition-fast); }
.btn-solution-detail:hover .arrow { transform: translateX(4px); }
.solutions-empty { grid-column: 1 / -1; text-align: center; padding: 60px 40px; background: var(--bg-secondary); border-radius: 16px; border: 2px dashed var(--border-color); }
.empty-icon { font-size: 48px; margin-bottom: 16px; }
.solutions-empty h3 { font-size: 18px; color: var(--alfred-cobalto); margin-bottom: 8px; }
.solutions-empty p { color: var(--text-secondary); margin-bottom: 20px; }
.btn-clear-filters-empty { background: var(--alfred-cobalto); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.solutions-cta { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--color-purple-bg) 100%); border-radius: 20px; padding: 40px; text-align: center; }
.solutions-cta h3 { font-size: 24px; color: var(--alfred-cobalto); margin-bottom: 8px; }
.solutions-cta p { color: var(--text-secondary); margin-bottom: 24px; }
.btn-cta-solutions { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: #8B5CF6; color: white; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; transition: all var(--transition-fast); }
.btn-cta-solutions:hover { background: var(--color-purple); transform: translateY(-2px); }

/* Detalle Solución */
.solution-detail-page { animation: fadeInUp 0.4s ease; }
.btn-back-to-solutions { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: white; border: 1px solid var(--border-color); border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; margin-bottom: 20px; transition: all var(--transition-fast); }
.btn-back-to-solutions:hover { background: var(--border-light); color: var(--alfred-cobalto); }
.solution-detail-hero { position: relative; border-radius: 24px; padding: 48px; margin-bottom: 32px; overflow: hidden; background: var(--solution-color, var(--color-indigo)); }
.detail-hero-bg { position: absolute; top: 0; right: 0; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%); transform: translate(30%, -30%); }
.detail-hero-content { position: relative; z-index: 2; display: flex; align-items: center; gap: 32px; }
.detail-hero-icon { width: 100px; height: 100px; background: rgba(255,255,255,0.2); border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 48px; flex-shrink: 0; }
.detail-hero-text { flex-grow: 1; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.detail-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255,255,255,0.2); border-radius: 20px; font-size: 12px; font-weight: 600; color: white; }
.detail-title { font-size: 36px; font-weight: 700; color: white; margin-bottom: 12px; }
.detail-subtitle { font-size: 16px; color: rgba(255,255,255,0.9); line-height: 1.6; max-width: 600px; }
.solution-detail-content { display: flex; flex-direction: column; gap: 32px; }
.detail-section { background: white; border-radius: 16px; padding: 32px; box-shadow: var(--shadow-sm); }
.detail-section h2 { font-size: 20px; color: var(--alfred-cobalto); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.detail-challenge, .detail-solution { display: flex; gap: 24px; align-items: flex-start; }
.section-icon { width: 56px; height: 56px; background: var(--border-light); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
.detail-challenge .section-icon { background: var(--color-warning-bg); }
.detail-solution .section-icon { background: var(--color-success-bg); }
.section-content { flex-grow: 1; }
.section-content h2 { margin-bottom: 12px; }
.section-content p { font-size: 15px; color: var(--text-secondary); line-height: 1.7; }
.benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.benefit-item { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: var(--bg-secondary); border-radius: 12px; }
.benefit-number { width: 28px; height: 28px; background: var(--alfred-cobalto); color: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.benefit-text { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.products-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.product-detail-card { background: var(--bg-secondary); border-radius: 12px; padding: 20px; border-left: 4px solid var(--product-color, var(--alfred-cobalto)); }
.product-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.product-detail-icon { width: 36px; height: 36px; }
.product-detail-fallback { width: 36px; height: 36px; background: var(--product-color, var(--alfred-cobalto)); color: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
.product-detail-card h4 { font-size: 16px; font-weight: 700; color: var(--alfred-cobalto); }
.product-detail-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.use-cases-list { display: flex; flex-direction: column; gap: 12px; }
.use-case-item { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--bg-secondary); border-radius: 10px; }
.use-case-check { width: 24px; height: 24px; background: var(--color-success); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.use-case-item span:last-child { font-size: 14px; color: var(--text-secondary); }
.certifications-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.certification-detail-card { background: linear-gradient(135deg, var(--color-success-bg) 0%, #A7F3D0 100%); border-radius: 12px; padding: 20px; }
.certification-detail-card h4 { font-size: 16px; font-weight: 700; color: var(--color-success-dark); margin-bottom: 8px; }
.certification-detail-card p { font-size: 13px; color: var(--color-success-dark); line-height: 1.5; }
.detail-cta { background: linear-gradient(135deg, var(--alfred-cobalto) 0%, var(--alfred-indigo) 100%); border-radius: 20px; padding: 40px; text-align: center; }
.detail-cta-content h3 { font-size: 24px; color: white; margin-bottom: 8px; }
.detail-cta-content p { color: rgba(255,255,255,0.8); margin-bottom: 24px; }
.detail-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.detail-cta .btn-cta-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: white; color: var(--alfred-cobalto); border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; transition: all var(--transition-fast); }
.detail-cta .btn-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.detail-cta .btn-cta-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: transparent; color: white; border: 2px solid rgba(255,255,255,0.4); border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); }
.detail-cta .btn-cta-secondary:hover { background: rgba(255,255,255,0.1); border-color: white; }

@media (max-width: 1024px) {
    .solutions-grid { grid-template-columns: repeat(2, 1fr); }
    .products-detail-grid { grid-template-columns: repeat(2, 1fr); }
    .benefits-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .filters-grid { grid-template-columns: 1fr; }
    .solutions-grid { grid-template-columns: 1fr; }
    .detail-hero-content { flex-direction: column; text-align: center; }
    .detail-hero-icon { margin: 0 auto; }
    .detail-badges { justify-content: center; }
    .detail-title { font-size: 28px; }
    .detail-challenge, .detail-solution { flex-direction: column; }
    .section-icon { margin: 0 auto; }
    .section-content { text-align: center; }
    .products-detail-grid, .certifications-detail-grid { grid-template-columns: 1fr; }
    .detail-cta-buttons { flex-direction: column; }
    .detail-cta .btn-cta-primary, .detail-cta .btn-cta-secondary { width: 100%; justify-content: center; }
}

/* =====================================================
   Dynamics Mapping Section (Client Detail)
   ===================================================== */

/* Empty state */
.dynamics-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}
.dynamics-empty .empty-icon {
    width: 48px;
    height: 48px;
    color: var(--border-color);
    margin-bottom: 16px;
}
.dynamics-empty p {
    margin: 0 0 8px 0;
    font-size: 14px;
}
.dynamics-empty .empty-hint {
    font-size: 13px;
    color: var(--text-muted);
}

/* Companies list */
.dynamics-companies-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dynamics-company-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.2s ease;
}
.dynamics-company-card:hover {
    background: var(--border-light);
    border-color: var(--border-color);
}
.dynamics-company-card.is-primary {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-color: #93C5FD;
}

.dynamics-company-info {
    flex: 1;
    min-width: 0;
}
.dynamics-company-main {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.dynamics-company-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--alfred-cobalto);
}
.dynamics-primary-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 8px;
    background: var(--alfred-indigo);
    color: white;
    border-radius: 4px;
}

.dynamics-company-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.dynamics-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}
.dynamics-meta-item .icon-inline {
    width: 14px;
    height: 14px;
}
.dynamics-rel-type {
    background: var(--border-color);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.dynamics-company-notes {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

.dynamics-company-actions {
    flex-shrink: 0;
    margin-left: 16px;
}
.btn-unlink-dynamics {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-unlink-dynamics:hover {
    background: var(--color-error-bg);
    border-color: #FECACA;
    color: var(--color-error-dark);
}
.btn-unlink-dynamics svg {
    width: 18px;
    height: 18px;
}

/* Link button */
.btn-add-small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--alfred-indigo);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-add-small:hover {
    background: var(--alfred-cobalto);
}
.btn-add-small svg {
    width: 16px;
    height: 16px;
}

/* Modal de vinculación */
.dynamics-link-modal {
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
}

.dynamics-search-wrapper {
    position: relative;
}
.dynamics-search-loading {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.dynamics-search-results {
    margin-top: 8px;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: white;
}
.dynamics-search-hint,
.dynamics-search-empty,
.dynamics-search-error {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}
.dynamics-search-error {
    color: var(--color-error-dark);
}

.dynamics-search-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.15s ease;
}
.dynamics-search-item:last-child {
    border-bottom: none;
}
.dynamics-search-item:hover {
    background: var(--bg-secondary);
}
.dynamics-search-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin-bottom: 4px;
}
.dynamics-search-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}
.dynamics-search-item-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Selected company */
.dynamics-selected-company {
    margin-top: 20px;
    padding: 16px;
    background: #F0FDF4;
    border: 1px solid #86EFAC;
    border-radius: 12px;
}
.dynamics-selected-company h4 {
    font-size: 13px;
    font-weight: 600;
    color: #166534;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dynamics-selected-card {
    background: white;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.dynamics-selected-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    margin-bottom: 8px;
}
.dynamics-selected-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}
.dynamics-selected-meta strong {
    color: var(--text-primary);
}

/* =====================================================
   Dynamics badges en el header del cliente
   ===================================================== */
.client-dynamics-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.dynamics-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}
.dynamics-label .icon-inline {
    width: 14px;
    height: 14px;
    color: var(--color-indigo);
}
.dynamics-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.dynamics-loading-inline,
.dynamics-error {
    font-size: 12px;
    color: var(--text-muted);
}
.dynamics-error {
    color: var(--color-error-dark);
}
.dynamics-no-link {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
}
.dynamics-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    border: 1px solid #C7D2FE;
    border-radius: 20px;
    padding: 5px 10px 5px 12px;
    font-size: 13px;
    color: #4338CA;
    font-weight: 500;
    transition: all 0.2s ease;
}
.dynamics-badge:hover {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    border-color: #A5B4FC;
}
.dynamics-badge.is-primary {
    background: linear-gradient(135deg, var(--color-warning-bg) 0%, #FDE68A 100%);
    border-color: #FCD34D;
    color: #92400E;
}
.dynamics-badge-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dynamics-badge-primary {
    color: var(--color-warning-dark);
    font-size: 11px;
}
.dynamics-badge-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: rgba(67, 56, 202, 0.15);
    color: #4338CA;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: all 0.15s ease;
}
.dynamics-badge-remove:hover {
    background: var(--color-error);
    color: white;
}
.dynamics-badge.is-primary .dynamics-badge-remove {
    background: rgba(146, 64, 14, 0.15);
    color: #92400E;
}
.dynamics-badge.is-primary .dynamics-badge-remove:hover {
    background: var(--color-error);
    color: white;
}
.btn-link-dynamics-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px dashed #C7D2FE;
    background: transparent;
    border-radius: 50%;
    color: var(--color-indigo);
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-link-dynamics-header:hover {
    background: #EEF2FF;
    border-color: var(--color-indigo);
    border-style: solid;
}
.btn-link-dynamics-header svg {
    width: 14px;
    height: 14px;
}

/* Dynamics Detail Drawer */
.dynamics-detail-drawer-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 61, 89, 0.45);
    z-index: 1100;
    display: flex;
    justify-content: flex-end;
    animation: fadeIn 0.2s ease;
}
.dynamics-detail-drawer {
    width: 100%;
    max-width: 480px;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
}
.dynamics-detail-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--alfred-cobalto, #003d59) 0%, var(--color-indigo, #4338CA) 100%);
    flex-shrink: 0;
}
.dynamics-detail-drawer-header-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.dynamics-detail-drawer-icon {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.dynamics-detail-drawer-icon svg {
    width: 22px;
    height: 22px;
}
.dynamics-detail-drawer-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}
.dynamics-detail-drawer-number {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}
.dynamics-detail-drawer-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.dynamics-detail-drawer-close:hover {
    background: rgba(255,255,255,0.3);
}
.dynamics-detail-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}
.dynamics-detail-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-indigo, #4338CA);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light, #E5E7EB);
}
.dynamics-bc-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary, #6B7280);
    font-size: 13px;
    padding: 12px 0;
}
.dynamics-bc-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    color: #B91C1C;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 12px;
}
.dynamics-bc-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dynamics-bc-row {
    display: flex;
    gap: 10px;
    font-size: 13px;
    align-items: baseline;
}
.dynamics-bc-label {
    color: var(--text-secondary, #6B7280);
    font-weight: 500;
    min-width: 140px;
    flex-shrink: 0;
}
.dynamics-bc-value {
    color: var(--text-primary, #111827);
    word-break: break-word;
}
.dynamics-bc-value a {
    color: var(--color-indigo, #4338CA);
    text-decoration: underline;
}
.dynamics-bc-empty {
    color: var(--text-tertiary, #9CA3AF);
}
.dynamics-bc-overdue {
    color: #B91C1C;
    font-weight: 600;
}
.dynamics-bc-error {
    color: var(--color-error, #DC2626);
    font-size: 13px;
    padding: 8px 0;
}
.dynamics-mapping-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dynamics-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.dynamics-form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.dynamics-form-group input[type="text"],
.dynamics-form-group select,
.dynamics-form-group textarea {
    padding: 8px 12px;
    border: 1px solid var(--border-color, #D1D5DB);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary, #111827);
    background: #fff;
    transition: border-color 0.15s;
    font-family: inherit;
}
.dynamics-form-group input[type="text"]:focus,
.dynamics-form-group select:focus,
.dynamics-form-group textarea:focus {
    outline: none;
    border-color: var(--color-indigo, #4338CA);
    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.1);
}
.dynamics-form-group textarea {
    resize: vertical;
    min-height: 70px;
}
.dynamics-form-group--inline {
    flex-direction: row;
    align-items: center;
}
.dynamics-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-primary, #111827) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.dynamics-toggle-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-indigo, #4338CA);
    cursor: pointer;
}
.dynamics-detail-drawer-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color, #E5E7EB);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    background: #fff;
}

/* ═══════════════════════════════════════════════════════════
   ENGAGEMENT DRAWER (calls, meetings, notes – quick action + detail)
   Follows the same pattern as dynamics-detail-drawer
   ═══════════════════════════════════════════════════════════ */
.eng-drawer-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 61, 89, 0.45);
    z-index: 1100;
    display: flex;
    justify-content: flex-end;
    animation: fadeIn 0.2s ease;
}
.eng-drawer-panel {
    width: 100%;
    max-width: 460px;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
}
.eng-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color, #E5E7EB);
    flex-shrink: 0;
}
.eng-drawer-header--call    { border-bottom-color: #3B82F6; }
.eng-drawer-header--meeting { border-bottom-color: #8B5CF6; }
.eng-drawer-header--note    { border-bottom-color: #6B7280; }
.eng-drawer-header--email   { border-bottom-color: #10B981; }
.eng-drawer-header--task    { border-bottom-color: #F59E0B; }
.eng-drawer-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.eng-drawer-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.eng-drawer-header-icon--call    { background: #EFF6FF; color: #3B82F6; }
.eng-drawer-header-icon--meeting { background: #F5F3FF; color: #8B5CF6; }
.eng-drawer-header-icon--note    { background: #F3F4F6; color: #6B7280; }
.eng-drawer-header-icon--email   { background: #ECFDF5; color: #10B981; }
.eng-drawer-header-icon--task    { background: #FFFBEB; color: #F59E0B; }
.eng-drawer-header-icon svg {
    width: 18px;
    height: 18px;
}
.eng-drawer-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #111827);
}
.eng-drawer-close {
    background: var(--bg-tertiary, #F3F4F6);
    border: none;
    color: var(--text-secondary, #6B7280);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.eng-drawer-close:hover {
    background: var(--bg-quaternary, #E5E7EB);
    color: var(--text-primary, #111827);
}
.eng-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}
.eng-drawer-date {
    font-size: 12px;
    color: var(--text-muted, #9CA3AF);
    margin-bottom: 16px;
}
.eng-drawer-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary, #6B7280);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light, #E5E7EB);
}
.eng-drawer-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.eng-drawer-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.eng-drawer-form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #6B7280);
}
.eng-drawer-form-group input[type="text"],
.eng-drawer-form-group input[type="datetime-local"],
.eng-drawer-form-group select,
.eng-drawer-form-group textarea {
    padding: 8px 12px;
    border: 1px solid var(--border-color, #D1D5DB);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary, #111827);
    background: #fff;
    transition: border-color 0.15s;
    font-family: inherit;
    width: 100%;
}
.eng-drawer-form-group input:focus,
.eng-drawer-form-group select:focus,
.eng-drawer-form-group textarea:focus {
    outline: none;
    border-color: var(--alfred-cobalto, #003d59);
    box-shadow: 0 0 0 3px rgba(0, 61, 89, 0.08);
}
.eng-drawer-form-group textarea {
    resize: vertical;
    min-height: 70px;
}
.eng-drawer-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color, #E5E7EB);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    background: #fff;
}
.eng-drawer-footer--between {
    justify-content: space-between;
}
.eng-drawer-footer .btn-danger-outline {
    color: #DC2626;
    border: 1px solid #FCA5A5;
    background: #FEF2F2;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s, border-color 0.15s;
}
.eng-drawer-footer .btn-danger-outline:hover {
    background: #FEE2E2;
    border-color: #F87171;
}
.eng-drawer-meta {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted, #9CA3AF);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.eng-drawer-meta .eng-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    background: #F3F4F6;
    color: var(--text-secondary, #6B7280);
}
.eng-drawer-readonly {
    font-size: 13px;
    color: var(--text-secondary, #6B7280);
    white-space: pre-wrap;
}
/* Email drawer detail */
.eng-email-detail { border: 1px solid var(--border-color, #E5E7EB); border-radius: 8px; overflow: hidden; background: #F9FAFB; }
.eng-email-detail-header { padding: 10px 12px; border-bottom: 1px solid var(--border-color, #E5E7EB); display: flex; flex-direction: column; gap: 4px; }
.eng-email-detail-row { display: flex; gap: 8px; font-size: 12px; line-height: 1.45; }
.eng-email-detail-label { font-weight: 600; color: var(--text-muted, #6B7280); min-width: 50px; flex-shrink: 0; }
.eng-email-detail-value { color: var(--text-primary, #111827); word-break: break-word; flex: 1; }
.eng-email-ext-link { font-size: 12px; color: var(--alfred-indigo, #3B82F6); text-decoration: none; font-weight: 500; }
.eng-email-ext-link:hover { text-decoration: underline; }
.eng-email-detail-body { background: #FFFFFF; }
.eng-email-iframe { width: 100%; min-height: 280px; max-height: 560px; border: none; display: block; background: #FFFFFF; }
.eng-email-body-text { margin: 0; padding: 12px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; font-family: inherit; color: var(--text-primary, #111827); background: #FFFFFF; }
.eng-email-no-body { padding: 16px; font-size: 12px; color: var(--text-muted, #6B7280); }

/* Contact picker */
.eng-contact-picker {
    position: relative;
}
.eng-contact-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}
.eng-contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    font-size: 11px;
    color: #1D4ED8;
}
.eng-contact-chip button {
    background: none;
    border: none;
    cursor: pointer;
    color: #93C5FD;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}
.eng-contact-chip button:hover {
    color: #3B82F6;
}
.eng-contact-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 10;
    margin-top: 4px;
}
.eng-contact-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.1s;
}
.eng-contact-option:hover {
    background: #f9fafb;
}
.eng-contact-option:last-child {
    border-bottom: none;
}
.eng-contact-empty {
    padding: 10px;
    font-size: 12px;
    color: var(--text-muted, #9CA3AF);
    text-align: center;
}
.eng-contact-create-btn {
    display: block;
    margin: 8px auto 0;
    padding: 4px 12px;
    border: 1px solid var(--border-color, #D1D5DB);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 11px;
    color: var(--alfred-cobalto, #003d59);
    transition: background 0.15s, border-color 0.15s;
}
.eng-contact-create-btn:hover {
    background: #f9fafb;
    border-color: var(--alfred-cobalto, #003d59);
}
.eng-contact-inline-form {
    padding: 12px;
}
.eng-contact-inline-form input {
    width: 100%;
    margin-bottom: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border-color, #D1D5DB);
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
}
.eng-contact-inline-form input:focus {
    outline: none;
    border-color: var(--alfred-cobalto, #003d59);
    box-shadow: 0 0 0 2px rgba(0, 61, 89, 0.08);
}
/* Attendee picker (team members from Outlook) */
.eng-attendee-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    background: #F5F3FF;
    border: 1px solid #DDD6FE;
    font-size: 11px;
    color: #6D28D9;
}
.eng-attendee-chip button {
    background: none;
    border: none;
    cursor: pointer;
    color: #C4B5FD;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}
.eng-attendee-chip button:hover {
    color: #7C3AED;
}
.eng-attendee-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background 0.1s;
}
.eng-attendee-option:hover {
    background: #f9fafb;
}
.eng-attendee-option:last-child {
    border-bottom: none;
}
.eng-attendee-option .attendee-meta {
    font-size: 11px;
    color: var(--text-muted, #9CA3AF);
}
/* Outlook sync toggle */
.eng-outlook-sync {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #F5F3FF;
    border: 1px solid #DDD6FE;
    cursor: pointer;
    transition: background 0.15s;
}
.eng-outlook-sync:hover {
    background: #EDE9FE;
}
.eng-outlook-sync input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #7C3AED;
    cursor: pointer;
    flex-shrink: 0;
}
.eng-outlook-sync-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--text-primary, #111827);
    cursor: pointer;
}
.eng-outlook-sync-label small {
    font-size: 11px;
    color: var(--text-muted, #9CA3AF);
}
.eng-outlook-sync--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #F9FAFB;
    border-color: var(--border-color, #E5E7EB);
}
.eng-outlook-sync--disabled input,
.eng-outlook-sync--disabled .eng-outlook-sync-label {
    cursor: not-allowed;
}
.eng-teams-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    font-size: 12px;
    color: #1D4ED8;
    margin-top: 8px;
}
.eng-teams-link a {
    color: #1D4ED8;
    text-decoration: underline;
    word-break: break-all;
}

/* Project Dynamics Row */
.project-dynamics-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, var(--border-color));
}
.project-dynamics-row .dynamics-label {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}
.project-dynamics-row .dynamics-label svg {
    width: 14px;
    height: 14px;
}
.dynamics-badge.is-linked {
    background: linear-gradient(135deg, #ECFDF5 0%, var(--color-success-bg) 100%);
    border: 1px solid #6EE7B7;
    color: var(--color-success-dark);
}
.dynamics-badge.is-linked .dynamics-badge-remove {
    background: rgba(4, 120, 87, 0.1);
    color: var(--color-success-dark);
}
.dynamics-badge.is-linked .dynamics-badge-remove:hover {
    background: var(--color-error);
    color: white;
}

/* Modal Info Box */
.modal-info-box {
    background: var(--border-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    font-size: 13px;
}
.modal-info-box strong {
    color: var(--text-color);
}

/* Invoices Table */
.invoices-table-wrapper {
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px;
}
.invoices-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.invoices-table thead {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
}
.invoices-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}
.invoices-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
}
.invoices-table tbody tr:hover {
    background: var(--bg-secondary);
}
.invoice-number strong {
    color: var(--text-primary);
    font-weight: 600;
}
.invoice-amount {
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}
.invoice-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.invoice-status.status-paid {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
}
.invoice-status.status-open {
    background: var(--color-warning-bg);
    color: #B45309;
}
.invoice-status.status-other {
    background: var(--border-color);
    color: var(--text-secondary);
}
.invoice-date, .invoice-due {
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Billing Section */
.billing-summary-strip {
    display: flex;
    gap: 0;
    padding: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}
.billing-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    border-right: 1px solid var(--border-color);
}
.billing-stat:last-child {
    border-right: none;
}
.billing-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}
.billing-stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}
.billing-stat-total { color: var(--text-primary); }
.billing-stat-pending { color: var(--color-warning-dark); }
.billing-stat-paid { color: var(--color-success-dark); }

.billing-tabs-inner {
    display: flex;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}
.billing-tab-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}
.billing-tab-inner:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}
.billing-tab-inner.active {
    color: var(--alfred-teal);
    font-weight: 600;
}
.billing-tab-inner.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--alfred-teal);
}
.billing-tab-inner svg {
    width: 14px;
    height: 14px;
}
.billing-tab-count {
    font-size: 11px;
    background: var(--border-color);
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 600;
}
.billing-tab-inner.active .billing-tab-count {
    background: var(--alfred-teal);
    color: #fff;
}

.billing-tab-panel {
    display: none;
}
.billing-tab-panel.active {
    display: block;
}

.billing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.billing-table thead {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
}
.billing-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.billing-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
}
.billing-table tbody tr:hover {
    background: var(--bg-secondary);
}
.billing-row strong {
    color: var(--text-primary);
}
.td-amount {
    font-family: 'JetBrains Mono', monospace;
    text-align: right;
    white-space: nowrap;
}
.td-amount-total {
    color: var(--text-primary);
}
.td-bc-company .bc-company-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #EFF6FF;
    color: #1D4ED8;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.billing-row-overdue {
    background: #FFF7ED;
}
.billing-row-expired {
    opacity: 0.65;
}
.td-overdue {
    color: var(--color-error-dark);
    font-weight: 600;
}
.overdue-badge {
    display: inline-block;
    padding: 1px 6px;
    background: var(--color-error-bg);
    color: var(--color-error-dark);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 4px;
}

/* Clickable billing rows */
.billing-row-clickable {
    cursor: pointer;
    transition: background 0.15s;
}
.billing-row-clickable:hover {
    background: #EFF6FF !important;
}
.billing-row-clickable:hover td:first-child strong {
    color: var(--alfred-teal);
}
.td-actions {
    text-align: center;
    padding: 4px 8px !important;
}
.btn-view-quote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s;
}
.btn-view-quote:hover {
    background: var(--alfred-teal);
    color: white;
    border-color: var(--alfred-teal);
}
.btn-view-quote svg {
    width: 14px;
    height: 14px;
}

/* Quote Detail Modal */
.quote-detail-info {
    padding: 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}
.quote-detail-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.quote-detail-row + .quote-detail-row {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}
.quote-detail-field {
    flex: 1;
    min-width: 120px;
}
.quote-field-label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.quote-field-value {
    display: block;
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

/* Section Error */
.section-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    color: var(--color-error-dark);
    font-size: 13px;
}
.section-error svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* =====================================================
   PROJECT USER METRICS - Métricas de usuarios en tabla
   ===================================================== */

/* Toggle incluir/excluir usuarios Alfred */
.projects-metrics-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 16px 0;
}

.alfred-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    user-select: none;
}

.alfred-toggle input[type="checkbox"] {
    display: none;
}

.alfred-toggle-slider {
    position: relative;
    width: 34px;
    height: 18px;
    background: var(--border-color);
    border-radius: 9px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.alfred-toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.alfred-toggle input:checked + .alfred-toggle-slider {
    background: var(--alfred-cobalto, var(--alfred-indigo));
}

.alfred-toggle input:checked + .alfred-toggle-slider::after {
    transform: translateX(16px);
}

.alfred-toggle-label {
    font-weight: 500;
}

/* Columnas de métricas */
.th-metric {
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    width: 70px;
    min-width: 60px;
    padding: 10px 4px !important;
}

.th-metric-action {
    width: 40px;
    min-width: 40px;
    padding: 10px 4px !important;
}

.td-metric {
    text-align: center !important;
    padding: 8px 4px !important;
    vertical-align: middle;
}

.metric-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 8px;
    background: var(--border-light);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

.metric-empty {
    color: var(--border-color);
    font-size: 14px;
}

/* Animación de carga para métricas */
.metric-loading {
    display: inline-block;
    width: 28px;
    height: 14px;
    background: linear-gradient(90deg, var(--border-color) 25%, var(--border-light) 50%, var(--border-color) 75%);
    background-size: 200% 100%;
    border-radius: 8px;
    animation: metricShimmer 1.5s infinite;
}

@keyframes metricShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Botón de sync métricas por proyecto */
.td-metric-action {
    text-align: center !important;
    padding: 8px 4px !important;
    vertical-align: middle;
}

.btn-sync-metrics {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.btn-sync-metrics:hover {
    background: var(--alfred-celeste, #E0F2FE);
    color: var(--alfred-cobalto, var(--alfred-indigo));
}

.btn-sync-metrics svg {
    width: 14px;
    height: 14px;
}

.btn-sync-metrics.syncing {
    pointer-events: none;
    color: var(--alfred-cobalto, var(--alfred-indigo));
}

.btn-sync-metrics.syncing svg {
    animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* =====================================================
   MÉTRICAS EN DETALLE DE CLIENTE
   ===================================================== */

.th-metric-detail {
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    width: 65px;
    min-width: 55px;
    padding: 10px 4px !important;
}

.td-metric-detail {
    text-align: center !important;
    padding: 8px 4px !important;
    vertical-align: middle;
}

/* Botón primario de acción en cabeceras */
.btn-primary-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 6px;
    border: none;
    background: var(--alfred-cobalto, var(--alfred-indigo));
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-weight: 600;
}

.btn-primary-action:hover {
    background: #004578;
}

.btn-primary-action svg {
    width: 14px;
    height: 14px;
}

/* Botón sync métricas en detalle de cliente */
.btn-sync-metrics-detail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--alfred-cobalto, var(--alfred-indigo));
    background: transparent;
    color: var(--alfred-cobalto, var(--alfred-indigo));
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-sync-metrics-detail:hover {
    background: var(--alfred-celeste, #E0F2FE);
}

.btn-sync-metrics-detail svg {
    width: 14px;
    height: 14px;
}

.btn-sync-metrics-detail.syncing {
    pointer-events: none;
    opacity: 0.7;
}

.btn-sync-metrics-detail.syncing svg {
    animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Toggle Alfred en detalle de cliente */
.detail-alfred-toggle {
    font-size: 12px;
    margin-right: 8px;
}

.detail-alfred-toggle .alfred-toggle-label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Tabla de proyectos - responsive con métricas */
#projects-content {
    overflow-x: auto;
}

.projects-contracts-table {
    width: 100%;
    min-width: 800px;
}

.projects-contracts-table th,
.projects-contracts-table td {
    white-space: nowrap;
}

/* Toggle Alfred en listado de clientes */
.clients-metrics-toggle {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 8px;
    padding: 0 4px;
}

.clients-metrics-toggle .alfred-toggle-label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* =====================================================
   Platform Totals Cards — Summary KPIs above clients table
   ===================================================== */

.platform-totals-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.platform-total-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.platform-total-card:hover {
    border-color: var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.platform-total-card.total-highlight {
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, var(--alfred-indigo) 100%);
    border-color: transparent;
    color: white;
}

.platform-total-card.total-highlight .platform-total-label {
    color: rgba(255, 255, 255, 0.75);
}

.platform-total-card.total-highlight .platform-total-value {
    color: #fff;
}

.platform-total-card.total-highlight .platform-total-sub {
    color: rgba(255, 255, 255, 0.6);
}

.platform-total-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(0, 88, 152, 0.08);
    color: var(--alfred-indigo);
}

.platform-total-card.total-highlight .platform-total-icon {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.platform-total-icon svg {
    width: 20px;
    height: 20px;
}

.platform-total-icon.active-icon {
    background: rgba(34, 197, 94, 0.1);
    color: #16A34A;
}

.platform-total-icon.app-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.platform-total-icon.admin-icon {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning-dark);
}

.platform-total-data {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.platform-total-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--alfred-cobalto);
    line-height: 1.1;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}

.platform-total-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.platform-total-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Totals row in tfoot */
.clients-totals-row {
    background: var(--bg-secondary);
    border-top: 2px solid var(--alfred-indigo);
}

.clients-totals-row td {
    padding: 12px 10px !important;
    font-weight: 700;
    color: var(--alfred-cobalto);
    font-size: 13px;
}

.clients-totals-row .totals-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--alfred-indigo);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.clients-totals-row .totals-value {
    font-variant-numeric: tabular-nums;
    text-align: center;
    font-size: 14px;
}

.clients-totals-row .totals-grand {
    color: var(--alfred-indigo);
    font-size: 15px;
    font-weight: 800;
}

/* Responsive: stack cards on mobile */
@media (max-width: 768px) {
    .platform-totals-section {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .platform-totals-section {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   Metrics Module Styles — Clean & Minimal (Inicio style)
   ===================================================== */

/* Container — narrow, centered, generous padding */
.metrics-module {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 32px;
}

/* Header — same as dash-header */
.metrics-module .m-header {
    margin-bottom: 32px;
}
.metrics-module .m-header h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin: 0 0 4px 0;
    letter-spacing: -0.5px;
}
.metrics-module .m-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}
.metrics-module .m-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

/* Back link — subtle, no border */
.metrics-module .m-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--alfred-indigo);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 12px;
    transition: color 0.15s;
}
.metrics-module .m-back:hover {
    color: var(--alfred-cobalto);
}
.metrics-module .m-back svg {
    width: 16px;
    height: 16px;
}

/* Section label — uppercase, small, like dash-label */
.metrics-module .m-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 28px 0 12px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.metrics-module .m-label svg {
    width: 16px;
    height: 16px;
}

/* Collapsible details section */
.metrics-module .m-details-section summary::-webkit-details-marker { display: none; }
.metrics-module .m-details-section[open] .m-toggle-icon { transform: rotate(90deg); }

/* Card — clean, like dash-card */
.metrics-module .m-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.metrics-module .m-card-clickable {
    cursor: pointer;
}
.metrics-module .m-card-clickable:hover {
    border-color: var(--alfred-indigo);
    box-shadow: 0 2px 8px rgba(0, 61, 89, 0.06);
}
.metrics-module .m-card-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.metrics-module .m-card-label svg {
    width: 15px;
    height: 15px;
}
.metrics-module .m-card-hint {
    color: var(--alfred-indigo);
    font-size: 12px;
    float: right;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* Big number display — like progress-display */
.metrics-module .m-big-number {
    font-size: 42px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    line-height: 1;
    margin-bottom: 4px;
}
.metrics-module .m-big-unit {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 400;
}
.metrics-module .m-big-sub {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* KPI row — horizontal 3-up, like kpi-row */
.metrics-module .m-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.metrics-module .m-kpi {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 14px;
    text-align: center;
}
.metrics-module .m-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    line-height: 1.2;
}
.metrics-module .m-kpi-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.metrics-module .m-kpi-sub {
    font-size: 11px;
    color: var(--alfred-indigo);
    font-weight: 500;
    margin-top: 2px;
}

/* Simple table — minimal, no background headers */
.metrics-module .m-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.metrics-module .m-table th {
    padding: 8px 10px;
    text-align: left;
    font-weight: 500;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}
.metrics-module .m-table th:last-child,
.metrics-module .m-table td:last-child {
    text-align: right;
}
.metrics-module .m-table td {
    padding: 10px 10px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-color);
}
.metrics-module .m-table td strong {
    color: var(--alfred-cobalto);
}
.metrics-module .m-table tbody tr:last-child td {
    border-bottom: none;
}

/* Inline stat row */
.metrics-module .m-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--border-light);
}
.metrics-module .m-stat-row:last-child {
    border-bottom: none;
}
.metrics-module .m-stat-key {
    color: var(--text-secondary);
}
.metrics-module .m-stat-val {
    font-weight: 600;
    color: var(--alfred-cobalto);
}

/* Button row */
.metrics-module .m-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.metrics-module .m-btn {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.metrics-module .m-btn:hover {
    border-color: var(--alfred-indigo);
    color: var(--alfred-indigo);
}
.metrics-module .m-btn svg {
    width: 16px;
    height: 16px;
}
.metrics-module .m-btn-primary {
    background: var(--alfred-indigo);
    border-color: var(--alfred-indigo);
    color: #fff;
}
.metrics-module .m-btn-primary:hover {
    background: var(--alfred-cobalto);
    border-color: var(--alfred-cobalto);
    color: #fff;
}

/* Select inputs — matching Inicio */
.metrics-module .m-select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
    color: var(--text-color);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s;
}
.metrics-module .m-select:hover { border-color: var(--alfred-indigo); }
.metrics-module .m-select:focus { outline: none; border-color: var(--alfred-indigo); box-shadow: 0 0 0 2px rgba(0, 88, 152, 0.1); }

.metrics-module .m-input {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
    color: var(--text-color);
    font-size: 13px;
    transition: border-color 0.2s;
}
.metrics-module .m-input:focus { outline: none; border-color: var(--alfred-indigo); box-shadow: 0 0 0 2px rgba(0, 88, 152, 0.1); }

/* Config bar — inline, subtle */
.metrics-module .m-config {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
}
.metrics-module .m-config-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.metrics-module .m-config-item label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Report sections — clean cards */
.metrics-module .m-report-section {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 12px;
}
.metrics-module .m-report-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.metrics-module .m-report-title svg {
    width: 18px;
    height: 18px;
}

/* Search box */
.metrics-module .m-search {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: var(--text-color);
    transition: border-color 0.2s;
    margin-bottom: 16px;
}
.metrics-module .m-search:focus {
    outline: none;
    border-color: var(--alfred-indigo);
    box-shadow: 0 0 0 2px rgba(0, 88, 152, 0.1);
}
.metrics-module .m-search::placeholder {
    color: var(--border-color);
}

/* Project list items — clean rows, not cards */
.metrics-module .m-project-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.metrics-module .m-project-item:hover {
    border-color: var(--alfred-indigo);
    box-shadow: 0 1px 4px rgba(0, 61, 89, 0.06);
}
.metrics-module .m-project-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin: 0 0 2px 0;
}
.metrics-module .m-project-meta {
    font-size: 13px;
    color: var(--text-secondary);
}
.metrics-module .m-project-arrow {
    color: var(--border-color);
    flex-shrink: 0;
}
.metrics-module .m-project-arrow svg {
    width: 20px;
    height: 20px;
}
.metrics-module .m-project-item:hover .m-project-arrow {
    color: var(--alfred-indigo);
}

/* Empty state */
.metrics-module .m-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.metrics-module .m-empty svg {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    stroke-width: 1.5;
}
.metrics-module .m-empty h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 4px 0;
}
.metrics-module .m-empty p {
    font-size: 14px;
    margin: 0;
}

/* Loading spinner */
.loading-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, var(--alfred-indigo) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Metadata Drawer — kept as-is */
.metadata-drawer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1100; }
.drawer-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); animation: fadeIn 0.2s ease; }
.drawer-panel { position: absolute; top: 0; right: 0; width: 440px; max-width: 90vw; height: 100%; background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,0.1); display: flex; flex-direction: column; animation: slideInRight 0.3s ease; }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.drawer-header h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--alfred-cobalto); }
.drawer-body { flex: 1; overflow-y: auto; padding: 24px; }
.drawer-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--alfred-indigo); margin: 20px 0 10px 0; padding-bottom: 6px; border-bottom: 1px solid var(--border-light); }
.drawer-section-title:first-child { margin-top: 0; }
.drawer-actions { padding: 16px 0 0; border-top: 1px solid var(--border-color); margin-top: 20px; }
.metadata-drawer .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metadata-drawer .form-group { margin-bottom: 12px; }
.metadata-drawer .form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }

/* Asset metadata list inside drawer */
.asset-meta-list::-webkit-scrollbar { width: 4px; }
.asset-meta-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
.asset-meta-row:hover { border-color: #3B82F6 !important; }
.asset-meta-row select, .asset-meta-row input { width: 100%; border: 1px solid var(--border-color); border-radius: 4px; background: #fff; }
.asset-meta-row select:focus, .asset-meta-row input:focus { border-color: #3B82F6; outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }

/* Dwelling Detail Drawer */
.dwelling-drawer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1100; }

/* Dwelling header name */
.dd-header-dwelling {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
    padding: 3px 8px;
    background: var(--border-light);
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 4px;
}

/* Clickable min/max/avg cells */
.m-cell-drill {
    cursor: pointer;
    color: var(--alfred-indigo);
    font-weight: 600;
    border-bottom: 1px dashed var(--alfred-indigo);
    padding-bottom: 1px;
    transition: all 0.15s ease;
}
.m-cell-drill:hover {
    color: var(--alfred-cobalto);
    border-bottom-color: var(--alfred-cobalto);
    background: rgba(0, 88, 152, 0.06);
    border-radius: 3px;
    padding: 2px 4px;
    margin: -2px -4px;
}

/* Dwelling drawer KPIs */
.dd-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.dd-kpi-row.dd-kpi-row-2 {
    grid-template-columns: repeat(2, 1fr);
}
.dd-kpi {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 12px;
    text-align: center;
}
.dd-kpi-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    line-height: 1.3;
}
.dd-kpi-unit {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
}
.dd-kpi-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Sensor cards */
.dd-sensors {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dd-sensor-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s;
}
.dd-sensor-card:hover {
    border-color: var(--border-color);
}
.dd-sensor-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.1s;
}
.dd-sensor-header:hover {
    background: var(--bg-secondary);
}
.dd-sensor-info {
    flex: 1;
    min-width: 0;
}
.dd-sensor-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dd-sensor-uuid {
    font-size: 11px;
    color: var(--text-muted);
    font-family: monospace;
}
.dd-sensor-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.dd-sensor-consumption {
    font-size: 13px;
    color: var(--text-color);
}
.dd-sensor-readings {
    font-size: 11px;
    color: var(--text-muted);
}
.dd-sensor-invalid {
    font-size: 11px;
    color: var(--color-warning-dark);
}
.dd-sensor-valid {
    font-size: 11px;
}
.dd-sensor-chevron {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.dd-sensor-detail {
    padding: 0 14px 14px;
    border-top: 1px solid var(--border-light);
}
.dd-sensor-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    padding-top: 10px;
}
.dd-sensor-meta strong {
    color: var(--text-color);
}

/* btn-ghost for back buttons */
.btn-ghost { background: transparent; color: var(--alfred-indigo); border: none; padding: 6px 12px; font-size: 13px; }
.btn-ghost:hover { background: rgba(0, 88, 152, 0.08); color: var(--alfred-cobalto); }

/* Chart toggles */
.metrics-module .m-chart-toggles {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.metrics-module .m-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-color);
    cursor: pointer;
    user-select: none;
}
.metrics-module .m-toggle input[type="checkbox"] {
    display: none;
}
.metrics-module .m-toggle-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    transition: opacity 0.15s;
}
.metrics-module .m-toggle input:not(:checked) + .m-toggle-dot {
    opacity: 0.25;
}

/* Year Toggle */
.metrics-module .m-year-toggle {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--alfred-celeste);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}
.metrics-module .m-year-btn {
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    background: var(--alfred-white);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    border-right: 1px solid var(--alfred-celeste);
}
.metrics-module .m-year-btn:last-child {
    border-right: none;
}
.metrics-module .m-year-btn:hover {
    background: #f0f4f8;
    color: var(--alfred-cobalto);
}
.metrics-module .m-year-btn-active {
    background: var(--alfred-indigo);
    color: var(--alfred-white);
}
.metrics-module .m-year-btn-active:hover {
    background: var(--alfred-cobalto);
    color: var(--alfred-white);
}

/* =====================================================
   Tab toggle: Mensual | Pivot
   ===================================================== */
.metrics-module .m-section-header {
    flex-wrap: wrap;
    gap: 8px;
}
.metrics-module .m-tab-toggle {
    display: flex;
    background: var(--border-light);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.metrics-module .m-tab-btn {
    border: none;
    background: transparent;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
}
.metrics-module .m-tab-btn:hover {
    color: var(--text-color);
    background: var(--border-color);
}
.metrics-module .m-tab-btn-active {
    background: #fff;
    color: var(--alfred-cobalto);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    font-weight: 600;
}
.metrics-module .m-tab-btn-active:hover {
    background: #fff;
    color: var(--alfred-cobalto);
}

/* =====================================================
   Consumos - Category selector
   ===================================================== */
.metrics-module .m-consumos-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.metrics-module .m-consumos-cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1.5px solid var(--border-color);
    background: #fff;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
}
.metrics-module .m-consumos-cat-btn i,
.metrics-module .m-consumos-cat-btn svg {
    width: 14px;
    height: 14px;
}
.metrics-module .m-consumos-cat-btn:hover {
    border-color: var(--cat-color, var(--alfred-cobalto));
    color: var(--cat-color, var(--alfred-cobalto));
}
.metrics-module .m-consumos-cat-btn-active {
    background: var(--cat-color, var(--alfred-cobalto));
    border-color: var(--cat-color, var(--alfred-cobalto));
    color: #fff !important;
}
.metrics-module .m-consumos-cat-btn-active svg {
    stroke: #fff;
}

/* =====================================================
   Pivot table
   ===================================================== */
.metrics-module .m-pivot-wrapper {
    position: relative;
}
.metrics-module .m-pivot-table {
    min-width: 100%;
    white-space: nowrap;
}
.metrics-module .m-pivot-metric-th {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
    min-width: 100px;
    border-right: 2px solid var(--border-color);
}
.metrics-module .m-pivot-metric-td {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    font-weight: 500;
    color: var(--text-color);
    border-right: 2px solid var(--border-color);
    min-width: 100px;
}
.metrics-module .m-pivot-year-th {
    cursor: pointer;
    text-align: center !important;
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--alfred-cobalto);
    transition: background 0.15s;
    min-width: 120px;
    user-select: none;
}
.metrics-module .m-pivot-year-th:hover {
    background: #EFF6FF;
}
.metrics-module .m-pivot-year-th svg {
    vertical-align: middle;
    margin-left: 2px;
    transition: transform 0.2s;
}
.metrics-module .m-pivot-year-th.m-pivot-expanded svg {
    transform: rotate(90deg);
}
.metrics-module .m-pivot-month-th {
    text-align: center !important;
    font-size: 11px;
    min-width: 90px;
    color: var(--text-secondary);
    background: #FAFBFC;
}
.metrics-module .m-pivot-year-td {
    text-align: right !important;
    font-weight: 500;
    background: var(--bg-secondary);
}
.metrics-module .m-pivot-month-td {
    text-align: right !important;
}
.metrics-module .m-pivot-unit {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}
.metrics-module .m-pivot-pct {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 400;
}
.metrics-module .m-pivot-row-total td {
    font-weight: 600;
    color: var(--alfred-cobalto);
}
.metrics-module .m-pivot-row-total .m-pivot-metric-td {
    font-weight: 700;
}
.metrics-module .m-pivot-collapse-btn {
    display: inline-block;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--alfred-indigo);
    margin-right: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #EFF6FF;
    user-select: none;
    white-space: nowrap;
}
.metrics-module .m-pivot-collapse-btn:hover {
    background: #DBEAFE;
}
.metrics-module .m-pivot-collapse-btn svg {
    vertical-align: middle;
    width: 12px;
    height: 12px;
}

/* Zebra striping for pivot body */
.metrics-module .m-pivot-table tbody tr:nth-child(even) td:not(.m-pivot-metric-td) {
    background: #FAFBFC;
}
.metrics-module .m-pivot-table tbody tr:nth-child(even) .m-pivot-year-td {
    background: var(--border-light);
}

/* Responsive */
@media (max-width: 480px) {
    .metrics-module { padding: 24px 16px; }
    .metrics-module .m-kpi-row { grid-template-columns: 1fr; }
    .metrics-module .m-kpi { display: flex; align-items: center; justify-content: space-between; text-align: left; }
    .metrics-module .m-config { flex-direction: column; align-items: stretch; }
    .metrics-module .m-actions { flex-direction: column; }
    .metrics-module .m-btn { width: 100%; text-align: center; justify-content: center; }
    .drawer-panel { width: 100%; max-width: 100%; }
    .metrics-module .m-tab-toggle { width: 100%; justify-content: center; }
}

/* =====================================================
   METRICS - Main Tabs (Consumos | Analítica)
   ===================================================== */
.metrics-module .m-main-tabs {
    display: flex;
    gap: 4px;
    background: var(--border-light);
    border-radius: 10px;
    padding: 4px;
}
.metrics-module .m-main-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
}
.metrics-module .m-main-tab:hover { background: var(--border-color); color: var(--text-color); }
.metrics-module .m-main-tab-active {
    background: #fff;
    color: var(--alfred-indigo);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.metrics-module .m-main-tab svg { width: 16px; height: 16px; }

/* =====================================================
   METRICS - Analytics Heatmap
   ===================================================== */
.hm-controls {
    margin-top: 16px;
    margin-bottom: 16px;
}
.hm-cat-selector {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.hm-cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 1.5px solid var(--border-color);
    background: #fff;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
}
.hm-cat-btn svg { width: 14px; height: 14px; }
.hm-cat-btn:hover { border-color: var(--cat-color, var(--alfred-indigo)); color: var(--cat-color, var(--alfred-indigo)); }
.hm-cat-btn-active {
    background: var(--cat-color, var(--alfred-indigo));
    border-color: var(--cat-color, var(--alfred-indigo));
    color: #fff !important;
}
.hm-cat-btn-active svg { stroke: #fff; }

/* KPIs row */
.hm-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.hm-kpi {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
}
.hm-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.hm-kpi-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 4px;
}

/* Heatmap table */
.hm-heatmap-wrapper { margin-bottom: 20px; }
.hm-scroll {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.hm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 600px;
}
.hm-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .5px;
    padding: 8px 6px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 2;
}
.hm-th-hour {
    position: sticky;
    left: 0;
    z-index: 3 !important;
    background: var(--bg-secondary) !important;
    min-width: 56px;
    text-align: left !important;
    padding-left: 10px !important;
}
.hm-th-avg { background: var(--border-light) !important; }
.hm-td-hour {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    font-weight: 600;
    color: var(--text-color);
    font-size: 11px;
    padding: 5px 6px 5px 10px;
    min-width: 56px;
    border-right: 1px solid var(--border-color);
}
.hm-cell {
    text-align: center;
    padding: 5px 4px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    min-width: 60px;
    transition: opacity .15s;
    cursor: default;
    border: 0.5px solid rgba(255,255,255,.3);
}
.hm-cell:hover { opacity: .8; outline: 2px solid var(--text-color); outline-offset: -2px; border-radius: 2px; }
.hm-cell-avg {
    border-left: 2px solid var(--border-color) !important;
    font-weight: 600;
}
.hm-cell-total { font-weight: 700; background: var(--bg-secondary) !important; color: var(--text-color) !important; }
.hm-row-total td { border-top: 2px solid var(--border-color); }

/* Color legend */
.hm-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-muted);
}
.hm-legend-bar {
    width: 160px;
    height: 10px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
}
.hm-legend-label { font-weight: 600; color: var(--text-secondary); }
.hm-legend-range { margin-left: auto; font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
    .hm-kpis { grid-template-columns: repeat(2, 1fr); }
    .hm-cat-selector { flex-direction: column; }
    .hm-cat-btn { width: 100%; justify-content: center; }
}

/* =====================================================
   METRICS - Efficiency Study (sub-tab of Analítica)
   ===================================================== */

/* Sub-tab bar inside the Analítica panel */
.eff-sub-tabs {
    display: flex;
    gap: 4px;
    margin-top: 20px;
    margin-bottom: 4px;
    background: var(--border-light, #f1f5f9);
    border-radius: 10px;
    padding: 4px;
}
.eff-sub-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.eff-sub-tab:hover { background: var(--border-color, #e2e8f0); color: var(--text-color); }
.eff-sub-tab-active {
    background: #fff;
    color: var(--alfred-indigo, #4f46e5);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    font-weight: 600;
}
.eff-sub-tab svg { width: 15px; height: 15px; }

/* KPI grid */
.eff-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 20px 0;
}
.eff-kpi {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 14px 16px;
    border-left-width: 3px;
}
.eff-kpi-danger { border-left-color: #ef4444; }
.eff-kpi-warn   { border-left-color: #f97316; }
.eff-kpi-neutral{ border-left-color: var(--border-color, #e2e8f0); }
.eff-kpi-label  { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.eff-kpi-val    { font-size: 1.45rem; font-weight: 700; color: var(--text-color); line-height: 1.2; }
.eff-kpi-unit   { font-size: .75rem; font-weight: 400; color: var(--text-secondary); }
.eff-kpi-sub    { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Savings box */
.eff-savings-box {
    background: linear-gradient(135deg, rgba(16,185,129,.05), rgba(6,182,212,.05));
    border: 1px solid rgba(16,185,129,.25);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}
.eff-savings-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 12px;
}
.eff-savings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}
.eff-savings-card {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 10px 14px;
    text-align: center;
}
.eff-savings-card-total {
    background: rgba(16,185,129,.07);
    border-color: rgba(16,185,129,.3);
}
.eff-savings-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.eff-savings-kwh   { font-size: 1.1rem; font-weight: 700; color: var(--text-color); }
.eff-savings-eur   { font-size: .8rem; font-weight: 600; color: #10b981; margin-top: 2px; }

/* Section titles */
.eff-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    margin: 20px 0 8px;
}
.eff-section-title svg { width: 15px; height: 15px; opacity: .7; }

/* Insight / conclusion cards */
.eff-insight {
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.6;
    border-left: 3px solid;
}
.eff-insight-warn { background: rgba(249,115,22,.06); border-left-color: #f97316; color: var(--text-color); }
.eff-insight-info { background: rgba(99,102,241,.06); border-left-color: #6366f1; color: var(--text-color); }
.eff-insight-good { background: rgba(16,185,129,.06); border-left-color: #10b981; color: var(--text-color); }

/* Chart layout */
.eff-chart-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.eff-chart-box {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 14px 16px;
}
.eff-chart-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

/* Tables */
.eff-table-wrap { overflow-x: auto; }
.eff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.eff-table th {
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-secondary);
    font-weight: 600;
    padding: 8px 10px;
    text-align: right;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    white-space: nowrap;
}
.eff-table th:first-child { text-align: left; }
.eff-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-light, #f1f5f9);
    text-align: right;
    color: var(--text-color);
}
.eff-table td:first-child { text-align: left; font-weight: 500; }
.eff-table tr:hover { background: rgba(99,102,241,.03); }

/* Status tags */
.eff-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
}
.eff-tag-red    { background: rgba(239,68,68,.12);  color: #dc2626; }
.eff-tag-yellow { background: rgba(245,158,11,.12); color: #b45309; }
.eff-tag-green  { background: rgba(16,185,129,.12); color: #059669; }
.eff-tag-gray   { background: rgba(100,116,139,.1); color: #64748b; }

@media (max-width: 768px) {
    .eff-kpi-grid    { grid-template-columns: repeat(2, 1fr); }
    .eff-savings-grid{ grid-template-columns: repeat(2, 1fr); }
    .eff-chart-row   { grid-template-columns: 1fr; }
    .eff-sub-tab span { display: none; }
}

/* =====================================================
   BMS CLOUD CONTROL - DASHBOARD MOCKUP
   ===================================================== */

/* Mockup container & label */
.bms-dashboard-mockup {
    margin-top: 32px;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid var(--border-color);
    background: #F1F5F9;
}

.bms-mockup-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, #1E293B 100%);
    color: white;
    flex-wrap: wrap;
}

.mockup-badge {
    background: var(--color-warning);
    color: var(--alfred-cobalto);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}

.mockup-title {
    font-size: 15px;
    font-weight: 700;
}

.mockup-subtitle {
    font-size: 12px;
    color: #94A3B8;
    margin-left: auto;
}

.bms-open-fullscreen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: #0EA5E9;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.bms-open-fullscreen:hover {
    background: #0284C7;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.bms-open-fullscreen svg {
    width: 14px;
    height: 14px;
}

/* Dashboard Shell */
.bms-dashboard {
    background: #F1F5F9;
    padding: 0;
    font-family: var(--font-primary);
}

/* Top Bar */
.bms-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: white;
    border-bottom: 1px solid #E2E8F0;
    gap: 16px;
}

.bms-topbar-left { display: flex; align-items: center; }

.bms-logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bms-logo {
    height: 24px;
    object-fit: contain;
}

.bms-product-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--alfred-cobalto, var(--alfred-cobalto));
    letter-spacing: -0.3px;
}

.bms-topbar-center { flex: 1; max-width: 400px; }

.bms-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #F1F5F9;
    border-radius: 8px;
    color: #94A3B8;
    font-size: 13px;
}

.bms-search svg { width: 14px; height: 14px; }

.bms-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bms-topbar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    position: relative;
}

.bms-topbar-item svg { width: 16px; height: 16px; }

.bms-live-dot {
    width: 8px;
    height: 8px;
    background: #22C55E;
    border-radius: 50%;
    animation: bmsPulse 2s infinite;
}

@keyframes bmsPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.bms-badge-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--color-error);
    color: white;
    font-size: 9px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bms-time {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
}

/* KPI Row */
.bms-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    padding: 16px 20px;
}

.bms-kpi-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid #E2E8F0;
}

.bms-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bms-kpi-icon svg { width: 18px; height: 18px; }

.bms-kpi-data { display: flex; flex-direction: column; }

.bms-kpi-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--alfred-cobalto);
    line-height: 1;
    letter-spacing: -0.5px;
}

.bms-kpi-label {
    font-size: 11px;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.bms-kpi-status {
    font-size: 11px;
    font-weight: 500;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bms-kpi-trend { font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.bms-kpi-trend svg { width: 12px; height: 12px; }
.bms-trend-down { color: var(--color-success-dark); }
.bms-trend-up { color: var(--color-error); }
.bms-alert-critical { color: var(--color-error); font-weight: 700; }

/* Status dots */
.bms-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.bms-status-online { background: #22C55E; }
.bms-status-warning { background: var(--color-warning); }
.bms-status-offline { background: var(--color-error); }

/* Main Content */
.bms-main-content {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 16px;
    padding: 0 20px 16px;
}

/* Panels */
.bms-panel {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid #E2E8F0;
    overflow: hidden;
}

.bms-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #F1F5F9;
}

.bms-panel-header h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.bms-panel-header h3 svg { width: 16px; height: 16px; color: #64748B; }

.bms-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bms-panel-count {
    background: var(--color-error-bg);
    color: var(--color-error-dark);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.bms-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748B;
    transition: all 0.15s;
}

.bms-btn-icon svg { width: 14px; height: 14px; }
.bms-btn-icon:hover { background: #F1F5F9; color: var(--alfred-cobalto); }
.bms-btn-icon.bms-btn-active { background: var(--alfred-cobalto); color: white; border-color: var(--alfred-cobalto); }

/* Buildings Grid */
.bms-buildings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px;
}

.bms-building-card {
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 14px;
    transition: all 0.2s;
    cursor: pointer;
}

.bms-building-card:hover {
    border-color: #0EA5E9;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1);
    transform: translateY(-2px);
}

.bms-building-offline {
    opacity: 0.55;
    border-color: #FCA5A5;
    background: #FFF5F5;
}

.bms-building-warning {
    border-color: #FCD34D;
}

.bms-building-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.bms-building-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bms-building-type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bms-building-alerts {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-warning);
    display: flex;
    align-items: center;
    gap: 3px;
}

.bms-building-alerts svg { width: 12px; height: 12px; }

.bms-building-ok {
    font-size: 12px;
    color: #22C55E;
    font-weight: 700;
}

.bms-building-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bms-building-city {
    font-size: 11px;
    color: #94A3B8;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 10px;
}

.bms-building-city svg { width: 10px; height: 10px; }

.bms-building-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px 0;
    border-top: 1px solid #F1F5F9;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 10px;
}

.bms-metric { text-align: center; }

.bms-metric-label {
    font-size: 9px;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
}

.bms-metric-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--alfred-cobalto);
}

.bms-building-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bms-energy-info { display: flex; align-items: center; gap: 6px; }

.bms-energy-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--alfred-cobalto);
}

.bms-energy-trend {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}

.bms-energy-trend.bms-trend-down { background: var(--color-success-bg); color: var(--color-success-dark); }
.bms-energy-trend.bms-trend-up { background: var(--color-error-bg); color: var(--color-error-dark); }

.bms-hvac-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bms-hvac-auto { background: var(--color-success-bg); color: var(--color-success-dark); }
.bms-hvac-cooling { background: #DBEAFE; color: #2563EB; }
.bms-hvac-heating { background: var(--color-warning-bg); color: var(--color-warning-dark); }
.bms-hvac-offline { background: var(--color-error-bg); color: var(--color-error-dark); }

/* Side Panels */
.bms-side-panels {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Alerts List */
.bms-alerts-list {
    max-height: 260px;
    overflow-y: auto;
}

.bms-alert-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--bg-secondary);
    transition: background 0.15s;
}

.bms-alert-item:hover { background: var(--bg-secondary); }

.bms-alert-item.bms-alert-critical { border-left: 3px solid var(--color-error); }
.bms-alert-item.bms-alert-warning { border-left: 3px solid var(--color-warning); }
.bms-alert-item.bms-alert-info { border-left: 3px solid #3B82F6; }

.bms-alert-icon { font-size: 14px; margin-top: 1px; }

.bms-alert-content { flex: 1; min-width: 0; }

.bms-alert-building {
    font-size: 11px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bms-alert-message {
    font-size: 11px;
    color: #64748B;
    line-height: 1.4;
    display: block;
}

.bms-alert-time {
    font-size: 10px;
    font-weight: 600;
    color: #94A3B8;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Energy Breakdown */
.bms-energy-breakdown {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
}

.bms-energy-chart { flex-shrink: 0; }

.bms-donut-chart {
    width: 110px;
    height: 110px;
    position: relative;
}

.bms-donut {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.bms-donut-segment {
    transition: stroke-dasharray 0.3s;
}

.bms-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.bms-donut-total {
    font-size: 20px;
    font-weight: 800;
    color: var(--alfred-cobalto);
    display: block;
    line-height: 1;
}

.bms-donut-unit {
    font-size: 10px;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
}

.bms-energy-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bms-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.bms-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

.bms-legend-label {
    font-weight: 600;
    color: #334155;
    flex: 1;
}

.bms-legend-value {
    font-weight: 700;
    color: var(--alfred-cobalto);
    min-width: 32px;
    text-align: right;
}

.bms-legend-kwh {
    font-weight: 500;
    color: #94A3B8;
    font-size: 11px;
    min-width: 60px;
    text-align: right;
}

/* Comparison Table */
.bms-comparison-panel {
    margin: 0 20px 16px;
}

.bms-select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    font-size: 12px;
    font-weight: 500;
    color: #334155;
    background: white;
    cursor: pointer;
}

.bms-btn-sm {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    background: white;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s;
}

.bms-btn-sm svg { width: 12px; height: 12px; }
.bms-btn-sm:hover { background: #F1F5F9; }

.bms-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.bms-table thead {
    background: var(--bg-secondary);
}

.bms-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748B;
    border-bottom: 1px solid #E2E8F0;
    white-space: nowrap;
}

.bms-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #F1F5F9;
    color: #334155;
    white-space: nowrap;
}

.bms-table tbody tr:hover { background: var(--bg-secondary); }
.bms-row-offline { opacity: 0.5; }

.bms-td-building {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bms-td-building strong {
    color: var(--alfred-cobalto);
}

.bms-type-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
}

.bms-occupancy-bar {
    width: 48px;
    height: 5px;
    background: #F1F5F9;
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

.bms-occupancy-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.bms-occupancy-text {
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
}

.bms-alert-count {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
    font-weight: 700;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.bms-no-alerts {
    color: #22C55E;
    font-weight: 700;
}

.bms-status-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bms-status-tag-online { background: var(--color-success-bg); color: var(--color-success-dark); }
.bms-status-tag-warning { background: var(--color-warning-bg); color: var(--color-warning-dark); }
.bms-status-tag-offline { background: var(--color-error-bg); color: var(--color-error-dark); }

/* Bottom Bar */
.bms-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: white;
    border-top: 1px solid #E2E8F0;
    flex-wrap: wrap;
    gap: 12px;
}

.bms-update-time {
    font-size: 11px;
    color: #94A3B8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bms-update-time svg { width: 12px; height: 12px; }

.bms-bottom-actions {
    display: flex;
    gap: 8px;
}

.bms-btn-action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    background: white;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s;
}

.bms-btn-action svg { width: 14px; height: 14px; }
.bms-btn-action:hover { background: #F1F5F9; border-color: #CBD5E1; }

.bms-btn-primary-action {
    background: #0EA5E9;
    color: white;
    border-color: #0EA5E9;
}

.bms-btn-primary-action:hover {
    background: #0284C7;
    border-color: #0284C7;
}

/* BMS Dashboard Responsive */
@media (max-width: 1200px) {
    .bms-kpi-row { grid-template-columns: repeat(3, 1fr); }
    .bms-main-content { grid-template-columns: 1fr; }
    .bms-buildings-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .bms-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .bms-buildings-grid { grid-template-columns: repeat(2, 1fr); }
    .bms-topbar-center { display: none; }
    .bms-bottom-actions { flex-wrap: wrap; }
    .bms-energy-breakdown { flex-direction: column; }
    .bms-mockup-label { flex-direction: column; align-items: flex-start; }
    .mockup-subtitle { margin-left: 0; }
}

@media (max-width: 480px) {
    .bms-kpi-row { grid-template-columns: 1fr; }
    .bms-buildings-grid { grid-template-columns: 1fr; }
    .bms-topbar { padding: 8px 12px; }
    .bms-kpi-row { padding: 12px; }
    .bms-main-content { padding: 0 12px 12px; }
    .bms-comparison-panel { margin: 0 12px 12px; }
}

/* =====================================================
   ECO FLEXLIVING - DASHBOARD MOCKUP
   ===================================================== */

.eco-mockup-wrapper { margin-top: 32px; border-radius: 20px; overflow: hidden; border: 2px solid var(--color-success-bg); background: #F0FDF4; }
.eco-mockup-label { display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: linear-gradient(135deg, #064E3B 0%, var(--color-success-dark) 100%); color: white; flex-wrap: wrap; }
.eco-mockup-dashboard { background: var(--bg-secondary); font-family: var(--font-primary); }

/* Top Bar */
.eco-topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; background: white; border-bottom: 1px solid #E2E8F0; }
.eco-topbar-left { display: flex; align-items: center; gap: 10px; }
.eco-topbar-icon { height: 22px; width: 22px; object-fit: contain; }
.eco-topbar-name { font-size: 14px; font-weight: 700; color: var(--color-success-dark); }
.eco-topbar-divider { width: 1px; height: 20px; background: #E2E8F0; }
.eco-topbar-property { font-size: 12px; font-weight: 600; color: #64748B; }
.eco-topbar-right { display: flex; align-items: center; gap: 14px; }
.eco-live { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #22C55E; }
.eco-live-dot { width: 7px; height: 7px; background: #22C55E; border-radius: 50%; animation: bmsPulse 2s infinite; }
.eco-topbar-time { font-size: 13px; font-weight: 600; color: var(--alfred-cobalto); font-variant-numeric: tabular-nums; }

/* KPI Row */
.eco-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 14px 18px; }
.eco-kpi { background: white; border-radius: 10px; padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); border: 1px solid #E2E8F0; display: flex; flex-direction: column; gap: 5px; }
.eco-kpi-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.eco-kpi-icon svg { width: 16px; height: 16px; }
.eco-kpi-data { display: flex; flex-direction: column; }
.eco-kpi-value { font-size: 22px; font-weight: 800; color: var(--alfred-cobalto); line-height: 1; letter-spacing: -0.3px; }
.eco-kpi-label { font-size: 10px; font-weight: 700; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }
.eco-kpi-sub { font-size: 10px; font-weight: 500; color: #64748B; }

/* Panels */
.eco-panel { background: white; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); border: 1px solid #E2E8F0; overflow: hidden; }
.eco-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #F1F5F9; }
.eco-panel-header h3 { font-size: 13px; font-weight: 700; color: var(--alfred-cobalto); display: flex; align-items: center; gap: 7px; margin: 0; }
.eco-panel-header h3 svg { width: 14px; height: 14px; color: #64748B; }
.eco-panel-actions { display: flex; gap: 5px; }
.eco-filter-chip { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 12px; background: #F1F5F9; color: #64748B; cursor: default; }
.eco-filter-chip.eco-filter-active { background: var(--color-success); color: white; }

/* Main grid */
.eco-main { display: grid; grid-template-columns: 1fr 340px; gap: 14px; padding: 0 18px 14px; }
.eco-side { display: flex; flex-direction: column; gap: 14px; }

/* Rooms Grid */
.eco-rooms-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 12px; }
.eco-room-card { border: 1px solid #E2E8F0; border-radius: 8px; padding: 10px; background: white; transition: all 0.15s; cursor: default; }
.eco-room-card.eco-room-saving { border-color: #A7F3D0; background: #F0FDF4; }
.eco-room-card.eco-room-maint { opacity: 0.5; border-color: #E2E8F0; background: var(--bg-secondary); }
.eco-room-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.eco-room-id { font-size: 14px; font-weight: 800; color: var(--alfred-cobalto); }
.eco-room-status { font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.eco-room-metrics { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.eco-room-temp { font-size: 13px; font-weight: 700; color: var(--alfred-cobalto); }
.eco-room-setpoint { font-size: 10px; color: #94A3B8; }
.eco-room-window { font-size: 11px; margin-left: auto; }
.eco-room-bottom { display: flex; align-items: center; justify-content: space-between; }
.eco-hvac-tag { font-size: 8px; font-weight: 800; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.eco-room-saved { font-size: 9px; font-weight: 600; color: var(--color-success-dark); }

/* ECO Log */
.eco-log-count { background: var(--color-success-bg); color: var(--color-success-dark); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.eco-log-list { max-height: 260px; overflow-y: auto; }
.eco-log-item { display: flex; align-items: flex-start; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--bg-secondary); }
.eco-log-icon { font-size: 12px; width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.eco-log-content { flex: 1; min-width: 0; }
.eco-log-room { font-size: 11px; font-weight: 700; color: var(--alfred-cobalto); display: block; }
.eco-log-reason { font-size: 10px; color: #64748B; display: block; }
.eco-log-time { font-size: 9px; font-weight: 600; color: #94A3B8; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Daily Chart */
.eco-daily-chart { display: flex; align-items: flex-end; gap: 3px; padding: 14px 14px 8px; height: 100px; }
.eco-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.eco-bar { width: 100%; background: linear-gradient(180deg, var(--color-success) 0%, #34D399 100%); border-radius: 3px 3px 0 0; min-height: 4px; transition: height 0.3s; }
.eco-bar-label { font-size: 8px; font-weight: 600; color: #94A3B8; margin-top: 4px; }

/* Comparison */
.eco-comparison { margin: 0 18px 14px; }
.eco-comparison-body { padding: 16px; }
.eco-comp-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.eco-comp-label { font-size: 11px; font-weight: 600; color: #64748B; min-width: 120px; }
.eco-comp-bar-wrap { flex: 1; height: 18px; background: #F1F5F9; border-radius: 6px; overflow: hidden; }
.eco-comp-bar { height: 100%; border-radius: 6px; transition: width 0.5s; }
.eco-comp-bar-without { background: linear-gradient(90deg, #FCA5A5, var(--color-error)); }
.eco-comp-bar-with { background: linear-gradient(90deg, #6EE7B7, var(--color-success)); }
.eco-comp-value { font-size: 12px; font-weight: 700; color: var(--alfred-cobalto); min-width: 70px; text-align: right; }
.eco-comp-delta { display: flex; align-items: center; gap: 12px; padding-top: 8px; border-top: 1px solid #F1F5F9; }
.eco-comp-delta-badge { font-size: 12px; font-weight: 800; color: var(--color-success-dark); background: var(--color-success-bg); padding: 4px 10px; border-radius: 6px; }
.eco-comp-delta-eur { font-size: 12px; font-weight: 600; color: #334155; }

/* Bottom Bar */
.eco-bottombar { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; background: white; border-top: 1px solid #E2E8F0; flex-wrap: wrap; gap: 10px; }
.eco-bottombar-info { font-size: 10px; color: #94A3B8; display: flex; align-items: center; gap: 5px; }
.eco-bottombar-info svg { width: 11px; height: 11px; }
.eco-bottombar-actions { display: flex; gap: 6px; }
.eco-action-btn { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 7px; border: 1px solid #E2E8F0; background: white; font-size: 11px; font-weight: 600; color: #334155; cursor: default; transition: all 0.15s; }
.eco-action-btn svg { width: 12px; height: 12px; }
.eco-action-primary { background: var(--color-success); color: white; border-color: var(--color-success); }

/* ECO Mockup Responsive */
@media (max-width: 1200px) {
    .eco-kpi-row { grid-template-columns: repeat(3, 1fr); }
    .eco-main { grid-template-columns: 1fr; }
    .eco-rooms-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .eco-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .eco-rooms-grid { grid-template-columns: repeat(3, 1fr); }
    .eco-mockup-label { flex-direction: column; align-items: flex-start; }
    .eco-mockup-label .mockup-subtitle { margin-left: 0; }
}
@media (max-width: 480px) {
    .eco-kpi-row { grid-template-columns: 1fr; }
    .eco-rooms-grid { grid-template-columns: repeat(2, 1fr); }
    .eco-comparison { margin: 0 12px 12px; }
}

/* =====================================================
   DIGITAL TWIN - DASHBOARD MOCKUP
   ===================================================== */

.dt-mockup-wrapper { margin-top: 32px; border-radius: 20px; overflow: hidden; border: 2px solid #C7D2FE; background: #EEF2FF; }
.dt-mockup-label { display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: linear-gradient(135deg, #312E81 0%, #4338CA 100%); color: white; flex-wrap: wrap; }
.dt-dashboard { background: var(--bg-secondary); font-family: var(--font-primary); }

/* Top Bar */
.dt-topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; background: white; border-bottom: 1px solid #E2E8F0; }
.dt-topbar-left { display: flex; align-items: center; gap: 10px; }
.dt-topbar-logo { height: 22px; object-fit: contain; }
.dt-topbar-name { font-size: 14px; font-weight: 700; color: #312E81; }
.dt-topbar-divider { width: 1px; height: 20px; background: #E2E8F0; }
.dt-topbar-building { font-size: 12px; font-weight: 600; color: #64748B; }
.dt-topbar-right { display: flex; align-items: center; gap: 14px; }
.dt-score-badge { width: 38px; height: 38px; position: relative; }
.dt-score-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.dt-score-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 11px; font-weight: 800; color: var(--color-indigo); }
.dt-score-info { display: flex; flex-direction: column; }
.dt-score-label { font-size: 9px; font-weight: 700; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.5px; }
.dt-score-level { font-size: 11px; font-weight: 800; color: var(--color-indigo); letter-spacing: 0.5px; }
.dt-live { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #22C55E; }
.dt-live-dot { width: 7px; height: 7px; background: #22C55E; border-radius: 50%; animation: bmsPulse 2s infinite; }

/* Main grid */
.dt-main { display: grid; grid-template-columns: 1fr 360px; gap: 14px; padding: 14px 18px; }
.dt-side { display: flex; flex-direction: column; gap: 14px; }

/* Panels */
.dt-panel { background: white; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); border: 1px solid #E2E8F0; overflow: hidden; }
.dt-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #F1F5F9; }
.dt-panel-header h3 { font-size: 13px; font-weight: 700; color: var(--alfred-cobalto); display: flex; align-items: center; gap: 7px; margin: 0; }
.dt-panel-header h3 svg { width: 14px; height: 14px; color: #64748B; }

/* Overlay toggles */
.dt-overlay-toggles { display: flex; gap: 4px; }
.dt-overlay-btn { font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: #F1F5F9; color: #64748B; cursor: default; text-transform: uppercase; letter-spacing: 0.3px; }
.dt-overlay-btn.dt-overlay-active { background: var(--ov-color, var(--color-indigo)); color: white; }

/* Isometric Building */
.dt-iso-container { padding: 16px; display: flex; justify-content: center; align-items: center; min-height: 280px; perspective: 800px; }
.dt-iso-building { transform: rotateX(55deg) rotateZ(-45deg); transform-style: preserve-3d; display: flex; flex-direction: column-reverse; gap: 4px; }
.dt-iso-floor { transform-style: preserve-3d; transition: all 0.3s; position: relative; }
.dt-floor-label { position: absolute; left: -36px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 800; color: var(--color-indigo); width: 28px; text-align: right; }
.dt-floor-body { display: flex; gap: 3px; padding: 6px; background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.15); border-radius: 4px; min-width: 200px; }
.dt-zone { flex: 1; padding: 6px 5px; background: var(--zone-color, #22C55E); opacity: 0.2; border-radius: 3px; text-align: center; transition: all 0.2s; min-width: 40px; position: relative; }
.dt-zone:hover { opacity: 0.5; transform: translateZ(8px); }
.dt-zone-name { font-size: 7px; font-weight: 700; color: var(--alfred-cobalto); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-zone-val { font-size: 10px; font-weight: 800; color: var(--alfred-cobalto); }

/* Systems Grid */
.dt-systems-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 10px; }
.dt-system-card { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-secondary); border-radius: 8px; border: 1px solid #F1F5F9; }
.dt-system-icon { width: 18px; height: 18px; object-fit: contain; }
.dt-system-info { flex: 1; min-width: 0; }
.dt-system-name { font-size: 9px; font-weight: 800; display: block; text-transform: uppercase; letter-spacing: 0.3px; }
.dt-system-stat { font-size: 10px; font-weight: 600; color: #334155; display: block; }
.dt-system-detail { font-size: 9px; color: #94A3B8; font-weight: 500; white-space: nowrap; }

/* SmartScore Compliance */
.dt-platinum-tag { font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 4px; background: var(--color-purple-bg); color: var(--color-indigo); text-transform: uppercase; letter-spacing: 0.5px; }
.dt-compliance-body { padding: 12px; }
.dt-ss-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #F1F5F9; }
.dt-ss-gauge { width: 70px; height: 70px; position: relative; flex-shrink: 0; }
.dt-ss-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.dt-ss-gauge-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
.dt-ss-score { font-size: 18px; font-weight: 800; color: var(--color-indigo); display: block; line-height: 1; }
.dt-ss-max { font-size: 9px; color: #94A3B8; font-weight: 600; }
.dt-ss-levels { display: flex; flex-direction: column; gap: 4px; }
.dt-ss-level { font-size: 10px; font-weight: 600; color: #94A3B8; display: flex; align-items: center; gap: 5px; }
.dt-ss-level-dot { width: 6px; height: 6px; border-radius: 50%; background: #E2E8F0; }
.dt-ss-level-active { color: var(--color-indigo); font-weight: 700; }
.dt-ss-level-active .dt-ss-level-dot { background: var(--color-indigo); }
.dt-ss-categories { display: flex; flex-direction: column; gap: 5px; }
.dt-ss-cat { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.dt-ss-cat-id { font-weight: 800; color: var(--color-indigo); min-width: 24px; }
.dt-ss-cat-name { font-weight: 600; color: #334155; min-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-ss-bar-wrap { flex: 1; height: 6px; background: #F1F5F9; border-radius: 3px; overflow: hidden; }
.dt-ss-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.dt-ss-cat-score { font-weight: 700; color: var(--alfred-cobalto); min-width: 30px; text-align: right; font-size: 10px; font-variant-numeric: tabular-nums; }

/* Predictive Maintenance */
.dt-predict-list { max-height: 160px; overflow-y: auto; }
.dt-predict-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--bg-secondary); }
.dt-predict-warning { border-left: 3px solid var(--color-warning); }
.dt-predict-info { border-left: 3px solid #3B82F6; }
.dt-predict-icon { font-size: 13px; margin-top: 1px; }
.dt-predict-content { flex: 1; min-width: 0; }
.dt-predict-zone { font-size: 10px; font-weight: 700; color: var(--alfred-cobalto); display: block; }
.dt-predict-msg { font-size: 10px; color: #64748B; display: block; line-height: 1.3; }

/* Bottom Bar */
.dt-bottombar { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; background: white; border-top: 1px solid #E2E8F0; flex-wrap: wrap; gap: 10px; }
.dt-bottombar-info { font-size: 10px; color: #94A3B8; display: flex; align-items: center; gap: 5px; }
.dt-bottombar-info svg { width: 11px; height: 11px; }
.dt-bottombar-actions { display: flex; gap: 6px; }
.dt-action-btn { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 7px; border: 1px solid #E2E8F0; background: white; font-size: 11px; font-weight: 600; color: #334155; cursor: default; transition: all 0.15s; }
.dt-action-btn svg { width: 12px; height: 12px; }
.dt-action-primary { background: var(--color-indigo); color: white; border-color: var(--color-indigo); }

/* DT Flow animation for static preview */
@keyframes dt-flow-anim { 0%{left:-30%;} 100%{left:100%;} }

/* DT Responsive */
@media (max-width: 1200px) { .dt-main { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .dt-mockup-label { flex-direction: column; align-items: flex-start; } .dt-mockup-label .mockup-subtitle { margin-left: 0; } .dt-systems-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .dt-iso-container { min-height: 200px; } }

/* =====================================================
   Product Analytics Module
   ===================================================== */
.pa-module { max-width: 1280px; margin: 0 auto; padding: 24px; }
.pa-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.pa-title { font-size: 22px; font-weight: 700; color: var(--alfred-cobalto); display: flex; align-items: center; gap: 8px; margin: 0; }
.pa-title svg { width: 22px; height: 22px; }
.pa-subtitle { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; }

.pa-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: all var(--transition-fast); }
.pa-btn svg { width: 14px; height: 14px; }
.pa-btn-secondary { background: var(--border-light); color: var(--text-color); }
.pa-btn-secondary:hover { background: var(--border-color); }

.pa-kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 24px; }
.pa-kpi-card { background: #fff; border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
.pa-kpi-icon { margin-bottom: 8px; }
.pa-kpi-icon svg { width: 20px; height: 20px; }
.pa-kpi-value { font-size: 26px; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.pa-kpi-label { font-size: 11px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 4px; }

.pa-charts-row { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 16px; margin-bottom: 24px; }
.pa-card { background: #fff; border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.pa-card-chart { min-height: 280px; }
.pa-card-chart canvas { max-height: 240px; }
.pa-card-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0 0 16px; display: flex; align-items: center; gap: 6px; }
.pa-card-title svg { width: 16px; height: 16px; color: var(--color-indigo); }

.pa-table-wrap { overflow-x: auto; }
.pa-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pa-table th { text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-secondary); border-bottom: 2px solid var(--border-light); }
.pa-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); color: var(--text-color); }
.pa-table tbody tr:hover { background: var(--bg-secondary); }
.pa-center { text-align: center; }
.pa-right { text-align: right; }
.pa-muted { color: var(--text-muted); font-size: 12px; }

.pa-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-circle); margin-right: 6px; vertical-align: middle; }
.pa-status-active { background: var(--color-success); }
.pa-status-warn { background: var(--color-warning); }
.pa-status-danger { background: var(--color-error); }

.pa-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; }
.pa-badge-purple { background: var(--color-purple-bg); color: var(--color-purple); }
.pa-badge-gray { background: var(--border-light); color: var(--text-secondary); }

.pa-event-stream { max-height: 400px; overflow-y: auto; }
.pa-event-row { display: grid; grid-template-columns: 80px 200px 160px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: 13px; align-items: center; }
.pa-event-time { color: var(--text-muted); font-size: 11px; font-family: monospace; }
.pa-event-user { color: var(--text-color); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-event-name { color: var(--color-indigo); font-weight: 600; }
.pa-event-detail { color: var(--text-secondary); }

.pa-empty { color: var(--text-muted); font-size: 14px; text-align: center; padding: 40px 0; }

@media (max-width: 1100px) {
    .pa-kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .pa-charts-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .pa-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .pa-event-row { grid-template-columns: 70px 1fr; }
    .pa-event-name, .pa-event-detail { display: none; }
}

/* =====================================================
   DEAL DETAIL & VISITAS TÉCNICAS
   ===================================================== */

/* ── Deal Detail: Stage Path Bar ─────────────────────────────────────────── */
.deal-stage-path {
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    overflow: hidden;
}
.deal-stage-path-scroll {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}
.deal-stage-path-scroll::-webkit-scrollbar { display: none; }
.deal-stage-sep {
    font-size: 14px;
    color: var(--border-color);
    padding: 0 2px;
    flex-shrink: 0;
    user-select: none;
}
.deal-stage-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
    flex-shrink: 0;
    min-width: 80px;
}
.deal-stage-step:hover:not([disabled]):not(.active) {
    background: var(--bg-secondary, #F9FAFB);
}
.deal-stage-step[disabled] { cursor: default; }
.deal-stage-step-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    background: var(--bg-secondary, #F3F4F6);
    color: var(--text-muted);
    border: 2px solid var(--border-color);
    transition: all 0.15s;
    flex-shrink: 0;
}
.deal-stage-step.past .deal-stage-step-dot {
    background: #D1FAE5;
    color: #059669;
    border-color: #6EE7B7;
}
.deal-stage-step.active .deal-stage-step-dot {
    background: var(--alfred-cobalto);
    color: #fff;
    border-color: var(--alfred-cobalto);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.deal-stage-step.won .deal-stage-step-dot {
    background: #D1FAE5;
    color: #059669;
    border-color: #6EE7B7;
}
.deal-stage-step.won.active .deal-stage-step-dot {
    background: #10B981;
    color: #fff;
    border-color: #10B981;
}
.deal-stage-step.lost .deal-stage-step-dot {
    background: #FEE2E2;
    color: #EF4444;
    border-color: #FCA5A5;
}
.deal-stage-step.lost.active .deal-stage-step-dot {
    background: #EF4444;
    color: #fff;
    border-color: #EF4444;
}
.deal-stage-step-label {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.3;
    max-width: 76px;
    white-space: normal;
}
.deal-stage-step.active .deal-stage-step-label {
    color: var(--alfred-cobalto);
    font-weight: 600;
}
.deal-stage-step.past .deal-stage-step-label {
    color: #059669;
}

/* ── Deal Detail: Health Card (sidebar) ──────────────────────────────────── */
.deal-sidebar-health-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}
.deal-health-loading {
    text-align: center;
    padding: 12px 0;
}
.deal-health-no-data {
    text-align: center;
    padding: 14px 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
.deal-health-card-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.deal-health-gauge-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.deal-health-gauge-wrap {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.deal-health-gauge-svg { display: block; }
.deal-health-gauge-score {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}
.deal-health-gauge-label {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}
.deal-health-risk-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}
.deal-health-risk-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    width: fit-content;
}
.deal-health-risk-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.deal-health-kpi-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.deal-health-kpi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}
.deal-health-kpi-label { color: var(--text-muted); }
.deal-health-kpi-val {
    font-weight: 600;
    color: var(--text-primary);
}
.deal-health-kpi-val.overdue { color: #EF4444; }
.deal-health-alerts {
    border-top: 1px solid var(--border-light);
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.deal-health-alert-item {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 11px;
    color: #92400E;
    line-height: 1.4;
}
.deal-health-alert-icon { flex-shrink: 0; }

/* ── Deal Detail: Sidebar Contacts Card ──────────────────────────────────── */
.deal-sidebar-contacts-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
}

/* ── Deal Detail: Tabs ────────────────────────────────────────────────────── */
.deal-detail-main--tabbed {
    gap: 0 !important;
}
.deal-detail-tabs {
    display: flex;
    gap: 2px;
    background: var(--bg-secondary, #F3F4F6);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.deal-detail-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    position: relative;
}
.deal-detail-tab:hover:not(.active) {
    background: rgba(255,255,255,0.6);
    color: var(--text-primary);
}
.deal-detail-tab.active {
    background: #fff;
    color: var(--alfred-cobalto);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.deal-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 10px;
    background: var(--alfred-cobalto);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
.deal-detail-tab-panel { display: none; flex-direction: column; gap: 16px; }
.deal-detail-tab-panel.active { display: flex; }

/* ── Deal Detail: Activity tab quick log ─────────────────────────────────── */
.deal-quick-log-card {
    padding: 14px 16px !important;
}
.deal-quick-actions-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.deal-quick-log-compose {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.deal-log-textarea {
    flex: 1;
    min-height: 60px;
    max-height: 120px;
    resize: vertical;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-secondary, #F9FAFB);
    font-family: inherit;
    transition: border-color 0.15s;
    outline: none;
}
.deal-log-textarea:focus { border-color: var(--alfred-cobalto); background: #fff; }

/* ── Deal Detail: Module ─────────────────────────────────────────────────── */
.deal-detail-module {
    max-width: 100%;
}

.deal-detail-header {
    margin-bottom: 16px;
}
.deal-detail-header .btn-ghost {
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: 13px;
}
.deal-detail-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.deal-detail-title-row h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin: 0;
}
.deal-detail-error {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.deal-detail-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    align-items: start;
}

.deal-detail-sidebar {
    position: sticky;
    top: 80px;
}
.deal-sidebar-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}
.deal-sidebar-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}
.deal-sidebar-item:last-child { border-bottom: none; }
.deal-sidebar-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 500;
}
.deal-sidebar-value {
    font-size: 14px;
    color: var(--text-primary);
}
.deal-sidebar-select {
    width: 100%;
    font-size: 13px;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}
.deal-sidebar-select:hover,
.deal-sidebar-select:focus {
    border-color: var(--alfred-cobalto);
}
/* Inline editable fields in deal sidebar */
.deal-sidebar-inline-edit {
    display: flex;
    align-items: center;
    gap: 4px;
}
.deal-sidebar-inline-input {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 8px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    min-width: 0;
}
.deal-sidebar-inline-input--amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--alfred-cobalto);
}
.deal-sidebar-inline-input:hover,
.deal-sidebar-inline-input:focus {
    border-color: var(--alfred-cobalto);
    background: var(--bg-secondary, #F9FAFB);
}
.deal-sidebar-inline-unit {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
}
.deal-sidebar-inline-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: var(--alfred-cobalto);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, opacity 0.15s;
}
.deal-sidebar-inline-save:hover { background: var(--alfred-cobalto-dark, #1E3A5F); }
.deal-sidebar-inline-save:disabled { opacity: 0.5; cursor: not-allowed; }

.stage-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: #EFF6FF;
    color: #2563EB;
}

.deal-detail-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.deal-section {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}
.deal-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.deal-section-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin: 0;
}

.empty-state-small {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 14px;
}

/* Visit Cards */
.visit-card {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    transition: box-shadow 0.2s;
}
.visit-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.visit-card:last-child { margin-bottom: 0; }

.visit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}
.visit-card-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    color: var(--text-primary);
}
.visit-card-date strong { font-size: 15px; }
.visit-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.visit-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.visit-urgent-tag {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid var(--color-error)20;
}
.visit-sla-tag {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
    border: 1px solid var(--color-warning-dark)20;
}

.visit-card-body {
    font-size: 13px;
    color: var(--text-secondary);
}
.visit-card-info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}
.visit-card-briefing,
.visit-card-rejection,
.visit-card-completion,
.visit-card-urgency {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 8px;
}
.visit-card-briefing { background: #F0F9FF; color: #1E40AF; }
.visit-card-rejection { background: #FEF2F2; color: #991B1B; }
.visit-card-completion { background: #F0FDF4; color: #166534; }
.visit-card-urgency { background: #FFF7ED; color: #9A3412; }

.visit-deadline {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}
.visit-deadline.expired { color: var(--color-error); font-weight: 600; }

.visit-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

/* Button variants */
.btn-success {
    background: var(--color-success);
    color: #fff;
    border: none;
}
.btn-success:hover { background: var(--color-success-dark); }
.btn-danger {
    background: var(--color-error);
    color: #fff;
    border: none;
}
.btn-danger:hover { background: var(--color-error-dark); }
.btn-ghost {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
}
.btn-ghost:hover { background: var(--border-light); color: var(--text-primary); }
.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
}
.btn-outline:hover { background: var(--bg-secondary); border-color: var(--text-muted); }

/* Proposal mini cards */
.proposal-card-mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 13px;
}
.proposal-card-mini:last-child { margin-bottom: 0; }
.proposal-status-completed { color: var(--color-success); font-weight: 500; margin-left: 8px; }
.proposal-status-pending { color: var(--color-warning); font-weight: 500; margin-left: 8px; }
.proposal-status-in_progress { color: #3B82F6; font-weight: 500; margin-left: 8px; }
.proposal-date { color: var(--text-muted); font-size: 12px; }

/* Activity timeline */
.activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.activity-entry {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--bg-secondary);
    align-items: baseline;
}
.activity-entry:last-child { border-bottom: none; }
.activity-time {
    color: var(--text-muted);
    font-size: 12px;
    min-width: 90px;
    flex-shrink: 0;
}
.activity-text { color: var(--text-color); flex: 1; }
.activity-visit-ref { color: var(--text-muted); font-size: 12px; }

/* Visit Form */
.visit-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 8px;
}

/* Visit Calendar Grid */
.visit-week-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.visit-week-label {
    font-weight: 600;
    color: var(--alfred-cobalto);
    font-size: 14px;
}

.visit-calendar-grid, .avail-calendar-grid {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}
.visit-cal-header {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}
.visit-cal-day-header {
    text-align: center;
    padding: 10px 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}
.visit-cal-day-header.today { color: #2563EB; background: #EFF6FF; }
.visit-cal-day-header small { font-weight: 400; color: var(--text-muted); }
.visit-cal-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-bottom: 1px solid var(--border-light);
}
.visit-cal-row:last-child { border-bottom: none; }

.visit-cal-cell {
    text-align: center;
    padding: 12px 4px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: default;
    transition: all 0.15s;
    border-right: 1px solid var(--border-light);
}
.visit-cal-cell:last-child { border-right: none; }
.visit-cal-cell.available {
    background: #F0FDF4;
    color: var(--color-success);
    cursor: pointer;
    font-weight: 500;
}
.visit-cal-cell.available:hover { background: var(--color-success-bg); }
.visit-cal-cell.selected {
    background: var(--color-success) !important;
    color: #fff !important;
    font-weight: 600;
}
.visit-cal-cell.busy {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
    font-size: 11px;
}
.visit-cal-cell.past { color: var(--border-color); }
.visit-cal-cell.unavailable { color: var(--border-color); }

/* Availability Management Calendar */
.avail-cal-cell {
    text-align: center;
    padding: 12px 4px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    user-select: none;
}
.avail-cal-cell:last-child { border-right: none; }
.avail-cal-cell:hover { background: #F0FDF4; }
.avail-cal-cell.active {
    background: var(--color-success);
    color: #fff;
    font-weight: 600;
}

/* OPS Inbox Widget (inicio.js) */
.ops-inbox-widget {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}
.ops-inbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.ops-inbox-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin: 0;
}
.ops-inbox-count {
    background: var(--color-error);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}
.ops-visit-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    gap: 12px;
    flex-wrap: wrap;
}
.ops-visit-item:last-child { margin-bottom: 0; }
.ops-visit-info { flex: 1; min-width: 200px; }
.ops-visit-info strong { display: block; color: var(--text-primary); margin-bottom: 2px; }
.ops-visit-info span { font-size: 12px; color: var(--text-secondary); }
.ops-visit-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.ops-confirmed-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.ops-confirmed-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 500;
}
.ops-visit-confirmed {
    border-color: var(--color-success-bg);
}
.ops-error-text {
    color: var(--color-error);
    font-size: 14px;
    margin: 0;
}

/* Badge in sidebar */
.sidebar-badge {
    background: var(--color-error);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    margin-left: auto;
}

/* Stage Deals Drawer (Pipeline funnel) */
.stage-deals-drawer {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1100;
}
.stage-deals-drawer .drawer-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.35);
    animation: fadeIn 0.2s ease;
}
.stage-deals-drawer .drawer-panel {
    position: absolute;
    top: 0; right: 0;
    width: 440px; max-width: 90vw;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    animation: slideInRight 0.3s ease;
}
.stage-deals-drawer .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.stage-deals-drawer .drawer-header h2 {
    margin: 0; font-size: 17px; font-weight: 600; color: var(--alfred-cobalto);
}
.stage-deals-drawer .drawer-body {
    flex: 1; overflow-y: auto; padding: 16px 20px;
}

/* Summary row */
.sdd-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}

/* Sort toolbar */
.sdd-sort-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.sdd-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-primary, #fff);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.sdd-sort-btn:hover {
    border-color: var(--alfred-indigo);
    color: var(--alfred-indigo);
}
.sdd-sort-btn.active {
    background: var(--alfred-indigo);
    border-color: var(--alfred-indigo);
    color: #fff;
}

/* Deal card */
.stage-drawer-deal {
    display: flex;
    align-items: flex-start;
    padding: 11px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.stage-drawer-deal.sdd-hover {
    background: var(--bg-secondary);
}
.sdd-deal-info {
    flex: 1;
    min-width: 0;
}
.sdd-deal-name {
    font-size: 14px;
    color: var(--alfred-indigo);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
    display: block;
}

/* Sticky action bar */
.sdd-action-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0 4px;
    background: #fff;
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
}
.sdd-selected-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--alfred-indigo);
}
.sdd-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.sdd-remind-btn {
    background: var(--alfred-indigo);
    color: #fff;
}
.sdd-remind-btn:hover {
    background: var(--alfred-cobalto);
}

/* ════════════════════════════════════════════════════
   VISIT REPORT – Mobile-first structured form
   ════════════════════════════════════════════════════ */

.report-form {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 12px 40px;
}

.report-sticky-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    padding: 12px 0;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.report-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.report-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    margin: 0;
    line-height: 1.2;
}
.report-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}
.report-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.report-status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 10px;
}
.report-status-badge.draft {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
}
.report-status-badge.completed {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
}

/* Sections accordion */
.report-sections {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.report-section {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.report-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    user-select: none;
    transition: background 0.15s;
}
.report-section-header:hover {
    background: var(--bg-secondary);
}
.report-section-chevron {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.report-section-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 16px;
}
.report-section-body.open {
    max-height: 2000px;
    padding: 0 16px 16px;
}

/* Field groups */
.report-field-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.report-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.report-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.report-field-full {
    grid-column: 1 / -1;
}
.report-input {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    background: #fff;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.report-input:focus {
    outline: none;
    border-color: #4F46E5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}
.report-textarea {
    resize: vertical;
    min-height: 60px;
}
.report-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}
.report-value-block {
    background: var(--bg-secondary);
    padding: 10px 12px;
    border-radius: 8px;
    white-space: pre-wrap;
    min-height: 40px;
}

/* Toggle switch */
.report-toggle-field {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.report-toggle-field label:first-child {
    flex: 1;
}
.report-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
}
.report-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.report-toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--border-color);
    border-radius: 24px;
    transition: background 0.2s;
}
.report-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
}
.report-toggle input:checked + .report-toggle-slider {
    background: var(--color-success);
}
.report-toggle input:checked + .report-toggle-slider::before {
    transform: translateX(20px);
}

/* Photo grid */
.report-photos-area {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
}
.report-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}
.report-photo-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.report-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.report-photo-thumb.uploading {
    border: 2px dashed var(--border-color);
}
.report-photo-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 10px;
    padding: 3px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.report-photo-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(239,68,68,0.9);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}
.report-photo-thumb:hover .report-photo-delete {
    opacity: 1;
}
.report-photo-capture {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--border-light);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #4F46E5;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}
.report-photo-capture:hover {
    background: #EEF2FF;
    border-color: #4F46E5;
}

/* Lightbox */
.report-lightbox {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: pointer;
}
.report-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    object-fit: contain;
    cursor: default;
}
.report-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Loading in report */
.report-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

/* Responsive */
@media (max-width: 768px) {
    .deal-detail-layout {
        grid-template-columns: 1fr;
    }
    .deal-detail-sidebar {
        position: static;
    }
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
    .deal-stage-step { min-width: 64px; padding: 6px 6px; }
    .deal-stage-step-label { max-width: 60px; font-size: 9px; }
    .deal-detail-tab { font-size: 12px; padding: 6px 10px; }
    .deal-quick-log-compose { flex-direction: column; align-items: stretch; }

    .report-form { padding: 0 8px 30px; }
    .report-sticky-header {
        padding: 10px 0;
        flex-direction: column;
        align-items: flex-start;
    }
    .report-title { font-size: 17px; }
    .report-subtitle { max-width: 220px; }
    .report-field-group { grid-template-columns: 1fr; }
    .report-section-header { padding: 12px 14px; font-size: 14px; }
    .report-photo-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
    .report-photo-delete { opacity: 1; }
}

/* =====================================================
   Inicio Module - Dashboard (dash-*, kpi-*, admin-*)
   ===================================================== */
#dashboard-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 24px;
}

/* ── Inicio grid layout ── */
.inicio-module {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.inicio-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.inicio-kpi-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    border-top: 3px solid transparent;
}
.inicio-kpi-card:hover {
    border-color: var(--alfred-indigo);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.inicio-kpi-card-top {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}
.inicio-kpi-card-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--alfred-cobalto);
}
.inicio-kpi-card-sub {
    font-size: 11px;
    color: var(--text-muted);
}
.inicio-kpi-card-bar {
    height: 4px;
    background: var(--border-light);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}
.inicio-kpi-card-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}
.inicio-kpi-accent-indigo { border-top-color: var(--alfred-indigo); }
.inicio-kpi-accent-indigo .inicio-kpi-card-value { color: var(--alfred-indigo); }
.inicio-kpi-accent-green  { border-top-color: var(--color-success-dark); }
.inicio-kpi-accent-green  .inicio-kpi-card-value { color: var(--color-success-dark); }
.inicio-kpi-accent-success { border-top-color: var(--color-success-dark); }
.inicio-kpi-accent-success .inicio-kpi-card-value { color: var(--color-success-dark); }
.inicio-kpi-accent-red    { border-top-color: #EF4444; }
.inicio-kpi-accent-red    .inicio-kpi-card-value { color: #DC2626; }
.inicio-kpi-accent-amber  { border-top-color: #F59E0B; }
.inicio-kpi-accent-amber  .inicio-kpi-card-value { color: #D97706; }
.inicio-kpi-accent-neutral .inicio-kpi-card-value { color: var(--alfred-cobalto); }

.inicio-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: start;
}
.inicio-left  { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.inicio-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.inicio-goals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.inicio-goal-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.inicio-goal-card:hover { border-color: var(--alfred-indigo); }
.inicio-goal-card-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.inicio-goal-progress {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-bottom: 10px;
}
.inicio-goal-current {
    font-size: 36px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    line-height: 1;
}
.inicio-goal-sep { font-size: 22px; color: var(--border-color); }
.inicio-goal-total { font-size: 22px; color: var(--text-muted); }
.inicio-goal-text { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }

.inicio-section-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
}
.inicio-section-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.inicio-section-header a,
.inicio-section-header span[role="button"] {
    font-size: 11px;
    font-weight: 500;
    color: var(--alfred-indigo);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    text-decoration: none;
}
.inicio-pipeline-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.inicio-pipeline-card {
    background: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.inicio-pipeline-card:hover {
    border-color: var(--alfred-indigo);
    background: #fff;
}
.inicio-pipeline-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    line-height: 1.1;
}
.inicio-pipeline-label { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.inicio-pipeline-sub   { font-size: 11px; color: var(--alfred-indigo); font-weight: 500; margin-top: 2px; }

/* Right column: deal health + meetings/tasks stacked */
.inicio-right .inicio-health-mt-grid {
    grid-template-columns: 1fr;
    gap: 8px;
}
.inicio-right .inicio-health-mt-col { border-radius: 8px; }

.inicio-billing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 10px;
}
.inicio-billing-tile {
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.inicio-billing-tile:hover { background: var(--bg-secondary, #f9fafb); }
.inicio-billing-tile-value { font-size: 17px; font-weight: 700; }
.inicio-billing-tile-label { font-size: 11px; margin-top: 2px; }
.inicio-billing-tile-sub   { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.dash-header { margin-bottom: 32px; }
.dash-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.dash-header h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin: 0 0 4px 0;
    letter-spacing: -0.5px;
}
.dash-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}
.dash-period-selector {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.dash-period-selector select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-color);
    font-size: 13px;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}
.dash-period-selector select:hover,
.dash-period-selector select:focus {
    border-color: var(--alfred-indigo);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 88, 152, 0.1);
}
.dash-period-indicator {
    font-size: 11px;
    color: var(--color-warning-dark);
    background: var(--color-warning-bg);
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    font-weight: 500;
}
.dash-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 16px;
}
.card-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.progress-display {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 16px;
}
.progress-current {
    font-size: 48px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    line-height: 1;
}
.progress-separator {
    font-size: 32px;
    color: var(--border-color);
}
.progress-goal {
    font-size: 32px;
    color: var(--text-muted);
}
.progress-bar-wrap {
    height: 8px;
    background: var(--border-light);
    border-radius: var(--radius-xs);
    overflow: hidden;
    margin-bottom: 12px;
}
.progress-bar-fill {
    height: 100%;
    background: var(--alfred-indigo);
    border-radius: var(--radius-xs);
    transition: width 0.4s ease;
}
.progress-bar-green { background: var(--color-success-dark); }
.progress-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}
.dash-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 24px 0 12px 0;
}
.kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}
.kpi-item {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px 16px;
    text-align: center;
}
.kpi-number {
    font-size: 28px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    line-height: 1.2;
}
.kpi-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}
.kpi-sub {
    font-size: 12px;
    color: var(--alfred-indigo);
    font-weight: 500;
    margin-top: 4px;
}
.kpi-success .kpi-number { color: var(--color-success-dark); }
.kpi-success .kpi-sub { color: var(--color-success-dark); }
.kpi-muted .kpi-number { color: var(--border-color); }
.kpi-muted .kpi-sub { color: var(--text-muted); font-weight: 400; }
.dash-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.dash-btn {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text-color);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.dash-btn:hover {
    border-color: var(--alfred-indigo);
    color: var(--alfred-indigo);
}
.dash-btn-primary {
    background: var(--alfred-indigo);
    border-color: var(--alfred-indigo);
    color: #fff;
}
.dash-btn-primary:hover {
    background: var(--alfred-cobalto);
    border-color: var(--alfred-cobalto);
    color: #fff;
}
/* Admin Dashboard */
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.admin-kpi-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px;
    text-align: center;
}
.admin-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.admin-kpi-icon svg { width: 18px; height: 18px; }
.admin-kpi-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}
.admin-kpi-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.admin-kpi-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.admin-aging-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 16px;
}
.admin-aging-item {
    background: rgba(255,255,255,0.7);
    border-radius: var(--radius-md);
    padding: 10px 8px;
    text-align: center;
}
.admin-aging-value {
    font-size: 16px;
    font-weight: 700;
}
.admin-aging-label {
    font-size: 11px;
    color: #92400E;
    margin-top: 2px;
}
.admin-aging-count {
    font-size: 10px;
    color: #B45309;
    margin-top: 1px;
}
.admin-commercial-table {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
}
.admin-table-header {
    display: grid;
    grid-template-columns: 1.5fr repeat(5, 1fr);
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.admin-table-row {
    display: grid;
    grid-template-columns: 1.5fr repeat(5, 1fr);
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
    color: var(--text-color);
    transition: background var(--transition-fast);
}
.admin-table-row:last-child { border-bottom: none; }
.admin-table-row:hover { background: var(--bg-secondary); }
.admin-table-total {
    background: #F0F9FF;
    font-weight: 600;
    color: var(--alfred-cobalto);
    border-top: 2px solid var(--border-color);
}
.admin-table-total:hover { background: #F0F9FF; }
.admin-col-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Commission Drawer */
.commission-drawer-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 61, 89, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    animation: fadeIn 0.2s ease;
}
.commission-drawer {
    width: 100%;
    max-width: 480px;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
}
.commission-drawer-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, var(--alfred-indigo) 100%);
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
}
.commission-drawer-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    flex: 1;
}
.commission-month {
    font-size: 13px;
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}
.commission-role-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    color: white;
    letter-spacing: 0.5px;
}
.commission-drawer-close {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
}
.commission-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}
.commission-total-card {
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, var(--alfred-indigo) 100%);
    border-radius: var(--radius-xl);
    padding: 24px;
    text-align: center;
    color: white;
    margin-bottom: 24px;
}
.commission-total-label {
    font-size: 12px;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 8px;
}
.commission-total-value {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 4px;
}
.commission-total-hint {
    font-size: 12px;
    opacity: 0.7;
}
.commission-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    overflow: hidden;
}
.commission-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: white;
    border-bottom: 1px solid var(--border-color);
}
.commission-section-letter {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: var(--alfred-indigo);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.commission-section-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--alfred-cobalto);
}
.commission-section-body { padding: 16px; }
.commission-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.commission-row-label {
    font-size: 13px;
    color: var(--text-secondary);
}
.commission-row-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--alfred-cobalto);
}
.commission-input-group { margin-bottom: 12px; }
.commission-input-group label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.commission-input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    transition: border-color var(--transition-fast);
}
.commission-input:focus {
    outline: none;
    border-color: var(--alfred-indigo);
}
.commission-progress-wrap {
    height: 8px;
    background: var(--border-color);
    border-radius: var(--radius-xs);
    overflow: hidden;
    margin-bottom: 12px;
}
.commission-progress-bar {
    height: 100%;
    background: var(--alfred-indigo);
    border-radius: var(--radius-xs);
    transition: width 0.3s ease;
}
.commission-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}
.commission-result .result-percentage {
    font-weight: 700;
    font-size: 14px;
    color: var(--alfred-cobalto);
    min-width: 50px;
}
.commission-result .result-rate {
    font-size: 12px;
    color: var(--text-secondary);
    flex: 1;
}
.commission-result .result-amount {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-success-dark);
}
.commission-result.no-commission {
    background: var(--color-error-bg);
    border-color: #FECACA;
}
.commission-result.no-commission .result-percentage,
.commission-result.no-commission .result-amount {
    color: var(--color-error-dark);
}
.commission-summary {
    background: #f0f7ff;
    border: 2px solid var(--alfred-indigo);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 20px;
}
.commission-summary h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--alfred-cobalto);
}
.commission-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #DBEAFE;
    font-size: 13px;
}
.commission-summary-total {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    margin-top: 4px;
    font-weight: 700;
    font-size: 15px;
    color: var(--alfred-cobalto);
}
.commission-tiers-info { margin-bottom: 20px; }
.commission-tiers-info h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--alfred-cobalto);
}
.commission-tiers-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.commission-tiers-table th,
.commission-tiers-table td {
    padding: 8px 10px;
    text-align: center;
    border: 1px solid var(--border-color);
}
.commission-tiers-table th {
    background: var(--border-light);
    font-weight: 600;
}
.commission-tiers-table .tier-danger {
    background: var(--color-error-bg);
    color: var(--color-error-dark);
}
.commission-tiers-table .tier-success {
    background: #F0FDF4;
    color: #166534;
    font-weight: 600;
}
.commission-disclaimer {
    padding: 12px 14px;
    background: var(--color-warning-bg);
    border-radius: var(--radius-md);
    font-size: 11px;
    color: #92400E;
    line-height: 1.5;
}
.commission-drawer-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    display: flex;
    gap: 12px;
}
.commission-btn-info {
    flex: 1;
    padding: 14px;
    background: white;
    color: var(--alfred-cobalto);
    border: 2px solid var(--alfred-cobalto);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.commission-btn-info:hover {
    background: var(--alfred-cobalto);
    color: white;
}
.commission-btn-copy {
    flex: 1;
    padding: 14px;
    background: linear-gradient(135deg, var(--alfred-indigo), var(--alfred-cobalto));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.commission-btn-copy:hover { background: var(--alfred-cobalto); }
.kpi-commission:hover {
    border-color: var(--alfred-indigo) !important;
    box-shadow: 0 4px 12px rgba(0, 88, 152, 0.15) !important;
}

/* Meetings Drawer */
.meetings-drawer-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: flex-end;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}
.meetings-drawer {
    width: 100%;
    max-width: 420px;
    height: 100%;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}
.meetings-drawer-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, var(--alfred-indigo) 100%);
    color: white;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.meetings-drawer-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    flex: 1;
}
.meetings-month {
    font-size: 12px;
    opacity: 0.9;
    background: rgba(255,255,255,0.2);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}
.meetings-drawer-close {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    line-height: 1;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}
.meetings-drawer-close:hover { opacity: 1; }
.meetings-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.meetings-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.meetings-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}
.summary-number {
    font-size: 24px;
    font-weight: 700;
    color: var(--alfred-cobalto);
}
.summary-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.meetings-summary-divider {
    width: 1px;
    height: 40px;
    background: var(--border-color);
}
.meetings-progress-section {
    background: white;
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}
.meetings-progress-bar {
    height: 8px;
    background: var(--border-color);
    border-radius: var(--radius-xs);
    overflow: hidden;
}
.meetings-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--alfred-indigo), var(--color-success));
    border-radius: var(--radius-xs);
    transition: width 0.5s ease;
}
.meetings-progress-text {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 8px;
}
.meetings-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 0 4px;
}
.meetings-list-header span:first-child {
    font-weight: 600;
    color: var(--alfred-cobalto);
    font-size: 14px;
}
.meetings-count {
    font-size: 12px;
    color: var(--text-secondary);
}
.meetings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.meeting-item {
    display: flex;
    gap: 12px;
    background: white;
    border-radius: var(--radius-md);
    padding: 14px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.meeting-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.meeting-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.meeting-content { flex: 1; min-width: 0; }
.meeting-title {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.meeting-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}
.meeting-status { font-weight: 500; }
.meetings-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    background: white;
    border-radius: var(--radius-lg);
}

/* Weekly Deals Drawer */
.weekly-deals-drawer-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: flex-end;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}
.weekly-deals-drawer {
    width: 100%;
    max-width: 440px;
    height: 100%;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}
.weekly-deals-drawer-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, var(--alfred-indigo) 100%);
    color: white;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.weekly-deals-drawer-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    flex: 1;
}
.weekly-deals-week {
    font-size: 12px;
    opacity: 0.9;
    background: rgba(255,255,255,0.2);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}
.weekly-deals-drawer-close {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    line-height: 1;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}
.weekly-deals-drawer-close:hover { opacity: 1; }
.weekly-deals-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.weekly-deals-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.weekly-deals-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}
.weekly-deals-summary-item .summary-number { font-size: 24px; font-weight: 700; }
.weekly-deals-summary-item .summary-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.weekly-deals-summary-divider {
    width: 1px;
    height: 40px;
    background: var(--border-color);
}
.weekly-deals-progress-section {
    background: white;
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}
.weekly-deals-progress-bar {
    height: 8px;
    background: var(--border-color);
    border-radius: var(--radius-xs);
    overflow: hidden;
}
.weekly-deals-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--alfred-indigo), var(--color-success));
    border-radius: var(--radius-xs);
    transition: width 0.5s ease;
}
.weekly-deals-progress-text {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 8px;
}
.weekly-deals-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 0 4px;
}
.weekly-deals-list-header span:first-child {
    font-weight: 600;
    color: var(--alfred-cobalto);
    font-size: 14px;
}
.weekly-deals-count {
    font-size: 12px;
    color: var(--text-secondary);
}
.weekly-deals-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.deal-item {
    display: flex;
    gap: 12px;
    background: white;
    border-radius: var(--radius-md);
    padding: 14px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    align-items: flex-start;
    color: inherit;
}
.deal-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.deal-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.deal-content { flex: 1; min-width: 0; }
.deal-title {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.deal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.deal-stage { font-weight: 500; }
.deal-warning {
    font-size: 11px;
    color: var(--color-warning);
    margin-top: 6px;
    padding: 4px 8px;
    background: rgba(245,158,11,0.1);
    border-radius: var(--radius-xs);
    display: inline-block;
}
.deal-arrow {
    color: var(--alfred-indigo);
    font-size: 16px;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
    align-self: center;
}
.deal-item:hover .deal-arrow { opacity: 1; }
.deals-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    background: white;
    border-radius: var(--radius-lg);
}

/* Billing Drawer */
.billing-drawer-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    justify-content: flex-end;
    animation: fadeIn 0.2s ease;
}
.billing-drawer {
    width: 100%;
    max-width: 480px;
    height: 100%;
    background: var(--bg-primary);
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease;
}
.billing-drawer-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.billing-drawer-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}
.billing-period {
    font-size: 13px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}
.billing-drawer-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: var(--radius-circle);
    font-size: 20px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}
.billing-drawer-close:hover {
    background: var(--border-color);
    color: var(--text-primary);
}
.billing-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}
.billing-summary {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.billing-total-label {
    font-size: 13px;
    color: var(--text-muted);
    display: block;
}
.billing-total-value {
    font-size: 24px;
    font-weight: 700;
}
.billing-summary-count {
    font-size: 13px;
    color: var(--text-muted);
    text-align: right;
}
.billing-old-note {
    display: block;
    font-size: 11px;
    color: #CA8A04;
}
.billing-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.billing-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}
.billing-item-row:hover {
    border-color: var(--alfred-teal);
    background: #ffffff;
}
.billing-item-main { flex: 1; min-width: 0; }
.billing-item-number {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.billing-type-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.billing-type-puntual { background: #DCFCE7; color: #166534; }
.billing-type-recurrente { background: #DBEAFE; color: #1E40AF; }
.billing-type-mixta { background: var(--color-purple-bg); color: var(--color-purple); }
.billing-subtype-badge {
    font-size: 9px;
    font-weight: 500;
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    background: var(--border-light);
    color: var(--text-secondary);
}
.billing-item-customer {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.billing-item-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}
.billing-item-amount {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    margin-left: 16px;
}
.billing-status {
    padding: 2px 8px;
    border-radius: var(--radius-md);
    font-size: 10px;
    font-weight: 500;
}
.billing-status-paid { background: #DCFCE7; color: #166534; }
.billing-status-open { background: #FEF9C3; color: #A16207; }
.billing-old-badge {
    background: var(--color-warning-bg);
    color: #92400E;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-size: 10px;
}
.billing-partial-badge {
    background: #FEF9C3;
    color: #A16207;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-size: 10px;
    font-weight: 600;
}
.billing-split-badge {
    background: #EDE9FE;
    color: #6D28D9;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-size: 10px;
    font-weight: 600;
}
.billing-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}
.billing-item-clickable:hover { background: rgba(0,178,169,0.1) !important; }

/* ── KAM Inicio: Highlights Bar ─────────────────────────────────────────── */
.inicio-highlights-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.inicio-highlight-tile {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.inicio-highlight-tile:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-color: var(--border-color-hover, #CBD5E1);
}
.inicio-highlight-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.inicio-hi-blue    { background: #3B82F6; }
.inicio-hi-green   { background: #10B981; }
.inicio-hi-emerald { background: #059669; }
.inicio-hi-amber   { background: #F59E0B; }
.inicio-highlight-content { min-width: 0; flex: 1; }
.inicio-highlight-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}
.inicio-highlight-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}
.inicio-highlight-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.inicio-risk-pill {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
}
.inicio-risk-pill--critical { background: #FEE2E2; color: #B91C1C; }
.inicio-risk-pill--warning  { background: #FEF3C7; color: #92400E; }

/* ── KAM Inicio: Two-column grid v2 ──────────────────────────────────────── */
.inicio-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
}
.inicio-left-v2, .inicio-right-v2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── KAM Inicio: Pipeline Funnel ─────────────────────────────────────────── */
.inicio-funnel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.inicio-funnel-row {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 4px 2px;
    border-radius: 6px;
    transition: background 0.12s;
}
.inicio-funnel-row:hover { background: var(--bg-secondary, #F9FAFB); }
.inicio-funnel-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inicio-funnel-bar-wrap {
    background: var(--bg-secondary, #F3F4F6);
    border-radius: 4px;
    height: 10px;
    overflow: hidden;
}
.inicio-funnel-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}
.inicio-funnel-stats {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 11px;
    white-space: nowrap;
}
.inicio-funnel-count { color: var(--text-muted); }
.inicio-funnel-amount { font-weight: 700; }

/* ── KAM Inicio: Closing Soon list ──────────────────────────────────────── */
.inicio-closing-list {
    display: flex;
    flex-direction: column;
}
.inicio-closing-row {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-light, #F3F4F6);
    transition: background 0.12s;
}
.inicio-closing-row:last-child { border-bottom: none; }
.inicio-closing-row:hover { background: var(--bg-secondary, #F9FAFB); }
.inicio-closing-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.inicio-closing-info { min-width: 0; }
.inicio-closing-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inicio-closing-meta {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inicio-closing-right {
    text-align: right;
    flex-shrink: 0;
}
.inicio-closing-amount {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}
.inicio-closing-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.inicio-closing-date.urgent { color: #B45309; font-weight: 600; }
.inicio-closing-date.overdue { color: #B91C1C; font-weight: 600; }

/* ── KAM Inicio: Activity Feed ───────────────────────────────────────────── */
.inicio-activity-feed {
    display: flex;
    flex-direction: column;
}
.inicio-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-light, #F3F4F6);
    transition: background 0.12s;
}
.inicio-activity-item:last-child { border-bottom: none; }
.inicio-activity-item:hover { background: var(--bg-secondary, #F9FAFB); }
.inicio-activity-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.inicio-activity-body { min-width: 0; }
.inicio-activity-deal {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inicio-activity-meta { font-size: 11px; color: var(--text-muted); }

/* ── KAM Inicio: Objective Tracker ──────────────────────────────────────── */
.inicio-obj-tracker { display: flex; flex-direction: column; gap: 14px; }
.inicio-obj-weekly-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light, #F3F4F6);
}
.inicio-obj-ring-wrap {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inicio-obj-ring-val {
    position: absolute;
    font-size: 16px;
    font-weight: 800;
    color: #6366F1;
    line-height: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.inicio-obj-weekly-info { flex: 1; }
.inicio-obj-bar-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.inicio-obj-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.inicio-obj-label { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.inicio-obj-bar-track {
    height: 8px;
    background: var(--bg-secondary, #F3F4F6);
    border-radius: 4px;
    overflow: hidden;
}
.inicio-obj-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}
/* Commission tier */
.inicio-obj-tier {
    border-top: 1px solid var(--border-light, #F3F4F6);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.inicio-obj-tier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.inicio-obj-tier-badge {
    font-size: 13px;
    font-weight: 800;
}
.inicio-obj-tier-track {
    display: flex;
    align-items: center;
    gap: 0;
}
.inicio-obj-tier-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.inicio-obj-tier-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--tier-color, #9CA3AF);
    background: #fff;
    transition: background 0.15s;
}
.inicio-obj-tier-step.reached .inicio-obj-tier-dot {
    background: var(--tier-color, #9CA3AF);
}
.inicio-obj-tier-step-label {
    font-size: 9px;
    color: var(--text-muted);
    text-align: center;
}
.inicio-obj-tier-line {
    flex: 1;
    height: 2px;
    background: var(--border-color, #E5E7EB);
    margin-bottom: 15px;
}
.inicio-obj-tier-next {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}

/* Inicio Responsive */
@media (max-width: 1100px) {
    .inicio-highlights-bar { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .inicio-highlights-bar { grid-template-columns: repeat(2, 1fr); }
    .inicio-grid-v2 { grid-template-columns: 1fr; }
    .inicio-right-v2 { order: -1; }
    .inicio-grid { grid-template-columns: 1fr; }
    .inicio-right { order: -1; } /* health widget first on mobile */
    .inicio-kpi-strip { grid-template-columns: repeat(3, 1fr); }
    .inicio-billing-grid { grid-template-columns: repeat(2, 1fr); }
    .inicio-right .inicio-health-mt-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .admin-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-aging-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-commercial-table { overflow-x: auto; }
    .admin-table-header, .admin-table-row { min-width: 520px; font-size: 11px; }
    .billing-drawer { max-width: 100%; }
    .inicio-goals-grid { grid-template-columns: 1fr; }
    .inicio-pipeline-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    #dashboard-content { padding: 16px 12px; }
    .dash-header-top { flex-direction: column; gap: 12px; }
    .dash-period-selector { width: 100%; justify-content: flex-start; }
    .dash-period-selector select { flex: 1; }
    .progress-current { font-size: 36px; }
    .progress-separator, .progress-goal { font-size: 24px; }
    .kpi-row { grid-template-columns: 1fr; }
    .kpi-item { display: flex; align-items: center; justify-content: space-between; text-align: left; }
    .kpi-item > div:first-child { order: 2; }
    .dash-actions { flex-direction: column; }
    .dash-btn { width: 100%; text-align: center; }
    .admin-kpi-grid { grid-template-columns: 1fr 1fr; }
    .admin-kpi-value { font-size: 18px; }
    .commission-drawer { max-width: 100%; }
    .commission-total-value { font-size: 32px; }
    .meetings-drawer { max-width: 100%; }
    .meetings-summary { flex-wrap: wrap; gap: 8px; }
    .meetings-summary-divider { display: none; }
    .meetings-summary-item { min-width: 45%; padding: 8px 0; }
    .weekly-deals-drawer { max-width: 100%; }
    .weekly-deals-summary { flex-wrap: wrap; gap: 8px; }
    .weekly-deals-summary-divider { display: none; }
    .weekly-deals-summary-item { min-width: 45%; padding: 8px 0; }
    .inicio-kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .inicio-goals-grid { grid-template-columns: 1fr; }
    .inicio-billing-grid { grid-template-columns: repeat(2, 1fr); }
    .inicio-right .inicio-health-mt-grid { grid-template-columns: 1fr; }
    .inicio-goal-current { font-size: 28px; }
    .inicio-goal-sep, .inicio-goal-total { font-size: 18px; }
}

/* =====================================================
   Pipeline Module (pipeline-*, deals-*, deal-timeline-*)
   ===================================================== */
.pipeline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}
.pipeline-header h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin: 0 0 4px 0;
    letter-spacing: -0.5px;
}
.pipeline-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pipeline-header .pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--color-success);
    border-radius: var(--radius-circle);
    animation: pulse 2s infinite;
}
.pipeline-tabs {
    display: flex;
    gap: 4px;
    background: var(--border-light);
    padding: 4px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}
.pipeline-tabs .tab-btn {
    flex: 1;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.pipeline-tabs .tab-btn:hover { color: var(--alfred-cobalto); }
.pipeline-tabs .tab-btn.active {
    background: #fff;
    color: var(--alfred-cobalto);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.year-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.year-filters .year-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.year-filters .year-btn:hover {
    border-color: var(--alfred-indigo);
    color: var(--alfred-indigo);
}
.year-filters .year-btn.active {
    background: var(--alfred-indigo);
    border-color: var(--alfred-indigo);
    color: #fff;
}
.user-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 20px;
    display: none;
}
.user-card-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-circle);
    background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    color: var(--alfred-indigo);
}
.user-info .user-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--alfred-cobalto);
    margin-bottom: 2px;
}
.user-info .user-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}
.role-badge {
    background: var(--color-success);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    font-size: 11px;
    font-weight: 600;
}
.admin-filters {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 20px;
    display: none;
}
.admin-filters-inner {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.filter-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: block;
}
.filter-group select {
    min-width: 200px;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text-color);
}
.filter-group select:focus {
    outline: none;
    border-color: var(--alfred-indigo);
}
.reports-menu-wrapper { position: relative; }
.btn-reports {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-reports:hover {
    border-color: var(--alfred-indigo);
    color: var(--alfred-indigo);
}
.reports-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 300px;
    z-index: 100;
    overflow: hidden;
}
.reports-dropdown.open { display: block; }
.reports-dropdown-header {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
}
.reports-dropdown-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background var(--transition-fast);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 14px;
    color: var(--text-color);
}
.reports-dropdown-item:hover { background: var(--border-light); }
.reports-dropdown-item .item-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.reports-dropdown-item .item-text { flex: 1; }
.reports-dropdown-item .item-title {
    font-weight: 500;
    color: var(--alfred-cobalto);
    margin-bottom: 2px;
}
.reports-dropdown-item .item-desc {
    font-size: 12px;
    color: var(--text-muted);
}
.reports-dropdown-divider {
    height: 1px;
    background: var(--border-light);
    margin: 0;
}
.month-selector-row {
    padding: 8px 16px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
}
.month-selector-row label {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.month-selector-row input[type="month"] {
    flex: 1;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-color);
}
.month-selector-row input[type="month"]:focus {
    outline: none;
    border-color: var(--alfred-indigo);
}
.btn-export {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-export:hover {
    border-color: var(--alfred-indigo);
    color: var(--alfred-indigo);
}
.btn-apply {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-md);
    background: var(--alfred-indigo);
    color: #fff;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-apply:hover { background: var(--alfred-cobalto); }

/* Deals List Tab */
.deals-list-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.deals-filters-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
}
.deals-filters-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.deals-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    align-items: end;
}
.deals-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.deals-filter-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.deals-filter-group input,
.deals-filter-group select,
.deals-filter-group textarea {
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text-color);
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--transition-fast);
}
.deals-filter-group input:focus,
.deals-filter-group select:focus,
.deals-filter-group textarea:focus {
    outline: none;
    border-color: var(--alfred-indigo);
}
.deals-filter-group textarea {
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
}
.deals-filter-date-range,
.deals-filter-amount-range {
    display: flex;
    gap: 6px;
    align-items: center;
}
.deals-filter-date-range input,
.deals-filter-amount-range input { flex: 1; min-width: 0; }
.deals-filter-date-range span,
.deals-filter-amount-range span {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.deals-filters-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
    flex-wrap: wrap;
}
.btn-deals-apply {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    background: var(--alfred-indigo);
    color: #fff;
    cursor: pointer;
    transition: background var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-deals-apply:hover { background: #004a7c; }
.btn-deals-clear {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-deals-clear:hover {
    border-color: var(--color-error);
    color: var(--color-error);
}
.deals-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.deals-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1D4ED8;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}
.deals-filter-chip-remove {
    background: none;
    border: none;
    color: #93C5FD;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    margin-left: 2px;
    transition: color var(--transition-fast);
}
.deals-filter-chip-remove:hover { color: #1D4ED8; }
.deals-table-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
}
.deals-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}
.deals-table-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--alfred-cobalto);
    margin: 0;
}
.deals-table-summary {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.deals-table-summary strong { color: var(--alfred-cobalto); }
.deals-table-wrap { overflow-x: auto; }
.deals-adv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.deals-adv-table thead th {
    padding: 10px 12px;
    color: var(--text-secondary);
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.deals-adv-table thead th:hover { color: var(--alfred-cobalto); }
.deals-adv-table thead th.sort-active { color: var(--alfred-indigo); }
.deals-adv-table thead th .sort-icon { margin-left: 4px; font-size: 11px; }
.deals-adv-table tbody tr {
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.deals-adv-table tbody tr:hover { background: var(--bg-secondary); }
.deals-adv-table td { padding: 10px 12px; vertical-align: middle; }
.deal-name-cell {
    font-weight: 500;
    color: var(--alfred-indigo);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.deal-stage-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--radius-md);
    white-space: nowrap;
}
.deal-amount-cell {
    font-weight: 600;
    color: var(--alfred-cobalto);
    text-align: right;
    white-space: nowrap;
}
.deal-date-cell { color: var(--text-secondary); white-space: nowrap; }
.deal-owner-cell {
    color: var(--text-color);
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.deals-table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.deals-table-pagination span { font-size: 12px; color: var(--text-secondary); }
.deals-pagination-btns { display: flex; gap: 6px; }
.deals-pagination-btns button {
    padding: 5px 12px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-color);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.deals-pagination-btns button:hover:not(:disabled) {
    border-color: var(--alfred-indigo);
    color: var(--alfred-indigo);
}
.deals-pagination-btns button:disabled { opacity: 0.4; cursor: default; }
.daf-bulk-stage-select {
    padding: 7px 10px;
    font-size: 13px;
    border: 1px solid #BFDBFE;
    border-radius: var(--radius-md);
    background: #EFF6FF;
    color: #1E40AF;
    cursor: pointer;
    max-width: 200px;
}
.daf-bulk-stage-select:focus { outline: none; border-color: #3B82F6; }
.btn-deals-bulk-stage {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #BFDBFE;
    border-radius: var(--radius-md);
    background: #EFF6FF;
    color: #1E40AF;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.btn-deals-bulk-stage:hover:not(:disabled) { background: #DBEAFE; border-color: #3B82F6; }
.btn-deals-bulk-stage:disabled { opacity: 0.5; cursor: default; }
.daf-selected-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--alfred-indigo);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-pill);
}
.btn-deals-reminder {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    background: #FFFBEB;
    color: var(--color-warning-dark);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.btn-deals-reminder:hover:not(:disabled) {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-dark);
}
.btn-deals-reminder:disabled { opacity: 0.4; cursor: default; }
.deal-checkbox-cell { text-align: center; }
.deal-checkbox-cell input,
.deals-adv-table thead th input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--alfred-indigo);
}
.reminder-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.reminder-modal {
    background: #fff;
    border-radius: var(--radius-xl);
    width: 480px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    overflow: hidden;
}
.reminder-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color);
}
.reminder-modal-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--alfred-cobalto);
    display: flex;
    align-items: center;
    gap: 8px;
}
.reminder-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
}
.reminder-modal-close:hover { color: var(--text-color); }
.reminder-modal-body { padding: 20px 24px; }
.reminder-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

/* Deal Timeline */
.deal-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.deal-timeline::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border-color);
    border-radius: 1px;
}
.deal-timeline > li { position: relative; }
.deal-timeline-day-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 0 8px 50px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.deal-timeline-day-sep::before {
    content: '';
    position: absolute;
    left: 14px;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-circle);
    background: var(--border-color);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--border-color);
}
.deal-timeline-item {
    display: flex;
    gap: 14px;
    padding: 10px 0;
    font-size: 13px;
    align-items: flex-start;
}
.deal-timeline-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    position: relative;
    z-index: 1;
}
.deal-timeline-body { flex: 1; padding-top: 8px; }
.deal-timeline-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
.deal-timeline-card.is-comment {
    background: #EFF6FF;
    border-color: #BFDBFE;
    border-left: 3px solid #3B82F6;
}
.deal-timeline-card.is-reminder {
    background: #FFFBEB;
    border-color: #FDE68A;
    border-left: 3px solid var(--color-warning);
}
.deal-timeline-card.is-visit {
    background: var(--color-success-bg);
    border-color: #BBF7D0;
    border-left: 3px solid var(--color-success);
}
.deal-timeline-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.deal-timeline-change {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
}
.deal-timeline-val-old {
    text-decoration: line-through;
    color: var(--text-muted);
    background: var(--border-light);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
}
.deal-timeline-val-new {
    color: var(--color-success-dark);
    background: var(--color-success-bg);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    font-weight: 600;
}
.deal-timeline-arrow { color: var(--text-muted); font-size: 11px; }
.deal-timeline-comment {
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.5;
    margin-top: 4px;
    font-style: italic;
}
.deal-timeline-comment::before { content: '"'; }
.deal-timeline-comment::after { content: '"'; }
.deal-timeline-meta {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.deal-timeline-hs-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--color-success);
    font-weight: 600;
    font-size: 10px;
}
.deal-reminder-status {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: var(--radius-md);
}
.deal-reminder-status.pending { background: var(--color-warning-bg); color: #92400E; }
.deal-reminder-status.responded { background: var(--color-success-bg); color: var(--color-success-dark); }
.deal-reminder-status.expired { background: var(--color-error-bg); color: #991B1B; }
.deal-sidebar-close-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-md);
    margin-top: 3px;
}
.deal-sidebar-close-indicator.overdue { background: var(--color-error-bg); color: #991B1B; }
.deal-sidebar-close-indicator.soon { background: var(--color-warning-bg); color: #92400E; }
.deal-sidebar-close-indicator.ok { background: var(--color-success-bg); color: var(--color-success-dark); }
.deals-pending-banner {
    background: linear-gradient(135deg, #FFFBEB, var(--color-warning-bg));
    border: 1px solid #FDE68A;
    border-radius: var(--radius-lg);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.deals-pending-banner-icon {
    width: 36px;
    height: 36px;
    background: var(--color-warning);
    color: #fff;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.deals-pending-banner-text { flex: 1; }
.deals-pending-banner-text strong { color: #92400E; }
.deals-pending-banner-text p { margin: 0; font-size: 13px; color: #78350F; }

@media (max-width: 640px) {
    .deals-filters-grid { grid-template-columns: 1fr; }
    .deals-filter-date-range,
    .deals-filter-amount-range { flex-direction: column; }
    .deals-filter-date-range span,
    .deals-filter-amount-range span { display: none; }
}

/* =====================================================
   Clientes Module (clients-*, contact-*, product-license-*, product-config-*)
   ===================================================== */

        /* ===== LIST VIEW STYLES ===== */
        .clients-module {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .clients-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 16px 20px;
            flex-wrap: wrap;
        }

        .clients-search-wrapper {
            display: flex;
            align-items: center;
            flex: 1;
            min-width: 250px;
            max-width: 500px;
            background: var(--bg-tertiary);
            border-radius: 8px;
            padding: 0 12px;
            border: 1px solid var(--border-color);
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .clients-search-wrapper:focus-within {
            border-color: var(--alfred-teal);
            box-shadow: 0 0 0 3px rgba(0, 178, 169, 0.1);
        }

        .search-icon {
            font-size: 16px;
            opacity: 0.6;
        }

        .clients-search-input {
            flex: 1;
            border: none;
            background: transparent;
            padding: 12px 10px;
            font-size: 14px;
            color: var(--text-primary);
            outline: none;
        }

        .clients-search-input::placeholder {
            color: var(--text-muted);
        }

        .clear-search-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px 8px;
            font-size: 14px;
            border-radius: 4px;
            transition: background 0.2s, color 0.2s;
        }

        .clear-search-btn:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .clients-counter {
            background: var(--alfred-navy);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            white-space: nowrap;
        }

        .clients-counter #clients-count {
            font-size: 16px;
        }

        .clients-table-wrapper {
            padding: 0;
            overflow: hidden;
        }

        .clients-loading,
        .clients-error,
        .clients-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 60px 20px;
            color: var(--text-muted);
        }

        .loading-spinner-inline {
            width: 32px;
            height: 32px;
            border: 3px solid var(--border-color);
            border-top-color: var(--alfred-teal);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

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

        .error-icon,
        .empty-icon {
            font-size: 32px;
        }

        .clients-error {
            color: var(--error);
        }

        .clients-table {
            width: 100%;
            border-collapse: collapse;
        }

        .clients-table thead {
            background: var(--bg-secondary);
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .clients-table th {
            text-align: left;
            padding: 14px 16px;
            font-weight: 600;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-secondary);
            border-bottom: 2px solid var(--border-color);
            white-space: nowrap;
        }

        .clients-table th.sortable,
        .users-table th.sortable {
            cursor: pointer;
            user-select: none;
            transition: color 0.2s;
        }

        .clients-table th.sortable:hover,
        .users-table th.sortable:hover {
            color: var(--alfred-teal);
        }

        .clients-table th.sortable.active,
        .users-table th.sortable.active {
            color: var(--alfred-teal);
        }

        .sort-icon {
            opacity: 0.4;
            margin-left: 4px;
            font-size: 10px;
        }

        .clients-table th.sortable.active .sort-icon,
        .users-table th.sortable.active .sort-icon {
            opacity: 1;
        }

        .th-email {
            min-width: 200px;
        }

        .th-date {
            min-width: 140px;
        }

        .clients-table tbody tr {
            border-bottom: 1px solid var(--border-color);
            transition: background 0.15s;
            cursor: pointer;
        }

        .clients-table tbody tr:hover {
            background: var(--bg-tertiary);
        }

        .clients-table td {
            padding: 14px 16px;
            font-size: 14px;
            color: var(--text-primary);
            vertical-align: middle;
        }

        .client-name {
            font-weight: 500;
            color: var(--alfred-teal);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .client-name::after {
            content: '→';
            opacity: 0;
            transition: opacity 0.2s, transform 0.2s;
            transform: translateX(-4px);
        }

        .clients-table tbody tr:hover .client-name::after {
            opacity: 0.6;
            transform: translateX(0);
        }

        .client-description {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 2px;
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .client-email {
            color: var(--text-secondary);
        }

        .client-email.empty {
            color: var(--text-muted);
            font-style: italic;
        }

        .client-date {
            color: var(--text-secondary);
            font-size: 13px;
        }

        .highlight {
            background: rgba(0, 178, 169, 0.2);
            padding: 1px 2px;
            border-radius: 2px;
        }

        /* ===== DETAIL VIEW STYLES ===== */
        .client-detail {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .detail-header {
            padding: 12px 16px;
        }

        .back-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            background: none;
            border: none;
            color: var(--alfred-teal);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 6px;
            transition: background 0.2s;
        }

        .back-btn:hover {
            background: var(--bg-tertiary);
        }

        .back-icon {
            font-size: 18px;
        }

        .client-info {
            padding: 24px;
        }

        .client-info-header {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }

        .client-avatar {
            font-size: 48px;
            width: 80px;
            height: 80px;
            background: var(--bg-tertiary);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .client-info-main {
            flex: 1;
        }

        .client-name-title {
            font-size: 24px;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0 0 8px 0;
        }

        .client-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 8px;
        }

        .meta-item {
            font-size: 14px;
            color: var(--text-secondary);
        }

        .client-description-text {
            font-size: 14px;
            color: var(--text-muted);
            margin: 8px 0 0 0;
            line-height: 1.5;
        }

        /* ===== PROJECT DETAIL VIEW STYLES ===== */
        .project-detail {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .project-info {
            padding: 24px;
        }

        .project-info-header {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }

        .project-logo-large {
            width: 80px;
            height: 80px;
            border-radius: 12px;
            overflow: hidden;
            flex-shrink: 0;
            background: var(--bg-tertiary);
        }

        .project-logo-large img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .project-info-main {
            flex: 1;
        }

        .project-title-row {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 8px;
        }

        .project-name-title {
            font-size: 24px;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .project-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
        }

        .project-meta .meta-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .client-link-detail {
            color: var(--alfred-teal);
            text-decoration: none;
            font-weight: 500;
        }

        .client-link-detail:hover {
            text-decoration: underline;
        }

        /* Stakeholders Grid */
        .stakeholders-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 16px;
        }

        .stakeholder-type-card {
            border: 1px solid var(--border-color);
            border-radius: 10px;
            overflow: hidden;
            border-left: 4px solid var(--type-color, var(--alfred-teal));
            background: #ffffff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        .stakeholder-type-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 16px;
            background: var(--bg-secondary);
            font-weight: 600;
            font-size: 13px;
            color: var(--text-color);
            border-bottom: 1px solid var(--border-color);
        }

        .stakeholder-type-header svg {
            width: 18px;
            height: 18px;
            color: var(--type-color, var(--alfred-teal));
        }

        .stakeholder-type-list {
            padding: 12px 16px;
            background: #ffffff;
        }

        .stakeholder-person {
            padding: 10px 0;
            border-bottom: 1px solid var(--border-light);
        }

        .stakeholder-person:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .stakeholder-person:first-child {
            padding-top: 0;
        }

        .stakeholder-person .person-name {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 4px;
            font-size: 14px;
        }

        .stakeholder-person .badge-primary {
            font-size: 9px;
            padding: 2px 6px;
            background: var(--alfred-teal);
            color: white;
            border-radius: 4px;
            text-transform: uppercase;
            font-weight: 600;
        }

        .stakeholder-person .person-email,
        .stakeholder-person .person-phone {
            display: block;
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        /* Section note */
        .section-note {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 10px 14px;
            background: #fef3c7;
            border-radius: 6px;
            font-size: 12px;
            color: #92400e;
            margin-bottom: 12px;
        }

        .section-note svg {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }

        /* Aliases List */
        .aliases-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .alias-chip {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            font-size: 13px;
        }

        .alias-chip svg {
            width: 14px;
            height: 14px;
            color: var(--alfred-teal);
        }

        .alias-chip .alias-text {
            font-weight: 500;
            color: var(--text-primary);
        }

        .alias-chip .alias-desc {
            color: var(--text-muted);
            font-size: 11px;
        }

        /* Users Mini Table */
        .users-table-wrapper {
            overflow-x: auto;
        }

        .users-mini-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .users-mini-table th {
            text-align: left;
            padding: 10px 12px;
            background: var(--bg-secondary);
            font-weight: 600;
            color: var(--text-muted);
            border-bottom: 1px solid var(--border-color);
        }

        .users-mini-table td {
            padding: 10px 12px;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-primary);
        }

        .users-mini-table .badge-role {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
        }

        /* Contract Summary */
        .contract-summary {
            padding: 16px;
            background: var(--bg-secondary);
            border-radius: 10px;
        }

        .contract-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-color);
        }

        .contract-number {
            font-weight: 600;
            font-size: 16px;
            color: var(--text-primary);
        }

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

        .contract-detail-row {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .contract-detail-row .label {
            font-size: 11px;
            color: var(--text-muted);
            text-transform: uppercase;
        }

        .contract-detail-row .value {
            font-weight: 500;
            color: var(--text-primary);
        }

        /* Section Empty */
        .section-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            color: var(--text-muted);
            text-align: center;
            gap: 12px;
        }

        .section-empty svg {
            width: 40px;
            height: 40px;
            opacity: 0.5;
        }

        .section-empty p {
            margin: 0;
        }

        .section-empty .btn-action {
            margin-top: 8px;
        }

        .section-error {
            padding: 20px;
            text-align: center;
            color: var(--color-error-dark);
        }

        /* ===== ASSETS TABLE ===== */
        .assets-summary-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 12px 0;
        }

        .asset-class-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            background: color-mix(in srgb, var(--chip-color, var(--text-secondary)) 10%, transparent);
            color: var(--chip-color, var(--text-secondary));
            border: 1px solid color-mix(in srgb, var(--chip-color, var(--text-secondary)) 25%, transparent);
        }

        .asset-class-chip svg {
            width: 13px;
            height: 13px;
        }

        .assets-table-wrapper {
            overflow-x: auto;
        }

        .assets-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .assets-table thead th {
            padding: 8px 10px;
            text-align: left;
            font-weight: 600;
            font-size: 11px;
            text-transform: uppercase;
            color: var(--text-muted);
            border-bottom: 2px solid var(--border-color, var(--border-color));
            white-space: nowrap;
        }

        .assets-table tbody tr {
            border-bottom: 1px solid var(--border-color, var(--border-color));
            transition: background 0.15s;
        }

        .assets-table tbody tr:hover {
            background: var(--bg-hover, var(--bg-secondary));
        }

        .assets-table tbody tr.asset-no-metadata {
            opacity: 0.7;
        }

        .assets-table td {
            padding: 6px 10px;
            vertical-align: middle;
        }

        .td-asset-name {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            white-space: nowrap;
        }

        .td-asset-name svg {
            flex-shrink: 0;
        }

        .asset-class-select {
            padding: 3px 6px;
            border: 1px solid var(--border-color, #d1d5db);
            border-radius: 6px;
            font-size: 12px;
            background: var(--bg-primary, white);
            color: var(--text-primary);
            cursor: pointer;
            transition: border-color 0.2s;
        }

        .asset-class-select:hover,
        .asset-class-select:focus {
            border-color: var(--alfred-indigo);
            outline: none;
        }

        .asset-inline-input {
            padding: 3px 6px;
            border: 1px solid transparent;
            border-radius: 4px;
            font-size: 13px;
            background: transparent;
            color: var(--text-primary);
            width: 70px;
            text-align: right;
            transition: border-color 0.2s, background 0.2s;
        }

        .asset-inline-input:hover {
            border-color: var(--border-color, #d1d5db);
            background: var(--bg-primary, white);
        }

        .asset-inline-input:focus {
            border-color: var(--alfred-indigo);
            background: var(--bg-primary, white);
            outline: none;
        }

        .asset-inline-input.editing {
            border-color: var(--color-warning);
            background: #fffbeb;
        }

        .asset-inline-input::placeholder {
            color: var(--text-muted, var(--text-muted));
            opacity: 0.6;
        }

        /* Btn Action */
        .btn-action {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: var(--alfred-teal);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s;
        }

        .btn-action:hover {
            background: #009990;
        }

        .btn-action svg {
            width: 16px;
            height: 16px;
        }

        /* Project row hover */
        .project-row:hover {
            background: var(--bg-secondary);
        }

        /* Summary Cards */
        .summary-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 16px;
        }

        .summary-card {
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            position: relative;
            overflow: hidden;
        }

        .summary-card.disabled {
            opacity: 0.6;
        }

        .summary-icon {
            font-size: 32px;
            width: 56px;
            height: 56px;
            background: var(--bg-tertiary);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .summary-content {
            flex: 1;
        }

        .summary-value {
            font-size: 28px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1;
        }

        .summary-label {
            font-size: 14px;
            color: var(--text-muted);
            margin-top: 4px;
        }

        .summary-loading {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--alfred-teal), var(--alfred-navy), var(--alfred-teal));
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            display: none;
        }

        .summary-card.loading .summary-loading {
            display: block;
        }

        @keyframes shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        .coming-soon-badge {
            background: var(--alfred-orange);
            color: white;
            font-size: 10px;
            font-weight: 600;
            padding: 4px 8px;
            border-radius: 4px;
            text-transform: uppercase;
        }

        /* Detail Tabs */
        .detail-tabs {
            display: flex;
            gap: 0;
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
        }

        .detail-tab {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 20px;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-muted);
            background: transparent;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            border-right: 1px solid var(--border-color);
        }

        .detail-tab:last-child {
            border-right: none;
        }

        .detail-tab:hover {
            color: var(--text-primary);
            background: var(--bg-secondary);
        }

        .detail-tab.active {
            color: var(--alfred-teal);
            background: var(--bg-secondary);
            font-weight: 600;
        }

        .detail-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--alfred-teal);
            border-radius: 3px 3px 0 0;
        }

        .detail-tab svg {
            width: 16px;
            height: 16px;
        }

        .tab-count {
            font-size: 12px;
            font-weight: 600;
            background: var(--bg-tertiary);
            padding: 2px 8px;
            border-radius: 10px;
            min-width: 20px;
            text-align: center;
        }

        .detail-tab.active .tab-count {
            background: var(--alfred-teal);
            color: white;
        }

        .detail-tab-content {
            display: none;
        }

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

        /* Detail Sections */
        .detail-section {
            padding: 0;
            overflow: hidden;
        }

        .detail-section.disabled-section {
            opacity: 0.6;
        }

        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
            gap: 16px;
            flex-wrap: wrap;
        }

        .section-header-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .section-header-actions {
            display: flex;
            gap: 8px;
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            margin: 0;
            color: var(--text-primary);
        }

        .section-count {
            background: var(--alfred-navy);
            color: white;
            font-size: 12px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 12px;
        }

        .btn-export {
            display: flex;
            align-items: center;
            gap: 6px;
            background: #217346;
            color: white;
            border: none;
            padding: 8px 14px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s, opacity 0.2s;
        }

        .btn-export:hover:not(:disabled) {
            background: #1a5c38;
        }

        .btn-export:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .section-content {
            padding: 0;
        }

        .section-loading,
        .section-empty,
        .section-error {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 40px 20px;
            color: var(--text-muted);
        }

        .section-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 40px 20px;
            color: var(--text-muted);
        }

        .placeholder-icon {
            font-size: 32px;
        }

        .placeholder-text {
            font-size: 14px;
        }

        /* Projects Table */
        .projects-table,
        .users-table {
            width: 100%;
            border-collapse: collapse;
        }

        .projects-table th,
        .users-table th {
            text-align: left;
            padding: 12px 16px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            background: var(--bg-tertiary);
            border-bottom: 1px solid var(--border-color);
            white-space: nowrap;
        }

        .projects-table td,
        .users-table td {
            padding: 12px 16px;
            font-size: 14px;
            border-bottom: 1px solid var(--border-color);
            vertical-align: middle;
        }

        .projects-table tr:last-child td,
        .users-table tr:last-child td {
            border-bottom: none;
        }

        .project-name,
        .user-name {
            font-weight: 500;
            color: var(--text-primary);
        }

        .project-type {
            display: inline-block;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 4px;
            text-transform: uppercase;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
        }

        .project-type.HOME { background: #e3f2fd; color: #1565c0; }
        .project-type.OFFICE { background: #fff3e0; color: #e65100; }
        .project-type.HOTEL { background: #f3e5f5; color: #7b1fa2; }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-badge.ACCEPTED { color: #2e7d32; }
        .status-badge.PENDING { color: #f57c00; }
        .status-badge.REJECTED { color: #c62828; }

        .user-email {
            color: var(--text-secondary);
            font-size: 13px;
        }

        .user-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 500;
        }

        .user-status.active { color: #2e7d32; }
        .user-status.inactive { color: #9e9e9e; }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .status-dot.active { background: #4caf50; }
        .status-dot.inactive { background: #bdbdbd; }

        .user-access {
            font-size: 12px;
            color: var(--text-muted);
        }

        /* ===== USERS FILTER STYLES ===== */
        .users-filters {
            padding: 16px 20px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
        }

        .users-filter-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
            justify-content: space-between;
        }

        .users-filter-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }

        .user-filter-chip {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: var(--bg-primary);
            border: 2px solid var(--border-color);
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s ease;
            user-select: none;
        }

        .user-filter-chip:hover {
            border-color: var(--alfred-teal);
            transform: translateY(-1px);
        }

        .user-filter-chip.active {
            border-color: var(--alfred-teal);
            background: var(--alfred-teal);
            color: white;
            box-shadow: 0 2px 8px rgba(0, 178, 169, 0.3);
        }

        .user-filter-chip.active .chip-value,
        .user-filter-chip.active .chip-label {
            color: white;
        }

        .user-filter-chip .chip-icon {
            font-size: 12px;
        }

        .user-filter-chip .chip-value {
            font-weight: 700;
            color: var(--text-primary);
        }

        .user-filter-chip .chip-label {
            color: var(--text-secondary);
        }

        .user-filter-chip.status-chip {
            background: #dcfce7;
            border-color: #86efac;
        }

        .user-filter-chip.status-chip .active-icon {
            color: #22c55e;
        }

        .user-filter-chip.status-chip.inactive {
            background: var(--border-light);
            border-color: #d1d5db;
        }

        .user-filter-chip.status-chip.inactive .inactive-icon {
            color: var(--text-muted);
        }

        .user-filter-chip.status-chip.active,
        .user-filter-chip.status-chip.inactive.active {
            background: var(--alfred-teal);
            border-color: var(--alfred-teal);
        }

        .chip-separator {
            width: 1px;
            height: 24px;
            background: var(--border-color);
            margin: 0 4px;
        }

        /* Role filter chips */
        .user-filter-chip.role-admin {
            background: #fef3c7;
            border-color: #fcd34d;
        }

        .user-filter-chip.role-superadmin {
            background: #fce7f3;
            border-color: #f9a8d4;
        }

        .user-filter-chip.role-manager {
            background: #dbeafe;
            border-color: #93c5fd;
        }

        .user-filter-chip.role-user {
            background: #f0fdf4;
            border-color: #86efac;
        }

        .user-filter-chip.role-installer {
            background: #f5f3ff;
            border-color: #c4b5fd;
        }

        .user-filter-chip.role-viewer {
            background: #ecfeff;
            border-color: #67e8f9;
        }

        .user-filter-chip.role-operator {
            background: #fff7ed;
            border-color: #fdba74;
        }

        .user-filter-chip.role-chip.active {
            background: var(--alfred-teal);
            border-color: var(--alfred-teal);
        }

        .clear-filter-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 6px 12px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 12px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s;
        }

        .clear-filter-btn:hover {
            background: #fee2e2;
            border-color: #fca5a5;
            color: var(--color-error-dark);
        }

        .users-filter-info {
            margin-top: 10px;
            padding: 8px 12px;
            background: rgba(0, 178, 169, 0.1);
            border-radius: 6px;
            font-size: 13px;
            color: var(--alfred-teal);
        }

        .users-filter-actions {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        /* Toggle usuarios Alfred */
        .alfred-users-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.2s;
            user-select: none;
        }

        .alfred-users-toggle:hover {
            border-color: var(--alfred-teal);
            background: var(--bg-tertiary);
        }

        .alfred-users-toggle input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: var(--alfred-teal);
            cursor: pointer;
        }

        .alfred-users-toggle .toggle-label {
            color: var(--text-secondary);
        }

        .alfred-users-toggle .alfred-count {
            background: var(--alfred-navy);
            color: white;
            font-size: 11px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 10px;
            min-width: 20px;
            text-align: center;
        }

        .alfred-users-toggle:has(input:checked) {
            border-color: var(--alfred-teal);
            background: rgba(0, 178, 169, 0.1);
        }

        .alfred-users-toggle:has(input:checked) .toggle-label {
            color: var(--alfred-teal);
        }

        /* Role badges in table */
        .role-badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 12px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .role-badge.role-admin {
            background: #fef3c7;
            color: #92400e;
        }

        .role-badge.role-superadmin {
            background: #fce7f3;
            color: #9d174d;
        }

        .role-badge.role-manager {
            background: #dbeafe;
            color: #1e40af;
        }

        .role-badge.role-user {
            background: #dcfce7;
            color: #166534;
        }

        .role-badge.role-installer {
            background: #f5f3ff;
            color: #5b21b6;
        }

        .role-badge.role-viewer {
            background: #ecfeff;
            color: #0e7490;
        }

        .role-badge.role-operator {
            background: #fff7ed;
            color: #c2410c;
        }

        .role-badge.role-default {
            background: var(--bg-tertiary);
            color: var(--text-muted);
        }

        .td-roles {
            white-space: nowrap;
        }

        .td-roles .role-badge + .role-badge {
            margin-left: 4px;
        }

        .projects-count {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: var(--text-secondary);
            background: var(--bg-tertiary);
            padding: 3px 8px;
            border-radius: 4px;
            cursor: help;
        }

        .projects-count.none {
            background: transparent;
            color: var(--text-muted);
            cursor: default;
        }

        .td-projects {
            white-space: nowrap;
        }

        /* ===== KAM & CONTRACTS STYLES ===== */
        .th-kam, .th-contracts {
            min-width: 140px;
        }

        .kam-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 16px;
            font-size: 12px;
            font-weight: 500;
        }

        .kam-badge.assigned {
            background: #dcfce7;
            color: #166534;
        }

        .kam-badge.unassigned {
            background: #fef3c7;
            color: #92400e;
        }

        .kam-badge .kam-icon {
            font-size: 14px;
        }

        .contracts-summary {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .contract-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }

        .contract-pill.active {
            background: #dcfce7;
            color: #166534;
        }

        .contract-pill.pending {
            background: #fef3c7;
            color: #92400e;
        }

        .contract-pill.expiring {
            background: #fee2e2;
            color: var(--color-error-dark);
        }

        .contract-pill.none {
            background: var(--bg-tertiary);
            color: var(--text-muted);
        }

        /* KAM Assignment Container in Detail View */
        .kam-assignment-container {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 8px;
            min-width: 200px;
        }

        .kam-loading .loading-spinner-inline.small {
            width: 20px;
            height: 20px;
            border-width: 2px;
        }

        .kam-card {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 8px;
            padding: 12px 16px;
            background: var(--bg-tertiary);
            border-radius: 12px;
            border: 1px solid var(--border-color);
        }

        .kam-card.no-kam {
            border-color: #fcd34d;
            background: #fffbeb;
        }

        .kam-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .kam-avatar {
            width: 36px;
            height: 36px;
            background: var(--alfred-teal);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 14px;
        }

        .kam-details {
            text-align: right;
        }

        .kam-name {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 14px;
        }

        .kam-role {
            font-size: 12px;
            color: var(--text-muted);
        }

        .btn-assign-kam, .btn-change-kam {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
        }

        .btn-assign-kam {
            background: var(--alfred-teal);
            color: white;
        }

        .btn-assign-kam:hover {
            background: var(--alfred-teal);
        }

        .btn-change-kam {
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
        }

        .btn-change-kam:hover {
            border-color: var(--alfred-teal);
            color: var(--alfred-teal);
        }

        /* KAM Selector Inline */
        .kam-selector-inline {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 280px;
        }

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

        .kam-selector-row {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .kam-select-inline {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid var(--border-color, var(--border-color));
            border-radius: 8px;
            font-size: 13px;
            color: var(--text-primary, #1f2937);
            background: var(--bg-primary, #ffffff);
            cursor: pointer;
            transition: border-color 0.2s;
        }

        .kam-select-inline:focus {
            outline: none;
            border-color: var(--alfred-teal);
        }

        .btn-save-kam {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border: none;
            border-radius: 8px;
            background: var(--alfred-teal);
            color: white;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-save-kam:hover:not(:disabled) {
            background: var(--alfred-teal);
        }

        .btn-save-kam:disabled {
            background: var(--bg-tertiary, var(--border-light));
            color: var(--text-muted, var(--text-muted));
            cursor: not-allowed;
        }

        .btn-save-kam i, .btn-save-kam svg {
            width: 18px;
            height: 18px;
        }

        .kam-save-status {
            font-size: 12px;
            min-height: 16px;
        }

        /* Projects with Contracts Table */
        .projects-contracts-table {
            width: 100%;
            border-collapse: collapse;
        }

        .projects-contracts-table th {
            text-align: left;
            padding: 10px 10px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            background: var(--bg-tertiary);
            border-bottom: 1px solid var(--border-color);
        }

        .projects-contracts-table td {
            padding: 10px 10px;
            font-size: 13px;
            border-bottom: 1px solid var(--border-color);
            vertical-align: middle;
        }

        .projects-contracts-table th:last-child,
        .projects-contracts-table td:last-child {
            position: sticky;
            right: 0;
            z-index: 1;
        }
        .projects-contracts-table th:last-child {
            background: var(--bg-tertiary, var(--border-light));
        }
        .projects-contracts-table td:last-child {
            background: var(--bg-primary, #fff);
            box-shadow: -4px 0 8px rgba(0,0,0,0.04);
        }
        .projects-contracts-table tr:hover td:last-child {
            background: var(--bg-secondary, var(--bg-secondary));
        }

        .projects-contracts-table tr:last-child td {
            border-bottom: none;
        }

        .project-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .project-info .project-name {
            font-weight: 500;
            color: var(--text-primary);
        }

        .project-info .project-name-link {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-weight: 500;
            color: var(--text-primary);
            text-decoration: none;
            transition: color 0.15s ease;
        }

        .project-info .project-name-link:hover {
            color: var(--alfred-teal, var(--alfred-teal));
        }

        .project-info .project-name-link .project-link-icon {
            width: 12px;
            height: 12px;
            opacity: 0;
            transition: opacity 0.15s ease;
        }

        .project-info .project-name-link:hover .project-link-icon {
            opacity: 1;
        }

        .project-info .project-type-small {
            font-size: 11px;
            color: var(--text-muted);
        }

        .contract-status-cell {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .contract-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .contract-status-badge.signed,
        .contract-status-badge.active {
            background: #dcfce7;
            color: #166534;
        }

        .contract-status-badge.draft {
            background: var(--border-color);
            color: #4b5563;
        }

        .contract-status-badge.pending_signature {
            background: #dbeafe;
            color: #1d4ed8;
        }

        .contract-status-badge.expiring_soon {
            background: #fee2e2;
            color: var(--color-error-dark);
        }

        .contract-status-badge.expired {
            background: #fecaca;
            color: #991b1b;
        }

        .contract-status-badge.no-contract {
            background: #fef3c7;
            color: #92400e;
        }

        .contract-expiry-info {
            font-size: 11px;
            color: var(--text-muted);
        }

        .contract-expiry-info.critical {
            color: var(--color-error-dark);
            font-weight: 500;
        }

        .contract-pack-badge {
            display: inline-block;
            padding: 3px 8px;
            background: var(--bg-tertiary);
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-secondary);
        }

        .contract-monthly {
            font-weight: 600;
            color: var(--alfred-teal);
        }

        .btn-create-contract {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 12px;
            background: var(--alfred-teal);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s;
        }

        .btn-create-contract:hover {
            background: var(--alfred-teal);
        }

        .btn-create-contract:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .btn-view-contract,
        .btn-view-contracts-list {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 12px;
            background: transparent;
            color: var(--alfred-teal);
            border: 1px solid var(--alfred-teal);
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-view-contract:hover,
        .btn-view-contracts-list:hover {
            background: var(--alfred-teal);
            color: white;
        }

        /* Icon-only compact buttons for table actions */
        .btn-icon-only {
            padding: 6px 8px;
            gap: 3px;
        }
        .btn-icon-only i {
            width: 14px;
            height: 14px;
        }
        .actions-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 16px;
            height: 16px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: 700;
            background: var(--alfred-teal);
            color: white;
            line-height: 1;
        }
        .btn-view-contracts-list:hover .actions-badge {
            background: white;
            color: var(--alfred-teal);
        }

        .no-kam-warning {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: #fef3c7;
            border-radius: 6px;
            font-size: 12px;
            color: #92400e;
            margin-bottom: 12px;
        }

        /* Modal styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            animation: fadeIn 0.2s ease;
            backdrop-filter: blur(4px);
        }

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

        .modal-content {
            background: var(--bg-primary, #ffffff);
            border-radius: 16px;
            max-width: 500px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
            animation: slideUp 0.3s ease;
            border: 1px solid var(--border-color, var(--border-color));
        }

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

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-color, var(--border-color));
            background: var(--bg-primary, #ffffff);
        }

        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary, #1f2937);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            color: var(--text-muted, var(--text-secondary));
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color 0.2s;
        }

        .modal-close:hover {
            color: var(--text-primary, #1f2937);
        }

        .modal-body {
            padding: 24px;
            background: var(--bg-primary, #ffffff);
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            padding: 16px 24px;
            border-top: 1px solid var(--border-color, var(--border-color));
            background: var(--bg-secondary, var(--bg-secondary));
            border-radius: 0 0 16px 16px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .form-select,
        .form-input {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 14px;
            color: var(--text-primary);
            background: var(--bg-primary, #ffffff);
            transition: border-color 0.2s;
            box-sizing: border-box;
        }

        .form-select {
            cursor: pointer;
        }

        .form-input {
            cursor: text;
            appearance: auto;
            -webkit-appearance: auto;
        }

        .form-select:focus,
        .form-input:focus {
            outline: none;
            border-color: var(--alfred-teal);
            box-shadow: 0 0 0 3px rgba(0, 178, 169, 0.1);
        }

        .form-textarea {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 14px;
            color: var(--text-primary);
            background: var(--bg-primary);
            resize: vertical;
            min-height: 80px;
            font-family: inherit;
        }

        .form-textarea:focus {
            outline: none;
            border-color: var(--alfred-teal);
        }

        .btn-modal {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-modal.primary {
            background: var(--alfred-teal);
            color: white;
            border: none;
        }

        .btn-modal.primary:hover {
            background: var(--alfred-teal);
        }

        .btn-modal.primary:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .btn-modal.secondary {
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
        }

        .btn-modal.secondary:hover {
            border-color: var(--text-secondary);
        }

        .btn-modal.danger {
            background: #fef2f2;
            color: var(--color-error-dark);
            border: 1px solid #fecaca;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .btn-modal.danger:hover {
            background: var(--color-error-dark);
            color: white;
            border-color: var(--color-error-dark);
        }
        .btn-modal.danger:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .kam-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .clients-header {
                flex-direction: column;
                align-items: stretch;
            }

            .clients-search-wrapper {
                max-width: none;
            }

            .clients-counter {
                text-align: center;
            }

            .th-email,
            .td-email {
                display: none;
            }

            .client-description {
                max-width: 200px;
            }

            .client-info-header {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            .client-meta {
                justify-content: center;
            }

            .summary-cards {
                grid-template-columns: 1fr;
            }

            .detail-tabs {
                border-radius: 8px;
            }
            .detail-tab {
                padding: 10px 8px;
                font-size: 12px;
                gap: 4px;
            }
            .detail-tab svg {
                display: none;
            }
            .billing-summary-strip {
                flex-wrap: wrap;
            }
            .billing-stat {
                flex: 1 1 50%;
                min-width: 0;
            }

            .projects-table th:nth-child(3),
            .projects-table td:nth-child(3),
            .users-table th:nth-child(4),
            .users-table td:nth-child(4) {
                display: none;
            }

            .section-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .section-header-actions {
                width: 100%;
            }

            .btn-export {
                flex: 1;
                justify-content: center;
            }
        }

        /* ===== PROJECTS SEARCH ===== */
        .projects-search-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .projects-search-input {
            padding: 8px 12px 8px 32px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 13px;
            width: 220px;
            transition: border-color 0.15s, box-shadow 0.15s, width 0.2s;
            background: var(--bg-primary);
            color: var(--text-primary);
        }

        .projects-search-input:focus {
            outline: none;
            border-color: var(--alfred-teal);
            box-shadow: 0 0 0 3px rgba(0, 178, 169, 0.15);
            width: 280px;
        }

        .projects-search-input::placeholder {
            color: var(--text-muted);
        }

        .search-icon-small {
            position: absolute;
            left: 10px;
            width: 14px;
            height: 14px;
            color: var(--text-muted);
            pointer-events: none;
        }

        .clear-search-btn-small {
            position: absolute;
            right: 8px;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 12px;
            padding: 2px 4px;
            border-radius: 4px;
        }

        .clear-search-btn-small:hover {
            color: var(--text-primary);
            background: var(--bg-secondary);
        }

        .projects-no-results {
            padding: 24px;
            text-align: center;
            color: var(--text-muted);
        }

        .projects-no-results .no-results-icon {
            width: 32px;
            height: 32px;
            margin-bottom: 8px;
            opacity: 0.5;
        }

        .project-match-alias {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            color: var(--alfred-teal);
            margin-top: 2px;
        }

        .project-match-alias i {
            width: 12px;
            height: 12px;
        }
    

/* =====================================================
   Encuestas Module (enc-*)
   ===================================================== */

    .enc-wrap { max-width: 1200px; margin: 0 auto; }
    .enc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
    .enc-header h2 { font-size: 20px; font-weight: 700; color: #1f2937; display: flex; align-items: center; gap: 8px; margin: 0; }
    .enc-header h2 i { width: 22px; height: 22px; color: var(--color-purple); }
    .enc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: all .15s; }
    .enc-btn-primary { background: var(--alfred-indigo); color: #fff; }
    .enc-btn-primary:hover { background: #004577; }
    .enc-btn-secondary { background: var(--border-light); color: var(--text-color); border: 1px solid #d1d5db; }
    .enc-btn-secondary:hover { background: var(--border-color); }
    .enc-btn-green { background: var(--color-success-dark); color: #fff; }
    .enc-btn-green:hover { background: var(--color-success-dark); }
    .enc-btn-whatsapp { background: #25d366; color: #fff; }
    .enc-btn-whatsapp:hover { background: #1ebe5a; }
    .enc-btn i { width: 15px; height: 15px; }

    /* KPI cards */
    .enc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
    .enc-kpi { background: #fff; border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; }
    .enc-kpi-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
    .enc-kpi-value { font-size: 28px; font-weight: 800; color: #1f2937; }
    .enc-kpi-value.nps-good { color: var(--color-success-dark); }
    .enc-kpi-value.nps-ok { color: var(--color-warning); }
    .enc-kpi-value.nps-bad { color: var(--color-error-dark); }
    .enc-kpi-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

    /* NPS gauge */
    .enc-nps-gauge { display: flex; align-items: center; gap: 16px; }
    .enc-nps-bar { flex: 1; height: 12px; background: var(--border-light); border-radius: 6px; overflow: hidden; display: flex; }
    .enc-nps-bar .promo { background: var(--color-success-dark); }
    .enc-nps-bar .passive { background: #fbbf24; }
    .enc-nps-bar .detract { background: var(--color-error); }
    .enc-nps-legend { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
    .enc-nps-legend span { font-size: 11px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
    .enc-nps-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

    /* Trend mini chart */
    .enc-trend { display: flex; align-items: flex-end; gap: 6px; height: 80px; }
    .enc-trend-bar { flex: 1; border-radius: 4px 4px 0 0; min-width: 24px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
    .enc-trend-bar .bar { width: 100%; border-radius: 4px 4px 0 0; transition: height .3s; }
    .enc-trend-bar .lbl { font-size: 9px; color: var(--text-secondary); margin-top: 4px; white-space: nowrap; }
    .enc-trend-bar .val { font-size: 10px; font-weight: 700; color: var(--text-color); margin-bottom: 2px; }

    /* Averages grid */
    .enc-avgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .enc-avg-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
    .enc-avg-label { font-size: 13px; color: var(--text-color); }
    .enc-avg-stars { display: flex; gap: 2px; align-items: center; }
    .enc-avg-stars .star-fill { color: var(--color-warning); }
    .enc-avg-stars .star-empty { color: #d1d5db; }
    .enc-avg-stars svg { width: 16px; height: 16px; }
    .enc-avg-val { font-size: 13px; font-weight: 700; color: var(--text-color); margin-left: 6px; }

    /* Section cards */
    .enc-section { background: #fff; border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
    .enc-section-title { font-size: 13px; font-weight: 700; color: var(--alfred-indigo); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid #e8f4fd; }

    /* Table */
    .enc-tbl-wrap { overflow-x: auto; }
    .enc-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
    .enc-tbl th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid var(--border-color); }
    .enc-tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
    .enc-tbl tr:hover td { background: var(--bg-secondary); }
    .enc-tbl tr { cursor: pointer; }
    .enc-badge { display: inline-flex; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; }
    .enc-badge.pending { background: #fef3c7; color: #92400e; }
    .enc-badge.sent { background: #dbeafe; color: #1e40af; }
    .enc-badge.completed { background: #d1fae5; color: var(--color-success-dark); }
    .enc-badge.expired { background: var(--border-light); color: var(--text-secondary); }
    .enc-stars-inline { color: var(--color-warning); font-size: 12px; letter-spacing: -1px; }
    .enc-nps-inline { display: inline-flex; width: 24px; height: 24px; border-radius: 6px; font-size: 11px; font-weight: 800; align-items: center; justify-content: center; color: #fff; }
    .enc-nps-inline.good { background: var(--color-success-dark); }
    .enc-nps-inline.ok { background: var(--color-warning); }
    .enc-nps-inline.bad { background: var(--color-error); }

    /* Create form */
    .enc-form { max-width: 640px; }
    .enc-form-group { margin-bottom: 16px; }
    .enc-form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-color); margin-bottom: 6px; }
    .enc-form-label .req { color: var(--color-error-dark); }
    .enc-form-input, .enc-form-select, .enc-form-textarea { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; font-family: inherit; transition: border-color .2s; background: #fff; }
    .enc-form-input:focus, .enc-form-select:focus, .enc-form-textarea:focus { outline: none; border-color: var(--alfred-indigo); box-shadow: 0 0 0 3px rgba(0,88,152,.1); }
    .enc-form-textarea { min-height: 80px; resize: vertical; }
    .enc-form-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    .enc-autocomplete { position: relative; }
    .enc-autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #d1d5db; border-radius: 0 0 8px 8px; max-height: 200px; overflow-y: auto; z-index: 10; display: none; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
    .enc-autocomplete-list.show { display: block; }
    .enc-autocomplete-item { padding: 10px 14px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--border-light); }
    .enc-autocomplete-item:hover { background: var(--bg-secondary); }
    .enc-autocomplete-item .sub { font-size: 11px; color: var(--text-muted); }

    /* Detail */
    .enc-detail-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
    .enc-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .enc-detail-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
    .enc-detail-value { font-size: 14px; font-weight: 500; color: #1f2937; }
    .enc-response-card { background: var(--bg-secondary); border-radius: 10px; padding: 20px; margin-top: 16px; }
    .enc-rating-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
    .enc-rating-row:last-child { border-bottom: none; }
    .enc-rating-label { font-size: 14px; color: var(--text-color); }
    .enc-rating-stars { display: flex; gap: 3px; }
    .enc-rating-stars svg { width: 20px; height: 20px; }
    .enc-rating-stars .filled { fill: var(--color-warning); stroke: var(--color-warning); }
    .enc-rating-stars .empty { fill: #d1d5db; stroke: #d1d5db; }
    .enc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
    .enc-link-box { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
    .enc-link-box input { flex: 1; font-size: 12px; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 8px; background: var(--bg-secondary); color: var(--text-color); }

    /* Pagination */
    .enc-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
    .enc-pagination button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #d1d5db; background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
    .enc-pagination button.active { background: var(--alfred-indigo); color: #fff; border-color: var(--alfred-indigo); }
    .enc-pagination button:disabled { opacity: .4; cursor: not-allowed; }

    .enc-empty { text-align: center; padding: 48px 20px; color: var(--text-muted); }
    .enc-empty i { width: 48px; height: 48px; margin-bottom: 12px; }
    .enc-empty p { font-size: 14px; }

    .enc-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
    .enc-filter-select { padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; background: #fff; }

    /* Generated link modal */
    .enc-link-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000; display: flex; align-items: center; justify-content: center; animation: encFadeIn .2s; }
    .enc-link-modal { background: #fff; border-radius: 16px; padding: 28px; max-width: 480px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.2); animation: encSlideUp .25s; }
    .enc-link-modal h3 { font-size: 16px; font-weight: 700; color: #1f2937; margin-bottom: 4px; }
    .enc-link-modal .sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
    .enc-link-modal .link-row { display: flex; gap: 8px; align-items: center; }
    .enc-link-modal .link-row input { flex: 1; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; background: var(--bg-secondary); color: var(--text-color); }
    .enc-link-modal .actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
    .enc-link-modal .label-row { margin-top: 14px; }
    .enc-link-modal .label-row input { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; }
    .enc-link-modal .label-row input:focus { outline: none; border-color: var(--alfred-indigo); box-shadow: 0 0 0 3px rgba(0,88,152,.1); }
    .enc-link-modal .label-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    @keyframes encFadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes encSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

    @media (max-width: 768px) {
        .enc-kpis { grid-template-columns: 1fr 1fr; }
        .enc-avgs { grid-template-columns: 1fr; }
        .enc-detail-grid { grid-template-columns: 1fr; }
    }
    
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* =====================================================
   Dynamics Module (dyn-*)
   ===================================================== */
    .dyn-module {
        max-width: 1400px;
        margin: 0 auto;
        padding: 24px;
    }

    .dyn-tabs {
        display: flex;
        gap: 4px;
        background: #f1f5f9;
        padding: 4px;
        border-radius: 12px;
        margin-bottom: 20px;
    }
    .dyn-tab {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 16px;
        border: none;
        background: transparent;
        border-radius: 8px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        color: #64748b;
        transition: all 0.2s;
    }
    .dyn-tab:hover { background: #e2e8f0; color: #334155; }
    .dyn-tab.active { background: #fff; color: #1e293b; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .dyn-tab svg { width: 16px; height: 16px; }

    .dyn-filters {
        margin-bottom: 20px;
    }
    .dyn-filter-row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: flex-end;
    }
    .dyn-filter-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .dyn-filter-group label {
        font-size: 11px;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .dyn-filter-toggle {
        justify-content: flex-end;
    }
    .dyn-filter-toggle label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        text-transform: none;
        font-weight: 500;
        cursor: pointer;
    }
    .dyn-select, .dyn-input {
        padding: 8px 12px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 13px;
        background: #fff;
        color: #1e293b;
        min-width: 140px;
        outline: none;
        transition: border 0.2s;
    }
    .dyn-select:focus, .dyn-input:focus { border-color: #6366f1; }
    .dyn-filter-actions {
        display: flex;
        gap: 8px;
        align-items: flex-end;
    }

    .dyn-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        background: #fff;
        color: #475569;
        white-space: nowrap;
    }
    .dyn-btn svg { width: 14px; height: 14px; }
    .dyn-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
    .dyn-btn-primary { background: #6366f1; color: #fff; border-color: #6366f1; }
    .dyn-btn-primary:hover { background: #4f46e5; }
    .dyn-btn-secondary { background: #f8fafc; }
    .dyn-btn-sm { padding: 6px 12px; font-size: 12px; }
    .dyn-btn:disabled { opacity: 0.4; cursor: not-allowed; }

    .dyn-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
        margin-bottom: 20px;
    }
    .dyn-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        background: #fff;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .dyn-card-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: #f1f5f9;
        color: #6366f1;
    }
    .dyn-card-icon svg { width: 20px; height: 20px; }
    .dyn-card-green .dyn-card-icon { background: #ecfdf5; color: #10b981; }
    .dyn-card-orange .dyn-card-icon { background: #fff7ed; color: #f59e0b; }
    .dyn-card-red .dyn-card-icon { background: #fef2f2; color: #ef4444; }
    .dyn-card-body { flex: 1; }
    .dyn-card-value { font-size: 18px; font-weight: 700; color: #1e293b; }
    .dyn-card-label { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

    .dyn-table-wrapper {
        overflow-x: auto;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        background: #fff;
    }
    .dyn-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }
    .dyn-table thead th {
        background: #f8fafc;
        padding: 10px 14px;
        text-align: left;
        font-weight: 600;
        color: #475569;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid #e2e8f0;
        white-space: nowrap;
        user-select: none;
    }
    .dyn-sortable { cursor: pointer; }
    .dyn-sortable:hover { background: #eef2ff; }
    .dyn-sort-icon { width: 14px; height: 14px; vertical-align: middle; opacity: 0.3; }
    .dyn-sort-icon.active { opacity: 1; color: #6366f1; }
    .dyn-table tbody td {
        padding: 10px 14px;
        border-bottom: 1px solid #f1f5f9;
        color: #334155;
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dyn-table tbody tr:hover { background: #fafbff; }
    .dyn-table tbody tr:last-child td { border-bottom: none; }
    .dyn-col-right { text-align: right; }
    .dyn-col-wide { min-width: 200px; }

    .dyn-badge {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 9999px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.3px;
    }
    .dyn-badge-green { background: #ecfdf5; color: #059669; }
    .dyn-badge-orange { background: #fff7ed; color: #d97706; }
    .dyn-badge-red { background: #fef2f2; color: #dc2626; }
    .dyn-badge-blue { background: #eff6ff; color: #2563eb; }
    .dyn-badge-purple { background: #f5f3ff; color: #7c3aed; }
    .dyn-badge-gray { background: #f1f5f9; color: #64748b; }

    .dyn-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 16px;
    }
    .dyn-page-info { font-size: 13px; color: #64748b; }

    .dyn-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 60px 20px;
        color: #94a3b8;
        font-size: 14px;
    }
    .dyn-spinner {
        width: 20px;
        height: 20px;
        border: 2px solid #e2e8f0;
        border-top-color: #6366f1;
        border-radius: 50%;
        animation: dyn-spin 0.6s linear infinite;
    }
    @keyframes dyn-spin { to { transform: rotate(360deg); } }
    .dyn-empty {
        text-align: center;
        padding: 60px 20px;
        color: #94a3b8;
        font-size: 14px;
    }
    .dyn-error {
        text-align: center;
        padding: 40px 20px;
        color: #ef4444;
        font-size: 14px;
    }

    @media (max-width: 768px) {
        .dyn-module { padding: 12px; }
        .dyn-tabs { flex-wrap: wrap; }
        .dyn-tab span { display: none; }
        .dyn-filter-row { flex-direction: column; }
        .dyn-cards { grid-template-columns: 1fr 1fr; }
    }

/* =====================================================
   Manager Module (mgr-*, ob-*)
   ===================================================== */

            #manager-content {
                max-width: 900px;
                margin: 0 auto;
                padding: 40px 24px;
            }
            
            /* Header */
            .mgr-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 32px;
                flex-wrap: wrap;
                gap: 16px;
            }
            .mgr-header h1 {
                font-size: 24px;
                font-weight: 600;
                color: var(--alfred-cobalto);
                margin: 0 0 4px 0;
                letter-spacing: -0.5px;
            }
            .mgr-header p {
                font-size: 14px;
                color: var(--text-secondary);
                margin: 0;
            }
            
            .mgr-period-selector {
                display: flex;
                gap: 8px;
                align-items: center;
            }
            .mgr-period-selector select {
                padding: 8px 12px;
                border: 1px solid var(--border-color);
                border-radius: 8px;
                background: #fff;
                color: var(--text-color);
                font-size: 14px;
                cursor: pointer;
            }
            .mgr-btn-icon {
                width: 36px;
                height: 36px;
                border: 1px solid var(--border-color);
                border-radius: 8px;
                background: #fff;
                cursor: pointer;
                font-size: 16px;
                transition: all 0.15s;
            }
            .mgr-btn-icon:hover {
                border-color: var(--alfred-indigo);
                background: #f0f7ff;
            }
            
            /* Labels */
            .mgr-label {
                font-size: 13px;
                font-weight: 500;
                color: var(--text-secondary);
                text-transform: uppercase;
                letter-spacing: 0.5px;
                margin: 32px 0 12px 0;
            }
            
            /* KPI Grid */
            .mgr-kpi-grid {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 12px;
            }
            .mgr-kpi-card {
                background: #fff;
                border: 1px solid var(--border-color);
                border-radius: 12px;
                padding: 20px 16px;
                display: flex;
                gap: 12px;
                align-items: flex-start;
            }
            .mgr-kpi-icon {
                font-size: 24px;
                line-height: 1;
            }
            .mgr-kpi-data {
                flex: 1;
            }
            .mgr-kpi-value {
                font-size: 24px;
                font-weight: 700;
                color: var(--alfred-cobalto);
                line-height: 1.2;
            }
            .mgr-kpi-name {
                font-size: 12px;
                color: var(--text-secondary);
                margin-top: 2px;
            }
            .mgr-kpi-meta {
                font-size: 12px;
                color: var(--text-secondary);
                margin-top: 4px;
            }
            .mgr-kpi-meta.success { color: var(--color-success-dark); }
            .mgr-kpi-meta.warning { color: var(--color-warning-dark); }
            .mgr-kpi-meta.danger { color: var(--color-error-dark); }
            
            .mgr-progress-mini {
                height: 4px;
                background: var(--border-light);
                border-radius: 2px;
                margin-top: 8px;
                overflow: hidden;
            }
            .mgr-progress-mini .mgr-progress-fill {
                height: 100%;
                background: var(--alfred-indigo);
                border-radius: 2px;
            }
            
            /* Cards */
            .mgr-card {
                background: #fff;
                border: 1px solid var(--border-color);
                border-radius: 12px;
                padding: 20px;
                margin-bottom: 16px;
            }
            
            /* Tables */
            .mgr-table-wrap {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            .mgr-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 14px;
            }
            .mgr-table th,
            .mgr-table td {
                white-space: nowrap;
            }
            /* Compact health columns (Salud / Estancados) */
            .mgr-table th[data-health-col],
            .mgr-table td[data-health-col] {
                text-align: center;
                padding-left: 4px;
                padding-right: 4px;
                width: 1%;
            }
            /* Offboarding button column: keep tight */
            .mgr-table th:last-child,
            .mgr-table td:last-child {
                width: 44px;
                padding-left: 4px;
                padding-right: 8px;
                text-align: center;
            }
            .mgr-table th {
                text-align: left;
                padding: 12px 8px;
                font-weight: 500;
                color: var(--text-secondary);
                font-size: 12px;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                border-bottom: 1px solid var(--border-color);
            }
            .mgr-table td {
                padding: 14px 8px;
                border-bottom: 1px solid var(--border-light);
                vertical-align: middle;
            }
            .mgr-table tbody tr:last-child td {
                border-bottom: none;
            }
            
            .mgr-member {
                display: flex;
                align-items: center;
                gap: 10px;
                font-weight: 500;
                color: var(--alfred-cobalto);
            }
            .mgr-status-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                flex-shrink: 0;
            }
            .mgr-status-dot.excellent { background: var(--color-purple); }
            .mgr-status-dot.good { background: var(--color-success-dark); }
            .mgr-status-dot.warning { background: var(--color-warning-dark); }
            .mgr-status-dot.danger { background: var(--color-error-dark); }
            
            .mgr-value {
                font-weight: 600;
                color: var(--alfred-cobalto);
            }
            .mgr-target {
                font-size: 12px;
                color: var(--text-muted);
                margin-left: 4px;
            }
            
            .mgr-progress-cell {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            .mgr-progress-bar {
                width: 60px;
                height: 6px;
                background: var(--border-light);
                border-radius: 3px;
                overflow: hidden;
            }
            .mgr-progress-fill {
                height: 100%;
                border-radius: 3px;
                transition: width 0.3s;
            }
            .mgr-progress-fill.excellent { background: var(--color-purple); }
            .mgr-progress-fill.good { background: var(--color-success-dark); }
            .mgr-progress-fill.warning { background: var(--color-warning-dark); }
            .mgr-progress-fill.danger { background: var(--color-error-dark); }
            
            .mgr-progress-text {
                font-weight: 600;
                font-size: 13px;
                color: var(--text-color);
                min-width: 40px;
            }
            
            .mgr-commission-active {
                font-weight: 600;
                color: var(--color-success-dark);
            }
            .mgr-commission-inactive {
                color: var(--border-color);
            }

            /* Health score and activity badges in manager tables */
            .mgr-health-score-badge {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 32px;
                padding: 2px 8px;
                border-radius: 20px;
                font-size: 12px;
                font-weight: 700;
                letter-spacing: 0.02em;
            }
            .mgr-health-act-badge {
                font-size: 12px;
                font-weight: 600;
            }
            
            /* Legend */
            .mgr-legend {
                display: flex;
                gap: 16px;
                padding-top: 12px;
                margin-top: 8px;
                border-top: 1px solid var(--border-light);
                font-size: 12px;
                color: var(--text-secondary);
            }
            .mgr-legend span {
                display: flex;
                align-items: center;
                gap: 6px;
            }
            .mgr-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
            }
            .mgr-dot.excellent { background: var(--color-purple); }
            .mgr-dot.good { background: var(--color-success-dark); }
            .mgr-dot.warning { background: var(--color-warning-dark); }
            .mgr-dot.danger { background: var(--color-error-dark); }
            
            /* Table Help */
            .mgr-table-help {
                display: flex;
                flex-direction: column;
                gap: 4px;
                padding-top: 8px;
                margin-top: 4px;
                font-size: 11px;
                color: var(--text-muted);
            }
            .mgr-table-help span {
                display: flex;
                align-items: center;
                gap: 4px;
            }
            .mgr-table-help strong {
                font-weight: 500;
                color: var(--text-secondary);
            }
            
            /* Weekly Grid */
            .mgr-weekly-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
            .mgr-weekly-card {
                padding: 16px;
            }
            .mgr-weekly-title {
                font-size: 13px;
                font-weight: 600;
                color: var(--alfred-cobalto);
                margin-bottom: 12px;
            }
            
            .mgr-alert-list, .mgr-highlight-list, .mgr-closing-list, .mgr-movement-list {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                flex-direction: column;
                gap: 8px;
            }
            
            .mgr-alert-item {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 10px 12px;
                background: #FEF2F2;
                border-radius: 8px;
                font-size: 13px;
                color: #991B1B;
                border-left: 3px solid var(--color-error-dark);
            }
            .mgr-alert-item.medium {
                background: #FFFBEB;
                color: #92400E;
                border-left-color: var(--color-warning-dark);
            }
            
            .mgr-highlight-item {
                padding: 10px 12px;
                background: #ECFDF5;
                border-radius: 8px;
                font-size: 13px;
                color: var(--color-success-dark);
            }
            
            .mgr-closing-item, .mgr-movement-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 12px;
                background: var(--bg-secondary);
                border-radius: 8px;
                font-size: 13px;
            }
            .mgr-deal-name {
                color: var(--text-color);
                font-weight: 500;
            }
            .mgr-deal-amount {
                color: var(--alfred-indigo);
                font-weight: 600;
            }
            .mgr-stage-badge {
                color: var(--alfred-indigo);
                font-weight: 500;
                font-size: 12px;
            }
            
            .mgr-no-data {
                color: var(--text-muted);
                font-size: 13px;
                margin: 0;
                padding: 8px 0;
            }
            .mgr-empty {
                text-align: center;
                padding: 32px;
                color: var(--text-secondary);
                background: var(--bg-secondary);
                border-radius: 12px;
            }
            
            /* Actions */
            .mgr-actions {
                display: flex;
                gap: 10px;
                margin-top: 32px;
                flex-wrap: wrap;
            }
            .mgr-btn {
                padding: 10px 18px;
                font-size: 14px;
                font-weight: 500;
                border: 1px solid var(--border-color);
                border-radius: 8px;
                background: #fff;
                color: var(--text-color);
                cursor: pointer;
                transition: all 0.15s ease;
            }
            .mgr-btn:hover {
                border-color: var(--alfred-indigo);
                color: var(--alfred-indigo);
            }
            .mgr-btn-primary {
                background: var(--alfred-indigo);
                border-color: var(--alfred-indigo);
                color: #fff;
            }
            .mgr-btn-primary:hover {
                background: var(--alfred-cobalto);
                border-color: var(--alfred-cobalto);
                color: #fff;
            }
            
            /* Spinner */
            .spinner {
                width: 32px;
                height: 32px;
                border: 3px solid var(--border-color);
                border-top-color: var(--alfred-indigo);
                border-radius: 50%;
                animation: spin 0.8s linear infinite;
            }
            @keyframes spin {
                to { transform: rotate(360deg); }
            }
            
            /* Responsive */
            @media (max-width: 1024px) {
                .mgr-kpi-grid {
                    grid-template-columns: repeat(3, 1fr);
                }
            }
            
            @media (max-width: 768px) {
                #manager-content {
                    padding: 24px 16px;
                }
                .mgr-header {
                    flex-direction: column;
                }
                .mgr-kpi-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
                .mgr-weekly-grid {
                    grid-template-columns: 1fr;
                }
                .mgr-table {
                    font-size: 13px;
                }
                .mgr-progress-bar {
                    width: 40px;
                }
                .mgr-actions {
                    flex-direction: column;
                }
                .mgr-btn {
                    width: 100%;
                    text-align: center;
                }
            }
            
            @media (max-width: 480px) {
                .mgr-kpi-grid {
                    grid-template-columns: 1fr;
                }
                .mgr-kpi-card {
                    padding: 16px;
                }
                .mgr-legend {
                    flex-wrap: wrap;
                    gap: 8px 16px;
                }
            }

            /* Offboarding button */
            .mgr-btn-offboarding {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 30px;
                border: 1px solid var(--border-color);
                border-radius: 6px;
                background: #fff;
                cursor: pointer;
                color: var(--text-muted);
                transition: all 0.15s;
            }
            .mgr-btn-offboarding:hover {
                border-color: var(--color-error);
                color: var(--color-error);
                background: #FEF2F2;
            }
            .mgr-btn-offboarding svg { width: 14px; height: 14px; }
        

            .mgr-access-denied {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 60vh;
                padding: 24px;
            }
            .mgr-access-content {
                text-align: center;
                padding: 40px;
                background: #fff;
                border: 1px solid var(--border-color);
                border-radius: 16px;
                max-width: 400px;
            }
            .mgr-access-icon {
                font-size: 48px;
                margin-bottom: 16px;
            }
            .mgr-access-content h2 {
                font-size: 20px;
                font-weight: 600;
                color: var(--alfred-cobalto);
                margin: 0 0 8px 0;
            }
            .mgr-access-content p {
                color: var(--text-secondary);
                font-size: 14px;
                margin: 0 0 4px 0;
                line-height: 1.5;
            }
            .mgr-access-btn {
                margin-top: 24px;
                padding: 10px 24px;
                font-size: 14px;
                font-weight: 500;
                background: var(--alfred-indigo);
                color: #fff;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                transition: background 0.15s;
            }
            .mgr-access-btn:hover {
                background: var(--alfred-cobalto);
            }
        

            .mgr-billing-drawer-overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                z-index: 9999;
                display: flex;
                justify-content: flex-end;
                animation: fadeIn 0.2s ease;
            }
            
            .mgr-billing-drawer {
                width: 100%;
                max-width: 520px;
                height: 100%;
                background: var(--bg-primary, #ffffff);
                box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
                display: flex;
                flex-direction: column;
                animation: slideInRight 0.3s ease;
            }
            
            @keyframes slideInRight {
                from { transform: translateX(100%); }
                to { transform: translateX(0); }
            }
            
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            
            .mgr-billing-drawer-header {
                padding: 20px 24px;
                border-bottom: 1px solid var(--border-color, var(--border-color));
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 12px;
            }
            
            .mgr-billing-drawer-header h2 {
                margin: 0;
                font-size: 18px;
                font-weight: 600;
                color: var(--text-primary, #1f2937);
                flex: 1;
            }
            
            .mgr-billing-drawer-meta {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 4px;
            }
            
            .mgr-billing-person {
                font-size: 13px;
                font-weight: 600;
                color: var(--text-primary, #1f2937);
            }
            
            .mgr-billing-period {
                font-size: 12px;
                color: var(--text-muted, var(--text-secondary));
                background: var(--bg-secondary, var(--border-light));
                padding: 2px 10px;
                border-radius: 20px;
            }
            
            .mgr-billing-drawer-close {
                width: 32px;
                height: 32px;
                border: none;
                background: var(--bg-secondary, var(--border-light));
                border-radius: 50%;
                font-size: 20px;
                cursor: pointer;
                color: var(--text-muted, var(--text-secondary));
                transition: all 0.2s;
            }
            
            .mgr-billing-drawer-close:hover {
                background: var(--border-color, var(--border-color));
                color: var(--text-primary, #1f2937);
            }
            
            .mgr-billing-drawer-body {
                flex: 1;
                overflow-y: auto;
                padding: 20px 24px;
            }
            
            .mgr-billing-summary {
                background: var(--bg-secondary, var(--bg-secondary));
                border-radius: 12px;
                padding: 16px 20px;
                margin-bottom: 20px;
                border: 1px solid var(--border-color, var(--border-color));
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            
            .mgr-billing-total-label {
                font-size: 13px;
                color: var(--text-muted, var(--text-secondary));
                display: block;
            }
            
            .mgr-billing-total-value {
                font-size: 24px;
                font-weight: 700;
            }
            
            .mgr-billing-summary-right {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 8px;
            }
            
            .mgr-billing-summary-count {
                font-size: 13px;
                color: var(--text-muted, var(--text-secondary));
                text-align: right;
            }
            
            .mgr-billing-old-note {
                display: block;
                font-size: 11px;
                color: #ca8a04;
            }
            
            .mgr-export-btn {
                padding: 6px 12px;
                font-size: 12px;
                font-weight: 500;
                background: #f0fdf4;
                border: 1px solid #86efac;
                border-radius: 6px;
                color: #166534;
                cursor: pointer;
                transition: all 0.2s;
                white-space: nowrap;
            }
            
            .mgr-export-btn:hover {
                background: #dcfce7;
                border-color: #4ade80;
            }
            
            /* Buscador */
            .mgr-billing-search {
                position: relative;
                margin-bottom: 16px;
            }
            
            .mgr-billing-search-input {
                width: 100%;
                padding: 10px 36px 10px 12px;
                font-size: 14px;
                border: 1px solid var(--border-color, var(--border-color));
                border-radius: 8px;
                background: var(--bg-secondary, var(--bg-secondary));
                color: var(--text-primary, #1f2937);
                transition: all 0.2s;
            }
            
            .mgr-billing-search-input:focus {
                outline: none;
                border-color: var(--alfred-teal, var(--alfred-teal));
                background: #fff;
                box-shadow: 0 0 0 3px rgba(0, 178, 169, 0.1);
            }
            
            .mgr-billing-search-input::placeholder {
                color: var(--text-muted, var(--text-muted));
            }
            
            .mgr-billing-search-clear {
                position: absolute;
                right: 8px;
                top: 50%;
                transform: translateY(-50%);
                width: 24px;
                height: 24px;
                border: none;
                background: transparent;
                color: var(--text-muted, var(--text-muted));
                font-size: 18px;
                cursor: pointer;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.2s;
            }
            
            .mgr-billing-search-clear:hover {
                background: var(--border-color, var(--border-color));
                color: var(--text-primary, #1f2937);
            }
            
            .mgr-billing-no-results {
                text-align: center;
                padding: 32px 20px;
                color: var(--text-muted, var(--text-muted));
                font-size: 14px;
            }
            
            .mgr-billing-item-row.hidden {
                display: none !important;
            }
            
            .mgr-billing-item-row .highlight {
                background: #fef08a;
                padding: 0 2px;
                border-radius: 2px;
            }
            
            .mgr-billing-list {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }
            
            .mgr-billing-item-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 16px;
                background: var(--bg-secondary, var(--bg-secondary));
                border-radius: 8px;
                border: 1px solid var(--border-color, var(--border-color));
                transition: all 0.2s;
            }
            
            .mgr-billing-item-row:hover {
                border-color: var(--alfred-teal, var(--alfred-teal));
                background: #ffffff;
            }
            
            .mgr-billing-item-main {
                flex: 1;
                min-width: 0;
            }
            
            .mgr-billing-item-number {
                font-weight: 600;
                font-size: 14px;
                color: var(--text-primary, #1f2937);
                display: flex;
                align-items: center;
                gap: 6px;
                flex-wrap: wrap;
            }

            .mgr-type-badge {
                font-size: 9px;
                font-weight: 600;
                padding: 1px 5px;
                border-radius: 4px;
                text-transform: uppercase;
                letter-spacing: 0.3px;
            }
            .mgr-type-puntual { background: #dcfce7; color: #166534; }
            .mgr-type-recurrente { background: #dbeafe; color: #1e40af; }
            .mgr-type-mixta { background: #f3e8ff; color: var(--color-purple); }

            .mgr-subtype-badge {
                font-size: 9px;
                font-weight: 500;
                padding: 1px 5px;
                border-radius: 4px;
                background: var(--border-light);
                color: #4b5563;
            }

            .mgr-billing-item-customer {
                font-size: 13px;
                color: var(--text-secondary, #4b5563);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-top: 2px;
            }
            
            .mgr-billing-item-dates {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                font-size: 11px;
                color: var(--text-muted, var(--text-secondary));
                margin-top: 4px;
            }
            
            .mgr-billing-item-amount {
                font-weight: 700;
                font-size: 15px;
                white-space: nowrap;
                margin-left: 16px;
            }
            
            .mgr-billing-status {
                padding: 2px 8px;
                border-radius: 10px;
                font-size: 10px;
                font-weight: 500;
            }
            
            .mgr-billing-status-paid {
                background: #dcfce7;
                color: #166534;
            }
            
            .mgr-billing-status-open {
                background: #fef9c3;
                color: #a16207;
            }
            
            .mgr-billing-old-badge {
                background: #fef3c7;
                color: #92400e;
                padding: 2px 6px;
                border-radius: 4px;
                font-size: 10px;
            }

            .mgr-billing-partial-badge {
                background: #fef9c3;
                color: #a16207;
                padding: 2px 6px;
                border-radius: 4px;
                font-size: 10px;
                font-weight: 600;
            }

            .mgr-billing-split-badge {
                background: #ede9fe;
                color: #6d28d9;
                padding: 2px 6px;
                border-radius: 4px;
                font-size: 10px;
                font-weight: 600;
            }
            
            .mgr-billing-salesperson {
                background: #e0f2fe;
                color: #0369a1;
                padding: 2px 6px;
                border-radius: 4px;
                font-size: 10px;
            }
            
            .mgr-billing-empty {
                text-align: center;
                padding: 40px 20px;
                color: var(--text-muted, var(--text-secondary));
                font-size: 14px;
            }
            
            .mgr-kpi-clickable:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }
            
            .mgr-cell-clickable {
                cursor: pointer;
                position: relative;
                transition: background 0.2s;
            }
            
            .mgr-cell-clickable:hover {
                background: rgba(0, 178, 169, 0.08);
            }
            
            .mgr-cell-arrow {
                position: absolute;
                right: 4px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 10px;
                color: var(--alfred-teal, var(--alfred-teal));
                opacity: 0;
                transition: opacity 0.2s;
            }
            
            .mgr-cell-clickable:hover .mgr-cell-arrow {
                opacity: 1;
            }
            
            /* Estilos para asignaciones manuales */
            .mgr-billing-item-actions {
                display: flex;
                align-items: center;
                gap: 8px;
            }
            
            .mgr-edit-assignment-btn {
                width: 28px;
                height: 28px;
                border: 1px solid var(--border-color, var(--border-color));
                border-radius: 6px;
                background: var(--bg-secondary, var(--bg-secondary));
                cursor: pointer;
                font-size: 14px;
                transition: all 0.2s;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .mgr-edit-assignment-btn:hover {
                background: #e0f2fe;
                border-color: #0369a1;
            }
            
            .mgr-billing-manual {
                border-left: 3px solid #8b5cf6 !important;
            }
            
            .mgr-badge-manual, .mgr-badge-split {
                font-size: 10px;
                margin-left: 4px;
            }
            
            @media (max-width: 640px) {
                .mgr-billing-drawer {
                    max-width: 100%;
                }
            }
        

            /* Selector de período */
            .mgr-pending-period-selector {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 16px;
                padding: 12px;
                background: var(--bg-secondary, var(--bg-secondary));
                border-radius: 8px;
            }
            
            .mgr-pending-period-selector label {
                font-size: 13px;
                font-weight: 500;
                color: var(--text-secondary, #4b5563);
            }
            
            .mgr-pending-period-selector select {
                flex: 1;
                padding: 8px 12px;
                font-size: 13px;
                border: 1px solid var(--border-color, var(--border-color));
                border-radius: 6px;
                background: white;
                cursor: pointer;
            }
            
            .mgr-pending-period-selector select:focus {
                outline: none;
                border-color: #ca8a04;
                box-shadow: 0 0 0 3px rgba(202, 138, 4, 0.1);
            }
            
            /* Barra de antigüedad */
            .mgr-pending-aging-summary {
                margin-bottom: 16px;
                padding: 12px;
                background: var(--bg-secondary, var(--bg-secondary));
                border-radius: 8px;
            }
            
            .mgr-pending-aging-bar {
                display: flex;
                height: 8px;
                border-radius: 4px;
                overflow: hidden;
                margin-bottom: 12px;
                background: var(--border-color);
            }
            
            .aging-segment {
                transition: width 0.3s ease;
            }
            
            .aging-segment.aging-over90 { background: var(--color-error-dark); }
            .aging-segment.aging-over60 { background: #ea580c; }
            .aging-segment.aging-over30 { background: #ca8a04; }
            .aging-segment.aging-current { background: var(--text-muted); }
            
            .mgr-pending-aging-legend {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }
            
            .aging-legend-item {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 11px;
            }
            
            .aging-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
            }
            
            .aging-dot.aging-over90 { background: var(--color-error-dark); }
            .aging-dot.aging-over60 { background: #ea580c; }
            .aging-dot.aging-over30 { background: #ca8a04; }
            .aging-dot.aging-current { background: var(--text-muted); }
            
            .aging-label {
                color: var(--text-secondary, #4b5563);
                min-width: 60px;
            }
            
            .aging-value {
                color: var(--text-primary, #1f2937);
                font-weight: 500;
            }
            
            /* Badges de antigüedad en items */
            .aging-badge {
                display: inline-flex;
                align-items: center;
                gap: 3px;
                padding: 2px 6px;
                font-size: 10px;
                font-weight: 600;
                border-radius: 4px;
                margin-left: 8px;
            }
            
            .aging-badge .icon-inline {
                width: 10px;
                height: 10px;
            }
            
            .aging-badge-over90 {
                background: #fef2f2;
                color: var(--color-error-dark);
            }
            
            .aging-badge-over60 {
                background: #fff7ed;
                color: #ea580c;
            }
            
            .aging-badge-over30 {
                background: #fefce8;
                color: #ca8a04;
            }
            
            .aging-badge-current {
                background: var(--border-light);
                color: var(--text-secondary);
            }
            
            .mgr-pending-item {
                border-left: 3px solid transparent;
            }
            
            .mgr-pending-item:has(.aging-badge-over90) {
                border-left-color: var(--color-error-dark);
            }
            
            .mgr-pending-item:has(.aging-badge-over60) {
                border-left-color: #ea580c;
            }
            
            .mgr-pending-item:has(.aging-badge-over30) {
                border-left-color: #ca8a04;
            }
        

            .mgr-deals-drawer-overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                z-index: 9999;
                display: flex;
                justify-content: flex-end;
                animation: fadeIn 0.2s ease;
            }
            
            .mgr-deals-drawer {
                width: 100%;
                max-width: 560px;
                height: 100%;
                background: var(--bg-primary, #ffffff);
                box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
                display: flex;
                flex-direction: column;
                animation: slideInRight 0.3s ease;
            }
            
            .mgr-deals-drawer-header {
                padding: 20px 24px;
                border-bottom: 1px solid var(--border-color, var(--border-color));
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 12px;
            }
            
            .mgr-deals-drawer-header h2 {
                margin: 0;
                font-size: 18px;
                font-weight: 600;
                color: var(--text-primary, #1f2937);
                flex: 1;
                display: flex;
                align-items: center;
                gap: 8px;
            }
            
            .mgr-deals-drawer-meta {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 4px;
            }
            
            .mgr-deals-person {
                font-size: 13px;
                font-weight: 600;
                color: var(--text-primary, #1f2937);
            }
            
            .mgr-deals-period {
                font-size: 12px;
                color: var(--text-muted, var(--text-secondary));
                background: var(--bg-secondary, var(--border-light));
                padding: 2px 10px;
                border-radius: 20px;
            }
            
            .mgr-deals-drawer-close {
                position: absolute;
                top: 16px;
                right: 16px;
                width: 32px;
                height: 32px;
                border: none;
                background: var(--bg-secondary, var(--border-light));
                border-radius: 50%;
                font-size: 20px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--text-muted, var(--text-secondary));
                transition: all 0.2s;
            }
            
            .mgr-deals-drawer-close:hover {
                background: var(--bg-tertiary, var(--border-color));
                color: var(--text-primary, #1f2937);
            }
            
            .mgr-deals-drawer-body {
                flex: 1;
                overflow-y: auto;
                padding: 16px 24px;
            }
            
            .mgr-deals-summary {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 16px;
                background: var(--bg-secondary, var(--bg-secondary));
                border-radius: 12px;
                margin-bottom: 16px;
                border-left: 4px solid;
            }
            
            .mgr-deals-summary-total {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }
            
            .mgr-deals-total-label {
                font-size: 12px;
                color: var(--text-muted, var(--text-secondary));
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }
            
            .mgr-deals-total-value {
                font-size: 24px;
                font-weight: 700;
            }
            
            .mgr-deals-summary-right {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 8px;
            }
            
            .mgr-deals-summary-count {
                font-size: 14px;
                color: var(--text-muted, var(--text-secondary));
            }
            
            /* Bulk action bar (stale deals drawer) */
            .mgr-stale-bulk-bar {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 8px 12px;
                background: var(--bg-secondary, #f9fafb);
                border: 1px solid var(--border-color, #e5e7eb);
                border-radius: 8px;
                margin-bottom: 8px;
                position: sticky;
                top: 0;
                z-index: 2;
            }
            .mgr-stale-select-all-wrap {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 13px;
                font-weight: 500;
                color: var(--text-secondary);
                cursor: pointer;
                white-space: nowrap;
            }
            .mgr-stale-selected-count {
                flex: 1;
                font-size: 12px;
                color: var(--text-muted, var(--text-secondary));
                font-weight: 500;
            }
            .mgr-stale-cb-wrap {
                display: flex;
                align-items: center;
                flex-shrink: 0;
                padding-right: 4px;
                cursor: pointer;
            }
            .mgr-stale-cb {
                width: 16px;
                height: 16px;
                cursor: pointer;
                accent-color: var(--alfred-azul, #3b82f6);
            }

            /* Sort + Search row (stale deals drawer) */
            .mgr-deals-sort-search {
                display: flex;
                align-items: flex-start;
                gap: 12px;
                margin-bottom: 4px;
            }
            .mgr-deals-sort {
                display: flex;
                flex-direction: column;
                gap: 4px;
                flex-shrink: 0;
            }
            .mgr-deals-sort label {
                font-size: 11px;
                font-weight: 500;
                color: var(--text-muted);
                text-transform: uppercase;
                letter-spacing: 0.04em;
            }
            .mgr-deals-sort select {
                padding: 8px 28px 8px 10px;
                border: 1px solid var(--border-color);
                border-radius: 8px;
                font-size: 13px;
                background: var(--bg-primary, #fff);
                color: var(--text-primary);
                cursor: pointer;
                -webkit-appearance: none;
                appearance: none;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right 8px center;
            }
            .mgr-deals-sort select:focus {
                outline: none;
                border-color: var(--color-purple);
                box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
            }

            .mgr-deals-search {
                position: relative;
                margin-bottom: 16px;
            }
            
            .mgr-deals-search-input {
                width: 100%;
                padding: 10px 40px 10px 14px;
                border: 1px solid var(--border-color, var(--border-color));
                border-radius: 8px;
                font-size: 14px;
                background: var(--bg-primary, #ffffff);
                color: var(--text-primary, #1f2937);
            }
            
            .mgr-deals-search-input:focus {
                outline: none;
                border-color: var(--color-purple);
                box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
            }
            
            .mgr-deals-search-clear {
                position: absolute;
                right: 8px;
                top: 50%;
                transform: translateY(-50%);
                width: 24px;
                height: 24px;
                border: none;
                background: transparent;
                color: var(--text-muted, var(--text-muted));
                cursor: pointer;
                font-size: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 4px;
            }
            
            .mgr-deals-search-clear:hover {
                background: var(--bg-secondary, var(--border-light));
                color: var(--text-primary, #1f2937);
            }
            
            .mgr-deals-list {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }
            
            .mgr-deals-item-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 14px 16px;
                background: var(--bg-primary, #ffffff);
                border: 1px solid var(--border-color, var(--border-color));
                border-radius: 10px;
                transition: all 0.2s;
            }
            
            .mgr-deals-item-row:hover {
                border-color: #d1d5db;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            
            .mgr-deals-item-main {
                flex: 1;
                min-width: 0;
            }
            
            .mgr-deals-item-name {
                font-weight: 600;
                font-size: 14px;
                color: var(--text-primary, #1f2937);
                margin-bottom: 4px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            .mgr-deals-link {
                color: var(--text-primary, #1f2937);
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                gap: 4px;
            }
            
            .mgr-deals-link:hover {
                color: var(--color-purple);
            }
            
            .mgr-deals-link .lucide {
                width: 12px;
                height: 12px;
                opacity: 0.6;
            }

            .mgr-deals-hs-link {
                display: inline-flex;
                align-items: center;
                margin-left: 6px;
                color: var(--text-muted, #9ca3af);
                opacity: 0.7;
                text-decoration: none;
                vertical-align: middle;
            }

            .mgr-deals-hs-link:hover {
                opacity: 1;
                color: var(--color-purple);
            }

            .mgr-deals-hs-link .lucide {
                width: 11px;
                height: 11px;
            }
            
            .mgr-deals-item-company {
                font-size: 13px;
                color: var(--text-muted, var(--text-secondary));
                margin-bottom: 6px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            .mgr-deals-item-meta {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
                font-size: 12px;
                color: var(--text-muted, var(--text-muted));
            }
            
            .mgr-deals-item-meta span {
                display: flex;
                align-items: center;
                gap: 4px;
            }
            
            .mgr-deals-item-meta .lucide {
                width: 12px;
                height: 12px;
            }
            
            .mgr-deals-owner {
                background: var(--bg-secondary, var(--border-light));
                padding: 2px 8px;
                border-radius: 12px;
            }
            
            .mgr-deals-item-amount {
                font-weight: 700;
                font-size: 15px;
                white-space: nowrap;
                margin-left: 16px;
            }
            
            .mgr-deals-empty {
                text-align: center;
                padding: 40px 20px;
                color: var(--text-muted, var(--text-muted));
                font-size: 14px;
            }
            
            .mgr-deals-no-results {
                text-align: center;
                padding: 40px 20px;
                color: var(--text-muted, var(--text-muted));
                font-size: 14px;
            }
        

            .mgr-commission-drawer-overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                z-index: 9999;
                display: flex;
                justify-content: flex-end;
                animation: fadeIn 0.2s ease;
            }
            
            .mgr-commission-drawer {
                width: 100%;
                max-width: 480px;
                height: 100%;
                background: var(--bg-primary, #ffffff);
                box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
                display: flex;
                flex-direction: column;
                animation: slideInRight 0.3s ease;
            }
            
            .mgr-commission-drawer-header {
                padding: 20px 24px;
                border-bottom: 1px solid var(--border-color, var(--border-color));
                background: linear-gradient(135deg, var(--color-success-dark) 0%, var(--color-success) 100%);
                color: white;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 12px;
            }
            
            .mgr-commission-drawer-header h2 {
                margin: 0;
                font-size: 18px;
                font-weight: 600;
                flex: 1;
                display: flex;
                align-items: center;
                gap: 8px;
            }
            
            .mgr-commission-drawer-meta {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 4px;
            }
            
            .mgr-commission-person {
                font-size: 13px;
                font-weight: 600;
            }
            
            .mgr-commission-period {
                font-size: 12px;
                opacity: 0.9;
                background: rgba(255,255,255,0.2);
                padding: 2px 10px;
                border-radius: 20px;
            }
            
            .mgr-commission-drawer-close {
                position: absolute;
                top: 16px;
                right: 16px;
                width: 32px;
                height: 32px;
                border: none;
                background: rgba(255,255,255,0.2);
                border-radius: 50%;
                font-size: 20px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                transition: all 0.2s;
            }
            
            .mgr-commission-drawer-close:hover {
                background: rgba(255,255,255,0.3);
            }
            
            .mgr-commission-drawer-body {
                flex: 1;
                overflow-y: auto;
                padding: 20px 24px;
            }
            
            .mgr-commission-total-card {
                background: linear-gradient(135deg, var(--color-success-dark) 0%, var(--color-success) 100%);
                color: white;
                padding: 24px;
                border-radius: 16px;
                text-align: center;
                margin-bottom: 24px;
            }
            
            .mgr-commission-total-label {
                font-size: 13px;
                text-transform: uppercase;
                letter-spacing: 1px;
                opacity: 0.9;
                margin-bottom: 8px;
            }
            
            .mgr-commission-total-value {
                font-size: 36px;
                font-weight: 700;
                margin-bottom: 8px;
            }
            
            .mgr-commission-total-formula {
                font-size: 13px;
                opacity: 0.8;
            }
            
            .mgr-commission-component {
                background: var(--bg-secondary, var(--bg-secondary));
                border-radius: 12px;
                margin-bottom: 16px;
                overflow: hidden;
                border: 1px solid var(--border-color, var(--border-color));
            }
            
            .mgr-commission-component.active {
                border-color: var(--color-success);
            }
            
            .mgr-commission-component.inactive {
                opacity: 0.7;
            }
            
            .mgr-commission-component-header {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 16px;
                background: var(--bg-primary, #ffffff);
                border-bottom: 1px solid var(--border-color, var(--border-color));
            }
            
            .mgr-commission-component-icon {
                width: 40px;
                height: 40px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #ecfdf5;
                color: var(--color-success-dark);
            }
            
            .mgr-commission-component.inactive .mgr-commission-component-icon {
                background: var(--border-light);
                color: var(--text-muted);
            }
            
            .mgr-commission-component-title {
                flex: 1;
            }
            
            .mgr-commission-component-title h3 {
                margin: 0 0 4px 0;
                font-size: 14px;
                font-weight: 600;
                color: var(--text-primary, #1f2937);
            }
            
            .mgr-commission-status {
                font-size: 12px;
                font-weight: 500;
            }
            
            .mgr-commission-status.eligible {
                color: var(--color-success-dark);
            }
            
            .mgr-commission-status.not-eligible {
                color: var(--color-error-dark);
            }
            
            .mgr-commission-component-amount {
                font-size: 20px;
                font-weight: 700;
                color: var(--color-success-dark);
            }
            
            .mgr-commission-component.inactive .mgr-commission-component-amount {
                color: var(--text-muted);
            }
            
            .mgr-commission-component-details {
                padding: 16px;
            }
            
            .mgr-commission-row {
                display: flex;
                justify-content: space-between;
                padding: 8px 0;
                border-bottom: 1px dashed var(--border-color, var(--border-color));
            }
            
            .mgr-commission-row:last-of-type {
                border-bottom: none;
            }
            
            .mgr-commission-row .label {
                color: var(--text-muted, var(--text-secondary));
                font-size: 13px;
            }
            
            .mgr-commission-row .value {
                font-weight: 600;
                font-size: 13px;
                color: var(--text-primary, #1f2937);
            }
            
            .mgr-commission-row .value.success {
                color: var(--color-success-dark);
            }
            
            .mgr-commission-row .value.danger {
                color: var(--color-error-dark);
            }
            
            .mgr-commission-row .value.tier {
                background: #dbeafe;
                color: #1d4ed8;
                padding: 2px 8px;
                border-radius: 4px;
                font-size: 11px;
            }
            
            .mgr-commission-row.highlight {
                background: #f0fdf4;
                margin: 8px -16px;
                padding: 12px 16px;
                border-bottom: none;
            }
            
            .mgr-commission-formula {
                background: #ecfdf5;
                padding: 12px;
                border-radius: 8px;
                font-size: 13px;
                color: var(--color-success-dark);
                margin-top: 12px;
                text-align: center;
            }
            
            .mgr-commission-formula-note {
                display: block;
                font-size: 11px;
                color: var(--text-secondary);
                margin-bottom: 4px;
            }
            
            .mgr-commission-no-eligible {
                background: #fef2f2;
                padding: 12px;
                border-radius: 8px;
                font-size: 12px;
                color: #991b1b;
                margin-top: 8px;
                text-align: center;
            }
            
            .mgr-commission-tiers-section {
                margin-top: 24px;
            }
            
            .mgr-commission-tiers-section h4 {
                font-size: 14px;
                color: var(--text-primary, #1f2937);
                margin: 0 0 12px 0;
                display: flex;
                align-items: center;
                gap: 6px;
            }
            
            .mgr-commission-tiers-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 13px;
            }
            
            .mgr-commission-tiers-table th,
            .mgr-commission-tiers-table td {
                padding: 10px 12px;
                text-align: center;
                border: 1px solid var(--border-color, var(--border-color));
            }
            
            .mgr-commission-tiers-table th {
                background: var(--bg-secondary, var(--border-light));
                font-weight: 600;
                color: var(--text-muted, var(--text-secondary));
                font-size: 11px;
                text-transform: uppercase;
            }
            
            .mgr-commission-tiers-table tr.current-tier {
                background: #ecfdf5;
            }
            
            .mgr-commission-tiers-table td.active-rate {
                background: var(--color-success-dark);
                color: white;
                font-weight: 600;
            }
            
            .mgr-commission-note {
                display: flex;
                align-items: flex-start;
                gap: 8px;
                padding: 12px;
                background: #eff6ff;
                border-radius: 8px;
                font-size: 12px;
                color: #1e40af;
                margin-top: 16px;
            }
            
            .mgr-commission-note .lucide {
                flex-shrink: 0;
                width: 16px;
                height: 16px;
                margin-top: 1px;
            }
        

                .mgr-modal-overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.6);
                    z-index: 10000;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    animation: fadeIn 0.2s ease;
                }
                
                .mgr-modal {
                    background: var(--bg-primary, #ffffff);
                    border-radius: 16px;
                    width: 100%;
                    max-width: 480px;
                    max-height: 90vh;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
                    animation: slideUp 0.3s ease;
                }
                
                @keyframes slideUp {
                    from { transform: translateY(20px); opacity: 0; }
                    to { transform: translateY(0); opacity: 1; }
                }
                
                .mgr-modal-header {
                    padding: 20px 24px;
                    border-bottom: 1px solid var(--border-color, var(--border-color));
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                
                .mgr-modal-header h3 {
                    margin: 0;
                    font-size: 18px;
                    font-weight: 600;
                    color: var(--text-primary, #1f2937);
                }
                
                .mgr-modal-close {
                    width: 32px;
                    height: 32px;
                    border: none;
                    background: var(--bg-secondary, var(--border-light));
                    border-radius: 50%;
                    font-size: 20px;
                    cursor: pointer;
                    color: var(--text-muted, var(--text-secondary));
                }
                
                .mgr-modal-body {
                    padding: 24px;
                    overflow-y: auto;
                    flex: 1;
                }
                
                .mgr-modal-invoice-info {
                    background: var(--bg-secondary, var(--bg-secondary));
                    border-radius: 12px;
                    padding: 16px;
                    margin-bottom: 24px;
                    display: grid;
                    grid-template-columns: 1fr auto;
                    gap: 4px 16px;
                }
                
                .mgr-modal-invoice-number {
                    font-weight: 600;
                    color: var(--text-primary, #1f2937);
                }
                
                .mgr-modal-invoice-customer {
                    font-size: 14px;
                    color: var(--text-secondary, #4b5563);
                    grid-column: 1;
                }
                
                .mgr-modal-invoice-amount {
                    font-size: 20px;
                    font-weight: 700;
                    color: var(--color-success-dark);
                    grid-row: 1 / 3;
                    grid-column: 2;
                    align-self: center;
                }
                
                .mgr-modal-invoice-date {
                    font-size: 12px;
                    color: var(--text-muted, var(--text-secondary));
                    grid-column: 1;
                }
                
                .mgr-modal-section {
                    margin-bottom: 20px;
                }
                
                .mgr-modal-label {
                    display: block;
                    font-size: 13px;
                    font-weight: 500;
                    color: var(--text-secondary, #4b5563);
                    margin-bottom: 8px;
                }
                
                .mgr-radio-group {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                }
                
                .mgr-radio {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    cursor: pointer;
                    font-size: 14px;
                    color: var(--text-primary, #1f2937);
                }
                
                .mgr-radio input[type="radio"] {
                    width: 18px;
                    height: 18px;
                    accent-color: var(--alfred-indigo);
                }
                
                .mgr-assign-row {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    margin-bottom: 8px;
                    padding: 8px;
                    background: var(--bg-secondary, var(--bg-secondary));
                    border-radius: 8px;
                }
                
                .mgr-assign-select {
                    flex: 1;
                    padding: 8px 12px;
                    border: 1px solid var(--border-color, var(--border-color));
                    border-radius: 6px;
                    font-size: 14px;
                    background: #fff;
                }
                
                .mgr-assign-percent {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                }
                
                .mgr-assign-percent-input {
                    width: 60px;
                    padding: 8px;
                    border: 1px solid var(--border-color, var(--border-color));
                    border-radius: 6px;
                    font-size: 14px;
                    text-align: center;
                }
                
                .mgr-assign-amount {
                    min-width: 80px;
                    text-align: right;
                    font-weight: 600;
                    color: var(--color-success-dark);
                    font-size: 14px;
                }
                
                .mgr-assign-remove {
                    width: 32px;
                    height: 32px;
                    border: none;
                    background: transparent;
                    cursor: pointer;
                    font-size: 14px;
                    border-radius: 6px;
                }
                
                .mgr-assign-remove:hover {
                    background: #fee2e2;
                }
                
                .mgr-add-btn {
                    width: 100%;
                    padding: 10px;
                    border: 2px dashed var(--border-color, var(--border-color));
                    background: transparent;
                    border-radius: 8px;
                    color: var(--text-muted, var(--text-secondary));
                    font-size: 14px;
                    cursor: pointer;
                    margin-top: 8px;
                }
                
                .mgr-add-btn:hover {
                    border-color: var(--alfred-indigo);
                    color: var(--alfred-indigo);
                }
                
                .mgr-percent-total {
                    margin-top: 12px;
                    font-size: 14px;
                    color: var(--text-secondary, #4b5563);
                    text-align: right;
                }
                
                .mgr-percent-total.invalid {
                    color: var(--color-error-dark);
                }
                
                .mgr-percent-total.valid {
                    color: var(--color-success-dark);
                }
                
                .mgr-modal-textarea {
                    width: 100%;
                    padding: 12px;
                    border: 1px solid var(--border-color, var(--border-color));
                    border-radius: 8px;
                    font-size: 14px;
                    resize: vertical;
                    min-height: 60px;
                }
                
                .mgr-restore-btn {
                    width: 100%;
                    padding: 10px;
                    border: 1px solid #f97316;
                    background: #fff7ed;
                    border-radius: 8px;
                    color: #c2410c;
                    font-size: 14px;
                    cursor: pointer;
                }
                
                .mgr-restore-btn:hover {
                    background: #ffedd5;
                }
                
                .mgr-modal-footer {
                    padding: 16px 24px;
                    border-top: 1px solid var(--border-color, var(--border-color));
                    display: flex;
                    gap: 12px;
                    justify-content: flex-end;
                }
                
                .mgr-modal-btn-secondary {
                    padding: 10px 20px;
                    border: 1px solid var(--border-color, var(--border-color));
                    background: #fff;
                    border-radius: 8px;
                    font-size: 14px;
                    cursor: pointer;
                }
                
                .mgr-modal-btn-primary {
                    padding: 10px 20px;
                    border: none;
                    background: var(--alfred-indigo);
                    color: #fff;
                    border-radius: 8px;
                    font-size: 14px;
                    font-weight: 500;
                    cursor: pointer;
                }
                
                .mgr-modal-btn-primary:hover {
                    background: #003d59;
                }
                
                .mgr-modal-btn-primary:disabled {
                    background: var(--text-muted);
                    cursor: not-allowed;
                }
            

        #mgr-offboarding-drawer {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5); z-index: 10000;
            display: flex; justify-content: flex-end;
            animation: obFadeIn 0.2s ease;
            font-family: var(--font-primary);
        }
        #mgr-offboarding-drawer * { box-sizing: border-box; }
        #mgr-offboarding-drawer .ob-panel {
            width: 100%; max-width: 580px; height: 100vh;
            background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,0.18);
            display: flex; flex-direction: column; overflow: hidden;
            animation: obSlideIn 0.3s ease;
        }
        #mgr-offboarding-drawer .ob-head {
            padding: 18px 24px; flex-shrink: 0;
            background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
            border-bottom: 2px solid #fecaca;
            display: flex; align-items: center; gap: 12px;
        }
        #mgr-offboarding-drawer .ob-head h2 {
            margin: 0; font-size: 17px; font-weight: 600; color: #991b1b !important;
            flex: 1; display: flex; align-items: center; gap: 8px; line-height: 1.3;
        }
        #mgr-offboarding-drawer .ob-head h2 svg { width: 20px; height: 20px; }
        #mgr-offboarding-drawer .ob-close-btn {
            background: none; border: none; font-size: 28px; cursor: pointer;
            color: #991b1b; padding: 0 4px; line-height: 1;
        }
        #mgr-offboarding-drawer .ob-close-btn:hover { opacity: 0.7; }
        #mgr-offboarding-drawer .ob-scroll {
            flex: 1; overflow-y: auto; overflow-x: hidden;
            padding: 20px 24px; min-height: 0;
        }

        /* Summary row */
        #mgr-offboarding-drawer .ob-stats {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 10px; margin-bottom: 20px;
        }
        @media (max-width: 500px) {
            #mgr-offboarding-drawer .ob-stats { grid-template-columns: repeat(2, 1fr); }
        }
        #mgr-offboarding-drawer .ob-stat-card {
            background: var(--bg-secondary); border: 1px solid var(--border-color);
            border-radius: 10px; padding: 14px; text-align: center;
        }
        #mgr-offboarding-drawer .ob-stat-card.danger {
            background: #fef2f2; border-color: #fecaca;
        }
        #mgr-offboarding-drawer .ob-stat-card.warn {
            background: #fffbeb; border-color: #fde68a;
        }
        #mgr-offboarding-drawer .ob-stat-val {
            font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.2;
        }
        #mgr-offboarding-drawer .ob-stat-card.danger .ob-stat-val { color: var(--color-error-dark); }
        #mgr-offboarding-drawer .ob-stat-card.warn .ob-stat-val { color: var(--color-warning-dark); }
        #mgr-offboarding-drawer .ob-stat-lbl {
            font-size: 11px; color: var(--text-secondary); margin-top: 3px; text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        #mgr-offboarding-drawer .ob-ka-list {
            display: flex; flex-direction: column; gap: 6px; margin-top: 6px;
        }
        #mgr-offboarding-drawer .ob-ka-row {
            display: flex; align-items: center; gap: 8px;
            font-size: 13px; color: var(--text-color); padding: 6px 10px;
            background: var(--bg-secondary); border-radius: 6px; border: 1px solid var(--border-color);
        }
        #mgr-offboarding-drawer .ob-stat-sub {
            font-size: 11px; color: var(--text-muted); margin-top: 2px;
        }

        /* Section */
        #mgr-offboarding-drawer .ob-section {
            margin-bottom: 20px;
        }
        #mgr-offboarding-drawer .ob-section-title {
            font-size: 13px; font-weight: 600; color: var(--text-color);
            margin-bottom: 10px; padding-bottom: 6px;
            border-bottom: 1px solid var(--border-color);
        }

        /* Priority rows */
        #mgr-offboarding-drawer .ob-prio {
            display: flex; align-items: flex-start; gap: 10px;
            padding: 10px 12px; border-radius: 8px;
            font-size: 13px; color: var(--text-color); margin-bottom: 6px;
            line-height: 1.5;
        }
        #mgr-offboarding-drawer .ob-prio.urgent { background: #fef2f2; border-left: 3px solid var(--color-error); }
        #mgr-offboarding-drawer .ob-prio.important { background: #fffbeb; border-left: 3px solid var(--color-warning); }
        #mgr-offboarding-drawer .ob-prio.follow { background: #eff6ff; border-left: 3px solid #3b82f6; }
        #mgr-offboarding-drawer .ob-tag {
            display: inline-block; font-size: 9px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.5px;
            padding: 3px 8px; border-radius: 4px; flex-shrink: 0; margin-top: 2px;
        }
        #mgr-offboarding-drawer .ob-prio.urgent .ob-tag { background: var(--color-error); color: #fff; }
        #mgr-offboarding-drawer .ob-prio.important .ob-tag { background: var(--color-warning); color: #fff; }
        #mgr-offboarding-drawer .ob-prio.follow .ob-tag { background: #3b82f6; color: #fff; }

        /* Tables */
        #mgr-offboarding-drawer .ob-tbl-wrap {
            overflow-x: auto; -webkit-overflow-scrolling: touch;
            border: 1px solid var(--border-color); border-radius: 8px;
        }
        #mgr-offboarding-drawer table {
            width: 100%; border-collapse: collapse; font-size: 13px;
            white-space: nowrap;
        }
        #mgr-offboarding-drawer th {
            text-align: left; padding: 8px 10px; font-weight: 500;
            color: var(--text-secondary); font-size: 11px; text-transform: uppercase;
            letter-spacing: 0.5px; border-bottom: 1px solid var(--border-color);
            background: var(--bg-secondary);
        }
        #mgr-offboarding-drawer td {
            padding: 8px 10px; border-bottom: 1px solid var(--border-light);
            color: var(--text-color); white-space: normal; word-break: break-word;
        }
        #mgr-offboarding-drawer tr.hi td {
            background: #fef2f2; font-weight: 500;
        }
        #mgr-offboarding-drawer td:last-child,
        #mgr-offboarding-drawer th:last-child { text-align: right; }

        /* Stage accordion */
        #mgr-offboarding-drawer .ob-stage {
            border: 1px solid var(--border-color); border-radius: 8px;
            margin-bottom: 8px; overflow: hidden;
        }
        #mgr-offboarding-drawer .ob-stage.hi {
            border-color: #fecaca;
        }
        #mgr-offboarding-drawer .ob-stage-head {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 14px; cursor: pointer; user-select: none;
            background: var(--bg-secondary); transition: background 0.15s;
        }
        #mgr-offboarding-drawer .ob-stage-head:hover { background: var(--border-light); }
        #mgr-offboarding-drawer .ob-stage.hi .ob-stage-head { background: #fef2f2; }
        #mgr-offboarding-drawer .ob-stage.hi .ob-stage-head:hover { background: #fee2e2; }
        #mgr-offboarding-drawer .ob-stage-chevron {
            font-size: 12px; color: var(--text-muted); transition: transform 0.2s;
            flex-shrink: 0; width: 16px; text-align: center;
        }
        #mgr-offboarding-drawer .ob-stage.open .ob-stage-chevron { transform: rotate(90deg); }
        #mgr-offboarding-drawer .ob-stage-label {
            flex: 1; font-size: 13px; font-weight: 500; color: var(--text-color);
        }
        #mgr-offboarding-drawer .ob-stage-count {
            font-size: 12px; color: var(--text-secondary); font-weight: 600;
            background: var(--border-color); padding: 2px 8px; border-radius: 10px;
        }
        #mgr-offboarding-drawer .ob-stage.hi .ob-stage-count {
            background: #fecaca; color: #991b1b;
        }
        #mgr-offboarding-drawer .ob-stage-amt {
            font-size: 13px; font-weight: 600; color: var(--text-primary);
            min-width: 80px; text-align: right;
        }
        #mgr-offboarding-drawer .ob-stage-body {
            display: none; border-top: 1px solid var(--border-color);
            padding: 8px;
        }
        #mgr-offboarding-drawer .ob-stage.open .ob-stage-body { display: block; }
        #mgr-offboarding-drawer .ob-stage-deal {
            display: flex; align-items: center; gap: 8px;
            padding: 8px 10px; border-radius: 6px; font-size: 12px;
            transition: background 0.1s;
        }
        #mgr-offboarding-drawer .ob-stage-deal:hover { background: var(--border-light); }
        #mgr-offboarding-drawer .ob-stage-deal-name {
            flex: 1; color: var(--text-color); font-weight: 500;
            min-width: 0; overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap;
        }
        #mgr-offboarding-drawer .ob-stage-deal-amt {
            font-weight: 600; color: var(--text-primary); flex-shrink: 0; font-size: 12px;
        }
        #mgr-offboarding-drawer .ob-stage-deal-date {
            font-size: 11px; color: var(--text-muted); flex-shrink: 0;
        }
        #mgr-offboarding-drawer .ob-stage-deal-link {
            color: #2563eb; text-decoration: none; font-size: 11px; flex-shrink: 0;
        }
        #mgr-offboarding-drawer .ob-stage-deal-link:hover { text-decoration: underline; }

        /* Deal cards */
        #mgr-offboarding-drawer .ob-deal {
            border: 1px solid #fecaca; border-radius: 10px;
            padding: 12px 14px; background: #fef2f2; margin-bottom: 8px;
        }
        #mgr-offboarding-drawer .ob-deal-top {
            display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
            flex-wrap: wrap;
        }
        #mgr-offboarding-drawer .ob-deal-n {
            width: 22px; height: 22px; background: var(--color-error); color: #fff;
            border-radius: 50%; display: inline-flex; align-items: center;
            justify-content: center; font-size: 11px; font-weight: 700;
            flex-shrink: 0;
        }
        #mgr-offboarding-drawer .ob-deal-name {
            flex: 1; font-weight: 600; color: var(--text-primary); font-size: 13px;
            min-width: 0; overflow: hidden; text-overflow: ellipsis;
        }
        #mgr-offboarding-drawer .ob-deal-amt {
            font-weight: 700; color: var(--color-error-dark); font-size: 14px; flex-shrink: 0;
        }
        #mgr-offboarding-drawer .ob-deal-info {
            display: flex; flex-wrap: wrap; gap: 6px 14px;
            font-size: 11px; color: var(--text-secondary); padding-left: 30px;
        }
        #mgr-offboarding-drawer .ob-deal-info a {
            color: #2563eb; text-decoration: none;
        }
        #mgr-offboarding-drawer .ob-deal-info a:hover { text-decoration: underline; }

        /* Badge */
        #mgr-offboarding-drawer .ob-badge {
            display: inline-block; padding: 2px 8px; border-radius: 12px;
            font-size: 10px; font-weight: 500; background: var(--border-light); color: var(--text-color);
        }
        #mgr-offboarding-drawer .ob-badge-pendiente { background: #fef3c7; color: #92400e; }
        #mgr-offboarding-drawer .ob-badge-confirmada { background: #d1fae5; color: var(--color-success-dark); }

        /* Transfer section */
        #mgr-offboarding-drawer .ob-transfer {
            background: var(--bg-secondary); border: 1px solid var(--border-color);
            border-radius: 12px; padding: 18px; margin-bottom: 20px;
        }
        #mgr-offboarding-drawer .ob-field { margin-bottom: 14px; }
        #mgr-offboarding-drawer .ob-field label {
            display: flex; align-items: center; gap: 8px;
            font-size: 13px; color: var(--text-color); font-weight: 500;
        }
        #mgr-offboarding-drawer .ob-field select {
            display: block; width: 100%; padding: 10px 12px;
            border: 1px solid #d1d5db; border-radius: 8px;
            font-size: 14px; margin-top: 6px; background: #fff;
            font-family: inherit;
        }
        #mgr-offboarding-drawer .ob-field select:focus {
            outline: none; border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
        }
        #mgr-offboarding-drawer .ob-field input[type="checkbox"] {
            width: 16px; height: 16px; accent-color: var(--color-error);
        }
        #mgr-offboarding-drawer .ob-actions {
            display: flex; justify-content: flex-end; margin-bottom: 14px;
        }
        #mgr-offboarding-drawer .ob-btn-go {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 10px 24px; background: var(--color-error-dark); color: #fff;
            border: none; border-radius: 8px; font-size: 14px;
            font-weight: 600; cursor: pointer; font-family: inherit;
            transition: background 0.15s;
        }
        #mgr-offboarding-drawer .ob-btn-go:hover { background: #b91c1c; }
        #mgr-offboarding-drawer .ob-btn-go:disabled { background: var(--text-muted); cursor: not-allowed; }
        #mgr-offboarding-drawer .ob-btn-go svg { width: 16px; height: 16px; }
        #mgr-offboarding-drawer .ob-warn {
            display: flex; align-items: flex-start; gap: 8px;
            padding: 12px 14px; background: #fffbeb; border: 1px solid #fde68a;
            border-radius: 8px; font-size: 12px; color: #92400e; line-height: 1.5;
        }
        #mgr-offboarding-drawer .ob-warn svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
        #mgr-offboarding-drawer .ob-result {
            padding: 16px; background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px;
        }
        #mgr-offboarding-drawer .ob-result pre {
            margin: 0; font-size: 13px; line-height: 1.8;
            color: #166534; white-space: pre-wrap; font-family: inherit;
        }

        /* Account transfer section */
        #mgr-offboarding-drawer .ob-accounts-desc {
            font-size: 13px; color: #4b5563; margin: 0 0 12px 0; line-height: 1.5;
        }
        #mgr-offboarding-drawer .ob-accounts-toolbar {
            display: flex; align-items: center; justify-content: space-between;
            flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
            padding: 10px 12px; background: var(--border-light); border-radius: 8px;
        }
        #mgr-offboarding-drawer .ob-accounts-toolbar-left {
            display: flex; align-items: center; gap: 12px;
        }
        #mgr-offboarding-drawer .ob-accounts-toolbar-right {
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        }
        #mgr-offboarding-drawer .ob-check-all-label {
            display: flex; align-items: center; gap: 6px;
            font-size: 13px; font-weight: 500; color: var(--text-color); cursor: pointer;
        }
        #mgr-offboarding-drawer .ob-accounts-selected-count {
            font-size: 12px; color: var(--text-secondary);
        }
        #mgr-offboarding-drawer .ob-bulk-select {
            padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px;
            font-size: 13px; background: #fff; min-width: 200px;
        }
        #mgr-offboarding-drawer .ob-btn-accounts {
            display: flex; align-items: center; gap: 6px;
            padding: 7px 14px; background: #2563eb; color: #fff;
            border: none; border-radius: 6px; font-size: 13px; font-weight: 600;
            cursor: pointer; transition: background 0.15s;
        }
        #mgr-offboarding-drawer .ob-btn-accounts:hover:not(:disabled) { background: #1d4ed8; }
        #mgr-offboarding-drawer .ob-btn-accounts:disabled { background: #93c5fd; cursor: not-allowed; }
        #mgr-offboarding-drawer .ob-btn-accounts svg { width: 14px; height: 14px; }
        #mgr-offboarding-drawer .ob-accounts-table-wrap {
            overflow-x: auto; border-radius: 8px; border: 1px solid var(--border-color);
        }
        #mgr-offboarding-drawer .ob-accounts-table {
            width: 100%; border-collapse: collapse; font-size: 13px;
        }
        #mgr-offboarding-drawer .ob-accounts-table thead th {
            background: var(--bg-secondary); padding: 8px 12px; text-align: left;
            font-size: 11px; font-weight: 600; text-transform: uppercase;
            color: var(--text-secondary); letter-spacing: 0.5px; border-bottom: 1px solid var(--border-color);
        }
        #mgr-offboarding-drawer .ob-accounts-table tbody tr {
            border-bottom: 1px solid var(--border-light); transition: background 0.1s;
        }
        #mgr-offboarding-drawer .ob-accounts-table tbody tr:hover { background: var(--bg-secondary); }
        #mgr-offboarding-drawer .ob-accounts-table tbody tr.ob-account-transferred {
            opacity: 0.4; background: #f0fdf4;
        }
        #mgr-offboarding-drawer .ob-accounts-table td {
            padding: 10px 12px; vertical-align: top;
        }
        #mgr-offboarding-drawer .ob-col-check { width: 36px; }
        #mgr-offboarding-drawer .ob-account-name { font-weight: 600; color: var(--text-primary); display: block; }
        #mgr-offboarding-drawer .ob-account-domain {
            font-size: 11px; color: var(--text-muted); display: block; margin-top: 1px;
        }
        #mgr-offboarding-drawer .ob-deal-count {
            display: inline-flex; align-items: center; justify-content: center;
            width: 20px; height: 20px; background: #dbeafe; color: #1e40af;
            border-radius: 50%; font-size: 11px; font-weight: 700; margin-right: 6px;
        }
        #mgr-offboarding-drawer .ob-deal-pill {
            display: inline-block; font-size: 10px; padding: 1px 6px;
            background: var(--border-light); border-radius: 4px; color: #4b5563;
            margin: 1px 2px; max-width: 160px; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
        }
        #mgr-offboarding-drawer .ob-deal-pill.hi { background: #fecaca; color: #991b1b; }
        #mgr-offboarding-drawer .ob-col-amount { text-align: right; font-weight: 600; color: var(--text-primary); }
        /* Results */
        #mgr-offboarding-drawer .ob-accounts-results:not(:empty) {
            margin-bottom: 12px; padding: 12px; background: #f0fdf4;
            border: 1px solid #86efac; border-radius: 8px;
        }
        #mgr-offboarding-drawer .ob-acc-summary {
            font-size: 13px; font-weight: 600; color: #166534; margin-bottom: 8px;
        }
        #mgr-offboarding-drawer .ob-acc-result {
            display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0;
        }
        #mgr-offboarding-drawer .ob-acc-result.err { color: var(--color-error-dark); }
        #mgr-offboarding-drawer .ob-acc-result.ok { color: #166534; }
        #mgr-offboarding-drawer .ob-acc-deal-count {
            font-size: 11px; background: #dcfce7; color: #166534;
            padding: 1px 6px; border-radius: 4px;
        }
        #mgr-offboarding-drawer .ob-acc-deal-fail {
            font-size: 11px; background: #fecaca; color: #991b1b;
            padding: 1px 6px; border-radius: 4px;
        }

        @keyframes obSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
        @keyframes obSlideOut { from { transform: translateX(0); } to { transform: translateX(100%); } }
        @keyframes obFadeIn { from { opacity: 0; } to { opacity: 1; } }

        @media (max-width: 640px) {
            #mgr-offboarding-drawer .ob-panel { max-width: 100%; }
            #mgr-offboarding-drawer .ob-deal-info { padding-left: 0; }
            #mgr-offboarding-drawer .ob-accounts-toolbar { flex-direction: column; align-items: flex-start; }
        }
    

/* =====================================================
   Contactos Module
   ===================================================== */

    .contactos-module {
        max-width: 1400px;
        margin: 0 auto;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* Header */
    .contactos-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px;
    }

    .header-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .module-title {
        font-size: 20px;
        font-weight: 600;
        color: var(--alfred-cobalto);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .contacts-count {
        background: #E8F4F8;
        color: var(--alfred-indigo);
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 500;
    }

    .header-actions {
        display: flex;
        gap: 10px;
    }

    /* Filtros */
    .contactos-filters {
        padding: 16px 24px;
    }

    .search-wrapper {
        position: relative;
        max-width: 400px;
    }

    .search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        width: 18px;
        height: 18px;
    }

    .search-input {
        width: 100%;
        padding: 10px 40px 10px 40px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font-size: 14px;
        transition: all 0.2s;
    }

    .search-input:focus {
        border-color: var(--alfred-indigo);
        box-shadow: 0 0 0 3px rgba(0, 88, 152, 0.1);
        outline: none;
    }

    .clear-search-btn {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 4px;
        border-radius: 4px;
    }

    .clear-search-btn:hover {
        color: var(--text-color);
        background: var(--border-light);
    }

    /* Tabla */
    .contactos-table-wrapper {
        padding: 0;
        overflow: hidden;
    }

    .contacts-table {
        width: 100%;
        border-collapse: collapse;
    }

    .contacts-table thead {
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
    }

    .contacts-table th {
        padding: 14px 16px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .contacts-table th.th-sortable {
        cursor: pointer;
        user-select: none;
    }

    .contacts-table th.th-sortable:hover {
        color: var(--alfred-cobalto);
    }

    .contacts-table th .sort-icon {
        margin-left: 4px;
        opacity: 0.5;
    }

    .contacts-table th.th-sortable.active .sort-icon {
        opacity: 1;
        color: var(--alfred-indigo);
    }

    .contacts-table th.th-actions {
        text-align: center;
        width: 120px;
    }

    .contacts-table tbody tr {
        border-bottom: 1px solid var(--border-light);
        transition: background 0.15s;
    }

    .contacts-table tbody tr:hover {
        background: var(--bg-secondary);
    }

    .contacts-table td {
        padding: 14px 16px;
        font-size: 14px;
        color: var(--text-color);
    }

    /* Contacto nombre con avatar */
    .contact-name-cell {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .contact-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--alfred-indigo) 0%, var(--alfred-cobalto) 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 600;
        flex-shrink: 0;
    }

    .contact-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .contact-fullname {
        font-weight: 500;
        color: var(--text-primary);
    }

    .contact-hubspot-badge {
        font-size: 10px;
        color: #F97316;
        display: flex;
        align-items: center;
        gap: 3px;
    }

    /* Email link */
    .contact-email-link {
        color: var(--alfred-indigo);
        text-decoration: none;
    }

    .contact-email-link:hover {
        text-decoration: underline;
    }

    /* Phone */
    .contact-phones {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 13px;
    }

    .phone-mobile {
        color: var(--color-success-dark);
    }

    /* Badges */
    .badge {
        display: inline-flex;
        align-items: center;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
    }

    .badge-company {
        background: #EFF6FF;
        color: #1E40AF;
    }

    .badge-lifecycle {
        background: var(--border-light);
        color: var(--text-color);
    }

    .badge-lifecycle.customer {
        background: var(--color-success-bg);
        color: var(--color-success-dark);
    }

    .badge-lifecycle.lead {
        background: var(--color-warning-bg);
        color: #92400E;
    }

    .badge-lifecycle.opportunity {
        background: #E0E7FF;
        color: #3730A3;
    }

    /* Actions */
    .contact-actions {
        display: flex;
        gap: 8px;
        justify-content: center;
    }

    .btn-action {
        padding: 6px 10px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: white;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.15s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-action:hover {
        border-color: var(--alfred-indigo);
        color: var(--alfred-indigo);
        background: #F0F9FF;
    }

    .btn-action.btn-danger:hover {
        border-color: var(--color-error-dark);
        color: var(--color-error-dark);
        background: #FEF2F2;
    }

    /* States */
    .loading-state, .error-state, .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        gap: 16px;
        color: var(--text-secondary);
    }

    .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid var(--border-color);
        border-top-color: var(--alfred-indigo);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

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

    .error-icon, .empty-icon {
        width: 48px;
        height: 48px;
        color: var(--text-muted);
    }

    .error-icon {
        color: var(--color-warning);
    }

    .empty-text {
        font-size: 16px;
        font-weight: 500;
        color: var(--text-color);
    }

    .empty-hint {
        font-size: 14px;
    }

    /* Pagination */
    .pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        border-top: 1px solid var(--border-color);
        background: var(--bg-secondary);
    }

    .pagination-info {
        font-size: 13px;
        color: var(--text-secondary);
    }

    .pagination-controls {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .pagination-pages {
        font-size: 13px;
        color: var(--text-color);
    }

    .btn-sm {
        padding: 6px 12px;
        font-size: 13px;
    }

    /* Modal */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 20px;
    }

    .modal-container {
        background: white;
        border-radius: 12px;
        width: 100%;
        max-width: 560px;
        max-height: 90vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .modal-sm {
        max-width: 400px;
    }

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

    .modal-header h3 {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

    .modal-header-danger {
        background: #FEF2F2;
    }

    .modal-header-danger h3 {
        color: var(--color-error-dark);
    }

    .modal-close {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 4px;
        border-radius: 4px;
    }

    .modal-close:hover {
        color: var(--text-color);
        background: var(--border-light);
    }

    .modal-body {
        padding: 24px;
        overflow-y: auto;
    }

    .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding: 16px 24px;
        border-top: 1px solid var(--border-color);
        background: var(--bg-secondary);
    }

    /* Form */
    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .form-group {
        margin-bottom: 16px;
    }

    .form-group label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-color);
        margin-bottom: 6px;
    }

    .form-input, .form-select {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 14px;
        transition: all 0.15s;
    }

    .form-input:focus, .form-select:focus {
        border-color: var(--alfred-indigo);
        box-shadow: 0 0 0 3px rgba(0, 88, 152, 0.1);
        outline: none;
    }

    .form-input-sm {
        padding: 6px 10px;
        font-size: 12px;
        margin-top: 8px;
    }

    .form-hint {
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 6px;
    }

    .text-muted {
        color: var(--text-secondary);
        font-size: 14px;
    }

    /* Autocomplete */
    .autocomplete-wrapper {
        position: relative;
    }

    .autocomplete-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid var(--border-color);
        border-top: none;
        border-radius: 0 0 6px 6px;
        max-height: 200px;
        overflow-y: auto;
        z-index: 100;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .autocomplete-item {
        padding: 10px 12px;
        cursor: pointer;
        font-size: 14px;
        border-bottom: 1px solid var(--border-light);
    }

    .autocomplete-item:last-child {
        border-bottom: none;
    }

    .autocomplete-item:hover {
        background: #F0F9FF;
    }

    .autocomplete-item.loading {
        color: var(--text-muted);
        font-style: italic;
        cursor: default;
    }

    .autocomplete-item.no-results {
        color: var(--text-muted);
        cursor: default;
    }

    .selected-company {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        background: #E8F4F8;
        border: 1px solid var(--alfred-indigo);
        border-radius: 6px;
        margin-top: 8px;
    }

    .selected-company span {
        font-size: 14px;
        color: var(--alfred-indigo);
        font-weight: 500;
    }

    .clear-company-btn {
        background: none;
        border: none;
        color: var(--alfred-indigo);
        cursor: pointer;
        font-size: 16px;
        padding: 2px 6px;
        border-radius: 4px;
    }

    .clear-company-btn:hover {
        background: rgba(0, 88, 152, 0.1);
    }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 500;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.15s;
        border: none;
    }

    .btn-primary {
        background: var(--alfred-indigo);
        color: white;
    }

    .btn-primary:hover {
        background: var(--alfred-cobalto);
    }

    .btn-secondary {
        background: white;
        color: var(--text-color);
        border: 1px solid var(--border-color);
    }

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

    .btn-danger {
        background: var(--color-error-dark);
        color: white;
    }

    .btn-danger:hover {
        background: #B91C1C;
    }

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

    .icon-inline {
        width: 16px;
        height: 16px;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .contactos-header {
            flex-direction: column;
            gap: 16px;
            align-items: flex-start;
        }

        .form-row {
            grid-template-columns: 1fr;
        }

        .contacts-table {
            display: block;
            overflow-x: auto;
        }

        .pagination {
            flex-direction: column;
            gap: 12px;
        }
    }


/* =====================================================
   Prospects Module
   ===================================================== */

        .prospects-module {
            max-width: 1400px;
            margin: 0 auto;
            padding: 32px 24px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Header with Tabs */
        .prospects-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .header-tabs {
            display: flex;
            gap: 4px;
            background: var(--border-light);
            padding: 4px;
            border-radius: 10px;
        }

        .tab-btn {
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 500;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .tab-btn:hover {
            color: var(--text-color);
        }

        .tab-btn.active {
            background: #fff;
            color: var(--alfred-cobalto);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .header-actions {
            display: flex;
            gap: 10px;
        }

        .header-actions .btn {
            padding: 10px 18px;
            font-size: 14px;
            font-weight: 500;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .header-actions .btn-secondary {
            border: 1px solid var(--border-color);
            background: #fff;
            color: var(--text-color);
        }

        .header-actions .btn-secondary:hover {
            border-color: var(--alfred-indigo);
            color: var(--alfred-indigo);
        }

        .header-actions .btn-success {
            border: 1px solid var(--color-success-dark);
            background: var(--color-success-dark);
            color: #fff;
        }

        .header-actions .btn-success:hover {
            background: var(--color-success-dark);
        }

        /* Tab Content */
        .tab-content {
            display: block;
        }

        .tab-content:not(.active) {
            display: none !important;
        }

        /* ---- Activity Log Tab ---- */
        .activity-log-wrapper { display: flex; flex-direction: column; gap: 16px; }

        .activity-log-filters { padding: 12px 16px; }

        .activity-filter-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .activity-filter-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            font-size: 13px;
            font-weight: 500;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            background: #fff;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .activity-filter-btn:hover {
            border-color: var(--alfred-indigo);
            color: var(--alfred-indigo);
        }

        .activity-filter-btn.active {
            background: var(--alfred-indigo);
            border-color: var(--alfred-indigo);
            color: #fff;
        }

        .activity-log-table-wrapper { padding: 0; overflow: hidden; }
        .activity-log-table { margin: 0; }

        .al-detail-content {
            background: var(--bg-secondary);
            border-top: 1px solid var(--border-light);
            overflow-x: auto;
        }

        .al-detail-content pre { background: none; border: none; }

        tr.row-error td { background: var(--color-error-bg); }

        .badge-primary { background: #dbeafe; color: #1e3a8a; }

        /* Assessors-specific KPI colors */
        .assessors-kpis .kpi-spain .kpi-value { color: var(--color-success-dark); }
        .assessors-kpis .kpi-with-email .kpi-value { color: var(--color-purple); }
        .assessors-kpis .kpi-synced .kpi-value { font-size: 14px; color: var(--text-secondary); }

        /* Assessors table styles */
        .assessors-table .org-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .assessors-table .org-name {
            font-weight: 600;
            color: var(--alfred-indigo);
        }
        .assessors-table .org-cert {
            font-size: 11px;
            color: var(--text-muted);
        }
        .assessors-table .contact-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .assessors-table .contact-email {
            font-size: 13px;
            color: #2563eb;
        }
        .assessors-table .contact-phone {
            font-size: 12px;
            color: var(--text-secondary);
        }
        .assessors-table .schemes-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        .assessors-table .scheme-tag {
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 500;
            background: #E0F2FE;
            color: #0369A1;
        }

        /* KPIs - Simplified Cards */
        .prospects-kpis {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
        }

        .kpi-card {
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 20px 16px;
            text-align: center;
        }

        .kpi-value {
            font-size: 32px;
            font-weight: 700;
            line-height: 1.2;
            color: var(--alfred-cobalto);
        }

        .kpi-label {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-secondary);
            margin-top: 4px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .kpi-critical .kpi-value { color: var(--color-error-dark); }
        .kpi-high .kpi-value { color: #f97316; }
        .kpi-medium .kpi-value { color: #eab308; }
        .kpi-total .kpi-value { color: var(--alfred-indigo); }
        .kpi-converted .kpi-value { color: var(--color-success-dark); }

        /* Filters - Clean Design */
        .prospects-filters {
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            display: flex;
            gap: 16px;
            padding: 20px 24px;
            flex-wrap: wrap;
            align-items: flex-end;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 140px;
        }

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

        .filter-group .form-select,
        .filter-group .form-input {
            padding: 8px 12px;
            font-size: 14px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: #fff;
            color: var(--text-color);
            transition: border-color 0.15s;
        }

        .filter-group .form-select:focus,
        .filter-group .form-input:focus {
            outline: none;
            border-color: var(--alfred-indigo);
        }

        .filter-search {
            flex: 1;
            min-width: 250px;
        }

        .search-input-wrapper {
            display: flex;
            gap: 8px;
        }

        .search-input-wrapper .form-input {
            flex: 1;
        }

        .btn-search {
            background: var(--alfred-indigo);
            color: white;
            border: none;
            padding: 0 16px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.15s;
        }

        .btn-search:hover {
            background: var(--alfred-cobalto);
        }

        /* Prospects List Container */
        .prospects-list-container {
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
        }

        .loading-state,
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            gap: 12px;
            color: var(--text-secondary);
        }

        .empty-icon {
            font-size: 48px;
            opacity: 0.5;
        }

        .empty-text {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-color);
        }

        .empty-hint {
            font-size: 14px;
            color: var(--text-muted);
        }

        /* Table - Clean Design */
        .prospects-table {
            width: 100%;
            border-collapse: collapse;
        }

        .prospects-table thead {
            background: var(--bg-secondary);
        }

        .prospects-table th {
            text-align: left;
            padding: 14px 16px;
            font-weight: 600;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-secondary);
            border-bottom: 1px solid var(--border-color);
            white-space: nowrap;
        }

        .prospects-table tbody tr {
            border-bottom: 1px solid var(--border-light);
            transition: background 0.15s;
            cursor: pointer;
        }

        .prospects-table tbody tr:hover {
            background: var(--bg-secondary);
        }

        .prospects-table tbody tr:last-child {
            border-bottom: none;
        }

        .prospects-table td {
            padding: 14px 16px;
            font-size: 14px;
            vertical-align: middle;
            color: var(--text-color);
        }

        .th-score { width: 70px; }
        .th-fase { width: 110px; }
        .th-scheme { width: 100px; }
        .th-date { width: 110px; }
        .th-sources { width: 70px; }
        .th-status { width: 90px; }
        .th-actions { width: 130px; }
        
        .th-sortable {
            cursor: pointer;
            user-select: none;
        }
        
        .th-sortable:hover {
            background: var(--border-light);
        }
        
        .th-sortable .sort-icon {
            opacity: 0.3;
            margin-left: 4px;
        }
        
        .th-sortable.active .sort-icon {
            opacity: 1;
        }

        .td-date {
            font-size: 13px;
            color: var(--text-secondary);
            white-space: nowrap;
        }

        /* Badges - Refined */
        .fase-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 500;
            white-space: nowrap;
            background: var(--border-light);
            color: var(--text-secondary);
        }

        /* ConstruData Fases */
        .fase-badge.fase-2 { background: #DBEAFE; color: #1D4ED8; }
        .fase-badge.fase-3 { background: var(--color-warning-bg); color: #B45309; }
        .fase-badge.fase-4 { background: #FCE7F3; color: #BE185D; }
        .fase-badge.fase-5 { background: var(--color-success-bg); color: var(--color-success-dark); }
        .fase-badge.fase-6 { background: #E0E7FF; color: #4338CA; }
        .fase-badge.fase-7 { background: var(--color-purple-bg); color: #6D28D9; }
        .fase-badge.fase-8 { background: #DCFCE7; color: #15803D; }
        .fase-badge.fase-27 { background: #FED7AA; color: #C2410C; }

        /* BREEAM Estados */
        .fase-badge.breeam-registrado { background: var(--color-warning-bg); color: #92400E; }
        .fase-badge.breeam-evaluacion { background: #DBEAFE; color: #1E40AF; }
        .fase-badge.breeam-certificado { background: var(--color-success-bg); color: var(--color-success-dark); }
        .fase-badge.breeam-preevaluacion { background: #F3E8FF; color: var(--color-purple); }
        .fase-badge.breeam-other { background: var(--border-light); color: var(--text-secondary); }

        /* Scheme badge */
        .scheme-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 500;
            white-space: nowrap;
            background: var(--border-light);
            color: var(--text-secondary);
        }

        .scheme-badge.scheme-enuso { background: #DCFCE7; color: #166534; }
        .scheme-badge.scheme-nueva { background: #DBEAFE; color: #1E40AF; }
        .scheme-badge.scheme-vivienda { background: #FCE7F3; color: #9D174D; }
        .scheme-badge.scheme-urbanismo { background: var(--color-success-bg); color: var(--color-success-dark); }
        .scheme-badge.scheme-comercial { background: var(--color-warning-bg); color: #92400E; }
        .scheme-badge.scheme-other { background: var(--border-color); color: var(--text-color); }
        .scheme-badge.scheme-none { background: transparent; color: var(--text-muted); }

        /* Score badge - Simplified */
        .score-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-weight: 700;
            font-size: 16px;
        }

        .score-badge.critical { color: var(--color-error-dark); }
        .score-badge.high { color: #F97316; }
        .score-badge.medium { color: #EAB308; }
        .score-badge.low { color: #22C55E; }

        /* Project info */
        .project-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .project-name {
            font-weight: 500;
            color: var(--alfred-indigo);
            cursor: pointer;
        }

        .project-name:hover {
            text-decoration: underline;
        }

        .project-meta {
            display: flex;
            gap: 12px;
            font-size: 12px;
            color: var(--text-secondary);
        }

        .project-days {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: var(--text-secondary);
        }

        .project-days.urgent {
            color: var(--color-error-dark);
            font-weight: 500;
        }

        /* Sources badges */
        .sources-badges {
            display: flex;
            gap: 4px;
        }

        .source-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
            color: white;
        }

        .source-badge.breeam { background: #22C55E; }
        .source-badge.construdata { background: #3B82F6; }
        .source-badge.well { background: #8B5CF6; }
        .source-badge.leed { background: #F97316; }

        /* Status badge */
        .status-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .status-badge.new { background: #DBEAFE; color: #1D4ED8; }
        .status-badge.qualified { background: var(--color-success-bg); color: var(--color-success-dark); }
        .status-badge.discarded { background: var(--border-light); color: var(--text-secondary); }

        /* Deal & Owner indicators */
        .status-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .deal-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
            background: #DBEAFE;
            color: #1D4ED8;
            cursor: pointer;
            transition: background 0.15s;
        }

        .deal-badge:hover {
            background: #BFDBFE;
        }

        .owner-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            color: var(--text-secondary);
        }

        /* Action buttons - Clean Style */
        .action-buttons {
            display: flex;
            gap: 6px;
        }

        .btn-action {
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
        }

        .btn-view {
            background: #fff;
            border: 1px solid var(--border-color);
            color: var(--text-color);
        }

        .btn-view:hover {
            border-color: var(--alfred-indigo);
            color: var(--alfred-indigo);
        }

        .btn-convert {
            background: var(--alfred-indigo);
            border: 1px solid var(--alfred-indigo);
            color: white;
        }

        .btn-convert:hover {
            background: var(--alfred-cobalto);
            border-color: var(--alfred-cobalto);
        }

        /* Pagination - Clean */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            padding: 16px;
            border-top: 1px solid var(--border-light);
        }

        .pagination-info {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .pagination .btn {
            padding: 8px 16px;
            font-size: 13px;
            font-weight: 500;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background: #fff;
            color: var(--text-color);
            cursor: pointer;
            transition: all 0.15s;
        }

        .pagination .btn:hover:not(:disabled) {
            border-color: var(--alfred-indigo);
            color: var(--alfred-indigo);
        }

        .pagination .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Drawer - Clean Design */
        .drawer {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1000;
            visibility: hidden;
            pointer-events: none;
        }

        .drawer.open {
            visibility: visible;
            pointer-events: auto;
        }

        .drawer-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .drawer.open .drawer-overlay {
            opacity: 1;
        }

        .drawer-panel {
            position: absolute;
            top: 0;
            right: 0;
            width: 500px;
            max-width: 90vw;
            height: 100%;
            background: #ffffff;
            box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }

        .drawer.open .drawer-panel {
            transform: translateX(0);
        }

        .drawer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-color);
            background: #fff;
        }

        .drawer-header h2 {
            font-size: 18px;
            font-weight: 600;
            margin: 0;
            color: var(--alfred-cobalto);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: calc(100% - 40px);
        }

        .drawer-close {
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: var(--text-muted);
            padding: 0;
            line-height: 1;
            transition: color 0.15s;
        }

        .drawer-close:hover {
            color: var(--text-color);
        }

        .drawer-body {
            padding: 24px;
            overflow-y: auto;
            flex: 1;
            background: var(--bg-secondary);
        }

        .drawer-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            padding: 16px 24px;
            border-top: 1px solid var(--border-color);
            background: #fff;
        }

        .drawer-footer .btn {
            padding: 10px 18px;
            font-size: 14px;
            font-weight: 500;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s;
        }

        .drawer-footer .btn-secondary {
            background: #fff;
            border: 1px solid var(--border-color);
            color: var(--text-color);
        }

        .drawer-footer .btn-secondary:hover {
            border-color: var(--alfred-indigo);
            color: var(--alfred-indigo);
        }

        .drawer-footer .btn-danger {
            background: #fff;
            border: 1px solid #FECACA;
            color: var(--color-error-dark);
        }

        .drawer-footer .btn-danger:hover {
            background: var(--color-error-bg);
        }

        .drawer-footer .btn-primary {
            background: var(--alfred-indigo);
            border: 1px solid var(--alfred-indigo);
            color: #fff;
        }

        .drawer-footer .btn-primary:hover {
            background: var(--alfred-cobalto);
            border-color: var(--alfred-cobalto);
        }

        /* Modal - Clean Design */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            position: relative;
            background: #fff;
            border-radius: 12px;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .modal-lg { max-width: 700px; }
        .modal-xl { max-width: 900px; }

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

        .modal-header h2,
        .modal-header h3 {
            font-size: 18px;
            font-weight: 600;
            margin: 0;
            color: var(--alfred-cobalto);
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--text-muted);
            padding: 4px 8px;
            transition: color 0.15s;
        }

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

        .modal-body {
            padding: 0;
            overflow-y: auto;
            flex: 1;
        }

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

        /* Detail View - Clean Cards */
        .detail-header-info {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;
        }

        .detail-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .detail-section {
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 20px;
        }

        .detail-section h4 {
            margin: 0 0 16px 0;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-light);
        }

        .detail-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .detail-label {
            color: var(--text-secondary);
            font-size: 13px;
        }

        .detail-value {
            font-weight: 500;
            font-size: 14px;
            color: var(--text-color);
            text-align: right;
        }

        .detail-sources {
            margin-top: 20px;
        }

        .detail-sources h4 {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
        }

        .source-card {
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 16px;
            margin-bottom: 12px;
        }

        .source-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .source-name {
            font-weight: 600;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-color);
        }

        .source-confidence {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .source-data {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .btn-toggle-raw {
            background: none;
            border: none;
            color: var(--alfred-indigo);
            font-size: 12px;
            cursor: pointer;
            padding: 4px 0;
            font-weight: 500;
        }

        .btn-toggle-raw:hover {
            text-decoration: underline;
        }

        .raw-data {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 12px;
            margin-top: 8px;
            font-family: 'SF Mono', Monaco, monospace;
            font-size: 11px;
            max-height: 200px;
            overflow-y: auto;
            white-space: pre-wrap;
            word-break: break-all;
            color: var(--text-color);
        }

        /* Small button for history */
        .btn-small {
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 500;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background: #fff;
            color: var(--text-color);
            cursor: pointer;
            transition: all 0.15s;
        }

        .btn-small:hover {
            border-color: var(--alfred-indigo);
            color: var(--alfred-indigo);
        }

        /* Responsive */
        @media (max-width: 1200px) {
            .prospects-kpis {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 768px) {
            .prospects-module {
                padding: 20px 16px;
            }

            .prospects-kpis {
                grid-template-columns: repeat(2, 1fr);
            }

            .prospects-filters {
                flex-direction: column;
            }

            .filter-group {
                width: 100%;
            }

            .prospects-table th:nth-child(3),
            .prospects-table td:nth-child(3),
            .prospects-table th:nth-child(4),
            .prospects-table td:nth-child(4),
            .prospects-table th:nth-child(5),
            .prospects-table td:nth-child(5),
            .prospects-table th:nth-child(6),
            .prospects-table td:nth-child(6) {
                display: none;
            }

            .drawer-panel {
                width: 100vw;
            }
        }

        @media (max-width: 480px) {
            .prospects-kpis {
                grid-template-columns: 1fr 1fr;
            }
            
            .kpi-card:last-child {
                grid-column: span 2;
            }
        }
    

/* =====================================================
   Buscador Module
   ===================================================== */

.buscador-module {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Hero Section */
.buscador-hero {
    text-align: center;
    padding: 48px 0 32px;
    background: linear-gradient(135deg, var(--alfred-cobalto) 0%, #1e40af 100%);
    margin: -24px -24px 32px;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 0 0 32px 32px;
}

.hero-content {
    margin-bottom: 32px;
}

.hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    color: white;
    margin-bottom: 16px;
    backdrop-filter: blur(8px);
}

.hero-title {
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin: 0 0 8px;
}

.hero-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Search Box */
.search-container {
    max-width: 640px;
    margin: 0 auto 24px;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.search-box:focus-within {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.search-box .search-icon {
    position: absolute;
    left: 20px;
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    pointer-events: none;
}

.search-box .search-input {
    flex: 1;
    padding: 20px 60px 20px 56px;
    border: none;
    background: transparent;
    font-size: 18px;
    color: var(--text-color);
    outline: none;
}

.search-box .search-input::placeholder {
    color: var(--text-muted);
}

.search-shortcuts {
    display: flex;
    gap: 4px;
    margin-right: 16px;
}

.search-shortcuts kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 11px;
    font-family: inherit;
    color: var(--text-muted);
}

.clear-btn {
    position: absolute;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.clear-btn:hover {
    background: var(--border-color);
    color: var(--text-color);
}

.search-hint {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 12px;
}

/* Quick Filters */
.quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 24px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

.filter-chip:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

.filter-chip.active {
    background: white;
    border-color: white;
    color: var(--alfred-cobalto);
}

.filter-chip .icon-sm {
    width: 16px;
    height: 16px;
}

/* State Containers */
.state-container {
    padding: 48px 0;
}

.state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.state-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.state-card:hover {
    border-color: var(--alfred-cobalto);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.state-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.state-icon i {
    width: 28px;
    height: 28px;
}

.state-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 8px;
}

.state-card p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* Loading Animation */
.loading-animation {
    text-align: center;
    padding: 64px 0;
}

.loading-spinner-lg {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: var(--alfred-cobalto);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

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

.loading-animation p {
    color: var(--text-muted);
    font-size: 14px;
}

/* Empty State */
.empty-content {
    text-align: center;
    padding: 64px 0;
}

.empty-icon {
    margin-bottom: 24px;
}

.empty-content h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 8px;
}

.empty-content p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* Results Container */
.results-container {
    padding: 0 0 48px;
}

.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.results-count {
    font-weight: 600;
    color: var(--text-color);
}

.search-term-display {
    font-size: 14px;
    color: var(--text-muted);
}

.search-term-display strong {
    color: var(--alfred-cobalto);
}

/* Results Grouped */
.results-grouped {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.result-group {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
}

.result-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.group-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.group-icon i {
    width: 20px;
    height: 20px;
}

.group-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.group-count {
    font-size: 13px;
    color: var(--text-muted);
    background: var(--bg-color);
    padding: 4px 12px;
    border-radius: 12px;
}

.result-group-items {
    display: flex;
    flex-direction: column;
}

/* Result Item */
.result-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s;
}

.result-item:last-child {
    border-bottom: none;
}

.result-item:hover {
    background: var(--bg-secondary);
}

.result-item.selected {
    background: #EEF2FF;
}

.result-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.result-icon i {
    width: 22px;
    height: 22px;
}

.result-content {
    flex: 1;
    min-width: 0;
}

.result-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.result-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    transition: all 0.2s;
}

.result-item:hover .result-action {
    background: var(--alfred-cobalto);
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .buscador-hero {
        padding: 32px 16px 24px;
        margin: -16px -16px 24px;
        border-radius: 0 0 24px 24px;
    }
    
    .hero-title {
        font-size: 24px;
    }
    
    .hero-subtitle {
        font-size: 14px;
    }
    
    .search-box .search-input {
        font-size: 16px;
        padding: 16px 48px 16px 48px;
    }
    
    .search-shortcuts {
        display: none;
    }
    
    .quick-filters {
        gap: 6px;
    }
    
    .filter-chip span {
        display: none;
    }
    
    .filter-chip.active span {
        display: inline;
    }
    
    .state-grid {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   Calculadora Module
   ===================================================== */

        .calculadora-module {
            max-width: 900px;
            margin: 0 auto;
        }
        
        .card-description {
            color: var(--alfred-indigo);
            margin-bottom: 16px;
            font-size: 14px;
        }
        
        .pack-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }
        
        .pack-selector input[type="radio"] {
            display: none;
        }
        
        .pack-selector label {
            flex: 1;
            min-width: 140px;
            padding: 16px;
            border: 2px solid var(--alfred-celeste);
            border-radius: 12px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition-normal);
            background: var(--alfred-white);
        }
        
        .pack-selector label:hover {
            border-color: var(--alfred-indigo);
            transform: translateY(-2px);
        }
        
        .pack-selector input:checked + label {
            background: linear-gradient(135deg, var(--alfred-cobalto) 0%, var(--alfred-indigo) 100%);
            color: var(--alfred-white);
            border-color: var(--alfred-cobalto);
            box-shadow: var(--shadow-md);
        }
        
        .pack-name {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 4px;
        }
        
        .pack-price {
            font-size: 13px;
            opacity: 0.8;
        }
        
        .frequency-selector {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        
        .frequency-option {
            flex: 1;
            min-width: 180px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            border: 2px solid var(--alfred-celeste);
            border-radius: 12px;
            cursor: pointer;
            transition: var(--transition-normal);
            background: var(--alfred-white);
        }
        
        .frequency-option:hover {
            border-color: var(--alfred-indigo);
        }
        
        .frequency-selector input:checked + .frequency-option {
            background: linear-gradient(135deg, var(--alfred-cobalto) 0%, var(--alfred-indigo) 100%);
            color: var(--alfred-white);
            border-color: var(--alfred-cobalto);
        }
        
        .frequency-icon {
            font-size: 24px;
        }
        
        .frequency-label {
            font-weight: 500;
        }
        
        .frequency-badge {
            margin-left: auto;
            background: var(--alfred-jade);
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .quantities-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
        }
        
        .products-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .product-item {
            border: 1px solid var(--alfred-celeste);
            border-radius: 12px;
            overflow: hidden;
        }
        
        .product-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            background: #f8fafc;
            cursor: pointer;
            transition: var(--transition-fast);
        }
        
        .product-header:hover {
            background: var(--alfred-celeste);
        }
        
        .product-icon {
            width: 32px;
            height: 32px;
            object-fit: contain;
        }
        
        .product-info {
            flex: 1;
        }
        
        .product-name {
            font-weight: 600;
            color: var(--alfred-cobalto);
        }
        
        .product-description {
            font-size: 13px;
            color: var(--alfred-indigo);
        }
        
        .product-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .product-chevron {
            transition: transform 0.2s;
            color: #999;
        }
        
        .product-chevron.open {
            transform: rotate(180deg);
        }
        
        .product-details {
            padding: 16px;
            border-top: 1px solid var(--alfred-celeste);
            display: none;
        }
        
        .product-details.open {
            display: block;
        }
        
        .product-benefits {
            margin-bottom: 16px;
        }
        
        .product-benefits h4 {
            font-size: 14px;
            margin-bottom: 8px;
        }
        
        .product-benefits ul {
            font-size: 13px;
            color: var(--alfred-indigo);
            padding-left: 20px;
        }
        
        .product-benefits li {
            margin-bottom: 4px;
        }
        
        .addon-option {
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            padding: 12px;
            border-radius: 8px;
            transition: var(--transition-fast);
        }
        
        .addon-option:hover {
            background: var(--alfred-celeste);
        }
        
        .addon-checkbox {
            width: 20px;
            height: 20px;
            accent-color: var(--alfred-indigo);
        }
        
        .addon-label {
            font-weight: 500;
        }
        
        .summary-details {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .summary-row {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
        }
        
        .summary-row.extra {
            padding-left: 16px;
            font-size: 13px;
            color: var(--alfred-indigo);
        }
        
        .summary-divider {
            height: 1px;
            background: var(--alfred-celeste);
            margin: 16px 0;
        }
        
        .summary-note {
            display: block;
            margin-top: 8px;
            color: var(--alfred-indigo);
            font-size: 13px;
        }
        
        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
            margin: 24px 0;
        }
        
        .notes-section {
            background: #f8fafc;
        }
        
        .notes-list {
            font-size: 14px;
            color: var(--alfred-indigo);
            padding-left: 20px;
        }
        
        .notes-list li {
            margin-bottom: 8px;
        }
        
        .notes-list ul {
            margin-top: 4px;
            padding-left: 20px;
        }
        
        /* Modal */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            padding: 20px;
        }
        
        .modal-overlay.show {
            display: flex;
        }
        
        .modal-content {
            background: var(--alfred-white);
            border-radius: 16px;
            max-width: 600px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: var(--shadow-lg);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            border-bottom: 1px solid var(--alfred-celeste);
        }
        
        .modal-header h3 {
            margin: 0;
            font-size: 20px;
        }
        
        .modal-close {
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: #999;
            line-height: 1;
        }
        
        .modal-close:hover {
            color: var(--alfred-cobalto);
        }
        
        .modal-body {
            padding: 24px;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 24px;
        }
        
        .btn-outline {
            background: transparent;
            border: 2px solid var(--alfred-celeste);
            color: var(--alfred-cobalto);
        }
        
        .btn-outline:hover {
            background: var(--alfred-celeste);
        }
    

/* =====================================================
   Propuestas Module
   ===================================================== */

    /* ===== BASE ===== */
    .propuestas-module {
        padding: 32px 40px;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* ===== HEADER ===== */
    .prop-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 24px;
    }
    .prop-header h1 {
        font-size: 24px;
        font-weight: 600;
        color: var(--alfred-cobalto);
        margin: 0;
    }
    .prop-header p {
        font-size: 14px;
        color: var(--text-secondary);
        margin: 4px 0 0 0;
    }

    /* ===== BOTONES ESTILO INICIO ===== */
    .prop-btn {
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 500;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: #fff;
        color: var(--text-color);
        cursor: pointer;
        transition: all 0.15s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .prop-btn:hover {
        border-color: var(--alfred-indigo);
        color: var(--alfred-indigo);
    }
    .prop-btn-primary {
        background: var(--alfred-indigo);
        border-color: var(--alfred-indigo);
        color: #fff;
    }
    .prop-btn-primary:hover {
        background: var(--alfred-cobalto);
        border-color: var(--alfred-cobalto);
    }
    .prop-btn-outline {
        background: transparent;
        border: 1px solid var(--border-color);
    }
    .prop-btn-sm {
        padding: 6px 12px;
        font-size: 13px;
    }
    .prop-btn-danger {
        background: var(--color-error);
        border-color: var(--color-error);
        color: #fff;
    }
    .prop-btn-danger:hover {
        background: #dc2626;
        border-color: #dc2626;
    }

    /* ===== TOOLBAR (búsqueda y filtros) ===== */
    .prop-toolbar {
        display: flex;
        gap: 12px;
        margin-bottom: 20px;
        flex-wrap: wrap;
        align-items: center;
    }
    .prop-search {
        flex: 1;
        min-width: 200px;
        max-width: 400px;
        position: relative;
    }
    .prop-search input {
        width: 100%;
        padding: 10px 16px 10px 40px;
        font-size: 14px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: #fff;
        transition: border-color 0.15s;
    }
    .prop-search input:focus {
        outline: none;
        border-color: var(--alfred-indigo);
    }
    .prop-search::before {
        content: '';
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    }
    .prop-filter select {
        padding: 10px 16px;
        font-size: 14px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
    }

    /* ===== TABLA ===== */
    .prop-table-wrap {
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        overflow: hidden;
    }
    .prop-table {
        width: 100%;
        border-collapse: collapse;
    }
    .prop-table thead {
        background: var(--bg-secondary);
    }
    .prop-table th {
        padding: 12px 16px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--border-color);
    }
    .prop-table td {
        padding: 14px 16px;
        font-size: 14px;
        color: var(--text-color);
        border-bottom: 1px solid var(--border-light);
        vertical-align: middle;
    }
    .prop-table tbody tr {
        transition: background 0.15s;
    }
    .prop-table tbody tr:hover {
        background: var(--bg-secondary);
    }
    .prop-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* ===== STATUS BADGES ===== */
    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 500;
        border-radius: 20px;
    }
    .status-draft { background: var(--color-warning-bg); color: #92400E; }
    .status-pending { background: #FED7AA; color: #C2410C; }
    .status-progress { background: #DBEAFE; color: #1D4ED8; }
    .status-completed { background: var(--color-success-bg); color: var(--color-success-dark); }
    .status-cancelled { background: var(--border-light); color: var(--text-secondary); }

    /* ===== ACCIONES DROPDOWN ===== */
    .actions-cell {
        position: relative;
    }
    .actions-btn {
        background: none;
        border: none;
        padding: 6px 10px;
        cursor: pointer;
        font-size: 18px;
        color: var(--text-muted);
        border-radius: 6px;
        transition: all 0.15s;
    }
    .actions-btn:hover {
        background: var(--border-light);
        color: var(--text-color);
    }
    .actions-menu {
        display: none;
        position: absolute;
        right: 0;
        top: 100%;
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        min-width: 160px;
        z-index: 100;
        overflow: hidden;
    }
    .actions-menu.show {
        display: block;
    }
    .actions-menu button {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 10px 14px;
        font-size: 13px;
        background: none;
        border: none;
        text-align: left;
        cursor: pointer;
        color: var(--text-color);
        transition: background 0.15s;
    }
    .actions-menu button:hover {
        background: var(--bg-secondary);
    }
    .actions-menu button.danger {
        color: var(--color-error-dark);
    }
    .actions-menu button.danger:hover {
        background: #FEF2F2;
    }

    /* ===== EMPTY STATE ===== */
    .prop-empty {
        text-align: center;
        padding: 60px 20px;
        color: var(--text-secondary);
    }
    .prop-empty-icon {
        font-size: 48px;
        margin-bottom: 12px;
    }
    .prop-empty p {
        margin: 0;
        font-size: 15px;
    }

    /* ===== WIZARD VIEW ===== */
    .wizard-view {
        display: none;
    }
    .wizard-view.active {
        display: block;
    }
    .list-view {
        display: none;
    }
    .list-view.active {
        display: block;
    }

    /* ===== WIZARD HEADER ===== */
    .wizard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border-color);
    }
    .wizard-back {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--alfred-indigo);
        font-size: 14px;
        font-weight: 500;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px 0;
    }
    .wizard-back:hover {
        color: var(--alfred-cobalto);
    }

    /* ===== DUPLICATE BADGE ===== */
    .duplicate-badge {
        background: linear-gradient(135deg, var(--color-warning-bg), #FDE68A);
        border: 1px solid var(--color-warning);
        border-radius: 8px;
        padding: 12px 16px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .duplicate-badge-icon {
        font-size: 20px;
    }
    .duplicate-badge-text {
        font-size: 13px;
        color: #92400E;
    }
    .duplicate-badge-text strong {
        display: block;
        font-size: 14px;
        margin-bottom: 2px;
    }

    /* ===== WIZARD STEPPER ===== */
    .wizard-stepper {
        display: flex;
        justify-content: space-between;
        margin-bottom: 28px;
        position: relative;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .wizard-stepper::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 40px;
        right: 40px;
        height: 2px;
        background: var(--border-color);
        z-index: 0;
    }
    .wizard-step-indicator {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 1;
        cursor: pointer;
        flex: 1;
        min-width: 80px;
    }
    .step-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        transition: all 0.2s;
    }
    .wizard-step-indicator:hover .step-circle {
        border-color: var(--alfred-indigo);
        transform: scale(1.05);
    }
    .wizard-step-indicator.active .step-circle {
        background: var(--alfred-indigo);
        border-color: var(--alfred-indigo);
        box-shadow: 0 0 0 4px rgba(0, 88, 152, 0.15);
    }
    .wizard-step-indicator.active .step-icon {
        filter: brightness(10);
    }
    .wizard-step-indicator.completed .step-circle {
        background: var(--color-success-dark);
        border-color: var(--color-success-dark);
    }
    .wizard-step-indicator.completed .step-circle::after {
        content: '✓';
        color: white;
        font-size: 16px;
        font-weight: 600;
    }
    .wizard-step-indicator.completed .step-icon {
        display: none;
    }
    .step-label {
        text-align: center;
        margin-top: 8px;
    }
    .step-title {
        font-weight: 500;
        font-size: 12px;
        color: var(--text-muted);
    }
    .wizard-step-indicator.active .step-title,
    .wizard-step-indicator.completed .step-title {
        color: var(--text-color);
    }

    /* ===== WIZARD CONTENT ===== */
    .wizard-content {
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 28px;
        min-height: 380px;
    }
    .step-content {
        display: none;
        animation: fadeIn 0.25s ease;
    }
    .step-content.active {
        display: block;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .step-header {
        margin-bottom: 24px;
    }

    .step-header h3 {
        margin: 0 0 4px 0;
        font-size: 20px;
    }

    .step-header p {
        margin: 0;
        color: var(--text-muted);
    }

    /* Navigation */
    .wizard-navigation {
        display: flex;
        justify-content: space-between;
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px solid var(--border-color);
    }

    /* Search & Selector */
    .search-box {
        position: relative;
        margin-bottom: 16px;
    }

    .search-box input {
        width: 100%;
        padding: 12px 16px 12px 44px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font-size: 14px;
        background: var(--bg-secondary);
    }

    .search-box input:focus {
        outline: none;
        border-color: var(--alfred-teal);
        box-shadow: 0 0 0 3px rgba(0, 178, 169, 0.1);
    }

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

    .selector-list {
        max-height: 300px;
        overflow-y: auto;
        border: 1px solid var(--border-color);
        border-radius: 8px;
    }

    .selector-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        cursor: pointer;
        transition: background 0.2s;
        border-bottom: 1px solid var(--border-color);
    }

    .selector-item:last-child {
        border-bottom: none;
    }

    .selector-item:hover {
        background: var(--bg-secondary);
    }

    .selector-item .item-icon {
        font-size: 24px;
    }

    .selector-item .item-info {
        flex: 1;
    }

    .selector-item .item-info strong {
        display: block;
    }

    .selector-item .item-info span {
        font-size: 13px;
        color: var(--text-muted);
    }

    .selector-item .item-arrow {
        color: var(--text-muted);
    }

    /* Selected Item Card */
    .selected-card {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        background: linear-gradient(135deg, rgba(0, 178, 169, 0.1), rgba(79, 70, 229, 0.1));
        border: 2px solid var(--alfred-teal);
        border-radius: 12px;
        margin-bottom: 16px;
    }

    .selected-card .card-icon {
        font-size: 32px;
    }

    .selected-card .card-info {
        flex: 1;
    }

    .selected-card .card-info strong {
        font-size: 16px;
        display: block;
    }

    .selected-card .card-info span {
        color: var(--text-muted);
    }

    .selected-card .btn-change {
        padding: 6px 12px;
        font-size: 13px;
    }

    /* Pack Cards */
    .packs-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }

    /* ===== PACK CARDS - Rediseño v3 (Azul + Checkmark) ===== */
    .pack-card {
        border: 2px solid var(--border-color);
        border-radius: 12px;
        padding: 20px;
        cursor: pointer;
        transition: all 0.2s;
        text-align: center;
        position: relative;
        background: #fff;
    }

    .pack-card:hover {
        border-color: var(--alfred-indigo);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 88, 152, 0.1);
    }

    .pack-card.selected {
        border-color: var(--alfred-indigo);
        border-width: 3px;
        background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
        box-shadow: 0 0 0 4px rgba(0, 88, 152, 0.15);
    }

    /* Checkmark para pack seleccionado */
    .pack-card.selected::after {
        content: '✓';
        position: absolute;
        top: -10px;
        right: -10px;
        width: 26px;
        height: 26px;
        background: var(--alfred-indigo);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(0, 88, 152, 0.3);
    }

    .pack-card .pack-name {
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 4px;
        color: var(--alfred-cobalto);
    }

    .pack-card .pack-desc {
        font-size: 12px;
        color: var(--text-secondary);
        margin-bottom: 12px;
        min-height: 32px;
    }

    .pack-card .pack-price {
        font-size: 24px;
        font-weight: 700;
        color: var(--alfred-cobalto);
    }

    .pack-card .pack-price span {
        font-size: 14px;
        font-weight: 400;
        color: var(--text-secondary);
    }

    .pack-card .pack-includes {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--border-color);
    }

    .pack-card .pack-includes small {
        font-size: 11px;
        color: var(--text-secondary);
    }

    /* Pack gratuito - ya no es todo verde, solo el badge */
    .pack-card.pack-free {
        border-color: var(--border-color);
        background: #fff;
    }

    .pack-card.pack-free:hover {
        border-color: var(--alfred-indigo);
    }

    .pack-card.pack-free.selected {
        border-color: var(--alfred-indigo);
        border-width: 3px;
        background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
        box-shadow: 0 0 0 4px rgba(0, 88, 152, 0.15);
    }

    /* Badge Freemium - contraste mejorado */
    .free-badge {
        background: linear-gradient(135deg, #5B21B6 0%, #4C1D95 100%);
        color: #fff;
        padding: 5px 14px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 700;
        cursor: help;
        letter-spacing: 0.5px;
        text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

    .pack-freemium-note {
        font-size: 10px;
        color: #5B21B6;
        margin-top: 4px;
        font-style: italic;
    }

    /* Form Controls */
    .form-section {
        margin-bottom: 24px;
    }

    .form-section-title {
        font-weight: 600;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .form-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 16px;
    }

    .form-group {
        margin-bottom: 16px;
    }

    .form-label {
        display: block;
        margin-bottom: 6px;
        font-weight: 500;
        font-size: 14px;
    }

    .form-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 14px;
        background: var(--bg-primary);
    }

    .form-input:focus {
        outline: none;
        border-color: var(--alfred-teal);
        box-shadow: 0 0 0 3px rgba(0, 178, 169, 0.1);
    }

    .form-hint {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 4px;
    }

    /* Frequency Toggle */
    .frequency-toggle {
        display: flex;
        background: var(--bg-secondary);
        border-radius: 8px;
        padding: 4px;
        width: fit-content;
        margin-bottom: 24px;
    }

    .frequency-btn {
        padding: 8px 20px;
        border: none;
        background: none;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .frequency-btn.active {
        background: var(--alfred-teal);
        color: white;
    }

    .discount-badge {
        background: #22c55e;
        color: white;
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 4px;
        margin-left: 8px;
    }

    /* ===== PAYMENT FREQUENCY CARDS (Rediseño v3) ===== */
    .payment-frequency-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: 500px;
    }

    .frequency-card {
        border: 2px solid var(--border-color);
        border-radius: 12px;
        padding: 20px;
        cursor: pointer;
        transition: all 0.2s;
        background: #fff;
        position: relative;
    }

    .frequency-card:hover {
        border-color: var(--alfred-indigo);
        box-shadow: 0 4px 12px rgba(0, 88, 152, 0.1);
    }

    .frequency-card.selected {
        border-color: var(--alfred-indigo);
        border-width: 3px;
        background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    }

    .frequency-card.selected::after {
        content: '✓';
        position: absolute;
        top: -8px;
        right: -8px;
        width: 22px;
        height: 22px;
        background: var(--alfred-indigo);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
    }

    .frequency-card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
    }

    .frequency-icon {
        font-size: 20px;
    }

    .frequency-name {
        font-weight: 600;
        font-size: 16px;
        color: var(--alfred-cobalto);
    }

    .frequency-discount {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: white;
        font-size: 11px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 12px;
        margin-left: auto;
    }

    .frequency-price {
        margin-bottom: 8px;
    }

    .frequency-price .price-amount {
        font-size: 28px;
        font-weight: 700;
        color: var(--alfred-cobalto);
    }

    .frequency-price .price-period {
        font-size: 14px;
        color: var(--text-secondary);
    }

    .frequency-desc {
        font-size: 12px;
        color: var(--text-secondary);
    }

    /* ===== RESOURCES INFO ===== */
    .resources-info {
        background: #F0F9FF;
        border: 1px solid #BAE6FD;
        border-radius: 8px;
        padding: 12px 16px;
        font-size: 13px;
        color: #0369A1;
        margin-bottom: 16px;
        line-height: 1.5;
    }

    .resources-info-icon {
        margin-right: 6px;
    }

    .resources-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .resource-group {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 16px;
    }

    .resource-group .form-label {
        font-size: 13px;
    }

    .resource-group .form-hint {
        color: var(--color-success-dark);
        font-weight: 500;
    }

    /* Optional Badge */
    .optional-badge {
        background: var(--border-light);
        color: var(--text-secondary);
        font-size: 11px;
        font-weight: 500;
        padding: 2px 8px;
        border-radius: 10px;
        margin-left: 8px;
    }

    @media (max-width: 600px) {
        .payment-frequency-cards {
            grid-template-columns: 1fr;
        }
        .resources-row {
            grid-template-columns: 1fr;
        }
    }

    /* Products Grid */
    .products-accordion {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .product-item {
        border: 1px solid var(--border-color);
        border-radius: 12px;
        overflow: hidden;
    }

    .product-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        cursor: pointer;
        background: var(--bg-secondary);
        transition: background 0.2s;
    }

    .product-header:hover {
        background: var(--bg-tertiary);
    }

    .product-icon-box {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: linear-gradient(135deg, var(--alfred-cobalto), var(--alfred-indigo));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: white;
    }

    .product-icon-box img {
        width: 26px;
        height: 26px;
        filter: brightness(0) invert(1);
    }

    .product-info {
        flex: 1;
    }

    .product-name {
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .product-badge {
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 4px;
        background: rgba(0, 178, 169, 0.1);
        color: var(--alfred-teal);
    }

    .product-desc {
        font-size: 13px;
        color: var(--text-muted);
    }

    .product-toggle {
        transition: transform 0.2s;
    }

    .product-item.expanded .product-toggle {
        transform: rotate(180deg);
    }

    .product-functions {
        display: none;
        padding: 16px;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-color);
    }

    .product-item.expanded .product-functions {
        display: block;
    }

    /* Function Items */
    .function-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .function-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: var(--bg-secondary);
        border-radius: 8px;
    }

    .function-row.active {
        background: rgba(0, 178, 169, 0.1);
        border: 1px solid var(--alfred-teal);
    }

    .function-name {
        flex: 1;
        font-size: 14px;
    }

    .function-controls {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .qty-input {
        width: 70px;
        padding: 6px 10px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        text-align: center;
    }

    .device-source-select {
        padding: 6px 10px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 13px;
        min-width: 120px;
    }

    .btn-select-device {
        padding: 6px 10px;
        font-size: 13px;
    }

    /* Hardware Summary */
    .hardware-summary {
        background: var(--bg-secondary);
        border-radius: 12px;
        padding: 20px;
    }

    .hw-category {
        margin-bottom: 16px;
    }

    .hw-category-title {
        font-weight: 600;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .hw-items {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .hw-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: var(--bg-primary);
        border-radius: 8px;
    }

    .hw-qty {
        font-weight: 600;
        color: var(--alfred-teal);
        min-width: 40px;
    }

    .hw-info {
        flex: 1;
    }

    .hw-device {
        font-size: 13px;
        color: var(--text-muted);
    }

    .hw-source-badge {
        font-size: 11px;
        padding: 3px 8px;
        border-radius: 4px;
    }

    .hw-source-badge.new {
        background: rgba(34, 197, 94, 0.1);
        color: #15803d;
    }

    .hw-source-badge.existing {
        background: rgba(59, 130, 246, 0.1);
        color: #1d4ed8;
    }

    /* Function Row (Paso 3) */
    .fn-label {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .fn-hw-badge {
        font-size: 12px;
        color: var(--text-muted);
        cursor: help;
    }

    /* Hardware Config (Paso 4) */
    .hardware-config-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .hw-config-item {
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 16px;
        background: var(--bg-primary);
    }

    .hw-config-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }

    .hw-config-qty {
        font-size: 18px;
        font-weight: 700;
        color: var(--alfred-teal);
        min-width: 50px;
    }

    .hw-config-info {
        flex: 1;
    }

    .hw-config-name {
        font-weight: 600;
        font-size: 15px;
    }

    .hw-config-product {
        font-size: 12px;
        color: var(--text-muted);
        text-transform: uppercase;
    }

    .hw-config-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }

    .hw-source-toggle {
        display: flex;
        background: var(--bg-secondary);
        border-radius: 8px;
        padding: 4px;
    }

    .hw-source-btn {
        padding: 8px 16px;
        border: none;
        background: none;
        border-radius: 6px;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }

    .hw-source-btn:hover {
        background: rgba(0, 0, 0, 0.05);
    }

    .hw-source-btn.active {
        background: var(--alfred-teal);
        color: white;
    }

    .hw-device-selector,
    .hw-protocol-selector {
        flex: 1;
        min-width: 200px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .hw-device-selector.hidden,
    .hw-protocol-selector.hidden {
        display: none;
    }

    .hw-device-select,
    .hw-protocol-select {
        flex: 1;
    }

    .hw-recommended-badge {
        font-size: 11px;
        padding: 4px 8px;
        background: rgba(234, 179, 8, 0.15);
        color: #b45309;
        border-radius: 4px;
        white-space: nowrap;
    }

    /* Hardware Summary Box */
    .hardware-summary-box {
        background: var(--bg-secondary);
        border-radius: 12px;
        padding: 20px;
    }

    .hw-summary-stats {
        display: flex;
        gap: 24px;
        margin-top: 12px;
    }

    .hw-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px 24px;
        background: var(--bg-primary);
        border-radius: 8px;
        flex: 1;
    }

    .hw-stat-value {
        font-size: 28px;
        font-weight: 700;
        color: var(--alfred-teal);
    }

    .hw-stat-label {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 4px;
    }

    /* Services */
    .services-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .service-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        transition: all 0.2s;
    }

    .service-item.selected {
        border-color: var(--alfred-teal);
        background: rgba(0, 178, 169, 0.05);
    }

    .service-checkbox {
        width: 24px;
        height: 24px;
        cursor: pointer;
    }

    .service-info {
        flex: 1;
    }

    .service-name {
        font-weight: 500;
    }

    .service-desc {
        font-size: 13px;
        color: var(--text-muted);
    }

    .service-price {
        font-weight: 600;
        color: var(--alfred-teal);
    }

    /* Maintenance Plans */
    .plans-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .plan-card {
        border: 2px solid var(--border-color);
        border-radius: 16px;
        padding: 24px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        position: relative;
    }

    .plan-card:hover {
        border-color: var(--alfred-teal);
    }

    .plan-card.selected {
        border-color: var(--alfred-teal);
        background: rgba(0, 178, 169, 0.05);
    }

    .plan-card.recommended::before {
        content: '★ Recomendado';
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--alfred-teal);
        color: white;
        font-size: 11px;
        padding: 4px 12px;
        border-radius: 12px;
    }

    .plan-name {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .plan-price {
        font-size: 28px;
        font-weight: 700;
        color: var(--alfred-teal);
        margin-bottom: 4px;
    }

    .plan-price span {
        font-size: 14px;
        font-weight: 400;
        color: var(--text-muted);
    }

    .plan-sla {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 16px;
    }

    .plan-features {
        text-align: left;
        font-size: 13px;
    }

    .plan-features li {
        padding: 4px 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .plan-features li::before {
        content: '✓';
        color: var(--alfred-teal);
        font-weight: bold;
    }

    /* Summary */
    .proposal-summary {
        background: var(--bg-secondary);
        border-radius: 16px;
        padding: 24px;
        margin-top: 24px;
    }

    .summary-section {
        padding: 16px 0;
        border-bottom: 1px solid var(--border-color);
    }

    .summary-section:last-child {
        border-bottom: none;
    }

    .summary-title {
        font-weight: 600;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .summary-items {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .summary-item {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
    }

    .summary-item.total {
        font-weight: 600;
        font-size: 16px;
        padding-top: 12px;
        border-top: 1px solid var(--border-color);
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 40px;
        color: var(--text-muted);
    }

    .empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
    }

    /* Loading */
    .loading-state {
        text-align: center;
        padding: 40px;
    }

    /* Proposals List */
    .proposals-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    .proposals-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .proposal-card {
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        overflow: hidden;
    }

    .proposal-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        background: var(--bg-secondary);
    }

    .proposal-company {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .proposal-status {
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
    }

    .status-pending { background: rgba(234, 179, 8, 0.1); color: #ca8a04; }
    .status-progress { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
    .status-completed { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
    .status-cancelled { background: rgba(239, 68, 68, 0.1); color: #dc2626; }

    .proposal-card-body {
        padding: 16px;
    }

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

    .detail-item {
        display: flex;
        flex-direction: column;
    }

    .detail-label {
        font-size: 12px;
        color: var(--text-muted);
    }

    .detail-value {
        font-weight: 500;
    }

    .proposal-card-footer {
        display: flex;
        justify-content: space-between;
        padding: 12px 16px;
        border-top: 1px solid var(--border-color);
        font-size: 13px;
        color: var(--text-muted);
    }

    /* Client Source Toggle */
    .client-source-toggle {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 24px;
    }

    .source-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 16px;
        border: 2px solid var(--border-color);
        border-radius: 12px;
        background: var(--bg-secondary);
        cursor: pointer;
        transition: all 0.2s;
    }

    .source-btn:hover {
        border-color: var(--alfred-teal);
        background: rgba(0, 178, 169, 0.05);
    }

    .source-btn.active {
        border-color: var(--alfred-teal);
        background: rgba(0, 178, 169, 0.1);
    }

    .source-btn .source-icon {
        font-size: 24px;
    }

    .source-btn .source-label {
        font-weight: 600;
        font-size: 14px;
    }

    .source-btn .source-desc {
        font-size: 12px;
        color: var(--text-muted);
    }

    /* Manual Client Form */
    .manual-client-form {
        animation: fadeIn 0.3s ease;
    }

    /* Client Type Toggle (Empresa/Particular) */
    .client-type-toggle {
        display: flex;
        gap: 12px;
    }

    .client-type-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 16px;
        border: 2px solid var(--border-color);
        border-radius: 10px;
        background: var(--bg-secondary);
        cursor: pointer;
        transition: all 0.2s;
    }

    .client-type-btn:hover {
        border-color: var(--alfred-teal);
        background: rgba(0, 178, 169, 0.05);
    }

    .client-type-btn.active {
        border-color: var(--alfred-teal);
        background: rgba(0, 178, 169, 0.1);
    }

    .client-type-btn .type-icon {
        font-size: 20px;
    }

    .client-type-btn .type-label {
        font-weight: 500;
        font-size: 14px;
    }

    .manual-form-notice {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        background: linear-gradient(135deg, rgba(234, 179, 8, 0.1), rgba(251, 191, 36, 0.1));
        border: 1px solid rgba(234, 179, 8, 0.3);
        border-radius: 12px;
        margin-bottom: 24px;
    }

    .manual-form-notice span {
        font-size: 20px;
    }

    .manual-form-notice p {
        margin: 0;
        font-size: 14px;
        color: var(--text-secondary);
    }

    /* HubSpot Creation Prompt */
    .hubspot-prompt-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        animation: fadeIn 0.2s ease;
    }

    .hubspot-prompt-modal {
        background: var(--bg-primary);
        border-radius: 20px;
        padding: 32px;
        max-width: 420px;
        width: 90%;
        text-align: center;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        animation: slideUp 0.3s ease;
    }

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

    .hubspot-prompt-icon {
        font-size: 48px;
        margin-bottom: 16px;
    }

    .hubspot-prompt-modal h3 {
        margin: 0 0 8px 0;
        font-size: 20px;
    }

    .hubspot-prompt-modal > p {
        margin: 0 0 20px 0;
        color: var(--text-muted);
    }

    .hubspot-prompt-client {
        background: var(--bg-secondary);
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 20px;
    }

    .hubspot-prompt-client strong {
        display: block;
        font-size: 16px;
        margin-bottom: 4px;
    }

    .hubspot-prompt-client span {
        font-size: 13px;
        color: var(--text-muted);
    }

    .hubspot-prompt-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
    }

    .hubspot-prompt-actions .btn {
        flex: 1;
        max-width: 180px;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .wizard-stepper {
            overflow-x: auto;
            padding-bottom: 16px;
        }

        .wizard-stepper::before {
            display: none;
        }

        .plans-grid {
            grid-template-columns: 1fr;
        }

        .packs-grid {
            grid-template-columns: 1fr;
        }

        .client-source-toggle {
            grid-template-columns: 1fr;
        }

        .hubspot-prompt-actions {
            flex-direction: column;
        }

        .hubspot-prompt-actions .btn {
            max-width: 100%;
        }
    }

    /* ==================== */
    /* BORRADORES / DRAFTS  */
    /* ==================== */
    
    /* Prompt para restaurar borrador */
    .draft-restore-prompt {
        position: sticky;
        top: 0;
        z-index: 100;
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border: 1px solid #f59e0b;
        border-radius: 12px;
        margin-bottom: 20px;
        padding: 16px 20px;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
        animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .draft-restore-content {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .draft-icon {
        font-size: 32px;
    }

    .draft-info {
        flex: 1;
        min-width: 200px;
    }

    .draft-info strong {
        display: block;
        color: #92400e;
        margin-bottom: 4px;
    }

    .draft-info p {
        margin: 0;
        color: #78350f;
        font-size: 14px;
    }

    .draft-info .draft-meta {
        display: block;
        font-size: 12px;
        color: #a16207;
        margin-top: 2px;
    }

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

    /* Navegación con botón de guardar borrador */
    .wizard-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .wizard-navigation .nav-right {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .btn-outline {
        background: transparent;
        border: 1px solid var(--border-color);
        color: var(--text-secondary);
    }

    .btn-outline:hover {
        background: var(--bg-tertiary);
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

    /* Estado draft en historial */
    .status-draft {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #92400e;
    }

    .proposal-card.is-draft {
        border-color: #f59e0b;
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    }

    .proposal-card.is-draft:hover {
        border-color: #d97706;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
    }

    .proposal-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .proposal-card-footer .draft-actions {
        display: flex;
        gap: 8px;
    }

    .proposal-card-footer .draft-actions .btn-sm {
        padding: 6px 12px;
        font-size: 12px;
    }

    .btn-danger {
        background: var(--color-error);
        color: white;
        border: none;
    }

    .btn-danger:hover {
        background: #dc2626;
    }

    @media (max-width: 600px) {
        .draft-restore-content {
            flex-direction: column;
            text-align: center;
        }

        .draft-actions {
            width: 100%;
            justify-content: center;
        }

        .wizard-navigation .nav-right {
            flex-direction: column;
            width: 100%;
        }

        .wizard-navigation .nav-right .btn {
            width: 100%;
        }

        .propuestas-module {
            padding: 20px 16px;
        }

        .prop-header {
            flex-direction: column;
            gap: 16px;
        }

        .prop-toolbar {
            flex-direction: column;
        }

        .prop-search {
            max-width: none;
        }

        .prop-table-wrap {
            overflow-x: auto;
        }
    }

    /* ===== BOTÓN ASISTENTE IA ===== */
    .wizard-header-actions {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .prop-btn-ai {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        position: relative;
        overflow: hidden;
    }

    .prop-btn-ai::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }

    .prop-btn-ai:hover::before {
        left: 100%;
    }

    .prop-btn-ai:hover {
        background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .prop-btn-ai:disabled {
        background: var(--text-muted);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    /* ===== MODAL ASISTENTE IA (CHAT) ===== */
    .ai-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(4px);
    }

    .ai-modal-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    .ai-modal {
        background: #fff;
        border-radius: 16px;
        width: 95%;
        max-width: 900px;
        height: 85vh;
        max-height: 800px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
        transform: scale(0.9) translateY(20px);
        transition: transform 0.3s ease;
    }

    .ai-modal-overlay.show .ai-modal {
        transform: scale(1) translateY(0);
    }

    .ai-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        flex-shrink: 0;
    }

    .ai-modal-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 18px;
        font-weight: 600;
    }

    .ai-modal-title i {
        width: 24px;
        height: 24px;
    }

    .ai-modal-close {
        background: rgba(255,255,255,0.2);
        border: none;
        color: white;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }

    .ai-modal-close:hover {
        background: rgba(255,255,255,0.3);
    }

    /* Chat messages area */
    .ai-chat-container {
        flex: 1;
        overflow-y: auto;
        padding: 20px 24px;
        background: #f8fafc;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .ai-chat-welcome {
        text-align: center;
        padding: 40px 20px;
        color: #64748b;
    }

    .ai-chat-welcome i {
        width: 48px;
        height: 48px;
        color: #667eea;
        margin-bottom: 16px;
    }

    .ai-chat-welcome h4 {
        margin: 0 0 8px 0;
        color: #334155;
        font-size: 18px;
    }

    .ai-chat-welcome p {
        margin: 0 0 20px 0;
        font-size: 14px;
        line-height: 1.6;
    }

    .ai-quick-prompts {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

    .ai-quick-prompt {
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        padding: 8px 16px;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s;
        color: #475569;
    }

    .ai-quick-prompt:hover {
        background: #667eea;
        color: white;
        border-color: #667eea;
    }

    /* Message bubbles */
    .ai-message {
        display: flex;
        gap: 12px;
        max-width: 85%;
        animation: slideIn 0.3s ease;
    }

    @keyframes slideIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .ai-message.user {
        align-self: flex-end;
        flex-direction: row-reverse;
    }

    .ai-message-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .ai-message.assistant .ai-message-avatar {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .ai-message.user .ai-message-avatar {
        background: #e2e8f0;
        color: #475569;
    }

    .ai-message-avatar i {
        width: 18px;
        height: 18px;
    }

    .ai-message-content {
        background: white;
        padding: 14px 18px;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        font-size: 14px;
        line-height: 1.6;
    }

    .ai-message.user .ai-message-content {
        background: #667eea;
        color: white;
    }

    .ai-message.assistant .ai-message-content {
        background: white;
    }

    /* Tables in AI response */
    .ai-message-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 12px 0;
        font-size: 13px;
    }

    .ai-message-content th {
        background: #f1f5f9;
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        border-bottom: 2px solid #e2e8f0;
    }

    .ai-message-content td {
        padding: 10px 12px;
        border-bottom: 1px solid #e2e8f0;
    }

    .ai-message-content tr:last-child td {
        border-bottom: none;
    }

    .ai-message-content .price {
        font-weight: 600;
        color: var(--color-success-dark);
    }

    .ai-message-content .total-row {
        background: #f0fdf4;
        font-weight: 600;
    }

    .ai-message-content .total-row td {
        border-top: 2px solid var(--color-success-dark);
    }

    .ai-message-content h4 {
        margin: 16px 0 8px 0;
        color: #334155;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ai-message-content h4:first-child {
        margin-top: 0;
    }

    .ai-message-content ul {
        margin: 8px 0;
        padding-left: 20px;
    }

    .ai-message-content li {
        margin: 4px 0;
    }

    .ai-message-content strong {
        color: #1e293b;
    }

    .ai-message-content .summary-box {
        background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
        border: 1px solid #86efac;
        border-radius: 12px;
        padding: 16px;
        margin-top: 16px;
    }

    .ai-message-content .summary-box h5 {
        margin: 0 0 12px 0;
        color: #166534;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ai-message-content .question-box {
        background: #fffbeb;
        border: 1px solid #fcd34d;
        border-radius: 12px;
        padding: 12px 16px;
        margin-top: 16px;
        font-style: italic;
        color: #92400e;
    }

    /* Typing indicator */
    .ai-typing {
        display: flex;
        gap: 12px;
        max-width: 85%;
    }

    .ai-typing-dots {
        display: flex;
        gap: 4px;
        padding: 16px 20px;
        background: white;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    .ai-typing-dot {
        width: 8px;
        height: 8px;
        background: #94a3b8;
        border-radius: 50%;
        animation: typingBounce 1.4s infinite;
    }

    .ai-typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .ai-typing-dot:nth-child(3) { animation-delay: 0.4s; }

    @keyframes typingBounce {
        0%, 60%, 100% { transform: translateY(0); }
        30% { transform: translateY(-8px); }
    }

    /* Chat input area */
    .ai-chat-input-area {
        padding: 16px 24px;
        background: white;
        border-top: 1px solid #e2e8f0;
        flex-shrink: 0;
    }

    .ai-chat-input-wrapper {
        display: flex;
        gap: 12px;
        align-items: flex-end;
    }

    .ai-chat-input {
        flex: 1;
        padding: 14px 18px;
        border: 2px solid #e2e8f0;
        border-radius: 24px;
        font-size: 14px;
        font-family: inherit;
        resize: none;
        max-height: 120px;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .ai-chat-input:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .ai-chat-input::placeholder {
        color: #94a3b8;
    }

    .ai-chat-send {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s, box-shadow 0.2s;
        flex-shrink: 0;
    }

    .ai-chat-send:hover:not(:disabled) {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .ai-chat-send:disabled {
        background: #cbd5e1;
        cursor: not-allowed;
    }

    .ai-chat-send i {
        width: 20px;
        height: 20px;
    }

    /* Apply button */
    .ai-chat-actions {
        display: flex;
        gap: 12px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #e2e8f0;
    }

    .ai-btn-apply {
        flex: 1;
        padding: 12px 24px;
        background: linear-gradient(135deg, var(--color-success-dark) 0%, var(--color-success-dark) 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .ai-btn-apply:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
    }

    .ai-btn-apply i {
        width: 18px;
        height: 18px;
    }

    .ai-btn-reset {
        padding: 12px 20px;
        background: #f1f5f9;
        color: #475569;
        border: none;
        border-radius: 12px;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: background 0.2s;
    }

    .ai-btn-reset:hover {
        background: #e2e8f0;
    }

    .ai-status.loading {
        color: #667eea;
    }

    .ai-status.success {
        color: var(--color-success);
    }

    .ai-status.error {
        color: var(--color-error);
    }

    .ai-modal-actions {
        display: flex;
        gap: 12px;
    }

    /* Spinner para loading */
    .ai-spinner {
        width: 16px;
        height: 16px;
        border: 2px solid var(--border-color);
        border-top-color: #667eea;
        border-radius: 50%;
        animation: ai-spin 0.8s linear infinite;
    }

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

    /* ===== MODAL ENVÍO EMAIL PRESUPUESTO ===== */
    .email-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10001;
        animation: fadeIn 0.2s ease;
        backdrop-filter: blur(4px);
    }

    .email-modal {
        background: white;
        border-radius: 16px;
        width: 95%;
        max-width: 560px;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
        animation: slideIn 0.3s ease;
    }

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

    .email-modal-header h3 {
        margin: 0;
        font-size: 18px;
        color: var(--alfred-cobalto);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .email-modal-header h3 i {
        width: 22px;
        height: 22px;
        color: var(--alfred-cobalto);
    }

    .email-modal-close {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        transition: all 0.2s;
    }

    .email-modal-close:hover {
        background: var(--border-light);
        color: var(--text-color);
    }

    .email-modal-body {
        padding: 24px;
    }

    .email-form-group {
        margin-bottom: 16px;
    }

    .email-form-group label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-color);
        margin-bottom: 6px;
    }

    .email-form-group input,
    .email-form-group textarea {
        width: 100%;
        padding: 10px 14px;
        border: 1.5px solid var(--border-color);
        border-radius: 10px;
        font-size: 14px;
        font-family: inherit;
        transition: border-color 0.2s, box-shadow 0.2s;
        box-sizing: border-box;
    }

    .email-form-group input:focus,
    .email-form-group textarea:focus {
        outline: none;
        border-color: var(--alfred-cobalto);
        box-shadow: 0 0 0 3px rgba(0, 61, 89, 0.1);
    }

    .email-form-group textarea {
        resize: vertical;
        min-height: 100px;
    }

    .email-note {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        background: #f0f9ff;
        border: 1px solid #bae6fd;
        border-radius: 10px;
        font-size: 13px;
        color: #0369a1;
    }

    .email-note i {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .email-modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 16px 24px;
        border-top: 1px solid var(--border-color);
        background: var(--bg-secondary);
        border-radius: 0 0 16px 16px;
    }

    .email-modal-footer .prop-btn {
        padding: 10px 18px;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* ===== BOTÓN OUTLINE ===== */
    .prop-btn-outline {
        background: white;
        border: 1.5px solid var(--alfred-cobalto);
        color: var(--alfred-cobalto);
    }

    .prop-btn-outline:hover {
        background: #f0f9ff;
    }

    /* ===== MODAL DE CONFIRMACIÓN ===== */
    .confirm-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s;
    }
    .confirm-modal-overlay.show {
        opacity: 1;
        visibility: visible;
    }
    .confirm-modal {
        background: #fff;
        border-radius: 12px;
        padding: 24px;
        max-width: 420px;
        width: 90%;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        transform: scale(0.95);
        transition: transform 0.2s;
    }
    .confirm-modal-overlay.show .confirm-modal {
        transform: scale(1);
    }
    .confirm-modal-icon {
        font-size: 40px;
        text-align: center;
        margin-bottom: 16px;
    }
    .confirm-modal h3 {
        font-size: 18px;
        color: var(--alfred-cobalto);
        margin: 0 0 8px 0;
        text-align: center;
    }
    .confirm-modal p {
        font-size: 14px;
        color: var(--text-secondary);
        margin: 0 0 24px 0;
        text-align: center;
    }
    .confirm-modal-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }
    .confirm-modal-actions button {
        flex: 1;
        min-width: 100px;
    }

    /* ===== SUMMARY STEP ===== */
    .summary-section {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 16px 20px;
        margin-bottom: 16px;
    }
    .summary-section-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--alfred-indigo);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .summary-row {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        font-size: 14px;
    }
    .summary-row-label {
        color: var(--text-secondary);
    }
    .summary-row-value {
        color: var(--text-color);
        font-weight: 500;
    }
    .summary-list {
        margin: 0;
        padding-left: 20px;
        color: var(--text-color);
        font-size: 14px;
    }
    .summary-list li {
        padding: 4px 0;
    }
    .summary-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }


/* =====================================================
   Settings Module — Refactored (sidebar layout)
   All classes scoped under .settings-module
   Replaces old tab-based settings styles
   ===================================================== */

/* ─── Layout ─────────────────────────────────────── */
.settings-module {
    width: 100%;
}

.st-layout {
    display: flex;
    min-height: calc(100vh - 120px);
    gap: 0;
}

/* ─── Sidebar ────────────────────────────────────── */
.st-sidebar {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    padding: 0;
    background: var(--bg-secondary);
}

.st-sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
}

.st-sidebar-header .icon-inline {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

/* ─── Nav ────────────────────────────────────────── */
.st-nav {
    padding: 4px 8px 20px;
}

.st-nav-group {
    margin-bottom: 4px;
}

.st-nav-group-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 12px 8px 4px;
}

.st-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
    margin-bottom: 1px;
}

.st-nav-item:hover {
    background: var(--bg-hover, rgba(0,0,0,0.04));
    color: var(--text-primary);
}

.st-nav-item.active {
    background: var(--alfred-teal-light, rgba(0, 178, 169, 0.08));
    color: var(--alfred-teal);
    font-weight: 500;
}

.st-nav-item .icon-inline {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.7;
}

.st-nav-item.active .icon-inline {
    opacity: 1;
}

/* ─── Panel ──────────────────────────────────────── */
.st-panel {
    flex: 1;
    min-width: 0;
    padding: 24px 28px;
    overflow-y: auto;
}

/* ─── Page structure ─────────────────────────────── */
.st-page {
    max-width: 900px;
}

.st-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.st-page-header-left {
    flex: 1;
}

.st-page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.st-page-title .icon-inline {
    width: 20px;
    height: 20px;
    color: var(--alfred-teal);
}

.st-page-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.st-page-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ─── Card section title ─────────────────────────── */
.st-card-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.st-card-section-title .icon-inline {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

/* ─── KPI Row ────────────────────────────────────── */
.st-kpi-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.st-kpi-card {
    flex: 1;
    min-width: 80px;
    padding: 14px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
}

.st-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    line-height: 1.2;
}

.st-kpi-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ─── Status box ─────────────────────────────────── */
.st-status {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.st-status-loading {
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.st-status-success {
    background: var(--color-success-bg, #f0fdf4);
    color: var(--color-success-dark, #166534);
    border: 1px solid var(--color-success-border, #bbf7d0);
}

.st-status-error {
    background: var(--color-error-bg, #fef2f2);
    color: var(--color-error-dark, #991b1b);
    border: 1px solid var(--color-error-border, #fecaca);
}

.st-status-warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.st-status .icon-inline {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* ─── Button grid ────────────────────────────────── */
.st-btn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

/* ─── Avatar ─────────────────────────────────────── */
.st-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--alfred-celeste, #e0f5f4);
    color: var(--alfred-cobalto);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}

.st-avatar--inactive {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

/* ─── Commission card ────────────────────────────── */
.st-commission-card {
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 12px;
}

.st-commission-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.st-commission-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

/* ─── Connection status ──────────────────────────── */
.st-connection-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
}

.st-connection-status--connected {
    background: #f0f4ff;
    border: 1px solid #c7d2fe;
}

.st-connection-status--disconnected {
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
}

.st-connection-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.st-connection-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
}

.st-connection-dot--off {
    background: var(--text-muted);
}

.st-connection-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.st-connection-detail {
    font-size: 12px;
    color: var(--text-muted);
}

/* ─── Search box ─────────────────────────────────── */
.st-search-box {
    position: relative;
}

.st-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.st-search-input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    background: var(--bg-primary);
    color: var(--text-primary);
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.st-search-input:focus {
    outline: none;
    border-color: var(--alfred-teal);
}

/* ─── Preview box (BREEAM) ───────────────────────── */
.st-preview-box {
    padding: 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.st-preview-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ─── Dropzone ───────────────────────────────────── */
.st-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.st-dropzone:hover,
.st-dropzone.dragover {
    border-color: var(--alfred-teal);
    background: var(--alfred-teal-light, rgba(0, 178, 169, 0.04));
}

.st-dropzone-icon {
    width: 36px;
    height: 36px;
    color: var(--text-muted);
    margin: 0 auto 10px;
    display: block;
}

.st-dropzone-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.st-dropzone-hint {
    font-size: 12px;
    color: var(--text-muted);
}

/* ─── Clickable table rows ───────────────────────── */
.clickable-row {
    cursor: pointer;
    transition: background 0.1s;
}

.clickable-row:hover {
    background: var(--bg-hover, rgba(0,0,0,0.02));
}

.row-inactive {
    opacity: 0.55;
}

/* ─── Permission checkboxes ──────────────────────── */
.permission-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    transition: background 0.1s;
}

.permission-checkbox-item:hover {
    background: var(--bg-hover, rgba(0,0,0,0.03));
}

.permission-checkbox-item label {
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.permission-checkbox-item input[type="checkbox"] {
    cursor: pointer;
    flex-shrink: 0;
}

.permission-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

/* ─── Drawer (Product) ───────────────────────────── */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

.drawer-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.product-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    background: var(--bg-primary);
    z-index: 201;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -8px 0 32px rgba(0,0,0,0.12);
}

.product-drawer.open {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--alfred-cobalto);
    color: white;
}

.drawer-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
}

.drawer-icon img { width: 28px; height: 28px; object-fit: contain; }

.drawer-title-section {
    flex: 1;
    min-width: 0;
}

.drawer-code {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.7;
    display: block;
}

.drawer-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawer-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
    flex-shrink: 0;
}

.drawer-close:hover { opacity: 1; }

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.drawer-section {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.drawer-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.drawer-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.drawer-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.drawer-footer .btn:first-child {
    margin-right: auto;
}

.drawer-icon-preview-box {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: var(--alfred-cobalto);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
}

.drawer-icon-preview-box img { width: 28px; height: 28px; object-fit: contain; filter: brightness(0) invert(1); }

/* Drawer: functions list */
.drawer-functions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.drawer-function-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.drawer-function-item.inactive { opacity: 0.55; }

.drawer-function-info { flex: 1; min-width: 0; }

.drawer-function-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.drawer-function-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.drawer-function-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.drawer-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ─── Products table ─────────────────────────────── */
.product-icon-mini {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 1px solid var(--border-color);
}

.product-icon-mini.has-icon { background: var(--alfred-cobalto); }
.product-icon-mini img { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); }

.product-name-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-code-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--alfred-teal);
    background: var(--alfred-teal-light, rgba(0,178,169,0.08));
    padding: 1px 5px;
    border-radius: 3px;
    width: fit-content;
}

.product-desc-hint {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.category-tag {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.functions-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ─── Linked devices ─────────────────────────────── */
.linked-device-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin-bottom: 6px;
    border: 1px solid var(--border-color);
}

.linked-device-info { flex: 1; min-width: 0; }

.linked-device-name { font-size: 13px; font-weight: 500; }

.linked-device-meta { font-size: 11px; color: var(--text-muted); }

.linked-device-badges { display: flex; gap: 4px; }

.device-badge {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    opacity: 0.4;
    transition: opacity 0.15s, background 0.15s;
}

.device-badge.active { opacity: 1; background: var(--alfred-teal-light, rgba(0,178,169,0.1)); border-color: var(--alfred-teal); }

/* ─── Tags input ─────────────────────────────────── */
.tags-input {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    min-height: 40px;
    align-items: center;
    cursor: text;
}

.tags-input input {
    border: none;
    outline: none;
    background: none;
    font-size: 13px;
    color: var(--text-primary);
    min-width: 100px;
    flex: 1;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--alfred-teal-light, rgba(0,178,169,0.1));
    color: var(--alfred-teal);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.tag-remove {
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0.6;
}

.tag-remove:hover { opacity: 1; }

/* ─── Ghost/danger ghost buttons ─────────────────── */
.btn-danger-ghost {
    color: var(--color-error, #dc2626);
}

.btn-danger-ghost:hover {
    background: var(--color-error-bg, #fef2f2);
}

/* ─── Modals inside Settings (hide until .active) ── */
.settings-module .modal-overlay {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.settings-module .modal-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.settings-module .modal-container {
    background: var(--bg-primary, #ffffff);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.settings-module .modal-overlay.active .modal-container {
    transform: scale(1);
}

.settings-module .modal-sm {
    max-width: 440px;
}

/* ─── Responsive ─────────────────────────────────── */
@media (max-width: 768px) {
    .st-layout {
        flex-direction: column;
    }

    .st-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .st-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px;
    }

    .st-nav-group {
        display: contents;
    }

    .st-nav-group-title {
        display: none;
    }

    .st-nav-item {
        flex-direction: row;
        padding: 6px 10px;
        font-size: 12px;
    }

    .st-panel {
        padding: 16px;
    }

    .st-btn-grid {
        grid-template-columns: 1fr;
    }

    .product-drawer {
        width: 100%;
    }

    .st-commission-fields {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   AUTOPILOT BOS ROI — Featured Card + Calculator
   ===================================================== */

/* ---- Featured Card en la grid de Soluciones ---- */
.bos-featured-card {
    position: relative;
    background: linear-gradient(135deg, #003D59 0%, #005898 60%, #003D59 100%);
    border-radius: 20px;
    padding: 36px;
    margin-bottom: 32px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 8px 32px rgba(0, 61, 89, 0.30);
}
.bos-featured-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 48px rgba(0, 61, 89, 0.40);
}
.bos-featured-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(0, 88, 152, 0.6) 0%, transparent 70%);
    pointer-events: none;
}
.bos-featured-content {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 40px;
    align-items: center;
}
.bos-featured-left { flex: 1; min-width: 0; }
.bos-featured-right { flex: 0 0 260px; }

.bos-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 16px;
    text-transform: uppercase;
}
.bos-badge-dot {
    width: 7px; height: 7px;
    background: #4ade80;
    border-radius: 50%;
    animation: bosDotPulse 1.5s ease-in-out infinite;
}
@keyframes bosDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.4); }
}
.bos-featured-title {
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 12px;
    line-height: 1.2;
}
.bos-featured-desc {
    color: rgba(255,255,255,0.80);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 540px;
}
.bos-featured-metrics {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.bos-metric { text-align: center; }
.bos-metric-value {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}
.bos-metric-label {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    margin-top: 2px;
}
.bos-metric-sep {
    width: 1px; height: 36px;
    background: rgba(255,255,255,0.25);
}
.bos-featured-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.95);
    color: #003D59;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.bos-featured-btn:hover {
    background: #fff;
    transform: translateY(-1px);
}
.bos-featured-btn i { width: 16px; height: 16px; }
.bos-btn-arrow { transition: transform 0.15s; }
.bos-featured-btn:hover .bos-btn-arrow { transform: translateX(4px); }

/* Data nodes visualization */
.bos-data-nodes {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto;
}
.bos-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 11px;
    color: #fff;
    backdrop-filter: blur(4px);
    animation: bosNodeFloat 3s ease-in-out infinite;
}
.bos-node i { width: 18px; height: 18px; }
.bos-node-hvac   { top: 0;   left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.bos-node-lights { top: 40%; right: 0;  animation-delay: 0.5s; }
.bos-node-access { bottom: 0; right: 20%; animation-delay: 1s; }
.bos-node-iaq    { bottom: 0; left: 20%; animation-delay: 1.5s; }
.bos-node-energy { top: 40%; left: 0; animation-delay: 2s; }
@keyframes bosNodeFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
}
.bos-node-hvac { animation: bosNodeFloat 3s ease-in-out infinite; }
.bos-node-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.20);
    border: 2px solid rgba(255,255,255,0.50);
    border-radius: 50%;
    width: 64px; height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    gap: 2px;
}
.bos-node-center-label { font-size: 22px; line-height: 1; }
.bos-node-center span:last-child { font-size: 10px; color: #fff; font-weight: 700; }

/* ---- Calculator wrapper ---- */
.bos-roi-calculator {
    background: var(--bg-secondary, #f8fafc);
    border-radius: 16px;
    padding: 32px;
    margin: 24px 0;
}

/* Hero */
.bos-roi-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    background: linear-gradient(135deg, #003D59 0%, #005898 100%);
    border-radius: 14px;
    margin-bottom: 28px;
}
.bos-roi-hero-icon { font-size: 36px; line-height: 1; }
.bos-roi-hero-text h2 { color: #fff; font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.bos-roi-hero-text p  { color: rgba(255,255,255,0.75); font-size: 14px; margin: 0; }

/* Scenario selector */
.bos-scenario-selector {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
}
.bos-scenario-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-primary, #fff);
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: left;
}
.bos-scenario-btn.active {
    border-color: #003D59;
    background: rgba(0, 61, 89, 0.06);
}
.bos-scenario-btn i { width: 22px; height: 22px; color: #003D59; flex-shrink: 0; }
.bos-scenario-btn span { font-size: 14px; font-weight: 600; color: var(--text-primary, #111); display: block; }
.bos-scenario-btn small { font-size: 12px; color: var(--text-secondary, #6b7280); }

/* Main grid */
.bos-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}
@media (max-width: 900px) { .bos-main-grid { grid-template-columns: 1fr; } }

/* Panels */
.bos-inputs-panel,
.bos-summary-panel {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 24px;
}
.bos-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #111);
    margin: 0 0 20px;
}
.bos-panel-title i { width: 18px; height: 18px; color: #003D59; }

/* Input groups */
.bos-input-group { margin-bottom: 20px; }
.bos-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #111);
    margin-bottom: 8px;
}
.bos-sublabel {
    display: block;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 4px;
}
.bos-input-number {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary, #111);
    background: var(--bg-secondary, #f9fafb);
}
.bos-input-number:focus { outline: none; border-color: #003D59; }
.bos-input-sm {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-secondary, #f9fafb);
}
.bos-input-hint {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #9ca3af);
    margin-top: 4px;
}
.bos-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bos-input-with-slider { display: flex; flex-direction: column; gap: 8px; }
.bos-two-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Slider */
.bos-slider {
    width: 100%;
    accent-color: #003D59;
    cursor: pointer;
}
.bos-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted, #9ca3af);
    margin-top: 2px;
}
.bos-slider-value {
    font-size: 13px;
    font-weight: 600;
    color: #003D59;
    white-space: nowrap;
    min-width: 80px;
}

/* Zone selector */
.bos-zone-selector { display: flex; gap: 8px; flex-wrap: wrap; }
.bos-zone-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 10px;
    background: var(--bg-secondary, #f9fafb);
    cursor: pointer;
    transition: all 0.15s;
    min-width: 52px;
}
.bos-zone-btn.active {
    border-color: #003D59;
    background: rgba(0, 61, 89, 0.08);
}
.bos-zone-id { font-size: 16px; font-weight: 800; color: #003D59; }
.bos-zone-city { font-size: 10px; color: var(--text-secondary, #6b7280); text-align: center; }

/* Select */
.bos-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    font-size: 13px;
    background: var(--bg-secondary, #f9fafb);
    color: var(--text-primary, #111);
}

/* Scenario divider */
.bos-scenario-divider {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #003D59;
    border-top: 1px solid var(--border-color, #e5e7eb);
    padding-top: 14px;
    margin: 14px 0 16px;
}

/* Checkboxes */
.bos-checkboxes { display: flex; flex-direction: column; gap: 10px; }
.bos-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary, #111);
    cursor: pointer;
}
.bos-checkbox-label input[type="checkbox"] { accent-color: #003D59; width: 15px; height: 15px; }

/* Summary cards */
.bos-summary-cards { display: flex; flex-direction: column; gap: 12px; }
.bos-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
}
.bos-card-gray   { background: var(--bg-secondary, #f3f4f6); border-color: #e5e7eb; }
.bos-card-green  { background: rgba(16,185,129,0.08);  border-color: rgba(16,185,129,0.20); }
.bos-card-emerald{ background: rgba(5,150,105,0.08);   border-color: rgba(5,150,105,0.20); }
.bos-card-blue   { background: rgba(59,130,246,0.08);  border-color: rgba(59,130,246,0.20); }

.bos-summary-icon { font-size: 20px; flex-shrink: 0; }
.bos-summary-icon i { width: 22px; height: 22px; }
.bos-card-gray   .bos-summary-icon i { color: #6b7280; }
.bos-card-green  .bos-summary-icon i { color: #10b981; }
.bos-card-emerald .bos-summary-icon i { color: #059669; }
.bos-card-blue   .bos-summary-icon i { color: #3b82f6; }

.bos-summary-data { display: flex; flex-direction: column; }
.bos-summary-label { font-size: 11px; color: var(--text-secondary, #6b7280); margin-bottom: 2px; }
.bos-summary-value { font-size: 18px; font-weight: 800; color: var(--text-primary, #111); line-height: 1.1; }
.bos-summary-sub { font-size: 11px; color: var(--text-muted, #9ca3af); margin-top: 2px; }

/* Section title */
.bos-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #111);
    margin: 0 0 20px;
}
.bos-section-title i { width: 20px; height: 20px; color: #003D59; }

/* ---- 5 Pilares ---- */
.bos-pillars-section {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 24px;
}
.bos-pillars-grid { display: flex; flex-direction: column; gap: 16px; }
.bos-pillar {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 18px 20px;
    transition: box-shadow 0.15s;
}
.bos-pillar:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
.bos-pillar-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}
.bos-pillar-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bos-pillar-icon i { width: 20px; height: 20px; }
.bos-pillar-icon-1 { background: rgba(99,102,241,0.12); color: #6366f1; }
.bos-pillar-icon-2 { background: rgba(239,68,68,0.12);  color: #ef4444; }
.bos-pillar-icon-3 { background: rgba(245,158,11,0.12); color: #f59e0b; }
.bos-pillar-icon-4 { background: rgba(6,182,212,0.12);  color: #06b6d4; }
.bos-pillar-icon-5 { background: rgba(16,185,129,0.12); color: #10b981; }

.bos-pillar-info { flex: 1; }
.bos-pillar-num { font-size: 11px; font-weight: 700; color: var(--text-muted, #9ca3af); text-transform: uppercase; display: block; }
.bos-pillar-title { font-size: 14px; font-weight: 700; color: var(--text-primary, #111); margin: 2px 0 0; }
.bos-pillar-saving {
    font-size: 18px;
    font-weight: 800;
    color: #059669;
    white-space: nowrap;
    text-align: right;
    min-width: 100px;
}
.bos-pillar-desc { font-size: 13px; color: var(--text-secondary, #6b7280); line-height: 1.5; margin-bottom: 12px; }
.bos-pillar-bar {
    height: 6px;
    background: var(--bg-secondary, #e5e7eb);
    border-radius: 3px;
    overflow: hidden;
}
.bos-pillar-progress {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}
.bos-progress-1 { background: #6366f1; }
.bos-progress-2 { background: #ef4444; }
.bos-progress-3 { background: #f59e0b; }
.bos-progress-4 { background: #06b6d4; }
.bos-progress-5 { background: #10b981; }

/* ---- ROI Section ---- */
.bos-roi-section {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 24px;
}
.bos-investment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 24px;
    align-items: start;
    margin-bottom: 24px;
}
@media (max-width: 900px) { .bos-investment-grid { grid-template-columns: 1fr; } }

.bos-investment-card {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
}
.bos-investment-card h4 { font-size: 14px; font-weight: 700; margin: 0 0 14px; color: var(--text-primary, #111); }
.bos-inv-rows { display: flex; flex-direction: column; gap: 8px; }
.bos-inv-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
}
.bos-inv-row span:last-child { font-weight: 600; color: var(--text-primary, #111); }
.bos-inv-total {
    border-top: 1px solid var(--border-color, #e5e7eb);
    padding-top: 8px;
    margin-top: 4px;
    font-weight: 700;
    color: var(--text-primary, #111) !important;
}
.bos-inv-total span { font-weight: 700 !important; font-size: 15px !important; }

/* ROI Circle */
.bos-roi-circle-wrap { text-align: center; }
.bos-roi-circle {
    width: 110px; height: 110px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    border: 4px solid #e5e7eb;
    transition: border-color 0.3s;
}
.bos-circle-green  { border-color: #10b981; background: rgba(16,185,129,0.08); }
.bos-circle-blue   { border-color: #3b82f6; background: rgba(59,130,246,0.08); }
.bos-circle-gray   { border-color: #e5e7eb; background: var(--bg-secondary, #f8fafc); }

.bos-roi-years { font-size: 28px; font-weight: 800; color: var(--text-primary, #111); line-height: 1; }
.bos-circle-green .bos-roi-years { color: #059669; }
.bos-circle-blue  .bos-roi-years { color: #2563eb; }

.bos-roi-label { font-size: 12px; color: var(--text-secondary, #6b7280); margin-top: 3px; }
.bos-roi-caption { font-size: 12px; color: var(--text-secondary, #6b7280); margin: 0 0 10px; }
.bos-roi-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
}
.bos-badge-green { background: rgba(16,185,129,0.15); color: #059669; }
.bos-badge-blue  { background: rgba(59,130,246,0.15); color: #1d4ed8; }
.bos-badge-gray  { background: #f3f4f6; color: #6b7280; }

/* BOS Timeline */
.bos-timeline { padding-top: 8px; }
.bos-timeline-bar {
    height: 8px;
    background: var(--bg-secondary, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}
.bos-timeline-progress {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #3b82f6);
    border-radius: 4px;
    transition: width 0.6s ease;
}
.bos-timeline-labels {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.bos-timeline-point {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
}
.bos-timeline-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bos-dot-green  { background: #10b981; }
.bos-dot-emerald{ background: #059669; }
.bos-dot-blue   { background: #3b82f6; }

/* ---- Proyección 5 años ---- */
.bos-projection {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 24px;
}
.bos-projection-table { border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px; overflow: hidden; }
.bos-projection-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background: var(--bg-secondary, #f3f4f6);
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bos-projection-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    font-size: 13px;
    align-items: center;
    transition: background 0.1s;
}
.bos-projection-row:hover { background: var(--bg-secondary, #f8fafc); }
.bos-projection-row .saving { color: #059669; font-weight: 600; }
.bos-projection-row .accumulated { color: var(--text-primary, #111); font-weight: 600; }
.bos-projection-row .balance.positive { color: #059669; font-weight: 700; }
.bos-projection-row .balance.negative { color: #ef4444; font-weight: 700; }

/* ---- Green Premium ---- */
.bos-green-premium {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, rgba(5,150,105,0.08) 0%, rgba(16,185,129,0.05) 100%);
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 16px;
}
.bos-green-premium-icon { font-size: 32px; flex-shrink: 0; }
.bos-green-premium-text { flex: 1; }
.bos-green-premium-text h4 { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--text-primary, #111); }
.bos-green-premium-text p { font-size: 13px; color: var(--text-secondary, #6b7280); line-height: 1.5; margin: 0; }
.bos-green-premium-value {
    font-size: 24px;
    font-weight: 800;
    color: #059669;
    white-space: nowrap;
    text-align: center;
}

/* ---- Nota metodológica ---- */
.bos-methodology-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    line-height: 1.5;
}
.bos-methodology-note i { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: #9ca3af; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .bos-featured-content { flex-direction: column; }
    .bos-featured-right { display: none; }
    .bos-featured-title { font-size: 20px; }
    .bos-featured-card { padding: 24px; }
    .bos-scenario-selector { flex-direction: column; }
    .bos-pillar-saving { font-size: 15px; min-width: 80px; }
}

/* =====================================================
   LEAD IMPORT MODULE
   ===================================================== */

.lead-import-module {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Stepper */
.stepper {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    gap: 0;
}

.stepper .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.stepper .step.active,
.stepper .step.done { opacity: 1; }

.stepper .step .step-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #f3f4f6);
    border: 2px solid var(--border-color, #e5e7eb);
    color: var(--text-secondary, #6b7280);
    font-size: 16px;
    transition: all 0.2s;
}

.stepper .step.active .step-icon {
    background: var(--alfred-cobalto, #2563eb);
    border-color: var(--alfred-cobalto, #2563eb);
    color: #fff;
}

.stepper .step.done .step-icon {
    background: #059669;
    border-color: #059669;
    color: #fff;
}

.stepper .step .step-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
}

.stepper .step.active .step-label { color: var(--alfred-cobalto, #2563eb); font-weight: 600; }
.stepper .step.done .step-label { color: #059669; }

.stepper .step-connector {
    flex: 1;
    height: 2px;
    background: var(--border-color, #e5e7eb);
    margin: 0 8px;
    margin-bottom: 22px;
}

/* Step panel */
.step-panel { padding: 28px 32px; }
.step-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #111);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.step-desc {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    margin: 0 0 20px;
}

.step-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

/* File drop zone */
.file-drop-zone {
    border: 2px dashed var(--border-color, #d1d5db);
    border-radius: 12px;
    padding: 36px 24px;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
    background: var(--bg-secondary, #f9fafb);
}

.file-drop-zone:hover,
.file-drop-zone.drag-over {
    border-color: var(--alfred-cobalto, #2563eb);
    background: rgba(37, 99, 235, 0.04);
}

.file-drop-zone .drop-icon {
    width: 40px;
    height: 40px;
    color: var(--text-muted, #9ca3af);
    margin-bottom: 12px;
}

.file-drop-zone .drop-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #374151);
    margin: 0 0 4px;
}

.file-drop-zone .drop-hint {
    font-size: 12px;
    color: var(--text-muted, #9ca3af);
    margin: 0 0 16px;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 10px 14px;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 8px;
    margin-top: 10px;
    color: var(--text-primary, #374151);
}

.file-loading { color: var(--text-secondary, #6b7280); }

/* Preview table */
.preview-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;
}

.preview-stats { display: flex; align-items: center; gap: 8px; }
.preview-actions { display: flex; gap: 8px; }

.leads-table-wrapper {
    overflow-x: auto;
    max-height: 440px;
    overflow-y: auto;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
}

.leads-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.leads-preview-table thead th {
    background: var(--bg-secondary, #f9fafb);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.leads-preview-table tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color, #f3f4f6);
    color: var(--text-primary, #374151);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leads-preview-table tbody tr.row-deselected { opacity: 0.4; }
.leads-preview-table tbody tr:hover { background: var(--bg-secondary, #f9fafb); }

.lead-name { font-weight: 500; }
.lead-email { color: var(--alfred-cobalto, #2563eb); }
.badge-kam {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-secondary, #6b7280);
}
.notes-preview { color: var(--text-muted, #9ca3af); font-style: italic; }

/* KAM mapping */
.kam-mapping-table { display: flex; flex-direction: column; gap: 4px; }

.kam-mapping-header {
    display: grid;
    grid-template-columns: 1fr 2fr 100px;
    gap: 12px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #9ca3af);
}

.kam-mapping-row {
    display: grid;
    grid-template-columns: 1fr 2fr 100px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-primary, #fff);
}

.kam-name-cell { display: flex; align-items: center; }
.kam-owner-cell { }
.kam-count-cell { display: flex; justify-content: center; }

/* Import summary */
.import-summary-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.summary-item {
    background: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.summary-number {
    font-size: 28px;
    font-weight: 800;
    color: var(--alfred-cobalto, #2563eb);
    line-height: 1;
    margin-bottom: 4px;
}

.summary-label {
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
    font-weight: 500;
}

.import-event-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    background: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

/* Progress bar */
.progress-bar-wrapper {
    width: 100%;
    height: 8px;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--alfred-cobalto, #2563eb), #60a5fa);
    border-radius: 4px;
    transition: width 0.4s ease;
}

.progress-text {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    text-align: center;
    margin: 0;
}

/* Import results */
.import-results { margin-top: 16px; }

.results-title {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
}

.results-title.success { color: #059669; }
.results-title.has-errors { color: #d97706; }

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.result-card {
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.result-card.success { background: rgba(5,150,105,0.08); border: 1px solid rgba(5,150,105,0.2); }
.result-card.info { background: rgba(37,99,235,0.07); border: 1px solid rgba(37,99,235,0.15); }
.result-card.primary { background: rgba(124,58,237,0.07); border: 1px solid rgba(124,58,237,0.15); }
.result-card.error { background: rgba(220,38,38,0.07); border: 1px solid rgba(220,38,38,0.2); }

.result-number { font-size: 28px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.result-card.success .result-number { color: #059669; }
.result-card.info .result-number { color: var(--alfred-cobalto, #2563eb); }
.result-card.primary .result-number { color: #7c3aed; }
.result-card.error .result-number { color: #dc2626; }
.result-label { font-size: 11px; color: var(--text-secondary, #6b7280); font-weight: 500; }

.results-detail {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
}

.results-detail summary {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--bg-secondary, #f9fafb);
    user-select: none;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.results-table th {
    background: var(--bg-secondary, #f3f4f6);
    padding: 7px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #9ca3af);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.results-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color, #f3f4f6);
}

.results-table tr.row-error { background: rgba(220,38,38,0.04); }

/* Badge variants used in results */
.badge-success { background: #d1fae5; color: #065f46; }
.badge-info { background: #dbeafe; color: #1e40af; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-error { background: #fee2e2; color: #991b1b; }
.badge-muted { background: var(--bg-secondary, #f3f4f6); color: var(--text-muted, #9ca3af); }

.btn-lg { padding: 12px 24px; font-size: 15px; }

@media (max-width: 768px) {
    .stepper { flex-wrap: wrap; gap: 12px; }
    .stepper .step-connector { display: none; }
    .step-panel { padding: 20px 16px; }
    .kam-mapping-header, .kam-mapping-row { grid-template-columns: 1fr; }
    .import-summary-box { grid-template-columns: repeat(2, 1fr); }
}

/* ===================================================
   KAM DEAL FOLLOW-UP SYSTEM - Salud Deals
   =================================================== */

/* ── Layout ── */
.salud-deals-view { padding: 0; }

.salud-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Tabs ── */
.salud-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 24px 0;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    flex-wrap: wrap;
}

.salud-tab-btn {
    padding: 8px 16px;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
    border-radius: 6px 6px 0 0;
}

.salud-tab-btn:hover { color: var(--text-primary, #111827); background: var(--bg-secondary, #f9fafb); }
.salud-tab-btn.active { color: var(--alfred-cobalto, #1E40AF); border-bottom-color: var(--alfred-cobalto, #1E40AF); font-weight: 600; }

/* ── Summary bar ── */
.salud-summary-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: var(--bg-secondary, #f9fafb);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    font-size: 13px;
    flex-wrap: wrap;
}

.salud-summary-item { display: flex; align-items: center; gap: 6px; }

/* ── Risk dots ── */
.risk-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.risk-dot.risk-critical { background: #EF4444; }
.risk-dot.risk-warning  { background: #F59E0B; }
.risk-dot.risk-healthy  { background: #10B981; }
.risk-dot.risk-unknown  { background: #9CA3AF; }

/* ── Deal cards list ── */
.salud-deals-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px 24px 24px;
}

.salud-deal-card {
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.1s;
}
.salud-deal-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }

.salud-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.salud-card-left { flex: 1; min-width: 0; }
.salud-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }

.salud-card-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.salud-card-title strong { font-size: 14px; font-weight: 600; color: var(--text-primary, #111827); }

.salud-card-meta { font-size: 12px; color: var(--text-muted, #6b7280); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.salud-separator { color: var(--border-color, #d1d5db); }
.salud-amount { font-weight: 600; color: var(--text-primary, #111827); }

/* ── Score bar ── */
.salud-score { display: flex; align-items: center; gap: 8px; }
.salud-score-bar-wrap { width: 60px; height: 6px; background: #E5E7EB; border-radius: 3px; overflow: hidden; }
.salud-score-bar { height: 100%; border-radius: 3px; transition: width 0.3s; }
.salud-score-value { font-size: 12px; font-weight: 700; min-width: 24px; text-align: right; }

/* ── Close badges ── */
.salud-close-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}
.salud-close-badge.overdue { background: #FEF2F2; color: #EF4444; border: 1px solid #FECACA; }
.salud-close-badge.soon    { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }
.salud-close-badge.ok      { background: #F0FDF4; color: #059669; border: 1px solid #BBF7D0; }

/* ── Alert row ── */
.salud-alert-row {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.salud-alert-critical { background: #FEF2F2; color: #EF4444; }
.salud-alert-warning  { background: #FFFBEB; color: #D97706; }
.salud-alert-info     { background: #EFF6FF; color: #3B82F6; }

/* ── Card footer ── */
.salud-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.salud-activity-info { display: flex; gap: 16px; flex-wrap: wrap; }
.salud-info-item { display: flex; flex-direction: column; gap: 2px; }
.salud-info-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted, #9ca3af); font-weight: 600; }

/* ── Quick action buttons ── */
.salud-quick-actions { display: flex; gap: 6px; }
.salud-quick-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted, #6b7280);
    transition: all 0.15s;
    flex-shrink: 0;
}
.salud-quick-btn:hover { background: var(--alfred-cobalto, #1E40AF); color: white; border-color: var(--alfred-cobalto, #1E40AF); }
.salud-quick-btn .icon-inline { width: 14px; height: 14px; }

/* ── Engagement Timeline in deal detail ── */
.eng-timeline { display: flex; flex-direction: column; gap: 2px; }

.eng-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color, #f3f4f6);
}
.eng-item:last-child { border-bottom: none; }

.eng-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.eng-item-body { flex: 1; min-width: 0; }
.eng-item-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }

.eng-type-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

.eng-date { font-size: 12px; color: var(--text-muted, #9ca3af); }

.eng-meta-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.eng-pill {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 20px;
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-muted, #6b7280);
}

.eng-title { font-size: 13px; font-weight: 500; color: var(--text-primary, #111827); margin-bottom: 4px; }
.eng-body { font-size: 12px; color: var(--text-muted, #6b7280); line-height: 1.5; margin-top: 4px; }

/* ── Inicio Deal Health Widget ── */
.inicio-health-deals-list { display: flex; flex-direction: column; }

.inicio-health-deal {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color, #f3f4f6);
    cursor: pointer;
    transition: background 0.15s;
}
.inicio-health-deal:last-child { border-bottom: none; }
.inicio-health-deal:hover { background: var(--bg-hover, #f9fafb); }

.inicio-health-deal-main { flex: 1; min-width: 0; }
.inicio-health-deal-name { font-size: 13px; font-weight: 600; color: var(--text-primary, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inicio-health-deal-meta { font-size: 11px; color: var(--text-muted, #9ca3af); margin-top: 2px; }
.inicio-health-deal-alert { font-size: 11px; margin-top: 3px; font-weight: 500; }
.inicio-health-deal-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.inicio-health-risk-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; }

.inicio-health-mt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}
.inicio-health-mt-col {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #f3f4f6);
    border-radius: 10px;
    padding: 10px 12px;
}
.inicio-health-mt-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary, #374151);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.inicio-health-meeting {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-color, #f3f4f6);
    cursor: pointer;
}
.inicio-health-meeting:last-child { border-bottom: none; }
.inicio-health-meeting:hover .inicio-health-meeting-info { color: var(--alfred-indigo); }
.inicio-health-meeting-date {
    font-size: 11px;
    font-weight: 700;
    color: var(--alfred-indigo, #4F46E5);
    min-width: 44px;
    flex-shrink: 0;
    padding-top: 1px;
}
.inicio-health-meeting-info { flex: 1; min-width: 0; }

.inicio-health-task {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-color, #f3f4f6);
    cursor: pointer;
}
.inicio-health-task:last-child { border-bottom: none; }

@media (max-width: 500px) {
    .inicio-health-mt-grid { grid-template-columns: 1fr; }
}

/* ── Quick Action Modal ── */
.modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.5);
    display: none; align-items: center; justify-content: center;
    padding: 16px;
}
.modal-overlay.show {
    display: flex;
}

.modal-card {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    overflow: hidden;
}

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

.modal-close {
    width: 28px; height: 28px;
    border: none; background: var(--bg-secondary, #f3f4f6);
    border-radius: 6px; cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: #e5e7eb; }

.modal-body { padding: 20px 24px; }
.modal-footer {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
}

.modal-body .form-group { margin-bottom: 14px; }
.modal-body .form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary, #374151); margin-bottom: 6px; }
.modal-body .form-control {
    width: 100%; box-sizing: border-box;
    padding: 8px 12px; font-size: 13px;
    border: 1px solid var(--border-color, #d1d5db); border-radius: 8px;
    background: white; color: var(--text-primary, #111827);
    transition: border-color 0.15s;
}
.modal-body .form-control:focus { outline: none; border-color: var(--alfred-cobalto, #1E40AF); box-shadow: 0 0 0 3px rgba(30,64,175,0.1); }
.modal-body textarea.form-control { resize: vertical; min-height: 80px; }

/* ── Spinner animation for sync button ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .salud-header { flex-direction: column; }
    .salud-card-header { flex-direction: column; }
    .salud-card-right { flex-direction: row; align-items: center; }
    .salud-card-footer { flex-direction: column; align-items: flex-start; }
    .salud-quick-actions { margin-top: 8px; }
}

/* =====================================================
   Deal Merge Modal
   ===================================================== */
.merge-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: mergeOverlayIn 0.15s ease;
}
@keyframes mergeOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.merge-modal {
    background: #fff;
    border-radius: var(--radius-xl, 14px);
    width: 640px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
    animation: mergeModalIn 0.18s ease;
    overflow: hidden;
}
@keyframes mergeModalIn {
    from { transform: translateY(12px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.merge-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.merge-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    display: flex;
    align-items: center;
    gap: 8px;
}
.merge-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 6px;
    transition: background 0.15s;
}
.merge-modal-close:hover { background: var(--bg-secondary); color: var(--text-color); }
.merge-modal-body {
    padding: 18px 22px;
    overflow-y: auto;
    flex: 1;
}
.merge-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: var(--bg-secondary, #f9fafb);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* Search */
.merge-search-wrap {
    position: relative;
    margin-bottom: 12px;
}
.merge-search-input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.merge-search-input:focus { border-color: var(--alfred-indigo); }
.merge-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    width: 16px;
    height: 16px;
}
.merge-search-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Results list */
.merge-search-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 4px;
}
.merge-deal-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    gap: 10px;
}
.merge-deal-card:hover { border-color: var(--alfred-indigo); background: #f5f7ff; }
.merge-deal-card.selected {
    border-color: var(--alfred-indigo);
    background: #eef2ff;
}
.merge-deal-card-left { min-width: 0; flex: 1; }
.merge-deal-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.merge-deal-card-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.merge-deal-card-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.merge-select-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--alfred-indigo);
    color: #fff;
    font-weight: 600;
}
.merge-no-results {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Comparison */
.merge-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}
.merge-comparison-card {
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}
.merge-comparison-card-header {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 5px;
}
.merge-comparison-card.primary .merge-comparison-card-header {
    background: #EEF2FF;
    color: var(--alfred-indigo);
    border-bottom: 1px solid #C7D2FE;
}
.merge-comparison-card.secondary .merge-comparison-card-header {
    background: #FEF2F2;
    color: #DC2626;
    border-bottom: 1px solid #FECACA;
}
.merge-comparison-card-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.merge-comparison-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.merge-comparison-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.merge-comparison-value {
    font-size: 12px;
    color: var(--text-color);
    font-weight: 500;
}

/* Warning banner */
.merge-warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    border-radius: var(--radius-md, 8px);
    margin-top: 14px;
    font-size: 12px;
    color: #92400e;
    line-height: 1.4;
}
.merge-warning-banner i { flex-shrink: 0; margin-top: 1px; }

/* Danger confirm button */
.btn-merge-confirm {
    padding: 9px 18px;
    background: #DC2626;
    color: #fff;
    border: none;
    border-radius: var(--radius-md, 8px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}
.btn-merge-confirm:hover { background: #B91C1C; }
.btn-merge-confirm:disabled { background: #9CA3AF; cursor: not-allowed; }

@media (max-width: 640px) {
    .merge-comparison { grid-template-columns: 1fr; }
    .merge-modal { max-height: 100vh; border-radius: 0; }
}

/* =====================================================
   Outlook Email Integration — Deal detail email section
   ===================================================== */
.deal-email-section {
    margin-top: 0;
}
.deal-email-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.deal-email-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.deal-email-section-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.deal-email-btn {
    font-size: 12px;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    background: #fff;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: border-color 0.15s, color 0.15s;
}
.deal-email-btn:hover { border-color: var(--alfred-indigo); color: var(--alfred-indigo); }
.deal-email-btn-primary {
    background: var(--alfred-indigo);
    color: #fff;
    border-color: var(--alfred-indigo);
}
.deal-email-btn-primary:hover { background: #3730a3; color: #fff; border-color: #3730a3; }

/* Connect prompt */
.deal-email-connect-prompt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #F5F7FF;
    border: 1px dashed #C7D2FE;
    border-radius: var(--radius-md, 8px);
    font-size: 13px;
    color: var(--text-secondary);
}
.deal-email-connect-prompt i { color: var(--alfred-indigo); flex-shrink: 0; }
.deal-email-connect-prompt p { margin: 0; flex: 1; }

/* Email cards */
.deal-email-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.deal-email-card {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    gap: 4px;
}
.deal-email-card:hover { border-color: #A5B4FC; box-shadow: 0 1px 4px rgba(99,102,241,0.08); }
.deal-email-card.is-linked {
    border-left: 3px solid var(--alfred-indigo);
    background: #FAFAFE;
}
.deal-email-subject {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.deal-email-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}
.deal-email-meta-sep { color: var(--border-color); }
.deal-email-preview {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.deal-email-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.deal-email-action-btn {
    font-size: 11px;
    padding: 3px 8px;
    border: 1px solid var(--border-color);
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 3px;
    transition: border-color 0.15s, color 0.15s;
    text-decoration: none;
}
.deal-email-action-btn:hover { border-color: var(--alfred-indigo); color: var(--alfred-indigo); }
.deal-email-action-btn.link-btn { color: var(--alfred-indigo); border-color: #A5B4FC; }
.deal-email-action-btn.unlink-btn { color: #DC2626; border-color: #FECACA; }
.deal-email-action-btn.unlink-btn:hover { background: #FEF2F2; }
.deal-email-action-btn.confirm-btn { color: #059669; border-color: #A7F3D0; }
.deal-email-action-btn.confirm-btn:hover { background: #ECFDF5; }

/* Auto-link badge displayed inside linked email cards */
.deal-email-card-top {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.deal-email-card-top .deal-email-subject { flex: 1; min-width: 0; }
.deal-email-auto-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 20px;
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #A7F3D0;
    white-space: nowrap;
}
.deal-email-auto-badge.is-unreviewed {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FDE68A;
}
.deal-email-card.needs-review {
    border-left: 3px solid #F59E0B;
    background: #FFFBEB;
}

/* Loading / empty states */
.deal-email-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    font-size: 12px;
    color: var(--text-muted);
}
/* Contacts strip above email list */
.deal-email-contacts-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: #F5F7FF;
    border: 1px solid #E0E7FF;
    border-radius: var(--radius-md, 8px);
    margin-bottom: 8px;
    font-size: 11px;
}
.deal-email-contacts-label {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--text-muted);
    padding-top: 2px;
}
.deal-email-contacts-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.deal-email-contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #fff;
    border: 1px solid #C7D2FE;
    border-radius: 20px;
    font-size: 11px;
    color: var(--alfred-indigo, #6366F1);
    font-weight: 500;
}
.deal-email-contacts-empty {
    background: #FFF7ED;
    border-color: #FED7AA;
    color: #92400E;
    gap: 6px;
    align-items: center;
    font-size: 11px;
}
.deal-email-contacts-empty i { flex-shrink: 0; color: #D97706; }
.deal-email-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}

.deal-email-empty {
    padding: 12px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md, 8px);
}

/* Email search modal */
.email-search-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.email-search-modal {
    background: #fff;
    border-radius: var(--radius-xl, 14px);
    width: 600px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    overflow: hidden;
}
.email-search-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.email-search-modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    display: flex;
    align-items: center;
    gap: 7px;
}
.email-search-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.email-search-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 6px;
    transition: background 0.15s;
}
.email-search-modal-close:hover { background: var(--bg-secondary); color: var(--text-color); }
.email-search-input-wrap {
    display: flex;
    gap: 8px;
}
.email-search-modal-input {
    flex: 1;
    padding: 8px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    font-size: 13px;
    outline: none;
}
.email-search-modal-input:focus { border-color: var(--alfred-indigo); }

@media (max-width: 640px) {
    .email-search-modal { max-height: 100vh; border-radius: 0; }
    .deal-email-meta { flex-direction: column; align-items: flex-start; }
}

/* ─── Deal Contacts Section ─────────────────────────────────────────────────── */
.deal-contacts-section {
    padding: 14px 16px;
}
.deal-contacts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.deal-contacts-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}
.deal-contacts-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--alfred-indigo, #6366F1);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 20px;
}
.deal-contacts-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    font-size: 12px;
    color: var(--text-muted);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md, 8px);
}

/* Contact list rows */
.deal-contact-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.deal-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    background: #fff;
    transition: border-color 0.15s;
}
.deal-contact-row:hover { border-color: #A5B4FC; }
.deal-contact-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366F1, #818CF8);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.deal-contact-info {
    flex: 1;
    min-width: 0;
}
.deal-contact-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.deal-contact-meta {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.deal-contact-email {
    font-size: 11px;
    color: var(--alfred-indigo, #6366F1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.deal-contact-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.deal-contact-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.deal-contact-action-btn:hover {
    background: #FEF2F2;
    border-color: #FCA5A5;
    color: #DC2626;
}

/* Add Contact Modal */
.add-contact-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.add-contact-modal {
    background: #fff;
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.add-contact-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 0;
}
.add-contact-modal-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}
.add-contact-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 18px 0;
    border-bottom: 1px solid var(--border-color);
}
.add-contact-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    margin-bottom: -1px;
    transition: color 0.15s;
}
.add-contact-tab.active {
    color: var(--alfred-indigo, #6366F1);
    border-bottom-color: var(--alfred-indigo, #6366F1);
    font-weight: 600;
}
.add-contact-tab:hover:not(.active) { color: var(--text-color); background: var(--bg-secondary); }
.add-contact-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--alfred-indigo, #6366F1);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 20px;
}
.add-contact-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.add-contact-search-wrap { margin-bottom: 6px; }
.add-contact-results-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.add-contact-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    background: #fff;
}
.add-contact-result-row:hover { border-color: #A5B4FC; background: #FAFAFE; }

/* =====================================================
   EMS EPBD — DASHBOARD MOCKUP
   ===================================================== */

.ems-epbd-wrapper { margin-top: 32px; border-radius: 20px; overflow: hidden; border: 2px solid #BBDEFB; background: #E3F2FD; }
.ems-epbd-label { display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: linear-gradient(135deg, #0D2B5E 0%, #1565C0 100%); color: white; flex-wrap: wrap; }
.ems-epbd-dashboard { background: var(--bg-secondary); font-family: var(--font-primary); }

/* Top Bar */
.ems-topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; background: white; border-bottom: 1px solid #E2E8F0; }
.ems-topbar-left { display: flex; align-items: center; gap: 0; }
.ems-logo-area { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ems-topbar-icon { height: 22px; object-fit: contain; }
.ems-product-name { font-size: 14px; font-weight: 700; color: #1565C0; }
.ems-topbar-divider { width: 1px; height: 20px; background: #E2E8F0; margin: 0 6px; }
.ems-building-name { font-size: 13px; font-weight: 600; color: #1E293B; }
.ems-building-meta { font-size: 11px; color: #64748B; margin-left: 4px; }
.ems-topbar-right { display: flex; align-items: center; gap: 14px; }
.ems-topbar-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #475569; font-weight: 500; }
.ems-topbar-date { font-size: 11px; color: #64748B; }
.ems-topbar-time { font-size: 13px; font-weight: 600; color: #1E293B; }
.ems-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; animation: blink 1.4s infinite; }

/* KPI Row */
.ems-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: #E2E8F0; border-bottom: 1px solid #E2E8F0; }
.ems-kpi-card { background: white; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.ems-kpi-card.ems-kpi-class { align-items: flex-start; }
.ems-kpi-label { font-size: 11px; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.05em; }
.ems-kpi-value { font-size: 22px; font-weight: 800; color: #1E293B; line-height: 1; }
.ems-kpi-unit { font-size: 11px; font-weight: 500; color: #64748B; }
.ems-kpi-progress { height: 5px; background: #F1F5F9; border-radius: 3px; overflow: hidden; }
.ems-kpi-bar { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.ems-kpi-sub { font-size: 10px; color: #94A3B8; }
.ems-class-display { display: flex; align-items: center; gap: 8px; }
.ems-class-badge { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; color: white; }
.ems-class-current { opacity: 1; }
.ems-class-target { opacity: 0.75; }
.ems-class-arrow { font-size: 14px; color: #94A3B8; }

/* Main Layout */
.ems-main { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #E2E8F0; }
.ems-panel { background: white; padding: 16px; }
.ems-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.ems-panel-header h3 { font-size: 13px; font-weight: 700; color: #1E293B; margin: 0; display: flex; align-items: center; gap: 6px; }
.ems-panel-header h3 svg { width: 15px; height: 15px; color: #64748B; }
.ems-panel-meta { font-size: 11px; color: #64748B; }
.ems-panel-subheader { margin: 16px 0 10px; }
.ems-panel-subheader h4 { font-size: 12px; font-weight: 600; color: #475569; margin: 0; display: flex; align-items: center; gap: 5px; }
.ems-panel-subheader h4 svg { width: 13px; height: 13px; }

/* Energy Vectors */
.ems-vector-list { display: flex; flex-direction: column; gap: 10px; }
.ems-vector-row { display: grid; grid-template-columns: 90px 1fr 64px 36px 18px; align-items: center; gap: 8px; }
.ems-vector-label { font-size: 12px; font-weight: 600; color: #475569; }
.ems-vector-bar-wrap { position: relative; }
.ems-vector-bar-bg { height: 10px; background: #F1F5F9; border-radius: 5px; overflow: visible; position: relative; }
.ems-vector-bar-fill { height: 100%; border-radius: 5px; transition: width 0.6s; position: relative; z-index: 1; }
.ems-vector-limit-line { position: absolute; top: -3px; width: 2px; height: 16px; background: #EF4444; border-radius: 1px; z-index: 2; }
.ems-vector-value { font-size: 11px; font-weight: 600; color: #1E293B; text-align: right; }
.ems-vector-pct { font-size: 11px; font-weight: 700; text-align: right; }
.ems-vector-status { font-size: 13px; text-align: center; }
.ems-limit-legend { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: #94A3B8; }
.ems-limit-line-sample { display: inline-block; width: 2px; height: 14px; background: #EF4444; border-radius: 1px; }

/* Monthly Chart */
.ems-monthly-chart { display: flex; align-items: flex-end; gap: 3px; height: 56px; padding: 0 2px; }
.ems-month-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; justify-content: flex-end; }
.ems-month-bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 4px; transition: height 0.4s; }
.ems-month-label { font-size: 9px; color: #94A3B8; font-weight: 500; }

/* Compliance Panel */
.ems-compliance-summary { display: flex; gap: 10px; }
.ems-comp-stat { font-size: 13px; font-weight: 700; }
.ems-compliance-overall { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ems-overall-label { font-size: 11px; font-weight: 600; color: #64748B; white-space: nowrap; }
.ems-overall-bar-wrap { flex: 1; height: 8px; background: #F1F5F9; border-radius: 4px; overflow: hidden; }
.ems-overall-bar { height: 100%; background: linear-gradient(90deg, #1565C0, #22C55E); border-radius: 4px; }
.ems-overall-pct { font-size: 13px; font-weight: 800; color: #1565C0; white-space: nowrap; }
.ems-compliance-list { display: flex; flex-direction: column; gap: 9px; max-height: 380px; overflow-y: auto; padding-right: 4px; }
.ems-compliance-item { border: 1px solid #F1F5F9; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.ems-compliance-top { display: flex; align-items: center; gap: 8px; }
.ems-compliance-icon { font-size: 15px; }
.ems-compliance-name { flex: 1; font-size: 12px; font-weight: 600; color: #1E293B; }
.ems-compliance-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.ems-compliance-detail { font-size: 11px; color: #64748B; padding-left: 23px; }
.ems-compliance-bar-wrap { height: 4px; background: #F1F5F9; border-radius: 2px; overflow: hidden; margin-top: 2px; }
.ems-compliance-bar { height: 100%; border-radius: 2px; transition: width 0.5s; }

/* Energy Passport */
.ems-passport-panel { border-top: 1px solid #E2E8F0; }
.ems-passport-body { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.ems-passport-info { display: flex; flex-direction: column; gap: 6px; }
.ems-passport-field { display: flex; justify-content: space-between; padding: 6px 10px; background: #F8FAFC; border-radius: 6px; gap: 12px; }
.ems-pf-label { font-size: 11px; color: #64748B; font-weight: 500; }
.ems-pf-value { font-size: 12px; font-weight: 700; color: #1E293B; text-align: right; }
.ems-passport-scale { display: flex; flex-direction: column; gap: 4px; }
.ems-class-row { display: grid; grid-template-columns: 28px 1fr 110px auto auto; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px; }
.ems-class-row-current { background: #FFF9C4; border: 1px solid #F59E0B; }
.ems-class-row-target { background: #DCFCE7; border: 1px solid #22C55E; }
.ems-class-letter { width: 28px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: white; }
.ems-class-bar-bg { height: 14px; background: #F1F5F9; border-radius: 4px; overflow: hidden; position: relative; }
.ems-class-bar-fill { height: 100%; border-radius: 4px; }
.ems-class-range { font-size: 10px; color: #64748B; font-weight: 500; text-align: right; white-space: nowrap; }
.ems-class-pin { font-size: 10px; font-weight: 700; white-space: nowrap; }
.ems-pin-current { color: #D97706; }
.ems-pin-target { color: #16A34A; }

/* Bottom Bar */
.ems-bottombar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: #F8FAFC; border-top: 1px solid #E2E8F0; flex-wrap: wrap; gap: 10px; }
.ems-bottombar-info { font-size: 11px; color: #94A3B8; display: flex; align-items: center; gap: 6px; }
.ems-bottombar-info svg { width: 12px; height: 12px; }
.ems-bottombar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ems-action-btn { padding: 6px 14px; border: 1px solid #CBD5E1; border-radius: 8px; background: white; font-size: 12px; font-weight: 600; color: #475569; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all 0.15s; }
.ems-action-btn:hover { border-color: #1565C0; color: #1565C0; background: #EFF6FF; }
.ems-action-btn svg { width: 13px; height: 13px; }
.ems-action-primary { background: #1565C0; color: white; border-color: #1565C0; }
.ems-action-primary:hover { background: #0D47A1; border-color: #0D47A1; color: white; }

/* Responsive */
@media (max-width: 1024px) {
    .ems-kpi-row { grid-template-columns: repeat(3, 1fr); }
    .ems-main { grid-template-columns: 1fr; }
    .ems-passport-body { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .ems-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .ems-vector-row { grid-template-columns: 70px 1fr 52px; }
    .ems-vector-pct, .ems-vector-status { display: none; }
    .ems-epbd-label { flex-direction: column; align-items: flex-start; }
    .ems-epbd-label .mockup-subtitle { margin-left: 0; }
    .ems-class-row { grid-template-columns: 28px 1fr 80px auto; }
}
@media (max-width: 480px) {
    .ems-kpi-row { grid-template-columns: 1fr 1fr; }
    .ems-compliance-list { max-height: none; }
}

/* ═══════════════════════════════════════════════════════════════
   SEGUIMIENTO DE RECORDATORIOS
   ═══════════════════════════════════════════════════════════════ */

.seg-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 4px 0 32px;
}

/* KPI cards */
.seg-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.seg-kpi-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--shadow-sm);
}

.seg-kpi-card.seg-kpi-green { border-top: 3px solid var(--color-success); }
.seg-kpi-card.seg-kpi-blue  { border-top: 3px solid var(--color-indigo); }
.seg-kpi-card.seg-kpi-orange { border-top: 3px solid var(--color-warning); }

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

.seg-kpi-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--alfred-cobalto);
    line-height: 1.1;
}

.seg-kpi-green .seg-kpi-value { color: var(--color-success-dark); }
.seg-kpi-blue  .seg-kpi-value { color: var(--color-indigo); }
.seg-kpi-orange .seg-kpi-value { color: var(--color-warning-dark); }

.seg-kpi-sub {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Filters */
.seg-filters {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    box-shadow: var(--shadow-sm);
}

.seg-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.seg-filter-group label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}

.seg-filter-group input[type="date"],
.seg-filter-group select {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-color);
    background: var(--bg-color);
    min-width: 140px;
}

.seg-filter-group select { min-width: 160px; }

/* Bulk action bar */
.seg-bulk-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--color-indigo-bg);
    border: 1px solid var(--color-indigo);
    border-radius: var(--radius-lg);
    font-size: 13px;
    color: var(--alfred-cobalto);
}

.btn-reminder-bulk {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--alfred-cobalto);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-reminder-bulk:hover { background: var(--alfred-indigo); }

.seg-bulk-clear {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}
.seg-bulk-clear:hover { background: var(--border-color); }

/* Table */
.seg-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.seg-total-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.seg-select-all-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.seg-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    font-size: 13px;
}

.seg-table thead tr {
    background: var(--bg-secondary);
}

.seg-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--border-color);
}

.seg-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color-subtle, #f3f4f6);
    vertical-align: middle;
}

.seg-table tr:last-child td { border-bottom: none; }

/* Batch header row */
.seg-batch-header td {
    padding: 8px 14px;
    background: linear-gradient(90deg, var(--bg-secondary) 0%, transparent 100%);
    border-top: 2px solid var(--border-color);
}

.seg-batch-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.seg-batch-label .icon-inline {
    width: 13px;
    height: 13px;
    color: var(--alfred-cobalto);
}

.seg-batch-stats {
    background: var(--alfred-cobalto);
    color: #fff;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 100px;
    font-weight: 700;
}

.seg-batch-msg {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400px;
}

/* Row states */
.seg-row-pending td {
    background: var(--color-warning-bg);
}

.seg-row-pending:hover td {
    background: #fef3c7;
}

.seg-row:hover td {
    background: var(--bg-secondary);
}

/* Cell types */
.seg-deal-link {
    color: var(--alfred-cobalto);
    text-decoration: none;
    font-weight: 500;
}
.seg-deal-link:hover { text-decoration: underline; }

.seg-owner-cell {
    color: var(--text-secondary);
    white-space: nowrap;
}

.seg-date-cell {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.seg-action-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 280px;
}

.seg-action-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-color);
}

.seg-action-item .icon-inline {
    width: 12px;
    height: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.seg-hs-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 6px;
    background: #E8F4FD;
    color: #0369a1;
    border: 1px solid #BAE6FD;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

.seg-hs-badge .icon-inline {
    width: 10px;
    height: 10px;
    color: #0369a1;
}

.seg-time-cell {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Status badges */
.seg-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.seg-badge-pending {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
    border: 1px solid #fde68a;
}

.seg-badge-responded {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
    border: 1px solid #a7f3d0;
}

.seg-badge-expired {
    background: var(--bg-secondary);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

/* Empty state */
.seg-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    color: var(--text-muted);
    font-size: 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

/* Pagination */
.seg-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0;
}

.seg-page-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s;
}

.seg-page-btn:hover:not([disabled]) {
    background: var(--alfred-cobalto);
    color: #fff;
    border-color: var(--alfred-cobalto);
}

.seg-page-btn.active {
    background: var(--alfred-cobalto);
    color: #fff;
    border-color: var(--alfred-cobalto);
    font-weight: 700;
}

.seg-page-btn[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
}

.seg-page-ellipsis {
    color: var(--text-muted);
    padding: 0 4px;
}

/* Responsive */
@media (max-width: 900px) {
    .seg-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .seg-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .seg-filter-group input[type="date"],
    .seg-filter-group select {
        min-width: unset;
        width: 100%;
    }

    .seg-action-cell { max-width: 160px; }

    .seg-table th:nth-child(4),
    .seg-table td:nth-child(4),
    .seg-table th:nth-child(7),
    .seg-table td:nth-child(7) { display: none; }
}

@media (max-width: 600px) {
    .seg-kpi-row { grid-template-columns: 1fr 1fr; }
    .seg-kpi-value { font-size: 24px; }

    .seg-table th:nth-child(3),
    .seg-table td:nth-child(3) { display: none; }
}

/* ════════════════════════════════════════════════════════════
   SEGUIMIENTO SUB-TABS
   ════════════════════════════════════════════════════════════ */

.seg-subtabs {
    display: flex;
    gap: 8px;
    padding: 0 0 16px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.seg-subtab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 100px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.seg-subtab-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(59, 130, 246, 0.05);
}

.seg-subtab-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.seg-subtab-btn .icon-inline {
    width: 14px;
    height: 14px;
}

/* Purple KPI variant */
.seg-kpi-card.seg-kpi-purple {
    border-left: 3px solid #7c3aed;
}
.seg-kpi-card.seg-kpi-purple .seg-kpi-value {
    color: #7c3aed;
}

/* ════════════════════════════════════════════════════════════
   ACTIVIDAD DEALS VIEW
   ════════════════════════════════════════════════════════════ */

/* Update type badges */
.act-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.act-type-stage {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.act-type-date {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
}

.act-type-amount {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

.act-type-comment {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

/* Origin badges */
.act-origin-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.act-origin-hs {
    background: rgba(14, 165, 233, 0.1);
    color: #0369a1;
}

.act-origin-bo {
    background: rgba(107, 114, 128, 0.1);
    color: #4b5563;
}

.act-origin-badge .icon-inline {
    width: 11px;
    height: 11px;
}

/* Change value display */
.act-change-cell {
    font-size: 13px;
    max-width: 280px;
}

.act-change-val {
    color: var(--text-secondary);
    text-decoration: line-through;
    font-size: 12px;
}

.act-change-arrow {
    color: var(--text-muted);
    margin: 0 4px;
    font-size: 12px;
}

.act-change-comment {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 12px;
}

/* Responsive */
@media (max-width: 900px) {
    .act-change-cell { max-width: 160px; }
}

@media (max-width: 600px) {
    .seg-subtabs { flex-wrap: wrap; }
    .seg-subtab-btn { font-size: 12px; padding: 6px 12px; }
}

/* =====================================================
   Leads Web — Drawer
   ===================================================== */
.leads-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 61, 89, 0.45);
    z-index: 1100;
    display: flex;
    justify-content: flex-end;
    animation: fadeIn 0.2s ease;
}
.leads-drawer-panel {
    width: min(560px, 95vw);
    height: 100%;
    background: var(--surface, #fff);
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.25s ease;
}
.leads-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color, #E5E7EB);
    flex-shrink: 0;
}
.leads-drawer-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--alfred-cobalto, #003D59);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leads-drawer-close {
    background: var(--bg-tertiary, #F3F4F6);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary, #6B7280);
}
.leads-drawer-close:hover {
    background: var(--bg-quaternary, #E5E7EB);
    color: var(--text-primary, #111827);
}
.leads-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}
.leads-role-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    vertical-align: middle;
    margin-left: 4px;
}

/* =====================================================
   Email Marketing Module
   ===================================================== */

.marketing-module {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mk-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    flex-wrap: wrap;
}

.mk-header-left { flex: 1; min-width: 0; }
.mk-title { font-size: 20px; font-weight: 700; margin: 0; color: var(--text-primary); }
.mk-subtitle { font-size: 13px; color: var(--text-muted); margin: 2px 0 0; }
.mk-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* KPI strip */
.mk-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 768px) { .mk-kpis { grid-template-columns: repeat(2, 1fr); } }

.mk-kpi {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mk-kpi-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.mk-kpi-value { font-size: 24px; font-weight: 700; color: var(--text-primary); }

/* Stats grid */
.mk-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}
.mk-stat-card {
    background: var(--bg-secondary, #f9fafb);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mk-stat-card.mk-stat-highlight { background: #ecfdf5; }
.mk-stat-label { font-size: 12px; color: var(--text-muted); }
.mk-stat-value { font-size: 26px; font-weight: 700; color: var(--text-primary); }

/* Filters */
.mk-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    flex-wrap: wrap;
}
.mk-filter-group { display: flex; align-items: center; gap: 8px; }
.mk-filter-label { font-size: 13px; color: var(--text-muted); white-space: nowrap; }

/* Tabs */
.mk-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
}
.mk-tab {
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.mk-tab:hover { color: var(--text-primary); }
.mk-tab.active { color: var(--color-primary, #10B981); border-bottom-color: var(--color-primary, #10B981); }
.mk-tab-panel { padding: 24px; }

/* Wizard */
.wizard-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.wizard-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}
.wizard-step.active .ws-num { background: var(--color-primary, #10B981); color: #fff; }
.wizard-step.done .ws-num { background: #ecfdf5; color: var(--color-primary, #10B981); border-color: var(--color-primary, #10B981); }
.ws-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--bg-secondary, #f3f4f6);
    border: 1.5px solid var(--border-color, #d1d5db);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.wizard-step.active .ws-label { color: var(--text-primary); font-weight: 600; }
.wizard-divider { width: 24px; height: 1px; background: var(--border-color, #d1d5db); flex-shrink: 0; }
@media (max-width: 768px) { .wizard-steps { display: none; } }

.mk-wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

/* Review grid */
.mk-review-grid { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px; overflow: hidden; }
.mk-review-row {
    display: flex;
    padding: 14px 20px;
    gap: 24px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    font-size: 14px;
}
.mk-review-row:last-child { border-bottom: none; }
.mk-review-row > span { min-width: 140px; color: var(--text-muted); }

/* Modal */
.mk-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
}
.mk-modal {
    background: var(--bg-primary, #fff);
    border-radius: 16px;
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.mk-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.mk-modal-header h3 { margin: 0; font-size: 17px; }
.btn-close-modal {
    background: none; border: none; cursor: pointer;
    font-size: 22px; color: var(--text-muted); line-height: 1;
    padding: 0 4px;
}
.mk-modal-body { padding: 24px; flex: 1; overflow-y: auto; }
.mk-modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

/* Segment filter box */
.mk-segment-filter { border: 1px solid var(--border-color, #e5e7eb) !important; }

/* form-grid helpers */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .form-grid-3 { grid-template-columns: 1fr; } }

.form-input-sm { padding: 7px 10px; font-size: 13px; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-danger { background: #ef4444; color: #fff; border-color: #ef4444; }
.btn-danger:hover { background: #dc2626; }
.btn-back { font-size: 13px; }
.btn-view { padding: 4px 8px; }


/* Phone click-to-call links */
.phone-link {
    color: var(--primary, #3B82F6);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.phone-link:hover {
    background-color: rgba(59, 130, 246, 0.1);
    text-decoration: underline;
}

.phone-link:active {
    opacity: 0.8;
}

/* For mobile devices, enhance visibility */
@media (max-width: 768px) {
    .phone-link {
        padding: 4px 8px;
        border-radius: 6px;
        font-weight: 500;
    }
    
    .phone-link:hover {
        background-color: rgba(59, 130, 246, 0.15);
    }
}

/* Specific styles for phone in different contexts */
.person-phone.phone-link,
.stakeholder-phone.phone-link,
.phone-mobile.phone-link,
.contact-phones .phone-link {
    display: inline-flex;
    word-break: break-all;
}

/* Phone field toggle (link + edit button) */
.phone-field-wrapper { display: flex; flex-direction: column; gap: 4px; }
.phone-field-display { display: flex; align-items: center; gap: 6px; }
.phone-field-edit-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
}
.phone-field-edit-btn:hover { background: rgba(0,0,0,.06); color: var(--text-primary); }

/* ─────────────────────────────────────────────────────────
   DEAL QUOTES — Pestaña Presupuestos BC
   ───────────────────────────────────────────────────────── */

/* Header de la sección */
.deal-quotes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.deal-quotes-sum {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
}
.deal-quotes-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

/* Tabla principal */
.deal-quotes-table-wrap { overflow-x: auto; }
.deal-quotes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.deal-quotes-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    padding: 0 10px 8px;
    border-bottom: 1px solid var(--border-light);
}
.deal-quotes-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: top;
}
.deal-quote-row:last-child td { border-bottom: none; }
.deal-quote-row:hover td { background: var(--bg-hover, rgba(0,0,0,.02)); }

/* Código y metadata del presupuesto */
.deal-quote-code { display: flex; flex-direction: column; gap: 2px; min-width: 100px; }
.deal-quote-number { font-weight: 600; color: var(--text-primary); }
.deal-quote-date { font-size: 11px; color: var(--text-muted); }
.deal-quote-status-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    text-transform: capitalize;
}

/* Categorías */
.deal-quote-cats { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 140px; }
.deal-quote-cat-chip {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(59,130,246,.10);
    color: var(--primary);
}
.deal-quote-edit-cats-btn, .deal-quote-edit-amount-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
}
.deal-quote-edit-cats-btn:hover, .deal-quote-edit-amount-btn:hover {
    background: rgba(0,0,0,.06);
    color: var(--text-primary);
}

/* Importe */
.deal-quote-amount { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.deal-quote-amount-display { font-weight: 600; }
.deal-quote-inline-input { width: 110px; }

/* Origen */
.deal-quote-source-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
}
.deal-quote-source-badge.bc { background: #DBEAFE; color: #1D4ED8; }
.deal-quote-source-badge.manual { background: #FEF3C7; color: #92400E; }

/* Editor de categorías inline */
.deal-quote-cats-editor { padding: 4px 0; }
.deal-quote-cats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 4px;
}
.deal-quote-cat-check {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}
.deal-quote-cat-check input { cursor: pointer; }

/* ─── Modal Añadir Presupuesto (legacy, mantener por compat) ─── */
.deal-quote-modal-content {
    width: min(720px, 96vw);
    max-height: 85vh;
    overflow-y: auto;
}
.deal-quote-stage-msg {
    background: #FEF9C3;
    border: 1px solid #FDE047;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}
.deal-quote-picker-table-wrap { overflow-x: auto; max-height: 320px; overflow-y: auto; border: 1px solid var(--border-light); border-radius: 6px; }
.deal-quote-picker-table-wrap .deal-quotes-table th,
.deal-quote-picker-table-wrap .deal-quotes-table td { padding: 8px 10px; }

/* ─── Drawer Añadir Presupuesto (lateral, ancho 640px) ─── */
.deal-quote-drawer-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 61, 89, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1200;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.deal-quote-drawer-overlay.open { opacity: 1; }

.deal-quote-drawer {
    width: 100%;
    max-width: 640px;
    height: 100%;
    background: var(--bg-primary, #fff);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(0,0,0,0.18);
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.deal-quote-drawer-narrow { max-width: 460px; }
.deal-quote-drawer-overlay.open .deal-quote-drawer { transform: translateX(0); }

.deal-quote-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: linear-gradient(135deg, var(--alfred-cobalto, #003d59) 0%, var(--color-indigo, #4338CA) 100%);
    flex-shrink: 0;
    gap: 16px;
}
.deal-quote-drawer-header-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.deal-quote-drawer-icon {
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.18);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.deal-quote-drawer-icon svg { width: 20px; height: 20px; }
.deal-quote-drawer-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
.deal-quote-drawer-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,0.78);
    margin-top: 2px;
    line-height: 1.3;
}
.deal-quote-drawer-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.deal-quote-drawer-close:hover { background: rgba(255,255,255,0.3); }

.deal-quote-drawer-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #FEF3C7;
    border-bottom: 1px solid #FDE68A;
    color: #92400E;
    font-size: 13px;
    flex-shrink: 0;
}
.deal-quote-drawer-banner i { width: 18px; height: 18px; flex-shrink: 0; }
.deal-quote-drawer-banner svg { width: 18px; height: 18px; }

.deal-quote-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.deal-quote-drawer-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.deal-quote-drawer-loading .spinner { margin: 0 auto 12px; }
.deal-quote-drawer-loading p { font-size: 13px; margin: 0; }

.deal-quote-drawer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.dcd-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-primary);
}
.dcd-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .deal-quote-drawer { max-width: 100%; }
    .deal-quote-drawer-header { padding: 14px 16px; }
    .deal-quote-drawer-body { padding: 16px; }
    .deal-quote-drawer-banner { padding: 10px 16px; font-size: 12px; }
}