/* Wrapper principal */
.zoot-widget-wrapper {
    margin: 40px 0;
    width: 100%;
    display: flex;
    flex-direction: column; /* Apilar texto y player */
    align-items: center;     /* Centrar todo */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Texto Superior */
.zoot-label-text {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px; /* Espacio entre texto y player */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

/* La Cápsula Negra (Más grande ahora) */
.zoot-widget {
    background-color: #000000;
    width: 100%;
    max-width: 550px; /* Más ancho */
    height: 90px;     /* Más alto */
    border-radius: 20px;
    display: flex;
    align-items: center; /* Alineación vertical perfecta */
    padding: 0 25px;     /* Padding lateral interno */
    box-shadow: 0 15px 35px rgba(0,0,0,0.2); /* Sombra más suave y difusa */
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* 1. Imagen (Izquierda) */
.zoot-art {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background-color: #222;
    border-radius: 12px;
    overflow: hidden;
    margin-right: 30px; /* Separación con controles */
    box-shadow: 0 4px 10px rgba(255,255,255,0.1);
}

.zoot-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 2. Controles (Centro - Ocupan espacio disponible) */
.zoot-controls {
    flex-grow: 1;
    display: flex;
    justify-content: center; /* Centrados horizontalmente */
    align-items: center;
    gap: 25px; /* Espacio entre botones */
}

.zoot-btn {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.1s ease;
}

.zoot-btn:hover { transform: scale(1.1); }
.zoot-btn:active { transform: scale(0.95); }

/* Tamaños de iconos */
.zoot-skip-btn svg { width: 26px; height: 26px; opacity: 0.8; }
.zoot-main-play svg { width: 42px; height: 42px; } /* Play más grande */


/* 3. Tiempo (Derecha - Fijo) */
.zoot-time-display {
    font-family: 'Courier New', Courier, monospace; /* Fuente monoespaciada para números */
    font-size: 13px;
    color: #999;
    margin-left: 30px; /* Separación de controles */
    min-width: 85px;   /* Ancho fijo para que no baile */
    text-align: right;
    font-weight: 600;
}

.zoot-current { color: #fff; } /* Tiempo actual blanco */

/* 4. Barra de Progreso (Línea inferior) */
.zoot-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px; /* Un poco más gruesa */
    background: rgba(255,255,255,0.15);
    cursor: pointer;
    transition: height 0.2s;
}

/* Efecto hover en la barra para facilitar clic */
.zoot-progress-bar:hover { height: 8px; }

.zoot-progress-fill {
    width: 0%;
    height: 100%;
    background-color: #ffffff;
    transition: width 0.1s linear;
    border-top-right-radius: 4px; /* Pequeño detalle estético */
    border-bottom-right-radius: 4px;
}

/* Responsive: Ajustes para móviles */
@media (max-width: 480px) {
    .zoot-widget {
        padding: 0 15px;
        height: 80px;
    }
    .zoot-art { margin-right: 15px; width: 50px; height: 50px; }
    .zoot-controls { gap: 15px; }
    .zoot-time-display { font-size: 11px; margin-left: 15px; min-width: auto; }
}