/* ═══════════════════════════════════════════════════════════════════════════
   PRESUPUESTO VIVO · VOZ · la nota de voz o texto (E4, cuentanos)
   Ronda 3 (R9): la nota de voz, como la de WhatsApp, vestida con la casa.

   Todo bajo .voz: no toca nada fuera de si misma. Reutiliza piezas de la casa
   tal cual (.boton, .boton--suave, .boton__puntos, .aviso-pastilla). Los
   doodles son de relleno (fill), no de trazo: .voz .voz-ico gana a «.boton svg»
   de _casa.css para no salir huecos dentro de un boton (bloque 00).

   Colores: el primario de la casa (degradado chicle) donde WhatsApp pone su
   verde; el punto de grabar en chicle donde WhatsApp pone rojo. Nada oscurece
   el rosa: lo que falta por escuchar va en tinta suave.

   Fichero propio: no es de solo lectura. Ficha en _brief/VOZ.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════ 00 · RAIZ, SEGMENTADA Y DOODLES ═══════════════════════ */
.voz{container:voz / inline-size;display:grid;gap:var(--spacing-bloque);width:100%;max-width:30rem;margin-inline:auto}
.voz-modos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:var(--radio-entero);background-color:var(--color-nube)}
.voz-modos__marca{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 6px);border-radius:var(--radio-entero);background-color:#fff;box-shadow:0 6px 16px -10px rgb(28 28 30 / .22);transition:translate var(--dur-pausado) var(--ease-nivel)}
.voz[data-modo="texto"] .voz-modos__marca{translate:calc(100% + 4px) 0}
.voz-modo{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.75rem;padding-inline:.5rem;border-radius:var(--radio-entero);color:var(--color-tinta-suave);font-family:var(--font-sans);font-size:var(--text-corto);font-weight:600;letter-spacing:-.005em;transition:color var(--dur-corto) var(--ease-salida)}
.voz-modo[aria-pressed="true"]{color:var(--color-tinta)}
.voz-modo .voz-ico{opacity:.7}
.voz-modo[aria-pressed="true"] .voz-ico{opacity:1;color:var(--color-chicle)}

.voz .voz-ico{display:block;width:1em;height:1em;flex:none;fill:currentColor;stroke:none}
.voz-panel{min-width:0}
.voz-aviso-zona{display:grid;justify-content:center}

/* ═══════════════════════ 01 · EL COMPOSITOR (reposo · grabando · pausado) ═══════════════════════
 * Como el de WhatsApp: una pildora blanca y el boton redondo a su derecha, del
 * mismo alto. Al grabar, la pildora se llena (papelera, punto y cronometro,
 * onda, pausa) y el boton redondo pasa de micro a «listo» sin moverse: el dedo
 * que ha empezado a grabar es el que termina.
 * Alineacion optica: los botones redondos de dentro (2.75rem) van a
 * (alto - 2.75rem)/2 del canto, concentricos con la pildora; la pista arranca
 * a medio alto del canto. */
