/* rif.css — gerado por _site/gerar_site_rif.py (RIF, PRJ-0003). Nao editar a mao.
   Molde: lme-oa. Paleta da marca-rif: azul = quantitativo, verde = qualitativo. */
:root { color-scheme: dark; --azul: #4A7FC1; --azul-esc: #2E6B8A; --verde: #3E8E5A; --fundo: #0d0d0d; --texto: #e8e8e8; --forte: #fff; --t-ddd: #ddd; --t-c4: #c4c4c4; --t-bbb: #bbb; --t-aaa: #aaa; --t-9a: #9a9a9a; --t-8a: #8a8a8a; --t-888: #888; --t-777: #777; --t-6f: #6f6f6f; --b-666: #666; --b-555: #555; --b-444: #444; --b-333: #333; --b-2a: #2a2a2a; --caixa: #1a1b1f; --caixa2: #151619; --azul-claro: #8FB4E3; --verde-claro: #7CC596; --ambar-claro: #E3B35C; }
[data-tema="claro"] { color-scheme: light; --fundo: #ffffff; --texto: #1c1c1c; --forte: #000000; --t-ddd: #2a2a2a; --t-c4: #3a3a3a; --t-bbb: #454545; --t-aaa: #505050; --t-9a: #5a5a5a; --t-8a: #5f5f5f; --t-888: #5f5f5f; --t-777: #6a6a6a; --t-6f: #707070; --b-666: #999999; --b-555: #8c8c8c; --b-444: #c8c8c8; --b-333: #dddddd; --b-2a: #e6e6e6; --caixa: #f1f2f5; --caixa2: #f6f7f9; --azul-claro: #2B5E9C; --verde-claro: #2D6E45; --ambar-claro: #8A5A00; }
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Letra (PRE-site-rif-letra-legivel-celular-2026-09-27): texto corrido sem serifa, 18 px; Courier so em titulos
   e rotulos; nada abaixo de 15 px (piso_letra); A-/A+ muda a base do html (data-letra, guardado em rif-letra). */
html[data-letra="g"] { font-size: 112.5%; }
html[data-letra="gg"] { font-size: 125%; }
body { background: var(--fundo); color: var(--texto); font-family: Calibri, Carlito, 'Segoe UI', Roboto, Arial, sans-serif;
       font-size: 1.125rem; line-height: 1.7; overflow-wrap: anywhere; }
h1, h2, h3, .intro-t, .ramo-t, .sessao-t, .selo, .aba-toggle, .aba-painel h3, .aba-painel .aba-sec,
.aba-painel .aba-cargo, .crono-btn, .letra-btn, details.trilha > summary {
       font-family: 'Courier New', Courier, monospace; }
p, li { max-width: 68ch; }
button, input, select, textarea { font-family: inherit; font-size: 1rem; }
a { color: var(--azul-claro); }
.wrap { max-width: 760px; margin: 0 auto; padding: 48px 20px; }
h1 { font-size: 1.6rem; color: var(--azul-claro); text-transform: uppercase; letter-spacing: .04em;
     border-bottom: 2px solid var(--azul); padding-bottom: 12px; margin-bottom: 8px; overflow-wrap: normal; }
h2 { font-size: 1.1rem; color: var(--forte); margin: 36px 0 12px; }
section > p, .bloco p { margin-bottom: 12px; }
.voltar { margin-bottom: 18px; font-size: 0.9375rem; }
.voltar a { text-decoration: none; }
.sub { display: flex; align-items: flex-start; gap: 24px; border: 1px solid var(--b-444); padding: 24px 26px;
       margin: 20px 0 40px; font-size: 1.08rem; line-height: 1.6; color: var(--t-c4); }
.sub .marca { flex: 0 0 112px; width: 112px; height: 112px; background: var(--caixa); border-radius: 10px;
              padding: 8px; display: block; }
.sub p { margin-bottom: 11px; }
.sub strong { color: var(--azul-claro); font-weight: normal; }
.intro-t { font-size: 1.05rem; color: var(--verde-claro); text-transform: uppercase; letter-spacing: .06em;
           margin: 0 0 14px; }
.sucesso { color: var(--verde-claro); font-weight: bold; font-size: 1.12rem; margin-top: 12px; }
ul { list-style: none; }
ol.num { margin: 0 0 14px 1.6em; }
ol.num li { margin-bottom: 6px; }
blockquote { border-left: 4px solid var(--azul); padding: 8px 14px; margin: 0 0 14px; color: var(--t-ddd);
             background: rgba(74,127,193,.10); }
h2 + ul, h2 + ul + p { list-style: disc; margin: 0 0 14px 1.4em; }
table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 0.9375rem; }
th, td { border: 1px solid var(--b-444); padding: 8px 10px; text-align: left; vertical-align: top; }
th { color: var(--azul-claro); background: rgba(74,127,193,.10); }

/* trilhas: sanfona (molde lme-oa) */
details.trilha, .trilha.breve { border: 1px solid var(--b-444); margin-bottom: 12px; scroll-margin-top: 58px; }
details.trilha[open] { border-color: var(--azul); }
details.trilha > summary { cursor: pointer; list-style: none; padding: 15px 16px; font-size: 1.15rem; color: var(--forte); }
details.trilha > summary::-webkit-details-marker { display: none; }
details.trilha > summary::before { content: '+'; color: var(--verde-claro); display: inline-block; min-width: 1.4em; }
details.trilha[open] > summary::before { content: '\2212'; }
details.trilha > .trilha-corpo { padding: 0 14px 14px; }
.trilha.breve { padding: 13px 16px 13px calc(16px + 1.4em); color: var(--t-8a); border-style: dashed; }
.trilha.breve span { color: var(--t-6f); font-size: 0.9375rem; }
a.trilha-link { display: block; border: 1px solid var(--b-444); margin-bottom: 12px; padding: 14px 16px; text-decoration: none;
                color: var(--texto); scroll-margin-top: 58px; }
a.trilha-link:hover { border-color: var(--azul); }
a.trilha-link .trilha-t { display: block; font-family: 'Courier New', Courier, monospace; font-size: 1.15rem; color: var(--forte); }
a.trilha-link .trilha-t::after { content: ' \2192'; color: var(--verde-claro); }
a.trilha-link .trilha-d { display: block; margin-top: 4px; }
a.trilha-link .tag { display: block; color: var(--azul-claro); font-size: 0.9375rem; }
a.oa { display: block; padding: 14px 18px; border: 1px solid var(--b-444); color: var(--texto); text-decoration: none; }
a.oa:hover { border-color: var(--azul); color: var(--azul-claro); }
a.oa .tag { display: block; color: var(--azul-claro); font-size: 0.9375rem; }

/* os 5 passos, lado a lado */
.passos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 18px; }
.ramo { border: 1px solid var(--b-444); border-top: 5px solid var(--azul); padding: 12px 14px; }
.ramo.qual { border-top-color: var(--verde); }
.ramo-t { font-weight: bold; color: var(--azul-claro); text-transform: uppercase; letter-spacing: .04em; font-size: 0.95rem; }
.ramo.qual .ramo-t { color: var(--verde-claro); }
.ramo-a { font-size: 0.9375rem; color: var(--t-9a); margin-bottom: 8px; }
.ramo ol { margin-left: 1.5em; }
.ramo li { margin-bottom: 8px; font-size: 0.9375rem; }
.ramo li b { display: block; color: var(--forte); }
.ramo li span { color: var(--t-c4); }

