:root {
  color-scheme: light;
  --verde: #087C79; --verde-vivo: #049E94; --verde-escuro: #065F5C; --nevoa: #E8F4F3; --nevoa-2: #F2F8F7;
  --laranja: #FF5309; --laranja-forte: #C93A06; --laranja-claro: #FFE9DF; --laranja-texto: #A93204;
  --tinta: #17302E; --tinta-2: #3E5653; --suave: #55706D; --apagado: #8A9A98;
  --linha: #E3ECEA; --linha-2: #EEF3F2; --fundo: #F5F8F8; --papel: #FFFFFF; --azul: #2F4A8A; --azul-claro: #E4ECFA;
  --sombra: 0 1px 2px rgba(23,48,46,.06), 0 10px 28px -6px rgba(23,48,46,.12);
  --fonte: "Figtree", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--fonte); font-size: 15px; line-height: 1.45 }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 2px }
h1, h2, h3 { margin: 0; text-wrap: balance }
h1 { font-size: 24px } h2 { font-size: 17px }
small, .nota { color: var(--suave) }
.nota { font-size: 13px; margin: 6px 0 0 }
.num { font-variant-numeric: tabular-nums }
.carregando { padding: 40px; text-align: center; color: var(--suave) }

/* topo e menu */
.topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; background: var(--papel); border-bottom: 1px solid var(--linha); padding: 10px 16px; position: sticky; top: 0; z-index: 5 }
.topo-esq, .topo-dir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.logo { height: 34px }
.menu { display: flex; gap: 4px; background: var(--papel); border-bottom: 1px solid var(--linha); padding: 0 12px; overflow-x: auto }
.menu a { padding: 12px 14px; text-decoration: none; color: var(--tinta-2); font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; display: flex; align-items: center; gap: 6px }
.menu a.ativo { color: var(--verde); border-bottom-color: var(--verde) }
.pag { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px }
.pag-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 16px }
.pag-topo p { margin: 4px 0 0; color: var(--suave) }

