/* =========================================================
   AVISOS EN PANTALLA
   RUTH.il

   Sustituyen a los alert(), que bloquean la página, no se pueden
   copiar y desaparecen al aceptarlos —justo cuando la persona iba
   a corregir lo que decían—.
   ========================================================= */

.zona-avisos {
  position: fixed;
  top: 84px; right: 18px;
  z-index: 3000;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(420px, calc(100vw - 36px));
  pointer-events: none;
}

.aviso-flotante {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 15px;
  border-radius: 12px;
  border: 1px solid;
  background: var(--bg-2, #fff);
  box-shadow: 0 6px 28px rgba(0, 0, 0, .18);
  animation: aviso-entra .22s ease-out;
}

@keyframes aviso-entra {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aviso-flotante { animation: none; }
}

.aviso-cuerpo { flex: 1; min-width: 0; }
.aviso-cuerpo strong {
  display: block; font-size: .9rem; margin-bottom: 3px;
  color: var(--text-1, #14171A);
}
.aviso-cuerpo p {
  margin: 0; font-size: .82rem; line-height: 1.5;
  color: var(--text-2, rgba(20,23,26,.8));
}

.aviso-accion {
  display: inline-block; margin-top: 10px;
  padding: 7px 14px; border-radius: 8px;
  font-size: .8rem; font-weight: 700; text-decoration: none;
  background: var(--accent, #C42A8E); color: #fff;
}

.aviso-cerrar {
  background: transparent; border: 0; cursor: pointer;
  font-size: 1.25rem; line-height: 1; padding: 0 2px;
  color: var(--text-3, rgba(20,23,26,.55));
  flex-shrink: 0;
}
.aviso-cerrar:hover { color: var(--text-1, #14171A); }

/* El color de fondo NO es la única señal: cada tipo lleva su símbolo
   delante, para quien no distingue los colores. */
.aviso-flotante::before {
  flex-shrink: 0; font-size: 1.05rem; line-height: 1.35;
}
.aviso-flotante.error  { border-color: var(--danger, #C22B2B); background: #FFF5F5; }
.aviso-flotante.error::before  { content: "\26A0"; color: var(--danger, #C22B2B); }
.aviso-flotante.exito  { border-color: var(--ok, #1E7B45); background: #F3FBF6; }
.aviso-flotante.exito::before  { content: "\2713"; color: var(--ok, #1E7B45); }
.aviso-flotante.aviso  { border-color: #8A6B1F; background: #FFFBEB; }
.aviso-flotante.aviso::before  { content: "\2139"; color: #8A6B1F; }

/* En oscuro se usa el fondo del tema, no el claro de arriba. */
:root[data-theme="dark"] .aviso-flotante.error { background: #241618; }
:root[data-theme="dark"] .aviso-flotante.exito { background: #14231A; }
:root[data-theme="dark"] .aviso-flotante.aviso { background: #241F12; }
:root[data-theme="dark"] .aviso-cuerpo strong  { color: #fff; }
:root[data-theme="dark"] .aviso-cuerpo p       { color: rgba(255,255,255,.78); }

@media (max-width: 560px) {
  .zona-avisos {
    top: auto; bottom: 14px; left: 14px; right: 14px;
    max-width: none;
  }
}