/* ==========================================================
   direito.love — style.css (tema: Light Grays • alto contraste)
   Organização:
   1) Reset & Tokens
   2) Layout base (topbar, content, bottom bar)
   3) Componentes (cards, grupos/accordions, botões, pills, toasts)
   4) Modal
   5) Hub / botões redondos
   6) Histórico (dropdown)
   7) Utilidades (skeleton, highlights)
   8) Responsivo
   ========================================================== */

/* ========== 1) RESET & TOKENS ========== */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

:root{
  /* dimensões */
  --wrap-max: 920px;
  --topbar-h: 60px;
  --radius: 14px;
  --radius-lg: 20px;
  --fs: 15px;

  /* Paleta de CINZAS (claros) */
  --g-0:#FFFFFF;
  --g-25:#FCFCFD;
  --g-50:#F8F9FB;
  --g-75:#F5F6F8;   /* fundo do site */
  --g-100:#F0F2F5;  /* cards / barra inferior */
  --g-150:#E9ECF0;  /* linhas leves */
  --g-200:#E1E5EA;  /* linhas fortes */
  --g-300:#D2D7DE;
  --g-400:#BBC3CC;
  --g-500:#A2ABB6;
  --g-600:#6C757D;  /* “accent” neutro: barras/botões */

  /* mapeamento de tema */
  --bg:var(--g-75);
  --top:var(--g-0);
  --bottom:var(--g-100);

  --ink:#0F172A;            /* texto principal (alto contraste) */
  --muted:#647084;          /* texto secundário */
  --line:var(--g-150);
  --line-strong:var(--g-200);

  /* realces (AZUL DO TEMA) */
  --blue:#1800ad;           /* azul principal do projeto */
  --blue-soft:#eef0ff;      /* hover/realce suave */

  /* buckets/categorias (amarrados ao azul do tema) */
  --bucket-head-bg:var(--blue);
  --bucket-head-bg-hover:#14008e;   /* ~15% mais escuro */
  --bucket-head-text:#FFFFFF;
  --bucket-count-bg:#FFFFFF;
  --bucket-count-text:#2B3240;
  --bucket-count-border:var(--g-200);
  --bucket-sub-bg:#2a1fd6;          /* tom relacionado */
  --bucket-sub-bg-hover:#1f16b1;    /* hover sub */
  --bucket-sub-border:#1b1293;
}
@media (min-width:768px){ :root{ --fs:16px } }

body{
  font: 400 var(--fs)/1.6 ui-sans-serif,system-ui,-apple-system,"SF Pro Text","Segoe UI",Roboto,Arial;
  color: var(--ink);
  background: var(--bg);
}
.wrap{ width:min(var(--wrap-max), 92vw); margin:0 auto; padding:0 8px; }

/* ========== 2) LAYOUT BASE ========== */
/* topbar */
.topbar{
  position:fixed; top:0; left:0; right:0;
  height:var(--topbar-h);
  background:var(--top);
  z-index:300;
  border-bottom:1px solid var(--line);
}
.topbar .wrap{ height:100%; display:flex; align-items:center; gap:12px; }
.brand{ height:40px; display:block; cursor:pointer; }
.search{ margin-left:auto; position:relative; flex:0 1 560px; }
.search input{
  width:100%; height:44px; border:1px solid #cfd4e2; border-radius:999px;
  padding:0 40px 0 14px; background:#fff;
  transition: box-shadow .18s, border-color .18s;
}
.search input:focus{
  border-color:var(--line-strong);
  box-shadow:0 0 0 3px rgba(24,0,173,.22); /* halo coerente com o azul */
}
.spinner{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border:2px solid #e2e5f2; border-top-color:var(--blue);
  border-radius:50%; animation:spin 1s linear infinite; display:none;
}
.spinner.show{ display:block; }
@keyframes spin{ to{ transform:translateY(-50%) rotate(360deg) } }

