/* ========= PATCH 1 – TOKENS GLOBAIS ========= */
:root{
  /* Navbar/layout */
  --hx-nav-h: 40px;
  --hx-gap: 16px;
  --hx-gap-center: 26px;

  --hx-bg: rgba(239,245,252,.90);
  --hx-border: rgba(180,200,240,.35);
  --hx-hover: rgba(120,170,255,.12);
  --hx-shadow: 0 1px 6px rgba(0,0,0,.06);
  --hx-active: #0d6efd;

  --hx-z-navbar: 1000;

  /* Dropdowns */
  --hx-dd-offset: 10px;              /* distância do menu para o botão */
  --hx-dd-radius: 12px;
  --hx-dd-shadow: 0 10px 22px rgba(0,0,0,.12);
  --hx-dd-border: 1px solid rgba(180,200,240,.35);
  --hx-dd-bg: rgba(255,255,255,.97);

  /* Controles (inputs / selects) – padrão global Hasner */
  --hx-radius-input: 999px;  /* se quiser menos “pill”, troca aqui depois */
  --hx-input-border: #d1d5db;
  --hx-input-bg: #ffffff;
  --hx-input-shadow: 0 1px 2px rgba(15,23,42,0.05);
  --hx-input-focus-border: #6366f1;
  --hx-input-focus-shadow:
    0 0 0 1px rgba(129,140,248,0.35),
    0 2px 6px rgba(15,23,42,0.15);
}

/* ===================== BASE / RESET ===================== */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px; /* modo compacto padrão */
}

.hx-nav-spacer {
  height: var(--hx-nav-h);
}

/* ===================== NAVBAR ===================== */
.hx-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--hx-nav-h);
  background: var(--hx-bg);
  backdrop-filter: blur(10px) saturate(1.15);
  border-bottom: 1px solid var(--hx-border);
  box-shadow: var(--hx-shadow);
  z-index: var(--hx-z-navbar);
  overflow: visible;                  /* dropdown não é cortado */
}

.hx-nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--hx-gap);
  padding: 0 var(--hx-gap);
  width: 100%;
}

/* ===================== BRAND ===================== */
.hx-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.hx-logo {
  height: 44px;
  width: auto;
  display: block;
}

/* ===================== MENU (centro) ===================== */
.hx-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hx-gap-center);
  flex: 1 1 auto;                     /* ocupa o miolo central */
}

/* ===================== ITENS ===================== */
.hx-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  text-decoration: none;
  color: #1e293b;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
  position: relative;
}

.hx-item:hover {
  background: var(--hx-hover);
}

.hx-item.is-active {
  box-shadow: inset 0 0 0 2px rgba(80,130,255,.40);
}

.hx-item:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(80,130,255,.28);
}

.hx-item .ico {
  width: 28px;
  height: 28px;
  display: block;
}

.hx-item .sr-only {
  position: absolute;
  left: -9999px;
}

/* ===================== DIREITA ===================== */
.hx-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.hx-user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  position: relative;                 /* ancora do dropdown do usuário */
}

.hx-user-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.hx-user-name {
  font-size: .9rem;
  font-weight: 600;
  color: #1f3a93;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===================== DROPDOWNS (normalização única) ===================== */
/* Cada trigger mantém contexto de posicionamento */
.hx-menu .dropdown,
.hx-right .dropdown,
.hx-user-pill.dropdown {
  position: relative;
}

/* Padrão de TODOS os submenus */
.hx-menu .dropdown-menu,
.hx-right .dropdown-menu,
.hx-user-pill .dropdown-menu {
  position: absolute;
  top: calc(100% + var(--hx-dd-offset));
  min-width: 220px;
  padding: 8px 0;
  background: var(--hx-dd-bg);
  border: var(--hx-dd-border);
  border-radius: var(--hx-dd-radius);
  box-shadow: var(--hx-dd-shadow);
  z-index: 3000;
  max-height: 60vh;
  overflow: auto;
  /* reset de artefatos */
  inset-inline-start: auto;
  inset-inline-end: auto;
  transform: none;
}

/* Miolo (ícones centrais): centraliza sob o botão */
.hx-menu > li.dropdown > .dropdown-menu {
  left: 50%;
  transform: translateX(-50%);
}

/* Direita (buscar, notificações, usuário, configs): ancora pela direita */
.hx-right .dropdown > .dropdown-menu,
.hx-user-pill .dropdown-menu {
  right: 0;
  left: auto;
  transform: none;
}

/* Seta do dropdown */
.hx-menu .dropdown-menu::before,
.hx-right .dropdown-menu::before,
.hx-user-pill .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  width: 12px;
  height: 12px;
  background: var(--hx-dd-bg);
  border-top: var(--hx-dd-border);
  border-left: var(--hx-dd-border);
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0,0,0,.03);
}

