/* display flex separador de input y boton */
.custom-navbar .container-fluid {
    display: flex;
    justify-content: space-between; 
    align-items: center;           
}

.custom-navbar form {
    flex-grow: 1;   
    margin-right: 1rem;   
}

.custom-navbar .form-control {
    border-width: 3px;
    border-radius: 10px;
    border-color: #aaaaaa; 
    width: 40%; 
    transition: border-color 0.3s ease; /* animación suave */
}

/* cuando pasas el mouse */
.custom-navbar .form-control:hover {
    border-color: #95bd9e; /* verde Bootstrap */
}

.custom-navbar .btn-search {
    border-width: 3px;
    border-radius: 10px;
    border-color: #aaaaaa; 
    background-color: #f8f9fa; /* gris claro, combina con el input */
    color: #333; /* texto oscuro */
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

/* Hover */
.custom-navbar .btn-search:hover {
    border-color: #28a745; /* mismo verde que el input */
    background-color: #28a745; 
    color: #fff;
}

/* Focus / Active */
.custom-navbar .btn-search:focus,
.custom-navbar .btn-search:active {
    border-color: #28a745;
    background-color: #218838; /* verde más oscuro */
    color: #fff;
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}

/* class botin */
.secondary-gris{
    background-color: #aca6a6;
    padding: 12px;
    border-radius: 25px;
    border: none;
    color: white;
}

.secondary-gris:hover {
    background-color: #918d8d;
}

/* ############################### Estilo Card #####################################*/
.card .img-container {
    height: 70px;          /* altura fija para todas las imágenes */
    width: 40%;
    margin: 0 auto 10px auto; /* centra horizontalmente */
    display: flex;
    align-items: center;    /* centra verticalmente */
    justify-content: center;/* centra horizontalmente */
    overflow: hidden;
    margin-bottom: 0px;    /* separa imagen del título */
}

.card-img-top {
    max-height: 100%;       /* que no sobrepase el contenedor */
    max-width: 100%;
    object-fit: contain;    /* mantiene proporciones */
}

.card {
    border-radius: 25px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    border-radius: 25px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    min-height: 40px;  /* ajustar este valor alutura del card */
    display: flex;
    flex-direction: column;
}
.card:hover {
    transform: scale(1.05);
}

/* estilo al boton del card */
.custom-button {
    background-color: #666666; /* gris */
    color: white;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    margin: 0px;
    padding: 2px;
}
.custom-button:hover {
    background-color: #021646;
}
 

/* ######################### Scroll al card ############################################################### */

.cards-container {
    display: flex;
    flex-wrap: wrap;
    max-height: 400px;
    overflow-y: auto;
}
.cards-container .col-md-3 { /* 4 columnas (12/3=4) */
    flex: 0 0 25%;
    max-width: 25%;
}

/* Mostrar siempre la barra de scroll */
.cards-container::-webkit-scrollbar {
    width: 7px;
}
.cards-container::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 4px;
}
.cards-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.ordenado_por{
    margin-top: 2px;
}


/* Mostrar siempre la barra de ti_menu*/
.scroll_ti_menu {
    max-height: 210px;   /* altura aprox. para 4 <li> */
    overflow-y: auto;    /* activa scroll vertical */
    margin-top: 2px;
    padding-left: 0;     /* opcional, para alinear */
}

/* Scroll fino */
.scroll_ti_menu::-webkit-scrollbar {
    width: 4px;
}
.scroll_ti_menu::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 2px;
}
.scroll_ti_menu::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.span_mas_usados{
    color: #999;
    font-size: 16px;
}


/* ################ estilo href del menu ###########*/
.link_acceso{
    color: white;
    margin-left: 7px;
}

/* s################## subtitulo del menu area del conocimiento y tipo recurso ################ */
.subtitulo{
    font-size: 10px;
    text-decoration:wavy ;
}

.side-menu__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* opcional, para alinearlos a la izquierda */
}


/* ################# Estilo atoz  ##################################### */
.atoz-link {
    display: inline-block;
    padding: 7px 10px;
    margin: 2px;
    border: 2px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    background-color: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
}
.atoz-link:hover, .atoz-link.active {
    background-color: #021646;
    color: white;
    /*border-color: rgba(155, 28, 42, .9);*/
}

/* Estilo para letras desactivadas */
.atoz-link.disabled {
    background-color: #e9ecef;
    color: #6c757d;
    border-color: #dee2e6;
    cursor: not-allowed;
    opacity: 0.6;
}

.atoz-link.disabled:hover {
    background-color: #e9ecef;
    color: #6c757d;
    border-color: #dee2e6;
    transform: none;
}

/* Ocultar filtros A-Z dinámicos por defecto para evitar parpadeos durante la carga */
#contenedor_filtros .container.atoz,
#contenedor_nuevo .container.atoz {
    display: none;
}

/* Estilos para checkboxes de tipo de acceso */
.form-check .check-acceso {
    margin-right: 8px;
    transform: scale(1.1);
}

/* Labels para checkboxes del menú lateral (fondo oscuro) */
.app-sidebar .form-check-label {
    color: white !important;
    font-size: 14px;
    margin-left: 5px;
    cursor: pointer;
}

/* Labels para el panel de configuración (switcher) mantienen color por defecto */
#switcher-canvas .form-check-label {
    color: inherit;
    font-size: 14px;
    cursor: pointer;
}

/* Estilos para mensaje "Sin resultados" */
.no-results-message {
    display: none;
    margin: 40px 0;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.no-results-message h5 {
    color: #6c757d;
    margin-bottom: 10px;
}

.no-results-message p {
    color: #6c757d;
    margin-bottom: 0;
}