/* ==========================================================================
   EVALIA CRM · ADMIN PANEL DESIGN SYSTEM
   Light, professional, data-dense — inspired by Plusval/HubSpot/Pipedrive
   ========================================================================== */

:root {
    /* Brand */
    --brand-primary: #C4522A;

    /* La marca como color de TEXTO va aparte de la marca como fondo: el mismo
       terracota que pasa contraste con blanco encima (4.58) no lo pasa como
       texto sobre una superficie oscura (3.66). En claro son el mismo color;
       en oscuro se aclara con color-mix, que funciona también con el color
       propio de cada empresa y no sólo con el de la plataforma. */
    --brand-text: var(--brand-primary);
    --brand-primary-hover: #9B3D1C;
    --brand-primary-soft: #FDE8DE;
    --brand-primary-tint: #FAF3EE;
    --brand-navy: #3D4F62;
    --brand-navy-hover: #2A3748;
    --brand-navy-soft: #E8ECF0;

    /* Surfaces */
    --bg-app: #F6F7F9;
    --bg-surface: #FFFFFF;
    --bg-surface-hover: #F8FAFC;
    --bg-surface-muted: #F1F3F6;
    --bg-sidebar: #0F1B2A;
    --bg-sidebar-hover: #1A2D42;
    --bg-sidebar-active: rgba(196, 82, 42, 0.18);

    /* Text */
    --text-strong: #0F172A;
    --text-body: #334155;
    --text-muted: #64748B;
    --text-subtle: #94A3B8;
    --text-inverse: #FFFFFF;
    --text-sidebar: #C7D2DC;
    --text-sidebar-muted: #8996A5;

    /* Borders */
    --border-soft: #EEF1F4;
    --border-default: #E2E8F0;
    --border-strong: #CBD5E1;
    --border-sidebar: rgba(255, 255, 255, 0.08);

    /* Status */
    --success: #10B981;
    --success-soft: #D1FAE5;
    --success-text: #065F46;
    --warning: #F59E0B;
    --warning-soft: #FEF3C7;
    --warning-text: #92400E;
    --danger: #EF4444;
    --danger-soft: #FEE2E2;
    --danger-text: #991B1B;
    --info: #3B82F6;
    --info-soft: #DBEAFE;
    --info-text: #1E40AF;

    /* Morado: lo usan las etiquetas de «post-cierre» y de plantilla. Estaba
       escrito a mano en las reglas y por eso no participaba del tema. */
    --purple: #A855F7;
    --purple-soft: #F3E8FF;
    --purple-text: #6B21A8;

    /* Tonos intermedios que aparecían sueltos en el código. */
    --danger-strong: #B91C1C;
    --success-strong: #059669;
    --text-body-strong: #475569;

    /* Shadows */
    /* Sombra de borde para lo que se desplaza de lado; en oscuro se invierte. */
    --sombra-borde: rgba(15, 23, 42, 0.16);
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 10px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 10px 20px -4px rgba(15, 23, 42, 0.10), 0 4px 8px -4px rgba(15, 23, 42, 0.08);
    --shadow-xl: 0 20px 40px -8px rgba(15, 23, 42, 0.14), 0 8px 16px -8px rgba(15, 23, 42, 0.10);
    --shadow-focus: 0 0 0 3px rgba(196, 82, 42, 0.18);

    /* Radii */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 999px;

    /* Motion */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 150ms;
    --dur: 220ms;
    --dur-slow: 360ms;

    /* Layout */
    --sidebar-w: 260px;
    --sidebar-w-collapsed: 72px;
    --topbar-h: 64px;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-body);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-strong); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.625rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }
p { margin: 0; }
a { color: var(--brand-text); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--brand-primary-hover); }
code, pre { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
hr { border: 0; border-top: 1px solid var(--border-default); margin: 1.5rem 0; }

/* ==========================================================================
   SCROLLBARS
   ========================================================================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid var(--bg-app); }
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-color: var(--bg-sidebar); }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

/* ==========================================================================
   LAYOUT SHELL
   ========================================================================== */
.app-shell { display: flex; min-height: 100vh; align-items: flex-start; }
.app-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--bg-sidebar);
    color: var(--text-sidebar);
    display: flex;
    flex-direction: column;
    transition: width var(--dur) var(--ease);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 40;
}
.app-sidebar.collapsed { width: var(--sidebar-w-collapsed); }
.app-sidebar.collapsed .sidebar-text,
.app-sidebar.collapsed .sidebar-badge,
.app-sidebar.collapsed .sidebar-section-label { display: none; }
.app-sidebar.collapsed .sidebar-brand-full { display: none; }
.app-sidebar.collapsed .sidebar-brand-mini { display: flex; }
.app-sidebar.collapsed .sidebar-nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.app-sidebar.collapsed .sidebar-nav-item i { margin: 0; }
.app-sidebar.collapsed .sidebar-user-text { display: none; }

/* Con el riel plegado, el nombre del destino sale al pasar por encima. El
   `title` del navegador tarda un segundo largo y no se puede peinar.

   El globo NO puede ser un ::after del enlace: el riel necesita
   `overflow-x: hidden` para poder desplazarse en vertical con sus 39
   destinos, y eso se lo comía. Va suelto en <body>, colocado por JS desde la
   posición real del icono. */
.riel-globo {
    position: fixed;
    z-index: 200;
    background: var(--bg-sidebar);
    color: var(--text-inverse);
    border: 1px solid var(--border-sidebar);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 7px 11px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--dur-fast) var(--ease);
}

.riel-globo.visible { opacity: 1; }

/* En una pantalla táctil no hay «pasar por encima»: el globo se quedaría
   pegado tras el toque, justo encima del siguiente destino. */
@media (hover: none) {
    .riel-globo { display: none; }
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-left: var(--sidebar-w);
    transition: margin-left var(--dur) var(--ease);
}
.app-sidebar.collapsed ~ .app-main { margin-left: var(--sidebar-w-collapsed); }
/* El relleno de la página vive en una variable porque las tablas lo usan para
   sangrar a los bordes con un margen negativo. Cuando eran dos números sueltos
   se desincronizaron —relleno 12, sangrado 16— y toda la página se iba 4px a la
   derecha en pantallas de menos de 400px. */
.app-content { flex: 1; --gutter: 28px; padding: var(--gutter); max-width: 100%; }
@media (max-width: 768px) { .app-content { --gutter: 16px; } }

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.sidebar-brand {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-sidebar);
    display: flex;
    align-items: center;
    min-height: var(--topbar-h);
}
.sidebar-brand-full { display: flex; align-items: center; gap: 12px; width: 100%; }
.sidebar-brand-full img { height: 32px; max-width: 170px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.95; }
/* Marca en texto para las empresas que aún no han subido su logotipo. Antes
   caían en el logo de EVALIA, que no es suyo. */
.sidebar-brand-full .sidebar-brand-txt {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 16px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2;
    color: #fff;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.sidebar-brand-mini { display: none; align-items: center; justify-content: center; width: 100%; }
.sidebar-brand-mini .brand-tile {
    width: 36px; height: 36px;
    background: var(--brand-primary);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 800; font-size: 18px;
    box-shadow: var(--shadow-md);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
.sidebar-section-label {
    padding: 10px 12px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-sidebar-muted);
}
.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-sidebar);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    position: relative;
    margin-bottom: 1px;
    text-decoration: none;
}
.sidebar-nav-item i { width: 18px; text-align: center; font-size: 14px; color: var(--text-sidebar-muted); transition: color var(--dur-fast) var(--ease); }
.sidebar-nav-item:hover { background: var(--bg-sidebar-hover); color: #fff; }
.sidebar-nav-item:hover i { color: var(--brand-text); }
.sidebar-nav-item.active {
    background: var(--bg-sidebar-active);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--brand-primary);
}
.sidebar-nav-item.active i { color: var(--brand-text); }
.sidebar-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--brand-primary);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.sidebar-badge.muted { background: var(--text-body-strong); }

.sidebar-user {
    padding: 12px;
    border-top: 1px solid var(--border-sidebar);
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar-user .avatar {
    width: 36px; height: 36px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
    color: white;
    font-weight: 700;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
}
.sidebar-user-text { min-width: 0; flex: 1; }
.sidebar-user-text .name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-text .email { font-size: 11px; color: var(--text-sidebar-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   TOPBAR
   ========================================================================== */
.app-topbar {
    height: var(--topbar-h);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 30;
}
.topbar-toggle {
    width: 36px; height: 36px;
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-body);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}
.topbar-toggle:hover { background: var(--bg-surface-muted); color: var(--brand-text); }

.topbar-breadcrumb { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); min-width: 0; }
.topbar-breadcrumb a { color: var(--text-muted); font-weight: 500; }
.topbar-breadcrumb a:hover { color: var(--brand-text); }
.topbar-breadcrumb .sep { color: var(--text-subtle); font-size: 10px; }
.topbar-breadcrumb .current { color: var(--text-strong); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar-search {
    position: relative;
    width: 320px;
    max-width: 40vw;
}
.topbar-search input {
    width: 100%;
    height: 38px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--bg-surface-muted);
    font-size: 13px;
    color: var(--text-body);
    transition: all var(--dur-fast) var(--ease);
}
.topbar-search input:focus { outline: none; background: var(--bg-surface); border-color: var(--brand-text); box-shadow: var(--shadow-focus); }
.topbar-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); font-size: 13px; }
.topbar-search kbd {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: var(--bg-surface); border: 1px solid var(--border-default);
    padding: 2px 6px; border-radius: 4px; font-size: 11px; color: var(--text-muted);
    font-family: inherit;
}

.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar-icon-btn {
    position: relative;
    width: 38px; height: 38px;
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-body);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}
.topbar-icon-btn:hover { background: var(--bg-surface-muted); color: var(--brand-text); border-color: var(--border-strong); }
.topbar-icon-btn .dot {
    position: absolute; top: 8px; right: 8px;
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--brand-primary);
    border: 2px solid var(--bg-surface);
}

