/* ---------------------- CONTENEDOR PRINCIPAL ---------------------- */
.anun-container{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:50px;
  width:100%;
  margin-top:80px;
  margin-bottom:20px;
}

/* ---------------------- IMÁGENES Y WRAPPERS ---------------------- */
.anun-images{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  min-height:320px;
  outline:none;
}
.anun-image-wrapper{ margin:0 6px; position:relative; }

/* ---------------------- IMÁGENES PRINCIPALES ---------------------- */
.anun-image{
  width:auto;
  max-width:88vw;
  max-height:600px;
  transition:transform .28s cubic-bezier(.48,1.4,.66,1.01), z-index 0s, box-shadow .25s;
  object-fit:cover;
  border-radius:12px;
  height:auto;
  cursor:pointer;
  opacity:1;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  z-index:1;
  position:relative;
}
.anun-image.middle{ transform:scale(1.22); z-index:10; }
.anun-image:not(.middle){ transform:scale(1.06); z-index:5; }

.anun-image:hover, .anun-image:focus-visible{
  z-index:20 !important;
  transform:scale(1.12);
  box-shadow:0 14px 34px rgba(0,0,0,.18), 0 2px 18px rgba(49,105,224,.18);
}

/* ---------------------- Flechas (alineadas con Promociones) ---------------------- */
.anun-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  color:#fff;
  font-size:34px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
  z-index:60;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.anun-nav[disabled]{ opacity:.35; cursor:not-allowed; }
.anun-prev{ left:3vw; }
.anun-next{ right:3vw; }

/* ---------------------- Acciones ---------------------- */
.anun-actions{
  position: relative;
  bottom: 0;
  z-index: 120;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  width:100%;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  margin:0;
  border-top:1px solid rgba(0,0,0,.06);
  box-shadow:0 -8px 22px rgba(0,0,0,.06);
}

.btn-accion{
  background:#efefef;
  color:#222;
  border:none;
  border-radius:10px;
  padding:9px 14px;
  cursor:pointer;
  font-weight:700;
  box-shadow:0 2px 8px #00123a14;
}
.btn-accion[disabled]{ opacity:.55; cursor:not-allowed; }

/* Ajuste WA móvil */
@media (max-width: 700px){ .wa-float{ bottom: 96px; } }

/* ---------------------- Texto vacío ---------------------- */
.anun-empty{
  text-align:center;
  color:#5b6b8b;
  margin:12px 0 40px;
}

