:root {
  --bg: #f4f7f5;
  --surface: #ffffff;
  --ink: #14241e;
  --muted: #5a6f66;
  --brand: #1a5f4a;
  --brand-soft: #d8eee4;
  --accent: #c45c26;
  --border: #d5e0db;
  --shadow: 0 8px 24px rgba(20, 36, 30, 0.08);
  --radius: 18px;
  --tap: 56px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, #e8f3ee 0%, var(--bg) 40%);
  -webkit-tap-highlight-color: transparent;
}

#app {
  max-width: 720px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 12px 16px 72px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 16px;
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, #e8f3ee 70%, transparent);
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.brand-mark {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--brand);
  color: white;
  display: grid; place-items: center;
  font-size: 1.4rem;
  box-shadow: var(--shadow);
}
.brand h1 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.subtitle {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.btn-icon {
  min-width: var(--tap);
  min-height: var(--tap);
  border: none;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 1.4rem;
  cursor: pointer;
}
.btn-icon:active { transform: scale(0.97); }

.hidden { display: none !important; }

.search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 4px 8px 4px 18px;
  min-height: var(--tap);
  box-shadow: var(--shadow);
}
.search-wrap:focus-within { border-color: var(--brand); }
.search-icon { font-size: 1.2rem; }
#search {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.05rem;
  background: transparent;
  min-height: 48px;
  width: 100%;
}

.hint {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 14px 4px 10px;
}

.places-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 560px) {
  .places-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.place-card {
  appearance: none;
  border: 2px solid transparent;
  background: var(--surface);
  border-radius: var(--radius);
  min-height: 132px;
  padding: 16px 12px;
  text-align: left;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.place-card:active { transform: scale(0.98); }
.place-card:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
.place-emoji { font-size: 2rem; line-height: 1; }
.place-card strong {
  font-size: 1.05rem;
  line-height: 1.25;
}
.place-card span.cat {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 32px 12px;
}

.place-hero {
  background: var(--surface);
  border-radius: 24px;
  padding: 24px 20px;
  box-shadow: var(--shadow);
  text-align: center;
}
.place-emoji-lg { font-size: 3.2rem; margin-bottom: 8px; }
.place-hero h2 { margin: 0 0 8px; font-size: 1.6rem; }
.chip {
  display: inline-block;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.place-desc {
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.45;
  text-align: left;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 18px 0 12px;
}
.tabs.tabs-4 { grid-template-columns: repeat(4, 1fr); }
.tabs.tabs-5 { grid-template-columns: repeat(5, 1fr); }
.tabs.tabs-3 { grid-template-columns: repeat(3, 1fr); }
.assistant-stub {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
}
.stalls-panel {
  margin-top: 14px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.stalls-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.equal-list li {
  list-style: none;
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--brand-soft);
  font-weight: 500;
}
.equal-list { padding-left: 0; }
.tab {
  min-height: var(--tap);
  border: 2px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.tab.active {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}

.tab-panel {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  line-height: 1.5;
}
.stub-note, .muted { color: var(--muted); font-size: 0.92rem; }
.stub-list { margin: 0; padding-left: 1.2rem; }
.stub-list li { margin: 8px 0; }

.status {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(20, 36, 30, 0.92);
  color: #e8f3ee;
  font-size: 0.85rem;
  text-align: center;
}
.status.ok { background: rgba(26, 95, 74, 0.95); }
.status.err { background: rgba(140, 40, 40, 0.95); }

/* —— Navegación principal / Mensajes (v0.2) —— */
.main-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
.nav-btn {
  min-height: var(--tap);
  border: 2px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
  padding: 8px 6px;
}
.nav-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.threads-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.thread-card {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 2px solid transparent;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  min-height: var(--tap);
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.thread-card:active { transform: scale(0.99); }
.thread-card strong { font-size: 1.05rem; }
.thread-card .preview {
  color: var(--muted);
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  margin-top: 8px;
}
.card-title {
  margin: 0 0 12px;
  font-size: 1.1rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: var(--muted);
}
.field input {
  min-height: var(--tap);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1.05rem;
  color: var(--ink);
  background: #fff;
}
.field input:focus {
  outline: none;
  border-color: var(--brand);
}
.btn-primary {
  min-height: var(--tap);
  width: 100%;
  border: none;
  border-radius: 16px;
  background: var(--brand);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.6; cursor: wait; }
.feedback { margin: 10px 0 0; font-size: 0.9rem; min-height: 1.2em; }

.thread-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding-bottom: 12px;
  max-height: calc(100dvh - 220px);
  overflow-y: auto;
}
.bubble {
  max-width: 85%;
  padding: 12px 14px;
  border-radius: 18px;
  line-height: 1.4;
  box-shadow: var(--shadow);
  word-break: break-word;
}
.bubble.in {
  align-self: flex-start;
  background: var(--surface);
  border-bottom-left-radius: 6px;
}
.bubble.out {
  align-self: flex-end;
  background: var(--brand-soft);
  border-bottom-right-radius: 6px;
}
.bubble .meta {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--muted);
}

.compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  position: sticky;
  bottom: 48px;
  padding-top: 8px;
  background: linear-gradient(180deg, transparent, var(--bg) 30%);
}
.compose input {
  min-height: var(--tap);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 0 14px;
  font-size: 1.05rem;
  background: var(--surface);
}
.compose input:focus {
  outline: none;
  border-color: var(--brand);
}
.btn-send {
  width: auto;
  min-width: 96px;
  padding: 0 18px;
}

#view-messages.view,
#view-thread.view {
  display: flex;
  flex-direction: column;
}
#view-messages.hidden,
#view-thread.hidden {
  display: none !important;
}

/* —— Archivos (v0.3) —— */
.section-title {
  margin: 22px 4px 10px;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.file-send .file-pick input[type="file"] {
  width: 100%;
  font-size: 0.95rem;
  padding: 10px 0;
}
#file-contact {
  width: 100%;
  min-height: var(--tap);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 0 12px;
  font-size: 1.05rem;
  background: var(--surface);
}
#file-contact:focus {
  outline: none;
  border-color: var(--brand);
}
.files-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.file-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.file-card-main strong {
  font-size: 1.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-secondary {
  min-height: 48px;
  padding: 0 16px;
  border: 2px solid var(--brand);
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-secondary:active { transform: scale(0.98); }

#view-files.view {
  display: flex;
  flex-direction: column;
}
#view-files.hidden {
  display: none !important;
}


/* --- Mi casa --- */
.main-nav {
  flex-wrap: wrap;
}
.casa-address {
  font-size: 1.05rem;
  word-break: break-all;
  background: var(--brand-soft);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 8px;
  border: 1px solid var(--border);
}
.casa-address.expired {
  opacity: 0.65;
  text-decoration: line-through;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.small { font-size: 0.85rem; }
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.checkbox-row input { width: 20px; height: 20px; }
.timbre-card, .file-card {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.timbre-card-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
.timbre-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-secondary {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}
.btn-sm { min-height: 36px; padding: 0 10px; font-size: 0.85rem; }
.alarm-row, .aviso-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.aviso-row.seen { opacity: 0.55; }
.reveal-box {
  margin-top: 10px;
  padding: 12px;
  background: #fff6e8;
  border: 1px solid #f0d2a8;
  border-radius: 12px;
}
.section-title {
  margin: 16px 0 8px;
  font-size: 1rem;
}
.card { margin-bottom: 16px; }


/* --- Pucela v0.5 --- */
.pucela-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.pucela-open-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 12px;
}
.pucela-text {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--brand-soft);
  border-radius: 12px;
  padding: 14px;
  margin: 0;
  font-family: inherit;
  line-height: 1.45;
}
.pucela-img {
  max-width: 100%;
  border-radius: 12px;
  display: block;
}
.pucela-audio {
  width: 100%;
}
textarea#pucela-text {
  width: 100%;
  min-height: 120px;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  font: inherit;
  resize: vertical;
}
#view-pucela.hidden { display: none !important; }


.tool-card {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--brand-soft);
}
.tool-card strong { font-size: 1.02rem; }
.tool-status {
  display: inline-block;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}


