body {
  margin: 0;
}

.full-black {
  background-color: #000;
}

header {
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 10px 20px;
  position: relative;
  height: 80px;
}

.logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.logo img {
  height: 80px;
}


.login {
  display: flex;
  justify-content: center;
  /* centra horizontalmente */
  padding-top: 20px;
}

.login-box {
  background: #fff;
  padding: 20px 30px;
  /* ← aquí defines el margen interno general */
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 300px;
  text-align: center;
  box-sizing: border-box;

}

.login-box input {
  width: calc(100% - 20px);
  /* deja espacio a izq y der */
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
}


.login-box h2 {
  margin-bottom: 15px;
}

.login-box button {
  width: 100%;
  padding: 10px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.login-box button:hover {
  background: #0056b3;
}



/*404 
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
*/

.center-xy {
  /* width: inherit;*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}


*,
*:before,
*:after {
  box-sizing: inherit;
}

.container {
  width: 100%;
}

.copy-container {
  text-align: center;
}

p {
  color: #fff;
 /* font-size: 24px;*/
  letter-spacing: .2px;
  margin-bottom: 40px;
}

.black {
  color: #000;
}

a {
  text-decoration: none;
}

.btn {
  border: none;
  color: #f3f3f3;
  padding: 14px 30px;
  cursor: pointer;
  border-radius: 10px;
  background-color: black;
  border: 1px solid #f3f3f3;
  font-size: 16px;
  letter-spacing: .2px;

}


#pedido-ok,
#pedido-ko {
  margin: 20px auto;
  max-width: 700px;
  background: #f9f9f9;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  font-family: 'Segoe UI', sans-serif;


}

#pedido-ok h2,
#pedido-ko h2 {
  margin-bottom: 20px;
  color: #333;
  font-size: 1.6em;
  border-bottom: 2px solid #ddd;
  padding-bottom: 5px;
}



#pedido-lista-ok {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Añadido para scroll */
  max-height: 700px;
  /* Puedes ajustar este valor según tu diseño */
  overflow-y: auto;
}

#pedido-lista-ok1 li {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-left: 5px solid #4caf50;
  /* color que indica "entregado" */
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  transition: box-shadow 0.2s ease;

}

#pedido-lista-ok1 li:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#pedido-lista-ok1 li strong {
  color: #333;
}

#pedido-lista-ok1 li small {
  color: #666;
  font-size: 0.9em;
}

#pedido-ok button {
  margin-top: 10px;
  margin-right: 10px;
  padding: 6px 12px;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.9em;
  transition: background-color 0.2s ease;
}

#pedido-ok button:hover {
  background-color: #135ba1;
}



#entregadas {
  margin: 20px auto;
  max-width: 95%;
  background: #f9f9f9;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  font-family: 'Segoe UI', sans-serif;


}

#entregadas h2 {
  margin-bottom: 20px;
  color: #333;
  font-size: 1.6em;
  border-bottom: 2px solid #ddd;
  padding-bottom: 5px;
}

/*************************/
#comandasEntregadas {
  column-count: 3;           /* 3 columnas tipo Pinterest */
  column-gap: 10px;          /* separación entre columnas */
  padding: 0;
  margin: 0;
  list-style: none;
  /*max-height: 700px;  */
  overflow-y: auto;
}

#comandasEntregadas li {
  display: inline-block;     /* necesario para que funcione el column layout */
  width: 100%;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-left: 5px solid #4caf50;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  box-sizing: border-box;
  margin-bottom: 10px;
}
/*************************/
#comandasEntregadas7 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* responsive columns */
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: start;
}

#comandasEntregadas7 li {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-left: 5px solid #4caf50;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  box-sizing: border-box;
  break-inside: avoid; /* Prevent items from splitting in column-based layouts */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#comandasEntregadas7 li:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Optional: make it look like a masonry (Pinterest-style) on larger screens */
@media (min-width: 768px) {
  #comandasEntregadas7 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*************************/
#comandasEntregadas3 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  max-height: 700px;
  overflow-y: auto;
}