/* questao (T0A e aba Questoes) */
.q { border: 1px solid var(--b-444); margin: 0 0 18px; }
.q-cab { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 10px 14px;
         border-bottom: 1px solid var(--b-333); font-size: 0.9375rem; color: var(--t-bbb); }
.selo { font-size: 0.9375rem; font-weight: bold; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; color: white; }
.selo.quant { background: var(--azul-esc); }
.selo.qual { background: var(--verde); }
.q-fig { background: white; padding: 10px; }
.q-base { background: white; color: black; padding: 10px 10px 0; border-bottom: 2px dashed var(--t-888); }
.q-base > summary { cursor: pointer; font-weight: bold; padding-bottom: 8px; }
.q-base img { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto 10px; }
.q-fig img { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; }
/* Questao em texto (PRE-site-rif-celular-leve-t0a): papel branco como a figura, letra sem serifa como a prova. */
.q-txt { background: white; color: rgb(20, 20, 20); padding: 14px 16px; font-family: Calibri, Carlito, 'Segoe UI',
         Roboto, Arial, sans-serif; font-size: 1.125rem; line-height: 1.55; overflow-wrap: anywhere; }
.q-txt p { margin: 0 0 12px; }
.q-txt .q-t { font-weight: bold; }
.q-txt .q-fonte { font-size: 0.9375rem; color: rgb(70, 70, 70); }
.q-lista { list-style: none; margin: 0 0 12px; padding: 0; }
.q-lista li { margin: 0 0 10px; padding-left: 1.4em; text-indent: -1.4em; }
.q-alt-lista { margin: 4px 0 0; }
.q-ilus { margin: 0 0 12px; text-align: center; }
.q-ilus img { width: 100%; max-width: 260px; height: auto; }
.q-graf img { width: auto; max-width: 100%; }
.q-acoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
.q-acoes button, .q-acoes a { min-height: 44px; background: var(--caixa); color: var(--texto); border: 1px solid var(--b-555); padding: 8px 12px;
                              font-size: 0.9375rem; cursor: pointer; text-decoration: none; }
