/* =====================================================================
   PODE FALAR — Painel administrativo
   Design system: tipografia, superfícies, sombras, componentes.
   ===================================================================== */

/* ------------------------------------------------------------ Aileron --
   Fonte dos títulos, hospedada no próprio servidor.
   Licença CC0 — ver assets/fonts/LICENSE-Aileron.txt
   ----------------------------------------------------------------------- */
@font-face{
    font-family:'Aileron';font-style:normal;font-weight:400;font-display:swap;
    src:url('../fonts/aileron-latin-400-normal.woff2') format('woff2'),
        url('../fonts/aileron-latin-400-normal.woff') format('woff');
}
@font-face{
    font-family:'Aileron';font-style:normal;font-weight:600;font-display:swap;
    src:url('../fonts/aileron-latin-600-normal.woff2') format('woff2'),
        url('../fonts/aileron-latin-600-normal.woff') format('woff');
}
@font-face{
    font-family:'Aileron';font-style:normal;font-weight:700;font-display:swap;
    src:url('../fonts/aileron-latin-700-normal.woff2') format('woff2'),
        url('../fonts/aileron-latin-700-normal.woff') format('woff');
}
@font-face{
    font-family:'Aileron';font-style:normal;font-weight:800;font-display:swap;
    src:url('../fonts/aileron-latin-800-normal.woff2') format('woff2'),
        url('../fonts/aileron-latin-800-normal.woff') format('woff');
}

/* ------------------------------------------------------------ tokens -- */
:root {
    color-scheme: light;

    /* ---------------------------------------------------------------
       PALETA DA MARCA — valores exatos do manual
       Bordô #6D3038 · Terracota #C56B4D · Terracota escuro #A6543D
       Verde oliva #73745A · Marrom quente #8B5E4A · Creme #F3E9E0
       --------------------------------------------------------------- */
    --bordo:#6D3038;
    --terracota:#C56B4D;
    --terracota-escuro:#A6543D;
    --oliva:#73745A;
    --marrom:#8B5E4A;

    /* TERRACOTA ESCURO — cor principal do painel */
    --terra-900:#52291C;
    --terra-800:#723929;
    --terra-700:#A6543D;
    --terra-600:#B76146;
    --terra-500:#C87A60;
    --terra-100:#EBDAD0;
    --terra-acento:#A6543D;   /* traços e textos de destaque */

    /* degraus do bordô, agora tom profundo de apoio */
    --vinho-900:#3F1B21;
    --vinho-800:#54242B;
    --vinho-700:#6D3038;
    --vinho-600:#833B45;
    --vinho-500:#9C4A55;
    --vinho-100:#F4E4E2;
    --ouro:#C56B4D;
    --ouro-claro:#DD8C70;

    /* superfícies */
    --fundo:#F7F0E8;
    --superficie:#FFFDFB;
    --superficie-2:#FBF4EC;
    --superficie-3:#F3E7DA;
    --grade:#EEDFD0;
    --borda:#E9DACB;
    --borda-forte:#D8C3AF;

    /* tinta */
    --txt-forte:#2B1F1D;
    --txt-medio:#61504A;
    --txt-fraco:#948077;
    --txt-invertido:#F9F2EB;

    /* séries de dados — derivadas das matizes da marca e validadas
       para daltonismo e contraste (ver LEIA-ME, item 9) */
    --serie-1:#A6364C;
    --serie-2:#C9782A;
    --serie-3:#00937A;
    --serie-4:#6152C4;

    /* estado */
    --ok:#1B7A57;
    --ok-fundo:#E7F4EE;
    --atencao:#A6543D;
    --atencao-fundo:#FBEDE5;
    --perigo:#A62F3E;
    --perigo-fundo:#FBEAEA;
    --info:#5A6B8C;
    --info-fundo:#EDF0F6;

    /* tipos de compromisso na agenda */
    --cal-atendimento:#833B45;
    --cal-acompanhamento:#4A7A5E;
    --cal-discipulado:#6152C4;
    --cal-reuniao:#A6543D;
    --cal-culto:#6D3038;
    --cal-bloqueio:#73745A;

    /* forma */
    --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:24px;
    --sombra-1:0 1px 2px rgba(63,27,33,.05);
    --sombra-2:0 1px 2px rgba(63,27,33,.05), 0 8px 20px -12px rgba(63,27,33,.20);
    --sombra-3:0 2px 4px rgba(63,27,33,.06), 0 24px 48px -20px rgba(63,27,33,.28);
    --lateral:262px;
    --transicao:.22s cubic-bezier(.2,.8,.3,1);

    /* Aileron Bold nos títulos e nos números grandes · Inter no resto.
       As colunas de números continuam em Inter porque o Aileron não tem
       algarismos tabulares (largura fixa), e sem isso a coluna desalinha. */
    --fonte-titulo:"Aileron","Inter","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;
    --fonte:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
    --fonte-serifa:"Georgia","Times New Roman",serif;
}

