/* Estilo de las páginas legales: los mismos colores y letras que el simulador */
:root {
  --bg: #eef1ee; --panel: #ffffff; --ink: #1a2128; --muted: #5b6670; --line: #d5dbd5; --accent: #0d6b66; --accent-soft: #e0efec;
  --vidrio: rgba(255,255,255,.55); --vidrio-borde: rgba(255,255,255,.7); --vidrio-brillo: inset 0 1px 0 rgba(255,255,255,.8); --vidrio-sombra: 0 1px 2px rgba(20,40,60,.06), 0 8px 28px rgba(20,40,60,.10); --blur: blur(22px) saturate(1.7); --halo1: rgba(13,107,102,.22); --halo2: rgba(42,93,181,.20);
  --f-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-math: "STIX Two Text", "Cambria Math", Cambria, Georgia, serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #111619; --panel: #182025; --ink: #e3e8ea; --muted: #a3aeb5; --line: #2a343b; --accent: #4dbcb0; --accent-soft: #173431; --vidrio: rgba(34,46,54,.50); --vidrio-borde: rgba(255,255,255,.12); --vidrio-brillo: inset 0 1px 0 rgba(255,255,255,.10); --vidrio-sombra: 0 10px 32px rgba(0,0,0,.35); --halo1: rgba(77,188,176,.20); --halo2: rgba(116,162,242,.18); color-scheme: dark } }
/* el modo que se eligió con el botón de la barra de arriba (simu-tema en el navegador) */
:root[data-theme="dark"] {
  --bg: #111619; --panel: #182025; --ink: #e3e8ea; --muted: #a3aeb5; --line: #2a343b; --accent: #4dbcb0; --accent-soft: #173431; --vidrio: rgba(34,46,54,.50); --vidrio-borde: rgba(255,255,255,.12); --vidrio-brillo: inset 0 1px 0 rgba(255,255,255,.10); --vidrio-sombra: 0 10px 32px rgba(0,0,0,.35); --halo1: rgba(77,188,176,.20); --halo2: rgba(116,162,242,.18); color-scheme: dark }
* { box-sizing: border-box }
html, body { margin: 0; background: var(--bg); color: var(--ink) }
body { background: radial-gradient(60% 50% at 8% 0%, var(--halo1), transparent 70%), radial-gradient(50% 45% at 95% 10%, var(--halo2), transparent 70%), var(--bg); background-attachment: fixed }
body { font: 15px/1.6 var(--f-ui); padding: 24px 16px 40px }
main { max-width: 760px; margin: 0 auto; background: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: 22px; box-shadow: var(--vidrio-brillo), var(--vidrio-sombra); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); padding: 24px clamp(16px, 4vw, 36px) }
.volver { display: inline-block; margin-bottom: 14px; font-size: 13.5px }
.logo { font: 600 15px var(--f-ui) }
.logo i { font-family: var(--f-math) }
h1 { font: 600 26px/1.25 var(--f-ui); margin: 6px 0 4px }
h2 { font: 600 17px/1.3 var(--f-ui); margin: 26px 0 6px }
p, li { margin: 6px 0 }
ul { padding-left: 22px }
a { color: var(--accent) }
.act { color: var(--muted); font-size: 13px; margin: 0 0 18px }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0 }
th, td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); padding: 7px 8px }
th { color: var(--muted); font-weight: 600 }
code { font-size: 12.5px; background: var(--bg); padding: 0 4px; border-radius: 3px; overflow-wrap: anywhere }
.tabla { overflow-x: auto }
.correo { display: inline-block; font-size: 17px; font-weight: 600; background: var(--accent-soft); padding: 8px 14px; border-radius: 8px; text-decoration: none; margin: 6px 0 }
footer { max-width: 760px; margin: 16px auto 0; text-align: center; font-size: 12.5px; color: var(--muted) }
footer a { color: var(--muted); margin: 0 6px }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { main { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none } }