/* * mis-datos.css — «Mis datos», la autoatención del invitado. * * Cinco pantallas comparten esta hoja porque comparten el momento: alguien * que leyó la política de privacidad en su teléfono, meses después de la * fiesta, y quiere saber qué tenemos de él. Sentado, con tiempo, y con una * pregunta concreta. Nada que ver con el salón de noche: acá el tono es * papel, no fiesta. * * entrada.twig — un campo y un botón * codigo.twig — los seis dígitos * panel.twig — un bloque por matrimonio, con las cuatro acciones * detalle.twig — «ver lo mío», con los textos enteros * borrar.twig — la confirmación contada * * Prefijo `md-` (mis datos). El cascarón vive en * src/Public/Views/pages/legal/mis-datos/_layout.twig. * * --------------------------------------------------------------------------- * CERO COLORES LITERALES * --------------------------------------------------------------------------- * Todo color sale de la capa A de couple/tokens.css (los tres de la sede) o * de una fórmula sobre ella. Un `#0E2747` suelto es un píxel que ningún tema * va a poder cambiar, y esta pantalla la va a servir cada sede con su marca. * La prueba es la captura con `data-brand="lirquen"`: si algo estuviera * hardcodeado, ahí se ve. * * --------------------------------------------------------------------------- * MOBILE-FIRST 375, TARGETS ≥44px, AA * --------------------------------------------------------------------------- * El ancho de referencia es 375. Todo lo tocable mide 44px o más de alto, y * los controles de formulario 48px, que es el piso de pulgar. Los textos * secundarios van sobre --text-muted, que la capa B deriva para cumplir AA * contra --surface-page en cualquier tenant. */ /* =========================================================================== 0. EL PUENTE — dos colisiones de nombre entre las dos hojas de tokens =========================================================================== couple/tokens.css y shared/tokens.css usan dos nombres para cosas de tipo distinto. En las pantallas de la pareja no molesta (no cargan las dos); acá sí: --text-base shared: 14px (tamaño) · couple: un COLOR --focus-ring shared: un color · couple: una SOMBRA (box-shadow) Sin esto, `body { font-size: var(--text-base) }` de base.css y cualquier `outline: 2px solid var(--focus-ring)` quedan inválidos en TODA la página. *** PUENTE TRIPLICADO — UNIFICAR AL INTEGRAR *** `guest-acceso.css` §3 y `guest-menu.css` §0 traen el MISMO bloque para el mismo choque. Éste está alineado a esos dos, línea por línea, a propósito: unificarlos es mover el bloque a un archivo compartido y borrar los tres. No se hace acá porque tocar esas dos hojas es tocar las pantallas internas del invitado, que otro agente tiene abiertas. CONSECUENCIA a respetar: todas las medidas de esta hoja usan --text-xs/sm/md/lg/xl y NUNCA --text-base, y los componentes compartidos que se reusan (.field__control, .btn) llevan su font-size explícito. =========================================================================== */ :root { /* Captura del TAMAÑO antes de que couple/ lo tape. En --text-base todavía vale lo de shared/tokens.css, porque `[data-brand]` vive en y no matchea acá. Así el puente no escribe ni un literal. */ --puente-size-text-base: var(--text-base); } body[data-brand] { /* --- las dos colisiones que rompen --- */ --text-base: var(--puente-size-text-base); /* Capa A, no --accent: shared/tokens.css sólo define --accent bajo [data-brand="vi"], así que en cualquier otra sede quedaba SIN VALOR y el anillo de foco desaparecía justo en el tenant que hay que probar. */ --focus-ring: var(--accent-ink); /* --- el cascarón, re-derivado de capa A --- base.css consume los nombres de shared/tokens.css, que sólo están definidos para [data-brand="vi"]. Sin esto, cualquier otra sede deja --bg/--ink/--surface/--line sin valor y el cascarón se cae a negro sobre transparente. Es exactamente lo que destapa la prueba de lirquen. */ --bg: var(--surface-page); --surface: var(--surface-card); --surface-alt: var(--accent-soft); --surface-elevated: var(--surface-card); --line: var(--border-hairline); --line-soft: var(--border-hairline); --line-strong: var(--border-hairline); --ink: var(--text-strong); --ink-soft: var(--text-strong); --muted: var(--text-muted); --primary: var(--brand-ink); --primary-fg: var(--action-on-primary); --accent: var(--accent-ink); --accent-deep: var(--brand-ink); --font-sans: var(--font-ui); --font-serif: var(--font-display); } /* `hidden` gana siempre: una clase propia con display:flex lo pisa por especificidad y deja dos estados en pantalla a la vez. */ [hidden] { display: none !important; } /* =========================================================================== 1. El cascarón =========================================================================== */ .md-body { background-color: var(--surface-page); color: var(--text-strong); font-family: var(--font-ui); font-size: var(--text-md); line-height: var(--leading-normal); -webkit-text-size-adjust: 100%; } .md-shell { min-height: 100vh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; padding: 0 var(--space-4); box-sizing: border-box; } .md-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) 0 var(--space-4); border-bottom: 1px solid var(--border-hairline); } .md-header img { height: 24px; width: auto; flex: 0 0 auto; } .md-header__que { margin: 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide, .04em); text-transform: uppercase; color: var(--text-muted); } .md-main { flex: 1; padding: var(--space-6) 0 var(--space-8); } .md-footer { padding: var(--space-4) 0 var(--space-8); border-top: 1px solid var(--border-hairline); } .md-footer p { margin: 0; } /* Enlaces del pie: 44px de alto táctil que crecen hacia afuera del párrafo (margen negativo) en vez de empujar el texto. El subrayado no es decoración: distinguir un enlace sólo por color falla WCAG 1.4.1. */ .md-footer__link, .md-volver { display: inline-flex; align-items: center; min-height: 44px; margin: 0 calc(var(--space-2) * -1); padding: 0 var(--space-2); border-radius: var(--radius-control); color: var(--accent-ink); font-size: var(--text-sm); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .md-volver { margin-bottom: var(--space-2); } /* =========================================================================== 2. Tipografía de la pantalla =========================================================================== */ .md-titulo { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight, -.01em); color: var(--text-strong); text-wrap: balance; } .md-lead { margin: 0 0 var(--space-6); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-muted); text-wrap: pretty; } .md-h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); } /* =========================================================================== 3. Avisos — fondo tintado + borde 1px COMPLETO --------------------------------------------------------------------------- Nada de border-left grueso como acento: es la regla 8 de AGENTS.md y es además el «AI tell» que el fundador ya cazó una vez. =========================================================================== */ .md-aviso { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-hairline); border-radius: var(--radius-control); background: var(--accent-soft); color: var(--text-strong); font-size: var(--text-sm); line-height: var(--leading-normal); } .md-aviso p { margin: 0; } .md-aviso p + p { margin-top: var(--space-2); } .md-aviso--exito { background: var(--positive-soft); border-color: color-mix(in oklab, var(--state-positive) 35%, transparent); } .md-aviso--error { background: var(--danger-soft); border-color: color-mix(in oklab, var(--state-danger) 40%, transparent); } .md-aviso--ojo { background: var(--warning-soft); border-color: color-mix(in oklab, var(--state-warning) 35%, transparent); } /* =========================================================================== 4. Formularios =========================================================================== */ .md-form { display: flex; flex-direction: column; gap: var(--space-4); margin: 0 0 var(--space-5); } .md-form .field__label { font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); } .md-form .field__hint, .md-form .field__error { font-size: var(--text-sm); line-height: var(--leading-normal); } .md-form .field__error { color: var(--state-danger); } .md-form .field__hint { color: var(--text-muted); } /* TRAMPA MEDIDA, no leída: `.btn` de components.css NO trae padding propio —vive en los modificadores de tamaño— y `.field__control` hereda 40px. Los dos quedan por debajo del piso de pulgar. Estas dos reglas son el piso táctil de estas pantallas, no una decisión de estilo. */ .md-form .field__control, .md-shell .btn { min-height: 48px; font-size: var(--text-md); font-family: var(--font-ui); } .md-form .field__control { border-radius: var(--radius-control); border: 1px solid var(--border-hairline); background: var(--surface-card); color: var(--text-strong); } .md-form .field__control:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-accent) 40%, transparent); } /* El campo del código: seis dígitos, un solo input. UN input y no seis cajitas — las seis se ven mejor en un mockup y rompen lo único que sube la conversión de verdad: iOS y Android rellenan `autocomplete="one-time-code"` desde la notificación. Con seis inputs el autocompletado mete los seis dígitos en el primero, o no se ofrece. */ .md-codigo { font-family: var(--font-figures); font-size: var(--text-2xl); letter-spacing: .28em; text-align: center; } .md-acciones { display: flex; flex-direction: column; gap: var(--space-2); } /* Botones, sobre capa A. --action-primary y --action-on-primary son el par que la capa B garantiza legible en cualquier tenant. */ .md-shell .btn--primary { background: var(--action-primary); border-color: var(--action-primary); color: var(--action-on-primary); } .md-shell .btn--primary:hover:not(:disabled) { background: var(--action-primary-press); border-color: var(--action-primary-press); } .md-shell .btn--secondary, .md-shell .btn--tertiary { background: var(--surface-card); border: 1px solid var(--border-hairline); color: var(--text-strong); } .md-shell .btn--destructive { background: var(--surface-card); border: 1px solid color-mix(in oklab, var(--state-danger) 45%, transparent); color: var(--state-danger); } .md-shell .btn--destructive:hover:not(:disabled) { background: var(--danger-soft); } .md-shell .btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; } /* Un

que sólo lleva un botón no debe meter margen: si no, la fila de acciones del panel se descuadra respecto de los enlaces que la acompañan. */ .md-accion-form { margin: 0; display: contents; } /* =========================================================================== 5. El panel — un bloque por matrimonio =========================================================================== */ .md-lista { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; list-style: none; } .md-card { padding: var(--space-4); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); background: var(--surface-card); box-shadow: var(--shadow-card); } .md-card__titulo { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; line-height: var(--leading-snug); color: var(--text-strong); } .md-card__fecha { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-muted); } /* Lo que dejó: pares etiqueta/valor, no una tabla. A 375 una tabla de dos columnas con etiquetas largas parte las palabras. */ .md-datos { margin: var(--space-4) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--border-hairline); display: grid; gap: var(--space-2); font-size: var(--text-sm); } .md-dato { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); } .md-dato__k { color: var(--text-muted); } .md-dato__v { color: var(--text-strong); font-weight: 500; text-align: right; } /* Etiquetas de estado. Texto además del color: el color solo no comunica (WCAG 1.4.1), y acá una de ellas dice «bloqueado». */ .md-tag { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--r-full); border: 1px solid var(--border-hairline); background: var(--surface-page); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); } .md-tag--si { background: var(--positive-soft); border-color: color-mix(in oklab, var(--state-positive) 35%, transparent); color: var(--state-positive); } .md-tag--ojo { background: var(--warning-soft); border-color: color-mix(in oklab, var(--state-warning) 35%, transparent); color: var(--state-warning); } .md-card__acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-hairline); } .md-card__acciones .btn { flex: 1 1 calc(50% - var(--space-2)); min-width: 140px; } /* =========================================================================== 6. «Ver lo mío» — los textos enteros =========================================================================== */ .md-pieza { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-hairline); } .md-pieza:last-child { border-bottom: 0; } .md-pieza__meta { margin: 0 0 var(--space-1); font-size: var(--text-xs); color: var(--text-muted); } /* El texto que escribió la persona. `pre-wrap` porque los saltos de línea que puso son parte de lo que escribió, y `break-word` porque un invitado pega una URL de doscientos caracteres y a 375 desborda la tarjeta. */ .md-pieza__texto { margin: 0; font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-strong); white-space: pre-wrap; overflow-wrap: break-word; } /* La referencia de almacenamiento de una foto o un audio: es un dato técnico, se muestra como tal y con scroll propio en vez de romper el ancho. */ .md-ref { display: block; margin: var(--space-1) 0 0; font-family: var(--font-figures); font-size: var(--text-xs); color: var(--text-muted); overflow-x: auto; white-space: nowrap; } .md-vacio { margin: 0; padding: var(--space-4) 0; font-size: var(--text-sm); color: var(--text-muted); } /* =========================================================================== 7. La confirmación del borrado --------------------------------------------------------------------------- La cifra grande no es adorno: es lo que la persona tiene que leer antes de tocar el botón. Un «¿estás seguro?» sin números no informa nada. =========================================================================== */ .md-cuenta { display: flex; gap: var(--space-3); margin: 0 0 var(--space-5); } .md-cuenta__item { flex: 1; padding: var(--space-4) var(--space-3); border: 1px solid var(--border-hairline); border-radius: var(--radius-control); background: var(--surface-card); text-align: center; } .md-cuenta__n { display: block; font-family: var(--font-figures); font-size: var(--text-3xl); line-height: var(--leading-tight); color: var(--text-strong); } .md-cuenta__k { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text-muted); } /* =========================================================================== 8. El pie legal — chico, secundario, ENTERO --------------------------------------------------------------------------- Se achica el tamaño y el peso visual; nunca se pliega ni se esconde. Es la misma regla que rige el aviso de la pantalla de acceso (docs/ley21719/invitados-base-de-licitud.md §3.2): «visible» ahí es literal — texto renderizado, sin click, sin acordeón, sin «ver más». =========================================================================== */ .md-legal { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--border-hairline); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-relaxed); text-wrap: pretty; } .md-legal p { margin: 0; } .md-legal p + p { margin-top: var(--space-2); } .md-legal a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; } /* =========================================================================== 9. Movimiento --------------------------------------------------------------------------- couple/tokens.css ya resuelve `prefers-reduced-motion` para todo lo que esté dentro de [data-brand] (achica las duraciones y anula las animaciones). Acá sólo se cubre lo que esta hoja agrega por su cuenta. =========================================================================== */ @media (prefers-reduced-motion: reduce) { .md-shell *, .md-shell *::before, .md-shell *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Pantallas grandes: la columna no crece más de 560px (arriba), pero las acciones de cada matrimonio pueden ir en una fila cuando hay espacio. */ @media (min-width: 480px) { .md-card__acciones .btn { flex: 0 1 auto; } }