/* ============================================================================
   EL DESPLEGABLE · assets/desplegable.css (17 oct 2026, COO)
   ============================================================================
   Su JS: assets/desplegable.js (la cabecera de ese archivo dice cómo se usa).
   Va después de componentes.css: usa .caja, .btn, .estado-centro y los aros
   --filo-* de marca.css.

   · El botón es un control de 40 px (--alto-control): escalón 37–60 →
     --bevel-sm, aro --filo-sm y foco --filo-foco-sm. Dentro de un `.control`
     (el dashboard) va sin caja propia: la envoltura ya lleva el bisel y su aro.
   · La lista es una .caja de capa doble (contorno completo, nunca border +
     clip-path), fija en el <body> o dentro del diálogo modal.
   · Cada fila mide 36 px: escalón 31–36 → --bevel-compacto, --filo-compacto y
     --filo-foco-compacto. En reposo sin aro; al pasar, aro crema; la activa
     (teclado), aro amarillo; la elegida, fondo tibio y una ✓ (el estado no va
     solo en el color).
   · El color de un rol es DATO, no matiz de marca (como en Discord): un punto
     pequeño delante, con aro crema fino para que se vea también el color más
     oscuro sobre el marrón, y el NOMBRE pintado de ese color exacto
     (.con-color, --dp-texto). Sin color (0):
     punto gris y nombre normal, sin teñir, como Discord.
   · En ≤520 px la lista es una hoja abajo a todo el ancho (como el selector
     de emoji).
   ========================================================================== */

/* ── EL <select> ESCONDIDO ── sigue en el DOM (formularios, change, label). */
.dp-oculto{
  position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;
  opacity:0!important;pointer-events:none!important;white-space:nowrap!important;flex:none!important;
}
.dp-envoltura{display:block;min-width:0;position:relative}
.dp-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ── EL PUNTO DE COLOR ── */
.dp-punto{
  display:inline-block;flex:none;width:.75rem;height:.75rem;border-radius:50%;
  background:var(--dp-color,var(--gris-3));box-shadow:0 0 0 1px rgba(242,232,220,.28);
}
.dp-puntos{display:inline-flex;flex:none}
.dp-puntos .dp-punto + .dp-punto{margin-left:-.25rem}
.dp-glifo{flex:none;width:1.1rem;text-align:center;color:var(--texto-3);font-weight:600;line-height:1}
.dp-img{flex:none;width:1.25rem;height:1.25rem;object-fit:contain}

/* ── EL BOTÓN ── */
.dp-boton{
  position:relative;display:flex;align-items:center;gap:.5rem;width:100%;min-width:0;box-sizing:border-box;
  height:var(--alto-control,2.5rem);padding:0 2.25rem 0 var(--esp-3,.75rem);margin:0;
  font:inherit;font-size:var(--tipo-cuerpo);font-weight:400;color:var(--texto-1);text-align:left;cursor:pointer;
  background:var(--velo-1,rgba(242,232,220,.045));border:0;clip-path:var(--bevel-sm);--filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));transition:background .15s;
}
.dp-boton:hover{--filo-color:var(--texto-3)}
.dp-boton:focus-visible,.dp-boton[aria-expanded="true"]{outline:none;--filo-color:var(--yellow);background:var(--velo-2,rgba(242,232,220,.08))}
.dp-boton:disabled{cursor:not-allowed}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .dp-boton::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
  .dp-boton:focus-visible::after,.dp-boton[aria-expanded="true"]::after{clip-path:var(--filo-foco-sm)}
}
.dp-valor{display:flex;align-items:center;gap:.5rem;min-width:0;flex:1}
.dp-texto{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-boton.es-vacio .dp-texto{color:var(--texto-3)}
/* El nombre de un rol, en su color exacto. */
.dp-texto.con-color{color:var(--dp-texto)}
.dp-boton.es-vacio .dp-texto.con-color{color:var(--texto-3)}
.dp-flecha{
  position:absolute;right:var(--esp-3,.75rem);top:50%;translate:0 -50%;width:1.25rem;height:1.25rem;
  color:var(--texto-3);pointer-events:none;transition:rotate .15s ease,color .15s;
}
.dp-boton:focus-visible .dp-flecha,.dp-boton[aria-expanded="true"] .dp-flecha{color:var(--yellow)}
.dp-boton[aria-expanded="true"] .dp-flecha{rotate:180deg}

/* Dentro de un .control (dashboard): sin caja propia, la envoltura la pone. */
.control>.dp-boton{height:100%;flex:1;clip-path:none;background:transparent;box-shadow:none;transition:none}
.control>.dp-boton::after{display:none}
.control:has(>.dp-boton[aria-expanded="true"]){--filo-color:var(--yellow);background:var(--velo-2,rgba(242,232,220,.08))}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .control:has(>.dp-boton[aria-expanded="true"])::after{clip-path:var(--filo-foco-sm)}
}
.control:has(>.dp-boton:focus-visible){--filo-color:var(--yellow);background:var(--velo-2,rgba(242,232,220,.08))}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .control:has(>.dp-boton:focus-visible)::after{clip-path:var(--filo-foco-sm)}
}

/* En el asistente a pantalla completa el campo es .as-campo (rectángulo con
   su filete): el botón se viste igual y no pone su bisel. */
