/* ========================================
   OPTIMIZACIÓN RESPONSIVE Y COMPACTA
   ======================================== */

/* Mejorar el escalado con zoom del navegador */
html {
    font-size: clamp(11px, 1vw, 16px);
}

/* Header más compacto */
.app-header {
    min-height: clamp(2.5rem, 4vh, 3.25rem) !important;
    max-height: clamp(2.5rem, 4vh, 3.25rem) !important;
}

.header-content {
    padding: 0 clamp(0.5rem, 1.5vw, 1rem) !important;
    gap: clamp(0.25rem, 0.75vw, 0.5rem) !important;
}

.logo-image {
    height: clamp(6.5rem, 3.5vh, 2rem) !important;
}

/* Botones del header más compactos */
.btn-help {
    padding: clamp(0.35rem, 0.75vw, 0.5rem) clamp(0.5rem, 1.25vw, 0.75rem) !important;
    font-size: clamp(0.7rem, 1.25vw, 0.8125rem) !important;
}

.btn-theme-toggle {
    width: clamp(28px, 5vw, 36px) !important;
    height: clamp(28px, 5vw, 36px) !important;
}

.btn-donate {
    padding: clamp(0.35rem, 0.75vw, 0.5rem) clamp(0.6rem, 1.25vw, 0.875rem) !important;
}

/* Grid principal más flexible */
.app-main {
    grid-template-columns: minmax(180px, 16%) 1fr minmax(220px, 18%) !important;
}

@media (min-width: 1600px) {
    .app-main {
        grid-template-columns: minmax(220px, 15%) 1fr minmax(260px, 17%) !important;
    }
}

@media (max-width: 1400px) {
    .app-main {
        grid-template-columns: minmax(160px, 14%) 1fr minmax(200px, 16%) !important;
    }
}

@media (max-width: 1200px) {
    .app-main {
        grid-template-columns: minmax(140px, 12%) 1fr minmax(180px, 15%) !important;
    }
}

/* Sidebars más compactos */
.sidebar-header {
    padding: clamp(0.5rem, 1.25vw, 0.875rem) clamp(0.5rem, 1.25vw, 0.875rem) !important;
}

.sidebar-title {
    font-size: clamp(0.65rem, 1vw, 0.75rem) !important;
}

.filters-container {
    padding: clamp(0.5rem, 1.5vw, 0.875rem) !important;
}

.filter-group {
    margin-bottom: clamp(0.75rem, 1.75vw, 1.25rem) !important;
}

.filter-label-main,
.filter-label {
    font-size: clamp(0.75rem, 1.25vw, 0.875rem) !important;
    margin-bottom: clamp(0.35rem, 0.75vw, 0.625rem) !important;
}

.radio-option {
    padding: clamp(0.35rem, 0.75vw, 0.5rem) clamp(0.5rem, 1vw, 0.75rem) !important;
}

.radio-label {
    font-size: clamp(0.7rem, 1.15vw, 0.8125rem) !important;
    padding-left: clamp(20px, 3vw, 26px) !important;
}

.radio-label::before {
    width: clamp(14px, 2.5vw, 16px) !important;
    height: clamp(14px, 2.5vw, 16px) !important;
}

.radio-label::after {
    left: clamp(4px, 1vw, 5px) !important;
    width: clamp(6px, 1.25vw, 7px) !important;
    height: clamp(6px, 1.25vw, 7px) !important;
}

.filter-input {
    padding: clamp(0.45rem, 1vw, 0.625rem) clamp(0.6rem, 1.25vw, 0.75rem) !important;
    font-size: clamp(0.75rem, 1.2vw, 0.875rem) !important;
}

/* Content header más compacto */
.content-header {
    padding: clamp(0.5rem, 1.5vw, 0.875rem) clamp(0.75rem, 2vw, 1.25rem) !important;
    gap: clamp(0.5rem, 1.25vw, 0.875rem) !important;
}

.content-title {
    font-size: clamp(0.95rem, 1.75vw, 1.125rem) !important;
}

.btn-new-query {
    padding: clamp(0.4rem, 1vw, 0.5rem) clamp(0.75rem, 1.5vw, 1rem) !important;
    font-size: clamp(0.75rem, 1.2vw, 0.875rem) !important;
}

