/* =========================================================
   SITE VIVO (Assets/vivo.css) — ticker de prazos, pulso público, FAQ vivo, bolha da Nina proativa e modo noturno.
   Lógica em includes/vivo.php e Assets/vivo.js.
   ========================================================= */

/* ---------- Ticker: uma linha fina logo abaixo do cabeçalho ---------- */
.vivo-ticker { position: relative; z-index: 8; display: flex; align-items: center; gap: 10px; padding: 7px var(--pad); background: #0f1f30; color: #e9f0f7; font-family: var(--font); font-size: 13.5px; line-height: 1.3; letter-spacing: -.005em; border-bottom: 1px solid rgba(255,255,255,.08); }
.vivo-ticker[hidden] { display: none; }
.vivo-ticker__ico { flex: none; font-size: 15px; opacity: .8; }
.vivo-ticker__trilho { flex: 1; min-width: 0; overflow: hidden; }
.vivo-ticker--rola .vivo-ticker__trilho { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 24px), transparent); }
.vivo-ticker__faixa { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; padding-left: 2px; will-change: transform; }
.vivo-ticker--rola .vivo-ticker__faixa { padding-left: 20px; }
.vivo-ticker--rola .vivo-ticker__faixa { animation: vivo-rola var(--vivo-dur, 40s) linear infinite; }
.vivo-ticker--rola:hover .vivo-ticker__faixa, .vivo-ticker--rola:focus-within .vivo-ticker__faixa { animation-play-state: paused; }
@keyframes vivo-rola { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.vivo-item { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.vivo-item b { font-weight: 700; }
.vivo-item--frase b { padding: 1px 7px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.vivo-item--dia { color: #c9d8e6; }
.vivo-item--prazo { padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.vivo-item--prazo:hover { background: rgba(255,255,255,.16); }
.vivo-item--prazo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vivo-item--perto { border-color: rgba(255,196,72,.6); }
.vivo-item--perto b { color: #ffd47a; }
.vivo-item--urgente { background: rgba(255,80,80,.18); border-color: rgba(255,120,120,.6); }
.vivo-item--urgente b { color: #ffb3b3; }
.vivo-data { opacity: .7; font-size: 12px; }
.vivo-sep { opacity: .35; }
.vivo-ticker__btn { flex: none; padding: 3px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: transparent; color: #fff; font: 600 12px/1 var(--font); cursor: pointer; }
.vivo-ticker__btn:hover { background: rgba(255,255,255,.12); }
.vivo-ticker__btn[aria-pressed="false"] { opacity: .6; }
.vivo-ticker__fechar { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
.vivo-ticker__fechar:hover { background: rgba(255,255,255,.22); }
.vivo-ticker__fechar svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.vivo-ticker :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 760px) { .vivo-ticker { padding: 7px 12px; font-size: 12.5px; gap: 8px; } .vivo-ticker__btn { display: none; } }

/* ---------- Pulso público: faixa fina antes do rodapé ---------- */
.vivo-pulso { background: var(--grey); color: var(--ink); font-family: var(--font); border-top: 1px solid rgba(0,0,0,.06); }
.vivo-pulso__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px var(--pad); font-size: 13.5px; line-height: 1.35; }
.vivo-pulso__led { width: 9px; height: 9px; border-radius: 50%; background: #2fb36a; box-shadow: 0 0 0 0 rgba(47,179,106,.6); animation: vivo-led 2.2s ease-out infinite; }
@keyframes vivo-led { 0% { box-shadow: 0 0 0 0 rgba(47,179,106,.6); } 70% { box-shadow: 0 0 0 8px rgba(47,179,106,0); } 100% { box-shadow: 0 0 0 0 rgba(47,179,106,0); } }
.vivo-pulso__rotulo { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.vivo-pulso__itens { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.vivo-pulso__itens span { white-space: nowrap; }
.vivo-pulso__itens b { font-weight: 700; color: var(--blue); }
@media (max-width: 760px) { .vivo-pulso__inner { padding: 12px 16px; font-size: 13px; } .vivo-pulso__itens span { white-space: normal; } }

/* ---------- FAQ vivo (página inicial) ---------- */
.vivo-faq { padding: clamp(40px, 5vw, 80px) var(--pad); background: var(--paper); font-family: var(--font); }
.vivo-faq__inner { max-width: 860px; margin: 0 auto; }
.vivo-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.vivo-faq h2 { margin: 0 0 8px; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.02em; }
.vivo-faq__sub { margin: 0 0 22px; color: #4a5560; max-width: 62ch; }
.vivo-faq__lista { display: grid; gap: 8px; }
.vivo-faq__item { border: 1px solid var(--grey); border-radius: 10px; background: #fff; }
.vivo-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; font-weight: 600; cursor: pointer; list-style: none; }
.vivo-faq__item summary::-webkit-details-marker { display: none; }
.vivo-faq__item summary::after { content: "+"; flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--grey); font-weight: 700; }
.vivo-faq__item[open] summary::after { content: "–"; background: var(--blue); color: #fff; }
.vivo-faq__item summary:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 2px; border-radius: 10px; }
.vivo-faq__n { margin-left: auto; margin-right: 6px; font-size: 12px; font-weight: 600; color: #6b7682; }
.vivo-faq__item p { margin: 0; padding: 0 16px 16px; line-height: 1.55; color: #2a3340; }
.vivo-faq__cta { margin: 20px 0 0; }
.vivo-faq__cta .btn { min-height: 48px; }

/* ---------- Nina proativa: a bolha ao lado do avatar (mesmo visual do convite) ---------- */
.nina-convite.vivo-bolha { min-width: 230px; max-width: min(300px, calc(100vw - 120px)); cursor: pointer; }
.nina-convite.vivo-bolha .nina-convite__txt { white-space: normal; line-height: 1.35; }

/* ---------- Modo noturno suave (das 22h às 6h; a pessoa pode desligar) ---------- */
html.vivo-noite { color-scheme: dark; }
html.vivo-noite body { --paper: #0f161e; --ink: #e8edf2; --grey: #1a2430; --blue-soft: #3f7fb8; background: var(--paper); color: var(--ink); }
html.vivo-noite .site-header { background: #0f161e; border-bottom: 1px solid #1f2b38; }
html.vivo-noite .site-header .nav a, html.vivo-noite .site-header .nav__mais-btn, html.vivo-noite .menu-toggle { color: #e8edf2; }
html.vivo-noite .site-header .brand img { content: url("logo-misielle-branco.png"); }   /* a versão branca do logo, que já existe em Assets */
html.vivo-noite .nav__sub { background: #141e29; border-color: #1f2b38; }
html.vivo-noite .nav__sub a:hover { background: #1a2430; }
html.vivo-noite .nav { background: #0f161e; border-color: #1f2b38; }
html.vivo-noite .btn--dark { background: var(--blue); color: #fff; }
html.vivo-noite .btn--dark:hover { background: #fff; color: #0f161e; }
html.vivo-noite .btn--soft { background: #e8edf2; color: #0f161e; }
html.vivo-noite .vivo-ticker { background: #080d13; }
html.vivo-noite .vivo-pulso { background: #141e29; border-top-color: #1f2b38; }
html.vivo-noite .vivo-faq__item { background: #141e29; border-color: #1f2b38; }
html.vivo-noite .vivo-faq__item p { color: #c9d4df; }
html.vivo-noite .vivo-faq__sub { color: #9fb0c0; }
html.vivo-noite .vivo-faq__item summary::after { background: #1f2b38; }
html.vivo-noite .citacao, html.vivo-noite .segmento { background: #141e29; }
html.vivo-noite .time__item, html.vivo-noite .art-card, html.vivo-noite .card, html.vivo-noite .fr-card { background: #141e29; color: #e8edf2; border-color: #1f2b38; }
html.vivo-noite img:not(.brand img):not(.nina-av img) { filter: brightness(.88); }
/* blocos com cores fixas no site.css/index.php: cartões de redes, textos cinza-escuros, botão do WhatsApp */
html.vivo-noite .rede { background: #141e29; color: #e8edf2; border-color: #1f2b38; }
html.vivo-noite .redes__sub, html.vivo-noite .rede__user, html.vivo-noite [class$="__sub"], html.vivo-noite .art-card p, html.vivo-noite .time__role { color: #9fb0c0; }
html.vivo-noite .btn--whats { background: #e8edf2; }
html.vivo-noite .nav__sub a, html.vivo-noite .footer a { color: #e8edf2; }
html.vivo-noite input, html.vivo-noite textarea, html.vivo-noite select { background: #141e29; color: #e8edf2; border-color: #2a3a4a; }
html.vivo-noite .footer { background: #0a1016; }
html.vivo-noite ::selection { background: var(--blue); color: #fff; }

/* ---------- Acessibilidade e impressão ---------- */
@media (prefers-reduced-motion: reduce) {
  .vivo-ticker--rola .vivo-ticker__faixa { animation: none; }
  .vivo-ticker__trilho { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .vivo-pulso__led { animation: none; }
}
@media print { .vivo-ticker, .vivo-pulso, .vivo-bolha { display: none !important; } }