/* Botón "Crear" global del topbar */
.topbar-create {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 16px;
    border: 0;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
    color: #fff;
    border-radius: var(--radius);
    font-size: 13px; font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 12px -4px rgba(196,82,42,.5);
    transition: all var(--dur-fast) var(--ease);
    white-space: nowrap;
}
.topbar-create:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -4px rgba(196,82,42,.6); }
.topbar-create:active { transform: scale(.98); }
.topbar-create i { font-size: 13px; }
@media (max-width: 640px) {
    .topbar-create { padding: 0; width: 38px; justify-content: center; }
    .topbar-create .lbl { display: none; }
}

.topbar-user {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}
.topbar-user:hover { background: var(--bg-surface-muted); }
.topbar-user .avatar {
    width: 30px; height: 30px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
    color: white;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px;
}
.topbar-user .meta { display: flex; flex-direction: column; line-height: 1.15; }
.topbar-user .meta .name { font-size: 12.5px; font-weight: 600; color: var(--text-strong); }
.topbar-user .meta .role { font-size: 10.5px; color: var(--text-muted); font-weight: 500; }
@media (max-width: 640px) { .topbar-user .meta, .topbar-search { display: none; } }

/* ==========================================================================
   DROPDOWNS
   ========================================================================== */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 6px); right: 0;
    min-width: 240px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 6px;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all var(--dur-fast) var(--ease);
}
.dropdown.open .dropdown-menu,
.dropdown-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-header { padding: 10px 12px 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
.dropdown-header .title { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.dropdown-header .subtitle { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-body);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    text-decoration: none;
}
.dropdown-item i { width: 16px; text-align: center; color: var(--text-muted); }
.dropdown-item:hover { background: var(--bg-surface-muted); color: var(--text-strong); }
.dropdown-item.danger { color: var(--danger-text); }
.dropdown-item.danger:hover { background: var(--danger-soft); }
.dropdown-separator { height: 1px; background: var(--border-soft); margin: 4px 6px; }

/* ==========================================================================
   PAGE HEADER
   ========================================================================== */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-default);
}
.page-header .page-title { display: flex; align-items: center; gap: 12px; }
.page-header .page-title i { color: var(--brand-text); font-size: 22px; }
.page-header .page-title h1 { font-size: 22px; font-weight: 700; }
.page-header .page-subtitle { color: var(--text-muted); font-size: 13.5px; margin-top: 4px; }
.page-header .page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--dur-fast) var(--ease);
    white-space: nowrap;
    line-height: 1;
    user-select: none;
}
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn i { font-size: 13px; }
.btn-sm { padding: 7px 12px; font-size: 12.5px; }
.btn-lg { padding: 12px 22px; font-size: 14.5px; }

.btn-primary { background: var(--brand-primary); color: white; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-primary-hover); color: white; box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn-secondary { background: var(--bg-surface); color: var(--text-strong); border-color: var(--border-default); }
.btn-secondary:hover { background: var(--bg-surface-muted); border-color: var(--border-strong); color: var(--text-strong); }

.btn-navy { background: var(--brand-navy); color: white; box-shadow: var(--shadow-sm); }
.btn-navy:hover { background: var(--brand-navy-hover); color: white; box-shadow: var(--shadow-md); }

.btn-ghost { background: transparent; color: var(--text-body); }
.btn-ghost:hover { background: var(--bg-surface-muted); color: var(--text-strong); }

.btn-danger { background: var(--danger); color: white; box-shadow: var(--shadow-sm); }
.btn-danger:hover { background: var(--danger-strong); color: white; }

.btn-success { background: var(--success); color: white; box-shadow: var(--shadow-sm); }
.btn-success:hover { background: var(--success-strong); color: white; }

.btn-outline { background: transparent; color: var(--brand-text); border-color: var(--brand-text); }
.btn-outline:hover { background: var(--brand-primary-tint); }

.btn-icon { padding: 0; width: 36px; height: 36px; }
.btn-block { width: 100%; }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.card-header h3 { font-size: 15px; font-weight: 600; }
.card-header .subtitle { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.card-body { padding: 20px; }
.card-footer { padding: 14px 20px; border-top: 1px solid var(--border-soft); background: var(--bg-surface-muted); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ==========================================================================
   KPI CARDS
   ========================================================================== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: all var(--dur) var(--ease);
}
.kpi-card:hover { border-color: var(--brand-text); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi-card .kpi-icon {
    width: 42px; height: 42px;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
}
.kpi-card .kpi-icon.primary,
.kpi-icon.primary { background: var(--brand-primary-soft); color: var(--brand-text); }
.kpi-card .kpi-icon.navy,
.kpi-icon.navy { background: var(--brand-navy-soft); color: var(--brand-navy); }
.kpi-card .kpi-icon.success,
.kpi-icon.success { background: var(--success-soft); color: var(--success-text); }
.kpi-card .kpi-icon.warning,
.kpi-icon.warning { background: var(--warning-soft); color: var(--warning-text); }
.kpi-card .kpi-icon.info,
.kpi-icon.info { background: var(--info-soft); color: var(--info-text); }
.kpi-card .kpi-icon.danger,
.kpi-icon.danger { background: var(--danger-soft); color: var(--danger-text); }
.kpi-icon { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); }
.kpi-card .kpi-label { font-size: 12.5px; font-weight: 500; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.kpi-card .kpi-value { font-size: 28px; font-weight: 700; color: var(--text-strong); line-height: 1.1; letter-spacing: -0.02em; }
.kpi-card .kpi-trend { margin-top: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.kpi-card .kpi-trend.up { color: var(--success-text); }
.kpi-card .kpi-trend.down { color: var(--danger-text); }
.kpi-card .kpi-trend.flat { color: var(--text-muted); }
.kpi-card .kpi-meta { margin-top: 10px; font-size: 12px; color: var(--text-muted); }

/* ==========================================================================
   BADGES & CHIPS
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: var(--radius-full);
    line-height: 1.3;
    white-space: nowrap;
}
.badge-success { background: var(--success-soft); color: var(--success-text); }
.badge-warning { background: var(--warning-soft); color: var(--warning-text); }
.badge-danger { background: var(--danger-soft); color: var(--danger-text); }
.badge-info { background: var(--info-soft); color: var(--info-text); }
.badge-primary { background: var(--brand-primary-soft); color: var(--brand-primary-hover); }
.badge-navy { background: var(--brand-navy-soft); color: var(--brand-navy); }
.badge-muted { background: var(--bg-surface-muted); color: var(--text-muted); }
.badge-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-body); }
.badge .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: var(--radius-full);
    background: var(--bg-surface-muted);
    color: var(--text-body);
    border: 1px solid var(--border-default);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}
.chip:hover { background: var(--bg-surface); border-color: var(--border-strong); }
.chip.active { background: var(--brand-primary); color: white; border-color: var(--brand-text); }

/* Lead score badges */
.score-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: var(--radius-full); }
.score-badge.hot { background: var(--danger-soft); color: var(--danger-strong); }
.score-badge.warm { background: var(--warning-soft); color: var(--warning-text); }
.score-badge.cold { background: var(--info-soft); color: var(--info-text); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-strong); margin-bottom: 6px; letter-spacing: 0.01em; }
.form-label .required { color: var(--danger); margin-left: 2px; }
.form-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }
.form-error { font-size: 11.5px; color: var(--danger-text); margin-top: 5px; display: flex; align-items: center; gap: 4px; }

.form-control, .form-select, textarea.form-control {
    width: 100%;
    padding: 9px 12px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--text-body);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    transition: all var(--dur-fast) var(--ease);
    line-height: 1.4;
}
.form-control:hover, .form-select:hover { border-color: var(--border-strong); }
.form-control:focus, .form-select:focus, textarea.form-control:focus {
    outline: none;
    border-color: var(--brand-text);
    box-shadow: var(--shadow-focus);
    background: var(--bg-surface);
}
.form-control[disabled], .form-select[disabled] { background: var(--bg-surface-muted); color: var(--text-muted); cursor: not-allowed; }
.form-select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' 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/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
textarea.form-control { resize: vertical; min-height: 90px; }

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

.input-group { display: flex; align-items: stretch; }
.input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-suffix { display: inline-flex; align-items: center; padding: 0 14px; background: var(--bg-surface-muted); border: 1px solid var(--border-default); border-left: 0; border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); font-size: 13px; color: var(--text-muted); font-weight: 600; }

.form-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; color: var(--text-body); }
.form-check input[type="checkbox"], .form-check input[type="radio"] { width: 16px; height: 16px; accent-color: var(--brand-text); cursor: pointer; }

.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; transition: var(--dur-fast); cursor: pointer; }
.switch .track::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: white; border-radius: 999px; transition: var(--dur-fast); box-shadow: var(--shadow-xs); }
.switch input:checked + .track { background: var(--brand-primary); }
.switch input:checked + .track::before { transform: translateX(18px); }

/* ==========================================================================
   TABLES
   ========================================================================== */
/* `overflow: hidden` recortaba de verdad: una tabla de siete columnas mide
   1097 px y a 1200 de ventana su caja son 884, así que 213 px de columnas
   quedaban fuera SIN barra para llegar a ellas —y a 1024, 389 px—. Sólo se
   podían ver por debajo de 768, donde una regla suelta ponía `auto`.
   El eje vertical sigue recortado para que el borde redondeado no se rompa. */
.table-wrap { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow-x: auto; overflow-y: hidden; }

/* Cortada sin más, una tabla parece rota. Estas dos sombras de borde aparecen
   sólo del lado que tiene contenido fuera y desaparecen al llegar al final: el
   truco está en `background-attachment`, donde las dos capas `local` viajan con
   el scroll y tapan a las `scroll`, que están quietas. Sin JS. */
.table-wrap,
.table-responsive,
.data-table-wrap {
    background-image:
        linear-gradient(to right, var(--bg-surface) 30%, transparent),
        linear-gradient(to left,  var(--bg-surface) 30%, transparent),
        linear-gradient(to right, var(--sombra-borde), transparent),
        linear-gradient(to left,  var(--sombra-borde), transparent);
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 26px 100%, 26px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* La barra se ve: es la otra señal de que a la derecha queda tabla. */
.table-wrap::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.data-table-wrap::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.data-table-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.table-wrap::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.data-table-wrap::-webkit-scrollbar-track { background: var(--bg-surface-muted); border-radius: 999px; }
.table-wrap .toolbar { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 12px 16px;
    background: var(--bg-surface-muted);
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
}
.table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border-soft); color: var(--text-body); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--dur-fast) var(--ease); }
.table tbody tr:hover { background: var(--bg-surface-muted); }
.table tbody td.strong { color: var(--text-strong); font-weight: 600; }
.table .row-actions { display: inline-flex; gap: 4px; }
.table .row-actions a, .table .row-actions button {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    font-size: 13px;
}
.table .row-actions a:hover, .table .row-actions button:hover { background: var(--bg-surface-muted); color: var(--brand-text); border-color: var(--border-default); }

