html {
    font-size: 14px; /* Tamaño de fuente base por defecto */
    height: 100%;
}

@media (max-width: 768px) { /* Media query para pantallas de hasta 768px de ancho (típico de tablets y móviles) */
    html {
        font-size: 12px; /* Reducimos el tamaño de fuente base en mobile */
    }
}


/* Para Google Sans Flex */
body {
    font-family: 'Google Sans Flex', sans-serif;
    background-color: #fff6f4;
    background-image: url('../img/ml-bkg.png'); 
    background-repeat: repeat-x; 
    background-position: top center; 
}

h1 {
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 700; /* Ejemplo de ajuste de peso */
}
a{
    cursor: pointer;
}

/* Para Google Sans Code */
pre, code {
    font-family: 'Google Sans Code', monospace;
}




/* ::: FONTS ::: */
.ml-font-nunito{
    font-family: 'Nunito Sans', sans-serif;
}
.ml-font-exa2{
    font-family: 'Exo 2', sans-serif;
}
.ml-font-jost{
    font-family: "Jost", sans-serif;
}


:root {

    --color-primary: #4285f4;
    --dark: #1a1a2e;
    
    --color-danger: #d93025;
    
    --color-bg-light: #f8f9fa;
    
    --color-bg-hover: #f5f5f5;
    
    --shadow-sm: 0 2px 5px rgba(0,0,0,0.1);
    
    }
    
    
    
    /* Estructura principal */
    
    #top-bar {
        background-color: #f2f0ef;   
        /* background-color: #2c3e50; 
        background: linear-gradient(135deg, var(--dark), #2c2c54);*/
        color: white;
        padding: 8px 0;
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 1000;
        /*box-shadow: 0 2px 10px rgba(0,0,0,0.1);*/
    }
    
    #sidebar {
        background-color: #f2f0ef;   
        /*background-color: #34495e;*/
        color: white;
        height: 100vh;
        width: 190px;
        position: fixed;
        left: 0;
        top: 50px;
        padding-top: 40px;
        overflow-y: auto;
        transition: width 0.3s ease;
    }
    
    #sidebar.collapsed {    
        width: 60px;
    }

    #sidebar a.nav-link{
        color: #353435;
        font-family: 'Exo 2', sans-serif;
    }

    #sidebar a.nav-link:hover{
        color: #36A2EB;
    }

    #sidebar .nav-link i{
        color: #524f4d;
    }
    #sidebar .nav-link:hover i{
        color: #36A2EB;
    }


    #sidebar-icons .nav-link i {
        color: #524f4d; 
        transition: color 0.3s ease; /* Suaviza la transición del color */
    }

    #sidebar-icons .nav-link:hover i {
        color: #36A2EB; 
    }
    #toggle-sidebar i{
       color: #524f4d; 
        transition: color 0.3s ease; /* Suaviza la transición del color */
    }
    #toggle-sidebar:hover i{
       color: #36A2EB; 
    }
    
    
    #main-content {
        margin-left: 190px;
        margin-top: 80px;
        padding: 20px;
        transition: margin-left 0.3s ease;
    }
    
    
    
    #main-content.collapsed {
    
    margin-left: 60px;
    
    }
    
    
    
    #toggle-sidebar {
    
    position: absolute;
    
    top: 10px;
    
    right: 10px;
    
    background: none;
    
    border: none;
    
    color: white;
    
    font-size: 1.2em;
    
    cursor: pointer;
    
    } 
    #sidebar-content {
        display: block;
    } #sidebar-icons {
        display: none;
    }
    #sidebar-icons {
        margin-top: 22px;
    }    
    #sidebar.collapsed #sidebar-content {
        display: none;
    }
    #sidebar.collapsed #sidebar-icons {
        display: block;
    }
    #sidebar-icons .nav-link {
        text-align: center;
    }
    


    .titleApp {
        border-left: 7px solid #36A2EB;
        padding-left: 10px; 
        margin-top: 10px; 
        margin-bottom: 20px;
        font-family: "Jost", sans-serif;
    }


    #top-bar .avatar{
        border: 1.2px solid #b6b6b6;
        padding: 1px;
        width: 32px; 
        height: 32px; 
        object-fit: cover;
    }

    #top-bar .dropdown-menu{
        background: rgb(242, 240, 239);
        padding: 22px 12px;
        min-width: 246px;
        border: none;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
        font-family: 'Exo 2', sans-serif;
    }

    #top-bar .dropdown-menu a{
        border-bottom: 1px dotted #e1e1e1;
        padding-bottom: 5px;
    }
    

    .dropdown-menu .contenedor-circular-imagen{
        width: 86px;
        height: 86px;
        object-fit: cover;
        margin: 8px auto;
        border: 1.2px solid #b6b6b6;
        padding: 1px;
    }

    .user-dropdown-toggle::after{
        display: none;
    }

    #top-bar .dropdown .currentUserTop{
        color: #36A2EB;
        font-family: 'Google Sans Flex', sans-serif;
    }
    #top-bar .dropdown .currentUserTop:hover{
        color:#524f4d;
    }

    #top-bar .currentUser{
        /*background: bisque;*/
        font-family: 'Google Sans Flex', sans-serif;
        /*margin: .5rem 0;*/
        color: #36A2EB;
    }
    

    
    
    
   
    
    
    
    .seccion-estadisticas {
    
    margin-top: 40px;
    
    padding-top: 20px;
    
    border-top: 1px solid #eee;
    
    }
    
    
    
    #graficoGeneros {
    
    max-width: 100%;
    
    margin: 0 auto;
    
    }


