/* ============================================================
   Digitalizador Cartorário (PWA) — tokens
   ============================================================ */
:root{
  --ink:        #1B2A3C;
  --ink-soft:   #33465C;
  --paper:      #F6F4EC;
  --paper-card: #FFFFFF;
  --line:       #DDD6C6;
  --accent:     #8B2635;
  --accent-ink: #6E1D2A;
  --green:      #2F6B4F;
  --amber:      #9C6B1F;
  --red-bg:     #FBE9E9;
  --muted:      #6B6458;
  --serif: Georgia, 'Times New Roman', 'Palatino Linotype', serif;
  --sans:  -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:  'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(139,38,53,.05) 27px, rgba(139,38,53,.05) 28px),
    var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.45;
}

.app-header{
  display:flex;align-items:center;gap:14px;
  background:var(--ink);color:#F1EEE4;padding:18px 26px;border-bottom:4px solid var(--accent);
}
.brand{display:flex;align-items:center;gap:14px}
.brand h1{font-family:var(--serif);font-weight:700;font-size:1.4rem;margin:0}
.brand p{margin:2px 0 0;font-size:.82rem;color:#B9C2CC}
.seal{width:46px;height:46px;flex:none}
.seal svg{width:100%;height:100%}
.seal-ring{fill:none;stroke:#B9C2CC;stroke-width:1.6}
.seal-mark{fill:none;stroke:#B9C2CC;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}

.tabs{display:flex;gap:4px;padding:10px 22px 0;background:var(--paper-card);border-bottom:1px solid var(--line);overflow-x:auto}
.tab-btn{border:none;background:transparent;padding:12px 18px;font:700 .88rem var(--sans);color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tab-btn:hover{color:var(--ink)}
.tab-btn.active{color:var(--accent-ink);border-bottom-color:var(--accent)}

main{max-width:1360px;margin:0 auto;padding:22px}
.tab-panel{display:none}
.tab-panel.active{display:block}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

.card{background:var(--paper-card);border:1px solid var(--line);border-radius:10px;padding:20px 22px;box-shadow:0 2px 10px rgba(27,42,60,.05)}
.card-header-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}

h2{font-family:var(--serif);font-size:1.05rem;margin:0 0 12px;color:var(--ink);border-left:3px solid var(--accent);padding-left:10px}
h2.mt{margin-top:22px}

.field{margin-bottom:12px}
.field label{display:block;font-size:.78rem;font-weight:700;color:var(--ink-soft);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}
input,select{width:100%;font:inherit;padding:9px 10px;border:1px solid #C9C1AE;border-radius:6px;background:#FFFDF9;color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
input[type=range]{padding:0}
.row{display:flex;gap:12px}
.row>.field{flex:1;min-width:0}
.mt{margin-top:18px}

.mono-preview{font-family:var(--mono);background:#FFFDF9;border:1px dashed #C9C1AE;border-radius:6px;padding:9px 10px;color:var(--accent-ink);font-size:.85rem}

.btn{border:none;border-radius:7px;padding:10px 16px;font:700 .85rem var(--sans);cursor:pointer;background:#E7E2D4;color:var(--ink);transition:transform .05s ease}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.primary{background:var(--ink);color:#F1EEE4}
.btn.success{background:var(--green);color:#fff}
.btn.danger{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;border:1px solid #C9C1AE;color:var(--ink-soft)}
.btn.big{width:100%;padding:14px;font-size:.95rem}
.btn.small{padding:6px 10px;font-size:.78rem}

.segmented{display:flex;border:1px solid #C9C1AE;border-radius:7px;overflow:hidden}
.seg-btn{flex:1;border:none;background:#FFFDF9;padding:10px;cursor:pointer;font:700 .82rem var(--sans);color:var(--muted)}
.seg-btn.active{background:var(--ink);color:#F1EEE4}

.camera-frame{position:relative;background:#0D1520;border-radius:8px;min-height:280px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.camera-frame video{display:none}
.camera-frame canvas{width:100%;height:auto;display:block}
.camera-placeholder{position:absolute;color:#7C8CA0;font-size:.85rem}

.status{color:var(--muted);font-size:.82rem;margin:10px 0 0}

.batch-info{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:12px;padding:10px 12px;background:#FFFDF9;border:1px solid var(--line);border-radius:7px;font-size:.82rem}
.batch-info b{font-family:var(--mono);color:var(--accent-ink)}

.book-list{display:flex;flex-direction:column;gap:8px}
.book-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#FFFDF9}
.book-row .book-name{font-family:var(--mono);font-weight:700;color:var(--ink)}
.book-row .book-count{color:var(--muted);font-size:.82rem}
.book-actions{display:flex;gap:8px;flex-wrap:wrap}

.crop-preview-box{margin-top:10px;border:1px dashed #C9C1AE;border-radius:7px;min-height:90px;display:flex;align-items:center;justify-content:center;background:#FFFDF9;padding:8px;overflow:auto}
.crop-preview-box img{max-width:100%;display:block}

.progress{height:9px;background:#E7E2D4;border-radius:20px;overflow:hidden;margin-top:14px}
.progress-bar{height:100%;width:0;background:var(--green);transition:width .2s ease}
.log{margin-top:10px;background:#12202E;color:#CDE0D8;font-family:var(--mono);font-size:.78rem;padding:10px 12px;border-radius:7px;max-height:220px;overflow:auto;white-space:pre-wrap}

.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:8px;max-height:520px}
table{border-collapse:collapse;width:100%;font-size:.8rem}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{background:#F0ECDE;position:sticky;top:0}
tr.conf-ALTA td.conf-cell{color:var(--green);font-weight:700}
tr.conf-MEDIA td.conf-cell{color:var(--amber);font-weight:700}
tr.conf-BAIXA,tr.conf-NAO_LIDO{background:var(--red-bg)}
tr.conf-BAIXA td.conf-cell,tr.conf-NAO_LIDO td.conf-cell{color:var(--accent-ink);font-weight:700}
td[contenteditable]{cursor:text}
td[contenteditable]:focus{outline:2px solid var(--accent);outline-offset:-2px;background:#fff}

.muted{color:var(--muted)}
.small{font-size:.8rem}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#F1EEE4;padding:11px 20px;border-radius:8px;font-size:.85rem;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:999}
.toast.error{background:var(--accent)}
.toast.success{background:var(--green)}