/* Estilos compartidos de las páginas legales (privacidad, términos, cookies,
   eliminar cuenta). Misma estética "cuaderno" que index.html, en versión
   sobria: una sola ficha legible encima de la hoja con renglones. */
:root {
  --desk: #e9e4d6;
  --paper: #fdfcf7;
  --rule: #d6e4ee;
  --margin-line: #e8a3a3;
  --ink: #26241f;
  --sub: #6b685c;
  --box: #ffffff;
  --box-border: #e4e0d2;
  --accent: #2f5d9e;
  --red-pen: #c8463d;
  --hl-yellow: rgba(255, 226, 64, 0.65);
  --shadow: 0 1px 2px rgba(60, 50, 20, 0.08), 0 8px 24px rgba(60, 50, 20, 0.08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --desk: #101210;
    --paper: #1b1e1b;
    --rule: #2a312c;
    --margin-line: #6e3434;
    --ink: #eef0e6;
    --sub: #a9a697;
    --box: #252924;
    --box-border: #343a33;
    --accent: #7fb0ea;
    --red-pen: #f08a80;
    --hl-yellow: rgba(255, 214, 0, 0.32);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --desk: #101210;
  --paper: #1b1e1b;
  --rule: #2a312c;
  --margin-line: #6e3434;
  --ink: #eef0e6;
  --sub: #a9a697;
  --box: #252924;
  --box-border: #343a33;
  --accent: #7fb0ea;
  --red-pen: #f08a80;
  --hl-yellow: rgba(255, 214, 0, 0.32);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--desk);
  line-height: 1.65;
  font-size: 16px;
}
a { color: var(--accent); }
h1, h2 { font-family: 'Literata', Georgia, serif; line-height: 1.25; }

.topbar {
  max-width: 900px; margin: 0 auto; padding: 14px 16px;
  display: flex; align-items: center; gap: 16px;
}
.logo { font-family: 'Literata', serif; font-weight: 700; font-size: 20px; color: var(--ink); text-decoration: none; margin-right: auto; }
.logo span { color: var(--accent); }
.theme-toggle {
  background: var(--box); color: var(--ink);
  border: 1px solid var(--box-border); border-radius: 999px;
  padding: 6px 12px; font: 600 14px 'Karla', sans-serif; cursor: pointer;
}

.notebook {
  position: relative;
  max-width: 900px; margin: 8px auto 40px;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--rule) 31px, var(--rule) 32px);
  border-radius: 6px 14px 14px 6px;
  box-shadow: var(--shadow);
  padding: 44px 40px 52px 84px;
}
.notebook::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 60px;
  border-left: 2px solid var(--margin-line);
}
.card {
  background: var(--box);
  border: 1px solid var(--box-border);
  border-radius: 12px;
  padding: 32px 34px;
  box-shadow: var(--shadow);
}
h1 { font-size: 32px; margin-bottom: 6px; }
.updated { color: var(--sub); font-size: 14px; margin-bottom: 24px; }
h2 {
  font-size: 21px; margin: 32px 0 10px;
  display: inline-block;
  text-decoration: underline wavy var(--red-pen) 1.5px;
  text-underline-offset: 6px;
}
p, ul, table { margin-bottom: 12px; }
ul { padding-left: 22px; }
li { margin-bottom: 6px; }
.hl { background: var(--hl-yellow); padding: 0 .2em; border-radius: .25em; }
.todo {
  background: rgba(200, 70, 61, .15);
  border: 1px dashed var(--red-pen);
  border-radius: 4px;
  padding: 0 .3em;
  font-weight: 700;
}
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--box-border); }
th { font-weight: 700; }
.table-wrap { overflow-x: auto; }
.footer-links { text-align: center; font-size: 14px; color: var(--sub); margin: 0 auto 40px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; padding: 0 16px; }

@media (max-width: 600px) {
  .notebook { margin: 0 0 32px; border-radius: 0; padding: 28px 12px 40px 34px; }
  .notebook::before { left: 22px; }
  .card { padding: 22px 18px; }
  h1 { font-size: 26px; }
}