/* =========================================================
 * widgets.css — Horizon Extranjería
 * Estilos de widgets dinámicos (antes inyectados desde mejoras.js)
 * ========================================================= */

/* ---------- Back to top ---------- */
#back-top {
  position: fixed; bottom: 122px; right: 20px;
  width: 40px; height: 40px;
  background: #344e41; color: #fff;
  border: none; border-radius: 50%;
  cursor: pointer; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  z-index: 125;
  box-shadow: 0 3px 12px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .2s;
}
#back-top.visible { opacity: 1; pointer-events: auto; }
#back-top:hover { transform: translateY(-2px); }

/* ---------- WhatsApp flotante ---------- */
/* Definicion base del boton flotante. Vivia duplicada a mano en 11 paginas
   legacy con tamanos distintos (45/46/50/52/55/60px) y no existia en ninguna
   hoja compartida, asi que las paginas construidas con componentes (los
   articulos del blog, reservas...) se quedaron sin boton. Aqui es unica.
   Las paginas legacy cargan widgets.css ANTES de su <style> propio, asi que
   conservan su version y no cambian de aspecto. */
.whatsapp-flotante {
  position: fixed;
  bottom: 25px; right: 20px;
  width: 60px; height: 60px;
  background: #25d366; color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem;
  z-index: 128;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .45);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
}
.whatsapp-flotante:hover {
  transform: scale(1.08);
  color: #fff;
  box-shadow: 0 12px 32px rgba(37, 211, 102, .6);
}
@media (max-width: 480px) {
  .whatsapp-flotante { width: 54px; height: 54px; bottom: 18px; right: 16px; font-size: 1.7rem; }
}

/* ---------- WhatsApp pulse + badge ---------- */
.whatsapp-flotante::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 3px solid #25d366;
  animation: wa-ring 2.5s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-ring {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.65); opacity: 0; }
}

#wa-badge {
  position: fixed; bottom: 84px; right: 14px;
  background: #fff; color: #344e41;
  font-size: .68rem; font-weight: 700;
  padding: 3px 8px; border-radius: 20px;
  z-index: 129;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap; pointer-events: none;
}
#wa-badge::before { content: '●'; color: #25d366; font-size: .5rem; }

@media (max-width: 480px) {
  #wa-badge { display: none; }
  #back-top { bottom: 84px; right: 14px; width: 36px; height: 36px; font-size: .85rem; }
}

/* ---------- Cookie banner ---------- */
#cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: #1a1a2e; color: #ddd;
  padding: 16px 20px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-size: .9rem;
  box-shadow: 0 -4px 20px rgba(0,0,0,.4);
  line-height: 1.5;
  pointer-events: auto;
}
#cookie-banner p { margin: 0; flex: 1; min-width: 200px; }
#cookie-banner a { color: #dab749; text-decoration: underline; }
.ck-btns { display: flex; gap: 10px; flex-shrink: 0; }
.ck-ok, .ck-no {
  min-height: 44px;            /* tap target accesible (WCAG/Apple/Google) */
  padding: 10px 22px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 700;
  touch-action: manipulation;  /* evita doble-tap zoom delay en iOS */
  -webkit-tap-highlight-color: rgba(218,183,73,.3);
}
.ck-ok {
  background: #dab749; color: #344e41;
  border: 2px solid #dab749;
}
.ck-ok:hover, .ck-ok:active { background: #c8a845; border-color: #c8a845; }
.ck-no {
  background: transparent; color: #ddd;
  border: 2px solid #555;
}
.ck-no:hover, .ck-no:active { background: rgba(255,255,255,.08); border-color: #888; }

/* Móvil: botones a ancho completo apilados verticalmente */
@media (max-width: 600px) {
  #cookie-banner { padding: 14px 14px; gap: 12px; }
  #cookie-banner p { font-size: .85rem; }
  .ck-btns { width: 100%; flex-direction: column-reverse; gap: 8px; }
  .ck-ok, .ck-no { width: 100%; min-height: 48px; }
}

/* ---------- Exit intent ---------- */
#exit-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
#exit-overlay.hz-hidden { display: none; }
#exit-modal {
  background: #fff; border-radius: 16px;
  padding: 34px 26px;
  max-width: 420px; width: 100%;
  text-align: center; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
#exit-modal .em-emoji { font-size: 2.5rem; margin-bottom: 10px; }
#exit-modal h3 { color: #344e41; font-size: 1.3rem; margin: 0 0 8px; }
#exit-modal p { color: #555; font-size: .93rem; line-height: 1.55; margin: 0 0 18px; }
#exit-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none;
  font-size: 1.3rem; cursor: pointer; color: #bbb;
}
.em-wa-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #25d366; color: #fff; font-weight: 700;
  padding: 13px; border-radius: 9px;
  text-decoration: none; font-size: .97rem;
  margin-bottom: 10px;
}
.em-skip {
  background: none; border: none; color: #bbb;
  cursor: pointer; font-size: .8rem; text-decoration: underline;
}

