/* ========================================
   LISTADEPOSITOSRDC - ESTILOS MODERNOS
   ======================================== */

/* Variables */
:root {
    --listadepositosrdc-primary: #4b1ca4;
    --listadepositosrdc-primary-dark: #3a1580;
    --listadepositosrdc-primary-light: #6a28c4;
    --listadepositosrdc-success: #10b981;
    --listadepositosrdc-info: #3b82f6;
    --listadepositosrdc-warning: #f59e0b;
    --listadepositosrdc-danger: #ef4444;
    --listadepositosrdc-text-dark: #1f2937;
    --listadepositosrdc-text-gray: #6b7280;
    --listadepositosrdc-text-light: #9ca3af;
    --listadepositosrdc-bg-light: #f9fafb;
    --listadepositosrdc-bg-gray: #f3f4f6;
    --listadepositosrdc-border: #e5e7eb;
    --listadepositosrdc-white: #ffffff;
    --listadepositosrdc-shadow: rgba(0, 0, 0, 0.1);
    --listadepositosrdc-shadow-hover: rgba(75, 28, 164, 0.15);
}

/* Contenedor principal */
#listadepositosrdc-page-wrapper {
    min-height: 100vh;
    background: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);
    padding: 1.5rem;
}

#listadepositosrdc-container {
    max-width: 1400px;
    margin: 0 auto;
    background: var(--listadepositosrdc-white);
    border-radius: 1.5rem;
    box-shadow: 0 20px 60px var(--listadepositosrdc-shadow);
    overflow: hidden;
    animation: listadepositosrdcFadeIn 0.6s ease-out;
}

@keyframes listadepositosrdcFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Header */
#listadepositosrdc-header {
    background: linear-gradient(135deg, var(--listadepositosrdc-primary) 0%, var(--listadepositosrdc-primary-light) 100%);
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    #listadepositosrdc-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        animation: listadepositosrdcHeaderPulse 15s ease-in-out infinite;
    }

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

    50% {
        transform: translate(-5%, -5%) scale(1.1);
    }
}

#listadepositosrdc-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

    #listadepositosrdc-header-icon svg {
        width: 2rem;
        height: 2rem;
        color: var(--listadepositosrdc-white);
    }

#listadepositosrdc-header-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--listadepositosrdc-white);
    margin: 0 0 0.5rem 0;
    position: relative;
    z-index: 1;
}

#listadepositosrdc-header-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Filtros */
#listadepositosrdc-filters-container {
    padding: 2rem;
    border-bottom: 2px solid var(--listadepositosrdc-border);
}

.listadepositosrdc-filters-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--listadepositosrdc-text-dark);
    margin: 0 0 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.listadepositosrdc-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.listadepositosrdc-filter-option {
    position: relative;
    display: block;
    cursor: pointer;
}

    .listadepositosrdc-filter-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.listadepositosrdc-filter-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    background: var(--listadepositosrdc-bg-light);
    border: 2px solid var(--listadepositosrdc-border);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.listadepositosrdc-filter-icon {
    width: 2rem;
    height: 2rem;
    color: var(--listadepositosrdc-text-gray);
    transition: all 0.3s ease;
}

.listadepositosrdc-filter-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--listadepositosrdc-text-dark);
    text-align: center;
    transition: all 0.3s ease;
}

.listadepositosrdc-filter-option:hover .listadepositosrdc-filter-content {
    border-color: var(--listadepositosrdc-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--listadepositosrdc-shadow-hover);
}

.listadepositosrdc-filter-option.active .listadepositosrdc-filter-content {
    background: linear-gradient(135deg, var(--listadepositosrdc-primary) 0%, var(--listadepositosrdc-primary-light) 100%);
    border-color: var(--listadepositosrdc-primary);
    box-shadow: 0 8px 20px var(--listadepositosrdc-shadow-hover);
}

.listadepositosrdc-filter-option.active .listadepositosrdc-filter-icon {
    color: var(--listadepositosrdc-white);
}

.listadepositosrdc-filter-option.active .listadepositosrdc-filter-text {
    color: var(--listadepositosrdc-white);
}

/* Periodo Container */
.listadepositosrdc-periodo-container {
    padding: 2rem;
    background: var(--listadepositosrdc-bg-light);
    border-bottom: 2px solid var(--listadepositosrdc-border);
}

.listadepositosrdc-periodo-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--listadepositosrdc-primary);
    margin: 0 0 1rem 0;
}