#comandasEntregadas3 li {
  flex: 1 1 calc(33.33% - 10px); /* 3 columnas */
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-left: 5px solid #4caf50;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  box-sizing: border-box;
}
/*************************/
#comandasEntregadas_good {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* 3 columnas iguales */
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  max-height: 700px;
  overflow-y: auto;
}

#comandasEntregadas_good li {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-left: 5px solid #4caf50;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  box-sizing: border-box;
  
}
/*************************/

/*************************/

#comandasEntregadas li.envio {
  border-left-color: #2196f3;
  /* verde para envíos */
}

#comandasEntregadas li.recoger {
  border-left-color: #2196f3;
  /* azul para recogidas */
}

#comandasEntregadas li:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#comandasEntregadas li strong {
  color: #333;
}

#comandasEntregadas li small {
  color: #666;
  font-size: 0.9em;
}

#comandasEntregadas button {
  margin-top: 10px;
  margin-right: 10px;
  padding: 6px 12px;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.9em;
  transition: background-color 0.2s ease;
}

#comandasEntregadas button:hover {
  background-color: #135ba1;
}

#completarPedido {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

#formPedido {
  display: grid;
  grid-template-columns: 1fr; /* móvil por defecto */
  gap: 20px;
}

#formPedido label {
  display: flex;
  flex-direction: column;
  font-weight: 500;
  color: #333;
}

#formPedido input,
#formPedido textarea {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

#formPedido textarea {
  resize: vertical;
  min-height: 80px;
}

#formPedido button {
  grid-column: 1 / -1; /* siempre ocupa todo el ancho */
  padding: 15px;
  font-size: 16px;
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
}

#formPedido button:hover {
  background: #218838;
}

/* Tablet y PC → 2 columnas */
@media (min-width: 768px) {
  #formPedido {
    grid-template-columns: 1fr 1fr;
  }

  #formPedido label {
    flex-direction: column;
  }

  #formPedido button {
    grid-column: 1 / 3; /* botón ocupa las dos columnas */
  }

  #formPedido textarea {
    min-height: 120px;
  }
    #comandasEntregadas {
    grid-template-columns: 1fr;
  }
}

/* Contenedor para mantener switch + texto en una misma fila */
#direccionLabel{
  display: "none";
}
.pago-container {
  display: flex;
  align-items: center;
  gap: 10px; /* espacio entre el switch y el texto */
  margin-top: 10px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-right: 10px; /* espacio con el texto */
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
#textoPago {
  margin-left: 10px;
  font-weight: bold;
  color: #333;
}

.linea-progreso {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;
            position: relative;
            margin-top: 40px;
        }

        .estado {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-weight: 600;
            color: #999;
            width: 120px;
            transition: all 0.3s ease;
        }

        .estado::before {
            content: "⏳";
            font-size: 26px;
            background: #fff;
            border: 3px solid #ccc;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
            transition: all 0.4s ease;
        }

        .estado.activo {
            color: #2e7d32;
        }

        .estado.activo::before {
            content: "✅";
            border-color: #4caf50;
            background: #e8f5e9;
            transform: scale(1.1);
        }

        /* Línea de conexión entre los estados */
        .linea-progreso::before {
            content: "";
            position: absolute;
            top: 25px;
            left: 60px;
            right: 60px;
            height: 4px;
            background: #ccc;
            z-index: -1;
            border-radius: 2px;
        }

        .linea-progreso::after {
            content: "";
            position: absolute;
            top: 25px;
            left: 60px;
            height: 4px;
            background: #4caf50;
            border-radius: 2px;
            width: 0;
            z-index: -1;
            transition: width 0.6s ease;
        }

        /* 📱 MODO MÓVIL: distribución vertical */
