/*
 * TechTrust UI Kit v8 - Componentes gerais
 * Arquivo: techtrust_v8.css
 * Dependências sugeridas no HTML: Bootstrap 5.3.x, Lucide Icons.
 * Este arquivo não contém estilos específicos de menu/sidebar.
 */

:root {
  /*
   * Tokens globais do UI Kit.
   * A maior parte da customizacao deve acontecer aqui ou nos CSSs de tema.
   */
  --tt-font-family: Calibri, "Segoe UI", Roboto, Arial, sans-serif;
  --tt-form-font-family: Tahoma, Verdana, Arial, sans-serif;
  --tt-page-bg: #f6f8fb;
  --tt-surface: #ffffff;
  --tt-surface-soft: #f8fafc;
  --tt-border: #d8e0ea;
  --tt-border-soft: #e8eef6;
  --tt-text: #172033;
  --tt-text-muted: #5f6c80;
  --tt-text-soft: #8792a5;
  --tt-focus: rgba(37, 99, 235, .22);
  --tt-radius-sm: .375rem;
  --tt-radius: .625rem;
  --tt-radius-lg: .875rem;
  --tt-shadow-sm: 0 3px 10px rgba(15, 23, 42, .06);
  --tt-shadow: 0 10px 28px rgba(15, 23, 42, .10);
  --tt-control-height: 1.95rem;
  --tt-control-height-sm: 1.7rem;
  --tt-control-padding-y: .22rem;
  --tt-control-padding-x: .5rem;
  --tt-control-font-size: .8rem;
  --tt-control-radius: .42rem;

  --tt-field-width-xs: 6.5rem;
  --tt-field-width-sm: 8.5rem;
  --tt-field-width-md: 11.5rem;
  --tt-field-width-lg: 18rem;
  --tt-field-width-xl: 24rem;
  --tt-field-width-date: 20rem;
  --tt-date-input-width: 8.4rem;
  --tt-date-fieldset-width: 21rem;
  --tt-fieldset-bg: #f8fbff;
  --tt-fieldset-border: #c5d3e6;

  --tt-blue: #2563eb;
  --tt-blue-soft: #eaf2ff;
  --tt-blue-border: #b8cffc;

  --tt-green: #169b62;
  --tt-green-soft: #e8f8f0;
  --tt-green-border: #a9e4c4;

  --tt-orange: #d97706;
  --tt-orange-soft: #fff4df;
  --tt-orange-border: #fed7aa;

  --tt-red: #dc2626;
  --tt-red-soft: #fff0f0;
  --tt-red-border: #fecaca;

  --tt-wine: #9f1239;
  --tt-wine-soft: #fff1f5;
  --tt-wine-border: #fecdd3;

  --tt-purple: #7c3aed;
  --tt-purple-soft: #f3edff;
  --tt-purple-border: #ddd0fe;

  --tt-pink: #db2777;

  --tt-info: #0284c7;
  --tt-info-soft: #e6f6ff;
  --tt-info-border: #bae6fd;

  --tt-black: #000000;
  --tt-black-border: #2e2e2e;
}

html,
body {
  min-height: 100%;
}

/*
 * Base de documento e containers simples.
 */
body {
  margin: 0;
  background: var(--tt-page-bg);
  color: var(--tt-text);
  font-family: var(--tt-font-family);
  font-size: .925rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ANCHOR - Sensação visual de tela bloqueada durante disableFields(true) */
body.tt-disabling {
  cursor: progress;
}

body.tt-disabling .tt-dialog:not(.tt-dialog-iframe) .tt-dialog-body,
body.tt-disabling main,
body.tt-disabling .tt-content {
  opacity: .6;
  filter: saturate(.7);
  pointer-events: none;
  transition: opacity .15s ease, filter .15s ease;
}

/* Mantém elementos marcados como neverDisabled totalmente interativos e nítidos mesmo com a tela "travada" */
body.tt-disabling .neverDisabled {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

.tt-page {
  padding: 1.25rem;
}

.tt-section {
  margin-bottom: 1.5rem;
}

.tt-card {
  background: var(--tt-surface);
  border: 1px solid var(--tt-border-soft);
  border-radius: var(--tt-radius-lg);
  box-shadow: var(--tt-shadow-sm);
}

.tt-card-body {
  padding: 1.125rem;
}

/** ANCHOR - Disabled: Sempre que você colocar um elemento com essa classe no final, o elemento deve ficar desabilitado */
.disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(30%);
  cursor: not-allowed;
  user-select: none;
}

.tt-disabled-wrapper {
  display: inline-block;
  pointer-events: auto;
}

/*
 * Tipografia funcional: titulos, labels, ajuda e mensagens pequenas.
 */
.tt-window-title {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0;
  color: var(--tt-text);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
}

.tt-window-title .tt-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: .75rem;
  color: var(--tt-blue);
  background: var(--tt-blue-soft);
}

.tt-window-subtitle {
  margin: .25rem 0 0 2.8rem;
  color: var(--tt-text-muted);
  font-size: .9rem;
}

.tt-grid-title {
  margin: 0;
  color: var(--tt-text);
  font-size: 1rem;
  font-weight: 700;
}

.tt-label {
  display: inline-flex;
  align-items: center;
  gap: .08rem;
  margin-bottom: .25rem;
  color: #243044;
  font-family: var(--tt-form-font-family);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.2;
}

.tt-label-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: .7rem;
}

.tt-label-help,
.tt-help-icon {
  width: 1rem;
  height: 1rem;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--tt-blue);
}

.tt-help-icon svg,
.tt-help-icon i,
.tt-label-help svg,
.tt-label-help i {
  width: .95rem;
  height: .95rem;
}

.tt-required-mark {
  display: inline;
  margin-left: .15rem;
  font-size: .95rem;
  line-height: 1;
}

.tt-required-mark::after {
  content: "*";
  color: var(--tt-red);
}

.tt-label.tt-required-mark {
  font-size: .7rem;
}

.tt-field-note {
  margin-top: .3rem;
  color: var(--tt-text-soft);
  font-size: .76rem;
  line-height: 1.25;
}

/* Contador de caracteres. */
.tt-field-counter,
.tt-contador {
  display: block;
  width: 100%;
  margin-top: .18rem;
  text-align: right;
  color: var(--tt-text-soft);
  font-family: var(--tt-form-font-family);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.2;
  user-select: none;
}

/* Quando atingir o limite */
.tt-field-counter[full],
.tt-contador[full] {
  color: var(--tt-red);
  font-weight: 550;
}

/*
 * Controles de formulario.
 * Mantem aparencia uniforme mesmo quando Bootstrap nao estiver carregado.
 */
.form-control.tt-control,
.form-select.tt-control,
.tt-control {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: var(--tt-control-height);
  min-height: var(--tt-control-height);
  max-height: var(--tt-control-height);
  padding: var(--tt-control-padding-y) var(--tt-control-padding-x);
  border-color: #cbd5e1;
  border-style: solid;
  border-width: 1px;
  border-radius: var(--tt-control-radius);
  color: var(--tt-text);
  background-color: #fff;
  font-family: var(--tt-form-font-family);
  font-size: var(--tt-control-font-size);
  line-height: 1.15;
  box-shadow: none;
}

.form-control.tt-control:focus,
.form-select.tt-control:focus {
  border-color: var(--tt-blue);
  box-shadow: 0 0 0 .18rem var(--tt-focus);
}

textarea.form-control.tt-control {
  min-height: 5.6rem;
}

.form-control.tt-control::placeholder {
  color: #9aa6b6;
}

.form-select.tt-control {
  appearance: auto;
}

input[type="date"].tt-control,
input[type="text"].tt-control,
input[type="search"].tt-control,
input[type="number"].tt-control,
input[type="tel"].tt-control,
input[type="email"].tt-control,
select.tt-control {
  height: var(--tt-control-height);
}

input[type="date"].tt-control {
  font-size: .8rem;
}

.tt-input-icon {
  position: relative;
}

.tt-input-icon>i,
.tt-input-icon>svg {
  position: absolute;
  left: .75rem;
  top: 50%;
  font-size: 1rem;
  color: var(--tt-text-soft);
  transform: translateY(-50%);
  pointer-events: none;
}

.tt-input-icon .tt-control {
  padding-left: 2.2rem;
}

.tt-password-toggle {
  position: absolute;
  right: .35rem;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: .4rem;
  color: var(--tt-text-muted);
  background: transparent;
  transform: translateY(-50%);
}

.tt-password-toggle:hover {
  color: var(--tt-blue);
  background: var(--tt-blue-soft);
}

