/* ======================================================
   Agenda do Astronauta — CSS (Futurista / Neon)
   Substitui totalmente o estilo anterior — estilo B
   ====================================================== */

/* ===== VARIÁVEIS GLOBAIS (PALETA NEON/ESPACIAL) ===== */
:root{
  --bg-deep: #030417;
  --bg-mid: #06102a;
  --accent-purple: #7b5cff;
  --accent-cyan: #34d1f3;
  --accent-magenta: #ff5ec4;
  --accent-gold: #ffd86b;
  --glass: rgba(255,255,255,0.06);
  --glass-strong: rgba(255,255,255,0.09);
  --muted: rgba(255,255,255,0.65);
  --muted-2: rgba(255,255,255,0.45);
  --card-bg: linear-gradient(135deg, rgba(20,18,40,0.55), rgba(10,12,35,0.6));
  --neon-outline: rgba(123,92,255,0.18);
  --shadow-neon: 0 10px 30px rgba(11,9,28,0.6);
  --glass-border: rgba(123,92,255,0.12);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --transition-fast: 180ms cubic-bezier(.2,.9,.3,1);
  --transition-med: 280ms cubic-bezier(.18,.9,.32,1);
}

/* ===== RESET BASE ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body,#app{height:100%}
body{
  font-family: "Inter", "Space Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 20%, rgba(123,92,255,0.06), transparent 5%),
              radial-gradient(900px 400px at 90% 80%, rgba(52,209,243,0.05), transparent 6%),
              var(--bg-deep);
  color: #e6f0ff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

/* ===== WEATHER WIDGET (SIMPLE) ===== */
.weather-widget{
  margin: 8px 0 14px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.weather-today{
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: var(--shadow-neon);
}
.weather-today .icon{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--neon-outline);
  color: var(--accent-gold);
}
.weather-today .label{
  font-weight: 600;
}
.weather-today .meta{
  color: var(--muted);
  font-size: 12px;
}
.weather-next{
  display: flex;
  gap: 8px;
  }
.weather-next{ flex-wrap: wrap }
@media (max-width: 640px){
  .weather-widget{ grid-template-columns: 1fr; }
  .weather-today{ padding: 10px; }
  .weather-next{ justify-content: flex-start; }
}
.weather-chip{
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
}
.weather-chip .w-icon{
  color: var(--accent-cyan);
}

/* ===== ANIMATED BACKGROUND LAYERS =====
   These elements should be inserted in your HTML:
   <div class="space-layer stars"></div>
   <div class="space-layer twinkle"></div>
   <div class="space-layer nebula"></div>
*/
.space-layer{position:fixed;inset:0;pointer-events:none;z-index:0}
.stars{
  background-image:
    radial-gradient(#ffffff 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.7) 1px, transparent 1px);
  background-size: 600px 600px, 300px 300px;
  background-position: 0 0, 0 0;
  opacity: 0.25;
  mix-blend-mode: screen;
  animation: starsDrift 160s linear infinite;
}
.twinkle{
  background-image: radial-gradient(rgba(255,255,255,0.18) 1px, transparent 2px);
  background-size: 120px 120px;
  background-position: 0 0;
  opacity: 0.22;
  animation: twinkleFade 6s ease-in-out infinite, twinkleMove 120s linear infinite;
  mix-blend-mode: screen;
}
.nebula{
  background:
    radial-gradient(40% 30% at 20% 40%, rgba(123,92,255,0.22), transparent 20%),
    radial-gradient(35% 25% at 70% 60%, rgba(52,209,243,0.18), transparent 25%),
    radial-gradient(25% 18% at 60% 20%, rgba(255,94,196,0.14), transparent 22%);
  background-position: 0 0, 0 0, 0 0;
  opacity: 0.9;
  mix-blend-mode: screen;
  transform-origin:center;
  animation: nebulaFloat 50s ease-in-out infinite, nebulaDrift 200s linear infinite;
}

/* Nebula explosion trail (rose hues) */
.nebula-explosion{
  position: fixed;
  left: -25vw;
  top: 30vh;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 0;
  animation: nebulaTravel 28s linear infinite;
}
.nebula-explosion::before{
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 70vmin; height: 70vmin;
  transform: translate(-10vmin, -20vmin) scale(0.2);
  transform-origin: 50% 50%;
  border-radius: 50%;
  mix-blend-mode: screen;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(255,150,210,0.45), transparent 70%),
    radial-gradient(closest-side at 40% 45%, rgba(255,100,180,0.35), transparent 60%),
    radial-gradient(closest-side at 62% 58%, rgba(250,80,160,0.28), transparent 62%),
    conic-gradient(from 20deg at 50% 50%, rgba(255,120,190,0.12), transparent 85%);
  filter: blur(26px);
  animation: nebulaExplode 1.3s ease-out, nebulaPulse 6s ease-in-out infinite;
}
.nebula-explosion::after{
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 90vmin; height: 50vmin;
  transform: translate(-38vmin, -12vmin);
  border-radius: 50% 40% 60% 50% / 55% 45% 55% 45%;
  mix-blend-mode: screen;
  background: radial-gradient(closest-side at 0% 50%, rgba(255,110,190,0.18), transparent 75%);
  filter: blur(40px);
  opacity: .45;
}

