* { box-sizing: border-box }
body {
    margin: 0; padding: 1rem 1.25rem 3rem;
    font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #1b2430; background: #f4f6f8;
}
a { color: #0b63c5 }
h1 { font-size: 1.15rem; margin: 0 }
h2 { font-size: .95rem; margin: 0 0 .6rem; text-transform: uppercase; letter-spacing: .04em; color: #5a6675 }
h3 { font-size: .85rem; margin: 1rem 0 .4rem; color: #5a6675 }
small { color: #7a8694; font-size: .8em; display: block }

header {
    display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
    justify-content: space-between; padding-bottom: .75rem; margin-bottom: .75rem;
    border-bottom: 2px solid #d9e0e7;
}
header .meta { color: #5a6675; font-size: .85rem }

/* filtros */
.filtros {
    display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: flex-end;
    background: #fff; border: 1px solid #dde3e9; border-radius: 6px; padding: .75rem; margin-bottom: .75rem;
}
.filtros label { display: flex; flex-direction: column; font-size: .75rem; color: #5a6675 }
.filtros input, .filtros select {
    font: inherit; padding: .3rem .4rem; border: 1px solid #c4ccd5; border-radius: 4px; background: #fff;
}
.filtros .acoes { display: flex; gap: .5rem; margin-left: auto }
button, .btn {
    font: inherit; padding: .35rem .9rem; border-radius: 4px; border: 1px solid #0b63c5;
    background: #0b63c5; color: #fff; cursor: pointer; text-decoration: none;
}
.btn { background: #fff; color: #0b63c5 }

.resumo { margin: .5rem 0 }
.aviso {
    background: #fff6e0; border-left: 4px solid #e0a800; padding: .55rem .75rem;
    margin: .5rem 0; border-radius: 0 4px 4px 0;
}
.erro { background: #fdeaea; border-left: 4px solid #c62828; padding: .5rem .75rem; margin: .5rem 0 }
.sucesso { background: #e8f6ec; border-left: 4px solid #2e7d32; padding: .5rem .75rem; margin: .5rem 0 }
.alerta { color: #a05a00; cursor: help; border-bottom: 1px dotted }
.sem { color: #8a95a3; font-style: italic }
.off { color: #a8b1bb; cursor: not-allowed; border-bottom: 1px dotted }
.tag {
    display: inline-block; background: #e7ecf1; color: #4a5666; border-radius: 3px;
    padding: 0 .35rem; font-size: .75rem; cursor: help;
}

/* tabelas */
.rolagem { overflow-x: auto }
table.lista { width: 100%; border-collapse: collapse; background: #fff; font-size: .87rem }
table.lista th, table.lista td { padding: .4rem .5rem; border-bottom: 1px solid #e7ecf1; text-align: left; vertical-align: top }
table.lista thead th { background: #eef2f6; position: sticky; top: 0; font-size: .78rem; text-transform: uppercase; color: #5a6675 }
table.lista thead th a { color: inherit; text-decoration: none }
table.lista .num { text-align: right; white-space: nowrap }
table.lista tbody tr:hover { background: #f7fafd }
table.lista tr.cancelada td { color: #99a3af; text-decoration: line-through }
table.lista tr.cancelada td.arquivos, table.lista tr.cancelada td:last-child { text-decoration: none }
table.lista tr.total td { font-weight: 600; background: #f2f6fa }
table.compacta { font-size: .8rem }
.arquivos a { margin-right: .5rem }
.vazio { text-align: center; color: #8a95a3; padding: 1.5rem }
.paginacao { margin: .75rem 0; display: flex; gap: 1rem; align-items: center }

/* detalhe */
.bloco { background: #fff; border: 1px solid #dde3e9; border-radius: 6px; padding: .85rem; margin-bottom: .75rem }
.bloco.duplo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem .9rem }
.grade.um { grid-template-columns: 1fr }
.campo { display: flex; flex-direction: column; border-bottom: 1px dotted #e7ecf1; padding-bottom: .2rem }
.campo span { font-size: .72rem; text-transform: uppercase; color: #7a8694; letter-spacing: .03em }
.campo b { font-weight: 600 }
.campo b.pre { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; word-break: break-all }
pre { white-space: pre-wrap; background: #f7fafd; border: 1px solid #e7ecf1; padding: .6rem; border-radius: 4px; margin: 0 }
iframe.danfe { width: 100%; height: 80vh; border: 1px solid #dde3e9; background: #fff }

/* usuários / senha */
.bloco.estreito { max-width: 380px }
.filtros.sem-borda { border: 0; padding: 0; background: none; margin: 0 }
.filtros label.inline { flex-direction: row; align-items: center; gap: .3rem; padding-bottom: .35rem }
form.vertical { display: flex; flex-direction: column; gap: .7rem }
form.vertical label { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; color: #5a6675 }
form.vertical input { font: inherit; padding: .4rem; border: 1px solid #c4ccd5; border-radius: 4px }
form.vertical .acoes { display: flex; gap: .5rem; align-items: center }
button.link {
    background: none; border: 0; color: #0b63c5; padding: 0 .35rem 0 0;
    cursor: pointer; font: inherit; text-decoration: underline;
}
.acoes-linha form { display: inline }
.acoes-linha .inline-form input { width: 7rem; font: inherit; padding: .15rem .3rem; border: 1px solid #c4ccd5; border-radius: 3px }
table.lista tr.inativo td { color: #a8b1bb }

/* login */
.login { max-width: 300px; margin: 12vh auto; background: #fff; padding: 1.5rem; border: 1px solid #dde3e9; border-radius: 6px }
.login .sub { color: #7a8694; margin: .2rem 0 1rem }
.login form { display: flex; flex-direction: column; gap: .7rem }
.login label { display: flex; flex-direction: column; font-size: .78rem; color: #5a6675; gap: .2rem }
.login input { font: inherit; padding: .4rem; border: 1px solid #c4ccd5; border-radius: 4px }