:root {
  /* Botões principais (teal premium) */
  --btn-main-1:    #0e929b;
  --btn-main-2:    #0e7d8b; /* hover mais escuro */

  /* Ações positivas (verde petróleo suave) */
  --btn-add:       #21b190;

  /* Ações informativas (azul petróleo) */
  --btn-edit:      #3a8bbf;

  /* Ações críticas (vermelho desaturado) */
  --btn-delete:    #d45a67;

  /* Exportar (âmbar profissional, não amarelo ovo) */
  --btn-export:    #d3a838;

  /* Imprimir (roxo suave premium) */
  --btn-print:     #7d5ac4;

  /* Analisar (ciano profundo, elegante) */
  --btn-analyze:   #2399ad;

  /* Executar (laranja queimado suave, não saturado) */
  --btn-execute:   #b4724e;
  --btn-coral:     #ff6f61;
  /* Histórico (azul-violeta distinto para auditoria/atividades) */
  --btn-history:   #5866d6;

  /* Neutros */
  --btn-back:      #4b5563;  /* cinza grafite */
  --btn-close:     #374151;
  --btn-cancel:    #6b7280;

  /* Textos */
  --btn-text-light: #ffffff;
  --btn-text-dark:  #1f2937;
}


.btn-sem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h-md, 44px);
  padding: var(--btn-py-md, 12px) var(--btn-px-md, 24px);
  font-weight: 500;
  border-radius: var(--btn-radius, 12px);
  cursor: pointer;
  transition: all .2s ease;
  border: none;
  white-space: nowrap;
}

.btn .icon {
  width: 1.2em;
  height: 1.2em;
  stroke: currentColor;
}

.btn-sem .icon {
  width: 1.2em;
  height: 1.2em;
  stroke: currentColor;
}

.btn-add       { background: var(--btn-analyze);   color: var(--btn-text-light); --btn-tone-base: var(--btn-analyze); --btn-tone-fg: var(--btn-text-light); }
.btn-edit      { background: var(--btn-edit);      color: var(--btn-text-light); --btn-tone-base: var(--btn-edit);    --btn-tone-fg: var(--btn-text-light); }
.btn-delete    { background: var(--btn-delete);    color: var(--btn-text-light); --btn-tone-base: var(--btn-delete);  --btn-tone-fg: var(--btn-text-light); }
.btn-error     { background: var(--error);         color: var(--btn-text-light); --btn-tone-base: var(--error);       --btn-tone-fg: var(--btn-text-light); }
.btn-export    { background: var(--btn-export);    color: var(--btn-text-dark);  --btn-tone-base: var(--btn-export);  --btn-tone-fg: var(--btn-text-dark); }
.btn-print     { background: var(--btn-print);     color: var(--btn-text-light); --btn-tone-base: var(--btn-print);   --btn-tone-fg: var(--btn-text-light); }
.btn-analyze   { background: var(--btn-analyze);   color: var(--btn-text-light); --btn-tone-base: var(--btn-analyze); --btn-tone-fg: var(--btn-text-light); }
.btn-execute   { background: var(--btn-execute);   color: var(--btn-text-light); --btn-tone-base: var(--btn-execute); --btn-tone-fg: var(--btn-text-light); }
.btn-coral     { background: var(--btn-coral);     color: var(--btn-text-light); --btn-tone-base: var(--btn-coral);   --btn-tone-fg: var(--btn-text-light); }
.btn-history   { background: var(--btn-history);   color: var(--btn-text-light); --btn-tone-base: var(--btn-history); --btn-tone-fg: var(--btn-text-light); }
.btn-back      { background: var(--btn-back);      color: var(--btn-text-light); --btn-tone-base: var(--btn-back);    --btn-tone-fg: var(--btn-text-light); }
.btn-close     { background: var(--btn-close);     color: var(--btn-text-light); --btn-tone-base: var(--btn-close);   --btn-tone-fg: var(--btn-text-light); }
.btn-cancel    { background: var(--btn-cancel);    color: var(--btn-text-dark);  --btn-tone-base: var(--btn-cancel);  --btn-tone-fg: var(--btn-text-dark); }