.pagination { display: flex; align-items: center; gap: 4px; padding: 14px 16px; border-top: 1px solid var(--border-soft); justify-content: space-between; flex-wrap: wrap; }
.pagination .info { font-size: 12.5px; color: var(--text-muted); }
.pagination .pages { display: flex; gap: 4px; }
.pagination .pages a, .pagination .pages span {
    min-width: 32px; height: 32px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    font-size: 13px; font-weight: 500;
    color: var(--text-body);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    text-decoration: none;
    transition: all var(--dur-fast) var(--ease);
}
.pagination .pages a:hover { background: var(--bg-surface-muted); color: var(--brand-text); }
.pagination .pages .active { background: var(--brand-primary); color: white; border-color: var(--brand-text); }
.pagination .pages .disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ==========================================================================
   EMPTY STATES
   ========================================================================== */
.empty-state { text-align: center; padding: 48px 24px; }
.empty-state .icon {
    width: 64px; height: 64px; margin: 0 auto 16px;
    background: var(--bg-surface-muted);
    color: var(--text-subtle);
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
}
.empty-state h3 { font-size: 16px; margin-bottom: 6px; }
.empty-state p { color: var(--text-muted); font-size: 13.5px; max-width: 400px; margin: 0 auto 20px; }

/* ==========================================================================
   ALERTS / TOASTS
   ========================================================================== */
.alert { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--radius); font-size: 13.5px; margin-bottom: 16px; border: 1px solid transparent; }
.alert i { margin-top: 2px; }
.alert-success { background: var(--success-soft); color: var(--success-text); border-color: rgba(16, 185, 129, 0.2); }
.alert-warning { background: var(--warning-soft); color: var(--warning-text); border-color: rgba(245, 158, 11, 0.2); }
.alert-danger { background: var(--danger-soft); color: var(--danger-text); border-color: rgba(239, 68, 68, 0.2); }
.alert-info { background: var(--info-soft); color: var(--info-text); border-color: rgba(59, 130, 246, 0.2); }

.toast-stack { position: fixed; top: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.toast {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 12px 14px;
    animation: toast-in 300ms var(--ease-out);
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
.toast i { margin-top: 2px; font-size: 14px; }
.toast.success i { color: var(--success); }
.toast.error i { color: var(--danger); }
.toast.warning i { color: var(--warning); }
.toast .body { flex: 1; font-size: 13px; color: var(--text-strong); }
.toast .close { cursor: pointer; color: var(--text-muted); background: transparent; border: 0; padding: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }

/* ==========================================================================
   MODALS
   ========================================================================== */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(4px); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade-in 180ms var(--ease); }
.modal { background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); width: 100%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column; animation: modal-in 220ms var(--ease-out); }
.modal.lg { max-width: 720px; }
.modal.xl { max-width: 960px; }
.modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; }
.modal-header h3 { font-size: 16px; }
.modal-body { padding: 22px; overflow-y: auto; }
.modal-footer { padding: 14px 22px; border-top: 1px solid var(--border-soft); background: var(--bg-surface-muted); display: flex; gap: 10px; justify-content: flex-end; border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ==========================================================================
   TABS
   ========================================================================== */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-default); margin-bottom: 20px; overflow-x: auto; }
.tab-item {
    padding: 12px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    white-space: nowrap;
    background: transparent;
    border-top: 0; border-left: 0; border-right: 0;
    text-decoration: none;
}
.tab-item:hover { color: var(--text-strong); }
.tab-item.active { color: var(--brand-text); border-bottom-color: var(--brand-text); }

/* ==========================================================================
   AVATARS
   ========================================================================== */
.avatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--bg-surface-muted); color: var(--text-strong); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.avatar.lg { width: 44px; height: 44px; font-size: 14px; }
.avatar.xl { width: 64px; height: 64px; font-size: 20px; }
.avatar-group { display: inline-flex; }
.avatar-group .avatar { border: 2px solid var(--bg-surface); margin-left: -8px; }
.avatar-group .avatar:first-child { margin-left: 0; }

/* ==========================================================================
   TIMELINE
   ========================================================================== */
.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--border-default); }
.timeline-item { position: relative; padding-bottom: 22px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item .marker {
    position: absolute;
    left: -30px;
    top: 2px;
    width: 24px; height: 24px;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-surface);
    border: 2px solid var(--border-default);
    font-size: 10px;
    color: var(--text-muted);
    z-index: 1;
}
.timeline-item .marker.call { background: var(--info-soft); color: var(--info-text); border-color: var(--info-soft); }
.timeline-item .marker.email { background: var(--brand-primary-soft); color: var(--brand-text); border-color: var(--brand-primary-soft); }
.timeline-item .marker.meeting { background: var(--warning-soft); color: var(--warning-text); border-color: var(--warning-soft); }
.timeline-item .marker.whatsapp { background: var(--success-soft); color: var(--success-text); border-color: var(--success-soft); }
.timeline-item .marker.visit { background: var(--purple-soft); color: var(--purple-text); border-color: var(--purple-soft); }
.timeline-item .content { background: var(--bg-surface-muted); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; }
.timeline-item .meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; }
.timeline-item .title { font-size: 13.5px; font-weight: 600; color: var(--text-strong); margin-bottom: 3px; }
.timeline-item .desc { font-size: 13px; color: var(--text-body); }

/* ==========================================================================
   KANBAN
   ========================================================================== */
.kanban { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; }
.kanban-column { flex: 0 0 300px; background: var(--bg-surface-muted); border-radius: var(--radius-lg); border: 1px solid var(--border-default); display: flex; flex-direction: column; max-height: calc(100vh - 220px); }
.kanban-column-header { padding: 12px 14px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; background: var(--bg-surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.kanban-column-header .title { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-strong); display: flex; align-items: center; gap: 8px; }
.kanban-column-header .dot { width: 8px; height: 8px; border-radius: 999px; }
.kanban-column-header .count { font-size: 11px; font-weight: 600; background: var(--bg-surface-muted); color: var(--text-muted); padding: 2px 8px; border-radius: 999px; }
.kanban-column-body { flex: 1; padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.kanban-column.drop-hover .kanban-column-body { background: rgba(196, 82, 42, 0.05); }
.kanban-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: 12px;
    cursor: grab;
    transition: all var(--dur-fast) var(--ease);
    box-shadow: var(--shadow-xs);
}
.kanban-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--brand-text); }
.kanban-card.dragging { opacity: 0.5; cursor: grabbing; }
.kanban-card .name { font-size: 13.5px; font-weight: 600; color: var(--text-strong); margin-bottom: 4px; }
.kanban-card .meta { font-size: 11.5px; color: var(--text-muted); }
.kanban-card .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

/* Botón "mover" en la tarjeta (esencial para táctil donde no hay drag&drop) */
.kanban-card .card-move {
    width: 26px; height: 26px; flex-shrink: 0;
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted); cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    font-size: 12px;
}
.kanban-card .card-move:hover { background: var(--brand-primary-soft); color: var(--brand-text); border-color: var(--brand-text); }

/* Collapse de columnas (usado en móvil) */
.kanban-column-header .col-chevron { display: none; margin-left: 6px; color: var(--text-subtle); font-size: 12px; transition: transform var(--dur) var(--ease); }

/* ===== Kanban en móvil: columnas apiladas y colapsables ===== */
@media (max-width: 900px) {
    .kanban { flex-direction: column; overflow-x: visible; gap: 10px; max-height: none !important; }
    .kanban-column { flex: 1 1 auto; max-height: none; }
    .kanban-column-header { cursor: pointer; user-select: none; }
    .kanban-column-header .col-chevron { display: inline-block; }
    .kanban-column.collapsed .col-chevron { transform: rotate(-90deg); }
    .kanban-column.collapsed .kanban-column-body { display: none; }
    .kanban-column-body { max-height: 60vh; }
    /* En móvil mostramos el botón mover siempre visible y un poco más grande */
    .kanban-card .card-move { width: 30px; height: 30px; font-size: 13px; }
}

/* Bottom sheet para mover lead entre etapas */
.move-sheet-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1100; display: none; align-items: flex-end; justify-content: center; }
.move-sheet-backdrop.open { display: flex; animation: fade-in .18s var(--ease); }
.move-sheet { background: var(--bg-surface); width: 100%; max-width: 460px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 8px 8px 16px; box-shadow: 0 -10px 40px -10px rgba(0,0,0,.3); animation: sheet-up .25s var(--ease-out); }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.move-sheet .sheet-grip { width: 40px; height: 4px; background: var(--border-strong); border-radius: 999px; margin: 6px auto 12px; }
.move-sheet .sheet-title { font-size: 13px; font-weight: 700; color: var(--text-strong); padding: 0 14px 10px; display: flex; align-items: center; justify-content: space-between; }
.move-sheet .sheet-title .sub { font-weight: 500; font-size: 12px; color: var(--text-muted); }
.move-sheet .sheet-opt { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--radius); cursor: pointer; transition: background var(--dur-fast) var(--ease); border: 0; background: none; width: 100%; text-align: left; font-family: inherit; font-size: 14px; color: var(--text-body); }
.move-sheet .sheet-opt:hover { background: var(--bg-surface-muted); }
.move-sheet .sheet-opt .sdot { width: 12px; height: 12px; border-radius: 999px; flex-shrink: 0; }
.move-sheet .sheet-opt.current { font-weight: 700; color: var(--text-strong); }
.move-sheet .sheet-opt.current::after { content: 'Actual'; margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-subtle); background: var(--bg-surface-muted); padding: 2px 8px; border-radius: 999px; }
@media (min-width: 560px) { .move-sheet-backdrop { align-items: center; } .move-sheet { border-radius: var(--radius-xl); } }

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.flex { display: flex; } .inline-flex { display: inline-flex; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .flex-col { flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; } }

