/* Voces unificadas (04/10/2026) — lo pinta /assets/comun/js/voces-unificadas.js dentro de la sección TTS. */
.czv-bloque { display: grid; gap: 8px; }
.czv-fila { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
.czv-fila .form-select { min-width: 0; width: 100%; }
@media (max-width: 560px) { .czv-fila { grid-template-columns: minmax(0, 1fr); } }
.czv-nota { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.czv-ale {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px; background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 9px 13px;
}
.czv-ale-lbl { display: flex; align-items: center; gap: 9px; cursor: pointer; margin: 0; }
.czv-ale-txt { font-size: 12.5px; font-weight: 700; color: var(--text); }
.czv-ale-nivel { width: auto; min-width: 0; flex: 1 1 130px; padding-top: 6px; padding-bottom: 6px; font-size: 12.5px; }
.czv-cmd-cab {
  font-size: 11.5px; color: var(--muted); line-height: 1.45; padding: 8px 4px 5px; margin-top: 4px;
  border-top: 1px dashed rgba(255,255,255,0.08);
}
.czv-cmd-cab strong { color: var(--text); font-weight: 700; }
.czv-cmd-en-grupo { margin-left: 10px; }
.czv-bloque.czv-sin-nivel .czv-fila { grid-template-columns: minmax(0, 1fr); }

/* Botón «⭐ Ver voces Pro (N)» (en el hueco del nivel cuando está en Básica) y línea «✨ Nuevo» */
.czv-btn-pro {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; width: 100%;
  font: 700 13px 'DM Sans', 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--text); cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(245,158,11,0.45); border-radius: 10px; padding: 10px 12px;
  transition: border-color .15s, background .15s;
}
.czv-btn-pro:hover { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.8); }
.czv-btn-pro:focus-visible, .czv-nuevo-ok:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }
.czv-btn-pro[hidden], .czv-nuevo[hidden], .czv-nuevo-linea[hidden] { display: none !important; }
.czv-btn-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.czv-nuevo { flex-shrink: 0; font-size: 10.5px; font-weight: 800; color: #1a1205; background: #f59e0b; border-radius: 99px; padding: 2px 8px; letter-spacing: .02em; }
.czv-nuevo-linea {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--text); line-height: 1.45;
  background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3); border-radius: 10px; padding: 8px 12px;
}
.czv-nuevo-ok { margin-left: auto; font: 700 11.5px 'DM Sans', system-ui, sans-serif; color: #f59e0b; background: none; border: 1px solid rgba(245,158,11,0.45); border-radius: 8px; padding: 3px 10px; cursor: pointer; }
@media (min-width: 561px) { .czv-bloque.czv-con-boton .czv-fila { grid-template-columns: minmax(0, 1fr) auto; } .czv-bloque.czv-con-boton .czv-btn-pro { width: auto; } }
.czv-ale-aviso { font-size: 12px; color: var(--text); line-height: 1.45; margin: -6px 0 14px; padding: 8px 12px; border-radius: 10px;
  background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3); }
.czv-ale-aviso[hidden] { display: none !important; }

/* Escuchar las voces (▶) */
.czv-oir {
  width: 34px; height: 34px; flex-shrink: 0; margin-left: 6px; vertical-align: middle; border-radius: 50%; cursor: pointer;
  font: 700 12px system-ui, sans-serif; line-height: 1; color: var(--text); background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14); transition: border-color .15s, background .15s;
}
.czv-oir:hover { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.09); }
.czv-oir[aria-pressed="true"] { border-color: #22c55e; color: #22c55e; }
.czv-oir:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
.czv-oir[hidden] { display: none !important; }
.czv-oir-grande { width: 42px; height: 42px; margin-left: 0; border-radius: 10px; font-size: 14px; }
.czv-oir-cmd { width: 28px; height: 28px; margin-left: 0; font-size: 11px; }
/* fila del selector: voz · nivel/botón · ▶ */
.czv-fila #czvVoz { grid-area: voz; }
.czv-fila #czvNivel, .czv-fila #czvVerPro { grid-area: nivel; }
.czv-fila #czvOir { grid-area: oir; }
.czv-fila { grid-template-areas: "voz nivel"; }
.czv-bloque.czv-con-oir .czv-fila { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; grid-template-areas: "voz nivel oir"; }
.czv-bloque.czv-sin-nivel .czv-fila { grid-template-areas: "voz"; }
.czv-bloque.czv-sin-nivel.czv-con-oir .czv-fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "voz oir"; }
@media (min-width: 561px) { .czv-bloque.czv-con-boton.czv-con-oir .czv-fila { grid-template-columns: minmax(0, 1fr) auto auto; } }
@media (max-width: 560px) {
  .czv-fila, .czv-bloque.czv-con-oir .czv-fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "voz oir" "nivel nivel"; }
  .czv-bloque.czv-sin-nivel .czv-fila { grid-template-columns: minmax(0, 1fr); grid-template-areas: "voz"; }
  .czv-bloque.czv-sin-nivel.czv-con-oir .czv-fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "voz oir"; }
}
@media (max-width: 560px) { .czv-rejilla-voz { grid-template-columns: minmax(0, 1fr) !important; } }

