/* ============================================================ RUOT · Parche de maquetación — 14-sep-2026 Origen: auditoría automática de las 47 pantallas a 390 px y 1280 px (ver «Auditor Maquetacion.dc.html»). Solo capa visual: ningún cambio de lógica, i18n, router ni filtros. Cargar DESPUÉS de css/estilos.css. ============================================================ */ /* ------------------------------------------------------------ 1 · MODAL DE ACCESO — la causa de 4 colores ajenos y 77 subrayados en las 47 pantallas. js/auth.js pinta el modal con var(--card,#fff), var(--foreground,#1a1a1a), var(--muted-foreground,#555), var(--border,#ccc) y var(--accent,#0b6e4f). Esos cinco tokens NO existen en tokens.css, así que el navegador usa siempre el valor de reserva: verde #0b6e4f y grises genéricos, de otra paleta. Se declaran aquí DENTRO de #auth-root, mapeados a la paleta v2: arregla el modal sin tocar auth.js y sin que esos nombres genéricos afecten a nada más de la web. ------------------------------------------------------------ */ #auth-root { --card: var(--superficie); --foreground: var(--texto); --muted-foreground: var(--texto-suave); --border: var(--borde); --accent: var(--cta-primario); } #auth-root, #auth-root h2, #auth-root p, #auth-root label, #auth-root input, #auth-root button { font-family: var(--font-texto); } /* Sin subrayados en la UI: «Olvidé mi contraseña» se distingue por color petróleo + peso, no por raya (identidad RUOT). */ #auth-root button { text-decoration: none !important; } #auth-root button[style*="underline"] { font-weight: 700; } /* Base 18 px y objetivos de 44 px también dentro del modal (auth.js fija 1.05rem = 16,8 px en línea). */ #auth-root input, #auth-root button { font-size: var(--fs-base) !important; } #auth-root input { min-height: var(--tactil); } #auth-root button[type="button"] { min-height: var(--tactil); } #auth-root [id$="ver-password"] { min-width: var(--tactil); } /* ------------------------------------------------------------ 2 · BOTÓN SIN ACCIÓN POSIBLE — contraste 3,02:1 (falla AA). Blanco sobre --deshabilitado (#7A9AA1) no llega a 4,5:1 en «Registrar preferencia» (T4) ni «Enviar la solicitud» (G1b). Se pasa a tinte + texto suave: 6,1:1, sin colores nuevos, y comunica mejor «todavía no disponible» que un relleno macizo. ------------------------------------------------------------ */ .btn[aria-disabled="true"], .btn.inactivo { background: var(--tinte); border-color: var(--borde); color: var(--texto-suave); } /* ------------------------------------------------------------ 3 · LISTA DE DOCUMENTOS (G1b) — regla duplicada. estilos.css declara `.lista-docs li` dos veces: en la 1564 como rejilla de 3 columnas (48px · texto · botón) y en la 1860 otra vez como flex. Gana la segunda, la rejilla se pierde y la columna de texto se queda en 86 px: corta «Documento de identidad», «Seguro de responsabilidad civil» y sus dos descripciones. Se restaura la rejilla original. ------------------------------------------------------------ */ .lista-docs li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; } .lista-docs .quien { flex: initial; min-width: 0; display: flex; flex-direction: column; gap: 4px; } @media (max-width: 720px) { .lista-docs li { grid-template-columns: 40px minmax(0, 1fr); } .lista-docs .btn { grid-column: 1 / -1; } } /* ------------------------------------------------------------ 4 · CRÉDITOS DE FOTOS — se salen 4 px de la pantalla a 390 px. El nombre de archivo va en monospace, con flex:0 0 auto y sin punto de corte, así que empuja la columna de datos fuera del viewport. Tipografía del sistema, corte permitido y, en móvil, los datos bajan debajo del nombre. ------------------------------------------------------------ */ .creditos-archivo { font-size: var(--fs-caption); overflow-wrap: anywhere; } .creditos-datos { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 720px) { .creditos-foto { flex-direction: column; align-items: flex-start; gap: 2px; } } /* ------------------------------------------------------------ 5 · CABECERA a 1280 px — «Iniciar sesión» sobresale 3 px. `.utilidades-cabecera` lleva margin-left:auto y no puede encogerse, así que desborda el contenedor en las rutas interiores. La barra envuelve en cualquier ancho. ------------------------------------------------------------ */ .cabecera .barra { flex-wrap: wrap; column-gap: var(--sp-3); } .utilidades-cabecera { min-width: 0; flex-shrink: 1; } .utilidades-cabecera .btn { white-space: nowrap; } /* ------------------------------------------------------------ 6 · DESPLEGABLES CERRADOS QUE SE VEN — el solape más grave. estilos.css solo estiliza `.afinar[open] > .afinar-cuerpo`, así que con el
CERRADO el cuerpo se queda sin regla, el display:flex heredado anula el ocultado nativo del navegador y el panel de filtros se pinta en una columna de 143 × 2 506 px encima del inicio: pisa «Qué pasa en cada ciudad», los eventos y las tarjetas de ciudad. Igual le pasa al bloque legal del alta de guía. Cerrado significa no visible. ------------------------------------------------------------ */ .afinar:not([open]) > .afinar-cuerpo { display: none !important; } details:not([open]) > div { display: none !important; } /* ------------------------------------------------------------ 7 · EMOJI 👁 EN LOS BOTONES «VER CONTRASEÑA» → icono de línea. El glifo está en el JS (auth.js, app.js, fundador.js); aquí se sustituye por un icono SVG de línea en petróleo suave, sin tocar esos archivos. Si Hermes limpia el textContent, esta regla sigue siendo correcta (el icono es el fondo del botón). ------------------------------------------------------------ */ /* Especificidad: el bloque 1 usa `#auth-root button` (1 ID + 1 tipo), así que aquí hace falta al menos la misma para ganarle. */ #auth-root button#auth-ver-password, body button#g-ver-password, .f-datos .campo button[aria-pressed] { font-size: 0 !important; min-width: var(--tactil); min-height: var(--tactil); /* auth.js pone `background: transparent` EN LÍNEA. Es un shorthand: resetea background-image, -size, -repeat y -position. Sin !important el icono no pinta y el botón se queda vacío (el emoji ya está oculto por el font-size:0). Las cuatro longhands necesitan !important. */ background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 24px 24px !important; background-image: url("data:image/svg+xml;utf8,") !important; } #auth-root button#auth-ver-password[aria-pressed="true"], body button#g-ver-password[aria-pressed="true"], .f-datos .campo button[aria-pressed="true"] { background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 24px 24px !important; } /* ------------------------------------------------------------ 8 · NOTA DE SUGERENCIA (F5) — fondo #FDF3E0 fuera de tokens. Se sustituye por el tinte ámbar del sistema, mismo papel («aviso templado») y ya medido en AA. ------------------------------------------------------------ */ .fundador .f-sugerencia-nota { background: var(--tinte-aviso); } /* ============================================================ SEGUNDA TANDA — 14-sep-2026, decisiones de Ale («todos») ============================================================ */ /* ------------------------------------------------------------ 9 · BASE TIPOGRÁFICA REAL DE 18 PX La auditoría contó 752 textos entre 13 y 17 px contra la base de 18 px de la identidad. No era un fallo de integración: los propios tokens (--fs-small 16, --fs-caption 14, --fs-micro 13) y unos treinta 0.9375rem escritos a mano quedaban por debajo. Decisión: la jerarquía del texto secundario se hace con COLOR y PESO, no bajando el tamaño. Solo los chips y badges muy cortos bajan, y nunca de 16 px. ------------------------------------------------------------ */ :root { --fs-small: 1.125rem; /* 18px (antes 16) — texto secundario */ --fs-caption: 1.125rem; /* 18px (antes 14) — metadatos */ --fs-micro: 1rem; /* 16px (antes 13) — solo chips y badges */ } /* Los 0.9375rem (15 px) escritos a mano en estilos.css, uno a uno. Todos son texto que se lee, no adorno. */ .hero-wrap .eyebrow, .grupo-filtro-cuerpo .ayuda, .filtros-activos, .tarjeta-tour .meta, .estado, .sobretitulo, .miga, .aviso, .campo .ayuda, .progreso-pasos, .pie-grande nav strong, .pie-grande .legal, .indice-paradas .tit, .indice-paradas .min, .bloque-guion .rotulo, .mis-tours .tour .texto-suave, .mis-tours .tour strong, .pie-test, .gcat-estado .badge.teal, .rejilla-gcat .tarjeta-tour .acciones .btn, .lista-docs .quien .texto-suave, .lista-docs .btn, .caja-prefs, .destino .texto span, .cobros-stripe .desglose-pago, .creditos-foto, .credito-tour-discreto { font-size: var(--fs-small); } /* El menú de la cabecera reducía a 15 px en dos puntos de ruptura. Se queda en 18 px: la barra ya envuelve (bloque 5). */ @media (max-width: 1180px) { .menu-principal a { font-size: var(--fs-small); } } @media (max-width: 980px) { .menu-principal a { font-size: var(--fs-small); } } /* Los huecos de foto siguen pequeños y en monospace a propósito: señalan «esto no es contenido real». No son texto que se lea. */ /* ------------------------------------------------------------ 10 · OBJETIVOS DE TOQUE DE 44 PX 121 enlaces medían 21 px de alto: casi todos títulos dentro de listas (eventos por ciudad, tours en tablas, enlaces del pie). Se convierten en filas pulsables. Solo listas y navegación: los enlaces dentro de un párrafo se dejan en el flujo del texto, donde inline-flex lo rompería. ------------------------------------------------------------ */ .lista-eventos-ciudad a, .tarjeta-ciudad-eventos li a, .rejilla-eventos .tarjeta-evento .cuerpo > a, .evento-destacado .cuerpo > a, .mis-tours .tour a, .miga a, .pie-grande nav a, .lista-grupo li > a, .indice-paradas a { display: inline-flex; align-items: center; min-height: var(--tactil); } /* ------------------------------------------------------------ 11 · a:hover — 3,9:1, no cumplía AA (pendiente del 08-sep) El teal (#018790) sobre fondo claro da 3,9:1 y AA pide 4,5:1 en texto de 18 px. Se pasa a --cta-primario-hover (#007486), que ya está medido en 5,47:1 sobre blanco. El teal se queda donde sí cumple: bordes, foco y fondos. ------------------------------------------------------------ */ a:hover { color: var(--cta-primario-hover); } .tarjeta-tour .titulo a:hover { color: var(--cta-primario-hover); } /* ------------------------------------------------------------ 12 · BLOQUE «QUIÉN ESTÁ DETRÁS» (#/sobre) Sin foto (Ale, 14-sep: no habrá imagen). Una sola columna con ancho de lectura: sin imagen que sujete la mirada, una línea larga cansa. El HTML va en entrega-integracion/bloque-quien-esta-detras.html ------------------------------------------------------------ */ .quien-detras { display: flex; flex-direction: column; gap: var(--sp-3); } .quien-detras h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.015em; margin: 0 0 var(--sp-1); } .quien-detras p { margin: 0; max-width: 68ch; } .quien-detras .firma { color: var(--texto-suave); margin-top: var(--sp-2); } /* ------------------------------------------------------------ 13 · REMATE tras medir la segunda tanda. El auditor localizó el resto: 110 de los 415 textos pequeños y 75 de los 117 objetivos pequeños seguían siendo del modal de acceso (sus etiquetas y su botón de cerrar), y el resto eran los enlaces de navegación del pie y del lateral de cuenta. ------------------------------------------------------------ */ /* Modal de acceso: etiquetas y textos a 18 px, y el botón «×» con área de 44 px en los DOS ejes (min-height solo cubría uno). */ #auth-root label, #auth-root p, #auth-root h2 { font-size: var(--fs-base) !important; } #auth-root button { min-width: var(--tactil); min-height: var(--tactil); } /* Navegación por enlaces: pie, lateral de cuenta y listas de enlaces. Texto a 18 px y fila pulsable de 44 px. */ .pie a, .pie-grande nav a, .cuenta-lateral a, .lista-enlaces a { font-size: var(--fs-small); display: inline-flex; align-items: center; min-height: var(--tactil); } /* Botones: quedaban en 17 px por un 1.05rem heredado. */ .btn, .btn-primario, .btn-secundario, .btn-fantasma, .btn-suave { font-size: var(--fs-base); } /* Enlaces sueltos que sí son objetivos: fuente de un crédito, tour dentro de una fila, segmentos y desplegables. */ .creditos-datos a, .mis-tours .tour a, .segmento button, details > summary { display: inline-flex; align-items: center; min-height: var(--tactil); } /* ------------------------------------------------------------ 14 · REMATE FINAL — especificidad. Los últimos casos tenían reglas más específicas en estilos.css (un ancestro de clase extra), así que una regla de una sola clase no les ganaba. Se sube la especificidad con el ancestro, sin recurrir a !important. ------------------------------------------------------------ */ .cabecera .menu-principal a, .cabecera .menu-principal li a, .pasos-alta li a { font-size: var(--fs-small); } .tarjeta-ciudad-eventos a.btn, .aviso .btn, [id^="aviso-"] .btn, .fundador .btn, .f-acciones .btn, .f-datos .btn, .f-semaforo-modo .btn { font-size: var(--fs-base); } .miga ol li a, .cabecera .menu-principal li a, .creditos-autor a, .creditos-foto .creditos-datos a, .mis-tours .tour a, .lista-grupo .tour a, .conmuta-vista button, .segmento button, [id^="aviso-"] .btn { display: inline-flex; align-items: center; min-height: var(--tactil); } /* ------------------------------------------------------------ 15 · CITAS Y NOTAS DEL PANEL FUNDADOR — fuera el filete lateral. `.f-cita` y `.f-sugerencia-nota` usaban contenedor redondeado con `border-left` de color de acento. La identidad RUOT lo descarta: el color hace de contenedor, no de pegatina en el canto. Se sustituye por tinte de fondo en todo el bloque, con borde completo suave, y un rótulo que dice qué es cada cosa. Ganan dos cosas: el color deja de depender de 4 px que se pierden a tamaños de letra grandes, y el bloque se identifica por lo que pone, no por dónde tiene la raya. ------------------------------------------------------------ */ .fundador .f-cita { border-left: 0; border: 1px solid var(--borde-suave); background: var(--tinte); border-radius: var(--radio-m); padding: var(--sp-4) var(--sp-5); } .fundador .f-cita::before { content: "Lo que nos dicen"; display: block; margin-bottom: var(--sp-2); font-style: normal; font-weight: 700; font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); } .fundador .f-sugerencia-nota { /* Sin borde: el tinte ámbar ya delimita el bloque, y así no hace falta inventar un color de borde que no está en tokens.css (lo intenté con #E8CFA0 y el propio auditor lo marcó). */ border: 0; background: var(--tinte-aviso); border-radius: var(--radio-m); padding: var(--sp-4) var(--sp-5); } .fundador .f-sugerencia-nota::before { content: "Por qué te lo propongo"; display: block; margin-bottom: var(--sp-2); font-weight: 700; font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--c-aviso); } /* ============================================================ TERCERA TANDA — auditoría del panel del fundador (14-sep) Las 11 vistas × 4 estados (normal, letra extra, contraste alto, modo oscuro) × 2 anchos. Herramienta: Auditor Fundador.dc.html ============================================================ */ /* ------------------------------------------------------------ 16 · MODO OSCURO: 98 FALLOS DE CONTRASTE EN LOS BOTONES. El más grave de toda la auditoría, y estaba escondido porque nadie había medido el modo oscuro. tokens.css remapea en oscuro --cta-primario a ámbar y --cta-secundario a teal. Pero estilos.css fija los colores de texto pensando en el modo claro: .btn-primario { color: var(--c-blanco) } → blanco sobre ámbar = 1,73:1 .btn-secundario { color: var(--c-petroleo) } → petróleo sobre teal = 2,00:1 AA pide 4,5:1. «Guardar», «Editar» y «Deshacer» del panel eran ilegibles en cuanto el móvil estaba en oscuro. Arreglo, sin colores nuevos: · primario sobre ámbar → tinta petróleo (4,94:1 medido). · secundario: en oscuro el ámbar YA es el primario, así que un segundo relleno de color compite y encima no llega a AA. Pasa a botón de borde: superficie, borde teal y tinta clara. ------------------------------------------------------------ */ :root[data-tema="oscuro"] .btn-primario, :root[data-tema="oscuro"] .btn-primario:hover { color: var(--c-petroleo); } :root[data-tema="oscuro"] .btn-secundario, :root[data-tema="oscuro"] .btn-secundario:hover { background: var(--superficie); border: 2px solid var(--foco); color: var(--texto); } /* ------------------------------------------------------------ 17 · LA BASE DEL PANEL SON 20 PX, NO 18. `.fundador` ya pone font-size: var(--fs-fundador) (20 px), pero todo lo que usa --fs-small o --fs-caption explícito se quedaba en 18, y `.fundador .btn` estaba fijado en 1.0625rem (17 px). Eran 398 textos por debajo del suelo del área. En vez de repetir el tamaño elemento por elemento, se redefinen los tokens DENTRO del área: todo lo que ya los usa sube solo. ------------------------------------------------------------ */ .fundador { --fs-small: var(--fs-fundador); /* 20px dentro del panel */ --fs-caption: var(--fs-fundador); --fs-micro: 1rem; /* 16px — solo chips y badges */ } .fundador .btn { font-size: var(--fs-fundador); } .fundador .menu-principal a { font-size: var(--fs-fundador); } .fundador .claim { font-size: 1.375rem; } /* ------------------------------------------------------------ 18 · REMATE DEL PANEL, tras medir la tanda 16–17. 18a · Mi propio fallo del bloque 15. Puse la nota de sugerencia con fondo --tinte-aviso y no fijé el color del texto. Los tintes de aviso/éxito/error NO se remapean en modo oscuro a propósito (son cajas claras autoconsistentes, lo dice tokens.css), pero el texto lo tomaba de --texto, que en oscuro SÍ es claro: claro sobre claro, 1,06:1. Una caja que siempre es clara necesita tinta que siempre sea oscura, con literal y no con token semántico. ------------------------------------------------------------ */ /* Solo en claro: en oscuro el fondo de la caja ya es oscuro (bloque 20) y la tinta clara del tema es la correcta. */ :root:not([data-tema="oscuro"]) .fundador .f-sugerencia-nota, :root:not([data-tema="oscuro"]) .fundador .f-sugerencia-nota strong { color: var(--c-petroleo); } /* 18b · La hora de las salidas de hoy se cortaba con letra extra: a 40 px la hora ocupa 107 px y la caja daba 96. Primero puse min-width en `.salida-hora` y no sirvió de nada: el ancho no lo decidía ese elemento, sino la PRIMERA COLUMNA del grid de la tarjeta (`grid-template-columns: 96px 144px`). Medido antes de volver a tocar. La columna pasa a poder crecer. Regla general: con el control de letra al máximo la tipografía crece un 19 %, así que ninguna columna que contenga texto puede ir en píxeles fijos. minmax() para eso está. */ .fundador .salida-hoy { grid-template-columns: minmax(96px, auto) minmax(0, 1fr); } .fundador .salida-hoy .hora-grande { white-space: nowrap; } /* Y un botón de F3 que no cabía en una línea a letra extra (263 px de texto en 256 de caja): si no cabe, usa dos líneas. */ .fundador .tarea .acciones .btn, .fundador .bandeja .acciones .btn { white-space: normal; height: auto; padding-block: var(--sp-2); } /* 18c · Tamaños que seguían por debajo de los 20 px del panel. Uno es mío otra vez: el bloque 14 fijó `.f-acciones .btn` en 18 px con especificidad 0,3,0, y le ganaba a `.fundador .btn`. Dentro del panel, 20. */ .fundador .f-acciones .btn, .fundador .f-datos .btn, .fundador .f-semaforo-modo .btn, .fundador .btn-primario, .fundador .btn-secundario, .fundador .btn-fantasma { font-size: var(--fs-fundador); } .fundador input, .fundador select, .fundador textarea { font-size: var(--fs-fundador); } .fundador .f-preview-rotulo, .fundador .f-preview-como, .fundador .precio-flotante, .fundador .f-sugerencia-nota { font-size: var(--fs-fundador); } .fundador .badge { font-size: 1rem; } /* etiquetas cortas: suelo 16 */ /* ------------------------------------------------------------ 19 · CIERRE DEL PANEL. 19a · Las tarjetas del semáforo (F6) repetían el mismo patrón que la nota de sugerencia: fondo de tinte de estado —que en modo oscuro sigue siendo CLARO a propósito— y tinta heredada de --texto, que en oscuro es clara. Claro sobre claro: 1,11:1. Se acota al modo oscuro para no pisar los colores de estado del modo claro, que ahí sí son correctos. Regla general que sale de aquí: toda caja cuyo fondo NO se remapee en oscuro necesita fijar su tinta. Si el fondo es constante, el texto también tiene que serlo. ------------------------------------------------------------ */ /* CORREGIDO (misma sesión): esto estaba mal planteado. Fijar tinta petróleo en toda la tarjeta rompía el texto que NO va sobre el tinte claro, sino sobre la superficie oscura: petróleo sobre #0B353D, 1,53:1. Diez fallos nuevos por arreglar doce. La solución está en el bloque 20: remapear el FONDO, no la tinta. */ /* 19b · Los últimos tamaños del panel. Hacen falta cuatro clases de especificidad porque las reglas de origen llevan tres o más; con menos no ganan, y `!important` aquí sería tapar el problema. */ .fundador .f-tarjeta .f-acciones .btn, .fundador .f-rejilla .f-acciones .btn, .fundador .bandeja .acciones .btn, .fundador .tarea .acciones .btn, .fundador .segmento button, .fundador .conmuta-vista button { font-size: var(--fs-fundador); } .fundador .tarea-badges .badge, .fundador .f-tarjeta .badge { font-size: 1rem; } .fundador .tarjeta-tour .media .precio-flotante { font-size: var(--fs-fundador); } /* ------------------------------------------------------------ 20 · LOS TINTES DE ESTADO, REMAPEADOS EN MODO OSCURO. La causa de todos los contrastes del panel en oscuro, de una vez. tokens.css deja --tinte-exito/-aviso/-error sin remapear a propósito: son «cajas claras autoconsistentes». El problema es que esas cajas viven dentro de un tema cuyo texto es claro, así que el texto heredado cae sobre fondo claro: 1,06:1 en la nota de sugerencia, 1,11:1 en las tarjetas del semáforo. Intenté arreglarlo fijando la tinta, y fue peor: dentro de la misma tarjeta hay texto sobre el tinte claro y texto sobre la superficie oscura, así que cualquier color fijo falla en uno de los dos. **La caja es la que tiene que adaptarse al tema**, como hace todo lo demás en oscuro. Acotado a .fundador: es donde está medido. Los tres tonos se derivan del mismo criterio que --tinte oscuro (#124650) —muy oscuros y desaturados, conservando el matiz de estado— y dan 11:1 o más con la tinta clara del tema. ------------------------------------------------------------ */ :root[data-tema="oscuro"] .fundador { /* El fondo y la tinta van EN PAREJA. Oscurecer solo el fondo rompió 86 badges: usan var(--c-exito) —tinta oscura— como color de texto, y quedaron oscuro sobre oscuro (2,25:1). Los dos se remapean juntos: fondos oscuros + las variantes claras de estado que tokens.css ya define para el modo oscuro (hoy solo las usa en .estado.*). Así funcionan los DOS usos que tienen estas cajas: · badges, que pintan la tinta con var(--c-estado) → claro sobre oscuro · tarjetas y notas, que heredan la tinta del tema → claro sobre oscuro */ --tinte-exito: #10382A; --tinte-aviso: #3D2E10; --tinte-error: #3E1A17; --c-exito: #7AD6A8; /* 7,5:1 sobre #10382A */ --c-aviso: #E8C06A; /* 7,6:1 sobre #3D2E10 */ --c-error: #F2A099; /* 7,5:1 sobre #3E1A17 */ } /* ============================================================ CUARTA TANDA — las 13 pantallas del área de guía (14-sep) Nunca se habían auditado: la ruta pide sesión y el auditor medía el aviso de acceso creyendo que medía la pantalla. El gate está en el router, no en el diseño, así que se puede dibujar cada pantalla llamando a su función de render. 190 hallazgos, de los que 19 rompían la maqueta. ============================================================ */ /* ------------------------------------------------------------ 21 · G3 ALERTAS — el título del tour cortado a 72 px. «Ciudad de las Artes y las Ciencias» necesitaba 80 px y tenía 72, en nueve tarjetas. La tarjeta es una rejilla con la primera columna fija (la miniatura), y a 390 px lo que sobra para el texto son 72 px. Error 8 del manual: columna fija con texto dentro. En móvil la tarjeta se apila. ------------------------------------------------------------ */ @media (max-width: 720px) { .tarjeta-alerta { grid-template-columns: minmax(0, 1fr); } .tarjeta-alerta .media, .tarjeta-alerta .ph { max-height: 160px; } } .tarjeta-alerta .cuerpo { min-width: 0; } .tarjeta-alerta .cuerpo .titulo { overflow-wrap: anywhere; text-wrap: pretty; } /* ------------------------------------------------------------ 22 · G2 CALENDARIO — el número del día cortado y celdas < 44 px. Siete columnas en 390 px dejan 50 px por celda, y el número lleva la pastilla «HOY» al lado: juntos piden 60 px. La pastilla baja debajo del número y la celda gana altura para llegar a los 44. ------------------------------------------------------------ */ @media (max-width: 720px) { .rejilla-mes { gap: 3px; } .celda-mes { min-height: var(--tactil); padding: 4px 2px; } .celda-mes .num { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; } .celda-mes .hoy-chip { font-size: 0.625rem; padding: 0 4px; } } /* ------------------------------------------------------------ 23 · G7 PAGOS — la tabla se sale 88 px de la pantalla. Seis columnas no caben en 390 px y no hay nada que las contenga: el desbordamiento arrastra scroll horizontal a toda la página. La tabla pasa a poder deslizarse sola, con la primera columna como ancla para no perder de vista de qué fila se trata. ------------------------------------------------------------ */ @media (max-width: 720px) { .fundador .f-tabla, .tabla-pagos, .tabla-scroll { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tabla-pagos table, .tabla-scroll table { min-width: 34rem; } } /* Red de seguridad: cualquier tabla del área de guía o del fundador que no quepa, se desliza en vez de romper la página. */ @media (max-width: 720px) { main#contenido table { display: block; overflow-x: auto; white-space: nowrap; } main#contenido table th, main#contenido table td { white-space: normal; } } /* ------------------------------------------------------------ 24 · G8 PERFIL — las iniciales del avatar en tipografía ajena. ------------------------------------------------------------ */ .avatar-guia { font-family: var(--font-texto); }