/* Equipo Tagers · el kit (equipo-design, ronda 1, 9 oct 2026; documentado en /kit/). Sembrado en la ronda 0 con los cinco conceptos que Jorge aceptó el 24 de septiembre: «crema de fondo, vino para la tinta y las bandas oscuras, oro para el dinero y los logros; EightiesComeback para los números grandes y los titulares, Quicksand para lo demás; la foto de la casa como luz». Material: papel editorial. Sin vidrio, sin modo oscuro (cocinas y sol); una lámina de noche sólo si es lámina (data-tema="noche"). Letra de 16 px o más para leer, blancos de 44 px para tocar. Un solo reloj: toda duración sale de --d-1/--d-2/--d-3/--late; sólo transform y opacity se mueven (WebKit). Nombres de clase estables: las héroes de otras sesiones los usan; aquí se agrega, no se renombra. Un color crudo fuera de :root es un error, salvo dentro de una ilustración. */ @font-face { font-family: "Eighties"; src: url("/fonts/EightiesComeback-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Eighties"; src: url("/fonts/EightiesComeback-Medium-2.otf") format("opentype"); font-weight: 500; font-display: swap; } @font-face { font-family: "Quicksand"; src: url("/fonts/quicksand-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; } :root { /* ---- el papel ---- */ --crema: #FAF2E7; /* el fondo de toda pantalla */ --papel: #F3E5D1; /* tarjetas, listas, cifras sobre el crema */ --papel-2: #EFDDC6; /* rieles, barras apagadas, el anillo vacío */ --crema-tenue: #F2E4D3; /* texto de apoyo sobre vino */ --barra: #FCF7F0; /* la barra de pestañas */ --hoja: #FFFCF7; /* el campo donde se escribe */ /* ---- la tinta ---- */ --vino: #603440; /* títulos, cifras, botón principal, bandas */ --vino-claro: #7A4452; /* la segunda barra de una gráfica */ --ciruela: #3F1D29; /* la banda honda, la lámina de noche, el texto sobre oro */ --tinta: #2B1B20; /* el texto que se lee */ --gris: #6B585F; /* el texto de apoyo (5.3:1 sobre papel; el #7A676D de los conceptos daba 4.25:1) */ --gris-medio: #7F6C72; /* pestañas apagadas y textos de muestra (4.6:1) */ --gris-claro: #9C8A8F; /* sólo trazos: flechas, rieles, puntos apagados; nunca texto */ --linea: #E4D2BD; /* separadores */ /* ---- el oro: sólo donde la casa firma (dinero, logros, «una mesa te nombró») ---- */ --oro: #E8AE24; --oro-vivo: #F7BE00; --oro-claro: #F8E3AE; --oro-suave: #F4D9A6; --oro-tinta: #6A4A06; /* ---- los estados ---- */ --rosa: #EBD6C8; --verde: #2E7A3C; --verde-claro: #DCEBD9; --verde-tinta: #245B2D; --rojo: #B3261E; --rojo-claro: #F4D8D5; --azul: #2F5D8A; --azul-claro: #DCE6F0; --azul-tinta: #23476B; --espera: #A4593A; --espera-claro: #F5E1D6; --espera-tinta: #7E3F25; /* pendiente, por revisar: terracota, nunca oro */ --whatsapp-claro: #E6F2D5; /* la burbuja de lo que manda el número de la casa */ /* ---- sobre vino y ciruela (bandas, la decisión, la cita, la lámina de noche) ---- */ --sobre-vino: #FAF2E7; --sobre-vino-2: #F2E4D3; --sobre-vino-oro: #F4D9A6; --sobre-vino-linea: rgba(250, 242, 231, .25); --sobre-vino-borde: rgba(250, 242, 231, .6); --sobre-vino-velo: rgba(250, 242, 231, .14); /* ---- la foto ---- */ --foto-fondo: #2A160F; /* lo que se ve mientras la foto llega */ --velo-foto: linear-gradient(180deg, rgba(20, 8, 6, 0) 38%, rgba(20, 8, 6, .78) 100%); --velo-foto-alto: linear-gradient(180deg, rgba(20, 8, 6, 0) 18%, rgba(20, 8, 6, .55) 48%, rgba(20, 8, 6, .88) 100%); --sombra-flota: 0 10px 24px -14px rgba(43, 27, 32, .5); --sombra-hoja: 0 -18px 50px -20px rgba(43, 27, 32, .45); --velo-hoja: rgba(43, 27, 32, .42); /* ---- las letras: dos, nunca una tercera ---- */ --f-display: "Eighties", Georgia, "Times New Roman", serif; --f-texto: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif; --t-numero: 76px; /* el número de la pantalla: «$5,231» */ --t-saludo: 38px; /* «Buenos días, Mateo» */ --t-titulo: 34px; /* el título de una pestaña o de una pantalla hija */ --t-banda: 44px; /* las cifras de una banda («208 · 4.88 · 4.88») */ --t-cita: 28px; /* las palabras de una mesa */ --t-sub: 24px; /* un titular secundario en Eighties */ --t-cuerpo: 16px; /* lo que se lee: nunca menos */ --t-apoyo: 16px; /* la segunda línea: también se lee (el juez, 9 oct: 14 px no alcanza a quien pasa de 40) */ --t-nota: 16px; /* notas y rótulos bajo una cifra: se distinguen por peso y color, no por tamaño */ --t-micro: 12px; /* sólo etiquetas del marco: pestañas, «pronto», «IA», el horizonte */ /* ---- el espacio ---- */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --orilla: 20px; --e-seccion: 26px; --r-chico: 12px; --r-tarjeta: 18px; --r-grande: 22px; --r-pastilla: 999px; /* ---- un solo reloj ---- */ --d-1: .18s; /* lo que contesta al dedo */ --d-2: .32s; /* lo que cambia */ --d-3: .55s; /* lo que entra */ --late: 1.6s; /* lo que respira (el oro que florece) */ --escalon: 55ms; --suave: cubic-bezier(.2, .7, .2, 1); --resorte: cubic-bezier(.3, 1.35, .5, 1); --sale: cubic-bezier(.4, 0, 1, 1); /* ---- el marco ---- */ --alto-pestanas: 74px; --alto-barra: 60px; --blanco: 44px; } /* La lámina de noche («Tu año»): los mismos nombres cambian de valor; nada más se oscurece. */ [data-tema="noche"] { color-scheme: dark; --papel: rgba(250, 242, 231, .08); --papel-2: rgba(250, 242, 231, .16); --linea: rgba(250, 242, 231, .18); --tinta: var(--sobre-vino); --gris: var(--sobre-vino-2); --c-monto: var(--sobre-vino); } * { box-sizing: border-box; } button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } img { max-width: 100%; } :focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; } /* ---------- el marco ---------- */ /* La letra y la tinta de la casa también en : la hoja (.v2-hoja y su velo) y lo que el cascarón monta fuera de .eq-app la heredan de aquí — sin esto, el texto de toda hoja salía en la serif del navegador (ojo O8-1, 2026-10-12). */ /* El papel bajo todo: una página fuera del marco de la app (la de verificar una constancia, sin sesión) quedaba blanca bajo su contenido, porque .eq-app { min-height: 100% } no tiene altura que llenar ahí (revisión de la ronda 4, design 1). */ html { background: var(--crema); } body { color: var(--tinta); font: 500 var(--t-cuerpo)/1.45 var(--f-texto); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .eq-app { min-height: 100%; display: flex; flex-direction: column; background: var(--crema); color: var(--tinta); font: 500 var(--t-cuerpo)/1.45 var(--f-texto); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } .eq-lienzo { flex: 1; min-width: 0; padding: calc(var(--arriba, env(safe-area-inset-top, 0px)) + 8px) 0 calc(var(--abajo, env(safe-area-inset-bottom, 0px)) + var(--alto-pestanas) + 72px); } .eq-cuerpo { display: grid; gap: 14px; padding: 0 var(--orilla); } /* Lo que el cascarón agrega después de una héroe («Más en esta sección») lleva la misma orilla que la héroe. */ .eq-lienzo > section:not(.heroe) { margin: var(--e-seccion) var(--orilla) 0; } .eq-barra { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: var(--blanco) 1fr auto; align-items: center; gap: 8px; margin-top: calc(-1 * (var(--arriba, env(safe-area-inset-top, 0px)) + 8px)); padding: calc(var(--arriba, env(safe-area-inset-top, 0px)) + 6px) 16px 6px; background: var(--crema); box-shadow: 0 1px 0 var(--linea); } .eq-volver { width: var(--blanco); height: var(--blanco); display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-pastilla); background: var(--papel); color: var(--vino); cursor: pointer; } .eq-migas { min-width: 0; font-size: var(--t-apoyo); font-weight: 700; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eq-cabeza { display: grid; gap: 4px; padding: 14px var(--orilla) 8px; } .eq-cabeza .date { font-size: var(--t-apoyo); } .eq-cabeza .title { font-size: var(--t-titulo); } .eq-cabeza p { margin: 6px 0 0; } .eq-como { position: fixed; right: 12px; bottom: calc(var(--abajo, env(safe-area-inset-bottom, 0px)) + var(--alto-pestanas) + 10px); z-index: 6; display: grid; place-items: center; width: var(--blanco); height: var(--blanco); padding: 0; border: 1.5px solid var(--vino); border-radius: var(--r-pastilla); background: var(--crema); color: var(--vino); cursor: pointer; box-shadow: var(--sombra-flota); } .eq-como .ico { width: 20px; height: 20px; } .eq-como { transition: transform var(--d-2) var(--suave), opacity var(--d-2) var(--suave); } .eq-como.se-esconde { transform: translateY(14px) scale(.9); opacity: 0; pointer-events: none; } .eq-como-barra { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px 6px 9px; border: 1.5px solid var(--vino); border-radius: var(--r-pastilla); background: transparent; color: var(--vino); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; } .eq-como-barra::after { content: ""; position: absolute; inset: -5px -2px; } .eq-como-barra .ico { width: 16px; height: 16px; } [data-tema="noche"] ~ .eq-como, .eq-app:has([data-tema="noche"]) .eq-como { background: var(--ciruela); color: var(--sobre-vino); border-color: var(--sobre-vino-borde); } .eq-pestanas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 8px 6px calc(var(--abajo, env(safe-area-inset-bottom, 0px)) + 8px); background: var(--barra); border-top: 1px solid var(--linea); } .eq-pestanas :is(button, a) { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; min-height: 52px; padding: 4px 0 2px; border: 0; text-decoration: none; background: transparent; font-size: var(--t-micro); font-weight: 700; color: var(--gris-medio); cursor: pointer; } .eq-pestanas .ico { width: 24px; height: 24px; } .eq-pestanas .mark { width: 5px; height: 5px; border-radius: 50%; margin-top: 1px; } .eq-pestanas :is(button, a)[aria-current] { color: var(--vino); } .eq-pestanas :is(button, a)[aria-current] .mark { background: var(--oro); } .eq-pestanas .pronto { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 2px 6px; border-radius: 6px; background: var(--oro-claro); color: var(--oro-tinta); font-size: 9.5px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 0 0 2px var(--barra); } /* ---------- los iconos (trazo 1.9 en 24 × 24; la lista vive en bloques.js y en /kit/) ---------- */ .ico { width: 22px; height: 22px; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; } .ico.relleno { fill: currentColor; stroke: none; } /* ---------- el lenguaje (de los cinco conceptos) ---------- */ .pad { padding: 0 var(--orilla); } .row { display: flex; align-items: center; gap: 12px; } .muted { color: var(--gris); } .small { font-size: var(--t-apoyo); } .strong { font-weight: 700; } .note { font-size: var(--t-nota); color: var(--gris); } .hr { height: 1px; background: var(--linea); margin: 14px 0; } .eighties { font-family: var(--f-display); font-weight: 500; letter-spacing: 0; } .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 6px var(--orilla) 0; } .date { font-size: var(--t-apoyo); color: var(--gris); font-weight: 600; } .avatar { width: var(--blanco); height: var(--blanco); border-radius: 50%; background: var(--vino); color: var(--crema); display: grid; place-items: center; font-weight: 700; font-size: 14px; letter-spacing: .02em; flex: none; border: 0; padding: 0; cursor: pointer; } .avatar.chico { width: 34px; height: 34px; font-size: 12px; } .avatar.oro { background: var(--oro); color: var(--ciruela); } h1.hello { font-family: var(--f-display); font-weight: 500; font-size: var(--t-saludo); line-height: 1.02; color: var(--vino); margin: 6px 0 8px; } .lede { font-size: var(--t-cuerpo); font-weight: 600; margin: 0; color: var(--tinta); } .title { font-family: var(--f-display); font-weight: 500; font-size: var(--t-titulo); color: var(--vino); margin: 4px 0 0; line-height: 1; } .panel { display: block; background: var(--papel); border-radius: var(--r-tarjeta); padding: 16px; } .panel + .panel { margin-top: 12px; } /* Un botón que es pieza de la página: sin borde ni relleno de botón; cada pieza conserva su propio display. */ /* (font y color los hereda cualquier botón desde la regla «button» de arriba, que pesa menos que la clase: así una banda de vino conserva su tinta crema; aquí no se repiten) */ :is(button, a).panel, :is(button, a).list, :is(button, a).item, :is(button, a).stat, :is(button, a).hero, :is(button, a).lesson, :is(button, a).quote, :is(button, a).cita, :is(button, a).grow, :is(button, a).yday, :is(button, a).banda, :is(button, a).b-tarjeta, :is(button, a).b-visor, :is(button, a).paso, :is(button, a).step, :is(button, a).renglon, :is(button, a).tick, :is(button, a).anillo { border: 0; text-align: left; cursor: pointer; } :is(button, a).panel, :is(button, a).list, :is(button, a).lesson, :is(button, a).quote, :is(button, a).cita, :is(button, a).grow, :is(button, a).yday, :is(button, a).banda, :is(button, a).b-visor { width: 100%; } :is(button, a).item, :is(button, a).b-tarjeta, :is(button, a).paso, :is(button, a).step, :is(button, a).renglon, :is(button, a).tick, :is(button, a).anillo { width: 100%; } :is(button, a).hero { display: block; width: calc(100% - 2 * var(--orilla)); } :is(button, a).b-visor { display: block; padding: 0; } .section { margin-top: var(--e-seccion); } .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 10px; } .section-head h2 { font-size: 18px; font-weight: 700; margin: 0; color: var(--tinta); } .section-head a, .section-head .mas { position: relative; font-size: var(--t-apoyo); font-weight: 700; color: var(--vino); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; } .section-head .mas::after, .b-tit .mas::after { content: ""; position: absolute; inset: -14px -8px; } .hero { position: relative; display: block; margin: 18px var(--orilla) 0; border-radius: var(--r-grande); overflow: hidden; height: 300px; background: var(--foto-fondo); padding: 0; } .hero.baja { height: 250px; } .hero img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero .shade { position: absolute; inset: 0; background: var(--velo-foto); } .hero.baja .shade { background: var(--velo-foto-alto); } .hero .cap { position: absolute; left: 18px; right: 18px; bottom: 16px; color: var(--crema); } .hero .kicker, .kicker { font-size: var(--t-nota); font-weight: 700; color: var(--oro-suave); } .hero .name { font-family: var(--f-display); font-size: var(--t-titulo); line-height: 1; margin: 4px 0 12px; } /* El botón de audio: escucha el día, escucha la lección. data-play=""; al tocarlo corre su barra de oro y se vuelve pausa. */ .play { display: inline-flex; align-items: center; gap: 10px; min-height: var(--blanco); background: var(--crema); color: var(--vino); border-radius: var(--r-pastilla); padding: 7px 18px 7px 7px; font-weight: 700; font-size: var(--t-apoyo); border: 0; cursor: pointer; position: relative; overflow: hidden; } .play.vino { background: var(--vino); color: var(--crema); } .play.vino .dot { background: var(--crema); color: var(--vino); } .play .dot { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--vino); color: var(--crema); display: grid; place-items: center; flex: none; } .play .dot svg { width: 12px; height: 14px; display: block; transition: opacity var(--d-1) var(--suave); } .play .dot::before, .play .dot::after { content: ""; position: absolute; top: 9px; width: 3.5px; height: 12px; border-radius: 2px; background: currentColor; opacity: 0; transition: opacity var(--d-1) var(--suave); } .play .dot::before { left: 10px; } .play .dot::after { right: 10px; } .play.sonando .dot svg { opacity: 0; } .play.sonando .dot::before, .play.sonando .dot::after { opacity: 1; } .play::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--oro); transform-origin: 0 50%; transform: scaleX(0); } .play.sonando::after { animation: eq-progreso var(--dura, 60s) linear forwards; } .play.pausado::after { animation-play-state: paused; } .list { display: block; background: var(--papel); border-radius: var(--r-tarjeta); overflow: hidden; padding: 0; } .item { display: flex; gap: 14px; align-items: center; padding: 14px 16px; min-height: 56px; width: 100%; background: transparent; border: 0; text-align: left; color: inherit; } .item + .item { border-top: 1px solid var(--linea); } .item .ic { width: 40px; height: 40px; border-radius: var(--r-chico); background: var(--crema); display: grid; place-items: center; flex: none; color: var(--vino); } .item .txt, .item > div:not(.ic):not(.end) { flex: 1; min-width: 0; } .item .txt { display: grid; } .item .t { font-weight: 700; font-size: var(--t-cuerpo); line-height: 1.25; } .item .s { font-size: var(--t-apoyo); color: var(--gris); margin-top: 2px; line-height: 1.35; } .item .end { margin-left: auto; font-weight: 700; color: var(--vino); white-space: nowrap; flex: none; } .item .end.horizonte { font-size: var(--t-micro); } .item .txt .horizonte { justify-self: start; margin-top: 7px; } .item .flecha { margin-left: auto; color: var(--gris-claro); width: 18px; height: 18px; } .item .end + .flecha { margin-left: 0; } .item .punto { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--gris-claro); } .item .punto[data-estado="verde"] { background: var(--verde); } .item .punto[data-estado="oro"], .item .punto[data-estado="espera"] { background: var(--espera); } .item .punto[data-estado="rojo"] { background: var(--rojo); } .item .punto[data-estado="azul"] { background: var(--azul); } .money { font-family: var(--f-display); font-weight: 500; color: var(--vino); line-height: .9; letter-spacing: -.01em; } .money.big { font-size: var(--t-numero); } .money sup { font-size: .45em; vertical-align: .9em; margin-right: 2px; } .pill { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pastilla); padding: 5px 12px; font-size: var(--t-nota); font-weight: 700; border: 0; line-height: 1.3; } button.pill { min-height: var(--blanco); padding: 8px 14px; font-size: var(--t-apoyo); cursor: pointer; } .pill.oro { background: var(--oro-claro); color: var(--oro-tinta); } .pill.vino { background: var(--vino); color: var(--crema); } .pill.verde { background: var(--verde-claro); color: var(--verde-tinta); } .pill.rosa { background: var(--rosa); color: var(--vino); } .pill.rojo { background: var(--rojo-claro); color: var(--rojo); } .pill.azul { background: var(--azul-claro); color: var(--azul-tinta); } .pill.espera { background: var(--espera-claro); color: var(--espera-tinta); } .cuenta-badge { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--r-pastilla); background: var(--vino); color: var(--crema); font-size: 14px; font-weight: 700; flex: none; } .ia { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 6px; background: var(--papel-2); color: var(--vino); font-size: 11px; font-weight: 700; letter-spacing: .04em; vertical-align: 2px; } .btn { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; padding: 13px 16px; font-weight: 700; font-size: var(--t-cuerpo); background: var(--vino); color: var(--crema); border: 0; width: 100%; min-height: 48px; cursor: pointer; text-align: center; } .btn.ghost { background: transparent; color: var(--vino); border: 1.5px solid var(--vino); } .btn.oro { background: var(--oro); color: var(--ciruela); } /* sólo para un logro (compartir tu año, una mesa te nombró); nunca el botón de todos los días */ .btn.suave { background: var(--papel); color: var(--vino); } .btn .ico { width: 20px; height: 20px; } .btn, .item, .atajo, .chip, .stat, .play, .paso, .step, .renglon, .tick, .b-tarjeta, .hero, .panel { transition: transform var(--d-1) var(--suave); } .btn:active, :is(button, a).item:active, .atajo:active, .chip:active, :is(button, a).stat:active, .play:active, :is(button, a).b-tarjeta:active, :is(button, a).hero:active, :is(button, a).panel:active, :is(button, a).banda:active, :is(button, a).cita:active, :is(button, a).quote:active { transform: scale(.985); } /* El chip de contorno: «Voy tarde», «Aplaudir». */ .chip, .late, .clap { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; border: 1.5px solid var(--vino); color: var(--vino); background: transparent; border-radius: var(--r-pastilla); padding: 6px 14px 6px 12px; font-weight: 700; font-size: var(--t-apoyo); cursor: pointer; } .chip::after, .late::after, .clap::after { content: ""; position: absolute; inset: -4px -2px; } .chip .ico, .late svg, .clap svg { width: 17px; height: 17px; } .chip.lleno { background: var(--vino); color: var(--crema); } .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--papel); border-radius: 14px; padding: 4px; gap: 4px; } .seg span, .seg button { display: grid; place-items: center; min-height: var(--blanco); text-align: center; padding: 8px 4px; border-radius: 10px; font-weight: 700; font-size: var(--t-apoyo); color: var(--gris); border: 0; background: transparent; cursor: pointer; } .seg .on { background: var(--crema); color: var(--vino); box-shadow: 0 1px 2px rgba(43, 27, 32, .08); } /* a filter row of links (review 6, design 3): the same parts as a link, the current one as .on (aria-current) — one line, nothing wraps to two */ .seg a { display: grid; place-items: center; min-height: var(--blanco); text-align: center; padding: 8px 4px; border-radius: 10px; font-weight: 700; font-size: var(--t-apoyo); line-height: 1.2; color: var(--gris); text-decoration: none; } .seg a[aria-current] { background: var(--crema); color: var(--vino); box-shadow: 0 1px 2px rgba(43, 27, 32, .08); } .bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 150px; margin-top: 18px; } .bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; } .bar .v { width: 100%; border-radius: 9px 9px 4px 4px; background: var(--vino); transform-origin: 50% 100%; } .bar .v.dos { background: var(--vino-claro); } .bar .v.mejor { background: var(--oro); } .bar .v.off { background: var(--papel-2); height: 6px !important; border-radius: 4px; } .bar .amt { font-size: var(--t-micro); font-weight: 700; color: var(--vino); } .bar .d { font-size: var(--t-nota); font-weight: 700; color: var(--gris); } .entra .bar .v:not(.off), .bars.entra .bar .v:not(.off) { animation: eq-crece var(--d-3) var(--suave) both; animation-delay: calc(var(--n, 0) * var(--escalon) + 120ms); } .ring { position: relative; width: 132px; height: 132px; flex: none; } .ring svg { transform: rotate(-90deg); display: block; } .ring .c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; } .stat { flex: 1; display: block; background: var(--papel); border-radius: var(--r-tarjeta); padding: 14px 16px; text-align: left; } .stat b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 36px; color: var(--vino); line-height: 1; } .stat span { display: block; margin-top: 6px; font-size: var(--t-nota); font-weight: 700; color: var(--gris); line-height: 1.3; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .rejilla { display: grid; gap: 10px; } .rejilla.dos { grid-template-columns: 1fr 1fr; } .atajo { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-height: 112px; padding: 14px; background: var(--papel); border-radius: var(--r-tarjeta); border: 0; text-align: left; color: inherit; cursor: pointer; } .atajo .a-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--crema); color: var(--vino); display: grid; place-items: center; } .atajo b { display: block; font-size: 15.5px; line-height: 1.2; } .atajo small { display: block; font-size: var(--t-nota); color: var(--gris); margin-top: 3px; line-height: 1.3; } .horizonte { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pastilla); font-size: var(--t-micro); font-weight: 700; background: var(--papel); color: var(--gris); white-space: nowrap; } .horizonte[data-h="vive"] { background: var(--verde-claro); color: var(--verde-tinta); } .horizonte[data-h="siguiente"] { background: var(--oro-claro); color: var(--oro-tinta); } .horizonte[data-h="despues"] { background: var(--rosa); color: var(--vino); } .horizonte[data-h="futuro"] { background: var(--papel-2); color: var(--gris); } /* ---------- las piezas de los conceptos, para todas las héroes ---------- */ /* La banda de vino: «Así nos fue ayer», la decisión, el siguiente paso. .honda = ciruela. */ .banda, .yday { display: block; background: var(--vino); color: var(--sobre-vino); border-radius: var(--r-grande); padding: 18px 18px 16px; } .banda.honda, .grow { display: block; background: var(--ciruela); color: var(--sobre-vino); border-radius: var(--r-grande); padding: 20px; } .banda .k, .yday .k { font-size: var(--t-nota); font-weight: 700; color: var(--sobre-vino-oro); } .banda .numeros, .yday .nums { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 10px; margin: 10px 0 14px; align-items: end; } .banda .numeros b, .yday .nums b { display: block; font-family: var(--f-display); font-weight: 500; font-size: var(--t-banda); line-height: .9; } .banda .numeros span, .yday .nums span { display: block; margin-top: 4px; font-size: var(--t-nota); font-weight: 700; color: var(--sobre-vino-2); } .banda .q, .yday .q { font-family: var(--f-display); font-size: 22px; line-height: 1.12; border-top: 1px solid var(--sobre-vino-linea); padding-top: 12px; } .banda .who, .yday .who { font-size: var(--t-nota); font-weight: 700; color: var(--sobre-vino-oro); margin-top: 8px; } .banda p, .grow p { color: var(--sobre-vino-2); font-weight: 600; } .banda .btn.ghost, .grow .btn.ghost { color: var(--sobre-vino); border-color: var(--sobre-vino-borde); } /* La cita: lo que dijo una mesa. Con la comilla de oro; florece una vez. */ .cita, .quote { position: relative; display: block; overflow: hidden; isolation: isolate; background: var(--vino); color: var(--sobre-vino); border-radius: 24px; padding: 22px 22px 20px; } .cita .comilla, .quote .mark { font-family: var(--f-display); font-size: 120px; line-height: .6; color: var(--oro); position: absolute; top: 26px; right: 18px; opacity: .9; pointer-events: none; } .cita .palabras, .quote .words { font-family: var(--f-display); font-weight: 400; font-size: var(--t-cita); line-height: 1.12; margin: 18px 0 16px; } .cita .de, .quote .de { font-size: var(--t-nota); font-weight: 700; color: var(--sobre-vino-oro); } .estrellas, .stars { display: flex; gap: 4px; color: var(--oro-vivo); } .estrellas .ico, .stars svg { width: 18px; height: 18px; } /* El camino: una ruta de lecciones (hecho · ahora · sigue). */ .camino, .path { position: relative; } .camino::before, .path::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 3px; background: var(--papel-2); border-radius: 3px; } .paso, .step { position: relative; display: flex; gap: 16px; align-items: center; padding: 11px 0; width: 100%; background: transparent; border: 0; text-align: left; color: inherit; cursor: pointer; } .paso .t, .step .t { font-weight: 700; font-size: var(--t-cuerpo); line-height: 1.2; } .paso .s, .step .s { font-size: var(--t-apoyo); color: var(--gris); margin-top: 2px; } .nodo, .node { width: 45px; height: 45px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--f-display); font-size: 22px; position: relative; z-index: 1; } .nodo.hecho, .node.done { background: var(--vino); color: var(--crema); } .nodo.ahora, .node.now { background: var(--oro); color: var(--ciruela); box-shadow: 0 0 0 6px var(--oro-claro); } .nodo.sigue, .node.next { background: var(--crema); color: var(--gris); border: 2.5px solid var(--papel-2); } .nodo.oro { background: var(--oro-vivo); color: var(--ciruela); } /* El renglón con su cifra a la izquierda («14 mesas», «29 %»). */ .renglon, .tick { display: flex; gap: 12px; align-items: center; padding: 12px 0; width: 100%; background: transparent; border: 0; text-align: left; color: inherit; cursor: pointer; } .renglon + .renglon, .tick + .tick { border-top: 1px solid var(--linea); } .renglon .cuando, .tick .when { width: 50px; flex: none; text-align: center; } .renglon .cuando b, .tick .when b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 24px; color: var(--vino); line-height: 1; } .renglon .cuando span, .tick .when span { font-size: var(--t-micro); font-weight: 700; color: var(--gris); } .anillo { display: flex; gap: 18px; align-items: center; width: 100%; background: transparent; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer; } .texto-boton { position: relative; display: block; width: 100%; min-height: var(--blanco); background: transparent; border: 0; font-size: var(--t-apoyo); font-weight: 700; color: var(--vino); text-align: center; cursor: pointer; } /* De dónde sale: el dato de la pantalla, plegado al pie; una línea llana, sin nombres de sistemas (48 héroes lo usan). */ details.de-donde { margin-top: 6px; } details.de-donde summary { display: flex; align-items: center; gap: 8px; min-height: var(--blanco); font-size: var(--t-apoyo); font-weight: 700; color: var(--gris); cursor: pointer; list-style: none; } details.de-donde summary::-webkit-details-marker { display: none; } details.de-donde summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--d-1) var(--suave); } details.de-donde[open] summary { color: var(--vino); } details.de-donde[open] summary::after { transform: translateY(2px) rotate(-135deg); } details.de-donde > :not(summary) { margin: 0 0 8px; color: var(--gris); font-size: var(--t-apoyo); line-height: 1.45; } /* La burbuja: lo que la app manda por el número de la casa, como se verá en WhatsApp. */ .burbuja { background: var(--whatsapp-claro); color: var(--tinta); border-radius: 14px 14px 14px 4px; padding: 10px 14px; font-size: var(--t-cuerpo); font-weight: 600; line-height: 1.35; } .burbuja small { display: block; margin-top: 4px; font-size: var(--t-nota); color: var(--gris); font-weight: 600; } .burbuja.mia { border-radius: 14px 14px 4px 14px; background: var(--hoja); } /* ---------- los ocho bloques (plantillas de bloques.js) ---------- */ .b-tit { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 18px; font-weight: 700; } .b-tit .mas { position: relative; font-size: var(--t-apoyo); font-weight: 700; color: var(--vino); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; } .b-nota { margin: 8px 2px 0; font-size: var(--t-nota); color: var(--gris); } /* decision: algo espera a una persona. */ .b-decision { background: var(--vino); color: var(--sobre-vino); border-radius: var(--r-grande); padding: 18px 18px 16px; } .b-decision .quien { display: flex; align-items: center; gap: 6px; font-size: var(--t-nota); font-weight: 700; color: var(--sobre-vino-oro); margin: 0 0 6px; } .b-decision .quien .ico { width: 16px; height: 16px; } .b-decision h2 { font-family: var(--f-display); font-weight: 400; font-size: 27px; line-height: 1.1; margin: 0; } .b-decision p { margin: 8px 0 0; color: var(--sobre-vino-2); } .b-decision .acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .b-decision .btn { background: var(--crema); color: var(--vino); flex: 1 1 40%; } .b-decision .btn.ghost { background: transparent; color: var(--sobre-vino); border-color: var(--sobre-vino-borde); } /* tarjeta: una cosa con foto. */ .b-tarjeta { background: var(--papel); border-radius: var(--r-tarjeta); padding: 12px; display: flex; gap: 14px; align-items: center; } .b-tarjeta img { width: 88px; height: 104px; object-fit: cover; border-radius: var(--r-chico); flex: none; background: var(--foto-fondo); } .b-tarjeta:not(:has(img)) { padding: 16px; } .b-tarjeta .txt { flex: 1; min-width: 0; } .b-tarjeta h2 { font-size: var(--t-cuerpo); font-weight: 700; line-height: 1.25; margin: 0; } .b-tarjeta p { margin: 4px 0 0; font-size: var(--t-apoyo); color: var(--gris); line-height: 1.35; } .b-tarjeta .pill { margin-top: 6px; } .b-tarjeta .flecha { color: var(--gris-claro); width: 18px; height: 18px; } .b-tarjeta.grande { display: block; padding: 0; overflow: hidden; } .b-tarjeta.grande img { width: 100%; height: 190px; border-radius: 0; display: block; } .b-tarjeta.grande .txt { padding: 14px 16px 16px; } /* cifras: los números que importan, en Eighties. */ .b-cifras { display: flex; gap: 12px; flex-wrap: wrap; } .b-cifras .stat { min-width: 100px; } /* formulario: letra de 16 px (el iPhone no se acerca), campos de 48 px. */ .b-formulario { display: grid; gap: 14px; } .b-formulario label { display: grid; gap: 6px; font-size: var(--t-apoyo); font-weight: 700; color: var(--gris); } .b-formulario input:where(:not([type="checkbox"], [type="radio"])), .b-formulario select, .b-formulario textarea { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 14px; border: 1.5px solid var(--linea); background: var(--hoja); color: var(--tinta); font: 600 16px/1.3 var(--f-texto); -webkit-appearance: none; appearance: none; } .b-formulario select { padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--vino) 50%), linear-gradient(135deg, var(--vino) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; } .b-formulario textarea { min-height: 96px; resize: vertical; } /* a checkbox or radio a component does not hide behind its chip is the browser's own control, in vino, 22 px — never the 100 %-wide empty box the field rule drew (RH's «Termina con constancia», 2026-10-14). :where keeps it under every component's own rule. */ .b-formulario :where(input[type="checkbox"], input[type="radio"]), label.campo > :where(input[type="checkbox"], input[type="radio"]) { flex: none; width: 22px; height: 22px; margin: 0 8px 0 0; vertical-align: -5px; accent-color: var(--vino); } .b-formulario input:focus, .b-formulario select:focus, .b-formulario textarea:focus { outline: none; border-color: var(--vino); box-shadow: 0 0 0 3px var(--oro-claro); } .b-formulario ::placeholder { color: var(--gris-medio); } .b-formulario .ayuda { font-size: var(--t-nota); font-weight: 600; color: var(--gris); } .b-formulario .opciones { display: flex; flex-wrap: wrap; gap: 8px; } /* acciones: un botón principal y los demás de contorno; .rejilla = atajos de dos columnas. */ .b-acciones { display: grid; gap: 10px; } .b-acciones.fila { grid-auto-flow: column; grid-auto-columns: 1fr; } .b-acciones .detalle { margin: -4px 2px 0; font-size: var(--t-nota); color: var(--gris); text-align: center; } /* visor: foto | video | audio | grafica | recibo | qr | leccion. */ .b-visor { position: relative; border-radius: var(--r-grande); overflow: hidden; background: var(--papel); color: inherit; } .b-visor > img { display: block; width: 100%; height: 220px; object-fit: cover; background: var(--foto-fondo); } .b-visor .marco-visor { display: grid; place-items: center; min-height: 160px; padding: 20px; color: var(--gris); text-align: center; gap: 8px; } .b-visor .marco-visor .ico { width: 34px; height: 34px; color: var(--vino); } .b-visor .pie { padding: 12px 16px 14px; } .b-visor .pie b { display: block; font-size: var(--t-cuerpo); } .b-visor .pie small { display: block; color: var(--gris); font-size: var(--t-apoyo); margin-top: 2px; } .b-visor .foto-video { position: relative; height: 220px; background: var(--foto-fondo); } .b-visor .foto-video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; } .b-visor .foto-video .boton-video { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--crema); color: var(--vino); display: grid; place-items: center; box-shadow: var(--sombra-flota); } .b-visor .foto-video .boton-video .ico { width: 26px; height: 26px; margin-left: 3px; } .b-visor .foto-video .dura { position: absolute; right: 12px; bottom: 12px; padding: 3px 9px; border-radius: var(--r-pastilla); background: rgba(20, 8, 6, .62); color: var(--crema); font-size: var(--t-micro); font-weight: 700; } .b-visor .audio { display: grid; gap: 14px; padding: 18px 16px 6px; } .b-visor .onda { display: flex; align-items: center; gap: 3px; height: 40px; } .b-visor .onda i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--vino); opacity: .28; } .b-visor .grafica { padding: 16px 16px 4px; } .b-visor .grafica .bars { margin: 0; height: 140px; } .b-visor .recibo { padding: 6px 16px 12px; display: grid; } .b-visor .recibo .grupo { margin: 12px 0 2px; font-size: var(--t-micro); font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; } .b-visor .recibo .renglon-recibo { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; padding: 6px 0; font-weight: 600; border: 0; background: transparent; width: 100%; text-align: left; color: inherit; } .b-visor .recibo :is(button, a).renglon-recibo { cursor: pointer; } .b-visor .recibo :is(button, a).renglon-recibo span:first-child { text-decoration: underline dotted var(--gris-claro); text-underline-offset: 4px; } .b-visor .recibo .renglon-recibo + .renglon-recibo { border-top: 1px solid var(--linea); } .b-visor .recibo .renglon-recibo b { color: var(--vino); white-space: nowrap; } .b-visor .recibo .neto { margin-top: 6px; border-top: 2px solid var(--vino) !important; padding-top: 12px; font-size: 18px; font-weight: 700; } .b-visor .recibo .neto b { font-family: var(--f-display); font-weight: 500; font-size: 30px; } .b-visor .qr { display: grid; place-items: center; gap: 10px; padding: 22px 16px 8px; } .b-visor .qr svg { width: 188px; height: 188px; padding: 12px; background: var(--hoja); border-radius: 16px; color: var(--ciruela); } .b-visor .qr .codigo { font-family: var(--f-display); font-size: 30px; letter-spacing: .12em; color: var(--vino); } .b-visor .leccion { display: grid; gap: 14px; padding: 16px; } .b-visor .leccion .puntos { display: flex; gap: 6px; } .b-visor .leccion .puntos i { flex: 1; height: 5px; border-radius: 3px; background: var(--papel-2); } .b-visor .leccion .puntos i.hecho { background: var(--vino); } .b-visor .leccion .puntos i.ahora { background: var(--oro); } .b-visor .leccion .pregunta { font-family: var(--f-display); font-size: var(--t-sub); line-height: 1.12; color: var(--vino); } .b-visor .leccion .respuestas { display: grid; gap: 8px; } .b-visor .leccion .respuestas span { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border-radius: 14px; background: var(--crema); font-weight: 700; border: 1.5px solid var(--linea); } .b-visor .leccion .respuestas span.bien { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-tinta); } /* estado: verde | oro | gris | rojo | azul. Los colores del semáforo dicen lo que pasó; el horizonte va en su propia etiqueta. */ .b-estado { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-tarjeta); background: var(--papel); } .b-estado .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--gris-claro); margin-top: 7px; flex: none; } .b-estado > div { flex: 1; min-width: 0; } .b-estado[data-estado="verde"] .punto { background: var(--verde); } .b-estado[data-estado="oro"] .punto, .b-estado[data-estado="espera"] .punto { background: var(--espera); } .b-estado[data-estado="rojo"] .punto { background: var(--rojo); } .b-estado[data-estado="azul"] .punto { background: var(--azul); } .b-estado[data-estado="verde"] { background: var(--verde-claro); color: var(--verde-tinta); } .b-estado[data-estado="rojo"] { background: var(--rojo-claro); color: var(--rojo); } .b-estado[data-estado="oro"], .b-estado[data-estado="espera"] { background: var(--espera-claro); color: var(--espera-tinta); } .b-estado[data-estado="azul"] { background: var(--azul-claro); color: var(--azul-tinta); } .b-estado h2 { font-size: var(--t-cuerpo); font-weight: 700; margin: 0; line-height: 1.3; } .b-estado h2 .horizonte { margin-left: 4px; vertical-align: 1px; } .b-estado p { margin: 3px 0 0; font-size: var(--t-apoyo); opacity: .9; } .b-estado .acciones { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .b-estado .btn { width: auto; min-height: var(--blanco); padding: 8px 16px; font-size: 15px; } .b-lista .item .ic .ico { width: 22px; height: 22px; } /* ---------- lo que se mueve (un reloj; sólo transform y opacity) ---------- */ [data-entra] { opacity: 0; transform: translateY(10px); } [data-entra].entra { animation: eq-entra var(--d-3) var(--suave) both; animation-delay: calc(var(--n, 0) * var(--escalon)); } /* Ya entró: si React reescribe su clase (un estado que cambia en su lugar: la pregunta contestada, el aviso cerrado) y se lleva `.entra`, el bloque no vuelve a esconderse (entra.js deja `data-entro`, que React no toca). */ [data-entra][data-entro]:not(.entra) { opacity: 1; transform: none; } /* Rebuilt in place: a screen a form sent back to itself (a save, a paint) is the same screen — entra.js puts her place back and marks its blocks `data-quieto`: they are simply there, no entrance (2026-10-28). */ [data-entra][data-quieto] { opacity: 1 !important; transform: none !important; animation: none !important; } @keyframes eq-entra { to { opacity: 1; transform: none; } } @keyframes eq-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes eq-crece { from { transform: scaleY(.05); } to { transform: none; } } /* «Una mesa te nombró»: el oro florece una vez desde la comilla, detrás de las palabras. */ .florece { position: relative; isolation: isolate; overflow: hidden; } .florece::after { content: ""; position: absolute; z-index: -1; top: -55%; right: -45%; width: 130%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(247, 190, 0, .5), rgba(247, 190, 0, .16) 55%, rgba(247, 190, 0, 0) 72%); opacity: 0; transform: scale(.3); animation: eq-florece var(--late) var(--suave) .35s 1 both; } @keyframes eq-florece { 0% { opacity: 0; transform: scale(.3); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.12); } } @media (prefers-reduced-motion: reduce) { [data-entra] { opacity: 1; transform: none; animation: none !important; } .florece::after, .play.sonando::after, .bar .v { animation: none !important; } } /* ---------- montos ocultos (G14): el ojo cambia cada .monto por cuatro puntos; el candado (PIN) es de bloques.js ---------- */ .ojo { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--blanco); height: var(--blanco); margin: -8px -10px -8px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--vino); cursor: pointer; } .ojo .ico { width: 24px; height: 24px; } html[data-ocultar] .ojo .abierto, html:not([data-ocultar]) .ojo .cerrado { display: none; } html[data-ocultar] .monto { position: relative; color: transparent !important; -webkit-text-fill-color: transparent; user-select: none; } html[data-ocultar] .monto * { color: transparent !important; -webkit-text-fill-color: transparent; } html[data-ocultar] .monto::after { content: "••••"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--f-texto); font-weight: 700; font-size: .62em; letter-spacing: .1em; line-height: 1; color: var(--c-monto, var(--vino)); -webkit-text-fill-color: var(--c-monto, var(--vino)); } html[data-ocultar] .item .end.monto::after, html[data-ocultar] .recibo b.monto::after { left: auto; right: 0; } .banda, .yday, .cita, .quote, .grow, .b-decision, .pill.vino, .btn { --c-monto: var(--sobre-vino); } .pill.oro, .btn.oro { --c-monto: var(--oro-tinta); } /* ---------- el candado de Dinero (PIN o huella; bloques.js lo abre con data-pin="") ---------- */ .pin-velo { position: fixed; inset: 0; z-index: 60; background: var(--velo-hoja); opacity: 0; transition: opacity var(--d-2) var(--suave); } .pin-velo.abierto { opacity: 1; } .pin-hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; display: grid; gap: 18px; justify-items: center; padding: 14px var(--orilla) calc(var(--abajo, env(safe-area-inset-bottom, 0px)) + 18px); background: var(--crema); color: var(--tinta); border-radius: 28px 28px 0 0; box-shadow: var(--sombra-hoja); transform: translateY(105%); transition: transform var(--d-3) var(--suave); font-family: var(--f-texto); } .pin-hoja.abierto { transform: none; } .pin-hoja .asa { width: 40px; height: 5px; border-radius: 3px; background: var(--papel-2); } .pin-hoja .cerrar { position: absolute; right: 12px; top: 10px; width: var(--blanco); height: var(--blanco); border: 0; border-radius: 50%; background: transparent; color: var(--gris); display: grid; place-items: center; cursor: pointer; } .pin-hoja .candado { width: 52px; height: 52px; border-radius: 16px; background: var(--vino); color: var(--crema); display: grid; place-items: center; } .pin-hoja h2 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 30px; line-height: 1; color: var(--vino); text-align: center; } .pin-hoja p { margin: -8px 0 0; font-size: var(--t-apoyo); color: var(--gris); text-align: center; font-weight: 600; } .pin-puntos { display: flex; gap: 16px; height: 20px; align-items: center; } .pin-puntos i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--vino); transition: transform var(--d-1) var(--resorte); } .pin-puntos i.lleno { background: var(--vino); transform: scale(1.08); } .pin-puntos.listo i { background: var(--oro); border-color: var(--oro); } .pin-puntos.mal { animation: eq-tiembla var(--d-2) var(--suave); } @keyframes eq-tiembla { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } } .pin-teclas { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px 26px; } .pin-tecla { width: 72px; height: 72px; border-radius: 50%; border: 0; background: var(--papel); color: var(--vino); font: 500 30px/1 var(--f-display); display: grid; place-items: center; cursor: pointer; transition: transform var(--d-1) var(--suave); } .pin-tecla:active { transform: scale(.94); background: var(--papel-2); } .pin-tecla.sin { background: transparent; } .pin-tecla .ico { width: 28px; height: 28px; } .pin-hoja .nota-pin { font-size: var(--t-nota); color: var(--gris); text-align: center; max-width: 300px; } /* ---------- ronda «mejores» (10 oct 2026): las cinco piezas que cuatro carriles habrían dibujado de cuatro maneras (/kit/#nuevas) ---------- */ /* 1 · El aviso que señala su lugar (EQU-1). Una línea cuenta los avisos; cada aviso es un chip-botón terracota que, al tocarlo, rodea con un aro su lugar en la rejilla (data-senala="" en el chip, data-senal="" en el lugar). Nada se arregla solo. */ .avisos { margin: 0 0 10px; font-size: var(--t-cuerpo); font-weight: 700; color: var(--espera-tinta); line-height: 1.3; } button.chip.aviso { min-height: var(--blanco); border-color: var(--espera); background: var(--espera-claro); color: var(--espera-tinta); text-align: left; line-height: 1.25; } button.chip.aviso[aria-pressed="true"] { background: var(--espera); border-color: var(--espera); color: var(--crema); } [data-senal] { position: relative; } .senalado { box-shadow: 0 0 0 2.5px var(--crema), 0 0 0 5px var(--espera); z-index: 1; } .senalado::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; box-shadow: 0 0 0 3px var(--espera); pointer-events: none; animation: eq-senala var(--late) var(--suave) 1 both; } @keyframes eq-senala { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } } /* 2 · La tira en tres (MUR-3): bien (Mucho + Bastante) · más o menos · mal (Poco + Nada), por porcentaje, sobre las cinco caras. Verde · gris · rojo, los mismos en la tira grande y en la chica de cada renglón; la chica sale sólo con 3 respuestas o más. */ .tercios { display: grid; gap: 10px; } .tercios .tira { display: flex; gap: 2px; height: 16px; border-radius: var(--r-pastilla); overflow: hidden; background: var(--papel-2); transform-origin: 0 50%; } .tercios .tira i { display: block; flex: var(--p, 1) 1 0; min-width: 4px; } .tercios .bien { background: var(--verde); } .tercios .masomenos { background: var(--gris-claro); } .tercios .mal { background: var(--rojo); } .tercios .dice { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: var(--t-nota); font-weight: 700; color: var(--tinta); } .tercios .dice span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .tercios .dice span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; } .tercios .dice .bien, .tercios .dice .masomenos, .tercios .dice .mal { background: none; } .tercios .dice .bien::before { background: var(--verde); } .tercios .dice .masomenos::before { background: var(--gris-claro); } .tercios .dice .mal::before { background: var(--rojo); } .tercios.chico { display: inline-grid; width: 88px; flex: none; } .tercios.chico .tira { height: 8px; gap: 1.5px; } .entra .tercios .tira, .tercios.entra .tira { animation: eq-crece-x var(--d-3) var(--suave) both; animation-delay: calc(var(--n, 0) * var(--escalon) + 120ms); } @keyframes eq-crece-x { from { transform: scaleX(.04); } to { transform: none; } } /* 3 · El mes en puntos (TIE-6): L M M J V S D, un punto por día y cuatro en la leyenda. El punto dice el día (trabajado, descanso, festivo); el aro terracota dice «con marca» y sólo ese día es botón (abre el día). Lo que no ha pasado, sin punto. */ .mes { background: var(--papel); border-radius: var(--r-tarjeta); padding: 12px 6px 8px; } .mes-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 8px 8px; font-size: 18px; font-weight: 700; } .mes-cab small { font-size: var(--t-nota); color: var(--gris); } .mes-semana, .mes-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; } .mes-semana span { padding: 0 0 6px; text-align: center; font-size: var(--t-nota); font-weight: 700; color: var(--gris); } .mes-dias > * { display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 50px; padding: 4px 0; border: 0; border-radius: 12px; background: transparent; font-size: var(--t-cuerpo); font-weight: 700; line-height: 1; color: var(--tinta); } .mes-dias i, .mes-leyenda i { display: block; width: 9px; height: 9px; border-radius: 50%; flex: none; } .mes-dias [data-dia="trabajado"] i, .mes-leyenda [data-dia="trabajado"] i { background: var(--vino); } .mes-dias [data-dia="descanso"] i, .mes-leyenda [data-dia="descanso"] i { box-shadow: inset 0 0 0 2px var(--gris-claro); } .mes-dias [data-dia="festivo"] i, .mes-leyenda [data-dia="festivo"] i { background: var(--azul); } .mes-dias [data-dia="sigue"] { color: var(--gris-medio); } .mes-dias [data-marca], .mes-leyenda [data-marca] i { box-shadow: inset 0 0 0 2px var(--espera); background: var(--espera-claro); color: var(--espera-tinta); } .mes-dias button[data-marca] { cursor: pointer; transition: transform var(--d-1) var(--suave); } .mes-dias button[data-marca]:active { transform: scale(.94); } /* En la app un día con checada es un enlace (abre el día sin JS): la misma celda, sin subrayado, y se hunde igual al tocarlo. */ .mes-dias > a { text-decoration: none; -webkit-tap-highlight-color: transparent; cursor: pointer; transition: transform var(--d-1) var(--suave); } .mes-dias > a:active { transform: scale(.94); } .mes-leyenda { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 10px 8px 4px; padding-top: 10px; border-top: 1px solid var(--linea); font-size: var(--t-nota); font-weight: 700; } .mes-leyenda span { display: flex; align-items: center; gap: 8px; } .mes-leyenda [data-marca] i { width: 18px; height: 18px; border-radius: 6px; } /* ---- D14 · ronda 3 (2026-10-11): Mis días (CONTRATO S13; persona.yo.dias, .calendario). El mes de días de la persona usa la misma rejilla: un día aprobado por venir, lleno de vino; uno ya tomado, sobre papel; uno que Buk tiene sin aprobar, en terracota; hoy, con su aro. Arriba, el mes y su cuenta con ‹ › (44 px), como el registro de Tiempo. ---- */ .mes-dias [data-dia="libre"], .mes-leyenda [data-dia="libre"] i { background: var(--vino); color: var(--crema); } .mes-dias [data-dia="tomado"], .mes-leyenda [data-dia="tomado"] i { background: var(--papel-2); color: var(--vino); } .mes-dias [data-dia="pendiente"], .mes-leyenda [data-dia="pendiente"] i { box-shadow: inset 0 0 0 2px var(--espera); background: var(--espera-claro); color: var(--espera-tinta); } .mes-leyenda :is([data-dia="libre"], [data-dia="tomado"], [data-dia="pendiente"]) i { width: 18px; height: 18px; border-radius: 6px; } .mes-leyenda [data-dia="tomado"] i { box-shadow: inset 0 0 0 1.5px var(--gris-claro); } .mes-dias [data-hoy] { box-shadow: inset 0 0 0 2px var(--vino); } .mes-dias [data-hoy][data-dia="libre"] { box-shadow: inset 0 0 0 2px var(--vino), inset 0 0 0 4px var(--crema); } .v2-mes .mes-cab { align-items: center; } .v2-mes .mes-cab .tx { display: grid; gap: 2px; min-width: 0; } .v2-mes .mes-cab .mover { display: flex; gap: 6px; flex: none; } .v2-mes .mes-cab .mover > * { width: var(--blanco); height: var(--blanco); border-radius: var(--r-pastilla); display: grid; place-items: center; } .v2-mes .mes-cab .mover a { background: var(--crema); color: var(--vino); text-decoration: none; -webkit-tap-highlight-color: transparent; } .v2-mes .mes-cab .mover a:active { transform: scale(.94); } .v2-mes .mes-cab .mover .ico { width: 20px; height: 20px; } /* El titular: «Te quedan 13 días» con el número en la letra de los números (el saldo de Buk); sin número, sólo el título. */ .v2-misdias-titular { padding: 0; } :is(h1, h2).frase.n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; font-size: 30px; } :is(h1, h2).frase.n .v2-numero { font-size: var(--t-numero, 72px); line-height: .95; } .v2-misdias-titular .lede { margin-top: 8px; } /* El bloque de días: la línea de la ley, lo que tomaste y lo que viene («rango · N días»), o una línea si Buk no tiene nada. */ .v2-misdias { margin-top: 14px; } .v2-misdias .panel { display: grid; gap: 8px; } .v2-misdias .ley { display: grid; gap: 2px; } .v2-misdias .ley b { font-size: var(--t-cuerpo); } .v2-misdias .ley span, .v2-misdias .sub { font-size: var(--t-apoyo); font-weight: 700; color: var(--gris); } .v2-misdias .sub { margin: 8px 0 0; } .v2-misdias .tomados { display: grid; gap: 6px; } .v2-misdias .tomados > div { display: flex; align-items: baseline; gap: 10px; font-size: var(--t-apoyo); } .v2-misdias .tomados span { flex: 1; min-width: 0; color: var(--tinta); font-weight: 600; } .v2-misdias .tomados b { color: var(--vino); white-space: nowrap; font-variant-numeric: tabular-nums; } .v2-misdias .tomados .pill { display: table; margin: 6px 0 0; font-style: normal; } .v2-misdias .vacio, .v2-misdias .nota { margin: 0; font-size: var(--t-apoyo); font-weight: 600; color: var(--gris); } .por-confirmar { margin: 0 0 10px; font-size: var(--t-cuerpo); font-weight: 700; color: var(--espera-tinta); } /* 4 · «Bajar» (APR-6): un aro chico al borde derecho de un renglón pendiente. El renglón y el aro son dos botones hermanos dentro de .con-bajar (nunca un botón dentro de otro); al tocarlo el aro se llena y la segunda línea dice data-bajar. Hecha y la de hoy: sin aro. */ .con-bajar { display: flex; align-items: center; gap: 2px; } .con-bajar > .step, .con-bajar > .paso, .con-bajar > .item { flex: 1; min-width: 0; } button.bajar { display: grid; justify-items: center; align-content: center; gap: 4px; width: 60px; min-height: 56px; padding: 4px 0; flex: none; border: 0; background: transparent; color: var(--vino); font-size: var(--t-nota); font-weight: 700; line-height: 1; cursor: pointer; } .bajar .aro { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--vino); } .bajar .aro::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--vino); transform: scale(0); transition: transform var(--d-2) var(--resorte); } .bajar .aro .ico { position: relative; width: 16px; height: 16px; color: var(--crema); opacity: 0; transition: opacity var(--d-1) var(--suave); } .bajar[aria-pressed="true"] .aro::before { transform: none; } .bajar[aria-pressed="true"] .aro .ico { opacity: 1; transition-delay: .12s; } /* 5 · La línea del fijado (MUR-5): sobre el título de UN renglón del muro, con la chincheta: hasta cuándo y para quién. Los demás, sin línea. */ .fijado { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; font-size: var(--t-nota); font-weight: 700; line-height: 1.25; color: var(--vino); } .fijado .ico { width: 17px; height: 17px; } @media (prefers-reduced-motion: reduce) { .senalado::after, .tercios .tira { animation: none !important; } } /* ---------- ronda «aprender» (10 oct 2026): las cinco piezas de Aprender que cuatro carriles habrían dibujado de cuatro maneras (/kit/#aprender) ---------- */ /* Un botón apagado espera a que la persona elija (el selector de público lo enciende); nunca se ve como si ya se pudiera. */ .btn[disabled], .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; } .btn[disabled]:active { transform: none; } /* 1 · La constancia. Una tarjeta, dos tamaños, una variante pública. Curso · «Constancia de la casa» · nombre de pila · mes · folio chico · quién capacita y quién evalúa, por puesto · lo que dijo quien evaluó (sólo si la persona lo incluye) · «Verificar». Nunca una calificación, nunca un conteo, nunca un lugar. El sello de oro es lo único dorado: es donde la casa firma. .post = el tamaño del muro y de la imagen que se comparte (672 × 352, ≈ 20 KB); .publica = la página de verificar (nombre «Regina G.», quien evalúa sólo por puesto, sin sucursal; lo que dijo quien evaluó no existe ahí). */ .constancia { position: relative; min-width: 0; display: grid; gap: 4px; padding: 16px 16px 14px; border-radius: var(--r-tarjeta); background: var(--hoja); border: 1.5px solid var(--linea); color: var(--tinta); } .constancia > * { margin: 0; } .c-cab { display: flex; align-items: center; gap: 10px; min-width: 0; } .c-sello { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--oro); color: var(--ciruela); flex: none; } .c-sello .ico { width: 21px; height: 21px; stroke-width: 2.1; } .c-de { font-size: var(--t-nota); font-weight: 700; color: var(--vino); line-height: 1.2; } .c-folio { margin-left: auto; font-size: var(--t-nota); font-weight: 700; color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .02em; } .c-curso { margin-top: 8px !important; font-family: var(--f-display); font-weight: 500; font-size: var(--t-sub); line-height: 1.08; color: var(--vino); } .c-quien { font-size: var(--t-cuerpo); font-weight: 700; line-height: 1.3; } .c-cubre { font-size: var(--t-apoyo); font-weight: 600; color: var(--gris); line-height: 1.35; } .c-firmas { display: grid; gap: 2px; margin-top: 8px !important; padding-top: 10px; border-top: 1px solid var(--linea); font-size: var(--t-apoyo); font-weight: 600; color: var(--gris); line-height: 1.35; } .c-firmas b { font-weight: 700; color: var(--tinta); } .c-dijo { margin-top: 6px !important; font-size: var(--t-cuerpo); font-weight: 700; color: var(--vino); line-height: 1.35; } .c-nota { margin-top: 6px !important; display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-apoyo); font-weight: 700; color: var(--espera-tinta); line-height: 1.35; } .c-nota .ico { width: 18px; height: 18px; margin-top: 2px; } .c-estado { justify-self: start; margin-top: 6px !important; } .c-estado[data-estado="vigente"] { background: var(--verde-claro); color: var(--verde-tinta); } .c-estado[data-estado="vence"] { background: var(--espera-claro); color: var(--espera-tinta); } .c-estado[data-estado="vencida"] { background: var(--papel-2); color: var(--gris); } .c-estado[data-estado="anulada"] { background: var(--rojo-claro); color: var(--rojo); } .c-verificar { position: relative; justify-self: start; display: inline-flex; align-items: center; gap: 7px; min-height: var(--blanco); margin-top: 10px; padding: 8px 16px 8px 12px; border: 1.5px solid var(--vino); border-radius: var(--r-pastilla); background: transparent; color: var(--vino); font-size: var(--t-apoyo); font-weight: 700; cursor: pointer; transition: transform var(--d-1) var(--suave); } .c-verificar .ico { width: 19px; height: 19px; } .c-verificar:active { transform: scale(.97); } /* el tamaño del muro: la tarjeta como lámina de vino, la misma que viaja como imagen */ .constancia.post { gap: 6px; padding: 18px 18px 16px; border: 0; border-radius: var(--r-grande); background: var(--vino); color: var(--sobre-vino); width: 100%; aspect-ratio: 672 / 352; align-content: start; } /* (min-width: 0 y width: 100%: sin ellos, dentro de un grid o un flex la proporción empuja el ancho y la pantalla se desplaza de lado) */ .constancia.post .c-de { color: var(--sobre-vino-oro); } .constancia.post .c-folio { color: var(--sobre-vino-2); } .constancia.post .c-curso { font-size: 32px; line-height: 1.02; color: var(--sobre-vino); } .constancia.post .c-quien { color: var(--sobre-vino); } .constancia.post .c-cubre, .constancia.post .c-firmas { color: var(--sobre-vino-2); } .constancia.post .c-firmas { border-top-color: var(--sobre-vino-linea); } .constancia.post .c-firmas b, .constancia.post .c-dijo { color: var(--sobre-vino); } .constancia.post .c-verificar { border-color: var(--sobre-vino-borde); color: var(--sobre-vino); } .constancia.post .c-nota { color: var(--sobre-vino-oro); } .constancia.post .c-estado { box-shadow: 0 0 0 1.5px var(--sobre-vino-linea); } /* la variante pública: lo que dijo quien evaluó no puede salir aquí aunque se copie el renglón */ .constancia.publica .c-dijo, .constancia.publica .c-verificar { display: none !important; } /* la cabeza de la publicación (el muro): quién la compartió y qué terminó; la tarjeta va abajo */ .c-autor { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; } .c-autor .txt { display: grid; min-width: 0; line-height: 1.3; } .c-autor b { font-size: var(--t-cuerpo); } .c-autor small { font-size: var(--t-apoyo); font-weight: 600; color: var(--gris); } /* 2 · El requisito. Un renglón por lo que pide un escalón: su estado con marca y color, quién firmó y cuándo, «por tu cuenta» si lo tomó así, y el botón de la lección como hermano (nunca un botón dentro de otro). Estados: cumple (✓ verde) · evaluada (falta la firma: terracota) · pendiente (aro) · se-abre (candado). .breve = los renglones de RH y de la jefa: el nombre del requisito y la firma que se debe, en una línea; la fracción de lecciones, la lección y la etiqueta no existen ahí. */ .requisitos { display: block; background: var(--papel); border-radius: var(--r-tarjeta); overflow: hidden; } .requisito { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 60px; padding: 12px 16px; } .requisito + .requisito { border-top: 1px solid var(--linea); } .requisito.hijo { padding-left: 56px; min-height: 52px; } .requisito.hijo .r-marca { width: 24px; height: 24px; } .requisito.hijo .r-marca .ico { width: 15px; height: 15px; } .r-marca { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--crema); box-shadow: inset 0 0 0 2px var(--gris-claro); color: var(--gris); } .r-marca .ico { width: 18px; height: 18px; stroke-width: 2.4; } [data-req="cumple"] > .r-marca { background: var(--verde); box-shadow: none; color: var(--crema); } [data-req="evaluada"] > .r-marca { background: var(--espera-claro); box-shadow: inset 0 0 0 2px var(--espera); color: var(--espera-tinta); } [data-req="se-abre"] > .r-marca { background: var(--papel-2); box-shadow: none; color: var(--gris); } .r-txt { flex: 1 1 calc(100% - 42px); min-width: 0; display: grid; gap: 2px; } /* el botón de un requisito baja bajo el texto, alineado con él: el texto conserva todo su ancho aunque el botón diga «Renovarla» */ .requisito > .r-leccion { margin-left: 42px; } .requisito.hijo > .r-leccion { margin-left: 36px; } .r-que { font-size: var(--t-cuerpo); font-weight: 700; line-height: 1.25; } .r-dice { font-size: var(--t-apoyo); font-weight: 600; color: var(--gris); line-height: 1.35; } [data-req="cumple"] .r-dice { color: var(--verde-tinta); } [data-req="evaluada"] .r-dice { color: var(--espera-tinta); } [data-req="se-abre"] .r-que { color: var(--gris); } .r-avance { font-weight: 700; color: var(--vino); } .por-tu-cuenta { justify-self: start; display: inline-flex; align-items: center; margin-top: 4px; padding: 3px 10px; border-radius: var(--r-pastilla); background: var(--rosa); color: var(--vino); font-size: var(--t-nota); font-weight: 700; line-height: 1.3; } .r-leccion { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: var(--blanco); padding: 6px 14px 6px 10px; flex: none; border: 1.5px solid var(--vino); border-radius: var(--r-pastilla); background: transparent; color: var(--vino); font-size: var(--t-apoyo); font-weight: 700; cursor: pointer; transition: transform var(--d-1) var(--suave); } .r-leccion .ico { width: 16px; height: 16px; } .r-leccion:active { transform: scale(.97); } .requisitos.breve { display: flex; flex-wrap: wrap; gap: 8px; background: transparent; border-radius: 0; overflow: visible; } .requisitos.breve .requisito { display: inline-flex; gap: 8px; min-height: 36px; padding: 5px 12px 5px 6px; border: 0; border-radius: 18px; background: var(--crema); box-shadow: inset 0 0 0 1.5px var(--linea); } .requisitos.breve .r-marca { width: 24px; height: 24px; } .requisitos.breve .r-marca .ico { width: 14px; height: 14px; } .requisitos.breve .requisito { flex-wrap: nowrap; } .requisitos.breve .r-txt { display: block; flex: 0 1 auto; min-width: 0; } .requisitos.breve .r-que { font-size: var(--t-apoyo); } .requisitos.breve .r-dice { display: inline; } .requisitos.breve .r-dice::before { content: " · "; } .requisitos.breve .r-avance, .requisitos.breve .r-leccion, .requisitos.breve .por-tu-cuenta { display: none !important; } /* 3 · Los dos chips del puesto. «Lo pide: » (lleno de vino): un requisito del escalón, nunca «opcional». «Cuenta para: » (rosa): un curso opcional que suma y nunca cuenta en contra. «ya en tu ruta» (verde) cuando el curso ya es tuyo. */ .lo-pide, .cuenta-para, .en-tu-ruta { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px 4px 9px; border: 0; border-radius: var(--r-pastilla); font-size: var(--t-nota); font-weight: 600; line-height: 1.25; text-align: left; vertical-align: middle; } .lo-pide b, .cuenta-para b { font-weight: 700; } .lo-pide .ico, .cuenta-para .ico, .en-tu-ruta .ico { width: 16px; height: 16px; stroke-width: 2.3; } .lo-pide { background: var(--vino); color: var(--crema); } .cuenta-para { background: var(--rosa); color: var(--vino); } .en-tu-ruta { background: var(--verde-claro); color: var(--verde-tinta); font-weight: 700; } button.lo-pide, button.cuenta-para { min-height: var(--blanco); cursor: pointer; } /* 4 · ¿Quién la ve? Tres renglones altos (Mi casa · Mi equipo · Sólo yo), ninguno elegido al llegar; el botón de la acción sigue apagado hasta que la persona toca uno (bloques.js: data-publico-op enciende data-publico-accion y le pone el texto de esa opción). */ .publico { display: grid; gap: 10px; } .publico-t { margin: 0 0 2px; font-size: 18px; font-weight: 700; color: var(--tinta); } .publico-op { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 12px 16px; border: 2px solid var(--linea); border-radius: 16px; background: var(--hoja); color: var(--tinta); text-align: left; cursor: pointer; transition: transform var(--d-1) var(--suave), border-color var(--d-1) var(--suave), background-color var(--d-1) var(--suave); } .publico-op:active { transform: scale(.985); } .publico-op .p-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--papel); color: var(--vino); flex: none; } .publico-op .p-txt { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.25; } .publico-op .p-txt b { font-size: var(--t-cuerpo); font-weight: 700; } .publico-op .p-txt small { font-size: var(--t-apoyo); font-weight: 600; color: var(--gris); } .publico-op .p-radio { width: 26px; height: 26px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px var(--gris-claro); transition: box-shadow var(--d-1) var(--suave); } .publico-op[aria-checked="true"] { border-color: var(--vino); background: var(--papel); } .publico-op[aria-checked="true"] .p-ic { background: var(--vino); color: var(--crema); } .publico-op[aria-checked="true"] .p-radio { background: var(--vino); box-shadow: inset 0 0 0 2px var(--vino), inset 0 0 0 7px var(--papel); } .publico-pista { margin: 0; font-size: var(--t-apoyo); font-weight: 600; color: var(--gris); text-align: center; } .publico.elegido .publico-pista { visibility: hidden; } /* 5 · «Quién lo ve»: la forma de persona.yo.queve (G15) en una línea, con el ojo; los lectores siempre en este orden: Tú · Tu jefa · RH · Compañeros · un quinto cuando existe («Quien tenga el enlace», «Quien firma tu paso»). Como botón lleva a la tabla completa. */ .quien-ve { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: var(--t-apoyo); font-weight: 600; line-height: 1.45; color: var(--gris); } .quien-ve > .ico { width: 20px; height: 20px; margin-top: 2px; color: var(--vino); } .quien-ve b { font-weight: 700; color: var(--tinta); } button.quien-ve { width: 100%; min-height: var(--blanco); padding: 8px 0; border: 0; background: transparent; text-align: left; cursor: pointer; } button.quien-ve > .flecha { width: 18px; height: 18px; margin: 2px 0 0 auto; color: var(--gris-claro); flex: none; } .r-titulo { margin: 0 0 8px; font-size: var(--t-cuerpo); font-weight: 700; line-height: 1.3; color: var(--tinta); } .r-titulo small { font-size: var(--t-apoyo); font-weight: 600; color: var(--gris); } .item .txt .chips { margin-top: 8px; gap: 6px; } /* =================================================================================================================== App real (tagers-equipo) · equipo-design, ronda 1 (2026-10-10). Lo que la demo pintaba como