/* ====== Catálogo humano – estilos limpios y consolidados ====== */

/* Centros sólo para grid y barra WA */
.catalog-grid,
.wa-bar-inner {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== Hero del catálogo a todo ancho ===== */
.catalog-hero{
  width: 100%;
  background: #d8f5f3;               /* mismo tono del fondo */
  padding: 2rem 2rem 1.5rem;         /* respiración lateral */
  box-sizing: border-box;
}
.catalog-hero h2{
  color:#266E6D; margin:0 0 .25rem;
}
.catalog-hero p{ margin:0 0 1rem; color:#445; }

/* Contenido centrado dentro del hero (título + subtítulo) */
.catalog-hero > *{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== Filtros (franja fluida y centrada) ===== */
.filters{
  width: 100%;
  max-width: none;
  padding: 0 2rem;                    /* respiración lateral */
  box-sizing: border-box;
  display:flex; gap:1rem; flex-wrap:wrap;
  justify-content: center;            /* centrados en desktop */
}
.filters input, .filters select{
  padding:.6rem .8rem;
  border:1px solid #dfeeee;
  border-radius:10px;
  min-width:220px;
  flex: 1 1 280px;                    /* ocupan el ancho disponible */
}
@media (max-width: 600px){
  .filters input, .filters select{
    flex: 1 1 100%;                   /* full width en móvil */
  }
}

/* ===== Grid de productos (centrado y fluido) ===== */
.catalog-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 2rem auto;
  padding-bottom: 6rem; /* espacio para la barra WA fija */
}
/* breakpoints opcionales si quieres forzar menos columnas */
@media (max-width:1024px){ .catalog-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width:600px){  .catalog-grid{ grid-template-columns: 1fr; } }

/* ===== Card ===== */
.prod-card{
  background:#fff; 
  border:1px solid #e6f2f1; 
  border-radius:12px; 
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  display:flex; 
  flex-direction:column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.prod-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

/* Imagen del producto (contenida y consistente) */
.prod-card img{ 
  width:100%; 
  height:160px;               /* consistente en todas las cards */
  object-fit:contain;         /* no recorta imágenes */
  background:#fafafa; 
  border-radius:8px; 
  margin: .9rem .9rem .6rem;  /* deja aire lateral */
}

/* Título y descripción */
.prod-card h3{ 
  font-size:1.1rem; 
  color:#266E6D; 
  margin:0 .9rem .35rem; 
}
.prod-card .desc{ 
  margin:0 .9rem .75rem; 
  color:#555; 
  font-size:.95rem; 
  flex-grow:1;               /* empuja meta + botón hacia abajo */
}

/* Mismo margen lateral para párrafos info */
.prod-card p:not(.desc){
  margin: 0 .9rem .55rem;
  color:#333;
}
.prod-card p:not(.desc) strong{
  color:#1f3d3c;
  font-weight: 700;
}


.meta {
  margin: auto .9rem .9rem;
  width: calc(100% - 1.8rem);
  display: flex;
  flex-direction: column;     /* 🔹 uno debajo del otro */
  align-items: center;        /* 🔹 centra horizontal */
  gap: 0.6rem;
}

.price {
  font-weight: 700;
  color: #222;
  font-size: 1rem;
  text-align: center;
}

.qty {
  display: flex;
  align-items: center;
  justify-content: center;    /* 🔹 centra horizontal */
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}

.qty-btn{
  background: #f0f0f0;
  border: none;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  font-size: 1rem;
}
.qty-btn:hover { background:#e0e0e0; }
.qty input{
  width: 48px; 
  text-align:center;
  border:none; 
  outline:none; 
  font-size:1rem;
}

/* Botón Agregar – color secundario del header */
.add-btn{
  margin:.25rem .9rem 1rem; 
  padding:.6rem .9rem;
  border:none; 
  border-radius:10px; 
  cursor:pointer; 
  background:#2D8C89;          /* secundario (teal) */
  color:#fff; 
  font-weight:700;
  transition: background .2s ease, filter .2s ease;
}
.add-btn:hover{ background:#24706d; } /* oscurece en hover */

/* ===== Barra WhatsApp fija ===== */
.wa-bar{
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,.92); backdrop-filter: blur(3px);
  border-top: 1px solid #e6f2f1;
}
.wa-bar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0;
}
.wa-count{ color:#222; }
.wa-count strong{ font-weight:800; }

.wa-btn{
  background:#25D366; color:#fff; border:none; border-radius:999px; padding:.65rem 1.1rem; font-weight:800; cursor:pointer;
}
.wa-btn:hover{ filter:brightness(1.05); }

/* Responsive tweaks */
@media (max-width:600px){
  .prod-card img { height: 120px; }
}

.filters { position: sticky; top: 68px; z-index: 10; background: #dff3f1; padding: .75rem 0; }

.skeleton { background: linear-gradient(90deg,#eee 25%,#f6f6f6 37%,#eee 63%); background-size:400% 100%; animation: sh 1.2s ease infinite; }
@keyframes sh{0%{background-position:100% 0}100%{background-position:-100% 0}}
.card-skel{border:1px solid #e6f2f1;border-radius:12px;padding:1rem}
.card-skel .img{height:160px;border-radius:8px;margin:.9rem; }
.card-skel .l1,.card-skel .l2{height:14px;margin:.5rem .9rem;border-radius:6px}
.card-skel .l1{width:70%}.card-skel .l2{width:50%}

.prod-card button:focus, .filters input:focus, .filters select:focus{
  outline: 3px solid #2D8C89; outline-offset: 2px;
}

/* ===== Badges en las cards ===== */
.prod-card{
  position: relative; /* necesario para posicionar los badges */
}

.badge{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: #2D8C89;       /* “Nuevo” / destacado */
  color: #fff;
  padding: .28rem .6rem;
  border-radius: 10px;
  font-size: .75rem;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  pointer-events: none;       /* no interfiere con clics */
}
.badge.muted{
  background: #9aa5a7;       /* “Consultar” */
  color: #fff;
}

/* 🔹 NUEVO: badge de precio y ocultar precio inferior cuando existe */
.badge.price{
  background:#2D8C89;        /* mismo teal secundario */
  color:#fff;
}
.prod-card.has-price-badge .meta .price{
  display:none;
}

.wa-btn i {
  font-size: 1.2rem;
}

/* ==== Íconos en títulos y descripciones ==== */
.catalog-hero h2 i,
.catalog-hero p i {
  margin-right: 0.4rem; /* espacio entre ícono y texto */
  color: #266E6D;       /* mismo verde del header */
  font-size: 1.1em;     /* se ajusta al tamaño de la fuente */
  vertical-align: middle;
}
.catalog-hero p i.fab.fa-whatsapp {
  color: #25D366; /* color oficial de WhatsApp */
}

@media (max-width: 768px){
  .nav-links {
    border-radius: 12px;   /* redondeo de esquinas */
    overflow: hidden;      /* asegura que el fondo siga el borde */
  }
}


/* Empty state del carrito */
.empty-state{
  max-width: 820px;
  margin: 28px auto 0;
  background:#fff;
  border:1px solid #eaf3f2;
  border-radius:16px;
  padding:24px 22px 26px;
  text-align:center;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.empty-illo{
  display:flex; justify-content:center; margin-bottom:10px;
  filter: drop-shadow(0 4px 10px rgba(45,140,137,.12));
}
.empty-state h3{
  margin:.2rem 0 .4rem;
  color:#1d5756; font-weight:800; font-size:1.35rem;
}
.empty-state p{
  margin:0 0 .75rem; color:#51726f; font-size:1rem;
}
.empty-cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.empty-cta .btn{ min-width:210px; }


.wa-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.wa-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-danger {
  background-color: #f8d7da;
  color: #842029;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-danger:hover {
  background-color: #f1b0b7;
}

.btn-primary {
  background-color: #2d8c89;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-primary:hover {
  background-color: #266e6d;
}

/* =========================
   Carrito — estilos robustos
   ========================= */

/* Grid contenedor */
.car-grid{
  width: min(1100px, 92%);
  margin: 12px auto 0;
  display: grid;
  gap: 14px;
}

/* Tarjeta/fila del carrito */
.car-row{
  display: grid;
  grid-template-columns: 120px 1fr 140px; /* img | info | precio */
  align-items: start;
  gap: 16px;
  background:#fff;
  border:1px solid #e6f2f1;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Imagen */
.car-media{
  width: 120px; height: 100px;
  border-radius: 10px;
  background:#f6f6f6;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.car-media img{ width:100%; height:100%; object-fit:contain; }

/* Info */
.car-info{ display:flex; flex-direction:column; gap:.4rem; }
.car-title{ margin:0; color:#266E6D; font-weight:800; font-size:1.05rem; }
.car-meta{ color:#3a4; }
.car-desc{ color:#555; margin:.1rem 0 0; }

/* Stepper (evita que se vea como input plano) */
.qty-stepper{
  display:inline-flex; align-items:center;
  border:1px solid #ccdcdc; border-radius:10px; overflow:hidden;
  background:#fff;
}
.qty-stepper .qty-minus,
.qty-stepper .qty-plus{
  width:40px; height:38px; border:0; background:#f2f5f5; cursor:pointer;
  font-size:1.05rem; line-height:1;
}
.qty-stepper .qty-minus:hover,
.qty-stepper .qty-plus:hover{ background:#e7eeee; }
.qty-stepper .qty-input{
  width:60px; height:38px; border:0; text-align:center; font-size:1rem;

}
.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* Botón eliminar dentro de la fila */
.car-remove{
  background:#fff; border:1px solid #dfe8e6; color:#294;
  padding:.45rem .7rem; border-radius:10px; cursor:pointer; font-weight:700;
}
.car-remove:hover{ background:#f7fbfa; }
.car-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* Precio a la derecha */
.car-price{ text-align:right; align-self:center; }
.car-price .unit{ color:#344; font-weight:700; }
.car-price .sub{ color:#577; margin-top:.25rem; }

/* Footer del carrito (total + botones) */
.car-footer.container{ width:min(1100px,92%); }

/* Iconos dentro de botones (barra inferior también los usa) */
.btn i{ margin-right:.4rem; }

/* Responsivo */
@media (max-width: 820px){
  .car-row{ grid-template-columns: 90px 1fr; }
  .car-price{
    grid-column: 1 / -1; text-align:left; padding-top:.25rem;
    border-top:1px solid #eef3f2; margin-top:.35rem;
  }
  .car-media{ width:90px; height:80px; }
}
@media (max-width: 540px){
  .car-title{ font-size:1rem; }
  .qty-stepper .qty-minus,.qty-stepper .qty-plus{ width:36px; height:36px; }
  .qty-stepper .qty-input{ width:54px; height:36px; }
}
/* ================= Paginador Aislado ================= */
#paginador.paginador{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
  align-items: center;
  padding: 12px 16px;
  margin: 16px 0 90px;             /* deja aire vs “Ver carrito” */
  z-index: 50;                     /* por encima de sombras suaves */
  background: transparent;
  border: 0;
}

/* ===== Paginador actual (ID: #paginator) ===== */
#paginator.paginator{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;     /* centrado */
  gap: .6rem;
  width: 90%;
  max-width: 1200px;
  margin: 18px auto 88px;      /* aire vs barra WA */
  padding: 10px 12px;
  background: transparent;
  z-index: 40;
}

/* Botones «prev / next» (clases reales en tu JS: pg-prev / pg-next) */
#paginator .pg-prev,
#paginator .pg-next{
  all: unset;                  /* limpia herencias */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease;
  font: 600 14px/1 inherit;
  background: #2D8C89;         /* teal */
  color: #fff;
}
#paginator .pg-prev:hover,
#paginator .pg-next:hover{ transform: translateY(-1px); }
#paginator .pg-prev[disabled],
#paginator .pg-next[disabled]{
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  background: #cfe4e2;         /* deshabilitado acorde a paleta */
  color: #335;
}

/* Texto “Página X de Y” */
#paginator .pg-info{
  font-weight: 700;
  color: #266E6D;              /* verde header */
  background: #e8f6f5;         /* fondo suave */
  padding: .4rem .7rem;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(0,0,0,.05);
}

/* Responsive */
@media (max-width: 640px){
  #paginator.paginator{
    margin-bottom: 110px;
    gap: .5rem;
  }
}

/* feedback "Agregado ✓" */
.add-btn.added { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.add-btn.ok     { background:#266E6D !important; } /* mismo verde del header */


/* Estilos para el card */
.catalog-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px 25px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  max-width: 700px; /* para que no se extienda de más */
  margin: 20px auto; /* centrado horizontal */
  text-align: center;
}

.catalog-card h1 {
  color: #266E6D;
  font-size: 1.8rem;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.catalog-card p {
  color: #444;
  font-size: 1rem;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.catalog-card i {
  font-size: 1.2rem;
}

/* Botones del carrito */
.cart-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

/* Botón general */
.cart-buttons a,
.cart-buttons button {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Botón "Vaciar" */
.btn-vaciar {
  background-color: #f8d7da;
  color: #721c24;
  border: none;
}
.btn-vaciar:hover {
  background-color: #f5c6cb;
}

/* Botón "Ver carrito" */
.btn-ver-carrito {
  background-color: #266E6D;
  color: #fff;
  border: none;
}
.btn-ver-carrito:hover {
  background-color: #1e5656;
}

/* --- Versión responsiva con solo íconos --- */
@media (max-width: 600px) {
  .cart-buttons a span,
  .cart-buttons button span {
    display: none; /* oculta texto en móvil */
  }

  .cart-buttons a i,
  .cart-buttons button i {
    font-size: 1.2rem; /* agranda ícono */
  }

  .cart-buttons a,
  .cart-buttons button {
    padding: 10px; /* más compacto */
    flex: 0 0 48px; /* ancho fijo cuadrado */
    height: 48px;
    border-radius: 50%; /* botón circular */
    justify-content: center;
  }
}


/* Versión solo iconos en móviles */
@media (max-width: 600px) {
  .wa-actions .btn span {
    display: none; /* oculta texto */
  }

  .wa-actions .btn {
    padding: 10px;
    width: 44px;
    height: 44px;
    border-radius: 50%; /* botones circulares */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wa-actions .btn i {
    font-size: 1.2rem; /* agranda ícono */
  }
}


/* Centrar banner "precios con IVA" encima del cupón */
.cart-iva-banner{
  /* centra el bloque */
  margin: 8px auto 14px;
  /* ancho contenido: ajusta este valor si tu input de cupón es más ancho/angosto */
  width: min(100%, 920px);
  /* centra el contenido interno */
  justify-content: center;
  text-align: center;
}

.cart-iva-banner .iva-sub{
  display: inline;
}