/* ===================================
   COMPONENTES CORPORATE BLUE
   Premium SaaS Professional
   Versão 1.0
   =================================== */

/* ===================================
   CABEÇALHO DA PÁGINA
   =================================== */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 20px;
    flex-wrap: wrap;
}

.page-header-left {
    display: flex;
    flex-direction: column;
    margin-left: 5px;
}

.page-header-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-header-icon {
    color: #3D5A80;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.page-header-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1F2A44;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.page-subtitle {
    font-size: 0.875rem;
    font-weight: 400;
    color: #6B7A90;
    margin: 0;
    line-height: 1.4;
}

.page-header-actions {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
}

/* ===================================
   BOTÕES
   =================================== */

/* -----------------------------------------------
   Reset COMPLETO dos botões PrimeFaces
   O PrimeFaces gera botões com a estrutura:
   <button class="ui-button ui-button-text-icon-left ...">
     <span class="ui-button-icon-left ui-icon ui-c fas fa-xxx"></span>
     <span class="ui-button-text ui-c">Texto</span>
   </button>
   ----------------------------------------------- */

/* Reset do ícone PrimeFaces para Font Awesome */
.ui-button .ui-icon.fa,
.ui-button .ui-icon.fas,
.ui-button .ui-icon.far,
.ui-button .ui-icon.fal,
.ui-button .ui-icon.fab,
.ui-widget .ui-icon.fa,
.ui-widget .ui-icon.fas,
.ui-widget .ui-icon.far {
    background-image: none !important;
    text-indent: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* Botão base - Reset completo do PrimeFaces */
.ui-button {
    height: 42px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
    vertical-align: middle;
    position: relative;
    gap: 8px !important;
}

/* Remove padding padrão do PrimeFaces que causa problemas */
.ui-button.ui-button-text-icon-left,
.ui-button.ui-button-text-icon-right {
    padding: 0 22px !important;
}

/* Span do ícone à esquerda - Reset COMPLETO */
.ui-button .ui-button-icon-left {
    position: static !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: -1;
}

/* Span do ícone à direita - Reset COMPLETO */
.ui-button .ui-button-icon-right {
    position: static !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 1;
}

/* Span do texto - Reset COMPLETO */
.ui-button .ui-button-text {
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    position: static !important;
    order: 0;
}

/* Sobrescreve os estilos de padding do PrimeFaces para botões com ícone */
.ui-button.ui-button-text-icon-left .ui-button-text {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ui-button.ui-button-text-icon-right .ui-button-text {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ícones Font Awesome dentro do span do ícone */
.ui-button .ui-button-icon-left.fa,
.ui-button .ui-button-icon-left.fas,
.ui-button .ui-button-icon-left.far,
.ui-button .ui-button-icon-right.fa,
.ui-button .ui-button-icon-right.fas,
.ui-button .ui-button-icon-right.far,
.ui-button-icon-left.fa,
.ui-button-icon-left.fas,
.ui-button-icon-left.far,
.ui-button-icon-right.fa,
.ui-button-icon-right.fas,
.ui-button-icon-right.far {
    font-size: 14px !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    text-indent: 0 !important;
    background: none !important;
}

/* Botão somente com ícone */
.ui-button.ui-button-icon-only {
    width: 42px;
    padding: 0 !important;
    gap: 0 !important;
}

.ui-button.ui-button-icon-only .ui-button-icon-left,
.ui-button.ui-button-icon-only .ui-button-icon-right {
    margin: 0 !important;
}

.ui-button.ui-button-icon-only .ui-button-text {
    display: none !important;
}

.btn-primary,
.ui-button.btn-primary {
    background-color: #3D5A80 !important;
    border: 1px solid #3D5A80 !important;
    color: #FFFFFF !important;
    font-weight: 500;
    font-size: 0.875rem;
    height: 42px;
    padding: 0 22px !important;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(61, 90, 128, 0.15);
    white-space: nowrap;
}

.btn-primary:hover,
.ui-button.btn-primary:hover {
    background-color: #4A6B94 !important;
    border-color: #4A6B94 !important;
    box-shadow: 0 2px 8px rgba(61, 90, 128, 0.25);
}

.btn-primary:active,
.ui-button.btn-primary:active {
    background-color: #345070 !important;
    border-color: #345070 !important;
}

.btn-primary .ui-button-icon-left,
.btn-primary .ui-button-icon-right,
.ui-button.btn-primary .ui-button-icon-left,
.ui-button.btn-primary .ui-button-icon-right {
    position: static !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

.btn-primary .ui-button-text,
.ui-button.btn-primary .ui-button-text {
    padding: 0 !important;
    line-height: 1 !important;
}

/* Botão Secundário */
.btn-secondary,
.ui-button.btn-secondary {
    background-color: #FFFFFF !important;
    border: 1px solid #D8E0EC !important;
    color: #3D5A80 !important;
    font-weight: 500;
    font-size: 0.875rem;
    height: 42px;
    padding: 0 22px !important;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none;
    white-space: nowrap;
}

.btn-secondary:hover,
.ui-button.btn-secondary:hover {
    background-color: #F5F8FC !important;
    border-color: #C8D4E3 !important;
}

.btn-secondary .ui-button-icon-left,
.btn-secondary .ui-button-icon-right,
.ui-button.btn-secondary .ui-button-icon-left,
.ui-button.btn-secondary .ui-button-icon-right {
    position: static !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

.btn-secondary .ui-button-text,
.ui-button.btn-secondary .ui-button-text {
    padding: 0 !important;
    line-height: 1 !important;
}

.btn-secondary .ui-button-text,
.ui-button.btn-secondary .ui-button-text {
    padding: 0 !important;
    line-height: 1 !important;
}

/* Botão de Ícone */
.btn-icon,
.ui-button.btn-icon {
    width: 42px;
    height: 42px;
    padding: 0 !important;
    border-radius: 8px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.btn-icon .ui-button-text,
.ui-button.btn-icon .ui-button-text {
    display: none;
}

.btn-icon .ui-icon,
.ui-button.btn-icon .ui-icon {
    margin: 0 !important;
}

/* Botão Pequeno */
.btn-sm,
.ui-button.btn-sm {
    height: 34px;
    padding: 0 14px;
    font-size: 0.813rem;
}

/* Botão de Ação em Tabela */
.btn-table-action,
.ui-button.btn-table-action {
    background-color: transparent !important;
    border: none !important;
    color: #5A6B82 !important;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.btn-table-action:hover,
.ui-button.btn-table-action:hover {
    background-color: #F0F4F8 !important;
    color: #3D5A80 !important;
}

.btn-table-action .ui-button-text,
.ui-button.btn-table-action .ui-button-text {
    display: none;
}

.btn-table-action .ui-icon,
.ui-button.btn-table-action .ui-icon {
    margin: 0 !important;
}

/* ===================================
   CARDS
   =================================== */
.card,
.ui-panel {
    background-color: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.04),
        0 4px 12px rgba(20, 40, 70, 0.03);
    border: 1px solid rgba(220, 228, 240, 0.5);
    margin-bottom: 20px;
    overflow: hidden;
}

.card-body,
.ui-panel-content {
    padding: 24px;
}

/* Card Header com Título */
.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.card-header-icon {
    color: #4A6B94;
    font-size: 16px;
    opacity: 0.85;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1F2A44;
    margin: 0;
}

/* ===================================
   FORMULÁRIOS - FILTROS
   =================================== */
.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
    flex: 1;
}

.filter-group-auto {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
}

.filter-label,
.ui-outputlabel {
    font-size: 0.85rem;
    font-weight: 500;
    color: #2D3E52;
    display: block;
}

/* ===================================
   INPUTS E SELECTS
   =================================== */
.form-control,
.ui-inputfield,
.ui-inputtext,
.ui-selectonemenu,
.ui-autocomplete-input {
    background-color: #FFFFFF !important;
    border: 1px solid #D8E0EC !important;
    border-radius: 8px !important;
    height: 42px;
    padding: 0 14px;
    font-size: 0.9rem;
    color: #2D3E52;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.form-control:focus,
.ui-inputfield:focus,
.ui-inputtext:focus,
.ui-state-focus {
    border-color: #4A6B94 !important;
    box-shadow: 0 0 0 3px rgba(74, 107, 148, 0.1) !important;
    outline: none;
}

.form-control::placeholder,
.ui-inputfield::placeholder,
.ui-inputtext::placeholder {
    color: #94A3B8;
}

/* Select/Dropdown PrimeFaces */
.ui-selectonemenu {
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
}

.ui-selectonemenu .ui-selectonemenu-label {
    padding: 0 14px !important;
    line-height: 40px !important;
    color: #2D3E52;
}

.ui-selectonemenu .ui-selectonemenu-trigger {
    width: 36px;
    border-left: none !important;
    background: transparent !important;
    color: #5A6B82;
    border-radius: 0 8px 8px 0 !important;
}

.ui-selectonemenu-panel {
    border: 1px solid #D8E0EC !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(20, 40, 70, 0.12) !important;
    margin-top: 4px;
}

.ui-selectonemenu-panel .ui-selectonemenu-items {
    padding: 6px !important;
}

.ui-selectonemenu-panel .ui-selectonemenu-item {
    padding: 10px 14px !important;
    border-radius: 6px !important;
    margin: 2px 0;
    color: #2D3E52;
    transition: background-color 0.15s ease;
}

.ui-selectonemenu-panel .ui-selectonemenu-item:hover,
.ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-highlight {
    background-color: #F0F5FA !important;
    color: #1F2A44 !important;
}

/* TextArea */
.ui-inputtextarea {
    min-height: 100px;
    padding: 12px 14px;
    resize: vertical;
}

/* Input Group */
.p-inputgroup {
    display: flex;
    align-items: stretch;
}

.p-inputgroup .p-inputgroup-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background-color: #F5F8FC;
    border: 1px solid #D8E0EC;
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: #5A6B82;
    height: 42px;
    box-sizing: border-box;
}

.p-inputgroup .p-inputgroup-addon:last-child {
    border-right: 1px solid #D8E0EC;
    border-left: none;
    border-radius: 0 8px 8px 0;
}

.p-inputgroup .ui-inputfield,
.p-inputgroup .form-control {
    border-radius: 0 8px 8px 0 !important;
    flex: 1;
}

.p-inputgroup .p-inputgroup-addon + .ui-inputfield,
.p-inputgroup .p-inputgroup-addon + .form-control {
    border-left: none !important;
}

.p-inputgroup .ui-inputfield:focus,
.p-inputgroup .form-control:focus {
    position: relative;
    z-index: 1;
}

/* ===================================
   TABELAS / DATATABLES
   =================================== */
.ui-datatable {
    border: none !important;
}

.ui-datatable .ui-datatable-header {
    background: transparent !important;
    border: none !important;
    padding: 16px 24px !important;
}

/* Cabeçalho da Tabela */
.ui-datatable .ui-datatable-thead > tr > th {
    background-color: #F5F8FC !important;
    color: #2D3E52 !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 14px 20px !important;
    border: none !important;
    border-bottom: 1px solid #E8EDF3 !important;
    text-align: left;
}

.ui-datatable .ui-datatable-thead > tr > th:first-child {
    border-radius: 12px 0 0 0;
}

.ui-datatable .ui-datatable-thead > tr > th:last-child {
    border-radius: 0 12px 0 0;
}

/* Ícone de Ordenação */
.ui-datatable .ui-sortable-column-icon {
    color: #94A3B8 !important;
    margin-left: 6px;
    font-size: 12px;
}

.ui-datatable .ui-sortable-column:hover {
    background-color: #EDF2F7 !important;
}

/* Células da Tabela */
.ui-datatable .ui-datatable-data > tr > td {
    padding: 14px 20px !important;
    border: none !important;
    border-bottom: 1px solid #EEF2F7 !important;
    font-size: 0.875rem;
    color: #3D4E63;
    vertical-align: middle;
}

/* Hover nas Linhas */
.ui-datatable .ui-datatable-data > tr:hover {
    background-color: #F8FAFC !important;
}

/* Linha Alternada (opcional) */
.ui-datatable .ui-datatable-data > tr.ui-datatable-even {
    background-color: #FAFBFD;
}

.ui-datatable .ui-datatable-data > tr.ui-datatable-odd {
    background-color: #FFFFFF;
}

/* ===================================
   PAGINAÇÃO
   =================================== */
.ui-paginator {
    background: transparent !important;
    border: none !important;
    padding: 16px 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ui-paginator .ui-paginator-current {
    color: #6B7A90;
    font-size: 0.8rem;
    margin-right: 12px;
}

.ui-paginator .ui-paginator-page,
.ui-paginator .ui-paginator-first,
.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-last {
    min-width: 32px;
    height: 32px;
    border-radius: 6px !important;
    border: 1px solid #E3E8F0 !important;
    background-color: #FFFFFF !important;
    color: #5A6B82 !important;
    font-size: 0.813rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    margin: 0 2px;
}

.ui-paginator .ui-paginator-page:hover,
.ui-paginator .ui-paginator-first:hover,
.ui-paginator .ui-paginator-prev:hover,
.ui-paginator .ui-paginator-next:hover,
.ui-paginator .ui-paginator-last:hover {
    background-color: #F5F8FC !important;
    border-color: #D0D9E6 !important;
}

.ui-paginator .ui-paginator-page.ui-state-active {
    background-color: #3D5A80 !important;
    border-color: #3D5A80 !important;
    color: #FFFFFF !important;
}

/* Dropdown de quantidade por página */
.ui-paginator .ui-paginator-rpp-options {
    height: 32px;
    border-radius: 6px !important;
    border: 1px solid #E3E8F0 !important;
    padding: 0 8px;
    font-size: 0.813rem;
}

/* ===================================
   ESTADO VAZIO
   =================================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
}

.empty-state-icon {
    font-size: 64px;
    color: #C8D4E3;
    margin-bottom: 20px;
    opacity: 0.8;
}

.empty-state-icon i {
    font-weight: 300;
}

.empty-state-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1F2A44;
    margin: 0 0 8px 0;
}

.empty-state-description {
    font-size: 0.9rem;
    font-weight: 400;
    color: #6B7A90;
    margin: 0;
    max-width: 400px;
    line-height: 1.5;
}

.empty-state-action {
    margin-top: 24px;
}

/* DataTable Empty Message */
.ui-datatable .ui-datatable-data .ui-datatable-empty-message td {
    padding: 0 !important;
    border: none !important;
}

/* ===================================
   BADGES / STATUS
   =================================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.badge-success {
    background-color: #EDF3E8;
    color: #658950;
}

.badge-warning {
    background-color: #FEF4E6;
    color: #B7791F;
}

.badge-danger {
    background-color: #FEE8E7;
    color: #C53030;
}

.badge-info {
    background-color: #E8F2FC;
    color: #2B6CB0;
}

.badge-neutral {
    background-color: #F0F4F8;
    color: #5A6B82;
}

/* ===================================
   P:TAG (PrimeFaces Tag Component)
   =================================== */
.ui-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    line-height: 1.4;
}

/* Tag Info (padrão) */
.ui-tag.ui-tag-info {
    background-color: #E8F2FC !important;
    color: #2B6CB0 !important;
}

/* Tag Success */
.ui-tag.ui-tag-success {
    background-color: #EDF3E8 !important;
    color: #658950 !important;
}

/* Tag Warning */
.ui-tag.ui-tag-warning {
    background-color: #FEF4E6 !important;
    color: #B7791F !important;
}

/* Tag Danger */
.ui-tag.ui-tag-danger {
    background-color: #FEE8E7 !important;
    color: #C53030 !important;
}

/* Tag Secondary */
.ui-tag.ui-tag-secondary {
    background-color: #F0F4F8 !important;
    color: #5A6B82 !important;
}

/* ===================================
   P:BADGE (PrimeFaces Badge Component)
   =================================== */
.ui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

/* Badge padrão (info) */
.ui-badge,
.ui-badge.ui-badge-info {
    background-color: #3D5A80 !important;
    color: #FFFFFF !important;
}

/* Badge Success */
.ui-badge.ui-badge-success {
    background-color: #658950 !important;
    color: #FFFFFF !important;
}

/* Badge Warning */
.ui-badge.ui-badge-warning {
    background-color: #D69E2E !important;
    color: #FFFFFF !important;
}

/* Badge Danger */
.ui-badge.ui-badge-danger {
    background-color: #C53030 !important;
    color: #FFFFFF !important;
}

/* Badge Secondary */
.ui-badge.ui-badge-secondary {
    background-color: #6B7A90 !important;
    color: #FFFFFF !important;
}

/* Badge grande (para números maiores) */
.ui-badge.ui-badge-lg {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    font-size: 0.875rem;
    border-radius: 16px;
}

/* Badge em overlay (notificações) */
.ui-badge.ui-badge-overlay {
    position: absolute;
    top: -8px;
    right: -8px;
}

/* ===================================
   P:MENUBUTTON (Menu de Ações)
   =================================== */
.ui-menubutton {
    display: inline-flex;
    position: relative;
}

/* Botão do MenuButton - Estilo para tabela */
.ui-menubutton.btn-table-action .ui-button,
.ui-menubutton .ui-button.p-button-text {
    background-color: transparent !important;
    border: none !important;
    color: #5A6B82 !important;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}

.ui-menubutton.btn-table-action .ui-button:hover,
.ui-menubutton .ui-button.p-button-text:hover {
    background-color: #F0F4F8 !important;
    color: #3D5A80 !important;
}

.ui-menubutton.btn-table-action .ui-button:focus,
.ui-menubutton .ui-button.p-button-text:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Esconde o texto do botão quando em modo ícone */
.ui-menubutton.btn-table-action .ui-button .ui-button-text,
.ui-menubutton .ui-button.p-button-text .ui-button-text {
    display: none;
}

/* Ícone do botão */
.ui-menubutton.btn-table-action .ui-button .ui-button-icon-left,
.ui-menubutton .ui-button.p-button-text .ui-button-icon-left {
    margin: 0 !important;
    position: static !important;
}

/* Menu dropdown do MenuButton */
.ui-menubutton .ui-menu {
    background: #FFFFFF !important;
    border: 1px solid #E3E8F0 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(20, 40, 70, 0.15) !important;
    padding: 6px 0 !important;
    min-width: 180px;
    overflow: hidden;
}

/* Itens do menu */
.ui-menubutton .ui-menu .ui-menuitem {
    margin: 0;
}

.ui-menubutton .ui-menu .ui-menuitem-link {
    padding: 10px 16px !important;
    color: #3D4E63 !important;
    font-size: 0.875rem;
    display: flex !important;
    align-items: center;
    gap: 10px;
    transition: all 0.15s ease;
    border-radius: 0 !important;
}

.ui-menubutton .ui-menu .ui-menuitem-link:hover {
    background-color: #F5F8FC !important;
    color: #3D5A80 !important;
}

/* Ícone do item de menu */
.ui-menubutton .ui-menu .ui-menuitem-icon {
    color: #6B7A90;
    font-size: 14px;
    margin-right: 0 !important;
}

.ui-menubutton .ui-menu .ui-menuitem-link:hover .ui-menuitem-icon {
    color: #3D5A80;
}

/* Texto do item de menu */
.ui-menubutton .ui-menu .ui-menuitem-text {
    color: inherit;
}

/* Separador no menu */
.ui-menubutton .ui-menu .ui-menu-separator {
    border-top: 1px solid #EEF2F7;
    margin: 6px 0;
}

/* ===================================
   P:SPLITBUTTON (Botão com Menu)
   =================================== */
.ui-splitbutton {
    display: inline-flex;
    border-radius: 8px;
    overflow: hidden;
}

.ui-splitbutton .ui-button {
    border-radius: 0 !important;
}

.ui-splitbutton .ui-button:first-child {
    border-radius: 8px 0 0 8px !important;
}

.ui-splitbutton .ui-menubutton .ui-button {
    border-radius: 0 8px 8px 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 0 10px !important;
    min-width: auto;
}

/* ===================================
   MENSAGENS / ALERTS
   =================================== */
.ui-messages,
.ui-message {
    border-radius: 10px !important;
    border: none !important;
    margin-bottom: 20px;
}

.ui-messages-info,
.ui-message-info {
    background-color: #E8F2FC !important;
    color: #1E4E8C !important;
}

.ui-messages-warn,
.ui-message-warn {
    background-color: #FEF4E6 !important;
    color: #8B5A00 !important;
}

.ui-messages-error,
.ui-message-error {
    background-color: #FEE8E7 !important;
    color: #9B2C2C !important;
}

.ui-messages-success,
.ui-message-success {
    background-color: #EDF3E8 !important;
    color: #4A6B3D !important;
}

/* ===================================
   DIÁLOGOS / MODAIS
   =================================== */
.ui-dialog {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(20, 40, 70, 0.2),
        0 16px 64px rgba(20, 40, 70, 0.15) !important;
    overflow: hidden;
}

.ui-dialog .ui-dialog-titlebar {
    background: #FFFFFF !important;
    border: none !important;
    border-bottom: 1px solid #EEF2F7 !important;
    padding: 20px 24px !important;
    color: #1F2A44;
    font-weight: 600;
    font-size: 1.1rem;
}

.ui-dialog .ui-dialog-titlebar-close {
    color: #6B7A90 !important;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
    background-color: #F5F8FC !important;
    color: #3D5A80 !important;
}

.ui-dialog .ui-dialog-content {
    background: #FFFFFF !important;
    padding: 24px !important;
    color: #3D4E63;
}

.ui-dialog .ui-dialog-footer {
    background: #F8FAFC !important;
    border: none !important;
    border-top: 1px solid #EEF2F7 !important;
    padding: 16px 24px !important;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Overlay do Modal */
.ui-widget-overlay {
    background-color: rgba(20, 35, 60, 0.5) !important;
    backdrop-filter: blur(2px);
}

/* ===================================
   TOOLTIPS
   =================================== */
.ui-tooltip {
    background-color: #1F2A44 !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 0.813rem !important;
    box-shadow: 0 4px 12px rgba(20, 40, 70, 0.2) !important;
}

/* ===================================
   TABS
   =================================== */
.ui-tabs {
    border: none !important;
}

.ui-tabs .ui-tabs-nav {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #E3E8F0 !important;
    padding: 0 !important;
}

.ui-tabs .ui-tabs-nav li {
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

.ui-tabs .ui-tabs-nav li a {
    padding: 14px 20px !important;
    color: #5A6B82 !important;
    font-weight: 500;
    font-size: 0.9rem;
    border: none !important;
    background: transparent !important;
    transition: color 0.2s ease;
    position: relative;
}

.ui-tabs .ui-tabs-nav li a:hover {
    color: #3D5A80 !important;
}

.ui-tabs .ui-tabs-nav li.ui-state-active a {
    color: #3D5A80 !important;
}

.ui-tabs .ui-tabs-nav li.ui-state-active a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #3D5A80;
    border-radius: 2px 2px 0 0;
}

.ui-tabs .ui-tabs-panels {
    border: none !important;
    background: transparent !important;
    padding: 24px 0 0 0 !important;
}

/* ===================================
   FIELDSET / ACCORDION
   =================================== */
.ui-fieldset,
.ui-accordion {
    border: 1px solid #E3E8F0 !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
}

.ui-fieldset .ui-fieldset-legend,
.ui-accordion .ui-accordion-header {
    background: #F5F8FC !important;
    border: 1px solid #E3E8F0 !important;
    color: #2D3E52 !important;
    font-weight: 600;
    border-radius: 8px !important;
}

/* ===================================
   PROGRESS BAR
   =================================== */
.ui-progressbar {
    height: 8px !important;
    border-radius: 4px !important;
    background-color: #E3E8F0 !important;
    border: none !important;
}

.ui-progressbar .ui-progressbar-value {
    background: linear-gradient(90deg, #3D5A80 0%, #4A6B94 100%) !important;
    border-radius: 4px !important;
}

/* ===================================
   SIDEBAR
   =================================== */
.ui-sidebar {
    background: #FFFFFF !important;
    box-shadow: 0 8px 32px rgba(20, 40, 70, 0.15) !important;
    border: none !important;
}

.ui-sidebar .ui-sidebar-close {
    color: #6B7A90 !important;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.ui-sidebar .ui-sidebar-close:hover {
    background-color: #F5F8FC !important;
    color: #3D5A80 !important;
}

/* ===================================
   UTILITÁRIOS
   =================================== */

/* Espaçamentos customizados */
.mt-card {
    margin-top: 20px;
}
.mb-card {
    margin-bottom: 20px;
}
.pt-card {
    padding-top: 24px;
}
.pb-card {
    padding-bottom: 24px;
}

/* Texto */
.text-primary {
    color: #1F2A44 !important;
}
.text-secondary {
    color: #5A6B82 !important;
}
.text-muted {
    color: #6B7A90 !important;
}
.text-accent {
    color: #3D5A80 !important;
}

/* Backgrounds */
.bg-white {
    background-color: #FFFFFF !important;
}
.bg-light {
    background-color: #F5F8FC !important;
}

/* Bordas */
.rounded-card {
    border-radius: 14px !important;
}
.rounded-sm {
    border-radius: 8px !important;
}

/* Sombras */
.shadow-card {
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.04),
        0 4px 12px rgba(20, 40, 70, 0.03) !important;
}

.shadow-elevated {
    box-shadow: 0 2px 8px rgba(20, 40, 70, 0.06),
        0 8px 24px rgba(20, 40, 70, 0.08) !important;
}

/* ===================================
   DATEPICKER / CALENDAR
   =================================== */

/* Container do DatePicker - força layout inline */
.ui-datepicker-group,
.ui-calendar {
    display: inline-flex !important;
    align-items: stretch !important;
    width: 100%;
}

/* Painel do calendário (popup) */
.ui-datepicker-panel {
    background: #FFFFFF !important;
    border: 1px solid #D8E0EC !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(20, 40, 70, 0.15) !important;
    padding: 16px !important;
}

/* Input do DatePicker */
.ui-calendar .ui-inputtext {
    background-color: #FFFFFF !important;
    border: 1px solid #D8E0EC !important;
    border-radius: 8px 0 0 8px !important;
    height: 42px !important;
    padding: 0 14px !important;
    font-size: 0.9rem !important;
    color: #2D3E52 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    flex: 1 !important;
}

.ui-calendar .ui-inputtext:focus {
    border-color: #4A6B94 !important;
    box-shadow: 0 0 0 3px rgba(74, 107, 148, 0.1) !important;
    outline: none;
    position: relative;
    z-index: 1;
}

/* DatePicker sem ícone - borda completa */
.ui-calendar:not(.ui-calendar-w-btn) .ui-inputtext {
    border-radius: 8px !important;
}

/* Botão trigger do DatePicker */
.ui-calendar .ui-datepicker-trigger {
    background-color: #F5F8FC !important;
    border: 1px solid #D8E0EC !important;
    border-left: none !important;
    border-radius: 0 8px 8px 0 !important;
    color: #5A6B82 !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    transition: all 0.2s ease;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.ui-calendar .ui-datepicker-trigger:hover {
    background-color: #E8EDF3 !important;
    color: #3D5A80 !important;
}

.ui-calendar .ui-datepicker-trigger .ui-icon,
.ui-calendar .ui-datepicker-trigger .ui-button-icon-left {
    margin: 0 !important;
    position: static !important;
}

/* Header do calendário */
.ui-datepicker-header {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #EEF2F7 !important;
    padding: 0 0 12px 0 !important;
    margin-bottom: 12px;
}

.ui-datepicker-title {
    color: #1F2A44 !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

/* Botões de navegação (anterior/próximo) */
.ui-datepicker-prev,
.ui-datepicker-next {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    color: #5A6B82 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background-color: #F0F4F8 !important;
    border-color: #E3E8F0 !important;
    color: #3D5A80 !important;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    font-size: 14px !important;
}

/* Cabeçalho dos dias da semana */
.ui-datepicker-calendar thead th {
    color: #6B7A90 !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    padding: 8px !important;
}

/* Células do calendário */
.ui-datepicker-calendar td {
    padding: 2px !important;
}

.ui-datepicker-calendar td span,
.ui-datepicker-calendar td a {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.875rem !important;
    color: #2D3E52 !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}

.ui-datepicker-calendar td a:hover {
    background-color: #F0F4F8 !important;
    color: #3D5A80 !important;
}

/* Dia atual */
.ui-datepicker-calendar td.ui-datepicker-today span,
.ui-datepicker-calendar td.ui-datepicker-today a {
    background-color: #E8F2FC !important;
    color: #3D5A80 !important;
    font-weight: 600 !important;
}

/* Dia selecionado */
.ui-datepicker-calendar td.ui-datepicker-current-day span,
.ui-datepicker-calendar td.ui-datepicker-current-day a,
.ui-datepicker-calendar td a.ui-state-active,
.ui-datepicker-calendar td span.ui-state-active {
    background-color: #3D5A80 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

/* Dias de outros meses */
.ui-datepicker-calendar td.ui-datepicker-other-month span,
.ui-datepicker-calendar td.ui-datepicker-other-month a {
    color: #B8C5D6 !important;
}

/* Dias desabilitados */
.ui-datepicker-calendar td.ui-state-disabled span {
    color: #D0D9E6 !important;
    cursor: not-allowed !important;
}

/* Seletores de mês e ano */
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    background-color: #FFFFFF !important;
    border: 1px solid #D8E0EC !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 0.875rem !important;
    color: #2D3E52 !important;
    margin: 0 4px !important;
    cursor: pointer !important;
}

.ui-datepicker select.ui-datepicker-month:focus,
.ui-datepicker select.ui-datepicker-year:focus {
    border-color: #4A6B94 !important;
    outline: none !important;
}

/* Barra de botões (Hoje/Limpar) */
.ui-datepicker-buttonbar {
    border-top: 1px solid #EEF2F7 !important;
    padding: 12px 0 0 0 !important;
    margin-top: 12px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.ui-datepicker-buttonbar .ui-button {
    height: 34px !important;
    padding: 0 16px !important;
    font-size: 0.813rem !important;
    border-radius: 6px !important;
}

.ui-datepicker-buttonbar .ui-datepicker-current {
    background-color: #FFFFFF !important;
    border: 1px solid #D8E0EC !important;
    color: #3D5A80 !important;
}

.ui-datepicker-buttonbar .ui-datepicker-current:hover {
    background-color: #F5F8FC !important;
    border-color: #C8D4E3 !important;
}

/* TimePicker */
.ui-datepicker .ui-timepicker {
    border-top: 1px solid #EEF2F7 !important;
    padding: 12px 0 0 0 !important;
    margin-top: 12px !important;
}

.ui-datepicker .ui-timepicker > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.ui-datepicker .ui-timepicker .ui-separator {
    color: #5A6B82 !important;
    font-weight: 600 !important;
}

.ui-datepicker .ui-timepicker .ui-picker-up,
.ui-datepicker .ui-timepicker .ui-picker-down {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background-color: #F5F8FC !important;
    border: 1px solid #E3E8F0 !important;
    color: #5A6B82 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.ui-datepicker .ui-timepicker .ui-picker-up:hover,
.ui-datepicker .ui-timepicker .ui-picker-down:hover {
    background-color: #E8EDF3 !important;
    border-color: #D0D9E6 !important;
    color: #3D5A80 !important;
}

.ui-datepicker .ui-timepicker input {
    width: 40px !important;
    height: 32px !important;
    text-align: center !important;
    border: 1px solid #D8E0EC !important;
    border-radius: 6px !important;
    font-size: 0.9rem !important;
    color: #2D3E52 !important;
}

.ui-datepicker .ui-timepicker input:focus {
    border-color: #4A6B94 !important;
    outline: none !important;
}

/* Múltiplos meses */
.ui-datepicker-multiple-month .ui-datepicker-group {
    border-right: 1px solid #EEF2F7 !important;
    padding-right: 16px !important;
    margin-right: 16px !important;
}

.ui-datepicker-multiple-month .ui-datepicker-group:last-child {
    border-right: none !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
}

/* ===================================
   CAMPOS DE FORMULÁRIO
   =================================== */
.field {
    margin-bottom: 16px;
}

.field:last-child {
    margin-bottom: 0;
}

/* ===================================
   AVATAR
   =================================== */
.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #E8F2FC;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3D5A80;
    flex-shrink: 0;
}

.avatar-circle-sm {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
}

.avatar-circle-lg {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
}

/* ===================================
   INFO BOX
   =================================== */
.info-box {
    background-color: #E8F2FC;
    border-radius: 8px;
    padding: 12px 16px;
    color: #1E4E8C;
    font-size: 0.875rem;
    line-height: 1.5;
}

.info-box-success {
    background-color: #EDF3E8;
    color: #4A6B3D;
}

.info-box-warning {
    background-color: #FEF4E6;
    color: #8B5A00;
}

.info-box-danger {
    background-color: #FEE8E7;
    color: #9B2C2C;
}

/* ===================================
   RESULT CARD (Card de Destaque)
   =================================== */
.result-card {
    background-color: #FFFFFF;
    border-radius: 14px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(20, 40, 70, 0.08);
    border: 1px solid #E3E8F0;
}

.result-card-icon {
    font-size: 56px;
    color: #03A9F4;
    margin-bottom: 16px;
}

.result-card-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #5A6B82;
    margin-bottom: 8px;
}

.result-card-value {
    font-size: 3rem;
    font-weight: 700;
    color: #03A9F4;
    margin: 12px 0;
    line-height: 1;
}

.result-card-description {
    font-size: 0.875rem;
    color: #6B7A90;
}

/* ===================================
   SUMMARY CARD (Card de Resumo)
   =================================== */
.summary-card {
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(20, 40, 70, 0.06);
    border: 1px solid #EEF2F7;
}

.summary-card-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6B7A90;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
    text-transform: uppercase;
}

.summary-item {
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #3D4E63;
}

.summary-item:last-child {
    margin-bottom: 0;
}

/* ===================================
   COLOR BADGE
   =================================== */
.color-badge {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    vertical-align: middle;
}

/* ===================================
   LOADING DIALOG
   =================================== */
.loading-dialog {
    border-radius: 14px !important;
}

.loading-dialog .ui-dialog-titlebar {
    display: none !important;
}

.loading-dialog .ui-dialog-content {
    background: #FFFFFF !important;
    border-radius: 14px !important;
    padding: 0 !important;
}

.loading-content {
    text-align: center;
    padding: 32px;
    background: #FFFFFF;
    border-radius: 12px;
}

.loading-spinner {
    font-size: 48px;
    color: #3D5A80;
}

.loading-text {
    margin-top: 16px;
    color: #5A6B82;
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* ===================================
   DIALOG CONTENT/FOOTER
   =================================== */
.dialog-content {
    padding: 8px;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #EEF2F7;
}

/* ===================================
   TABLE COMPACT
   =================================== */
.table-compact .ui-datatable-thead > tr > th {
    padding: 10px 14px !important;
    font-size: 0.7rem;
}

.table-compact .ui-datatable-data > tr > td {
    padding: 10px 14px !important;
    font-size: 0.85rem;
}

/* ===================================
   UTILITÁRIOS DE TEXTO
   =================================== */
.text-danger {
    color: #C53030 !important;
}

.text-success {
    color: #658950 !important;
}

.text-warning {
    color: #B7791F !important;
}

.text-info {
    color: #03A9F4 !important;
}

/* ===================================
   UTILITÁRIOS DE LAYOUT
   =================================== */
.h-full {
    height: 100%;
}

.w-full {
    width: 100%;
}

.gap-1 {
    gap: 4px;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.gap-4 {
    gap: 16px;
}

/* ===================================
   WIZARD / STEPPER
   Componentes para fluxos em etapas
   =================================== */

/* Container do Steps */
.steps-container {
    margin-bottom: 24px;
}

.custom-steps .ui-steps-item .ui-menuitem-link {
    background: transparent !important;
}

/* Step Content - Container de cada etapa */
.step-content {
    background-color: #F8FAFC;
    border: 1px solid #E3E8F0;
    border-radius: 12px;
    padding: 24px;
}

/* Cabeçalho da etapa */
.step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E3E8F0;
}

.step-header-icon {
    color: #3D5A80;
    font-size: 20px;
}

.step-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1F2A44;
    margin: 0;
}

/* Botões de navegação do wizard */
.navigation-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #E3E8F0;
}

/* ===================================
   RESPONSIVIDADE
   =================================== */
@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .page-header-actions {
        justify-content: flex-start;
    }

    .filter-form {
        flex-direction: column;
    }

    .filter-group {
        min-width: 100%;
    }

    .card-body,
    .ui-panel-content {
        padding: 16px;
    }

    .ui-datatable .ui-datatable-thead > tr > th,
    .ui-datatable .ui-datatable-data > tr > td {
        padding: 12px 14px !important;
    }

    .empty-state {
        padding: 40px 20px;
    }

    .empty-state-icon {
        font-size: 48px;
    }

    .ui-dialog {
        width: 95% !important;
        max-width: none !important;
    }

    /* Wizard responsivo */
    .navigation-buttons {
        flex-direction: column;
        gap: 16px;
    }

    .navigation-buttons > div {
        width: 100%;
    }

    .navigation-buttons .btn-primary,
    .navigation-buttons .btn-secondary {
        width: 100%;
    }

    .step-content {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 1.15rem;
    }

    .page-subtitle {
        font-size: 0.813rem;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .ui-paginator {
        flex-wrap: wrap;
        gap: 6px;
    }

    .ui-paginator .ui-paginator-current {
        width: 100%;
        text-align: center;
        margin: 0 0 8px 0;
    }
}

/* ===================================
   SELECT ONE BUTTON
   =================================== */
.ui-selectonebutton {
    border-radius: 8px !important;
    overflow: hidden;
}

.ui-selectonebutton .ui-button {
    background: #FFFFFF !important;
    border: 1px solid #DCE4F0 !important;
    color: #5A6B82 !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}

.ui-selectonebutton .ui-button:hover {
    background: #F8F9FA !important;
    border-color: #3D5A80 !important;
    color: #3D5A80 !important;
}

.ui-selectonebutton .ui-button.ui-state-active {
    background: #3D5A80 !important;
    border-color: #3D5A80 !important;
    color: #FFFFFF !important;
}

.ui-selectonebutton .ui-button.ui-state-active:hover {
    background: #4A6B94 !important;
    border-color: #4A6B94 !important;
}
/* ===================================
   Usability helper blocks
   =================================== */
.context-hint-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid #d9e4f4;
    border-radius: 10px;
    background: #f6faff;
    color: #314968;
    font-size: 0.86rem;
    line-height: 1.45;
}

.context-hint-box > i {
    color: #3d5a80;
    margin-top: 2px;
}

.context-hint-box strong {
    color: #243854;
}

.context-hint-actions {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wizard-orientacao {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid #d8e3f4;
    border-radius: 10px;
    background: #f5f9ff;
    color: #2f4668;
    padding: 10px 12px;
    font-size: 0.85rem;
    line-height: 1.45;
}

.wizard-orientacao i {
    color: #3d5a80;
    margin-top: 2px;
}

@media (max-width: 768px) {
    .context-hint-box {
        padding: 10px;
    }

    .context-hint-actions {
        width: 100%;
    }
}