.tt-state-invalid .tt-control,
.tt-control.is-invalid {
  border-color: var(--tt-red);
  background-color: #fffafa;
}

input[type="date"].tt-control.is-invalid {
  padding-right: 1rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(.375em + .1875rem) center;
  background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

input[type="date"].tt-control.is-invalid::-webkit-calendar-picker-indicator {
  transform: translateX(-.75rem);
}

.tt-state-warning .tt-control,
.tt-control.is-warning {
  border-color: var(--tt-orange);
  background-color: #fffaf0;
}

.tt-invalid-message {
  display: none;
  align-items: center;
  gap: .3rem;
  color: var(--tt-red);
  font-size: .76rem;
  font-weight: 600;
}

.tt-control.is-invalid+.tt-invalid-message {
  display: flex;
}

.tt-warning-message {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .3rem;
  color: var(--tt-orange);
  font-size: .76rem;
  font-weight: 600;
}

.tt-info-message {
  display: flex;
  align-items: center;
  gap: .45rem;
  max-width: 100%;
  margin-top: .55rem;
  padding: .45rem .6rem;
  border: 1px solid var(--tt-blue-border);
  border-radius: var(--tt-control-radius);
  color: var(--tt-blue);
  background: var(--tt-blue-soft);
  font-size: .72rem;
  line-height: 1.3;
}

.tt-info-message>i {
  flex: 0 0 auto;
  font-size: .9rem;
}

/**
 * ANCHOR - Checkboxes e radios compactos
 */
.form-check.tt-check {
  min-height: var(--tt-control-height);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding-left: 0;
  margin: 0;
}

.tt-check .form-check-input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  border-color: #aeb9c8;
}

.tt-check .form-check-input:focus {
  box-shadow: 0 0 0 .18rem var(--tt-focus);
}

.tt-check .form-check-label {
  color: var(--tt-text);
  font-family: var(--tt-form-font-family);
  font-size: .76rem;
}

/**
 * ANCHOR - Checkbox compacto ao lado de labels
 */
.form-check.tt-check-label {
  min-height: auto;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding-left: 0;
  margin: 0;
  white-space: nowrap;
}

.tt-check-label .form-check-input {
  flex: 0 0 auto;
  width: .8rem;
  height: .8rem;
  margin: 0;
  border-color: #aeb9c8;
}

.tt-check-label .form-check-input:focus {
  box-shadow: 0 0 0 .18rem var(--tt-focus);
}

.tt-check-label .form-check-label {
  color: var(--tt-text);
  font-family: var(--tt-form-font-family);
  font-size: .7rem;
}


/**
 * ANCHOR - Linha do switch
 */