@keyframes nebulaExplode{
  0%{ transform: translate(-10vmin, -20vmin) scale(0.2); opacity: 0 }
  40%{ opacity: .85 }
  100%{ transform: translate(-10vmin, -20vmin) scale(1); opacity: .6 }
}
@keyframes nebulaPulse{
  0%{ filter: blur(22px) }
  50%{ filter: blur(30px) }
  100%{ filter: blur(22px) }
}
@keyframes nebulaTravel{
  0%{ transform: translate3d(0,0,0) }
  100%{ transform: translate3d(140vw,-18vh,0) }
}

/* Background animations */
@keyframes starsDrift{
  from{ background-position: 0 0, 0 0 }
  to{ background-position: -800px 600px, 800px -600px }
}
@keyframes twinkleFade{
  0%{opacity:0.16}
  50%{opacity:0.26}
  100%{opacity:0.16}
}
@keyframes twinkleMove{
  from{ background-position: 0 0 }
  to{ background-position: -300px 300px }
}
@keyframes nebulaFloat{
  0%{transform: scale(1) translate(0,0)}
  50%{transform: scale(1.05) translate(40px,-40px)}
  100%{transform: scale(1) translate(0,0)}
}
@keyframes nebulaDrift{
  from{ background-position: 0 0, 0 0, 0 0 }
  to{ background-position: 200px -120px, -180px 140px, 120px 100px }
}

/* ===== LAYOUT CONTAINER ===== */
.container{
  max-width:1300px;
  margin:32px auto;
  padding:26px;
  position:relative;
  z-index:5;
}

/* ===== HEADER ===== */
header{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: var(--radius-lg);
  padding:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:1px solid var(--glass-border);
  box-shadow: var(--shadow-neon);
  position:relative;
  overflow:hidden;
}
header::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(123,92,255,0.02), transparent 20%, rgba(52,209,243,0.02));
}
header h1{
  font-size:1.8rem;
  color:var(--accent-gold);
  letter-spacing:-0.6px;
  display:flex;
  gap:12px;
  align-items:center;
}
header h1 i{font-size:1.4rem;color:var(--accent-magenta)}
header p{
  color:var(--muted);
  font-size:1rem;
  opacity:0.95;
}

/* ===== STATS GRID ===== */
.stats-grid{
  margin-top:20px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap:18px;
}
.stat-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(10,8,30,0.35));
  border-radius:12px;
  padding:20px;
  border:1px solid var(--glass-border);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
  position:relative;
  overflow:hidden;
}
.stat-card:hover{ transform: translateY(-8px); box-shadow: 0 18px 50px rgba(11,9,28,0.7) }
.stat-card h3{ color:var(--muted-2); font-size:0.85rem; text-transform:uppercase; letter-spacing:1px }
.stat-number{ font-size:1.9rem; color:var(--accent-cyan); font-weight:700; margin-top:8px; text-shadow: 0 6px 18px rgba(52,209,243,0.06) }
.stat-hint{ margin-top:8px; font-size:0.8rem; color:var(--muted-2); letter-spacing:0.08em; text-transform:uppercase }

