:root{--ink:#102e38;--deep:#0d2933;--mint:#20dc89;--lime:#b7f45b;--paper:#f7fbf9;--muted:#647c82}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}button,input,select,textarea{font:inherit}button{-webkit-tap-highlight-color:transparent}.app{min-height:100vh;display:grid;grid-template-columns:365px minmax(0,1fr)}aside{background:var(--deep);color:#effff8;padding:28px 25px;display:flex;flex-direction:column;gap:21px;box-shadow:10px 0 30px rgba(10,38,45,.12);z-index:3}.brand{display:flex;gap:13px;align-items:center}.brand-mark{width:42px;height:42px;border-radius:50%;background:var(--mint);position:relative;box-shadow:0 0 0 7px rgba(32,220,137,.12)}.brand-mark:after{content:"";position:absolute;width:27px;height:2px;background:var(--deep);top:20px;left:7px;transform:skewY(-28deg);box-shadow:8px -7px 0 -.5px var(--deep)}.brand h1{font-size:1.04rem;letter-spacing:.03em;margin:0}.brand small{display:block;font-size:.75rem;opacity:.64;margin-top:2px}.mode{display:grid;grid-template-columns:1fr 1fr;gap:7px;background:rgba(255,255,255,.08);padding:5px;border-radius:14px}.mode button{border:0;color:#d4e7e1;background:transparent;padding:10px 7px;border-radius:10px;cursor:pointer;font-weight:700;font-size:.9rem}.mode button.active{color:var(--deep);background:var(--mint)}.field-label{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#9fc2b9;display:block;margin-bottom:8px}.levels{display:flex;gap:8px}.level-btn{flex:1;text-align:left;padding:11px;border:1px solid rgba(255,255,255,.18);background:transparent;color:white;border-radius:10px;cursor:pointer}.level-btn span{display:block;font-size:.75rem;opacity:.68}.level-btn strong{font-size:.9rem}.level-btn.active{background:rgba(32,220,137,.15);border-color:var(--mint)}form{display:grid;gap:12px}input,textarea,select{width:100%;border-radius:10px;padding:11px 12px;color:var(--ink);background:#fff;border:1px solid transparent;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(32,220,137,.17)}textarea{min-height:62px;resize:vertical}.long-text{min-height:96px}.form-pair{display:grid;grid-template-columns:1fr 74px;gap:10px;align-items:end}input[type=color]{height:42px;padding:4px;cursor:pointer}.position-note{font-size:.8rem;line-height:1.4;color:#b9d2cb;background:rgba(255,255,255,.06);padding:10px 11px;border-radius:9px;margin:0}.form-actions{display:grid;grid-template-columns:1fr auto;gap:8px}.add{border:0;border-radius:11px;padding:12px;background:var(--mint);color:var(--deep);font-weight:850;cursor:pointer}.add:hover{background:var(--lime)}.cancel-edit{border:1px solid rgba(255,255,255,.2);border-radius:11px;padding:11px;background:transparent;color:white;cursor:pointer}.cancel-edit[hidden]{display:none}.works{margin-top:auto;min-height:90px}.works h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 9px;color:#9fc2b9}#workList{display:grid;gap:7px;max-height:190px;overflow:auto;padding-right:2px}.work-row{display:flex;align-items:center;gap:8px;padding:9px;background:rgba(255,255,255,.07);border-radius:9px}.work-row input[type=color]{width:25px;height:25px;flex:none;padding:1px;border:0;border-radius:50%;background:transparent}.work-row div{min-width:0;flex:1}.work-row b{display:block;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.work-row small{color:#aad0c6;font-size:.72rem}.delete{border:0;background:transparent;color:#abc6c0;cursor:pointer;font-size:1.1rem}main{min-width:0;padding:25px 28px 30px;display:flex;flex-direction:column}.top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.top h2{font-size:1.5rem;margin:0;letter-spacing:-.04em}.top p{margin:5px 0 0;color:var(--muted);font-size:.9rem}.legend{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end;font-size:.78rem;color:#587078;align-items:center}.legend span{display:flex;gap:6px;align-items:center}.line-built,.line-future{width:23px;display:inline-block;border-radius:4px}.line-built{border-top:3px solid #929b98}.line-future{border-top:1px solid #00d800}
.map-shell{flex:1;min-height:600px;position:relative;border:1px solid #e3efeb;border-radius:22px;overflow:hidden;background:white;box-shadow:0 12px 35px rgba(27,66,69,.08)}.map-wrap{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain}.map-stage{position:relative;min-width:100%;min-height:100%}.map-world{position:absolute;transform:translate(-50%,-50%);user-select:none}.map{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.markers{position:absolute;inset:0}.map-shell.adding .map-wrap{cursor:crosshair}.add-hint{position:absolute;left:50%;top:16px;transform:translateX(-50%);background:var(--deep);color:white;padding:9px 13px;border-radius:100px;font-size:.8rem;box-shadow:0 8px 20px rgba(0,0,0,.16);z-index:5;pointer-events:none;display:none;white-space:nowrap}.map-shell.adding .add-hint{display:block}.marker{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border:2px solid rgba(255,255,255,.9);border-radius:50%;color:var(--deep);cursor:grab;z-index:2;touch-action:none;box-shadow:0 2px 8px rgba(5,38,44,.28)}.marker:active{cursor:grabbing}.marker:before,.marker:after{content:"";position:absolute;inset:-7px;border:1px solid var(--marker-color);border-radius:50%;animation:pulse 2.3s ease-out infinite;pointer-events:none}.marker:after{animation-delay:1.15s}.marker .dot{display:block;width:7px;height:7px;background:var(--deep);border-radius:50%;margin:auto}.marker.dragging{z-index:6}.pin-preview{position:absolute;transform:translate(-50%,-50%);width:16px;height:16px;border:3px solid white;border-radius:50%;background:var(--deep);box-shadow:0 0 0 4px var(--mint);pointer-events:none}.card{position:absolute;transform:translate(-50%,calc(-100% - 19px));width:310px;max-width:calc(100vw - 55px);padding:14px;background:var(--deep);color:white;border-radius:12px;box-shadow:0 10px 25px rgba(3,32,38,.28);z-index:4;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.card.visible{opacity:1;visibility:visible}.card:after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:var(--deep);transform:translateX(-50%) rotate(45deg)}.card .location{color:#a8d7c9;display:block;margin:3px 0 10px;font-size:.76rem}.card strong{display:block;font-size:.95rem}.schedule{border-top:1px solid rgba(255,255,255,.13);padding-top:8px;margin-top:7px}.schedule b{color:var(--mint);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em}.schedule p{margin:3px 0 0;font-size:.76rem;color:#d7eeea;line-height:1.4;white-space:pre-wrap}.zoom-controls{position:absolute;right:15px;bottom:15px;display:grid;grid-template-columns:42px 62px 42px;gap:2px;z-index:7;filter:drop-shadow(0 5px 12px rgba(16,46,56,.18))}.zoom-controls button{height:42px;border:1px solid #d8e7e3;background:white;color:var(--ink);cursor:pointer;font-weight:850}.zoom-controls button:first-child{border-radius:10px 0 0 10px}.zoom-controls button:last-child{border-radius:0 10px 10px 0}.zoom-controls button:hover{background:#edfaf5}#zoomReset{font-size:.76rem}.view-actions{display:none;position:absolute;left:15px;top:15px;z-index:8;gap:7px}.view-actions button{border:0;border-radius:11px;padding:11px 15px;background:var(--deep);color:white;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(13,41,51,.22)}.view-actions button:hover{background:#17404c}.view-actions button[hidden]{display:none}.view-mode .app{grid-template-columns:1fr}.view-mode aside{display:none}.view-mode .view-actions{display:grid}.view-mode main{padding:20px}.empty{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:4}.empty div{max-width:300px;text-align:center;color:#5b7378;background:rgba(255,255,255,.9);padding:17px;border-radius:14px;border:1px solid #dcece7}.empty b{color:var(--ink);display:block;margin-bottom:4px}@keyframes pulse{0%{transform:scale(.7);opacity:.85}75%,100%{transform:scale(1.9);opacity:0}}@media(prefers-reduced-motion:reduce){.marker:before,.marker:after{animation:none}}@media(max-width:880px){.app{grid-template-columns:1fr}aside{padding:18px;gap:16px}.works{margin-top:0}#workList{max-height:135px}main{padding:20px 15px}.view-mode main{padding:14px}.map-shell{min-height:520px}}@media(max-width:560px){.top{display:block}.legend{margin-top:12px;justify-content:flex-start}.map-shell{min-height:470px}.add-hint{top:10px;font-size:.72rem}.view-actions{left:10px;top:10px}}

.top p:empty{display:none}.card{--shift-x:0px;--shift-y:0px;--arrow-x:50%;--arrow-y:50%;max-width:none;overflow:visible}.card.card-top{transform:translate(calc(-50% + var(--shift-x)),calc(-100% - 19px + var(--shift-y)))}.card.card-bottom{transform:translate(calc(-50% + var(--shift-x)),calc(19px + var(--shift-y)))}.card.card-left{transform:translate(calc(-100% - 19px + var(--shift-x)),calc(-50% + var(--shift-y)))}.card.card-right{transform:translate(calc(19px + var(--shift-x)),calc(-50% + var(--shift-y)))}.card.card-top:after{left:var(--arrow-x);right:auto;top:auto;bottom:-6px}.card.card-bottom:after{left:var(--arrow-x);right:auto;top:-6px;bottom:auto}.card.card-left:after{left:auto;right:-6px;top:var(--arrow-y);bottom:auto}.card.card-right:after{left:-6px;right:auto;top:var(--arrow-y);bottom:auto}.card-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}.card-details .schedule{min-width:0}.card-details .schedule p{overflow-wrap:anywhere;word-break:break-word}.card-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;margin-bottom:8px}.card-heading-copy{min-width:0}.card-heading .location{margin-bottom:0}.progress-ring{--progress:0;--progress-color:#dc3545;width:68px;height:68px;flex:none;position:relative;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--progress-color) calc(var(--progress)*1%),rgba(255,255,255,.14) 0);box-shadow:0 0 0 2px var(--progress-color),0 4px 13px rgba(0,0,0,.18)}.progress-ring:before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--deep)}.progress-ring-value,.progress-ring-label{position:relative;z-index:1;line-height:1}.progress-ring-value{font-weight:900;font-size:.88rem;color:var(--progress-color)}.progress-ring-label{position:absolute;top:43px;color:#a8d7c9;font-size:.52rem;text-transform:uppercase;letter-spacing:.06em}.progress-control{display:grid;grid-template-columns:minmax(0,1fr) 82px;gap:10px;align-items:center}.progress-control input[type=range]{padding:0;accent-color:var(--mint);box-shadow:none;background:transparent}.progress-number{position:relative}.progress-number input{padding-right:25px;text-align:right}.progress-number span{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:#587078;font-size:.82rem;pointer-events:none}.works-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}.works .works-head h2{margin:0}.transfer-actions{display:flex;gap:5px}.transfer-button{border:1px solid rgba(255,255,255,.2);border-radius:7px;padding:5px 7px;background:rgba(255,255,255,.07);color:#dff8f0;font-size:.68rem;font-weight:750;cursor:pointer}.transfer-button:hover,.transfer-button:focus-visible{border-color:var(--mint);background:rgba(32,220,137,.14);outline:none}.transfer-status{min-height:1.15em;margin:6px 0 0;color:#afd0c7;font-size:.7rem;line-height:1.35}.transfer-status.error{color:#ffb4aa}.import-dialog{width:min(440px,calc(100vw - 30px));border:0;border-radius:16px;padding:0;background:#f7fbf9;color:var(--ink);box-shadow:0 20px 65px rgba(3,32,38,.35)}.import-dialog::backdrop{background:rgba(4,25,31,.7)}.import-dialog-inner{padding:22px}.import-dialog h3{margin:0 0 8px;font-size:1.12rem}.import-dialog p{margin:0;color:#587078;line-height:1.45;font-size:.88rem}.import-dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}.import-dialog button{border:0;border-radius:10px;padding:11px;font-weight:800;cursor:pointer}.import-dialog .combine{background:var(--mint);color:var(--deep)}.import-dialog .replace{background:#173e49;color:white}.import-dialog .cancel{grid-column:1/-1;background:#e6efec;color:var(--ink)}@media(max-width:620px){.card-details{grid-template-columns:1fr}}

/* Variante experimental: movimiento sutil únicamente durante el loop del visor. */
.card.loop-card.visible {
  animation: loopCardIn .5s cubic-bezier(.2,.78,.25,1) both;
}

.card.loop-card .progress-ring {
  animation: loopRingIn .62s .08s cubic-bezier(.2,.78,.25,1) both;
}

.card.loop-card .schedule {
  animation: loopDetailIn .38s ease-out both;
}

.card.loop-card .schedule:nth-child(1) { animation-delay: .10s; }
.card.loop-card .schedule:nth-child(2) { animation-delay: .15s; }
.card.loop-card .schedule:nth-child(3) { animation-delay: .20s; }
.card.loop-card .schedule:nth-child(4) { animation-delay: .25s; }

.marker.loop-focus {
  z-index: 5;
  animation: loopMarkerFocus .72s cubic-bezier(.2,.78,.25,1) both;
}

.marker.loop-focus:before {
  border-width: 2px;
  animation-duration: 1.65s;
}

.map-world.loop-level-change {
  animation: loopLevelReveal .58s ease-out both;
}

@keyframes loopCardIn {
  0% { opacity: 0; filter: blur(4px); scale: .96; translate: 0 8px; }
  100% { opacity: 1; filter: blur(0); scale: 1; translate: 0 0; }
}

@keyframes loopRingIn {
  0% { opacity: 0; scale: .84; rotate: -12deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}

@keyframes loopDetailIn {
  0% { opacity: 0; translate: 0 5px; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes loopMarkerFocus {
  0% { scale: 1; filter: brightness(1); }
  55% { scale: 1.2; filter: brightness(1.12); }
  100% { scale: 1.08; filter: brightness(1.05); }
}

@keyframes loopLevelReveal {
  0% { opacity: .62; filter: blur(2px); }
  100% { opacity: 1; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .card.loop-card.visible,
  .card.loop-card .progress-ring,
  .card.loop-card .schedule,
  .marker.loop-focus,
  .map-world.loop-level-change {
    animation: none;
  }
}

.top-title {
  min-width: 0;
  flex: 1;
}

.compliance-metric {
  width: 112px;
  flex: 0 0 112px;
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
}

.compliance-box {
  position: relative;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 2px solid #173e49;
  border-radius: 8px;
  background: #e7efec;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 5px 15px rgba(16,46,56,.12);
}

.compliance-fill {
  position: absolute;
  inset: auto 0 0;
  height: 0%;
  background: var(--compliance-color, #dc3545);
  transition: height .55s cubic-bezier(.2,.78,.25,1), background-color .35s ease;
}

.compliance-value {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #102e38;
  font-size: 1rem;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(255,255,255,.9);
}

.compliance-label {
  color: #587078;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.15;
}

aside form {
  font-size: .88rem;
}

aside .field-label {
  font-size: .7rem;
  margin-bottom: 6px;
}

aside input,
aside textarea,
aside select {
  font-size: .84rem;
}

aside .work-row b {
  font-size: .76rem;
}

aside .work-row small {
  font-size: .66rem;
}

.program-assignment {
  margin: 0;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
}

.program-options {
  display: grid;
  gap: 7px;
}

.program-option {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e2f3ee;
  font-size: .78rem;
  line-height: 1.2;
  cursor: pointer;
}

.program-option input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  accent-color: var(--mint);
}

.program-option.exclusive {
  color: #b9d2cb;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.program-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 8px;
}

.program-badge {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(32,220,137,.14);
  color: #9ff0c9;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.program-badge.none {
  background: rgba(255,255,255,.1);
  color: #c5d8d3;
}

.map-wrap {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  cursor: grab;
}

.map-shell.adding .map-wrap {
  cursor: grab;
}

.map-wrap.panning {
  cursor: grabbing;
}

.map-stage {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  overflow: hidden;
}

.map-world {
  --live-scale: 1;
  --inverse-live-scale: 1;
  transform-origin: 0 0;
  transform: translate3d(var(--pan-x, 0px), var(--pan-y, 0px), 0) scale(var(--live-scale)) translate(-50%, -50%);
  will-change: transform;
}

.map-world.live-zoom .marker,
.map-world.live-zoom .pin-preview {
  transform: translate(-50%, -50%) scale(var(--inverse-live-scale));
}

.map-world.live-zoom .card.visible {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.app {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

aside {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

main {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.map-shell {
  min-height: 0;
}

@media (max-width: 880px) {
  .app {
    grid-template-rows: minmax(0, 46%) minmax(0, 54%);
  }

  .view-mode .app {
    grid-template-rows: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .top {
    display: flex;
    align-items: flex-start;
  }
  .top h2 {
    font-size: 1.08rem;
    letter-spacing: -.025em;
  }
  .compliance-metric {
    width: 88px;
    flex-basis: 88px;
  }
  .compliance-box {
    width: 60px;
    height: 60px;
  }
  .compliance-label {
    font-size: .62rem;
  }
}



/* Pulso fluido por defecto. En equipos que dibujan sin tarjeta gráfica,
   app.js agrega la clase "pulse-lite" (ver cloud.css). */
.marker:before,.marker:after{animation:pulse 2.3s ease-out infinite}
.marker:after{animation-delay:1.15s}
.marker.loop-focus:before{animation-duration:1.65s}
/* capa GPU solo mientras se mueve/zoomea */
.map-world{will-change:auto}
.map-world.live-zoom,.map-wrap.panning .map-world{will-change:transform}
/* animaciones sin blur (blur sobre el mapa completo es muy costoso) */
@keyframes loopCardIn{0%{opacity:0;scale:.96;translate:0 8px}100%{opacity:1;scale:1;translate:0 0}}
@keyframes loopLevelReveal{0%{opacity:.62}100%{opacity:1}}
@keyframes loopMarkerFocus{0%{scale:1}55%{scale:1.2}100%{scale:1.08}}
@media(prefers-reduced-motion:reduce){.marker:before,.marker:after{animation:none!important}}