.tt-switch-line {
  min-height: var(--tt-control-height);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.form-switch-label {
  color: var(--tt-text);
  font-family: var(--tt-form-font-family);
  font-size: .70rem;
}

/**
 * ANCHOR - Switch
 */
.tt-switch-line .form-switch .form-check-input {
  background-color: var(--tt-blue);
  border-color: var(--tt-blue);
  background-image: url("../../vendor/simple-icons/switch-circle.svg");
}

.tt-switch-line .form-switch .form-check-input:checked {
  background-color: var(--tt-red);
  border-color: var(--tt-red);
  background-image: url("../../vendor/simple-icons/switch-circle.svg");
}

.tt-switch-line .form-check.form-switch {
  min-height: auto;
  padding-left: 0;
  margin: 0;
}

.tt-switch-line .form-check-input {
  width: 2rem;
  height: 1rem;
  margin: 0;

  background-color: var(--tt-blue);
  border-color: var(--tt-blue);
}

.tt-switch-line .form-check-input:checked {
  background-color: var(--tt-red);
  border-color: var(--tt-red);
}

.tt-switch-line .form-check-input:focus {
  box-shadow: 0 0 0 .18rem var(--tt-focus);
}

.tt-switch-line .form-check-input:checked:focus {
  box-shadow: 0 0 0 .25rem rgba(220, 38, 38, .25);
}

/*
 * Botoes outline tingidos.
 * A cor indica semantica, mas o peso visual fica leve.
 */
.tt-btn {
  --tt-btn-color: var(--tt-blue);
  --tt-btn-bg: var(--tt-blue-soft);
  --tt-btn-border: var(--tt-blue-border);
  --tt-btn-icon-content: "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: var(--tt-control-height);
  padding: .34rem .76rem;
  border: 1px solid var(--tt-btn-border);
  border-radius: .5rem;
  color: var(--tt-btn-color);
  background: var(--tt-btn-bg);
  font-family: var(--tt-font-family);
  font-size: .83rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}

.tt-btn:hover,
.tt-btn:focus-visible {
  color: var(--tt-btn-color);
  background: color-mix(in srgb, var(--tt-btn-color) 13%, white);
  border-color: var(--tt-btn-color);
}

.tt-btn:active {
  transform: translateY(1px);
}

.tt-btn svg,
.tt-btn i {
  font-size: 1rem;
  width: 1rem;
  height: 1rem;
  stroke-width: 2.1;
}

.tt-btn i,
.tt-filter-title i {
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

.tt-btn-sm {
  min-height: var(--tt-control-height-sm);
  padding: .32rem .6rem;
  font-size: .8rem;
}

.tt-btn-blue,
.tt-btn-pesquisar,
.tt-btn-filtro,
.tt-btn-editar,
.tt-btn-zoom-mais,
.tt-btn-zoom-menos,
.tt-btn-atualizar,
.tt-btn-continuar,
.tt-btn-volume-ligado,
.tt-btn-cadeado,
.tt-btn-enviar {
  --tt-btn-color: var(--tt-blue);
  --tt-btn-bg: color-mix(in srgb, var(--tt-blue) 7%, white);
  --tt-btn-border: var(--tt-blue-border);
}

.tt-btn-recarregar {
  --tt-btn-color: var(--tt-black);
  --tt-btn-bg: color-mix(in srgb, var(--tt-black) 7%, white);
  --tt-btn-border: var(--tt-black-border);
}

.tt-btn-green,
.tt-btn-mensagem,
.tt-btn-salvar,
.tt-btn-anexar,
.tt-btn-whatsapp,
.tt-btn-ativar,
.tt-btn-novo {
  --tt-btn-color: var(--tt-green);
  --tt-btn-bg: color-mix(in srgb, var(--tt-green) 7%, white);
  --tt-btn-border: var(--tt-green-border);
}

.tt-btn-orange,
.tt-btn-gerar-prontuario,
.tt-btn-limpar,
.tt-btn-inativar,
.tt-btn-textos-padrao,
.tt-btn-cancelar {
  --tt-btn-color: var(--tt-orange);
  --tt-btn-bg: color-mix(in srgb, var(--tt-orange) 8%, white);
  --tt-btn-border: var(--tt-orange-border);
}

.tt-btn-red,
.tt-btn-limpar-filtro,
.tt-btn-deletar,
.tt-btn-excluir,
.tt-btn-volume-desligado,
.tt-btn-documento {
  --tt-btn-color: var(--tt-red);
  --tt-btn-bg: color-mix(in srgb, var(--tt-red) 7%, white);
  --tt-btn-border: var(--tt-red-border);
}

.tt-btn-cancelar,
.tt-btn-voltar {
  --tt-btn-color: var(--tt-text-muted);
  --tt-btn-bg: #eef2f7;
  --tt-btn-border: var(--tt-border);
}

.tt-btn-wine {
  --tt-btn-color: var(--tt-wine);
  --tt-btn-bg: color-mix(in srgb, var(--tt-wine) 7%, white);
  --tt-btn-border: var(--tt-wine-border);
}

.tt-btn-purple,
.tt-btn-automacao,
.tt-btn-dlg-txt-padrao {
  --tt-btn-color: var(--tt-purple);
  --tt-btn-bg: color-mix(in srgb, var(--tt-purple) 7%, white);
  --tt-btn-border: var(--tt-purple-border);
}

.tt-btn-outros {
  --tt-btn-color: var(--tt-text-muted);
  --tt-btn-bg: #eef2f7;
  --tt-btn-border: var(--tt-border);
}

.tt-btn-info,
.tt-btn-visualizar {
  --tt-btn-color: var(--tt-info);
  --tt-btn-bg: color-mix(in srgb, var(--tt-info) 7%, white);
  --tt-btn-border: var(--tt-info-border);
}


/*
 * Dropdowns simples.
 */
.tt-btn-dropdown::after {
  content: "";
  display: inline-block;
  width: .45rem;
  height: .45rem;
  margin-left: .15rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

.tt-dropdown-menu {
  border: 1px solid var(--tt-border-soft);
  border-radius: .65rem;
  box-shadow: var(--tt-shadow);
  padding: .35rem;
  font-size: .86rem;
}

.tt-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 2rem;
  border-radius: .45rem;
  color: var(--tt-text);
}

.tt-dropdown-menu .dropdown-item svg {
  width: 1rem;
  height: 1rem;
  color: var(--tt-text-muted);
}

.tt-dropdown-menu .dropdown-item:hover {
  color: var(--tt-blue);
  background: var(--tt-blue-soft);
}

.tt-file-row {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) auto auto;
  gap: .5rem;
  align-items: end;
}

.tt-file-actions {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
}

/* SECTION - Seletor de arquivos */

.tt-file-picker {
  display: flex;
  align-items: stretch;
  height: var(--tt-control-height);
  border: 1px solid #cbd5e1;
  border-radius: var(--tt-control-radius);
  background: #fff;
  overflow: hidden;
}

.tt-file-picker-input {
  display: none;
}

.tt-file-picker-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: 0 .55rem;
  border: 0;
  border-right: 1px solid var(--tt-border);
  background: var(--tt-surface-soft);
  color: var(--tt-blue);
  font-family: var(--tt-form-font-family);
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.tt-file-picker-btn i {
  font-size: .85rem;
}

.tt-file-picker-btn:hover,
.tt-file-picker-btn:focus-visible {
  background: var(--tt-blue-soft);
}

.tt-file-picker-status {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 .55rem;
  color: var(--tt-text-soft);
  font-family: var(--tt-form-font-family);
  font-size: .7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-file-picker-status.tt-file-status-preenchido {
  color: var(--tt-text);
  font-weight: 600;
}

.tt-file-picker-clear {
  flex: 0 0 auto;
  width: 1.9rem;
  border: 0;
  border-left: 1px solid var(--tt-border);
  background: transparent;
  color: var(--tt-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tt-file-picker-clear i {
  font-size: .85rem;
}

.tt-file-picker-clear:hover:not(:disabled) {
  background: var(--tt-red-soft);
}

.tt-file-picker-clear:disabled {
  color: var(--tt-text-soft);
  opacity: .5;
  filter: grayscale(60%);
  cursor: not-allowed;
}

/*!SECTION */
.tt-grid-card {
  background: var(--tt-surface);
  border: 1px solid var(--tt-border-soft);
  border-radius: var(--tt-radius-lg);
  box-shadow: var(--tt-shadow-sm);
  overflow: hidden;
}

.tt-grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--tt-border-soft);
  background: linear-gradient(180deg, #fff, #fbfdff);
}

.tt-grid-toolbar-actions {
  display: flex;
  gap: .45rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.tt-data-grid {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .84rem;
}

.tt-data-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .65rem .7rem;
  color: #334155;
  background: #f3f7fc;
  border-bottom: 1px solid var(--tt-border);
  font-size: .78rem;
  font-weight: 800;
  text-transform: none;
  text-align: left;
  white-space: nowrap;
}

.tt-data-grid tbody td {
  padding: .68rem .7rem;
  color: var(--tt-text);
  border-bottom: 1px solid var(--tt-border-soft);
  vertical-align: middle;
}

.tt-data-grid tbody tr:hover td {
  background: #fbfdff;
}

/* ANCHOR - Alinhamento por papel da coluna (independe de posição/quantidade) */
.tt-data-grid th,
.tt-data-grid td {
  text-align: left;
}

.tt-linha-primaria {
  font-weight: 550;
}

.tt-linha-secundaria {
  font-size: 11px;
  font-weight: 650;
}


.tt-data-grid td ul {
  margin: 0;
  padding-left: 1.2rem;
  text-align: left;
  list-style-position: outside;
}

.tt-data-grid td li {
  text-align: left;
}

/* ANCHOR - Ações sempre no final (ponta direita) */
.tt-data-grid th:last-child:not(.tt-col-left):not(.tt-col-center):not(.tt-col-right),
.tt-data-grid td:last-child:not(.tt-col-left):not(.tt-col-center):not(.tt-col-right) {
  text-align: center;
}

/* ANCHOR - Alinhamento das colunas */
.tt-data-grid .tt-col-center {
  text-align: center;
}

.tt-data-grid .tt-col-right {
  text-align: right;
}

.tt-data-grid .tt-col-left {
  text-align: left;
}

.tt-row-number {
  width: 3.1rem;
  color: var(--tt-text-soft) !important;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tt-cell-main {
  display: block;
  color: var(--tt-text);
  font-weight: 700;
  line-height: 1.15;
}

.tt-cell-sub {
  display: block;
  margin-top: .15rem;
  color: var(--tt-text-muted);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.1;
}

.tt-icon-masculino,
.tt-icon-feminino,
.tt-icon-avatar {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.tt-icon-masculino,
.tt-icon-zoom-mais,
.tt-icon-zoom-menos,
.tt-icon-volume-ligado,
.tt-icon-eventos-avulsos,
.tt-icon-avatar {
  color: var(--tt-blue);
}

.tt-icon-volume-desligado {
  color: var(--tt-red);
}

.tt-icon-feminino {
  color: var(--tt-pink);
}

.tt-icon-pacotes {
  color: var(--tt-green);
}

.tt-icon-consumos-mat {
  color: var(--tt-orange);
}

.tt-icon-observacao {
  color: var(--tt-purple);
}

.tt-grid-actions {
  display: flex;
  gap: .25rem;
  justify-content: flex-end;
  white-space: nowrap;
}

.tt-icon-action,
.tt-icon-button {
  --tt-action-color: var(--tt-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid transparent;
  border-radius: .45rem;
  color: var(--tt-action-color);
  background: transparent;
  padding: 0;
  line-height: 1;
}

.tt-icon-action:hover,
.tt-icon-action:focus-visible,
.tt-icon-button:hover,
.tt-icon-button:focus-visible {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 10%, white);
}

.tt-icon-action svg,
.tt-icon-action i,
.tt-icon-button svg,
.tt-icon-button i {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  line-height: 1;
}

.tt-action-visualizar {
  --tt-action-color: var(--tt-info);
}

.tt-action-editar,
.tt-action-pesquisar {
  --tt-action-color: var(--tt-blue);
}

.tt-action-excluir,
.tt-action-whatsapp-enviado,
.tt-action-limpar-filtro,
.tt-action-documento {
  --tt-action-color: var(--tt-red);
}

.tt-action-inativar,
.tt-action-pesquisar-grid,
.tt-action-txt-padrao,
.tt-action-telefone {
  --tt-action-color: var(--tt-orange);
}

.tt-action-recarregar,
.tt-action-conf {
  --tt-action-color: var(--tt-black);
}

.tt-action-ativar,
.tt-action-mensagem,
.tt-action-whatsapp,
.tt-action-planilha,
.tt-action-material-estoque,
.tt-action-config,
.tt-icon-salvar,
.tt-action-salvar {
  --tt-action-color: var(--tt-green);
}

.tt-action-inativar,
.tt-action-limpar,
.tt-action-cancela {
  --tt-action-color: var(--tt-orange);
}

.tt-action-continuar,
.tt-action-enviar,
.tt-action-automacao {
  --tt-action-color: var(--tt-blue);
}

.tt-action-dlg-txt-padrao {
  --tt-action-color: var(--tt-purple);
}

.tt-action-outros {
  --tt-action-color: var(--tt-text-muted);
}

.tt-icon-svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;

  background-color: var(--tt-action-color, currentColor);

  -webkit-mask-image: var(--tt-icon-svg-src);
  mask-image: var(--tt-icon-svg-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/*SECTION - Icone de automação do ZAP */
.tt-icon-wa {
  --tt-action-color: var(--tt-text-muted);
  --tt-icon-wa-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--tt-icon-wa-size);
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}

button.tt-icon-wa {
  width: auto;
  min-width: 1.8rem;
  padding-inline: 0.35rem;
  border-color: transparent;
  color: var(--tt-action-color);
}

button.tt-icon-wa:hover,
button.tt-icon-wa:focus-visible {
  border-color: var(--tt-text-muted);
}

.tt-icon-wa[data-status="success"]>.tt-icon-wa__status {
  color: var(--tt-green);
}

.tt-icon-wa[data-status="warning"]>.tt-icon-wa__status {
  color: var(--tt-red);
}

.tt-icon-wa[data-status="neutral"]>.tt-icon-wa__status {
  color: var(--tt-text-muted);
}

.tt-icon-wa[data-status="alert"]>.tt-icon-wa__status {
  color: var(--tt-orange);
}

.tt-icon-wa>.tt-icon-wa__status,
.tt-icon-wa>.tt-icon-wa__bot,
.tt-icon-wa>.tt-icon-wa__whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--tt-icon-wa-size);
  height: var(--tt-icon-wa-size);
  font-size: var(--tt-icon-wa-size);
  line-height: 1;
}

.tt-icon-wa__status {
  color: var(--tt-action-color);
}

.tt-icon-wa__bot {
  color: var(--tt-green);
}

.tt-icon-wa__whatsapp {
  --tt-action-color: var(--tt-green);
}

.tt-icon-wa .tt-icon-wa__whatsapp .tt-icon-svg {
  display: block;
  width: var(--tt-icon-wa-size);
  height: var(--tt-icon-wa-size);
  font-size: var(--tt-icon-wa-size);
}

/* !SECTION */

.tt-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .22rem .5rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 500;
  line-height: 1;
  vertical-align: middle;
}

.tt-badge-green,
.tt-badge-ativo {
  color: var(--tt-green);
  background: var(--tt-green-soft);
}

.tt-badge-red,
.tt-badge-inativo {
  color: var(--tt-red);
  background: var(--tt-red-soft);
}

.tt-badge-falecido {
  color: var(--tt-wine);
  background: var(--tt-wine-soft);
}

.tt-badge-orange,
.tt-badge-warning {
  color: var(--tt-orange);
  background: var(--tt-orange-soft);
}

.tt-badge-blue {
  color: var(--tt-blue);
  background: var(--tt-blue-soft);
}

.tt-badge-purple {
  color: var(--tt-purple);
  background: var(--tt-purple-soft);
}

.tt-badge-muted {
  color: var(--tt-text-muted);
  background: #eef2f7;
}

/* SECTION - Accordion de detalhes com resumo */
.ranking-clientes-dialog-body {
  grid-template-rows: auto minmax(0, 1fr);
}

.tt-detail-accordion {
  --tt-detail-color: var(--tt-blue);
  --tt-detail-soft: var(--tt-blue-soft);
  --tt-detail-border: var(--tt-blue-border);
}

.tt-detail-accordion-green {
  --tt-detail-color: var(--tt-green);
  --tt-detail-soft: var(--tt-green-soft);
  --tt-detail-border: var(--tt-green-border);
}

.tt-detail-accordion-orange {
  --tt-detail-color: var(--tt-orange);
  --tt-detail-soft: var(--tt-orange-soft);
  --tt-detail-border: var(--tt-orange-border);
}

.tt-detail-accordion .accordion-item {
  overflow: hidden;
  border: 1px solid var(--tt-detail-color);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-surface);
}

.tt-detail-accordion .accordion-button {
  gap: .75rem;
  padding: .65rem 1rem;
  color: var(--tt-text);
  background: var(--tt-surface);
  box-shadow: none;
}

.tt-detail-accordion .accordion-button:not(.collapsed) {
  color: var(--tt-text);
  background: var(--tt-surface);
  box-shadow: inset 0 -1px 0 var(--tt-border-soft);
}

.tt-detail-accordion .accordion-button:focus {
  border-color: transparent;
  box-shadow: none;
}

.tt-detail-accordion .accordion-button::after {
  margin-left: 0;
}

.tt-detail-accordion-heading {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  gap: .75rem;
}

.tt-detail-accordion-icon {
  display: inline-flex;
  flex: 0 0 2.5rem;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--tt-detail-color);
  background: var(--tt-detail-soft);
  border: 1px solid var(--tt-detail-border);
  border-radius: var(--tt-radius);
  font-size: 1.15rem;
}