.listadepositosrdc-periodo-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.listadepositosrdc-select {
    width: 100%;
    max-width: 500px;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    color: var(--listadepositosrdc-text-dark);
    background: var(--listadepositosrdc-white);
    border: 2px solid var(--listadepositosrdc-border);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    outline: none;
}

    .listadepositosrdc-select:focus {
        border-color: var(--listadepositosrdc-primary);
        box-shadow: 0 0 0 4px rgba(75, 28, 164, 0.1);
    }

/* Tablas */
.listadepositosrdc-table-wrapper {
    padding: 2rem;
}

.listadepositosrdc-table-main {
    border-top: 2px solid var(--listadepositosrdc-border);
}

.listadepositosrdc-table-header-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--listadepositosrdc-text-dark);
    margin: 0 0 1.5rem 0;
}

.listadepositosrdc-table-header-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--listadepositosrdc-primary);
}

.listadepositosrdc-table-scroll {
    overflow-x: auto;
    border-radius: 0.875rem;
    border: 1px solid var(--listadepositosrdc-border);
    -webkit-overflow-scrolling: touch;
}

.listadepositosrdc-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--listadepositosrdc-white);
    min-width: 900px;
}

    .listadepositosrdc-table thead {
        background: linear-gradient(135deg, var(--listadepositosrdc-primary) 0%, var(--listadepositosrdc-primary-light) 100%);
    }

        .listadepositosrdc-table thead th {
            padding: 1rem 0.75rem;
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--listadepositosrdc-white);
            text-align: left;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            white-space: normal !important; /* CAMBIO: Permitir múltiples líneas en headers */
            word-wrap: break-word;
            line-height: 1.3;
            vertical-align: middle;
        }

    .listadepositosrdc-table tbody tr {
        border-bottom: 1px solid var(--listadepositosrdc-border);
        transition: all 0.2s ease;
    }

        .listadepositosrdc-table tbody tr:hover {
            background: var(--listadepositosrdc-bg-light);
        }

        .listadepositosrdc-table tbody tr:last-child {
            border-bottom: none;
        }

    .listadepositosrdc-table tbody td {
        padding: 1rem 0.75rem;
        font-size: 0.9375rem;
        color: var(--listadepositosrdc-text-dark);
        vertical-align: middle;
    }

        /* ========================================
   COLUMNAS ESPECÍFICAS CON AJUSTE
   ======================================== */

        /* FECHA - Ajustable (multilínea) */
        .listadepositosrdc-table tbody td:nth-child(1) { /* Fecha */
            width: 10%;
            white-space: normal !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
            line-height: 1.4;
            font-weight: 600;
            color: var(--listadepositosrdc-info);
        }

        /* Tipo de Ingreso */
        .listadepositosrdc-table tbody td:nth-child(2) {
            width: 15%;
            white-space: normal;
            word-wrap: break-word;
            overflow-wrap: break-word;
            line-height: 1.4;
        }

        /* SubTipo de Ingreso */
        .listadepositosrdc-table tbody td:nth-child(3) {
            width: 15%;
            white-space: normal;
            word-wrap: break-word;
            overflow-wrap: break-word;
            line-height: 1.4;
        }

/* CONCEPTO - Ajustable (multilínea) */
.listadepositosrdc-table-concept {
    width: 25% !important;
    max-width: 300px;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    line-height: 1.5;
    padding-right: 1.5rem !important;
}

/* IMPORTE - Centrado y destacado */
.listadepositosrdc-table-amount {
    width: 12% !important;
    font-weight: 700;
    color: var(--listadepositosrdc-success);
    text-align: right !important;
    white-space: nowrap;
    font-size: 1.05rem;
    padding-right: 1rem !important;
}

/* Header de IMPORTE también centrado a la derecha */
.listadepositosrdc-table thead th:nth-child(5) { /* Importe header */
    text-align: right !important;
    padding-right: 1rem !important;
}

/* PERIODO - Ajustable (multilínea) */
.listadepositosrdc-table tbody td:nth-child(6) { /* Periodo */
    width: 13%;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4;
    text-align: center;
}

/* COMPROBANTE/ACCIONES */
.listadepositosrdc-table-actions {
    width: 10% !important;
    text-align: center !important;
    white-space: nowrap;
}

/* Botón de descarga */
.listadepositosrdc-btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--listadepositosrdc-white);
    background: var(--listadepositosrdc-success);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

    .listadepositosrdc-btn-download:hover {
        background: #059669;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    .listadepositosrdc-btn-download svg {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
    }

/* Estados de carga y vacío */
.listadepositosrdc-table-loading,
.listadepositosrdc-table-empty {
    padding: 3rem 2rem;
    text-align: center;
}

.listadepositosrdc-spinner {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--listadepositosrdc-border);
    border-top-color: var(--listadepositosrdc-primary);
    border-radius: 50%;
    animation: listadepositosrdcSpin 0.8s linear infinite;
    margin-bottom: 1rem;
}

