/* ============================================================ VALIDA · COMPONENTES — patrones reales de Valida Legal (prod). Requiere valida-tokens.css importado antes. Prefijo .v-*. Dark: agrega la clase .dark en . ============================================================ */ body{ margin:0; font-family:var(--font-sans); color:var(--color-text-primary); background:var(--color-surface); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; } .v-mono{font-family:var(--font-mono)} /* ---------- Botones ---------- */ .v-btn{font-family:var(--font-sans);font-weight:400;font-size:13px;border-radius:9px;padding:0 14px;min-height:34px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;transition:background .2s,border-color .2s} .v-btn--primary{background:var(--color-brand-accent);border-color:var(--color-brand-accent);color:#fff} .v-btn--primary:hover{background:var(--color-brand-accent-hover);border-color:var(--color-brand-accent-hover)} .dark .v-btn--primary{color:#08130D} .v-btn--secondary{background:var(--color-surface-elevated);border-color:var(--color-border-subtle);color:#475467} .v-btn--secondary:hover{background:var(--color-hover-bg)} .dark .v-btn--secondary{color:var(--color-text-secondary)} .v-btn--ghost{background:transparent;color:var(--color-brand-accent);padding:0 8px} .v-btn[disabled]{opacity:.6;cursor:not-allowed} /* ---------- Inputs ---------- */ .v-label{font-size:12px;font-weight:500;color:var(--color-text-secondary);margin-bottom:8px;display:block} .v-input{display:block;width:100%;font-family:var(--font-sans);font-size:14px;padding:10px 14px;border:1px solid var(--color-border-subtle);border-radius:8px;background:var(--color-input-bg);color:var(--color-text-primary);outline:none;transition:box-shadow .2s,border-color .2s} .v-input::placeholder{color:var(--color-text-muted)} .v-input:focus{box-shadow:var(--color-focus-ring);border-color:var(--color-brand-accent)} .v-hint{font-size:12px;color:var(--color-text-muted);margin-top:8px;line-height:1.5} /* ---------- Badges de estado (pill con borde · sección 5) ---------- */ .v-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid transparent;padding:4px 11px;font-size:12px;font-weight:600;line-height:1.4} .v-badge--sm{padding:3px 10px;font-size:11px} .v-badge--success{background:var(--tone-success-bg);color:var(--tone-success-tx);border-color:var(--tone-success-bd)} .v-badge--warning{background:var(--tone-warning-bg);color:var(--tone-warning-tx);border-color:var(--tone-warning-bd)} .v-badge--danger{background:var(--tone-danger-bg);color:var(--tone-danger-tx);border-color:var(--tone-danger-bd)} .v-badge--info{background:var(--tone-info-bg);color:var(--tone-info-tx);border-color:var(--tone-info-bd)} .v-badge--neutral{background:var(--tone-neutral-bg);color:var(--tone-neutral-tx);border-color:var(--tone-neutral-bd)} .v-badge--purple{background:var(--tone-purple-bg);color:var(--tone-purple-tx);border-color:var(--tone-purple-bd)} /* ---------- Card ---------- */ .v-card{background:var(--color-surface-card);border:1px solid var(--color-border-subtle);border-radius:12px} /* ---------- Sidebar (blanco, 3 zonas) ---------- */ .v-sidebar{width:260px;background:var(--color-surface-card);border-right:1px solid var(--color-border-subtle);display:flex;flex-direction:column;font-family:var(--font-sans)} .v-sidebar__head{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 18px;border-bottom:1px solid var(--color-border-subtle)} .v-sidebar__group{font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#8a94a6;padding:0 12px 8px} .dark .v-sidebar__group{color:rgba(255,255,255,.38)} .v-sidebar__zone{padding:0 12px} .v-sidebar__divider{height:1px;background:var(--color-border-subtle);margin:10px 0} .v-navitem{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;border:1px solid transparent;font-size:14px;font-weight:300;color:#1F2937;cursor:pointer;text-align:left;width:100%;background:transparent} .v-navitem > svg,.v-navitem .v-navitem__ic{color:#374151;display:flex;flex-shrink:0} .v-navitem:hover{color:var(--color-brand-accent)} .v-navitem:hover .v-navitem__ic{color:var(--color-brand-accent)} .v-navitem.is-active{background:#f3f5f8;border-color:#d9e1ec;color:#000;font-weight:400;cursor:default} .v-navitem.is-active .v-navitem__ic{color:var(--color-brand-accent)} .dark .v-navitem{color:#B0B7C3} .dark .v-navitem.is-active{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#fff} .v-navchildren{position:relative;margin-left:24px;padding-left:8px} .v-navchildren__rail{position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--color-border-subtle)} .v-navchildren__rail.is-active{background:rgba(42,143,100,.35)} /* ---------- Topbar (57px) ---------- */ .v-topbar{height:57px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;background:var(--color-surface-card);border-bottom:1px solid var(--color-border-subtle)} .v-crumbs{display:flex;align-items:center;gap:8px;font-size:14px} .v-crumbs__sep{color:var(--color-text-muted)} .v-crumbs__muted{color:var(--color-text-secondary)} .v-crumbs__active{color:var(--color-text-primary);font-weight:500} .v-search{display:flex;align-items:center;gap:8px;background:var(--color-input-bg);border:1px solid var(--color-border-subtle);border-radius:8px;padding:8px 14px;color:var(--color-text-secondary);font-size:14px;cursor:pointer} .v-kbd{font-family:var(--font-mono);font-size:11px;background:var(--color-border-subtle);border-radius:4px;padding:1px 6px;color:var(--color-text-secondary)} .v-iconbtn{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:var(--color-text-secondary);border:1px solid transparent;background:transparent;cursor:pointer} .v-iconbtn--bordered{border-color:var(--color-border-subtle)} .v-avatar{width:32px;height:32px;border-radius:9999px;background:linear-gradient(135deg,#374151,#111827);display:grid;place-items:center;color:#fff;font-size:13px;font-weight:600} /* ---------- Tabla (registry) ---------- */ .v-table-card{background:var(--color-surface-card);border:1px solid var(--color-border-subtle);border-radius:12px;overflow:hidden} .v-table-toolbar{padding:16px;border-bottom:1px solid var(--color-border-subtle);display:flex;align-items:center;gap:12px} .v-table-search{position:relative;flex:1} .v-table-search input{width:100%;border:1px solid var(--color-border-subtle);background:var(--color-input-bg);border-radius:8px;padding:10px 16px 10px 40px;font-size:14px;color:var(--color-text-primary);font-family:inherit;outline:none} .v-table-search input:focus{box-shadow:var(--color-focus-ring);border-color:var(--color-brand-accent)} .v-filter-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--color-border-subtle);background:var(--color-input-bg);color:var(--color-text-secondary);border-radius:8px;padding:10px 16px;font-size:14px;font-weight:500;cursor:pointer} .v-filter-btn.is-active{border-color:rgba(42,143,100,.3);background:rgba(42,143,100,.1);color:var(--color-brand-accent)} .v-table{width:100%;border-collapse:collapse} .v-table thead tr{background:var(--color-input-bg)} .v-table th{padding:12px 16px;font-size:12px;font-weight:600;color:var(--color-text-secondary);text-align:left} .v-table th.is-center{text-align:center} .v-table td{padding:14px 16px;font-size:14px;color:var(--color-text-primary);border-top:1px solid var(--color-surface-secondary)} .v-table tbody tr{cursor:pointer} .v-table tbody tr:hover{background:var(--color-input-bg)} .v-cell-icon{width:32px;height:32px;border-radius:8px;background:rgba(42,143,100,.1);display:grid;place-items:center;flex:none;color:var(--color-brand-accent)} .v-table-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--color-border-subtle);font-size:13px;color:var(--color-text-secondary)} /* ---------- Empty state ---------- */ .v-empty{background:var(--color-surface-card);border:1px solid var(--color-border-subtle);border-radius:12px;padding:44px;text-align:center} .v-empty__t{font-size:16px;font-weight:600;color:var(--color-text-primary);margin-top:16px} .v-empty__p{font-size:13.5px;color:var(--color-text-secondary);margin:6px 0 18px;line-height:1.55} /* ---------- Wizard / stepper ---------- */ .v-stepper{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .v-step{display:flex;align-items:center;gap:11px;border:1px solid var(--color-border-subtle);border-radius:12px;padding:11px 14px;background:var(--color-surface-card)} .v-step__i{width:26px;height:26px;border-radius:9px;background:var(--color-input-bg);color:var(--color-text-muted);display:grid;place-items:center;font-size:12px;font-weight:700;border:1px solid var(--color-border-subtle)} .v-step.is-active{border-color:var(--color-brand-accent);background:rgba(42,143,100,.08)} .v-step.is-active .v-step__i{background:var(--color-brand-accent);color:#fff;border-color:var(--color-brand-accent)} .v-step.is-done .v-step__i{background:rgba(42,143,100,.1);color:var(--color-brand-accent-hover);border-color:rgba(42,143,100,.2)} .v-progress{width:150px;height:6px;border-radius:9999px;background:var(--color-input-bg);overflow:hidden} .v-progress > span{display:block;height:100%;border-radius:inherit;background:var(--color-brand-accent)} /* ---------- View modal (DetailModalScaffold) ---------- */ .v-modal-backdrop{position:fixed;inset:0;background:rgba(13,16,26,.45);display:flex;align-items:center;justify-content:center;padding:28px;z-index:60} .v-modal{width:100%;max-width:900px;background:var(--color-surface-card);border:1px solid var(--color-border-subtle);border-radius:14px;box-shadow:0 28px 80px rgba(15,23,42,.28);overflow:hidden} .v-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid var(--color-border-subtle);padding:20px 24px} .v-modal__kicker{margin:0 0 6px;font-size:12px;color:#667085} .v-modal__title{margin:0;font-size:20px;font-weight:500;color:var(--color-text-primary);display:inline-flex;align-items:center;gap:6px} .v-verified{width:15px;height:15px;flex:none;border-radius:9999px;background:#1877F2;display:inline-flex;align-items:center;justify-content:center} .v-verified::after{content:"";display:block;width:4px;height:7px;transform:translateY(-.5px) rotate(45deg);border-right:1.5px solid #fff;border-bottom:1.5px solid #fff} .v-mtag{display:inline-flex;align-items:center;min-height:24px;border-radius:6px;border:1px solid #e2e6ec;background:#fff;color:#596579;padding:0 10px;font-size:11px} .v-mtag--success{border-color:rgba(42,143,100,.2);background:rgba(230,244,238,.6);color:#247856} .v-mtag--warning{border-color:#F3D6A5;background:rgba(255,248,235,.7);color:#8a5a09} .v-modal__tabs{margin:16px 24px;display:flex;gap:4px;flex-wrap:wrap;border:1px solid #A9D9BF;background:var(--color-surface-card);border-radius:12px;padding:4px} .v-mtab{min-height:34px;display:inline-flex;align-items:center;border-radius:9px;padding:0 12px;font-size:12.5px;color:#5f6977;cursor:pointer;background:transparent;border:none} .v-mtab:hover{background:rgba(230,244,238,.75);color:#247856} .v-mtab.is-active{background:var(--color-brand-accent);color:#fff} .v-modal__body{padding:20px 24px 24px;display:grid;gap:20px} .v-detail-surface{overflow:hidden;border-radius:12px;border:1px solid #dce4ef;background:var(--color-surface-card)} .v-detail-surface__head{border-bottom:1px solid #dce4ef;background:#edf1f6;padding:12px 16px} .v-detail-surface__head h2{margin:0;font-size:14px;font-weight:500;color:var(--color-text-primary)} .v-detail-surface__head p{margin:4px 0 0;font-size:12px;color:#667085;font-weight:300} .v-field-grid{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px} .v-field{border:1px solid #e6ecf3;border-radius:8px;background:var(--color-surface-card);padding:10px 12px} .v-field span{display:block;font-size:11px;color:#667085;font-weight:300} .v-field strong{display:block;margin-top:4px;font-size:13px;font-weight:400;color:var(--color-text-primary)} .v-modal__foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--color-border-subtle);padding:14px 24px;font-size:11px;color:#667085;font-weight:300}