/* ════════════════════════════════════════════════════════════
   rsvpro-public.css
   Estilos para páginas públicas sem sidebar.
   Carregado após rsvpro-layout.css e app.css.
   ════════════════════════════════════════════════════════════ */

/* ── 1. Anular layout de sidebar do app.css ── */
.app-shell{
  display:block !important;
  width:100% !important;
}
.sidebar{display:none !important}
.main{
  margin-left:0 !important;
  width:100% !important;
  max-width:100% !important;
  padding:22px 32px 48px !important;
  background:transparent !important;
}

/* ── 2. Cabeçalho de página melhorado ── */
.page-head{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:12px !important;
  margin-bottom:18px !important;
  padding:14px 18px !important;
  background:#fff !important;
  border:1px solid #e8f0e9 !important;
  border-radius:14px !important;
  box-shadow:0 2px 10px rgba(6,80,30,.05) !important;
}
.page-head > div:first-child{ flex:1;min-width:0 }
.page-head h1{
  font-size:1.35rem !important;
  font-weight:900 !important;
  letter-spacing:-.04em !important;
  color:#0d3b1e !important;
  margin:0 0 2px !important;
  font-family:'Inter',sans-serif !important;
}
.page-head p{
  font-size:.78rem !important;
  color:#537860 !important;
  margin:0 !important;
  font-weight:500 !important;
}
.top-selector{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  background:#f4faf4 !important;
  border:1px solid #c8e0cb !important;
  border-radius:10px !important;
  padding:8px 14px !important;
  height:auto !important;
  min-width:0 !important;
  flex-shrink:0 !important;
}
.top-selector label{
  font-size:.72rem !important;
  font-weight:700 !important;
  color:#537860 !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
  white-space:nowrap !important;
}
.top-selector select{
  font-size:.84rem !important;
  font-weight:700 !important;
  color:#0d3b1e !important;
  border:none !important;
  background:transparent !important;
  outline:none !important;
  cursor:pointer !important;
}
.top-selector small{
  font-size:.70rem !important;
  color:#6b8f72 !important;
  font-weight:500 !important;
}
.updated-box{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  background:#f4faf4 !important;
  border:1px solid #c8e0cb !important;
  border-radius:10px !important;
  padding:8px 14px !important;
  text-align:center !important;
  width:auto !important;
  min-width:90px !important;
  height:auto !important;
  flex-shrink:0 !important;
}
.updated-box span{
  font-size:.60rem !important;
  color:#537860 !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
}
.updated-box strong{
  font-size:.78rem !important;
  font-weight:800 !important;
  color:#0d3b1e !important;
}

/* ── 3. Dashboard grid ── */
.dashboard-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) !important;
  gap:16px !important;
  align-items:start !important;
  width:100% !important;
}

/* ── 4. Cards base (mapa, forecast, timeline) ── */
.map-card,
.current-card,
.forecast-panel,
.timeline-panel,
.detail-panel,
.info-grid article,
.recommend-card{
  border-radius:14px !important;
  border:1px solid #e8f0e9 !important;
  box-shadow:0 2px 12px rgba(6,80,30,.06) !important;
  background:#fff !important;
}
.panel-title-row h2,
.current-title-row h2,
.forecast-title-row h2,
.timeline-panel h2,
.detail-panel h2{
  font-size:1rem !important;
  font-weight:800 !important;
  color:#0d3b1e !important;
  font-family:'Inter',sans-serif !important;
  letter-spacing:-.03em !important;
}
.panel-title-row span,
.current-title-row a,
.forecast-title-row span{
  font-size:.70rem !important;
  color:#6b8f72 !important;
  font-weight:600 !important;
}

