/* Mesmas cores, fontes e cantos do site da DS Informatica (style.css) */
:root {
    --accent:     #f97316;
    --accent-2:   #ea6c00;
    --accent-glow:rgba(249,115,22,0.45);
    --bg:         #080808;
    --bg-2:       #0d0d0d;
    --surface:    #181818;
    --surface-2:  #222222;
    --border:     rgba(255,255,255,0.06);
    --border-hi:  rgba(249,115,22,0.5);
    --text:       #ffffff;
    --text-2:     #a0a0a0;
    --text-3:     #606060;
    --ok:         #22c55e;
    --ok-fundo:   rgba(34,197,94,0.12);
    --erro:       #f87171;
    --erro-fundo: rgba(248,113,113,0.12);
    --aviso:      #fbbf24;
    --aviso-fundo:rgba(251,191,36,0.10);
    --radius:     16px;
    --radius-sm:  10px;
    --shadow:     0 4px 32px rgba(0,0,0,0.6);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}


/* ------------------------------------------------------------- fundo
   Mesma grade de 60px e spotlight laranja do site, com um padrao de
   notas/QR por tras. Camada fixa: vale pra todas as paginas.        */
body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(ellipse 70vw 55vh at 12% -8%, rgba(249,115,22,0.10), transparent 62%),
        radial-gradient(circle 420px at 92% 6%, rgba(249,115,22,0.09), transparent 70%),
        radial-gradient(circle 360px at 70% 108%, rgba(234,108,0,0.07), transparent 70%),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><g fill='none' stroke='%23f97316' stroke-opacity='.11' stroke-width='1.2'><g transform='translate(26 28) rotate(-9)'><path d='M0 0h76v106l-9.5-8l-9.5 8l-9.5-8l-9.5 8l-9.5-8l-9.5 8l-9.5-8l-9.5 8z'/><path d='M13 22h50M13 38h50M13 54h30'/><rect x='44' y='66' width='19' height='19'/></g><g transform='translate(250 214) rotate(7)'><rect x='0' y='0' width='22' height='22'/><rect x='52' y='0' width='22' height='22'/><rect x='0' y='52' width='22' height='22'/><path d='M34 6h10M34 16h6M62 34h12M34 34h10M44 44h14M34 62h8M52 62h6M62 52v10'/></g><path d='M36 280v40M45 280v40M52 280v26M61 280v40M68 280v26M77 280v40M84 280v30M93 280v40'/><path d='M252 58h74M252 58v-9M326 58v-9' stroke-opacity='.08'/></g></svg>"),
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: auto, auto, auto, 400px 400px, 60px 60px, 60px 60px;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    animation: respira 14s ease-in-out infinite;
}
@keyframes respira { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* linha laranja embaixo do topo, igual a do hero do site */
.topo::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: .4;
}

h1, h2 { font-family: 'Syne', 'Inter', sans-serif; font-weight: 700; }

.mono { font-family: ui-monospace, Consolas, monospace; }
.hidden { display: none !important; }
.dir { text-align: right; }
a { color: var(--accent); }

