/* Secretaria Da Vinci — estilos (lote 6). Colores del padrón del colegio (PATRON_PANTALLAS.md §1).
   Regla de color por bloque (§2): una página dentro de un bloque lleva la clase cor-laranja / cor-marinho / cor-lima y
   TODO lo suyo (franja, cabeceras de caja, pestaña activa) sale de --bloco*. Tipografía: Source Serif 4 / Source Sans 3
   servidas por el propio servidor (fuentes/, licencia SIL OFL 1.1 junto a ellas); sin CDN. */
@font-face { font-family: "Source Sans 3"; src: url("/web/fuentes/SourceSans3VF-Upright.otf.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/web/fuentes/SourceSerif4-Semibold.ttf.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
:root {
  --marinho: #1F2A44; --laranja: #FF9059; --lima: #DCE60C; --oliva: #A9B000;
  --laranja-suave: #FFF0E8; --lima-suave: #F8FAD9; --oliva-suave: #F1F3CF;
  --fundo: #F3F5F9; --moldura: #E8EBF2; --superficie: #FFFFFF;
  --texto: #1F2A44; --texto-2: #5B6478; --linhas: #C9CFDB;
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bloco: var(--marinho); --bloco-texto: #FFFFFF; --bloco-suave: var(--superficie);
  --largura-menu: 248px; --largura-coluna: 320px; --altura-barra: 80px;
}
.cor-laranja { --bloco: var(--laranja); --bloco-texto: var(--marinho); --bloco-suave: var(--laranja-suave); }
.cor-marinho { --bloco: var(--marinho); --bloco-texto: #FFFFFF; --bloco-suave: var(--superficie); }
.cor-lima    { --bloco: var(--lima);    --bloco-texto: var(--marinho); --bloco-suave: var(--lima-suave); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fundo); color: var(--texto); font: 15px/1.4 var(--sans); }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--serif); margin: 0; font-weight: 600; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }

/* ── botones ── */
.botao-lima { background: var(--lima); color: var(--marinho); border: 0; border-radius: 8px; padding: 8px 16px; font-weight: 600; }
/* botón de acción dentro de un bloque: el color del bloque (regla por bloque); el lima, solo «Confirmar» */
.botao-bloco { background: var(--bloco); color: var(--bloco-texto); border: 0; border-radius: 8px; padding: 8px 16px; font-weight: 600; }
.botao-contorno { background: var(--superficie); color: var(--marinho); border: 2px solid var(--marinho); border-radius: 8px; padding: 6px 14px; font-weight: 600; }
.botao-barra { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; padding: 8px 12px; white-space: nowrap; }

