/* =====================================================================
   VISUAL DA CALCULADORA DE REGRA DE TRÊS
   Usa as cores do site (variáveis de _nucleo/estilo.css), então
   funciona nos modos claro e escuro. Classes começam com .rt-
   Sem animação contínua.
   ===================================================================== */

/* ---------- Base ---------- */
.rt { display: grid; gap: 1rem; margin-top: .4rem; }
.rt [hidden] { display: none !important; }
.rt-duas { display: grid; gap: 1rem; min-width: 0; }
.rt-cartao, .rt-resultado { padding: 1.1rem 1rem 1.2rem; min-width: 0; }
.rt-tit { font-size: 1.12rem; margin: 0 0 .9rem; }
.rt-subtit { font-size: 1rem; margin: 0 0 .5rem; }
.rt-ajuda { font-size: .86rem; color: var(--texto-2); line-height: 1.5; margin: .8rem 0 0; }
.rt-ajuda-topo { margin: 0 0 .9rem; }
.rt-link { border: 0; background: none; padding: 0; margin-top: .7rem; font: inherit; font-size: .9rem; color: var(--primaria); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.rt-painel:focus { outline: none; }

/* ---------- Abas ---------- */
.rt-abas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 4px; border-radius: 18px; background: var(--superficie-2); }
.rt-abas button { display: grid; justify-items: center; gap: .1rem; border: 0; border-radius: 14px; min-height: 52px; padding: .4rem .3rem; background: transparent; font: inherit; color: var(--texto-2); cursor: pointer; min-width: 0; line-height: 1.15; }
.rt-abas b { font-size: .98rem; }
.rt-abas small { font-size: .74rem; font-weight: 600; }
.rt-abas [aria-selected="true"] { background: var(--superficie); color: var(--titulo); box-shadow: inset 0 0 0 1px var(--borda), var(--sombra); }
.rt-abas [aria-selected="true"] small { color: var(--destaque-texto); }

/* ---------- Escolha (direta / inversa) ---------- */
.rt-escolha { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; border-radius: 14px; background: var(--superficie-2); min-width: 0; }
.rt-escolha button { display: grid; gap: .05rem; border: 0; border-radius: 11px; min-height: 46px; padding: .35rem .4rem; background: transparent; font: inherit; font-size: .94rem; font-weight: 750; color: var(--texto-2); cursor: pointer; line-height: 1.2; min-width: 0; }
.rt-escolha small { font-size: .74rem; font-weight: 600; }
.rt-escolha [aria-checked="true"] { background: var(--superficie); color: var(--titulo); box-shadow: inset 0 0 0 1px var(--borda); }
.rt-escolha-p { margin-top: .6rem; }
.rt-escolha-p button { min-height: 38px; font-size: .86rem; }

/* ---------- Campos ---------- */
.rt-entrada, .rt-nome { width: 100%; min-width: 0; min-height: 50px; border: 1.5px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie); padding: .5rem .7rem; font: inherit; font-size: 1.2rem; font-weight: 700; color: var(--titulo); outline: none; }
.rt-nome { min-height: 42px; font-size: .92rem; font-weight: 600; }
.rt-entrada::placeholder { color: var(--destaque-texto); font-style: italic; opacity: .75; }
.rt-entrada:placeholder-shown { border-style: dashed; border-color: var(--destaque); }
.rt-entrada:focus, .rt-nome:focus { border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-suave); border-style: solid; }

/* Grade da simples: [Se] [a1] → [b1] / [então] [a2] → [b2] */
.rt-grade { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: .5rem .45rem; align-items: center; margin-top: 1rem; }
.rt-grade-rot { font-size: .88rem; font-weight: 700; color: var(--texto-2); }
.rt-grade-seta { font-size: 1.2rem; font-weight: 800; color: var(--texto-2); text-align: center; }

/* Linhas da composta */
.rt-linha { padding: .8rem .85rem .9rem; border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); margin-bottom: .7rem; }
.rt-linha-x { border-left: 4px solid var(--destaque); }
.rt-linha-tit { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .5rem; font-weight: 750; font-size: .92rem; color: var(--titulo); }
.rt-linha-tit small { font-weight: 600; color: var(--texto-2); }
.rt-linha-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.rt-campo { display: grid; gap: .3rem; font-size: .8rem; font-weight: 650; color: var(--texto-2); min-width: 0; align-content: start; }
.rt-campo-nome { grid-column: 1 / -1; }
.rt-x { display: flex; align-items: center; min-height: 50px; padding: 0 .8rem; border-radius: var(--raio-p); background: var(--destaque-suave); font-size: 1.2rem; font-weight: 800; font-style: italic; color: var(--destaque-texto); }
.rt-tirar { border: 0; background: none; padding: .2rem 0; font: inherit; font-size: .82rem; font-weight: 700; color: var(--perigo); cursor: pointer; }
.rt-mais { width: 100%; }

/* Dica "direta ou inversa" */
.rt-dica { margin-top: 1rem; border: 1px solid var(--borda); border-radius: 12px; padding: .1rem .9rem; font-size: .9rem; line-height: 1.5; }
.rt-dica summary { cursor: pointer; padding: .6rem 0; font-weight: 700; color: var(--titulo); }
.rt-dica ul { padding-left: 1.1rem; display: grid; gap: .3rem; }