/* Comandos de voz (04/10/2026): en móvil el ▶ y el icono de nivel se salían por la derecha (ya pasaba antes): la fila
   pasa a dos líneas (interruptor · comando · ▶ · icono arriba; la descripción debajo, a todo el ancho). Escritorio igual. */
@media (max-width: 500px) {
  #ttsCmdVozPanel div[style*="gap:10px;padding:8px 12px"] { flex-wrap: wrap; row-gap: 4px; }
  #ttsCmdVozPanel div[style*="gap:10px;padding:8px 12px"] > span[style*="flex:1"] { order: 9; flex: 1 1 100% !important; min-width: 0; overflow-wrap: anywhere; }   /* el flex:1 va en línea */
  #ttsCmdVozPanel .czv-oir-cmd { margin-left: auto; flex-shrink: 0; }
}

/* ── «Tu voz» (06/10/2026): arriba de Lectura por voz ── */
.czv-tv { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 12px 0 4px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(232,230,225,.12); background: rgba(232,230,225,.03); }
.czv-tv[hidden] { display: none; }
.czv-tv-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; font-size: 16px; font-weight: 700; }
.czv-tv-txt { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.czv-tv-tit { font-size: 14.5px; font-weight: 700; color: var(--text, #e8e6e1); }
.czv-tv-sub { font-size: 13px; line-height: 1.5; color: var(--muted, rgba(232,230,225,.64)); }
.czv-tv-sub:empty { display: none; }
.czv-tv-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.czv-tv-btns button { font: inherit; font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(232,230,225,.2); background: rgba(232,230,225,.05); color: var(--text, #e8e6e1); transition: background .18s, border-color .18s, filter .18s; }
.czv-tv-btns button:hover { background: rgba(232,230,225,.1); }
.czv-tv-btns button[hidden] { display: none; }
/* En Básica teniendo Pro: ámbar, que se vea */
.czv-tv[data-estado="basica"] { border-color: rgba(255,180,61,.45); background: linear-gradient(135deg, rgba(255,180,61,.12), rgba(255,180,61,.04)); }
.czv-tv[data-estado="basica"] .czv-tv-ico { background: rgba(255,180,61,.16); color: #ffb43d; border: 1px solid rgba(255,180,61,.35); }
.czv-tv[data-estado="basica"] .czv-tv-usar { background: #ffb43d; border-color: #ffb43d; color: #131520; }
.czv-tv[data-estado="basica"] .czv-tv-usar:hover { filter: brightness(1.08); background: #ffb43d; }
/* Ya con voz de pago: discreto, en verde */
.czv-tv[data-estado="pro"] { padding: 10px 14px; border-color: rgba(74,222,128,.22); background: rgba(74,222,128,.05); }
.czv-tv[data-estado="pro"] .czv-tv-ico { width: 26px; height: 26px; font-size: 13px; background: rgba(74,222,128,.12); color: #4ade80; }
.czv-tv[data-estado="pro"] .czv-tv-tit { font-size: 13.5px; font-weight: 600; }
.czv-tv[data-estado="pro"] .czv-tv-btns button { padding: 6px 12px; font-size: 12.5px; }
@media (max-width: 720px) { .czv-tv-btns { width: 100%; } .czv-tv-btns button { flex: 1; } }

/* «Hay más voces disponibles…» a todo el ancho (06/10/2026): cabecera en una línea y tarjetas lado a lado */
.czv-recuadro-ancho { margin: 16px 0 6px !important; }
.czv-recuadro-ancho > div:first-child { flex-wrap: wrap; }
.czv-recuadro-ancho > div:last-child { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }