/* AdminSE — V2 Naval design tokens * * Single source of truth para los semantic tokens del sistema V2 que NO * están expuestos por PrimeVue 4 como CSS vars públicas (paletas primitive * tipo green/red/sky/amber, shadows compuestas, accents semánticos del * producto, etc). * * VIVE EN public/ FUERA DEL PIPELINE de Tailwind 4 / Lightning CSS porque * el bundler dropea reglas con estructura similar (verificado empíricamente * con @font-face en Tarea 4 y con dos `:root[data-theme-version=*]` en Fase A). * Cargado vía desde index.html. * * REGLAS PARA AGREGAR / MODIFICAR TOKENS: * 1. Si necesitás un valor del sistema en un componente, declarálo acá * ANTES de usarlo. Cero hex literales en componentes. * 2. El namespace `--v2-*` indica "token semántico del producto AdminSE V2". * No mezclar con `--p-*` (PrimeVue runtime) ni `--font-*` (Tailwind preflight). * 3. Cuando el valor cambia entre light y dark mode, declaralo en ambas * secciones (light = `:root`, dark = `[data-theme='dark']`). Si NO cambia * con dark mode, declararlo solo una vez en `:root`. * 4. Cuando un token referencia una palette primitive de Tailwind (ej green-500), * poner el comment "tailwind {name}-{stop}" para trazabilidad. * 5. Evitar redundancia: NO declares `--v2-card-bg-light` y `--v2-card-bg-dark` * separados. Usá el mismo nombre en ambos selectores y dejá que el cascade * resuelva. */ :root { /* ─── Brand ──────────────────────────────────────────────────────────── */ --v2-primary: #1e3a5c; /* Naval mate — Fase 0 aprobada */ --v2-primary-hover: #182f4b; /* primary 600 */ /* ─── Trend signals (delta pills, sparkline para metricas con direccion) */ --v2-trend-up-bg: rgba(34, 197, 94, 0.14); /* tailwind green-500 14% */ --v2-trend-up-bg-hover: rgba(34, 197, 94, 0.22); --v2-trend-up-text: #15803d; /* green-700 */ --v2-trend-down-bg: rgba(239, 68, 68, 0.14); /* tailwind red-500 14% */ --v2-trend-down-bg-hover: rgba(239, 68, 68, 0.22); --v2-trend-down-text: #b91c1c; /* red-700 */ /* ─── Severity accents (para prop accent="..." en componentes) ──────── */ --v2-accent-info: #0ea5e9; /* tailwind sky-500 */ --v2-accent-warning: #f59e0b; /* tailwind amber-500 */ --v2-accent-success: #22c55e; /* tailwind green-500 */ --v2-accent-danger: #ef4444; /* tailwind red-500 */ /* ─── Dialog header gradients per domain (F22 — headers color-coded) ──── Cada dialog del bloque pinta su header con el token de su dominio, para que el usuario sepa de un vistazo qué está editando (refuerza el icono). Gradiente oscuro 135° base→acento (mismo patrón que el naval). Globales: usables desde cualquier módulo. */ --v2-dialog-head-poliza: linear-gradient(135deg, #0f1e2e 0%, var(--v2-primary, #1e3a5c) 100%); /* naval — sistema */ --v2-dialog-head-endoso: var(--v2-dialog-head-poliza); /* endoso comparte el color de póliza */ --v2-dialog-head-cliente: linear-gradient(135deg, #0a2c26 0%, #13776a 100%); /* teal — personas/relación */ --v2-dialog-head-siniestro: linear-gradient(135deg, #3a141a 0%, #963140 100%); /* burdeos — siniestro/incidente */ --v2-dialog-head-ticket: linear-gradient(135deg, #1a1540 0%, #4f43bf 100%); /* índigo — seguimiento/tarea */ /* Dialogs SECUNDARIOS / genéricos del sistema (sub-editores: bien, plan de pagos, etc.): un único header SUTIL y CLARO (slate muy tenue) con LETRA OSCURA — a diferencia de los headers de dominio (oscuros saturados + letra blanca). Así NO se mezcla con el naval de Póliza y se lee como "genérico/utilitario". Adaptativo: claro en light, slate oscuro sutil en dark (ver bloque dark). Lucho 2026-06-09. */ --v2-dialog-head-secondary: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); /* slate-100→200 (light) */ /* Acento SÓLIDO por dominio (versión plana del header) — para el chrome de identidad DENTRO del form: indicador del tab activo + texto del tab activo + ícono de sección. El CTA primario (Guardar) NO usa esto: queda en --v2-primary (consistencia de acción, evita colisión semántica del burdeos con "destructivo"). Decisión Lucho 2026-06-09. */ --v2-dialog-accent-poliza: var(--v2-primary, #1e3a5c); /* naval (= primary) */ --v2-dialog-accent-endoso: var(--v2-dialog-accent-poliza); --v2-dialog-accent-cliente: #0f766e; /* teal-700 (cliente) */ --v2-dialog-accent-siniestro: #963140; /* burdeos (siniestro) */ --v2-dialog-accent-ticket: #4f43bf; /* índigo (ticket) */ --v2-dialog-accent-secondary: #475569; /* slate-600 — chrome de los dialogs secundarios */ /* ─── Colores por DOMINIO (F27 — Búsqueda Global ⌘K) ────────────────────── Acento por dominio consumido por la búsqueda global (íconos teñidos por entidad/ módulo) y cualquier chrome de módulo futuro. Única fuente — cero hex de dominio en componentes. Los dominios CON entidad-dialog APUNTAN al accent del dialog (si Lucho cambia el accent, la búsqueda lo hereda solo; y flipean en dark vía ese var). Los dominios SOLO-MÓDULO tienen color propio, sobrio y distinguible (override dark abajo para contraste sobre fondo oscuro). */ --v2-domain-poliza: var(--v2-dialog-accent-poliza); /* naval */ --v2-domain-cliente: var(--v2-dialog-accent-cliente); /* teal */ --v2-domain-siniestro: var(--v2-dialog-accent-siniestro); /* burdeos */ --v2-domain-ticket: var(--v2-dialog-accent-ticket); /* índigo */ --v2-domain-cotizacion: var(--v2-ticketable-external_quote-color); /* violeta */ --v2-domain-ajustes: var(--v2-dialog-accent-secondary); /* slate (chrome neutro) */ --v2-domain-inicio: var(--v2-primary, #1e3a5c); /* naval/primary */ --v2-domain-agenda: #d97706; /* amber-600 */ --v2-domain-stats: #0284c7; /* sky-600 */ --v2-domain-mailing: #0891b2; /* cyan-600 */ --v2-domain-import: #1d4ed8; /* blue-700 */ --v2-domain-tesoreria: #15803d; /* green-700 (dólar) */ --v2-domain-reportes: #5b7089; /* steel bluegray */ --v2-domain-bien: #047857; /* emerald-700 (bien/activo — coherente con los pins verdes) */ /* ─── Card surfaces ──────────────────────────────────────────────────── */ --v2-card-bg: #ffffff; --v2-card-border: #e2e8f0; /* slate-200 */ --v2-card-border-top: #cbd5e1; /* slate-300 — iluminacion sutil desde arriba */ /* Divider GLOBAL: línea fina que heredan TODOS los dividers del sistema (componente + gutter de ). Deriva de --v2-text (22%), así que se adapta solo en dark sin override propio. */ --v2-divider: color-mix(in srgb, var(--v2-text, #0f172a) 22%, transparent); --v2-card-radius: 12px; /* matchea --p-border-radius-lg del preset */ --v2-card-padding: 1.5rem 1.75rem; --v2-card-min-height: 9.5rem; /* ─── Shadows ────────────────────────────────────────────────────────── */ --v2-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --v2-shadow-card-hover: 0 10px 28px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.06); /* ─── Text ──────────────────────────────────────────────────────────── */ --v2-text: #0f172a; /* slate-900 — texto principal */ --v2-text-muted: #64748b; /* slate-500 — labels, captions, helpers */ /* ─── Typography scale (Linear/Stripe jerarquía — Etapa 3 / F0) ────── Decisión locked-in (north-star §6): 13px body / 12px labels / 11px helpers. Hero numbers (17-36px) viven en los componentes que los consumen (KpiCard, status pills, etc.) y referencian via --v2-text-size-hero-* o declaran inline cuando son one-offs. Migración consumer-by-consumer en F1+. Pilots actuales tienen tamaños hardcoded que coinciden con estos tokens por convergencia. */ --v2-text-size-body: 13px; --v2-text-size-label: 12px; --v2-text-size-helper: 11px; --v2-text-size-hero-sm: 17px; /* hero number chico (header titles, premio mid) */ --v2-text-size-hero-md: 22px; /* card title prominente */ --v2-text-size-hero-lg: 36px; /* KPI value display */ --v2-text-tracking-title: -0.015em; --v2-text-tracking-hero: -0.02em; --v2-text-tracking-label: 0.06em; --v2-text-line-hero: 1.05; --v2-text-line-title: 1.3; --v2-text-line-body: 1.5; --v2-text-line-helper: 1.35; /* ─── Skeleton bones ──────────────────────────────────────────────── */ --v2-skeleton-bone: rgba(15, 23, 42, 0.08); --v2-skeleton-shimmer: rgba(255, 255, 255, 0.55); /* ─── Motion ────────────────────────────────────────────────────────── */ --v2-easing: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quart */ --v2-duration-fast: 0.18s; --v2-duration-base: 0.22s; --v2-duration-slow: 0.55s; /* ─── Shell layout — Etapa 3 / F1.4.5 (Layout B) ───────────────────── El sidebar es full-height fixed a la izquierda; el topbar empieza donde termina el sidebar. Ambos componentes leen el ancho via var() para que la transición collapsed → expanded sea reactiva. El valor se reescribe en runtime cuando el sidebar colapsa (App.vue real en F1.5.c, o el showcase del pilot en F1.4.5). */ --v2-sidebar-width: 260px; --v2-sidebar-width-collapsed: 60px; /* ─── Sparkline (Tarea 1) ──────────────────────────────────────────── Hoy vive inline en KpiCardPilot. Cuando se extraiga a componente standalone, consumirá estos tokens. Compartido por toda métrica con sparkline. */ --v2-spark-line-width: 2px; --v2-spark-line-cap: round; --v2-spark-area-opacity: 0.14; --v2-spark-default-w: 88px; --v2-spark-default-h: 28px; /* ─── Live indicator (LiveDot) — Tarea 3 ───────────────────────────── Indicador de estado en tiempo real (online, conectado, etc). El glow se compone con el color que el componente recibe via prop. */ --v2-livedot-size: 8px; --v2-livedot-glow-spread: 4px; --v2-livedot-glow-opacity: 0.35; --v2-livedot-pulse-duration: 2s; /* ─── Empty state — Tarea 3 ────────────────────────────────────────── Placeholder visual cuando un dataset esta vacio. Border dashed sutil para no competir con cards reales. */ --v2-empty-bg: #f8fafc; /* slate-50 — sutil */ --v2-empty-border: #e2e8f0; /* slate-200 dashed */ --v2-empty-border-style: dashed; --v2-empty-border-width: 1.5px; --v2-empty-icon-size: 32px; --v2-empty-min-height: 200px; /* ─── DataTable — Tarea 4 ──────────────────────────────────────────── Tokens base del componente mas complejo de Bucket A. Pre-declarados aca para que la tarea de DataTable solo CONSUMA tokens, no declare. Header sunken (slate-50) para diferenciarse del body sin agregar borde. */ --v2-table-row-height: 48px; --v2-table-cell-padding-x: 12px; --v2-table-cell-padding-y: 9px; --v2-table-cell-fontsize: 13px; /* Density variants (compact / comfortable). Default tokens above = normal. */ --v2-table-row-height-compact: 32px; --v2-table-cell-padding-y-compact: 5px; --v2-table-cell-fontsize-compact: 12px; --v2-table-row-height-comfortable: 56px; --v2-table-cell-padding-y-comfortable: 14px; --v2-table-cell-fontsize-comfortable: 14px; --v2-table-header-bg: #f8fafc; /* slate-50 — sunken */ --v2-table-header-text: #94a3b8; /* slate-400 — títulos sutiles (F14.b-iter 2026-05-22) */ --v2-table-header-fontsize: 10px; /* más chico (F14.b-iter) */ --v2-table-header-tracking: 0.05em; --v2-table-row-hover-bg: rgba(30, 58, 92, 0.05); /* primary 5% — visibility */ --v2-table-row-selected-bg: rgba(30, 58, 92, 0.09); /* primary 9% — clear selection */ --v2-table-row-border: #f1f5f9; /* slate-100 — divisor sutil */ --v2-table-cell-mono-fontsize: 12px; /* ─── Policy status — Tarea 4b ────────────────────────────────────── Identidad cromática de los 5 grupos de policy_status del backend. Estrategia "un hex por color, compose con color-mix" igual que RamoTag. Mapping: vigente / renovacion → green solicitud / solicitud_renovacion → yellow renovada / expirada / anulada → red renovacion_a_futuro / renovada_vigente / vigencia_abierta → blue import_auxiliar → bluegray */ --v2-status-green: #16a34a; /* tailwind green-600 */ --v2-status-yellow: #ca8a04; /* tailwind yellow-600 — mas legible que 500 sobre bg tinted */ --v2-status-red: #dc2626; /* tailwind red-600 */ --v2-status-blue: #2563eb; /* tailwind blue-600 */ --v2-status-bluegray: #475569; /* tailwind slate-600 */ /* ─── Category-coding — comisiones/percepciones (F25.11) ────────────── Color por CATEGORÍA de comisión (NO status semántico). Cada categoría conserva su hue distintivo, tokenizado + dark-safe (misma estrategia "un hex + color-mix" que status/RamoTag). Reemplaza el color-coding Tailwind multi-shade (blue/indigo/purple/stone/amber) del cluster. Mapping: general→azul · company→índigo · poc→púrpura · referral→stone (gris cálido) · perception→amber. La base sirve título/texto/acento; los derivados -bg/-border/-soft componen card-fill, borde y muted/icono. Los derivados referencian la base vía var() → en dark se recalculan solos (solo se redeclara la base). */ --v2-category-general: #2563eb; /* blue-600 */ --v2-category-company: #4f46e5; /* indigo-600 */ --v2-category-poc: #9333ea; /* purple-600 */ --v2-category-referral: #78716c; /* stone-500 */ --v2-category-perception: #d97706; /* amber-600 */ --v2-category-general-bg: color-mix(in srgb, var(--v2-category-general) 9%, transparent); --v2-category-general-border: color-mix(in srgb, var(--v2-category-general) 22%, transparent); --v2-category-general-soft: color-mix(in srgb, var(--v2-category-general) 70%, var(--v2-text-muted)); --v2-category-company-bg: color-mix(in srgb, var(--v2-category-company) 9%, transparent); --v2-category-company-border: color-mix(in srgb, var(--v2-category-company) 22%, transparent); --v2-category-company-soft: color-mix(in srgb, var(--v2-category-company) 70%, var(--v2-text-muted)); --v2-category-poc-bg: color-mix(in srgb, var(--v2-category-poc) 9%, transparent); --v2-category-poc-border: color-mix(in srgb, var(--v2-category-poc) 22%, transparent); --v2-category-poc-soft: color-mix(in srgb, var(--v2-category-poc) 70%, var(--v2-text-muted)); --v2-category-referral-bg: color-mix(in srgb, var(--v2-category-referral) 12%, transparent); --v2-category-referral-border: color-mix(in srgb, var(--v2-category-referral) 28%, transparent); --v2-category-referral-soft: color-mix(in srgb, var(--v2-category-referral) 78%, var(--v2-text-muted)); --v2-category-perception-bg: color-mix(in srgb, var(--v2-category-perception) 10%, transparent); --v2-category-perception-border: color-mix(in srgb, var(--v2-category-perception) 24%, transparent); --v2-category-perception-soft: color-mix(in srgb, var(--v2-category-perception) 72%, var(--v2-text-muted)); /* Superficies sutiles adaptativas (reemplazan gray-50/100/hover dark-unsafe). color-mix con --v2-text → flippean solas en dark sin redeclarar. */ --v2-surface-subtle: color-mix(in srgb, var(--v2-text) 3%, transparent); --v2-surface-muted: color-mix(in srgb, var(--v2-text) 5%, transparent); --v2-surface-hover: color-mix(in srgb, var(--v2-text) 7%, transparent); /* ─── Seguimientos / Kanban — Etapa 3 / F2 ─────────────────────────── Tokens consumidos por KanbanColumnPilot (F2.1), KanbanPilot (F2.2) y TicketEditorPilot (F2.3). Ver `docs/redesign/seguimientos-discovery.md` §9 para decisiones de scope. Decisión clave: el modelo del ticket NO tiene campo de prioridad (P0/P1/P2/P3). Lo que existe es `tipo_seguimiento` (10 valores enum) + `column` (estado dentro del board configurable). Los tokens de --v2-tipo-{key}-* reemplazan los `colores` hardcoded en KanbanItem.vue. */ /* Kanban column */ --v2-kanban-column-bg: var(--v2-card-bg, #ffffff); --v2-kanban-column-border: var(--v2-card-border, #e2e8f0); --v2-kanban-column-width: 320px; --v2-kanban-column-gap: 16px; --v2-kanban-column-header-bg: color-mix(in srgb, var(--v2-text, #0f172a) 3%, transparent); /* Alturas del Kanban (F1.5.e.13). Tokenizadas para evitar hardcoding en Kanban.vue (outer) y KanbanColumn.vue (column wrap). El gap entre outer y wrap deja respiro visual entre el último ticket y el bottom del Kanban area. */ --v2-kanban-outer-height: 80vh; --v2-kanban-column-wrap-height: 78vh; --v2-kanban-column-wrap-height-mobile: 70vh; /* Kanban card (ticket) */ --v2-kanban-card-bg: var(--v2-card-bg, #ffffff); --v2-kanban-card-border: var(--v2-card-border, #e2e8f0); --v2-kanban-card-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 1px 3px 0 rgba(15, 23, 42, 0.06); --v2-kanban-card-shadow-hover: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04); --v2-kanban-card-shadow-dragging: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 10px 10px -5px rgba(15, 23, 42, 0.08); --v2-kanban-card-padding: 12px; --v2-kanban-card-gap: 8px; /* Drag-drop visual feedback */ --v2-kanban-drop-zone-bg: color-mix(in srgb, var(--v2-primary, #1e3a5c) 6%, transparent); --v2-kanban-drop-zone-border: color-mix(in srgb, var(--v2-primary, #1e3a5c) 30%, transparent); --v2-kanban-ghost-opacity: 0.4; /* Generic tag inside card (recordatorio Tag, opener Tag, count badge). No reemplaza al ramo-tag de Tarea 2 — uso intra-card neutral. */ --v2-kanban-tag-bg: color-mix(in srgb, var(--v2-text, #0f172a) 6%, transparent); --v2-kanban-tag-color: var(--v2-text-muted, #64748b); --v2-kanban-tag-radius: 6px; /* Tipo_seguimiento (10 valores del enum). Reemplaza el hardcoded `colores` de KanbanItem.vue:71-81. Cada token compone con un accent o un hex puntual via color-mix. Mismas familias de color que el actual Tailwind bg-{color}-300, pero alineadas con la paleta V2. */ --v2-tipo-reminder-bg: color-mix(in srgb, var(--v2-accent-success, #22c55e) 14%, transparent); --v2-tipo-reminder-color: #15803d; /* green-700, mejor contraste que el accent crudo */ --v2-tipo-llamado-bg: color-mix(in srgb, var(--v2-accent-info, #0ea5e9) 14%, transparent); --v2-tipo-llamado-color: #0369a1; /* sky-700 */ --v2-tipo-sell_oportunity-bg: rgba(236, 72, 153, 0.14); /* tailwind pink-500 */ --v2-tipo-sell_oportunity-color: #be185d; /* pink-700 */ --v2-tipo-siniestro-bg: color-mix(in srgb, var(--v2-accent-warning, #f59e0b) 14%, transparent); --v2-tipo-siniestro-color: #b45309; /* amber-700 */ --v2-tipo-otro-bg: rgba(249, 115, 22, 0.14); /* tailwind orange-500 */ --v2-tipo-otro-color: #c2410c; /* orange-700 */ --v2-tipo-visita-bg: rgba(6, 182, 212, 0.14); /* tailwind cyan-500 */ --v2-tipo-visita-color: #0e7490; /* cyan-700 */ --v2-tipo-envio_doc-bg: rgba(99, 102, 241, 0.14); /* tailwind indigo-500 */ --v2-tipo-envio_doc-color: #4338ca; /* indigo-700 */ --v2-tipo-gestion_cobranza-bg: rgba(20, 184, 166, 0.14); /* tailwind teal-500 */ --v2-tipo-gestion_cobranza-color: #0f766e; /* teal-700 */ --v2-tipo-pedido_info-bg: rgba(168, 85, 247, 0.14); /* tailwind purple-500 */ --v2-tipo-pedido_info-color: #7e22ce; /* purple-700 */ --v2-tipo-reunion-bg: color-mix(in srgb, var(--v2-text, #0f172a) 8%, transparent); --v2-tipo-reunion-color: var(--v2-text, #0f172a); /* Fallback genérico cuando ticket.tipo_seguimiento es null o desconocido */ --v2-tipo-fallback-bg: color-mix(in srgb, var(--v2-text, #0f172a) 5%, transparent); --v2-tipo-fallback-color: var(--v2-text-muted, #64748b); /* Ticketable types (5 valores). Reemplaza `ticketablePalette` hardcoded en KanbanItem.vue:83-89. external_quote + external_quote_group comparten violeta (mismo pattern actual). */ /* Alineados a la paleta de dominio de los headers F22 (decisión Lucho): el color del referido = color del form al que referencia. Cliente=teal, Póliza=naval, Siniestro=burdeos. Cotización queda violeta (no tiene header). */ --v2-ticketable-person-bg: color-mix(in srgb, #14b8a6 16%, transparent); /* teal (cliente) */ --v2-ticketable-person-color: #0f766e; /* teal-700 */ --v2-ticketable-original_policy-bg: color-mix(in srgb, var(--v2-primary, #1e3a5c) 14%, transparent); --v2-ticketable-original_policy-color: #1e3a5c; /* naval (póliza/sistema) */ --v2-ticketable-siniestro-bg: color-mix(in srgb, #963140 16%, transparent); --v2-ticketable-siniestro-color: #963140; /* burdeos (siniestro) */ --v2-ticketable-external_quote-bg: rgba(139, 92, 246, 0.14); /* tailwind violet-500 */ --v2-ticketable-external_quote-color: #6d28d9; /* violet-700 */ --v2-ticketable-external_quote_group-bg: rgba(139, 92, 246, 0.14); --v2-ticketable-external_quote_group-color: #6d28d9; /* Avatar (responsible + assignees + comment user) */ --v2-avatar-size-sm: 22px; --v2-avatar-size-md: 28px; --v2-avatar-size-lg: 36px; --v2-avatar-bg-fallback: color-mix(in srgb, var(--v2-primary, #1e3a5c) 12%, transparent); --v2-avatar-color-fallback: var(--v2-primary, #1e3a5c); --v2-avatar-overlap-offset: -8px; /* AvatarGroup overlap entre siblings */ /* ─── Comments (Etapa 3 / F2.3) ────────────────────────────────────── Reemplaza los hex hardcoded de CommentDisplayer.vue:41 (#F0F5E1 own, #fef0cd other). V2 usa paleta primary-tinted para own + neutral card para other — sin amarillo/verde cliente. Bubble border-radius con tail asimétrico (esquina chica del lado del avatar). */ --v2-comment-own-bg: color-mix(in srgb, var(--v2-primary, #1e3a5c) 8%, transparent); --v2-comment-own-border: color-mix(in srgb, var(--v2-primary, #1e3a5c) 22%, transparent); --v2-comment-other-bg: var(--v2-card-bg, #ffffff); --v2-comment-other-border: var(--v2-card-border, #e2e8f0); --v2-comment-private-color: var(--v2-accent-warning, #f59e0b); --v2-comment-bubble-radius: 12px; --v2-comment-bubble-radius-tail: 4px; /* ─── Ticket editor modal (Etapa 3 / F2.3) ─────────────────────────── Dimensiones del Dialog full-screen del editor. Consumido por TicketEditorPilot. */ --v2-ticket-editor-max-width: 960px; --v2-ticket-editor-section-gap: 24px; --v2-ticket-editor-field-gap: 12px; /* ─── Easing extension (F13.0) — agregar a los existentes sin renombrar ── */ --v2-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* bounce sutil */ --v2-easing-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* transiciones simétricas */ /* ─── Scrollbars custom (F13.0) ──────────────────────────────────────── */ --v2-scrollbar-thumb: rgba(15, 23, 42, 0.18); /* slate-900 18% */ --v2-scrollbar-thumb-hover: rgba(15, 23, 42, 0.28); } /* ─── Dark mode overrides ───────────────────────────────────────────────── Solo redeclarar los tokens que cambian con dark. Brand y accents NO cambian (son la identidad visual del sistema). */ [data-theme='dark'] { --v2-card-bg: #0f1e2e; /* sidebar dark Fase 0 */ --v2-card-border: rgba(255, 255, 255, 0.08); --v2-card-border-top: rgba(255, 255, 255, 0.14); --v2-trend-up-bg: rgba(34, 197, 94, 0.18); --v2-trend-up-text: #4ade80; /* green-400 — mas legible sobre dark */ --v2-trend-down-bg: rgba(239, 68, 68, 0.18); --v2-trend-down-text: #f87171; /* red-400 */ --v2-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4); --v2-shadow-card-hover: 0 10px 28px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3); --v2-text: #f1f5f9; /* slate-100 — texto principal en dark */ --v2-text-muted: #94a3b8; /* slate-400 */ /* Category-coding (F25.11) — brillo +1 nivel para legibilidad sobre dark (mismo criterio que trend-up/down). Solo se redeclara la base; los derivados -bg/-border/-soft se recalculan solos (referencian estas vars). */ --v2-category-general: #60a5fa; /* blue-400 */ --v2-category-company: #818cf8; /* indigo-400 */ --v2-category-poc: #c084fc; /* purple-400 */ --v2-category-referral: #a8a29e; /* stone-400 */ --v2-category-perception: #fbbf24; /* amber-400 */ --v2-skeleton-bone: rgba(255, 255, 255, 0.1); --v2-skeleton-shimmer: rgba(255, 255, 255, 0.12); /* ─── Dark overrides para tokens agregados en Tarea 0 (Etapa 2) ────── Solo redeclarar lo que cambia con dark. RamoTag NO se redeclara: la identidad del ramo no cambia. Si en dark un ramo necesita boost de luminosidad lo resuelve el componente via color-mix con --v2-text. */ /* EmptyState */ --v2-empty-bg: rgba(255, 255, 255, 0.02); --v2-empty-border: rgba(255, 255, 255, 0.1); /* DataTable */ --v2-table-header-bg: rgba(255, 255, 255, 0.03); --v2-table-header-text: #94a3b8; /* slate-400 — mas legible sobre dark */ --v2-table-row-hover-bg: rgba(255, 255, 255, 0.05); --v2-table-row-selected-bg: rgba(255, 255, 255, 0.08); --v2-table-row-border: rgba(255, 255, 255, 0.06); /* ─── Dark overrides para Seguimientos / Kanban (Etapa 3 / F2) ─────── Card/column bg + tag bg + drop-zone bg + avatar fallback heredan via color-mix con tokens base que ya cambian con dark. Los tipo-*-color y ticketable-*-color están en familia "-700" (verde-oscuro, sky-oscuro, etc) y sobre dark bg quedan ilegibles → redeclarar a familia "-300/-400". */ /* Kanban shadows (más oscuras sobre dark bg) */ --v2-kanban-card-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --v2-kanban-card-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.5); --v2-kanban-card-shadow-dragging: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4); /* Drop zone: bump opacidad sobre dark bg para que el feedback sea visible */ --v2-kanban-drop-zone-bg: color-mix(in srgb, var(--v2-primary, #1e3a5c) 18%, transparent); --v2-kanban-drop-zone-border: color-mix(in srgb, var(--v2-primary, #1e3a5c) 45%, transparent); /* Tipo_seguimiento — text colors en familia -300/-400 para contraste sobre dark */ --v2-tipo-reminder-color: #86efac; /* green-300 */ --v2-tipo-llamado-color: #7dd3fc; /* sky-300 */ --v2-tipo-sell_oportunity-color: #f9a8d4; /* pink-300 */ --v2-tipo-siniestro-color: #fcd34d; /* amber-300 */ --v2-tipo-otro-color: #fdba74; /* orange-300 */ --v2-tipo-visita-color: #67e8f9; /* cyan-300 */ --v2-tipo-envio_doc-color: #a5b4fc; /* indigo-300 */ --v2-tipo-gestion_cobranza-color: #5eead4; /* teal-300 */ --v2-tipo-pedido_info-color: #d8b4fe; /* purple-300 */ --v2-tipo-reunion-color: #e2e8f0; /* slate-200 */ --v2-tipo-fallback-color: rgba(255, 255, 255, 0.55); /* Ticketable types — text colors en familia -300 para dark */ --v2-ticketable-person-color: #5eead4; /* teal-300 (cliente) */ --v2-ticketable-original_policy-color: #93c5fd; /* light blue (naval/póliza en dark) */ --v2-ticketable-siniestro-color: #fda4af; /* light wine (siniestro en dark) */ --v2-ticketable-external_quote-color: #c4b5fd; /* violet-300 */ --v2-ticketable-external_quote_group-color: #c4b5fd; /* Avatar fallback boost sobre dark bg */ --v2-avatar-bg-fallback: color-mix(in srgb, var(--v2-primary, #1e3a5c) 30%, transparent); --v2-avatar-color-fallback: #93c5fd; /* blue-300 — coherente con active state del menu */ /* ─── Scrollbar dark overrides (F13.0) ──────────────────────────────── */ --v2-scrollbar-thumb: rgba(255, 255, 255, 0.18); --v2-scrollbar-thumb-hover: rgba(255, 255, 255, 0.28); /* Acento de dominio en dark: versiones claras (sobre fondo oscuro). */ --v2-dialog-accent-poliza: #93c5fd; /* light naval (blue-300) */ --v2-dialog-accent-endoso: var(--v2-dialog-accent-poliza); --v2-dialog-accent-cliente: #5eead4; /* teal-300 */ --v2-dialog-accent-siniestro: #fda4af; /* light wine */ --v2-dialog-accent-ticket: #a5b4fc; /* indigo-300 */ --v2-dialog-accent-secondary: #94a3b8; /* slate-400 en dark */ /* Dominios SOLO-MÓDULO en dark (versiones claras sobre fondo oscuro). Los dominios de ENTIDAD heredan su accent (que ya flipea) → no se redefinen acá. */ --v2-domain-inicio: #93c5fd; /* light naval */ --v2-domain-agenda: #fbbf24; /* amber-300 */ --v2-domain-stats: #38bdf8; /* sky-400 */ --v2-domain-mailing: #22d3ee; /* cyan-400 */ --v2-domain-import: #60a5fa; /* blue-400 */ --v2-domain-tesoreria: #4ade80; /* green-400 */ --v2-domain-reportes: #a9bcd6; /* light steel */ /* En dark el header secundario es un slate oscuro SUTIL (no claro). Letra clara via --v2-text. */ --v2-dialog-head-secondary: linear-gradient(135deg, #1e293b 0%, #334155 100%); /* slate-800→700 (dark) */ } /* ─── Tabs V2 (T3 atomic-pass — Stripe-style underline) ───────────────── Tokens consumidos por TabsV2/TabV2/TabV2Panel. Dirección visual: underline 2px abajo del tab activo, padding denso, transición slide del indicator 200ms cubic-bezier (Material standard). Heredan tokens base (--v2-primary, --v2-text, --v2-text-muted) que ya cambian en dark mode, así que la cascada cubre dark automáticamente. */ :root[data-theme-version='v2'] { --v2-tab-padding-x: 14px; --v2-tab-padding-y: 10px; --v2-tab-gap: 4px; --v2-tab-indicator-height: 2px; --v2-tab-indicator-color: var(--v2-primary); --v2-tab-text-active: var(--v2-text); --v2-tab-text-idle: var(--v2-text-muted); --v2-tab-text-hover: var(--v2-text); --v2-tab-bg-hover: color-mix(in srgb, var(--v2-text) 4%, transparent); --v2-tab-count-bg-idle: color-mix(in srgb, var(--v2-text-muted) 12%, transparent); --v2-tab-count-bg-active: color-mix(in srgb, var(--v2-primary) 12%, transparent); --v2-tab-count-text-idle: var(--v2-text-muted); --v2-tab-count-text-active: var(--v2-primary); --v2-tab-disabled-opacity: 0.4; --v2-tab-transition-indicator: 200ms cubic-bezier(0.4, 0, 0.2, 1); --v2-tab-transition-hover: 120ms ease-out; --v2-tab-overflow-shadow-width: 24px; --v2-tab-container-border: var(--v2-card-border); } [data-theme='dark']:root[data-theme-version='v2'] { /* Tokens base (--v2-primary, --v2-text, --v2-text-muted, --v2-card-border) ya se invierten en dark via la cascada. Sin overrides específicos aquí — agregar si el dark mode necesita ajustes finos durante validación visual. */ } /* ─── Chrome de identidad por dominio en los dialogs F22 ────────────────── Cada dialog setea --v2-form-accent (= color de su dominio) en su TabsV2. Por cascada toman el acento: el indicador del tab activo, el texto+ícono del tab activo, el count del tab activo, Y los íconos de sección (FormSection lee --v2-form-accent). El CTA primario "Guardar" NO usa esto → queda en --v2-primary (consistencia de acción). Light/dark via --v2-dialog-accent-* (ambos temas). */ .poliza-modal-tabs { --v2-form-accent: var(--v2-dialog-accent-poliza); } .endoso-modal-tabs { --v2-form-accent: var(--v2-dialog-accent-endoso); } .client-modal-tabs { --v2-form-accent: var(--v2-dialog-accent-cliente); } .siniestro-modal-tabs { --v2-form-accent: var(--v2-dialog-accent-siniestro); } .ticket-modal-tabs { --v2-form-accent: var(--v2-dialog-accent-ticket); } .poliza-modal-tabs, .endoso-modal-tabs, .client-modal-tabs, .siniestro-modal-tabs, .ticket-modal-tabs { --v2-tab-indicator-color: var(--v2-form-accent); --v2-tab-text-active: var(--v2-form-accent); --v2-tab-count-bg-active: color-mix(in srgb, var(--v2-form-accent) 14%, transparent); --v2-tab-count-text-active: var(--v2-form-accent); } /* Dialogs SECUNDARIOS (bien, plan de pagos): chrome steel-slate. `bien-modal-tabs` va en el TabsV2 del BienForm; `planpagos-modal-chrome` envuelve a PlanPagos SOLO en su dialog standalone (en el tab de Póliza PlanPagos queda naval, sin este wrapper). */ .bien-modal-tabs, .planpagos-modal-chrome { --v2-form-accent: var(--v2-dialog-accent-secondary); --v2-tab-indicator-color: var(--v2-form-accent); --v2-tab-text-active: var(--v2-form-accent); --v2-tab-count-bg-active: color-mix(in srgb, var(--v2-form-accent) 14%, transparent); --v2-tab-count-text-active: var(--v2-form-accent); } /* ─── FormField V2 (T2 atomic-pass — label-arriba único, no FloatLabel) ── Tokens consumidos por FormField wrapper. Decisión arquitectónica: FloatLabel NO va más en forms nuevos V2 — Linear/Stripe/Notion/Vercel usan label-arriba. Heredan --v2-text, --v2-text-muted, --v2-status-red que ya cambian en dark via cascada. Anti-CLS via --v2-field-message-min-height (espacio reservado siempre, sin importar si hay mensaje). */ :root[data-theme-version='v2'] { --v2-field-gap: 6px; /* Estándar GLOBAL de label de input (decisión Lucho 2026-06-14): uppercase 10px/600 muted. Antes el default era 12px/500/oscuro y solo lo overrideaban FormSection + drawers de filtros → convivían dos estilos. Ahora el default ES el estándar; los overrides de esos contextos quedan redundantes pero inocuos (setean lo mismo). El uppercase lo aporta FormField/.v2-field-label. */ --v2-field-label-size: 10px; --v2-field-label-weight: 600; --v2-field-label-color: var(--v2-text-muted); --v2-field-label-color-disabled: color-mix(in srgb, var(--v2-text) 50%, transparent); --v2-field-required-color: var(--v2-status-red); --v2-field-message-size: 11px; --v2-field-message-color-help: var(--v2-text-muted); --v2-field-message-color-error: var(--v2-status-red); --v2-field-message-min-height: 16px; --v2-field-hint-color: var(--v2-text-muted); --v2-field-hint-size: 13px; } [data-theme='dark']:root[data-theme-version='v2'] { /* --v2-status-red (#dc2626) puede no llegar a AAA contrast sobre dark bg con texto 11px. Pendiente validación visual; si falla, redeclarar a red-400 #f87171 acá (P3 deuda anotada en reporte T2). */ } /* ─── Display components V2 (F4.1 — átomos de dominio) ──────────────── Tokens consumidos por MoneyDisplay, DateDisplay, PersonDisplay, PolicyDisplay, CompanyDisplay, StatusBadge, RamoTag. Heredan --v2-status-* y --v2-avatar-* base que ya existen en el archivo. */ :root[data-theme-version='v2'] { /* MoneyDisplay — colores semánticos por signo */ --v2-money-positive: var(--v2-status-green); --v2-money-negative: var(--v2-status-red); --v2-money-zero: var(--v2-text-muted); /* StatusBadge — purple es el único color que falta del status set existente. Usado típicamente para "renovada" y estados terminales- positivos. Resto reusan --v2-status-{green,yellow,red,blue,bluegray}. */ --v2-status-purple: #9333ea; /* tailwind purple-600 */ --v2-status-bg-opacity: 12%; --v2-status-border-opacity: 24%; --v2-status-padding-sm-x: 8px; --v2-status-padding-sm-y: 2px; --v2-status-padding-md-x: 10px; --v2-status-padding-md-y: 4px; --v2-status-radius: 4px; /* DateDisplay */ --v2-date-tooltip-color: var(--v2-text-muted); } [data-theme='dark']:root[data-theme-version='v2'] { /* Heredan via cascada. Si purple no llega a AAA contrast en dark bg, redeclarar a purple-400 #c084fc acá. */ } /* ════════════════════════════════════════════════════════════════════════ * MOTION LIBRARY V2 (F13.0 — Nivel 2 Foundation) * * Animation keyframes globales con prefijo v2- (evita colisión con * scoped keyframes pre-existentes del repo: kpi-enter, kpi-shimmer, * kpi-pulse, slideInBounce, etc.). * * Utility classes (.anim-*, .live-pulse) las consumen via animation-name. * Stagger helper [style*="--i"] aplica delay incremental para listas. * * Insumo de F13.1+ (Shell V2) y F14+ (rediseño estructural de módulos). * ════════════════════════════════════════════════════════════════════════ */ @keyframes v2-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes v2-fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes v2-riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes v2-riseOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } } @keyframes v2-scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes v2-slideRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes v2-slideLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes v2-pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(14, 165, 233, 0); } } @keyframes v2-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes v2-drawLine { from { stroke-dashoffset: var(--length, 1000); } to { stroke-dashoffset: 0; } } @keyframes v2-spin { to { transform: rotate(360deg); } } @keyframes v2-blink { 50% { opacity: 0; } } /* ─── Utility classes ────────────────────────────────────────────────── * `both` fill-mode preserva el estado final (opacity:1, transform:0). * Combinable con --i para staggering. */ .anim-fade { animation: v2-fadeIn var(--v2-duration-base, 0.22s) var(--v2-easing) both; } .anim-rise { animation: v2-riseIn var(--v2-duration-slow, 0.55s) var(--v2-easing) both; } .anim-scale { animation: v2-scaleIn var(--v2-duration-slow, 0.55s) var(--v2-easing-spring) both; } .anim-slide-r { animation: v2-slideRight var(--v2-duration-slow, 0.55s) var(--v2-easing) both; } .anim-slide-l { animation: v2-slideLeft var(--v2-duration-slow, 0.55s) var(--v2-easing) both; } .anim-shimmer { animation: v2-shimmer 1.6s linear infinite; } .live-pulse { animation: v2-pulseGlow 2s var(--v2-easing) infinite; } /* Stagger helper: en un parent, cada child con style="--i: N" se demora N*30ms */ [style*='--i'] { animation-delay: calc(var(--i) * 30ms); } /* ─── Scrollbars custom (F13.0) — scoped a V2 por colisión con App.scss:72-96 * * App.scss legacy declara ::-webkit-scrollbar* global sin scope (gray solid * #808080, track visible, cornflowerblue:active). Same specificity (0,0,0) * con orden de carga ganando → legacy ganaría sin scope. * * Solución: scope V2 a :root[data-theme-version='v2'] (specificity 0,1,0 > * legacy 0,0,0). Patrón ya usado en v2-tokens.css para tabs/formfield/ * display-components. * * NO se portea ::-webkit-scrollbar-button { display:none } — el legacy lo * provee globalmente vía cascade y sigue aplicando bajo V2. * NO se portea :active cornflowerblue — easter egg pre-V2 sin valor funcional. * ─────────────────────────────────────────────────────────────────────── */ :root[data-theme-version='v2'] { scrollbar-width: thin; scrollbar-color: var(--v2-scrollbar-thumb) transparent; } :root[data-theme-version='v2'] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-theme-version='v2'] ::-webkit-scrollbar-track { background: transparent; } :root[data-theme-version='v2'] ::-webkit-scrollbar-thumb { background: var(--v2-scrollbar-thumb); border-radius: 999px; } :root[data-theme-version='v2'] ::-webkit-scrollbar-thumb:hover { background: var(--v2-scrollbar-thumb-hover); } /* ─── prefers-reduced-motion baseline GLOBAL (F13.0) ───────────────────── * Universal selector que neutraliza duraciones de animation y transition * cuando el usuario tiene reduce-motion activado en OS settings. * * NO toca: opacity transitions funcionales, focus rings, layouts, props * que no sean animation-* o transition-duration. * * Coexiste con @media (prefers-reduced-motion: reduce) específicos de * componentes (KpiCard, DataTableBase) — el global es safety net para * todo lo no cubierto por scoped overrides. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }