/*
 * 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, 0.22);
    --tt-radius-sm: 0.375rem;
    --tt-radius: 0.625rem;
    --tt-radius-lg: 0.875rem;
    --tt-shadow-sm: 0 3px 10px rgba(15, 23, 42, 0.06);
    --tt-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
    --tt-control-height: 1.95rem;
    --tt-control-height-sm: 1.7rem;
    --tt-control-padding-y: 0.22rem;
    --tt-control-padding-x: 0.5rem;
    --tt-control-font-size: 0.8rem;
    --tt-control-radius: 0.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: 0.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: 0.6;
    filter: saturate(0.7);
    pointer-events: none;
    transition:
        opacity 0.15s ease,
        filter 0.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: 0.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: 0.75rem;
    color: var(--tt-blue);
    background: var(--tt-blue-soft);
}

.tt-window-subtitle {
    margin: 0.25rem 0 0 2.8rem;
    color: var(--tt-text-muted);
    font-size: 0.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: 0.08rem;
    margin-bottom: 0.25rem;
    color: #243044;
    font-family: var(--tt-form-font-family);
    font-size: 0.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: 0.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: 0.95rem;
    height: 0.95rem;
}

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

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

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

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

/* Contador de caracteres. */
.tt-field-counter,
.tt-contador {
    display: block;
    width: 100%;
    margin-top: 0.18rem;
    text-align: right;
    color: var(--tt-text-soft);
    font-family: var(--tt-form-font-family);
    font-size: 0.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 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: 0.8rem;
}

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