@keyframes listadepositosrdcSpin {
    to {
        transform: rotate(360deg);
    }
}

.listadepositosrdc-table-loading span {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--listadepositosrdc-text-gray);
}

.listadepositosrdc-empty-icon {
    width: 4rem;
    height: 4rem;
    color: var(--listadepositosrdc-text-light);
    margin-bottom: 1rem;
}

.listadepositosrdc-table-empty p {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--listadepositosrdc-text-gray);
    margin: 0;
}

/* ========================================
   RESPONSIVE DESIGN - TABLET
   ======================================== */
@media (max-width: 1024px) {
    #listadepositosrdc-page-wrapper {
        padding: 1rem;
    }

    #listadepositosrdc-container {
        border-radius: 1rem;
    }

    #listadepositosrdc-header {
        padding: 2rem 1.5rem;
    }

    .listadepositosrdc-filters-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .listadepositosrdc-table-wrapper {
        padding: 1.5rem;
    }

    .listadepositosrdc-table {
        min-width: 850px;
    }

        .listadepositosrdc-table thead th {
            padding: 0.875rem 0.5rem;
            font-size: 0.8125rem;
        }

        .listadepositosrdc-table tbody td {
            padding: 0.875rem 0.5rem;
            font-size: 0.875rem;
        }

    .listadepositosrdc-table-concept {
        max-width: 250px;
        width: 28%;
    }

    .listadepositosrdc-table-amount {
        font-size: 1rem;
    }
}

/* ========================================
   RESPONSIVE DESIGN - MÓVIL
   ======================================== */
@media (max-width: 768px) {
    #listadepositosrdc-page-wrapper {
        padding: 0.75rem;
    }

    #listadepositosrdc-container {
        border-radius: 0.75rem;
    }

    #listadepositosrdc-header {
        padding: 1.5rem 1rem;
    }

    #listadepositosrdc-header-icon {
        width: 3.5rem;
        height: 3.5rem;
    }

        #listadepositosrdc-header-icon svg {
            width: 1.75rem;
            height: 1.75rem;
        }

    #listadepositosrdc-header-title {
        font-size: 1.5rem;
    }

    #listadepositosrdc-header-subtitle {
        font-size: 1.125rem;
    }

    /* Filtros en móvil */
    #listadepositosrdc-filters-container {
        padding: 1.25rem;
    }

    .listadepositosrdc-filters-title {
        font-size: 1rem;
    }

    .listadepositosrdc-filters-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .listadepositosrdc-filter-content {
        flex-direction: row;
        justify-content: flex-start;
        padding: 0.875rem 1rem;
    }

    .listadepositosrdc-filter-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .listadepositosrdc-filter-text {
        font-size: 0.875rem;
        text-align: left;
    }

    /* Periodo en móvil */
    .listadepositosrdc-periodo-container {
        padding: 1.25rem;
    }

    .listadepositosrdc-periodo-title {
        font-size: 1rem;
        flex-wrap: wrap;
    }

    .listadepositosrdc-select {
        max-width: 100%;
        font-size: 0.9375rem;
        padding: 0.75rem 0.875rem;
    }

    /* Tablas en móvil */
    .listadepositosrdc-table-wrapper {
        padding: 1rem;
    }

    .listadepositosrdc-table-header-title {
        font-size: 1rem;
        gap: 0.5rem;
    }

    .listadepositosrdc-table-header-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .listadepositosrdc-table-scroll {
        border-radius: 0.5rem;
    }

    .listadepositosrdc-table {
        min-width: 750px;
    }

        /* MÓVIL: Headers más grandes */
        .listadepositosrdc-table thead th {
            padding: 0.875rem 0.5rem;
            font-size: 0.875rem; /* Aumentado de 0.75rem a 0.875rem */
            line-height: 1.3;
        }

        /* MÓVIL: Contenido de celdas más grande */
        .listadepositosrdc-table tbody td {
            padding: 0.875rem 0.5rem;
            font-size: 0.9375rem; /* Aumentado de 0.8125rem a 0.9375rem */
        }

    .listadepositosrdc-table-concept {
        max-width: 180px;
        width: 30%;
        padding-right: 0.75rem !important;
        font-size: 0.875rem; /* Aumentado de 0.75rem a 0.875rem */
    }

    .listadepositosrdc-table-amount {
        font-size: 1rem; /* Aumentado de 0.875rem a 1rem */
        padding-right: 0.5rem !important;
    }

    .listadepositosrdc-btn-download {
        padding: 0.5rem 0.625rem;
        font-size: 0.8125rem; /* Aumentado de 0.75rem a 0.8125rem */
        gap: 0.375rem;
    }

        .listadepositosrdc-btn-download svg {
            width: 0.875rem;
            height: 0.875rem;
        }
}

