/* ═══════════════════════════════════════════════════════════════════════
   VIVVO DESIGN SYSTEM v1
   Tokens y utilidades del handoff de Claude Design (UI Vivvo).
   Activos cuando el wrapper de la página tiene .vv-page — sino, los
   estilos base del admin (Filament default) siguen intactos.
   Cualquier página nueva que adopte este sistema solo necesita:
     1. <x-vivvo.page-header :crumbs=... title=... subtitle=...>
     2. Wrapper raíz con clase .vv-page
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens (1:1 con css/tokens.css del handoff) ── */
.vv-page {
    --vv-coral:#FF6B4A;
    --slate-50:#F8FAFC;--slate-100:#F1F5F9;--slate-150:#E9EEF4;--slate-200:#E2E8F0;--slate-300:#CBD5E1;
    --slate-400:#94A3B8;--slate-500:#64748B;--slate-600:#475569;
    --slate-700:#334155;--slate-800:#1E293B;--slate-900:#0F172A;
    --coral-50:#FFF2EE;--coral-100:#FFE1D8;--coral-200:#FFC4B1;
    --coral-500:#FF6B4A;--coral-600:#E5573A;--coral-700:#BF4128;
    --success-50:#EEF7F0;--success-500:#1E8E5A;--success-700:#15663F;
    --warning-50:#FFF6E5;--warning-500:#D89417;--warning-700:#8A5B05;
    --danger-50:#FEEFEC;--danger-500:#D94A2E;--danger-700:#9A2813;
    --info-50:#ECF2FB;--info-500:#3F6BC2;
    --bg:#F8FAFC;--bg-elevated:#FFFFFF;--bg-muted:var(--slate-100);
    --border:var(--slate-200);--border-strong:var(--slate-300);
    --text:var(--slate-900);--text-secondary:var(--slate-600);--text-muted:var(--slate-500);
    --r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-pill:9999px;
    --shadow-xs:0 1px 2px rgba(15,23,42,.04);
    --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.05);
    --shadow-md:0 2px 4px rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.06);
    --shadow-xl:0 8px 24px rgba(15,23,42,.08),0 24px 56px rgba(15,23,42,.12);
    --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    --fs-xs:11px;--fs-sm:12px;--fs-base:13px;--fs-md:14px;--fs-lg:16px;--fs-xl:18px;--fs-2xl:22px;--fs-3xl:28px;
    --lh-tight:1.2;--lh-snug:1.35;--lh-normal:1.5;
    --t-fast:120ms cubic-bezier(.4,0,.2,1);
    --t-base:180ms cubic-bezier(.4,0,.2,1);

    font-family: var(--font-sans) !important;
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11","ss01";
}
html.dark .vv-page,
[data-theme="dark"] .vv-page {
    --bg:#0B1220;--bg-elevated:#111A2E;--bg-muted:#0F1828;
    --border:#1F2C46;--border-strong:#2A3A5C;
    --text:#E6ECF5;--text-secondary:#A5B2C8;--text-muted:#7C8AA3;
}
.vv-page button, .vv-page input, .vv-page select, .vv-page textarea,
.vv-page h1, .vv-page h2, .vv-page h3, .vv-page p, .vv-page span, .vv-page div,
.vv-page label, .vv-page a { font-family: inherit; }
.vv-page .mono, .vv-page .tnum { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.vv-page .caps { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: var(--fs-xs); color: var(--text-muted); }
.vv-page .hr { height:1px; background: var(--border); border:0; margin: 16px 0; }

/* ── 2. Botón (.btn + variants outline / accent / primary / ghost) ── */
.vv-page .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 14px; border-radius: var(--r-md); font-size: var(--fs-md); font-weight:600; cursor:pointer; border:1px solid transparent; background: transparent; color: var(--text); transition: all var(--t-fast); white-space:nowrap; font-family: inherit; text-decoration:none; }
.vv-page .btn svg { width:14px; height:14px; flex-shrink:0; }
.vv-page .btn.outline { border-color: var(--border); background: var(--bg-elevated); }
.vv-page .btn.outline:hover { background: var(--bg-muted); border-color: var(--border-strong); }
.vv-page .btn.accent { background: var(--coral-500); color:#fff; border-color: var(--coral-500); }
.vv-page .btn.accent:hover { background: var(--coral-600); border-color: var(--coral-600); }
.vv-page .btn.primary { background: var(--slate-900); color:#fff; border-color: var(--slate-900); }
.vv-page .btn.primary:hover { background: var(--slate-800); }
.vv-page .btn.ghost { color: var(--text-secondary); background: transparent; }
.vv-page .btn.ghost:hover { background: var(--bg-muted); color: var(--text); }
.vv-page .btn.sm { height:28px; padding:0 10px; font-size: var(--fs-sm); }
.vv-page .btn.icon { width:28px; padding:0; }

/* ── 3. Badge ── */
.vv-page .badge { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; padding:1px 6px; border-radius:4px; background: var(--bg-muted); color: var(--text-secondary); border:1px solid var(--border); line-height:1.5; }
.vv-page .badge.outline { background: transparent; }
.vv-page .badge.coral   { background: var(--coral-50);   color: var(--coral-700);   border-color: var(--coral-200); }
.vv-page .badge.success { background: var(--success-50); color: var(--success-700); border-color: rgba(30,142,90,.3); }
.vv-page .badge.warning { background: var(--warning-50); color: var(--warning-700); border-color: rgba(216,148,23,.3); }
.vv-page .badge.danger  { background: var(--danger-50);  color: var(--danger-700);  border-color: rgba(217,74,46,.3); }
.vv-page .badge.info    { background: var(--info-50);    color: var(--info-500);    border-color: rgba(63,107,194,.3); }
.vv-page .badge .dot { width:5px; height:5px; border-radius:50%; background: currentColor; opacity: .8; }

/* ── 4. Chip (filtros tipo pill) ── */
.vv-page .chip { height:30px; padding:0 12px; border:1px solid var(--border); border-radius: var(--r-pill); background: var(--bg-elevated); font-size: var(--fs-sm); color: var(--text-secondary); cursor:pointer; display:inline-flex; align-items:center; gap:5px; font-family: inherit; transition: all var(--t-fast); }
.vv-page .chip:hover { border-color: var(--border-strong); }
.vv-page .chip.active { background: var(--slate-900); color:#fff; border-color: var(--slate-900); }
.vv-page .chip .num { font-family: var(--font-mono); font-size:10px; opacity:.85; }

/* ── 5. Avatar (paleta determinística — usa Asesor::avatarVariant en PHP) ── */
.vv-page .avatar { display:inline-flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; line-height:1; font-weight:700; }
.vv-page .avatar.sm { width:22px; height:22px; border-radius: var(--r-pill); font-size:10px; }
.vv-page .avatar.md { width:28px; height:28px; border-radius: var(--r-pill); font-size:11px; }
.vv-page .avatar.lg { width:40px; height:40px; border-radius: var(--r-pill); font-size:14px; }
.vv-page .av-1 { background: linear-gradient(135deg,#1E293B,#475569); }
.vv-page .av-2 { background: linear-gradient(135deg,#FF6B4A,#BF4128); }
.vv-page .av-3 { background: linear-gradient(135deg,#3F6BC2,#1F3A75); }
.vv-page .av-4 { background: linear-gradient(135deg,#1E8E5A,#15663F); }
.vv-page .av-5 { background: linear-gradient(135deg,#8B5CF6,#5B21B6); }
.vv-page .av-6 { background: linear-gradient(135deg,#D89417,#8A5B05); }

/* ── 6. Card / Tabla / Segmented control / Input search / Tabs ── */
.vv-page .card { background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.vv-page .card-body { padding: 16px; }
.vv-page .card-body.flush { padding: 0; }

.vv-page .table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.vv-page .table thead th { text-align: left; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); padding: 10px 16px; background: var(--bg-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.vv-page .table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.vv-page .table tbody tr:last-child td { border-bottom: 0; }
.vv-page .table tbody tr { transition: background var(--t-fast); }
.vv-page .table tbody tr:hover { background: var(--bg-muted); cursor: pointer; }
.vv-page .table .num { text-align: right; }
.vv-page .table th.num { text-align: right; }

.vv-page .seg { display:inline-flex; background: var(--bg-muted); border:1px solid var(--border); border-radius: var(--r-md); padding:2px; }
.vv-page .seg button { height:28px; padding:0 12px; background:transparent; border:0; color: var(--text-muted); font-weight:600; font-size: var(--fs-sm); cursor:pointer; border-radius: var(--r-sm); display:inline-flex; align-items:center; gap:6px; font-family: inherit; }
.vv-page .seg button.active { background: var(--bg-elevated); color: var(--text); box-shadow: var(--shadow-xs); }

.vv-page .input-search { position:relative; display:flex; align-items:center; }
.vv-page .input-search > svg { position:absolute; left:10px; width:14px; height:14px; color: var(--text-muted); pointer-events:none; }
.vv-page .input-search input { width:100%; height:36px; border-radius: var(--r-md); border:1px solid var(--slate-300); background: var(--bg-elevated); padding: 0 12px 0 32px; font-size: var(--fs-md); color: var(--text); outline:none; font-family: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.vv-page .input-search input:focus { border-color: var(--coral-500); box-shadow: 0 0 0 3px rgba(255,107,74,.15); }

/* Inputs nativos (genérico Vivvo) — borde gris siempre visible + focus coral.
   Pablo (03/05/2026): los inputs sin foco eran prácticamente invisibles
   con --border (slate-200). Subimos a slate-300 para que se note el
   contorno y unificamos focus al coral del design system. */
.vv-page input[type="text"],
.vv-page input[type="email"],
.vv-page input[type="tel"],
.vv-page input[type="number"],
.vv-page input[type="url"],
.vv-page input[type="search"],
.vv-page input[type="date"],
.vv-page input[type="time"],
.vv-page input[type="datetime-local"],
.vv-page input[type="password"],
.vv-page input:not([type]),
.vv-page select,
.vv-page textarea { border:1px solid var(--slate-300); border-radius: var(--r-md); background: var(--bg-elevated); color: var(--text); font-family: inherit; outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.vv-page input[type="text"]:focus,
.vv-page input[type="email"]:focus,
.vv-page input[type="tel"]:focus,
.vv-page input[type="number"]:focus,
.vv-page input[type="url"]:focus,
.vv-page input[type="search"]:focus,
.vv-page input[type="date"]:focus,
.vv-page input[type="time"]:focus,
.vv-page input[type="datetime-local"]:focus,
.vv-page input[type="password"]:focus,
.vv-page input:not([type]):focus,
.vv-page select:focus,
.vv-page textarea:focus { border-color: var(--coral-500); box-shadow: 0 0 0 3px rgba(255,107,74,0.15); }
[data-theme="dark"] .vv-page input[type="text"],
[data-theme="dark"] .vv-page input[type="email"],
[data-theme="dark"] .vv-page input[type="tel"],
[data-theme="dark"] .vv-page input[type="number"],
[data-theme="dark"] .vv-page input[type="url"],
[data-theme="dark"] .vv-page input[type="search"],
[data-theme="dark"] .vv-page input[type="date"],
[data-theme="dark"] .vv-page input[type="time"],
[data-theme="dark"] .vv-page input[type="datetime-local"],
[data-theme="dark"] .vv-page input[type="password"],
[data-theme="dark"] .vv-page input:not([type]),
[data-theme="dark"] .vv-page select,
[data-theme="dark"] .vv-page textarea { border-color: rgba(255,255,255,0.18); }

.vv-page .tabs { display:flex; gap:0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.vv-page .tab { padding: 10px 14px; font-size: var(--fs-md); font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 8px; transition: all var(--t-fast); background: none; border-left:0; border-right:0; border-top:0; font-family: inherit; }
.vv-page .tab:hover { color: var(--text-secondary); }
.vv-page .tab.active { color: var(--text); border-bottom-color: var(--coral-500); }
.vv-page .tab .count { font-size: 10px; font-weight: 700; background: var(--bg-muted); color: var(--text-muted); padding: 1px 6px; border-radius: var(--r-pill); font-family: var(--font-mono); }
.vv-page .tab.active .count { background: var(--coral-50); color: var(--coral-700); }

/* ── 7. Step dots (progreso de pipeline en mini) ── */
.vv-page .step-dots { display:inline-flex; gap:3px; }
.vv-page .step-dots .d { width:6px; height:6px; border-radius:50%; background: var(--bg-muted); }
.vv-page .step-dots .d.on { background: var(--slate-800); }
.vv-page .step-dots .d.cur { background: var(--coral-500); box-shadow: 0 0 0 2px var(--coral-100); }
[data-theme="dark"] .vv-page .step-dots .d.on { background: var(--slate-300); }

/* ── 8. Header de página (estructural, fonts vienen de los tokens) ── */
.vv-page .vv-breadcrumb { display:flex; align-items:center; gap:8px; font-size: var(--fs-md); color: var(--text-muted); margin: 0 0 12px; flex-wrap:wrap; }
.vv-page .vv-breadcrumb .sep { opacity: .5; }
.vv-page .vv-breadcrumb .crumb { color: var(--text-muted); text-decoration: none; transition: color var(--t-fast); }
.vv-page .vv-breadcrumb a.crumb:hover { color: var(--text); }
.vv-page .vv-breadcrumb .current { color: var(--text); font-weight: 600; }

.vv-page .vv-pg-head { display:flex; align-items: center; justify-content: space-between; gap: 16px 20px; margin-bottom: 16px; flex-wrap: wrap; }
.vv-page .vv-pg-head.stack { flex-direction: column; align-items: stretch; gap: 14px; }
.vv-page .vv-pg-head.stack .vv-pg-actions { width: 100%; }
.vv-page .vv-pg-title-block { min-width: 0; flex: 1 1 320px; }
.vv-page .vv-pg-title { font-size: var(--fs-3xl) !important; font-weight: 700 !important; letter-spacing: -0.025em; line-height: 1.15; color: var(--text); margin: 0 0 6px; }
.vv-page .vv-pg-subtitle-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.vv-page .vv-pg-subtitle { font-size: var(--fs-md) !important; font-weight: 400; color: var(--text-muted); max-width: 60ch; margin: 0; line-height: 1.45; }
.vv-page .vv-pg-subtitle b { color: var(--text); font-weight: 600; }
.vv-page .vv-pg-subtitle-aside { display: inline-flex; align-items: center; }
.vv-page .vv-pg-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }

/* Filtro inline para el header (ej. dropdown de asesor en Clientes/Propietarios).
   Chip con borde sutil + ícono Tabler + select sin appearance nativa. Estética
   alineada con .btn outline (mismas alturas, mismos colores). */
.vv-filter-pick { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; background: var(--bg-elevated); border: 1px solid var(--coral-200); border-radius: var(--r-md); color: var(--text-secondary); font-size: 12px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.vv-filter-pick:hover { border-color: var(--coral-500); }
.vv-filter-pick:focus-within { border-color: var(--coral-500); box-shadow: 0 0 0 3px rgba(255,107,74,.15); }
.vv-filter-pick svg { flex-shrink: 0; color: var(--text-muted); }
.vv-filter-pick select { background: transparent; border: 0; outline: none; font-size: 12px; font-weight: 500; color: var(--text); font-family: inherit; cursor: pointer; padding: 0 4px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 0 center; padding-right: 18px; }

/* ── 9. Reset al gap del page-content de Filament para que el header
       Vivvo arranque pegado sin espacio fantasma de la cabecera default. ── */
.fi-page > .fi-page-content,
section.fi-page-content { padding-top: 0 !important; }