[x-cloak] { display: none !important; }

  .modal-root { position: fixed; inset: 0; z-index: 9999; }
  .modal-backdrop { position: absolute; inset: 0; background: rgb(15 23 42 / .45); backdrop-filter: blur(2px); }
  .modal-panel {
    position: relative; margin-inline: auto; width: 100%; max-width: 42rem;
    background: #fff; border-radius: 1rem; box-shadow: 0 10px 40px rgba(2,6,23,.25);
  }
  .fade-enter, .fade-leave { opacity: 0; }
  .fade-enter-active, .fade-leave-active { transition: opacity .18sease; }
  .panel-enter { opacity: 0; transform: translateY(8px) scale(.98); }
  .panel-enter-active { transition: transform .18s ease, opacity .18s ease; }
  .panel-leave { opacity: 1; transform: translateY(0) scale(1); }
  .panel-leave-active { transition: transform .16s ease, opacity .16s ease; }


:root{
    --green:#22c55e;      /* verde activo */
    --ring:#cfd6e2;       /* borde inactivo */
  }
  .marker{
    position:absolute;
    width:25px;
    height:25px;
    border-radius:9999px;
    display:grid;
    place-items:center;
    font-weight:700;
    font-size:12px;
    transform:translate(-50%, -50%);
    user-select:none;
  }
  .marker.inactive{
    background:rgba(255,255,255,.8);
    color:#475569;
    border:1px solid var(--ring);
  }
  .marker.active{
    background:rgba(34,197,94,.8);
    color:#fff;
    border:1px solid transparent;
    box-shadow:0 6px 12px rgba(34,197,94,.30);
  }


body{background:#f8fafc}
  #map{height:74vh;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(2,6,23,0.06)}
  .marker-dot{width:18px;height:18px;border-radius:9999px;border:3px solid #fff;display:block;box-shadow:0 8px 20px rgba(2,6,23,0.12)}
  .pulse{position:relative}.pulse::after{content:'';position:absolute;left:50%;top:50%;width:36px;height:36px;border-radius:9999px;transform:translate(-50%,-50%);opacity:.18;animation:pulse 2s infinite}
  @keyframes pulse{0%{transform:translate(-50%,-50%) scale(.9);opacity:.25}70%{transform:translate(-50%,-50%) scale(1.6);opacity:0}100%{opacity:0}}
  .card-scroll::-webkit-scrollbar{width:8px}.card-scroll::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:8px}
  .mini{font-size:12px;color:#64748b}[x-cloak]{display:none!important}
  .modal-overlay{z-index:9999}
  .card{box-shadow:0 10px 25px rgba(15,23,42,.08)}


:root{ --brand:#325BAC; --brand-dark:#234178; --text:#1f2937; --text-sub:var(--brand); }
                @keyframes pop-in{0%{opacity:0;transform:translateY(12px) scale(.98)}60%{opacity:1;transform:translateY(0) scale(1.01)}100%{opacity:1;transform:translateY(0) scale(1)}}
                @keyframes sweep{0%{transform:rotate(-180deg)}70%{transform:rotate(380deg)}100%{transform:rotate(360deg)}}
                @keyframes tick{0%,96%{transform:rotate(0)}98%{transform:rotate(6deg)}100%{transform:rotate(0)}}
                @keyframes draw{from{stroke-dashoffset:var(--dash,360)}to{stroke-dashoffset:0}}
                @keyframes shine{0%{opacity:0;stroke-dashoffset:320}10%,70%{opacity:.9}100%{opacity:0;stroke-dashoffset:0}}
                @keyframes breathe{0%,100%{filter:drop-shadow(0 0 0 rgba(50,91,172,0))}50%{filter:drop-shadow(0 0 8px rgba(50,91,172,.25))}}
                .group{animation:pop-in .7s .15s both;transform-box:fill-box;transform-origin:center}
                .textLine{opacity:0;animation:pop-in .6s .55s both}
                .subLine{opacity:0;animation:pop-in .6s .75s both}
                .hand-sec{transform-box:fill-box;transform-origin:280px 110px;animation:sweep 1.4s .1s cubic-bezier(.2,.8,.2,1) both, tick 5s 2s linear infinite}
                .hand-min{transform-box:fill-box;transform-origin:280px 110px;animation:pop-in .6s .15s both}
                .check{stroke-dasharray:360;stroke-dashoffset:360;animation:draw .9s .8s cubic-bezier(.2,.8,.2,1) both}
                .shine{stroke-dasharray:320;stroke-dashoffset:320;animation:shine 1.2s 1.15s ease-out both}
                .iconGlow{animation:breathe 3.6s 1.6s ease-in-out infinite}
                @media (prefers-reduced-motion:reduce){.hand-sec,.shine,.iconGlow{animation:none}}