/* ---------------------------------------------------------------- topo */
.topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 10px 24px;
    background: rgba(13,13,13,0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 10;
}
.topo .marca { display: flex; align-items: center; gap: 14px; }
.topo .marca img { height: 34px; width: auto; display: block; }
.topo .marca span {
    font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.95rem;
    color: var(--text-2); letter-spacing: .01em;
}
.topo nav { display: flex; gap: 2px; }
.topo nav a {
    padding: 7px 15px; border-radius: 8px; text-decoration: none;
    color: var(--text-2); font-size: 0.87rem; font-weight: 500;
    transition: all .2s;
}
.topo nav a:hover { color: var(--text); background: var(--surface); }
.topo nav a.ativo { color: #fff; background: var(--accent); }

.faixa-teste {
    margin: 0; padding: 10px 24px; text-align: center; font-weight: 600;
    font-size: 0.85rem; background: var(--aviso-fundo); color: var(--aviso);
    border-bottom: 1px solid var(--border);
}

/* -------------------------------------------------------------- cartao */
.cartao {
    max-width: 560px; margin: 28px auto; padding: 28px;
    background: rgba(24,24,24,0.82); backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.cartao.largo { max-width: 960px; }

.tela-login {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 20px;
}
/* computador em traco fino atras do cartao. Precisa ser ::after: o body
   E a tela de login, entao ::before ja e a camada de fundo do site. */
body.tela-login::after {
    content: ''; position: fixed; left: 50%; top: 50%; z-index: -1;
    width: min(720px, 150vw); aspect-ratio: 420 / 300;
    transform: translate(-50%, -52%);
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='300' viewBox='0 0 420 300'><g fill='none' stroke='%23f97316' stroke-linecap='round' stroke-linejoin='round'><g stroke-opacity='.28' stroke-width='2'><rect x='40' y='16' width='340' height='200' rx='14'/><path d='M192 216h36l8 46h-52z'/><path d='M140 266h140'/></g><g stroke-opacity='.17' stroke-width='1.3'><rect x='54' y='30' width='312' height='172' rx='7'/><path d='M54 52h312'/><circle cx='68' cy='41' r='3'/><circle cx='80' cy='41' r='3'/><circle cx='92' cy='41' r='3'/><path d='M88 78h70v86l-8.75-7l-8.75 7l-8.75-7l-8.75 7l-8.75-7l-8.75 7l-8.75-7l-8.75 7z'/><path d='M100 98h46M100 114h46M100 130h26'/><rect x='210' y='84' width='18' height='18'/><rect x='256' y='84' width='18' height='18'/><rect x='210' y='130' width='18' height='18'/><path d='M238 90h10M238 102h6M266 120h8M238 120h10M246 132h12M238 148h8M256 148h8M266 136v12'/><path d='M196 170h124'/></g><g stroke-opacity='.3' stroke-width='1.6'><path d='M8 74V30a10 10 0 0 1 10-10h34'/><path d='M412 74V30a10 10 0 0 0-10-10h-34'/><path d='M8 168v26'/><path d='M412 168v26'/></g></g></svg>") center / contain no-repeat;
    pointer-events: none;
}
.tela-login .cartao {
    max-width: 400px; width: 100%; text-align: center;
}
.tela-login .logo {
    display: block; width: 240px; max-width: 78%; height: auto;
    margin: 2px auto 22px;
}
.tela-login label { text-align: left; }
.tela-login h1 { font-size: 1.35rem; }

h1 { font-size: 1.5rem; margin-bottom: 20px; }
h2 { font-size: 1.15rem; margin-bottom: 12px; }
.sub { margin: -14px 0 22px; color: var(--text-3); font-size: 0.85rem; }

label {
    display: block; margin: 18px 0 7px; font-size: 0.78rem;
    color: var(--text-3); text-transform: uppercase; letter-spacing: .06em;
    font-weight: 600;
}

input, textarea, select {
    width: 100%; padding: 12px 14px; font-size: 1rem; font-family: inherit;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-2); color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
/* o Chrome pinta de azul o campo preenchido automaticamente; aqui nao */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset;
    caret-color: var(--text);
    transition: background-color 9999s ease-in-out 0s;
}

input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--border-hi);
    box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
}

button {
    font: inherit; cursor: pointer; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 11px 17px; transition: all .2s;
}
button:hover { border-color: var(--border-hi); }
button[type=submit], .principal {
    width: 100%; margin-top: 24px; padding: 15px; border: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; font-size: 1rem; font-weight: 700;
    box-shadow: 0 6px 24px rgba(249,115,22,0.25);
}
.principal:disabled { opacity: .35; cursor: default; box-shadow: none; }
button.link { border: 0; background: none; color: var(--accent); padding: 5px 9px; }
button.perigo, .perigo { border-color: rgba(248,113,113,0.4); color: var(--erro); }

/* ------------------------------------------------------------- atalhos */
.atalhos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.atalho {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 14px 16px; text-align: left; background: var(--bg-2);
}
.atalho:hover { background: var(--surface-2); border-color: var(--border-hi); }
.atalho strong { font-size: 0.92rem; font-weight: 600; }
.atalho span { font-size: 0.8rem; color: var(--text-3); }
.atalho b { font-size: 1rem; color: var(--accent); font-weight: 700; }