/* DRY hover for solid-tone buttons: change only tone, keep text color. */
:is(.btn, .btn-sem):is(
  .btn-primary,
  .btn-add,
  .btn-edit,
  .btn-delete,
  .btn-error,
  .btn-export,
  .btn-print,
  .btn-analyze,
  .btn-execute,
  .btn-coral,
  .btn-history,
  .btn-back,
  .btn-close,
  .btn-cancel,
  .btn-role-create,
  .btn-role-save,
  .btn-role-filter
):hover,
:is(.btn, .btn-sem):is(
  .btn-primary,
  .btn-add,
  .btn-edit,
  .btn-delete,
  .btn-error,
  .btn-export,
  .btn-print,
  .btn-analyze,
  .btn-execute,
  .btn-coral,
  .btn-history,
  .btn-back,
  .btn-close,
  .btn-cancel,
  .btn-role-create,
  .btn-role-save,
  .btn-role-filter
):focus-visible {
  background: color-mix(in srgb, var(--btn-tone-base, var(--primary)) 88%, black 12%);
  border-color: color-mix(in srgb, var(--btn-tone-base, var(--primary)) 82%, black 18%);
  color: var(--btn-tone-fg, #ffffff);
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
  :is(.btn, .btn-sem):is(
    .btn-primary,
    .btn-add,
    .btn-edit,
    .btn-delete,
    .btn-error,
    .btn-export,
    .btn-print,
    .btn-analyze,
    .btn-execute,
    .btn-coral,
    .btn-history,
    .btn-back,
    .btn-close,
    .btn-cancel,
    .btn-role-create,
    .btn-role-save,
    .btn-role-filter
  ):hover,
  :is(.btn, .btn-sem):is(
    .btn-primary,
    .btn-add,
    .btn-edit,
    .btn-delete,
    .btn-error,
    .btn-export,
    .btn-print,
    .btn-analyze,
    .btn-execute,
    .btn-coral,
    .btn-history,
    .btn-back,
    .btn-close,
    .btn-cancel,
    .btn-role-create,
    .btn-role-save,
    .btn-role-filter
  ):focus-visible {
    filter: brightness(0.93);
    color: var(--btn-tone-fg, #ffffff);
  }
}

.btn-delete,
.btn-back,
.btn-primary,
.btn-secondary,
.btn-role-create,
.btn-role-save,
.btn-role-dashboard,
.btn-role-filter,
.btn-role-filter-clear,
.btn-role-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn i,
.btn svg,
.btn .lucide-icon-md {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* DataTables action icons */
.lucide-icon-md {
  width: 1.2rem;
  height: 1.2rem;
  stroke-width: 1.5;
}

.custom-tooltip,
.btn-delete-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}

.custom-tooltip:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

.text-edit {
  color: var(--accent) !important;
}

.text-version {
  color: var(--btn-history) !important;
  opacity: 0.9;
}

.text-version:hover {
  opacity: 1;
}

.text-delete {
  color: var(--error) !important;
  opacity: 0.85;
}

.text-delete:hover {
  opacity: 1;
}

.btn-sem:hover {
  opacity: .85;
  transform: translateY(-1px);
}

a.btn-sem:hover,
a.btn-sem:focus,
a.btn-sem:active {
  color: inherit;
  text-decoration: none;
}

/* =========================
   SEMANTIC BUTTON ROLES (DRY)
   Use the same class for the same function across the system.
   ========================= */

.btn-role-create {
  background: var(--btn-add);
  color: var(--btn-text-light);
  --btn-tone-base: var(--btn-add);
  --btn-tone-fg: var(--btn-text-light);
}

.btn-role-create:hover,
.btn-role-create:focus {
  opacity: .92;
  transform: translateY(-1px);
}

.btn-role-save {
  background: var(--btn-analyze);
  color: var(--btn-text-light);
  --btn-tone-base: var(--btn-analyze);
  --btn-tone-fg: var(--btn-text-light);
}

.btn-role-save:hover,
.btn-role-save:focus {
  opacity: .92;
  transform: translateY(-1px);
}

.btn-role-dashboard {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.btn-role-dashboard:hover,
.btn-role-dashboard:focus {
  background: var(--hover-bg);
  border-color: var(--border-hover, var(--border));
  color: var(--text-primary);
}

.btn-role-filter {
  background: var(--primary, #4a47a3);
  color: #ffffff;
  border: 1px solid var(--primary, #4a47a3);
  --btn-tone-base: var(--primary, #4a47a3);
  --btn-tone-fg: #ffffff;
}

.btn-role-filter:hover,
.btn-role-filter:focus {
  background: var(--primary-hover, #5d5ab5);
  border-color: var(--primary-hover, #5d5ab5);
  color: #ffffff;
}

.btn-role-filter-clear {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.btn-role-filter-clear:hover,
.btn-role-filter-clear:focus {
  background: var(--hover-bg);
  color: var(--text-primary);
  border-color: var(--border-hover, var(--border));
}

.btn-role-cancel {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.btn-role-cancel:hover,
.btn-role-cancel:focus {
  background: var(--hover-bg);
  border-color: var(--border-hover, var(--border));
}