.text-xs { font-size: 11.5px; } .text-sm { font-size: 12.5px; } .text-base { font-size: 14px; } .text-lg { font-size: 16px; } .text-xl { font-size: 18px; } .text-2xl { font-size: 22px; } .text-3xl { font-size: 28px; }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; }
.text-strong { color: var(--text-strong); } .text-body { color: var(--text-body); } .text-muted { color: var(--text-muted); } .text-subtle { color: var(--text-subtle); }
.text-primary { color: var(--brand-text); } .text-navy { color: var(--brand-navy); }
.text-success { color: var(--success-text); } .text-warning { color: var(--warning-text); } .text-danger { color: var(--danger-text); } .text-info { color: var(--info-text); }
.uppercase { text-transform: uppercase; letter-spacing: 0.06em; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }
.p-0 { padding: 0; } .p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } .p-6 { padding: 24px; }
.w-full { width: 100%; } .h-full { height: 100%; }
.rounded { border-radius: var(--radius); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-full { border-radius: var(--radius-full); }
.border { border: 1px solid var(--border-default); }
.shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); }
.hidden { display: none; }
/* Contenido que solo existe en el papel: se enciende en el bloque PAPEL. */
.solo-impresion { display: none; }
@media (max-width: 768px) { .md\:hidden { display: none; } }
@media (min-width: 769px) { .mobile-only { display: none; } }

/* ==========================================================================
   SKELETON LOADING
   ========================================================================== */
.skeleton { background: linear-gradient(90deg, var(--bg-surface-muted) 0%, var(--border-soft) 50%, var(--bg-surface-muted) 100%); background-size: 200% 100%; animation: skeleton-shine 1.4s ease-in-out infinite; border-radius: var(--radius); }
@keyframes skeleton-shine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* La hoja impresa se define al final del archivo, despues del tema oscuro,
   porque tiene que poder deshacerlo. Ver el bloque PAPEL. */
/* ==========================================================================
   LEGACY ALIAS CLASSES (mantienen retrocompatibilidad con paneles antiguos)
   ========================================================================== */
.glassmorphism-dark { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); backdrop-filter: none; }
.text-gold { color: var(--brand-text) !important; }
.bg-gold { background-color: var(--brand-primary) !important; color: white !important; }
.border-gold { border-color: var(--brand-text) !important; }
.hover\:text-gold:hover { color: var(--brand-text) !important; }
.hover\:bg-gold:hover { background-color: var(--brand-primary) !important; }

/* ==========================================================================
   MOBILE RESPONSIVE — ADMIN / CLIENT / PARTNER PANELS
   ========================================================================== */

/* Prevención global de overflow horizontal */
html, body { overflow-x: hidden; max-width: 100vw; }

@media (max-width: 900px) {
    /* Sidebar off-canvas drawer en móvil */
    .app-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: 280px;
        transform: translateX(-100%);
        transition: transform var(--dur) var(--ease);
        box-shadow: var(--shadow-xl);
        z-index: 80;
    }
    .app-sidebar.mobile-open { transform: translateX(0); }
    /* Anular comportamiento de collapsed en móvil */
    .app-sidebar.collapsed {
        width: 280px;
        transform: translateX(-100%);
    }
    .app-sidebar.collapsed.mobile-open { transform: translateX(0); }
    .app-sidebar.collapsed .sidebar-text,
    .app-sidebar.collapsed .sidebar-badge,
    .app-sidebar.collapsed .sidebar-section-label,
    .app-sidebar.collapsed .sidebar-user-text,
    .app-sidebar.collapsed .sidebar-brand-full { display: inherit; }
    .app-sidebar.collapsed .sidebar-brand-mini { display: none; }
    .app-sidebar.collapsed .sidebar-nav-item { justify-content: flex-start; padding-left: 12px; padding-right: 12px; }

    /* Backdrop oscuro detrás del drawer */
    .app-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 27, 42, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
        z-index: 70;
    }
    .app-sidebar-backdrop.visible { opacity: 1; visibility: visible; }

    /* Main ocupa todo el ancho */
    .app-main { width: 100%; margin-left: 0; }
    .app-sidebar.collapsed ~ .app-main { margin-left: 0; }
    .app-content { --gutter: 16px; }

    /* Topbar compacta */
    .app-topbar { padding: 0 14px; gap: 10px; }
    .topbar-breadcrumb { font-size: 12px; }
    .topbar-breadcrumb a:not(:last-child),
    .topbar-breadcrumb .sep:not(:last-of-type) {
        display: none;
    }
    .topbar-search {
        display: none; /* Ocultar búsqueda en móvil — accesible via botón */
    }
    .topbar-actions { gap: 6px; margin-left: auto; }
    .topbar-icon-btn { width: 36px; height: 36px; }
    .topbar-user { padding: 3px 8px 3px 3px; }
    .topbar-user .meta { display: none; }
    .topbar-user i.fa-chevron-down { display: none; }
}

