/* Estudio de voces: reutiliza el sistema visual de app.css y añade
   sólo lo que necesita un formulario. */
body.estudio{min-height:100vh}
.estudio .app{padding-bottom:40px}
.logo-chico{font-size:clamp(2rem,10vw,3rem)}
a.btn-redondo{text-decoration:none;font-size:1.3rem;font-weight:700}
.nota{font:400 .78rem/1.5 var(--f-texto);color:var(--tinta-suave);margin:4px 0 10px}
.nota code,.ayuda-texto code{
  font:700 .72rem/1 ui-monospace,Menlo,Consolas,monospace;
  background:#f1e6cc;padding:2px 5px;border-radius:5px;color:var(--tinta);
}
.fila{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.etq{font:600 .74rem/1 var(--f-display);color:var(--tinta-suave);letter-spacing:.06em;text-transform:uppercase}
.campo{
  flex:1;min-width:0;padding:11px 13px;border-radius:12px;
  border:1.5px solid var(--borde);background:#fffdf6;color:var(--tinta);
  font:600 .9rem/1.2 var(--f-texto);box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}
.campo:focus{outline:none;border-color:var(--oro-hondo);box-shadow:0 0 0 3px rgba(245,197,66,.35)}
select.campo{appearance:auto}
.btn-modal.chico{display:inline-block;width:auto;margin:0;padding:11px 16px;font-size:.84rem}
.btn-jugar{margin:4px 0}
.estado{font:700 .76rem/1.4 var(--f-texto);color:var(--tinta-suave);min-height:1.3em;margin-top:4px}
.estado.ok{color:var(--verde-hondo)}
.estado.mal{color:var(--rojo)}

/* ajustes de la voz */
.ajustes label{
  flex:1;min-width:140px;display:grid;gap:4px;
  font:600 .7rem/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave);
}
.ajustes input[type=range]{width:100%;accent-color:var(--rojo)}
.ajustes output{font:800 .74rem/1 var(--f-texto);color:var(--rojo)}

/* lista de voces */
.lista-voces{display:grid;gap:8px;margin-top:10px}
.voz{
  display:flex;gap:10px;align-items:center;padding:10px 11px;border-radius:14px;
  border:1.5px solid var(--borde);background:#fffdf6;box-shadow:0 2px 0 rgba(120,80,30,.12);
  text-align:left;width:100%;transition:transform .1s,border-color .15s,background-color .15s;
}
.voz:active{transform:scale(.99)}
.voz[aria-checked="true"]{border-color:var(--rojo);background:linear-gradient(180deg,#fff4f0,#ffe9e4);box-shadow:0 0 0 2px rgba(176,20,58,.25)}
.voz .vi{
  flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;
  background:linear-gradient(180deg,#fff7dd,#f4e3b4);box-shadow:inset 0 0 0 1.5px var(--borde);
}
.voz .vc{flex:1;min-width:0}
.voz .vn{display:block;font:600 .84rem/1.2 var(--f-display);color:var(--tinta)}
.voz .vd{display:block;font:400 .68rem/1.35 var(--f-texto);color:var(--tinta-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voz .vt{
  flex:none;padding:8px 12px;border-radius:999px;
  background:linear-gradient(180deg,var(--oro-brillo),var(--oro-hondo));color:#5b3a05;
  font:700 .72rem/1 var(--f-display);border:1px solid #fff1bf;box-shadow:0 2px 0 var(--oro-sombra);
}
.voz .vt[disabled]{opacity:.5}
.voz .vtag{
  flex:none;font:800 .56rem/1 var(--f-texto);letter-spacing:.06em;text-transform:uppercase;
  padding:4px 7px;border-radius:999px;background:#e9f6ef;color:var(--verde-hondo);
}
.voz .vtag.bib{background:#eee9f8;color:var(--morado-hondo)}

/* casillas de estilo */
.estilos .op{cursor:pointer;user-select:none}
.estilos .op input{accent-color:var(--rojo);width:16px;height:16px}

/* progreso y bitácora */
.progreso{
  height:12px;border-radius:999px;overflow:hidden;background:#e2d6bd;margin:10px 0 6px;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.18);border:1px solid #d3c39d;
}
.progreso i{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(180deg,#6fe0a6,#1f9d6b 55%,#168a5b);transition:width .3s ease;
}
.bitacora{
  margin-top:8px;max-height:180px;overflow:auto;padding:10px 12px;border-radius:12px;
  background:#2a1a12;color:#ffe9c2;font:500 .7rem/1.5 ui-monospace,Menlo,Consolas,monospace;
  white-space:pre-wrap;word-break:break-word;
}
.bitacora:empty{display:none}

/* revisión */
.lista-baraja .carta.sin{filter:grayscale(1) brightness(.6)}
.lista-baraja .carta.sonando{box-shadow:0 0 0 3px var(--oro),0 3px 14px rgba(245,197,66,.75)}