/* Results container */
.results-container {
    padding: clamp(0.75rem, 1.75vw, 1.25rem) !important;
}

/* Welcome guide más compacto */
.welcome-guide {
    padding: clamp(0.75rem, 2vw, 1.5rem) !important;
}

.guide-header {
    margin-bottom: clamp(0.75rem, 2vw, 1.5rem) !important;
}

.guide-icon {
    font-size: clamp(2rem, 6vw, 3.5rem) !important;
    margin-bottom: clamp(0.5rem, 1.5vw, 1rem) !important;
}

.guide-title {
    font-size: clamp(1.25rem, 4vw, 2rem) !important;
    margin-bottom: clamp(0.5rem, 1.25vw, 0.875rem) !important;
}

.guide-subtitle {
    font-size: clamp(0.8rem, 1.75vw, 1rem) !important;
}

.guide-steps {
    gap: clamp(0.75rem, 1.75vw, 1.25rem) !important;
    margin-top: clamp(0.75rem, 2vw, 1.5rem) !important;
}

.guide-step {
    padding: clamp(0.875rem, 2vw, 1.25rem) !important;
}

.step-number {
    width: clamp(1.75rem, 4vw, 2.25rem) !important;
    height: clamp(1.75rem, 4vw, 2.25rem) !important;
    font-size: clamp(0.875rem, 1.75vw, 1rem) !important;
    margin-bottom: clamp(0.35rem, 0.875vw, 0.5rem) !important;
}

.step-title {
    font-size: clamp(0.85rem, 1.75vw, 1rem) !important;
    margin-bottom: clamp(0.35rem, 0.875vw, 0.5rem) !important;
}

.step-text {
    font-size: clamp(0.75rem, 1.4vw, 0.8125rem) !important;
}

.step-info-box {
    padding: clamp(0.5rem, 1.25vw, 0.875rem) !important;
    margin-top: clamp(0.5rem, 1.25vw, 0.875rem) !important;
    font-size: clamp(0.7rem, 1.2vw, 0.8125rem) !important;
}

.step-examples {
    margin: clamp(0.5rem, 1.25vw, 0.875rem) 0 !important;
    gap: clamp(0.25rem, 0.625vw, 0.5rem) !important;
}

.step-examples li {
    padding: clamp(0.25rem, 0.625vw, 0.375rem) clamp(0.35rem, 0.875vw, 0.5rem) !important;
    padding-left: clamp(0.875rem, 2vw, 1.25rem) !important;
    font-size: clamp(0.7rem, 1.2vw, 0.8125rem) !important;
}

/* Query input area más compacta */
.query-input-area {
    padding: clamp(0.5rem, 1.5vw, 0.875rem) clamp(0.75rem, 2vw, 1.25rem) !important;
}

.query-input {
    padding: clamp(0.5rem, 1.25vw, 0.75rem) clamp(0.75rem, 1.75vw, 1rem) !important;
    font-size: clamp(0.8rem, 1.4vw, 0.9375rem) !important;
    min-height: clamp(2.5rem, 5vh, 3.5rem) !important;
    max-height: clamp(8rem, 15vh, 12rem) !important;
}

.btn-send {
    width: clamp(2.5rem, 5vw, 3rem) !important;
    height: clamp(2.5rem, 5vw, 3rem) !important;
}

.query-disclaimer {
    font-size: clamp(0.65rem, 1.1vw, 0.75rem) !important;
    margin-top: clamp(0.35rem, 0.75vw, 0.5rem) !important;
}

/* Tabs del sidebar derecho */
.sidebar-tab {
    padding: clamp(0.5rem, 1.25vw, 0.75rem) clamp(0.75rem, 1.75vw, 1rem) !important;
    font-size: clamp(0.7rem, 1.2vw, 0.8125rem) !important;
}

.tab-icon {
    font-size: clamp(0.875rem, 1.5vw, 1.125rem) !important;
}

.tab-label {
    font-size: clamp(0.7rem, 1.2vw, 0.8125rem) !important;
}