/* Dashboard / contenido general */
@media (max-width: 768px) {
    h1 { font-size: 1.375rem; }
    h2 { font-size: 1.125rem; }
    h3 { font-size: 1rem; }

    /* Cards / paneles compactos */
    .card, .panel, .surface {
        padding: 16px !important;
        border-radius: var(--radius) !important;
    }

    /* Stats grid */
    .stats-grid, .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Toda rejilla colapsa a una columna.
       
       Antes se enumeraba una por una la cadena exacta del atributo style
       —«2fr 1fr», «1fr 2fr»…— y bastaba con que alguien escribiera
       «repeat(4, 1fr)» o cambiara un espacio para que la rejilla siguiera en
       varias columnas y empujara media página fuera de la pantalla. El tablero
       se iba 296 px y los reportes 234 px por exactamente eso.
       
       Se colapsa todo por defecto y las excepciones se declaran debajo, que es
       al revés de como estaba y no se puede desincronizar. */
    .grid,
    .crm-grid-2,
    [style*="display: grid"],
    [style*="display:grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Y los hijos tienen que poder encoger.
       
       `1fr` es en realidad `minmax(auto, 1fr)`, así que una columna nunca baja
       del min-content de su contenido. Con una tabla de `min-width: 640px`
       dentro de una tarjeta, la columna se quedaba en 674px por mucho que se
       pidiera una sola columna, y empujaba la página fuera de la pantalla.
       `min-width: 0` levanta ese suelo y deja que la tabla haga su propio
       scroll dentro del contenedor, que es lo que se pretendía. */
    /* Tablas en modo tarjeta.
       
       Con ocho columnas, arrastrar de lado para leer una fila es una manera
       pésima de consultar un registro en un teléfono. Cada fila pasa a ser una
       tarjeta con la etiqueta delante del dato. Las etiquetas las pone
       assets/js/tabla-movil.js leyendo los <th> que la tabla ya tiene, así que
       ninguna página cambia de marcado; si el script no corre, la tabla se
       queda con su scroll de siempre y sigue siendo usable. */
    table.table[data-movil-listo="1"],
    table.table[data-movil-listo="1"] tbody,
    table.table[data-movil-listo="1"] tr,
    table.table[data-movil-listo="1"] td {
        display: block;
        width: auto;
    }

    table.table[data-movil-listo="1"] thead {
        /* Fuera de la vista pero presente para los lectores de pantalla. */
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
        white-space: nowrap;
    }

    table.table[data-movil-listo="1"] tbody tr {
        background: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        padding: 4px 14px;
        margin-bottom: 12px;
        box-shadow: var(--shadow-xs, 0 1px 2px rgba(15,23,42,.04));
    }

    table.table[data-movil-listo="1"] tbody tr[data-movil-plano="1"] {
        padding: 0; border: 0; background: none; box-shadow: none;
    }

    table.table[data-movil-listo="1"] tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        /* Cuando la celda lleva contenido compuesto —un nombre y debajo su
           correo— no cabe al lado de la etiqueta y se aplasta en tres líneas.
           Con wrap, el valor cae entero a su propia línea. */
        flex-wrap: wrap;
        gap: 4px 14px;
        padding: 9px 0;
        border: 0;
        border-bottom: 1px solid var(--border-soft);
        text-align: right;
    }

    /* El valor ocupa lo que queda; si no le llegan 55%, baja de línea. */
    table.table[data-movil-listo="1"] tbody td > * {
        min-width: 0;
    }
    table.table[data-movil-listo="1"] tbody td:last-child {
        border-bottom: 0;
    }

    table.table[data-movil-listo="1"] tbody td::before {
        content: attr(data-etiqueta);
        flex: 0 0 auto;
        max-width: 40%;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    /* Las columnas sin etiqueta —acciones, casillas— ocupan la fila entera. */
    table.table[data-movil-listo="1"] tbody td[data-sin-etiqueta] {
        justify-content: flex-start;
        text-align: left;
    }
    table.table[data-movil-listo="1"] tbody td[data-sin-etiqueta]::before {
        content: none;
    }

    /* En modo tarjeta ya no hace falta el ancho mínimo ni el scroll. */
    .table-wrap:has(table[data-movil-listo="1"]),
    .table-responsive:has(table[data-movil-listo="1"]) {
        overflow-x: visible;
    }
    table.table[data-movil-listo="1"] {
        min-width: 0 !important;
    }

    /* La tarjeta de KPI se compacta: en un teléfono son cifras de un vistazo,
       no tarjetas de detalle. El icono baja de tamaño y se pega a la etiqueta. */
    .kpi-card { padding: 14px; }
    .kpi-card .kpi-icon {
        width: 34px; height: 34px; font-size: 14px; margin-bottom: 8px;
    }
    .kpi-card .kpi-label { font-size: 10.5px; }
    .kpi-card .kpi-value { font-size: 22px; }

    /* La cabecera de tarjeta suele llevar el título a un lado y un grupo de
       botones al otro. En un teléfono no caben en una línea: se apilan. */
    .card-header {
        flex-wrap: wrap;
        gap: 10px;
    }
    .card-header > span,
    .card-header > div {
        flex-wrap: wrap;
        max-width: 100%;
    }

    /* El botón que abre la barra lateral es la puerta a toda la navegación
       del panel: no puede quedarse en 36px. */
    .topbar-toggle {
        width: 44px;
        height: 44px;
    }

    /* Blancos táctiles.
       (Ver también el bloque `pointer: coarse` al final de esta hoja: una
        tablet ancha es táctil y no la cubre ningún ancho.)
       
       Los controles miden 9px de relleno y ~34px de alto, que va bien con un
       ratón y mal con un dedo: 22 de los 24 campos del formulario de propiedad
       quedaban por debajo del mínimo de 44px que recomiendan tanto Apple como
       Google. Se sube el alto sin tocar la tipografía, que ya es legible. */
    .form-control,
    .form-select,
    select.form-control,
    input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
    input[type="password"], input[type="date"], input[type="time"], input[type="search"],
    input[type="url"], select {
        min-height: 44px;
        font-size: 16px; /* Por debajo de 16px, iOS hace zoom al enfocar el campo. */
    }

    textarea.form-control, textarea {
        min-height: 88px;
        font-size: 16px;
    }

    /* Las casillas y los interruptores necesitan área, no sólo el cuadrito. */
    .form-check, .checkbox-row, label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]) {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    input[type="checkbox"], input[type="radio"] {
        width: 20px; height: 20px;
        flex: 0 0 auto;
    }

    /* Los botones de acción de una fila también son blancos táctiles. */
    .btn { min-height: 44px; }
    /* 38 se quedaba a dos píxeles del umbral: pequeño, pero no por debajo. */
    .btn.btn-sm { min-height: 40px; }

    /* Las filas de acciones —«Ver candidato», «Responder», «WhatsApp»,
       «Marcar leída», borrar— son un .flex de cinco botones que en un teléfono
       no cabe. Envolver es siempre mejor que empujar la página. */
    .flex {
        flex-wrap: wrap;
    }

    /* Una insignia con el título completo de una propiedad no cabe en un
       teléfono. Se recorta con puntos suspensivos en vez de empujar la página;
       el título entero sigue estando en la fila de al lado. */
    .badge {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Una tabla suelta dentro de una tarjeta, sin contenedor de scroll propio,
       empujaba la página entera. El cuerpo de la tarjeta hace de contenedor. */
    .card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .grid > *,
    .crm-grid-2 > *,
    [style*="display: grid"] > *,
    [style*="display:grid"] > * {
        min-width: 0;
    }

    /* Excepciones: rejillas de cifras cortas, donde dos columnas se leen mejor
       que una lista larga. Van después para ganar por orden. */
    .kpi-grid,
    .stats-grid,
    .grid.grid-2-movil {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Forms */
    .form-grid,
    .form-row {
        grid-template-columns: 1fr !important;
    }
    .form-actions {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .form-actions .btn { width: 100%; }

    /* Page header (título + acciones) */
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .page-header .actions,
    .page-header .page-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }
    .page-header .actions .btn,
    .page-header .page-actions .btn {
        flex: 1;
        min-width: 120px;
    }

    /* Tablas — scroll horizontal + card-like rows opcional */
    .table-wrap,
    .table-responsive,
    .data-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(var(--gutter, 16px) * -1);
        padding: 0 var(--gutter, 16px);
    }
    .table-wrap table,
    .table-responsive table,
    .data-table-wrap table {
        min-width: 640px;
    }

    /* Filtros en línea se apilan */
    .filters-bar,
    .filter-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .filters-bar > *,
    .filter-row > * { width: 100%; }

    /* Tabs scroll horizontal */
    .tabs,
    .tabs-nav {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .tabs::-webkit-scrollbar,
    .tabs-nav::-webkit-scrollbar { display: none; }

    /* Modales */
    .modal-content, .modal-dialog {
        max-width: none !important;
        width: calc(100% - 24px) !important;
        margin: 12px !important;
    }
    .modal-body { padding: 16px !important; }
    .modal-footer {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .modal-footer .btn { width: 100%; }

    /* Dropdown que podía salirse */
    .dropdown-menu {
        min-width: 240px !important;
        max-width: calc(100vw - 24px);
        right: 0;
        left: auto;
    }

    /* Inputs — evitar zoom iOS */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px;
    }

    /* Botones de acción flotantes */
    .btn { padding: 10px 16px; font-size: 13px; }
    .btn-lg { padding: 12px 20px; font-size: 14px; }

    /* Sidebar info / summary panels que venían con width fija */
    aside[style*="width:"],
    aside[style*="width :"],
    [style*="grid-template-columns: 1fr 3"],
    [style*="grid-template-columns:1fr 3"] {
        /* Se maneja con las reglas generales; placeholder. */
    }
}

/* Pantallas muy pequeñas */
@media (max-width: 400px) {
    .app-content { --gutter: 12px; }
    /* Dos columnas también aquí: una tarjeta de KPI cabe en 177px y de una en
       una había que recorrer 600px de cifras antes de llegar al contenido. */
    .stats-grid, .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .topbar-breadcrumb { display: none; }
    .app-topbar { padding: 0 10px; }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1100px) {
    .stats-grid, .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Feedback táctil */
@media (hover: none) and (pointer: coarse) {
    .btn:hover { transform: none; }
    .sidebar-nav-item:hover { background: transparent; }
    .sidebar-nav-item:active { background: var(--bg-sidebar-hover); }
}

/* ==========================================================================
   STANDALONE TOPBAR (paneles client/partner — sin sidebar)
   ========================================================================== */
.standalone-topbar {
    padding: 0 24px;
    gap: 12px;
}
.standalone-topbar .topbar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}
.standalone-topbar .topbar-logo img {
    height: 28px;
    filter: brightness(0);
    max-width: 160px;
    object-fit: contain;
}
.standalone-topbar .topbar-entity {
    flex: 1;
    padding-left: 16px;
    min-width: 0;
    overflow: hidden;
}
.standalone-topbar .topbar-entity > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-actions-group {
    margin-left: auto;
    flex-shrink: 0;
}
.standalone-content {
    max-width: 1240px;
    margin: 0 auto;
    padding: 32px 24px;
}

.show-xs { display: none; }
.hide-xs { display: inline; }

@media (max-width: 768px) {
    .standalone-topbar {
        padding: 0 14px;
        gap: 8px;
        height: 58px;
    }
    .standalone-topbar .topbar-logo img { height: 24px; max-width: 110px; }
    .standalone-topbar .topbar-entity {
        padding-left: 10px;
        font-size: 11px;
    }
    .standalone-topbar .topbar-entity .text-xs { font-size: 10.5px; }
    .standalone-topbar .topbar-entity .text-sm { font-size: 12.5px; }
    .standalone-content {
        padding: 20px 16px;
        max-width: 100%;
    }
    .topbar-actions-group { gap: 6px; }
    .topbar-actions-group .btn-sm { padding: 7px 10px; font-size: 12px; }
    .topbar-actions-group .topbar-user .meta { display: none; }

    .show-xs { display: inline-flex; }
    .hide-xs { display: none; }
}

@media (max-width: 400px) {
    .standalone-topbar .topbar-entity { display: none; }
    .standalone-content { padding: 16px 12px; }
}


/* ==========================================================================
   ASISTENTE DE IA
   La IA propone y la persona aprueba: todo lo generado se muestra etiquetado,
   se puede valorar y nunca se guarda sin revisión.
   ========================================================================== */
.ia-boton { position: relative; }
.ia-boton i.fa-wand-magic-sparkles { color: var(--brand-text); }
.btn-primary.ia-boton i.fa-wand-magic-sparkles,
.ia-boton.ia-trabajando i { color: inherit; }
.ia-boton.ia-trabajando { opacity: 0.75; cursor: progress; }

.ia-panel {
    border: 1px dashed var(--brand-primary);
    border-radius: var(--radius);
    background: var(--brand-primary-tint);
    padding: 16px 18px;
    margin-top: 14px;
}
.ia-panel > .alert:last-child { margin-bottom: 0; }

.ia-resultado { display: flex; flex-direction: column; gap: 12px; }
.ia-campo { display: flex; flex-direction: column; gap: 4px; }
.ia-campo-k {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--brand-text);
}
.ia-campo-v {
    font-size: 13.5px; line-height: 1.6; color: var(--text-body);
    background: var(--bg-surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm); padding: 10px 12px;
    white-space: pre-wrap; word-break: break-word;
}

.ia-etiqueta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid rgba(196, 82, 42, 0.22);
}
.ia-sello {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--brand-text); background: var(--brand-primary-soft);
    padding: 3px 10px; border-radius: var(--radius-full);
}
.ia-nota { font-size: 12px; color: var(--text-muted); flex: 1; min-width: 160px; }
.ia-modelo {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px; color: var(--text-subtle);
}
.ia-votos { display: inline-flex; gap: 4px; }
.ia-voto {
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-default); background: var(--bg-surface);
    color: var(--text-muted); cursor: pointer; font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--dur-fast) var(--ease);
}
.ia-voto:hover { border-color: var(--brand-text); color: var(--brand-text); }
.ia-gracias {
    font-size: 11.5px; font-weight: 600; color: var(--success-text);
    display: inline-flex; align-items: center; gap: 5px;
}

