/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1024px) {
    .photo-modal-content {
        flex-direction: column;
        width: 95vw;
        height: auto;
        max-height: 95vh;
    }

    .photo-modal-image {
        height: 45vh;
        min-height: 200px;
    }

    .photo-modal-info {
        width: 100%;
        max-height: 50vh;
        border-left: none;
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 768px) {
    /* === Mobile Header === */
    .mobile-header {
        display: flex;
    }

    /* === Main Content: extra padding bottom for bottom nav === */
    .main-content {
        padding-bottom: 68px;
        overflow-x: hidden;
    }

    /* === Shorten long texts for mobile === */
    .section-header h1 {
        font-size: 1rem;
    }

    /* Hide filter-group labels on mobile (selects are self-explanatory) */
    .zoho-form-row .filter-group > label {
        display: none;
    }

    /* Compact selects */
    .zoho-form-row .filter-group select {
        font-size: 0.8rem;
        padding: 8px 10px;
    }

    /* Shorter text search input */
    #zohoSearchQuery {
        font-size: 0.85rem;
    }

    /* Shorter slider labels */
    .similitud-label {
        font-size: 0.7rem;
    }

    /* Compact sunlocs checkbox label */
    .sunlocs-controls .checkbox-label span {
        font-size: 0.8rem;
    }

    /* Compact radio map title */
    .radio-map-panel-title {
        font-size: 0.85rem;
    }

    .radio-address-input {
        font-size: 0.8rem;
    }

    /* Shorter zoho dropzone text */
    .zoho-dropzone-text {
        font-size: 0.75rem;
    }

    /* Compact empty state text */
    .empty-state p {
        font-size: 0.8rem;
    }

    /* Compact section header on split-view */
    .content-section.active.split-view .section-header h1 {
        font-size: 0.95rem;
    }

    /* === Sidebar === */
    .sidebar {
        position: fixed;
        top: 0;
        left: -260px;
        width: 260px;
        height: 100vh;
        z-index: 1001;
        transition: left 0.3s ease;
        border-right: 1px solid var(--border);
    }

    .sidebar.open {
        left: 0;
    }

    .sidebar-overlay.show {
        display: block;
    }

    .cart-button-container {
        display: none;
    }

    /* === Main Content === */
    .main-content {
        margin-left: 0;
        margin-top: 56px;
        padding: 12px;
    }

    .content-section.active.split-view {
        height: calc(100vh - 56px - 56px - 12px);
    }

    #section-browse-folders .section-header {
        top: 56px;
        padding: 8px 0;
        margin-top: -8px;
    }

    /* === Section Header === */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;
    }

    .section-header h1 {
        font-size: 1.1rem;
    }

    /* === Modals === */
    .modal-small {
        width: calc(100vw - 24px);
        max-width: 420px;
        padding: 20px 16px;
    }

    .photo-modal-content {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .photo-modal-image {
        height: 40vh;
        min-height: 180px;
    }

    .photo-modal-info {
        padding: 16px;
        max-height: 60vh;
    }

    .photo-modal-info h2 {
        font-size: 1rem;
        margin-bottom: 12px;
    }

    .photo-meta {
        gap: 4px 12px;
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    .nav-arrow {
        width: 36px;
        height: 36px;
        font-size: 1.5rem;
    }

    .nav-prev { left: 8px; }
    .nav-next { right: 8px; }

    .photo-modal-actions {
        flex-direction: column;
        gap: 8px;
        padding-top: 12px;
    }

    .photo-modal-actions .btn {
        min-height: 44px;
    }

    .modal-close {
        top: 8px;
        right: 8px;
    }

    /* === Photo Grid === */
    .photo-grid-inner {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }

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

    /* === Overflow prevention === */
    #directorySelect {
        min-width: 0;
        width: 100%;
    }

    .section-actions select {
        min-width: 0;
        width: 100%;
    }

    .section-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    /* === File Items (Search results) === */
    .files-list .file-item {
        flex-direction: column;
    }

    .files-list .file-thumb {
        width: 100%;
        height: 200px;
        min-width: auto;
    }

    /* === Search Bar === */
    .search-bar {
        flex-direction: column;
    }

    .search-bar input[type="text"], .search-bar input[type="search"] {
        width: 100%;
    }

    /* === Zoho Search Form === */
    .zoho-form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .zoho-form-row .filter-group {
        width: 100%;
        min-width: 0;
    }

    .filter-group-radio {
        width: 100% !important;
    }

    .filter-group-radio label:first-child {
        display: none;
    }

    .radio-inline-wrap {
        height: auto;
        flex-wrap: wrap;
    }

    .zoho-form-row-options {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .zoho-btn-buscar {
        width: 100%;
        margin-left: 0;
        min-height: 44px;
        font-size: 1rem;
    }

    .sunlocs-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    .similitud-slider-container {
        width: 100%;
    }

    /* === Search Mode Toggle === */
    .search-mode-toggle {
        width: 100%;
    }

    .search-mode-btn {
        flex: 1;
        min-height: 40px;
    }

    /* === Radio Map === */
    .radio-address-row {
        flex-direction: column;
    }

    /* === Split View on Mobile: stack vertically === */
    .content-section.active.split-view .split-view-body {
        flex-direction: column;
        overflow-y: auto;
    }

    .content-section.active.split-view .split-view-body > .radio-map-panel-float {
        width: 100%;
        max-width: none;
        min-width: 0;
        max-height: 300px;
        flex-shrink: 0;
    }

    .content-section.active.split-view .split-view-body > #zohoSearchResults {
        flex: 1 1 auto;
        overflow-y: visible;
        min-height: auto;
    }

    /* === Folder Thumbnails Grid === */
    .folders-thumbnail-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .folder-thumbnail {
        height: 120px;
    }

    .folder-thumbnail-info {
        padding: 6px 8px;
    }

    .folder-thumbnail-name {
        font-size: 0.75rem;
    }

    .folder-thumbnail-meta {
        font-size: 0.7rem;
    }

    .search-tag {
        font-size: 0.6rem;
        padding: 2px 5px;
    }

    .btn-add-folder-cart {
        font-size: 0.75rem;
        padding: 4px 6px;
    }

    /* === Zoho Location Detail === */
    .zoho-card {
        padding: 12px;
    }

    .zoho-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .zoho-card-header h2 {
        font-size: 1.1rem;
    }

    .zoho-fields {
        grid-template-columns: 1fr;
    }

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

    .zoho-tags {
        gap: 4px;
    }

    /* === Admin === */
    .admin-section {
        padding: 12px;
        overflow-x: hidden;
    }

    .admin-section h2 {
        font-size: 1rem;
    }

    .admin-filters {
        flex-direction: column;
    }

    .users-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -12px;
        padding: 0 12px;
    }

    .users-table {
        font-size: 0.7rem;
        min-width: 500px;
    }

    .users-table th:nth-child(4),
    .users-table td:nth-child(4) {
        display: none;
    }

    .users-table th,
    .users-table td {
        padding: 6px 4px;
    }

    .actions-cell {
        flex-direction: column;
        gap: 4px;
    }

    .btn-action {
        font-size: 0.65rem;
        padding: 4px 8px;
    }

    /* === Bulk Actions Bar === */
    .bulk-actions-bar {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px;
    }

    .bulk-actions-bar .btn {
        font-size: 0.75rem;
        padding: 6px 10px;
        min-height: 36px;
    }

    /* === Image Search === */
    .zoho-image-dropzone {
        min-height: 100px;
    }

    .zoho-similarity-control {
        flex-direction: column;
        gap: 6px;
    }

    /* === Toggle Form Button === */
    .btn-toggle-form {
        font-size: 0.8rem;
    }

    /* === Toast === */
    .toast {
        bottom: 80px;
        max-width: calc(100vw - 32px);
        font-size: 0.85rem;
    }

    /* === General buttons: touch targets === */
    .btn-primary,
    .btn-secondary,
    .btn {
        min-height: 40px;
    }

    /* === Upload === */
    .upload-container {
        max-width: 100%;
    }

    .upload-dropzone {
        padding: 24px 16px;
    }

    .upload-dropzone .dropzone-content p {
        font-size: 0.85rem;
    }

    /* === Auth Screen === */
    .auth-container {
        padding: 24px 16px;
        max-width: 100%;
        border-radius: 12px;
    }

    .auth-header {
        margin-bottom: 20px;
    }

    .logo-img {
        height: 40px;
    }

    .auth-subtitle {
        font-size: 0.85rem;
    }

    .auth-tabs {
        margin-bottom: 16px;
    }

    .auth-tab {
        min-height: 40px;
        font-size: 0.85rem;
    }

    .auth-form .form-group label {
        font-size: 0.85rem;
    }

    .auth-form input {
        min-height: 44px;
        font-size: 1rem;
    }

    .btn-full {
        min-height: 48px;
        font-size: 1rem;
    }

    .google-btn-container {
        display: flex;
        justify-content: center;
    }

    /* === Fullscreen Viewer === */
    .fullscreen-close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
    }

    .fullscreen-nav {
        width: 40px;
        height: 40px;
        font-size: 1.6rem;
    }

    .fullscreen-prev {
        left: 8px;
    }

    .fullscreen-next {
        right: 8px;
    }

    .fullscreen-viewer-content img {
        max-width: 100vw;
        max-height: 100vh;
    }

    .fullscreen-zoom-hint {
        bottom: 20px;
        font-size: 0.75rem;
        padding: 6px 14px;
    }

    .packages-table {
        font-size: 0.7rem;
        min-width: 500px;
    }

    .packages-table th,
    .packages-table td {
        padding: 6px 4px;
        white-space: nowrap;
    }

    /* Hide less important columns on mobile */
    .packages-table th:nth-child(5),
    .packages-table td:nth-child(5),
    .packages-table th:nth-child(6),
    .packages-table td:nth-child(6) {
        display: none;
    }

    /* === Package Details Modal === */
    .package-items-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .info-label {
        min-width: auto;
    }

    /* === File Actions in Search Results === */
    .file-actions {
        flex-direction: row;
        justify-content: flex-start;
    }

    /* === Cart Modal === */
    .modal-medium {
        width: calc(100vw - 24px);
        max-width: 100%;
        padding: 20px 16px;
    }

    .modal-large {
        width: calc(100vw - 24px);
        max-width: 100%;
        padding: 20px 16px;
    }

    /* === Modal Actions === */
    .modal-actions {
        flex-direction: column;
        gap: 8px;
    }

    .modal-actions button {
        width: 100%;
        min-height: 44px;
    }

    /* === Empty states === */
    .empty-icon {
        font-size: 2.5rem;
    }

    .empty-state p {
        font-size: 0.85rem;
    }

    /* === Debug toggle === */
    .sidebar-footer {
        padding: 12px;
    }

    /* === Loading overlay === */
    .loading-overlay .spinner {
        width: 36px;
        height: 36px;
    }

    /* === Inline Radio Input === */
    .inline-radio-input {
        width: 80px;
        font-size: 0.85rem;
    }

    /* === Zoho Image Search === */
    .zoho-image-search {
        flex-direction: column;
        gap: 10px;
    }

    .zoho-image-dropzone {
        width: 100%;
    }
}