/* ── 5. Risk cards com gradiente por nível ── */
.risk-card{
  border-radius:14px !important;
  padding:14px 16px !important;
  transition:box-shadow .15s,transform .15s !important;
}
.risk-card:hover{
  box-shadow:0 6px 22px rgba(6,80,30,.10) !important;
  transform:translateY(-1px) !important;
}
.risk-card.baixo{
  background:linear-gradient(135deg,#f0fdf4 0%,#ecfdf5 100%) !important;
  border-color:#86efac !important;
  border-left:4px solid #16a34a !important;
}
.risk-card.moderado{
  background:linear-gradient(135deg,#fffbeb 0%,#fef9c3 100%) !important;
  border-color:#fde68a !important;
  border-left:4px solid #d97706 !important;
}
.risk-card.elevado{
  background:linear-gradient(135deg,#fff1f2 0%,#ffe4e6 100%) !important;
  border-color:#fca5a5 !important;
  border-left:4px solid #dc2626 !important;
}
.risk-top strong{
  font-size:.64rem !important;
  font-weight:900 !important;
  letter-spacing:.05em !important;
  border-radius:999px !important;
  padding:4px 12px !important;
}
.risk-card.baixo .risk-top strong{ background:#16a34a !important }
.risk-card.moderado .risk-top strong{ background:#d97706 !important }
.risk-card.elevado .risk-top strong{ background:#dc2626 !important }
.risk-card p{
  font-size:.78rem !important;
  line-height:1.45 !important;
  color:#374151 !important;
  font-weight:500 !important;
}

/* ── 6. Barras de nível (bars) ── */
.bars{ gap:3px !important }
.bars i{ height:5px !important;border-radius:3px !important }
.risk-card.baixo .bars i.on{ background:#16a34a !important }
.risk-card.moderado .bars i.on{ background:#d97706 !important }
.risk-card.elevado .bars i.on{ background:#dc2626 !important }

/* ── 7. Métricas meteorológicas ── */
.metrics-row div{
  border-radius:12px !important;
  background:linear-gradient(135deg,#f8fbf8 0%,#f0f7f0 100%) !important;
  border-color:#d8eadc !important;
  padding:10px 12px !important;
  min-width:80px !important;
}
.metrics-row span{
  font-size:.60rem !important;
  color:#4d7055 !important;
  font-weight:700 !important;
  letter-spacing:.05em !important;
  margin-bottom:4px !important;
}
.metrics-row b{
  font-size:1.05rem !important;
  font-weight:900 !important;
  color:#0d3b1e !important;
}

/* ── 8. Previsão — day cards ── */
.forecast-strip{
  gap:8px !important;
}
.day-card{
  border-radius:14px !important;
  padding:12px 10px !important;
  background:linear-gradient(160deg,#f8fbf8 0%,#fff 100%) !important;
  border:1px solid #e0ece0 !important;
  min-height:0 !important;
  transition:box-shadow .12s,transform .12s !important;
}
.day-card:hover{
  box-shadow:0 4px 16px rgba(6,80,30,.08) !important;
  transform:translateY(-1px) !important;
}
.day-title{
  font-size:.82rem !important;
  font-weight:800 !important;
  color:#0d3b1e !important;
  font-family:'Inter',sans-serif !important;
}
.day-date{
  font-size:.65rem !important;
  color:#537860 !important;
  font-weight:600 !important;
}
.day-values{
  font-size:.74rem !important;
  font-weight:600 !important;
  color:#374151 !important;
}
.mini-risks div{
  font-size:.68rem !important;
  font-weight:600 !important;
}
.mini-risks strong{
  font-size:.60rem !important;
  padding:3px 7px !important;
  letter-spacing:.03em !important;
}
.level-baixo   { background:#16a34a !important }
.level-moderado{ background:#d97706 !important }
.level-elevado { background:#dc2626 !important }

/* ── 9. Tabelas genéricas ── */
table{
  width:100%;
  border-collapse:collapse;
  font-size:.82rem;
}
thead th{
  background:#0f3e20;
  color:#fff;
  font-weight:700;
  font-size:.70rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:10px 14px;
  text-align:left;
  border:none;
}
thead th:first-child{ border-radius:10px 0 0 0 }
thead th:last-child { border-radius:0 10px 0 0 }
tbody tr:nth-child(even){ background:#f8fbf8 }
tbody tr:hover{ background:#f0f7f0 }
tbody td{
  padding:9px 14px;
  border-bottom:1px solid #e8f0e9;
  color:#1a3020;
  vertical-align:middle;
}
.table-wrap{
  overflow-x:auto;
  border-radius:12px;
  border:1px solid #e0ece0;
  box-shadow:0 2px 8px rgba(6,80,30,.05);
}

/* ── 10. Badges de nível em tabelas ── */
.badge-baixo,.badge-moderado,.badge-elevado{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.badge-baixo   { background:#dcfce7;color:#15803d }
.badge-moderado{ background:#fef9c3;color:#92400e }
.badge-elevado { background:#fee2e2;color:#b91c1c }

/* Estações dot map legend */
.dot.baixo   { background:#16a34a !important }
.dot.moderado{ background:#d97706 !important }
.dot.elevado { background:#dc2626 !important }

/* ── 11. Timeline / chart panel ── */
.timeline-panel{
  overflow-x:auto !important;
}
.rsv-tl-row-label{
  font-size:.72rem !important;
  font-weight:700 !important;
  color:#0d3b1e !important;
}
.rsv-tl-cell-baixo  { background:#bbf7d0 !important;border-color:#86efac !important }
.rsv-tl-cell-mod    { background:#fde68a !important;border-color:#fbbf24 !important }
.rsv-tl-cell-elevado{ background:#fca5a5 !important;border-color:#f87171 !important }

/* ── 12. Mapa Leaflet ── */
#rsvMap{
  border-radius:12px !important;
  overflow:hidden !important;
  height:300px !important;
  min-height:240px !important;
  max-height:340px !important;
}

/* ════════════════════════════════════════════════════════════
   MOBILE HAMBURGER MENU
   ════════════════════════════════════════════════════════════ */

.pub-hamburger{
  display:none;
  background:none;border:none;cursor:pointer;
  padding:8px;margin-left:auto;
  color:#fff;
}
.pub-hamburger svg{ display:block }

/* Mobile overlay menu */
.pub-mobile-menu{
  display:none;
  position:fixed;inset:0;z-index:200;
  background:rgba(5,25,11,.96);
  flex-direction:column;
  padding:0;
  overflow-y:auto;
}
.pub-mobile-menu.open{ display:flex }
.pub-mm-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;
  border-bottom:1px solid rgba(255,255,255,.10);
  flex-shrink:0;
}
.pub-mm-logo img{ height:36px;width:auto }
.pub-mm-close{
  background:rgba(255,255,255,.10);border:none;border-radius:8px;
  width:38px;height:38px;cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.pub-mm-links{
  display:flex;flex-direction:column;padding:16px 0;flex:1;
}
.pub-mm-links a{
  padding:16px 28px;
  font-size:1.05rem;font-weight:700;
  color:rgba(255,255,255,.78);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:10px;
  transition:background .12s,color .12s;
}
.pub-mm-links a:hover,.pub-mm-links a.pub-active{
  background:rgba(255,255,255,.07);color:#fff;
}
.pub-mm-ctas{
  padding:20px 28px 28px;
  display:flex;flex-direction:column;gap:10px;
  border-top:1px solid rgba(255,255,255,.10);
  flex-shrink:0;
}
.pub-mm-btn-p{
  display:block;text-align:center;
  padding:14px;background:#16a34a;color:#fff;
  border-radius:10px;text-decoration:none;font-size:.92rem;font-weight:800;
}
.pub-mm-btn-s{
  display:block;text-align:center;
  padding:13px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;text-decoration:none;font-size:.88rem;font-weight:600;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

@media(max-width:1100px){
  .dashboard-grid{
    grid-template-columns:1fr !important;
  }
  .forecast-strip{
    display:flex !important;
    overflow-x:auto !important;
    gap:8px !important;
    padding-bottom:8px !important;
    scroll-snap-type:x mandatory;
  }
  .day-card{
    flex:0 0 120px !important;
    scroll-snap-align:start;
  }
}

@media(max-width:860px){
  .pub-hamburger{ display:flex }
  .pub-nav-links,.pub-nav-end{ display:none !important }
  .main{ padding:14px 16px 40px !important }
  .page-head{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .page-head h1{ font-size:1.15rem !important }
  .top-selector,.updated-box{
    width:100% !important;
    min-width:0 !important;
  }
  .info-grid{ grid-template-columns:1fr !important }
  .detail-grid{ grid-template-columns:1fr !important }
  #rsvMap{ height:220px !important;max-height:220px !important }
}

@media(max-width:640px){
  .risk-grid{ grid-template-columns:1fr 1fr !important }
  .metrics-row{ gap:6px !important }
  .metrics-row div{ min-width:70px !important;padding:8px !important }
  .metrics-row b{ font-size:.9rem !important }
  .day-card{ flex:0 0 105px !important }
  .pub-footer-parc{ flex-direction:column !important;align-items:flex-start !important }
  .pf-spacer{ display:none !important }
  .pf-desc{ text-align:left !important }
}