/* decorative neon line */
.stat-card::before{
  content:"";
  position:absolute;
  left:-20%;
  top:-30%;
  width:60%;
  height:200%;
  background: linear-gradient(120deg, transparent, rgba(123,92,255,0.06), rgba(255,94,196,0.03));
  transform: rotate(25deg);
  pointer-events:none;
}

/* ===== CONTROLS ===== */
.controls{
  margin:28px 0;
  background:var(--card-bg);
  padding:18px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  border:1px solid var(--glass-border);
}
#update-btn{
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
  color:white;
  border:none;
  padding:12px 24px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 8px 30px rgba(52,209,243,0.08);
}
#update-btn:hover{ transform: translateY(-4px); box-shadow:0 18px 50px rgba(123,92,255,0.12) }
#update-status{ font-weight:600; color:var(--muted); min-height:20px }

/* ===== TABS ===== */
.tabs{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.tab-btn{
  background:transparent;
  border:1px solid var(--glass-border);
  color:var(--muted);
  padding:12px 20px;
  border-radius:12px;
  cursor:pointer;
  display:flex;
  gap:10px;
  align-items:center;
  transition: all var(--transition-fast);
}
.tab-btn:hover{ transform: translateY(-4px); border-color:var(--neon-outline); color: #fff }
.tab-btn.active{
  background: linear-gradient(90deg, rgba(123,92,255,0.12), rgba(52,209,243,0.08));
  border-color: rgba(123,92,255,0.28);
  color:#fff;
  box-shadow: 0 8px 28px rgba(123,92,255,0.08);
}

/* ===== TAB CONTENT PANES ===== */
.tab-content{
  background: linear-gradient(180deg, rgba(10,12,30,0.6), rgba(6,8,22,0.7));
  border-radius: var(--radius-lg);
  padding:28px;
  border:1px solid var(--glass-border);
  box-shadow: var(--shadow-neon);
  display:none;
}
.tab-content.active{ display:block }

/* headings inside tabs */
.tab-content h2{
  color:var(--accent-gold);
  font-size:1.4rem;
  margin-bottom:18px;
  display:flex;
  gap:10px;
  align-items:center;
}

/* ===== UPCOMING EVENTS SECTION ===== */
.upcoming-events-section{
  margin:20px 0;
  padding:18px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(10,10,20,0.55), rgba(6,10,25,0.7));
  border:1px solid var(--glass-border);
  box-shadow: 0 8px 36px rgba(2,6,20,0.6);
}
.section-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px }
.section-header h3{ color:var(--accent-gold); display:flex; gap:10px; align-items:center }
.events-count{ background: rgba(255,255,255,0.03); padding:6px 12px; border-radius:999px; color:var(--muted-2); font-weight:600 }

/* upcoming events list, each item uses the structure generated in app.js */
.upcoming-events-list{ display:flex; flex-direction:column; gap:12px }
.upcoming-event-card{
  background: linear-gradient(180deg, rgba(12,14,30,0.6), rgba(6,8,20,0.55));
  border-radius:12px;
  padding:16px;
  border:1px solid var(--glass-border);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
  overflow:hidden;
}
.upcoming-event-card:hover{ transform: translateX(6px); box-shadow: 0 20px 60px rgba(3,6,18,0.6) }
.upcoming-event-header{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; cursor:pointer }
.event-main-info{ display:flex; gap:12px; align-items:center; flex:1 1 200px; min-width:200px }
.event-icon{ width:44px; height:44px; border-radius:10px; background: linear-gradient(135deg,var(--accent-magenta),var(--accent-purple)); display:flex; align-items:center; justify-content:center; color:white; font-size:1.1rem; box-shadow:0 6px 20px rgba(123,92,255,0.12) }
.event-basic-info h3{ font-size:1.05rem; color:#e9f3ff }
.event-basic-info p{ color:var(--muted-2); font-size:0.95rem }

/* date block */
.event-date-block{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right; margin-left:auto }
.event-date{ font-size:1.6rem; color:var(--accent-gold); font-weight:700 }
.event-status{ font-size:0.85rem; color:var(--muted); padding:6px 10px; border-radius:999px; background: rgba(255,255,255,0.03) }
.event-countdown{ margin-left:auto; font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted-2) }
.event-countdown span{ display:inline-block; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,0.06); color:var(--accent-cyan); font-weight:600 }

