/* Nav  */
.full-width.navBar {
    background: linear-gradient(45deg, #F5F5F5, #F5F5F5) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.full-width.navBar .navBar-options i,
.full-width.navBar .navBar-options a,
.full-width.navBar .navBar-options small {
    color: #FFFFFF !important;
}

/*
.full-width.navBar .navBar-options i:hover,
.full-width.navBar .navBar-options a:hover {
    color: #D2D1D7 !important;
    transition: color 0.3s ease;
}*/

 

/* Barra lateral  */

   .navLateral {
    background-color: #F5F5F5 !important; /* Color claro para el fondo */
    color: #333 !important; /* Color oscuro para el texto */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/*.navLateral-body-logo,*/

.navLateral-body-cr,
.navLateral-body-cl i {
    color: #FFFFFF !important; /* Color más suave para los iconos y textos */
}


.navLateral-body-tittle-menu
 {
    color: #8F8F8F !important; /* Color más suave para los iconos y textos */
}



.navLateral a {
    color: #333 !important;
}
 
.navLateral a:hover {
    background-color: #337AB7 !important; /* Color de fondo al pasar el ratón */
    color: #000 !important;
}

.navLateral .menu-principal > li > a {
    border-bottom: 1px solid #ddd;
}
 
/* Color de opciones de submenu */
.sub-menu-options {
    background-color: #8F8F8F !important;
}

.sub-menu-options li a {
    color: #666 !important;
}


/*
.sub-menu-options li a:hover {
    background-color: #f4f4f9 !important;
    color: #333 !important;
}*/



/* PAra dar color al pequeño espacio de la lateral */
/*
.navLateral {
    background: #FE5F19 !important; 
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}*/


/*
.navLateral-body-logo {
    padding: 5px;
    background: #F5F5F5 !important;
    color: #4A4A4A; !important;
    border-bottom: 1px solid #D2D1D7 !important; 
}*/



/*  ----------------- */

/*
.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease;
}*/


/* Paa mostrar el preload mietras carga la página de inicio */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*
.spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}*/



/* Efectos generales menú lateral */
/*.navLateral ul li a {
  transition: all 0.3s ease;
  color: #ffffff;
}*/

/*.navLateral ul li a:hover {
  background-color: #1d2b3a;
  color: #1abc9c;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateX(5px);
}*/

/*.navLateral ul li a .navLateral-body-cl i {
  transition: transform 0.3s ease;
}*/

.navLateral ul li a:hover .navLateral-body-cl i {
  transform: rotate(360deg);
  color: #1abc9c;
}

/* Efecto de submenú */
.sub-menu-options {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

/* Permite despliegue dhacia abajo del menpu lateral */
.full-width.btn-subMenu.active + .sub-menu-options {
  max-height: 500px;
  transition: max-height 0.5s ease;
}

/* Animación de aparición de submenú */
/*.sub-menu-options li {
  opacity: 2;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}*/

/*.sub-menu-options li.show {
  opacity: 1;
  transform: translateY(0);
}*/





.sub-menu-options {
    display: none;
}


/* Estilo para centrar formularios de productos */

.container {
    max-width: 80%; /* Ajusta el porcentaje según el tamaño que necesites */
    margin-left: auto;
    margin-right: auto;
}






/* Estilos del botón MI TIENDA  */

.btn-tienda-chico {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 3px 8px;
    font-size: 12px;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: 'Segoe UI', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
}

.btn-tienda-chico:hover {
    background-color: #3e9144;
}

.btn-tienda-chico i {
    font-size: 13px;
}


/* BOTÓN SOLICITUD DE TIENDA  */

     .btn-solicitar-tienda {
        background-color: #ff6f61;
        color: white;
        text-decoration: none;
        padding: 5px 12px; /* más ancho */
        font-size: 12px;    /* un pelín más grande */
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 600;
        line-height: 1;
        height: 30px;
        transition: background-color 0.3s ease;
    }

    .btn-solicitar-tienda:hover {
        background-color: #e0554a;
    }

    .btn-solicitar-tienda i {
        font-size: 14px;
    }



  
  /* ESTILOS PARA TARJETA DE TIENDA  */  


  .tarjeta-tienda {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
        padding: 2rem;
        max-width: 800px;
        margin: 2rem auto;
        border: 1px solid #e0e0e0;
        text-align: center;
        font-family: 'Segoe UI', sans-serif;
    }

    .tarjeta-tienda .icono-tienda {
        background: linear-gradient(135deg, #ff6f61, #ff9472);
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: white;
        font-size: 32px;
        margin-bottom: 1rem;
    }

    .tarjeta-tienda h2 {
        font-size: 1.8rem;
        color: #333333;
        margin-bottom: 0.5rem;
    }

    .tarjeta-tienda p {
        font-size: 1.05rem;
        color: #555;
        max-width: 90%;
        margin-bottom: 1.5rem;
    }

    .tarjeta-tienda .btn-profesional {
        background-color: #ff6f61;
        color: white;
        border: none;
        padding: 12px 24px;
        font-size: 1rem;
        border-radius: 8px;
        cursor: pointer;
        transition: 0.3s ease;
    }

    .tarjeta-tienda .btn-profesional:hover {
        background-color: #e25449;
    }

    @media (max-width: 600px) {
        .tarjeta-tienda {
            padding: 1.5rem;
        }

        .tarjeta-tienda h2 {
            font-size: 1.5rem;
        }
    }



   /* ESTILOS DE TAJETA PARA INFORMA QUE YA TIENE SOLICITUD SOLICITDTIENDA-VIEW.PHP */ 


   .info-solicitud {
    background-color: #eaf4fc;
    border: 1px solid #b3d8f0;
    color: #31708f;
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.info-solicitud i {
    font-size: 20px;
    color: #31708f;
}


.aviso-solicitud-n {
    background-color: #fff4e5;
    border: 1px solid #ffd9a6;
    color: #a05a00;
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.aviso-solicitud-n i {
    font-size: 20px;
    color: #ff9900;
}