/* === PANELES LATERALES (Batalla, Comercio, Crafteo, Stats) === */

.side-panel { position: fixed; top: 80px; width: 300px; height: calc(100% - 80px); background: #1e1e1e; z-index: 1000; box-shadow: 5px 0 15px rgba(0,0,0,0.5); box-sizing: border-box; transition: transform 0.3s ease-in-out; display: flex; flex-direction: column; }
#battle-menu, #trade-menu, #crafting-menu { left: 0; }
#crafting-menu { width: 620px; }
#crafting-columns { display: flex; flex-direction: row; gap: 0; flex: 1; overflow: hidden; padding: 0 !important; }
#crafting-columns > div { flex: 1; min-width: 0; padding: 15px; overflow-y: auto; height: 100%; box-sizing: border-box; }
#crafting-columns > div:first-child { border-right: 1px solid #333; }
#stats-menu { right: 0; } 
#battle-menu.hidden, #trade-menu.hidden, #crafting-menu.hidden { transform: translateX(-100%); }
#stats-menu.hidden { transform: translateX(100%); }

.side-panel > div, #stats-menu h3 { padding: 15px; }
.side-panel > div { flex: 1; overflow-y: auto; }

#stats-menu h3 { padding-top: 15px; text-align: center; margin: 0; }
#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 { margin: 0 0 10px 0; color: #999; border-bottom: 1px solid #444; padding-bottom: 10px;}

.battle-section { padding-top: 10px; border-top: 1px solid #444; }
.battle-section h5 { margin: 0 0 10px; color: #bbb; font-size: 16px; }
.battle-section ul { list-style: none; padding: 0; margin: 0; }
.battle-section li { padding: 8px 4px; border-radius: 4px; cursor: pointer; font-size: 14px; display: flex; justify-content: space-between; }
.battle-section li:hover { background-color: #333; }
.battle-section .port-name { font-weight: bold; }
.battle-section .port-info { font-size: 12px; color: #999; }
.battle-section .port-date { font-weight: bold; color: #e67e22; }
.battle-section .port-date.defense { color: #2ecc71; }
.battle-section .empty-list { color: #777; font-style: italic; padding: 10px 4px; }