/* ==========================================================================
   1. TIPOGRAFÍA Y REGLAS GENERALES
   ========================================================================== */
@font-face {
    font-family: "Myriad Pro";
    src: url("https://dl.dropbox.com/scl/fi/z8hqw29h8a9i3a3cbbxkt/MYRIADPRO-REGULAR.OTF?rlkey=begwqxljs2gzyw26h00oeovzi&st=px0mbeax&dl=0") format("woff");
}

button, input, label, option, select, table, textarea, ul.tree-view {
    -webkit-font-smoothing: none;
    font-family: "Myriad Pro";
    font-size: 11px;
}

h1 { font-size: 5rem; } 
h2 { font-size: 2.5rem; } 
h3 { font-size: 2rem; } 
h4 { font-size: 1.5rem; }

u { 
    border-bottom: .5px solid #222; 
    text-decoration: none; 
}

/* ==========================================================================
   2. ESTRUCTURA PRINCIPAL (Compactada para el Marco)
   ========================================================================== */
.player {
    width: fit-content;
    height: 115px !important; /* Forzamos la altura compacta */
    border: #CECECE solid 2px;
    border-radius: 100px;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(0deg, rgba(205,205,205,1) 0%, rgba(230,230,230,1) 30%, rgba(255,255,255,1) 100%); 
    padding: 5px !important;
    box-sizing: border-box;
    overflow: hidden;
}

.window {
    padding: 0px 10px;
    width: 290px;
    font-family: "Myriad Pro";
    -webkit-font-smoothing: none;
    font-size: 11px;
}

.window-body { 
    display: block;
    margin: auto; 
    border-radius: 0em;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

/* ==========================================================================
   3. LA RUEDA (ESTILO iPOD): Grande pero segura
   ========================================================================== */
.wheel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    width: 85px !important;   /* Tamaño grande óptimo */
    height: 85px !important;  /* Mantiene forma circular */
    flex-shrink: 0;           /* Evita que se deforme */
    background: linear-gradient(white, white) padding-box, linear-gradient(to top, white, #A2A2A2) border-box;
    border-radius: 50em;
    border: 2px solid transparent;
    box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
    -webkit-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
    -moz-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
}

.innerwheel {
    border-radius: 50em;
    border: 2px solid #E2E2E2;
    padding: 6px; 
    margin: 0;
    box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.17) inset;
    -webkit-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.17) inset;
    -moz-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.17) inset;
}

th {
    width: 20px;
    margin: 0;
}

/* Corregido el error de sintaxis del código anterior (era margins) */
.fas.fa-minus {
    margin: 0;
    padding-bottom: 5px;
}

.wheelcontrols {
    font-size: 11px !important; 
    text-align: center;
    padding-top: 2px;
    color: #aaa;
    opacity: 0.8;
}

.wheelcontrols button {
    background: none;
    border: none;
    color: #aaa;
    opacity: 0.6;
    font-size: 11px !important;
    padding: 2px;
    cursor: pointer;
}

.wheelcontrols button:hover {
    opacity: 1;
}

.playpause-track {
    font-size: 16px !important;
    padding: 3px;
}

.playpause-track button {
    display: block;
    color: #C1C1C1;
    font-size: 16px;
    margin: auto;
}

/* ==========================================================================
   4. SECCIÓN DE INFORMACIÓN Y REPRODUCCIÓN (Derecha)
   ========================================================================== */
#musicplayer {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    background: linear-gradient(0deg, #F1E3F0, white) padding-box, linear-gradient(to top, white, #A2A2A2) border-box;
    border-radius: 60em;
    border: 2px solid transparent;
    margin-left: 8px;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
    -webkit-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
    -moz-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
}

.songtitle {
    padding: 5px 0 0 0; /* Ajustado de 25px para que no tire los controles abajo */
    color: #A3A3A3;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 13px;
    display: block;
    font-family: "Myriad Pro";
}

.seeking {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 4px 10px 2px 0px;
    color: #A3A3A3;
    font-size: 10px;
}

.current-time { padding-right: 5px; }
.total-duration { padding-left: 5px; }

/* Slider Progress Bar */
.seek_slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 4px;
    background: #e4d5dc;
    opacity: 0.7;
    transition: opacity .2s;
    border-radius: 8px;
    flex-grow: 1;
}

.seek_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 8px;
    background: white;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid #cecece;
    position: relative;
    bottom: 2px;
}

input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
}

input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 2px; cursor: pointer; }
input[type=range]::-moz-range-track { width: 100%; height: 2px; cursor: pointer; }

/* Botonera inferior interna (Sync, Music, Random) */
.controls button {
    display: block;
    margin-left: 5px;
    font-size: 11px !important;
    text-align: center;
    color: #ccb3be;
    opacity: 0.6;
}

.controls button:hover {
    opacity: 1;
}

/* ==========================================================================
   5. COMPORTAMIENTO DE BOTONES Y MEDIA QUERIES (Limpios de errores)
   ========================================================================== */
button {
    min-width: 20px;
    background: none;
    text-align: center;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
}

button:active { 
    opacity: 0.7; 
}