/* Medidor de saldo en la barra superior */
.ia-medidor {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: var(--radius-full);
    border: 1px solid var(--border-default); background: var(--bg-surface);
    font-size: 12px; color: var(--text-muted); text-decoration: none;
    transition: all var(--dur-fast) var(--ease);
}
.ia-medidor:hover { border-color: var(--brand-text); color: var(--text-strong); }
.ia-medidor .punto { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ia-medidor .pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.ia-medidor .frase { opacity: 0.9; }
@media (max-width: 1100px) { .ia-medidor .frase { display: none; } }


/* ==========================================================================
   MOVIMIENTO REDUCIDO

   Quien lo pide en su sistema operativo no lo hace por gusto: el movimiento en
   pantalla le provoca mareo o desorientación. La regla es no eliminar la
   información, sólo el desplazamiento — un aviso que aparecía deslizándose
   sigue apareciendo, pero ya está donde tiene que estar.

   El scroll suave también entra: un salto de ancla que se desliza medio
   documento es exactamente el tipo de movimiento que molesta.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Los desplazamientos de entrada se cancelan: el elemento nace en su sitio
       en vez de llegar deslizándose. */
    .toast, .modal, .sheet, .dropdown-menu, .fade-in, .fade-up {
        transform: none !important;
    }

    /* El brillo del esqueleto de carga es un bucle infinito: se deja quieto,
       con el gris de fondo, que sigue comunicando «esto está cargando». */
    .skeleton, .skeleton-shine {
        animation: none !important;
        background-image: none !important;
    }

    /* Nada de micro-desplazamientos al pasar el ratón o pulsar. */
    .btn:hover, .card:hover, .property-card:hover, .kpi-card:hover,
    .lp-plan:hover, .tpl-card:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   TEMA OSCURO

   El panel se usa de noche —el dueño revisa la operación después de cerrar— y
   una pantalla blanca a esa hora cansa. Cubre el CRM y el panel de plataforma,
   que comparten esta hoja.

   NO cubre el portal público de cada empresa: ese es su escaparate, con su
   marca y su fotografía de propiedades, y decidir que se vea oscuro no es una
   decisión de la plataforma sino de cada inmobiliaria.

   Se activa de dos maneras y en este orden:
     1. `data-tema="oscuro"` en <html> — la elección explícita de la persona.
     2. `prefers-color-scheme: dark` — lo que pide su sistema, si no eligió.
   Y `data-tema="claro"` gana siempre, para quien tiene el sistema en oscuro
   pero quiere el panel claro.
   ========================================================================== */

/* Los valores viven en un solo sitio y se aplican desde los dos disparadores. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --bg-app: #0B1220;
        --bg-surface: #141E2E;
        --bg-surface-hover: #1B2739;
        --bg-surface-muted: #1B2739;
        --bg-sidebar: #080F19;
        --bg-sidebar-hover: #16233444;

        --text-strong: #F1F5F9;
        --text-body: #CBD5E1;
        --text-muted: #94A3B8;
        --text-subtle: #7A8A9C;
        --text-body-strong: #E2E8F0;
        --text-sidebar: #C7D2DC;
        --text-sidebar-muted: #8996A5;

        --border-soft: #1F2C3F;
        --border-default: #27364B;
        --border-strong: #38495F;

        /* La marca como texto se aclara sobre el fondo oscuro. Con color-mix
           vale también para el color propio de cada empresa. */
        --brand-text: color-mix(in srgb, var(--brand-primary) 62%, #FFFFFF);
        --brand-primary-soft: color-mix(in srgb, var(--brand-primary) 22%, #0B1220);
        --brand-primary-tint: color-mix(in srgb, var(--brand-primary) 12%, #0B1220);
        --brand-navy-soft: #1B2739;

        /* Los estados invierten sus papeles: el «soft» pasa a ser un tinte
           oscuro y el «text» el tono claro y legible encima. */
        --success: #34D399;  --success-soft: #06301F;  --success-text: #34D399;
        --success-strong: #34D399;
        --warning: #FBBF24;  --warning-soft: #3A2A05;  --warning-text: #FBBF24;
        --danger:  #F87171;  --danger-soft:  #3A1414;  --danger-text:  #F87171;
        --danger-strong: #F87171;
        --info:    #60A5FA;  --info-soft:    #10233F;  --info-text:    #60A5FA;
        --purple:  #C084FC;  --purple-soft:  #2A1440;  --purple-text:  #C084FC;

        /* Sobre fondo oscuro una sombra negra no se ve: se sustituye por un
           borde de luz muy tenue, que es como se separa un plano del otro. */
        --sombra-borde: rgba(0, 0, 0, 0.55);
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55);
        --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.6);
        --shadow-lg: 0 12px 28px -8px rgba(0, 0, 0, 0.7);

        color-scheme: dark;
    }
}

/* La elección explícita manda sobre lo que pida el sistema. */
:root[data-tema="oscuro"] {
    --bg-app: #0B1220;
    --bg-surface: #141E2E;
    --bg-surface-hover: #1B2739;
    --bg-surface-muted: #1B2739;
    --bg-sidebar: #080F19;
    --bg-sidebar-hover: #16233444;

    --text-strong: #F1F5F9;
    --text-body: #CBD5E1;
    --text-muted: #94A3B8;
    --text-subtle: #7A8A9C;
    --text-body-strong: #E2E8F0;
    --text-sidebar: #C7D2DC;
    --text-sidebar-muted: #8996A5;

    --border-soft: #1F2C3F;
    --border-default: #27364B;
    --border-strong: #38495F;

    --brand-text: color-mix(in srgb, var(--brand-primary) 62%, #FFFFFF);
    --brand-primary-soft: color-mix(in srgb, var(--brand-primary) 22%, #0B1220);
    --brand-primary-tint: color-mix(in srgb, var(--brand-primary) 12%, #0B1220);
    --brand-navy-soft: #1B2739;

    --success: #34D399;  --success-soft: #06301F;  --success-text: #34D399;
    --success-strong: #34D399;
    --warning: #FBBF24;  --warning-soft: #3A2A05;  --warning-text: #FBBF24;
    --danger:  #F87171;  --danger-soft:  #3A1414;  --danger-text:  #F87171;
    --danger-strong: #F87171;
    --info:    #60A5FA;  --info-soft:    #10233F;  --info-text:    #60A5FA;
    --purple:  #C084FC;  --purple-soft:  #2A1440;  --purple-text:  #C084FC;

    --sombra-borde: rgba(0, 0, 0, 0.55);
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 12px 28px -8px rgba(0, 0, 0, 0.7);

    color-scheme: dark;
}

/* Las fotos e ilustraciones se dejan como son. Bajarles el brillo «para que
   peguen» falsea el inventario, que es justo lo que el usuario viene a ver. */
:root[data-tema="oscuro"] img,
:root[data-tema="oscuro"] video { filter: none; }

/* ==========================================================================
   BLANCOS TÁCTILES EN TABLET

   Las reglas de tamaño táctil del panel viven en un bloque por ancho
   (`max-width: 768px`), que cubre el teléfono. Una tablet no lo activa: un iPad
   en horizontal mide 1024 px y se maneja con el dedo exactamente igual.

   Este bloque repite lo esencial preguntando por el puntero, que es la señal
   correcta. No sustituye al de ancho: hacen falta los dos, porque una ventana
   de escritorio estrecha tiene ratón y una tablet ancha no.
   ========================================================================== */


/* ==========================================================================
   CINTA DE DEMO
   --------------------------------------------------------------------------
   Quien entra por /demo está en un CRM que se borra solo. Esto lo dice arriba
   de la página, en todas las pantallas, con la cuenta atrás corriendo. No es
   un adorno: sin ello alguien mete dos horas de trabajo real dentro y lo
   pierde, y esa es la peor primera impresión posible de un producto.

   Ámbar y no rojo: no ha pasado nada malo, sólo hay algo que conviene saber.
   ========================================================================== */
.cinta-demo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--warning-soft);
    border: 1px solid color-mix(in srgb, var(--warning) 42%, transparent);
    border-radius: var(--radius-lg);
    padding: 11px 16px;
    margin-bottom: 18px;
    font-size: 13.5px;
    color: var(--warning-text);
}

.cinta-demo > i {
    font-size: 15px;
    flex-shrink: 0;
}

.cinta-demo .cd-texto {
    flex: 1;
    min-width: 200px;
    line-height: 1.45;
}

.cinta-demo b { font-weight: 700; }

.cinta-demo .cd-cuenta {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

.cinta-demo .cd-accion {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--brand-primary);
    color: var(--text-inverse);
    border-radius: var(--radius-full);
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: filter var(--dur-fast) var(--ease);
}

.cinta-demo .cd-accion:hover { filter: brightness(1.08); }

.cinta-demo .cd-accion i { font-size: 11px; }

/* En un teléfono la fila se parte y el botón pasa a ocupar el ancho: apretado
   contra el texto no se acierta con el dedo. */
@media (max-width: 560px) {
    .cinta-demo .cd-accion {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   MURO DE PLAN
   --------------------------------------------------------------------------
   Lo que ve alguien cuando abre una pantalla que su plan no incluye.

   No es una página de error y no debe parecerlo. La persona no ha hecho nada
   mal y el sistema no está roto: simplemente esa capacidad se vende aparte.
   Por eso lleva el nombre de lo que falta, qué hace, en qué plan está y con
   qué botón se consigue. Un «403 Forbidden» aquí sólo genera un correo a
   soporte preguntando qué se ha estropeado.
   ========================================================================== */
.plan-muro {
    max-width: 480px;
    margin: 8vh auto 0;
    text-align: center;
    padding: 0 20px;
}

.plan-muro .pm-icono {
    width: 62px;
    height: 62px;
    margin: 0 auto 22px;
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    font-size: 23px;
    background: var(--brand-primary-soft);
    color: var(--brand-text);
}

.plan-muro h1 {
    font-size: 25px;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}

.plan-muro .pm-que {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 18px;
}

.plan-muro .pm-donde {
    display: inline-block;
    font-size: 14px;
    color: var(--text-body);
    background: var(--bg-surface-muted);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    padding: 8px 16px;
    margin-bottom: 26px;
}

.plan-muro .pm-donde b { color: var(--text-strong); }

.plan-muro .pm-acciones {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

/* La frase que quita el miedo: nadie amplía un plan si teme que algo suyo se
   haya quedado por el camino. */
.plan-muro .pm-fino {
    font-size: 13px;
    color: var(--text-subtle);
    line-height: 1.55;
    max-width: 340px;
    margin: 0 auto;
}

@media (max-width: 560px) {
    .plan-muro { margin-top: 5vh; }
    .plan-muro .pm-acciones .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Y en el menú: lo que no se tiene se ve, pero con su candado.
   Esconderlo del todo hace que el producto parezca más pequeño de lo que es y
   quita la única ocasión natural de contar que existe.
   -------------------------------------------------------------------------- */
.sidebar-nav-item.sin-plan {
    opacity: 0.55;
}

.sidebar-nav-item.sin-plan .sidebar-text::after {
    content: "\f023";                 /* fa-lock */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 9px;
    margin-left: 7px;
    opacity: 0.8;
    vertical-align: 1px;
}

.app-sidebar.collapsed .sidebar-nav-item.sin-plan { opacity: 0.45; }


/* ==========================================================================
   SELECTOR DE SUCURSAL
   --------------------------------------------------------------------------
   Vive en la barra superior porque cambia lo que se ve en TODAS las pantallas,
   no en una. Metido dentro de una página parecería un filtro más de esa
   página, y no lo es.
   ========================================================================== */
.topbar-sucursal {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--bg-surface-muted);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    padding: 0 12px 0 13px;
    height: 38px;
    flex-shrink: 0;
}

.topbar-sucursal > i {
    font-size: 12px;
    color: var(--text-muted);
}

.topbar-sucursal select {
    border: 0;
    background: transparent;
    color: var(--text-strong);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 0 2px;
    max-width: 190px;
    cursor: pointer;
    appearance: none;
    outline-offset: 3px;
}

.topbar-sucursal select:focus-visible { outline: 2px solid var(--brand-primary); }

/* En pantallas medianas el nombre se acorta antes que desaparecer la barra. */
@media (max-width: 1100px) {
    .topbar-sucursal select { max-width: 112px; }
}

/* En un teléfono la barra superior no da para esto. El mismo selector está en
   el menú lateral, y ahí sí cabe entero. */
@media (max-width: 820px) {
    .topbar-sucursal { display: none; }
}

/* El del menú es el reverso: sólo aparece cuando el de arriba no está. */
.sidebar-sucursal { display: none; }

.sidebar-sucursal select {
    width: 100%;
    background: var(--bg-sidebar-hover);
    border: 1px solid var(--border-sidebar);
    border-radius: var(--radius);
    color: var(--text-sidebar);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 11px;
    cursor: pointer;
}

.sidebar-sucursal select:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }

@media (max-width: 820px) {
    .sidebar-sucursal {
        display: block;
        padding: 12px 16px 4px;
    }
}

/* Con el riel plegado no hay sitio para un desplegable con nombres dentro. */
.app-sidebar.collapsed .sidebar-sucursal { display: none; }

@media (pointer: coarse) {
    /* Por exclusión, no por lista de tipos: un <input> sin atributo `type` es
       de texto y ninguna lista lo alcanzaba —eran 66 sólo en el formulario de
       propiedad—. Se dejan fuera los que no son campos de escribir. */
    .form-control,
    .form-select,
    select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="image"]) {
        min-height: 44px;
        font-size: 16px;
    }

    textarea.form-control, textarea { min-height: 88px; font-size: 16px; }

    .btn { min-height: 44px; }
    /* 38 se quedaba a dos píxeles del umbral: pequeño, pero no por debajo. */
    .btn.btn-sm { min-height: 40px; }

    /* La barra superior y la navegación son lo que más se toca de todo el
       panel, y venían a 34-38 px. Esta lista sale de medir qué controles se
       quedan por debajo de 40 px en un iPad en horizontal (1024), no de
       adivinar: barra superior, riel, chips, pasos y acciones de fila. */
    .topbar-toggle,
    .topbar-icon-btn,
    .topbar-create,
    .topbar-user {
        min-width: 44px;
        min-height: 44px;
    }

    .sidebar-nav-item,
    .dropdown-item,
    .ia-medidor,
    .etour-launch,
    .card-move,
    .t-btn,
    .ql-btn,
    .op-step,
    .chip,
    .filter-chip,
    .tab,
    .pagination a,
    .pagination button {
        min-height: 44px;
    }

    /* Los que son cuadrados de icono necesitan también el ancho. */
    .ia-medidor,
    .etour-launch,
    .card-move,
    .t-btn {
        min-width: 44px;
    }

    /* Iconos sin clase propia: los tres de cada fila de la tabla —compartir,
       destacar y BORRAR— medían 30x30 con cuatro píxeles entre ellos. Ahí un
       dedo se equivoca, y uno de los tres no tiene vuelta atrás. */
    .row-actions button,
    .row-actions a,
    .desc-toolbar button,
    .desc-tb-tpl,
    .qs-chip,
    .op-move,
    .kanban-card button {
        min-width: 44px;
        min-height: 44px;
    }

    /* Y separados: pegados, el margen de error de un dedo cae en el de al lado. */
    .row-actions { gap: 6px; }

    /* Un enlace de texto dentro de una celda o de un párrafo NO se agranda:
       la norma lo exime y estirarlo rompería la línea. Lo que se le da es
       aire en la fila, que es donde cae el dedo. */
    .table td, .table th { padding-top: 12px; padding-bottom: 12px; }

    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; flex: 0 0 auto; }

    /* En una pantalla táctil el hover no existe: los efectos de ratón sobran y
       además se quedan «pegados» tras el toque. */
    .btn:hover, .card:hover, .kpi-card:hover, .sidebar-nav-item:hover {
        transform: none;
    }
}


