/*!
 * PIPSA · avisos y confirmaciones (estilos). FUENTE en /var/pipsa-infra/shared/ui/.
 *
 * COLORES: cada uno lee la variable del sitio que la carga. En el panel de
 * la tienda y en sys son las de la paleta de dos temas (--panel, --gris,
 * --ok-txt…), así que el tema oscuro funciona solo y el contraste ya está
 * medido por contraste.php. La tienda pública no tiene tema oscuro ni
 * colores de estado: para ella valen los respaldos del segundo argumento
 * de var(), que son los mismos valores del tema claro de los paneles.
 * Sin degradados.
 */
.pipsa-avisos, .pipsa-dialogo {
  --pa-superficie: var(--panel, var(--blanco, #fff));
  --pa-tinta: var(--gris, #333);
  --pa-tenue: var(--tenue, #6b6b73);
  --pa-linea: var(--linea, var(--borde, #d9d9d9));
  --pa-borde-ctrl: var(--borde-ctrl, var(--borde-fuerte, #8a8a93));
  --pa-campo: var(--campo, var(--blanco, #fff));
  --pa-pulsado: var(--panel3, var(--pulsado, var(--gris-claro, #f4f4f5)));
  --pa-vidrio: var(--vidrio, rgba(0, 0, 0, .07));
  --pa-ok-fondo: var(--ok-fondo2, #f0f9f3);  --pa-ok-txt: var(--ok-txt, #0f5c2a);  --pa-ok-borde: var(--ok-borde, #bfe3cc);
  --pa-mal-fondo: var(--mal-fondo2, #fef1f0); --pa-mal-txt: var(--mal-txt, #8e1b21); --pa-mal-borde: var(--mal-borde, #f3c4c1);
  --pa-al-fondo: var(--alerta-fondo2, #fdf7e7); --pa-al-txt: var(--alerta-txt, #7a5400); --pa-al-borde: var(--alerta-borde, #efdfae);
  --pa-rojo: var(--rojo, #ac2026);
  --pa-rojo2: var(--rojo2, var(--rojo-tema, #bf2431));
  --pa-sobre-rojo: var(--sobre-marca, var(--blanco, #fff));
  --pa-foco: var(--rojo-txt, var(--rojo, #ac2026));
  --pa-sombra: var(--sombra-flota, 0 8px 24px rgba(0, 0, 0, .10));
  --pa-radio: var(--r-caja, 12px);
  --pa-radio-ctl: var(--r-control, 8px);
  --pa-entra: cubic-bezier(.2, .8, .2, 1);
  --pa-sale: cubic-bezier(.4, 0, 1, 1);
}

/* Sin guion los mensajes del servidor se ven en la página; con guion se
   esconden al instante (sin parpadeo) y la librería los vuelve flotantes. */
.pipsa-ui [data-aviso] { display: none !important; }

/* ---------------------------- PILA ---------------------------- */
.pipsa-avisos {
  position: fixed; z-index: 2147483000;
  top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px;
  width: min(400px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; margin: 0; padding: 0;
}
.pipsa-avisos:empty { display: none; }

.pipsa-aviso {
  pointer-events: auto; box-sizing: border-box;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 4px 8px 16px; min-height: 60px;
  border: 1px solid var(--pa-linea); border-radius: var(--pa-radio);
  background: var(--pa-superficie); color: var(--pa-tinta);
  box-shadow: var(--pa-sombra);
  font-family: inherit; font-size: 14px; line-height: 1.45; font-weight: 500;
  text-align: left; overflow-wrap: anywhere;
  transform: none; opacity: 1;
  transition: opacity .2s var(--pa-entra), transform .2s var(--pa-entra);
}
.pipsa-aviso.pa-entrando { opacity: 0; transform: translateY(-8px); }
.pipsa-aviso.pa-saliendo { opacity: 0; transform: translateX(12px);
  transition-duration: .14s; transition-timing-function: var(--pa-sale); }

.pipsa-aviso.pa-exito  { background: var(--pa-ok-fondo);  color: var(--pa-ok-txt);  border-color: var(--pa-ok-borde); }
.pipsa-aviso.pa-error  { background: var(--pa-mal-fondo); color: var(--pa-mal-txt); border-color: var(--pa-mal-borde); }
.pipsa-aviso.pa-alerta { background: var(--pa-al-fondo);  color: var(--pa-al-txt);  border-color: var(--pa-al-borde); }

.pipsa-aviso .pa-icono { flex: 0 0 20px; display: flex; padding-top: 12px; }
.pipsa-aviso .pa-icono svg { width: 20px; height: 20px; }
.pipsa-aviso .pa-cuerpo { flex: 1 1 auto; min-width: 0; padding: 10px 0; }
.pipsa-aviso .pa-titulo { display: block; font-weight: 700; margin: 0 0 2px; }
.pipsa-aviso .pa-mensaje { margin: 0; white-space: pre-line; }
.pipsa-aviso .pa-accion {
  display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0 -8px;
  padding: 0 2px; border: 0; background: none; color: inherit; cursor: pointer;
  font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.pipsa-aviso .pa-cerrar {
  flex: 0 0 44px; width: 44px; height: 44px; margin: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--pa-radio-ctl); background: none;
  color: inherit; opacity: .7; cursor: pointer; padding: 0;
}
.pipsa-aviso .pa-cerrar:active { background: var(--pa-vidrio); opacity: 1; }
@media (hover: hover) { .pipsa-aviso .pa-cerrar:hover { background: var(--pa-vidrio); opacity: 1; } }
.pipsa-aviso .pa-cerrar:focus-visible,
.pipsa-aviso .pa-accion:focus-visible { outline: 3px solid currentColor; outline-offset: 1px; opacity: 1; }

/* Teléfono (y SUNMI de 360 px): abajo, a todo el ancho, encima de la barra
   inferior. `--pa-abajo` lo mide el guion cuando hay una barra fija abajo. */
@media (max-width: 640px) {
  .pipsa-avisos {
    top: auto; left: 12px; right: 12px; width: auto;
    bottom: var(--pa-abajo, calc(12px + env(safe-area-inset-bottom, 0px)));
  }
  .pipsa-aviso.pa-entrando { transform: translateY(8px); }
  .pipsa-aviso.pa-saliendo { transform: translateY(8px); }
}

/* --------------------------- DIÁLOGO --------------------------- */
.pipsa-dialogo {
  box-sizing: border-box; padding: 0; margin: auto; border: 0;
  width: min(440px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px);
  background: transparent; color: var(--pa-tinta); overflow: visible;
  font-family: inherit;
}
.pipsa-dialogo::backdrop { background: var(--velo-color, rgba(24, 20, 20, .5)); }
.pipsa-dialogo.pa-sin-modal {           /* navegador sin <dialog>: mismo aspecto */
  position: fixed; inset: 0; z-index: 2147483001; display: block; height: fit-content;
  box-shadow: 0 0 0 100vmax var(--velo-color, rgba(24, 20, 20, .5));
}
.pipsa-dialogo .pa-caja {
  box-sizing: border-box; margin: 0; padding: 24px;
  background: var(--pa-superficie); color: var(--pa-tinta);
  border: 1px solid var(--pa-linea); border-radius: var(--pa-radio);
  box-shadow: var(--pa-sombra);
  max-height: calc(100vh - 32px); overflow: auto;
}
.pipsa-dialogo[open] .pa-caja { animation: pa-dlg-entra .18s var(--pa-entra); }
.pipsa-dialogo[open]::backdrop { animation: pa-velo-entra .18s var(--pa-entra); }
.pipsa-dialogo.pa-saliendo .pa-caja { animation: pa-dlg-sale .13s var(--pa-sale) forwards; }
.pipsa-dialogo.pa-saliendo::backdrop { animation: pa-velo-sale .13s var(--pa-sale) forwards; }
@keyframes pa-dlg-entra { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pa-dlg-sale  { to { opacity: 0; transform: scale(.97); } }
@keyframes pa-velo-entra { from { opacity: 0; } }
@keyframes pa-velo-sale  { to { opacity: 0; } }

.pipsa-dialogo .pa-dlg-titulo { margin: 0 0 8px; font-family: inherit; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--pa-tinta); letter-spacing: 0; text-transform: none; }
.pipsa-dialogo .pa-dlg-mensaje { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--pa-tenue); white-space: pre-line; }
.pipsa-dialogo .pa-etiqueta { display: block; margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--pa-tinta); }
.pipsa-dialogo .pa-campo {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 12px;
  font: inherit; font-size: 16px; color: var(--pa-tinta); background: var(--pa-campo);
  border: 1px solid var(--pa-borde-ctrl); border-radius: var(--pa-radio-ctl);
}
.pipsa-dialogo .pa-campo:focus-visible { outline: 3px solid var(--pa-foco); outline-offset: 1px; }
.pipsa-dialogo .pa-campo[aria-invalid="true"] { border-color: var(--pa-mal-txt); }
.pipsa-dialogo .pa-error { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--pa-mal-txt); }

.pipsa-dialogo .pa-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.pipsa-dialogo .pa-btn {
  box-sizing: border-box; min-height: 48px; min-width: 112px; padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer;
  border-radius: var(--pa-radio-ctl); border: 1px solid transparent;
  transition: background-color .12s var(--pa-entra), transform .12s var(--pa-entra);
}
.pipsa-dialogo .pa-btn:active { transform: scale(.98); }
.pipsa-dialogo .pa-btn:focus-visible { outline: 3px solid var(--pa-foco); outline-offset: 2px; }
.pipsa-dialogo .pa-sec { background: var(--pa-superficie); color: var(--pa-tinta); border-color: var(--pa-borde-ctrl); }
.pipsa-dialogo .pa-pri, .pipsa-dialogo .pa-rojo { background: var(--pa-rojo); color: var(--pa-sobre-rojo); border-color: var(--pa-rojo); }
@media (hover: hover) {
  .pipsa-dialogo .pa-sec:hover { background: var(--pa-pulsado); }
  .pipsa-dialogo .pa-pri:hover, .pipsa-dialogo .pa-rojo:hover { background: var(--pa-rojo2); border-color: var(--pa-rojo2); }
}

/* Teléfono: botones a todo el ancho; el seguro abajo, en la zona del pulgar. */
@media (max-width: 480px) {
  .pipsa-dialogo .pa-caja { padding: 20px 16px 16px; }
  .pipsa-dialogo .pa-botones { flex-direction: column-reverse; }
  .pipsa-dialogo .pa-btn { width: 100%; min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .pipsa-aviso, .pipsa-aviso.pa-entrando, .pipsa-aviso.pa-saliendo { transition: none; transform: none; }
  .pipsa-dialogo .pa-caja, .pipsa-dialogo::backdrop,
  .pipsa-dialogo.pa-saliendo .pa-caja, .pipsa-dialogo.pa-saliendo::backdrop { animation: none; }
  .pipsa-dialogo .pa-btn { transition: none; }
}