/* toggle arrow */
.event-complete-toggle{ background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:var(--accent-cyan); width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all var(--transition-fast) }
.event-complete-toggle:hover{ background: linear-gradient(135deg,rgba(52,209,243,0.2),rgba(123,92,255,0.2)); color:white }
.event-toggle-btn{ background:none; border:none; color:var(--muted); font-size:1.1rem; cursor:pointer }
.toggle-arrow{ transition: transform var(--transition-fast) }

/* expanded details container (hidden until open) */
.event-details-container{
  margin-top:12px;
  max-height:0;
  overflow:hidden;
  transition:max-height 300ms ease, opacity 300ms ease;
  opacity:0;
}
.upcoming-event-card.open .event-details-container{
  max-height:1200px;
  opacity:1;
}

/* metadata grid inside details */
.event-metadata{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px }
.meta-item{ background: rgba(255,255,255,0.02); padding:10px 12px; border-radius:10px; border-left:3px solid rgba(123,92,255,0.12); min-width:150px }
.meta-label{ color:var(--muted-2); font-size:0.82rem }
.meta-value{ color:var(--accent-cyan); font-weight:700; margin-top:6px }

/* detailed sections */
.event-details-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-bottom:12px }
.detail-section h5{ color:var(--accent-gold); font-size:0.98rem; margin-bottom:8px }
.detail-item{ color:var(--muted); font-size:0.92rem; margin-bottom:6px }
.detail-item .location-entry{ display:block; color:var(--muted-2); font-size:0.88rem; margin-top:4px }

/* actions */
.event-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px }
.btn{ padding:10px 14px; border-radius:10px; border:none; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px }
.btn.is-loading{ opacity:0.55; pointer-events:none; cursor:wait; position:relative }
.btn-whatsapp{ background: linear-gradient(90deg,#25D366,#1DA851); color:white }
.btn-maps{ background: linear-gradient(90deg,var(--accent-cyan),var(--accent-purple)); color:white }
.btn-secondary{ background: rgba(255,255,255,0.03); color:var(--muted) }
.queue-hint{ margin-top:12px; padding:12px; border-radius:10px; border:1px dashed rgba(255,255,255,0.15); color:var(--muted); text-align:center; font-size:0.85rem; background: rgba(255,255,255,0.02); letter-spacing:0.06em; text-transform:uppercase }

/* ===== TODAY EVENTS ===== */
.today-highlight{
  margin-top:10px;
  padding:16px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(12,14,34,0.45), rgba(6,8,20,0.55)),
    radial-gradient(800px 300px at 15% 0%, rgba(123,92,255,0.06), transparent 60%),
    radial-gradient(600px 260px at 85% 20%, rgba(52,209,243,0.05), transparent 60%);
  border:1px solid var(--glass-border);
}
.today-event-item{ display:flex; gap:12px; align-items:center; background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); padding:12px; border-radius:10px }
.event-time-badge{ background: linear-gradient(90deg,var(--accent-purple),var(--accent-cyan)); color:white; padding:8px 10px; border-radius:8px; font-weight:700 }

/* ===== ROUTES & COSTS ===== */
.route-info, .route-card, .cost-card, .hotel-card{
  background: linear-gradient(180deg, rgba(15,15,30,0.55), rgba(6,8,20,0.6));
  border-radius:12px;
  padding:18px;
  border:1px solid var(--glass-border);
}
.route-header{ color:var(--accent-gold); font-weight:700; display:flex; gap:10px; align-items:center }
.route-summary p{ color:var(--muted); margin:6px 0 }
.route-steps{ margin-top:12px }
.route-step{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:10px; background: rgba(255,255,255,0.01) }
.step-number{ width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,var(--accent-purple),var(--accent-cyan)); color:white; font-weight:700 }

