/* Identidade do app Lista de Progressos Relevantes: cores de TODAS as telas e as pecas repetidas (botao de tema,
   giro, aviso sem JS, modal, selo). Mesma ESTRUTURA de tokens do financeiro-rodrigo, com a familia GRAFITE no lugar do verde.
   So os tokens mudam entre claro e escuro (padroes-de-tela, regra 31): cor fixa fora de :root fica clara no escuro. */
:root{
  --marca:#4A5160; --marca-escura:#262A31; --marca-clara:#9AA3B0;
  --fundo:#f1f2f4; --texto:#1d2026; --alerta:#8a4b00; --erro:#b3261e;
  --faixa:#e3e5e9; --cartao:#ffffff; --campo:#ffffff; --borda:#cdd1d8; --linha:#e1e4e8; --linha-forte:#9aa3b0; --cab:#e3e5e9;
  --texto2:#464c58; --texto3:#59606d; --sobre-marca:#ffffff; --sobre-acento:#ffffff;
  --acento:#4A5160; --foco:rgba(74,81,96,.28); --hover-linha:#e6e8ec;
  --sombra:0 24px 60px -24px rgba(38,42,49,.45); --raio:8px;
  --fonte:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ok-txt:#27500A; --ok-fundo:#eaf3de; --ok-borda:rgba(39,80,10,.35);
  --alerta-txt:#8a4b00; --alerta-fundo:#fff4e0; --alerta-borda:#f3d9a6;
  --erro-txt:#9b2c20; --erro-fundo:#fde8e6; --erro-borda:#f3c2bd;
  --info-txt:#2f3644; --info-fundo:rgba(74,81,96,.08); --info-borda:rgba(74,81,96,.30);
  --sep-cab:rgba(0,0,0,.12); --funil-fundo:rgba(0,0,0,.10); --seta:#c2410c; --funil-aceso:#c2410c;
  --brilho1:rgba(74,81,96,.12); --brilho2:rgba(154,163,176,.14);
  --c-vermelho-f:#FCEBEB; --c-vermelho-t:#791F1F; --c-amarelo_vermelho-f:#FAEEDA; --c-amarelo_vermelho-t:#A32D2D;
  --c-verde_vermelho-f:#EAF3DE; --c-verde_vermelho-t:#A32D2D; --c-verde_agua-f:#E1F5EE; --c-verde_agua-t:#085041;
  --c-laranja-f:#FAECE7; --c-laranja-t:#712B13; --c-roxo-f:#EEEDFE; --c-roxo-t:#3C3489; --c-azul-f:#E6F1FB; --c-azul-t:#0C447C;
  --c-cinza-f:#F1EFE8; --c-cinza-t:#444441; --c-verde-f:#EAF3DE; --c-verde-t:#27500A; --c-rosa-f:#FBEAF0; --c-rosa-t:#72243E;
}
/* Escuro: faixa um degrau MAIS CLARA (regra 36); hover de linha #3A4552 (regra 31). As duas copias sao a mesma lista:
   a 1a segue o aparelho, a 2a vale quando ele escolheu. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fundo:#16181d; --texto:#e6e8ec; --alerta:#f2c46b; --erro:#ff9b8f;
    --faixa:#20242b; --cartao:#1c1f25; --campo:#15171c; --borda:#363c47; --linha:#2a2f38; --linha-forte:#4c5462; --cab:#242932;
    --texto2:#b3bac5; --texto3:#8d95a3; --acento:#9AA3B0; --sobre-acento:#16181d; --foco:rgba(154,163,176,.32); --hover-linha:#3A4552;
    --sombra:0 24px 60px -20px rgba(0,0,0,.85);
    --ok-txt:#C0DD97; --ok-fundo:rgba(192,221,151,.10); --ok-borda:rgba(192,221,151,.34);
    --alerta-txt:#ffd38a; --alerta-fundo:rgba(240,170,50,.11); --alerta-borda:rgba(240,170,50,.38);
    --erro-txt:#ffb4aa; --erro-fundo:rgba(255,107,90,.10); --erro-borda:rgba(255,107,90,.34);
    --info-txt:#c9d0db; --info-fundo:rgba(154,163,176,.10); --info-borda:rgba(154,163,176,.30);
    --sep-cab:rgba(255,255,255,.18); --funil-fundo:rgba(255,255,255,.15); --seta:#fb923c; --funil-aceso:#ea6c1f;
    --brilho1:rgba(154,163,176,.10); --brilho2:rgba(74,81,96,.20);
    --c-vermelho-f:#501313; --c-vermelho-t:#F7C1C1; --c-amarelo_vermelho-f:#412402; --c-amarelo_vermelho-t:#F09595;
    --c-verde_vermelho-f:#173404; --c-verde_vermelho-t:#F09595; --c-verde_agua-f:#04342C; --c-verde_agua-t:#9FE1CB;
    --c-laranja-f:#4A1B0C; --c-laranja-t:#F5C4B3; --c-roxo-f:#26215C; --c-roxo-t:#CECBF6; --c-azul-f:#042C53; --c-azul-t:#B5D4F4;
    --c-cinza-f:#2C2C2A; --c-cinza-t:#D3D1C7; --c-verde-f:#173404; --c-verde-t:#C0DD97; --c-rosa-f:#4B1528; --c-rosa-t:#F4C0D1;
  }
}
:root[data-theme="dark"]{
  --fundo:#16181d; --texto:#e6e8ec; --alerta:#f2c46b; --erro:#ff9b8f;
  --faixa:#20242b; --cartao:#1c1f25; --campo:#15171c; --borda:#363c47; --linha:#2a2f38; --linha-forte:#4c5462; --cab:#242932;
  --texto2:#b3bac5; --texto3:#8d95a3; --acento:#9AA3B0; --sobre-acento:#16181d; --foco:rgba(154,163,176,.32); --hover-linha:#3A4552;
  --sombra:0 24px 60px -20px rgba(0,0,0,.85);
  --ok-txt:#C0DD97; --ok-fundo:rgba(192,221,151,.10); --ok-borda:rgba(192,221,151,.34);
  --alerta-txt:#ffd38a; --alerta-fundo:rgba(240,170,50,.11); --alerta-borda:rgba(240,170,50,.38);
  --erro-txt:#ffb4aa; --erro-fundo:rgba(255,107,90,.10); --erro-borda:rgba(255,107,90,.34);
  --info-txt:#c9d0db; --info-fundo:rgba(154,163,176,.10); --info-borda:rgba(154,163,176,.30);
  --sep-cab:rgba(255,255,255,.18); --funil-fundo:rgba(255,255,255,.15); --seta:#fb923c; --funil-aceso:#ea6c1f;
  --brilho1:rgba(154,163,176,.10); --brilho2:rgba(74,81,96,.20);
  --c-vermelho-f:#501313; --c-vermelho-t:#F7C1C1; --c-amarelo_vermelho-f:#412402; --c-amarelo_vermelho-t:#F09595;
  --c-verde_vermelho-f:#173404; --c-verde_vermelho-t:#F09595; --c-verde_agua-f:#04342C; --c-verde_agua-t:#9FE1CB;
  --c-laranja-f:#4A1B0C; --c-laranja-t:#F5C4B3; --c-roxo-f:#26215C; --c-roxo-t:#CECBF6; --c-azul-f:#042C53; --c-azul-t:#B5D4F4;
  --c-cinza-f:#2C2C2A; --c-cinza-t:#D3D1C7; --c-verde-f:#173404; --c-verde-t:#C0DD97; --c-rosa-f:#4B1528; --c-rosa-t:#F4C0D1;
}

/* ------------------------------------------------------------------------------------------------------ base */
*{box-sizing:border-box}
[hidden]{display:none!important}   /* um display por classe vence o [hidden] do navegador (regra 30) */
html{background:var(--fundo)}
body{margin:0; background:var(--fundo); color:var(--texto); font-family:var(--fonte); -webkit-font-smoothing:antialiased}

