/* ==========================================================
 * QWOOD — Global Toasts (WooCommerce / Storefront)
 * CSS UNIFICADO (Toast Stack + Confirm Modal)
 * v1.5.0 (2026-03-16)
 *
 * - Unifica el CSS externo + el CSS inline del confirm
 * - Todo scopeado (no pisa botones ni estilos fuera de #qw-toast-stack / .qw-confirm-*)
 * - FIX: aliases de variables para evitar vars inexistentes
 * - FIX: pre-hiding de notices nativos para eliminar flash/parpadeo
 * ========================================================== */

/* ==========================================================
   PRE-HIDING: Ocultar notices nativos WooCommerce/Storefront
   ANTES de que el JS los convierta en toasts.
   Evita el parpadeo / doble feedback.
   Una vez convertidos a toast, llevan .qw-toast y viven
   dentro de #qw-toast-stack, así que esta regla ya no aplica.
   ========================================================== */
.woocommerce-message:not(.qw-toast),
.woocommerce-error:not(.qw-toast),
.woocommerce-info:not(.qw-toast){
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}
/* Notices wrapper vacío: no ocupa espacio */
.woocommerce-notices-wrapper:empty{
  display: none !important;
}

/* ==========================================================
   FIX audit 2026-04-10 (BUG-CRIT-TOASTS-SWALLOW):
   Notices renderizados como contenido in-page (empty states,
   mensajes inline de "Debes iniciar sesión", banners informativos)
   dentro de .woocommerce-MyAccount-content NO deben consumirse
   como toasts — son parte del contenido de la página.
   El JS complementario en toasts.php también excluye este scope
   (función isInlineNotice). Scope ampliado a .qw-ip / .qwci
   para los inline echoes de installer/panel y customer/installation-form.
   ========================================================== */
.woocommerce-MyAccount-content .woocommerce-message:not(.qw-toast),
.woocommerce-MyAccount-content .woocommerce-error:not(.qw-toast),
.woocommerce-MyAccount-content .woocommerce-info:not(.qw-toast),
.qw-ip .woocommerce-info:not(.qw-toast),
.qwci .woocommerce-info:not(.qw-toast){
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  max-height: none !important;
  margin: revert !important;
  padding: revert !important;
  border: revert !important;
  pointer-events: auto !important;
}
/* Re-aplica margen/padding WC nativo a la re-visibilización, por si revert
   no recupera el boxing de la hoja de estilos de Storefront/WC. */
.woocommerce-MyAccount-content > .woocommerce-info:not(.qw-toast),
.woocommerce-MyAccount-content > .woocommerce-message:not(.qw-toast),
.woocommerce-MyAccount-content > .woocommerce-error:not(.qw-toast){
  padding: 1rem 1.2rem 1rem 3.2rem !important;
  margin: 0 0 1.25rem !important;
  border-radius: 14px !important;
}
/* Re-scopea el :empty hide al wrapper directo — un wrapper vacío puede
   existir arriba del contenido sin esconder el contenido real. */
.woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty{
  display: none !important;
}

