:root{
    --color--primary:#CCE8D2;
    --color--details:#6b9875;
    --color--actions:#579e5a;
    --color--inform:#e6e6e6;
    --color--backdrop:#f1f1f1;
    --light--shawdow:#888888;
    --dark--shadow:#0000001a;
    --darkest-shadow:#00000033;
    --error:#ff0000;
    --color-secondary:#333;
    --color-user-space:#cfcfcf;
    --text-light:#ffffff;
    --text-dark:#000000;
    --color-animacion: #00000026;
 }

html {
    /* Ocupa el 100% de la altura de la ventana */
    height: 100%; 
}
/***********ESTILOS DEL LOGIN**************/
#bodyLogin {
    display: flex;/**habilita el modo flexible necesario si queremos responsive**/
    justify-content: center;    /* centra horizontalmente */
    align-items: center;        /* centra verticalmente */
    min-height: 100vh;          /* ocupa toda la altura de la ventana */
    margin: 0;                  /* elimina márgenes por defecto */
    background-image: url('../img/imagenFondoLogin.jpg'); 
    background-repeat: no-repeat;      /* no repetir */
    background-size: cover; /****para que la imagen cubra todo el contenedor**/
}


.formLogin{
    width: 50%;          
    max-width: 500px;    /*  no superar 500px en pantallas grandes */     
    /***max-height: 500px; posible problema en otras pantallas al añadir mensajes de error*****/
    background-color:var( --color--backdrop);
    margin: auto;
    border-radius: 14px;
    box-shadow: 5px 10px 18px var(--light--shawdow);
    padding: 20px;
    height: max-content; /**para que se adapte a los hijos, importante para que si se añaden mensajes de error que no nos saque elementos*/
    
}
.logo {
  max-width: 100%;
  height: auto;
  display: block; /**asi ocupa todo el espacio y además salto de linea**/
  margin: 20px auto;
}
.formLogin div{
        display: block;
        margin: auto;
        text-align: left;
        padding: 0%;
    
    }


.formLogin input{
    display: block;
    margin: auto;
    width: 90%;
    padding: 8px;
    font-size: 16px;
    border-radius: 4px;
    border:var(--light--shawdow) 1px solid;
    background-color: var(--color-user-spacesss);
}

.formLogin label {
    display: block; /* Convierte el elemento en bloque para que este uno debajo del otro (salto de linea y ocupa todo el espacio)*/
    width: 90%;
    margin: auto;
    margin-top: 20px;
    text-align: left; /* Asegura la alineación horizontal izquierda */
    text-transform: uppercase;
    font-weight: bold;
}


/****boton de iniciar sesion******/
#submit{
    width: 90%;
    background-color: var(--color--actions);
    color: var(--text-light);
    font-weight: bold;
    cursor: pointer; /***para que nos ponga en vez de una flecha una manita***/
    margin-top: 30px;
    margin-bottom: 30px;
    border: none;
    border-radius: 20px;
    box-shadow:var(--light--shawdow) 2px 2px 5px;

}
/*******los mensajes de error de login, los demás seran con clases de bootstrap**********/
.error-message {
    color: var(--error);
    text-align: center;
    margin: 10px auto;
    font-weight: bold;
}
 

/*************ESTILOS CATALOGO Y PRODUCTOS Y DETALLE DE PRODUCTO************/ 
 
/**************CATEGORIAS***********************/

/*******contenedores principales en ambos productos y categorias y carrito**********/
.body{
/* Ocupa el 100% de la altura del HTML */
    min-height: 100%; 
    display: flex; /* Activa Flexbox */
    flex-direction: column; /*Organiza verticalmente */
    margin: 0; /* Elimina márgenes por defecto */
    flex-grow: 1;
}
 /* Estilo para que toda la tarjeta sea clickable y muestre puntero */
            .producto-card {
                cursor: pointer; 
                transition: transform 0.2s, box-shadow 0.2s;
            }
            .producto-card:hover {
                transform: translateY(-5px); /* Pequeño efecto hover */
                box-shadow: 0 4px 8px var(--color-animacion) !important;/*el important es cuando queremos sobreescribrir bootstrap*/
            }
            .container{
                padding: 20px;
            }

/*el titulo de la pantalla de categorias*/
#titulo{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;

}

/***********ESTILOS DE PRODUCTOS.PHP***************/


/********ESTILOS DE DETALLE_PRODUCTO***********/

/**el contenedor de la imagen que incluye sus textos
 para cambiarlos de una a claro junto con todos sus datos de descripcion , nombre etc*/
#contenedorBloqueDatos{
color: var(--text-dark);
flex-grow: 1;
}