.dp-boton.as-campo{
  height:auto;min-height:3.5rem;clip-path:none;box-shadow:none;padding:1rem 2.6rem 1rem 1.1rem;
  background:var(--surface);border:1px solid var(--line);font-size:var(--tipo-entradilla);
}
.dp-boton.as-campo::after{display:none}
.dp-boton.as-campo:focus-visible,.dp-boton.as-campo[aria-expanded="true"]{border-color:var(--yellow);background:var(--surface)}

/* ── LA LISTA ── */
.dp-pop{
  position:fixed;z-index:1050;display:flex;flex-direction:column;max-height:20rem;box-sizing:border-box;
  --caja-fondo:var(--surface-2);--filo-color:rgba(255,198,33,.45);
  animation:dp-entra .14s ease-out;
}
@keyframes dp-entra{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
.dp-pop.dp-hoja{left:0;right:0;bottom:0;top:auto;width:100%;max-height:70dvh;animation-name:dp-sube;padding-bottom:env(safe-area-inset-bottom)}
@keyframes dp-sube{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}

/* El buscador: mismo aro que el campo, escalón de 36 px. */
.dp-cabeza{position:relative;flex:none;padding:.5rem .5rem .25rem;--anillo:var(--line)}
.dp-cabeza:focus-within{--anillo:var(--yellow)}
.dp-lupa{position:absolute;z-index:1;left:1.25rem;top:50%;translate:0 -35%;width:1rem;height:1rem;color:var(--texto-3);pointer-events:none}
.dp-lupa svg{display:block;width:100%;height:100%}
.dp-buscar{
  width:100%;box-sizing:border-box;height:2.25rem;padding:0 .75rem 0 2.25rem;margin:0;
  font:inherit;font-size:var(--tipo-descripcion);color:var(--texto-1);
  background:var(--ink);border:0;clip-path:var(--bevel-compacto);appearance:none;-webkit-appearance:none;
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--line));
}
.dp-buscar::placeholder{color:var(--texto-3)}
.dp-buscar:focus{outline:none;box-shadow:inset 0 0 0 1px var(--filo-borde, var(--yellow))}
.dp-buscar::-webkit-search-cancel-button{filter:grayscale(1) brightness(1.4)}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .dp-cabeza::after{content:'';position:absolute;inset:.5rem .5rem .25rem;pointer-events:none;
    clip-path:var(--filo-compacto);background:var(--anillo)}
  .dp-cabeza:focus-within::after{clip-path:var(--filo-foco-compacto)}
}

.dp-lista{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:.5rem;scroll-padding-block:.5rem;outline:none}
.dp-lista.con-grupos{scroll-padding-block:2.25rem .5rem}
.dp-lista[hidden],.dp-vacio[hidden],.dp-g[hidden],.dp-op[hidden]{display:none}
.dp-g + .dp-g,.dp-op + .dp-g{margin-top:.25rem}
.dp-grupo{
  position:sticky;top:0;z-index:2;margin:0 -.5rem;padding:.6rem 1.25rem .35rem;
  font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);
  background:var(--surface-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dp-lista>.dp-g:first-child .dp-grupo{margin-top:-.5rem}

.dp-op{
  position:relative;display:flex;align-items:center;gap:.6rem;min-height:2.25rem;padding:0 .75rem;
  cursor:pointer;clip-path:var(--bevel-compacto);--filo-color:transparent;
  font-size:var(--tipo-descripcion);font-weight:400;color:var(--texto-1);transition:background .12s ease;
}
.dp-op:hover{background:rgba(242,232,220,.07);--filo-color:rgba(242,232,220,.25)}
.dp-op[aria-selected="true"]{background:rgba(255,198,33,.12);font-weight:500}
.dp-op.es-marcador{color:var(--texto-3)}
.dp-op.es-marcador[aria-selected="true"]{background:transparent;font-weight:400}
.dp-op.es-marcador .dp-check{display:none}
.dp-op.es-activa{background:rgba(255,198,33,.16);--filo-color:var(--yellow)}
.dp-op[aria-disabled="true"]{cursor:not-allowed;color:var(--texto-3)}
.dp-op[aria-disabled="true"] .dp-texto.con-color{color:var(--texto-3)}
.dp-op[aria-disabled="true"]:hover{background:transparent;--filo-color:transparent}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .dp-op::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-compacto);background:var(--filo-color)}
  .dp-pop.es-teclado .dp-op.es-activa::after{clip-path:var(--filo-foco-compacto)}
}
.dp-check{flex:none;width:1rem;height:1rem;margin-left:auto;color:var(--yellow);visibility:hidden}
.dp-op .dp-nota + .dp-check{margin-left:0}
.dp-op[aria-selected="true"] .dp-check{visibility:visible}
.dp-nota{
  flex:none;margin-left:auto;padding:.15rem .4rem;font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;
  line-height:1.2;text-transform:uppercase;color:var(--texto-3);background:rgba(242,232,220,.08);clip-path:var(--bevel-xs);
}
.dp-vacio{flex:0 0 auto;--estado-alto:6.5rem;min-height:6.5rem;padding:.5rem .5rem 1rem;gap:.75rem}

@media (prefers-reduced-motion: reduce){
  .dp-pop,.dp-pop.dp-hoja{animation:none}
  .dp-flecha,.dp-op,.dp-boton{transition:none}
}