/* Visual inspirado na tela do Educacenso 2026 (Angular Material, tema Fuse), observada em 13/11/2026:
   barra branca com "SISTEMA Educacenso 2026", faixa azul com nome/nível/entidade, menu lateral escuro,
   faixa clara com o título da página, cartões com cabeçalho azul e botões retos azuis. */
:root {
  --azul: #1565c0;
  --azul-escuro: #0d4f8f;
  --azul-cab: #0f5aa6;
  --azul-titulo: #3a7bbf;
  --faixa-titulo: #dde8f2;
  --navbar: #2d323e;
  --navbar-texto: rgba(255, 255, 255, .72);
  --navbar-ativo: #1e88e5;
  --fundo: #f5f5f5;
  --cartao: #ffffff;
  --linha: #d6d6d6;
  --texto: #212121;
  --suave: #6b6b6b;
  --erro: #d32f2f;
  --alerta: #b26a00;
  --ok: #2e7d32;
  --treino: #ffe082;
}
* { box-sizing: border-box }
html, body { margin: 0; height: 100% }
body { font: 14px/1.5 Roboto, "Segoe UI", Arial, sans-serif; color: var(--texto); background: var(--fundo); display: flex; flex-direction: column }
button { font: inherit }
.material-icons { font-size: 22px; vertical-align: middle; user-select: none }

