@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: #ffffff;
    transition: width 0.3s ease;
    position: relative; /* necesario si luego quieres layering */
    z-index: 1;
    /* Sombra suave hacia la derecha */
    box-shadow: 8px 0 20px -16px rgba(0,0,0,0.25);
}

    .sidebar.collapse[b-mw5kw0ilsn] {
        width: 50px;
        transition: width 0.3s ease;
        /* Mant�n la sombra tambi�n colapsado */
        box-shadow: 8px 0 20px -16px rgba(0,0,0,0.25);
    }


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

.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;
    color: #000000;
}

.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");
}

/* Dashboard: enlace principal destacado */
.nav-dashboard-item[b-9jw3y9bunh] {
    padding-bottom: 0.5rem;
    padding-top: 0.75rem;
}

.nav-dashboard[b-9jw3y9bunh] {
    background: linear-gradient(135deg, var(--marca-principal), var(--marca-claro)) !important;
    border-radius: 8px !important;
    color: #fff !important;
    margin: 0 4px;
    padding: 8px 10px !important;
}

.nav-dashboard .nav-left[b-9jw3y9bunh] {
    color: #fff;
}

.nav-dashboard .nav-text[b-9jw3y9bunh] {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

.nav-dashboard .bi[b-9jw3y9bunh] {
    color: #fff;
}

.nav-dashboard:hover[b-9jw3y9bunh] {
    background: linear-gradient(135deg, var(--marca-hover), var(--marca-hover-claro)) !important;
    color: #fff !important;
}

.nav-dashboard.active[b-9jw3y9bunh] {
    background: linear-gradient(135deg, var(--marca-activo), var(--marca-activo-claro)) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.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;
    }
}

/* Bot�n del men� principal como fila flex: izquierda (icono+texto) + derecha (chevron) */
.nav-item .nav-link.nav-trigger[b-9jw3y9bunh] {
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
    padding: 6px 10px;
    text-decoration: none !important;
    color: #000000;
}

/* Bloque izquierdo (icono + texto) */
.nav-item .nav-link .nav-left[b-9jw3y9bunh] {
    display: flex;
    align-items: center; /* Centrado vertical del texto respecto al icono */
    gap: 0.75rem;
}

/* Chevron a la derecha */
.nav-item .nav-link .chevron[b-9jw3y9bunh] {
    font-size: 16px; /* ligeramente menor para elegancia */
    line-height: 1;
    transition: transform 0.2s ease;
    opacity: 0.85;
}

/* Estado hover del bot�n principal (opcional) */
.nav-item .nav-link.nav-trigger:hover[b-9jw3y9bunh] {
    background-color: #f7f7f7;
}

/* En modo colapsado por iconos ocultamos el chevron ya desde el markup,
   pero por si acaso: */
.nav-scrollable.collapse .nav-item .nav-link .chevron[b-9jw3y9bunh] {
    display: none;
}

/* El contenedor del nav debe comportarse como columna para empujar el footer al fondo */
.nav-scrollable[b-9jw3y9bunh] {
    display: flex;
    flex-direction: column;
    height: 95%;
}

    /* El listado ocupa todo el alto disponible y permite scroll */
    .nav-scrollable > nav[b-9jw3y9bunh] {
        flex: 1 1 auto;
        overflow-y: auto;
    }

/* Footer fijo al fondo del panel (permanece visible) */
.nav-footer[b-9jw3y9bunh] {
    position: sticky; /* se mantiene visible en la base del scroll del panel */
    bottom: 0;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 6px 10px;
    z-index: 1;
}

    /* Estilo del bot�n del footer */
    .nav-footer .nav-link.logout[b-9jw3y9bunh] {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        gap: 0.75rem;
        padding: 6px 8px;
        color: #404040;
        text-decoration: none !important;
    }

        .nav-footer .nav-link.logout:hover[b-9jw3y9bunh] {
            background: #f7f7f7;
        }

/* En men� colapsado centramos el icono y ocultamos el texto */
.nav-scrollable.collapse .nav-footer .nav-link.logout[b-9jw3y9bunh] {
    justify-content: center;
}
/* /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;
    Categoriar: pointer;
    margin-left: 15px;
}
/* /Layout/ProfesorLayout.razor.rz.scp.css */
.profesor-portal[b-kqswwrckgs] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f4f5f7;
}

.portal-topbar[b-kqswwrckgs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg, var(--marca-oscuro) 0%, var(--marca-principal) 45%, var(--marca-claro) 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    position: sticky;
    top: 0;
    z-index: 10;
}

