@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-h2kz0imn1m] {
    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-h2kz0imn1m] {
        /*margin-left: 60px;*/ /* Ajusta el valor seg�n el ancho de la barra lateral colapsada */
    }

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

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

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

.content[b-h2kz0imn1m] {
    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-ofoftop2oy] {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
}

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



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

.nav-scrollable.expand[b-ofoftop2oy] {
    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-ofoftop2oy],
.nav-scrollable.collapse .sub-nav-link .text[b-ofoftop2oy] {
    display: none;
}

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

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

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

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

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

/* Submen� por defecto (colapsado) */
.nav-scrollable .submenu[b-ofoftop2oy] {
    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-ofoftop2oy] {
        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-ofoftop2oy] {
    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-ofoftop2oy] {
        background-color: #f0f0f0;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

    .nav-item[b-ofoftop2oy]  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-ofoftop2oy]  a.active {
            background-color: #f0f0f0;
            color: #404040;
        }

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

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

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

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

.notification-bar[b-bd11kecl5l] {
    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-bd11kecl5l 2s forwards; /* Aparece con la animación */
}

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

    to {
        opacity: 1;
    }
}

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

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

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

}

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

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

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

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



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

.columns-selector ul[b-mvx3chpe0k] {
    /* Pide columnas de al menos 150px de ancho, y hasta 5 columnas */
    column-width: 150px;
    column-count: 5;
    column-gap: 1rem;
    /* elimina márgenes/padding del ul */
    list-style: none;
    padding: 0;
    margin: 0;
}

.columns-selector li[b-mvx3chpe0k] {
    /* evita que un ítem se rompa entre columnas */
    break-inside: avoid-column;
    margin-bottom: 0.5rem;
}
/* /Layout/Tools/FilterHermanos.razor.rz.scp.css */


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

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

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

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

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

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


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

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

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

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

}

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* wwwroot/css/site.css */

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

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


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

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

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

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

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

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

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

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

.profile-pic[b-3374ze8ks5] {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: 0.5rem;
}
/* /Pages/Contabilidad/AsientosPendientes.razor.rz.scp.css */
.loader-container[b-y509w50fj7] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.8);
    z-index: 9999;
}

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

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


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

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

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

        .action-bar button.mover-derecha[b-y509w50fj7] {
            margin-left: auto;
        }
/* /Pages/Contabilidad/EditorAsientos.razor.rz.scp.css */
:root[b-bw7pwzj3sr] {
    --card-bg: #fff;
    --muted: #667085;
    --border: #e5e7eb;
    --shadow: 0 10px 30px rgba(0,0,0,.06);
}

body[b-bw7pwzj3sr] {
    background: #f8fafc;
    color: #0f172a;
    font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    margin: 0;
}

.container[b-bw7pwzj3sr] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}

.card[b-bw7pwzj3sr] {
    background: rgba(0,0,0,.06);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 24px;
}

.label[b-bw7pwzj3sr] {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.input[b-bw7pwzj3sr], .btn[b-bw7pwzj3sr] {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 14px;
}

.input[b-bw7pwzj3sr] {
    width: 100%;
}

.btn-primary[b-bw7pwzj3sr] {
    background: #0284c7;
    color: #fff;
    border-color: #0284c7;
    cursor: pointer;
}

    .btn-primary:hover[b-bw7pwzj3sr] {
        background: #0369a1;
    }

.grid[b-bw7pwzj3sr] {
    display: grid;
    gap: 12px;
}

.grid-12[b-bw7pwzj3sr] {
    grid-template-columns: repeat(12,minmax(0,1fr));
}

.grid-flex[b-bw7pwzj3sr] {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}


.col-12[b-bw7pwzj3sr] {
    grid-column: span 12;
}

.col-3[b-bw7pwzj3sr] {
    grid-column: span 3;
}

.col-2[b-bw7pwzj3sr] {
    grid-column: span 2;
}

.col-6[b-bw7pwzj3sr] {
    grid-column: span 6;
}

.table[b-bw7pwzj3sr] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

    .table th[b-bw7pwzj3sr], .table td[b-bw7pwzj3sr] {
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
    }

    .table thead th[b-bw7pwzj3sr] {
        background: #f8fafc;
        color: #475569;
        font-weight: 600;
        text-align: left;
    }

.text-right[b-bw7pwzj3sr] {
    text-align: right;
}

.muted[b-bw7pwzj3sr] {
    color: rgba(0,0,0,0.45);
    font-size: 13px;
}

.chip-ok[b-bw7pwzj3sr], .chip-bad[b-bw7pwzj3sr] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid;
    font-size: 12px;
    font-weight: 600;
}