.tt-detail-accordion-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.tt-detail-accordion-title {
  font-weight: 600;
}

.tt-detail-accordion-subtitle {
  margin-top: .15rem;
  color: var(--tt-text-muted);
  font-size: .78rem;
  font-weight: 400;
}

.tt-detail-accordion-summary {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .5rem;
}

.tt-detail-accordion-total {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: .22rem .65rem;
  color: var(--tt-detail-color);
  background: var(--tt-surface);
  border: 1px solid var(--tt-detail-border);
  border-radius: var(--tt-radius-sm);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.tt-detail-accordion .accordion-body {
  padding: .75rem 1rem 1rem;
}

/* !SECTION */

/*SECTION - Sidebar de marcações do dialog de texto padrão */
.tt-marcacoes-layout {
  display: grid;
  grid-template-columns: var(--tt-field-width-lg) minmax(0, 1fr);
  align-items: start;
  gap: .9rem;
  min-width: 0;
}

.tt-marcacoes-coluna,
.tt-marcacoes-editor {
  min-width: 0;
}

.tt-marcacoes-sidebar {
  min-width: 0;
  padding: .75rem;
  border: 1px solid #cbd5e1;
  border-radius: var(--tt-radius);
  background: var(--tt-surface);
}

.tt-marcacoes-sidebar-header,
.tt-marcacoes-grupo-cabecalho,
.tt-marcacoes-item {
  display: flex;
  align-items: center;
}

.tt-marcacoes-sidebar-header {
  min-width: 0;
}

.tt-marcacoes-grupos {
  display: flex;
  flex-direction: column;
}

.tt-marcacoes-grupo {
  --tt-marcacao-cor-texto: #64748b;
  --tt-marcacao-cor-fundo: #eceef1;
  padding: .45rem 0;
  border-top: 1px solid var(--tt-border-soft);
}

.tt-marcacoes-grupo:first-child {
  border-top: 0;
}

.tt-marcacoes-grupo-cabecalho {
  gap: .45rem;
  color: var(--tt-text);
  font-weight: 700;
}

.tt-marcacoes-grupo-icone {
  color: var(--tt-marcacao-cor-texto);
  background: transparent;
}

.tt-marcacoes-lista {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: .45rem 0 0;
  padding: 0;
  list-style: none;
}

.tt-marcacoes-item {
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
}

.tt-marcacoes-item .tt-badge {
  min-width: 0;
  white-space: nowrap;
}

.tt-badge-marcacao {
  color: var(--tt-marcacao-cor-texto, #64748b);
  background: var(--tt-marcacao-cor-fundo, #eceef1);
}

.tt-marcacoes-vazio {
  margin: 0;
  color: var(--tt-text-muted);
  font-size: var(--tt-control-font-size);
}

.tt-marcacoes-editor {
  display: flex;
  flex-direction: column;
}

.tt-texto-padrao-dica {
  display: flex;
  align-items: center;
  gap: .5rem;

  margin-top: .5rem;
  padding: .65rem .75rem;

  color: var(--tt-orange);
  background: var(--tt-orange-soft);
  border: 1px solid var(--tt-orange-border);
  border-radius: .375rem;

  font-size: var(--tt-control-font-size);
  line-height: 1.4;
}

.tt-texto-padrao-dica i {
  flex: 0 0 auto;
  font-size: 1rem;
}

#dlg_textarea_texto_padrao {
  min-height: calc(4.5em + 0.75rem + 2px);
  height: auto;
  max-height: none;
  overflow: visible;
  border-color: #cbd5e1;
}

#dlg_textarea_texto_padrao:focus {
  border-color: var(--tt-blue);
}

@media (max-width: 768px) {
  .tt-marcacoes-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .tt-marcacoes-sidebar {
    width: 100%;
  }

  .tt-marcacoes-editor {
    width: 100%;
  }
}


/*!SECTION */

.popover.tt-popover,
.tt-popover {
  --bs-popover-border-color: var(--tt-border);
  --bs-popover-border-radius: .65rem;
  --bs-popover-box-shadow: var(--tt-shadow);
  --bs-popover-header-bg: #f8fafc;
  --bs-popover-header-color: var(--tt-text);
  --bs-popover-body-color: var(--tt-text-muted);
  --bs-popover-font-size: .82rem;
  font-family: var(--tt-font-family);
}

.popover.tt-popover-justify .popover-body {
  text-align: justify;
}

.tt-toast-container {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  width: min(24rem, calc(100vw - 2rem));
}

.toast.tt-toast {
  --tt-toast-color: var(--tt-blue);
  --tt-toast-bg: var(--tt-blue-soft);
  --tt-toast-border: var(--tt-blue-border);
  border: 1px solid var(--tt-toast-border);
  border-radius: .75rem;
  background: #fff;
  box-shadow: var(--tt-shadow);
  overflow: hidden;
}

.tt-toast .toast-header {
  gap: .45rem;
  color: var(--tt-toast-color);
  background: var(--tt-toast-bg);
  border-bottom: 1px solid var(--tt-toast-border);
  font-weight: 800;
}

.tt-toast .toast-body {
  color: var(--tt-text);
  font-size: .86rem;
}

.tt-toast.tt-toast-success {
  --tt-toast-color: var(--tt-green);
  --tt-toast-bg: var(--tt-green-soft);
  --tt-toast-border: var(--tt-green-border);
}

.tt-toast.tt-toast-error {
  --tt-toast-color: var(--tt-red);
  --tt-toast-bg: var(--tt-red-soft);
  --tt-toast-border: var(--tt-red-border);
}

.tt-toast.tt-toast-warning {
  --tt-toast-color: var(--tt-orange);
  --tt-toast-bg: var(--tt-orange-soft);
  --tt-toast-border: var(--tt-orange-border);
}

.tt-toast.tt-toast-info {
  --tt-toast-color: var(--tt-blue);
  --tt-toast-bg: var(--tt-blue-soft);
  --tt-toast-border: var(--tt-blue-border);
}

.tt-toast-progress {
  height: .18rem;
  width: 100%;
  background: var(--tt-toast-color);
  transform-origin: left center;
  animation-name: ttToastCountdown;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes ttToastCountdown {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

@media (max-width: 768px) {
  .tt-page {
    padding: .8rem;
  }

  .tt-file-row {
    grid-template-columns: 1fr;
  }

  .tt-grid-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .tt-grid-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/*
 * Layout padrao das aplicacoes TechTrust v8
 */

:root {
  /*
   * Tokens especificos do shell das aplicacoes.
   * Os temas de produto sobrescrevem principalmente estas variaveis.
   */
  --tt-primary: var(--tt-blue);
  --tt-primary-soft: var(--tt-blue-soft);
  --tt-primary-border: var(--tt-blue-border);
  --tt-app-header-bg: #eef6ff;
  --tt-app-header-border: #cfe0f7;
  --tt-app-header-text: #123a6f;
  --tt-app-title-icon-bg: #e2eeff;
  --tt-app-help-color: #a16207;
  --tt-app-help-bg: #fff8e7;
  --tt-app-help-border: #f3cf78;
  --tt-admin-color: #b77905;
  --tt-admin-bg: #fff7df;
  --tt-admin-border: #f2cf77;
  --tt-overlay-bg: rgba(15, 23, 42, .5);
}

.tt-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--tt-page-bg);
}

.tt-app-header {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  padding: .35rem 1rem;
  color: var(--tt-app-header-text);
  background: var(--tt-app-header-bg);
  border-bottom: 1px solid var(--tt-app-header-border);
}

.tt-app-header-start,
.tt-app-header-end,
.tt-app-identity,
.tt-user-strip {
  display: flex;
  align-items: center;
  min-width: 0;
}

.tt-app-header-start {
  gap: .65rem;
}

.tt-app-header-end {
  gap: .8rem;
  justify-content: flex-end;
}

.tt-app-identity {
  gap: .55rem;
}

.tt-app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.95rem;
  height: 1.95rem;
  border: 1px solid var(--tt-primary-border);
  border-radius: .55rem;
  color: var(--tt-primary);
  background: var(--tt-app-title-icon-bg);
}

.tt-app-icon i {
  font-size: 1.15rem;
  line-height: 1;
  stroke-width: 2.2;
}

.tt-app-title {
  margin: 0;
  color: var(--tt-app-header-text);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.tt-app-help-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 1.85rem;
  padding: .26rem .55rem;
  border: 1px solid var(--tt-app-help-border);
  border-radius: .45rem;
  color: var(--tt-app-help-color);
  background: var(--tt-app-help-bg);
  font-family: var(--tt-font-family);
  font-size: .83rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
}

.tt-app-help-btn:hover,
.tt-app-help-btn:focus-visible {
  color: #7c4a03;
  background: #fff2c7;
}

.tt-app-help-btn svg,
.tt-app-help-btn i {
  font-size: .95rem;
  width: .95rem;
  height: .95rem;
}

.tt-user-strip {
  gap: .65rem;
  justify-content: flex-end;
  color: var(--tt-text);
  font-size: .78rem;
  white-space: nowrap;
}

.tt-user-strip strong {
  color: #0f2747;
  font-size: .84rem;
  font-weight: 900;
  letter-spacing: .01em;
}

.tt-user-separator {
  width: 1px;
  height: 1rem;
  background: #aab8cc;
}

.tt-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-height: 1.7rem;
  padding: .22rem .52rem;
  border: 1px solid var(--tt-admin-border);
  border-radius: .45rem;
  color: var(--tt-admin-color);
  background: var(--tt-admin-bg);
  font-family: var(--tt-font-family);
  font-size: .83rem;
  font-weight: 700;
  line-height: 1.1;
}

