/* ============================================================================
   QORE Design System — kit portatil (standalone, SEM dependencia de framework).
   Uso: <link rel="stylesheet" href="qore-ds.css"> e use as classes .qore-* / .qa-*.
   Tema escuro: <html data-theme="dark">. Paleta do acento: <html data-palette="indigo">
   (aco | azul | ambar | petroleo | preto | indigo). Default = aco.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ---------- TOKENS (claro) ---------- */
:root{
  --qt-font: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --qt-paper:#f7f8fa; --qt-surface:#f1f3f6; --qt-raise:#ffffff;
  --qt-ink:#151a24; --qt-ink-2:#535b6c; --qt-ink-3:#8a92a3;
  --qt-line:#eaecf0; --qt-line-2:#e1e4ea;
  --qt-accent:#5980a6; --qt-accent-ink:#ffffff; --qt-accent-hover:#416180; --qt-accent-soft:#eaf1f8;
  --qt-ok:#1d7a47; --qt-ok-bg:#e8f5ee;
  --qt-warn:#b57611; --qt-warn-bg:#fdf4e3;
  --qt-danger:#d6453a; --qt-danger-bg:#fde8e6;
  --qt-radius-sm:7px; --qt-radius:10px; --qt-radius-lg:16px;
  --qt-sh-sm:0 1px 2px rgba(21,26,36,.08);
  --qt-sh-float:0 16px 26px -8px rgba(21,26,36,.18);
  --qt-sh-modal:0 24px 60px rgba(21,26,36,.28);
}
/* ---------- PALETAS (so trocam o acento) ---------- */
:root[data-palette="aco"]     { --qt-accent:#5980a6; --qt-accent-hover:#416180; --qt-accent-soft:#eaf1f8; }
:root[data-palette="azul"]    { --qt-accent:#2f6df0; --qt-accent-hover:#1f55c9; --qt-accent-soft:#edf3ff; }
:root[data-palette="ambar"]   { --qt-accent:#b07417; --qt-accent-hover:#8f5d12; --qt-accent-soft:#f6edd9; }
:root[data-palette="petroleo"]{ --qt-accent:#0f766e; --qt-accent-hover:#0c5f58; --qt-accent-soft:#def0ec; }
:root[data-palette="preto"]   { --qt-accent:#171717; --qt-accent-hover:#000000; --qt-accent-soft:#ececec; }
:root[data-palette="indigo"]  { --qt-accent:#5b5bd6; --qt-accent-hover:#4740b8; --qt-accent-soft:#efeefc; }
/* ---------- TEMA ESCURO ---------- */
:root[data-theme="dark"]{
  --qt-paper:#0f1216; --qt-surface:#191e25; --qt-raise:#171b21;
  --qt-ink:#e7eaf0; --qt-ink-2:#aab2c0; --qt-ink-3:#8b93a1;
  --qt-line:#20262f; --qt-line-2:#2b323d;
  --qt-accent-soft:#1b242d;
  --qt-ok:#46c97e; --qt-ok-bg:#15301f;
  --qt-warn:#d9a13e; --qt-warn-bg:#352c18;
  --qt-danger:#e5645a; --qt-danger-bg:#351c1a;
  --qt-sh-sm:0 1px 2px rgba(0,0,0,.3);
  --qt-sh-float:0 16px 26px -8px rgba(0,0,0,.55);
  --qt-sh-modal:0 24px 60px rgba(0,0,0,.5);
}

/* ---------- Base opcional ---------- */
.qore-ds{ font-family:var(--qt-font); color:var(--qt-ink); background:var(--qt-paper); }

/* ====================== CAMPO ====================== */
.qore-row{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px 14px; }
.qore-field{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.qore-field > label{ font-size:11px; color:var(--qt-ink-3); font-weight:700; letter-spacing:.02em; line-height:1.2; margin:0 0 2px 1px; white-space:nowrap; }
.qore-field > input, .qore-field > select, .qore-field > textarea{
  height:27px; min-height:0; box-sizing:border-box; width:100%; margin:0;
  border:1px solid var(--qt-line-2); background:var(--qt-surface); color:var(--qt-ink);
  border-radius:var(--qt-radius-sm); font-family:var(--qt-font); font-size:12.5px; padding:0 10px; outline:none;
}
.qore-field > textarea{ height:auto; min-height:44px; padding:6px 10px; resize:vertical; }
.qore-field > input:focus, .qore-field > select:focus, .qore-field > textarea:focus{ border-color:var(--qt-accent); box-shadow:0 0 0 3px var(--qt-accent-soft); background:var(--qt-raise); }
.qore-field > input[readonly]{ background:var(--qt-surface); color:var(--qt-ink-3); }
.qore-field > select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none; padding:0 18px 0 10px; cursor:pointer;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%238a92a3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat; background-position:right 6px center; background-size:9px 6px;
}

/* ====================== CARD + TITULO DE BLOCO ====================== */
.qore-card{
  background:var(--qt-raise); border:1px solid var(--qt-line);
  border-radius:var(--qt-radius-lg); box-shadow:var(--qt-sh-float);
  padding:14px 16px 12px; box-sizing:border-box;
}
.qore-bloco-titulo{
  font-size:10.5px; font-weight:700; color:var(--qt-ink); text-transform:uppercase; letter-spacing:.04em;
  margin:0 0 8px; padding:0 0 3px 8px; border-bottom:1px solid var(--qt-line); border-left:3px solid #06b6d4;
  height:18px; box-sizing:border-box; line-height:14px; white-space:nowrap;
}

/* ====================== TABELA (cabecalho QUADRADO + zebra) ====================== */
.qore-tbl-wrap{
  background:var(--qt-raise); border:1px solid var(--qt-line); border-radius:0;
  box-shadow:var(--qt-sh-sm); overflow:auto;
  scrollbar-width:thin; scrollbar-color:var(--qt-line-2) transparent;
}
.qore-tbl-wrap::-webkit-scrollbar{ width:7px; height:7px; }
.qore-tbl-wrap::-webkit-scrollbar-thumb{ background:var(--qt-line-2); border-radius:7px; }
.qore-tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; font-family:var(--qt-font); }
.qore-tbl thead th{
  position:sticky; top:0; z-index:1; background:var(--qt-surface); color:var(--qt-ink-3);
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; text-align:left;
  padding:7px 8px; line-height:1.3; border-bottom:1px solid var(--qt-line-2); white-space:nowrap;
}
.qore-tbl tbody td{ padding:8px 10px; border-bottom:1px solid var(--qt-line); color:var(--qt-ink); vertical-align:middle; }
.qore-tbl tbody tr:nth-child(odd) td{ background:var(--qt-raise); }
.qore-tbl tbody tr:nth-child(even) td{ background:var(--qt-accent-soft); }
.qore-tbl tbody tr:hover td{ background:color-mix(in srgb, var(--qt-accent) 14%, var(--qt-raise)); }
.qore-tbl tbody tr.selecionada td{ background:color-mix(in srgb, var(--qt-accent) 22%, var(--qt-raise)); }
.qore-tbl .num{ text-align:right; font-variant-numeric:tabular-nums; }

/* ====================== BOTOES ====================== */
.qore-btn{
  height:38px; padding:0 18px; border:1px solid transparent; border-radius:var(--qt-radius);
  font-family:var(--qt-font); font-size:13px; font-weight:700; cursor:pointer; background:transparent; color:var(--qt-ink);
}
.qore-btn.primary{ background:var(--qt-accent); color:var(--qt-accent-ink); border-color:var(--qt-accent); }
.qore-btn.primary:hover{ background:var(--qt-accent-hover); border-color:var(--qt-accent-hover); }
.qore-btn.default{ background:var(--qt-raise); color:var(--qt-ink); border-color:var(--qt-line-2); }
.qore-btn.default:hover{ border-color:var(--qt-accent); }
.qore-btn.soft{ background:var(--qt-accent-soft); color:var(--qt-accent-hover); }
.qore-btn.danger{ background:var(--qt-raise); color:var(--qt-danger); border-color:color-mix(in srgb, var(--qt-danger) 35%, transparent); }
.qore-btn.danger:hover{ background:var(--qt-danger); color:#fff; border-color:var(--qt-danger); }
.qore-btn.ghost{ background:transparent; color:var(--qt-ink-2); }
.qore-btn.ghost:hover{ background:var(--qt-surface); }
.qore-btn.sm{ height:30px; padding:0 14px; border-radius:var(--qt-radius-sm); font-size:12px; }
.qore-btn:disabled{ opacity:.5; cursor:default; }

/* ====================== PILL TOGGLE ====================== */
.qore-pill{ display:inline-flex; gap:6px; padding:4px; background:var(--qt-surface); border-radius:var(--qt-radius-sm); }
.qore-pill button{ height:auto; padding:7px 14px; border:0; border-radius:6px; cursor:pointer; font-family:var(--qt-font); font-size:12.5px; font-weight:600; line-height:1; background:transparent; color:var(--qt-ink-2); }
.qore-pill button:hover{ background:var(--qt-line); color:var(--qt-ink); }
.qore-pill button.ativa, .qore-pill button.active{ background:var(--qt-accent); color:#fff; font-weight:700; }

/* ====================== ALERTAS (modais) ====================== */
.qa-overlay{ position:fixed; inset:0; z-index:12000; display:none; background:rgba(15,18,22,.45); align-items:center; justify-content:center; font-family:var(--qt-font); }
.qa-card{ width:420px; max-width:92vw; background:var(--qt-raise); border-radius:var(--qt-radius-lg); overflow:hidden; box-shadow:var(--qt-sh-modal); display:flex; flex-direction:column; }
.qa-top{ height:4px; flex:0 0 4px; background:var(--qt-accent); }
.qa-head{ display:flex; align-items:center; gap:11px; padding:16px 16px 4px; }
.qa-ic{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:16px; line-height:1; flex:0 0 auto; background:var(--qt-accent-soft); color:var(--qt-accent); }
.qa-ttl{ font-size:15.5px; font-weight:800; letter-spacing:-.01em; color:var(--qt-ink); }
.qa-x{ margin-left:auto; width:26px; height:26px; border:0; background:transparent; color:var(--qt-ink-3); font-size:18px; cursor:pointer; border-radius:7px; display:grid; place-items:center; line-height:1; }
.qa-x:hover{ background:var(--qt-line); color:var(--qt-ink); }
.qa-body{ padding:10px 20px 16px; font-size:13.5px; line-height:1.55; color:var(--qt-ink-2); text-align:center; }
.qa-card.qa-lista .qa-body{ text-align:left; padding:14px 18px; }
.qa-input{ width:100%; height:30px; margin-top:10px; border:1px solid var(--qt-line-2); border-radius:var(--qt-radius-sm); padding:0 10px; font-size:13px; box-sizing:border-box; font-family:inherit; background:var(--qt-raise); color:var(--qt-ink); outline:none; }
.qa-input:focus{ border-color:var(--qt-accent); box-shadow:0 0 0 3px var(--qt-accent-soft); }
.qa-foot{ padding:0 18px 18px; display:flex; justify-content:flex-end; gap:8px; }
.qa-btn{ height:36px; padding:0 20px; border-radius:var(--qt-radius); border:0; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.qa-btn.prim{ background:var(--qt-accent); color:var(--qt-accent-ink); }
.qa-btn.prim:hover{ background:var(--qt-accent-hover); }
.qa-btn.ghost{ background:var(--qt-raise); color:var(--qt-ink-2); border:1px solid var(--qt-line-2); }
.qa-btn.ghost:hover{ background:var(--qt-surface); }
.qa-warn .qa-top{ background:var(--qt-warn); } .qa-warn .qa-ic{ background:var(--qt-warn-bg); color:var(--qt-warn); }
.qa-erro .qa-top{ background:var(--qt-danger); } .qa-erro .qa-ic{ background:var(--qt-danger-bg); color:var(--qt-danger); }
.qa-ok   .qa-top{ background:var(--qt-ok); }     .qa-ok   .qa-ic{ background:var(--qt-ok-bg); color:var(--qt-ok); }
.qa-info .qa-top{ background:var(--qt-accent); } .qa-info .qa-ic{ background:var(--qt-accent-soft); color:var(--qt-accent); }
.qa-card.qa-lista{ max-height:72vh; }
.qa-card.qa-lista .qa-body{ overflow-y:auto; }
.qa-lista-info{ font-size:11.5px; color:var(--qt-ink-3); background:var(--qt-accent-soft); border-left:3px solid var(--qt-accent); border-radius:0 6px 6px 0; padding:8px 10px; margin:0 0 12px; line-height:1.5; }
.qa-lista-ul{ margin:0; padding-left:18px; font-size:13px; color:var(--qt-ink); line-height:1.9; }