/* Hoja compartida de las paginas sueltas (privacidad, normas, licencias, eliminar datos y eliminar cuenta).
   Mismos tokens que la app (index.html :root): si cambia un color o una medida alla, se cambia aca. No renombrar variables de color. */
:root {
  --neutro-h: 222;
  --neutro-1-c: var(--neutro-h) 44% 4%;
  --neutro-3-c: var(--neutro-h) 42% 13%;
  --neutro-7-c: var(--neutro-h) 17% 56%;
  --neutro-10-c: var(--neutro-h) 100% 95.5%;
  --neutro-11-c: 0 0% 100%;
  --celeste-5-c: 196 100% 65.5%;
  --verde-5-c: 130 65% 57%;
  --rojo-3-c: 0 63% 46%;
  --rojo-6-c: 0 100% 77%;
  --bg: hsl(var(--neutro-1-c));
  --bg-2: hsl(var(--neutro-3-c));
  --accent: hsl(var(--celeste-5-c));
  --text: hsl(var(--neutro-10-c));
  --muted: hsl(var(--neutro-7-c));
  --surface: hsl(var(--neutro-11-c) / 0.05);
  --surface-2: hsl(var(--neutro-11-c) / 0.08);
  --line: hsl(var(--neutro-11-c) / 0.12);
  --success: hsl(var(--verde-5-c));
  --danger-text: hsl(var(--rojo-6-c));
  --danger-fill: hsl(var(--rojo-3-c));
  /* Tamaños: como en la app, se achican entre 430 y 360 px de ancho (al 87,5 %) y la letra sigue a la del telefono (tope 22 px) */
  --u: clamp(0.875px, 0.232143px + 0.178571vw, 1px);
  --fs-12: max(11px, 0.75rem); --fs-14: max(11px, 0.875rem); --fs-16: max(11px, 1rem); --fs-20: max(11px, 1.25rem);
  --fs-brand: 28px;
  --radius-card: 14px; --radius-pill: 999px;
  --alto-control: 40px;
}
html { font-size: min(clamp(87.5%, 23.2143% + 2.857143vw, 100%), 22px); background: var(--bg); }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 50% 0%, var(--bg-2), var(--bg) 60%);
  line-height: 1.6;
}
main { max-width: 720px; margin: 0 auto; padding: calc(40 * var(--u)) calc(20 * var(--u)) calc(64 * var(--u)); }
.brand { text-align: center; font-size: var(--fs-brand); letter-spacing: 4px; color: var(--muted); font-weight: 300; margin-bottom: calc(8 * var(--u)); }
h1 { text-align: center; font-size: var(--fs-20); font-weight: 500; margin: 0 0 calc(32 * var(--u)); }
.updated { text-align: center; color: var(--muted); font-size: var(--fs-14); margin: calc(-26 * var(--u)) 0 calc(36 * var(--u)); }
h2 { font-size: var(--fs-16); font-weight: 600; color: var(--accent); margin: calc(32 * var(--u)) 0 calc(8 * var(--u)); }
p, li { font-size: var(--fs-16); }
ul, ol { padding-left: calc(20 * var(--u)); }
li { margin-bottom: calc(6 * var(--u)); }
a { color: var(--accent); }
h3 { font-size: var(--fs-14); font-weight: 600; margin: calc(20 * var(--u)) 0 calc(6 * var(--u)); }
/* Licencias: debajo del nombre, autor, licencia y codigo fuente; los textos de las licencias en una caja, con letra chica. */
.licDatos { margin-top: 0; color: var(--muted); font-size: var(--fs-14); }
pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: var(--fs-12); line-height: 1.5; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: calc(14 * var(--u)) calc(16 * var(--u)); }
.note { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: calc(14 * var(--u)) calc(16 * var(--u)); color: var(--muted); font-size: var(--fs-14); }
form { display: flex; flex-direction: column; gap: calc(14 * var(--u)); margin-top: calc(20 * var(--u)); }
label { display: block; font-size: var(--fs-12); color: var(--muted); margin-bottom: 4px; }
input { width: 100%; min-height: var(--alto-control); padding: 0 calc(14 * var(--u)); border-radius: var(--radius-card); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: max(16px, var(--fs-16)); }
button { min-height: var(--alto-control); border: none; border-radius: var(--radius-pill); padding: 0 calc(18 * var(--u)); font: inherit; font-size: var(--fs-14); font-weight: 600; background: var(--danger-fill); color: var(--text); cursor: pointer; }
/* Sin borde de foco (Fede, 2026-10-26). */
:focus, :focus-visible { outline: none; }
button:disabled { opacity: 0.55; cursor: default; }
.msg { min-height: 1.4em; font-size: var(--fs-14); }
.msg.error { color: var(--danger-text); }
.msg.ok { color: var(--success); }