.pfa { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Tabs */
.pfa-tabs{
  display:flex; gap:12px; align-items:stretch;
  margin: 0 0 16px;
  flex-wrap:wrap;
}
.pfa-tab{
  border:0; cursor:pointer;
  padding:14px 18px;
  font-weight:800;
  border-radius:10px;
  background:#cfcfcf;
  color:#fff;
  min-width:160px;
  text-align:center;
}
.pfa-tab.is-active{ background:#10b7f0; }
.pfa-tab:focus{ outline:2px solid rgba(16,183,240,.4); outline-offset:2px; }

/* Toggle bar */
.pfa-filters-togglebar{
  display:flex;
  justify-content:flex-end;
  margin: 0 0 12px;
}
.pfa-btn-filters{
  border:0;
  cursor:pointer;
  border-radius:999px;
  padding:10px 16px;
  font-weight:900;
  background:#f5c338;
  color:#fff;
  display:inline-flex;
  gap:10px;
  align-items:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.pfa-btn-filters i{ transition: transform .18s ease; }
.pfa-btn-filters.is-open i{ transform: rotate(180deg); }

/* Painel filtros */
.pfa-filter{
  background:#f5c338;
  border-radius:14px;
  padding:18px 22px;
  margin-bottom:18px;

  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:24px;

  /* Alinhamento melhor ao centro vertical */
  align-items:start;
}

/* COLAPSADO (sem depender de hidden) */
.pfa-filter.is-collapsed{
  display:none !important;
}

.pfa-filter-title{
  font-weight:900;
  color:#fff;
  font-size:22px;
  margin-bottom:12px;
}

/* Ajuste colunas: dá um “miolo” mais alinhado */
.pfa-filter-col{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.pfa-checks{ display:flex; flex-direction:column; gap:10px; }

.pfa-check{
  display:flex; gap:10px; align-items:center;
  color:#fff; font-weight:800;
}
.pfa-check input{ width:18px; height:18px; accent-color:#fff; }

.pfa-select{
  width:100%;
  border:0;
  border-radius:12px;
  padding:12px 12px;
  font-weight:800;
  height:46px;
}

.pfa-btn-clear{
  margin-top:12px;
  border:0;
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  width:120px;
}

/* Cabeçalho listagem */
.pfa-list-head{
  background:#10b7f0;
  color:#fff;
  font-weight:900;
  border-radius:12px;
  display:grid;
  grid-template-columns: 220px 1fr 220px;
  gap:14px;
  padding:14px 18px;
  margin-bottom:10px;
}
.pfa-col-time, .pfa-col-activity, .pfa-col-place{ letter-spacing:.5px; }

/* Items */
.pfa-item{
  display:grid;
  grid-template-columns: 220px 1fr 220px;
  gap:14px;
  padding:18px 10px;
  border-bottom:1px dashed #cfcfcf;
  align-items:start;
}
.pfa-time{ display:flex; gap:12px; align-items:center; padding-left:8px; }
.pfa-time-icon{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  color:#666;
}
.pfa-time-text{ font-weight:900; color:#666; font-size:20px; }

.pfa-title{
  font-weight:900;
  color:#10b7f0;
  font-size:22px;
  margin-bottom:6px;
}
.pfa-meta{ color:#777; font-weight:700; margin:3px 0; }
.pfa-meta strong{ color:#666; }

.pfa-place{ text-align:right; padding-right:8px; }
.pfa-place-label{ color:#10b7f0; font-weight:900; }
.pfa-place-val{ color:#777; font-weight:800; margin-top:6px; }

.pfa-badges{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; }
.pfa-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  background:#f2f2f2;
  color:#555;
}
.pfa-badge--mundo{ background:#fff; }

.pfa-empty{
  padding:18px;
  background:#f6f6f6;
  border-radius:12px;
  color:#666;
  font-weight:800;
}

/* Loading (controlado por classe no root) */
.pfa-loading{
  margin-top:14px;
  display:none; /* por defeito escondido */
  gap:10px; align-items:center;
  color:#666;
  font-weight:800;
}
.pfa.is-loading .pfa-loading{
  display:flex;
}
.pfa.is-loading .pfa-results{
  opacity:.55;
}

.pfa-spinner{
  width:16px; height:16px;
  border:3px solid #ddd;
  border-top-color:#10b7f0;
  border-radius:50%;
  display:inline-block;
  animation: pfaSpin .8s linear infinite;
}
@keyframes pfaSpin{ to { transform:rotate(360deg); } }

/* Responsivo */
@media (max-width: 900px){
  .pfa-filter{ grid-template-columns: 1fr; }
  .pfa-list-head, .pfa-item{ grid-template-columns: 1fr; }
  .pfa-place{ text-align:left; padding-right:0; }
  .pfa-tab{ min-width: unset; flex:1; }
  .pfa-filters-togglebar{ justify-content:flex-end; }
}

/* ACTIVIDADE passa a ter duas colunas internas */
.pfa-activity{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
  align-items:start;
}

/* Bloco de info (título, organizador, badges) */
.pfa-activity > :not(.pfa-synopsis){
  grid-column: 1;
}

/* SINOPSE À DIREITA */
.pfa-synopsis{
  grid-column: 2;
  margin-top: 0;
  padding-left: 24px;
  border-left: 2px solid #e6e6e6;

  font-size: 13px;          /* letra mais pequena */
  line-height: 1.55;
  color: #666;
  font-weight: 500;
}

/* Em mobile volta a ficar por baixo */
@media (max-width: 900px){
  .pfa-activity{
    grid-template-columns: 1fr;
  }

  .pfa-synopsis{
    grid-column: 1;
    padding-left: 0;
    border-left: 0;
    margin-top: 14px;
    font-size: 14px;
  }
}

.pfa-synopsis{
  position: relative;
  top: -6px;   /* ajusta: -4px, -8px, etc */
}

/* ACTIVIDADE com 2 colunas: esquerda (info) + direita (sinopse) */
.pfa-activity{
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  column-gap: 28px;
  align-items: start;
}

/* Tudo o que NÃO é sinopse fica na coluna 1 */
.pfa-activity > :not(.pfa-synopsis){
  grid-column: 1;
}

/* Sinopse fica SEMPRE no topo (linha 1), na coluna 2 */
.pfa-synopsis{
  grid-column: 2;
  grid-row: 1;              /* <-- ISTO é o essencial */
  align-self: start;

  margin-top: 0 !important;
  padding-left: 24px;
  border-left: 2px solid #e6e6e6;

  font-size: 13px;
  line-height: 1.55;
  color: #666;
  font-weight: 500;
}

/* Em mobile, sinopse volta para baixo */
@media (max-width: 900px){
  .pfa-activity{
    grid-template-columns: 1fr;
  }
  .pfa-synopsis{
    grid-column: 1;
    grid-row: auto;
    padding-left: 0;
    border-left: 0;
    margin-top: 14px !important;
    font-size: 14px;
  }
}

/* ACTIVIDADE: título + sinopse na mesma linha */
.pfa-activity--grid{
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  column-gap: 28px;
  row-gap: 10px;
  align-items:start;

  grid-template-areas:
    "title  title"
    "meta   synopsis";
}


/* Áreas */
.pfa-activity-title{ grid-area: title; }

.pfa-synopsis{
  grid-area: synopsis;
  align-self: start;

  margin: 0 !important;
  padding-left: 24px;
  border-left: 2px solid #e6e6e6;

  font-size: 13px;
  line-height: 1.55;
  color: #666;
  font-weight: 500;
}

/* Wrapper meta (organizador + público + temas) */
.pfa-activity-meta{
  grid-area: meta;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

/* Faz os meta em linha consistente */
.pfa-activity-meta .pfa-meta{
  display:block;
  margin: 0;
}

/* Se não houver sinopse, não mostrar “coluna vazia” */
.pfa-synopsis--empty{
  display:none;
}

/* Mobile: tudo em 1 coluna */
@media (max-width: 900px){
  .pfa-activity--grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "meta"
      "synopsis";
  }

  .pfa-synopsis{
    padding-left: 0;
    border-left: 0;
    margin-top: 10px !important;
    font-size: 14px;
  }
}

.pfa-activity-title{
  grid-area: title;
}

.pfa-activity-meta{
  grid-area: meta;
}

.pfa-synopsis{
  grid-area: synopsis;
  align-self: start;
  margin: 0 !important;
  padding-left: 24px;
  border-left: 2px solid #e6e6e6;
  font-size: 13px;
  line-height: 1.55;
  color: #666;
}

/* Força o título a ocupar 100% da largura */
.pfa-activity-title{
  grid-column: 1 / -1 !important;   /* da coluna 1 até à última */
  width: 100%;
  display: block;
}

/* =========================
   Mobile-first: separador de dia
   ========================= */

/* Wrapper */
.pfa-day-sep{
  margin: 1.4rem 0 0.9rem;     /* mais compacto em mobile */
  position: relative;
}

/* Linha subtil */
.pfa-day-sep::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:#e5e7eb;
  z-index:0;
}

/* Título do dia (mobile) */
.pfa-day-title{
  display:inline-block;
  max-width: 92%;
  background:#fff;
  padding:0.35rem 0.75rem;
  font-weight:800;
  font-size:0.85rem;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#374151;
  position:relative;
  z-index:1;

  /* evita rebentamentos e melhora leitura */
  white-space: normal;
  word-break: break-word;
  border-radius: 999px;
}

/* Primeiro separador mais curto */
.pfa-results > .pfa-day-sep:first-child{
  margin-top: 0.6rem;
}

/* =========================
   Progressive enhancement (tablet/desktop)
   ========================= */
@media (min-width: 768px){
  .pfa-day-sep{
    margin: 2.2rem 0 1.1rem;
  }

  .pfa-day-title{
    max-width: none;
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
  }
}

@media (min-width: 1024px){
  .pfa-day-sep{
    margin: 2.6rem 0 1.2rem;
  }

  .pfa-day-title{
    font-size: 0.95rem;
  }
}

/* =========================
   Data / separador de dia
   Mobile-first
   ========================= */

.pfa-day-title{
  font-size: 1.05rem;      /* MAIOR em mobile */
  font-weight: 800;
  padding: 0.45rem 0.9rem;
  letter-spacing: 0.05em;
}

/* Linha mais afastada da data */
.pfa-day-sep{
  margin: 1.8rem 0 1.2rem;
}

/* =========================
   Tablet
   ========================= */
@media (min-width: 768px){
  .pfa-day-title{
    font-size: 1.15rem;
    padding: 0.5rem 1.1rem;
  }
}

/* =========================
   Desktop
   ========================= */
@media (min-width: 1024px){
  .pfa-day-title{
    font-size: 1.25rem;   /* bem visível em desktop */
    padding: 0.55rem 1.3rem;
  }
}
.pfa-day-title{
  background: #f0f9ff;
}