/* History items */
.history-item {
    padding: clamp(0.5rem, 1.25vw, 0.875rem) !important;
    margin-bottom: clamp(0.35rem, 0.875vw, 0.625rem) !important;
}

.history-item-query {
    font-size: clamp(0.75rem, 1.3vw, 0.875rem) !important;
}

.history-item-type {
    padding: clamp(0.15rem, 0.375vw, 0.25rem) clamp(0.35rem, 0.875vw, 0.5rem) !important;
    font-size: clamp(0.65rem, 1.1vw, 0.7rem) !important;
}

/* Series items */
.serie-item {
    padding: clamp(0.5rem, 1.25vw, 0.875rem) !important;
    margin-bottom: clamp(0.35rem, 0.875vw, 0.625rem) !important;
}

.serie-name {
    font-size: clamp(0.75rem, 1.3vw, 0.875rem) !important;
    margin-bottom: clamp(0.35rem, 0.75vw, 0.5rem) !important;
}

.serie-details {
    gap: clamp(0.35rem, 0.875vw, 0.625rem) !important;
}

.serie-detail {
    font-size: clamp(0.65rem, 1.1vw, 0.75rem) !important;
}

/* Tables más compactas */
.results-table thead th {
    padding: clamp(0.4rem, 1.25vw, 0.75rem) clamp(0.6rem, 1.5vw, 0.875rem) !important;
    font-size: clamp(0.6rem, 1.1vw, 0.6875rem) !important;
}

.results-table td {
    padding: clamp(0.4rem, 1.25vw, 0.75rem) clamp(0.6rem, 1.5vw, 0.875rem) !important;
    font-size: clamp(0.7rem, 1.2vw, 0.8125rem) !important;
}

/* Browse button del sidebar */
.btn-browse-sidebar {
    padding: clamp(0.75rem, 1.75vw, 1.125rem) clamp(0.875rem, 2vw, 1.25rem) !important;
}

.browse-sidebar-title {
    font-size: clamp(0.85rem, 1.5vw, 1rem) !important;
}

.browse-sidebar-text {
    font-size: clamp(0.7rem, 1.2vw, 0.8125rem) !important;
}

/* Footer buttons */
.sidebar-footer {
    padding: clamp(0.5rem, 1.25vw, 0.875rem) !important;
}

.btn-clear,
.btn-query-series {
    padding: clamp(0.45rem, 1.1vw, 0.625rem) clamp(0.75rem, 1.75vw, 1rem) !important;
    font-size: clamp(0.75rem, 1.25vw, 0.875rem) !important;
}

/* Optimización para evitar scroll horizontal */
* {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.results-table {
    table-layout: fixed;
    width: 100%;
}

.results-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mejorar el scroll vertical */
.results-container,
.filters-container,
.history-container,
.selected-series-container {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.results-container::-webkit-scrollbar,
.filters-container::-webkit-scrollbar,
.history-container::-webkit-scrollbar,
.selected-series-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.results-container::-webkit-scrollbar-track,
.filters-container::-webkit-scrollbar-track,
.history-container::-webkit-scrollbar-track,
.selected-series-container::-webkit-scrollbar-track {
    background: transparent;
}

.results-container::-webkit-scrollbar-thumb,
.filters-container::-webkit-scrollbar-thumb,
.history-container::-webkit-scrollbar-thumb,
.selected-series-container::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.results-container::-webkit-scrollbar-thumb:hover,
.filters-container::-webkit-scrollbar-thumb:hover,
.history-container::-webkit-scrollbar-thumb:hover,
.selected-series-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Optimización adicional para zoom */
@media (min-width: 1920px) {
    html {
        font-size: clamp(13px, 1.1vw, 18px);
    }
}

@media (max-width: 1024px) {
    html {
        font-size: clamp(10px, 0.95vw, 14px);
    }

    .app-main {
        grid-template-columns: minmax(120px, 10%) 1fr !important;
    }

    .sidebar-right {
        display: none; /* Ocultar en tablets pequeñas para más espacio */
    }
}

@media (max-width: 768px) {
    html {
        font-size: clamp(9px, 0.9vw, 13px);
    }

    .app-main {
        grid-template-columns: 1fr !important;
    }

    .sidebar-left,
    .sidebar-right {
        display: none;
    }
}