/* Reset y mapeos de elemento. Es exactamente el bloque que abre cada
   pantalla del onboarding. */
html, body { margin: 0; background: var(--surface-app); color: var(--ink); font: var(--t-body); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font: var(--t-display); letter-spacing: var(--track-tight); }
h2 { font: var(--t-h2); letter-spacing: var(--track-snug); }
h3 { font: var(--t-card); letter-spacing: var(--track-micro); }
p  { font: var(--t-body); color: var(--ink-2); text-wrap: pretty; }
small { font: var(--t-body-sm); color: var(--ink-3); }

a { color: var(--cl-purple); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--cl-magenta); }

input, select, textarea, button { font-family: var(--font-core); }
input::placeholder, textarea::placeholder { color: var(--ink-4); }
select { appearance: none; -webkit-appearance: none; }

hr { border: 0; height: 1px; background: var(--line-soft); }
::selection { background: var(--cl-magenta); color: #fff; }

/* El deslizador de rango horario: dos <input type=range> apilados sobre un
   riel común. El tirador es una barra vertical, no un círculo. */
input[type=range][data-om-range] { position: absolute; top: 0; left: 0; width: 100%; height: var(--h-track); margin: 0; padding: 0; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; }
input[type=range][data-om-range]::-webkit-slider-runnable-track { height: var(--h-track); background: transparent; border: none; }
input[type=range][data-om-range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: var(--h-track); border-radius: 5px; background: var(--cl-purple); border: 2px solid #FFFFFF; box-shadow: var(--sh-thumb); cursor: ew-resize; pointer-events: auto; }
input[type=range][data-om-range]::-moz-range-track { height: var(--h-track); background: transparent; border: none; }
input[type=range][data-om-range]::-moz-range-thumb { width: 14px; height: var(--h-track); border-radius: 5px; background: var(--cl-purple); border: 2px solid #FFFFFF; box-shadow: var(--sh-thumb); cursor: ew-resize; pointer-events: auto; }
input[type=range][data-om-range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--cl-magenta); outline-offset: 2px; }