.hx-menu > li.dropdown > .dropdown-menu::before {
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.hx-right .dropdown > .dropdown-menu::before,
.hx-user-pill .dropdown-menu::before {
  right: 14px;
  left: auto;
  transform: rotate(45deg);
}

/* Itens e divisores */
.dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}

.dropdown-menu .dropdown-item:hover {
  background: rgba(120,170,255,.08);
}

.dropdown-menu .dropdown-divider {
  height: 1px;
  margin: 6px 0;
  background: rgba(180,200,240,.35);
}

/* Utilitários do menu do usuário */
.hx-dd-ico {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex: 0 0 18px;
  opacity: .95;
}

.hx-dd-btn-reset {
  background: transparent;
  border: 0;
  padding: 8px 12px;
  cursor: pointer;
}

.hx-dd-btn-reset:hover {
  background: rgba(120,170,255,.08);
}

/* ===================== RESPONSIVO NAVBAR ===================== */
@media (max-width: 980px) {
  :root {
    --hx-dd-offset: 8px;
  }

  .hx-item {
    width: 36px;
    height: 36px;
  }

  .hx-item .ico {
    width: 24px;
    height: 44px;
  }

  .hx-user-name {
    display: none;
  }
}

/* ===================== UTILITÁRIOS DIVERSOS ===================== */
.hx-cols-menu {
  min-width: 240px;
  max-height: 280px;
  overflow: auto;
}

.btn-group-xs > .btn {
  font-size: .75rem;
  line-height: 1;
  padding: .1rem .25rem;
}