.chip-ok[b-bw7pwzj3sr] {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.chip-bad[b-bw7pwzj3sr] {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.section[b-bw7pwzj3sr] {
    margin-bottom: 16px;
}

.form-grid[b-bw7pwzj3sr] {
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr)); /* 5 columnas fijas */
    gap: 16px; /* separación entre celdas */
    align-items: start; /* alinear inputs/botón por la base */
}

    /* Botón en la fila de abajo, ocupando toda la fila (de la col 1 a la última) */
    .form-grid .btn-row[b-bw7pwzj3sr] {
        grid-column: 1 / -1;
        justify-self: start; /* o end si lo quieres a la derecha */
    }

.toolbar[b-bw7pwzj3sr] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.form-item[b-bw7pwzj3sr] {
    display: flex;
    flex-direction: column;
}

.field-caption[b-bw7pwzj3sr] {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

/* Overlay a pantalla completa */
.loader-overlay[b-bw7pwzj3sr] {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    background: rgba(0,0,0,0.35); /* fondo translúcido */
    backdrop-filter: blur(2px); /* opcional: desenfoque del fondo */
    z-index: 9999; /* por encima de todo */
    display: grid;
    place-items: center; /* centra contenido */
}

/* Contenedor del aro + logo (NO anima este contenedor) */
.loader[b-bw7pwzj3sr] {
    position: relative;
    width: 120px;
    height: 120px;
}

    /* Aro girando (pseudo-elemento) */
    .loader[b-bw7pwzj3sr]::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 16px solid rgba(243,243,243,0.9);
        border-top-color: #3498db; /* color del segmento que “avanza” */
        animation: spin-b-bw7pwzj3sr 1.2s linear infinite;
        box-sizing: border-box;
    }

/* Logo inmóvil en el centro */
.loader-logo[b-bw7pwzj3sr] {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 56px; /* ajusta a tu gusto */
    height: 56px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* Accesibilidad para lectores de pantalla */
.sr-only[b-bw7pwzj3sr] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,1,1);
    white-space: nowrap;
    border: 0;
}

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

/* (Opcional) bloquear scroll cuando hay overlay */
body.is-loading[b-bw7pwzj3sr] {
    overflow: hidden;
}


/* 2 columnas: nombre (auto) | cuenta (ajustada a contenido) */
.two-col-item[b-bw7pwzj3sr] {
    display: grid;
    grid-template-columns: 1fr auto; /* o 2fr 1fr si quieres más espacio para nombre */
    gap: 8px;
    align-items: center;
}

    /* Para que el truncado con … funcione en grid */
    .two-col-item .nombre[b-bw7pwzj3sr] {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Estilo de la cuenta */
    .two-col-item .cuenta[b-bw7pwzj3sr] {
        text-align: right;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        opacity: .8;
    }

/* (Opcional) en móviles, que baje a 1 columna */
@media (max-width: 520px) {
    .two-col-item[b-bw7pwzj3sr] {
        grid-template-columns: 1fr;
    }

        .two-col-item .cuenta[b-bw7pwzj3sr] {
            text-align: left;
            font-size: .9rem;
        }
}
/* /Pages/Cuentas/Cuentas.razor.rz.scp.css */
/* General Styles */
body[b-g63xfm8pts] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f5f7;
    color: #333;
    margin: 0;
    padding: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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


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

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



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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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


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

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



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

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

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

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

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



.edit-form-container[b-q4ycevvf57] {
    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: 2px;
    overflow-y: auto;
    z-index: 1000; /* Valor mayor que 999 para que el panel esté encima */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

    to {
        opacity: 1;
    }
}


/* Overlay base (oculto por defecto) */
.overlay[b-q4ycevvf57] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* fondo negro semitransparente */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 999; /* Debe quedar justo por debajo del panel */
}

    /* Cuando abrimos: hacemos visible el overlay */
    .overlay.open[b-q4ycevvf57] {
        opacity: 1;
        visibility: visible;
    }

