/* ============================================================================
 * Autor: Marcelo Alejandro Zúñiga Reátegui
 * Proyecto: LILBRU
 * Módulo: avisos flotantes graduados por gravedad (ver avisos.js)
 * Fecha/Hora: 2026-10-07
 * Versión: 1.0.0
 * Aviso Legal: Código de propiedad exclusiva. Prohibida su reproducción o distribución sin autorización.
 * ============================================================================ */
/* Todo sale de las variables del tema (styles.css), así se ve bien en los
   temas claros y en los oscuros sin una regla aparte. */
.avisos {
  position: fixed; right: 16px; bottom: 16px; z-index: 1000;
  display: flex; flex-direction: column; gap: 10px; width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.aviso-flotante {
  pointer-events: auto; position: relative;
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--tarjeta); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 10px;
  padding: 14px 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  font-size: 15px; line-height: 1.4;
  animation: aviso-entra .18s ease-out;
}
.aviso-flotante:focus { outline: 2px solid var(--marca); outline-offset: 2px; }
.aviso-flotante-saliendo { animation: aviso-sale .25s ease-in forwards; }
/* La gravedad se distingue por un fondo levemente teñido con el color del
   estado y un punto chico delante del texto: sin barras de color al costado. */
.aviso-flotante-leve { background: var(--ok-fondo); border-color: var(--ok-fondo); }
.aviso-flotante-hay_que_leer { background: var(--alerta-fondo); border-color: var(--alerta-fondo); }
.aviso-flotante-grave { flex-direction: column; z-index: 1002; }
.aviso-flotante-texto::before {
  content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 8px 1px 0; vertical-align: middle;
}
.aviso-flotante-leve .aviso-flotante-texto::before { background: var(--ok); }
.aviso-flotante-hay_que_leer .aviso-flotante-texto::before { background: var(--alerta); }
.aviso-flotante-grave .aviso-flotante-texto::before { background: var(--rojo); }
.aviso-flotante-titulo + .aviso-flotante-texto::before { display: none; }
.aviso-flotante-titulo::before {
  content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 8px 1px 0; vertical-align: middle;
}
.aviso-flotante-leve .aviso-flotante-titulo::before { background: var(--ok); }
.aviso-flotante-hay_que_leer .aviso-flotante-titulo::before { background: var(--alerta); }
.aviso-flotante-grave .aviso-flotante-titulo::before { background: var(--rojo); }
.aviso-flotante-cuerpo { flex: 1; min-width: 0; }
.aviso-flotante-titulo { display: block; margin-bottom: 4px; font-size: 15px; }
.aviso-flotante-texto { margin: 0; overflow-wrap: anywhere; }
.aviso-flotante-detalle { margin: 6px 0 0; color: var(--tinta-suave); font-size: 13px; }
.aviso-flotante-cerrar {
  flex: 0 0 auto; min-width: 44px; min-height: 44px; margin: -8px -10px -8px 0;
  background: transparent; color: var(--tinta-suave); border: 0; border-radius: 8px;
  font-size: 24px; line-height: 1; cursor: pointer; box-shadow: none;
}
.aviso-flotante-cerrar:hover { background: var(--gris-fondo, rgba(0, 0, 0, .06)); color: var(--tinta); filter: none; box-shadow: none; }
.aviso-flotante-cerrar:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.aviso-flotante-acciones { display: flex; justify-content: flex-end; width: 100%; }
.aviso-flotante-aceptar { min-height: 44px; min-width: 120px; padding: 10px 18px; font-size: 15px; }
.aviso-flotante-aceptar:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.avisos-velo { position: fixed; inset: 0; background: var(--velo-modal, rgba(0, 0, 0, .45)); z-index: 1001; }
/* Lo grave se centra y queda encima del velo: no se puede ignorar ni perder.
   F-038 (7-oct-2026): el z-index 1002 del aviso vivía DENTRO del contenedor
   `.avisos` (z-index 1000), que es su propio contexto de apilamiento: contra la
   página valía 1000 y el velo (1001) lo tapaba; «Aceptar» no recibía el clic
   (solo Escape cerraba). Mientras hay un aviso grave, el contenedor entero sube
   por encima del velo. */
.avisos:has(.aviso-flotante-grave) { z-index: 1002; }
.avisos:has(.aviso-flotante-grave) .aviso-flotante-grave {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 32px)); box-shadow: var(--sombra-modal, 0 18px 55px rgba(0, 0, 0, .35));
}
@keyframes aviso-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes aviso-sale { to { opacity: 0; transform: translateY(8px); } }
@media (max-width: 560px) {
  .avisos { right: 8px; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .aviso-flotante, .aviso-flotante-saliendo { animation: none; }
}