/*
 * Anonimia — hoja de estilos.
 * Tokens tomados del sistema de diseño de adcc (@adp/ui-base/themes.css y el
 * preset del portal del ciudadano): grises neutros, marca pizarra, acento
 * naranja, radios suaves y sombras discretas. Temas claro y oscuro.
 */
@import url("./fonts.css");

:root,
[data-theme="default"] {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --brand-50: 241 245 249;
  --brand-100: 226 232 240;
  --brand-200: 203 213 225;
  --brand-300: 148 163 184;
  --brand-400: 100 116 139;
  --brand-500: 71 85 105;
  --brand-600: 51 65 85;
  --brand-700: 30 41 59;
  --brand-800: 15 23 42;
  --brand-900: 2 6 23;
  --accent-400: 251 146 60;
  --accent-500: 234 88 12;
  --accent-600: 194 65 12;

  --surface-bg: 255 255 255;
  --surface-raised: 255 255 255;
  --surface-sunken: 245 245 247;
  --surface-emphasis: 236 236 240;
  --ink-strong: 29 29 31;
  --ink-default: 44 44 46;
  --ink-muted: 110 110 115;
  --ink-subtle: 152 152 157;
  --border-default: 224 224 229;
  --border-strong: 152 152 157;
  --border-subtle: 236 236 240;

  --success-bg: 209 250 229;
  --success-fg: 6 95 70;
  --success-border: 110 231 183;
  --warning-bg: 254 243 199;
  --warning-fg: 146 64 14;
  --warning-border: 252 211 77;
  --danger-bg: 254 226 226;
  --danger-fg: 153 27 27;
  --danger-border: 252 165 165;
  --info-bg: 219 234 254;
  --info-fg: 30 64 175;
  --info-border: 147 197 253;
  --ring: 37 99 235;

  --shadow-card: 0 2px 12px -4px rgb(0 0 0 / 0.08);
  --shadow-md: 0 6px 16px -6px rgb(0 0 0 / 0.12), 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-lg: 0 12px 32px -12px rgb(0 0 0 / 0.18);
  --radius: 0.375rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-card: 1.125rem;
  --radius-3xl: 1.75rem;
  color-scheme: light;
}

[data-theme="dark"] {
  --surface-bg: 22 22 23;
  --surface-raised: 29 29 31;
  --surface-sunken: 0 0 0;
  --surface-emphasis: 58 58 60;
  --ink-strong: 245 245 247;
  --ink-default: 229 229 234;
  --ink-muted: 174 174 178;
  --ink-subtle: 134 134 139;
  --border-default: 58 58 60;
  --border-strong: 99 99 102;
  --border-subtle: 44 44 46;

  --brand-700: 148 163 184;
  --brand-600: 160 174 192;
  --brand-500: 120 136 158;

  --success-bg: 6 78 59;
  --success-fg: 167 243 208;
  --success-border: 16 185 129;
  --warning-bg: 120 53 15;
  --warning-fg: 253 230 138;
  --warning-border: 251 191 36;
  --danger-bg: 127 29 29;
  --danger-fg: 254 202 202;
  --danger-border: 248 113 113;
  --info-bg: 30 58 138;
  --info-fg: 191 219 254;
  --info-border: 96 165 250;
  --ring: 96 165 250;
  --shadow-card: 0 2px 12px -4px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 17px; font-family: var(--font-sans); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: rgb(var(--surface-bg));
  color: rgb(var(--ink-default));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3) { letter-spacing: -0.02em; color: rgb(var(--ink-strong)); margin: 0; }
