@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ==========================================================================
   Aprova — padrão visual Stargex
   Fundo claro, lateral navy, azul de destaque, Plus Jakarta Sans.
   Botão, campo, aba e etiqueta são pílula. Cartão tem raio generoso.
   Nenhuma regra depende de style inline (CSP sem unsafe-inline).
   ========================================================================== */
:root {
  --navy: #10213F; --navy-2: #172C52; --navy-3: #22406F; --navy-texto: #B9C7DE; --navy-fraco: #7189AE;
  --azul: #1F6FEB; --azul-2: #1858C4; --azul-suave: #E9F1FE; --azul-borda: #C7DAFB;
  --fundo: #F3F5F9; --branco: #FFFFFF; --borda: #E2E8F0; --borda-2: #CBD5E1;
  --texto: #0F1B2D; --texto-2: #52627A; --texto-3: #8394AD;
  --verde: #15803D; --verde-vivo: #16A34A; --verde-suave: #E6F6EC;
  --ambar: #B45309; --ambar-vivo: #D97706; --ambar-suave: #FEF3E2;
  --vermelho: #B91C1C; --vermelho-vivo: #DC2626; --vermelho-suave: #FDECEC;
  --roxo: #6D28D9; --roxo-suave: #F1EAFE;
  --raio: 16px; --raio-g: 22px; --pilula: 999px;
  --sombra: 0 1px 2px rgba(15, 27, 45, .04), 0 6px 20px rgba(15, 27, 45, .05);
  --sombra-alta: 0 12px 40px rgba(15, 27, 45, .16);
  --lateral: 264px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 15px/1.55 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* A fonte troca "2x" por "2×" automaticamente; em exercício de matemática isso muda o sentido. */
  font-variant-ligatures: no-contextual;
  font-feature-settings: "calt" 0;
}
input, select, textarea, button { font-variant-ligatures: no-contextual; font-feature-settings: "calt" 0; }
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-2); }
h1, h2, h3 { margin: 0 0 .3rem; letter-spacing: -.02em; line-height: 1.25; }
h1 { font-size: 1.55rem; font-weight: 800; }
h2 { font-size: 1.06rem; font-weight: 700; }
h3 { font-size: .9rem; font-weight: 700; }
p { margin: 0 0 .75rem; }
small { font-size: .8em; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid rgba(31, 111, 235, .4); outline-offset: 2px; }
[hidden], .escondido { display: none !important; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.suave { color: var(--texto-2); }
.nowrap { white-space: nowrap; }
.texto-verde { color: var(--verde); }
.texto-vermelho { color: var(--vermelho); }
.icone { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- estrutura */
.app { display: flex; min-height: 100vh; background: linear-gradient(to right, var(--navy) var(--lateral), var(--fundo) var(--lateral)); }
.lateral {
  width: var(--lateral); flex-shrink: 0; background: var(--navy); color: var(--navy-texto);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 40;
}
.lateral__marca { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.2rem .9rem; border-bottom: 1px solid var(--navy-2); }
.lateral__marca strong { display: block; color: #fff; font-size: .98rem; line-height: 1.2; }
.lateral__marca span { font-size: .74rem; color: var(--navy-fraco); }
.lateral__sigla {
  width: 40px; height: 40px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--azul); color: #fff; font-weight: 800; font-size: .9rem; letter-spacing: .02em;
}
.lateral__sigla--grande { width: 52px; height: 52px; border-radius: 18px; font-size: 1.1rem; }
.lateral__logo { width: 44px; height: 44px; border-radius: 14px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.lateral__fechar { display: none; margin-left: auto; background: none; border: 0; color: var(--navy-texto); cursor: pointer; padding: .4rem; border-radius: var(--pilula); }
.lateral__menu { flex: 1; overflow-y: auto; padding: .4rem .75rem .6rem; scrollbar-width: thin; scrollbar-color: var(--navy-3) transparent; }
.lateral__grupo { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-fraco); margin: .8rem .85rem .25rem; }
.lateral__item {
  display: flex; align-items: center; gap: .7rem; padding: .48rem .9rem; margin-bottom: 1px;
  border-radius: var(--pilula); color: var(--navy-texto); font-size: .88rem; font-weight: 500;
  transition: background .15s, color .15s;
}
.lateral__item:hover { background: var(--navy-2); color: #fff; }
.lateral__item.ativo { background: var(--azul); color: #fff; font-weight: 600; }
.lateral__item .icone { opacity: .85; }
.lateral__contador { margin-left: auto; min-width: 22px; padding: 0 .45rem; border-radius: var(--pilula); background: var(--vermelho-vivo); color: #fff; font-size: .72rem; line-height: 20px; text-align: center; }
.lateral__rodape { display: flex; justify-content: space-between; padding: .7rem 1.3rem .8rem; border-top: 1px solid var(--navy-2); font-size: .7rem; color: var(--navy-fraco); }
.veu { display: none; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topo {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .9rem;
  padding: .7rem 2rem; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda);
}
.topo__menu { display: none; background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--pilula); padding: .5rem; cursor: pointer; color: var(--texto); }
.topo__textos { min-width: 0; }
.topo__curso { font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo__data { font-size: .76rem; color: var(--texto-2); }

.conta { margin-left: auto; position: relative; }
.conta summary {
  list-style: none; display: flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .28rem .7rem .28rem .3rem; border: 1px solid var(--borda); border-radius: var(--pilula); background: var(--branco);
}
.conta summary::-webkit-details-marker { display: none; }
.conta summary:hover { border-color: var(--borda-2); }
.conta__nome { font-weight: 600; font-size: .86rem; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta__menu {
  position: absolute; right: 0; top: calc(100% + .5rem); width: 250px; padding: .5rem;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-alta);
}
.conta__quem { padding: .55rem .75rem .7rem; border-bottom: 1px solid var(--borda); margin-bottom: .35rem; }
.conta__quem strong { display: block; font-size: .9rem; }
.conta__quem span { font-size: .76rem; color: var(--texto-2); word-break: break-all; }
.conta__menu a, .conta__menu button {
  display: block; width: 100%; text-align: left; padding: .5rem .75rem; border-radius: 10px;
  color: var(--texto); font: inherit; font-size: .88rem; background: none; border: 0; cursor: pointer;
}
.conta__menu a:hover, .conta__menu button:hover { background: var(--fundo); }
.conta__menu button { color: var(--vermelho); }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: inline-grid; place-items: center;
  background: var(--azul-suave); color: var(--azul-2); font-weight: 700; font-size: .76rem;
}
.avatar--mini { width: 28px; height: 28px; font-size: .68rem; }
.avatar--grande { width: 56px; height: 56px; font-size: 1.05rem; }

.filhos { display: flex; align-items: center; gap: .5rem; padding: .6rem 2rem; background: var(--branco); border-bottom: 1px solid var(--borda); overflow-x: auto; }
.filhos > span { font-size: .8rem; color: var(--texto-2); white-space: nowrap; }
.filho { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .85rem .25rem .3rem; border: 1px solid var(--borda); border-radius: var(--pilula); color: var(--texto); font-weight: 600; font-size: .86rem; white-space: nowrap; }
.filho.ativo { border-color: var(--azul); background: var(--azul-suave); color: var(--azul-2); }

.pagina { width: 100%; max-width: 1360px; margin: 0 auto; padding: 1.6rem 2rem 3rem; flex: 1; }
.rodape { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; width: 100%; max-width: 1360px; margin: 0 auto; padding: 1rem 2rem 1.4rem; font-size: .76rem; color: var(--texto-3); }

/* ---------------------------------------------------------------- blocos */
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.cabecalho > div:first-child { min-width: 0; }
.cabecalho p { margin: 0; color: var(--texto-2); max-width: 72ch; }
.cabecalho__acoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.pessoa { display: flex; align-items: center; gap: .65rem; color: var(--texto); min-width: 0; }
.pessoa > span:last-child, .pessoa > div { min-width: 0; }
.pessoa strong { display: block; }
.pessoa small { display: block; color: var(--texto-2); }
.pessoa--grande { gap: 1rem; }

.cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: 1.25rem 1.35rem; box-shadow: var(--sombra); min-width: 0; }
.cartao + .cartao, .cartao + .grade, .grade + .cartao, .metricas + .cartao, .grade + .grade, .cartao + details, details + .cartao { margin-top: 1rem; }
.cartao > h2 { margin-bottom: .8rem; }
.cartao__topo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem; }
.cartao__topo h2 { margin: 0; }
.cartao--destaque { border-color: var(--azul-borda); background: linear-gradient(180deg, #F6F9FF, var(--branco)); }
.cartao--perigo { border-color: #F3C9C9; }
.cartao--tabela { padding: .4rem .6rem; }
details.cartao > summary { cursor: pointer; font-weight: 700; list-style: none; }
details.cartao > summary::-webkit-details-marker { display: none; }
details.cartao > summary::before { content: "+ "; color: var(--texto-3); }
details.cartao[open] > summary { margin-bottom: .9rem; }
details.cartao[open] > summary::before { content: "− "; }

.grade { display: grid; gap: 1rem; align-items: start; }
.grade--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade--principal { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.grade--lateral { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
.grade--topo { margin-top: 1rem; }
.pilha { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pilha > .cartao + .cartao { margin-top: 0; }
.pilha--pequena { gap: .5rem; margin-top: .8rem; }

.metricas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.metricas--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metrica {
  display: flex; flex-direction: column; gap: .15rem; min-width: 0; padding: 1rem 1.15rem;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-g); box-shadow: var(--sombra); color: var(--texto);
}
a.metrica:hover { border-color: var(--azul-borda); color: var(--texto); }
.metrica__rotulo { font-size: .8rem; color: var(--texto-2); font-weight: 600; }
.metrica__valor { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metrica__nota { font-size: .76rem; color: var(--texto-3); }
.metrica .barra { margin-top: .45rem; }
.metrica--alerta { border-color: #F4D19B; background: linear-gradient(180deg, #FFFAF1, var(--branco)); }
.metrica--escura { background: var(--navy); border-color: var(--navy); }
.metrica--escura .metrica__rotulo, .metrica--escura .metrica__nota { color: var(--navy-texto); }
.metrica--escura .metrica__valor { color: #fff; }
.metrica--compacta .metrica__valor { font-size: 1.3rem; }
.metrica--ativa { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }

/* ---------------------------------------------------------------- botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .58rem 1.25rem; border-radius: var(--pilula); border: 1px solid transparent;
  background: var(--azul); color: #fff; font: inherit; font-size: .88rem; font-weight: 600; line-height: 1.3;
  cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .08s;
}
.botao:hover { background: var(--azul-2); color: #fff; }
.botao:active { transform: translateY(1px); }
.botao--claro { background: var(--branco); color: var(--texto); border-color: var(--borda); }
.botao--claro:hover { background: var(--fundo); color: var(--texto); border-color: var(--borda-2); }
.botao--verde { background: var(--verde-vivo); }
.botao--verde:hover { background: var(--verde); }
.botao--perigo { background: var(--vermelho-vivo); }
.botao--perigo:hover { background: var(--vermelho); }
.botao--fantasma { background: transparent; color: var(--texto-2); }
.botao--fantasma:hover { background: var(--fundo); color: var(--vermelho); }
.botao--pequeno { padding: .34rem .85rem; font-size: .8rem; }
.botao--grande { padding: .78rem 1.6rem; font-size: .96rem; }
.botao--bloco { width: 100%; }
.botao--icone { padding: .5rem; }
.link { background: none; border: 0; padding: 0; font: inherit; font-size: .84rem; font-weight: 600; color: var(--azul); cursor: pointer; }
.link:hover { color: var(--azul-2); text-decoration: underline; }
.link--perigo { color: var(--vermelho); }
.link--perigo:hover { color: var(--vermelho); }
form { margin: 0; }

/* ---------------------------------------------------------------- formulários */
.campo { margin-bottom: .9rem; min-width: 0; border: 0; padding: 0; }
/* O navegador dá 2px de margem dos lados ao fieldset: os cartões e opções dentro
   dele ficavam 2px para dentro dos campos de cima e de baixo. */
fieldset.campo { margin-left: 0; margin-right: 0; }
.campo > label, .campo > legend, .grupo > legend { display: block; font-size: .8rem; font-weight: 600; color: var(--texto-2); margin-bottom: .32rem; padding: 0; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea {
  width: 100%; min-width: 0; padding: .6rem 1.05rem; border: 1px solid var(--borda); border-radius: var(--pilula);
  background: var(--branco); color: var(--texto); font: inherit; font-size: .9rem; line-height: 1.35;
  transition: border-color .15s, box-shadow .15s;
}
select {
  appearance: none; padding-right: 2.3rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352627A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 16px;
}
textarea { border-radius: var(--raio); resize: vertical; min-height: 90px; line-height: 1.55; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px rgba(31, 111, 235, .12); }
/* Caixinha e bolinha: a sombra do foco saía quadrada em volta delas ao clicar.
   No teclado, um contorno redondo mostra onde está o foco. */
input[type=checkbox]:focus, input[type=radio]:focus { box-shadow: none; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
input[type=radio] { border-radius: 50%; }
input:disabled, select:disabled { background: var(--fundo); color: var(--texto-2); }
input[type=file] {
  width: 100%; font: inherit; font-size: .84rem; color: var(--texto-2);
  padding: .35rem; border: 1px dashed var(--borda-2); border-radius: var(--pilula); background: var(--fundo);
}
input[type=file]::file-selector-button {
  margin-right: .75rem; padding: .4rem 1rem; border-radius: var(--pilula); border: 1px solid var(--borda);
  background: var(--branco); color: var(--texto); font: inherit; font-weight: 600; cursor: pointer;
}
input[type=checkbox], input[type=radio] { accent-color: var(--azul); width: 17px; height: 17px; flex-shrink: 0; }
/* Campo de uma linha: todos da mesma altura. O Chrome dá altura própria à data
   (2px a mais) e prende a entrelinha da lista (6px a menos) — lado a lado, um
   ficava torto em relação ao outro. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]):not([type=color]), select) {
  height: calc(1.35em + 1.2rem + 2px);
}
.opcao-partida select, .frase--lote select, .frase--lote input { height: auto; }
/* Botão na mesma linha de um campo: mesma altura do campo, e a linha de baixo
   do campo encosta na do botão (o .campo tinha margem embaixo). */
.filtros > .campo { margin-bottom: 0; }
.filtros > .botao, .linha-form > .botao, .linha-form > button { height: calc(1.215rem + 1.2rem + 2px); }
/* Botão numa célula da grade de campos: embaixo, na linha do campo do lado. */
.campo--botao { display: flex; align-items: flex-end; }
.campo--botao > .botao { height: calc(1.215rem + 1.2rem + 2px); }
.tabela--edicao td > .botao, .tabela--edicao td > form > .botao { height: calc(1.215rem + 1.2rem + 2px); }
/* Botões empilhados numa célula (WhatsApp, Confirmar, Fechar): mesma largura. */
.pilha-botoes { display: grid; gap: .35rem; min-width: 150px; }
.pilha-botoes form { margin: 0; }
.pilha-botoes .botao { width: 100%; }
.pilha-botoes > .etiqueta { justify-self: start; }
.dica { font-size: .76rem; color: var(--texto-3); margin: .3rem 0 0; }
form.cartao > .dica + .botao { margin-top: .85rem; }
.escolhas--cartoes + .linha { margin-top: 1rem; }
.linha { display: grid; gap: 0 1rem; }
.linha--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.linha--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.linha--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.campo--duplo { grid-column: span 2; }
.campo--marcador { display: flex; align-items: flex-end; }
/* A caixinha fica no meio da altura do campo do lado (antes ficava 10px acima). */
.campo--marcador > .marcador { display: flex; gap: .55rem; margin: 0; min-height: calc(1.215rem + 1.2rem + 2px); align-items: center; }
.campo--marcador > .botao { height: calc(1.215rem + 1.2rem + 2px); }
/* Caixinha numa linha em que os outros campos têm dica embaixo: fica na altura
   do campo (com o flex-end, descia para a altura da dica). */
.campo--marcador-topo::before { content: "\00a0"; display: block; font-size: .8rem; font-weight: 600; margin-bottom: .32rem; }
.campo--marcador-topo > .marcador { display: flex; align-items: center; gap: .55rem; margin: 0; min-height: calc(1.215rem + 1.2rem + 2px); }
.campo--inline { margin: 0; }
.campo--busca { flex: 1 1 240px; }
.grupo { border: 1px solid var(--borda); border-radius: var(--raio); padding: .8rem 1rem .1rem; margin: 0 0 1rem; }
.marcador { display: inline-flex; align-items: flex-start; gap: .55rem; font-size: .88rem; cursor: pointer; margin: .2rem 0 .9rem; line-height: 1.4; }
.marcador--destaque { display: flex; padding: .9rem 1.1rem; border: 1px solid var(--azul-borda); background: var(--azul-suave); border-radius: var(--raio); }
.escolhas { display: flex; flex-wrap: wrap; gap: .45rem; }
.escolhas--lista { max-height: 240px; overflow-y: auto; padding: .2rem; }
.escolha {
  display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .95rem; cursor: pointer;
  border: 1px solid var(--borda); border-radius: var(--pilula); background: var(--branco); font-size: .85rem;
}
.escolha:has(input:checked) { border-color: var(--azul); background: var(--azul-suave); color: var(--azul-2); font-weight: 600; }
.escolha--urgente:has(input:checked) { border-color: var(--vermelho-vivo); background: var(--vermelho-suave); color: var(--vermelho); }
.escolha--alto:has(input:checked) { border-color: var(--ambar-vivo); background: var(--ambar-suave); color: var(--ambar); }
.escolha--lembrete:has(input:checked) { border-color: var(--roxo); background: var(--roxo-suave); color: var(--roxo); }
.escolhas--cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.escolha--cartao { border-radius: var(--raio); padding: .8rem 1rem; align-items: flex-start; }
.escolha--cartao strong { display: block; font-size: .9rem; }
.escolha--cartao small { display: block; color: var(--texto-2); font-weight: 400; }
.rodape-form { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borda); }
.rodape-form--fixo {
  position: sticky; bottom: 0; z-index: 10; margin: 1rem 0 0; padding: .8rem 1.1rem;
  background: rgba(255, 255, 255, .95); backdrop-filter: blur(6px); border: 1px solid var(--borda); border-radius: var(--pilula); box-shadow: var(--sombra-alta);
}
.formulario.pilha > .rodape-form { margin-top: 0; }
.linha-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.linha-form > input:not([type=hidden]), .linha-form > select { flex: 1 1 140px; width: auto; }
.linha-form > p { flex-basis: 100%; margin: 0; }
.linha-form--nova { padding-top: .6rem; border-top: 1px dashed var(--borda); margin-top: .6rem; }
.entrada-curta { flex: 0 1 110px !important; }
.filtros { display: flex; gap: .6rem .8rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.filtros .campo--inline > label { margin-bottom: .25rem; }
.filtros--dentro { margin-bottom: .6rem; }
.senha { position: relative; }
.senha input { padding-right: 6rem !important; }
.senha__ver { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: var(--fundo); border-radius: var(--pilula); padding: .32rem .8rem; font: inherit; font-size: .76rem; font-weight: 600; color: var(--texto-2); cursor: pointer; }
.forca { height: 6px; border-radius: var(--pilula); background: var(--borda); margin-top: .45rem; overflow: hidden; }
.forca span { display: block; height: 100%; width: 0; border-radius: var(--pilula); background: var(--vermelho-vivo); transition: width .2s, background .2s; }
.forca.nivel-1 span { width: 33%; }
.forca.nivel-2 span { width: 66%; background: var(--ambar-vivo); }
.forca.nivel-3 span { width: 100%; background: var(--verde-vivo); }

/* ---------------------------------------------------------------- etiquetas, abas */
.etiqueta {
  display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .7rem; border-radius: var(--pilula);
  font-size: .72rem; font-weight: 700; white-space: nowrap; line-height: 1.5; vertical-align: middle;
}
.etiqueta .icone { width: 13px; height: 13px; }
.etiqueta--urgente { background: var(--vermelho-vivo); color: #fff; }
.etiqueta--alto { background: var(--ambar-vivo); color: #fff; }
.etiqueta--moderado { background: var(--azul-suave); color: var(--azul-2); }
.etiqueta--baixo { background: #EEF2F7; color: var(--texto-2); }
.etiqueta--lembrete { background: var(--roxo-suave); color: var(--roxo); }
.etiqueta--verde { background: var(--verde-suave); color: var(--verde); }
.etiqueta--vermelha { background: var(--vermelho-suave); color: var(--vermelho); }
.etiqueta--ambar { background: var(--ambar-suave); color: var(--ambar); }
.etiqueta--azul { background: var(--azul-suave); color: var(--azul-2); }
.etiqueta--neutra { background: #EEF2F7; color: var(--texto-2); }
.etiqueta--navy { background: var(--navy); color: #fff; }
a.etiqueta:hover { filter: brightness(.96); }

.abas { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.abas--prioridade { margin-top: -.4rem; }
.abas__separador { width: 1px; height: 22px; background: var(--borda-2); margin: 0 .3rem; }
.aba {
  padding: .44rem 1.05rem; border-radius: var(--pilula); border: 1px solid var(--borda); background: var(--branco);
  color: var(--texto-2); font-size: .85rem; font-weight: 600; white-space: nowrap;
}
.aba:hover { color: var(--texto); border-color: var(--borda-2); }
.aba.ativa { background: var(--navy); border-color: var(--navy); color: #fff; }
.aba--menor { padding: .28rem .8rem; font-size: .78rem; }
.aba--urgente.ativa { background: var(--vermelho-vivo); border-color: var(--vermelho-vivo); }
.aba--alto.ativa { background: var(--ambar-vivo); border-color: var(--ambar-vivo); }
.aba--lembrete.ativa { background: var(--roxo); border-color: var(--roxo); }

/* ---------------------------------------------------------------- mensagens */
.mensagens { margin-bottom: 1rem; }
.mensagem { padding: .72rem 1.2rem; border-radius: var(--pilula); margin-bottom: .5rem; font-size: .88rem; font-weight: 500; }
.mensagem--sucesso { background: var(--verde-suave); color: #0F5F2E; }
.mensagem--erro { background: var(--vermelho-suave); color: #8F1A1A; }
.mensagem--aviso { background: var(--ambar-suave); color: #8A4509; }
.alerta { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1.15rem; border-radius: var(--raio); margin-bottom: 1rem; font-size: .9rem; border: 1px solid; }
.alerta .icone { margin-top: .12rem; }
.alerta a { font-weight: 700; }
.alerta--vermelho { background: var(--vermelho-suave); border-color: #F5C5C5; color: #8F1A1A; }
.alerta--ambar { background: var(--ambar-suave); border-color: #F4D19B; color: #8A4509; }
.alerta--azul { background: var(--azul-suave); border-color: var(--azul-borda); color: #173F85; }
.vazio {
  display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center;
  padding: 2.2rem 1.4rem; color: var(--texto-2); border: 1px dashed var(--borda-2); border-radius: var(--raio-g); background: var(--branco);
}
.vazio strong { color: var(--texto); }

/* ---------------------------------------------------------------- listas */
.lista { list-style: none; margin: 0; padding: 0; }
.lista__item { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid #F0F3F8; }
.lista__item:last-child { border-bottom: 0; }
.lista__texto { display: flex; flex-direction: column; min-width: 0; color: var(--texto); }
.lista__texto strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; }
.lista__texto span { font-size: .76rem; color: var(--texto-3); }
.lista--compacta .linha-simples { padding: .38rem 0; }
.linha-simples { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid #F0F3F8; min-width: 0; }
.linha-simples:last-child { border-bottom: 0; }
.linha-simples > * { min-width: 0; }
/* Data e hora não encolhem (com nowrap, vazavam e a página rolava de lado no celular). */
.linha-simples > .nowrap { flex-shrink: 0; }
.acoes-linha { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; margin: 0 0 1rem; }
.dados--uma { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.dados--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: .8rem 0; }
.dados dt { font-size: .74rem; color: var(--texto-3); font-weight: 600; }
.dados dd { margin: 0; font-weight: 600; word-break: break-word; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .85rem; border-radius: var(--pilula); background: var(--fundo); border: 1px solid var(--borda); color: var(--texto); font-size: .82rem; }
.chip small { color: var(--texto-3); }
.pendentes summary, .dobra summary { cursor: pointer; font-weight: 600; font-size: .88rem; margin-top: .8rem; color: var(--azul); }
.dobra[open] summary { margin-bottom: .8rem; }
.paginacao { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 1rem; font-size: .85rem; color: var(--texto-2); }

/* ---------------------------------------------------------------- barras */
.barra { display: block; height: 8px; background: #E9EEF5; border-radius: var(--pilula); overflow: hidden; }
.barra--grossa { height: 12px; margin: .4rem 0 .2rem; }
.barra__cheio { display: block; height: 100%; background: var(--azul); border-radius: var(--pilula); }
.barra__cheio--alerta { background: var(--ambar-vivo); }
.progresso { padding: .55rem 0; }
.progresso__linha { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; font-size: .86rem; margin-bottom: .35rem; }
.progresso__linha span { color: var(--texto-2); font-size: .8rem; }
.percentual { text-align: right; }
.percentual strong { display: block; font-size: 1.6rem; line-height: 1.1; color: var(--azul); }
.percentual span { font-size: .76rem; color: var(--texto-2); }
.percentual--alerta strong { color: var(--ambar); }

/* ---------------------------------------------------------------- datas */
.datas { list-style: none; margin: 0; padding: 0; }
.datas li { display: flex; gap: .8rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid #F0F3F8; }
.datas li:last-child { border-bottom: 0; }
.datas li > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.datas strong { font-size: .9rem; }
.datas span { font-size: .76rem; color: var(--texto-2); }
.data-bloco {
  width: 48px; flex-shrink: 0; text-align: center; padding: .3rem 0; border-radius: 14px;
  background: var(--azul-suave); color: var(--azul-2) !important; font-size: .66rem !important; font-weight: 700; text-transform: uppercase;
}
.data-bloco b { display: block; font-size: 1.15rem; line-height: 1.1; }
.data-bloco--prova { background: #FDEBDD; color: #B8440E !important; }
.data-bloco--reuniao { background: var(--roxo-suave); color: var(--roxo) !important; }
.data-bloco--feriado { background: #DDF3EF; color: #0F766E !important; }
.data-bloco--aula, .data-bloco--outro { background: #EEF2F7; color: var(--texto-2) !important; }

/* ---------------------------------------------------------------- tabelas */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -.2rem; padding: 0 .2rem; }
.tabela { width: 100%; border-collapse: collapse; font-size: .87rem; }
.tabela th { text-align: left; font-size: .72rem; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; padding: .7rem .75rem; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: .68rem .75rem; border-bottom: 1px solid #F0F3F8; vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: #FAFBFD; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .pessoa strong { font-weight: 600; }
.linha-hoje td { background: var(--azul-suave); }
.linha-alerta td { background: #FFF8F8; }
.linha-totais th { background: var(--fundo); text-transform: none; letter-spacing: 0; }
.tabela--notas td, .tabela--notas th { padding: .45rem .4rem; }
.entrada-nota { width: 72px !important; padding: .38rem .6rem !important; text-align: center; }
.tabela--edicao td { padding: .4rem .3rem; }
/* A lista da tabela de edição ficava menor que o campo do lado (o campo nunca
   pegou o tamanho menor): agora os dois no tamanho normal. */
.tabela--edicao select { min-width: 90px; }
.tabela--dre td { padding: .5rem .75rem; }
.dre__grupo td { font-weight: 700; background: var(--fundo); }
.dre__conta { padding-left: 1.8rem !important; color: var(--texto-2); }
.dre__total td { font-weight: 800; border-top: 2px solid var(--texto); font-size: .95rem; }
.sinal { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-weight: 800; font-size: .8rem; margin-right: .2rem; }
.sinal--entrada { background: var(--verde-suave); color: var(--verde); }
.sinal--saida { background: var(--vermelho-suave); color: var(--vermelho); }
.baixa { position: relative; }
.baixa summary { list-style: none; }
.baixa summary::-webkit-details-marker { display: none; }
.baixa[open] { padding: .5rem; margin: -.5rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); box-shadow: var(--sombra-alta); }
.baixa__form { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0; min-width: 190px; }
.navegador-mes { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.navegador-mes strong { font-size: 1.05rem; min-width: 12ch; text-align: center; }

/* ---------------------------------------------------------------- mural e recados */
.feed { display: flex; flex-direction: column; gap: .8rem; }
.aviso { background: var(--branco); border: 1px solid var(--borda); border-left: 5px solid var(--borda-2); border-radius: var(--raio-g); padding: 1.1rem 1.3rem; box-shadow: var(--sombra); }
.aviso--urgente { border-left-color: var(--vermelho-vivo); }
.aviso--alto { border-left-color: var(--ambar-vivo); }
.aviso--moderado { border-left-color: var(--azul); }
.aviso--lembrete { border-left-color: var(--roxo); }
.aviso__topo { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .55rem; }
.aviso__quando { margin-left: auto; font-size: .76rem; color: var(--texto-3); }
.aviso h2 { font-size: 1.05rem; }
.aviso__corpo { color: var(--texto-2); white-space: pre-line; margin: 0; }
.aviso__imagem { display: block; margin-top: .9rem; border-radius: var(--raio); max-height: 460px; object-fit: cover; }
.aviso__rodape { display: flex; justify-content: space-between; align-items: center; margin-top: .8rem; font-size: .78rem; color: var(--texto-3); }
.recado { display: block; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: 1rem 1.25rem; box-shadow: var(--sombra); color: var(--texto); }
.recado:hover { border-color: var(--azul-borda); color: var(--texto); }
.recado--novo { border-left: 5px solid var(--azul); }
.recado--pendente { border-left: 5px solid var(--ambar-vivo); }
.recado__topo { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .35rem; }
.recado__topo time { margin-left: auto; font-size: .76rem; color: var(--texto-3); }
.recado__titulo { display: block; font-size: .98rem; }
.recado__meta { font-size: .8rem; color: var(--texto-2); }
.recado-curto { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem; margin-bottom: .5rem; border: 1px solid var(--borda); border-radius: var(--raio); color: var(--texto); }
.recado-curto:hover { border-color: var(--azul-borda); color: var(--texto); }
.recado-curto--novo { border-color: var(--azul-borda); border-left: 4px solid var(--azul); background: #FBFCFF; }
.recado-curto__topo { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.recado-curto__topo small { margin-left: auto; color: var(--texto-3); }
.recado-curto > span:last-child { font-size: .78rem; color: var(--texto-2); }
.conversa { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.mensagem-conversa { max-width: 80%; padding: .9rem 1.15rem; border-radius: 20px; border: 1px solid var(--borda); background: var(--branco); box-shadow: var(--sombra); }
.mensagem-conversa header { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; margin-bottom: .35rem; font-size: .84rem; }
.mensagem-conversa time { margin-left: auto; font-size: .74rem; color: var(--texto-3); }
.mensagem-conversa p { margin: 0; white-space: pre-line; }
.mensagem-conversa--escola { align-self: flex-start; border-bottom-left-radius: 6px; }
.mensagem-conversa--familia { align-self: flex-end; background: var(--azul-suave); border-color: var(--azul-borda); border-bottom-right-radius: 6px; }

/* ---------------------------------------------------------------- prazos */
.cards-prova { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.card-prova { display: flex; flex-direction: column; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-g); overflow: hidden; box-shadow: var(--sombra); }
.card-prova--feita { border-color: #B7E3C6; }
.card-prova__capa { position: relative; min-height: 116px; padding: 1rem 1.2rem; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 55%, var(--azul) 100%); }
.card-prova__capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-prova__capa--foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 33, 63, .1), rgba(16, 33, 63, .85)); }
.card-prova__capa > span, .card-prova__capa > strong { position: relative; z-index: 1; }
.card-prova__sigla { align-self: flex-start; padding: .12rem .65rem; border-radius: var(--pilula); background: rgba(255, 255, 255, .18); font-size: .7rem; font-weight: 700; letter-spacing: .06em; margin-bottom: .35rem; }
.card-prova__capa strong { font-size: 1.1rem; line-height: 1.25; }
.card-prova__corpo { padding: 1rem 1.2rem; flex: 1; font-size: .88rem; color: var(--texto-2); }
.card-prova__etiquetas { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .8rem; }
.card-prova__datas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: 0 0 .8rem; padding: .6rem .8rem; background: var(--fundo); border-radius: var(--raio); }
.card-prova__datas dt { font-size: .68rem; color: var(--texto-3); font-weight: 600; }
.card-prova__datas dd { margin: 0; font-weight: 700; color: var(--texto); font-size: .82rem; }
.card-prova__bloco { margin-top: .7rem; }
.card-prova__bloco h3 { font-size: .76rem; color: var(--texto); margin-bottom: .15rem; }
.card-prova__bloco p { margin: 0; white-space: pre-line; }
.card-prova__rodape { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: .85rem 1.2rem; border-top: 1px solid var(--borda); }

/* ---------------------------------------------------------------- acadêmico */
.arquivo-linha, .exercicio-linha { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid #F0F3F8; }
.arquivo-linha:last-child, .exercicio-linha:last-child { border-bottom: 0; }
.arquivo-linha__icone { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--vermelho-suave); color: var(--vermelho); font-size: .66rem; font-weight: 800; }
.arquivo-linha__texto, .exercicio-linha__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.arquivo-linha__texto span, .exercicio-linha__texto span { font-size: .78rem; color: var(--texto-2); }
.questao { border: 1px solid var(--borda); border-radius: var(--raio-g); padding: 1.05rem 1.25rem; margin: 0 0 .8rem; background: var(--branco); box-shadow: var(--sombra); min-width: 0; }
.questao--certa { border-left: 5px solid var(--verde-vivo); }
.questao--errada { border-left: 5px solid var(--vermelho-vivo); }
.questao__enunciado { display: flex; gap: .6rem; font-weight: 600; margin-bottom: .8rem; padding: 0; white-space: pre-line; }
legend.questao__enunciado { float: left; width: 100%; }
legend.questao__enunciado + * { clear: both; }
.questao__numero { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: .76rem; }
.questao__comentario { margin: .7rem 0 0; padding: .6rem .9rem; border-radius: var(--raio); background: var(--fundo); font-size: .84rem; color: var(--texto-2); }
.alternativa { display: flex; align-items: center; gap: .65rem; padding: .55rem 1rem; margin-bottom: .4rem; border: 1px solid var(--borda); border-radius: var(--pilula); font-size: .9rem; cursor: pointer; }
.alternativa:hover { border-color: var(--borda-2); }
.alternativa:has(input:checked) { border-color: var(--azul); background: var(--azul-suave); }
.alternativa input { position: absolute; opacity: 0; pointer-events: none; }
.alternativa:has(input:focus-visible) { outline: 3px solid rgba(31, 111, 235, .4); }
.alternativa__letra { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--fundo); font-weight: 700; font-size: .8rem; }
.alternativa:has(input:checked) .alternativa__letra { background: var(--azul); color: #fff; }
.alternativa--certa { border-color: var(--verde-vivo); background: var(--verde-suave); }
.alternativa--certa .alternativa__letra { background: var(--verde-vivo); color: #fff; }
.alternativa--errada { border-color: var(--vermelho-vivo); background: var(--vermelho-suave); }
.alternativa--errada .alternativa__letra { background: var(--vermelho-vivo); color: #fff; }
.alternativa__marca { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--texto-2); white-space: nowrap; }
.resultado { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.2rem; padding: 1.2rem 1.4rem; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-g); }
.resultado__nota { width: 124px; height: 124px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 10px solid var(--azul-suave); }
.resultado__nota strong { font-size: 1.9rem; line-height: 1; }
.resultado__nota span { font-size: .76rem; color: var(--texto-2); }
.resultado__nota--boa { border-color: var(--verde-suave); color: var(--verde); }
.resultado__nota--media { border-color: var(--ambar-suave); color: var(--ambar); }
.resultado__nota--baixa { border-color: var(--vermelho-suave); color: var(--vermelho); }
.resultado__resumo { display: flex; gap: 1.5rem; font-size: .95rem; }
.resultado__resumo b { font-size: 1.5rem; margin-right: .2rem; }
.alternativas-edicao { display: grid; gap: .4rem; }
.alternativa-edicao { display: flex; gap: .5rem; align-items: center; }
.alternativa-edicao__certa { cursor: pointer; }
.alternativa-edicao__certa input { position: absolute; opacity: 0; pointer-events: none; }
.alternativa-edicao__certa span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--borda); font-weight: 700; font-size: .84rem; background: var(--branco); }
.alternativa-edicao__certa:has(input:checked) span { background: var(--verde-vivo); border-color: var(--verde-vivo); color: #fff; }
.alternativa-edicao__certa:has(input:focus-visible) span { outline: 3px solid rgba(31, 111, 235, .4); }

/* ---------------------------------------------------------------- calendário */
.calendario__topo { justify-content: center; }
.calendario__topo h2 { min-width: 14ch; text-align: center; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendario__semana { text-align: center; font-size: .7rem; font-weight: 700; color: var(--texto-3); text-transform: uppercase; padding: .2rem 0; }
.calendario__dia { min-height: 84px; min-width: 0; padding: .35rem; border-radius: 12px; background: #FAFBFD; border: 1px solid #EEF2F7; overflow: hidden; }
.calendario__dia--fora { background: transparent; border-color: transparent; }
.calendario__dia--com { background: var(--branco); border-color: var(--borda); }
.calendario__numero { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--texto-2); padding: 0 .35rem; }
.calendario__dia--hoje .calendario__numero { background: var(--azul); color: #fff; border-radius: var(--pilula); }
.marca { display: block; margin-top: .22rem; padding: .1rem .45rem; border-radius: var(--pilula); font-size: .66rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--azul); }
.marca--prova { background: #C2410C; }
.marca--reuniao { background: var(--roxo); }
.marca--feriado { background: #0F766E; }
.marca--aula, .marca--outro { background: #64748B; }
.legenda { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: 1rem; font-size: .74rem; color: var(--texto-2); }
.legenda span { display: inline-flex; align-items: center; gap: .3rem; }
.marca-ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--azul); }
.marca-ponto.marca--prova { background: #C2410C; }
.marca-ponto.marca--reuniao { background: var(--roxo); }
.marca-ponto.marca--feriado { background: #0F766E; }
.marca-ponto.marca--aula, .marca-ponto.marca--outro { background: #64748B; }
.quadro { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 4px; font-size: .8rem; }
.quadro th { font-size: .72rem; color: var(--texto-2); padding: .4rem; font-weight: 700; }
.quadro__hoje { color: var(--azul) !important; }
.quadro__hora { white-space: nowrap; text-align: left; }
.quadro td { vertical-align: top; min-width: 110px; }
.aula { padding: .45rem .6rem; border-radius: 12px; background: var(--azul-suave); margin-bottom: 3px; }
.aula strong { display: block; color: var(--azul-2); font-size: .8rem; }
.aula span { display: block; font-size: .72rem; color: var(--texto-2); }
.aula em { display: inline-block; margin-top: .2rem; font-style: normal; font-size: .68rem; font-weight: 700; color: var(--ambar); }
.aula--ausente { background: var(--ambar-suave); }
.aula--ausente strong { color: var(--ambar); }

/* ---------------------------------------------------------------- frequência */
.chamada { list-style: none; margin: 0; padding: 0; }
.chamada__linha { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid #F0F3F8; flex-wrap: wrap; }
.chamada__aluno { display: flex; align-items: center; gap: .55rem; flex: 1 1 240px; cursor: pointer; font-size: .9rem; min-width: 0; }
.chamada__aluno input { position: absolute; opacity: 0; pointer-events: none; }
.chamada__marca { width: 64px; height: 28px; flex-shrink: 0; border-radius: var(--pilula); background: var(--verde-suave); position: relative; border: 1px solid #B7E3C6; }
.chamada__marca::after { content: "Veio"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--verde); }
.chamada__aluno:has(input:checked) .chamada__marca { background: var(--vermelho-vivo); border-color: var(--vermelho-vivo); }
.chamada__aluno:has(input:checked) .chamada__marca::after { content: "Faltou"; color: #fff; }
.chamada__aluno:has(input:focus-visible) .chamada__marca { outline: 3px solid rgba(31, 111, 235, .4); }
.chamada__just { flex: 1 1 200px; width: auto !important; padding: .38rem .9rem !important; font-size: .8rem !important; }

/* ---------------------------------------------------------------- pessoas, parcelas */
.cards-pessoa { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.cards-pessoa .cartao + .cartao { margin-top: 0; }
.pessoa-card--ausente { border-color: #F4D19B; }
.pessoa-card__rodape { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .78rem; }
.parcelas { list-style: none; margin: 0; padding: 0; }
.parcela { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid #F0F3F8; flex-wrap: wrap; }
.parcela:last-child { border-bottom: 0; }
.parcela > span:first-child { flex: 1 1 150px; display: flex; flex-direction: column; min-width: 0; }
.parcela small { color: var(--texto-3); }
.parcela__valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.logo-atual { display: flex; align-items: center; gap: 1rem; }
.logo-atual img { max-height: 64px; border-radius: 12px; border: 1px solid var(--borda); padding: 4px; background: #fff; }

/* ---------------------------------------------------------------- credenciais */
.credenciais { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.credencial { background: var(--branco); border: 2px dashed var(--borda-2); border-radius: var(--raio-g); padding: 1.2rem 1.35rem; }
.credencial header { display: flex; justify-content: space-between; gap: .5rem; padding-bottom: .6rem; margin-bottom: .8rem; border-bottom: 1px solid var(--borda); }
.credencial header span { font-size: .76rem; color: var(--texto-2); }
.credencial__nome { font-weight: 700; font-size: 1.05rem; }
.credencial__nome small { display: block; font-weight: 500; color: var(--texto-2); }
.credencial dl { margin: 0 0 .9rem; display: grid; gap: .5rem; }
.credencial dt { font-size: .72rem; color: var(--texto-3); font-weight: 600; }
.credencial dd { margin: 0; word-break: break-all; }
.credencial__valor { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 700; font-size: 1rem; }
.credencial__senha { display: inline-block; padding: .3rem .9rem; border-radius: var(--pilula); background: var(--azul-suave); color: var(--azul-2); font-size: 1.2rem; letter-spacing: .06em; }
.credencial footer { margin-top: .9rem; font-size: .74rem; color: var(--texto-2); }

/* ---------------------------------------------------------------- gráficos */
.grafico { position: relative; height: 270px; }
.grafico--baixo { height: 210px; }
.grafico canvas { max-width: 100%; }
.legenda-grafico { display: flex; align-items: center; gap: .4rem; margin: .6rem 0 0; font-size: .78rem; color: var(--texto-2); }
.ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: .5rem; }
.ponto--azul { background: var(--azul); }
.ponto--cinza { background: #94A3B8; }

/* ---------------------------------------------------------------- páginas públicas */
.corpo-publico { min-height: 100vh; }
.entrada { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.entrada__lado {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 2.4rem 3rem;
  color: #fff; background: radial-gradient(circle at 85% 15%, rgba(31, 111, 235, .45), transparent 45%), var(--navy);
}
.entrada__curso { display: flex; align-items: center; gap: .8rem; }
.entrada__curso strong { font-size: 1.1rem; }
.entrada__logo { width: 52px; height: 52px; border-radius: 16px; object-fit: cover; }
.entrada__logo--grande { width: 200px; height: 200px; border-radius: 28px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.entrada__texto h1 { font-size: 2.2rem; line-height: 1.15; max-width: 17ch; margin-bottom: 1.3rem; }
.entrada__texto ul { list-style: none; margin: 0; padding: 0; max-width: 46ch; }
.entrada__texto li { position: relative; padding: .45rem 0 .45rem 1.5rem; color: var(--navy-texto); }
.entrada__texto li::before { content: ""; position: absolute; left: 0; top: 1rem; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); }
.entrada__texto b { color: #fff; }
.entrada__stargex { font-size: .78rem; color: var(--navy-fraco); }
.entrada__stargex strong { color: #fff; }
.entrada__form { display: grid; place-items: center; padding: 2rem 1.4rem; }
.entrada__caixa { width: 100%; max-width: 390px; }
.entrada__caixa h2 { font-size: 1.6rem; font-weight: 800; }
.entrada__curso--celular, .entrada__stargex--celular { display: none; }
.entrada__ajuda { margin-top: 1.3rem; font-size: .82rem; color: var(--texto-2); }
.entrada__links { font-size: .82rem; }
.centro { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.caixa-centro { width: 100%; max-width: 440px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: 1.8rem; box-shadow: var(--sombra); }
.caixa-centro h1 { margin: .6rem 0 .5rem; font-size: 1.35rem; }
.caixa-centro--larga { max-width: 720px; }
.caixa-centro--erro { text-align: center; }
.centro__sair { text-align: center; margin-top: 1rem; }
.texto-longo h3 { margin-top: 1.1rem; }
.texto-longo p { color: var(--texto-2); font-size: .9rem; }
.erro__codigo { font-size: 4rem; font-weight: 800; color: var(--azul); line-height: 1; }

/* ---------------------------------------------------------------- responsivo */
@media (min-width: 901px) and (max-height: 780px) {
  .lateral__item { padding: .34rem .9rem; font-size: .85rem; }
  .lateral__grupo { margin: .55rem .85rem .15rem; }
  .lateral__marca { padding: .75rem 1.2rem .7rem; }
  .lateral__logo { width: 38px; height: 38px; }
  .lateral__rodape { padding: .5rem 1.3rem .55rem; }
}
@media (min-width: 901px) and (max-height: 730px) {
  .lateral__item { padding: .26rem .9rem; font-size: .82rem; }
  .lateral__item .icone { width: 16px; height: 16px; }
  .lateral__grupo { margin: .4rem .85rem .1rem; font-size: .6rem; }
  .lateral__marca { padding: .55rem 1.2rem .5rem; }
  /* (v137) Só o subtítulo (o papel, embaixo do nome). Antes era todo span da marca: em tela baixa (até 730 px de
     altura, como o notebook com zoom de 125%) sumiam a logo da empresa e o X/menu do botão de encolher. */
  .lateral__marca > div > span { display: none; }
}
@media (max-width: 1180px) {
  .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade--principal, .grade--lateral { grid-template-columns: minmax(0, 1fr); }
  .linha--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .escolhas--cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .app { background: var(--fundo); }
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--sombra-alta); }
  .menu-aberto .lateral { transform: none; }
  .menu-aberto .veu { display: block; position: fixed; inset: 0; background: rgba(15, 27, 45, .45); z-index: 35; }
  .lateral__fechar, .topo__menu { display: inline-grid; place-items: center; }
  .topo, .filhos { padding-left: 1rem; padding-right: 1rem; }
  .pagina { padding: 1.1rem 1rem 2.5rem; }
  .rodape { padding: 1rem; }
  .grade--duas, .linha--2, .linha--3, .metricas--tres { grid-template-columns: minmax(0, 1fr); }
  .campo--duplo { grid-column: auto; }
  .entrada { grid-template-columns: minmax(0, 1fr); }
  .entrada__lado { display: none; }
  .entrada__curso--celular { display: flex; margin-bottom: 1.6rem; }
  .entrada__stargex--celular { display: block; text-align: center; margin-top: 1.5rem; color: var(--texto-3); }
  .mensagem-conversa { max-width: 94%; }
}
@media (max-width: 560px) {
  h1 { font-size: 1.3rem; }
  .linha--4, .dados, .escolhas--cartoes, .metricas--tres { grid-template-columns: minmax(0, 1fr); }
  .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .metrica { padding: .8rem .85rem; border-radius: 18px; }
  .metrica__valor { font-size: 1.15rem; }
  .metrica__rotulo { font-size: .74rem; }
  .metrica__nota { font-size: .7rem; line-height: 1.35; }
  .cabecalho { align-items: stretch; }
  .cabecalho__acoes { width: 100%; }
  .cabecalho__acoes > .botao, .cabecalho__acoes > form, .cabecalho__acoes > select { flex: 1 1 auto; }
  .cabecalho__acoes > form .botao { width: 100%; }
  .conta__nome { display: none; }
  .topo__textos { flex: 1; }
  .topo__curso { white-space: normal; line-height: 1.2; font-size: .86rem; }
  .cartao { padding: 1rem; border-radius: 18px; }
  .card-prova__datas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendario__dia { min-height: 54px; padding: .2rem; }
  .marca { font-size: 0; height: 6px; padding: 0; margin-top: .25rem; }
  .filtros > .campo--inline { flex: 1 1 100%; }
  .filtros > .botao { flex: 1 1 100%; }
  .rodape-form > .botao { width: 100%; }
  .rodape-form--fixo { border-radius: 20px; }
  .navegador-mes strong { flex: 1; }
  .resultado { justify-content: center; }
  .credenciais { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- v2.1 */
.botao--zap { background: #1DA851; }
.botao--zap:hover { background: #168A42; }
.botao--zap .icone { width: 16px; height: 16px; }
.link--mini { font-size: .74rem; margin-top: .25rem; }
.link--discreto { color: var(--texto-2); font-weight: 500; }
.link-discreto { color: var(--texto); }
.link-discreto:hover { color: var(--azul); text-decoration: underline; }
.formulario--estreito { max-width: 820px; }
.abas--sem-margem { margin: 0; }

.resumo-cat { border: 1px solid var(--borda); border-radius: var(--raio); padding: .8rem .9rem; min-width: 0; }
.resumo-cat__topo { display: flex; justify-content: space-between; align-items: center; font-weight: 700; padding-bottom: .55rem; margin-bottom: .3rem; border-bottom: 1px solid var(--borda); }
.resumo-cat__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .8rem; padding: .5rem .55rem; margin: 0 -.55rem; border-radius: 12px; color: var(--texto); }
.resumo-cat__linha:hover { background: var(--fundo); color: var(--texto); }
.resumo-cat__linha.ativa { background: var(--azul-suave); }
.resumo-cat__nome { font-size: .88rem; font-weight: 600; min-width: 0; }
.resumo-cat__nome small { display: block; font-weight: 400; color: var(--texto-3); font-size: .74rem; }
.resumo-cat__valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.resumo-cat__linha .barra { grid-column: 1 / -1; height: 5px; }
.barra__cheio--entrada { background: var(--verde-vivo); }
.barra__cheio--saida { background: var(--vermelho-vivo); }

.simulador { display: grid; grid-template-columns: minmax(340px, 430px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.simulador__form { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.simulador__resultado { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.simulador__resultado .metricas { margin: 0; }
.simulador__resultado .cartao + .cartao { margin-top: 0; }
.simulador__acao { position: sticky; bottom: .8rem; z-index: 5; }
.simulador__acao .botao { box-shadow: var(--sombra-alta); }
.metricas--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.etapa { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: 1rem 1.1rem; box-shadow: var(--sombra); }
.etapa__topo { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.etapa__topo h2 { margin: 0; font-size: 1rem; }
.etapa__numero { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: .78rem; font-weight: 700; flex-shrink: 0; }
.etapa__sub { margin: 1rem 0 .5rem; font-size: .82rem; color: var(--texto-2); text-transform: uppercase; letter-spacing: .05em; }
.etapa .dica { margin: 0 0 .6rem; }
.escolhas--bloco { margin-bottom: .8rem; }
.escolha--desligada { opacity: .45; cursor: not-allowed; }
.lista-sim { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .5rem; }
.lista-sim__linha { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid #F0F3F8; }
.lista-sim__linha:last-child { border-bottom: 0; }
.lista-sim__linha > input:not(.entrada-dinheiro) { flex: 1; min-width: 0; }
.lista-sim__nome { flex: 1; min-width: 0; font-size: .86rem; }
.lista-sim__nome strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-sim__nome small { color: var(--texto-3); font-size: .74rem; }
.entrada-dinheiro { width: 118px !important; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; }
.entrada-curta-num { width: 82px !important; text-align: center; }
.marcador--mini { margin: 0; font-size: .78rem; white-space: nowrap; align-items: center; }
/* Na célula da tabela, a caixinha vira bloco: fica no meio da linha, como os campos do lado. */
.tabela td > .marcador--mini { display: flex; }
.frase { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; font-size: .88rem; }
.tabela--sim td { padding: .5rem .7rem; }
.linha-mudou td { background: #FBFCFF; }
.dobra--perigo { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--borda-2); }
.dobra--perigo summary { color: var(--vermelho); }
.reajuste { margin-top: .6rem; }

.envio-imagem { position: relative; display: grid; place-items: center; min-height: 220px; border: 2px dashed var(--borda-2); border-radius: var(--raio-g); background: var(--fundo); cursor: pointer; overflow: hidden; margin-bottom: .8rem; }
.envio-imagem:hover { border-color: var(--azul); }
.envio-imagem input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.envio-imagem__vazio { display: flex; flex-direction: column; align-items: center; gap: .25rem; color: var(--texto-2); text-align: center; padding: 1rem; }
.envio-imagem__vazio .icone { width: 36px; height: 36px; color: var(--azul); }
.envio-imagem__vazio small { color: var(--texto-3); }
.envio-imagem__previa { width: 100%; max-height: 360px; object-fit: contain; background: #fff; }

.anexo-ou-link { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .8rem; align-items: center; }
.anexo-ou-link__ou { font-size: .78rem; font-weight: 700; color: var(--texto-3); text-transform: uppercase; }
.arquivo-linha__icone--link { background: var(--azul-suave); color: var(--azul-2); font-size: .58rem; }

@media (max-width: 1180px) {
  .simulador { grid-template-columns: minmax(0, 1fr); }
  .simulador__resultado { position: static; }
}
@media (max-width: 560px) {
  .metricas--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anexo-ou-link { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .anexo-ou-link__ou { text-align: center; margin-bottom: .6rem; }
  .entrada-dinheiro { width: 104px !important; }
  .lista-sim__linha { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print {
  .lateral, .topo, .filhos, .rodape, .nao-imprimir, .mensagens, .veu { display: none !important; }
  .app { background: #fff; }
  body { background: #fff; }
  .pagina { padding: 0; max-width: none; }
  .credencial { break-inside: avoid; }
  .cartao { box-shadow: none; }
}
.w-0 { width: 0%; }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }
/* Inscrição pública e cartaz com QR Code (versão 2.2) */
.oculto-visual { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.quebra { word-break: break-all; }
.inscricao-divulgar { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; align-items: center; margin-bottom: 1rem; }
.inscricao-divulgar h2 { margin: 0 0 .4rem; }
.inscricao-divulgar .acoes-linha { justify-content: flex-start; margin: .8rem 0; }
.inscricao-previa { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 8px 24px rgba(16,33,63,.15); display: block; }
@media (max-width: 760px) { .inscricao-divulgar { grid-template-columns: 1fr; } .inscricao-previa { max-width: 260px; } }

/* "Ver site" e "Copiar link" no topo da gestão */
.ver-site{display:flex;gap:8px;margin-left:auto;margin-right:10px}
.ver-site .botao{border-radius:999px;white-space:nowrap}
@media (max-width:760px){.ver-site{display:none}}
.ver-site + .conta{margin-left:0}

/* ---- Alinhamentos (revisão) ---- */
/* Cartões lado a lado numa grade começam na mesma altura. */
.grade > .cartao + .cartao, .grade > * + .cartao { margin-top: 0; }
/* Logo atual alinhada com o campo do arquivo (o campo tem rótulo em cima). */
.logo-atual { align-self: end; min-height: 46px; }
.logo-atual img { height: 46px; max-height: 46px; width: auto; padding: 3px; }
.ajuda-campo { display: block; margin-top: .3rem; font-size: .76rem; color: var(--texto-3); }
/* Disciplinas e provas: colunas fixas, todas as linhas do mesmo tamanho. */
#disciplinas .linha-form { display: grid; grid-template-columns: minmax(0, 1fr) 130px 84px; align-items: center; }
#disciplinas .linha-form--nova { grid-template-columns: minmax(0, 1fr) 84px; }
#provas .linha-form { display: grid; grid-template-columns: 96px minmax(0, 1fr) 130px 84px; align-items: center; }
#provas .linha-form--nova { grid-template-columns: 96px minmax(0, 1fr) 84px; }
#disciplinas .linha-form > *, #provas .linha-form > * { width: 100%; min-width: 0; box-sizing: border-box; }
#disciplinas .linha-form > .botao, #provas .linha-form > .botao { justify-content: center; }
@media (max-width: 700px) {
  #provas .linha-form { grid-template-columns: 80px minmax(0, 1fr); }
  #provas .linha-form > select, #provas .linha-form > .botao { grid-column: span 1; }
  #disciplinas .linha-form { grid-template-columns: minmax(0, 1fr) 110px; }
  #disciplinas .linha-form > .botao { grid-column: 1 / -1; }
}
.grade--duas:has(#provas) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
#disciplinas .linha-form { grid-template-columns: minmax(0, 1fr) 112px 76px; }
#disciplinas .linha-form--nova { grid-template-columns: minmax(0, 1fr) 76px; }
#provas .linha-form { grid-template-columns: 84px minmax(0, 1fr) 112px 76px; }
#provas .linha-form--nova { grid-template-columns: 84px minmax(0, 1fr) 76px; }
@media (max-width: 1100px) { .grade--duas:has(#provas) { grid-template-columns: minmax(0, 1fr); } }
#provas .linha-form { grid-template-columns: 100px minmax(0, 1fr) 108px 76px; }
#provas .linha-form--nova { grid-template-columns: 100px minmax(0, 1fr) 76px; }

/* ---------------------------------------- simulador em etapas */
.passos-sim { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.passos-sim li { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .55rem; padding: .7rem 1rem;
  border: 1.5px solid var(--borda); border-radius: var(--pilula); background: var(--branco); color: var(--texto-2, #64748B); font-weight: 600; }
.passos-sim li span { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--fundo); font-weight: 800; }
.passos-sim li small { flex-basis: 100%; padding-left: 2.25rem; font-weight: 500; font-size: .78rem; line-height: 1.2; }
.passos-sim li.atual { border-color: var(--azul); color: var(--azul); box-shadow: 0 0 0 4px var(--azul-suave); }
.passos-sim li.atual span { background: var(--azul); color: #fff; }
.passos-sim li.feito { border-color: var(--verde-suave); color: var(--verde); }
.passos-sim li.feito span { background: var(--verde); color: #fff; }
@media (max-width: 720px) { .passos-sim { grid-template-columns: 1fr; } }
.opcoes-partida { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; margin: .8rem 0 1rem; }
.opcao-partida { position: relative; cursor: pointer; }
.opcao-partida input[type="radio"] { position: absolute; opacity: 0; }
.opcao-partida > span { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1rem 1.1rem;
  border: 2px solid var(--borda); border-radius: var(--raio-g); background: var(--branco); }
.opcao-partida b { font-size: 1.02rem; }
.opcao-partida small { color: var(--texto-2, #64748B); line-height: 1.4; }
.opcao-partida select { margin-top: .3rem; border-radius: var(--pilula); padding: .45rem .8rem; border: 1.5px solid var(--borda); }
.opcao-partida input:checked + span { border-color: var(--azul); box-shadow: 0 0 0 4px var(--azul-suave); }
.opcao-partida input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.opcao-partida--desligada { opacity: .55; cursor: not-allowed; }
.linha--apagada td { opacity: .6; }
.acoes--linha { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.acoes--linha form { margin: 0; }

/* ---------------------------------------- Configurações → Site do curso */
.grade-site { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.2rem; align-items: start; }
@media (max-width: 820px) { .grade-site { grid-template-columns: 1fr; } }
.vaga-imagem { display: flex; flex-direction: column; gap: .5rem; }
.vaga-imagem__rotulo { font-weight: 700; }
.vaga-imagem__rotulo small { font-weight: 500; color: var(--texto-2, #64748B); margin-left: .3rem; }
.vaga-imagem img, .vaga-imagem__vazia { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--raio-g);
  border: 1px solid var(--borda); background: var(--fundo); }
.vaga-imagem__vazia { display: grid; place-items: center; color: var(--texto-2, #64748B); font-weight: 800; }
.vaga-imagem--logo img, .vaga-imagem--logo .vaga-imagem__vazia { width: 140px; aspect-ratio: 1; object-fit: contain; padding: .5rem; }
.vaga-imagem--curso img, .vaga-imagem--curso .vaga-imagem__vazia { aspect-ratio: 4 / 3; object-fit: contain; padding: .6rem; }
.vaga-imagem input[type="file"] { font-size: .85rem; }
.grade-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.cores-site { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.cor-site { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .4rem; border: 2px solid var(--borda);
  border-radius: var(--pilula); cursor: pointer; font-weight: 600; font-size: .9rem; }
.cor-site input { position: absolute; opacity: 0; }
.cor-site:has(input:checked) { border-color: var(--texto, #0F172A); }
.cor-site__amostra { width: 1.4rem; height: 1.4rem; border-radius: 50%; }
.cor-site__amostra--1 { background: #1F6FEB; } .cor-site__amostra--2 { background: #0F766E; }
.cor-site__amostra--3 { background: #15803D; } .cor-site__amostra--4 { background: #7C3AED; }
.cor-site__amostra--5 { background: #BE123C; } .cor-site__amostra--6 { background: #C2410C; }
.cor-site__amostra--7 { background: #1E293B; }
.virada-turma { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 1rem; align-items: end; }
.virada-turma h2 small { font-weight: 500; font-size: .85rem; color: var(--texto-2, #64748B); margin-left: .4rem; }
@media (max-width: 720px) { .virada-turma { grid-template-columns: 1fr; } }
.virada-alunos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .35rem .9rem; }
.cartao--alerta { border: 2px solid var(--ambar-suave); }

/* ---------------------------------------- simulador: lote e ajudas */
.folha-lote { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.frase--lote { flex-wrap: wrap; gap: .4rem .5rem; }
.frase--lote select, .frase--lote input { margin: 0 .15rem; }
/* Explicação em opaco: aparece depois de 3 segundos com o mouse parado. */
[data-ajuda] { position: relative; }
[data-ajuda]::after {
  content: attr(data-ajuda); position: absolute; left: 0; top: calc(100% + 8px); z-index: 30;
  width: max-content; max-width: 320px; padding: .6rem .8rem; border-radius: 14px;
  background: rgba(15, 23, 42, .93); color: #fff; font-size: .82rem; font-weight: 500; line-height: 1.35;
  opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; transition-delay: 0s;
  pointer-events: none; white-space: normal; text-align: left;
}
[data-ajuda]:hover::after, [data-ajuda]:focus-visible::after { opacity: 1; visibility: visible; transition-delay: 3s; }
.lote { border: 1.5px solid var(--borda); border-radius: var(--raio); padding: .7rem .9rem 1rem; margin: 0 0 1rem; }
.lote legend { font-size: .82rem; font-weight: 700; color: var(--texto-2, #64748B); padding: 0 .4rem; }
.lote__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; }
.lote__campos label { font-size: .78rem; }
.voltar-topo { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .8rem; padding: .45rem 1rem .45rem .7rem;
  border: 1.5px solid var(--borda); border-radius: var(--pilula); background: var(--branco); color: var(--texto-2, #475569);
  text-decoration: none; font-weight: 700; font-size: .88rem; }
.voltar-topo:hover { border-color: var(--azul); color: var(--azul); }
.voltar-topo svg { width: 1rem; height: 1rem; }
.passos-texto { margin: .4rem 0 .6rem 1.1rem; padding: 0; display: grid; gap: .4rem; }
.passos-texto code, .copiavel { background: var(--fundo); padding: .15rem .5rem; border-radius: 8px;
  font-family: ui-monospace, Menlo, monospace; font-size: .86rem; user-select: all; word-break: break-all; }
.lista-simples { margin: .4rem 0 0 1.1rem; padding: 0; display: grid; gap: .35rem; }
.pagamento-info { padding: .5rem 0; } .pagamento-info small { display: block; color: var(--texto-2, #64748B); }
.parcela__pagar { display: flex; flex-wrap: wrap; gap: .4rem; }
.parcela__pagar form { margin: 0; }
.ok-forte { color: var(--verde); font-weight: 600; }

/* ------------------------------------------------ alinhamento (v65)
   Lista de escolha com texto comprido termina em "…" (antes cortava no meio
   da palavra); dentro de tabela ela nunca fica menor que o próprio texto
   ("Cont" no lugar de "Contatada", "Manh" no lugar de "Manhã"). */
select { text-overflow: ellipsis; }
.tabela td select { min-width: max-content; }
/* Botão com cara de link ("Desfazer pagamento") alinha como texto, à
   esquerda — centralizado, ele descia torto embaixo do "Editar". */
.link { text-align: left; }
.tabela td .link { white-space: nowrap; }
/* Dinheiro não quebra linha ("R$" numa linha e o valor na outra). */
.tabela .num { white-space: nowrap; }
/* Célula de ações continua célula de tabela: com flex na <td> o botão saía
   do meio da linha e ficava mais alto que o texto do lado. */
td.acoes-linha { display: table-cell; text-align: right; white-space: nowrap; }
td.acoes-linha > * + * { margin-left: .4rem; }
td.acoes-linha > form { display: inline-block; }
/* Tabela de edição (turmas): no celular os campos encolhiam até sumir o
   texto ("EN", "Manh"). Agora cada um tem largura mínima e a tabela rola. */
.tabela--edicao input[name=nome] { min-width: 11rem; }
.tabela--edicao input[name=ano_letivo] { min-width: 5.5rem; }
.tabela--edicao input[name=modalidade] { min-width: 9rem; }
.tabela--edicao input[name=valor_mensalidade_base] { min-width: 7rem; }
/* Caixa: "Editar" e "Receber"/"Desfazer pagamento" lado a lado, no meio da
   linha (um embaixo do outro, o botão ficava abaixo do texto das outras colunas). */
.acoes-caixa { white-space: nowrap; }
.acoes-caixa > form, .acoes-caixa > details { display: inline-block; vertical-align: middle; margin-left: .7rem; }

/* ------------------------------------------------ boletim escolar (v2.2)
   Modo escola: escala de notas, etapas, distribuição de pontos e boletim. */
.escolhas--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bloco-escala, .bloco-divisao { margin-top: 1rem; }
.linha-aprovacao { margin-top: .1rem; }
.tabela--conceitos input[name=conceito_letra] { max-width: 7rem; text-transform: uppercase; }
.tabela--conceitos input[name=conceito_minimo_pct] { max-width: 8rem; }
.tabela--etapas input[name^=etapa_nome] { min-width: 10rem; }
.tabela--etapas input[type=date], .tabela--distribuicao input[type=date] { min-width: 9.5rem; }
.tabela--distribuicao input[name$=_nome], .tabela--distribuicao input[name=novo_nome] { min-width: 12rem; }
.tabela--boletim th small, .tabela--boletim-notas th small, .tabela--boletim td small {
  display: block; font-size: .68rem; font-weight: 600; color: var(--texto-3); text-transform: none; letter-spacing: 0;
}
.tabela--boletim td.num, .tabela--boletim th.num { min-width: 5.5rem; }
.tabela--boletim-turma td.num, .tabela--boletim-turma th.num { min-width: 4.8rem; }
.boletim-falta { display: block; font-size: .72rem; color: var(--texto-3); margin-top: .15rem; }
.entrada-nota--erro { border-color: var(--vermelho-vivo) !important; background: var(--vermelho-suave) !important; }
.entrada-conceito { width: 80px !important; padding-right: 1.7rem !important; background-position: right .5rem center !important; }
.acoes-linha-form { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; }
.uma-nota { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--borda); }
.uma-nota .dica { margin: 0; }
@media (max-width: 760px) {
  .escolhas--duas { grid-template-columns: 1fr; }
}
.escolha:has(input:disabled) { opacity: .55; cursor: not-allowed; }
/* Ano letivo no cabeçalho, ao lado dos botões: mesma altura e mesma linha. */
.form-ano { display: flex; gap: .5rem; }
.form-ano select { width: auto; min-width: 10.5rem; }
.cabecalho__acoes:has(select) > .botao, .cabecalho__acoes:has(select) > form > .botao { height: calc(1.215rem + 1.2rem + 2px); }
/* Três métricas em duas colunas: a terceira ocupa a linha toda (sozinha pela metade ficava torta). */
@media (max-width: 1180px) {
  .metricas--tres > .metrica:nth-child(3):last-child { grid-column: 1 / -1; }
}
/* Boletim no celular: um cartão por disciplina, em vez da tabela que rola de lado. */
.boletim-cartoes { display: none; }
.boletim-cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: 18px; padding: .9rem .95rem; box-shadow: var(--sombra); }
.boletim-cartao__topo { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.boletim-cartao__topo strong { font-size: .95rem; min-width: 0; }
.boletim-cartao__etapas { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.3rem, 1fr)); gap: .4rem; margin: 0; }
.boletim-cartao__etapas > div { background: var(--fundo); border-radius: 14px; padding: .45rem .55rem .5rem; min-width: 0; }
.boletim-cartao__etapas dt { font-size: .68rem; font-weight: 700; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boletim-cartao__etapas dd { margin: .05rem 0 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.25; }
.boletim-cartao__etapas dd small { display: block; font-size: .64rem; font-weight: 600; letter-spacing: 0; color: var(--texto-3); line-height: 1.3; }
.boletim-cartao__final { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: .7rem; padding-top: .65rem; border-top: 1px solid var(--borda); font-size: .84rem; color: var(--texto-2); }
.boletim-cartao__final strong { font-size: 1.02rem; color: var(--texto); }
.boletim-cartao__final .boletim-falta { margin: 0; }
@media (max-width: 640px) {
  .boletim-tabela { display: none; }
  .boletim-cartoes { display: grid; gap: .7rem; }
  .form-ano select { width: 100%; min-width: 0; }
}
@media print {
  .tabela--boletim { font-size: .82rem; }
  .metricas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metricas--tres > .metrica:nth-child(3):last-child { grid-column: auto; }
  .boletim-tabela { display: block !important; }
  .boletim-cartoes { display: none !important; }
}

/* v100: a logo do negócio de quem vê a demonstração (acesso com logo): inteira,
   num quadro branco, em vez de cortada como o ícone. */
.lateral__logo.lateral__logo--demo { object-fit: contain; background: #fff; padding: 4px; }

/* ==========================================================================
   Barra de vidro (v107) — o mesmo desenho aprovado para os painéis Stargex:
   a barra flutua como uma ilha de vidro claro (com manchas de cor desfocadas
   atrás), o item da tela atual em pílula azul-marinho e, no computador, o
   botão que encolhe a barra num trilho de ícones (o nome aparece num balão
   ao lado). No celular, a gaveta é a mesma ilha.
   ========================================================================== */
.app { background: var(--fundo); }
body:has(.app > .lateral)::before {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  left: -140px; top: -60px; width: 430px; height: calc(100vh + 120px); filter: blur(36px);
  -webkit-mask-image: linear-gradient(to right, #000 62%, transparent); mask-image: linear-gradient(to right, #000 62%, transparent);
  background:
    radial-gradient(240px 240px at 150px 150px, rgba(122, 167, 255, .70), transparent 70%),
    radial-gradient(240px 300px at 255px 52%, rgba(182, 156, 255, .55), transparent 70%),
    radial-gradient(220px 220px at 170px 88%, rgba(127, 224, 208, .55), transparent 70%);
}
body:has(.app > .lateral.encolhida)::before { width: 250px; }
.lateral {
  background: linear-gradient(165deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .6) 100%);
  color: #12294A; border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 26px 54px -16px rgba(18, 41, 74, .32), 0 0 0 1px rgba(18, 41, 74, .06), inset 0 1px 0 #fff;
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
}
@media (min-width: 901px) {
  .lateral { width: 260px; top: 14px; height: calc(100vh - 28px); margin: 14px 0 14px 14px; border-radius: 26px; overflow: hidden; }
  .lateral.encolhida { width: 76px; }
}
.lateral__marca { border-bottom: 0; padding: 1rem .9rem .5rem 1rem; }
.lateral__marca strong { color: #12294A; }
.lateral__marca span { color: rgba(18, 41, 74, .55); }
.lateral__logo { box-shadow: 0 0 0 1px rgba(18, 41, 74, .08); }
.lateral__fechar { color: #12294A; }
.lateral__encolher {
  margin-left: auto; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 12px; cursor: pointer; padding: 0;
  display: grid; place-items: center; background: rgba(255, 255, 255, .75); border: 1px solid rgba(18, 41, 74, .12); color: #12294A;
}
.lateral__encolher:hover { background: #fff; }
.lateral__encolher .lateral__encolher-menu { display: none; }
.lateral.encolhida .lateral__encolher .lateral__encolher-menu { display: inline; }
.lateral.encolhida .lateral__encolher .lateral__encolher-x { display: none; }
.lateral__encolher .icone { width: 18px; height: 18px; display: block; }
.lateral__menu { scrollbar-color: rgba(18, 41, 74, .18) transparent; padding: .4rem .75rem .6rem; }
.lateral__grupo { text-transform: none; letter-spacing: 0; font-size: .74rem; font-weight: 600; color: rgba(18, 41, 74, .5); }
.lateral__item { color: #33435C; border-radius: 14px; border: 1px solid transparent; }
.lateral__item:hover { background: rgba(18, 41, 74, .06); color: #12294A; }
.lateral__item.ativo, .lateral__item.ativo:hover {
  background: linear-gradient(160deg, #1D3A63, #12294A); color: #fff; box-shadow: 0 8px 18px -8px rgba(18, 41, 74, .6);
}
.lateral__contador { box-shadow: 0 0 0 2px #fff; }
.lateral__rodape { border-top: 0; color: rgba(18, 41, 74, .45); }

/* Encolhida: um trilho de ícones. */
.lateral.encolhida .lateral__marca { justify-content: center; padding: 1rem 0 .5rem; }
.lateral.encolhida .lateral__marca > img, .lateral.encolhida .lateral__marca > .lateral__sigla,
.lateral.encolhida .lateral__marca > div { display: none; }
.lateral.encolhida .lateral__encolher { margin: 0; }
.lateral.encolhida .lateral__menu { padding: .5rem 0; display: flex; flex-direction: column; align-items: center; scrollbar-width: none; }
.lateral.encolhida .lateral__menu::-webkit-scrollbar { display: none; }
.lateral.encolhida .lateral__grupo { display: none; }
.lateral.encolhida .lateral__item { width: 48px; height: 48px; flex: 0 0 48px; padding: 0; gap: 0; justify-content: center; position: relative; }
.lateral.encolhida .lateral__item > span { display: none; }
.lateral.encolhida .lateral__contador {
  position: absolute; top: 4px; left: calc(50% + 4px); margin: 0; min-width: 16px; padding: 0 4px; font-size: .62rem; line-height: 16px;
}
.lateral.encolhida .lateral__rodape { display: none; }
.balao-lateral {
  position: fixed; z-index: 80; transform: translateY(-50%); pointer-events: none; white-space: nowrap;
  background: rgba(255, 255, 255, .94); color: #12294A; border: 1px solid rgba(18, 41, 74, .12); border-radius: 12px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 30px -10px rgba(18, 41, 74, .35);
  padding: 8px 14px; font-size: .8rem; font-weight: 600;
}

@media (max-width: 900px) {
  .lateral { top: 10px; bottom: 10px; left: 10px; height: auto; width: min(84vw, 320px); border-radius: 26px; transform: translateX(-110%); }
  .lateral.encolhida { width: min(84vw, 320px); }
  .lateral__encolher { display: none; }
  .menu-aberto .veu { background: rgba(15, 27, 45, .28); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
  body:has(.app > .lateral)::before { opacity: 0; transition: opacity .2s; }
  body.menu-aberto:has(.app > .lateral)::before { opacity: 1; z-index: 36; }
}

/* (v137) O botão do modo escuro, como no painel das lojas: lua no claro, sol no escuro (static/js/tema.js; as cores do
   escuro em tema-escuro.css, gerado por ferramentas/gerar_tema_escuro.py). Na oficina fica no pé do menu, do lado do
   Sair; na escola e na imobiliária, no topo, do lado da conta. */
.icone-sol { display: none; }
.lateral__tema {
  width: 36px; height: 36px; flex: none; border-radius: 12px; border: 0; background: transparent; color: #12294A;
  cursor: pointer; display: grid; place-items: center; padding: 0;
}
.lateral__tema:hover { background: rgba(18, 41, 74, .06); }
.topo__tema {
  margin-left: auto; width: 38px; height: 38px; flex: none; border-radius: var(--pilula); border: 1px solid var(--borda);
  background: var(--branco); color: var(--texto); cursor: pointer; display: grid; place-items: center; padding: 0;
}
.topo__tema:hover { border-color: var(--borda-2); }
.ver-site + .topo__tema, .topo__tema + .conta { margin-left: 0; }
.lateral__tema:focus-visible, .topo__tema:focus-visible { outline: 3px solid var(--azul); outline-offset: 1px; }
.lateral__tema .icone, .topo__tema .icone { width: 18px; height: 18px; }

/* ==========================================================================
   (v189) Celular: a barra de baixo (templates/_barra_celular.html), como no painel das lojas e nos apps. Quatro telas
   do menu de quem está usando e o "Mais", que abre o menu inteiro (a mesma gaveta); o ☰ do topo sai. No topo, o Ver
   site e o Copiar link ficam como ícones (antes sumiam no celular).
   ========================================================================== */
.barra-baixo { display: none; }
.ver-site .icone { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .barra-baixo {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 32; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--branco); border-top: 1px solid var(--borda); box-shadow: 0 -4px 18px rgba(18, 41, 74, .08);
  }
  .barra-baixo a, .barra-baixo button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; padding: 6px 2px; border: 0; border-radius: 14px; background: none; color: var(--texto-2);
    font: inherit; font-size: .7rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .barra-baixo span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-baixo .icone { width: 24px; height: 24px; padding: 3px 14px; box-sizing: content-box; border-radius: 999px; transition: background .15s ease; }
  .barra-baixo .ativo { color: var(--azul); font-weight: 800; }
  .barra-baixo .ativo .icone { background: var(--azul-suave); }
  .barra-baixo a:active .icone, .barra-baixo button:active .icone { transform: scale(.94); }
  .barra-baixo a:focus-visible, .barra-baixo button:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
  .barra-baixo__conta {
    position: absolute; top: 1px; left: calc(50% + 9px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--vermelho-vivo); color: #fff; font-size: .66rem; font-style: normal; font-weight: 800; line-height: 18px;
    text-align: center; box-shadow: 0 0 0 2px var(--branco);
  }
  .barra-baixo__ponto {
    position: absolute; top: 6px; left: calc(50% + 10px); width: 9px; height: 9px; border-radius: 50%;
    background: var(--vermelho-vivo); border: 2px solid var(--branco);
  }
  /* O "Mais" faz o papel do ☰; a gaveta e o véu ficam por cima da barra. */
  .com-barra-baixo .topo__menu { display: none; }
  .com-barra-baixo .rodape { padding-bottom: calc(1rem + 70px + env(safe-area-inset-bottom)); }
  .com-barra-baixo .rodape-form--fixo { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .com-barra-baixo .simulador__acao { bottom: calc(.8rem + 70px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  /* Ver site e Copiar link: só o ícone, como no topo do painel das lojas. */
  .ver-site { display: flex; gap: 6px; margin-right: 4px; }
  .ver-site .botao { width: 38px; height: 38px; padding: 0; justify-content: center; gap: 0; }
  .ver-site .botao .icone { width: 18px; height: 18px; }
  .ver-site__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media print { .barra-baixo { display: none !important; } }
/* (v189) O ícone do Ver site e do Copiar link: no computador fica o texto de sempre (na imobiliária, os dois). */
.ver-site__icone { display: none; }
.ver-site .botao { position: relative; }
.ver-site .botao.copiado { background: var(--verde-suave); color: var(--verde); border-color: var(--verde-suave); }
@media (max-width: 760px) {
  .ver-site__icone { display: inline-flex; }
  .ver-site .botao.copiado .ver-site__rotulo {
    top: calc(100% + 6px); right: 0; width: auto; height: auto; clip: auto; overflow: visible; z-index: 2;
    padding: 4px 10px; border-radius: 999px; background: var(--texto); color: var(--branco); font-size: .75rem; font-weight: 600;
  }
}
@media (max-width: 900px) {
  /* (v189) A faixa da demonstração (presa no alto, por cima de tudo) tampava o começo do menu aberto: com o menu
     aberto, ela fica atrás do véu, como o resto da tela. */
  .menu-aberto .demo-barra { z-index: 34; }
}

/* (v246) A mensalidade com a Stargex vencendo (âmbar) ou vencida (vermelha), na linha fina do topo, para quem cuida
   do plano (a mesma faixa do painel das lojas; o Star Negócios responde por PLANO_AVISO). */
.aviso-plano { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 1rem; padding: .5rem .55rem .5rem 1rem;
  border: 1px solid #F1D29A; border-radius: var(--pilula); background: var(--ambar-suave); color: #5A3B00; font-size: .86rem; }
.aviso-plano[hidden] { display: none; }
.aviso-plano svg { flex: none; color: var(--ambar); }
.aviso-plano span { flex: 1 1 auto; min-width: 0; }
.aviso-plano a { flex: none; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.aviso-plano--vencido { border-color: #F2B8B5; background: var(--vermelho-suave); color: #6B1712; }
.aviso-plano--vencido svg { color: var(--vermelho-vivo); }
.aviso-plano__fechar { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0;
  border-radius: 50%; background: transparent; color: inherit; opacity: .6; cursor: pointer; }
.aviso-plano__fechar:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
@media (max-width: 640px) {
  .aviso-plano { border-radius: 18px; align-items: flex-start; }
  .aviso-plano span { flex-basis: calc(100% - 70px); }
  .aviso-plano a { order: 3; margin-left: 27px; }
}

/* (v251) No celular (e em tela de toque), o texto dos campos em 16 px: abaixo disso, o iPhone aumenta a página ao tocar
   no campo, e ela continua aumentada depois. Vale para todos os campos de texto, as listas de escolha e as caixas de
   texto (as regras com classe põem tamanhos menores: por isso o !important só aqui). */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]),
  select, textarea { font-size: 16px !important; }
}