/* ========================================
   RESPONSIVE DESIGN - MÓVIL PEQUEÑO
   ======================================== */
@media (max-width: 480px) {
    #listadepositosrdc-page-wrapper {
        padding: 0.5rem;
    }

    #listadepositosrdc-container {
        border-radius: 0.5rem;
    }

    #listadepositosrdc-header {
        padding: 1.25rem 0.875rem;
    }

    #listadepositosrdc-header-icon {
        width: 3rem;
        height: 3rem;
    }

        #listadepositosrdc-header-icon svg {
            width: 1.5rem;
            height: 1.5rem;
        }

    #listadepositosrdc-header-title {
        font-size: 1.25rem;
    }

    #listadepositosrdc-header-subtitle {
        font-size: 1rem;
    }

    #listadepositosrdc-filters-container,
    .listadepositosrdc-periodo-container,
    .listadepositosrdc-table-wrapper {
        padding: 1rem;
    }

    .listadepositosrdc-filters-title {
        font-size: 0.9375rem;
    }

    .listadepositosrdc-filter-content {
        padding: 0.75rem 0.875rem;
    }

    .listadepositosrdc-filter-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .listadepositosrdc-filter-text {
        font-size: 0.8125rem;
    }

    .listadepositosrdc-periodo-title,
    .listadepositosrdc-table-header-title {
        font-size: 0.9375rem;
    }

    .listadepositosrdc-select {
        font-size: 0.875rem;
        padding: 0.625rem 0.75rem;
    }

    .listadepositosrdc-table {
        min-width: 700px;
    }

        /* MÓVIL PEQUEÑO: Headers más grandes */
        .listadepositosrdc-table thead th {
            padding: 0.75rem 0.375rem;
            font-size: 0.8125rem; /* Aumentado de 0.6875rem a 0.8125rem */
        }

        /* MÓVIL PEQUEÑO: Contenido más grande */
        .listadepositosrdc-table tbody td {
            padding: 0.75rem 0.375rem;
            font-size: 0.875rem; /* Aumentado de 0.75rem a 0.875rem */
        }

    .listadepositosrdc-table-concept {
        max-width: 150px;
        font-size: 0.8125rem; /* Aumentado de 0.6875rem a 0.8125rem */
    }

    .listadepositosrdc-table-amount {
        font-size: 0.9375rem; /* Aumentado de 0.8125rem a 0.9375rem */
    }

    .listadepositosrdc-btn-download {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem; /* Aumentado de 0.6875rem a 0.75rem */
        gap: 0.25rem;
    }

        .listadepositosrdc-btn-download svg {
            width: 0.75rem;
            height: 0.75rem;
        }

    .listadepositosrdc-table-loading,
    .listadepositosrdc-table-empty {
        padding: 2rem 1rem;
    }

    .listadepositosrdc-spinner {
        width: 2rem;
        height: 2rem;
        border-width: 2px;
    }

    .listadepositosrdc-empty-icon {
        width: 3rem;
        height: 3rem;
    }

    .listadepositosrdc-table-loading span,
    .listadepositosrdc-table-empty p {
        font-size: 0.875rem;
    }
}

/* ========================================
   ACCESIBILIDAD
   ======================================== */
.listadepositosrdc-filter-option:focus-within .listadepositosrdc-filter-content {
    outline: 3px solid var(--listadepositosrdc-primary);
    outline-offset: 2px;
}

.listadepositosrdc-select:focus-visible,
.listadepositosrdc-btn-download:focus-visible {
    outline: 3px solid var(--listadepositosrdc-primary);
    outline-offset: 2px;
}

/* Mejor contraste en dark mode */
@media (prefers-color-scheme: dark) {
    .listadepositosrdc-table-scroll {
        scrollbar-color: var(--listadepositosrdc-primary) var(--listadepositosrdc-border);
    }
}

/* Scrollbar personalizado */
.listadepositosrdc-table-scroll::-webkit-scrollbar {
    height: 8px;
}

.listadepositosrdc-table-scroll::-webkit-scrollbar-track {
    background: var(--listadepositosrdc-bg-light);
    border-radius: 10px;
}

.listadepositosrdc-table-scroll::-webkit-scrollbar-thumb {
    background: var(--listadepositosrdc-primary-light);
    border-radius: 10px;
}

    .listadepositosrdc-table-scroll::-webkit-scrollbar-thumb:hover {
        background: var(--listadepositosrdc-primary);
    }