.portal-topbar-logo-badge[b-kqswwrckgs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.portal-topbar-logo-img[b-kqswwrckgs] {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.portal-topbar-text[b-kqswwrckgs] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.portal-topbar-title[b-kqswwrckgs] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
}

.portal-topbar-subtitle[b-kqswwrckgs] {
    font-size: 0.7rem;
    color: #f3d9d9;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portal-main[b-kqswwrckgs] {
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* /Layout/TopBar.razor.rz.scp.css */
/* ── Top Bar ────────────────────────────────────────────── */
.top-bar[b-o8ylwk5awq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    height: 52px;
    background: linear-gradient(135deg, var(--marca-oscuro) 0%, var(--marca-principal) 45%, var(--marca-claro) 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Izquierda ──────────────────────────────────────────── */
.top-bar-left[b-o8ylwk5awq] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
}

.top-bar-logo-badge[b-o8ylwk5awq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.top-bar-logo-img[b-o8ylwk5awq] {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.top-bar-brand[b-o8ylwk5awq] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.top-bar-brand-main[b-o8ylwk5awq] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}

.top-bar-brand-sub[b-o8ylwk5awq] {
    font-size: 0.65rem;
    color: #e2e8f0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ── Centro ─────────────────────────────────────────────── */
.top-bar-center[b-o8ylwk5awq] {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-bar-title[b-o8ylwk5awq] {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
}

/* ── Derecha ─────────────────────────────────────────────── */
.top-bar-right[b-o8ylwk5awq] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    justify-content: flex-end;
}

/* Reloj */
.top-bar-clock[b-o8ylwk5awq] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.top-bar-clock-time[b-o8ylwk5awq] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

.top-bar-clock-date[b-o8ylwk5awq] {
    font-size: 0.65rem;
    color: #e2e8f0;
    letter-spacing: 0.04em;
    text-transform: capitalize;
}

/* Separador vertical */
.top-bar-divider[b-o8ylwk5awq] {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
}

/* Usuario */
.top-bar-user[b-o8ylwk5awq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.top-bar-avatar[b-o8ylwk5awq] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.top-bar-username[b-o8ylwk5awq] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Pages/AlumnosInteresados/AlumnosInteresados.razor.rz.scp.css */
/* General Styles */
body[b-0jgwqylaan] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f5f7;
    color: #333;
    margin: 0;
    padding: 0;
}

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

/* Table Styles */
table[b-0jgwqylaan] {
    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-0jgwqylaan] {
    background-color: #f0f0f0; /* Color de fondo claro en la cabecera */
    color: #333; /* Color de texto gris para la cabecera */
}

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

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

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

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

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

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

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

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

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

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

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

.table-footer[b-0jgwqylaan] {
    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-0jgwqylaan] {
    background-color: #5a67d8;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    Categoriar: pointer;
    font-size: 14px;
    margin-right: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

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

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



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

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

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

        .pagination button:disabled[b-0jgwqylaan] {
            background-color: #ddd;
            Categoriar: not-allowed;
            color: #999;
        }

/* Estilo para el texto de paginación */
.pagination-text[b-0jgwqylaan] {
    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-0jgwqylaan] {
        font-size: 14px;
    }

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

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

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

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


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

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



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

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

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

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

/* /Pages/AlumnosInteresados/EdicionAlumnosInteresados.razor.rz.scp.css */
/* Estilo del contenedor del formulario de edición */
.edit-form-container[b-24w542va3v] {
    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-24w542va3v] {
        right: 0;
    }

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

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

.close-btn[b-24w542va3v] {
    background: none;
    border: none;
    font-size: 1.5em;
    Categoriar: pointer;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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







.popup[b-24w542va3v] {
    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-24w542va3v] {
        transform: translate(-50%, -50%) scale(1);
    }

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

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

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

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

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

.overlay[b-24w542va3v] {
    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-24w542va3v] {
        display: block;
    }

.loading[b-24w542va3v] {
    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-24w542va3v] {
        display: flex;
    }

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

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

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

/* /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;
    Categoriar: 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;
    Categoriar: 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;
    Categoriar: 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;
        Categoriar: 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;
            Categoriar: 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;
        Categoriar: 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: 0px;
    right: -50%;
    width: 50%;
    height: 100%;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    transition: right 0.3s ease-in-out;
    padding: 16px;
    overflow-y: auto;
    z-index: 900; /* Valor mayor que 999 para que el panel esté encima */
}

    .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;
    Categoriar: 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;
    Categoriar: 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;
        Categoriar: 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: 1200;
    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;
    Categoriar: 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: 1150;
    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: 1250;
    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;
    Categoriar: 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;
    Categoriar: 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;
    Categoriar: 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;
        Categoriar: 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;
            Categoriar: 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;
        Categoriar: 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;
    Categoriar: 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;
    Categoriar: 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;
        Categoriar: 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/Categorias/Categorias.razor.rz.scp.css */
/* General Styles */
body[b-1uhb3fpt9b] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f5f7;
    color: #333;
    margin: 0;
    padding: 0;
}

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

/* Table Styles */
table[b-1uhb3fpt9b] {
    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-1uhb3fpt9b] {
    background-color: #f0f0f0; /* Color de fondo claro en la cabecera */
    color: #333; /* Color de texto gris para la cabecera */
}

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

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

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

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

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

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

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

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

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

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

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

.table-footer[b-1uhb3fpt9b] {
    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-1uhb3fpt9b] {
    background-color: #5a67d8;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    Categoriar: pointer;
    font-size: 14px;
    margin-right: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

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

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



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

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

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

        .pagination button:disabled[b-1uhb3fpt9b] {
            background-color: #ddd;
            Categoriar: not-allowed;
            color: #999;
        }

/* Estilo para el texto de paginación */
.pagination-text[b-1uhb3fpt9b] {
    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-1uhb3fpt9b] {
        font-size: 14px;
    }

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

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

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

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


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

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



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

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

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

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

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



.edit-form-container[b-adjjk90vwp] {
    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-adjjk90vwp] {
        right: 0;
    }

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

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

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

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

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

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

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

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

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

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

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

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

    /* Estilo moderno y elegante para los campos de entrada */
    .edit-form input[b-adjjk90vwp],
    .edit-form select[b-adjjk90vwp],
    .edit-form textarea[b-adjjk90vwp] {
        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-adjjk90vwp],
        .edit-form select:focus[b-adjjk90vwp],
        .edit-form textarea:focus[b-adjjk90vwp] {
            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-adjjk90vwp] {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

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

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

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

    .custom-input[b-adjjk90vwp] {
        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-adjjk90vwp] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
        background-color: #fff;
    }



[b-adjjk90vwp] .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-adjjk90vwp] .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-adjjk90vwp] .valid.modified:not([type=checkbox]) {
    outline: none;
    border-color: #28a745;
}

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

[b-adjjk90vwp] .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-adjjk90vwp 0.5s ease-in-out;
}

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

@keyframes fadeIn-b-adjjk90vwp {
    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: 0px;
    right: -50%;
    width: 50%;
    height: 100%;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    transition: right 0.3s ease-in-out;
    padding: 16px;
    overflow-y: auto;
    z-index: 900; /* Valor mayor que 999 para que el panel esté encima */
}

    .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;
    Categoriar: 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;
    Categoriar: 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;
        Categoriar: 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;
    }
}


.popup[b-y2wwpklx7x] {
    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: 1200;
    transition: transform 0.3s ease-in-out;
}

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

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

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

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

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

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

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

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

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

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

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


/* /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;
    Categoriar: 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;
    Categoriar: 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;
    Categoriar: 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;
        Categoriar: 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;
            Categoriar: 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;
        Categoriar: 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/HomeDashBoard.razor.rz.scp.css */
:root[b-gi25brhpit] {
    --bg: #f7f8fc; /* fondo claro con aire */
    --panel: #ffffff;
    --card: #ffffff;
    --content: #0f172a; /* slate-900 */
    --muted: #64748b; /* slate-500 */
    --brand: #7C5CFC;
    --brand-2: #22D3EE;
    --ok: #16a34a;
    --warn: #f59e0b;
    --info: #3b82f6;
    --danger: #ef4444;
    --radius: 18px;
    --radius-lg: 22px;
    --border: rgba(2,6,23,.08);
    --shadow: 0 6px 24px rgba(2,6,23,.06);
}

*[b-gi25brhpit] {
    box-sizing: border-box
}

.page[b-gi25brhpit] {
    min-height: 100%;
    background: radial-gradient(1200px 800px at 80% -10%, rgba(124,92,252,.12), transparent 60%), radial-gradient(900px 700px at -10% 110%, rgba(34,211,238,.10), transparent 60%), var(--bg);
    color: var(--content);
    padding: 28px;
    border-radius: var(--radius-lg);
    position: relative;
}

.header[b-gi25brhpit] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.title h1[b-gi25brhpit] {
    margin: 0;
    font-size: 24px;
    letter-spacing: .3px
}

.subtitle[b-gi25brhpit] {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px
}

.btn[b-gi25brhpit] {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--content);
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer
}

    .btn.primary[b-gi25brhpit] {
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        border: none;
        color: #ffffff;
        font-weight: 700;
        box-shadow: var(--shadow)
    }

    .btn.ghost:hover[b-gi25brhpit] {
        background: rgba(2,6,23,.04)
    }

