/* === ESTILOS BASE, CABECERA Y BARRA DE HERRAMIENTAS === */

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
    font-family: Arial, sans-serif;
    background-color: #111;
    color: #eee;
}

/* Etiqueta para puertos de aguas someras en resultados del buscador */
.port-label-someras {
    font-size: 0.8em;
    color: #7fd3ff; /* azul claro para resaltar */
    margin-left: 6px;
    opacity: 0.95;
}

/* --- ESTILOS DE CABECERA Y BARRA DE HERRAMIENTAS --- */
#main-header { position: fixed; top: 0; left: 0; width: 100%; height: 80px; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; box-sizing: border-box; background-color: rgba(30, 30, 30, 0.5); backdrop-filter: blur(5px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#header-logo { max-height: 70px; width: auto; pointer-events: none; position: absolute; left: 50%; transform: translateX(-50%); }
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 10px; z-index: 101; }
#battle-menu-toggle, #trade-menu-toggle, #stats-toggle, #crafting-menu-toggle, #wind-predictor-toggle, #forum-link-toggle, #recruit-toggle, #heatmap-toggle, #ammo-calc-toggle, #nation-filter-toggle, #donate-toggle { 
    background: rgba(0,0,0,0.5); 
    border: 1px solid #555; 
    width: 45px; 
    height: 45px; 
    border-radius: 8px; 
    cursor: pointer; 
    transition: all 0.2s; 
    padding: 6px; /* Reducido para mejor control del icono */
    box-sizing: border-box; 
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); 
    display: flex; /* Añadido para asegurar el centrado del img */
    justify-content: center;
    align-items: center;
}

/* Animación de parpadeo para el botón de donación */
#donate-toggle {
    border: 2px solid #ff4444;
    animation: donate-pulse 2s ease-in-out infinite;
}
@keyframes donate-pulse {
    0%   { box-shadow: 0 0 6px rgba(255, 68, 68, 0.4), 0 0 12px rgba(255, 120, 0, 0.2); border-color: #ff4444; }
    50%  { box-shadow: 0 0 14px rgba(255, 68, 68, 0.9), 0 0 28px rgba(255, 120, 0, 0.5); border-color: #ff8800; }
    100% { box-shadow: 0 0 6px rgba(255, 68, 68, 0.4), 0 0 12px rgba(255, 120, 0, 0.2); border-color: #ff4444; }
}
#donate-toggle:hover {
    box-shadow: 0 0 18px rgba(255, 68, 68, 1), 0 0 36px rgba(255, 120, 0, 0.7);
    border-color: #ff6600;
    transform: scale(1.08);
}

/* ESTILOS DE ILUMINACIÓN */
#battle-menu-toggle.active, #trade-menu-toggle.active, #stats-toggle.active, #crafting-menu-toggle.active, #wind-predictor-toggle.active, #forum-link-toggle.active, #recruit-toggle.active, #heatmap-toggle.active, #ammo-calc-toggle.active { 
    background: rgba(52, 140, 219, 0.8); /* Fondo ligeramente azul para activo */
    border-color: #2980b9; 
    box-shadow: 0 0 15px #3498db; 
}
#battle-menu-toggle:hover, #trade-menu-toggle:hover, #stats-toggle:hover, #crafting-menu-toggle:hover, #wind-predictor-toggle:hover, #forum-link-toggle:hover, #recruit-toggle:hover, #heatmap-toggle:hover, #ammo-calc-toggle:hover { 
    background: rgba(0,0,0,0.8); 
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6); 
}

#battle-menu-toggle.raid-active {
    border-color: #ff4d4d;
    animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 8px rgba(255, 0, 0, 0.7), 0 0 3px rgba(255, 0, 0, 0.8) inset; }
    50% { box-shadow: 0 0 18px rgba(255, 80, 80, 1), 0 0 6px rgba(255, 80, 80, 1) inset; }
    100% { box-shadow: 0 0 8px rgba(255, 0, 0, 0.7), 0 0 3px rgba(255, 0, 0, 0.8) inset; }
}

/* ESTILOS PARA LOS NUEVOS ICONOS PNG A COLOR */
#main-header button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Aplicar un filtro de sombra para el estado normal (apagado) */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5)); 
    transition: filter 0.2s;
}

/* EFECTO DE ILUMINACIÓN EN ESTADO ACTIVO */
#main-header button.active img {
    /* Iluminación fuerte y suave para iconos a color */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
}

#port-search-container { width: 200px; position: relative; }
#port-search-input { width: 100%; padding: 8px; background: #333; border: 1px solid #555; color: #eee; border-radius: 4px; box-sizing: border-box; }
#port-search-results { position: absolute; background: #1e1e1e; border-radius: 4px; box-shadow: 0 5px 10px rgba(0,0,0,0.5); max-height: 200px; overflow-y: auto; margin-top: 5px; width: 200px; z-index: 1001;} 
#port-search-results div { padding: 10px; cursor: pointer; border-radius: 4px; }
#port-search-results div:hover { background-color: #333; }