/* ===================================================================== tokens.css — Sistema de diseño (única fuente de colores, tamaños y espacios) Ningún componente usa colores o tamaños "a mano": todo sale de aquí. Los colores de marca (--c-primario-solido, --c-acento y sus variantes) se sobrescriben desde la configuración de la empresa en el . Regla de contraste: un color de marca NO es un color de texto. Con texto blanco encima se usa la variante *-solido; como texto sobre fondo oscuro, la *-texto (ambas calculadas). Cortes de pantalla (las media queries no aceptan variables: usar SOLO estos, en rem para respetar el tamaño de letra del navegador): 30rem (480 px) · 40rem (640 px) · 48rem (768 px) · 64rem (1024 px) · 80rem (1280 px) · 90rem (1440 px) hasta un corte: (max-width: 47.99rem) · desde un corte: (min-width: 48rem) Los container queries miden su propio componente y usan umbrales propios. ===================================================================== */ :root { color-scheme: dark; /* Marca (el la sobrescribe con la configuración de la empresa). El primario viste los documentos en papel, correos y PDF; la interfaz oscura usa el acento. */ --c-primario-solido: #1F2937; --c-acento: #2AA198; /* barras, puntos, bordes: nunca con texto blanco ni como texto */ --c-acento-solido: #218079; /* fondo de botones con texto blanco (4.7:1) */ --c-acento-texto: #3CCCC1; /* acento como texto o ícono sobre fondos oscuros (≥ 6.5:1 sobre --c-superficie-elevada) */ --c-acento-suave: color-mix(in srgb, var(--c-acento) 18%, transparent); /* Superficies y texto (tema oscuro; contraste AA calculado sobre todas las superficies) */ --c-fondo: #0A1721; --c-barra: #08131C; /* cabecera, menú lateral y pie */ --c-superficie: #0F2130; --c-superficie-2: #132A3C; --c-superficie-hundida: #0B1B27; /* pozos: campos, cabeceras de tabla */ --c-superficie-elevada: #1C3346; /* flotantes: menús, toasts, avisos */ --c-realce: rgb(237 242 246 / 0.07); /* hover sobre cualquier superficie */ --c-vidrio: rgb(15 33 48 / 0.72); /* panel translúcido sobre foto */ --c-texto: #EDF2F6; --c-texto-2: #C3CED8; --c-texto-suave: #94A6B4; /* 5.2:1 sobre la superficie más clara */ --c-borde: #22394C; --c-borde-fuerte: #627E95; /* borde de controles: 3:1 como componente de interfaz */ --c-enlace: var(--c-acento-texto); --c-foco: #7CC7FF; --c-oscuro: #050C12; /* fondo de fotos y galería a pantalla completa */ /* Estados: el color base es TEXTO (AA sobre su -suave y sobre las superficies); -vivo es para barras y puntos; -solido lleva texto blanco */ --c-ok: #6FDB9A; --c-ok-vivo: #2E9E54; --c-alerta: #F2C35B; --c-alerta-vivo: #D99A1E; --c-naranja: #F7A56B; --c-naranja-vivo: #E07B24; --c-peligro: #FF8F84; --c-peligro-vivo: #D93A2E; --c-peligro-solido: #B8322A; --c-info: #8FB8FF; --c-info-vivo: #3B6FF0; --c-violeta: #C3A6FF; --c-violeta-vivo: #8B5CF6; --c-gris: #B3C0CB; --c-gris-vivo: #9AA3AF; --c-ok-suave: color-mix(in srgb, var(--c-ok-vivo) 18%, transparent); --c-alerta-suave: color-mix(in srgb, var(--c-alerta-vivo) 18%, transparent); --c-naranja-suave: color-mix(in srgb, var(--c-naranja-vivo) 18%, transparent); --c-peligro-suave: color-mix(in srgb, var(--c-peligro-vivo) 18%, transparent); --c-info-suave: color-mix(in srgb, var(--c-info-vivo) 18%, transparent); --c-violeta-suave: color-mix(in srgb, var(--c-violeta-vivo) 18%, transparent); --c-gris-suave: color-mix(in srgb, var(--c-gris-vivo) 12%, transparent); --c-whatsapp: var(--c-acento-solido); /* el contacto por WhatsApp lleva el color de la marca */ --c-whatsapp-hover: color-mix(in srgb, var(--c-acento-solido) 82%, var(--c-negro)); --c-estrella: #F2B84B; /* Blanco y negro base, y sus transparencias (fotos, velos y fondos sólidos) */ --c-blanco: #FFFFFF; --c-negro: #000000; --c-sobre-solido: var(--c-blanco); /* texto e íconos sobre fondos sólidos (botones, contadores) */ --c-blanco-12: rgb(255 255 255 / 0.12); --c-blanco-16: rgb(255 255 255 / 0.16); --c-blanco-20: rgb(255 255 255 / 0.2); --c-blanco-55: rgb(255 255 255 / 0.55); --c-blanco-80: rgb(255 255 255 / 0.8); --c-negro-16: rgb(0 0 0 / 0.16); --c-velo: rgb(3 9 14 / 0.72); /* fondo detrás de un modal */ --c-velo-suave: rgb(3 9 14 / 0.6); /* fondo detrás de un panel lateral */ --c-velo-foto: linear-gradient(90deg, rgb(8 19 28 / 0.92) 0%, rgb(8 19 28 / 0.62) 42%, rgb(8 19 28 / 0.18) 75%, rgb(8 19 28 / 0.12) 100%); /* texto sobre foto de portada: oscuro donde va el texto, la foto se ve a la derecha */ --portada-alto: clamp(30rem, 72vh, 46rem); /* alto de la portada con foto: el auto de la foto se ve entero */ --c-velo-foto-movil: linear-gradient(180deg, rgb(8 19 28 / 0.7), rgb(8 19 28 / 0.9)); /* texto a todo el ancho: la foto se insinúa detrás */ --c-velo-foto-arriba: linear-gradient(180deg, rgb(8 19 28 / 0.9) 0%, rgb(8 19 28 / 0.55) 38%, transparent 68%); /* título arriba de una foto */ /* Portada sin foto: brillo del acento sobre la barra */ --fondo-portada: radial-gradient(60% 90% at 88% 0%, color-mix(in srgb, var(--c-acento) 30%, transparent), transparent 70%), radial-gradient(45% 70% at 0% 100%, color-mix(in srgb, var(--c-info-vivo) 12%, transparent), transparent 70%), linear-gradient(180deg, var(--c-barra), var(--c-fondo)); /* Documento imprimible (reservas, contratos, firmas): colores y tamaños fijos, no cambian con la marca */ --doc-papel: #FFFFFF; --doc-tinta: #111827; --doc-tinta-2: #4B5563; --doc-tinta-3: #6B7280; --doc-borde: #D1D5DB; --doc-borde-suave: #E5E7EB; --doc-celda: #F3F4F6; --doc-firma: #374151; --doc-resaltado: #FEF9C3; --doc-resaltado-texto: #92400E; --doc-ok: #1B7A3A; --doc-enlace: #1D4ED8; --doc-fs: 0.875rem; --doc-fs-sm: 0.75rem; --doc-fs-xs: 0.7rem; --doc-fs-titulo: 1.05rem; --doc-margen: clamp(1rem, 4vw, 2.75rem); --doc-espacio-firma: clamp(1.5rem, 6cqi, 3rem); /* Tipografía fluida (base ≥ 16 px en móvil) */ --fuente: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Ubuntu: Google Fonts (400/500/700) */ --fuente-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; --fs-xs: clamp(0.875rem, 0.85rem + 0.1vw, 0.9rem); /* ≥ 14 px efectivos en móvil (§2.4) */ --fs-sm: clamp(0.875rem, 0.845rem + 0.15vw, 0.9375rem); --fs-md: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --fs-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); --fs-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); --fs-2xl: clamp(1.5rem, 1.25rem + 1.3vw, 2.375rem); --fs-hero: clamp(2.125rem, 1.4rem + 3.2vw, 3.75rem); /* título de la portada */ --fs-precio: clamp(1.375rem, 1.15rem + 1.1vw, 2rem); --fs-kpi: clamp(1.25rem, 13cqi, 2rem); /* cifra de un KPI: crece con su tarjeta */ --fs-contador: 0.75rem; /* número dentro de un contador circular */ --fs-contador-mini: 0.6875rem; --fs-em-xs: 0.75em; /* relativos al texto del componente (atajos, flechas de orden) */ --lh: 1.5; --lh-titulo: 1.2; /* Espaciado fluido */ --sp-05: 0.125rem; /* medio paso: separación mínima entre líneas de un mismo bloque */ --sp-1: clamp(0.25rem, 0.23rem + 0.1vw, 0.3125rem); --sp-2: clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem); --sp-3: clamp(0.75rem, 0.69rem + 0.3vw, 0.9375rem); --sp-4: clamp(1rem, 0.91rem + 0.45vw, 1.25rem); --sp-5: clamp(1.25rem, 1.11rem + 0.7vw, 1.75rem); --sp-6: clamp(1.5rem, 1.28rem + 1.1vw, 2.25rem); --sp-7: clamp(2rem, 1.64rem + 1.8vw, 3.25rem); --sp-8: clamp(2.5rem, 1.94rem + 2.8vw, 4.5rem); /* Espacio interno de componentes en em: crece con el texto del propio componente (botones, chips, pestañas, listas) */ --sp-em-1: 0.15em; --sp-em-2: 0.3em; --sp-em-3: 0.45em; --sp-em-4: 0.6em; --sp-em-5: 0.8em; --sp-em-6: 1em; --sp-em-7: 1.25em; --sp-hilo: 2px; /* separación mínima entre ítems de un menú */ --hueco-icono: 2.25em; /* campo con ícono a la izquierda */ --hueco-control: 2em; /* campo con flecha o botón a la derecha */ --sangria-lista: 1.25em; /* sangría de listas con viñetas o números */ /* Forma */ --r-1: 4px; /* badges, casillas */ --r-2: 8px; /* botones, campos */ --r-3: 14px; /* tarjetas, paneles, galería */ --r-pildora: 999px; --borde: 1px solid var(--c-borde); --sombra: 0 18px 44px rgb(0 0 0 / 0.5); /* elevación de modales y flotantes */ --sombra-sutil: 0 1px 3px rgb(0 0 0 / 0.35); /* separa una etiqueta de la foto que tiene debajo */ --desenfoque: blur(14px) saturate(1.2); /* panel de vidrio sobre foto */ /* Marcas sin ocupar espacio (se completan con el color: box-shadow: var(--indicador-izq) var(--c-peligro-vivo)) */ --indicador-izq: inset 3px 0 0; /* barra a la izquierda: estado de una fila o tarjeta */ --indicador-abajo: inset 0 -3px 0; /* subrayado: pestaña o enlace actual */ --anillo: 0 0 0 2px; /* contorno de selección */ --anillo-fino: 0 0 0 1px; --anillo-dentro: inset 0 0 0 2px; /* Layout */ --gutter: clamp(16px, 4vw, 40px); --ancho-max: 1400px; --cabecera-alto: clamp(3.25rem, 3rem + 1vw, 4rem); /* fila de la cabecera del sitio */ --ancho-lectura: 68ch; --tactil: 2.75rem; /* 44 px: área táctil mínima */ --control-alto: 2.5rem; --barra-inferior-alto: 0px; /* la define el layout admin < 1024 px */ --cta-altura: 0px; /* la define la ficha en móvil (barra de CTA pegajosa) */ /* Movimiento y capas */ --dur-rapida: 150ms; /* hover, cambios de color */ --dur-media: 200ms; /* entradas de paneles, toasts, zoom */ --dur-lenta: 300ms; /* avisos que llaman la atención */ --dur-giro: 700ms; /* una vuelta del indicador de carga */ --curva: ease; --transicion: var(--dur-rapida) var(--curva); --z-1: 1; /* apilado dentro de un componente */ --z-2: 2; --z-3: 3; --z-pegajoso: 5; /* pies de formulario pegajosos */ --z-desplegable: 20; /* listas de resultados sobre el contenido */ --z-barra: 50; --z-flotante: 60; --z-toast: 100; } @media (pointer: coarse) { :root { --control-alto: var(--tactil); } } /* Contexto papel: los documentos imprimibles (proforma, contratos, firmas) siguen en blanco dentro del tema oscuro. Uso: class="... papel" en el contenedor del documento. Las variables que dependen de otras (--borde) se vuelven a declarar aquí. */ .papel { color-scheme: light; --c-superficie: var(--doc-papel); --c-superficie-2: var(--doc-celda); --c-superficie-hundida: var(--doc-celda); --c-texto: var(--doc-tinta); --c-texto-2: var(--doc-tinta-2); --c-texto-suave: var(--doc-tinta-2); --c-borde: var(--doc-borde); --c-borde-fuerte: var(--doc-firma); --c-enlace: var(--doc-enlace); --c-ok: var(--doc-ok); --borde: 1px solid var(--c-borde); background: var(--c-superficie); color: var(--c-texto); }