/* ===================================================================== BCN Surf School · componentes.css Fuente única de los componentes del sistema «Menos es más». Norma: DESIGN.md. Copiado literal de la CAPA 2 de .claude/banco/propuestas/minimal/minimal.css (23-sep-2026, fundación F3). Desde aquí, todo cambio de componente se hace en ESTE fichero y se documenta en DESIGN.md › Components; minimal.css queda congelado como referencia de lo aprobado. Necesita delante /fonts/marca.css y /estilos-base.css (tokens CAPA 1 y modo ligero CAPA 1b). Solo lo enlazan las páginas migradas: . Sección 20 (al final): piezas compartidas de F3b (DESIGN.md › Piezas compartidas). ===================================================================== */ /* ===================================================================== CAPA 2 · COMPONENTES → componentes.css Solo lo enlazan las páginas migradas: . ===================================================================== */ /* ---------- 1. Base de la página migrada ---------- */ .v2 { font-family: var(--f-cuerpo); font-size: var(--fs-17); font-weight: var(--p-texto); line-height: var(--lh-ui); color: var(--c-texto); background: var(--c-fondo); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; font-variant-numeric: tabular-nums; accent-color: var(--c-turquesa-h); caret-color: var(--c-turquesa-h); /* como en la web */ } /* Gana a body.app de estilos-base (degradados de fondo) */ body.app.v2 { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--c-fondo); color: var(--c-texto); font-family: var(--f-cuerpo); } .v2.con-barra { --alto-barra: var(--barra-h); } .v2.con-accion { --alto-accion: var(--accion-h); } /* Reinicios con :where(): especificidad (0,0,1), nunca ganan a una clase .ui-* */ :where(.v2), :where(.v2) *, :where(.v2) *::before, :where(.v2) *::after { box-sizing: border-box; } :where(.v2) a { color: inherit; text-decoration: none; } :where(.v2) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :where(.v2) :is(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; } :where(.v2) :is(h1, h2, h3, h4) { font-family: inherit; font-size: inherit; font-weight: var(--p-fuerte); letter-spacing: normal; color: inherit; text-wrap: balance; } :where(.v2) :is(ul, ol) { padding: 0; list-style: none; } .v2 ::selection { background: var(--c-turquesa-halo); color: var(--c-tinta); } /* 13,5:1 */ :where(.v2) :focus:not(:focus-visible) { outline: none; } :where(.v2) :focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; } .ui-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } .ui-ico--16 { width: 16px; height: 16px; } .ui-ico--24 { width: 24px; height: 24px; } .ui-marina { color: var(--c-marina); } .ui-num { font-variant-numeric: tabular-nums; } .ui-solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Contenedor de pantalla: margen lateral, zona segura arriba y hueco para lo fijo de abajo */ .ui-contenido { width: 100%; max-width: 640px; margin: 0 auto; padding: calc(var(--zona-arriba) + 8px) var(--margen) calc(var(--alto-barra) + var(--alto-accion) + var(--zona-abajo) + 24px); } /* ---------- 4. Cabecera ---------- Raíz (.ui-cab): fecha + saludo + dos iconos. Sección (.ui-cab--seccion): título + UNA acción (filtro «Todas ▾» o un icono). Ninguna de las dos es fija ni lleva volver. Paso (.ui-cab-paso): volver + título corto centrado (o vacío si debajo va un título grande); se queda pegada arriba al hacer scroll, opaca, sin desenfoque. */ .ui-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 8px; } .ui-cab--seccion { align-items: center; } .ui-cab-txt { min-width: 0; } .ui-cab-fecha { font-size: var(--fs-15); color: var(--c-texto-2); } .ui-cab-titulo { font: var(--p-display) var(--fs-titulo)/var(--lh-titulo) var(--f-display); letter-spacing: -.005em; word-spacing: var(--ws-display); color: var(--c-tinta); margin-top: 2px; text-wrap: balance; overflow-wrap: anywhere; } .ui-cab-acciones { display: flex; gap: 2px; margin-right: -10px; flex: none; } .ui-cab-paso { position: sticky; top: 0; z-index: var(--z-cabecera); display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; min-height: 44px; background: var(--c-fondo); /* anula el relleno superior de .ui-contenido y lo lleva dentro: al pegarse, tapa la zona del notch */ margin: calc(-1 * (var(--zona-arriba) + 8px)) -10px 0; padding-top: calc(var(--zona-arriba) + 8px); } .ui-cab-paso-tit { text-align: center; font-size: var(--fs-17); font-weight: var(--p-fuerte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ui-cab-paso-sub { display: block; font-size: var(--fs-13); font-weight: var(--p-texto); color: var(--c-texto-2); } /* Botón de icono: sin caja, 44 px de toque */ .ui-btn-ico { position: relative; display: inline-grid; place-items: center; width: var(--toque); height: var(--toque); flex: none; border-radius: var(--r-redondo); color: var(--c-marina); transition: background-color var(--dur-estado) var(--ease-out); } .ui-btn-ico .ui-ico { width: 24px; height: 24px; } .ui-btn-ico:active { background: var(--c-marina-suave); } .ui-insignia { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: var(--r-redondo); background: var(--c-marina); box-shadow: 0 0 0 2px var(--c-fondo); } /* Título de bloque: frase normal, nada de antetítulos en mayúsculas */ .ui-bloque { margin-top: var(--bloque); } .ui-bloque-tit { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--fs-17); font-weight: var(--p-fuerte); margin-bottom: 10px; } /* ---------- 5. Tarjeta de próxima clase (la ÚNICA tarjeta del inicio) ---------- */ .ui-tarjeta { background: var(--c-superficie); border-radius: var(--r-control); } .ui-proxima { position: relative; display: block; padding: 16px 16px 14px; border-radius: var(--r-control) var(--r-control) 0 0; } /* El único dibujo del inicio: el pictograma de la actividad, en línea marina y sin tesela */ .ui-proxima-picto { position: absolute; top: 16px; right: 14px; width: 30px; height: 30px; fill: none; stroke: var(--c-marina); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .ui-proxima > .ui-proxima-act, .ui-proxima > .ui-proxima-cuando { padding-right: 40px; } .ui-proxima:active { background: var(--c-marina-suave); } .ui-proxima-act { font-size: var(--fs-20); font-weight: var(--p-fuerte); line-height: 1.2; } .ui-proxima-cuando { margin-top: 4px; font-size: var(--fs-17); color: var(--c-texto-2); } .ui-proxima-cuando .ui-hora { font-size: inherit; } .ui-proxima-olas { margin-top: 10px; } .ui-proxima-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin: 0 16px; border-top: 1px solid var(--c-regla); } .ui-proxima-sitio { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--c-texto); } .ui-proxima-sitio .ui-ico { color: var(--c-marina); } /* Hora: Satoshi en marina, cifras tabulares, tamaño contenido. Nunca Clash negra */ .ui-hora { font-family: var(--f-cuerpo); font-weight: var(--p-fuerte); color: var(--c-marina); font-variant-numeric: tabular-nums; letter-spacing: -.005em; } /* ---------- 6. Botones ---------- */ .ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control); padding: 0 20px; border-radius: var(--r-control); font-size: var(--fs-17); font-weight: var(--p-fuerte); line-height: 1.2; text-align: center; transition: background-color var(--dur-estado) var(--ease-out), transform var(--dur-estado) var(--ease-out); } .ui-btn:active { transform: scale(.98); } .ui-btn--bloque { display: flex; width: 100%; } .ui-btn--principal { background: var(--c-accion); color: var(--c-accion-txt); } .ui-btn--principal:active { background: var(--c-accion-pulsada); } /* Alegre: el principal en turquesa con texto tinta (10,4:1; pulsado 9,1:1), como el «Pagar» de la web. SOLO para cerrar una compra o una reserva del alumno («Pagar» o «Reservar» del paso final, «Comprar bono», «Comprar pack», «Continuar al pago», «Canjear»…) y el «Reservar clase» del inicio del alumno. Uno por pantalla como mucho y nunca en una pantalla de trabajo. Solo cambia los tokens: el deshabilitado (arena 2 + tinta 2) y el ocupado salen de sus reglas de siempre. */ .ui-btn--alegre { --c-accion: var(--c-turquesa); --c-accion-pulsada: var(--c-turquesa-pulsado); --c-accion-txt: var(--c-tinta); } .ui-btn--secundario { background: var(--c-marina-suave); color: var(--c-marina); } .ui-btn--secundario:active { background: var(--c-marina-medio); } .ui-btn[disabled], .ui-btn[aria-disabled="true"] { background: var(--c-arena-2); color: var(--c-tinta-2); transform: none; cursor: default; } @media (hover: hover) and (pointer: fine) { .ui-btn--principal:hover { background: var(--c-accion-pulsada); } .ui-btn--secundario:hover { background: var(--c-marina-medio); } } /* Enlace: marina, sin subrayado hasta el foco; 44 px de toque aunque se vea pequeño */ .ui-enlace { display: inline-flex; align-items: center; gap: 2px; min-height: var(--toque); color: var(--c-marina); font-weight: var(--p-texto); } .ui-enlace .ui-ico { width: 16px; height: 16px; } .ui-enlace:focus-visible { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* «Todas ▾»: el filtro de actividad sale de la pantalla y vive en una hoja */ .ui-filtro { display: inline-flex; align-items: center; min-height: var(--toque); flex: none; } .ui-filtro-in { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px 0 14px; border-radius: var(--r-pastilla); background: var(--c-marina-suave); color: var(--c-marina); font-size: var(--fs-15); font-weight: var(--p-texto); transition: background-color var(--dur-estado) var(--ease-out); } .ui-filtro-in .ui-ico { width: 16px; height: 16px; stroke-width: 2; } .ui-filtro:active .ui-filtro-in { background: var(--c-marina-medio); } /* ---------- 7. Tira de días a lo Apple ---------- */ .ui-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 16px -6px 0; padding-bottom: 6px; border-bottom: 1px solid var(--c-regla); } .ui-dia { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 64px; padding: 2px 0 4px; } .ui-dia-sem { font-size: var(--fs-12); font-weight: var(--p-texto); color: var(--c-texto-2); line-height: 16px; } .ui-dia-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-redondo); font-size: var(--fs-17); font-weight: var(--p-texto); color: var(--c-tinta); transition: background-color var(--dur-estado) var(--ease-out), color var(--dur-estado) var(--ease-out); } .ui-dia-punto { width: 4px; height: 4px; border-radius: var(--r-redondo); visibility: hidden; } /* sin puntos (notas de Nacho, 23-sep): el hueco se queda y la tira no salta */ .ui-dia--hoy .ui-dia-num { color: var(--c-marina); font-weight: var(--p-fuerte); } /* Día sin clases: letra y número en hormigón (4,3:1 sobre arena, ≥ 3:1) y «sin clases» en su aria-label. Sigue siendo tocable. Hoy sin clases: apagado, pero en 700 */ .ui-dia--vacio .ui-dia-num, .ui-dia--vacio .ui-dia-sem { color: var(--c-hormigon); } /* Día elegido: turquesa con el número en tinta (10,4:1) y un anillo de turquesa hondo (4,9:1 sobre arena): el estado se ve también en gris (WCAG 1.4.11). Así «hoy» (número marina) y «elegido» no se confunden */ .ui-dia[aria-pressed="true"] .ui-dia-num { background: var(--c-turquesa); color: var(--c-tinta); font-weight: var(--p-fuerte); box-shadow: inset 0 0 0 1.5px var(--c-turquesa-h); } .ui-dia:active .ui-dia-num { background: var(--c-marina-suave); } .ui-dia[aria-pressed="true"]:active .ui-dia-num { background: var(--c-turquesa-pulsado); } /* ---------- 8. Filas ---------- */ /* Encabezado de día dentro de una lista */ .ui-lista-cab { margin: 24px 0 2px; font-size: var(--fs-15); font-weight: var(--p-fuerte); color: var(--c-texto-2); } .ui-lista-cab:first-child { margin-top: 20px; } /* Lista de clases de un día: contenedor sin estilo propio (las filas llevan sus reglas) */ .ui-lista { display: block; } /* Fila de clase: hora · nombre · precio · chevron. Sin caja: solo reglas finas */ .ui-clase { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 14px; align-items: center; column-gap: 12px; min-height: var(--fila); padding: 10px 0; border-bottom: 1px solid var(--c-regla); color: var(--c-texto); transition: background-color var(--dur-estado) var(--ease-out); } .ui-clase:last-child { border-bottom: 0; } .ui-clase .ui-hora { font-size: var(--fs-17); } .ui-clase-nombre { font-size: var(--fs-17); font-weight: var(--p-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-clase-nota { display: block; margin-top: 2px; font-size: var(--fs-15); color: var(--c-texto-2); } .ui-clase-precio { font-size: var(--fs-17); font-weight: var(--p-texto); color: var(--c-texto); } .ui-clase > .ui-ico { width: 14px; height: 14px; color: var(--c-chevron); stroke-width: 2.25; } .ui-clase:active { background: var(--c-marina-suave); box-shadow: -8px 0 0 var(--c-marina-suave), 8px 0 0 var(--c-marina-suave); } /* Ya empezó: atenuada, sin chip, sin precio, no se toca */ .ui-clase--pasada { color: var(--c-texto-2); pointer-events: none; } .ui-clase--pasada .ui-hora { color: var(--c-texto-2); font-weight: var(--p-texto); } /* Completa: se lee, pero no invita */ .ui-clase--completa .ui-clase-nombre, .ui-clase--completa .ui-clase-precio { color: var(--c-texto-2); } /* Etiquetas de excepción: texto, no pastilla. Solo cuando cambian la decisión */ .ui-etq { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-15); font-weight: var(--p-texto); color: var(--c-texto-2); } .ui-etq--aviso { color: var(--c-aviso); } .ui-etq--error { color: var(--c-error); } .ui-etq--bueno { color: var(--c-turquesa-h); } /* 5,4:1 sobre hueso · 4,9:1 sobre arena */ /* «Olas confirmadas» / «Surf confirmado» / «Finalizada»: punto «luz de mar», centro hondo y halo turquesa de 3 px (decorativo). El halo lo distingue de la bolita lisa de Surf #2F9C93. Solo aspecto: qué dato decide la etiqueta, dónde sale y qué dice no cambia */ .ui-etq--bueno::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-redondo); background: var(--c-turquesa-h); box-shadow: 0 0 0 3px var(--c-turquesa-halo); flex: none; } /* Grupo (lista agrupada sobre hueso): filas con separador sangrado */ .ui-grupo { background: var(--c-superficie); border-radius: var(--r-control); overflow: hidden; } /* Lo tuyo: «Tu plan» en Cuenta, en turquesa suave. Uno por pantalla y nunca junto a un botón alegre (por eso «Tu próxima clase» del inicio se queda en hueso). Iconos marina (10,4:1) y cifras en tinta 2 (7,3:1): el dinero no se colorea */ .ui-grupo--destacado { background: var(--c-turquesa-suave); } .ui-fila { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-height: 52px; padding: 10px 16px; color: var(--c-texto); transition: background-color var(--dur-estado) var(--ease-out); } .ui-fila + .ui-fila::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--c-regla); } .ui-fila--icono + .ui-fila::before, .ui-fila--icono + .ui-fila--icono::before { left: 54px; } .ui-fila > .ui-ico { width: 24px; height: 24px; color: var(--c-marina); } .ui-fila--sin-icono { grid-template-columns: minmax(0, 1fr) auto; } .ui-fila-tit { display: block; font-size: var(--fs-17); font-weight: var(--p-texto); } .ui-fila-sub { display: block; margin-top: 1px; font-size: var(--fs-15); color: var(--c-texto-2); line-height: 1.35; } .ui-fila-valor { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-17); color: var(--c-texto-2); white-space: nowrap; } .ui-fila-valor .ui-chev { width: 14px; height: 14px; color: var(--c-chevron); stroke-width: 2.25; } a.ui-fila:active, label.ui-fila:active, button.ui-fila:active { background: var(--c-marina-suave); } button.ui-fila { width: 100%; text-align: left; } .ui-fila[aria-disabled="true"] .ui-fila-tit { color: var(--c-texto-2); } /* Fila de plan resumido: una línea tocable con todo el plan dentro. El resumen nunca baja a una segunda línea: si no cabe, se corta y el detalle está a un toque */ .ui-plan > span { min-width: 0; } .ui-plan .ui-fila-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ui-plan .ui-fila-sub b { font-weight: var(--p-texto); color: var(--c-texto); } /* ---------- 9. Controles ---------- */ /* Interruptor: encendido en turquesa hondo (--c-encendido) con el pomo hueso (5,4:1). Con turquesa claro el pomo se quedaba en 1,6:1. En el pase de lista, «presente» se lee verde mar: es lo bueno */ .ui-switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 51px; height: 31px; margin: 0; border-radius: var(--r-pastilla); background: var(--c-arena-2); box-shadow: inset 0 0 0 1px rgb(var(--c-tinta-rgb) / .14); cursor: pointer; transition: background-color 220ms var(--ease-out); } .ui-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: var(--r-redondo); background: var(--c-hueso); box-shadow: 0 2px 4px rgb(var(--c-tinta-rgb) / .22), 0 0 0 .5px rgb(var(--c-tinta-rgb) / .06); transition: transform 220ms var(--ease-out); } .ui-switch:checked, .ui-switch[aria-checked="true"] { background: var(--c-encendido); box-shadow: none; } .ui-switch:checked::after, .ui-switch[aria-checked="true"]::after { transform: translateX(20px); } .ui-switch:disabled { opacity: .45; cursor: default; } /* También sobre

12 alumnos

*/ .ui-buscador { display: block; } .ui-buscador-caja { position: relative; } .ui-buscador-caja > .ui-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c-texto-2); pointer-events: none; } .ui-buscador-ctrl { display: block; width: 100%; height: 44px; margin: 0; padding: 0 44px 0 44px; border-radius: var(--r-control); background: var(--c-hueso); border: 1px solid var(--c-borde-campo); color: var(--c-tinta); font: var(--p-texto) max(16px, var(--fs-17))/1.3 var(--f-cuerpo); -webkit-appearance: none; appearance: none; transition: border-color var(--dur-estado) var(--ease-out), box-shadow var(--dur-estado) var(--ease-out); } .ui-buscador--form .ui-buscador-ctrl { height: var(--control); } .ui-buscador-ctrl::placeholder { color: var(--c-hormigon); opacity: 1; } .ui-buscador-ctrl:focus { outline: none; border-color: var(--c-foco); box-shadow: 0 0 0 3px var(--c-turquesa-halo); } .ui-buscador-ctrl::-webkit-search-cancel-button, .ui-buscador-ctrl::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .ui-buscador-borrar { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--c-texto-2); } .ui-buscador-borrar .ui-ico { width: 20px; height: 20px; } .ui-buscador-ctrl:placeholder-shown ~ .ui-buscador-borrar, .ui-buscador-borrar[hidden] { display: none; } .ui-buscador-recuento { margin: 6px 2px 0; font-size: var(--fs-13); line-height: 1.4; color: var(--c-texto-2); } .ui-buscador-recuento:empty { display: none; } /* 20.2 Sugerencias bajo el buscador (role="listbox"): máximo 6 (lo corta el JS; sin scroll propio). La activa (flechas) en marina suave: aria-selected="true" o .ui-fila--activa. «Sin resultados» (.ui-sugerencias-nada) ≠ «No hemos podido buscar · Reintentar» (.ui-sugerencias-error). */ .ui-sugerencias { margin-top: 6px; } .ui-sugerencias [role="option"] { cursor: pointer; } .ui-sugerencias [role="option"] .ui-fila-tit, .ui-sugerencias [role="option"] .ui-fila-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-sugerencias [role="option"] > span { min-width: 0; } .ui-sugerencias [role="option"][aria-selected="true"], .ui-sugerencias .ui-fila--activa, .ui-sugerencias [role="option"]:active { background: var(--c-marina-suave); } .ui-sugerencias-nada, .ui-sugerencias-error { display: flex; align-items: center; flex-wrap: wrap; column-gap: 8px; min-height: 52px; margin: 0; padding: 4px 16px; font-size: var(--fs-15); color: var(--c-texto-2); } .ui-sugerencias-error { color: var(--c-error); } .ui-sugerencias-error .ui-ico { width: 16px; height: 16px; } .ui-sugerencias-error .ui-enlace { font-size: var(--fs-15); } /* 20.3 Tira de días que desliza (más de 7 días): sigue siendo UNA fila; 7 por pantalla, anclaje cada 7 días. Al entrar, el JS lleva el día elegido a la vista: dia.scrollIntoView({ block: 'nearest', inline: 'nearest' }) (o scrollLeft de la semana). */ .ui-dias--desliza { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(100% / 7); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ui-dias--desliza::-webkit-scrollbar { display: none; } .ui-dias--desliza > .ui-dia:nth-child(7n + 1) { scroll-snap-align: start; } /* 20.4 Fila de aviso (inicio del alumno y del monitor), dentro de un .ui-grupo. Campana neutra (nunca por tipo); no leída = título 700 + punto marina de 8 delante. El fondo de borrar solo se ve durante el gesto (el contenido lo tapa en reposo). Contrato: la fila sigue llevando .noti-item; .ui-noti-fondo = .swipe-bg; .ui-noti-cont = .swipe-content; no leída = .ui-noti--no-leida o la .no-leida de siempre; saliendo = .ui-noti--sale o .fade-out.

#i-papelera

#i-campana

…hace 3 min

…

*/ .ui-noti { position: relative; overflow: hidden; } .ui-noti + .ui-noti::before { content: ""; position: absolute; z-index: 2; top: 0; left: 50px; right: 0; height: 1px; background: var(--c-regla); } .ui-noti-fondo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding: 0 20px; background: var(--c-error-fondo); color: var(--c-error); } .ui-noti-fondo .ui-ico { width: 24px; height: 24px; } .ui-noti-cont { position: relative; z-index: 1; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 12px 16px; background: var(--c-superficie); touch-action: pan-y; } .ui-noti-cont > .ui-ico { margin-top: 1px; color: var(--c-texto-2); } .ui-noti-cab { display: flex; align-items: baseline; gap: 8px; } .ui-noti-tit { flex: 1; min-width: 0; font-size: var(--fs-17); font-weight: var(--p-texto); color: var(--c-texto); overflow-wrap: anywhere; } .ui-noti-hora { flex: none; font-size: var(--fs-13); color: var(--c-texto-2); white-space: nowrap; } .ui-noti-cuerpo { margin: 2px 0 0; font-size: var(--fs-15); line-height: 1.4; color: var(--c-texto-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .ui-noti--no-leida .ui-noti-tit, .ui-noti.no-leida .ui-noti-tit { font-weight: var(--p-fuerte); } .ui-noti--no-leida .ui-noti-tit::before, .ui-noti.no-leida .ui-noti-tit::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: var(--r-redondo); background: var(--c-marina); vertical-align: middle; } .ui-noti--sale, .ui-noti.fade-out { opacity: 0; transform: translateX(-30px); transition: opacity var(--dur-hoja) var(--ease-out), transform var(--dur-hoja) var(--ease-out); } @media (prefers-reduced-motion: reduce) { .ui-noti--sale, .ui-noti.fade-out { transform: none; } } /* 20.5 QR a pantalla entera, en HUESO (nunca blanco: el lector lo lee igual). El brillo no se toca. */ .ui-qr { position: fixed; inset: 0; z-index: var(--z-dialogo); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: calc(var(--zona-arriba) + 56px) var(--margen) calc(var(--zona-abajo) + 24px); background: var(--c-hueso); color: var(--c-texto); text-align: center; overflow-y: auto; animation: ui-funde var(--dur-hoja) var(--ease-out); } .ui-qr[hidden] { display: none; } .ui-qr-cerrar { position: absolute; top: calc(var(--zona-arriba) + 8px); right: calc(var(--margen) - 10px); color: var(--c-texto-2); } .ui-qr-lienzo { width: min(280px, 100%); aspect-ratio: 1; margin-bottom: 16px; } .ui-qr-lienzo > canvas, .ui-qr-lienzo > img, .ui-qr-lienzo > svg { display: block; width: 100%; height: 100%; image-rendering: pixelated; } .ui-qr-importe { margin: 0; } .ui-qr-concepto { margin: 0; font-size: var(--fs-17); color: var(--c-texto); } /* 20.6 Navegador de día (o de mes): anterior · fecha · siguiente; «Hoy» solo si no es hoy. No es fila elegible.

Miércoles 23 de septiembre

*/ .ui-navdia { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; min-height: 44px; margin: 0 -10px; } .ui-navdia-centro { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; } .ui-navdia-fecha { min-width: 0; font-size: var(--fs-17); font-weight: var(--p-fuerte); color: var(--c-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ui-navdia-hoy { flex: none; font-size: var(--fs-15); } .ui-navdia-hoy[hidden] { display: none; } .ui-navdia .ui-btn-ico:disabled { color: var(--c-hormigon); } /* 20.7 Copiable: el valor en una línea (completo en title) + «Copiar» (pasa a «Copiado» 2 s) + compartir.

…

*/ .ui-copiable { padding-right: 6px; column-gap: 8px; } .ui-copiable-valor { min-width: 0; font-size: var(--fs-15); color: var(--c-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ui-copiable-acciones { display: inline-flex; align-items: center; gap: 2px; flex: none; } .ui-copiable-acciones .ui-enlace { padding: 0 6px; } /* 20.8 Progreso: barra de 4 px en arena 2 con relleno marina, sin rayas; texto de fase u ocupación en 13. Nativo: (ya es progressbar), o bien

con el JS poniendo style.setProperty('--progreso', '42%').

42 de 49 tablas

<…barra…>

*/ .ui-progreso { display: grid; gap: 6px; } .ui-progreso-txt { margin: 0; font-size: var(--fs-13); line-height: 1.4; color: var(--c-texto-2); } .ui-progreso-barra { display: block; width: 100%; height: 4px; margin: 0; border: 0; border-radius: var(--r-pastilla); overflow: hidden; background: var(--c-arena-2); color: var(--c-marina); -webkit-appearance: none; appearance: none; } .ui-progreso-relleno { display: block; height: 100%; width: var(--progreso, 0%); border-radius: inherit; background: var(--c-marina); transition: width var(--dur-estado) var(--ease-out); } progress.ui-progreso-barra::-webkit-progress-bar { background: var(--c-arena-2); border-radius: var(--r-pastilla); } progress.ui-progreso-barra::-webkit-progress-value { background: var(--c-marina); border-radius: var(--r-pastilla); } progress.ui-progreso-barra::-moz-progress-bar { background: var(--c-marina); border-radius: var(--r-pastilla); } /* 20.9 Subida: zona de 120 px, hueso, borde discontinuo hormigón de 1 px; icono marina y dos acciones compactas (principal «Hacer foto», secundaria «Elegir archivo»). Con archivo: miniatura de 72, nombre y tamaño, «Quitar» (.ui-enlace--peligro). El error va DEBAJO, en un .ui-aviso--error. Mientras se arrastra un archivo encima: .ui-subida--encima.

#i-camara

Hacer foto Elegir archivo

factura.jpg1,2 MB

*/ .ui-subida { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 120px; padding: 16px; background: var(--c-hueso); border: 1px dashed var(--c-hormigon); border-radius: var(--r-control); text-align: center; transition: background-color var(--dur-estado) var(--ease-out), border-color var(--dur-estado) var(--ease-out); } .ui-subida > .ui-ico { width: 24px; height: 24px; color: var(--c-marina); } .ui-subida-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .ui-subida--encima { border-color: var(--c-marina); background: var(--c-marina-suave); } .ui-subida--archivo { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 0; padding: 12px 8px 12px 12px; border-style: solid; border-color: var(--c-regla); text-align: left; } .ui-subida-mini { width: 72px; height: 72px; flex: none; border-radius: var(--r-carril); object-fit: cover; background: var(--c-arena-2); } .ui-subida-info { flex: 1; min-width: 0; } .ui-subida-nombre { display: block; font-size: var(--fs-17); color: var(--c-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ui-subida-tam { display: block; margin-top: 2px; font-size: var(--fs-13); color: var(--c-texto-2); } .ui-subida--archivo .ui-enlace { flex: none; padding: 0 8px; } /* 20.10 Medios: rejilla de miniaturas cuadradas (3 columnas; 4 desde 600 px; 6 en escritorio), 2 px de hueco. Solo la miniatura (thumb) en la rejilla, con loading="lazy". Vídeo: .ui-medio--video + icono i-video (.ui-medio-tipo). Elegida: aria-pressed="true" (o .ui-medio--elegida): anillo interior turquesa hondo de 3 px y check tinta en círculo turquesa de 22.

*/ .ui-medios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; } @media (min-width: 600px) { .ui-medios { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) and (pointer: fine) { .ui-medios { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .ui-medio { position: relative; display: block; aspect-ratio: 1; width: 100%; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--c-arena-2); cursor: pointer; } .ui-medio > img, .ui-medio > video { display: block; width: 100%; height: 100%; object-fit: cover; } .ui-medio--video::after { content: ""; position: absolute; inset: 50% 0 0; pointer-events: none; background: linear-gradient(to top, rgb(var(--c-tinta-rgb) / .4), rgb(var(--c-tinta-rgb) / 0)); } .ui-medio-tipo { position: absolute; z-index: 1; left: 6px; bottom: 6px; width: 16px; height: 16px; color: var(--c-hueso); } .ui-medio-check { position: absolute; z-index: 2; top: 6px; right: 6px; width: 22px; height: 22px; padding: 4px; display: none; border-radius: var(--r-redondo); background: var(--c-turquesa); color: var(--c-tinta); stroke-width: 2.25; box-shadow: inset 0 0 0 1.5px var(--c-turquesa-h); } .ui-medio[aria-pressed="true"]::before, .ui-medio--elegida::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 3px var(--c-turquesa-h); } .ui-medio[aria-pressed="true"] .ui-medio-check, .ui-medio--elegida .ui-medio-check { display: block; } .ui-medio:focus-visible { outline: 2px solid var(--c-foco); outline-offset: -2px; } /* 20.11 Visor de medios: la ÚNICA superficie oscura a pantalla completa. Fondo tinta, sin velo ni desenfoque. */ .ui-visor { position: fixed; inset: 0; z-index: var(--z-dialogo); background: var(--c-tinta); color: var(--c-hueso); animation: ui-funde var(--dur-hoja) var(--ease-out); } .ui-visor[hidden] { display: none; } .ui-visor-medio { position: absolute; inset: calc(var(--zona-arriba) + 56px) 0 calc(var(--zona-abajo) + 44px); margin: 0; display: flex; align-items: center; justify-content: center; } .ui-visor-medio > img, .ui-visor-medio > video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } .ui-visor .ui-btn-ico { position: absolute; z-index: 1; color: var(--c-hueso); } .ui-visor .ui-btn-ico:active { background: rgb(var(--c-hueso-rgb) / .14); } /* anterior y siguiente caen encima de la foto: un círculo de tinta al 40 % para que se lean sobre un cielo claro (no es un velo) */ .ui-visor-ant, .ui-visor-sig { background: rgb(var(--c-tinta-rgb) / .4); } .ui-visor-ant:active, .ui-visor-sig:active { background: rgb(var(--c-tinta-rgb) / .6); } .ui-visor .ui-btn-ico:focus-visible { outline: 2px solid var(--c-hueso); outline-offset: 2px; } .ui-visor .ui-btn-ico[disabled]:not([aria-busy="true"]), .ui-visor .ui-btn-ico[hidden] { display: none; } /* F16: el ocupado (descargando) se queda a la vista */ .ui-visor-cerrar { top: calc(var(--zona-arriba) + 8px); right: 6px; } .ui-visor-ant { left: 6px; top: 50%; transform: translateY(-50%); } .ui-visor-sig { right: 6px; top: 50%; transform: translateY(-50%); } .ui-visor-cuenta { position: absolute; left: 0; right: 0; bottom: calc(var(--zona-abajo) + 14px); margin: 0; text-align: center; font-size: var(--fs-13); color: var(--c-texto-sobre-marina-2); } /* 20.12 Mapa (Leaflet de cdnjs con SRI): contenedor de 240 px (320 en escritorio), esquina 14, sin sombra ni borde. Controles de 44 en hueso con icono marina y regla de 1 px entre ellos; marcador .ui-punto de 12 en marina con anillo hueso de 2 px (divIcon con className "ui-punto"); atribución en 12 tinta 2 sobre hueso al 85 %. Las teselas no se filtran. Nada de backdrop-filter en los controles. */ .ui-mapa { position: relative; height: 240px; border-radius: var(--r-control); overflow: hidden; background: var(--c-arena-2); isolation: isolate; } @media (min-width: 1024px) and (pointer: fine) { .ui-mapa { height: 320px; } } .ui-mapa .leaflet-control.leaflet-bar { border: 0; border-radius: var(--r-control); box-shadow: none; overflow: hidden; } .ui-mapa .leaflet-control.leaflet-bar a { display: block; text-align: center; text-decoration: none; width: 44px; height: 44px; line-height: 44px; border: 0; border-radius: 0; background: var(--c-hueso); color: var(--c-marina); font: var(--p-texto) 22px/44px var(--f-cuerpo); } .ui-mapa .leaflet-control.leaflet-bar a + a { border-top: 1px solid var(--c-regla); } .ui-mapa .leaflet-control.leaflet-bar a:active { background: var(--c-marina-suave); } .ui-mapa .leaflet-control.leaflet-bar a.leaflet-disabled { color: var(--c-hormigon); background: var(--c-hueso); } .ui-mapa .leaflet-control-attribution { background: rgb(var(--c-hueso-rgb) / .85); color: var(--c-texto-2); font-size: var(--fs-12); } .ui-mapa .leaflet-control-attribution a { color: var(--c-marina); } .ui-mapa .ui-punto { width: 12px; height: 12px; --punto: var(--c-marina); border: 0; box-shadow: 0 0 0 2px var(--c-hueso); } /* 20.13 Punto de estado «ok» del push (DESIGN.md › The One Dot Rule: la segunda excepción cerrada), en turquesa hondo */ .ui-punto--ok { --punto: var(--c-turquesa-h); } /* F13: los otros dos estados del push (utils/push-diagnostico.js pone ui-punto--ok|--aviso|--error) */ .ui-punto--aviso { --punto: var(--c-aviso); } .ui-punto--error { --punto: var(--c-error); } /* ===================================================================== 21. F9 · lo que necesitan utils/hoja.js, utils/dialogo.js y utils/estados.js ===================================================================== */ /* La hoja vive en el HTML con [hidden] hasta que abrirHoja la abre (la alta y la lateral son flex) */ .ui-hoja[hidden] { display: none; } /* El foco inicial va a la hoja o al diálogo entero (el lector lee su título): sin anillo en la caja */ .ui-hoja:focus, .ui-hoja:focus-visible, .ui-dialogo:focus, .ui-dialogo:focus-visible { outline: none; } /* El arrastre de deslizar-para-cerrar.js no pelea con la animación de entrada */ .ui-hoja.deslizando { animation: none; } /* Movimiento reducido: el panel lateral de escritorio también funde (va detrás del bloque de escritorio) */ @media (prefers-reduced-motion: reduce) { .ui-hoja--lateral { animation-name: ui-funde; } } /* Esqueleto: el envoltorio que lleva aria-busy; fila de grupo (icono · texto · cifra) y tarjetas apiladas */ .ui-esq-grupo { display: block; } .ui-esq--ico { width: 24px; height: 24px; border-radius: var(--r-seg); } .ui-esq--cifra { width: 48px; } .ui-esq--bloque + .ui-esq--bloque { margin-top: 12px; } /* ===================================================================== 22. F10 · Asistente (utils/chat-asistente.js en páginas v2): hoja alta, burbujas hueso sobre arena, la tuya en marina; campo con etiqueta y enviar con i-flecha ===================================================================== */ .ui-asis-msgs { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; padding-bottom: 16px; background: var(--c-arena); } .ui-asis-b { max-width: 88%; padding: 10px 14px; border-radius: var(--r-control); font-size: var(--fs-15); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; } .ui-asis-b--assistant { align-self: flex-start; background: var(--c-hueso); color: var(--c-tinta); } .ui-asis-b--user { align-self: flex-end; background: var(--c-marina); color: var(--c-hueso); } .ui-asis-b--user .ui-enlace { color: inherit; text-decoration: underline; } .ui-asis-b--error { background: var(--c-error-fondo); } .ui-asis-b--escribiendo { color: var(--c-texto-2); animation: ui-asis-late 1.2s var(--ease-in-out) infinite; } @keyframes ui-asis-late { 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .ui-asis-b--escribiendo { animation: none; } } .ui-asis-form { display: grid; grid-template-columns: minmax(0, 1fr) var(--toque); gap: 8px; align-items: center; } .ui-asis-enviar { color: var(--c-marina); } /* F13: la banda nace oculta (utils/offline.js la enseña sin red) */ .ui-banda[hidden] { display: none; } /* ===================================================================== 23. F15 · Remates que pidieron las zonas del lote 1 (.claude/banco/pendientes-fundacion/*.md). Las zonas conservan su parche local, que pinta lo mismo, hasta que se retire en F16. ===================================================================== */ /* [hidden] gana al display de los componentes (.ui-fila, .ui-aviso, .ui-btn, .ui-grupo, .ui-total…). Doble atributo = (0,3,0): gana a las reglas de componente; un display en línea (style) o una regla con id siguen mandando, como antes. Sin !important a propósito. */ .v2 [hidden][hidden] { display: none; } /* Fila que es un