#productoEspecificoImagen{
    background-color: #ffffff;
    box-shadow: 0 4px 8px var(--dark--shadow);
}

/***************ESTILOS CARRITO***********************************************/

/***contenido principal de carrito***/
.contenido-principal {
    /* Hace que el contenido crezca para ocupar todo el espacio extra */
    flex-grow: 1; 
}



/***************ESTILOS CABECERA*******************/
#cabeceraNavegacion{
    display: flex;
    /* Separa la imagen/logo  del contenedor #acciones */
    justify-content: space-between; 
    /* Alinea verticalmente los elementos principales */
    align-items: center; 
    background-color: var(--color--primary);
    min-height: 60px; /*basicamente para la responsibidad, que establecemos un minimo de cuanto se puede reducir***/
    height: 80px;
    border: 1px solid var(--color--details);
    padding-top:20px;
    padding-bottom:20px;
}

#logoCabecera {
    padding-left:1.5vw;
}
/* Contenedor principal de la derecha con todos los botones de accion*/
#acciones{
    display: flex;
    /* Controla la distancia entre #enlacesNav y #datosUsuario */
    margin-left: auto;
    height: max-content;/* para que se adapte a la altura de los hijos */
    height: 100%; /**para que sea la misma que el padre***/
} 

/* Contenedor de los enlaces */
#enlacesNav {
    display: flex;
    /* Espacio entre los enlaces individuales */
    gap: 15px;
    /* Alinea los textos de los enlaces verticalmente */
    align-items: center;
    padding: 5%;

}

/* Elemento de los datos del usuario */
#datosUsuario{
    display: flex;
    background-color:var(--color--primary);
    padding: 0 20px;
    font-weight: bold;
    align-items: center; /****centra a los hijos en su caja verticalmente****/
    text-align: center;
}

/********los "BOTONES" con iconos*********/
.contenedorIcono{
    display: flex;
    justify-content: center; /**centra a los hijos horizontalmente**/
    align-items: center;/**centra a los hijos verticalmente***/
    background-color: var(--color--actions);
   width: 40px; 
    height: 40px; 
    border-radius: 5px;
    box-shadow: 0 4px 8px var(--dark--shadow);

     /* Añadir animación suave de subida y sombra con su duracion para que luego vuelva a su estado normal*/
    transition: transform 0.2s, box-shadow 0.2s; 
    cursor: pointer; /* cambia el cursor de flecha a una manita*/
}

.contenedorIcono:hover {
    
    transform: translateY(-4px) !important; /*mueve el elemento hacia arriba y hacemos lo del important por si acaso bootstrap hace de las suyas*/
    /* Aumenta mucho más la sombra para el efecto de "flotación" */
    box-shadow: 0 10px 20px rgb(147, 147, 147);
}

/*******los enlaces que actuan como botones************/
.contenedorIcono a{
    display: flex;
    width: 100%;
    height: 100%;
    /***centramos***/
    justify-content: center;
    align-items: center;
}
/******la iconografia******/
.contenedorIcono img{
    width: 24px;
    height: 24px;
    /* Asegura que la imagen no se estire */
    object-fit: contain;
   
}


/*Media quearies basicamente estos solo se aplican cuando la pantalla es más pequeña, asi controlamos que sea responsive la cabecera*/
@media (max-width: 768px) {
    /* Reduce el tamaño del texto de usuario */
    #datosUsuario {
        /* Reduce el tamaño del texto para que ocupe menos píxeles */
        font-size: 0.8em; 
        
        /* Reducir el padding horizontal a lo mínimo  */
        padding: 0 5px; 
        
        /* MUY IMPORTANTE: para que salte de linea*/
        white-space: wrap; 
       
        /* Permite que el contenedor del nombre se encoja agresivamente */
        flex-shrink: 2; 
    }

    .contenedorIcono img {
        width: 20px; 
        height: 20px;
    }
    
    /*Reducimos el padding de la cabecera general */
    #cabeceraNavegacion {
        padding: 15px 1vw; /* Reducir el padding de 1.5vw a 1vw */
        min-height: 50px; /* Reducir la altura mínima */
    }
    
    /* Reducimos el gap*/
    #enlacesNav {
        gap: 7px; /* Reducir el espacio entre botones (de 5px a 3px) */
    }
    
    /*Reducimos el logo en media query */
    #cabeceraNavegacion > img {
        padding-left: 10px;
        margin-right:0px;
        width: 200px; /* Reducir el ancho del logo en pantallas pequeñas */
        height: auto;
    }
    
    /*Hacemos a los iconos sean lo más pequeños posible */
     .contenedorIcono {
         width: 32px; /* 32px en lugar de 35px */
         height: 32px;
     }

}


