:root {
    --magenta-primary: #7d0540;
    --magenta-secundary: #a10a4a;
    --magenta-third: #c90d52;
    --magenta-light: #e65c85;
    --gray-primary: #312f30;
    --gray-secundary: #4b4c4d;
    --gray-third: #6c6d70;
    --gray-light: #bcbdc0;
    --orange-primary: #d5871d;
    --orange-secundary: #ea9521;
    --orange-third: #f4a51a;
    --orange-light: #f7c366;
    --blue-primary: #0a78a3;
    --blue-secundary: #54a0bf;
    --blue-third: #9dc9da;
    --blue-light: #e7f1f6;
    --pink-dane: #be0c4d;
}

.hidden{
    display: none;
}
.error{
    color:red;
    border: 1px #000;
    border-style:dashed;
}

.alert-error-login {
    /* Tipografía y tamaño */
    font-family: inherit; /* Usa la misma que el formulario */
    font-size: 0.9rem;    /* Un poco más pequeña que el placeholder */
    font-weight: 500;
    
    /* Colores (manteniendo el tono suave de tu captura) */
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
    
    /* Alineación y forma */
    border-radius: 4px;   /* Mismo redondeo que tus inputs */
    padding: 10px 15px;
    margin-top: 15px;
    text-align: center;
    width: 100%;          /* Para que se alinee con el botón Ingresar */
    display: inline-block;
}

.modal {
    z-index: 1051 !important;    
}
.modal-content {
    width: auto;
}

.tabs.is-boxed a:hover {
    background-color: white;
    border-bottom-color: #dbdbdb;
    color: #000000;
}

.color-bg-blue-main {
    background-color: var(--pink-dane);
}

.logo-govco {
    height: 20px;
}

.strong{
   font-weight: bold;
}

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

.magenta-primary-button {
    background-color: var(--magenta-primary);
    color: white;
}

.magenta-primary-button:hover {
    background-color: var(--magenta-primary);
    color: white;
}

.magenta-secundary-button {
    background-color: var(--magenta-secundary);
    color: white;
}

.magenta-secundary-button:hover {
    background-color: var(--magenta-secundary);
    color: white;
}

.magenta-third-button {
    background-color: var(--magenta-third);
    color: white;
}

.magenta-third-button:hover {
    background-color: var(--magenta-third);
    color: white;
}

.magenta-light-button {
    background-color: var(--magenta-light);
    color: white;
}

.magenta-light-button:hover {
    background-color: var(--magenta-light);
    color: white;
}


.orange-primary-button {
    background-color: var(--orange-primary);
    color: white;
}

.orange-primary-button:hover {
    background-color: var(--orange-primary);
    color: white;
}

.orange-secundary-button {
    background-color: var(--orange-secundary);
    color: white;
}

.orange-secundary-button:hover {
    background-color: var(--orange-secundary);
    color: white;
}

.orange-third-button {
    background-color: var(--orange-third);
    color: white;
}

.orange-third-button:hover {
    background-color: var(--orange-third);
    color: white;
}

.orange-light-button {
    background-color: var(--orange-light);
    color: white;
}

.orange-light-button:hover {
    background-color: var(--orange-light);
    color: white;
}

.blue-primary-button {
    background-color: var(--blue-primary);
    color: white;
}

.blue-primary-button:hover {
    background-color: var(--blue-primary);
    color: white;
}

.blue-secundary-button {
    background-color: var(--blue-secundary);
    color: white;
}

.blue-secundary-button:hover {
    background-color: var(--blue-secundary);
    color: white;
}

.blue-third-button {
    background-color: var(--blue-third);
    color: white;
}

.blue-third-button:hover {
    background-color: var(--blue-third);
    color: white;
}

.blue-light-button {
    background-color: var(--blue-light);
    color: rgb(0, 0, 0);
}

.blue-light-button-sin {
    background-color: white;
    color: rgb(0, 0, 0);
    border: 2px solid blue;
    border-radius: 10px; 
}

.white-button {
    background-color: white;
    color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 0, 0);
}


.blue-light-button:hover {
    background-color: var(--blue-light);
    color: rgb(0, 0, 0);
}

.pink-dane-button {
    background-color: var(--pink-dane);
    color: white;
}

.pink-dane-button:hover {
    background-color: var(--pink-dane);
    color: white;
}

.gray-primary-button {
    background-color: var(--gray-primary);
    color: white;
}

.gray-primary-button:hover {
    background-color: var(--gray-primary);
    color: white;
}

.gray-secundary-button {
    background-color: var(--gray-secundary);
    color: white;
}

.gray-secundary-button:hover {
    background-color: var(--gray-secundary);
    color: white;
}

.gray-third-button {
    background-color: var(--gray-third);
    color: white;
}

.gray-third-button:hover {
    background-color: var(--gray-third);
    color: white;
}

.gray-light-button {
    background-color: var(--gray-light);
    color: white;
}

.gray-light-button:hover {
    background-color: var(--gray-light);
    color: white;
}

.white-title {
    background-color: rgb(245, 245, 245);
    color: black;
}


.text-muted {
    --bs-text-opacity: 1;
    color: #000000 !important;
}

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    accent-color: var(--magenta-primary);
}

