/* ========================================================================== dniecitaprevia.es — app.css · relanzamiento 2026, dirección «portal» Hoja única. Sin frameworks, sin JS. Tipografía: Libre Franklin (texto), Source Serif 4 (solo logotipo), IBM Plex Mono (números de documento). Self-hosted, subset latino, swap. Si se quiere 0 KB de fuentes: borrar los @font-face y dejar --sans. Nombres de clase del sitio actual conservados: .top .bar .logo .nav .menu .crumbs .hero .lede .answer .sec .nota .btn .cta .tabla-wrap .faq .fuentes .buscador .grid .card .ofi .estado .tag .tool .visor-doc .punto .preg .generados .foot ========================================================================== */ /* Subset latin de Google Fonts, autoalojado. Dos cosas que estaban mal antes: 1. Los tres archivos de Libre Franklin eran EL MISMO y ninguno era Libre Franklin: renderizaban una serif, así que todo el sitio salía con una tipografía que no es la del diseño. Google la sirve como fuente VARIABLE, un solo archivo para todo el eje de peso, así que va declarada una vez con `font-weight: 100 900`. 2. El unicode-range era `U+0000-00FF, U+2018-201E, U+20AC`, que deja fuera el guion medio U+2013. Los horarios de oficina se escriben «09:00–14:30» con ese guion, así que ese carácter caía al fallback del sistema en medio de la palabra. Se usa el rango latin completo que publica Google. */ @font-face { font-family: "Libre Franklin"; src: url("/assets/fonts/libre-franklin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif 4"; src: url("/assets/fonts/source-serif-600.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* institucional */ --pizarra: #1c3a52; /* cabecera, pie, acción principal */ --pizarra-osc: #14293a; /* hover */ --pizarra-suave: #f1f5f8; /* superficies y bloques destacados */ --bandera-rojo: #ad1519; --bandera-amarillo: #fabd00; --oro: #c9a24a; /* filete de nota y marca del día de hoy */ --oro-fondo: #fdf9ef; --oro-linea: #e6d6a8; --oro-txt: #5a4711; /* estados */ --verde: #0e5c34; --verde-fondo: #e4f1e9; --verde-linea: #bcdcc8; --rojo: #8f2318; --rojo-fondo: #fbeceb; --rojo-linea: #eccfcc; /* neutros */ --txt: #1a1d21; --txt-2: #33393f; --gris: #4a545e; --gris-3: #6b7580; --linea: #d5d9dd; --linea-suave: #e8ebee; --fondo: #fff; /* tipografía */ --sans: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --serif: "Source Serif 4", Georgia, serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* espaciado en escala de 4 */ --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 2.75rem; --e8: 3.5rem; /* OJO: --ancho es el max-width del CONTENEDOR, y todos los contenedores llevan 40 px de padding lateral. Con 1180 la caja de contenido quedaba en 1100 (que es lo que hace el prototipo, donde el grid mide 1100). Se sube a 1260 para que la caja de contenido —y por tanto .col-2, la banda del hero, la cabecera y el pie— midan los 1180 pedidos. */ --ancho: 1260px; --pad-arriba: 40px; /* padding superior de main; la banda del hero lo cancela */ --foco: 3px solid var(--bandera-amarillo); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* `[hidden]` solo está declarado en la hoja del navegador, así que CUALQUIER `display` de autor lo anula sin avisar: `.card { display: block }` y `.ofi { display: grid }` dejaban el elemento a la vista aunque el buscador le pusiera el atributo, y el filtro no ocultaba nada. Va con !important a propósito: si no, hay que acordarse de acotarlo caso por caso, que es justo lo que falló (ver el parche local de `.visor-doc [hidden]`). */ [hidden] { display: none !important; } body { margin: 0; background: var(--fondo); color: var(--txt); font-family: var(--sans); font-size: 18px; line-height: 1.6; } h1, h2, h3 { font-weight: 700; letter-spacing: -.025em; } h1 { font-size: 44px; line-height: 1.1; margin: 0 0 var(--e3); } h2 { font-size: 28px; margin: 0 0 var(--e4); } h3 { font-size: 22px; margin: var(--e5) 0 var(--e2); } p, li { text-wrap: pretty; } a { color: var(--pizarra); text-underline-offset: 3px; } a:hover { color: var(--pizarra-osc); } img { max-width: 100%; height: auto; } code, kbd, samp { font-family: var(--mono); font-size: .92em; } :focus-visible { outline: var(--foco); outline-offset: 2px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--pizarra); color: #fff; padding: .7rem 1.1rem; } .skip:focus { left: 0; } /* ── franja de la bandera ────────────────────────────────────────────────── Solo color: nunca acompañada de escudo, placa ni membrete. */ .franja { display: flex; height: 5px; } .franja::before, .franja::after { content: ""; flex: 0 0 22%; background: var(--bandera-rojo); } .franja span { flex: 1; background: var(--bandera-amarillo); } /* ── cabecera ──────────────────────────────────────────────────────────── */ .top { background: var(--pizarra); color: #fff; } .top-aviso { border-bottom: 1px solid rgba(255,255,255,.14); } .top-aviso > div { max-width: var(--ancho); margin: 0 auto; padding: 8px 40px; display: flex; align-items: center; gap: 16px; font-size: 13.5px; color: #c9d7e2; } .top-aviso a { color: #fff; } .bar { max-width: var(--ancho); margin: 0 auto; padding: 20px 40px 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 18px 34px; } .logo { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: #fff; flex: none; } .logo svg { display: block; } .logo-txt, .logo-nombre { font-family: var(--serif); font-size: 20px; color: #fff; white-space: nowrap; } .nav { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 26px; font-size: 16px; } .nav a { color: #fff; text-decoration: none; white-space: nowrap; padding-bottom: 2px; border-bottom: 2px solid transparent; } .nav a:hover { border-bottom-color: rgba(255,255,255,.5); color: #fff; } .nav a[aria-current="page"] { border-bottom-color: #fff; } /* ── desplegables de la barra ────────────────────────────────────────────── Cada entrada abre su grupo de partials/nav.php. Sin JavaScript: :hover para el ratón (82% de la audiencia) y :focus-within para el teclado. El panel arranca en display:none, así que no es enfocable; se abre al enfocar el enlace de cabecera, que sí es visible, y a partir de ahí el tabulador entra en él. En táctil no hay hover, pero ahí se usa el menú hamburguesa, que lleva estas mismas entradas. */ .nav-grupo { position: relative; } /* El padding negativo extiende el área sensible hasta el panel sin mover el layout: sin él, el ratón cruza un hueco muerto entre la etiqueta y el desplegable y este se cierra. */ .nav-grupo { padding-bottom: 18px; margin-bottom: -18px; } .nav-top { display: inline-flex; align-items: center; gap: 7px; } .nav-top::after { content: ""; width: 0; height: 0; flex: none; border: 4px solid transparent; border-top-color: currentColor; margin-top: 3px; } .nav .nav-top.activo { border-bottom-color: #fff; } .nav-panel { display: none; position: absolute; left: 0; top: 100%; z-index: 40; min-width: 15rem; flex-direction: column; padding: 6px; background: #fff; border: 1px solid var(--linea); box-shadow: 0 12px 28px rgba(0,0,0,.22); } .nav-grupo:hover > .nav-panel, .nav-grupo:focus-within > .nav-panel { display: flex; } /* Con dos clases para ganarle a `.nav a`, que pinta el texto en blanco: aquí el fondo del panel es blanco. Empatar en especificidad y confiar en el orden ya ha fallado antes. */ .nav .nav-panel a { color: var(--txt); padding: 10px 12px; min-height: 44px; display: flex; align-items: center; border-bottom: 0; white-space: nowrap; } .nav .nav-panel a:hover { background: var(--pizarra-suave); color: var(--txt); } .nav .nav-panel a[aria-current="page"] { background: var(--pizarra-suave); font-weight: 600; } .menu { display: none; margin-left: auto; position: relative; } .menu summary { list-style: none; cursor: pointer; color: #fff; border: 1px solid rgba(255,255,255,.4); padding: 8px 14px; font-size: 16px; min-height: 44px; display: flex; align-items: center; } .menu summary::-webkit-details-marker { display: none; } /* max-height + scroll: el menú lleva las mismas entradas que el pie (seis grupos), así que sin acotarlo se sale de la ventana en un móvil. */ .menu nav { position: absolute; right: 0; top: 3.2rem; z-index: 30; min-width: 17rem; max-height: 74vh; overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid var(--linea); display: flex; flex-direction: column; padding: 4px; } .menu-tit { margin: 12px 14px 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); } .menu nav > .menu-tit:first-child { margin-top: 4px; } .menu nav a { padding: 13px 14px; min-height: 44px; display: flex; align-items: center; text-decoration: none; color: var(--txt); } .menu nav a:hover { background: var(--pizarra-suave); } /* ── estructura ────────────────────────────────────────────────────────── */ /* padding 40/40/72 son los valores del prototipo (lo confirma su propio inspector). El CSS entregado traía 28 arriba y 56 abajo, que aprieta el contenido contra la banda del hero. El lateral, 40, siempre coincidió: el ancho nunca fue el problema. El de arriba va en variable porque la banda del hero tiene que cancelarlo con un margen negativo del MISMO valor; si se tocan por separado aparece una franja blanca entre la franja de bandera y la banda. */ main { max-width: var(--ancho); margin: 0 auto; padding: var(--pad-arriba) 40px 72px; } main.wide { max-width: 1320px; } /* Valores del prototipo (Vista 2): 1fr 300px con gap 56 sobre un contenedor de 1180 → columna de contenido de 744 px. Los topes de medida del sistema están calculados para ese ancho: `.answer` a 64ch ocupa el 93 % de la columna, que es por lo que en el diseño parece que va a sangre. Al ensanchar el contenedor esa proporción se rompe y el bloque queda flotando con 200 px de hueco al lado. */ .col-2 { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; } /* min-width: 0 es obligatorio, no cosmética. Una pista `1fr` lleva `min-width: auto`, así que no puede encogerse por debajo del contenido mínimo de la columna. Con una tabla ancha dentro, la columna se estiraba hasta caber —933 px en /pedir-cita-dni y 937 en /numero-de-soporte-dni frente a los 732 del resto— y cada página salía de un ancho. Con esto la columna mide igual en las 372 URLs y la tabla scrollea dentro de .tabla-wrap, que es justo para lo que está. */ .col-2 > div { min-width: 0; } .col-2 aside { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 18px; } /* Acotado a `section` a propósito: `.sec` es también el modificador del botón secundario (`.btn.sec`), así que sin acotar le caía el margen de 44 px de la sección y el botón deformaba la línea del `.cta`. Todos los `.sec` del sitio son
. */ /* scroll-margin: al saltar desde el índice lateral, el h2 no queda pegado al borde. */ section.sec { margin: var(--e7) 0; scroll-margin-top: 24px; } section.sec > h2 { border-bottom: 2px solid var(--txt); padding-bottom: 12px; margin-bottom: var(--e5); } section.sec p, section.sec li { color: var(--txt-2); max-width: 66ch; } .crumbs { font-size: 15px; margin-bottom: 26px; } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .crumbs li + li::before { content: ">"; margin-right: 8px; color: var(--gris-3); } .crumbs a { color: var(--pizarra); } .crumbs [aria-current="page"] { color: var(--gris); } /* ── hero ──────────────────────────────────────────────────────────────── */ .hero { padding: 0 0 var(--e5); } .hero .kicker { margin: 0 0 var(--e4); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pizarra); } .hero h1 { max-width: 26ch; } .lede { font-size: 20px; line-height: 1.6; color: var(--txt-2); margin: 0 0 var(--e5); max-width: 64ch; } .hero-portada h1 { font-size: 56px; line-height: 1.06; max-width: 18ch; text-wrap: balance; } .hero-portada .lede { font-size: 21px; max-width: 56ch; } /* Solo filete superior: el prototipo lleva `padding:14px 0 0` con `border-top` y nada debajo. El CSS entregado añadía un `border-bottom` que dibuja una segunda línea dentro de la banda del hero, justo donde el diseño no tiene ninguna. */ .meta-linea { border-top: 1px solid var(--linea); padding: 14px 0 0; margin-bottom: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 15px; color: var(--gris); } /* «·» separador y botón Compartir de la línea de metadatos. El botón se pinta como enlace porque no navega: dispara la hoja de compartir del sistema o copia la URL. */ .meta-linea .sep { color: #c3c8cd; } /* Compartir:
con el menú colgando. `position: relative` va en el
para que el menú se ancle al botón y no a la banda del hero. */ .meta-linea .compartir { margin-left: auto; position: relative; } .meta-linea .compartir > summary { list-style: none; cursor: pointer; font-size: 15px; color: var(--pizarra); text-decoration: underline; text-underline-offset: 3px; } .meta-linea .compartir > summary::-webkit-details-marker { display: none; } .meta-linea .compartir > summary:hover { color: var(--pizarra-osc); } .compartir-menu { position: absolute; right: 0; top: 28px; z-index: 20; min-width: 12rem; background: #fff; border: 1px solid var(--linea); display: flex; flex-direction: column; padding: 4px; } .compartir-menu a, .compartir-menu button { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 16px; text-align: left; text-decoration: none; color: var(--txt); background: none; border: none; cursor: pointer; } .compartir-menu a:hover, .compartir-menu button:hover { background: var(--pizarra-suave); color: var(--txt); } /* ── bloque de respuesta directa ───────────────────────────────────────── */ .answer { background: var(--pizarra-suave); border-left: 5px solid var(--pizarra); padding: 24px 26px; margin: var(--e5) 0; max-width: 64ch; } .answer > h2, .answer > .answer-cab { margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pizarra); } .answer p { margin: 0 0 12px; font-size: 19px; line-height: 1.6; } .answer p:last-child { margin-bottom: 0; } /* variante en tarjeta, para la portada */ .answer.destacado { background: #fff; border: 1px solid var(--linea); border-top: 5px solid var(--pizarra); padding: 22px 26px; } .answer .verificado { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea-suave); font-size: 14.5px; color: var(--gris); } /* ── notas ─────────────────────────────────────────────────────────────── */ .nota { background: var(--pizarra-suave); border-left: 5px solid var(--pizarra); padding: 16px 20px; margin: var(--e4) 0; font-size: 16.5px; line-height: 1.55; color: var(--txt-2); max-width: 64ch; } .nota.aviso { background: var(--oro-fondo); border-left-color: var(--oro); color: var(--oro-txt); } .nota.ok { background: var(--verde-fondo); border-left-color: var(--verde); color: var(--verde); } /* ── botones ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--pizarra); color: #fff; text-decoration: none; font: inherit; font-weight: 600; font-size: 17px; padding: 15px 24px; min-height: 48px; border: 1.5px solid var(--pizarra); border-radius: 0; cursor: pointer; } .btn:hover { background: var(--pizarra-osc); border-color: var(--pizarra-osc); color: #fff; } .btn.sec { background: #fff; color: var(--pizarra); } .btn.sec:hover { background: var(--pizarra-suave); color: var(--pizarra); } .btn.acento { background: var(--bandera-amarillo); border-color: var(--bandera-amarillo); color: var(--txt); font-weight: 700; } .btn.acento:hover { background: #ffcf33; border-color: #ffcf33; color: var(--txt); } .btn.txt { background: none; border: none; border-bottom: 2px solid var(--pizarra); color: var(--pizarra); padding: 6px 2px; min-height: 0; } .btn.txt:hover { background: none; color: var(--pizarra-osc); } .btn[aria-disabled="true"], .btn:disabled { background: var(--pizarra-suave); color: #8b939b; border-color: var(--linea); pointer-events: none; } .cta { margin: var(--e5) 0; display: flex; gap: 12px; flex-wrap: wrap; } .cta-nota { display: block; width: 100%; font-size: 14px; color: var(--gris); margin-top: 8px; } /* ── tablas ────────────────────────────────────────────────────────────── */ .tabla-wrap { overflow-x: auto; margin-bottom: var(--e4); } table { border-collapse: collapse; width: 100%; font-size: 17px; white-space: nowrap; } thead tr { background: var(--pizarra-suave); } thead th { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--linea); font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); font-weight: 600; } tbody th { text-align: left; font-weight: 400; padding: 12px 16px; border-bottom: 1px solid var(--linea-suave); } tbody td { padding: 12px 16px; border-bottom: 1px solid var(--linea-suave); text-align: right; font-variant-numeric: tabular-nums; } tbody td.cerrado { color: var(--gris-3); } tbody tr.hoy { background: var(--pizarra-suave); } tbody tr.hoy th { font-weight: 700; box-shadow: inset 4px 0 0 var(--oro); border-bottom-color: var(--linea); } tbody tr.hoy td { font-weight: 700; border-bottom-color: var(--linea); } tbody tr:last-child th, tbody tr:last-child td { border-bottom: none; } /* ── FAQ ───────────────────────────────────────────────────────────────── */ .faq details { border-bottom: 1px solid var(--linea); padding: 20px 0; } .faq summary { cursor: pointer; font-weight: 700; font-size: 20px; letter-spacing: -.02em; list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; } .faq summary::after { content: "+"; color: var(--pizarra); font-size: 22px; line-height: 1; } .faq details[open] summary::after { content: "−"; } .faq details > :not(summary) { margin: 12px 0 0; font-size: 18px; line-height: 1.6; color: var(--txt-2); max-width: 66ch; } /* ── fuentes / confianza ───────────────────────────────────────────────── */ .fuentes { border: 1px solid var(--linea); border-left: 5px solid var(--oro); background: var(--oro-fondo); padding: 24px 26px; margin: var(--e6) 0; } .fuentes h2, .fuentes b { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--oro-txt); } .fuentes ul, .fuentes ol { margin: 12px 0 0; padding-left: 22px; font-size: 17px; color: var(--txt-2); line-height: 1.8; } .verificado { font-size: 14.5px; color: var(--gris); display: inline-flex; align-items: center; gap: 10px; } /* ── buscador ──────────────────────────────────────────────────────────── */ .buscador { position: relative; max-width: 560px; } .buscador svg { position: absolute; left: 16px; top: 17px; color: var(--gris); pointer-events: none; } .buscador input { width: 100%; font: inherit; font-size: 17.5px; padding: 15px 16px 15px 48px; border: 2px solid var(--pizarra); background: #fff; color: var(--txt); } .buscador input:focus { outline: var(--foco); outline-offset: 2px; } /* Resaltado de la coincidencia (lo pone buscador.js). El amarillo puro del navegador se come el azul del enlace, así que se baja a un oro de fondo y el texto conserva su color: sobre este tono, tanto --txt como --pizarra siguen por encima de AA. El subrayado inferior es lo que lo mantiene visible en el hover de la tarjeta, donde cambia el fondo. */ mark { background: #fbedbe; color: inherit; box-shadow: inset 0 -2px var(--bandera-amarillo); } .buscador-n { font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); border-bottom: 2px solid var(--txt); padding-bottom: 12px; margin: 0 0 6px; } /* cabecera de listado provincial */ .hub { background: var(--pizarra-suave); border-bottom: 1px solid var(--linea); } .hub > div { max-width: var(--ancho); margin: 0 auto; padding: 26px 40px 34px; } /* ── tarjetas de navegación (rejilla sin cajas) ────────────────────────── */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0; } .grid.g3 { grid-template-columns: repeat(3, 1fr); } .card { display: block; padding: 26px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--linea); border-right: 1px solid var(--linea); } .card:hover { background: var(--pizarra-suave); color: inherit; } .card .ico { display: block; color: var(--pizarra); margin-bottom: 18px; } .card b { display: block; font-size: 21px; letter-spacing: -.02em; margin-bottom: 7px; } .card span { color: var(--gris); font-size: 16.5px; line-height: 1.5; } /* ── oficinas ──────────────────────────────────────────────────────────── */ .ofi { display: grid; grid-template-columns: 1fr 220px 170px; gap: 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--linea-suave); text-decoration: none; color: inherit; } a.ofi:hover { background: var(--pizarra-suave); color: inherit; } .ofi h3, .ofi b { margin: 0 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -.015em; } .ofi .dir { color: var(--gris); font-size: 16.5px; margin: 0; } .ofi .hoy { text-align: right; } .ofi .hoy span { display: block; font-size: 15.5px; color: var(--gris); margin-top: 6px; font-variant-numeric: tabular-nums; } .ofi dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 10px 0 0; font-size: 16px; } .ofi dt { color: var(--gris); } .ofi dd { margin: 0; } /* píldora de estado: el color nunca va solo, siempre con texto */ .estado { display: inline-block; font-weight: 700; font-size: 16.5px; padding: 11px 17px; border: 1px solid transparent; white-space: nowrap; } .estado.abierto { background: var(--verde-fondo); color: var(--verde); border-color: var(--verde-linea); } .estado.cerrado { background: var(--rojo-fondo); color: var(--rojo); border-color: var(--rojo-linea); } .estado.sm { font-size: 15px; padding: 6px 12px; border: none; } .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .tag { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gris); border: 1px solid var(--linea); padding: 4px 10px; } .tag.destaca { background: var(--oro-fondo); border-color: var(--oro-linea); color: var(--oro-txt); font-weight: 600; } /* panel lateral */ .panel { border: 1px solid var(--linea); padding: 22px; } .panel.destacado { border-top: 5px solid var(--pizarra); } .panel.oscuro { background: var(--pizarra); color: #fff; border: none; padding: 24px; } .panel.oscuro a { color: var(--bandera-amarillo); } .panel b { display: block; font-size: 17px; margin-bottom: 8px; } /* 17 y 15,5, no 18 y 16: son los del prototipo. */ .panel p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.55; color: var(--gris); } .panel.oscuro p { color: #c9d7e2; } .mapa-ph { height: 130px; border: 1px solid #dfe3e7; margin-bottom: 14px; background: repeating-linear-gradient(135deg, #eef2f5, #eef2f5 9px, #e3e9ee 9px, #e3e9ee 18px); display: flex; align-items: center; justify-content: center; } /* índice «en esta página» */ .indice { border-top: 2px solid var(--txt); padding-top: 14px; } .indice p { margin: 0 0 12px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); } /* 16px, no los 18 del cuerpo: el prototipo pone `font-size:16px` en el contenedor de los enlaces y sin declararlo aquí heredaban el tamaño del body. El padding vertical de 5 equivale al `gap:10` del prototipo (25,6 + 10 = 35,6 px por ítem en los dos). */ .indice a { display: block; text-decoration: none; color: var(--txt-2); font-size: 16px; padding: 5px 0 5px 15px; } .indice a[aria-current] { color: var(--pizarra); font-weight: 600; border-left: 3px solid var(--oro); padding-left: 12px; } /* ── herramientas ──────────────────────────────────────────────────────── */ .tool { border: 1px solid var(--linea); border-top: 5px solid var(--pizarra); margin: var(--e5) 0; } .tool .cuerpo { padding: 28px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; } .tool label { display: block; font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pizarra); margin-bottom: 12px; } .tool .pista { margin: 12px 0 0; font-size: 15.5px; color: var(--gris); } /* El campo se ajusta a lo que va a contener: 9 caracteres, que es un NIE completo (letra inicial + 8 cifras). A ancho de columna el número se escribía pegado a la izquierda y dejaba media caja vacía a la derecha, como si el campo estuviera siempre a medio llenar. El cálculo suma el ancho de 9 caracteres (9ch), el letter-spacing que arrastran (9 × .1em), el padding y los bordes. Sigue con width:100% para que en móvil se encoja. */ .tool input[type="text"] { width: 100%; max-width: calc(9ch + .9em + 40px); font-family: var(--mono); font-size: 40px; letter-spacing: .1em; padding: 14px 18px; border: 2px solid var(--pizarra); background: #fff; color: var(--txt); } .tool input[type="text"]:focus { outline: var(--foco); outline-offset: 2px; } .tool input.err { border-color: var(--rojo); } .tool .out { background: var(--pizarra-suave); padding: 26px 28px; min-height: 180px; display: flex; flex-direction: column; justify-content: center; } .tool .out-label { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); } .tool .res { font-family: var(--mono); font-size: 44px; font-weight: 500; letter-spacing: .04em; line-height: 1.15; margin-top: 8px; color: var(--verde); } /* #8b939b sobre --pizarra-suave da 2,84:1: por debajo del 3:1 que pide AA incluso para texto grande. Antes no saltaba porque el estado vacío no pintaba texto; desde que muestra un hueco por cifra («········») es texto real y hay que medirlo. --gris-3 da 4,27:1. Es la landing nº1 del sitio, así que aquí no se negocia. */ .tool .res.vacio { color: var(--gris-3); } .tool .err { color: var(--rojo); font-weight: 600; } .copiar { margin-top: 16px; align-self: flex-start; background: #fff; border: 1.5px solid var(--pizarra); color: var(--pizarra); font: inherit; font-size: 15.5px; font-weight: 600; padding: 11px 18px; min-height: 44px; cursor: pointer; } .copiar:hover { background: var(--pizarra); color: #fff; } .preg { margin-bottom: 18px; } .preg label { display: block; font-size: 16px; font-weight: 600; margin-bottom: 8px; } .preg select { width: 100%; font: inherit; font-size: 17px; padding: 13px 14px; border: 1.5px solid var(--linea); background: #fff; min-height: 48px; } .preg select:focus { outline: var(--foco); outline-offset: 1px; } .tasa-out { background: var(--pizarra-suave); border-left: 5px solid var(--pizarra); padding: 24px 26px; display: flex; align-items: center; gap: 22px; } .tasa-out b { font-size: 46px; font-weight: 700; color: var(--pizarra); line-height: 1; letter-spacing: -.03em; white-space: nowrap; flex: none; } .tasa-out span { font-size: 16.5px; color: var(--txt-2); line-height: 1.5; flex: 1; min-width: 0; } .visor-tabs { display: flex; border: 1px solid var(--linea); margin-bottom: 18px; } /* flex:1 1 0 + min-width:0 para que las pestañas puedan encoger por debajo de su texto: con `flex:1` a secas el min-width:auto las hace desbordar el ancho de móvil. */ .tab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; font: inherit; font-size: 16px; padding: 11px 12px; min-height: 48px; cursor: pointer; background: #fff; border: none; color: var(--txt-2); } .tab small { font-size: 13.5px; opacity: .75; } .tab.activo { background: var(--pizarra); color: #fff; font-weight: 600; } .tab.activo small { opacity: .85; font-weight: 400; } .visor-doc { position: relative; border: 1px solid var(--linea); } .visor-doc img, .visor-doc svg { display: block; width: 100%; height: auto; } .visor-doc [hidden] { display: none; } .punto { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: var(--pizarra); color: #fff; font-family: var(--mono); font-weight: 500; font-size: 14px; cursor: pointer; box-shadow: 0 0 0 3px rgba(28,58,82,.2); } .punto:hover, .punto.activo { background: var(--bandera-amarillo); color: var(--txt); box-shadow: 0 0 0 4px rgba(250,189,0,.35); } /* Tipografía del esquema del documento (partials/dni-svg.php). Los tamaños están en unidades del viewBox 856×540, así que escalan solos con la tarjeta. */ .doc-svg text { fill: #2c3138; } .doc-svg .d-tit { font-size: 32px; font-weight: 700; fill: #1a4b8c; letter-spacing: .5px; } .doc-svg .d-sub { font-size: 14px; font-weight: 600; fill: #b3283a; letter-spacing: 1.4px; } .doc-svg .d-lbl { font-size: 13px; font-weight: 600; fill: #71818e; letter-spacing: 1.1px; } .doc-svg .d-val { font-family: var(--mono); font-size: 25px; letter-spacing: 1px; } .doc-svg .d-dni { font-family: var(--mono); font-size: 42px; font-weight: 600; letter-spacing: 1px; } .doc-svg .d-can { font-family: var(--mono); font-size: 30px; fill: #4a545e; letter-spacing: 2px; } .doc-svg .d-eq { font-family: var(--mono); font-size: 21px; letter-spacing: 1px; } .doc-svg .d-mrz { font-family: var(--mono); font-size: 30px; letter-spacing: 2.2px; } .doc-svg .d-fant { font-size: 15px; fill: #b3ab99; letter-spacing: 2px; } .doc-svg .d-pie { font-size: 12px; fill: #71818e; letter-spacing: .8px; } .visor-info { margin-top: 18px; border: 1px solid var(--linea); border-left: 5px solid var(--pizarra); padding: 20px 22px; min-height: 120px; } .visor-info b { display: block; font-size: 19px; letter-spacing: -.02em; margin-bottom: 6px; } .visor-info p { margin: 0; font-size: 16.5px; color: var(--txt-2); line-height: 1.55; } .generados { list-style: none; padding: 0; margin: var(--e3) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 10px; font-family: var(--mono); font-size: 17px; } .generados li { border: 1px solid var(--linea); padding: 14px 12px; text-align: center; } /* Distancia en el listado de «oficinas cerca de mí» (assets/js/tools/cercanas.js). Va con la mono y tabular para que las cifras queden alineadas entre filas. */ .ofi .km { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 500; color: var(--pizarra); white-space: nowrap; /* La mono del sitio hereda tracking del contenedor y «1,4 km» salía descosido. */ letter-spacing: 0; } #cerca-salida { margin-top: var(--e3); } #cerca[disabled] { opacity: .6; cursor: progress; } /* ── infografías ───────────────────────────────────────────────────────── */ .info { margin: var(--e6) 0; } .info img, .info svg { width: 100%; height: auto; border: 1px solid var(--linea); } .info figcaption { font-size: 15px; color: var(--gris); margin-top: 8px; } /* Esquema estático del documento (sb_dni_esquema() en partials/dni-svg.php). Reutiliza .visor-doc y .punto del visor interactivo; lo único propio es el punto NO interactivo y la caja de la figura. `.punto` trae cursor:pointer y :hover porque allí son botones: acá son marcas, así que hay que anular las dos cosas o el usuario intenta pulsarlas. */ .esquema { margin: var(--e5) 0; } .esquema .visor-doc { max-width: 560px; } .esquema .punto { cursor: default; } .esquema .punto.fijo, .esquema .punto.fijo:hover { background: var(--bandera-amarillo); color: var(--txt); box-shadow: 0 0 0 4px rgba(250,189,0,.35); } .esquema .punto.ctx, .esquema .punto.ctx:hover { background: #fff; color: var(--gris); box-shadow: 0 0 0 2px var(--linea); font-size: 13px; width: 26px; height: 26px; } .esquema figcaption { font-size: 15.5px; color: var(--txt-2); line-height: 1.55; margin-top: 14px; max-width: 62ch; } .esquema figcaption b { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 5px; vertical-align: -5px; background: var(--bandera-amarillo); color: var(--txt); font-family: var(--mono); font-size: 13px; font-weight: 500; } /* El número de contexto se pinta igual en el pie que sobre la tarjeta (.punto.ctx). Si aquí saliera amarillo como el destacado, los dos parecerían el mismo tipo de marca. El borde va con box-shadow interior, no con border, para no alterar la caja de 22×22. */ .esquema figcaption b.ctx { background: #fff; color: var(--gris); box-shadow: inset 0 0 0 1.5px var(--linea); } .esquema-cara { color: var(--gris); } /* Comparativa 3.0 / 4.0 de /dni-4-0: dos tarjetas a la par. */ .esquema-par { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } .esquema.comparativa .visor-doc { max-width: none; } .esquema-cap { margin: 12px 0 0; font-size: 15.5px; line-height: 1.5; } .esquema-cap b { display: block; font-size: 17px; color: var(--pizarra); } .esquema-cap span { color: var(--txt-2); } @media (max-width: 40rem) { .esquema-par { grid-template-columns: 1fr; gap: 24px; } } /* ── pie ───────────────────────────────────────────────────────────────── */ .foot { background: var(--pizarra); color: #c9d7e2; } /* Sin max-width/margin/padding lateral propios: ya los pone .foot-in, que envuelve las tres filas del pie. Repetirlos metía las columnas 40 px más adentro que la línea legal. */ /* Marca a la izquierda y el mapa del sitio a la derecha. El mapa es su propia rejilla en vez de columnas hermanas de la marca porque son seis grupos (partials/nav.php): con auto-fit se reparten en las filas que hagan falta según el ancho, sin tener que declarar un número. */ .foot-cols { padding: 48px 0 28px; display: grid; grid-template-columns: minmax(190px, .9fr) 3.6fr; gap: 40px; } /* Cinco columnas declaradas, no auto-fit: con auto-fit el número dependía del ancho exacto sobrante y bastaba un píxel de más para que el quinto grupo cayera a una segunda fila dejando un hueco al lado. minmax(0,1fr) para que una etiqueta larga no ensanche su columna. */ .foot-links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; } .foot h3 { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin: 0 0 14px; } /* Isotipo y wordmark en fila, como el pie del diseño entregado (gap 12, centrados). */ .foot-logo { display: flex; flex-direction: row; align-items: center; gap: 12px; margin-bottom: 14px; } .foot-marca p { max-width: 34ch; } .foot-col > div { display: flex; flex-direction: column; gap: 9px; } .foot-cols a { color: #c9d7e2; text-decoration: none; font-size: 15.5px; } .foot-cols a:hover { color: #fff; text-decoration: underline; } .foot p { font-size: 15.5px; line-height: 1.6; } /* margin 0 y no `0 auto`: con el max-width de 104ch de abajo, el auto centraba el párrafo y lo descolgaba de la línea de las columnas. */ .disclaimer, .legal { margin: 0; } /* Sin max-width: el borde superior hace de separador de todo el pie, así que tiene que cruzar el ancho completo. Acotarlo a 104ch dejaba la línea colgando a media caja. */ .disclaimer { border-top: 1px solid rgba(255,255,255,.16); padding-top: 22px; font-size: 15px; line-height: 1.6; } .disclaimer strong, .disclaimer a { color: #fff; } .legal { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; padding-bottom: 40px; font-size: 15px; } .legal a { color: #c9d7e2; text-decoration: none; } .legal a:hover { color: #fff; text-decoration: underline; } .legal span { margin-left: auto; color: #9fb5c7; } /* ── responsive (el 18% de móvil) ──────────────────────────────────────── */ @media (max-width: 64rem) { .col-2 { grid-template-columns: 1fr; gap: 32px; } .col-2 aside { position: static; } /* El colapso de .hero-in.portada NO va aquí: su regla base se declara más abajo, en los añadidos de integración, y con la misma especificidad ganaría la última del archivo. Está junto a esa regla para que no vuelva a quedar muerta. */ .grid.g3 { grid-template-columns: 1fr 1fr; } .tool .cuerpo { grid-template-columns: 1fr; gap: 24px; } .ofi { grid-template-columns: 1fr 170px; } .ofi .tags { display: none; } /* La marca pasa arriba y el mapa del sitio ocupa el ancho completo, con las columnas que quepan: por debajo de 64rem cinco quedarían demasiado estrechas. */ .foot-cols { grid-template-columns: 1fr; gap: 32px; } .foot-links { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } } @media (max-width: 46rem) { body { font-size: 17px; } .nav { display: none; } .menu { display: block; } .bar { padding: 14px 16px; gap: 14px; } .top-aviso > div { padding: 8px 16px; font-size: 13px; } /* En móvil el padding superior baja a 20, así que la variable baja con él: si no, la banda seguiría restando 40 y se comería 20 px por arriba. */ :root { --pad-arriba: 20px; } main { padding: var(--pad-arriba) 16px var(--e7); } h1, .hero-portada h1 { font-size: 32px; } h2 { font-size: 24px; } .lede, .hero-portada .lede { font-size: 18px; } .grid, .grid.g3 { grid-template-columns: 1fr; } .card { border-right: none; } .btn { width: 100%; } .btn.txt { width: auto; } .ofi { grid-template-columns: 1fr; gap: 10px; } .ofi .hoy { text-align: left; } .tool .cuerpo { padding: 20px 18px; } .tool input[type="text"] { font-size: 30px; } .tool .res { font-size: 34px; } .tasa-out b { font-size: 38px; } table { font-size: 16px; } thead th, tbody th, tbody td { padding: 10px 12px; } /* Sin padding lateral: el de 16 px ya lo pone .foot-in en este mismo breakpoint. */ .foot-cols { grid-template-columns: 1fr; padding: 32px 0 24px; } .disclaimer, .legal { max-width: none; } .sec-cab a { white-space: normal; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } @media print { .top, .foot, .cta, .menu, .franja, .buscador { display: none; } body { font-size: 12pt; color: #000; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; } } /* ───────────────────────────────────────────────────────────────────────────── Añadidos de integración. El README del rediseño deja estas piezas explícitamente pendientes ("el prototipo la resuelve inline, conviene añadir .hero-band"), así que se escriben aquí siguiendo las medidas que el propio documento especifica. ───────────────────────────────────────────────────────────────────────────── */ /* Banda de hero a ancho completo de ventana, aunque viva dentro de
, que está limitado a --ancho. El truco del margen negativo evita tener que sacar el hero del flujo del contenido y reescribir las 39 plantillas. */ .hero-band { margin: calc(-1 * var(--pad-arriba)) calc(50% - 50vw) var(--e6); padding: 26px 0 34px; background: var(--pizarra-suave); border-bottom: 1px solid var(--linea); } .hero-in { max-width: var(--ancho); margin: 0 auto; padding: 0 40px; } /* Ritmo vertical del hero, copiado literal del prototipo: migas margin-bottom: 22px · font-size 15 h1 margin: 0 0 16px · font-size 46 · line-height 1.1 · max-width 26ch lede margin: 0 0 22px · font-size 20 · line-height 1.6 · max-width 64ch Estaba comprimido: migas a 16, h1 a 44 con 12 de margen y lede sin margen inferior, así que los cuatro bloques quedaban más juntos que en el diseño. El h1 del hero es 46 y no los 44 de la escala base — el propio handoff da el rango «H1 interior 44-46». */ .hero-in .crumbs { padding-top: 0; margin-bottom: 22px; } .hero-in h1 { margin: 0 0 16px; font-size: 46px; line-height: 1.1; max-width: 26ch; } .hero-in .lede { margin: 0 0 22px; max-width: 64ch; } /* Fila de píldoras / buscador / metadatos que algunas páginas cuelgan del hero. */ .hero-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--e4); } /* El buscador es el único hijo que quiere ancho propio: como ítem flex se encogería a su contenido y el placeholder quedaría cortado. */ .hero-extra .buscador { flex: 1 1 100%; } /* Portada: la banda del hero lleva dos columnas — el titular con sus acciones y las cifras a la izquierda, y la respuesta corta en tarjeta a la derecha (Vista 1). */ .hero-in.portada { display: grid; grid-template-columns: 1.15fr 400px; gap: 56px; align-items: start; } .hero-in.portada .answer { margin: 0; max-width: none; } /* La segunda columna es de 400 px fijos: por debajo de 64rem no cabe y el hero desbordaba la ventana en móvil. Va inmediatamente después de la regla base a propósito (ver nota en el bloque responsive de arriba). */ @media (max-width: 64rem) { /* minmax(0, 1fr) y no 1fr: los grid items traen min-width:auto, así que la columna no baja del ancho mínimo de su contenido y el hero desbordaba la ventana en móvil aunque ya hubiera colapsado a una sola columna. */ .hero-in.portada { grid-template-columns: minmax(0, 1fr); gap: 34px; } .hero-in.portada > * { min-width: 0; } } .cifras { display: flex; flex-wrap: wrap; gap: 20px 44px; border-top: 1px solid var(--linea); padding-top: 20px; margin: var(--e5) 0 0; } .cifras dt { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); } .cifras dd { margin: 4px 0 0; font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1; } /* Portada: el mismo tratamiento claro que las internas, pero un escalón más oscuro que --pizarra-suave (#f1f5f8) y con más aire vertical (40/48 frente a 26/34). Las 372 URLs comparten esta banda, así que el fondo es lo único que distingue la home de un vistazo; basta con que el escalón se note, no con cambiar de registro. */ .hero-band.portada { background: #e1eaf1; padding: 40px 0 48px; } /* Cabecera de sección con enlace a la derecha ("Herramientas … Ver las cinco"). */ .sec-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; border-bottom: 2px solid var(--txt); padding-bottom: 12px; margin-bottom: var(--e5); flex-wrap: wrap; /* si el enlace no cabe al lado del h2, cae debajo en vez de desbordar */ } .sec-cab h2 { border: none; padding: 0; margin: 0; } /* nowrap para que un enlace corto ("Ver las cinco") no se parta en dos líneas. En móvil se desactiva: los hay largos ("Todo el cálculo pasa en tu navegador", 275 px) y ahí el nowrap ensanchaba el documento a 460 px, lo que además descuadraba el hero, que se dimensiona con calc(50% - 50vw). */ .sec-cab a { font-size: 16.5px; white-space: nowrap; } .foot-in { max-width: var(--ancho); margin: 0 auto; padding: 0 40px; } /* El logotipo va horizontal: isotipo + wordmark, gap 14 (README §Cabecera). El CSS entregado traía flex-direction: column, que contradice el prototipo. */ .logo { flex-direction: row; align-items: center; gap: 14px; } @media (max-width: 46rem) { .hero-band { margin-inline: calc(50% - 50vw); padding: 20px 0 26px; } .hero-in, .foot-in { padding: 0 16px; } } /* ── el toque de bandera ──────────────────────────────────────────────────── El sistema entregado es deliberadamente sobrio y deja el rojo y el amarillo solo para las dos franjas y el botón de acento. Con eso, las rejillas de tarjetas —que son casi toda la portada— quedaban en gris sobre blanco y sin ningún acento. Se añade color en tres sitios, siempre como filete o superficie pequeña, nunca como fondo de texto largo. El guardarraíl legal sigue intacto: son los colores de la bandera, que sí podemos usar; lo prohibido es el Escudo y la placa de la Policía. ─────────────────────────────────────────────────────────────────────────── */ /* 1. Barra vertical de bandera delante de cada titular de sección: rojo, amarillo, rojo en bandas horizontales, como el pabellón. Es el gesto que se repite en toda la página, así que va pequeño (6 px de ancho, la altura de una mayúscula). `align-self` y el `margin-top` lo fijan a la PRIMERA línea: con un titular de dos líneas, centrado quedaría flotando en medio. */ /* 1. El filete de cada cabecera de sección arranca con 46 px de bandera antes de seguir en negro. A 2 px de alto es un guiño, no una bandera: aparece cada vez que empieza un bloque y es lo que le da identidad al ritmo de la página. */ section.sec > h2, .sec-cab, section.sec > h2.buscador-n { border-bottom: none; background: linear-gradient(90deg, var(--bandera-rojo) 0 12px, var(--bandera-amarillo) 12px 34px, var(--bandera-rojo) 34px 46px, var(--txt) 46px) 0 100% / 100% 2px no-repeat; } /* Y la versalita del antetítulo de portada, con su guion de oro. */ .hero .kicker::before { content: ""; display: inline-block; width: 24px; height: 2px; background: var(--oro); vertical-align: middle; margin: -2px 12px 0 0; } /* ── listas de puntos ─────────────────────────────────────────────────────── El sistema entregado no dice nada de las listas, así que se quedaban con el disco por defecto del navegador. Son la forma más repetida del sitio (22 páginas) y casi todas siguen el patrón «Título. explicación», que con un disco gris se lee como una lista de la compra. Se les da retícula: separador de 1 px entre puntos, marcador cuadrado de oro alineado con la primera línea y el título en el negro del cuerpo, más oscuro que el texto. Se respeta que el siga en línea, porque no todos los puntos son «Título.» + frase (algunos continúan la oración: «…sin cita previa, que atienden por orden…») y pasarlo a bloque partiría la frase por la coma. Acotado a hija directa de la sección para no pisar el bloque de fuentes, las listas de las FAQ ni la rejilla del generador, que tienen lo suyo. ─────────────────────────────────────────────────────────────────────────── */ section.sec:not(.fuentes) > ul { list-style: none; padding: 0; margin: var(--e4) 0 var(--e5); border-top: 1px solid var(--linea-suave); max-width: 72ch; } section.sec:not(.fuentes) > ul > li { position: relative; margin: 0; padding: 13px 0 14px 30px; border-bottom: 1px solid var(--linea-suave); max-width: none; } section.sec:not(.fuentes) > ul > li::before { content: ""; position: absolute; left: 3px; top: 1.3em; width: 9px; height: 9px; background: var(--oro); } /* El título de cada punto, en el negro del cuerpo: es lo que se escanea. */ section.sec:not(.fuentes) > ul > li > strong:first-child { color: var(--txt); } /* Listas anidadas: sin retícula, que ahí sobra. */ section.sec:not(.fuentes) > ul ul { margin: 8px 0 0; } /* Secuencia de pasos (partials/layout.php · sb_pasos). Misma retícula sin cajas que las tarjetas de navegación: filetes de 1 px, radio 0 y sin sombras. El filete de bandera va una sola vez, arriba del bloque, para no repetir el acento en cada celda. */ /* El filete de bandera va como border-image del borde superior: así no ocupa una celda de la rejilla y da igual por dónde parta las filas `auto-fit`. */ .pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: var(--e5) 0 var(--e4); border-style: solid; border-width: 3px 0 0 0; border-image: linear-gradient(90deg, var(--bandera-rojo) 0 8%, var(--bandera-amarillo) 8% 92%, var(--bandera-rojo) 92%) 1; } /* Ese filete está pensado para cuando la rejilla aparece en medio del texto y necesita anunciarse. Si es lo primero de la sección choca con el filete de la cabecera, que está 24 px más arriba: dos banderas seguidas, y encima la de los pasos pesa más que la del titular (3 px contra 2), que es justo al revés de la jerarquía. Ahí se queda solo con la línea neutra que cierra la rejilla por arriba, y la bandera de la sección manda sola. */ section.sec > h2 + .pasos, .sec-cab + .pasos { border-image: none; border-width: 1px 0 0 0; border-color: var(--linea); margin-top: var(--e4); } .paso { padding: 24px 26px 26px; border-bottom: 1px solid var(--linea); border-right: 1px solid var(--linea); } .paso .n { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--pizarra); color: #fff; font-family: var(--mono); font-weight: 500; font-size: 16px; margin-bottom: 16px; } /* El número cicla por la paleta cada seis pasos, que es el tamaño habitual de estas rejillas. Es decorativo —el orden ya lo dice el propio número, el color no codifica nada—, así que se usan tonos de la marca y no una escala nueva. Contraste del número contra su fondo, todos AA: pizarra 11,8:1 · rojo 7,3:1 · amarillo 9,9:1 (con texto oscuro) · verde 8,1:1 · oro oscuro 9,0:1 · gris 7,7:1. El primero se queda con el --pizarra de la regla de arriba. */ .paso:nth-child(6n+2) .n { background: var(--bandera-rojo); } .paso:nth-child(6n+3) .n { background: var(--bandera-amarillo); color: var(--txt); } .paso:nth-child(6n+4) .n { background: var(--verde); } .paso:nth-child(6n+5) .n { background: var(--oro-txt); } .paso:nth-child(6n) .n { background: var(--gris); } .paso b { display: block; font-size: 18.5px; letter-spacing: -.015em; margin-bottom: 7px; } .paso p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--gris); max-width: none; } .pasos-pie { font-size: 15px; color: var(--gris-3); margin: 0 0 var(--e5); } /* En la columna de contenido con índice quedan 732 px: con `auto-fit` salen cuatro celdas de 180 px y cada título se parte en tres líneas. Ahí se fija a dos columnas, que dan 360 px por celda: es el ancho al que el paso se lee de un vistazo. */ .col-2 .pasos { grid-template-columns: 1fr 1fr; } .col-2 .paso:nth-child(2n) { border-right: none; } @media (max-width: 46rem) { .pasos, .col-2 .pasos { grid-template-columns: 1fr; } .paso, .col-2 .paso { border-right: none; padding: 20px 18px 22px; } } /* 2. El icono de cada tarjeta, sobre una superficie crema con filete de oro. Es lo que rompe de verdad la monotonía: aparece seis veces por rejilla y a tamaño pequeño. */ .card .ico { box-sizing: content-box; padding: 9px; background: var(--oro-fondo); border: 1px solid var(--oro-linea); } .card:hover .ico { background: #fff; } /* Que se vea que la tarjeta es un enlace. Sin icono —las rejillas de "Sigue con" no lo llevan— la única señal era el hover, que en una tarjeta de texto negro sobre blanco no se anticipa. Se añaden dos: el título en el color de enlace y una flecha al final. Va sobre `a.card` a propósito: hay tarjetas que son solo un dato y no llevan a ninguna parte (las cifras de la portada), y esas no deben parecer clicables. */ a.card b { color: var(--pizarra); } a.card b::after { content: " →"; font-weight: 400; } a.card:hover b { text-decoration: underline; text-underline-offset: 4px; } /* Cuatro destinos es el caso más común de "Sigue con". A ancho completo entran los cuatro en una fila; dentro de la columna con índice se fija a dos, que da 2×2 en vez del 3+1 que dejaba dos huecos vacíos al lado del último. */ .grid { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } .col-2 .grid:not(.g3) { grid-template-columns: 1fr 1fr; } /* 3. Filete de bandera al pasar por encima de una tarjeta: el mismo rojo-amarillo-rojo de la franja de la cabecera, y solo mientras el cursor está encima. */ .card { position: relative; } .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; opacity: 0; background: linear-gradient(90deg, var(--bandera-rojo) 0 22%, var(--bandera-amarillo) 22% 78%, var(--bandera-rojo) 78%); } .card:hover::before, .card:focus-visible::before { opacity: 1; } /* Objetivos táctiles de 44 px en los enlaces del pie y de las listas de navegación: el público de este sitio es mayoritariamente de más edad (ver brief §2.2). Acotado a punteros gruesos: con ratón el padding sobra y separaba los enlaces del pie casi el triple de lo que marca el diseño entregado (gap 9), y este sitio es 82% escritorio. */ .foot-cols a { line-height: 1.5; } @media (pointer: coarse), (max-width: 46rem) { .foot-cols a { padding: 10px 0; } } .menu nav a { min-height: 44px; display: flex; align-items: center; } /* Columnas numéricas de la tabla de horarios: la cabecera se alinea con sus celdas (el CSS entregado alinea todos los thead a la izquierda y los td a la derecha). */ thead th.num { text-align: right; } /* --gris-3 da 4,68:1 sobre blanco, pero solo 4,27:1 sobre el fondo de la fila de hoy: por debajo del AA que el rediseño fija como mínimo. En esa fila se sube a --gris (7,0:1). Es justo el caso que avisa el README: al oscurecer un fondo hay que re-verificar. */ tbody tr.hoy td.cerrado { color: var(--gris); } /* El buscador del prototipo no muestra etiqueta (lupa + placeholder), pero el