/* ===== ESTILOS BÁSICOS ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #0a0a0a; color: #fff; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* ===== HEADER ===== */
.header { background: #1a1a1a; padding: 10px 20px; border-bottom: 2px solid #333; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; min-height: 60px; }
.header-left { display: flex; align-items: center; gap: 15px; }
.header-logo { height: 35px; width: auto; }
.header h1 { font-size: 18px; color: #00d4ff; }
.header-right { display: flex; align-items: center; gap: 10px; }

.favorites-btn { background: transparent; border: 1px solid #333; color: #ffcc00; padding: 4px 12px; border-radius: 20px; cursor: pointer; font-size: 13px; }
.favorites-btn.active { background: #ffcc00; color: #000; border-color: #ffcc00; }
.channel-count { font-size: 13px; color: #888; }

/* ===== BUSCADOR ===== */
.search-bar { background: #0f0f0f; padding: 6px 15px; border-bottom: 1px solid #222; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.search-bar input { flex: 1; padding: 6px 12px; border: 1px solid #333; border-radius: 20px; background: #1a1a1a; color: #fff; font-size: 13px; outline: none; min-width: 120px; }
.search-bar input:focus { border-color: #00d4ff; }
.search-bar .clear-btn, .search-bar .show-all-btn { background: #333; border: none; color: #aaa; padding: 2px 10px; border-radius: 12px; cursor: pointer; font-size: 12px; }
.search-bar .show-all-btn { background: #00d4ff; color: #000; }

/* ===== CONTENEDOR PRINCIPAL ===== */
.container { display: flex; flex: 1; overflow: hidden; }

/* ===== LISTA DE CANALES ===== */
.channel-list { width: 280px; min-width: 280px; background: #111; overflow-y: auto; border-right: 2px solid #222; padding: 8px 0; }
.channel-item { padding: 8px 15px; cursor: pointer; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #1a1a1a; transition: 0.2s; font-size: 14px; }
.channel-item:hover { background: #1a1a1a; }
.channel-item.active { background: #00d4ff22; border-left: 3px solid #00d4ff; }
.channel-item .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-item .fav-btn { background: transparent; border: none; color: #444; cursor: pointer; font-size: 16px; }
.channel-item .fav-btn.favorited { color: #ffcc00; }

/* ===== ÁREA DEL REPRODUCTOR ===== */
.player-area { flex: 1; display: flex; flex-direction: column; background: #0a0a0a; }
.player-wrapper { flex: 1; display: flex; align-items: center; justify-content: center; background: #000; position: relative; min-height: 200px; }

/* ===== ESTADOS DEL REPRODUCTOR ===== */
.player-state { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #0a0a0a; position: absolute; top: 0; left: 0; z-index: 10; }
.player-state .spinner { width: 40px; height: 40px; border: 3px solid #1a1a1a; border-top: 3px solid #00d4ff; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.player-state .state-message { color: #888; font-size: 14px; text-align: center; }

/* ===== ERROR ===== */
.error-container { text-align: center; padding: 30px; max-width: 400px; }
.error-icon { font-size: 48px; display: block; margin-bottom: 15px; }
.error-title { color: #fff; font-size: 20px; font-weight: bold; margin-bottom: 8px; }
.error-message { color: #888; font-size: 14px; margin-bottom: 20px; }
.error-retry-btn { background: #00d4ff; color: #000; border: none; padding: 10px 24px; border-radius: 8px; font-size: 14px; font-weight: bold; cursor: pointer; }

/* ===== INFO DEL REPRODUCTOR ===== */
.player-info { background: #1a1a1a; padding: 8px 15px; border-top: 1px solid #333; display: flex; justify-content: space-between; align-items: center; font-size: 13px; flex-shrink: 0; }
.player-info .now-playing { color: #aaa; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-info .now-playing strong { color: #fff; }
.player-info .status { padding: 2px 10px; border-radius: 12px; font-size: 11px; }
.status.online { background: #00cc44; color: #000; }
.status.offline { background: #cc3333; color: #fff; }
.status.loading { background: #ff8800; color: #000; }

/* ===== OPCIONES MULTI-SEÑAL ===== */
.options-container { background: #1a1a1a; padding: 6px 15px; border-top: 1px solid #333; display: none; flex-wrap: wrap; align-items: center; gap: 6px; flex-shrink: 0; min-height: 36px; overflow-x: auto; }
.options-container .options-label { color: #888; font-size: 11px; margin-right: 6px; white-space: nowrap; }
.options-container .option-btn { background: #2a2a2a; color: #aaa; border: 1px solid #333; padding: 3px 12px; border-radius: 14px; font-size: 11px; cursor: pointer; transition: all 0.2s; font-family: inherit; white-space: nowrap; }
.options-container .option-btn:hover { background: #3a3a3a; color: #fff; border-color: #555; }
.options-container .option-btn.active { background: #00d4ff; color: #000; border-color: #00d4ff; font-weight: bold; }

/* ===== NO RESULTS ===== */
.no-results { padding: 30px 15px; text-align: center; color: #666; font-size: 15px; }
.no-results span { display: block; font-size: 40px; margin-bottom: 10px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .channel-list { width: 200px; min-width: 200px; }
    .header h1 { font-size: 14px; }
}
@media (max-width: 480px) {
    .channel-list { width: 100%; max-height: 150px; border-right: none; border-bottom: 2px solid #222; }
    .container { flex-direction: column; }
    .header { flex-wrap: wrap; }
    .header-right { width: 100%; justify-content: flex-end; }
}