/* Etiqueta de categoria: cada uma recebe style="--f:var(--c-<cor>-f);--t:var(--c-<cor>-t)" */
.cat{background:var(--f); color:var(--t); border-radius:6px; padding:2px 8px; font-size:12.5px; font-weight:600}

.faixa-topo{background:var(--faixa); border-bottom:2px solid var(--linha-forte)}

/* Botao de tema: canto superior direito (regra 31). Mostra o tema ATUAL: sol no claro, lua no escuro. */
.tema{
  flex:none; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--texto2); cursor:pointer; border:1px solid var(--linha-forte); border-radius:50%;
  transition:color .15s, border-color .15s;
}
.tema:hover{color:var(--acento); border-color:var(--acento)}
.tema:focus-visible{outline:2px solid var(--acento); outline-offset:2px}

/* O giro de "carregando" (regra 4). */
.giro{
  display:inline-block; width:15px; height:15px; flex:none; border-radius:50%; vertical-align:-2px;
  border:2px solid currentColor; border-top-color:transparent; opacity:.85; animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.giro{animation-duration:2s}}

/* Selo que fica depois de uma acao (regra 4): prova de que funcionou, ou de que nao mudou nada. */
.selo{display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; font-size:12.5px; font-weight:600; border:1px solid}
.selo-ok{background:var(--ok-fundo); color:var(--ok-txt); border-color:var(--ok-borda)}
.selo-alerta{background:var(--alerta-fundo); color:var(--alerta-txt); border-color:var(--alerta-borda)}
.selo-erro{background:var(--erro-fundo); color:var(--erro-txt); border-color:var(--erro-borda)}

/* Modal proprio (regra 27): aviso.js */
.modal-fundo{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(10,12,16,.55)}
.modal{width:100%; max-width:440px; background:var(--cartao); color:var(--texto); border:1px solid var(--borda); border-left:5px solid var(--marca-clara); border-radius:12px; padding:20px 22px; box-shadow:var(--sombra)}
.modal-alerta{border-left-color:var(--alerta-txt)}
.modal-erro{border-left-color:var(--erro-txt)}
.modal-ok{border-left-color:var(--ok-txt)}
.modal h2{margin:0 0 8px; font-size:18px}
.modal p{margin:0 0 18px; color:var(--texto2); line-height:1.5; white-space:pre-line}
.modal-botoes{display:flex; gap:10px; justify-content:flex-end}
.modal-botoes button{min-height:44px; padding:0 18px; border-radius:10px; border:1px solid var(--borda); background:var(--campo); color:var(--texto); font:inherit; font-weight:600; cursor:pointer}
.modal-botoes button.primario{background:var(--marca); color:var(--sobre-marca); border-color:var(--marca)}
.modal-botoes button.perigo{background:var(--erro-txt); color:var(--cartao); border-color:var(--erro-txt)}
.modal-botoes button:focus-visible{outline:2px solid var(--acento); outline-offset:2px}

/* Sem JavaScript: aviso visivel no lugar do corpo. */
.sem-js{width:calc(100% - 32px); max-width:560px; margin:24px auto; padding:11px 13px; border:1px solid var(--erro-borda); border-radius:9px;
  background:var(--erro-fundo); color:var(--erro-txt); font:15px/1.45 var(--fonte)}
@media (scripting:none){
  body[hidden]{display:block!important}
  body>:not(noscript){display:none!important}
}