:root{
  --qwood-surface: var(--qwood-color-card-bg, #ffffff);
  --qwood-surface-strong: var(--qwood-color-card-bg, #ffffff);
  --qwood-radius-md: 18px;
  --qwood-shadow-toast: var(--qwood-shadow-elevated, 0 28px 72px rgba(15,23,42,.18));
  --qwood-dur: var(--qwood-speed, 220ms);
  --qw-toast-font: var(--qwood-font-sans, "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}

/* ==========================================================
   TOAST STACK (scope total)
   ========================================================== */

/* Stack fijo */
#qw-toast-stack{
  position: fixed;
  left: 50%;
  bottom: 1.65rem;
  transform: translateX(-50%);
  z-index: 2147482000;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  width: auto;
  max-width: calc(100vw - 24px);
  pointer-events: none;
}

/* HARDENING (Storefront/3rd-party) */
#qw-toast-stack .qw-toast{
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  outline: 0 !important;

  /* Base: superficie sólida premium */
  background: var(--qwood-surface-strong);
  opacity: 0; /* visible via .is-visible */
  filter: none !important;

  pointer-events: auto;
  position: relative;

  width: auto;
  max-width: min(600px, calc(100vw - 24px));
  min-width: min(280px, calc(100vw - 24px));

  display: flex;
  align-items: center;

  padding: 14px 18px;
  padding-right: 3.4rem !important; /* espacio para la X */

  border-radius: var(--qwood-radius-pill);

  font-family: var(--qw-toast-font);
  font-size: 0.90rem;
  line-height: 1.25;
  font-weight: 750;
  color: #ffffff;

  box-shadow: var(--qwood-shadow-toast);
  border: 1px solid rgba(255,255,255,0.16);

  transform: translateY(18px);
  transition:
    opacity var(--qwood-dur) var(--qwood-ease),
    transform var(--qwood-dur) var(--qwood-ease);
  /* will-change movido a .is-visible — no reservar capa en estado inerte. */

  margin: 0 !important;
  float: none !important;
  clear: both !important;
}

#qw-toast-stack .qw-toast.is-visible{
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(0);
  will-change: transform, opacity;
}
#qw-toast-stack .qw-toast.is-leaving{
  opacity: 0;
  transform: translateY(-6px);
}

/* Neutraliza ::before/::after del tema */
#qw-toast-stack .qw-toast::before,
#qw-toast-stack .qw-toast::after{
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 1 !important;
}

/* Fuerza fondos opacos por tipo */
#qw-toast-stack .qw-toast.woocommerce-message{
  background: #1bcf17 !important;
  opacity: 1 !important;
}
#qw-toast-stack .qw-toast.woocommerce-info{
  background: #2563eb !important;
  opacity: 1 !important;
}
#qw-toast-stack .qw-toast.woocommerce-error{
  background: #dc2626 !important;
  opacity: 1 !important;
}

/* Layout interno */
#qw-toast-stack .qw-toast__inner{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

#qw-toast-stack .qw-toast__icon{
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.18);
}
#qw-toast-stack .qw-toast__icon svg{
  width: 15px;
  height: 15px;
  display: block;
  color: #fff;
}

#qw-toast-stack .qw-toast__content{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
#qw-toast-stack .qw-toast__content p{ margin: 0; }
#qw-toast-stack .qw-toast__content a:not(.button){
  color: rgba(255,255,255,0.98);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 850;
}

/* errores: <ul class="woocommerce-error"><li>..</li></ul> */
#qw-toast-stack .qw-toast.woocommerce-error{
  list-style: none;
  padding-left: 18px;
}
#qw-toast-stack .qw-toast.woocommerce-error li{
  margin: 0;
  padding: 0;
  list-style: none;
}
#qw-toast-stack .qw-toast.woocommerce-error li + li{
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.28);
}

/* Acciones */
#qw-toast-stack .qw-toast__actions{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: .35rem !important; /* separación con la X */
  white-space: nowrap;
}
#qw-toast-stack .qw-toast__action{
  padding: .48rem .85rem !important;
  font-size: .92rem !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  white-space: nowrap;
}

/* Botón Woo dentro del toast */
#qw-toast-stack .qw-toast .button,
#qw-toast-stack .qw-toast a.button{
  float: none !important;
  margin: 0 !important;

  border-radius: var(--qwood-radius-pill);
  padding: 10px 14px;

  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);

  font-weight: 850;
  letter-spacing: 0.02em;
  text-decoration: none;

  box-shadow: 0 12px 26px rgba(2,6,23,0.10);
  transition: transform 0.18s var(--qwood-ease), background 0.18s var(--qwood-ease), box-shadow 0.18s var(--qwood-ease);
}
#qw-toast-stack .qw-toast .button:hover,
#qw-toast-stack .qw-toast a.button:hover{
  background: rgba(255,255,255,0.28);
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(2,6,23,0.14);
}