/* ---------- Reading progress ---------- */
#read-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: linear-gradient(90deg,#344e41,#dab749);
  z-index: 300;
  transition: width .08s linear;
}

/* ---------- TOC ---------- */
#toc-box {
  background: #f4f7f5;
  border-left: 4px solid #344e41;
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin-bottom: 28px;
}
#toc-box h4 {
  color: #344e41; font-size: .85rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
  margin: 0 0 10px;
}
#toc-box ol { margin: 0; padding-left: 18px; }
#toc-box li { margin-bottom: 5px; }
#toc-box a { color: #344e41; text-decoration: none; font-size: .89rem; }
#toc-box a:hover { color: #dab749; text-decoration: underline; }

/* ---------- Share buttons ---------- */
#share-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 26px 0; padding: 14px 16px;
  background: #f5f5f5; border-radius: 8px;
}
#share-bar .sb-label { font-size: .83rem; color: #666; font-weight: 600; }
.share-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: 6px;
  font-size: .82rem; font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
  transition: opacity .15s;
}
.share-btn:hover { opacity: .82; }
.sb-wa { background: #25d366; color: #fff; }
.sb-x  { background: #000;    color: #fff; }
.sb-copy { background: #e0e0e0; color: #333; }

/* ---------- Urgency bar ---------- */
#urgency-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 190;
  background: linear-gradient(135deg,#b03020,#8e241a);
  color: #fff;
  padding: 8px 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  font-size: .83rem;
  box-shadow: 0 -3px 16px rgba(0,0,0,.3);
}
#urgency-bar .ub-text { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#urgency-bar .ub-days { font-weight: 800; font-size: 1.05rem; color: #dab749; }
#urgency-bar a.ub-cta {
  background: #dab749; color: #344e41; font-weight: 700;
  padding: 6px 13px; border-radius: 6px;
  text-decoration: none; font-size: .8rem; white-space: nowrap;
}
#urgency-bar .ub-close {
  background: none; border: none;
  color: rgba(255,255,255,.6);
  cursor: pointer; font-size: 1.05rem; padding: 0;
}
body.has-urgency .whatsapp-flotante { bottom: 62px; }
body.has-urgency #wa-badge { bottom: 126px; }
body.has-urgency #back-top { bottom: 164px; }
body.has-urgency #cookie-banner { bottom: 44px; }

/* ---------- Scroll fade ---------- */
.hz-fade {
  opacity: 0; transform: translateY(22px);
  transition: opacity .65s ease, transform .65s ease;
}
.hz-fade.hz-vis { opacity: 1; transform: none; }

/* ---------- Stats strip ---------- */
.hz-stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  background: #fff; border: 1px solid #eee;
  border-radius: 12px; overflow: hidden;
  /* margin lateral auto: la franja lleva también la clase .container,
     y un margin lateral 0 anularía su centrado */
  margin: 28px auto;
  width: min(90%, 1200px);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.hz-stat { text-align: center; padding: 22px 12px; border-right: 1px solid #eee; }
.hz-stat:last-child { border-right: none; }
.hz-stat-num { font-size: 2rem; font-weight: 900; color: #344e41; display: block; line-height: 1; }
.hz-stat-lbl { font-size: .78rem; color: #666; margin-top: 5px; display: block; }
@media (max-width: 600px) {
  .hz-stat { border-right: none; border-bottom: 1px solid #eee; }
  .hz-stat:last-child { border-bottom: none; }
}

/* ---------- Testimonial avatars ---------- */
.t-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.t-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .95rem; color: #fff;
  flex-shrink: 0;
}
.t-meta { display: flex; flex-direction: column; gap: 3px; }
.t-tramite {
  font-size: .68rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(52,78,65,.1); color: #344e41;
  text-transform: uppercase; letter-spacing: .3px;
  display: inline-block;
}