/* =========================================================
   Mapa municipal del desarrollo sostenible (prototipo)
   Usa los tokens de marca de styles.css (--pink, --gold, --peri, --cream, --ink).
   Colores por categoría: variables temporales fáciles de sustituir.
   ========================================================= */
.mdm {
  /* ↓ Sustituir aquí si cambia el sistema de color por categoría */
  --cat-institutional: var(--peri);
  --cat-economic: var(--gold);
  --cat-social: var(--pink);
  --cat-environmental: var(--ink);
  position: relative;
}
[data-cat="institutional"] { --cat: var(--cat-institutional); }
[data-cat="economic"] { --cat: var(--cat-economic); }
[data-cat="social"] { --cat: var(--cat-social); }
[data-cat="environmental"] { --cat: var(--cat-environmental); --on-cat: var(--cream); }
[data-cat] { --on-cat: var(--ink); }
[data-cat="environmental"] { --on-cat: var(--cream); }

.mdm__stage { position: relative; max-width: 1120px; margin-inline: auto; }
.mdm__map { position: relative; width: min(100%, 720px); margin-inline: auto; container-type: inline-size; }
.mdm__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ----- SVG ----- */
.guide { fill: none; stroke: var(--ink); stroke-opacity: .18; stroke-width: 1; stroke-dasharray: 2 5; transition: opacity .8s; }
.core { fill: var(--ink); }

.slice {
  cursor: pointer; outline: none;
  transform-box: fill-box; transform-origin: center;
  transition: transform .28s var(--ease), opacity .28s var(--ease);
}
.slice .hit { fill: rgba(0, 0, 0, 0); }
.slice .track { fill: var(--cat); fill-opacity: .08; stroke: var(--cat); stroke-opacity: .45; stroke-width: 1; transition: fill-opacity .25s; }
.slice .face { fill: var(--cat); fill-opacity: .4; stroke: var(--ink); stroke-opacity: 0; stroke-width: 2; transition: fill-opacity .25s, stroke-opacity .2s; }
.slice .cap { fill: var(--cat); }
.slice .num { font: 600 9px var(--f-body); fill: var(--ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; transition: fill .2s; }

.slice:hover .face, .slice.is-hl .face { fill-opacity: .7; }
.slice.is-hl .track { fill-opacity: .3; }
.slice.is-hl .num { fill: var(--on-cat); }
.slice.is-active { transform: translate(var(--dx), var(--dy)) scale(1.035); }
.slice.is-active .face { fill-opacity: 1; }
.slice.is-active .track { fill-opacity: .55; }
.slice.is-active .num { fill: var(--on-cat); }
.slice:focus-visible .face { stroke-opacity: 1; }
.slice[data-cat="environmental"]:focus-visible .face { stroke: var(--pink); }

.mdm.has-focus .slice { opacity: .5; }
.mdm.has-focus .slice.is-sib { opacity: .85; }
.slice.is-sib .face { fill-opacity: .5; }
.mdm.has-focus .slice.is-hl, .mdm.has-focus .slice.is-active { opacity: 1; }

.arc { fill: none; stroke: var(--cat); stroke-width: 4; stroke-linecap: round; opacity: .7; transition: opacity .25s, stroke-width .25s; }
.arc-hit { fill: none; stroke: transparent; stroke-width: 26; cursor: pointer; }
.catnum { font: 400 12px var(--f-display); fill: var(--cat); text-anchor: middle; dominant-baseline: central; opacity: .85; transition: opacity .25s; }
.arc.is-on { opacity: 1; stroke-width: 6; }
.catnum.is-on { opacity: 1; }
.mdm.has-focus .arc:not(.is-on), .mdm.has-focus .catnum:not(.is-on) { opacity: .45; }

/* ----- Centro ----- */
.mdm__center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 23%; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .55em; text-align: center; padding: 6%;
  pointer-events: none;
}
.mdm__center img { width: 82%; }
.mdm__cap { font: 500 max(.62rem, 1.45cqw)/1.3 var(--f-body); color: rgba(250, 249, 247, .7); text-wrap: balance; }
.mdm__cn { font: 400 max(1.1rem, 3.6cqw)/1 var(--f-display); color: var(--cat, var(--cream)); }
.mdm__cs { font: 600 max(.62rem, 1.5cqw)/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); white-space: nowrap; }
.mdm__center[data-mode="slice"], .mdm__center[data-mode="cat"] { animation: fade .25s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translate(-50%, -50%) scale(.94); } }

