/* ==========================================================================
tokens.css · Habitaccion CRM — el estilo de marca en UN SOLO SITIO
--------------------------------------------------------------------------
Reconstruido de la entrega de Claude Design (D1–D5), 2026-07-05.
REGLA DE ORO: para cambiar la estética del CRM (verde, fuente, radios…)
se edita ESTE fichero y nada más. Las pantallas nunca escriben un color,
un tamaño o una sombra a mano: siempre var(--…).
Tres capas, de abajo a arriba:
1) PRIMITIVOS — la materia física (la paleta, la escala cruda).
2) SEMÁNTICOS — el significado (--color-accion, --texto-secundario…).
Es lo que consumen las pantallas.
3) COMPONENTE — medidas de piezas concretas, solo cuando hace falta.
Comprobación mecánica de gobernanza (debe devolver 0 líneas cuando la
migración esté hecha):
grep -nE '#[0-9a-fA-F]{3,8}' web/styles.css web/calendar.css web/property-calendar.css
ESTADO: fichero independiente, todavía NO enlazado en index.html.
No afecta al CRM hasta que se añada su (paso de implementación).
========================================================================== */
/* ==========================================================================
TIPOGRAFÍA · Inter autoalojada (sin CDN → cumple RGPD)
--------------------------------------------------------------------------
Decisión D1: Inter de verdad (hoy está declarada pero nunca se carga, así
que cada equipo enseña otra fuente). Equivalente libre (OFL) casi idéntica
a la San Francisco de Mac; trae cifras tabulares para tablas y calendario.
Solo 3 pesos: 400 / 600 / 700 (una sola negrita, no las 7 actuales).
Ficheros presentes en web/assets/fonts/ (Fontsource, SIL OFL 1.1 → OFL.txt):
inter-400/600/700.woff2 subconjunto latin (español + €)
inter-400/600/700-ext.woff2 subconjunto latin-ext (Erasmus: ł, č, ő…)
El unicode-range hace que latin-ext solo se descargue si un glifo lo pide.
font-display:swap → el texto se ve al instante con la fuente del sistema y
cambia a Inter al cargar (sin parpadeo en blanco).
========================================================================== */
/* --- Inter · latin ------------------------------------------------------- */
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
src: url("assets/fonts/inter-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
src: url("assets/fonts/inter-600.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
src: url("assets/fonts/inter-700.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --- Inter · latin-ext (Erasmus: europeo del este, báltico, etc.) -------- */
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
src: url("assets/fonts/inter-400-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
src: url("assets/fonts/inter-600-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
src: url("assets/fonts/inter-700-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
/* ========================================================================
CAPA 1 · PRIMITIVOS — la materia física
Solo se tocan estos para cambiar la MARCA. Las pantallas no los usan
directamente: consumen los semánticos de la capa 2.
======================================================================== */
/* --- Verde de marca -----------------------------------------------------
El logo muestrea a #008878. El verde de trabajo se oscurece a #0a6b5f
para cumplir contraste AA (6,6:1 con texto blanco): por eso NO es
idéntico al logo. Sustituye a los 57 verdes del CSS actual.
Verde DECIDIDO por Juan (definitivo). Si algún día cambia, actualizar también el
de index.html a mano (un no puede leer una var()). */
--verde-900: #093029; /* texto de marca sobre fondo claro */
--verde-700: #07524a; /* hover / activo */
--verde-600: #0a6b5f; /* EL verde · solo la acción principal · AA 6,6:1 */
--verde-100: #e0efec; /* lavados, fila activa, fondos suaves de marca */
--verde-400: #2f9c8a; /* tinte claro del verde nuevo · SOLO degradados decorativos (login, cabeceras) */
/* --- Tinta (texto y neutros) -------------------------------------------- */
--tinta-900: #172322; /* texto principal · se conserva del actual */
--tinta-600: #5f6d6a; /* texto secundario · AA 5,4:1 */
--tinta-500: #6c7674; /* texto tenue legible · AA 4,7:1 · rótulos y detalles pequeños (metric-detail, secciones) */
--tinta-300: #a5afad; /* SOLO deshabilitados / chevrons apagados */
/* --- Grises de superficie ----------------------------------------------- */
--blanco: #ffffff; /* superficie de cards y diálogos */
--gris-050: #f1f5f3; /* hovers de fila y fondos tenues DENTRO de una card blanca (se tiene que notar) */
--gris-fondo: #e8eeec; /* canvas de la app · 1,18:1 contra el blanco: las cards se despegan del fondo */
--gris-linea: #d3dcd9; /* bordes y separadores · 1,4:1: la línea se ve sin gritar */
--gris-control: #a3b1ad; /* borde de botón secundario: la caja del botón se distingue a la primera */
/* --- Funcionales · 4 pares, todos AA (fondo claro + texto oscuro) --------
Regla de uso (ver capa 2): el estado normal va silencioso; el color
lo lleva SOLO la excepción que pide acción. */
--ok-100: #e6f4eb; --ok-600: #25714a; /* éxito · 5,2:1 */
--aviso-100: #fbf1d7; --aviso-600: #7e5b10; /* pendiente · 4,9:1 */
--error-100: #fdeeee; --error-600: #a94444; /* bloqueo · 5,1:1 */
--info-100: #eaf0fb; --info-600: #3d5fa8; /* neutro/info · 5,5:1 */
/* --- Familias tipográficas ---------------------------------------------- */
--fuente: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
--fuente-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
/* --- Escala de tamaños · 8 pasos, suelo duro en 11px --------------------
Baja de los 40 tamaños actuales a 8. Nada por debajo de --texto-11. */
--texto-26: 26px; /* h1 de página */
--texto-20: 20px; /* subtítulo de sección / título de diálogo */
--texto-16: 16px; /* título de card, inputs */
--texto-14: 14px; /* CUERPO — incl. tablas (hoy 12,2px) */
--texto-13: 13px; /* hints, texto secundario */
--texto-12: 12px; /* cabeceras de tabla, chips */
--texto-11: 11px; /* SUELO duro (hoy había 7,7px) */
/* --- Pesos · una sola negrita ------------------------------------------- */
--peso-normal: 400;
--peso-medio: 600;
--peso-negrita: 700;
/* --- Interlineado ------------------------------------------------------- */
--alto-linea: 1.5; /* cuerpo */
--alto-linea-titulo: 1.15; /* h1 / titulares */
/* --- Radios · 5 con significado (de 19 actuales) ------------------------ */
--radio-s: 6px; /* chips pequeños, sellos */
--radio-m: 10px; /* botones, inputs */
--radio-l: 16px; /* cards */
--radio-xl: 22px; /* diálogos / modales */
--radio-pill: 999px; /* chips de estado */
/* --- Espaciado · retícula 4/8 ------------------------------------------- */
--esp-1: 4px;
--esp-2: 8px;
--esp-3: 12px;
--esp-4: 16px;
--esp-5: 24px;
--esp-6: 32px;
--esp-7: 48px;
/* --- Sombras · 3 elevaciones, un solo color de sombra ------------------- */
--sombra-1: 0 1px 2px rgba(23, 35, 34, .06), 0 4px 12px rgba(23, 35, 34, .05); /* reposo */
--sombra-2: 0 6px 24px rgba(23, 35, 34, .14); /* flotante */
--sombra-3: 0 16px 48px rgba(23, 35, 34, .24); /* modal */
--sombra-flotante-suave: 0 12px 34px rgba(32, 76, 68, .08); /* elevación amplia y tenue (toast, menú móvil, buscador) — valor histórico preservado 1:1 */
--sombra-sticky: 0 1px 0 var(--gris-linea), 0 4px 16px rgba(23, 35, 34, .06); /* cabeceras/columnas fijas: cae solo hacia abajo/lado */
/* --- Trazo de icono (Lucide, outline) ----------------------------------- */
--icono-trazo: 1.75;
/* ========================================================================
PALETA EXCEL DEL CALENDARIO — protegida, intocable
------------------------------------------------------------------------
RESTRICCIÓN SAGRADA: son los colores de la hoja del equipo. El equipo
los reconoce sin leyenda (ley de Jakob). Aquí solo se CENTRALIZAN (hoy
cada valor está copiado 2–4 veces entre los CSS con pequeñas derivas).
La semántica NO se toca. Viven en su propia familia --excel-*.
======================================================================== */
/* Colores base de las barras/estados (valores 1:1 con la hoja del equipo) */
--excel-disponible: #e1f4e5;
--excel-reservada: #eca8a8; /* reservada = pagada */
--excel-plataforma: #a9c7ee;
--excel-renovar: #ffd85a;
--excel-sinpagar: #f7e3e3; /* + trama rayada */
--excel-sinpagar-borde: #c76a6a;
--excel-incidencia: #2466ad;
--excel-preparar: #ee8fe2;
--excel-preparar-marcador: #d33db8; /* marcador «preparar/limpieza» */
--excel-cancelada: #a40000;
--excel-fuera: #d9dddc; /* franja fuera de gestión (inactiva) */
/* Derivas reales de las barras entre los dos calendarios — preservadas EXACTAS.
(dashboard-calendar usa tonos ligeramente distintos que el anual; no se unifican
en este pase para no alterar lo que el equipo ya reconoce.) */
--excel-reservada-barra: #f3c2c2; --excel-reservada-barra-texto: #723f3f;
--excel-renovada-barra: #ffe99b; --excel-renovada-barra-texto: #735a15;
--excel-sinpagar-texto: #8a4040;
/* Leyendas: cada estado tiene su trío fondo / texto / punto */
--excel-disponible-legend-texto: #36724a; --excel-disponible-punto: #9fd5ad;
--excel-fuera-legend: #e4e7e6; --excel-fuera-texto: #596160; --excel-fuera-punto: #aab2b0;
--excel-renovar-legend: #ffe9a3; --excel-renovar-texto: #755806;
--excel-reservada-legend: #f4cccc; --excel-reservada-texto: #793838;
--excel-preparar-legend: #f4c4ed; --excel-preparar-texto: #7a206d;
--excel-plataforma-legend: #dbe9fb; --excel-plataforma-texto: #2b5589;
--excel-sinpagar-legend: #f9efef;
/* Leyenda/estado «genéricos» del calendario del dashboard (confirmada/bloqueada/ocupada) */
--cal-confirmada-fondo: #e7f5f2; --cal-confirmada-texto: #176f65; --cal-confirmada-punto: #3aa994;
--cal-bloqueada-fondo: #fff4dc; --cal-bloqueada-texto: #986a20; --cal-bloqueada-punto: #e5ae4a;
--cal-ocupada-fondo: #ffeded; --cal-ocupada-texto: #a54848; --cal-ocupada-punto: #d97b7b;
--cal-barra-generica: #dcefeb; --cal-barra-generica-texto: #175e55;
--cal-bloqueada-barra: #ffe5a9; --cal-bloqueada-barra-texto: #7c5617;
--cal-ocupada-barra: #e9adad; --cal-ocupada-barra-texto: #713636;
/* Estructura del calendario (cabeceras, celdas de mes, columnas fijas) */
--cal-mes-fondo: #e5f5e8; /* celda de mes (anual) */
--cal-mes-actual: #d4edd9; /* mes en curso (anual) */
--cal-mes-actual-claro: #f0f8f6; /* mes en curso (dashboard, tenue) */
--cal-mes-actual-b: #cfead6; /* mes en curso (dashboard, operativo)*/
--cal-mes-actual-oscuro: #246e64; /* cabecera de mes en curso */
--cal-esquina-unit: #203331; /* esquina «unidad» de la cabecera */
--cal-anio-subtitulo: #b7cfca; /* subtítulo del selector de año */
--cal-piso-fondo: #f2f7f5; /* columna fija de piso */
--cal-meta-fondo: #e6efec; /* chips meta dentro de la celda piso */
/* Tintas oscuras del propio matiz, para texto AA sobre barra (usadas en el preview D3) */
--excel-plataforma-tinta: #1e3a5f;
--excel-reservada-tinta: #5f2626;
--excel-renovar-tinta: #5c4404;
--excel-sinpagar-tinta: #7c3d3d;
/* ========================================================================
CAPA 2 · SEMÁNTICOS — el significado
Esto es lo que consumen las pantallas. Nombran el ROL, no el color.
======================================================================== */
/* --- Acción / marca ----------------------------------------------------- */
--color-accion: var(--verde-600); /* el primario · UNO por pantalla */
--color-accion-hover: var(--verde-700);
--color-accion-suave: var(--verde-100); /* botón secundario, fila nav activa */
--color-accion-texto: var(--verde-700); /* texto sobre fondo suave */
--color-marca: var(--verde-900); /* texto de marca sobre claro */
/* --- Texto -------------------------------------------------------------- */
--texto-principal: var(--tinta-900);
--texto-secundario: var(--tinta-600);
--texto-tenue: var(--tinta-500); /* rótulos/detalles pequeños: más quieto que el secundario pero legible (AA) */
--texto-desactivado: var(--tinta-300);
--texto-sobre-accion: var(--blanco); /* texto sobre el verde sólido */
/* --- Superficies y bordes ----------------------------------------------- */
--color-fondo: var(--gris-fondo);
--color-superficie: var(--blanco);
--color-borde: var(--gris-linea);
/* --- Foco --------------------------------------------------------------- */
--color-foco: var(--info-600); /* color de referencia; el anillo real de foco de inputs es --anillo-foco (box-shadow) */
/* --- Estados · pares fondo/texto ---------------------------------------- */
--ok-fondo: var(--ok-100); --ok-texto: var(--ok-600);
--aviso-fondo: var(--aviso-100); --aviso-texto: var(--aviso-600);
--error-fondo: var(--error-100); --error-texto: var(--error-600);
--info-fondo: var(--info-100); --info-texto: var(--info-600);
/* --- Velo (scrim) de modal y menú móvil --------------------------------- */
--scrim: rgba(23, 35, 34, .28);
/* --- Anillos de foco / error (glow con el color nuevo de marca) --------- */
--anillo-foco: 0 0 0 3px rgba(10, 107, 95, .16); /* input:focus (antes teal) */
--anillo-error: 0 0 0 3px rgba(169, 68, 68, .18); /* campo con error */
--error-borde: #f0d4d1; /* borde de caja de error */
/* --- Decorativos de marca (login, cabeceras con degradado) -------------- */
--texto-marca-claro: #dcfff8; /* texto claro sobre el verde del login */
/* ========================================================================
REDISEÑO VISUAL — movimiento, vidrio (Liquid Glass) y scroll
Notion (base limpia) + Apple (pulido) + Liquid Glass (solo capas flotantes).
======================================================================== */
/* --- Movimiento · curvas y duraciones (Apple-ish, sutil pero con intención) */
--ease-out: cubic-bezier(.23, 1, .32, 1); /* entrada/salida: arranca rápido (Emil, auditoría 06) */
--ease-in-out: cubic-bezier(.77, 0, .175, 1); /* recorridos en pantalla */
--ease-drawer: cubic-bezier(.32, .72, 0, 1); /* cajones y paneles laterales (curva iOS) */
--ease-spring: cubic-bezier(.34, 1.28, .55, 1); /* micro-rebote muy leve */
--dur-1: .12s; /* micro (chip, foco) */
--dur-2: .2s; /* estándar (botón, fila, nav) */
--dur-3: .34s; /* énfasis (card, entrada de página) */
--dur-4: .46s; /* diálogo / overlay */
/* --- Vidrio (Liquid Glass) · SOLO en capas flotantes (topbar, diálogo, popover) */
--glass-fondo: rgba(255, 255, 255, .72);
--glass-fondo-alto: rgba(255, 255, 255, .86); /* más opaco: diálogos */
--glass-blur: saturate(175%) blur(16px); /* ≤16px: cristal, no lechoso */
--glass-borde: rgba(255, 255, 255, .55); /* reflejo hairline superior */
--glass-realce: inset 0 1px 0 rgba(255, 255, 255, .6); /* labio de luz interior (lo que hace que parezca cristal, no plástico) */
--glass-sombra: 0 8px 32px rgba(23, 35, 34, .12);
/* --- Elevación de acento (glow del verde de marca) ---------------------- */
--sombra-accion: 0 4px 14px rgba(10, 107, 95, .28); /* botón primario hover */
--sombra-accion-reposo: 0 1px 2px rgba(10, 107, 95, .22); /* botón primario reposo */
/* --- Scrollbar fina y discreta ------------------------------------------ */
--scroll-thumb: rgba(23, 35, 34, .18);
--scroll-thumb-hover: rgba(23, 35, 34, .32);
/* ========================================================================
CAPA 3 · COMPONENTE — medidas de piezas, solo lo reutilizado
Última opción: si una pantalla necesita algo que no está aquí, primero
mira si lo cuenta un semántico; si de verdad hace falta, se añade aquí
con su comentario, nunca como valor suelto en el CSS de pantalla.
======================================================================== */
/* Botón (D3): 40px normal / 32px small, texto en UNA línea, máx 280px */
--boton-alto: 40px;
--boton-alto-sm: 32px;
--boton-radio: var(--radio-m);
--boton-max-ancho: 280px;
/* Input (D3): 40px, foco azul */
--input-alto: 40px;
--input-radio: var(--radio-m);
--input-borde: #8a9995; /* borde de input en reposo · 3:1 contra el blanco (WCAG 1.4.11: el límite de un control se tiene que ver) */
/* Card / diálogo */
--card-radio: var(--radio-l);
--card-sombra: var(--sombra-1);
--dialogo-radio: var(--radio-xl);
--dialogo-sombra: var(--sombra-3);
}
/* ==========================================================================
FUTURO (referencia, no activo): cambiar la marca = editar arriba.
- Otro verde → las 4 líneas --verde-*.
- Otra fuente → --fuente + los 3 @font-face.
- Modo oscuro → un segundo bloque :root con los semánticos reasignados,
sin tocar el HTML. Ejemplo de esqueleto:
@media (prefers-color-scheme: dark) {
:root {
--color-fondo: #0f1817;
--color-superficie: #17211f;
--texto-principal: #eef3f1;
...
}
}
========================================================================== */