/* costs grid */
.costs-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:14px; margin-top:10px }
.cost-category{ color:var(--accent-gold); font-weight:700; margin-bottom:6px }
.cost-amount{ color:var(--accent-cyan); font-size:1.6rem; font-weight:800 }

/* hotels */
.hotels-section{ display:grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap:16px; margin-top:16px }
.hotel-card h4{ color:var(--accent-gold); margin-bottom:8px }

/* ===== CHATBOT ===== */
.chatbot-toggle{
  position:fixed; right:28px; bottom:28px; width:64px; height:64px; border-radius:999px;
  background: linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));
  display:flex;align-items:center;justify-content:center;color:white;font-size:1.4rem;cursor:pointer;
  box-shadow: 0 14px 40px rgba(123,92,255,0.18);
  z-index:1200;
  transition: transform 200ms ease;
}
.chatbot-toggle:hover{ transform:scale(1.08) }
.notification-dot{ position:absolute; top:6px; right:6px; width:14px;height:14px;border-radius:999px;background:var(--accent-cyan); border:3px solid var(--bg-deep) }

/* container */
.chatbot-container{
  position:fixed; right:28px; bottom:110px; width:420px; height:640px; border-radius:14px; overflow:hidden;
  display:none; flex-direction:column; z-index:1201;
  background: linear-gradient(180deg, rgba(6,8,25,0.95), rgba(10,12,30,0.98));
  border:1px solid var(--glass-border); box-shadow: 0 30px 80px rgba(2,6,20,0.7);
}
.chatbot-container.open{ display:flex; animation: popIn 220ms ease }
@keyframes popIn{ from{ transform: translateY(20px) scale(.98); opacity:0 } to{ transform:none; opacity:1 } }

.chatbot-header{ padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; background: linear-gradient(90deg, rgba(123,92,255,0.08), rgba(52,209,243,0.06)) }
.chatbot-title{ color:var(--accent-gold); font-weight:800; display:flex; gap:10px; align-items:center }
.chatbot-close{ background: rgba(255,255,255,0.02); border:none; color:var(--muted); width:38px; height:38px; border-radius:999px; cursor:pointer }
.chatbot-messages{ flex:1; padding:18px; overflow:auto; background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent) }
.chat-message{ display:flex; gap:12px; margin-bottom:14px; align-items:flex-end }
.user-message{ justify-content:flex-end }
.bot-message{ justify-content:flex-start }
.message-avatar{ width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0 }
.user-message .message-avatar{ background:var(--accent-cyan); color:var(--bg-deep) }
.bot-message .message-avatar{ background:var(--accent-purple); color:white }
.message-content{ max-width:75%; padding:12px 14px; border-radius:12px; font-size:0.95rem; line-height:1.35; border:1px solid rgba(255,255,255,0.03) }
.user-message .message-content{ background: linear-gradient(90deg,var(--accent-cyan),var(--accent-purple)); color:#031026; font-weight:600 }
.bot-message .message-content{ background: rgba(255,255,255,0.02); color:var(--muted) }

/* quick actions */
.quick-actions{ display:flex; gap:8px; padding:12px; background: rgba(255,255,255,0.02); border-top:1px solid rgba(255,255,255,0.02) }
.quick-btn{ flex:1; background: rgba(255,255,255,0.02); padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,0.03); color:var(--muted); cursor:pointer; transition: all var(--transition-fast) }
.quick-btn:hover{ background: linear-gradient(90deg, rgba(123,92,255,0.06), rgba(52,209,243,0.05)); color:#fff }

/* input area */
.chatbot-input-container{ padding:12px; border-top:1px solid rgba(255,255,255,0.02); background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent) }
.chatbot-input{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.03); background: rgba(0,0,0,0.15); color:#eaf6ff }
.chatbot-send{ margin-left:8px; padding:10px 12px; border-radius:10px; background: linear-gradient(90deg,var(--accent-magenta),var(--accent-cyan)); border:none; color:white; cursor:pointer }