/******************ESTILOS LOGOUT******************************/

/*contenedor principal del mensaje*/
#contenedorDespedida{
max-width: 500px; /* Tamaño máximo deseado para la caja */
    width: 90%; /* Ocupa el 90% del ancho del padre hasta 500px */
    
    padding: 40px; 
    
    /* Fondo y Sombra */
    background-color: var(--color--inform); 
    border-radius: 10px; 
    box-shadow: 0 8px 16px var(--darkest-shadow); 
    text-align: center;
}


 /***el propio mensaje****/
    #contenedorDespedida p {
    font-size: 1.2em; /* Hace el mensaje un poco más grande */
    margin-bottom: 20px;
    }


/***contenedor del boton de "despedida" ***/
#AccionDespedia {
    /* Quitamos width y height en 100% para que se ajuste al contenido */
    display: inline-block; /* Permite controlar el ancho y la forma, y los margenes verticales pero tambien poner otro
     elemento a su lado */
    background-color: var(--color--actions);
    padding: 10px 25px; 
    border-radius: 999px; 
    /* Sombra para darle un poco de relieve */
    box-shadow: 0 2px 4px var(--darkest-shadow);
}


/***el propio enlace de despedida*****/
#AccionDespedia a {
    text-decoration: none;
    color: var(--text-light); 
    font-weight: bold;
    display: block; /* Hace que el enlace ocupe todo el espacio del contenedor */
}

/*******************ESTILOS DE FOOTER**************/
footer {
    background-color: var(--color-secondary);
    color: var(--text-light); 
    font-size: 0.9em;
}
footer img{
 filter: invert(100%);
}
/***enlaces del footer con bootstrap**/
.list-unstyled a{
    color: white !important;
}


/* Estilo para los enlaces de Bootstrap */
footer a {
    text-decoration: none;
    transition: color 0.3s;
    color: white !important;
}

footer a:hover {
    color: var(--color--primary) !important; /* Resalta el enlace al pasar el ratón, y lo de important es para sobrescribir bootstrap */
}



/*estilos del modal para la cookie*/
.modal-overlay {
    /* Fija el modal sobre toda la ventana del navegador */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Fondo semi-transparente para oscurecer el contenido detrás */
    background-color: rgba(0, 0, 0, 0.7); 
    
    /* Alto Z-index para asegurar que esté por encima de todo */
    z-index: 1000; 
    
    /* Usamos Flexbox para centrar la caja de contenido */
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
}

/**contenido principal del modal**/
.modal-content {
    /* Tamaño máximo para que no ocupe toda la pantalla */
    max-width: 400px; 
    width: 90%; /* Ancho responsivo */
    background-color: white; 
    padding: 30px;
    border-radius: 8px; 
    
    /* Sombra sutil para darle profundidad */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); 
    
    /* Animación simple para que aparezca suavemente */
    transform: scale(0.95);/*Hace que el elemento sea ligeramente más pequeño que su tamaño*/
    opacity: 0;/*Hace que el elemento sea completamente transparente*/
    animation: fadeIn 0.3s forwards;
}


/* ------Creamos una animacion para el modal------------------------------------- */
@keyframes fadeIn {
    /*con el to le decimos que cuando termine el elemento (modal) de ser opaco y su tamaño normal*/
    to {
        transform: scale(1);
        opacity: 1;
    }
}
/* Estilos para el botón de Aceptar */
#btnAceptarTema {
    background-color: #00C471; 
    color: #1A1A1A;            
    border-color:none;
    padding: 12px 18px; 
    border-radius: 25px; 
    font-size: 1rem;
    font-weight: 600; /* Texto seminegrita */
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;/***las duraciones de cambios, 
    primero cambia el color el otro la escala*/
}

/* Efecto Hover del boton de aceptar (para que se sienta interactivo) */
#btnAceptarTema:hover {
    background-color: #008C53; /* Verde más oscuro al pasar el ratón */
    transform: translateY(-1px); /* Pequeño levantamiento */
}

/* Estilos para el botón de Rechazar */
#btnRechazarTema {
    /* Fondo transparente */
    background-color: rgb(135, 15, 15); 
    
    /* Contorno sutil (usando el color de acento o el color de texto secundario) */
    border: none; 
    color: black;            
    
    /* Misma forma y tamaño que el de Aceptar */
    padding: 12px 18px; 
    border-radius: 25px; 
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

/* Efecto Hover para Rechazar */
#btnRechazarTema:hover {
    background-color: rgb(180, 0, 0); 
    color: black;
   transform: translateY(-1px);
}