/* botões e campos */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 700; min-height: 40px; text-decoration: none; white-space: nowrap }
.btn.prim { background: var(--verde); color: #fff } .btn.prim:hover { background: var(--verde-escuro) }
.btn.sec { background: var(--papel); color: var(--verde); box-shadow: inset 0 0 0 1.5px var(--verde) } .btn.sec:hover { background: var(--nevoa) }
.btn.alerta { background: var(--laranja-forte); color: #fff }
.btn.zap { background: #1FA855; color: #fff }
.btn.fant { background: transparent; color: var(--tinta-2) } .btn.fant:hover { background: var(--linha-2) }
.btn.mini { min-height: 32px; padding: 6px 11px; font-size: 13px; border-radius: 8px }
.btn:disabled { opacity: .5; cursor: default }
.badge { background: var(--laranja); color: #fff; border-radius: 99px; font-size: 12px; padding: 1px 7px; font-weight: 700 }
label.campo { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px }
label.campo small { font-weight: 400 }
input, select, textarea { border: 1.5px solid var(--linha); border-radius: 10px; padding: 9px 11px; background: #fff; min-height: 42px; width: 100% }
textarea { min-height: 90px; resize: vertical }
input:focus, select:focus, textarea:focus { border-color: var(--verde-vivo); outline: none }
.grade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px }
.linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.escolha { display: inline-flex; border: 1.5px solid var(--linha); border-radius: 10px; overflow: hidden }
.escolha button { border: 0; background: #fff; padding: 9px 14px; font-weight: 600 }
.escolha button.on { background: var(--verde); color: #fff }

/* cartões */
.card { background: var(--papel); border: 1px solid var(--linha); border-radius: 14px; padding: 16px; box-shadow: var(--sombra); margin-bottom: 16px }
.card-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px }
.stat { background: var(--papel); border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px }
.stat span { display: block; color: var(--suave); font-size: 13px; font-weight: 600 }
.stat strong { display: block; font-size: 28px; line-height: 1.2 }
.stat.laranja strong { color: var(--laranja-forte) }
.duas { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start }
@media (max-width: 860px) { .duas { grid-template-columns: 1fr } }
.vazio { color: var(--apagado); text-align: center; padding: 18px }

/* tabelas e listas */
.tabela-box { overflow-x: auto }
table.tabela { width: 100%; border-collapse: collapse }
.tabela th { text-align: left; font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; padding: 8px; border-bottom: 1px solid var(--linha) }
.tabela td { padding: 10px 8px; border-bottom: 1px solid var(--linha-2); vertical-align: middle }
.tabela tr.apagada td { opacity: .55 }
.dir { text-align: right }
.pill { display: inline-block; border-radius: 99px; padding: 2px 9px; font-size: 12px; font-weight: 700; background: var(--linha-2); color: var(--tinta-2); white-space: nowrap }
.pill.ok { background: #DDF3E6; color: #17663A } .pill.esp { background: var(--laranja-claro); color: var(--laranja-texto) }
.pill.bd { background: var(--azul-claro); color: var(--azul) } .pill.riscado { text-decoration: line-through }
.item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linha-2) }
.item:last-child { border-bottom: 0 }
.item span small { display: block }
.prof-item { display: flex; width: 100%; text-align: left; justify-content: space-between; gap: 8px; background: none; border: 0; border-radius: 10px; padding: 9px 10px }
.prof-item:hover { background: var(--nevoa-2) } .prof-item.ativo { background: var(--nevoa) }
.prof-item small { display: block }
.grupo { font-size: 12px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; margin: 12px 10px 4px }

/* calendário */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px }
.cal .sem { text-align: center; font-size: 12px; color: var(--suave); font-weight: 700; padding: 4px 0 }
.cal button { aspect-ratio: 1.15; border: 1px solid var(--linha); background: #fff; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 700; padding: 2px }
.cal button small { font-size: 11px; font-weight: 600 }
.cal button.atende { background: var(--nevoa); border-color: #BFE0DC }
.cal button.cheio { background: var(--laranja-claro); border-color: #F7C9B4 }
.cal button.hoje { box-shadow: inset 0 0 0 2px var(--verde) }
.cal button.sel { background: var(--verde); color: #fff } .cal button.sel small { color: #E8F4F3 }
.cal button:disabled { background: var(--fundo); color: var(--apagado); border-color: transparent }
.cal .fora { visibility: hidden }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px }
.hora { border: 1.5px solid var(--linha); background: #fff; border-radius: 10px; padding: 9px; text-align: left }
.hora b { display: block; font-size: 16px }
.hora.livre { border-color: #9ED3CD } .hora.livre:hover { background: var(--nevoa) }
.hora.ocupado { background: var(--fundo) } .hora.ocupado small { color: var(--tinta-2) }

/* janela (modal) e avisos */
.fundo-modal { position: fixed; inset: 0; background: rgba(23,48,46,.45); display: flex; align-items: flex-start; justify-content: center; padding: 30px 12px; overflow-y: auto; z-index: 20 }
.modal { background: #fff; border-radius: 16px; width: min(640px, 100%); padding: 20px; box-shadow: var(--sombra) }
.modal.largo { width: min(900px, 100%) }
.modal-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px }
.modal-pe { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 16px }
.toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 30 }
.toast { background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: var(--sombra) }
.toast.erro { background: var(--laranja-forte) }
.sugestoes { border: 1px solid var(--linha); border-radius: 10px; margin-top: 4px; overflow: hidden }
.sugestoes button { display: block; width: 100%; text-align: left; border: 0; background: #fff; padding: 8px 11px; border-bottom: 1px solid var(--linha-2) }
.sugestoes button:hover { background: var(--nevoa-2) }

/* entrada */
.entrar { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px }
.entrar form { background: #fff; border-radius: 18px; padding: 28px; width: min(380px, 100%); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 14px }
.entrar img { height: 44px; align-self: center }
.erro-txt { color: var(--laranja-forte); font-weight: 600; margin: 0 }