/* Estilos específicos para la página Home.razor */

/* ===================================================================== */
/* ESTILOS MOVIDOS DESDE EL ARCHIVO HOME.RAZOR */
/* ===================================================================== */

/* Modal Container */
.modal-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: slideIn 0.4s ease-out;
    position: relative;
}

/* Modal Header */
.modal-header {
    background: linear-gradient(135deg, #0033A0, #002080);
    color: white;
    padding: 25px 30px;
    text-align: center;
    position: relative;
}

    .modal-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
        opacity: 0.3;
    }

.modal-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    position: relative;
    z-index: 2;
    animation: pulse 2s ease-in-out infinite;
}

.modal-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Modal Body */
.modal-body {
    padding: 40px 30px;
    text-align: center;
}

.modal-question {
    font-size: 18px;
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 30px;
    line-height: 1.6;
}

.modal-description {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 35px;
    line-height: 1.5;
}

/* Action Buttons */
.modal-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    padding: 0 30px 30px;
}

.btn-modal {
    flex: 1;
    max-width: 140px;
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

    .btn-modal::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left 0.6s ease;
    }

    .btn-modal:hover::before {
        left: 100%;
    }

.btn-no {
    background: #ecf0f1;
    color: #7f8c8d;
    border: 2px solid #bdc3c7;
}

    .btn-no:hover {
        background: #d5dbdb;
        color: #2c3e50;
        border-color: #95a5a6;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(149, 165, 166, 0.3);
    }

.btn-yes {
    background: linear-gradient(135deg, #0033A0, #002080);
    color: white;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0, 51, 160, 0.3);
}

    .btn-yes:hover {
        background: linear-gradient(135deg, #002080, #001560);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 51, 160, 0.4);
    }

.btn-modal:active {
    transform: translateY(0);
}

/* Loading state */
.btn-modal.loading {
    pointer-events: none;
    opacity: 0.7;
}

    .btn-modal.loading .btn-text {
        opacity: 0;
    }

.btn-modal .loading-spinner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: none;
}

.btn-modal.loading .loading-spinner {
    display: block;
}

/* Dashboard Header Styles */
.dashboard-header {
    background: white;
    padding: 25px 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.dashboard-title {
    color: #2c3e50;
    font-size: 28px;
    font-weight: 600;
    margin: 0;
}

/* Estilos para tarjeta de entrada (estilo Inicio.razor) - SOLO EN HOME-PAGE */
.home-page .vu-entry-options-inline {
    margin-bottom: 30px;
}

.home-page .vu-entry-options-inline-container {
    display: flex;
    justify-content: flex-start;
    max-width: 600px;
}

.home-page .vu-entry-card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 30px;
    display: flex;
    gap: 25px;
    align-items: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
}

    .home-page .vu-entry-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    }