/* ==========================================================================
   PAPEL
   --------------------------------------------------------------------------
   Lo que se imprime de un CRM no es la pantalla: es un registro. Alguien lleva
   la ficha de un lead a una reunión, adjunta el corte de comisiones a una
   liquidación o archiva el listado de una cartera. En papel no hay hover, no
   hay scroll y no hay segunda oportunidad de pulsar nada.

   Este bloque va al FINAL del archivo a propósito: tiene que ganarle al tema
   oscuro, y lo hace por especificidad y por orden, sin un solo !important en
   los colores.
   ========================================================================== */
@media print {

    /* --- El papel siempre es claro ---------------------------------------
       Si alguien tiene el panel en oscuro y pulsa imprimir, el navegador NO
       imprime los fondos: quedaría texto gris claro sobre papel blanco, es
       decir, una hoja casi vacía. Aquí se devuelven los valores claros.

       `html:root` (0,1,1) empata con `:root:not([data-tema="claro"])` y gana
       por ir después; `html:root[data-tema]` (0,2,1) le gana a
       `:root[data-tema="oscuro"]` (0,2,0). */
    html:root,
    html:root[data-tema] {
        --bg-app: #FFFFFF;
        --bg-surface: #FFFFFF;
        --bg-surface-hover: #FFFFFF;
        --bg-surface-muted: #F4F5F7;
        --bg-sidebar: #FFFFFF;

        /* En pantalla el gris suave descansa la vista; en papel, y sobre todo
           en una láser floja o en una fotocopia, el gris se deshace. El texto
           sube a negro y los secundarios a un gris que aguanta el tóner. */
        --text-strong: #000000;
        --text-body: #1A1A1A;
        --text-body-strong: #1A1A1A;
        --text-muted: #444444;
        --text-subtle: #555555;

        /* Los bordes son lo único que separa una sección de otra cuando no se
           imprimen fondos: tienen que verse. */
        --border-soft: #C8CDD4;
        --border-default: #B4BAC3;
        --border-strong: #8A9199;

        /* Los estados conservan color —muchas oficinas imprimen en color— pero
           en su versión oscura, que también sobrevive a la escala de grises. */
        --success: #05683F;  --success-text: #05683F;  --success-soft: #E7F6EE;
        --success-strong: #05683F;
        --warning: #7A4A05;  --warning-text: #7A4A05;  --warning-soft: #FBF1DE;
        --danger:  #A11B1B;  --danger-text:  #A11B1B;  --danger-soft:  #FAE7E7;
        --danger-strong: #A11B1B;
        --info:    #123C86;  --info-text:    #123C86;  --info-soft:    #E5EDFA;
        --purple:  #5B21A8;  --purple-text:  #5B21A8;  --purple-soft:  #F0E8FA;

        /* Una sombra en papel es una mancha gris. */
        --shadow-xs: none; --shadow-sm: none; --shadow-md: none;
        --shadow-lg: none; --shadow-xl: none;

        color-scheme: light;
    }

    /* El margen lo pone la página, no el contenedor: así el navegador encaja
       su propia cabecera y su pie sin pisar el contenido. 14 mm deja sitio
       para una grapa o para la perforadora de dos agujeros. */
    @page {
        margin: 14mm 12mm;
    }

    html, body {
        background: #FFFFFF;
        -webkit-print-color-adjust: economy;
        print-color-adjust: economy;
        /* En papel el punto es la unidad honesta, y el cuerpo puede bajar: la
           hoja no está a sesenta centímetros de los ojos. */
        font-size: 10.5pt;
        line-height: 1.4;
    }

    /* --- Fuera todo lo que sólo sirve para pulsar ------------------------ */
    .app-sidebar,
    .app-topbar,
    .no-print,
    .btn,
    .btn-group,
    .dropdown-menu,
    .pagination,
    .toast, .toast-container,
    .modal, .modal-backdrop,
    .tooltip,
    .tabs-nav,
    .skeleton,
    .topbar-search,
    input[type="search"],
    #temaToggle,
    .tour-fab, .tour-overlay,
    .tabla-acciones,
    .form-actions,
    .filtros-plegables > summary {
        display: none !important;
    }

    /* Los filtros plegados se imprimen abiertos: si alguien imprime un listado
       filtrado, la hoja tiene que decir por qué falta el resto. */
    .filtros-plegables > *:not(summary) {
        display: block !important;
    }

    .app-main { display: block; }

    .app-content {
        padding: 0;
        --gutter: 0px;
        max-width: none;
    }

    /* --- La cabecera que sólo existe en papel ---------------------------- */
    .solo-impresion { display: block; }

    .cabecera-impresion {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding-bottom: 6px;
        margin-bottom: 14px;
        border-bottom: 1.5px solid #000000;
        font-size: 9.5pt;
    }

    .cabecera-impresion .ci-marca {
        font-weight: 700;
        letter-spacing: 0.01em;
    }

    .cabecera-impresion .ci-sep { color: #777777; }

    .cabecera-impresion .ci-fecha {
        margin-left: auto;
        color: #444444;
        font-variant-numeric: tabular-nums;
    }

    /* --- Las tarjetas dejan de ser tarjetas ------------------------------ */
    .card,
    .stat-card,
    .panel {
        box-shadow: none;
        border: 1px solid var(--border-default);
        border-radius: 0;
        /* Una ficha partida entre dos hojas obliga a leer con las dos manos.
           Si no cabe entera, que empiece en la siguiente. */
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .card-header {
        background: transparent;
        border-bottom: 1px solid var(--border-default);
    }

    /* --- Tablas ---------------------------------------------------------- */
    .table-wrap,
    .table-responsive,
    .data-table-wrap {
        overflow: visible !important;
        border: 0;
        /* Las sombras de borde del scroll saldrían como manchas grises. */
        background-image: none !important;
    }

    table.table {
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: collapse;
        font-size: 9pt;
    }

    /* Una tabla de cuarenta filas ocupa tres hojas. Sin esto, las hojas dos y
       tres llegan sin encabezado y las columnas dejan de significar nada. */
    table.table thead { display: table-header-group; }
    table.table tfoot { display: table-footer-group; }
    table.table tr    { break-inside: avoid; page-break-inside: avoid; }

    table.table th,
    table.table td {
        border-bottom: 1px solid var(--border-soft);
        padding: 5px 7px;
        /* En pantalla se recorta con puntos suspensivos; en papel eso es
           borrar el dato, porque no hay dónde pulsar para verlo entero. */
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
    }

    table.table th {
        border-bottom: 1.5px solid var(--border-strong);
        background: transparent;
        text-transform: uppercase;
        font-size: 8pt;
        letter-spacing: 0.04em;
    }

    /* Fuera de las tablas pasa lo mismo: .truncate y los flex con min-width:0
       recortan con puntos suspensivos, que en papel es borrar el dato. */
    .card .truncate,
    .card [class*="ellipsis"],
    .detail-value,
    .kpi-card * {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        word-break: break-word;
    }

    /* --- Distintivos ------------------------------------------------------
       Sin fondo impreso, una etiqueta de estado se queda en texto suelto y se
       confunde con el dato de al lado. El contorno la mantiene identificable
       aunque la impresora sea de blanco y negro. */
    .badge, .chip, .tag, .pill {
        border: 1px solid currentColor;
        background: transparent !important;
        padding: 0 4px;
        font-size: 8pt;
        border-radius: 3px;
    }

    /* Un distintivo con el color escrito en el atributo style= trae la paleta
       de pantalla sin pasar por el filtro de este bloque: el ámbar #F59E0B
       sobre papel blanco da 2,15. Ahí el texto se va a tinta; la palabra
       («Alta», «Urgente») ya lleva el significado, que es para lo que está. */
    .badge[style*="color" i],
    .chip[style*="color" i],
    .tag[style*="color" i],
    .pill[style*="color" i] {
        color: var(--text-strong) !important;
    }

    /* El filtro activo se pinta en blanco sobre el relleno de marca. Sin
       relleno impreso quedaba en nada —y con él se iba también el filete,
       porque era currentColor. Se marca con trazo negro y peso. */
    .chip.active, .tab.active, .filter-chip.active, .pill.active,
    .badge.active {
        color: var(--text-strong) !important;
        border-color: #000000 !important;
        font-weight: 700 !important;
    }

    /* --- Encabezados ----------------------------------------------------- */
    h1, h2, h3, h4 {
        break-after: avoid;
        page-break-after: avoid;
    }

    h1 { font-size: 16pt; }
    h2 { font-size: 13pt; }
    h3 { font-size: 11.5pt; }

    .page-header {
        border-bottom: 1px solid var(--border-strong);
        padding-bottom: 8px;
        margin-bottom: 14px;
    }

    /* --- Enlaces ----------------------------------------------------------
       Deliberadamente NO se expande el href. Una ficha de lead tiene veinte
       enlaces internos: imprimir la URL detrás de cada nombre convierte la
       hoja en ruido y no le sirve a nadie, porque nadie va a teclear eso.
       Lo que sí se conserva es el dato de contacto, que es el que alguien va
       a marcar o a escribir desde el papel. */
    a { color: inherit; text-decoration: none; }

    a[href^="mailto:"],
    a[href^="tel:"] {
        text-decoration: underline;
    }

    /* --- Rejillas ---------------------------------------------------------
       El ancho útil de una A4 con márgenes son unos 186 mm: caben dos columnas
       de datos, nunca las cuatro del escritorio. */
    .stats-grid,
    .grid-4, .grid-3 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    /* --- Gráficas ---------------------------------------------------------
       Un canvas se imprime como imagen; lo que hay que evitar es que salga
       cortado entre dos hojas o desbordado del ancho. */
    canvas {
        max-width: 100% !important;
        height: auto !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }


    /* --- Paneles invertidos -----------------------------------------------
       En pantalla hay bloques de acento: texto blanco sobre un degradado
       oscuro. Al imprimir, el navegador NO pinta ese fondo —y hace bien, es
       media página de tóner— pero el texto se queda blanco: el bloque
       desaparece del papel.

       Esta lista sale de recorrer los <style> de admin/ buscando reglas que
       fijen a la vez un fondo oscuro y texto blanco. Si mañana nace otro
       panel de acento, tiene que sumarse aquí o quedará en blanco al
       imprimirse. Los !important son deliberados: estas reglas viven en el
       <style> de cada página, que va después de esta hoja en el documento. */
    .action-center, .action-center *,
    .com-calc, .com-calc *,
    .ent-hero, .ent-hero *,
    .onb-hero .avatar,
    .onb-modal-head, .onb-modal-head *,
    .kmv-head, .kmv-head *,
    .mv-head, .mv-head *,
    .op-toast, .op-toast *,
    .dash-tabs .tab-badge,
    .onb-share-icon,
    .rm-link .ic,
    .step-num, .step-number,
    .pill-ico,
    .t-avatar,
    .dz-thumb .dz-principal,
    .dz-thumb .dz-star,
    .img-tile .img-badge,
    .mv-chip.active,
    .pp-typ input:checked + span {
        background: transparent !important;
        background-image: none !important;
        color: var(--text-strong) !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* El contenedor sí conserva forma: sin fondo, lo único que dice «esto es
       un bloque aparte» es el filete. */
    .action-center,
    .com-calc,
    .ent-hero,
    .kmv-head,
    .mv-head,
    .onb-modal-head {
        border: 1px solid var(--border-strong) !important;
        border-radius: 0 !important;
        padding: 14px 16px !important;
    }

    /* Dentro de esos paneles los bordes eran blancos translúcidos: sobre
       papel blanco no existen. */
    .action-center *,
    .com-calc *,
    .ent-hero *,
    .kmv-head *,
    .mv-head * {
        border-color: var(--border-default) !important;
    }

    /* Los distintivos pequeños se quedan sin su disco de color; el contorno
       los mantiene reconocibles como cifra suelta. */
    .dash-tabs .tab-badge,
    .onb-share-icon,
    .rm-link .ic,
    .step-num, .step-number,
    .pill-ico,
    .mv-chip.active {
        border: 1px solid var(--border-strong) !important;
    }

    /* Y lo mismo escrito en el atributo style= de la propia etiqueta: son
       diecinueve sitios en admin/, casi todos distintivos generados desde JS.
       Un estilo en línea sólo se deja ganar por un !important. El filete se
       añade únicamente cuando ese mismo style traía un fondo, para no
       encuadrar texto que nunca estuvo dentro de nada. */
    [style*="color:#fff" i], [style*="color: #fff" i],
    [style*="color:white" i], [style*="color: white" i],
    [style*="color:rgba(255" i], [style*="color: rgba(255" i] {
        color: var(--text-strong) !important;
        background: transparent !important;
        background-image: none !important;
        text-shadow: none !important;
    }

    [style*="color:#fff" i][style*="background" i],
    [style*="color: #fff" i][style*="background" i],
    [style*="color:white" i][style*="background" i],
    [style*="color: white" i][style*="background" i] {
        border: 1px solid var(--border-strong) !important;
    }

    /* El paso actual del embudo pinta el texto en blanco sobre el relleno de
       marca; sin relleno impreso se quedaba en nada. */
    .op-step.current {
        color: var(--text-strong) !important;
        border-color: #000000 !important;
    }

    /* --- Carruseles y pasos ----------------------------------------------
       Un carril con scroll horizontal en papel es una fila cortada por el
       borde de la hoja: lo que no cabe, no existe. En papel se envuelve. */
    .op-stepper,
    .dash-tabs,
    .tabs-scroll,
    .chips-scroll {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
    }

    .op-step {
        flex: 0 0 auto;
        white-space: normal !important;
    }

    /* El paso en el que está la operación tiene que distinguirse sin color. */
    .op-step.current,
    .op-step.active {
        border-width: 2px !important;
        border-color: #000000 !important;
        font-weight: 800 !important;
    }

    /* Nada de animaciones en algo que no se mueve. */
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ===========================================================================
   Modales sobre <dialog>
   ---------------------------------------------------------------------------
   Convive con el `.modal-overlay` que ya usan cinco pantallas (clientes, citas,
   oportunidades...). Aquel repite los estilos en linea dentro de cada modal y
   engancha los manejadores de Esc y de fondo uno por uno; este los trae del
   navegador. Las pantallas viejas pueden migrar cuando se toquen; no hacia
   falta reescribirlas para esto.
   =========================================================================== */

.modal-d {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 14px);
    background: var(--bg-surface);
    color: var(--text-body);
    padding: 0;
    width: min(580px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    box-shadow: 0 24px 64px rgba(15, 23, 42, .24);
}

.modal-d::backdrop {
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
}

.modal-d-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border-soft, var(--border-default));
}

.modal-d-cab h3 { margin: 0; font-size: 16px; color: var(--text-strong); }

.modal-d-cab .sub {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-muted);
}

.modal-d-cuerpo {
    padding: 18px 22px;
    overflow-y: auto;
    max-height: calc(100vh - 210px);
}

.modal-d-pie {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--border-soft, var(--border-default));
}

/* Cada accion con su porque al lado: nadie deberia tener que adivinar que hace
   «Quitar 2FA» antes de pulsarlo. */
.modal-d-accion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft, var(--border-default));
}

.modal-d-accion:last-child { border-bottom: 0; }

.modal-d-accion .texto { min-width: 0; }
.modal-d-accion .titulo { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.modal-d-accion .porque { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.modal-d-accion form { margin: 0; flex-shrink: 0; }

.modal-d-seccion {
    margin: 22px 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-subtle, var(--text-muted));
}

.modal-d-seccion:first-child { margin-top: 0; }

/* Lo que no tiene vuelta atras, apartado: «Eliminar» y «Cerrar sesiones» no
   deben estar a la misma distancia del dedo. */
.modal-d-peligro {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--danger-border, var(--border-default));
    border-radius: var(--radius, 10px);
    background: var(--danger-bg, var(--bg-surface-muted));
}

@media (max-width: 560px) {
    .modal-d-accion { flex-direction: column; align-items: stretch; }
    .modal-d-accion form, .modal-d-accion .btn { width: 100%; }
}

/* Para lo que se lee caracter a caracter —un enlace de un solo uso, una IP,
   un identificador—. En proporcional, un 1 y una l son la misma cosa. */
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }