/* =============================================================
   Desplegables que se ven como la casa

   Está en su propio archivo y no adentro de publica.css porque lo usan
   DOS sitios: el HUB y el Cotizador, que es una página completa del
   mismo dominio con su propia hoja de estilos. Duplicar estas reglas
   habría garantizado que un día se arreglara una y no la otra.

   Sólo usa tokens, ningún color escrito a mano, así que cada sitio lo
   pinta con los suyos. Los que hacen falta:
     --c-surface --c-border --c-hover --c-suave --radius-sm
     --cap-ui --cap-soft --cap-dark
   Si alguno no existe, el desplegable se ve gris pero funciona.
   ============================================================= */

/* ---------------- desplegables ----------------

   El <select> se esconde pero sigue ahí, con su valor: es la fuente de
   verdad y lo que escuchan los catorce lugares que ya lo usan. Lo que
   se ve es este botón, que hereda SUS clases para que las reglas de
   arriba —la pastilla de color del rol, el chip punteado de "+ cuenta"—
   lo sigan pintando igual. */
.sel-oculto{
  /* `width:0` no alcanzaba: el navegador le da un ancho mínimo propio a
     estos controles, así que el campo escondido seguía empujando el
     ancho de su contenedor y aparecía una barra de scroll horizontal en
     los modales. Anclado arriba a la izquierda y recortado, no ocupa
     nada y sigue enviándose con el formulario. */
  position:absolute;left:0;top:0;width:1px;height:1px;
  padding:0;border:0;margin:0;overflow:hidden;clip-path:inset(50%);
  opacity:0;pointer-events:none;
  /* No se usa `display:none` a propósito: un campo escondido así deja
     de enviarse en un formulario, y varios de estos viven adentro de
     uno. */
}
.sel-btn{
  appearance:none;-webkit-appearance:none;
  display:inline-flex;align-items:center;justify-content:space-between;gap:8px;
  text-align:left;cursor:pointer;font:inherit;color:inherit;
  background-color:#fff;border:1px solid var(--c-border);border-radius:var(--radius-sm);
  padding:9px 11px;width:100%;max-width:100%;
}
/* El nombre elegido se recorta en vez de desbordarse. `min-width:0` es
   la parte que no se ve venir: un hijo de flex no baja de su ancho de
   contenido sin eso, así que el `text-overflow` no se aplicaba nunca. */
.sel-btn > span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.sel-btn::after{
  content:'';flex:none;width:8px;height:5px;background:currentColor;
  clip-path:polygon(0 0,100% 0,50% 100%);opacity:.55;transition:transform .12s;
}
.sel-btn:hover{border-color:var(--cap-ui)}
.sel-btn.abierto{border-color:var(--cap-ui)}
.sel-btn.abierto::after{transform:rotate(180deg)}
.sel-btn:focus-visible{outline:2px solid var(--cap-ui);outline-offset:1px}
.sel-btn.sel-vacio{color:var(--c-suave)}
/* Las que YA traen su propio fondo y borde —el rol, el "+ cuenta"— no
   se pisan: el botón hereda esas clases y manda la de ellas. */
.sel-btn.adm-mas,.sel-btn.ver-como{width:auto}
.sel-btn.ver-como::after,.sel-btn.adm-mas::after{margin-left:2px}

/* EL HUECO DEL MEDIO. El botón dibuja su propia flecha con `::after`,
   así que el chevron de fondo del <select> y los 24px que se le
   reservaban a la derecha quedaron de más: entre el nombre del rol y
   la flecha aparecía un vacío que la pastilla fija —que sigue siendo
   un <span> con su candado de fondo— no tiene. Se saca el fondo, se
   iguala el padding, y la flecha cae donde cae el candado.

   Y LA TIPOGRAFÍA, que esta regla se había olvidado. `.sel-btn` trae
   `font:inherit` y con la misma especificidad que `.rol-sel` le
   ganaba: los roles editables salían en Raleway 13px regular y el
   protegido en Barlow 11px bold. Son la misma pastilla en la misma
   columna, una al lado de la otra, con dos tipografías distintas —y
   lo que se lee no es "éste no se puede cambiar" sino que la tabla
   está mal armada. */
