/* Activity treatment only; geometry and colors come from the official engine and Brasa tokens. */
.orb-host { display: inline-flex; flex: 0 0 auto; width: 64px; height: 64px; align-items: center; justify-content: center; }
.orb-host canvas { display: block; max-width: 100%; }
.tab-indicador > .orb-host { width: 20px; height: 20px; }
.orb-fallo { color: var(--hueso-3); font: .68rem/1.2 var(--datos); }
.estado-espera { display: inline-flex; align-items: center; gap: 12px; min-height: 64px; margin: 0; color: var(--hueso-2); }
.tab-indicador { display: inline-flex; width: 20px; height: 20px; margin-left: 6px; vertical-align: middle; align-items: center; justify-content: center; }
.tab-indicador canvas { display: block; width: 20px; height: 20px; }
.tab-indicador[data-disponible="true"]::before { content: ""; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--catodo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--catodo) 18%, transparent); }
/* La llegada de una respuesta (`respuesta-nueva`) ya NO vive aqui: es el clip-path con desenfoque
   del spec brasa plena (Fase 3) y la declara estilo.css, con el resto de las reglas de .respuesta.
   Aqui se quedo una cortina de opacidad que competia con ella por la misma animacion. */
.respuesta-borde { position: relative; }
.respuesta-borde::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid transparent; border-radius: 3px; background: conic-gradient(from var(--borde-angulo), transparent 0 76%, var(--catodo) 90% 96%, transparent) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; }
.respuesta-borde.activa::after { opacity: .85; animation: borde-pregunta 900ms ease-out both; }
@property --borde-angulo { syntax: "<angle>"; inherits: false; initial-value: -90deg; }
@keyframes borde-pregunta { from { --borde-angulo: -90deg; opacity: .1; } 12% { opacity: .85; } to { --borde-angulo: 270deg; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .respuesta-borde::after { display: none; } }