:root {
    --bg-main: #f8fafc;
    --bg-card: #ffffff;
    --bg-card-hover: #ffffff;
    --border-color: #e2e8f0;
    --border-highlight: rgba(16, 185, 129, 0.35);
    
    /* Paleta de Marca: Verde Esmeralda + Naranja Vibrante */
    --emerald-primary: #059669;
    --emerald-light: #10b981;
    --emerald-bg: rgba(5, 150, 105, 0.08);
    
    --orange-accent: #f97316;
    --orange-hover: #ea580c;
    --orange-bg: rgba(249, 115, 22, 0.1);

    --teal-accent: #0d9488;
    --indigo-accent: #4f46e5;
    
    /* Tokens de Planes SaaS (Maleables) */
    --plan-starter: #64748b;
    --plan-starter-bg: rgba(100, 116, 139, 0.1);
    --plan-starter-pro: #0284c7;
    --plan-starter-pro-bg: rgba(2, 132, 199, 0.1);
    --plan-equipo: #059669;
    --plan-equipo-bg: rgba(5, 150, 105, 0.1);
    --plan-empresa: #7c3aed;
    --plan-empresa-bg: rgba(124, 58, 237, 0.1);
    --plan-black: #0f172a;
    --plan-black-bg: rgba(15, 23, 42, 0.1);

    --text-heading: #0f172a;
    --text-body: #334155;
    --text-muted: #64748b;
    --text-dim: #94a3b8;

    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-card: 0 4px 20px -4px rgba(15, 23, 42, 0.06);
    --shadow-hover: 0 12px 30px -6px rgba(15, 23, 42, 0.12);
    --shadow-orange: 0 4px 15px rgba(249, 115, 22, 0.3);
    --shadow-emerald: 0 4px 15px rgba(5, 150, 105, 0.3);
}

/* Badges de Plataformas Inmobiliarias */
.platform-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    z-index: 5 !important;
}

.platform-badge.zonaprop {
    background: #2563eb !important;
    color: #ffffff !important;
    border: 1px solid #60a5fa !important;
}

.platform-badge.lavoz {
    background: #e11d48 !important;
    color: #ffffff !important;
    border: 1px solid #fda4af !important;
}

.platform-badge.mercadolibre {
    background: #eab308 !important;
    color: #0f172a !important;
    border: 1px solid #fef08a !important;
}

.btn-platform-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: var(--text-heading);
    transition: all 0.2s ease;
}

.btn-platform-tag:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.btn-platform-tag.active {
    background: #ffffff;
    border-color: var(--emerald-primary);
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
    color: var(--emerald-primary);
}

.owner-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}

/* Badges de Índice de Tranquilidad & Seguridad por Barrio */
.safety-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.safety-badge.high {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #7dd3fc;
}

.safety-badge.medium {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.safety-badge.care {
    background: #ffedd5;
    color: #c2410c;
    border: 1px solid #fdba74;
}

.amenity-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: #f1f5f9;
    color: var(--text-heading);
    border: 1px solid var(--border-color);
}

.listing-card.source-lavoz {
    border-top: 4px solid #e11d48 !important;
}

.listing-card.source-zonaprop {
    border-top: 4px solid #2563eb !important;
}

.card-address-box {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-heading);
    background: #f1f5f9;
    border-left: 3px solid var(--emerald-primary);
    padding: 5px 9px;
    border-radius: 4px;
    margin: 6px 0 6px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

html, body {
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
}

body {
    background-color: var(--bg-main);
    color: var(--text-body);
    font-family: var(--font-body);
    min-height: 100vh;
    background-image: 
        radial-gradient(at 10% 10%, rgba(16, 185, 129, 0.04) 0px, transparent 40%),
        radial-gradient(at 90% 90%, rgba(249, 115, 22, 0.04) 0px, transparent 40%);
    background-attachment: fixed;
}

/* ==============================================================================
   ESTRUCTURA MAESTRA: APP-SHELL & SIDEBAR VERTICAL SAAS
   ============================================================================== */

.app-shell {
    display: flex;
    min-height: 100vh;
    width: 100%;
    position: relative;
    overflow-x: hidden;
}

/* Backdrop oscuro para Drawer en Mobile */
.sidebar-backdrop {
    display: none;
}

/* Sidebar Vertical */
.app-sidebar {
    width: 260px;
    min-width: 260px;
    background: #ffffff;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease;
    box-shadow: 2px 0 12px rgba(15, 23, 42, 0.03);
}

/* Estado Colapsado en Desktop */
.app-sidebar.sidebar-collapsed {
    width: 74px;
    min-width: 74px;
}

.app-sidebar.sidebar-collapsed .brand-text,
.app-sidebar.sidebar-collapsed .sidebar-group-title,
.app-sidebar.sidebar-collapsed .nav-text,
.app-sidebar.sidebar-collapsed .nav-badge-intel,
.app-sidebar.sidebar-collapsed .nav-badge-count,
.app-sidebar.sidebar-collapsed .header-plan-badge,
.app-sidebar.sidebar-collapsed .sidebar-user-details {
    display: none !important;
}

.app-sidebar.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding: 12px;
}

.app-sidebar.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding: 16px 10px;
}

.app-sidebar.sidebar-collapsed .sidebar-user-footer {
    justify-content: center;
    padding: 14px 8px;
}

.app-sidebar.sidebar-collapsed .sidebar-user-actions {
    display: none;
}

/* Header del Sidebar */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 14px 16px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-collapse-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: #f8fafc;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s ease;
}

.sidebar-collapse-btn:hover {
    background: #f1f5f9;
    color: var(--text-heading);
    border-color: #cbd5e1;
}

.sidebar-close-mobile-btn {
    display: none;
}

/* Scroll de Navegación */
.sidebar-nav-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sidebar-nav-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sidebar-group-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-dim);
    padding: 0 10px 4px 10px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.18s ease;
    position: relative;
}

.sidebar-link i {
    font-size: 15px;
    color: var(--text-muted);
    width: 18px;
    text-align: center;
    transition: color 0.18s ease;
}

.sidebar-link:hover {
    background: #f8fafc;
    color: var(--emerald-primary);
}

.sidebar-link:hover i {
    color: var(--emerald-primary);
}

.sidebar-link.active {
    background: var(--emerald-bg);
    color: var(--emerald-primary);
    font-weight: 700;
}

.sidebar-link.active i {
    color: var(--emerald-primary);
}

.nav-badge-intel {
    background: linear-gradient(135deg, var(--emerald-primary), var(--teal-accent));
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 6px;
    margin-left: auto;
    letter-spacing: 0.4px;
}

.nav-badge-count {
    background: #f1f5f9;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto;
}

/* Footer de Usuario en Sidebar */
.sidebar-user-footer {
    padding: 12px 14px;
    border-top: 1px solid var(--border-color);
    background: #fafafa;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--emerald-bg);
    color: var(--emerald-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.sidebar-user-details {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.sidebar-user-details .user-full-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-actions {
    display: flex;
    gap: 4px;
}

.btn-sidebar-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    color: var(--text-body);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-sidebar-icon:hover {
    background: #f1f5f9;
    color: var(--emerald-primary);
}

.btn-sidebar-icon.danger:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Layout Principal Derecho */
.app-main-layout {
    flex: 1;
    margin-left: 260px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-shell.sidebar-collapsed .app-main-layout {
    margin-left: 74px;
}

/* Topbar Superior */
.app-topbar {
    height: 56px;
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-agency-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-heading);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-public-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 6px 12px;
}

/* Contenedor de Página */
.app-page-content {
    flex: 1;
    padding: 24px 28px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    min-width: 0;
    box-sizing: border-box;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #0f172a;
    border: 1px solid rgba(16, 185, 129, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(2, 6, 23, 0.25), 0 0 10px rgba(16, 185, 129, 0.25);
    overflow: hidden;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 9px;
}

.brand:hover .logo-icon {
    transform: scale(1.04);
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.3), 0 0 14px rgba(16, 185, 129, 0.4);
}

.brand-text h1 {
    font-family: 'Outfit', var(--font-heading), sans-serif;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: #0f172a;
    margin: 0;
    line-height: 1.1;
}

.brand-text h1 span {
    color: #10b981;
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.brand-text .subtitle {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 175px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.2px;
}

.header-user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-info-text {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.user-full-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-heading);
    line-height: 1.2;
}

.user-role-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: var(--emerald-primary);
    color: #ffffff;
    margin-top: 2px;
    display: inline-block;
}

.user-role-badge.badge-superadmin {
    background: #0ea5e9;
}

.user-role-badge.badge-agency_admin {
    background: var(--emerald-primary);
}

.user-role-badge.badge-agent {
    background: #64748b;
}

.header-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.2s ease;
}

.header-plan-badge.badge-starter {
    background: var(--plan-starter-bg);
    color: var(--plan-starter);
    border: 1px solid var(--plan-starter);
}

.header-plan-badge.badge-starter_pro {
    background: var(--plan-starter-pro-bg);
    color: var(--plan-starter-pro);
    border: 1px solid var(--plan-starter-pro);
}

.header-plan-badge.badge-equipo {
    background: var(--plan-equipo-bg);
    color: var(--plan-equipo);
    border: 1px solid var(--plan-equipo);
}

.header-plan-badge.badge-empresa {
    background: var(--plan-empresa-bg);
    color: var(--plan-empresa);
    border: 1px solid var(--plan-empresa);
}

.header-plan-badge.badge-black {
    background: var(--plan-black-bg);
    color: var(--plan-black);
    border: 1px solid #334155;
}

.header-plan-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.btn-header-action {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    color: var(--text-body);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-header-action:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: var(--text-heading);
}

.btn-header-logout {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-header-logout:hover {
    background: #fee2e2;
    border-color: #f87171;
    color: #b91c1c;
}

/* Submenu de Navegación - Nivel 2 */
.app-sub-navbar {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 6px 8px;
    margin-bottom: 24px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.sub-navbar-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.subnav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.subnav-link i {
    font-size: 14px;
}

.subnav-link:hover {
    color: var(--emerald-primary);
    background: #f8fafc;
    border-color: var(--border-color);
}

.subnav-link.active {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.08), rgba(13, 148, 136, 0.12));
    color: var(--emerald-primary);
    font-weight: 700;
    border-color: rgba(5, 150, 105, 0.3);
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.08);
}

/* Sub-pestañas internas dentro de Clientes & Operaciones */
.inner-module-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    background: #f8fafc;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    width: fit-content;
}

