/* =============================================================================
   NUTRITUPP · componentes.css — capa 02
   -----------------------------------------------------------------------------
   Se carga DESPUÉS de sistema.css y no declara ni un token: consume los suyos
   (--crema, --teal, --tinta, --linea, --radio-foto, --radio-boton...) con
   respaldo por si esa hoja no llegara.

   Aquí viven los tres controles que se repiten en toda la web: el botón, la
   tarjeta y la etiqueta. Un tratamiento de cada uno, no tres.

   El botón porta la técnica de "Motion Button" (21st.dev, @Shatlyk1011): un
   círculo que se expande hasta ocupar el botón entero mientras la flecha
   avanza y el texto vira. Allí es React + Tailwind + Framer Motion + lucide;
   aquí son 40 líneas de CSS, sin dependencias y sin JavaScript.
   ========================================================================== */

/* =============================================================================
   BOTÓN
   ========================================================================== */

.btn {
  position: relative;
  display: inline-block;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  min-width: 13.5rem;
  outline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}
.btn:disabled { cursor: not-allowed; opacity: .55; }

/* Empieza siendo un botón redondo de 46 px y al pasar por encima crece hasta
   llenar el ancho. El texto queda encima y vira cuando el círculo lo alcanza. */
.btn__circulo {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--teal, #145961);
  transition: width .52s var(--curva, cubic-bezier(.22, .61, .36, 1)),
              background .34s var(--curva, cubic-bezier(.22, .61, .36, 1));
}
.btn:hover:not(:disabled) .btn__circulo,
.btn:focus-visible:not(:disabled) .btn__circulo { width: 100%; }

.btn__flecha {
  position: absolute;
  top: 50%;
  left: 17px;
  translate: 0 -50%;
  width: 18px;
  height: 18px;
  color: var(--crema, #f1e9e2);
  transition: translate .52s var(--curva, cubic-bezier(.22, .61, .36, 1));
}
.btn:hover:not(:disabled) .btn__flecha,
.btn:focus-visible:not(:disabled) .btn__flecha { translate: 6px -50%; }

.btn__texto {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin-left: 14px;
  white-space: nowrap;
  font-weight: 600;
  font-size: var(--t-cuerpo, 1rem);
  letter-spacing: -.01em;
  color: var(--titulo, #161915);
  transition: color .34s var(--curva, cubic-bezier(.22, .61, .36, 1));
  pointer-events: none;
}
.btn:hover:not(:disabled) .btn__texto,
.btn:focus-visible:not(:disabled) .btn__texto { color: var(--crema, #f1e9e2); }

.btn--verde .btn__circulo { background: var(--verde, #74b74e); }
.btn--verde:hover:not(:disabled) .btn__circulo { background: #5a9a38; }

/* Acción secundaria: sin círculo, sin ruido. */
.btn-simple {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1.5px solid var(--linea, #dcd2c4);
  border-radius: var(--radio-boton, 8px);
  background: transparent;
  color: var(--teal, #145961);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .18s var(--curva, ease),
              background .18s var(--curva, ease),
              transform .18s var(--curva, ease);
}
.btn-simple:hover {
  border-color: var(--teal, #145961);
  background: var(--crema-honda, #e5dcd0);
  transform: translateY(-1px);
  color: var(--teal, #145961);
}
.btn-simple:active { transform: translateY(0); }
.btn-simple--solido {
  background: var(--teal, #145961);
  border-color: var(--teal, #145961);
  color: #fff;
}
.btn-simple--solido:hover { background: var(--teal-hondo, #073439); border-color: var(--teal-hondo, #073439); color: #fff; }

/* =============================================================================
   TARJETA — no hay caja. La foto flota sobre la crema y el texto va debajo.
   ========================================================================== */

.tarj {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.tarj__medio {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-foto, 12px);
  background: var(--crema-honda, #e5dcd0);
  box-shadow: var(--sombra-hero, 0 18px 30px -18px rgba(22, 25, 21, .25));
}
.tarj__medio img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: scale .52s var(--curva, cubic-bezier(.22, .61, .36, 1));
}
.tarj:hover .tarj__medio img,
.tarj:focus-within .tarj__medio img { scale: 1.05; }

.tarj__titulo {
  font-size: var(--t-h5, 1.0625rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--titulo, #161915);
  /* Dos líneas: con una se cortaban 12 de los 24 nombres de plato. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarj__texto { font-size: var(--t-menor, .9375rem); line-height: 1.5; color: var(--tinta, #556354); margin: 0; }
.tarj__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* El plato pesa más que el importe. En la plantilla era al revés. */
.tarj__precio {
  font-weight: 600;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  color: var(--teal, #145961);
}

/* =============================================================================
   ETIQUETA
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--t-etiq, .75rem);
  font-weight: 700;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  background: var(--crema-honda, #e5dcd0);
  color: var(--teal, #145961);
  white-space: nowrap;
}
.chip--verde { background: #e8f3e0; color: #46701f; }
.chip--ambar { background: #fbf3e2; color: #8a5a12; }
.chip--rojo { background: #fbeaea; color: #a82c2c; }
.chip--gris { background: #ece6dc; color: var(--tinta, #556354); }

@media (prefers-reduced-motion: reduce) {
  /* El botón se queda en su estado final: si no hay movimiento, que al menos
     se lea igual de bien. */
  .btn__circulo { width: 100% !important; }
  .btn__texto { color: var(--crema, #f1e9e2) !important; }
}