/* ==========================================================================
   COMPONENTE: DESPLEGABLE DE ESTADO (select coloreado)
   Capa: componentes (ver CLAUDE.md, "Arquitectura CSS"). 19/10/2026.

   Hermano de .etiqueta-estado (css/componentes/etiqueta-estado.css): un
   <select> que se pinta con el color del estado elegido, para cambiar el
   estado de algo sin salir de la lista. Mismos significados y mismos
   colores (theme.json, custom.estado):

     .selector-estado--correcto   verde   .selector-estado--atencion  ámbar
     .selector-estado--info       azul    .selector-estado--problema  rojo
     .selector-estado--inactivo   gris    .selector-estado--cancelado negro

   Uso: <select class="selector-estado selector-estado--info">. Cada
   <option> lleva en data-clase su modificador, y el JavaScript de la
   pantalla lo cambia al elegir otra opción. El tamaño (letra, relleno) lo
   pone cada pantalla en su CSS de módulo.
   Se usa en: estado de los pedidos de la tienda (lista del Panel de Tienda
   y cabecera de la ficha del pedido).
   ========================================================================== */

.selector-estado {
    font-family: inherit;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: var(--wp--custom--radio--badge);
    cursor: pointer;
}

.selector-estado--correcto {
    background-color: var(--wp--custom--estado--activo-fondo);
    color: var(--wp--custom--estado--activo-texto);
}
.selector-estado--atencion {
    background-color: var(--wp--custom--estado--atencion-fondo);
    color: var(--wp--custom--estado--atencion-texto);
}
.selector-estado--info {
    background-color: var(--wp--custom--estado--info-fondo);
    color: var(--wp--custom--estado--info-texto);
}
.selector-estado--problema {
    background-color: var(--wp--custom--estado--problema-fondo);
    color: var(--wp--custom--estado--problema-texto);
}
.selector-estado--inactivo {
    background-color: var(--wp--custom--estado--inactivo-fondo);
    color: var(--wp--custom--estado--inactivo-texto);
}
.selector-estado--cancelado {
    background-color: var(--wp--custom--estado--cancelado-fondo);
    color: var(--wp--custom--estado--cancelado-texto);
}