.q-acoes button:hover, .q-acoes a:hover { border-color: var(--azul); }
.q-acoes button[aria-expanded="true"] { border-color: var(--azul); color: var(--azul-claro); }
.q-res { padding: 0 14px 14px; }
.q-res[hidden] { display: none; }
.q-res .gab { font-size: 1.05rem; color: var(--verde-claro); font-weight: bold; }
.q-res ol { margin-left: 1.6em; }
.q-res li { margin-bottom: 10px; }
.q-res li b { display: block; color: var(--azul-claro); }
.q.qual .q-res li b { color: var(--verde-claro); }
.q-res .cond { border-left: 4px solid var(--b-666); padding: 6px 12px; color: var(--t-ddd); }
.sessao-t { font-size: 1rem; color: var(--azul-claro); text-transform: uppercase; letter-spacing: .05em;
            margin: 26px 0 10px; }
.passo1-ex { border: 1px solid var(--azul); padding: 10px 14px; margin-bottom: 14px; }
.passo1-ex b { color: var(--azul-claro); }
.etapa { display: flex; gap: 10px; align-items: flex-start; border-left: 4px solid var(--verde);
         background: rgba(62,142,90,.12); padding: 8px 12px; margin: 22px 0 12px; }
.etapa strong { color: var(--verde-claro); }
.etapa-n { flex: none; width: 1.7em; height: 1.7em; line-height: 1.7em; border-radius: 50%; text-align: center;
           background: var(--verde); color: white; font-weight: bold; }
.etapa.fim { font-weight: bold; color: var(--verde-claro); font-size: 1.08rem; }
/* duas fases + aquecimento gradativo (PRE-site-rif-aquecimento-gradativo-estudo-focado-2026-10-01):
   ambar = fase A do cronometro, azul = estudo (E) */
.fase-t { font-family: 'Courier New', Courier, monospace; font-weight: bold; font-size: 1.12rem; text-transform: uppercase;
          letter-spacing: .03em; color: var(--ambar-claro); border: 2px solid var(--ambar-claro); background: rgba(227,179,92,.12);
          padding: 10px 14px; margin: 8px 0 14px; max-width: none; }
.fase-t .fase-n { display: inline-block; background: var(--ambar-claro); color: var(--fundo); padding: 0 8px; margin-right: 6px; }
.fase-2 > .fase-t { color: var(--azul-claro); border-color: var(--azul); background: rgba(74,127,193,.14); margin-top: 40px; }
.fase-2 > .fase-t .fase-n { background: var(--azul); color: white; }
.foco-t { margin-top: 18px; color: var(--azul-claro); font-size: 1.25rem; }
.foco-calma { font-size: 1.12rem; margin-bottom: 12px; }
.foco-qtd { font-weight: bold; color: var(--forte); }
.grad-btn { display: block; margin: 18px 0 8px; padding: 12px 18px; border: 2px solid var(--ambar-claro); background: var(--caixa2);
            color: var(--ambar-claro); font-weight: bold; cursor: pointer; border-radius: 6px; }
.grad-g { scroll-margin-top: 64px; }
.grad-g[hidden], .passo1-ex[hidden], .trilha-viz[hidden] { display: none; }
.grad-btn.passo-btn { border-color: var(--azul); color: var(--azul-claro); margin: 6px 0 14px; }
.grad-btn:hover, .grad-btn:focus-visible { background: var(--caixa); }

/* filtros da aba Questoes */
.filtros { border: 1px solid var(--b-444); background: var(--caixa2); padding: 14px; display: flex; flex-wrap: wrap; gap: 12px;
           align-items: flex-end; margin-bottom: 12px; }
.filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9375rem; color: var(--t-aaa); }
.filtros select, .filtros input { background: var(--fundo); color: var(--texto); border: 1px solid var(--b-555); padding: 8px;
                                  font-family: inherit; font-size: 0.9375rem; }
.filtros input { min-width: 200px; }
.filtros button { background: var(--caixa); color: var(--texto); border: 1px solid var(--b-555); padding: 8px 12px; cursor: pointer; }
.resumo { font-size: 0.9375rem; color: var(--t-aaa); margin-bottom: 16px; }
.resumo b { color: var(--azul-claro); }

/* abas laterais (molde lme-oa) */
.aba-toggle { position: fixed; left: 0; z-index: 998; background: var(--caixa); border: 1px solid var(--b-444); border-left: none;
              color: var(--t-aaa); font-size: 0.9375rem; padding: 8px 10px; cursor: pointer; writing-mode: vertical-rl;
              text-orientation: mixed; letter-spacing: 1px; text-transform: uppercase; }
.aba-toggle:hover { color: var(--azul-claro); }
.aba-toggle.aqui { color: white; background: var(--azul-esc); border-color: var(--azul-esc); }
.aba-toggle.ativa { color: rgb(13,13,13); background: var(--azul); border-color: var(--azul); font-weight: 700; }
.aba-painel { position: fixed; top: 0; left: 0; z-index: 997; width: 400px; max-width: 88vw; height: 100vh;
              overflow-y: auto; background: var(--caixa); border-right: 1px solid var(--b-444); padding: 24px 22px 24px 42px;
              transform: translateX(-100%); transition: transform .25s; font-size: 0.9375rem; color: var(--t-c4); line-height: 1.6; }
.aba-painel.open { transform: translateX(0); }
.aba-painel h3 { font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 2px; color: var(--azul-claro);
                 border-bottom: 1px solid var(--b-444); padding-bottom: 8px; margin-bottom: 14px; }
.aba-painel p { margin-bottom: 11px; }
.aba-painel a.aba-btn { display: block; margin: 10px 0; padding: 11px 14px; border: 1px solid var(--b-444); color: var(--texto);
                        text-decoration: none; font-size: 0.9375rem; }
.aba-painel a.aba-btn:hover { border-color: var(--azul); color: var(--azul-claro); }
.aba-painel .aba-nota { font-size: 0.9375rem; color: var(--t-888); }
.qr-box { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 12px 0 16px; }
.qr-box img { width: 170px; height: 170px; background: white; padding: 8px; border-radius: 6px; flex: none; }
.qr-box > div { flex: 1 1 160px; }
.qr-box p { margin: 0 0 6px; }
.qr-box .qr-end { font-family: 'Courier New', Courier, monospace; color: var(--azul-claro); overflow-wrap: anywhere; }
@media (max-width: 560px) { .qr-box img { width: 150px; height: 150px; } }
.aba-painel .aba-sec { font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
                       color: var(--verde-claro); border-bottom: 1px solid var(--b-444); padding-bottom: 8px; margin: 20px 0 12px; }
.aba-painel .aba-cargo { font-size: 0.9375rem; font-weight: 700; letter-spacing: 1px; color: var(--azul-claro);
                         border-bottom: 1px solid var(--b-444); padding-bottom: 3px; margin: 14px 0 4px; }
.aba-painel .aba-nome { color: var(--t-ddd); }
.aba-painel .passos-2 { grid-template-columns: 1fr; }
.aba-painel ol.num { margin-left: 1.4em; }

/* agenda da semana (so no aparelho) */
.ag-topo { border: 1px solid var(--b-444); background: var(--caixa2); padding: 14px; display: flex; flex-wrap: wrap; gap: 12px;
           align-items: flex-end; margin-bottom: 14px; }
.ag-topo label, .ag-nova label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9375rem; color: var(--t-aaa); }
.ag select, .ag input { background: var(--fundo); color: var(--texto); border: 1px solid var(--b-555); padding: 7px;
                        font-family: inherit; font-size: 0.9375rem; max-width: 100%; }
.ag button { background: var(--caixa); color: var(--texto); border: 1px solid var(--b-555); padding: 8px 12px; font-size: 0.9375rem;
             cursor: pointer; }