.inner-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.inner-tab-btn:hover {
    color: var(--text-heading);
}

.inner-tab-btn.active {
    background: #ffffff;
    color: var(--emerald-primary);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(5, 150, 105, 0.2);
}

/* Panel y Grid del Tasador ACM */
.appraisal-input-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-card);
}

.valuation-tiers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.valuation-tier-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    position: relative;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s, box-shadow 0.2s;
}

.valuation-tier-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}

.valuation-tier-card.tier-market {
    border: 2px solid var(--emerald-primary);
    background: linear-gradient(180deg, rgba(5, 150, 105, 0.03) 0%, #ffffff 100%);
}

.valuation-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.valuation-tier-badge.badge-quick {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.valuation-tier-badge.badge-market {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.valuation-tier-badge.badge-premium {
    background: #fdf4ff;
    color: #9333ea;
    border: 1px solid #f0abfc;
}

.valuation-tier-price {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    color: var(--text-heading);
    margin: 4px 0 6px;
}

.valuation-tier-card.tier-market .valuation-tier-price {
    color: var(--emerald-primary);
    font-size: 28px;
}

.valuation-tier-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Argumentos de Defensa de Precio */
.defense-section-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-card);
}

.defense-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 14px;
}

.defense-arg-card {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--emerald-primary);
    border-radius: 8px;
    padding: 14px 16px;
}

.defense-arg-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.defense-arg-header i {
    color: var(--emerald-primary);
    font-size: 15px;
}

.defense-arg-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-heading);
}

.defense-arg-detail {
    font-size: 12px;
    color: var(--text-body);
    line-height: 1.45;
}

.value-driver-card {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 10px;
}

/* Tasación de Bienes y Chips en Tabla */
.client-asset-item {
    margin-bottom: 4px;
    max-width: 100%;
}
.client-asset-item:last-child {
    margin-bottom: 0;
}
.client-asset-main {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
}
.asset-chip {
    background: var(--orange-bg);
    color: var(--orange-accent);
    border: 1px solid rgba(249, 115, 22, 0.3);
    font-size: 10px;
    font-weight: 700;
    max-width: calc(100% - 68px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 5px;
    flex: 1;
    min-width: 0;
}
.asset-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}
.btn-appraise-asset {
    background: rgba(5, 150, 105, 0.08);
    color: var(--emerald-primary);
    border: 1px solid rgba(5, 150, 105, 0.35);
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.btn-appraise-asset:hover {
    background: var(--emerald-primary);
    color: #ffffff;
}
.btn-appraise-asset.appraised {
    background: rgba(5, 150, 105, 0.12);
    border-color: var(--emerald-primary);
}
.asset-appraised-val {
    font-size: 10px;
    color: var(--emerald-primary);
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 2px;
    margin-top: 1px;
}

/* Banner de Información / Guía */
.hero-guide-banner {
    background: linear-gradient(135deg, #ffffff 60%, rgba(249, 115, 22, 0.05));
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--orange-accent);
    border-radius: var(--radius-md);
    padding: 16px 24px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-card);
}

.guide-text h3 {
    font-family: var(--font-heading);
    font-size: 16px;
    color: var(--text-heading);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.guide-text p {
    font-size: 13px;
    color: var(--text-muted);
}

/* Layout Matcher */
.matcher-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
}

.matcher-sidebar {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-card);
    max-height: 80vh;
    overflow-y: auto;
}

.client-item-card {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.client-item-card:hover, .client-item-card.active {
    background: #ffffff;
    border-color: var(--emerald-primary);
    box-shadow: 0 4px 12px rgba(5,150,105,0.12);
}

.client-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 4px;
}

.client-demand-badge {
    display: inline-block;
    font-size: 11px;
    background: var(--orange-bg);
    color: var(--orange-hover);
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    margin-top: 6px;
}

.matcher-content {
    display: flex;
    flex-direction: column;
}

.matcher-header-box {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-card);
}

.match-reason-pill {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    color: var(--text-heading);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.match-score-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--emerald-primary), var(--teal-accent));
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(5,150,105,0.3);
}

/* Metrics Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.metric-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
    border-color: #cbd5e1;
}

.metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

.metric-icon.emerald { background: rgba(5, 150, 105, 0.1); color: #059669; }
.metric-icon.orange { background: rgba(249, 115, 22, 0.1); color: #ea580c; }
.metric-icon.teal { background: rgba(13, 148, 136, 0.1); color: #0d9488; }
.metric-icon.indigo { background: rgba(79, 70, 229, 0.1); color: #4f46e5; }

.metric-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.metric-data h2 {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 800;
    color: #0f172a;
    margin-top: 1px;
}

/* Filter Panel */
.filter-panel {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-card);
}

.radar-filter-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.filter-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.filter-top-row .search-box {
    flex: 1;
    min-width: 260px;
}

.filter-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.filter-location-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 12px 14px;
    align-items: end;
}

.filter-location-strip .filter-group-multiselect {
    min-width: 0;
    max-width: none;
    flex: none;
    width: 100%;
}

.filter-grid-details {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    align-items: end;
}

@media (max-width: 1400px) {
    .filter-grid-details {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    .filter-location-strip {
        grid-template-columns: 1fr;
    }
    .filter-grid-details {
        grid-template-columns: repeat(2, 1fr);
    }
}

.filter-grid-details .filter-group {
    width: 100%;
}

.filter-grid-details .select-input {
    width: 100%;
}

.filter-label-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.icon-city { color: var(--emerald-primary, #059669); }
.icon-zone { color: var(--teal-accent, #0d9488); }
.icon-neigh { color: var(--orange-accent, #ea580c); }

.filter-footer-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 6px;
    margin-top: 2px;
    border-top: 1px dashed #e2e8f0;
}

.filter-checkbox-label {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    font-weight: 500;
}

.filter-checkbox-label input[type="checkbox"] {
    accent-color: var(--emerald-primary, #059669);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 260px;
}

.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
}

.search-box input {
    width: 100%;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 14px 10px 40px;
    color: var(--text-heading);
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
}

.search-box input:focus {
    border-color: var(--emerald-primary);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}

.filter-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.select-input {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--text-heading);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    outline: none;
    cursor: pointer;
}

.select-input.Highlight {
    border-color: var(--orange-accent);
    background: var(--orange-bg);
    color: var(--orange-hover);
    font-weight: 700;
}

.view-toggle {
    display: flex;
    background: #f1f5f9;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 2px;
}

.toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.toggle-btn.active {
    background: var(--emerald-primary);
    color: #ffffff;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.btn-primary {
    background: linear-gradient(135deg, var(--orange-accent), #ea580c);
    color: #ffffff;
    box-shadow: var(--shadow-orange);
}

.btn-emerald {
    background: linear-gradient(135deg, var(--emerald-primary), #047857);
    color: #ffffff;
    box-shadow: var(--shadow-emerald);
}

.btn-secondary {
    background: #f1f5f9;
    border: 1px solid var(--border-color);
    color: var(--text-heading);
}

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

/* Listings Grid */
.listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 22px;
    margin-bottom: 24px;
}

.property-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: var(--shadow-card);
    position: relative;
}

.property-card:hover {
    transform: translateY(-5px);
    border-color: var(--emerald-light);
    box-shadow: var(--shadow-hover);
}

.card-image-wrap {
    position: relative;
    height: 195px;
    background: #e2e8f0;
    overflow: hidden;
}

.card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(5, 150, 105, 0.08);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--emerald-primary);
    border: 1px solid rgba(5, 150, 105, 0.25);
    white-space: nowrap;
    line-height: 1.2;
}

.card-image-wrap > .badge-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(5, 150, 105, 0.3);
    z-index: 2;
}

.card-badges-top-bar {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    pointer-events: none;
}

.card-badges-top-bar .match-badge-tag,
.card-badges-top-bar .badge-tag,
.card-badges-top-bar .platform-badge,
.card-badges-top-bar .badge {
    position: static !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
}

.price-tag {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(15, 23, 42, 0.9);
    padding: 6px 14px;
    border-radius: 8px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
    color: #ffffff;
}

.card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

.card-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-heading);
    margin-bottom: 8px;
}

.card-location {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-specs {
    display: flex;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--text-muted);
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

/* Data Table View Modernizado */
.table-wrapper {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
}

.table-responsive-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    text-align: left;
}

.data-table thead th {
    background: #f8fafc;
    padding: 12px 16px;
    color: #64748b;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.data-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #334155;
    background: #ffffff;
}

.data-table tbody tr {
    transition: background-color 0.15s ease;
}

.data-table tbody tr:hover td {
    background-color: #f8fafc;
}

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

/* ==============================================================================
   ENTERPRISE DATA TABLE SCROLLING SUITE
   ============================================================================== */

/* Barra Superior Sincronizada (Justo arriba del thead) */
.enterprise-table-top-bar {
    display: none; /* Auto-activado por JS cuando hay overflow */
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    user-select: none;
    z-index: 15;
    position: relative;
}

.ent-scroll-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    flex-shrink: 0;
    transition: all 0.18s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ent-scroll-btn:hover:not(:disabled) {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
    transform: translateY(-1px);
}

.ent-scroll-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.ent-top-scrollbar {
    flex: 1;
    height: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    -webkit-overflow-scrolling: touch;
}

.ent-top-scrollbar::-webkit-scrollbar {
    height: 8px;
}

.ent-top-scrollbar::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 6px;
}

.ent-top-scrollbar::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 6px;
    transition: background 0.2s;
}

.ent-top-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #059669;
}

.ent-top-dummy {
    height: 1px;
}

.ent-scroll-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    padding-left: 8px;
    border-left: 1px solid #e2e8f0;
}

.ent-scroll-indicator i {
    color: #059669;
    font-size: 12px;
}

/* Barra Flotante Inferior Sticky (Permanece en el borde inferior del viewport) */
.enterprise-sticky-bottom-bar {
    display: none; /* Auto-activado por JS cuando hay overflow */
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 35;
    background: rgba(248, 250, 252, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid #cbd5e1;
    box-shadow: 0 -3px 12px rgba(15, 23, 42, 0.08);
    -webkit-overflow-scrolling: touch;
}

.enterprise-sticky-bottom-bar::-webkit-scrollbar {
    height: 10px;
}

.enterprise-sticky-bottom-bar::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.85);
}

.enterprise-sticky-bottom-bar::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.enterprise-sticky-bottom-bar::-webkit-scrollbar-thumb:hover {
    background: #059669;
}

.ent-sticky-dummy {
    height: 1px;
}