/* typing indicator */
.typing-indicator{ display:flex; gap:8px; align-items:center; padding:10px; border-radius:12px; background: rgba(255,255,255,0.02) }
.typing-dot{ width:8px; height:8px; border-radius:999px; background:var(--accent-purple); animation: bounce 1.2s infinite }
.typing-dot:nth-child(2){ animation-delay:0.15s } .typing-dot:nth-child(3){ animation-delay:0.3s }
@keyframes bounce{ 0%,80%,100%{ transform:scale(.7); opacity:0.6 } 40%{ transform:scale(1.05); opacity:1 } }

/* ===== MODAL ===== */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1500; background:rgba(2,6,20,0.72) }
.modal.open{ display:flex }
.modal-content{ width:min(900px,95%); max-height:90vh; overflow:auto; border-radius:16px; padding:26px; background: linear-gradient(180deg, rgba(6,8,20,0.96), rgba(10,12,25,0.98)); border:1px solid var(--glass-border); box-shadow:0 30px 80px rgba(2,6,20,0.8) }
.close-btn{ position:absolute; right:22px; top:18px; background:transparent; border:none; color:var(--muted); font-size:1.6rem; cursor:pointer }

/* ===== TOASTS ===== */
.toast{ position:fixed; top:20px; right:20px; z-index:1600; background: linear-gradient(180deg, rgba(10,12,20,0.95), rgba(6,8,20,0.95)); padding:12px 16px; border-radius:10px; display:flex; gap:12px; align-items:center; box-shadow:0 12px 40px rgba(2,6,20,0.7); border-left:4px solid var(--accent-cyan) }
.toast-icon{ font-size:1.2rem; color:var(--accent-cyan) }
.toast-message{ color:var(--muted); font-weight:600 }
.toast-close{ background:transparent; border:none; color:var(--muted); cursor:pointer }

/* ===== FOOTER ===== */
footer{ margin-top:36px; padding:24px; text-align:center; color:var(--muted-2); font-style:italic; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); border-top:1px solid rgba(255,255,255,0.02) }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px){
  .chatbot-container{ right:20px; width:380px; height:600px }
  header h1{ font-size:1.4rem }
}
@media (max-width: 800px){
  .container{ padding:16px }
  .stats-grid{ grid-template-columns: repeat(auto-fit, minmax(180px,1fr)) }
  .tab-content{ padding:18px }
  .chatbot-container{ right:16px; bottom:100px; width:340px; height:560px }
}
@media (max-width:480px){
  header{ flex-direction:column; align-items:flex-start; gap:12px; padding:18px }
  .tabs{ gap:8px; margin-bottom:12px }
  .chatbot-toggle{ right:14px; bottom:18px; }
  .chatbot-container{ left:12px; right:12px; bottom:80px; width:auto; height:68vh }
  .stat-number{ font-size:1.4rem }
}

/* ===== SMALL UTILITIES ===== */
.hidden{ display:none !important }
.center{ display:flex; align-items:center; justify-content:center }
.faint{ color:var(--muted-2) !important }

/* ===== AGENDA DO DIA — LAYOUT CENTRALIZADO ===== */
#today-events-list{ display:flex; flex-direction:column; align-items:center; gap:14px }
.today-highlight{ text-align:center }

/* ===== AGENDA DO DIA — CARD POR EVENTO ===== */
.day-event-card{ width:min(760px,95%); position:relative; background: linear-gradient(180deg, rgba(12,14,34,0.65), rgba(6,8,22,0.75)); border:1px solid var(--glass-border); border-radius:16px; box-shadow: 0 18px 60px rgba(3,6,18,0.55); overflow:hidden }
.day-event-card::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(120deg, transparent 0%, rgba(123,92,255,0.05) 35%, rgba(52,209,243,0.05) 65%, transparent 100%); opacity:.9 }
.card-header{ display:flex; gap:14px; align-items:flex-start; padding:16px 18px 6px 18px }
.badge-icon{ width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--accent-magenta), var(--accent-purple)); color:white; box-shadow: 0 10px 30px rgba(123,92,255,0.25) }
.header-main h4{ color:#eaf4ff; font-size:1.05rem; margin-bottom:6px }
.subline{ color:var(--muted-2); font-size:.92rem }
.meta-row{ margin-top:8px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; color:var(--muted); font-size:.9rem }
.meta-row span{ background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05); padding:6px 10px; border-radius:999px }
.card-route{ padding:12px 18px 18px 18px }
.route-stats{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:10px }
.route-stat{ display:flex; gap:8px; align-items:center; color:var(--muted) }
.day-route-actions{ display:flex; gap:10px; justify-content:center }
.day-event-card:hover{ transform: translateY(-3px); transition: transform 200ms ease }