/* ---------------------- Botón overlay Actualizar ---------------------- */
.btn-actualizar-imagen{
  position:absolute;
  top:12px;
  left:12px;
  z-index:30;
  background:#fff;
  color:#24409b;
  border:2px solid #24409b;
  border-radius:9px;
  padding:6px 13px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 2px 12px rgba(49,105,224,.09);
  transition:background .17s,color .17s, transform .17s;
}
.btn-actualizar-imagen:hover{ background:#24409b; color:#fff; transform:translateY(-1px); }

/* ---------------------- Modal & Toast ---------------------- */
.anun-modal-bg{ display:none; position:fixed; inset:0; background:rgba(30,44,90,.38); transition:opacity .23s; opacity:0; z-index:100; }
.anun-modal-bg.active{ display:block; opacity:1; }
.anun-modal-popup{
  display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:200; background:#fff;
  box-shadow:0 8px 32px rgba(49,105,224,.13), 0 2px 18px rgba(0,0,0,.13);
  border-radius:1.1rem; padding:1.1rem 1.1rem 1rem;
  flex-direction:column; align-items:stretch; gap:.9rem;
  min-width:260px; max-width:95vw; width:360px;
  border:1.5px solid #24409b; box-sizing:border-box; overflow:hidden;
  animation:fadeIn .22s cubic-bezier(.48,1.4,.66,1.01);
}
.anun-modal-popup.active{ display:flex; }
.modal-title{ margin:.1rem .2rem .4rem; color:#0a2478; font-size:1.12rem; }
.modal-label{ font-weight:600; font-size:.95rem; color:#243154; }
.close-modal-btn{
  background:none; border:none; color:#24409b;
  font-size:2rem; font-weight:bold; position:absolute; top:8px; right:14px;
  cursor:pointer; transition:color .19s; z-index:300; line-height:1;
}
.close-modal-btn:hover{ color:#e84242; }
.anun-modal-popup input[type="file"]{
  width:100%; font-size:1rem; padding:.42rem .4rem; background:#f5f8fd;
  border-radius:.5rem; border:1.2px solid #b4c6ef; margin-bottom:.5rem; outline:none; transition:border .17s;
}
.anun-modal-popup input[type="file"]:focus{ border-color:#24409b; }
.anun-modal-popup button[type="submit"]{
  background:#24409b; color:#fff; font-weight:700; border:none;
  padding:.57rem 1.2rem; border-radius:.62rem; font-size:1.06rem; width:100%;
  transition:background .16s;
}
.anun-modal-popup button[type="submit"]:hover{ background:#0a2478; }
@keyframes fadeIn{ from{ transform:translate(-50%,-62%) scale(.98); opacity:.7;} to{ transform:translate(-50%,-50%) scale(1); opacity:1;} }

.popup-success{
  position:fixed; top:40px; left:50%; transform:translateX(-50%);
  background:#1fc366; color:#fff; font-size:1.02rem; font-weight:700;
  border-radius:1rem; padding:12px 22px;
  box-shadow:0 6px 32px rgba(70,170,120,.13), 0 2px 10px rgba(0,0,0,.09);
  z-index:400; opacity:0; pointer-events:none;
  transition:opacity .28s cubic-bezier(.4,2.3,.3,1), top .25s;
}
.popup-success.active{ opacity:1; pointer-events:auto; }
.popup-success.error{ background:#e53935; }

/* ---------------------- Loader ---------------------- */
#anunLoader{ position:fixed; inset:0; background:rgba(10,20,40,.18); display:none; align-items:center; justify-content:center; z-index:2500 }
#anunLoader.show{ display:flex }
#anunLoader .spinner{ width:54px;height:54px;border-radius:50%;border:4px solid rgba(4,43,236,.24);border-top-color:#042bec;animation:spin .85s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
.is-busy{ opacity:.6; pointer-events:none }

/* Gestos al navegar */
.anun-images.slide-left{ animation:slideLeft .22s ease }
.anun-images.slide-right{ animation:slideRight .22s ease }
@keyframes slideLeft{ from{transform:translateX(0)} to{transform:translateX(-60px)} }
@keyframes slideRight{ from{transform:translateX(0)} to{transform:translateX(60px)} }

/* ====================== RESPONSIVE ====================== */
@media (max-width:1100px){
  .anun-container{ flex-direction:column; gap:30px; }
  .anun-images{ flex-direction:column; gap:46px; align-items:center; }
  .anun-image{ width:96vw; max-width:650px; max-height:840px; border-radius:12px; margin:0 auto; object-fit:contain; transform:none; z-index:0 !important; }
  .anun-image.middle{ width:96vw; max-width:680px; max-height:880px; border-radius:12px; transform:none; z-index:0 !important; }
  .anun-prev{ left:2vw } .anun-next{ right:2vw }
  .anun-image:not(.middle){ display:none !important; }
}
@media (max-width:800px){
  .anun-container{ margin-top:30px; margin-bottom:32px; }
  .anun-images{ gap:40px; }
  .anun-image{ width:95vw; max-width:600px; max-height:760px; border-radius:10px; transform:none; }
  .anun-image.middle{ width:95vw; max-width:620px; max-height:800px; border-radius:10px; transform:none; }
}
@media (max-width:650px){
  .anun-container{ margin-top:14px; margin-bottom:18px; gap:7px; }
  .anun-images{ gap:28px; }
  .anun-image{ width:86vw; max-width:86vw; border-radius:9px; margin:0 auto 10px; object-fit:contain; transform:none; }
  .anun-image.middle{ width:92vw; max-width:92vw; border-radius:9px; margin:0 auto 10px; object-fit:contain; transform:none; }
}
@media (max-width:420px){
  .anun-images{ gap:24px; }
  .anun-image{ width:86vw; max-width:86vw; border-radius:7px; }
  .anun-image.middle{ width:92vw; max-width:92vw; border-radius:7px; }
  .anun-modal-popup{ min-width:90vw; max-width:90vw; width:90vw; padding:.7rem .45rem .6rem; border-radius:.8rem; }
  .close-modal-btn{ top:2px; right:7px; font-size:1.3rem; }
}

/* WhatsApp floating button */
.wa-float{ position:fixed; right:48px; bottom:48px; width:clamp(56px,7vw,84px); z-index:3000; animation:wa-pulse 1.4s infinite ease-in-out; transform-origin:center; cursor:pointer; }
.wa-float:hover{ animation-play-state:paused; transform:scale(1.06); }
.wa-float img{ width:100%; height:auto; display:block; filter:drop-shadow(0 10px 18px rgba(0,0,0,.25)); }
@keyframes wa-pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

@media (prefers-reduced-motion: reduce){ .wa-float{ animation:none; } }
@media (max-width: 768px){
  .wa-float{ right: clamp(12px, 4vw, 24px); bottom: calc(clamp(12px, 4vw, 24px) + env(safe-area-inset-bottom)); width: clamp(44px, 12vw, 64px); }
}
@media (max-width: 420px){
  .wa-float{ right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: 56px; }
}

/* ----- Modal Editar Orden ----- */
.anun-order-modal{ max-width: min(920px, 95vw); width: min(920px, 95vw); }
.order-hint-text{ margin:.2rem .2rem .6rem; color:#52618a; font-size:.92rem; }
.order-list{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:12px;
  max-height:60vh;
  overflow:auto;
  padding:.2rem;
}
.order-item{
  background:#f6f8ff;
  border:1.5px solid #c9d4f6;
  border-radius:.8rem;
  padding:.5rem;
  display:flex; align-items:center; justify-content:center;
  cursor:grab; position:relative;
  transition:transform .12s, box-shadow .12s, border-color .12s, background .12s;
}
.order-item:active{ cursor:grabbing }
.order-item.dragging{ opacity:.8; transform:scale(.98); box-shadow:0 8px 28px rgba(0,0,0,.12); }
.order-item img{ width:100%; height:auto; border-radius:.5rem; object-fit:contain; }
.order-item.current::after{
  content:'Actual';
  position:absolute; top:8px; right:8px;
  background:#24409b; color:#fff; font-size:.72rem; font-weight:700;
  padding:2px 6px; border-radius:.5rem;
}
.order-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:.6rem; }
.order-save{ background:#24409b; color:#fff; }