/* =========================================================
   ETIQUETAS Y ALERTAS
   El apartado que sale dentro del recuadro del grupo (su
   alerta) y dentro de la ficha de cada plato (sus
   etiquetas). Los dos se ven igual a propósito: son la
   misma idea, cambia dónde se pintan en la carta.

   La tarjeta de cada etiqueta o alerta es SIEMPRE una sola
   columna compacta, en cualquier pantalla. Lo único que
   cambia en escritorio es que las tarjetas de etiquetas se
   reparten en rejilla, varias por fila, en vez de estirarse
   cada una a todo lo ancho.
   ========================================================= */

.destacados{margin-top:14px;padding-top:14px;border-top:1px solid var(--linea)}
.destacados__cabecera{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.destacados__cabecera .campo__etiqueta{margin-right:auto}

/* Lista de tarjetas: en móvil, una debajo de otra */
.destacados__lista{display:grid;gap:10px;margin-top:10px}

/* Cada alerta o etiqueta, en su propia tarjetita hundida */
.destacado{padding:10px;border:1px solid var(--linea);
  border-radius:var(--radio-m);background:var(--velo);
  display:flex;flex-direction:column;gap:10px}
.destacado--alerta{margin-top:10px}

/* Arriba: la posición a la izquierda y los botones a la derecha */
.destacado__cabecera{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.destacado__cabecera .chips{margin-top:0}
.destacado__botones{display:flex;align-items:center;gap:4px;margin-left:auto}

/* Dentro de la tarjeta todo va en una columna: un campo por idioma
   uno debajo de otro, y los dos juegos de color igual. */
.destacado .par-idiomas{grid-template-columns:1fr;gap:6px;margin-bottom:0}
.destacado .campo__pista{margin:-2px 0 0}
.colorines{display:grid;gap:8px}
.colorines__juego{display:flex;flex-direction:column;gap:4px}
.colorines .chips{margin-top:0;align-items:center}

/* La rueda de color del navegador, encajada con el resto de controles */
.rueda{width:38px;height:30px;padding:2px;flex:0 0 auto;
  border:1px solid var(--linea-fuerte);border-radius:var(--radio-s);
  background:var(--velo);cursor:pointer}
.rueda::-webkit-color-swatch-wrapper{padding:0}
.rueda::-webkit-color-swatch{border:none;border-radius:6px}
.rueda::-moz-color-swatch{border:none;border-radius:6px}

/* La muestra: el mismo fondo oscuro de la carta, con la pieza encima,
   para ver de verdad cómo va a quedar. Baja y discreta. */
.previa-destacado{padding:9px 10px;border-radius:var(--radio-s);
  border:1px solid var(--linea);display:flex;justify-content:center;overflow:hidden}
.previa-destacado__pieza{max-width:100%;overflow-wrap:anywhere;text-align:center}

/* Igual que en la carta: la etiqueta va en versalitas y a pelo; la
   alerta, con letra normal. */
.previa-destacado__pieza--etiqueta{display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:.67rem;font-weight:600;line-height:1.55;letter-spacing:.09em;text-transform:uppercase}
.previa-destacado__pieza--alerta{display:inline-block;padding:4px 12px;border-radius:999px;
  font-size:.72rem;font-weight:500;line-height:1.45}

/* Móvil: los botones bajan a su propia línea para no aplastarse */
@media(max-width:600px){
  .destacado__botones{margin-left:0;width:100%;justify-content:flex-end}
}

/* Escritorio: las etiquetas se reparten en rejilla, tantas por fila
   como quepan sin bajar de 270 px cada una. La alerta del grupo, que
   es una sola, no se estira a todo lo ancho. */
@media(min-width:601px){
  .destacados__lista{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
  .destacado--alerta{max-width:420px}
}