.event-planner-panel {
  position: fixed !important;
  z-index: 2200 !important;
  inset: 64px 0 0 auto !important;
  width: min(1120px, 96vw) !important;
  height: calc(100dvh - 64px) !important;
  max-height: calc(100dvh - 64px) !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border-radius: 15px 0 0 15px !important;
  background: #f4f6f8 !important;
  box-shadow: -28px 0 80px rgba(8,24,42,.3) !important;
}
.event-planner-panel[hidden],
.event-google-workspace[hidden] { display: none !important; }
.event-planner-open { overflow: hidden !important; }
.event-google-workspace::before { display: none !important; }

.event-planner-panel > header { position: sticky; top: 0; z-index: 40; padding: 18px 58px 15px 22px; border-bottom: 1px solid #dce4eb !important; background: rgba(255,255,255,.98); backdrop-filter: blur(12px); }
.event-planner-panel > header h3 { font-size: 22px !important; letter-spacing: -.025em; }
.event-planner-panel > header p { max-width: 610px !important; color: #536176 !important; font-size: 11px !important; }
.event-planner-panel > header > button { position: absolute; top: 17px; right: 20px; z-index: 45; display: grid; width: 37px; height: 37px; place-items: center; border-radius: 50% !important; font-size: 21px; cursor: pointer; }

.event-planner-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 14px 22px; border-bottom: 1px solid #dce4eb; background: #fff; }
.event-planner-steps span { position: relative; display: flex; align-items: center; gap: 8px; color: #7a8798; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.event-planner-steps span::after { content: ""; position: absolute; top: 50%; right: 14px; left: 38px; height: 1px; background: #dce4eb; }
.event-planner-steps span:last-child::after { display: none; }
.event-planner-steps b { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #cfd9e3; border-radius: 50%; background: #fff; color: #607087; }
.event-planner-steps .active { color: #285f92; }
.event-planner-steps .active b { border-color: #285f92; background: #285f92; color: #fff; }

.event-planner-controls { grid-template-columns: minmax(190px, 1fr) minmax(130px, .55fr) auto !important; max-width: 700px; margin: 16px 22px 8px !important; }
.event-planner-controls label { color: #425269 !important; font-size: 9px !important; }
.event-planner-controls input,
.event-planner-controls select { min-height: 43px !important; border-radius: 8px !important; font-size: 12px; }
.event-planner-controls .button { min-height: 43px; padding-inline: 20px; border-radius: 8px; background: #285f92; }

.event-planner-advanced { margin: 0 22px 12px; max-width: 700px; border: 1px solid #dce4eb; border-radius: 8px; background: #fff; }
.event-planner-advanced summary { padding: 10px 12px; color: #526176; font-size: 10px; font-weight: 800; cursor: pointer; }
.event-planner-advanced > div { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 9px; padding: 0 12px 12px; }
.event-planner-advanced label { display: grid; gap: 5px; color: #607087; font-size: 9px; font-weight: 800; }
.event-planner-advanced input { box-sizing: border-box; width: 100%; min-height: 38px; padding: 8px 9px; border: 1px solid #d8e0e8; border-radius: 7px; background: #fff; color: #24394f; }
.event-planner-advanced small { color: #8390a0; }

.event-planner-status { margin: 0 22px 14px !important; max-width: 700px; min-height: 40px; box-sizing: border-box; border: 0 !important; border-left: 3px solid #4a799f !important; border-radius: 0 7px 7px 0 !important; background: #eaf0f5 !important; color: #3f5368 !important; }
.event-planner-status > i { width: 16px; height: 16px; border: 2px solid #b9c7d4; border-top-color: #285f92; border-radius: 50%; animation: eventSpin .8s linear infinite; }
.event-planner-status > span { display: grid; gap: 2px; }
.event-planner-status strong { color: #20364e !important; font-size: 10px; }
.event-planner-status small { color: #64758a; font-size: 9px; }

.event-google-workspace { display: grid !important; height: auto !important; min-height: 560px !important; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .72fr) !important; grid-template-rows: auto auto !important; gap: 0; margin: 0 !important; overflow: hidden !important; border: 0 !important; border-top: 1px solid #d8e1e9 !important; border-radius: 0 !important; background: #fff !important; }
.event-map-shell { position: sticky; top: 70px; grid-column: 1; grid-row: 1 / 3; height: calc(100vh - 92px); min-height: 560px; overflow: hidden; background: #e7edf2; }
.event-map-shell iframe { position: static !important; display: block; width: 100%; height: 100% !important; min-height: 560px !important; border: 0; filter: saturate(.82) contrast(.98); }
.event-map-shell iframe[hidden] { display: none; }
.event-map-empty { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; justify-items: center; gap: 7px; background: radial-gradient(circle at center, #f7fafc 0%, #e5ebf1 100%); color: #526176; text-align: center; }
.event-map-empty[hidden] { display: none; }
.event-map-empty > i:not(.event-map-spinner) { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #cbd7e2; border-radius: 50%; background: #fff; color: #285f92; font-size: 21px; font-style: normal; }
.event-map-empty strong { color: #20364e; font-size: 13px; }
.event-map-empty span { color: #718095; font-size: 10px; }
.event-map-spinner { width: 28px; height: 28px; border: 3px solid #cdd9e4; border-top-color: #285f92; border-radius: 50%; animation: eventSpin .8s linear infinite; }
.event-map-provider { position: absolute; z-index: 4; right: 10px; bottom: 10px; padding: 5px 7px; border: 1px solid rgba(36,55,76,.15); border-radius: 5px; background: rgba(255,255,255,.9); color: #536176; font-size: 8px; }

.event-google-workspace > aside { grid-column: 2 !important; grid-row: 1 !important; padding: 18px !important; border: 0 !important; border-left: 1px solid #dce4eb !important; border-bottom: 1px solid #dce4eb !important; background: #fff !important; }
.event-google-workspace > aside::before { content: "03 · RUTA"; display: block; margin-bottom: 7px; color: #7a8798; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.event-google-workspace > aside h4 { color: #172c44 !important; font-size: 18px !important; }
.event-google-workspace > aside > div { border: 1px solid #dfe6ed; border-radius: 8px; background: #f5f8fa !important; }
.event-google-workspace > aside .button { display: inline-flex; justify-content: center; width: 100%; box-sizing: border-box; margin-top: 8px; }

.event-google-workspace > .event-recommendations { grid-column: 2 !important; grid-row: 2 !important; padding: 16px !important; border: 0 !important; border-left: 1px solid #dce4eb !important; background: #f5f7f9 !important; }
.event-google-workspace > .event-recommendations::before { content: "02 · ZONAS RECOMENDADAS"; display: block; margin-bottom: 10px; color: #627187; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.event-recommendation-grid { gap: 8px !important; }
.event-recommendation-card { position: relative; padding: 13px !important; border-radius: 8px !important; color: #21364d; }
.event-recommendation-card.selected { border-color: #285f92 !important; background: #eaf2f8 !important; box-shadow: inset 3px 0 0 #285f92 !important; }
.event-recommendation-card > header { color: #496b8a !important; }
.event-recommendation-card .event-score-row { padding-block: 5px; }
.event-recommendation-card .event-card-actions .button { width: 100%; background: #285f92; }

@keyframes eventSpin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .event-google-workspace { grid-template-columns: 1fr !important; grid-template-rows: 380px auto auto !important; }
  .event-map-shell { position: relative; top: auto; grid-column: 1; grid-row: 1; height: 380px; min-height: 380px; }
  .event-map-shell iframe { min-height: 380px !important; }
  .event-google-workspace > aside { grid-column: 1 !important; grid-row: 2 !important; border-left: 0 !important; }
  .event-google-workspace > .event-recommendations { grid-column: 1 !important; grid-row: 3 !important; border-left: 0 !important; }
}

@media (max-width: 620px) {
  .event-planner-panel { inset: 64px 0 0 !important; width: 100vw !important; height: calc(100dvh - 64px) !important; border-radius: 0 !important; }
  .event-planner-steps { padding-inline: 14px; }
  .event-planner-steps span { font-size: 7px; }
  .event-planner-controls { grid-template-columns: 1fr !important; margin-inline: 14px !important; }
  .event-planner-advanced { margin-inline: 14px; }
  .event-planner-advanced > div { grid-template-columns: 1fr; }
  .event-planner-status { margin-inline: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .event-map-spinner,
  .event-planner-status > i { animation-duration: 1.8s; }
}