/* =========================================================
   BITSIDEAS — Selector propio
   Sustituye la lista nativa del sistema por una desplegable
   animada y coherente con el resto del formulario.
   ========================================================= */
/* Conserva el mismo ritmo vertical que los demás campos.
   Al abrirse debe apilarse por encima de los campos siguientes
   (el efecto reveal del formulario da z-index:1 a cada hijo). */
.xsel{position:relative;margin-bottom:16px;z-index:1}
.xsel.is-open{z-index:60}
.xsel select{position:absolute;opacity:0;pointer-events:none;width:0;height:0}

.xsel__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:22px 16px 9px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--bg);color:var(--ink);text-align:left;
  font-family:var(--font-body);font-size:.94rem;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.xsel__btn:hover{border-color:color-mix(in srgb,var(--accent-500) 45%,var(--line))}
.xsel.is-open .xsel__btn,.xsel__btn:focus-visible{
  outline:none;border-color:var(--accent-500);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-500) 15%,transparent);
}
.xsel__value{color:var(--ink);transition:color .3s var(--ease)}
.xsel__value.is-placeholder{color:transparent}

.xsel__arrow{
  width:18px;height:18px;flex:0 0 auto;color:var(--muted);
  stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s var(--ease-out),color .3s var(--ease);
}
.xsel.is-open .xsel__arrow{transform:rotate(180deg);color:var(--accent-600)}

/* Etiqueta flotante, igual que en los demás campos */
.xsel > label{
  position:absolute;left:16px;top:15px;color:var(--muted);font-size:.94rem;
  pointer-events:none;transform-origin:0 0;
  transition:transform .28s var(--ease-out),font-size .28s var(--ease-out),color .28s var(--ease);
}
.xsel.is-filled > label,.xsel.is-open > label{
  transform:translateY(-9px) scale(.76);color:var(--accent-600);
}

/* ---------- Lista ---------- */
.xsel__list{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;
  padding:7px;border-radius:14px;
  background:var(--bg-elev);border:1px solid var(--line);
  box-shadow:0 18px 38px rgba(43,39,51,.16), 0 42px 90px rgba(43,39,51,.14);
  max-height:268px;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:50% 0;
  transition:opacity .26s var(--ease),transform .38s var(--ease-out),visibility .26s;
}
.xsel.is-open .xsel__list{opacity:1;visibility:visible;transform:none}

.xsel__opt{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:11px 12px;border-radius:10px;text-align:left;
  font-family:var(--font-body);font-size:.92rem;color:var(--ink-2);
  transition:background .22s var(--ease),color .22s var(--ease),transform .3s var(--ease-out);
}
.xsel__opt:hover,.xsel__opt.is-active{
  background:color-mix(in srgb,var(--accent-500) 11%,transparent);
  color:var(--ink);transform:translateX(3px);
}
.xsel__opt::before{
  content:"";width:7px;height:7px;flex:0 0 auto;border-radius:2px;
  background:var(--line);transform:rotate(45deg);
  transition:background .25s var(--ease),transform .35s var(--ease-out);
}
.xsel__opt:hover::before,.xsel__opt.is-active::before{background:var(--accent-500);transform:rotate(135deg)}
.xsel__opt[aria-selected="true"]{color:var(--brand-600);font-weight:600}
.xsel__opt[aria-selected="true"]::before{background:var(--brand-600)}

/* Encabezado de cada grupo de la lista */
.xsel__group{
  display:block;padding:13px 12px 6px;
  font-family:var(--font);font-weight:700;font-size:.68rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  pointer-events:none;
}
.xsel__group + .xsel__opt{margin-top:0}
.xsel__opt + .xsel__group{
  margin-top:6px;border-top:1px solid var(--line);
}
/* La lista crece: se le da un poco mas de aire vertical */
.xsel__list{max-height:min(52vh,360px)}

.xsel.has-error .xsel__btn{border-color:#e0486e}

@media (prefers-reduced-motion:reduce){
  .xsel__list,.xsel__arrow,.xsel__opt{transition:none}
}


/* =========================================================
   Casilla de autorizacion de tratamiento de datos
   Exigida por el art. 5 del Decreto 1377 de 2013 (Colombia)
   ========================================================= */
.consent{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  margin:4px 0 18px;
}
.consent input{position:absolute;opacity:0;width:0;height:0}
.consent__box{
  width:22px;height:22px;flex:0 0 auto;margin-top:1px;border-radius:7px;
  border:1.5px solid var(--line);background:var(--bg);
  display:grid;place-items:center;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .35s var(--ease-out);
}
.consent__box svg{
  width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:20;stroke-dashoffset:20;
  transition:stroke-dashoffset .35s var(--ease-out);
}
.consent:hover .consent__box{border-color:var(--accent-500)}
.consent input:checked + .consent__box{
  background:var(--brand-600);border-color:var(--brand-600);transform:scale(1.06);
}
.consent input:checked + .consent__box svg{stroke-dashoffset:0}
.consent input:focus-visible + .consent__box{
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-500) 18%,transparent);
}
.consent__txt{font-size:.83rem;line-height:1.55;color:var(--muted)}
.consent__txt a{color:var(--brand-600);text-decoration:underline;text-underline-offset:2px}
.consent__txt a:hover{color:var(--accent-600)}
.consent.has-error .consent__box{border-color:#d33f68;background:color-mix(in srgb,#d33f68 8%,transparent)}


/* Trampa antispam: fuera de pantalla, nunca visible ni enfocable */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}