:root{
  --hero-overlay-light-from: rgba(255,255,255,.70);
  --hero-overlay-light-to:   rgba(255,255,255,.80);
  --hero-overlay-dark-from:  rgba(15,23,42,.78);
  --hero-overlay-dark-to:    rgba(15,23,42,.85);
  --card-border-light:#d4dde5;
  --card-border-dark:#3a4a5a;
  --card-type-border-w:1.25px;
}

html,body{font-family:'Inter',sans-serif;}
body{background:#f8fafc;color:#1e293b;min-height:100vh;overflow-x:hidden;}
.hero-bg-layer{
  position:fixed;inset:0;z-index:-1;
  background:
    linear-gradient(var(--hero-overlay-light-from),var(--hero-overlay-light-to)),
    linear-gradient(135deg,#f1f5f9,#e2e8f0);
  opacity:.30;filter:brightness(1.02) saturate(1.05);pointer-events:none;
  transition:background-image .6s ease, opacity .4s;
}
.hero-bg-layer.bg-loaded{opacity:.38;}
@media (prefers-color-scheme: dark){
  body{background:#0f172a;color:#e2e8f0;}
  .hero-bg-layer{
    background:
      linear-gradient(var(--hero-overlay-dark-from),var(--hero-overlay-dark-to)),
      linear-gradient(135deg,#1e293b,#0f172a);
    opacity:.75;
  }
  .hero-bg-layer.bg-loaded{opacity:.82;}
}

.brand-heading{
  font-size:clamp(2.6rem,5.8vw,4rem);font-weight:800;line-height:1;
  background:linear-gradient(120deg,#16a34a,#22c55e,#34d399,#16a34a);
  background-size:170% 170%;-webkit-background-clip:text;color:transparent;
  animation:brandShift 8s ease-in-out infinite;letter-spacing:-1px;
  text-shadow: 0px 1px 0px #cce3d8, 0px 2px 0px #a4c9b3, 0px 3px 0px #7ba08e, 4px 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  perspective: 800px;
}
.brand-heading:hover {transform: rotateX(10deg) rotateY(-5deg) scale(1.05);}
@media (prefers-color-scheme: dark) {
  .brand-heading {
    text-shadow: 0px 1px 0px #0c3b24, 0px 2px 0px #082918, 0px 3px 0px #04170d, 4px 4px 8px rgba(0,0,0,0.3);
  }
}
@keyframes brandShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

.event-reminder-banner {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  animation: fadeInDown 0.5s ease-out;
}
.event-reminder-banner p { font-size: 0.8rem; }
.event-reminder-banner .actions { display: flex; gap: 0.5rem; }
.event-reminder-banner button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s;
}
.event-reminder-banner button:hover { background: rgba(255, 255, 255, 0.2); }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.accordion-item{background:rgba(255,255,255,.93);border:1px solid #e2e8f0;border-radius:1.15rem;backdrop-filter:blur(6px);position:relative;overflow:visible;}
@media (prefers-color-scheme: dark){.accordion-item{background:rgba(30,41,59,.82);border-color:#334155;}}
.accordion-header{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(90deg,rgba(34,197,94,.08),transparent);
  border:none;padding:1rem 1.35rem;border-radius:1.15rem;
  font-size:1.05rem;font-weight:600;color:#134e33;cursor:pointer;
}
.accordion-header.active{background:linear-gradient(90deg,rgba(34,197,94,.15),transparent);}
.accordion-content{max-height:0;overflow:hidden;transition:max-height .48s cubic-bezier(.65,.05,.36,1);will-change:max-height;}
.accordion-content-inner{padding:1.35rem 1.35rem 1.25rem;display:flex;flex-direction:column;gap:1.1rem;min-height:var(--campaign-section-min-height,min(48vh,480px));}


:root{
  --campaign-grid-min-height:min(48vh,520px);
  --campaign-section-min-height:min(max(22rem,50vh),40rem);
}

#active-campaigns-list,#upcoming-campaigns-list,#recent-campaigns-list{
  display:grid;
  gap:1.15rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  align-items:start;
  grid-auto-rows:var(--campaign-grid-row-size,16px);
  grid-auto-flow:dense;
  justify-content:stretch;
  min-height:var(--campaign-grid-min-height);
}

:is(#active-campaigns-list,#upcoming-campaigns-list,#recent-campaigns-list).campaign-grid--single{
  grid-template-columns:minmax(0,clamp(320px,60vw,420px));
  justify-content:center;
}

.campaign-card{
  position:relative;
  background:linear-gradient(145deg,#ffffff,#f1f5f9);
  border:var(--card-type-border-w) solid var(--type-color,var(--card-border-light));
  border-radius:1rem;
  overflow:hidden;
  display:flex;flex-direction:column;
  grid-row-end:span var(--row-span,1);
  transition:box-shadow .18s,transform .18s,border-color .25s;
}
.campaign-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(16,185,129,.30);}
.campaign-card:focus-visible{outline:2px solid var(--type-color);outline-offset:2px;}
@media (prefers-color-scheme: dark){
  .campaign-card{background:linear-gradient(140deg,#1e293b,#0f172a);border-color:var(--type-color,var(--card-border-dark));}
  .campaign-card:hover{box-shadow:0 8px 24px -8px rgba(16,185,129,.40);}
}

.campaign-card.campaign-card--event {
  box-shadow: inset 0 0 0 2px #3b82f6, 0 4px 12px -4px rgba(59, 130, 246, 0.3);
}
.campaign-card.campaign-card--event:hover {
  box-shadow: inset 0 0 0 2px #2563eb, 0 8px 24px -8px rgba(59, 130, 246, 0.4);
}

.campaign-encerrada{filter:none !important;}
.ended-badge{
  position:absolute;top:6px;left:6px;z-index:6;
  background:linear-gradient(90deg,#1e293b,#0f172a);
  color:#fff;font-size:.56rem;font-weight:700;
  letter-spacing:.5px;padding:.35rem .55rem;
  border-radius:.55rem;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.35);
  text-transform:uppercase;
}
@media (prefers-color-scheme: dark){
  .ended-badge{background:linear-gradient(90deg,#475569,#1e293b);}
}

.campaign-card .type-accent{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:1rem 0 0 1rem;background:var(--type-color,#9ca3af);}

.media-wrapper{position:relative;width:100%;aspect-ratio:16/9;background:#0f172a;overflow:hidden;cursor:pointer;}
@supports not (aspect-ratio:16/9){.media-wrapper{height:10.5rem;}}
.media-container{position:absolute;inset:0;}
.media-item{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s;filter:brightness(.96);}
.media-item.active{z-index:1;}
.media-item.loaded{opacity:1;}
.media-skeleton{position:absolute;inset:0;background:#e2e8f0;}
@media (prefers-color-scheme: dark){.media-skeleton{background:#1e293b;}}

.collapsed-overlay{
  position:absolute;left:0;right:0;bottom:0;padding:.55rem .6rem .6rem;
  display:flex;flex-direction:column;gap:.45rem;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(255,255,255,.85) 45%,rgba(255,255,255,.97) 100%);
  z-index:3;pointer-events:none;
}
.collapsed-overlay .title-mini{
  font-size:.8rem;font-weight:800;line-height:1.15;color:#0a2819;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.collapsed-overlay .top-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;}
.collapsed-overlay .entity-chip-mini{display:inline-flex;align-items:center;gap:4px;}
.collapsed-overlay .type-mini{font-size:.60rem;font-weight:700;border-radius:999px;padding:.25rem .6rem;white-space:nowrap;}
.collapsed-overlay .meta-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding-right:2.5rem;}
.collapsed-overlay .urgent-mini{font-size:.60rem;font-weight:800;color:#fff;background:#dc2626;border-radius:.4rem;padding:.15rem .45rem;}
.collapsed-overlay .countdown-badge{font-size:.60rem;padding:.18rem .5rem;border-radius:.55rem;background:var(--_bg);color:var(--_fg);border:1px solid var(--_bd);font-weight:700;}

.campaign-card.is-collapsible.collapsed .collapsed-overlay{display:flex;}
.campaign-card.is-collapsible.expanded .collapsed-overlay{display:none;}
.campaign-card.is-collapsible.collapsed .card-body{display:none;}
.campaign-card.is-collapsible.expanded .card-body{display:flex;}
/* Mostrar botão share mini apenas quando card colapsado */
.campaign-card.is-collapsible.collapsed .card-share-btn-mini{display:flex;}
.campaign-card.is-collapsible.expanded .card-share-btn-mini{display:none;}

.card-body{
  position:relative;z-index:2;padding:1rem 1rem 1rem 1.1rem;
  margin-left:3px;
  display:flex;flex-direction:column;gap:.65rem;flex-grow:1;
  background:linear-gradient(#ffffff,#f8fafc);
}
@media (prefers-color-scheme: dark){.card-body{background:linear-gradient(#1e293b,#0f172a);} }
.card-body>.top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:.7rem;}
.card-title{font-weight:700;font-size:1rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

.progress-group{display:grid;gap:.35rem;}
.progress-bar{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden;}
.progress-bar>span{display:block;height:100%;background:linear-gradient(90deg,#16a34a,#059669);transition:width .55s;}
.progress-bar>span.is-near-goal{animation:goalPulse 1.5s ease-out infinite;}
@keyframes goalPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.45);}70%{box-shadow:0 0 0 10px rgba(34,197,94,0);}100%{box-shadow:0 0 0 0 rgba(34,197,94,0);} }

.donor-strip{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .45rem;}
.donor-avatar-container{position:relative;}
.donor-avatar{width:36px;height:36px;border-radius:999px;object-fit:cover;transition:transform .2s;}
.donor-avatar:hover{transform:scale(1.06);}
.star-badge{position:absolute;bottom:-2px;right:-4px;background:#f59e0b;color:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;font-size:10px;}

.like-button{cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#64748b;transition:color .2s;}
.like-button:hover,.like-button.liked{color:#ef4444;}

.card-details-btn{
  margin-top:.6rem;display:inline-flex;align-items:center;gap:.4rem;
  background:#2563eb;color:#fff;font-weight:600;font-size:.72rem;
  padding:.55rem .9rem;border-radius:.65rem;border:none;cursor:pointer;
  box-shadow:0 2px 4px -1px rgba(0,0,0,.18);
  transition:background .2s,transform .2s;
}
.card-details-btn:hover{background:#1d4ed8;}
.card-details-btn:active{transform:scale(.95);}

/* Botão de compartilhar no card */
.card-share-btn{
  margin-top:.6rem;display:inline-flex;align-items:center;justify-content:center;
  background:#f3f4f6;color:#4b5563;font-weight:600;
  width:2.5rem;height:2.5rem;border-radius:.65rem;border:none;cursor:pointer;
  box-shadow:0 2px 4px -1px rgba(0,0,0,.1);
  transition:background .2s,transform .2s,color .2s;
  flex-shrink:0;
}
.card-share-btn:hover{background:#e5e7eb;color:#1f2937;}
.card-share-btn:active{transform:scale(.95);}

/* Botão de compartilhar mini (no card colapsado) */
.card-share-btn-mini{
  position:absolute;
  bottom:0.5rem;
  right:0.5rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.95);color:#4b5563;
  width:2rem;height:2rem;border-radius:50%;border:none;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  transition:background .2s,transform .2s,color .2s;
  z-index:5;
  pointer-events:auto; /* Permitir cliques mesmo com parent pointer-events:none */
}
.card-share-btn-mini:hover{background:#fff;color:#2563eb;transform:scale(1.1);}
.card-share-btn-mini:active{transform:scale(.95);}

.filter-dropdown-container{position:relative;z-index:50;}
.filter-dropdown-container button[data-filter-trigger]{
  max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border:1 solid transparent;font-size:.66rem;font-weight:600;
}
.filter-dropdown-menu{display:none;position:absolute;top:110%;right:0;background:#fff;border:1px solid #e2e8f0;
  border-radius:.85rem;box-shadow:0 14px 34px -10px rgba(0,0,0,.22);padding:.5rem;min-width:190px;z-index:60;}
.filter-dropdown-container.open .filter-dropdown-menu{display:block;animation:fadeIn .18s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.filter-dropdown-item{width:100%;text-align:left;font-size:.68rem;font-weight:500;padding:.5rem .65rem;border-radius:.5rem;color:#334155;cursor:pointer;}
.filter-dropdown-item:hover{background:#f1f5f9;}
.filter-dropdown-item.active{background:#dcfce7;color:#166534;font-weight:600;}

.social-bar{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:.6rem;}
.social-icon-btn{
  width:36px;height:36px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #e2e8f0;background:#fff;color:#334155;
  transition:transform .15s, background .15s;
}
.social-icon-btn:hover{transform:translateY(-2px);background:#f1f5f9;}
.social-icon-btn svg{width:18px;height:18px;display:block;flex:0 0 18px;}
@media (prefers-color-scheme: dark){
  .social-icon-btn{background:#1e293b;border-color:#334155;color:#e2e8f0;}
  .social-icon-btn:hover{background:#0f172a;}
}

.entity-chip,
.entity-chip-mini{
  display:inline-flex;align-items:center;gap:4px;max-width:100%;
  font-weight:600;line-height:1.1;white-space:nowrap;
}
.entity-chip-mini{font-size:.66rem;}
.entity-chip{
  font-size:.70rem;padding:2px 6px 2px 4px;border-radius:7px;position:relative;
  background:linear-gradient(90deg,color-mix(in srgb,var(--type-color,#16a34a) 18%,#ffffff) 0%,rgba(255,255,255,0) 80%);
  box-shadow:0 0 0 1px rgba(255,255,255,.35),inset 0 0 0 1px color-mix(in srgb,var(--type-color,#16a34a) 35%, transparent);
}
@media (prefers-color-scheme: dark){
  .entity-chip{
    background:linear-gradient(90deg,color-mix(in srgb,var(--type-color,#16a34a) 35%,#1e293b) 0%,rgba(30,41,59,0) 85%);
    box-shadow:0 0 0 1px rgba(255,255,255,.10),inset 0 0 0 1px color-mix(in srgb,var(--type-color,#16a34a) 40%, transparent);
  }
}
.entity-logo,
.entity-logo-mini,
.entity-initial,
.entity-initial-mini{
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;flex-shrink:0;font-weight:600;
  font-size:.65rem;letter-spacing:.5px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.12);
  color:#334155;
}
.entity-logo,.entity-initial{width:22px;height:22px;}
.entity-logo-mini,.entity-initial-mini{width:18px;height:18px;font-size:.58rem;box-shadow:0 0 0 1px rgba(0,0,0,.10);}
.entity-logo img,
.entity-logo-mini img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.entity-name,.entity-name-mini{display:inline-block;max-width:130px;overflow:hidden;text-overflow:ellipsis;}
@media (min-width:640px){
  .entity-name{max-width:160px;}
  .entity-name-mini{max-width:110px;}
}

.page-loading-overlay{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(248,250,252,.85);backdrop-filter:blur(8px);transition:opacity .3s ease,visibility .3s ease;
}
.page-loading-overlay.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
.dark .page-loading-overlay{background:rgba(15,23,42,.85);}
.page-loading-overlay__inner{
  background:rgba(255,255,255,.95);border-radius:1.25rem;padding:1.5rem 2rem;text-align:center;
  box-shadow:0 25px 60px -30px rgba(15,23,42,.5);display:flex;flex-direction:column;gap:.75rem;min-width:min(90vw,320px);
}
.dark .page-loading-overlay__inner{background:rgba(30,41,59,.92);color:#e2e8f0;}
.page-loading-overlay__inner .loader{margin:0 auto;}
.page-loading-overlay__inner .overlay-copy{font-size:.9rem;font-weight:600;color:#1e293b;}
.dark .page-loading-overlay__inner .overlay-copy{color:#e2e8f0;}

footer{font-size:.7rem;margin-top:3rem;}
.toast-container{position:fixed;bottom:calc(1rem + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:.6rem;width:min(92%,420px);}
.toast{background:#1e293b;color:#fff;padding:.7rem .95rem;border-radius:.85rem;font-size:.8rem;font-weight:500;box-shadow:0 8px 24px -8px rgba(0,0,0,.35);animation:toastIn .3s ease;}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px);}to{opacity:1;transform:translate(-50%,0);}}