@media (max-width: 600px) {
    .linea-progreso {
        flex-direction: column;
        gap: 30px;
        align-items: flex-start;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .estado {
        width: auto;
        flex-direction: row;
        gap: 15px;
        text-align: left;
    }

    .estado::before {
        margin-bottom: 0;
        margin-right: 10px;
    }

    /* Línea vertical */
    .linea-progreso::before,
    .linea-progreso::after {
        top: 0;
        left: 24px;
        right: auto;
        width: 4px;
        height: 100%;
        border-radius: 2px;
    }

    .linea-progreso::after {
        width: 4px;
        height: 0;
        transition: height 0.6s ease;
    }
}

.footer-dev {
  width: 100%;
  text-align: center;
  padding: 7px 0;
  background-color: #111;
  color: #ccc;
  font-size: 0.9rem;
  position: fixed; /* se mantiene abajo siempre */
  bottom: 0;
  left: 0;
  border-top: 1px solid #333;
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.5px;
}

.footer-dev strong {
  color: #00bcd4; /* azul moderno */
  font-weight: 600;
}

.footer-dev p {
  margin: 0;
}


.cart-icon {
  position: absolute;
  /* para posicionar el numerito dentro */
  font-size: 28px;
  cursor: pointer;

  left: 95%;
  /**/
}

.cart-count {
  position: relative;
  top: -20px;
  right: 18px;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 14px;
}

.item {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
}

.span_1_2_of_3 {
  width: 90%;
}

@media only screen and (max-width: 1280px) {

  .span_0_0_of_3 {
    width: 10%;
    margin: 0;
  }

  .span_1_2_of_3 {
    width: 90%;
  }
}


/* Por defecto (PC): mostrar lista fija, ocultar desplegable */
.categorias-movil {
  display: none;
}

@media (max-width: 768px) {
  #listaCarrito {
    max-height: 70%;
  }

  /* En móviles */
  .span_0_0_of_3 {
    display: none;
    /* Ocultamos la lista lateral */
  }

  .span_1_2_of_3 {
    width: 100%;
  }

  .categorias-movil {
    display: flex;
    justify-content: center;
    /* centra horizontal */
    align-items: center;
    /* centra vertical */
    height: 70px;
  }

  .categorias-movil select {
    width: 95%;
    height: 40px;
  }

  .cart-icon {
    left: 83%;
    display: flex;

    align-items: center;
  }

  .cart-count {
    top: -15px;
    right: 12px;
  }

  .cards_item {
    flex: 1 1 calc(33% - 0.3rem);
    /* 2 tarjetas por fila */
    /* flex: 1 1 calc(33.333% - 1rem); /* 3 por fila */
  }

  .carrito {
    right: -95%;
    width: 95%;
  }
}

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
  /* For IE 6/7 */
}


.section {
  clear: both;
  padding: 0px;
  align-items: stretch;
}





.notificacion {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #4caf50;
  /* verde */
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  display: none;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  animation: fadeInOut 2s ease-in-out;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  10% {
    opacity: 1;
    transform: translateY(0);
  }

  90% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}








.carrito {
  position: fixed;
  top: 0;
  right: -350px;
  width: 350px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
  transition: right 0.3s ease;

  z-index: 999;
}

.carrito.active {
  right: 0;

}

.carrito h2 {
  margin-top: 0;
}

.carrito ul {
  list-style: none;
  padding: 0;
}



.carrito-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 20px;
}

.carrito-header h2 {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
}

.listasCarrito,
.opciones,
.total {
  padding: 10px;
}

#listaCarrito {
  max-height: 75%;

  overflow-y: auto;
  list-style: none;


  border: 1px solid #ddd;
  border-radius: 10px;

}


#listaCarrito li {
  background: #fff;

  border-radius: 10px;
  margin-bottom: 2px;
  padding: 5px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s;
  gap: 15px;

}



#listaCarrito li strong {
  color: #333;
  font-size: 1em;
}

#listaCarrito li:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#listaCarrito li small {
  color: #666;
  font-size: 0.9em;
}

#listaCarrito .info-producto {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}



#listaCarrito .acciones {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
}

#listaCarrito button,
#carrito-footer {
  padding: 6px 12px;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.8em;
  transition: background-color 0.2s ease;
}

#listaCarrito button:hover {
  background-color: #135ba1;
}

#listaCarrito button {
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;

  align-items: center;
  font-size: 1.3em;
  font-weight: bold;
}

