/* ====== CABEZERA ====== */
*{box-sizing:border-box}
body{
  font-family:Arial, sans-serif;
  margin:0;
  padding-top:70px; /* 👈 evita que el contenido quede oculto bajo la cabecera fija */
}

/* CORRECCIÓN: Ajustamos el layout principal de la cabecera */
.navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 20px;
  background:#fff;
  border-bottom:1px solid #eee;
}

.logo-section{display:flex; align-items:center; gap:12px; min-height:44px}
.logo{width:32px; height:32px; object-fit:cover; display:block}
.brand{font-weight:800; font-size:20px; color:#222; letter-spacing:.5px}

/* CORRECCIÓN: Quitamos el 'margin: 0 auto' que causaba el conflicto */
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  /* Ya no necesita margen aquí, el layout principal se encarga */
}

/* CORRECCIÓN: La clave está aquí. Empujamos este bloque a la derecha */
.search-cart{
  display:flex;
  align-items:center;
  gap:16px;
  margin-left: auto; /* <-- ESTA LÍNEA ES LA MAGIA ✨ */
}

.search-box{
  display:flex; align-items:center; gap:8px;
  background:#f5f5f5; padding:8px 12px; border-radius:20px; flex:0 1 480px;
}
.search-box input{
  border:0; outline:0; background:transparent; width:100%; font-size:15px;
}
.search-box i{color:#888}
.cart{position:relative; font-size:20px; color:#333; background:transparent; border:0; cursor:pointer}
.cart-count{
  position:absolute; top:-8px; right:-10px; background:#000; color:#fff;
  font-size:12px; border-radius:50%; padding:2px 6px; font-weight:700;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 768px){
  .brand{display:none}
  .logo{width:28px; height:28px}
  .navbar{padding:10px 14px}
  .search-cart{gap:12px}
  .search-box{flex:1}               
  .search-box input{font-size:14px}
}

@media (max-width: 480px){
  .search-box{padding:6px 10px}
  .search-box input::placeholder{font-size:13px}
}

/* ====== BANER ====== */
.hero{
  position:relative;
  width:100%;
  height:300px;                
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;             
  object-position:center 45%;    
  z-index:-1;
}

.hero-dim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
  z-index:0;
}

.hero-overlay{
  position:relative; z-index:1;
  width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:0 16px;
  text-align:center;
}

.hero-box{
  padding:10px 22px;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
  max-width:min(90%, 1000px);
  margin:auto;
}

.hero-title{
  margin:0;
  font-weight:800;
  line-height:1.1;
  font-size: clamp(1.8rem, 6vw, 3.5rem);
  letter-spacing:.3px;
}

.hero-subtitle{
  margin:.5rem 0 0;
  font-weight:400;
  line-height:1.35;
  font-size: clamp(.9rem, 2.2vw, 1.2rem);
  opacity:.95;
}

@media (max-width: 992px){ .hero{ height:260px; } }
@media (max-width: 768px){ .hero{ height:220px; } }
@media (max-width: 480px){ .hero{ height:180px; } }


/* ====== PRODUCTOS ====== */
.content{
  padding: clamp(12px, 2vw, 24px);
  max-width: min(1600px, 96vw);
  margin: 0 auto;
}

/* ====== GRID RESPONSIVE ====== */
@media (min-width: 768px){
  .product-grid{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (min-width: 1200px){
  .product-grid{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

/* ====== CARD ====== */
.card{
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
}

/* ====== MEDIA: IMÁGENES CUADRADAS (sin recorte) ====== */
.card-media{
  position: relative;
  aspect-ratio: 1 / 1;                 /* cuadrado siempre */
  /* Alto mínimo adaptable: 220px en móviles, hasta 300px en pantallas grandes */
  min-height: clamp(220px, 40vw, 300px);
  overflow: hidden;
  background:#f9f9f9;                  /* fondo si sobra espacio */
}
/* Fallback para navegadores sin aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .card-media{ width:100%; padding-top:100%; }
  .card-media img{ position:absolute; inset:0; }
}
.card-media img{
  width:100%; height:100%;
  object-fit: contain;                 /* no recorta */
  object-position: center;
  background:#fff;
}

/* ====== CUERPO ====== */
.card-body{
  padding:12px;
  display:flex; flex-direction:column; gap:8px; flex:1;
}

/* Título con clamp + fallback */
.card-title{
  margin:2px 0 0; font-size:16px; font-weight:800; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  max-height: calc(1.25em * 2);       /* fallback universal */
}
.card-brand{
  margin:0; font-size:13px; color:#666; line-height:1.3;
  min-height: calc(1em * 1.3);
}

/* Botones */
.card-actions{
  margin-top:auto;
  display:flex; gap:8px;
}
.btn{
  border:1px solid #ddd; background:#fff; padding:10px 12px; border-radius:10px;
  cursor:pointer; font-weight:700; flex:1;
  transition:transform .04s ease, box-shadow .15s ease;
  min-height:44px;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08)}
.btn.primary{background:#111; color:#fff; border-color:#111}
.btn.info{background:#f5f5f5}

/* ====== MODAL ====== */
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; z-index:1000; display:grid; place-items:center}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5)}
.modal-card{
  position:relative; background:#fff; width:min(680px, 92vw); border-radius:16px;
  padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.2); z-index:1; outline:0;
}
.modal-title{margin:0 0 6px; font-size:20px; font-weight:800}
.modal-desc{margin:0 0 12px; color:#444; line-height:1.3}
.modal-footer{display:flex; gap:8px; justify-content:flex-end}
.modal-close{
  position:absolute; right:10px; top:6px; border:0; background:transparent;
  font-size:28px; line-height:1; cursor:pointer;
}

/* ====== AJUSTES MÓVIL (evitar cortes) ====== */
@media (max-width: 420px){
  .card-title{ font-size:15px; line-height:1.2; max-height: calc(1.2em * 2); }
  .card-brand{ font-size:12px; }
  .card-prices{ gap:8px; margin:4px 0 6px; }

  /* Botones apilados para que nunca se corten */
  .card-actions{ flex-direction:column; gap:10px; }
  .card-actions .btn{ width:100%; min-height:42px; }
}


/* ====== CARRITO (Drawer) ====== */
.cart-drawer[hidden]{display:none}
.cart-drawer{position:fixed; inset:0; z-index:1100}
.cart-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45)}
.cart-panel{
  position:absolute; right:0; top:0; bottom:0;
  width:min(420px, 92vw); background:#fff; border-left:1px solid #eee;
  display:flex; flex-direction:column;
  box-shadow: -10px 0 30px rgba(0,0,0,.15);
  animation: slideIn .18s ease-out;
}
@keyframes slideIn{
  from{transform:translateX(20px); opacity:0}
  to{transform:translateX(0); opacity:1}
}
.cart-header{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #eee}
.cart-header h3{margin:0; font-size:18px; font-weight:800}
.cart-close{border:0; background:transparent; font-size:28px; cursor:pointer; line-height:1}
.cart-body{flex:1; overflow:auto; padding:10px 12px}
.cart-footer{border-top:1px solid #eee; padding:12px; display:flex; flex-direction:column; gap:10px}
.cart-summary{display:flex; align-items:center; justify-content:space-between; font-size:16px}
.cart-checkout{text-align:center; text-decoration:none}

.cart-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.cart-item{display:grid; grid-template-columns:1fr auto; gap:8px; border:1px solid #f0f0f0; border-radius:12px; padding:10px}
.cart-item-title{margin:0; font-weight:800; font-size:15px}
.cart-item-price{font-size:14px; color:#333; font-weight:700}
.cart-item-actions{display:flex; align-items:center; gap:8px}
.qty{display:flex; align-items:center; gap:6px; border:1px solid #ddd; border-radius:10px; padding:6px 8px}
.qty button{border:0; background:#f5f5f5; padding:6px 10px; border-radius:8px; cursor:pointer; font-weight:800}
.qty input{width:40px; text-align:center; border:0; outline:0}
.remove{border:0; background:#ffecec; color:#b00; padding:8px 10px; border-radius:8px; cursor:pointer; font-weight:700}
.empty{color:#666; padding:10px 6px}

/* (Opcional) estilos mínimos por si no tienes .btn y .primary */
.btn{border:1px solid #ddd; background:#fff; padding:10px 12px; border-radius:10px; cursor:pointer; font-weight:700; min-height:44px}
.btn.primary{background:#111; color:#fff; border-color:#111}


/* Grilla */
.product-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-flow: row dense;              /* rellena huecos sin cambiar tamaños */
  align-items: stretch;
}

/* Tamaño base de cualquier card (1x1) */
.card{
  grid-column: span 1;
  grid-row: span 1;
  height: 100%;
}

/* Variantes que conservan tamaños “especiales” */
.card--wide   { grid-column: span 2; grid-row: span 1; }
.card--tall   { grid-column: span 1; grid-row: span 2; }
.card--xl     { grid-column: span 2; grid-row: span 2; }

/* Mantener proporciones internas de imagen/producto */
.card .media{
  width: 100%;
  aspect-ratio: 4 / 5;      /* ajusta si tu card es más “banner” o “producto” */
  object-fit: cover;
  display: block;
}

.modal-desc {
  white-space: pre-line;
}


/* ====== FOOTER ====== */
.footer {
  background: #111;
  color: #fff;
  padding: 30px 20px 10px;
  margin-top: 40px;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  max-width: 1200px;
  margin: auto;
}

.footer-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 8px;
}

.footer-name {
  font-weight: 800;
  font-size: 18px;
  display: block;
}

.footer-tagline {
  margin: 5px 0 0;
  font-size: 14px;
  color: #aaa;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links a {
  color: #ddd;
  text-decoration: none;
  transition: color .2s;
}
.footer-links a:hover {
  color: #fff;
}

.footer-social a {
  font-size: 20px;
  margin-right: 14px;
  color: #ddd;
  transition: color .2s;
}
.footer-social a:hover {
  color: #1db954; /* Verde llamativo */
}

.footer-bottom {
  border-top: 1px solid #333;
  margin-top: 20px;
  padding-top: 10px;
  text-align: center;
  font-size: 13px;
  color: #888;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .footer-links {
    flex-direction: row;
    gap: 16px;
    justify-content: center;
  }
}


.coupon-row {
  display:flex; gap:8px; align-items:center; margin-bottom:10px;
}
.coupon-row input {
  flex:1; min-height:42px; border:1px solid #ddd; border-radius:10px; padding:10px 12px; outline:0;
}
.btn.secondary { background:#f5f5f5; border-color:#ddd; }
.cart-totals { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.cart-totals .line { display:flex; justify-content:space-between; align-items:center; }
.cart-totals .line.total { font-size:16px; font-weight:800; }
.cart-totals .line.discount { color:#0a7f3f; }
.hidden { display:none !important; }

.coupon-alert {
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.coupon-alert.error {
  background: #ffecec;
  color: #b00;
  border: 1px solid #f5a5a5;
}

.coupon-alert.success {
  background: #e9f9ef;
  color: #0a7f3f;
  border: 1px solid #a5e5b0;
}

/* Badge para productos en stock (verde) */
.badge.en-stock {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #00ff88;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #00ff88;
    box-shadow: 
        0 0 10px rgba(0, 255, 136, 0.5),
        inset 0 0 10px rgba(0, 255, 136, 0.1);
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: neon-flicker 1.5s ease-in-out infinite alternate;
}

@keyframes neon-flicker {
    0% { 
        box-shadow: 
            0 0 10px rgba(0, 255, 136, 0.5),
            inset 0 0 10px rgba(0, 255, 136, 0.1);
    }
    100% { 
        box-shadow: 
            0 0 20px rgba(0, 255, 136, 0.8),
            inset 0 0 20px rgba(0, 255, 136, 0.2);
    }
}

/* Badge agotado en rojo */
.badge.agotado {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #ff4d4d; /* Rojo neón */
    font-size: 11px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ff4d4d; /* Borde rojo */
    box-shadow: 
        0 0 10px rgba(255, 77, 77, 0.5),
        inset 0 0 10px rgba(255, 77, 77, 0.1);
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: neon-flicker-red 1.5s ease-in-out infinite alternate;
}

@keyframes neon-flicker-red {
    0% { 
        box-shadow: 
            0 0 10px rgba(255, 77, 77, 0.5),
            inset 0 0 10px rgba(255, 77, 77, 0.1);
    }
    100% { 
        box-shadow: 
            0 0 20px rgba(255, 77, 77, 0.8),
            inset 0 0 20px rgba(255, 77, 77, 0.2);
    }
}

.svgIcon {
  width: 18px;
  height: 18px;
  margin-left: 6px;      /* espacio entre texto y icono */
  fill: #fff;            /* color blanco fijo */
  vertical-align: middle;
}


/* WhatsApp Button Styling */
.whatsapp-button {
  position: fixed;
  right: 20px; /* Ajusta el margen desde la derecha */
  bottom: 20px; /* Ajusta el margen desde el fondo */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out; /* Solo la transición de opacidad */
  z-index: 1000;
  width: 60px; /* Ajusta el tamaño del botón */
  height: 60px; /* Asegura que el botón sea cuadrado */
  border-radius: 50%; /* Hace que el botón sea circular */
  overflow: hidden; /* Asegura que el contenido dentro sea circular */
  outline: none; /* Elimina el borde de enfoque */
  user-select: none; /* Evita que el texto se resalte */
  pointer-events: all; /* Asegura que el botón sea clickeable */
}

/* La clase 'show' hará que el botón aparezca */
.whatsapp-button.show {
  opacity: 1;
  visibility: visible;
}

/* Eliminar cualquier efecto de clic (como la sombra o el cambio de tamaño) */
.whatsapp-button:active,
.whatsapp-button:hover {
  transform: none;  /* Eliminar cualquier efecto de cambio de tamaño */
  box-shadow: none;  /* Eliminar la sombra */
}

/* Opcional: Agregar algunos detalles para el botón */
.whatsapp-button img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que la imagen cubra todo el espacio */
  border-radius: 50%; /* Hace que la imagen también sea circular */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}






/* Sistema de Rating Dinámico - ALINEADO */
.product-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  height: 20px; /* Altura fija para alineación */
}

.rating-stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.star {
  width: 14px;
  height: 14px;
  background: #ddd;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Todas tus reglas de estrellas existentes... */
.rating-stars[data-rating="5.0"] .star:nth-child(-n+5) {
  background: #ff6b35;
}
.rating-stars[data-rating="4.9"] .star:nth-child(-n+5) {
  background: #ff6b35;
}
.rating-stars[data-rating="4.5"] .star:nth-child(-n+4) {
  background: #ff6b35;
}
.rating-stars[data-rating="4.5"] .star:nth-child(5) {
  background: linear-gradient(90deg, #ff6b35 50%, #ddd 50%);
}
.rating-stars[data-rating="4.0"] .star:nth-child(-n+4) {
  background: #ff6b35;
}
.rating-stars[data-rating="3.5"] .star:nth-child(-n+3) {
  background: #ff6b35;
}
.rating-stars[data-rating="3.5"] .star:nth-child(4) {
  background: linear-gradient(90deg, #ff6b35 50%, #ddd 50%);
}
.rating-stars[data-rating="3.0"] .star:nth-child(-n+3) {
  background: #ff6b35;
}
.rating-stars[data-rating="2.5"] .star:nth-child(-n+2) {
  background: #ff6b35;
}
.rating-stars[data-rating="2.5"] .star:nth-child(3) {
  background: linear-gradient(90deg, #ff6b35 50%, #ddd 50%);
}
.rating-stars[data-rating="2.0"] .star:nth-child(-n+2) {
  background: #ff6b35;
}
.rating-stars[data-rating="1.5"] .star:nth-child(1) {
  background: #ff6b35;
}
.rating-stars[data-rating="1.5"] .star:nth-child(2) {
  background: linear-gradient(90deg, #ff6b35 50%, #ddd 50%);
}
.rating-stars[data-rating="1.0"] .star:nth-child(1) {
  background: #ff6b35;
}

.rating-number {
  font-weight: 700;
  color: #333;
  font-size: 13px;
  min-width: 24px; /* Ancho mínimo para alineación */
}

.rating-count {
  color: #666;
  font-size: 12px;
  min-width: 60px; /* Ancho mínimo para alineación */
}

.sales-bar {
  width: 60px;
  height: 3px;
  background: #eee;
  border-radius: 2px;
  overflow: hidden;
}

.sales-progress {
  height: 100%;
  background: #ff6b35;
  transition: width 0.3s ease;
}

/* CONTENEDOR PRINCIPAL - ALTURA FIJA */
.card-rating-prices {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0 8px;
  height: 24px; /* ALTURA FIJA - CLAVE PARA ALINEACIÓN */
  min-height: 24px;
}

/* PRECIOS - ALTURA FIJA */
.card-prices {
  display: flex;
  align-items: baseline; /* Cambiado a baseline para mejor alineación */
  gap: 8px;
  flex-shrink: 0;
  height: 24px; /* MISMA ALTURA QUE EL CONTENEDOR */
}

.card-prices .price {
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
}

.card-prices .old {
  text-decoration: line-through;
  color: #999;
  font-size: 13px;
  line-height: 1.2;
  min-height: 16px; /* Altura mínima para mantener espacio aunque esté vacío */
}

/* Responsive */
@media (max-width: 420px) {
  .card-rating-prices {
    height: 22px;
    gap: 6px;
  }
  
  .product-rating {
    gap: 4px;
    font-size: 12px;
  }
  
  .star {
    width: 12px;
    height: 12px;
  }
  
  .sales-bar {
    width: 40px;
  }
  
  .rating-count {
    font-size: 11px;
    min-width: 50px;
  }
}











/* ====== INICIO: ESTILOS DEL NUEVO MENÚ DE NAVEGACIÓN ====== */

/* --- Contenedor de enlaces (Desktop) --- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 auto; /* Centra el menú en el espacio sobrante */
}

.nav-links a {
  color: #333;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 8px 4px;
  position: relative;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* --- Efecto "PRO" y llamativo de Neón al pasar el ratón --- */
.nav-links a:hover {
  color: #00ff88;
  text-shadow: 
    0 0 5px rgba(0, 255, 136, 0.7),
    0 0 10px rgba(0, 255, 136, 0.5);
}

/* --- Botón Hamburguesa (Oculto en Desktop) --- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001; /* Debe estar sobre la cabecera */
  margin-left: 10px; /* Espacio con el carrito */
}

.hamburger span {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

/* --- Animación de Hamburguesa a "X" --- */
.hamburger.is-active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* ====== RESPONSIVE PARA EL MENÚ ====== */
@media (max-width: 992px) {
  .nav-links {
    gap: 16px; /* Reduce el espacio en tablets */
  }
  .nav-links a {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  /* Ocultamos el menú de escritorio y mostramos la hamburguesa */
  .hamburger {
    display: flex;
  }

  /* Ajustamos el search-cart para que no ocupe todo el espacio */
  .search-cart {
    flex: 1 1 auto;
  }
  
  /* Estilos del menú desplegable móvil */
  .nav-links {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 100%; /* Justo debajo de la cabecera */
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    box-shadow: 0 8px 16px rgba(0,0,0,.08);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  /* Clase que se añade con JS para mostrar el menú */
  .nav-links.is-active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }

  .nav-links a {
    width: 100%;
    text-align: center;
    padding: 14px 0;
    border-bottom: 1px solid #f5f5f5;
  }
  .nav-links a:last-child {
    border-bottom: none;
  }
}
/* ====== FIN: ESTILOS DEL NUEVO MENÚ DE NAVEGACIÓN ====== */






/* ====== SUCCESS NOTIFICATION ====== */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: flex-start;
  padding: 16px;
  width: min(350px, 90vw);
  border-left: 5px solid #4caf50;
  opacity: 0;
  transform: translateX(120%);
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
.notification.show {
  opacity: 1;
  transform: translateX(0);
}
.notification-icon-wrapper {
  flex-shrink: 0;
  margin-right: 14px;
}
.notification-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #e8f5e9;
  color: #4caf50;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: bold;
}
.notification-content {
  flex-grow: 1;
}
.notification-title {
  margin: 0 0 4px;
  font-weight: 700;
  color: #333;
  font-size: 16px;
}
.notification-message {
  margin: 0;
  color: #666;
  font-size: 14px;
}
.notification-close {
  flex-shrink: 0;
  margin-left: 16px;
  background: transparent;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.notification-close:hover {
  color: #333;
}

/* Estilos para el botón deshabilitado (agotado) */
.btn:disabled {
  background-color: #cccccc; /* Fondo gris claro */
  border-color: #cccccc;     /* Borde del mismo color gris */
  color: #666666;           /* Texto gris oscuro para que sea legible */
  cursor: not-allowed;       /* Muestra un cursor de "prohibido" al pasar el mouse */
  
  /* Anula los efectos hover para que no parezca interactivo */
  transform: none;
  box-shadow: none;
}