/* ── Custom Select ────────────────────────────────────────────────────────
 * Estilo del dropdown custom que arma static/js/custom-select.js sobre cada
 * <select> del sistema. Usa var(--token) con fallbacks encadenados porque
 * este archivo se carga tanto en páginas con base.css (panel logueado) como
 * en shared/templates/login.html (que tiene su propio set de tokens
 * duplicado, con algunos nombres distintos: ver CLAUDE.md, sección "Sistema
 * de diseño"). --teal/--teal-xl (celeste institucional) están definidos en
 * ambos sets; el fallback hex es solo para no depender de que estén.
 */

.csel { position: relative; width: 100%; }

/* El <select> real se queda montado (sigue siendo el dueño del valor, del
   name, de la validación de formulario, etc.), pero invisible: la UI la
   maneja el trigger + la lista de acá abajo. opacity/visibility/pointer-events
   con !important a propósito: pasó una vez que una regla más específica en
   una página (ej. "select:disabled{opacity:.5}") le ganaba por especificidad
   a esto, y el select nativo se veía parcialmente encima del trigger (dos
   placeholders pisándose). Con !important nada le puede volver a ganar sin
   usar !important también, que es una señal mucho más visible en el código
   de que se está pisando este componente a propósito. */
.csel > select {
  position: absolute !important; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0;
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
}

.csel-trigger {
  all: unset;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 44px;
  background: var(--inp, var(--surface2, var(--surface)));
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
  color: var(--text);
  font-family: inherit; font-size: 0.95rem; line-height: 1.3;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.csel--icon .csel-trigger { padding-left: 40px; }

.csel-trigger:hover { border-color: var(--teal, #0FCBBA); }
.csel-trigger:focus-visible {
  outline: none;
  border-color: var(--teal, #0FCBBA);
  box-shadow: 0 0 0 3px var(--teal-xl, rgba(15,203,186,.14));
}
.csel-open > .csel-trigger {
  border-color: var(--teal, #0FCBBA);
  box-shadow: 0 0 0 3px var(--teal-xl, rgba(15,203,186,.14));
}
.csel-disabled > .csel-trigger { opacity: .5; cursor: not-allowed; }

.csel-label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
}
.csel-label.csel-placeholder { color: var(--text3, var(--text2)); font-weight: 400; }

.csel-arrow {
  flex-shrink: 0; font-size: .85rem; color: var(--text2);
  transition: transform .28s cubic-bezier(.22,.68,0,1.2), color .18s ease;
}
.csel-open .csel-arrow { transform: rotate(180deg); color: var(--teal, #0FCBBA); }

/* .csel-panel es lo que se posiciona/anima al abrir (antes era .csel-list
   directamente); ahora puede contener también el buscador (.csel-search) y
   el mensaje de "sin resultados" (.csel-empty) arriba/abajo de la lista, que
   quedan fijos mientras solo .csel-list scrollea adentro. */
.csel-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 200;
  background: var(--card, var(--surface));
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.2);
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity .18s ease, transform .2s cubic-bezier(.22,.68,0,1.2);
  overflow: hidden;
}
.csel-open .csel-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
/* Panel hacia arriba cuando no entra abajo (ej: último campo de un modal). */
.csel-list-up .csel-panel { top: auto; bottom: calc(100% + 6px); transform-origin: bottom; transform: translateY(6px) scale(.98); }
.csel-list-up.csel-open .csel-panel { transform: translateY(0) scale(1); }

.csel-list {
  margin: 0; padding: 6px; list-style: none;
  max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* Combo buscable (data-searchable en el <select> original, ver custom-select.js) */
.csel-search { padding: 8px; border-bottom: 1px solid var(--border); }
.csel-search-input {
  all: unset;
  box-sizing: border-box;
  display: block; width: 100%;
  background: var(--inp, var(--surface2, var(--surface)));
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font-family: inherit; font-size: .88rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.csel-search-input::placeholder { color: var(--text3, var(--text2)); }
.csel-search-input:focus {
  border-color: var(--teal, #0FCBBA);
  box-shadow: 0 0 0 3px var(--teal-xl, rgba(15,203,186,.14));
}

.csel-empty {
  padding: 14px 12px; text-align: center;
  font-size: .85rem; color: var(--text3, var(--text2));
}

.csel-list::-webkit-scrollbar { width: 8px; }
.csel-list::-webkit-scrollbar-track { background: transparent; }
.csel-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

.csel-opt {
  display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 9px 12px;
  border-radius: 8px;
  font-size: .92rem; color: var(--text);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.csel-opt.active,
.csel-opt:hover:not([aria-disabled]) { background: var(--teal-xl, rgba(15,203,186,.14)); color: var(--teal, #0FCBBA); }
.csel-opt.selected { color: var(--teal, #0FCBBA); font-weight: 600; }
.csel-opt.selected::after {
  content: '\ea5e'; /* ti-check */
  font-family: 'tabler-icons' !important;
  margin-left: auto; font-size: .82rem; flex-shrink: 0;
}
.csel-opt[aria-disabled] { opacity: .4; cursor: not-allowed; }

@media (max-width: 480px) {
  .csel-list { max-height: 45vh; }
  .csel-opt { min-height: 44px; } /* zona táctil, ver Sistema de diseño en CLAUDE.md */
}

@media (prefers-reduced-motion: reduce) {
  .csel-trigger, .csel-arrow, .csel-list, .csel-opt { transition: none !important; }
}