/* ⚠️ GENERADO por construir.mjs — copia de la app. No se edita a mano. */ @font-face{font-family:'DA Delta';src:local('Helvetica Neue'),local('HelveticaNeue'),local('Helvetica'),local('Arial'),local('ArialMT'),local('Roboto'),local('Segoe UI'),local('Noto Sans'),local('DejaVu Sans');unicode-range:U+2202;font-display:swap} /* ∂iario aventureros — DESIGN TOKENS * Fuente de verdad: Claude Design · "Diario Aventureros Design System" (project/tokens/*.css), * exportado a diario-aventureros-intelligence/diario-aventureros-design-system. Consolidado aquí * en un único archivo (la app importa uno solo) en el estilo del repo (tabs, hex minúsculas). * Brandbook 60/30/10: fondo claro + aire (60), texto sobrio (30), acento verde en acciones (10). * Negro nunca puro (#252525). Los colores de ROL son puntuales (badges, estados), nunca rellenos grandes. */ :root { /* ═══════════════════ COLOR ═══════════════════ */ /* ---- Base de marca ---- */ --da-surface: #f1f1f1; /* fondo base de toda la app */ --da-surface-warm: #f4f4f0; /* variante cálida usada en el portal de marca */ --da-paper: #ffffff; /* tarjetas, formularios, superficies elevadas */ --da-paper-soft: #f7f7f7; /* "Accent 7" en Figma — gris casi blanco */ --da-paper-2: #ececec; /* superficie hundida / fondo de chips */ --da-card-base: #ededee; /* base de tarjeta "revelar" (success) */ --da-ink: #252525; /* texto principal — NUNCA #000 */ --da-ink-warm: #2f2418; /* madera, carteles, tinta cálida de botones-sign */ --da-gray: #9d9d9d; /* texto secundario, placeholders, estado pendiente */ --da-gray-line: #e5e7eb; /* caso puntual: línea/borde gris (gray-200) */ --da-accent: #b9c91c; /* verde lima — acción, CTA, éxito, color de marca */ --da-accent-deep: #cfde3f; /* cima del degradado del cartel activo */ --da-accent-ink: #2e3300; /* texto oscuro legible SOBRE el verde */ --da-accent-shadow: rgba(140, 155, 0, 0.3); /* sombra inferior chunky de botones verdes */ /* ---- Roles de la comunidad (uso puntual) ---- */ --da-member: #dc00d3; /* magenta — miembro, exclusividad */ --da-grumete: #fed01a; /* amarillo — grumete, bienvenida, calidez */ --da-partner: #23cf9d; /* verde-agua — partner / colaborador */ --da-pendiente: #9d9d9d; /* gris — pendiente / explorando */ /* * El ámbar oscuro que pedía el punto A-3 del modelo, y que faltaba. * * La regla es: el color del rol vive en el aro, el sello y el relleno; el texto * va en tinta. Ninguno de los colores de rol llega a 4,5:1 sobre blanco * (grumete 1,47 · accent 1,84 · colaborador 2,00 · pendiente 2,71 · miembro 4,21), * así que cuando hace falta ESCRIBIR algo en amarillo —"ya es grumete"— no se * puede usar --da-grumete. * * Mismo tono (48°) y misma saturación que --da-grumete, bajada la luminosidad * hasta pasar el listón con margen en TODAS las superficies claras del producto: * blanco 5,87:1 · paper-soft #f7f7f7 5,48:1 · superficie #f1f1f1 5,20:1 · * card-base #ededee 5,02:1 · hundido #ececec 4,97:1 · pastilla #e9e9e9 4,84:1 · * crema de aviso #fdf3d0 5,29:1. Ya no hace falta la negrita para que se lea. * * 06/09/2026 — bajado de #846a01 (que se quedaba en 4,38:1 sobre la pastilla * amarilla, a un pelo del listón) al #7a6200 que ya estaba escrito a mano en * Embudo.css:232 y EmbudoAuth.css:306. Así hay UN solo ámbar de escribir. */ --da-grumete-ink: #7a6200; /* * El gris que se puede LEER, y es la otra mitad del mismo punto A-3. * * `--da-gray` (#9d9d9d) está en la lista de colores que no llegan a 4,5:1 — da 2,71:1 * sobre blanco— y sin embargo es el que usa `--text-secondary`, o sea casi toda la letra * pequeña del producto. Mientras eso sea solo ambiente da igual; el problema es cuando * en ese gris va escrita **una regla** («avisa si no vas», «normas de comunidad», * «1 plaza pedida, todavía sin respuesta»), porque entonces lo que no se lee es * información. * * Mismo gris neutro, bajado hasta pasar el listón en las tres superficies claras del * producto: blanco 5,74:1 · superficie #f1f1f1 5,08:1 · hundido #ececec 4,86:1. * * **No sustituye a `--da-gray`**: el ambiente sigue siendo ambiente. Este es para lo * secundario que además hay que poder leer. */ --da-gray-ink: #666666; /* * El mismo valor, con un nombre que **no se redefine nunca**. * * Hace falta porque las pantallas de fondo oscuro redefinen `--da-gray-ink` a un gris * claro para su contexto (ver `Resumen.css`), y dentro de ellas hay islas claras —una * nota de papel, una tarjeta blanca— donde el secundario tiene que volver a ser oscuro. * Sin un ancla, esa vuelta no se puede escribir. */ --da-gray-ink-claro: #666666; /* * El magenta que se puede LEER — cierra el punto A-3 para el rol de miembro. * * `--da-member` (#dc00d3) da 4,21:1 sobre blanco: por debajo del 4,5:1 que hace * falta para texto, y las pastillas de rol son de 10–12 px en negrita, o sea que * no cuentan como «texto grande». Cuando hay que ESCRIBIR algo en magenta —«ya es * miembro», la cifra de la cola de conversión— no se puede usar `--da-member`. * * Mismo tono (302,5°) y misma saturación (100%), luminosidad de 43,1% a 30,2%: * blanco 7,51:1 · paper-soft 7,01:1 · superficie 6,65:1 · card-base 6,42:1 · * hundido 6,36:1 · --member-tint 5,66:1 · --member-tint-solid 4,80:1. * * **No sustituye a `--da-member`**: el color del rol sigue viviendo en el aro, el * sello, el borde y el relleno. Este es solo para escribir. */ --da-member-ink: #9a0093; /* * El verde-agua que se puede LEER — el par del colaborador, y el peor caso de * todos: `--da-partner` (#23cf9d) da 2,00:1 sobre blanco, ni la mitad del listón. * * Este valor NO se inventa: ya se usaba como valor de repuesto de * `--da-partner-ink` en Demo.css, Bienvenida.css ×2, FichaAlta.css ×2 y * Guardia.css, y estaba fichado como candidato en el bundle de Design * (2026-09-02-fundacion/tokens/README-diff.md:30). Solo faltaba darlo de alta. * Mismo tono (162°), luminosidad 20,2%: * blanco 7,99:1 · paper-soft 7,46:1 · superficie 7,07:1 · card-base 6,83:1 · * hundido 6,76:1 · --partner-tint 6,54:1 · lavado #dff7ef 7,11:1. * * ⚠️ Las dos son tinta de FONDO CLARO. En pantallas oscuras NO se usan: darían * 2,04:1 y 1,92:1 sobre `--da-ink`. */ --da-partner-ink: #0b5c44; /* * Los tres lavados que se usaban con valor de repuesto y no estaban declarados. * Mismos valores que el repuesto → cambio visual cero; lo que se arregla es que * el código deje de mentir. El crema es el fondo de los avisos de consejo * (6 usos en 5 ficheros); con --da-grumete-ink encima da 5,29:1. */ --da-grumete-wash: #fdf3d0; /* crema de aviso — 6 usos, 0 declaraciones */ --da-partner-wash: #dff7ef; /* lavado teal — 7 usos en 5 ficheros */ --da-accent-wash: #f3f6d9; /* lavado lima — 6 usos en 3 ficheros */ /* ═══════════ ESTADOS DEL SISTEMA — error · aviso · info · éxito ═══════════ * * Hasta hoy no existían. `--color-error` se llamaba en 5 sitios y no estaba * definido en ninguno: caía siempre al literal #d92d20. En otras 6 pantallas el * error se pintaba con `--da-member`, el MAGENTA de miembro — un color de ROL * haciendo de ESTADO. Y `--success` (el lima) estaba definido pero sin usar, * porque el lima da 1,84:1 sobre blanco y no se puede leer. * * Mismo patrón que `--da-grumete-ink`: el color VIVO va en el aro, el borde * izquierdo, el punto y el relleno; el TEXTO va siempre en tinta. * * ⚠️ NO uses `--er`, `--su`, `--wa` ni `--in`: son de DaisyUI v4 y las pisa. * ⚠️ Tampoco `--color-error` ni `--color-primary`: son del espacio de DaisyUI v5. */ /* ERROR — ladrillo. Ni magenta (eso es «miembro») ni el rojo plano de framework: * mismo tono cálido que la madera de los carteles, bajada la luminosidad hasta que * el MISMO valor sirve de borde (listón 3:1) y de texto (4,5:1). * Texto: 5,75 · 5,37 · 5,09 · 4,92 · 4,87. Blanco encima (badge relleno): 5,75. */ --da-error: #bd3227; /* La tinta, para texto pequeño y para escribir SOBRE el tinte rojo: * 7,50 · 7,00 · 6,64 · 6,41 · 6,34 sobre base; 6,40 · 6,01 · 5,73 sobre su tinte. */ --da-error-ink: #9e2a1c; /* La misma tinta para ESCENAS OSCURAS (login de noche, Resumen). Ya estaba escrita * a mano en Login.css:334 y da 9,18:1 sobre el velo rojo del cielo nocturno. */ --da-error-ink-claro: #ffd7d3; /* AVISO — ámbar. Más naranja (31°) y más oscuro (L 40%) que el amarillo de grumete * (48°, L 55%) para que no se lean como el mismo color. El vivo NO llega a 4,5:1 en * ninguna superficie —ningún ámbar lo hace—, así que es SOLO borde/punto: * 3,91 · 3,65 · 3,46 · 3,34 · 3,31. */ --da-warn: #c4690a; /* Texto: 6,33 · 5,91 · 5,60 · 5,41 · 5,36 sobre base; 5,49 · 5,15 · 4,91 sobre tinte. */ --da-warn-ink: #8a5300; /* INFO — azul pizarra. Único tono frío del sistema, a propósito poco saturado: * informa, no compite con el lima ni con el magenta. * Vivo, solo borde/punto: 4,28 · 3,99 · 3,79 · 3,66 · 3,62. */ --da-info: #2f7fbf; /* Texto: 7,21 · 6,73 · 6,39 · 6,17 · 6,11 sobre base; 6,38 · 5,98 · 5,71 sobre tinte. */ --da-info-ink: #215b87; /* ÉXITO — el lima de marca sigue siendo el RELLENO (`--da-accent`, con * `--da-accent-ink` #2e3300 encima: 7,19:1). Lo que faltaba era el lima que SE LEE * sobre fondo claro: 6,45 · 6,02 · 5,71 · 5,51 · 5,46. Ya existía suelto y sin * nombre en Embudo.css:221, EmbudoAuth.css:31 y 58, Invitacion.css:68 y 112 y * Onboarding.css:639. Arregla el peor contraste de la app: el veredicto «encaja», * que hoy es lima escrito sobre lima (1,47:1). * * ⚠️ Ojo al sufijo: `--da-accent-ink` es la tinta que va ENCIMA del lima; * `--da-accent-text` es el lima convertido en tinta. No son intercambiables. */ --da-accent-text: #5a6400; /* ---- Madera y carteles (signpost RPG) ---- * * ⚠️ **Rebajados el 09/09/2026, y es el cambio que pidió Andoni:** *«se ha intentado hacer * ese tablón de madera, pero parece algo del Paint. Hay que darle mucho más fino, * profesional, elegante… pero con tokens, no saturando demasiado»*. * * Lo que fallaba no era la idea, era el **croma**. La madera iba a 53 % de saturación * (`#8a5a2b`), que no es madera: es terracota, y a pantalla completa satura la vista y * aplasta todo lo que se pone encima. Los mismos tonos con la mitad de croma leen como * nogal envejecido, que es lo que se buscaba — el brandbook ya lo avisaba: *«no * sobrecargar con estética RPG; usarla como guiño, no como sistema entero»*. * * Se ha mantenido la LUMINOSIDAD de cada uno para no romper las once pantallas que los * usan (el Hogar, la carta de amor, el resumen, el índice, compartir…): en todas son * fondo con tinta cálida oscura encima, así que bajar croma y subir claridad solo puede * mejorar el contraste, nunca empeorarlo. */ --da-wood-1: #76614c; /* nogal claro — antes #8a5a2b, que era terracota */ --da-wood-2: #5c4a39; /* nogal — antes #6c431f */ --da-sign-1: #ecdcbe; /* cara del cartel: pergamino, no oro */ --da-sign-2: #ddc9a4; --da-pin-1: #a68a6a; /* chincheta de latón viejo, no de plástico naranja */ --da-pin-2: #7a6247; /* ---- Canal WhatsApp (omnipresente en el producto) ---- */ --da-wa: #25d366; /* verde WhatsApp — botones "abrir chat" */ --da-wa-deep: #075e54; /* cabecera de chat */ --da-wa-bubble: #dcf8c6; /* burbuja de mensaje saliente */ /* ---- Tablón de anuncios (sello postal — paneles perforados) ---- */ --da-board-bg: #dee2b7; /* verde salvia — fondo de fila de tablón (legacy) */ --da-board-ink: #5b630c; /* olivo oscuro — texto del tablón */ --da-board-title: #2c2825; /* tinta casi negra — título grande del tablón */ --da-stamp-green: #a8bd1c; /* panel OFICIALES — cuerpo del sello verde lima */ --da-stamp-olive: #6e7615; /* panel MIEMBROS — cuerpo del sello oliva oscuro */ --da-board-card: #dce3b6; /* fila/tarjeta sage SOBRE panel verde */ --da-board-card-muted: #c7ce9e; /* fila/tarjeta sage SOBRE panel oliva */ --da-stamp-oficial: #fbb825; /* amarillo — cinta/badge "OFICIALES" */ --da-stamp-check: #fbb825; /* badge circular ✓ (oficiales) */ --da-stamp-key: #dc00d3; /* badge circular 🔑 (miembros) = magenta de marca */ /* ---- Líneas y velos ---- */ --da-border: rgba(0, 0, 0, 0.09); /* borde estándar de tarjetas */ --da-border-soft: rgba(0, 0, 0, 0.06); --da-veil: rgba(10, 10, 10, 0.4); /* overlay de modales */ /* ---- Alias semánticos — usa estos en componentes y pantallas ---- */ --bg: var(--da-surface); --bg-warm: var(--da-surface-warm); --surface-card: var(--da-paper); --surface-sunken: var(--da-paper-2); --text-primary: var(--da-ink); /* * ⚠️ **Secundario NO quiere decir ilegible.** Esto apuntaba a `--da-gray` (#9d9d9d), que * da **2,4:1** sobre el fondo de la app — muy por debajo del 4,5:1 que hace falta para * leer texto. Y como `--text-secondary` viste casi toda la letra pequeña del producto, * ahí iban escritas cosas que hay que poder leer: *«avisa si no vas»*, *«normas de * comunidad»*, *«1 plaza pedida, todavía sin respuesta»*, la letra de las cifras del * histórico. Un texto que no se lee no es diseño discreto: es decoración. * * Se cambió el 29/08/2026 al gris legible (5,1:1 sobre la superficie de la app). Sube un * punto el peso visual de la letra pequeña, y a cambio se lee. Es el punto A-3 del * modelo llevado hasta el final: *«el texto va siempre en tinta»*. * * **`--da-gray` no se toca** y sigue siendo el de antes: es el gris de lo que de verdad * es ambiente —placeholders, bordes, estados apagados, el pendiente de la senda— donde * no hay nada que leer. */ --text-secondary: var(--da-gray-ink); --text-on-accent: var(--da-accent-ink); --text-on-dark: #ffffff; --text-warm: var(--da-ink-warm); --text-member: var(--da-member-ink); /* escribir «miembro» — nunca --da-member */ --text-partner: var(--da-partner-ink); /* escribir «colaborador» — nunca --da-partner */ --accent: var(--da-accent); --accent-ink: var(--da-accent-ink); /* ---- Estados: el vivo para el aro y el borde, la tinta para el texto ---- */ --error: var(--da-error); --error-ink: var(--da-error-ink); --error-ink-claro: var(--da-error-ink-claro); --error-tint: rgba(189, 50, 39, 0.1); --error-tint-solid: rgba(189, 50, 39, 0.2); --warn: var(--da-warn); --warn-ink: var(--da-warn-ink); --warn-tint: rgba(196, 105, 10, 0.12); --warn-tint-solid: rgba(196, 105, 10, 0.22); --info: var(--da-info); --info-ink: var(--da-info-ink); --info-tint: rgba(47, 127, 191, 0.1); --info-tint-solid: rgba(47, 127, 191, 0.2); --success: var(--da-accent); /* relleno — el éxito se pinta con el verde de marca */ --success-ink: var(--da-accent-text); /* texto y borde — el lima NO se lee (1,84:1) */ --success-tint: var(--accent-tint); /* ⚠️ NO uses `--wa` en componentes: DaisyUI lo pisa con su color "warning" (oklch). * Para el verde de WhatsApp usa el token crudo `--da-wa`. */ --wa: var(--da-wa); --border: var(--da-border); --border-soft: var(--da-border-soft); /* ⚠️ **Es un COLOR, no un atajo.** `outline: var(--focus-ring)` deja el `outline-style` en * `none` y entonces NO SE VE NINGÚN FOCO: quien navega con teclado se queda sin saber * dónde está. Se escribe siempre con su grosor y su estilo delante — * `outline: 3px solid var(--focus-ring)`— como hacen `Tablon.css` y `FichaAlta.css`. */ --focus-ring: rgba(185, 201, 28, 0.2); /* halo de focus en inputs */ /* tintes de rol al 10–12% para fondos suaves de badge */ --member-tint: rgba(220, 0, 211, 0.1); --member-tint-solid: rgba(220, 0, 211, 0.2); --grumete-tint: rgba(254, 208, 26, 0.16); --grumete-tint-solid: rgba(254, 208, 26, 0.24); --partner-tint: rgba(35, 207, 157, 0.12); --partner-tint-solid: rgba(35, 207, 157, 0.2); --accent-tint: rgba(185, 201, 28, 0.12); --accent-tint-solid: rgba(185, 201, 28, 0.2); /* ═══════════════════ TIPOGRAFÍA ═══════════════════ */ /* ---- Familias ---- */ --font-display: 'DA Delta', 'Bike Park', 'Roboto', system-ui, sans-serif; /* titulares (Bike Park aún no desplegada → cae a Roboto 900) */ --font-body: 'DA Delta', 'Roboto', system-ui, -apple-system, sans-serif; /* cuerpo / UI */ --font-editorial: 'DA Delta', 'Lora', Georgia, 'Times New Roman', serif; /* modo editorial */ --font-hand: 'DA Delta', 'Gochi Hand', 'Comic Sans MS', cursive; /* acento manuscrito */ --font-pixel: 'DA Delta', 'Minecraft', 'Press Start 2P', ui-monospace, monospace; /* acento retro/RPG */ --font-mono: 'DA Delta', ui-monospace, Menlo, Consolas, monospace; /* rutas, código, tickers */ --font-adventure: 'DA Delta', 'Rubik', var(--font-body); /* títulos de tarjeta de aventura (ExperienceCard) */ --font-poster: 'DA Delta', 'Poppins', var(--font-body); /* carteles / tablón de anuncios vintage */ /* ---- Pesos ---- */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 900; /* ---- Escala de tamaño (mobile-first, base 15px) ---- */ --text-xs: 11px; /* micro-labels, hints, metadatos */ --text-sm: 13px; /* secundario, subtítulos de tarjeta */ --text-base: 15px; /* cuerpo por defecto */ --text-md: 17px; /* destacado de párrafo, h3 de tarjeta */ --text-lg: 20px; /* títulos de sección pequeños */ --text-xl: 24px; /* h2 compacto */ --text-2xl: 32px; /* títulos de pantalla */ --text-3xl: 44px; /* héroes secundarios */ --text-4xl: 62px; /* héroe grande */ --text-counter: clamp(80px, 15vw, 144px); /* contadores gigantes de páginas de datos */ --text-hero: clamp(28px, 6vw, 62px); /* ---- Interlineado ---- */ --leading-tight: 0.95; /* titulares grandes */ --leading-snug: 1.1; /* títulos de tarjeta */ --leading-normal: 1.6; /* cuerpo */ --leading-relaxed: 1.7; /* editorial / textos largos */ /* ---- Tracking ---- */ --tracking-mega: -0.06em; /* contadores y héroes */ --tracking-tight: -0.04em; /* titulares */ --tracking-snug: -0.02em; /* subtítulos */ --tracking-normal: 0; --tracking-label: 0.12em; /* labels en MAYÚSCULA */ --tracking-pixel: 0.05em; /* texto pixel/RPG */ /* ═══════════════════ ESPACIADO · RADIOS · SOMBRAS · MOVIMIENTO ═══════════════════ */ /* ---- Espaciado (base 4px) ---- */ --space-1: 4px; --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-22: 88px; /* padding vertical de secciones de landing */ --measure: 480px; /* ancho de columna de lectura */ --container: 1100px; --container-lg: 1280px; /* * ---- Radios ---- * * Andoni, 07/09/2026: *«en general botones cta más cuadrados como "mis productos" en el * de colaboradores etc. En la mayoría de la app una estética más cuadrada que * redondeada»*. * * El ancla es su propia referencia: `.co-rapido__card` (ColaboradorPortal.css:780), la * tarjeta de «Mis productos», que ya estaba a **3 px**. Y no era un caso aislado: el 3 px * ya se usaba a mano en 25 declaraciones de 15 ficheros. El lenguaje cuadrado estaba * empezado y sin sistematizar; esto lo sistematiza. * * La escala vieja era 6/8/12/16/18/22/26. Se mantiene la progresión —cuanto más grande la * pieza, algo más de radio— pero comprimida: una tarjeta grande a 3 px sigue leyéndose * como tarjeta, y a 16 px se leía como pastilla. * * ⚠️ `--radius-pill` NO se toca, y es el freno de mano de todo esto. De él cuelgan los * avatares, las pastillas de rol, los interruptores, las barras de progreso y los puntos * de paginación: 257 declaraciones en 92 ficheros que TIENEN que seguir redondas. Una cara * cuadrada deja de leerse como persona y una barra de progreso cuadrada deja de leerse * como progreso. */ --radius-xs: 2px; /* chips de tag, code inline */ --radius-sm: 3px; /* inputs */ --radius: 3px; /* botones, campos grandes — el ancla: .co-rapido__card */ --radius-md: 3px; /* tarjetas (estándar app) */ --radius-lg: 4px; /* paneles del portal */ --radius-xl: 6px; /* modales, drawers */ --radius-2xl: 8px; /* tarjetas-héroe "revelar" */ --radius-pill: 999px; /* badges, navegación, barras, avatares — NO se cuadra */ /* ---- Bordes ---- */ --border-width: 1px; --border-width-strong: 1.5px; /* inputs y burbujas RPG finas */ --border-rpg: 3px; /* contorno grueso de carteles / bocadillos pixel */ /* ---- Sombras ---- */ --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-sm: 0 3px 14px rgba(0, 0, 0, 0.06); --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.08); --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.1); /* pastillas flotantes / topbar */ --shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.25); --shadow-pop: 0 18px 44px rgba(0, 0, 0, 0.1); --shadow-inset: inset 0 2px 8px rgba(0, 0, 0, 0.04); /* Botones "chunky" — sombra inferior sólida (no blur). Se hunde al pulsar. */ --press-accent: 0 4px 0 var(--da-accent-shadow); --press-member: 0 5px 0 rgba(180, 0, 170, 0.3); --press-wood: 0 5px 0 var(--da-ink-warm); --press-wa: 0 5px 0 rgba(20, 140, 60, 0.3); /* ---- La cámara del recorrido ---- * Lo que de la cámara de `shared/ui/recorrido` pinta el CSS. Y solo eso: el * paralaje, el desenfoque y la persecución los calcula JS fotograma a fotograma y * sus cifras viven, con nombre, en `shared/ui/recorrido/camara.ts`. Copiarlas aquí * también sería tener el mismo número en dos sitios, que es como se desincronizan. */ --cam-trama: 46px; /* el punteado del fondo — es lo que hace visible el paralaje */ /* ---- Movimiento ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 0.15s; --dur: 0.3s; --dur-slow: 0.65s; } /* Un transporte montado por capas — el diorama que llega derrapando y gira con el dedo. * * La estructura importa, y es esta: * * .tp-escena el escenario: proporción fija y la perspectiva * __halo la luz del color del vehículo, al fondo * __marco el trozo de escenario que ocupa el dibujo (ver `marcoDe`) * __suelo la sombra y el asfalto que corre. NO gira: es el suelo * __polvo la polvareda de llegar y de arrancar * __diorama lo que gira con el dedo * __pieza cada capa: se coloca, coge su profundidad y hace su entrada * img y dentro, la que hace la animación de estar viva * * Que la entrada y la vida propia estén en elementos distintos no es manía: dos * animaciones sobre la misma propiedad en el mismo elemento no se suman, gana la última. * Separándolas, el coche puede llegar derrapando **mientras** ya traquetea. */ .tp-escena { --mx: 0; --my: 0; /* Cuánto se separan las capas en profundidad. Lo único que hay que tocar para que el diorama sea más plano o más exagerado. */ --hondura: 26px; position: relative; display: block; width: 100%; /* Apaisado, porque todos los vehículos son más anchos que altos. Que sea FIJO es lo que impide que la tarjeta pegue un salto de alto al cambiar de coche. */ aspect-ratio: 5 / 4; touch-action: pan-y; /* La perspectiva va aquí y no en el diorama: si viviera dentro del elemento que gira, el punto de fuga giraría con él y el efecto 3D se volvería un cizallamiento. */ perspective: 900px; perspective-origin: 50% 55%; } /* El halo del color del vehículo. Detrás de todo, y lo bastante grande como para que se lea como luz de la escena y no como un círculo pintado. Respira. */ .tp-escena__halo { position: absolute; inset: 4% 0 8%; background: radial-gradient(ellipse at 50% 48%, var(--tono) 0%, transparent 68%); opacity: 0.22; filter: blur(6px); animation: tp-respira 5.5s ease-in-out infinite; } /* El marco lleva el tamaño en línea (lo calcula `marcoDe`) y se centra solo. */ .tp-escena__marco { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); transform-style: preserve-3d; } /* ── el suelo ───────────────────────────────────────────────────────────── La sombra bajo las ruedas y, si el vehículo rueda, el asfalto pasando. Va fuera del diorama: una sombra que se levanta del suelo delata que la profundidad era mentira. */ .tp-escena__suelo { position: absolute; right: 8%; bottom: -1%; left: 8%; height: 9%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3), transparent 70%); border-radius: 50%; transform: translate3d(calc(var(--mx) * -6px), 0, 0); transition: transform 0.5s var(--ease); animation: tp-sombra 2.6s ease-in-out infinite; } /* El asfalto: rayas cortas pasando de derecha a izquierda. Solo bajo lo que rueda. * * Es más ancho que su hueco y se mueve con `transform`, no con `background-position`. * Mover el fondo obliga al navegador a repintar la tira en cada fotograma, para siempre; * moverla con transform lo resuelve el compositor y no repinta nada. En una animación * infinita que vive en el móvil, eso es batería. */ .tp-escena__suelo[data-rueda='true']::after { position: absolute; inset: 38% -30% 38% -30%; content: ''; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.24) 0 14px, transparent 14px 34px); animation: tp-asfalto 0.9s linear infinite; } /* La polvareda. Está siempre montada y solo se ve cuando algo la dispara (llegar, arrancar): así no hay que añadir ni quitar nodos en mitad de la animación. */ .tp-escena__polvo { position: absolute; bottom: 2%; left: 6%; width: 34%; height: 26%; background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.95) 0 42%, transparent 60%), radial-gradient(circle at 62% 50%, rgba(240, 238, 230, 0.9) 0 34%, transparent 58%), radial-gradient(circle at 46% 30%, rgba(255, 255, 255, 0.75) 0 26%, transparent 55%); opacity: 0; filter: blur(2px); animation: tp-polvo 0.85s var(--ease) 0.12s both; } .tp-escena__diorama { position: absolute; inset: 0; transform: rotateY(calc(var(--mx) * var(--giro))) rotateX(calc(var(--my) * var(--giro) * -0.55)); transform-style: preserve-3d; transition: transform 0.5s var(--ease); } /* ── las piezas ─────────────────────────────────────────────────────────── El envoltorio coloca y da profundidad, y hace la entrada escalonada. La imagen de dentro es la que está viva. */ .tp-escena__pieza { position: absolute; display: block; /* La profundidad de verdad. `--z` sale del kit: 0.28 al fondo, 1.25 pegada a la cara. */ transform: translateZ(calc((var(--z) - 0.5) * var(--hondura))); transform-style: preserve-3d; /* Cada pieza aterriza un pelo después que la anterior: el coche primero y quien va dentro medio pestañeo más tarde. Es lo que da la sensación de peso. */ animation: tp-aterriza 0.5s var(--ease-bounce) calc(var(--orden) * 55ms) backwards; } /* La imagen llena la caja que ya reservó el envoltorio con la proporción del kit. Así el dibujo está colocado antes de descargar y no hay ni salto ni hueco. */ .tp-escena__pieza img { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; } /* ── vida propia ────────────────────────────────────────────────────────── Cada imagen anima sola porque cada una es su propio fichero. Aquí ya no hace falta repetir la profundidad: de eso se encarga el envoltorio. */ .tp-escena__pieza img[data-vida='traqueteo'] { animation: tp-traqueteo 2.6s ease-in-out infinite; } .tp-escena__pieza img[data-vida='traquetea'] { animation: tp-traquetea 1.4s linear infinite; } .tp-escena__pieza img[data-vida='saluda'] { transform-origin: 30% 80%; animation: tp-saluda 2.2s ease-in-out infinite; } .tp-escena__pieza img[data-vida='gira'] { animation: tp-gira 3.4s ease-in-out infinite; } .tp-escena__pieza img[data-vida='humo'] { transform-origin: 90% 100%; animation: tp-humo 6s ease-in-out infinite; } .tp-escena__pieza img[data-vida='hojas'] { animation: tp-hojas 5.5s ease-in-out infinite; } .tp-escena__pieza img[data-vida='piensa'] { animation: tp-piensa 4.2s ease-in-out infinite; } .tp-escena__pieza img[data-vida='bota'] { animation: tp-bota 2.6s ease-in-out infinite; } /* La misma animación, medio compás más tarde: si los dos ocupantes botan a la vez parecen una calcomanía, y desfasados parecen dos personas en el mismo coche. */ .tp-escena__pieza img[data-vida='bota-tarde'] { animation: tp-bota 2.6s ease-in-out -1.3s infinite; } .tp-escena__pieza img[data-vida='jadea'] { transform-origin: 50% 20%; animation: tp-jadea 1.8s ease-in-out infinite; } /* ── llegar y arrancar ──────────────────────────────────────────────────── `backwards` y no `both` a propósito: con `both`, el último fotograma se quedaría pegado y mataría el parallax del dedo para siempre. Con `backwards`, la animación suelta el elemento al acabar y el giro vuelve a mandar. */ .tp-escena__diorama { animation: tp-llega 0.55s var(--ease-bounce) backwards; } /* Al elegir, el vehículo arranca y se sale del cuadro. Lo hace el marco entero para que el suelo y la polvareda se vayan con él: media escena quedándose es una escena rota. */ .tp-escena[data-arranca] .tp-escena__marco { animation: tp-arranca 0.9s cubic-bezier(0.45, 0, 0.75, 0.2) both; } .tp-escena[data-arranca] .tp-escena__polvo { animation: tp-polvo 0.7s var(--ease) both; } @keyframes tp-llega { 0% { opacity: 0; transform: translate3d(calc(var(--entrada, 1) * 42%), 0, 0) rotateZ(calc(var(--entrada, 1) * 5deg)) scale(0.86); } 58% { opacity: 1; transform: translate3d(calc(var(--entrada, 1) * -3%), 0, 0) rotateZ(0deg) scale(1.02); } /* Sin `transform` en el 100 %: así vuelve al valor de base, que es el del parallax. */ 100% { opacity: 1; } } @keyframes tp-aterriza { 0% { transform: translate3d(0, -14%, 0) translateZ(calc((var(--z) - 0.5) * var(--hondura))); } 100% { transform: translateZ(calc((var(--z) - 0.5) * var(--hondura))); } } @keyframes tp-arranca { 0% { transform: translate3d(-50%, -50%, 0); } /* Se agacha atrás antes de salir: el gesto de coger impulso. */ 22% { transform: translate3d(-54%, -50%, 0) scale(1.03); } 100% { opacity: 0.12; transform: translate3d(80%, -50%, 0) scale(0.82) rotateZ(-2deg); } } @keyframes tp-polvo { 0% { opacity: 0; transform: translate3d(14%, 0, 0) scale(0.5); } 30% { opacity: 0.9; } 100% { opacity: 0; transform: translate3d(-26%, -18%, 0) scale(1.5); } } /* ── el ambiente ──────────────────────────────────────────────────────────── */ @keyframes tp-respira { 0%, 100% { opacity: 0.18; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.05); } } /* La sombra se encoge cuando el coche sube: si se quedara quieta, el bote no pesaría. */ @keyframes tp-sombra { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.78; transform: scale(0.94); } } /* Justo un periodo del degradado (34 px): al saltar al principio, la costura no se ve. */ @keyframes tp-asfalto { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-34px, 0, 0); } } /* ── la vida de cada pieza ──────────────────────────────────────────────── */ @keyframes tp-traqueteo { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -1.1%, 0) rotate(-0.5deg); } } /* El tren no bota: vibra sobre las vías, seco y rápido. */ @keyframes tp-traquetea { 0%, 100% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(-0.3%, -0.4%, 0); } 75% { transform: translate3d(0.3%, 0.2%, 0); } } @keyframes tp-saluda { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); } 50% { transform: translate3d(0, -1.5%, 0) rotate(3deg); } } /* El plátano de Mario Kart: da vueltas sobre sí mismo, tirado en el asfalto. */ @keyframes tp-gira { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg) scale(1); } 50% { transform: translate3d(0, -5%, 0) rotate(14deg) scale(1.06); } } @keyframes tp-humo { 0%, 100% { opacity: 0.9; transform: translate3d(0, 0, 0) scale(1); } 50% { opacity: 1; transform: translate3d(-1.6%, -1.2%, 0) scale(1.035); } } @keyframes tp-hojas { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 33% { transform: translate3d(3%, -4%, 0) rotate(8deg); } 66% { transform: translate3d(-2%, 2%, 0) rotate(-6deg); } } /* Quien se lo está pensando no se mueve: respira. */ @keyframes tp-piensa { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -0.5%, 0) scale(1.008); } } @keyframes tp-bota { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -1.8%, 0) rotate(1.5deg); } } @keyframes tp-jadea { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.5deg); } 50% { transform: translate3d(0, -0.9%, 0) rotate(2deg); } } /* ── quieta ─────────────────────────────────────────────────────────────── El mismo dibujo, sin girar ni animarse: para listas, resúmenes y capturas. */ .tp-escena[data-quieta] .tp-escena__diorama { transform: none; transition: none; animation: none; } .tp-escena[data-quieta] .tp-escena__pieza, .tp-escena[data-quieta] .tp-escena__pieza img, .tp-escena[data-quieta] .tp-escena__polvo, .tp-escena[data-quieta] .tp-escena__halo, .tp-escena[data-quieta] .tp-escena__suelo, .tp-escena[data-quieta] .tp-escena__suelo::after { animation: none; } .tp-escena[data-quieta] .tp-escena__polvo, /* El asfalto quieto no es asfalto: es una línea de puntos debajo del coche. Si no se mueve, no dice nada y estorba. */ .tp-escena[data-quieta] .tp-escena__suelo[data-rueda='true']::after { display: none; } /* Quien pide menos movimiento ve el mismo dibujo, quieto. */ @media (prefers-reduced-motion: reduce) { .tp-escena { --giro: 0deg; } .tp-escena__pieza, .tp-escena__pieza img, .tp-escena__halo, .tp-escena__suelo, .tp-escena__suelo::after, .tp-escena__polvo, .tp-escena__diorama, .tp-escena[data-arranca] .tp-escena__marco { animation: none; } .tp-escena__polvo, .tp-escena__suelo[data-rueda='true']::after { display: none; } .tp-escena__diorama, .tp-escena__suelo { transition: none; } } /* Escoge transporte — el *character select*. El color de todo sale de `--tono`, que lo * pone el vehículo elegido: cambiar de coche cambia la luz de la pantalla entera. */ /* `min-width` no es decoración: con las flechas flotando, dentro de la tarjeta no queda nada que tenga ancho propio. En un contenedor que se ajusta a su contenido (una celda de grid centrada, por ejemplo) eso la dejaba en 42 px de puro padding. Este suelo la sostiene aunque quien la coloque no le diga cuánto mide. */ .tp { position: relative; display: flex; flex-direction: column; gap: var(--space-4); min-width: 260px; padding: var(--space-5); overflow: hidden; background: radial-gradient(ellipse 120% 70% at 50% 0%, color-mix(in srgb, var(--tono) 16%, transparent), transparent 70%), var(--da-paper); border: var(--border-width-strong) solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); transition: background 0.5s var(--ease); } /* ── la cabecera ─────────────────────────────────────────────────────────── */ .tp__cab { display: flex; gap: var(--space-3); align-items: baseline; justify-content: space-between; } .tp__kicker { margin: 0; font-family: var(--font-poster); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-label); } .tp__cuenta { display: flex; gap: var(--space-2); align-items: baseline; margin: 0; font-family: var(--font-pixel); font-size: var(--text-xs); color: var(--text-secondary); letter-spacing: var(--tracking-pixel); } .tp__cuenta b { font-size: var(--text-lg); color: var(--tono); transition: color 0.45s var(--ease); } /* ── la pista ────────────────────────────────────────────────────────────── */ /* Es un `fieldset`, así que lo primero es quitarle el marco y el hueco que trae de fábrica. `min-inline-size: 0` es el que hace falta de verdad: sin él, un fieldset se niega a encoger por debajo de su contenido y el carrusel desborda en móvil. El escenario ocupa TODO el ancho y las flechas van encima, flotando en los bordes. Puestas al lado —que es como estaba— se comían 104 px de 378: el vehículo salía un tercio más pequeño de lo que cabía. Encima no tapan nada, porque el encuadre deja un 5 % de aire a cada lado, y además es como se ven en un *character select* de verdad. */ .tp__pista { position: relative; display: block; min-inline-size: 0; padding: 0; /* A sangre: el escenario se come el padding de la tarjeta y llega a los bordes. Son 42 px más de vehículo, y deja sitio a las flechas fuera del dibujo. */ margin: 0 calc(var(--space-5) * -1); border: 0; } /* Las flechas son gordas a propósito: son el mando de este selector, y en el móvil se pulsan con el pulgar mientras el ojo está en el coche. */ .tp__flecha { position: absolute; top: 50%; z-index: 6; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; font-size: 26px; line-height: 1; color: var(--text-primary); cursor: pointer; /* Translúcidas y desenfocadas: van ENCIMA del dibujo, así que tienen que dejarse ver sin taparlo. Opacas se comían media rueda. */ background: color-mix(in srgb, var(--da-paper) 78%, transparent); border: var(--border-width) solid var(--border-soft); border-radius: var(--radius-pill); box-shadow: var(--shadow-xs); backdrop-filter: blur(4px); transform: translateY(-50%); transition: transform 0.18s var(--ease-bounce), box-shadow 0.18s var(--ease), background 0.3s var(--ease); /* Laten despacio para que se lean como el mando de esto y no como adorno. */ animation: tp-invita 3.4s ease-in-out infinite; } .tp__flecha:first-of-type { left: var(--space-2); } .tp__flecha:last-of-type { right: var(--space-2); } .tp__flecha:hover { background: color-mix(in srgb, var(--tono) 22%, var(--da-paper)); box-shadow: var(--shadow-card); transform: translateY(-50%) scale(1.1); } .tp__flecha:active { transform: translateY(-50%) scale(0.94); } /* Se paran en cuanto las tocas: una flecha que sigue latiendo bajo el dedo es ruido. */ .tp__flecha:hover, .tp__flecha:focus-visible { animation: none; } /* El escenario no recorta: el diorama gira y las piezas de delante se salen un pelo del cuadro. Recortarlas mataría justo la parte que da profundidad. `--entrada` es lo único que le dice a la escena por qué lado llega el vehículo; la animación de llegada vive dentro de `EscenaTransporte.css`, que es de quien es. */ .tp__escenario { --entrada: 1; position: relative; } .tp__escenario[data-entra='izq'] { --entrada: -1; } /* Los rayos del momento de subirse: salen de detrás del vehículo y se abren. */ .tp__rayos { position: absolute; top: 50%; left: 50%; width: 150%; aspect-ratio: 1; pointer-events: none; background: repeating-conic-gradient( from 0deg, color-mix(in srgb, var(--tono) 70%, transparent) 0deg 6deg, transparent 6deg 18deg ); opacity: 0; mask-image: radial-gradient(circle, transparent 26%, black 42%, transparent 66%); transform: translate3d(-50%, -50%, 0) scale(0.4); } .tp[data-en-marcha] .tp__rayos { animation: tp-rayos 0.85s var(--ease) both; } /* Las líneas de velocidad: barren el escenario cuando entra el vehículo nuevo y se van. Es lo que convierte un cambio de imagen en un adelantamiento. */ .tp__lineas { position: absolute; inset: 18% -12% 26%; pointer-events: none; background: repeating-linear-gradient( 100deg, color-mix(in srgb, var(--tono) 55%, transparent) 0 3px, transparent 3px 26px ); opacity: 0; animation: tp-lineas 0.5s var(--ease) both; } /* Los cartelitos van CLAVADOS en la esquina del escenario, no flotando en medio: uno dice por qué te lo recomendamos y el otro que ya no cabes. Entran girando, como el sello que se estampa encima de una foto. */ .tp__reco, .tp__completo { position: absolute; top: var(--space-3); left: var(--space-5); z-index: 5; padding: 3px var(--space-2); font-family: var(--font-poster); font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.08em; border-radius: var(--radius-pill); animation: tp-cartel 0.4s var(--ease-bounce) 0.3s backwards; } .tp__reco { color: var(--da-accent-ink); background: var(--da-accent); box-shadow: 0 2px 0 var(--da-accent-shadow); transform: rotate(-3deg); } /* El «completo» va en la otra esquina y abajo: no compite con el recomendado, y cae donde está la carrocería, que es lo que se está diciendo que ya no tiene sitio. */ .tp__completo { top: auto; right: var(--space-5); bottom: var(--space-4); left: auto; color: var(--text-on-dark); background: var(--da-gray-ink); transform: rotate(3deg); } /* El sello de subirse: cae encima un instante, como el «¡OK!» de un select. */ .tp__sello { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-poster); font-size: clamp(28px, 8vw, 46px); font-weight: var(--fw-black); color: var(--tono); text-transform: uppercase; letter-spacing: var(--tracking-tight); text-shadow: 0 2px 0 var(--da-paper), 0 0 22px color-mix(in srgb, var(--tono) 60%, transparent); pointer-events: none; opacity: 0; transform: scale(2.4) rotate(-8deg); } .tp[data-en-marcha] .tp__sello { animation: tp-sello 0.9s var(--ease-bounce) both; } /* ── la placa del vehículo ───────────────────────────────────────────────── */ .tp__placa { display: flex; flex-direction: column; gap: var(--space-1); align-items: center; padding: var(--space-4) var(--space-5); text-align: center; background: color-mix(in srgb, var(--tono) 10%, var(--da-paper-soft)); border: var(--border-width-strong) solid color-mix(in srgb, var(--tono) 40%, var(--border)); border-radius: var(--radius-md); transition: background 0.45s var(--ease), border-color 0.45s var(--ease); animation: tp-placa 0.4s var(--ease-bounce) 0.12s backwards; } .tp__placa-vehiculo { font-family: var(--font-pixel); font-size: var(--text-xs); color: color-mix(in srgb, var(--tono) 70%, var(--da-ink)); text-transform: uppercase; letter-spacing: var(--tracking-label); } .tp__placa-titulo { font-family: var(--font-poster); font-size: var(--text-xl); font-weight: var(--fw-black); line-height: 1.1; color: var(--text-primary); letter-spacing: var(--tracking-tight); } .tp__placa-pie { font-size: var(--text-sm); color: var(--text-secondary); } .tp__modo { padding: 2px var(--space-3); margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-primary); text-transform: uppercase; letter-spacing: var(--tracking-label); background: var(--da-paper); border: var(--border-width) solid var(--border); border-radius: var(--radius-pill); } /* Las plazas, en huecos: se ven venir sin leer el número. */ .tp__plazas { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); } .tp__plazas[data-estado='ultima'] { font-weight: var(--fw-bold); color: var(--da-grumete-ink); } .tp__plazas[data-estado='lleno'] { color: var(--da-gray-ink); } .tp__huecos { display: flex; gap: 3px; } .tp__hueco { width: 9px; height: 9px; background: var(--da-paper-2); border: var(--border-width) solid var(--border); border-radius: 2px; } .tp__hueco[data-libre='true'] { background: var(--tono); border-color: color-mix(in srgb, var(--tono) 70%, black); } /* ── los puntos ──────────────────────────────────────────────────────────── */ .tp__puntos { display: flex; gap: var(--space-2); justify-content: center; } /* Son `input[type=radio]` de verdad —el navegador regala las flechas y el foco—, así que lo primero es quitarles el dibujo del sistema y pintar el nuestro encima. */ .tp__punto { width: 9px; height: 9px; padding: 0; margin: 0; appearance: none; cursor: pointer; background: var(--da-paper-2); border: var(--border-width) solid var(--border); border-radius: var(--radius-pill); transition: width 0.3s var(--ease-bounce), background 0.3s var(--ease); } .tp__punto:checked { width: 26px; background: var(--tono); border-color: color-mix(in srgb, var(--tono) 70%, black); } .tp__punto:focus-visible { outline: var(--border-width-strong) solid var(--tono); outline-offset: 3px; } /* Sin botón propio, el «completo» tiene que decirse de todas formas: si no, la única señal de que ahí no cabes sería el cartelito de la esquina del dibujo. */ .tp__aviso { padding: var(--space-3); margin: 0; font-size: var(--text-sm); color: var(--da-gray-ink); text-align: center; background: var(--da-paper-2); border-radius: var(--radius-sm); } /* ── el cajón del caso de uso ────────────────────────────────────────────── */ .tp__cajon { padding: var(--space-4); background: var(--da-paper-soft); border: var(--border-width) solid var(--border-soft); border-radius: var(--radius-md); } /* ── movimiento ──────────────────────────────────────────────────────────── */ @keyframes tp-cartel { from { opacity: 0; transform: rotate(-14deg) scale(1.5); } to { opacity: 1; } } @keyframes tp-placa { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(1.05); } to { opacity: 1; transform: none; } } @keyframes tp-invita { 0%, 82%, 100% { transform: translateY(-50%) scale(1); } 88% { transform: translateY(-50%) scale(1.1); } 94% { transform: translateY(-50%) scale(0.97); } } @keyframes tp-rayos { 0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.4) rotate(0deg); } 30% { opacity: 0.55; } 100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.15) rotate(22deg); } } @keyframes tp-lineas { 0% { opacity: 0.65; transform: translate3d(14%, 0, 0); } 100% { opacity: 0; transform: translate3d(-10%, 0, 0); } } @keyframes tp-sello { 0% { opacity: 0; transform: scale(2.4) rotate(-8deg); } 35% { opacity: 1; transform: scale(0.94) rotate(-4deg); } 55% { transform: scale(1.04) rotate(-4deg); } 100% { opacity: 0; transform: scale(1) rotate(-4deg); } } /* Quien pide menos movimiento elige igual: se queda el cambio de color y el sello —que es información, no adorno: dice que te has subido—, sin barridos ni rebotes. */ @media (prefers-reduced-motion: reduce) { .tp__lineas, .tp__flecha, .tp__placa, .tp__reco, .tp__completo, .tp[data-en-marcha] .tp__rayos, .tp[data-en-marcha] .tp__sello { animation: none; } .tp[data-en-marcha] .tp__sello { opacity: 1; transform: none; } .tp__flecha, .tp__punto, .tp__placa, .tp { transition: none; } } /* ExperienceCard — port fiel de `components/cards/ExperienceCard.jsx` del Design System. Tarjeta de aventura estilo foto analógica: el frente es una polaroid, el reverso cuenta lo que tu rol te deja ver. El ancho es una variable para poder ampliarla al compartir; el DS la fija en 166px y ese sigue siendo el valor por defecto. */ .da-exp-wrap { --da-exp-h: 223px; --da-exp-w: 166px; flex-shrink: 0; width: var(--da-exp-w); min-height: var(--da-exp-h); cursor: pointer; user-select: none; perspective: 900px; } .da-exp-wrap--estatica { cursor: default; } .da-exp-flipper { position: relative; width: 100%; height: 100%; min-height: var(--da-exp-h); transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .da-exp-wrap.is-flipped .da-exp-flipper { transform: rotateY(180deg); } /* ── caras ── */ .da-exp-face { position: absolute; inset: 0; box-sizing: border-box; overflow: hidden; border-radius: 5px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.11), 0 1px 3px rgba(0, 0, 0, 0.07); backface-visibility: hidden; } /* ── FRENTE — polaroid ── */ .da-exp-front { display: flex; flex-direction: column; padding: 7px 7px 0; background: #fff; } .da-exp-front--premium { padding: 7px; background: var(--da-ink-warm, #322b28); } .da-exp-front--past { padding: 7px 7px 0; background: linear-gradient(0deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), #e5e7eb; } .da-exp-front--upcoming { padding: 7px 7px 0; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(0, 0, 0, 0.08); } /* borde de rol — outline en el wrapper para que no lo recorte el overflow */ .da-exp-wrap--member { outline: 2.5px solid var(--da-member, #dc00d3); border-radius: 6px; } .da-exp-wrap--grumete { outline: 2.5px solid var(--da-grumete, #fed01a); border-radius: 6px; } .da-exp-wrap--partner { outline: 2.5px solid var(--da-partner, #23cf9d); border-radius: 6px; } /* foto — el blanco de alrededor hace de marco */ .da-exp-photo { position: relative; flex-shrink: 0; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--da-paper-2, #ececec); } .da-exp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .da-exp-photo--blank { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.22); } .da-exp-info { display: flex; flex-direction: column; gap: 4px; padding: 7px 2px 9px; } .da-exp-title { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; font-family: var(--font-adventure, 'Rubik', sans-serif); font-size: 14px; font-weight: 700; /* El DS trae 1.05 y con eso la caja recorta la tilde: "PEÑALARA" se leía "PENALARA". 1.18 es lo mínimo que deja pasar la Ñ y los acentos en mayúscula. En castellano no es un detalle. **Reportar al Design System**, que lo tiene igual. */ line-height: 1.18; color: var(--da-ink, #252525); text-transform: uppercase; letter-spacing: -0.01em; } .da-exp-front--premium .da-exp-title { padding: 2px 0 6px; color: #fff; } .da-exp-front--past .da-exp-title { opacity: 0.55; } .da-exp-meta { display: flex; gap: 6px; align-items: flex-end; justify-content: space-between; } .da-exp-dates { display: flex; flex-direction: column; gap: 1px; } .da-exp-date, .da-exp-time { font-family: var(--font-body, 'Roboto', sans-serif); font-size: 10px; font-weight: 400; line-height: 1.3; color: var(--da-ink, #252525); white-space: nowrap; } .da-exp-front--premium .da-exp-date, .da-exp-front--premium .da-exp-time { color: rgba(255, 255, 255, 0.65); } .da-exp-front--past .da-exp-date, .da-exp-front--past .da-exp-time { opacity: 0.5; } .da-exp-season { display: flex; flex-shrink: 0; gap: 3px; align-items: center; } .da-exp-leaf { display: flex; align-items: center; color: var(--da-gray-ink, #666666); } .da-exp-year { font-family: var(--font-body, 'Roboto', sans-serif); font-size: 13px; font-weight: 400; line-height: 1; color: var(--da-gray-ink, #666666); } .da-exp-front--premium .da-exp-year { color: rgba(255, 255, 255, 0.55); } /* ── REVERSO ── */ .da-exp-back { display: flex; flex-direction: column; gap: 7px; padding: 12px 11px 11px; background: #fff; transform: rotateY(180deg); } .da-exp-back__head { display: flex; gap: 6px; align-items: flex-start; justify-content: space-between; } .da-exp-back__title { flex: 1; font-family: var(--font-adventure, 'Rubik', sans-serif); font-size: 11px; font-weight: 700; line-height: 1.1; color: var(--da-ink, #252525); text-transform: uppercase; letter-spacing: -0.01em; } .da-exp-back__close { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; font-size: 10px; line-height: 1; color: var(--da-gray-ink, #666666); cursor: pointer; background: var(--da-paper-2, #ececec); border: none; border-radius: 50%; } .da-exp-back__location { display: flex; gap: 3px; align-items: center; font-size: 10px; font-weight: 700; color: var(--da-ink, #252525); } .da-exp-back__desc { display: -webkit-box; flex: 1; -webkit-box-orient: vertical; margin: 0; overflow: hidden; -webkit-line-clamp: 5; font-size: 10.5px; line-height: 1.55; color: var(--da-gray-ink, #666666); } .da-exp-back__locked { display: flex; flex: 1; flex-direction: column; gap: 10px; align-items: center; justify-content: center; text-align: center; } .da-exp-back__locked-msg { font-size: 10.5px; line-height: 1.55; color: var(--da-gray-ink, #666666); } .da-exp-back__cta { display: inline-flex; align-items: center; align-self: flex-start; justify-content: center; padding: 6px 14px; font-family: var(--font-body, 'Roboto', sans-serif); font-size: 11px; font-weight: 700; color: var(--da-accent-ink, #2e3300); letter-spacing: 0.02em; white-space: nowrap; text-decoration: none; cursor: pointer; background: var(--da-accent, #b9c91c); border: none; border-radius: var(--radius); box-shadow: 0 3px 0 var(--da-accent-shadow, rgba(140, 155, 0, 0.28)); transition: transform 0.1s, box-shadow 0.1s; } .da-exp-back__cta:active { box-shadow: 0 1px 0 var(--da-accent-shadow, rgba(140, 155, 0, 0.28)); transform: translateY(2px); } @media (prefers-reduced-motion: reduce) { .da-exp-flipper { transition: none; } } /* ══════════════════════════════════════════════════════════════════════════ * LA POLAROID CON VIDA (28/09/2026) — la fototeca, el ADN y las ganas de darle la vuelta. * * El color del ADN llega en `--adn` (la cinta y el cristal de la foto) y `--adn-tinta` (el mismo * tono, legible sobre blanco: con él se escribe a mano). La inclinación hacia el cursor llega en * `--inclina-x`/`--inclina-y` y el brillo en `--brillo-x`/`--brillo-y`, que pone el componente. * ══════════════════════════════════════════════════════════════════════════ */ .da-exp-wrap { position: relative; transform: perspective(800px) rotateX(var(--inclina-x, 0deg)) rotateY(var(--inclina-y, 0deg)); transition: transform 0.25s var(--ease), translate 0.35s var(--ease-bounce); } /* Con el cursor encima se levanta de la mesa: se ve que se puede coger. */ .da-exp-wrap:not(.da-exp-wrap--estatica):not(.is-flipped):hover { translate: 0 -4px; } .da-exp-wrap:not(.da-exp-wrap--estatica):hover .da-exp-face { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16), 0 3px 8px rgba(0, 0, 0, 0.08); } /* ── el volteo: gira con un punto de rebote y da un saltito, como una foto que se echa a la mesa ── */ .da-exp-flipper { transition: transform 0.7s cubic-bezier(0.34, 1.3, 0.64, 1); } .da-exp-wrap--tocada .da-exp-flipper { animation: da-exp-salto-a 0.7s var(--ease); } .da-exp-wrap--tocada.is-flipped .da-exp-flipper { animation: da-exp-salto-b 0.7s var(--ease); } /* Dos nombres para la misma curva: cambiar de nombre es lo que hace que se repita al volver. */ @keyframes da-exp-salto-a { 45% { translate: 0 -12px; scale: 1.05; } } @keyframes da-exp-salto-b { 45% { translate: 0 -12px; scale: 1.05; } } /* La primera de una tira se menea una vez al aparecer: «a mí se me puede dar la vuelta». */ .da-exp-wrap--invita:not(.da-exp-wrap--tocada) .da-exp-flipper { animation: da-exp-invita 1.4s var(--ease) 1.4s 1 both; } @keyframes da-exp-invita { 18% { rotate: y 22deg; } 40% { rotate: y -9deg; } 62% { rotate: y 4deg; } 80%, 100% { rotate: y 0deg; } } /* ── la foto, como esfera de recuerdo: velada tras un cristal del color del ADN hasta que se toca ── */ /* El cristal se funde con `mix-blend-mode`, y una fusión sin su propio grupo sube hasta el flipper y le aplana el 3D: el reverso salía en espejo. Aislada aquí, la fusión se queda dentro de la foto. */ .da-exp-photo[data-recuerdo] { isolation: isolate; } .da-exp-photo[data-recuerdo] img { filter: saturate(0.72) contrast(0.94) brightness(1.04) blur(0.5px); transform: scale(1.04); transition: filter 0.6s var(--ease), transform 1.6s var(--ease); } /* El tinte del cristal: el color del ADN, fundido en luz suave. */ .da-exp-photo__cristal { position: absolute; inset: 0; pointer-events: none; background: radial-gradient( circle at 50% 62%, color-mix(in srgb, var(--adn, #ffffff) 70%, white) 0%, color-mix(in srgb, var(--adn, #ffffff) 45%, transparent) 55%, transparent 100% ); mix-blend-mode: soft-light; opacity: 0.75; transition: opacity 0.6s var(--ease); } /* El destello: la elipse de luz de la esfera, que sigue al cursor. */ .da-exp-photo[data-recuerdo]::after { position: absolute; inset: 0; pointer-events: none; content: ''; background: radial-gradient( ellipse 46% 32% at var(--brillo-x, 28%) var(--brillo-y, 18%), rgba(255, 255, 255, 0.5), transparent 70% ); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); transition: opacity 0.6s var(--ease); } /* Se enfoca: con el cursor, con el teclado, con el dedo o cuando la tira la deja en el centro. */ .da-exp-wrap:hover .da-exp-photo[data-recuerdo] img, .da-exp-wrap:focus-visible .da-exp-photo[data-recuerdo] img, .da-exp-wrap:active .da-exp-photo[data-recuerdo] img, .da-exp-wrap[data-enfocada] .da-exp-photo[data-recuerdo] img { filter: none; transform: scale(1.08); } .da-exp-wrap:hover .da-exp-photo__cristal, .da-exp-wrap:focus-visible .da-exp-photo__cristal, .da-exp-wrap:active .da-exp-photo__cristal, .da-exp-wrap[data-enfocada] .da-exp-photo__cristal { opacity: 0; } .da-exp-wrap[data-enfocada]:not(:hover) .da-exp-photo[data-recuerdo]::after { opacity: 0.35; } /* ── la firma, escrita a mano en el borde blanco: quién lo organiza o dónde nace ── */ .da-exp-rotulador { max-width: 100%; margin: 1px 0 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-hand, 'Gochi Hand', cursive); font-size: 14px; line-height: 1.1; color: var(--adn-tinta, var(--da-gray-ink, #666666)); white-space: nowrap; transform: rotate(-1.5deg); transform-origin: left; } /* ── la esquina doblada: dice que hay otra cara ── */ .da-exp-esquina { position: absolute; right: 0; bottom: 0; z-index: 1; display: grid; place-items: start; width: 0; height: 0; pointer-events: none; background: linear-gradient(315deg, transparent 50%, #efe9dc 50%, #fbf8f1 78%); border-top-left-radius: 3px; filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.14)); transition: width 0.4s var(--ease-bounce), height 0.4s var(--ease-bounce); } .da-exp-esquina__giro { margin: 1px 0 0 3px; font-size: 10px; line-height: 1; color: var(--adn-tinta, var(--da-gray-ink, #666666)); opacity: 0; transition: opacity 0.2s var(--ease); } .da-exp-wrap:hover .da-exp-esquina, .da-exp-wrap:focus-visible .da-exp-esquina { width: 30px; height: 30px; } .da-exp-wrap:hover .da-exp-esquina__giro, .da-exp-wrap:focus-visible .da-exp-esquina__giro { opacity: 1; } /* Con el dedo no hay «encima»: la esquina se queda un poco levantada siempre. */ @media (hover: none) { .da-exp-esquina { width: 16px; height: 16px; } } /* ── la cinta: pega la polaroid al tablón. Asoma 9 px por arriba, que la tira ya deja de aire. ── */ .da-exp-cinta { position: absolute; top: -9px; left: 50%; z-index: 3; width: 70px; height: 20px; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--adn) 62%, transparent); border: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14); /* los bordes rasgados de la cinta de carrocero */ clip-path: polygon( 0 8%, 4% 0, 9% 10%, 14% 2%, 20% 6%, 80% 4%, 86% 0, 91% 9%, 96% 1%, 100% 6%, 100% 94%, 95% 100%, 90% 92%, 85% 100%, 80% 95%, 20% 97%, 14% 100%, 9% 91%, 4% 100%, 0 93% ); transform: translateX(-50%) rotate(-4deg); transition: transform var(--dur) var(--ease-bounce), opacity var(--dur) var(--ease); } .da-exp-cinta:hover { transform: translateX(-50%) rotate(-1deg) scale(1.08); } .da-exp-cinta:focus-visible { outline: 2px solid var(--adn-tinta); outline-offset: 2px; } .da-exp-wrap.is-flipped .da-exp-cinta { pointer-events: none; opacity: 0; } /* ── el reverso, en pestañas: como «Recordar», en pequeño ── */ .da-exp-pestanas { display: flex; flex-shrink: 0; margin: -3px -3px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.07); } .da-exp-pestana { flex: 1; padding: 5px 2px 6px; font-family: var(--font-body, 'Roboto', sans-serif); font-size: 8.5px; font-weight: 700; line-height: 1; color: var(--da-gray, #9d9d9d); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; cursor: pointer; background: none; border: 0; border-bottom: 2px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .da-exp-pestana small { margin-left: 3px; font-size: 8px; font-weight: 500; opacity: 0.75; } .da-exp-pestana[aria-selected='true'] { color: var(--da-ink, #252525); border-bottom-color: var(--adn-tinta, var(--da-ink, #252525)); } .da-exp-panel { display: flex; flex: 1; flex-direction: column; gap: 6px; min-height: 0; animation: da-exp-panel-entra 0.3s var(--ease) both; } @keyframes da-exp-panel-entra { from { opacity: 0; transform: translateY(4px); } } /* «El plan»: quién y dónde nace, primero */ .da-exp-back__quien, .da-exp-back__nace { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 10.5px; line-height: 1.25; color: var(--da-gray-ink, #666666); } .da-exp-back__nombre { font-weight: 700; color: var(--da-ink, #252525); } a.da-exp-back__nombre { text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--adn-tinta, currentColor); text-underline-offset: 2px; } .da-exp-back__inicial { display: grid; flex-shrink: 0; place-items: center; width: 18px; height: 18px; font-family: var(--font-adventure, 'Rubik', sans-serif); font-size: 9px; font-weight: 700; color: #fff; background: var(--adn-tinta, var(--da-ink, #252525)); border-radius: 50%; } .da-exp-panel--plan .da-exp-back__desc { -webkit-line-clamp: 3; } /* «Las fotos»: la rejilla de «Recordar», y cada una se abre en grande */ .da-exp-back__album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .da-exp-back__mini { aspect-ratio: 1; padding: 0; overflow: hidden; cursor: zoom-in; background: var(--surface-sunken, #f3f0ea); border: 0; border-radius: 2px; } .da-exp-back__mini img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); } .da-exp-back__mini:hover img, .da-exp-back__mini:focus-visible img { transform: scale(1.1); } /* El pie, escrito a mano detrás de las fotos: «Así fue en 2024». */ .da-exp-back__vivido-t { margin: 1px 0 0; font-family: var(--font-hand, 'Gochi Hand', cursive); font-size: 13px; line-height: 1.2; color: var(--adn-tinta, var(--da-gray-ink, #666666)); } .da-exp-back__vivido-t span { font-family: var(--font-body, 'Roboto', sans-serif); font-size: 8.5px; color: var(--da-gray, #9d9d9d); } /* «Su ADN»: de qué está hecho su color, y Tuad en su pizarra */ .da-exp-back__adn { margin: 0; font-size: 10px; line-height: 1.3; color: var(--da-gray-ink, #666666); } .da-exp-back__adn b { color: var(--da-ink, #252525); } .da-exp-back__adn .gema { margin-right: 4px; vertical-align: -3px; } .da-exp-adn__pizarra { padding: 5px 8px 4px; font-family: var(--font-hand, 'Gochi Hand', cursive); font-size: 13px; line-height: 1.22; color: #f4f1e8; background: #2f4a3a; border: 4px solid #8a5a33; border-radius: 4px; box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35); } .da-exp-adn__linea { display: flex; gap: 5px; align-items: center; margin: 0; white-space: nowrap; } .da-exp-adn__linea small { margin-left: auto; font-size: 10px; opacity: 0.7; } .da-exp-adn__signo { width: 9px; text-align: center; opacity: 0.8; } .da-exp-adn__punto { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6); } .da-exp-adn__igual { padding-top: 2px; margin-top: 2px; border-top: 1.5px dashed rgba(255, 255, 255, 0.45); } .da-exp-adn__resultado { position: relative; width: 15px; height: 15px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 12px 2px color-mix(in srgb, var(--adn) 70%, transparent); animation: da-exp-adn-late 1.6s var(--ease) infinite; } /* el brilli brilli: tres destellos que giran alrededor del color que sale */ .da-exp-adn__chispa { position: absolute; font-family: var(--font-body, sans-serif); font-size: 9px; font-style: normal; color: #fff6c9; animation: da-exp-adn-chispa 1.4s var(--ease) infinite; } .da-exp-adn__chispa:nth-child(1) { top: -9px; left: 13px; } .da-exp-adn__chispa:nth-child(2) { top: 9px; left: 17px; animation-delay: 0.45s; } .da-exp-adn__chispa:nth-child(3) { top: -4px; left: -9px; animation-delay: 0.9s; } .da-exp-adn__porque { margin: 0; font-size: 9px; font-style: italic; line-height: 1.3; color: var(--da-gray-ink, #666666); } .da-exp-adn__abajo { display: flex; gap: 2px; align-items: flex-end; margin: auto -11px -11px; } /* Tuad con el sombrero seleccionador, asomando por la esquina: el borde de la polaroid le corta la mochila y la llave */ .da-exp-adn__tuad { flex-shrink: 0; width: 76px; height: auto; margin: 0 -2px -18px 2px; animation: da-exp-tuad-asoma 0.55s var(--ease-bounce) 0.1s both; } .da-exp-adn__texto { display: flex; flex-direction: column; gap: 4px; padding: 0 11px 11px 0; } .da-exp-adn__dice { position: relative; padding: 5px 7px; margin: 0; font-size: 10px; font-weight: 700; line-height: 1.25; color: var(--da-ink, #252525); background: var(--surface-sunken, #f3f0ea); border-radius: 9px 9px 9px 2px; animation: da-exp-panel-entra 0.3s var(--ease) 0.35s both; } /* el pico del bocadillo, hacia Tuad */ .da-exp-adn__dice::before { position: absolute; bottom: 4px; left: -5px; content: ''; border-top: 5px solid transparent; border-right: 6px solid var(--surface-sunken, #f3f0ea); border-bottom: 3px solid transparent; } .da-exp-adn__mas { font-size: 10px; font-weight: 700; line-height: 1.25; color: var(--adn-tinta); } @keyframes da-exp-tuad-asoma { from { opacity: 0; transform: translate(-18px, 18px) rotate(-8deg); } } @keyframes da-exp-adn-late { 50% { transform: scale(1.12); } } @keyframes da-exp-adn-chispa { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } } @media (prefers-reduced-motion: reduce) { .da-exp-wrap { transform: none; transition: none; } .da-exp-wrap--tocada .da-exp-flipper, .da-exp-wrap--tocada.is-flipped .da-exp-flipper, .da-exp-wrap--invita .da-exp-flipper, .da-exp-panel, .da-exp-adn__tuad, .da-exp-adn__dice, .da-exp-adn__resultado, .da-exp-adn__chispa { animation: none; } .da-exp-photo[data-recuerdo] img, .da-exp-photo__cristal, .da-exp-esquina { transition: none; } .da-exp-adn__chispa { opacity: 0.8; } } /* EL SELLO DE UN ROL — envoltorio de tamaño sobre el sello festoneado del DS. * El color vive en el sello; el nombre, siempre en tinta (regla A-3). */ .selloRol { display: inline-flex; gap: var(--space-2); align-items: center; vertical-align: middle; } /* El sello del DS se escala por su propia variable. */ .selloRol[data-tamano='sm'] .da-sello { --sello-size: 16px; } .selloRol[data-tamano='md'] .da-sello { --sello-size: 22px; } .selloRol[data-tamano='lg'] .da-sello { --sello-size: 38px; } /* El sello del colaborador viene del kit en PNG (festoneado teal con corona): ocupa la * misma caja que el sello vectorial de los demás roles. */ .selloRol__kit { object-fit: contain; } .selloRol[data-tamano='sm'] .selloRol__kit { width: 16px; height: 16px; } .selloRol[data-tamano='md'] .selloRol__kit { width: 22px; height: 22px; } .selloRol[data-tamano='lg'] .selloRol__kit { width: 38px; height: 38px; } .selloRol__nombre { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--text-primary); text-transform: uppercase; letter-spacing: var(--tracking-label); } /* Los iconos de lucide (donde el kit aún no tiene pieza) se dimensionan con el sello. */ .selloRol .da-sello__icon svg { width: calc(var(--sello-size) * 0.52); height: calc(var(--sello-size) * 0.52); } /* EL ARO DEL AVATAR — dos circunferencias, y los colores salen de los tokens. * La geometría vive en `aro.ts` y NO se escribe a mano aquí: si el dibujo cambia, * cambia allí y esto se entera solo. */ .aro { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; } /* El de fuera: el color de la parada de la senda. El invitado usa el del pendiente — * la llave no es una parada, y no tiene aro propio en el kit. */ .aro__rol { stroke: var(--da-pendiente); } .aro[data-rol='grumete'] .aro__rol { stroke: var(--da-grumete); } .aro[data-rol='miembro'] .aro__rol { stroke: var(--da-member); } .aro[data-rol='colaborador'] .aro__rol { stroke: var(--da-partner); } /* El de dentro: el lima de la casa, igual en los cuatro. Es lo que dice que esto es * ∂iario aventureros y no cualquier otra app con aros de colores. */ .aro__marca { stroke: var(--da-accent); } /* ShareExperience — la story card de marca. Recreada contra las miniaturas RRSS (Canva 280-281). La portada es la ExperienceCard del Design System: la polaroid real, caída sobre el papel. */ .se { max-width: 340px; margin: 0 auto; font-family: var(--font-body); } /* ── Las composiciones ────────────────────────────────────────────────────────── Cada papel fija SEIS variables, no una: el color de la tinta sobre el papel, el panel, el antetítulo y el titular. Así la elección es una composición entera y no un fondo suelto, que es lo que hacía que quedaran cosas ilegibles. Las tintas son las nueve del kit (`kit_brand_colors_svg`): lima #b9c91c · agua #23cf9d · magenta #dc00d3 · amarillo #fed01a · metal #e5e7eb · blanco #f1f1f1 · tinta #252525 · marrón #9e7a65 · marrón brillante #a08d62. ─────────────────────────────────────────────────────────────────────────────── */ .se-card { --se-fg: #fff; --se-fg-soft: rgba(255, 255, 255, 0.82); --se-fg-veil: rgba(255, 255, 255, 0.26); --se-panel: var(--da-paper-soft); --se-sube: #333; --se-plan: var(--da-accent); position: relative; padding: 16px 14px 18px; overflow: hidden; font-family: var(--font-adventure); color: var(--se-fg); background: #8b8b8b; border-radius: 14px; animation: se-entra 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; } /* PISTACHO · pastel de lima detrás, agua pura delante. Análogos: vibra sin pelearse. */ .se-card[data-fondo='pistacho'] { --se-fg: #3d4408; --se-fg-soft: rgba(61, 68, 8, 0.72); --se-fg-veil: rgba(61, 68, 8, 0.13); --se-panel: #fff; --se-sube: var(--da-ink); --se-plan: var(--da-partner); background: #e9efc0; } /* CHICLE · pastel de magenta y magenta puro. Un solo tono a dos claridades: lo más elegante que se puede hacer con un color tan gritón. */ .se-card[data-fondo='chicle'] { --se-fg: #5c0059; --se-fg-soft: rgba(92, 0, 89, 0.7); --se-fg-veil: rgba(92, 0, 89, 0.12); --se-panel: #fff; --se-sube: var(--da-ink); --se-plan: var(--da-member); background: #f6d3f4; } /* MOSTAZA · el amarillo del kit sin apastelar, con tinta encima. Máximo contraste de valor: es la pareja que más lejos se ve en un scroll. */ .se-card[data-fondo='mostaza'] { --se-fg: var(--da-ink); --se-fg-soft: rgba(37, 37, 37, 0.68); --se-fg-veil: rgba(37, 37, 37, 0.12); --se-panel: #fff; --se-sube: #8a6a00; --se-plan: var(--da-ink); background: var(--da-grumete); } /* MENTA · pastel de agua con magenta puro delante. Complementarios de verdad, pero uno apagado: el choque está, el ruido no. */ .se-card[data-fondo='menta'] { --se-fg: #0b5341; --se-fg-soft: rgba(11, 83, 65, 0.72); --se-fg-veil: rgba(11, 83, 65, 0.12); --se-panel: #fff; --se-sube: var(--da-ink); --se-plan: var(--da-member); background: #c6f0e2; } /* CARBÓN · la tinta del kit con la lima encima. Es la firma de la marca. */ .se-card[data-fondo='carbon'] { --se-panel: var(--da-paper-soft); --se-sube: var(--da-ink); --se-plan: var(--da-accent); background: var(--da-ink); } /* METAL · el gris frío del kit. El titular en tinta y el color se va al antetítulo: sobrio, para cuando la foto ya grita bastante. */ .se-card[data-fondo='metal'] { --se-fg: var(--da-ink); --se-fg-soft: rgba(37, 37, 37, 0.66); --se-fg-veil: rgba(37, 37, 37, 0.1); --se-panel: #fff; --se-sube: var(--da-member); --se-plan: var(--da-ink); background: var(--da-gray-line); } /* CARTEL DE MONTAÑA · el estilo que ya existe en el Tablón (`Tablon.css` § el tablón de madera): vetas de madera, la cara del cartel en degradado, borde de tinta quemada y dos chinchetas. Los marrones nuevos del kit (#9e7a65 y #a08d62) son los que faltaban para que la madera no fuera solo naranja. Tipografía de cartel, no de tarjeta. */ .se-card[data-fondo='cartel'] { --se-fg: #f6ecdf; --se-fg-soft: rgba(246, 236, 223, 0.78); --se-fg-veil: rgba(246, 236, 223, 0.2); --se-panel: linear-gradient(180deg, var(--da-sign-1), var(--da-sign-2)); --se-sube: var(--da-ink-warm); --se-plan: var(--da-ink-warm); font-family: var(--font-poster); background: repeating-linear-gradient(90deg, rgba(47, 36, 24, 0.05) 0 2px, transparent 2px 7px), linear-gradient(160deg, #a08d62 0%, #9e7a65 46%, var(--da-wood-2) 100%); } .se-white { position: relative; padding: 16px 15px 18px; background: var(--se-panel); border-radius: 9px; } .se-sube { font-size: 29px; font-weight: 900; line-height: 0.98; color: var(--se-sube); text-transform: uppercase; letter-spacing: -0.01em; } .se-plan { font-size: 37px; font-weight: 900; line-height: 0.94; color: var(--se-plan); text-transform: uppercase; letter-spacing: -0.015em; overflow-wrap: anywhere; } .se-card[data-fondo='cartel'] .se-white { border: 3px solid var(--da-ink-warm); box-shadow: 0 6px 0 rgba(47, 36, 24, 0.45); } /* Las dos chinchetas que lo clavan al tablón. */ .se-card[data-fondo='cartel'] .se-white::before, .se-card[data-fondo='cartel'] .se-white::after { position: absolute; top: 9px; width: 12px; height: 12px; content: ''; background: radial-gradient(circle at 35% 30%, var(--da-pin-1), var(--da-pin-2)); border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .se-card[data-fondo='cartel'] .se-white::before { left: 14px; } .se-card[data-fondo='cartel'] .se-white::after { right: 14px; } /* En un cartel el titular va grabado, no impreso: se apoya en un relieve claro. */ .se-card[data-fondo='cartel'] .se-plan { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); } .se-card[data-fondo='cartel'] .se-sube, .se-card[data-fondo='cartel'] .se-plan { padding-left: 18px; } /* ── El escenario: la polaroid, el chip, la pegatina y la etiqueta de rol ── */ .se-shot { position: relative; display: flex; justify-content: center; padding: 26px 0 22px; } .se-polaroid { --se-giro: 0deg; position: relative; transform: rotate(var(--se-giro)); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .se-polaroid .da-exp-wrap { --da-exp-h: 258px; --da-exp-w: 194px; } .se-polaroid:hover { transform: rotate(0deg) translateY(-4px) scale(1.02); } /* El brillo que barre la foto — lo que hace que parezca papel de verdad y no un div. */ .se-brillo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 5px; } .se-brillo::after { position: absolute; inset: -40% -60%; content: ''; background: linear-gradient(72deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%); animation: se-brilla 5.5s ease-in-out infinite; } .se-sticker { position: absolute; right: 4px; bottom: 8px; z-index: 3; width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.28)); transform: rotate(11deg); animation: se-late 4.5s ease-in-out infinite; } .se-role { position: absolute; right: 0; bottom: -4px; z-index: 3; padding: 4px 9px; font-family: var(--font-body); font-size: 10.5px; font-weight: 500; color: var(--da-gray); background: #fff; border-radius: var(--radius-pill); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .se-role span { font-weight: 800; } /* ── El chip de invitación: cuelga de la polaroid y se sale por la izquierda ── */ .se-invite { position: absolute; top: 6px; left: -29px; z-index: 4; display: flex; gap: 9px; align-items: center; width: max-content; max-width: calc(100% + 40px); padding: 6px 12px 6px 7px; background: #fff; border: 2px solid var(--da-accent-deep); border-radius: 9px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); transform: rotate(-3.2deg); animation: se-bambolea 6s ease-in-out infinite; } .se-invite__adn { position: relative; display: grid; flex-shrink: 0; place-items: center; width: 34px; height: 34px; } .se-invite__aro { position: absolute; inset: 0; width: 100%; height: 100%; } .se-invite__adn-txt { font-size: 16px; line-height: 1; } .se-invite__txt { display: flex; flex-direction: column; font-family: var(--font-body); line-height: 1.25; } .se-invite__title { font-size: 11.5px; font-weight: 700; color: var(--da-ink); } .se-invite__sub { font-size: 10px; color: var(--da-gray); } /* ── ¿Quién se anima? ── */ .se-cta { margin-top: 20px; text-align: center; } .se-cta__q { font-size: 25px; font-weight: 800; letter-spacing: -0.01em; } .se-cta__people { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; justify-content: center; margin-top: 10px; font-size: 17px; } .se-cta__quien { font-weight: 500; color: var(--se-fg-soft); } .se-sello { width: 22px; height: 22px; object-fit: contain; } /* ── La gente: cada foto dentro de su aro de rol ── */ .se-avatars { display: flex; align-items: center; } .se-av { position: relative; display: block; flex-shrink: 0; width: 36px; height: 36px; margin-left: -7px; } .se-av:first-child { margin-left: 0; } /* Sin foto, las iniciales: una silueta gris no dice quién es. */ .se-av__iniciales { display: grid; place-items: center; font-size: 13px; font-weight: var(--fw-bold); color: var(--text-on-dark); background: var(--da-gray); } /* El hueco es el MISMO número que el del avatar (`shared/brand/aro.ts`, medido sobre el * asset del kit). Antes aquí ponía `inset: 4px` sobre 36 px, o sea un 77,8 % contra el * 83,875 % de verdad: dos píxeles de aire entre la foto y el aro, en la pieza que se * comparte por ahí fuera. Un número a mano por pantalla es justo lo que hacía que esto * no se cerrara nunca. */ .se-av__foto { position: absolute; inset: calc((100% - var(--hueco, 83.875%)) / 2); object-fit: cover; background: var(--da-paper-2); border-radius: 50%; } .se-av__aro { position: absolute; inset: 0; width: 100%; height: 100%; } .se-plus { padding: 3px 9px; margin-left: 5px; font-family: var(--font-body); font-size: 12px; font-weight: 700; background: var(--se-fg-veil); border-radius: var(--radius-pill); } /* ── El aforo del instante ── */ .se-aforo { display: flex; gap: 9px; align-items: center; justify-content: center; margin-top: 12px; font-family: var(--font-body); font-size: 12.5px; color: var(--se-fg-soft); } .se-aforo__barra { position: relative; width: 78px; height: 7px; overflow: hidden; /* La pista tiene que hundirse, no aclararse: si no, no se distingue de lo lleno. */ background: rgba(0, 0, 0, 0.22); border-radius: var(--radius-pill); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.18); } .se-aforo__lleno { position: absolute; inset: 0 auto 0 0; background: var(--se-fg); border-radius: inherit; } .se-aforo[data-apurado='si'] .se-aforo__lleno { background: #ff6a5e; } .se-aforo__txt b { font-weight: 800; color: var(--se-fg); } /* Quedan tres o menos: la cifra se enciende sola, sin escribir "¡corre!". */ .se-aforo[data-apurado='si'] .se-aforo__txt b { padding: 1px 7px; color: #fff; background: #d8342b; border-radius: var(--radius-pill); } /* ── La procedencia: siempre en el mismo sitio, con o sin grupo ── */ .se-proc { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; margin: 12px 0 0; text-align: center; background: var(--se-fg-veil); border: 1px solid transparent; border-radius: 7px; } /* Sin grupo, el borde se rompe: la línea discontinua es el aviso. */ .se-proc[data-sin='si'] { border-color: var(--se-fg-soft); border-style: dashed; } .se-proc__t { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; } .se-proc__s { font-family: var(--font-body); font-size: 11px; color: var(--se-fg-soft); } .se-role[data-privado='si'] { font-weight: 700; color: var(--da-ink); } .se-role[data-privado='si'] span { font-weight: 800; } .se-studio--off { border-style: dashed; } .se-primero { font-family: var(--font-hand); font-size: 17px; color: var(--se-fg-soft); } /* ── La firma ── */ .se-sign { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 16px; } .se-sign__logo { width: 26px; height: 26px; object-fit: contain; border-radius: 50%; } .se-sign__txt { font-size: 16px; font-weight: 700; white-space: nowrap; } .se-sign--gente { gap: 0; justify-content: space-between; padding: 0 2px; } .se-sign--gente .se-sign__txt { margin-right: auto; margin-left: 7px; font-size: 14px; } .se-sign--gente .se-sign__logo { width: 23px; height: 23px; } .se-sign--gente .se-av { width: 30px; height: 30px; margin-left: -6px; } .se-sign--gente .se-av__foto { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); } .se-sign--gente .se-plus { padding: 3px 7px; margin-left: 4px; font-size: 11px; } @keyframes se-entra { from { opacity: 0; transform: translateY(14px) scale(0.985); } } @keyframes se-brilla { 0%, 62% { transform: translateX(-115%); } 86%, 100% { transform: translateX(115%); } } @keyframes se-bambolea { 0%, 100% { transform: rotate(-3.2deg); } 50% { transform: rotate(-1.4deg) translateY(-2px); } } @keyframes se-late { 0%, 100% { transform: rotate(11deg) scale(1); } 50% { transform: rotate(8deg) scale(1.06); } } .se-hand { margin: 12px 0 4px; font-family: var(--font-hand); font-size: 16px; color: var(--text-secondary); text-align: center; } .se-targets { display: flex; gap: 6px; padding: 10px 0 2px; overflow-x: auto; } .se-target { display: flex; flex-direction: column; gap: 6px; align-items: center; min-width: 64px; font-family: var(--font-body); cursor: pointer; background: none; border: none; } .se-target__circle { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; } .se-target__label { font-size: 11px; font-weight: var(--fw-bold); color: var(--text-secondary); text-align: center; } /* ── El estudio: todo lo que se puede tunear antes de compartir ── */ .se-studio { display: flex; flex-direction: column; gap: 12px; padding: 14px; margin-top: 16px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); } .se-studio__head { font-family: var(--font-hand); font-size: 17px; color: var(--da-ink); } .se-field { display: flex; flex-direction: column; gap: 7px; } .se-field__label { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-label); } .se-field__input { width: 100%; padding: 11px 13px; font-family: var(--font-body); font-size: 14px; color: var(--text-primary); outline: none; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); } .se-field__input:focus { border-color: var(--da-ink); } .se-field__input--titular { font-family: var(--font-adventure); font-size: 19px; font-weight: 900; color: var(--da-accent-ink); letter-spacing: -0.01em; } .se-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .se-hint { flex: 1; min-width: 140px; font-size: var(--text-xs); line-height: 1.4; color: var(--text-secondary); } .se-opt { position: relative; display: grid; flex-shrink: 0; place-items: center; width: 52px; height: 52px; overflow: hidden; font-family: var(--font-body); color: var(--text-secondary); cursor: pointer; background: var(--surface-sunken); border: 2px solid var(--border); border-radius: 8px; } .se-opt.is-active { border-color: var(--da-ink); box-shadow: 0 0 0 2px var(--da-ink); } .se-opt--upload { gap: 1px; border-style: dashed; } .se-opt__plus { font-size: 19px; line-height: 1; } .se-opt__cap { font-size: 9px; font-weight: var(--fw-bold); } .se-opt--foto img { width: 100%; height: 100%; object-fit: cover; } .se-opt__x { position: absolute; top: 2px; right: 3px; display: grid; place-items: center; width: 17px; height: 17px; font-size: 9px; color: #fff; background: rgba(0, 0, 0, 0.6); border-radius: 50%; } .se-opt--peg img { width: 34px; height: 34px; object-fit: contain; } .se-opt.is-reservada { cursor: not-allowed; border-style: dashed; } .se-opt.is-reservada img { opacity: 0.32; filter: grayscale(1); } .se-opt__candado { position: absolute; right: 3px; bottom: 2px; font-size: 11px; line-height: 1; } .se-aviso { margin: 2px 0 0; font-size: var(--text-xs); line-height: 1.45; color: var(--text-secondary); } .se-opt__none { font-size: 17px; } .se-opt--giro { font-size: 17px; font-weight: var(--fw-bold); color: var(--da-ink); background: var(--bg); } .se-swatch { display: grid; flex-shrink: 0; place-items: center; width: 46px; height: 46px; overflow: hidden; cursor: pointer; border: 2px solid var(--border); border-radius: 50%; } .se-swatch.is-active { box-shadow: 0 0 0 2px var(--da-ink); transform: scale(1.06); } .se-swatch__aa { font-family: var(--font-adventure); font-size: 15px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; } .se-swatch[data-fondo='piedra'] { background: #8b8b8b; } .se-swatch[data-fondo='piedra'] .se-swatch__aa { color: var(--da-accent); } .se-swatch[data-fondo='pistacho'] { background: #e9efc0; } .se-swatch[data-fondo='pistacho'] .se-swatch__aa { color: var(--da-partner); } .se-swatch[data-fondo='chicle'] { background: #f6d3f4; } .se-swatch[data-fondo='chicle'] .se-swatch__aa { color: var(--da-member); } .se-swatch[data-fondo='mostaza'] { background: var(--da-grumete); } .se-swatch[data-fondo='mostaza'] .se-swatch__aa { color: var(--da-ink); } .se-swatch[data-fondo='menta'] { background: #c6f0e2; } .se-swatch[data-fondo='menta'] .se-swatch__aa { color: var(--da-member); } .se-swatch[data-fondo='carbon'] { background: var(--da-ink); } .se-swatch[data-fondo='carbon'] .se-swatch__aa { color: var(--da-accent); } .se-swatch[data-fondo='metal'] { background: var(--da-gray-line); } .se-swatch[data-fondo='metal'] .se-swatch__aa { color: var(--da-ink); } .se-swatch[data-fondo='cartel'] { background: repeating-linear-gradient(90deg, rgba(47, 36, 24, 0.07) 0 2px, transparent 2px 7px), linear-gradient(160deg, #a08d62, var(--da-wood-2)); } .se-swatch[data-fondo='cartel'] .se-swatch__aa { font-family: var(--font-poster); color: var(--da-sign-1); } /* ── Confeti al copiar ── */ .se-confeti { position: relative; height: 0; pointer-events: none; } .se-confeti__x { position: absolute; top: -8px; left: calc(8% + var(--i) * 7.6%); width: 7px; height: 11px; background: var(--da-accent); border-radius: 1px; animation: se-cae 1.5s ease-in forwards; animation-delay: calc(var(--i) * 35ms); } .se-confeti__x:nth-child(3n) { background: var(--da-member); } .se-confeti__x:nth-child(3n + 1) { background: var(--da-grumete); } @keyframes se-cae { from { opacity: 1; transform: translateY(0) rotate(0deg); } to { opacity: 0; transform: translateY(90px) rotate(320deg); } } @media (prefers-reduced-motion: reduce) { .se-card, .se-brillo::after, .se-invite, .se-sticker, .se-confeti__x { animation: none; } .se-polaroid { transition: none; } } /* ── Enviar a un amigo (mi lista) ── */ .se-friends { padding: 14px; margin-top: 12px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .se-friends__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .se-friends__title { font-size: var(--text-sm); font-weight: var(--fw-bold); } .se-friends__x { width: 26px; height: 26px; font-size: 13px; color: var(--text-secondary); cursor: pointer; background: var(--surface-sunken); border: none; border-radius: 50%; } .se-friends__search { width: 100%; padding: 10px 13px; font-family: var(--font-body); font-size: 14px; color: var(--text-primary); outline: none; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); } .se-friends__search:focus { border-color: var(--da-ink); } .se-friends__list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; margin: 8px 0; overflow-y: auto; } .se-friend { display: flex; gap: 10px; align-items: center; padding: 8px 10px; cursor: pointer; background: none; border: 1.5px solid transparent; border-radius: var(--radius-sm); } .se-friend:hover { background: var(--surface-sunken); } .se-friend.is-active { background: var(--surface-sunken); border-color: var(--da-ink); } .se-friend__av { display: grid; flex-shrink: 0; place-items: center; width: 32px; height: 32px; font-size: 14px; font-weight: var(--fw-bold); color: #fff; background: var(--da-member); border-radius: 50%; } .se-friend__info { display: flex; flex: 1; flex-direction: column; } .se-friend__name { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--text-primary); } .se-friend__handle { font-size: 11.5px; color: var(--text-secondary); } .se-friend__check { font-size: 15px; color: var(--text-secondary); } .se-friend.is-active .se-friend__check { color: var(--da-ink); } .se-friends__send { width: 100%; padding: 12px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-black); color: var(--da-accent-ink); cursor: pointer; background: var(--accent); border: none; border-radius: var(--radius); box-shadow: var(--press-accent); } .se-friends__send:disabled { color: var(--text-secondary); cursor: not-allowed; background: var(--surface-sunken); box-shadow: none; } .se-friends__sent { margin: 0; font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--da-partner); text-align: center; } .se-friends__empty { padding: 14px; font-size: var(--text-sm); color: var(--text-secondary); text-align: center; } /* ── Role-gating → adquisición ── */ .se-gate { margin: 12px 0 0; font-size: var(--text-xs); line-height: 1.4; color: var(--text-secondary); text-align: center; } .se-gate strong { color: var(--da-member); } /* ═══════════════════════════════════════════════════════════════════════════ * DIÁLOGOS — las cuatro formas que tiene el producto de hablarle a alguien. * * Medidas sacadas píxel a píxel de los PNG de Canva que están en * `apps/web/public/dialogos/referencia-*.png`. No son aproximaciones: * * · pastilla 612 × 124 sobre un lienzo de 1280 de ancho, a 68px del suelo * · relleno rgba(34,34,34,.75) — TRANSLÚCIDA, no gris sólido * · radio pastilla entera (999px), comprobado contra la curva del PNG * · arcos trazo claro de 1,6px, 44px de alto, panza de 7px, a 14px del borde * · punto 4px en la panza del arco, en el verde de marca * · texto Roboto Condensed Bold (e Italic), caja de 18px ≈ 26px de cuerpo * · interlínea 27px · tres renglones y la pastilla está llena * · nombre encima, pisando el borde, a 63px de la izquierda de la pastilla * * La mesa de montaje (`docs/design/dialogos.html`) usa exactamente estas mismas * medidas. Si aquí se cambia una, allí también — o el vídeo dejará de parecerse * al producto. * ═══════════════════════════════════════════════════════════════════════════ */ .dialogo { /* Roboto Condensed no está en la familia base de la app: es de estas piezas y de ninguna más. El respaldo es la condensada del sistema, no Roboto normal, porque lo que hace que el bocadillo quepa es la anchura estrecha. */ --dialogo-texto: 'Roboto Condensed', 'Helvetica Neue Condensed', 'Arial Narrow', var(--font-body); --dialogo-pastilla: rgba(34, 34, 34, 0.75); --dialogo-alto: 124px; --dialogo-ancho: 612px; --dialogo-linea: 27px; position: fixed; z-index: 60; pointer-events: none; } /* Metida dentro de una tarjeta o de una pantalla del laboratorio, la pieza deja de ser un HUD de pantalla completa y se ancla al contenedor. */ .dialogo[data-encaje='contenido'] { position: absolute; } /* Lo que sí se pulsa vuelve a recibir el ratón. */ .dialogo button, .dialogo [data-pulsable] { pointer-events: auto; } /* ═══════════════════════════════════════════════════════════════════════════ TIPOS 1 y 2 · LA PASTILLA El 2 es el 1 con una cara dentro: no son dos componentes, son un ajuste. ═══════════════════════════════════════════════════════════════════════════ */ .dialogoBanner { bottom: var(--dialogo-suelo, 68px); left: 50%; width: min(var(--dialogo-ancho), calc(100% - 96px)); transform: translateX(-50%); animation: dialogoBannerEntra var(--dur) var(--ease) both; } @keyframes dialogoBannerEntra { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* * El nombre va en MANUSCRITA, no en palo seco. * * En `referencia-tipo-1.png` ampliado x8 se ve una letra de rotulador, de trazo único * y redondeada —la `{`, la `e` de remate inclinado, la `r` de brazo corto—. Eso es * `--font-hand` (Gochi Hand), que ya estaba en los tokens. Con Roboto Light el rótulo * se volvía un pie de foto; con la manuscrita vuelve a ser lo que era: alguien * apuntando quién habla. * * Medidas del asset: altura de la x ≈ 10 px → cuerpo ≈ 21 px. Empieza a 62 px del * borde de la pastilla y **le pisa el borde de arriba** unos 7 px. */ .dialogoBanner__quien { position: absolute; bottom: calc(100% - 7px); left: 62px; z-index: 3; font-family: var(--font-hand); font-size: 21px; font-weight: var(--fw-regular); line-height: 1.2; color: var(--text-on-dark); -webkit-text-stroke: 3px rgba(37, 37, 37, 0.34); white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Vive medio sobre la pastilla y medio sobre lo que haya detrás —una foto, una grabación de pantalla, lo que sea—. El contorno es lo que lo hace legible en los dos sitios; la sombra sola no bastaba sobre claro. */ paint-order: stroke fill; animation: dialogoAparece var(--dur-fast) ease both 0.1s; } @keyframes dialogoAparece { from { opacity: 0; } to { opacity: 1; } } /* 124px es la ALTURA DE DISEÑO: tres renglones de 27 más aire. Va de `min-height` y no de `height` porque una línea que se parte no puede romper la composición — la pastilla crece y sigue siendo ella. */ .dialogoBanner__pastilla { position: relative; display: flex; align-items: center; min-height: var(--dialogo-alto); padding: 19px 0; background: var(--dialogo-pastilla); border-radius: var(--radius-pill); } .dialogoBanner__arco { position: absolute; top: 50%; width: 12px; height: 44px; transform: translateY(-50%); } .dialogoBanner__arco[data-lado='izq'] { left: 14px; } .dialogoBanner__arco[data-lado='der'] { right: 14px; transform: translateY(-50%) scaleX(-1); } /* El trazo del asset compuesto sobre la pastilla da un blanco al 42 %, no al 32. */ .dialogoBanner__arco path { fill: none; stroke: rgba(255, 255, 255, 0.42); stroke-width: 2; } .dialogoBanner__arco circle { filter: drop-shadow(0 0 3px rgba(185, 201, 28, 0.9)); fill: var(--da-accent); } .dialogoBanner__texto { position: relative; z-index: 2; flex: 1; min-width: 0; /* La sangría izquierda la escribe JS cuando hay cara: cada recorte del reparto tiene su silueta y una cifra fija dejaría a unos apretados y a otros con medio bocadillo vacío. Estos son los valores sin cara. */ padding: 0 58px 0 62px; } .dialogoBanner__linea { font-family: var(--dialogo-texto); font-size: 26px; font-style: italic; font-weight: var(--fw-bold); line-height: var(--dialogo-linea); color: var(--text-on-dark); overflow-wrap: break-word; white-space: pre-wrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } /* La voz pixel: el mockup la ofrece como alternativa a la cursiva, no como añadido. Cuerpo más pequeño porque Press Start 2P tiene la caja llena. */ .dialogoBanner__linea[data-voz='pixel'] { font-family: var(--font-pixel); font-size: 15px; font-style: normal; letter-spacing: var(--tracking-pixel); } .dialogoBanner__linea em, .dialogoNavi__globoTexto em { font-style: inherit; color: var(--da-accent); text-shadow: 0 0 12px rgba(185, 201, 28, 0.45); } .dialogo__cursor { display: inline-block; width: 3px; height: 20px; margin-left: 3px; vertical-align: -3px; background: var(--text-on-dark); animation: dialogoCursor 0.7s step-end infinite; } @keyframes dialogoCursor { 50% { opacity: 0; } } /* La cara del tipo 2: apoyada en el suelo de la pastilla y asomando por arriba. Los recortes del reparto ya vienen cortados a la altura del pecho, así que no hay nada que recortar aquí: solo apoyarlos. */ .dialogoBanner__cara { position: absolute; bottom: 0; left: var(--dialogo-cara-x, 11%); z-index: 1; height: calc(var(--dialogo-alto) * var(--dialogo-cara-escala, 1.08)); pointer-events: none; animation: dialogoCaraEntra var(--dur) var(--ease) both 0.06s; } .dialogoBanner__cara[data-lado='der'] { right: var(--dialogo-cara-x, 11%); left: auto; } .dialogoBanner__cara img { display: block; width: auto; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45)); } @keyframes dialogoCaraEntra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* «Toca para continuar»: a caballo del borde de abajo, como en el asset. */ .dialogoBanner__flecha { position: absolute; /* 9 px por encima del borde y 12 por debajo: así está en el PNG. */ bottom: -12px; left: 50%; z-index: 4; width: 26px; height: 21px; transform: translateX(-50%); animation: dialogoFlecha 1.25s ease-in-out infinite; } @keyframes dialogoFlecha { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(4px); } } /* Toda la pastilla es el botón de continuar. Sin borde ni fondo propios: el objetivo táctil es la pieza entera, que es como se lee. */ .dialogoBanner__seguir { position: absolute; inset: 0; z-index: 5; cursor: pointer; background: none; border: none; border-radius: var(--radius); } .dialogoBanner__seguir:focus-visible { outline: 2px solid var(--da-accent); outline-offset: 3px; } /* ═══════════════════════════════════════════════════════════════════════════ TIPO 3 · NAVI — para cuando hay que mirar a un punto concreto de la pantalla. ═══════════════════════════════════════════════════════════════════════════ */ .dialogoNavi { top: var(--dialogo-navi-y, 44%); left: var(--dialogo-navi-x, 62%); width: var(--dialogo-navi-tam, 150px); transform: translate(-50%, -50%); animation: dialogoNaviEntra var(--dur-slow) var(--ease-bounce) both; } @keyframes dialogoNaviEntra { from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .dialogoNavi__flota { animation: dialogoFlota 2.4s ease-in-out infinite; } @keyframes dialogoFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .dialogoNavi__brillo { position: absolute; top: 52%; left: 50%; width: 58%; aspect-ratio: 1; pointer-events: none; background: radial-gradient(circle, rgba(120, 210, 255, 0.55) 0%, transparent 68%); border-radius: 50%; transform: translate(-50%, -50%); animation: dialogoBrillo 1.8s ease-in-out infinite alternate; } @keyframes dialogoBrillo { from { opacity: 0.35; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.5); } } .dialogoNavi__sprite { position: relative; z-index: 2; display: block; width: 100%; /* Es pixel-art: suavizarlo lo convierte en un borrón. */ image-rendering: pixelated; } /* El bocadillo pixel: borde negro duro, sombra dura y rabo escalonado. Sin blur en ninguna parte — la sombra suave rompería el registro. */ .dialogoNavi__globo { position: absolute; bottom: calc(100% + 16px); left: calc(100% - 26px); z-index: 3; /* `max-content` y no un ancho suelto: dentro de un contenedor de 150px el bocadillo se estrangula y escribe una palabra por renglón. */ width: max-content; min-width: 110px; max-width: 340px; padding: 11px 15px; color: var(--da-ink); background: var(--da-paper); border: var(--border-rpg) solid var(--da-ink); border-radius: 2px; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.18); transform-origin: bottom left; animation: dialogoGlobo var(--dur) var(--ease-bounce) both 0.16s; } .dialogoNavi__globo[data-lado='izq'] { right: calc(100% - 26px); left: auto; transform-origin: bottom right; } @keyframes dialogoGlobo { from { opacity: 0; transform: scale(0.35); } to { opacity: 1; transform: scale(1); } } /* El bocadillo NO crece mientras escribe. * * Debajo del texto que se teclea va un fantasma con la frase entera, invisible * pero ocupando sitio. Con eso el bocadillo nace ya con su ancho definitivo, y * se arreglan dos cosas de un tiro: deja de dar saltos renglón a renglón, y el * cálculo de por qué lado sale (`DialogoNavi`) puede medirlo desde el primer * fotograma en vez de con la caja vacía. */ .dialogoNavi__globoTexto { position: relative; font-family: var(--font-pixel); font-size: 11px; line-height: 1.95; letter-spacing: var(--tracking-pixel); overflow-wrap: break-word; white-space: pre-wrap; } .dialogoNavi__fantasma { visibility: hidden; } .dialogoNavi__escrito { position: absolute; inset: 0; } .dialogoNavi__globoTexto em { color: var(--da-board-ink); text-shadow: none; } /* El rabo, a peldaños, igual que el PNG del kit. Dos capas: los bloques negros del contorno y los blancos que abren el hueco hacia el bocadillo. */ .dialogoNavi__rabo { position: absolute; top: 100%; left: 22px; width: 26px; height: 26px; } .dialogoNavi__globo[data-lado='izq'] .dialogoNavi__rabo { right: 22px; left: auto; transform: scaleX(-1); } .dialogoNavi__rabo b, .dialogoNavi__rabo i { position: absolute; display: block; } .dialogoNavi__rabo b { background: var(--da-ink); } .dialogoNavi__rabo i { background: var(--da-paper); } /* ═══════════════════════════════════════════════════════════════════════════ TIPO 5 · EL RÓTULO No es un bocadillo, es un plano: poquísimas palabras, enormes, sobre lo que haya detrás. El registro de savee y de los tráileres. ═══════════════════════════════════════════════════════════════════════════ */ .dialogoRotulo { inset: 0; display: flex; flex-direction: column; gap: 0.18em; align-items: var(--dialogo-rotulo-horizontal, center); justify-content: var(--dialogo-rotulo-vertical, center); padding: 8% 9%; text-align: var(--dialogo-rotulo-texto, center); } .dialogoRotulo__linea { font-family: var(--dialogo-texto); font-size: var(--dialogo-rotulo-tam, 72px); font-weight: var(--fw-bold); line-height: 0.94; color: var(--text-on-dark); text-transform: uppercase; letter-spacing: -0.02em; overflow-wrap: break-word; white-space: pre-wrap; text-shadow: 0 3px 30px rgba(0, 0, 0, 0.5); animation: dialogoRotulo 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; } .dialogoRotulo__linea em { font-style: normal; color: var(--da-accent); } @keyframes dialogoRotulo { from { opacity: 0; transform: translateY(26px) scale(0.985); } to { opacity: 1; transform: none; } } /* El pie va en manuscrita a posta: es la voz de al lado, la que matiza lo que acaba de gritar el titular. Sin él, el rótulo es un eslogan. */ .dialogoRotulo__pie { margin-top: 0.5em; font-family: var(--font-hand); font-size: calc(var(--dialogo-rotulo-tam, 72px) * 0.3); line-height: 1.25; color: rgba(255, 255, 255, 0.82); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); animation: dialogoRotulo 0.9s cubic-bezier(0.16, 1, 0.3, 1) both 0.42s; } .dialogoRotulo__seguir { position: absolute; inset: 0; cursor: pointer; background: none; border: none; } .dialogoRotulo__seguir:focus-visible { outline: 2px solid var(--da-accent); outline-offset: -6px; } /* ═══════════════════════════════════════════════════════════════════════════ TIPO 4 · CHAT — WhatsApp simulado. Los tokens del canal ya existían en el design system (`--da-wa-deep`, `--da-wa-bubble`): aquí solo se usan. ═══════════════════════════════════════════════════════════════════════════ */ /* * El teléfono **nunca se sale del encuadre**. * * La ficha del grupo es más alta que la conversación —foto grande, descripción, * lista de gente— y con una altura libre se comía el marco por arriba y por abajo. * Con una columna flexible, la cabecera y la barra de escribir se quedan quietas y * lo de en medio es lo que rueda. Que es como se comporta un teléfono. */ .dialogoChat { top: var(--dialogo-chat-y, 50%); left: var(--dialogo-chat-x, 50%); display: flex; flex-direction: column; width: var(--dialogo-chat-ancho, 420px); max-width: calc(100% - 32px); max-height: calc(100% - 32px); transform: translate(-50%, -50%); animation: dialogoChatEntra var(--dur) var(--ease) both; } /* La pantalla: lo que de verdad recorta la conversación. Va aparte del marco para que el bisel del aparato quede por fuera y no le coma el borde a la cabecera. */ .dialogoChat__pantalla { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; background: var(--da-paper-2); } /* * EL CONTORNO — las tres lecturas de «ponle el marco de la app», para elegir viendo. * * Ninguna se inventa: las tres salen de sitios donde la casa ya dibuja esto. * · `ninguno` — como estaba: una tarjeta flotando. Sirve cuando el chat ES la * pantalla y no hay nada alrededor con lo que competir. * · `movil` — el teléfono a línea de tinta de `features/instalar/Instalar.css:57`. * Dos píxeles de `--da-ink` y radio 22 (que es `--radius-xl` clavado), * sin muesca y sin bisel plateado: la casa dibuja el aparato como un * boceto, no como una foto de un iPhone. * · `tarjeta` — la regla escrita en `shared/ui/eleccion/ElegirAoB.css:78`: lo que * dice «esto es una pantalla de la app» es que va **hundida** sobre * el fondo base, no elevada. * * El marco es de la CASA (tinta) y lo de dentro es del canal ajeno (verde WhatsApp). * Esa separación es justo lo que hace que se lea como «la app enseñando un WhatsApp» * y no como una copia de WhatsApp. */ .dialogoChat[data-marco='ninguno'] { overflow: hidden; border-radius: var(--radius-lg); /* `--shadow-modal` lo despegaba de la página: el chat no es un modal. */ box-shadow: var(--shadow-pop); } .dialogoChat[data-marco='movil'] { padding: 8px; background: var(--da-paper-2); border: 2px solid var(--da-ink); border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); } .dialogoChat[data-marco='movil'] .dialogoChat__pantalla { /* 22 del marco menos los 8 del bisel: así las dos curvas son concéntricas. */ border-radius: 14px; } .dialogoChat[data-marco='tarjeta'] { padding: var(--space-3); background: var(--da-surface); border: var(--border-width) solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-inset); } .dialogoChat[data-marco='tarjeta'] .dialogoChat__pantalla { border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); } @keyframes dialogoChatEntra { from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* La cabecera ES el botón de entrar en la ficha del grupo, así que hay que quitarle lo de botón y devolverle lo de cabecera. */ .dialogoChat__cabecera { display: flex; flex: none; gap: var(--space-3); align-items: center; width: 100%; padding: 10px 13px; font: inherit; color: var(--text-on-dark); text-align: left; cursor: pointer; background: var(--da-wa-deep); border: none; transition: background var(--dur-fast) var(--ease); } .dialogoChat__cabecera:hover { background: #08695e; } .dialogoChat__cabecera:focus-visible { outline: 2px solid var(--da-accent); outline-offset: -3px; } .dialogoChat__volver { font-size: 17px; line-height: 1; opacity: 0.85; } .dialogoChat__foto { display: flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; overflow: hidden; background: var(--da-paper-2); border-radius: 50%; } .dialogoChat__foto img { width: 100%; height: 100%; object-fit: cover; } .dialogoChat__quien { flex: 1; min-width: 0; } .dialogoChat__nombre { display: block; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-sm); font-weight: var(--fw-medium); line-height: 1.25; white-space: nowrap; } .dialogoChat__estado { display: block; height: 14px; font-size: var(--text-xs); line-height: 1.3; opacity: 0.75; } /* El fondo de WhatsApp no se puede copiar: es suyo. Lo que sí se puede es su temperatura —beige cálido con motas— que es lo que hace que se lea como un chat y no como una tarjeta más de la app. */ .dialogoChat__cuerpo { display: flex; flex: 1; flex-direction: column; gap: 5px; justify-content: flex-end; min-height: min(var(--dialogo-chat-alto, 220px), 100%); padding: 12px 11px; overflow-y: auto; background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.5) 0 2px, transparent 3px), radial-gradient(circle at 72% 63%, rgba(255, 255, 255, 0.5) 0 2px, transparent 3px), radial-gradient(circle at 44% 88%, rgba(255, 255, 255, 0.4) 0 2px, transparent 3px), #e5ddd5; background-size: 140px 140px, 180px 180px, 120px 120px, auto; } /* * Una fila = el hueco de la cara + la burbuja. * * El hueco **ocupa sitio aunque esté vacío**: si Irene escribe tres mensajes * seguidos su cara sale una vez, pero los tres tienen que quedar alineados. Sin el * hueco, el segundo y el tercero se irían a la izquierda y se rompería la tanda. */ .dialogoChat__linea { display: flex; gap: 6px; align-items: flex-end; } .dialogoChat__linea[data-de='yo'] { justify-content: flex-end; } .dialogoChat__hueco { display: flex; /* No es `display: none` a posta: tiene que seguir ocupando su sitio. */ visibility: hidden; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; overflow: hidden; border-radius: 50%; } .dialogoChat__hueco[data-visible='true'] { visibility: visible; } .dialogoChat__hueco img { width: 100%; height: 100%; object-fit: cover; } /* Sin foto, las iniciales en su color. Una silueta gris no dice quién es. */ .dialogoChat__hueco b { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 10px; font-weight: var(--fw-bold); color: var(--text-on-dark); letter-spacing: 0.02em; } .dialogoChat__msg { position: relative; max-width: 78%; padding: 6px 9px 7px; font-size: var(--text-sm); line-height: 1.4; color: var(--da-ink); overflow-wrap: break-word; border-radius: var(--radius-sm); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); animation: dialogoMsg 0.26s var(--ease-bounce) both; } @keyframes dialogoMsg { from { opacity: 0; transform: translateY(9px) scale(0.96); } to { opacity: 1; transform: none; } } .dialogoChat__msg[data-de='otro'] { background: var(--da-paper); } .dialogoChat__msg[data-de='yo'] { background: var(--da-wa-bubble); } /* La esquina en punta marca dónde empieza cada tanda, como en WhatsApp. */ .dialogoChat__msg[data-de='otro'][data-abre='true'] { border-top-left-radius: 2px; } .dialogoChat__msg[data-de='yo'][data-abre='true'] { border-top-right-radius: 2px; } .dialogoChat__de { /* Es un : sin esto el nombre se pega al mensaje («Irene¿Alguien...»). */ display: block; margin-bottom: 1px; font-size: 11.5px; font-weight: var(--fw-bold); } /* ── LA ENCUESTA dentro de una burbuja ── La pregunta arriba, cada opción con su barra y, al lado, las caras de quien la votó. Las caras son lo que la hace parecer de verdad: la barra sola es un gráfico. */ .dialogoChat__encuesta { display: grid; gap: 7px; min-width: 200px; padding-top: 2px; } .dialogoChat__encuestaPregunta { font-size: 13.5px; font-weight: var(--fw-bold); line-height: 1.3; } .dialogoChat__opcion { display: grid; gap: 3px; padding: 7px 9px; background: rgba(37, 37, 37, 0.05); border-radius: 10px; } .dialogoChat__opcionTexto { display: flex; gap: 8px; justify-content: space-between; font-size: 12.5px; line-height: 1.3; } .dialogoChat__opcionTexto b { font-variant-numeric: tabular-nums; color: var(--da-accent-text); } .dialogoChat__barra2 { display: block; height: 5px; overflow: hidden; background: rgba(37, 37, 37, 0.1); border-radius: 999px; } .dialogoChat__barra2 i { display: block; height: 100%; background: var(--da-accent); border-radius: inherit; transition: width 0.45s var(--ease); } .dialogoChat__votantes { display: flex; min-height: 18px; margin-top: 1px; } .dialogoChat__votante { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: -5px; overflow: hidden; font-size: 8px; font-weight: var(--fw-bold); color: var(--da-paper); border: 1.5px solid var(--da-paper); border-radius: 50%; animation: dialogoChatVoto 0.32s var(--ease) both; } .dialogoChat__votante img { width: 100%; height: 100%; object-fit: cover; } @keyframes dialogoChatVoto { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } } .dialogoChat__encuestaPie { font-size: 10.5px; color: rgba(37, 37, 37, 0.55); } @media (prefers-reduced-motion: reduce) { .dialogoChat__votante { animation: none; } .dialogoChat__barra2 i { transition: none; } } .dialogoChat__pie { float: right; display: flex; gap: 3px; align-items: center; margin: 6px 0 -2px 8px; font-size: 10.5px; color: rgba(37, 37, 37, 0.45); } .dialogoChat__ok { font-size: 11px; color: #53bdeb; letter-spacing: -2px; } .dialogoChat__msg[data-de='escribiendo'] { display: flex; gap: 4px; padding: 10px 13px; background: var(--da-paper); border-top-left-radius: 2px; } .dialogoChat__punto { display: block; width: 7px; height: 7px; background: var(--da-gray); border-radius: 50%; animation: dialogoPunto 1.1s ease-in-out infinite; } .dialogoChat__punto:nth-child(2) { animation-delay: 0.16s; } .dialogoChat__punto:nth-child(3) { animation-delay: 0.32s; } @keyframes dialogoPunto { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } } /* ── LA FICHA DEL GRUPO ──────────────────────────────────────────────────── Es la pantalla donde se explica de qué va un grupo, así que tenía que poder enseñarse: para eso está el tipo 4. Se entra y se sale tocando la cabecera. */ .dialogoChat__info { flex: 1; min-height: 0; padding: var(--space-4) 0; overflow-y: auto; text-align: center; background: var(--da-paper-soft); animation: dialogoInfo var(--dur) var(--ease) both; } @keyframes dialogoInfo { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } .dialogoChat__retrato { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin: 0 auto var(--space-3); overflow: hidden; font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--text-on-dark); background: var(--da-wa-deep); border-radius: 50%; } .dialogoChat__retrato img { width: 100%; height: 100%; object-fit: cover; } .dialogoChat__infoTitulo { font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--fw-medium); line-height: 1.2; color: var(--da-ink); } .dialogoChat__infoPie { margin-top: 2px; font-size: var(--text-xs); color: var(--text-secondary); } .dialogoChat__descripcion { padding: var(--space-3) var(--space-4); margin: var(--space-4) var(--space-3) 0; text-align: left; background: var(--da-paper); border-radius: var(--radius); box-shadow: var(--shadow-xs); } .dialogoChat__descripcion p { margin-top: 3px; font-size: var(--text-sm); line-height: 1.5; color: var(--da-ink); white-space: pre-wrap; } .dialogoChat__etiqueta { font-size: var(--text-xs); color: var(--da-wa-deep); } .dialogoChat__creado { display: block; margin-top: var(--space-2); font-size: 11px; color: var(--text-secondary); } .dialogoChat__lista { padding: var(--space-2) 0; margin: var(--space-4) var(--space-3) 0; overflow: hidden; list-style: none; background: var(--da-paper); border-radius: var(--radius); box-shadow: var(--shadow-xs); } .dialogoChat__fila { display: flex; gap: var(--space-3); align-items: center; padding: 7px var(--space-4); text-align: left; } .dialogoChat__cara { display: flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; overflow: hidden; font-size: 12px; font-weight: var(--fw-bold); color: var(--text-on-dark); border-radius: 50%; } .dialogoChat__cara img { width: 100%; height: 100%; object-fit: cover; } .dialogoChat__filaNombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-sm); color: var(--da-ink); white-space: nowrap; } .dialogoChat__admin { padding: 2px 7px; font-size: 10px; color: var(--da-wa-deep); background: rgba(7, 94, 84, 0.1); border-radius: var(--radius-pill); } .dialogoChat__barra { display: flex; flex: none; gap: var(--space-2); align-items: center; padding: 8px 11px; background: var(--da-paper-soft); } .dialogoChat__campo { flex: 1; padding: 8px 13px; font-size: var(--text-sm); color: var(--da-gray); background: var(--da-paper); border-radius: var(--radius-pill); } .dialogoChat__enviar { display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: var(--text-sm); color: var(--text-on-dark); background: var(--da-wa); border-radius: 50%; } /* ═══════════════════════════════════════════════════════════════════════════ MOVIMIENTO REDUCIDO Va al final del fichero a posta: sin `!important`, lo único que le gana a las animaciones de arriba es llegar después con la misma especificidad. Y el texto ya sale entero por su lado — de eso se encarga `useEscritura`. ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .dialogo, .dialogo *, .dialogo *::before, .dialogo *::after { animation: none; } } /* ⬡ La arroba navegable. Hereda tipografía y color de donde la pongan: en una ficha de moderación tiene que seguir leyéndose como el nombre de la fila, no como un enlace de más. Lo único que añade es el subrayado punteado que dice «aquí se puede pinchar». */ /* ⚠️ El `