/* KPIs */
.kpis[b-gi25brhpit] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px;
    margin-bottom: 22px
}

.kpi[b-gi25brhpit] {
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,249,253,1));
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 6px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow)
}

    .kpi[b-gi25brhpit]::after {
        content: "";
        position: absolute;
        inset: auto -20% -60% -20%;
        height: 120px;
        background: radial-gradient(100px 60px at 50% 0%, rgba(124,92,252,.16), transparent 70%)
    }

.kpi-title[b-gi25brhpit] {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .4px
}

.kpi-value[b-gi25brhpit] {
    font-size: 28px;
    font-weight: 800
}

.kpi-foot[b-gi25brhpit] {
    font-size: 11px;
    color: var(--muted)
}

.kpi-icon[b-gi25brhpit] {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(124,92,252,.10)
}

    .kpi-icon.users[b-gi25brhpit] {
        background: rgba(124,92,252,.10)
    }

    .kpi-icon.subs[b-gi25brhpit] {
        background: rgba(34,211,238,.10)
    }

    .kpi-icon.ups[b-gi25brhpit] {
        background: rgba(22,163,74,.10)
    }

    .kpi-icon.downs[b-gi25brhpit] {
        background: rgba(239,68,68,.10)
    }

/* Grid de tarjetas */
.grid[b-gi25brhpit] {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 16px
}

