.imagendelfondo {
    background-image: url('../img/5.jpg'); /* Sin el / inicial para que busque desde la raíz */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    margin: 0;
}
:root {
            --classic-blue: #001aff;
            --light-bg: #f0f2f5;
        }
        /* Navbar Superior */
        .navbar-classic {
            background-color: var(--classic-blue);
        }
        .navbar-classic .nav-link, .navbar-classic .navbar-brand {
            color: white !important;
        }
        /* Contenedor de Búsqueda */
        .search-card {
            border-radius: 4px;
            border: 1px solid #ccc;
            background-color: #e9ecef70;
            padding: 40px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-top: 10vh;
        }
        .classic-title {
        background: linear-gradient(90deg, #004e92, #000428); /* Azules profundos */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}
        /* Input y Botón Cuadrados */
        .input-group-text {
            background-color: white;
            border-right: none;
        }
        .search-input {
            border-left: none;
            border-radius: 0;
        }
        .search-input:focus {
            box-shadow: none;
            border-color: #dee2e6;
        }
        .btn-search {
            background-color: var(--classic-blue);
            color: white;
            border-radius: 0;
            padding: 0 30px;
            text-transform: uppercase;
            font-weight: bold;
        }
        .btn-trans{
            background-color: #00042800;
        }
        .btn-search:hover {
            background-color: #0051ff;
            color: white;
        }
        /* Footer */
        footer {
            margin-top: auto;
            background-color: #0855a13b;
            padding: 20px 0;
            font-size: 0.9rem;
            color: #ffffff;
            border-top: 1px solid #ddd;
        }
        .secondary-links a {
            text-decoration: none;
            color: rgba(9, 86, 202, 0.747)
        }
        .colorbarrasup {
            background-color: #ffffff81;
            outline: 2px solid #e7e7e7; /* Grosor, estilo y color */
        }

        .colordelfondo {
    background-color: #120963
}
/* maraña arrecha */
/* Estado normal del botón */
.btn-iuptm {
    background-color: #007bff; /* El azul que quieras al inicio */
    color: white;
    border: none;
    transition: all 0.3s ease; /* Para que el cambio de color sea suave */
}

/* Estado cuando pasas el mouse (HOVER) */
.btn-iuptm:hover {
    background-color: #004e92; /* AQUÍ PONES TU AZUL PERSONALIZADO */
    color: #e0f2fe; /* Color de letra un poco más claro al pasar el mouse */
    transform: translateY(-2px); /* Un pequeño salto hacia arriba para que se vea Pro */
    box-shadow: 0 5px 15px rgba(0, 78, 146, 0.3); /* Sombra suave azul */
}

.contenedorlimit{
    height: 200px;
    width: 100%;
}

.card-custom {
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
.colordelfondo2{
    background-color: #cfddeb;
    background-image: url(img/5.jpg);
}

.colorbarrader{
    background-color: #bbb9b95e;
}
.colordelperfil{
    background-color: #07235877;
}
.colordelsubidor{
    background-color: #313336bd;
}
.maraña{
    color: #28000000;
}
.colorcard{
    background-color: #ff0202;
}
.colorcard2{
    background-color: #7d8cc000;
}
.colorarchi{
    background-color: #7d8cc000
}

/* 1. El contenedor donde está la barra (la parte blanca/gris de fondo) */
::-webkit-scrollbar {
    width: 10px; /* Ancho de la barra */
    background-color: rgba(0, 0, 0, 0.1); /* Color de fondo muy suave o transparente */
}

/* 2. La barrita que se mueve (el scroll) */
::-webkit-scrollbar-thumb {
    background: #465263; /* Aquí pon el color azul de tus botones */
    border-radius: 10px; /* Para que sea redondita */
    border: 2px solid transparent; /* Crea un efecto de separación */
    background-clip: content-box;
}

/* 3. Cuando pasas el mouse por encima de la barrita */
::-webkit-scrollbar-thumb:hover {
    background: #ffffff80; /* Un azul más oscuro al pasar el mouse */
}

/* BARRA DESPLEGABLE */
/* Transición suave para la barra */
.sidebar {
    transition: all 0.3s ease;
    overflow-x: hidden;
    white-space: nowrap;
}

/* Estado cuando la barra está colapsada */
.sidebar.collapsed {
    width: 75px !important;
}

/* Ocultar el texto de los botones pero dejar el icono visible */
.sidebar.collapsed .nav-link span, 
.sidebar.collapsed .btn span,
.sidebar.collapsed .alert,
.sidebar.collapsed hr,
.sidebar.collapsed br {
    display: none;
}

/* Ajuste para que el icono se vea centrado en modo contraído */
.sidebar.collapsed .btn, .sidebar.collapsed .nav-link {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.sidebar.collapsed i {
    margin: 0 !important;
    font-size: 1.2rem;
}


/* BARRA DESPLEGABLE */

/* ANIMACION DE TRANSICION (TUS ARCHIVOS, ¿crud? */
/* Definimos la animación */
@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateY(10px); /* Viene un poquito desde abajo */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Creamos la clase para aplicar */
.transicion-suave {
    animation: aparecer 0.5s ease-out;
}

.scrolldelbuscador{
    max-height: 500px;
    overflow-y: auto;
    overflow-x: 
    hidden; padding-right: 0px;
}
/* ANIMACION DE TRANSICION (TUS ARCHIVOS, ¿crud? */