/* ----- Etiquetas de categoría ----- */
.mdm__cats { position: absolute; inset: 0; pointer-events: none; }
.mdm__catitem { position: absolute; max-width: 228px; pointer-events: auto; }
.mdm__catitem[data-cat="institutional"] { top: 4%; left: 0; }
.mdm__catitem[data-cat="economic"] { top: 4%; right: 0; }
.mdm__catitem[data-cat="social"] { bottom: 4%; right: 0; }
.mdm__catitem[data-cat="environmental"] { bottom: 4%; left: 0; }
.mdm__cat {
  display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem; align-items: center; width: 100%; text-align: left;
  color: var(--ink); background: #fff; border: 1px solid var(--line-light); border-radius: 18px;
  padding: .85rem 1rem; cursor: pointer; font-family: var(--f-body);
  transition: background .25s, border-color .25s, color .25s, opacity .25s;
}
.mdm__catitem[data-cat="economic"] .mdm__cat, .mdm__catitem[data-cat="social"] .mdm__cat { text-align: left; }
.mdm__catnum { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cat); color: var(--on-cat); font: 400 .75rem/1 var(--f-display); }
.mdm__catname { font: 600 .74rem/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; }
.mdm__catcount { grid-column: 2; font-size: .8rem; color: var(--ink-soft); transition: color .25s; }
.mdm__cat:hover, .mdm__cat.is-on { background: var(--cat); border-color: var(--cat); color: var(--on-cat); }
.mdm__cat:hover .mdm__catcount, .mdm__cat.is-on .mdm__catcount { color: var(--on-cat); opacity: .8; }
.mdm__cat:hover .mdm__catnum, .mdm__cat.is-on .mdm__catnum { background: var(--on-cat); color: var(--cat); }
.mdm.has-focus .mdm__cat:not(.is-on) { opacity: .6; }

/* ----- Tooltip / tarjeta de indicador ----- */
.ic { display: grid; gap: .15rem; }
.ic__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.ic__badge { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cat); border: 1.5px solid var(--cream); font: 400 .7rem/1 var(--f-display); color: var(--on-cat); }
.ic__pos { font: 600 .74rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(250, 249, 247, .7); }
.ic__k { font: 600 .68rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-top: .6rem; }
.ic__cat { font: 500 .95rem/1.35 var(--f-body); color: var(--cream); }
.ic__name { font: 400 1.12rem/1.3 var(--f-display); letter-spacing: -.01em; color: var(--cream); text-wrap: balance; }

.mdm__tip {
  position: absolute; z-index: 5; width: 310px; padding: 1.15rem 1.3rem; border-radius: 20px;
  background: var(--ink); color: var(--cream); pointer-events: none;
  box-shadow: 0 24px 50px -24px rgba(11, 10, 14, .55);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), left .22s var(--ease), top .22s var(--ease), visibility .2s;
}
.mdm__tip.is-on { opacity: 1; visibility: visible; transform: none; }
.mdm__tip.no-move { transition: none; }
.mdm__tip.swap .ic { animation: swap .25s var(--ease); }
@keyframes swap { from { opacity: .3; transform: translateY(4px); } }

/* ----- Panel móvil ----- */
.mdm__detail { display: none; }

/* ----- Animación de entrada ----- */
.shape { transform-box: fill-box; transform-origin: center; transition: opacity .6s var(--ease) calc(var(--i, 0) * 22ms), transform .6s var(--ease) calc(var(--i, 0) * 22ms); }
.mdm:not(.is-ready) .shape { opacity: 0; transform: scale(.92); }
.mdm:not(.is-ready) .guide { opacity: 0; }
.arcs { transition: opacity .7s var(--ease) .9s; }
.mdm:not(.is-ready) .arcs { opacity: 0; }
.mdm__catitem { transition: opacity .6s var(--ease) 1.1s, transform .6s var(--ease) 1.1s; }
.mdm:not(.is-ready) .mdm__catitem { opacity: 0; transform: translateY(10px); }
.mdm__center { transition: opacity .6s var(--ease) .4s; }
.mdm:not(.is-ready) .mdm__center { opacity: 0; }

/* ----- Responsive ----- */
@media (max-width: 1000px) and (min-width: 761px) {
  .mdm__map { width: min(62vw, 560px); }
  .mdm__catitem { max-width: 190px; }
  .mdm__cat { padding: .7rem .85rem; }
  .mdm__catname { font-size: .68rem; }
}

@media (max-width: 760px) {
  .mdm__cats { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 1.75rem; pointer-events: auto; }
  .mdm__catitem { position: static !important; max-width: none; }
  .mdm__cat { grid-template-columns: 1fr; justify-items: start; gap: .5rem; padding: .85rem; height: 100%; }
  .mdm__catnum { grid-row: auto; width: 30px; height: 30px; }
  .mdm__catname { font-size: .66rem; letter-spacing: .05em; }
  .mdm__catcount { grid-column: auto; }
  .mdm__tip { display: none; }
  .slice .num { display: none; }

  .mdm__detail { display: block; margin-top: 1.5rem; padding: 1.25rem; border-radius: 22px; background: var(--ink); color: var(--cream); }
  .mdm__hint { font-size: .95rem; color: rgba(250, 249, 247, .75); }
  .mdm__detail.has-item .mdm__hint { display: none; }
  .mdm__detail [data-detail-body]:empty { display: none; }
  .mdm__steps .btn--ghost { background: transparent; color: var(--cream); border-color: rgba(250, 249, 247, .45); }
  .mdm__steps .btn--ghost:hover { background: rgba(250, 249, 247, .1); border-color: var(--cream); }
  .mdm__steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 1.1rem; }
  .mdm__cap { display: none; }
  .mdm__center { gap: 0; }
  .mdm__center img { width: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  .shape, .arcs, .mdm__catitem, .mdm__center, .guide { transition: none !important; }
}

/* Categoría en tinta: su número en el centro (fondo tinta) va en crema */
.mdm__center[data-cat="environmental"] .mdm__cn { color: var(--cream); }