/* DEFAULT */

/*Lo primero es colocar margen y padding a 0 para luego podamos usarlos a nuestra medida y 
añadir el border-box para que no haga nuestros elementos más grandes al añadir padding, margin o 
border
*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

/* FIN DEL DEFAULT */

/*Fondo del login y el registro*/
#fondoLogRe {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    background-image: url("img/fondo_logIn.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/*REGISTRO*/
.registro-caja {
    width: 400px;
    padding: 26px;
    text-align: center;
    background-color: rgb(245, 245, 245);
    border-radius: 15px;
}

/*Clase que lleva el logo y el título*/
.logo-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-bottom: 11px;
}

/*En este ajustamos el tamaño del ancho a lo que queremos y 
la altura por defecto de la imagen del logo*/
.logo-titulo img {
    width: 38px;
    height: auto;
}

/*Titulo del logo */
.logo-titulo h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: #1F3A5F;
}

/*Subtitulo del login*/
.logo-subitutlo h4{
    margin-bottom: 11px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #5F6F81;

}

/*Titulo "inicia sessió / Registrate"*/
.iniciaSesion{
    text-align: left;
    margin-bottom: 15px;
    font-size: 8px;
}

/*-----Formulario------*/
.formularioRegistro{
    margin-bottom: 15px;
}

/*Label del formulario*/
.formularioRegistro label{
    text-align: left;
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
}

/*Input del formulario*/
.formularioRegistro input {
    width: 100%;
    padding: 9px;
    display: flex;
    font-size: 12px;
    border-radius: 8px;
    border: 1px solid black;
    outline: none; 
}

/*Borde del input al clicar*/
.formularioRegistro input:focus {
    padding: 8px; 
    border: 2px solid #415b74; 
}

/*Botón*/
.boton {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background-color: rgb(220, 220, 220);
    color: rgb(0, 0, 0);
    cursor: pointer;
}

/*Texto de abajo del botón*/
.footer {
    margin-top: 19px;
    font-size: 10px;
}

/*Texto de que enlaza*/
.footer a{
    font-weight: bold;
    text-decoration: none;
    color: rgb(111, 161, 202);
}