/* Pills de estado */
.pill-estado {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.estado-novo {
  background-color: #e0f2ff;
  color: #0369a1;
}

.estado-pendente {
  background-color: #e5e7eb;
  color: #4b5563;
}

.estado-analise {
  background-color: #fef9c3;
  color: #854d0e;
}

.estado-andamento {
  background-color: #ffedd5;
  color: #9a3412;
}

.estado-concluido {
  background-color: #dcfce7;
  color: #166534;
}

.estado-cancelado {
  background-color: #fee2e2;
  color: #b91c1c;
}

.estado-desconhecido {
  background-color: #f3f4f6;
  color: #6b7280;
}

/* ==========================================
 * Shell de página Hasner (janela única)
 * ========================================== */

/* TAMANHO MÉDIO – padrão */
.hx-page-shell {
  max-width: 1100px;        /* largura padrão das telas de config/lista média */
  margin: 4px auto 10px;    /* modo compacto */
  padding: 2px 8px 8px;
  border-radius: 16px;
  background:
    radial-gradient(140% 200% at 0 0, rgba(191, 219, 254, 0.20), transparent),
    radial-gradient(140% 200% at 100% 0, rgba(196, 181, 253, 0.15), transparent),
    #f9fafb;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.12);
}

/* GRANDE – telas de GED / grandes listas (ex.: Documentos) */
.hx-page-shell--wide {
  width: calc(100% - 80px); /* ~40px de respiro total (20px cada lado) */
  max-width: 1780px;
  margin-left: auto;
  margin-right: auto;
}

/* PEQUENA – telas bem pontuais (ex.: login, formulários enxutos) */
.hx-page-shell--sm {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* header dentro da página */
.hx-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 4px;
}

.hx-page-title {
  font-size: 1.1rem;   /* compacto */
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
}

.hx-page-subtitle {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 4px 0 0;
}

/* Dentro da shell, todos os cards ocupam a mesma largura */
.hx-page-shell .hx-card,
.hx-page-shell--wide .hx-card,
.hx-page-shell--sm .hx-card {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Responsivo: apertar um pouco a shell em telas menores */
@media (max-width: 980px) {
  .hx-page-shell,
  .hx-page-shell--wide,
  .hx-page-shell--sm {
    width: auto;
    margin: 4px auto 14px;
    padding: 8px 14px 16px;
    border-radius: 18px;
  }

  .hx-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Conteúdo padrão do app fora da shell */
.hx-container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 16px 20px 32px;
}

/* ============================
 * HASNER – Cards leves
 * ============================ */
.hx-card {
  position: relative;
  background: var(--hx-card-bg, #ffffff);
  border-radius: var(--hx-card-radius, 16px);
  border: 1px solid var(--hx-card-border, rgba(148,163,184,0.35));
  box-shadow: var(--hx-card-shadow, 0 10px 30px rgba(15,23,42,0.08));
  padding: 6px 10px;            /* compacto */
  margin: 4px auto;
  max-width: 1180px;
  box-sizing: border-box;
}

/* tamanhos opcionais */
.hx-card--sm { max-width: 520px; }
.hx-card--md { max-width: 860px; }
.hx-card--lg { max-width: 1180px; }

.hx-card--center {
  margin-left: auto;
  margin-right: auto;
}

/* Cabeçalho interno do card (quando usado) */
.hx-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(226,232,240,0.9);
}

.hx-card-title {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0;
}

.hx-card-subtitle {
  font-size: 0.86rem;
  color: #6b7280;
}

/* Corpo e rodapé */
.hx-card-body {
  padding: 4px 0 0 0;
  background: transparent;
  border-radius: 0;   /* card já tem raio, aqui é “miolo” */
}

.hx-card-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(226,232,240,0.9);
  text-align: right;
}

/* Tabela “soldada” no card, sem sombras extras */
.hx-card-body .table {
  margin-bottom: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(226,232,240,0.9);
}

/* ============================
 * HASNER – Formulários
 * ============================ */

.hx-form {
  max-width: 780px;
  margin: 0 auto;
}

.hx-form-section {
  margin-bottom: 24px;
}

.hx-form-section-title {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  margin-bottom: 8px;
}

.hx-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 18px;
}

.hx-form-field {
  margin-bottom: 8px;
}

.hx-form-field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 3px;
  color: #1f2937;
}

/* Controles padrão Hasner (inputs / selects) – pill */
.hx-form-field input[type="text"],
.hx-form-field input[type="email"],
.hx-form-field input[type="password"],
.hx-form-field select,
.hx-card-filters .form-select,
.hx-card-filters .form-control,
.hx-card-filters input[type="text"],
.hx-card-filters input[type="email"],
.hx-card-filters input[type="search"],
.hx-card--filters .form-select,
.hx-card--filters .form-control,
.hx-card--filters input[type="text"],
.hx-card--filters input[type="email"],
.hx-card--filters input[type="search"],
.hx-form .form-control,
.hx-form .form-select {
  width: 100%;
  font-size: 0.88rem;
  padding: 4px 10px;
  border-radius: var(--hx-radius-input);
  border: 1px solid var(--hx-input-border);
  background: var(--hx-input-bg);
  box-shadow: var(--hx-input-shadow);
  transition:
    border-color .12s ease,
    box-shadow .12s ease,
    background .12s ease;
}

.hx-form-field input:focus,
.hx-form-field select:focus,
.hx-card-filters .form-select:focus,
.hx-card-filters .form-control:focus,
.hx-card-filters input[type="text"]:focus,
.hx-card-filters input[type="email"]:focus,
.hx-card-filters input[type="search"]:focus,
.hx-card--filters .form-select:focus,
.hx-card--filters .form-control:focus,
.hx-card--filters input[type="text"]:focus,
.hx-card--filters input[type="email"]:focus,
.hx-card--filters input[type="search"]:focus,
.hx-form .form-control:focus,
.hx-form .form-select:focus {
  outline: 0;
  border-color: var(--hx-input-focus-border);
  box-shadow: var(--hx-input-focus-shadow);
  background: #f9fbff;
}