#toggle-sidebar-mobile{
    display: none;
}




/* Estilos para móviles */
/* Estilos para móviles */
@media (max-width: 768px) {
    #toggle-sidebar{
        display: none;
    }
    #toggle-sidebar-mobile {
        display: block;
        background: none;
        color: #34495e;
        
    }

    #sidebar {
        display: none; /* Oculta la barra lateral en móviles */
    }

    #sidebar.sidebar-mobile-open {
        display: block;
        position: fixed;
        top: 60px;
        left: 0;
        width: 250px;
        height: calc(100vh - 60px);
        z-index: 1001;
        transform: translateX(-100%); /* Inicialmente fuera de la pantalla */
        transition: transform 0.3s ease-in-out; /* Añade la transición */
    }

    #sidebar.sidebar-mobile-open.open {
        transform: translateX(0); /* Desplaza la barra lateral a su posición */
    }

    #main-content {
        margin-left: 0; /* El contenido ocupa todo el ancho */
    }

    .mobile-only {
        display: block; /* Muestra el botón de alternar en móviles */
    }

    .mobile-menu {
        position: absolute;
        top: 60px;
        left: 0;
        width: 250px;
        height: 100vh;
        background-color: #34495e;
        color: white;
        z-index: 1002;
        display: none; /* Oculta el menú móvil inicialmente */
    }

    .mobile-menu.open {
        display: block; /* Muestra el menú móvil */
    }
}



