:root {
    --azul: #002A87;
    --lima: #AEC936;
    --cinza: #f4f5f7;
    --borda: #d9dce1;
    --texto: #1f2430;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 14px;
    color: var(--texto);
    background: var(--cinza);
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    background: var(--azul);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 56px;
}

.topbar .brand { color: #fff; font-weight: 700; font-size: 16px; }
.topbar .brand:hover { text-decoration: none; }

.nav { display: flex; gap: 6px; }
.nav-item {
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 600;
}
.nav-item:hover { background: rgba(255,255,255,.15); text-decoration: none; }
.nav-item.active { background: var(--lima); color: var(--azul); }

.content { padding: 22px; max-width: 1200px; width: 100%; margin: 0 auto; }
/* /testar tem barra lateral + comparativo A/B lado a lado: precisa de mais largura que as outras telas. */
.content:has(.testar-layout) { max-width: 1700px; }

h1 { color: var(--azul); font-size: 22px; margin: 4px 0 16px; }
h2 { color: var(--azul); font-size: 17px; margin: 0 0 8px; }
h3 { color: var(--azul); font-size: 15px; margin: 16px 0 6px; }
.sub { color: #5b6270; margin: 0 0 18px; }

/* Menu de cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 18px;
    display: block;
    transition: box-shadow .15s, border-color .15s;
}
.card:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.08); border-color: var(--lima); }
.card p { color: #5b6270; margin: 0; }

/* Formularios */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.ocr-grid { grid-template-columns: 1fr 120px 120px 140px; align-items: end; }
.campo { display: flex; flex-direction: column; margin-bottom: 12px; }
.campo label { font-weight: 600; margin-bottom: 4px; color: #333; }

input, select, textarea {
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 14px;
    background: #fff;
    width: 100%;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--lima); border-color: var(--lima); }

.tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.tab {
    border: 1px solid var(--borda);
    background: #fff;
    padding: 6px 14px;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    font-weight: 600;
    color: #5b6270;
    width: auto;
}
.tab.ativa { background: var(--azul); color: #fff; border-color: var(--azul); }
.campo-btn { justify-content: flex-end; }

/* Botoes */
.btn, .btn-sec {
    background: var(--lima);
    color: var(--azul);
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-weight: 700;
    cursor: pointer;
    width: auto;
}
.btn:hover, .btn-sec:hover { filter: brightness(.95); }
.btn:disabled, .btn-sec:disabled { opacity: .55; cursor: default; }
.btn-sec { background: #fff; border: 1px solid var(--azul); }

.acoes { display: flex; align-items: center; gap: 14px; margin: 8px 0 4px; }
.status { color: #5b6270; }

/* Resultado */
.resultado { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 16px; margin-top: 16px; }
.metricas {
    display: flex; flex-wrap: wrap; gap: 18px;
    background: #eef1f6; border-radius: 6px; padding: 8px 12px; font-size: 13px;
}
.resposta {
    background: #0f1728; color: #e6edf7;
    border-radius: 8px; padding: 14px;
    white-space: pre-wrap; word-break: break-word;
    max-height: 460px; overflow: auto;
    font-family: Consolas, "Courier New", monospace; font-size: 13px;
}
.erro { background: #fdecec; color: #b3261e; border: 1px solid #f3c2c0; border-radius: 6px; padding: 10px 12px; margin: 10px 0; white-space: pre-wrap; }
.aviso { background: #fff7e6; color: #8a5a00; border: 1px solid #ffe1a6; border-radius: 6px; padding: 10px 12px; margin-bottom: 16px; }
.aviso-ok {
    background: #eaf7ea; color: #1b7a1b; border: 1px solid #b7e2b7; border-radius: 6px;
    padding: 10px 12px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}

/* Testar Modelo: layout com barra lateral de cards + conteudo */
.testar-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
.fila-lateral { display: flex; flex-direction: column; gap: 8px; }
.fila-lateral h2 { margin-top: 0; }
.card-teste {
    background: #fff; border: 1px solid var(--borda); border-radius: 8px;
    padding: 10px 12px; font-size: 12px; line-height: 1.5; cursor: pointer;
}
.card-teste:hover { border-color: var(--lima); }
.card-teste.sel { border-color: var(--azul); background: #eef1f6; }
.card-teste.rodando { cursor: default; border-color: var(--lima); background: #f7fbe9; }

/* Extrair de imagem/PDF: arraste-e-solte sobre o InputFile nativo */
.dropzone {
    position: relative;
    border: 2px dashed var(--borda);
    border-radius: 8px;
    padding: 24px 12px;
    text-align: center;
    color: #5b6270;
}
.dropzone.ativa { border-color: var(--lima); background: #f7fbe9; }
.dropzone input[type=file] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}

/* Comparativo: rodadas em segundo plano, lado a lado */
.resultados-cmp { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin-top: 16px; }
.card-cmp { flex: 1 1 480px; min-width: 0; margin-top: 0; }
.rodando { color: var(--azul); font-weight: 700; }
.resposta-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 6px; }
.resposta-head h3 { margin: 0; }
.resposta-acoes { display: flex; gap: 6px; }
.btn-mini {
    background: #fff; border: 1px solid var(--azul); color: var(--azul);
    border-radius: 6px; padding: 3px 12px; font-weight: 600; font-size: 12px;
    cursor: pointer; width: auto;
}
.btn-mini:hover { background: #eef1f6; }

/* Tabelas */
.grid-wrap { overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--borda); border-radius: 8px; }
.grid th, .grid td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); font-size: 13px; }
.grid th { background: var(--azul); color: #fff; position: sticky; top: 0; }
.grid tbody tr:hover { background: #f0f4ff; cursor: pointer; }
.grid tr.sel { background: #e3ebff; }
.mono { font-family: Consolas, "Courier New", monospace; }
.extras { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Historico */
.hist-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.hist-resposta { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 14px; min-height: 200px; }

@media (max-width: 900px) {
    .form-grid, .ocr-grid, .hist-layout, .testar-layout { grid-template-columns: 1fr; }
}