:root{
  --tc-accent:#FF6B00; --tc-accent-2:#FF7A1A; --tc-tint:#FFF4E8;
  --tc-ink:#1A1D1F; --tc-ink-dim:#565D6D; --tc-land:#F2F4F7; --tc-stroke:#E5E7EB; --tc-surface:#FFFFFF;
  --tc-land-active:#FFE7D3;
}

/* Widget */
.tc-widget{ font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color:var(--tc-ink); background:linear-gradient(180deg,#fff, var(--tc-tint));
  border:1px solid var(--tc-stroke); border-radius:16px; padding:18px;
  box-shadow:0 6px 24px rgba(16,24,40,.06);
}
.tc-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px }
.tc-head h3{ margin:0; font-weight:700; font-size:18px; color:#111 }
.tc-head p{ margin:0; color:var(--tc-ink-dim); font-size:13px }

.tc-canvas{ position:relative; width:100%; aspect-ratio:2/1;   min-height: clamp(220px, 48vw, 420px);  /* escala con el ancho, sin pasarse */;
  border-radius:12px; overflow:hidden; background:#fff; }
@media (min-width:768px){ .tc-mapA .tc-canvas{ aspect-ratio:16/9; min-height:460px; } }
@media (min-width:1200px){ .tc-mapA .tc-canvas{ min-height:560px; } }
.tc-canvas svg{ width:100%; height:100%; display:block }

/* Mapa */
.tc-land{ fill:var(--tc-land); stroke:var(--tc-stroke); stroke-width:.6 }
.tc-graticule{ stroke:#EEF2F7; stroke-width:.5; fill:none }

/* Pines */
.tc-pin{ cursor:pointer; filter:drop-shadow(0 2px 6px rgba(17,24,39,.15)) }
.tc-pin .pulse{ fill:none; stroke:var(--tc-accent); stroke-width:2; opacity:.8; transform-origin:center; animation:tcPulse 2.2s ease-out infinite }
.tc-pin .dot{ fill:#fff; stroke:var(--tc-accent); stroke-width:3; r:8 }
.tc-pin .hit{ fill:transparent; r:28 }
@media (max-width: 480px){
      .tc-mapA .tc-pin .dot,
  .tc-mapA .tc-pin .pulse { display: none;   /* oculta círculo blanco y animación */}
  .tc-mapA .tc-pin .hit { r: 28;           /* mantiene buen área de toque */ }
  .tc-mapA{ --tc-land-active: #FF9A4D; }   /* o #FF8A33 si quieres aún más contraste */
}
/* Smaller pins on tablet + mobile */
@media (max-width: 768px){
  .tc-mapA .tc-pin .dot { r:5; stroke-width:2; }   /* smaller visible dot */
  .tc-mapA .tc-pin .hit { r:18; }                  /* smaller invisible hit area */
}
@keyframes tcPulse{ 0%{ r:3; opacity:.8 } 70%{ r:22; opacity:0 } 100%{ opacity:0 } }

/* Tooltip */
.tc-tooltip{ position:absolute; min-width:200px; max-width:260px; padding:10px 12px; border-radius:12px;
  background:var(--tc-surface); border:1px solid var(--tc-stroke);
  box-shadow:0 10px 30px rgba(16,24,40,.12);
  transform:translate(-50%, calc(-100% - 14px));
  opacity:0; visibility:hidden; transition:opacity .16s ease, transform .16s ease, visibility .16s ease; z-index:3; pointer-events:none }
.tc-tooltip.visible{ opacity:1; visibility:visible; transform:translate(-50%, calc(-100% - 10px)) }
.tc-tooltip h4{ margin:0 0 4px; font-size:14px }
.tc-tooltip p{ margin:0; font-size:12px; color:var(--tc-ink-dim) }
.tc-tooltip a{ color:var(--tc-accent); text-decoration:none }
.tc-tooltip a:hover{ text-decoration:underline }

/* Leyenda */
.tc-legend{ display:flex; flex-wrap:wrap; gap:8px 12px; list-style:none; padding:12px 4px 0; margin:0; border-top:1px dashed var(--tc-stroke) }
.tc-legend li{ display:flex; gap:8px; align-items:center; padding:6px 10px; border-radius:8px; background:#fff; border:1px solid var(--tc-stroke) }
.tc-chip{ width:10px; height:10px; border-radius:50%; background:var(--tc-accent) }

/* Accesibilidad / reduce motion */
@media (prefers-reduced-motion:reduce){
  .tc-pin .pulse{ display:none; animation:none }
}