/* ===========================================================================
   NETFURGO · Selectores custom (calendario + desplegables de lugar/edad/hora)
   - Escritorio (>=901px y con JS): popover con la estetica del calendario.
   - Movil (<901px) o sin JS: control nativo del sistema.
   Compartido por index.html y reserva.html. Los TRIGGERS heredan color del
   contexto de cada pagina; aqui solo va la estructura + el popover (blanco).
   =========================================================================== */

/* --- Alternancia nativo / custom (progressive enhancement) --- */
.nf-pick{position:relative}
.nf-pick-trigger{display:none}                 /* sin JS: nunca se muestra */
@media(min-width:901px){
  html.nf-pick-ready .nf-pick > .nf-pick-native{display:none}
  html.nf-pick-ready .nf-pick > .nf-pick-trigger{display:inline-flex}
}

/* --- Trigger (solo estructura; el color lo pone cada pagina) --- */
.nf-pick-trigger{align-items:center;gap:8px;width:100%;border:0;background:transparent;
  cursor:pointer;text-align:left;font:inherit;color:inherit;line-height:1.45;
  -webkit-tap-highlight-color:transparent}
.nf-pick-trigger:focus{outline:none}
.nf-pick-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-pick-text.nf-pick-ph{opacity:.6}           /* placeholder (sin valor) */
.nf-pick-ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .28s cubic-bezier(.16,1,.3,1)}
.nf-pick-ico svg{display:block;width:1em;height:1em}
.nf-pick--cal .nf-pick-ico,.nf-pick--time .nf-pick-ico{font-size:14px}
.nf-pick--sel .nf-pick-ico{font-size:11px}
/* la flecha del desplegable gira al abrir */
.nf-pick--sel .nf-pick-trigger[data-nf-open] .nf-pick-ico,
.nf-pick--time .nf-pick-trigger[data-nf-open] .nf-pick-ico{transform:rotate(180deg)}

/* --- Popover compartido (blanco, redondeado) --- */
.nf-pop{position:absolute;z-index:1000;background:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.08);
  box-shadow:0 16px 40px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.12);
  padding:14px;color:#0e1b14;font-family:var(--fb,'Inter',system-ui,sans-serif);
  animation:nfPopIn .16s cubic-bezier(.16,1,.3,1)}
.nf-pop[hidden]{display:none}
.nf-pop--cal{width:336px}
.nf-pop--list{padding:6px;min-width:236px}
@keyframes nfPopIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.nf-pop,.nf-pick-ico,.nf-cal-cell{animation:none;transition:none}}

/* --- Calendario --- */
.nf-cal{display:flex;flex-direction:column;gap:8px}
.nf-cal-head{display:flex;align-items:center;gap:4px;height:34px}
.nf-cal-title{display:flex;align-items:center;gap:6px;height:32px;padding:0 8px;border:0;border-radius:8px;
  background:transparent;color:inherit;font-weight:700;font-size:14px;cursor:pointer;
  font-family:var(--fd,'Anton',Impact,sans-serif);letter-spacing:.01em;text-transform:capitalize}
.nf-cal-title:hover{background:rgba(0,0,0,.05)}
.nf-cal-title svg{width:14px;height:14px;color:#6b7280}
.nf-cal-nav{margin-left:auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:8px;background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer}
.nf-cal-nav+.nf-cal-nav{margin-left:0}
.nf-cal-nav:hover{background:rgba(0,0,0,.05)}
.nf-cal-nav:disabled{opacity:.3;cursor:not-allowed}
.nf-cal-grid{width:100%;border-collapse:separate;border-spacing:0 2px;table-layout:fixed}
.nf-cal-grid th{height:30px;font-size:12px;font-weight:600;color:#6b7280}
.nf-cal-grid td{padding:0;text-align:center}
.nf-cal-cell{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:999px;background:transparent;color:#0e1b14;font-size:14px;cursor:pointer;
  transition:background-color .14s ease,color .14s ease,transform .12s ease}
.nf-cal-cell:hover{background:rgba(240,211,0,.22)}
.nf-cal-cell:active{transform:scale(.95)}
.nf-cal-cell:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--bk,#111)}
.nf-cal-cell[data-outside]{color:rgba(14,27,20,.3)}
.nf-cal-cell[disabled]{color:rgba(14,27,20,.22);cursor:not-allowed}
.nf-cal-cell[disabled]:hover{background:transparent}
.nf-cal-cell[data-today]:not([data-selected]){box-shadow:inset 0 0 0 1.5px rgba(240,211,0,.6)}
.nf-cal-cell[data-selected]{background:var(--y,#F0D300);color:var(--bk,#111);font-weight:700}
.nf-cal-years{max-height:172px;overflow:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;
  border-top:1px solid #eee;padding-top:8px;margin-top:2px}
.nf-cal-year{height:32px;border:0;border-radius:8px;background:transparent;color:#0e1b14;font-size:13px;cursor:pointer}
.nf-cal-year:hover{background:rgba(240,211,0,.22)}
.nf-cal-year:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--bk,#111)}
.nf-cal-year[data-selected]{background:var(--y,#F0D300);color:var(--bk,#111);font-weight:700}

/* --- Lista (lugar / edad / hora) --- */
.nf-list{display:flex;flex-direction:column;gap:2px;max-height:264px;overflow:auto;overscroll-behavior:contain}
.nf-list-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;
  cursor:pointer;font-family:inherit;font-size:14px;color:#0e1b14;padding:10px 12px;border-radius:7px;
  transition:background-color .14s ease}
.nf-list-opt-lab{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* hover neutro y limpio; el SELECCIONADO va en amarillo, claramente distinto */
.nf-list-opt:hover{background:rgba(17,17,17,.055)}
.nf-list-opt:focus-visible{outline:none;background:rgba(17,17,17,.055);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--bk,#111)}
.nf-list-opt[data-selected]{background:var(--yl,rgba(240,211,0,.18));font-weight:700}
.nf-list-opt[data-selected]:hover{background:rgba(240,211,0,.26)}
.nf-list-opt-check{display:inline-flex;align-items:center;flex-shrink:0;color:var(--bk,#111);opacity:0}
.nf-list-opt-check svg{width:16px;height:16px}
.nf-list-opt[data-selected] .nf-list-opt-check{opacity:1}