/* -------------------------------------------------------------- busca */
.resultados { display: grid; gap: 5px; margin-top: 7px; }
.resultado {
    display: flex; justify-content: space-between; gap: 12px; align-items: center;
    width: 100%; text-align: left; padding: 11px 14px; background: var(--bg-2);
}
.resultado.novo { border-style: dashed; border-color: var(--border-hi); }
.tag {
    font-size: 0.7rem; color: var(--accent); background: rgba(249,115,22,0.12);
    padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.vazio { color: var(--text-3); font-size: 0.87rem; padding: 12px 2px; }

.cliente {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 16px; margin-top: 8px;
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.cliente .mono { display: block; font-size: 0.8rem; color: var(--text-3); }

/* --------------------------------------------------------------- tipos */
.tipos { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
.tipo { padding: 15px 12px; font-size: 0.92rem; background: var(--bg-2); }
.tipo.escolhido {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; border-color: transparent; font-weight: 600;
}

.sugestoes { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 10px; }
.sugestoes .rotulo { font-size: 0.78rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.chip { padding: 6px 13px; font-size: 0.87rem; border-radius: 20px; background: var(--bg-2); }
.chip small { color: var(--text-3); margin-left: 6px; font-size: 0.75rem; }

/* ------------------------------------------------------------ mensagens */
/* diz por que o botao de emitir esta apagado */
.falta {
    margin-top: 10px; text-align: center; font-size: 0.85rem;
    color: var(--aviso);
}

#mensagem { margin-top: 20px; font-size: 0.93rem; }
#mensagem.ok {
    padding: 16px; border-radius: var(--radius-sm);
    background: var(--ok-fundo); color: var(--ok);
    border: 1px solid rgba(34,197,94,0.25);
}
#mensagem.erro {
    padding: 16px; border-radius: var(--radius-sm);
    background: var(--erro-fundo); color: var(--erro);
    border: 1px solid rgba(248,113,113,0.25);
}
.erro { color: var(--erro); }
.aviso {
    padding: 12px 14px; border-radius: var(--radius-sm);
    background: var(--aviso-fundo); color: var(--aviso); font-size: 0.85rem;
    border: 1px solid rgba(251,191,36,0.2);
}
.chave { font-size: 0.8rem; word-break: break-all; opacity: .85; }
.botao-pdf {
    display: inline-block; margin-top: 12px; padding: 10px 18px;
    border-radius: var(--radius-sm); text-decoration: none; font-weight: 600;
    font-size: 0.88rem; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

/* ------------------------------------------------------------- historico */
.filtros { display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end; }
.filtros input[name=q] { flex: 1 1 250px; }
.filtros label { margin: 0; display: flex; align-items: center; gap: 7px; text-transform: none; letter-spacing: 0; }
.filtros input[type=date] { width: auto; color-scheme: dark; }
.filtros button { margin: 0; }
.resumo { color: var(--text-3); font-size: 0.87rem; margin: 18px 0 10px; }

.lista { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.lista th {
    text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-3); font-weight: 600; padding: 9px 10px;
    border-bottom: 1px solid var(--border);
}
.lista td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.lista tr:hover td { background: rgba(255,255,255,0.02); }
.lista tr.cancelada td { opacity: .45; text-decoration: line-through; }
.lista small { display: block; font-size: 0.75rem; color: var(--text-3); }
.acoes { display: flex; gap: 5px; justify-content: flex-end; }
.mini {
    font-size: 0.75rem; padding: 6px 10px; border-radius: 8px; text-decoration: none;
    border: 1px solid var(--border); color: var(--text-2); background: var(--bg-2);
}
.mini:hover { border-color: var(--border-hi); color: var(--text); }
.selo { font-size: 0.72rem; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.selo.ok { background: var(--ok-fundo); color: var(--ok); }
.selo.erro { background: var(--erro-fundo); color: var(--erro); }
.selo.cancelada { background: var(--surface-2); color: var(--text-3); }

dialog {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0; max-width: 470px; background: var(--surface); color: var(--text);
}
dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
dialog .cartao { margin: 0; border: 0; box-shadow: none; }
.botoes { display: flex; gap: 9px; justify-content: flex-end; margin-top: 22px; }
.botoes button { margin: 0; width: auto; }

@media (max-width: 620px) {
    .topo { padding: 10px 16px; }
    .topo .marca span { display: none; }
    .cartao { margin: 14px; padding: 20px; }
    .lista th:nth-child(4), .lista td:nth-child(4) { display: none; }
    .acoes { flex-wrap: wrap; }
}