/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ::: COLORS ::: */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */

    /* text-color */
    .ml-color-primary{color: #36A2EB;}
    .ml-color-secondary{color: #FF8D32;}
    .ml-color-tertiary{color: #bdb76b;}

    .ml-color-darkLight{color: #524f4d;}
    .ml-color-brown{color: #A3806D;}

    .ml-color-dark{color: #34495e;}

    .ml-txt-degrade-primary {
        background-image: linear-gradient(to right, #a8d2ee, #0671ab);
        -webkit-background-clip: text; /* Para navegadores basados en WebKit (Chrome, Safari) */
        background-clip: text; /* La propiedad estándar */
        color: transparent; /* El color del texto original se vuelve transparente */
    }



    /* background-color */
    .ml-bkgColor-primary{background: #36A2EB;}
    .ml-bkgColor-secondary{background: #FF8D32;}
    /* .ml-bkgColor-light{background: #f8f9fa;} */
    .ml-bkgColor-light{background: #dfdfdf;}
    /* .ml-bkgColor-light{background: #21f241;} */
    .ml-bkgColor-dark{background: #34495e;}
    .ml-bkgColor-light-accent{background: #fffef788;}
    




 
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ::: USERS ::: */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */

.otroUsersContent{
    display: flex;
    align-items: center;
}

.preferenciasUsers{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .875em;
    color: #212529bf;
}
.preferenciasUsers span{
    font-weight: bold;
    color: #34495e;
}

@media (max-width: 768px) { 
    .contenedor-circular-imagen {
        width: 42px; 
        height: 42px; 
        border-radius: 50%;
        overflow: hidden;
        border: 1.2px solid #b6b6b6;
        padding: 1px;
    }
    .otroUsersContent{
        flex-direction: column;
    }
}


  




/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ::: BOTONERA TOP - LISTAS ::: */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.btn-top-lista{
    font-size: 1.3rem;
    color:#777;
}

.btn-top-lista:hover{
    color:#36A2EB;
}

.btn-top-delete-lista{
    font-size: 1.3rem;
    color:#777;
}

.btn-top-delete-lista:hover{
    color:#e5597c;
}

/* Tooltip botonera */
.btn-tootltip-top {
  position: relative;
  display: inline-block; /* Asegura que el botón no tenga anchura extra */
}

/* ---------------------------------------------------- */
/* CLASE BASE DEL TOOLTIP (Contenido y Flecha) */
/* ---------------------------------------------------- */
/* Aplicar esta clase a tu elemento que mostrará el tooltip */
.has-tooltip {
    position: relative; /* Esencial para posicionar los pseudo-elementos */
}

/* Estilos comunes para el CONTENIDO del tooltip (la caja de texto) */
.has-tooltip::after {
    content: attr(data-tooltip); /* Toma el texto del atributo data-tooltip */
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    font-size: 10px;
    font-weight: bold;
    opacity: 0;
    pointer-events: none; /* Crucial: permite interactuar con el elemento subyacente */
    transition: opacity 0.2s ease, visibility 0.2s ease; /* Transición suave para aparecer/desaparecer */
    visibility: hidden; /* Oculto por defecto */
    z-index: 10; /* Asegura que esté por encima de otros elementos */
}

/* Estilos comunes para la FLECHA del tooltip */
.has-tooltip::before {
    content: ""; /* Necesario para pseudo-elementos */
    position: absolute;
    border-style: solid;
    border-width: 6px; /* Tamaño de la flecha */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    visibility: hidden;
    z-index: 10;
}

/* ---------------------------------------------------- */
/* CLASE BASE DEL TOOLTIP (Contenido y Flecha) */
/* ---------------------------------------------------- */
/* Aplica esta clase al elemento HTML que mostrará el tooltip */
.has-tooltip {
    position: relative; /* Esencial para posicionar los pseudo-elementos */
}

/* Estilos comunes para el CONTENIDO del tooltip (la caja de texto) */
.has-tooltip::after {
    content: attr(data-tooltip); /* Toma el texto del atributo data-tooltip */
    position: absolute;
    background-color: #333; /* Color de fondo del tooltip */
    color: #fff; /* Color del texto */
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    font-size: 10px;
    font-weight: bold;
    opacity: 0;
    pointer-events: none; /* Crucial: permite interactuar con el elemento subyacente */
    transition: opacity 0.2s ease, visibility 0.2s ease; /* Transición suave para aparecer/desaparecer */
    visibility: hidden; /* Oculto por defecto */
    z-index: 10; /* Asegura que esté por encima de otros elementos */
}

/* Estilos comunes para la FLECHA del tooltip */
.has-tooltip::before {
    content: ""; /* Necesario para pseudo-elementos */
    position: absolute;
    border-style: solid;
    border-width: 6px; /* Tamaño de la flecha */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    visibility: hidden;
    z-index: 10;
}

/* ---------------------------------------------------- */
/* ESTADO HOVER (PARA TODOS LOS TOOLTIPS) */
/* ---------------------------------------------------- */
.has-tooltip:hover::after,
.has-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}


/* ---------------------------------------------------- */
/* POSICIONAMIENTO ESPECÍFICO (Clases Modificadoras) */
/* ---------------------------------------------------- */

/* Tooltip ARRIBA */
.tooltip-top::after {
    bottom: calc(100% + 6px); /* 6px de separación del elemento */
    left: 50%;
    transform: translateX(-50%); /* Centrar horizontalmente */
}
.tooltip-top::before {
    bottom: 29px; /* Pegado al borde inferior del ::after */
    left: 50%;
    transform: translateX(-50%);
    /* Dibuja la flecha apuntando hacia ABAJO */
    border-color: #333 transparent transparent transparent; /* El lado 'top' visible crea una flecha hacia abajo */
}

/* Tooltip ABAJO */
.tooltip-bottom::after {
    top: calc(100% + 6px); /* 6px de separación del elemento */
    left: 50%;
    transform: translateX(-50%); /* Centrar horizontalmente */
}
.tooltip-bottom::before {
    top: 29px; /* Pegado al borde superior del ::after */
    left: 50%;
    transform: translateX(-50%);
    /* Dibuja la flecha apuntando hacia ARRIBA */
    border-color: transparent transparent #333 transparent; /* El lado 'bottom' visible crea una flecha hacia arriba */
}

/* Tooltip a la IZQUIERDA */
.tooltip-left::after {
    right: calc(100% + 6px); /* 6px de separación del elemento */
    top: 50%;
    transform: translateY(-50%); /* Centrar verticalmente */
}
.tooltip-left::before {
    right: 26px; /* Pegado al borde derecho del ::after */
    top: 50%;
    transform: translateY(-50%);
    /* Dibuja la flecha apuntando hacia la DERECHA */
    border-color: transparent transparent transparent #333; /* El lado 'left' visible crea una flecha hacia la derecha */
}

/* Tooltip a la DERECHA */
.tooltip-right::after {
    left: calc(100% + 6px); /* 6px de separación del elemento */
    top: 50%;
    transform: translateY(-50%); /* Centrar verticalmente */
}
.tooltip-right::before {
    left: 33px; /* Pegado al borde izquierdo del ::after */
    top: 50%;
    transform: translateY(-50%);
    /* Dibuja la flecha apuntando hacia la IZQUIERDA */
    border-color: transparent #333 transparent transparent; /* El lado 'right' visible crea una flecha hacia la izquierda */
}



/* Tooltip */
.btn-tootltip-filtro-top::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%; /* Ajustamos para que esté arriba */
  left: 110%;
  transform: translateY(-50%);
  background-color: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 20;
}

/* Flechita apuntando hacia abajo */
.btn-tootltip-filtro-top::before {
  content: "";
  position: absolute;
  top: 50%; /* justo debajo del tooltip */
  left: 32px;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent #333  transparent transparent;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 50;
}

/* Mostrar tooltip al hacer hover */
.btn-tootltip-filtro-top:hover::after,
.btn-tootltip-filtro-top:hover::before {
  opacity: 1;
}






/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ::: SEARCH TOP - LISTAS ::: */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.buscador-form {
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    /* Establece la altura inicial para que coincida con el estado oculto */
    /* La altura se calculará con JS o ajusta un valor fijo si sabes la altura de .buscador-top */
    /* Por ahora, dejémoslo sin un height fijo aquí para que JS lo calcule */
}

.buscador-top {
    display: flex;
    align-items: flex-end;
    transition: transform 0.5s ease-in-out;
    margin-bottom: 10px;
    min-height: 78px;
    /* Establece la posición inicial para que coincida con el estado oculto */
    transform: translateY(0); /* Asegura que inicie en 0 (posición por defecto) */
}

.buscador-top .search{
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
}

.propiedades-checkbox {
    transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

.propiedades-checkbox.show {
    opacity: 1;
    max-height: 200px;
}

.buscador-top .btn {
    margin-right: 10px;
    position: relative;
    z-index: 2;
}

.buscador-top .searchMasBtn{
    display: flex;
    align-items: center;
    width: 60%;
}

@media (max-width: 768px) { 
    .buscador-top {
       margin-top: 28px;
       flex-direction: column;
       align-items: flex-start;
       margin-bottom: 0px;
       min-height: 50px;
    }
    .buscador-top .searchMasBtn{
        display: flex;
        align-items: center;
        width: 100%;
    }

    .propiedades-checkbox{
        margin-top: -20px;
    }
}

.acciones-multiples {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 22px;
}




.buscador-top .d-flex {
    flex-grow: 1; /* Permite que el contenido del d-flex crezca para ocupar el espacio disponible */
}

.search-input-wrapper {
    position: relative; /* Contenedor para el posicionamiento absoluto del ícono */
    flex-grow: 1; /* Permite que este contenedor ocupe el espacio principal */
    margin-right: 10px; /* Un poco de espacio entre el input y el botón "Buscar" */
}

.search-input-wrapper input.form-control {
    padding: 8px 35px 8px 12px; /* Crea espacio a la derecha para el ícono de la lupa */
    border-radius: 6px;
    /* El resto de los estilos del form-control ya los da Bootstrap */
}

.search-icon-inside {
    position: absolute; /* Posicionamiento absoluto dentro de .search-input-wrapper */
    right: 10px; /* Distancia desde el borde derecho del input */
    top: 50%; /* Centra verticalmente el ícono */
    transform: translateY(-50%); /* Ajuste fino para el centrado vertical */
    color: #888; /* Un color gris suave para el ícono */
    pointer-events: none; /* Crucial: hace que el ícono no bloquee los clics en el input */
}

/* Ajuste para el botón de filtros si quieres más espacio entre él y el input */
.buscador-top #btn-filtros {
    margin-right: 10px; /* Espacio a la derecha del botón de filtros */
}



/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ::: SEARCH FORM IN ADD NEW BOOK ::: */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.searchForm-automatic{
    display: flex;
    gap: 8px;
}





#resultados-busqueda li{
    padding: 8px 0px;
    border-bottom: 1px dotted #ccc;
    color: #999;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
}

.boton-agregar-libro{
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    margin-left: 12px;
}


@media (max-width: 768px) { /* Media query para pantallas de hasta 768px de ancho (típico de tablets y móviles) */
   .searchForm-automatic{
        flex-direction: column; 
    }
    .searchForm-automatic .search-icon-inside{
        top: 40%;
    }
    #resultados-busqueda li{
    flex-direction: column;
   }
   .boton-agregar-libro{
    width: 112px;
    margin-left: 0px;
}
}





.formManual label{
    font-weight: bold;
}
.formManual .form-control{
    color: #666;
    margin-bottom: 22px;
}
.formManual .form-control small{
    margin-top: -22px;
}

.formManual .form-control option{
    font-weight: normal;
}

.formManual .form-actions {
    display: flex;
    justify-content: center;
    align-content: center;
    gap: 8px;
}





/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ::: LISTAS - RECOMENDADAS ::: */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.myLists-recommended {
    margin-bottom: 0.2rem;
}
.myLists-recommended .card{
    --bs-card-spacer-y: 0.42em;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.01rem;
    border-radius: 8px;
}
.myLists-recommended .liked-button{
    color: #36A2EB;
}
.myLists-recommended .notLiked-button{
    color: #ccc;
}

.verListaGral{
    background: #34495e;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50px;
    padding: 0px 8px;
    border-radius: 12px;
    font-size: .88rem;
    color: #fff;
    gap: 5px;
    height: 26px;
    font-weight: 500;
}
.verListaGral:hover{
    background: #243444;
    color: #fff;
}

    





/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ::: UTILITIES ::: */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.separadorDotted{
    border-top: 1px dotted #ccc;
    padding-top: 5px;
}
.displayMobile{
    display: none;
}
.displayDesktop{
    display: block;
}
@media (max-width: 768px) { /* Media query para pantallas de hasta 768px de ancho (típico de tablets y móviles) */
    .displayMobile{
        display: block;
    }
    .displayDesktop{
        display: none;
    }
}




/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ::: MODALES - ANUNCIOS ::: */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */

.ml-modal{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #11111193;
}
.ml-modal .modal-buttons{
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
}
.ml-modal .modal-content{
    border-radius: 10px;
    border: none;
}
.ml-modal .close-button{
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    font-weight: 500;
}