.home-page .vu-entry-icon {
    width: 80px;
    height: 80px;
    min-width: 80px;
    background: linear-gradient(135deg, #0033A0, #002080);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

    .home-page .vu-entry-icon svg {
        width: 40px;
        height: 40px;
        stroke: white;
    }

.home-page .vu-entry-icon-image {
    width: 50px;
    height: 50px;
}

.home-page .vu-entry-content {
    flex: 1;
}

    .home-page .vu-entry-content h3 {
        margin: 0 0 12px 0;
        font-size: 20px;
        font-weight: 600;
        color: #2c3e50;
    }

    .home-page .vu-entry-content p {
        margin: 0 0 20px 0;
        font-size: 18px;
        font-weight: normal;
        line-height: 1.6;
        color: #1f1c1c;
    }

    .home-page .vu-entry-content .vu-btn-primary.rz-button {
        background: linear-gradient(135deg, #0033A0, #002080) !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 12px 32px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: white !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 8px rgba(0, 51, 160, 0.3) !important;
        text-transform: none !important;
    }

        .home-page .vu-entry-content .vu-btn-primary.rz-button:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 4px 12px rgba(0, 51, 160, 0.4) !important;
            background: linear-gradient(135deg, #002080, #001560) !important;
        }

        .home-page .vu-entry-content .vu-btn-primary.rz-button .rz-button-text {
            color: white !important;
        }

/* Responsive para tarjeta de entrada */
@@media (max-width: 768px) {
    .home-page .vu-entry-options-inline-container {
        max-width: 100%;
    }

    .home-page .vu-entry-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 25px 20px;
    }

    .home-page .vu-entry-content .vu-btn-primary.rz-button {
        width: 100%;
        justify-content: center;
    }
}

/* Animaciones adicionales */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }

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

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

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

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

/* ===================================================================== */
/* FIN DE ESTILOS MOVIDOS DESDE HOME.RAZOR */
/* ===================================================================== */

/* Estilos adicionales para el modal de datos personales */
.modal-datos-personales-dialog .rz-dialog {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

.modal-datos-personales-dialog .rz-dialog-content {
    padding: 0 !important;
}

.modal-datos-personales-dialog .rz-dialog-titlebar {
    display: none !important;
}

/* Estilos para iconos SVG en botones de Radzen */
.header-actions .rz-button svg {
    color: white !important;
    width: 14px !important;
    height: 14px !important;
}

.btn-modal svg {
    flex-shrink: 0;
}

.modal-icon svg {
    width: 32px;
    height: 32px;
}

/* ===================================================================== */
/* ESTILOS MOVIDOS DESDE CMPLISTCUENTAS.RAZOR */
/* ===================================================================== */

/* Estilos para las tarjetas de estadísticas */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.3s ease;
}

    .stat-card:hover {
        transform: translateY(-1px);
    }

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    flex-shrink: 0;
}

    /* Estilos para iconos SVG */
    .stat-icon svg {
        width: 20px;
        height: 20px;
        color: white;
    }

    .stat-icon.total {
        background: linear-gradient(135deg, #0033A0, #002080);
    }

    .stat-icon.new {
        background: linear-gradient(135deg, #2ecc71, #27ae60);
    }

    .stat-icon.registered {
        background: linear-gradient(135deg, #9b59b6, #8e44ad);
    }

    .stat-icon.processing {
        background: linear-gradient(135deg, #f39c12, #e67e22);
    }


.stat-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
}

.stat-content p {
    color: #1f1c1c;
    font-size: 18px;
    font-weight: normal;
    margin: 0;
}

.content-card-header {
    background: white;
    padding: 25px 30px;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #ecf0f1;
    margin-bottom: 0;
}

.content-card-title {
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.filters-section {
    padding: 20px 30px;
    background: #f8f9fa;
    border-bottom: 1px solid #ecf0f1;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-label {
    font-size: 12px;
    color: #7f8c8d;
    font-weight: 500;
    text-transform: uppercase;
}

.filter-control {
    padding: 10px 15px;
    border: 2px solid #ecf0f1;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    background: white;
    min-width: 150px;
}

    .filter-control:focus {
        outline: none;
        border-color: #0033A0;
    }

.search-box {
    flex: 1;
    max-width: 300px;
}

/* Media queries para stats y filtros */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 8px;
    }

    .filters-section {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        width: 100%;
    }

    .search-box {
        max-width: none;
    }
}

/* Estilos para títulos y labels */
.home-page h1 {
    color: #0033A0;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.home-page label {
    font-weight: 600;
    display: block;
    margin: 1rem 0 0.5rem;
}

/* Estilos para responsividad completa */
.home-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

    .home-page .container-fluid {
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }

    .home-page .responsive-grid-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

/* Mejorar la transición cuando se carga la página */
.home-page {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Estilos para los encabezados de la grilla RadzenDataGrid - COLOR AZUL */
/* Selectores múltiples para asegurar compatibilidad */
.home-page .rz-datatable .rz-datatable-thead th,
.home-page .rz-data-grid .rz-data-grid-header th,
.home-page .rz-grid .rz-grid-header th,
.home-page .rz-datatable thead th,
.home-page .rz-data-grid thead th {
    background-color: #0033A0 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #002080 !important;
}

    /* Asegurar que el texto del título de columna sea blanco */
    .home-page .rz-datatable .rz-datatable-thead th .rz-column-title,
    .home-page .rz-data-grid .rz-data-grid-header th .rz-column-title,
    .home-page .rz-datatable thead th,
    .home-page .rz-data-grid thead th,
    .home-page .rz-datatable .rz-datatable-thead th span,
    .home-page .rz-data-grid .rz-data-grid-header th span {
        color: #ffffff !important;
        font-weight: 600 !important;
    }

        /* Hover effect para los encabezados */
        .home-page .rz-datatable .rz-datatable-thead th:hover,
        .home-page .rz-data-grid .rz-data-grid-header th:hover,
        .home-page .rz-datatable thead th:hover,
        .home-page .rz-data-grid thead th:hover {
            background-color: #002080 !important;
        }

            .home-page .rz-datatable .rz-datatable-thead th:hover .rz-column-title,
            .home-page .rz-data-grid .rz-data-grid-header th:hover .rz-column-title,
            .home-page .rz-datatable .rz-datatable-thead th:hover span,
            .home-page .rz-data-grid .rz-data-grid-header th:hover span {
                color: #ffffff !important;
            }

/* Mejorar la apariencia general de la grilla */
.home-page .rz-datatable {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100% !important;
    min-width: 100% !important;
    table-layout: auto;
}

.home-page .rz-data-grid {
    width: 100% !important;
    min-width: 100% !important;
}

/* Responsividad para la grilla */
.home-page .rz-datatable table {
    width: 100% !important;
    min-width: 800px; /* Ancho mínimo para evitar que se comprima demasiado */
}

/* Responsividad para columnas */
.home-page .rz-datatable td,
.home-page .rz-datatable th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

    /* Columnas específicas más anchas */
    .home-page .rz-datatable td:first-child,
    .home-page .rz-datatable th:first-child {
        min-width: 120px; /* N° Radicado */
    }

    .home-page .rz-datatable td:nth-child(2),
    .home-page .rz-datatable th:nth-child(2) {
        min-width: 100px; /* Tipo */
    }

    .home-page .rz-datatable td:nth-child(3),
    .home-page .rz-datatable th:nth-child(3) {
        min-width: 100px; /* Fecha */
    }

    .home-page .rz-datatable td:nth-child(4),
    .home-page .rz-datatable th:nth-child(4) {
        min-width: 100px; /* Estado */
    }

    .home-page .rz-datatable td:last-child,
    .home-page .rz-datatable th:last-child {
        min-width: 200px; /* Acciones */
    }

/* Responsividad para dispositivos móviles */
@media (max-width: 768px) {
    .home-page .rz-datatable table {
        min-width: 600px;
    }

    .home-page .rz-datatable td,
    .home-page .rz-datatable th {
        padding: 8px 4px;
        font-size: 0.875rem;
    }

        .home-page .rz-datatable td:last-child .rz-button {
            padding: 4px 8px;
            font-size: 0.75rem;
        }
}

@media (max-width: 480px) {
    .home-page .rz-datatable table {
        min-width: 500px;
    }

    .home-page .rz-datatable td,
    .home-page .rz-datatable th {
        padding: 6px 2px;
        font-size: 0.8rem;
    }
}

/* Estilos para las filas de datos */
.home-page .rz-datatable .rz-datatable-tbody tr {
    border-bottom: 1px solid #e9ecef;
}

    .home-page .rz-datatable .rz-datatable-tbody tr:hover {
        background-color: #f8f9fa;
    }

/* Colores pasteles para las etiquetas (badges) en la página Home */
.home-page .rz-badge-light {
    background-color: #f2f3f5 !important;
    color: #6c757d !important;
}

.home-page .rz-badge-success {
    background-color: #a8e6cf !important;
    color: #2d6a4f !important;
}

.home-page .rz-badge-info {
    background-color: #a2d2e2 !important;
    color: #1a5e81 !important;
}

.home-page .rz-badge-danger {
    background-color: #f7cad0 !important;
    color: #9d4c5b !important;
}

.home-page .rz-badge-warning {
    background-color: #ffd8a8 !important;
    color: #7d5700 !important;
}

.home-page .rz-background-color-series-4 {
    background-color: #d0c4e0 !important;
    color: #4a266a !important;
}

/* Estilos para el resumen de trámites responsive */
.home-page .vu-summary-item {
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.875rem;
    flex: 1 1 auto;
    text-align: center;
    min-width: 100px;
}

/* Estilos para la cabecera de la página responsive */
.home-page .vu-tramites-title {
    color: #1a3d8f;
    font-weight: 600;
}

.home-page .vu-tramites-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

@media (max-width: 768px) {
    .home-page .vu-tramites-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

        .home-page .vu-tramites-header h1 {
            margin-bottom: 0.5rem;
            font-size: 1.5rem;
        }

    .home-page .vu-summary-item {
        font-size: 0.8rem;
        padding: 6px 12px;
        min-width: 80px;
    }
}

@media (max-width: 480px) {
    .home-page .vu-tramites-header h1 {
        font-size: 1.3rem;
    }
}

/* Estilos para cabecera de cuentas */
.cuentas-page h1 {
    color: #0033A0;
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.cuentas-page .vu-tramites-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* Espaciado adicional para cuentas */
.cuentas-page .mt-4 {
    margin-top: 1.5rem !important;
}

/* Estilo para los botones de acción */
.home-page .rz-button.rz-button-light {
    color: #1a3d8f;
    background-color: transparent;
    border-color: #e9ecef;
}

    .home-page .rz-button.rz-button-light:hover {
        background-color: #e9ecef;
    }

/* Estilo para el botón de nueva solicitud */
.home-page .rz-button.rz-button-info {
    background-color: #a2d2e2;
    color: #1a5e81;
}

    .home-page .rz-button.rz-button-info:hover {
        background-color: #89c5d9;
    }

/* Estilo para las pills/badges en la tabla */
.home-page .rz-badge.rz-badge-pill {
    padding: 0.4em 0.8em;
    font-weight: 500;
}

/* Colores para cada estado en la tabla (versión pastel) */
.home-page .rz-badge.rz-badge-success {
    background-color: #a8e6cf !important;
    color: #2d6a4f !important;
}

.home-page .rz-badge.rz-badge-info {
    background-color: #a2d2e2 !important;
    color: #1a5e81 !important;
}

.home-page .rz-badge.rz-badge-danger {
    background-color: #f7cad0 !important;
    color: #9d4c5b !important;
}

.home-page .rz-badge.rz-badge-warning {
    background-color: #ffd8a8 !important;
    color: #7d5700 !important;
}

/* Card de contenedor responsive */
.home-page .vu-card {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: none;
    width: 100% !important;
    max-width: 100%;
    overflow: hidden;
}

.home-page .vu-card-body {
    padding: 1.5rem;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

/* RadzenCard responsivo */
.home-page .rz-card {
    width: 100% !important;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
}

/* Filtros responsivos */
.home-page .d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
}

    .home-page .d-flex > * {
        flex: 1 1 auto;
        min-width: 150px;
    }

@media (max-width: 768px) {
    .home-page .vu-card-body {
        padding: 1rem;
    }

    .home-page .d-flex {
        flex-direction: column;
    }

        .home-page .d-flex > * {
            width: 100%;
            min-width: unset;
        }
}

/* Contenedor de resumen responsive */
.home-page .vu-summary-item {
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.875rem;
    flex: 1 1 auto;
    text-align: center;
    min-width: 100px;
}

@media (max-width: 768px) {
    .home-page .vu-summary-item {
        font-size: 0.8rem;
        padding: 6px 12px;
        min-width: 80px;
    }
}

/* ================================================== */
/* ESTILOS PARA CUENTAS PAGE */
/* ================================================== */

/* Estilos para títulos y labels en cuentas */
.cuentas-page h1 {
    color: #0033A0;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.cuentas-page label {
    font-weight: 600;
    display: block;
    margin: 1rem 0 0.5rem;
}

/* Estilos para los encabezados de la grilla RadzenDataGrid - COLOR AZUL */
.cuentas-page .rz-datatable .rz-datatable-thead th,
.cuentas-page .rz-data-grid .rz-data-grid-header th,
.cuentas-page .rz-grid .rz-grid-header th,
.cuentas-page .rz-datatable thead th,
.cuentas-page .rz-data-grid thead th {
    background-color: #0033A0 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #002080 !important;
}

/* Estilos específicos para la clase personalizada en cuentas */
.cuentas-page .custom-blue-headers thead th,
.cuentas-page .custom-blue-headers .rz-datatable-thead th,
.cuentas-page .custom-blue-headers th {
    background-color: #0033A0 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #002080 !important;
}

    .cuentas-page .custom-blue-headers thead th *,
    .cuentas-page .custom-blue-headers .rz-datatable-thead th *,
    .cuentas-page .custom-blue-headers th * {
        color: #ffffff !important;
    }

/* Hover effect para los encabezados en cuentas */
.cuentas-page .rz-datatable .rz-datatable-thead th:hover,
.cuentas-page .rz-data-grid .rz-data-grid-header th:hover,
.cuentas-page .rz-datatable thead th:hover,
.cuentas-page .rz-data-grid thead th:hover {
    background-color: #002080 !important;
}

/* Mejorar la apariencia general de la grilla en cuentas */
.cuentas-page .rz-datatable {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

    /* Estilos para las filas de datos en cuentas */
    .cuentas-page .rz-datatable .rz-datatable-tbody tr {
        border-bottom: 1px solid #e9ecef;
    }

        .cuentas-page .rz-datatable .rz-datatable-tbody tr:hover {
            background-color: #f8f9fa;
        }

    /* Estilos para botones de ordenamiento en encabezados cuentas */
    .cuentas-page .rz-datatable .rz-datatable-thead th .rz-sortable-column-icon,
    .cuentas-page .rz-data-grid .rz-data-grid-header th .rz-sortable-column-icon {
        color: #ffffff !important;
    }

    .cuentas-page .rz-datatable .rz-datatable-thead th:hover .rz-sortable-column-icon,
    .cuentas-page .rz-data-grid .rz-data-grid-header th:hover .rz-sortable-column-icon {
        color: #e9ecef !important;
    }

/* Estilos para el paginador en cuentas */
.cuentas-page .rz-paginator {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 10px;
}

    .cuentas-page .rz-paginator .rz-paginator-page {
        color: #0033A0;
    }

        .cuentas-page .rz-paginator .rz-paginator-page.rz-state-active {
            background-color: #0033A0;
            color: white;
            border-color: #0033A0;
        }

/* Selectores universales adicionales para cuentas */
.cuentas-page th,
.cuentas-page thead th,
.cuentas-page .rz-datatable thead th,
.cuentas-page .rz-data-grid thead th,
.cuentas-page [class*="rz-"] thead th,
.cuentas-page [class*="custom-blue"] th,
.cuentas-page [class*="custom-blue"] thead th {
    background-color: #0033A0 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #002080 !important;
}

    .cuentas-page th *,
    .cuentas-page thead th *,
    .cuentas-page .rz-datatable thead th *,
    .cuentas-page [class*="custom-blue"] th *,
    .cuentas-page [class*="custom-blue"] thead th * {
        color: #ffffff !important;
    }

/* Eliminar esquinas blancas en cuentas */
.cuentas-page .rz-datatable thead tr th:first-child {
    border-top-left-radius: 0 !important;
    background-color: #0033A0 !important;
}

.cuentas-page .rz-datatable thead tr th:last-child {
    border-top-right-radius: 0 !important;
    background-color: #0033A0 !important;
}

.cuentas-page .rz-datatable .rz-datatable-thead {
    background-color: #0033A0 !important;
}

/* ================================================== */
/* ESTILOS PARA PQRS PAGE */
/* ================================================== */

/* Estilos para títulos y labels en PQRS */
.pqrs-page h1 {
    color: #0033A0;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.pqrs-page label {
    font-weight: 600;
    display: block;
    margin: 1rem 0 0.5rem;
}

/* Estilos para los encabezados de la grilla RadzenDataGrid - COLOR AZUL */
.pqrs-page .rz-datatable .rz-datatable-thead th,
.pqrs-page .rz-data-grid .rz-data-grid-header th,
.pqrs-page .rz-grid .rz-grid-header th,
.pqrs-page .rz-datatable thead th,
.pqrs-page .rz-data-grid thead th {
    background-color: #0033A0 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #002080 !important;
}

/* Estilos específicos para la clase personalizada en PQRS */
.pqrs-page .custom-blue-headers thead th,
.pqrs-page .custom-blue-headers .rz-datatable-thead th,
.pqrs-page .custom-blue-headers th {
    background-color: #0033A0 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #002080 !important;
}

    .pqrs-page .custom-blue-headers thead th *,
    .pqrs-page .custom-blue-headers .rz-datatable-thead th *,
    .pqrs-page .custom-blue-headers th * {
        color: #ffffff !important;
    }

/* Hover effect para los encabezados en PQRS */
.pqrs-page .rz-datatable .rz-datatable-thead th:hover,
.pqrs-page .rz-data-grid .rz-data-grid-header th:hover,
.pqrs-page .rz-datatable thead th:hover,
.pqrs-page .rz-data-grid thead th:hover {
    background-color: #002080 !important;
}

/* Mejorar la apariencia general de la grilla en PQRS */
.pqrs-page .rz-datatable {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

    /* Estilos para las filas de datos en PQRS */
    .pqrs-page .rz-datatable .rz-datatable-tbody tr {
        border-bottom: 1px solid #e9ecef;
    }

        .pqrs-page .rz-datatable .rz-datatable-tbody tr:hover {
            background-color: #f8f9fa;
        }

    /* Estilos para botones de ordenamiento en encabezados PQRS */
    .pqrs-page .rz-datatable .rz-datatable-thead th .rz-sortable-column-icon,
    .pqrs-page .rz-data-grid .rz-data-grid-header th .rz-sortable-column-icon {
        color: #ffffff !important;
    }

    .pqrs-page .rz-datatable .rz-datatable-thead th:hover .rz-sortable-column-icon,
    .pqrs-page .rz-data-grid .rz-data-grid-header th:hover .rz-sortable-column-icon {
        color: #e9ecef !important;
    }

/* Estilos para el paginador en PQRS */
.pqrs-page .rz-paginator {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 10px;
}

    .pqrs-page .rz-paginator .rz-paginator-page {
        color: #0033A0;
    }

        .pqrs-page .rz-paginator .rz-paginator-page.rz-state-active {
            background-color: #0033A0;
            color: white;
            border-color: #0033A0;
        }

/* Estilos para cards y contenedores en PQRS */
.pqrs-page .vu-card {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: none;
}

.pqrs-page .vu-card-body {
    padding: 1.5rem;
}

/* Selectores adicionales más específicos para PQRS dentro de RadzenCard */
.pqrs-page .rz-card .rz-datatable .rz-datatable-thead th,
.pqrs-page .rz-card .custom-blue-headers thead th,
.pqrs-page .rz-card .custom-blue-headers .rz-datatable-thead th,
.pqrs-page .rz-card .custom-blue-headers th {
    background-color: #0033A0 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #002080 !important;
}

    .pqrs-page .rz-card .custom-blue-headers thead th *,
    .pqrs-page .rz-card .custom-blue-headers .rz-datatable-thead th *,
    .pqrs-page .rz-card .custom-blue-headers th * {
        color: #ffffff !important;
    }

/* Selectores universales y más amplios para PQRS */
.pqrs-page th,
.pqrs-page thead th,
.pqrs-page .rz-datatable thead th,
.pqrs-page .rz-data-grid thead th,
.pqrs-page [class*="rz-"] thead th,
.pqrs-page [class*="custom-blue"] th,
.pqrs-page [class*="custom-blue"] thead th {
    background-color: #0033A0 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #002080 !important;
}

    /* Asegurar que todo el texto dentro de los encabezados sea blanco */
    .pqrs-page th *,
    .pqrs-page thead th *,
    .pqrs-page .rz-datatable thead th *,
    .pqrs-page [class*="custom-blue"] th *,
    .pqrs-page [class*="custom-blue"] thead th * {
        color: #ffffff !important;
    }

/* Estilos adicionales para mejorar la grilla visualmente */
.home-page .rz-datatable .rz-datatable-tbody td {
    padding: 12px 8px;
    vertical-align: middle;
}

/* Estilos para el paginador */
.home-page .rz-paginator {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 10px;
}

    .home-page .rz-paginator .rz-paginator-page {
        color: #0033A0;
    }

        .home-page .rz-paginator .rz-paginator-page.rz-state-active {
            background-color: #0033A0;
            color: white;
            border-color: #0033A0;
        }

/* Estilos para botones de ordenamiento en encabezados */
.home-page .rz-datatable .rz-datatable-thead th .rz-sortable-column-icon,
.home-page .rz-data-grid .rz-data-grid-header th .rz-sortable-column-icon,
.home-page .rz-datatable thead th .rz-sortable-column-icon,
.home-page .rz-data-grid thead th .rz-sortable-column-icon {
    color: #ffffff !important;
}

.home-page .rz-datatable .rz-datatable-thead th:hover .rz-sortable-column-icon,
.home-page .rz-data-grid .rz-data-grid-header th:hover .rz-sortable-column-icon,
.home-page .rz-datatable thead th:hover .rz-sortable-column-icon,
.home-page .rz-data-grid thead th:hover .rz-sortable-column-icon {
    color: #e9ecef !important;
}

/* Estilos adicionales para asegurar que los títulos sean visibles */
.home-page .rz-datatable .rz-datatable-thead th span,
.home-page .rz-data-grid .rz-data-grid-header th span,
.home-page .rz-datatable thead th span,
.home-page .rz-data-grid thead th span {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.home-page .rz-datatable .rz-datatable-thead th a,
.home-page .rz-data-grid .rz-data-grid-header th a,
.home-page .rz-datatable thead th a,
.home-page .rz-data-grid thead th a {
    color: #ffffff !important;
    text-decoration: none;
}

    .home-page .rz-datatable .rz-datatable-thead th a:hover,
    .home-page .rz-data-grid .rz-data-grid-header th a:hover,
    .home-page .rz-datatable thead th a:hover,
    .home-page .rz-data-grid thead th a:hover {
        color: #e9ecef !important;
    }

/* Selectores más generales para capturar cualquier variación */
.home-page [class*="rz-"] thead th,
.home-page [class*="rz-"] .rz-datatable-thead th,
.home-page [class*="rz-"] header th {
    background-color: #0033A0 !important;
    color: #ffffff !important;
}

/* Estilos específicos para la clase personalizada */
.home-page .custom-blue-headers thead th,
.home-page .custom-blue-headers .rz-datatable-thead th,
.home-page .custom-blue-headers th {
    background-color: #0033A0 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #002080 !important;
}

.home-page q.custom-blue-headers {
    width: 100%;
}

.home-page .custom-blue-headers thead th *,
.home-page .custom-blue-headers .rz-datatable-thead th *,
.home-page .custom-blue-headers th * {
    color: #ffffff !important;
}

/* =================================================================== */
/* ESTILOS ADICIONALES PARA RESPONSIVIDAD COMPLETA AL 100% */
/* =================================================================== */

/* Estilos específicos para el layout de Home.razor */
.home-page {
    width: 100%;
    min-height: 100vh;
}

    .home-page .vu-tramites-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .home-page .responsive-grid-container {
        overflow-x: auto;
        width: 100%;
    }

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
    .home-page .vu-tramites-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

        .home-page .vu-tramites-header h1 {
            margin-bottom: 0.5rem;
            font-size: 1.5rem;
        }

    .home-page .responsive-grid-container {
        margin: 0 -15px;
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .home-page .vu-tramites-header h1 {
        font-size: 1.3rem;
    }

    .home-page .responsive-grid-container {
        margin: 0 -10px;
        padding: 0 10px;
    }
}

/* Estilos para asegurar que la grilla sea completamente responsive */
.home-page .rz-datatable,
.home-page .rz-data-grid {
    width: 100% !important;
    min-width: 100% !important;
    overflow-x: auto;
}

.home-page .rz-card {
    width: 100% !important;
    margin: 0 !important;
}

.home-page .vu-card {
    width: 100% !important;
    margin: 0 !important;
}

.home-page .vu-card-body {
    padding: 1rem;
    width: 100%;
}

/* Asegurar que todos los contenedores ocupen el 100% del ancho */
.home-page,
.home-page .container-fluid,
.home-page .row,
.home-page .col-12 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

    /* Contenedor de la grilla responsive */
    .home-page .responsive-grid-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Grilla completamente responsive */
    .home-page .rz-datatable,
    .home-page .rz-data-grid,
    .home-page .custom-blue-headers {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }

        /* Tabla interna responsive */
        .home-page .rz-datatable table,
        .home-page .rz-data-grid table {
            width: 100% !important;
            min-width: 700px; /* Ancho mínimo para scroll horizontal en móviles */
            table-layout: auto;
        }

    /* Paginador responsive */
    .home-page .rz-paginator {
        width: 100% !important;
        overflow-x: auto;
        flex-wrap: wrap;
        justify-content: center;
    }

/* Botones de paginación en móviles */
@media (max-width: 768px) {
    .home-page .rz-paginator .rz-paginator-pages {
        flex-wrap: wrap;
        justify-content: center;
    }

    .home-page .rz-paginator .rz-paginator-page {
        min-width: 35px;
        margin: 2px;
    }
}

/* Filtros completamente responsive */
.home-page .d-flex.mb-4 {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

    .home-page .d-flex.mb-4 > * {
        flex: 1 1 auto;
        min-width: 150px;
        max-width: 100%;
    }

@media (max-width: 768px) {
    .home-page .d-flex.mb-4 {
        flex-direction: column;
    }

        .home-page .d-flex.mb-4 > * {
            width: 100% !important;
            min-width: unset;
            max-width: 100%;
        }
}

/* Resumen de trámites responsive */
.home-page .d-flex.gap-2.mt-3 {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .home-page .d-flex.gap-2.mt-3 {
        justify-content: center;
    }
}

/* Columnas adaptables */
.home-page .rz-datatable td,
.home-page .rz-datatable th {
    padding: 8px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

    /* Botones de acción responsivos */
    .home-page .rz-datatable td:last-child {
        white-space: nowrap;
    }

        .home-page .rz-datatable td:last-child .rz-button {
            margin: 0 2px;
            padding: 4px 8px;
        }

@media (max-width: 768px) {
    .home-page .rz-datatable td:last-child .rz-button {
        padding: 2px 6px;
        font-size: 0.75rem;
    }
}

/* Scroll horizontal suave para la grilla en móviles */
@media (max-width: 768px) {
    .home-page .responsive-grid-container {
        border-left: 1px solid #dee2e6;
        border-right: 1px solid #dee2e6;
    }

    .home-page .rz-datatable table {
        min-width: 600px;
    }
}

@media (max-width: 480px) {
    .home-page .rz-datatable table {
        min-width: 500px;
    }
}

/* Asegurar que el contenido no se desborde */
.home-page * {
    box-sizing: border-box;
}

/* Estados de badges responsive */
.home-page .rz-badge {
    font-size: 0.75rem;
    padding: 0.25em 0.5em;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .home-page .rz-badge {
        font-size: 0.7rem;
        padding: 0.2em 0.4em;
    }
}


p.contenido {
    color: #1f1c1c;
    font-size: 18px;
    font-weight: normal;
    margin: 0;
}