/* ---------- Resultado ---------- */
.rt-vazio { padding: 1.1rem 1rem; border-radius: 12px; background: var(--superficie-2); color: var(--texto-2); font-size: .92rem; text-align: center; margin: 0; }
.rt-grande { margin: 0; display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.rt-grande small { font-size: 1.2rem; font-weight: 800; font-style: italic; color: var(--destaque-texto); }
.rt-grande strong { font-family: var(--fonte-titulo); font-size: clamp(2.1rem, 10vw, 2.9rem); font-weight: 800; line-height: 1.08; color: var(--titulo); letter-spacing: -.02em; overflow-wrap: anywhere; }
.rt-texto { margin: .45rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--texto); font-weight: 600; }
.rt-insights { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .5rem; }
.rt-insights:empty { display: none; }
.rt-insights li { padding: .65rem .8rem; border-radius: 12px; background: var(--destaque-suave); font-size: .9rem; line-height: 1.5; color: var(--texto); }
.rt-insights b { color: var(--titulo); }

/* Montagem da regra (colunas com setas, como na escola) */
.rt-montagem { margin-top: .9rem; overflow-x: auto; }
.rt-m { display: grid; gap: .25rem .4rem; padding: .7rem .6rem; border-radius: 12px; background: var(--superficie-2); text-align: center; min-width: min-content; }
.rt-m-c2 { grid-template-columns: repeat(2, minmax(4.5rem, 1fr)); }
.rt-m-c3 { grid-template-columns: repeat(3, minmax(4.5rem, 1fr)); }
.rt-m-c4 { grid-template-columns: repeat(4, minmax(4.5rem, 1fr)); }
.rt-m-c5 { grid-template-columns: repeat(5, minmax(4.5rem, 1fr)); }
.rt-m-c6 { grid-template-columns: repeat(6, minmax(4.5rem, 1fr)); }
.rt-m-c7, .rt-m-c8, .rt-m-c9, .rt-m-c10 { grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-auto-columns: minmax(4.5rem, 1fr); }
.rt-m-cel { font-size: 1rem; font-weight: 700; color: var(--titulo); overflow-wrap: anywhere; }
.rt-m-cab { font-size: .74rem; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; }
.rt-m-x { color: var(--destaque-texto); font-style: italic; }
.rt-m-seta { font-size: 1.25rem; color: var(--primaria); }
.rt-m-inversa { color: var(--perigo); }
.rt-m-legenda { margin: .35rem 0 0; font-size: .8rem; color: var(--texto-2); }

.rt-passos { margin-top: 1rem; border: 1px solid var(--borda); border-radius: 12px; padding: .2rem .9rem; }
.rt-passos summary { cursor: pointer; padding: .6rem 0; font-weight: 700; color: var(--titulo); font-size: .92rem; }
.rt-passos ol { margin: 0 0 .8rem; padding-left: 1.2rem; display: grid; gap: .35rem; font-size: .92rem; line-height: 1.5; }

.rt-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1.1rem; }
.rt-acoes .btn:first-child { grid-column: 1 / -1; }
.rt-acoes .btn { white-space: normal; text-align: center; line-height: 1.2; padding: .6rem .8rem; font-size: .9rem; }
.rt-acoes .btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Histórico ---------- */
.rt-historico-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rt-historico-topo .rt-link { margin-top: 0; }
.rt-historico ul { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .4rem; }
.rt-historico li button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .8rem; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); font: inherit; font-size: .9rem; color: var(--texto); text-align: left; cursor: pointer; }
.rt-historico li button:hover { border-color: var(--primaria); }
.rt-historico li span { min-width: 0; overflow-wrap: anywhere; }
.rt-historico li b { flex: none; color: var(--titulo); }

/* ---------- Artigo: exemplo resolvido, tabelas e links para os casos ---------- */
.rt-exemplo { margin: 1.4rem 0; padding: 1rem 1.1rem; border: 1px solid var(--borda); border-left: 4px solid var(--destaque); border-radius: 12px; background: var(--superficie); }
.rt-exemplo h2 { margin-top: 0; font-size: 1.1rem; }
.rt-enunciado { margin: .3rem 0 .6rem; font-style: italic; }
.rt-exemplo ol { margin: 0; }
.rt-exemplo-res { margin: .7rem 0 0; }
.rt-tabela-rolar { overflow-x: auto; border: 1px solid var(--borda); border-radius: 12px; margin: .5rem 0 1rem; }
.rt-tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rt-tabela th, .rt-tabela td { padding: .5rem .7rem; border-bottom: 1px solid var(--borda); text-align: right; white-space: nowrap; }
.rt-tabela th:first-child { text-align: left; }
.rt-tabela thead th { font-size: .72rem; color: var(--texto-2); text-transform: uppercase; letter-spacing: .05em; background: var(--superficie); }
.rt-tabela tbody th { font-weight: 650; }
.rt-tabela tr:last-child th, .rt-tabela tr:last-child td { border-bottom: 0; }
.rt-formulas { display: grid; gap: .5rem; padding: 0; list-style: none; }
.rt-formulas li { padding: .6rem .8rem; border-radius: 10px; background: var(--superficie-2); }
.rt-formulas code { font-weight: 700; color: var(--titulo); }
.rt-casos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; margin: .8rem 0 1.4rem; }
.rt-caso { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .8rem .95rem; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); text-decoration: none; color: var(--texto); font-size: .93rem; }
.rt-caso:hover { border-color: var(--destaque); }
.rt-caso .ico { width: 18px; height: 18px; flex: none; color: var(--destaque-texto); }

/* ---------- Telas maiores ---------- */
@media (min-width: 640px) {
  .rt-linha-campos { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
  .rt-campo-nome { grid-column: auto; }
}
@media (min-width: 900px) {
  .rt-duas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media print {
  .rt-abas, .rt-historico, .rt-mais, .rt-tirar { display: none !important; }
}