/* Componentes de tela: cabecalho, KPI, painel lateral, dialogo, aviso rapido e telas vazias. */
.pagina { display: flex; flex-direction: column; gap: 20px; }
.cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.cab .tit { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cab h1 { font: 600 calc(26px * var(--fs, 1))/1.2 var(--font-heading); letter-spacing: -.01em; }
.cab .sub { font-size: calc(13.5px * var(--fs, 1)); color: var(--color-neutral-300); }
.cab .acoes { display: flex; align-items: center; gap: 10px; flex: none; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Quadrados com informacao reagem ao mouse (anel de 1 px no foco, sombra suave, sobe 1 px), como os KPIs do Chamados; so ao passar o
   mouse, sem clique, e nunca nos que tem campos (o anel de foco do campo ja marca o que esta ativo). */
.conteudo .card:not(:has(input, select, textarea)) { transition: box-shadow .15s ease, transform .15s ease; }
.conteudo .card:not(:has(input, select, textarea)):hover { box-shadow: 0 0 0 1px var(--color-focus), 0 8px 20px rgba(3, 31, 41, .08); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .conteudo .card:not(:has(input, select, textarea)):hover { transform: none; } }
.kpi .topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi .ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--color-accent-900); color: var(--color-accent-300); }
.kpi .ic .ph { font-size: calc(16px * var(--fs, 1)); }
.kpi .val { font: 600 calc(21px * var(--fs, 1))/1.2 var(--font-heading); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .det { font-size: calc(12px * var(--fs, 1)); color: var(--color-neutral-300); }
.kpi .val.ok { color: var(--c-ok); }
.kpi .val.err { color: var(--c-err); }
.kpi .ic.ok { background: var(--c-ok-soft); color: var(--c-ok); }
.kpi .ic.saida { background: var(--c-out-soft); color: var(--c-out); }
.kpi .ic.warn { background: var(--c-warn-soft); color: var(--c-warn); }
.kpi .ic.err { background: var(--c-err-soft); color: var(--c-err); }

.faixa { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; font-size: calc(13px * var(--fs, 1)); font-weight: 600; }
.faixa .ph { font-size: calc(18px * var(--fs, 1)); flex: none; }
.faixa > span { flex: 1; min-width: 0; }
.faixa.warn { background: var(--c-warn-soft); color: var(--c-warn); box-shadow: inset 0 0 0 1px var(--c-warn-bar); }
.faixa.err { background: var(--c-err-soft); color: var(--c-err); }
.faixa.info { background: var(--c-muted-soft); color: var(--color-text); font-weight: 400; box-shadow: inset 0 0 0 1px var(--color-divider); }
.faixa.info .ph { color: var(--color-neutral-300); }

/* Painel lateral: substitui os modais de formulario. */
.camada { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
.camada .fundo { position: absolute; inset: 0; border: 0; cursor: default; animation: fadeIn .2s ease both; }
.drawer { position: relative; width: var(--drawer-w); max-width: 100%; height: 100%; display: flex; flex-direction: column; animation: slideIn .32s cubic-bezier(.2, .8, .2, 1) both; }
.drawer .dcab { flex: none; display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--color-divider); }
.drawer .dic { width: 38px; height: 38px; border-radius: 12px; background: var(--color-accent-900); color: var(--color-accent-300); display: grid; place-items: center; flex: none; }
.drawer .dic .ph { font-size: calc(19px * var(--fs, 1)); }
.drawer .dtit { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.drawer .dtit b { font-size: calc(17px * var(--fs, 1)); font-weight: 600; }
.drawer .dtit span { font-size: calc(12.5px * var(--fs, 1)); color: var(--color-neutral-300); }
.drawer .dabas { flex: none; display: flex; gap: 22px; padding: 0 20px; border-bottom: 1px solid var(--color-divider); }
.drawer .dcorpo { flex: 1; min-height: 0; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.drawer .drod { flex: none; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--color-divider); }
.drawer .derro { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--c-err-soft); font-size: calc(13px * var(--fs, 1)); font-weight: 600; color: var(--c-err); animation: fadeUp .2s ease both; }
.drawer .derro .ph { font-size: calc(18px * var(--fs, 1)); }
.dados { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px 16px; font-size: calc(13.5px * var(--fs, 1)); }
.dados dt { color: var(--color-neutral-300); font-size: calc(12.5px * var(--fs, 1)); font-weight: 600; }
.dados dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Dialogo de confirmacao proprio (no lugar de alert, confirm e prompt). */
.dialogo-camada { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; animation: fadeIn .15s ease both; }
.dialogo { width: 420px; max-width: calc(100vw - 32px); padding: 22px; display: flex; flex-direction: column; gap: 14px; animation: fadeUp .2s ease both; }
.dialogo .dic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--color-accent-900); color: var(--color-accent-300); }
.dialogo .dic .ph { font-size: calc(22px * var(--fs, 1)); }
.dialogo.perigo .dic { background: var(--c-err-soft); color: var(--c-err); }
.dialogo.aviso .dic { background: var(--c-warn-soft); color: var(--c-warn); }
.dialogo b { font-size: calc(17px * var(--fs, 1)); font-weight: 600; }
.dialogo .txt { font-size: calc(13.5px * var(--fs, 1)); color: var(--color-neutral-300); text-wrap: pretty; white-space: pre-line; }
.dialogo .bts { display: flex; justify-content: flex-end; gap: 10px; }

