/* ============================================================ _tema.css — FNN.Public Fichero ÚNICO de tokens de diseño (docs/CONVENIOS.md). Actualizado a partir del Figma "Nadar es vida" (2026-07-01). No hardcodear ninguno de estos valores en componentes ni vistas. Este fichero es la fuente de verdad del sistema de diseño: los valores de aquí son oficiales del proyecto, no una aproximación pendiente de confirmación externa. Se derivaron muestreando píxeles de "Nadar es vida.pdf" (13 páginas, exportación de Figma, 2026-07-01) para no fijar nada "a ojo". El PDF fue el método de validación, no es una dependencia del sistema: cuando haya acceso de editor al Figma real, se usará para VERIFICAR o AJUSTAR estos tokens, no para redefinirlos desde cero. Lo que sigue marcado [ESTIMADO] es lo que ni el PDF ni ninguna otra referencia han confirmado todavía (algunas categorías sin pantalla propia, estados de interacción que una exportación estática no puede mostrar). ============================================================ */ /* --- Tipografía: fuentes propias del Figma --- */ @font-face { font-family: 'Rules'; src: url('/fonts/Rules-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Rules'; src: url('/fonts/Rules-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } /* 'Cactus Jack' (efecto escritura a mano) se usa únicamente en el diploma final, que se genera como PDF en servidor (QuestPDF, en FNN.Infrastructure/Servicios/ServicioPdf.cs), no en el navegador. No se declara aquí como @font-face web. Ver docs/PUBLICO.md y el apartado "Huecos" de la guía de componentes. */ :root { color-scheme: light; /* --- Colores principales --- El celeste es el color de marca/acción global: botón INSCRIPCIÓN, botón INICIAR SESIÓN y hover de tarjeta en Home. */ --color-primario: #BBF4FF; /* Celeste — CTA principal */ --color-primario-oscuro: #7DCBE3; /* [ESTIMADO] variante oscura para hover/active, ninguna referencia disponible muestra este estado todavía */ --color-primario-claro: #E6F7FC; /* [ESTIMADO] variante clara */ --color-sobre-primario: #10202B; /* Texto oscuro sobre el celeste (no blanco: el pastel es demasiado claro para contraste con blanco) */ --color-acento: #0C8F7A; --color-acento-oscuro: #086b5c; --color-sobre-acento: #ffffff; --color-peligro: #A33B2F; --color-peligro-fondo: #F6E5E2; --color-aviso: #9A6400; --color-aviso-fondo: #FCEFD6; --color-exito: #1F8A58; --color-exito-fondo: #E1F2E8; --color-info: #0067B1; --color-neutro-fondo: #EFF1F3; /* Texto blanco: solo para colores saturados/oscuros (exito, aviso, peligro, primario-oscuro). El primario "de marca" es un pastel claro (celeste) y usa --color-sobre-primario (oscuro), no este. */ --color-sobre-oscuro: #FFFFFF; /* Fondo decorativo del hero (degradado suave, Home) — [ESTIMADO], recurso decorativo propio; no hay ninguna pantalla de referencia con un hero degradado, solo fondo crema plano. */ --gradiente-hero: radial-gradient(circle at 10% 0%, rgba(187, 244, 255, 0.35), transparent 30%), linear-gradient(135deg, #F7ECDD 0%, #FCF7EE 55%, #FFFFFF 100%); /* Anillo de foco accesible (mismo tono que color-primario-oscuro) [ESTIMADO: ninguna referencia disponible muestra el estado focus] */ --anillo-foco: 0 0 0 3px rgba(125, 203, 227, 0.45); /* Fondo de cabecera fija con transparencia (mismo tono que --color-fondo) */ --color-fondo-translucido: rgba(253, 248, 243, 0.94); /* --- Neutros --- Fondo crema cálido característico de todas las pantallas, tipografía y bordes casi negros (contorno fino, no gris suave). */ --color-fondo: #FDF8F3; /* Fondo general de página */ --color-superficie: #FFFFFF; /* Tarjetas / paneles sobre el fondo */ --color-superficie-fondo: #FDF8F3; /* Tarjetas que se integran con el fondo (pastillas no seleccionadas) */ --color-superficie-suave: #F3EFE6; /* [ESTIMADO] tinte neutro suave: fondos de "filtro activo" o badges secundarios */ --color-borde: #1A1A1A; /* [ESTIMADO] bordes finos, casi negros; valor vectorial, no se puede pipetear el hex exacto de una exportación estática */ --color-borde-suave: #E4D9C7; --color-texto: #171717; --color-texto-suave: #5D6678; /* Mismo gris que las pastillas de filtro no seleccionadas */ --color-texto-muy-suave: #9AA0AC; /* --- Colores por PISCINA --- Cada piscina tiene un color fijo, independiente de la categoría de curso, para reconocerla de un vistazo en cualquier pantalla. La asignación piscina -> color vive centralizada en CatalogoColoresPiscina.cs; aquí solo se define la paleta. Estados en los chips de filtro (pág. 2, "Cursos Adultos"): la pastilla de piscina SIN seleccionar usa el color base con texto gris y sin borde; la SELECCIONADA añade borde negro fino, texto negro y, en Aranzadi (única piscina que la pág. 2 muestra seleccionada), un fondo más saturado (--*-intenso, confirmado pipeteando #FFE1BB). Para el resto de piscinas no hay muestra de la variante intensa: se mantiene el color base también al seleccionar, hasta tener referencia. */ --color-piscina-azul: #DBE1F9; --color-piscina-verde: #E5FBD6; --color-piscina-naranja: #FEECD6; --color-piscina-amarillo: #F7E9A8; --color-piscina-rosa: #F7DDE8; --color-piscina-violeta: #E8DDF7; --color-piscina-turquesa: #D8F3EC; --color-piscina-celeste: #DDF4FA; --color-piscina-salmon: #F8DDD6; --color-piscina-lima: #EEF7C8; --color-piscina-naranja-intenso: #FFE1BB; /* pastilla seleccionada, confirmado pág. 2 */ /* --- Colores por CATEGORÍA de curso --- Cada sección temática (Adultos, Campaña escolar…) tiñe sus filtros secundarios (NIVEL, DÍAS, COLEGIO, CURSO) y el botón principal del lado Monitor (ENVIAR). Infantiles no tiene pantalla propia en ninguna referencia disponible: sigue [ESTIMADO] por continuidad de paleta. CategoriaCurso (FNN.Core) tampoco tiene campo Color hoy. */ --color-categoria-adultos: #FFE1BB; /* pastilla NIVEL/DÍAS/HORARIO seleccionada en pantallas de Adultos */ --color-categoria-adultos-suave: #FEECD6; /* misma pastilla sin seleccionar */ --color-categoria-infantiles: #7FB8D9; /* [ESTIMADO] sin pantalla propia todavía, confirmar con diseñadora */ --color-categoria-infantiles-suave: #DCEEF6; /* [ESTIMADO] */ --color-categoria-escolar: #EFD03A; /* pastilla COLEGIO/CURSO/DÍAS seleccionada y botón ENVIAR en Campaña escolar */ --color-categoria-escolar-suave: #F5E396; /* misma pastilla sin seleccionar */ /* --- Colores por FASE de evaluación --- Orden fijo (FaseEvaluacion.Orden), 7 fases confirmadas en "Items objetivos y actitudinal.docx": Adaptación, Descubrimiento, Confianza, Autonomía, Dominio, Técnica, Iniciación a la competición. */ --color-fase-1-adaptacion: #CB671E; /* naranja */ --color-fase-2-descubrimiento: #6BAF40; /* verde */ --color-fase-3-confianza: #1E8DCC; /* azul */ --color-fase-4-autonomia: #B862A2; /* magenta/violeta */ --color-fase-5-dominio: #E34343; /* rojo */ --color-fase-6-tecnica: #704895; /* púrpura */ --color-fase-7-competicion: #EFD03A; /* amarillo de fase, deliberadamente más intenso que la paleta pastel de piscinas */ --color-sobre-fase: #FFFFFF; /* --- Tipografía --- Rules = tipografía principal de interfaz (confirmado, ficheros recibidos). Tamaños/pesos estimados a partir del Figma. */ --fuente-principal: 'Rules', system-ui, -apple-system, "Segoe UI", sans-serif; --fuente-mono: 'SFMono-Regular', Consolas, monospace; --tamano-base: 16px; --tamano-sm: 13px; --tamano-lg: 18px; --tamano-xl: 22px; --tamano-titulo: 32px; /* Auditoría pág. 2 (2026-07-03): el h1 del PDF mide ≈2,5 veces el cuerpo (cap 45 vs 18 en px Figma), no 3 — tope en 2.5rem. */ --tamano-titulo-lg: clamp(2rem, 4vw, 2.5rem); --peso-normal: 400; --peso-bold: 700; --altura-linea: 1.5; /* --- Espaciado --- */ --espaciado-xs: 4px; --espaciado-sm: 8px; --espaciado-md: 16px; --espaciado-lg: 24px; --espaciado-xl: 32px; --espaciado-xxl: 48px; /* --- Bordes --- El Figma usa esquinas suavemente redondeadas en pastillas y tarjetas (no 999px "cápsula" salvo en botón ENVIAR/INSCRIPCIÓN). */ --radio-sm: 4px; --radio-md: 8px; --radio-lg: 14px; --radio-pastilla: 8px; --radio-boton: 10px; --radio-card: var(--radio-lg); /* --- Sombras --- El Figma es prácticamente plano (sin sombras visibles); se define una sombra muy sutil solo para separar tarjetas del fondo cuando comparten un tono similar (crema sobre crema). */ --sombra-card: 0 1px 2px rgba(26, 26, 26, 0.06), 0 1px 1px rgba(26, 26, 26, 0.04); /* --- Layout: anchos de contenido --- [ESTIMADO] recuperado tras detectar que faltaba en este fichero (referenciado por _componentes.css/.contenedor pero nunca definido: el fichero terminaba a mitad de esta sección). */ --ancho-contenido: 1120px; --ancho-contenido-lg: 1320px; /* --- Accesibilidad / objetivo táctil --- WCAG 2.5.5: tamaño mínimo recomendado para elementos táctiles. */ --alto-minimo-touch: 44px; /* --- Transiciones --- */ --transicion-rapida: 150ms ease; }