/**
 * Desplegable "cselect" - Vecta Finanzas
 *
 * POR QUE EXISTE ESTE ARCHIVO
 *
 * El desplegable cselect se usa en 8 pantallas y 145 sitios, pero su CSS
 * estaba COPIADO dentro de cada pagina. Con el tiempo cada copia derivo por
 * su lado: el panel que se abre tenia 6 versiones distintas, el boton 4, y
 * el z-index iba de 500 a 700 segun la pantalla. Resultado: el mismo
 * desplegable se veia diferente en Gastos, en Banco y en Reportes.
 *
 * Aqui vive UNA sola definicion. Se carga la ULTIMA del <head>, despues del
 * <style> propio de cada pagina, para que gane por orden sin tener que
 * inflar la especificidad ni poner !important.
 *
 * Las reglas de cada pagina siguen ahi y no estorban: definen lo mismo con
 * valores viejos y esta hoja los reescribe. No se borraron porque estaban
 * entremezcladas con CSS ajeno y sacarlas a ciegas se habria llevado por
 * delante reglas que no tienen nada que ver.
 *
 * MISMO ASPECTO QUE gonher-select.css
 *
 * Son dos componentes distintos por razones historicas (cselect se escribe
 * a mano en el HTML; gonher-select convierte un <select> de verdad), pero
 * al abrirse tienen que ser indistinguibles. Los valores de este archivo y
 * los de gonher-select.css son los mismos a proposito: si cambias uno,
 * cambia el otro.
 */

/* ===================================================
   BOTON
   =================================================== */

.cselect-wrap {
  position: relative;
  width: 100%;
}

.cselect-trigger {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  box-sizing: border-box;
  background: var(--input-bg, #F0F2F5);
  border: 2px solid var(--input-border, #D1D5DB);
  border-radius: 12px;
  color: var(--text-color, #1A1A2E);
  font-family: inherit;
  font-size: var(--font-size-base, 1rem);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.cselect-trigger:hover {
  border-color: #A0AEC0;
}

.cselect-wrap.open .cselect-trigger {
  border-color: var(--input-focus, #1A73E8);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, .15);
}

.cselect-trigger .cs-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sin elegir todavia */
.cselect-trigger .cs-label.placeholder {
  color: #8A94A6;
  font-weight: 400;
}

.cselect-trigger .cs-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}

.cselect-trigger .cs-arrow svg {
  width: 18px;
  height: 18px;
  fill: #6B7280;
  transition: fill .2s ease;
}

.cselect-wrap.open .cs-arrow {
  transform: rotate(180deg);
}

.cselect-wrap.open .cs-arrow svg {
  fill: var(--input-focus, #1A73E8);
}

/* ===================================================
   PANEL
   =================================================== */

.cselect-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .06);

  /* 900 en todas partes. Antes iba de 500 a 700 segun la pagina, y con 500
     el panel se metia debajo de las cabeceras pegajosas de las tablas. */
  z-index: 900;

  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  box-sizing: border-box;

  opacity: 0;
  transform: translateY(-8px) scale(.98);
  pointer-events: none;
  transition: opacity .2s cubic-bezier(.4, 0, .2, 1),
              transform .2s cubic-bezier(.4, 0, .2, 1);
}

.cselect-wrap.open .cselect-dropdown {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Con buscador (el selector de bancos) el que se desplaza es la lista, no
   el panel: asi la caja de busqueda se queda arriba mientras bajas */
.cselect-dropdown:has(.cselect-buscador) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.cselect-lista {
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}

/* ===================================================
   OPCIONES
   =================================================== */

.cselect-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  border-bottom: none;      /* las copias antiguas pintaban una raya entre filas */
  font-size: .95rem;
  font-weight: 500;
  color: var(--text-color, #1A1A2E);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

/* El texto de la opcion (el primer span, no el check) tiene que quedarse
   DENTRO de la caja. Sin min-width:0 un item flex no baja de su contenido, y
   una cuenta larga -"Banco Popular Dominicano - 794512300 (RD$116,850)" mas la
   etiqueta DOP/USD- se salia del panel por la derecha, empujando al check.
   Con esto el texto se ajusta al ancho y, si algun token es larguisimo (un
   numero de cuenta), se parte en vez de desbordarse. Vale para el selector de
   cuenta bancaria y para cualquier otra opcion con texto largo. */
.cselect-option > span:not(.cs-check) {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cselect-option:hover,
.cselect-option.activa {
  background: #F0F7FF;
  color: var(--accent-color, #1A73E8);
}

.cselect-option.selected {
  background: #EBF5FF;
  color: var(--accent-color, #1A73E8);
  font-weight: 600;
}

.cselect-option .cs-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  opacity: 0;
  transition: opacity .15s;
}

.cselect-option .cs-check svg {
  width: 18px;
  height: 18px;
  fill: var(--accent-color, #1A73E8);
}

.cselect-option.selected .cs-check {
  opacity: 1;
}

/* ===================================================
   BUSCADOR, GRUPOS Y ESTADOS VACIOS
   (nacieron en el selector de bancos; valen para cualquiera)
   =================================================== */

.cselect-buscador {
  flex: 0 0 auto;
  padding: 8px;
  border-bottom: 1px solid #EDF1F5;
  background: #FAFBFC;
}

.cselect-buscador input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #E2E8F0;
  border-radius: 9px;
  background: #FFFFFF;
  font-family: inherit;
  font-size: .88rem;
  color: var(--text-color, #1A1A2E);
  box-sizing: border-box;
}

.cselect-buscador input:focus {
  outline: none;
  border-color: var(--input-focus, #1A73E8);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, .12);
}

.cselect-grupo {
  padding: 9px 14px 5px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8A929E;
  background: #FFFFFF;
  pointer-events: none;
}

/* "Otra entidad" no es un banco de la lista: se distingue */
.cselect-option.cselect-otro {
  margin-top: 4px;
  border-top: 1px solid #EDF1F5;
  border-radius: 0 0 10px 10px;
  color: #1A5FC4;
  font-weight: 600;
}

.cselect-vacio,
.cselect-empty {
  padding: 18px 14px;
  text-align: center;
  font-size: .85rem;
  font-weight: 500;
  font-style: normal;
  color: #8A929E;
  line-height: 1.45;
}

/* Quien haya pedido menos animacion, que no la tenga */
@media (prefers-reduced-motion: reduce) {
  .cselect-dropdown,
  .cselect-trigger,
  .cselect-option,
  .cs-arrow { transition: none; }
}