/* Scrollbars pulidos en el contenedor nativo */
.table-responsive-container {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive-container::-webkit-scrollbar {
    height: 8px;
}

.table-responsive-container::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.table-responsive-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.table-responsive-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ==============================================================================
   COMPONENTES ESPECÍFICOS DE LA GESTIÓN DE STOCK & CARTERA
   ============================================================================== */

/* Cabecera Moderna de Stock */
.stock-header-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 22px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.stock-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.stock-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ecfdf5;
    color: #047857;
    font-weight: 700;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid #a7f3d0;
    margin-bottom: 6px;
}

.stock-live-badge .live-dot {
    width: 7px;
    height: 7px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.stock-header-title {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stock-title-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.stock-header-subtitle {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    max-width: 620px;
    line-height: 1.45;
}

/* Barra de Botones de la Inmobiliaria */
.stock-actions-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-stock-primary {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    height: 38px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    white-space: nowrap;
}

.btn-stock-primary:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35);
    color: #ffffff;
}

.stock-actions-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-stock-secondary {
    background: #ffffff;
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    white-space: nowrap;
}

.btn-stock-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Toolbar de la Tabla */
.table-toolbar {
    padding: 14px 18px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.toolbar-filters {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 1;
    max-width: 580px;
}

.stock-search {
    flex: 1;
}

.stock-search input {
    width: 100%;
    height: 38px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 12px 0 36px;
    font-size: 13px;
    color: #0f172a;
    transition: all 0.2s ease;
}

.stock-search input:focus {
    background: #ffffff;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
    outline: none;
}

.stock-select-filter {
    height: 38px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    max-width: 170px;
}

.stock-select-filter:focus {
    border-color: #059669;
    background: #ffffff;
}

.stock-counter-pill {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Celdas Específicas de la Tabla de Stock */
.stock-data-table {
    width: 100%;
    table-layout: auto;
}

.stock-data-table thead th {
    padding: 7px 8px;
    font-size: 10px;
    white-space: nowrap;
}

.stock-data-table tbody td {
    padding: 6px 8px;
    font-size: 11.5px;
}

/* Columna 9 (Acciones & Ficha) Sticky a la derecha */
.stock-data-table th:last-child,
.stock-data-table td:last-child {
    position: sticky;
    right: 0;
    background: #ffffff;
    z-index: 10;
    box-shadow: -4px 0 8px -2px rgba(15, 23, 42, 0.08);
}

.stock-data-table thead th:last-child {
    background: #f8fafc;
    z-index: 11;
}

.stock-data-table tbody tr:hover td:last-child {
    background-color: #f8fafc;
}

.stock-thumb-box {
    position: relative;
    width: 52px;
    height: 38px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
}

.stock-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.data-table tbody tr:hover .stock-thumb-img {
    transform: scale(1.06);
}

.stock-photo-count {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(2px);
    color: #ffffff;
    font-size: 8.5px;
    font-weight: 700;
    padding: 1px 3px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.stock-prop-title {
    font-weight: 700;
    font-size: 12px;
    color: #0f172a;
    line-height: 1.25;
    max-width: 210px;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stock-prop-location {
    font-size: 11px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.stock-prop-location i {
    color: #94a3b8;
    font-size: 10px;
}

.stock-type-badge {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 5px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    margin-bottom: 2px;
}

.stock-prop-specs {
    font-size: 11px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.stock-prop-specs i {
    font-size: 9.5px;
    color: #94a3b8;
}

.stock-price-box {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.stock-price-curr {
    font-size: 10.5px;
    font-weight: 800;
    color: #059669;
}

.stock-price-val {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
}

/* Badges de Permuta */
.stock-permuta-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    white-space: nowrap;
}

.stock-permuta-badge.receives {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.stock-permuta-badge.cash {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

/* Status Select Estilizado */
.stock-status-select-wrap {
    display: inline-flex;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}

.stock-status-select {
    border: 1px solid transparent;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 22px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px;
}

.status-disponible .stock-status-select {
    background-color: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.status-reservada .stock-status-select {
    background-color: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.status-vendida .stock-status-select {
    background-color: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.status-pausada .stock-status-select {
    background-color: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

/* Custom Toggle Switch */
.stock-toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.stock-toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.stock-toggle-switch .switch-slider {
    position: relative;
    width: 34px;
    height: 19px;
    background-color: #cbd5e1;
    border-radius: 20px;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.stock-toggle-switch .switch-slider::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    left: 2px;
    top: 2px;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stock-toggle-switch input:checked + .switch-slider {
    background-color: #059669;
}

.stock-toggle-switch input:checked + .switch-slider::before {
    transform: translateX(15px);
}

.stock-toggle-switch .switch-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    transition: color 0.2s ease;
    min-width: 44px;
}

.stock-toggle-switch .switch-label.active {
    color: #047857;
    font-weight: 700;
}

/* Botones de Acción en Fila */
.stock-row-actions {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

.btn-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-action-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}

.btn-action-icon.wa:hover {
    background: #ecfdf5;
    color: #16a34a;
    border-color: #86efac;
}

.btn-action-icon.edit:hover {
    background: #f0f9ff;
    color: #0284c7;
    border-color: #7dd3fc;
}

.btn-action-icon.delete:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fca5a5;
}

/* Chips de Auditoría de Completitud y Faltantes */
.stock-missing-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.chip-missing {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fee2e2;
    letter-spacing: -0.01em;
}

.chip-missing i {
    font-size: 9px;
}

.stock-badge-missing-photo {
    position: absolute;
    bottom: 2px;
    left: 2px;
    right: 2px;
    background: rgba(220, 38, 38, 0.88);
    backdrop-filter: blur(2px);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Asignación Rápida de Asesor / Vendedor */
.stock-agent-select-wrap {
    display: inline-flex;
    position: relative;
    max-width: 145px;
    width: 100%;
}

.stock-agent-select {
    width: 100%;
    border: 1px solid #e2e8f0;
    padding: 4px 22px 4px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    transition: all 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    background-color: #ffffff;
    color: #1e293b;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-agent-select:hover {
    border-color: #cbd5e1;
    background-color: #f8fafc;
}

.stock-agent-select:focus {
    border-color: #059669;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.15);
}

.stock-agent-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-agent-badge.assigned {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.stock-agent-badge.unassigned {
    background: #fffbeb;
    color: #d97706;
    border: 1px dashed #fcd34d;
}

.stock-hide-incomplete-wrap:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}


/* Adaptabilidad & Columnas Específicas de la Tabla de Clientes */
#clients-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

#clients-table-container .data-table {
    width: 100%;
    table-layout: fixed;
}

/* Toolbar de Filtros para Oportunidades */
.clients-toolbar-wrap {
    padding: 14px 20px;
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.clients-filters-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-item-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.filter-item-inline label {
    margin: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filter-item-inline .select-sm {
    padding: 5px 8px;
    font-size: 11.5px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: #f8fafc;
    color: var(--text-heading);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-item-inline .select-sm:focus {
    outline: none;
    border-color: var(--emerald-primary);
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.12);
}

.clients-count-pill {
    font-size: 12px;
    font-weight: 700;
    color: var(--emerald-primary);
    background: rgba(5, 150, 105, 0.08);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(5, 150, 105, 0.2);
    white-space: nowrap;
}

#clients-table-container .data-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

#clients-table-container .data-table thead th {
    background: #f8fafc;
    padding: 11px 12px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1.5px solid #e2e8f0;
    border-right: 1px solid #eef2f6;
}

#clients-table-container .data-table thead th:last-child {
    border-right: none;
    text-align: center;
}

#clients-table-container .data-table td {
    padding: 10px 12px;
    font-size: 12px;
    vertical-align: middle;
    overflow: hidden;
    border-bottom: 1px solid #edf2f7;
    border-right: 1px solid #f8fafc;
    background: #ffffff;
    transition: background-color 0.15s ease;
}

#clients-table-container .data-table td:last-child {
    border-right: none;
}

.clickable-client-row {
    cursor: pointer;
}

.clickable-client-row:hover td {
    background-color: #f8fafc !important;
}

#clients-table-container .table-responsive-container {
    overflow-x: auto;
    position: relative;
    border-radius: var(--radius-md);
}

#clients-table-container th.col-client,
#clients-table-container td.col-client { width: 22%; min-width: 170px; }

#clients-table-container th.col-profile,
#clients-table-container td.col-profile { width: 14%; min-width: 110px; }

#clients-table-container th.col-assets,
#clients-table-container td.col-assets { width: 18%; min-width: 130px; }

#clients-table-container th.col-demand,
#clients-table-container td.col-demand { width: 20%; min-width: 140px; }

#clients-table-container th.col-budget,
#clients-table-container td.col-budget { width: 11%; min-width: 95px; }

#clients-table-container th.col-urgency,
#clients-table-container td.col-urgency { width: 9%; min-width: 80px; }

#clients-table-container th.col-action,
#clients-table-container td.col-action {
    width: 135px;
    min-width: 135px;
    position: sticky;
    right: 0;
    background: #ffffff;
    z-index: 5;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.06);
    text-align: center;
}

#clients-table-container thead th.col-action {
    background: #f8fafc;
    z-index: 6;
}

.clickable-client-row:hover td.col-action {
    background-color: #f8fafc !important;
}

/* Enlace del Nombre del Cliente para Abrir Matcher Directo */
.client-name-link {
    font-weight: 800;
    color: var(--emerald-primary, #059669);
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    max-width: 100%;
}

.client-name-link:hover {
    color: #047857;
    text-decoration: underline;
    transform: translateX(1px);
}

.btn-client-opportunities,
button.btn-client-opportunities {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #059669 !important;
    color: #ffffff !important;
    border: 1px solid #047857 !important;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 800 !important;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(5, 150, 105, 0.3);
    transition: all 0.15s ease;
}

.btn-client-opportunities:hover,
button.btn-client-opportunities:hover {
    background: #047857 !important;
    border-color: #065f46 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.4);
    transform: translateY(-1px);
}

.cell-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}

.cell-title {
    font-weight: 700;
    color: var(--text-heading);
    font-size: 12.5px;
    line-height: 1.3;
}

.cell-sub {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 2px;
}

/* Demanda Compacta: Solo tipo de búsqueda y zona */
.demand-compact-box {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.op-tag-buy {
    background: rgba(5, 150, 105, 0.08);
    color: var(--emerald-primary);
    border: 1px solid rgba(5, 150, 105, 0.25);
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.op-tag-rental {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.25);
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.demand-compact-zone {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-heading);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.demand-compact-zone i {
    color: var(--emerald-primary);
    font-size: 11px;
}

/* Botones de acción tipo icono */
.cell-action-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.btn-table-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.btn-table-icon.btn-view-matcher {
    background: #ecfdf5;
    color: #059669;
    border-color: #a7f3d0;
}

.btn-table-icon.btn-view-matcher:hover {
    background: #059669;
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(5, 150, 105, 0.25);
    transform: translateY(-1px);
}

.btn-edit-client {
    background: #f8fafc;
    color: #475569;
    border-color: #e2e8f0;
}

.btn-edit-client:hover {
    background: #334155;
    color: #ffffff;
    border-color: #334155;
    box-shadow: 0 2px 5px rgba(51, 65, 85, 0.2);
    transform: translateY(-1px);
}

/* Pestañas del Modal de Edición */
.modal-tab-nav {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.modal-tab-btn {
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.modal-tab-btn:hover {
    color: var(--text-heading);
    background: #f1f5f9;
}

.modal-tab-btn.active {
    color: #ffffff;
    background: var(--emerald-primary);
    border-color: var(--emerald-primary);
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
}

@media (max-width: 900px) {
    #clients-table-container .data-table {
        min-width: 780px;
        table-layout: auto;
    }
}

@media (max-width: 768px) {
    #clients-table-container .data-table {
        min-width: 620px;
    }
    #clients-table-container .data-table td,
    #clients-table-container .data-table thead th {
        padding: 8px 8px;
        font-size: 11.5px;
    }
    #clients-table-container th.col-profile,
    #clients-table-container td.col-profile {
        display: none;
    }
    #clients-table-container th.col-urgency,
    #clients-table-container td.col-urgency {
        display: none;
    }
    .qv-gallery-container {
        height: 320px !important;
    }
}

.table-thumb {
    width: 55px;
    height: 42px;
    border-radius: 6px;
    object-fit: cover;
}

/* Pagination Bar */
.pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-muted);
    box-shadow: var(--shadow-card);
}

.hidden {
    display: none !important;
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-card, .modal-box {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden !important;
    position: relative;
    padding: 24px 28px;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.modal-dialog {
    width: 100%;
    margin: 20px auto;
    max-width: 650px;
}

.modal-content {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    overflow: hidden;
    width: 100%;
}

.modal-card::-webkit-scrollbar,
.modal-box::-webkit-scrollbar {
    width: 6px;
}
.modal-card::-webkit-scrollbar-track,
.modal-box::-webkit-scrollbar-track {
    background: transparent;
}
.modal-card::-webkit-scrollbar-thumb,
.modal-box::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.modal-card::-webkit-scrollbar-thumb:hover,
.modal-box::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-heading);
}

.modal-medium {
    max-width: 760px !important;
}

.modal-large {
    max-width: 900px !important;
}

.modal-xl {
    max-width: 1080px !important;
}

.modal-header-compact {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(5, 150, 105, 0.1);
    color: var(--emerald-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.modal-header-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.modal-header-desc {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: #64748b;
}

.modal-close-btn {
    background: #f1f5f9;
    border: none;
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.modal-close-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.form-group {
    margin-bottom: 13px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    text-transform: none;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    gap: 6px;
}

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

.form-control, .select-input {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 12px;
    color: #0f172a;
    font-family: var(--font-body);
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    height: 38px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.form-control:focus, .select-input:focus {
    border-color: var(--emerald-primary);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
}

textarea.form-control {
    height: auto;
    min-height: 75px;
    line-height: 1.45;
}

/* Form Validation & Error States */
.form-control.input-error, .select-input.input-error, .custom-multiselect.input-error .multiselect-control {
    border-color: #ef4444 !important;
    background-color: #fff5f5 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22) !important;
    animation: formShake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes formShake {
    10%, 90% { transform: translate3d(-1.5px, 0, 0); }
    20%, 80% { transform: translate3d(2.5px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-3.5px, 0, 0); }
    40%, 60% { transform: translate3d(3.5px, 0, 0); }
}

.field-error-msg {
    color: #dc2626;
    font-size: 11.5px;
    font-weight: 600;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: errorFadeIn 0.2s ease;
}

.modal-form-alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
    color: #991b1b;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: errorFadeIn 0.25s ease;
}

@keyframes errorFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Global Floating Toast Notifications */
#global-toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast-notification {
    padding: 12px 18px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: 420px;
}

.toast-notification.success {
    background: #059669;
    color: #ffffff;
}

.toast-notification.error {
    background: #dc2626;
    color: #ffffff;
}

.toast-notification.info {
    background: #2563eb;
    color: #ffffff;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Modern Form Section Cards & Toggles */
.form-section-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px 12px;
    margin-bottom: 14px;
}

.form-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e8f0;
}

.form-section-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.form-section-title i {
    color: var(--emerald-primary);
}

.form-section-subtitle {
    font-size: 11px;
    color: #64748b;
    margin: 0;
}

.toggle-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.toggle-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.toggle-card:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.toggle-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 4px;
    flex-shrink: 0;
    cursor: pointer;
}

.toggle-card.toggle-orange {
    border-color: rgba(249, 115, 22, 0.3);
    background: rgba(249, 115, 22, 0.03);
}

.toggle-card.toggle-orange input[type="checkbox"] {
    accent-color: #ea580c;
}

.toggle-card.toggle-emerald {
    border-color: rgba(5, 150, 105, 0.3);
    background: rgba(5, 150, 105, 0.03);
}

.toggle-card.toggle-emerald input[type="checkbox"] {
    accent-color: #059669;
}

.toggle-card-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.toggle-card.toggle-orange .toggle-card-title i {
    color: #ea580c;
}

.toggle-card.toggle-emerald .toggle-card-title i {
    color: #059669;
}

.toggle-card-desc {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.35;
}

.compact-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    transition: all 0.15s ease;
    user-select: none;
    box-sizing: border-box;
}

.compact-toggle-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.compact-toggle-btn input[type="checkbox"] {
    accent-color: var(--emerald-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}

.import-quick-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

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

.import-quick-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
}

.import-quick-badge i {
    color: var(--emerald-primary);
}

.import-quick-hint {
    font-size: 11.5px;
    color: #64748b;
}

.import-quick-bar {
    display: flex;
    gap: 8px;
}

.import-quick-bar .search-box {
    flex: 1;
    margin: 0;
}

.import-quick-bar .search-box input {
    height: 38px;
    font-size: 13px;
    background: #ffffff;
}

.import-quick-bar button {
    height: 38px;
    padding: 0 16px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.progress-box {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-top: 16px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-heading);
}

.progress-bar-wrap {
    height: 10px;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--emerald-primary), var(--orange-accent));
    transition: width 0.3s ease;
}

