/* =========================================================
   BOTONES Y CONTROLES PEQUEÑOS
   Todos los botones de la aplicación salen de aquí.
   El principal es un degradado de acento con brillo; los
   demás, cristal o contorno fino.
   ========================================================= */

.btn{padding:9px 17px;border:1px solid transparent;border-radius:100px;font-family:inherit;
  font-size:.82rem;font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s,box-shadow .16s,transform .08s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* Acción principal: degradado violeta→azul con resplandor */
.btn--principal{background:var(--grad);color:var(--sobre-acento);box-shadow:var(--glow);
  border-color:var(--acento-borde)}
.btn--principal:hover:not(:disabled){filter:brightness(1.08);box-shadow:var(--glow)}

/* Botones sobre la barra superior (degradada): contorno claro translúcido */
.btn--claro{background:var(--barra-velo);color:var(--barra-texto);
  border-color:var(--barra-borde)}
.btn--claro:hover:not(:disabled){background:var(--barra-velo-mas);border-color:var(--barra-borde-mas)}

/* Botón suave: cristal esmerilado con texto de acento */
.btn--suave{background:var(--marfil-alto);color:var(--acento-texto);border-color:var(--linea-fuerte);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn--suave:hover:not(:disabled){background:var(--grad);color:var(--sobre-acento);border-color:transparent;box-shadow:var(--glow)}

.btn--peligro{background:transparent;color:var(--aviso);border-color:var(--linea-fuerte)}
.btn--peligro:hover:not(:disabled){background:var(--aviso);color:#fff;border-color:transparent}
.btn--mini{padding:4px 12px;font-size:.72rem}
.btn--tema{background:var(--barra-velo);color:var(--barra-texto);border-color:var(--barra-borde)}
.btn--tema:hover:not(:disabled){background:var(--barra-velo-mas);border-color:var(--barra-borde-mas)}

/* Flechitas de ordenar (▲ ▼) */
.mover{padding:2px 6px;border:1px solid var(--linea);border-radius:7px;background:var(--velo);
  color:var(--tinta-suave);font-size:.6rem;cursor:pointer;line-height:1;
  transition:background .14s,border-color .14s,color .14s}
.mover:hover{border-color:var(--acento-1);color:var(--acento-texto);background:var(--acento-tenue)}
.mover:disabled{opacity:.3;cursor:not-allowed}

/* Pastillas de alérgenos */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{padding:5px 12px;border:1px solid var(--linea-fuerte);border-radius:100px;background:var(--velo);
  font-family:inherit;font-size:.73rem;color:var(--tinta-suave);cursor:pointer;
  transition:background .12s,border-color .12s,color .12s,box-shadow .12s}
.chip:hover{border-color:var(--acento-1);color:var(--tinta)}
.chip[aria-pressed=true]{background:var(--grad);border-color:transparent;color:var(--sobre-acento);font-weight:700;
  box-shadow:var(--glow)}