/*Errores php LogIn*/
.errorLoginRegister {
    color: #ff4d4d;
    font-size: 15px;
    margin: 10px 0px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* FINAL REGISTRO */

/* LOG-IN */

/*Caja del formulario del log-in*/
.login-caja {
    width: 400px;
    padding: 35px;
    text-align: center;
    background-color: rgb(245, 245, 245);
    border-radius: 20px;
}

/*Clase que lleva el logo y el título*/
.logo-titulo{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

/*En este ajustamos el tamaño del ancho a lo que queremos y 
la altura por defecto de la imagen del logo*/
.logo-titulo img{
    width: 60px;
    height: auto;
}

/*Titulo del logo */
.logo-titulo h1{
    font-family: 'Montserrat', sans-serif;
    font-size: 25px;
    color: #1F3A5F;
}

/*Subtitulo del login*/
.logo-subitutlo h4{
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #5F6F81;

}

/*Titulo "inicia sessió / Registrate"*/
.iniciaSesion{
    text-align: left;
    margin-bottom: 20px;
    font-size: 20px;
}

/*-----Formulario------*/
.formularioLogin{
    margin-bottom: 20px;
}

/*Label del formulario*/
.formularioLogin label{
    text-align: left;
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
}

/*Input del formulario*/
.formularioLogin input{
    width: 100%;
    padding: 12px;
    display: flex;
    font-size: 14px;
    border-radius: 10px;
    border: 1px solid black;
    outline: none; 
}

/*Borde del input al clicar*/
.formularioLogin input:focus {
    padding: 11px; 
    border: 2px solid #415b74; 
}

/*Botón*/
.boton{
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background-color: rgb(220, 220, 220);
    color: rgb(0, 0, 0);
    cursor: pointer;
}

/*Texto de abajo del botón*/
.footer{
    margin-top: 25px;
    font-size: 13px;
}

/*Texto de que enlaza*/
.footer a{
    font-weight: bold;
    text-decoration: none;
    color: rgb(111, 161, 202);
}

/*Errores php LogIn*/
.errorLoginRegister {
    color: #ff4d4d;
    font-size: 15px;
    margin: 10px 0px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* FINAL LOG-IN */

/* REQUIRE */

/*--- Header ---*/

/*Clase que define el estilo de la barra de navegación*/
.menuPrincipal{
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    background-color: #e8f1f5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/*Clase que lleva el apartado de la imagen del logo*/
.logo img{
    width: 70px;
    margin-left: 70px;
}

/*Clase que contrololos botones para poner la web en oscuro y salir hacia el login*/
.acciones{
    display: flex;
    align-items: center;
    margin-right: 70px;
    gap: 15px;
}

.recuadroBienvenida {
    padding: 8px 15px;
    border-radius: 50px;
    border: 1px solid #000000;
}


/*Botón para salir*/
.salir {
    width: 75px;
    height: 35px;
    background-color: #729bb2;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

.salir:hover {
    background-color: white;
    color: #729bb2;
    border: 2px solid #729bb2;
}

/*--- Fin del header*/

/*--- Menú de navegación izquierdo ---*/
.menuIzquierdo{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Clase que lleva el estilo de los botones de la barra de navegación del menú izquierdo */
.item-menu {
    display: flex;
    width: 270px;
    height: 40px;
    padding-top: 10px;
    gap: 25px;
    color: rgb(0, 0, 0);
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
}

/* Clase que lleva el estilo del botón del menú que esté activo */
.item-menu.activo {
    background-color: #729bb2; 
    color: white;
}

/* Clsae que lleva el stilo del botón del menú que vayamos a clicar, es decir, 
que cuando estemos por encima cambie de color */
.item-menu:not(.activo):hover {
    color: #ffffff; 
    background-color: #729bb2; 
}

/*Clase que pone el tamaño, el padding i el tamaño fuente de los elementos de dentro*/
.item-menu i {
    width: 20px;
    padding-left: 10px;
    font-size: 18px;
}

/*--- Fin del menú de navegación izquierdo ---*/

/* FIN DEL REQUIRE */

/* Esta clase alineamos la barra izquierda, el muro central y la barra derecha
el centro con un margen de 40px entre ellos y padding de 40px en izquierda y 70px en derecha
 */
.contenedorPrincipal {
    display: flex;
    gap: 40px;
    padding: 40px 70px;
}

/* MURO PRINCIPAL */

/*En esta clase definimos el tamaño de la caja donde irán las publicaciones
y que vayan en columna*/
.muroCentral{
    width: 650px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/*Clase que lleva la caja de la publicación*/
.publicacion {
    padding: 25px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/*Cabecera de la publicación*/
.cabeceraPublicacion {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

/*Clase que lleva el contenido de la cabecera de la publicación*/
.infoPublicacion {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/*Clase que lleva color de los elementos como likes, textos como la hora de publicación
o comentarios*/
.infoPublicacion span {
    font-size: 13px;
    color: #6f8fa3;
}

/*Clase que lleva el titulo de la publicación*/
.publicacion h3 {
    color: #1F3A5F;
    margin-bottom: 10px;
    overflow-wrap: break-word; /* Estándar moderno */
    word-wrap: break-word;     /* Soporte antiguo */
    word-break: break-word;
}

/*Clase que lleva el texto de la publicación*/
.publicacion p {
    font-size: 14px;
    overflow-wrap: break-word;
    word-break: break-word;
}

/*Clase que lleva la imagen*/
.imagenPublicacion {
    width: 100%;
    border-radius: 15px;
    margin: 15px 0;
}

/* Clase que lleva la cantidad de likes y comentarios */
.interacciones {
    display: flex;
    gap: 25px;           
    font-size: 14px;
    color: #000000;    
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5; 
    padding: 15px 0;         
    margin-top: 20px; 
}

/*Apartado para escribir el comentatio*/
.comentarioInput {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/*Apartado del input para escribir el comentario*/
.comentarioInput input{
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    background-color: #f8f9fa;
    border: 1px solid #ccc;
    outline: none;
}

/*Botón de enviar el comentario*/
.comentarioInput button{
    padding: 10px 18px;
    border-radius: 10px;
    border: none;
    background-color: #5d7d8e;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s ease;
}

/*Clase por si no hay publicaciones */
.mensajeSinPublicaciones {
    margin-top: 10px;
    text-align: center;
    color: #000000;
}

/* FIN MURO PRINCIPAL */

/* PERFIL */

/* ----- Apartado central del perfil---------- */

/* Clase que llevará el apartado central del perfil y 
las publicaciones del user */
.perfilCentral {
    display: flex;
    flex-direction: column;
    width: 650px;
    gap: 30px;
}

/*Clase que lleva la caja del perfil del usuario*/
.perfilUser {
    padding: 25px;
    border: 1px solid #ccc;
    border-radius: 20px;
    background-color: #ffffff;
}

/* Botón de editar perfil */
.botonEditarPerfil {
    position: absolute;
    right: 5px;
    padding: 8px 15px;
    border-radius: 8px; 
    background-color: #729bb2; 
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.botonEditarPerfil:hover {    
    background-color: #ffffff; 
    color: #729bb2;
    border: 1px solid #729bb2;
}

/*Clase que lleva cuando pasas el ratón por encima del botón*/
.botonEditar:hover {
    background: #729bb2;
    color: white;
}

/* Clase que lleva el bloque central con el avatar,nombre, bio y números generales */
.infoPrincipal {
    position: relative; /* CRUCIAL para que el botón no se salga de la caja */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Avatar */
.avatarPerfil {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin-bottom: 10px;
    border-radius: 50%;
    font-size: 32px;
    font-weight: bold;
    background-color: #415b74;
    color: rgb(255, 255, 255);
}

.avatarPublicacion {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    margin-bottom: 10px;
    border-radius: 50%;
    font-size: 22px;
    font-weight: bold;
    background-color: #415b74;
    color: rgb(255, 255, 255);
}

/*Clase que lleva la biografia*/
.bio {
    color: #6f8fa3;
    font-size: 14px;
}

/* Clase que llevas las 3 estadísticas de abajo (Publicaciones, Seguidores)*/
.estadisticasUser {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 30px;
}
/*Clase que lleva cada estadistica*/
.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 20px;
    color: black;
}

.stat span {
    font-size: 12px;
    color: #6f8fa3;
}

/* Clase que lleva la cabecera de las publicaciones del usuario*/
.cabeceraPublicacionUser {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

/*Clase que lleva el avatar más el nombre del usuario dentro de sus publicaciones*/
.avatarUser {
    display: flex;
    gap: 15px;
}

/*Clase que lleva alinea los botones de editar y eliminar*/
.editarEliminar {
    display: flex;
    gap: 10px;
}

/* Botones circulares de editar y borrar */
.accionBotones {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    font-size: 14px;
    transition: 0.2s ease;
}

.accionBotones.editar {
    border: 1px solid #729bb2;
    color: #729bb2;
}

.accionBotones.editar:hover {
    background-color: #729bb2;
    color: white;
}

.accionBotones.borrar {
    border: 1px solid #e74c3c; 
    color: #e74c3c;
}

.accionBotones.borrar:hover {
    background-color: #e74c3c;
    color: white;
}

.imagenPublicacion {
    max-width: 100%;
    border-radius: 8px;
    margin-top: 15px;
}

/*--Editar perfil*/

.cajaEditarPerfil {
    width: 650px;
    padding: 25px;
    border-radius: 14px;
    border: 1px solid #ccc;
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* Formulario de editar perfil */
.editarPerfil {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

/* Labels */
.editarPerfil label {
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 14px;
}

/* Inputs y textarea */
.editarPerfil input {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #d1d5db;
    background: #eef1f4;
    font-size: 14px;
    outline: none;
}

.editarPerfil textarea {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #d1d5db;
    background: #eef1f4;
    font-size: 14px;
    outline: none;
    height: 120px;      
    resize: none;      
}


/* Al clicarlo */
.editarPerfil input:focus{
    border: 2px solid #729bb2;
    background: #ffffff;
}

/* Botones */
.editarPerfilBotones {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

/* Guardar */
.botonGuardar {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    border: none;
    background-color: #729bb2;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

/* Cancelar */
.botonCancelar {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #729bb2;
    background-color: transparent;
    color: #729bb2;
    font-weight: bold;
    cursor: pointer;
    display: flex;             
    justify-content: center;   
    text-decoration: none;     
}

/* Sombra al pasar ratón */
.botonGuardar:hover {
    background-color: #ffffff;
    border: 1px solid #729bb2;
    color: #729bb2;
}

.botonCancelar:hover {
    background-color: #729bb2;
    color: white;
}

/* Clase para el mensaje de error de email repetido */
.error-mensaje {
    gap: 5px;      
    color: #ff4d4d;      
    font-size: 12px;       
    margin-top: 10px;        
}

/* FIN PERFIL */

/* PUBLICACIÓN*/
.crearPublicacion {
    padding: 25px;
    margin-bottom: 20px;
    border-radius: 14px;
    border: 1px solid #ccc;
    background: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.crearPublicacion h2 {
    margin-bottom: 20px;
}

.formularioNuevaPublicacion {
    margin-bottom: 20px;
}

.formularioNuevaPublicacion label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}

.formularioNuevaPublicacion input[type="text"] {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
}

.formularioNuevaPublicacion textarea {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    height: 100px;
    resize: none;
}

.contadorCaracteres {
    display: block;
    text-align: right;
    font-size: 12px;
    color: #6b7280;
    margin-top: 5px;
}

.input-archivo input {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px dashed #d1d5db;
    background: #f9fafb;
}

.editarSubirPublicacionBotones {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.editarSubirPublicacionBotones-guardar {
    flex: 1; 
    padding: 12px; 
    border-radius: 10px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #729bb2;
    background-color: #729bb2; 
    color: white;
}

.editarSubirPublicacionBotones-guardar:hover {
    background-color: white;
    color: #729bb2;
}

.editarSubirPublicacionBotones-cancelar {
    flex: 1; 
    padding: 12px; 
    border-radius: 10px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #729bb2;
    background-color: #ffffff; 
    color: #729bb2;
}

.editarSubirPublicacionBotones-cancelar:hover {
    background-color: #729bb2;
    color: #ffffff;
}

.vistaPrevia {
    border: 2px dashed #e5e7eb;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    background-color: #fafafa;
}

.tituloVistaPrevia {
    font-size: 12px;
    font-weight: bold;
    color: #6b7280;
    margin-bottom: 10px;
}

.seleccionarCategorias {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; 
    margin: 10px 0 20px 0;
}

.opcionCategoria {
    padding: 8px 16px;
    background-color: #ffffff;
    border: 1px solid #d1d5db; 
    border-radius: 20px; 
    font-size: 14px;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.opcionCategoria input {
    display: none; 
}

.opcionCategoria:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
}

.opcionCategoria:has(input:checked) {
    background-color: #e0e7ff; 
    border-color: #6366f1;     
    color: #4338ca;            
    font-weight: bold;
}

.contenedorCategorias {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.estiloEtiqueta {
    background-color: #e3f2fd;
    color: #1976d2;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #bbdefb;
}