/* ═══ Kit de respuesta a acciones · #464 frente A ══════════════════════════════
   Se carga DESPUÉS de resumen.css. Aquí solo vive el ESTILO de las capas que
   crea src/feedback.js (ghosts fijos, anuncios, aviso de deshacer) y el panel de
   ajustes de sonido. Las animaciones van en WAAPI (feedback.js): solo transform,
   opacity y clip-path. Nada de aquí recibe eventos salvo el panel y el aviso. */

/* Anuncios para lector de pantalla: fuera de la vista, dentro del árbol. */
.fb-sr {
  position: fixed; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; pointer-events: none;
}

/* Capa fija sobre la fila (o el botón) que se anima. Nunca bloquea el clic. */
.fb-g {
  position: fixed; z-index: 320; pointer-events: none; margin: 0;
  contain: layout paint; /* lo que se sale (barrido, bloom) queda recortado dentro de su tarjeta */
}
.fb-g.fb-copia { contain: none; background: var(--surface, #fff); z-index: 320; }
.fb-lavanda { background: color-mix(in srgb, var(--cdp-purple) 20%, transparent); }
.fb-coral { background: color-mix(in srgb, var(--u-critica) 20%, transparent); }
.fb-centro { display: grid; place-items: center; }

/* Destello: banda de luz morada que cruza la fila. */
.fb-sweep {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(100deg, transparent 18%,
    color-mix(in srgb, var(--cdp-purple) 34%, transparent) 50%, transparent 82%);
}
.fb-sweep.fb-suave {
  background: linear-gradient(100deg, transparent 20%,
    color-mix(in srgb, var(--cdp-purple) 22%, transparent) 50%, transparent 80%);
}

/* Sello del check (círculo morado + trazo blanco + aro). */
.fb-badge { position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; }
.fb-fill { position: absolute; inset: 0; border-radius: 50%; background: var(--cdp-purple); }
.fb-s { position: absolute; left: 6px; top: 6px; }
.fb-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--cdp-purple); opacity: 0;
}

/* Luz de «día despejado» contenida en la cabecera. */
.fb-bloom {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at 30% 50%,
    color-mix(in srgb, var(--cdp-purple) 34%, transparent), transparent 68%);
}

/* Sello de «Aprobada». Negro con luz morada contenida; sin confeti. */
.fb-seal {
  grid-area: 1 / 1; max-width: 92%; padding: 10px 18px; border-radius: 12px;
  background: var(--cdp-black); color: var(--cdp-white);
  font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0;
  box-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.5);
}
.fb-seal-ring {
  grid-area: 1 / 1; width: 76%; height: 40px; border-radius: 12px; opacity: 0;
  border: 2px solid var(--cdp-purple);
}

.fb-anillo { border: 2px solid var(--cdp-purple); opacity: 0; contain: none; }
.fb-linea { background: var(--cdp-purple); transform-origin: left center; opacity: 0; }

/* Aviso de «Deshacer» (solo si BORRAR_CON_DESHACER = true). Mismo lenguaje que
   `.toast`, en su propia capa para que no dependa del estado de React. */
.fb-aviso {
  position: fixed; top: 12px; left: 16px; right: 16px; margin-inline: auto; width: fit-content;
  z-index: 305; display: flex; align-items: center; gap: 12px; max-width: min(calc(100vw - 32px), 460px);
  padding: 8px 8px 8px 16px; border-radius: 22px; overflow: hidden;
  font-size: 13px; font-weight: 600; color: var(--cdp-white);
  background: color-mix(in srgb, var(--cdp-black) 93%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 10px 34px -8px rgba(0, 0, 0, 0.55);
}
.fb-aviso-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-aviso-b {
  flex: none; min-height: 44px; padding: 0 16px; border: none; border-radius: 999px;
  background: var(--cdp-white); color: var(--cdp-black);
  font: inherit; font-weight: 800; cursor: pointer;
}
.fb-aviso-b:focus-visible { outline: 2px solid var(--cdp-purple); outline-offset: 2px; }
.fb-aviso-barra {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--cdp-purple); transform-origin: left center;
}

/* ── Ajustes de sonido (se abre desde el interruptor de la topbar) ─────────── */
.snd-wrap { position: relative; }
.snd-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 120;
  width: min(280px, calc(100vw - 32px)); padding: 14px 16px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.28);
  color: var(--text-1); animation: rise 220ms var(--ease-out) both;
}
.snd-t { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: -0.01em; }
.snd-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.snd-fila input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--cdp-purple); flex: none; }
.snd-vol { display: grid; gap: 4px; margin: 4px 0 8px; font-size: 12px; color: var(--text-3); }
.snd-vol input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--cdp-purple); }
.snd-vol output { font-variant-numeric: tabular-nums; }
.snd-sep { height: 1px; margin: 6px 0; background: var(--line); border: 0; }
.snd-probar {
  width: 100%; min-height: 44px; margin-top: 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-1);
  font: inherit; font-size: 13px; font-weight: 700;
}
.snd-probar:hover { background: var(--purple-tint); }
.snd-probar:focus-visible, .snd-fila input:focus-visible { outline: 2px solid var(--cdp-purple); outline-offset: 2px; }

@media (max-width: 480px) {
  .snd-panel { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; }
}

/* Con movimiento reducido nada se desplaza: lo que queda son fundidos
   (feedback.js ya lo decide por receta; esto cubre el panel). */
@media (prefers-reduced-motion: reduce) {
  .snd-panel { animation: none; }
}

/* Botón de acción dentro de un aviso (p. ej. «Reintentar» tras un error de red). */
.toast .toast-accion {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28); background: transparent;
  color: var(--cdp-white); font: inherit; font-weight: 800; opacity: 1; cursor: pointer;
}
.toast .toast-accion:hover { background: rgba(255, 255, 255, 0.12); opacity: 1; }