html, body { background: #F5F3EF; }

/* Carregando o sistema */
.carregando { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #3E4A3D; }
.carregando-marca { color: #F5F3EF; font: 700 2rem/1 system-ui, Roboto, sans-serif; letter-spacing: .35em; animation: pulsar 1.4s ease-in-out infinite alternate; }
@keyframes pulsar { from { opacity: .45; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

#blazor-error-ui { background: #fff3cd; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 2000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mud-table-row.linha-clicavel { cursor: pointer; }
.dias-semana { display: flex; flex-wrap: wrap; gap: 4px; }
.dias-semana .mud-button-root { min-width: 46px; }
.tabela-rolavel { overflow-x: auto; }
.marca { font-weight: 700; letter-spacing: .2em; }

/* Login */
.tela-login {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: radial-gradient(120% 120% at 0% 0%, rgba(199,125,26,.28), transparent 55%), linear-gradient(135deg, #2E382D 0%, #3E4A3D 55%, #6B7466 100%);
}
.tela-login .marca-login { text-align: center; color: #3E4A3D; font: 700 1.8rem/1 system-ui, Roboto, sans-serif; letter-spacing: .3em; }

/* Etiquetas */
.etiqueta { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.etiqueta.PENDENTE { background: #fff1d6; color: #8a5a00; }
.etiqueta.LIBERADA { background: #dff3e5; color: #1d6b3c; }
.etiqueta.NEGADA { background: #fde2e2; color: #a12828; }
.etiqueta.CANCELADA { background: #eeeeee; color: #777; }
.etiqueta.FORA { background: #e3ecf7; color: #234d80; }
.etiqueta.RETORNOU { background: #eeeeee; color: #555; }
.etiqueta.EMERGENCIA { background: #b42318; color: #fff; }
.etiqueta.alerta { background: #fde2e2; color: #a12828; }
.etiqueta.offline { background: #eceff1; color: #455a64; }
.etiqueta.EXPEDIENTE { background: #e3ecf7; color: #234d80; }
.etiqueta.SAIDA_SEM_AUTORIZACAO, .etiqueta.NAO_SAIU, .etiqueta.NAO_RETORNOU { background: #fde2e2; color: #a12828; }
.etiqueta.SAIDA_FORA_EXPEDIENTE, .etiqueta.ENTRADA_FORA_TURNO, .etiqueta.PEDIDO_SEM_RESPOSTA { background: #fff1d6; color: #8a5a00; }
.etiqueta.ENTRADAFORATURNO, .etiqueta.SAIDAFORAEXPEDIENTE { background: #fff1d6; color: #8a5a00; }
.etiqueta.SAIDASEMAUTORIZACAO { background: #fde2e2; color: #a12828; }
.etiqueta.ENTRADAOFFLINE { background: #eceff1; color: #455a64; }
.placa { font-family: "Roboto Mono", ui-monospace, Consolas, monospace; font-weight: 700; letter-spacing: .06em; background: #fff; border: 1.5px solid #263238; border-radius: 4px; padding: 0 5px; white-space: nowrap; font-size: .85rem; }

/* Foto / iniciais da pessoa */
.avatar { width: var(--t, 44px); height: var(--t, 44px); border-radius: 12px; object-fit: cover; flex: none; background: #d9d4c7; display: grid; place-items: center;
          font-weight: 700; color: #3E4A3D; font-size: calc(var(--t, 44px) * .38); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ===================== App da portaria (celular) ===================== */
.app-portaria { min-height: 100vh; background: #F5F3EF; }
.app-portaria .app-conteudo { padding: 64px 12px 96px; max-width: 760px; margin: 0 auto; }
.app-portaria .mud-appbar .status { border-radius: 16px; padding: 3px 10px; font-size: .8rem; font-weight: 600; color: #fff; white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }

/* Botões grandes do início */
.grade-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.botao-grande { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 118px; border-radius: 18px; border: none;
                color: #fff; font: 700 1.15rem/1.15 system-ui, Roboto, sans-serif; text-align: center; padding: 12px; cursor: pointer; text-decoration: none;
                box-shadow: 0 2px 6px rgba(0,0,0,.18); position: relative; -webkit-tap-highlight-color: transparent; }
.botao-grande:active { transform: scale(.98); }
.botao-grande .mud-icon-root { font-size: 2.6rem; }
.botao-grande small { font-weight: 500; font-size: .8rem; opacity: .9; }
.botao-grande .contador { position: absolute; top: 8px; right: 10px; background: rgba(255,255,255,.95); color: #222; border-radius: 999px; min-width: 28px; padding: 2px 8px; font-size: .9rem; }
.botao-grande.entrada { background: #2E7D32; }
.botao-grande.saida { background: #C62828; }
.botao-grande.carga { background: #C77D1A; }
.botao-grande.dentro { background: #3E4A3D; }
.botao-grande.liberacoes { background: #1E5AA8; }
.botao-grande.visitante { background: #6A4C93; }
.botao-grande.largo { grid-column: span 2; min-height: 84px; flex-direction: row; }

/* Busca e lista de pessoas */
.busca-grande input { font-size: 1.25rem !important; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cartao-pessoa { background: #fff; border-radius: 14px; border: 1px solid #e3ded2; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px;
                 text-align: center; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; position: relative; min-height: 172px; }
.cartao-pessoa:active { background: #eef6ee; transform: scale(.98); }
.cartao-pessoa.saindo:active { background: #fbeeee; }
.cartao-pessoa.desligado { opacity: .5; }
.cartao-pessoa .apelido { font-weight: 700; font-size: 1.05rem; line-height: 1.15; }
.cartao-pessoa .nome { font-size: .78rem; color: #5f5a4e; line-height: 1.15; }
.cartao-pessoa .marca-canto { position: absolute; top: 6px; right: 6px; }
.secao-titulo { font-weight: 700; color: #5f5a4e; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin: 14px 2px 6px; }

.linha-pessoa { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff; border-radius: 12px; border: 1px solid #e3ded2; margin-bottom: 6px; }
.linha-pessoa.visitante { border-left: 5px solid #6A4C93; }
.linha-pessoa .info { flex: 1; min-width: 0; }
.linha-pessoa .info b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-pessoa .info small { color: #5f5a4e; display: block; }

.rodape-fixo { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(245,243,239,.96);
               border-top: 1px solid #e3ded2; z-index: 5; }
.rodape-fixo > * { max-width: 736px; margin: 0 auto; }
.botao-acao { min-height: 56px; font-size: 1.1rem !important; font-weight: 700 !important; border-radius: 14px !important; }

/* Foto */
.foto-botao { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; border: 2px dashed #b9b2a2; border-radius: 14px; background: #fff;
              cursor: pointer; font-weight: 600; color: #3E4A3D; padding: 10px; width: 100%; }
.foto-previa { width: 100%; border-radius: 14px; display: block; max-height: 320px; object-fit: cover; background: #ddd; }
.foto-mini { width: 96px; height: 72px; border-radius: 8px; object-fit: cover; background: #ddd; }

/* Material (calcítica / dolomítica) */
.materiais { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.botao-material { min-height: 64px; border-radius: 14px; border: 3px solid var(--cor); background: #fff; color: var(--cor); font: 700 1.15rem system-ui, Roboto, sans-serif; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.botao-material small { font-size: .8rem; font-weight: 600; opacity: .85; }
.botao-material.escolhido { background: var(--cor); color: #fff; }
.campo-placa input { font: 700 1.6rem "Roboto Mono", ui-monospace, Consolas, monospace !important; letter-spacing: .12em; text-transform: uppercase; text-align: center; }

/* Liberações */
.cartao-liberacao { background: #fff; border-radius: 14px; border: 1px solid #e3ded2; padding: 12px; margin-bottom: 10px; }
.cartao-liberacao.PENDENTE { border-left: 6px solid #E0A100; }
.cartao-liberacao.LIBERADA { border-left: 6px solid #2E7D32; }
.cartao-liberacao.NEGADA { border-left: 6px solid #C62828; }
.cartao-liberacao.EMERGENCIA { border-left: 6px solid #b42318; background: #fff7f6; }
.cartao-liberacao.destaque { box-shadow: 0 0 0 3px #1E5AA8; }
.pulsando { animation: pulsar 1s ease-in-out infinite alternate; }

/* Painel */
.kpi { background: #fff; }
.kpi-icone { width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; }
.kpi-link { cursor: pointer; }
.kpi-link:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.barra-material { height: 10px; border-radius: 6px; background: var(--cor); }

/* Lista de evacuação impressa */
@media print {
    .nao-imprimir, .mud-appbar, .rodape-fixo, .mud-drawer, .mud-snackbar-provider { display: none !important; }
    .app-portaria .app-conteudo, .mud-main-content { padding: 0 !important; }
    body, html, .app-portaria { background: #fff !important; }
    .linha-pessoa { break-inside: avoid; border: 1px solid #999; }
}
.so-impressao { display: none; }
@media print { .so-impressao { display: block; } .caixa-marcar { display: inline-block; } }
.caixa-marcar { width: 18px; height: 18px; border: 1.5px solid #333; flex: none; }