.color-navegacion nav{ background: #ffcb03; }
.color-navegacion .dropdown-toggle:hover { background: rgba(255, 255, 0, 1); /* Amarillo opaco al pasar el cursor */}
.color-navegacion .hidden-xs{color: black;}
.color-navegacion .sidebar-toggle:hover{background:  rgba(255, 255, 0, 1); color: black;}
.color-navegacion .logo{background: #ffcb03;  color: black;}
.color-navegacion .logo:hover { background: rgba(255, 255, 0, 1); /* Amarillo opaco al pasar el cursor */}
.color-navegacion{background: rgb(0, 0, 0); }
.color-navegacion .color-blanco{color: white;}
.color-navegacion .treeview:hover{ background: rgb(46, 39, 39);}


/*botón de modales*/
.btn-modal {
    background: #ffcb03;  /* Color de fondo */
    color: #000; /* Color del texto */
    border: 2px solid #000; /* Borde negro */
    padding: 5px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.3s ease, border-color 0.3s ease; /* Transición suave para el cambio de color y borde */
  }
.btn-modal:hover {
    background: #ffcb03; /* Color de fondo al pasar el ratón */
  }
/*estilo para botón para editar direccion fiscal*/
.btn-negro{
  background: #000000; /* Color de fondo */
  color: #ffffff; /* Color del texto */
  border: 2px solid #ffffff; /* Borde negro */
  padding: 5px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}
/*input de direcciones*/
#addressDisplay {
    border: 1px solid #ccc; /* Borde del campo de entrada */
    padding: 5px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
  }
/*modal de direcciones*/
.modals {
    display: none; /* Ocultar el modal por defecto */
    z-index: 1050; 
    position: fixed; /* Fijar el modal en la pantalla */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 100px;
    background-color: rgba(0,0,0,0.5); /* Fondo oscuro semi-transparente */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    
  }
  
  .modal-contents {
    background-color:#ffcb03; 
    margin: 15% auto;
    padding: 20px;
    border: 5px solid #000;
    border-radius: 10px;
    width: 80%;
    max-width: 600px;
    text-align: center;
    max-height: 80%; /* Establecer la altura máxima del modal */
    overflow-y: auto; /* Añadir scroll interno si el contenido excede la altura máxima */
}
  
  /* Botón de cerrar */
  .close {
    color: #000000;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* Estilos de las opciones de dirección */
  .address-option {
    margin-bottom: 20px; /* Margen inferior entre las direcciones */
    padding: 10px; /* Espaciado interno alrededor de la dirección */
    border: 1px solid #ddd; /* Borde sutil para distinguir cada opción */
    border-radius: 5px; /* Bordes redondeados */
    background-color: #f9f9f9; /* Fondo ligeramente gris para cada dirección */
    text-align: left; /* Alineación del texto */
  }
  
  .address-option .texto-normal {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
  }
  
  .address-btn {
    display: block;
    margin: 10px auto 0; /* Margen superior e inferior, centrado horizontalmente */
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .address-btn:hover {
    background-color: #0056b3;
  }
  /*estilo para tipos direcciones*/

  .address-option .text-black-bold {  
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 20px;
}
/*li para check en permisos*/
.permisos{ cursor: pointer;}
/*estilo para cambiar el fondo a desactivado o activado en dirección de envio*/
.bg-white{background-color: #ffffff;color: #000;} .bg-danger{background-color: red;color: white;}
/*estilos para cambiar en precios de formulario articulo*/
.borde-laterales {
  border: 0.1px solid #000; /* Borde izquierdo */
}
.centrar-texto {
  text-align: center; /* Centra el texto dentro del elemento */
  font-size: 20px;
  color: #007bff;
}


/*Estilos en login*/
/*Nombre de la empres*/
.body-inciosesion{
  background-color: #000000;
  border: 1px solid #ffcb03; 
}
.card-header .card-body .card-title {
  color: #ffcb03;
  text-shadow: 1px 1px 1px rgb(255, 255, 255);
  font-size: 30px;
  font-weight: bold;
}
.card-text {
  color: rgb(0, 0, 0);
  font-size: 20px;
  font-weight: bold;
  text-shadow: 
      2px 2px 3px rgb(255, 255, 255),  /* Sombra abajo a la derecha */
      -2px -2px 3px rgb(255, 255, 255), /* Sombra arriba a la izquierda */
      2px -2px 3px rgb(255, 255, 255),  /* Sombra arriba a la derecha */
      -2px 2px 3px rgb(255, 255, 255);  /* Sombra abajo a la izquierda */
}

.login-box {
  width: 100%;
  max-width: 360px;
  margin: 7% auto; 
}

.login-box-body {
  background-color: #ffcb03;
  border: 5px solid #000;
  border-radius: 10px;
  box-shadow: 0 4px 8px #ffcb03;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden; /* Evita que el contenido se desborde */
}





.inputi {
  border: 2px solid black; /* Borde negro */
  border-radius: 20px; /* Borde medio redondo */
  padding: 10px 15px; /* Espaciado interno */
  width: 100%; /* Ancho completo del contenedor */
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
}
.logoEmpresa {
  display: block; /* Asegura que el logo se comporte como un bloque */
  margin: 0 auto; /* Centra horizontalmente el logo */
  width: 50%; /* Ajusta el tamaño del logo al 50% de su contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  padding: 5px; /* Espaciado alrededor del logo */
}
/* Estilos para pantallas grandes */
.logoempresac {
  display: none; /* Oculta el logo mini por defecto */
}

.logoempresac_movil {
  display: block; /* Muestra el logo regular */
  margin: 0 auto;
  width: 70%;
  height: auto;
  padding: 5px;
}

/* Estilos para pantallas pequeñas */
@media (max-width: 768px) {
  .logoempresac {
    display: block; /* Muestra el logo mini */
    margin:0 auto;
    width: 50%;
    height: 50px;
  }

  .logoempresac_movil {
    display: none; /* Oculta el logo regular */
  }
}






.login-box-body .ingresar{
  align-items: center;
}
.button-container {
  display: flex;
  justify-content: space-between;
  margin-top: auto; /* Empuja los botones al fondo del contenedor */
  flex-shrink: 0; /* Evita que los botones se reduzcan */
  padding: 10px 0; /* Asegura espacio interno para los botones */
  width: 100%; /* Asegura que los botones ocupen todo el ancho disponible */
  box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total */
}

.btn-dark {
  background-color: #000;
  color: #ffffff;
  padding: 10px;
  border-radius: 5px;
  border: 2px solid #000; /* Asegura que haya un borde visible */
  margin: 0 5px; /* Espacio entre los botones */
  flex-shrink: 1; /* Permite que los botones se ajusten si es necesario */
}

.loginra {
  color: #ffcb03;
  background-color: #000;
  padding: 10px; /* Ajusta el relleno interno si es necesario */
  flex: 1; /* Hace que los botones ocupen el mismo ancho */
  text-align: center; /* Centra el texto en los botones */
  margin: 0; /* Elimina el margen para evitar espacio extra */
  box-sizing: border-box; /* Incluye el relleno y el borde en el tamaño total del botón */
}

.loginra:hover {
    color: #ffcb03;
    background-color: #000000;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra de texto */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra del botón */
    cursor: pointer; /* Cambia el cursor para indicar que es clickeable */
}
.btn-dark:hover{
  color: #ffcb03;
  background-color: #000000;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra de texto */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra del botón */
  cursor: pointer; /* Cambia el cursor para indicar que es clickeable */
}
.login-box-msg{
  color: #000;
}


/*Estilos acerca de*/
.about-p1{
  color: #000;
  font-size: 20px;
  font-weight: 700; /* Ajusta el peso de la fuente */
  text-shadow: 2px 2px 4px white; /* Sombra de texto */
}

.about-div1 {
  display: flex;
  flex-direction: column;
  border-top: 2px solid black;
  padding: 15px;
  background-color: #e9e9e9; /* Color de fondo para hacer el contenido visible */
  max-width: 100%; /* Ancho máximo del contenedor */
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.3), 4px 0 6px rgba(0, 0, 0, 0.3), -4px 0 6px rgba(0, 0, 0, 0.3);
  margin: auto; /* Centrar horizontalmente */
  margin-left: 8px;
  margin-right: 8px;
}
.about-div3 {
  display: flex;
  flex-direction: column;
  border-bottom: 2px solid black;
  padding: 15px;
  background-color: #fefefe; /* Color de fondo para hacer el contenido visible */
  max-width: 100%; /* Ancho máximo del contenedor */
  margin: auto; /* Centrar horizontalmente */
  box-shadow: 4px 0 6px rgba(0, 0, 0, 0.3), -4px 0 6px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.3);
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 8px;
}
.about-div2{
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  align-items: center;
  padding: 20px;
  max-width: 100%; /* Ancho máximo del contenedor */
  margin: auto; /* Centrar horizontalmente */
}

.about-div1 h5{
  color: #000000; /* Color del texto */
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  text-align: left; /* Alinear el texto a la izquierda */
}
.about-div3 h5{
  color: #000000; /* Color del texto */
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  text-align: left; /* Alinear el texto a la izquierda */
}


.about-div1 .about-div1-p1 {
  margin-bottom: 20px;
  text-align: justify;
  color: #000000; /* Color del texto */
}
.about-div3 .about-div1-p1 {
  margin-bottom: 20px;
  text-align: justify;
  color: #000000; /* Color del texto */
}

.contact-info {
  display: flex;
  align-items: center;
}
.about-div1:hover {
  background-color: #c6c6c6; /* Cambia el color de fondo al pasar el cursor */
  cursor: pointer; /* Cambia el cursor a una mano para indicar que es seleccionable */
}
.about-div3:hover {
  background-color: #c6c6c6; /* Cambia el color de fondo al pasar el cursor */
  cursor: pointer; /* Cambia el cursor a una mano para indicar que es seleccionable */
}
.linea-horizontal {
  border: none;
  height: 3px; /* Grosor de la línea */
  background-color: #000000; /* Color de la línea (negro) */
  margin: 8px 0; /* Espaciado arriba y abajo de la línea */
}


.swal-text {
  font-size: 20px; /* Ajusta este valor según el tamaño deseado */
  font-weight: bold; /* Opcional: para hacer el texto en negrita */
}



.toolbar {
    display: flex;
    justify-content: space-between; /* Alinea los elementos horizontalmente */
    padding: 0;
    margin: 0;
}

.toolbar div {
    margin: 0;
    padding: 0;
}

.toolbar a {
    display: inline-block;
    background-color: #000; /* Fondo negro */
    color: #fff; /* Letras blancas */
    padding: 10px 10px; /* Espaciado interno */
    border: 1px solid #fff; /* Borde blanco delgado */
    text-decoration: none; /* Quitar subrayado */
    margin: 0; /* Quitar márgenes entre los enlaces */
}

.toolbar a:hover {
    background-color: #333; /* Cambiar color de fondo en hover */
}








 
/* Botones de modos */
#btn-modo-claro, #btn-modo-oscuro, #btn-modo-azul {
    padding: 10px;
    margin: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    outline: none;
}
 
/* Botones de colores */
#btn-modo-claro {
    background-color: #f0f0f0;
    color: #333;
}
 
#btn-modo-oscuro {
    background-color: #333;
    color: #fff;
}
 
#btn-modo-azul {
    background-color: #001f3f; /* Azul marino */
    color: #fff;
}
 
/* Modo claro: fondo blanco */
body.login-layout.claro {
    background-color: #ffffff;
}
 
/* Modo oscuro: fondo negro */
body.login-layout.oscuro {
    background-color: #000000;
    color: #ffffff;
}
 
/* Modo azul marino: fondo azul marino */
body.login-layout.azul {
    background-color: #001f3f;
    color: #ffffff;
}
 
.login-box-body .ingresar{
    align-items: center;
  }
  .login-box-msg{
    color: #000;
  }
  .logoEmpresa {
    display: block; /* Asegura que el logo se comporte como un bloque */
    margin: 0 auto; /* Centra horizontalmente el logo */
    width: 50%; /* Ajusta el tamaño del logo al 50% de su contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    padding: 5px; /* Espaciado alrededor del logo */
  }