.voz-grabador{--alto:3.5rem;--dentro:2.75rem;display:grid;justify-items:center;gap:var(--spacing-pieza);padding-block:var(--spacing-dedo)}
.voz-compositor{display:grid;grid-template-columns:minmax(0,1fr) var(--alto);align-items:center;column-gap:var(--spacing-dedo);width:100%}
.voz-barra{display:flex;align-items:center;gap:.25rem;min-width:0;height:var(--alto);padding-inline:calc((var(--alto) - var(--dentro)) / 2);border-radius:var(--radio-entero);background-color:#fff;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 8%,transparent),0 6px 16px -10px rgb(28 28 30 / .2)}
.voz-pista{flex:1;min-width:0;margin:0;padding-inline-start:calc(var(--alto) / 2 - (var(--alto) - var(--dentro)) / 2);color:var(--color-tinta-suave);font-size:var(--text-corto);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.voz-redondo{position:relative;display:grid;place-items:center;width:var(--dentro);height:var(--dentro);flex:none;padding:0;border:0;border-radius:var(--radio-entero);background-color:transparent;color:var(--color-tinta);cursor:pointer;transition:background-color var(--dur-corto) var(--ease-salida),transform var(--dur-corto) var(--ease-salida)}
@media (hover:hover){.voz-redondo:hover{background-color:var(--color-nube)}}
.voz-redondo:active{transform:scale(var(--esc-pulsa));transition-duration:var(--dur-toque)}
.voz .voz-redondo .voz-ico{width:1.3rem;height:1.3rem}
.voz-redondo > span{display:grid;place-items:center}

/* lo que solo existe mientras se graba */
.voz-papelera,.voz-vivo,.voz-directo,.voz-pausa{display:none}
.voz-grabador:is([data-estado="grabando"],[data-estado="pausado"]) :is(.voz-papelera,.voz-pausa){display:grid}
.voz-grabador:is([data-estado="grabando"],[data-estado="pausado"]) .voz-vivo{display:inline-flex}
.voz-grabador:is([data-estado="grabando"],[data-estado="pausado"]) .voz-directo{display:flex}
.voz-grabador:is([data-estado="grabando"],[data-estado="pausado"]) .voz-pista{display:none}

/* el punto que late (chicle, nunca rojo) y el cronometro */
.voz-vivo{align-items:center;gap:.5rem;flex:none;padding-inline:.375rem .25rem}
.voz-punto{width:.625rem;height:.625rem;flex:none;border-radius:var(--radio-entero);background-color:var(--color-chicle);animation:voz-late 1100ms var(--ease-nivel) infinite}
@keyframes voz-late{0%,100%{opacity:1;scale:1}50%{opacity:.35;scale:.8}}
[data-estado="pausado"] .voz-punto{animation:none;background-color:transparent;box-shadow:inset 0 0 0 2px var(--color-chicle)}
.voz-crono{min-width:2.4em;font-family:var(--font-sans);font-size:var(--text-corto);font-weight:600;font-variant-numeric:tabular-nums;color:var(--color-tinta)}

/* la onda en vivo: barras que entran por la derecha y se van por la izquierda */
.voz-directo{flex:1;min-width:0;height:1.75rem;align-items:center;justify-content:flex-end;gap:2px;overflow:hidden;padding-inline-end:.25rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 1.75rem);mask-image:linear-gradient(90deg,transparent,#000 1.75rem)}
.voz-directo i{display:block;flex:none;width:3px;height:max(3px,calc(var(--h,0) * 100%));border-radius:var(--radio-entero);background-color:var(--color-chicle)}
[data-estado="pausado"] .voz-directo i{background-color:color-mix(in oklab,var(--color-tinta) 28%,transparent)}

.voz-pausa > .voz-pausa__seguir{display:none}
[data-estado="pausado"] .voz-pausa > .voz-pausa__pausa{display:none}
[data-estado="pausado"] .voz-pausa > .voz-pausa__seguir{display:grid;color:var(--color-chicle)}
.voz .voz-pausa .voz-pausa__pausa .voz-ico{width:1.05rem;height:1.05rem}
.voz .voz-papelera .voz-ico{width:1.2rem;height:1.2rem}

/* el boton redondo: el primario de la casa donde WhatsApp pone su verde */
.voz-principal{position:relative;display:grid;place-items:center;width:var(--alto);height:var(--alto);padding:0;border:0;border-radius:var(--radio-entero);background-image:var(--pildora-relleno);box-shadow:var(--pildora-canto);color:#fff;cursor:pointer;touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:transform var(--dur-corto) var(--ease-salida),filter var(--dur-corto) var(--ease-salida)}
@media (hover:hover){.voz-principal:hover{transform:translateY(calc(-1 * var(--via-roce)));filter:brightness(1.04)}}
.voz-principal:active{transform:scale(var(--esc-pulsa));transition-duration:var(--dur-toque)}
.voz-principal > span{grid-area:1 / 1;display:grid;place-items:center}
.voz .voz-principal .voz-ico{width:1.55rem;height:1.55rem;filter:drop-shadow(.05rem .05rem .03rem rgb(175 175 175 / .68))}
.voz .voz-principal .voz-principal__listo .voz-ico{width:1.45rem;height:1.45rem}
.voz-principal > .voz-principal__listo,.voz-principal > .boton__puntos{display:none}
.voz-grabador:is([data-estado="grabando"],[data-estado="pausado"]) .voz-principal__mic{display:none}
.voz-grabador:is([data-estado="grabando"],[data-estado="pausado"]) .voz-principal__listo{display:grid}
[data-estado="pidiendo"] .voz-principal__mic{display:none}
[data-estado="pidiendo"] .voz-principal > .boton__puntos{display:inline-flex}

/* el aviso tranquilo de los ultimos 30 s */
.voz-tope{display:inline-flex;align-items:center;gap:.5rem;margin:0;font-size:var(--text-micro);color:var(--color-tinta);text-align:center;text-wrap:pretty}
.voz-tope__marca{width:.5rem;height:.5rem;flex:none;border-radius:var(--radio-entero);background-color:var(--color-ambar)}

/* ═══════════════════════ 02 · LA BURBUJA (grabada) ═══════════════════════
 * Mensaje propio de WhatsApp: disco con micro, play, onda de picos reales,
 * duracion y velocidad. Nube con colita arriba a la derecha.
 * Alineacion optica: el disco va a --hueco del canto y el radio de la burbuja
 * es el del disco mas ese hueco (concentricos); la esquina de la colita, casi recta. */
.voz-escucha{display:grid;justify-items:center;gap:var(--spacing-caja);width:100%}
.voz-burbuja{--disco:3rem;--hueco:.5rem;position:relative;display:grid;grid-template-columns:var(--disco) 2.5rem minmax(0,1fr);grid-template-rows:2.5rem 1.375rem;column-gap:.375rem;align-items:center;width:min(100%,22rem);padding:var(--hueco) 1rem .375rem var(--hueco);border-radius:calc(var(--disco) / 2 + var(--hueco)) 0 calc(var(--disco) / 2 + var(--hueco)) calc(var(--disco) / 2 + var(--hueco));background-color:var(--color-nube);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .7),0 1px 2px rgb(28 28 30 / .1),0 10px 24px -16px rgb(247 88 153 / .45);isolation:isolate}
.voz-burbuja::after{content:"";position:absolute;z-index:-1;top:0;right:-.625rem;width:.8125rem;height:1rem;background-color:var(--color-nube);clip-path:polygon(0 0,82% 0,92% 3%,94% 10%,88% 20%,0 100%)}

.voz-disco{grid-column:1;grid-row:1 / span 2;display:grid;place-items:center;width:var(--disco);height:var(--disco);border-radius:var(--radio-entero);background-color:#fff;color:var(--color-chicle);box-shadow:0 2px 8px -4px rgb(28 28 30 / .22)}
.voz .voz-disco .voz-ico{width:1.4rem;height:1.4rem}

.voz-play{grid-column:2;grid-row:1;display:grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;border:0;border-radius:var(--radio-entero);background-color:transparent;color:var(--color-tinta);cursor:pointer;transition:background-color var(--dur-corto) var(--ease-salida),transform var(--dur-corto) var(--ease-salida)}
@media (hover:hover){.voz-play:hover{background-color:rgb(255 255 255 / .7)}}
.voz-play:active{transform:scale(var(--esc-pulsa));transition-duration:var(--dur-toque)}
.voz-play > span{grid-area:1 / 1;display:grid;place-items:center}
.voz .voz-play .voz-ico{width:1.2rem;height:1.2rem}
.voz .voz-play__play .voz-ico{margin-left:3px}
.voz .voz-play__pausa .voz-ico{width:1.05rem;height:1.05rem}
.voz-play > .voz-play__pausa{display:none}
.voz-burbuja[data-sonando="true"] .voz-play > .voz-play__pausa{display:grid}
.voz-burbuja[data-sonando="true"] .voz-play__play{display:none}

/* la onda: dos capas iguales; la de encima (chicle) se recorta hasta --p */
.voz-onda{--p:0;position:relative;grid-column:3;grid-row:1;align-self:stretch;margin-inline:.25rem;border-radius:var(--radio-chip);cursor:pointer;touch-action:none}
.voz-onda:focus-visible{outline:2px solid var(--color-chicle);outline-offset:2px}
.voz-onda__barras{position:absolute;inset:.375rem 0;display:grid;grid-template-columns:repeat(45,minmax(0,1fr));grid-template-rows:minmax(0,1fr);column-gap:2px;align-items:center;pointer-events:none}
.voz-onda__barras i{display:block;height:max(3px,calc(var(--h,.12) * 100%));border-radius:var(--radio-entero);background-color:color-mix(in oklab,var(--color-tinta) 30%,transparent)}
.voz-onda__barras--hecha{clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0)}
.voz-onda__barras--hecha i{background-color:var(--color-chicle)}
.voz-onda__bolita{position:absolute;top:50%;left:calc(var(--p) * 100%);width:.8125rem;height:.8125rem;border-radius:var(--radio-entero);background-color:var(--color-chicle);box-shadow:0 0 0 2px var(--color-nube),0 1px 3px rgb(28 28 30 / .25);translate:-50% -50%;pointer-events:none;transition:scale var(--dur-corto) var(--ease-salida)}
.voz-burbuja[data-arrastra="true"] .voz-onda__bolita{scale:1.3}

.voz-tiempo{grid-column:2 / span 2;grid-row:2;justify-self:start;padding-inline-start:.5rem;font-size:var(--text-nano);line-height:1;font-variant-numeric:tabular-nums;color:var(--color-tinta-suave)}
.voz-velocidad{position:relative;grid-column:3;grid-row:2;justify-self:end;display:inline-grid;place-items:center;min-width:2.25rem;height:1.25rem;padding:0 .5rem;border:0;border-radius:var(--radio-entero);background-color:#fff;color:var(--color-tinta);font-family:var(--font-sans);font-size:var(--text-nano);font-weight:700;font-variant-numeric:tabular-nums;line-height:1;cursor:pointer;box-shadow:0 1px 3px -1px rgb(28 28 30 / .18)}
.voz-velocidad::before{content:"";position:absolute;inset:-.75rem -.375rem}
.voz-velocidad:active{transform:scale(var(--esc-pulsa))}

.voz-nota{margin:0;font-size:var(--text-micro);color:var(--color-tinta-suave);text-align:center;text-wrap:pretty}
.voz-acciones{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--spacing-pieza)}
.voz .boton--suave .voz-ico{width:1.1em;height:1.1em}

/* ═══════════════════════ 03 · EL PAPEL (texto) ═══════════════════════ */
.voz-papel{position:relative;display:block;padding:calc(var(--spacing-bloque) + .3rem) var(--spacing-caja) var(--spacing-caja);border-radius:var(--radio-tarjeta);background-color:var(--color-nata);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 7%,transparent),var(--sombra-corta);rotate:-.6deg;cursor:text;transition:rotate var(--dur-normal) var(--ease-curva),box-shadow var(--dur-corto) var(--ease-salida)}
.voz-papel:focus-within{rotate:0deg;box-shadow:var(--foco-anillo)}
.voz-papel__pin{position:absolute;top:-.65rem;left:1.5rem;display:grid;place-items:center;width:2.15rem;height:2.15rem;border-radius:var(--radio-entero);background-color:#fff;box-shadow:var(--sombra-corta);color:var(--color-chicle);rotate:-16deg}
.voz .voz-papel__pin .voz-ico{width:1.05rem;height:1.05rem}
.voz-papel__campo{display:block;width:100%;min-height:8.5rem;max-height:20rem;padding:0;border:0;background:transparent;resize:none;overflow-y:auto;font-family:var(--font-sans);font-size:var(--text-cuerpo);line-height:1.55;color:var(--color-tinta)}
.voz-papel__campo::placeholder{color:color-mix(in oklab,var(--color-tinta) 42%,transparent)}
.voz-papel__campo:focus-visible{outline:none}
.voz-papel__contador{display:block;margin-top:.6rem;font-size:var(--text-nano);color:var(--color-tinta-suave);text-align:right}
/* PRE-009 (19-10-2026) · EL PAPEL A LA MEDIDA DEL HUECO CON EL TECLADO FUERA. Con 8,5 rem de mínimo
   y 20 de máximo no cabía en el cuerpo que deja el teclado y lo escrito quedaba debajo. Ahora mide
   como poco tres líneas y como mucho el cuerpo visible (`--c-cuerpo-alto`, lo publica _c.js) menos
   lo que el papel pone alrededor del campo: su relleno de arriba y de abajo y el contador con su
   margen (el contador sale al acercarse al límite; se le guarda el sitio para que al salir no
   empuje el papel; su renglón hereda el 1,5 de la página, que es el del cuerpo de texto). Medido a
   390 × 664 con teclado: 28,8 + 16 + 9,6 + 18 = 72,4 px. Lo que no cabe rueda dentro del papel
   (autoCrece lleva el cursor a la vista) */
/* PRE-010: con el teléfono girado y el teclado fuera quedan ~72 px de cuerpo y tres líneas no caben:
   el mínimo baja hasta dos si el hueco no da para tres (nunca menos: con una no se lee lo escrito).
   El hueco es lo que se ve del cuerpo (su contenido más sus rellenos) menos los 12 px de arriba con
   que muestraCampo deja el campo y un respiro abajo (medido girado a 664 × 390: con 1,25 rem el papel
   se pasaba 4 px): el relleno del papel puede quedar fuera de la vista */
.c--teclado .voz-papel__campo{min-height:clamp(calc(2 * 1.55 * var(--text-cuerpo)),calc(var(--c-cuerpo-alto,20rem) + var(--spacing-bloque) + var(--spacing-caja) - 1.75rem),calc(3 * 1.55 * var(--text-cuerpo)));max-height:calc(var(--c-cuerpo-alto,20rem) - var(--spacing-bloque) - .3rem - var(--spacing-caja) - .6rem - var(--text-nano) * var(--text-cuerpo--line-height))}

/* ═══════════════════════ 04 · MOVIL (la pieza por debajo de 26rem) ═══════════════════════
 * Grabando, como WhatsApp con la grabacion fijada: arriba el punto, el
 * cronometro y la onda a todo lo ancho; abajo la papelera a la izquierda, la
 * pausa en medio y «listo» a la derecha, al alcance del pulgar. La tarjeta es
 * concentrica con el boton de listo (radio = alto/2 + hueco). */
@container voz (width < 26rem){
  .voz-grabador:is([data-estado="grabando"],[data-estado="pausado"]) .voz-compositor{--hueco:.625rem;grid-template-columns:auto minmax(0,1fr) var(--alto);grid-template-rows:2.75rem var(--alto);row-gap:.25rem;padding:.375rem var(--hueco) var(--hueco);border-radius:calc(var(--alto) / 2 + var(--hueco));background-color:#fff;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 8%,transparent),0 10px 24px -14px rgb(28 28 30 / .22)}
  .voz-grabador:is([data-estado="grabando"],[data-estado="pausado"]) .voz-barra{display:contents}
  .voz-grabador:is([data-estado="grabando"],[data-estado="pausado"]) .voz-vivo{grid-row:1;grid-column:1;padding-inline:calc((var(--dentro) - .625rem) / 2) .5rem}
  .voz-grabador:is([data-estado="grabando"],[data-estado="pausado"]) .voz-directo{grid-row:1;grid-column:2 / -1;height:2rem;padding-inline-end:calc((var(--alto) - 3px) / 2 - .5rem)}
  .voz-grabador:is([data-estado="grabando"],[data-estado="pausado"]) .voz-papelera{grid-row:2;grid-column:1;justify-self:start}
  .voz-grabador:is([data-estado="grabando"],[data-estado="pausado"]) .voz-pausa{grid-row:2;grid-column:1 / -1;justify-self:center}
  .voz-grabador:is([data-estado="grabando"],[data-estado="pausado"]) .voz-principal{grid-row:2;grid-column:3}
  .voz-burbuja{width:calc(100% - 1.25rem)}   /* la colita cabe dentro de la pieza: la burbuja y su colita, centradas juntas */
  .voz-onda__barras{column-gap:1.5px}
}

/* ═══════════════════════ 05 · MOVIMIENTO REDUCIDO ═══════════════════════
 * La onda en vivo ya se queda quieta desde _voz.js (calma()); aqui, el punto. */
@media (prefers-reduced-motion:reduce){
  .voz-punto{animation:none}
}
html.quieto .voz-punto{animation:none}