/* MOVEO COACH — polish layer
 * Skeleton loaders · empty-state illustrations · onboarding tour · coach badges
 * Hero splash banner · coach video intro modal
 * Loaded after the main stylesheets so it can override defaults. */

/* ─── Skeleton loader (use class="skeleton") ─── */
.skeleton{
  position:relative;overflow:hidden;
  background:var(--sand-50,#F6F1E7);
  border-radius:6px;color:transparent !important;
}
.skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  animation:moveo-shimmer 1.4s infinite;
}
@keyframes moveo-shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
html[data-theme="dark"] .skeleton{ background:#2C2620; }
html[data-theme="dark"] .skeleton::after{
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
}

/* Pre-baked skeleton card sizes for common slots */
.sk-line{ height:14px;margin:6px 0;border-radius:4px; }
.sk-line.sm{ width:40%;height:11px; }
.sk-line.md{ width:65%; }
.sk-line.lg{ width:90%; }
.sk-circle{ width:48px;height:48px;border-radius:50%; }
.sk-thumb{ width:100%;height:140px;border-radius:12px; }
.sk-card{
  display:flex;gap:14px;padding:14px;border:1px solid var(--line,#E9E2D3);border-radius:12px;
  margin-bottom:10px;background:var(--paper,#fff);
}
.sk-card .sk-body{flex:1}

/* ─── Empty states ─── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:48px 24px;color:var(--mute,#8A7F70);
  background:var(--sand-50,#F6F1E7);border:1px dashed var(--line,#E9E2D3);
  border-radius:16px;max-width:480px;margin:0 auto;
}
.empty-state svg{ margin-bottom:14px;opacity:.55; }
.empty-state h4{
  font-family:'Cormorant Garamond',serif;font-weight:500;font-size:22px;
  color:var(--ink,#241F18);margin:0 0 6px;
}
.empty-state p{ font-size:13.5px;line-height:1.5;margin:0 0 18px;max-width:340px;color:var(--mute,#8A7F70);}
.empty-state .btn{ font-size:13px;padding:9px 18px; }
html[data-theme="dark"] .empty-state{
  background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.08);
}

/* ─── Onboarding tour tooltips ─── */
.tour-scrim{
  position:fixed;inset:0;background:rgba(20,17,13,.72);z-index:10000;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.tour-scrim.on{ opacity:1;pointer-events:auto; }
.tour-tip{
  position:fixed;z-index:10001;
  background:var(--paper,#fff);color:var(--ink,#241F18);
  border-radius:14px;padding:18px 20px;
  max-width:300px;
  box-shadow:0 20px 40px -10px rgba(0,0,0,.45);
  font-family:inherit;
  animation:moveo-pop .35s cubic-bezier(.2,1.4,.4,1);
}
@keyframes moveo-pop{
  0%{ opacity:0;transform:scale(.85); }
  100%{ opacity:1;transform:scale(1); }
}
.tour-tip .step{
  font-size:10px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:var(--accent-2,#4B5D4A);margin-bottom:6px;
}
.tour-tip h4{
  font-family:'Cormorant Garamond',serif;font-weight:500;font-size:22px;
  margin:0 0 6px;color:var(--ink,#241F18);
}
.tour-tip p{ font-size:13.5px;line-height:1.5;margin:0 0 16px;color:var(--ink-2,#3F372C); }
.tour-tip .row{ display:flex;align-items:center;justify-content:space-between;gap:10px; }
.tour-tip .dots{ display:flex;gap:5px; }
.tour-tip .dots span{ width:6px;height:6px;border-radius:50%;background:var(--line,#E9E2D3); }
.tour-tip .dots span.on{ background:var(--ink,#241F18); }
.tour-tip .actions{ display:flex;gap:8px; }
.tour-tip button{
  font-family:inherit;cursor:pointer;border:none;padding:8px 14px;
  border-radius:8px;font-size:12.5px;font-weight:600;
}
.tour-tip .btn-skip{ background:transparent;color:var(--mute,#8A7F70); }
.tour-tip .btn-skip:hover{ color:var(--ink,#241F18); }
.tour-tip .btn-next{ background:var(--ink,#241F18);color:#F6F1E7; }
.tour-tip .btn-next:hover{ background:#3F372C; }
html[data-theme="dark"] .tour-tip{ background:#241F18;color:#F6F1E7; }
html[data-theme="dark"] .tour-tip h4{ color:#F6F1E7; }
html[data-theme="dark"] .tour-tip p{ color:#D9CFB8; }
html[data-theme="dark"] .tour-tip .btn-next{ background:#F6F1E7;color:#241F18; }

/* ─── Coach badges row (in coach panel + list) ─── */
.coach-badges{
  display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 2px;
}
.coach-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:999px;
  font-size:10.5px;font-weight:600;letter-spacing:.04em;
  background:var(--sand-50,#F6F1E7);color:var(--ink-2,#3F372C);
  border:1px solid transparent;
  white-space:nowrap;
}
.coach-badge svg{ width:11px;height:11px;flex-shrink:0; }
.coach-badge.verified{
  background:#E5F0FB;color:#1F5DA0;
}
.coach-badge.elite{
  background:#FFF7E5;color:#8A6300;border-color:#E5B947;
}
.coach-badge.vip{
  background:linear-gradient(135deg,#FFF7E5,#FFE9C2);color:#8A6300;border-color:#C9A03A;
}
.coach-badge.early{
  background:#E8F1E5;color:#2B6A3A;border-color:rgba(43,106,58,.30);
}
.coach-badge.stripe{
  background:#EEEBFE;color:#5C53D4;
}
html[data-theme="dark"] .coach-badge{
  background:rgba(255,255,255,.06);color:#D9CFB8;
}
html[data-theme="dark"] .coach-badge.verified{ background:rgba(31,93,160,.20);color:#9EC8F5; }
html[data-theme="dark"] .coach-badge.elite{ background:rgba(229,185,71,.18);color:#F4D790; }
html[data-theme="dark"] .coach-badge.vip{ background:rgba(201,160,58,.20);color:#F4D790; }
html[data-theme="dark"] .coach-badge.early{ background:rgba(43,106,58,.25);color:#A3D9A5; }
html[data-theme="dark"] .coach-badge.stripe{ background:rgba(92,83,212,.22);color:#B4ADF5; }

/* ─── HERO SPLASH (first-visit welcome banner) ─── */
/* Slim, dismissable banner shown above the map for first-time visitors.
   Per Arantxa (24 may): "hero más diferenciado en landing" — but the map
   is the product, so we don't push it down with a tall section. Instead
   a 56px-tall banner with a tagline + CTA that vanishes once dismissed. */
/* ─── HERO SPLASH (admin-toggleable bottom banner) ─── */
/* Per Arantxa (24 may): movido al fondo de la pantalla, semi-transparente,
   con z-index bajo para que NO interfiera con los botones flotantes
   (iso toolbar, locate FAB, compass, leyenda). Solo se muestra si admin
   lo activa via toggle (localStorage `moveo-hero-enabled`). */
.moveo-hero{
  position:fixed;bottom:0;left:0;right:0;
  z-index:40;
  background:linear-gradient(180deg, rgba(36,31,24,.85) 0%, rgba(36,31,24,.95) 100%);
  color:#F6F1E7;
  padding:11px 80px 11px 18px;
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-family:inherit;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.08);
  transform:translateY(0);
  transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .4s;
  pointer-events:auto;
}
.moveo-hero.dismissed{
  transform:translateY(110%);opacity:0;pointer-events:none;
}
.moveo-hero .hero-line{
  display:flex;align-items:center;gap:10px;font-size:13.5px;
  text-align:center;
}
.moveo-hero .hero-line strong{
  font-family:'Cormorant Garamond',serif;font-weight:500;font-size:18px;
  color:#F6F1E7;letter-spacing:.01em;
}
.moveo-hero .hero-line .sep{
  width:1px;height:18px;background:rgba(255,255,255,.20);
}
.moveo-hero .hero-line .tag{
  color:rgba(246,241,231,.78);font-size:13px;
}
.moveo-hero .hero-x{
  background:transparent;border:none;cursor:pointer;color:rgba(246,241,231,.55);
  width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;position:absolute;right:12px;top:50%;transform:translateY(-50%);
}
.moveo-hero .hero-x:hover{ color:#F6F1E7;background:rgba(255,255,255,.08); }
@media (max-width:640px){
  .moveo-hero{ padding:8px 50px 8px 12px; }
  .moveo-hero .hero-line{ gap:7px;font-size:12px;flex-wrap:wrap;justify-content:center; }
  .moveo-hero .hero-line strong{ font-size:14px; }
  .moveo-hero .hero-line .sep{ display:none; }
  .moveo-hero .hero-line .tag{ font-size:11px; }
}

/* ─── COACH VIDEO INTRO MODAL ─── */
.coach-video-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  background:#000;color:#fff;
  border:none;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:600;
  margin-top:6px;
}
.coach-video-btn:hover{ background:#241F18; }
.coach-video-btn svg{ width:11px;height:11px; }

.video-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:10500;
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.video-modal.on{ opacity:1;pointer-events:auto; }
.video-modal .video-frame{
  position:relative;max-width:520px;width:100%;
  aspect-ratio:9 / 16;background:#000;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 60px -10px rgba(0,0,0,.6);
}
.video-modal video,
.video-modal iframe{ width:100%;height:100%;border:none;display:block; }
.video-modal .video-x{
  position:absolute;top:14px;right:14px;z-index:1;
  background:rgba(0,0,0,.55);color:#fff;border:none;cursor:pointer;
  width:36px;height:36px;border-radius:50%;
  font-size:18px;display:flex;align-items:center;justify-content:center;
}
.video-modal .video-x:hover{ background:rgba(0,0,0,.85); }