@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.bundle.scp.css';

/* /Layout/MainLayout.razor.rz.scp.css */
/* Define el estilo general de la p�gina */
.page[b-mw5kw0ilsn] {
    display: flex;
    height: 100vh;
    /*margin-left: 160px;*/ /* Ajusta el valor seg�n el ancho de la barra lateral colapsada */
    /*    transition: margin-left 0.3s ease;*/
}

    .page.collapsed[b-mw5kw0ilsn] {
        /*margin-left: 60px;*/ /* Ajusta el valor seg�n el ancho de la barra lateral colapsada */
    }

/* Estilos para la barra lateral */
.sidebar[b-mw5kw0ilsn] {
    display: block;
    width: 210px;
    background-color: #f0f0f0;
    transition: width 0.3s ease;
}

    .sidebar.collapse[b-mw5kw0ilsn] {
        width: 50px;
        transition: width 0.3s ease;
        /*width: 160px;*/ /* Ancho de la barra lateral colapsada */
        /*        overflow: hidden;*/
    }

/* Ajustes para el contenido principal */
main[b-mw5kw0ilsn] {
    flex-grow: 1;
    display: block;
    justify-content: center;
    align-items: flex-start;
    padding: 0rem;
}

.content[b-mw5kw0ilsn] {
    max-width: 100%;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Estilos adicionales para ajustar el espaciado en la vista colapsada */
/*.page.collapsed .content {
    padding-left: 2rem;
}*/
/* /Layout/NavMenu.razor.rz.scp.css */
.icon[b-9jw3y9bunh] {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
}

    .icon.rotate[b-9jw3y9bunh] {
        transform: rotate(180deg);
    }



/* Ajuste del ancho del men� colapsado */
.nav-scrollable.collapse[b-9jw3y9bunh] {
    width: 50px; /* Ancho cuando el men� est� colapsado, solo �conos visibles */
    transition: width 0.3s ease;
}

.nav-scrollable.expand[b-9jw3y9bunh] {
    width: 250px; /* Ancho cuando el men� est� expandido */
    transition: width 0.3s ease;
}

/* Ocultar el texto en los enlaces cuando el men� est� colapsado */
.nav-scrollable.collapse .nav-link .text[b-9jw3y9bunh],
.nav-scrollable.collapse .sub-nav-link .text[b-9jw3y9bunh] {
    display: none;
}

.nav-scrollable.expand .nav-link .text[b-9jw3y9bunh],
.nav-scrollable.expand .sub-nav-link .text[b-9jw3y9bunh] {
    display: inline;
}

/* Estilo de los enlaces en el submen� para que queden centrados en modo colapsado */
.nav-item .nav-link[b-9jw3y9bunh],
.nav-item .sub-nav-link[b-9jw3y9bunh] {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Para expandido */
    /*padding: 0.75rem;*/
    transition: padding 0.3s ease;
}

.nav-scrollable.collapse .nav-item .nav-link[b-9jw3y9bunh],
.nav-scrollable.collapse .nav-item .sub-nav-link[b-9jw3y9bunh] {
    justify-content: center; /* Centra los �conos en modo colapsado */
}

/* Quitar borde azul en todos los botones y enlaces del men� */
.no-outline[b-9jw3y9bunh],
.nav-link[b-9jw3y9bunh],
.nav-item .sub-nav-link[b-9jw3y9bunh] {
    outline: none;
    box-shadow: none;
}

    /* Eliminar borde azul en todos los estados de enfoque y activaci�n */
    .no-outline:focus[b-9jw3y9bunh],
    .no-outline:active[b-9jw3y9bunh],
    .no-outline:focus-visible[b-9jw3y9bunh] {
        outline: none !important;
        box-shadow: none !important;
    }

/* Submen� por defecto (colapsado) */
.nav-scrollable .submenu[b-9jw3y9bunh] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding-left 0.3s ease;
    background-color: #f0f0f0; /* Color base, que se sobreescribe en show */
    padding-left: 0;
}

    /* Cuando el submen� se expande */
    .nav-scrollable .submenu.show[b-9jw3y9bunh] {
        max-height: 500px; /* Altura m�xima para la animaci�n */
        background-color: #f0f0f0; /* Color distinto para el submen� expandido */
        padding-left: 15px; /* Leve indentaci�n al expandirse */
    }


/* Estilo de los enlaces en el submen� */
.nav-item .sub-nav-link[b-9jw3y9bunh] {
    display: flex;
    align-items: center;
    padding: 5px 15px;
    color: #333;
    text-decoration: none !important; /* Elimina la l�nea debajo de los submen�s */
}

    .nav-item .sub-nav-link:hover[b-9jw3y9bunh] {
        background-color: #f0f0f0;
    }

    /* A�adir margen a los iconos del submen� */
    .nav-item .sub-nav-link .bi[b-9jw3y9bunh] {
        margin-right: 8px;
    }

/* Otros estilos preexistentes */
.navbar-toggler[b-9jw3y9bunh] {
    background-color: transparent;
    color: #404040;
    border: none;
}

.top-row[b-9jw3y9bunh] {
    height: 3.5rem;
    background-color: #f0f0f0;
}

.navbar-brand[b-9jw3y9bunh] {
    font-size: 1.1rem;
    color: #404040;
}

.navbar-toggler-icon[b-9jw3y9bunh] {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    position: relative;
}

    .navbar-toggler-icon[b-9jw3y9bunh]::before,
    .navbar-toggler-icon[b-9jw3y9bunh]::after,
    .navbar-toggler-icon div[b-9jw3y9bunh] {
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        background-color: black;
        position: absolute;
        left: 0;
        transition: all 0.3s;
    }

    .navbar-toggler-icon[b-9jw3y9bunh]::before {
        top: 0;
    }

    .navbar-toggler-icon div[b-9jw3y9bunh] {
        top: 50%;
        transform: translateY(-50%);
    }

    .navbar-toggler-icon[b-9jw3y9bunh]::after {
        bottom: 0;
    }

.bi[b-9jw3y9bunh] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-9jw3y9bunh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-9jw3y9bunh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-9jw3y9bunh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-9jw3y9bunh] {
    font-size: 0.9rem;
    padding-bottom: 1rem;
}

    .nav-item:first-of-type[b-9jw3y9bunh] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-9jw3y9bunh] {
        padding-bottom: 1rem;
    }

    .nav-item[b-9jw3y9bunh]  a {
        color: #404040;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 1rem;
        gap: 15px;
        text-decoration: none !important;
    }

        .nav-item[b-9jw3y9bunh]  a.active {
            background-color: #f0f0f0;
            color: #404040;
        }

        .nav-item[b-9jw3y9bunh]  a:hover {
            background-color: #808080;
            color: #404040;
        }