:root[data-tema="escuro"] {
    color-scheme: dark;
    --fundo:#17100F;
    --superficie:#1F1618;
    --superficie-2:#271C1D;
    --superficie-3:#2F2224;
    --grade:#382A2A;
    --borda:#382A2A;
    --borda-forte:#4A3836;
    --txt-forte:#F7EFE9;
    --txt-medio:#C0AAA3;
    --txt-fraco:#8E7A74;
    --terra-acento:#D08A6E;
    --terra-100:#3A241C;
    --oliva:#9A9B7E;
    --marrom:#B3826B;
    --vinho-100:#3A1F23;
    --vinho-500:#C4707C;
    --vinho-600:#B05C68;

    --serie-1:#C44660;
    --serie-2:#B58524;
    --serie-3:#13AB8A;
    --serie-4:#8877E6;

    --ok:#4FBB8E; --ok-fundo:#17281F;
    --atencao:#D08A62; --atencao-fundo:#2E211A;
    --perigo:#DE7180; --perigo-fundo:#2E191B;
    --info:#93A6C8; --info-fundo:#1B2029;

    --cal-atendimento:#D4707E;
    --cal-acompanhamento:#63B487;
    --cal-discipulado:#A294F0;
    --cal-reuniao:#D08A62;
    --cal-culto:#C4707C;
    --cal-bloqueio:#A0998A;

    --sombra-2:0 1px 2px rgba(0,0,0,.4), 0 8px 20px -12px rgba(0,0,0,.7);
    --sombra-3:0 2px 4px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.8);
}

/* -------------------------------------------------------------- base -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    margin:0;font-family:var(--fonte);font-size:14.5px;line-height:1.55;
    color:var(--txt-forte);background:var(--fundo);
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{margin:0;font-family:var(--fonte-titulo);font-weight:700;letter-spacing:-.015em;line-height:1.25}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--vinho-700);color:#fff}

.ico{width:19px;height:19px;flex:none}
.ico-sm{width:16px;height:16px;flex:none}
.ico-lg{width:22px;height:22px;flex:none}

/* rolagem discreta */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--borda-forte);border-radius:20px;border:3px solid var(--fundo)}
*::-webkit-scrollbar-thumb:hover{background:var(--txt-fraco)}

/* ===================================================================== */
/*  LAYOUT                                                               */
/* ===================================================================== */
.painel{display:flex;min-height:100vh}

/* ------------------------------------------------------------ lateral -- */
.lateral{
    width:var(--lateral);flex:none;position:sticky;top:0;height:100vh;
    display:flex;flex-direction:column;
    background:linear-gradient(168deg,var(--terra-800) 0%,var(--terra-900) 46%,var(--vinho-900) 100%);
    color:var(--txt-invertido);z-index:60;
}
.lateral::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(520px 300px at 78% -6%, rgba(197,107,77,.24), transparent 62%);
}
.lateral__marca{padding:22px 22px 14px;position:relative;z-index:1}
.lateral__marca img{width:150px;opacity:.97}
.lateral__marca span{
    display:block;margin-top:8px;font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;
    color:rgba(249,242,235,.5);line-height:1.7;
}
.menu{flex:1;overflow-y:auto;padding:2px 14px 12px;position:relative;z-index:1}
.menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-color:transparent}
.menu__grupo{
    padding:13px 10px 5px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    color:rgba(249,242,235,.38);font-weight:600;
}
.menu a{
    display:flex;align-items:center;gap:12px;padding:8.5px 12px;border-radius:11px;
    font-size:13.8px;font-weight:500;color:rgba(249,242,235,.80);
    transition:background var(--transicao),color var(--transicao),transform var(--transicao);
    position:relative;
}
.menu a:hover{background:rgba(255,255,255,.09);color:#fff;transform:translateX(2px)}
.menu a.is-ativo{
    background:linear-gradient(100deg,rgba(255,255,255,.17),rgba(255,255,255,.07));
    color:#fff;font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.menu a.is-ativo::before{
    content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
    width:3px;height:22px;border-radius:0 4px 4px 0;background:var(--ouro);
}
.menu a .ico{opacity:.85}
.menu a.is-ativo .ico{opacity:1}
.menu__breve{
    margin-left:auto;font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
    padding:2.5px 7px;border-radius:20px;background:rgba(197,107,77,.22);color:var(--ouro-claro);
}
.lateral__verso{padding:12px;position:relative;z-index:1;flex:none}
/* em telas mais baixas o versículo sai para o menu inteiro caber sem rolagem */
@media (max-height:1080px){.lateral__verso{display:none}}
.versiculo{
    background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.09);border-radius:14px;
    padding:14px 15px 13px;font-family:var(--fonte-serifa);font-size:12.4px;line-height:1.6;
    color:rgba(249,242,235,.82);position:relative;
}
.versiculo::before{
    content:"\201C";position:absolute;top:2px;left:12px;font-size:38px;line-height:1;
    color:rgba(197,107,77,.42);font-family:var(--fonte-serifa);
}
.versiculo p{padding-top:12px}
.versiculo cite{display:block;margin-top:9px;font-style:normal;font-family:var(--fonte);
    font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ouro-claro)}

/* --------------------------------------------------------------- topo -- */
.conteudo{flex:1;min-width:0;display:flex;flex-direction:column}
.topo{
    position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:20px;
    padding:16px 30px;background:color-mix(in srgb, var(--fundo) 86%, transparent);
    backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--borda);
}
.topo__titulo h1{font-size:23px}
.topo__titulo p{font-size:13.5px;color:var(--txt-medio);margin-top:2px}
.topo__espaco{flex:1}

.busca{position:relative;width:min(420px,34vw)}
.busca .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--txt-fraco)}
.busca input{
    width:100%;border:1px solid var(--borda);background:var(--superficie);border-radius:12px;
    padding:10.5px 14px 10.5px 42px;font:inherit;font-size:14px;color:var(--txt-forte);
    transition:border-color var(--transicao),box-shadow var(--transicao);
}
.busca input::placeholder{color:var(--txt-fraco)}
.busca input:focus{outline:none;border-color:var(--vinho-600);box-shadow:0 0 0 4px rgba(109,48,56,.10)}