a { color: rgb(var(--brand-700)); }
a:hover { text-decoration: underline; }
img, svg, canvas { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid rgb(var(--ring)); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
main { flex: 1; }
.contenedor { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.contenedor-estrecho { max-width: 48rem; margin: 0 auto; padding: 0 1.5rem; }

/* ─── Cabecera ─────────────────────────────────────────────────────── */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgb(var(--surface-bg) / 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgb(var(--border-subtle));
}
.cabecera .contenedor { display: flex; align-items: center; gap: 1rem; height: 3.5rem; max-width: 80rem; }
.marca { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex: 1; color: rgb(var(--ink-strong)); text-decoration: none; }
.marca:hover { text-decoration: none; }
.marca-logo { width: 2rem; height: 2rem; padding: 0.3rem; border-radius: var(--radius-lg); background: rgb(30 41 59); color: #fff; flex-shrink: 0; }
.marca-texto { min-width: 0; display: flex; flex-direction: column; }
.marca-nombre { font-weight: 600; line-height: 1.15; }
.marca-desc { display: block; font-size: 11px; color: rgb(var(--ink-muted)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; align-items: center; gap: 0.25rem; font-size: 0.85rem; }
.nav a {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  color: rgb(var(--ink-muted));
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nav a:hover { color: rgb(var(--ink-strong)); background: rgb(var(--ink-strong) / 0.05); }
.nav a[aria-current="page"] { background: rgb(30 41 59); color: #fff; font-weight: 600; }
[data-theme="dark"] .nav a[aria-current="page"] { background: rgb(var(--surface-emphasis)); }
.tema {
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid rgb(var(--border-default)); background: transparent; cursor: pointer;
  color: rgb(var(--ink-muted));
}
.tema:hover { color: rgb(var(--ink-strong)); background: rgb(var(--ink-strong) / 0.05); }
.tema svg { width: 1.05rem; height: 1.05rem; }
@media (max-width: 760px) {
  .nav { display: none; }
}

/* ─── Botones ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border: 1px solid transparent; border-radius: 999px; padding: 0.7rem 1.4rem;
  font-weight: 500; cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  font-size: 0.95rem; line-height: 1.2;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 1.1rem; height: 1.1rem; }
.btn-primario { background: rgb(30 41 59); color: #fff; }
.btn-primario:hover { background: rgb(15 23 42); }
[data-theme="dark"] .btn-primario { background: rgb(245 245 247); color: rgb(15 23 42); }
[data-theme="dark"] .btn-primario:hover { background: #fff; }
.btn-secundario { background: rgb(var(--surface-raised)); border-color: rgb(var(--border-default)); color: rgb(var(--ink-strong)); }
.btn-secundario:hover { background: rgb(var(--surface-sunken)); }
.btn-fantasma { background: transparent; color: rgb(var(--brand-700)); padding-inline: 0.6rem; }
.btn-fantasma:hover { text-decoration: underline; }
.btn-peque { padding: 0.4rem 0.85rem; font-size: 0.82rem; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-activo { background: rgb(var(--accent-500)); color: #fff; border-color: rgb(var(--accent-500)); }
.btn-activo:hover { background: rgb(var(--accent-600)); }

/* ─── Portada ──────────────────────────────────────────────────────── */
.hero {
  --h-a: rgb(30 41 59);
  --h-b: rgb(71 85 105);
  --h-c: rgb(100 116 139);
  background:
    radial-gradient(640px 420px at 12% 0, color-mix(in srgb, var(--h-c) 28%, transparent), transparent 70%),
    radial-gradient(760px 520px at 90% 0, color-mix(in srgb, var(--h-b) 24%, transparent), transparent 70%),
    radial-gradient(900px 420px at 50% 100%, color-mix(in srgb, var(--h-a) 12%, transparent), transparent 70%);
  text-align: center;
}
@supports (color: oklch(from red l c h)) {
  .hero {
    --h-b: oklch(from rgb(51 65 85) calc(l + .06) c calc(h - 22));
    --h-c: oklch(from rgb(71 85 105) calc(l + .1) c calc(h + 28));
  }
}
.hero .contenedor { padding-top: 4.5rem; padding-bottom: 4rem; }
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-wrap: balance;
}
.grad {
  background: linear-gradient(92deg, var(--h-a) 0%, var(--h-b) 52%, var(--h-c) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="dark"] .hero { --h-a: rgb(203 213 225); }
.hero .entradilla {
  color: rgb(var(--ink-muted));
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  max-width: 40rem;
  margin: 1.25rem auto 0;
  text-wrap: balance;
}

.subida {
  margin: 2.5rem auto 0;
  max-width: 40rem;
  background: rgb(var(--surface-raised) / 0.85);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem;
  text-align: left;
}
.modo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem;
  padding: 0.25rem; border-radius: 999px; background: rgb(var(--surface-sunken));
}
.modo label { position: relative; cursor: pointer; }
.modo input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.modo span {
  display: block; text-align: center; padding: 0.5rem 0.75rem; border-radius: 999px;
  font-size: 0.88rem; font-weight: 500; color: rgb(var(--ink-muted)); transition: background 0.15s, color 0.15s;
}
.modo input:checked + span { background: rgb(var(--surface-raised)); color: rgb(var(--ink-strong)); box-shadow: var(--shadow-card); font-weight: 600; }
.modo input:focus-visible + span { outline: 2px solid rgb(var(--ring)); }
.modo-ayuda { font-size: 0.82rem; color: rgb(var(--ink-muted)); margin: 0.6rem 0.4rem 0; min-height: 2.5em; }

.zona {
  margin-top: 1rem;
  border: 2px dashed rgb(var(--border-strong) / 0.6);
  border-radius: var(--radius-card);
  padding: 2.2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.zona:hover, .zona.encima { border-color: rgb(var(--brand-500)); background: rgb(var(--brand-50) / 0.5); }
[data-theme="dark"] .zona:hover, [data-theme="dark"] .zona.encima { background: rgb(var(--surface-emphasis) / 0.4); }
.zona svg { width: 2.6rem; height: 2.6rem; margin: 0 auto 0.6rem; color: rgb(var(--brand-500)); }
.zona strong { color: rgb(var(--ink-strong)); font-size: 1.05rem; }
.zona p { margin: 0.3rem 0 0; color: rgb(var(--ink-muted)); font-size: 0.85rem; }
.garantias { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; margin-top: 1rem; font-size: 0.8rem; color: rgb(var(--ink-muted)); }
.garantias span { display: inline-flex; align-items: center; gap: 0.35rem; }
.garantias svg { width: 0.95rem; height: 0.95rem; color: rgb(var(--success-fg)); }

.seccion { padding: 4.5rem 0; }
.seccion-gris { background: rgb(var(--surface-sunken)); }
.seccion h2 { font-size: clamp(2rem, 4.5vw, 2.9rem); font-weight: 800; letter-spacing: -0.04em; text-align: center; margin-bottom: 2.75rem; }
.rejilla { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.tarjeta {
  background: rgb(var(--surface-raised));
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  border: 1px solid rgb(var(--border-subtle));
}
.tarjeta h3 { font-size: 1.1rem; margin: 0.75rem 0 0.35rem; }
.tarjeta p { margin: 0; color: rgb(var(--ink-muted)); font-size: 0.92rem; }
.paso { width: 2.1rem; height: 2.1rem; border-radius: 999px; display: grid; place-items: center; background: rgb(30 41 59); color: #fff; font-weight: 700; font-size: 0.9rem; }
.icono-tarjeta { width: 2.4rem; height: 2.4rem; padding: 0.5rem; border-radius: var(--radius-lg); background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }
[data-theme="dark"] .icono-tarjeta { background: rgb(var(--surface-emphasis)); }

/* ─── Estados y avisos ─────────────────────────────────────────────── */
.aviso { border-radius: var(--radius-lg); padding: 0.75rem 1rem; font-size: 0.88rem; border: 1px solid; }
.aviso-info { background: rgb(var(--info-bg)); color: rgb(var(--info-fg)); border-color: rgb(var(--info-border)); }
.aviso-ok { background: rgb(var(--success-bg)); color: rgb(var(--success-fg)); border-color: rgb(var(--success-border)); }
.aviso-atencion { background: rgb(var(--warning-bg)); color: rgb(var(--warning-fg)); border-color: rgb(var(--warning-border)); }
.aviso-error { background: rgb(var(--danger-bg)); color: rgb(var(--danger-fg)); border-color: rgb(var(--danger-border)); }
.aviso ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }

.cargando { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 5rem 1rem; text-align: center; color: rgb(var(--ink-muted)); }
.giro { width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 3px solid rgb(var(--border-default)); border-top-color: rgb(var(--brand-700)); animation: giro 0.8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .giro { animation-duration: 3s; } }

/* ─── Espacio de trabajo ───────────────────────────────────────────── */
.trabajo {
  display: grid;
  grid-template-columns: 22rem 1fr;
  gap: 1.5rem;
  max-width: 88rem;
  margin: 0 auto;
  padding: 1.5rem;
  align-items: start;
}
.panel {
  position: sticky;
  top: 4.5rem;
  max-height: calc(100vh - 5.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow: auto;
  padding-right: 0.25rem;
  scrollbar-width: thin;
}
@media (max-width: 960px) {
  .trabajo { grid-template-columns: 1fr; padding: 1rem; }
  .panel { position: static; max-height: none; overflow: visible; }
}
.bloque { background: rgb(var(--surface-raised)); border: 1px solid rgb(var(--border-subtle)); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1rem; }
.bloque h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgb(var(--ink-muted)); font-weight: 600; margin-bottom: 0.6rem; }
.doc-nombre { font-weight: 600; color: rgb(var(--ink-strong)); word-break: break-word; }
.doc-meta { font-size: 0.8rem; color: rgb(var(--ink-muted)); }
.fila { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.entre { justify-content: space-between; }

.grupo { border-top: 1px solid rgb(var(--border-subtle)); }
.grupo:first-of-type { border-top: 0; }
.grupo summary {
  list-style: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.1rem; cursor: pointer;
  font-size: 0.9rem; font-weight: 600; color: rgb(var(--ink-strong));
}
.grupo summary::-webkit-details-marker { display: none; }
.grupo summary .flecha { width: 0.9rem; height: 0.9rem; transition: transform 0.15s; color: rgb(var(--ink-subtle)); }
.grupo[open] summary .flecha { transform: rotate(90deg); }
.grupo summary .cuenta { margin-left: auto; font-size: 0.75rem; font-weight: 500; color: rgb(var(--ink-muted)); background: rgb(var(--surface-sunken)); border-radius: 999px; padding: 0.05rem 0.55rem; }
.punto { width: 0.65rem; height: 0.65rem; border-radius: 3px; flex-shrink: 0; }
.items { list-style: none; margin: 0 0 0.5rem; padding: 0; max-height: 16rem; overflow: auto; scrollbar-width: thin; }
.item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.35rem; border-radius: var(--radius); font-size: 0.85rem; }
.item:hover { background: rgb(var(--surface-sunken)); }
.item .texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
.item .pag { font-size: 0.72rem; color: rgb(var(--ink-subtle)); white-space: nowrap; }
.item .quitar { border: 0; background: none; color: rgb(var(--ink-subtle)); cursor: pointer; padding: 0 0.2rem; font-size: 1rem; line-height: 1; }
.item .quitar:hover { color: rgb(var(--danger-fg)); }
.item select { font-size: 0.72rem; border: 1px solid rgb(var(--border-default)); border-radius: var(--radius); background: rgb(var(--surface-raised)); padding: 0.05rem 0.2rem; max-width: 7.5rem; }
input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: rgb(30 41 59); flex-shrink: 0; cursor: pointer; }
[data-theme="dark"] input[type="checkbox"] { accent-color: rgb(203 213 225); }
.vacio { font-size: 0.85rem; color: rgb(var(--ink-muted)); }

.campo { display: flex; gap: 0.4rem; }
.campo input[type="search"], .campo input[type="text"] {
  flex: 1; min-width: 0; border: 1px solid rgb(var(--border-default)); border-radius: 999px; padding: 0.45rem 0.9rem;
  background: rgb(var(--surface-bg)); font-size: 0.88rem;
}
.campo input:focus { outline: 2px solid rgb(var(--ring)); outline-offset: 0; }
.ayuda { font-size: 0.78rem; color: rgb(var(--ink-muted)); margin: 0.45rem 0 0; }
.opcion { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.86rem; margin-top: 0.35rem; cursor: pointer; }
.opcion input { margin-top: 0.2rem; }
.generar { position: sticky; bottom: 0; background: rgb(var(--surface-bg)); padding-top: 0.25rem; padding-bottom: 0.25rem; }
.generar .btn { width: 100%; }

.visor { min-width: 0; }
.barra {
  position: sticky; top: 3.5rem; z-index: 10; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.6rem 0; background: rgb(var(--surface-bg) / 0.9); backdrop-filter: blur(8px); margin-bottom: 0.6rem;
}
.leyenda { display: flex; gap: 0.9rem; font-size: 0.78rem; color: rgb(var(--ink-muted)); margin-left: auto; flex-wrap: wrap; }
.leyenda span { display: inline-flex; align-items: center; gap: 0.35rem; }
.muestra { width: 1.4rem; height: 0.8rem; border-radius: 2px; }
.muestra-sel { background: rgb(15 23 42 / 0.85); }
.muestra-pse { background: rgb(224 227 235); border: 1px solid rgb(71 85 105); }
.muestra-nosel { border: 1.5px dashed rgb(var(--accent-500)); }

.paginas { display: flex; flex-direction: column; gap: 1.25rem; align-items: center; }
.pagina-marco { width: 100%; max-width: 60rem; }
.pagina-num { font-size: 0.75rem; color: rgb(var(--ink-subtle)); margin-bottom: 0.3rem; display: flex; gap: 0.5rem; }
.pagina {
  position: relative; width: 100%; background: #fff; box-shadow: var(--shadow-md); border-radius: 4px; overflow: hidden;
  border: 1px solid rgb(var(--border-subtle));
}
.pagina canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.capa { position: absolute; inset: 0; touch-action: pan-y; }
.dibujando .capa { cursor: crosshair; touch-action: none; }
.caja {
  position: absolute; border-radius: 1.5px; cursor: pointer; transition: background 0.12s, outline-color 0.12s;
  outline: 1.5px dashed rgb(var(--accent-500)); outline-offset: 0.5px; background: rgb(var(--accent-400) / 0.12);
}
.caja:hover { background: rgb(var(--accent-400) / 0.28); }
.caja.sel { outline: 1px solid rgb(15 23 42); background: rgb(15 23 42 / 0.82); }
.caja.sel:hover { background: rgb(15 23 42 / 0.65); }
.pseudo .caja.sel { background: rgb(224 227 235); outline: 1px solid rgb(71 85 105); color: rgb(30 41 59); }
.caja .etq { display: none; font: 600 9px/1 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: clip; padding: 0 2px; height: 100%; align-items: center; justify-content: center; }
.pseudo .caja.sel .etq { display: flex; }
.caja.destello { animation: destello 1.2s ease-out 2; }
@keyframes destello { 50% { box-shadow: 0 0 0 6px rgb(var(--accent-500) / 0.45); } }
.caja-nueva { position: absolute; border: 2px solid rgb(var(--accent-500)); background: rgb(var(--accent-400) / 0.18); pointer-events: none; }

/* ─── Resultado ────────────────────────────────────────────────────── */
.resultado { max-width: 44rem; margin: 3rem auto; padding: 0 1.5rem; }
.resultado .bloque { padding: 2rem; }
.resultado h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.035em; }
.check { width: 3.2rem; height: 3.2rem; border-radius: 999px; display: grid; place-items: center; background: rgb(var(--success-bg)); color: rgb(var(--success-fg)); margin-bottom: 1rem; }
.check svg { width: 1.7rem; height: 1.7rem; }
.hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; word-break: break-all; color: rgb(var(--ink-muted)); }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; font-size: 0.88rem; margin: 1.25rem 0; }
.datos dt { color: rgb(var(--ink-muted)); }
.datos dd { margin: 0; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }

/* ─── Páginas de texto ─────────────────────────────────────────────── */
.texto-legal { padding: 3rem 0 4rem; }
.texto-legal h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); font-weight: 800; letter-spacing: -0.04em; margin-bottom: 0.5rem; }
.texto-legal h2 { font-size: 1.25rem; margin: 2rem 0 0.5rem; }
.texto-legal p, .texto-legal li { color: rgb(var(--ink-default)); }
.texto-legal .actualizado { color: rgb(var(--ink-muted)); font-size: 0.88rem; }
.texto-legal table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 0.75rem 0; }
.texto-legal th, .texto-legal td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid rgb(var(--border-default)); vertical-align: top; }
.texto-legal th { color: rgb(var(--ink-muted)); font-weight: 600; width: 32%; }