/* conteúdo */
.content{ padding:calc(var(--topbar-h) + 10px) 0 110px; }
.block{ margin:16px 0 10px; }
.block-title{ font-weight:600; margin:0 0 8px; color:#111; }
.block-empty{ color:var(--muted); font-style:italic; padding:8px 0; }

/* bottom bar */
.bottombar{
  position:fixed; left:0; right:0; bottom:0;
  background:var(--bottom);
  border-top:1px solid var(--line);
  z-index:250;
}
.bar-inner{
  display:flex; gap:12px; justify-content:center; align-items:center;
  padding:12px 0; flex-wrap:wrap;
}
.bar-group{ display:flex; gap:10px; margin:0; }

/* ========== 3) COMPONENTES ========== */
/* cards */
.card{
  display:grid; grid-template-columns:1fr !important; gap:12px; align-items:start;
  padding:16px; border:1px solid var(--line); border-radius:16px;
  background:var(--g-100);
  box-shadow:0 1px 0 rgba(2,8,20,.02);
  margin:12px 0;
}
.card .body{ white-space:pre-wrap; margin:8px 0 10px; color:#1f2937; }
.card .body mark{ background:#F1F3F6; border-radius:6px; padding:0 .15em; }

/* ações do card */
.card .actions{ display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:8px; }
.card .actions .toggle.toggle-left{ margin-right:auto; }

/* toggle (expandir) */
.card .toggle{
  border:1px solid #d6dbe6; background:#fff; border-radius:12px;
  height:32px; padding:0 12px; font-weight:600; color:#111; cursor:pointer;
}

/* pill “código” */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; background:#fff;
  color:var(--blue); font-weight:500; font-size:.8rem; text-decoration:none;
  opacity:.95; cursor:pointer; border:1px solid rgba(24,0,173,.25);
  transition:background .2s ease, opacity .2s ease, border-color .2s ease;
}
.pill:hover{ background:var(--blue-soft); opacity:1; }

/* botão de seleção (fica escondido nos cards; visível no modal) */
.chk{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px;
  border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink);
  font-weight:600; cursor:pointer; box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:background .15s, border-color .15s, color .15s, transform .03s;
}
.chk:active{ transform:translateY(1px); }
.chk:focus-visible{ outline:3px solid #cfe0ff; outline-offset:2px; }
.chk svg{ opacity:.2; transition:opacity .12s; }
.chk[data-checked="true"] svg{ opacity:1; }
.chk[data-checked="true"]{ background:#0f172a; border-color:#0f172a; color:#fff; }
/* esconder nos cards (aparece no leitor/modal) */
.card .chk{ display:none !important; visibility:hidden; width:0; height:0; padding:0; margin:0; overflow:hidden; }

/* botões */
.btn{
  background:#fff; color:#111; border:1px solid #ddd;
  font-weight:500; font-size:14px; height:36px; padding:0 14px; border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,0.04); transition:all .2s ease-in-out; cursor:pointer;
}
.btn:hover{ background:var(--blue-soft); border-color:var(--line-strong); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.btn.icon-only{ padding:0 10px; width:auto; height:36px; font-size:18px; border-radius:10px; line-height:1; }
.btn-primary{ background:var(--blue); color:#fff; border-color:var(--blue); }
.btn-primary:hover{ background:#14008e; border-color:#14008e; } /* hover coerente com o tema */
.btn.soft{ background:#f6f7fb; }
.btn-ghost{ background:#fff; }

/* grupos / accordion por arquivo */
.group{
  border:1px solid var(--line); border-radius:16px; background:#fff;
  margin:12px 0; box-shadow:0 1px 0 rgba(2,8,20,.02); overflow:hidden;
}
.group-head{
  display:flex; align-items:center; justify-content:flex-start; gap:10px;
  padding:12px 14px; background:var(--g-25);
  border:0; border-bottom:1px solid var(--line); cursor:pointer; text-align:left;
  font-weight:600; width:100%;
}
.group-title{ flex:1 1 auto; min-width:0; }
.group-count{
  margin-left:auto; min-width:36px; height:26px; padding:0 8px; display:inline-grid; place-items:center;
  text-align:right; border-radius:999px; background:#fff; color:#28386b; font-weight:700;
  border:1px solid rgba(0,0,0,.15);
}
.group-caret{ margin-left:10px; transform:rotate(-90deg); transition:transform .15s; color:#28386b; opacity:.95; }
.group-head[aria-expanded="true"] .group-caret{ transform:rotate(0); }
.group-body{ padding:10px 12px; }
.group-body[hidden]{ display:none; }

/* Buckets/Categorias (barra azul contrastante) */
.bucket.group > .group-head{
  background:var(--bucket-head-bg);
  color:var(--bucket-head-text);
  border-color:#4F575E;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}
.bucket.group > .group-head:hover,
.bucket.group > .group-head[aria-expanded="true"]{
  background:var(--bucket-head-bg-hover);
}
.bucket .group-caret{ color:var(--bucket-head-text); opacity:.95; }
.bucket .group-count{
  background:var(--bucket-count-bg);
  color:var(--bucket-count-text);
  border:1px solid var(--bucket-count-border);
}

/* (opcional) subcategoria visual */
.bucket .subcat{ margin:8px 0; }
.bucket .bucket-subhead{
  background:var(--bucket-sub-bg); color:#fff;
  border:1px solid var(--bucket-sub-border);
  border-radius:10px; padding:10px 14px; width:100%;
  display:flex; align-items:center; justify-content:space-between; cursor:pointer;
}
.bucket .bucket-subhead:hover{ background:var(--bucket-sub-bg-hover); }
.bucket .subcat-body{ padding:6px 10px 10px; }

/* toasts */
.toasts{ position:fixed; left:0; right:0; bottom:calc(74px + 8px); display:grid; place-items:center; z-index:1200; pointer-events:none; }
.toast{ background:#111; color:#fff; border-radius:14px; padding:10px 14px; margin:6px; box-shadow:0 2px 8px rgba(0,0,0,.12); pointer-events:auto; }

/* ========== 4) MODAL ========== */
.modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:1000; }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:fixed; inset:0; background:rgba(10,15,25,.35); backdrop-filter:saturate(1.2) blur(4px); z-index:0; }
.modal-card{
  position:relative; z-index:1; width:min(900px,96vw); max-height:88vh;
  background:#fff; border-radius:var(--radius-lg); box-shadow:0 20px 40px rgba(2,8,20,.06), 0 2px 8px rgba(2,8,20,.04);
  border:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden;
}
.modal-head{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line-strong); background:#e6e6e6; }
.modal-head .title{ font-weight:600; color:#111; }
.modal-meta{ margin-left:auto; color:#6b7280; }
.modal-body{ padding:14px 16px; overflow:auto; scroll-behavior:smooth; background:#fff; }
.modal-foot{ display:flex; justify-content:flex-end; padding:10px 12px; border-top:1px solid var(--line); }
.icon-btn{ width:36px; height:36px; border:1px solid #d6dbe6; border-radius:12px; background:#fff; cursor:pointer; }
.foot-close{ margin-left:auto; }

/* artigos no modal */
.article{ padding:16px 0; border-top:2px solid var(--line-strong); display:grid; grid-template-columns:auto 1fr; gap:14px; }
.article:first-child{ border-top:0; }
.article .a-chk{ margin-top:4px; }
.article h4{ margin:0 0 6px; font-weight:600; }
.article .a-body{ white-space:pre-wrap; color:#1f2937; }
.article.highlight{ animation:hilite 2s ease; }

/* No modal o .chk vira ícone */
.modal .chk{ gap:0; width:36px; padding:0; justify-content:center; display:inline-flex !important; visibility:visible; height:36px; }

/* ========== 5) HUB / BOTÕES REDONDOS ========== */
.round-btn{
  width:36px; height:36px; border-radius:999px;
  border:1px solid #d6dbe6; background:#fff; display:inline-grid; place-items:center;
  cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.round-btn:hover{ border-color:var(--line-strong); box-shadow:0 6px 18px rgba(17,24,39,.08); }
.round-btn:active{ transform:translateY(1px); }
.round-btn img{ width:18px; height:18px; display:block; object-fit:contain; }

/* ícone-only genérico usado em alguns toggles */
.card .toggle.btn--icon{ width:36px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.card .toggle.btn--icon img{ width:18px; height:18px; display:block; object-fit:contain; }

/* Hub (menu abre à esquerda) */
.hub-wrap{ position:relative; display:inline-flex; align-items:center; gap:8px; }
.hub-menu{
  display:inline-flex; gap:8px; align-items:center;
  opacity:0; pointer-events:none; transform:translateX(8px);
  transition:opacity .18s ease, transform .18s ease;
}
.hub-menu.open{ opacity:1; pointer-events:auto; transform:translateX(0); }

/* ========== 6) HISTÓRICO (Dropdown) ========== */
.topbar-history{ position:relative; display:flex; align-items:center; justify-content:center; }
.history-dropdown{
  position:absolute; right:0; top:110%; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 20px 40px rgba(2,8,20,.06), 0 2px 8px rgba(2,8,20,.04);
  padding:6px 0; min-width:240px; max-height:60vh; overflow-y:auto; z-index:999;
  opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity .2s ease, transform .2s ease;
}
.history-dropdown.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
.history-dropdown li{
  padding:10px 14px; font-size:14px; color:var(--ink); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .2s ease;
}
.history-dropdown li:hover{ background:#f0f2f8; }

/* compat extra */
.history-dropdown{
  top:50px; right:12px; border-radius:6px; max-height:300px; z-index:9999;
  min-width:180px; max-width:80vw; word-break:break-word; font-size:.88rem;
}
.history-dropdown.open{ display:block; }

/* ========== 7) UTILIDADES ========== */
.skel{ animation:pulse 1.2s ease-in-out infinite; background:linear-gradient(90deg,#eef1f6,#f6f7fb,#eef1f6); border-radius:10px; }
.skel.block{ height:48px; }
@keyframes pulse{ 0%{background-position:-200px 0} 100%{background-position:calc(200px + 100%) 0} }

@keyframes hilite{ 0%{ background:#fff9c2 } 100%{ background:#fff } }

mark.hl,
.hl{
  background:#fff59a;
  border-radius:4px;
  padding:0 .1em;
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
}

/* Guards para accordions fechados */
.group > .group-head[aria-expanded="false"] + .group-body{ display:none !important; }
.bucket .bucket-subhead[aria-expanded="false"] + .subcat-body{ display:none !important; }

/* ========== 8) RESPONSIVO ========== */
@media (max-width:480px){
  .bottombar .bar-inner .bar-title{ display:none; }

  .bottombar{ padding-top:10px; padding-bottom:max(10px, env(safe-area-inset-bottom)); }
  .bottombar .bar-inner{ justify-content:center; flex-wrap:nowrap; overflow:hidden; padding-left:8px; padding-right:8px; gap:10px; }
  .bottombar .bar-group{ gap:8px; }

  #clearSelectedBtn, #viewBtn, #baseHubWrap, #baseHubSpacer{ flex:0 0 auto; }
  #viewBtn{ min-width:56px; height:34px; padding:0 12px; }

  .btn{ height:32px; padding:0 12px; }
  .btn.icon-only{ padding:0 10px; }
  .round-btn{ width:34px; height:34px; }

  #baseHubSpacer{ flex-basis:72px !important; }

  /* dropdown ocupa mais largura */
  .history-dropdown{ left:auto; right:0; width:90vw; }
}

@media (max-width:360px){
  .bottombar .bar-inner{ padding-left:6px; padding-right:6px; }
  .hub-menu{ gap:6px; }
  #baseHubSpacer{ flex-basis:64px !important; }
  .btn, #viewBtn{ height:32px; }
  .btn.icon-only{ padding:0 8px; }
  .round-btn{ width:32px; height:32px; }
}

@media (max-width:820px){
  .bottombar .bar-inner{ padding-left:12px; padding-right:12px; }
  #clearSelectedBtn, #viewBtn, #baseHubWrap, #baseHubSpacer{ flex:0 0 auto; }
  .hub-menu{ gap:4px; }
  #baseHubSpacer{ flex-basis:72px !important; }
}

/* === destaque de termos === */
.hl {
  background: #fff59a;         /* amarelo claro legível */
  border-radius: 4px;
  padding: 0 .1em;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
}
.card mark{
  background:#fff59a;
  padding:0 2px;
  border-radius:3px;
}

/* Patch: prioridade para o grifo real (.hl) */
.card .body mark.hl,
.card mark.hl,
mark.hl {
  background: #fff59a !important;   /* amarelo visível */
  padding: 0 .15em;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
}

/* Tamanho do logo no MOBILE */
@media (max-width: 480px){
  .brand.logo-mobile{
    height: 52px !important;   /* garante que vence a .brand {height:40px} */
    width: 52px;                /* opcional */
  }
}

/* Tamanho do logo no DESKTOP */
@media (min-width: 768px){
  .brand.logo-desktop{
    height: 64px !important;    /* ajuste aqui o tamanho desejado */
  }
  /* Se aumentar o logo, aumente também a topbar p/ não “cortar” */
  :root{
    --topbar-h: 72px;           /* ex.: de 60px → 72px */
  }
}
/* === FAVORITOS === */
.fav-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #ccc;
  transition: color 0.2s ease;
  z-index: 10;
}
.fav-btn.active {
  color: #facc15; /* amarelo */
}
.card:hover .fav-btn {
  color: #999;
}
.fav-btn.active:hover {
  color: #eab308; /* amarelo mais escuro no hover */
}

/* Para botão da topbar */
.topbar-btn.fav-topbar {
  margin-left: 8px;
  font-size: 20px;
  color: #666;
  background: none;
  border: none;
  cursor: pointer;
}
.topbar-btn.fav-topbar.active {
  color: #facc15;
}