.tt-admin-badge i {
  font-size: .9rem;
  line-height: 1;
}

.tt-app-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.95rem;
  height: 1.95rem;
  border: 1px solid #b9c7d8;
  border-radius: 999px;
  color: #526173;
  background: rgba(255, 255, 255, .55);
}

.tt-app-close:hover,
.tt-app-close:focus-visible {
  color: var(--tt-red);
  border-color: var(--tt-red-border);
  background: var(--tt-red-soft);
}

.tt-app-close i {
  font-size: 1rem;
  line-height: 1;
}

.tt-app-main {
  flex: 1 1 auto;
  padding: 1rem;
}

.tt-filter-panel {
  /*
   * Container padrao para filtros.
   * Mantem a tela operacional com uma unica superficie clara.
   */
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: .6rem;
  box-shadow: var(--tt-shadow-sm);
  overflow: hidden;
}

.tt-filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem .85rem;
  background: linear-gradient(180deg, #fbfdff, #f5f9ff);
  border-bottom: 1px solid var(--tt-border);
}

.tt-filter-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  color: var(--tt-primary);
  font-size: .94rem;
  font-weight: 600;
}

.tt-filter-title svg,
.tt-filter-title i {
  font-size: 1.12rem;
  width: 1.12rem;
  height: 1.12rem;
}

.tt-filter-panel-body {
  padding: .78rem .85rem .85rem;
}

/*
 * Override do layout de filtros.
 * Substitui o grid de 12 colunas (tt-field-span-1..12) por flexbox.
 * Cada tt-field-{xs|sm|md|lg|xl} passa a ter largura própria (baseada
 * nos mesmos tokens --tt-field-width-*) e o wrap é natural, sem precisar
 * calcular quantas colunas cada campo ocupa.
 */

.tt-filter-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: .4rem .9rem;
  margin-bottom: .85rem;
}

.tt-field {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* A largura agora fica no próprio campo, não mais em .tt-control dentro dele */
.tt-field-xs {
  width: var(--tt-field-width-xs);
}

.tt-field-sm {
  width: var(--tt-field-width-sm);
}

.tt-field-md {
  width: var(--tt-field-width-md);
}

.tt-field-lg {
  width: var(--tt-field-width-lg);
}

.tt-field-xl {
  width: var(--tt-field-width-xl);
}

/* .tt-control, .tt-label-row e .tt-input-group-line preenchem 100% do campo */
.tt-field-xs>.tt-control,
.tt-field-xs>.tt-label-row,
.tt-field-xs>.tt-input-group-line,
.tt-field-sm>.tt-control,
.tt-field-sm>.tt-label-row,
.tt-field-sm>.tt-input-group-line,
.tt-field-md>.tt-control,
.tt-field-md>.tt-label-row,
.tt-field-md>.tt-input-group-line,
.tt-field-lg>.tt-control,
.tt-field-lg>.tt-label-row,
.tt-field-lg>.tt-input-group-line,
.tt-field-xl>.tt-control,
.tt-field-xl>.tt-label-row,
.tt-field-xl>.tt-input-group-line {
  max-width: none;
  width: 100%;
}

/* Campo "solto" sem tamanho definido: cresce para ocupar o espaço restante */
.tt-field:not([class*="tt-field-"]) {
  flex: 1 1 12rem;
}

/* Empurra ações (ex.: botão Consultar) para a ponta direita sem precisar de div "espaço" */
.tt-filter-actions {
  margin-left: auto;
}

.tt-field>.tt-control.tt-control-date {
  width: 9rem;
  max-width: 100%;
}

/*
 * Reserva a mesma altura de cabeçalho (label / label-row) em todo campo
 * da linha, mesmo quando ele não tem label — assim o controle (input,
 * select, button) sempre começa na mesma posição vertical, independente
 * de o campo vizinho ter checkbox, label simples ou nenhum label.
 */
.tt-label-row-spacer {
  visibility: hidden;
}

.tt-span-negrito-1 {
  font-weight: 600;
}

.tt-span-negrito-2 {
  font-weight: 650;
}

.tt-span-negrito-3 {
  font-weight: 700;
}

@media (max-width: 768px) {
  .tt-label-row-spacer {
    display: none;
  }
}

/* Responsivo: abaixo de 768px, cada campo ocupa a linha inteira */
@media (max-width: 768px) {
  .tt-filter-grid {
    flex-direction: column;
    align-items: stretch;
  }

  .tt-field-xs,
  .tt-field-sm,
  .tt-field-md,
  .tt-field-lg,
  .tt-field-xl {
    width: 100%;
  }

  .tt-filter-actions {
    margin-left: 0;
  }
}

.tt-field-span-1 {
  grid-column: span 1;
}

.tt-field-span-2 {
  grid-column: span 2;
}

.tt-field-span-3 {
  grid-column: span 3;
}

.tt-field-span-4 {
  grid-column: span 4;
}

.tt-field-span-5 {
  grid-column: span 5;
}

.tt-field-span-6 {
  grid-column: span 6;
}

.tt-field-span-7 {
  grid-column: span 7;
}

.tt-field-span-8 {
  grid-column: span 8;
}

.tt-field-span-9 {
  grid-column: span 9;
}

.tt-field-span-10 {
  grid-column: span 10;
}

.tt-field-span-11 {
  grid-column: span 11;
}

.tt-field-span-12 {
  grid-column: span 12;
}

.tt-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  min-height: 1.15rem;
  flex-wrap: nowrap;
}

