/* ==========================================================================
   css/mutador/07-tweaks-modificadores.css — parte 7/15 de lo que era styles.css
   --------------------------------------------------------------------------
   §20 panel Tweaks (solo admins) + §21 modificadores de body (density/accent) + reveal.
   Se carga desde inc/paginas.php (_base) EN ESTE ORDEN: el número del
   archivo es su posición en la cascada. Un bloque nuevo → su propio archivo
   con el número que le toque, y añadirlo a la lista de _base.
   ========================================================================== */

/* ---------- §20 · Tweaks panel (dev UI) ---------- */
.tweaks{
  position: fixed;
  right: 16px; bottom: 16px;
  width: 240px;
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 11px;
  color: var(--ink);
  z-index: 100;
  display: block;
  transition: opacity .2s ease;
}
.tweaks.on{ display:block; }
.tweaks.hidden{ display:none; }
.tweaks h4{
  margin:0; padding: 8px 10px; font-size: 11px; letter-spacing:.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink); display:flex; justify-content: space-between; align-items:center;
}
.tweaks-close{
  background: none; border: none; padding: 0 2px;
  font-family: var(--mono); font-size: 14px; line-height:1;
  color: var(--mute); cursor: pointer;
  transition: color .15s;
}
.tweaks-close:hover{ color: var(--ink); }
.tweaks-open{
  position: fixed;
  right: 16px; bottom: 16px;
  width: 28px; height: 28px;
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 16px; line-height:1;
  color: var(--ink); cursor: pointer;
  z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.tweaks-open.visible{ display:flex; }
.tweaks-open:hover{ background: var(--ink); color: var(--paper); }
.tweaks .grp{ padding: 10px; border-bottom: 1px solid var(--rule); }
.tweaks .grp:last-child{ border-bottom: 0; }
.tweaks label{ display:flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom:6px; }
.tweaks label:last-child{ margin-bottom: 0; }
.tweaks select, .tweaks input[type="range"]{ font: inherit; }
.tweaks .seg{ display:flex; border:1px solid var(--ink); }
.tweaks .seg button{
  flex:1; background: transparent; border:0; padding: 5px 8px;
  font: inherit; cursor: pointer; text-transform: uppercase; letter-spacing:.06em;
  color: var(--ink);
}
.tweaks .seg button.on{ background: var(--ink); color: var(--paper); }
.tweaks .seg button + button{ border-left: 1px solid var(--ink); }
.tweaks select{
  background: var(--paper); border: 1px solid var(--ink); padding: 3px 6px;
}
.tweaks input[type="range"]{ width: 110px; }

/* ---------- §21 · Body modifiers (data-density / data-accent) ---------- */
body[data-density="tight"]  { --row: 28px; }
body[data-density="default"]{ --row: 34px; }
body[data-density="loose"]  { --row: 46px; }

body[data-accent="off"]{ --accent: var(--ink); }
body[data-theme="dark"][data-accent="off"]{ --accent: var(--paper); }

body[data-pair="geigy-life"] { --display:"Geigy","Times New Roman",serif; --body:"Life",Georgia,serif; }
body[data-pair="life-geigy"] { --display:"Life",Georgia,serif; --body:"Geigy","Times New Roman",serif; }
body[data-pair="system"]     { --display: ui-serif, Georgia, serif; --body: ui-sans-serif, system-ui, sans-serif; }

/* entrance */
.reveal{ opacity: 0; transform: translateY(6px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in{ opacity: 1; transform: none; }
.reveal.d2{ transition-delay: .08s; }
.reveal.d3{ transition-delay: .16s; }
.reveal.d4{ transition-delay: .24s; }