.cerrar-btn {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #333;
  position: relative;
  top: -10px;

}

.cerrar-btn:hover {
  color: red;
}


#carrito {
  border-radius: 16px;
  overflow-y: auto;
}

#carrito.active {
  opacity: 1;
  transform: translateY(0);
}

#carrito:not(.active) {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

/* Header con fondo */
.carrito-header {
  background: #1976d2;
  /* 🔹 puedes cambiar a tu color corporativo */
  color: #fff;

  border-radius: 16px 16px 0 0;
  /* redondeado solo arriba */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carrito-header h2 {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  color: #fff;
}

.cerrar-btn {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: #333;
  transition: color 0.2s;
}

.cerrar-btn:hover {
  color: crimson;
}

/* Lista de productos */
#listaCarrito {
  list-style: none;
  max-height: 340px;
  margin: 0 0 15px 0;
  overflow-y: auto;
}

#listaCarrito li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 5px;
  border-bottom: 1px solid #eee;
  font-size: 0.95rem;
}

/* Opciones de entrega */
.pedido-opciones {
  margin: 15px 0;
}

.pedido-opciones label {
  display: block;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 0.95rem;
}

.pedido-opciones input {
  margin-right: 8px;
}

/* Total */
.total {
  font-size: 1.1rem;
  margin: 15px 0;
  text-align: right;
  font-weight: bold;
  color: #333;
}

/* Botones */
.botones-carrito {
  display: flex;
  gap: 10px;
  background-color: #1976d2;
  justify-content: space-between;
  margin-bottom: 0;
  padding: 20px;
}

.boton_confirmar {
  flex: 1;
}

.botones-carrito button,
#carrito button {

  background-color: #1976d2;
  border: none;
  padding: 10px;
  border-radius: 10px;
  font-size: 0.95rem;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s, transform 0.1s;
}


.botones-carrito button:active,
#carrito button:active {
  transform: scale(0.97);
}

.botones-pedido {
  display: flex;
  justify-content: flex-end;
  /* 👈 pega los botones a la derecha */
  gap: 5px;
  margin-top: 10px;
  align-items: center;
  /* 👈 centra verticalmente (opcional) */
}
/* Contenedor del carrito */

/* Contenido central (listas, opciones, total) */

.opciones {
  padding: 15px;
}

/* Para que el contenido central se expanda y empuje el botón abajo */
#carrito .listasCarrito,
#carrito .opciones,
#carrito .total {
  flex-shrink: 0;
  /* No se encogen */
}

#carrito .contenido-carrito {
  flex: 1;
  /* 🔹 Esta parte crecerá y empujará el botón abajo */
  overflow-y: auto;
}

/* Zona de botones fija al fondo */
.botones-carrito {
  margin-top: auto;
  /* 🔹 Empuja al final */
  padding: 15px;
  border-top: 1px solid #eee;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}

/* Botón destacado */
.boton_confirmar {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  font-weight: bold;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
}

.boton_confirmar:hover {
  background-color: #43a047;
}

.footer-dev {
  width: 100%;
  text-align: center;
  padding: 7px 0;
  background-color: #111;
  color: #ccc;
  font-size: 0.9rem;
  position: fixed;
  /* se mantiene abajo siempre */
  bottom: 0;
  left: 0;
  border-top: 1px solid #333;
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.5px;
}

.footer-dev strong {
  color: #00bcd4;
  /* azul moderno */
  font-weight: 600;
}

.footer-dev p {
  margin: 0;
}

/*  SECTIONS  */
.section {
  clear: both;
  padding: 0px;
  margin-top: 10px;

  align-items: stretch;
}

/*  COLUMN SETUP  */
.col {
  display: block;
  float: left;

}

.col:first-child {
  margin-left: 0;
}

/*  GROUPING  */
.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
  /* For IE 6/7 */
}


/*  GRID OF THREE  */


.span_0_0_of_3 {
  width: 10%;
}


