/* cards.css - Tarjeta de producto, tarjeta de categoría y cotizaciones.
   Tema oscuro premium: superficies --mm-superficie, imágenes sobre #0d1219. */
.mm-card-producto {
  background: var(--mm-superficie);
  border: 1px solid var(--mm-borde);
  border-radius: var(--mm-radio-l);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--mm-sombra-s);
  transition:
    transform var(--mm-t-medio) var(--mm-ease),
    box-shadow var(--mm-t-medio) var(--mm-ease),
    border-color var(--mm-t-rapida) var(--mm-ease);
}

.mm-card-producto:hover {
  transform: translateY(-6px);
  border-color: var(--mm-borde-fuerte);
  box-shadow: var(--mm-sombra-m), 0 0 34px -12px rgba(255, 152, 0, 0.15);
}

.mm-card-imagen {
  position: relative;
  width: 100%;
  height: clamp(220px, 26vw, 245px);
  background: #0d1219;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mm-card-imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  transition: transform var(--mm-t-suave) var(--mm-ease);
}

.mm-card-producto:hover .mm-card-imagen img {
  transform: scale(1.07);
}

.mm-card-etiquetas {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1;
}

.mm-etiqueta {
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 5px 11px;
  border-radius: 999px;
  color: #fff;
  box-shadow: var(--mm-sombra-xs);
  white-space: nowrap;
}

.mm-etiqueta-destacado {
  background: var(--mm-primario);
  box-shadow: 0 4px 18px -6px rgba(255, 152, 0, 0.6);
}

.mm-etiqueta-stock {
  background: var(--mm-exito);
  box-shadow: 0 4px 18px -6px rgba(34, 197, 94, 0.45);
}

.mm-etiqueta-nostock {
  background: var(--mm-texto-tenue);
  box-shadow: 0 4px 14px -6px rgba(138, 151, 168, 0.4);
}

.mm-card-cuerpo {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.mm-card-categoria {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mm-primario);
}

.mm-card-nombre {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  transition: color var(--mm-t-rapida) var(--mm-ease);
}

.mm-card-nombre:hover {
  color: var(--mm-primario-claro);
}

.mm-card-codigo {
  font-size: 0.78rem;
  color: var(--mm-texto-tenue);
}

.mm-card-pie {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
}

.mm-precio {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mm-texto);
  white-space: nowrap;
}

.mm-precio-consulta {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--mm-acento);
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.18);
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 0 18px -6px rgba(56, 189, 248, 0.5);
  white-space: nowrap;
}

.mm-boton-agregar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mm-superficie-hover);
  color: var(--mm-texto);
  border: 1px solid var(--mm-borde);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--mm-sombra-xs);
  transition:
    background var(--mm-t-medio) var(--mm-ease),
    border-color var(--mm-t-rapida) var(--mm-ease),
    transform var(--mm-t-rapida) var(--mm-ease),
    box-shadow var(--mm-t-medio) var(--mm-ease);
}

.mm-boton-agregar:hover {
  background: var(--mm-primario);
  border-color: var(--mm-primario);
  color: var(--mm-oscuro);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(255, 152, 0, 0.55);
}

.mm-boton-agregar:active {
  transform: translateY(0) scale(0.96);
}

.mm-boton-agregar.agregado {
  background: var(--mm-exito);
  border-color: var(--mm-exito);
  color: var(--mm-oscuro);
  box-shadow: 0 8px 22px -6px rgba(34, 197, 94, 0.55);
}

/* Utilidades funcionales: card.js las usa para mostrar/ocultar precio y consulta. */
.mm-block {
  display: block;
}

.mm-none {
  display: none;
}

/* Tarjeta de categoría */
.mm-card-categoria {
  position: relative;
  border-radius: var(--mm-radio-l);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(180deg, var(--mm-superficie), #111821);
  border: 1px solid var(--mm-borde);
  box-shadow: var(--mm-sombra-s);
  transition:
    transform var(--mm-t-medio) var(--mm-ease),
    box-shadow var(--mm-t-medio) var(--mm-ease),
    border-color var(--mm-t-rapida) var(--mm-ease);
}

.mm-card-categoria:hover {
  transform: translateY(-6px);
  border-color: var(--mm-borde-fuerte);
  box-shadow: var(--mm-sombra-m), 0 0 30px -12px rgba(255, 152, 0, 0.18);
}

.mm-card-categoria img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 22px;
  background: #0d1219;
  background-clip: content-box;
  opacity: 0.95;
  transition: transform var(--mm-t-suave) var(--mm-ease), opacity var(--mm-t-suave) var(--mm-ease);
}

.mm-card-categoria:hover img {
  transform: scale(1.07);
  opacity: 1;
}

.mm-card-categoria-capas {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.22) 38%, transparent 68%);
}

.mm-card-categoria-texto {
  position: relative;
  padding: 20px;
  width: 100%;
  color: #fff;
}

.mm-card-categoria-texto h3 {
  font-size: 1.2rem;
  font-weight: 800;
}

.mm-card-categoria-texto p {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mm-primario-claro);
  font-weight: 800;
  margin-top: 4px;
}

/* Accesibilidad: sin movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  .mm-card-producto:hover,
  .mm-card-categoria:hover {
    transform: none;
  }

  .mm-card-producto:hover .mm-card-imagen img,
  .mm-card-categoria:hover img,
  .mm-boton-agregar:hover {
    transform: none;
  }
}