/* checkboxes */
.hx-form-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}

.hx-form-footer {
  margin-top: 10px;
  text-align: right;
}

.hx-form .form-label {
  font-weight: 500;
  font-size: 0.9rem;
}

.hx-form .form-check-input {
  border-radius: 0.5rem;
}

/* ==============================
 * HASNER – Card de Filtros Globais
 * ============================== */

.hx-card-filters .hx-card-body,
.hx-card--filters .hx-card-body {
  padding: 10px 14px; /* compacto */
}

/* Layout do formulário de filtros (horizontal, responsivo) */
.hx-card-filters .hx-card-body > form,
.hx-card--filters .hx-card-body > form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0;
  align-items: flex-end;
}

/* cada coluna (Bootstrap col-*) com largura mínima */
.hx-card-filters .hx-card-body > form > [class^="col-"],
.hx-card--filters .hx-card-body > form > [class^="col-"],
.hx-card-filters .hx-card-body > form > [class*=" col-"],
.hx-card--filters .hx-card-body > form > [class*=" col-"] {
  min-width: 150px; /* já na versão compacta */
}

/* rótulos dos campos */
.hx-card-filters .form-label,
.hx-card--filters .form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 2px;
}

/* botão de filtro em formato pílula */
.hx-card-filters button[type="submit"],
.hx-card--filters button[type="submit"],
.hx-card-filters .btn-filter,
.hx-card--filters .btn-filter {
  border-radius: 999px;
  padding: 0.38rem 1.3rem;
  font-size: 0.9rem;
}

/* espaçamento vertical suave em telas maiores */
@media (min-width: 768px) {
  .hx-card-filters .row > [class^="col-"],
  .hx-card--filters .row > [class^="col-"] {
    margin-bottom: 0.25rem;
  }
}

/* mobile: empilha filtros para não amassar tudo */
@media (max-width: 768px) {
  .hx-card-filters .hx-card-body > form,
  .hx-card--filters .hx-card-body > form {
    flex-direction: column;
  }
}

/* ==========================================
 * TABELA HASNER – alta densidade, header fixo
 * ========================================== */

/* container com scroll próprio – permite header sticky funcionar bem */
.hx-table-wrapper {
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.08);
  overflow: auto;

  /* altura útil da tabela dentro da shell */
  max-height: calc(100vh - 160px);
}

/* tabela base */
.hx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}

/* células */
.hx-table th,
.hx-table td {
  padding: 0.08rem 0.20rem;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.80rem;
}

/* MODO COMPACTO – parecido com “Detalhes” do Explorer */
.hx-density-compact .hx-table th,
.hx-density-compact .hx-table td {
  padding-top: 0.01rem;
  padding-bottom: 0.01rem;
  padding-left: 0.30rem;
  padding-right: 0.30rem;
  font-size: 0.76rem;
  line-height: 1.00;
}

/* confortável (se quiser usar em outro lugar) */
.hx-density-comfortable .hx-table th,
.hx-density-comfortable .hx-table td {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  font-size: 0.95rem;
}

/* cabeçalho – sticky dentro do wrapper */
.hx-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f9fafb;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4b5563;
}

/* primeira coluna (checkbox) mais estreita */
.hx-table th[data-col="sel"],
.hx-table td[data-col="sel"] {
  width: 40px;
  text-align: center;
}

/* zebra leve nas linhas */
.hx-table tbody tr:nth-child(even) td {
  background: #f9fafb;
}

/* hover suave */
.hx-table tbody tr:hover td {
  background: rgba(129, 140, 248, 0.08);
}

