:root {
    --android-orange: #ff8800;
    --bg-dark: #000000;
    --panel-grey: #222222;
    --divider: #333333;
    --text-main: #eeeeee;
}

* { 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent; 
}

body {
    background-color: #111;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Usamos min-height y dvh para mejor soporte en móviles */
    min-height: 100dvh; 
    margin: 0;
    color: var(--text-main);
    overflow: hidden;
}

.player-card {
    background: var(--bg-dark);
    width: 100%;
    max-width: 450px;
    /* Asegura que el card ocupe todo el alto disponible */
    height: 100dvh; 
    display: flex;
    flex-direction: column;
    border: 1px solid #333;
}

/* --- HEADER --- */
.header {
    background: linear-gradient(to bottom, #444, #222);
    /* Añadimos padding superior para el área de la cámara/notch si fuera necesario */
    padding: calc(env(safe-area-inset-top) + 12px) 15px 12px 15px;
    font-size: 0.9rem;
    font-weight: bold;
    border-bottom: 1px solid #000;
    box-shadow: inset 0 1px 0 #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quality-tag {
    color: var(--android-orange);
    font-size: 0.7rem;
    border: 1px solid var(--android-orange);
    padding: 2px 5px;
    border-radius: 3px;
    font-family: monospace;
}

/* --- VISTAS --- */
.view-container { 
    flex: 1; 
    overflow: hidden; 
    background: #000; 
    position: relative; 
}

.section { 
    display: none; 
    height: 100%; 
    flex-direction: column; 
}

.section.active { display: flex; }

.media-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    position: relative;
    overflow: hidden;
    width: 100%; /* Asegura que ocupe todo el ancho en móvil */
}

#visualizer { 
    width: 100%; 
    height: 100%; /* Que llene el media-box por completo */
    display: block;
}

.cover-art-display {
    display: none;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, #1a1a1a 0%, #000 100%);
}

#extracted-cover {
    width: 260px;
    height: 260px;
    object-fit: cover;
    border: 1px solid #333;
    box-shadow: 0 15px 35px rgba(0,0,0,0.8);
    display: none;
    margin-bottom: 15px;
}

.cover-art-placeholder {
    width: 240px;
    height: 240px;
    background: #111;
    border: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}
.cover-art-placeholder span { font-size: 6rem; color: #222; }

/* --- INFO PANEL --- */
.info-panel {
    background: linear-gradient(to bottom, #222, #000);
    padding: 15px 20px;
    border-top: 1px solid #444;
}

.track-meta h2 { margin: 0; font-size: 1.2rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-meta p { margin: 3px 0 0; color: #888; font-size: 0.9rem; }
.album-text { color: var(--android-orange) !important; font-style: italic; font-size: 0.8rem; }

.time-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #bbb;
    font-family: monospace;
    margin: 10px 0 5px;
}

.progress-container { background: #333; height: 10px; border-radius: 2px; cursor: pointer; touch-action: none; user-select: none;margin-bottom: 20px; }
.progress-bar { background: var(--android-orange); height: 100%; width: 0%; position: relative; }

.controls { display: flex; justify-content: space-around; align-items: center; padding-bottom: 5px; }
.btn-retro {
    background: linear-gradient(to bottom, #555, #222);
    border: 1px solid #000;
    color: #fff;
    padding: 12px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- LISTA --- */
#playlist-items { flex: 1; overflow-y: auto; background: #080808; }
.playlist-item {
    padding: 15px;
    border-bottom: 1px solid #1a1a1a;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.playlist-item.active { background: #151515; border-left: 4px solid var(--android-orange); }
.playlist-item.active .item-name { color: var(--android-orange); }
.item-artist { font-size: 0.75rem; color: #666; margin-top: 3px; }

/* --- TABS CORREGIDAS --- */
.tabs { 
    display: flex; 
    background: #111; 
    border-top: 2px solid #333;
    /* Agrega espacio dinámico para que no se oculte tras los botones del sistema */
    padding-bottom: env(safe-area-inset-bottom);
}

.tab-btn {
    flex: 1; 
    /* Aumentamos un poco el padding vertical para mejor área táctil */
    padding: 20px 5px; 
    background: none; 
    border: none;
    color: #888; 
    font-size: 0.7rem; 
    text-transform: uppercase; 
    cursor: pointer; 
    font-weight: bold;
}
.tab-btn.active { color: var(--android-orange); background: #222; }

.settings-item { padding: 20px; border-bottom: 1px solid #222; }
input[type=range] { width: 100%; accent-color: var(--android-orange); margin-top: 10px; }