/* ==========================================================
   REGRESA A TI · AUDIO CARDS
   ========================================================== */

.rat-audio-player{
  --rat-accent:#879B7A;
  --rat-soft:#EEF3EB;

  width:100%;
  box-sizing:border-box;
  margin-top:22px;
  padding:14px 16px;

  border:1px solid color-mix(
    in srgb,
    var(--rat-accent) 34%,
    transparent
  );

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      var(--rat-soft),
      rgba(255,255,255,.82)
    );

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.rat-audio-player[data-category="AP"]{
  --rat-accent:#C98F8F;
  --rat-soft:#F8EEEE;
}

.rat-audio-player[data-category="E"]{
  --rat-accent:#6F879B;
  --rat-soft:#EEF3F6;
}

.rat-audio-player[data-category="NI"]{
  --rat-accent:#A78FAF;
  --rat-soft:#F3EEF6;
}

.rat-audio-player[data-category="PG"]{
  --rat-accent:#879B7A;
  --rat-soft:#EEF3EB;
}

.rat-audio-top{
  display:flex;
  align-items:center;
  gap:12px;
}

.rat-play{
  appearance:none;
  border:0;
  width:44px;
  height:44px;
  min-width:44px;

  border-radius:50%;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--rat-accent);
  color:white;

  font-size:17px;
  line-height:1;

  box-shadow:
    0 5px 18px
    color-mix(
      in srgb,
      var(--rat-accent) 30%,
      transparent
    );

  transition:
    transform .18s ease,
    opacity .18s ease;
}

.rat-play:hover{
  transform:scale(1.04);
}

.rat-play:active{
  transform:scale(.97);
}

.rat-audio-copy{
  min-width:0;
  flex:1;
}

.rat-audio-label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--rat-accent);
}

.rat-audio-time{
  margin-top:3px;
  font-size:11px;
  opacity:.62;
}

.rat-progress-wrap{
  margin-top:12px;
  width:100%;
}

.rat-progress{
  appearance:none;
  width:100%;
  height:4px;
  margin:0;

  border-radius:999px;
  cursor:pointer;

  background:
    linear-gradient(
      to right,
      var(--rat-accent) 0%,
      var(--rat-accent) var(--rat-progress,0%),
      rgba(0,0,0,.10) var(--rat-progress,0%),
      rgba(0,0,0,.10) 100%
    );
}

.rat-progress::-webkit-slider-thumb{
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--rat-accent);
  border:2px solid white;
  box-shadow:0 1px 5px rgba(0,0,0,.15);
}

.rat-progress::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--rat-accent);
  border:2px solid white;
}

.rat-category-line{
  height:3px;
  width:38px;
  background:var(--rat-accent);
  border-radius:999px;
  margin-bottom:10px;
}

@media(max-width:600px){

  .rat-audio-player{
    margin-top:18px;
    padding:13px 14px;
    border-radius:12px;
  }

  .rat-play{
    width:42px;
    height:42px;
    min-width:42px;
  }
}