/* ─── Pie ──────────────────────────────────────────────────────────── */
.pie-mapa { background: rgb(var(--surface-sunken)); color: rgb(var(--ink-muted)); font-size: 0.88rem; border-top: 1px solid rgb(var(--border-subtle)); }
.pie-mapa .contenedor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding-top: 3rem; padding-bottom: 3rem; }
.pie-mapa h3 { font-size: 0.95rem; color: rgb(var(--ink-strong)); margin-bottom: 0.5rem; letter-spacing: 0; }
.pie-mapa p { margin: 0; line-height: 1.6; }
.pie-mapa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.pie-mapa a { color: inherit; text-decoration: none; }
.pie-mapa a:hover { color: rgb(var(--ink-strong)); }
@media (max-width: 760px) { .pie-mapa .contenedor { grid-template-columns: 1fr; gap: 1.5rem; } }

.pie-inst { background: rgb(15 23 42); color: rgb(226 232 240); }
.pie-inst .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; padding-bottom: 1.25rem; font-size: 0.88rem; }
.pie-inst .org { display: flex; align-items: center; gap: 0.75rem; }
.pie-inst .org svg { width: 1.75rem; height: 1.75rem; color: #fff; }
.pie-inst .org-nombre { font-weight: 600; color: #fff; line-height: 1.2; }
.pie-inst .org-desc { font-size: 0.75rem; color: rgb(203 213 225); }
.pie-inst nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.78rem; }
.pie-inst nav a { color: rgb(203 213 225); text-decoration: none; }
.pie-inst nav a:hover { color: #fff; text-decoration: underline; }
.pie-legal { border-top: 1px solid rgb(30 41 59 / 0.5); }
.pie-legal .contenedor { padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 11px; color: rgb(148 163 184); }
.atribucion { font-style: italic; color: rgb(148 163 184); min-height: 1em; transition: opacity 0.3s; }
.atribucion.oculta { opacity: 0; }
.texto-legal pre { overflow: auto; white-space: pre; font-size: 0.78rem; line-height: 1.5; }

/* ─── Valoración ───────────────────────────────────────────────────── */
.valoracion { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgb(var(--border-subtle)); }
.valoracion h2 { font-size: 1.25rem; font-weight: 700; text-transform: none; letter-spacing: -0.02em; color: rgb(var(--ink-strong)); margin: 0; }
.valoracion .ayuda { margin-top: 0.25rem; }
.estrellas { border: 0; padding: 0; margin: 0.6rem 0 0.75rem; display: inline-flex; flex-direction: row-reverse; gap: 0.15rem; }
.estrellas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estrellas label { cursor: pointer; font-size: 2rem; line-height: 1; color: rgb(var(--border-strong)); transition: color 0.12s, transform 0.12s; }
.estrellas label::before { content: "★"; }
.estrellas label:hover,
.estrellas label:hover ~ label,
.estrellas input:checked ~ label { color: rgb(var(--accent-500)); }
.estrellas label:hover { transform: scale(1.12); }
.estrellas input:focus-visible + label { outline: 2px solid rgb(var(--ring)); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .estrellas label:hover { transform: none; } }
.valoracion textarea {
  width: 100%; resize: vertical; min-height: 4.5rem; border: 1px solid rgb(var(--border-default)); border-radius: var(--radius-lg);
  padding: 0.6rem 0.8rem; background: rgb(var(--surface-bg)); font-size: 0.9rem; margin-bottom: 0.6rem;
}
.valoracion textarea:focus { outline: 2px solid rgb(var(--ring)); outline-offset: 0; }
.valoracion .fila { flex-wrap: nowrap; align-items: flex-start; gap: 1rem; }
.valoracion .fila .ayuda { margin: 0; flex: 1; }
.valoracion .aviso { margin-top: 0.75rem; }
.gracias { margin-top: 1.75rem; }
@media (max-width: 560px) { .valoracion .fila { flex-wrap: wrap; } }