/* ===========================================================================
   Avisos, confirmaciones y copia a mano
   Reemplazan a alert(), confirm() y prompt() del navegador, que en móvil se
   dibujan con la piel del sistema y rompen la continuidad de la marca.
   =========================================================================== */

.bandeja-avisos {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* Abajo en móvil, donde llega el pulgar, y sobre la zona segura del teléfono */
  bottom: calc(var(--e-4) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  width: min(420px, calc(100% - var(--e-6)));
  max-width: calc(100% - var(--e-6));
  pointer-events: none;
}

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-3);
  border: var(--b);
  background: var(--sup-2);
  color: var(--tinta-alta);
  box-shadow: var(--elev-3);
  font-size: var(--t-pie);
  line-height: var(--lh-pie);
  pointer-events: auto;
  cursor: pointer;
  transition: transform .12s ease;
  animation: aviso-entra .22s cubic-bezier(.2, .8, .3, 1);
}

.aviso p { margin: 0; }
.aviso .icono { flex: none; margin-top: 2px; }
.aviso-exito .icono { color: var(--don); }
.aviso-error { border-color: var(--aprendizaje); }
.aviso-error .icono { color: var(--aprendizaje); }
.aviso-info .icono { color: var(--oro-texto); }
.aviso:active { transform: scale(.985); }
.aviso.saliendo { animation: aviso-sale .18s ease-in forwards; }

@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes aviso-sale {
  to { opacity: 0; transform: translateY(6px); }
}

/* En pantallas anchas el aviso vive arriba a la derecha, fuera de la lectura */
@media (min-width: 900px) {
  .bandeja-avisos {
    left: auto;
    right: var(--e-6);
    bottom: auto;
    top: calc(var(--e-6) + env(safe-area-inset-top, 0px));
    transform: none;
  }
  @keyframes aviso-entra {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: none; }
  }
}

.confirmar-texto {
  color: var(--tinta-media);
  margin-bottom: var(--e-6);
}

.confirmar-acciones {
  display: flex;
  gap: var(--e-3);
  flex-wrap: wrap;
}
.confirmar-acciones .boton { flex: 1 1 auto; }

.modal-copiar .campo-copiar {
  width: 100%;
  margin-bottom: var(--e-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-pie);
}

@media (prefers-reduced-motion: reduce) {
  .aviso, .aviso.saliendo { animation: none; }
}