/* ========================================================================= */
/* --- ESTILOS RESPONSIVE PARA DISPOSITIVOS MÓVILES (Max 768px) --- */
/* ========================================================================= */
@media (max-width: 768px) {
    
    /* CABECERA Y BARRA DE HERRAMIENTAS */
    #main-header {
        height: 60px; 
        padding: 0 5px;
    }

    #header-logo {
        max-height: 50px;
    }

    .toolbar-left, .toolbar-right {
        gap: 5px; 
    }

    /* Botones de menú */
    #battle-menu-toggle, 
    #trade-menu-toggle, 
    #stats-toggle, 
    #crafting-menu-toggle, 
    #wind-predictor-toggle,
    #forum-link-toggle {
        width: 35px; 
        height: 35px;
        padding: 5px;
        border-radius: 6px;
        box-shadow: 0 0 5px rgba(255,255,255,0.2);
    }
    
    /* Barra de búsqueda de puerto */
    #port-search-container {
        width: 140px; 
    }

    #port-search-input {
        padding: 6px;
        font-size: 0.9em;
    }
    
    #port-search-results {
        width: 140px; 
        max-height: 150px;
    }
    
    /* PANELES LATERALES (Menús de Inteligencia) */
    .side-panel {
        width: 90%; 
        top: 60px; 
        height: calc(100% - 60px); 
        box-shadow: 0 0 15px rgba(0,0,0,0.8); 
    }
    #crafting-menu { width: 90%; }
    #crafting-columns { 
        flex-direction: column !important; 
    }
    #crafting-columns > div:first-child { 
        border-right: none; 
        border-bottom: 1px solid #333; 
    }

    /* Corregido: Mover el panel de stats a la izquierda en móvil */
    #stats-menu {
        right: auto; 
        left: 0;
    } 
    #stats-menu.hidden {
        transform: translateX(-100%); 
    }

    /* Ajustes internos de los paneles */
    .side-panel > div, #stats-menu h3 {
        padding: 10px; 
    }
    
    /* Títulos dentro de los paneles */
    #battle-intelligence h4, #route-finder h4, #recipe-finder h4, #port-recommender-section h4, 
    .stats-section h4, #top-profit-container h4, #product-finder h4, #port-to-port-container h4 { 
        font-size: 1.1em;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }

    /* Detalles de batalla para mayor claridad */
    .battle-section li {
        flex-direction: column; 
        align-items: flex-start;
        padding: 6px 4px;
    }
    .battle-section .port-date {
        font-size: 12px;
        margin-top: 2px;
    }

    /* VENTANA MODAL (Predictor de Viento) */
    #wind-predictor-modal {
        width: 95%; 
        max-width: 400px; 
        padding: 15px;
    }
    
    .wind-predictor-content {
        flex-direction: column; 
    }
    
    .wind-controls, #wind-prediction-result {
        flex-basis: 100%;
        width: 100%;
    }
    
    #wind-predictor-modal h4 {
        font-size: 1.5em;
        margin-bottom: 15px;
    }
    
    .wind-compass-pair {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .compass-block-prediction {
        padding-top: 0;
    }

    #compass-selector-container,
    #wind-result-compass {
        width: 180px;
        height: 180px;
    }
    
    #calculate-wind-button {
        padding: 10px;
        font-size: 1em;
    }

    /* Nuevo Modal Bidireccional - Responsivo */
    #port-to-port-modal {
        max-width: 95%;
        width: 95%;
    }
    #port-to-port-modal .input-group {
        margin-bottom: 10px;
    }
    #bidirectional-results p {
        flex-direction: column;
        align-items: flex-start;
    }
    #bidirectional-results p span {
        margin-top: 2px;
    }
    
    /* MODIFICADO: PANEL DE PUERTO A PANTALLA CASI COMPLETA */
    .port-panel {
        width: 95%; 
        height: 90%; 
        max-width: none; 
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 10px;
    }

    /* IMPORTANTE: Hacer que el contenido de las pestañas sea deslizable */
    #battle, #trade, #material-list-container {
        flex-grow: 1;
        overflow-y: auto;
    }
    #tradeItems {
        max-height: none; 
    }


    .tabs {
        margin-bottom: 5px;
    }

    .tab-button {
        padding: 6px;
        font-size: 0.9em;
    }

    /* Ajustar la lista de comercio */
    #tradeItems li {
        flex-direction: column; 
        align-items: flex-start;
        padding: 6px 4px;
    }
    #tradeItems .item-name {
        flex-basis: 100%;
        margin-bottom: 2px;
        font-weight: bold;
    }
    #tradeItems .item-details {
        flex-basis: 100%;
        text-align: left;
    }
    
    /* Footer */
    #copyright-footer {
        font-size: 10px;
    }
}