.icone-btn{
    position:relative;width:42px;height:42px;border-radius:12px;border:1px solid var(--borda);
    background:var(--superficie);display:grid;place-items:center;cursor:pointer;color:var(--txt-medio);
    transition:all var(--transicao);
}
.icone-btn:hover{color:var(--vinho-700);border-color:var(--borda-forte);transform:translateY(-1px)}
.icone-btn .selo{
    position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:20px;
    background:var(--vinho-700);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;
    border:2px solid var(--fundo);
}

.perfil{display:flex;align-items:center;gap:11px;padding:5px 12px 5px 5px;border-radius:40px;
    border:1px solid var(--borda);background:var(--superficie);cursor:pointer;transition:all var(--transicao)}
.perfil:hover{border-color:var(--borda-forte);box-shadow:var(--sombra-1)}
.perfil__foto{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
    background:linear-gradient(145deg,var(--vinho-600),var(--vinho-900));color:#fff;font-size:13px;font-weight:650}
.perfil__nome{font-size:13.5px;font-weight:600;line-height:1.25}
.perfil__papel{font-size:11.5px;color:var(--txt-medio)}

.corpo{padding:26px 30px 60px;flex:1}

/* ------------------------------------------------------------ botões -- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:1px solid transparent;border-radius:12px;padding:11px 18px;
    font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;
    transition:transform var(--transicao),box-shadow var(--transicao),background var(--transicao),border-color var(--transicao);
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn--principal{
    background:linear-gradient(135deg,var(--terra-700),var(--terra-900));color:#fff;
    box-shadow:0 10px 22px -12px rgba(166,84,61,.9);
}
.btn--principal:hover{transform:translateY(-1px);box-shadow:0 14px 26px -12px rgba(166,84,61,1)}
.btn--ouro{background:linear-gradient(135deg,var(--ouro),#B08C45);color:#3A1A12;
    box-shadow:0 10px 22px -12px rgba(197,107,77,.9)}
.btn--ouro:hover{transform:translateY(-1px)}
.btn--claro{background:var(--superficie);border-color:var(--borda);color:var(--txt-forte)}
.btn--claro:hover{border-color:var(--borda-forte);box-shadow:var(--sombra-1)}
.btn--fantasma{background:transparent;color:var(--txt-medio)}
.btn--fantasma:hover{background:var(--superficie-3);color:var(--txt-forte)}
.btn--perigo{background:var(--perigo-fundo);color:var(--perigo);border-color:transparent}
.btn--perigo:hover{background:var(--perigo);color:#fff}
.btn--sm{padding:8px 13px;font-size:13px;border-radius:10px}
.btn--bloco{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ------------------------------------------------------------ cartões -- */
.cartao{
    background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-lg);
    box-shadow:var(--sombra-1);
}
.cartao__cabeca{
    display:flex;align-items:center;gap:14px;padding:19px 22px 15px;
}
.cartao__cabeca h2{font-size:15.5px}
.cartao__cabeca p{font-size:12.8px;color:var(--txt-medio);margin-top:1px}
.cartao__cabeca .espaco{flex:1}
.cartao__corpo{padding:0 22px 20px}
.cartao__pe{padding:14px 22px;border-top:1px solid var(--borda);display:flex;align-items:center;gap:12px}

.link-mais{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--vinho-700);
    transition:gap var(--transicao)}
.link-mais:hover{gap:9px}
:root[data-tema="escuro"] .link-mais{color:var(--vinho-500)}