.tt-label-row .tt-check {
  flex: 0 0 auto;
  min-height: auto;
  white-space: nowrap;
}

.tt-label-row .tt-label {
  min-width: 0;
}

.tt-field>.tt-label {
  display: flex;
  width: fit-content;
}

.tt-field>.tt-label,
.tt-field>.tt-label-row .tt-label .tt-date-fieldset legend {
  line-height: 1.15;
}

.tt-inline-checks,
.tt-radio-line,
.tt-switch-line,
.tt-date-range-controls {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}

.tt-radio-line {
  min-height: var(--tt-control-height);
  align-items: center;
}

.tt-switch-line {
  min-height: 5px;
  align-items: center;
}

.tt-input-group-line {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: var(--tt-control-height);
}

.tt-input-group-line>.tt-control {
  height: var(--tt-control-height);
  min-height: var(--tt-control-height);
  max-height: var(--tt-control-height);
}

.tt-input-group-line>.tt-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.tt-input-group-line>.tt-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.tt-date-fieldset {
  /*
   * Agrupamento compacto para pares de datas.
   * A largura e controlada por variavel para evitar overflow dos inputs date.
   */
  box-sizing: border-box;
  min-width: var(--tt-date-fieldset-width);
  width: var(--tt-date-fieldset-width);
  max-width: none;
  margin: 0;
  padding: .34rem .55rem .48rem;
  border: 1px solid var(--tt-fieldset-border);
  border-radius: var(--tt-control-radius);
  background: var(--tt-fieldset-bg);
  min-height: 0;
}

.tt-date-fieldset legend {
  /*
   * A legenda tambem pode receber um checkbox auxiliar alinhado a direita,
   * como "Somente sem data".
   */
  float: none;
  width: calc(100% - .5rem);
  max-width: calc(100% - .5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 .25rem;
  padding: 0 .32rem;
  color: #243044;
  background: var(--tt-fieldset-bg);
  font-family: var(--tt-form-font-family);
  font-size: .78rem;
  font-weight: 800;
}

.tt-date-fieldset legend .tt-check {
  min-height: auto;
  font-weight: 400;
}

.tt-date-range-controls {
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  height: var(--tt-control-height);
}

.tt-date-range-controls .tt-control {
  min-width: 0;
  flex: 1 1 var(--tt-date-input-width);
  width: auto;
  height: var(--tt-control-height);
  min-height: var(--tt-control-height);
  max-height: var(--tt-control-height);
}

.tt-date-range-separator {
  color: var(--tt-text-muted);
  font-size: .8rem;
  font-weight: 800;
}

/* ANCHOR - Área dos botões */
.tt-filter-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 100%;
  margin-left: auto;
  padding-top: .15rem;
}

/* ANCHOR - Botões da área de ações */
.tt-filter-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
}

/* ANCHOR - Nossa formatação de bandeira para o flag-icons */
.tt-flag-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 0.85rem !important;
  height: 0.85rem !important;
  margin-right: 5px;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle;
  background-size: cover !important;
  background-position: center !important;
  font-size: 0;
  line-height: 0;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.tt-dialog-backdrop {
  /*
   * Backdrop padrao de dialogs.
   * A classe tt-open e aplicada por JS para exibir apenas um dialog por vez.
   */
  position: fixed;
  inset: 0;
  z-index: 1040;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--tt-overlay-bg);
  transition: background-color .4s;
}

.tt-dialog-backdrop.tt-open {
  display: flex;
}

.tt-dialog-backdrop.tt-dialog-backdrop-close {
  background-color: transparent;
}

.tt-dialog {
  /*
   * Dialog base.
   * Cada tipo define suas cores atraves de variaveis locais.
   */
  --tt-dialog-color: var(--tt-blue);
  --tt-dialog-soft: var(--tt-blue-soft);
  --tt-dialog-border: var(--tt-blue-border);
  /*
   * Altura maxima como % da tela (0-100), padronizada aqui para todos os
   * dialogs. Sobrescreva por instancia via JS (option `maxHeight` do
   * dialog.js) quando um dialog especifico precisar de mais ou menos altura.
   * O dialog cresce dinamicamente com o conteudo ate esse limite; passado
   * ele, a rolagem interna do .tt-dialog-body assume.
   */
  --tt-dialog-min-h: 0;
  --tt-dialog-max-h: 80;
  --tt-dialog-max-w: 42;
  --dialog-max-height: min(calc(var(--tt-dialog-max-h) * 1vh), calc(100vh - 2.75rem - 2rem));

  width: min(calc(var(--tt-dialog-max-w) * 1rem), calc(100vw - 2rem));
  max-height: var(--dialog-max-height);
  min-height: min(calc(var(--tt-dialog-min-h) * 1vh), var(--dialog-max-height));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--tt-dialog-border);
  border-radius: .7rem;
  box-shadow: var(--tt-shadow);
  overflow: hidden;
}

.tt-dialog-lg {
  --tt-dialog-max-w: 72;
}

.tt-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.05rem;
  padding: .4rem .65rem;
  border-bottom: 1px solid var(--tt-dialog-border);
  background: var(--tt-dialog-soft);
}

.tt-dialog-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  color: var(--tt-dialog-color);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.15;
}

.tt-dialog-title svg,
.tt-dialog-title i {
  font-size: .95rem;
  font-weight: 400;
}

.tt-dialog-subtitle {
  display: block;
  margin-top: .15rem;
  color: var(--tt-text-muted);
  font-size: .82rem;
  font-weight: 700;
}

.tt-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 0;
  border-radius: .45rem;
  color: var(--tt-text-muted);
  background: transparent;
}

.tt-dialog-close:hover,
.tt-dialog-close:focus-visible {
  color: var(--tt-red);
  background: var(--tt-red-soft);
}

/* ANCHOR - Área principal de conteúdo da dialog */
.tt-dialog>.tt-dialog-body {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem;
  overflow: hidden;
}