/* Contenedor con borde general */
.col.span_1_2_of_3 {

  /*padding: 10px;*/
  box-sizing: border-box;
  border: 2px solid #ccc;

  border-radius: 6px;
  min-height: 300px;
  max-width: 1200px;
  margin: 0 auto;
}


.categoria {
  display: none;
}


.btn-categoria {
  width: 100%;
  padding: 10px 15px;
  background-color: #f0f0f0;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  transition: background-color 0.2s ease;
  font-weight: bold;
}

.btn-categoria:first-child {
  border-top: none;
}

.btn-categoria:last-child {
  border-bottom: none;
}

.btn-categoria:hover {
  background-color: #e0e0e0;
}

.btn-categoria.active {
  background-color: #d0d0d0;
  font-weight: bold;
  border-left: 4px solid #333;
}

/* Productos individuales en cuadros */

*,
*::before,
*::after {
  box-sizing: border-box;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  /* gap: 1rem; /* espacio entre tarjetas */
  padding: 0;
  list-style: none;
}

.cards_item {
  display: flex;
  padding: 0.3rem;
  flex: 1 1 calc(20% - 0.3rem);
  /* 2 tarjetas por fila */
  /* flex: 1 1 calc(33.333% - 1rem); /* 3 por fila */
}

.card_image {
  position: relative;
  max-height: 250px;
}

.card_image img {
  max-width: 179px;
  width: 100%;

  height: 100%;
  object-fit: cover;
}

.card_price {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 0.25rem;
  background-color: #c89b3f;
  font-size: 18px;
  font-weight: 700;
}

.card_price span {
  font-size: 12px;
  margin-top: -2px;
}

.note {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  border-radius: 0.25rem;
  background-color: #c89b3f;
  font-size: 14px;
  font-weight: 700;
}

@media (min-width: 40rem) {
  .cards_item {
    width: 50%;
  }
}

@media (min-width: 56rem) {
  .cards_item {
    width: 33.3333%;
  }
}

.card {
  background-color: white;
  border-radius: 0.25rem;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card_content {
  position: relative;
  /*padding: 16px 12px 32px 24px;*/
  margin: 16px 8px 8px 0;
  max-height: 290px;
  /*overflow-y: scroll;*/
}

.card_content::-webkit-scrollbar {
  width: 8px;
}

.card_content::-webkit-scrollbar-track {
  box-shadow: 0;
  border-radius: 0;
}

.card_content::-webkit-scrollbar-thumb {
  background: #c89b3f;
  border-radius: 15px;
}

.card_title {
  position: relative;
  margin: 0 0 24px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}

.card_title::after {
  position: absolute;
  display: block;
  width: 50px;
  height: 2px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #c89b3f;
  content: "";
}

hr {
  margin: 24px auto;
  width: 50px;
  border-top: 2px solid #c89b3f;
}

.card_text p {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.5;
}

.card_text p:last-child {
  margin: 0;
}


#listaProductosCombo{
padding: 15px 20px;
}


#listaIngredientesCombo{
padding: 15px 20px;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Cuerpo del modal */
.modal-content {
  background: white;
  border-radius: 10px;
  width: 90%;
  max-width: 500px;
  max-height: 80%;
  overflow-y: auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

}

/* Cabecera gris con número de comanda */
.modal-header {
  background-color: #f0f0f0;
  padding: 10px 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-weight: bold;
  font-size: 1.2em;
}

/*Footer */
.modal-footer {
  padding: 10px 20px;
  text-align: right;
  border-top: 1px solid #ccc;
}

.modal-footer button {
  /* margin-left: 10px;*/
  margin-top: 10px;
  margin-right: 10px;
  padding: 6px 12px;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.9em;
  transition: background-color 0.2s ease;
}

.modal-footer button:disabled {
  background-color: #b0b0b0;      /* gris */
  color: #eeeeee;                 /* texto más claro */
  cursor: not-allowed;            /* cursor prohibido */
  opacity: 0.7;                   /* efecto visual suave */
  box-shadow: none;
}

/* Lista sin estilo de viñetas */
#detalleComanda {
  list-style: none;
  padding: 15px 20px;
  margin: 0;
}

