/* Estilos de las páginas de contenido (guías de trámites). Páginas HTML estáticas, servidas sin pasar por React: el contenido tiene que ser legible para adultos mayores y visible para un buscador sin ejecutar JS. Paleta y escala vienen de DESIGN.md — misma identidad que la app. */ :root { color-scheme: light; --bg: #FAF6EE; --superficie: #FFFFFF; --borde: #E8DFD0; --tinta: #4A3F30; --tinta-suave: #6B5F4F; --granate: #8B1E3F; /* Color del trámite. Cada página lo redefine en . */ --tema: #8B1E3F; --tema-suave: #F5E3E8; --ok: #3F6B3F; --alerta: #603F2C; --alerta-suave: #FAEBE3; /* Escala fija (registro producto): base 17px para lectura cómoda. */ --txt: 1.0625rem; --txt-chico: 0.9375rem; --txt-h3: 1.125rem; --txt-h2: 1.3125rem; --txt-h1: 1.75rem; --ancho: 40rem; /* ~68ch a 17px */ --radio: 12px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--tinta); font-size: var(--txt); line-height: 1.6; -webkit-text-size-adjust: 100%; } /* Temas por trámite (DESIGN.md) */ body[data-tramite="informe"] { --tema: #38412F; --tema-suave: #EDF2EA; } body[data-tramite="historia"] { --tema: #3A3E54; --tema-suave: #EDF0FA; } body[data-tramite="resultados"] { --tema: #503743; --tema-suave: #F8ECF1; } body[data-tramite="online"] { --tema: #2D4459; --tema-suave: #DDE5EC; } /* ── Saltar al contenido ─────────────────────────────────────────── */ .saltar { position: absolute; left: -9999px; background: var(--granate); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--radio) 0; font-weight: 700; text-decoration: none; z-index: 10; } .saltar:focus { left: 0; top: 0; } /* ── Cabecera ────────────────────────────────────────────────────── */ .cabecera { background: var(--granate); padding: 14px 20px; } .cabecera-int { max-width: var(--ancho); margin: 0 auto; display: flex; align-items: center; gap: 12px; } .marca { color: #fff; font-weight: 800; font-size: 1.125rem; text-decoration: none; letter-spacing: -0.01em; } .marca:hover, .marca:focus-visible { text-decoration: underline; } .escudo { background: #fff; color: var(--granate); width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 0.875rem; } /* ── Cuerpo ──────────────────────────────────────────────────────── */ main { max-width: var(--ancho); margin: 0 auto; padding: 24px 20px 56px; } /* Migas de pan */ .migas { font-size: var(--txt-chico); font-weight: 600; color: var(--tinta-suave); margin-bottom: 18px; } .migas a { color: var(--granate); } h1 { font-size: var(--txt-h1); line-height: 1.2; font-weight: 800; color: var(--tema); letter-spacing: -0.02em; text-wrap: balance; margin-bottom: 10px; } h2 { font-size: var(--txt-h2); line-height: 1.3; font-weight: 800; color: var(--tema); text-wrap: balance; margin: 32px 0 10px; } h3 { font-size: var(--txt-h3); font-weight: 700; color: var(--tinta); margin: 22px 0 6px; } p { margin-bottom: 12px; text-wrap: pretty; } .entradilla { font-size: 1.1875rem; line-height: 1.5; font-weight: 600; color: var(--tinta); margin-bottom: 18px; } strong { font-weight: 700; } a { color: var(--granate); } a:focus-visible, button:focus-visible { outline: 3px solid var(--tema); outline-offset: 2px; border-radius: 4px; } /* ── Listas de documentos ────────────────────────────────────────── */ .docs { list-style: none; margin: 0 0 16px; } .docs li { position: relative; padding: 10px 0 10px 34px; border-bottom: 1px solid var(--borde); } .docs li:last-child { border-bottom: 0; } .docs li::before { content: "✓"; position: absolute; left: 0; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--tema-suave); color: var(--tema); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 900; } .docs .detalle { display: block; font-size: var(--txt-chico); color: var(--tinta-suave); font-weight: 500; margin-top: 2px; } ol.pasos { margin: 0 0 16px; padding-left: 26px; } ol.pasos li { margin-bottom: 10px; padding-left: 4px; } ul.simple { margin: 0 0 16px; padding-left: 24px; } ul.simple li { margin-bottom: 8px; } /* ── Bloques destacados ──────────────────────────────────────────── */ .nota, .aviso { border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; margin: 18px 0; background: var(--superficie); } .nota { background: var(--tema-suave); border-color: transparent; } .aviso { background: var(--alerta-suave); border-color: transparent; } .nota p:last-child, .aviso p:last-child { margin-bottom: 0; } .nota-titulo, .aviso-titulo { display: block; font-weight: 800; margin-bottom: 4px; } .nota-titulo { color: var(--tema); } .aviso-titulo { color: var(--alerta); } /* Dato suelto: plazo, costo, área */ .datos { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; padding: 0; list-style: none; } .datos li { flex: 1 1 12rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; } .datos dt, .datos .rotulo { display: block; font-size: var(--txt-chico); color: var(--tinta-suave); font-weight: 600; margin-bottom: 2px; } .datos .valor { display: block; font-weight: 800; color: var(--tinta); line-height: 1.35; } /* ── Índice de trámites (portada de la sección) ──────────────────── */ .indice { list-style: none; margin: 8px 0 0; } .indice li { border-top: 1px solid var(--borde); } .indice li:last-child { border-bottom: 1px solid var(--borde); } .indice a { display: flex; gap: 14px; align-items: flex-start; padding: 18px 4px; text-decoration: none; color: inherit; transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1); } .indice a:hover { background: var(--superficie); } .indice .icono { font-size: 1.5rem; line-height: 1.3; flex: 0 0 auto; } .indice .txt { flex: 1; } .indice .titulo { display: block; font-weight: 800; font-size: var(--txt-h3); color: var(--granate); margin-bottom: 2px; } .indice a:hover .titulo { text-decoration: underline; } .indice .bajada { display: block; color: var(--tinta-suave); font-size: var(--txt-chico); font-weight: 500; line-height: 1.5; } /* ── Preguntas frecuentes ────────────────────────────────────────── */ .faq h3 { margin-top: 20px; } .faq p { color: var(--tinta); } /* ── Botón ───────────────────────────────────────────────────────── */ .boton { display: inline-block; background: var(--tema); color: #fff; font-weight: 700; text-decoration: none; padding: 14px 22px; border-radius: var(--radio); min-height: 48px; transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1); } .boton:hover { opacity: 0.88; } /* ── Pie ─────────────────────────────────────────────────────────── */ .independencia { background: #FFF9F0; border: 1px solid #EAD9C4; border-radius: var(--radio); padding: 14px 16px; margin: 34px 0 20px; font-size: var(--txt-chico); color: var(--tinta-suave); font-weight: 600; line-height: 1.5; } .independencia strong { color: var(--granate); } .pie { border-top: 1px solid var(--borde); padding-top: 18px; font-size: var(--txt-chico); color: var(--tinta-suave); } .pie nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 10px; } .pie a { font-weight: 600; } /* ── Impresión: la checklist se lleva al hospital en papel ───────── */ @media print { .cabecera, .pie nav, .saltar, .migas, .boton { display: none; } body { background: #fff; font-size: 12pt; } main { max-width: none; padding: 0; } h1, h2 { color: #000; } .nota, .aviso, .datos li { border: 1px solid #999; background: #fff; } .docs li::before { background: #fff; border: 1px solid #333; color: #000; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; } } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } @media (max-width: 30rem) { :root { --txt-h1: 1.5rem; --txt-h2: 1.1875rem; } }