.cfm-wrap{ --cfm-azul:#033574; --cfm-dorado:#D4A017; --cfm-fondo:#f7f8fb; --cfm-texto:#1b1f23; --cfm-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --cfm-mobile-h:60vh; --cfm-panel-w:30%;}
.cfm-wrap *{ box-sizing: border-box; }
.cfm-wrap, .cfm-wrap .cfm-grid, .cfm-wrap .cfm-map, .cfm-wrap .cfm-panel { position: relative; }
.cfm-wrap .cfm-grid{ display:grid; grid-template-columns: calc(100% - var(--cfm-panel-w)) var(--cfm-panel-w); gap: 18px; align-items: stretch; height: 100%; z-index: 1; }
@media (max-width: 980px){ .cfm-wrap .cfm-grid{ grid-template-columns: 1fr; height:auto; } }
.cfm-wrap .cfm-map{ width:100%; border-radius:12px; box-shadow:0 3px 18px rgba(3,53,116,.08); overflow:hidden; background:#fff; height:100%; z-index: 1; min-height: 360px; }
.cfm-wrap .cfm-brand{ position:absolute; top:10px; left:10px; z-index:5; background: rgba(255,255,255,.85); border:1px solid rgba(3,53,116,.12); padding:6px 10px; border-radius:999px; font-size:12px; color:#111827; }
.cfm-wrap .cfm-map-inner{ position:relative; width:100%; height:100%; }
.cfm-wrap .cfm-map-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.cfm-wrap .cfm-panel { background:#fff; padding:12px; border-radius:12px; box-shadow:0 6px 24px rgba(3,53,116,0.12); font-family: var(--cfm-font); color:var(--cfm-texto); height:100%; display:flex; flex-direction:column; overflow:auto; z-index: 3; }
.cfm-wrap .cfm-panel::-webkit-scrollbar{ width:10px; }
.cfm-wrap .cfm-panel::-webkit-scrollbar-thumb{ background: rgba(3,53,116,.35); border-radius: 8px; }
.cfm-wrap .cfm-panel::-webkit-scrollbar-track{ background: rgba(3,53,116,.06); border-radius: 8px; }
.cfm-wrap .cfm-sticky{ position: sticky; top: 0; background:#fff; z-index:2; padding-bottom:10px; border-bottom:1px solid #eef2f7; margin-bottom:10px; }
@media (max-width: 640px){ .cfm-wrap .cfm-sticky{ position: static; top:auto; } }
.cfm-wrap .cfm-panel h3{margin:0 0 8px 0; font-size:16px; color:var(--cfm-azul); letter-spacing:.2px;}
.cfm-wrap .cfm-panel h4{margin:14px 0 6px 0; font-size:14px; color:#111827;}
.cfm-wrap .cfm-panel .subtitle{font-size:12px; color:#4b5563; margin-bottom:10px;}
.cfm-wrap .cfm-panel label{display:flex; align-items:center; gap:8px; margin:6px 0; font-size:14px;}
.cfm-wrap .chip{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; background: rgba(3,53,116,.07); color: var(--cfm-azul);}
.cfm-wrap .row{display:flex; gap:8px; align-items:center;}
.cfm-wrap .row > * { flex:1; }
.cfm-wrap input[type="date"]{width:100%; padding:8px 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; font-family:inherit;}
.cfm-wrap .cfm-btn { background: var(--cfm-azul); color:#fff; border:0; border-radius:10px; padding:8px 12px; font-weight:600; cursor:pointer; box-shadow: 0 2px 8px rgba(3,53,116,.2); }
.cfm-wrap .cfm-btn.secondary { background:#fff; color:var(--cfm-azul); border:1px solid rgba(3,53,116,.25); }
.cfm-wrap .events-list{ flex:1; min-height: 0; overflow:auto; display:grid; gap:8px; font-family: var(--cfm-font); }
.cfm-wrap .event-item{border:1px solid #e5e7eb; border-radius:10px; padding:8px;}
.cfm-wrap .event-item .title{font-weight:700; color:#111827; margin-bottom:4px;}
.cfm-wrap .event-item .meta{font-size:12px; color:#6b7280;}
.cfm-wrap .cfm-legend-full{ margin-top:12px; width:100%; position: relative; z-index: 3; }
.cfm-wrap .cfm-legend-inner{ background:#fff; padding:12px; border-radius:10px; border:1px solid rgba(3,53,116,.12); box-shadow:0 2px 10px rgba(0,0,0,.08); font-family: var(--cfm-font); font-size:13px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 12px; }
.cfm-wrap .cfm-legend-inner .legend-title{ grid-column: 1 / -1; text-align:left; }
@media (max-width: 1199px){ .cfm-wrap .cfm-legend-inner{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px){ .cfm-wrap .cfm-legend-inner{ grid-template-columns: 1fr; } }
.cfm-wrap .cfm-legend-inner .row{ display:flex; align-items:center; gap:8px; margin:0; }
.cfm-wrap .dot{ width:10px; height:10px; border-radius:999px; display:inline-block; border: 1px solid rgba(0,0,0,.2); }
@media (max-width: 980px){ .cfm-wrap .cfm-map{ height: var(--cfm-mobile-h); min-height: 360px; } .cfm-wrap .cfm-panel{ height:auto; } }