.ag button:hover { border-color: var(--azul); }
.ag button:disabled { opacity: .45; cursor: default; }
.ag button.forte { border-color: var(--azul); color: var(--azul-claro); }
.ag-conta { font-size: 1.05rem; color: var(--verde-claro); font-weight: bold; margin: 6px 0; }
.ag-aviso { border-left: 4px solid #d9a441; background: rgba(217,164,65,.12); padding: 8px 12px; margin: 0 0 14px; }
.ag-erro { border-left: 4px solid #c65b5b; background: rgba(198,91,91,.12); padding: 8px 12px; margin: 0 0 14px; }
.ag-aviso[hidden], .ag-erro[hidden] { display: none; }
.ag-dia { border: 1px solid var(--b-444); margin-bottom: 10px; }
.ag-dia > p { padding: 8px 14px; color: var(--forte); font-weight: bold; margin: 0; }
.ag-dia.vazio > p { color: var(--t-777); font-weight: normal; }
.ag-ses { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--b-2a); }
.ag-ses.feita { background: rgba(62,142,90,.14); }
.ag-ses .hora { color: var(--azul-claro); font-weight: bold; }
.ag-ses label.chk { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.ag-ses input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--verde); }
.ag-ses .erro-passo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.9375rem; color: var(--t-aaa); }
.ag-ses .erro-passo input { width: 14em; }
.ag-nova { border: 1px dashed var(--b-555); padding: 14px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
           margin: 14px 0 20px; }
.ag-hist li { font-size: 0.9375rem; color: var(--t-bbb); margin-bottom: 4px; }

/* web x pen drive: o que so faz sentido num dos dois */
.so-pd { display: none; }
.offline .so-web { display: none; }
.offline .so-pd { display: block; }

.footer { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--b-333); font-size: 0.9375rem; color: var(--t-888); }
.footer-marcas { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 0 auto 10px; }
.footer-marcas svg { width: 30px; height: 30px; display: block; }
.footer-marcas a { display: flex; }
.footer p { max-width: none; text-align: center; }
.footer-links { margin-bottom: 6px; font-size: 0.9375rem; }
.footer-selo { text-align: center; margin-top: 8px; color: var(--t-9a); }

/* sugestoes e agradecimentos */
.form-sug { border: 1px solid var(--b-444); background: var(--caixa2); padding: 16px; margin: 10px 0 18px; }
.form-sug label { display: block; font-size: 0.9375rem; color: var(--t-aaa); margin: 12px 0 4px; }
.form-sug select, .form-sug textarea { width: 100%; background: var(--fundo); color: var(--texto); border: 1px solid var(--b-555);
                                       padding: 8px; font-family: inherit; font-size: 0.95rem; }
.form-sug textarea { min-height: 120px; resize: vertical; }
.form-sug button { background: var(--caixa); color: var(--texto); border: 1px solid var(--b-555); padding: 9px 14px; font-size: 0.9375rem;
                   cursor: pointer; margin: 8px 8px 0 0; }
.form-sug button.forte { border-color: var(--azul); color: var(--azul-claro); }
.form-sug button:disabled { opacity: .45; cursor: default; }
.form-sug .chk { display: flex; gap: 8px; align-items: flex-start; color: var(--t-ddd); font-size: 0.9375rem; }
.form-sug .chk input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--verde); margin-top: 3px; }
.form-sug audio { width: 100%; margin-top: 8px; }
.faixa { border: 1px solid var(--b-444); padding: 14px 16px; margin: 12px 0; }
.faixa p { margin: 0 0 8px; }
.faixa audio { width: 100%; }
.faixa .baixar { font-size: 0.9375rem; margin: 6px 0 0; }
.md-roteiro h3 { font-size: 1rem; margin: 26px 0 8px; }
.form-sug .hp { position: absolute; left: -9999px; top: -9999px; }
.msg-erro { border-left: 4px solid #c65b5b; background: rgba(198,91,91,.12); padding: 8px 12px; margin: 10px 0; }
.msg-ok { border-left: 4px solid var(--verde); background: rgba(62,142,90,.14); padding: 10px 14px; margin: 10px 0; }
.msg-erro[hidden], .msg-ok[hidden] { display: none; }
.agr { border: 1px solid var(--b-444); border-left: 4px solid var(--verde); padding: 12px 14px; margin-bottom: 12px; }
.agr .agr-cab { font-size: 0.9375rem; color: var(--t-9a); margin-bottom: 4px; }
.agr .agr-sug { color: var(--t-ddd); }
.agr .agr-res { color: var(--verde-claro); margin-top: 6px; }
.alt { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 6px;
       margin-right: 8px; font-size: 1.125rem; cursor: pointer; }
.alt input { width: 24px; height: 24px; accent-color: var(--azul); }
.q-res label { display: block; font-size: 0.9375rem; color: var(--t-bbb); }
.q-res select { margin-top: 4px; max-width: 100%; }
#simOpiniao label { margin-top: 10px; }

/* registro da resolucao (so no aparelho) */
.q-alts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; padding: 12px 14px 0; }
.q-alts > span { font-size: 0.9375rem; color: var(--t-aaa); margin-right: 10px; }
.q-acoes button:disabled { cursor: default; opacity: .8; }
.q > .msg-erro { margin: 0 14px 12px; }
.reg { border: 1px solid var(--b-444); background: var(--caixa2); padding: 10px 12px; margin: 10px 0; }
.reg label.chk { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 1rem; color: var(--t-ddd);
                  margin: 2px 0; cursor: pointer; }