/* Close */
#qw-toast-stack .qw-toast__close{
  position: absolute;
  top: 50%;
  right: .55rem !important;
  transform: translateY(-50%) !important;

  appearance: none;
  border: 0;
  background: rgba(255,255,255,0.18);
  color: #fff;

  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  cursor: pointer;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  line-height: 1;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 10px 24px rgba(2,6,23,0.12);

  transition: transform 0.18s var(--qwood-ease), background 0.18s var(--qwood-ease);
}
#qw-toast-stack .qw-toast__close:hover{
  background: rgba(255,255,255,0.28);
  transform: translateY(-50%) translateY(-1px) !important;
}
#qw-toast-stack .qw-toast__close svg,
#qw-toast-stack .qw-toast__close i{
  width: 16px !important;
  height: 16px !important;
}
#qw-toast-stack .qw-toast__close-glyph{
  display: block;
  color: currentColor;
  font-size: 21px;
  line-height: 1;
  font-weight: 700;
  transform: translateY(-1px);
  pointer-events: none;
}

/* ==========================================================
   RESPONSIVE: breakpoints progresivos
   768px → tablet  |  520px → small  |  420px → xs  |  360px → xxs
   ========================================================== */

@media (max-width: 768px){
  #qw-toast-stack{
    bottom: 1.55rem;
    left: 12px;
    right: 12px;
    transform: none;
    align-items: stretch;
    max-width: none;
  }
  #qw-toast-stack .qw-toast{
    min-width: 0;
    width: auto;
    max-width: 100%;
    padding: 11px 14px;
    padding-right: 2.8rem !important;
    border-radius: 22px;
    font-size: .86rem;
  }
  #qw-toast-stack .qw-toast__inner{
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }
  #qw-toast-stack .qw-toast__content{
    padding-top: 2px;
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow: visible;
  }
  #qw-toast-stack .qw-toast__actions{
    flex-basis: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0 !important;
    padding-left: 30px;
    padding-right: .25rem;
    white-space: normal;
  }
  #qw-toast-stack .qw-toast .button,
  #qw-toast-stack .qw-toast a.button{
    padding: 9px 12px;
    font-size: .86rem;
  }
  #qw-toast-stack .qw-toast__close{
    width: 28px !important;
    height: 28px !important;
    right: .45rem !important;
  }
}

@media (max-width: 520px){
  #qw-toast-stack{
    left: 8px;
    right: 8px;
    bottom: 1.2rem;
    gap: 8px;
  }
  #qw-toast-stack .qw-toast{
    padding: 10px 12px;
    padding-right: 2.4rem !important;
    font-size: .82rem;
    border-radius: 18px;
  }
  #qw-toast-stack .qw-toast__inner{
    gap: 8px;
  }
  #qw-toast-stack .qw-toast__icon{
    width: 16px;
    height: 16px;
  }
  #qw-toast-stack .qw-toast__icon svg{
    width: 12px;
    height: 12px;
  }
  #qw-toast-stack .qw-toast__actions{
    padding-left: 24px;
  }
  #qw-toast-stack .qw-toast .button,
  #qw-toast-stack .qw-toast a.button{
    padding: 8px 10px;
    font-size: .82rem;
  }
  #qw-toast-stack .qw-toast__close{
    width: 26px !important;
    height: 26px !important;
  }
  #qw-toast-stack .qw-toast__close-glyph{
    font-size: 18px;
  }
  /* Confirm modal mobile */
  .qw-confirm__foot{
    flex-direction: column;
  }
  .qw-confirm-btn{
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 420px){
  #qw-toast-stack{
    left: 6px;
    right: 6px;
    bottom: 1rem;
  }
  #qw-toast-stack .qw-toast{
    padding: 9px 10px;
    padding-right: 2.2rem !important;
    font-size: .80rem;
    border-radius: 24px;
  }
  #qw-toast-stack .qw-toast__content{
    font-size: .84rem;
    line-height: 1.35;
  }
  #qw-toast-stack .qw-toast__actions{
    padding-left: 0;
    gap: 6px;
  }
  #qw-toast-stack .qw-toast .button,
  #qw-toast-stack .qw-toast a.button{
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  /* Confirm modal xs */
  .qw-confirm{
    border-radius: 18px;
  }
  .qw-confirm__head,
  .qw-confirm__body,
  .qw-confirm__foot{
    padding: 12px 14px;
  }
}