/* Aviso rapido: embaixo, no centro, por 2,6 s (o CC.toast do nucleo cria o elemento). */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; color: #fefefe; font-size: calc(13.5px * var(--fs, 1)); animation: toastIn .28s cubic-bezier(.2, .8, .2, 1) both; pointer-events: none; }
.toast .ph, .toast .ph-fill { font-size: calc(18px * var(--fs, 1)); color: #5fd0ee; }

/* Sucesso: check, estouro e simbolo da Construtec. */
.ok-tela { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px 12px; text-align: center; flex: 1; }
.ok-tela b { font-size: calc(18px * var(--fs, 1)); font-weight: 600; }
.ok-tela span { font-size: calc(13.5px * var(--fs, 1)); color: var(--color-neutral-300); max-width: 340px; }

/* Tela em construcao e estados vazios. */
.construcao { padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
.construcao .lista { display: flex; flex-direction: column; gap: 10px; }
.construcao .lista b { font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.construcao .item { display: flex; gap: 10px; font-size: calc(13.5px * var(--fs, 1)); line-height: 1.5; }
.construcao .item .ph { font-size: calc(16px * var(--fs, 1)); color: var(--color-accent-300); margin-top: 2px; flex: none; }
.construcao .lado { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; background: var(--color-bg); font-size: calc(13px * var(--fs, 1)); color: var(--color-neutral-300); }
.construcao .lado .btn { align-self: flex-start; }
.vazio-tela { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 16px; text-align: center; color: var(--color-neutral-300); }
.vazio-tela .ph { font-size: calc(32px * var(--fs, 1)); color: var(--color-accent-300); }
.vazio-tela b { color: var(--color-text); font-size: calc(16px * var(--fs, 1)); }
.carregando { display: flex; align-items: center; gap: 10px; padding: 24px 0; color: var(--color-neutral-300); font-size: calc(13.5px * var(--fs, 1)); }
/* Tela de abertura animada: logo que respira sobre um brilho, barra de progresso e pontinhos no texto. */
.abertura { position: relative; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 14px; min-height: 100vh; padding: 28px; color: var(--c-muted); font-size: calc(13.5px * var(--fs, 1)); background: linear-gradient(135deg, rgba(13, 127, 159, .06), transparent 40%), var(--color-bg); }
.abertura::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(13, 127, 159, .22), transparent 68%); animation: abertura-brilho 3.2s ease-in-out infinite; pointer-events: none; }
.abertura > * { position: relative; }
.abertura-logo { height: 52px; width: auto; max-width: 230px; object-fit: contain; margin-bottom: 8px; animation: abertura-entrada .7s ease-out both, abertura-respira 2.6s ease-in-out .7s infinite; }
.abertura-logo-escuro { display: none; }
[data-theme="escuro"] .abertura-logo-claro { display: none; }
[data-theme="escuro"] .abertura-logo-escuro { display: block; }
.abertura-barra { width: 180px; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(13, 127, 159, .18); }
.abertura-barra i { display: block; width: 40%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--color-accent-600), transparent); animation: abertura-barra 1.3s ease-in-out infinite; }
.abertura strong { font-weight: 600; letter-spacing: .01em; }
.abertura strong::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: abertura-pontos 1.4s steps(1, end) infinite; }
.abertura-lenta { opacity: 0; animation: abertura-aviso .4s ease-out 6s forwards; }
@keyframes abertura-aviso { to { opacity: 1; } }
@keyframes abertura-entrada { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes abertura-respira { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.045); opacity: .82; } }
@keyframes abertura-brilho { 0%, 100% { transform: scale(.85); opacity: .6; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes abertura-barra { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes abertura-pontos { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.spin { width: 26px; height: 26px; border-width: 3px; }
.abertura-logo { height: 48px; width: auto; max-width: 210px; object-fit: contain; margin-bottom: 6px; }
.abertura-logo-escuro { display: none; }
[data-theme="escuro"] .abertura-logo-claro { display: none; }
[data-theme="escuro"] .abertura-logo-escuro { display: block; }
.spin { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }

@media (max-width: 1279px) {
  .construcao { grid-template-columns: minmax(0, 1fr); }
  .cab { flex-wrap: wrap; align-items: flex-start; }
}
.dados .entrada { color: var(--c-ok); }
/* A abertura é o aviso de que o app está carregando: mantém a animação mesmo com "reduzir movimento" (só sem o logo respirando). */
@media (prefers-reduced-motion: reduce) {
  .abertura::before { animation: abertura-brilho 3.2s ease-in-out infinite !important; }
  .abertura-logo { animation: abertura-entrada .7s ease-out both !important; }
  .abertura-barra i { animation: abertura-barra 1.3s ease-in-out infinite !important; }
  .abertura strong::after { animation: abertura-pontos 1.4s steps(1, end) infinite !important; }
  .abertura-lenta { animation: abertura-aviso .4s ease-out 6s forwards !important; }
}