/* 
 * Nombre: msg.css
 * Ruta: /catalogo_mtr/xr_pub/xr_ast/css/
 * Versión: v1.0.0
 * Descripción: Estilos de sistema de mensajes (toasts/modales) en tema corporativo.
 * Dependencias: base.css (variables, tipografía), icons Lucide (SVG inline o <img>).
 * Llamado por: Toda la web (puntos de entrada que muestren mensajes).
 * Notas de seguridad: Solo CSS externo; sin @import; sin fuentes remotas.
 */

:root{
  --xr-msg-bg: #111217;
  --xr-msg-surface: #1b1d26;
  --xr-msg-fg: #f6f7fb;
  --xr-ok: #22c55e;   /* verde */
  --xr-info: #38bdf8; /* cyan */
  --xr-warn: #f59e0b; /* ámbar */
  --xr-error:#ef4444; /* rojo */
  --xr-shadow: 0 10px 30px rgba(0,0,0,.35);
}

#xr-msg-root{
  position: fixed;
  z-index: 10000;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 10px;
  max-width: min(420px, 90vw);
  pointer-events: none;
}

.xr-toast{
  pointer-events: auto;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: start;
  background: var(--xr-msg-surface);
  color: var(--xr-msg-fg);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 4px solid var(--xr-info);
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: var(--xr-shadow);
  animation: xr-toast-in .18s ease-out;
}

.xr-toast.ok   { border-left-color: var(--xr-ok); }
.xr-toast.info { border-left-color: var(--xr-info); }
.xr-toast.warn { border-left-color: var(--xr-warn); }
.xr-toast.error{ border-left-color: var(--xr-error); }

.xr-toast .xr-icn{width:20px;height:20px;opacity:.9;margin-top:1px}
.xr-toast .xr-ttl{font-weight:600;margin:0 0 4px 0}
.xr-toast .xr-txt{margin:0;opacity:.95;line-height:1.35}
.xr-toast .xr-act{display:flex;gap:8px;margin-left:12px}
.xr-btn{
  background: transparent;border:1px solid rgba(255,255,255,.18);color:var(--xr-msg-fg);
  border-radius:10px;padding:6px 10px;font:inherit;cursor:pointer
}
.xr-btn:hover{background:rgba(255,255,255,.06)}
.xr-close{opacity:.6;cursor:pointer;border:none;background:transparent;font-size:18px;line-height:1}
.xr-close:hover{opacity:1}

@keyframes xr-toast-in{from{transform:translateY(6px);opacity:0}to{transform:translateY(0);opacity:1}}
@media (max-width:480px){#xr-msg-root{right:10px;left:10px;max-width:unset}}