/* PedeBis: página Seguindo (mockup do Gabriel, 06/10/2026).
   Topo com foto de plateia esmaecida, três cartões de resumo, listas de
   shows com miniatura, pílula de data e meta com relógio e pino. */
.sg-hero { position: relative; margin: 0 -16px; padding: 14px 16px 6px; overflow: hidden; }
.sg-hero::before { content: ""; position: absolute; inset: 0; background: url('/img/festival.jpg') right bottom / 78% auto no-repeat; opacity: 0.42; }
.sg-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0 38%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, var(--bg) 100%); }
.sg-hero > * { position: relative; z-index: 1; }
.sg-hero .logo { font-family: var(--font-display); font-weight: 900; font-size: 1.45rem; color: var(--fg); text-decoration: none; letter-spacing: -0.02em; }
.sg-hero .logo em { font-style: normal; color: var(--marca); }
.sg-hero h1 { font-size: 2.4rem; line-height: 1.05; margin: 14px 0 6px; letter-spacing: -0.02em; }
.sg-hero p { margin: 0 0 14px; color: var(--fg-muted); font-size: 1.05rem; }
.sg-hero .ds-chips { margin-bottom: 4px; }

.sg-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 6px; }
.sg-resumo a { display: flex; align-items: center; gap: 8px; min-height: 72px; padding: 10px 6px 10px 9px; min-width: 0; border-radius: 16px; background: var(--surface-1); border: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.sg-resumo .ico { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--fg); }
.sg-resumo .ico.marca { background: rgba(255, 184, 0, 0.16); color: var(--accent); }
.sg-resumo .ico.vivo { background: rgba(60, 200, 110, 0.16); color: var(--live, #3ec46d); }
.sg-resumo .txt { flex: 1; min-width: 0; line-height: 1.15; }
.sg-resumo .txt b { display: block; font-size: 1.2rem; font-weight: 800; }
.sg-resumo .txt span { font-size: 0.85rem; color: var(--fg-muted); }
.sg-resumo .txt .on { color: var(--live, #3ec46d); font-weight: 700; display: block; font-size: 1.05rem; }
.sg-resumo .txt .lab { display: block; font-size: 0.82rem; color: var(--fg-muted); }
.sg-resumo svg.chev { flex: none; color: var(--fg-muted); width: 16px; height: 16px; }
@media (max-width: 400px) { .sg-resumo svg.chev { display: none; } .sg-resumo .txt .on { font-size: 0.98rem; } }

.sg-cab { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 0 10px; }
.sg-cab h2 { font-size: 1.2rem; margin: 0; letter-spacing: -0.01em; }
.sg-cab a { color: var(--accent); text-decoration: none; font-size: 0.9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }

.sg-lista { display: flex; flex-direction: column; gap: 10px; }
.sg-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: var(--surface-1); border: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.sg-item .foto { width: 96px; height: 74px; flex: none; border-radius: 12px; background: var(--surface-2) center / cover no-repeat; }
.sg-item .foto.redonda { width: 80px; }
.sg-item .corpo { flex: 1; min-width: 0; }
.sg-item .nome { font-weight: 800; font-size: 1.05rem; line-height: 1.2; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-item .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 0.86rem; color: var(--fg-muted); }
.sg-item .meta .i { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sg-item .meta .i svg { width: 16px; height: 16px; }
.sg-item .pill { display: inline-block; padding: 4px 9px; border-radius: 999px; background: var(--surface-2); color: var(--fg); font-weight: 600; font-size: 0.8rem; }
.sg-item .pill.hoje { background: var(--accent); color: var(--on-accent); font-weight: 800; }
.sg-item .pill.vivo { background: var(--live, #3ec46d); color: #06130a; font-weight: 800; }
.sg-item .sem { color: var(--fg-muted); font-size: 0.95rem; }
.sg-item .chev { flex: none; color: var(--fg-muted); }
.sg-lista.apagada .sg-item { opacity: 0.85; }

.sg-avisos { display: flex; align-items: center; gap: 14px; margin: 22px 0 10px; padding: 16px; border-radius: 18px; background: rgba(255, 184, 0, 0.07); border: 1px solid rgba(255, 184, 0, 0.55); color: var(--fg); text-decoration: none; }
.sg-avisos .ico { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 184, 0, 0.18); color: var(--accent); }
.sg-avisos b { display: block; color: var(--accent); font-size: 1.1rem; margin-bottom: 4px; }
.sg-avisos p { margin: 0; font-size: 0.9rem; color: var(--fg-muted); line-height: 1.4; }
.sg-avisos .chev { flex: none; color: var(--fg-muted); }
.sg-vazio { padding: 26px 16px; text-align: center; color: var(--fg-muted); border: 1px dashed var(--line); border-radius: 16px; }