:root{
  --p:#003F7A;
  --p-light:#14548f;
  --white:#fff;
  --text:#000;
  --line:#ccd9e6;
}

/* Card */
.voice-memo{
  width:100%;
  padding:18px;
  border-radius:16px;
  border:1px solid var(--line);
  font-family:-apple-system, BlinkMacSystemFont,"Segoe UI",sans-serif;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Header */
.top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.title{
  margin:0;
  font-size:20px;
  font-weight:700;
  color:var(--p);
}

.subtitle{
  margin:2px 0 0;
  color:#607089;
  font-size:13px;
}

/* Icon buttons */
.icon-btn{
  background:none;
  border:none;
  padding:8px;
  cursor:pointer;
  border-radius:10px;
}

.icon-btn svg{
  width:20px;
  height:20px;
  fill:var(--p);
}

.icon-btn:hover{
  background:#f0f5fa;
}

/* Opciones (⋮) */
.gvm-options-wrap{
  position:relative;
}

/* Menú de opciones */
.gvm-menu{
  position:absolute;
  top:42px;
  right:0;
  min-width:160px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:6px;
  z-index:9999;
  animation:gvmFade .12s ease-out;
}

/* Item del menú */
.gvm-menu-item{
  width:100%;
  background:none;
  border:0;
  padding:10px 12px;
  text-align:left;
  font-size:14px;
  font-weight:500;
  color:var(--p);
  border-radius:8px;
  cursor:pointer;
}

/* Hover item menú */
.gvm-menu-item:hover{
  background:#f0f5fa;
}

/* Focus accesible */
.gvm-menu-item:focus-visible{
  outline:none;
  background:var(--p-light);
  color:var(--white);
}
.gvm-menu-item.gvm-download {
    border: none;
}

/* Animación menú */
@keyframes gvmFade{
  from{
    opacity:0;
    transform:translateY(-4px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* Barra */
.bar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:4px;
}

.time{
  width:38px;
  font-size:12px;
  text-align:center;
  color:var(--text);
}

.range-wrap{
  flex:1;
  position:relative;
  height:4px;
  display:flex;
  align-items:center;
}

.range{
  -webkit-appearance:none;
  width:100%;
  height:4px;
  background:var(--line);
  border-radius:999px;
  outline:none;
}

.range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  background:var(--p);
  border-radius:50%;
  border:3px solid var(--white);
  cursor:pointer;
  margin-top:0;
}

.range-fill{
  position:absolute;
  height:4px;
  left:0;
  top:50%;
  transform:translateY(-50%);
  background:var(--p);
  width:0;
  border-radius:999px;
}

/* Controles */
.controls{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
}

.wave svg{
  width:26px;
  height:26px;
  stroke:var(--p);
}

/* Play */
.play{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--p);
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
  color:var(--white);
}

.play:hover{
  background:var(--p-light);
  transform:scale(1.05);
}

.play svg{
  width:34px;
  height:34px;
  fill:currentColor;
}

.icon-pause{ display:none !important; }
.play.paused .icon-play{ display:none !important; }
.play.paused .icon-pause{ display:inline !important; }
.icon-play{ transform:translateX(-1px); }

/* Like */
.like-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0;
  border:0;
  background:none !important;
  cursor:pointer;
  line-height:1;
  vertical-align:middle;
}

.like-btn .icon-heart{
  width:24px;
  height:24px;
  display:block;
  fill:var(--p);
  transition:transform .12s ease;
}

.like-btn.liked .icon-heart{
  transform:scale(1.1);
}

.like-btn .like-count{
  display:inline-block;
  line-height:1;
  font-weight:600;
  color:var(--p);
}

/* Wrapper opcional del like */
.like-btn-wrapper{
  display:flex;
  align-items:right;
  justify-content:right;
}

/* Accesibilidad / iOS focus */
.play:focus-visible,
.icon-btn:focus-visible {
  outline:none;
  background-color:var(--p-light);
  box-shadow:0 0 0 3px rgba(0, 63, 122, .35);
}
.icon-btn.options {
    border: none;
}

/* Quitar highlight iOS */
.play,
.play:active{
  -webkit-tap-highlight-color:transparent !important;
  box-shadow:none !important;
}

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

/* Screen reader only */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}