/* Astronaut vibe accent on hover */
.day-event-card:hover .badge-icon{ box-shadow:0 14px 40px rgba(123,92,255,0.35) }

/* Canceled/minimized styles */
.tag-canceled{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; font-size:12px; background: rgba(229,62,62,0.18); color:#ffc9c9; border:1px solid rgba(229,62,62,0.35) }
.today-event-item.is-canceled{ opacity:.65; filter:saturate(.7); }
.today-event-item.is-canceled .btn-whatsapp{ display:none }
.day-event-card.is-canceled{ opacity:.7; filter:saturate(.7) }
.day-event-card.is-canceled.is-collapsed .card-route{ display:none }

/* ===== AGENDA DO DIA — BANNERS ===== */
.event-info-banner, .route-info-banner{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(6,8,20,0.4)); border:1px solid var(--glass-border); border-radius:12px; padding:14px; margin-bottom:12px }
.banner-header{ display:flex; gap:10px; align-items:center; color:var(--accent-gold); margin-bottom:10px }
.event-banner-content, .route-banner-content{ display:flex; flex-direction:column; gap:10px }
.event-banner-item, .route-banner-item{ background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px }
.event-banner-main{ display:flex; justify-content:space-between; align-items:center }
.event-banner-main h4{ color:#e9f3ff; font-size:1rem }
.event-location{ color:var(--muted-2); font-size:0.9rem }
.event-banner-details .detail-row{ display:flex; justify-content:space-between; color:var(--muted); font-size:0.92rem }
.route-summary{ display:flex; gap:12px; flex-wrap:wrap }
.route-stat{ display:flex; gap:6px; align-items:center; color:var(--muted) }
.route-actions{ display:flex; gap:8px; flex-wrap:wrap }

/* ===== FRASES SAZONAIS ===== */
.seasonal-phrase-banner{
  display:flex;
  gap:14px;
  align-items:center;
  background: linear-gradient(180deg, rgba(14,16,36,0.6), rgba(8,10,28,0.65));
  border:1px solid var(--glass-border);
  border-radius:14px;
  padding:14px 16px;
  position:relative;
  overflow:hidden;
}
.seasonal-phrase-banner::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(120deg, transparent 0%, rgba(123,92,255,0.06) 40%, rgba(52,209,243,0.06) 60%, transparent 100%),
    linear-gradient(0deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 100% 100%, 140px 140px, 140px 140px;
  opacity:.9;
}
.seasonal-phrase-banner .phrase-icon{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-size:1.2rem; color:var(--accent-gold);
  background: rgba(255,255,255,0.04);
  border:1px solid var(--neon-outline);
}
.seasonal-phrase-banner .phrase-content{ display:flex; flex-direction:column; align-items:flex-start }
.seasonal-phrase-banner .phrase-text{
  color:#e8f1ff; font-weight:700; letter-spacing:.02em; transition: opacity .3s ease;
}
.seasonal-phrase-banner .phrase-subtitle{
  color:var(--muted-2); font-size:0.86rem; margin-top:2px;
}

/* Empty state subtle card */
.empty-state{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:18px; border-radius:14px; width:min(780px,96%);
  background: linear-gradient(180deg, rgba(12,14,34,0.55), rgba(6,8,22,0.6));
  border:1px solid var(--glass-border);
  color:var(--muted);
}
.empty-state i{ color:var(--accent-cyan); font-size:1.6rem }