.sel-btn.rol-sel{
  padding:4px 11px;border-radius:99px;border-color:transparent;
  background-image:none;justify-content:space-between;gap:8px;
  font-family:var(--font-title);font-size:11px;font-weight:700;letter-spacing:.02em;
}

/* La lista. Va en el <body> con posición fija porque adentro de una
   tabla con scroll quedaría recortada. */
.sel-panel{
  position:fixed;z-index:200;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--radius-sm);box-shadow:0 12px 32px rgba(7,9,13,.16);
}
.sel-buscar{padding:8px;border-bottom:1px solid var(--c-border)}
.sel-buscar input{
  width:100%;padding:7px 10px;font:inherit;font-size:13px;
  border:1px solid var(--c-border);border-radius:var(--radius-sm);background:var(--c-hover);
}
.sel-buscar input:focus{outline:none;border-color:var(--cap-ui);background:#fff}
/* Al llegar al fondo, la rueda no sigue con la página (29/10). */
.sel-lista{overflow-y:auto;overscroll-behavior:contain;padding:5px;outline:none}
.sel-op{
  padding:8px 10px;border-radius:7px;font-size:13.5px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* El azul del sistema se reemplaza por el color del capítulo, en su
   versión suave: marca sin gritar. */
.sel-op.aqui{background:var(--cap-soft)}
.sel-op.on{font-weight:700;color:var(--cap-dark)}
.sel-op.off{color:var(--c-suave);cursor:default}
.sel-op.off.aqui{background:none}
.sel-grupo{
  padding:10px 10px 4px;font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;font-weight:700;color:var(--c-suave);
}
.sel-nada{padding:14px 10px;font-size:13px;color:var(--c-suave);text-align:center}

/* ---------------- las ramas ----------------

   Una consolidada es dos cosas a la vez: un grupo y una cuenta que se
   puede abrir. Por eso la flecha es su propia zona de click —abre la
   rama— y el resto de la fila elige la cuenta.

   Se pliega hacia ABAJO y no hacia el costado. Un menú lateral obliga a
   moverse en diagonal sin salirse del padre, que con trackpad es
   incómodo y con dedo directamente no existe; y al buscar habría que
   decidir en qué columna aparece cada resultado. Plegado hacia abajo, la
   lista arranca corta —sólo las consolidadas—, se abre la que te
   interesa, y buscando se aplana sola. */
.sel-op{display:flex;align-items:center;gap:2px}
.sel-texto{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sel-flecha{
  flex:none;width:16px;margin-left:-4px;text-align:center;
  color:var(--c-suave);font-size:11px;line-height:1;
  transition:transform .12s;
}
.sel-op.abierta > .sel-flecha{transform:rotate(90deg)}
.sel-flecha:hover{color:var(--c-text)}
/* LA CONSOLIDADA YA NO VA EN NEGRITA.

   La idea era que se leyera como cabecera de su grupo, y con varias
   consolidadas habria funcionado. Con una sola —hoy MELI es la unica
   cuenta con hijas— el efecto es el contrario: en una lista de
   veintiuna cuentas hay UNA resaltada y veinte que parecen apagadas
   al lado. Se lee como si MELI fuera la importante y el resto un
   segundo plano, que no es lo que la negrita queria decir.

   Lo que hay que anunciar —que esa fila se abre— ya lo dice la
   flechita de al lado, que ademas gira al abrirse. Un segundo aviso
   para lo mismo, y con un costo que la flechita no tiene. */

/* "Consolidado": la consolidada como cuenta, adentro de su propia
   rama. Va en cursiva y más tenue porque no es un nombre —es una
   acción— y sin eso se lee como si hubiera un subproyecto llamado así. */
.sel-op.sel-todo > .sel-texto{font-style:italic;color:var(--c-muted);font-weight:400}
.sel-op.sel-todo.on > .sel-texto{color:var(--cap-ui);font-weight:600}
/* La cabecera de rama no se resalta como si fuera elegible. */
.sel-op.rama{cursor:pointer}