.tt-input-icon > i,
.tt-input-icon > svg {
    position: absolute;
    left: 0.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: 0.35rem;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 0;
    border-radius: 0.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(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

input[type='date'].tt-control.is-invalid::-webkit-calendar-picker-indicator {
    transform: translateX(-0.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: 0.3rem;
    color: var(--tt-red);
    font-size: 0.76rem;
    font-weight: 600;
}

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

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

/**
 * ANCHOR - Checkboxes e radios compactos
 */
.form-check.tt-check {
    min-height: var(--tt-control-height);
    display: inline-flex;
    align-items: center;
    gap: 0.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 0.18rem var(--tt-focus);
}

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

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

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

/**
 * 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 0.18rem var(--tt-focus);
}

.tt-switch-line .form-check-input:checked:focus {
    box-shadow: 0 0 0 0.25rem rgba(220, 38, 38, 0.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: 0.45rem;
    min-height: var(--tt-control-height);
    padding: 0.34rem 0.76rem;
    border: 1px solid var(--tt-btn-border);
    border-radius: 0.5rem;
    color: var(--tt-btn-color);
    background: var(--tt-btn-bg);
    font-family: var(--tt-font-family);
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.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: 0.32rem 0.6rem;
    font-size: 0.8rem;
}

.tt-btn-blue,
.tt-btn-pesquisar,
.tt-btn-filtro,
.tt-btn-editar,
.tt-btn-atualizar,
.tt-btn-continuar,
.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-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-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: 0.45rem;
    height: 0.45rem;
    margin-left: 0.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: 0.65rem;
    box-shadow: var(--tt-shadow);
    padding: 0.35rem;
    font-size: 0.86rem;
}

.tt-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    border-radius: 0.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: 0.5rem;
    align-items: end;
}

.tt-file-actions {
    display: inline-flex;
    gap: 0.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: 0.32rem;
    padding: 0 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: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.tt-file-picker-btn i {
    font-size: 0.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 0.55rem;
    color: var(--tt-text-soft);
    font-family: var(--tt-form-font-family);
    font-size: 0.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: 0.85rem;
}

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

.tt-file-picker-clear:disabled {
    color: var(--tt-text-soft);
    opacity: 0.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: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--tt-border-soft);
    background: linear-gradient(180deg, #fff, #fbfdff);
}

.tt-grid-toolbar-actions {
    display: flex;
    gap: 0.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: 0.84rem;
}

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

.tt-data-grid tbody td {
    padding: 0.68rem 0.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: 0.15rem;
    color: var(--tt-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.1;
}

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

.tt-icon-masculino,
.tt-icon-eventos-avulsos {
    color: var(--tt-blue);
}

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

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

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

.tt-grid-actions {
    display: flex;
    gap: 0.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: 0.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-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: 0.25rem;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    font-size: 0.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: 0.75rem;
    padding: 0.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: 0.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: 0.15rem;
    color: var(--tt-text-muted);
    font-size: 0.78rem;
    font-weight: 400;
}

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

.tt-detail-accordion-total {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0.22rem 0.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: 0.78rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.tt-detail-accordion .accordion-body {
    padding: 0.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: 0.9rem;
    min-width: 0;
}

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

.tt-marcacoes-sidebar {
    min-width: 0;
    padding: 0.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: 0.45rem 0;
    border-top: 1px solid var(--tt-border-soft);
}

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

.tt-marcacoes-grupo-cabecalho {
    gap: 0.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: 0.35rem;
    margin: 0.45rem 0 0;
    padding: 0;
    list-style: none;
}

.tt-marcacoes-item {
    justify-content: space-between;
    gap: 0.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: 0.5rem;

    margin-top: 0.5rem;
    padding: 0.65rem 0.75rem;

    color: var(--tt-orange);
    background: var(--tt-orange-soft);
    border: 1px solid var(--tt-orange-border);
    border-radius: 0.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: 0.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: 0.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: 0.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: 0.75rem;
    background: #fff;
    box-shadow: var(--tt-shadow);
    overflow: hidden;
}

.tt-toast .toast-header {
    gap: 0.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: 0.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: 0.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: 0.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, 0.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: 0.9rem;
    padding: 0.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: 0.65rem;
}

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

.tt-app-identity {
    gap: 0.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: 0.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: 0.35rem;
    min-height: 1.85rem;
    padding: 0.26rem 0.55rem;
    border: 1px solid var(--tt-app-help-border);
    border-radius: 0.45rem;
    color: var(--tt-app-help-color);
    background: var(--tt-app-help-bg);
    font-family: var(--tt-font-family);
    font-size: 0.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: 0.95rem;
    width: 0.95rem;
    height: 0.95rem;
}

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

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

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

.tt-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 1.7rem;
    padding: 0.22rem 0.52rem;
    border: 1px solid var(--tt-admin-border);
    border-radius: 0.45rem;
    color: var(--tt-admin-color);
    background: var(--tt-admin-bg);
    font-family: var(--tt-font-family);
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.1;
}

.tt-admin-badge i {
    font-size: 0.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, 0.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: 0.6rem;
    box-shadow: var(--tt-shadow-sm);
    overflow: hidden;
}

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

.tt-filter-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--tt-primary);
    font-size: 0.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: 0.78rem 0.85rem 0.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: 0.4rem 0.9rem;
    margin-bottom: 0.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;
}

/*
 * 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: 0.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: 0.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: 0.34rem 0.55rem 0.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% - 0.5rem);
    max-width: calc(100% - 0.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.25rem;
    padding: 0 0.32rem;
    color: #243044;
    background: var(--tt-fieldset-bg);
    font-family: var(--tt-form-font-family);
    font-size: 0.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: 0.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: 0.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: 0.5rem;
}

.tt-country-picker {
    /*
   * Select customizado para pais/DDI.
   * Fechado mostra bandeira + DDI; aberto mostra bandeira + DDI + nome.
   */
    position: relative;
    flex: 0 0 7.8rem;
}

.tt-country-picker-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    text-align: left;
}

.tt-country-selected {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.tt-country-caret {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.46rem;
    height: 0.46rem;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
    margin-left: auto;
    transform: rotate(45deg) translateY(-2px);
}

.tt-country-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 1060;
    display: none;
    min-width: 16rem;
    max-height: 15rem;
    overflow: auto;
    padding: 0.25rem;
    border: 1px solid var(--tt-border);
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: var(--tt-shadow);
}

.tt-country-picker.tt-open .tt-country-menu {
    display: block;
}

.tt-country-option {
    display: grid;
    grid-template-columns: 1.6rem 4rem minmax(0, 1fr);
    gap: 0.35rem;
    align-items: center;
    width: 100%;
    min-height: 1.85rem;
    padding: 0.28rem 0.4rem;
    border: 0;
    border-radius: 0.35rem;
    color: var(--tt-text);
    background: transparent;
    font-family: var(--tt-form-font-family);
    font-size: 0.8rem;
    text-align: left;
}

.tt-country-option:hover,
.tt-country-option:focus-visible {
    color: var(--tt-primary);
    background: var(--tt-primary-soft);
}

.tt-country-flag {
    position: relative;
    display: inline-block;
    width: 1.15rem;
    height: 0.78rem;
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 0.12rem;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

.tt-flag-br {
    background: #169b62;
}

.tt-flag-br::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.72rem;
    height: 0.5rem;
    background: #f7d116;
    transform: translate(-50%, -50%) rotate(45deg);
}

.tt-flag-br::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 999px;
    background: #2246a3;
    transform: translate(-50%, -50%);
}

.tt-flag-ar {
    background: linear-gradient(
        to bottom,
        #75aadb 0 33%,
        #fff 33% 66%,
        #75aadb 66%
    );
}

