/* ============================================================
   DANGOFE OS · AUDIO AL RECIBIR UN EQUIPO (prefijo pra-) · portal del técnico · 2026-10-16 · chat de Diseño
   Karla: «en vez de una descripción… un audio obligatorio de por qué lo desmontó y trajo, y fotos de lo que él trajo
   del inversor si así existe alguna cosa aparte del inversor»; «si no trajo nada no pone nada».
   Lo pinta portal-recepcion-audio.js (DangofeOS.recepcionAudio). Sin sombras (solo anillos planos); claro y Noche por [data-theme='dark'].
   Tres versiones (.pra[data-v]):
     A · Botón grande      · un micrófono redondo grande: toca para grabar, toca para parar
     B · Mantén presionado · como una nota de voz de WhatsApp: mantén presionado, suelta para terminar
     C · Paso a paso       · tres pasos a la vista: 1 Graba · 2 Escúchalo · 3 Listo
   ============================================================ */
.pra {
  --pra-az: 37, 99, 235; --pra-rojo: 220, 38, 38; --pra-ok: 21, 128, 61;
  --pra-tinta: var(--text-primary, #0b1540); --pra-tenue: var(--text-secondary, #4a5680); --pra-borde: var(--glass-border, rgba(3, 38, 155, .12));
  --pra-vidrio: var(--glass-bg-strong, rgba(255, 255, 255, .72)); --pra-campo: var(--glass-bg-input, rgba(255, 255, 255, .85)); --pra-linea: rgba(10, 22, 51, .09); --pra-azul-txt: #0b3dd6; --pra-nivel: .3;
  display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 18px; border: 1px solid var(--pra-borde); background: var(--pra-vidrio);
  color: var(--pra-tinta); font-family: var(--font-family-ui, 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
}
[data-theme='dark'] .pra, body[data-tono='medianoche'] .pra { --pra-linea: rgba(255, 255, 255, .1); --pra-azul-txt: #8db0ff; }
.pra *, .pra *::before, .pra *::after { box-sizing: border-box; }
.pra button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pra button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--pra-az), .35); }
.pra [hidden] { display: none !important; }
.pra-cab { display: flex; flex-direction: column; gap: 3px; }
.pra-ojal { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pra-azul-txt); }
.pra-tit { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.pra-sub { margin: 0; font-size: .84rem; color: var(--pra-tenue); line-height: 1.4; }

/* ---------- la grabadora (común) ---------- */
.pra-rec { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px; border-radius: 16px; background: var(--pra-campo); border: 1px solid var(--pra-linea); }
.pra-tiempo { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1; }
.pra[data-estado='grabando'] .pra-tiempo { color: rgb(var(--pra-rojo)); }
.pra-pista { font-size: .8rem; color: var(--pra-tenue); text-align: center; line-height: 1.35; }
.pra-pista span { display: none; }
.pra[data-estado='listo'] .pra-pista [data-e='listo'], .pra[data-estado='grabando'] .pra-pista [data-e='grabando'], .pra[data-estado='hecho'] .pra-pista [data-e='hecho'] { display: inline; }
.pra-barras { display: flex; align-items: center; justify-content: center; gap: 3px; height: 30px; }
.pra-barras i { display: block; width: 4px; height: 100%; border-radius: 2px; background: rgba(var(--pra-az), .35); transform: scaleY(.16); transform-origin: center; transition: transform .15s ease, background .2s ease; }
.pra[data-estado='grabando'] .pra-barras i { background: rgb(var(--pra-rojo)); animation: pra-onda .8s ease-in-out infinite alternate; }
.pra[data-estado='hecho'] .pra-barras i { transform: scaleY(.45); background: rgba(var(--pra-az), .55); }
.pra[data-estado='hecho'] .pra-barras i:nth-child(odd) { transform: scaleY(.7); }
.pra[data-estado='hecho'] .pra-barras i:nth-child(3n) { transform: scaleY(.3); }
@keyframes pra-onda { from { transform: scaleY(calc(.12 + var(--pra-nivel) * .35)); } to { transform: scaleY(calc(.35 + var(--pra-nivel) * .65)); } }
@keyframes pra-late { 0% { box-shadow: 0 0 0 0 rgba(var(--pra-rojo), .45); } 100% { box-shadow: 0 0 0 18px rgba(var(--pra-rojo), 0); } }

/* ---------- A · Botón grande ---------- */
.pra-mic { position: relative; width: 80px; height: 80px; border-radius: 50%; border: 0; color: #fff; background: linear-gradient(135deg, #0b3dd6, #3b82f6); display: grid; place-items: center; padding: 0; transition: transform .15s ease, background .2s ease, width .2s ease, height .2s ease; }
.pra-mic svg { width: 34px; height: 34px; }
.pra-mic__b { display: none; }
.pra-mic:active { transform: scale(.96); }
.pra[data-estado='grabando'] .pra-mic { background: rgb(var(--pra-rojo)); animation: pra-late 1.4s ease-out infinite; }
.pra[data-estado='grabando'] .pra-mic__a { display: none; }
.pra[data-estado='grabando'] .pra-mic__b { display: grid; }
.pra[data-estado='hecho'] .pra-rec--A .pra-mic { width: 56px; height: 56px; background: var(--pra-vidrio); color: var(--pra-azul-txt); border: 1px solid var(--pra-borde); }
.pra[data-estado='hecho'] .pra-rec--A .pra-mic svg { width: 24px; height: 24px; }

/* ---------- B · Mantén presionado ---------- */
.pra-hold { width: 100%; min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 16px; border: 0; color: #fff; background: linear-gradient(135deg, #0b3dd6, #3b82f6); text-align: left; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; transition: background .2s ease, transform .15s ease; }
.pra-hold svg { width: 26px; height: 26px; flex: none; }
.pra-hold__t { font-weight: 800; font-size: .95rem; display: block; line-height: 1.2; }
.pra-hold__s { display: none; font-size: .78rem; opacity: .9; }
.pra-hold.is-abajo, .pra[data-estado='grabando'] .pra-hold { background: rgb(var(--pra-rojo)); animation: pra-late 1.4s ease-out infinite; transform: scale(.99); }
.pra[data-estado='grabando'] .pra-hold__s { display: block; }
.pra[data-estado='hecho'] .pra-rec--B .pra-hold { min-height: 48px; background: var(--pra-vidrio); color: var(--pra-azul-txt); border: 1px solid var(--pra-borde); }
.pra[data-estado='hecho'] .pra-rec--B .pra-hold svg { width: 20px; height: 20px; }
.pra[data-estado='hecho'] .pra-rec--B .pra-hold__t { font-size: .88rem; }

/* ---------- C · Paso a paso ---------- */
.pra-rec--C { align-items: stretch; padding: 10px; }
.pra-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pra-paso { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; opacity: .55; transition: opacity .2s ease, background .2s ease; }
.pra-paso.is-on { opacity: 1; background: rgba(var(--pra-az), .08); }
.pra-paso.is-hecho { opacity: .9; }
.pra-paso > i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; background: var(--pra-linea); color: var(--pra-tenue); }
.pra-paso.is-on > i { background: rgb(var(--pra-az)); color: #fff; }
.pra-paso.is-hecho > i { background: rgba(var(--pra-ok), .16); color: rgb(var(--pra-ok)); }
.pra-paso b { display: block; font-size: .92rem; line-height: 1.2; }
.pra-paso span { font-size: .78rem; color: var(--pra-tenue); line-height: 1.3; }
.pra-ok { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: rgb(var(--pra-ok)); background: rgba(var(--pra-ok), .14); opacity: 0; transition: opacity .2s ease; }
.pra-paso.is-hecho .pra-ok { opacity: 1; }
.pra-ok svg { width: 16px; height: 16px; }
.pra-vivo { display: none; flex-direction: column; align-items: center; gap: 6px; padding-top: 8px; }
.pra[data-estado='grabando'] .pra-vivo { display: flex; }

/* ---------- botones ---------- */
.pra-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--pra-linea); background: var(--pra-campo); color: var(--pra-tinta); font-weight: 800; font-size: .84rem; white-space: nowrap; }
.pra-b svg { width: 15px; height: 15px; }
.pra-b--pri { background: rgb(var(--pra-az)); color: #fff; border-color: transparent; }
.pra-b--sut { background: transparent; border-color: transparent; color: var(--pra-tenue); padding: 7px 8px; }
.pra-b.is-grab { background: rgb(var(--pra-rojo)); color: #fff; border-color: transparent; animation: pra-late 1.4s ease-out infinite; }
.pra-b[disabled] { opacity: .45; cursor: default; }

/* ---------- escuchar lo grabado ---------- */
.pra-repro { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--pra-campo); border: 1px solid var(--pra-linea); }
.pra-play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(var(--pra-az)); color: #fff; display: grid; place-items: center; padding: 0; }
.pra-play svg { width: 20px; height: 20px; }
.pra-play__b { display: none; }
.pra.is-sonando .pra-play__a { display: none; }
.pra.is-sonando .pra-play__b { display: grid; }
.pra-repro__m { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pra-prog { height: 6px; border-radius: 999px; background: var(--pra-linea); overflow: hidden; }
.pra-prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: rgb(var(--pra-az)); transition: width .2s linear; }
.pra-repro__t { display: flex; justify-content: space-between; font-size: .76rem; color: var(--pra-tenue); font-variant-numeric: tabular-nums; }
.pra-repro .pra-b--sut { grid-column: 1 / -1; justify-self: start; margin: -2px 0 0 -6px; }

/* ---------- avisos (micrófono bloqueado, muy corto, tope) ---------- */
.pra-aviso { display: flex; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(217, 119, 6, .12); border: 1px solid rgba(217, 119, 6, .35); color: var(--pra-tinta); font-size: .86rem; line-height: 1.4; }
.pra-aviso > svg { width: 20px; height: 20px; flex: none; color: #b45309; margin-top: 1px; }
.pra-aviso .pra-como { margin: 6px 0 8px; padding-left: 18px; }
.pra-aviso li { margin: 3px 0; }
.pra-aviso .pra-b { margin-top: 4px; }
[data-theme='dark'] .pra-aviso, body[data-tono='medianoche'] .pra-aviso { background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .35); }
[data-theme='dark'] .pra-aviso > svg, body[data-tono='medianoche'] .pra-aviso > svg { color: #fbbf24; }

/* ---------- fotos de lo que trajo (opcional) ---------- */
.pra-fotos { display: flex; flex-direction: column; gap: 8px; }
.pra-fotos__z { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; border: 1px dashed rgba(var(--pra-az), .4); background: rgba(var(--pra-az), .05); cursor: pointer; }
.pra-fotos__z input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pra-fotos__z:focus-within { outline: 2px solid rgba(var(--pra-az), .6); outline-offset: 2px; }
.pra-fotos__b { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--pra-azul-txt); font-size: .9rem; }
.pra-fotos__b svg { width: 18px; height: 18px; flex: none; }
.pra-fotos__h { font-size: .78rem; color: var(--pra-tenue); line-height: 1.35; }
.pra-fotos.is-llena .pra-fotos__z { opacity: .55; pointer-events: none; }
.pra-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.pra-thumbs:empty { display: none; }
.pra-thumb { position: relative; width: 68px; height: 68px; border-radius: 12px; overflow: hidden; border: 1px solid var(--pra-borde); background: var(--pra-campo); }
.pra-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pra-thumb button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(10, 22, 51, .75); color: #fff; display: grid; place-items: center; padding: 0; }
.pra-thumb button svg { width: 12px; height: 12px; }
.pra-fotos__n { font-size: .78rem; color: var(--pra-tenue); }
.pra-fotos__n:empty { display: none; }

/* ---------- texto opcional ---------- */
.pra-texto { display: flex; flex-direction: column; gap: 5px; }
.pra-texto span { font-size: .8rem; font-weight: 600; color: var(--pra-tenue); }
.pra-texto input { min-height: 40px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--pra-borde); background: var(--pra-campo); color: inherit; font: inherit; font-size: .9rem; }
.pra-texto input:focus { outline: 0; border-color: rgba(var(--pra-az), .6); }
.pra-texto input::placeholder { color: var(--pra-tenue); opacity: .7; }

@media (prefers-reduced-motion: reduce) { .pra *, .pra *::before, .pra *::after { animation: none !important; transition: none !important; } }