/* Controles nativos de toda la web: barras de desplazamiento finas y selectores sin el aspecto del sistema.
   Tema oscuro por defecto; html[data-theme="light"] usa la variante clara. Nada de JS: solo CSS. */
:root {
    --ctl-thumb: rgb(255 255 255 / .16); --ctl-thumb-on: rgb(10 132 255 / .65); --ctl-glow: rgb(10 132 255 / .5);
    --ctl-select-borde: rgb(255 255 255 / .14); --ctl-picker: #141416; --ctl-picker-texto: #f5f5f7; --ctl-opcion-on: rgb(10 132 255 / .18);
    --ctl-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light) { :root:not([data-theme]) {
    --ctl-thumb: rgb(0 0 0 / .2); --ctl-thumb-on: rgb(0 102 204 / .55); --ctl-glow: rgb(0 102 204 / .3);
    --ctl-select-borde: rgb(0 0 0 / .14); --ctl-picker: #ffffff; --ctl-picker-texto: #1d1d1f; --ctl-opcion-on: rgb(0 102 204 / .1);
} }
html[data-theme="light"] {
    --ctl-thumb: rgb(0 0 0 / .2); --ctl-thumb-on: rgb(0 102 204 / .55); --ctl-glow: rgb(0 102 204 / .3);
    --ctl-select-borde: rgb(0 0 0 / .14); --ctl-picker: #ffffff; --ctl-picker-texto: #1d1d1f; --ctl-opcion-on: rgb(0 102 204 / .1);
}

/* ── Barras de desplazamiento ── (Chromium/Safari: pseudo-elementos; Firefox: propiedades estándar) */
@supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar { width: 9px; height: 9px; background: transparent; }
    ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
    ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
    ::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--ctl-thumb) padding-box; }
    ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: var(--ctl-thumb-on) padding-box; box-shadow: inset 0 0 6px var(--ctl-glow); }
}
@supports not selector(::-webkit-scrollbar) {
    html { scrollbar-width: thin; scrollbar-color: var(--ctl-thumb) transparent; }
}

/* ── Selectores ── */
select { color-scheme: dark; }
html[data-theme="light"] select { color-scheme: light; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) select { color-scheme: light; } }
select:not([multiple]):not([size]) {
    -webkit-appearance: none; appearance: none; padding-right: 34px;
    background-image: var(--ctl-flecha); background-repeat: no-repeat; background-position: right 13px center; background-size: 10px 6px;
    cursor: pointer;
}
select:focus-visible { outline: 2px solid var(--ctl-thumb-on); outline-offset: 2px; }
option { background: var(--ctl-picker); color: var(--ctl-picker-texto); }
/* Navegadores con selector personalizable: también el desplegable sigue el diseño (y no el del sistema). */
@supports (appearance: base-select) {
    select:not([multiple]):not([size]) { appearance: base-select; }
    select::picker-icon { display: none; }
    select::picker(select) { appearance: base-select; margin-top: 6px; padding: 5px; border: 1px solid var(--ctl-select-borde); border-radius: 14px; background: var(--ctl-picker); color: var(--ctl-picker-texto); box-shadow: 0 24px 50px -24px rgb(0 0 0 / .7); }
    select option { padding: 9px 12px; border-radius: 9px; font: inherit; }
    select option:hover, select option:focus-visible { background: var(--ctl-opcion-on); outline: none; }
    select option:checked { background: var(--ctl-opcion-on); font-weight: 600; }
    select option::checkmark { display: none; }
}