:root{
  --bg: #69C1BC;
  --text: #111;
  --muted: #666;
  --yellow: #FFEB00;
  --yellow-border: #E5B800;
  --red: #C4003F;
  --blue: #72BF88;
  --white: #fff;
  --shadow: 0 10px 0 rgba(0,0,0,.15);
  --shadow-pressed: 0 4px 0 rgba(0,0,0,.18), inset 0 3px 2px rgba(0,0,0,.15);
  --radius: 18px;
}

/* ====== FUENTE DIN NEXT LT PRO HEAVY ====== */
@font-face{
  font-family: "DIN Next LT Pro";
  src:
    url("./fonts/DINNextLTPro-Heavy.woff2") format("woff2"),
    url("./fonts/DINNextLTPro-Heavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "DIN Next LT Pro","DINNextLTPro","Archivo","Inter", Arial, Helvetica, sans-serif;
  color:var(--text);
  background:var(--bg);
}
.container{
  max-width:460px;
  margin:0 auto;
  padding:32px 20px 60px;  /* base (escuchar) */
  text-align:center;
}
/* Solo en GRABAR: bajamos todo más */
body[data-page="record"] .container{ padding-top:96px; }

/* Título: DIN Next LT Pro Heavy (800), más “pegado” */
.title{
  font-family: "DIN Next LT Pro","DINNextLTPro","Archivo","Inter", Arial, sans-serif;
  font-weight:800;
  font-size: clamp(28px, 5.2vw, 36px);
  line-height:1.15;
  letter-spacing:0;
  margin:8px 0 22px;
  text-transform:uppercase;
}
/* Más separación Título ↔ Emoji SOLO en grabar */
body[data-page="record"] .title{ margin-bottom:30px; }

.subtitle{font-size:16px; margin:14px 0 8px;}

/* Emojis en blanco + disolver + un poco más grandes */
.emoji{
  font-family: Arial, "Helvetica Neue", Helvetica,
               "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  font-weight: 800;
  font-size: 44px;
  margin: 10px 0 26px;
  color: #fff;
  opacity: 1;
  transition: opacity .25s ease;
}
.emoji.fading{ opacity:0; }
/* Más separación Emoji ↔ Botón SOLO en grabar */
body[data-page="record"] .emoji{ margin-bottom:38px; }

.record-zone{margin:18px 0 12px;}

/* Botón 3D con layout horizontal (icono + texto) */
.btn-circle{
  width:260px; height:260px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; /* ← más juntos */
  flex-direction:row;
  border:6px solid var(--yellow-border);
  background:var(--yellow); color:#000;
  font-family: "DIN Next LT Pro","DINNextLTPro","Archivo","Inter", Arial, sans-serif;
  font-weight:800; /* ← más negrita */
  font-size:22px;  /* texto más grande */
  box-shadow: var(--shadow);
  cursor:pointer; user-select:none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s ease, filter .15s ease;
}
.btn-circle.is-pressed,
.btn-circle:active{
  transform: translateY(4px) scale(0.98);
  box-shadow: var(--shadow-pressed);
  filter: brightness(0.98);
}

/* Pulso durante grabación */
@keyframes pulseRec {
  0%   { transform: translateY(0) scale(1.00); }
  50%  { transform: translateY(0) scale(1.06); }
  100% { transform: translateY(0) scale(1.00); }
}
/* ==== TEMP: desactivar pulso para estabilizar gestos ==== */
.btn-circle.pulsing { animation: none !important; }


.btn-record[aria-pressed="true"]{
  background:var(--red); color:var(--white);
  border-color:#b51f31;
}

.btn-icon{display:inline-flex; align-items:center; justify-content:center; margin:0 6px 0 0;}
.btn-icon svg{ width:48px; height:48px; } /* icono al doble */
.btn-text{display:inline-block}

.counter{
  margin-top:16px; /* base */
  color:var(--muted);
  font-weight:700;
}
/* Más separación del timer SOLO en grabar */
body[data-page="record"] .counter{ margin-top:28px; }

.preview.hidden{display:none}
.preview audio{width:100%; margin:10px 0 6px}

.actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.btn{
  border:none; border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  font-family: "DIN Next LT Pro","DINNextLTPro","Archivo","Inter", Arial, sans-serif;
}

.btn-primary,
.btn-sec {
  background: #0066CC;
  color: #fff;
}

/* "Grabar de nuevo": gris más oscuro y letras blancas */
.btn-ghost{
  background: #595959; /* más oscuro que #efefef */
  color: #fff;
}

.banner{
  background: var(--yellow);
  color:#000; font-weight:800; padding:12px 10px; margin:8px 0 18px;
  border-radius: var(--radius);
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

.loading{color:#222; font-weight:700; margin:16px 0}
.audio-list {display:grid; gap:12px}
.audio-list audio{width:100%}

.more{margin:18px 0 8px}
.link{color:#002b6f; text-decoration:underline}

.consent{font-size:12px; color:#222; margin:8px 0 12px}

.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:20px; background:#111; color:#fff; padding:10px 14px; border-radius:8px;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.toast.show{opacity:1}

.spinner{
  position:fixed; inset:auto 0 0 0; height:3px; background:linear-gradient(90deg,#0000,#0006,#0000);
  animation: slide 1s linear infinite;
}
.spinner.hidden{display:none}
@keyframes slide{0%{background-position:-200px 0}100%{background-position:200px 0}}

.overlay{ display:none !important; } /* overlay desactivado */
.overlay.hidden{display:none}

.overlay-card{
  background:#fff; color:#222; padding:18px; border-radius:12px; max-width:320px;
  text-align:center; box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

/* Utilidad genérica */
.hidden{ display:none !important; }