/* ─────────────────────────────────────────────────────────────────────────────
   Páginas legales de Quidare. Mismo sistema de diseño que la landing
   (src/frontend/src/ui/tokens.js): navy para la estructura, azul como único
   acento. Un documento legal no deja de ser la misma casa.
   Medida de lectura corta a propósito: esto se lee, no se ojea.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --navy: #0F172A;
  --azul: #2563EB;
  --lienzo: #E8ECF6;
  --papel: #FFFFFF;
  --tinta: #1E293B;
  --tinta-media: #475569;
  --tinta-suave: #64748B;
  --linea: #E2E8F0;
  --ambar: #D97706;
  --radio: 1rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); }

.contenedor { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }

header.sitio {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 68px; }
.marca {
  display: flex; align-items: center; gap: .65rem;
  font-weight: 900; font-size: 1.15rem; letter-spacing: -.02em;
  color: var(--navy); text-decoration: none;
}
.marca img { width: 38px; height: 38px; flex-shrink: 0; }
.volver { font-size: .9375rem; font-weight: 700; color: var(--tinta-media); text-decoration: none; }
.volver:hover { color: var(--azul); }

/* ── El documento ─────────────────────────────────────────────────────── */
main { padding: 3.5rem 0 5rem; }
.doc { width: 100%; max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }
.doc > * + * { margin-top: 1.15rem; }

.eyebrow {
  font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em;
  color: var(--azul);
}
h1 {
  font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.15; letter-spacing: -.03em;
  color: var(--navy); text-wrap: balance; margin-top: .5rem;
}
.entradilla { font-size: 1.125rem; color: var(--tinta-media); }
.fecha { font-size: .875rem; color: var(--tinta-suave); }

h2 {
  font-size: 1.3rem; line-height: 1.25; letter-spacing: -.02em; color: var(--navy);
  margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--linea);
  text-wrap: balance;
}
h3 { font-size: 1.0625rem; color: var(--navy); margin-top: 2rem; }

p { color: var(--tinta); }
ul, ol { padding-left: 1.35rem; color: var(--tinta); }
li + li { margin-top: .5rem; }
b, strong { color: var(--navy); font-weight: 700; }

.dato { display: grid; grid-template-columns: 1fr; gap: .35rem; }
@media (min-width: 560px) { .dato { grid-template-columns: 12rem 1fr; gap: .35rem 1rem; } }
.dato dt { font-weight: 700; color: var(--tinta-media); font-size: .9375rem; }
.dato dd { color: var(--tinta); overflow-wrap: anywhere; }

/* Tablas: nunca desbordan la página; si no caben, se desplazan ellas. */
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 32rem; }
th, td { text-align: left; padding: .75rem .9rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { background: var(--lienzo); color: var(--navy); font-weight: 800; font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }

.nota {
  background: var(--lienzo); border-radius: var(--radio); padding: 1.15rem 1.35rem;
  font-size: .9375rem; color: var(--tinta-media);
}
.nota b { color: var(--navy); }

.destacado {
  border-left: 3px solid var(--azul); background: #F8FAFF;
  border-radius: 0 var(--radio) var(--radio) 0; padding: 1.15rem 1.35rem;
}

/* Solo para lo que David tiene que rellenar antes de publicar. */
.pendiente {
  border: 2px dashed var(--ambar); background: #FFFBEB;
  border-radius: var(--radio); padding: 1.15rem 1.35rem;
}
.pendiente b { color: #92400E; }

footer.sitio { background: var(--navy); color: #CBD5E1; padding: 2rem 0; font-size: .875rem; margin-top: 4rem; }
.pie { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
footer.sitio a { color: #E2E8F0; text-decoration: none; }
footer.sitio a:hover { text-decoration: underline; }

:where(a, button):focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: .35rem; }