/* Media query para pantallas grandes */
@media (min-width: 641px) {
    .navbar-toggler[b-9jw3y9bunh] {
        display: none;
        color: #404040;
        border: none;
    }

    .collapse[b-9jw3y9bunh] {
        display: block;
    }

    .nav-scrollable[b-9jw3y9bunh] {
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Layout/NotificationBar.razor.rz.scp.css */
body[b-dqn1u1rvw0] {
}

.notification-bar[b-dqn1u1rvw0] {
    background-color: #dff0d8; /* Color de fondo */
    color: #3c763d; /* Color del texto */
    border: 1px solid #d6e9c6;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    margin: 10px 0;
    position: relative;
    opacity: 0; /* Comienza oculta */
    animation: fadeIn-b-dqn1u1rvw0 2s forwards; /* Aparece con la animación */
}

/* Animación de desvanecimiento */
@keyframes fadeIn-b-dqn1u1rvw0 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.notification-bar i[b-dqn1u1rvw0] {
    color: #3c763d; /* Color del icono */
    margin-right: 10px;
    font-size: 18px;
}

.notification-bar span[b-dqn1u1rvw0] {
    flex: 1;
}

.close-btn[b-dqn1u1rvw0] {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #3c763d;
    cursor: pointer;
    margin-left: 15px;
}
/* /Layout/ToolsBar.razor.rz.scp.css */
body[b-2tha32ler1] {

}

.action-bar[b-2tha32ler1] {
    display: flex;
    gap: 15px;
    padding: 10px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
    align-items: center;
}

    .action-bar button[b-2tha32ler1] {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        font: inherit;
        color: #2b579a;
        cursor: pointer;
    }

    .action-bar button:hover[b-2tha32ler1] {
        text-decoration: underline;
    }

    .action-bar button.mover-derecha[b-2tha32ler1] {
    margin-left: auto;
}



/* Media query para pantallas de 768px o menos (dispositivos móviles) */
@media (max-width: 768px) {
    .action-bar a span[b-2tha32ler1] {
        display: none; /* Oculta el texto en pantallas pequeñas */
    }
}
/* /Layout/Tools/FilterHermanos.razor.rz.scp.css */


/* Estilos para el contenedor con animación */
.filter-container[b-voxv3nq0go] {
    margin-top: 5px;
    width: 100%;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-sizing: border-box;
    position: relative;
}

.filter-row[b-voxv3nq0go] {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio uniforme entre componentes */
    margin-bottom: 15px; /* Espacio entre filas */
    width: 90%; /* Los componentes ocupan el 90% del contenedor */
    margin: 0 auto; /* Centrar en el contenedor padre */
}

    .filter-row select[b-voxv3nq0go], .filter-row input[b-voxv3nq0go] {
        padding: 10px;
        font-size: 1rem;
        border-radius: 8px;
        border: 1px solid #ccc;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* Especificar proporciones para cada InputSelect */
    .filter-row .form-select:first-child[b-voxv3nq0go], /* Primer InputSelect */
    .filter-row .form-select:nth-child(3)[b-voxv3nq0go] { /* Tercer InputSelect */
        flex: 2; /* Doble de ancho que el segundo */
    }

    .filter-row .form-select:nth-child(2)[b-voxv3nq0go] { /* Segundo InputSelect */
        flex: 1; /* La mitad del ancho del primero y tercero */
    }

    .filter-row .form-select[b-voxv3nq0go] {
        min-width: 0; /* Prevenir que crezcan más de lo necesario */
    }


.add-btn[b-voxv3nq0go], .apply-btn[b-voxv3nq0go] {
    background-color: #3498db;
    color: #fff;
    border: none;
    padding: 12px 20px;
    margin-top: 20px;
    cursor: pointer;
    border-radius: 8px;
    font-weight: bold;
    transition: background-color 0.3s;
    width: auto;
}

    .add-btn:hover[b-voxv3nq0go], .apply-btn:hover[b-voxv3nq0go] {
        background-color: #2980b9;
    }

.close-btn[b-voxv3nq0go] {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #3c763d;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Action Buttons */
.action-button[b-voxv3nq0go] {
    padding: 6px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 3px; /* Ajuste mínimo de separación */
    transition: background-color 0.3s ease;

}

    .action-button.delete[b-voxv3nq0go] {
        background-color: #fbeaea; /* Fondo claro para el botón de eliminación */
        color: #d9534f;
    }


    .action-button.delete:hover[b-voxv3nq0go] {
        background-color: #f8d7da;
    }
/* /Layout/Tools/GenericGrid.razor.rz.scp.css */
body[b-snksmgufo0] {
}

/* Table Styles */
table[b-snksmgufo0] {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

thead[b-snksmgufo0] {
    background-color: #f0f0f0; /* Color de fondo claro en la cabecera */
    color: #333; /* Color de texto gris para la cabecera */
}

    thead th[b-snksmgufo0] {
        padding: 12px 15px;
        text-align: left;
        position: relative;
    }

.filter-icon[b-snksmgufo0] {
    margin-left: 8px;
    font-size: 14px;
    color: #6c757d;
    cursor: pointer;
}

tbody tr[b-snksmgufo0] {
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease;
}

    tbody tr:hover[b-snksmgufo0] {
        background-color: #f9fafb;
    }

tbody td[b-snksmgufo0] {
    padding: 12px 15px;
    text-align: left;
}

strong[b-snksmgufo0] {
    font-weight: bold;
    color: #333;
}

/* Action Buttons */
.action-button[b-snksmgufo0] {
    padding: 6px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 3px; /* Ajuste mínimo de separación */
    transition: background-color 0.3s ease;
}

    .action-button.edit[b-snksmgufo0] {
        background-color: #e9f5ff; /* Fondo claro para el botón de edición */
        color: #0078d4;
    }

    .action-button.delete[b-snksmgufo0] {
        background-color: #fbeaea; /* Fondo claro para el botón de eliminación */
        color: #d9534f;
    }

    .action-button.edit:hover[b-snksmgufo0] {
        background-color: #cce7ff;
    }

    .action-button.delete:hover[b-snksmgufo0] {
        background-color: #f8d7da;
    }

.table-footer[b-snksmgufo0] {
    text-align: center;
    font-size: 12px;
    color: #555;
    padding: 10px;
    font-style: italic;
    border-top: 1px solid #ddd;
    background-color: #f9f9f9;
}
/* /Layout/Tools/GenericGridEx.razor.rz.scp.css */
body[b-ppqpl21lix] {
}

/* 1. Modificar la tabla principal para layout fijo */
table[b-ppqpl21lix] {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-size: small;
    table-layout: fixed; /* NUEVO: Layout fijo para columnas */
}

/* 2. NUEVAS clases para colgroup */
.fixed-layout-table[b-ppqpl21lix] {
    table-layout: fixed;
}

.selection-col[b-ppqpl21lix] {
    width: 40px;
}

.actions-col[b-ppqpl21lix] {
    width: 120px;
}

thead[b-ppqpl21lix] {
    background-color: #f0f0f0; /* Color de fondo claro en la cabecera */
    color: #333; /* Color de texto gris para la cabecera */
}

    thead th[b-ppqpl21lix] {
        padding: 8px 9px;
        text-align: left;
        position: relative;
    }

.filter-icon[b-ppqpl21lix] {
    margin-left: 8px;
    font-size: 14px;
    color: #6c757d;
    cursor: pointer;
}

tbody tr[b-ppqpl21lix] {
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease;
}

    tbody tr:hover[b-ppqpl21lix] {
        background-color: #74c97b;
    }

tbody td[b-ppqpl21lix] {
    padding: 12px 15px;
    text-align: left;
}

strong[b-ppqpl21lix] {
    font-weight: bold;
    color: #333;
}

/* Action Buttons */
.action-button[b-ppqpl21lix] {
    padding: 6px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 3px; /* Ajuste mínimo de separación */
    transition: background-color 0.3s ease;
}

    .action-button.edit[b-ppqpl21lix] {
        background-color: #e9f5ff; /* Fondo claro para el botón de edición */
        color: #0078d4;
    }

    .action-button.delete[b-ppqpl21lix] {
        background-color: #fbeaea; /* Fondo claro para el botón de eliminación */
        color: #d9534f;
    }

    .action-button.special[b-ppqpl21lix] {
        background-color: #fbeaea; /* Fondo claro para el botón de eliminación */
        color: #d9534f;
    }

    .action-button.edit:hover[b-ppqpl21lix] {
        background-color: #cce7ff;
    }

    .action-button.delete:hover[b-ppqpl21lix] {
        background-color: #f8d7da;
    }

/* wwwroot/css/site.css */

.load-more-footer[b-ppqpl21lix] {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

.load-more-button[b-ppqpl21lix] {
    background: linear-gradient(135deg, #34d399 0%, #3b82f6 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

    .load-more-button:hover[b-ppqpl21lix] {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
    }


.table-responsive[b-ppqpl21lix] {
    width: 100%;
    overflow-x: auto;
}

.editable-cell[contenteditable="true"][b-ppqpl21lix] {
    outline: none;
    background-color: #fdfdfd;
    transition: background 0.2s;
}

    .editable-cell[contenteditable="true"]:focus[b-ppqpl21lix] {
        background-color: #fff8c6;
    }

.elegant-input[b-ppqpl21lix] {
    width: 100%;
    box-sizing: border-box; /* fundamental para que el padding + borde entren en el 100% */
    text-align: left;
    padding: 0.4rem 0.4rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    font-size: small;
    background-color: #fff;
}

    .elegant-input:focus[b-ppqpl21lix] {
        border-color: #3fa445;
        box-shadow: 0 0 0 2px rgba(63, 164, 69, 0.3);
    }

.elegant-input-cell[b-ppqpl21lix] {
    width: 100%;
    box-sizing: border-box; /* fundamental para que el padding + borde entren en el 100% */
    text-align: right;
    padding: 0.1rem 0.2rem;
    border: 1px solid #ccc;
    border-radius: 2px;
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    font-size: medium;
    background-color: #fff;
}

.elegant-input:focus[b-ppqpl21lix] {
    border-color: #3fa445;
    box-shadow: 0 0 0 2px rgba(63, 164, 69, 0.3);
}

.filter-row th[b-ppqpl21lix] {
    padding: 8px 15px;
    background-color: #fafafa;
}

/* Color de fondo suave para filas con precio = 0 */
.highlight-row[b-ppqpl21lix] {
    background-color: #ccc; /* un azul oscuro */
    color: #333 !important;
}

/* Contenedor relativo para poder posicionar el botón */
.cell-editor-wrapper[b-ppqpl21lix] {
    position: relative;
    display: inline-block;
}

    /* Botón pequeño a la izquierda, centrado verticalmente */
    .cell-editor-wrapper .validate-btn[b-ppqpl21lix] {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(-100%, -50%);
        border: none;
        background: #4CAF50;
        color: white;
        font-size: 0.8rem;
        padding: 2px 6px;
        border-radius: 3px;
        cursor: pointer;
    }

    /* Para que el input no choque con el botón, algo de padding */
    .cell-editor-wrapper input[b-ppqpl21lix] {
        padding-left: 1.0em; /* ajusta según el ancho del botón */
        font-size: x-small
    }

/* Ancho fijo y centrado para la columna de checks */
.selection-column[b-ppqpl21lix] {
    width: 20px;
    max-width: 20px; /* ajusta a tu gusto */
    text-align: center; /* centra el checkbox */
    vertical-align: middle;
    /* opcionales */
    padding: 0.15rem;
}

/* 3. NUEVO: Contenedor para encabezados con ellipsis */
.header-content[b-ppqpl21lix] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-text[b-ppqpl21lix] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 8px;
}


.sortable-header[b-ppqpl21lix] {
    cursor: pointer;
    overflow: hidden;
}

.cell-content[b-ppqpl21lix] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* 4. Bordes punteados azules en celdas editables */
td.editable-cell[b-ppqpl21lix] {
    /* usamos outline para no romper el border-collapse y que sea suave */
    outline: 1px dotted #333;
    outline-offset: -2px; /* para que el outline quede justo en el borde de la celda */
    border-radius: 2px; /* esquinas levemente redondeadas */
}
/* /Layout/Tools/GenericSearchTool.razor.rz.scp.css */
input[type="text"][b-3c86wr4acc] {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

    input[type="text"]:focus[b-3c86wr4acc] {
        outline: none;
        border-color: #5a67d8;
        box-shadow: 0 2px 8px rgba(90, 103, 216, 0.3);
    }

.dropdown[b-3c86wr4acc] {
    width: 150px; /* Ajusta el ancho según lo necesites */
    padding: 5px;
    font-size: 1em;
    min-height: 45px
}


.search-container[b-3c86wr4acc] {
    width: 100%; /* Ahora ocupa todo el ancho del contenedor */
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 5px auto;
}

.search-input-wrapper[b-3c86wr4acc] {
    position: relative;
    flex-grow: 1;
}

.search-input[b-3c86wr4acc] {
    width: 100%;
    padding: 5px 35px 5px 10px; /* Espacio adicional para el botón */
    font-size: 1em;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}


.clear-btn[b-3c86wr4acc] {
    position: absolute;
    right: 5px;
    top: 35%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 1.2em;
    color: #ccc;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

    .clear-btn:hover[b-3c86wr4acc] {
        color: #000;
    }
/* /Layout/TopBar.razor.rz.scp.css */
.top-bar[b-o8ylwk5awq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #e50000; /* El color que deseas */
    padding: 0.5rem 1rem;
    color: #ffffff; /* Cambié a blanco para mejor contraste */
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%; /* Para que ocupe todo el ancho de la pantalla */
}

.left-section[b-o8ylwk5awq], .center-section[b-o8ylwk5awq], .right-section[b-o8ylwk5awq] {
    display: flex;
    align-items: center;
}

.left-section[b-o8ylwk5awq] {
    flex: 1;
    justify-content: flex-start;
}

.center-section[b-o8ylwk5awq] {
    flex: 3; /* Ocupa más espacio para la barra de búsqueda */
    justify-content: center;
}

.right-section[b-o8ylwk5awq] {
    flex: 1;
    justify-content: flex-end;
}

.search-input[b-o8ylwk5awq] {
    width: 100%;
    max-width: 600px; /* Aumenté el tamaño máximo */
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.icon-button[b-o8ylwk5awq], .menu-button[b-o8ylwk5awq] {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.25rem;
    margin: 0 0.5rem;
    display: flex;
    align-items: center;
}

.profile-pic[b-o8ylwk5awq] {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: 0.5rem;
}
/* /Pages/Alumnos/Alumnos.razor.rz.scp.css */
/* General Styles */
body[b-mno5mckt11] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f5f7;
    color: #333;
    margin: 0;
    padding: 0;
}

h3[b-mno5mckt11] {
    color: #5a67d8;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Table Styles */
table[b-mno5mckt11] {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

thead[b-mno5mckt11] {
    background-color: #f0f0f0; /* Color de fondo claro en la cabecera */
    color: #333; /* Color de texto gris para la cabecera */
}

    thead th[b-mno5mckt11] {
        padding: 12px 15px;
        text-align: left;
        position: relative;
    }

.filter-icon[b-mno5mckt11] {
    margin-left: 8px;
    font-size: 14px;
    color: #6c757d;
    cursor: pointer;
}

tbody tr[b-mno5mckt11] {
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease;
}

    tbody tr:hover[b-mno5mckt11] {
        background-color: #f9fafb;
    }

tbody td[b-mno5mckt11] {
    padding: 12px 15px;
    text-align: left;
}

strong[b-mno5mckt11] {
    font-weight: bold;
    color: #333;
}

/* Action Buttons */
.action-button[b-mno5mckt11] {
    padding: 6px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 3px; /* Ajuste mínimo de separación */
    transition: background-color 0.3s ease;
}

    .action-button.edit[b-mno5mckt11] {
        background-color: #e9f5ff; /* Fondo claro para el botón de edición */
        color: #0078d4;
    }

    .action-button.delete[b-mno5mckt11] {
        background-color: #fbeaea; /* Fondo claro para el botón de eliminación */
        color: #d9534f;
    }

    .action-button.edit:hover[b-mno5mckt11] {
        background-color: #cce7ff;
    }

    .action-button.delete:hover[b-mno5mckt11] {
        background-color: #f8d7da;
    }

.table-footer[b-mno5mckt11] {
    text-align: center;
    font-size: 12px;
    color: #555;
    padding: 10px;
    font-style: italic;
    border-top: 1px solid #ddd;
    background-color: #f9f9f9;
}


/* Button Styles */
button[b-mno5mckt11] {
    background-color: #5a67d8;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-right: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

    button:hover[b-mno5mckt11] {
        background-color: #434aa9;
        transform: translateY(-2px);
    }

    button:focus[b-mno5mckt11] {
        outline: none;
        box-shadow: 0 0 8px rgba(90, 103, 216, 0.5);
    }



/* Botones de paginación */
.pagination[b-mno5mckt11] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}

    .pagination button[b-mno5mckt11] {
        background-color: #5a67d8;
        color: white;
        padding: 8px 12px;
        border: none;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

        .pagination button:hover[b-mno5mckt11] {
            background-color: #434aa9;
            transform: translateY(-2px);
        }

        .pagination button:disabled[b-mno5mckt11] {
            background-color: #ddd;
            cursor: not-allowed;
            color: #999;
        }

/* Estilo para el texto de paginación */
.pagination-text[b-mno5mckt11] {
    font-size: 12px;
    color: #333;
    margin: 0 10px;
}
/* Hasta aquí el nuevo código de paginación*/

/* Responsive Design */
@media (max-width: 768px) {
    table[b-mno5mckt11] {
        font-size: 14px;
    }

    input[type="text"][b-mno5mckt11] {
        width: 100%;
        max-width: 100%;
    }

    tbody td[b-mno5mckt11], thead th[b-mno5mckt11] {
        padding: 10px;
    }
}

/* Definir la animación */
@keyframes slideDown-b-mno5mckt11 {
    from {
        transform: translateY(-100%);
        opacity: 1;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* The Close Button */
.close[b-mno5mckt11] {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover[b-mno5mckt11],
    .close:focus[b-mno5mckt11] {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }



button[type="submit"][b-mno5mckt11], button[type="button"][b-mno5mckt11] {
    margin-top: 15px;
    margin-right: 10px;
}

.loader[b-mno5mckt11] {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    animation: spin-b-mno5mckt11 2s linear infinite;
    margin: auto;
    display: block;
}

@keyframes spin-b-mno5mckt11 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* /Pages/Alumnos/EdicionAlumnos.razor.rz.scp.css */
/* Estilo del contenedor del formulario de edición */
.edit-form-container[b-ywanxtlxvp] {
    position: fixed;
    top: 50px;
    right: -50%;
    width: 50%;
    height: 90%;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    transition: right 0.3s ease-in-out;
    padding: 20px;
    overflow-y: auto;
}

    .edit-form-container.open[b-ywanxtlxvp] {
        right: 0;
    }

/* Estilo del encabezado del formulario de edición */
.edit-form-header[b-ywanxtlxvp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

    .edit-form-header h2[b-ywanxtlxvp] {
        margin: 0;
    }

.close-btn[b-ywanxtlxvp] {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
}

/* Estilo del contenedor de pestañas */
.tab-container[b-ywanxtlxvp] {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.tab-button[b-ywanxtlxvp] {
    background: none;
    border: none;
    font-size: 1em;
    cursor: pointer;
    padding: 10px;
}

    .tab-button.active[b-ywanxtlxvp] {
        border-bottom: 2px solid #007bff;
        font-weight: bold;
    }

/* Contenido de cada pestaña */
.tab-content[b-ywanxtlxvp] {
    display: none;
    margin-top: 20px;
}

/* Estilo del formulario de edición */
.edit-form[b-ywanxtlxvp] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

    .edit-form .form-group[b-ywanxtlxvp] {
        display: flex;
        flex-direction: column;
    }

    /* Agrupación de los campos según la solicitud */
    .edit-form .form-group-inline[b-ywanxtlxvp] {
        display: flex;
        gap: 20px;
        align-items: center;
    }

        .edit-form .form-group-inline .form-group[b-ywanxtlxvp] {
            flex: 1;
        }

    .edit-form label[b-ywanxtlxvp] {
        font-weight: bold;
        margin-bottom: 5px;
    }

    .edit-form input[b-ywanxtlxvp],
    .edit-form select[b-ywanxtlxvp],
    .edit-form textarea[b-ywanxtlxvp] {
        padding: 10px;
        font-size: 1em;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

/* Estilo de las acciones del formulario */
.edit-form-actions[b-ywanxtlxvp] {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

    .edit-form-actions button[b-ywanxtlxvp] {
        padding: 10px 15px;
        font-size: 1em;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .edit-form-actions .save-btn[b-ywanxtlxvp] {
        background-color: #28a745;
        color: #fff;
    }

    .edit-form-actions .cancel-btn[b-ywanxtlxvp] {
        background-color: #dc3545;
        color: #fff;
    }







.popup[b-ywanxtlxvp] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 80%;
    max-width: 600px;
    height: 80%;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
}

    .popup.open[b-ywanxtlxvp] {
        transform: translate(-50%, -50%) scale(1);
    }

.popup-header[b-ywanxtlxvp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

    .popup-header h3[b-ywanxtlxvp] {
        margin: 0;
    }

.popup-close[b-ywanxtlxvp] {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}

@media (max-width: 768px) {
    .opciones-pago[b-ywanxtlxvp] {
        flex-direction: column;
    }

    .pago-opcion[b-ywanxtlxvp] {
        margin-bottom: 20px;
    }
}

.overlay[b-ywanxtlxvp] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

    .overlay.open[b-ywanxtlxvp] {
        display: block;
    }

.loading[b-ywanxtlxvp] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    display: none;
}

    .loading.open[b-ywanxtlxvp] {
        display: flex;
    }

    .loading .gear[b-ywanxtlxvp] {
        width: 50px;
        height: 50px;
        border: 5px solid #007b5e;
        border-top: 5px solid transparent;
        border-radius: 50%;
        animation: spin-b-ywanxtlxvp 1s linear infinite;
        margin: 0 10px;
    }

@keyframes spin-b-ywanxtlxvp {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* /Pages/Asignaturas/Asignaturas.razor.rz.scp.css */
/* General Styles */
body[b-l5vf517nd3] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f5f7;
    color: #333;
    margin: 0;
    padding: 0;
}

h3[b-l5vf517nd3] {
    color: #5a67d8;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Table Styles */
table[b-l5vf517nd3] {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

thead[b-l5vf517nd3] {
    background-color: #f0f0f0; /* Color de fondo claro en la cabecera */
    color: #333; /* Color de texto gris para la cabecera */
}

    thead th[b-l5vf517nd3] {
        padding: 12px 15px;
        text-align: left;
        position: relative;
    }

.filter-icon[b-l5vf517nd3] {
    margin-left: 8px;
    font-size: 14px;
    color: #6c757d;
    cursor: pointer;
}

tbody tr[b-l5vf517nd3] {
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease;
}

    tbody tr:hover[b-l5vf517nd3] {
        background-color: #f9fafb;
    }

tbody td[b-l5vf517nd3] {
    padding: 12px 15px;
    text-align: left;
}

strong[b-l5vf517nd3] {
    font-weight: bold;
    color: #333;
}

/* Action Buttons */
.action-button[b-l5vf517nd3] {
    padding: 6px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 3px; /* Ajuste mínimo de separación */
    transition: background-color 0.3s ease;
}

    .action-button.edit[b-l5vf517nd3] {
        background-color: #e9f5ff; /* Fondo claro para el botón de edición */
        color: #0078d4;
    }

    .action-button.delete[b-l5vf517nd3] {
        background-color: #fbeaea; /* Fondo claro para el botón de eliminación */
        color: #d9534f;
    }

    .action-button.edit:hover[b-l5vf517nd3] {
        background-color: #cce7ff;
    }

    .action-button.delete:hover[b-l5vf517nd3] {
        background-color: #f8d7da;
    }

.table-footer[b-l5vf517nd3] {
    text-align: center;
    font-size: 12px;
    color: #555;
    padding: 10px;
    font-style: italic;
    border-top: 1px solid #ddd;
    background-color: #f9f9f9;
}


/* Button Styles */
button[b-l5vf517nd3] {
    background-color: #5a67d8;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-right: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

    button:hover[b-l5vf517nd3] {
        background-color: #434aa9;
        transform: translateY(-2px);
    }

    button:focus[b-l5vf517nd3] {
        outline: none;
        box-shadow: 0 0 8px rgba(90, 103, 216, 0.5);
    }



/* Botones de paginación */
.pagination[b-l5vf517nd3] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}

    .pagination button[b-l5vf517nd3] {
        background-color: #5a67d8;
        color: white;
        padding: 8px 12px;
        border: none;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

        .pagination button:hover[b-l5vf517nd3] {
            background-color: #434aa9;
            transform: translateY(-2px);
        }

        .pagination button:disabled[b-l5vf517nd3] {
            background-color: #ddd;
            cursor: not-allowed;
            color: #999;
        }

/* Estilo para el texto de paginación */
.pagination-text[b-l5vf517nd3] {
    font-size: 12px;
    color: #333;
    margin: 0 10px;
}
/* Hasta aquí el nuevo código de paginación*/

/* Responsive Design */
@media (max-width: 768px) {
    table[b-l5vf517nd3] {
        font-size: 14px;
    }

    input[type="text"][b-l5vf517nd3] {
        width: 100%;
        max-width: 100%;
    }

    tbody td[b-l5vf517nd3], thead th[b-l5vf517nd3] {
        padding: 10px;
    }
}

/* Definir la animación */
@keyframes slideDown-b-l5vf517nd3 {
    from {
        transform: translateY(-100%);
        opacity: 1;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* The Close Button */
.close[b-l5vf517nd3] {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover[b-l5vf517nd3],
    .close:focus[b-l5vf517nd3] {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }



button[type="submit"][b-l5vf517nd3], button[type="button"][b-l5vf517nd3] {
    margin-top: 15px;
    margin-right: 10px;
}

.loader[b-l5vf517nd3] {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    animation: spin-b-l5vf517nd3 2s linear infinite;
    margin: auto;
    display: block;
}

@keyframes spin-b-l5vf517nd3 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* /Pages/Asignaturas/EdicionAsignaturas.razor.rz.scp.css */
/* Estilo del contenedor del formulario de edición */



.edit-form-container[b-hpprkvn9y0] {
    position: fixed;
    top: 50px;
    right: -50%;
    width: 50%;
    height: 90%;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    transition: right 0.3s ease-in-out;
    padding: 20px;
    overflow-y: auto;
}

    .edit-form-container.open[b-hpprkvn9y0] {
        right: 0;
    }

/* Estilo del encabezado del formulario de edición */
.edit-form-header[b-hpprkvn9y0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

    .edit-form-header h2[b-hpprkvn9y0] {
        margin: 0;
    }

.close-btn[b-hpprkvn9y0] {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
}

/* Estilo del contenedor de pestañas */
.tab-container[b-hpprkvn9y0] {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.tab-button[b-hpprkvn9y0] {
    background: none;
    border: none;
    font-size: 1em;
    cursor: pointer;
    padding: 10px;
}

    .tab-button.active[b-hpprkvn9y0] {
        border-bottom: 2px solid #007bff;
        font-weight: bold;
    }

/* Contenido de cada pestaña */
.tab-content[b-hpprkvn9y0] {
    display: none;
    margin-top: 20px;
}

/* Estilo del formulario de edición */
.edit-form[b-hpprkvn9y0] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

    .edit-form .form-group[b-hpprkvn9y0] {
        display: flex;
        flex-direction: column;
    }

    /* Agrupación de los campos según la solicitud */
    .edit-form .form-group-inline[b-hpprkvn9y0] {
        display: flex;
        gap: 20px;
        align-items: center;
    }

        .edit-form .form-group-inline .form-group[b-hpprkvn9y0] {
            flex: 1;
        }

    .edit-form label[b-hpprkvn9y0] {
        font-weight: bold;
        margin-bottom: 5px;
    }

    /* Estilo moderno y elegante para los campos de entrada */
    .edit-form input[b-hpprkvn9y0],
    .edit-form select[b-hpprkvn9y0],
    .edit-form textarea[b-hpprkvn9y0] {
        padding: 10px 15px;
        font-size: 1em;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #f9f9f9;
        transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }

        .edit-form input:focus[b-hpprkvn9y0],
        .edit-form select:focus[b-hpprkvn9y0],
        .edit-form textarea:focus[b-hpprkvn9y0] {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
            background-color: #fff;
        }

/* Estilo de las acciones del formulario */
.edit-form-actions[b-hpprkvn9y0] {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

    .edit-form-actions button[b-hpprkvn9y0] {
        padding: 10px 15px;
        font-size: 1em;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .edit-form-actions .save-btn[b-hpprkvn9y0] {
        background-color: #28a745;
        color: #fff;
    }

    .edit-form-actions .cancel-btn[b-hpprkvn9y0] {
        background-color: #dc3545;
        color: #fff;
    }

    .custom-input[b-hpprkvn9y0] {
        padding: 10px 15px;
        font-size: 1em;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #f9f9f9;
        width: 100%;
        transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }

    .custom-input:focus[b-hpprkvn9y0] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
        background-color: #fff;
    }



[b-hpprkvn9y0] .blazor-input-text {
    display: block;
    width: 100%;
    padding: 10px 15px;
    font-size: 1em;
    line-height: 1.5;
    color: #495057;
    background-color: #f9f9f9;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 6px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

    [b-hpprkvn9y0] .blazor-input-text:focus {
        color: #495057;
        background-color: #fff;
        border-color: #007bff;
        outline: 0;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
    }

[b-hpprkvn9y0] .valid.modified:not([type=checkbox]) {
    outline: none;
    border-color: #28a745;
}

[b-hpprkvn9y0] .invalid {
    outline: none;
    border-color: #dc3545;
}

[b-hpprkvn9y0] .validation-summary {
    background-color: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.5);
    color: #ff0000;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    animation: fadeIn-b-hpprkvn9y0 0.5s ease-in-out;
}

[b-hpprkvn9y0] .validation-message {
    color: #d9534f;
    font-size: 0.875em;
    margin-top: 5px;
    animation: fadeIn-b-hpprkvn9y0 0.5s ease-in-out;
}

@keyframes fadeIn-b-hpprkvn9y0 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Pages/Cursos/Cursos.razor.rz.scp.css */
/* General Styles */
body[b-y8482g8k5t] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f5f7;
    color: #333;
    margin: 0;
    padding: 0;
}

h3[b-y8482g8k5t] {
    color: #5a67d8;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Table Styles */
table[b-y8482g8k5t] {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

thead[b-y8482g8k5t] {
    background-color: #f0f0f0; /* Color de fondo claro en la cabecera */
    color: #333; /* Color de texto gris para la cabecera */
}

    thead th[b-y8482g8k5t] {
        padding: 12px 15px;
        text-align: left;
        position: relative;
    }

.filter-icon[b-y8482g8k5t] {
    margin-left: 8px;
    font-size: 14px;
    color: #6c757d;
    cursor: pointer;
}

tbody tr[b-y8482g8k5t] {
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease;
}

    tbody tr:hover[b-y8482g8k5t] {
        background-color: #f9fafb;
    }

tbody td[b-y8482g8k5t] {
    padding: 12px 15px;
    text-align: left;
}

strong[b-y8482g8k5t] {
    font-weight: bold;
    color: #333;
}

/* Action Buttons */
.action-button[b-y8482g8k5t] {
    padding: 6px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 3px; /* Ajuste mínimo de separación */
    transition: background-color 0.3s ease;
}

    .action-button.edit[b-y8482g8k5t] {
        background-color: #e9f5ff; /* Fondo claro para el botón de edición */
        color: #0078d4;
    }

    .action-button.delete[b-y8482g8k5t] {
        background-color: #fbeaea; /* Fondo claro para el botón de eliminación */
        color: #d9534f;
    }

    .action-button.edit:hover[b-y8482g8k5t] {
        background-color: #cce7ff;
    }

    .action-button.delete:hover[b-y8482g8k5t] {
        background-color: #f8d7da;
    }

.table-footer[b-y8482g8k5t] {
    text-align: center;
    font-size: 12px;
    color: #555;
    padding: 10px;
    font-style: italic;
    border-top: 1px solid #ddd;
    background-color: #f9f9f9;
}


/* Button Styles */
button[b-y8482g8k5t] {
    background-color: #5a67d8;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-right: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

    button:hover[b-y8482g8k5t] {
        background-color: #434aa9;
        transform: translateY(-2px);
    }

    button:focus[b-y8482g8k5t] {
        outline: none;
        box-shadow: 0 0 8px rgba(90, 103, 216, 0.5);
    }



/* Botones de paginación */
.pagination[b-y8482g8k5t] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}

    .pagination button[b-y8482g8k5t] {
        background-color: #5a67d8;
        color: white;
        padding: 8px 12px;
        border: none;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

        .pagination button:hover[b-y8482g8k5t] {
            background-color: #434aa9;
            transform: translateY(-2px);
        }

        .pagination button:disabled[b-y8482g8k5t] {
            background-color: #ddd;
            cursor: not-allowed;
            color: #999;
        }

/* Estilo para el texto de paginación */
.pagination-text[b-y8482g8k5t] {
    font-size: 12px;
    color: #333;
    margin: 0 10px;
}
/* Hasta aquí el nuevo código de paginación*/

/* Responsive Design */
@media (max-width: 768px) {
    table[b-y8482g8k5t] {
        font-size: 14px;
    }

    input[type="text"][b-y8482g8k5t] {
        width: 100%;
        max-width: 100%;
    }

    tbody td[b-y8482g8k5t], thead th[b-y8482g8k5t] {
        padding: 10px;
    }
}

/* Definir la animación */
@keyframes slideDown-b-y8482g8k5t {
    from {
        transform: translateY(-100%);
        opacity: 1;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* The Close Button */
.close[b-y8482g8k5t] {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover[b-y8482g8k5t],
    .close:focus[b-y8482g8k5t] {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }



button[type="submit"][b-y8482g8k5t], button[type="button"][b-y8482g8k5t] {
    margin-top: 15px;
    margin-right: 10px;
}

.loader[b-y8482g8k5t] {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    animation: spin-b-y8482g8k5t 2s linear infinite;
    margin: auto;
    display: block;
}

@keyframes spin-b-y8482g8k5t {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* /Pages/Cursos/EdicionCursos.razor.rz.scp.css */
/* Estilo del contenedor del formulario de edición */



.edit-form-container[b-myhymhs8va] {
    position: fixed;
    top: 50px;
    right: -50%;
    width: 50%;
    height: 90%;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    transition: right 0.3s ease-in-out;
    padding: 20px;
    overflow-y: auto;
}

    .edit-form-container.open[b-myhymhs8va] {
        right: 0;
    }

/* Estilo del encabezado del formulario de edición */
.edit-form-header[b-myhymhs8va] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

    .edit-form-header h2[b-myhymhs8va] {
        margin: 0;
    }

.close-btn[b-myhymhs8va] {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
}

/* Estilo del contenedor de pestañas */
.tab-container[b-myhymhs8va] {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.tab-button[b-myhymhs8va] {
    background: none;
    border: none;
    font-size: 1em;
    cursor: pointer;
    padding: 10px;
}

    .tab-button.active[b-myhymhs8va] {
        border-bottom: 2px solid #007bff;
        font-weight: bold;
    }

/* Contenido de cada pestaña */
.tab-content[b-myhymhs8va] {
    display: none;
    margin-top: 20px;
}

/* Estilo del formulario de edición */
.edit-form[b-myhymhs8va] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

    .edit-form .form-group[b-myhymhs8va] {
        display: flex;
        flex-direction: column;
    }

    /* Agrupación de los campos según la solicitud */
    .edit-form .form-group-inline[b-myhymhs8va] {
        display: flex;
        gap: 20px;
        align-items: center;
    }

        .edit-form .form-group-inline .form-group[b-myhymhs8va] {
            flex: 1;
        }

    .edit-form label[b-myhymhs8va] {
        font-weight: bold;
        margin-bottom: 5px;
    }

    /* Estilo moderno y elegante para los campos de entrada */
    .edit-form input[b-myhymhs8va],
    .edit-form select[b-myhymhs8va],
    .edit-form textarea[b-myhymhs8va] {
        padding: 10px 15px;
        font-size: 1em;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #f9f9f9;
        transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }

        .edit-form input:focus[b-myhymhs8va],
        .edit-form select:focus[b-myhymhs8va],
        .edit-form textarea:focus[b-myhymhs8va] {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
            background-color: #fff;
        }

/* Estilo de las acciones del formulario */
.edit-form-actions[b-myhymhs8va] {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

    .edit-form-actions button[b-myhymhs8va] {
        padding: 10px 15px;
        font-size: 1em;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .edit-form-actions .save-btn[b-myhymhs8va] {
        background-color: #28a745;
        color: #fff;
    }

    .edit-form-actions .cancel-btn[b-myhymhs8va] {
        background-color: #dc3545;
        color: #fff;
    }

    .custom-input[b-myhymhs8va] {
        padding: 10px 15px;
        font-size: 1em;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #f9f9f9;
        width: 100%;
        transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }

    .custom-input:focus[b-myhymhs8va] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
        background-color: #fff;
    }



[b-myhymhs8va] .blazor-input-text {
    display: block;
    width: 100%;
    padding: 10px 15px;
    font-size: 1em;
    line-height: 1.5;
    color: #495057;
    background-color: #f9f9f9;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 6px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

    [b-myhymhs8va] .blazor-input-text:focus {
        color: #495057;
        background-color: #fff;
        border-color: #007bff;
        outline: 0;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
    }

[b-myhymhs8va] .valid.modified:not([type=checkbox]) {
    outline: none;
    border-color: #28a745;
}

[b-myhymhs8va] .invalid {
    outline: none;
    border-color: #dc3545;
}

[b-myhymhs8va] .validation-summary {
    background-color: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.5);
    color: #ff0000;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    animation: fadeIn-b-myhymhs8va 0.5s ease-in-out;
}

[b-myhymhs8va] .validation-message {
    color: #d9534f;
    font-size: 0.875em;
    margin-top: 5px;
    animation: fadeIn-b-myhymhs8va 0.5s ease-in-out;
}

@keyframes fadeIn-b-myhymhs8va {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Pages/Grupos/EdicionGrupos.razor.rz.scp.css */
/* Estilo del contenedor del formulario de edición */



.edit-form-container[b-y2wwpklx7x] {
    position: fixed;
    top: 50px;
    right: -50%;
    width: 50%;
    height: 90%;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    transition: right 0.3s ease-in-out;
    padding: 20px;
    overflow-y: auto;
}

    .edit-form-container.open[b-y2wwpklx7x] {
        right: 0;
    }

/* Estilo del encabezado del formulario de edición */
.edit-form-header[b-y2wwpklx7x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

    .edit-form-header h2[b-y2wwpklx7x] {
        margin: 0;
    }

.close-btn[b-y2wwpklx7x] {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
}

/* Estilo del contenedor de pestañas */
.tab-container[b-y2wwpklx7x] {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.tab-button[b-y2wwpklx7x] {
    background: none;
    border: none;
    font-size: 1em;
    cursor: pointer;
    padding: 10px;
}

    .tab-button.active[b-y2wwpklx7x] {
        border-bottom: 2px solid #007bff;
        font-weight: bold;
    }

/* Contenido de cada pestaña */
.tab-content[b-y2wwpklx7x] {
    display: none;
    margin-top: 20px;
}

/* Estilo del formulario de edición */
.edit-form[b-y2wwpklx7x] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

    .edit-form .form-group[b-y2wwpklx7x] {
        display: flex;
        flex-direction: column;
    }

    /* Agrupación de los campos según la solicitud */
    .edit-form .form-group-inline[b-y2wwpklx7x] {
        display: flex;
        gap: 20px;
        align-items: center;
    }

        .edit-form .form-group-inline .form-group[b-y2wwpklx7x] {
            flex: 1;
        }

    .edit-form label[b-y2wwpklx7x] {
        font-weight: bold;
        margin-bottom: 5px;
    }

    /* Estilo moderno y elegante para los campos de entrada */
    .edit-form input[b-y2wwpklx7x],
    .edit-form select[b-y2wwpklx7x],
    .edit-form textarea[b-y2wwpklx7x] {
        padding: 10px 15px;
        font-size: 1em;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #f9f9f9;
        transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }

        .edit-form input:focus[b-y2wwpklx7x],
        .edit-form select:focus[b-y2wwpklx7x],
        .edit-form textarea:focus[b-y2wwpklx7x] {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
            background-color: #fff;
        }

/* Estilo de las acciones del formulario */
.edit-form-actions[b-y2wwpklx7x] {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

    .edit-form-actions button[b-y2wwpklx7x] {
        padding: 10px 15px;
        font-size: 1em;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .edit-form-actions .save-btn[b-y2wwpklx7x] {
        background-color: #28a745;
        color: #fff;
    }

    .edit-form-actions .cancel-btn[b-y2wwpklx7x] {
        background-color: #dc3545;
        color: #fff;
    }

    .custom-input[b-y2wwpklx7x] {
        padding: 10px 15px;
        font-size: 1em;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #f9f9f9;
        width: 100%;
        transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }

    .custom-input:focus[b-y2wwpklx7x] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
        background-color: #fff;
    }



[b-y2wwpklx7x] .blazor-input-text {
    display: block;
    width: 100%;
    padding: 10px 15px;
    font-size: 1em;
    line-height: 1.5;
    color: #495057;
    background-color: #f9f9f9;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 6px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

    [b-y2wwpklx7x] .blazor-input-text:focus {
        color: #495057;
        background-color: #fff;
        border-color: #007bff;
        outline: 0;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
    }

[b-y2wwpklx7x] .valid.modified:not([type=checkbox]) {
    outline: none;
    border-color: #28a745;
}

[b-y2wwpklx7x] .invalid {
    outline: none;
    border-color: #dc3545;
}

[b-y2wwpklx7x] .validation-summary {
    background-color: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.5);
    color: #ff0000;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    animation: fadeIn-b-y2wwpklx7x 0.5s ease-in-out;
}

[b-y2wwpklx7x] .validation-message {
    color: #d9534f;
    font-size: 0.875em;
    margin-top: 5px;
    animation: fadeIn-b-y2wwpklx7x 0.5s ease-in-out;
}

@keyframes fadeIn-b-y2wwpklx7x {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* /Pages/Grupos/Grupos.razor.rz.scp.css */
/* General Styles */
body[b-y6kgnpalqz] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f5f7;
    color: #333;
    margin: 0;
    padding: 0;
}

h3[b-y6kgnpalqz] {
    color: #5a67d8;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Table Styles */
table[b-y6kgnpalqz] {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

thead[b-y6kgnpalqz] {
    background-color: #f0f0f0; /* Color de fondo claro en la cabecera */
    color: #333; /* Color de texto gris para la cabecera */
}

    thead th[b-y6kgnpalqz] {
        padding: 12px 15px;
        text-align: left;
        position: relative;
    }

.filter-icon[b-y6kgnpalqz] {
    margin-left: 8px;
    font-size: 14px;
    color: #6c757d;
    cursor: pointer;
}

tbody tr[b-y6kgnpalqz] {
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease;
}

    tbody tr:hover[b-y6kgnpalqz] {
        background-color: #f9fafb;
    }

tbody td[b-y6kgnpalqz] {
    padding: 12px 15px;
    text-align: left;
}

strong[b-y6kgnpalqz] {
    font-weight: bold;
    color: #333;
}

/* Action Buttons */
.action-button[b-y6kgnpalqz] {
    padding: 6px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 3px; /* Ajuste mínimo de separación */
    transition: background-color 0.3s ease;
}

    .action-button.edit[b-y6kgnpalqz] {
        background-color: #e9f5ff; /* Fondo claro para el botón de edición */
        color: #0078d4;
    }

    .action-button.delete[b-y6kgnpalqz] {
        background-color: #fbeaea; /* Fondo claro para el botón de eliminación */
        color: #d9534f;
    }

    .action-button.edit:hover[b-y6kgnpalqz] {
        background-color: #cce7ff;
    }

    .action-button.delete:hover[b-y6kgnpalqz] {
        background-color: #f8d7da;
    }

.table-footer[b-y6kgnpalqz] {
    text-align: center;
    font-size: 12px;
    color: #555;
    padding: 10px;
    font-style: italic;
    border-top: 1px solid #ddd;
    background-color: #f9f9f9;
}


/* Button Styles */
button[b-y6kgnpalqz] {
    background-color: #5a67d8;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-right: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

    button:hover[b-y6kgnpalqz] {
        background-color: #434aa9;
        transform: translateY(-2px);
    }

    button:focus[b-y6kgnpalqz] {
        outline: none;
        box-shadow: 0 0 8px rgba(90, 103, 216, 0.5);
    }



/* Botones de paginación */
.pagination[b-y6kgnpalqz] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}

    .pagination button[b-y6kgnpalqz] {
        background-color: #5a67d8;
        color: white;
        padding: 8px 12px;
        border: none;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

        .pagination button:hover[b-y6kgnpalqz] {
            background-color: #434aa9;
            transform: translateY(-2px);
        }

        .pagination button:disabled[b-y6kgnpalqz] {
            background-color: #ddd;
            cursor: not-allowed;
            color: #999;
        }

/* Estilo para el texto de paginación */
.pagination-text[b-y6kgnpalqz] {
    font-size: 12px;
    color: #333;
    margin: 0 10px;
}
/* Hasta aquí el nuevo código de paginación*/

/* Responsive Design */
@media (max-width: 768px) {
    table[b-y6kgnpalqz] {
        font-size: 14px;
    }

    input[type="text"][b-y6kgnpalqz] {
        width: 100%;
        max-width: 100%;
    }

    tbody td[b-y6kgnpalqz], thead th[b-y6kgnpalqz] {
        padding: 10px;
    }
}

/* Definir la animación */
@keyframes slideDown-b-y6kgnpalqz {
    from {
        transform: translateY(-100%);
        opacity: 1;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* The Close Button */
.close[b-y6kgnpalqz] {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover[b-y6kgnpalqz],
    .close:focus[b-y6kgnpalqz] {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }



button[type="submit"][b-y6kgnpalqz], button[type="button"][b-y6kgnpalqz] {
    margin-top: 15px;
    margin-right: 10px;
}

.loader[b-y6kgnpalqz] {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    animation: spin-b-y6kgnpalqz 2s linear infinite;
    margin: auto;
    display: block;
}

@keyframes spin-b-y6kgnpalqz {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* /Pages/Usuarios/EdicionUsuarios.razor.rz.scp.css */
/* Estilo del contenedor del formulario de edición */



.edit-form-container[b-3csq467wfh] {
    position: fixed;
    top: 50px;
    right: -50%;
    width: 50%;
    height: 90%;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    transition: right 0.3s ease-in-out;
    padding: 20px;
    overflow-y: auto;
}

    .edit-form-container.open[b-3csq467wfh] {
        right: 0;
    }

/* Estilo del encabezado del formulario de edición */
.edit-form-header[b-3csq467wfh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

    .edit-form-header h2[b-3csq467wfh] {
        margin: 0;
    }

.close-btn[b-3csq467wfh] {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
}

/* Estilo del contenedor de pestañas */
.tab-container[b-3csq467wfh] {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.tab-button[b-3csq467wfh] {
    background: none;
    border: none;
    font-size: 1em;
    cursor: pointer;
    padding: 10px;
}

    .tab-button.active[b-3csq467wfh] {
        border-bottom: 2px solid #007bff;
        font-weight: bold;
    }

/* Contenido de cada pestaña */
.tab-content[b-3csq467wfh] {
    display: none;
    margin-top: 20px;
}

/* Estilo del formulario de edición */
.edit-form[b-3csq467wfh] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

    .edit-form .form-group[b-3csq467wfh] {
        display: flex;
        flex-direction: column;
    }

    /* Agrupación de los campos según la solicitud */
    .edit-form .form-group-inline[b-3csq467wfh] {
        display: flex;
        gap: 20px;
        align-items: center;
    }

        .edit-form .form-group-inline .form-group[b-3csq467wfh] {
            flex: 1;
        }

    .edit-form label[b-3csq467wfh] {
        font-weight: bold;
        margin-bottom: 5px;
    }

    /* Estilo moderno y elegante para los campos de entrada */
    .edit-form input[b-3csq467wfh],
    .edit-form select[b-3csq467wfh],
    .edit-form textarea[b-3csq467wfh] {
        padding: 10px 15px;
        font-size: 1em;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #f9f9f9;
        transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }

        .edit-form input:focus[b-3csq467wfh],
        .edit-form select:focus[b-3csq467wfh],
        .edit-form textarea:focus[b-3csq467wfh] {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
            background-color: #fff;
        }

/* Estilo de las acciones del formulario */
.edit-form-actions[b-3csq467wfh] {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

    .edit-form-actions button[b-3csq467wfh] {
        padding: 10px 15px;
        font-size: 1em;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .edit-form-actions .save-btn[b-3csq467wfh] {
        background-color: #28a745;
        color: #fff;
    }

    .edit-form-actions .cancel-btn[b-3csq467wfh] {
        background-color: #dc3545;
        color: #fff;
    }

    .custom-input[b-3csq467wfh] {
        padding: 10px 15px;
        font-size: 1em;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #f9f9f9;
        width: 100%;
        transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }

    .custom-input:focus[b-3csq467wfh] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
        background-color: #fff;
    }



[b-3csq467wfh] .blazor-input-text {
    display: block;
    width: 100%;
    padding: 10px 15px;
    font-size: 1em;
    line-height: 1.5;
    color: #495057;
    background-color: #f9f9f9;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 6px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

    [b-3csq467wfh] .blazor-input-text:focus {
        color: #495057;
        background-color: #fff;
        border-color: #007bff;
        outline: 0;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
    }

[b-3csq467wfh] .valid.modified:not([type=checkbox]) {
    outline: none;
    border-color: #28a745;
}

[b-3csq467wfh] .invalid {
    outline: none;
    border-color: #dc3545;
}

[b-3csq467wfh] .validation-summary {
    background-color: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.5);
    color: #ff0000;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    animation: fadeIn-b-3csq467wfh 0.5s ease-in-out;
}

[b-3csq467wfh] .validation-message {
    color: #d9534f;
    font-size: 0.875em;
    margin-top: 5px;
    animation: fadeIn-b-3csq467wfh 0.5s ease-in-out;
}

@keyframes fadeIn-b-3csq467wfh {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Pages/Usuarios/Usuarios.razor.rz.scp.css */
/* General Styles */
body[b-tg0y2kz9us] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f5f7;
    color: #333;
    margin: 0;
    padding: 0;
}

h3[b-tg0y2kz9us] {
    color: #5a67d8;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Table Styles */
table[b-tg0y2kz9us] {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

thead[b-tg0y2kz9us] {
    background-color: #f0f0f0; /* Color de fondo claro en la cabecera */
    color: #333; /* Color de texto gris para la cabecera */
}

    thead th[b-tg0y2kz9us] {
        padding: 12px 15px;
        text-align: left;
        position: relative;
    }

.filter-icon[b-tg0y2kz9us] {
    margin-left: 8px;
    font-size: 14px;
    color: #6c757d;
    cursor: pointer;
}

tbody tr[b-tg0y2kz9us] {
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease;
}

    tbody tr:hover[b-tg0y2kz9us] {
        background-color: #f9fafb;
    }

tbody td[b-tg0y2kz9us] {
    padding: 12px 15px;
    text-align: left;
}

strong[b-tg0y2kz9us] {
    font-weight: bold;
    color: #333;
}

/* Action Buttons */
.action-button[b-tg0y2kz9us] {
    padding: 6px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 3px; /* Ajuste mínimo de separación */
    transition: background-color 0.3s ease;
}

    .action-button.edit[b-tg0y2kz9us] {
        background-color: #e9f5ff; /* Fondo claro para el botón de edición */
        color: #0078d4;
    }

    .action-button.delete[b-tg0y2kz9us] {
        background-color: #fbeaea; /* Fondo claro para el botón de eliminación */
        color: #d9534f;
    }

    .action-button.edit:hover[b-tg0y2kz9us] {
        background-color: #cce7ff;
    }

    .action-button.delete:hover[b-tg0y2kz9us] {
        background-color: #f8d7da;
    }

.table-footer[b-tg0y2kz9us] {
    text-align: center;
    font-size: 12px;
    color: #555;
    padding: 10px;
    font-style: italic;
    border-top: 1px solid #ddd;
    background-color: #f9f9f9;
}


/* Button Styles */
button[b-tg0y2kz9us] {
    background-color: #5a67d8;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-right: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

    button:hover[b-tg0y2kz9us] {
        background-color: #434aa9;
        transform: translateY(-2px);
    }

    button:focus[b-tg0y2kz9us] {
        outline: none;
        box-shadow: 0 0 8px rgba(90, 103, 216, 0.5);
    }



/* Botones de paginación */
.pagination[b-tg0y2kz9us] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}

    .pagination button[b-tg0y2kz9us] {
        background-color: #5a67d8;
        color: white;
        padding: 8px 12px;
        border: none;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

        .pagination button:hover[b-tg0y2kz9us] {
            background-color: #434aa9;
            transform: translateY(-2px);
        }

        .pagination button:disabled[b-tg0y2kz9us] {
            background-color: #ddd;
            cursor: not-allowed;
            color: #999;
        }

/* Estilo para el texto de paginación */
.pagination-text[b-tg0y2kz9us] {
    font-size: 12px;
    color: #333;
    margin: 0 10px;
}
/* Hasta aquí el nuevo código de paginación*/

/* Responsive Design */
@media (max-width: 768px) {
    table[b-tg0y2kz9us] {
        font-size: 14px;
    }

    input[type="text"][b-tg0y2kz9us] {
        width: 100%;
        max-width: 100%;
    }

    tbody td[b-tg0y2kz9us], thead th[b-tg0y2kz9us] {
        padding: 10px;
    }
}

/* Definir la animación */
@keyframes slideDown-b-tg0y2kz9us {
    from {
        transform: translateY(-100%);
        opacity: 1;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* The Close Button */
.close[b-tg0y2kz9us] {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover[b-tg0y2kz9us],
    .close:focus[b-tg0y2kz9us] {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }



button[type="submit"][b-tg0y2kz9us], button[type="button"][b-tg0y2kz9us] {
    margin-top: 15px;
    margin-right: 10px;
}

.loader[b-tg0y2kz9us] {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    animation: spin-b-tg0y2kz9us 2s linear infinite;
    margin: auto;
    display: block;
}

@keyframes spin-b-tg0y2kz9us {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}