.card[b-gi25brhpit] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow)
}

    .card.big[b-gi25brhpit] {
        grid-column: span 2
    }

.card-head[b-gi25brhpit] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

    .card-head h3[b-gi25brhpit] {
        margin: 0;
        font-size: 15px
    }

.legend[b-gi25brhpit] {
    display: flex;
    gap: 10px;
    color: var(--muted);
    font-size: 12px
}

.dot[b-gi25brhpit] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-right: 6px;
    vertical-align: middle
}

    .dot.a[b-gi25brhpit] {
        background: var(--brand)
    }

    .dot.b[b-gi25brhpit] {
        background: var(--danger)
    }

/* Barras simples como placeholder de chart */
.chart-bars[b-gi25brhpit] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    align-items: end;
    gap: 10px;
    height: 220px;
    padding: 8px 6px 0
}

.bar[b-gi25brhpit] {
    display: grid;
    grid-template-rows: 1fr 1fr auto;
    align-items: end;
    justify-items: center;
    gap: 4px
}

    .bar span[b-gi25brhpit] {
        width: 16px;
        border-radius: 8px
    }

        .bar span.a[b-gi25brhpit] {
            background: linear-gradient(180deg, var(--brand), rgba(124,92,252,.25))
        }

        .bar span.b[b-gi25brhpit] {
            background: linear-gradient(180deg, var(--danger), rgba(239,68,68,.25))
        }

    .bar em[b-gi25brhpit] {
        font-style: normal;
        color: var(--muted);
        font-size: 10px
    }

/* Embudo */
.funnel[b-gi25brhpit] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px
}

    .funnel li[b-gi25brhpit] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fafbff;
        border: 1px solid var(--border);
        padding: 10px 12px;
        border-radius: 12px
    }

    .funnel strong[b-gi25brhpit] {
        font-size: 14px
    }

/* Actividad */
.activity[b-gi25brhpit] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px
}

    .activity li[b-gi25brhpit] {
        background: #fafbff;
        border: 1px solid var(--border);
        padding: 10px 12px;
        border-radius: 12px
    }

.dot.ok[b-gi25brhpit] {
    background: var(--ok)
}

.dot.warn[b-gi25brhpit] {
    background: var(--warn)
}

.dot.info[b-gi25brhpit] {
    background: var(--info)
}

/* Top planes */
.plans[b-gi25brhpit] {
    display: grid;
    gap: 10px
}

.plan[b-gi25brhpit] {
    background: #fafbff;
    border: 1px solid var(--border);
    padding: 10px 12px;
    border-radius: 12px
}

.meter[b-gi25brhpit] {
    height: 8px;
    background: rgba(2,6,23,.06);
    border-radius: 40px;
    margin-top: 8px;
    position: relative;
    overflow: hidden
}

    .meter[b-gi25brhpit]::after {
        content: "";
        position: absolute;
        inset: 0;
        width: var(--v,50%);
        background: linear-gradient(90deg, var(--brand), var(--brand-2));
    }

/* FAB y chat */
.fab[b-gi25brhpit] {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    border: none;
    cursor: pointer;
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 10px 30px rgba(2,6,23,.25)
}

