/* GENERADO por scripts/leadz-generar-vistas.mjs desde leadz-dz-acceso-estilos.js#CSS_DZ_ACCESO + leadz-entrada.js#CSS_ENTRADA (vista entrada, css). No se edita a mano. */ /* Tokens del DS: primitivos y semánticos universales. Generado por generador/generar.mjs desde tokens/*.json. No se edita a mano: se cambia la fuente y se regenera. */ @layer reset, dz.tokens, dz.base, dz.componentes; @layer dz.tokens { :root { color-scheme: light; --c-gris-0: #ffffff; --c-gris-20: #fafafa; --c-gris-43: #f4f4f4; --c-gris-47: #f3f3f3; --c-gris-71: #ededed; --c-gris-86: #e9e9e9; --c-gris-98: #e6e6e6; --c-gris-106: #e4e4e4; --c-gris-137: #dcdcdc; --c-gris-149: #d9d9d9; --c-gris-176: #d2d2d2; --c-gris-188: #cfcfcf; --c-gris-310: #b0b0b0; --c-gris-404: #989898; --c-gris-451: #8c8c8c; --c-gris-537: #767676; --c-gris-580: #6b6b6b; --c-gris-608: #646464; --c-gris-647: #5a5a5a; --c-gris-733: #444444; --c-gris-753: #3f3f3f; --c-gris-773: #3a3a3a; --c-gris-827: #2c2c2c; --c-gris-835: #2a2a2a; --c-gris-851: #262626; --c-gris-859: #242424; --c-gris-867: #222222; --c-gris-886: #1d1d1d; --c-gris-914: #161616; --c-gris-922: #141414; --c-gris-961: #0a0a0a; --c-gris-1000: #000000; --c-negro-5: rgba(0,0,0,.05); --c-tinta-suave-6: rgba(10,10,10,.06); --c-negro-7: rgba(0,0,0,.07); --c-negro-12: rgba(0,0,0,.12); --c-negro-18: rgba(0,0,0,.18); --c-negro-40: rgba(0,0,0,.4); --c-negro-42: rgba(0,0,0,.42); --c-negro-46: rgba(0,0,0,.46); --c-negro-44: rgba(0,0,0,.44); --c-negro-55: rgba(0,0,0,.55); --c-negro-58: rgba(0,0,0,.58); --c-negro-60: rgba(0,0,0,.6); --c-negro-suave-46: rgba(10,10,10,.46); --c-blanco-5: rgba(255,255,255,.05); --c-blanco-6: rgba(255,255,255,.06); --c-blanco-8: rgba(255,255,255,.08); --c-blanco-13: rgba(255,255,255,.13); --c-blanco-20: rgba(255,255,255,.2); --c-blanco-34: rgba(255,255,255,.34); --c-blanco-37: rgba(255,255,255,.37); --c-blanco-36: rgba(255,255,255,.36); --c-blanco-45: rgba(255,255,255,.45); --c-tinta-azul-8: rgba(16,24,40,.08); --c-tinta-azul-20: rgba(16,24,40,.2); --c-azul-50-19: oklch(50% 0.19 262); --c-azul-58-3: oklch(58% 0.03 262); --c-azul-62-17: oklch(62% 0.17 262); --c-azul-66-3: oklch(66% 0.03 262); --c-verde-26-4: oklch(26% 0.04 178); --c-verde-40-10: oklch(40% 0.10 172); --c-verde-50-12: oklch(50% 0.12 172); --c-verde-74-12: oklch(74% 0.12 178); --c-verde-94-4: oklch(94% 0.04 172); --c-ambar-28-6: oklch(28% 0.06 75); --c-ambar-46-11: oklch(46% 0.11 70); --c-ambar-62-14: oklch(62% 0.14 70); --c-ambar-62-15: oklch(62% 0.15 70); --c-ambar-78-12: oklch(78% 0.12 75); --c-ambar-78-14: oklch(78% 0.14 75); --c-ambar-95-6: oklch(95% 0.06 80); --c-rojo-16-5: oklch(16% 0.05 25); --c-rojo-27-6: oklch(27% 0.06 25); --c-rojo-46-17: oklch(46% 0.17 25); --c-rojo-53-19: oklch(53% 0.19 25); --c-rojo-66-15: oklch(66% 0.15 25); --c-rojo-72-16: oklch(72% 0.16 25); --c-rojo-95-4: oklch(95% 0.04 25); --c-llamar-50-13: oklch(50% 0.13 150); --c-llamar-66-12: oklch(66% 0.12 150); --c-wa-16-6: oklch(16% 0.06 150); --c-wa-54-16: oklch(54% 0.16 150); --c-wa-74-16: oklch(74% 0.16 146); --c-azul-94-3: oklch(94% 0.03 262); --c-azul-40-9: oklch(40% 0.09 262); --c-azul-32-5: oklch(32% 0.05 262); --c-azul-86-6: oklch(86% 0.06 262); --c-verde-94-3: oklch(94% 0.03 150); --c-verde-40-9: oklch(40% 0.09 150); --c-verde-32-5: oklch(32% 0.05 150); --c-verde-86-6: oklch(86% 0.06 150); --c-ambar-94-3: oklch(94% 0.03 75); --c-ambar-40-9: oklch(40% 0.09 75); --c-ambar-32-5: oklch(32% 0.05 75); --c-ambar-86-6: oklch(86% 0.06 75); --c-rosa-94-3: oklch(94% 0.03 350); --c-rosa-40-9: oklch(40% 0.09 350); --c-rosa-32-5: oklch(32% 0.05 350); --c-rosa-86-6: oklch(86% 0.06 350); --c-violeta-94-3: oklch(94% 0.03 300); --c-violeta-40-9: oklch(40% 0.09 300); --c-violeta-32-5: oklch(32% 0.05 300); --c-violeta-86-6: oklch(86% 0.06 300); --c-turquesa-94-3: oklch(94% 0.03 195); --c-turquesa-40-9: oklch(40% 0.09 195); --c-turquesa-32-5: oklch(32% 0.05 195); --c-turquesa-86-6: oklch(86% 0.06 195); --medida: 72ch; --font: 'Inter', 'Inter fallback', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --mono-code: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --lh-1: 1.2; --lh-2: 1.35; --lh-3: 1.5; --font-datos: var(--font); --fs-1: 12px; --fs-2: 14px; --fs-3: var(--fs-2); --fs-4: 16px; --fs-5: 18px; --fs-6: 22px; --fs-7: 28px; --ico-1: 16px; --ico-2: 16px; --ico-3: 20px; --ico-boton: 18px; --ico-boton-solo: 18px; --ico-4: 24px; --ico-5: var(--ico-4); --op-off: .45; --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 18px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px; --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --ease-out: cubic-bezier(.2, 0, 0, 1); --ease-enfasis: cubic-bezier(.16, 1, .3, 1); --ease-velo: cubic-bezier(.4, 0, .2, 1); --dur-4: 400ms; --dur-respira: 900ms; --dur-rapida: var(--dur-1); --dur-base: var(--dur-2); --dur-media: var(--dur-3); --dur-lenta: var(--dur-4); --ease-sale: var(--ease-out); --z-sticky: 5; --z-drawer: 30; --z-dropdown: 40; --z-fab: 50; --z-modal: 100; --z-toast: 9500; --z-hoja: 9000; --z-base: 1; --z-cajon-velo: 55; --z-cajon: 60; --z-bloqueo: 10001; --z-velo-entrada: 10002; --r-chip: 999px; --r-control: var(--r-2); --r-input: var(--r-2); --r-btn: 999px; --r-card: var(--r-3); --r-pill: 999px; --h-control: 38px; --h-control-sm: 30px; --h-control-xs: 28px; --h-barra: 36px; --h-tactil: 44px; --h-mini: 24px; --h-chip: 26px; --h-btn-ico: 32px; --h-filtro: 34px; --h-fila: 40px; --h-fila-2: 54px; --h-mov: 48px; --aro: 0 0 0 2px var(--surface); --shadow-sm: none; --shadow-md: 0 10px 28px -14px var(--c-negro-18), 0 0 0 1px var(--c-negro-5); --ring: 0 0 0 1.5px var(--focus); --ring-soft: 0 0 0 1.5px color-mix(in oklch, var(--focus) 70%, transparent); --ring-inset: inset 0 0 0 1.5px var(--focus); --accent-breath: color-mix(in oklch, var(--focus) 70%, transparent); --ring-0: 0 0 0 0 var(--focus); --bg: var(--c-gris-43); --surface: var(--c-gris-20); --surface-2: var(--c-gris-71); --surface-3: var(--c-gris-106); --field: var(--c-gris-0); --surface-anidada: var(--c-gris-47); --border: var(--c-negro-7); --line-2: var(--c-negro-12); --border-control: var(--c-negro-46); --field-line: var(--c-negro-46); --hairline: var(--c-tinta-azul-8); --text: var(--c-gris-835); --text-2: var(--c-gris-647); --text-muted: var(--c-gris-608); --link-hover: var(--text); --tinta-firma: var(--c-gris-961); --accent: var(--c-gris-137); --accent-hover: var(--c-gris-176); --accent-soft: var(--c-gris-71); --accent-text: var(--c-gris-753); --ink-on-accent: var(--c-gris-835); --accent-control: var(--c-gris-647); --switch-on: var(--text); --hover-bg: var(--c-gris-43); --sel-bg: var(--surface-2); --sel-text: var(--text); --sel-line: var(--line-2); --chip-on-bg: var(--text); --chip-on-text: var(--bg); --pri-bg: var(--c-gris-137); --pri-bg-hover: var(--c-gris-176); --pri-line: color-mix(in oklch, var(--text) 55%, transparent); --focus: var(--c-gris-580); --ok: var(--c-verde-50-12); --ok-soft: var(--c-verde-94-4); --ok-text: var(--c-verde-40-10); --warn: var(--c-ambar-62-15); --warn-soft: var(--c-ambar-95-6); --warn-text: var(--c-ambar-46-11); --bad: var(--c-rojo-53-19); --bad-soft: var(--c-rojo-95-4); --bad-text: var(--c-rojo-46-17); --ink-on-bad: var(--c-gris-0); --llamar-bg: var(--c-llamar-50-13); --ink-on-llamar: var(--c-gris-0); --colgar-bg: var(--c-rojo-53-19); --ink-on-colgar: var(--c-gris-0); --mascara-opaca: var(--c-gris-1000); --velo: var(--c-negro-suave-46); --velo-blur: 14px; --dato-1: var(--text); --dato-2: var(--text-muted); --dato-relleno: var(--accent-control); --dato-relleno-2: var(--c-gris-451); --dato-intervalo: var(--text); --dato-banda: color-mix(in oklch, var(--text-muted) 16%, transparent); --dato-umbral: var(--text-muted); --dato-rango-1: var(--c-gris-188); --dato-rango-2: var(--c-gris-106); --dato-rango-3: var(--c-gris-47); --dato-escala-1: var(--c-gris-71); --dato-escala-2: var(--c-gris-176); --dato-escala-3: var(--c-gris-310); --dato-escala-4: var(--c-gris-580); --dato-escala-5: var(--c-gris-835); --dato-escala-tinta-alta: var(--c-gris-20); --cascaron-top: 52px; --cascaron-bar: 60px; --cascaron-side: 232px; --cascaron-side-mini: 64px; --avatar-fondo-1: var(--c-azul-94-3); --avatar-texto-1: var(--c-azul-40-9); --avatar-fondo-2: var(--c-verde-94-3); --avatar-texto-2: var(--c-verde-40-9); --avatar-fondo-3: var(--c-ambar-94-3); --avatar-texto-3: var(--c-ambar-40-9); --avatar-fondo-4: var(--c-rosa-94-3); --avatar-texto-4: var(--c-rosa-40-9); --avatar-fondo-5: var(--c-violeta-94-3); --avatar-texto-5: var(--c-violeta-40-9); --avatar-fondo-6: var(--c-turquesa-94-3); --avatar-texto-6: var(--c-turquesa-40-9); --w-modal: 440px; --w-telefono: 380px; --w-enfoque: 1120px; --tecla: 76px; --h-boton-llamada: 56px; --w-modal-ancho: 760px; --w-hoja: 560px; --w-menu: 232px; --w-cajon: 392px; --w-cajon-ancho: 660px; --w-popover: 280px; --w-calendario: 314px; --w-toast: 560px; --w-globo: 260px; --w-globo-lista: 320px; --w-avisos: 360px; --w-comandos: 640px; --comandos-top: max(var(--s-8), 12vh); --comandos-alto: min(560px, calc(100dvh - var(--comandos-top) - var(--s-4))); --mosaico: 76px; --avatar: 28px; --vacio-aro: 72px; --vacio-glifo: 40px; --ilus-tam-chico: 96px; --ilus-tam: 128px; --ilus-tam-grande: 160px; --contador: 20px; --punto: 8px; --punto-chip: 6px; --w-sub: 220px; --w-celda: 220px; --w-cifra: 180px; --w-lectura: 72ch; --page-pad: var(--s-6); --w-tendencia: 120px; --h-tendencia: 32px; --motivo-linea: var(--c-tinta-suave-6); --motivo-grosor: 1px; --motivo-paso: 26px; --motivo-angulo: 115deg; } [data-ds-theme="light"] { color-scheme: light; --shadow-sm: none; --shadow-md: 0 10px 28px -14px var(--c-negro-18), 0 0 0 1px var(--c-negro-5); --bg: var(--c-gris-43); --surface: var(--c-gris-20); --surface-2: var(--c-gris-71); --surface-3: var(--c-gris-106); --field: var(--c-gris-0); --surface-anidada: var(--c-gris-47); --border: var(--c-negro-7); --line-2: var(--c-negro-12); --border-control: var(--c-negro-46); --field-line: var(--c-negro-46); --hairline: var(--c-tinta-azul-8); --text: var(--c-gris-835); --text-2: var(--c-gris-647); --text-muted: var(--c-gris-608); --link-hover: var(--text); --tinta-firma: var(--c-gris-961); --accent: var(--c-gris-137); --accent-hover: var(--c-gris-176); --accent-soft: var(--c-gris-71); --accent-text: var(--c-gris-753); --ink-on-accent: var(--c-gris-835); --accent-control: var(--c-gris-647); --switch-on: var(--text); --hover-bg: var(--c-gris-43); --sel-bg: var(--surface-2); --sel-text: var(--text); --sel-line: var(--line-2); --chip-on-bg: var(--text); --chip-on-text: var(--bg); --pri-bg: var(--c-gris-137); --pri-bg-hover: var(--c-gris-176); --focus: var(--c-gris-580); --ok: var(--c-verde-50-12); --ok-soft: var(--c-verde-94-4); --ok-text: var(--c-verde-40-10); --warn: var(--c-ambar-62-15); --warn-soft: var(--c-ambar-95-6); --warn-text: var(--c-ambar-46-11); --bad: var(--c-rojo-53-19); --bad-soft: var(--c-rojo-95-4); --bad-text: var(--c-rojo-46-17); --ink-on-bad: var(--c-gris-0); --llamar-bg: var(--c-llamar-50-13); --ink-on-llamar: var(--c-gris-0); --colgar-bg: var(--c-rojo-53-19); --ink-on-colgar: var(--c-gris-0); --velo: var(--c-negro-suave-46); --dato-1: var(--text); --dato-2: var(--text-muted); --dato-relleno: var(--accent-control); --dato-relleno-2: var(--c-gris-451); --dato-intervalo: var(--text); --dato-banda: color-mix(in oklch, var(--text-muted) 16%, transparent); --dato-umbral: var(--text-muted); --dato-rango-1: var(--c-gris-188); --dato-rango-2: var(--c-gris-106); --dato-rango-3: var(--c-gris-47); --dato-escala-1: var(--c-gris-71); --dato-escala-2: var(--c-gris-176); --dato-escala-3: var(--c-gris-310); --dato-escala-4: var(--c-gris-580); --dato-escala-5: var(--c-gris-835); --dato-escala-tinta-alta: var(--c-gris-20); --avatar-fondo-1: var(--c-azul-94-3); --avatar-texto-1: var(--c-azul-40-9); --avatar-fondo-2: var(--c-verde-94-3); --avatar-texto-2: var(--c-verde-40-9); --avatar-fondo-3: var(--c-ambar-94-3); --avatar-texto-3: var(--c-ambar-40-9); --avatar-fondo-4: var(--c-rosa-94-3); --avatar-texto-4: var(--c-rosa-40-9); --avatar-fondo-5: var(--c-violeta-94-3); --avatar-texto-5: var(--c-violeta-40-9); --avatar-fondo-6: var(--c-turquesa-94-3); --avatar-texto-6: var(--c-turquesa-40-9); --motivo-linea: var(--c-tinta-suave-6); } [data-ds-theme="dark"] { color-scheme: dark; --shadow-sm: 0 1px 2px var(--c-negro-40); --shadow-md: 0 12px 28px -14px var(--c-negro-60), 0 0 0 1px var(--c-blanco-5); --bg: var(--c-gris-914); --surface: var(--c-gris-886); --surface-2: var(--c-gris-859); --surface-3: var(--c-gris-827); --field: var(--c-gris-922); --surface-anidada: var(--c-gris-867); --border: var(--c-blanco-8); --line-2: var(--c-blanco-13); --border-control: var(--c-blanco-37); --field-line: var(--c-blanco-37); --hairline: var(--c-blanco-8); --text: var(--c-gris-98); --text-2: var(--c-gris-310); --text-muted: var(--c-gris-404); --link-hover: var(--text); --tinta-firma: var(--c-gris-0); --accent: var(--c-gris-773); --accent-hover: var(--c-gris-733); --accent-soft: var(--c-gris-859); --accent-text: var(--c-gris-188); --ink-on-accent: var(--c-gris-98); --accent-control: var(--c-gris-310); --switch-on: var(--text); --hover-bg: var(--surface-2); --sel-bg: var(--surface-3); --sel-text: var(--text); --sel-line: var(--line-2); --chip-on-bg: var(--text); --chip-on-text: var(--bg); --pri-bg: var(--c-gris-773); --pri-bg-hover: var(--c-gris-733); --focus: var(--c-gris-451); --ok: var(--c-verde-74-12); --ok-soft: var(--c-verde-26-4); --ok-text: var(--ok); --warn: var(--c-ambar-78-14); --warn-soft: var(--c-ambar-28-6); --warn-text: var(--warn); --bad: var(--c-rojo-72-16); --bad-soft: var(--c-rojo-27-6); --bad-text: var(--bad); --ink-on-bad: var(--c-rojo-16-5); --llamar-bg: var(--c-llamar-66-12); --ink-on-llamar: var(--c-wa-16-6); --colgar-bg: var(--c-rojo-66-15); --ink-on-colgar: var(--c-rojo-16-5); --velo: var(--c-negro-58); --dato-1: var(--text); --dato-2: var(--text-muted); --dato-relleno: var(--accent-control); --dato-relleno-2: var(--c-gris-537); --dato-intervalo: var(--text); --dato-banda: color-mix(in oklch, var(--text-muted) 22%, transparent); --dato-umbral: var(--text-muted); --dato-rango-1: var(--c-gris-773); --dato-rango-2: var(--c-gris-827); --dato-rango-3: var(--c-gris-859); --dato-escala-1: var(--c-gris-859); --dato-escala-2: var(--c-gris-773); --dato-escala-3: var(--c-gris-647); --dato-escala-4: var(--c-gris-310); --dato-escala-5: var(--c-gris-98); --dato-escala-tinta-alta: var(--c-gris-914); --avatar-fondo-1: var(--c-azul-32-5); --avatar-texto-1: var(--c-azul-86-6); --avatar-fondo-2: var(--c-verde-32-5); --avatar-texto-2: var(--c-verde-86-6); --avatar-fondo-3: var(--c-ambar-32-5); --avatar-texto-3: var(--c-ambar-86-6); --avatar-fondo-4: var(--c-rosa-32-5); --avatar-texto-4: var(--c-rosa-86-6); --avatar-fondo-5: var(--c-violeta-32-5); --avatar-texto-5: var(--c-violeta-86-6); --avatar-fondo-6: var(--c-turquesa-32-5); --avatar-texto-6: var(--c-turquesa-86-6); --motivo-linea: var(--c-blanco-6); } @media (prefers-contrast: more) { :root:root { --border: var(--border-control); --line-2: var(--border-control); --border-control: var(--c-negro-55); --field-line: var(--c-negro-55); --hairline: var(--c-tinta-azul-20); --text-muted: var(--text-2); } :root[data-ds-theme="dark"] { --border-control: var(--c-blanco-45); --field-line: var(--c-blanco-45); --hairline: var(--c-blanco-20); } } @media (pointer: coarse) { :root:root { --ico-2: 20px; --ico-boton: 20px; --ico-boton-solo: 22px; --h-control: 44px; --h-control-sm: 44px; } } @media (max-width: 820px) { :root:root { --cascaron-top: 48px; --page-pad: var(--s-4); } } } /* Tema leadz. Va después de tokens.css. Generado por generador/generar.mjs desde tokens/*.json. No se edita a mano: se cambia la fuente y se regenera. */ @layer reset, dz.tokens, dz.base, dz.componentes; @layer dz.tokens { :root { --bb-out: var(--c-gris-149); --hilo-bg: var(--surface-2); --hilo-in: var(--surface); --hilo-in-line: var(--border); --hilo-out: var(--bb-out); --hilo-out-text: var(--text); --hilo-meta: var(--text-muted); --hilo-meta-on: var(--accent-text); --wa: var(--c-wa-54-16); --ink-on-wa: var(--c-gris-0); --st-l: 50%; --st-c: .14; --st1: var(--c-azul-58-3); --st2: oklch(var(--st-l) var(--st-c) 236); --st3: oklch(var(--st-l) 0.12 200); --st4: oklch(var(--st-l) 0.14 300); --st5: var(--c-ambar-62-14); --st-won: var(--ok); --st-lost: var(--bad); --brand: var(--c-azul-50-19); --ink-on-brand: var(--c-gris-0); --acento-correo: var(--brand); --muestra-claro: var(--c-gris-43); --muestra-oscuro: var(--c-gris-914); } [data-ds-theme="light"] { --bb-out: var(--c-gris-149); --hilo-bg: var(--surface-2); --hilo-in: var(--surface); --hilo-in-line: var(--border); --hilo-out: var(--bb-out); --hilo-out-text: var(--text); --hilo-meta: var(--text-muted); --hilo-meta-on: var(--accent-text); --wa: var(--c-wa-54-16); --ink-on-wa: var(--c-gris-0); --st-l: 50%; --st1: var(--c-azul-58-3); --st2: oklch(var(--st-l) var(--st-c) 236); --st3: oklch(var(--st-l) 0.12 200); --st4: oklch(var(--st-l) 0.14 300); --st5: var(--c-ambar-62-14); --st-won: var(--ok); --st-lost: var(--bad); --brand: var(--c-azul-50-19); --acento-correo: var(--brand); } [data-ds-theme="dark"] { --bb-out: var(--c-gris-835); --hilo-bg: var(--bg); --hilo-in: var(--surface); --hilo-in-line: var(--border); --hilo-out: var(--bb-out); --hilo-out-text: var(--text); --hilo-meta: var(--text-2); --hilo-meta-on: var(--accent-text); --wa: var(--c-wa-74-16); --ink-on-wa: var(--c-wa-16-6); --st-l: 72%; --st1: var(--c-azul-66-3); --st2: oklch(var(--st-l) 0.13 236); --st3: oklch(var(--st-l) 0.11 200); --st4: oklch(var(--st-l) 0.12 300); --st5: var(--c-ambar-78-12); --st-won: var(--ok); --st-lost: var(--bad); --brand: var(--c-azul-62-17); --acento-correo: var(--brand); } } @layer dz.tokens { :root { --h-fija-30: 30px; --h-fija-38: 38px; --ico-12: 12px; --ico-13: 13px; --ico-14: 14px; --ico-15: 15px; --ico-17: 17px; --ico-18: 18px; --ico-22: 22px; --ico-28: 28px; --comandos-top: calc(var(--cascaron-top) + var(--s-3)); --z-sf: 390; --z-softphone-curso: 9100; --z-sf-velo: 400; } } /* Base del DS. Declara el orden de capas del paquete y lo obligatorio en todo consumidor: los selectores de tipo del producto van dentro de @layer reset (ADR-7). Aquí no hay !important salvo en forced-colors, en movimiento reducido y en [hidden], donde la accesibilidad del paquete manda a propósito. */ @layer reset, dz.tokens, dz.base, dz.componentes; /* ── reset: selectores de tipo. Va en su capa para que nunca pise a un componente. */ @layer reset { *, ::before, ::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* OPT-IN. Heredar tipografía y color en los controles NO es universal: cambia el texto de todo botón sin estilo propio, el de los placeholders y el alto de un textarea, y un producto con CSS propio (LeadZ) tuvo que revertirlo con un puente. Por eso solo aplica donde el producto lo pide: una clase dz-reset-controles en un ancestro (por ejemplo html) o dz-hereda en el control. */ :where(.dz-reset-controles) :is(button, input, select, textarea), :is(button, input, select, textarea):where(.dz-hereda) { font: inherit; color: inherit; letter-spacing: inherit; } /* OPT-IN, igual que la herencia de los controles. Un producto con HTML sin clases se apoya en el margen del navegador de h1 a h6, p, figure, blockquote, ul y ol (LeadZ perdía entre 14 y 40 px en cuatro secciones de Ajustes con la regla universal). Solo aplica donde el producto lo pide: una clase dz-reset-texto en un ancestro (por ejemplo html) o dz-sin-margen en el elemento. Las piezas del DS que llevan un p o un h2 dentro ya fijan su propio margen, así que no dependen de esto. */ :where(.dz-reset-texto) :is(h1, h2, h3, h4, h5, h6, p, figure, blockquote), :is(h1, h2, h3, h4, h5, h6, p, figure, blockquote):where(.dz-sin-margen) { margin: 0; } :where(.dz-reset-texto) :is(ul, ol), :is(ul, ol):where(.dz-sin-margen) { margin: 0; padding: 0; } a { color: inherit; text-decoration: none; } table { border-collapse: separate; border-spacing: 0; } img, video { max-width: 100%; height: auto; } code, pre, samp, kbd { font-family: var(--mono-code); } } @layer dz.base { /* Un elemento con hidden no se ve ni está en el árbol de accesibilidad. Sin esto, cualquier componente que declare display (todos los flex y grid) pisa el display:none del navegador y el atributo no hace nada. !important en una capa anterior gana a los componentes y al CSS del producto sin capa; until-found conserva su comportamiento nativo (buscar en la página). */ [hidden]:not([hidden="until-found"]) { display: none !important; } html { background: var(--bg); scrollbar-color: var(--line-2) transparent; accent-color: var(--accent-control); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: calc(var(--cascaron-top, 0px) + var(--s-2)); } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-3); line-height: var(--lh-3); -webkit-font-smoothing: antialiased; } /* Caret y selección en --accent-control. --accent es un gris de relleno: el caret en --accent medía 1.3:1 en claro y 1.6:1 en oscuro sobre el campo (invisible). --accent-control pasa 3:1 en los dos temas; el valor medido está en contraste.json (caret-sobre-campo, seleccion-de-texto-sobre-campo). El caret se declara también en el control para ganar a cualquier caret-color heredado del cuerpo. */ body, :where(input, textarea, select, [contenteditable]:not([contenteditable="false"])) { caret-color: var(--accent-control); } ::selection { background: color-mix(in oklch, var(--accent-control) 32%, transparent); } ::placeholder { color: var(--text-muted); opacity: 1; } /* Foco: una línea de 1.5 px en --focus que entra una vez y queda fija. :where() la deja en especificidad 0 para que cualquier componente gane sin pelear. El anillo vive en :focus-visible: el foco por ratón no lo dispara. */ :focus { outline: none; } :where(a, button, summary, select, textarea, input[type="checkbox"], input[type="radio"], [tabindex]):focus-visible { outline: none; box-shadow: var(--ring); } /* Las dos entradas de los paneles, declaradas una sola vez (ACB-128): dzEntra es dz-entra del token (sube 8 px, --s-2) y dzEntraDesdeArriba es la de un panel anclado bajo su disparador (baja 4 px, --s-1). componentes.css no carga movimiento.css, por eso viven aquí y una prueba vigila que valgan lo mismo que --mov-dist-1 y --mov-dist-2. */ @keyframes dzEntra { from { opacity: 0; transform: translateY(var(--s-2)); } } @keyframes dzEntraDesdeArriba { from { opacity: 0; transform: translateY(calc(var(--s-1) * -1)); } } @keyframes dzAro { from { box-shadow: var(--ring-0); } } :focus-visible { animation: dzAro var(--dur-2) var(--ease-out); } /* WebKit no pinta box-shadow sobre un checkbox o radio nativo: contorno propio. */ input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none; } /* Enlace de texto: acento sin subrayar, en reposo y en hover; en hover cambia al tono hover. */ a:where(:not([class])) { color: var(--accent-text); font-weight: 500; text-decoration: none; } @media (hover: hover) { a:where(:not([class])):hover { color: var(--link-hover); } } /* Cifras alineadas en tablas, horas y salidas. */ :where(table, time, output, [data-dz-cifra]) { font-variant-numeric: tabular-nums; } /* Sin zoom de doble toque en controles; con puntero grueso los campos van a 16 px o Safari de iPhone hace zoom al enfocar. */ :where(a, button, summary, label, select, [role="button"]) { touch-action: manipulation; } @media (pointer: coarse) { :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) { font-size: 16px; } } /* Barras de desplazamiento: color por scrollbar-color (heredado a todo contenedor); respaldo para WebKit sin soporte. */ @supports not (scrollbar-color: auto) { ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } } /* Colores forzados (Windows): borra las sombras y el foco vive en box-shadow, así que se le da contorno real; el estado elegido, que en el tema vive en el relleno, lleva borde en Highlight. !important solo aquí y en movimiento reducido. */ @media (forced-colors: active) { :focus-visible { outline: 2px solid CanvasText !important; outline-offset: 2px; } [aria-pressed="true"], [aria-selected="true"][role="tab"], [aria-current]:not([aria-current="false"]) { outline: 2px solid Highlight !important; outline-offset: -2px; } /* Un icono con color de autor (destinos del cascarón, pestañas, leyendas, reglas) no se fuerza solo: el svg conserva su var(--...) sobre el Canvas y puede quedar a 1.46:1. Hereda el color ya forzado de su contenedor (ICB-65, ICB-71, ICB-225). */ .dz-ico { color: inherit !important; } } /* Movimiento reducido: nada anima en bucle; lo que entra, aparece. */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; animation-delay: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; } } /* Superficie modal abierta (modal, hoja, cajón, cascarón): la página de atrás no se desplaza. comportamiento/capas pone el atributo y mide la barra de desplazamiento en --dz-barra, para que el contenido no salte al desaparecer. */ html[data-dz-bloqueo] { padding-right: var(--dz-barra, 0px); } html[data-dz-bloqueo], html[data-dz-bloqueo] body { overflow: hidden; overscroll-behavior: none; } } /* Tamaño de : por clase, nunca en línea, para que el CSS del producto (sin capa) gane siempre. */ @layer dz.componentes { .dz-ico--1 { width: var(--ico-1); height: var(--ico-1); } .dz-ico--2 { width: var(--ico-2); height: var(--ico-2); } .dz-ico--3 { width: var(--ico-3); height: var(--ico-3); } .dz-ico--4 { width: var(--ico-4); height: var(--ico-4); } .dz-ico--5 { width: var(--ico-5); height: var(--ico-5); } } /* Piezas del DS: CSS agnóstico en @layer dz.componentes. Generado por generador/generar.mjs desde generador/fuentes y registro/. No se edita a mano: se cambia la fuente y se regenera. */ @layer reset, dz.tokens, dz.base, dz.componentes; /* Avatar: la persona en un círculo de --avatar (24, 28, 42 o 56). Foto encima de las iniciales; si la foto falla, montarAvatar la oculta (data-dz-fallo). El color de las iniciales sale de seis pares de tokens (--avatar-fondo-N y --avatar-texto-N, más de 4.5:1 en claro y oscuro): decora, el nombre va en el texto. La presencia es un punto con forma propia (lleno, con barra, con hueco) y un texto para lector de pantalla: el color nunca va solo. */ @layer dz.componentes { .dz-avatar { --dz-avatar-tam: var(--avatar); --dz-avatar-fondo: var(--surface-3); --dz-avatar-texto: var(--text-2); --dz-presencia-tam: var(--punto); position: relative; display: inline-grid; flex: none; place-items: center; inline-size: var(--dz-avatar-tam); block-size: var(--dz-avatar-tam); border-radius: 50%; background: var(--dz-avatar-fondo); color: var(--dz-avatar-texto); font-size: var(--fs-1); font-weight: 600; line-height: 1; white-space: nowrap; user-select: none; } .dz-avatar__iniciales { display: inline-grid; place-items: center; max-inline-size: 100%; overflow: hidden; border-radius: inherit; } .dz-avatar__iniciales svg { inline-size: var(--ico-1); block-size: var(--ico-1); flex: none; } .dz-avatar__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border-radius: inherit; object-fit: cover; } .dz-avatar[data-dz-fallo] .dz-avatar__img { display: none; } .dz-avatar--sm { --dz-avatar-tam: var(--h-mini); } .dz-avatar--lg { --dz-avatar-tam: calc(var(--avatar) * 1.5); --dz-presencia-tam: calc(var(--punto) * 1.5); font-size: var(--fs-4); } .dz-avatar--xl { --dz-avatar-tam: calc(var(--avatar) * 2); --dz-presencia-tam: calc(var(--punto) * 1.5); font-size: var(--fs-6); } .dz-avatar--lg .dz-avatar__iniciales svg, .dz-avatar--xl .dz-avatar__iniciales svg { inline-size: var(--ico-3); block-size: var(--ico-3); } .dz-avatar--tono-1 { --dz-avatar-fondo: var(--avatar-fondo-1); --dz-avatar-texto: var(--avatar-texto-1); } .dz-avatar--tono-2 { --dz-avatar-fondo: var(--avatar-fondo-2); --dz-avatar-texto: var(--avatar-texto-2); } .dz-avatar--tono-3 { --dz-avatar-fondo: var(--avatar-fondo-3); --dz-avatar-texto: var(--avatar-texto-3); } .dz-avatar--tono-4 { --dz-avatar-fondo: var(--avatar-fondo-4); --dz-avatar-texto: var(--avatar-texto-4); } .dz-avatar--tono-5 { --dz-avatar-fondo: var(--avatar-fondo-5); --dz-avatar-texto: var(--avatar-texto-5); } .dz-avatar--tono-6 { --dz-avatar-fondo: var(--avatar-fondo-6); --dz-avatar-texto: var(--avatar-texto-6); } /* Presencia: abajo a la derecha, con un anillo del color de la superficie para despegarla de la foto. */ .dz-avatar__presencia { position: absolute; z-index: 1; inset-inline-end: 0; inset-block-end: 0; inline-size: var(--dz-presencia-tam); block-size: var(--dz-presencia-tam); border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--dz-avatar-anillo, var(--surface)); } .dz-avatar__presencia[data-dz-presencia="ocupado"] { background: var(--bad); } .dz-avatar__presencia[data-dz-presencia="ocupado"]::after { content: ""; position: absolute; inset: 40% 22%; border-radius: 1px; background: var(--dz-avatar-anillo, var(--surface)); } .dz-avatar__presencia[data-dz-presencia="llamada"] { background: var(--accent-control); } .dz-avatar__presencia[data-dz-presencia="llamada"]::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: var(--dz-avatar-anillo, var(--surface)); } .dz-avatar__presencia-texto { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (forced-colors: active) { .dz-avatar { border: 1px solid currentColor; } .dz-avatar__presencia { border: 1px solid currentColor; } } } /* Ayuda en lista: de tres a cinco renglones, uno por pregunta que contesta. En la
va en dos columnas alineadas por subgrid: la palabra clave (dt) a la izquierda y la respuesta (dd) a la derecha, con hairline continuo entre renglones, y las dos se alinean por la línea base: con una sola línea quedan al centro de la fila y con varias la clave queda a la altura de la primera línea de la respuesta. Sin viñetas y nunca un párrafo. Las casillas por defecto son «Mide», «No incluye» y «Detalle» (23-oct-2026). Armada (25-oct-2026, propuesta C «Marginal» de Alejandro López Ulloa): segunda superficie sin borde, como el aviso pero neutra, con un icono de Lucide en el margen a la altura del primer renglón. Sin la marca (
) queda la lista sin caja; un

o

con la clase (marcado de LeadZ) se queda en línea: clave en negrita y texto detrás. */ @layer dz.componentes { .dz-ayuda { display: grid; font-size: var(--fs-2); line-height: var(--lh-3); color: var(--text-2); } .dz-ayuda__renglon { padding: var(--s-1) 0; border-top: 1px solid var(--border); text-wrap: pretty; } .dz-ayuda__renglon:first-child { padding-top: 0; border-top: 0; } .dz-ayuda__renglon:last-child { padding-bottom: 0; } .dz-ayuda__clave { display: inline; margin-right: var(--s-1); font-weight: 600; color: var(--text); } .dz-ayuda__texto { display: inline; margin: 0; } /* La lista: la
de la pieza sola (dl.dz-ayuda) o dentro del panel (dl.dz-ayuda__lista). Margen 0 porque el navegador trae el suyo. */ :is(dl.dz-ayuda, dl.dz-ayuda__lista) { margin: 0; display: grid; grid-template-columns: fit-content(9em) minmax(0, 1fr); } :is(dl.dz-ayuda, dl.dz-ayuda__lista) > .dz-ayuda__renglon { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: var(--s-3); align-items: baseline; padding-block: var(--s-2); } :is(dl.dz-ayuda, dl.dz-ayuda__lista) > .dz-ayuda__renglon:first-child { padding-top: 0; } :is(dl.dz-ayuda, dl.dz-ayuda__lista) > .dz-ayuda__renglon:last-child { padding-bottom: 0; } :is(dl.dz-ayuda, dl.dz-ayuda__lista) .dz-ayuda__clave { display: block; margin: 0; } :is(dl.dz-ayuda, dl.dz-ayuda__lista) .dz-ayuda__texto { display: block; min-width: 0; } /* Panel: segunda superficie sin borde, radio de control, marca en el margen y cuerpo al lado. */ .dz-ayuda:has(> .dz-ayuda__cuerpo) { grid-template-columns: var(--ico-2) minmax(0, 1fr); column-gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-control); background: var(--surface-2); } /* La marca mide una línea del renglón de alto y centra el icono en ella; con título, una línea del título. */ .dz-ayuda__marca { display: inline-grid; place-items: center; width: var(--ico-2); height: calc(var(--lh-3) * 1em); color: var(--text-2); } .dz-ayuda:has(> .dz-ayuda__cuerpo > .dz-ayuda__titulo) > .dz-ayuda__marca { height: calc(var(--lh-2) * 1em); } .dz-ayuda__icono { width: var(--ico-2); height: var(--ico-2); } .dz-ayuda__cuerpo { display: grid; gap: var(--s-2); min-width: 0; } .dz-ayuda__titulo { margin: 0; min-width: 0; font-size: var(--fs-3); font-weight: 600; line-height: var(--lh-2); color: var(--text); } /* Dentro de una tarjeta: superficie anidada con hairline (nunca la misma superficie dentro de la misma superficie). */ .dz-tarjeta .dz-ayuda:has(> .dz-ayuda__cuerpo) { background: var(--surface-anidada); border: 1px solid var(--hairline); } /* Globo: superficie con hairline y sombra; con cuerpo conserva la marca. */ .dz-ayuda--globo { padding: var(--s-3) var(--s-4); border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-md); } .dz-ayuda--globo:has(> .dz-ayuda__cuerpo) { border-radius: var(--r-card); background: var(--surface); } /* Plano: marca y lista sin caja, para ir bajo un campo o en una fila de ajustes. */ .dz-ayuda--plano:has(> .dz-ayuda__cuerpo), .dz-tarjeta .dz-ayuda--plano:has(> .dz-ayuda__cuerpo) { padding: 0; border: 0; border-radius: 0; background: transparent; } /* Teléfono (corte movil): una columna, la clave encima y la respuesta debajo a todo lo ancho. Vale para la lista sola y para el panel. */ @media (max-width: 560px) { :is(dl.dz-ayuda, dl.dz-ayuda__lista), :is(dl.dz-ayuda, dl.dz-ayuda__lista) > .dz-ayuda__renglon { grid-template-columns: minmax(0, 1fr); } } /* Sin subgrid: la misma forma de una columna. El renglón sigue siendo grid y un hijo de grid se bloquifica, así que no se intenta un display en línea: queda la columna única. */ @supports not (grid-template-columns: subgrid) { :is(dl.dz-ayuda, dl.dz-ayuda__lista), :is(dl.dz-ayuda, dl.dz-ayuda__lista) > .dz-ayuda__renglon { grid-template-columns: minmax(0, 1fr); } } } /* Banda de práctica: un renglón de aviso suave con icono (nunca solo color) que dice que los datos son ficticios; o el chip "Lead de práctica" que acompaña al nombre de un lead de práctica. Aviso, no alarma: relleno suave del tono de aviso, sin borde y sin sombra. */ @layer dz.componentes { .dz-banda-practica:not(.dz-banda-practica--chip) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-height: var(--h-control); padding: var(--s-2) var(--s-4); border-radius: var(--r-control); background: var(--warn-soft); color: var(--warn-text); font-size: var(--fs-2); line-height: var(--lh-2); } .dz-banda-practica__marca { display: inline-grid; place-items: center; flex: none; width: var(--ico-3); height: var(--ico-3); } .dz-banda-practica__marca svg { width: var(--ico-3); height: var(--ico-3); } .dz-banda-practica__texto { flex: 1 1 var(--w-sub); min-width: 0; margin: 0; text-wrap: pretty; } .dz-banda-practica__clave { font-weight: 600; } .dz-banda-practica__acciones { display: flex; flex: none; flex-wrap: wrap; gap: var(--s-2); margin-left: auto; } /* El chip: el mismo chip de aviso con un poco más de cuerpo, para que se lea junto a un nombre de 28 px. */ .dz-banda-practica--chip { font-weight: 500; } .dz-banda-practica.dz-banda-practica--mini { height: var(--h-mini); } } /* Botón (como el .zbtn de LeadZ: sin position, min-width, line-height ni justify-content propios; sin piso de min-height: LeadZ solo pone 24 px dentro de main y su propia regla lo hace, y --h-control-sm ya mide 30). Píldora a --h-control. Base = secundario (superficie con borde de control); primario en gris elevado con borde --pri-line; fantasma sin borde para lo terciario; peligro con el tono de error, nunca rojo macizo. Un primario por zona. Aspecto de LeadZ. */ @layer dz.componentes { .dz-boton { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--dz-dens-control, var(--h-control)); padding: 0 var(--s-4); border-radius: var(--r-btn); border: 1px solid var(--border-control); background: var(--surface-2); color: var(--text); font-family: inherit; font-size: var(--fs-2); font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); } /* El glifo crece con el lado del botón (ICB-270): 16 en el chico (30 a 32), 18 en el estándar (38) y, con el dedo, 20 con rótulo y 22 sin él (44 a 48). */ .dz-boton svg { width: var(--ico-boton); height: var(--ico-boton); flex: none; } @media (hover: hover) { .dz-boton:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--surface-3); color: var(--text); } } .dz-boton[data-ds-estado="hover"]:not(:disabled) { background: var(--surface-3); color: var(--text); } .dz-boton:active:not(:disabled):not([aria-disabled="true"]), .dz-boton[data-ds-estado="activo"]:not(:disabled) { background: var(--surface-3); transform: translateY(1px) scale(.98); } .dz-boton:focus-visible, .dz-boton[data-ds-estado="foco"] { outline: none; box-shadow: var(--ring); } .dz-boton:disabled, .dz-boton[aria-disabled="true"] { opacity: var(--op-off); cursor: not-allowed; transform: none; } .dz-boton--primario { background: var(--pri-bg); border-color: var(--pri-line); color: var(--text); } @media (hover: hover) { .dz-boton--primario:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--pri-bg-hover); border-color: var(--pri-line); color: var(--text); } } .dz-boton--primario[data-ds-estado="hover"]:not(:disabled), .dz-boton--primario:active:not(:disabled):not([aria-disabled="true"]), .dz-boton--primario[data-ds-estado="activo"]:not(:disabled) { background: var(--pri-bg-hover); border-color: var(--pri-line); color: var(--text); } /* Sin borde cuando está desactivado: el borde es la señal de que se puede apretar. */ .dz-boton--primario:disabled, .dz-boton--primario[aria-disabled="true"] { border-color: transparent; } .dz-boton--fantasma { background: transparent; border-color: transparent; color: var(--text-2); } @media (hover: hover) { .dz-boton--fantasma:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--surface-2); color: var(--text); } } .dz-boton--fantasma[data-ds-estado="hover"]:not(:disabled) { background: var(--surface-2); color: var(--text); } .dz-boton--fantasma[aria-pressed="true"] { background: var(--sel-bg); color: var(--sel-text); } .dz-boton--peligro { background: var(--surface); border-color: var(--bad); color: var(--bad-text); } @media (hover: hover) { .dz-boton--peligro:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--bad-soft); border-color: var(--bad-soft); color: var(--bad-text); } } .dz-boton--peligro[data-ds-estado="hover"]:not(:disabled), .dz-boton--peligro:active:not(:disabled):not([aria-disabled="true"]), .dz-boton--peligro[data-ds-estado="activo"]:not(:disabled) { background: var(--bad-soft); border-color: var(--bad-soft); color: var(--bad-text); } /* Llamar y colgar (2.3.0): las dos acciones de una llamada, en verde calmado y en rojo, cada una con su tinta. El verde no es un éxito ni el rojo un error: son los tokens de la llamada. */ .dz-boton--llamar { background: var(--llamar-bg); border-color: var(--llamar-bg); color: var(--ink-on-llamar); } .dz-boton--colgar { background: var(--colgar-bg); border-color: var(--colgar-bg); color: var(--ink-on-colgar); } @media (hover: hover) { .dz-boton--llamar:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--llamar-bg); border-color: var(--llamar-bg); color: var(--ink-on-llamar); filter: brightness(1.08); } .dz-boton--colgar:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--colgar-bg); border-color: var(--colgar-bg); color: var(--ink-on-colgar); filter: brightness(1.08); } } .dz-boton--llamar[data-ds-estado="hover"]:not(:disabled), .dz-boton--llamar:active:not(:disabled):not([aria-disabled="true"]), .dz-boton--llamar[data-ds-estado="activo"]:not(:disabled) { background: var(--llamar-bg); border-color: var(--llamar-bg); color: var(--ink-on-llamar); filter: brightness(1.08); } .dz-boton--colgar[data-ds-estado="hover"]:not(:disabled), .dz-boton--colgar:active:not(:disabled):not([aria-disabled="true"]), .dz-boton--colgar[data-ds-estado="activo"]:not(:disabled) { background: var(--colgar-bg); border-color: var(--colgar-bg); color: var(--ink-on-colgar); filter: brightness(1.08); } /* Sin número a quien llamar el botón se apaga a gris neutro: un verde pálido se leería como un estado de éxito. */ .dz-boton--llamar:disabled, .dz-boton--llamar[aria-disabled="true"] { background: var(--surface-2); border-color: var(--border-control); color: var(--text-muted); } @media (forced-colors: active) { .dz-boton--llamar, .dz-boton--colgar { border-color: ButtonText; forced-color-adjust: none; background: ButtonFace; color: ButtonText; } } /* Par chico: va con campo chico, nunca un chico junto a uno normal en la misma fila. */ .dz-boton--chico { height: var(--dz-dens-control-sm, var(--h-control-sm)); padding: 0 var(--s-3); } .dz-boton--chico svg { width: var(--ico-2); height: var(--ico-2); } /* Solo icono: cuadrado del alto del control. Lleva aria-label. */ .dz-boton--icono { width: var(--h-control); padding: 0; justify-content: center; } .dz-boton--icono svg { width: var(--dz-dens-ico-solo, var(--ico-boton-solo)); height: var(--dz-dens-ico-solo, var(--ico-boton-solo)); } .dz-boton--icono.dz-boton--chico { width: var(--h-control-sm); } .dz-boton--icono.dz-boton--chico svg { width: var(--ico-2); height: var(--ico-2); } @media (pointer: coarse) { .dz-boton--icono.dz-boton--chico svg { width: var(--ico-boton-solo); height: var(--ico-boton-solo); } } /* Cargando (1 a 10 s): el botón queda ocupado con su reloj y el rótulo dice qué pasa. */ .dz-boton--cargando, .dz-boton[aria-busy="true"] { pointer-events: none; } .dz-boton--cargando::before, .dz-boton[aria-busy="true"]::before { content: ""; width: var(--ico-1); height: var(--ico-1); flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: dzGira calc(var(--dur-4) * 2) linear infinite; } .dz-boton--cargando > svg, .dz-boton[aria-busy="true"] > svg { display: none; } @keyframes dzGira { to { transform: rotate(360deg); } } /* Con movimiento reducido el anillo que gira pasa a tres puntos quietos ("..."): el rótulo y aria-busy siguen diciendo qué pasa. */ @media (prefers-reduced-motion: reduce) { .dz-boton--cargando::before, .dz-boton[aria-busy="true"]::before { content: "\2026"; width: auto; height: auto; border: 0; border-radius: 0; animation: none; line-height: 1; } } } /* Campo: etiqueta, control, ayuda y error. El borde de reposo --field-line SE CONSERVA al enfocar y el anillo se suma por fuera (decisión de Alex, 17-oct): al enfocar, el borde nunca pasa a --focus. Con puntero grueso el texto sube a 16 para que Safari no haga zoom. Lo que no se edita: DESHABILITADO baja el control entero a --op-off (PCB-37, no lo pinta de gris) y SOLO LECTURA no atenúa nada, pierde el borde de control activo (queda el de línea suave, --border) y conserva el foco y el valor copiable. En los dos la razón es la primera línea de ayuda (PCB-1711, UCB-144) y el candado, solo si el bloqueo es por permiso o plan, va junto a la etiqueta (PCB-1181). */ @layer dz.componentes { .dz-campo { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; } .dz-campo__etiqueta { font-size: var(--fs-1); font-weight: 500; color: var(--text-2); } .dz-campo__etiqueta--oculta { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* El asterisco no es un error: va en el color de la etiqueta; el rojo es del error real. Si casi todo es obligatorio se rotula lo opcional. */ .dz-campo__obligatorio { color: var(--text-2); } .dz-campo__ayuda { margin: 0; font-size: var(--fs-1); line-height: var(--lh-3); color: var(--text-muted); } .dz-campo__razon { color: var(--text-2); } /* El candado de un bloqueo por permiso o plan: decorativo, a 16 px, pegado al texto de la etiqueta. */ .dz-campo__candado { display: inline-block; vertical-align: text-bottom; margin-inline-start: var(--s-1); color: var(--text-muted); } .dz-campo__error { margin: 0; font-size: var(--fs-1); line-height: var(--lh-2); color: var(--bad-text); } .dz-campo__control { width: 100%; height: var(--dz-dens-control, var(--h-control)); padding: var(--dz-dens-campo-py, var(--s-2)) var(--s-3); border-radius: var(--r-input); border: 1px solid var(--field-line); background: var(--field); color: var(--text); font-family: inherit; font-size: var(--fs-2); transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); } .dz-campo__control::placeholder { color: var(--text-muted); opacity: 1; } @media (hover: hover) { .dz-campo__control:hover:not(:disabled):not(:focus):not([readonly]) { border-color: var(--text-muted); } } .dz-campo__control[data-ds-estado="hover"]:not(:disabled):not([readonly]) { border-color: var(--text-muted); } .dz-campo__control:focus, .dz-campo__control:focus-visible, .dz-campo__control[data-ds-estado="foco"] { outline: none; border-color: var(--field-line); box-shadow: var(--ring); } .dz-campo__control:disabled { opacity: var(--op-off); cursor: not-allowed; } /* Solo lectura: el borde de línea suave en vez del de control activo, sin fondo de campo; al enfocar solo se suma el anillo y el valor se puede seleccionar y copiar. */ .dz-campo__control[readonly], .dz-campo__control[readonly]:hover, .dz-campo__control[readonly]:focus, .dz-campo__control[readonly]:focus-visible, .dz-campo__control[readonly][data-ds-estado] { border-color: var(--border); background: transparent; cursor: default; } .dz-campo--invalido .dz-campo__control, .dz-campo__control[aria-invalid="true"] { border-color: var(--bad); } /* El error gana al hover de reposo y al hover enseñado: con el puntero encima el borde sigue en rojo. */ .dz-campo--invalido .dz-campo__control:hover:not(:disabled):not(:focus), .dz-campo__control[aria-invalid="true"]:hover:not(:disabled):not(:focus), .dz-campo--invalido .dz-campo__control[data-ds-estado="hover"]:not(:disabled), .dz-campo__control[aria-invalid="true"][data-ds-estado="hover"]:not(:disabled) { border-color: var(--bad); } .dz-campo__control--area { height: auto; line-height: var(--lh-3); resize: vertical; } /* Selector: sin la flecha nativa del navegador (que no sigue el tema ni el tamaño), con el chevron de Lucide en una envoltura. El chevron no recibe el puntero: el clic cae en el nativo abre el menú del sistema operativo, que no es el lenguaje del DS. Con appearance: base-select el navegador deja estilar el campo y su menú (::picker): el panel es el del menú del DS (hairline, radio de tarjeta, sombra media) y las opciones las de la lista del combobox (fila, fondo de selección, la elegida en peso 500). Sigue siendo un sin borde dentro. El anillo de foco y el borde de acento van en el CONTENEDOR con :focus-within; el input interno lleva outline: none y box-shadow: none. Dos rectángulos concéntricos leen como error. La etiqueta, la ayuda y el error son los de campo (usa: campo). */ @layer dz.componentes { .dz-campo-compuesto { display: flex; align-items: center; height: var(--dz-dens-control, var(--h-control)); border-radius: var(--r-input); border: 1px solid var(--field-line); background: var(--field); transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); } /* Separación, relleno lateral y color del contenedor solo cuando el campo usa el control del DS. Un campo compuesto con input o select propios (el signo de monto, el prefijo de WhatsApp de LeadZ) pone los suyos: antes el DS los declaraba siempre y LeadZ los revertía. */ .dz-campo-compuesto:where(:has(> .dz-campo-compuesto__control)) { gap: var(--s-2); padding: 0 var(--s-3); color: var(--text-muted); } .dz-campo-compuesto__icono { width: var(--ico-2); height: var(--ico-2); flex: none; } @media (hover: hover) { .dz-campo-compuesto:hover:not(:focus-within):not(:has(:disabled)):not(.dz-campo-compuesto--lectura) { border-color: var(--text-muted); } } .dz-campo-compuesto[data-ds-estado="hover"] { border-color: var(--text-muted); } /* Un solo anillo: si el foco cae en un botón dentro del campo, el botón pinta el suyo y el contenedor apaga el propio. */ .dz-campo-compuesto:focus-within:not(:has(> .dz-boton:focus)), .dz-campo-compuesto[data-ds-estado="foco"] { border-color: var(--field-line); box-shadow: var(--ring); } .dz-campo-compuesto--invalido, .dz-campo-compuesto:has([aria-invalid="true"]) { border-color: var(--bad); } /* El error gana al hover de reposo y al hover enseñado: con el puntero encima el borde sigue en rojo. */ .dz-campo-compuesto--invalido:hover:not(:focus-within):not(:has(:disabled)), .dz-campo-compuesto:has([aria-invalid="true"]):hover:not(:focus-within):not(:has(:disabled)), .dz-campo-compuesto--invalido[data-ds-estado="hover"], .dz-campo-compuesto:has([aria-invalid="true"])[data-ds-estado="hover"] { border-color: var(--bad); } /* Deshabilitado: el contorno entero, con su icono y su sufijo, a --op-off (no un gris). Solo lo apaga su propio input: un botón o un día del calendario deshabilitado dentro no lo apaga. */ .dz-campo-compuesto:has(> .dz-campo-compuesto__control:disabled) { opacity: var(--op-off); cursor: not-allowed; } /* Solo lectura: borde de línea suave y sin fondo de campo; al enfocar solo se suma el anillo, el borde no se oscurece. */ .dz-campo-compuesto--lectura, .dz-campo-compuesto--lectura:focus-within:not(:has(> .dz-boton:focus)), .dz-campo-compuesto--lectura[data-ds-estado] { border-color: var(--border); background: transparent; } .dz-campo-compuesto--lectura .dz-campo-compuesto__control { cursor: default; } .dz-campo-compuesto__control { flex: 1; min-width: 0; height: 100%; padding: 0; background: transparent; border: 0; outline: none; box-shadow: none; color: var(--text); font-family: inherit; font-size: var(--fs-2); text-overflow: ellipsis; } .dz-campo-compuesto__control:focus, .dz-campo-compuesto__control:focus-visible { outline: none; box-shadow: none; animation: none; } .dz-campo-compuesto__control:disabled { cursor: not-allowed; } .dz-campo-compuesto__control::placeholder { color: var(--text-muted); opacity: 1; } /* Sin la equis ni la lupa nativas del type=search: el campo compuesto ya trae las suyas. */ .dz-campo-compuesto__control[type="search"] { appearance: none; -webkit-appearance: none; } .dz-campo-compuesto__control[type="search"]::-webkit-search-decoration, .dz-campo-compuesto__control[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .dz-campo-compuesto__sufijo { flex: none; font-size: var(--fs-2); color: var(--text-muted); } /* Botones chicos dentro del campo (revelar, copiar): a ras del borde derecho. */ .dz-campo-compuesto > .dz-boton:last-child { margin-right: calc(var(--s-2) * -1); } .dz-campo-compuesto--chico { height: var(--dz-dens-control-sm, var(--h-control-sm)); padding: 0 var(--s-2); } .dz-campo-compuesto--chico .dz-campo-compuesto__icono { width: var(--ico-2); height: var(--ico-2); } @media (pointer: coarse) { .dz-campo-compuesto__control { font-size: var(--fs-4); } } } /* Casilla y radio. La pieza del DS emite el input nativo dentro de su caja (dz-casilla__caja) y ahí se pinta con caja propia (Alex, 23-oct-2026): 20 px, borde de 1,5 px en --text-muted (≥ 3:1 contra --bg, --surface y --field en los dos temas), marcada en --accent-control con el check de Lucide encima en --bg. El input sigue siendo nativo (semántica, teclado, formularios). La clase dz-casilla__control sobre un que el producto ya tenga, sin la caja, conserva el glifo del navegador con su tamaño y sus márgenes (lo que pinta LeadZ, la fundación: 13 px, margen 3 3 3 4) y solo le da color, foco y cursor; --dz-casilla-tam lo ajusta. La etiqueta es el área que se toca: 24 px mínimo, 44 con puntero grueso. En forced-colors vuelve el control del sistema. */ @layer dz.componentes { .dz-casilla { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--s-6); font-size: var(--fs-2); color: var(--text); cursor: pointer; } .dz-casilla__texto { line-height: var(--lh-2); } /* Rótulo solo para el lector (casilla de fila): el área que se toca sigue siendo la etiqueta entera. */ .dz-casilla__texto--oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .dz-casilla__control { width: var(--dz-casilla-tam, auto); height: var(--dz-casilla-tam, auto); accent-color: var(--accent-control); cursor: pointer; } .dz-casilla__control:disabled { cursor: not-allowed; } .dz-casilla:has(:disabled) { cursor: not-allowed; } .dz-casilla:has(:disabled) .dz-casilla__texto { opacity: var(--op-off); } .dz-casilla__control:focus-visible, .dz-casilla[data-ds-estado="foco"] .dz-casilla__control { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none; } .dz-casilla__caja { display: inline-grid; flex: none; place-items: center; width: var(--dz-casilla-tam, var(--s-5)); height: var(--dz-casilla-tam, var(--s-5)); } .dz-casilla__caja > * { grid-area: 1 / 1; } .dz-casilla__caja > .dz-casilla__control { appearance: none; -webkit-appearance: none; margin: 0; width: 100%; height: 100%; border: 1.5px solid var(--text-muted); border-radius: var(--r-1); background: var(--field); transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); } .dz-casilla--radio .dz-casilla__caja > .dz-casilla__control { border-radius: 50%; } .dz-casilla:hover .dz-casilla__caja > .dz-casilla__control:not(:disabled) { border-color: var(--text-2); } .dz-casilla__caja > .dz-casilla__control:checked, .dz-casilla__caja > .dz-casilla__control[data-indeterminado] { background: var(--accent-control); border-color: var(--accent-control); } .dz-casilla--radio .dz-casilla__caja > .dz-casilla__control:checked, .dz-casilla--radio .dz-casilla__caja > .dz-casilla__control:checked:focus-visible { background: var(--field); box-shadow: inset 0 0 0 var(--s-1) var(--field), inset 0 0 0 var(--s-5) var(--accent-control); } .dz-casilla__caja > .dz-casilla__control[aria-invalid="true"] { border-color: var(--bad); } .dz-casilla__marca { pointer-events: none; color: var(--bg); stroke-width: 3; opacity: 0; width: var(--ico-1); height: var(--ico-1); } .dz-casilla__control:checked:not([data-indeterminado]) ~ .dz-casilla__marca:not(.dz-casilla__mixta), .dz-casilla__control[data-indeterminado] ~ .dz-casilla__mixta { opacity: 1; } .dz-casilla:has(:disabled) .dz-casilla__caja { opacity: var(--op-off); } @media (pointer: coarse) { .dz-casilla { min-height: var(--h-tactil); } } @media (prefers-reduced-motion: reduce) { .dz-casilla__caja > .dz-casilla__control { transition: none; } } @media (forced-colors: active) { .dz-casilla__caja > .dz-casilla__control { appearance: auto; -webkit-appearance: auto; border: 0; background: none; box-shadow: none; } .dz-casilla__marca { display: none; } } } /* Chip: píldora de --h-chip, relleno suave y texto en 500. Con punto de color cuando el chip es un estado: el color nunca va solo. Con presionado es un botón de dos estados; encendido, tinta invertida. */ @layer dz.componentes { .dz-chip { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--dz-dens-chip, var(--h-chip)); padding: 0 var(--s-2); border-radius: var(--r-chip); border: 0; background: var(--surface-2); color: var(--text-2); font-family: inherit; font-size: var(--fs-1); font-weight: 500; white-space: nowrap; } .dz-chip__punto { width: var(--punto-chip); height: var(--punto-chip); border-radius: 50%; background: currentColor; flex: none; margin-inline-end: calc(var(--s-1) * -1); } .dz-chip svg { width: var(--ico-1); height: var(--ico-1); flex: none; } /* El glifo y su rótulo a 8 (--s-2, ICB-118: 6 a 8). El punto de estado no es un glifo y conserva sus 4: el margen negativo devuelve lo que sobra. */ .dz-chip--fuerte { background: var(--chip-on-bg); color: var(--chip-on-text); } .dz-chip--peligro { background: var(--bad-soft); color: var(--bad-text); } .dz-chip--ok { background: var(--ok-soft); color: var(--ok-text); } .dz-chip--aviso { background: var(--warn-soft); color: var(--warn-text); } .dz-chip--accion { cursor: pointer; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); } @media (hover: hover) { .dz-chip--accion:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--surface-3); color: var(--text); } } .dz-chip--accion[data-ds-estado="hover"] { background: var(--surface-3); color: var(--text); } .dz-chip--accion[aria-pressed="true"] { background: var(--chip-on-bg); color: var(--chip-on-text); } .dz-chip--accion:focus-visible, .dz-chip--accion[data-ds-estado="foco"] { outline: none; box-shadow: var(--ring); } .dz-chip--accion:disabled { opacity: var(--op-off); cursor: not-allowed; } /* Con el dedo el chip botón (el de dos estados) sube a --h-tactil; el chip que solo informa no se toca y conserva --h-chip. */ @media (pointer: coarse) { .dz-chip--accion { height: var(--h-tactil); padding: 0 var(--s-3); } } /* En colores forzados el relleno desaparece y el chip botón dejaba de parecer botón: borde de sistema, y el encendido con el par Highlight (PCB-240). */ @media (forced-colors: active) { .dz-chip--accion { border: 1px solid ButtonText; } .dz-chip--accion[aria-pressed="true"] { background: Highlight; color: HighlightText; border-color: HighlightText; forced-color-adjust: none; } } } /* Contador: inversión de tinta, nunca color. Cuando no hay pendientes el elemento no existe. */ @layer dz.componentes { .dz-contador { display: inline-flex; align-items: center; justify-content: center; min-width: var(--contador); height: var(--contador); padding: 0 var(--s-1); border-radius: var(--r-pill); background: var(--text); color: var(--bg); font-size: var(--fs-1); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; flex: none; } .dz-contador--suave { background: var(--surface-2); color: var(--text-2); font-weight: 500; } } /* Endoso de la marca madre, «powered by» y su logo oficial en una línea. El logo mide 16 px de alto (--ico-1), que es el mínimo, y su ancho sale de la proporción de 6 a 1 del dibujo (alto fijo, ancho auto). La tinta es solo --tinta-firma: positivo sobre claro y negativo sobre oscuro, sin tercer color. El área de respeto es el ancho de una «Z» del logo (32,1 de sus 39 unidades de alto, o sea .82 del alto) a cada lado, arriba y abajo: va como relleno de la pieza y también separa el texto del logo. Colores forzados: el logo toma el color del texto del sistema. */ @layer dz.componentes { .dz-endoso { --dz-endoso-alto: var(--ico-1); --dz-endoso-respeto: calc(var(--dz-endoso-alto) * .82); display: inline-flex; align-items: center; gap: var(--dz-endoso-respeto); padding: var(--dz-endoso-respeto); color: var(--tinta-firma); font-size: var(--fs-1); line-height: 1; white-space: nowrap; } .dz-endoso__texto { color: var(--text-2); } .dz-endoso__logo { display: block; flex: none; width: auto; height: var(--dz-endoso-alto); } /* La barra (2.3.0): una franja fija al pie de la ventana, centrada, traslúcida y con el fondo desenfocado detrás. El área de respeto sigue siendo la de una «Z». El vidrio es la copia del fondo animado para WebKit: va detrás del texto y del logo y no recibe el puntero. */ .dz-endoso--barra { --dz-endoso-respeto: var(--s-3); position: fixed; inset: auto 0 0; z-index: var(--z-base); justify-content: center; box-sizing: border-box; height: calc(var(--h-mov) + var(--s-1) + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom); overflow: hidden; border-top: 1px solid var(--border); background: color-mix(in oklch, var(--text) 1.2%, transparent); -webkit-backdrop-filter: blur(var(--velo-blur)); backdrop-filter: blur(var(--velo-blur)); pointer-events: none; } .dz-endoso--barra .dz-endoso__texto { text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } .dz-endoso__vidrio { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; filter: blur(var(--s-3)) saturate(130%); transform: scale(1.04); pointer-events: none; } } /* Enlace de texto: se puede poner sobre cualquier que ya esté en una frase (es en línea y no cambia el renglón). Color de acento sin subrayar, ni en reposo ni en hover; en hover cambia al tono hover junto con su icono. Flecha horizontal a la derecha si lleva a otra pantalla; la diagonal se reserva para abrir fuera del producto. */ @layer dz.componentes { /* En línea: parte renglón con la frase y no cambia su altura. La flecha es un icono en línea pegado a la última palabra. */ .dz-enlace { display: inline; color: var(--accent-text); font-weight: 500; text-decoration: none; cursor: pointer; transition: color var(--dur-1) var(--ease-out); } /* Suelto (al pie de una tarjeta, de un aviso o en una celda, fuera de una frase): mide --h-mini con puntero fino y --h-tactil con el dedo; dentro de una frase WCAG 2.5.8 lo exime. */ .dz-enlace--suelto { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--h-mini); } @media (pointer: coarse) { .dz-enlace--suelto { min-height: var(--h-tactil); } } .dz-enlace svg { display: inline; width: var(--ico-1); height: var(--ico-1); vertical-align: -.15em; } @media (hover: hover) { .dz-enlace:hover { color: var(--link-hover); text-decoration: none; } } .dz-enlace[data-ds-estado="hover"] { color: var(--link-hover); } .dz-enlace:focus-visible, .dz-enlace[data-ds-estado="foco"] { outline: none; box-shadow: var(--ring); border-radius: var(--r-1); } } /* Esqueleto: conserva la forma de lo que viene. Forma y ancho son modificadores discretos, nunca atributos de estilo en línea. Con movimiento reducido queda quieto. */ @layer dz.componentes { .dz-esqueleto { display: block; width: 100%; border-radius: var(--r-control); position: relative; overflow: hidden; background: var(--surface-2); } /* El brillo es una capa que se desliza con transform (propiedad de composición, no de pintado) en un ciclo de 1,44 s (de 1 a 1,6 s). */ .dz-esqueleto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, var(--surface-3) 50%, transparent 100%); transform: translateX(-100%); animation: dzBrilla calc(var(--dur-respira) * 1.6) linear infinite; } .dz-esqueleto--linea { height: var(--s-3); } .dz-esqueleto--titulo { height: var(--s-5); } .dz-esqueleto--bloque { height: calc(var(--h-fila) * 3); } .dz-esqueleto--circulo { width: var(--avatar); height: var(--avatar); border-radius: 50%; flex: none; } .dz-esqueleto--tres-cuartos { width: 75%; } .dz-esqueleto--mitad { width: 50%; } .dz-esqueleto--cuarto { width: 25%; } @keyframes dzBrilla { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .dz-esqueleto::after { animation: none; display: none; } } } /* Ilustración de estado: SVG de línea, lienzo de 96, trazo 3.5 redondo en currentColor (tinta --text-2), un tono más suave para lo accesorio y el acento (--accent-control) como único color. Sin relleno, degradado ni sombra. El tamaño es un modificador discreto; el dibujo escala entero. */ @layer dz.componentes { .dz-ilustracion { display: block; flex: none; width: var(--ilus-tam); height: var(--ilus-tam); color: var(--text-2); } .dz-ilustracion--chico { width: var(--ilus-tam-chico); height: var(--ilus-tam-chico); } .dz-ilustracion--grande { width: var(--ilus-tam-grande); height: var(--ilus-tam-grande); } .dz-ilustracion__acento { stroke: var(--accent-control); } .dz-ilustracion__tenue { stroke: var(--text-muted); } /* Línea discontinua delgada (Alex, 23-oct-2026): la mitad del trazo, rayas cortas de punta recta; con punta redonda y trazo 3.5 se leían como cuentas gruesas. */ .dz-ilustracion__discontinuo { stroke-width: 1.75; stroke-linecap: butt; stroke-dasharray: 4 3; } } /* Imagen: el marco reserva su relación de aspecto antes de que llegue el archivo (sin salto de diseño). Cubre el marco por omisión; --contener la muestra entera. Cargando: fondo de superficie. Error: bloque centrado con icono y aviso. Lo dinámico (--cargando, --error) son clases que pone montarImagen. */ @layer dz.componentes { .dz-imagen { display: block; margin: 0; min-width: 0; } .dz-imagen__marco { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--surface-2); } .dz-imagen--1x1 .dz-imagen__marco { aspect-ratio: 1 / 1; } .dz-imagen--4x3 .dz-imagen__marco { aspect-ratio: 4 / 3; } .dz-imagen--3x2 .dz-imagen__marco { aspect-ratio: 3 / 2; } .dz-imagen--16x9 .dz-imagen__marco { aspect-ratio: 16 / 9; } .dz-imagen--21x9 .dz-imagen__marco { aspect-ratio: 21 / 9; } .dz-imagen--3x4 .dz-imagen__marco { aspect-ratio: 3 / 4; } .dz-imagen__img { display: block; width: 100%; height: 100%; object-fit: cover; } .dz-imagen--contener .dz-imagen__img { object-fit: contain; } .dz-imagen--cargando .dz-imagen__img { opacity: 0; } .dz-imagen--error .dz-imagen__marco { border-style: dashed; border-color: var(--border-control); } .dz-imagen__img { transition: opacity var(--dur-2) var(--ease-out); } .dz-imagen__error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-3); text-align: center; color: var(--text-2); font-size: var(--fs-2); line-height: var(--lh-2); } .dz-imagen__icono { width: var(--ico-4); height: var(--ico-4); } .dz-imagen__aviso { text-wrap: balance; } /* Rótulo dentro de la imagen: capa de contraste a negro al 60 % detrás de todo el texto (sobre blanco puro deja 5,7:1, PCB-88 y PCB-1897) y desvanecida solo en el relleno de arriba, para que la foto siga leyéndose. El degradado no puede aclararse detrás de la primera línea: el 24-oct dejaba el título de dos líneas a 1,8:1 sobre una foto blanca. Igual en claro y en oscuro: va sobre la foto, no sobre la página. */ .dz-imagen__rotulo { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-8) var(--s-4) var(--s-4); background: linear-gradient(to top, var(--c-negro-60) 0, var(--c-negro-60) calc(100% - var(--s-8)), transparent 100%); color: var(--c-gris-0); pointer-events: none; } .dz-imagen__titulo { font-size: var(--fs-4); font-weight: 500; line-height: var(--lh-2); text-wrap: balance; } .dz-imagen__detalle { font-size: var(--fs-2); line-height: var(--lh-2); } .dz-imagen__leyenda { margin-top: var(--s-2); font-size: var(--fs-2); line-height: var(--lh-2); color: var(--text-2); } } /* Interruptor: booleano de efecto inmediato, monocromático (el encendido es --switch-on; el verde queda para éxito). El nativo es el control visible y se dibuja a sí mismo: appearance none, la pista es su fondo y borde, la perilla es su ::after. No hay pista hermana ni input oculto, así que la clase dz-interruptor__control se puede poner sobre el que un producto ya tiene (con o sin el contenedor dz-interruptor) y su comportamiento no cambia. El anillo de foco va en el contorno de la pista, que es el input. Área de 24 de alto con puntero fino y 44 con el dedo. */ @layer dz.componentes { .dz-interruptor { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--s-6); font-size: var(--fs-2); color: var(--text); cursor: pointer; } .dz-interruptor__control { -webkit-appearance: none; appearance: none; position: relative; box-sizing: border-box; vertical-align: middle; width: calc(var(--s-7) + 2px); height: var(--contador); margin: 0; padding: 0; border-radius: var(--r-pill); background: var(--surface-3); border: 1px solid var(--border-control); outline: none; cursor: pointer; transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); } /* En el contenedor del DS la pista no se encoge (LeadZ lo fija por contexto con .lz-cta__sw .zswitch). */ .dz-interruptor > .dz-interruptor__control { flex: none; } /* Área táctil de la pista (la que tiene LeadZ): 3 px arriba y abajo y 4 a los lados con puntero fino; 44 de alto con el dedo. */ .dz-interruptor__control::before { content: ""; position: absolute; inset: -3px calc(var(--s-1) * -1); box-sizing: content-box; } @media (pointer: coarse) { .dz-interruptor__control::before { inset: calc(-1 * ((var(--h-tactil) - var(--contador)) / 2 + 1px)) calc(var(--s-1) * -1); } } .dz-interruptor__control::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(var(--contador) - var(--s-1) - 2px); height: calc(var(--contador) - var(--s-1) - 2px); border-radius: 50%; background: var(--surface); box-sizing: content-box; box-shadow: 0 0 0 1px var(--border-control); transition: transform var(--dur-1) var(--ease-out); } .dz-interruptor__control:active::after { width: calc(var(--contador) - 2px); } .dz-interruptor__control:checked { background: var(--switch-on); border-color: var(--switch-on); } .dz-interruptor__control:checked::after { transform: translateX(calc(var(--s-3) + 2px)); background: var(--surface); box-shadow: none; } @media (hover: hover) { .dz-interruptor__control:hover:not(:disabled):not(:checked) { border-color: var(--text-muted); } } .dz-interruptor[data-ds-estado="hover"] .dz-interruptor__control:not(:checked) { border-color: var(--text-muted); } .dz-interruptor__control:focus-visible, .dz-interruptor[data-ds-estado="foco"] .dz-interruptor__control { outline: none; box-shadow: var(--ring); } .dz-interruptor__control:disabled, .dz-interruptor__control:disabled ~ .dz-interruptor__texto { opacity: var(--op-off); } .dz-interruptor__control:disabled { cursor: not-allowed; } .dz-interruptor:has(:disabled) { cursor: not-allowed; } .dz-interruptor__texto { display: flex; flex-direction: column; gap: var(--s-1); } .dz-interruptor__ayuda { font-size: var(--fs-1); color: var(--text-muted); } @media (pointer: coarse) { .dz-interruptor { min-height: var(--h-tactil); } } /* Alto contraste de Windows: el estado vive en el borde y en colores del sistema. */ @media (forced-colors: active) { .dz-interruptor__control { border-color: ButtonText; } .dz-interruptor__control::after { background: ButtonText; border: 1px solid ButtonText; box-shadow: none; } .dz-interruptor__control:checked { forced-color-adjust: none; background: Highlight; border-color: Highlight; } .dz-interruptor__control:checked::after { background: HighlightText; border-color: HighlightText; } } } /* Kbd: una tecla o un atajo en una caja chica (el «/» del buscador de filtros, «⌘ S»). Las teclas de un atajo van unidas por un «+». */ @layer dz.componentes { .dz-kbd { display: inline-grid; place-items: center; min-width: var(--contador); height: var(--contador); padding: 0 var(--s-1); font-family: var(--font); font-size: var(--fs-1); line-height: 1; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-1); white-space: nowrap; } .dz-kbd svg { display: block; width: var(--ico-1); height: var(--ico-1); } .dz-kbd__grupo { display: inline-flex; align-items: center; gap: 2px; flex: none; } .dz-kbd__voz { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .dz-kbd__mas { font-size: var(--fs-1); color: var(--text-muted); } @media (forced-colors: active) { .dz-kbd { border-color: ButtonText; background: ButtonFace; color: ButtonText; } } } /* Marca de IA: el chip «Generado por IA» (el del DS, con el icono sparkles) y, si una persona revisó, quién y qué hizo, en texto atenuado. Sin estados de carga ni de error: es texto. Envuelve en el segundo renglón si no cabe y el chip conserva su altura. */ @layer dz.componentes { .dz-marca-ia { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--fs-1); color: var(--text-muted); } .dz-marca-ia__quien { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } } /* Motivo: la capa decorativa de marca. Rayas diagonales de una línea que viven DETRÁS del contenido, nunca sobre una tarjeta. Solo CSS: sin imagen, sin JS, sin movimiento (queda quieto, así que cumple WCAG 2.2.2 y el movimiento reducido sin más). El contenedor que lo aloja es position: relative con isolation: isolate, para que la capa quede detrás de su contenido y no detrás de la página. Con colores forzados y al imprimir desaparece. */ @layer dz.componentes { .dz-motivo { position: absolute; inset: 0; z-index: calc(var(--z-base) * -1); overflow: hidden; pointer-events: none; } .dz-motivo--rayas { background-image: repeating-linear-gradient( var(--motivo-angulo), var(--motivo-linea) 0, var(--motivo-linea) var(--motivo-grosor), transparent var(--motivo-grosor), transparent var(--motivo-paso) ); } /* Nunca sobre tarjetas (guía de marca): dentro de una tarjeta el motivo no se pinta, aunque alguien lo ponga ahí. */ .dz-tarjeta .dz-motivo { display: none; } @media (forced-colors: active) { .dz-motivo { display: none; } } @media print { .dz-motivo { display: none; } } } /* Pila: apila sus hijos con un espacio de la escala (--s-1 a --s-8, 4 por omisión). Columna por omisión, con los hijos a todo el ancho; dz-pila--fila los pone en una fila que parte renglón. Sin márgenes en los hijos: el espacio es el gap de la pila, así que un hijo que se quita no deja un hueco y uno que se agrega no pide margen. */ @layer dz.componentes { .dz-pila { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; } .dz-pila--1 { gap: var(--s-1); } .dz-pila--2 { gap: var(--s-2); } .dz-pila--3 { gap: var(--s-3); } .dz-pila--5 { gap: var(--s-5); } .dz-pila--6 { gap: var(--s-6); } .dz-pila--7 { gap: var(--s-7); } .dz-pila--8 { gap: var(--s-8); } .dz-pila--fila { flex-direction: row; flex-wrap: wrap; align-items: center; } .dz-pila--inicio { align-items: flex-start; } .dz-pila--centro { align-items: center; } .dz-pila--fin { align-items: flex-end; } .dz-pila > * { min-width: 0; } /* Lo que mide lo que dice (un botón, una casilla, un chip) no se estira a todo el ancho de la columna; los campos, tarjetas y tablas sí. */ .dz-pila:not(.dz-pila--fila):not(.dz-pila--inicio):not(.dz-pila--centro):not(.dz-pila--fin) > :is(.dz-boton, .dz-casilla, .dz-interruptor, .dz-control-segmentado, .dz-chip, .dz-menu) { align-self: flex-start; } } /* Barra de progreso: pista de --surface-3 y relleno en tinta de control; el tono (ok, aviso, error) cambia el relleno (el aviso usa el ámbar de texto, que pasa 3:1 contra la pista) y añade un renglón con icono y texto, nunca solo color. Tres tamaños de pista (4, 8 y 12 px por la escala). Indeterminada: una franja que corre con transform; con movimiento reducido se queda quieta, ocupa toda la pista y baja de intensidad, y el texto «Cargando» sigue a la vista. Documentado: el progreso suelto de velo-entrada y de zona-carga puede adoptar esta pieza. */ @layer dz.componentes { .dz-progreso { --progreso-relleno: var(--accent-control); --progreso-alto: var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); width: 100%; min-width: 0; color: var(--text-2); font-size: var(--fs-2); line-height: var(--lh-2); } .dz-progreso--chico { --progreso-alto: var(--s-1); } .dz-progreso--grande { --progreso-alto: var(--s-3); } .dz-progreso--ok { --progreso-relleno: var(--ok); } .dz-progreso--aviso { --progreso-relleno: var(--warn-text); } .dz-progreso--error { --progreso-relleno: var(--bad); } .dz-progreso__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); min-width: 0; } .dz-progreso__etiqueta { min-width: 0; font-weight: 500; color: var(--text); } .dz-progreso__valor { flex: none; font-variant-numeric: tabular-nums; color: var(--text-2); } .dz-progreso--indeterminada .dz-progreso__valor { color: var(--text-muted); } .dz-progreso__pista { position: relative; display: block; height: var(--progreso-alto); border-radius: var(--r-pill); overflow: hidden; background: var(--surface-3); } .dz-progreso__barra { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 100%; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--progreso-relleno); overflow: hidden; } .dz-progreso__barra::-webkit-progress-bar { background: transparent; border-radius: var(--r-pill); } .dz-progreso__barra::-webkit-progress-value { background: var(--progreso-relleno); border-radius: var(--r-pill); transition: width var(--dur-3) var(--ease-out); } .dz-progreso__barra::-moz-progress-bar { background: var(--progreso-relleno); border-radius: var(--r-pill); } .dz-progreso__ir { position: absolute; inset-block: 0; inset-inline-start: 0; width: 40%; border-radius: var(--r-pill); background: var(--progreso-relleno); transform: translateX(-100%); animation: dzProgresoCorre calc(var(--dur-respira) * 1.6) var(--ease-velo) infinite; } @keyframes dzProgresoCorre { to { transform: translateX(250%); } } .dz-progreso__estado { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-1); font-weight: 500; color: var(--text-2); } .dz-progreso__icono { flex: none; width: var(--ico-1); height: var(--ico-1); } .dz-progreso--ok .dz-progreso__estado { color: var(--ok-text); } .dz-progreso--aviso .dz-progreso__estado { color: var(--warn-text); } .dz-progreso--error .dz-progreso__estado { color: var(--bad-text); } /* Colores forzados: pista y relleno son fondos y el modo los anula; el contorno de la pista y el relleno en colores del sistema los devuelven. */ @media (forced-colors: active) { .dz-progreso__pista { border: 1px solid CanvasText; } .dz-progreso__barra::-webkit-progress-value, .dz-progreso__ir { background: Highlight; forced-color-adjust: none; } .dz-progreso__barra::-moz-progress-bar { background: Highlight; forced-color-adjust: none; } } @media (prefers-reduced-motion: reduce) { .dz-progreso__barra::-webkit-progress-value { transition: none; } .dz-progreso__ir { animation: none; transform: none; width: 100%; opacity: .4; } } } /* Rótulo de sección: mono de 12 px en mayúsculas con aire entre letras. Tinta apagada por omisión; tinta y acento suben el tono. */ @layer dz.componentes { .dz-rotulo-seccion { margin: 0; font-family: var(--mono-code); font-size: var(--fs-1); font-weight: 500; line-height: var(--lh-2); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .dz-rotulo-seccion--tinta { color: var(--text); } .dz-rotulo-seccion--acento { color: var(--accent-text); } } /* Tendencia (átomo): la forma de una serie corta junto a una cifra. Sin texto dentro, así que no necesita escalar: mide lo mismo a 280 que a 1280. Línea en --dato-2 y punto final en --dato-1 con un aro de superficie; la referencia (meta, umbral, periodo anterior) es un punteado en --dato-umbral (3:1 contra la superficie). */ @layer dz.componentes { .dz-tendencia { display: block; width: var(--w-tendencia); max-width: 100%; height: var(--h-tendencia); overflow: visible; } .dz-tendencia__linea { fill: none; stroke: var(--dato-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } .dz-tendencia__referencia { fill: none; stroke: var(--dato-umbral); stroke-width: 1; stroke-dasharray: 2 3; } .dz-tendencia__punto { fill: var(--dato-1); stroke: var(--surface); stroke-width: 2; } /* En una celda de tabla (DCB-69): a la altura de la fila, en línea con el número. */ .dz-tabla__celda .dz-tendencia { display: inline-block; width: calc(var(--s-8) * 2); height: var(--s-5); vertical-align: middle; } @media (forced-colors: active) { .dz-tendencia__linea, .dz-tendencia__referencia { stroke: CanvasText; } .dz-tendencia__punto { fill: CanvasText; stroke: Canvas; } } } /* Acordeón: secciones en una caja con hairline entre una y otra. La cabecera mide --h-tactil siempre; el chevron gira 90 grados al abrir y, con movimiento reducido, no gira. El resumen de la sección cerrada se va al abrir. El foco es un anillo hacia adentro en el contorno de la cabecera, que sigue el radio de la caja. */ @layer dz.componentes { .dz-acordeon { interpolate-size: allow-keywords; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); } .dz-acordeon--plano { border-color: transparent; background: transparent; } .dz-acordeon__item + .dz-acordeon__item { border-top: 1px solid var(--border); } .dz-acordeon--plano .dz-acordeon__item + .dz-acordeon__item { border-top-color: var(--hairline); } .dz-acordeon__item:first-child > .dz-acordeon__cabecera { border-start-start-radius: calc(var(--r-card) - 1px); border-start-end-radius: calc(var(--r-card) - 1px); } .dz-acordeon__item:last-child:not([open]) > .dz-acordeon__cabecera { border-end-start-radius: calc(var(--r-card) - 1px); border-end-end-radius: calc(var(--r-card) - 1px); } .dz-acordeon__cabecera { list-style: none; display: flex; align-items: center; gap: var(--s-3); min-block-size: var(--dz-dens-fila, var(--h-tactil)); padding: 0 var(--s-4); cursor: pointer; transition: background var(--dur-1) var(--ease-out); } .dz-acordeon__cabecera::-webkit-details-marker { display: none; } @media (hover: hover) { .dz-acordeon__cabecera:hover { background: var(--surface-2); } } .dz-acordeon__cabecera[data-ds-estado="hover"] { background: var(--surface-2); } .dz-acordeon__cabecera:focus-visible, .dz-acordeon__cabecera[data-ds-estado="foco"] { outline: none; box-shadow: var(--ring-inset); } .dz-acordeon__titulo { min-inline-size: 0; font-size: var(--fs-3); font-weight: 600; color: var(--text-2); } .dz-acordeon__item[open] > .dz-acordeon__cabecera .dz-acordeon__titulo { color: var(--text); } .dz-acordeon__resumen { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: end; font-size: var(--fs-2); color: var(--text-muted); } .dz-acordeon__item[open] .dz-acordeon__resumen { display: none; } .dz-acordeon__chevron { flex: none; margin-inline-start: auto; color: var(--text-muted); transition: transform var(--dur-2) var(--ease-out); } /* gira lo que tarda el panel que acompaña (::details-content, --dur-2) */ .dz-acordeon__item[open] > .dz-acordeon__cabecera .dz-acordeon__chevron { transform: rotate(90deg); } .dz-acordeon__cuerpo { padding: var(--s-3) var(--s-4) var(--s-4); border-top: 1px solid var(--hairline); } .dz-acordeon--plano .dz-acordeon__cuerpo { padding-inline: 0; border-top-color: transparent; } @supports selector(::details-content) { .dz-acordeon__item::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-2) var(--ease-out), content-visibility var(--dur-2) allow-discrete; } .dz-acordeon__item[open]::details-content { block-size: auto; } } @media (prefers-reduced-motion: reduce) { .dz-acordeon__chevron { transition: none; } .dz-acordeon__item::details-content { transition: none; } } } /* Adeudo y cobro, neutra (P9): monto en MXN, fecha de vencimiento, estado y acción. Sin marcas de tarjeta ni de pasarela. El estado va con icono y palabra, nunca solo con color. Tarjeta por omisión; --barra es la franja de una línea del aviso de adeudo (mide lo mismo que la de LeadZ salvo lo escrito en la prueba estilos-contra-leadz). La posición (sticky, arriba de la pantalla) la pone el producto. */ @layer dz.componentes { .dz-adeudo-cobro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-5); padding: var(--s-4) var(--s-5); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); color: var(--text); } .dz-adeudo-cobro--vencido { border-color: var(--bad); } .dz-adeudo-cobro__cuerpo { display: grid; gap: var(--s-1); min-width: 0; } .dz-adeudo-cobro__concepto { margin: 0; font-size: var(--fs-2); line-height: var(--lh-2); color: var(--text-2); } .dz-adeudo-cobro__monto { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin: 0; } .dz-adeudo-cobro__cifra { font-size: var(--fs-7); font-weight: 600; line-height: var(--lh-1); font-variant-numeric: tabular-nums; } .dz-adeudo-cobro__moneda { font-size: var(--fs-2); font-weight: 500; color: var(--text-2); } .dz-adeudo-cobro__fecha { margin: 0; font-size: var(--fs-3); line-height: var(--lh-3); color: var(--text-2); } .dz-adeudo-cobro__lado { display: grid; justify-items: start; gap: var(--s-3); } .dz-adeudo-cobro__estado { display: inline-flex; align-items: center; gap: var(--s-1); height: var(--dz-dens-chip, var(--h-chip)); padding: 0 var(--s-2); border: 1px solid var(--border-control); border-radius: var(--r-chip); font-size: var(--fs-1); font-weight: 500; color: var(--text-2); } .dz-adeudo-cobro--pendiente .dz-adeudo-cobro__estado { border-color: var(--border-control); background: var(--surface-2); } .dz-adeudo-cobro--por-vencer .dz-adeudo-cobro__estado { border-color: var(--warn); background: var(--warn-soft); color: var(--warn-text); } .dz-adeudo-cobro--vencido .dz-adeudo-cobro__estado { border-color: var(--bad); background: var(--bad-soft); color: var(--bad-text); } .dz-adeudo-cobro--pagado .dz-adeudo-cobro__estado { border-color: var(--ok); background: var(--ok-soft); color: var(--ok-text); } .dz-adeudo-cobro__mensaje { overflow-wrap: anywhere; } .dz-adeudo-cobro__accion { display: flex; flex-wrap: wrap; gap: var(--s-2); } /* Franja de una línea: el mensaje y una salida. Mismos valores que #lz-adeudo salvo el relleno vertical (8, de la escala) y el tamaño de letra (14, el de la escala). */ .dz-adeudo-cobro--barra { display: block; flex-wrap: nowrap; align-items: normal; justify-content: normal; gap: 0; box-sizing: border-box; min-height: var(--dz-dens-control, var(--h-control)); padding: var(--s-2) var(--s-4); border: 0; border-bottom: 1px solid var(--warn); border-radius: 0; background: var(--warn-soft); color: var(--warn-text); font-family: var(--font); font-size: var(--fs-2); font-weight: 500; line-height: var(--lh-2); text-align: center; } .dz-adeudo-cobro--barra.dz-adeudo-cobro--por-vencer { font-weight: 600; border-bottom-width: 2px; } .dz-adeudo-cobro--barra.dz-adeudo-cobro--vencido { font-weight: 600; border-bottom: 2px solid var(--bad); background: var(--bad-soft); color: var(--bad-text); } .dz-adeudo-cobro--barra.dz-adeudo-cobro--pagado { border-bottom-color: var(--ok); background: var(--ok-soft); color: var(--ok-text); } .dz-adeudo-cobro--barra .dz-enlace { margin-left: var(--s-3); font-weight: 600; } .dz-adeudo-cobro--barra.dz-adeudo-cobro--vencido .dz-enlace { color: var(--bad-text); } } /* Aviso dentro de una tarjeta o modal (dirección «Regleta», elegida por Alex el 23-oct-2026 entre cuatro de Fable): fondo de segunda superficie sin borde, regleta de tono al borde de inicio e icono del tono. El tono se dice con regleta, icono y texto (nunca solo color); el cuerpo es neutro y el enlace conserva su acento en todos los tonos. Las marcas usan los tokens *-text, que pasan 3:1 en claro y oscuro; informativo toma el gris de control (--accent-control); --brand no pinta controles ni avisos. Nunca borde de tono (tarjeta dentro de tarjeta) ni píldora. --en-linea es el aviso de formulario: sin caja, icono y mensaje en el color del tono, para ir bajo un campo o en una fila de ajustes. Un .dz-aviso con texto suelto (sin las partes de la pieza) se queda como el .zaviso de LeadZ: borde de 1 px del tono y texto del tono. */ @layer dz.componentes { .dz-aviso { --aviso-marca: var(--text-muted); padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-control); background: transparent; font-size: var(--fs-2); line-height: var(--lh-3); } .dz-aviso:not(:has(> .dz-aviso__cuerpo)).dz-aviso--informativo { border-color: var(--accent); color: var(--accent-text); } .dz-aviso:not(:has(> .dz-aviso__cuerpo)).dz-aviso--advertencia { border-color: var(--warn); color: var(--warn-text); } .dz-aviso:not(:has(> .dz-aviso__cuerpo)).dz-aviso--error { border-color: var(--bad-soft); background: var(--bad-soft); color: var(--bad-text); } .dz-aviso:not(:has(> .dz-aviso__cuerpo)).dz-aviso--ok { border-color: var(--ok); color: var(--ok-text); } /* La pieza armada (icono y cuerpo): segunda superficie, regleta e icono del tono. */ .dz-aviso:has(> .dz-aviso__cuerpo) { position: relative; display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 0; background: var(--surface-2); color: var(--text-2); overflow: clip; } /* Regleta: 4 px (--s-1) al borde de inicio, recortada por el radio de la pieza. */ .dz-aviso:has(> .dz-aviso__cuerpo)::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--s-1); background: var(--aviso-marca); } /* El icono mide una línea de alto para centrarse en el primer renglón, con una línea o con título y texto. */ .dz-aviso__marca { display: inline-grid; place-items: center; flex: none; width: var(--ico-2); height: calc(var(--lh-3) * 1em); color: var(--aviso-marca); } .dz-aviso__icono { width: var(--ico-2); height: var(--ico-2); } .dz-aviso__cuerpo { display: flex; flex: 1; flex-direction: column; gap: var(--s-1); min-width: 0; } .dz-aviso__titulo { margin: 0; font-weight: 600; color: var(--text); } .dz-aviso__texto { margin: 0; } /* Sin título, el texto es el mensaje y va en el color principal. */ .dz-aviso__texto:first-child { color: var(--text); } /* Pie: los botones (Reintentar como primario chico en un error) y el enlace con flecha. Un botón secundario se levanta con la superficie base para no perderse en la segunda superficie. */ .dz-aviso__pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-block-start: var(--s-1); } .dz-aviso__pie .dz-boton:not(.dz-boton--primario) { background: var(--surface); } .dz-aviso--informativo { --aviso-marca: var(--accent-control); } .dz-aviso--advertencia { --aviso-marca: var(--warn-text); } .dz-aviso--error { --aviso-marca: var(--bad-text); } .dz-aviso--ok { --aviso-marca: var(--ok-text); } /* En línea: sin caja ni regleta; el título y el mensaje toman el tono, el texto largo queda neutro. */ .dz-aviso--en-linea:has(> .dz-aviso__cuerpo) { gap: var(--s-2); padding: 0; border-radius: 0; background: transparent; overflow: visible; } .dz-aviso--en-linea:has(> .dz-aviso__cuerpo)::before { content: none; } .dz-aviso--en-linea .dz-aviso__titulo, .dz-aviso--en-linea .dz-aviso__texto:first-child { color: var(--aviso-marca); } .dz-aviso--en-linea .dz-aviso__pie .dz-boton:not(.dz-boton--primario) { background: transparent; } /* El botón fantasma se descuelga su propio relleno para que su glifo quede en la columna del texto. */ .dz-aviso--en-linea .dz-aviso__pie .dz-boton--fantasma { margin-inline-start: calc(var(--s-3) * -1); } /* Colores forzados: el fondo desaparece, así que la forma la da el borde y la regleta pasa a ser un borde grueso. */ @media (forced-colors: active) { .dz-aviso:has(> .dz-aviso__cuerpo) { border: 1px solid CanvasText; border-inline-start-width: var(--s-1); } .dz-aviso:has(> .dz-aviso__cuerpo)::before { display: none; } .dz-aviso--en-linea:has(> .dz-aviso__cuerpo) { border: 0; } } } /* Aviso de borrador: un aviso informativo del DS (icono de historial, regleta de acento) con «Recuperar» y «Descartar» en su pie. Sale con hidden y el comportamiento lo muestra solo cuando hay un borrador distinto de lo que el formulario trae. Va arriba del formulario, con el aire de un bloque; la fecha y hora van en cifras tabulares. */ @layer dz.componentes { .dz-aviso-borrador { margin-block-end: var(--s-4); } .dz-aviso-borrador__fecha { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); } } /* Barra de lote: superficie flotante con hairline y sombra, pegada arriba de la tabla (sticky) mientras hay filas seleccionadas. Ocupa su sitio siempre (sin selección, invisible): si solo ocupara flujo al aparecer empujaría la tabla bajo el puntero. La cuenta lleva la cifra tabular para que no baile al marcar. La acción destructiva es el botón de peligro y nombra la cuenta. A 560 px o menos pasa a barra fija abajo (de borde a borde, con el área segura del teléfono) y sin selección no ocupa nada, con todos los objetivos de 44 px; dentro del cascarón se apoya sobre su barra inferior. Lo que queda bajo una barra fija se resuelve en el contenedor que desplaza: el comportamiento lo marca con data-dz-reserva y le pone --dz-barra-lote-alto (el alto medido de la barra): un espacio al final del contenido y el scroll-padding, para que ni el final de la página ni el foco queden bajo la barra. --dz-barra-lote-arriba separa la barra del borde superior si hay una cabecera pegada. */ @layer dz.componentes { .dz-barra-lote { position: sticky; top: var(--dz-barra-lote-arriba, 0); z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-md); color: var(--text); font-size: var(--fs-3); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s; } /* Entra y sale en vez de aparecer de golpe (ACB-8, ACB-12): en escritorio se funde en su sitio, que ya está reservado; en teléfono sube y baja desde el borde (abajo). Sale más corto que entra y con la curva de lo que se va. */ .dz-barra-lote[data-dz-vacia] { visibility: hidden; opacity: 0; transition: opacity var(--dur-1) var(--ease-sale), transform var(--dur-1) var(--ease-sale), visibility 0s linear var(--dur-1); } /* El espécimen vacío no reserva el hueco de la barra: la ficha enseña la barra cuando hay selección y no un vacío sin contenido. */ .dz-barra-lote[data-dz-vacia][data-dz-muestra] { display: none; } .dz-barra-lote__cuenta { margin: 0; font-weight: 500; white-space: nowrap; } .dz-barra-lote__cifra { font-variant-numeric: tabular-nums; } .dz-barra-lote__unidad { font-weight: 400; color: var(--text-2); } /* Dos pasos para «todos» (PCB-673): la barra ofrece seleccionar lo cargado y después todo lo que cumple el filtro. */ .dz-barra-lote__todo { margin: 0; font-size: var(--fs-2); color: var(--text-2); } .dz-barra-lote__todo[hidden] { display: none; } .dz-barra-lote__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); } .dz-barra-lote__quitar { margin-inline-start: auto; } @media (max-width: 560px) { .dz-barra-lote { position: fixed; inset-inline: 0; top: auto; bottom: env(safe-area-inset-bottom); z-index: var(--z-drawer); margin: 0; padding: var(--s-2) var(--s-4); border-width: 1px 0 0; border-radius: var(--r-card) var(--r-card) 0 0; } :root:has(.dz-cascaron:not(.dz-cascaron--incrustado)) .dz-barra-lote { bottom: calc(var(--cascaron-bar) + env(safe-area-inset-bottom)); } .dz-barra-lote { transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), display var(--dur-2) allow-discrete; } .dz-barra-lote[data-dz-vacia] { display: none; transform: translateY(100%); transition: opacity var(--dur-1) var(--ease-sale), transform var(--dur-1) var(--ease-sale), display var(--dur-1) allow-discrete; } @starting-style { .dz-barra-lote:not([data-dz-vacia]):not([data-dz-muestra]) { opacity: 0; transform: translateY(100%); } } [data-dz-reserva] { scroll-padding-bottom: var(--dz-barra-lote-alto, 0); } [data-dz-reserva]::after { content: ""; display: block; height: var(--dz-barra-lote-alto, 0); } /* El espécimen (data-dz-muestra) se queda en flujo: fija, taparía la página que lo enseña. */ .dz-barra-lote[data-dz-muestra] { position: static; border-width: 1px; border-radius: var(--r-card); } .dz-barra-lote .dz-boton { min-height: var(--h-tactil); } .dz-barra-lote__cuenta { display: flex; align-items: center; gap: var(--s-1); min-height: var(--h-tactil); } .dz-barra-lote__acciones { flex: 1 0 100%; order: 3; } .dz-barra-lote__accion { flex: 1 1 auto; justify-content: center; } } /* Con movimiento reducido solo hay fundido: la barra no sube ni baja (ni en escritorio ni en teléfono). */ @media (prefers-reduced-motion: reduce) { .dz-barra-lote[data-dz-vacia] { transform: none; } @starting-style { .dz-barra-lote:not([data-dz-vacia]):not([data-dz-muestra]) { transform: none; } } } } /* Borrador de IA: un texto generado que va a salir. Borde punteado y superficie anidada mientras nadie lo firma; enviado pasa a borde continuo y superficie normal. Distinto del aviso de borrador (que recupera lo que la persona escribió en un formulario). El texto conserva sus saltos de línea. Regenerar cambia el texto por tres esqueletos con su forma y deja «Detener» como única acción. La tarjeta es contenedor: bajo 560 px de ancho propio, la acción principal ocupa el renglón. */ @layer dz.componentes { .dz-borrador-ia { container-type: inline-size; display: grid; gap: var(--s-3); min-width: 0; padding: var(--s-3) var(--s-4); border: 1px dashed var(--border-control); border-radius: var(--r-card); background: var(--surface-anidada); color: var(--text); } .dz-borrador-ia__cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); } .dz-borrador-ia__estado { display: inline-flex; align-items: center; } .dz-borrador-ia__titulo { font-size: var(--fs-2); font-weight: 500; color: var(--text-2); } .dz-borrador-ia__texto { font-size: var(--fs-3); line-height: var(--lh-3); white-space: pre-line; overflow-wrap: anywhere; } .dz-borrador-ia__texto p { margin: 0; } .dz-borrador-ia__texto[hidden], .dz-borrador-ia__edicion[hidden], .dz-borrador-ia__espera[hidden], .dz-borrador-ia__acciones[hidden] { display: none; } .dz-borrador-ia__espera { display: grid; gap: var(--s-2); } .dz-borrador-ia__porque { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: 0; font-size: var(--fs-1); line-height: var(--lh-2); color: var(--text-muted); } .dz-borrador-ia__porque b { font-weight: 500; color: var(--text-2); } .dz-borrador-ia__acciones { display: flex; flex-wrap: wrap; gap: var(--s-2); } .dz-borrador-ia__anuncio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .dz-borrador-ia[data-dz-estado="enviado"] { border-style: solid; border-color: var(--border); background: var(--surface); } .dz-borrador-ia[data-dz-estado="descartado"] .dz-borrador-ia__texto { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--line-2); } @container (max-width: 560px) { .dz-borrador-ia__acciones > .dz-boton--primario { flex: 1 1 100%; justify-content: center; } .dz-borrador-ia__acciones > .dz-boton:not(.dz-boton--primario) { flex: 1 1 auto; justify-content: center; } } @media (forced-colors: active) { .dz-borrador-ia { border-color: CanvasText; } } } /* Cabecera de página: un título de --fs-6 en 500 con la cifra al lado, la línea de apoyo debajo y las acciones a la derecha, en un mismo eje. */ @layer dz.componentes { .dz-cabecera-pagina { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; } .dz-cabecera-pagina__titulos { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; } .dz-cabecera-pagina__fila { display: flex; align-items: baseline; gap: var(--s-3); min-width: 0; } .dz-cabecera-pagina__titulo { margin: 0; font-size: var(--fs-6); font-weight: 500; letter-spacing: -.02em; line-height: var(--lh-1); overflow-wrap: anywhere; } .dz-cabecera-pagina__cifra { font-size: var(--fs-2); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .dz-cabecera-pagina__apoyo { margin: 0; font-size: var(--fs-3); line-height: var(--lh-3); color: var(--text-2); text-wrap: balance; } .dz-cabecera-pagina__acciones { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } } /* Campo de fecha: un campo compuesto con el botón del calendario dentro, a ras del borde derecho (usa: campo, campo-compuesto, popover, calendario). El anillo de foco es uno solo: si el foco cae en el botón, el botón pinta el suyo y el contorno apaga el propio. Con el dedo el botón mide --h-tactil de ancho y su área llega a 44 de alto sin crecer el campo. */ @layer dz.componentes { .dz-campo-fecha__popover { flex: none; margin-right: calc(var(--s-2) * -1); } .dz-campo-fecha__popover .dz-popover__disparador { position: relative; width: var(--dz-dens-control-sm, var(--h-control-sm)); height: var(--dz-dens-control-sm, var(--h-control-sm)); padding: 0; justify-content: center; } .dz-campo-fecha .dz-campo-compuesto--chico .dz-campo-fecha__popover .dz-popover__disparador { width: var(--h-mini); height: var(--h-mini); } .dz-campo-fecha .dz-campo-compuesto:focus-within:has(.dz-popover__disparador:focus-visible) { box-shadow: none; } @media (pointer: coarse) { .dz-campo-fecha__popover .dz-popover__disparador { width: var(--h-tactil); } /* La variante chica no baja de --h-tactil con el dedo: esta regla gana en especificidad a la de 24 px de arriba. */ .dz-campo-fecha .dz-campo-compuesto--chico .dz-campo-fecha__popover .dz-popover__disparador { width: var(--h-tactil); height: var(--h-tactil); } .dz-campo-fecha .dz-campo-compuesto--chico .dz-campo-fecha__popover .dz-popover__disparador::after { inset: 0; } .dz-campo-fecha__popover .dz-popover__disparador::after { content: ""; position: absolute; inset: calc((var(--h-control-sm) - var(--h-tactil)) / 2 - 1px) 0; } } } /* Campo de hora: el combobox del DS con la zona horaria dicha debajo (usa: campo, combobox). La zona va siempre visible: una cita en la agenda es a la hora de la oficina, no a la del aparato de quien la mira. */ @layer dz.componentes { .dz-campo-hora { gap: var(--s-1); } .dz-campo-hora__zona { display: flex; align-items: center; gap: var(--s-1); } .dz-campo-hora__globo { flex: none; } /* El borde de error no se pierde al pasar el puntero: el hover del combobox pinta el borde neutro con más especificidad. */ .dz-campo-hora .dz-combobox--invalido .dz-combobox__campo:hover:not(:focus-within):not(:has(:disabled)) { border-color: var(--bad); } } /* Campo de moneda: un campo compuesto con el «$» delante y la moneda de sufijo (usa: campo, campo-compuesto). Las cifras van tabulares para que los miles y los centavos caigan en columna entre un campo y el de abajo. El «$» se atenúa en reposo y toma la tinta cuando el campo tiene el foco; el foco en sí lo pinta el contorno del campo compuesto, nunca el input. */ @layer dz.componentes { .dz-campo-moneda .dz-campo-compuesto__control { font-variant-numeric: tabular-nums; } .dz-campo-moneda__prefijo { flex: none; font-size: var(--fs-2); color: var(--text-muted); font-variant-numeric: tabular-nums; transition: color var(--dur-1) var(--ease-out); } .dz-campo-moneda .dz-campo-compuesto:focus-within .dz-campo-moneda__prefijo { color: var(--text); } } /* Campo de teléfono: un campo compuesto con la marcación del país delante, fija (+52) o con un selector de país dentro del borde (usa: campo, campo-compuesto). Las cifras van tabulares. El selector no pinta anillo propio: el foco lo lleva el contorno del campo. Con el dedo mide --h-tactil de alto sin crecer el campo. */ @layer dz.componentes { .dz-campo-telefono .dz-campo-compuesto__control { font-variant-numeric: tabular-nums; } .dz-campo-telefono__prefijo { flex: none; font-size: var(--fs-2); color: var(--text-muted); font-variant-numeric: tabular-nums; } .dz-campo-telefono__pais { flex: none; height: 100%; margin: 0 calc(var(--s-1) * -1) 0 calc(var(--s-1) * -1); padding: 0 var(--s-1); border: 0; border-radius: var(--r-1); outline: none; box-shadow: none; background: transparent; color: var(--text-muted); font: inherit; font-size: var(--fs-2); font-variant-numeric: tabular-nums; cursor: pointer; } .dz-campo-telefono__pais:focus, .dz-campo-telefono__pais:focus-visible { outline: none; box-shadow: none; animation: none; } .dz-campo-telefono__pais:disabled { cursor: not-allowed; } @media (pointer: coarse) { .dz-campo-telefono__pais { height: var(--h-tactil); font-size: var(--fs-4); } } } /* Chips de entrada: selección múltiple con etiquetas dentro del borde del campo. La raíz es un campo (etiqueta, ayuda y error son los de campo) y el contenedor con borde es un campo-compuesto: borde, hover, foco en el contorno con :focus-within, inválido y deshabilitado son suyos; el input interno no lleva anillo. Cada elegido es un chip con su botón de quitar. Con filas="1" el campo mide --h-control y lo que no cabe se cuenta en «+N». La lista de sugerencias es el panel del combobox (usa: combobox), con el mismo hairline, sombra y renglones; aquí solo se ancla al campo. Un solo anillo: si el foco está en un chip o en «+N», el chip pinta el suyo y el contenedor apaga el propio. */ @layer dz.componentes { .dz-chips-entrada .dz-campo__etiqueta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); } .dz-chips-entrada__cuenta { font-weight: 400; color: var(--text-muted); font-variant-numeric: tabular-nums; } .dz-chips-entrada__cuenta--tope { color: var(--text-2); font-weight: 500; } .dz-chips-entrada__ancla { position: relative; } .dz-chips-entrada__valores { display: none; } .dz-chips-entrada .dz-campo__error:empty { display: none; } /* El campo crece con los chips: alto mínimo de --h-control (44 en táctil) y el relleno vertical sale de lo que le sobra al chip. */ .dz-chips-entrada .dz-chips-entrada__campo { position: relative; height: auto; min-height: var(--dz-dens-control, var(--h-control)); align-items: flex-start; gap: var(--s-1); padding: calc((var(--h-control) - var(--h-chip) - 2px) / 2) var(--s-2) calc((var(--h-control) - var(--h-chip) - 2px) / 2) var(--s-3); color: var(--text-muted); } .dz-chips-entrada .dz-chips-entrada__campo > .dz-campo-compuesto__icono { height: var(--dz-dens-chip, var(--h-chip)); } .dz-chips-entrada--chico .dz-chips-entrada__campo { min-height: var(--dz-dens-control-sm, var(--h-control-sm)); padding: calc((var(--h-control-sm) - var(--h-chip) - 2px) / 2) var(--s-2); } .dz-chips-entrada--chico .dz-chips-entrada__campo > .dz-campo-compuesto__icono { width: var(--ico-1); height: var(--dz-dens-chip, var(--h-chip)); } .dz-chips-entrada__lista { display: flex; flex-wrap: wrap; align-items: center; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; gap: var(--s-1); } .dz-chips-entrada__celda { flex: 1 1 calc(var(--s-8) * 2); min-width: calc(var(--s-8) * 2); display: flex; align-items: center; height: var(--dz-dens-chip, var(--h-chip)); } .dz-chips-entrada__celda[hidden], .dz-chips-entrada__chip[hidden] { display: none; } .dz-chips-entrada__control { height: var(--dz-dens-chip, var(--h-chip)); font-size: var(--fs-2); color: var(--text); } .dz-chips-entrada__control:read-only { cursor: default; } /* Un solo anillo: con el foco en un chip (flechas) o en «+N», el contenedor apaga el suyo. */ .dz-chips-entrada .dz-chips-entrada__campo:focus-within:has(.dz-chips-entrada__quitar:focus-visible, button.dz-chips-entrada__mas:focus-visible) { box-shadow: none; } /* El chip es un dz-chip (26 px, --surface-2, --text-2, 500). El botón va a ras del borde derecho; en táctil su área crece a 44 por un pseudo-elemento, sin engordar el chip. */ .dz-chips-entrada__chip { gap: var(--s-1); padding-right: 2px; max-width: 100%; } /* Lo puso una regla y no una persona: contorno en vez de relleno. */ .dz-chips-entrada__chip--regla { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); } /* El adorno al frente del chip: avatar o icono. El avatar queda concéntrico con la píldora (2 de aire arriba y abajo) y el chip le cede el relleno izquierdo. */ .dz-chips-entrada__lider { flex: none; display: inline-flex; align-items: center; justify-content: center; } .dz-chips-entrada__lider > svg { inline-size: var(--ico-1); block-size: var(--ico-1); } .dz-chips-entrada__lider .dz-avatar { --dz-avatar-tam: calc(var(--h-chip) - var(--s-1)); font-size: var(--fs-1); letter-spacing: -.02em; } .dz-chips-entrada__chip:has(> .dz-chips-entrada__lider .dz-avatar) { padding-left: calc(var(--s-1) / 2); } .dz-chips-entrada__texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .dz-chips-entrada__quitar { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--h-mini); height: var(--h-mini); padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); } .dz-chips-entrada__x { flex: none; } @media (hover: hover) { .dz-chips-entrada__quitar:hover { background: var(--surface-3); color: var(--text); } } /* El anillo lo pinta el chip entero, no la equis: la equis es chica y el anillo la cercaría. */ .dz-chips-entrada__quitar:focus-visible { outline: none; box-shadow: none; animation: none; } .dz-chips-entrada__chip:has(.dz-chips-entrada__quitar:focus-visible), .dz-chips-entrada__chip--regla:has(.dz-chips-entrada__quitar:focus-visible) { box-shadow: var(--ring); color: var(--text); } /* «+N»: píldora punteada del tamaño del chip; abre la lista con lo elegido marcado. */ .dz-chips-entrada__celda--mas { flex: none; min-width: 0; } .dz-chips-entrada__mas { position: relative; flex: none; display: inline-flex; align-items: center; height: var(--dz-dens-chip, var(--h-chip)); padding: 0 var(--s-2); border: 1px dashed var(--border-control); border-radius: var(--r-chip); background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-1); font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; } @media (hover: hover) { button.dz-chips-entrada__mas:hover { background: var(--surface-2); color: var(--text); } } .dz-chips-entrada__mas:focus-visible { outline: none; box-shadow: var(--ring); } .dz-chips-entrada__mas[aria-expanded="true"] { background: var(--sel-bg); color: var(--sel-text); border-color: transparent; } /* Con filas="1": una sola fila de --h-control; el comportamiento esconde desde el último lo que no cabe. El margen negativo deja sitio al anillo del primer chip dentro del recorte y contain: inline-size evita que los chips sin envolver ensanchen a quien contiene el campo. */ .dz-chips-entrada[data-dz-filas="1"] .dz-chips-entrada__campo { height: var(--dz-dens-control, var(--h-control)); min-height: 0; padding-top: 0; padding-bottom: 0; align-items: center; } .dz-chips-entrada--chico[data-dz-filas="1"] .dz-chips-entrada__campo { height: var(--dz-dens-control-sm, var(--h-control-sm)); } .dz-chips-entrada[data-dz-filas="1"] .dz-chips-entrada__lista { flex-wrap: nowrap; overflow-x: clip; overflow-y: visible; contain: inline-size; padding: 0 2px; margin: 0 -2px; } .dz-chips-entrada[data-dz-filas="1"] .dz-chips-entrada__chip { flex: none; max-width: calc(var(--s-8) * 4); } .dz-chips-entrada[data-dz-filas="1"] .dz-chips-entrada__celda { flex: 1 1 calc(var(--s-8) + var(--s-4)); min-width: calc(var(--s-8) + var(--s-4)); } .dz-chips-entrada[data-dz-filas="1"] .dz-chips-entrada__celda--mas { flex: none; min-width: 0; } /* La lista es el panel del combobox, anclado al campo: se voltea con data-dz-lado y, pintada en su sitio, ocupa lugar en el flujo. */ .dz-chips-entrada[data-dz-lado="arriba"] .dz-combobox__panel { top: auto; bottom: calc(100% + var(--s-1)); } .dz-chips-entrada[data-dz-muestra] .dz-combobox__panel { position: static; margin-top: var(--s-1); animation: none; } .dz-chips-entrada__campo:has(:disabled) .dz-chips-entrada__chip { opacity: var(--op-off); } .dz-chips-entrada__campo:has(:disabled) .dz-chips-entrada__quitar { pointer-events: none; } /* Lectura: sin borde ni fondo; los chips y «+N» se leen como texto. */ .dz-chips-entrada--lectura .dz-chips-entrada__campo, .dz-chips-entrada--lectura .dz-chips-entrada__campo:hover:not(:focus-within):not(:has(:disabled)) { border-color: transparent; background: transparent; padding-left: 0; } .dz-chips-entrada--lectura .dz-chips-entrada__mas { padding: 0 var(--s-1); border: 0; cursor: default; } @media (pointer: coarse) { .dz-chips-entrada__control { font-size: var(--fs-4); } .dz-chips-entrada__quitar::before { content: ""; position: absolute; inset: calc(var(--s-2) * -1.25); } button.dz-chips-entrada__mas::before { content: ""; position: absolute; inset: calc(var(--s-1) * -2.5) calc(var(--s-1) * -2); } } @media (forced-colors: active) { .dz-chips-entrada__chip:has(.dz-chips-entrada__quitar:focus-visible) { outline: 2px solid Highlight; } .dz-chips-entrada__chip--regla { border: 1px solid CanvasText; } .dz-chips-entrada__mas:focus-visible { outline: 2px solid Highlight; } } } /* Combobox: selector con búsqueda. Etiqueta, ayuda y error son los de campo (usa: campo). El contenedor lleva el borde y el anillo de foco va en su contorno con :focus-within; el input interno no lleva anillo (dos rectángulos concéntricos leen como error). La lista flota bajo el campo con hairline y sombra, se voltea hacia arriba (data-dz-lado="arriba") si abajo no cabe y, en teléfono o con puntero grueso, sus opciones miden --h-tactil. La opción activa la pinta una clase porque el foco real sigue en el input (aria-activedescendant); lo elegido lo dice aria-selected y su marca. */ @layer dz.componentes { .dz-combobox__ancla { position: relative; } .dz-combobox__campo { display: flex; align-items: center; gap: var(--s-2); height: var(--dz-dens-control, var(--h-control)); padding: 0 var(--s-1) 0 var(--s-3); border-radius: var(--r-input); border: 1px solid var(--field-line); background: var(--field); transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); } @media (hover: hover) { .dz-combobox__campo:hover:not(:focus-within):not(:has(:disabled)) { border-color: var(--text-muted); } } .dz-combobox__campo[data-ds-estado="hover"]:not(:focus-within):not(:has(:disabled)) { border-color: var(--text-muted); } .dz-combobox__campo:focus-within, .dz-combobox__campo[data-ds-estado="foco"] { border-color: var(--field-line); box-shadow: var(--ring); } .dz-combobox--invalido .dz-combobox__campo, .dz-combobox__campo:has([aria-invalid="true"]) { border-color: var(--bad); } /* El error gana al hover de reposo y al hover enseñado: con el puntero encima el borde sigue en rojo. */ .dz-combobox--invalido .dz-combobox__campo:hover:not(:focus-within):not(:has(:disabled)), .dz-combobox__campo:has([aria-invalid="true"]):hover:not(:focus-within):not(:has(:disabled)), .dz-combobox--invalido .dz-combobox__campo[data-ds-estado="hover"]:not(:focus-within):not(:has(:disabled)), .dz-combobox__campo:has([aria-invalid="true"])[data-ds-estado="hover"]:not(:focus-within):not(:has(:disabled)) { border-color: var(--bad); } /* Deshabilitado: el campo entero, con su chevron, a --op-off (PCB-37). Solo lectura: borde de línea suave, sin fondo de campo y sin chevron; el foco suma el anillo. */ .dz-combobox__campo:has(> .dz-combobox__control:disabled) { opacity: var(--op-off); cursor: not-allowed; } .dz-combobox--lectura .dz-combobox__campo, .dz-combobox--lectura .dz-combobox__campo:hover:not(:focus-within), .dz-combobox--lectura .dz-combobox__campo:focus-within, .dz-combobox--lectura .dz-combobox__campo[data-ds-estado] { border-color: var(--border); background: transparent; padding-right: var(--s-3); } .dz-combobox--lectura .dz-combobox__control { cursor: default; } .dz-combobox--chico .dz-combobox__campo { height: var(--dz-dens-control-sm, var(--h-control-sm)); padding-left: var(--s-2); } .dz-combobox--deshabilitado .dz-campo__etiqueta { cursor: not-allowed; } .dz-combobox__control { flex: 1; min-width: 0; height: 100%; padding: 0; background: transparent; border: 0; outline: none; box-shadow: none; color: var(--text); font-family: inherit; font-size: var(--fs-2); text-overflow: ellipsis; } .dz-combobox__control:focus, .dz-combobox__control:focus-visible { outline: none; box-shadow: none; animation: none; } .dz-combobox__control:disabled { cursor: not-allowed; } .dz-combobox__control::placeholder { color: var(--text-muted); opacity: 1; } .dz-combobox__control[type="search"]::-webkit-search-cancel-button { appearance: none; -webkit-appearance: none; } /* El chevron abre y cierra la lista con el puntero; el teclado ya tiene la flecha abajo, así que no entra en la secuencia de Tab. */ .dz-combobox__disparador { flex: none; display: inline-grid; place-items: center; width: var(--h-btn-ico); height: var(--dz-dens-btn-ico, var(--h-btn-ico)); padding: 0; border: 0; border-radius: var(--r-control); background: transparent; color: var(--text-muted); cursor: pointer; } .dz-combobox--chico .dz-combobox__disparador { width: var(--dz-dens-control-xs, var(--h-control-xs)); height: var(--dz-dens-control-xs, var(--h-control-xs)); } .dz-combobox__disparador:disabled { cursor: not-allowed; } .dz-combobox__disparador:focus-visible { outline: none; } .dz-combobox__chevron { transition: transform var(--dur-1) var(--ease-out); } .dz-combobox__control[aria-expanded="true"] ~ .dz-combobox__disparador .dz-combobox__chevron { transform: rotate(180deg); } .dz-combobox__panel { position: absolute; top: calc(100% + var(--s-1)); left: 0; right: 0; z-index: var(--z-dropdown); padding: var(--s-1); border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--surface); color: var(--text); box-shadow: var(--shadow-md); font-size: var(--fs-2); animation: dzEntraDesdeArriba var(--dur-1) var(--ease-out); } .dz-combobox__panel[hidden] { display: none; } /* Sale como entra, más corto y sin escala (ACB-12): se funde y sube a su disparador en --dur-1 y solo después se esconde. Sin puntero mientras sale. */ .dz-combobox__panel[data-dz-saliendo] { opacity: 0; transform: translateY(calc(var(--s-1) * -1)); transition: opacity var(--dur-1) var(--ease-sale), transform var(--dur-1) var(--ease-sale); pointer-events: none; } .dz-combobox[data-dz-lado="arriba"] .dz-combobox__panel[data-dz-saliendo] { transform: translateY(var(--s-1)); } .dz-combobox[data-dz-lado="arriba"] .dz-combobox__panel { top: auto; bottom: calc(100% + var(--s-1)); } /* En su sitio (ficha o captura) el panel ocupa lugar en el flujo, para no taparle el espécimen de abajo. */ .dz-combobox[data-dz-muestra] .dz-combobox__panel { position: static; margin-top: var(--s-1); animation: none; } .dz-combobox__lista { max-height: calc(var(--h-fila) * 6.5); overflow-y: auto; overscroll-behavior: contain; } .dz-combobox__lista[hidden] { display: none; } .dz-combobox__grupo + .dz-combobox__grupo { margin-top: var(--s-1); padding-top: var(--s-1); border-top: 1px solid var(--hairline); } .dz-combobox__grupo-titulo { padding: var(--s-2) var(--s-2) var(--s-1); font-size: var(--fs-1); font-weight: 500; color: var(--text-muted); } .dz-combobox__opcion { display: flex; align-items: center; gap: var(--s-2); min-height: var(--dz-dens-fila, var(--h-fila)); padding: 0 var(--s-2); border-radius: var(--r-control); color: var(--text); cursor: pointer; } /* La activa es el único indicador de qué elegirá Enter (el foco real sigue en el input): fondo de selección y aro interior con --focus, que pasa 3:1 contra el panel. */ .dz-combobox__opcion--activa { background: var(--sel-bg); color: var(--sel-text); box-shadow: var(--ring-inset); } .dz-combobox__opcion[aria-selected="true"] .dz-combobox__texto { font-weight: 500; } .dz-combobox__opcion[aria-disabled="true"] { color: var(--text-muted); opacity: var(--op-off); cursor: not-allowed; } .dz-combobox__texto { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dz-combobox__detalle { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-1); color: var(--text-muted); } /* El adorno al frente de la opción: un avatar chico (usa: avatar) o un icono. Decorativo; el nombre está en el texto. */ .dz-combobox__lider { flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); } .dz-combobox__lider > svg { inline-size: var(--ico-1); block-size: var(--ico-1); } .dz-combobox__opcion[aria-disabled="true"] .dz-combobox__lider { opacity: var(--op-off); } .dz-combobox__check { flex: none; margin-left: auto; visibility: hidden; color: var(--text-2); } .dz-combobox__opcion[aria-selected="true"] > .dz-combobox__check { visibility: visible; } .dz-combobox__opcion--crear { color: var(--accent-text); font-weight: 500; } .dz-combobox__opcion--crear > .dz-combobox__mas { order: -1; margin-left: 0; visibility: visible; } /* La coincidencia se marca con peso y tinta plena, sin caja: una caja de fondo a media palabra se lee como mancha (Alex, 24-oct-2026). */ .dz-combobox__marca-texto { padding: 0; background: none; color: var(--text); font-weight: 500; } .dz-combobox__vacio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-2); } .dz-combobox__vacio[hidden] { display: none; } .dz-combobox__vacio-texto { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--text-2); } .dz-combobox__salida { padding: 0; border: 0; background: transparent; color: var(--accent-text); font: inherit; font-weight: 500; cursor: pointer; } @media (hover: hover) { .dz-combobox__salida:hover { color: var(--link-hover); } } .dz-combobox__salida:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-1); } .dz-combobox__cargando { display: grid; gap: var(--s-3); padding: var(--s-3) var(--s-2); } .dz-combobox__cargando[hidden] { display: none; } .dz-combobox__valores, .dz-combobox__molde[hidden] { display: none; } .dz-combobox__anuncio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (pointer: coarse), (max-width: 560px) { .dz-combobox__opcion { min-height: var(--h-tactil); } .dz-combobox__disparador { width: var(--h-tactil); height: 100%; } /* El campo chico mide --h-tactil con el dedo y su borde se come 2 px del interior: el disparador lo cubre entero para que el blanco llegue a 44. */ .dz-combobox--chico .dz-combobox__disparador { width: var(--h-tactil); height: var(--h-tactil); margin-block: -1px; } .dz-combobox__salida { display: inline-flex; align-items: center; min-height: var(--h-tactil); } } @media (pointer: coarse) { .dz-combobox__control { font-size: var(--fs-4); } } @media (prefers-reduced-motion: reduce) { .dz-combobox__panel { animation: none; } .dz-combobox__chevron { transition: none; } } @media (prefers-contrast: more) { .dz-combobox__opcion--activa { box-shadow: none; outline: 2px solid var(--text); outline-offset: -2px; } } @media (forced-colors: active) { .dz-combobox__opcion--activa { outline: 2px solid Highlight; outline-offset: -2px; } .dz-combobox__marca-texto { forced-color-adjust: none; background: Mark; color: MarkText; } } } /* Condición: una condición del filtro leída como oración, [campo] [operador] [valor]. En la hoja avanzada va en una rejilla de tres columnas con el valor en una segunda fila; en el popover (variante --valor) el campo ya está elegido y solo quedan operador y valor. A 560 o menos, campo y quitar, luego operador, luego valor. */ @layer dz.componentes { .dz-condicion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s-2); align-items: end; } .dz-condicion__valor { grid-column: 1 / -1; min-width: 0; } .dz-condicion--valor { grid-template-columns: minmax(0, 1fr); align-items: end; } .dz-condicion--valor .dz-condicion__valor { grid-column: auto; } .dz-condicion__entre { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-1); align-items: center; } .dz-condicion__entre--uno { grid-template-columns: minmax(0, 1fr); } .dz-condicion__entre > .dz-campo-compuesto { min-width: 0; } .dz-condicion__entre .dz-campo-compuesto__control { min-width: 0; } .dz-condicion__entre > span { font-size: var(--fs-1); color: var(--text-muted); text-align: center; } .dz-condicion__nota { font-weight: 400; color: var(--text-muted); } .dz-condicion__error { grid-column: 1 / -1; margin: 0; font-size: var(--fs-1); line-height: var(--lh-2); color: var(--bad-text); } .dz-condicion__quitar { align-self: end; } @media (max-width: 560px) { .dz-condicion { grid-template-columns: 1fr auto; } .dz-condicion > :nth-child(1) { grid-column: 1; } .dz-condicion > :nth-child(2) { grid-column: 1 / -1; } .dz-condicion__quitar { grid-column: 2; grid-row: 1; justify-self: end; } .dz-condicion--valor { grid-template-columns: 1fr; } } } /* Control segmentado: píldora con hairline y opciones del alto --h-control-xs; la activa va en --sel-bg. Aspecto del conmutador de vista de LeadZ. Opción de botón (aria-pressed), de enlace (aria-current) o de radio nativo. En el modo radio el DS NO pone caja propia al contenedor (sin relleno, borde, radio ni ancho máximo): el producto ya tiene la suya, como LeadZ en Mi cuenta, y quien quiere la píldora suma dz-control-segmentado--contorno. El es el de siempre, nativo e invisible sobre la opción (absolute, inset 0, opacity 0, como lo pinta LeadZ); la opción pinta el estado con :has(), así que sirve sobre un que el producto ya tenga. */ @layer dz.componentes { .dz-control-segmentado { display: inline-flex; gap: var(--s-1); padding: 3px; border: 1px solid var(--border); border-radius: var(--r-pill); max-width: 100%; /* Seis opciones no caben en 390: la pastilla se desplaza sobre su propio eje en vez de dejar que la última sobresalga del borde. */ overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .dz-control-segmentado::-webkit-scrollbar { display: none; } .dz-control-segmentado__opcion { flex: none; } /* Radios: sin caja propia. La píldora es opt-in con --contorno. */ .dz-control-segmentado:has(> .dz-control-segmentado__opcion > .dz-control-segmentado__radio):not(.dz-control-segmentado--contorno) { padding: 0; border: 0; border-radius: 0; max-width: none; overflow: visible; } .dz-control-segmentado__opcion { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--dz-dens-control-xs, var(--h-control-xs)); padding: 0 var(--s-3); border: 0; border-radius: var(--r-chip); background: transparent; color: var(--text-2); font-family: inherit; font-size: var(--fs-2); font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); } .dz-control-segmentado__opcion svg { width: var(--ico-1); height: var(--ico-1); flex: none; } @media (hover: hover) { .dz-control-segmentado__opcion:hover { background: var(--hover-bg); color: var(--text); } } .dz-control-segmentado__opcion[data-ds-estado="hover"] { background: var(--hover-bg); color: var(--text); } .dz-control-segmentado__opcion[aria-pressed="true"], .dz-control-segmentado__opcion[aria-current="page"] { background: var(--sel-bg); color: var(--sel-text); } .dz-control-segmentado__opcion:focus-visible, .dz-control-segmentado__opcion[data-ds-estado="foco"] { outline: none; box-shadow: var(--ring); } @media (pointer: coarse) { .dz-control-segmentado__opcion { height: var(--h-tactil); } } /* En teléfono el relleno de cada opción baja a --s-2: seis opciones caben en 390 (corte del sistema, 560) sin que la última sobresalga del borde de la pastilla. */ @media (max-width: 560px) { .dz-control-segmentado__opcion { padding-inline: var(--s-2); } } /* Modo radio: la opción es el