#detalleComanda li {
  margin-bottom: 10px;
}

header {
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: end;
  /* padding: 10px 20px;*/
  position: relative;
  height: 80px;
}

/* ======== MENÚ HAMBURGUESA ======== */
.menu-toggle {
  display: none;
  /* Oculto en escritorio */
  font-size: 28px;
  cursor: pointer;
  color: #f8f8f8;
  user-select: none;
}

/* ======== MODO MÓVIL ======== */
@media (max-width: 1100px) {


  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }


}

.logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.logo img {
  height: 80px;
}



@media only screen and (min-width: 1380px) {
  #productos {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border-right: 2px solid #ccc;

  }
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 1380px) {
  .col {
    margin: 1% 0 1% 0%;
  }

  .span_0_0_of_3 {
    width: 10%;
    margin: 0;
  }

  #productos {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border-right: 2px solid #ccc;
    /* min-width: 140px;*/
  }



}



/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 760px) {
  .col {
    margin: 1% 0 1% 0%;
  }

  .span_0_0_of_3,
  .span_1_2_of_3 {
    width: 100%;
  }
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 1280px) {
  .col {
    margin: 1% 0 1% 0%;
  }

  .span_0_0_of_3 {
    width: 10%;
    margin: 0;
  }

  #productos {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border-right: 2px solid #ccc;
    /* min-width: 140px;*/
  }



  .card_content {
    position: relative;
    /*padding: 16px 12px 32px 24px;*/
    margin: 16px 0 8px 0;
    max-height: 290px;
    /*max-width: 100%;
  overflow-y: scroll;
}
.card{
  max-width: 100%;*/
  }
}

@media only screen and (max-width: 1280px) {
  #formIngredientes label {
    font-size: 1.3em;
    /* letras un poco más grandes */

    display: flex;
    /* alinear checkbox + texto */
    align-items: center;
    /* centra verticalmente */
    gap: 2px;
    /* espacio entre checkbox y texto */
    margin: -10px 0;
  }

  #formIngredientes input[type="checkbox"] {
    width: 25px;
    height: 25px;
    /*
  transform: scale(1.5);  agranda el checkbox 
  margin-right: 10px;
  cursor: pointer;*/
  }



  .btn-categoria {
    padding: 13px 15px;
    font-size: 1em;
  }

}



.categorias-movil {
  display: none;
}


@media (max-width: 768px) {
  #listaCarrito {
    max-height: 70%;
  }

  /* En móviles */
  .span_0_0_of_3 {
    display: none;
    /* Ocultamos la lista lateral */
  }

  .span_1_2_of_3 {
    width: 100%;
  }

  .categorias-movil {
    display: flex;
    justify-content: center;
    /* centra horizontal */
    align-items: center;
    /* centra vertical */
    height: 70px;
    /* ejemplo de alto 
  border: 1px solid #ccc;   solo para ver el contenedor */
  }

  .categorias-movil select {
    width: 95%;
    height: 40px;

    /*
  transform: scale(1.5);  agranda el checkbox 
  margin-right: 10px;
  cursor: pointer;*/
  }

  .cart-icon {
    left: 83%;
    display: flex;

    align-items: center;
  }

  .cart-count {
    top: -15px;
    right: 12px;
  }

  .cards_item {
    flex: 1 1 calc(33% - 0.3rem);
    /* 2 tarjetas por fila */
    /* flex: 1 1 calc(33.333% - 1rem); /* 3 por fila */
  }

  .carrito {
    right: -95%;
    width: 95%;
  }
}

#mensaje {
    font-size: 1.4rem;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-top: 40px;

    background: #f4f4f4;
    padding: 15px 25px;
    border-radius: 12px;
    display: inline-block;

    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    animation: fadePulse 1.2s ease-in-out infinite;
}

@keyframes fadePulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

.btn-reintentar {
  margin-top: 20px;
  padding: 12px 20px;
  font-size: 16px;
  background: #007bff;
  color: white;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

.btn-reintentar:hover {
  background: #005fcc;
}