.chat[b-gi25brhpit] {
    position: fixed;
    right: 22px;
    bottom: 90px;
    width: 360px;
    max-width: calc(100% - 44px);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(2,6,23,.15);
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: .25s ease;
    overflow: hidden
}

    .chat.open[b-gi25brhpit] {
        transform: none;
        opacity: 1;
        pointer-events: auto
    }

    .chat header[b-gi25brhpit] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
        font-weight: 700
    }

    .chat .icon[b-gi25brhpit] {
        background: transparent;
        border: none;
        color: var(--content);
        font-size: 22px;
        line-height: 1;
        cursor: pointer
    }

.chat-body[b-gi25brhpit] {
    padding: 12px 14px
}

    .chat-body textarea[b-gi25brhpit] {
        width: 100%;
        min-height: 110px;
        resize: vertical;
        background: #f8fafc;
        color: var(--content);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px
    }

.chat-actions[b-gi25brhpit] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px
}

.chat-status[b-gi25brhpit] {
    margin: 6px 2px 0;
    color: var(--muted);
    font-size: 12px
}

/* Responsive */
@media (max-width:1200px) {
    .grid[b-gi25brhpit] {
        grid-template-columns: 1fr 1fr
    }

    .card.big[b-gi25brhpit] {
        grid-column: span 2
    }
}

@media (max-width:700px) {
    .kpis[b-gi25brhpit] {
        grid-template-columns: 1fr 1fr
    }

    .grid[b-gi25brhpit] {
        grid-template-columns: 1fr
    }
}

.loader-inline[b-gi25brhpit] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}


.loader[b-gi25brhpit] {
    width: 60px;
    height: 60px;
    border: 6px solid #ddd;
    border-top-color: #4a6cf7; /* color corporativo o primario */
    border-radius: 50%;
    animation: spin-b-gi25brhpit 0.9s linear infinite;
}

@keyframes spin-b-gi25brhpit {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Profesores/EdicionProfesor.razor.rz.scp.css */
/* Estilo del contenedor del formulario de edición */



.edit-form-container[b-cmkkvmui5s] {
    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-cmkkvmui5s] {
        right: 0;
    }

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

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

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

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

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

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

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

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

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

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

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

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

    /* Estilo moderno y elegante para los campos de entrada */
    .edit-form input[b-cmkkvmui5s],
    .edit-form select[b-cmkkvmui5s],
    .edit-form textarea[b-cmkkvmui5s] {
        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-cmkkvmui5s],
        .edit-form select:focus[b-cmkkvmui5s],
        .edit-form textarea:focus[b-cmkkvmui5s] {
            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-cmkkvmui5s] {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

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

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

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

    .custom-input[b-cmkkvmui5s] {
        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-cmkkvmui5s] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
        background-color: #fff;
    }



[b-cmkkvmui5s] .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-cmkkvmui5s] .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-cmkkvmui5s] .valid.modified:not([type=checkbox]) {
    outline: none;
    border-color: #28a745;
}

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

[b-cmkkvmui5s] .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-cmkkvmui5s 0.5s ease-in-out;
}

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

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

    to {
        opacity: 1;
    }
}

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

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

    100% {
        transform: rotate(360deg);
    }
}
/* /Pages/Profesores/Portal/MisGrupos.razor.rz.scp.css */
.portal-container[b-aahfx1myrx] {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 3rem;
}

/* ── Cabecera de saludo ─────────────────────────────────── */
.portal-greeting[b-aahfx1myrx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.portal-greeting-title[b-aahfx1myrx] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.15rem;
}

.portal-greeting-subtitle[b-aahfx1myrx] {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 0;
}

.portal-actions[b-aahfx1myrx] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Tarjetas de grupo ──────────────────────────────────── */
.portal-grupos[b-aahfx1myrx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.portal-grupo-card[b-aahfx1myrx] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(var(--marca-oscuro-rgb), 0.08);
    overflow: hidden;
}

.portal-grupo-header[b-aahfx1myrx] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    background: #fff;
    border: none;
    text-align: left;
    cursor: pointer;
    flex-wrap: wrap;
}

.portal-grupo-nombre[b-aahfx1myrx] {
    font-weight: 700;
    color: var(--marca-oscuro);
    font-size: 1rem;
}

