/* ==========================================================================
   theme.css — Selector de tema (auto/claro/sepia/oscuro) + tamaño de fuente.
   Pareja JS: theme.js  (portado de AM2, adaptado al esquema de variables AM3:
   --ink/--ink-soft/--ink-mute/--bg/--bg-elev/--rule/--accent/--accent-soft).
   Las paletas de cada tema (html.theme-*) viven en style.css; aquí sólo está
   el panel de control y los tamaños de fuente.
   ========================================================================== */

/* ----- Bloque del panel en el sidebar ----- */
.theme-switcher{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule, #d8d2c0);
  font-family: var(--sans, -apple-system, sans-serif);
  color: var(--ink, #1a1a1a);
}

.theme-switcher h4{
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute, #7a7a7a);
  font-weight: 600;
  font-style: normal;
}

.theme-options{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}

.theme-option{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid var(--rule, #d8d2c0);
  border-radius: 5px;
  background: var(--bg-elev, #fffaf0);
  color: var(--ink, #1a1a1a);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  line-height: 1.1;
}
.theme-option:hover{ background: var(--accent-soft, #e6eef9); }
.theme-option[aria-pressed="true"]{
  border-color: var(--accent, #2a5d9f);
  background: var(--accent, #2a5d9f);
  color: #fff;
}

.theme-option .theme-swatch{
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.18);
  flex: 0 0 10px;
}
.theme-option[data-theme="auto"]   .theme-swatch{ background: linear-gradient(135deg,#fffaf0 50%,#14130f 50%); }
.theme-option[data-theme="light"]  .theme-swatch{ background: #fffaf0; }
.theme-option[data-theme="sepia"]  .theme-swatch{ background: #f5ecd9; }
.theme-option[data-theme="dark"]   .theme-swatch{ background: #14130f; }

.theme-fontsize{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.theme-fontsize .label{
  font-size: 11px;
  color: var(--ink-mute, #7a7a7a);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.theme-fontsize .fs-buttons{
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--rule, #d8d2c0);
  border-radius: 5px;
  overflow: hidden;
}
.theme-fontsize button{
  border: 0;
  background: var(--bg-elev, #fffaf0);
  color: var(--ink, #1a1a1a);
  padding: 4px 8px;
  cursor: pointer;
  font-family: var(--serif, Georgia, serif);
  font-size: 13px;
  line-height: 1;
}
.theme-fontsize button + button{ border-left: 1px solid var(--rule, #d8d2c0); }
.theme-fontsize button:hover{ background: var(--accent-soft, #e6eef9); }
.theme-fontsize button[aria-pressed="true"]{
  background: var(--accent, #2a5d9f);
  color: #fff;
}
.theme-fontsize .fs-sm{ font-size: 11px; }
.theme-fontsize .fs-md{ font-size: 13px; }
.theme-fontsize .fs-lg{ font-size: 16px; }

/* --- Auto: deja que style.css aplique prefers-color-scheme.
       No definimos variables aquí: hereda del media query del CSS base. --- */
html.theme-auto{ /* sin overrides */ }

/* ==========================================================================
   Tamaño de fuente — multiplicador global aplicado al body.
   Base AM3: 18px (17px en móvil); md mantiene la base.
   ========================================================================== */
html.fs-sm body{ font-size: 16px; }
html.fs-md body{ font-size: 18px; }
html.fs-lg body{ font-size: 21px; }

/* Conservar buena legibilidad en sidebar aún con fuente grande/chica. */
html.fs-lg .sidebar{ font-size: 14px; }
html.fs-sm .sidebar{ font-size: 13px; }