/* ── QAR Positivação Seguros — Controle de Sinistros — Estilos ─────────────── */

:root{--primary:#1a4f8a;--primary-light:#2563c0;--primary-dark:#0f3160;--accent:#f59e0b;--success:#10b981;--danger:#ef4444;--bg:#f0f4f8;--card:#fff;--text:#1e293b;--muted:#64748b;--border:#e2e8f0;--sw:220px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex}
/* height:100vh (não min-height) + overflow-y:auto no nav — mesmo motivo do
   qar-styles.css: sidebar fixo que crescia além da tela ficava com o final
   inacessível. Logo/uinfo continuam fixos; só o nav rola internamente. */
#sidebar{width:var(--sw);background:var(--primary-dark);color:#fff;display:flex;flex-direction:column;height:100vh;position:fixed;top:0;left:0;z-index:100}
#sidebar .logo{padding:20px 16px 12px;border-bottom:1px solid rgba(255,255,255,.12);flex-shrink:0}
#sidebar nav{flex:1;padding:10px 0;overflow-y:auto;min-height:0}
#sidebar nav a{display:flex;align-items:center;gap:10px;padding:10px 16px;color:rgba(255,255,255,.75);text-decoration:none;font-size:13.5px;cursor:pointer;transition:background .15s}
#sidebar nav a:hover,#sidebar nav a.active{background:rgba(255,255,255,.12);color:#fff}
#sidebar .uinfo{padding:12px 16px;border-top:1px solid rgba(255,255,255,.12);font-size:11px;color:rgba(255,255,255,.5);flex-shrink:0}
/* ── Sidebar: seção "Módulos" (Visitas / Operacional / QAR) ───────────────────
   Mesmo padrão visual de qar-styles.css (usado em qar-positivacao.html e
   operacional.html) — replicado aqui porque este app tem folha de estilo
   própria e não compartilha qar-styles.css. */
.section-ico{width:16px;height:16px;flex-shrink:0}
.nav-section-label{font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.35);padding:14px 16px 4px}
.nav-module{position:relative}
.nav-mod-ico{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.nav-mod-ico .section-ico{width:14px;height:14px}
.nav-module-visitas .nav-mod-ico{background:#0891b2}
.nav-module-operacional .nav-mod-ico{background:#7c3aed}
.nav-module-qar .nav-mod-ico{background:#0f6bb5}
.nav-module-faturamento .nav-mod-ico{background:#0d9488}
.nav-mod-ext{position:absolute;top:8px;right:10px;color:rgba(255,255,255,.3)}
#main{margin-left:var(--sw);flex:1;display:flex;flex-direction:column;min-height:100vh}
#topbar{background:var(--card);border-bottom:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:50}
#topbar h2{font-size:16px;font-weight:600;flex:1}
#content{padding:24px;flex:1}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s}
/* Botão desabilitado (atributo HTML disabled) não tinha NENHUM estilo próprio em lugar nenhum do
   sistema — ficava com a mesma cor "ativa" de sempre, sem nenhum sinal visual de que o clique não
   ia funcionar (achado real: usuário clicando "Confirmar e Arquivar" sem nada acontecer, sem saber
   por quê, porque o botão continuava parecendo normal). Regra genérica, vale pra qualquer .btn em
   qualquer um dos apps que usam este CSS compartilhado. */
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-light)}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}.btn-outline:hover{background:var(--primary);color:#fff}
.btn-ghost{background:transparent;color:var(--muted);border-color:var(--border)}.btn-ghost:hover{background:var(--bg)}
.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{opacity:.85}
.btn-sm{padding:4px 10px;font-size:12px}.btn-xs{padding:2px 7px;font-size:11px}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.mc{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px 20px}
.mc .lbl{font-size:12px;color:var(--muted);font-weight:500;margin-bottom:6px}
.mc .val{font-size:28px;font-weight:700;line-height:1}
.mc .sub{font-size:12px;color:var(--muted);margin-top:4px}
.mc.blue{border-left:4px solid var(--primary)}.mc.green{border-left:4px solid var(--success)}
.mc.amber{border-left:4px solid var(--accent)}.mc.red{border-left:4px solid var(--danger)}
.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:20px;gap:0}
.tab{padding:9px 18px;font-size:13px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;color:var(--muted);background:none;border-top:none;border-left:none;border-right:none}
.tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.view{display:none}.view.active{display:block}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:flex-end}
.filters input,.filters select{padding:7px 11px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:var(--card);color:var(--text);outline:none}
.filters input:focus,.filters select:focus{border-color:var(--primary)}
.filters input{min-width:180px}
.tw{overflow-x:auto;border-radius:10px;border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;background:var(--card);font-size:13px}
th{background:#f8fafc;padding:9px 12px;text-align:left;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#f8fafc}
.bs{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap}
.bs-ind{background:#d1fae5;color:#065f46}
.bs-can{background:#f1f5f9;color:#475569}
.bs-pen{background:#fef3c7;color:#92400e}
.bs-rej{background:#fee2e2;color:#991b1b}
input[type=text],input[type=date],input[type=number],input[type=email],select,textarea{padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;color:var(--text);outline:none;background:#fff;transition:border-color .15s;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(26,79,138,.1)}
textarea{resize:vertical;min-height:80px}
.fgrp{display:flex;flex-direction:column;gap:4px}
.fgrp.s2{grid-column:span 2}
label.lbl{font-size:11.5px;font-weight:600;color:var(--muted)}
.fg4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}
.fg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fg1{display:grid;grid-template-columns:1fr;gap:12px}
.upload-area{border:2px dashed var(--border);border-radius:10px;padding:40px;text-align:center;cursor:pointer;transition:border-color .2s;background:var(--card)}
.upload-area:hover,.upload-area.drag{border-color:var(--primary);background:#f0f7ff}
.upload-area svg{margin-bottom:12px;color:var(--muted)}
.upload-area p{font-size:14px;color:var(--muted);margin-bottom:8px}
.upload-area strong{color:var(--primary)}
.preview-wrap{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px;margin-top:16px}
.preview-wrap h4{font-size:14px;font-weight:600;margin-bottom:12px}
.preview-info{background:#f0f7ff;border:1px solid #bfdbfe;border-radius:8px;padding:12px 16px;margin-bottom:12px;font-size:13px;color:var(--primary)}
.cliente-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:14px 16px;cursor:pointer;transition:all .15s;margin-bottom:8px}
.cliente-card:hover{border-color:var(--primary);box-shadow:0 2px 8px rgba(26,79,138,.08)}
.cliente-card .cn{font-size:14px;font-weight:600;margin-bottom:2px}
.cliente-card .cm{font-size:12px;color:var(--muted)}
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{background:var(--card);border-radius:12px;width:100%;max-width:900px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}
.modal-hd{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.modal-hd h3{flex:1;font-size:15px;font-weight:600}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-ft{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;padding:10px 20px;border-radius:8px;font-size:13px;z-index:999;animation:fadeInUp .2s}
.toast.ok{background:#065f46}.toast.err{background:#991b1b}
@keyframes fadeInUp{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
/* Usado pelo spinner da tela de login de faturamento.html (mesmo padrão de operacional.html,
   que usa qar-styles.css — replicado aqui porque este stylesheet é o compartilhado por
   sinistros.html/faturamento.html). */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.empty-state{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-state svg{margin-bottom:12px;opacity:.4}
.empty-state p{font-size:14px}
.badge-n{background:var(--accent);color:#000;font-size:10px;font-weight:700;padding:2px 6px;border-radius:10px;margin-left:auto}
#sidebar-brand{display:flex;align-items:center;gap:10px}
.field-err{border-color:var(--danger)!important;box-shadow:0 0 0 2px rgba(239,68,68,.15)!important}
.field-err-lbl{color:var(--danger)!important}
.subcampo-box{background:#f8fafc;border:1px solid var(--border);border-radius:8px;padding:12px;margin-top:2px}

/* ── Hamburger (mobile) ─────────────────────────────────────────────────────── */
/* Este app (Controle de Sinistros) não tinha nenhum tratamento de mobile —
   sidebar fixo de 220px sempre visível, sem como escondê-lo, e nenhuma
   media query. Em celular isso deixava o conteúdo espremido numa fração da
   tela. Réplica do mesmo padrão já usado em qar-positivacao.html/operacional.html. */
#hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:6px;color:var(--text)}
#hamburger:hover{background:var(--border)}
#hamburger svg{display:block}
#sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99}
#sb-overlay.active{display:block}

/* ── Responsivo ──────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  body{display:block}
  #sidebar{transform:translateX(-100%);transition:transform .25s ease}
  #sidebar.open{transform:translateX(0)}
  #main{margin-left:0;min-height:100vh}
  #topbar{padding:10px 14px}
  #topbar h2{font-size:14px}
  #hamburger{display:flex;align-items:center}
  #content{padding:12px}
  .g2,.g3,.g4{grid-template-columns:1fr!important}
  .filters{flex-direction:column;align-items:stretch}
  .filters input,.filters select{min-width:0;width:100%}
  .tw{overflow-x:auto}
  .modal-box{max-width:100%;max-height:95vh}
}
@media(max-width:480px){
  #topbar h2{font-size:13px}
  .btn-sm{font-size:11px;padding:5px 10px}
}