body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    header {
      position: relative;
      width: 100%;
      overflow: hidden;
    }

.bgapp
{
	background-image: url('../images/bgapp.png');
	background-size: cover; 
	background-position: center; 
}

    .slider {
  margin-top: 20px; /* espacio para la barra top */
  position: relative;
  width: 100%;
  height: 180px; /* altura reducida */
  overflow: hidden;
  z-index: 1; /* Más bajo que el del menú */

}


  .slides img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
  }

  .slides img.active {
    opacity: 1;
    z-index: 1;
  }

  /* ocultar los puntos si existieran */
  .dots {
    display: none;
  }

    section {
      flex: 1;
      padding: 5px;
    }

.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #a607c2;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0;
  z-index: 999;
  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.5); /* Sombra más oscura */
}


.footer-bar a {
  color: white;
  text-align: center;
  font-size: 16px;
  text-decoration: none;

  /* Evita el azul al tocar en móviles */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.footer-bar i {
  font-size: 20px;
  text-decoration: none;
}

.icon-label {
  font-size: 12px;
  display: block;
  margin-top: 2px;
}


    @media (max-width: 600px) {
      .footer-bar a {
         color: white;
          text-align: center;
          font-size: 16px;
          text-decoration: none;

          /* Evita el azul al tocar en móviles */
          -webkit-tap-highlight-color: transparent;
          -webkit-touch-callout: none;
      }

      /* Fuerza el color blanco en todos los estados */
      .footer-bar a:visited,
      .footer-bar a:hover,
      .footer-bar a:active,
      .footer-bar a:focus {
        color: white;
        text-decoration: none;
      }

      .dot {
        width: 10px;
        height: 10px;
      }
    }
	
	.btn-success {
		color: #fff;
		background-color: #5cb85c;
		border-color: transparent;
		height: 35px;
		border-radius: 5px;
	}

	.btn-success.focus,
	.btn-success:focus {
		color: #fff;
		background-color: #449d44;
		border-color: #255625
	}

	.btn-success:hover {
		color: #fff;
		background-color: #449d44;
		border-color: #398439
	}

	.btn-success.active,
	.btn-success:active,
	.open>.dropdown-toggle.btn-success {
		color: #fff;
		background-color: #449d44;
		border-color: #398439
	}

	.btn-success.active.focus,
	.btn-success.active:focus,
	.btn-success.active:hover,
	.btn-success:active.focus,
	.btn-success:active:focus,
	.btn-success:active:hover,
	.open>.dropdown-toggle.btn-success.focus,
	.open>.dropdown-toggle.btn-success:focus,
	.open>.dropdown-toggle.btn-success:hover {
		color: #fff;
		background-color: #398439;
		border-color: #255625
	}

	.btn-success.active,
	.btn-success:active,
	.open>.dropdown-toggle.btn-success {
		background-image: none
	}

	.btn-success.disabled.focus,
	.btn-success.disabled:focus,
	.btn-success.disabled:hover,
	.btn-success[disabled].focus,
	.btn-success[disabled]:focus,
	.btn-success[disabled]:hover,
	fieldset[disabled] .btn-success.focus,
	fieldset[disabled] .btn-success:focus,
	fieldset[disabled] .btn-success:hover {
		background-color: #5cb85c;
		border-color: #4cae4c
	}

	.btn-success .badge {
		color: #5cb85c;
		background-color: #fff
	}

	.requerido label::after {
		content: " *";
		color: red;
		font-weight: bold;
	}

    .input-invalido {
		border: 2px solid red !important;
	}
  
   .fondo-verde {
  position: relative;
  top: -12px;
  background-color: #2CA500; /* verde oscuro Bootstrap */
  padding: 1px;
  /*border-radius: 8px;*/
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  margin-top: 0px;
  color: white;
  width: 93%;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.texto-delgado {
  display: block;
  font-weight: 300;     /* Letra delgada */
  font-size: 12px;
  color: white;
  line-height: 1;       /* Espacio mínimo */
}

.texto-mayus {
  font-family: 'Ashtung', sans-serif;
  display: block;
  font-weight: bold;
  font-size: 20px;
  text-transform: uppercase;
  color: white;
  line-height: 1.1;       /* Espacio mínimo */
}

.titulo-seccion {
  text-align: center;
  color: #28a745;
  font-size: 26px;
  margin-bottom: 20px;
}

 
#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/bgsplash.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.8s ease;
}

.splash-content {
  text-align: center;
  color: white;
  font-family: 'Segoe UI', sans-serif;
}

.splash-logo {
  width: 120px;
  margin-bottom: 15px;
}

#copyright {
  position: absolute;
  bottom: 20px;
  font-size: 14px;
  color: #ffffff;
  opacity: 0.8;
}


.logo {
  width: 200px;
  height: auto;
  animation: bounce 2s infinite;
}

.logofijoverde {
  width: 30%;
  height: auto;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
	transform: translateY(0);
  }
  40% {
	transform: translateY(-30px);
  }
  60% {
	transform: translateY(-15px);
  }
}

 .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #2CA500;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 15px;
  z-index: 1000;
  border-bottom-left-radius: 20px; /* Esquina inferior izquierda redondeada */
  border-bottom-right-radius: 20px; /* Esquina inferior derecha redondeada */
}
   

 .topbarwhite {
  position: realtive;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #ffffff;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  z-index: 1000;
  border-bottom-left-radius: 20px; /* Esquina inferior izquierda redondeada */
  border-bottom-right-radius: 20px; /* Esquina inferior derecha redondeada */
}