.portal-grupo-meta[b-aahfx1myrx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.badge-categoria[b-aahfx1myrx] {
    background: #e9ecef;
    color: #495057;
    font-weight: 500;
    font-size: 0.72rem;
    padding: 0.32rem 0.6rem;
    border-radius: 999px;
}

.badge-alumnos[b-aahfx1myrx] {
    background: linear-gradient(135deg, var(--marca-principal), var(--marca-claro));
    color: #fff;
    font-weight: 600;
    font-size: 0.72rem;
    padding: 0.32rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}

.portal-grupo-chevron[b-aahfx1myrx] {
    color: #adb5bd;
    transition: transform 0.2s ease;
}

.portal-grupo-chevron.abierto[b-aahfx1myrx] {
    transform: rotate(180deg);
    color: var(--marca-principal);
}

.portal-grupo-body[b-aahfx1myrx] {
    padding: 0 1.1rem 1rem;
    border-top: 1px solid #f1f1f3;
}

/* ── Lista de alumnos ───────────────────────────────────── */
.portal-alumno-list[b-aahfx1myrx] {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0 0;
}

.portal-alumno-item[b-aahfx1myrx] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f1f1f3;
}

.portal-alumno-item:last-child[b-aahfx1myrx] {
    border-bottom: none;
}

.portal-alumno-nombre[b-aahfx1myrx] {
    font-weight: 600;
    color: #343a40;
    font-size: 0.92rem;
}

.portal-alumno-contacto[b-aahfx1myrx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.9rem;
}

.portal-alumno-dato[b-aahfx1myrx] {
    color: #868e96;
    font-size: 0.78rem;
}

.portal-alumno-dato i[b-aahfx1myrx] {
    margin-right: 0.3rem;
    color: var(--marca-claro);
}

/* ── Cambio de contraseña ───────────────────────────────── */
.portal-password-card[b-aahfx1myrx] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(var(--marca-oscuro-rgb), 0.08);
    padding: 1.25rem 1.25rem 1.5rem;
}

.portal-password-title[b-aahfx1myrx] {
    font-weight: 700;
    color: #212529;
    margin-bottom: 1rem;
}
/* /Pages/Profesores/Profesores.razor.rz.scp.css */
/* General Styles */
body[b-lpevwzcgcw] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f5f7;
    color: #333;
    margin: 0;
    padding: 0;
}

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

/* Table Styles */
table[b-lpevwzcgcw] {
    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-lpevwzcgcw] {
    background-color: #f0f0f0; /* Color de fondo claro en la cabecera */
    color: #333; /* Color de texto gris para la cabecera */
}

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

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

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

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

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

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

/* Action Buttons */
.action-button[b-lpevwzcgcw] {
    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-lpevwzcgcw] {
        background-color: #e9f5ff; /* Fondo claro para el botón de edición */
        color: #0078d4;
    }

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

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

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

.table-footer[b-lpevwzcgcw] {
    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-lpevwzcgcw] {
    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-lpevwzcgcw] {
        background-color: #434aa9;
        transform: translateY(-2px);
    }

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



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

    .pagination button[b-lpevwzcgcw] {
        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-lpevwzcgcw] {
            background-color: #434aa9;
            transform: translateY(-2px);
        }

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

/* Estilo para el texto de paginación */
.pagination-text[b-lpevwzcgcw] {
    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-lpevwzcgcw] {
        font-size: 14px;
    }

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

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

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

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


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

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



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

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

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

    100% {
        transform: rotate(360deg);
    }
}
/* /Pages/Reportes/AlumnosPorGrupo.razor.rz.scp.css */
.report-container[b-gy1o0wgftm] {
    padding: 1.5rem;
    max-width: auto;
    margin: 0 auto;
}