.tt-flag-us {
    background: repeating-linear-gradient(
        to bottom,
        #b22234 0 0.08rem,
        #fff 0.08rem 0.16rem
    );
}

.tt-flag-us::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0.48rem;
    height: 0.42rem;
    background: #3c3b6e;
}

.tt-flag-pt {
    background: linear-gradient(to right, #046a38 0 42%, #da291c 42%);
}

.tt-flag-uy {
    background: repeating-linear-gradient(
        to bottom,
        #fff 0 0.09rem,
        #75aadb 0.09rem 0.18rem
    );
}

.tt-flag-uy::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0.42rem;
    height: 0.36rem;
    background: #fff7c2;
}

.tt-country-ddi {
    color: var(--tt-text);
    font-weight: 800;
}

.tt-country-name {
    color: var(--tt-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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 0.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: 0.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: 0.4rem 0.65rem;
    border-bottom: 1px solid var(--tt-dialog-border);
    background: var(--tt-dialog-soft);
}

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

.tt-dialog-title svg,
.tt-dialog-title i {
    font-size: 0.95rem;
}

.tt-dialog-subtitle {
    display: block;
    margin-top: 0.15rem;
    color: var(--tt-text-muted);
    font-size: 0.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: 0.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;
}

/* 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 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.tt-dialog.tt-dialog-close-scale {
    animation: ttDialogCloseScale 0.4s cubic-bezier(0.36, 0.55, 0.19, 1) both;
}

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

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

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

    to {
        opacity: 0;
        transform: scale(0.5);
    }
}
/* !SECTION */

/* SECTION - Animação de "tremida" ao clicar fora da dialog */
.tt-dialog.tt-dialog-shake {
    animation: ttDialogShake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.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;
}

.tt-dialog-iframe .tt-dialog-content-inner {
    display: flex;
}

/* 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: 0.8rem;
    font-weight: 700;
    line-height: 1.45;
    list-style-position: outside;
}

.tt-acao-restrita-usuarios li + li {
    margin-top: 0.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: 0.55rem;
    padding: 0.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: 0.85rem;
    background: #fff;
}

.tt-empty-dialog-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.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: 0.75rem;
    align-items: center;
}

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

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

.tt-dialog-toolbar-actions {
    display: flex;
    gap: 0.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: 0.9rem;
    min-height: 5rem;
}

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

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

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

.tt-processing-text {
    margin: 0.18rem 0 0;
    color: var(--tt-text-muted);
    font-size: 0.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: 0.45rem;
    transform: translateY(-50%);
    line-height: 0;
    pointer-events: none;
}

.tt-typeahead-spinner .spinner-border {
    width: 0.9rem;
    height: 0.9rem;
    border-width: 0.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: 0.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: 0.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: 0.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: 0.375rem;
    padding: 0;
    margin: 0 0 0.5rem 0;
    overflow: hidden;
    width: 100%;
    max-width: 200px;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 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: 0.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: 0.5rem 0.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: 0.5rem;
    right: 0.75rem;
    padding: 0.125rem 0.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 0.4s cubic-bezier(0.4, 0, 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 0.75rem;
    min-height: 0;
    min-width: 0;
    white-space: nowrap;
}

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

/* ANCHOR - Seta do filtro */
.tt-filter-collapse-arrow {
    display: inline-flex;
    transition: transform 0.4s cubic-bezier(0.4, 0, 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: 0.72;
    filter: grayscale(15%);
    cursor: not-allowed;
}

/* Mantém a aparência do tt-control nos estados 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;
    --bs-btn-active-color: var(--tt-text);
    --bs-btn-active-bg: var(--tt-surface);
    --bs-btn-active-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: 0.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: 0.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(0.375em + 0.1875rem) right 2.4rem;
}

.tt-campo-limpavel > .tt-btn-limpar-campo {
    position: absolute;
    top: 50%;
    right: 0.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: 0.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: 0.3rem;
    transform: none;
}

/*!SECTION */

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

.tt-form-fieldset > legend {
    float: none;
    width: auto;
    margin: 0 0 0.65rem;
    padding: 0 0.35rem;
    color: var(--tt-blue);
    font-family: var(--tt-form-font-family);
    font-size: 0.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: 0.25em 0.55em;
    border-radius: 50rem;
    background-color: var(--tt-notificacao-cor);
    color: #fff;
    font-family: var(--tt-font-family);
    font-size: 0.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: 0.5;
}

/*!SECTION */

/* ANCHOR - AGENDAMENTO.DIGITAL — identidade visual do cliente */

:root {
    --ad-btn-fundo: var(--tt-blue);
    --ad-btn-texto: #ffffff;
    --ad-fundo: none;
    --tt-card-glass-alpha: 0.3;
    --tt-card-shadow-alpha: 0.15;
    --ad-loading-fundo: rgba(0, 0, 0, 0.68);
}

body.tt-ad {
    min-height: 100vh;
    background-color: var(--tt-page-bg);
    background-image: var(--ad-fundo);
    background-attachment: fixed;
}

.tt-btn-cliente {
    --tt-btn-color: var(--ad-btn-texto);
    --tt-btn-bg: var(--ad-btn-fundo);
    --tt-btn-border: var(--ad-btn-fundo);
}

.tt-btn-cliente:disabled {
    color: var(--ad-btn-texto);
    background-color: var(--ad-btn-fundo);
    border-color: var(--ad-btn-fundo);
    opacity: 0.55;
}

.tt-btn-cliente:hover,
.tt-btn-cliente:focus-visible {
    color: var(--ad-btn-texto);
    background: color-mix(in srgb, var(--ad-btn-fundo) 86%, #000);
    border-color: color-mix(in srgb, var(--ad-btn-fundo) 86%, #000);
}

.tt-card-glass {
    background: rgba(255, 255, 255, var(--tt-card-glass-alpha));
    border-color: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 0.75rem 2rem 0.125rem
        rgba(15, 23, 42, var(--tt-card-shadow-alpha));
}

.tt-page-loading {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--ad-loading-fundo);
}

.tt-page-loading.tt-open {
    display: flex;
}

.tt-page-loading-content {
    min-width: 9rem;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    border: 0;
    border-radius: 0.9rem;
    background: rgba(0, 0, 0, 0.42);
    box-shadow: none;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
}

.tt-page-loading-spinner {
    width: 2.75rem;
    height: 2.75rem;
    border: 0.22rem solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: 0.75s linear infinite tt-page-loading-girar;
}

@keyframes tt-page-loading-girar {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tt-page-loading-spinner {
        animation-duration: 2s;
    }
}

/* ANCHOR - AGENDAMENTO.DIGITAL — site genérico */

body.tt-site {
    min-height: 100vh;
    background: linear-gradient(180deg, #eef5ff 0%, #f7fbff 48%, #ffffff 100%);
}

/*
 * A página ocupa a viewport inteira.
 * A largura máxima fica no conteúdo, não em um card externo.
 */
.tt-site-main {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 2rem 1rem 1rem;
}

/*
 * O HTML ainda usa tt-card, então anulamos visualmente
 * o card somente dentro do site genérico.
 */
.tt-site-card {
    width: min(64rem, 100%);
    margin-inline: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.tt-site-card > .tt-card-body {
    padding: 0;
    text-align: center;
}

/* Marca */
.tt-site-logo-chamada {
    display: block;
    width: min(17rem, 80vw);
    height: auto;
    margin-inline: auto;
    object-fit: contain;
}

/* Endereço de agendamento inexistente */

.tt-site-endereco-inexistente {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    width: min(56rem, 100%);
    margin: 0.5rem auto 1rem auto;
    padding: 1rem 1.1rem;
    border: 1px solid var(--tt-orange-border);
    border-radius: var(--tt-radius-lg);
    background: var(--tt-orange-soft);
    color: var(--tt-orange);
    text-align: left;
}

.tt-site-endereco-inexistente > i {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    font-size: 1.15rem;
}

.tt-site-endereco-inexistente-textos {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.tt-site-endereco-inexistente-textos strong {
    color: #9a3412;
    font-size: 0.9rem;
    font-weight: 700;
}

.tt-site-endereco-inexistente-textos span {
    color: #b45309;
    font-size: 0.84rem;
    line-height: 1.4;
}

/* Chamada */

.tt-site-selo {
    margin: 1rem 0 0;
}

.tt-site-selo .tt-badge {
    padding: 0.38rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.tt-site-titulo {
    max-width: 46rem;
    margin: 0 auto 0;
    color: #0f2f6b;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.tt-site-lead {
    max-width: 38rem;
    margin: 1rem auto 0;
    color: var(--tt-text-muted);
    font-size: 1rem;
    line-height: 1.55;
}

.tt-site-eyebrow {
    margin: 2.25rem 0 0.75rem;
    color: var(--tt-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Sistemas */

.tt-site-sistemas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: min(52rem, 100%);
    margin-inline: auto;
}

.tt-site-sistema {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--tt-border-soft);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.78);
    text-align: left;
    text-decoration: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease,
        background-color 0.15s ease;
}

.tt-site-sistema:hover,
.tt-site-sistema:focus-visible {
    border-color: var(--tt-blue-border);
    background: #fff;
    box-shadow: var(--tt-shadow-sm);
    transform: translateY(-2px);
}

/*
 * Logo real dos sistemas.
 * Isso é o que impede aquele Kaiju de 900px da screenshot.
 */
.tt-site-sistema-logo {
    display: block;
    width: 6rem;
    height: 3.5rem;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}

.tt-site-sistema-textos {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.tt-site-sistema-nome {
    color: var(--tt-text);
    font-size: 0.95rem;
    font-weight: 700;
}

.tt-site-sistema-desc {
    color: var(--tt-text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.tt-site-sistema-seta {
    align-self: start;
    color: var(--tt-text-soft);
    font-size: 0.9rem;
}

/* Notas */

.tt-site-nota,
.tt-site-rodape {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--tt-text-soft);
    font-size: 0.78rem;
}

.tt-site-nota {
    margin: 1rem 0 0;
}

.tt-site-rodape {
    margin: 1rem 0 0;
}

/* Responsivo */

@media (max-width: 700px) {
    .tt-site-main {
        padding: 2rem 1rem 1.5rem;
    }

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

    .tt-site-sistema {
        grid-template-columns: 5rem minmax(0, 1fr) auto;
        padding: 1rem;
    }

    .tt-site-sistema-logo {
        width: 5rem;
        height: 3rem;
    }

    .tt-site-eyebrow {
        margin-top: 2.25rem;
    }
}

/* ANCHOR - AGENDAMENTO.DIGITAL — tela de agendamento */

.tt-ad-shell {
    --tt-control-height: 2.45rem;
    --tt-control-height-sm: 2.15rem;
    --tt-control-font-size: 0.875rem;
    --tt-control-radius: 0.55rem;

    width: min(28rem, 100%);
    margin-inline: auto;
    padding: 1.5rem 1rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* Marca do cliente */
.tt-ad-marca {
    width: 100%;
    padding: 0.85rem 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    border-radius: 1.15rem;
}

.tt-ad-marca.tt-ad-marca-centralizada {
    grid-template-columns: 1fr;
}

.tt-ad-marca.tt-ad-marca-centralizada .tt-ad-marca-identidade {
    align-items: center;
}

.tt-ad-marca.tt-ad-marca-centralizada .tt-ad-marca-logo {
    width: min(22rem, 100%);
    height: 6rem;
    margin-inline: auto;
    object-position: center;
}

.tt-ad-marca-identidade {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.tt-ad-marca-logo {
    display: block;
    width: min(20rem, 100%);
    height: 5rem;
    object-fit: contain;
    object-position: left center;
}

.tt-ad-marca-nome {
    margin: 0;
    color: var(--tt-text);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: left;
}

.tt-ad-marca-nome:empty,
.tt-ad-redes:empty {
    display: none;
}

.tt-ad-redes {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.tt-ad-redes:has(> a:nth-child(2)) {
    display: grid;
    grid-template-rows: repeat(2, 1.8rem);
    grid-auto-flow: column;
    grid-auto-columns: 1.8rem;
    align-items: center;
    justify-items: center;
    justify-content: center;
    gap: 0.4rem 0.8rem;
}

.tt-ad-redes > a {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
}

.tt-ad-redes > a > img,
.tt-ad-rede-icone {
    display: block;
    width: 1.1rem;
    height: auto;
    max-width: 1.5rem;
    max-height: 1.5rem;
    object-fit: contain;
}

/* Card do passo */
.tt-ad-passo {
    border-radius: 1.15rem;
}

.tt-ad-passo > .tt-card-body {
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.tt-ad-passo .tt-field {
    flex: 0 0 auto;
    width: 100%;
}

.tt-ad-passo-topo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tt-ad-voltar {
    width: 1.95rem;
    min-height: 1.95rem;
    padding: 0;
    border-radius: 50%;
}

.tt-ad-eyebrow {
    color: var(--tt-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.tt-ad-selo-seguro {
    margin-left: auto;
    font-size: 0.7rem;
}

.tt-ad-titulo {
    margin: 0;
    color: var(--tt-text);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Stepper */
.tt-ad-stepper-trilhos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.3rem;
}

.tt-ad-stepper-trilho {
    height: 0.22rem;
    border-radius: 999px;
    background: var(--tt-border-soft);
    transition: background-color 0.2s ease;
}

.tt-ad-stepper-trilho.is-ativo {
    background: var(--ad-btn-fundo);
}

.tt-ad-stepper-texto {
    display: flex;
    gap: 0.35rem;
    margin: 0.45rem 0 0;
    color: var(--tt-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.tt-ad-instrucao {
    margin: 0;
    color: var(--tt-text-muted);
    font-size: 0.88rem;
}

/* Dica abaixo do campo, com o check da imagem */
.tt-ad-dica {
    display: flex;
    align-items: center;
    gap: 0.28rem;
}

.tt-ad-dica::before {
    content: '\e226'; /* icon-circle-check */
    font-family: lucide;
    font-size: 0.85rem;
    line-height: 1;
}

/* Ação principal */
.tt-ad-btn-bloco {
    width: 100%;
    min-height: 2.6rem;
    border-radius: 0.6rem;
    font-size: 0.9rem;
}

.tt-ad-aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--tt-orange);
    font-size: 0.85rem;
}

/* Informações da clínica */
.tt-ad-info {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--tt-border-soft);
}

.tt-ad-info-titulo {
    margin: 0 0 0.2rem;
    color: var(--tt-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.tt-ad-info-linha {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 0.65rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--tt-border-soft);
    border-radius: 0.7rem;
    background: var(--tt-surface);
    color: var(--tt-text);
    text-align: left;
    text-decoration: none;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease;
}

.tt-ad-info-linha:hover,
.tt-ad-info-linha:focus-visible,
.tt-ad-info-linha:active {
    color: var(--tt-text);
    border-color: var(--tt-blue-border);
    background: var(--tt-surface);
}

.tt-ad-info-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.55rem;
    color: var(--ad-btn-fundo);
    background: color-mix(in srgb, var(--ad-btn-fundo) 12%, #fff);
}

.tt-ad-info-textos {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    margin-right: auto;
}

.tt-ad-info-textos strong {
    font-size: 0.84rem;
    font-weight: 600;
}

.tt-ad-info-textos span {
    color: var(--tt-text-muted);
    font-size: 0.74rem;
    line-height: 1.3;
}

.tt-ad-info-pagamento {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0.7rem;
    background: transparent;
}

.tt-ad-info-pagamento.is-open {
    background: var(--tt-surface);
}

.tt-ad-info-pagamento > .tt-filter-collapse-toggle {
    width: 100%;
}

.tt-ad-info-pagamento.is-open .tt-ad-info-linha {
    border: 0;
    border-bottom: 1px solid var(--tt-border-soft);
    border-radius: 0;
}

.tt-ad-info-pagamento .tt-filter-collapse-body > .tt-filter-grid {
    padding: 0 0.75rem;
}

.tt-ad-info-pagamento.is-open .tt-filter-collapse-body > .tt-filter-grid {
    padding: 0.65rem 0.75rem 0.75rem;
}

.tt-ad-info-pagamentos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
    row-gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tt-ad-info-pagamento-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--tt-text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.tt-ad-info-pagamento-item i {
    color: var(--tt-green);
    font-size: 0.85rem;
}

.tt-ad-info-icone > i {
    font-size: 1rem;
    line-height: 1;
}

.tt-ad-info-pagamento .tt-filter-collapse-arrow > i {
    font-size: 1rem;
    line-height: 1;
}

.tt-ad-mapa {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.tt-ad-mapa-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.65rem;
}

.tt-ad-mapa-endereco {
    flex: 1 1 14rem;
    min-width: 0;
    margin: 0;
    color: var(--tt-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.tt-ad-mapa-abrir {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}

.tt-ad-mapa > iframe {
    display: block;
    width: 100%;
    height: clamp(15rem, 52vh, 28rem);
    border: 1px solid var(--tt-border-soft);
    border-radius: 0.7rem;
    background: var(--tt-surface-soft);
}
/* Logos do rodapé */
.tt-ad-logos-rodape {
    width: 100%;
}

.tt-ad-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
}

.tt-ad-logo-cliente {
    display: block;
    width: auto;
    height: 1.5rem;
    max-width: 10rem;
    object-fit: contain;
}

.tt-ad-logo-techtrust {
    display: block;
    width: auto;
    height: 1.5rem;
    max-width: 10rem;
    object-fit: contain;
}

/* Resumo do profissional e do serviço */
.tt-ad-resumo-horario {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0.85rem;
    padding: 0.85rem;
    border: 1px solid var(--tt-border-soft);
    border-radius: 0.75rem;
    background: var(--tt-surface);
}

.tt-ad-resumo-principal {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.tt-ad-resumo-principal > img {
    flex: 0 0 auto;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--tt-blue-soft);
}

.tt-ad-resumo-detalhes {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

#resumo_profissional_horario {
    width: 100%;
    max-width: 15rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
}

#nome_profissional_horario {
    color: var(--tt-text);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

#frase_agendamento_horario {
    width: 100%;
    max-width: 15rem;
    margin: 0;
    color: var(--tt-text-muted);
    font-size: 0.72rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#frase_agendamento_horario::before,
#frase_agendamento_horario::after {
    content: '"';
}

.tt-ad-link-resumo {
    color: var(--ad-btn-fundo);
    font-size: 0.7rem;
    line-height: 1.3;
    text-decoration: underline;
    text-underline-offset: 0.12rem;
    cursor: default;
}

.tt-ad-resumo-servico {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem 0.7rem;
    color: var(--tt-text-muted);
    font-size: 0.72rem;
}

.tt-ad-servico-nome,
#valor_servico_horario {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.tt-ad-servico-nome {
    line-height: 1;
}

.tt-ad-servico-nome > span {
    line-height: 1.3;
}

.tt-ad-servico-nome i,
#valor_servico_horario i {
    color: var(--tt-text-muted);
    font-size: 0.8rem;
}

.tt-ad-servico-nome i {
    display: inline-flex;
    flex: 0 0 0.9rem;
    width: 0.9rem;
    height: 0.9rem;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#valor_servico_horario {
    line-height: 1.3;
    white-space: nowrap;
}

.tt-ad-acoes-servico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    margin-left: 0;
}

.tt-ad-acao-servico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    border: 1px solid var(--tt-border-soft);
    border-radius: 0.45rem;
    color: var(--ad-btn-fundo);
    background: var(--tt-surface-soft);
    text-decoration: none;
}

.tt-ad-acao-servico:hover,
.tt-ad-acao-servico:focus-visible {
    color: var(--ad-btn-fundo);
    border-color: var(--ad-btn-fundo);
}

.tt-ad-redes-profissional {
    min-width: 2.65rem;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding-left: 0.85rem;
    border-left: 1px solid var(--tt-border-soft);
}

.tt-ad-redes-profissional:has(> .tt-ad-rede-link:nth-child(2)) {
    display: grid;
    grid-template-columns: repeat(2, 1.8rem);
    grid-auto-rows: 1.8rem;
    align-content: center;
    justify-content: center;
    gap: 0.35rem;
}

.tt-ad-rede-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    text-decoration: none;
}

#descricao_servico_horario {
    margin: 0;
    color: var(--tt-text);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Navegação semanal */
.tt-ad-navegacao-semana {
    display: grid;
    grid-template-columns: 2.15rem minmax(0, 1fr) 2.15rem;
    align-items: center;
    gap: 0.75rem;
}

.tt-ad-navegacao-semana > .tt-btn {
    width: 2.15rem;
    min-height: 2.15rem;
    padding: 0;
    color: var(--tt-text-muted);
    background: var(--tt-surface);
    border-color: var(--tt-border);
}

.tt-ad-navegacao-semana .tt-submit-spinner {
    transform: scale(0.6);
}

.tt-ad-navegacao-semana > .tt-btn:not(:disabled):hover,
.tt-ad-navegacao-semana > .tt-btn:not(:disabled):focus-visible {
    color: var(--ad-btn-fundo);
    border-color: var(--ad-btn-fundo);
}

.tt-ad-periodo-semana {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    text-align: center;
}

.tt-ad-periodo-semana strong {
    color: var(--tt-text);
    font-size: 0.78rem;
    line-height: 1.25;
}

.tt-ad-periodo-semana small {
    color: var(--tt-text-muted);
    font-size: 0.66rem;
}

/* Dias e horários */
.tt-ad-dias-semana {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tt-ad-dia {
    overflow: hidden;
    border: 1px solid var(--tt-border-soft);
    border-radius: 0.7rem;
    background: var(--tt-surface);
}

.tt-ad-dia-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.62rem 0.72rem;
    border-bottom: 1px solid var(--tt-border-soft);
    background: var(--tt-surface-soft);
}

.tt-ad-dia-cabecalho strong {
    color: var(--tt-text);
    font-size: 0.75rem;
    line-height: 1.3;
}

.tt-ad-dia-informacao {
    flex: 0 0 auto;
    color: var(--tt-text-muted);
    font-size: 0.68rem;
    white-space: nowrap;
}

.tt-ad-dia.is-feriado {
    border-color: var(--tt-orange-border);
}

.tt-ad-dia.is-feriado .tt-ad-dia-cabecalho {
    border-color: var(--tt-orange-border);
    background: var(--tt-orange-soft);
}

.tt-ad-dia.is-feriado .tt-ad-dia-cabecalho strong,
.tt-ad-dia.is-feriado .tt-ad-dia-informacao {
    color: var(--tt-orange);
}

.tt-ad-feriado {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    padding: 0.65rem 0.72rem;
    color: var(--tt-orange);
    font-size: 0.7rem;
    line-height: 1.35;
}

.tt-ad-feriado i {
    flex: 0 0 auto;
    margin-top: 0.08rem;
}

/* Grade de horários */
.tt-ad-sem-horarios {
    margin: 0;
    padding: 0.85rem 0.72rem;
    color: var(--tt-text-muted);
    font-size: 0.72rem;
    text-align: center;
}

.tt-ad-horarios {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.62rem 0.72rem 0.72rem;
}

.tt-ad-horario {
    width: 100%;
    min-height: 2.1rem;
    color: var(--ad-btn-fundo);
    background: color-mix(in srgb, var(--ad-btn-fundo) 5%, white);
    border-color: color-mix(in srgb, var(--ad-btn-fundo) 45%, white);
}

.tt-ad-horario:not(:disabled):not([aria-pressed='true']):hover,
.tt-ad-horario:not(:disabled):not([aria-pressed='true']):focus-visible {
    color: var(--ad-btn-fundo);
    background: color-mix(in srgb, var(--ad-btn-fundo) 10%, white);
    border-color: var(--ad-btn-fundo);
}

.tt-ad-horario[aria-pressed='true'] {
    color: var(--ad-btn-texto);
    background: var(--ad-btn-fundo);
    border-color: var(--ad-btn-fundo);
}

/* Lista de agendamentos selecionados */
.tt-ad-lista-agendamentos-scroll {
    max-height: min(24rem, 52vh);
    padding-right: 0.35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* Ações da etapa */
.tt-ad-acoes-horario {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
}

.tt-ad-acoes-horario > .tt-btn {
    min-height: 2.55rem;
}

#btn_voltar_horarios {
    color: var(--tt-text);
    background: var(--tt-surface);
    border-color: var(--tt-border);
}

#btn_continuar_horario {
    width: 100%;
}

.tt-ad-periodo-semana,
.tt-ad-dias-semana {
    transition: opacity 0.16s ease;
}

.tt-ad-periodo-semana.is-trocando-semana,
.tt-ad-dias-semana.is-trocando-semana {
    opacity: 0;
}

.tt-ad-dias-semana.is-trocando-semana {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .tt-ad-periodo-semana,
    .tt-ad-dias-semana {
        transition: none;
    }
}
.tt-ad-acao-servico > i {
    font-size: 1rem;
    line-height: 1;
}

.tt-ad-pais-documento {
    flex: 0 0 3rem;
    min-width: 3rem;
}

.tt-ad-pais-documento .bootstrap-select {
    width: 100% !important;
}

.tt-ad-pais-documento .dropdown-toggle {
    padding-right: 0.4rem;
    padding-left: 0.4rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.tt-ad-pais-documento .dropdown-toggle .fi {
    font-size: 1rem;
}

.tt-ad-pais-documento .dropdown-toggle .tt-ad-pais-nome {
    display: none;
}

.tt-ad-pais-documento .filter-option-inner-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bootstrap-select.bs-container.tt-ad-pais-select {
    width: min(18rem, calc(100vw - 2rem)) !important;
}

/* Desafio de confirmação do telefone */
.tt-ad-opcoes-telefone {
    margin-top: 0.4rem;
}

.tt-ad-opcao-telefone {
    --tt-btn-color: var(--tt-text);
    --tt-btn-bg: var(--tt-surface);
    --tt-btn-border: var(--tt-border);

    justify-content: flex-start;
    gap: 0.65rem;
    min-height: 3rem;
    padding: 0.5rem 0.8rem;
    text-align: left;
    cursor: pointer;
}

.tt-ad-opcao-telefone .form-check-input {
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

.tt-ad-opcao-telefone .form-check-input:focus {
    border-color: var(--ad-btn-fundo);
    box-shadow: 0 0 0 0.18rem
        color-mix(in srgb, var(--ad-btn-fundo) 25%, transparent);
}

.tt-ad-opcao-telefone .form-check-input:checked {
    background-color: var(--ad-btn-fundo);
    border-color: var(--ad-btn-fundo);
}

.tt-ad-opcao-telefone > span {
    min-width: 0;
    color: inherit;
    font-weight: 600;
}

.tt-ad-opcao-telefone.is-selecionado {
    --tt-btn-color: var(--ad-btn-fundo);
    --tt-btn-bg: color-mix(in srgb, var(--ad-btn-fundo) 9%, white);
    --tt-btn-border: var(--ad-btn-fundo);
}

.tt-ad-opcao-telefone:not(.is-selecionado):hover,
.tt-ad-opcao-telefone:not(.is-selecionado):focus-visible {
    color: var(--tt-text);
    background: var(--tt-surface-soft);
    border-color: var(--tt-border);
}

.tt-ad-aviso-container {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--tt-orange-border);
    border-radius: 0.6rem;
    background: var(--tt-orange-soft);
    line-height: 1.4;
}

.tt-ad-aviso-container > i {
    flex: 0 0 auto;
    margin-top: 0.1rem;
}