/* src/design/fonts.css */ /* ========================================================================== RouterClip · fuentes de marca alojadas en el propio servidor (docs/DISENO-ROUTERCLIP.md 5.1) -------------------------------------------------------------------------- Los woff2 viven en frontend/public/fonts/ con sus licencias OFL al lado: es el subconjunto latino de Google Fonts (español, inglés y el euro). Ninguna página pide nada a terceros. El navegador solo descarga la cara que dibuja: la app nunca usa Newsreader, así que ese fichero solo baja en la web pública. Los respaldos métricos («… Fallback») están en tokens.css. Si una cara cambia, cambia también el nombre del fichero: /fonts/ se sirve con caché inmutable de un año (frontend/nginx.conf). ========================================================================== */ @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-wght.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/newsreader-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* src/design/tokens.css */ /* ========================================================================== RouterClip · tokens v1.0 · generado por _src/tokens_build.py — no editar a mano -------------------------------------------------------------------------- Capas: 1) primitivas (solo las leen los roles) 2) roles semánticos 3) tipografía 4) espacio y estructura 5) radios, bordes, capas 6) movimiento 7) densidad. Modo oscuro: prefers-color-scheme (si nadie fijó data-theme) y [data-theme="dark"], generados desde el mismo diccionario. Ningún componente usa selectores de tema. Contraste comprobado (WCAG 2.2 AA) al generar: `python tokens_build.py` imprime el informe. ========================================================================== */ /* Respaldo métrico: el texto de respaldo ocupa lo mismo que la fuente final (sin saltos de diseño). */ @font-face { font-family: "Schibsted Grotesk Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 102%; ascent-override: 96%; descent-override: 25%; line-gap-override: 0%; } @font-face { font-family: "Schibsted Grotesk Fallback"; font-weight: 700 800; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica Bold"); size-adjust: 106%; ascent-override: 93%; descent-override: 24%; line-gap-override: 0%; } @font-face { font-family: "Newsreader Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 95.8%; ascent-override: 98%; descent-override: 26%; } :root { color-scheme: light; /* ---------- 1. Primitivas ------------------------------------------- */ --paper-0: #FFFFFF; --paper-25: #FBFAF8; --paper-50: #F6F5F1; --paper-75: #F3F2EE; --paper-100: #EFEDE7; --paper-125: #ECEAE4; --paper-150: #E6E3DC; --paper-200: #D9D5CC; --paper-250: #D0CCC3; --paper-300: #BDB9AF; --paper-400: #8A867C; --paper-500: #6B6860; --paper-600: #4F4D47; --paper-700: #3A3935; --paper-750: #2E2D2A; --paper-800: #262522; --paper-850: #1B1B19; --paper-875: #161615; --paper-900: #141413; --paper-925: #121211; --paper-950: #0C0C0B; --vermilion-25: #FBF1EC; --vermilion-50: #FCEDE6; --vermilion-100: #F9DFD3; --vermilion-200: #F3B49A; --vermilion-300: #FF8A63; --vermilion-400: #FF6A3D; --vermilion-500: #E8461A; --vermilion-600: #D63A0C; --vermilion-650: #BC3209; --vermilion-700: #B5300A; --vermilion-800: #8F2507; --vermilion-900: #3A2117; --vermilion-950: #2A1A13; --crimson-50: #FBEAED; --crimson-200: #EBB0BB; --crimson-600: #B4233C; --crimson-700: #971C31; --crimson-300d: #FF6B81; --crimson-950d: #2C1418; --crimson-800d: #6A2532; /* ---------- 2. Roles de color (claro) ------------------------------- */ /* SUPERFICIES */ --color-bg: var(--paper-0); /* plano de trabajo */ --color-bg-subtle: var(--paper-50); /* barra lateral, lienzo, columnas del tablero */ --color-bg-sunken: var(--paper-100); /* pozos: código, skeleton, solo lectura */ --color-bg-raised: var(--paper-0); /* menús, diálogos, paleta (con borde + elevación) */ --color-bg-hover: var(--paper-75); /* fila o control bajo el puntero */ --color-bg-hover-subtle: var(--paper-125); /* hover sobre bg-subtle (barra lateral) */ --color-bg-active: var(--paper-125); /* pulsado */ --color-bg-current: var(--vermilion-25); /* «estás aquí»: fila abierta (siempre con regla bermellón) */ --color-bg-selected: var(--paper-100); /* marcada para una acción en lote (casilla) */ --color-bg-inverse: var(--paper-900); /* toasts, tooltips, barra de guardado */ --color-bg-backdrop: rgb(20 20 19 / 0.42); /* fondo de diálogos */ /* TEXTO */ --color-text: var(--paper-900); /* 18,4:1 · 16,3:1 */ --color-text-2: var(--paper-600); /* 8,5:1 · 9,3:1 */ --color-text-3: var(--paper-500); /* metadatos y ejes · ≥ 4,5:1 sobre bg, subtle y hover */ --color-text-disabled: #A6A39B; /* no se exige contraste (WCAG 1.4.3 excepción) */ --color-text-inverse: var(--paper-50); --color-text-inverse-2: #B9B6AE; /* BORDES Y REGLAS */ --color-border: var(--paper-150); /* regla fina por defecto */ --color-border-subtle: #EEECE6; /* separador de filas */ --color-border-strong: var(--paper-250); /* contenedores, botón secundario */ --color-border-control: var(--paper-400); /* borde inferior de campos · ≥ 3:1 */ --color-rule: var(--paper-900); /* regla editorial de 2 px */ /* ACCIÓN (tinta actúa) */ --color-action: var(--paper-900); /* botón primario de la app */ --color-action-hover: var(--paper-750); --color-action-active: var(--paper-700); --color-on-action: var(--paper-0); /* ACENTO (el bermellón señala) */ --color-accent: var(--vermilion-600); /* ubicación, selección actual, marca · nunca botón en la app */ --color-accent-text: var(--vermilion-700); /* texto en bermellón (6,2:1 · 7,4:1) */ --color-accent-subtle: var(--vermilion-50); --color-accent-border: var(--vermilion-200); --color-cta: var(--vermilion-600); /* solo web pública: una por pantalla */ --color-cta-hover: var(--vermilion-650); --color-on-cta: var(--paper-0); /* 4,7:1 · 6,5:1 */ /* FOCO */ --color-focus: var(--paper-900); /* anillo de 2 px… */ --color-focus-gap: var(--paper-0); /* …separado 2 px del control */ /* ESTADOS (siempre con icono o texto) */ --color-unread: var(--paper-900); /* no leído: punto de tinta + nombre en 700 */ --color-success: #1E7A4A; --color-success-subtle: #E7F2EB; --color-success-border: #A9D3B9; --color-warning: #8F5B00; /* texto de aviso */ --color-warning-mark: #C98A0B; /* marca de aviso (no texto) */ --color-warning-subtle: #FBF1DC; --color-warning-border: #E9C989; --color-danger: var(--crimson-600); /* error, vencido, destructivo */ --color-danger-hover: var(--crimson-700); --color-danger-subtle: var(--crimson-50); --color-danger-border: var(--crimson-200); --color-on-danger: var(--paper-0); --color-info: #2456B8; --color-info-subtle: #E8EEFA; --color-info-border: #AFC3EC; --color-neutral: var(--paper-500); /* borrador, archivada, no aplica */ --color-neutral-subtle: var(--paper-100); /* NOTA INTERNA (papel amarillo de redacción) */ --color-note-bg: #FBF5DF; --color-note-border: #E5D28F; --color-note-text: #5C4A06; /* CANALES = SERIES (misma paleta en glifos y gráficos; validada CVD) */ --ch-whatsapp: #387D4A; /* serie 1 */ --ch-email: #4F73B7; /* serie 2 */ --ch-instagram: #93456A; /* serie 3 */ --ch-sms: #61761E; /* serie 4 */ --ch-web: #0082A4; /* serie 5 */ --ch-voice: #946000; /* serie 6 */ --ch-messenger: #725CA6; /* serie 7 */ --ch-form: #A0552A; /* serie 8 */ /* GRÁFICOS */ --chart-assistant: var(--vermilion-600); /* la serie «Asistente» — único bermellón en datos */ --chart-team: var(--paper-700); /* serie neutra de comparación */ --chart-other: #97938A; /* «Otros» (neutro, ≥ 3:1) */ --chart-grid: var(--paper-125); --chart-axis: var(--paper-300); --chart-surface: var(--color-bg); --seq-0: var(--paper-50); /* secuencial en tinta: magnitud */ --seq-1: #E2DFD7; --seq-2: #CBC6BB; --seq-3: #ADA89C; --seq-4: #8A857A; --seq-5: #625E57; --seq-6: #3A3834; --ord-1: #B9B4A8; /* ordinal en tinta: etapas del embudo */ --ord-2: #938E83; --ord-3: #6E6A61; --ord-4: #4A4742; --ord-5: #262522; /* COMPONENTES (el modo oscuro vive aquí, no en selectores) */ --toast-bg: var(--color-bg-inverse); --toast-fg: var(--color-text-inverse); --toast-fg-2: var(--color-text-inverse-2); --toast-success: #6FD39F; --toast-error: #FF8A9B; --toast-progress: #F6F5F1; /* barra de cuenta atrás del «Deshacer» */ --tooltip-bg: var(--color-bg-inverse); --tooltip-fg: var(--color-text-inverse); --savebar-bg: var(--color-bg-inverse); --savebar-fg: var(--color-text-inverse); --savebar-action: var(--paper-50); /* el primario sobre la barra se invierte */ --savebar-on-action: var(--paper-900); --skel-shine: rgb(255 255 255 / 0.6); --avatar-bg: var(--paper-100); --avatar-fg: var(--paper-600); --rail-bg: var(--color-bg-subtle); --site-foot-bg: var(--paper-900); /* pie de tinta de la web (15.12): tinta en claro y casi negro en oscuro */ --site-foot-fg: var(--paper-50); --site-foot-fg-2: #B9B6AE; --site-foot-rule: transparent; /* en oscuro, una regla separa el pie de la página */ --code-string: #2E6A3E; --code-number: var(--vermilion-700); --elev-1: 0 1px 0 rgb(20 20 19 / 0.04); --elev-2: 0 0 0 1px var(--color-border), 0 8px 20px -8px rgb(20 20 19 / 0.18); --elev-3: 0 0 0 1px var(--color-border), 0 28px 56px -18px rgb(20 20 19 / 0.32); --elev-drag: 0 0 0 1px var(--color-text), 0 12px 24px -12px rgb(20 20 19 / 0.28); /* ---------- 3. Tipografía --------------------------------------------- Schibsted Grotesk (UI y titulares) · IBM Plex Mono (datos) · Newsreader (solo web pública: entradillas). Pesos usados: 400 500 600 700 (+800 display). */ --font-sans: "Schibsted Grotesk", "Schibsted Grotesk Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: "Newsreader", "Newsreader Fallback", "Iowan Old Style", Georgia, serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heavy: 800; /* Escala: tamaño / interlineado / tracking. Mucho contraste arriba; lectura cómoda abajo. */ --type-display-xl-size: clamp(56px, 10vw, 144px); --type-display-xl-line: 0.88; --type-display-xl-track: -0.055em; --type-display-size: clamp(40px, 6vw, 72px); --type-display-line: 0.98; --type-display-track: -0.042em; --type-h1-size: 44px; --type-h1-line: 1.02; --type-h1-track: -0.035em; --type-h2-size: 32px; --type-h2-line: 1.08; --type-h2-track: -0.028em; --type-h3-size: 22px; --type-h3-line: 1.18; --type-h3-track: -0.018em; --type-h4-size: 17px; --type-h4-line: 1.3; --type-h4-track: -0.01em; --type-view-size: 22px; --type-view-line: 28px; --type-view-track: -0.026em; /* título de vista en la app */ --type-lede-size: 22px; --type-lede-line: 1.42; --type-lede-track: -0.005em; /* serif, solo web */ --type-body-lg-size: 17px; --type-body-lg-line: 1.6; --type-body-size: 15px; --type-body-line: 1.55; --type-ui-size: 14px; --type-ui-line: 20px; --type-ui-track: -0.003em; --type-sm-size: 13px; --type-sm-line: 18px; --type-xs-size: 12px; --type-xs-line: 16px; /* mínimo para texto con significado */ --type-mono-size: 12px; --type-mono-line: 18px; --type-mono-track: -0.01em; --type-kicker-size: 11px; --type-kicker-line: 14px; --type-kicker-track: 0.08em; /* mono en mayúsculas: único uso de 11 px */ --type-figure-size: 64px; --type-figure-line: 1; --type-figure-track: -0.045em; /* cifra protagonista */ --type-figure-2-size: 34px; --type-figure-2-line: 38px; --type-figure-2-track: -0.035em; /* ---------- 4. Espacio, rejilla, estructura ------------------------- */ --space-0: 0; --space-px: 1px; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --grid-columns: 12; --grid-gutter: 24px; --page-margin: 64px; /* web ≥ 1024 · 24 px tableta · 16 px móvil */ --page-max: 1440px; --content-max: 1180px; /* formularios y ajustes */ --measure: 64ch; /* ancho de lectura */ --sidebar-w: 232px; --rail-w: 56px; /* barra lateral plegada */ --topbar-h: 60px; /* cabecera de vista */ --list-w: 352px; /* lista de la bandeja */ --panel-w: 312px; /* ficha lateral */ --inspector-w: 380px; --drawer-w: 440px; /* Puntos de corte de referencia (las media queries no leen variables): 360 móvil · 768 tableta · 1024 portátil · 1280 escritorio · 1440 ancho */ /* ---------- 5. Radios, bordes, capas -------------------------------- */ --radius-0: 0; --radius-1: 2px; /* etiquetas, interruptores, casillas, contadores */ --radius-2: 4px; /* botones, campos, tarjetas de kanban */ --radius-3: 6px; /* menús, diálogos, paleta */ --radius-4: 10px; /* icono de app, marcos de dispositivo */ --radius-round: 999px; /* solo personas (avatares) y radios */ --border-hair: 1px; --border-rule: 2px; --border-mark: 3px; /* regla de ubicación */ --z-base: 0; --z-sticky: 10; /* cabeceras de tabla y de columna */ --z-drag: 50; --z-dropdown: 100; /* menús, selectores, tooltips de gráfico */ --z-overlay: 200; /* fondo de diálogo y cajón */ --z-modal: 300; --z-palette: 350; /* paleta de comandos */ --z-toast: 400; --z-tooltip: 500; --focus-width: 2px; --focus-offset: 2px; --focus-ring: 0 0 0 var(--focus-offset) var(--color-focus-gap), 0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--color-focus); /* ---------- 6. Movimiento ------------------------------------------- */ --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-route: 480ms; /* trazos de enrutado, cambios de etapa, traspasos */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0, 0, 0, 1); --ease-exit: cubic-bezier(0.3, 0, 1, 1); --ease-route: cubic-bezier(0.65, 0, 0.35, 1); /* ---------- 7. Densidad (cómoda por defecto) ------------------------ */ --control-h: 36px; --control-h-sm: 30px; --control-h-lg: 44px; /* también el mínimo táctil en móvil */ --control-px: 14px; --row-h: 44px; --cell-px: 12px; --cell-py: 11px; --list-item-py: 13px; --list-preview-lines: 1; --panel-px: 24px; --density-text: var(--type-ui-size); } [data-density="compact"] { --control-h: 30px; --control-h-sm: 26px; --control-h-lg: 36px; --control-px: 10px; --row-h: 34px; --cell-px: 10px; --cell-py: 7px; --list-item-py: 8px; --panel-px: 16px; --density-text: var(--type-sm-size); } /* ---------- Modo oscuro: tinta caliente, no negro puro ------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; /* SUPERFICIES */ --color-bg: #121211; --color-bg-subtle: #0C0C0B; --color-bg-sunken: #0A0A09; --color-bg-raised: #1B1B19; --color-bg-hover: #1D1D1B; --color-bg-hover-subtle: #1B1B19; --color-bg-active: #262522; --color-bg-current: #2A1A13; --color-bg-selected: #23221F; --color-bg-inverse: #F1EFE9; --color-bg-backdrop: rgb(0 0 0 / 0.62); /* TEXTO */ --color-text: #F1EFE9; --color-text-2: #BAB6AC; --color-text-3: #8F8B81; --color-text-disabled: #5E5B55; --color-text-inverse: #141413; --color-text-inverse-2: #55534E; /* BORDES Y REGLAS */ --color-border: #262522; --color-border-subtle: #1E1E1C; --color-border-strong: #3A3935; --color-border-control: #77736A; --color-rule: #F1EFE9; /* ACCIÓN (tinta actúa) */ --color-action: #F1EFE9; --color-action-hover: #FFFFFF; --color-action-active: #DAD7CF; --color-on-action: #141413; /* ACENTO (el bermellón señala) */ --color-accent: #FF6A3D; --color-accent-text: #FF8A63; --color-accent-subtle: #2A1A13; --color-accent-border: #6B2E18; --color-cta: #FF6A3D; --color-cta-hover: #FF8360; --color-on-cta: #141413; /* FOCO */ --color-focus: #F1EFE9; --color-focus-gap: #121211; /* ESTADOS (siempre con icono o texto) */ --color-unread: #F1EFE9; --color-success: #4CC38A; --color-success-subtle: #12241A; --color-success-border: #24563B; --color-warning: #E8B64C; --color-warning-mark: #E8B64C; --color-warning-subtle: #2A2210; --color-warning-border: #5E4813; --color-danger: var(--crimson-300d); --color-danger-hover: #FF8A9B; --color-danger-subtle: var(--crimson-950d); --color-danger-border: var(--crimson-800d); --color-on-danger: #141413; --color-info: #7FA8FF; --color-info-subtle: #141D33; --color-info-border: #2D4278; --color-neutral: #9A968C; --color-neutral-subtle: #1E1E1C; /* NOTA INTERNA (papel amarillo de redacción) */ --color-note-bg: #241F0E; --color-note-border: #4F4416; --color-note-text: #EBD58A; /* CANALES = SERIES (misma paleta en glifos y gráficos; validada CVD) */ --ch-whatsapp: #4E9960; --ch-email: #5D85CF; --ch-instagram: #BD658E; --ch-sms: #7B913C; --ch-web: #0395B7; --ch-voice: #AC7C27; --ch-messenger: #8C77C3; --ch-form: #BD6F45; /* GRÁFICOS */ --chart-assistant: #FF6A3D; --chart-team: #C9C5BB; --chart-other: #6E6A62; --chart-grid: #232320; --chart-axis: #3D3B37; --seq-0: #1A1A18; --seq-1: #2B2A27; --seq-2: #3F3D39; --seq-3: #5A5751; --seq-4: #7D7A72; --seq-5: #A19D94; --seq-6: #E4E1D9; --ord-1: #5A5751; --ord-2: #7D7A72; --ord-3: #A19D94; --ord-4: #C6C2B8; --ord-5: #ECE9E2; /* COMPONENTES (el modo oscuro vive aquí, no en selectores) */ --toast-bg: #262522; --toast-fg: #F1EFE9; --toast-fg-2: #BAB6AC; --toast-success: #4CC38A; --toast-error: #FF6B81; --toast-progress: #F1EFE9; --tooltip-bg: #F1EFE9; --tooltip-fg: #141413; --savebar-bg: #262522; --savebar-fg: #F1EFE9; --savebar-action: #F1EFE9; --savebar-on-action: #141413; --skel-shine: rgb(255 255 255 / 0.05); --avatar-bg: #262522; --avatar-fg: #BAB6AC; --rail-bg: #0C0C0B; --site-foot-bg: #0C0C0B; --site-foot-fg: #F1EFE9; --site-foot-fg-2: #A19D94; --site-foot-rule: var(--color-border-strong); --code-string: #7CC08E; --code-number: #FF8A63; --elev-1: 0 1px 0 rgb(0 0 0 / 0.4); --elev-2: 0 0 0 1px var(--color-border-strong), 0 10px 24px -8px rgb(0 0 0 / 0.6); --elev-3: 0 0 0 1px var(--color-border-strong), 0 28px 56px -16px rgb(0 0 0 / 0.75); --elev-drag: 0 0 0 1px var(--color-text), 0 14px 28px -12px rgb(0 0 0 / 0.7); } } :root[data-theme="dark"] { color-scheme: dark; /* SUPERFICIES */ --color-bg: #121211; --color-bg-subtle: #0C0C0B; --color-bg-sunken: #0A0A09; --color-bg-raised: #1B1B19; --color-bg-hover: #1D1D1B; --color-bg-hover-subtle: #1B1B19; --color-bg-active: #262522; --color-bg-current: #2A1A13; --color-bg-selected: #23221F; --color-bg-inverse: #F1EFE9; --color-bg-backdrop: rgb(0 0 0 / 0.62); /* TEXTO */ --color-text: #F1EFE9; --color-text-2: #BAB6AC; --color-text-3: #8F8B81; --color-text-disabled: #5E5B55; --color-text-inverse: #141413; --color-text-inverse-2: #55534E; /* BORDES Y REGLAS */ --color-border: #262522; --color-border-subtle: #1E1E1C; --color-border-strong: #3A3935; --color-border-control: #77736A; --color-rule: #F1EFE9; /* ACCIÓN (tinta actúa) */ --color-action: #F1EFE9; --color-action-hover: #FFFFFF; --color-action-active: #DAD7CF; --color-on-action: #141413; /* ACENTO (el bermellón señala) */ --color-accent: #FF6A3D; --color-accent-text: #FF8A63; --color-accent-subtle: #2A1A13; --color-accent-border: #6B2E18; --color-cta: #FF6A3D; --color-cta-hover: #FF8360; --color-on-cta: #141413; /* FOCO */ --color-focus: #F1EFE9; --color-focus-gap: #121211; /* ESTADOS (siempre con icono o texto) */ --color-unread: #F1EFE9; --color-success: #4CC38A; --color-success-subtle: #12241A; --color-success-border: #24563B; --color-warning: #E8B64C; --color-warning-mark: #E8B64C; --color-warning-subtle: #2A2210; --color-warning-border: #5E4813; --color-danger: var(--crimson-300d); --color-danger-hover: #FF8A9B; --color-danger-subtle: var(--crimson-950d); --color-danger-border: var(--crimson-800d); --color-on-danger: #141413; --color-info: #7FA8FF; --color-info-subtle: #141D33; --color-info-border: #2D4278; --color-neutral: #9A968C; --color-neutral-subtle: #1E1E1C; /* NOTA INTERNA (papel amarillo de redacción) */ --color-note-bg: #241F0E; --color-note-border: #4F4416; --color-note-text: #EBD58A; /* CANALES = SERIES (misma paleta en glifos y gráficos; validada CVD) */ --ch-whatsapp: #4E9960; --ch-email: #5D85CF; --ch-instagram: #BD658E; --ch-sms: #7B913C; --ch-web: #0395B7; --ch-voice: #AC7C27; --ch-messenger: #8C77C3; --ch-form: #BD6F45; /* GRÁFICOS */ --chart-assistant: #FF6A3D; --chart-team: #C9C5BB; --chart-other: #6E6A62; --chart-grid: #232320; --chart-axis: #3D3B37; --seq-0: #1A1A18; --seq-1: #2B2A27; --seq-2: #3F3D39; --seq-3: #5A5751; --seq-4: #7D7A72; --seq-5: #A19D94; --seq-6: #E4E1D9; --ord-1: #5A5751; --ord-2: #7D7A72; --ord-3: #A19D94; --ord-4: #C6C2B8; --ord-5: #ECE9E2; /* COMPONENTES (el modo oscuro vive aquí, no en selectores) */ --toast-bg: #262522; --toast-fg: #F1EFE9; --toast-fg-2: #BAB6AC; --toast-success: #4CC38A; --toast-error: #FF6B81; --toast-progress: #F1EFE9; --tooltip-bg: #F1EFE9; --tooltip-fg: #141413; --savebar-bg: #262522; --savebar-fg: #F1EFE9; --savebar-action: #F1EFE9; --savebar-on-action: #141413; --skel-shine: rgb(255 255 255 / 0.05); --avatar-bg: #262522; --avatar-fg: #BAB6AC; --rail-bg: #0C0C0B; --site-foot-bg: #0C0C0B; --site-foot-fg: #F1EFE9; --site-foot-fg-2: #A19D94; --site-foot-rule: var(--color-border-strong); --code-string: #7CC08E; --code-number: #FF8A63; --elev-1: 0 1px 0 rgb(0 0 0 / 0.4); --elev-2: 0 0 0 1px var(--color-border-strong), 0 10px 24px -8px rgb(0 0 0 / 0.6); --elev-3: 0 0 0 1px var(--color-border-strong), 0 28px 56px -16px rgb(0 0 0 / 0.75); --elev-drag: 0 0 0 1px var(--color-text), 0 14px 28px -12px rgb(0 0 0 / 0.7); } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-route: 0ms; } } /* src/design/base.css */ /* ========================================================================== RouterClip · hoja base de la app y de la web (docs/DISENO-ROUTERCLIP.md, 14 y 18.1) -------------------------------------------------------------------------- Se importa justo después de tokens.css y antes que cualquier otra hoja (main.tsx). Contiene el reset, la tipografía, el foco, la selección, las barras de desplazamiento, unas pocas utilidades y los componentes base de design/routerclip/components.css que usa todo el producto (.btn, campos, .switch, pestañas, etiquetas, .id, tablas…). Reglas: solo tokens (ningún hex ni rgb), ningún selector de tema, sin degradados, sombras solo con --elev-* y solo en superficies flotantes. El modo oscuro y la densidad cambian los tokens, no estas reglas. ========================================================================== */ /* ---------- Reset ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--color-bg); scrollbar-color: var(--color-border-control) transparent; } body { margin: 0; min-width: 320px; font-family: var(--font-sans); font-size: var(--type-ui-size); line-height: var(--type-ui-line); letter-spacing: var(--type-ui-track); color: var(--color-text); background: var(--color-bg); font-synthesis: none; font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: var(--weight-bold); text-wrap: balance; } button, input, select, textarea, optgroup { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } :where(button:disabled) { cursor: not-allowed; opacity: .58; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } img, video { max-width: 100%; } svg { flex-shrink: 0; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; } hr { border: 0; border-top: 1px solid var(--color-border); margin: 0; } abbr[title] { text-decoration: none; cursor: help; } /* ---------- Foco ------------------------------------------------------ Anillo de tinta de 2 px separado 2 px del control (12, «Foco»). Nunca bermellón (es «dónde estás») ni carmesí (es error). Se dibuja con outline para que ninguna sombra de componente lo tape y para que se mantenga en modo de alto contraste; los campos lo dibujan con --focus-ring porque su borde también cambia. */ :where(a, button, input, select, textarea, summary, [tabindex], [contenteditable="true"]):focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); } .is-focus { outline: none; box-shadow: var(--focus-ring) !important; } /* ---------- Selección y desplazamiento -------------------------------- */ ::selection { background: var(--color-action); color: var(--color-on-action); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border-strong); border: 3px solid transparent; border-radius: var(--radius-1); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--color-border-control); } ::-webkit-scrollbar-corner { background: transparent; } /* ---------- Accesibilidad -------------------------------------------- */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } .skip-link { position: absolute; left: var(--space-4); top: var(--space-2); z-index: var(--z-tooltip); padding: var(--space-2) var(--space-3); background: var(--color-action); color: var(--color-on-action); border-radius: var(--radius-2); font-weight: var(--weight-semibold); text-decoration: none; transform: translateY(-200%); } .skip-link:focus, .skip-link:focus-visible { transform: none; } /* ---------- Tipografía ---------------------------------------------- */ .t-display-xl { font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-line); letter-spacing: var(--type-display-xl-track); font-weight: var(--weight-bold); } .t-display { font-size: var(--type-display-size); line-height: var(--type-display-line); letter-spacing: var(--type-display-track); font-weight: var(--weight-bold); } .t-h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-line); letter-spacing: var(--type-h1-track); font-weight: var(--weight-bold); } .t-h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); letter-spacing: var(--type-h2-track); font-weight: var(--weight-bold); } .t-h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-line); letter-spacing: var(--type-h3-track); font-weight: var(--weight-semibold); } .t-h4 { font-size: var(--type-h4-size); line-height: var(--type-h4-line); letter-spacing: var(--type-h4-track); font-weight: var(--weight-semibold); } .t-view { font-size: var(--type-view-size); line-height: var(--type-view-line); letter-spacing: var(--type-view-track); font-weight: var(--weight-bold); } .t-lede { font-family: var(--font-serif); font-size: var(--type-lede-size); line-height: var(--type-lede-line); letter-spacing: var(--type-lede-track); font-weight: var(--weight-regular); } .t-body-lg { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); } .t-body { font-size: var(--type-body-size); line-height: var(--type-body-line); } .t-ui { font-size: var(--type-ui-size); line-height: var(--type-ui-line); } .t-sm { font-size: var(--type-sm-size); line-height: var(--type-sm-line); } .t-xs { font-size: var(--type-xs-size); line-height: var(--type-xs-line); } .t-figure { font-size: var(--type-figure-size); line-height: var(--type-figure-line); letter-spacing: var(--type-figure-track); font-weight: var(--weight-semibold); } .t-figure-2 { font-size: var(--type-figure-2-size); line-height: var(--type-figure-2-line); letter-spacing: var(--type-figure-2-track); font-weight: var(--weight-semibold); } .mono, .t-mono { font-family: var(--font-mono); font-size: var(--type-mono-size); line-height: var(--type-mono-line); letter-spacing: var(--type-mono-track); font-variant-numeric: tabular-nums; } .kicker { font-family: var(--font-mono); font-size: var(--type-kicker-size); line-height: var(--type-kicker-line); letter-spacing: var(--type-kicker-track); text-transform: uppercase; color: var(--color-text-3); font-weight: var(--weight-regular); } .kicker--ink { color: var(--color-text); } .num { font-variant-numeric: tabular-nums; } /* Identificadores (#C-20977, OP-0412, run_8f2a1c): mono y sin partir. */ .id { font-family: var(--font-mono); font-size: var(--type-mono-size); letter-spacing: var(--type-mono-track); white-space: nowrap; } .c-1 { color: var(--color-text); } .c-2 { color: var(--color-text-2); } .c-3 { color: var(--color-text-3); } .c-accent { color: var(--color-accent-text); } .w-400 { font-weight: var(--weight-regular); } .w-500 { font-weight: var(--weight-medium); } .w-600 { font-weight: var(--weight-semibold); } .w-700 { font-weight: var(--weight-bold); } .nowrap { white-space: nowrap; } .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Punto cuadrado de la marca al final de un titular («Bandeja al día■»). */ .sq { display: inline-block; width: 0.17em; height: 0.17em; background: var(--color-accent); margin-left: 0.04em; vertical-align: baseline; } .rule-top { border-top: var(--border-rule) solid var(--color-rule); } .hair-top { border-top: var(--border-hair) solid var(--color-border); } .hair-bottom { border-bottom: var(--border-hair) solid var(--color-border); } /* Texto de lectura largo (artículos, ayudas): medida de 64 caracteres y listas con marca. */ .prose { max-width: var(--measure); font-size: var(--type-body-size); line-height: var(--type-body-line); } .prose > * + * { margin-top: var(--space-3); } :where(.prose, .article-body) :where(ul) { list-style: disc; } :where(.prose, .article-body) :where(ol) { list-style: decimal; } :where(.prose) :where(ul, ol) { padding-left: 22px; } /* Iconos (Lucide): 16 px y trazo 1,6 por defecto. */ .i { width: 16px; height: 16px; stroke-width: 1.6; } .i-12 { width: 12px; height: 12px; } .i-14 { width: 14px; height: 14px; } .i-18 { width: 18px; height: 18px; } .i-20 { width: 20px; height: 20px; } .i .rc-dot { fill: var(--color-accent); } /* ---------- Marca: símbolo y logotipo en línea ----------------------- */ /* La tinta toma currentColor y el punto cuadrado el bermellón del modo activo. */ .rc-symbol, .rc-logo { display: inline-block; flex-shrink: 0; vertical-align: middle; user-select: none; } .rc-symbol .ink, .rc-logo .ink { fill: currentColor; } .rc-symbol .dot, .rc-logo .dot { fill: var(--color-accent); } /* ---------- Botones -------------------------------------------------- */ .btn { --btn-bg: transparent; --btn-fg: var(--color-text); --btn-bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--control-px); border: 1px solid var(--btn-bd); border-radius: var(--radius-2); background: var(--btn-bg); color: var(--btn-fg); font-size: var(--type-ui-size); font-weight: var(--weight-semibold); line-height: 1; letter-spacing: -0.005em; white-space: nowrap; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .btn .i, .btn > svg { width: 16px; height: 16px; } /* Primario de la app: tinta. Uno por vista. */ .btn--primary { --btn-bg: var(--color-action); --btn-fg: var(--color-on-action); } .btn--primary:hover { --btn-bg: var(--color-action-hover); } .btn--primary:active { --btn-bg: var(--color-action-active); } /* CTA: bermellón. Solo en la web pública, una por pantalla. */ .btn--cta { --btn-bg: var(--color-cta); --btn-fg: var(--color-on-cta); } .btn--cta:hover { --btn-bg: var(--color-cta-hover); } .btn--secondary { --btn-bg: var(--color-bg); --btn-bd: var(--color-border-strong); } .btn--secondary:hover { --btn-bg: var(--color-bg-hover); --btn-bd: var(--color-border-control); } .btn--subtle { --btn-fg: var(--color-text-2); font-weight: var(--weight-medium); } .btn--subtle:hover { --btn-bg: var(--color-bg-hover); --btn-fg: var(--color-text); } /* Peligro: contorno; relleno solo en la confirmación final de un diálogo. */ .btn--danger { --btn-fg: var(--color-danger); --btn-bd: var(--color-danger-border); --btn-bg: var(--color-bg); } .btn--danger:hover { --btn-bg: var(--color-danger-subtle); --btn-bd: var(--color-danger); } .btn--danger-solid { --btn-bg: var(--color-danger); --btn-fg: var(--color-on-danger); } .btn--danger-solid:hover { --btn-bg: var(--color-danger-hover); } .btn--icon { width: var(--control-h); padding: 0; } .btn--sm { height: var(--control-h-sm); padding: 0 10px; font-size: var(--type-sm-size); gap: 6px; } .btn--sm.btn--icon { width: var(--control-h-sm); padding: 0; } .btn--lg { height: var(--control-h-lg); padding: 0 20px; font-size: 15px; } .btn--block { width: 100%; } .btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"] { --btn-bg: var(--color-bg-sunken); --btn-fg: var(--color-text-disabled); --btn-bd: transparent; cursor: not-allowed; opacity: 1; } .btn .kbd { margin-left: 2px; } .btn--primary .kbd { color: inherit; border-color: currentColor; opacity: .7; background: transparent; } .btn .spinner, .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rc-spin 0.8s linear infinite; flex: none; } @keyframes rc-spin { to { transform: rotate(360deg); } } .btn-group { display: inline-flex; } .btn-group .btn { border-radius: 0; } .btn-group .btn:first-child { border-radius: var(--radius-2) 0 0 var(--radius-2); } .btn-group .btn:last-child { border-radius: 0 var(--radius-2) var(--radius-2) 0; margin-left: -1px; } .btn-group .btn--primary + .btn--primary { margin-left: 1px; } .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-semibold); color: var(--color-text); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--color-border-strong); border-bottom-width: 2px; border-radius: var(--radius-1); font-family: var(--font-mono); font-size: 11px; line-height: 1; color: var(--color-text-3); background: var(--color-bg); white-space: nowrap; } /* ---------- Campos --------------------------------------------------- */ .field { display: grid; gap: 6px; min-width: 0; align-content: start; } .field__label { font-size: var(--type-sm-size); line-height: var(--type-sm-line); font-weight: var(--weight-semibold); color: var(--color-text); display: flex; align-items: baseline; gap: 6px; } .field__label .opt { font-weight: var(--weight-regular); color: var(--color-text-3); margin-left: auto; } .field__hint { font-size: var(--type-xs-size); line-height: var(--type-xs-line); color: var(--color-text-3); } .field__error { font-size: var(--type-xs-size); line-height: var(--type-xs-line); color: var(--color-danger); display: flex; gap: 6px; align-items: flex-start; font-weight: var(--weight-medium); } .field__error .i, .field__ok .i { width: 14px; height: 14px; margin-top: 1px; } .field__ok { font-size: var(--type-xs-size); line-height: var(--type-xs-line); color: var(--color-success); display: flex; gap: 6px; align-items: flex-start; font-weight: var(--weight-medium); } .input, .select, .textarea { width: 100%; height: var(--control-h); padding: 0 10px; background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border-strong); border-bottom-color: var(--color-border-control); border-radius: var(--radius-2); font-size: var(--type-ui-size); transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .input::placeholder, .textarea::placeholder { color: var(--color-text-3); opacity: 1; } .input:hover, .select:hover, .textarea:hover { border-color: var(--color-border-control); } .input:focus-visible, .select:focus-visible, .textarea:focus-visible, .input.is-focus, .textarea.is-focus { outline: none; border-color: var(--color-text); box-shadow: var(--focus-ring); } /* Fechas y horas: el botón del calendario es un segundo tope de Tab dentro del campo y no cumple :focus-visible; el campo mantiene el anillo mientras el foco esté dentro, y el indicador lleva el suyo (2.4.7). */ .input:is([type="date"], [type="month"], [type="time"], [type="datetime-local"], [type="week"]):focus, input:is([type="date"], [type="month"], [type="time"], [type="datetime-local"], [type="week"]):focus-within { outline: none; border-color: var(--color-text); box-shadow: var(--focus-ring); } input::-webkit-calendar-picker-indicator { border-radius: var(--radius-1); cursor: pointer; } input::-webkit-calendar-picker-indicator:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: 1px; } /* Error: carmesí + borde inferior de 2 px + icono + instrucción. Distinto del foco por color, forma y texto. */ .input.is-invalid, .textarea.is-invalid, .input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--color-danger); border-bottom-width: 2px; background: var(--color-danger-subtle); } .input.is-invalid, .input[aria-invalid="true"] { padding-right: 32px; } .input-state { position: relative; } .input-state > .i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; } .input-state > .i.err { color: var(--color-danger); } .input-state > .i.ok { color: var(--color-success); } .input.is-valid { padding-right: 32px; } .input[readonly], .input.is-readonly, .textarea[readonly] { background: var(--color-bg-subtle); border-color: var(--color-border); } .input:disabled, .select:disabled, .textarea:disabled { background: var(--color-bg-sunken); color: var(--color-text-disabled); border-color: var(--color-border); cursor: not-allowed; opacity: 1; } .textarea { height: auto; min-height: 88px; padding: 9px 10px; line-height: 20px; resize: vertical; } .select { appearance: none; padding-right: 32px; } .select-wrap { position: relative; } .select-wrap .select { display: flex; align-items: center; text-align: left; white-space: nowrap; overflow: hidden; } .select-wrap > .i, .select-wrap > svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--color-text-3); pointer-events: none; } .input-affix { display: flex; align-items: stretch; } .input-affix > .affix { display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--color-border-strong); border-right: 0; border-radius: var(--radius-2) 0 0 var(--radius-2); background: var(--color-bg-subtle); color: var(--color-text-3); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; } .input-affix > .input { border-radius: 0 var(--radius-2) var(--radius-2) 0; } .input-affix > .input-state { flex: 1; } .input-affix > .input-state > .input { border-radius: 0 var(--radius-2) var(--radius-2) 0; } .input-icon { position: relative; } .input-icon > .i, .input-icon > svg:first-child { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--color-text-3); pointer-events: none; } .input-icon > .input { padding-left: 34px; } .input-icon > .kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); } /* Interruptor (button role="switch" aria-checked): pista de 36 × 20 con botón cuadrado. Se distingue de la casilla (16 × 16) por tamaño y por la pista; encendido en tinta. */ .switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--type-ui-size); text-align: left; color: var(--color-text); } .switch__track { position: relative; width: 36px; height: 20px; border-radius: var(--radius-1); background: var(--color-bg-sunken); border: 1px solid var(--color-border-control); transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); flex: none; } .switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 1px; background: var(--color-text-3); transition: transform var(--dur-base) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard); } .switch[aria-checked="true"] .switch__track, .switch.is-on .switch__track { background: var(--color-action); border-color: var(--color-action); } .switch[aria-checked="true"] .switch__track::after, .switch.is-on .switch__track::after { transform: translateX(16px); background: var(--color-on-action); } .switch[aria-disabled="true"], .switch.is-disabled, .switch:disabled { opacity: .5; cursor: not-allowed; } .switch__state { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-3); min-width: 3ch; } .check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .check__box { width: 16px; height: 16px; border: 1px solid var(--color-border-control); border-radius: var(--radius-1); background: var(--color-bg); display: inline-grid; place-items: center; flex: none; } .check.is-on .check__box { background: var(--color-action); border-color: var(--color-action); color: var(--color-on-action); } .check.is-mixed .check__box { background: var(--color-action); border-color: var(--color-action); } .check.is-mixed .check__box::after { content: ""; width: 8px; height: 2px; background: var(--color-on-action); } .check__box svg { width: 12px; height: 12px; stroke-width: 2.5; } .radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .radio__dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--color-border-control); background: var(--color-bg); display: inline-grid; place-items: center; flex: none; transition: border-width var(--dur-fast) var(--ease-standard); } .radio.is-on .radio__dot { border: 5px solid var(--color-action); } /* Casillas y radios nativos: tinta, sin color de sistema. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--color-action); } /* Versión nativa accesible: el input real va oculto y se dibuja con __box o __dot. */ .check > input, .radio > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .check > input:checked + .check__box { background: var(--color-action); border-color: var(--color-action); color: var(--color-on-action); } .radio > input:checked + .radio__dot { border: 5px solid var(--color-action); } .check > input:focus-visible + .check__box, .radio > input:focus-visible + .radio__dot { box-shadow: var(--focus-ring); } .check > input:disabled + .check__box, .radio > input:disabled + .radio__dot { background: var(--color-bg-sunken); border-color: var(--color-border); } /* ---------- Pestañas (navegan · subrayado bermellón) y segmentado (filtra · relleno de tinta) */ .tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none; } .tab { position: relative; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 0 11px; color: var(--color-text-2); font-weight: var(--weight-medium); white-space: nowrap; } .tab:hover { color: var(--color-text); } .tab .count { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-3); } .tab.is-active, .tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--color-text); font-weight: var(--weight-semibold); } .tab.is-active::after, .tab[aria-selected="true"]::after, .tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-accent); } .seg { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-2); overflow: hidden; background: var(--color-bg); } .seg > button { height: calc(var(--control-h-sm) - 2px); padding: 0 12px; font-size: var(--type-sm-size); font-weight: var(--weight-medium); color: var(--color-text-2); border-left: 1px solid var(--color-border); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .seg > button:first-child { border-left: 0; } .seg > button:hover { background: var(--color-bg-hover); color: var(--color-text); } .seg > button.is-active, .seg > button[aria-pressed="true"], .seg > button[aria-checked="true"] { background: var(--color-action); color: var(--color-on-action); font-weight: var(--weight-semibold); } .seg > button.is-active + button, .seg > button[aria-pressed="true"] + button, .seg > button[aria-checked="true"] + button { border-left-color: transparent; } .seg > button:focus-visible { outline-offset: -4px; } /* El activo va relleno de tinta: su anillo (hacia dentro) cambia al color del texto sobre tinta para que se vea (12). */ .seg > button.is-active:focus-visible, .seg > button[aria-pressed="true"]:focus-visible, .seg > button[aria-checked="true"]:focus-visible { outline-color: var(--color-on-action); } /* Contador del segmentado: texto-3 (≥ 4,5:1) en reposo y el color del botón en el activo; sin opacidad (1.4.3). */ .seg .count { color: var(--color-text-3); font-size: 12px; } .seg > button.is-active .count, .seg > button[aria-pressed="true"] .count, .seg > button[aria-checked="true"] .count { color: inherit; } /* ---------- Estados, plazos, etiquetas, contadores ------------------- */ /* Estado de flujo: cuadradito (la forma de la marca) + texto. El color nunca va solo. */ .status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--type-xs-size); line-height: 16px; font-weight: var(--weight-medium); color: var(--color-text-2); white-space: nowrap; } .status::before { content: ""; width: 7px; height: 7px; background: var(--st, var(--color-text-3)); flex: none; } .status--open { --st: var(--color-info); } .status--pending { --st: var(--color-warning-mark); } .status--resolved { --st: var(--color-success); } .status--danger { --st: var(--color-danger); color: var(--color-danger); } .status--ai::before { width: 9px; height: 9px; background: var(--color-text); clip-path: polygon(0 100%, 0 30%, 30% 0, 100% 0, 100% 40%, 40% 40%, 40% 100%); } .status--draft::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-neutral); } /* Plazo: icono + texto mono, en columna fija a la derecha. */ .sla { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--color-text-3); white-space: nowrap; font-variant-numeric: tabular-nums; } .sla .i, .sla > svg { width: 13px; height: 13px; } .sla--warn { color: var(--color-warning); font-weight: var(--weight-medium); } .sla--breach { color: var(--color-danger); font-weight: var(--weight-medium); } .tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-1); font-size: 12px; line-height: 1; font-weight: var(--weight-medium); color: var(--color-text-2); background: var(--color-bg); white-space: nowrap; } .tag .i, .tag > svg { width: 12px; height: 12px; } .tag--solid { background: var(--color-bg-sunken); border-color: transparent; } .tag--success { color: var(--color-success); border-color: var(--color-success-border); background: var(--color-success-subtle); } .tag--warning { color: var(--color-warning); border-color: var(--color-warning-border); background: var(--color-warning-subtle); } .tag--danger { color: var(--color-danger); border-color: var(--color-danger-border); background: var(--color-danger-subtle); } .tag--info { color: var(--color-info); border-color: var(--color-info-border); background: var(--color-info-subtle); } .tag--neutral { color: var(--color-neutral); border-color: var(--color-border); background: var(--color-neutral-subtle); } .tag--ink { background: var(--color-action); color: var(--color-on-action); border-color: transparent; } .tag--mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0; } .count { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-3); font-variant-numeric: tabular-nums; } .count--strong { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: var(--radius-1); background: var(--color-action); color: var(--color-on-action); font-family: var(--font-mono); font-size: 11.5px; font-weight: var(--weight-medium); } /* No leído: punto de tinta (nunca bermellón) + nombre en 700. */ .unread-mark { width: 7px; height: 7px; background: var(--color-unread); display: inline-block; flex: none; } /* ---------- Avatares: personas redondas, organizaciones cuadradas, el asistente con el símbolo */ .avatar { --sz: 28px; width: var(--sz); height: var(--sz); border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--avatar-bg); color: var(--avatar-fg); font-size: calc(var(--sz) * 0.38); font-weight: var(--weight-semibold); letter-spacing: 0; box-shadow: inset 0 0 0 1px var(--color-border); overflow: hidden; } .avatar--org { border-radius: var(--radius-2); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border-strong); color: var(--color-text); } .avatar--ink { background: var(--color-action); color: var(--color-on-action); box-shadow: none; } .avatar--ai { border-radius: var(--radius-1); background: var(--color-action); color: var(--color-on-action); box-shadow: none; } .avatar--ai .rc-symbol { width: 62%; height: 62%; } .avatar--xs { --sz: 20px; font-size: 10.5px; letter-spacing: -0.02em; } .avatar--sm { --sz: 24px; } .avatar--lg { --sz: 40px; } .avatar--xl { --sz: 56px; } .avatar-stack { display: inline-flex; } .avatar-stack .avatar { box-shadow: 0 0 0 2px var(--color-bg); margin-left: -6px; } .avatar-stack .avatar:first-child { margin-left: 0; } /* Canal: glifo coloreado + nombre en tinta (el color del canal = su serie en los gráficos). */ .ch { display: inline-flex; align-items: center; gap: 6px; font-size: var(--type-xs-size); color: var(--color-text-2); white-space: nowrap; } .ch .i, .ch > svg { width: 14px; height: 14px; color: var(--chc); stroke-width: 1.8; } .ch--whatsapp { --chc: var(--ch-whatsapp); } .ch--email { --chc: var(--ch-email); } .ch--instagram { --chc: var(--ch-instagram); } .ch--messenger { --chc: var(--ch-messenger); } .ch--web { --chc: var(--ch-web); } .ch--voice { --chc: var(--ch-voice); } .ch--sms { --chc: var(--ch-sms); } .ch--form { --chc: var(--ch-form); } .ch-swatch { width: 8px; height: 8px; background: var(--chc); display: inline-block; flex: none; } /* ---------- Superficies flotantes ------------------------------------ */ .menu { min-width: 240px; padding: 4px; background: var(--color-bg-raised); border-radius: var(--radius-3); box-shadow: var(--elev-2); z-index: var(--z-dropdown); } .menu__label { padding: 8px 10px 4px; } .menu__item { display: flex; align-items: center; gap: 10px; width: 100%; height: 32px; padding: 0 10px; border-radius: var(--radius-1); font-size: 13.5px; color: var(--color-text); text-align: left; text-decoration: none; } .menu__item .i, .menu__item > svg { width: 15px; height: 15px; color: var(--color-text-3); } .menu__item .kbd, .menu__item .meta { margin-left: auto; } .menu__item .meta { font-size: 12px; color: var(--color-text-3); } .menu__item:hover, .menu__item.is-hover, .menu__item:focus-visible { background: var(--color-bg-hover); } .menu__item:focus-visible { outline-offset: -2px; } .menu__item[aria-checked="true"]::after { content: ""; margin-left: auto; width: 7px; height: 7px; background: var(--color-text); } .menu__item--danger, .menu__item--danger .i, .menu__item--danger > svg { color: var(--color-danger); } .menu__sep { height: 1px; margin: 4px -4px; background: var(--color-border); } .tooltip { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--tooltip-bg); color: var(--tooltip-fg); border-radius: var(--radius-1); font-size: 12px; line-height: 16px; white-space: nowrap; z-index: var(--z-tooltip); } .tooltip .kbd { background: transparent; color: inherit; border-color: currentColor; opacity: .7; } .tooltip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: inherit; transform: translateX(-50%) rotate(45deg); } .toast { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; width: 384px; max-width: 100%; padding: 14px 14px 14px 16px; background: var(--toast-bg); color: var(--toast-fg); border-radius: var(--radius-2); box-shadow: var(--elev-2); overflow: hidden; z-index: var(--z-toast); } .toast__title { font-weight: var(--weight-semibold); font-size: 13.5px; line-height: 18px; } .toast__body { font-size: 13px; line-height: 18px; color: var(--toast-fg-2); margin-top: 2px; } .toast__action { font-size: 13px; font-weight: var(--weight-semibold); color: var(--toast-fg); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .toast .i { margin-top: 1px; } .toast--success .i.lead { color: var(--toast-success); } .toast--error .i.lead { color: var(--toast-error); } .toast__timer { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--toast-progress); opacity: .6; } .dialog { width: 480px; max-width: 100%; background: var(--color-bg-raised); border-radius: var(--radius-3); box-shadow: var(--elev-3); overflow: hidden; } .dialog__head { padding: 22px 24px 0; } .dialog__title { font-size: 20px; line-height: 26px; letter-spacing: -0.018em; font-weight: var(--weight-bold); } .dialog__body { padding: 10px 24px 22px; color: var(--color-text-2); font-size: var(--type-ui-size); line-height: 21px; } .dialog__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--color-border); background: var(--color-bg-subtle); } .backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; padding: var(--space-4); background: var(--color-bg-backdrop); } .consequences { display: grid; gap: 0; margin-top: 12px; border-top: 1px solid var(--color-border); } .consequences li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--color-border-subtle); font-size: 13px; line-height: 18px; color: var(--color-text); } .consequences .i, .consequences svg { width: 14px; height: 14px; margin-top: 2px; color: var(--color-text-3); } /* ---------- Tabla densa ---------------------------------------------- */ .table { width: 100%; border-collapse: collapse; font-size: var(--density-text); } .table th { position: relative; text-align: left; font-size: 12px; font-weight: var(--weight-semibold); color: var(--color-text-2); padding: 0 var(--cell-px) 8px; border-bottom: 1px solid var(--color-rule); white-space: nowrap; vertical-align: bottom; background: none; text-transform: none; letter-spacing: 0; } .table th.is-sorted, .table th[aria-sort="ascending"], .table th[aria-sort="descending"] { color: var(--color-text); } .table th .i, .table th svg { width: 12px; height: 12px; vertical-align: -1px; } .table td { padding: var(--cell-py) var(--cell-px); border-top: 0; border-bottom: 1px solid var(--color-border-subtle); vertical-align: middle; color: var(--color-text); } .table tbody tr:hover td, .table tr.is-hover td { background: var(--color-bg-hover); } .table tr.is-selected td, .table tr[aria-selected="true"] td { background: var(--color-bg-selected); } .table tr.is-current td, .table tr[aria-current="true"] td { background: var(--color-bg-current); } .table tr.is-current td:first-child, .table tr[aria-current="true"] td:first-child { box-shadow: inset var(--border-mark) 0 0 var(--color-accent); } .table .r { text-align: right; } /* Columnas numéricas comparables: mono con cifras tabulares (los importes sueltos van en sans). */ .table td.r, .table td.num-cell { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: var(--type-mono-track); font-variant-numeric: tabular-nums; white-space: nowrap; } .table td.mono, .table td .mono { white-space: nowrap; } .table .w-check { width: 36px; padding-right: 0; } .table .cell-main { display: flex; align-items: center; gap: 10px; min-width: 0; } .table .cell-sub { font-size: 12px; color: var(--color-text-3); } .table .row-actions { opacity: 0; display: inline-flex; gap: 2px; } .table tr:hover .row-actions, .table tr.is-hover .row-actions, .table tr:focus-within .row-actions { opacity: 1; } .table tr.is-expanded td { border-bottom: 0; } .table tr.detail-row td { background: var(--color-bg-subtle); padding-top: 0; } .table-wrap { width: 100%; overflow-x: auto; } /* ---------- Lista de definición editable ---------------------------- */ .dl { display: grid; grid-template-columns: minmax(96px, 36%) 1fr; column-gap: 12px; } .dl > dt, .dl > dd { padding: 7px 0; border-bottom: 1px solid var(--color-border-subtle); font-size: 13px; line-height: 18px; } .dl > dt { color: var(--color-text-3); } .dl > dd { color: var(--color-text); min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 6px; } .dl > dd .edit { opacity: 0; color: var(--color-text-3); flex: none; } .dl .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .dl > dd:hover, .dl > dd.is-hover { background: var(--color-bg-hover); margin-left: -6px; padding-left: 6px; margin-right: -6px; padding-right: 6px; } .dl > dd:hover .edit, .dl > dd.is-hover .edit, .dl > dd:focus-within .edit { opacity: 1; } .dl > dd.is-editing { padding: 3px 0; } .dl > dd.is-editing .input { height: 28px; font-size: 13px; } /* ---------- Línea de tiempo (historial) ----------------------------- */ .timeline { position: relative; display: grid; gap: 0; } .tl-item { position: relative; display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; padding-bottom: 18px; } .tl-item::before { content: ""; position: absolute; left: 10px; top: 14px; bottom: -2px; width: 1px; background: var(--color-border-strong); } .tl-item:last-child::before { display: none; } .tl-node { position: relative; z-index: 1; width: 22px; height: 22px; display: grid; place-items: center; background: var(--color-bg); color: var(--color-text-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-1); } .tl-node .i, .tl-node > svg { width: 12px; height: 12px; stroke-width: 1.9; } .tl-node--ink { background: var(--color-action); color: var(--color-on-action); border-color: transparent; } .tl-node--route { background: var(--color-action); border-color: transparent; color: var(--color-on-action); } .tl-node--route .rc-symbol { width: 13px; height: 13px; } .tl-group { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-3); padding: 2px 0 10px 34px; } .tl-meta { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--color-text-3); } .tl-title { font-size: 13.5px; line-height: 19px; color: var(--color-text); margin-top: 1px; } .tl-body { margin-top: 6px; font-size: 13px; line-height: 19px; color: var(--color-text-2); } /* ---------- Stepper de etapas (proceso) ------------------------------ */ .stepper { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; } .step { display: grid; gap: 7px; font-size: 12px; color: var(--color-text-3); } .step::before { content: ""; height: 4px; background: var(--color-border); } .step.is-done { color: var(--color-text-2); } .step.is-done::before { background: var(--color-text); } .step.is-current, .step[aria-current="step"] { color: var(--color-text); font-weight: var(--weight-semibold); } .step.is-current::before, .step[aria-current="step"]::before { background: var(--color-accent); } .step .when { font-family: var(--font-mono); font-size: 11.5px; font-weight: var(--weight-regular); color: var(--color-text-3); } /* ---------- Paginación y skeleton ------------------------------------ */ .pagination { display: flex; align-items: center; gap: 4px; font-size: 13px; } .pagination .range { color: var(--color-text-3); margin-right: auto; font-family: var(--font-mono); font-size: 12px; } .page { min-width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: var(--radius-1); font-family: var(--font-mono); font-size: 12px; color: var(--color-text-2); } .page:hover { background: var(--color-bg-hover); } .page.is-current, .page[aria-current="page"] { color: var(--color-text); font-weight: var(--weight-medium); box-shadow: inset 0 -2px 0 var(--color-accent); border-radius: 0; } /* Skeleton: la forma real de la fila; late en 1,4 s (sin degradados). */ .skel { display: block; background: var(--color-bg-sunken); border-radius: var(--radius-1); animation: rc-skel 1.4s var(--ease-standard) infinite; } @keyframes rc-skel { 50% { opacity: .55; } } /* ---------- Avisos en línea (banner) -------------------------------- */ .notice { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border-left: var(--border-mark) solid var(--nt, var(--color-info)); background: var(--nb, var(--color-info-subtle)); color: var(--color-text); font-size: 13px; line-height: 19px; } .notice > .i, .notice > svg { width: 16px; height: 16px; color: var(--nt, var(--color-info)); margin-top: 1px; } .notice--info { --nt: var(--color-info); --nb: var(--color-info-subtle); } .notice--warning { --nt: var(--color-warning-mark); --nb: var(--color-warning-subtle); } .notice--warning > .i, .notice--warning > svg { color: var(--color-warning); } .notice--danger { --nt: var(--color-danger); --nb: var(--color-danger-subtle); } .notice--success { --nt: var(--color-success); --nb: var(--color-success-subtle); } .notice--neutral { --nt: var(--color-text); --nb: var(--color-bg-subtle); } .notice--neutral > .i, .notice--neutral > svg { color: var(--color-text); } .notice a { font-weight: var(--weight-semibold); white-space: nowrap; } /* ---------- Medidor (barra fina) ------------------------------------ */ .meter { height: 4px; background: var(--color-border); position: relative; } .meter > span { position: absolute; inset: 0 auto 0 0; background: var(--color-text); } .meter--warn > span { background: var(--color-warning-mark); } .meter--danger > span { background: var(--color-danger); } .meter .target { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--color-text); } /* ---------- Patrones compartidos: sección de ajustes, barra de guardado y vacío */ /* Sección de ajustes (14.19): regla de 2 px, explicación de 280 a la izquierda y campos a la derecha. */ .fsec { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 48px; row-gap: var(--space-4); border-top: var(--border-rule) solid var(--color-rule); padding-top: 18px; } .fsec + .fsec { margin-top: 56px; } .fsec--wide { grid-template-columns: minmax(0, 1fr); } .fsec__intro h2, .fsec__intro h3 { font-size: 18px; line-height: 23px; letter-spacing: -0.016em; font-weight: var(--weight-bold); } .fsec__intro p { margin-top: 8px; font-size: 13px; line-height: 19px; color: var(--color-text-2); max-width: 44ch; } .fsec__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: start; } .fsec__fields .span-2 { grid-column: span 2; } /* Barra de guardado (14.19): inversa, con el número de cambios y el primario invertido. */ .save-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 12px 14px 12px 16px; background: var(--savebar-bg); color: var(--savebar-fg); border-radius: var(--radius-2); box-shadow: var(--elev-2); } .save-bar__err { display: inline-flex; align-items: center; gap: 6px; color: var(--toast-error); } .save-bar__acts { margin-left: auto; display: flex; gap: 8px; } .save-bar .btn--subtle { --btn-fg: var(--toast-fg-2); } .save-bar .btn--subtle:hover { --btn-bg: transparent; --btn-fg: var(--savebar-fg); } .save-bar__primary { --btn-bg: var(--savebar-action); --btn-fg: var(--savebar-on-action); } .save-bar__primary .kbd { background: transparent; color: inherit; border-color: currentColor; opacity: .55; } /* Vacío (14.21): declaración, explicación y siguiente paso real. Sin ilustraciones. */ .zero { padding: 28px 22px 26px; display: grid; gap: 10px; justify-items: start; } .zero__title { font-size: 30px; line-height: 32px; letter-spacing: -0.034em; font-weight: var(--weight-bold); } .zero__title--sm { font-size: 20px; line-height: 25px; letter-spacing: -0.02em; } .zero__text { font-size: 13.5px; line-height: 20px; color: var(--color-text-2); max-width: 40ch; } .zero__next { margin-top: 10px; display: grid; gap: 6px; border-top: 1px solid var(--color-border); padding-top: 10px; justify-self: stretch; } .zero__link { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: var(--weight-semibold); text-decoration: none; } .zero__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } /* ---------- Pantalla de carga de una ruta ---------------------------- */ .route-feedback { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: var(--space-4); padding: var(--space-8) var(--space-4); max-width: 660px; margin: auto; text-align: center; color: var(--color-text); } .route-feedback .rc-symbol { width: 32px; height: 32px; } .route-feedback strong { font-size: var(--type-h3-size); line-height: var(--type-h3-line); letter-spacing: var(--type-h3-track); font-weight: var(--weight-bold); } .route-feedback p { color: var(--color-text-2); font-size: var(--type-body-size); line-height: var(--type-body-line); max-width: var(--measure); } .route-feedback .id { color: var(--color-text-3); } /* ---------- Responsive ---------------------------------------------- */ @media (max-width: 1023px) { .fsec { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .fsec__fields { grid-template-columns: minmax(0, 1fr); } .fsec__fields .span-2 { grid-column: auto; } .dialog__foot { justify-content: stretch; } .dialog__foot > .btn { flex: 1 1 auto; } .toast { width: 100%; } } /* En móvil y en pantallas táctiles no hay modo compacto: los objetivos táctiles miden ≥ 44 px (11). */ @media (max-width: 767px), (pointer: coarse) { [data-density="compact"] { --control-h: 36px; --control-h-sm: 30px; --control-h-lg: 44px; --control-px: 14px; --row-h: 44px; --cell-px: 12px; --cell-py: 11px; --list-item-py: 13px; --panel-px: 24px; --density-text: var(--type-ui-size); } } /* Móvil con el dedo (6.4, 11 y 12): todo control mide ≥ 44 px de alto, también los pequeños, los segmentados y los chips de filtro. Las vistas que necesitan otra cosa la piden con su propia clase, nunca bajando de 44. */ @media (max-width: 767px) and (pointer: coarse) { :root, [data-density="compact"] { --control-h: 44px; --control-h-sm: 44px; --control-h-lg: 48px; } .seg > button { min-height: 42px; } .page { min-width: 44px; height: 44px; } } /* ---------- Movimiento reducido ------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* src/PublicLanding.css */ /* ========================================================================== RouterClip · web pública: armazón compartido (docs/DISENO-ROUTERCLIP.md 6.3 y 15.12) -------------------------------------------------------------------------- Cabecera, navegación, secciones con kicker numerado, índice editorial, tabla de canales, stepper de pasos, lista de definición, comprobaciones, preguntas, enlaces, llamada final y pie de tinta. Lo usan la landing React (PublicLanding.tsx) y las páginas estáticas generadas (build/*Page.ts), que reciben esta hoja dentro de /site.css (vite.config.ts) junto con los tokens y la base: un solo sistema para toda la web. Solo tokens: sin hex, sin degradados, sin píldoras y sin selectores de tema. Rejilla de 12 columnas con gutter de 24 y márgenes de 64 / 24 / 16. ========================================================================== */ .site { --site-margin: var(--page-margin); --site-gap: 136px; --site-top-h: 76px; position: relative; min-height: 100vh; background: var(--color-bg); color: var(--color-text); overflow-x: clip; } @media (max-width: 1023px) { .site { --site-margin: 24px; --site-gap: 88px; } } @media (max-width: 960px) { .site { --site-top-h: 64px; } } @media (max-width: 420px) { .site { --site-margin: 16px; } } .site :where([id]) { scroll-margin-top: calc(var(--site-top-h) + var(--space-6)); } .site-wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--site-margin); } .site-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); } .site-main { display: block; padding-bottom: var(--site-gap); } .site-lede { font-family: var(--font-serif); font-size: 20px; line-height: 1.5; letter-spacing: var(--type-lede-track); color: var(--color-text-2); max-width: 46ch; } .site-lede--ink { color: var(--color-text); font-size: var(--type-lede-size); line-height: var(--type-lede-line); } .site-small { font-size: var(--type-sm-size); line-height: 19px; color: var(--color-text-3); } .site-link { color: var(--color-text); font-weight: var(--weight-semibold); text-decoration: underline; text-decoration-color: var(--color-border-control); text-underline-offset: 4px; } .site-link:hover { text-decoration-color: currentColor; } /* ---------- Cabecera ------------------------------------------------- */ .site-top { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-bg); border-bottom: var(--border-hair) solid var(--color-border); } .site-top__inner { position: relative; display: flex; align-items: center; height: var(--site-top-h); } .site-top__logo { display: inline-flex; align-items: center; flex: none; padding: var(--space-1) 0; color: var(--color-text); text-decoration: none; } .site-top__logo .rc-logo { width: 168px; height: auto; } .site-nav { display: flex; align-items: center; gap: 30px; margin-left: 56px; font-size: 14.5px; font-weight: var(--weight-medium); } .site-nav a { position: relative; padding: var(--space-2) var(--space-1-5); margin-inline: calc(-1 * var(--space-1-5)); color: var(--color-text-2); text-decoration: none; white-space: nowrap; } .site-nav a:hover { color: var(--color-text); } .site-nav a[aria-current="page"] { color: var(--color-text); } .site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: var(--space-1-5); right: var(--space-1-5); bottom: 0; height: var(--border-rule); background: var(--color-accent); } .site-top__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-5); font-size: 14.5px; font-weight: var(--weight-medium); } .site-lang { display: inline-flex; align-items: center; gap: 2px; color: var(--color-text-3); white-space: nowrap; } .site-lang a { padding: var(--space-2) 3px; color: var(--color-text-3); text-decoration: none; } .site-lang a:hover { color: var(--color-text); } .site-lang a[aria-current="page"] { color: var(--color-text); font-weight: var(--weight-semibold); } .site-login { color: var(--color-text); text-decoration: none; white-space: nowrap; } .site-login:hover { text-decoration: underline; text-underline-offset: 4px; } .site-top__menu { display: none; } /* Menú plegado (≤ 960): botón cuadrado y panel que flota bajo la cabecera. La versión estática usa
. */ .site-menu-toggle { list-style: none; } .site-menu-toggle::-webkit-details-marker { display: none; } .site-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-dropdown); display: grid; gap: var(--space-1); padding: var(--space-3) var(--site-margin) var(--space-5); background: var(--color-bg-raised); border-bottom: var(--border-hair) solid var(--color-border); box-shadow: var(--elev-2); } .site-menu nav { display: grid; } .site-menu nav a { display: flex; align-items: center; min-height: var(--control-h-lg); border-bottom: var(--border-hair) solid var(--color-border-subtle); color: var(--color-text); font-size: var(--type-body-size); font-weight: var(--weight-semibold); text-decoration: none; } .site-menu nav a[aria-current="page"] { box-shadow: inset var(--border-mark) 0 0 var(--color-accent); padding-left: var(--space-3); } .site-menu__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--control-h-lg); } .site-menu__row .site-lang a { min-width: var(--control-h-lg); min-height: var(--control-h-lg); display: inline-grid; place-items: center; } .site-menu .btn { margin-top: var(--space-2); } details.site-top__menu[open] > summary .i--open, details.site-top__menu:not([open]) > summary .i--close { display: none; } @media (max-width: 960px) { .site-nav, .site-top__right { display: none; } .site-top__menu { display: block; margin-left: auto; } .site-top__menu > .btn, .site-top__menu > summary { width: var(--control-h-lg); height: var(--control-h-lg); } .site-top__logo .rc-logo { width: 144px; } } /* ---------- Secciones ------------------------------------------------ */ .site-sec { margin-top: var(--site-gap); } .site-sec__head { display: grid; gap: var(--space-5); align-content: start; } .site-sec__head .t-display, .site-cta .t-display { max-width: 16ch; } /* Secciones de apoyo: titular de 44 para que solo las principales (01, 02, precios y cierre) lleven el display. */ .site-h2 { font-size: var(--type-h1-size); line-height: var(--type-h1-line); letter-spacing: var(--type-h1-track); font-weight: var(--weight-bold); max-width: 22ch; } .site-sec__head--split { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-5); align-items: end; } .site-sec__head--split > :first-child { grid-column: 1 / span 7; display: grid; gap: var(--space-5); } .site-sec__head--split > .site-lede { grid-column: 8 / span 5; } .site-sec__body { margin-top: var(--space-12); } .site-kicker { display: flex; align-items: center; gap: var(--space-2); } /* Índice editorial: atributos del producto numerados, filas con regla, nunca tarjetas con icono. */ .site-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gutter); border-top: var(--border-rule) solid var(--color-rule); } .site-index > li { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-content: start; padding: var(--space-5) 0 var(--space-6); border-bottom: var(--border-hair) solid var(--color-border); } .site-index__n { padding-top: 3px; font-family: var(--font-mono); font-size: var(--type-mono-size); color: var(--color-text-3); } .site-index h3 { font-size: var(--type-h4-size); line-height: var(--type-h4-line); letter-spacing: var(--type-h4-track); font-weight: var(--weight-semibold); } .site-index p { margin-top: var(--space-1-5); max-width: 54ch; font-size: var(--type-ui-size); line-height: 21px; color: var(--color-text-2); } .site-index a { display: inline-flex; margin-top: var(--space-3); font-size: var(--type-sm-size); } /* Canales: registros comparables en filas (glifo y nombre, uso, ayuda opcional y enlace). */ .site-channels { border-top: var(--border-rule) solid var(--color-rule); } .site-channels > li { display: grid; grid-template-columns: minmax(180px, 3fr) minmax(0, 5fr) minmax(0, 3fr) auto; column-gap: var(--grid-gutter); align-items: baseline; padding: var(--space-5) 0; border-bottom: var(--border-hair) solid var(--color-border); } .site-channels h3 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-h4-size); line-height: var(--type-h4-line); letter-spacing: var(--type-h4-track); font-weight: var(--weight-semibold); } .site-channels h3 .ch-glyph { width: 18px; height: 18px; color: var(--chc); stroke-width: 1.8; flex: none; align-self: center; } .site-channels p { font-size: var(--type-ui-size); line-height: 21px; color: var(--color-text-2); } .site-channels .public-channel-support { display: grid; gap: 2px; font-size: var(--type-sm-size); line-height: var(--type-sm-line); } .site-channels .public-channel-support strong { font-weight: var(--weight-medium); color: var(--color-text-2); } .site-channels .public-channel-support span { font-family: var(--font-mono); font-size: var(--type-mono-size); color: var(--color-text-3); } .site-channels .link-arrow { grid-column: -2; justify-self: end; font-size: var(--type-sm-size); white-space: nowrap; } .ch-glyph--whatsapp { --chc: var(--ch-whatsapp); } .ch-glyph--email { --chc: var(--ch-email); } .ch-glyph--instagram { --chc: var(--ch-instagram); } .ch-glyph--messenger { --chc: var(--ch-messenger); } .ch-glyph--web { --chc: var(--ch-web); } .ch-glyph--voice { --chc: var(--ch-voice); } /* Subsección dentro de una sección numerada (canales en 04, despliegue en 05): titular de 32 y texto a 64 caracteres. */ .site-sub { margin-top: var(--space-20); } .site-sub__head { display: grid; gap: var(--space-3); max-width: var(--measure); margin-bottom: var(--space-6); } .site-h3 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); letter-spacing: var(--type-h2-track); font-weight: var(--weight-bold); } .site-sub__head > p { font-size: var(--type-body-size); line-height: var(--type-body-line); color: var(--color-text-2); } /* Canales comparados en una tabla (14.0 y 14.13): cabecera de 12/600 sobre regla de tinta, una fila por canal con lo que lo conecta y lo que hace el equipo, y el enlace a su página. En ≤ 760 px cada fila se apila con su etiqueta. */ .site-chtable { width: 100%; border-collapse: collapse; border-top: var(--border-rule) solid var(--color-rule); font-size: var(--type-ui-size); line-height: 21px; } .site-chtable thead th { padding: 10px var(--space-6) 10px 0; border-bottom: var(--border-hair) solid var(--color-border-strong); text-align: left; font-size: var(--type-xs-size); line-height: var(--type-xs-line); font-weight: var(--weight-semibold); color: var(--color-text-3); white-space: nowrap; } .site-chtable tbody :is(th, td) { padding: var(--space-4) var(--space-6) var(--space-4) 0; border-bottom: var(--border-hair) solid var(--color-border); text-align: left; vertical-align: baseline; font-weight: var(--weight-regular); } .site-chtable tbody th { width: 22%; } .site-chtable td:nth-child(2) { width: 28%; color: var(--color-text); } .site-chtable td:nth-child(3) { color: var(--color-text-2); } .site-chtable :is(th, td):last-child { padding-right: 0; } .site-chtable__ch { display: inline; font-size: var(--type-h4-size); line-height: var(--type-h4-line); letter-spacing: var(--type-h4-track); font-weight: var(--weight-semibold); color: var(--color-text); white-space: nowrap; } /* El nombre va en línea (no flex) para que su línea base sea la de las otras celdas de la fila. */ .site-chtable .ch-glyph { width: 18px; height: 18px; margin-right: var(--space-2); vertical-align: -3px; color: var(--chc); stroke-width: 1.8; } .site-chtable__go { width: 1%; text-align: right !important; white-space: nowrap; } .site-chtable__go .link-arrow { font-size: var(--type-sm-size); } .site-sub .public-channel-support { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-4); font-size: var(--type-sm-size); line-height: var(--type-sm-line); color: var(--color-text-2); } .site-sub .public-channel-support strong { font-weight: var(--weight-medium); } .site-sub .public-channel-support span { font-family: var(--font-mono); font-size: var(--type-mono-size); color: var(--color-text-3); } /* Stepper horizontal (14.12): segmentos de 4 px unidos, en regla neutra porque ningún paso está hecho (la tinta es para lo hecho y el bermellón para el paso actual), «Paso 1 de 3» en mono, nombre y texto. */ .site-stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3px; } .site-stepper > li { display: grid; align-content: start; gap: var(--space-2); padding-right: var(--grid-gutter); } .site-stepper > li::before { content: ""; height: 4px; margin-bottom: var(--space-3); margin-right: calc(-1 * var(--grid-gutter)); background: var(--color-border-strong); } .site-stepper__n { font-family: var(--font-mono); font-size: var(--type-mono-size); color: var(--color-text-3); } .site-stepper h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-line); letter-spacing: var(--type-h3-track); font-weight: var(--weight-semibold); } .site-stepper p { max-width: 40ch; font-size: var(--type-body-size); line-height: var(--type-body-line); color: var(--color-text-2); } /* Lista de definición de la web (14.0): un hecho por fila, etiqueta a la izquierda y detalle a la derecha. */ .site-dl { border-top: var(--border-hair) solid var(--color-border-strong); } .site-dl > div { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--border-hair) solid var(--color-border); } .site-dl dt { font-size: var(--type-ui-size); line-height: 22px; font-weight: var(--weight-semibold); color: var(--color-text); } .site-dl dd { margin: 0; font-size: var(--type-body-size); line-height: 22px; color: var(--color-text-2); } .site-deploy { row-gap: var(--space-10); } /* Pasos de las páginas de temas: barras de 4 px en regla neutra (la tinta queda para lo hecho), número en mono y texto. */ .site-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gutter); counter-reset: step; } .site-steps > li { display: grid; align-content: start; gap: var(--space-2); } .site-steps > li::before { content: ""; height: 4px; margin-bottom: var(--space-3); background: var(--color-border-strong); } .site-steps__n { font-family: var(--font-mono); font-size: var(--type-mono-size); color: var(--color-text-3); } .site-steps h3 { font-size: 22px; line-height: 1.18; letter-spacing: var(--type-h3-track); font-weight: var(--weight-semibold); } .site-steps p { max-width: 40ch; font-size: var(--type-body-size); line-height: var(--type-body-line); color: var(--color-text-2); } /* Comprobaciones: lo que incluye, con circle-check. */ .site-checklist { display: grid; gap: 0; border-top: var(--border-hair) solid var(--color-border-strong); } .site-checklist li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-2); align-items: start; padding: var(--space-3) 0; border-bottom: var(--border-hair) solid var(--color-border); font-size: var(--type-body-size); line-height: 22px; } .site-checklist .i { width: 18px; height: 18px; margin-top: 2px; color: var(--color-text); } .site-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3) var(--space-4); border-left: var(--border-mark) solid var(--color-text); background: var(--color-bg-subtle); font-size: var(--type-sm-size); line-height: 20px; color: var(--color-text-2); } .site-note .i { width: 16px; height: 16px; margin-top: 2px; color: var(--color-text); } /* Preguntas: filas con regla; el signo pasa a aspa al abrir. */ .site-faq { border-top: var(--border-rule) solid var(--color-rule); } .site-faq details { border-bottom: var(--border-hair) solid var(--color-border); } .site-faq summary { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: var(--space-4); align-items: start; padding: var(--space-5) 0; cursor: pointer; list-style: none; font-size: var(--type-h4-size); line-height: 24px; letter-spacing: var(--type-h4-track); font-weight: var(--weight-semibold); } .site-faq summary { padding-inline: var(--space-2); margin-inline: calc(-1 * var(--space-2)); } /* The ring sits inside the row: it never touches the question nor the rule above it. */ .site-faq summary:focus-visible, .pricing-details > summary:focus-visible { outline-offset: calc(-1 * var(--focus-width)); } .site-faq summary::-webkit-details-marker { display: none; } .site-faq summary:hover { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-border-control); text-underline-offset: 4px; } .site-faq__sign { position: relative; width: 24px; height: 24px; } .site-faq__sign::before, .site-faq__sign::after { content: ""; position: absolute; left: 5px; right: 5px; top: 11px; height: 2px; background: var(--color-text); transition: transform var(--dur-base) var(--ease-standard); } .site-faq__sign::after { transform: rotate(90deg); } .site-faq details[open] .site-faq__sign::before { transform: rotate(45deg); } .site-faq details[open] .site-faq__sign::after { transform: rotate(135deg); } .site-faq details > :not(summary) { max-width: var(--measure); padding: 0 0 var(--space-6); font-size: var(--type-body-size); line-height: var(--type-body-line); color: var(--color-text-2); } /* Enlaces relacionados: filas con número, título, texto y flecha. */ .site-links { border-top: var(--border-hair) solid var(--color-border-strong); } .site-links a { display: grid; grid-template-columns: 56px minmax(160px, 3fr) minmax(0, 6fr) 24px; column-gap: var(--grid-gutter); align-items: baseline; padding: var(--space-4) 0; border-bottom: var(--border-hair) solid var(--color-border); color: var(--color-text); text-decoration: none; } .site-links a:hover { background: var(--color-bg-hover); } .site-links a:hover strong { text-decoration: underline; text-underline-offset: 4px; } .site-links span:first-child { font-family: var(--font-mono); font-size: var(--type-mono-size); color: var(--color-text-3); } .site-links strong { font-size: var(--type-h4-size); line-height: var(--type-h4-line); font-weight: var(--weight-semibold); } .site-links small { font-size: var(--type-ui-size); line-height: 20px; color: var(--color-text-2); } .site-links .i { align-self: center; width: 18px; height: 18px; color: var(--color-text); } /* Enlaces de la columna de preguntas: más estrechos, el texto bajo el título. */ .site-links--compact { margin-top: var(--space-10); border-top: var(--border-hair) solid var(--color-border-strong); } .site-links__title { padding: var(--space-3) 0 var(--space-2); font-size: var(--type-sm-size); line-height: var(--type-sm-line); font-weight: var(--weight-semibold); color: var(--color-text-2); } .site-links--compact a { grid-template-columns: 32px minmax(0, 1fr) 18px; row-gap: 2px; padding: var(--space-3) 0; } .site-links--compact strong { font-size: var(--type-body-size); line-height: 22px; } .site-links--compact small { grid-column: 2; grid-row: 2; font-size: var(--type-sm-size); line-height: 19px; } .site-links--compact .i { grid-column: 3; grid-row: 1 / span 2; } .site-links--compact span:first-child { padding-top: 3px; } /* Llamada final: regla de tinta, titular grande y la CTA de la pantalla. */ .site-cta { padding-top: var(--space-10); border-top: var(--border-rule) solid var(--color-rule); row-gap: var(--space-8); align-items: end; } .site-cta > div:first-child { grid-column: 1 / span 7; display: grid; gap: var(--space-5); } .site-cta > div:last-child { grid-column: 8 / span 5; display: grid; gap: var(--space-5); } .site-cta__text { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); color: var(--color-text-2); } .site-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); } /* ---------- Secciones de dos columnas y preguntas -------------------------------- */ .site-split__main { grid-column: 1 / span 6; display: grid; gap: var(--space-6); align-content: start; } .site-split__aside { grid-column: 8 / span 5; } .site-faq-grid > :first-child { grid-column: 1 / span 4; display: grid; gap: var(--space-5); align-content: start; } .site-faq-grid > .site-faq { grid-column: 5 / span 8; } .site-redirect { padding-top: var(--space-16); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); color: var(--color-text-2); } .site-redirect a { color: var(--color-text); font-weight: var(--weight-semibold); } /* ---------- Pie de tinta --------------------------------------------- */ /* Tinta en claro y casi negro con una regla arriba en oscuro (--site-foot-*): nunca una losa de papel claro al final de una página oscura. Los roles «inverse» se redefinen dentro del pie para que todo lo que cuelga de él los siga. */ .site-foot { --color-bg-inverse: var(--site-foot-bg); --color-text-inverse: var(--site-foot-fg); --color-text-inverse-2: var(--site-foot-fg-2); --color-focus: var(--color-text-inverse); --color-focus-gap: var(--color-bg-inverse); padding: var(--space-12) 0 var(--space-10); background: var(--site-foot-bg); color: var(--site-foot-fg); border-top: var(--border-hair) solid var(--site-foot-rule); } .site-foot__grid { display: grid; grid-template-columns: 4fr repeat(4, minmax(0, 2fr)); column-gap: var(--grid-gutter); row-gap: var(--space-8); } .site-foot__brand { display: grid; gap: var(--space-4); align-content: start; } .site-foot__brand a { display: inline-flex; width: max-content; color: var(--color-text-inverse); } .site-foot__brand .rc-logo { width: 168px; height: auto; } .site-foot__brand p { max-width: 34ch; font-size: var(--type-sm-size); line-height: 20px; color: var(--color-text-inverse-2); } .site-foot h2 { margin-bottom: var(--space-3); font-size: var(--type-xs-size); line-height: var(--type-xs-line); font-weight: var(--weight-semibold); color: var(--color-text-inverse-2); } .site-foot nav ul { display: grid; gap: 2px; } .site-foot nav a { display: inline-block; padding: 3px 0; font-size: var(--type-sm-size); line-height: 20px; color: var(--color-text-inverse); text-decoration: none; } .site-foot nav a:hover { text-decoration: underline; text-underline-offset: 3px; } .site-foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-top: var(--space-10); padding-top: var(--space-4); border-top: var(--border-hair) solid color-mix(in srgb, var(--color-text-inverse) 18%, transparent); font-family: var(--font-mono); font-size: var(--type-mono-size); line-height: var(--type-mono-line); color: var(--color-text-inverse-2); } .site-foot__legal a { color: var(--color-text-inverse); text-decoration: none; } .site-foot__legal a:hover { text-decoration: underline; text-underline-offset: 3px; } .site-foot__legal > span { display: inline-flex; flex-wrap: wrap; gap: 0 var(--space-2); } .site-foot__links > a { white-space: nowrap; } .site-foot__links > a + a::before { content: "·"; display: inline-block; margin-right: var(--space-2); color: var(--color-text-inverse-2); } /* ---------- Responsive hasta 360 ------------------------------------- */ @media (max-width: 1100px) { .site-channels > li { grid-template-columns: minmax(160px, 3fr) minmax(0, 6fr) auto; row-gap: var(--space-2); } .site-channels .public-channel-support { grid-column: 2; } .site-channels > li > .link-arrow { grid-column: 3; grid-row: 1; } } @media (max-width: 960px) { .site-grid { grid-template-columns: minmax(0, 1fr); } .site-grid > * { grid-column: 1 / -1 !important; } .site-sec__head--split { grid-template-columns: minmax(0, 1fr); } .site-sec__head--split > * { grid-column: 1 / -1 !important; } .site-sec__body { margin-top: var(--space-8); } .site-index { grid-template-columns: minmax(0, 1fr); } .site-split__aside { margin-top: var(--space-10); } .site-faq-grid > .site-faq { margin-top: var(--space-6); } .site-index > li { grid-template-columns: 44px minmax(0, 1fr); } .site-steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); } .site-stepper { grid-template-columns: minmax(0, 1fr); row-gap: 0; } .site-stepper > li { grid-template-columns: 4px minmax(0, 1fr); column-gap: var(--space-4); padding: 0 0 var(--space-6); } .site-stepper > li > * { grid-column: 2; } .site-stepper > li::before { grid-column: 1; grid-row: 1 / span 3; height: auto; margin: 0; } .site-stepper > li:not(:last-child)::before { margin-bottom: calc(3px - var(--space-6)); } .site-sub { margin-top: var(--space-16); } .site-deploy .site-split__aside { margin-top: 0; } .site-links a { grid-template-columns: 44px minmax(0, 1fr) 20px; row-gap: 2px; } .site-links small { grid-column: 2; grid-row: 2; } .site-links .i { grid-column: 3; grid-row: 1 / span 2; } .site-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-foot__brand { grid-column: 1 / -1; } } @media (max-width: 760px) { .site-chtable, .site-chtable tbody { display: block; } .site-chtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .site-chtable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); row-gap: var(--space-2); padding: var(--space-4) 0; border-bottom: var(--border-hair) solid var(--color-border); } .site-chtable tbody :is(th, td) { display: block; width: auto !important; padding: 0; border: 0; } .site-chtable tbody th { grid-column: 1; grid-row: 1; } .site-chtable__go { grid-column: 2; grid-row: 1; } .site-chtable td[data-label] { grid-column: 1 / -1; } .site-chtable td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: var(--type-kicker-size); line-height: var(--type-kicker-line); letter-spacing: var(--type-kicker-track); text-transform: uppercase; color: var(--color-text-3); } } @media (max-width: 640px) { /* Objetivos táctiles de 44 px en móvil (6.4 y 12). Los enlaces subrayados con borde (link-arrow) crecen con una zona invisible centrada, sin separar el subrayado del texto; los del pie, en alto. */ .site .link-arrow, .site .pricing-more { position: relative; } .site .link-arrow::after, .site .pricing-more::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - var(--control-h-lg) / 2); bottom: calc(50% - var(--control-h-lg) / 2); } .site-foot nav ul { gap: 0; } .site-foot nav a { display: flex; align-items: center; min-height: var(--control-h-lg); padding: 0; } .site-foot__legal a { display: inline-flex; align-items: center; min-height: var(--control-h-lg); } .site-foot__legal { gap: 0 var(--space-6); } /* En el móvil los enlaces legales, de 44 px, se separan con aire y no con «·»: ninguna línea empieza por un separador. */ .site-foot__links { column-gap: var(--space-5) !important; } .site-foot__links > a + a::before { display: none; } .site-channels > li { grid-template-columns: minmax(0, 1fr) auto; } .site-channels > li > p, .site-channels .public-channel-support { grid-column: 1 / -1; } .site-channels > li > .link-arrow { grid-column: 2; grid-row: 1; } .site-faq summary { font-size: var(--type-body-size); line-height: 22px; padding-block: var(--space-4); } .site-h2, .site-sec__head .t-display { max-width: none; } .site-h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); letter-spacing: var(--type-h2-track); } } @media (max-width: 420px) { /* El pie sigue en dos columnas hasta 360 (como la maqueta móvil): la marca ocupa la fila de arriba. */ .site-foot__grid { column-gap: var(--space-4); } .site-actions .btn--lg { width: 100%; } .site-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } } /* ---------- Plano de rutas pequeño y página no encontrada ------------- */ /* Los usan las páginas estáticas (cabeceras y public/404.html) y la 404 de la aplicación (PublicNotFound.tsx). */ /* Plano de rutas pequeño (14.22): canales de la página → símbolo → bandeja, equipo y asistente. Una ruta bermellón. */ .mini-route { display: block; width: 100%; max-width: 440px; height: auto; margin-left: auto; overflow: visible; } .mini-route .mm-line { fill: none; stroke: var(--color-border-control); stroke-width: 2; } .mini-route .mm-line.is-live { stroke: var(--color-accent); stroke-width: 2.5; } .mini-route .mm-stop { fill: var(--color-text); } .mini-route .mm-stop.is-live { fill: var(--color-accent); } .mini-route .mm-hub { fill: var(--color-action); } .mini-route .rm-hub-mark { color: var(--color-on-action); } .mini-route .mm-dest { font-family: var(--font-sans); font-size: 14px; font-weight: var(--weight-semibold); fill: var(--color-text); } .mini-route .ch-glyph { color: var(--chc); } .mini-route .mm-line--todo { stroke: var(--color-text-3); stroke-dasharray: 5 5; } .mini-route .mm-todo { fill: var(--color-bg); stroke: var(--color-text-3); stroke-width: 1.5; stroke-dasharray: 4 3; } .mini-route--missing { max-width: 440px; margin: 0; } .not-found { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-8); padding-top: var(--space-16); } .not-found__code { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: 14px; border-bottom: var(--border-hair) solid var(--color-border-strong); } .not-found__path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--type-mono-size); line-height: var(--type-kicker-line); color: var(--color-text-3); } .not-found section { grid-column: span 6; display: grid; gap: var(--space-5); align-content: start; } /* Una sola sección (la 404 de la aplicación, en el idioma de la persona): la franja, la ruta y el titular comparten las mismas 7 columnas y el mismo borde derecho. */ .not-found--single > * { grid-column: 1 / span 7 !important; } .not-found h1, .not-found h2 { font-size: var(--type-h1-size); line-height: var(--type-h1-line); letter-spacing: var(--type-h1-track); font-weight: var(--weight-bold); } .not-found section p { max-width: 46ch; font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); color: var(--color-text-2); } .not-found nav { display: flex; flex-wrap: wrap; gap: var(--space-3); } .not-found nav a { display: inline-flex; align-items: center; height: var(--control-h-lg); padding: 0 18px; border: var(--border-hair) solid var(--color-border-strong); border-radius: var(--radius-2); color: var(--color-text); font-weight: var(--weight-semibold); text-decoration: none; } .not-found nav a:first-child { background: var(--color-action); border-color: transparent; color: var(--color-on-action); } .not-found nav a:hover { background: var(--color-bg-hover); } .not-found nav a:first-child:hover { background: var(--color-action-hover); } .not-found__route { grid-column: 1 / -1; } @media (max-width: 960px) { .mini-route { margin: 0; max-width: 360px; } .not-found { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-10); } .not-found section { grid-column: 1 / -1; } .not-found h1, .not-found h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); } } /* src/PricingSection.css */ /* ========================================================================== RouterClip · precios (docs/DISENO-ROUTERCLIP.md 14.23 y 15.12) -------------------------------------------------------------------------- Tabla comparativa: columna de etiquetas y un plan por columna, abierta por la regla de tinta. La recomendada va invertida (tinta en claro, papel en oscuro) con el rótulo «Recomendado», el cuadradito bermellón y la única CTA bermellón. Las filas quedan alineadas. En ≤ 960 px se apila por plan con la etiqueta en cada fila y la recomendada sigue invertida. Debajo, las condiciones como lista de definición (plegadas en la portada). La usan PricingSection.tsx y las páginas estáticas (build/pricingPage.ts, vía /site.css). ========================================================================== */ .site-pricing__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-6); align-items: end; } .site-pricing__head > .site-sec__head { grid-column: 1 / span 7; } .site-pricing__controls { grid-column: 8 / span 5; display: grid; gap: 10px; justify-items: end; text-align: right; } .site-pricing__currency, .pricing-currency-control { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--type-sm-size); color: var(--color-text-2); } /* Selector de moneda de las páginas estáticas: el mismo .select del primitivo (src/ui). Hasta que pricing-currency.js lo activa va desactivado, pero se ve como un control normal (no hundido). */ .pricing-currency-control .select { width: auto; min-width: 104px; height: var(--control-h-sm); font-size: var(--type-sm-size); } .pricing-currency-control .select:disabled { background: var(--color-bg); color: var(--color-text); border-color: var(--color-border-strong); border-bottom-color: var(--color-border-control); cursor: default; } .pricing-currency-note { max-width: 46ch; font-size: var(--type-xs-size); line-height: 17px; color: var(--color-text-3); } .pricing-currency-note a { color: var(--color-text-2); } /* ---------- Tabla comparativa --------------------------------------- */ .ptable { width: 100%; margin-top: var(--space-12); border-collapse: collapse; table-layout: fixed; border-top: var(--border-rule) solid var(--color-rule); } .ptable col.ptable__labels { width: 24%; } .ptable th, .ptable td { padding: 0 24px; text-align: left; vertical-align: top; font-weight: var(--weight-regular); } .ptable th[scope="col"], .ptable td:not(.ptable__intro) { border-left: var(--border-hair) solid var(--color-border); } .ptable__head > :is(th, td) { padding-top: 24px; } .ptable__intro { padding-bottom: var(--space-8) !important; } .ptable__intro { padding-left: 0 !important; } .ptable__intro-title { font-size: var(--type-sm-size); line-height: 19px; font-weight: var(--weight-semibold); color: var(--color-text); } .ptable__features { display: grid; gap: 6px; margin-top: var(--space-3); } .ptable__features li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px; font-size: var(--type-sm-size); line-height: 18px; color: var(--color-text-2); } .ptable__features .i { width: 14px; height: 14px; margin-top: 2px; color: var(--color-text); } .ptable__head th h3, .ptable-m__plan h3 { font-size: 24px; line-height: 1.1; letter-spacing: -0.025em; font-weight: var(--weight-bold); } .ptable__badge { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: 10px; color: inherit; } .ptable__badge::before { content: ""; width: 8px; height: 8px; background: var(--color-accent); } .plan__desc { margin-top: var(--space-2); max-width: 30ch; font-size: var(--type-ui-size); line-height: 20px; color: var(--color-text-2); } .ptable__price td { padding-top: var(--space-5); } .plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } .plan__price b { font-size: var(--type-figure-size); line-height: 64px; letter-spacing: -0.05em; font-weight: var(--weight-bold); white-space: nowrap; } .plan__price > span { font-size: var(--type-sm-size); line-height: 16px; color: var(--color-text-3); } /* Con el pago anual el precio mensual lleva céntimos («124,17 €»): baja de cuerpo para caber en su columna sin mover la fila. */ .plan__price.plan__price--fraction b { font-size: clamp(34px, 3.7vw, 56px); } .plan__annual { margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--type-mono-size); line-height: var(--type-mono-line); color: var(--color-text-3); } .ptable__cta td { padding-top: var(--space-5); padding-bottom: var(--space-8); } .ptable__cta .btn, .ptable-m__plan .btn { height: auto; min-height: var(--control-h-lg); padding-block: var(--space-2); white-space: normal; text-align: center; line-height: 1.2; } .ptable__row :is(th, td) { height: 46px; padding-top: 12px; padding-bottom: 12px; vertical-align: middle; border-top: var(--border-hair) solid var(--color-border); font-size: var(--type-ui-size); line-height: 20px; } .ptable__row th { padding-left: 0; font-size: 13.5px; color: var(--color-text-2); } /* La columna recomendada, invertida. El foco cambia de tinta para seguir viéndose. */ .ptable .is-rec, .ptable-m__plan.is-rec { --color-focus: var(--color-on-action); --color-focus-gap: var(--color-action); background: var(--color-action); color: var(--color-on-action); } .ptable .is-rec .plan__desc, .ptable .is-rec .plan__annual, .ptable .is-rec .plan__price > span, .ptable-m__plan.is-rec .plan__desc, .ptable-m__plan.is-rec .plan__annual, .ptable-m__plan.is-rec .plan__price > span, .ptable-m__plan.is-rec dt { color: var(--color-text-inverse-2); } .ptable .ptable__row .is-rec, .ptable-m__plan.is-rec dl > div { border-top-color: color-mix(in srgb, var(--color-on-action) 18%, transparent); } .ptable :is(th, td).is-rec, .ptable :is(th, td).is-rec + :is(th, td) { border-left-color: transparent; } /* ---------- Apilada (≤ 960) ------------------------------------------ */ .ptable-m { display: none; } .ptable-m__intro { padding: var(--space-5) 0; border-top: var(--border-rule) solid var(--color-rule); } .ptable-m__plan { display: grid; gap: var(--space-3); padding: var(--space-5) 0 var(--space-2); border-top: var(--border-rule) solid var(--color-rule); } .ptable-m__plan + .ptable-m__plan { margin-top: var(--space-6); } .ptable-m__plan .plan__desc { margin-top: 0; } .ptable-m__plan .btn { margin-top: var(--space-2); } .ptable-m__plan.is-rec { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); border-top-color: var(--color-action); } .ptable-m__plan .ptable__badge { margin-bottom: 0; } .ptable-m__plan dl { margin-top: var(--space-2); } .ptable-m__plan dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: 10px 0; border-top: var(--border-hair) solid var(--color-border); } .ptable-m__plan dt { font-size: 13.5px; line-height: 19px; color: var(--color-text-2); } .ptable-m__plan dd { margin: 0; font-size: var(--type-ui-size); font-weight: var(--weight-semibold); text-align: right; white-space: nowrap; } /* ---------- Pie y condiciones ---------------------------------------- */ /* En la portada las condiciones van plegadas: una fila con regla, el nombre, qué contienen y el signo de las preguntas. */ .pricing-details { margin-top: var(--space-10); border-top: var(--border-rule) solid var(--color-rule); border-bottom: var(--border-hair) solid var(--color-border); } .pricing-details > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) 24px; gap: var(--space-2) var(--space-5); align-items: baseline; padding: var(--space-5) var(--space-2); margin-inline: calc(-1 * var(--space-2)); cursor: pointer; list-style: none; } .pricing-details > summary::-webkit-details-marker { display: none; } .pricing-details > summary > span:first-child { font-size: var(--type-h4-size); line-height: 24px; letter-spacing: var(--type-h4-track); font-weight: var(--weight-semibold); } .pricing-details > summary:hover > span:first-child { text-decoration: underline; text-decoration-color: var(--color-border-control); text-underline-offset: 4px; } .pricing-details__hint { font-family: var(--font-mono); font-size: var(--type-mono-size); line-height: var(--type-mono-line); color: var(--color-text-3); } .pricing-details > summary .site-faq__sign { align-self: center; } .pricing-details[open] .site-faq__sign::before { transform: rotate(45deg); } .pricing-details[open] .site-faq__sign::after { transform: rotate(135deg); } .pricing-details > .pricing-terms { margin-top: 0; border-top: var(--border-hair) solid var(--color-border-strong); } .pricing-details > .pricing-terms .pricing-terms__row:last-child { border-bottom: 0; } .pricing-details > .pricing-notes { padding-bottom: var(--space-6); } .site-pricing__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); padding: var(--space-4) 0; border-top: var(--border-hair) solid var(--color-border); border-bottom: var(--border-hair) solid var(--color-border); font-size: 13.5px; line-height: 19px; color: var(--color-text-2); } .site-pricing__foot .link-arrow { margin-left: auto; font-size: var(--type-sm-size); } .pricing-terms { margin-top: var(--space-16); border-top: var(--border-rule) solid var(--color-rule); } .pricing-terms__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); padding: var(--space-5) 0 var(--space-6); border-bottom: var(--border-hair) solid var(--color-border); } .pricing-terms__row > dt { grid-column: 1 / span 4; font-size: var(--type-h4-size); line-height: var(--type-h4-line); letter-spacing: var(--type-h4-track); font-weight: var(--weight-semibold); } .pricing-terms__row > dd { grid-column: 5 / span 8; display: grid; gap: var(--space-3); justify-items: start; margin: 0; font-size: var(--type-body-size); line-height: var(--type-body-line); color: var(--color-text-2); } .pricing-terms__row > dd > p { max-width: 72ch; } .pricing-more { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-semibold); color: var(--color-text); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .pricing-more .i { width: 16px; height: 16px; } .pricing-mini { width: 100%; max-width: 560px; border-collapse: collapse; font-size: var(--type-ui-size); } .pricing-mini :is(th, td) { padding: 9px var(--space-4) 9px 0; border-top: var(--border-hair) solid var(--color-border); text-align: left; font-weight: var(--weight-regular); } .pricing-mini tr:last-child :is(th, td) { border-bottom: var(--border-hair) solid var(--color-border); } .pricing-mini th { font-weight: var(--weight-semibold); color: var(--color-text); white-space: nowrap; } .pricing-mini td:nth-child(2) { font-family: var(--font-mono); font-size: var(--type-mono-size); color: var(--color-text); white-space: nowrap; } .pricing-mini td:last-child { color: var(--color-text-3); font-size: var(--type-sm-size); } .pricing-mini-list { width: 100%; max-width: 720px; } .pricing-mini-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-4); align-items: baseline; padding: 9px 0; border-top: var(--border-hair) solid var(--color-border); font-size: var(--type-ui-size); } .pricing-mini-list li:last-child { border-bottom: var(--border-hair) solid var(--color-border); } .pricing-mini-list strong { font-weight: var(--weight-semibold); color: var(--color-text); } .pricing-mini-list span { font-family: var(--font-mono); font-size: var(--type-mono-size); color: var(--color-text-3); } .pricing-mini-list a { font-size: var(--type-sm-size); font-weight: var(--weight-semibold); color: var(--color-text); text-underline-offset: 3px; } .pricing-notes { display: grid; gap: var(--space-2); max-width: 110ch; margin-top: var(--space-6); font-size: 12.5px; line-height: 19px; color: var(--color-text-3); } .pricing-notes a { color: var(--color-text-2); } @media (max-width: 1180px) { .ptable th, .ptable td { padding-left: 16px; padding-right: 16px; } .plan__price b { font-size: 48px; line-height: 52px; } } @media (max-width: 960px) { .site-pricing__head { grid-template-columns: minmax(0, 1fr); } .site-pricing__head > * { grid-column: 1 / -1 !important; } .site-pricing__controls { justify-items: start; text-align: left; } .ptable { display: none; } .ptable-m { display: block; margin-top: var(--space-8); } .plan__price b, .plan__price.plan__price--fraction b { font-size: var(--type-figure-size); line-height: 64px; } .site-pricing__foot { flex-direction: column; align-items: flex-start; } .site-pricing__foot .link-arrow { margin-left: 0; } .pricing-terms { margin-top: var(--space-12); } .pricing-terms__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); } .pricing-terms__row > * { grid-column: 1 / -1 !important; } } @media (max-width: 640px) { /* Objetivos táctiles de 44 px en móvil (6.4): segmentado, moneda y enlaces de la tabla. */ .site-pricing .seg > button { height: var(--control-h-lg); } .site-pricing__currency .select, .pricing-currency-control .select { height: var(--control-h-lg); } .plan__alt { display: inline-flex; align-items: center; min-height: var(--control-h-lg); margin-top: 0; } .pricing-details > summary { grid-template-columns: minmax(0, 1fr) 24px; } .pricing-details__hint { grid-column: 1; grid-row: 2; } .pricing-details > summary .site-faq__sign { grid-column: 2; grid-row: 1 / span 2; } .pricing-mini-list a { display: inline-flex; align-items: center; min-height: var(--control-h-lg); } } @media (max-width: 480px) { .pricing-mini-list li { grid-template-columns: minmax(0, 1fr) auto; } .pricing-mini-list span { grid-column: 1; } .pricing-mini-list a { grid-column: 2; grid-row: 1 / span 2; align-self: center; } /* El historial en móvil: cada opción en una fila con su precio, y el anual debajo (no se oculta ningún dato). */ .pricing-mini, .pricing-mini tbody { display: block; } .pricing-mini tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); row-gap: 2px; padding: 9px 0; border-top: var(--border-hair) solid var(--color-border); } .pricing-mini tr:last-child { border-bottom: var(--border-hair) solid var(--color-border); } .pricing-mini :is(th, td), .pricing-mini tr:last-child :is(th, td) { padding: 0; border: 0; } .pricing-mini td:last-child { grid-column: 1 / -1; } .pricing-mini td:last-child:empty { display: none; } }