/* =========================================================
   OVERLAYS (Tooltips, Onboarding y Etiquetas)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');

/* --- Keyframes --- */
@keyframes ghostFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ghostFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-15px); }
}

/* --- Onboarding (Ayuda visual) --- */
.onboarding-hint {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8);
  background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  color: #fff; padding: 40px 50px; border-radius: 40px; z-index: 5000;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  font-family: 'Caveat', cursive; font-size: 32px; text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0; pointer-events: none; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  letter-spacing: 0.5px;
}

/* Eliminamos el mensaje de scroll por ID para no afectar al del menú */
#scrollOnboardingHint {
  display: none !important;
}

.spotlight-ring {
  position: fixed; z-index: 4999; border: 3px solid #ffc300; border-radius: 50px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4), 0 0 20px #ffc300; pointer-events: none;
  opacity: 0; transition: opacity 0.6s ease;
}
.spotlight-ring.is-visible { opacity: 1; }

.onboarding-hint--menu { top: 100px !important; transform: translate(-50%, 0) scale(0.8) !important; padding: 20px 30px !important; max-width: 300px; }
.onboarding-hint--menu.is-visible { transform: translate(-50%, 0) scale(1) !important; animation: none !important; }

.hint-arrow { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; color: #ffc300; filter: drop-shadow(0 0 5px rgba(0,0,0,0.5)); }

/* --- Tooltips y Ghost Cards --- */
.leaflet-tooltip.ghost-tip {
  background: rgba(20,20,20,.65); color:#fff; border:none; border-radius:10px; padding:10px 12px;
  box-shadow:0 6px 18px rgba(0,0,0,.25); backdrop-filter: blur(4px);
  font:600 12px/1.3 system-ui, Segoe UI, Roboto, Arial; pointer-events:none;
  animation: ghostFade .15s ease;
}

.leaflet-tooltip.ghost-tip:before {
  content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%) rotate(45deg);
  width:10px; height:10px; border-radius:2px; background:rgba(20,20,20,.65); filter:blur(.2px);
}

.leaflet-tooltip.ghost-tip.leaflet-tooltip-bottom:before { bottom:auto; top:-6px; transform:translateX(-50%) rotate(225deg); }

.leaflet-tooltip.ghost-card-tip { background:transparent; border:0; padding:0; box-shadow:none; white-space:normal; }
.leaflet-tooltip.ghost-card-tip .ghost-card { box-sizing: border-box; width: 280px !important; max-width: 280px !important; }

.ghost-card {
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25); overflow:hidden; transition: box-shadow .18s ease, transform .18s ease;
}
.ghost-card:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.32); }

.ghost-card__img { display:block; width:100%; object-fit:cover; background:#f2f2f2; height: 100px; }
.ghost-card__img.is-blank { position:relative; background: repeating-linear-gradient(45deg, #f5f5f5 0 10px, #eee 10px 20px); }
.ghost-card__img.is-blank::before { content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,.12)); }
.ghost-card__img.is-blank::after {
  content:""; position:absolute; inset:auto 0 0; margin:auto; top:0; bottom:0; width:28px; height:28px;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14l4-4h12a2 2 0 0 0 2-2Z"/></svg>') no-repeat center/contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14l4-4h12a2 2 0 0 0 2-2Z"/></svg>') no-repeat center/contain;
  background:#9e9e9e; opacity:.7;
}

.ghost-card__body { padding:10px 12px 12px; }
.ghost-card__kicker { font: 800 12px/1.1 system-ui, Segoe UI, Roboto, Arial; letter-spacing:.2px; color:#111; }
.ghost-card__title { margin-top:4px; font: 800 16px/1.2 system-ui, Segoe UI, Roboto, Arial; color:#111; }
.ghost-card__meta { margin-top:4px; font: 600 14px/1.2 system-ui, Segoe UI, Roboto, Arial; color:#2a2a2a; opacity:.9; }
.ghost-card__divider { height:1px; background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent); margin:8px -12px 8px; }

.meta-row { font:600 13px/1.2 system-ui; color:#505050; opacity:.95 }

/* --- Etiquetas (Labels) --- */
.obra-label { pointer-events: none; width: auto !important; height: auto !important; }
.obra-label__inner {
  position: absolute; transform: translate(var(--lx, 14px), var(--ly, -3px)); white-space: nowrap;
  color:#111 !important; -webkit-text-fill-color:#111 !important;
  text-shadow: -1px 0 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff, -1px -1px 0 #fff, 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff;
  font: 500 11px/1.15 system-ui, Segoe UI, Roboto, Arial; letter-spacing:.1px;
  transition: color .15s ease, -webkit-text-fill-color .15s ease;
}

.obra-label__inner.is-hover { color: var(--pin, #1a73e8); -webkit-text-fill-color: var(--pin, #1a73e8); filter: drop-shadow(0 0 6px rgba(0,0,0,.18)); }
.obra-label__inner.is-hidden { display:none !important; }

@media (max-width:600px) { .obra-label__inner { font-size:11px; } }