.report-card[b-gy1o0wgftm] {
    border-radius: 1rem;
    border: none;
}

    .report-card .card-header[b-gy1o0wgftm] {
        background: linear-gradient(135deg, #0d6efd, #6610f2);
        color: #fff;
        border-radius: 1rem 1rem 0 0 !important;
    }

        .report-card .card-header h2[b-gy1o0wgftm] {
            font-size: 1.4rem;
            font-weight: 600;
        }

    .report-card .card-body[b-gy1o0wgftm] {
        background-color: #ffffff;
        border-radius: 0 0 1rem 1rem;
    }

.table thead th[b-gy1o0wgftm] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.table tbody td[b-gy1o0wgftm] {
    font-size: 0.9rem;
}
/* /Pages/Reportes/Reportes.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   LAYOUT PRINCIPAL
═══════════════════════════════════════════════ */

.rp-layout[b-ma1si0tkj8] {
    display: flex;
    min-height: calc(100vh - 56px);
    background: #f1f5f9;
    margin: -1.5rem; /* contrarresta el padding del main layout */
}

/* ═══════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════ */

.rp-sidebar[b-ma1si0tkj8] {
    width: 228px;
    min-width: 228px;
    background: #0f172a;
    color: #cbd5e1;
    overflow-y: auto;
    padding: .75rem 0 2rem;
    position: sticky;
    top: 0;
    max-height: calc(100vh - 56px);
    flex-shrink: 0;
}

.rp-sidebar-title[b-ma1si0tkj8] {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #475569;
    padding: .5rem 1.1rem 1rem;
}

.rp-cat-header[b-ma1si0tkj8] {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #cbd5e1;
    background: rgba(148, 163, 184, .08);
    border-top: 1px solid rgba(148, 163, 184, .12);
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    margin-top: 1rem;
    padding: .5rem 1.1rem;
    display: flex;
    align-items: center;
}

    .rp-cat-header i[b-ma1si0tkj8] {
        color: #60a5fa;
    }

.rp-item[b-ma1si0tkj8] {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem 1.1rem;
    font-size: .875rem;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background .14s, border-color .14s, color .14s;
    color: #94a3b8;
}

    .rp-item:hover[b-ma1si0tkj8] {
        background: #1e293b;
        color: #e2e8f0;
    }

    .rp-item-active[b-ma1si0tkj8] {
        background: #1e3a5f;
        border-left-color: #3b82f6;
        color: #93c5fd !important;
        font-weight: 600;
    }

.rp-item-arrow[b-ma1si0tkj8] {
    font-size: .55rem;
    opacity: .4;
}

/* ═══════════════════════════════════════════════
   CONTENIDO PRINCIPAL
═══════════════════════════════════════════════ */

.rp-main[b-ma1si0tkj8] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 1.75rem 2rem;
}

/* ═══════════════════════════════════════════════
   CABECERA DEL INFORME
═══════════════════════════════════════════════ */

.rp-header[b-ma1si0tkj8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

    .rp-header h5[b-ma1si0tkj8] {
        font-weight: 700;
        color: #0f172a;
        font-size: 1.05rem;
    }

/* ═══════════════════════════════════════════════
   BARRA DE FILTROS
═══════════════════════════════════════════════ */

.rp-filter-bar[b-ma1si0tkj8] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-end;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.rp-filter-item[b-ma1si0tkj8] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 170px;
}

    .rp-filter-item label[b-ma1si0tkj8] {
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #64748b;
    }

.rp-filter-toggle[b-ma1si0tkj8] {
    flex-direction: row !important;
    align-items: center;
    gap: .5rem;
    padding-bottom: .2rem;
}

/* ═══════════════════════════════════════════════
   SPINNER DE CARGA (todos los informes)
═══════════════════════════════════════════════ */

.rp-loading[b-ma1si0tkj8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    padding: 3.5rem 1rem;
    color: #64748b;
    font-size: .9rem;
}

.rp-spinner[b-ma1si0tkj8] {
    width: 42px;
    height: 42px;
    border: 4px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: rp-spin-b-ma1si0tkj8 .8s linear infinite;
}

@keyframes rp-spin-b-ma1si0tkj8 {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════════
   KPI STRIP
═══════════════════════════════════════════════ */

.rp-kpis[b-ma1si0tkj8] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.rp-kpi[b-ma1si0tkj8] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 170px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: box-shadow .15s;
}

    .rp-kpi:hover[b-ma1si0tkj8] {
        box-shadow: 0 4px 12px rgba(0,0,0,.1);
    }

.rp-kpi-icon[b-ma1si0tkj8] {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
}

.rp-kpi-value[b-ma1si0tkj8] {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    color: #0f172a;
}

.rp-kpi-label[b-ma1si0tkj8] {
    font-size: .72rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: .15rem;
}

/* ═══════════════════════════════════════════════
   GRID
═══════════════════════════════════════════════ */

.rp-grid-wrap[b-ma1si0tkj8] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

/* Ajuste fino al DataGrid de Radzen dentro del wrapper */
.rp-grid-wrap[b-ma1si0tkj8]  .rz-datatable,
.rp-grid-wrap[b-ma1si0tkj8]  .rz-grid-table {
    border-radius: 0;
    border: none;
}

/* ═══════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════ */

.rp-badge-ok[b-ma1si0tkj8] {
    display: inline-block;
    padding: .18rem .6rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}

.rp-badge-no[b-ma1si0tkj8] {
    display: inline-block;
    padding: .18rem .6rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}

