/* Language and theme buttons (comun/preferencias.js mounts them in [data-prefs]).
   Each design dresses them with its own variables, like the wheel:
   --p-fg, --p-bg, --p-line, --p-radius, --p-font, --p-hover-bg, --p-hover-fg. */
.prefs { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.prefs__btn {
  display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px;
  border: 1px solid var(--p-line, currentColor); border-radius: var(--p-radius, 999px);
  background: var(--p-bg, transparent); color: var(--p-fg, currentColor);
  font: 600 12px/1 var(--p-font, ui-monospace, monospace); letter-spacing: .04em;
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.prefs__btn:hover, .prefs__btn:focus-visible { background: var(--p-hover-bg, currentColor); color: var(--p-hover-fg, inherit); border-color: var(--p-hover-bg, currentColor); }
.prefs__btn:focus-visible { outline: 2px solid var(--p-hover-bg, currentColor); outline-offset: 2px; }

/* The strip's dark logos (Rust, Linux…) get lost on a dark background. */
[data-theme="dark"] .cinta__logo img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .6)); }

/* Light-mode button: filled while light mode is on, so its state reads at a glance. */
.prefs__btn--modo[aria-pressed="true"] { background: var(--p-hover-bg, currentColor); color: var(--p-hover-fg, inherit); border-color: var(--p-hover-bg, currentColor); }

/* Notice when light mode turns on by itself. Neutral on purpose: it sits outside
   every design's header, so it can't borrow their variables. Above the design wheel. */
.aviso-modo {
  position: fixed; left: 50%; bottom: calc(var(--rueda-hueco, 16px) + 8px); z-index: 6001;
  transform: translateX(-50%); width: min(460px, calc(100% - 32px));
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: #111; color: #f4f4f2; border-radius: 12px; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .5);
  font: 400 13px/1.45 system-ui, sans-serif;
}
.aviso-modo p { margin: 0; flex: 1; }
.aviso-modo button {
  flex: none; padding: 8px 12px; border: 1px solid #f4f4f2; border-radius: 8px;
  background: transparent; color: inherit; font: 600 12px/1 system-ui, sans-serif; cursor: pointer;
}
.aviso-modo button:hover, .aviso-modo button:focus-visible { background: #f4f4f2; color: #111; }
.aviso-modo button:focus-visible { outline: 2px solid #f4f4f2; outline-offset: 2px; }