.reg input[type=radio], .reg input[type=checkbox] { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 0;
                                                    accent-color: var(--verde); }
.reg-passos { border-top: 1px solid var(--b-333); margin-top: 8px; padding-top: 6px; }
.reg-passos[hidden] { display: none; }
.reg > .reg-passos:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.reg-passos p { font-size: 0.9375rem; color: var(--t-aaa); margin: 0 0 4px; }
.reg input[type=text] { width: 100%; min-height: 44px; margin-top: 6px; background: var(--fundo); color: var(--texto); border: 1px solid var(--b-555);
                        padding: 7px; font-family: inherit; font-size: 0.9375rem; }
.reg-nota { font-size: 0.9375rem; color: var(--t-888); }
.reg-apagar { background: none; border: none; color: var(--azul-claro); text-decoration: underline; cursor: pointer;
              font-size: 0.9375rem; padding: 12px 0; }
.reg-faixa { border: 1px solid var(--verde); background: rgba(62,142,90,.12); padding: 10px 14px; margin: 0 0 20px;
             font-size: 0.9375rem; }
.reg-faixa b { color: var(--verde-claro); }
.ag-treino { border-left: 4px solid var(--verde); background: rgba(62,142,90,.12); padding: 8px 12px; margin: 0 0 14px; }
.ag-treino b { color: var(--verde-claro); }

@media (max-width: 800px) {
  .wrap { padding-left: 46px; }          /* as abas fixas nao cobrem o texto */
  .aba-toggle { font-size: 0.9375rem; padding: 6px 6px; }
}
@media (max-width: 560px) {
  .wrap { padding: 58px 14px 28px 42px; }      /* 58: abaixo da casinha e do sol/lua fixos */
  h1 { font-size: 1.3rem; }
  .sub { flex-direction: column; align-items: center; padding: 18px 16px; }
  .sub .marca { width: 88px; height: 88px; flex-basis: 88px; }
  .passos-2 { grid-template-columns: 1fr; }
  details.trilha > summary { font-size: 1.1rem; }
  .filtros input { min-width: 0; width: 100%; }
  .filtros label { flex: 1 1 130px; }
  .ag-ses .erro-passo, .ag-ses .erro-passo select, .ag-ses .erro-passo input { width: 100%; }
  table.tb-cel, table.tb-cel tr, table.tb-cel th, table.tb-cel td { display: block; }
  table.tb-cel tr:first-child { display: none; }        /* cabecalho normal some; o rotulo vem do data-label */
  table.tb-cel tr { border: 1px solid var(--b-444); margin: 0 0 12px; padding: 10px 12px; }
  table.tb-cel td { border: none; padding: 4px 0 4px; }
  table.tb-cel td::before { content: attr(data-label); display: block; font-size: 0.9375rem; font-weight: bold;
    color: var(--azul-claro); margin-bottom: 2px; }
}
/* casinha (Inicio) + botao Tema (sol/lua): fixos no canto superior direito de toda pagina */
.topo-btns { position: fixed; top: 8px; right: 8px; z-index: 996; display: flex; gap: 6px; }
.tema-btn, .inicio-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
            background: var(--caixa); color: var(--azul-claro); border: 1px solid var(--b-555); cursor: pointer; }