/* compacto vs normal – classe auxiliar */
.hx-table--dense th,
.hx-table--dense td {
  padding-top: 0.10rem;
  padding-bottom: 0.10rem;
  font-size: 0.80rem;
}

/* colunas auxiliares – ajuste conforme seu modelo */
.hx-table .hx-col-title {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hx-table .hx-col-tags {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* toolbar da tabela (Novo documento, densidade, colunas, busca) */
.hx-table-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

/* grupo de toggles de densidade */
.hx-chip-toggle-group {
  display: inline-flex;
  border-radius: 999px;
  padding: 2px;
  background: #e5e7eb;
}

.hx-chip-toggle {
  border: 0;
  background: transparent;
  padding: 0.18rem 0.7rem;
  font-size: 0.78rem;
  border-radius: 999px;
  cursor: pointer;
}

.hx-chip-toggle.is-active {
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15,23,42,0.15);
}

/* ==========================================
 * Toolbar de documentos (linha de busca + botões)
 * ========================================== */

.hx-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Grupo dos botões Filtros / Vistas / Utilidades */
.hx-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.75rem;   /* um respiro depois da busca */
}

/* Botões em formato pill, sem cara de quadradão Bootstrap */
.hx-toolbar-actions .btn {
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #374151;
  padding: 0.28rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* hover / active / focus */
.hx-toolbar-actions .btn:hover {
  background: #f3f4ff;
  border-color: #a5b4fc;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
}

.hx-toolbar-actions .btn:active {
  background: #e5e7ff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.20);
}

.hx-toolbar-actions .btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(129, 140, 248, 0.55),
    0 0 0 4px rgba(226, 232, 240, 0.95);
}

/* container da busca */
.hx-explorer-search {
  position: relative;
  display: flex;
  align-items: center;

  /* mais próximo da caixinha do Windows */
  min-width: 220px;
  max-width: 260px;

  /* não deixa esticar e empurrar os botões pra baixo */
  flex: 0 0 auto;
}

/* input em formato pill */
.hx-explorer-search-input {
  padding: 0.28rem 0.9rem 0.28rem 2rem;  /* 2rem à esquerda por causa da lupa */
  border-radius: 999px;
  border: 1px solid #dde2f2;
  background-color: #fbfcff;
  font-size: 0.9rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* foco suave */
.hx-explorer-search-input:focus {
  border-color: #6277eb;
  box-shadow: 0 0 0 0.15rem rgba(98, 119, 235, 0.18);
  background-color: #ffffff;
}

/* ícone de lupa dentro do pill */
.hx-explorer-search-ico {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: #9ca3af;
  pointer-events: none;
}

/* =======================================================================
 * Layout helpers – densidade compacta em tabelas Bootstrap comuns
 * ======================================================================= */

.hx-density-compact .table > :not(caption) > * > * {
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

/* =======================================================================
 * Tags / Taxonomia – chips de tag e preview de cor
 * ======================================================================= */

.hx-tag-chip {
  --hx-tag-color: #64748b;           /* fallback caso não venha nada inline */
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  min-height: 22px;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  background: var(--hx-tag-color);
  color: #ffffff;
  white-space: nowrap;
}

.hx-tag-color-preview {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(15, 23, 42, 0.15);
}

/* Chips de tags na lista de documentos */
.hx-tags-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
}

.hx-tag-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 0.45rem;
  font-size: 11px;
  line-height: 1.4;
  background: rgba(148, 163, 184, 0.18); /* cinza claro */
  border: 1px solid rgba(148, 163, 184, 0.35);
  max-width: 120px;
}

.hx-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  margin-right: 4px;
}

.hx-tag-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hx-tag-more {
  font-size: 11px;
  color: #64748b;
  margin-left: 2px;
}
/* Linha horizontal compacta usada no plano de contas de Tags */
.hx-inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 16px;   /* espaço entre campos */
}

/* Cada “coluna” dentro da linha horizontal */
.hx-inline-field {
  min-width: 160px;
  flex: 1 0 0;    /* ocupa o espaço disponível, mas pode quebrar linha se faltar espaço */
}