.topbarwhite-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}


.topbarw-icons .icon {
  color: #2CA500;
  font-size: 20px;
  text-decoration: none;
}

.topbar-icons {
  display: flex;
  gap: 15px;
}

.topbar-icons .icon {
  color: white;
  font-size: 20px;
  text-decoration: none;
}

.topbar-icons .icon:hover {
  color:white;
  text-decoration: none;
}

/* Estilo para la imagen debajo de la topbar */
.topbar-image {
  position:absolute;
  top:20px;
  margin-top: 0px; /* <- Esto empuja la imagen debajo de la barra */
  width: 100%;
  height: 250px;
  background-image: url('../images/topbanner.png'); /* Asegúrate de que esta ruta es válida */
  background-size: cover;
  background-position: center;
}

.topbarimg-image
{
  position:absolute;
  top:20px;
  margin-top: 0px; /* <- Esto empuja la imagen debajo de la barra */
  width: 100%;
  height: 250px;
  background-image: url('../images/topbannerdos.png'); /* Asegúrate de que esta ruta es válida */
  background-size: cover;
  background-position: center;
}

   .grid-productos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  justify-items: center; /* centra las tarjetas horizontalmente */
  padding: 16px;
  max-width: 500px;
  margin: 0 auto; /* centra el grid */
}

.tarjeta-producto {
  background: #fff;
  padding: 12px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
  width: 140px;
}

    .tarjeta-producto:hover {
      transform: translateY(-5px);
    }

	.foto-producto {
	  width: 120px;
	  height: 120px;
	  object-fit: cover;
	  border-radius: 16px;
	  border: 3px solid #86efac;
	  margin-bottom: 10px;
	  display: block;
	  margin-left: auto;
	  margin-right: auto;
	}


.btn-agregar {
  background-color: #16a34a;
  color: white;
  padding: 10px 16px;
  border: none;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 5px !important;  /* El !important fuerza la aplicación del estilo */
}

.btn-agregar:hover {
  background-color: #15803d;
}



    .nombre-producto {
      font-size: 1.2rem;
      font-weight: bold;
      color: #166534;
      margin: 5px 0;
    }

    .desc-producto {
      font-size: 0.9rem;
      color: #6b7280;
      margin: 5px 0;
    }

    .precio-producto {
      font-size: 1rem;
      font-weight: bold;
      color: #15803d;
      margin: 10px 0;
    }

    .control-cantidad {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 12px;
    }

    .control-cantidad button {
      width: 32px;
      height: 32px;
      font-size: 1.2rem;
      border: none;
      background-color: #bbf7d0;
      color: #166534;
      border-radius: 6px;
      cursor: pointer;
    }

    .control-cantidad input {
      width: 40px;
      height: 30px;
      text-align: center;
      border: 1px solid #d1fae5;
      margin: 0 8px;
      border-radius: 6px;
    }

    .btn-agregar {
      background-color: #16a34a;
      color: white;
      padding: 10px 16px;
      border: none;
      border-radius: 9999px;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .btn-agregar:hover {
      background-color: #15803d;
    }
	
	 h2 {
      text-align: center;
      color: green;
      margin-top: 40px;
      font-size: 1.8rem;
    }



.menu-horizontal {
  display: flex;
  overflow-x: auto;
  padding: 12px 16px;
  gap: 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
}

.menu-horizontal::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}


.opcion-menu img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 16px; /* semi redondas */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.opcion-menu p {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
}

.opcion-menu {
  flex: 0 0 auto;
  width: 100px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 16px 12px;
  text-align: center;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s;
}

.fondo-a
{
	background-color: #F6CFC8;
}

.fondo-b
{
	background-color: #A7D4F4;
}

.fondo-c
{
	background-color: #FFC98B;
}

.fondo-d
{
	background-color: #FFB385;
}

.fondo-e
{
	background-color: #C8C29E;
}

.opcion-menu:hover {
  transform: scale(1.03);
}

@media screen and (orientation: landscape) {
  body {
    display: none;
  }
  
  
/* Estilos para el contenedor del grid */
.container {
  display: grid;
  grid-template-columns: 10px 1fr; /* La primera columna será de 50px para el icono, y la segunda columna se ajustará al texto */
  gap: 20px; /* Espacio entre las columnas */
  align-items: center; /* Centra el contenido verticalmente */
  border: solid 1px;
}

.grid-item.icon i {
  font-size: 2rem; /* Tamaño del icono */
  color: #007bff; /* Color del icono (puedes cambiarlo) */
}

.grid-item.text p {
  font-size: 1rem; /* Tamaño de fuente del texto */
  color: #333; /* Color del texto (puedes cambiarlo) */
}

.opmenu{
	text-decoration: none !important;
	color:black;
	font-family: 'Segoe UI', sans-serif;
}

.inputcode !important
{
	height:55px;
	width:45px;
}