/* Spinner centrado */
.spinner[b-q4ycevvf57] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #007bff; /* color del borde en movimiento */
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    animation: spin-b-q4ycevvf57 0.8s linear infinite;
    margin: auto;
}

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

/* Opción: si quieres un overlay dentro del modal para oscurecer mientras guarda */
.modal-overlay-saving[b-q4ycevvf57] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; /* debe quedar por encima de los inputs del form */
}
/* /Pages/Hermanos/Hermanos.razor.rz.scp.css */
/* General Styles */
body[b-3id0upc11e] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f5f7;
    color: #333;
    margin: 0;
    padding: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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


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

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



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

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

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

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

/* /Pages/Informes/Reports.razor.rz.scp.css */
    /*****************
    Estilo general
    ******************/
    :root[b-4yepw2ge1a] {
        --wiz-bg: #ffffff;
        --wiz-muted: #6c757d;
        --wiz-primary: #0d6efd; /* Bootstrap primary */
        --wiz-success: #198754;
        --wiz-radius: 1.25rem; /* rounded-4 like */
    }


    .section-title[b-4yepw2ge1a] {
        font-size: 1.125rem;
        font-weight: 600;
        margin-bottom: .75rem;
    }


    .card-check[b-4yepw2ge1a] {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .9rem 1rem;
        border: 1px solid #e9ecef;
        border-radius: var(--wiz-radius);
    }


    /*****************
    Steps indicator
    ******************/
    .wizard-steps[b-4yepw2ge1a] {
        display: flex;
        align-items: center;
        gap: .75rem;
    }

        .wizard-steps .step[b-4yepw2ge1a] {
            display: flex;
            align-items: center;
            gap: .6rem;
            user-select: none;
        }

            .wizard-steps .step .circle[b-4yepw2ge1a] {
                width: 34px;
                height: 34px;
                border-radius: 999px;
                display: grid;
                place-items: center;
                background: #f8f9fa;
                border: 1px solid #e9ecef;
                font-weight: 600;
            }

            .wizard-steps .step .label[b-4yepw2ge1a] {
                font-weight: 600;
                color: var(--wiz-muted);
            }

        .wizard-steps .divider[b-4yepw2ge1a] {
            flex: 1;
            height: 2px;
            background: linear-gradient(90deg,#e9ecef,transparent);
        }


        .wizard-steps .step.active .circle[b-4yepw2ge1a] {
            background: var(--wiz-primary);
            color: #fff;
            border-color: var(--wiz-primary);
        }

        .wizard-steps .step.active .label[b-4yepw2ge1a] {
            color: #212529;
        }


        .wizard-steps .step.done .circle[b-4yepw2ge1a] {
            background: var(--wiz-success);
            color: #fff;
            border-color: var(--wiz-success);
        }

        .wizard-steps .step.done .label[b-4yepw2ge1a] {
            color: #212529;
            opacity: .85;
        }


    /*****************
    Slides wrapper
    ******************/
    .wizard-frame[b-4yepw2ge1a] {
        position: relative;
        overflow: hidden;
        background: var(--wiz-bg);
        border-radius: var(--wiz-radius);
        border: 1px solid #eef1f4;
        box-shadow: 0 6px 20px rgba(16,24,40,.06);
    }

    .wizard-slides[b-4yepw2ge1a] {
        display: flex;
        width: 300%; /* 3 pasos */
        transition: transform .6s cubic-bezier(.22,.61,.36,1);
    }

    .wizard-slide[b-4yepw2ge1a] {
        min-width: 100%;
        padding: 1rem; /* espacio interno */
    }


    /* Mejora visual en pantallas grandes */
    @media (min-width: 768px) {
        .wizard-slide[b-4yepw2ge1a]

    {
        padding: 1.25rem;
    }
    }

/* /Pages/Recibos/GenerarRecibos.razor.rz.scp.css */


.popup[b-3px8nf1y69] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 80%;
    max-width: 600px;
    height: 40%;
    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-3px8nf1y69] {
        transform: translate(-50%, -50%) scale(1);
    }

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

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

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

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

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

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

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

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

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

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