/* Versão pequena (para cor, checkbox, botão etc.) */
.hx-inline-field--sm {
  flex: 0 0 auto;
}
/* ===========================
 * Layout específico Plano de Tags
 * =========================== */

.hx-tags-plan .hx-inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 16px;
}

/* colunas maiores (nome/descrição) */
.hx-tags-plan .hx-inline-field {
  flex: 1 1 0;
}

/* colunas pequenas (código, cor, checkbox, botão) */
.hx-tags-plan .hx-inline-field--sm,
.hx-tags-plan .hx-inline-field--code,
.hx-tags-plan .hx-inline-field--preview {
  flex: 0 0 auto;
}

/* Blocos de código: mais curtos */
.hx-tags-plan .hx-code-input {
  max-width: 200px;
}

/* Nome e descrição: tamanho mais razoável */
.hx-tags-plan .hx-name-input {
  max-width: 260px;
}

.hx-tags-plan .hx-desc-input {
  max-width: 320px;
}

/* Linha de cima um pouquinho mais apertada */
.hx-tags-plan .hx-inline-row--top .hx-form-field {
  margin-bottom: 0;
}

/* Pill de cor usa a mesma cor do input[type=color] */
.hx-tags-plan .hx-color-chip {
  min-width: 46px;
  text-align: center;
}
/* linhas horizontais compactas no plano de contas de tags */
.hx-inline-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: flex-end;
}

.hx-inline-row--tight {
  align-items: center;        /* tudo na mesma linha vertical */
  gap: 8px;                   /* aproxima os itens */
}

.hx-inline-field {
  flex: 1 1 0;
}

.hx-inline-field--sm {
  flex: 0 0 auto;             /* não estica, fica coladinho */
}

.hx-inline-field--right {
  margin-left: auto;          /* empurra o botão pro lado direito */
}

/* chip de cor do form de criação rápida */
.hx-color-chip {
  min-width: 48px;
  justify-content: center;
}

/* input de cor mais bonitinho */
.hx-color-input {
  border-radius: 999px;
  padding: 0;
  width: 48px;
  height: 44px;
}
/* inputs dentro da tabela de tags – mesmo estilo pill do resto */
.hx-table input.form-control,
.hx-table input.form-control-sm {
  border-radius: var(--hx-radius-input);
  padding: 2px 8px;
  font-size: 0.82rem;
}

/* campo de cor na tabela */
.hx-table .form-control-color {
  border-radius: 999px;
  width: 40px;
  height: 22px;
  padding: 0;
}

