/* Mapa de Cuba. Todos los colores son variables: cámbialas en tu proyecto para usar tu paleta. */
.mc { --mapa-mar: #eaf1fb; --mapa-vacio: #e3e6ec; --mapa-borde: #fff; --mapa-provincia: #5d6b86; --mapa-tinta: #111; --mapa-fondo-tarjeta: #fff;
  --mapa-0: #cfdcf5; --mapa-1: #9db8ec; --mapa-2: #5f87d6; --mapa-3: #2f5cb8; --mapa-4: #0a3a8a; --mapa-acento: #d4112c; --mapa-punto: #d4112c; --mapa-proporcion: 16 / 9; }
@media (max-width: 640px) { .mc { --mapa-proporcion: 3 / 2; } }
.mc-lienzo { position: relative; aspect-ratio: var(--mapa-proporcion); background: var(--mapa-mar); border-radius: 18px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.mc-svg { display: block; width: 100%; height: 100%; cursor: grab; }
.mc-lienzo.arrastrando .mc-svg { cursor: grabbing; }
.mc-zona { fill: var(--mapa-vacio); stroke: var(--mapa-borde); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; transition: fill .15s; outline: none; fill-rule: evenodd; }
.mc-zona.v1 { fill: var(--mapa-0); } .mc-zona.v2 { fill: var(--mapa-1); } .mc-zona.v3 { fill: var(--mapa-2); } .mc-zona.v4 { fill: var(--mapa-3); } .mc-zona.v5 { fill: var(--mapa-4); }
.mc-zona.apagada { opacity: .38; }
.mc-zona:hover, .mc-zona:focus-visible, .mc-zona.activa { stroke: var(--mapa-acento); stroke-width: 2.5; }
.mc-provincia { fill: none; stroke: var(--mapa-provincia); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; fill-rule: evenodd; }
.mc-punto { fill: var(--mapa-punto); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; }
.mc-punto.bien { fill: var(--mapa-4); }
.mc-punto:hover, .mc-punto:focus-visible { stroke: var(--mapa-tinta); outline: none; }
.mc-nombre { font: 800 11px/1 system-ui, sans-serif; fill: var(--mapa-tinta); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; text-anchor: middle; }
.mc-controles { position: absolute; right: 10px; top: 10px; display: grid; gap: 6px; }
.mc-controles button { width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--mapa-fondo-tarjeta); color: var(--mapa-tinta); font: 800 20px/1 system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.mc-controles button:hover { background: #f1f4fa; }
.mc-controles button:focus-visible { outline: 3px solid var(--mapa-acento); outline-offset: 2px; }
.mc-controles .mc-todo { width: auto; padding: 0 12px; font-size: 13px; }
.mc-tip { position: absolute; z-index: 3; pointer-events: none; background: var(--mapa-tinta); color: #fff; padding: 8px 12px; border-radius: 10px; font: 600 14px/1.3 system-ui, sans-serif; max-width: 240px; transform: translate(-50%, calc(-100% - 12px)); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.mc-tip strong { display: block; font-size: 15px; }
.mc-tip[hidden] { display: none; }
.mc-leyenda { margin-top: 10px; max-width: 360px; font: 600 12px/1.3 system-ui, sans-serif; color: var(--mapa-tinta); }
.mc-leyenda b { display: block; margin-bottom: 4px; }
.mc-escala { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-bottom: 3px; }
.mc-escala i { flex: 1; }
.mc-escala i:nth-child(1) { background: var(--mapa-vacio); } .mc-escala i:nth-child(2) { background: var(--mapa-0); } .mc-escala i:nth-child(3) { background: var(--mapa-1); }
.mc-escala i:nth-child(4) { background: var(--mapa-2); } .mc-escala i:nth-child(5) { background: var(--mapa-3); } .mc-escala i:nth-child(6) { background: var(--mapa-4); }
.mc-rango { display: flex; justify-content: space-between; color: #555; }
.mc-atribucion { position: absolute; right: 8px; bottom: 4px; font: 500 10px/1 system-ui, sans-serif; color: #555; background: rgba(255,255,255,.7); padding: 2px 6px; border-radius: 6px; }
@media (max-width: 640px) { .mc-controles button { width: 36px; height: 36px; font-size: 18px; border-radius: 10px; } .mc-controles { right: auto; left: 6px; top: auto; bottom: 6px; display: flex; gap: 4px; } .mc-controles .mc-todo { font-size: 12px; padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .mc-zona { transition: none; } }