/* ============================================================
   PUBLICIDAD — ventana emergente para los clientes + pestaña «📢 Publicidad» del panel
   Mismos colores y tipografías de la página: dorado, café, crema y terracota.
   El botón principal es igual al de «Arma tu Arepa» (dorado #D4A017 / terracota #9B390D).
   ============================================================ */

/* ---------- Ventana emergente ---------- */
.ad-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(42,20,5,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; font-family: 'Poppins', sans-serif; }
.ad-overlay.is-on { opacity: 1; }
.ad-card { position: relative; width: min(100%, 410px); max-height: calc(100dvh - 32px); overflow-x: hidden; overflow-y: auto; border-radius: 1.6rem; background: #FFFDF8; border: 2px solid var(--primary-500, #D4A017); box-shadow: 0 30px 70px -20px rgba(0,0,0,.65); transform: translateY(20px) scale(.95); transition: transform .32s cubic-bezier(.2,1.2,.4,1); outline: none; overscroll-behavior: contain; }
.ad-overlay.is-on .ad-card { transform: none; }

.ad-media { position: relative; aspect-ratio: 16 / 11; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 30% 20%, #8a3d14 0%, var(--secondary-900, #3A1D08) 70%); }
.ad-media::before { content: ''; position: absolute; inset: 0; background: radial-gradient(var(--primary-500, #D4A017) 1px, transparent 1.3px) 0 0 / 22px 22px; opacity: .22; }
.ad-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(to top, rgba(42,20,5,.45), transparent); pointer-events: none; }
.ad-emoji { position: relative; font-size: 4.6rem; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.ad-badge { position: absolute; z-index: 2; left: .85rem; top: .85rem; max-width: calc(100% - 4.5rem); padding: .32rem .8rem; border-radius: 999px; background: var(--quaternary-600, #C24A12); color: #fff; font: 800 .72rem/1.2 'Montserrat', sans-serif; box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); }
.ad-x { position: absolute; z-index: 3; right: .75rem; top: .75rem; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(58,29,8,.88); color: #F5D470; font-size: .9rem; cursor: pointer; box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); transition: background .15s, transform .12s; }
.ad-x:hover { background: var(--secondary-900, #3A1D08); transform: scale(1.06); }

.ad-body { display: grid; gap: .55rem; padding: 1.05rem 1.3rem 1.3rem; text-align: center; }
.ad-title { margin: 0; font: 800 1.35rem/1.2 'Montserrat', sans-serif; color: var(--secondary-900, #3A1D08); overflow-wrap: anywhere; }
.ad-text { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--secondary-600, #7a5a3c); overflow-wrap: anywhere; white-space: pre-line; }
.ad-price { display: flex; align-items: baseline; justify-content: center; gap: .55rem; flex-wrap: wrap; }
.ad-price b { font: 900 1.7rem 'Montserrat', sans-serif; color: var(--quaternary-700, #9B390D); }
.ad-price s { font: 600 .95rem 'Poppins', sans-serif; color: var(--secondary-500, #a78a6d); }
.ad-price em { font: 800 .72rem 'Montserrat', sans-serif; font-style: normal; padding: .15rem .55rem; border-radius: 999px; background: var(--quaternary-600, #C24A12); color: #fff; }
.ad-cta { margin-top: .25rem; padding: .85rem 1.2rem; border: 0; border-radius: 999px; background: #D4A017; color: #9B390D; font: 800 1rem 'Montserrat', sans-serif; cursor: pointer; box-shadow: 0 10px 22px -10px rgba(155,57,13,.7); transition: background .15s, transform .12s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.ad-cta:hover { background: #e6b422; transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(155,57,13,.75); }
.ad-cta:active { transform: scale(.97); }
.ad-skip { justify-self: center; padding: .25rem .6rem; border: 0; background: transparent; color: var(--secondary-600, #7a5a3c); font: 700 .8rem 'Poppins', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ad-skip:hover { color: var(--secondary-900, #3A1D08); }
.ad-cta:focus-visible, .ad-skip:focus-visible, .ad-x:focus-visible { outline: 3px solid var(--quaternary-600, #C24A12); outline-offset: 2px; }
.ad-timer { height: 5px; background: var(--primary-100, #F8E6B0); }
.ad-timer { overflow: hidden; }
.ad-timer i { display: block; height: 100%; background: var(--primary-500, #D4A017); transform-origin: left center; transform: scaleX(1); transition: transform .12s linear; will-change: transform; }   /* el avance lo pone publicidad.js según el reloj */
.ad-prev { padding: .4rem .8rem; text-align: center; font: 800 .72rem 'Montserrat', sans-serif; background: var(--primary-100, #F8E6B0); color: var(--secondary-900, #3A1D08); }
@media (max-width: 420px) { .ad-title { font-size: 1.2rem; } .ad-price b { font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .ad-overlay, .ad-card { transition: none; } .ad-timer i { transition: none; } }

/* ---------- Pestaña «📢 Publicidad» en Administrar ---------- */
.adm-master { padding: .6rem .75rem; margin: .2rem 0 .7rem; border-radius: .9rem; background: rgba(0,0,0,.3); border: 1px dashed rgba(var(--sa-acc-rgb, 212,160,23),.6); }
.adm-master small { display: block; font-weight: 600; font-size: .7rem; color: rgba(var(--sa-txt-rgb, 245,230,200),.7); }
.adm-list { display: grid; gap: .6rem; margin-bottom: .7rem; }
.adm-item { border-radius: 1rem; background: rgba(var(--sa-acc-rgb, 212,160,23),.08); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.3); }
.adm-item.is-open { border-color: var(--sa-acc, #D4A017); }
.adm-head { display: flex; align-items: center; gap: .6rem; padding: .6rem; flex-wrap: wrap; }
.adm-thumb { flex: none; width: 3.4rem; height: 3.4rem; border-radius: .8rem; overflow: hidden; display: grid; place-items: center; font-size: 1.6rem; background: rgba(0,0,0,.35); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.4); }
.adm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-info { flex: 1 1 10rem; min-width: 0; display: grid; gap: .1rem; }
.adm-info b { font: 800 .86rem 'Poppins', sans-serif; color: var(--sa-txt, #F5E6C8); overflow-wrap: anywhere; }
.adm-info small { font-size: .68rem; font-weight: 700; color: rgba(var(--sa-txt-rgb, 245,230,200),.75); }
.adm-st--on { color: #6ee7a8 !important; } .adm-st--off { color: #fca5a5 !important; } .adm-st--wait { color: #fcd34d !important; }
.adm-sw { flex: none; font-size: .72rem; }
.adm-btns { display: flex; gap: .3rem; flex: none; margin-left: auto; }
.adm-mini { padding: .3rem .55rem !important; font-size: .8rem !important; min-width: 2rem; line-height: 1.1; }
.adm-mini:disabled { opacity: .35; cursor: default; }
.adm-mini--del { border-color: #f87171 !important; color: #fca5a5 !important; }
.adm-body { padding: 0 .7rem .8rem; border-top: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.25); }
.adm-grid { display: flex; gap: .8rem; align-items: flex-start; padding-top: .7rem; }
.adm-pic small { font-size: .62rem; font-weight: 700; text-align: center; color: rgba(var(--sa-txt-rgb, 245,230,200),.8); }
.adm-sub { margin: .8rem 0 .4rem; font: 800 .82rem 'Poppins', sans-serif; color: var(--sa-acc, #D4A017); }
.adm-hint { margin: 0 !important; }
.adm-best { display: grid; gap: .3rem; padding: .55rem .65rem; border-radius: .8rem; background: rgba(0,0,0,.3); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.4); font-size: .76rem; font-weight: 700; color: var(--sa-txt, #F5E6C8); }
.adm-best__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.adm-best__row small { font-weight: 600; opacity: .75; }
.sa-fields .sa-f--w { grid-column: 1 / -1; }
.sa-fields textarea.sa-input { resize: vertical; }
.sa-fields select.sa-input option, .sa-fields select.sa-input optgroup { color: #2a1405; background: #fff; }
@media (max-width: 520px) { .adm-grid { flex-direction: column; } .adm-pic { flex-direction: row; width: 100%; } }

/* ajuste de anchos (evita que los campos se salgan en pantallas angostas) */
.adm-list, .adm-item, .adm-body, .adm-grid, .adm-grid > .sa-fields { min-width: 0; max-width: 100%; }
.adm-grid > .sa-fields { flex: 1; }
.adm-body .sa-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm-body .sa-input { min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (max-width: 520px) {
    .adm-body .sa-fields { grid-template-columns: minmax(0, 1fr); }
    .adm-pic { display: flex !important; width: 100%; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .4rem; }
    .adm-pic > span, .adm-pic > img { width: 4rem !important; height: 4rem !important; }
    .adm-pic button { width: auto !important; flex: 1 1 7rem; padding: .45rem .5rem !important; }
    .adm-pic small { flex-basis: 100%; text-align: left; }
    .adm-btns { margin-left: 0; flex-wrap: wrap; }
}