/* 
   Documentos
*/

            .doc-search-wrapper {
                margin-bottom: 2.5rem;
                max-width: 900px;
                margin-left: auto;
                margin-right: auto;
            }

            .doc-search-bar {
                display: flex;
                gap: 0.5rem;
                background: var(--bg-card);
                padding: 0.5rem;
                border-radius: 50px;
                border: 1px solid var(--border-color);
                box-shadow: var(--shadow-sm);
                align-items: center;
                flex-wrap: wrap;
            }

            .doc-search-bar .search-text-input {
                flex: 1;
                min-width: 150px;
                padding: 0.75rem 1.25rem;
                border: none;
                background: transparent;
                outline: none;
                font-size: 1rem;
                color: var(--text-primary);
            }

            .doc-search-bar .search-text-input::placeholder {
                color: var(--text-tertiary);
            }

            .doc-search-bar .btn-search {
                border-radius: 50px;
                padding: 0.75rem 1.5rem;
                white-space: nowrap;
            }

            /* Custom Searchable Select */
            .searchable-select {
                position: relative;
                min-width: 180px;
            }

            .searchable-select-trigger {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.65rem 1rem;
                cursor: pointer;
                border-right: 1px solid var(--border-color);
                color: var(--text-primary);
                font-size: 0.95rem;
                white-space: nowrap;
                user-select: none;
                border-radius: 50px 0 0 50px;
            }

            .searchable-select-trigger i.fa-chevron-down {
                font-size: 0.65rem;
                color: var(--text-tertiary);
                transition: transform 0.2s;
            }

            .searchable-select.open .searchable-select-trigger i.fa-chevron-down {
                transform: rotate(180deg);
            }

            .searchable-select-dropdown {
                position: absolute;
                top: calc(100% + 8px);
                left: 0;
                width: 280px;
                background: var(--bg-card);
                border: 1px solid var(--border-color);
                border-radius: var(--radius-lg);
                box-shadow: var(--shadow-lg);
                z-index: 100;
                display: none;
                overflow: hidden;
            }

            .searchable-select.open .searchable-select-dropdown {
                display: block;
            }

            .searchable-select-search {
                padding: 0.75rem;
                border-bottom: 1px solid var(--border-color);
            }

            .searchable-select-search input {
                width: 100%;
                padding: 0.5rem 0.75rem;
                border: 1px solid var(--border-color);
                border-radius: var(--radius-sm);
                background: var(--bg-secondary);
                color: var(--text-primary);
                font-size: 0.85rem;
                outline: none;
            }

            .searchable-select-search input:focus {
                border-color: var(--primary);
            }

            .searchable-select-list {
                max-height: 200px;
                overflow-y: auto;
                padding: 0.25rem 0;
            }

            .searchable-select-item {
                padding: 0.6rem 1rem;
                cursor: pointer;
                font-size: 0.9rem;
                color: var(--text-primary);
                transition: background 0.15s;
            }

            .searchable-select-item:hover,
            .searchable-select-item.active {
                background: var(--primary);
                color: #fff;
            }

            .searchable-select-item.hidden {
                display: none;
            }

            /* Filtros secundarios (fechas) */
            .doc-filters-row {
                display: flex;
                gap: 0.75rem;
                justify-content: center;
                align-items: center;
                margin-top: 1rem;
                flex-wrap: wrap;
            }

            .doc-filter-group {
                display: flex;
                align-items: center;
                gap: 0.4rem;
            }

            .doc-filter-group label {
                font-size: 0.8rem;
                color: var(--text-secondary);
                white-space: nowrap;
            }

            .doc-filter-group input[type="date"] {
                padding: 0.4rem 0.6rem;
                border: 1px solid var(--border-color);
                border-radius: var(--radius-sm);
                background: var(--bg-card);
                color: var(--text-primary);
                font-size: 0.85rem;
                outline: none;
                font-family: inherit;
            }

            .doc-filter-group input[type="date"]:focus {
                border-color: var(--primary);
            }

            /* Estilos de tarjetas y efectos hover */
            .category-card, .document-card {
                border: 1px solid var(--border-color);
                transition: all 0.3s ease !important;
                background: var(--bg-card);
                overflow: hidden;
            }

            .category-card:hover, .document-card:hover {
                border-color: var(--primary) !important;
                box-shadow: var(--shadow-md);
                transform: translateY(-3px);
                z-index: 2;
            }

            /* Metadata de documentos */
            .doc-meta {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                font-size: 0.85rem;
                color: var(--text-secondary);
                margin-top: 0.75rem;
                flex-wrap: wrap;
            }

            .doc-type, .doc-size, .doc-date {
                border: 1px solid var(--border-color);
                display: inline-flex;
                align-items: center;
                gap: 0.3rem;
                padding: 0.25rem 0.6rem;
                border-radius: 6px;
                background: var(--bg-secondary);
                white-space: nowrap;
            }

            /* .doc-date {
                background: transparent;
                padding: 0;
                color: var(--text-tertiary);
            } */

            /* Responsive */
            @media (max-width: 768px) {
                .doc-search-bar {
                    border-radius: var(--radius-lg);
                    padding: 0.5rem;
                }

                .searchable-select {
                    min-width: 100%;
                    order: -1;
                }

                .searchable-select-trigger {
                    border-right: none;
                    border-bottom: 1px solid var(--border-color);
                    border-radius: var(--radius-md);
                    width: 100%;
                }

                .searchable-select-dropdown {
                    width: 100%;
                }

                .doc-search-bar .search-text-input {
                    min-width: 100%;
                }

                .doc-search-bar .btn-search {
                    width: 100%;
                    text-align: center;
                }

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

                .doc-filter-group {
                    justify-content: space-between;
                }

                .doc-filter-group input[type="date"] {
                    flex: 1;
                }

                .page-header-section {
                    text-align: center;
                }

                .breadcrumb {
                    justify-content: center;
                }

                .documents-grid {
                    grid-template-columns: 1fr;
                }

                .document-card {
                    flex-direction: column;
                    text-align: center;
                    padding: 1.5rem;
                }

                .doc-icon {
                    margin: 0 auto 1rem;
                    width: 60px;
                    height: 60px;
                    font-size: 1.5rem;
                }

                .doc-info {
                    margin-bottom: 1rem;
                }

                .doc-meta {
                    justify-content: center;
                    gap: 0.5rem;
                    display: flex;
                    flex-wrap: wrap;
                }

                .doc-type, .doc-size, .doc-date {
                    font-size: 0.8rem;
                    flex: 0 1 auto;
                }

                /* .doc-date {
                    flex: 0 0 100%;
                    display: flex;
                    justify-content: center;
                    margin-top: 0.3rem;
                    background: transparent;
                    padding: 0;
                } */

                .doc-actions {
                    width: 100%;
                    flex-direction: row;
                    gap: 0.5rem;
                }

                .doc-actions .btn {
                    width: 100%;
                    justify-content: center;
                }

                .category-cards {
                    grid-template-columns: 1fr;
                    gap: 1rem;
                }

                .empty-state {
                    padding: 2rem 1rem;
                }
            }