/* ───────────────────────────────────────────────────────────────────────────── * The Curated · tokens de diseño * * Fuente: branding/the_curated_brandboard_final.html — paleta «Cendré Chaud», v2.0 * * DOS CAPAS, Y LA DISTINCIÓN IMPORTA: * * --marca-* La marca, verbatim. No se toca, no se ajusta, no se "mejora". * Si el brandboard cambia, cambia esto y nada más. * * --ui-* Lo que usa la aplicación. Deriva de la marca, y CADA desviación * está justificada abajo con su motivo y su medición. * * Por qué separarlas: un brandboard se diseña para tarjetas, Instagram y papel — * superficies donde se mira. Una herramienta de trabajo se usa de noche, en un * celular, con una mano, entre la escuela y la casa. Son restricciones distintas * y mezclarlas produce o una marca rota o una herramienta ilegible. * ───────────────────────────────────────────────────────────────────────────── */ :root { /* ── LA MARCA · Cendré Chaud ────────────────────────────────────────────── * Los seis colores del brandboard, con sus nombres y sus roles. */ --marca-ceniza-calida: #EEEAE4; /* fondo primario */ --marca-roble: #302C28; /* texto · fondo oscuro */ --marca-ceniza: #B8AEA4; /* acento · líneas */ --marca-neblina: #D8D2CA; /* fondo secundario */ --marca-pizarra: #908880; /* texto secundario */ --marca-creme: #F5F2EE; /* fondo tarjeta */ /* ⚠️ DESVIACIÓN 0 — el único color que el brandboard no trae, y hacía falta. * * Cendré Chaud es toda gris cálido. Es correcta para papelería y para Instagram, y en * una herramienta produjo el defecto que se vio al mirarla completa: «todo es beige * sobre beige, el color no significa nada». Sin un acento, la única forma de destacar * algo era el semáforo — y usar el rojo del Verificador para señalar el botón principal * es enseñarle que rojo no quiere decir nada. * * El latón sale de la misma familia (H 36°, gris cálido subido de saturación), así que * no se lee como un color de software metido a la fuerza. Su trabajo es UNO: decir * «aquí» y «esto es lo que sigue». Nunca dice bueno ni malo — eso es del semáforo. * * #C2A878 sobre roble 6.51:1 ✓ (es donde vive: el riel) * #8E7A55 sobre ceniza cálida 4.62:1 ✓ (la versión para fondo claro) */ --marca-laton: #C2A878; --marca-laton-oscuro: #8E7A55; /* Tipografía. Cormorant Garamond 300/400 + itálicas · Raleway 200/300/400/500 */ --marca-display: 'Cormorant Garamond', Garamond, Georgia, serif; --marca-texto: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ── SUPERFICIES ────────────────────────────────────────────────────────── */ --ui-fondo: var(--marca-ceniza-calida); --ui-fondo-tarjeta: var(--marca-creme); --ui-fondo-alterno: var(--marca-neblina); --ui-fondo-inverso: var(--marca-roble); --ui-linea: var(--marca-ceniza); --ui-linea-tenue: rgba(48, 44, 40, .10); /* El acento, en sus dos fondos. Sobre el riel oscuro va el latón claro; sobre papel, * el oscuro — el claro sobre crème da 1.9:1 y sería un adorno ilegible. */ --ui-acento: var(--marca-laton-oscuro); --ui-acento-inverso: var(--marca-laton); --ui-acento-fondo: rgba(194, 168, 120, .13); /* El riel: el roble deja de ser sólo tinta y se vuelve superficie. */ --ui-riel: var(--marca-roble); --ui-riel-texto: var(--marca-ceniza); --ui-riel-vivo: var(--marca-ceniza-calida); --ui-riel-encima: rgba(238, 234, 228, .07); --ui-riel-linea: rgba(238, 234, 228, .10); /* El ancho de trabajo. Estaba en 640 en todas las pantallas y sobraba media pantalla * de 1500 vacía; 1180 es donde una fila de dos columnas todavía deja el texto corrido * cerca de los 65 caracteres que se leen sin cansarse. */ --ui-ancho: 1180px; /* ── TEXTO ──────────────────────────────────────────────────────────────── */ --ui-texto: var(--marca-roble); /* 11.56:1 sobre el fondo */ --ui-texto-inverso: var(--marca-ceniza-calida); /* ⚠️ DESVIACIÓN 1 — la única del sistema, y es obligatoria. * * El brandboard asigna Pizarra #908880 como «texto secundario» sobre Ceniza * Cálida. Medido, ese par da 2.91:1. El mínimo de WCAG AA para texto normal * es 4.5:1, así que reprueba — y no por poco. * * En una tarjeta de presentación eso no importa: se lee una vez, con luz, de * cerca. Aquí es el color de «vence en 3 días», «falta el pasaporte de un * viajero», «$18,400». Se lee de noche, en un celular, con prisa. * * La corrección conserva el matiz exacto (H 30°, S 7%) y sólo baja la * luminosidad de 53% a 34%. Es el mismo gris cálido, más oscuro. * * #5D5751 sobre ceniza cálida 5.95:1 ✓ * sobre crème 6.38:1 ✓ * sobre neblina 4.75:1 ✓ * * `--marca-pizarra` se queda intacto para piezas de marca: papelería, la * carta impresa, Instagram. Ahí el brandboard manda. */ --ui-texto-secundario: #5D5751; --ui-texto-tenue: var(--marca-pizarra); /* sólo decorativo, nunca información */ /* ── EL SEMÁFORO DEL VERIFICADOR ──────────────────────────────────────────── * ⚠️ DESVIACIÓN 2 — el brandboard no tiene rojo, ámbar ni verde. No los * necesita: es una marca de viajes de lujo, toda en grises cálidos. * * Pero el Verificador es el producto (CLAUDE.md §8) y necesita 🔴 🟡 🟢. * En vez de meter colores de semáforo genéricos —que romperían la marca en * la pantalla que más se usa— se derivan tres tonos desaturados dentro de la * misma familia cálida. Se leen como parte del sistema, no como una alerta * de software. * * Todos medidos ≥4.5:1 sobre ceniza cálida y crème. */ --ui-rojo: #8C4A3C; /* 5.55 · 5.96 · detiene */ --ui-ambar: #6E521E; /* 6.07 · 6.51 · avisa */ --ui-verde: #4F6350; /* 5.42 · 5.82 · pasa */ /* Fondos de fila. Muy tenues: el color señala, el texto explica. */ --ui-rojo-fondo: rgba(140, 74, 60, .09); --ui-ambar-fondo: rgba(110, 82, 30, .10); --ui-verde-fondo: rgba(79, 99, 80, .09); /* Sobre fondo oscuro los mismos tonos se aclaran, medidos contra roble. */ --ui-rojo-inverso: #D89482; /* 5.59 */ --ui-ambar-inverso: #D9B472; /* 7.07 */ --ui-verde-inverso: #9DB79E; /* 6.40 */ /* El cuarto estado (docs/decisiones/001): «no pude revisar». Sin color * a propósito — no es bueno ni malo, es ausencia de información. */ --ui-sin-cobertura: var(--ui-texto-secundario); --ui-sin-cobertura-fondo: rgba(48, 44, 40, .05); /* ── ESCALA TIPOGRÁFICA ───────────────────────────────────────────────────── * Cormorant Garamond para títulos y cifras; Raleway para todo lo demás. * El brandboard usa Raleway 200 en varios lugares — aquí el mínimo es 300: * un peso 200 a 12px en un celular al sol no se lee. */ --tipo-titulo: 400 clamp(28px, 5vw, 46px)/1.05 var(--marca-display); --tipo-seccion: 400 clamp(20px, 3vw, 26px)/1.2 var(--marca-display); --tipo-cifra: 300 34px/1 var(--marca-display); --tipo-cita: italic 300 18px/1.5 var(--marca-display); /* ⚠️ SUBIDO DE PESO EL 8 DE SEPTIEMBRE DE 2026, mirando la plataforma completa. * * Estaba en Raleway 300 a 15px el cuerpo y 300 a 13px lo secundario. Raleway 300 es un * peso de titular de revista: a 13px, en un gris del 60%, sobre beige, y de noche, se * lee como una marca de agua. Y lo secundario es donde vive «vence en 3 días» y * «$18,400» — no es letra chica, es la información. * * Sube a 400 y el secundario a 14px. Se ve más ordinario y se lee muchísimo mejor, que * en una herramienta de trabajo es el intercambio correcto: la elegancia la carga el * Cormorant de los títulos y de las cifras, no el cuerpo. */ --tipo-cuerpo: 400 15px/1.65 var(--marca-texto); --tipo-secundario:400 14px/1.55 var(--marca-texto); /* ⚠️ BAJADA DE 9px/.3em EL 17 DE SEPTIEMBRE DE 2026, mirando su teléfono a 390 px. * * Nueve píxeles con un tercio de eme de separación es una tipografía GRABADA: la de una * placa, un acta o un membrete de notaría. Está en sesenta y cuatro lugares, y de ahí * sale casi todo lo que se sentía «formal» en una herramienta que tiene que sentirse * como un compañero de trabajo — «JUEVES, 17 DE SEPTIEMBRE», «1 DE 22», «HACE 3 DÍAS». * * Once píxeles con .1em siguen siendo una etiqueta —se distingue del cuerpo a simple * vista— pero se leen como un renglón de una aplicación, no como un encabezado de un * documento oficial. Y a nueve píxeles, en un celular al sol, tampoco se leían. */ --tipo-etiqueta: 600 11px/1.2 var(--marca-texto); /* + letter-spacing, uppercase */ --letra-etiqueta: .1em; --letra-logo-the: 1px; --letra-logo-curated: -1px; /* ── RITMO Y FORMA ────────────────────────────────────────────────────────── * El brandboard separa bloques con 2px de aire, no con bordes redondeados. * Es un sistema de filetes y rectángulos: se respeta. */ --r: 2px; /* La píldora, para lo que SÍ es una píldora: un chip, un botón flotante, una cuenta. Existía como 20px, 24px, 26px y 9px sueltos en cuatro lugares — cuatro decisiones distintas para la misma forma. El sistema es de rectángulos y las píldoras son la excepción; una excepción con nombre es una decisión, sin nombre es un descuido. */ --r-pildora: 999px; --e1: 4px; --e2: 8px; --e3: 14px; --e4: 22px; --e5: 36px; --e6: 60px; /* ── ELEVACIÓN ───────────────────────────────────────────────────────────── * Había seis sombras escritas a mano, con cuatro desenfoques, cuatro opacidades y dos * tintas distintas, sin ninguna regla que las relacionara. Son tres alturas y nada más: * * apoyada lo que flota apenas sobre la página — una pista, un globo * alzada lo que se levanta de verdad — el botón del chat, un panel * encima lo que tapa la pantalla — el cajón del teléfono, un diálogo * * La tinta es siempre el roble con transparencia, nunca negro: una sombra negra sobre un * fondo cálido se ve sucia, y el brandboard no tiene negro. */ --sombra-apoyada: 0 2px 10px rgba(48, 44, 40, .18); --sombra-alzada: 0 3px 16px rgba(48, 44, 40, .24); --sombra-encima: 0 -6px 24px rgba(48, 44, 40, .28); /* Sobre el riel oscuro la misma sombra desaparece: ahí sí hace falta negro. */ --sombra-en-lo-oscuro: 0 2px 10px rgba(0, 0, 0, .35); /* Lo más ancho que puede ponerse una columna de contenido. A 1,440 px el riel se come 225 y el lienzo estira los renglones a 1,130: cuarenta caracteres de nombre con medio monitor de aire a la derecha. Mil cien es donde una rejilla de cuatro cifras todavía cabe y un renglón de lista todavía se recorre con el ojo sin perder el principio. */ --ancho-lectura: 1100px; /* Objetivo táctil mínimo. CLAUDE.md §3.9: una mano, pulgar, botones abajo. */ --toque-min: 44px; } /* ───────────────────────────────────────────────────────────────────────────── * EL LOGOTIPO * * Es una palabra, no un símbolo: «the» en Cormorant 300 y «curated» en * Cormorant 400, misma línea base, con la fila de detalles debajo * (Travel Experiences — filete — by Marce). * * ⚠️ Consecuencia para la PWA que hay que resolver, no ignorar: un logotipo de * palabra NO funciona como ícono de app. A 60×60 en la pantalla de inicio, * «the curated» con su filete es una mancha. El brandboard ya trae la * respuesta sin decirlo: el avatar de Instagram usa el monograma «tc». * Ese es el ícono. Ver docs/decisiones/002. * ───────────────────────────────────────────────────────────────────────────── */ .logo { display: flex; flex-direction: column; align-items: flex-start; } .logo-linea { display: flex; align-items: baseline; line-height: 1; } .logo-the { font-family: var(--marca-display); font-weight: 300; letter-spacing: var(--letra-logo-the); color: var(--marca-pizarra); padding-right: .18em; } .logo-curated { font-family: var(--marca-display); font-weight: 400; letter-spacing: var(--letra-logo-curated); line-height: .88; color: var(--marca-roble); } .logo-detalles { display: flex; align-items: center; width: 100%; gap: 1.2em; margin-top: .18em; } .logo-sub, .logo-by { font-family: var(--marca-texto); text-transform: uppercase; white-space: nowrap; } .logo-sub { font-weight: 400; color: var(--marca-pizarra); letter-spacing: .45em; } .logo-by { font-weight: 300; color: var(--marca-ceniza); letter-spacing: .3em; } .logo-filete { flex: 1; height: 1px; background: var(--marca-neblina); opacity: .8; } /* Sobre fondo oscuro se invierten los papeles, tal como en el brandboard. */ .logo--inverso .logo-the { color: var(--marca-ceniza); } .logo--inverso .logo-curated { color: var(--marca-ceniza-calida); } .logo--inverso .logo-sub { color: var(--marca-ceniza); } .logo--inverso .logo-by { color: var(--marca-pizarra); } .logo--inverso .logo-filete { background: var(--marca-pizarra); } /* Tamaños del brandboard. `curated` manda; lo demás escala con él. */ .logo--xl .logo-curated { font-size: 96px } .logo--xl .logo-the { font-size: 28px } .logo--lg .logo-curated { font-size: 68px } .logo--lg .logo-the { font-size: 20px } .logo--md .logo-curated { font-size: 46px } .logo--md .logo-the { font-size: 14px } .logo--sm .logo-curated { font-size: 30px } .logo--sm .logo-the { font-size: 10px } .logo--xs .logo-curated { font-size: 20px } .logo--xs .logo-the { font-size: 7px } .logo--xl .logo-sub, .logo--xl .logo-by { font-size: 8px } .logo--lg .logo-sub, .logo--lg .logo-by { font-size: 7px } .logo--md .logo-sub, .logo--md .logo-by { font-size: 6px } .logo--sm .logo-sub, .logo--sm .logo-by { font-size: 5px } /* XS va sin fila de detalles: a ese tamaño el filete y las versalitas se ensucian. */ .logo--xs .logo-detalles { display: none } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important } } /* ═══════════════════════════════════════════════════════════════════════════════════════ * EL ARMAZÓN · el riel, el lienzo, y las piezas que se repiten en todas las pantallas. * * ─────────────────────────────────────────────────────────────────────────────────────── * QUÉ ESTABA MAL, MEDIDO MIRÁNDOLA * * Cada pantalla era una columna de 560 o 640px centrada en una de 1500: media pantalla * vacía. Todo era beige sobre beige, así que el color no significaba nada y no había * jerarquía. Las cifras —lo único que se lee de un vistazo— iban en letra chica. Y para * saber si el dinero tenía algo pendiente había que entrar al dinero. * * ─────────────────────────────────────────────────────────────────────────────────────── * LA IDEA, EN UNA FRASE * * Un riel oscuro fijo a la izquierda con las secciones y SUS CUENTAS VIVAS, y a la derecha * un lienzo ancho donde las cosas se pueden poner en dos columnas: por qué a la izquierda, * qué sale a la derecha. * * El riel con cuentas es la mitad del valor de la herramienta y no costaba nada: ver el * «1» rojo junto a La cadena sin abrir nada es exactamente lo que una lista de ligas no * hace. * * ⚠️ Y no cambia la marca. La paleta es Cendré Chaud verbatim; lo que cambia es cuánta se * usa — el roble deja de ser sólo tinta y se vuelve superficie. * ═══════════════════════════════════════════════════════════════════════════════════════ */ body{margin:0;padding:0} /* ── EL FOCO DEL TECLADO ──────────────────────────────────────────────────────────────── * ⚠️ Faltaba por completo en ligas, botones, puertas del riel y `.btn`. Sólo los campos de * texto tenían anillo, porque el navegador se lo pone solo y nadie lo quitó. Todo lo demás * se navegaba a ciegas: con Tab no había forma de saber dónde estabas parada. Y las puertas * del riel son LA navegación, así que sin esto el teclado no sirve para moverse. * * `:focus-visible` y no `:focus` a propósito: el navegador sólo lo enciende cuando el foco * llegó por teclado, así que un clic del ratón no deja el anillo pegado —que es la razón * por la que la gente quita los anillos y deja la página sin foco. * * Dos colores, no uno: el riel es roble oscuro y el lienzo es ceniza clara. Un anillo que * contrasta en uno desaparece en el otro. Y `outline` —no `border`, no `box-shadow`— porque * es lo único que no mueve nada de sitio al aparecer y lo único que sigue el redondeado. * ─────────────────────────────────────────────────────────────────────────────────────── */ /* ⚠ SIN `:where()`. Estaba así, y `:where()` tiene especificidad CERO: cualquier regla con una clase que ponga `outline` apaga el anillo de foco de todo el producto sin que nadie lo note. Hoy ninguna lo hace; era el selector más frágil del proyecto, y el que menos se puede dar el lujo de romperse en silencio — sin él, quien navega con teclado deja de saber dónde está. */ a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--ui-texto);outline-offset:2px;border-radius:3px} .riel a:focus-visible, .riel button:focus-visible, .riel [tabindex]:focus-visible{ outline-color:var(--ui-riel-vivo)} /* El `.btn` sólido ya es tinta oscura: el anillo del mismo color se le funde encima. */ .btn:not(.fantasma):focus-visible{outline-color:var(--ui-acento);outline-offset:3px} /* ⚠️ `align-content:start` NO es cosmético. Con `min-height:100vh` y las filas al alto de su contenido, la rejilla REPARTE el espacio que sobra entre las filas —es lo que hace por defecto— y en el teléfono, donde el riel y el lienzo son dos filas, eso le mete la mitad del sobrante ENCIMA del contenido: se midió en 104 px de hueco muerto arriba del título. Sólo se ve en las pantallas cortas, o sea justo en los estados vacíos, que son los que más falta hace que se lean. */ .app{display:grid;grid-template-columns:212px 1fr;min-height:100vh; align-items:start;align-content:start} /* ⚠️ `min-width:0` en el lienzo. Una columna `1fr` de rejilla NO se encoge por debajo del contenido más ancho que tenga —es `min-width:auto`, el que trae de fábrica— así que un nombre de archivo largo sin espacios ensancha la columna, y con ella la página entera: medido, 1,467 px de contenido en una ventana de 1,280. Se ve como una barra de deslizar horizontal que no debería existir. */ /* ⚠️ Y `overflow-x:clip`, que arregla un defecto viejo y difícil de ver: las pistas de `[data-dice]` son `::after` absolutos con `min-width:max-content`, y aunque estén invisibles SIGUEN CONTANDO para el área que se puede deslizar. Medido en la pantalla del viaje: 1,467 px de contenido en una ventana de 1,280 — o sea una barra horizontal que no debería existir, en la pantalla que es el producto. `clip` y no `hidden` a propósito: `hidden` crea un contenedor de deslizamiento y rompe el `position:sticky` del riel. El precio es que una pista pegada al borde derecho se puede recortar; una barra horizontal permanente es peor que una pista a medias. */ .lienzo{min-width:0;overflow-x:clip} /* ── EL RIEL ──────────────────────────────────────────────────────────────────────────── */ .riel{background:var(--ui-riel);color:var(--ui-riel-texto); padding:var(--e4) 0 var(--e3);display:flex;flex-direction:column;gap:var(--e4); position:sticky;top:0;height:100vh;overflow-y:auto} .riel .marca{display:flex;align-items:baseline;padding:0 var(--e3);text-decoration:none} .riel .marca .the{font:300 10px/1 var(--marca-display);letter-spacing:1px; color:var(--marca-pizarra);padding-right:.18em} .riel .marca .cur{font:400 24px/.88 var(--marca-display);letter-spacing:-.6px; color:var(--ui-riel-vivo)} .riel nav{display:flex;flex-direction:column} .riel .gr{font:var(--tipo-etiqueta);letter-spacing:.26em;text-transform:uppercase; color:var(--marca-pizarra);padding:var(--e3) var(--e3) 5px} .riel a.puerta{display:flex;align-items:center;justify-content:space-between;gap:var(--e2); padding:9px var(--e3);font:var(--tipo-secundario);text-decoration:none; color:var(--ui-riel-texto);border-left:2px solid transparent;min-height:var(--toque-min)} .riel a.puerta:hover{background:var(--ui-riel-encima);color:var(--ui-riel-vivo)} .riel a.puerta .n{font-variant-numeric:tabular-nums;font-size:12px;color:var(--marca-pizarra)} /* Dónde está parada. El latón hace aquí su único trabajo: decir «aquí». */ .riel a.puerta.aqui{background:var(--ui-riel-encima);color:#fff;font-weight:500; border-left-color:var(--ui-acento-inverso)} .riel a.puerta.aqui .n{color:var(--ui-acento-inverso)} /* La pastilla roja es la que hace que el riel valga: se ve sin abrir nada. */ .riel a.puerta .n.urge{background:var(--ui-rojo-inverso);color:var(--marca-roble); border-radius:var(--r-pildora);padding:1px 7px;font-weight:600} .riel .pie{margin-top:auto;padding:var(--e3);font:var(--tipo-secundario);font-size:12px; line-height:1.5;color:var(--marca-pizarra);border-top:1px solid var(--ui-riel-linea); display:flex;flex-direction:column;gap:2px} .riel .pie a{color:var(--ui-riel-texto)} .riel .soltar{margin:0 var(--e3);font:var(--tipo-secundario);font-weight:500; text-align:center;text-decoration:none;color:var(--ui-riel-vivo); border:1px solid var(--ui-riel-linea);border-radius:var(--r);padding:9px var(--e2)} .riel .soltar:hover{background:var(--ui-riel-encima)} /* ── EL LIENZO ────────────────────────────────────────────────────────────────────────── */ .lienzo{padding:var(--e5) var(--e5) var(--e6);min-width:0} .lienzo > *{max-width:var(--ui-ancho);margin-left:auto;margin-right:auto} /* La tira de encabezado: título a la izquierda, la cifra que resume a la derecha. */ .tira{display:flex;align-items:baseline;justify-content:space-between; gap:var(--e4);flex-wrap:wrap} .tira .der{text-align:right} /* ── PIEZAS QUE SE REPITEN ────────────────────────────────────────────────────────────── */ /* Dos columnas: el porqué y lo que sale. La proporción por defecto da más aire a la * izquierda porque ahí va la evidencia, que es lo que se lee. */ .dos{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--e4);align-items:start} .dos > *{display:flex;flex-direction:column;gap:var(--e2);min-width:0} .dos.der-manda{grid-template-columns:1fr 1.25fr} /* Baldosas de cifra. ⚠️ SÓLO donde la cifra es el punto de la pantalla — el dinero, el * cierre, tu mes. Ponerlas en todas partes es cómo dejan de significar algo. */ .baldosas{display:grid;gap:var(--e2); grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} /* ⚠️ En el teléfono, `minmax(160px,1fr)` mete DOS por renglón y deja la tercera sola con un hueco del mismo tamaño al lado. Se ve como si faltara una cuarta baldosa que nunca existió, y en una pantalla de dinero un hueco donde debería ir una cifra se lee como un dato que se perdió. A 390px caben dos de 160 y sobran 22: la rejilla tiene razón y el resultado igual está mal, así que abajo de 480 se apilan y cada cifra se lee de corrido. */ @media (max-width:480px){ .baldosas{grid-template-columns:1fr} } .baldosa{border:1px solid var(--ui-linea-tenue);border-radius:var(--r); padding:var(--e3);background:var(--ui-fondo-tarjeta); display:flex;flex-direction:column;gap:3px} .baldosa .et{font:var(--tipo-etiqueta);letter-spacing:var(--letra-etiqueta); text-transform:uppercase;color:var(--ui-texto-secundario)} .baldosa .cif{font:var(--tipo-cifra);font-variant-numeric:tabular-nums; overflow-wrap:anywhere} /* Cuando la baldosa dice «no sé» en vez de una cifra, no es una cifra: no debe pesar como una. §3.6 pide decirlo; la jerarquía pide no gritarlo. */ .baldosa .cif:not(.r):not(.a):not(.v){color:var(--ui-texto)} .baldosa .cif.r{color:var(--ui-rojo)} .baldosa .cif.a{color:var(--ui-ambar)} .baldosa .cif.v{color:var(--ui-verde)} .baldosa .hd{font:var(--tipo-secundario);color:var(--ui-texto-secundario);margin:0} /* La tarjeta genérica. La franja de color va por dentro (box-shadow) para que el borde * siga siendo el mismo filete en todas: el brandboard es de filetes, no de bordes gordos. */ .tj{background:var(--ui-fondo-tarjeta);border:1px solid var(--ui-linea-tenue); border-radius:var(--r);padding:var(--e3);display:flex;flex-direction:column;gap:5px} .tj.rojo{background:var(--ui-rojo-fondo);box-shadow:inset 3px 0 0 var(--ui-rojo)} .tj.ambar{background:var(--ui-ambar-fondo);box-shadow:inset 3px 0 0 var(--ui-ambar)} .tj.verde{box-shadow:inset 3px 0 0 var(--ui-verde)} .tj.gris{background:var(--ui-sin-cobertura-fondo);box-shadow:inset 3px 0 0 var(--ui-linea)} .tj > p{margin:0} .tj .et{font:var(--tipo-etiqueta);letter-spacing:var(--letra-etiqueta); text-transform:uppercase;color:var(--ui-texto-secundario)} .tj .ht{font-weight:600} .tj .hd{font:var(--tipo-secundario);color:var(--ui-texto-secundario)} .tj blockquote{margin:3px 0 0;padding-left:var(--e2); border-left:2px solid var(--ui-linea-tenue); font:var(--tipo-secundario);color:var(--ui-texto-secundario)} /* Botones. Uno principal por bloque; el resto fantasma. */ .btn{display:inline-flex;align-items:center;justify-content:center; font:var(--tipo-secundario);font-weight:600;text-decoration:none;cursor:pointer; background:var(--ui-texto);color:var(--ui-texto-inverso);border:1px solid transparent; border-radius:var(--r);padding:9px var(--e3);min-height:var(--toque-min)} .btn:hover{opacity:.88} .btn.fantasma{background:transparent;color:var(--ui-texto);border-color:var(--ui-linea)} .btn.fantasma:hover{background:var(--ui-fondo-alterno);opacity:1} .enlinea{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap} /* Pastillas. Dicen DE QUIÉN es algo — que es lo que un contador no dice. */ .chip{display:inline-block;padding:4px 10px;border:1px solid var(--ui-linea-tenue); border-radius:var(--r-pildora);font:var(--tipo-secundario);font-size:12.5px; color:var(--ui-texto-secundario);text-decoration:none;white-space:nowrap} a.chip:hover{background:var(--ui-fondo-alterno);color:var(--ui-texto)} .chip.oro{border-color:rgba(194,168,120,.65);color:var(--ui-acento); background:var(--ui-acento-fondo)} .chip.v{border-color:rgba(79,99,80,.45);color:var(--ui-verde);background:var(--ui-verde-fondo)} .chip.r{border-color:rgba(140,74,60,.45);color:var(--ui-rojo);background:var(--ui-rojo-fondo)} .chip.aqui{border-color:var(--ui-texto);color:var(--ui-texto);font-weight:600} /* La línea de tiempo. Es la forma de los tres tramos y la de los viajes anteriores: se * aprende una vez y sirve en las dos. */ .linea-t{display:grid;grid-template-columns:auto 1fr;gap:0 var(--e3)} .linea-t .pt{width:10px;height:10px;border-radius:50%;margin-top:6px; background:var(--ui-linea);grid-column:1} .linea-t .pt.v{background:var(--ui-verde)} .linea-t .pt.r{background:var(--ui-rojo)} .linea-t .pt.a{background:var(--ui-ambar)} .linea-t .tallo{width:1px;background:var(--ui-linea-tenue);margin:2px auto;grid-column:1} .linea-t .cont{grid-column:2;padding-bottom:var(--e3);display:flex;flex-direction:column;gap:2px} .linea-t .cont > *{margin:0} /* ── LA LIGA DEL RENGLÓN CUBRE EL RENGLÓN ──────────────────────────────────────── En el expediente de un cliente hay 46 viajes, y cada uno es un título de una línea con su fecha debajo. La liga era el TEXTO del título: 14 px de alto, en un renglón que mide cuarenta y tantos. El pulgar le pega al de arriba. Estirarla a 44 px sería lo fácil y lo peor: cuarenta y seis renglones × 28 px son mil trescientos píxeles más de página, en la pantalla que justamente se está acortando. En vez de eso la liga se vuelve bloque y se come con `padding` el aire que el renglón ya tenía —el `gap` de arriba y el hueco hasta la fecha— compensado con un margen negativo del mismo tamaño. El renglón mide lo mismo; lo que crece es el área que responde al dedo. */ .linea-t .cont .ht a{display:block;padding:9px 0;margin:-9px 0 -7px; text-decoration:none;color:var(--ui-texto)} .linea-t .cont .ht a:hover{text-decoration:underline} /* Tabla compacta. Cifras con tabular-nums o las columnas no se leen. */ table.mini{width:100%;border-collapse:collapse;font:var(--tipo-secundario)} table.mini th{text-align:left;font:var(--tipo-etiqueta);letter-spacing:var(--letra-etiqueta); text-transform:uppercase;color:var(--ui-texto-secundario); padding:0 var(--e2) 5px 0;border-bottom:1px solid var(--ui-linea-tenue)} table.mini td{padding:6px var(--e2) 6px 0;border-bottom:1px solid var(--ui-linea-tenue); vertical-align:top} table.mini tr:last-child td{border-bottom:0} .m{font-variant-numeric:tabular-nums} .de-donde{color:var(--ui-texto-secundario)} /* La sección con su título. `h5` es la etiqueta de sección dentro del lienzo. */ .lienzo h5{font:var(--tipo-etiqueta);letter-spacing:.24em;text-transform:uppercase; color:var(--ui-texto-secundario);margin:0 0 var(--e2)} /* ── CUANDO EL TABLERO YA NO CABE ───────────────────────────────────────────────────────── * §3.9: una mano, pulgar, botones abajo. * * ⚠️ AQUÍ EL RIEL SE ACOSTABA, Y ESO DEJABA UNA BANDA MUERTA DE 140px DE ANCHO. * * Entre 761 y 900px —el iPad en vertical, o su laptop con la ventana a media pantalla— el * riel se volvía una tira horizontal de 58px que SE SALÍA POR LA DERECHA, y la barra de * abajo todavía no aparecía porque entraba hasta 760. Medido a 820px: se veían seis puertas * y las otras siete —La cadena, Cierre de mes, Buscar, Cómo va esto— quedaban fuera de la * pantalla, sin nada que dijera que estaban ahí. O sea que en ese rango la mitad de la * navegación no existía. * * La decisión es la misma que ya estaba escrita para el teléfono, aplicada donde de verdad * empieza a doler: **o el riel cabe como tablero, o se va y manda la barra de abajo.** No * hay una tercera forma que funcione, y la tira que se desliza era justamente la que §3.9 * dice que no sirve — arriba, donde el pulgar no llega, y escondiendo puertas detrás de un * gesto que nadie adivina. * * Los dos puntos de quiebre son ahora el mismo número a propósito: eran 900 y 760, y la * distancia entre los dos era el defecto. */ @media (max-width:900px){ .app{grid-template-columns:1fr} /* ⚠️ Aire abajo por el botón de «pregúntame», que flota fijo en la esquina. Sin esto tapa el último renglón de la pantalla, y el último renglón de «de corrido» es justo el que ella iba a tocar. */ .lienzo{padding:var(--e4) var(--e3) 92px} .dos,.dos.der-manda{grid-template-columns:1fr;gap:var(--e3)} /* La cabecera en dos mitades no cabe en 375px: el título se parte en cuatro renglones y la cifra de la derecha queda pegada al borde. Se apilan, y la cifra pasa a la izquierda — a la derecha de una pantalla angosta no la busca nadie. */ .tira{flex-direction:column;align-items:flex-start} .tira .der{text-align:left;align-items:flex-start} /* Los tres tramos en columna, con la línea que los une vuelta vertical. */ ol.tramos{grid-template-columns:1fr;gap:var(--e3)} ol.tramos::before{left:5px;right:auto;top:5px;bottom:5px;height:auto;width:1px} ol.tramos > li{padding-top:0;padding-left:var(--e4)} ol.tramos > li::before{top:2px} } /* La cifra que resume una pantalla entera. Una sola por pantalla: si hay dos, ninguna es la que importa. Vive en «tu mes» y podría vivir en el cierre — nunca en las dos. */ .cifrota{font:300 clamp(38px,5vw,52px)/1 var(--marca-display); font-variant-numeric:tabular-nums} /* ═══════════════════════════════════════════════════════════════════════════════════════ * PREGÚNTAME · el chat, en todas las pantallas * * Cerrado es un botón en la esquina; abierto es una columna a la derecha que no le quita * sitio a lo que estaba haciendo. En el celular se abre completo: media pantalla de chat en * 375px no es ni chat ni pantalla. * ═══════════════════════════════════════════════════════════════════════════════════════ */ .abrirChat{position:fixed;right:var(--e4);bottom:var(--e4);z-index:30; display:flex;align-items:center;gap:var(--e2);cursor:pointer; font:var(--tipo-secundario);font-weight:600; background:var(--ui-riel);color:var(--ui-riel-vivo); border:1px solid var(--ui-riel-linea);border-radius:var(--r-pildora); padding:11px var(--e4);min-height:var(--toque-min); box-shadow:var(--sombra-apoyada)} .abrirChat:hover{background:var(--marca-roble)} .abrirChat .chispa{color:var(--ui-acento-inverso);font-size:15px;line-height:1} .abrirChat[aria-expanded="true"]{display:none} .chat{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:31; background:var(--ui-fondo-tarjeta);border-left:1px solid var(--ui-linea); display:flex;flex-direction:column; box-shadow:var(--sombra-alzada)} .chat > header{display:flex;align-items:flex-start;justify-content:space-between; gap:var(--e2);padding:var(--e4);border-bottom:1px solid var(--ui-linea-tenue)} .chat > header p{margin:0} .chat > header .et{font:var(--tipo-etiqueta);letter-spacing:var(--letra-etiqueta); text-transform:uppercase;color:var(--ui-texto-secundario);margin-bottom:3px} .chat > header .hd{font:var(--tipo-secundario);color:var(--ui-texto-secundario)} .cerrarChat{background:transparent;border:0;cursor:pointer;font-size:24px;line-height:1; color:var(--ui-texto-secundario);padding:0 4px} .cerrarChat:hover{color:var(--ui-texto)} .chat .hilo{flex:1;overflow-y:auto;padding:var(--e4); display:flex;flex-direction:column;gap:var(--e3)} .chat .dice p{margin:0 0 var(--e2)} .chat .dice p:last-child{margin-bottom:0} .chat .dice.ella{align-self:flex-end;max-width:88%; background:var(--ui-fondo-alterno);border-radius:var(--r);padding:var(--e2) var(--e3); font:var(--tipo-secundario)} .chat .dice.claude{font:var(--tipo-secundario);line-height:1.6} .chat .dice.claude .hd{color:var(--ui-texto-secundario)} .chat .dice.pensando{color:var(--ui-texto-secundario);font-style:italic} .chat .dice.mal{color:var(--ui-rojo)} .chat .sugeridas{display:flex;flex-wrap:wrap;gap:5px;padding:0 var(--e4) var(--e3)} .chat .sug{font:var(--tipo-secundario);font-size:12.5px;cursor:pointer;text-align:left; background:transparent;color:var(--ui-texto-secundario); border:1px solid var(--ui-linea-tenue);border-radius:var(--r-pildora);padding:5px 11px} .chat .sug:hover{border-color:var(--ui-linea);color:var(--ui-texto)} .chat form{display:flex;flex-direction:column;gap:var(--e2); padding:var(--e3) var(--e4) var(--e4);border-top:1px solid var(--ui-linea-tenue)} .chat form .et{font:var(--tipo-etiqueta);letter-spacing:var(--letra-etiqueta); text-transform:uppercase;color:var(--ui-texto-secundario)} .chat textarea{font:var(--tipo-secundario);padding:var(--e2);resize:vertical; border:1px solid var(--ui-linea);border-radius:var(--r); background:var(--ui-fondo);color:var(--ui-texto)} .chat textarea:focus{outline:2px solid var(--ui-texto);outline-offset:1px} @media (max-width:640px){ .chat{width:100%;border-left:0} .abrirChat{right:var(--e3);bottom:var(--e3);padding:11px var(--e3)} .abrirChat .q{display:none} } /* ═══════════════════════════════════════════════════════════════════════════════════════ * QUÉ PASA SI LE DAS CLIC · la pista que sale al pasar el cursor * * ⚠️ NO ES UN ADORNO, Y NO ES EL `title` DEL NAVEGADOR. * * «Que cuando pongas el cursor sobre algo que le puedas dar clic, te dé una breve * explicación de qué hace.» — Yuyo, 8 de septiembre de 2026. * * El `title` de siempre tarda un segundo largo en salir, aparece donde el navegador quiere, * y con la letra del sistema. Para algo que se lee de pasada, ese segundo es justo el tiempo * en el que ella ya hizo clic o ya se fue. Esto sale en 350 ms, en su tipografía, y dice una * frase, no un nombre. * * ⚠️ LA REGLA DE LO QUE SE ESCRIBE AHÍ: dice QUÉ VA A PASAR, no cómo se llama el botón. Un * texto que repite la etiqueta —«Clientes: ver clientes»— es peor que ninguno, porque enseña * que estas pistas no dicen nada y deja de leerlas. * * En un aparato sin cursor no sale al tocar —ahí el dedo va directo— pero sí sale con el * foco: quien navega con teclado la necesita más que nadie. El corte está abajo, y es por * `hover: none` y NO por ancho de pantalla, que era el defecto que tenía. * ═══════════════════════════════════════════════════════════════════════════════════════ */ [data-dice]{position:relative} [data-dice]::after{ content:attr(data-dice); position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%); z-index:60;pointer-events:none; min-width:max-content;max-width:min(280px,60vw);white-space:normal;text-align:left; font:400 12.5px/1.4 var(--marca-texto);letter-spacing:0;text-transform:none; background:var(--ui-riel);color:var(--ui-riel-vivo); padding:7px 10px;border-radius:var(--r); box-shadow:var(--sombra-apoyada); opacity:0;visibility:hidden;transition:opacity .13s ease .35s,visibility 0s linear .48s} [data-dice]::before{ content:"";position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%); z-index:60;pointer-events:none; border:5px solid transparent;border-top-color:var(--ui-riel); opacity:0;visibility:hidden;transition:opacity .13s ease .35s,visibility 0s linear .48s} [data-dice]:hover::after,[data-dice]:hover::before, [data-dice]:focus-visible::after,[data-dice]:focus-visible::before{ opacity:1;visibility:visible;transition-delay:.35s,0s} /* Arriba del todo no cabe: se voltea hacia abajo. */ [data-dice][data-abajo]::after{bottom:auto;top:calc(100% + 8px)} [data-dice][data-abajo]::before{bottom:auto;top:calc(100% + 3px); border-top-color:transparent;border-bottom-color:var(--ui-riel)} /* En el riel oscuro la pista se pinta al revés, o desaparece sobre su propio fondo. */ .riel [data-dice]::after{background:var(--ui-fondo-tarjeta);color:var(--ui-texto); box-shadow:var(--sombra-en-lo-oscuro)} .riel [data-dice]::before{border-top-color:var(--ui-fondo-tarjeta)} /* Y sale a un lado, no arriba: el riel es angosto y una pista de 280px se saldría. */ .riel [data-dice]::after{left:calc(100% + 10px);bottom:auto;top:50%; transform:translateY(-50%)} .riel [data-dice]::before{left:calc(100% + 5px);bottom:auto;top:50%; transform:translateY(-50%);border-top-color:transparent;border-right-color:var(--ui-fondo-tarjeta)} /* ══════════════════════════════════════════════════════════════════════════════ ⚠ LA PISTA SE APAGA POR EL APARATO, NO POR EL ANCHO. Esto decía `@media (max-width:900px)`, con el argumento de que «en el celular el dedo va directo y no hay pasar por encima». El argumento es correcto y el corte estaba mal: · Una ventana de escritorio a 800 px —media pantalla, como se trabaja con el correo al lado— perdía las cincuenta pistas aunque tuviera ratón. · Una tablet táctil de 1024 px las conservaba sin poder dispararlas nunca. `hover: hover` pregunta justo lo que importa: si este aparato puede pasar por encima. ═════════════════════════════════════════════════════════════════════════════ */ @media (hover: none){ /* Sin cursor no hay globo — pero el foco sí existe: con teclado externo o navegación por conmutador, `:focus-visible` lo sigue sacando. Por eso sólo se apaga el de `:hover`. */ [data-dice]:hover::after,[data-dice]:hover::before{display:none} } @media (prefers-reduced-motion: reduce){ [data-dice]::after,[data-dice]::before{transition:none} } /* ── LA FRANJA DE DESHACER ────────────────────────────────────────────────── * §3.7 dice «deshacer en vez de confirmar», y el botón de deshacer vivía DENTRO * del renglón. En «de corrido» eso no sirve: en cuanto ella decide, el renglón se * esconde y la siguiente cosa ocupa su lugar — con el botón adentro. La salida * existía y desaparecía justo cuando hacía falta. */ .franjaDeshacer{position:fixed;left:50%;bottom:var(--e4);transform:translateX(-50%); z-index:40;display:flex;align-items:center;gap:var(--e4); background:var(--ui-riel);color:var(--ui-riel-vivo); border:1px solid var(--ui-riel-linea);border-radius:var(--r-pildora); padding:11px var(--e4);font:var(--tipo-secundario); box-shadow:var(--sombra-alzada); animation:sube .18s ease} @keyframes sube{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}} .franjaDeshacer button{font:var(--tipo-secundario);font-weight:600;cursor:pointer; background:transparent;color:var(--ui-acento-inverso);border:0;padding:0; border-bottom:1px solid rgba(194,168,120,.5)} .franjaDeshacer button:hover{border-bottom-color:var(--ui-acento-inverso)} .franjaDeshacer button:disabled{opacity:.5;cursor:default} /* En el celular va de lado a lado y arriba del botón de pregúntame. */ @media (max-width:640px){ .franjaDeshacer{left:var(--e3);right:var(--e3);transform:none;bottom:82px; justify-content:space-between;animation:none} } @media (prefers-reduced-motion: reduce){.franjaDeshacer{animation:none}} /* ══ BUSCAR ══════════════════════════════════════════════════════════════════════════════ La caja del riel y la pantalla de resultados. ⚠️ La caja va en el riel, no dentro de cada pantalla: buscar es la forma de moverse por la herramienta, no una función de la lista de viajes. Desde cualquier lado, Enter busca. */ .riel .cajaBuscar{margin:0 var(--e3)} .riel .cajaBuscar input{width:100%;box-sizing:border-box;font:var(--tipo-secundario); padding:7px var(--e2);border-radius:var(--r); background:var(--ui-riel-encima);color:var(--ui-riel-vivo); border:1px solid transparent;-webkit-appearance:none} .riel .cajaBuscar input::placeholder{color:var(--marca-pizarra)} .riel .cajaBuscar input:focus{outline:none;border-color:var(--marca-laton); background:var(--ui-riel-encima);color:#fff} .buscaGrande{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center; margin-top:var(--e3)} .buscaGrande input[type=search]{flex:1 1 22ch;min-width:0;font:var(--tipo-secundario); font-size:16px;padding:10px var(--e3);border-radius:var(--r); border:1px solid var(--ui-linea);background:var(--ui-fondo-tarjeta);color:var(--ui-texto); -webkit-appearance:none} .buscaGrande input[type=search]:focus{outline:2px solid var(--marca-laton);outline-offset:-1px} .buscaGrande select{font:var(--tipo-secundario);padding:9px var(--e2);border-radius:var(--r); border:1px solid var(--ui-linea);background:var(--ui-fondo-tarjeta);color:var(--ui-texto); max-width:26ch} .comoSeBusca{margin:var(--e3) 0 var(--e3);padding-left:var(--e3);display:flex; flex-direction:column;gap:5px} .comoSeBusca b{font-weight:600;color:var(--ui-texto)} .grupoHallado{margin-top:var(--e4)} .grupoHallado > h2{font:var(--tipo-etiqueta);letter-spacing:.2em;text-transform:uppercase; color:var(--ui-texto-secundario);margin:0 0 var(--e2);display:flex;gap:var(--e2); align-items:baseline} .listaHallada{display:flex;flex-direction:column;gap:2px} .hallado{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--e3); padding:var(--e3);text-decoration:none;color:var(--ui-texto); background:var(--ui-fondo-tarjeta);border:1px solid var(--ui-linea-tenue); border-radius:var(--r);min-height:var(--toque-min)} .hallado:hover{background:var(--ui-fondo-alterno)} .hallado .quees{display:flex;flex-direction:column;gap:1px;min-width:0} .hallado .nom{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hallado .hd{font:var(--tipo-secundario);color:var(--ui-texto-secundario); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ⚠️ Los montos en columna, alineados por el punto: es lo que deja comparar de un vistazo sin leer cada cifra. */ .hallado .montoHallado{font:var(--tipo-secundario);font-variant-numeric:tabular-nums; white-space:nowrap;color:var(--ui-texto)} .nadaHallado{margin-top:var(--e4);padding:var(--e4);border-radius:var(--r); background:var(--ui-fondo-tarjeta);border:1px solid var(--ui-linea-tenue)} .nadaHallado p{margin:0 0 var(--e2)} .nadaHallado p:last-child{margin:0} /* ⚠️ §3.13 en la pantalla: lo que no se pudo considerar se dice, y se ve. */ .avisoIncompleto{margin-top:var(--e4);padding:var(--e3);border-radius:var(--r); border:1px dashed var(--ui-linea);color:var(--ui-texto-secundario)} .nota{margin:var(--e2) 0 0} @media (max-width:900px){ /* El riel entero no existe abajo de 900px, así que su caja de buscar tampoco. Se entra a buscar por su puerta de la barra de abajo, que es donde llega el pulgar. */ .riel .cajaBuscar{display:none} /* Cada control su renglón. ⚠️ `min-width:0` y `width:100%` porque un `` va oculto y el `