.rp-badge-warn[b-ma1si0tkj8] {
    display: inline-block;
    padding: .18rem .6rem;
    border-radius: 999px;
    background: #fef9c3;
    color: #a16207;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}

.rp-badge-danger[b-ma1si0tkj8] {
    display: inline-block;
    padding: .18rem .6rem;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════
   ESTADO INICIAL (BIENVENIDA)
═══════════════════════════════════════════════ */

.rp-welcome[b-ma1si0tkj8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem 3rem;
    text-align: center;
}

.rp-welcome-icon[b-ma1si0tkj8] {
    font-size: 3.8rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.rp-welcome-cards[b-ma1si0tkj8] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;
}

.rp-welcome-cat[b-ma1si0tkj8] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.4rem 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    min-width: 140px;
    cursor: pointer;
    transition: box-shadow .15s, transform .15s;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

    .rp-welcome-cat:hover[b-ma1si0tkj8] {
        box-shadow: 0 6px 18px rgba(0,0,0,.1);
        transform: translateY(-2px);
    }

    .rp-welcome-cat i[b-ma1si0tkj8] {
        font-size: 1.6rem;
        color: #3b82f6;
    }

    .rp-welcome-cat strong[b-ma1si0tkj8] {
        font-size: .92rem;
        color: #0f172a;
    }

    .rp-welcome-cat span[b-ma1si0tkj8] {
        font-size: .76rem;
        color: #64748b;
    }
/* /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;
    Categoriar: 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;
    Categoriar: 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;
        Categoriar: 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;
    Categoriar: 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;
    Categoriar: 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;
    Categoriar: 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;
        Categoriar: 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;
            Categoriar: 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;
        Categoriar: 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);
    }
}

/* /Pages/Utilidades/VisorPDF.razor.rz.scp.css */
:root[b-vpljmmqrg0] {
    --bg: #0b1020;
    --card: #121831;
    --muted: #98a2b3;
    --accent: #5b8cff;
    --accent2: #ef4444;
}

.pdf-shell[b-vpljmmqrg0] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    min-height: calc(100vh - 40px);
    padding: 20px;
    background: linear-gradient(180deg,#0b1020,#0f1a3a);
}

.pdf-view[b-vpljmmqrg0] {
    background: #0c1330;
    border: 1px solid #223;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.35)
}

#pdfCanvas[b-vpljmmqrg0] {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    background: #fff
}

.pdf-sidebar[b-vpljmmqrg0] {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.box[b-vpljmmqrg0] {
    background: var(--card);
    border: 1px solid #23304f;
    border-radius: 16px;
    padding: 16px;
    color: #e5e7eb;
    box-shadow: 0 8px 24px rgba(0,0,0,.25)
}

    .box.small[b-vpljmmqrg0] {
        opacity: .9
    }

h3[b-vpljmmqrg0] {
    margin: 0 0 6px 0;
    font-weight: 600
}

.muted[b-vpljmmqrg0] {
    color: var(--muted);
    margin: 0 0 12px 0;
    font-size: .9rem
}

.btns[b-vpljmmqrg0] {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.btn[b-vpljmmqrg0] {
    appearance: none;
    border: 1px solid #2a3657;
    background: #182243;
    color: #e5e7eb;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 600;
    Categoriar: pointer;
    transition: transform .06s ease, box-shadow .2s
}

    .btn:hover[b-vpljmmqrg0] {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0,0,0,.3)
    }

    .btn.primary[b-vpljmmqrg0] {
        background: linear-gradient(180deg,#3c6bf4,#2953c9);
        border-color: #294db8
    }

    .btn.danger[b-vpljmmqrg0] {
        background: linear-gradient(180deg,#f87171,#dc2626);
        border-color: #b91c1c
    }

    .btn.ghost[b-vpljmmqrg0] {
        background: transparent;
        border-color: #2a3657;
        color: #cbd5e1
    }

.modal[b-vpljmmqrg0] {
    position: fixed;
    inset: 0;
    background: rgba(12,17,34,.7);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999
}

    .modal.hidden[b-vpljmmqrg0] {
        display: none
    }

.modal-card[b-vpljmmqrg0] {
    width: min(760px,92vw);
    background: #0f1631;
    border: 1px solid #2a3657;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5)
}

.sig-wrap[b-vpljmmqrg0] {
    background: #0b1020;
    border: 1px dashed #375086;
    border-radius: 12px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center
}

.sig-canvas[b-vpljmmqrg0] {
    width: 100%;
    height: 100%;
    touch-action: none;
    background: #fff;
    border-radius: 10px
}

.modal-actions[b-vpljmmqrg0] {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    align-items: center
}

.spacer[b-vpljmmqrg0] {
    flex: 1
}

@media (max-width: 980px) {
    .pdf-shell[b-vpljmmqrg0] {
        grid-template-columns: 1fr
    }

    .pdf-sidebar[b-vpljmmqrg0] {
        order: -1
    }
}


.pdf-container[b-vpljmmqrg0] {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

    .pdf-container canvas[b-vpljmmqrg0] {
        width: 100%;
        height: auto;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(0,0,0,.15)
    }