/* Piezas reutilizables: botones, tarjetas, formularios, tallas, stock, etc. */

/* ---- Botones ---- */
.boton:hover { background: #B5E652; }
.boton[disabled] { background: var(--borde); color: var(--acero-oscuro); cursor: not-allowed; }
.boton--borde { background: transparent; border: 2px solid currentColor; }
.boton--claro { background: transparent; border: 2px solid var(--blanco-calido); color: var(--blanco-calido); }
.boton--claro:hover { background: rgba(246, 246, 242, 0.14); }
.boton--borde:hover { background: rgba(21, 25, 29, 0.06); }
.boton--bloque { display: flex; width: 100%; margin-top: var(--espacio-1); }
.enlace-boton { background: none; border: 0; padding: 0.5rem 0; min-height: var(--alto-toque); font: inherit; color: var(--grafito); text-decoration: underline; cursor: pointer; }

/* ---- Precios, etiquetas, stock ---- */
.marca { font-size: 0.8125rem; color: var(--acero-oscuro); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.15rem; }
.precios { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; margin: 0.25rem 0; }
.precio { font: 800 1.125rem var(--fuente-titulos); }
.precio-anterior { color: var(--acero-oscuro); text-decoration: line-through; font-size: 0.875rem; }
.etiqueta { background: var(--lima); color: var(--grafito); font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 0.25rem; }

.stock { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; margin: 0.25rem 0; }
.stock__punto { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: currentColor; flex: none; }
.stock--ok { color: var(--ok); }
.stock--bajo { color: var(--aviso); }
.stock--agotado { color: var(--error); }

/* ---- Tarjeta de producto ---- */
.grid-productos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.tarjeta:hover { border-color: var(--grafito); box-shadow: var(--sombra); }
.tarjeta__enlace { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.tarjeta__imagen { position: relative; aspect-ratio: 1 / 1; background: var(--blanco); overflow: hidden; }
.tarjeta__imagen img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.35s ease; }
.tarjeta:hover .tarjeta__imagen img { transform: scale(1.04); }
.tarjeta__oferta { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 1; background: var(--grafito); color: var(--lima); font: 800 0.75rem var(--fuente-titulos); letter-spacing: 0.03em; padding: 0.2rem 0.45rem; border-radius: 2px; }
.tarjeta__cuerpo { flex: 1; display: flex; flex-direction: column; padding: 0.75rem; border-top: 1px solid var(--borde); }
.tarjeta__nombre { font-size: 0.9375rem; line-height: 1.3; margin: 0 0 0.25rem; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta__meta { color: var(--acero-oscuro); font-size: 0.8125rem; margin: 0 0 0.35rem; }
.tarjeta__cta {
  margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 2.5rem;
  border: 1.5px solid var(--grafito); border-radius: var(--radio);
  font: 700 0.75rem var(--fuente-texto); letter-spacing: 0.08em; text-transform: uppercase;
}
.tarjeta__cuerpo > .precios + .stock, .tarjeta__cuerpo > .precios { margin-bottom: 0.6rem; }
.tarjeta:hover .tarjeta__cta, .tarjeta__enlace:focus-visible .tarjeta__cta { background: var(--grafito); color: var(--blanco-calido); }
.tarjeta__enlace:focus-visible { outline-offset: -3px; }

/* ---- Formularios ---- */
.campo-grupo { border: 0; padding: 0; margin: 0 0 var(--espacio-3); min-width: 0; }
.campo-grupo legend, .campo-grupo__titulo { display: block; padding: 0; margin-bottom: 0.5rem; font-weight: 600; }
.campo { margin-bottom: var(--espacio-2); }
.campo label { display: block; margin-bottom: 0.25rem; font-size: 0.9375rem; font-weight: 500; }
.campo input {
  width: 100%; min-height: var(--alto-toque); padding: 0 0.75rem;
  border: 1px solid var(--acero); border-radius: var(--radio);
  font: 1rem var(--fuente-texto); background: var(--blanco); color: var(--grafito);
}
.campo--error input { border-color: var(--error); border-width: 2px; }
.campo__error { color: var(--error); font-size: 0.875rem; margin: 0.25rem 0 0; }

.opcion { display: flex; align-items: center; gap: 0.6rem; min-height: var(--alto-toque); cursor: pointer; }
.opcion input { width: 1.25rem; height: 1.25rem; accent-color: var(--grafito); flex: none; }
.opcion--aparte { margin-bottom: var(--espacio-2); font-weight: 600; }
input[type="range"] { width: 100%; accent-color: var(--grafito); min-height: var(--alto-toque); }

/* ---- Tallas (botones de selección) ---- */
.tallas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.talla { position: relative; }
.talla input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.talla > span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--alto-toque); min-height: var(--alto-toque); padding: 0 0.75rem;
  border: 1px solid var(--acero); border-radius: var(--radio); background: var(--blanco); font-weight: 600;
}
.talla input:checked + span { background: var(--grafito); color: var(--blanco-calido); border-color: var(--grafito); }
.talla input:focus-visible + span { outline: 3px solid var(--grafito); outline-offset: 2px; }
.talla--agotada > span { color: var(--acero-oscuro); text-decoration: line-through; background: var(--banda); border-style: dashed; }
.talla--agotada input { cursor: not-allowed; }

/* ---- Selector de cantidad ---- */
.stepper { display: inline-flex; border: 1px solid var(--acero); border-radius: var(--radio); background: var(--blanco); overflow: hidden; }
.stepper__btn { width: var(--alto-toque); min-height: var(--alto-toque); border: 0; background: transparent; font: 600 1.25rem var(--fuente-texto); cursor: pointer; color: var(--grafito); }
.stepper__btn:disabled { color: var(--acero); cursor: not-allowed; }
.stepper__valor { width: 3.25rem; border: 0; text-align: center; font: 600 1rem var(--fuente-texto); -moz-appearance: textfield; background: transparent; color: var(--grafito); }
.stepper__valor::-webkit-outer-spin-button, .stepper__valor::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- Mensajes y avisos ---- */
.mensaje { min-height: 1.5rem; margin: var(--espacio-1) 0 0; font-size: 0.9375rem; }
.mensaje--error { color: var(--error); font-weight: 500; }
.mensaje--exito { color: var(--ok); font-weight: 500; }
.mensaje a { color: inherit; }
.aviso-demo { background: #EEF9D5; border-left: 4px solid var(--lima); padding: var(--espacio-2); border-radius: 0 var(--radio) var(--radio) 0; font-size: 0.9375rem; }
.vacio { text-align: center; padding: var(--espacio-4) var(--espacio-2); }
.vacio h2 { margin-bottom: var(--espacio-1); }