/* Tabla SaaS Premium & CRM Styling */
.table-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow-x: auto;
    margin-bottom: 24px;
}

.crm-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-body);
    text-align: left;
}

.crm-table th {
    background: #f8fafc;
    color: var(--text-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 14px 18px;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.crm-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    line-height: 1.4;
}

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

.crm-table tr:hover td {
    background: #f8fafc;
}

/* ==========================================================================
   SPINNERS & OVERLAYS UX PREMIUM (CATÁLOGO & MATCHER AI ENGINE)
   ========================================================================== */

/* 1. Overlay Spinner para el Catálogo General */
.results-section {
    position: relative;
    min-height: 250px;
}

.catalog-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(248, 250, 252, 0.78);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    border-radius: var(--radius-md);
    transition: opacity 0.25s ease, visibility 0.25s ease;
    opacity: 1;
    visibility: visible;
}

.catalog-loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.catalog-spinner-box {
    background: #ffffff;
    border: 1px solid var(--border-color);
    padding: 22px 32px;
    border-radius: 16px;
    box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.15), 0 0 20px rgba(5, 150, 105, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: popIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dual-ring-spinner {
    position: relative;
    width: 48px;
    height: 48px;
}

.dual-ring-spinner::before,
.dual-ring-spinner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
}

.dual-ring-spinner::before {
    border-top-color: var(--emerald-primary);
    border-right-color: var(--emerald-primary);
    animation: spinRing 0.8s linear infinite;
}

.dual-ring-spinner::after {
    inset: 6px;
    border-bottom-color: var(--orange-accent);
    border-left-color: var(--orange-accent);
    animation: spinRingReverse 0.6s linear infinite;
}

.catalog-spinner-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 2. Gran Modal Loader para el Matcher Engine (AI Deep Search) */
.matcher-ai-modal {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 29, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    opacity: 1;
    visibility: visible;
}

.matcher-ai-modal.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.matcher-ai-card {
    background: linear-gradient(145deg, rgba(26, 36, 56, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 28px;
    max-width: 560px;
    width: 100%;
    padding: 44px 36px;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 50px rgba(16, 185, 129, 0.2);
    position: relative;
    overflow: hidden;
    animation: modalPulseIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.matcher-ai-card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 60%);
    pointer-events: none;
    animation: ambientRotate 15s linear infinite;
}

/* Radar & Pulsing Rings Visual */
.matcher-radar-visual {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radar-pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--emerald-light);
    opacity: 0;
    animation: radarPulse 2.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.radar-pulse-ring.ring-1 { animation-delay: 0s; }
.radar-pulse-ring.ring-2 { animation-delay: 0.8s; }
.radar-pulse-ring.ring-3 { animation-delay: 1.6s; }

.radar-core {
    position: relative;
    z-index: 2;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, #059669, #0d9488);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 26px;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.6), inset 0 0 12px rgba(255, 255, 255, 0.4);
    animation: coreGlow 2s ease-in-out infinite alternate;
}

.matcher-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.matcher-ai-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}

.matcher-ai-subtitle {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 28px;
}

/* Steps Box Dinámico */
.matcher-steps-box {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 68px;
}

.matcher-step-icon {
    font-size: 20px;
    color: var(--emerald-light);
    flex-shrink: 0;
}

.matcher-step-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.step-title {
    font-size: 13px;
    font-weight: 700;
    color: #f8fafc;
    transition: opacity 0.2s ease;
}

.step-detail {
    font-size: 11px;
    color: #64748b;
}

/* Progress Bar Brillante */
.matcher-progress-container {
    margin-top: 10px;
}

.matcher-progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

.matcher-progress-fill {
    height: 100%;
    width: 25%;
    background: linear-gradient(90deg, #059669, #10b981, #f97316);
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.7);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.matcher-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
}

/* Keyframe Animations */
@keyframes spinRing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spinRingReverse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