@media (max-width: 360px){
  #qw-toast-stack .qw-toast{
    font-size: .78rem;
    padding: 8px 8px;
    padding-right: 2rem !important;
    border-radius: 20px;
  }
  #qw-toast-stack .qw-toast__close{
    width: 24px !important;
    height: 24px !important;
    right: .3rem !important;
  }
  #qw-toast-stack .qw-toast__close-glyph{
    font-size: 16px;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #qw-toast-stack .qw-toast{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   FIX 2026-04-29 — Toast overflow / Storefront button override
   ============================================================
   Storefront/WC aplica `button { padding: ... }` con suficiente
   especificidad como para desbordar el `width: 28px !important`
   del close (computed: 52px width = 28+25+25 padding). Forzamos
   reset completo del padding para mantener el círculo.
*/

/* Close button: reset padding + box-sizing forzado */
#qw-toast-stack .qw-toast__close,
#qw-toast-stack .qw-toast button.qw-toast__close,
#qw-toast-stack .woocommerce-error button.qw-toast__close,
#qw-toast-stack .woocommerce-message button.qw-toast__close,
#qw-toast-stack .woocommerce-info button.qw-toast__close {
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 32px !important;
  max-height: 32px !important;
  flex: 0 0 32px !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  font-size: 18px !important;
}

@media (max-width: 768px){
  #qw-toast-stack .qw-toast__close,
  #qw-toast-stack .qw-toast button.qw-toast__close {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    flex: 0 0 28px !important;
  }
}

@media (max-width: 360px){
  #qw-toast-stack .qw-toast__close,
  #qw-toast-stack .qw-toast button.qw-toast__close {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    flex: 0 0 26px !important;
  }
}

/* Toast content: prevenir overflow horizontal con palabras largas
   (URLs, emails, IBANs, mensajes con HH:MM-HH:MM) */
#qw-toast-stack .qw-toast__content {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  hyphens: auto;
  min-width: 0 !important;
}

/* Garantizar que el inner flex no overflow del padding */
#qw-toast-stack .qw-toast__inner {
  min-width: 0 !important;
  flex-wrap: wrap;
}

/* Toast no overflows del stack ni del viewport */
#qw-toast-stack .qw-toast {
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* En mobile el padding-right necesita ser >= width close + margen */
@media (max-width: 768px){
  #qw-toast-stack .qw-toast {
    padding-right: 48px !important; /* 28px close + 12px margen + 8px buffer */
  }
}
@media (max-width: 360px){
  #qw-toast-stack .qw-toast {
    padding-right: 42px !important; /* 26px close + 10px margen + 6px buffer */
  }
}

/* ==========================================================
   SAFE ZONE: Evitar solapamiento con sticky headers / footers
   ========================================================== */
body.admin-bar #qw-toast-stack{
  /* WordPress admin bar: 32px en desktop, 46px en mobile */
}
/* Si hay sticky footer (checkout, etc.), subir el stack */
body.woocommerce-checkout #qw-toast-stack{
  bottom: 5rem;
}
@media (max-width: 768px){
  body.woocommerce-checkout #qw-toast-stack{
    bottom: 4rem;
  }
}