/* ── entrada ── */
.entrada { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.entrada-caixa { background: var(--superficie); border: 2px solid var(--marinho); border-radius: 12px; padding: 28px; width: min(380px, 100%);
  display: grid; gap: 14px; }
.entrada-caixa h1 { font-size: 24px; }
.entrada-caixa label { display: grid; gap: 4px; color: var(--texto-2); }
.entrada-caixa input { font: inherit; padding: 10px; border: 1px solid var(--linhas); border-radius: 8px; color: var(--texto); }
.erro { color: #A3341A; background: var(--laranja-suave); padding: 8px 10px; border-radius: 8px; margin: 0; }

/* ── estructura común: barra superior + menú lateral + contenido (una sola pantalla, sin desplazamiento) ── */
.app { height: 100vh; display: grid; grid-template-columns: var(--largura-menu) 1fr; grid-template-rows: var(--altura-barra) 1fr; }
.barra-superior { grid-column: 1 / -1; background: var(--marinho); color: #fff; display: flex; align-items: center; gap: 16px; padding: 0 16px; }
.marca { font-family: var(--serif); font-size: 20px; text-decoration: none; color: #fff; width: calc(var(--largura-menu) - 32px); flex: none; }
.busca { flex: 1; min-width: 0; }
/* el buscador es la herramienta principal junto al agente: alto y con letra grande */
.busca input { width: 100%; font: inherit; font-size: 20px; height: 56px; padding: 0 18px 0 52px; border-radius: 12px; border: 2px solid transparent;
  color: var(--texto); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6478' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") 16px center / 24px no-repeat; }
.busca input::placeholder { color: var(--texto-2); }
.busca input:focus { border-color: var(--lima); outline: none; }
.papel { position: relative; flex: none; }
#btn-papel { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 8px; padding: 8px 12px; white-space: nowrap; }
.menu-papel { position: absolute; right: 0; top: calc(100% + 6px); background: var(--superficie); border: 2px solid var(--marinho); border-radius: 8px;
  min-width: 140px; z-index: 30; box-shadow: 0 6px 18px rgba(31,42,68,.18); }
.menu-papel button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 14px; }
.menu-papel button:hover { background: var(--fundo); }

.menu-lateral { background: var(--superficie); border-right: 1px solid var(--moldura); overflow-y: auto; padding: 10px 0 16px; }
.menu-lateral .item { display: block; text-decoration: none; padding: 7px 14px 7px 12px; margin: 1px 8px; border-radius: 6px;
  border-left: 5px solid transparent; }
.menu-lateral .item:hover { background: var(--fundo); }
.menu-lateral .item.ativo { background: var(--marinho); color: #fff; }
.menu-lateral .item-inicio { font-weight: 600; }
.banda { margin: 12px 8px 4px; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.banda.cor-laranja, .banda.cor-marinho, .banda.cor-lima { background: var(--bloco); color: var(--bloco-texto); }
.item.cor-laranja, .item.cor-marinho, .item.cor-lima { border-left-color: var(--bloco); }
.item.cor-marinho.ativo { box-shadow: inset 0 0 0 2px var(--marinho); }
.separador { border: 0; border-top: 1px solid var(--linhas); margin: 12px 14px; }
/* iconos propios (SVG en data:, permitido por la CSP): el equipo puede no tener fuente de emoji */
.icone { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; background: center / contain no-repeat; }
.icone-cadeado { margin-right: 5px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.5' y='7' width='11' height='8' rx='1.5' fill='%23FF9059' stroke='%231F2A44' stroke-width='1.2'/%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%231F2A44' stroke-width='1.6'/%3E%3C/svg%3E"); }
.icone-mic { width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A44' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E"); }
.icone-enviar { width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12l16-8-6 16-2-6z' fill='%231F2A44'/%3E%3C/svg%3E"); }

.conteudo { overflow: auto; padding: 16px; min-width: 0; }
.conteudo:focus { outline: none; }   /* recibe el foco al cambiar de página (lectores de pantalla), sin marco */
.veu { display: none; }

/* ── Início ── */
.inicio { height: 100%; display: flex; flex-direction: column; gap: 12px; }
.aprovacoes { background: var(--laranja-suave); border: 2px solid var(--laranja); border-radius: 10px; padding: 8px 14px; }
.aprovacoes h2 { font-size: 16px; display: inline; margin-right: 10px; }
.aprovacoes .lista { list-style: none; margin: 6px 0 0; padding: 0; }
.aprovacoes .lista li { margin: 2px 0; }
.inicio-grade { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr var(--largura-coluna); gap: 16px; }
.centro { min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.franja-config { display: block; background: var(--lima-suave); border: 1px solid var(--lima); border-radius: 10px; padding: 9px 14px;
  text-decoration: none; font-weight: 600; }
.franja-config:hover { background: #F1F5B8; }

.agente { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--superficie); border: 2px solid var(--marinho);
  border-radius: 12px; overflow: hidden; }
.agente-cabecalho { background: var(--marinho); color: #fff; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.agente-cabecalho h2 { font-size: 18px; }
.aviso-fase { background: var(--lima); color: var(--marinho); border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 600; }
.conversa { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; }
.exemplo-rotulo { margin: 0; align-self: center; color: var(--texto-2); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.msg { max-width: 72%; padding: 9px 14px; border-radius: 14px; }
.msg-eu { align-self: flex-end; background: var(--marinho); color: #fff; border-bottom-right-radius: 4px; }
.msg-agente { align-self: flex-start; background: var(--lima); color: var(--marinho); border-bottom-left-radius: 4px; }
.previa { align-self: flex-start; max-width: 72%; background: var(--superficie); border: 2px solid var(--lima); border-radius: 12px; padding: 10px 14px; }
.previa p { margin: 0 0 8px; }
.previa-titulo { font-weight: 700; }
.previa-botoes { display: flex; gap: 8px; }
.compositor { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--moldura); }
.compositor textarea { flex: 1; resize: none; font: inherit; font-size: 15.5px; padding: 10px; border: 1px solid var(--linhas); border-radius: 10px;
  background: var(--fundo); color: var(--texto-2); }
.botao-mic, .botao-enviar { width: 44px; height: 44px; border-radius: 50%; border: 0; flex: none; display: grid; place-items: center; }
.botao-mic { background: var(--laranja); color: var(--marinho); }
.botao-enviar { background: var(--lima); color: var(--marinho); }
.compositor button:disabled { opacity: .55; }

/* columna derecha: cabecera de color + fondo suave del mismo color */
.coluna-direita { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.caixa { border-radius: 10px; overflow: hidden; border: 1px solid var(--moldura); background: var(--superficie); flex: none; }
.caixa h3 { font-size: 15px; padding: 6px 12px; }
.caixa .lista { list-style: none; margin: 0; padding: 5px 12px 7px; }
.caixa .lista li { padding: 3px 0; display: flex; justify-content: space-between; gap: 8px; line-height: 1.3; }
.caixa .lista li + li { border-top: 1px dashed var(--linhas); }
.caixa .data { margin: 6px 12px 0; color: var(--texto-2); font-size: 13px; }
.vazio { color: var(--texto-2); }
.num { font-weight: 700; }
.aguarda { font-size: 12px; color: var(--texto-2); }
.caixa-hoje { border-color: var(--marinho); }
.caixa-hoje h3 { background: var(--marinho); color: #fff; }
.caixa-confirmar { background: var(--laranja-suave); border-color: var(--laranja); }
.caixa-confirmar h3 { background: var(--laranja); color: var(--marinho); }
.caixa-avisos { background: var(--lima-suave); border-color: var(--lima); }
.caixa-avisos h3 { background: var(--lima); color: var(--marinho); }
.caixa-acessos { background: var(--oliva-suave); border-color: var(--oliva); }
.caixa-acessos h3 { background: var(--oliva); color: var(--marinho); }
.caixa-acessos a { text-decoration: none; font-weight: 600; }
.caixa-acessos a:hover { text-decoration: underline; }

/* ── páginas de área (color del bloque) ── */
.pagina { display: flex; flex-direction: column; gap: 14px; }
.faixa { background: var(--bloco); color: var(--bloco-texto); border-radius: 10px; padding: 12px 16px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.faixa h1 { font-size: 22px; }
.bloco-nome { font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.caixa-bloco { border: 2px solid var(--bloco); background: var(--superficie); }
.caixa-bloco > h2, .caixa-bloco > h3 { background: var(--bloco); color: var(--bloco-texto); font-size: 16px; padding: 8px 14px; }
.caixa-bloco > p, .caixa-bloco > ol, .caixa-bloco > dl, .caixa-bloco > ul { margin: 12px 16px; }
.etapas li { padding: 3px 0; }
.etapas .feita { color: var(--texto-2); }
.grade-caixas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.dados { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.dados dt { color: var(--texto-2); }
.dados dd { margin: 0; }
.resultados { list-style: none; padding: 0; }
.resultados li { padding: 8px 0; border-top: 1px solid var(--moldura); }
.resultados li:first-child { border-top: 0; }
.resultados a { font-weight: 600; }
.detalhe { color: var(--texto-2); font-size: 14px; }
.nota { color: var(--texto-2); margin: 0; }

/* ── lote 7: misma pantalla para todos; lo que el papel no puede usar sale ATENUADO con 🔒 (y solo avisa) ── */
.bloqueado { opacity: .45; cursor: not-allowed; }
.menu-lateral .item.bloqueado:hover { background: none; }
.busca.bloqueado input { cursor: not-allowed; background-color: #E9ECF2; }
.aviso { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40; max-width: min(520px, 92vw);
  background: var(--marinho); color: #fff; border-radius: 10px; padding: 10px 16px; box-shadow: 0 6px 18px rgba(31,42,68,.25); }
.aviso-bloqueio { background: var(--laranja); color: var(--marinho); font-weight: 600; }
.aviso-ok { background: var(--lima); color: var(--marinho); font-weight: 600; }

/* ── fichas (bloque azul marino): pestañas + cajas + agente a la derecha ── */
.faixa .link-faixa { color: inherit; }
.abas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--bloco); }
.aba { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 8px 8px 0 0; text-decoration: none; background: var(--superficie);
  border: 1px solid var(--moldura); border-bottom: 0; font-weight: 600; }
.aba.ativa { background: var(--bloco); color: var(--bloco-texto); border-color: var(--bloco); }
button.aba { font: inherit; font-weight: 600; }
.ficha-grade { display: grid; grid-template-columns: 1fr var(--largura-coluna); gap: 16px; align-items: start; }
.ficha-conteudo { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.agente-ficha { position: sticky; top: 0; height: min(620px, calc(100vh - 190px)); }
.agente-ficha .agente-cabecalho { flex-wrap: wrap; gap: 6px; }
.agente-ficha .agente-cabecalho h2 { font-size: 16px; }
.agente-ficha .aviso-fase { font-size: 12px; padding: 2px 10px; }
.caixa-bloco .resultados li.simples { display: block; }
.pessoas { list-style: none; margin: 4px 0 2px; padding: 0; }
.pessoas li { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; border-top: 1px dashed var(--linhas); font-size: 14px; }
.pessoas li:first-child { border-top: 0; }
.papel-vinculo { color: var(--texto-2); text-align: right; }
.coluna-caixas { display: flex; flex-direction: column; gap: 14px; }
.caixa-bloco .acoes-caixa, .caixa-bloco .acao, .caixa-bloco .resultados { margin: 10px 16px; }
.acoes-caixa { display: flex; gap: 8px; flex-wrap: wrap; }
.acoes-caixa:empty, .acao:empty { display: none; }
.acoes-linha { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.acoes-linha button, .acoes-caixa button, .acoes-caixa a { font-size: 14px; padding: 5px 12px; text-decoration: none; display: inline-flex; align-items: center; }
.resultados.vinculos li, .caixa-bloco .resultados li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.destaque { font-size: 17px; font-weight: 600; margin: 12px 16px; }
.irmaos { margin: 4px 16px; }
.formulario { display: grid; gap: 8px; background: var(--superficie); border: 2px solid var(--marinho); border-radius: 12px; padding: 12px 14px; }
.formulario label { display: grid; gap: 3px; color: var(--texto-2); font-size: 14px; }
.formulario label:has(input[type=checkbox]), .formulario label:has(input[type=radio]) { display: flex; align-items: center; gap: 8px; }
.formulario input, .formulario select, .formulario textarea { font: inherit; color: var(--texto); padding: 7px 9px; border: 1px solid var(--linhas); border-radius: 8px; }
.previa-ficha { max-width: none; }
.previa-ficha .dados { margin: 0 0 10px; }
.antes { color: var(--texto-2); text-decoration: line-through; }
.aprovacao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.aprovacoes .lista li.aprovacao { display: flex; margin: 6px 0; }
.aprovacao-acao { flex-basis: 100%; }
.aprovacao-acao:empty { display: none; }
.solicitavel { opacity: .8; }

/* ── Receitas (lote 9; bloque lima). En el bloque lima la acción va en OLIVA: el lima sólido queda solo para «Confirmar». ── */
.cor-lima .botao-bloco { background: var(--oliva); color: var(--marinho); }
.icone-alerta { width: 18px; height: 18px; margin-right: 6px; vertical-align: -0.2em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5L23 21.5H1z' fill='%23DCE60C' stroke='%231F2A44' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12 9v5.5' stroke='%231F2A44' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.6' r='1.3' fill='%231F2A44'/%3E%3C/svg%3E"); }
.alerta { background: var(--lima-suave); border: 2px solid var(--oliva); border-radius: 10px; padding: 10px 16px; }
.alerta-titulo { font-weight: 700; margin: 0 0 6px; }
.alerta ul { margin: 0 0 6px; padding-left: 22px; }
.caixa-avisos .alerta-item a { font-weight: 600; text-decoration: none; }
.caixa-avisos .alerta-item a:hover { text-decoration: underline; }
.receitas { display: flex; flex-direction: column; gap: 14px; }
.grade-receitas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.tabela-rolagem { overflow-x: auto; margin: 10px 16px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; color: var(--texto-2); font-weight: 600; padding: 4px 8px; border-bottom: 2px solid var(--bloco); white-space: nowrap; }
.tabela td { padding: 6px 8px; border-top: 1px solid var(--moldura); vertical-align: top; }
.tabela tbody tr:first-child td { border-top: 0; }
.tabela tr.sem-valor td { color: var(--texto-2); background: var(--lima-suave); }
.tabela tr.vencida td { background: var(--laranja-suave); }
.tabela .pessoas { margin: 0; }
.tabela .acoes-linha { margin: 0; flex-wrap: nowrap; }
.tabela .acoes-linha button { font-size: 13px; padding: 3px 9px; }
.resumo-linha { margin: 0; font-weight: 600; }
.nowrap { white-space: nowrap; }
.tabela td > .acoes-linha { margin-top: 4px; }
.outras-series { margin: 4px 16px 0; color: var(--texto-2); }
.outras-series summary { cursor: pointer; }
.outras-series .tabela-rolagem { margin: 6px 0; }
.acao-receitas:empty { display: none; }
.plano { display: flex; flex-direction: column; gap: 10px; margin: 0 0 10px; }
.plano-linha { border: 1px solid var(--moldura); border-radius: 8px; padding: 6px 0 2px; }
.plano-linha .tabela-rolagem { margin: 4px 10px; }
.plano-titulo { margin: 0 10px; }
.plano-titulo select { font: inherit; padding: 2px 6px; border: 1px solid var(--linhas); border-radius: 6px; }
.plano-linha > .detalhe { margin: 0 10px 6px; }

/* ── Receitas, lote 10: resumen del mes, filtros, pago, caixa, atrasos, recibo y relatório ── */
.resumo-mes { background: var(--superficie); border: 2px solid var(--bloco); border-radius: 10px; padding: 10px 16px; margin: 0 0 12px; }
.resumo-titulo { margin: 0 0 8px; font-weight: 700; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 8px; }
.numero-resumo { background: var(--bloco-suave); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; }
.numero-resumo .rotulo { color: var(--texto-2); font-size: 13px; }
.numero-resumo strong { font-size: 20px; font-family: var(--serif); }
.numero-resumo.ok strong { color: #4D5A00; }
.numero-resumo.alerta-num strong, .alerta-num { color: #B4441A; }
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 12px; }
.filtros select, .filtros input, .formulario select { font: inherit; padding: 6px 8px; border: 1px solid var(--linhas); border-radius: 6px; }
.filtros .separa { flex: 1; }
.campo-curto { width: 110px; }
.botao-pequeno { font-size: 13px; padding: 3px 10px; }
.acoes-topo { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
a.botao-bloco, a.botao-contorno { text-decoration: none; display: inline-block; }
.parcelas-marcar { list-style: none; margin: 6px 0 10px; padding: 0; border: 1px solid var(--moldura); border-radius: 8px; max-height: 320px; overflow-y: auto; }
.parcelas-marcar li { border-top: 1px solid var(--moldura); }
.parcelas-marcar li:first-child { border-top: 0; }
.parcelas-marcar label { display: flex; gap: 10px; align-items: center; padding: 8px 10px; cursor: pointer; }
.parcelas-marcar input { width: 20px; height: 20px; flex: none; }
.parcelas-marcar .num { margin-left: auto; white-space: nowrap; font-weight: 600; }
.negociado { border: 1px dashed var(--linhas); border-radius: 8px; padding: 6px 10px; margin: 8px 0; }
.negociado legend { font-weight: 600; padding: 0 4px; }
.linha-check { display: flex; gap: 8px; align-items: flex-start; }
.so-pix { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.tabela tr.anulado td, .resultados li.anulado { color: var(--texto-2); text-decoration: line-through; }
.evolucao { list-style: none; margin: 10px 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.evolucao li { display: grid; grid-template-columns: 90px 1fr 110px; gap: 8px; align-items: center; }
.evo-barra { height: 12px; background: var(--moldura); border-radius: 6px; overflow: hidden; }
.evo-fill { display: block; height: 100%; background: var(--laranja); }
.evolucao .num { text-align: right; font-weight: 600; }
.folha { background: #fff; border: 1px solid var(--linhas); border-radius: 6px; padding: 24px 28px; margin: 12px 0; max-width: 900px; }
.folha .tabela-rolagem { margin: 10px 0; }
.folha-cabecalho { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-bottom: 2px solid var(--marinho); padding-bottom: 10px; margin-bottom: 12px; }
.folha-cabecalho h2 { width: 100%; font-size: 18px; margin-top: 8px; }
.escola-nome { font-family: var(--serif); font-size: 20px; display: block; }
.recibo-numero { text-align: right; margin-left: auto; }
.recibo-numero span { display: block; letter-spacing: .2em; font-size: 13px; color: var(--texto-2); }
.recibo-numero strong { font-family: var(--serif); font-size: 22px; }
.recibo-texto { font-size: 16px; line-height: 1.6; }
.recibo-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: 28px; }
.assinatura { border-top: 1px solid var(--marinho); min-width: 240px; text-align: center; padding-top: 4px; margin-top: 40px; }
.carimbo { border: 3px solid #B4441A; color: #B4441A; font-weight: 700; padding: 6px 12px; display: inline-block; transform: rotate(-2deg); }
.recibo-anulado .tabela, .recibo-anulado .recibo-texto { opacity: .6; }
.totais { margin-top: 12px; }

/* ── ayuda en pantalla (lote 10): «?» solo sin ratón y con «Modo ajuda»; tarjeta junto a la zona o abajo (tablet) ── */
/* «.app» delante: más fuerte que «.acoes-caixa button» (que si no lo enseñaría y le cambiaría el relleno) */
.app .ajuda-icone { display: none; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--marinho); background: var(--superficie);
  color: var(--marinho); font-weight: 700; font-size: 14px; line-height: 1; padding: 0; margin-left: 6px; vertical-align: middle; flex: none; }
@media (hover: none) { body.modo-ajuda:not(.com-rato) .app .ajuda-icone { display: inline-flex; } }
body.modo-ajuda.com-dedo .app .ajuda-icone { display: inline-flex; }
.com-ajuda { display: inline-flex; align-items: center; }
.ajuda-cartao { position: fixed; z-index: 50; width: 330px; max-width: calc(100vw - 16px); background: var(--marinho); color: #fff; border-radius: 10px;
  padding: 10px 34px 10px 14px; box-shadow: 0 6px 22px rgba(31,42,68,.35); }
.ajuda-cartao.fixo { left: 8px; right: 8px; bottom: 12px; width: auto; max-width: 560px; margin: 0 auto; }
.ajuda-titulo { margin: 0 0 4px; font-weight: 700; color: var(--lima); }
.ajuda-texto { margin: 0; }
.ajuda-fechar { position: absolute; top: 4px; right: 6px; background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; padding: 4px; }
.ajuda-cartao:not(.fixo) .ajuda-fechar { display: none; }
#btn-modo-ajuda { display: flex; align-items: center; gap: 8px; }
.interruptor { width: 34px; height: 18px; border-radius: 9px; background: var(--linhas); position: relative; flex: none; }
.interruptor::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
body.modo-ajuda .interruptor { background: var(--oliva); }
body.modo-ajuda .interruptor::after { left: 18px; }

/* ── imprimir: solo la hoja (recibo o relatório) ── */
@media print {
  .barra-superior, .menu-lateral, .faixa, .abas, .nao-imprimir, .acoes-caixa, .acao, .ajuda-icone, .ajuda-cartao, .aviso { display: none !important; }
  body, .conteudo { background: #fff; padding: 0; }
  .app { display: block; }
  .folha { border: 0; margin: 0; max-width: none; padding: 0; }
}

/* ── tablet (y menor): el menú y la columna derecha se pliegan en botones; el agente ocupa toda la pantalla ── */
.so-tablet { display: none; }
@media (max-width: 1180px) {
  .app { grid-template-columns: 1fr; }
  .so-tablet { display: inline-block; }
  .marca { width: auto; }
  .menu-lateral { position: fixed; top: var(--altura-barra); bottom: 0; left: 0; width: min(300px, 85vw); z-index: 20;
    transform: translateX(-105%); transition: transform .2s; box-shadow: 4px 0 18px rgba(31,42,68,.2); }
  .app.menu-aberto .menu-lateral { transform: none; }
  .inicio-grade { grid-template-columns: 1fr; }
  .coluna-direita { position: fixed; top: var(--altura-barra); bottom: 0; right: 0; width: min(340px, 90vw); z-index: 20; padding: 12px;
    background: var(--fundo); transform: translateX(105%); transition: transform .2s; box-shadow: -4px 0 18px rgba(31,42,68,.2); }
  .app.paineis-abertos .coluna-direita { transform: none; }
  .app.menu-aberto .veu, .app.paineis-abertos .veu { display: block; position: fixed; inset: var(--altura-barra) 0 0 0; background: rgba(31,42,68,.35); z-index: 10; }
  .msg, .previa { max-width: 85%; }
  .previa-ficha { max-width: none; }
  .ficha-grade { grid-template-columns: 1fr; }
  .agente-ficha { position: static; height: 420px; }
  .grade-receitas { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .barra-superior { gap: 8px; padding: 0 8px; }
  .busca input { font-size: 17px; height: 48px; padding-left: 44px; background-position: 12px center; }
  .marca { display: none; }
  .conteudo { padding: 10px; }
  #btn-papel { padding: 8px; }
}

/* Lote 11: acordos (formulario con grupos, títulos dentro de la pré-visualização) */
.formulario fieldset:not(.negociado) { border: 1px solid var(--moldura); border-radius: 8px; padding: 6px 10px; margin: 8px 0; }
.formulario fieldset:not(.negociado) legend { font-weight: 600; padding: 0 4px; }
.formulario fieldset select { margin-right: 6px; }
.previa h3 { font-size: 15px; margin: 14px 0 4px; color: var(--marinho); }
/* lote 11b: ayuda en el menú lateral, la barra y las pestañas (el «?» va al lado de la zona, sin romper su ancho) */
.menu-lateral .com-ajuda { display: flex; align-items: center; }
.menu-lateral .com-ajuda > .item { flex: 1; min-width: 0; }
.menu-lateral .banda .ajuda-icone { margin-left: 8px; }
.barra-superior .com-ajuda { flex: 0 0 auto; }
.abas .com-ajuda { display: inline-flex; }
.busca { position: relative; }
.busca .ajuda-icone { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.grupo-ajuda { margin: 6px 0; }
.grupo-ajuda > summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
/* lote A1: token do agente, mostrado uma única vez */
.token-agente { display: block; font-family: ui-monospace, monospace; font-size: 15px; padding: 10px 12px; margin: 8px 0; background: var(--fundo);
  border: 2px solid var(--marinho); border-radius: 8px; word-break: break-all; user-select: all; }
/* lote G1, paso 0: cada pantalla se pinta en su propio contenedor (app.js, rota); para la maqueta no existe */
.tela { display: contents; }
/* lote G1: Despesas (bloque lima; la acción en oliva, el lima sólido solo en «Confirmar») */
.despesa-registrada { text-align: center; border-color: var(--oliva); }
.numero-despesa { font-family: var(--serif); font-size: 46px; font-weight: 600; letter-spacing: .04em; color: var(--marinho); margin: 10px auto;
  padding: 10px 22px; background: var(--lima-suave); border: 3px solid var(--oliva); border-radius: 12px; width: fit-content; user-select: all; }
.aviso-numero { font-size: 18px; font-weight: 700; margin: 6px 0 12px; }
.despesa-registrada .previa-botoes { justify-content: center; }
.despesa-registrada p.numero-despesa { margin: 10px auto; }   /* centrado: «.previa p» le ponía otro margen */
.formulario fieldset .linha-check { color: var(--texto); font-size: 15px; }
@media (max-width: 640px) { .numero-despesa { font-size: 34px; } }
/* lote G1, corrección: plano de contas. Elegir conta en tablet (buscar y tocar; nombre grande, ruta debajo) */
.escolha-conta input[type=search] { width: 100%; font-size: 17px; padding: 10px 12px; }
.conta-escolhida { margin: 8px 0; font-size: 15px; }
.conta-escolhida.falta { color: #A3341A; font-weight: 700; }
.contas-opcoes { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; border: 1px solid var(--linhas); border-radius: 8px; }
.contas-opcoes li + li { border-top: 1px solid var(--moldura); }
.conta-opcao { display: block; width: 100%; text-align: left; background: var(--superficie); color: var(--texto); border: 0; padding: 10px 12px;
  min-height: 48px; font: inherit; cursor: pointer; }
.conta-opcao .conta-nome { display: block; font-size: 17px; font-weight: 600; }
.conta-opcao .conta-caminho { display: block; font-size: 13px; color: var(--texto-2); }
.conta-opcao.escolhida { background: var(--lima-suave); box-shadow: inset 4px 0 0 var(--oliva); }
.contas-opcoes .nota { padding: 10px 12px; }
/* Configurações › Plano de contas: sangría por nivel */
/* sangría por nivel con clases: la CSP no deja «style» en línea */
.plano-contas li.nivel-0 { padding-left: 10px; }
.plano-contas li.nivel-1 { padding-left: 32px; }
.plano-contas li.nivel-2 { padding-left: 54px; }
.plano-contas li.nivel-3 { padding-left: 76px; }
.plano-contas li.nivel-4 { padding-left: 98px; }
.plano-contas li.nivel-5 { padding-left: 120px; }
.plano-contas li.nivel-6 { padding-left: 142px; }
.plano-contas li.nivel-7 { padding-left: 164px; }
.plano-contas li.grupo-conta > div:first-child strong { letter-spacing: .02em; }

/* ── lote A2: propostas do agente em «Para confirmar» (e em Aprovações para a direção) ── */
.caixa .lista li.item-proposta, .aprovacoes .lista li.item-proposta { display: block; padding: 6px 0; }
.proposta { max-width: none; margin: 0; background: var(--superficie); }
.proposta .detalhe { font-size: 12px; color: var(--texto-2); margin: 0 0 6px; }
.proposta .dados { grid-template-columns: max-content minmax(0, 1fr); gap: 3px 10px; font-size: 14px; }
.proposta .dados dd { overflow-wrap: anywhere; }
.proposta .previa-botoes { flex-wrap: wrap; }
.proposta .previa-botoes button { min-height: 44px; }                  /* alvos de toque na tablet */
.proposta-acao:empty { display: none; }
.proposta-acao .formulario { margin-top: 8px; }
.coluna-direita .numero-despesa { font-size: 34px; letter-spacing: .02em; }   /* a coluna é estreita: grande, mas cabe */
.coluna-direita .despesa-registrada { margin: 0; }
#btn-paineis.com-pendentes { background: var(--laranja); color: var(--marinho); font-weight: 700; }
.aviso-duplicada { background: var(--laranja-suave); border-left: 4px solid var(--laranja); border-radius: 6px; padding: 6px 8px; margin: 0 0 8px; font-size: 14px; }
.aviso-duplicada p { margin: 0; display: flex; gap: 6px; align-items: flex-start; }
.aviso-duplicada p + p { margin-top: 4px; }