/* Estilo común de las páginas legales.
 *
 * Son HTML estático y no parte de la SPA a propósito: los textos legales
 * necesitan una URL pública y enlazable (la LSSI obliga a que el aviso legal
 * sea accesible de forma permanente y directa, y las tiendas piden una URL de
 * la política de privacidad). Una pestaña dentro de la app no vale para eso.
 *
 * Se sirven desde public/, así que Vite los copia a dist/ tal cual y el Worker
 * los entrega como cualquier otro estático.
 */

:root {
  --fondo: #f4f5f8;
  --superficie: #ffffff;
  --borde: #dfe2ea;
  --tinta: #191c2b;
  --tinta-suave: #5a5f75;
  --acento: #2f37a0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #12141d;
    --superficie: #191c28;
    --borde: #2c3145;
    --tinta: #e9ebf2;
    --tinta-suave: #a0a5ba;
    --acento: #9aa3ff;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2.5rem 1.25rem 5rem;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
  max-width: 44rem;
  margin: 0 auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 2rem;
}

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .35rem; }
h2 { font-size: 1.05rem; margin: 2rem 0 .5rem; }
h3 { font-size: .95rem; margin: 1.4rem 0 .4rem; }
p, li { color: var(--tinta-suave); }
li { margin-bottom: .35rem; }
a { color: var(--acento); }

.fecha { font-size: .85rem; color: var(--tinta-suave); margin: 0 0 1.5rem; }

.pendiente {
  background: #fff4d6;
  color: #6b4f00;
  padding: 0 .3rem;
  border-radius: 3px;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .pendiente { background: #4a3c10; color: #ffe9a8; }
}

.destacado {
  border-left: 3px solid var(--acento);
  padding: .75rem 0 .75rem 1rem;
  margin: 1.25rem 0;
}

.destacado p { color: var(--tinta); margin: 0; }

nav.pie {
  max-width: 44rem;
  margin: 1.5rem auto 0;
  font-size: .85rem;
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .9rem; }
th, td { border: 1px solid var(--borde); padding: .5rem .6rem; text-align: left; vertical-align: top; }
th { color: var(--tinta); }
td { color: var(--tinta-suave); }

.tabla-scroll { overflow-x: auto; }