/* =====================================================================
   Librería Uno · Tarjeta de producto (listados de WooCommerce)
   Archivo: tema-hijo/assets/css/uno-card.css
   Depende de tokens.css (variables --uno-*). Si falta alguna, cada
   var() trae su valor de respaldo.
   Mobile first: la base es el celular; tablet y escritorio se suman.
   ===================================================================== */

/* ---------- 1. Variables de la tarjeta: TODO se ajusta acá ---------- */
:root{
  /* forma */
  --uno-card-radio:        var(--uno-r-m, 16px);
  --uno-card-borde:        1px solid var(--uno-filete, #E2DED5);
  --uno-card-fondo:        var(--uno-blanco, #FFFFFF);
  --uno-card-foto:         var(--uno-blanco, #FFFFFF);  /* fondo de la foto: blanco, como la foto */
  --uno-card-ratio:        1 / 1;                       /* 1:1 del manual. Alternativa: 4 / 5 */
  --uno-card-sombra:       var(--uno-sombra, 0 1px 2px rgba(20,22,28,.06));
  --uno-card-sombra-hover: var(--uno-sombra-hover, 0 8px 20px rgba(20,22,28,.10));
  --uno-card-sube:         -4px;

  /* medidas (celular) */
  --uno-card-cols:      2;
  --uno-card-gap:       12px;
  --uno-card-pad:       12px;
  --uno-card-fs-meta:   11px;
  --uno-card-fs-nombre: 14px;
  --uno-card-fs-precio: 19px;
  --uno-card-fs-apoyo:  12px;
  --uno-card-btn-h:     var(--uno-tap-min, 44px);
  --uno-card-btn-radio: 10px;
  --uno-card-btn-fs:    14px;
  --uno-card-swatch:    14px;

  /* movimiento */
  --uno-card-t:     var(--uno-t-media, 260ms);
  --uno-card-t-btn: var(--uno-t-rapida, 160ms);
  --uno-card-curva: var(--uno-curva, cubic-bezier(.2,.6,.2,1));

  /* colores por mundo (se asignan con data-mundo según la categoría padre) */
  --uno-mundo-libreria:   var(--uno-verde,   #123C2E);
  --uno-mundo-papeleria:  var(--uno-verde-2, #0D3B1E);
  --uno-mundo-cotillon:   var(--uno-bordo,   #8C2F39);
  --uno-mundo-jugueteria: var(--uno-mostaza, #C79A3E);

  /* carrusel: tarjetas visibles (con decimal = se ve asomar la siguiente) */
  --uno-carrusel-visibles: 2.25;
}
@media (min-width: 768px){
  :root{
    --uno-card-cols: 3; --uno-card-gap: 16px; --uno-card-pad: 14px;
    --uno-card-fs-meta: 12px; --uno-card-fs-nombre: 15px; --uno-card-fs-precio: 21px;
    --uno-card-fs-apoyo: 13px; --uno-card-btn-fs: 15px; --uno-card-swatch: 16px;
    --uno-carrusel-visibles: 3.3;
  }
}
@media (min-width: 1024px){
  :root{ --uno-card-cols: 4; --uno-card-gap: 24px; --uno-card-pad: 16px; --uno-card-fs-precio: 22px; --uno-carrusel-visibles: 4; }
}
/* 5 columnas solo en pantallas grandes y solo si la grilla lo pide */
@media (min-width: 1536px){
  .uno-grid--5{ --uno-card-cols: 5; }
  .uno-carrusel--5{ --uno-carrusel-visibles: 5; }
}

/* ---------- 2. Grilla (reemplaza el float de ul.products) ---------- */
.woocommerce ul.products.uno-grid,
.uno-grid ul.products{
  display: grid;
  grid-template-columns: repeat(var(--uno-card-cols), minmax(0, 1fr));
  gap: var(--uno-card-gap);
  margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products.uno-grid::before, .woocommerce ul.products.uno-grid::after,
.uno-grid ul.products::before, .uno-grid ul.products::after{ display: none; }
.woocommerce ul.products li.product.uno-card-item{
  width: auto; margin: 0; padding: 0; float: none; display: flex;  /* misma altura por fila */
}

/* ---------- 3. Tarjeta ---------- */
.uno-card{
  --mundo: var(--uno-mundo-libreria);
  position: relative;
  display: flex; flex-direction: column; flex: 1; min-width: 0;
  background: var(--uno-card-fondo);
  border: var(--uno-card-borde);
  border-radius: var(--uno-card-radio);
  box-shadow: var(--uno-card-sombra);
  contain: layout paint;               /* el navegador no recalcula toda la grilla */
}
.uno-card[data-mundo="libreria"]  { --mundo: var(--uno-mundo-libreria); }
.uno-card[data-mundo="papeleria"] { --mundo: var(--uno-mundo-papeleria); }
.uno-card[data-mundo="cotillon"]  { --mundo: var(--uno-mundo-cotillon); }
.uno-card[data-mundo="libros"]    { --mundo: var(--uno-verde-medio, #2C5A46); }
.uno-card[data-mundo="jugueteria"]{ --mundo: var(--uno-mundo-jugueteria); }

/* Foco: anillo bordó en toda la tarjeta cuando se llega con teclado */
.uno-card:has(.uno-card__link:focus-visible){
  outline: 2px solid var(--uno-bordo, #8C2F39); outline-offset: 2px;
}

/* ---------- 4. Imagen: proporción fija y espacio reservado ---------- */
.uno-card__media{
  position: relative;
  aspect-ratio: var(--uno-card-ratio);   /* reserva el alto antes de que cargue: CLS 0 */
  background: var(--uno-card-foto);
  border-radius: calc(var(--uno-card-radio) - 1px) calc(var(--uno-card-radio) - 1px) 0 0;
  overflow: hidden;
}
.uno-card__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;                   /* nunca recorta el producto, aunque la foto no sea 1:1 */
}
.uno-card__img--alt{ opacity: 0; }

/* ---------- 5. Etiquetas: apiladas, nunca se pisan (máx. 2) ---------- */
.uno-card__badges{
  position: absolute; top: 8px; left: 8px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  pointer-events: none;
}
.uno-badge{
  font: 600 11px/1 var(--uno-texto, Inter, system-ui, sans-serif);
  letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 8px; border-radius: var(--uno-r-pill, 999px);
}
.uno-badge--oferta { background: var(--uno-bordo, #8C2F39);  color: #FFFFFF; }
.uno-badge--nuevo  { background: var(--uno-verde, #123C2E);  color: #FFFFFF; }
.uno-badge--ultimas{ background: var(--uno-mostaza, #C79A3E); color: var(--uno-negro, #111111); }
.uno-badge--agotado{ background: var(--uno-gris, #5C554A);   color: #FFFFFF; }

/* ---------- 6. Cuerpo ---------- */
.uno-card__body{
  display: flex; flex-direction: column; gap: 6px; flex: 1;
  padding: var(--uno-card-pad);
}
.uno-card__meta{
  display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0;
  font: 500 var(--uno-card-fs-meta)/1.2 var(--uno-texto, Inter, system-ui, sans-serif);
  letter-spacing: .06em; text-transform: uppercase; color: var(--uno-gris, #5C554A);
}
.uno-card__meta-txt{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.uno-card__mundo{ flex: none; width: 14px; height: 14px; color: var(--mundo); } /* acento del mundo */

.uno-card__title{
  margin: 0;
  font: 400 var(--uno-card-fs-nombre)/1.35 var(--uno-texto, Inter, system-ui, sans-serif);
  color: var(--uno-negro, #111111);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.35em);          /* siempre reserva 2 líneas: los precios quedan alineados */
}
.uno-card__link{ color: inherit; text-decoration: none; outline: none; }
.uno-card__link::after{                  /* toda la tarjeta es clicable, con un solo enlace */
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
}

/* Estrellas: solo se imprimen si hay reseñas (ver plantilla) */
.uno-card__rating{ display: flex; align-items: center; gap: 6px; font: 500 12px/1 var(--uno-texto, Inter, sans-serif); color: var(--uno-gris, #5C554A); }
.uno-stars{
  font-size: 12px; letter-spacing: 1px; line-height: 1;
  background: linear-gradient(90deg, var(--uno-mostaza, #C79A3E) var(--valor, 0%), var(--uno-filete, #E2DED5) 0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Precio: Woo imprime <del> y <ins> dentro de .price */
.uno-card__price{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 2px;
  font: 700 var(--uno-card-fs-precio)/1.15 var(--uno-display, Poppins, system-ui, sans-serif);
  color: var(--uno-verde, #123C2E);
  font-variant-numeric: tabular-nums;
}
.uno-card__price del{
  flex-basis: 100%; order: -1;
  font: 400 12px/1.2 var(--uno-texto, Inter, sans-serif); color: var(--uno-gris, #5C554A);
}
.uno-card__price ins{ text-decoration: none; }
.uno-card__desde{ font: 500 12px/1 var(--uno-texto, Inter, sans-serif); color: var(--uno-gris, #5C554A); }

.uno-card__apoyo{
  margin: 0; font: 400 var(--uno-card-fs-apoyo)/1.35 var(--uno-texto, Inter, sans-serif);
  color: var(--uno-gris, #5C554A);
}
.uno-card__apoyo strong{ font-weight: 600; color: var(--uno-verde, #123C2E); }

/* Muestras de color (solo productos variables) */
.uno-card__swatches{ display: flex; align-items: center; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; }
.uno-swatch{
  width: var(--uno-card-swatch); height: var(--uno-card-swatch); border-radius: 50%;
  background: var(--c); box-shadow: inset 0 0 0 1px rgba(17,17,17,.14);
}
.uno-swatch--mas{ width: auto; height: auto; background: none; box-shadow: none; margin-left: 2px; font: 600 12px/1 var(--uno-texto, Inter, sans-serif); color: var(--uno-gris, #5C554A); }

/* ---------- 7. Botón (Woo: .button.add_to_cart_button.ajax_add_to_cart) ---------- */
.uno-card__actions{ margin-top: auto; padding-top: 6px; position: relative; z-index: 2; }

.uno-card .uno-btn{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--uno-card-btn-h); padding: 0 12px; box-sizing: border-box;
  border: 1.5px solid currentColor; border-radius: var(--uno-card-btn-radio);
  font: 600 var(--uno-card-btn-fs)/1 var(--uno-display, Poppins, system-ui, sans-serif);
  letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--uno-card-t-btn) var(--uno-card-curva), color var(--uno-card-t-btn) var(--uno-card-curva);
}
.uno-card .uno-btn svg{ width: 18px; height: 18px; flex: none; }
.uno-card .uno-btn:focus-visible{ outline: 2px solid var(--uno-bordo, #8C2F39); outline-offset: 2px; }
.uno-btn__extra{ display: none; }                 /* «al carrito» / «cuando vuelva» solo desde tablet */
@media (min-width: 768px){ .uno-btn__extra{ display: inline; } }

/* Agregar al carrito: en reposo contorno bordó; se llena en hover/foco */
.uno-card .uno-btn--carrito{ background: #FFFFFF; color: var(--uno-bordo, #8C2F39); border-color: var(--uno-bordo, #8C2F39); }
.uno-card .uno-btn--carrito:active{ background: color-mix(in srgb, var(--uno-bordo, #8C2F39) 86%, #000); color: #FFFFFF; transition: none; }
.uno-grid--btn-lleno .uno-btn--carrito{ background: var(--uno-bordo, #8C2F39); color: #FFFFFF; }

/* Elegir opciones / Ver producto: secundario verde */
.uno-card .uno-btn--sec{ background: #FFFFFF; color: var(--uno-verde, #123C2E); border-color: var(--uno-verde, #123C2E); }

/* Cargando: Woo agrega .loading. Se esconde el texto (mantiene el ancho) y laten tres puntos */
.uno-card .uno-btn.loading{ position: relative; color: transparent !important; background: var(--uno-bordo, #8C2F39); pointer-events: none; }
.uno-card .uno-btn.loading > *{ visibility: hidden; }
.uno-card .uno-btn.loading::after{
  content: ""; position: absolute; inset: 0; margin: auto; width: 26px; height: 6px;
  background: radial-gradient(circle closest-side, #FFFFFF 92%, transparent) 0 0 / 10px 6px repeat-x;
  animation: uno-latido .9s var(--uno-card-curva) infinite;
}
/* Agregado: el JS agrega .is-agregado durante 1,6 s */
.uno-card .uno-btn.is-agregado{ background: var(--uno-ok, #2E7D4F); border-color: var(--uno-ok, #2E7D4F); color: #FFFFFF; }
.uno-btn__check path{ stroke-dasharray: 24; stroke-dashoffset: 24; animation: uno-trazo 360ms var(--uno-card-curva) forwards; }
/* Woo agrega un enlace «Ver carrito» después del botón: lo reemplaza el minicarrito */
.uno-card .added_to_cart.wc-forward{ display: none; }

/* ---------- 8. Sin stock ---------- */
.uno-card.is-agotado .uno-card__img{ opacity: .5; }
.uno-card.is-agotado .uno-card__title,
.uno-card.is-agotado .uno-card__price{ color: var(--uno-gris, #5C554A); }

/* ---------- 9. Hover: solo donde existe el mouse ---------- */
@media (hover: hover) and (pointer: fine){
  .uno-card{ transition: transform var(--uno-card-t) var(--uno-card-curva), box-shadow var(--uno-card-t) var(--uno-card-curva); }
  .uno-card__img--alt{ transition: opacity var(--uno-card-t) var(--uno-card-curva); }
  .uno-card:hover{ transform: translateY(var(--uno-card-sube)); box-shadow: var(--uno-card-sombra-hover); }
  .uno-card:hover .uno-card__img--alt{ opacity: 1; }
  .uno-card:hover .uno-btn--carrito,
  .uno-card .uno-btn--carrito:focus-visible{ background: var(--uno-bordo, #8C2F39); color: #FFFFFF; }
  .uno-card .uno-btn--carrito:hover{ background: color-mix(in srgb, var(--uno-bordo, #8C2F39) 92%, #000); }
  .uno-card:hover .uno-btn--sec{ background: var(--uno-verde-10, #EAF0EC); }
}

/* ---------- 10. Carrusel (relacionados / destacados) ---------- */
.uno-carrusel{ position: relative; }
.uno-carrusel ul.products{
  --gap: var(--uno-card-gap);
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--gap) * (var(--uno-carrusel-visibles) - 1)) / var(--uno-carrusel-visibles));
  gap: var(--gap); margin: 0; padding: 8px 0 16px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.uno-carrusel ul.products::before, .uno-carrusel ul.products::after{ display: none; }
.uno-carrusel ul.products li.product{ width: auto; margin: 0; float: none; scroll-snap-align: start; display: flex; }
.uno-carrusel__nav{ display: none; gap: 8px; }
@media (hover: hover) and (pointer: fine){ .uno-carrusel__nav{ display: flex; } }
.uno-carrusel__btn{
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: #FFFFFF; border: var(--uno-card-borde); color: var(--uno-verde, #123C2E); cursor: pointer;
}
.uno-carrusel__btn:disabled{ color: var(--uno-gris-calido, #A7A092); cursor: default; }
.uno-carrusel__btn:focus-visible{ outline: 2px solid var(--uno-bordo, #8C2F39); outline-offset: 2px; }

/* ---------- 11. Contador del carrito en el header + UNO que asoma ---------- */
.uno-cart-count.is-salto{ animation: uno-salto 400ms var(--uno-card-curva); }
.uno-cart-uno{ position: absolute; right: 100%; bottom: 6px; width: 22px; height: auto; opacity: 0; pointer-events: none; }
.uno-cart-uno.is-asoma{ animation: uno-asoma 800ms var(--uno-card-curva); }

/* ---------- 12. Animaciones ---------- */
@keyframes uno-latido{ 0%,100%{ opacity: .35 } 50%{ opacity: 1 } }
@keyframes uno-trazo{ to{ stroke-dashoffset: 0 } }
@keyframes uno-salto{ 0%{ transform: scale(1) } 40%{ transform: scale(1.25) } 100%{ transform: scale(1) } }
@keyframes uno-asoma{
  0%{ opacity: 0; transform: translateY(8px) } 25%,75%{ opacity: 1; transform: none } 100%{ opacity: 0; transform: translateY(8px) }
}

/* Sin movimiento: preferencia del sistema o interruptor del sitio (clase en <html>) */
@media (prefers-reduced-motion: reduce){
  .uno-card, .uno-card *, .uno-cart-count, .uno-cart-uno{ animation: none !important; transition: none !important; }
  .uno-card:hover{ transform: none; }
  .uno-carrusel ul.products{ scroll-behavior: auto; }
}
.uno-sin-animaciones .uno-card, .uno-sin-animaciones .uno-card *,
.uno-sin-animaciones .uno-cart-count, .uno-sin-animaciones .uno-cart-uno{ animation: none !important; transition: none !important; }
.uno-sin-animaciones .uno-card:hover{ transform: none; }