html, body { width: 100%; height: 100%; }
body {
  margin: 0;
  font-family: 'Roboto', Arial, sans-serif;
  background: linear-gradient(90deg, #1AF0A2 0%, #4B8FE5 100%);
  min-height: 100vh;
}

.cp-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.cp-header { padding: 2vh 4vw; color: #fff; text-align: center; }
.cp-title { margin: 0; font-size: 6vw; text-shadow: 0 0.6vw 1vw rgba(0,0,0,0.25); letter-spacing: 0.2vw; text-transform: uppercase; }

.cp-main { flex: 1; display: flex; flex-direction: column; gap: 3vh; align-items: center; padding: 2vh 4vw; }

.cp-grid { width: 92vw; display: grid; grid-template-columns: 1fr 1fr; gap: 3vh 3vw; }
.cp-stat { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35); border-radius: 4vw; padding: 2.2vh 4vw; color: #fff; box-shadow: 0 1.4vw 3vw rgba(0,0,0,0.18); display: flex; flex-direction: column; gap: 1.2vh; }
.cp-head { display: flex; align-items: center; gap: 2.4vw; }
.cp-icon { width: 6vw; height: 6vw; color: #ffffff; opacity: 0.95; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.2); border-radius: 2vw; }
.cp-icon svg { width: 60%; height: 60%; }
.cp-label { font-size: 3.8vw; opacity: 0.9; }
.cp-value { font-size: 5.2vw; font-weight: 700; }
.cp-badge { font-size: 4.2vw; font-weight: 700; background: rgba(0,0,0,0.25); padding: 0.8vh 3vw; border-radius: 3vw; align-self: flex-start; }
.cp-badge.playing { background: rgba(26, 240, 162, 0.9); color: #0b0a0b; box-shadow: 0 0.6vw 1.2vw rgba(26,240,162,0.35); }
.cp-badge.paused  { background: rgba(255, 149, 0, 0.9); color: #ffffff; box-shadow: 0 0.6vw 1.2vw rgba(255,149,0,0.35); }
.cp-badge.waiting { background: rgba(128, 128, 128, 0.9); color: #ffffff; box-shadow: 0 0.6vw 1.2vw rgba(128,128,128,0.35); }

.cp-actions { display: flex; gap: 4vw; justify-content: center; width: 100%; margin-top: 2vh; }
.cp-btn {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 5vw;
  padding: 1.8vh 6vw;
  font-size: 4.6vw;
  box-shadow: 0 1.2vw 2.4vw rgba(0,0,0,0.18);
}
.cp-btn:active { background: rgba(0,0,0,0.15); }
.cp-btn:disabled { 
  opacity: 0.5; 
  cursor: not-allowed; 
  background: rgba(255,255,255,0.08);
}
.cp-btn:disabled:active { background: rgba(255,255,255,0.08); }

/* Estilos para botones grandes y pequeños */
.cp-btn.large {
  padding: 2.2vh 7vw;
  font-size: 5.2vw;
  transform: scale(1.05);
  box-shadow: 0 1.6vw 3.2vw rgba(0,0,0,0.25);
}

.cp-btn.small {
  padding: 1.4vh 4vw;
  font-size: 3.8vw;
  transform: scale(0.9);
  box-shadow: 0 0.8vw 1.6vw rgba(0,0,0,0.12);
}

/* Transiciones suaves */
.cp-btn {
  transition: all 0.3s ease;
}

/* Móviles pequeños (hasta 360px) */
@media (max-width: 360px) {
  .cp-title { font-size: 7vw; }
  .cp-grid { grid-template-columns: 1fr; gap: 2vh; }
  .cp-label { font-size: 4.2vw; }
  .cp-value { font-size: 6.5vw; }
  .cp-badge { font-size: 4.5vw; }
  .cp-btn { font-size: 4.8vw; padding: 1.6vh 5vw; }
  .cp-btn.large { 
    padding: 2vh 6vw; 
    font-size: 5.5vw; 
  }
  .cp-btn.small { 
    padding: 1.2vh 3.5vw; 
    font-size: 4vw; 
  }
}

/* Móviles medianos (361px - 480px) */
@media (min-width: 361px) and (max-width: 480px) {
  .cp-grid { grid-template-columns: 1fr; }
  .cp-label { font-size: 4vw; }
  .cp-value { font-size: 6vw; }
  .cp-btn.large { 
    padding: 2.2vh 7vw; 
    font-size: 5.2vw; 
  }
  .cp-btn.small { 
    padding: 1.4vh 4vw; 
    font-size: 3.8vw; 
  }
}

/* Móviles grandes (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .cp-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5vh 3vw; }
  .cp-title { font-size: 5.5vw; }
  .cp-label { font-size: 3.5vw; }
  .cp-value { font-size: 5vw; }
  .cp-badge { font-size: 3.8vw; }
  .cp-btn { font-size: 4.2vw; }
  .cp-btn.large { 
    padding: 2vh 6.5vw; 
    font-size: 4.8vw; 
  }
  .cp-btn.small { 
    padding: 1.3vh 3.8vw; 
    font-size: 3.5vw; 
  }
}

/* Toast minimalista */
.cp-toast {
  position: fixed;
  right: 4vw;
  bottom: 3vh;
  background: rgba(0,0,0,0.75); /* fallback */
  color: #fff;                  /* fallback */
  padding: 1.2vh 4vw;
  border-radius: 4vw;
  box-shadow: 0 1.2vw 2.4vw rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(2vh);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.cp-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.cp-toast.playing { background: rgba(26, 240, 162, 0.95); color: #0b0a0b; box-shadow: 0 1.2vw 2.4vw rgba(26,240,162,0.35); }
.cp-toast.paused  { background: rgba(255, 149, 0, 0.95); color: #ffffff; box-shadow: 0 1.2vw 2.4vw rgba(255,149,0,0.35); }
.cp-toast.waiting { background: rgba(128, 128, 128, 0.95); color: #ffffff; box-shadow: 0 1.2vw 2.4vw rgba(128,128,128,0.35); }