.faixa-treino { background: var(--treino); color: #5d4300; font-size: 12px; font-weight: 700; text-align: center; padding: 3px 12px; letter-spacing: .03em }
.toolbar { background: #fff; height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 16px; box-shadow: 0 1px 3px rgba(0,0,0,.15); position: relative; z-index: 4 }
.sistema { flex: 1; text-align: center; color: var(--azul-escuro); font-size: 28px; font-weight: 400; white-space: nowrap }
.sistema span { font-size: 18px; color: #3d6a96; letter-spacing: .02em }
.icone-btn { border: 0; background: none; cursor: pointer; color: #555; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center }
.icone-btn:hover { background: #eee }
.usuario { position: relative; display: flex; align-items: center; gap: 4px }
.usuario-btn { border: 0; border-left: 1px solid #ddd; background: none; cursor: pointer; color: #555; display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 14px; font-size: 13px }
.usuario-btn .avatar { font-size: 30px; color: #9e9e9e }
.menu-usuario { position: absolute; right: 0; top: 48px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.2); border-radius: 4px; min-width: 300px; padding: 6px 0; z-index: 20 }
.menu-usuario button { display: flex; gap: 12px; align-items: center; width: 100%; border: 0; background: none; text-align: left; padding: 10px 16px; cursor: pointer; font-size: 14px }
.menu-usuario button:hover { background: #f1f1f1 }
.faixa-perfil { background: var(--azul-escuro); color: #fff; font-size: 12px; padding: 6px 16px 6px 296px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center }
.faixa-perfil b { font-weight: 700 }
.faixa-perfil .sep { opacity: .6 }
.faixa-perfil button { background: transparent; color: #fff; border: 1px solid #fff; border-radius: 4px; font-size: 11px; font-weight: 700; padding: 1px 10px; cursor: pointer }

.corpo { flex: 1; display: flex; min-height: 0 }
.navbar { width: 280px; flex: 0 0 280px; background: var(--navbar); color: var(--navbar-texto); padding: 10px 0 30px; overflow-y: auto }
.navbar.fechada { display: none }
.navbar .grupo { padding: 10px 24px; font-weight: 700; color: #fff; display: flex; justify-content: space-between; align-items: center; cursor: default }
.navbar a, .navbar .item { display: flex; align-items: center; gap: 10px; color: var(--navbar-texto); text-decoration: none; padding: 9px 24px 9px 40px; font-size: 14px; cursor: pointer; justify-content: space-between }
.navbar a.sub { padding-left: 64px; font-size: 13px }
.navbar a:hover, .navbar .item:hover { background: rgba(255,255,255,.05); color: #fff }
.navbar a.ativo { background: var(--navbar-ativo); color: #fff; border-radius: 0 20px 20px 0; margin-right: 12px }
.navbar .notif { padding: 8px 24px; color: #fff }
main { flex: 1; min-width: 0; overflow-y: auto; outline: none }

.cab-pagina { background: var(--faixa-titulo); padding: 18px 32px 26px }
.migalha { font-size: 11px; color: #3d4b59; margin-bottom: 6px }
.migalha a { color: #3d4b59 }
.cab-pagina h1 { margin: 0; font-weight: 300; font-size: 34px; color: var(--azul-titulo) }
.pagina { padding: 20px 32px 48px; display: grid; gap: 20px }

.cartao { background: var(--cartao); box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.14); border-radius: 4px; overflow: hidden }
.cartao-cab { background: var(--azul-cab); color: #fff; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; cursor: pointer; border: 0; width: 100%; text-align: left }
.cartao-cab .material-icons { font-size: 22px }
.cartao-corpo { padding: 18px 24px 22px; display: grid; gap: 18px }
.cartao.recolhido .cartao-corpo { display: none }
.cartao-cab.claro { background: #fff; color: var(--texto); border-bottom: 1px solid #eee; cursor: default }

.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 28px }
.campo { display: grid; gap: 4px; min-width: 0; align-content: start }
.campo.largo { grid-column: 1 / -1 }
.campo > label.rot, .campo > .rot { font-size: 12px; color: var(--suave) }
.rot .obr { color: var(--erro) }
.campo input[type=text], .campo input[type=password], .campo input[type=email], .campo input[type=date], .campo input[type=number], .campo input[type=time], .campo select {
  border: 0; border-bottom: 1px solid #9e9e9e; background: transparent; padding: 6px 0; font: inherit; font-size: 15px; color: var(--texto); width: 100%; border-radius: 0 }
.campo input:focus, .campo select:focus { outline: none; border-bottom: 2px solid var(--azul) }
.campo.erro input, .campo.erro select { border-bottom: 2px solid var(--erro) }
.campo.erro > .rot { color: var(--erro) }
.mat-erro { color: var(--erro); font-size: 12px }
.mat-alerta { color: var(--alerta); font-size: 12px }
.dica { font-size: 12px; color: #4a148c; background: #f3e5f5; border-left: 3px solid #8e24aa; padding: 6px 10px }
.opcoes { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 4px }
.opcoes.col { flex-direction: column; gap: 6px }
.opcoes label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 14px }
.opcoes input { accent-color: var(--azul); width: 18px; height: 18px; margin: 1px 0 0 }
.legenda-grupo { font-size: 13px; font-weight: 500; color: #333; margin-top: 4px }

.botoes { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap }
.btn { border: 0; border-radius: 4px; padding: 0 18px; height: 36px; font-weight: 500; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 2px 2px rgba(0,0,0,.14), 0 1px 5px rgba(0,0,0,.12) }
.btn.prim { background: var(--azul); color: #fff }
.btn.prim:disabled { background: #e0e0e0; color: #9e9e9e; box-shadow: none; cursor: default }
.btn.sec { background: #fff; color: #333 }
.btn.verde { background: #2e7d32; color: #fff }
.btn.peq { height: 30px; padding: 0 12px; font-size: 13px }
.btn:focus-visible, .icone-btn:focus-visible, .campo input:focus-visible { outline: 2px solid #ff9800; outline-offset: 2px }

.tabela-wrap { overflow-x: auto }
table { border-collapse: collapse; width: 100%; font-size: 13px }
th { text-align: left; font-weight: 500; color: #555; padding: 10px 12px; border-bottom: 1px solid #ddd; font-size: 12px }
td { padding: 10px 12px; border-bottom: 1px solid #eee; vertical-align: middle }
tr:nth-child(even) td { background: #fafafa }
td.acoes { white-space: nowrap }
.acao { border: 0; background: none; cursor: pointer; color: var(--azul); padding: 2px 4px }
.acao:disabled { color: #bdbdbd; cursor: default }
.paginacao { display: flex; justify-content: space-between; align-items: center; color: #555; font-size: 12px; padding: 10px 4px 0; flex-wrap: wrap; gap: 8px }

.boas-vindas { display: grid; gap: 10px; max-width: 1000px }
.boas-vindas p { margin: 0 }
.botoes-painel { display: flex; gap: 10px; flex-wrap: wrap }
.btn.painel1 { background: var(--azul); color: #fff }
.btn.painel2 { background: #2e7d32; color: #fff }

.dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px }
.dia { border: 1px solid #e0e0e0; border-radius: 4px; padding: 8px 10px; display: grid; gap: 6px }
.info-azul { background: #e3f2fd; color: #0d47a1; padding: 8px 12px; border-radius: 4px; font-size: 13px }
.vinculo { border: 1px solid #e0e0e0; border-radius: 4px; padding: 14px 16px; display: grid; gap: 14px }
.vinculo-cab { display: flex; justify-content: space-between; align-items: center; font-weight: 500 }

.lista-inc { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px }
.lista-inc li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: start; padding: 8px 10px; border-bottom: 1px solid #eee }
.lista-inc .material-icons { font-size: 20px }
.ic-erro { color: var(--erro) } .ic-alerta { color: var(--alerta) } .ic-ok { color: var(--ok) }
.status { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 500 }
.status.aberta { background: #fff3e0; color: #e65100 } .status.fechada { background: #e8f5e9; color: #1b5e20 }
.resumo-num { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px }
.resumo-num div { background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 12px 14px }
.resumo-num b { display: block; font-size: 26px; font-weight: 400; color: var(--azul-escuro) }

.rel { background: #fff; padding: 24px; font-size: 12px; display: grid; gap: 6px }
.rel .cab-rel { text-align: center; line-height: 1.35 }
.rel table th { background: #eceff1; color: #333 }

.toasts { position: fixed; top: 140px; right: 16px; display: grid; gap: 8px; z-index: 50; max-width: 380px }
.toast { color: #fff; padding: 12px 16px; border-radius: 4px; box-shadow: 0 3px 8px rgba(0,0,0,.25); font-size: 14px }
.toast.erro { background: #c62828 } .toast.ok { background: #2e7d32 } .toast.alerta { background: #ef6c00 } .toast.info { background: #1565c0 }

.modal-fundo { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 40; padding: 16px }
.modal { background: #fff; border-radius: 4px; max-width: 920px; width: 100%; max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,.35) }
.modal-cab { background: var(--azul-cab); color: #fff; padding: 14px 20px; font-size: 16px }
.modal-corpo { padding: 18px 22px; overflow-y: auto; font-size: 13px; text-align: justify; display: grid; gap: 10px }
.modal-pe { padding: 12px 20px; border-top: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap }

@media (max-width: 900px) {
  .faixa-perfil { padding-left: 16px }
  .navbar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; box-shadow: 4px 0 12px rgba(0,0,0,.3) }
  .sistema { font-size: 20px } .sistema span { font-size: 13px }
  .nome-usuario { display: none }
  .toolbar { gap: 4px; padding: 0 8px }
  .sistema { min-width: 0; overflow: hidden; text-overflow: ellipsis }
  .usuario-btn { padding: 4px; border-left: 0 }
  .usuario-btn .material-icons:last-child, .icone-btn[aria-label="Pesquisar"] { display: none }
  .cab-pagina, .pagina { padding-left: 16px; padding-right: 16px }
}
@media (prefers-reduced-motion: no-preference) { .btn, .acao, .navbar a { transition: background .15s, color .15s } }

/* app.js (13/11/2026) */
[hidden] { display: none !important }
.n-campo { color: #8e24aa; font-weight: 700 }
.badge { background: var(--erro); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; padding: 0 7px; line-height: 18px }
.navbar a > span { display: flex; align-items: center; gap: 10px }
.navbar a .material-icons { font-size: 20px }
.status.erro-chip { background: #ffebee; color: #b71c1c }
.barra-fixa { position: sticky; bottom: 0; background: var(--fundo); padding: 12px 0; border-top: 1px solid var(--linha); z-index: 2 }
.cartao-cab.claro { flex-wrap: wrap; gap: 12px; align-items: flex-end }
a.btn { text-decoration: none }
.botoes-painel .btn .material-icons, .btn .material-icons { font-size: 18px }
.grade-prof input { width: 90px }
.lista-inc li .btn { text-decoration: none }
.rel table { margin-bottom: 10px }
.rel small { color: var(--suave) }
@media print {
  .faixa-treino, .toolbar, .faixa-perfil, .navbar, .cab-pagina, .cartao-cab, .toasts { display: none !important }
  body, main { overflow: visible; height: auto; display: block }
  .cartao { box-shadow: none }
}

.login-cartao { max-width: 520px; width: 100%; justify-self: center }
.cartao.guia .cartao-cab { background: #6a1b9a }
.cartao.guia .cartao-cab > span:first-child { display: flex; align-items: center; gap: 8px }
.guia-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px 32px }
.guia-col ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px }
.confira { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px }
.confira li { display: grid; grid-template-columns: 22px 1fr; gap: 6px }
.confira .material-icons { color: var(--ok); font-size: 20px }