.tema-btn:hover, .inicio-btn:hover { border-color: var(--azul); }
.tema-btn svg, .inicio-btn svg { width: 20px; height: 20px; display: block; }
/* cronometro da trilha (PRE-site-rif-cronometro-30min-2026-09-27 + PRE-metodo-rif-aquecimento-estudo-cronometro
   -2026-09-29): so nas 12 trilhas, entre casinha e sol/lua; A = aquecimento (ambar), E = estudo, P = pausa */
.crono-btn { min-width: 38px; height: 38px; padding: 0 8px; display: flex; align-items: center; justify-content: center;
             background: var(--caixa); color: var(--azul-claro); border: 1px solid var(--b-555); cursor: pointer; font-size: 0.9375rem;
             font-weight: bold; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1; }
.crono-btn:hover { border-color: var(--azul); }
.crono-btn svg { width: 20px; height: 20px; display: block; }
.crono-btn.rodando { border-color: var(--azul); }
.crono-btn.aquec { color: var(--ambar-claro); border-color: var(--ambar-claro); }
.crono-btn.pausa { color: var(--verde-claro); border-color: var(--verde); }
.crono-btn.congelado { border-style: dashed; }
dialog.crono-dlg { margin: auto; width: min(92vw, 430px); background: var(--caixa); color: var(--texto);
                   border: 1px solid var(--azul); padding: 20px 22px; font-size: 0.98rem; line-height: 1.6; }
dialog.crono-dlg::backdrop { background: rgba(0, 0, 0, .6); }
dialog.crono-dlg h2 { margin: 0 0 10px; font-size: 1.05rem; color: var(--azul-claro); }
dialog.crono-dlg p { margin: 0 0 16px; }
dialog.crono-dlg p.meta { font-weight: bold; color: var(--forte); }
dialog.crono-dlg .crono-audio { margin: 0 0 16px; }
dialog.crono-dlg .crono-audio p { margin: 0 0 4px; font-weight: bold; color: var(--azul-claro); }
dialog.crono-dlg .crono-audio audio { width: 100%; margin: 0 0 10px; }
dialog.crono-dlg { max-height: 92vh; overflow-y: auto; }
dialog.crono-dlg .acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
dialog.crono-dlg button { padding: 10px 14px; border: 1px solid var(--b-555); background: var(--caixa2); color: var(--texto);
                          cursor: pointer; font-size: 0.95rem; }
dialog.crono-dlg button.principal { background: var(--azul); border-color: var(--azul); color: white; font-weight: bold; }
/* A-/A+ (tamanho da letra): ao lado do sol/lua; em px para o botao nao crescer com a escala */
.letra-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0;
             background: var(--caixa); color: var(--azul-claro); border: 1px solid var(--b-555); cursor: pointer; font-size: 16px;
             font-weight: bold; line-height: 1; letter-spacing: 0; }
.letra-btn:hover { border-color: var(--azul); }
.letra-btn:disabled { opacity: .4; cursor: default; }
/* questao-imagem: um toque amplia em tela cheia (pinca amplia mais); um toque ou Voltar fecha */
.q-fig img, .q-base img, .q-ilus img { cursor: zoom-in; }
.zoom-fig { position: fixed; inset: 0; z-index: 2000; background: white; overflow: auto; cursor: zoom-out;
            touch-action: pan-x pan-y pinch-zoom; }
.zoom-fig img { display: block; width: 100%; max-width: none; height: auto; margin: 0 auto; }
.zoom-fig .zoom-x { position: fixed; top: 8px; right: 8px; width: 44px; height: 44px; font-size: 26px; line-height: 1;
                    background: rgb(20, 20, 20); color: white; border: none; cursor: pointer; }
/* fim de cada trilha: trilha anterior e proxima */
.trilha-viz { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 36px 0 8px; }
.trilha-viz a { border: 1px solid var(--b-444); padding: 10px 14px; text-decoration: none; }
.trilha-viz a:hover { border-color: var(--azul); }
.trilha-viz a.prox { margin-left: auto; border-color: var(--azul); }
.tema-btn .lua, [data-tema="claro"] .tema-btn .sol { display: none; }
[data-tema="claro"] .tema-btn .lua { display: block; }
[data-tema="claro"] .sub .marca.escuro, .sub .marca.claro { display: none; }
[data-tema="claro"] .sub .marca.claro { display: block; }