/* ===========================================================================
   Emissor de Nota Fiscal — aparência

   TONS CLAROS, SEM TEMA ESCURO. Pedido do Caio: "preto cansa muito a vista".
   Quem usa isto passa o dia emitindo nota; a tela não pode brigar com os
   olhos.

   O laranja é o da logo da DS. Aparece pouco, só no que é ação — botão,
   link, foco. Fundo e texto ficam em cinzas quentes, que cansam menos que
   branco puro com preto puro.
   =========================================================================== */

:root {
    --laranja:      #F47B20;   /* da logo */
    --laranja-fundo:#FEF3EA;
    --laranja-forte:#D96610;

    --tinta:        #33302E;   /* texto: cinza quente, não preto */
    --tinta-fraca:  #6E6A66;
    --risco:        #E6E1DC;

    --fundo:        #FAF8F6;   /* creme, não branco puro */
    --papel:        #FFFFFF;

    --bom:          #2E7D4F;
    --bom-fundo:    #EAF5EE;
    --ruim:         #C0392B;
    --ruim-fundo:   #FCEDEB;
    --aviso:        #B7791F;
    --aviso-fundo:  #FDF6E7;

    --raio:         10px;
    --sombra:       0 1px 3px rgba(51,48,46,.08), 0 1px 2px rgba(51,48,46,.04);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 15px/1.55 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--tinta);
    background: var(--fundo);
}

h1 { font-size: 22px; margin: 0 0 4px; font-weight: 600; }
h2 { font-size: 17px; margin: 0 0 10px; font-weight: 600; }
a  { color: var(--laranja-forte); }

.sub  { color: var(--tinta-fraca); font-size: 14px; margin: 0 0 18px; }
.dica { color: var(--tinta-fraca); font-size: 13px; }

/* --------------------------------------------------------------- login */
.tela-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    /* um creme um pouco mais quente que o resto, pra tela de entrada não
       parecer uma página de erro em branco */
    background: linear-gradient(160deg, #FDFBF9 0%, #F6F1EC 100%);
}

.caixa-login {
    width: 100%;
    max-width: 380px;
    background: var(--papel);
    border: 1px solid var(--risco);
    border-radius: 14px;
    padding: 34px 30px;
    box-shadow: 0 4px 20px rgba(51,48,46,.07);
}

.caixa-login .marca { text-align: center; margin-bottom: 22px; }
.caixa-login .marca img { max-width: 190px; height: auto; }

.caixa-login label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 16px 0 5px;
}

.caixa-login input {
    width: 100%;
    padding: 11px 12px;
    font-size: 15px;
    color: var(--tinta);
    background: var(--papel);
    border: 1px solid var(--risco);
    border-radius: var(--raio);
}
.caixa-login input:focus {
    outline: none;
    border-color: var(--laranja);
    box-shadow: 0 0 0 3px var(--laranja-fundo);
}

.caixa-login .botao { width: 100%; margin-top: 22px; padding: 12px; font-size: 15px; }

.rodape-login {
    margin: 20px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--tinta-fraca);
}

/* -------------------------------------------------------------- botões */
.botao {
    display: inline-block;
    padding: 9px 18px;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--laranja);
    border: 1px solid var(--laranja);
    border-radius: var(--raio);
    cursor: pointer;
    text-decoration: none;
}
.botao:hover { background: var(--laranja-forte); border-color: var(--laranja-forte); }

.botao.vazado {
    color: var(--laranja-forte);
    background: var(--papel);
    border-color: var(--risco);
}
.botao.vazado:hover { border-color: var(--laranja); background: var(--laranja-fundo); }

/* -------------------------------------------------------------- recados */
.recado {
    padding: 11px 14px;
    border-radius: var(--raio);
    font-size: 14px;
    margin: 0 0 16px;
    border: 1px solid transparent;
}
.recado.bom   { background: var(--bom-fundo);   color: var(--bom);   border-color: #CDE6D8; }
.recado.ruim  { background: var(--ruim-fundo);  color: var(--ruim);  border-color: #F3D2CE; }
.recado.aviso { background: var(--aviso-fundo); color: var(--aviso); border-color: #F0E0BC; }

/* ---------------------------------------------------------------- topo */
.faixa-teste {
    background: var(--aviso-fundo);
    color: var(--aviso);
    border-bottom: 1px solid #F0E0BC;
    text-align: center;
    padding: 7px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
}

.topo {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 12px 24px;
    background: var(--papel);
    border-bottom: 1px solid var(--risco);
}
.topo .marca img { height: 30px; display: block; }
.topo .empresa { line-height: 1.25; }
.topo .empresa strong { display: block; font-size: 14px; }
.topo .empresa small  { color: var(--tinta-fraca); font-size: 12px; }

.topo nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.topo nav a {
    padding: 7px 12px;
    border-radius: var(--raio);
    color: var(--tinta-fraca);
    text-decoration: none;
    font-size: 14px;
}
.topo nav a:hover  { background: var(--fundo); color: var(--tinta); }
.topo nav a.ativo  { background: var(--laranja-fundo); color: var(--laranja-forte); font-weight: 600; }

.topo .usuario { font-size: 13px; color: var(--tinta-fraca); text-align: right; }
.topo .usuario .sair { display: block; font-size: 12px; }

/* ------------------------------------------------------------ conteúdo */
.conteudo { max-width: 1000px; margin: 26px auto; padding: 0 20px; }

.caixa {
    background: var(--papel);
    border: 1px solid var(--risco);
    border-radius: 12px;
    box-shadow: var(--sombra);
    margin-bottom: 18px;
}
.caixa .corpo { padding: 22px 24px; }

.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ficha .largo { grid-column: 1 / -1; }
.ficha label  { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.ficha input, .ficha select, .ficha textarea {
    width: 100%;
    padding: 9px 11px;
    font: inherit;
    color: var(--tinta);
    background: var(--papel);
    border: 1px solid var(--risco);
    border-radius: var(--raio);
}
.ficha input:focus, .ficha select:focus, .ficha textarea:focus {
    outline: none;
    border-color: var(--laranja);
    box-shadow: 0 0 0 3px var(--laranja-fundo);
}

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--tinta-fraca);
    padding: 8px 10px;
    border-bottom: 1px solid var(--risco);
}
.tabela td { padding: 10px; border-bottom: 1px solid var(--risco); }
.tabela tr:last-child td { border-bottom: none; }

.lista-passos { list-style: none; padding: 0; margin: 0; }
.lista-passos li {
    display: flex;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--risco);
}
.lista-passos li:last-child { border-bottom: none; }
.lista-passos .marca-passo {
    width: 24px; height: 24px; flex: none;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700;
    background: var(--fundo); color: var(--tinta-fraca);
    border: 1px solid var(--risco);
}
.lista-passos .feito .marca-passo {
    background: var(--bom-fundo); color: var(--bom); border-color: #CDE6D8;
}

@media (max-width: 700px) {
    .topo { flex-wrap: wrap; gap: 12px; }
    .ficha { grid-template-columns: 1fr; }
}