/* Smart-cart en mobile/tablet: el shortcode [qwood_cart] inyecta
   .qw-sticky-checkout (position:fixed, bottom:10-20px, ~64-78px alto)
   en breakpoints ≤860px. El toast estándar (bottom:1.55rem) lo tapaba.
   Subir el stack por encima del sticky CTA respetando el safe-area-inset
   del notch iOS. Usa el mismo breakpoint que activa el sticky CTA. */
@media (max-width: 860px){
  body.woocommerce-cart #qw-toast-stack{
    bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }
}

/* ==========================================================
   CONFIRM MODAL (scope total, clases únicas)
   ========================================================== */


/* ==========================================================
     QWOOD — Confirm Modal (para QW.Toast.confirm)
     - No depende de librerías
     - Estética QWOOD (verde #1bcf17)
     ========================================================== */
.qw-confirm-backdrop{
    --qw-green:#1bcf17;
    --qw-red:#ef4444;
    --qw-text:#0f172a;
    --qw-sub:#475569;
    --qw-line:#e6ecf5;
    --qw-bg:#ffffff;
    --qw-radius:18px;
    --qw-shadow:0 18px 42px rgba(2,8,23,.16);
    --qw-font:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  .qw-confirm-backdrop{
    position:fixed; inset:0;
    background:rgba(15,23,42,.42);
    backdrop-filter: blur(2px);
    z-index:1000000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
  }
  .qw-confirm{
    width:min(520px, calc(100vw - 24px));
    background:var(--qw-bg);
    border:1px solid var(--qw-line);
    border-radius:24px;
    box-shadow:var(--qw-shadow);
    font-family:var(--qw-font);
    overflow:hidden;
  }
  .qw-confirm__head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px;
    border-bottom:1px solid var(--qw-line);
    background:#fff;
  }
  .qw-confirm__title{
    display:flex; align-items:center; gap:10px;
    font-weight:800; color:var(--qw-text);
    font-size:15px;
  }
  .qw-confirm__pill{
    font-size:12px; font-weight:800;
    padding:6px 10px; border-radius:999px;
    border:1px solid var(--qw-line);
    color:var(--qw-sub);
    background:#ffffff;
  }
  .qw-confirm__pill--danger{ color:#991b1b; border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.08); }
  .qw-confirm__pill--ok{ color:#065f46; border-color:rgba(27,207,23,.30); background:rgba(27,207,23,.08); }
  .qw-confirm__close{
    appearance:none; border:0; background:transparent; cursor:pointer;
    width:36px; height:36px; border-radius:999px;
    display:grid; place-items:center;
    color:var(--qw-sub);
    font-size:20px; line-height:1;
  }
  .qw-confirm__close:hover{ background:rgba(0,0,0,0.02); color:var(--qw-text); }
  .qw-confirm__body{ padding:16px; }
  .qw-confirm__msg{ color:var(--qw-text); font-size:14px; line-height:1.35; }
  .qw-confirm__foot{
    display:flex; gap:10px; justify-content:flex-end;
    padding:14px 16px;
    border-top:1px solid var(--qw-line);
    background:#fff;
  }
  .qw-confirm-btn{
    appearance:none; border:1px solid var(--qw-line);
    background:#fff; color:var(--qw-text);
    padding:10px 14px;
    border-radius:999px;
    font-weight:800; font-family:var(--qw-font);
    cursor:pointer;
  }
  .qw-confirm-btn:hover{ background:rgba(0,0,0,0.02); }
  .qw-confirm-btn--primary{
    border-color:rgba(27,207,23,.35);
    background:var(--qw-green);
    color:#fff;
  }
  .qw-confirm-btn--primary:hover{ filter:brightness(.96); }
  .qw-confirm-btn--danger{
    border-color:rgba(239,68,68,.35);
    background:var(--qw-red);
    color:#fff;
  }
  .qw-confirm-btn--danger:hover{ filter:brightness(.96); }