/* Parpadeo */
@keyframes blink-animation-b-3px8nf1y69 {
    50% {
        visibility: hidden;
    }
}

.blink[b-3px8nf1y69] {
    animation: blink-animation-b-3px8nf1y69 1s step-start infinite;
}

.bold[b-3px8nf1y69] {
    font-weight: bold;
}
/* /Pages/Recibos/Recibos.razor.rz.scp.css */
body[b-qqq884j1pf] {
    font-family: Arial, sans-serif;
    background-color: #f0f4f8;
    color: #333;
    margin: 0;
    padding: 0;
}


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

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

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



.facturacion h2[b-qqq884j1pf], .formas-pago h3[b-qqq884j1pf] {
    color: #007b5e;
}

.factura-pendiente[b-qqq884j1pf], .facturas-pagadas[b-qqq884j1pf] {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

    .factura-pendiente table[b-qqq884j1pf], .facturas-pagadas table[b-qqq884j1pf] {
        width: 100%;
        border-collapse: collapse;
    }

    .factura-pendiente th[b-qqq884j1pf], .facturas-pagadas th[b-qqq884j1pf], .facturas-pagadas td[b-qqq884j1pf] {
        border-bottom: 1px solid #ddd;
        padding: 10px;
        text-align: left;
    }

        .factura-pendiente th input[type="checkbox"][b-qqq884j1pf] {
            margin-right: 5px;
        }

    .facturas-pagadas tbody tr:hover[b-qqq884j1pf] {
        background-color: #f9f9f9;
    }

.accion-btn[b-qqq884j1pf] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

    .accion-btn i[b-qqq884j1pf] {
        font-size: 18px;
    }

    .accion-btn.pickup[b-qqq884j1pf] {
        color: #007b5e;
    }

.pagination[b-qqq884j1pf] {
    text-align: center;
    margin-top: 20px;
}

    .pagination button[b-qqq884j1pf] {
        background-color: #1463f2;
        color: #fff;
        border: none;
        padding: 10px;
        margin: 0 5px;
        cursor: pointer;
        border-radius: 4px;
    }

        .pagination button.active[b-qqq884j1pf] {
            background-color: #5274c3;
        }

        .pagination button:hover[b-qqq884j1pf] {
            background-color: #005a43;
        }



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

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

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

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

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

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

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

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

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

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

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


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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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


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

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



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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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


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

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



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

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

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

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

/* /Pages/Utilidades/EmailSheduler.razor.rz.scp.css */
/* Contenedor general más respirado y ocupando pantalla */
.scheduler[b-5z8um9kmgi] {
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    min-height: calc(100vh - 140px);
}

/* Formulario con buen espacio vertical */
.rz-form[b-5z8um9kmgi] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.rz-form-field[b-5z8um9kmgi] {
    width: 100%;
}

.block-label[b-5z8um9kmgi] {
    display: block;
    font-weight: 600;
    margin-bottom: .25rem;
}

/* Caja indented y elegante para las opciones */
.radio-stack[b-5z8um9kmgi] {
    background: #f9fbff;
    border: 1px solid #e6eefc;
    border-left: 3px solid #cfe2ff;
    border-radius: .75rem;
    padding: .5rem .75rem .75rem 1rem;
}