/* bolinha de preview de cor na tabela continua arredondada */
.hx-table td .badge.rounded-pill {
  border-radius: 999px;
  width: 18px;
  height: 18px;
  display: inline-block;
}
/* input de cor: some da tela, mas continua funcional */
.hx-color-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* pill de cor que o usuário vê e clica */
.hx-color-pill {
  cursor: pointer;
  padding-inline: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  background: var(--hx-tag-color, #3b82f6);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
}

/* Estilo pill com override controlado */
.hx-pill {
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  display: inline-block;
  line-height: 1;
}

/* Cores específicas (substitua se desejar) */
.bg-ocr {
  background-color: #e0bbff; /* Lilás claro */
  color: #4b0082;           /* Roxo escuro */
}

.bg-novo {
  background-color: #cce5ff; /* Azul claro */
  color: #004085;            /* Azul escuro */
}

/* 🧙‍♂️ Pill do Wizard de filtros */
.bg-wizard {
  background: linear-gradient(135deg, #6366f1, #a855f7); /* roxo/azul */
  color: #ffffff;
}

.bg-wizard:hover {
  color: #ffffff;
  text-decoration: none;
  filter: brightness(1.05);
}


.bg-wizard:hover {
  color: #ffffff;
  text-decoration: none;
  filter: brightness(1.05);
}
/* ========= RESET TIPOGRÁFICO GLOBAL — estiliza todos os templates ========= */

/* Tipografia base */
h1 { font-size: 20px; font-weight: 600; color: #0f172a; margin: 0 0 4px; line-height: 1.3; }
h2 { font-size: 16px; font-weight: 600; color: #0f172a; margin: 0 0 4px; line-height: 1.3; }
h3 { font-size: 14px; font-weight: 600; color: #0f172a; margin: 0 0 4px; }
p  { font-size: 13px; color: #64748b; margin: 0 0 8px; line-height: 1.6; }
small { font-size: 11px; color: #94a3b8; }
label { font-size: 12px; font-weight: 600; color: #374151; display: block; margin-bottom: 4px; }
strong { font-weight: 600; color: #0f172a; }

/* Links */
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Inputs globais */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}

input:focus, select:focus, textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* Botões globais */
button[type="submit"],
input[type="submit"] {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: filter .15s;
}
button[type="submit"]:hover { filter: brightness(1.08); }

/* Tabelas globais */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
thead th {
  background: #f8fafc;
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 9px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #64748b;
  white-space: nowrap;
}
tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(0,0,0,.04);
  color: #1e293b;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f8fafc; }

/* Formulários — wrapper padrão */
.form-group { margin-bottom: 14px; }

/* Wrappers de conteúdo legados — neutraliza classes Tailwind residuais */
[class*="max-w-"] { max-width: none !important; }
[class*="min-h-screen"] { min-height: unset !important; }
[class*="bg-gray"] { background: transparent !important; }
[class*="bg-white"] { background: white !important; }
[class*="rounded"] { border-radius: 12px; }
[class*="shadow"] { box-shadow: 0 2px 8px rgba(15,23,42,.06); }
[class*="font-bold"] { font-weight: 600 !important; }
[class*="font-semibold"] { font-weight: 600 !important; }
[class*="text-gray-800"], [class*="text-gray-900"] { color: #0f172a !important; }
[class*="text-gray-500"], [class*="text-gray-600"] { color: #64748b !important; }
[class*="text-gray-400"] { color: #94a3b8 !important; }
[class*="text-sm"] { font-size: 13px !important; }
[class*="text-xs"] { font-size: 11px !important; }
[class*="text-2xl"] { font-size: 20px !important; }
[class*="text-xl"] { font-size: 17px !important; }
[class*="text-lg"] { font-size: 15px !important; }
[class*="text-3xl"] { font-size: 24px !important; }
[class*="uppercase"] { text-transform: uppercase !important; }
[class*="tracking-wide"] { letter-spacing: .05em !important; }
[class*="grid"] { display: grid; }
[class*="flex"] { display: flex; }
[class*="items-center"] { align-items: center; }
[class*="justify-between"] { justify-content: space-between; }
[class*="w-full"] { width: 100% !important; }
[class*="overflow-hidden"] { overflow: hidden; }
[class*="divide-y"] > * + * { border-top: 1px solid rgba(0,0,0,.05); }
[class*="space-y-"] > * + * { margin-top: 10px; }

/* ========= CONTAINER PADRÃO — limita largura do conteúdo interno ========= */
.hx-shell > div:first-child:not([style*="max-width"]) {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Neutraliza min-h-screen residual do Tailwind */
[class*="min-h-screen"] {
  min-height: unset !important;
  background: transparent !important;
}

/* Neutraliza wrappers duplos do Tailwind */
[class*="max-w-6xl"],
[class*="max-w-5xl"],
[class*="max-w-4xl"],
[class*="max-w-2xl"],
[class*="max-w-sm"] {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ========= LARGURAS DE VISUALIZAÇÃO ========= */
.hx-shell { padding: 20px 24px; }

.hx-view-sm  { max-width: 560px;  margin: 0 auto; }
.hx-view-md  { max-width: 860px;  margin: 0 auto; }
.hx-view-lg  { max-width: 1180px; margin: 0 auto; }
.hx-view-full{ max-width: 100%;   margin: 0; }

/* Remove wrappers internos Tailwind dentro dos views */
.hx-view-sm > [class*="max-w-"],
.hx-view-md > [class*="max-w-"],
.hx-view-lg > [class*="max-w-"] {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}