/* ANCHOR - Container do conteúdo da dialog */
.tt-dialog-content {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ANCHOR - Container interno do conteúdo */
.tt-dialog-content-inner {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  transition: height .28s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .tt-dialog-content-inner {
    transition: none;
  }
}

/* ANCHOR - Conteúdos estruturados de consulta */
.tt-dialog-content-inner:has(> .tt-dialog-body) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/*SECTION - Animações de abertura e fechamento da dialog */
.tt-dialog.tt-dialog-open-scale {
  animation: ttDialogOpenScale .4s cubic-bezier(.34, 1.56, .64, 1) both;
}

.tt-dialog.tt-dialog-close-scale {
  animation: ttDialogCloseScale .4s cubic-bezier(.36, .55, .19, 1) both;
}

@keyframes ttDialogOpenScale {
  from {
    opacity: 0;
    transform: scale(.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ttDialogCloseScale {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(.5);
  }
}

/* !SECTION */

/* SECTION - Animação de "tremida" ao clicar fora da dialog */
.tt-dialog.tt-dialog-shake {
  animation: ttDialogShake .82s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes ttDialogShake {


  10%,
  90% {
    transform: translate3d(-2px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(4px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-8px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(8px, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {

  .tt-dialog.tt-dialog-open-scale,
  .tt-dialog.tt-dialog-close-scale,
  .tt-dialog.tt-dialog-shake {
    animation: none;
  }
}

.tt-dialog-result {
  --tt-dialog-color: var(--tt-blue);
  --tt-dialog-soft: color-mix(in srgb, var(--tt-blue) 8%, white);
  --tt-dialog-border: var(--tt-blue-border);
}

.tt-dialog-form {
  --tt-dialog-color: var(--tt-green);
  --tt-dialog-soft: color-mix(in srgb, var(--tt-green) 8%, white);
  --tt-dialog-border: var(--tt-green-border);
}

.tt-dialog-alert {
  --tt-dialog-color: var(--tt-red);
  --tt-dialog-soft: color-mix(in srgb, var(--tt-red) 8%, white);
  --tt-dialog-border: var(--tt-red-border);
}

.tt-dialog-iframe {
  --tt-dialog-color: var(--tt-blue);
  --tt-dialog-soft: var(--tt-blue-soft);
  --tt-dialog-border: var(--tt-blue-border);
  --tt-dialog-max-h: 100;
}

.tt-dialog-iframe .tt-dialog-body {
  padding: 0;
}

/* SECTION - Conteúdo de avisos para ações restritas */
.tt-acao-restrita p {
  margin: 0;
}

.tt-acao-restrita-usuarios {
  margin: 1rem 0;
  padding-left: 1.5rem;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.45;
  list-style-position: outside;
}

.tt-acao-restrita-usuarios li+li {
  margin-top: .15rem;
}


/* !SECTION */

.tt-dialog-body.is-processing {
  /*
   * Enquanto processa: garante area para o spinner mesmo com o conteudo
   * curto, e trava a rolagem para o overlay nao deslizar junto.
   */
  min-height: 7rem;
  overflow: hidden;
}

.tt-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--tt-border-soft);
  background: #fbfdff;
}

.tt-processing-overlay {
  /*
   * Processamento sobreposto ao conteudo do dialog.
   * O HTML de baixo continua no DOM, apenas invisivel, entao o dialog
   * mantem o tamanho e nada do que ja foi populado se perde.
   */
  position: absolute;
  inset: 0;
  z-index: 2;
  justify-content: center;
  padding: .85rem;
  background: #fff;
}

.tt-empty-dialog-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
}

.tt-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  color: #fff;
  background: var(--tt-dialog-color);
}

.tt-empty-icon i {
  font-size: 1.35rem;
}

.tt-dialog-toolbar {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: center;
}

.tt-dialog-toolbar-title {
  color: var(--tt-text);
  font-size: .9rem;
  font-weight: 600;
}

.tt-dialog-toolbar-title strong+span {
  font-weight: 400;
}

.tt-dialog-toolbar-actions {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ANCHOR - Área rolável dos grids dentro da dialog */
.tt-grid-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}

/* ANCHOR - Corpo interno da consulta */
.tt-dialog-content-inner>.tt-dialog-body {
  min-height: 0;

  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);

  overflow: hidden;
}

/* ANCHOR - Corpo rolável das dialogs de formulário */
.tt-dialog-form .tt-dialog-content-inner>.tt-dialog-body {
  min-height: 0;
  flex: 1 1 auto;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ANCHOR - Filtros */
.tt-dialog-content-inner>.tt-dialog-body>.tt-filter-collapse {
  min-height: 0;
}

/* ANCHOR - Resumo e ações */
.tt-dialog-content-inner>.tt-dialog-body>.tt-dialog-toolbar {
  min-height: 0;
}

/* ANCHOR - Apenas a tabela possui scroll */
.tt-dialog-content-inner>.tt-dialog-body>.tt-grid-scroll {
  min-height: 0;
  min-width: 0;

  overflow: auto;
}

.tt-processing {
  /*
   * Estado de processamento usado antes de abrir resultado/alerta.
   */
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 5rem;
}

.invalid-feedback {
  display: inline-flex;
  align-items: center;
  gap: .08rem;
  margin-bottom: .25rem;
  font-family: var(--tt-form-font-family);
  font-size: .7rem;
  font-weight: 550;
  line-height: 1.2;
}

.tt-spinner {
  width: 2.35rem;
  height: 2.35rem;
  border: .22rem solid var(--tt-dialog-border);
  border-top-color: var(--tt-dialog-color);
  border-radius: 999px;
  animation: ttSpin .8s linear infinite;
}

.tt-page-spinner-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tt-page-bg) 85%, transparent);
  opacity: 1;
  transition: opacity .2s ease;

  --tt-dialog-color: var(--tt-primary);
  --tt-dialog-border: var(--tt-primary-border);
}

.tt-page-spinner-overlay.tt-spinner-hidden {
  opacity: 0;
  pointer-events: none;
}

.tt-processing-title {
  margin: 0;
  color: var(--tt-text);
  font-size: .95rem;
  font-weight: 900;
}

.tt-processing-text {
  margin: .18rem 0 0;
  color: var(--tt-text-muted);
  font-size: .82rem;
}

/* ANCHOR - Centraliza o texto interno do selectpicker */
.bootstrap-select .filter-option-inner {
  display: flex;
  align-items: center;
  height: 100%;
}


/** SECTION - Typeahead */

.tt-typeahead {
  position: relative;
}

.tt-typeahead-spinner {
  position: absolute;
  top: calc(var(--tt-control-height) / 2);
  right: .45rem;
  transform: translateY(-50%);
  line-height: 0;
  pointer-events: none;
}

.tt-typeahead-spinner .spinner-border {
  width: .9rem;
  height: .9rem;
  border-width: .14em;
  color: var(--tt-text-soft);
}

.tt-typeahead>.form-control.tt-control {
  padding-right: 2.5rem;
}

.tt-typeahead>.tt-action-excluir {
  position: absolute;
  top: 50%;
  right: .75rem;
  z-index: 2;
  transform: translateY(-50%);
  cursor: pointer;
}

.tt-typeahead-input-container {
  position: relative;
}

.tt-typeahead-input-container>.tt-action-excluir {
  position: absolute;
  top: 50%;
  right: .65rem;
  z-index: 2;
  transform: translateY(-50%);
  cursor: pointer;
}

.tt-typeahead-input-container>.form-control {
  padding-right: 2.5rem;
}

.tt-typeahead-input-container>.tt-action-excluir:hover,
.tt-typeahead-input-container>.tt-action-excluir:focus-visible {
  border-color: transparent;
  background: transparent;
}

.tt-typeahead-input-container>.tt-action-excluir:hover {
  opacity: .65;
}

/** ANCHOR - Typeahead flutuante
/* Ajustes específicos do typeahead de Procedimento TUSS */
.tt-typeahead-menu.tt-typeahead-flutuante {
  z-index: 1070;
  width: var(--tt-field-width-xl);
  max-width: calc(100vw - 2rem);
  max-height: 13rem;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Permite que descrições TUSS grandes quebrem linha */
.tt-typeahead-menu.tt-typeahead-flutuante .dropdown-item {
  width: 100%;
  white-space: normal;
}

/* O conteúdo do resultado usa flex */
.tt-typeahead-menu.tt-typeahead-flutuante .dropdown-item small {
  min-width: 0;
  width: 100%;
}

/* Código TUSS permanece inteiro */
.tt-typeahead-menu.tt-typeahead-flutuante .dropdown-item small>strong {
  flex: 0 0 auto;
}

/* Descrição ocupa o restante e quebra linha */
.tt-typeahead-menu.tt-typeahead-flutuante .dropdown-item small>span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/** !SECTION */


/** SECTION - Área de fieldset colapsável */

/* ANCHOR - Fieldset colapsável de filtros */
.tt-filter-collapse {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: .375rem;
  padding: 0;
  margin: 0 0 0.5rem 0;
  overflow: hidden;
  width: 100%;
  max-width: 200px;
  transition: max-width .4s cubic-bezier(.4, 0, .2, 1);
}

.tt-filter-collapse.is-open {
  border: 1px solid #dee2e6;
  max-width: 100%;
}

.tt-filter-collapse-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
  margin: 0;
  order: 1;
  float: none;
  width: auto;
}

/* ANCHOR - Remove a caixa própria do botão */
.tt-filter-collapse-label.tt-btn {
  --tt-btn-color: var(--tt-blue);
  --tt-btn-bg: color-mix(in srgb, var(--tt-blue) 7%, white);
  --tt-btn-border: var(--tt-blue-border);

  padding: .5rem .75rem;
  min-height: auto;
  white-space: nowrap;
}

/* ANCHOR - Botão sem fundo/borda quando aberto */
.tt-filter-collapse.is-open .tt-filter-collapse-label.tt-btn {
  --tt-btn-bg: transparent;
  --tt-btn-border: transparent;

  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Botão "Remover filtros", canto superior direito */
.tt-filter-collapse-clear {
  position: absolute;
  top: .5rem;
  right: .75rem;
  padding: .125rem .375rem;
  display: none;
  order: 2;
}

.tt-filter-collapse.is-open .tt-filter-collapse-clear {
  display: inline-block;
}

/* ANCHOR - Corpo colapsável */
.tt-filter-collapse-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1);
  order: 3;
  min-height: 0;
  min-width: 0;
}

.tt-filter-collapse.is-open .tt-filter-collapse-body {
  grid-template-rows: 1fr;
}

.tt-filter-collapse-body>.tt-filter-grid {
  overflow: hidden;
  padding: 0 .75rem;
  min-height: 0;
  min-width: 0;
  white-space: nowrap;
}

.tt-filter-collapse.is-open .tt-filter-collapse-body>.tt-filter-grid {
  padding: .25rem .75rem .75rem .75rem;
  white-space: normal;
}

/* ANCHOR - Seta do filtro */
.tt-filter-collapse-arrow {
  display: inline-flex;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.tt-filter-collapse.is-open .tt-filter-collapse-arrow {
  transform: rotate(180deg);
}

.tt-btn-clear-collapse {
  width: auto;
  min-width: 120px;
  padding-left: 14px;
  padding-right: 14px;
}

/** !SECTION */

/** ANCHOR - Estado visual dos componentes TechTrust desabilitados */

/* Inputs, selects nativos, textareas e botões TechTrust */
.tt-control:disabled,
.tt-btn:disabled,
.tt-label-help:disabled,
.tt-password-toggle:disabled,
.tt-app-close:disabled,
.bootstrap-select.disabled>.dropdown-toggle.tt-control {
  color: var(--tt-text-soft);
  background-color: #eef2f7;
  border-color: var(--tt-border);
  box-shadow: none;
  opacity: .72;
  filter: grayscale(15%);
  cursor: not-allowed;
}


/* Mantém a aparência do tt-control no hover do bootstrap-select */
.bootstrap-select>.dropdown-toggle.tt-control {
  --bs-btn-hover-color: var(--tt-text);
  --bs-btn-hover-bg: var(--tt-surface);
  --bs-btn-hover-border-color: #cbd5e1;
}

/*
 * O bootstrap-select adiciona .disabled tanto no wrapper quanto no botão.
 * Impede que a opacidade seja aplicada duas vezes.
 */
.bootstrap-select.disabled {
  opacity: 1;
  filter: none;
  pointer-events: auto;
  cursor: not-allowed;
}

.bootstrap-select.disabled>.dropdown-toggle.disabled {
  pointer-events: none;
}

/* Checkbox, radio e switch */
.tt-check .form-check-input:disabled,
.tt-switch-line .form-check-input:disabled {
  opacity: .55;
  filter: grayscale(45%);
  cursor: not-allowed;
}

/** !SECTION */

@keyframes ttSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1100px) {

  .tt-field-span-1,
  .tt-field-span-2,
  .tt-field-span-3,
  .tt-field-span-4,
  .tt-field-span-5,
  .tt-field-span-6 {
    grid-column: span 6;
  }

  .tt-field-span-7,
  .tt-field-span-8,
  .tt-field-span-9,
  .tt-field-span-10,
  .tt-field-span-11,
  .tt-field-span-12 {
    grid-column: span 12;
  }

  .tt-app-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .tt-app-header-end {
    width: 100%;
    justify-content: space-between;
  }

  .tt-user-strip {
    flex-wrap: wrap;
    justify-content: flex-start;
    white-space: normal;
  }
}

@media (max-width: 768px) {
  .tt-app-main {
    padding: .75rem;
  }

  .tt-filter-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .tt-filter-grid,
  .tt-field-span-1,
  .tt-field-span-2,
  .tt-field-span-3,
  .tt-field-span-4,
  .tt-field-span-5,
  .tt-field-span-6,
  .tt-field-span-7,
  .tt-field-span-8,
  .tt-field-span-9,
  .tt-field-span-10,
  .tt-field-span-11,
  .tt-field-span-12 {
    grid-column: span 12;
  }

  .tt-filter-grid {
    grid-template-columns: 1fr;
  }

  .tt-input-group-line,
  .tt-date-range-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .tt-country-select {
    flex-basis: auto;
  }
}

/*SECTION - Botão de limpar campo (lib/limparCampo.js) */
.tt-campo-limpavel {
  position: relative;
  display: block;
}

/* Abre espaço para o texto digitado não passar por baixo do lixinho. */
.tt-campo-limpavel>.tt-limpavel {
  padding-right: 2.3rem;
}

/* Reserva espaço para o feedback de erro antes do botão de limpar. */
.tt-campo-limpavel>.tt-limpavel.is-invalid {
  padding-right: 4.1rem;
  background-position: right 2.4rem center;
}

/* Mantém o feedback no topo quando o campo limpável for um textarea. */
.tt-campo-limpavel>textarea.tt-limpavel.is-invalid {
  background-position: top calc(.375em + .1875rem) right 2.4rem;
}

.tt-campo-limpavel>.tt-btn-limpar-campo {
  position: absolute;
  top: 50%;
  right: .3rem;
  transform: translateY(-50%);
  cursor: pointer;
}

.tt-campo-limpavel>.tt-btn-limpar-campo:hover,
.tt-campo-limpavel>.tt-btn-limpar-campo:focus-visible {
  border-color: transparent;
  background: transparent;
}

.tt-campo-limpavel>.tt-btn-limpar-campo:hover {
  opacity: .65;
}

.tt-campo-limpavel>.tt-limpavel:disabled~.tt-btn-limpar-campo,
.tt-campo-limpavel>.tt-limpavel:read-only~.tt-btn-limpar-campo {
  display: none;
}

.tt-campo-limpavel>textarea.tt-limpavel~.tt-btn-limpar-campo {
  top: .3rem;
  transform: none;
}

/*!SECTION */

/*SECTION Estilização para o fieldset dos dialogs de cadastro */
.tt-form-fieldset {
  min-width: 0;
  margin: 0;
  padding: .8rem 1rem 1rem;
  border: 1px solid var(--tt-fieldset-border);
  border-radius: .65rem;
  background-color: var(--tt-surface);
}

.tt-form-fieldset>legend {
  float: none;
  width: auto;
  margin: 0 0 .65rem;
  padding: 0 .35rem;
  color: var(--tt-blue);
  font-family: var(--tt-form-font-family);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.2;
}

/* SECTION Indicador de conteúdo / notificação (bolinha) */
[tt-notificacao] {
  position: relative;
  --tt-notificacao-cor: var(--tt-red);
}

[tt-notificacao]::after {
  content: attr(tt-notificacao);
  position: absolute;
  left: 100%;
  top: 0;
  transform: translate(-50%, -50%);
  display: inline-block;
  padding: .25em .55em;
  border-radius: 50rem;
  background-color: var(--tt-notificacao-cor);
  color: #fff;
  font-family: var(--tt-font-family);
  font-size: .65em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  pointer-events: none;
}

[tt-notificacao=" "]::after {
  aspect-ratio: 1 / 1;
}

[tt-notificacao][tt-notificacao-green]::after {
  --tt-notificacao-cor: var(--tt-green);
}

[tt-notificacao][tt-notificacao-blue]::after {
  --tt-notificacao-cor: var(--tt-blue);
}

[tt-notificacao][tt-notificacao-orange]::after {
  --tt-notificacao-cor: var(--tt-orange);
}

[tt-notificacao][tt-notificacao-purple]::after {
  --tt-notificacao-cor: var(--tt-purple);
}

[tt-notificacao][tt-notificacao-info]::after {
  --tt-notificacao-cor: var(--tt-info);
}

[tt-notificacao][tt-notificacao-bottom-center]::after {
  left: 50%;
  top: 100%;
}

[tt-notificacao]:disabled::after,
[tt-notificacao].alwaysDisabled::after {
  opacity: .5;
}

/*!SECTION */