/* Cambiar color de fondo del acordeón seleccionado */
.accordion-button:not(.collapsed) {
    background-image: linear-gradient(180deg, var(--magenta-primary) 0%, var(--magenta-light) 100%);
    color: white;
    box-shadow: none;
}

/* Cambiar color de borde cuando el acordeón está abierto */
.accordion-button:not(.collapsed)::after {
    background-color: var(--magenta-primary); /* Magenta institucional */
}


.magenta-secundary-button-degrade {
    background-image: linear-gradient(180deg, var(--magenta-primary) 0%, var(--magenta-light) 100%);
    color: white;
    border: none; /* Elimina cualquier borde por defecto */
}

/* Si deseas también eliminar el box-shadow por defecto */
.tile.is-child.notification.magenta-secundary-button {
    box-shadow: none;
}

.magenta-secundary-button-degradeV {
    background-image: linear-gradient(135deg, var(--magenta-primary) 0%, var(--magenta-light) 100%);
    color: white;
    border: none; /* Elimina cualquier borde por defecto */
}



/* PARA EL MENU */
.hidden {
    display: none;
}

.error {
    color: red;
    border: 1px #000;
    border-style: dashed;
}

/* Estilos del Sidebar */
.sidebar {
    background-color: rgba(125, 5, 64, 0.85); /* Magenta institucional */
    padding: 20px;
    height: 100vh;
    transition: width 0.3s;
    position: relative;
    width: 250px; /* Ancho por defecto */
    overflow: hidden; /* Para manejar el contenido al colapsar */
}

.sidebar.collapsed {
    width: 70px; /* Ancho reducido */
}

.logo-container {
    text-align: center;
    margin-bottom: 20px; /* Separación del logo con el mensaje */
}

.logo-container img {
    max-width: 80%; /* Tamaño del logo */
    height: auto;
}

.welcome-message {
    color: white;
    text-align: center;
    margin-bottom: 20px; /* Espaciado inferior */
    font-size: 16px;
    transition: opacity 0.3s, transform 0.3s;
}

.sidebar.collapsed .welcome-message {
    opacity: 0;
    transform: translateY(-20px); /* Ocultar y desplazar el mensaje */
}

.btn-toggle {
    background-color: transparent;
    border: none;
    color: black; /* Cambiar el color del ícono a negro */
    font-size: 24px; /* Aumentar el tamaño del ícono */
    position: absolute;
    top: 15px;
    right: -15px; /* Ajustar posición para que se vea en el borde derecho */
    cursor: pointer;
    z-index: 1001; /* Asegurar que esté por encima de otros elementos */
    transition: transform 0.3s;
}

.btn-toggle:hover {
    transform: scale(1.2); /* Efecto de agrandamiento al pasar el mouse */
}

.sidebar.collapsed .btn-toggle {
    right: -15px; /* Mantener posición al colapsar */
}

.btn-toggle i {
    background-color: #f0f0f0; /* Fondo claro para contraste */
    border-radius: 50%;
    padding: 5px;
}

/* Estilos de los enlaces del menú */
.sidebar .nav-link {
    color: white;
    font-size: 16px;
    padding: 15px 10px;
    margin: 5px 0;
    border-radius: 4px;
    transition: background-color 0.3s ease, padding-left 0.3s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.is-active {
    background-color: #a10a4a; /* Magenta más claro */
    color: white;
}

.menu-text {
    display: inline-block;
    transition: opacity 0.3s, margin-left 0.3s;
}

.sidebar.collapsed .menu-text {
    opacity: 0;
    margin-left: -150px;
}

.sidebar.collapsed .nav-link {
    padding-left: 20px;
}

.icon {
    margin-right: 10px;
}

.sidebar.collapsed .icon {
    margin-right: 0;
}

/* Tooltip para el Sidebar */
.sidebar .nav-link[title] {
    position: relative;
}

.sidebar .nav-link[title]::before {
    content: attr(title);
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background-color: black;
    color: white;
    padding: 5px 8px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 1000;
}

.sidebar.collapsed .nav-link[title]:hover::before {
    opacity: 1;
}

.sidebar .logo-expanded {
    display: block;
}

.sidebar.collapsed .logo-expanded {
    display: none;
}

.sidebar.collapsed .logo-collapsed {
    display: block;
    width: 60px;
    height: auto; 
    margin-bottom: 20px;
}

.logo-collapsed {
    display: none;
}


/* Colapsar el menú automáticamente en pantallas pequeñas */
@media (max-width: 1500px) {
    .sidebar {
        width: 70px;
    }

    .sidebar .welcome-message,
    .sidebar .menu-text {
        opacity: 0;
        margin-left: -150px;
    }

    .sidebar .nav-link {
        padding-left: 20px;
    }

    .sidebar .logo-expanded {
        display: block;
    }
    
    .sidebar.collapsed .logo-expanded {
        display: none;
    }
    
    .sidebar.collapsed .logo-collapsed {
        display: block;
        width: 60px;
        height: auto; 
        margin-bottom: 20px;
    }
    
    .logo-collapsed {
        display: none;
    }
}