/* PortSync V2.5 · apoyo.css — páginas de apoyo (Banco, Metodología, Fuentes, Privacidad y Mensaje enviado) con la estética
   del sitio nuevo: barra y pie comunes (comun.js), Fraunces para los títulos y DM Sans para el texto, y los roles de color
   claro/oscuro de portsync-tokens.css (html[data-tema="panel"] + el tema que fija comun.js). Va DESPUÉS de las hojas de
   cada página: solo cambia la envoltura (fondo, letra, barra, pie); el contenido y su funcionamiento no se tocan. */
:root { --font-sans: var(--f-texto); }
html { background: var(--c-fondo); }
body { font-family: var(--f-texto); font-size: var(--t-cuerpo, 17px); line-height: var(--lh-cuerpo, 1.65); color: var(--c-tinta); }

/* Metodología, Fuentes, Privacidad, Enviado */
.pagina-fondo { background: radial-gradient(110% 55% at 50% 0, color-mix(in srgb, var(--azul-700) 22%, transparent) 0, transparent 70%), var(--c-fondo); color: var(--c-tinta); }
:root[data-theme="light"] .pagina-fondo { background: radial-gradient(110% 55% at 50% 0, color-mix(in srgb, var(--azul-300) 28%, transparent) 0, transparent 70%), var(--c-fondo); }
.pagina { padding-top: calc(76px + 7vh); }
.pagina h1, .pagina h2, .pagina h3, .bn-main h1, .bn-main h2, .bn-main h3 { font-family: var(--f-titulo); font-weight: var(--peso-titulo); letter-spacing: var(--tr-titulo); font-optical-sizing: auto; }
.pagina h1 { font-size: var(--t-h1); line-height: var(--lh-titulo); }
.pagina h2 { font-size: var(--t-h2); }
.pagina h3 { font-size: var(--t-h3); }

/* Banco: la barra común sustituye a la cabecera propia (queda la franja de rótulos y el botón «Volver al panel») */
.bn-top { position: static; padding-top: calc(76px + 6px); }
.bn-top .bn-top-fila { padding-block: 8px 0; }
.bn-sub { display: none; }

/* pie común: separado del contenido */
.c-pie { margin: 56px 12px 12px; }

/* los vidrios de secciones.css y metodologia.css son solo oscuros: aquí siguen el tema (claro/oscuro) de comun.js */
:root { --vidrio-tarjeta: var(--c-tarjeta); }
:root[data-theme="light"] .dato--sup { box-shadow: inset 0 0 0 1px var(--c-linea-fuerte); background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--c-linea) 6px 7px); }
:root[data-theme="light"] .dato--sim { background: var(--c-hundido); border-bottom-color: var(--c-linea-fuerte); }
:root[data-theme="light"] .pagina .aviso { box-shadow: inset 0 0 0 1px var(--c-linea-fuerte); }

/* las tablas anchas se desplazan dentro de su caja (en el teléfono ensanchaban toda la página) */
.pagina, .tabla-scroll { min-width: 0; max-width: 100%; }
.tabla-scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }   /* los .sr de las celdas son absolutos: sin esto se salían de la caja */