/* RUEDAS DE FECHA Y HORA (2026-10-18) — js/core/rueda-fecha.js.
   Idea de "Date Wheel Picker" (21st.dev), con los tokens de la marca. */

/* Los <select> siguen en el formulario, fuera de la vista. */
.rueda-oculta{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

/* El campo que se ve: una sola línea con el valor y una flecha. */
.rueda-campo{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;cursor:pointer;color:var(--ink);font-family:inherit;}
.rueda-campo.is-vacio .rueda-campo-texto{color:var(--muted);}
.rueda-campo:disabled{opacity:.45;cursor:default;}
.rueda-campo.is-invalido{border-color:var(--danger, #c96b5c)!important;}
.rueda-campo-flecha{flex:none;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.6;}

/* Carta natal: mismo aspecto que los campos de texto del formulario. */
.natal-rueda{min-height:52px;}
/* Hoy: misma píldora que tenían los desplegables. */
.hoy-dias-form .hoy-dias-rueda{width:auto;min-width:168px;min-height:44px;padding:0 16px;border:1px solid rgba(237,237,235,.25);border-radius:999px;background:rgba(237,237,235,.04);color:#EDEDEB;font:400 14px 'Space Grotesk',sans-serif;}
html[data-theme="alba"] .hoy-dias-form .hoy-dias-rueda{border-color:rgba(30,27,23,.25);color:#1E1B17;background:rgba(255,255,255,.5);}

/* La hoja con las ruedas. */
html.rueda-abierta{overflow:hidden;}
.rueda-capa{position:fixed;inset:0;z-index:1300;display:flex;align-items:flex-end;justify-content:center;background:rgba(5,5,8,0);transition:background .25s ease;}
.rueda-capa.is-abierta{background:rgba(5,5,8,.6);}
.rueda-hoja{width:min(100%,480px);padding:6px 16px calc(18px + env(safe-area-inset-bottom));border:1px solid var(--border);border-bottom:0;border-radius:18px 18px 0 0;background:var(--void-2);box-shadow:0 -18px 50px rgba(0,0,0,.45);transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.9,.3,1);}
.rueda-capa.is-abierta .rueda-hoja{transform:translateY(0);}
.rueda-cab{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-bottom:1px solid var(--border);margin-bottom:8px;}
.rueda-cab-t{font:500 11px/1 'Space Grotesk',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--muted);}
.rueda-cab-btn{min-height:44px;padding:0 4px;border:0;background:none;color:var(--muted);font:500 14px 'Space Grotesk',sans-serif;cursor:pointer;}
.rueda-cab-btn.is-listo{color:var(--ink);font-weight:600;}

.rueda-cuerpo{position:relative;display:flex;gap:6px;height:calc(var(--rueda-alto) * var(--rueda-visibles));
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%);}
.rueda-col{flex:1;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;outline:none;}
.rueda-col::-webkit-scrollbar{display:none;}
.rueda-item{height:var(--rueda-alto);display:flex;align-items:center;justify-content:center;scroll-snap-align:center;color:var(--muted);font:400 18px 'Space Grotesk',sans-serif;cursor:pointer;transition:color .15s ease,transform .15s ease;}
.rueda-item.is-elegido{color:var(--ink);font-weight:500;}
.rueda-banda{position:absolute;left:0;right:0;top:50%;height:var(--rueda-alto);transform:translateY(-50%);border-top:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--ink) 5%,transparent);pointer-events:none;}
@media (prefers-reduced-motion:reduce){ .rueda-hoja,.rueda-capa{transition:none;} }