/* --------------------------------------------------------- indicadores -- */
.indicadores{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.indicador{
    position:relative;overflow:hidden;background:var(--superficie);border:1px solid var(--borda);
    border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--sombra-1);
    transition:transform var(--transicao),box-shadow var(--transicao),border-color var(--transicao);
}
.indicador:hover{transform:translateY(-2px);box-shadow:var(--sombra-2);border-color:var(--borda-forte)}
.indicador::after{
    content:"";position:absolute;right:-34px;top:-34px;width:120px;height:120px;border-radius:50%;
    background:radial-gradient(circle,var(--terra-100),transparent 70%);opacity:.9;pointer-events:none;
}
.indicador:nth-child(2)::after{background:radial-gradient(circle,var(--vinho-100),transparent 70%)}
.indicador:nth-child(3)::after{background:radial-gradient(circle,#E6E7DA,transparent 70%)}
.indicador:nth-child(4)::after{background:radial-gradient(circle,#EEE0D6,transparent 70%)}
:root[data-tema="escuro"] .indicador:nth-child(3)::after{background:radial-gradient(circle,#2B2C22,transparent 70%)}
:root[data-tema="escuro"] .indicador:nth-child(4)::after{background:radial-gradient(circle,#31251E,transparent 70%)}
.indicador__topo{display:flex;align-items:center;gap:13px;position:relative}
.indicador__icone{
    width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;color:#fff;
    background:linear-gradient(145deg,var(--terra-600),var(--terra-900));
    box-shadow:0 8px 18px -10px rgba(166,84,61,.9);
}
.indicador:nth-child(2) .indicador__icone{
    background:linear-gradient(145deg,var(--vinho-600),var(--vinho-900));
    box-shadow:0 8px 18px -10px rgba(109,48,56,.9);
}
.indicador:nth-child(3) .indicador__icone{
    background:linear-gradient(145deg,var(--oliva),#5C5D47);
    box-shadow:0 8px 18px -10px rgba(115,116,90,.9);
}
.indicador:nth-child(4) .indicador__icone{
    background:linear-gradient(145deg,var(--marrom),#6E4838);
    box-shadow:0 8px 18px -10px rgba(139,94,74,.9);
}
.indicador__rotulo{font-size:12.8px;color:var(--txt-medio);font-weight:500}
.indicador__valor{
    font-family:var(--fonte-titulo);
    font-size:31px;font-weight:700;letter-spacing:-.025em;line-height:1.1;margin-top:9px;position:relative;
}
.indicador__pe{display:flex;align-items:center;gap:8px;margin-top:8px;position:relative;flex-wrap:wrap}
.variacao{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:650}
.variacao--sobe{color:var(--ok)}
.variacao--desce{color:var(--perigo)}
.variacao--neutra{color:var(--txt-fraco)}
.indicador__ref{font-size:12px;color:var(--txt-fraco)}
.indicador__faisca{position:absolute;left:0;right:0;bottom:0;height:34px;opacity:.5;pointer-events:none}

/* ------------------------------------------------------------ gráficos -- */
.grade-graficos{display:grid;grid-template-columns:1.35fr 1fr .95fr;gap:16px;margin-bottom:18px}
.grafico{min-height:230px}
.pf-eixo{font-size:11px;fill:var(--txt-fraco);font-family:var(--fonte);font-variant-numeric:tabular-nums}
.pf-rotulo-direto{font-size:12.5px;font-weight:680;fill:var(--txt-forte);font-family:var(--fonte)}
.pf-rosca-valor{font-size:25px;font-weight:700;fill:var(--txt-forte);font-family:var(--fonte-titulo);letter-spacing:-.02em}
.pf-rosca-rotulo{font-size:11px;fill:var(--txt-medio);font-family:var(--fonte);letter-spacing:.04em}

.legenda{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.legenda__item{display:flex;align-items:center;gap:9px;font-size:13px}
.legenda__cor{width:10px;height:10px;border-radius:3px;flex:none}
.legenda__nome{color:var(--txt-medio)}
.legenda__valor{margin-left:auto;font-weight:650;font-variant-numeric:tabular-nums;color:var(--txt-forte)}
.legenda__pc{color:var(--txt-fraco);font-size:12px;min-width:44px;text-align:right;font-variant-numeric:tabular-nums}

.pf-dica{
    position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
    background:var(--txt-forte);color:var(--superficie);border-radius:11px;padding:9px 12px;
    font-family:var(--fonte);font-size:12.5px;line-height:1.5;box-shadow:0 14px 34px -12px rgba(0,0,0,.5);
    opacity:0;transition:opacity .14s ease;max-width:250px;
}
.pf-dica.is-ativa{opacity:1}
.pf-dica-t{display:block;font-weight:650;margin-bottom:2px}
.pf-dica-v{display:flex;align-items:center;gap:7px;opacity:.92;font-variant-numeric:tabular-nums}
.pf-dica-v i{width:8px;height:8px;border-radius:2px;flex:none}

.pf-funil-linha{padding:11px 0;border-bottom:1px solid var(--borda)}
.pf-funil-linha:last-child{border-bottom:0}
.pf-funil-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13.2px}
.pf-funil-topo span{color:var(--txt-medio)}
.pf-funil-topo b{font-size:15.5px;font-weight:680;letter-spacing:-.02em}
.pf-funil-trilho{height:9px;border-radius:20px;background:var(--superficie-3);margin:8px 0 5px;overflow:hidden}
.pf-funil-fill{height:100%;border-radius:20px;transition:width 1s cubic-bezier(.2,.9,.3,1)}
.pf-funil-pe{font-size:11.5px;color:var(--txt-fraco)}

.pf-barra-h{display:grid;grid-template-columns:132px 1fr 56px;align-items:center;gap:12px;padding:7px 0}
.pf-barra-h__nome{font-size:13px;color:var(--txt-medio);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-barra-h__trilho{height:10px;border-radius:20px;background:var(--superficie-3);overflow:hidden}
.pf-barra-h__fill{display:block;height:100%;border-radius:20px;transition:width .85s cubic-bezier(.2,.9,.3,1)}
.pf-barra-h__valor{font-size:13.4px;font-weight:680;text-align:right;font-variant-numeric:tabular-nums}

.tabela-dados{margin-top:14px;border-top:1px solid var(--borda);padding-top:12px}
.tabela-dados summary{font-size:12.5px;color:var(--txt-medio);cursor:pointer;list-style:none;
    display:inline-flex;align-items:center;gap:6px}
.tabela-dados summary::-webkit-details-marker{display:none}
.tabela-dados summary::before{content:"▸";transition:transform var(--transicao);display:inline-block}
.tabela-dados[open] summary::before{transform:rotate(90deg)}
.tabela-dados table{width:100%;border-collapse:collapse;margin-top:10px;font-size:12.5px}
.tabela-dados th,.tabela-dados td{padding:5px 8px;text-align:left;border-bottom:1px solid var(--borda)}
.tabela-dados th{color:var(--txt-fraco);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.tabela-dados td:last-child,.tabela-dados th:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- pílulas -- */
.pill{
    display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;
    font-size:11.8px;font-weight:600;white-space:nowrap;line-height:1.5;
    background:var(--superficie-3);color:var(--txt-medio);
}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;opacity:.8}
.pill--novo{background:var(--info-fundo);color:var(--info)}
.pill--acomp{background:var(--atencao-fundo);color:var(--atencao)}
.pill--comunidade{background:var(--ok-fundo);color:var(--ok)}
.pill--aguardando{background:var(--superficie-3);color:var(--txt-medio)}
.pill--discipulado{background:#F0EDFC;color:#5344B0}
.pill--encerrado{background:var(--superficie-3);color:var(--txt-fraco)}
:root[data-tema="escuro"] .pill--discipulado{background:#241F3B;color:#A99BEE}
.pill--sem::before{display:none}

.etiqueta{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--txt-medio)}
.etiqueta .ico-sm{color:var(--txt-fraco)}

/* -------------------------------------------------------------- tabela -- */
.tabela-envolve{overflow-x:auto;border-radius:var(--r-md)}
table.tabela{width:100%;border-collapse:separate;border-spacing:0;font-size:13.6px}
table.tabela th{
    text-align:left;padding:11px 14px;font-size:11px;font-weight:650;letter-spacing:.07em;
    text-transform:uppercase;color:var(--txt-fraco);border-bottom:1px solid var(--borda);white-space:nowrap;
    background:var(--superficie);position:sticky;top:0;
}
table.tabela td{padding:13px 14px;border-bottom:1px solid var(--borda);vertical-align:middle}
table.tabela tbody tr{transition:background var(--transicao)}
table.tabela tbody tr:hover{background:var(--superficie-2)}
table.tabela tbody tr.is-selecionada{background:var(--vinho-100)}
table.tabela tbody tr:last-child td{border-bottom:0}
.col-acoes{width:1%;white-space:nowrap;text-align:right}
.num{font-variant-numeric:tabular-nums}

.pessoa{display:flex;align-items:center;gap:11px;min-width:0}
.avatar{
    width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
    font-size:12.5px;font-weight:650;color:#fff;letter-spacing:.02em;
    background:linear-gradient(145deg,var(--vinho-600),var(--vinho-900));
}
.avatar--sm{width:28px;height:28px;font-size:10.5px}
.avatar--lg{width:52px;height:52px;font-size:17px}
.pessoa__nome{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pessoa__sub{font-size:12px;color:var(--txt-fraco)}

.acao-ico{
    width:32px;height:32px;border-radius:9px;border:1px solid transparent;background:transparent;
    display:inline-grid;place-items:center;color:var(--txt-fraco);cursor:pointer;transition:all var(--transicao);
}
.acao-ico:hover{background:var(--superficie-3);color:var(--vinho-700);border-color:var(--borda)}

/* ------------------------------------------------------------- filtros -- */
.filtros{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;align-items:end}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo label{font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--txt-medio)}
.campo input,.campo select,.campo textarea{
    width:100%;border:1px solid var(--borda);background:var(--superficie);border-radius:11px;
    padding:10px 13px;font:inherit;font-size:13.8px;color:var(--txt-forte);
    transition:border-color var(--transicao),box-shadow var(--transicao);
}
.campo textarea{resize:vertical;min-height:88px;line-height:1.6}
.campo select{
    appearance:none;cursor:pointer;padding-right:34px;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C8C8E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 11px center;background-size:15px;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
    outline:none;border-color:var(--vinho-600);box-shadow:0 0 0 4px rgba(109,48,56,.10);
}
.campo--erro input,.campo--erro select,.campo--erro textarea{border-color:var(--perigo)}
.campo__dica{font-size:11.5px;color:var(--txt-fraco)}
.filtros__acoes{display:flex;gap:9px;flex-wrap:wrap}

/* ---------------------------------------------------------- paginação -- */
.paginacao{display:flex;align-items:center;gap:14px;padding:15px 22px;border-top:1px solid var(--borda);flex-wrap:wrap}
.paginacao__info{font-size:13px;color:var(--txt-medio)}
.paginacao__espaco{flex:1}
.paginas{display:flex;gap:5px;align-items:center}
.paginas a,.paginas span{
    min-width:34px;height:34px;padding:0 9px;border-radius:9px;display:grid;place-items:center;
    font-size:13px;font-weight:600;color:var(--txt-medio);border:1px solid transparent;transition:all var(--transicao);
}
.paginas a:hover{background:var(--superficie-3);color:var(--txt-forte)}
.paginas .is-atual{background:linear-gradient(135deg,var(--vinho-700),var(--vinho-900));color:#fff}
.paginas .is-inativa{opacity:.35;pointer-events:none}

/* ------------------------------------------------------------- gaveta -- */
.gaveta-fundo{
    position:fixed;inset:0;background:rgba(43,31,29,.42);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;transition:opacity var(--transicao),visibility var(--transicao);z-index:80;
}
.gaveta-fundo.is-aberta{opacity:1;visibility:visible}
.gaveta{
    position:fixed;top:0;right:0;height:100vh;width:min(460px,94vw);z-index:90;
    background:var(--superficie);border-left:1px solid var(--borda);box-shadow:var(--sombra-3);
    display:flex;flex-direction:column;transform:translateX(100%);
    transition:transform .32s cubic-bezier(.22,.9,.3,1);
}
.gaveta.is-aberta{transform:none}
.gaveta__cabeca{padding:20px 22px 16px;border-bottom:1px solid var(--borda);display:flex;gap:14px;align-items:flex-start}
.gaveta__corpo{flex:1;overflow-y:auto;padding:20px 22px 30px}
.gaveta__pe{padding:14px 22px;border-top:1px solid var(--borda);display:flex;gap:10px}
.gaveta__fechar{margin-left:auto}

.bloco{margin-bottom:22px}
.bloco h4{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-fraco);margin-bottom:9px}
.bloco p{font-size:13.6px;color:var(--txt-medio);line-height:1.65}
.lista-oracao{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.lista-oracao li{display:flex;gap:9px;font-size:13.4px;color:var(--txt-medio);align-items:flex-start}
.lista-oracao .ico-sm{color:var(--vinho-600);margin-top:2px}
.nota-cartao{
    background:var(--atencao-fundo);border:1px solid color-mix(in srgb,var(--atencao) 22%,transparent);
    border-radius:var(--r-md);padding:13px 15px;font-size:13.2px;line-height:1.6;color:var(--txt-forte);
}
.nota-cartao + .nota-cartao{margin-top:9px}
.nota-cartao small{display:block;margin-top:7px;color:var(--txt-fraco);font-size:11.5px}

.linha-tempo{position:relative;padding-left:22px}
.linha-tempo::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--borda)}
.linha-tempo__item{position:relative;padding-bottom:18px}
.linha-tempo__item::before{
    content:"";position:absolute;left:-21px;top:5px;width:11px;height:11px;border-radius:50%;
    background:var(--vinho-700);border:2px solid var(--superficie);box-shadow:0 0 0 2px var(--borda);
}
.linha-tempo__item:last-child{padding-bottom:0}
.linha-tempo__data{font-size:12.5px;font-weight:650;color:var(--txt-forte)}
.linha-tempo__meta{font-size:12px;color:var(--txt-fraco);margin:1px 0 5px}
.linha-tempo__texto{font-size:13.2px;color:var(--txt-medio);line-height:1.6}

/* ------------------------------------------------------------ alertas -- */
.alertas-envolve{position:relative}
.alertas{
    position:absolute;top:calc(100% + 12px);right:0;width:min(420px,calc(100vw - 32px));
    background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-lg);
    box-shadow:var(--sombra-3);z-index:70;overflow:hidden;
    display:flex;flex-direction:column;max-height:min(640px,calc(100vh - 110px));
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:top right;
    transition:opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1), visibility .18s;
}
.alertas.is-aberto{opacity:1;visibility:visible;transform:none}
.alertas::before{
    content:"";position:absolute;top:-6px;right:16px;width:11px;height:11px;rotate:45deg;
    background:var(--superficie);border-left:1px solid var(--borda);border-top:1px solid var(--borda);
}
.alertas__cabeca{
    display:flex;align-items:center;gap:12px;padding:16px 18px 13px;border-bottom:1px solid var(--borda);
    position:relative;background:var(--superficie);
}
.alertas__cabeca b{display:block;font-size:14.5px;font-weight:650;font-family:var(--fonte-titulo)}
.alertas__cabeca span{display:block;font-size:12.3px;color:var(--txt-medio);margin-top:1px}
.alertas__cabeca .acao-ico{margin-left:auto}
.alertas__corpo{flex:1;overflow-y:auto;overscroll-behavior:contain}
.alertas__pe{
    display:flex;gap:9px;padding:12px 16px;border-top:1px solid var(--borda);background:var(--superficie-2);
}
.alertas__pe .btn{flex:1}
.alertas__carregando{
    padding:38px 20px;text-align:center;color:var(--txt-fraco);font-size:13.4px;
    display:flex;align-items:center;justify-content:center;gap:10px;
}
.girando{
    width:16px;height:16px;border-radius:50%;flex:none;
    border:2px solid var(--borda-forte);border-top-color:var(--vinho-700);
    animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}

.alerta-grupo{padding:6px 0 10px;border-bottom:1px solid var(--borda)}
.alerta-grupo:last-child{border-bottom:0}
.alerta-grupo__cabeca{display:flex;align-items:center;gap:9px;padding:11px 18px 7px}
.alerta-grupo__cabeca b{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-medio);font-weight:650}
.alerta-grupo__cabeca a{
    margin-left:auto;font-size:12px;font-weight:600;color:var(--vinho-700);white-space:nowrap;
}
.alerta-grupo__cabeca a:hover{text-decoration:underline}
:root[data-tema="escuro"] .alerta-grupo__cabeca a{color:var(--vinho-500)}
.alerta-grupo__contagem{
    font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px;
    background:var(--superficie-3);color:var(--txt-medio);font-variant-numeric:tabular-nums;
}
.alerta-grupo__ico{
    width:24px;height:24px;border-radius:8px;display:grid;place-items:center;flex:none;color:#fff;
    background:var(--vinho-700);
}
.alerta-grupo__ico--perigo{background:var(--perigo)}
.alerta-grupo__ico--ok{background:var(--ok)}
.alerta-grupo__ico--atencao{background:var(--atencao)}
/* no tema escuro essas três cores clareiam, então o símbolo inverte para
   não sumir dentro da pastilha */
:root[data-tema="escuro"] .alerta-grupo__ico--perigo,
:root[data-tema="escuro"] .alerta-grupo__ico--ok,
:root[data-tema="escuro"] .alerta-grupo__ico--atencao{color:var(--superficie)}

.alerta-item{
    display:flex;align-items:center;gap:11px;width:100%;text-align:left;
    padding:9px 18px;border:0;background:transparent;cursor:pointer;
    transition:background var(--transicao);font-family:inherit;
}
.alerta-item:hover{background:var(--superficie-2)}
.alerta-item__corpo{min-width:0;flex:1}
.alerta-item__corpo b{display:block;font-size:13.5px;font-weight:600;color:var(--txt-forte);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alerta-item__corpo span{display:block;font-size:12px;color:var(--txt-fraco);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alerta-item__quando{font-size:11.5px;color:var(--txt-fraco);white-space:nowrap;flex:none}
.alerta-item__quando--perigo{color:var(--perigo);font-weight:600}
.alerta-item__hora{
    width:44px;flex:none;text-align:center;font-size:12.5px;font-weight:700;
    color:var(--vinho-700);font-variant-numeric:tabular-nums;
}
:root[data-tema="escuro"] .alerta-item__hora{color:var(--vinho-500)}
.alerta-mais{
    display:block;padding:8px 18px 4px;font-size:12.3px;color:var(--txt-medio);
}
.alerta-mais:hover{color:var(--vinho-700);text-decoration:underline}

@media (max-width:520px){
    .alertas{
        position:fixed;top:auto;bottom:0;right:0;left:0;width:100%;
        max-height:80vh;border-radius:var(--r-xl) var(--r-xl) 0 0;transform-origin:bottom center;
        transform:translateY(14px);
    }
    .alertas::before{display:none}
}

/* -------------------------------------------------------------- modal -- */
.modal-fundo{
    position:fixed;inset:0;z-index:100;background:rgba(43,31,29,.46);backdrop-filter:blur(4px);
    display:grid;place-items:center;padding:20px;overflow-y:auto;
    opacity:0;visibility:hidden;transition:opacity var(--transicao),visibility var(--transicao);
}
.modal-fundo.is-aberta{opacity:1;visibility:visible}
.modal{
    width:100%;max-width:620px;background:var(--superficie);border:1px solid var(--borda);
    border-radius:var(--r-xl);box-shadow:var(--sombra-3);transform:translateY(14px) scale(.985);
    transition:transform .28s cubic-bezier(.22,.9,.3,1);margin:auto;
}
.modal-fundo.is-aberta .modal{transform:none}
.modal__cabeca{padding:22px 24px 16px;border-bottom:1px solid var(--borda);display:flex;align-items:flex-start;gap:14px}
.modal__cabeca h3{font-size:17px}
.modal__cabeca p{font-size:13px;color:var(--txt-medio);margin-top:2px}
.modal__corpo{padding:22px 24px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal__corpo .campo--full{grid-column:1/-1}
.modal__pe{padding:16px 24px;border-top:1px solid var(--borda);display:flex;gap:10px;justify-content:flex-end}
@media(max-width:640px){.modal__corpo{grid-template-columns:1fr}}

/* --------------------------------------------------- seletor de cores -- */
.cores{display:flex;gap:9px;flex-wrap:wrap}
.cor-opcao input{position:absolute;opacity:0;pointer-events:none}
.cor-opcao span{
    display:block;width:32px;height:32px;border-radius:10px;cursor:pointer;
    box-shadow:0 0 0 2px var(--superficie), 0 0 0 2px transparent;
    transition:box-shadow var(--transicao),transform var(--transicao);
}
.cor-opcao span:hover{transform:translateY(-2px)}
.cor-opcao input:checked + span{box-shadow:0 0 0 2px var(--superficie), 0 0 0 4px var(--txt-forte)}
.cor-opcao input:focus-visible + span{box-shadow:0 0 0 2px var(--superficie), 0 0 0 4px var(--vinho-600)}

/* --------------------------------------------- escolha em linha (radio) -- */
.escolha-linha{
    display:flex;gap:12px;align-items:flex-start;padding:14px 15px;margin-top:8px;
    border:1px solid var(--borda);border-radius:var(--r-md);cursor:pointer;
    transition:border-color var(--transicao),background var(--transicao);
}
.escolha-linha:hover{border-color:var(--borda-forte);background:var(--superficie-2)}
.escolha-linha input{margin-top:3px;accent-color:var(--vinho-700);width:17px;height:17px;flex:none}
.escolha-linha:has(input:checked){border-color:var(--vinho-600);background:var(--vinho-100)}
.escolha-linha b{display:block;font-size:14px;margin-bottom:2px}
.escolha-linha em{display:block;font-style:normal;font-size:12.6px;color:var(--txt-medio);line-height:1.6}

/* ------------------------------------------------------------ agenda -- */
.calendario{overflow:auto;border-radius:var(--r-md)}
.cal-grade{
    display:grid;grid-template-columns:58px repeat(7,minmax(122px,1fr));
    min-width:900px;position:relative;
}
.cal-cab{
    padding:12px 8px 10px;text-align:center;border-bottom:1px solid var(--borda);
    position:sticky;top:0;background:var(--superficie);z-index:3;
}
.cal-cab span{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--txt-fraco);font-weight:650}
.cal-cab b{display:block;font-family:var(--fonte-titulo);font-size:17px;font-weight:700;letter-spacing:-.02em;margin-top:3px}
.cal-cab.is-hoje b{
    width:32px;height:32px;margin:3px auto 0;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--vinho-700),var(--vinho-900));color:#fff;font-size:15px;
}
.cal-hora{
    font-size:11px;color:var(--txt-fraco);text-align:right;padding:0 9px;height:56px;
    border-right:1px solid var(--borda);position:relative;font-variant-numeric:tabular-nums;
}
.cal-hora span{position:absolute;right:9px;top:-7px;background:var(--superficie);padding:0 2px}
.cal-celula{height:56px;border-bottom:1px solid var(--grade);border-right:1px solid var(--grade);position:relative}
.cal-celula:hover{background:var(--superficie-2)}
.cal-agora{position:absolute;left:0;right:0;height:2px;background:var(--perigo);z-index:4;pointer-events:none}
.cal-agora::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--perigo)}

.evento{
    position:absolute;left:3px;right:3px;border-radius:9px;padding:6px 8px;overflow:hidden;
    font-size:11.5px;line-height:1.35;cursor:pointer;z-index:2;
    border-left:3px solid var(--cor,var(--vinho-700));
    background:color-mix(in srgb,var(--cor,var(--vinho-700)) 11%,var(--superficie));
    transition:transform var(--transicao),box-shadow var(--transicao),z-index 0s;
}
.evento:hover{transform:scale(1.025);box-shadow:var(--sombra-2);z-index:6}
.evento b{display:block;font-size:11px;font-weight:700;color:var(--cor,var(--vinho-700));font-variant-numeric:tabular-nums}
.evento strong{display:block;font-weight:650;color:var(--txt-forte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evento span{display:block;color:var(--txt-medio);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evento.is-cancelado{opacity:.5}
.evento.is-cancelado strong{text-decoration:line-through}

.cal-nav{display:flex;align-items:center;gap:8px}
.cal-nav b{font-size:14.5px;font-weight:650;min-width:190px;text-align:center}

/* -------------------------------------------------------------- listas -- */
.lista{display:flex;flex-direction:column}
.lista__item{
    display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--borda);
}
.lista__item:last-child{border-bottom:0}
.lista__corpo{min-width:0;flex:1}
.lista__titulo{font-size:13.6px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista__sub{font-size:12.2px;color:var(--txt-fraco);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista__lado{text-align:right;font-size:12px;color:var(--txt-fraco);white-space:nowrap}

.ponto{width:8px;height:8px;border-radius:50%;flex:none}
.ponto--ok{background:var(--ok)} .ponto--atencao{background:var(--atencao)}
.ponto--perigo{background:var(--perigo)} .ponto--neutro{background:var(--txt-fraco)}

/* --------------------------------------------------------------- misc -- */
.vazio{padding:52px 20px;text-align:center;color:var(--txt-fraco)}
.vazio .ico-lg{width:44px;height:44px;margin:0 auto 14px;color:var(--borda-forte)}
.vazio h3{font-size:15.5px;color:var(--txt-medio);margin-bottom:5px}
.vazio p{font-size:13.4px;max-width:340px;margin:0 auto}

.aviso{
    display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-md);font-size:13.5px;
    align-items:flex-start;margin-bottom:16px;line-height:1.6;
}
.aviso--ok{background:var(--ok-fundo);color:var(--ok)}
.aviso--erro{background:var(--perigo-fundo);color:var(--perigo)}
.aviso--info{background:var(--info-fundo);color:var(--info)}
.aviso .ico{flex:none;margin-top:1px}

.grade-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grade-baixo{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px;margin-top:18px}
.mt{margin-top:18px}

/* --------------------------------------------------------- em breve -- */
.em-breve{max-width:640px;margin:56px auto;text-align:center}
.em-breve__selo{
    width:96px;height:96px;border-radius:30px;margin:0 auto 26px;display:grid;place-items:center;
    background:linear-gradient(150deg,var(--vinho-700),var(--vinho-900));color:#fff;
    box-shadow:0 24px 48px -22px rgba(109,48,56,.95);position:relative;
}
.em-breve__selo .ico{width:42px;height:42px}
.em-breve__selo::after{
    content:"";position:absolute;inset:-9px;border-radius:38px;border:1px solid var(--borda-forte);
    opacity:.5;animation:pulsar 3.2s ease-in-out infinite;
}
@keyframes pulsar{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.045);opacity:.18}}
.em-breve h1{font-size:29px;margin-bottom:11px}
.em-breve > p{font-size:15.5px;color:var(--txt-medio);line-height:1.7;max-width:480px;margin:0 auto 30px}
.em-breve__lista{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left;margin-bottom:30px;
}
.em-breve__lista div{
    display:flex;gap:11px;align-items:flex-start;background:var(--superficie);border:1px solid var(--borda);
    border-radius:var(--r-md);padding:15px 16px;font-size:13.5px;color:var(--txt-medio);
}
.em-breve__lista .ico{color:var(--vinho-600);margin-top:1px}
.em-breve__lista b{display:block;color:var(--txt-forte);font-size:13.8px;margin-bottom:2px}

/* ---------------------------------------------------------- responsivo -- */
@media (max-width:1400px){
    .grade-graficos{grid-template-columns:1fr 1fr}
    .grade-graficos > :nth-child(3){grid-column:1/-1}
    .grade-baixo{grid-template-columns:1fr 1fr}
    .grade-baixo > :last-child{grid-column:1/-1}
}
@media (max-width:1180px){
    .indicadores{grid-template-columns:repeat(2,1fr)}
    .filtros{grid-template-columns:repeat(3,1fr)}
    .busca{width:min(300px,30vw)}
}
@media (max-width:980px){
    :root{--lateral:0px}
    .lateral{
        position:fixed;left:0;top:0;width:280px;transform:translateX(-100%);
        transition:transform .3s cubic-bezier(.22,.9,.3,1);
    }
    .lateral.is-aberta{transform:none;box-shadow:var(--sombra-3)}
    .abrir-menu{display:grid !important}
    .grade-graficos,.grade-2,.grade-3,.grade-baixo{grid-template-columns:1fr}
    .grade-baixo > :last-child,.grade-graficos > :nth-child(3){grid-column:auto}
    .corpo{padding:20px 16px 50px}
    .topo{padding:12px 16px;gap:12px}
    .busca{display:none}
    .perfil__nome,.perfil__papel{display:none}
    .topo__titulo h1{font-size:19px}
    .topo__titulo p{display:none}
}
@media (max-width:640px){
    .indicadores,.filtros{grid-template-columns:1fr}
    .em-breve__lista{grid-template-columns:1fr}
    .cartao__cabeca{flex-wrap:wrap}
}
.abrir-menu{display:none}

/* ------------------------------------------------------------ animação -- */
@keyframes surgir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.surge{animation:surgir .5s cubic-bezier(.22,.9,.3,1) both}
.surge-1{animation-delay:.04s} .surge-2{animation-delay:.09s}
.surge-3{animation-delay:.14s} .surge-4{animation-delay:.19s}
.surge-5{animation-delay:.24s} .surge-6{animation-delay:.29s}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}