/* Hablar (voz.js): el micrófono al centro de la barra de abajo, el botón «Hablar» en la computadora y la capa que escucha.
   Colores del modo de manejo (--panel, --texto, --menta…): se ve bien en los 11 modos. Toques de 44 px, letra de 11 px o más. */

/* ---------- el micrófono en la barra de abajo: círculo rojo de grabar, limpio y levantado, en todos los estilos ----------
   Rojo fijo en los 11 modos (Rodrigo, 4 nov: «de rojo como normalmente para grabar»): #D92D20 con el ícono blanco da 4.8:1, y el círculo
   contra la barra queda arriba de 3:1 tanto en claro (4.8:1) como en oscuro (3.9:1). Sin sombra ni aro: solo el círculo. */
:root{--voz-rojo:#D92D20;--voz-rojo-rgb:217,45,32}
@media(max-width:900px){
  /* el selector pesa más que los estilos de barra.css (V y Muesca le ponían 50 px, el degradado del modo y el ícono del color de la barra):
     el micrófono se ve igual en los 6 estilos (Rodrigo, 5 nov: «en V y muesca el ícono de micrófono no está en rojo y se ve chico») */
  html:is([data-barra],:not([data-barra])) nav.abajo > button.ng-mic.ng-centro{color:#fff!important;font-size:0!important}   /* sin nombre: solo el círculo (el nombre va en aria-label) */
  html:is([data-barra],:not([data-barra])) nav.abajo > button.ng-mic.ng-centro svg{box-sizing:border-box;width:60px!important;height:60px!important;padding:11px;margin-top:-30px;border-radius:50%;
    background:var(--voz-rojo)!important;color:#fff!important;stroke-width:2;box-shadow:none!important;transform:none!important;filter:none!important}
  html[data-barra="muesca"] nav.abajo > button.ng-mic.ng-centro svg{margin-top:-40px}
  html[data-barra="v"] nav.abajo > button.ng-mic.ng-centro svg{margin-top:-33px}
  /* isla: compacta, sin nombres; el micrófono va en su círculo pero sin levantarse */
  html[data-barra="isla"] nav.abajo > button.ng-mic.ng-centro svg{width:48px!important;height:48px!important;padding:8px;margin:0}
  html:is([data-barra],:not([data-barra])) nav.abajo > button.ng-mic.ng-centro:active svg{transform:scale(.94)!important}
  /* solo late, sin ondas alrededor (Rodrigo, 5 nov); con «reducir movimiento» del teléfono se queda quieto */
  html:is([data-barra],:not([data-barra])) nav.abajo > button.ng-mic.ng-centro svg{animation:voz-respira 2.4s ease-in-out infinite}
  html:is([data-barra],:not([data-barra])) body:is(.voz-abierta,.ng-lat-abierto) nav.abajo > button.ng-mic.ng-centro svg{animation:none}
  @media(prefers-reduced-motion:reduce){html:is([data-barra],:not([data-barra])) nav.abajo > button.ng-mic.ng-centro svg{animation:none}}
}

@keyframes voz-onda{0%{outline-color:rgba(var(--voz-rojo-rgb),.7);outline-offset:0}60%,100%{outline-color:rgba(var(--voz-rojo-rgb),0);outline-offset:18px}}
@keyframes voz-respira{0%,100%{scale:1}12%{scale:1.09}26%{scale:.98}40%{scale:1}}

/* ---------- Configuración › Barra de abajo: tus atajos y la vista previa con el micrófono rojo ---------- */
.bb-mini .bb-mini-mic svg{box-sizing:border-box;width:34px;height:34px;padding:6px;border-radius:50%;background:var(--voz-rojo);color:#fff}
.bb-atajos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.bb-at{display:block;margin:0!important;padding:0}
.bb-atajos > div{display:flex;flex-direction:column;gap:8px}
#cfgBarraSec #bbAtDef{margin-bottom:14px}
.bb-atajos small{font:600 12px/1.2 var(--f);color:var(--gris)}
.bb-at select{width:100%;min-height:44px;padding:0 10px;border-radius:12px;border:1px solid var(--linea2);background:var(--fondo,var(--panel));color:var(--texto);font:600 15px var(--f)}
.bb-oc{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- «Hablar» en la computadora (junto a tu foto) ---------- */
.ng-voz-btn{display:none}
@media(min-width:901px){
  /* el botón mide 44 px y entra después de pintar (navegacion.js): el encabezado ya trae esa altura para que la pantalla no brinque (CLS) */
  header.top .in{min-height:68px;box-sizing:border-box}
  .ng-voz-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-right:12px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;flex:none;
    background:var(--voz-rojo);color:#fff;font:700 15px/1 var(--f)}
  .ng-voz-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .ng-voz-btn:focus-visible{outline:3px solid rgba(var(--menta-rgb),.35);outline-offset:2px}
}

/* ---------- la capa que escucha ---------- */
/* con id e !important: el portal pone position:relative y z-index:1 a todo lo que cuelga de <body> (body > :not(#circuito)…) */
#vozCapa.voz-capa{position:fixed!important;inset:0;z-index:2147483000!important;display:flex;align-items:flex-end;justify-content:center}
.voz-capa.oculto{display:none!important}
.voz-velo{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.voz-hoja{position:relative;width:100%;max-height:92dvh;overflow:auto;background:var(--panel);color:var(--texto);border-radius:24px 24px 0 0;
  padding:8px 18px calc(22px + env(safe-area-inset-bottom,0px));text-align:center;box-shadow:0 -12px 40px rgba(0,0,0,.3);border-top:1px solid var(--linea);
  animation:voz-sube var(--dur-2,.24s) var(--curva-entra,cubic-bezier(.2,.8,.2,1))}
@keyframes voz-sube{from{transform:translateY(24px);opacity:0}}
.voz-cab{display:flex;align-items:center;justify-content:space-between;min-height:48px}
.voz-cab small{font:700 12px/1.2 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.voz-x{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;border:0;background:none;color:var(--texto);cursor:pointer}
.voz-x svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.voz-mic{position:relative;width:88px;height:88px;margin:6px auto 12px;display:grid;place-items:center;border-radius:50%;border:0;cursor:pointer;
  background:var(--voz-rojo);color:#fff}
.voz-mic[hidden]{display:none}
.voz-mic svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.voz-mic::before,.voz-mic::after{content:'';position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(var(--voz-rojo-rgb),.3);opacity:0;pointer-events:none}
.voz-mic::after{inset:-22px;border-color:rgba(var(--voz-rojo-rgb),.15)}
.voz-mic.vivo::before,.voz-mic.vivo::after{opacity:1;animation:voz-late 1.4s ease-out infinite}
.voz-mic.vivo::after{animation-delay:.35s}
@keyframes voz-late{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.15);opacity:0}}
@media(prefers-reduced-motion:reduce){.voz-mic.vivo::before,.voz-mic.vivo::after{animation:none;opacity:1}.voz-hoja{animation:none}}
.voz-nota{margin:2px 0 4px;color:var(--gris);font-size:14px;line-height:1.4}
.voz-oido{margin:0 0 4px;min-height:32px;font:italic 800 clamp(22px,6.4vw,28px)/1.15 var(--num,var(--f));color:var(--texto);overflow-wrap:anywhere}
.voz-oido.gris{color:var(--gris)}
.voz-capa[data-estado="listo"] .voz-oido{font-style:normal}
.voz-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.voz-chip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--linea2);background:var(--sup);color:var(--texto);font:600 14px/1 var(--f);cursor:pointer}
.voz-chip:active{background:var(--sup2)}
.voz-escribe{display:flex;gap:8px;margin-top:14px}
.voz-escribe[hidden],.voz-acc[hidden]{display:none}
.voz-escribe input{flex:1;min-width:0;min-height:52px;padding:0 14px;border-radius:14px;border:1.5px solid var(--linea2);background:var(--fondo,var(--panel));color:var(--texto);font:500 16px var(--f)}
.voz-escribe .btn{width:auto;margin:0;min-width:64px;min-height:52px;padding:0 18px}
.voz-acc{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.voz-acc .btn{margin:0;min-height:52px;padding:0 12px}
.voz-acc .btn.sec{background:none;color:var(--texto);border:1.5px solid var(--linea2)}
.voz-oc{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(min-width:901px){
  #vozCapa.voz-capa{align-items:center}
  .voz-hoja{width:460px;border-radius:24px;padding:10px 24px 26px;border:1px solid var(--linea)}
}

/* ---------- la voz que contesta (voz.js): «Callar» mientras habla, su respuesta y el interruptor de Configuración ---------- */
.voz-calla{display:none;align-items:center;gap:8px;min-height:44px;margin:0 auto 6px;padding:0 16px;border-radius:999px;border:1px solid var(--linea2);background:var(--sup);color:var(--texto);font:700 14px/1 var(--f);cursor:pointer}
.voz-calla svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.voz-capa.hablando .voz-calla{display:inline-flex}
.voz-capa.hablando .voz-mic{animation:voz-habla 1s ease-in-out infinite}
@keyframes voz-habla{0%,100%{scale:1}50%{scale:1.05}}
@media(prefers-reduced-motion:reduce){.voz-capa.hablando .voz-mic{animation:none}}
.voz-oido.dice{font-style:normal}
.voz-sw{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font:600 15px/1.3 var(--f);color:var(--texto)}
.voz-sw input{width:22px;height:22px;flex:none;accent-color:var(--voz-rojo,#D92D20);margin:0}