/* ========================================================================== TOKENS DE DISEÑO — :root, .app-light, .app-dark, .ap. Ver §2. Archivo 1 de 11. El ORDEN de los nueve importa: Docs/DESIGN-LANGUAGE.md. ========================================================================== */ /* Auto-hospedada: Google eran dos handshakes cruzados en el camino critico. Solo latin y latin-ext. Ver DESIGN-LANGUAGE.md §5. */ /* El rango es el del archivo variable (wght 200-1000). Declararlo mas corto recortaba a 700 los 43 font-weight 800 de la app. */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 200 1000; font-stretch: 100%; font-display: swap; src: url(/fonts/nunito-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 200 1000; font-stretch: 100%; font-display: swap; src: url(/fonts/nunito-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root{ /*Colore darkmode*/ --background-color-darkmode: #0D0E15; --background-color-secundary-darkmode: #141625; --font-color-darkmode: #EAEBFA; --object-color-hover-darkmode: #1A1F26; --border-color: #31323B; /* Motion (visual-refinement, slice 7). MudTheme exposes no motion surface, so these live here rather than in MudTheme. */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --motion-ease: cubic-bezier(.2, 0, 0, 1); /* M3 standard easing */ /* Sombras de una capa, no los var(--mud-elevation-N) de 3 capas. Ver DESIGN-LANGUAGE.md §3. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06); --shadow-md: 0 2px 8px rgba(0, 0, 0, .08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, .10); /* 1.75rem para los 21

de la app. El argumento: DESIGN-LANGUAGE.md §5.1. */ --page-title-size: 1.75rem; /* Inset lateral de cualquier dialogo. Geometria invariante, asi que vive aca y no en un scope de modulo. Ver §2.1. */ --pad-dialog: 28px; } /* Jerarquia de grid anidado + estado de fila. El modelo, la cadena de profundidad y los contrastes medidos: §1.2, §2.5, §6.1. */ :root{ /* Radios concentricos: interior = exterior - padding. Invertirlo encaja mal las esquinas. Ver §2.1. */ --gh-r-tray-1: 14px; --gh-r-row-1: 11px; --gh-r-tray-2: 12px; --gh-r-row-2: 9px; --gh-r-card: 18px; --gh-r-control: 12px; --gh-pad-card: 32px 32px 8px; --gh-pad-tray: 12px; /* border-spacing solo expresa UN hueco; los 6px que faltan salen del margen de la bandeja. Ver §2.1. */ --gh-gap-rows: 8px; --gh-gap-group-extra: 6px; /* Row padding DECREASES with depth (guide §3.2): 16px 24px / 13px 14px / 12px 14px. Needed because `.mud-table-cell` sets a flat 13px globally. */ /* Escala densa: cada valor es el anterior x 0.9. La tipografia sola no bajaba la altura de fila. */ --gh-pad-row-0: 14px 22px; --gh-pad-row-1: 12px 13px; --gh-pad-row-2: 11px 13px; /* One indent for every level (guide §9.5). Matches the parent level's chevron column width so the detail is born aligned with the parent text. */ --gh-indent: 44px; } .app-light{ --gh-tray-1: #EBF0F7; --gh-row-1: #FFFFFF; --gh-tray-2: #DEE6F2; --gh-row-2: #FFFFFF; --gh-label-1: #63758D; --gh-label-2: #5B6E88; --gh-empty: #6D7785; --gh-row-shadow: 0 1px 2px rgba(16, 24, 40, .05); --gh-strong: #1B2A41; --gh-head: #22344C; --gh-body: #3B4F69; /* Token propio, no --gh-strong: los titulares llevan un navy mas saturado. Ver §2.5. */ --gh-title: #1B3A61; --gh-line-card: #DCE3EE; --gh-line-divider: #E2E9F3; /* Par destructivo de la paleta, 5.65:1. El plato lee por MATIZ, no por luminosidad. Ver §2.5. */ --danger-ink: #B32424; --danger-plate: #FBEAEA; --gh-line-tray-1: #D9E1EC; --gh-line-row-1: #DBE3EF; --gh-line-row-1-hover: #C2D0E4; --gh-line-tray-2: #CBD6E7; --gh-line-row-2: #D5DFEE; --gh-line-row-2-hover: #B9C9E0; --field-border: #7C8BA2; --gh-surf-hover: #F6F9FC; --gh-icon-chevron: #3F5573; --gh-icon-pager: #A6B3C6; /* Mismo valor que --gh-tray-1 a proposito, nombre propio porque el ROL es distinto. Ver §2.2. */ --field-fill: #EBF0F7; /* Necesita su propio valor: con --gh-tray-1 el hover no producia NINGUN cambio. Ver §2.2. */ --field-fill-hover: #DEE6F2; --status-warn-bg: #FBEBD1; --status-warn-fg: #8A5A08; --status-warn-dot: #B47D11; --status-info-bg: #DEE9FE; --status-info-fg: #1D4ED8; --status-info-dot: #2563EB; --status-neutral-bg: #EFF3F9; --status-neutral-fg: #5F7087; --status-ok-bg: #E3F3E7; --status-ok-fg: #1B7A3D; --status-ok-dot: #2E9950; --status-danger-bg: #FBEAEA; --status-danger-fg: #B32424; --status-danger-dot: #C23131; /* Coinsurance participation bar (S4), added here in S0 so later slices only consume tokens. Descending order of participation share, darkest first. */ --coins-1: #22456F; --coins-2: #3D6491; --coins-3: #5A84B2; --coins-4: #86A8C9; --coins-5: #B7CBE0; --pending-bg: #FFFCF4; --pending-line: #E4CF9E; --surf-item: #F6F9FC; --surf-chip-neutral: #EFF3F9; --text-support: #7C8BA2; --text-placeholder: #A6B3C6; --icon-action: #3F5573; /* Alias de --gh-label-2, no hex copiado: un alias no puede driftear. Ver §2.2. */ --text-muted-2: var(--gh-label-2); --r-chip: 999px; --r-icon: 8px; /* Par de control seleccionado. Por que no el primary invertido: §2.5. */ --control-on: #22456F; --control-on-ink: #FFFFFF; /* Literal del mock, no derivado: la derivacion daba #D3DBE7, 1.27x mas oscuro. Ver §2.5. */ --control-on-plate: #EEF3FA; --font-code: ui-monospace, SFMono-Regular, Menlo, monospace; --line-input: #D4DDEA; /* Nombres nuevos para roles que ya existen se declaran como alias var(). Ver §2.2. */ /* Aliases onto roles this app already declares. */ --fld-bg: var(--field-fill); --fld-bg-hover: var(--field-fill-hover); --surf-page: var(--mud-palette-background); --sh-card: var(--shadow-lg); /* Divider INSIDE a card, one step lighter than `--gh-line-divider`. 1.09:1 against #FFFFFF — a hairline by design: it separates content, it does not frame it. */ --line-inner: #EFF2F7; /* 1.22:1 contra su relleno: lee como borde, nunca como contenido. Ver §2.5. */ --chip-ok-line: #BEE3C8; /* The module's ONLY solid red: the `Excluir N ítems` confirm (hard rule 5, mudblazor/modulo_polizas/README.md:74). White label measures 6.57:1. */ --danger-bg-strong: #B32424; --danger-bg-strong-hover: #8F1C1C; /* white label 8.93:1 */ /* DESVIA del insumo (#93A1B5 mide 2.62:1 y falla el piso 3:1). Ver §2.5. */ --icon-filter: #63758D; /* Modal "Nuevo Cliente": hex exactos del handoff hifi, no el token mas cercano. Los pide el dueño uno a uno. Ver §6.2.4. */ --dc-navy: #1D3D66; --dc-navy-hover: #142C4C; --dc-navy-ink: #FFFFFF; --dc-text: #1B2A41; --dc-text-2: #4F5F78; --dc-text-muted: #6B7A90; --dc-placeholder: #8A97AA; --dc-surface: #FFFFFF; --dc-fill: #EBF0F7; --dc-panel: #F7F9FC; --dc-hover: #EEF3F9; --dc-disabled: #F1F4F8; --dc-line-card: #E3E9F1; --dc-line-field: #DDE4EE; --dc-line-dash: #C9D4E3; --dc-error: #B3261E; /* Cromo de dialogo — un solo contrato para todo modal de la app. Decision del dueño 2026-09-15. Ver §6.2. */ --dlg-navy: #1F3A73; --dlg-navy-ink: #FFFFFF; --dlg-text-2: #3A4560; --dlg-muted: #6B7690; --dlg-placeholder: #9AA3B5; --dlg-plate: #F1F4F9; --dlg-line: #E4E8EF; --dlg-overlay: rgba(20, 30, 60, .45); --dlg-shadow: 0 20px 60px rgba(10, 20, 50, .3); /* Parametros — lo que el mock pide y ningun token cubre. Ver §6.12. */ /* Alias, no hex copiado: --line-inner esta a un punto RGB. Ver §2.2. */ --pr-line-row: var(--line-inner); --pr-scrim: rgba(27, 42, 65, .28); --pr-drawer-shadow: 0 20px 60px rgba(10, 25, 50, .35); --pr-pill-wash: rgba(255, 255, 255, .18); /* Prospectos — lo que el handoff pide y ningun --dc-* cubre. Ver §6.13. */ /* Alias, no hex copiado: --line-inner esta a un punto RGB. Ver §2.2. */ --dd-line-inner: var(--line-inner); --dd-ok-solid: #1E7E4A; --dd-ok-solid-ink: #FFFFFF; --dd-error-wash: #FBF1F0; --dd-ring-low: #3CCF7A; /* Riesgo medio no lo dibuja el mock: ambar de la familia warn, medido. Ver §2.5. */ --dd-ring-mid: #F0AE2E; --dd-ring-high: #FF6B6B; --dd-ring-track: rgba(255, 255, 255, .18); --dd-on-navy-muted: #B9C7DC; /* Ramos — hex exactos del handoff. mock.py: de 23 colores solo #DBE3EF era token (--gh-line-row-1), que la barra de avance reusa. Ver §6.14. */ --ra-navy: #1F3A73; --ra-navy-ink: #FFFFFF; --ra-text: #1F2A44; --ra-text-2: #3A4560; --ra-muted: #6B7690; --ra-placeholder: #9AA3B5; --ra-icon: #7A8499; --ra-kpi-bg: #F1F4F9; --ra-zone-bg: #F6F8FB; --ra-row-selected: #F4F7FC; --ra-cell-filled: #E8EEF7; --ra-cell-border: #B9C8E2; --ra-line-strong: #D4DAE6; --ra-line: #E4E8EF; --ra-line-row: #EDF0F5; --ra-line-soft: #E9EDF4; --ra-dash: #C9D2E0; --ra-neutral: #ECEFF4; --ra-ok: #1D7A3F; --ra-ok-ink: #FFFFFF; /* Ambar del mock: punto, filete y tambien texto. La medida va en 13-ramos. */ --ra-warn: #B06F00; --ra-warn-bg: #FDF1D8; --ra-overlay: rgba(20, 30, 60, .45); /* Lavados sobre la barra flotante navy: el mock los da en alfa, no en hex. */ --ra-on-navy-sep: rgba(255, 255, 255, .25); --ra-on-navy-fill: rgba(255, 255, 255, .16); --ra-on-navy-line: rgba(255, 255, 255, .55); --ra-on-navy-hint: rgba(255, 255, 255, .72); --ra-on-navy-muted: rgba(255, 255, 255, .85); --ra-card-shadow: 0 2px 16px rgba(20, 40, 80, .07); --ra-bulk-shadow: 0 12px 36px rgba(10, 20, 50, .35); --ra-toast-shadow: 0 12px 32px rgba(10, 40, 20, .3); --ra-dialog-shadow: 0 20px 60px rgba(10, 20, 50, .3); /* Usuarios — hex exactos del handoff. El blanco no se declara: el mock usa #FFFFFF y --dc-surface ya lo vale. Ver §6.15. */ --us-navy: #1F3A73; --us-navy-ink: #FFFFFF; --us-text: #1F2A44; --us-text-2: #3A4560; --us-label: #5A6580; --us-muted: #6B7690; --us-placeholder: #9AA3B5; --us-icon: #7A8499; /* Pista del interruptor apagado Y flecha de paginado inerte: el mock usa un solo tono. */ --us-track-off: #C2C9D6; --us-fill: #E8EEF7; --us-hover: #F1F4F9; --us-selected: #F4F7FC; --us-selected-border: #B9C8E2; --us-zone: #F6F8FB; --us-row-hover: #F9FBFE; --us-line-strong: #D4DAE6; --us-line: #E4E8EF; --us-line-row: #EDF0F5; --us-neutral: #ECEFF4; --us-ok: #1D7A3F; --us-ok-bg: #E3F3E8; --us-warn: #B06F00; --us-warn-bg: #FDF1D8; --us-danger: #B3261E; --us-danger-bg: #FDF1F0; /* Los cuatro tonos de avatar. El indice sale del id del usuario, no del orden. */ --us-avatar-1: #1F3A73; --us-avatar-2: #3F6AA8; --us-avatar-3: #5B7EA3; --us-avatar-4: #7A8499; --us-btn-shadow: 0 2px 6px rgba(31, 58, 115, .25); /* Igual que --ra-card-shadow: la tarjeta unibody se ve igual en todo el sistema. */ --us-card-shadow: 0 2px 16px rgba(20, 40, 80, .07); --us-menu-shadow: 0 8px 28px rgba(20, 40, 80, .18); --us-combo-shadow: 0 10px 30px rgba(20, 40, 80, .18); --us-modal-shadow: 0 20px 60px rgba(10, 20, 50, .3); --us-modal-overlay: rgba(20, 30, 60, .45); --us-drawer-shadow: -12px 0 40px rgba(10, 20, 50, .2); --us-drawer-scrim: rgba(20, 30, 60, .35); /* Dashboard gerencial — hex exactos del handoff. El blanco no se declara: --dc-surface ya lo vale. Ver §6.16. */ --dg-navy: #1F3A73; --dg-navy-ink: #FFFFFF; --dg-text: #1B2B41; --dg-text-2: #3B5069; --dg-muted: #5B6F88; --dg-label: #64768D; /* Un solo hex del mock para lienzo, pistas de barra y banda del gráfico. */ --dg-fill: #EBF0F8; --dg-fill-2: #E7ECF4; --dg-panel: #F7F9FC; --dg-line: #E2E9F3; --dg-line-strong: #DCE3EE; /* Mismo hex que --dg-fill pero como filete: en oscuro un filete no es lienzo. */ --dg-line-soft: #EBF0F8; --dg-line-row: #F1F4F9; --dg-line-hover: #C2D0E4; /* Rampa de la barra apilada; los tonos 1 y 3 son --dg-navy y --dg-muted. */ --dg-pal-2: #23456F; --dg-pal-4: #8FA0B8; --dg-bar-soft: #C2D0E4; --dg-ok: #1E7A3E; --dg-ok-bg: #E3F4E7; --dg-ok-dot: #30A05A; --dg-warn: #8A5A07; --dg-warn-bg: #FCEBD1; --dg-warn-bar: #DE9A14; /* Sobre la barra navy: pestaña inactiva, texto del pill y su lavado. */ --dg-on-navy-muted: #B9C7E0; --dg-on-navy-soft: #DFE6F2; --dg-on-navy-fill: rgba(255, 255, 255, .1); --dg-navy-wash: rgba(31, 58, 115, .04); --dg-navy-area: rgba(31, 58, 115, .06); --dg-kpi-shadow: 0 6px 18px rgba(27, 43, 65, .08); --dg-drawer-shadow: -16px 0 48px rgba(27, 43, 65, .18); --dg-scrim: rgba(27, 43, 65, .28); } .app-dark{ /* La paleta no declara par destructivo oscuro; el plato se deriva al 12%. Ver §2.5 y §12. */ --danger-ink: #E06B6B; --danger-plate: color-mix(in srgb, #E06B6B 12%, var(--field-fill)); --gh-tray-1: #0C111B; --gh-row-1: #1B2434; --gh-tray-2: #070B12; --gh-row-2: #202A3C; --gh-label-1: #8496AE; --gh-label-2: #7F90A8; --gh-empty: #7E92AD; /* En oscuro la elevacion es color: una sombra negra sobre negro solo ensucia. Ver §3. */ --gh-row-shadow: none; --gh-strong: #F2F6FC; --gh-head: #D5DFEE; --gh-body: #B0BFD4; /* SIN MEDIR: no hay valor oscuro de titular en ningun insumo. Ver §2.5 y §12. */ --gh-title: #F2F6FC; --gh-line-card: #262F41; --gh-line-divider: #242D3E; --gh-line-tray-1: #232C3D; --gh-line-row-1: #2C384B; --gh-line-row-1-hover: #3E4D64; --gh-line-tray-2: #1D2534; --gh-line-row-2: #333F55; --gh-line-row-2-hover: #47566F; --field-border: #5E7290; --gh-surf-hover: #182031; --gh-icon-chevron: #A9B9CF; --gh-icon-pager: #5F6F86; --field-fill: #0C111B; /* Va mas CLARO en oscuro: la direccion del hover se invierte con el modo. Ver §2.5. */ --field-fill-hover: #141B29; --status-warn-bg: #3A2B10; --status-warn-fg: #F3C266; --status-warn-dot: #F0AE2E; --status-info-bg: #152A4C; --status-info-fg: #8FBBFF; --status-info-dot: #6BA6FF; --status-neutral-bg: #1B2434; --status-neutral-fg: #8496AE; /* orden-emision-redesign S0 — dark counterparts of the new light-mode tokens above. `danger` reuses the dark destructive ink already derived for this theme (`--danger-ink: #E06B6B`). */ --status-ok-bg: #123420; --status-ok-fg: #6FCB8E; --status-ok-dot: #3FAE68; --status-danger-bg: #3A1414; --status-danger-fg: #E06B6B; --status-danger-dot: #E06B6B; /* Rampa sobre el matiz de marca. Arrancaba en el Primary invertido y la barra se iba a blanco. Ver §2.5. */ --coins-1: #8FB8E8; --coins-2: #6E97CC; --coins-3: #5279AE; --coins-4: #3C5D8C; --coins-5: #2C466B; --pending-bg: #2E2510; --pending-line: #F0AE2E; /* Se mide contra el SURFACE del dialogo, no contra la fila del grid. Ver §2.5. */ --surf-item: #151926; --surf-chip-neutral: #1B2434; --text-support: #8496AE; --text-placeholder: #5F6F86; --icon-action: #A9B9CF; /* orden-emision-redesign S5 (spec G3): dark counterpart, aliased to `--gh-label-2` (#7F90A8) for the same reason as the light block above. */ --text-muted-2: var(--gh-label-2); --r-chip: 999px; --r-icon: 8px; /* Contraparte oscura del control seleccionado, de un barrido de 5 candidatos. Ver §2.5. */ --control-on: #3E76BA; --control-on-ink: #FFFFFF; /* 14% y no 18/22: a mas la caja cae debajo de 3:1. Ver §2.5. */ --control-on-plate: #1F2A42; --font-code: ui-monospace, SFMono-Regular, Menlo, monospace; /* orden-emision-redesign S3a: dark counterpart of `--line-input` (01-DESIGN-SYSTEM.md §2.2 gives this exact value, `--line-input: #2B3547` — not inferred, taken straight from the handoff's dark block). */ --line-input: #2B3547; /* §2.2 del insumo es asimetrica con §2.1: estos cuatro valores oscuros son AUTORADOS. Ver §2.5. */ /* Aliases onto roles this app already declares. */ --fld-bg: var(--field-fill); --fld-bg-hover: var(--field-fill-hover); --surf-page: var(--mud-palette-background); /* No es alias de --shadow-lg: en oscuro la elevacion es color. Ver §3. */ --sh-card: none; /* Taken straight from the handoff's dark block — not inferred. */ --line-inner: #1D2534; /* AUTORADO. Mas alto que el par claro: las superficies casi negras comprimen. Ver §2.5. */ --chip-ok-line: #1E5334; /* AUTORADO. El #B32424 claro mide 2.67:1 en oscuro y falla 1.4.11. Ver §2.5. */ --danger-bg-strong: #C43333; /* El hover va mas CLARO en oscuro. Ver §2.5. */ --danger-bg-strong-hover: #CB3838; /* Un paso debajo de --icon-action, sobre el piso de 3:1. Ver §2.5. */ --icon-filter: #8496AE; /* Contraparte oscura del modal "Nuevo Cliente". Cada valor sale del token vecino ya medido; el handoff solo trae la version clara. Ver §6.2.4. */ --dc-navy: #E9EFF8; --dc-navy-hover: #FFFFFF; --dc-navy-ink: #16233A; --dc-text: #F2F6FC; --dc-text-2: #7F90A8; --dc-text-muted: #8496AE; --dc-placeholder: #5F6F86; --dc-surface: #131926; --dc-fill: #0C111B; --dc-panel: #151926; --dc-hover: #182031; --dc-disabled: #0C111B; --dc-line-card: #242D3E; --dc-line-field: #2B3547; --dc-line-dash: #2B3547; --dc-error: #E06B6B; /* Contraparte oscura del cromo de dialogo. Decision del dueño 2026-09-15. Sin sombra: en oscuro la elevacion es color. Ver §3 y §6.2. */ --dlg-navy: #E9EFF8; --dlg-navy-ink: #16233A; --dlg-text-2: #7F90A8; --dlg-muted: #8496AE; --dlg-placeholder: #5F6F86; --dlg-plate: #0C111B; --dlg-line: #242D3E; --dlg-overlay: rgba(4, 8, 15, .58); --dlg-shadow: none; /* Contraparte oscura de Parametros. AUTORADO: el handoff solo trae claro. */ --pr-line-row: var(--line-inner); --pr-scrim: rgba(4, 8, 15, .58); /* Sin sombra: en oscuro la elevacion es color, igual que --sh-card. Ver §3. */ --pr-drawer-shadow: none; /* La pastilla activa es clara en oscuro, asi que el lavado se invierte. */ --pr-pill-wash: rgba(22, 35, 58, .16); /* Contraparte oscura de Prospectos. AUTORADO: el handoff solo trae claro. */ --dd-line-inner: var(--line-inner); /* Verde macizo de marca: se deriva de --status-ok-dot, ya medido. */ --dd-ok-solid: #3FAE68; /* El relleno aclara en oscuro, asi que la tinta se invierte. Ver §6.2.4. */ --dd-ok-solid-ink: var(--dc-navy-ink); --dd-error-wash: var(--status-danger-bg); /* El trazo se invierte con su panel: toma el tono claro. Medidos sobre #E9EFF8: 4.39:1, 5.12:1 y 5.65:1. Ver §2.5. */ --dd-ring-low: #1E7E4A; --dd-ring-mid: #8A5A08; --dd-ring-high: #B3261E; /* El panel de riesgo es claro en oscuro, asi que el lavado se invierte. */ --dd-ring-track: rgba(22, 35, 58, .16); /* --dc-placeholder oscuro solo da 4.43:1 sobre el panel; el tono claro da 5.61:1. */ --dd-on-navy-muted: #4F5F78; /* Contraparte oscura de Ramos. AUTORADO: el handoff solo trae claro. Cada valor sale del token vecino ya medido, igual que --dc-*. Ver §6.14. */ /* El navy es relleno Y tinta: en oscuro se invierte como --dc-navy. */ --ra-navy: #E9EFF8; --ra-navy-ink: #16233A; --ra-text: #F2F6FC; --ra-text-2: #7F90A8; --ra-muted: #8496AE; --ra-placeholder: #5F6F86; --ra-icon: #8496AE; --ra-kpi-bg: #0C111B; --ra-zone-bg: #151926; --ra-row-selected: #182031; --ra-cell-filled: #1B2434; --ra-cell-border: #3E4D64; --ra-line-strong: #2B3547; --ra-line: #242D3E; --ra-line-row: #2C384B; --ra-line-soft: #242D3E; --ra-dash: #2B3547; --ra-neutral: #242D3E; /* Verde macizo de marca: el mismo par que --dd-ok-solid, ya medido. */ --ra-ok: #3FAE68; --ra-ok-ink: #16233A; --ra-warn: #F0AE2E; --ra-warn-bg: #3A2B10; --ra-overlay: rgba(4, 8, 15, .58); /* La barra flotante es clara en oscuro, asi que los lavados se invierten. */ --ra-on-navy-sep: rgba(22, 35, 58, .25); --ra-on-navy-fill: rgba(22, 35, 58, .16); --ra-on-navy-line: rgba(22, 35, 58, .55); --ra-on-navy-hint: rgba(22, 35, 58, .72); --ra-on-navy-muted: rgba(22, 35, 58, .85); /* Sin sombra: en oscuro la elevacion es color, igual que --sh-card. Ver §3. */ --ra-card-shadow: none; --ra-bulk-shadow: none; --ra-toast-shadow: none; --ra-dialog-shadow: none; /* Contraparte oscura de Usuarios. AUTORADO: el handoff solo trae claro. Cada valor sale del token vecino ya medido que comparte su hex claro. Ver §6.15. */ /* El navy es relleno Y tinta: en oscuro se invierte como --dc-navy. */ --us-navy: #E9EFF8; --us-navy-ink: #16233A; --us-text: #F2F6FC; --us-text-2: #7F90A8; --us-label: #8496AE; --us-muted: #8496AE; --us-placeholder: #5F6F86; --us-icon: #8496AE; --us-track-off: #2B3547; --us-fill: #1B2434; /* El hover oscuro toma --dc-hover, ya medido, y no el plato hundido del claro. */ --us-hover: #182031; --us-selected: #182031; --us-selected-border: #3E4D64; --us-zone: #151926; /* El mock pone la fila a un punto del blanco; en oscuro el alza mas leve es la de zona. */ --us-row-hover: #151926; --us-line-strong: #2B3547; --us-line: #242D3E; --us-line-row: #2C384B; --us-neutral: #242D3E; /* Verde macizo de marca: el mismo par que --dd-ok-solid, ya medido. */ --us-ok: #3FAE68; --us-ok-bg: #123420; --us-warn: #F0AE2E; --us-warn-bg: #3A2B10; --us-danger: #E06B6B; --us-danger-bg: #3A1414; /* Los avatares llevan tinta blanca: en oscuro el tono sube para no apagarse. */ --us-avatar-1: #3F6AA8; --us-avatar-2: #5B7EA3; --us-avatar-3: #6E8CB4; --us-avatar-4: #7F90A8; /* Sin sombra: en oscuro la elevacion es color, igual que --sh-card. Ver §3. */ --us-btn-shadow: none; --us-card-shadow: none; --us-menu-shadow: none; --us-combo-shadow: none; --us-modal-shadow: none; --us-modal-overlay: rgba(4, 8, 15, .58); --us-drawer-shadow: none; --us-drawer-scrim: rgba(4, 8, 15, .48); /* Contraparte oscura del Dashboard gerencial. AUTORADO: el handoff solo trae claro. Cada valor sale del token vecino ya medido de igual hex claro. Ver §6.16. */ /* El navy es relleno Y tinta: en oscuro se invierte como --dc-navy. */ --dg-navy: #E9EFF8; --dg-navy-ink: #16233A; --dg-text: #F2F6FC; --dg-text-2: #7F90A8; --dg-muted: #8496AE; --dg-label: #8496AE; --dg-fill: #0C111B; --dg-fill-2: #1B2434; --dg-panel: #151926; --dg-line: #242D3E; --dg-line-strong: #2B3547; --dg-line-soft: #242D3E; --dg-line-row: #2C384B; --dg-line-hover: #3E4D64; /* La rampa se aclara: sobre superficie oscura el navy invertido es el tono más claro. */ --dg-pal-2: #B9C7DC; --dg-pal-4: #7F90A8; --dg-bar-soft: #3E4D64; /* Verde macizo de marca: el mismo par que --dd-ok-solid, ya medido. */ --dg-ok: #3FAE68; --dg-ok-bg: #123420; --dg-ok-dot: #3FAE68; --dg-warn: #F0AE2E; --dg-warn-bg: #3A2B10; --dg-warn-bar: #F0AE2E; /* La barra es clara en oscuro, así que sus lavados se invierten, como en Ramos. */ --dg-on-navy-muted: #4F5F78; --dg-on-navy-soft: #3A4560; --dg-on-navy-fill: rgba(22, 35, 58, .1); --dg-navy-wash: rgba(233, 239, 248, .06); --dg-navy-area: rgba(233, 239, 248, .08); /* Sin sombra: en oscuro la elevación es color, igual que --sh-card. Ver §3. */ --dg-kpi-shadow: none; --dg-drawer-shadow: none; --dg-scrim: rgba(4, 8, 15, .48); } /* Acuerdos de pago — fundacion visual del modulo, todo scopeado bajo .ap. Los tokens compartidos que consume los LEE, nunca los reasigna. Ver §2.6 y §6.10. */ /* -------------------------------------------------------------------------- 1.1 — module tokens, light (visual-01 "Minimum set" + design §7.2 table) -------------------------------------------------------------------------- */ /* Vocabulario compartido del lenguaje. Lo lee cualquier modulo bajo .bl. Ver DESIGN-LANGUAGE.md, "Catalogo de patrones". */ .bl { --bl-btn-primary-bg: var(--mud-palette-primary); --bl-btn-primary-fg: var(--mud-palette-primary-text); --bl-btn-primary-bg-hover: #1A3557; --bl-chip-ok-bg: #EEF9F1; --bl-chip-ok-fg: #1D7A3D; --bl-chip-ok-dot: #2FA05A; --bl-chip-warn-dot: #DE9A15; --bl-r-control: 10px; --bl-h-field: 48px; --bl-h-btn-dialog: 44px; --bl-h-btn-compact: 36px; --bl-surf-card: #FFFFFF; --bl-kpi-bg: var(--ap-surf-item); --bl-kpi-warn-bg: #FBEBD1; --bl-kpi-warn-line: #EDD3A6; --bl-kpi-warn-fg: #8A5A08; --bl-kpi-info-bg: #DEE9FE; --bl-kpi-info-line: #BFD4FA; --bl-kpi-info-fg: #1D4ED8; --bl-seg-track: #EFF2F7; --bl-seg-track-hover: #E7ECF4; --bl-seg-active-bg: #FFFFFF; --bl-seg-active-fg: var(--ap-btn-primary-bg); --bl-seg-inactive-fg: #5B6E88; --bl-seg-track-fill: #FFFFFF; --bl-seg-track-fill-hover: #F6F9FC; --bl-seg-active-fill-bg: var(--ap-btn-primary-bg); --bl-seg-active-fill-fg: var(--ap-btn-primary-fg); --bl-dialog-actions-bg: #FBFCFE; } .ap { /* §2.1 roles this app does not declare under any name */ --ap-btn-primary-bg: var(--bl-btn-primary-bg); --ap-btn-primary-fg: var(--bl-btn-primary-fg); --ap-btn-primary-bg-hover: var(--bl-btn-primary-bg-hover); --ap-danger-line: #E8C4C4; --ap-sh-row-2: 0 1px 2px rgba(16, 24, 40, .06); /* §2.1 status chips — D9 (ok family) / D10 (warn dot literal restored). The shared --status-ok / --status-warn-dot tokens stay untouched app-wide. */ --ap-chip-ok-bg: var(--bl-chip-ok-bg); --ap-chip-ok-fg: var(--bl-chip-ok-fg); --ap-chip-ok-line: #BEE3C8; --ap-chip-warn-dot: var(--bl-chip-warn-dot); /* §3.1 — the one radius whose app value differs (--gh-r-control is 12px) */ --ap-r-control: var(--bl-r-control); /* §3.2 — spacing roles with no app equivalent */ --ap-grid-gutter: 20px; --ap-pad-dialog: var(--pad-dialog); /* Worklist trays: the row is a card (plus 1px border), the head is not. Both grids must start at the same x. */ --ap-tray-gutter: 32px; --ap-pad-tray: 18px; --ap-pad-tray-inset: calc(var(--ap-tray-gutter) + 1px + var(--ap-pad-tray)); /* §3.3 — control-height ladder (spec-addendum B5), all inline literals today; this module is the first to name them. */ --ap-h-field: var(--bl-h-field); --ap-h-btn-card: 40px; --ap-h-btn-row: 38px; --ap-h-btn-icon: 32px; /* Literal, no --mud-palette-surface: en oscuro ese token resuelve al #1A1E2E de la app. */ --ap-surf-card: var(--bl-surf-card); --ap-surf-item: #F5F8FC; /* KPI bar */ --ap-kpi-warn-fg: var(--bl-kpi-warn-fg); --ap-kpi-info-bg: var(--bl-kpi-info-bg); --ap-kpi-info-line: var(--bl-kpi-info-line); --ap-kpi-info-fg: var(--bl-kpi-info-fg); /* segmented controls — D14 (three variants share these roles) */ /* variant C only — the track sits on a --surf-tray-1 panel, so its fill inverts the same way a filled input inverts inside a tray (§4.2). */ /* installment plan progress bar (design #920 §7.2 — NOT the same as --ap-btn-primary-bg: dark fill is --status-info-fg, not inverted Primary, see QA6 in visual-03) */ --ap-plan-track: #E2E9F3; --ap-plan-fill: #22456F; /* dashed "En confirmación" chip */ --ap-chip-confirm-bg: #EFF3F9; --ap-chip-confirm-dash: #93B6F0; --ap-chip-confirm-fg: #1D4ED8; /* selected installment row (Aplicar pago dialog grid) — D15 */ --ap-row-selected: #F5F8FC; /* dashed upload field (Comprobante) */ --ap-upload-bg: #FFFFFF; --ap-upload-dash: #C2D0E4; --ap-upload-fg: #22456F; /* dialog chrome */ --ap-dialog-head: #F6F9FC; --ap-tab-underline: #22456F; /* checkbox (dialog CUOTAS grid, §2.12) */ --ap-checkbox-off: #C2D0E4; --ap-checkbox-on: #22456F; --ap-checkbox-ink: #FFFFFF; /* toolbar "Reporte de pago" — outlined in light (D17) */ --ap-report-btn-bg: transparent; --ap-report-btn-border: #C2D0E4; --ap-report-btn-fg: #22456F; } /* -------------------------------------------------------------------------- CREDITOS — the only two values of the credit state scale with no existing token. The other ten are aliases; see wwwroot/css/10-credits.css §2. -------------------------------------------------------------------------- */ .cre { /* Decoration, not text: the 4.5:1 floor does not apply to a 7px dot. */ --cre-spent-dot: #93A1B5; --cre-void-dot: #D14343; } /* The void dot holds its value in dark; the spent one does not. */ .app-dark .cre { --cre-spent-dot: #5A6E8C; } /* -------------------------------------------------------------------------- 1.7 / 1.8 / 1.9 / 1.10 / 1.11 / 1.12 — dark completions (visual-03 §2 rows 2,5,6,7,8,13,16,19,20,21 + D9/D10/D16/D17/D18) -------------------------------------------------------------------------- */ /* Contraparte oscura del vocabulario compartido. */ .app-dark .bl { --bl-btn-primary-bg-hover: #FFFFFF; --bl-chip-ok-bg: #10301D; --bl-chip-ok-fg: #7FD69B; --bl-chip-ok-dot: #4FBF7B; --bl-chip-warn-dot: #F0AE2E; --bl-surf-card: #131926; --bl-kpi-bg: var(--ap-surf-item); --bl-kpi-warn-bg: #3A2B10; --bl-kpi-warn-line: #4A3714; --bl-kpi-warn-fg: #F3C266; --bl-kpi-info-bg: #152A4C; --bl-kpi-info-line: #24395C; --bl-kpi-info-fg: #8FBBFF; --bl-seg-track: #0C111B; --bl-seg-track-hover: #182031; --bl-seg-active-bg: #1B2434; --bl-seg-active-fg: var(--ap-btn-primary-bg); --bl-seg-inactive-fg: #8496AE; --bl-seg-track-fill: #202A3C; --bl-seg-track-fill-hover: #26314599; --bl-seg-active-fill-bg: var(--ap-btn-primary-bg); --bl-seg-active-fill-fg: var(--ap-btn-primary-fg); --bl-surf-card: #131926; --bl-dialog-actions-bg: #131926; } .app-dark .ap { --ap-btn-primary-bg-hover: var(--bl-btn-primary-bg-hover); --ap-sh-row-2: none; /* D9 — dark Pagada follows 01-DESIGN-SYSTEM.md §2.2, not 04-DARK-THEME.md */ --ap-chip-ok-bg: var(--bl-chip-ok-bg); --ap-chip-ok-fg: var(--bl-chip-ok-fg); /* Faltaba: el #BEE3C8 claro daba 10.26:1 sobre este relleno — contraste de TEXTO para un borde. 1.60:1, la banda correcta. Ver §2.5. */ --ap-chip-ok-line: #1E5334; /* El revert del warn-dot es solo de claro; se restata para no heredar un valor viejo. */ --ap-chip-warn-dot: var(--bl-chip-warn-dot); --ap-danger-line: #6B2A2A; --ap-surf-card: var(--bl-surf-card); --ap-surf-item: #182031; --ap-kpi-warn-fg: var(--bl-kpi-warn-fg); --ap-kpi-info-bg: var(--bl-kpi-info-bg); --ap-kpi-info-line: var(--bl-kpi-info-line); --ap-kpi-info-fg: var(--bl-kpi-info-fg); /* row 5 — segmented track/pill, variants A/B */ /* INTERIM: el insumo no mapea la variante C en oscuro. Revisar si diseno da un valor. */ /* row 8 — progress bar; fill is --status-info-fg, NOT inverted Primary (QA6: Primary would render a flat white slab) */ --ap-plan-track: #2C384B; --ap-plan-fill: #8FBBFF; /* Aclarado desde #3C5C8F, que fallaba 1.4.11 contra las dos superficies. Ver §2.5. */ --ap-chip-confirm-bg: #141C2B; --ap-chip-confirm-dash: #4E70AE; --ap-chip-confirm-fg: #8FBBFF; /* Medido en el dialogo Aplicar pago (#131926), no contra la fila L2 del arbol: 1.13:1. */ --ap-row-selected: #202A3C; /* row 19 — dashed upload field */ --ap-upload-bg: #202A3C; --ap-upload-dash: #47566F; --ap-upload-fg: #8FBBFF; /* Solo de modulo: PaletteDark.Surface se queda en #1A1E2E. Ver §2.6. */ --ap-surf-card: var(--bl-surf-card); /* row 21 — dialog table header */ --ap-dialog-head: #1B2434; /* row 20 — active tab underline */ --ap-tab-underline: #8FBBFF; --ap-checkbox-off: #47566F; --ap-checkbox-on: #E9EFF8; --ap-checkbox-ink: #16233A; /* Altura 44 de escala de footer, distinta de los 32px de la accion de fila L2. */ --ap-report-btn-bg: #E9EFF8; --ap-report-btn-border: transparent; --ap-report-btn-fg: #16233A; }