/* CASCOP · Componente de mapas de alertas tempranas (index, alertas, ver-alerta) */
.cmap { position: relative; border-radius: 18px; overflow: hidden; background: #0b1730; border: 1px solid rgba(148, 163, 184, .18); }
.cmap-map { width: 100%; background: #0b1730; }
.cmap.cmap-full { position: fixed !important; inset: 0; z-index: 10050; border-radius: 0; }
.cmap.cmap-full .cmap-map { height: calc(100vh - 58px) !important; }

.cmap-toolbar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; padding: .65rem .8rem; background: linear-gradient(90deg, rgba(15, 30, 58, .95), rgba(8, 20, 43, .95)); border-bottom: 1px solid rgba(148, 163, 184, .15); }
.cmap-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.cmap-chips button { background: rgba(255, 255, 255, .04); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, .25); border-radius: 999px; padding: .32rem .8rem; font-size: .8rem; font-weight: 700; transition: all .2s; }
.cmap-chips button:hover, .cmap-chips button.on { color: #fbbf24; border-color: #f59e0b; background: rgba(245, 158, 11, .1); }
.cmap .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.cmap-switch { color: #94a3b8; font-size: .8rem; font-weight: 600; margin: 0 0 0 .3rem; display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.cmap-switch input { accent-color: #f59e0b; }
.cmap-time { display: flex; align-items: center; gap: .55rem; min-width: 260px; }
.cmap-time .play { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #f59e0b; background: rgba(245, 158, 11, .12); color: #fbbf24; display: grid; place-items: center; font-size: .75rem; }
.cmap-time input[type=range] { flex: 1; accent-color: #f59e0b; }
.cmap-time .anio-lbl { color: #e2e8f0; font-weight: 800; font-size: .82rem; min-width: 110px; text-align: right; }

.cmap-info { background: rgba(8, 20, 43, .92); color: #e2e8f0; border: 1px solid rgba(148, 163, 184, .25); border-radius: 12px; padding: .7rem .85rem; min-width: 200px; box-shadow: 0 10px 25px rgba(0, 0, 0, .35); backdrop-filter: blur(6px); }
.cmap-info .t { font-weight: 800; font-size: .95rem; color: #fff; }
.cmap-info .big { font-size: 1.8rem; font-weight: 800; color: #fbbf24; line-height: 1.1; margin: .2rem 0; }
.cmap-info .big small { font-size: .8rem; color: #94a3b8; font-weight: 600; }
.cmap-info .row2 { display: flex; gap: .8rem; font-size: .78rem; margin-bottom: .2rem; }
.cmap-info .s { font-size: .76rem; color: #cbd5e1; }
.cmap-info .muted { color: #64748b; }

.cmap-legend { background: rgba(8, 20, 43, .92); color: #e2e8f0; border: 1px solid rgba(148, 163, 184, .25); border-radius: 12px; padding: .6rem .8rem; font-size: .76rem; line-height: 1.75; }
.cmap-legend .t { font-weight: 800; color: #fff; margin-bottom: .1rem; }
.cmap-legend i { display: inline-block; width: 13px; height: 13px; border-radius: 3px; margin-right: 7px; vertical-align: -2px; }
.cmap-legend .src { color: #94a3b8; font-size: .7rem; margin-top: .2rem; }

.cmap-bubble { display: grid; place-items: center; border-radius: 50%; background: rgba(245, 158, 11, .92); color: #111; font-weight: 800; font-size: .74rem; border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(245, 158, 11, .25), 0 6px 14px rgba(0, 0, 0, .45); }
.cmap-bubble.inm { background: rgba(239, 68, 68, .95); color: #fff; box-shadow: 0 0 0 4px rgba(239, 68, 68, .3), 0 6px 14px rgba(0, 0, 0, .45); animation: cmapPulse 2s infinite; }
@keyframes cmapPulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); } 70% { box-shadow: 0 0 0 14px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.cmap-name { transform: translate(-50%, 14px); white-space: nowrap; color: #fff; font-size: 10.5px; font-weight: 700; text-shadow: 0 1px 3px #000, 0 0 2px #000; letter-spacing: .2px; pointer-events: none; }

.cmap-pop { min-width: 230px; max-height: 270px; overflow-y: auto; }
.cmap-pop .h { font-weight: 800; color: #0f172a; margin-bottom: .45rem; }
.cmap-pop .h span { background: #f59e0b; color: #111; border-radius: 6px; padding: 0 .4rem; font-size: .75rem; margin-left: .3rem; }
.cmap-pop a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .4rem .55rem; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: .35rem; text-decoration: none; color: #0f172a; }
.cmap-pop a:hover { border-color: #f59e0b; background: #fff7ed; }
.cmap-pop a small { display: block; color: #64748b; font-size: .72rem; }
.cmap-pop em { font-style: normal; font-size: .62rem; font-weight: 800; text-transform: uppercase; padding: .1rem .4rem; border-radius: 5px; }
.cmap-pop em.i { background: #fee2e2; color: #b91c1c; }
.cmap-pop em.e { background: #fef3c7; color: #b45309; }
.cmap-fs { display: grid !important; place-items: center; width: 34px; height: 34px; background: #fff; color: #111 !important; font-size: 14px; }
.cmap-err { position: absolute; inset: auto 0 1rem 0; text-align: center; color: #fca5a5; z-index: 600; }
.leaflet-control-layers { border-radius: 10px !important; }
.leaflet-control-layers-expanded { font-size: .82rem; line-height: 1.7; }

@media (max-width: 767px) {
  .cmap-time { min-width: 100%; }
  .cmap-info { display: none; }
}