/* Componente global de mensajes / alertas reutilizable */
.app-alert,
.workers-alert{
  position:fixed;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  display:none;
  width:calc(100% - 40px);
  max-width:520px;
  padding:14px 18px;
  border-radius:14px;
  font-weight:bold;
  text-align:center;
  box-sizing:border-box;
  z-index:3000;
  box-shadow:0 16px 45px rgba(0,0,0,.35);
  backdrop-filter:blur(12px);
}

.app-alert.show,
.workers-alert.show{
  display:block;
}

.app-alert.success,
.workers-alert.success{
  background:rgba(34,197,94,.14);
  color:#86efac;
  border:1px solid rgba(34,197,94,.28);
}

.app-alert.error,
.workers-alert.error{
  background:rgba(239,68,68,.14);
  color:#fca5a5;
  border:1px solid rgba(239,68,68,.28);
}

.app-alert.warning,
.workers-alert.warning{
  background:rgba(245,158,11,.14);
  color:#fcd34d;
  border:1px solid rgba(245,158,11,.28);
}

.app-alert.info,
.workers-alert.info{
  background:rgba(59,130,246,.14);
  color:#93c5fd;
  border:1px solid rgba(59,130,246,.28);
}


/* Confirmación destacada de productos agregados al carrito */
.app-alert.cart-added{
  top:50%;
  width:min(92vw,560px);
  max-width:560px;
  min-height:96px;
  padding:20px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  transform:translate(-50%,-50%) scale(.96);
  background:linear-gradient(145deg,rgba(26,34,28,.98),rgba(16,19,17,.98));
  color:#f4fff7;
  border:1px solid rgba(99,224,142,.42);
  border-radius:22px;
  box-shadow:0 28px 80px rgba(0,0,0,.55),0 0 0 9999px rgba(0,0,0,.28);
  font-size:16px;
  line-height:1.45;
  text-align:left;
  animation:appCartNoticeIn .24s ease forwards;
  cursor:pointer;
  user-select:none;
}

.app-alert-cart-icon{
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#61df8f;
  color:#102015;
  font-size:24px;
  font-weight:900;
  box-shadow:0 8px 24px rgba(97,223,143,.25);
}

.app-alert-cart-copy{
  display:block;
  max-width:440px;
}

@keyframes appCartNoticeIn{
  from{opacity:0;transform:translate(-50%,-50%) scale(.9)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

@media(max-width:768px){
  .app-alert.cart-added{
    width:calc(100% - 34px);
    min-height:88px;
    padding:17px 18px;
    gap:12px;
    border-radius:19px;
    font-size:14px;
  }

  .app-alert-cart-icon{
    flex-basis:38px;
    width:38px;
    height:38px;
    font-size:20px;
  }
}

/* Capa que absorbe el primer clic de los avisos destacados. */
.app-alert-shield{
  position:fixed;
  inset:0;
  display:none;
  z-index:2999;
  background:rgba(0,0,0,.28);
  cursor:pointer;
}

.app-alert-shield.show{
  display:block;
}

/* Avisos destacados centrados: carrito, guardado del administrador y agotados. */
.app-alert.prominent{
  top:50%;
  width:min(92vw,560px);
  max-width:560px;
  min-height:96px;
  padding:20px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  transform:translate(-50%,-50%) scale(.96);
  border-radius:22px;
  box-shadow:0 28px 80px rgba(0,0,0,.55);
  font-size:16px;
  line-height:1.45;
  text-align:left;
  animation:appCartNoticeIn .24s ease forwards;
  cursor:pointer;
  user-select:none;
}

.app-alert.prominent.success{
  background:linear-gradient(145deg,rgba(26,34,28,.99),rgba(16,19,17,.99));
  color:#f4fff7;
  border:1px solid rgba(99,224,142,.42);
}

.app-alert.prominent.warning{
  background:linear-gradient(145deg,rgba(49,38,17,.99),rgba(25,21,14,.99));
  color:#fff8df;
  border:1px solid rgba(245,190,74,.55);
}

.app-alert.prominent.warning .app-alert-cart-icon{
  background:#f3bd4f;
  color:#2a210f;
  box-shadow:0 8px 24px rgba(243,189,79,.25);
}

.app-alert.prominent.error{
  background:linear-gradient(145deg,rgba(52,24,24,.99),rgba(25,15,15,.99));
  color:#fff1f1;
  border:1px solid rgba(248,113,113,.5);
}

.app-alert.prominent.error .app-alert-cart-icon{
  background:#f87171;
  color:#2a1010;
  box-shadow:0 8px 24px rgba(248,113,113,.24);
}

@media(max-width:768px){
  .app-alert.prominent{
    width:calc(100% - 34px);
    min-height:88px;
    padding:17px 18px;
    gap:12px;
    border-radius:19px;
    font-size:14px;
  }
}

/* Etapa 68: los avisos deben cubrir tambien el carrito elevado sobre el modal. */
.app-alert-shield{z-index:6000;}
.app-alert.prominent{z-index:6001;}

/* Etapa 111: avisos globales por encima de editores, regalos y paneles. */
.app-alert-shield{z-index:22990!important}
.app-alert,.workers-alert,.app-alert.prominent{z-index:23000!important}
.app-alert-shield{z-index:199990!important}
.app-alert,.workers-alert,.app-alert.prominent{z-index:200000!important}