/* Herramientas v0.7 */
.tool-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border: 2px solid transparent;
}
.tool-card:active, .tool-card:focus {
  border-color: var(--brand);
  outline: none;
}
.tool-card .preview { color: var(--muted, #5a635e); font-size: 0.92rem; }
.tool-frame-view {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 120px);
}
.tool-iframe {
  flex: 1;
  width: 100%;
  min-height: calc(100vh - 130px);
  border: 0;
  background: #141310;
}
.n3d-preview {
  margin-top: 12px;
  overflow: auto;
  border-radius: 12px;
  background: var(--brand-soft);
  padding: 8px;
  text-align: center;
}
.n3d-preview svg { max-width: 100%; height: auto; }
.asistente-log { min-height: 180px; max-height: 40vh; }
.asistente-bubble {
  padding: 10px 12px;
  border-radius: 12px;
  margin: 0 0 8px;
  background: var(--brand-soft);
  white-space: pre-wrap;
}
.asistente-bubble.user { background: var(--surface); border: 1px solid var(--border); }
.stall-link {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#view-tool-frame.hidden,
#view-tool-wiki.hidden,
#view-tool-3d.hidden,
#view-tool-asistente.hidden { display: none !important; }

.assistant-panel {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #1a5f4a) 12%, var(--surface));
  border: 1px solid var(--border);
  text-align: left;
}
.assistant-label { margin: 0 0 6px; font-weight: 600; }
.assistant-panel.hidden, .create-card.hidden, .timbre-opt.hidden, .persona-image.hidden { display: none !important; }
.create-card { margin-top: 12px; }
.persona-image {
  width: 120px; height: 120px; object-fit: cover;
  border-radius: 50%; margin: 0 auto 12px; display: block;
  border: 2px solid var(--border);
}
.timbre-opt { margin-top: 14px; }
#view-shop.hidden, #view-persona.hidden { display: none !important; }


/* Prensa hojas v0.9 */
.hojas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 12px;
}
.hoja-counter {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
}
.hoja-stage {
  min-height: 52vh;
  padding: 18px 16px;
  border-radius: 16px;
  background: #f7f3ea;
  border: 2px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.hoja-stage:focus { outline: 2px solid var(--brand); outline-offset: 2px; }
.hoja-body {
  font-size: 1.05rem;
  line-height: 1.55;
  white-space: pre-wrap;
  color: #1c1a16;
}
.hoja-body img.hoja-img {
  display: block;
  max-width: 100%;
  max-height: 48vh;
  margin: 0 auto;
  border-radius: 8px;
}
.hoja-body audio { width: 100%; margin-top: 8px; }
.hoja-role { margin: 0 0 10px; }
.hoja-stage.role-banner { background: #fff8e6; border-color: #e0c56a; }
.hoja-stage.role-fullpage-ad { background: #eef4ff; border-color: #7a9fd4; }
#view-prensa.hidden { display: none !important; }
#prensa-publish.hidden { display: none !important; }

.dep-code-box {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--brand-soft);
  border: 1px dashed var(--brand);
}

/* —— v1.3 civic map + onboarding —— */
.home-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 8px;
}
.home-hint { margin: 0; flex: 1; min-width: 140px; }
.view-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  box-shadow: var(--shadow);
}
.toggle-btn {
  appearance: none;
  border: none;
  background: transparent;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.toggle-btn.active {
  background: var(--brand);
  color: #fff;
}
.toggle-btn:active { transform: scale(0.97); }

.civic-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  max-height: min(68dvh, 560px);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(160deg, #cfe8dc 0%, #b7d9c8 45%, #a8cfc0 100%);
  border: 2px solid var(--border);
  box-shadow: var(--shadow);
  touch-action: manipulation;
}
.map-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.map-river {
  position: absolute;
  left: 8%;
  top: 8%;
  width: 14%;
  height: 84%;
  border-radius: 40% 60% 55% 45%;
  background: linear-gradient(180deg, rgba(90, 150, 190, 0.45), rgba(70, 130, 170, 0.35));
  transform: rotate(-8deg);
  filter: blur(0.5px);
}
.map-zone {
  position: absolute;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(26, 95, 74, 0.45);
}
.z-norte { top: 6%; left: 42%; }
.z-centro { top: 44%; left: 44%; }
.z-sur { bottom: 8%; left: 44%; }
.z-oeste { top: 40%; left: 6%; }
.z-este { top: 36%; right: 6%; }

.map-pins { position: absolute; inset: 0; }
.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  appearance: none;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: var(--surface);
  border-radius: 16px;
  min-width: 52px;
  max-width: 88px;
  padding: 6px 6px 5px;
  box-shadow: 0 4px 14px rgba(20, 36, 30, 0.18);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 2;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.map-pin:active { transform: translate(-50%, -50%) scale(0.94); }
.map-pin:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  z-index: 5;
}
.map-pin .pin-emoji { font-size: 1.25rem; line-height: 1; }
.map-pin .pin-name {
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: var(--ink);
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-pin.dim { opacity: 0.28; pointer-events: none; }
.map-pin.hit {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft), 0 6px 16px rgba(20, 36, 30, 0.2);
  z-index: 4;
}


/* —— v2.4 Calles jugables —— */
.city-streets {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  max-height: min(68dvh, 560px);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(160deg, #cfe8dc 0%, #b7d9c8 45%, #a8cfc0 100%);
  border: 2px solid var(--border);
  box-shadow: var(--shadow);
  touch-action: none;
  user-select: none;
}
.streets-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.streets-svg .street-edge {
  fill: none;
  stroke: #d9c8a8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
}
.streets-svg .street-edge.w2 { stroke: #e2d2b4; }
.streets-svg .street-edge.w3 { stroke: #eadcc0; }
.streets-svg .street-edge-outline {
  fill: none;
  stroke: rgba(90, 70, 40, 0.22);
  stroke-linecap: round;
}
.street-buildings { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.street-building {
  position: absolute;
  transform: translate(-50%, -50%);
  appearance: none;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: var(--surface);
  border-radius: 14px;
  min-width: 44px;
  max-width: 78px;
  padding: 4px 4px 3px;
  box-shadow: 0 3px 10px rgba(20, 36, 30, 0.16);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  pointer-events: auto;
  transition: box-shadow 0.12s ease, transform 0.12s ease, border-color 0.12s ease;
}
.street-building .pin-emoji { font-size: 1.05rem; line-height: 1; }
.street-building .pin-name {
  font-size: 0.52rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.street-building.near {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft), 0 6px 16px rgba(20, 36, 30, 0.2);
  z-index: 4;
  transform: translate(-50%, -50%) scale(1.06);
}
.street-building.dim { opacity: 0.3; pointer-events: none; }
.player-avatar {
  position: absolute;
  z-index: 6;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  margin-top: -18px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(20, 36, 30, 0.35);
  pointer-events: none;
  left: 50%;
  top: 46%;
  will-change: left, top, transform;
  transform: rotate(var(--facing, 0deg));
}
.player-avatar .player-emoji {
  display: block;
  line-height: 1;
  transform: rotate(calc(-1 * var(--facing, 0deg))); /* keep glyph upright */
}
.player-avatar .player-facing {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid #f4e27a;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.street-label {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 5;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  max-width: 86%;
  text-align: center;
  pointer-events: none;
  box-shadow: var(--shadow);
}
.dpad {
  position: absolute;
  right: 10px;
  bottom: 48px;
  z-index: 7;
  width: 132px;
  height: 132px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 4px;
  touch-action: manipulation;
}
.dpad-btn {
  appearance: none;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(26, 95, 74, 0.88);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 16px;
  min-width: 40px;
  min-height: 40px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(20, 36, 30, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.dpad-btn:active, .dpad-btn.held {
  background: rgba(20, 70, 55, 0.95);
  transform: scale(0.94);
}
.dpad-up { grid-column: 2; grid-row: 1; }
.dpad-left { grid-column: 1; grid-row: 2; }
.dpad-center { grid-column: 2; grid-row: 2; background: rgba(180, 90, 40, 0.9); font-size: 0.95rem; }
.dpad-right { grid-column: 3; grid-row: 2; }
.dpad-down { grid-column: 2; grid-row: 3; }

@media (max-width: 420px) {
  .civic-map, .city-streets { aspect-ratio: 1 / 1.12; max-height: min(62dvh, 480px); }
  .map-pin { min-width: 46px; max-width: 72px; padding: 5px 4px 4px; border-radius: 14px; }
  .map-pin .pin-emoji { font-size: 1.1rem; }
  .map-pin .pin-name { font-size: 0.56rem; max-width: 64px; }
  .dpad { width: 148px; height: 148px; right: 6px; bottom: 44px; }
  .dpad-btn { min-width: 44px; min-height: 44px; border-radius: 18px; font-size: 1.15rem; }
  .street-building { min-width: 40px; max-width: 68px; }
}

body.kiosk-mode .dpad-btn {
  min-width: 48px;
  min-height: 48px;
}


.onboarding {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 36, 30, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.onboarding-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border-radius: 24px 24px 20px 20px;
  padding: 22px 20px 18px;
  box-shadow: 0 16px 40px rgba(20, 36, 30, 0.25);
  max-height: min(88dvh, 640px);
  overflow: auto;
}
.onboarding-sheet h2 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.onb-lead {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.95rem;
}
.onb-tips {
  margin: 0 0 18px;
  padding: 0 0 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.4;
  font-size: 0.95rem;
}
.onb-tips li strong { color: var(--brand); }
.onb-foot { margin: 12px 0 0; text-align: center; }
.onboarding .btn-primary { width: 100%; min-height: var(--tap); }

.places-grid.with-map-mode { margin-top: 12px; }


/* Mostrador de gestiones (v1.4) — desk / queue metaphor */
.mostrador-panel { margin-top: 8px; }
.mostrador-desk {
  margin: 8px 0 14px;
  display: flex;
  justify-content: center;
}
.desk-counter {
  width: 100%;
  max-width: 340px;
  background: linear-gradient(180deg, #2a6b55 0%, #1a5f4a 55%, #134536 100%);
  color: #f3faf6;
  border-radius: 16px 16px 8px 8px;
  padding: 14px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 0 #0d2f25, 0 12px 20px rgba(20, 36, 30, 0.25);
  border: 2px solid #3d8a6e;
}
.desk-lamp { font-size: 1.25rem; }
.desk-label {
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
}
.desk-ticket-slot {
  background: #f7f3e8;
  color: #1a5f4a;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 1rem;
  box-shadow: inset 0 0 0 1px #d4c9a8;
}
.tramite-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tramite-list li {
  background: var(--surface);
  border: 1.5px solid var(--border, #c5d5cc);
  border-radius: 14px;
  padding: 12px 14px;
  min-height: var(--tap);
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tramite-list li:active { transform: scale(0.98); background: #eef6f2; }
.tramite-list li strong { font-size: 1rem; color: var(--brand); }
.tramite-list li span { font-size: 0.85rem; color: var(--muted); line-height: 1.35; }
.tramite-list .chip-stub {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fff3d6;
  color: #8a5a00;
  padding: 2px 8px;
  border-radius: 999px;
}
.mostrador-form-title { margin: 10px 0 4px; font-size: 1.1rem; }
.mostrador-form .field { margin-bottom: 10px; }
.btn-compact { min-height: 40px; padding: 8px 12px; font-size: 0.9rem; margin-bottom: 8px; }
.tip-list { margin-top: 8px; font-size: 0.88rem; }
.ticket-card {
  background: repeating-linear-gradient(
    -2deg,
    #fffdf6,
    #fffdf6 12px,
    #f7f0dc 12px,
    #f7f0dc 13px
  );
  border: 2px dashed #c4a35a;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin: 8px 0 12px;
  box-shadow: 0 4px 0 rgba(196, 163, 90, 0.25);
}
.ticket-stamp {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #a67c2d;
}
.ticket-id {
  margin: 8px 0 4px;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #1a5f4a;
  font-variant-numeric: tabular-nums;
}
.ticket-title { margin: 0 0 6px; font-weight: 700; }
.ticket-status {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e3f4ec;
  color: #1a5f4a;
  font-size: 0.85rem;
  font-weight: 700;
}
.ticket-note { margin: 0; font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.row-actions .btn-primary,
.row-actions .btn-secondary { flex: 1 1 140px; }
.mostrador-queue { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border, #c5d5cc); }
.queue-title { margin: 0 0 8px; font-size: 0.95rem; }
.solicitud-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px !important;
  cursor: pointer;
}
.solicitud-row .sol-ticket { font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.solicitud-row .sol-meta { font-size: 0.82rem; color: var(--muted); }


/* Panel del nodo (v1.5) */
.nodo-dl {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}
.nodo-dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.nodo-dl dt {
  font-weight: 600;
  color: var(--muted, #5a6b63);
}
.nodo-dl dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  text-align: right;
}
.warn-secret {
  background: rgba(180, 80, 20, 0.12);
  border-left: 3px solid #b45014;
  padding: 8px 10px;
  border-radius: 6px;
}
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
}
.check-row input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.btn-danger {
  background: #8b2e2e !important;
}
.footer-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  padding: 4px 10px;
  margin-right: 8px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 36px;
}
.footer-link:active { opacity: 0.85; }
footer.status {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* --- Campana de avisos (v1.6) --- */
.btn-campana {
  position: relative;
  margin-left: auto;
  min-width: var(--tap);
  min-height: var(--tap);
  border: none;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 1.35rem;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-campana:active { transform: scale(0.97); }
.btn-campana.has-unread {
  background: var(--brand-soft);
  outline: 2px solid var(--brand);
}
.campana-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(196, 92, 38, 0.45);
}
.campana-sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.campana-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 36, 30, 0.35);
}
.campana-panel {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: min(78dvh, 640px);
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 32px rgba(20, 36, 30, 0.18);
  padding: 14px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.campana-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.campana-head h2 {
  margin: 0;
  flex: 1 1 auto;
  font-size: 1.2rem;
}
.campana-hint { margin: 0; }
.campana-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.campana-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fbfefc;
  padding: 12px 14px;
  min-height: var(--tap);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.campana-item:active { transform: scale(0.99); background: var(--brand-soft); }
.campana-item.unread {
  border-color: var(--brand);
  background: #eef8f3;
  box-shadow: inset 3px 0 0 var(--brand);
}
.campana-item .campana-item-title {
  font-weight: 700;
  font-size: 0.98rem;
}
.campana-item .campana-item-body {
  color: var(--muted);
  font-size: 0.88rem;
}
.campana-item .campana-item-meta {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* —— v1.7 kiosk + novedades —— */
body.kiosk-mode {
  --tap: 72px;
  font-size: 1.05rem;
}
body.kiosk-mode .place-card,
body.kiosk-mode .nav-btn,
body.kiosk-mode .map-pin,
body.kiosk-mode .btn-primary,
body.kiosk-mode .btn-secondary {
  min-height: var(--tap);
}
body.kiosk-mode .map-pin {
  width: 52px;
  height: 52px;
  font-size: 1.35rem;
}
body.kiosk-mode .kiosk-operator { display: none !important; }
.kiosk-only { display: none !important; }
body.kiosk-mode .kiosk-only:not(.hidden) { display: inline-flex !important; align-items: center; }

.btn-hold {
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.btn-hold::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--hold-pct, 0%);
  background: rgba(26, 95, 74, 0.25);
  pointer-events: none;
  transition: width 0.05s linear;
}

.kiosk-fs-hint {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--brand-soft);
  border: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.kiosk-fs-hint p { margin: 0; flex: 1 1 200px; font-size: 0.95rem; }
.btn-sm { min-height: 40px; padding: 0 12px; font-size: 0.9rem; }

.novedades-list { display: flex; flex-direction: column; gap: 12px; }
.novedades-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
}
.novedades-card h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}
.novedades-ver {
  color: var(--brand);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-right: 8px;
}
.novedades-card ul {
  margin: 8px 0 0;
  padding-left: 1.2em;
}
.novedades-card li { margin: 4px 0; }
.novedades-card.current {
  border-color: var(--brand);
  background: #f2faf6;
}
.small { font-size: 0.85rem; }

/* --- Privacidad chat / pistas de alcance (v2.3) --- */
.field select {
  min-height: var(--tap);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1.05rem;
  color: var(--ink);
  background: #fff;
}
.field select:focus {
  outline: none;
  border-color: var(--brand);
}
.privacy-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.privacy-mode {
  appearance: none;
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  text-align: left;
  min-height: var(--tap);
  cursor: pointer;
  color: var(--ink);
}
.privacy-mode.active {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.privacy-mode strong { display: block; font-size: 0.98rem; }
.privacy-mode span {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.3;
}
.privacy-status {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--brand-soft);
  font-size: 0.95rem;
}
.privacy-status.expired { background: #fde7d4; }
.reach-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.reach-fresca { background: #d1fae5; color: #065f46; }
.reach-caducada { background: #fef3c7; color: #92400e; }
.reach-desconocida { background: #e5e7eb; color: #374151; }
.contacts-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* —— v2.5 especiales ciudad: día/noche, HUD, eventos, sellos —— */
.city-hud {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.hud-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
.hud-chip:active { transform: scale(0.97); }

.event-toast {
  position: relative;
  z-index: 8;
  margin: 0 0 10px;
}
.event-toast-inner {
  background: var(--surface);
  border: 2px solid var(--brand);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.event-toast-inner strong { display: block; margin-bottom: 4px; }
.event-toast-inner p { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.35; }
.event-toast-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.street-windows {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.street-windows .win {
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 1px;
  background: #ffd58a;
  box-shadow: 0 0 6px rgba(255, 200, 100, 0.75);
  opacity: 0.85;
}

/* Day / dusk / night on Calles + Mapa */
.city-streets.tod-dia,
.civic-map.tod-dia {
  background: linear-gradient(160deg, #cfe8dc 0%, #b7d9c8 45%, #a8cfc0 100%);
}
.city-streets.tod-atardecer,
.civic-map.tod-atardecer {
  background: linear-gradient(160deg, #f0c9a0 0%, #d9a87a 40%, #8fa8b8 100%);
}
.city-streets.tod-atardecer .streets-svg .street-edge,
.civic-map.tod-atardecer .map-pin {
  filter: saturate(0.95) brightness(0.96);
}
.city-streets.tod-noche,
.civic-map.tod-noche {
  background: linear-gradient(160deg, #1a2433 0%, #243044 45%, #2a3548 100%);
}
.city-streets.tod-noche .streets-svg .street-edge {
  stroke: #4a5568;
  opacity: 0.9;
}
.city-streets.tod-noche .streets-svg .street-edge.w2 { stroke: #5a6578; }
.city-streets.tod-noche .streets-svg .street-edge.w3 { stroke: #6a7588; }
.city-streets.tod-noche .streets-svg .street-edge-outline {
  stroke: rgba(10, 14, 22, 0.55);
}
.city-streets.tod-noche .map-zone,
.civic-map.tod-noche .map-zone {
  color: rgba(220, 230, 245, 0.45);
}
.city-streets.tod-noche .map-river,
.civic-map.tod-noche .map-river {
  opacity: 0.55;
  filter: brightness(0.7);
}
.city-streets.tod-noche .street-building {
  background: #2c3545;
  border-color: rgba(255, 210, 140, 0.35);
  color: #e8eef8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 200, 120, 0.12);
}
.city-streets.tod-noche .street-building .pin-name { color: #d8e0f0; }
.city-streets.tod-noche .street-building.near {
  border-color: #ffc978;
  box-shadow: 0 0 0 3px rgba(255, 200, 120, 0.35), 0 6px 16px rgba(0, 0, 0, 0.4);
}
.city-streets.tod-noche .street-label {
  background: rgba(30, 38, 52, 0.92);
  color: #e8eef8;
  border-color: rgba(255, 255, 255, 0.12);
}
.city-streets.tod-noche .street-windows { opacity: 1; }
.civic-map.tod-noche .map-pin {
  background: #2c3545;
  border-color: rgba(255, 210, 140, 0.4);
  color: #e8eef8;
}
.civic-map.tod-noche .map-windows { opacity: 1; }
.city-streets.tod-atardecer .street-windows { opacity: 0.35; }

.sellos-album {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.sello-card {
  appearance: none;
  border: 2px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  min-height: 96px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
.sello-card .sello-emoji { font-size: 1.6rem; line-height: 1; }
.sello-card .sello-name { font-size: 0.78rem; font-weight: 700; line-height: 1.2; }
.sello-card .sello-meta { font-size: 0.68rem; color: var(--muted, #667); }
.sello-card.missing {
  opacity: 0.55;
  border-style: dashed;
  filter: grayscale(0.35);
}
.sello-card.collected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-soft), var(--shadow);
}
.sello-card.collected::after {
  content: "✓";
  position: absolute;
  /* keep simple without absolute parent issues */
}
.sello-stamp-mark {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* —— v2.6 bici, misiones, viñeta —— */
.hud-chip.active-bike {
  border-color: var(--brand);
  background: var(--brand-soft, #e8f5ee);
}
.player-avatar.bike-mode {
  filter: drop-shadow(0 2px 4px rgba(0, 80, 40, 0.35));
  transform: translate(-50%, -50%) scale(1.08);
}

.place-vignette {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 18, 28, 0.55);
  backdrop-filter: blur(4px);
}
.place-vignette.hidden { display: none; }
.vignette-card {
  width: min(420px, 100%);
  background: var(--surface);
  border-radius: 20px;
  padding: 22px 20px 18px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  border: 2px solid var(--brand);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.vignette-emoji { font-size: 3rem; line-height: 1; }
.vignette-card h2 { margin: 0; font-size: 1.35rem; }
.vignette-flavor {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--muted, #556);
}
.vignette-skip-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--muted, #667);
  margin-top: 4px;
  cursor: pointer;
}
.vignette-card .btn-primary,
.vignette-card .btn-secondary { min-width: 140px; }

.mision-card {
  appearance: none;
  border: 2px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 12px 12px;
  text-align: left;
  cursor: pointer;
  min-height: 110px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
.mision-card .mision-title { font-size: 0.9rem; font-weight: 800; }
.mision-card .mision-body { font-size: 0.75rem; color: var(--muted, #667); line-height: 1.3; }
.mision-card .mision-prog { font-size: 0.78rem; font-weight: 700; }
.mision-card.done {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-soft), var(--shadow);
}
.mision-card .mision-badge {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--brand);
}
.misiones-badges { margin-top: 12px; }


/* —— v2.7 clima ambient, nombres de calle, día de mercado —— */
.street-name-chip {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
  max-width: 78%;
  text-align: center;
  pointer-events: none;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity 0.28s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.street-name-chip.visible { opacity: 1; }
.city-streets.tod-noche .street-name-chip {
  background: rgba(24, 32, 46, 0.9);
  color: #e8eef8;
  border-color: rgba(255, 255, 255, 0.14);
}

.clima-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.clima-sun {
  position: absolute;
  top: 6%;
  right: 10%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7c2 0%, #ffd56a 45%, rgba(255, 180, 70, 0.15) 70%, transparent 72%);
  box-shadow: 0 0 28px 10px rgba(255, 210, 110, 0.35);
  opacity: 0;
  transition: opacity 0.8s ease;
}
.clima-cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 40px;
  filter: blur(1px);
  opacity: 0;
  transition: opacity 0.8s ease;
}
.clima-cloud.c1 { width: 72px; height: 22px; top: 10%; left: 8%; animation: cloud-drift 28s linear infinite; }
.clima-cloud.c2 { width: 96px; height: 26px; top: 18%; left: 38%; animation: cloud-drift 36s linear infinite reverse; }
.clima-cloud.c3 { width: 64px; height: 18px; top: 8%; left: 62%; animation: cloud-drift 32s linear infinite; }
@keyframes cloud-drift {
  0% { transform: translateX(0); }
  50% { transform: translateX(18px); }
  100% { transform: translateX(0); }
}

.clima-rain {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.clima-rain .drop {
  position: absolute;
  top: -12%;
  width: 1.5px;
  height: 12px;
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(210, 230, 245, 0), rgba(190, 215, 235, 0.7));
  animation: rain-drop 0.85s linear infinite;
}
@keyframes rain-drop {
  from { transform: translateY(0); opacity: 0.7; }
  to { transform: translateY(130%); opacity: 0; }
}

/* sky tints compose with tod-* backgrounds */
.city-streets.clima-sol .clima-sun { opacity: 0.95; }
.city-streets.clima-sol { box-shadow: inset 0 0 60px rgba(255, 220, 140, 0.18), var(--shadow); }
.city-streets.clima-nubes .clima-cloud { opacity: 0.85; }
.city-streets.clima-nubes {
  filter: saturate(0.92);
}
.city-streets.clima-nubes .clima-sun { opacity: 0.2; }
.city-streets.clima-lluvia .clima-cloud { opacity: 0.7; }
.city-streets.clima-lluvia .clima-rain { opacity: 1; }
.city-streets.clima-lluvia {
  box-shadow: inset 0 0 80px rgba(40, 70, 100, 0.12), var(--shadow);
}

/* night: mute the sun, keep rain/clouds readable */
.city-streets.tod-noche.clima-sol .clima-sun {
  opacity: 0.22;
  background: radial-gradient(circle at 35% 35%, #eef2ff 0%, #c5d0ea 50%, transparent 72%);
  box-shadow: 0 0 20px 6px rgba(180, 200, 230, 0.2);
}
.city-streets.tod-noche .clima-cloud {
  background: rgba(160, 180, 210, 0.28);
}
.city-streets.tod-noche.clima-lluvia .clima-rain .drop {
  background: linear-gradient(180deg, rgba(180, 200, 230, 0), rgba(200, 220, 245, 0.55));
}
.city-streets.tod-atardecer.clima-sol .clima-sun {
  background: radial-gradient(circle at 35% 35%, #ffe0b0 0%, #ff9a5c 50%, transparent 72%);
}

.hud-chip.clima-lluvia-chip {
  border-color: #7aa0c4;
}


/* —— v2.8 paradas / bancos / luces —— */
.street-pois {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.street-poi {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.75);
  background: rgba(40, 70, 110, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  pointer-events: auto;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.street-poi.banco {
  background: rgba(90, 70, 40, 0.88);
  border-radius: 8px;
}
.street-poi.near {
  box-shadow: 0 0 0 3px rgba(255, 200, 120, 0.45), 0 4px 12px rgba(0,0,0,0.35);
  transform: translate(-50%, -50%) scale(1.12);
}
.city-streets.tod-noche .street-poi {
  border-color: rgba(255, 220, 160, 0.55);
}
.civic-action {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 6;
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 0.92rem;
  background: rgba(180, 90, 40, 0.95);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  cursor: pointer;
  max-width: 90%;
  white-space: nowrap;
}
.civic-action.hidden { display: none; }
.civic-action:active { transform: translateX(-50%) scale(0.97); }
.player-avatar.sitting {
  filter: saturate(0.9);
  transform: translate(-50%, -40%) scale(0.92);
  transition: transform 0.25s ease;
}
.city-streets.tod-noche .street-building {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35),
    0 0 14px rgba(255, 190, 100, 0.22),
    inset 0 0 0 1px rgba(255, 200, 120, 0.18);
}
.city-streets.tod-noche .street-building::after {
  content: "";
  position: absolute;
  inset: 4px 6px auto auto;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: #ffd58a;
  box-shadow: 0 0 6px rgba(255, 200, 100, 0.85);
  opacity: 0.9;
  pointer-events: none;
}
.city-streets.tod-dia .street-building::after { display: none; }
.street-windows .win {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.line-picker {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(20, 24, 32, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}
.line-picker.hidden { display: none; }
.line-picker-card {
  background: var(--surface, #fff);
  color: var(--text, #222);
  border-radius: 20px 20px 16px 16px;
  padding: 18px 16px 16px;
  width: min(420px, 100%);
  max-height: min(70vh, 520px);
  overflow: auto;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.25);
}
.line-picker-card h2 { margin: 0 0 6px; font-size: 1.15rem; }
.line-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 14px;
}
.line-picker-item {
  appearance: none;
  text-align: left;
  border: 2px solid var(--border, #ddd);
  background: var(--surface, #fff);
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
}
.line-picker-item:active { transform: scale(0.98); }
.line-picker-item .meta { font-weight: 500; font-size: 0.8rem; color: var(--muted, #667); }
.hud-chip.line-active {
  background: rgba(40, 70, 110, 0.18);
  border-color: rgba(40, 70, 110, 0.35);
}

/* —— v2.9 vistas / ruta / capas —— */
.streets-stage {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transition: none; /* la cámara sigue al avatar cada frame; animar = “zoom con el muñeco” */
  will-change: transform;
}
.city-streets {
  perspective: 900px;
}
.city-streets.vista-planta .streets-stage {
  transform: none;
}
.city-streets.vista-inclinada .streets-stage {
  transform: rotateX(28deg) scale(1.08) translateY(-2%);
  transform-origin: 50% 85%;
}
.city-streets.vista-mirador .streets-stage {
  transform: scale(0.52);
  transform-origin: 50% 50%;
}
.city-streets.vista-mirador.route-follow-on .streets-stage,
.city-streets.route-follow-on:not(.vista-mirador) .streets-stage {
  /* follow camera overrides applied via inline style when active */
}
.city-streets.vista-inclinada.route-follow-on .streets-stage {
  transform-origin: 50% 85%;
}

.streets-svg .route-line {
  fill: none;
  stroke: #c45c26;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2.2 1.6;
  opacity: 0.95;
  filter: drop-shadow(0 0 0.4px rgba(255,255,255,0.8));
}
.streets-svg .route-line-outline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-dasharray: 2.2 1.6;
  opacity: 0.9;
}
.streets-svg .route-marker {
  fill: #c45c26;
  stroke: #fff;
  stroke-width: 0.35;
}

.route-banner {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  z-index: 8;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  pointer-events: auto;
}
.route-banner.hidden { display: none; }
.route-tip {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
}
.route-meta {
  margin: 0 0 8px;
  font-size: 0.75rem;
  color: var(--muted, #5a6b62);
}
.route-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.route-follow-label {
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.civic-sheet {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(20, 36, 30, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}
.civic-sheet.hidden { display: none; }
.civic-sheet-card {
  width: min(440px, 100%);
  max-height: min(78dvh, 640px);
  overflow: auto;
  background: var(--surface);
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 18px 16px 16px;
}
.civic-sheet-card h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}
.vista-choices {
  display: grid;
  gap: 8px;
  margin: 12px 0 16px;
}
.vista-choice {
  appearance: none;
  border: 2px solid var(--border);
  background: var(--bg, #f4f7f5);
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}
.vista-choice.active {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 2px var(--brand-soft);
}
.ruta-panel-tabs {
  display: flex;
  gap: 6px;
  margin: 10px 0 12px;
}
.ruta-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 42dvh;
  overflow: auto;
  margin-bottom: 12px;
}
.ruta-list-item {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg, #f4f7f5);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
}
.ruta-list-item:active { transform: scale(0.98); }
.ruta-list-item .meta {
  font-size: 0.72rem;
  color: var(--muted, #5a6b62);
}
.field-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.field-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 1rem;
  margin-bottom: 10px;
  background: var(--surface);
}
.capas-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 16px;
}
.capas-list li {
  margin: 0 0 8px;
}
.capas-list label {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 600;
  font-size: 0.95rem;
  min-height: 44px;
  padding: 4px 2px;
}

/* Capas toggles */
.city-streets.capa-off-paradas .street-poi.parada { display: none; }
.city-streets.capa-off-bancos .street-poi.banco { display: none; }
.city-streets.capa-off-clima .clima-sky,
.city-streets.capa-off-clima .clima-rain { display: none !important; }
.city-streets.capa-off-sellos .street-building.stamped .pin-stamp { display: none; }
.city-streets.capa-off-misiones .street-building.mission-target {
  box-shadow: 0 3px 10px rgba(20, 36, 30, 0.16);
  outline: none;
}
.street-building .pin-stamp {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 0.65rem;
  background: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.street-building.stamped {
  border-color: rgba(26, 95, 74, 0.55);
}
.street-building.mission-target {
  outline: 2px dashed rgba(196, 92, 38, 0.85);
  outline-offset: 2px;
}
.city-streets.capa-off-misiones .street-building.mission-target {
  outline: none;
}

.hud-chip.vista-active,
.hud-chip.ruta-active,
.hud-chip.capas-active {
  background: var(--brand-soft);
  border-color: var(--brand);
}

#btn-ir-aqui {
  margin-top: 8px;
}

.city-streets.tod-noche .route-banner {
  background: rgba(28, 34, 48, 0.94);
  color: #e8eef8;
  border-color: rgba(120, 140, 180, 0.35);
}
.city-streets.tod-noche .route-tip { color: #e8eef8; }
.city-streets.tod-noche .route-meta { color: #a8b4c8; }


/* —— v3.0 brújula / mini-mapa / pasos / favoritos —— */
.hud-brujula {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 3.2rem;
}
.brujula-dial {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: rgba(255,255,255,0.55);
  flex-shrink: 0;
  transform: rotate(var(--brujula-rot, 0deg));
  transition: transform 0.18s ease-out;
}
.brujula-needle {
  position: absolute;
  left: 50%;
  top: 3px;
  width: 2px;
  height: 8px;
  margin-left: -1px;
  background: #c0392b;
  border-radius: 1px;
}
.brujula-n {
  position: absolute;
  left: 50%;
  top: 1px;
  transform: translateX(-50%);
  font-size: 0.45rem;
  font-weight: 800;
  color: #c0392b;
  line-height: 1;
  opacity: 0; /* needle is enough; N on dial optional */
}
.hud-chip.brujula-active,
.hud-chip.favoritos-active {
  background: var(--brand-soft);
  border-color: var(--brand);
}

.orient-choices {
  margin-bottom: 4px;
}
.orient-choice {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  min-height: 44px;
}
.orient-choice.active {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--ink);
}

.mini-mapa {
  position: absolute;
  left: 10px;
  bottom: 56px;
  z-index: 8;
  width: 112px;
  height: 112px;
  padding: 0;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,0.95);
  background: rgba(232, 243, 238, 0.94);
  box-shadow: 0 4px 16px rgba(20, 36, 30, 0.28);
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
}
.mini-mapa.hidden { display: none; }
.mini-mapa-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.mini-mapa-label {
  position: absolute;
  left: 6px;
  bottom: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--ink);
  background: rgba(255,255,255,0.75);
  padding: 1px 5px;
  border-radius: 6px;
  pointer-events: none;
}
.mini-mapa-svg .mm-edge {
  stroke: rgba(26, 95, 74, 0.45);
  stroke-width: 1.1;
}
.mini-mapa-svg .mm-route {
  fill: none;
  stroke: #c45c26;
  stroke-width: 1.6;
  stroke-dasharray: 2.4 1.8;
  stroke-linecap: round;
}
.mini-mapa-svg .mm-avatar {
  fill: var(--brand, #1a5f4a);
  stroke: #fff;
  stroke-width: 0.8;
}
.mini-mapa-svg .mm-facing {
  fill: #f4e27a;
  stroke: rgba(0,0,0,0.25);
  stroke-width: 0.3;
}

.pasos-sheet {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 9;
  max-height: min(42vh, 320px);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  border-radius: 18px 18px 14px 14px;
  box-shadow: 0 -4px 24px rgba(20, 36, 30, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: pan-y;
}
.pasos-sheet.hidden { display: none; }
.pasos-handle {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(20, 36, 30, 0.22);
  margin: 8px auto 0;
  flex-shrink: 0;
}
.pasos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 6px;
}
.pasos-head h3 {
  margin: 0;
  font-size: 0.95rem;
}
.pasos-list {
  list-style: none;
  margin: 0;
  padding: 0 8px 12px;
  overflow: auto;
  flex: 1;
}
.pasos-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: start;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  margin-bottom: 4px;
}
.pasos-list li .paso-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(26, 95, 74, 0.12);
  color: var(--brand);
  font-weight: 800;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pasos-list li .paso-text {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--ink);
}
.pasos-list li .paso-street {
  display: block;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--muted, #5a6b62);
  margin-top: 2px;
}
.pasos-list li.current {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.pasos-list li.done {
  opacity: 0.55;
}
.pasos-list li.done .paso-num {
  background: rgba(26, 95, 74, 0.28);
}

.place-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
#btn-ir-aqui { margin-top: 0; }
#btn-favorito.fav-on {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--ink);
}

.city-streets.tod-noche .mini-mapa {
  background: rgba(28, 34, 48, 0.94);
  border-color: rgba(120, 140, 180, 0.45);
}
.city-streets.tod-noche .mini-mapa-label {
  color: #e8eef8;
  background: rgba(20, 24, 36, 0.7);
}
.city-streets.tod-noche .pasos-sheet {
  background: rgba(28, 34, 48, 0.96);
  color: #e8eef8;
  border-color: rgba(120, 140, 180, 0.35);
}
.city-streets.tod-noche .pasos-list li .paso-text { color: #e8eef8; }
.city-streets.tod-noche .pasos-list li .paso-street { color: #a8b4c8; }
.city-streets.tod-noche .pasos-list li.current {
  background: rgba(60, 90, 130, 0.35);
  border-color: rgba(140, 170, 220, 0.5);
}


/* —— v3.1 VitaInk optional game layer —— */
.hud-chip.vitaink-chip.vitaink-active {
  background: linear-gradient(135deg, #7c3aed33, #0ea5e933);
  border-color: #7c3aed;
  color: #4c1d95;
  font-weight: 600;
}
.city-streets.capa-vitaink-on {
  box-shadow: inset 0 0 80px rgba(124, 58, 237, 0.12), var(--shadow);
}
.city-streets.capa-vitaink-on::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(160deg, rgba(124, 58, 237, 0.07), rgba(14, 165, 233, 0.05));
  border-radius: inherit;
}
.street-building.vitaink-owned {
  box-shadow: 0 0 0 2px var(--vita-color, #94a3b8);
}
.street-building .pin-vitaink {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  font-size: 0.7rem;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}
.capas-note {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  color: var(--muted, #5a6a64);
  background: #f3eefc;
  border-radius: 8px;
}
.vitaink-sede-card {
  margin: 0.75rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--vita-color, #7c3aed) 55%, #ccc);
  background: linear-gradient(135deg, color-mix(in srgb, var(--vita-color, #7c3aed) 12%, #fff), #faf8ff);
}
.vitaink-sede-card.hidden { display: none; }
.vitaink-sede-card header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}
.vitaink-sede-card .vitaink-virtual {
  margin-left: auto;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7c3aed;
  opacity: 0.85;
}
.vitaink-owner { margin: 0.2rem 0; font-size: 0.95rem; }
.vitaink-coins { margin: 0.15rem 0; font-size: 0.9rem; color: #4b5563; }
.vitaink-dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.vitaink-claim-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
  align-items: center;
}
.vitaink-claim-row.hidden { display: none; }
.vitaink-claim-row select,
.vitaink-claim-row input {
  font: inherit;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  border: 1px solid #c5cdd6;
  max-width: 100%;
}
.vitaink-claim-row input { width: 7.5rem; }

/* —— v3.2 VitaInk personaje / avatar stub / casas virtuales —— */
.street-vitaink-casas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.street-vitaink-casas .vita-casa-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  border: 2px dashed var(--vita-color, #7c3aed);
  background: color-mix(in srgb, var(--vita-color, #7c3aed) 18%, #fff);
  border-radius: 10px;
  padding: 0.2rem 0.35rem;
  font-size: 0.7rem;
  line-height: 1.15;
  min-width: 2.4rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(80, 40, 120, 0.18);
  cursor: pointer;
  color: inherit;
}
.street-vitaink-casas .vita-casa-pin .pin-emoji { display: block; font-size: 1rem; }
.street-vitaink-casas .vita-casa-pin .pin-name {
  display: block;
  max-width: 5.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.city-streets:not(.capa-vitaink-on) .street-vitaink-casas { display: none; }

.vitaink-pj-card { max-width: 34rem; }

/* —— v5.15 selector rostros Mari lote1 —— */
.vitaink-face-kit {
  display: grid;
  grid-template-columns: minmax(9rem, 11rem) 1fr;
  gap: 0.75rem 1rem;
  align-items: start;
  margin: 0.5rem 0 0.85rem;
  padding: 0.75rem;
  border-radius: 14px;
  background: linear-gradient(160deg, #fff7ed, #f0f9ff 55%, #faf5ff);
  border: 1px solid #fdba74;
}
.vitaink-face-preview-wrap, .vitaink-face-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
#vitaink-face-canvas {
  /* v5.17: preview rostros+silueta 512×768 (body-shapes clothed) */
  width: 100%;
  max-width: 11rem;
  height: auto;
  aspect-ratio: 512 / 768;
  border-radius: 12px;
  background: #1c1917;
  border: 2px solid #fb923c;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.18);
  object-fit: contain;
  display: block;
}
.vitaink-face-combo {
  margin: 0;
  font-size: 0.68rem;
  text-align: center;
  color: #9a3412;
}
.vitaink-face-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.5rem;
}
.vitaink-face-controls .face-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  font-size: 0.78rem;
}
.vitaink-face-controls .face-field span {
  color: #78716c;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.vitaink-face-controls select {
  font-size: 0.8rem;
  padding: 0.25rem 0.35rem;
  border-radius: 8px;
  border: 1px solid #d6d3d1;
  background: #fff;
}
.vitaink-face-controls .face-field-hair select, .face-field-hair select {
  opacity: 0.65;
  cursor: not-allowed;
}
.vitaink-puppet-mini, .vitaink-puppet-mini { margin-top: 0.35rem; }
.vitaink-puppet .puppet-slot.head.has-face,
.vitaink-puppet .puppet-slot.head.has-face {
  overflow: hidden;
  padding: 0;
  border-style: solid;
  border-color: #fb923c;
  background: #fff;
}
.vitaink-puppet .puppet-slot.head.has-face span,
.vitaink-puppet .puppet-slot.head.has-face span { display: none; }
#vitaink-puppet-face {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
/* —— v5.16 cara en cuerpo avatar (Calles) ——
   Pack Mari faces/on-body: capas pre-registradas en canvas cuerpo.
   Front 512×768 (cover→shape_skinned→brows→eyes→nose→mouth); top 1280×720 (solo crown).
   Pack catalog 1.1.0-on-body · anclas front scale 0.4 dest (153,42).
   Fallback CSS: cabeza ~y 8%–28% del avatar, cx 50%.
   Encarnar maestro: se oculta (el pack day/ del maestro manda). */
.player-face-on-body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  display: block;
  /* Misma compensación de rumbo que #player-mari (avatar rota con --facing). */
  transform: rotate(calc(-1 * var(--facing, 0deg)));
  image-rendering: auto;
}
.player-face-on-body.hidden { display: none !important; }
.player-avatar.mari-mode.mari-top .player-face-on-body {
  transform: none;
}
/* Fallback sin pack on-body: recorte cara kit 512 sobre slot cabeza idle. */
.player-face-on-body.fallback-anchor {
  inset: auto;
  /* Anclas ES (idle.png 512×768): cara ~y95–150 / cx≈0.50 → % del box avatar */
  top: 8%;
  left: 28%;
  width: 44%;
  height: 20%;
  border-radius: 45% / 50%;
  overflow: hidden;
}
.player-face-badge {
  position: absolute;
  top: -0.35rem;
  right: -0.55rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  background: #fff7ed;
  z-index: 3;
  pointer-events: none;
  image-rendering: auto;
}
.player-avatar.mari-mode .player-face-badge:not(.hidden) {
  display: block;
}
@media (max-width: 420px) {
  .vitaink-face-kit {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .vitaink-face-controls { width: 100%; }
}

.vitaink-puppet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0.6rem 0 1rem;
  padding: 0.75rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #f5f0ff, #eef6ff);
  border: 1px dashed #a78bfa;
}
.vitaink-puppet .puppet-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
}
.vitaink-puppet .puppet-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed #94a3b8;
  border-radius: 10px;
  background: rgba(255,255,255,0.75);
  color: #64748b;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.vitaink-puppet .puppet-slot.head {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
}
.vitaink-puppet .puppet-slot.torso {
  width: 4.2rem;
  height: 4.6rem;
}
.vitaink-puppet .puppet-slot.arm {
  width: 2rem;
  height: 3.6rem;
}
.vitaink-puppet .puppet-slot.leg {
  width: 2.2rem;
  height: 3.4rem;
}
.vitaink-puppet .puppet-note {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  color: #6b7280;
  text-align: center;
  max-width: 22rem;
}
.vitaink-historial {
  max-height: 10rem;
  overflow: auto;
  margin: 0.35rem 0 0.75rem;
  padding: 0;
  list-style: none;
}
.vitaink-historial .tx-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.45rem;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.85rem;
}
.vitaink-historial .tx-amt.pos { color: #059669; }
.vitaink-historial .tx-amt.neg { color: #dc2626; }
.vitaink-transfer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.vitaink-transfer-row input[type="text"] { flex: 1 1 8rem; min-width: 6rem; }
.vitaink-transfer-row input[type="number"] { width: 4.5rem; }
#hud-vitaink-pj:not(.hidden),
#hud-vitaink-ranking:not(.hidden),
#hud-vitaink-reliquias:not(.hidden),
#hud-vitaink-sinodo:not(.hidden) { display: inline-flex; }

/* —— v3.3 VitaInk tesoros / reputación / misiones plugin —— */
.street-vitaink-tesoros {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.street-vitaink-tesoros .vita-tesoro-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  border: none;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(80, 40, 120, 0.35));
  padding: 0;
}
.street-vitaink-tesoros .vita-tesoro-pin.claimed {
  opacity: 0.38;
  filter: grayscale(0.4);
}
.street-vitaink-tesoros .vita-tesoro-pin.near {
  transform: translate(-50%, -100%) scale(1.25);
}
.city-streets:not(.capa-vitaink-on) .street-vitaink-tesoros { display: none; }
.vitaink-rep { margin: 0.1rem 0 0.35rem; font-size: 0.9rem; color: #5b21b6; }
.vitaink-rep-badge {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #ede9fe;
  color: #5b21b6;
  font-size: 0.75rem;
  font-weight: 600;
}
.vitaink-rep-badge.hidden { display: none; }
#hud-vitaink-tesoros:not(.hidden),
#hud-vitaink-misiones:not(.hidden),
#hud-vitaink-ranking:not(.hidden) { display: inline-flex; }
.capa-vitaink-missing { opacity: 0.45; }

/* —— v3.4 HUD móvil + ranking VitaInk ——
 * Por qué: en pantallas estrechas hay demasiados chips; «Más» colapsa secundarios.
 * Tap ≥44px (accesibilidad). Chips VitaInk siguen ocultos si el plugin no está:
 * el HUD cívico no depende de VitaInk.
 */
.hud-more-wrap {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.hud-more-btn {
  display: none;
}
/* Wide: secondary chips flow in the HUD (Más button hidden). */
.hud-more-menu,
.hud-more-menu.hidden {
  display: contents;
}
.vitaink-ranking-card { max-width: 28rem; }
.vitaink-ranking-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.4rem 0 0.75rem;
}
.vitaink-ranking-tabs .active {
  border-color: #7c3aed;
  background: #f5f3ff;
  color: #5b21b6;
}
.vitaink-ranking-list {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.vitaink-ranking-list li {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0.45rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  min-height: 44px;
  font-size: 0.9rem;
}
.vitaink-ranking-list li.you {
  border-color: #7c3aed;
  background: #f5f3ff;
}
.vitaink-ranking-list .rank-pos {
  font-weight: 800;
  color: #6b7280;
  text-align: center;
}
.vitaink-ranking-list .rank-name {
  font-weight: 700;
  line-height: 1.25;
}
.vitaink-ranking-list .rank-meta {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
}
.vitaink-ranking-list .rank-score {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #5b21b6;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .city-hud {
    gap: 6px;
  }
  .hud-chip {
    padding: 8px 10px;
    font-size: 0.78rem;
  }
  .hud-more-btn {
    display: inline-flex;
  }
  .hud-more-menu,
  .hud-more-menu.hidden {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    min-width: min(92vw, 18rem);
    max-width: 92vw;
    padding: 8px;
    gap: 6px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
  }
  .hud-more-menu:not(.hidden) {
    display: flex;
  }
  .hud-more-menu .hud-chip {
    flex: 1 1 auto;
  }
}


/* —— v3.5–v4.1 VitaInk Dios / PNJ / crónica / almas / maestros / senda —— */
.street-vitaink-bots {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
}
.street-vitaink-bots .vita-bot-pin {
  position: absolute; transform: translate(-50%, -50%);
  pointer-events: auto; border: none; background: rgba(15, 23, 42, 0.75);
  color: #fff; border-radius: 999px; padding: 0.25rem 0.45rem;
  font-size: 0.85rem; cursor: default; box-shadow: 0 2px 8px rgba(0,0,0,.25);
  border: 2px solid var(--vita-bot-color, #a78bfa);
}
.city-streets:not(.capa-vitaink-on) .street-vitaink-bots { display: none; }
.vitaink-dios-card { max-width: 36rem; }
.vitaink-dios-row {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.4rem 0 0.8rem;
}
.vitaink-dios-row input, .vitaink-dios-row select { min-height: 44px; }
.vitaink-dios-bots { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.6rem; }
.vitaink-dios-bots .bot-row {
  display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center;
  padding: 0.35rem 0.5rem; background: #f8fafc; border-radius: 0.5rem;
}
.vitaink-cronica-list {
  max-height: 16rem; overflow: auto; display: flex; flex-direction: column; gap: 0.4rem;
}
.vitaink-cronica-list .cr-row {
  padding: 0.45rem 0.55rem; border-radius: 0.45rem; background: #f1f5f9; font-size: 0.9rem;
}
.vitaink-cronica-list .cr-row strong { display: block; }
.hud-chip.vitaink-chip.dios-ok { outline: 2px solid #f59e0b; }

.vitaink-dios-overview {
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 0.5rem;
  padding: 0.55rem 0.7rem; margin-bottom: 0.75rem; font-size: 0.9rem; line-height: 1.35;
}
.vitaink-dios-overview strong { display: block; margin-bottom: 0.25rem; }
.vitaink-dios-auditoria {
  max-height: 10rem; overflow: auto; font-size: 0.82rem;
  background: #f8fafc; border-radius: 0.5rem; padding: 0.4rem 0.55rem; margin-bottom: 0.5rem;
}
.vitaink-dios-auditoria .aud-row { padding: 0.25rem 0; border-bottom: 1px solid #e2e8f0; }
.vitaink-dios-bots .bot-row select { min-height: 40px; }
.vitaink-dios-card { max-width: 36rem; }

/* Qué: miniatura de alma del PNJ (v3.8). Por qué: reconocer personalidad de un vistazo. */
.vita-alma-thumb {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  vertical-align: middle; box-shadow: 0 0 0 1px rgba(255,255,255,.35);
}
.vita-bot-pin .vita-alma-thumb { width: 26px; height: 26px; }
.vita-bot-pin {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem;
  max-width: 7.5rem;
}
.vita-bot-pin .pin-lema {
  display: block; font-size: 0.58rem; line-height: 1.15; opacity: 0.9;
  max-width: 7rem; white-space: normal; text-align: center;
}
.vitaink-dios-bots .bot-row .bot-idline {
  display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600;
}
.vitaink-dios-bots .bot-row .bot-lema {
  flex: 1 1 100%; font-size: 0.78rem; color: #475569; font-style: italic;
}
.vitaink-cronica-list .cr-head {
  display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.15rem;
}
.vitaink-cronica-list .cr-alma { width: 32px; height: 32px; flex-shrink: 0; }


/* Qué: panel Maestros (v4.1). Por qué: senda (lecciones/diario/prueba) + roles + maestría. */
.vitaink-maestros-card { max-width: 36rem; }
.vitaink-maestros-list {
  display: flex; flex-direction: column; gap: 0.35rem; margin: 0.5rem 0 0.75rem;
  max-height: 12rem; overflow: auto;
}
.vitaink-maestros-list .maestro-row {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  padding: 0.4rem 0.55rem; border-radius: 0.5rem; border: 1px solid #e2e8f0;
  background: #f8fafc; cursor: pointer; text-align: left; font: inherit;
}
.vitaink-maestros-list .maestro-row.active {
  border-color: #7c3aed; background: #f5f3ff; outline: 2px solid rgba(124,58,237,.25);
}
.vitaink-maestros-list .maestro-row .maestro-meta { flex: 1; min-width: 0; }
.vitaink-maestros-list .maestro-row .maestro-meta strong { display: block; }
.vitaink-maestros-list .maestro-row .maestro-meta span { font-size: 0.78rem; color: #64748b; }
.vitaink-maestro-detail { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #e2e8f0; }
.vitaink-maestro-detail .maestro-head {
  display: flex; gap: 0.65rem; align-items: center; margin-bottom: 0.5rem;
}
.vitaink-maestro-detail .maestro-alma { width: 64px; height: 64px; border-radius: 50%; }
.vitaink-maestro-detail .maestro-lema { font-style: italic; color: #475569; margin: 0.15rem 0 0; font-size: 0.9rem; }
.maestro-align-bar {
  height: 0.65rem; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin: 0.2rem 0;
}
.maestro-align-fill {
  height: 100%; background: linear-gradient(90deg, #7c3aed, #2563eb); border-radius: 999px;
  transition: width 0.25s ease;
}
.maestro-align-label { font-size: 0.85rem; color: #334155; margin: 0 0 0.6rem; }
.maestro-valores { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.6rem; }
.maestro-valores button.valor-chip {
  border: 1px solid #c4b5fd; background: #ede9fe; color: #4c1d95;
  border-radius: 999px; padding: 0.35rem 0.65rem; font-size: 0.82rem; cursor: pointer;
  min-height: 40px;
}
.maestro-valores button.valor-chip:hover { background: #ddd6fe; }
.maestro-ensenanzas { margin: 0 0 0.6rem 1.1rem; padding: 0; font-size: 0.9rem; color: #334155; }
.maestro-conclusion {
  margin: 0 0 0.75rem; padding: 0.55rem 0.7rem; background: #fffbeb;
  border-left: 3px solid #f59e0b; font-size: 0.9rem; color: #44403c;
}

.rol-chip {
  display: inline-block; margin-top: 0.25rem; padding: 0.15rem 0.55rem;
  border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: #fff;
  background: #6366f1;
}
.maestro-roles { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.65rem; }
.maestro-roles button.rol-pick {
  border: 1px solid #cbd5e1; background: #f8fafc; color: #334155;
  border-radius: 999px; padding: 0.3rem 0.6rem; font-size: 0.78rem; cursor: pointer;
  min-height: 36px;
}
.maestro-roles button.rol-pick.active {
  color: #fff; border-color: transparent; outline: 2px solid rgba(15,23,42,.15);
}
.maestria-bar .maestria-fill {
  background: linear-gradient(90deg, #059669, #f59e0b, #7c3aed);
}
.maestro-privilegio {
  margin: 0 0 0.75rem; padding: 0.5rem 0.65rem; background: #ecfdf5;
  border-left: 3px solid #059669; font-size: 0.85rem; color: #065f46;
}

/* Qué: lecciones, diario y prueba de grado (v4.1). Por qué: la senda se lee en el mismo panel. */
.maestro-lecciones { margin: 0 0 0.75rem 1.1rem; padding: 0; font-size: 0.9rem; color: #334155; }
.maestro-lecciones .leccion-row { margin: 0.35rem 0; }
.maestro-lecciones .leccion-open {
  border: none; background: none; color: #4c1d95; font: inherit; font-weight: 600;
  cursor: pointer; text-align: left; padding: 0; min-height: 36px;
}
.maestro-lecciones .leccion-bloqueada { color: #94a3b8; }
.maestro-lecciones .leccion-texto { margin: 0.2rem 0 0.4rem; font-size: 0.86rem; color: #475569; }
.maestro-prueba {
  background: #f5f3ff; border: 1px solid #c4b5fd; border-radius: 0.55rem;
  padding: 0.55rem 0.7rem; margin: 0 0 0.75rem;
}
.maestro-prueba-q { font-weight: 600; color: #312e81; margin: 0.25rem 0 0.5rem; }
.maestro-prueba-ops { display: flex; flex-direction: column; gap: 0.35rem; }
.maestro-prueba-ops button.prueba-op {
  text-align: left; border-radius: 0.45rem; padding: 0.45rem 0.6rem;
  min-height: 44px; font: inherit; cursor: pointer; border: 1px solid #c4b5fd;
  background: #fff;
}
.maestro-prueba-ops button.prueba-alineado { border-color: #6ee7b7; background: #ecfdf5; }
.maestro-prueba-ops button.prueba-neutral { border-color: #fcd34d; background: #fffbeb; }
.maestro-prueba-ops button.prueba-tension { border-color: #fca5a5; background: #fef2f2; }
.maestro-diario { max-height: 12rem; overflow: auto; display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; }
.maestro-diario .diario-row {
  padding: 0.4rem 0.55rem; border-radius: 0.45rem; background: #f8fafc; font-size: 0.85rem;
}
.maestro-diario .diario-row strong { display: block; color: #1e293b; }
.maestro-diario .diario-when { font-size: 0.75rem; color: #64748b; }
.maestro-diario .diario-row p { margin: 0.2rem 0 0; color: #475569; }

/* Qué: códice de la senda (v4.6). Por qué: archivo buscable + export diario. */
.codice-search-row { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; align-items: center; }
.codice-search-row input[type="search"] { flex: 1; min-width: 0; }
.codice-list { max-height: 18rem; overflow: auto; display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.75rem; }
.codice-list .codice-row {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.55rem 0.65rem;
}
.codice-list .codice-row strong { display: block; color: #1e293b; }
.codice-list .codice-kind {
  display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: #64748b; background: #e2e8f0; border-radius: 0.25rem; padding: 0.1rem 0.35rem; margin-bottom: 0.25rem;
}
.codice-list .codice-when { font-size: 0.75rem; color: #64748b; }
.codice-list .codice-row p { margin: 0.25rem 0 0; color: #475569; white-space: pre-wrap; }


/* —— v4.2 Diálogo + encuentro Calles —— */
.maestro-dialogo { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.5rem; }
.maestro-dialogo .dialogo-q {
  text-align: left; font-size: 0.88rem; padding: 0.45rem 0.6rem;
  border-radius: 0.5rem; border: 1px solid #c7d2fe; background: #eef2ff; color: #312e81;
  cursor: pointer;
}
.maestro-dialogo .dialogo-q:active { transform: scale(0.98); }
.maestro-dialogo-libre { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; align-items: center; }
.maestro-dialogo-libre input {
  flex: 1; min-width: 0; padding: 0.45rem 0.55rem; border-radius: 0.45rem;
  border: 1px solid #cbd5e1; font-size: 0.9rem;
}
.maestro-dialogo-respuesta {
  margin: 0 0 0.75rem; padding: 0.55rem 0.7rem; border-left: 3px solid #6366f1;
  background: #f8fafc; font-size: 0.9rem; color: #334155; white-space: pre-wrap;
}
.vita-bot-pin.near { outline: 2px solid var(--vita-bot-color, #6366f1); outline-offset: 2px; z-index: 3; }
.vita-encuentro-toast {
  position: absolute; left: 50%; bottom: 5.2rem; transform: translateX(-50%);
  z-index: 40; display: flex; gap: 0.55rem; align-items: flex-start;
  max-width: min(92vw, 22rem); padding: 0.65rem 0.75rem;
  border-radius: 0.75rem; background: rgba(15, 23, 42, 0.92); color: #f8fafc;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28); pointer-events: auto;
}
.vita-encuentro-toast.hidden { display: none; }
.vita-encuentro-toast strong { display: block; font-size: 0.9rem; }
.vita-encuentro-toast p { margin: 0.2rem 0 0; font-size: 0.84rem; color: #e2e8f0; }
.vita-encuentro-toast .vita-alma-thumb { border-radius: 50%; flex-shrink: 0; }
.vita-encuentro-toast #vita-encuentro-close { margin-left: auto; flex-shrink: 0; }


/* —— VitaInk v4.3 reliquias + sínodo —— */
.reliquias-list { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.35rem 0 0.75rem; max-height: 14rem; overflow: auto; }
.reliquia-row {
  display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.45rem; align-items: start;
  padding: 0.5rem 0.6rem; border-radius: 0.55rem; background: #f8fafc; border: 1px solid #e2e8f0;
}
.reliquia-simbolo { font-size: 1.35rem; line-height: 1.2; text-align: center; }
.reliquia-row strong { display: block; color: #1e293b; font-size: 0.92rem; }
.reliquia-meta { font-size: 0.75rem; color: #64748b; }
.reliquia-row p { margin: 0.25rem 0 0; color: #475569; font-size: 0.85rem; }
.sinodo-list { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.5rem 0 1rem; max-height: 22rem; overflow: auto; }
.sinodo-row {
  padding: 0.55rem 0.65rem; border-radius: 0.55rem; background: #f8fafc; border: 1px solid #e2e8f0;
}
.sinodo-row.primario { border-color: #a5b4fc; background: #eef2ff; }
.sinodo-row.seguido:not(.primario) { border-color: #c4b5fd; }
.sinodo-head { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.sinodo-head strong { color: #1e293b; }
.sinodo-score { font-variant-numeric: tabular-nums; font-weight: 600; color: #4338ca; }
.sinodo-lema { margin: 0.2rem 0 0.35rem; font-size: 0.8rem; color: #64748b; font-style: italic; }
.sinodo-bar { height: 0.45rem; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.sinodo-bar-fill { height: 100%; background: linear-gradient(90deg, #818cf8, #6366f1); border-radius: 999px; }
.sinodo-sub { margin: 0.3rem 0 0; font-size: 0.78rem; color: #475569; }
.sinodo-tension {
  margin: 0.4rem 0 0.75rem; padding: 0.6rem 0.75rem; border-radius: 0.55rem;
  background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; font-size: 0.88rem;
}

/* —— v4.4 Ermita / Voto / Rito —— */
.street-vitaink-ermitas .vita-ermita-pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 2px solid #a78bfa; background: rgba(91, 33, 182, 0.85);
  color: #fff; font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  z-index: 2; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.street-vitaink-ermitas .vita-ermita-pin.near {
  outline: 2px solid #c4b5fd; outline-offset: 2px; z-index: 3;
}
.maestro-voto { margin: 0.4rem 0 0.85rem; padding: 0.5rem 0.6rem; border-radius: 0.5rem; background: rgba(124,58,237,.06); }
.maestro-voto input { width: 100%; margin: 0.35rem 0; }
.maestro-voto-estado { margin: 0 0 0.25rem; font-size: 0.9rem; }
.rito-list { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.5rem 0 0.75rem; }
.rito-list button.rito-chip {
  text-align: left; padding: 0.65rem 0.75rem; border-radius: 0.5rem;
  border: 1px solid #ddd6fe; background: #faf5ff; cursor: pointer;
}
.rito-list button.rito-chip:hover { background: #ede9fe; }
.rito-list button.rito-chip:disabled { opacity: 0.6; cursor: default; }

/* —— VitaInk v4.5 peregrinación (guiones estilo ruta cívica; dibujo en PWA) —— */
.streets-svg .peregrinacion-line {
  fill: none;
  stroke: #7c3aed;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2.4 1.8;
  opacity: 0.92;
  filter: drop-shadow(0 0 0.35px rgba(255,255,255,0.75));
}
.streets-svg .peregrinacion-line-outline {
  fill: none;
  stroke: rgba(237, 233, 254, 0.9);
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-dasharray: 2.4 1.8;
  opacity: 0.88;
}
.streets-svg .peregrinacion-marker {
  fill: #7c3aed;
  stroke: #fff;
  stroke-width: 0.35;
}
.streets-svg .peregrinacion-marker.next {
  fill: #a78bfa;
  stroke: #4c1d95;
  stroke-width: 0.5;
}
.street-vitaink-peregrinacion .vita-peregrinacion-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 6;
  border: 2px solid #7c3aed;
  background: rgba(237, 233, 254, 0.95);
  border-radius: 999px;
  min-width: 2rem;
  min-height: 2rem;
  font-size: 0.95rem;
  padding: 0.15rem 0.35rem;
  box-shadow: 0 1px 4px rgba(76, 29, 149, 0.25);
  cursor: pointer;
}
.street-vitaink-peregrinacion .vita-peregrinacion-pin.next {
  border-color: #4c1d95;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.55);
  animation: peregrinacion-pulse 1.6s ease-in-out infinite;
}
.street-vitaink-peregrinacion .vita-peregrinacion-pin.hecha {
  opacity: 0.45;
  border-color: #a78bfa;
}
@keyframes peregrinacion-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
}
.peregrinacion-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.4rem 0 0.75rem; }
.peregrinacion-list button.peregrinacion-ruta {
  text-align: left;
  border: 1px solid #ddd6fe;
  background: #f5f3ff;
  border-radius: 12px;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
}
.peregrinacion-list button.peregrinacion-ruta:hover { background: #ede9fe; }
.peregrinacion-list button.peregrinacion-ruta.active { border-color: #7c3aed; background: #ede9fe; }
.peregrinacion-activa {
  margin: 0.4rem 0;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  font-size: 0.88rem;
}
.peregrinacion-actions { margin: 0.35rem 0 0.6rem; }
.peregrinacion-titulos { margin-bottom: 0.6rem; }

/* ============================================================================
 * v4.7 — Temas visuales cívicos
 * Biblioteca → torre-academia (piedra gótica, lámparas, salón de pergaminos).
 * Mi casa → bolsón cerrado / madriguera (puerta redonda, verdes/marrones).
 * Sin marcas ajenas ni citas protegidas: solo sabor solicitado por el usuario.
 * ============================================================================ */

/* —— Biblioteca · torre de la academia —— */
#view-place.theme-torre-academia {
  --theme-stone: #3d3429;
  --theme-stone-soft: #5a4a38;
  --theme-lamp: #f0c36a;
  --theme-lamp-glow: rgba(240, 195, 106, 0.35);
  --theme-shelf: #2a2218;
  --theme-parchment: #f4e6c8;
}
#view-place.theme-torre-academia .place-hero {
  background:
    radial-gradient(ellipse at 50% 0%, var(--theme-lamp-glow), transparent 55%),
    linear-gradient(180deg, #4a3c2e 0%, #2f271f 48%, #241e18 100%);
  color: var(--theme-parchment);
  border: 2px solid #7a6548;
  box-shadow:
    inset 0 0 0 1px rgba(240, 195, 106, 0.2),
    0 10px 28px rgba(20, 14, 8, 0.35);
  position: relative;
  overflow: hidden;
}
/* Estanterías laterales (efecto espiral / altura) */
#view-place.theme-torre-academia .place-hero::before,
#view-place.theme-torre-academia .place-hero::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  width: 14px;
  background:
    repeating-linear-gradient(
      180deg,
      #1a140e 0 10px,
      #6b5438 10px 12px,
      #3a2e22 12px 22px
    );
  opacity: 0.55;
  border-radius: 4px;
  pointer-events: none;
}
#view-place.theme-torre-academia .place-hero::before { left: 10px; }
#view-place.theme-torre-academia .place-hero::after { right: 10px; }
#view-place.theme-torre-academia .place-hero h2,
#view-place.theme-torre-academia .place-desc {
  color: var(--theme-parchment);
}
#view-place.theme-torre-academia .chip {
  background: rgba(240, 195, 106, 0.2);
  color: var(--theme-lamp);
  border: 1px solid rgba(240, 195, 106, 0.35);
}
#view-place.theme-torre-academia .place-theme-banner {
  display: inline-block;
  margin: 0 auto 10px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2a2218;
  background: linear-gradient(180deg, #f5d78a, #d4a84b);
  box-shadow: 0 0 16px var(--theme-lamp-glow);
}
#view-place.theme-torre-academia .place-theme-banner.hidden { display: none; }
#view-place.theme-torre-academia .assistant-panel {
  background: rgba(36, 28, 20, 0.85);
  border-color: #7a6548;
  color: var(--theme-parchment);
}
#view-place.theme-torre-academia .assistant-panel .stub-note { color: #cbb896; }
#view-place.theme-torre-academia .tabs .tab.active {
  background: #5a4a38;
  color: var(--theme-parchment);
  border-color: #7a6548;
}
#view-place.theme-torre-academia .tab-panel {
  background: #f7edd8;
  border: 1px solid #d2bc94;
  border-radius: 16px;
  padding: 14px;
}
.place-theme-banner.hidden { display: none; }

/* Viñeta con tema torre-academia */
.vignette-card.theme-torre-academia {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(240, 195, 106, 0.4), transparent 60%),
    linear-gradient(180deg, #4a3c2e, #2a2218);
  color: #f4e6c8;
  border: 2px solid #7a6548;
}
.vignette-card.theme-torre-academia h2 { color: #f4e6c8; }
.vignette-card.theme-torre-academia .vignette-flavor { color: #e2d0a8; }

/* Calles: tinte edificio Biblioteca vs Residencial */
.street-building.theme-torre-academia {
  background: linear-gradient(180deg, #5a4a38, #3d3429);
  border-color: #f0c36a;
  color: #f4e6c8;
  box-shadow: 0 0 10px rgba(240, 195, 106, 0.35), 0 3px 10px rgba(20, 36, 30, 0.16);
}
.street-building.theme-torre-academia .pin-name { color: #f4e6c8; }
.street-building.theme-bolson {
  background: linear-gradient(180deg, #6b8f5e, #4a6740);
  border-color: #8b6914;
  border-radius: 50%;
  min-width: 48px;
  max-width: 72px;
  color: #f3efe4;
  box-shadow: 0 3px 12px rgba(40, 60, 30, 0.28);
}
.street-building.theme-bolson .pin-name { color: #f3efe4; }

/* —— Mi casa · bolsón cerrado / madriguera —— */
.view-casa-bolson {
  --bolson-moss: #4a6740;
  --bolson-earth: #6b5344;
  --bolson-cream: #f3efe4;
  --bolson-lamp: #e8c26a;
  --bolson-door: #5c4030;
}
.view-casa-bolson .casa-bolson-door {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
  padding: 16px 12px 12px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 30%, rgba(232, 194, 106, 0.35), transparent 55%),
    linear-gradient(180deg, #7a9a6a 0%, #4a6740 55%, #3a5234 100%);
  border: 2px solid #8b6914;
  box-shadow: inset 0 0 40px rgba(40, 50, 30, 0.25);
}
.view-casa-bolson .casa-bolson-arch {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #8a6a4a, var(--bolson-door) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 6px #3d5c34,
    0 0 0 10px #c4a574,
    0 8px 20px rgba(30, 40, 20, 0.35);
}
.view-casa-bolson .casa-bolson-round-door {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 70% 40%, rgba(232, 194, 106, 0.25), transparent 40%),
    linear-gradient(145deg, #7a5640, #4a3224);
  border: 3px solid #2a1c14;
  position: relative;
}
.view-casa-bolson .casa-bolson-knob {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f0d78a, #b8860b);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.view-casa-bolson .casa-bolson-window {
  position: absolute;
  left: 50%;
  top: 22px;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #ffe9a8, #c9a227 70%);
  border: 2px solid #2a1c14;
  box-shadow: inset 0 0 8px rgba(255, 220, 120, 0.6);
}
.view-casa-bolson .casa-bolson-caption {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bolson-cream);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.view-casa-bolson .casa-bolson-hint {
  color: #3d4a36;
}
.view-casa-bolson .casa-bolson-panel {
  background:
    linear-gradient(180deg, #f7f2e6 0%, #ebe3d2 100%);
  border: 1px solid #c4a574;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(60, 50, 30, 0.12);
}
.view-casa-bolson .casa-bolson-panel .card-title {
  color: var(--bolson-earth);
}
.view-casa-bolson .casa-address {
  background: #e8f0e0;
  border-color: #8b6914;
  border-radius: 999px;
}
.view-casa-bolson .btn-primary {
  background: var(--bolson-moss);
  border-color: #3d5c34;
}
.view-casa-bolson .btn-primary:hover {
  filter: brightness(1.05);
}
.view-casa-bolson .reveal-box {
  background: #fff8e8;
  border-color: #c4a574;
  border-radius: 20px;
}

/* ============================================================================
 * v4.8 — Mi casa: estancias, puerta redonda interactiva, timbre vivo
 * Preferencias UI en localStorage; API /api/casa sin cambio de contrato.
 * ============================================================================ */

/* Puerta redonda: estados abierta / cerrada */
.view-casa-bolson .casa-puerta-btn {
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
}
.view-casa-bolson .casa-puerta-btn:focus-visible {
  outline: 3px solid var(--bolson-lamp);
  outline-offset: 6px;
}
.view-casa-bolson .casa-puerta-privacy {
  margin: 0;
  max-width: 28rem;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: #f3efe4;
  background: rgba(40, 50, 30, 0.45);
  border-radius: 999px;
  padding: 6px 14px;
}
.view-casa-bolson.puerta-abierta .casa-puerta-privacy { display: none; }
.view-casa-bolson.puerta-cerrada .casa-puerta-privacy { display: block; }
.view-casa-bolson .casa-puerta-toggle { margin-top: 4px; }

/* Puerta cerrada: marco más denso, menos luz en la ventanita */
.view-casa-bolson.puerta-cerrada .casa-bolson-door {
  box-shadow:
    inset 0 0 48px rgba(20, 30, 15, 0.45),
    0 4px 16px rgba(30, 40, 20, 0.25);
}
.view-casa-bolson.puerta-cerrada .casa-bolson-round-door {
  transform: rotate(0deg);
  filter: brightness(0.88);
}
.view-casa-bolson.puerta-cerrada .casa-bolson-window {
  background: radial-gradient(circle at 40% 40%, #c9a86a, #6a5a30 75%);
  box-shadow: inset 0 0 6px rgba(40, 30, 10, 0.5);
}
.view-casa-bolson.puerta-cerrada .casa-puerta-gap {
  display: none;
}

/* Puerta abierta: hueco cálido, bisagra sugerida */
.view-casa-bolson.puerta-abierta .casa-bolson-round-door {
  background:
    radial-gradient(circle at 55% 45%, #f5e6c0 0%, #d4b878 35%, transparent 36%),
    linear-gradient(145deg, #7a5640, #4a3224);
  transform: rotate(-18deg);
  transform-origin: 15% 50%;
  transition: transform 0.35s ease, filter 0.25s ease;
}
.view-casa-bolson.puerta-abierta .casa-puerta-gap {
  display: block;
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #ffe9a8, #8a6a3a 80%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.view-casa-bolson.puerta-abierta .casa-bolson-knob,
.view-casa-bolson.puerta-abierta .casa-bolson-window {
  z-index: 1;
}
.view-casa-bolson.puerta-abierta .casa-bolson-caption {
  color: #fff8e0;
}

/* Estancias (tabs redondos tipo bolsón) */
.view-casa-bolson .casa-estancias {
  margin: 8px 0 14px;
}
.view-casa-bolson .casa-estancia-tab {
  font-size: 0.82rem;
  border-radius: 999px;
  border-color: #c4a574;
  background: #f7f2e6;
  color: var(--bolson-earth);
  padding: 8px 6px;
  line-height: 1.2;
}
.view-casa-bolson .casa-estancia-tab.active {
  background: var(--bolson-moss);
  border-color: #3d5c34;
  color: #f3efe4;
  box-shadow: 0 2px 8px rgba(60, 80, 40, 0.25);
}
.view-casa-bolson .casa-estancia.hidden { display: none !important; }
.view-casa-bolson .casa-estancia {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: casa-estancia-in 0.28s ease;
}
@keyframes casa-estancia-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Timbre vivo: tarjetas de madriguera */
.view-casa-bolson .timbre-vivo-list .timbre-card {
  background:
    linear-gradient(135deg, #fff8e8 0%, #ebe3d2 100%);
  border: 2px solid #c4a574;
  border-radius: 22px;
  padding: 14px;
  gap: 12px;
  box-shadow: 0 3px 12px rgba(60, 50, 30, 0.1);
}
.view-casa-bolson .timbre-vivo-list .timbre-card .timbre-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3d5c34;
  background: rgba(74, 103, 64, 0.15);
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 4px;
}
.view-casa-bolson .timbre-vivo-list .timbre-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
.view-casa-bolson .timbre-vivo-list .btn-aceptar {
  flex: 1;
  min-width: 120px;
  background: var(--bolson-moss);
  border-color: #3d5c34;
  color: #fff;
  font-weight: 700;
}
.view-casa-bolson .timbre-vivo-list .btn-rechazar {
  flex: 1;
  min-width: 120px;
  border-color: #8b4513;
  color: #6b5344;
  font-weight: 700;
}
.view-casa-bolson .timbre-vivo-list .timbre-card-main .preview {
  font-size: 0.95rem;
  color: #3d4a36;
}

/* Mirador: chip de dirección más «óvalo de madriguera» */
.view-casa-bolson .casa-mirador-chip-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}
.view-casa-bolson .casa-mirador-chip {
  max-width: 100%;
  text-align: center;
  box-shadow: inset 0 0 0 2px rgba(139, 105, 20, 0.35);
}

/* Despensa sabor */
.view-casa-bolson .casa-despensa-flavor {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(74, 103, 64, 0.12);
  color: var(--bolson-earth);
  font-style: italic;
  font-size: 0.92rem;
}

/* Puerta cerrada: paneles un poco más recogidos (privacidad visual) */
.view-casa-bolson.puerta-cerrada .casa-bolson-panel {
  box-shadow: 0 2px 10px rgba(40, 50, 30, 0.18);
  border-color: #a89068;
}


/* --- v4.9–5.0 Mi casa: huerto, chimenea, visitas, alarmas, cocina, ventanas --- */
.view-casa-bolson .casa-estancias.tabs-5,
.view-casa-bolson .casa-estancias.tabs-6 {
  gap: 4px;
}
.view-casa-bolson .casa-estancias.tabs-5 .casa-estancia-tab,
.view-casa-bolson .casa-estancias.tabs-6 .casa-estancia-tab {
  font-size: 0.68rem;
  padding: 8px 3px;
  letter-spacing: 0;
}
.view-casa-bolson .casa-chimenea-panel {
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.4s ease, background 0.4s ease;
}
.view-casa-bolson .casa-chimenea-panel.chimenea-on {
  background:
    radial-gradient(ellipse at 50% 85%, rgba(255, 140, 40, 0.35), transparent 55%),
    linear-gradient(180deg, #f7f2e6 0%, #ebe0c8 100%);
  box-shadow:
    0 0 28px rgba(255, 120, 30, 0.35),
    0 4px 14px rgba(60, 50, 30, 0.12);
}
.view-casa-bolson .casa-chimenea-visual {
  display: flex;
  justify-content: center;
  margin: 8px 0 12px;
}
.view-casa-bolson .casa-chimenea-hearth {
  width: 88px;
  height: 56px;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #3a2a22, #1a120e);
  border: 2px solid #5c4030;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 -8px 12px rgba(0, 0, 0, 0.4);
}
.view-casa-bolson .casa-chimenea-flame {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 14px;
  height: 22px;
  margin-left: -7px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #ffe08a, #ff6a1a 70%, transparent 75%);
  opacity: 0.15;
  transform: scaleY(0.4);
  transition: opacity 0.35s, transform 0.35s;
}
.view-casa-bolson .casa-chimenea-panel.chimenea-on .casa-chimenea-flame {
  opacity: 1;
  transform: scaleY(1);
  animation: casa-flame 0.9s ease-in-out infinite alternate;
}
.view-casa-bolson .casa-chimenea-flame.f2 {
  left: 32%;
  width: 10px;
  height: 16px;
  animation-delay: 0.2s;
}
.view-casa-bolson .casa-chimenea-flame.f3 {
  left: 62%;
  width: 11px;
  height: 18px;
  animation-delay: 0.45s;
}
@keyframes casa-flame {
  from { transform: scaleY(0.92) translateY(1px); }
  to { transform: scaleY(1.08) translateY(-2px); }
}
.view-casa-bolson .casa-chimenea-status {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--bolson-earth);
  font-style: italic;
}
.view-casa-bolson .casa-huerto-plots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
.view-casa-bolson .casa-huerto-plot {
  border: 1px solid #c4a574;
  border-radius: 16px;
  padding: 12px 10px;
  background:
    linear-gradient(180deg, #e8f0dc 0%, #d4e0c4 100%);
  text-align: center;
  min-height: 110px;
}
.view-casa-bolson .casa-huerto-plot .plot-emoji {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 4px;
}
.view-casa-bolson .casa-huerto-plot .plot-name {
  font-weight: 700;
  color: var(--bolson-earth);
  font-size: 0.85rem;
}
.view-casa-bolson .casa-huerto-plot .plot-stage {
  font-size: 0.75rem;
  color: #4a6740;
  margin: 4px 0 8px;
}
.view-casa-bolson .casa-huerto-plot button {
  font-size: 0.75rem;
  padding: 4px 10px;
}
.view-casa-bolson .casa-huerto-flavor {
  min-height: 1.4em;
  font-style: italic;
  color: #3d4a36;
  margin: 4px 0 10px;
}
.view-casa-bolson .visitas-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.view-casa-bolson .visita-row {
  border-left: 3px solid var(--bolson-moss);
  padding: 8px 10px;
  background: rgba(74, 103, 64, 0.08);
  border-radius: 0 12px 12px 0;
}
.view-casa-bolson .visita-row strong {
  color: var(--bolson-earth);
}
.view-casa-bolson .visita-row .visita-note {
  display: block;
  margin-top: 2px;
  font-size: 0.9rem;
}
.view-casa-bolson .visita-row .visita-when {
  display: block;
  font-size: 0.72rem;
  color: #6b7a60;
  margin-top: 4px;
}
.view-casa-bolson .casa-alarmas-toggles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(74, 103, 64, 0.1);
  border: 1px dashed #a89060;
}
.view-casa-bolson .alarms-list .alarm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(196, 165, 116, 0.4);
  font-size: 0.85rem;
}

/* --- v5.0 Mi casa: ventanas redondas + cocina + despensa real --- */
/* Qué: ojos redondos en cada estancia; por qué: ritmo día/noche compartido con Calles. */
.view-casa-bolson .casa-ventana-bar {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 0 0 10px;
  min-height: 36px;
  align-items: center;
}
.view-casa-bolson .casa-ventana-redonda {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #5c4030;
  box-shadow:
    inset 0 0 0 2px rgba(243, 239, 228, 0.35),
    0 2px 6px rgba(40, 30, 20, 0.2);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.45), transparent 42%),
    linear-gradient(180deg, #87b8e0 0%, #cfe6f7 55%, #e8f0dc 100%);
  transition: background 0.6s ease, box-shadow 0.6s ease, filter 0.6s ease;
}
.view-casa-bolson.tod-atardecer .casa-ventana-redonda {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 220, 160, 0.5), transparent 45%),
    linear-gradient(180deg, #e8a060 0%, #f0c890 50%, #d4a070 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 200, 120, 0.35),
    0 0 10px rgba(255, 140, 60, 0.25);
}
.view-casa-bolson.tod-noche .casa-ventana-redonda {
  background:
    radial-gradient(circle at 40% 40%, #ffe08a 0%, #e8a040 45%, #3a2a18 100%);
  box-shadow:
    0 0 14px rgba(255, 180, 60, 0.65),
    0 0 28px rgba(255, 140, 40, 0.35),
    inset 0 0 8px rgba(255, 220, 140, 0.4);
  filter: saturate(1.1);
}
.view-casa-bolson.tod-noche .casa-bolson-panel {
  box-shadow: 0 0 18px rgba(255, 160, 50, 0.08);
}

.view-casa-bolson .casa-comida-status {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(74, 103, 64, 0.14);
  border: 1px dashed #a89060;
  color: var(--bolson-earth);
  font-style: italic;
  font-size: 0.9rem;
}
.view-casa-bolson .casa-comida-status.hidden { display: none !important; }

.view-casa-bolson .casa-despensa-stock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
.view-casa-bolson .casa-despensa-item {
  border: 1px solid #c4a574;
  border-radius: 16px;
  padding: 12px 10px;
  background: linear-gradient(180deg, #f7f2e6 0%, #ebe0c8 100%);
  text-align: center;
}
.view-casa-bolson .casa-despensa-item .jar-emoji {
  font-size: 1.6rem;
  display: block;
}
.view-casa-bolson .casa-despensa-item .jar-name {
  font-weight: 700;
  color: var(--bolson-earth);
  font-size: 0.85rem;
}
.view-casa-bolson .casa-despensa-item .jar-count {
  font-size: 1.1rem;
  color: var(--bolson-moss);
  font-weight: 800;
  margin-top: 4px;
}
.view-casa-bolson .casa-despensa-item.empty-jar {
  opacity: 0.55;
}

.view-casa-bolson .casa-cocina-recetas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}
.view-casa-bolson .casa-receta-card {
  border: 1px solid #c4a574;
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(180deg, #f7f2e6 0%, #f0e6d2 100%);
}
.view-casa-bolson .casa-receta-card .receta-title {
  font-weight: 700;
  color: var(--bolson-earth);
  margin: 0 0 4px;
}
.view-casa-bolson .casa-receta-card .receta-needs {
  font-size: 0.8rem;
  color: #4a6740;
  margin: 0 0 8px;
}
.view-casa-bolson .casa-receta-card .receta-desc {
  font-size: 0.85rem;
  font-style: italic;
  color: #5a4a3a;
  margin: 0 0 10px;
}
.view-casa-bolson .casa-receta-card button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.view-casa-bolson .casa-cocina-flavor {
  min-height: 1.4em;
  font-style: italic;
  color: #3d4a36;
  margin: 4px 0 0;
}


/* —— v5.1 Calles: modo juego limpio / zoom / fullscreen ——
 * Por qué: con VitaInk ON el mapa se satura de POIs cívicos; el usuario pide
 * vista limpia, zoom y pantalla completa para jugar cómodo en móvil.
 */
.calles-tools {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}
.calles-tool-btn {
  appearance: none;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.calles-tool-btn:active { transform: scale(0.96); }
.calles-tool-btn.is-active {
  border-color: #7c3aed;
  background: #f5f3ff;
  color: #5b21b6;
}
.city-streets:fullscreen,
.city-streets:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  border: none;
}
.city-streets:fullscreen .calles-tools,
.city-streets:-webkit-full-screen .calles-tools {
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
}
.city-streets:fullscreen .dpad,
.city-streets:-webkit-full-screen .dpad {
  bottom: max(12px, env(safe-area-inset-bottom));
}

/* Modo juego limpio: oculta/atenúa ruido cívico; deja avatar, calles y VitaInk */
.city-streets.modo-juego-limpio .street-pois { display: none !important; }
.city-streets.modo-juego-limpio .street-building:not(.vitaink-owned) {
  opacity: 0.14;
  filter: grayscale(0.35);
  pointer-events: none;
}
.city-streets.modo-juego-limpio .street-building .pin-stamp,
.city-streets.modo-juego-limpio .street-building .pin-name {
  display: none;
}
.city-streets.modo-juego-limpio .street-building.mission-target {
  box-shadow: none;
  outline: none;
}
.city-streets.modo-juego-limpio .clima-sky,
.city-streets.modo-juego-limpio .clima-rain {
  opacity: 0.12 !important;
  pointer-events: none;
}
.city-streets.modo-juego-limpio .street-windows { display: none; }
.city-streets.modo-juego-limpio .map-zone { opacity: 0.22; }
.city-streets.modo-juego-limpio .street-name-chip {
  opacity: 0.55;
  font-size: 0.75rem;
}
/* Capas VitaInk siempre visibles en limpio */
.city-streets.modo-juego-limpio.capa-vitaink-on .street-vitaink-casas,
.city-streets.modo-juego-limpio.capa-vitaink-on .street-vitaink-tesoros,
.city-streets.modo-juego-limpio.capa-vitaink-on .street-vitaink-bots,
.city-streets.modo-juego-limpio.capa-vitaink-on .street-vitaink-ermitas,
.city-streets.modo-juego-limpio.capa-vitaink-on .street-vitaink-peregrinacion {
  opacity: 1;
  filter: none;
}

/* HUD compacto: solo esenciales cuando limpio + VitaInk */
#city-hud.hud-compact .hud-primary:not(.vitaink-chip):not(#hud-juego-limpio) {
  display: none !important;
}
#city-hud.hud-compact #hud-more-wrap .hud-secondary:not(.vitaink-chip) {
  /* en menú Más siguen accesibles; en barra ancha se ocultan cívicos */
}
@media (min-width: 561px) {
  #city-hud.hud-compact #hud-more-menu > .hud-secondary:not(.vitaink-chip) {
    display: none !important;
  }
}
#hud-juego-limpio.limpio-active {
  border-color: #7c3aed;
  background: #f5f3ff;
  color: #5b21b6;
}
.event-toast.limpio-hide { display: none !important; }


/* —— v5.2 Calles UX: zoom cámara, fullscreen fallback, hablar, declutter —— */
.city-streets.zoom-cam-on {
  /* más área útil al estar con cámara siguiendo al avatar */
}
.city-streets.calles-fs-fallback,
html.calles-fs-active .city-streets:fullscreen,
html.calles-fs-active .city-streets:-webkit-full-screen {
  background: #0f172a;
}
.city-streets.calles-fs-fallback {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  z-index: 10000 !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
}
.calles-fs-exit {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  min-height: 52px;
  min-width: 140px;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  border: 2px solid #fde68a;
  background: rgba(15, 23, 42, 0.92);
  color: #fef3c7;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  cursor: pointer;
}
.calles-fs-exit.hidden { display: none !important; }
.city-streets:fullscreen .calles-fs-exit,
.city-streets:-webkit-full-screen .calles-fs-exit,
.city-streets.calles-fs-fallback .calles-fs-exit { display: inline-flex; align-items: center; justify-content: center; }

/* Alma / PNJ: hit target grande y claro */
.street-vitaink-bots { z-index: 8; }
.vita-bot-pin,
.vita-bot-pin.vita-bot-hit {
  min-width: 56px;
  min-height: 56px;
  padding: 0.4rem 0.55rem;
  font-size: 0.95rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.vita-bot-pin .vita-alma-thumb { width: 36px; height: 36px; border-radius: 50%; }
.vita-bot-pin.near,
.vita-bot-pin.vita-bot-hit.near {
  outline: 3px solid var(--vita-bot-color, #6366f1);
  outline-offset: 3px;
  transform: translate(-50%, -50%) scale(1.08);
  z-index: 9;
}
.vita-bot-pin::after {
  /* anillo táctil invisible ampliado */
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 999px;
}

/* Hablar HUD más visible */
.civic-action.civic-hablar {
  bottom: 6.2rem;
  z-index: 14;
  min-height: 52px;
  padding: 12px 22px;
  font-size: 1.05rem;
  background: linear-gradient(180deg, #7c3aed, #5b21b6);
  box-shadow: 0 6px 22px rgba(91, 33, 182, 0.45);
  border: 2px solid #ddd6fe;
}
.civic-action.civic-hablar:active { transform: translateX(-50%) scale(0.97); }

.maestro-hablar-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.6rem 0 0.9rem;
}
.btn-hablar-ahora {
  min-height: 52px;
  font-size: 1.05rem;
  font-weight: 800;
  border-radius: 14px;
}
.maestro-hablar-hint { margin: 0; }

/* Declutter extra: VitaInk + limpio */
body.juego-limpio-on #main-nav.nav-collapsed-limpio {
  display: none !important;
}
body.juego-limpio-on .home-toolbar .home-hint,
body.juego-limpio-on .search-wrap {
  display: none !important;
}
body.juego-limpio-on #city-hud.hud-compact {
  gap: 6px;
}
body.juego-limpio-on #city-streets {
  max-height: min(78dvh, 640px);
  aspect-ratio: 1 / 1.05;
}
body.juego-limpio-on .city-streets.modo-juego-limpio .street-name-chip {
  opacity: 0.4;
  font-size: 0.7rem;
}
body.juego-limpio-on .city-streets.modo-juego-limpio .map-zone {
  opacity: 0.12;
}
body.juego-limpio-on #city-hud.hud-compact .hud-more-menu > .hud-secondary:not(.vitaink-chip) {
  display: none !important;
}
@media (max-width: 560px) {
  body.juego-limpio-on #city-hud.hud-compact #hud-more-menu > .hud-secondary:not(.vitaink-chip) {
    display: none !important;
  }
}

/* v5.2: cuando la JS lleva la cámara, anular origins viejos de vista */
.city-streets.zoom-cam-on .streets-stage,
.city-streets.route-follow-on .streets-stage {
  transform-origin: 0 0 !important;
  transition: none !important;
}


/* —— v5.5 Mari lote2: avatar Calles (~56px) facing+cycle+night + pins (~28px) —— */
/* Qué: front/qleft/qright/top + cycle/; night front/top; pins/busts masters/*. */
/* Por qué: VitaInk jugable sin sexualizar; fallback from-mari-gym / emoji si 404. */
.player-avatar.mari-mode {
  width: 38px;
  height: 56px; /* ~48–64px recomendado */
  margin-left: -19px;
  margin-top: -48px; /* pies cerca de la calle */
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.player-avatar.mari-mode.mari-top {
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
}
.player-avatar.mari-mode.bike-mode {
  filter: drop-shadow(0 2px 4px rgba(0, 80, 40, 0.35));
}
.player-avatar .player-mari {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  /* Figura erguida; en mirador/top se anula el counter-rotate */
  transform: rotate(calc(-1 * var(--facing, 0deg)));
  image-rendering: auto;
}
.player-avatar.mari-mode.mari-top .player-mari {
  transform: none;
}
.player-avatar.mari-mode .player-emoji { display: none; }
.player-avatar.mari-mode .player-facing {
  top: -8px;
  border-bottom-color: #fde68a;
}
.vita-bot-pin .vita-alma-thumb {
  width: 28px;
  height: 28px; /* pins ~24–32px */
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.vita-alma-thumb.maestro-head,
img.maestro-head {
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 0 0 2px var(--maestro-tint, #64748b);
  background: color-mix(in srgb, var(--maestro-tint, #64748b) 22%, #fff);
}
.vitaink-maestro-detail img.maestro-head,
.vitaink-maestro-detail .maestro-alma.maestro-head {
  width: 64px;
  height: 64px;
}
.vita-alma-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e2e8f0;
  font-size: 1.1rem;
}
.vitaink-maestro-detail .vita-alma-fallback {
  width: 64px;
  height: 64px;
  font-size: 1.8rem;
}
.maestro-row .vita-alma-thumb.maestro-head {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}


/* v5.7–v5.9.1 — Encarnar maestro (day pack): tinte suave del avatar Calles (discípulo opt-in) */
#player-avatar.encarnar-maestro,
#player-avatar.encarnar-diablo {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--encarnar-tint, #b91c1c) 70%, transparent));
}
#player-avatar.encarnar-maestro #player-mari,
#player-avatar.encarnar-diablo #player-mari {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--encarnar-tint, #b91c1c) 55%, transparent);
  border-radius: 8px;
}
.maestro-bio { margin: 0.25rem 0 0.15rem; max-width: 36rem; line-height: 1.35; }
.maestro-ficha { margin: 0.1rem 0; }
.maestro-hablar-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }


/* ============================================================================
 * v5.8 — Animaciones de lugares (cívico + VitaInk)
 * Solo transform/opacity donde sea posible. Sin GIFs pesados.
 * Respeta modo juego limpio y prefers-reduced-motion.
 * ============================================================================ */

/* —— Place hero ambient layer —— */
.place-hero { position: relative; overflow: hidden; }
.place-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.place-hero > *:not(.place-ambient) { position: relative; z-index: 1; }

/* Motas de polvo (torre-academia) */
.place-ambient .dust-mote {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(244, 230, 200, 0.55);
  opacity: 0;
  animation: dust-float 9s ease-in-out infinite;
  will-change: transform, opacity;
}
.place-ambient .dust-mote:nth-child(2) { animation-duration: 11s; animation-delay: -2s; width: 2px; height: 2px; }
.place-ambient .dust-mote:nth-child(3) { animation-duration: 8s; animation-delay: -4s; }
.place-ambient .dust-mote:nth-child(4) { animation-duration: 12s; animation-delay: -1s; width: 2px; height: 2px; }
.place-ambient .dust-mote:nth-child(5) { animation-duration: 10s; animation-delay: -5s; }
.place-ambient .dust-mote:nth-child(6) { animation-duration: 13s; animation-delay: -3s; width: 2px; height: 2px; }
@keyframes dust-float {
  0%   { transform: translate3d(0, 12px, 0); opacity: 0; }
  15%  { opacity: 0.7; }
  50%  { transform: translate3d(8px, -28px, 0); opacity: 0.45; }
  85%  { opacity: 0.6; }
  100% { transform: translate3d(-4px, -55px, 0); opacity: 0; }
}

/* Parpadeo de lámpara + shimmer + parallax estanterías (biblioteca) */
#view-place.theme-torre-academia .place-hero {
  animation: lamp-flicker 4.5s ease-in-out infinite;
}
#view-place.theme-torre-academia .place-hero::before {
  animation: shelf-parallax 14s ease-in-out infinite;
}
#view-place.theme-torre-academia .place-hero::after {
  animation: shelf-parallax 16s ease-in-out infinite reverse;
}
#view-place.theme-torre-academia .place-desc,
#view-place.theme-torre-academia .place-theme-banner {
  background-image: linear-gradient(
    100deg,
    transparent 0%,
    rgba(240, 195, 106, 0.12) 45%,
    transparent 70%
  );
  background-size: 220% 100%;
  animation: page-shimmer 7s linear infinite;
}
@keyframes lamp-flicker {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.04); }
  52% { filter: brightness(0.97); }
  58% { filter: brightness(1.06); }
  70% { filter: brightness(1); }
}
@keyframes shelf-parallax {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes page-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* Ambientes por theme (ficha de lugar) */
#view-place.theme-piedra-civica .place-hero {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(200, 190, 170, 0.25), transparent 55%),
    linear-gradient(180deg, #5a5750 0%, #3a3834 100%);
  color: #f2efe8;
  border: 1px solid #8a8578;
}
#view-place.theme-piedra-civica .place-ambient::before,
#view-place.theme-piedra-civica .place-ambient::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 220, 140, 0.55);
  box-shadow: 0 0 10px rgba(255, 200, 100, 0.45);
  animation: stone-lamp 3.2s ease-in-out infinite alternate;
}
#view-place.theme-piedra-civica .place-ambient::before { top: 18%; left: 12%; }
#view-place.theme-piedra-civica .place-ambient::after { top: 22%; right: 14%; animation-delay: 0.8s; }
@keyframes stone-lamp {
  from { opacity: 0.45; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1.08); }
}

#view-place.theme-jardin .place-hero {
  background:
    radial-gradient(ellipse at 70% 0%, rgba(140, 200, 120, 0.28), transparent 50%),
    linear-gradient(180deg, #3d6b45 0%, #2a4a32 100%);
  color: #e8f5e4;
  border: 1px solid #6a9a6a;
}
#view-place.theme-jardin .place-ambient .leaf {
  position: absolute;
  width: 8px;
  height: 5px;
  border-radius: 60% 40%;
  background: rgba(180, 230, 140, 0.55);
  animation: leaf-drift 11s linear infinite;
  will-change: transform, opacity;
}
#view-place.theme-jardin .place-ambient .leaf:nth-child(2) { animation-duration: 13s; animation-delay: -3s; }
#view-place.theme-jardin .place-ambient .leaf:nth-child(3) { animation-duration: 10s; animation-delay: -6s; }
@keyframes leaf-drift {
  0%   { transform: translate3d(0, -8px, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.7; }
  100% { transform: translate3d(40px, 70px, 0) rotate(120deg); opacity: 0; }
}

#view-place.theme-salud-suave .place-hero {
  background: linear-gradient(180deg, #e8f4f6 0%, #d4e8ee 100%);
  color: #1e4a55;
  border: 1px solid #9ec5d0;
  animation: salud-pulse 5s ease-in-out infinite;
}
@keyframes salud-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(80, 160, 180, 0.15); }
  50% { box-shadow: 0 0 18px 2px rgba(80, 160, 180, 0.28); }
}

#view-place.theme-plaza-mercado .place-hero {
  background:
    linear-gradient(180deg, #f7e8c8 0%, #e8d4a8 100%);
  color: #4a3420;
  border: 1px solid #c4a060;
}
#view-place.theme-plaza-mercado .place-ambient::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 18%;
  width: 42%;
  height: 10px;
  border-radius: 2px;
  background: rgba(180, 60, 50, 0.35);
  transform-origin: 50% 0%;
  animation: banner-sway 3.8s ease-in-out infinite;
}

#view-place.theme-piedra-sagrada .place-hero {
  background: linear-gradient(180deg, #3a3548 0%, #252230 100%);
  color: #e8e0d0;
  border: 1px solid #6a6080;
}
#view-place.theme-piedra-sagrada .place-ambient::before {
  content: "";
  position: absolute;
  bottom: 18%;
  left: 50%;
  width: 5px;
  height: 10px;
  margin-left: -2px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #ffe08a, #ff8a2a 70%, transparent);
  animation: candle-flicker 1.1s ease-in-out infinite alternate;
  box-shadow: 0 0 12px rgba(255, 180, 60, 0.55);
}

#view-place.theme-cultura .place-hero {
  background: linear-gradient(180deg, #4a3e55 0%, #2e2838 100%);
  color: #f0e8f8;
  border: 1px solid #7a6a90;
}
#view-place.theme-cultura .place-desc {
  background-image: linear-gradient(100deg, transparent, rgba(220, 190, 255, 0.12), transparent);
  background-size: 200% 100%;
  animation: page-shimmer 8s linear infinite;
}

#view-place.theme-bolson .place-hero {
  background: linear-gradient(180deg, #5a7048 0%, #3a4a32 100%);
  color: #f3efe4;
  border: 1px solid #8a9a6a;
}
#view-place.theme-civico .place-hero {
  /* sutil: sin forzar color fuerte */
}

/* —— Mi casa bolsón: humo, ventanas, puerta —— */
.view-casa-bolson .casa-bolson-door { position: relative; }
.view-casa-bolson .casa-fachada-humo {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 40px;
  height: 48px;
  margin-left: -20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 2;
}
.view-casa-bolson.chimenea-on .casa-fachada-humo { opacity: 1; }
.view-casa-bolson .casa-chimenea-visual { position: relative; }
.view-casa-bolson .casa-chimenea-humo {
  position: absolute;
  left: 50%;
  bottom: 52px;
  width: 36px;
  height: 40px;
  margin-left: -18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s;
  z-index: 2;
}
.view-casa-bolson .casa-chimenea-panel.chimenea-on .casa-chimenea-humo { opacity: 1; }
.view-casa-bolson .humo {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: rgba(180, 180, 185, 0.35);
  opacity: 0;
  animation: smoke-rise 2.8s ease-out infinite;
  will-change: transform, opacity;
}
.view-casa-bolson .humo.h2 { animation-delay: 0.7s; width: 12px; height: 12px; margin-left: -6px; }
.view-casa-bolson .humo.h3 { animation-delay: 1.4s; width: 8px; height: 8px; margin-left: -4px; }
@keyframes smoke-rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  20%  { opacity: 0.45; }
  100% { transform: translate3d(6px, -42px, 0) scale(1.5); opacity: 0; }
}

/* Pulso de luz en ventanas redondas (más fuerte de noche) */
.view-casa-bolson .casa-ventana-redonda,
.view-casa-bolson .casa-bolson-window {
  animation: window-pulse-dia 5s ease-in-out infinite;
}
.view-casa-bolson.tod-noche .casa-ventana-redonda,
.view-casa-bolson.tod-noche .casa-bolson-window {
  animation: window-pulse-noche 3.2s ease-in-out infinite;
}
@keyframes window-pulse-dia {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.06); }
}
@keyframes window-pulse-noche {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 14px rgba(255, 180, 60, 0.55); }
  50% { filter: brightness(1.15); box-shadow: 0 0 22px rgba(255, 180, 60, 0.85); }
}

/* Brillo suave de puerta abierta/cerrada */
.view-casa-bolson.puerta-cerrada .casa-bolson-round-door {
  animation: door-glow-closed 4s ease-in-out infinite;
}
.view-casa-bolson.puerta-abierta .casa-bolson-round-door {
  animation: door-glow-open 3s ease-in-out infinite;
  box-shadow: 0 0 16px rgba(232, 194, 106, 0.45);
}
@keyframes door-glow-closed {
  0%, 100% { box-shadow: 0 0 4px rgba(92, 64, 48, 0.35); }
  50% { box-shadow: 0 0 10px rgba(232, 194, 106, 0.25); }
}
@keyframes door-glow-open {
  0%, 100% { box-shadow: 0 0 12px rgba(232, 194, 106, 0.35); }
  50% { box-shadow: 0 0 22px rgba(232, 194, 106, 0.6); }
}

/* —— Calles: idle bob + bandera de mercado —— */
.street-building.pin-idle-bob {
  animation: pin-idle-bob 3.6s ease-in-out infinite;
  will-change: transform;
}
.street-building.pin-idle-bob:nth-child(odd) { animation-delay: -1.2s; }
.street-building.pin-idle-bob:nth-child(3n) { animation-delay: -2.1s; }
@keyframes pin-idle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.street-building .pin-banner {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 16px;
  height: 10px;
  margin-left: -8px;
  border-radius: 1px 1px 3px 3px;
  background: linear-gradient(90deg, #c44, #e88 50%, #c44);
  transform-origin: top center;
  opacity: 0;
  pointer-events: none;
}
.city-streets.dia-mercado .street-building.pin-mercado .pin-banner {
  opacity: 0.9;
  animation: banner-sway 2.8s ease-in-out infinite;
}
@keyframes banner-sway {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(7deg); }
}

/* Juego limpio: no spam de animaciones cívicas en Calles */
.city-streets.modo-juego-limpio .street-building.pin-idle-bob {
  animation: none;
}
.city-streets.modo-juego-limpio .street-building .pin-banner {
  display: none;
}

/* —— VitaInk pins —— */
.vita-bot-pin {
  --vita-aura: color-mix(in srgb, var(--vita-bot-color, #6366f1) 55%, transparent);
}
.vita-bot-pin::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--vita-aura), transparent 70%);
  opacity: 0.55;
  animation: alma-aura 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes alma-aura {
  0%, 100% { transform: scale(0.92); opacity: 0.35; }
  50% { transform: scale(1.12); opacity: 0.7; }
}

.vita-ermita-pin {
  position: relative;
}
.vita-ermita-pin::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 4px;
  height: 7px;
  margin-left: -2px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #ffe08a, #ff8a2a 70%, transparent);
  box-shadow: 0 0 8px rgba(255, 180, 60, 0.65);
  animation: candle-flicker 1.05s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes candle-flicker {
  from { opacity: 0.65; transform: scaleY(0.9) translateY(1px); }
  to { opacity: 1; transform: scaleY(1.12) translateY(-1px); }
}

.vita-tesoro-pin:not(.claimed) {
  position: relative;
  animation: tesoro-sparkle 2.2s ease-in-out infinite;
}
.vita-tesoro-pin:not(.claimed)::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.45);
  animation: tesoro-ring 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes tesoro-sparkle {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.25); transform: scale(1.06); }
}
@keyframes tesoro-ring {
  0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.5); opacity: 1; }
  100% { box-shadow: 0 0 0 10px rgba(250, 204, 21, 0); opacity: 0; }
}

/* Sede conquistada: estandarte tenue */
.street-building.vitaink-owned[data-vitaink="conquistado"] .pin-vitaink {
  display: inline-block;
  transform-origin: top center;
  animation: conquista-banner 3.4s ease-in-out infinite;
}
.street-building.vitaink-owned[data-vitaink="conquistado"]::after {
  content: "";
  position: absolute;
  top: -8px;
  right: 2px;
  width: 10px;
  height: 14px;
  background: color-mix(in srgb, var(--vita-color, #94a3b8) 70%, transparent);
  border-radius: 0 0 3px 3px;
  transform-origin: top center;
  animation: banner-sway 3.2s ease-in-out infinite;
  opacity: 0.75;
  pointer-events: none;
}
@keyframes conquista-banner {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(5deg); }
}

/* Accesibilidad: sin movimiento */
@media (prefers-reduced-motion: reduce) {
  .place-ambient .dust-mote,
  .place-ambient .leaf,
  #view-place.theme-torre-academia .place-hero,
  #view-place.theme-torre-academia .place-hero::before,
  #view-place.theme-torre-academia .place-hero::after,
  #view-place.theme-torre-academia .place-desc,
  #view-place.theme-torre-academia .place-theme-banner,
  #view-place.theme-piedra-civica .place-ambient::before,
  #view-place.theme-piedra-civica .place-ambient::after,
  #view-place.theme-plaza-mercado .place-ambient::before,
  #view-place.theme-piedra-sagrada .place-ambient::before,
  #view-place.theme-cultura .place-desc,
  #view-place.theme-salud-suave .place-hero,
  .view-casa-bolson .humo,
  .view-casa-bolson .casa-ventana-redonda,
  .view-casa-bolson .casa-bolson-window,
  .view-casa-bolson.puerta-cerrada .casa-bolson-round-door,
  .view-casa-bolson.puerta-abierta .casa-bolson-round-door,
  .street-building.pin-idle-bob,
  .street-building .pin-banner,
  .vita-bot-pin::before,
  .vita-ermita-pin::after,
  .vita-tesoro-pin:not(.claimed),
  .vita-tesoro-pin:not(.claimed)::after,
  .street-building.vitaink-owned[data-vitaink="conquistado"] .pin-vitaink,
  .street-building.vitaink-owned[data-vitaink="conquistado"]::after {
    animation: none !important;
  }
}

/* v5.10 — fichas remotas del Taller (solo lectura) */
.tool-card.taller-remote {
  opacity: 0.92;
  border-style: dashed;
  cursor: default;
}
.tool-card.taller-remote .hint {
  font-size: 0.85em;
  opacity: 0.8;
}

/* —— v5.18 HUD aventura VitaInk (iconos lote 1) ——
   Franja ligera sobre Calles: corazones, stamina, monedas + atajos.
   Solo visible con VitaInk ON; no ensucia el modo cívico. */
.vitaink-adventure-hud {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 8px;
  padding: 6px 8px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface, #fff) 88%, #e8f5e9);
  border: 1px solid color-mix(in srgb, #52b788 35%, var(--border, #d6d3d1));
  box-shadow: 0 2px 10px rgba(27, 67, 50, 0.08);
  pointer-events: auto;
}
.vitaink-adventure-hud:not(.hidden) {
  display: flex;
}
/* Cívico / VitaInk OFF: oculto (atributo hidden + clase) */
.vitaink-adventure-hud.hidden {
  display: none !important;
}
.vah-vitals {
  display: flex;
  align-items: center;
  gap: 0.55rem 0.75rem;
  flex-wrap: wrap;
  min-width: 0;
}
.vah-hearts,
.vah-stamina {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.vah-icon {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.vah-hearts .vah-icon,
.vah-stamina .vah-icon {
  width: 36px;
  height: 36px;
}
.vah-coins {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-size: 0.95rem;
  color: #1b4332;
  min-height: 44px;
}
.vah-coin-count {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.vah-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.vah-btn {
  appearance: none;
  border: 1px solid transparent;
  background: color-mix(in srgb, #fff 70%, #d8f3dc);
  border-radius: 12px;
  padding: 4px;
  min-width: 52px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 4px rgba(27, 67, 50, 0.12);
}
.vah-btn:active { transform: scale(0.96); }
.vah-btn:focus-visible {
  outline: 2px solid #457b9d;
  outline-offset: 2px;
}
.vah-btn .vah-icon {
  width: 44px;
  height: 44px;
}
/* Modo juego limpio: franja más compacta, sigue visible */
body.juego-limpio-on .vitaink-adventure-hud {
  margin-bottom: 4px;
  padding: 4px 6px;
  background: color-mix(in srgb, var(--surface, #fff) 78%, #d8f3dc);
}
body.juego-limpio-on .vah-icon {
  width: 32px;
  height: 32px;
}
body.juego-limpio-on .vah-hearts .vah-icon,
body.juego-limpio-on .vah-stamina .vah-icon {
  width: 28px;
  height: 28px;
}
body.juego-limpio-on .vah-btn {
  min-width: 48px;
  min-height: 48px;
  padding: 2px;
}
body.juego-limpio-on .vah-btn .vah-icon {
  width: 40px;
  height: 40px;
}
@media (max-width: 480px) {
  .vitaink-adventure-hud {
    gap: 0.35rem;
    padding: 4px 6px;
  }
  .vah-icon {
    width: 32px;
    height: 32px;
  }
  .vah-hearts .vah-icon,
  .vah-stamina .vah-icon {
    width: 28px;
    height: 28px;
  }
  .vah-btn {
    min-width: 48px;
    min-height: 48px;
  }
  .vah-btn .vah-icon {
    width: 40px;
    height: 40px;
  }
  .vah-coin-count { font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vah-btn:active { transform: none; }
}