/* ==========================================================================
   Krateion · paginas legales (privacidad y eliminacion de cuenta)
   --------------------------------------------------------------------------
   Estas dos paginas son copia del texto que sirve la aplicacion en
   krateion.mchana.es/legal/*. Alli las pinta Tailwind; aqui no hay Tailwind,
   asi que esta hoja define A MANO las 40 clases que ese HTML usa, con los
   valores exactos que se midieron en el navegador contra la pagina de verdad.

   Se conservan los nombres de clase de Tailwind (`mt-3`, `text-text`...) a
   proposito: asi el HTML copiado no se toca, y si algun dia hay que volver a
   copiar el texto porque cambie la politica, basta con repetir la copia sin
   reescribir nada.

   DOS AVISOS SOBRE FIDELIDAD:

   1. `text-body` y `text-body-sm` NO existen en el CSS de la aplicacion:
      alguien las escribio en el JSX y Tailwind nunca las genero. O sea, ese
      texto se ve a 16 px, el tamano heredado. Aqui tampoco se definen, para
      que se vea exactamente igual. No es un olvido: es lo que hay.

   2. La aplicacion tiene tema claro y oscuro y sigue al sistema operativo.
      Esta copia hace lo mismo con `prefers-color-scheme`, con los colores
      medidos en cada uno de los dos temas.
   ========================================================================== */

:root {
  /* Tema claro — los valores medidos en la aplicacion. */
  --bg: #fafafa;
  --text: #18181b;
  --text-secondary: #3f3f46;
  --primary: #d97706;
  --border: #e4e4e7;
  --surface: #ffffff;
  --surface-2: #f4f4f5;

  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI",
    sans-serif;
  --font-display: "Space Grotesk", "Space Grotesk Fallback", system-ui,
    -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0b;
    --text: #fafafa;
    --text-secondary: #d4d4d8;
    --primary: #f59e0b;
    --border: #26262a;
    --surface: #17171a;
    --surface-2: #1f1f23;
  }
}

/* Las mismas tipografias que la portada, servidas desde este dominio. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da,
    u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191,
    u+2193, u+2212, u+2215, u+feff, u+fffd;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7,
    u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f,
    u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f,
    u+a720-a7ff;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
  size-adjust: 107.06%;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da,
    u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191,
    u+2193, u+2212, u+2215, u+feff, u+fffd;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7,
    u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f,
    u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f,
    u+a720-a7ff;
}
@font-face {
  font-family: "Space Grotesk Fallback";
  src: local("Arial");
  ascent-override: 89.71%;
  descent-override: 26.62%;
  line-gap-override: 0%;
  size-adjust: 109.69%;
}

/* --- Reinicio (lo que ponia el «preflight» de Tailwind) ------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

p {
  margin: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: inherit;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

/* --- Las clases que trae el HTML copiado --------------------------------- */

.mx-auto {
  margin-inline: auto;
}
.max-w-3xl {
  max-width: 768px;
}

.px-4 {
  padding-inline: 16px;
}
.py-10 {
  padding-block: 40px;
}
.px-2 {
  padding-inline: 8px;
}
.py-1 {
  padding-block: 4px;
}
.pl-6 {
  padding-left: 24px;
}
.pt-6 {
  padding-top: 24px;
}

.mb-8 {
  margin-bottom: 32px;
}
.mt-1 {
  margin-top: 4px;
}
.mt-3 {
  margin-top: 12px;
}
.mt-4 {
  margin-top: 16px;
}
.mt-16 {
  margin-top: 64px;
}

/* Tailwind separa hermanos, no el primero de la lista. */
.space-y-2 > * + * {
  margin-top: 8px;
}
.space-y-3 > * + * {
  margin-top: 12px;
}
.space-y-10 > * + * {
  margin-top: 40px;
}

.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-2 {
  gap: 8px;
}
.gap-4 {
  gap: 16px;
}

.list-disc {
  list-style: disc;
}

.font-display {
  font-family: var(--font-display);
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}

.text-h1 {
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.text-h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.text-text {
  color: var(--text);
}
.text-text-secondary {
  color: var(--text-secondary);
}
.text-primary {
  color: var(--primary);
}

.border {
  border: 1px solid var(--border);
}
.border-t {
  border-top: 1px solid var(--border);
}
.border-border {
  border-color: var(--border);
}
.rounded {
  border-radius: 4px;
}
.bg-surface {
  background-color: var(--surface);
}

.hover\:underline:hover {
  text-decoration: underline;
}
.hover\:text-text:hover {
  color: var(--text);
}
.hover\:bg-surface-2:hover {
  background-color: var(--surface-2);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --- El selector de idioma ------------------------------------------------
   En la aplicacion era un <select> con boton OK que recargaba con `?lang=xx`.
   Un servidor de ficheros no lee la cadena de consulta, asi que cada idioma
   tiene ahora su propia direccion y el selector son cuatro enlaces. Se pintan
   con el mismo aspecto que tenia el boton de antes para que no cante.
   -------------------------------------------------------------------------- */

.selector-idioma {
  display: flex;
  align-items: center;
  gap: 6px;
}

.selector-idioma > * {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1.2;
}

.selector-idioma .lang-otro {
  background-color: var(--surface);
  color: var(--text-secondary);
}
.selector-idioma .lang-otro:hover {
  background-color: var(--surface-2);
  color: var(--text);
}

.selector-idioma .lang-actual {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--bg);
  font-weight: 600;
}

/* En movil el titulo ya es bastante ancho; que el selector pueda bajar. */
@media (max-width: 420px) {
  .selector-idioma {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}