@keyframes radarPulse {
    0% { transform: scale(0.6); opacity: 0.9; }
    50% { opacity: 0.5; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes coreGlow {
    0% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.5), inset 0 0 8px rgba(255, 255, 255, 0.3); }
    100% { box-shadow: 0 0 35px rgba(16, 185, 129, 0.9), inset 0 0 15px rgba(255, 255, 255, 0.6); }
}

@keyframes ambientRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes popIn {
    0% { transform: scale(0.92); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes modalPulseIn {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Photo Auditor UI Styles */
.photo-drop-zone {
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.photo-drop-zone:hover, .photo-drop-zone.dragover {
    border-color: var(--emerald-primary);
    background: rgba(5, 150, 105, 0.04);
}

.photo-audit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.photo-audit-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.photo-audit-img-wrap {
    height: 170px;
    position: relative;
    background: #e2e8f0;
    overflow: hidden;
}

.photo-audit-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-audit-score-pill {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 5px;
}

.score-pill-excellent {
    background: linear-gradient(135deg, #059669, #10b981);
}

.score-pill-good {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.score-pill-warning {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

.score-pill-bad {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

.photo-audit-body {
    padding: 12px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.photo-audit-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
}

.photo-audit-pill {
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 6px;
    color: var(--text-body);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.photo-audit-alerts {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.photo-audit-alert-item {
    font-size: 11px;
    line-height: 1.35;
    padding: 4px 8px;
    border-radius: 6px;
}

.photo-audit-alert-item.warning {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.photo-audit-alert-item.success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

/* ==========================================================================
   FICHA DE INMUEBLE A PÁGINA COMPLETA (ESTILO ZONAPROP / AIRBNB PRO)
   ========================================================================== */

.property-page-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 20px 80px;
}

/* 1. Mosaico 5-Grid de Fotos */
.property-mosaic-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 8px;
    height: 460px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    margin-bottom: 28px;
    box-shadow: var(--shadow-card);
}

.mosaic-hero {
    position: relative;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    background: #e2e8f0;
}

.mosaic-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    height: 100%;
}

.mosaic-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #e2e8f0;
}

.mosaic-hero img,
.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease, filter 0.2s ease;
}

.mosaic-hero:hover img,
.mosaic-item:hover img {
    transform: scale(1.035);
}

.mosaic-btn-all {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid #cbd5e1;
    color: var(--text-heading);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    z-index: 10;
    transition: all 0.2s ease;
}

.mosaic-btn-all:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

/* 2. Distribución en 2 Columnas */
.property-layout-row {
    display: grid;
    grid-template-columns: 1fr 370px;
    gap: 36px;
    align-items: start;
}

.property-main-col {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.property-sidebar-col {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 3. Encabezado de Precios & Subtítulo */
.property-header-info {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
}

.property-header-subtitle {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
}

.property-header-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 10px;
}

.property-header-price-main {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 800;
    color: var(--emerald-primary);
    line-height: 1;
}

.property-header-expenses {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
}

.property-header-address {
    font-size: 15px;
    color: var(--text-body);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

/* 4. Barra Horizontal de Especificaciones Técnicas (Iconos Zonaprop) */
.property-specs-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 12px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.spec-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
}

.spec-strip-icon {
    font-size: 22px;
    color: var(--emerald-primary);
    margin-bottom: 2px;
}

.spec-strip-val {
    font-weight: 800;
    font-size: 15px;
    color: var(--text-heading);
    font-family: var(--font-heading);
}

.spec-strip-lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* 5. Tarjetas de Contenido General */
.property-section-box {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.property-section-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    color: var(--text-heading);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.property-description-body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-body);
    white-space: pre-line;
}

/* 6. Chips de Preguntas Rápidas */
.quick-query-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.quick-query-chip {
    background: #f8fafc;
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.quick-query-chip:hover,
.quick-query-chip.selected {
    background: rgba(5, 150, 105, 0.1);
    border-color: var(--emerald-primary);
    color: var(--emerald-primary);
    transform: translateY(-1px);
}

/* 7. Sidebar de Contacto Sticky */
.sticky-contact-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.btn-whatsapp-full {
    width: 100%;
    background: #25d366;
    color: #ffffff;
    font-weight: 800;
    font-size: 15px;
    padding: 14px 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
    transition: all 0.2s ease;
    margin-top: 14px;
}

.btn-whatsapp-full:hover {
    background: #20ba59;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}

/* 8. Tarjeta de Inteligencia de Mercado (Modo Interno) */
.market-intel-card {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.06), rgba(13, 148, 136, 0.08));
    border: 1.5px solid rgba(5, 150, 105, 0.25);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--shadow-sm);
}

/* 9. Lightbox Visor Completo de Fotos */
.property-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 15, 0.96);
    backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lightbox-content-wrap {
    position: relative;
    max-width: 92vw;
    max-height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content-wrap img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    object-fit: contain;
}

.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.lightbox-nav-btn:hover {
    background: rgba(255,255,255,0.4);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-nav-btn.prev { left: -64px; }
.lightbox-nav-btn.next { right: -64px; }

.lightbox-close-btn {
    position: absolute;
    top: 24px;
    right: 28px;
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.lightbox-close-btn:hover {
    background: rgba(255,255,255,0.4);
    transform: scale(1.1);
}

/* ==============================================================================
   MÓDULO DE SUSCRIPCIÓN & GESTIÓN DE PLANES SAAS
   ============================================================================== */

.subscription-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.usage-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease;
}

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

.usage-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.usage-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.usage-icon.emerald {
    background: var(--emerald-bg);
    color: var(--emerald-primary);
}

.usage-icon.orange {
    background: var(--orange-bg);
    color: var(--orange-accent);
}

.usage-icon.teal {
    background: rgba(13, 148, 136, 0.1);
    color: var(--teal-accent);
}

.usage-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0;
}

.usage-subtitle {
    font-size: 12px;
    color: var(--text-muted);
}

.usage-numbers {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
}

.usage-current {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    color: var(--text-heading);
}

.usage-total {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.usage-footer-note {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Selector de Ciclo de Facturación (Pills) */
.billing-cycle-selector {
    display: inline-flex;
    background: #f1f5f9;
    padding: 5px;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    gap: 4px;
}

.btn-cycle {
    border: none;
    background: transparent;
    padding: 8px 18px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-cycle.active {
    background: #ffffff;
    color: var(--text-heading);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.discount-badge {
    background: #dcfce7;
    color: #15803d;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
}

.discount-badge.highlight {
    background: #ffedd5;
    color: #c2410c;
}

/* Grilla de Planes SaaS */
.plans-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 24px;
    align-items: stretch;
}

.plan-card {
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s ease;
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: #cbd5e1;
}

.plan-card.featured {
    border-color: var(--emerald-primary);
    box-shadow: 0 6px 24px rgba(5, 150, 105, 0.15);
}

.plan-card.black {
    background: #0f172a;
    border-color: #334155;
    color: #ffffff;
}

.plan-card.active-current-plan {
    border-color: var(--emerald-primary);
    background: linear-gradient(180deg, rgba(5, 150, 105, 0.03) 0%, #ffffff 100%);
}

.current-plan-ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--emerald-primary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 12px;
    border-radius: 20px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.4);
    white-space: nowrap;
}

.featured-ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--orange-accent);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 12px;
    border-radius: 20px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
    white-space: nowrap;
}

.plan-header {
    margin-bottom: 20px;
}

.plan-badge-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 12px;
    margin-bottom: 10px;
}

.plan-badge-pill.starter { background: var(--plan-starter-bg); color: var(--plan-starter); }
.plan-badge-pill.starter-pro { background: var(--plan-starter-pro-bg); color: var(--plan-starter-pro); }
.plan-badge-pill.equipo { background: var(--plan-equipo-bg); color: var(--plan-equipo); }
.plan-badge-pill.empresa { background: var(--plan-empresa-bg); color: var(--plan-empresa); }
.plan-badge-pill.black { background: rgba(255,255,255,0.15); color: #ffffff; }

.plan-name {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    color: var(--text-heading);
    margin: 0 0 6px 0;
}

.plan-desc {
    font-size: 12px;
    color: var(--text-muted);
    min-height: 34px;
    line-height: 1.35;
    margin-bottom: 14px;
}

.plan-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.plan-price-wrap .currency {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-heading);
}

.plan-price-wrap .price-amount {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 800;
    color: var(--text-heading);
}

.plan-price-wrap .period {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

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

.plan-features li {
    font-size: 12.5px;
    color: var(--text-body);
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
}

.plan-features.dark li {
    color: #cbd5e1;
}

.plan-features li.disabled {
    color: #94a3b8;
    text-decoration: line-through;
    opacity: 0.6;
}

.plan-cta-wrap {
    margin-top: auto;
}

.btn-block {
    width: 100%;
    text-align: center;
    justify-content: center;
}

/* ==============================================================================
   RESPONSIVE DESIGN & MOBILE OPTIMIZATIONS
   ============================================================================== */

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

.btn-mobile-menu-toggle {
    display: none;
}

.mobile-user-drawer {
    display: none;
}

@media (max-width: 960px) {
    .property-mosaic-grid {
        grid-template-columns: 1fr;
        height: 300px;
    }
    .mosaic-subgrid {
        display: none;
    }
    .property-layout-row {
        grid-template-columns: 1fr;
    }
    .property-sidebar-col {
        position: static;
    }
    .lightbox-nav-btn.prev { left: 10px; }
    .lightbox-nav-btn.next { right: 10px; }
    
    .matcher-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* 1. Global Viewport & App Shell */
    html, body {
        overflow-x: hidden;
        overscroll-behavior-x: none;
        max-width: 100vw;
    }
    
    .app-shell {
        flex-direction: column;
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* 2. Sidebar como Drawer Móvil */
    .app-sidebar {
        transform: translateX(-100%) !important;
        width: 285px !important;
        min-width: 285px !important;
        max-width: 85vw !important;
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.35) !important;
        z-index: 1050 !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: transform 0.28s cubic-bezier(0.33, 1, 0.68, 1) !important;
    }

    .app-sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    /* Backdrop oscuro: Inactivo es display: none para no interceptar toques en WebKit */
    .sidebar-backdrop {
        display: none !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.65);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .sidebar-backdrop.active {
        display: block !important;
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar-collapse-btn {
        display: none !important;
    }

    .sidebar-close-mobile-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: #f1f5f9;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font-size: 16px;
        color: var(--text-heading);
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .sidebar-close-mobile-btn:active {
        background: #e2e8f0;
    }

    /* 3. Main Layout & Topbar en Mobile */
    .app-main-layout {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden;
    }

    .app-topbar {
        padding: 0 14px;
        height: 56px;
        z-index: 1030;
        position: sticky;
        top: 0;
    }

    .btn-mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        background: #f8fafc;
        border: 1.5px solid var(--border-color);
        border-radius: 10px;
        font-size: 18px;
        cursor: pointer;
        color: var(--text-heading);
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
    }

    .btn-mobile-menu-toggle:active {
        background: #e2e8f0;
        transform: scale(0.96);
    }

    .topbar-right {
        gap: 6px;
    }

    .topbar-public-website-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    .topbar-public-website-btn span {
        display: none !important;
    }

    @media (max-width: 520px) {
        .header-plan-badge {
            display: none !important;
        }
    }

    .hide-mobile {
        display: none !important;
    }

    .app-page-content {
        padding: 16px 12px;
    }

    /* 4. Banners & Guías */
    .hero-guide-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 14px 16px;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .hero-guide-banner > div:last-child {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
    .hero-guide-banner > div:last-child > * {
        width: 100%;
        text-align: center;
        justify-content: center;
        box-sizing: border-box;
    }

    /* 5. Metrics Grid (KPIs) */
    .metrics-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* 6. Catálogo & Tarjetas */
    .listings-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .property-card, .listing-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 7. Tablas con Scroll Horizontal Interno */
    .table-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .crm-table {
        min-width: 580px;
    }

    /* 8. Modales en Mobile */
    .modal-card {
        width: 94vw;
        max-width: 94vw;
        max-height: 90vh;
        margin: 10px auto;
        padding: 18px 16px;
        box-sizing: border-box;
    }
    .form-row {
        flex-direction: column;
        gap: 10px;
    }

    .form-control, .select-input, select, input[type="text"], input[type="number"] {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Tasador ACM Mobile-First Form Stacking */
    .appraisal-form-row-1,
    .appraisal-form-row-2,
    .appraisal-form-row-3 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .appraisal-form-row-3 .form-group:last-child {
        grid-column: span 1 !important;
    }
    .appraisal-form-row-4 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .appraisal-form-row-4 > div {
        width: 100% !important;
        min-width: 0 !important;
    }
    .appraisal-panel-card,
    .appraisal-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 16px 14px !important;
    }
    .appraisal-lookup-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .appraisal-lookup-row input,
    .appraisal-lookup-row button {
        width: 100% !important;
    }

    /* 9. Stock Header & Botones en Mobile */
    .stock-header-card {
        padding: 16px 16px;
    }

    .stock-header-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .stock-actions-bar {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .btn-stock-primary {
        width: 100%;
        justify-content: center;
    }

    .stock-actions-group {
        width: 100%;
        display: flex;
        gap: 6px;
    }

    .stock-actions-group .btn-stock-secondary {
        flex: 1;
        justify-content: center;
        padding: 0 8px;
        font-size: 11.5px;
    }

    .table-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px;
    }

    .toolbar-filters {
        flex-direction: column;
        max-width: 100%;
        width: 100%;
    }

    .stock-select-filter {
        max-width: 100%;
        width: 100%;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Multi-Select Autocomplete & Zone Search (Radar de Mercado / Catálogo)
   ========================================================================== */
.filter-group-multiselect {
    min-width: 220px;
    max-width: 320px;
    flex: 1;
    position: relative;
}

.filter-group-multiselect.active-dropdown {
    z-index: 99999;
}

.multiselect-counter {
    font-size: 10px;
    font-weight: 700;
    color: var(--emerald-hover, #047857);
    background: rgba(16, 185, 129, 0.12);
    padding: 2px 6px;
    border-radius: 10px;
}

.custom-multiselect {
    position: relative;
    user-select: none;
    width: 100%;
}

.custom-multiselect.open {
    z-index: 99999;
}

.custom-multiselect.disabled-control {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

.custom-multiselect.disabled-control .multiselect-control {
    background: #f1f5f9;
    cursor: not-allowed;
}

.multiselect-control {
    background: #f8fafc;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    padding: 6px 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
}

.custom-multiselect.open .multiselect-control {
    border-color: var(--emerald-primary, #10b981);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    background: #ffffff;
}

.multiselect-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tag-chip {
    background: rgba(16, 185, 129, 0.12);
    color: var(--emerald-hover, #065f46);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    animation: fadeInDown 0.15s ease-out;
}

.tag-chip-remove {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s;
}

.tag-chip-remove:hover {
    color: #ef4444;
}

.multiselect-search-input {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body, inherit);
    font-size: 12px;
    color: var(--text-heading, #0f172a);
    flex: 1;
    min-width: 85px;
    padding: 2px 0;
}

.multiselect-search-input::placeholder {
    color: var(--text-muted, #94a3b8);
}

.multiselect-arrow {
    font-size: 10px;
    color: var(--text-muted, #94a3b8);
    margin-left: auto;
    transition: transform 0.2s ease;
}

.custom-multiselect.open .multiselect-arrow {
    transform: rotate(180deg);
}

.multiselect-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 100%;
    background: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.16), 0 4px 10px rgba(15, 23, 42, 0.08);
    z-index: 999999 !important;
    display: flex;
    flex-direction: column;
    max-height: 280px;
    animation: fadeInDown 0.15s ease-out;
}

.multiselect-dropdown.hidden {
    display: none !important;
}

.multiselect-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.multiselect-dropdown-tip {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    display: flex;
    align-items: center;
    gap: 5px;
}

.multiselect-clear-btn {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
}

.multiselect-clear-btn:hover {
    text-decoration: underline;
}

.multiselect-options {
    overflow-y: auto;
    max-height: 220px;
    padding: 4px 0;
}

.multiselect-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-heading, #1e293b);
    cursor: pointer;
    transition: background 0.15s ease;
}

.multiselect-option:hover {
    background: #f1f5f9;
}

.multiselect-option.selected {
    background: rgba(16, 185, 129, 0.08);
    font-weight: 600;
}

.multiselect-option.highlighted-cordoba {
    background: rgba(16, 185, 129, 0.05);
    border-left: 3px solid var(--emerald-primary, #10b981);
}

.multiselect-option input[type="checkbox"] {
    accent-color: var(--emerald-primary, #10b981);
    cursor: pointer;
    width: 14px;
    height: 14px;
    pointer-events: none;
}

.multiselect-empty {
    padding: 14px;
    font-size: 12px;
    color: var(--text-muted, #94a3b8);
    text-align: center;
    font-style: italic;
}

.select-input:disabled {
    background: #f1f5f9;
    color: var(--text-muted, #94a3b8);
    cursor: not-allowed;
    border-color: #e2e8f0;
}

@media (max-width: 768px) {
    .modal-large, .modal-medium, .modal-xl {
        max-width: 95% !important;
        padding: 18px 16px !important;
    }
    .toggle-cards-row {
        grid-template-columns: 1fr !important;
    }
    .modal-header-compact {
        flex-direction: column;
        gap: 12px;
    }
}

/* ==========================================================================
   ABM INMOBILIARIAS (SUPERADMIN) & LOGOS
   ========================================================================== */
.agency-cell-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agency-logo-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.agency-avatar-fallback {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    flex-shrink: 0;
}

.agency-logo-preview-box {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    border: 2px dashed #cbd5e1;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.agency-logo-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.table-actions-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.btn-table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-table-action:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.btn-table-action.btn-edit:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.3);
}

.btn-table-action.btn-toggle:hover {
    color: #059669;
    background: rgba(5, 150, 105, 0.08);
    border-color: rgba(5, 150, 105, 0.3);
}

.btn-table-action.btn-delete:hover {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.3);
}

.agent-limit-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
}

/* ==========================================================================
   NOTIFICACIONES & MATCHES PROACTIVOS (TEMA CLARO - MANUAL DE DISEÑO)
   ========================================================================== */

.notifications-bell-container {
    position: relative;
}

.topbar-bell-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid var(--border-color, #e2e8f0);
    color: var(--text-heading, #0f172a);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.topbar-bell-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: var(--emerald-primary, #059669);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.topbar-bell-btn * {
    pointer-events: none;
}

.notifications-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    min-width: 19px;
    height: 19px;
    border-radius: 10px;
    line-height: 17px;
    text-align: center;
    padding: 0 4px;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.35);
}

.notifications-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 410px;
    max-width: 92vw;
    max-height: 540px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 20px 35px -8px rgba(15, 23, 42, 0.12), 0 10px 15px -5px rgba(15, 23, 42, 0.06);
    z-index: 1050;
    flex-direction: column;
    overflow: hidden;
    animation: notifDropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.notif-dropdown-header {
    padding: 13px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notif-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notif-header-icon-wrap {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.notif-header-title strong {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-heading, #0f172a);
    font-family: var(--font-heading, 'Outfit', sans-serif);
}

.notif-badge-pill {
    background: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 12px;
}

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

.notif-action-btn {
    border: none;
    background: none;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.notif-btn-scan {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0284c7;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.notif-btn-scan:hover {
    background: #f0f9ff;
    border-color: #7dd3fc;
    color: #0369a1;
}

.notif-btn-readall {
    color: var(--text-muted, #64748b);
    font-weight: 600;
    padding: 4px 6px;
}

.notif-btn-readall:hover {
    color: var(--text-heading, #0f172a);
}

.notif-list-container {
    overflow-y: auto;
    max-height: 410px;
    padding: 8px;
    background: #ffffff;
}

.notif-list-container::-webkit-scrollbar {
    width: 6px;
}
.notif-list-container::-webkit-scrollbar-track {
    background: #f8fafc;
}
.notif-list-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.notif-list-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.notif-empty-state {
    text-align: center;
    padding: 36px 20px;
    color: var(--text-muted, #64748b);
    font-size: 12.5px;
}

.notif-empty-state i {
    opacity: 0.4;
    margin-bottom: 10px;
    display: block;
    color: #94a3b8;
}

.notif-empty-state p {
    margin: 0;
    font-weight: 500;
}

/* Notification Item Card */
.notification-item-card {
    padding: 12px;
    margin-bottom: 6px;
    border-radius: 10px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-item-card.unread {
    background: #f8fafc;
    border: 1px solid #bae6fd;
    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.04);
}

.notification-item-card.read {
    background: #ffffff;
    border: 1px solid #f1f5f9;
}

.notification-item-card:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px -2px rgba(15, 23, 42, 0.06);
}

.notif-item-img {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.notif-item-img-placeholder {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 18px;
    flex-shrink: 0;
}

.notif-item-body {
    flex: 1;
    min-width: 0;
}

.notif-item-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.notif-client-pill {
    font-size: 10px;
    color: #0369a1;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.notif-time-str {
    font-size: 10px;
    color: var(--text-dim, #94a3b8);
    font-weight: 500;
}

.notif-item-title {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-heading, #0f172a);
    margin: 4px 0 3px 0;
    line-height: 1.35;
    font-family: var(--font-heading, 'Outfit', sans-serif);
}

.notif-item-msg {
    font-size: 11.5px;
    color: var(--text-body, #334155);
    margin: 0 0 8px 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-item-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.notif-score-badge {
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.notif-score-badge.score-emerald {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.notif-score-badge.score-amber {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.notif-score-badge.score-sky {
    background: #f0f9ff;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.notif-buttons-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.notif-btn-wa {
    background: #25D366;
    color: #ffffff !important;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 1px 3px rgba(37, 211, 102, 0.25);
    transition: background 0.15s ease, transform 0.1s ease;
}

.notif-btn-wa:hover {
    background: #1ebc57;
    transform: translateY(-1px);
}

.notif-btn-link {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569 !important;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.15s ease;
}

.notif-btn-link:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a !important;
}

.notif-btn-check {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #64748b;
    font-size: 11px;
    width: 25px;
    height: 25px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.15s ease;
}

.notif-btn-check:hover {
    background: #ecfdf5;
    border-color: #86efac;
    color: #059669;
}

.notif-dropdown-footer {
    padding: 11px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notif-footer-status {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.notif-footer-status i {
    color: #10b981;
}

.notif-footer-link {
    font-size: 11.5px;
    color: var(--emerald-primary, #059669);
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease;
}

.notif-footer-link:hover {
    color: #047857;
    text-decoration: underline;
}

/* ==========================================================================
   PROPERTY QUICKVIEW MODAL & FICHA INTEGRAL CRM
   ========================================================================== */
.property-quickview-card {
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05);
    background: #ffffff;
    animation: qvScaleIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes qvScaleIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.qv-spec-box {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.qv-spec-lbl {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.qv-spec-box strong {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-heading);
}

.qv-thumb-item {
    width: 76px;
    height: 56px;
    min-width: 76px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.7;
    transition: all 0.15s ease;
}

.qv-thumb-item.active {
    border-color: var(--emerald-primary, #059669);
    opacity: 1;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
}

.qv-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ficha Integral Cliente Workspace Modal */
.crm-client-sheet-modal {
    max-width: 1240px;
    width: 96%;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 60px -15px rgba(0,0,0,0.35);
}

.client-sheet-nav-tabs {
    display: flex;
    gap: 4px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.client-sheet-tab-btn {
    border: none;
    background: transparent;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.client-sheet-tab-btn.active {
    background: #ffffff;
    color: var(--text-heading);
    font-weight: 800;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Card hover & clickability */
.property-card.clickable-card {
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.property-card.clickable-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}

@media (max-width: 768px) {
    .property-quickview-card {
        width: 100% !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }
    .qv-main-grid {
        grid-template-columns: 1fr !important;
    }
    .crm-client-sheet-modal {
        width: 100% !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }
}

/* ==========================================================================
   EXECUTIVE REAL ESTATE CRM DESIGN SYSTEM (SaaS Premium)
   ========================================================================== */

/* 1. Segmented Toolbar Controls */
.crm-filter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.crm-segmented-filter-bar {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 9px;
    border: 1px solid #e2e8f0;
    gap: 2px;
    overflow-x: auto;
    max-width: 100%;
}

.crm-seg-btn {
    border: none;
    background: transparent;
    padding: 7px 13px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.crm-seg-btn:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
}

.crm-seg-btn.active {
    background: #ffffff;
    color: #0f172a;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.crm-seg-btn i {
    font-size: 11px;
    opacity: 0.9;
}

.crm-seg-badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #475569;
    line-height: 1.2;
    transition: all 0.15s ease;
}

.crm-seg-btn.active .crm-seg-badge {
    background: #0f172a;
    color: #ffffff;
}

.crm-seg-btn[data-filter="STOCK"].active .crm-seg-badge {
    background: #0d9488;
    color: #ffffff;
}

.crm-seg-btn[data-filter="FAVORITO"].active .crm-seg-badge {
    background: #e11d48;
    color: #ffffff;
}

.crm-seg-btn[data-filter="TOP_MATCH"].active .crm-seg-badge {
    background: #4f46e5;
    color: #ffffff;
}

/* 2. Executive KPI Strip */
.crm-kpi-strip {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 18px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    gap: 0;
    overflow-x: auto;
}

.crm-kpi-item {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    border-right: 1px solid #f1f5f9;
    flex: 1;
    min-width: 130px;
}

.crm-kpi-item:first-child {
    padding-left: 0;
}

.crm-kpi-item:last-child {
    border-right: none;
    padding-right: 0;
}

.crm-kpi-lbl {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.crm-kpi-val {
    font-family: var(--font-heading, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.crm-kpi-item.kpi-fav .crm-kpi-val {
    color: #e11d48;
}

.crm-kpi-item.kpi-stock .crm-kpi-val {
    color: #0d9488;
}

.crm-kpi-item.kpi-ai .crm-kpi-val {
    color: #4f46e5;
}

.crm-kpi-item.kpi-active .crm-kpi-val {
    color: #059669;
}

/* 3. Executive Selects & Inputs */
.crm-executive-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    padding: 5px 26px 5px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    height: 32px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.crm-executive-select:hover {
    border-color: #94a3b8;
}

.crm-executive-select:focus {
    outline: none;
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.crm-table-stage-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 13px;
    padding: 4px 22px 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #1e293b;
    height: 29px;
    width: 100%;
    max-width: 155px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.crm-table-stage-select:hover {
    border-color: #94a3b8;
    background-color: #f8fafc;
}

.crm-table-stage-select:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.12);
}

/* 4. Executive Favorite Button in Table */
.crm-table-fav-btn {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.crm-table-fav-btn:hover {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #e11d48;
}

.crm-table-fav-btn.is-fav {
    background: #e11d48;
    border-color: #be123c;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(225, 29, 72, 0.25);
}

.crm-table-fav-btn.is-fav i {
    color: #ffffff;
}

/* 5. Corporate Badges */
.badge-stock-luxury {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.2px;
}

.badge-portal-clean {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-comm-stock {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    padding: 2.5px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-comm-owner {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
    padding: 2.5px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-comm-colleague {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    padding: 2.5px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   ENTERPRISE AUTOCOMPLETE & MODAL CONTAINER SUITE
   ========================================================================== */

/* Enterprise Modal Container Architecture */
.modal-card-enterprise,
#stock-property-modal .modal-card {
    display: flex !important;
    flex-direction: column !important;
    max-height: 90vh !important;
    height: auto;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 16px;
    background: #ffffff !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.modal-card-enterprise .modal-header-compact,
#stock-property-modal .modal-header-compact {
    padding: 18px 26px;
    margin-bottom: 0;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 15;
}

.modal-card-enterprise .modal-body-scroll,
#stock-property-modal .modal-body-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    padding: 22px 26px;
}

.modal-card-enterprise .modal-footer-sticky,
#stock-property-modal .modal-footer-sticky {
    padding: 14px 26px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.04);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 15;
}

/* Responsive Grid for Distribution Row in Stock */
.stock-distribution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    align-items: flex-end;
}

.stock-distribution-grid .compact-toggle-btn {
    min-width: 110px;
    white-space: nowrap;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Autocomplete Container & Controls */
.ent-autocomplete-wrap {
    position: relative;
    width: 100%;
}

.ent-autocomplete-input {
    width: 100%;
    padding-right: 32px !important;
}

.ent-ac-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 17px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 50%;
    display: none;
    transition: all 0.15s ease;
    z-index: 5;
}

.ent-ac-clear-btn.visible {
    display: block;
}

.ent-ac-clear-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Autocomplete Dropdown Menu */
.ent-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 14px 30px -4px rgba(15, 23, 42, 0.18), 0 4px 10px -2px rgba(15, 23, 42, 0.08);
    max-height: 240px;
    overflow-y: auto;
    z-index: 1050;
    padding: 6px;
}

.ent-autocomplete-dropdown.hidden {
    display: none !important;
}

.ent-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ent-ac-item:hover,
.ent-ac-item.selected {
    background: #f1f5f9;
    color: #047857;
}

.ent-ac-item-icon {
    color: #10b981;
    font-size: 13px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.ent-ac-item-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ent-ac-match {
    color: #059669;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(5, 150, 105, 0.35);
}

.ent-ac-custom {
    border-top: 1px dashed #e2e8f0;
    margin-top: 4px;
    padding-top: 9px;
    color: #0284c7;
    background: #f8fafc;
}

.ent-ac-custom:hover,
.ent-ac-custom.selected {
    background: #e0f2fe;
    color: #0369a1;
}

.ent-ac-custom-icon {
    color: #0284c7;
    font-size: 14px;
}

.ent-ac-badge-custom {
    font-size: 10px;
    background: #e0f2fe;
    color: #0369a1;
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: auto;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ent-ac-empty {
    padding: 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ==========================================
   METRICAS, BITACORA & WORKSPACE DE STOCK
   ========================================== */
.priority-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.priority-pill.alta {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}
.priority-pill.media {
    background: #fffbe6;
    color: #d97706;
    border: 1px solid #fcd34d;
}
.priority-pill.baja {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #86efac;
}

.business-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 600;
}
.business-pill.flipping {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}
.business-pill.vivienda {
    background: #fdf4ff;
    color: #9333ea;
    border: 1px solid #f5d0fe;
}
.business-pill.inversion {
    background: #f0fdf4;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.dom-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 2px 7px;
    border-radius: 6px;
}

/* Tabs del Workspace Modal */
.workspace-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 18px;
    padding-bottom: 0;
}

.tab-btn {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-btn:hover {
    color: #0f172a;
}

.tab-btn.active {
    color: #059669;
    border-bottom-color: #059669;
    font-weight: 700;
}

/* Bitácora / Timeline de Notas */
.timeline-notes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

.note-item {
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #059669;
    border-radius: 8px;
    position: relative;
}

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

.note-title {
    font-weight: 700;
    font-size: 13.5px;
    color: #0f172a;
}

.note-meta {
    font-size: 11px;
    color: #64748b;
}

.note-body {
    font-size: 12.5px;
    color: #334155;
    line-height: 1.4;
}

.note-delete-btn {
    background: transparent;
    border: none;
    color: #ef4444;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.note-delete-btn:hover {
    background: #fef2f2;
}

/* Stock Pagination Bar & Buttons */
.stock-pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #ffffff;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 10px;
}

.stock-pagination-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.stock-pagination-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}

.btn-stock-page {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    color: var(--text-heading);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-stock-page:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: var(--emerald-primary);
}

.btn-stock-page:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f1f5f9;
}

.page-num-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    color: var(--text-body);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.page-num-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.page-num-btn.active {
    background: var(--emerald-primary);
    color: #ffffff;
    border-color: var(--emerald-primary);
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
}

.note-delete-btn {
    cursor: pointer;
    font-size: 11px;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
.note-delete-btn:hover {
    opacity: 1;
}

/* Reporte Preview Card */
.owner-report-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

/* ==========================================================================
   ENTERPRISE MOBILE & TABLET RESPONSIVE SYSTEM (OPPORTUNITY OS 2026)
   ========================================================================== */

/* 1. Global Viewport & Topbar Containment */
.app-topbar {
    max-width: 100vw;
    box-sizing: border-box;
    overflow: visible;
}

.topbar-agency-info {
    min-width: 0;
    flex-shrink: 1;
}

.sales-rep-topbar-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(99, 102, 241, 0.08);
    padding: 4px 10px;
    border-radius: 10px;
    border: 1.5px solid rgba(99, 102, 241, 0.25);
    max-width: 100%;
}

/* 2. CRM Kanban Board Touch Containment */
.crm-kanban-board {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-items: stretch;
    min-height: 580px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
    scroll-snap-type: x proximity;
}

.crm-kanban-board .kanban-column {
    flex: 1 1 0;
    min-width: 220px;
    scroll-snap-align: start;
}

/* 3. Tasador ACM Responsive Form Rows */
.appraisal-form-row-1 {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.3fr 1fr;
    gap: 12px;
}
.appraisal-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 12px;
}
.appraisal-form-row-3 {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1.2fr auto;
    align-items: end;
    gap: 12px;
}

/* 4. Sales Portal Pitch Grid */
.sales-pitch-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 24px;
}

/* 5. Agency Settings Grid */
.agency-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* 6. Messaging & WhatsApp IA Layout */
.messaging-layout-grid {
    display: grid;
    grid-template-columns: 320px 1fr 300px;
    gap: 16px;
    flex: 1;
    height: 100%;
    overflow: hidden;
}

/* 7. Tablet Adjustments (max-width: 1024px) */
@media (max-width: 1024px) {
    .crm-kanban-board .kanban-column {
        flex: 0 0 250px !important;
        min-width: 250px !important;
    }
    
    .messaging-layout-grid {
        grid-template-columns: 300px 1fr !important;
    }
    .lead-info-sidebar-panel {
        display: none !important;
    }

    .appraisal-form-row-1,
    .appraisal-form-row-2,
    .appraisal-form-row-3 {
        grid-template-columns: 1fr 1fr !important;
    }
    .appraisal-form-row-3 .form-group:last-child {
        grid-column: span 2;
    }

    .sales-pitch-grid,
    .agency-settings-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

/* 8. Mobile Adjustments (max-width: 768px) */
@media (max-width: 768px) {
    /* Topbar */
    .sales-rep-switcher-label {
        display: none !important;
    }
    .sales-rep-switcher-select {
        max-width: 135px !important;
        font-size: 11px !important;
        padding: 3px 6px !important;
    }
    .sales-rep-btn-text {
        display: none !important;
    }
    .topbar-agency-name {
        max-width: 140px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 12px !important;
    }
    .topbar-agency-info {
        max-width: calc(100vw - 150px) !important;
    }

    /* CRM Filter Toolbar */
    .crm-page-container .filter-panel {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }
    .crm-page-container .filter-panel > div {
        min-width: 100% !important;
        width: 100% !important;
        flex: none !important;
    }

    /* Oportunidades AI Clientes Toolbar */
    .clients-toolbar-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 12px 14px !important;
    }
    .clients-toolbar-wrap .search-box {
        max-width: 100% !important;
        width: 100% !important;
        flex: none !important;
    }
    .clients-filters-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .clients-filters-group .filter-item-inline {
        width: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 3px !important;
    }
    .clients-filters-group .filter-item-inline select {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Stock Action Buttons */
    .stock-actions-group {
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .stock-actions-group > * {
        flex: 1 1 calc(50% - 6px) !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Mensajería Master-Detail Switch */
    .messaging-page-container {
        height: calc(100vh - 75px) !important;
        min-height: unset !important;
    }
    .messaging-layout-grid {
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    .conversations-sidebar-panel {
        width: 100% !important;
        flex: 1 !important;
        display: flex !important;
    }
    .active-chat-panel {
        display: none !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 20 !important;
        background: #ffffff !important;
    }
    .messaging-layout-grid.mobile-chat-active .conversations-sidebar-panel {
        display: none !important;
    }
    .messaging-layout-grid.mobile-chat-active .active-chat-panel {
        display: flex !important;
    }
    .mobile-only-btn {
        display: inline-flex !important;
    }

    /* Integraciones & Alquileres Action Headers */
    .integrations-page-container .page-header-row > div:last-child,
    .rentals-page-container .page-header-row > div:last-child {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .integrations-page-container .page-header-row > div:last-child > *,
    .rentals-page-container .page-header-row > div:last-child > * {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 11.5px !important;
        padding: 8px 10px !important;
    }
}

/* 9. Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .app-page-content {
        padding: 12px 8px !important;
    }

    .clients-filters-group {
        grid-template-columns: 1fr !important;
    }

    .stock-actions-group > * {
        flex: 1 1 100% !important;
    }

    .integrations-page-container .page-header-row > div:last-child,
    .rentals-page-container .page-header-row > div:last-child {
        grid-template-columns: 1fr !important;
    }

    .appraisal-form-row-1,
    .appraisal-form-row-2,
    .appraisal-form-row-3 {
        grid-template-columns: 1fr !important;
    }
    .appraisal-form-row-3 .form-group:last-child {
        grid-column: span 1 !important;
    }
    .appraisal-lookup-row button {
        width: 100% !important;
    }

    .valuation-tiers-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   RENTAL ATTACHMENTS & DOCUMENT DROPZONES
   ========================================================================== */
.rental-file-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.rental-file-dropzone:hover {
    border-color: var(--emerald-primary);
    background: #f0fdf4;
}

.rental-file-dropzone.dragover {
    border-color: #059669;
    background: #dcfce7;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.rental-proof-badge {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
    font-weight: 700;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.rental-proof-badge:hover {
    background: #dcfce7;
    border-color: #4ade80;
    color: #14532d;
    transform: translateY(-1px);
}

/* ==========================================================================
   OPPORTUNITY PRO MODAL DESIGN SYSTEM & FORM ARCHITECTURE
   ========================================================================== */

@keyframes modalOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.modal-backdrop, .modal.fade {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 9999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    animation: modalOverlayFadeIn 0.22s ease-out;
}

.modal-card-pro {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.3), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    animation: modalScaleIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-card-pro.modal-sm { max-width: 500px; }
.modal-card-pro.modal-md { max-width: 620px; }
.modal-card-pro.modal-lg { max-width: 780px; }
.modal-card-pro.modal-xl { max-width: 920px; }

.modal-pro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.modal-pro-header-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.modal-pro-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.modal-pro-icon.emerald {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.modal-pro-icon.blue {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.modal-pro-icon.amber {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.modal-pro-icon.purple {
    background: #faf5ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
}

.modal-pro-title {
    font-family: var(--font-heading), 'Outfit', sans-serif;
    font-size: 17.5px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.3px;
    line-height: 1.25;
}

.modal-pro-subtitle {
    font-size: 12.5px;
    color: #64748b;
    margin: 3px 0 0;
    font-weight: 500;
}

.modal-pro-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.modal-pro-close:hover {
    background: #e2e8f0;
    color: #0f172a;
    transform: rotate(90deg) scale(1.05);
}

.modal-pro-body {
    padding: 22px 24px;
    overflow-y: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-pro-body > * {
    flex-shrink: 0;
}

.modal-pro-body::-webkit-scrollbar {
    width: 6px;
}
.modal-pro-body::-webkit-scrollbar-track {
    background: transparent;
}
.modal-pro-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.modal-pro-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.form-section-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 18px;
    position: relative;
    transition: border-color 0.2s;
}

.form-section-card:hover {
    border-color: #cbd5e1;
}

.form-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e2e8f0;
}

.form-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #0f172a;
}

.form-section-badge i {
    color: var(--emerald-primary);
    font-size: 13px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

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

.form-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.form-field-pro {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-label-pro {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-label-pro i {
    color: #64748b;
    font-size: 11.5px;
}

.form-label-pro .required-star {
    color: #ef4444;
    font-weight: 800;
}

.form-control-pro, .select-input-pro {
    width: 100%;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13.5px;
    color: #0f172a;
    font-family: var(--font-body), sans-serif;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
    height: 38px;
}

textarea.form-control-pro {
    height: auto;
    min-height: 75px;
    line-height: 1.45;
    resize: vertical;
}

.form-control-pro:hover, .select-input-pro:hover {
    border-color: #94a3b8;
}

.form-control-pro:focus, .select-input-pro:focus {
    border-color: var(--emerald-primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    background: #ffffff;
}

.input-icon-wrap {
    position: relative;
    width: 100%;
}

.input-icon-wrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 13px;
    pointer-events: none;
}

.input-icon-wrap .form-control-pro,
.input-icon-wrap .select-input-pro {
    padding-left: 36px;
}

.file-dropzone-pro {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 14px 18px;
    background: #ffffff;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.file-dropzone-pro:hover {
    border-color: var(--emerald-primary);
    background: #f0fdf4;
}

.modal-pro-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.btn-pro-cancel {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #475569;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.btn-pro-cancel:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}

.btn-pro-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    color: #ffffff;
    padding: 9px 22px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-pro-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
}

.btn-pro-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 768px) {
    .modal-card-pro {
        max-width: 100% !important;
        max-height: 94vh !important;
        border-radius: 16px !important;
    }
    .modal-pro-header, .modal-pro-body, .modal-pro-footer {
        padding: 14px 16px;
    }
    .form-grid-2, .form-grid-3, .form-grid-4 {
        grid-template-columns: 1fr;
    }
}