/* Painel PA · casca do app: grade das páginas, barra lateral fixa, barra de abas e o login.
   Cores, fontes, raios e componentes vêm de tokens.css e bundle.css (design system "Painel PA").
   Compatível com o Chrome antigo do tablet: sem :is(), sem inset, sem color-mix. */

html, body { margin: 0; }
body.pa { min-height: 100vh; }

.app { display: flex; min-height: 100vh; }
.app-sidebar { display: none; position: sticky; top: 0; height: 100vh; flex: none; }
.app-main { flex: 1; min-width: 0; padding: 0 var(--space-4) calc(var(--tabbar-height) + var(--space-10)); }
.app-conteudo { max-width: var(--content-max); margin: 0 auto; }
.app-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; }

@media (min-width: 768px) {
  .app-main { padding-left: var(--space-6); padding-right: var(--space-6); }
}
@media (min-width: 1024px) {
  .app-sidebar { display: flex; }
  .app-tabbar { display: none; }
  .app-main { padding: 0 var(--space-8) var(--space-10); }
  .pa-grid { gap: var(--space-5); }
}

.app-sidebar__rodape { margin-top: auto; padding: var(--space-6) 10px 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 13px; line-height: 18px; }
.app-sidebar__rodape a { color: var(--label-2); text-decoration: none; }
.app-sidebar__rodape a:hover { color: var(--label); }
.app-sidebar__rodape form { margin: 0; }
.app-sidebar__rodape button { padding: 0; border: 0; background: none; font: inherit; color: var(--label-2); cursor: pointer; }
.app-sidebar__rodape button:hover { color: var(--label); }

/* seções de uma tela */
.secao { margin-top: var(--space-8); }
.secao__titulo { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 28px; letter-spacing: -.005em; color: var(--label); }
.colunas { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
@media (min-width: 900px) { .colunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.texto-apoio { margin: 0 0 var(--space-4); max-width: 62ch; font-size: 16px; line-height: 21px; color: var(--label-2); }
.texto-apoio a { color: var(--accent); }
.selo { margin: 0 0 var(--space-6); }
.vazio { margin: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface); font-size: 15px; line-height: 20px; color: var(--label-2); }

/* widgets com texto em vez de número, e detalhe de uma linha */
.pa-widget__value--texto { font-size: 22px; line-height: 28px; letter-spacing: -.005em; }
.pa-widget__detail--linha { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-widget .pa-status { align-self: flex-start; }

/* linhas de lista com texto que quebra e código */
.pa-row__title--quebra { overflow-wrap: anywhere; }
.pa-mono { font-family: var(--font-mono); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.pa-row form { margin: 0; }
.pa-row--botao { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.pa-row--perigo .pa-row__title { color: var(--danger); }

/* Dados: o mapa num cartão */
.moldura-mapa { margin-bottom: var(--space-4); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card); }
.moldura-mapa iframe { display: block; width: 100%; height: 72vh; min-height: 480px; border: 0; }

/* Diagnóstico do tablet (a tabela vem do pa-diag.js) */
#diag { border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
#diag > p { margin: 0; padding: var(--space-4); color: var(--label-2); }
.diag-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 20px; }
.diag-table th, .diag-table td { padding: 10px var(--space-4); text-align: left; border-bottom: var(--hairline) solid var(--separator); }
.diag-table th { font-weight: 400; color: var(--label); }
.diag-table td { color: var(--label-2); font-variant-numeric: tabular-nums; }
.diag-table td.sim { color: var(--success); font-weight: 600; }
.diag-table td.nao { color: var(--danger); font-weight: 600; }

/* markdown da agenda, se o arquivo um dia existir */
.pa-prose { font-size: 16px; line-height: 22px; color: var(--label); }
.pa-prose h1, .pa-prose h2, .pa-prose h3 { font-family: var(--font-display); font-size: 17px; line-height: 22px; margin: var(--space-3) 0 var(--space-1); }

/* login */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); }
.login__caixa { width: 100%; max-width: 340px; text-align: center; }
.login__nome { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 41px; letter-spacing: -.01em; color: var(--label); }
.login__dica { margin: var(--space-2) 0 var(--space-6); font-size: 15px; line-height: 20px; color: var(--label-2); }
.login__erro { margin: 0 0 var(--space-4); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--danger); }
.login__campo { display: block; width: 100%; height: 50px; margin: 0 0 var(--space-3); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-md); background: var(--fill); color: var(--label);
  font-family: var(--font-sans); font-size: 22px; letter-spacing: .3em; text-align: center; box-sizing: border-box; }
.login__campo:focus { outline: 2px solid var(--focus); outline-offset: 2px; }

/* e-ink: letra maior no tablet (o bundle.css já tira camadas e movimento) */
html[data-theme="eink"] { zoom: 1.12; }
html[data-theme="eink"] .app-sidebar { position: static; height: auto; }
html[data-theme="eink"] .app-tabbar { position: static; }
html[data-theme="eink"] .moldura-mapa, html[data-theme="eink"] #diag, html[data-theme="eink"] .vazio { box-shadow: inset 0 0 0 1px var(--separator); }
html[data-theme="eink"] .login__campo { box-shadow: inset 0 0 0 1px var(--separator); }
.pilha { display: grid; gap: var(--space-6); }
.pa-list__footer a { color: var(--accent); text-decoration: none; }
.pa-list__footer a:hover { text-decoration: underline; }
.pa-row__title--curto { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* linha que é um <form> (Sair): o separador do bundle só pega .pa-row + .pa-row */
.pa-list__group > .pa-row + form > .pa-row::before,
.pa-list__group > form + form > .pa-row::before { content: ""; position: absolute; top: 0; right: 0; left: var(--sep-inset); border-top: var(--hair) solid var(--separator); }