/* === UI COMPLETA (bonita) + LOGO GRANDE === */

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  background:#f7f7f9;
  margin:0;
  color:#222;
}

/* Layout */
.container{max-width:980px;margin:0 auto;padding:28px 20px}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px}
.header h1{font-size:22px;font-weight:700;letter-spacing:.2px;margin:0}
.badge{
  background:#eef3ff;color:#1a73e8;
  border-radius:999px;padding:6px 10px;font-size:12px;font-weight:600;
}
.timer{font-weight:700;font-size:16px;color:#e53935}

/* Tarjeta */
.card{
  background:#fff;border-radius:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  padding:22px;
}

/* Medios */
.scale-img{display:block;max-width:100%;height:auto;margin:10px auto 18px}
audio{width:100%;max-width:700px;margin:10px auto 16px;display:block}

/* Controles */
.controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px 0 8px}
select,input[type=text]{
  font-size:16px;padding:10px 12px;border-radius:12px;border:1px solid #dcdde2;background:#fff
}
label{font-weight:600}

/* Botones de respuesta */
.options{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:14px;margin-top:14px}
.btn-option{
  border:0;border-radius:14px;padding:18px 16px;font-size:18px;cursor:pointer;
  background:linear-gradient(#ffffff,#f2f2f4);
  box-shadow:0 3px 10px rgba(0,0,0,.06);
  transition:transform .06s ease, box-shadow .2s ease, outline-color .2s ease;
}
.btn-option:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.12)}
.btn-option:active{transform:translateY(0)}
.btn-option.active{outline:3px solid #1a73e8;outline-offset:2px}

/* Submit */
.submit-row{display:flex;justify-content:center;margin-top:18px}
button[type=submit]{
  padding:12px 22px;border-radius:12px;border:0;font-size:16px;font-weight:600;
  background:#1a73e8;color:#fff;cursor:pointer;box-shadow:0 6px 14px rgba(26,115,232,.3)
}
button[type=submit]:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}

/* Pie */
.footer{margin-top:12px;font-size:12px;color:#666;text-align:center}
.hidden{display:none}

/* Progreso + feedback */
.progress-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.badge.green{background:#e8f5e9;color:#2e7d32}
.badge.orange{background:#fff3e0;color:#e65100}
.feedback{
  margin:8px 0 12px;padding:10px 12px;border-radius:12px;
  background:#fff8e1;border:1px solid #ffecb3;color:#6d4c41
}

/* Títulos y consignas */
h2{font-size:18px;margin:12px 0 6px}
.consigna{ text-align:center; margin:4px 0 12px; font-weight:700; color:#222}

/* Logo grande en todas las páginas */
.logo-lg{height:64px}
@media (max-width:640px){
  .options{grid-template-columns:1fr}
  .header{flex-direction:column;align-items:flex-start;gap:6px}
  .header h1{font-size:20px}
  .logo-lg{height:48px}
}