/*
    ═══════════════════════════════════════════════════════════════════════════════
    📄 DOCUMENTAÇÃO COMPLETA DISPONÍVEL
    ═══════════════════════════════════════════════════════════════════════════════

    📍 Localização: Documentacao/CSS/frotix.css.md
    📅 Última Atualização: 09/06/2026
    📋 Versão: 3.0 (Seções canônicas 00–95)

    Estilos globais reutilizáveis. CSS de página única → wwwroot/css/pages/
    ═══════════════════════════════════════════════════════════════════════════════
*/


/* ÍNDICE DE SEÇÕES (frotix.css v3.0) */
/*   00  FOUNDATIONS          — linha ~29 */
/*   10  ANIMATIONS           — linha ~106 */
/*   20  FORMS                — linha ~538 */
/*   30  BUTTONS              — linha ~1043 */
/*   40  CARDS & HEADERS      — linha ~2588 */
/*   50  MODALS               — linha ~2853 */
/*   60  TABLES               — linha ~3713 */
/*   70  TOOLTIPS             — linha ~4403 */
/*   80  NAVIGATION           — linha ~4621 */
/*   90  EFFECTS              — linha ~4753 */
/*   95  VENDOR PATCHES       — linha ~5447 */
/*   pages/  CSS de página → wwwroot/css/pages/ */

/* =============================================================================
   00 FOUNDATIONS — Reset, @import, :root e tokens globais
   ============================================================================= */

/* 00.1 Reset e @import */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* 00.2 Variáveis CSS (:root unificado) */
:root {
  /* Motor do Glow (botões) */
  --glow-ring: 1px;
  --glow-spread: 4px;
  --glow-depth: 8px;
  /* Paleta para Status (centralizado no Global) */
  --status-active-bg: #22c55e; /* Verde "ok" */
  --status-active-bg-hover: #16a34a;
  --status-active-shadow: rgba(34, 197, 94, 0.45);
  --status-inactive-bg: #2f4f4f; /* Cinza tema */
  --status-inactive-bg-hover: #253a3a;
  --status-inactive-shadow: rgba(47, 79, 79, 0.45);
  /* Botões em tabela */
  --ftx-icon-btn: 28px;
  --ftx-badge-font: 0.72rem;
  --ftx-badge-pad-v: 0.18rem; /* vertical */
  --ftx-badge-pad-h: 0.5rem; /* horizontal */
  --ftx-badge-radius: 0.65rem;
  --ftx-avatar: 32px;
  --ftx-action-icon: 0.9rem; /* tamanho do ícone nos botões quadrados */
  /* Altura padrão dos controles de formulário */
  --ftx-input-height: 38px;
  --ftx-placeholder-color: #A3ACB5;
  --ftx-petrol-header: #325d88;
  --ftx-petrol-soft-start: #587794;
  --ftx-petrol-soft-end: #6f89a2;
  --ftx-petrol-soft-strong: #4f6f8d;
  --ftx-petrol-soft-bg: rgba(50, 93, 136, 0.1);
  --ftx-petrol-soft-border: rgba(50, 93, 136, 0.28);
  /* Headers de Modal */
  --modal-vinho: #722f37;
  --modal-vinho-light: #8b3a44;
  --modal-azul: #aa9183;
  --modal-azul-light: #b9a092;
  --modal-terracota: #a97b6e;
  --modal-terracota-light: #c08b7e;
  --modal-verde: #557570;
  --modal-verde-light: #6a8a85;
  --modal-dinheiro: #3d4a3d;
  --modal-dinheiro-light: #4a5a4a;
  /* Sombras de Modal */
  --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --modal-shadow-hover: 0 30px 60px -15px rgba(0, 0, 0, 0.3);
}

/* 00.3 Campos obrigatórios */
/* O padrão único é .ftx-required (ver "LABEL DE CAMPO OBRIGATÓRIO" mais abaixo).
   A variante legada .label-required foi removida daqui depois que todos os labels
   do projeto migraram: mantê-la deixava um segundo asterisco possível, com tamanho
   e alinhamento diferentes do padrão. */

/* 00.4 Base do documento */
body {
  background: #f0f0f0;
  padding: 0px;
}

/* =============================================================================
   10 ANIMATIONS — Biblioteca única de @keyframes
   ============================================================================= */

/* 10.1 Biblioteca @keyframes (duplicatas removidas — última definição vence) */

/* ftxspin */
@keyframes ftxspin {
  to {
    transform: rotate(360deg);
  }
}

/* spin */
@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* pulseIcon */
@keyframes pulseIcon {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

/* spinLeft */
@keyframes spinLeft {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-360deg);
  }
}

/* pulse */
@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

/* fadeSlideIn */
@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateX(15px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* highlight */
@keyframes highlight {
  0% {
    background-color: #fff3cd;
  }

  100% {
    background-color: transparent;
  }
}

/* floatSoft */
@keyframes floatSoft {
  0% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-2px) rotate(-1deg);
  }

  100% {
    transform: translateY(0) rotate(0);
  }
}

/* slowSpin */
@keyframes slowSpin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(1turn);
  }
}

/* slideInRight */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* slideDown */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* slideUp */
@keyframes slideUp {
  from {
    opacity: 1;
    max-height: 200px;
  }

  to {
    opacity: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
  }
}

/* buttonWiggle */
@keyframes buttonWiggle {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  25% {
    transform: translateY(-2px) rotate(-1deg);
  }

  50% {
    transform: translateY(-3px) rotate(0deg);
  }

  75% {
    transform: translateY(-2px) rotate(1deg);
  }

  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* ftxPulse */
@keyframes ftxPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

/* ftxSpinReverse */
@keyframes ftxSpinReverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

/* ftxHeaderGradientShift */
@keyframes ftxHeaderGradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ftxHeaderShine */
@keyframes ftxHeaderShine {
  0%,
  100% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
}

/* ftxHeaderBtnIconPulse */
@keyframes ftxHeaderBtnIconPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

/* fadeIn */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ftxIconSpin */
@keyframes ftxIconSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/* slideInFromTop */
@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* slideOutToTop */
@keyframes slideOutToTop {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* modalSlideIn */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ftxModalSlideIn */
@keyframes ftxModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ftxIconShake */
@keyframes ftxIconShake {
  0%,
  100% {
    transform: translateX(0) rotate(0);
  }
  15% {
    transform: translateX(-2px) rotate(-3deg);
  }
  30% {
    transform: translateX(2px) rotate(3deg);
  }
  45% {
    transform: translateX(-1px) rotate(-2deg);
  }
  60% {
    transform: translateX(1px) rotate(2deg);
  }
  75%,
  100% {
    transform: translateX(0) rotate(0);
  }
}

/* ftxBadgePulse */
@keyframes ftxBadgePulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* ftxHeaderIconPulse */
@keyframes ftxHeaderIconPulse {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
  }
}

/* ftxModalShine */
@keyframes ftxModalShine {
  0%,
  100% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
}

/* ftxHeaderGradient */
@keyframes ftxHeaderGradient {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ftxLoadingIconPulse */
@keyframes ftxLoadingIconPulse {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }
  50% {
    transform: scale(1.12);
    filter: drop-shadow(0 3px 6px rgba(255, 215, 0, 0.4));
  }
}

/* ftxLogoPulse */
@keyframes ftxLogoPulse {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 4px 8px rgba(50, 93, 136, 0.3));
  }
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 6px 12px rgba(50, 93, 136, 0.5));
  }
}

/* ftxBarSlide */
@keyframes ftxBarSlide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(350%);
  }
}

/* ftxRippleAnim */
@keyframes ftxRippleAnim {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* =============================================================================
   20 FORMS — Inputs, selects, textareas, switches/checkboxes
   ============================================================================= */

/* 20.3 Switches / Checkboxes — bloco 1 (preservado) */
/* SWITCH GLOBAL PARA CHECKBOXES (FROTIX)
   Preserva o binding Razor/asp-for porque altera apenas o visual.
   Exceção técnica: .ftx-switch-ignore (ex.: checkbox hack do shortcut menu).
   ================================================================ */
.ftx-switch-ignore {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
}

input[type="checkbox"]:not(.ftx-switch-ignore),
.form-check-input[type="checkbox"]:not(.ftx-switch-ignore),
.custom-control-input[type="checkbox"]:not(.ftx-switch-ignore) {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #94a3b8, #cbd5e1) !important;
  position: relative !important;
  cursor: pointer !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.25s ease !important;
  vertical-align: middle !important;
  background-image: none !important;
  outline: none !important;
}

input[type="checkbox"]:not(.ftx-switch-ignore)::after,
.form-check-input[type="checkbox"]:not(.ftx-switch-ignore)::after,
.custom-control-input[type="checkbox"]:not(.ftx-switch-ignore)::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  transition: transform 0.25s ease;
}

input[type="checkbox"]:not(.ftx-switch-ignore):checked,
.form-check-input[type="checkbox"]:not(.ftx-switch-ignore):checked,
.custom-control-input[type="checkbox"]:not(.ftx-switch-ignore):checked {
  background: linear-gradient(135deg, #f7c08a, #f0ad6a) !important;
}

input[type="checkbox"]:not(.ftx-switch-ignore):checked::after,
.form-check-input[type="checkbox"]:not(.ftx-switch-ignore):checked::after,
.custom-control-input[type="checkbox"]:not(.ftx-switch-ignore):checked::after {
  background: #c05621;
  transform: translateX(22px);
}

input[type="checkbox"]:not(.ftx-switch-ignore):hover,
.form-check-input[type="checkbox"]:not(.ftx-switch-ignore):hover,
.custom-control-input[type="checkbox"]:not(.ftx-switch-ignore):hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) !important;
}

input[type="checkbox"]:not(.ftx-switch-ignore):focus,
.form-check-input[type="checkbox"]:not(.ftx-switch-ignore):focus,
.custom-control-input[type="checkbox"]:not(.ftx-switch-ignore):focus {
  box-shadow: 0 0 0 0.2rem rgba(61, 87, 113, 0.22) !important;
}

input[type="checkbox"]:not(.ftx-switch-ignore):disabled,
.form-check-input[type="checkbox"]:not(.ftx-switch-ignore):disabled,
.custom-control-input[type="checkbox"]:not(.ftx-switch-ignore):disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
}

.form-check,
.custom-control.custom-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.custom-control.custom-checkbox {
  min-height: auto !important;
  padding-left: 0 !important;
}

.form-check .form-check-input,
.custom-control.custom-checkbox .custom-control-input {
  float: none !important;
  flex: 0 0 auto;
}

.custom-control.custom-checkbox .custom-control-input {
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
}

.form-check .form-check-label,
.custom-control.custom-checkbox .custom-control-label {
  margin-bottom: 0 !important;
  padding-left: 0 !important;
}

.custom-control.custom-checkbox .custom-control-label::before,
.custom-control.custom-checkbox .custom-control-label::after {
  display: none !important;
  content: none !important;
}

body .e-checkbox-wrapper,
body .e-css.e-checkbox-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

body .e-checkbox-wrapper .e-frame,
body .e-css.e-checkbox-wrapper .e-frame {
  width: 46px !important;
  min-width: 46px !important;
  height: 24px !important;
  min-height: 24px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #94a3b8, #cbd5e1) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  padding: 0 !important;
  transition: all 0.25s ease !important;
}

body .e-checkbox-wrapper .e-frame::after,
body .e-css.e-checkbox-wrapper .e-frame::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  transition: transform 0.25s ease;
}

body .e-checkbox-wrapper .e-frame.e-check,
body .e-css.e-checkbox-wrapper .e-frame.e-check {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
}

body .e-checkbox-wrapper .e-frame.e-check::after,
body .e-css.e-checkbox-wrapper .e-frame.e-check::after {
  transform: translateX(22px);
}

body .e-checkbox-wrapper .e-check::before,
body .e-css.e-checkbox-wrapper .e-check::before {
  display: none !important;
  content: none !important;
}

body .e-checkbox-wrapper .e-label,
body .e-css.e-checkbox-wrapper .e-label {
  margin-left: 0 !important;
}

/* 20.3 Switches / Checkboxes — bloco 2 (cascata vencedora) */
/* CHECKBOXES GLOBAIS → SWITCH FROTIX
   Mantém binding Razor/ASP.NET intacto ao estilizar os inputs nativos.
   ================================================================ */
input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open),
.form-check-input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open),
.custom-control-input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open) {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 50px !important;
  min-width: 50px !important;
  height: 26px !important;
  margin-top: 0 !important;
  margin-right: 0.55rem !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #94a3b8, #cbd5e1) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  left: auto !important;
  transition: all 0.25s ease !important;
}

input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open)::before,
.form-check-input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open)::before,
.custom-control-input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open)::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s ease;
}

input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open):checked,
.form-check-input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open):checked,
.custom-control-input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open):checked {
  border-color: #e8a25a !important;
  background: linear-gradient(135deg, #f7c08a, #f0ad6a) !important;
}

input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open):checked::before,
.form-check-input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open):checked::before,
.custom-control-input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open):checked::before {
  background: #c05621;
  transform: translateX(24px);
}

input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open):focus,
.form-check-input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open):focus,
.custom-control-input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open):focus {
  border-color: #3d5771 !important;
  box-shadow: 0 0 0 0.2rem rgba(61, 87, 113, 0.2) !important;
}

input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open):disabled,
.form-check-input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open):disabled,
.custom-control-input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open):disabled {
  cursor: not-allowed !important;
  opacity: 0.65 !important;
}

/* 20.3.1 EXCEÇÃO — Syncfusion Toggle Switch (ejs-switch)
   O EJ2 Switch usa um <input type="checkbox"> interno que deve permanecer
   invisível sobre o trilho. Sem esta exceção as regras globais acima o
   transformam em um segundo switch, sobrepondo o controle real.
   ================================================================ */
.e-switch-wrapper input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open),
.e-css.e-switch-wrapper input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open) {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  z-index: 2 !important;
  cursor: pointer !important;
}

.e-switch-wrapper input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open)::before,
.e-switch-wrapper input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open)::after,
.e-css.e-switch-wrapper input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open)::before,
.e-css.e-switch-wrapper input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open)::after {
  display: none !important;
  content: none !important;
}

/* 20.3.2 PADRÃO OFICIAL FROTIX — Syncfusion Toggle Switch (ejs-switch)
   Controle booleano oficial do sistema. Aplicado globalmente para que
   nenhuma página precise redefinir cores.
   Trilho ligado  : #f7c08a (laranja claro)
   Bola ligada    : #c05621 (laranja escuro)
   Estado desligado: cinza
   A classe .ftx-switch-laranja existe apenas como apelido explícito.
   ================================================================ */
.e-switch-wrapper .e-switch-inner,
.e-switch-wrapper .e-switch-off,
.e-css.e-switch-wrapper .e-switch-inner,
.e-css.e-switch-wrapper .e-switch-off {
  background-color: #e9edf1 !important;
  border-color: #cfd6de !important;
  color: transparent !important;
}

.e-switch-wrapper .e-switch-inner.e-switch-active,
.e-switch-wrapper .e-switch-on,
.e-css.e-switch-wrapper .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper .e-switch-on {
  background-color: #f7c08a !important;
  border-color: #e8a25a !important;
  color: transparent !important;
}

.e-switch-wrapper .e-switch-handle,
.e-css.e-switch-wrapper .e-switch-handle {
  background-color: #b9c2cc !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22) !important;
}

.e-switch-wrapper .e-switch-handle.e-switch-active,
.e-css.e-switch-wrapper .e-switch-handle.e-switch-active {
  background-color: #c05621 !important;
}

.e-switch-wrapper:hover .e-switch-inner,
.e-switch-wrapper:hover .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper:hover .e-switch-inner,
.e-css.e-switch-wrapper:hover .e-switch-inner.e-switch-active {
  border-color: #c05621 !important;
}

.e-switch-wrapper .e-switch:focus + .e-switch-inner,
.e-css.e-switch-wrapper .e-switch:focus + .e-switch-inner {
  box-shadow: 0 0 0 0.2rem rgba(192, 86, 33, 0.25) !important;
  outline: none !important;
}

.e-switch-wrapper.e-switch-disabled,
.e-css.e-switch-wrapper.e-switch-disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
}

/* Agrupador padrão: switch + rótulo lado a lado */
.ftx-switch-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ftx-switch-field label {
  margin-bottom: 0;
  font-weight: normal;
  color: #495057;
  cursor: pointer;
}

.form-check:has(> input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open)),
.custom-control:has(> input[type="checkbox"]:not(.ftx-switch-ignore):not(.menu-open)) {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.form-check-label,
.custom-control-label {
  font-weight: 600;
  color: #2d3748;
}

.e-checkbox-wrapper,
.e-css.e-checkbox-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
}

.e-checkbox-wrapper .e-frame,
.e-css.e-checkbox-wrapper .e-frame {
  width: 50px !important;
  min-width: 50px !important;
  height: 26px !important;
  border-radius: 999px !important;
  border: 1px solid #94a3b8 !important;
  background: linear-gradient(135deg, #94a3b8, #cbd5e1) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  transition: all 0.25s ease !important;
}

.e-checkbox-wrapper .e-frame::before,
.e-css.e-checkbox-wrapper .e-frame::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s ease;
}

.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
  border-color: #16a34a !important;
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
}

.e-checkbox-wrapper .e-frame.e-check::before,
.e-css.e-checkbox-wrapper .e-frame.e-check::before {
  transform: translateX(24px);
}

.e-checkbox-wrapper .e-check::before,
.e-css.e-checkbox-wrapper .e-check::before,
.e-checkbox-wrapper .e-frame.e-check .e-icons,
.e-css.e-checkbox-wrapper .e-frame.e-check .e-icons {
  color: transparent !important;
}

.e-checkbox-wrapper .e-label,
.e-css.e-checkbox-wrapper .e-label {
  font-weight: 600 !important;
  color: #2d3748 !important;
}
/* ================================================================
   CONTROLES DE FORMULÁRIO - ALTURA PADRÃO 38px (GLOBAL FROTIX)
   Aplica altura uniforme a todos os inputs, selects e textareas
   ================================================================ */
.form-control,
.form-control-xs,
.form-select {
  height: var(--ftx-input-height) !important;
  min-height: var(--ftx-input-height) !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  border-radius: 0.375rem;
}

/*
   Os wrappers do Syncfusion usam o próprio input e o ícone para ocupar a
   altura interna. Aplicar padding no wrapper reduz a caixa de conteúdo e,
   combinado com a altura fixa do input, faz os filhos cobrirem as bordas
   superior e inferior. O espaçamento pertence ao input, não ao wrapper.
*/
.e-input-group.e-control-wrapper,
.e-ddl.e-input-group,
.e-dropdowntree .e-input-group {
  height: var(--ftx-input-height) !important;
  min-height: var(--ftx-input-height) !important;
  padding: 0 !important;
  font-size: 0.875rem !important;
  border-radius: 0.375rem;
  box-sizing: border-box !important;
}

/* Garantir que todas as bordas dos dropdowntree apareçam */
.e-dropdowntree .e-input-group,
.e-dropdowntree.e-control-wrapper .e-input-group,
ejs-dropdowntree .e-input-group,
.e-dropdowntree .e-ddt,
.e-dropdowntree.e-control-wrapper .e-ddt {
  border: 1px solid #ced4da !important;
  border-top: 1px solid #ced4da !important;
  border-bottom: 1px solid #ced4da !important;
  border-left: 1px solid #ced4da !important;
  border-right: 1px solid #ced4da !important;
}

/* Garantir que todas as bordas dos datepickers apareçam */
.e-datepicker.e-input-group,
.e-datepicker.e-control-wrapper,
.e-date-wrapper.e-control-wrapper,
.e-timepicker.e-control-wrapper,
ejs-datepicker.e-control-wrapper,
.e-input-group.e-control-wrapper.e-date-wrapper,
.e-input-group.e-control-wrapper.e-datepicker {
  border: 1px solid #ced4da !important;
  border-top: 1px solid #ced4da !important;
  border-bottom: 1px solid #ced4da !important;
  border-left: 1px solid #ced4da !important;
  border-right: 1px solid #ced4da !important;
  border-radius: 0.375rem !important;
  box-sizing: border-box !important;
}

/* ================================================================
   ALINHAMENTO VERTICAL CENTRALIZADO (GLOBAL FROTIX)
   Centraliza verticalmente o texto em todos os controles
   ================================================================ */

/* Selects nativos HTML - usa line-height para centralizar */
.form-select,
select.form-control {
  line-height: 38px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Inputs de texto nativos - centraliza com padding balanceado */
input.form-control:not(.e-input),
textarea.form-control {
  line-height: 1.5 !important;
}



input::placeholder,
textarea::placeholder,
select::placeholder,
.form-control::placeholder,
.form-select::placeholder,
.k-input::placeholder,
.k-picker::placeholder,
.k-input-inner::placeholder,
.k-textarea::placeholder,
.swal2-input::placeholder,
.swal2-file::placeholder,
.swal2-textarea::placeholder,
input.e-input::placeholder,
textarea.e-input::placeholder,
.e-input-group input.e-input::placeholder,
.e-ddl.e-input-group input.e-input::placeholder,
.e-combobox.e-input-group input.e-input::placeholder,
.e-control-wrapper input.e-input::placeholder,
.e-multi-select-wrapper input.e-dropdownbase::placeholder {
  color: var(--ftx-placeholder-color) !important;
  opacity: 1 !important;
}

/* ================================================================
   SYNCFUSION COMBOBOX/DROPDOWN - CENTRALIZAÇÃO VERTICAL
   Corrige alinhamento de placeholder e texto selecionado
   ================================================================ */

/* Wrapper do Syncfusion - garante altura e layout */
.e-input-group.e-control-wrapper,
.e-ddl.e-input-group.e-control-wrapper,
.e-combobox.e-input-group.e-control-wrapper {
  height: var(--ftx-input-height) !important;
  min-height: var(--ftx-input-height) !important;
  display: flex !important;
  align-items: center !important;
}

/*
   O tema Bootstrap do Syncfusion aplica a borda dos ComboBox/DropDownList
   no wrapper. A borda deve pertencer ao wrapper, nunca ao input interno.

   Esta regra é global para todos os controles Syncfusion baseados em
   `.e-input-group`, incluindo ComboBox, DropDownList, MultiSelect, DatePicker,
   TimePicker e NumericTextBox. Assim, qualquer lista nova do FrotiX herda o
   mesmo contorno completo sem depender de CSS específico da página.
*/
.e-input-group.e-control-wrapper,
.e-ddl.e-input-group,
.e-combobox.e-input-group,
.e-multiselect.e-input-group,
.e-multi-select-wrapper,
.e-datepicker.e-input-group,
.e-timepicker.e-input-group,
.e-numerictextbox.e-input-group {
  border: 1px solid #ced4da !important;
  border-top: 1px solid #ced4da !important;
  border-bottom: 1px solid #ced4da !important;
  border-left: 1px solid #ced4da !important;
  border-right: 1px solid #ced4da !important;
  border-radius: 0.375rem !important;
  box-sizing: border-box !important;
}

/* O foco continua alterando a borda externa, sem criar uma segunda caixa. */
.e-input-group.e-control-wrapper:focus-within,
.e-ddl.e-input-group:focus-within,
.e-combobox.e-input-group:focus-within,
.e-multiselect.e-input-group:focus-within,
.e-multi-select-wrapper:focus-within,
.e-datepicker.e-input-group:focus-within,
.e-timepicker.e-input-group:focus-within,
.e-numerictextbox.e-input-group:focus-within {
  border-color: #3d5771 !important;
}

/* Input do Syncfusion - centralização forçada */
.e-input-group input.e-input,
.e-ddl.e-input-group input.e-input,
.e-combobox.e-input-group input.e-input,
.e-dropdownbase input.e-input,
.e-input-group.e-control-wrapper input.e-input,
.e-control-wrapper input.e-input {
  height: calc(var(--ftx-input-height) - 2px) !important;
  min-height: calc(var(--ftx-input-height) - 2px) !important;
  line-height: normal !important;
  padding: 0 0.75rem !important;
  vertical-align: middle !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* O ícone deve respeitar o espaço interno sem ultrapassar as bordas. */
.e-input-group.e-control-wrapper > .e-input-group-icon,
.e-input-group.e-control-wrapper > .e-ddl-icon,
.e-ddl.e-input-group > .e-input-group-icon,
.e-ddl.e-input-group > .e-ddl-icon,
.e-multiselect.e-input-group > .e-input-group-icon,
.e-multi-select-wrapper > .e-input-group-icon {
  height: calc(var(--ftx-input-height) - 2px) !important;
  min-height: calc(var(--ftx-input-height) - 2px) !important;
  box-sizing: border-box !important;
}

/* Placeholder do Syncfusion - centralizado */
.e-input-group input.e-input::placeholder,
.e-ddl.e-input-group input.e-input::placeholder,
.e-combobox.e-input-group input.e-input::placeholder,
.e-control-wrapper input.e-input::placeholder {
  color: var(--ftx-placeholder-color) !important;
  opacity: 1 !important;
  vertical-align: middle !important;
}

/* Foco nos controles */
:root {
  --ftx-field-background: #ffffff;
  --ftx-field-focus-background: #e3eef3;
  --ftx-field-selection-background: #c8dde7;
  --ftx-field-selection-color: #1f3b4d;
}

/* Botões com `form-control` (usado só para largura 100%) não são campos:
   ficam fora das regras de fundo de campo para manter a cor do botão. */
.form-control:not(.btn):focus,
.form-control-xs:not(.btn):focus,
.form-select:focus {
  border-color: #3d5771;
  background-color: var(--ftx-field-focus-background) !important;
  color: var(--ftx-field-selection-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(61, 87, 113, 0.25);
}

/* Syncfusion: o foco fica no wrapper, não necessariamente no input interno. */
.e-input-group.e-input-focus,
.e-input-group.e-control-wrapper.e-input-focus,
.e-control-wrapper.e-input-focus,
.e-input-group:focus-within,
.e-control-wrapper:focus-within {
  border-color: #3d5771 !important;
  background-color: var(--ftx-field-focus-background) !important;
  box-shadow: 0 0 0 0.2rem rgba(61, 87, 113, 0.25) !important;
}

.e-input-group.e-input-focus .e-input,
.e-input-group:focus-within .e-input,
.e-control-wrapper:focus-within .e-input {
  background-color: transparent !important;
  color: var(--ftx-field-selection-color) !important;
}

/* Campos sem foco permanecem brancos; o azul-petróleo claro é reservado ao foco. */
.form-control:not(.btn):not(:focus),
.form-control-xs:not(.btn):not(:focus),
.form-select:not(:focus),
.e-input-group:not(.e-input-focus):not(:focus-within),
.e-control-wrapper:not(.e-input-focus):not(:focus-within),
.e-input-group:not(.e-input-focus):not(:focus-within) .e-input,
.e-control-wrapper:not(.e-input-focus):not(:focus-within) .e-input,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--ftx-field-background) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  background-color: var(--ftx-field-focus-background) !important;
  border-color: #3d5771 !important;
  box-shadow: 0 0 0 0.2rem rgba(61, 87, 113, 0.25) !important;
}

/* 20.5 Kendo UI — controles habilitados com fundo branco */
.k-input:not(.k-disabled),
.k-picker:not(.k-disabled),
.k-combobox:not(.k-disabled),
.k-dropdownlist:not(.k-disabled),
.k-dateinput:not(.k-disabled),
.k-timepicker:not(.k-disabled),
.k-input-solid:not(.k-disabled),
.k-picker-solid:not(.k-disabled),
.k-input:not(.k-disabled) .k-input-inner,
.k-picker:not(.k-disabled) .k-input-inner,
.k-combobox:not(.k-disabled) .k-input-inner,
.k-dropdownlist:not(.k-disabled) .k-input-inner,
.k-dateinput:not(.k-disabled) .k-input-inner,
.k-timepicker:not(.k-disabled) .k-input-inner,
.k-input-solid:not(.k-disabled) .k-input-inner,
.k-picker-solid:not(.k-disabled) .k-input-inner,
.k-input:not(.k-disabled) .k-input-button,
.k-picker:not(.k-disabled) .k-input-button,
.k-input-solid:not(.k-disabled) .k-input-button,
.k-picker-solid:not(.k-disabled) .k-input-button {
  background-color: #fff !important;
  border-color: #ced4da !important;
  color: #495057 !important;
}

/* ================================================================
   20.6 KENDO + BOOTSTRAP — "caixa dentro de caixa"
   --------------------------------------------------------------
   PROBLEMA: o Kendo (ASP.NET Core) aplica o HtmlAttributes no <input> ORIGINAL,
   que depois vira o `.k-input-inner` DENTRO do wrapper `<span class="k-input">`.
   Quando esse HtmlAttributes traz `form-control`, o input interno passa a receber
   a regra global de formulário (altura 38px, min-height, padding e border-radius,
   seção "CONTROLES DE FORMULÁRIO" acima) MAIS a borda e o fundo do Bootstrap —
   desenhando uma SEGUNDA caixa completa dentro do widget e empurrando o botão de
   calendário/relógio para fora da área visível.

   SINTOMA: o campo aparece como um retângulo dentro de outro e o ícone some.
   Visto em Administração > Log de Erros (08/08/2026); afeta todo DatePicker,
   TimePicker, ComboBox e DropDownList do projeto declarado com `form-control`.

   ESCOPO: só `.k-input-inner` e `.k-input-button`, que só existem dentro de um
   widget Kendo. Input, select e textarea comuns não são tocados — a regra global
   de 38px continua valendo para eles, e a altura do conjunto continua sendo
   definida pelo wrapper do Kendo.
   ================================================================ */
.k-input-inner.form-control,
.k-input-inner.form-control-xs,
.k-input-inner.form-control-sm,
.k-input-inner.form-select,
.k-input-button.form-control,
.k-input-button.form-control-xs {
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 4px 8px !important;
  line-height: normal !important;
}

/* O wrapper é quem manda na altura e na borda do conjunto. Se o `form-control`
   tiver caído nele (varia com a versão do Kendo), zeramos só o padding: mantido,
   ele deslocaria o input e o botão para dentro, produzindo a mesma caixa aninhada. */
.k-datepicker.form-control,
.k-timepicker.form-control,
.k-datetimepicker.form-control,
.k-combobox.form-control,
.k-dropdownlist.form-control,
.k-datepicker.form-control-xs,
.k-timepicker.form-control-xs {
  padding: 0 !important;
}

.k-input:not(.k-disabled):hover,
.k-picker:not(.k-disabled):hover,
.k-input-solid:not(.k-disabled):hover,
.k-picker-solid:not(.k-disabled):hover {
  background-color: #fff !important;
  border-color: #b8c2cc !important;
}

.k-input.k-focus,
.k-picker.k-focus,
.k-input-solid.k-focus,
.k-picker-solid.k-focus,
.k-input:focus-within,
.k-picker:focus-within,
.k-input-solid:focus-within,
.k-picker-solid:focus-within {
  border-color: #3d5771 !important;
  background-color: var(--ftx-field-focus-background) !important;
  color: var(--ftx-field-selection-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(61, 87, 113, 0.25) !important;
}

/* O input Kendo é interno ao wrapper: herda apenas as cores, sem segunda borda. */
.k-input.k-focus .k-input-inner,
.k-picker.k-focus .k-input-inner,
.k-input-solid.k-focus .k-input-inner,
.k-picker-solid.k-focus .k-input-inner,
.k-input:focus-within .k-input-inner,
.k-picker:focus-within .k-input-inner,
.k-input-solid:focus-within .k-input-inner,
.k-picker-solid:focus-within .k-input-inner {
  background-color: var(--ftx-field-focus-background) !important;
  color: var(--ftx-field-selection-color) !important;
}

/* Botões que fazem parte do mesmo campo Kendo seguem o foco do wrapper. */
.k-input.k-focus .k-input-button,
.k-picker.k-focus .k-input-button,
.k-input-solid.k-focus .k-input-button,
.k-picker-solid.k-focus .k-input-button,
.k-input:focus-within .k-input-button,
.k-picker:focus-within .k-input-button,
.k-input-solid:focus-within .k-input-button,
.k-picker-solid:focus-within .k-input-button {
  background-color: var(--ftx-field-focus-background) !important;
  color: var(--ftx-field-selection-color) !important;
}

/*
   Seleção de texto nos campos. O tema SmartAdmin definia ::selection em cinza
   escuro para toda a aplicação; esta regra preserva esse contraste apenas fora
   dos controles de edição e aplica o azul-petróleo leve padrão FrotiX.
*/
input::selection,
textarea::selection,
select::selection,
[contenteditable="true"]::selection,
.k-input-inner::selection,
.k-textarea::selection,
.e-input::selection,
.select2-search__field::selection,
.swal2-input::selection,
.swal2-textarea::selection {
  background-color: var(--ftx-field-selection-background) !important;
  color: var(--ftx-field-selection-color) !important;
}

input::-moz-selection,
textarea::-moz-selection,
select::-moz-selection,
[contenteditable="true"]::-moz-selection,
.k-input-inner::-moz-selection,
.k-textarea::-moz-selection,
.e-input::-moz-selection,
.select2-search__field::-moz-selection,
.swal2-input::-moz-selection,
.swal2-textarea::-moz-selection {
  background-color: var(--ftx-field-selection-background) !important;
  color: var(--ftx-field-selection-color) !important;
}

/* Itens ativos de listas customizadas mantêm o mesmo tratamento da seleção. */
.k-list-container .k-list-item.k-selected,
.k-list-container .k-list-item.k-selected:hover,
.k-list-container .k-list-item.k-selected.k-focus,
.e-popup .e-dropdownbase .e-list-item.e-active,
.e-popup .e-dropdownbase .e-list-item.e-item-focus,
.e-popup .e-listbox-wrapper .e-list-item.e-selected,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--ftx-field-selection-background) !important;
  color: var(--ftx-field-selection-color) !important;
}

/* 20.6 Textarea — altura mínima */
textarea.form-control {
  height: auto !important;
  min-height: 80px !important;
}

/* =============================================================================
   30 BUTTONS — Variantes .btn-* e botões FrotiX
   ============================================================================= */

/* ================================================================
   CLASSES UTILITÁRIAS PARA ANIMAÇÃO DE ÍCONES - PADRÃO FROTIX
   Uso: adicionar no <i> para definir comportamento de animação
   ================================================================ */

/* Ícone Girando (Spinning) - Para botões Voltar */
.ftx-icon-spin,
.icon-rotate-left {
  animation: ftxIconSpin 2s linear infinite !important;
  display: inline-block !important;
}

/* Ícone Pulsante - Para botões Adicionar */
.ftx-icon-pulse,
.icon-pulse {
  animation: ftxHeaderBtnIconPulse 1.5s ease-in-out infinite !important;
  display: inline-block !important;
}

/* ================================================================
   LABEL DE CAMPO OBRIGATÓRIO - PADRÃO FROTIX
   Uso: adicionar classe .ftx-required no <label>
   ================================================================ */

/* Asterisco vermelho após o label */
.ftx-required::after {
  content: " *";
  color: #dc3545;
  font-weight: 700;
  font-size: calc(1em - 2px); /* asterisco 2px menor que o label */
  margin-left: 2px;
}

/* Versão com ícone (alternativa) */
.ftx-required-icon::after {
  content: " \f069";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 0.6rem;
  color: #dc3545;
  margin-left: 4px;
  vertical-align: super;
}

/* Botão Vinho no Header com outline branco */
.ftx-card-header .btn-vinho {
  outline: 2px solid rgba(255, 255, 255, 0.5) !important;
  outline-offset: 1px;
  transition: all 0.2s ease;
}

.ftx-card-header .btn-vinho:hover {
  outline: 2px solid rgba(255, 255, 255, 0.85) !important;
  outline-offset: 2px;
}

/* Responsividade do Header */
@media (max-width: 768px) {
  .ftx-card-header {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
  }

  .ftx-card-header .titulo-paginas,
  .ftx-card-header h2.titulo-paginas,
  .ftx-card-header .ftx-card-title {
    font-size: 1.5rem !important;
    justify-content: center;
  }

  .ftx-card-header .titulo-paginas i,
  .ftx-card-header h2.titulo-paginas i,
  .ftx-card-header .ftx-card-title i {
    font-size: 1.75rem !important;
  }

  .ftx-card-header .ftx-card-actions {
    width: 100%;
    justify-content: center;
  }

  .ftx-card-header .btn-header-orange,
  .btn-header-orange {
    width: 100%;
    justify-content: center;
  }
}

/* ================================================================
   FORM / CONTROLS
   ================================================================ */
.form-control {
  font-size: 0.9rem;
}

label {
  margin-bottom: 0.2rem;
}

/* Rótulo padrão de campo de formulário (antes só existia em viagem-upsert.css) */
.ftx-label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #495057;
  margin-bottom: 0.35rem;
  display: block;
}

.ftx-label .text-danger {
  font-size: 0.9em;
}

.e-dropdowntree .e-input,
.e-dropdowntree.e-control-wrapper {
  min-height: 38px;
  height: 38px;
  line-height: 1.5;
  padding: 6px 12px;
  box-sizing: border-box;
}

/* ================================================================
   SWEETALERT2
   ================================================================ */
.swal2-title.titulo-erro-radioativo {
  font-family: "Rowdies", cursive;
  font-size: 26px;
  color: #d9534f;
  text-align: center;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.swal2-popup-custom {
  padding: 0 !important;
  border-radius: 6px;
  overflow: hidden;
  font-family: "Segoe UI", sans-serif;
}

.swal2-popup-custom .swal2-html-container {
  padding: 20px;
}

.swal2-footer-btn {
  background: #a4b3ff !important;
  color: #fff !important;
  width: 100%;
  font-size: 16px;
  border-radius: 0 !important;
  padding: 15px 0;
}

.swal2-popup-zero-padding {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: hidden;
  width: auto !important;
}

.swal2-container {
  background: rgba(0, 0, 0, 0.4) !important;
}

.swal2-html-container {
  padding: 0 !important;
  margin: 0 !important;
}

/* ================================================================
   BOTÕES CUSTOMIZADOS - COM GLOW E ANIMAÇÃO
   ================================================================ */
#tblViagem td:last-child,
#tblViagem td:last-child > div {
  overflow: visible !important;
}

/* Botão de fechar modal (X) - padrão global FrotiX */
.modal-content > button.btn-close-modal[data-bs-dismiss="modal"],
.modal-content > button.btn-close-modal[data-dismiss="modal"],
.modal-content :is(.modal-header, .ftx-modal-header, .dropdown-header, #Titulo) > button:is(.btn-close-modal, .btn-close, .btn-close-white, .close)[data-bs-dismiss="modal"],
.modal-content :is(.modal-header, .ftx-modal-header, .dropdown-header, #Titulo) > button:is(.btn-close-modal, .btn-close, .btn-close-white, .close)[data-dismiss="modal"] {
  padding: 0 !important;
  margin: 0 !important;
  background: linear-gradient(135deg, #a52a38 0%, #722f37 100%) !important;
  background-color: #8d2433 !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  border: 3px solid rgba(255, 255, 255, 0.95) !important;
  opacity: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  flex: 0 0 36px !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
  flex-shrink: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
  transform: none !important;
}

.modal-content > button.btn-close-modal[data-bs-dismiss="modal"]:hover,
.modal-content > button.btn-close-modal[data-dismiss="modal"]:hover,
.modal-content :is(.modal-header, .ftx-modal-header, .dropdown-header, #Titulo) > button:is(.btn-close-modal, .btn-close, .btn-close-white, .close)[data-bs-dismiss="modal"]:hover,
.modal-content :is(.modal-header, .ftx-modal-header, .dropdown-header, #Titulo) > button:is(.btn-close-modal, .btn-close, .btn-close-white, .close)[data-dismiss="modal"]:hover {
  transform: none !important;
  filter: brightness(1.06) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32) !important;
}

.modal-content > button.btn-close-modal:hover i,
.modal-content :is(.modal-header, .ftx-modal-header, .dropdown-header, #Titulo) > button.btn-close-modal:hover i {
  transform: rotate(180deg) !important;
}

.modal-content > button.btn-close-modal[data-bs-dismiss="modal"]:focus,
.modal-content > button.btn-close-modal[data-dismiss="modal"]:focus,
.modal-content :is(.modal-header, .ftx-modal-header, .dropdown-header, #Titulo) > button:is(.btn-close-modal, .btn-close, .btn-close-white, .close)[data-bs-dismiss="modal"]:focus,
.modal-content :is(.modal-header, .ftx-modal-header, .dropdown-header, #Titulo) > button:is(.btn-close-modal, .btn-close, .btn-close-white, .close)[data-dismiss="modal"]:focus {
  box-shadow: 0 0 0 0.2rem rgba(114, 47, 55, 0.25) !important;
  outline: none !important;
}

.modal-content > button.btn-close-modal i,
.modal-content :is(.modal-header, .ftx-modal-header, .dropdown-header, #Titulo) > button.btn-close-modal i {
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #fff !important;
  --fa-primary-color: #fff;
  --fa-secondary-color: #fff;
  box-shadow: none !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: rotate(0deg) !important;
  transform-origin: center center !important;
  transition: transform 0.25s ease !important;
}

.modal-content :is(.modal-header, .ftx-modal-header, .dropdown-header, #Titulo) > button:is(.btn-close, .btn-close-white, .close):not(.btn-close-modal)[data-bs-dismiss="modal"],
.modal-content :is(.modal-header, .ftx-modal-header, .dropdown-header, #Titulo) > button:is(.btn-close, .btn-close-white, .close):not(.btn-close-modal)[data-dismiss="modal"] {
  font-size: 0 !important;
}

.modal-content :is(.modal-header, .ftx-modal-header, .dropdown-header, #Titulo) > button:is(.btn-close, .btn-close-white, .close):not(.btn-close-modal)[data-bs-dismiss="modal"] > *,
.modal-content :is(.modal-header, .ftx-modal-header, .dropdown-header, #Titulo) > button:is(.btn-close, .btn-close-white, .close):not(.btn-close-modal)[data-dismiss="modal"] > * {
  display: none !important;
}

.modal-content :is(.modal-header, .ftx-modal-header, .dropdown-header, #Titulo) > button:is(.btn-close, .btn-close-white, .close):not(.btn-close-modal)[data-bs-dismiss="modal"]::before,
.modal-content :is(.modal-header, .ftx-modal-header, .dropdown-header, #Titulo) > button:is(.btn-close, .btn-close-white, .close):not(.btn-close-modal)[data-dismiss="modal"]::before {
  content: "\f00d";
  font-family: "Font Awesome 6 Pro" !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: rotate(0deg) !important;
  transform-origin: center center !important;
  transition: transform 0.25s ease !important;
}

.modal-content :is(.modal-header, .ftx-modal-header, .dropdown-header, #Titulo) > button:is(.btn-close, .btn-close-white, .close):not(.btn-close-modal)[data-bs-dismiss="modal"]:hover::before,
.modal-content :is(.modal-header, .ftx-modal-header, .dropdown-header, #Titulo) > button:is(.btn-close, .btn-close-white, .close):not(.btn-close-modal)[data-dismiss="modal"]:hover::before {
  transform: rotate(180deg) !important;
}

/* Base para todos os botões customizados */
.btn-azul,
.btn-fundo-laranja,
.btn-vinho,
.fundo-vermelho,
.fundo-cinza,
.fundo-roxo,
.fundo-chocolate,
.fundo-ebony,
.btn-fundo-chocolate,
.btn-nfs,
.btn-editar,
.btn-foto,
.btn-verde,
.btn-preto,
.btn-marrom,
.btn-amarelo {
  border-radius: 0.375rem !important;
  transition: all 0.3s ease, transform 0.2s ease !important;
  border: none;
  position: relative;
}

/* ================================================================
   EXPERIMENTO: Borda dupla nos botões padrão FrotiX
   - Borda preta fina (1px) + borda cinza claro (3px)
   - EXCLUI: btn-fundo-laranja, btn-icon-28, btn-xs, ftx-badge-status, ftx-actions
   ================================================================ */
.btn.btn-azul:not(.btn-icon-28):not(.btn-xs):not(.ftx-actions *),
.btn.btn-vinho:not(.btn-icon-28):not(.btn-xs):not(.ftx-actions *),
.btn.btn-verde:not(.btn-icon-28):not(.btn-xs):not(.ftx-badge-status):not(
    .ftx-actions *
  ),
.btn.btn-foto:not(.btn-icon-28):not(.btn-xs):not(.ftx-actions *),
.btn.btn-voltar:not(.btn-icon-28):not(.btn-xs):not(.ftx-actions *),
.btn.btn-ftx-fechar:not(.btn-icon-28):not(.btn-xs):not(.ftx-actions *),
.btn.btn-editar:not(.btn-icon-28):not(.btn-xs):not(.ftx-actions *),
.btn.btn-marrom:not(.btn-icon-28):not(.btn-xs):not(.ftx-actions *) {
  box-shadow: 0 0 0 1px #000, 0 0 0 3px #bbb !important;
}

/* Hover: manter as bordas e adicionar glow */
.btn.btn-azul:not(.btn-icon-28):not(.btn-xs):not(.ftx-actions *):hover,
.btn.btn-vinho:not(.btn-icon-28):not(.btn-xs):not(.ftx-actions *):hover,
.btn.btn-verde:not(.btn-icon-28):not(.btn-xs):not(.ftx-badge-status):not(
    .ftx-actions *
  ):hover,
.btn.btn-foto:not(.btn-icon-28):not(.btn-xs):not(.ftx-actions *):hover,
.btn.btn-voltar:not(.btn-icon-28):not(.btn-xs):not(.ftx-actions *):hover,
.btn.btn-ftx-fechar:not(.btn-icon-28):not(.btn-xs):not(.ftx-actions *):hover,
.btn.btn-editar:not(.btn-icon-28):not(.btn-xs):not(.ftx-actions *):hover,
.btn.btn-marrom:not(.btn-icon-28):not(.btn-xs):not(.ftx-actions *):hover {
  box-shadow: 0 0 0 1px #000, 0 0 0 3px #999, 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* ------------------------------------------------
   Correção de centralização dos badges:
   - altura fixa 28px
   - inline-flex para centralizar vertical/horizontal
   - padding apenas horizontal
   ------------------------------------------------ */
.btn-xs {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 0.55rem !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
  border-radius: 0.35rem !important;
  vertical-align: middle !important;
}

/* Preset para botões de STATUS (padrío) */
.ftx-status-btn {
  display: inline-flex; /* << centralização */
  align-items: center; /* << centralização */
  justify-content: center; /* << centralização */
  height: 28px; /* << garante igual ao btn-xs */
  padding: 0 0.6rem; /* << texto respira lateralmente */
  line-height: 1; /* << sem “empurrar” vertical */
  white-space: nowrap; /* evita quebra */
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: box-shadow 0.18s ease, transform 0.18s ease, filter 0.18s ease;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
  border: 0;
  color: #fff !important;
  border-radius: 0.5rem; /* leve pill */
}

.ftx-status-btn.is-active,
.btn-verde {
  /* override leve em .btn-verde para unificar estilo */
  background-color: var(--status-active-bg) !important;
  box-shadow: 0 0 8px var(--status-active-shadow), 0 2px 4px rgba(0, 0, 0, 0.12) !important;
  color: #fff !important;
}

.ftx-status-btn.is-active:hover,
.btn-verde:hover {
  background-color: var(--status-active-bg-hover) !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px var(--status-active-shadow),
    0 6px 12px rgba(0, 0, 0, 0.18) !important;
}

.ftx-status-btn.is-inactive,
.fundo-cinza {
  background-color: var(--status-inactive-bg) !important;
  color: aliceblue !important;
  box-shadow: 0 0 8px var(--status-inactive-shadow),
    0 2px 4px rgba(0, 0, 0, 0.12) !important;
}

.ftx-status-btn.is-inactive:hover,
.fundo-cinza:hover {
  background-color: var(--status-inactive-bg-hover) !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px var(--status-inactive-shadow),
    0 6px 12px rgba(0, 0, 0, 0.18) !important;
}

.ftx-status-btn:active,
.ftx-status-btn:focus {
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.04) !important;
}

/* Botío Confirmar Azul - Tom Escuro */
.btn.btn-azul,
a.btn.btn-azul,
button.btn-azul {
  background-color: #3d5771 !important;
  border-color: #2d4559 !important;
  color: white !important;
  box-shadow: 0 0 8px rgba(61, 87, 113, 0.5), 0 2px 4px rgba(61, 87, 113, 0.3) !important;
}

.btn.btn-azul:hover,
a.btn.btn-azul:hover,
button.btn-azul:hover {
  background-color: #2d4559 !important;
  border-color: #1f3241 !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(61, 87, 113, 0.8), 0 6px 12px rgba(61, 87, 113, 0.5) !important;
  color: white !important;
}

.btn.btn-azul:active,
.btn.btn-azul:focus,
a.btn.btn-azul:active,
a.btn.btn-azul:focus,
button.btn-azul:active,
button.btn-azul:focus {
  background-color: #1f3241 !important;
  border-color: #152330 !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(61, 87, 113, 0.35) !important;
  color: white !important;
}

/* Botão Fundo Laranja - Tom Escuro (Sienna)
   NOTA: Botões no header (.ftx-card-header) usam regras específicas definidas acima */
.btn.btn-fundo-laranja,
a.btn.btn-fundo-laranja,
button.btn-fundo-laranja {
  background-color: #a0522d !important;
  border-color: #8b4513 !important;
  color: white !important;
  box-shadow: 0 0 8px rgba(160, 82, 45, 0.5), 0 2px 4px rgba(160, 82, 45, 0.3);
}

.btn.btn-fundo-laranja:hover,
a.btn.btn-fundo-laranja:hover,
button.btn-fundo-laranja:hover {
  background-color: #8b4513 !important;
  border-color: #6b3410 !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(160, 82, 45, 0.8), 0 6px 12px rgba(160, 82, 45, 0.5);
  color: white !important;
}

.btn.btn-fundo-laranja:active,
.btn.btn-fundo-laranja:focus,
a.btn.btn-fundo-laranja:active,
a.btn.btn-fundo-laranja:focus,
button.btn-fundo-laranja:active,
button.btn-fundo-laranja:focus {
  background-color: #6b3410 !important;
  border-color: #5a2a0d !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(160, 82, 45, 0.35);
  color: white !important;
}

/* Botío Fechar Vinho */
.btn.btn-vinho,
a.btn.btn-vinho,
button.btn-vinho {
  background-color: #722f37 !important;
  border-color: #5a252c !important;
  color: white !important;
  box-shadow: 0 0 8px rgba(114, 47, 55, 0.5), 0 2px 4px rgba(114, 47, 55, 0.3) !important;
}

.btn.btn-vinho:hover,
a.btn.btn-vinho:hover,
button.btn-vinho:hover {
  background-color: #5a252c !important;
  border-color: #4a1f24 !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(114, 47, 55, 0.8), 0 6px 12px rgba(114, 47, 55, 0.5) !important;
  color: white !important;
}

.btn.btn-vinho:active,
.btn.btn-vinho:focus,
a.btn.btn-vinho:active,
a.btn.btn-vinho:focus,
button.btn-vinho:active,
button.btn-vinho:focus {
  background-color: #4a1f24 !important;
  border-color: #3a1820 !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(114, 47, 55, 0.25) !important;
  color: white !important;
}

/* FIX: Garantir estilos :active para btn-sm combinado com btn-vinho e btn-azul */
.btn-sm.btn-azul:active,
.btn-sm.btn-azul:focus,
.btn.btn-sm.btn-azul:active,
.btn.btn-sm.btn-azul:focus {
  background-color: #1f3241 !important;
  border-color: #152330 !important;
  color: white !important;
}

.btn-sm.btn-vinho:active,
.btn-sm.btn-vinho:focus,
.btn.btn-sm.btn-vinho:active,
.btn.btn-sm.btn-vinho:focus {
  background-color: #4a1f24 !important;
  border-color: #3a1820 !important;
  color: white !important;
}

/* Animação icon-pulse automática para ícones em botões Fechar (vinho) */
.btn-vinho i,
.btn.btn-vinho i,
button.btn-vinho i,
a.btn.btn-vinho i {
  animation: ftxHeaderBtnIconPulse 1.5s ease-in-out infinite !important;
  display: inline-block !important;
}

/* Ícone de fechar em botões vinho: sem pulse, com rotação no hover */
.btn-vinho i.fa-circle-xmark,
.btn.btn-vinho i.fa-circle-xmark,
button.btn-vinho i.fa-circle-xmark,
a.btn.btn-vinho i.fa-circle-xmark,
.btn-vinho i.fa-circle-xmark.icon-pulse,
.btn.btn-vinho i.fa-circle-xmark.icon-pulse,
button.btn-vinho i.fa-circle-xmark.icon-pulse,
a.btn.btn-vinho i.fa-circle-xmark.icon-pulse,
.btn-vinho i.fa-circle-xmark.ftx-icon-pulse,
.btn.btn-vinho i.fa-circle-xmark.ftx-icon-pulse,
button.btn-vinho i.fa-circle-xmark.ftx-icon-pulse,
a.btn.btn-vinho i.fa-circle-xmark.ftx-icon-pulse {
  animation: none !important;
  display: inline-block !important;
  transform-origin: center !important;
  transition: transform 0.25s ease !important;
}

.btn-vinho:hover i.fa-circle-xmark,
.btn.btn-vinho:hover i.fa-circle-xmark,
button.btn-vinho:hover i.fa-circle-xmark,
a.btn.btn-vinho:hover i.fa-circle-xmark,
.btn-vinho:hover i.fa-circle-xmark.icon-pulse,
.btn.btn-vinho:hover i.fa-circle-xmark.icon-pulse,
button.btn-vinho:hover i.fa-circle-xmark.icon-pulse,
a.btn.btn-vinho:hover i.fa-circle-xmark.icon-pulse,
.btn-vinho:hover i.fa-circle-xmark.ftx-icon-pulse,
.btn.btn-vinho:hover i.fa-circle-xmark.ftx-icon-pulse,
button.btn-vinho:hover i.fa-circle-xmark.ftx-icon-pulse,
a.btn.btn-vinho:hover i.fa-circle-xmark.ftx-icon-pulse {
  transform: rotate(45deg) !important;
}

/* Botão Voltar à Lista (Marrom Terracota) */
.btn.btn-voltar,
a.btn.btn-voltar,
button.btn-voltar,
a.btn-voltar {
  background-color: #7e583d !important;
  border-color: #6a4a33 !important;
  color: white !important;
  box-shadow: 0 0 8px rgba(126, 88, 61, 0.5), 0 2px 4px rgba(126, 88, 61, 0.3) !important;
  border-radius: 0.375rem !important;
  transition: all 0.3s ease, transform 0.2s ease !important;
  border: none;
  position: relative;
  text-decoration: none !important;
}

.btn.btn-voltar:hover,
a.btn.btn-voltar:hover,
button.btn-voltar:hover,
a.btn-voltar:hover {
  background-color: #6a4a33 !important;
  border-color: #5a3d2a !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(126, 88, 61, 0.8), 0 6px 12px rgba(126, 88, 61, 0.5) !important;
  color: white !important;
}

.btn.btn-voltar:active,
.btn.btn-voltar:focus,
a.btn.btn-voltar:active,
a.btn.btn-voltar:focus,
button.btn-voltar:active,
button.btn-voltar:focus,
a.btn-voltar:active,
a.btn-voltar:focus {
  background-color: #5a3d2a !important;
  border-color: #4a3122 !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(126, 88, 61, 0.25) !important;
  color: white !important;
}

/* Ícones em botões Voltar: NÃO aplicar icon-pulse automático.
   O ícone usa icon-rotate-left (rotação) definido no HTML, não pulse. */

/* Grupo de Botões de Ação (formulários) */
.ftx-btn-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.5rem; /* Espaço para animação wiggle dos botões */
}

.ftx-btn-group .btn {
  padding: 0.5rem 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: none !important; /* Remove glow dos botões no formulário */
}

.ftx-btn-group .btn:hover {
  box-shadow: none !important;
}

.ftx-btn-group .btn:focus,
.ftx-btn-group .btn:active {
  box-shadow: 0 0 0 0.2rem rgba(61, 87, 113, 0.25) !important; /* Apenas focus ring */
}

/* Botões de Ação em DataTables */
.ftx-btn-acoes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding-top: 0.25rem; /* Espaço para animação wiggle dos botões */
}

/* Botío Fundo Vermelho */
.btn.fundo-vermelho,
a.btn.fundo-vermelho,
button.fundo-vermelho {
  background-color: #dc3545 !important;
  border-color: #c82333 !important;
  color: white !important;
  box-shadow: 0 0 8px rgba(220, 53, 69, 0.5), 0 2px 4px rgba(220, 53, 69, 0.3) !important;
}

.btn.fundo-vermelho:hover,
a.btn.fundo-vermelho:hover,
button.fundo-vermelho:hover {
  background-color: #c82333 !important;
  border-color: #bd2130 !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(220, 53, 69, 0.8), 0 6px 12px rgba(220, 53, 69, 0.5) !important;
  color: white !important;
}

.btn.fundo-vermelho:active,
.btn.fundo-vermelho:focus,
a.btn.fundo-vermelho:active,
a.btn.fundo-vermelho:focus,
button.fundo-vermelho:active,
button.fundo-vermelho:focus {
  background-color: #bd2130 !important;
  border-color: #a71d2a !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
  color: white !important;
}

/* Botío Fundo Cinza (mantido p/ Inativo) */
.btn.fundo-cinza,
a.btn.fundo-cinza,
button.fundo-cinza {
  background-color: #2f4f4f !important;
  border-color: #253a3a !important;
  color: aliceblue !important;
  box-shadow: 0 0 8px rgba(47, 79, 79, 0.5), 0 2px 4px rgba(47, 79, 79, 0.3) !important;
}

.btn.fundo-cinza:hover,
a.btn.fundo-cinza:hover,
button.fundo-cinza:hover {
  background-color: #253a3a !important;
  border-color: #1e2e2e !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(47, 79, 79, 0.8), 0 6px 12px rgba(47, 79, 79, 0.5) !important;
  color: aliceblue !important;
}

.btn.fundo-cinza:active,
.btn.fundo-cinza:focus,
a.btn.fundo-cinza:active,
a.btn.fundo-cinza:focus,
button.fundo-cinza:active,
button.fundo-cinza:focus {
  background-color: #1e2e2e !important;
  border-color: #152020 !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(47, 79, 79, 0.25) !important;
  color: aliceblue !important;
}

/* Botío Roxo */
.btn.fundo-roxo,
a.btn.fundo-roxo,
button.fundo-roxo {
  background-color: #4b0082 !important;
  color: #fff !important;
  box-shadow: 0 0 8px rgba(75, 0, 130, 0.5), 0 2px 4px rgba(75, 0, 130, 0.3) !important;
}

.btn.fundo-roxo:hover,
a.btn.fundo-roxo:hover,
button.fundo-roxo:hover {
  background-color: #3a006b !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 25px rgba(75, 0, 130, 0.8), 0 6px 15px rgba(75, 0, 130, 0.5) !important;
  color: white !important;
}

.btn.fundo-roxo:active,
.btn.fundo-roxo:focus,
a.btn.fundo-roxo:active,
a.btn.fundo-roxo:focus,
button.fundo-roxo:active,
button.fundo-roxo:focus {
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 5px rgba(75, 0, 130, 0.3) !important;
  color: white !important;
}

/* Botío Chocolate */
.btn.fundo-chocolate,
a.btn.fundo-chocolate,
button.fundo-chocolate {
  background-color: #7b3f00 !important;
  border-color: #7b3f00 !important;
  color: #fff !important;
  box-shadow: 0 0 8px rgba(123, 63, 0, 0.5), 0 2px 4px rgba(123, 63, 0, 0.3) !important;
  transition: box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease !important;
}

.btn.fundo-chocolate:hover,
a.btn.fundo-chocolate:hover,
button.fundo-chocolate:hover {
  filter: brightness(1.06);
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 25px rgba(123, 63, 0, 0.8), 0 8px 20px rgba(123, 63, 0, 0.5) !important;
  color: white !important;
}

.btn.fundo-chocolate:active,
.btn.fundo-chocolate.active,
a.btn.fundo-chocolate:active,
a.btn.fundo-chocolate.active,
button.fundo-chocolate:active,
button.fundo-chocolate.active,
.show > .btn.fundo-chocolate.dropdown-toggle,
.show > a.btn.fundo-chocolate.dropdown-toggle,
.show > button.fundo-chocolate.dropdown-toggle {
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 3px 12px rgba(123, 63, 0, 0.3) !important;
}

.btn.fundo-chocolate:disabled,
.btn.fundo-chocolate.disabled,
a.btn.fundo-chocolate:disabled,
a.btn.fundo-chocolate.disabled,
button.fundo-chocolate:disabled,
button.fundo-chocolate.disabled {
  box-shadow: none !important;
  filter: none;
  transform: none !important;
}

.btn.fundo-chocolate:focus-visible,
a.btn.fundo-chocolate:focus-visible,
button.fundo-chocolate:focus-visible {
  box-shadow: 0 0 0 0.22rem rgba(255, 203, 112, 0.45) !important;
}

/* Botío Editar */
.btn.btn-editar,
a.btn.btn-editar {
  --btn-color: #3a6ea5;
  --bs-btn-color: #fff;
  --bs-btn-bg: #3a6ea5;
  --bs-btn-border-color: #3a6ea5;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #345f91;
  --bs-btn-hover-border-color: #345f91;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2f5684;
  --bs-btn-active-border-color: #2f5684;
  --bs-btn-disabled-bg: #6f8fb1;
  --bs-btn-disabled-border-color: #6f8fb1;
  background-color: var(--bs-btn-bg) !important;
  border-color: var(--bs-btn-border-color) !important;
  color: var(--bs-btn-color) !important;
  box-shadow: 0 0 8px rgba(58, 110, 165, 0.5), 0 2px 4px rgba(58, 110, 165, 0.3) !important;
}

.btn.btn-editar:hover,
a.btn.btn-editar:hover {
  background-color: var(--bs-btn-hover-bg) !important;
  border-color: var(--bs-btn-hover-border-color) !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(58, 110, 165, 0.8),
    0 6px 12px rgba(58, 110, 165, 0.5) !important;
  color: white !important;
}

.btn.btn-editar:active,
.btn.btn-editar:focus,
a.btn.btn-editar:active,
a.btn.btn-editar:focus {
  background-color: var(--bs-btn-active-bg) !important;
  border-color: var(--bs-btn-active-border-color) !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(58, 110, 165, 0.35) !important;
  color: white !important;
}

/* Botío Foto */
.btn-foto {
  background: #2f4f4f !important;
  color: #fff !important;
  --btn-color: #2f4f4f;
  box-shadow: 0 0 8px rgba(47, 79, 79, 0.5), 0 2px 4px rgba(47, 79, 79, 0.3) !important;
}

.btn-foto:hover {
  background-color: #253a3a !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(47, 79, 79, 0.8), 0 6px 12px rgba(47, 79, 79, 0.5) !important;
  color: white !important;
}

.btn-foto:active,
.btn-foto:focus {
  background-color: #1e2e2e !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(47, 79, 79, 0.25) !important;
  color: white !important;
}

.btn-foto.disabled,
a.btn-foto.disabled,
button.btn-foto.disabled {
  background-color: #2f4f4f !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Botão Verde */
.btn.btn-verde,
a.btn.btn-verde,
button.btn-verde {
  background-color: #38a169 !important;
  border-color: #2d7a50 !important;
  color: white !important;
  box-shadow: 0 0 8px rgba(56, 161, 105, 0.5), 0 2px 4px rgba(56, 161, 105, 0.3) !important;
}

.btn.btn-verde:hover,
a.btn.btn-verde:hover,
button.btn-verde:hover {
  background-color: #2d7a50 !important;
  border-color: #246640 !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(56, 161, 105, 0.8),
    0 6px 12px rgba(56, 161, 105, 0.5) !important;
  color: white !important;
}

.btn.btn-verde:active,
.btn.btn-verde:focus,
a.btn.btn-verde:active,
a.btn.btn-verde:focus,
button.btn-verde:active,
button.btn-verde:focus {
  background-color: #246640 !important;
  border-color: #1d4f30 !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(56, 161, 105, 0.35) !important;
  color: white !important;
}

/* Botão Amarelo (Amber/Dourado) - Ações especiais como "Correção Automática" */
.btn.btn-amarelo,
a.btn.btn-amarelo,
button.btn-amarelo {
  background-color: #f59e0b !important;
  border-color: #d97706 !important;
  color: white !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5), 0 2px 4px rgba(245, 158, 11, 0.3) !important;
}

.btn.btn-amarelo:hover,
a.btn.btn-amarelo:hover,
button.btn-amarelo:hover {
  background-color: #d97706 !important;
  border-color: #b45309 !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.8),
    0 6px 12px rgba(245, 158, 11, 0.5) !important;
  color: white !important;
}

.btn.btn-amarelo:active,
.btn.btn-amarelo:focus,
a.btn.btn-amarelo:active,
a.btn.btn-amarelo:focus,
button.btn-amarelo:active,
button.btn-amarelo:focus {
  background-color: #b45309 !important;
  border-color: #92400e !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.35) !important;
  color: white !important;
}

/* Botão Preto */
.btn.btn-preto,
a.btn.btn-preto,
button.btn-preto {
  background-color: #2c2c2c !important;
  border-color: #1c1c1c !important;
  color: white !important;
  box-shadow: 0 0 8px rgba(44, 44, 44, 0.5), 0 2px 4px rgba(44, 44, 44, 0.3) !important;
}

.btn.btn-preto:hover,
a.btn.btn-preto:hover,
button.btn-preto:hover {
  background-color: #1c1c1c !important;
  border-color: #0f0f0f !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(44, 44, 44, 0.8), 0 6px 12px rgba(44, 44, 44, 0.5) !important;
  color: white !important;
}

.btn.btn-preto:active,
.btn.btn-preto:focus,
a.btn.btn-preto:active,
a.btn.btn-preto:focus,
button.btn-preto:active,
button.btn-preto:focus {
  background-color: #0f0f0f !important;
  border-color: #000000 !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(44, 44, 44, 0.35) !important;
  color: white !important;
}

/* Botão Marrom */
.btn.btn-marrom,
a.btn.btn-marrom,
button.btn-marrom {
  background-color: #7b4230 !important;
  border-color: #6b3220 !important;
  color: white !important;
  box-shadow: 0 0 8px rgba(123, 66, 48, 0.5), 0 2px 4px rgba(123, 66, 48, 0.3) !important;
}

.btn.btn-marrom:hover,
a.btn.btn-marrom:hover,
button.btn-marrom:hover {
  background-color: #6b3220 !important;
  border-color: #5b2210 !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(123, 66, 48, 0.8), 0 6px 12px rgba(123, 66, 48, 0.5) !important;
  color: white !important;
}

.btn.btn-marrom:active,
.btn.btn-marrom:focus,
a.btn.btn-marrom:active,
a.btn.btn-marrom:focus,
button.btn-marrom:active,
button.btn-marrom:focus {
  background-color: #5b2210 !important;
  border-color: #4b1808 !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(123, 66, 48, 0.35) !important;
  color: white !important;
}

/* Botões gradiente */
.modal-footer .btn.custom-primary-btn,
.btn.custom-primary-btn {
  --bg1: #0d6efd;
  --bg2: #3e8bff;
  --shadow: rgba(13, 110, 253, 0.35);
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  color: #fff !important;
  border: 0;
  box-shadow: 0 0 8px rgba(13, 110, 253, 0.5), 0 2px 4px rgba(13, 110, 253, 0.3) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.modal-footer .btn.custom-primary-btn:hover,
.modal-footer .btn.custom-primary-btn:focus,
.btn.custom-primary-btn:hover,
.btn.custom-primary-btn:focus {
  filter: brightness(1.05);
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(13, 110, 253, 0.8), 0 8px 20px var(--shadow) !important;
  color: #fff !important;
}

.modal-footer .btn.custom-primary-btn:active,
.btn.custom-primary-btn:active {
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 4px 12px var(--shadow);
}

.btn .btn-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  white-space: nowrap;
}

.icon-float {
  animation: floatSoft 1.6s ease-in-out infinite;
  transform-origin: 50% 60%;
}

.icon-spin {
  animation: slowSpin 1.1s linear infinite;
  display: inline-block;
}

.btn-vinho:hover .icon-spin,
.btn-vinho:focus .icon-spin {
  animation-duration: 0.85s;
}

/* Links com classe .btn não sublinham */
a.btn {
  text-decoration: none;
}

/* Botío azul-escuro */
.azul-escuro {
  --azul-escuro: #0d47a1;
  --azul-escuro-hover: #1565c0;
  background-color: var(--azul-escuro) !important;
  color: #fff !important;
  transition: background-color 0.2s ease, transform 0.2s ease,
    box-shadow 0.2s ease;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  padding: 10px 16px;
  box-shadow: 0 0 8px rgba(13, 71, 161, 0.5), 0 2px 4px rgba(13, 71, 161, 0.3) !important;
}

.azul-escuro:hover,
.azul-escuro:focus-visible {
  background-color: var(--azul-escuro-hover) !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(13, 71, 161, 0.8), 0 6px 12px rgba(13, 71, 161, 0.5) !important;
}

.azul-escuro.auto:hover,
.azul-escuro.auto:focus-visible {
  background-color: color-mix(
    in oklab,
    var(--azul-escuro),
    white 15%
  ) !important;
}

.azul-escuro:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--azul-escuro-hover), white 25%);
  outline-offset: 2px;
}

.azul-escuro:active {
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 5px rgba(13, 71, 161, 0.3) !important;
}

.azul-escuro:disabled,
.azul-escuro[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ================================================================
   ADIÇÕES AO CSS EXISTENTE - (mantidas)
   ================================================================ */
/* Ebony */
.btn.fundo-ebony,
a.btn.fundo-ebony,
button.fundo-ebony {
  background-color: #2c2c2c !important;
  border-color: #1c1c1c !important;
  color: white !important;
  box-shadow: 0 0 8px rgba(44, 44, 44, 0.5), 0 2px 4px rgba(44, 44, 44, 0.3) !important;
  transition: all 0.3s ease, transform 0.2s ease !important;
  border-radius: 0.375rem !important;
}

.btn.fundo-ebony:hover,
a.btn.fundo-ebony:hover,
button.fundo-ebony:hover {
  background-color: #1c1c1c !important;
  border-color: #0f0f0f !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(44, 44, 44, 0.8), 0 6px 12px rgba(44, 44, 44, 0.5) !important;
  color: white !important;
  filter: brightness(1.1) !important;
}

.btn.fundo-ebony:active,
.btn.fundo-ebony:focus,
a.btn.fundo-ebony:active,
a.btn.fundo-ebony:focus,
button.fundo-ebony:active,
button.fundo-ebony:focus {
  background-color: #0f0f0f !important;
  border-color: #000000 !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(44, 44, 44, 0.35) !important;
  color: white !important;
}

/* Compat classes sem .btn */
.fundo-chocolate {
  background-color: #7b3f00 !important;
  border-color: #7b3f00 !important;
  color: #fff !important;
  box-shadow: 0 0 8px rgba(123, 63, 0, 0.5), 0 2px 4px rgba(123, 63, 0, 0.3) !important;
  transition: all 0.3s ease, transform 0.2s ease !important;
  border-radius: 0.375rem !important;
}

.fundo-chocolate:hover {
  background-color: #5c2f00 !important;
  border-color: #5c2f00 !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 25px rgba(123, 63, 0, 0.8), 0 8px 20px rgba(123, 63, 0, 0.5) !important;
  color: white !important;
  filter: brightness(1.06) !important;
}

.fundo-chocolate:active,
.fundo-chocolate:focus {
  background-color: #4a2500 !important;
  border-color: #4a2500 !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(123, 63, 0, 0.35) !important;
  color: white !important;
}

button.fundo-ebony,
a.fundo-ebony,
input.fundo-ebony {
  background-color: #2c2c2c !important;
  border-color: #1c1c1c !important;
  color: white !important;
  box-shadow: 0 0 8px rgba(44, 44, 44, 0.5), 0 2px 4px rgba(44, 44, 44, 0.3) !important;
  transition: all 0.3s ease, transform 0.2s ease !important;
  border-radius: 0.375rem !important;
}

button.fundo-ebony:hover,
a.fundo-ebony:hover,
input.fundo-ebony:hover {
  background-color: #1c1c1c !important;
  border-color: #0f0f0f !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(44, 44, 44, 0.8), 0 6px 12px rgba(44, 44, 44, 0.5) !important;
  color: white !important;
  filter: brightness(1.1) !important;
}

button.fundo-ebony:active,
button.fundo-ebony:focus,
a.fundo-ebony:active,
a.fundo-ebony:focus,
input.fundo-ebony:active,
input.fundo-ebony:focus {
  background-color: #0f0f0f !important;
  border-color: #000000 !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(44, 44, 44, 0.35) !important;
  color: white !important;
}

/* ================================================================
   BOTÕES DE AÇÃO EM MODAIS - PADRÃO FROTIX
   - btn-ftx-fechar: Cor vinho, ícone fa-circle-xmark com pulse
   - btn-ftx-voltar: Cor vinho, ícone fa-rotate-left girando
   - btn-ftx-confirmar: Cor azul escuro, para ações de confirmação
   - btn-ftx-salvar: Cor verde, para ações de salvar
   ================================================================ */

/* ===== ANIMAÇÕES ESPECÍFICAS DOS BOTÕES ===== */




/* ===== BOTÃO FECHAR - PADRÃO FROTIX ===== */
/* Cor: Vinho | Ícone: fa-circle-xmark | Animação: Pulse */
.btn-ftx-fechar {
  background-color: #722f37 !important;
  color: #fff !important;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease, transform 0.2s ease !important;
  box-shadow: 0 0 8px rgba(114, 47, 55, 0.5), 0 2px 4px rgba(114, 47, 55, 0.3) !important;
  cursor: pointer;
}

.btn-ftx-fechar:hover {
  background-color: #5a252c !important;
  color: #fff !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(114, 47, 55, 0.8), 0 6px 12px rgba(114, 47, 55, 0.5) !important;
}

.btn-ftx-fechar:active,
.btn-ftx-fechar:focus {
  background-color: #4a1f24 !important; /* Vinho escuro */
  color: #fff !important;
  border-color: #3a1820 !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(114, 47, 55, 0.25) !important;
}

/* Ícone do botão fechar - padrão estático, com rotação no hover */
.btn-ftx-fechar i.fa-circle-xmark,
.btn-ftx-fechar i.fa-circle-xmark.icon-pulse,
.btn-ftx-fechar i.fa-circle-xmark.ftx-icon-pulse {
  display: inline-block;
  transform-origin: center;
  animation: none !important;
  transition: transform 0.25s ease !important;
}

.btn-ftx-fechar:hover i.fa-circle-xmark,
.btn-ftx-fechar:hover i.fa-circle-xmark.icon-pulse,
.btn-ftx-fechar:hover i.fa-circle-xmark.ftx-icon-pulse {
  transform: rotate(45deg) !important;
}

/* ===== BOTÃO VOLTAR - PADRÃO FROTIX ===== */
/* Cor: Vinho | Ícone: fa-rotate-left | Animação: Giro anti-horário */
.btn-ftx-voltar {
  background-color: #722f37 !important;
  color: #fff !important;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease, transform 0.2s ease !important;
  box-shadow: 0 0 8px rgba(114, 47, 55, 0.5), 0 2px 4px rgba(114, 47, 55, 0.3) !important;
  cursor: pointer;
}

.btn-ftx-voltar:hover {
  background-color: #5a252c !important;
  color: #fff !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(114, 47, 55, 0.8), 0 6px 12px rgba(114, 47, 55, 0.5) !important;
}

.btn-ftx-voltar:active,
.btn-ftx-voltar:focus {
  background-color: #4a1f24 !important; /* Vinho escuro */
  color: #fff !important;
  border-color: #3a1820 !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(114, 47, 55, 0.25) !important;
}

/* Ícone do botão voltar - sempre com animação de giro */
.btn-ftx-voltar i.fa-rotate-left {
  animation: ftxSpinReverse 1.5s linear infinite;
}

/* ===== BOTÃO CONFIRMAR - PADRÃO FROTIX ===== */
/* Cor: Azul escuro | Para ações de confirmação em modais */
.btn-ftx-confirmar {
  background-color: #3d5771 !important;
  color: #fff !important;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease, transform 0.2s ease !important;
  box-shadow: 0 0 8px rgba(61, 87, 113, 0.5), 0 2px 4px rgba(61, 87, 113, 0.3) !important;
  cursor: pointer;
}

.btn-ftx-confirmar:hover {
  background-color: #2d4156 !important;
  color: #fff !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(61, 87, 113, 0.8), 0 6px 12px rgba(61, 87, 113, 0.5) !important;
}

.btn-ftx-confirmar:active,
.btn-ftx-confirmar:focus {
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(61, 87, 113, 0.25) !important;
}

/* ===== BOTÃO SALVAR - PADRÃO FROTIX ===== */
/* Cor: Verde | Para ações de salvar/gravar */
.btn-ftx-salvar {
  background-color: #2e7d32 !important;
  color: #fff !important;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease, transform 0.2s ease !important;
  box-shadow: 0 0 8px rgba(46, 125, 50, 0.5), 0 2px 4px rgba(46, 125, 50, 0.3) !important;
  cursor: pointer;
}

.btn-ftx-salvar:hover {
  background-color: #1b5e20 !important;
  color: #fff !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(46, 125, 50, 0.8), 0 6px 12px rgba(46, 125, 50, 0.5) !important;
}

.btn-ftx-salvar:active,
.btn-ftx-salvar:focus {
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(46, 125, 50, 0.25) !important;
}

/* ===== BOTÃO EXCLUIR - PADRÃO FROTIX ===== */
/* Cor: Vermelho | Para ações de exclusão/deletar */
.btn-ftx-excluir {
  background-color: #c62828 !important;
  color: #fff !important;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease, transform 0.2s ease !important;
  box-shadow: 0 0 8px rgba(198, 40, 40, 0.5), 0 2px 4px rgba(198, 40, 40, 0.3) !important;
  cursor: pointer;
}

.btn-ftx-excluir:hover {
  background-color: #b71c1c !important;
  color: #fff !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(198, 40, 40, 0.8), 0 6px 12px rgba(198, 40, 40, 0.5) !important;
}

.btn-ftx-excluir:active,
.btn-ftx-excluir:focus {
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(198, 40, 40, 0.25) !important;
}

/* ===== BOTÃO CANCELAR - PADRÃO FROTIX ===== */
/* Cor: Cinza | Para ações de cancelar */
.btn-ftx-cancelar {
  background-color: #546e7a !important;
  color: #fff !important;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease, transform 0.2s ease !important;
  box-shadow: 0 0 8px rgba(84, 110, 122, 0.5), 0 2px 4px rgba(84, 110, 122, 0.3) !important;
  cursor: pointer;
}

.btn-ftx-cancelar:hover {
  background-color: #37474f !important;
  color: #fff !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(84, 110, 122, 0.8),
    0 6px 12px rgba(84, 110, 122, 0.5) !important;
}

.btn-ftx-cancelar:active,
.btn-ftx-cancelar:focus {
  background-color: #263238 !important; /* Cinza muito escuro */
  color: #fff !important;
  border-color: #1a1f22 !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(84, 110, 122, 0.25) !important;
}

/* ===== SPINNER PARA BOTÕES DE AÇÃO ===== */
.btn-ftx-fechar .spinner-border,
.btn-ftx-voltar .spinner-border,
.btn-ftx-confirmar .spinner-border,
.btn-ftx-salvar .spinner-border,
.btn-ftx-excluir .spinner-border,
.btn-ftx-cancelar .spinner-border {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
}

/* ===== ESTADO DESABILITADO ===== */
.btn-ftx-fechar:disabled,
.btn-ftx-voltar:disabled,
.btn-ftx-confirmar:disabled,
.btn-ftx-salvar:disabled,
.btn-ftx-excluir:disabled,
.btn-ftx-cancelar:disabled,
.btn-ftx-fechar.disabled,
.btn-ftx-voltar.disabled,
.btn-ftx-confirmar.disabled,
.btn-ftx-salvar.disabled,
.btn-ftx-excluir.disabled,
.btn-ftx-cancelar.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== COMPATIBILIDADE COM CLASSES LEGADAS ===== */
/* Mantém suporte às classes antigas enquanto migra para o novo padrão */
.btn-modal-fechar {
  background-color: #722f37 !important;
  color: #fff !important;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease, transform 0.2s ease !important;
  box-shadow: 0 0 8px rgba(114, 47, 55, 0.5), 0 2px 4px rgba(114, 47, 55, 0.3) !important;
  cursor: pointer;
}

.btn-modal-fechar:hover {
  background-color: #5a252c !important;
  color: #fff !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(114, 47, 55, 0.8), 0 6px 12px rgba(114, 47, 55, 0.5) !important;
}

.btn-modal-fechar:active,
.btn-modal-fechar:focus {
  background-color: #4a1f24 !important; /* Vinho escuro */
  color: #fff !important;
  border-color: #3a1820 !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(114, 47, 55, 0.25) !important;
}

/* Ícone do botão fechar na classe legada */
.btn-modal-fechar i.fa-circle-xmark,
.btn-modal-fechar i.fa-circle-xmark.icon-pulse,
.btn-modal-fechar i.fa-circle-xmark.ftx-icon-pulse {
  display: inline-block;
  transform-origin: center;
  animation: none !important;
  transition: transform 0.25s ease !important;
}

.btn-modal-fechar:hover i.fa-circle-xmark,
.btn-modal-fechar:hover i.fa-circle-xmark.icon-pulse,
.btn-modal-fechar:hover i.fa-circle-xmark.ftx-icon-pulse {
  transform: rotate(45deg) !important;
}

/* Animação do ícone voltar na classe legada */
.btn-modal-fechar i.fa-rotate-left {
  animation: ftxSpinReverse 1.5s linear infinite;
}

/* =============================================================================
   40 CARDS & HEADERS — ftx-card-header, títulos e ações
   ============================================================================= */

/* ================================================================
   SPINNER GLOBAL
   ================================================================ */
.ftx-spin-overlay {
  position: fixed;
  inset: 0;
  z-index: 50000;
  background: rgba(14, 14, 18, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: saturate(120%) blur(2px);
}

.ftx-spin-box {
  text-align: center;
  padding: 28px 32px;
  border-radius: 16px;
  background: rgba(30, 30, 40, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  min-width: 260px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.ftx-spinner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 6px solid transparent;
  border-top-color: #9d4edd;
  animation: ftxspin 1s linear infinite;
  margin: 0 auto 14px;
  box-shadow: 0 0 0 1px rgba(157, 78, 221, 0.25) inset;
  position: relative;
}

.ftx-spinner:before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 6px solid transparent;
  border-right-color: #22d3ee;
  animation: ftxspin 0.75s linear infinite reverse;
}

.ftx-spin-msg {
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ================================================================
   HELPERS / ICONS
   ================================================================ */
#ftx-overlay .ftx-msg {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
}

.icon-pulse {
  display: inline-block;
  animation: pulseIcon 1.5s ease-in-out infinite;
}

.icon-rotate-left {
  display: inline-block;
  animation: spinLeft 2s linear infinite;
}

.icon-space {
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
}

/* ================================================================
   FTX CARD HEADER - PADRÃO GLOBAL FROTIX
   Uso: .ftx-card-header com .titulo-paginas e .ftx-card-actions
   ================================================================ */

/* Animação do gradiente do header */


/* Container do Header do Card */
.ftx-card-header {
  background: linear-gradient(
    135deg,
    #325d88 0%,
    #2a4d73 25%,
    #3d6f9e 50%,
    #2a4d73 75%,
    #325d88 100%
  );
  background-size: 400% 400%;
  animation: ftxHeaderGradientShift 8s ease infinite;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  position: relative;
  overflow: visible !important; /* Permite wiggle dos botões sem cortar */
  border-radius: 10px 10px 0 0; /* Bordas arredondadas no topo - Padrão FrotiX */
}

/* Efeito de brilho sutil no header */
.ftx-card-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.06),
    transparent
  );
  animation: ftxHeaderShine 6s ease-in-out infinite;
  pointer-events: none;
  clip-path: inset(
    0 round 10px 10px 0 0
  ); /* Mantém shimmer dentro do border-radius */
}



/* Título do Header - Padrão FrotiX */
.ftx-card-header .titulo-paginas,
.ftx-card-header h2.titulo-paginas,
.ftx-card-header .ftx-card-title {
  font-family: "Outfit", sans-serif !important;
  font-weight: 900 !important;
  font-size: 1.925rem !important;
  color: #ffffff !important;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 1;
}

/* Ícone do Título - Duotone Laranja/Branco */
.ftx-card-header .titulo-paginas i,
.ftx-card-header h2.titulo-paginas i,
.ftx-card-header .ftx-card-title i {
  font-size: 2.2rem !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Camada primária do ícone duotone - Branco */
.ftx-card-header .titulo-paginas i.fa-duotone::before,
.ftx-card-header h2.titulo-paginas i.fa-duotone::before,
.ftx-card-header .ftx-card-title i.fa-duotone::before {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Camada secundária do ícone duotone - Laranja */
.ftx-card-header .titulo-paginas i.fa-duotone::after,
.ftx-card-header h2.titulo-paginas i.fa-duotone::after,
.ftx-card-header .ftx-card-title i.fa-duotone::after {
  color: #c67750 !important;
  opacity: 1 !important;
}

/* Container de Ações do Header */
.ftx-card-header .ftx-card-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}

.ftx-dashboard-title-period {
  font-family: inherit;
  font-size: calc(1em - 2pt);
  font-weight: inherit;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
  text-shadow: inherit;
}

.ftx-dashboard-title-period:empty {
  display: none;
}

/* ================================================================
   BOTÃO HEADER LARANJA - PADRÃO FROTIX
   Uso: dentro de .ftx-card-header para ações principais
   ================================================================ */

/* Animação pulsante para ícone do botão header */


/* Botão Laranja do Header - Padrão FrotiX
   Bordas: 1px preto + 2px branco ao redor */
.ftx-card-header .btn-header-orange,
.ftx-card-header .btn-fundo-laranja,
.btn-header-orange {
  background-color: #a0522d !important;
  color: #fff !important;
  border: 1px solid #333 !important; /* Borda preta fina */
  border-radius: 8px;
  padding: 0.5rem 1.25rem;
  font-family: "Outfit", sans-serif !important;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8),
    /* Borda branca 2px */ 0 0 12px rgba(160, 82, 45, 0.4) !important;
  position: relative;
  overflow: visible !important; /* Ripple externo */
}

.ftx-card-header .btn-header-orange:hover,
.ftx-card-header .btn-fundo-laranja:hover,
.btn-header-orange:hover {
  background-color: #8b4513 !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 1),
    /* Borda branca no hover */ 0 0 20px rgba(160, 82, 45, 0.6) !important;
}

.ftx-card-header .btn-header-orange:active,
.ftx-card-header .btn-fundo-laranja:active,
.btn-header-orange:active {
  transform: translateY(0);
  background-color: #6b3410 !important;
}

/* Ícone fa-clone-plus no botão do header - Branco + Cinza médio */
.ftx-card-header .btn-fundo-laranja i.fa-clone-plus::before,
.ftx-card-header .btn-header-orange i.fa-clone-plus::before {
  color: #ffffff !important;
}

.ftx-card-header .btn-fundo-laranja i.fa-clone-plus::after,
.ftx-card-header .btn-header-orange i.fa-clone-plus::after {
  color: #999999 !important; /* Cinza médio */
  opacity: 1 !important;
}

/* Ícone do botão header orange - SEM animação por padrão */
.btn-header-orange i,
.ftx-card-header .btn-header-orange i {
  font-size: 1rem;
  display: inline-block !important;
  transition: transform 0.2s ease;
}

/* Animação de rotação do ícone - Sentido anti-horário */


/* Pausa a animação no hover (feedback visual) */
.btn-header-orange:hover i,
.ftx-card-header .btn-header-orange:hover i {
  transform: scale(1.1);
}

/* =============================================================================
   50 MODALS — Sistema unificado .ftx-modal-*
   ============================================================================= */

/* ===========================
       ANIMAÇÕES
   ============================ */
.animate-fade-in {
  animation: fadeIn 0.6s ease-in;
}









/* ===========================
       RESPONSIVIDADE
   ============================ */
@media (max-width: 768px) {
  .evento-section {
    margin: 10px;
  }

  .controles-evento {
    padding: 1rem;
  }

  .accordion-body-modern {
    padding: 1rem;
  }

  .form-section,
  .date-section,
  .form-section-modern,
  .date-section-modern {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .modal-footer {
    flex-direction: column;
  }

  .event-card {
    margin: 10px;
  }

  .card-body-custom {
    padding: 1rem;
  }
}

.form-control-xs[style*="margin: 10px; width: 400px"] {
  margin: 10px !important;
  width: 400px !important;
}

@media (max-width: 500px) {
  .form-control-xs[style*="width: 400px"] {
    width: 100% !important;
    margin: 10px 0 !important;
  }
}

@media (max-width: 768px) {
  .modal-dialog-custom {
    margin: 1rem;
    max-width: calc(100vw - 2rem);
  }

  .modal-body-custom {
    padding: 1rem;
    max-height: 60vh;
  }

  .form-card-internal {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .modal-footer-custom {
    flex-direction: column;
    padding: 1rem;
  }

  #modalViagens .modal-body .form-group {
    min-height: 50px;
  }

  #modalViagens .controls-inline {
    flex-direction: column;
    align-items: stretch;
  }
}



/* ================================================================
   MODAIS FROTIX - SISTEMA PREMIUM
   Adicionar ao final do frotix.css
   ================================================================ */

/* ===== VARIÁVEIS DE MODAIS ===== */


/* ===== ANIMAÇÕES DE MODAL ===== */








/* ===== MODAL CONTAINER ===== */
.modal-content {
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--modal-shadow);
}

.modal.fade .modal-dialog {
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.modal.show .modal-dialog {
  animation: ftxModalSlideIn 0.25s ease-out;
}

/* ===== MODAL HEADER - BASE ===== */
.modal-header {
  border-bottom: none;
  padding: 1rem 1.25rem;
  position: relative;
  overflow: hidden;
}

/* Efeito de brilho sutil */
.modal-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  animation: ftxHeaderShine 4s ease-in-out infinite;
  pointer-events: none;
}

/* ===== VARIANTES DE COR DO HEADER ===== */
.modal-header-terracota {
  background: linear-gradient(
    135deg,
    var(--modal-terracota) 0%,
    var(--modal-terracota-light) 50%,
    var(--modal-terracota) 100%
  );
  color: #fff;
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

/* ===== TÍTULO DO MODAL ===== */
.modal-title,
h3.modal-title,
#Titulo h3,
#Titulo .modal-title,
#modalViagens h3,
#modalViagens .modal-title,
.modal-header h3,
.modal-header h5,
.modal-header .modal-title {
  font-family: "Outfit", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.35rem;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Section Card Headers com Outfit */
.section-card-header {
  font-family: "Outfit", sans-serif !important;
  font-weight: 600 !important;
}

.modal-title i {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

/* Ícone animado no título (ocorrências) */
.modal-title i.fa-car-burst,
.modal-title i.fa-triangle-exclamation {
  animation: ftxIconShake 2.5s ease-in-out infinite;
}

/* ===== MODAL BODY ===== */
.modal-body {
  padding: 1.25rem;
  background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
}

/* ===== MODAL FOOTER ===== */
.modal-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0.875rem 1.25rem;
  background: #f8f9fa;
  gap: 0.5rem;
}

/* ===== TABELAS DENTRO DE MODAIS ===== */
.modal-body .table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  margin-bottom: 0;
}

.modal-body .table thead {
  background: linear-gradient(180deg, #3d5771 0%, #2d4559 100%);
}

.modal-body .table thead th {
  border: none;
  padding: 0.75rem 0.625rem;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #fff;
}

.modal-body .table tbody tr {
  transition: background-color 0.15s ease;
}

.modal-body .table tbody tr:hover {
  background-color: rgba(50, 93, 136, 0.06) !important;
}

.modal-body .table tbody td {
  padding: 0.625rem;
  vertical-align: middle;
  border-color: rgba(0, 0, 0, 0.05);
  font-size: 0.875rem;
}

.modal-body .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.015);
}

/* ===== BOTÕES DE AÇÃO NA TABELA DO MODAL ===== */
.modal-body .btn-icon-28 {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
  position: relative;
  overflow: visible; /* Ripple externo */
}

.modal-body .btn-icon-28:hover:not(.disabled) {
  animation: buttonWiggle 0.5s ease-in-out !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

.modal-body .btn-icon-28:active:not(.disabled) {
  transform: translateY(0);
}

.modal-body .btn-icon-28 i {
  font-size: 0.85rem;
}

.modal-body .btn-icon-28.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ===== BADGE DE OCORRÊNCIAS (PULSE) ===== */
.badge-ocorrencias-pulse {
  animation: ftxBadgePulse 2s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.5);
}

/* ===== ALERTA DENTRO DO MODAL ===== */
.modal-body .alert {
  border-radius: 10px;
  border: none;
  padding: 1rem 1.25rem;
}

.modal-body .alert-warning {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
  border-left: 4px solid #ffc107;
  color: #6d5a00;
}

.modal-body .alert-info {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-left: 4px solid #2196f3;
  color: #0d47a1;
}

/* ===== IMAGEM NO MODAL ===== */
.modal-body .img-ocorrencia-viewer {
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease;
  max-height: 450px;
}

.modal-body .img-ocorrencia-viewer:hover {
  transform: scale(1.02);
}

.modal-body .no-image-placeholder {
  border: 2px dashed #dee2e6;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8f9fa, #fff);
  padding: 3rem;
  text-align: center;
}

.modal-body .no-image-placeholder i {
  color: #adb5bd;
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

.modal-body .no-image-placeholder p {
  color: #6c757d;
  font-style: italic;
  margin: 0;
}

/* ===== SCROLLBAR DENTRO DE MODAIS ===== */
.modal-body::-webkit-scrollbar {
  width: 6px;
}

.modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #325d88, #2f4f4f);
  border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3d6f9e, #3a6363);
}

/* ===== RESPONSIVIDADE ===== */
@media (max-width: 768px) {
  .modal-content {
    border-radius: 10px;
    margin: 0.5rem;
  }

  .modal-header {
    padding: 0.875rem 1rem;
  }

  .modal-title {
    font-size: 1rem;
    font-family: "Outfit", sans-serif !important;
  }

  .modal-body {
    padding: 1rem;
  }

  .modal-body .btn-icon-28 {
    width: 34px;
    height: 34px;
  }

  .modal-footer {
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
  }

  .modal-footer .btn {
    flex: 1;
    min-width: 100px;
  }
}

/* ===== SPINNER MODAL (LOADING) ===== */
.modal-spinner-wrapper {
  min-width: 160px;
  padding: 1.5rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  text-align: center;
}

.modal-spinner-wrapper .spinner-border {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 3px;
  color: var(--modal-azul);
}

.modal-spinner-wrapper p {
  margin: 0.75rem 0 0;
  font-weight: 600;
  color: #2d3748;
}

.modal-spinner-wrapper small {
  color: #6c757d;
}
/* =====================================================
   FROTIX - PADRÃO DE MODAIS
   ===================================================== */

/* ===== BASE DO MODAL HEADER FROTIX ===== */
.ftx-modal-header {
  background: linear-gradient(135deg, #2d5a87 0%, #3a6d9e 50%, #2d5a87 100%);
  background-size: 200% 200%;
  animation: ftxHeaderGradientShift 6s ease infinite;
  color: #fff;
  border-bottom: none;
  padding: 1rem 1.25rem;
  position: relative;
  overflow: hidden;
}

.ftx-modal-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  animation: ftxHeaderShine 5s ease-in-out infinite;
  pointer-events: none;
}

.ftx-modal-header .modal-title {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ftx-modal-header .modal-title i {
  font-size: 1.3rem;
  --fa-primary-color: #ffd700;
  --fa-secondary-color: #fff;
  animation: ftxHeaderIconPulse 2s ease-in-out infinite;
}

/* ===== VARIAÇÕES DE COR DO MODAL HEADER ===== */

/* Padrão base */
.ftx-modal-header {
  background: linear-gradient(135deg, #b45a3c 0%, #c96d4e 50%, #b45a3c 100%);
}

/* Terracota (Glosa, Ações moderadas) */
.ftx-modal-header-terracota {
  background: linear-gradient(135deg, #b45a3c 0%, #c96d4e 50%, #b45a3c 100%);
}

/* ===== ANIMAÇÕES DOS MODAIS ===== */






/* ===== MODAL BODY E FOOTER PADRÃO ===== */
.ftx-modal-body {
  padding: 1.5rem;
}

.ftx-modal-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* ===== COMPATIBILIDADE - CLASSES LEGADAS ===== */
.modal-header-glosa {
  background: linear-gradient(135deg, #b45a3c 0%, #c96d4e 50%, #b45a3c 100%);
  background-size: 200% 200%;
  animation: ftxHeaderGradientShift 6s ease infinite;
  color: #fff;
  border-bottom: none;
  padding: 1rem 1.25rem;
  position: relative;
  overflow: hidden;
}

.modal-header-glosa::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  animation: ftxHeaderShine 5s ease-in-out infinite;
  pointer-events: none;
}

.modal-header-glosa .modal-title {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-header-glosa .modal-title i {
  font-size: 1.3rem;
  --fa-primary-color: #ffd700;
  --fa-secondary-color: #fff;
  animation: ftxHeaderIconPulse 2s ease-in-out infinite;
}

/* ===== PADRÃO TERRACOTA PARA MODAIS FORA DOS DASHBOARDS ===== */
.modal-header-terracota,
.modal-header-glosa,
.ftx-modal-header,
.ftx-modal-header-terracota,
.ftx-modal .modal-header,
.modal-header-ocorrencia,
#modalAjustaCustos .modal-header,
#modalFicha .modal-header,
#modalCusto .modal-header,
#modalDetalhes .modal-header,
#modalControleAcesso .modal-header,
#modalFoto .modal-header,
#modalPDF .modal-header,
#modalRegistraPagamento .modal-header,
#modalExibePDFPenalidade .modal-header,
#modalExibeComprovante .modal-header,
#modalAporte .modal-header,
#modalanulacao .modal-header,
#modalDetalheAlerta .modal-header,
#modalBaixaRapida .modal-header,
#modalVisualizarEscala .modal-header,
#modalObservacao .modal-header {
  background: linear-gradient(
    135deg,
    var(--modal-terracota) 0%,
    var(--modal-terracota-light) 50%,
    var(--modal-terracota) 100%
  ) !important;
  color: #fff !important;
  border-bottom: none !important;
}

/* ================================================================
   DATATABLE HEADER - PADRÃO FROTIX
   Cor: #4a6fa5 (azul médio - 20% mais claro que header da página)
   ================================================================ */

/* Header do DataTable - Aplica a TODAS as DataTables do sistema */
.dataTables_wrapper thead,
.dataTables_wrapper table thead,
.dataTable thead,
table.dataTable thead,
table.table thead,
.table thead,
.ftx-table thead,
table thead {
  background-color: #4a6fa5 !important;
}

.dataTables_wrapper thead th,
.dataTables_wrapper table thead th,
.dataTable thead th,
table.dataTable thead th,
table.table thead th,
.table thead th,
.ftx-table thead th,
table thead th {
  background-color: #4a6fa5 !important;
  color: #ffffff !important;
  font-family: "Outfit", sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.3px !important;
  padding: 12px 10px !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Ícones de ordenação do DataTable - brancos */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
  color: #ffffff !important;
  opacity: 0.6 !important;
}

table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  opacity: 1 !important;
}

/* ================================================================
   MODAL DE LOADING - PADRÃO FROTIX (GLOBAL)
   Uso: Qualquer modal de loading do sistema deve usar essas classes
   ================================================================ */

/* Container do Modal */
.ftx-modal-loading .modal-dialog {
  max-width: 360px;
}

.ftx-modal-loading .modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Header do Modal - Gradiente azul padrão */
.ftx-modal-loading .modal-header {
  background: linear-gradient(135deg, #325d88 0%, #2a4d73 50%, #3d6f9e 100%);
  background-size: 200% 200%;
  animation: ftxHeaderGradient 4s ease infinite;
  border-bottom: none;
  padding: 1rem 1.25rem;
  position: relative;
  overflow: hidden;
}

/* Header alternativo - Tema Cyan (para dashboards) */
.ftx-modal-loading.ftx-theme-cyan .modal-header {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 50%, #06b6d4 100%);
}

/* Header alternativo - Tema Laranja */
.ftx-modal-loading.ftx-theme-orange .modal-header {
  background: linear-gradient(135deg, #c67750 0%, #a85d3b 50%, #d4896a 100%);
}

/* Header alternativo - Tema Verde */
.ftx-modal-loading.ftx-theme-green .modal-header {
  background: linear-gradient(135deg, #059669 0%, #047857 50%, #10b981 100%);
}

/* Efeito de brilho no header */
.ftx-modal-loading .modal-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  animation: ftxModalShine 5s ease-in-out infinite;
  pointer-events: none;
}





/* Título do Modal */
.ftx-modal-loading .modal-title {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Ícone do título */
.ftx-modal-loading .modal-title i {
  font-size: 1.3rem;
  --fa-primary-color: #ffd700;
  --fa-secondary-color: #ffffff;
  --fa-secondary-opacity: 0.8;
  animation: ftxLoadingIconPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}



/* Corpo do Modal */
.ftx-modal-loading .modal-body {
  padding: 2rem 1.5rem;
  text-align: center;
  background: #fff;
}

/* Logo FrotiX animado */
.ftx-loading-logo,
.ftx-spin-box img.ftx-loading-logo,
img.ftx-loading-logo {
  display: block !important;
  width: 100px !important;
  height: 100px !important;
  margin: 0 auto 1.25rem !important;
  animation: ftxLogoPulse 1.5s ease-in-out infinite !important;
  filter: drop-shadow(0 4px 8px rgba(50, 93, 136, 0.3)) !important;
}



/* Barra de progresso animada */
.ftx-loading-bar {
  width: 120px;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  margin: 0 auto 1rem;
  overflow: hidden;
}

.ftx-loading-bar::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, #325d88, #3d6f9e, #325d88);
  background-size: 200% 100%;
  border-radius: 2px;
  animation: ftxBarSlide 1.5s ease-in-out infinite;
}

/* Barra tema Cyan */
.ftx-modal-loading.ftx-theme-cyan .ftx-loading-bar::after {
  background: linear-gradient(90deg, #0891b2, #22d3ee, #0891b2);
  background-size: 200% 100%;
}

/* Barra tema Laranja */
.ftx-modal-loading.ftx-theme-orange .ftx-loading-bar::after {
  background: linear-gradient(90deg, #c67750, #d4896a, #c67750);
  background-size: 200% 100%;
}

/* Barra tema Verde */
.ftx-modal-loading.ftx-theme-green .ftx-loading-bar::after {
  background: linear-gradient(90deg, #059669, #10b981, #059669);
  background-size: 200% 100%;
}



/* Textos do Loading */
.ftx-loading-text {
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
}

.ftx-loading-subtext {
  font-size: 0.85rem;
  color: #6c757d;
}

/* =============================================================================
   60 TABLES — Striped, DataTables, paginação, ações
   ============================================================================= */

/* ================================================================
   LOADING OVERLAY
   ================================================================ */
body.loading {
  cursor: progress;
}

/* O processamento de tabelas usa o overlay FrotiX centralizado. */
div.dataTables_wrapper div.dataTables_processing {
  display: none !important;
}

/* ================================================================
   TÍTULO / AVATAR
   ================================================================ */
.header-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px 16px;
  border-bottom: 1px solid #325d88;
}

.header-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 18px 16px 8px;
  border-bottom: 1px solid #325d88;
  margin-bottom: 0;
}

.titulo-paginas {
  font-family: "Outfit", sans-serif;
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.25;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #2f4f4f;
  text-shadow: 0 2px 4px rgba(47, 79, 79, 0.2);
}

/* Ícone Duotone (duas cores) - 20% mais claro e 20% maior */
.titulo-paginas i.fa-duotone {
  --fa-primary-color: #597272;
  --fa-secondary-color: #829595;
  --fa-secondary-opacity: 0.7;
  font-size: 2.4rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(47, 79, 79, 0.25));
}

/* Ícone Solid (fallback) - 20% mais claro e 20% maior */
.titulo-paginas i.fa-solid {
  color: #597272;
  font-size: 2.4rem;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(47, 79, 79, 0.25);
}

.ftx-avatar {
  --avatar-scale: 1.2;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: #e6f2ff;
  margin-right: 8px;
  display: inline-block;
}

.ftx-avatar-ico {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4da3ff;
  font-size: 18px;
  line-height: 1;
  transform: scale(1);
  transition: transform 140ms ease-out, opacity 0.15s ease-in-out;
}

.ftx-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: transform 140ms ease-out, opacity 0.15s ease-in-out;
  transform: scale(1);
}

.ftx-avatar-img.is-visible {
  opacity: 1;
  visibility: visible;
}

.ftx-avatar:hover .ftx-avatar-img,
.ftx-avatar:hover .ftx-avatar-ico,
.ftx-avatar:focus-within .ftx-avatar-img,
.ftx-avatar:focus-within .ftx-avatar-ico,
.ftx-avatar:focus-visible .ftx-avatar-img,
.ftx-avatar:focus-visible .ftx-avatar-ico {
  transform: scale(var(--avatar-scale));
}

@media (prefers-reduced-motion: reduce) {
  .ftx-avatar-img,
  .ftx-avatar-ico {
    transition: opacity 0.15s ease-in-out;
  }
}

/* ================================================================
   BOTÃO VERDE DINHEIRO (cor da cédula de dólar)
   ================================================================ */
.btn.btn-verde-dinheiro,
a.btn.btn-verde-dinheiro,
button.btn-verde-dinheiro {
  background-color: #4b8b3b !important;
  border-color: #3d7230 !important;
  color: white !important;
  box-shadow: 0 0 8px rgba(75, 139, 59, 0.5), 0 2px 4px rgba(75, 139, 59, 0.3) !important;
}

.btn.btn-verde-dinheiro:hover,
a.btn.btn-verde-dinheiro:hover,
button.btn-verde-dinheiro:hover {
  background-color: #3d7230 !important;
  border-color: #2f5925 !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(75, 139, 59, 0.8), 0 6px 12px rgba(75, 139, 59, 0.5) !important;
  color: white !important;
}

.btn.btn-verde-dinheiro:active,
.btn.btn-verde-dinheiro:focus,
a.btn.btn-verde-dinheiro:active,
a.btn.btn-verde-dinheiro:focus,
button.btn-verde-dinheiro:active,
button.btn-verde-dinheiro:focus {
  background-color: #2f5925 !important;
  border-color: #224419 !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(75, 139, 59, 0.35) !important;
  color: white !important;
}

/* ================================================================
   BOTÃO CUSTOS VIAGEM (verde acinzentado)
   ================================================================ */
.btn.btn-custos-viagem,
a.btn.btn-custos-viagem,
button.btn-custos-viagem {
  background-color: #557570 !important;
  border-color: #466560 !important;
  color: white !important;
  box-shadow: 0 0 8px rgba(85, 117, 112, 0.5), 0 2px 4px rgba(85, 117, 112, 0.3) !important;
}

.btn.btn-custos-viagem:hover,
a.btn.btn-custos-viagem:hover,
button.btn-custos-viagem:hover {
  background-color: #466560 !important;
  border-color: #375550 !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(85, 117, 112, 0.8),
    0 6px 12px rgba(85, 117, 112, 0.5) !important;
  color: white !important;
}

.btn.btn-custos-viagem:active,
.btn.btn-custos-viagem:focus,
a.btn.btn-custos-viagem:active,
a.btn.btn-custos-viagem:focus,
button.btn-custos-viagem:active,
button.btn-custos-viagem:focus {
  background-color: #375550 !important;
  border-color: #284540 !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(85, 117, 112, 0.35) !important;
  color: white !important;
}

.btn.btn-custos-viagem.disabled,
a.btn.btn-custos-viagem.disabled,
button.btn-custos-viagem.disabled {
  background-color: #557570 !important;
  border-color: #466560 !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ================================================================
   BOTÃO OCORRÊNCIAS VIAGEM (terracota escuro)
   ================================================================ */
.btn.btn-ocorrencias-viagem,
a.btn.btn-ocorrencias-viagem,
button.btn-ocorrencias-viagem {
  background-color: #a97b6e !important;
  border-color: #8f6a5e !important;
  color: white !important;
  box-shadow: 0 0 8px rgba(169, 123, 110, 0.5),
    0 2px 4px rgba(169, 123, 110, 0.3) !important;
}

.btn.btn-ocorrencias-viagem:hover:not(.disabled),
a.btn.btn-ocorrencias-viagem:hover:not(.disabled),
button.btn-ocorrencias-viagem:hover:not(.disabled) {
  background-color: #8f6a5e !important;
  border-color: #7a5a4f !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(169, 123, 110, 0.8),
    0 6px 12px rgba(169, 123, 110, 0.5) !important;
  color: white !important;
}

.btn.btn-ocorrencias-viagem:active,
.btn.btn-ocorrencias-viagem:focus,
a.btn.btn-ocorrencias-viagem:active,
a.btn.btn-ocorrencias-viagem:focus,
button.btn-ocorrencias-viagem:active,
button.btn-ocorrencias-viagem:focus {
  background-color: #7a5a4f !important;
  border-color: #654a40 !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(169, 123, 110, 0.35) !important;
  color: white !important;
}

.btn.btn-ocorrencias-viagem.disabled,
a.btn.btn-ocorrencias-viagem.disabled,
button.btn-ocorrencias-viagem.disabled {
  background-color: #a97b6e !important;
  border-color: #8f6a5e !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ================================================================
   DATATABLES - BOTÕES DE CONTROLE (PADRÃO LARANJA FROTIX)
   ================================================================ */

/* Botões de ação superiores (Excel, PDF, Mostrar registros) */
.dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dt-buttons button.dt-button,
div.dt-buttons .dt-button,
div.dt-buttons button.dt-button {
  background: linear-gradient(135deg, #cc5200 0%, #b34700 100%) !important;
  border: none !important;
  color: #fff !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border-radius: 0.25rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 4px rgba(204, 82, 0, 0.3) !important;
  margin-right: 0.25rem !important;
  text-transform: none !important;
  font-family: 'Outfit', sans-serif !important;
}

.dataTables_wrapper .dt-buttons .dt-button:hover,
.dataTables_wrapper .dt-buttons button.dt-button:hover,
div.dt-buttons .dt-button:hover,
div.dt-buttons button.dt-button:hover {
  background: linear-gradient(135deg, #b34700 0%, #a03d00 100%) !important;
  box-shadow: 0 4px 8px rgba(204, 82, 0, 0.5) !important;
  transform: translateY(-1px) !important;
}

.dataTables_wrapper .dt-buttons .dt-button:active,
.dataTables_wrapper .dt-buttons button.dt-button:active,
div.dt-buttons .dt-button:active,
div.dt-buttons button.dt-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(204, 82, 0, 0.3) !important;
}

/* Dropdown do botão "Mostrar registros" */
.dataTables_wrapper .dt-button-collection,
div.dt-button-collection {
  background: #fff !important;
  border: 1px solid #cc5200 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.dataTables_wrapper .dt-button-collection .dt-button,
div.dt-button-collection .dt-button {
  background: transparent !important;
  color: #333 !important;
  box-shadow: none !important;
  text-align: left !important;
}

.dataTables_wrapper .dt-button-collection .dt-button:hover,
div.dt-button-collection .dt-button:hover {
  background: #fff3e6 !important;
  color: #cc5200 !important;
  transform: none !important;
}

/* ================================================================
   DATATABLES - TOOLBAR SUPERIOR (linhas | botões | busca)
   ================================================================ */

/* Alinha verticalmente e remove margens flutuantes padrão do DataTables
   dentro da toolbar (o posicionamento fica por conta do flex do dt-toolbar). */
.dataTables_wrapper .dt-toolbar .dataTables_filter,
.dataTables_wrapper .dt-toolbar .dataTables_length {
  margin: 0 !important;
  float: none !important;
}

/* Busca fica logo após os botões, à direita da toolbar. */
.dataTables_wrapper .dt-toolbar-actions .dataTables_filter {
  margin-left: 0.5rem !important;
}

.dataTables_wrapper .dt-toolbar-actions .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  white-space: nowrap;
  font-weight: 600;
}

.dataTables_wrapper .dt-toolbar-actions .dataTables_filter input {
  margin: 0 !important;
  min-width: 200px;
}

/* ================================================================
   DATATABLES - PAGINAÇÃO (PADRÃO LARANJA FROTIX)
   ================================================================ */

/* Botões de paginação */
.dataTables_wrapper .dataTables_paginate .paginate_button,
div.dataTables_paginate .paginate_button {
  background: linear-gradient(135deg, #cc5200 0%, #b34700 100%) !important;
  border: none !important;
  color: #fff !important;
  padding: 0.375rem 0.75rem !important;
  margin: 0 0.125rem !important;
  border-radius: 0.25rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 4px rgba(204, 82, 0, 0.3) !important;
  font-weight: 500 !important;
  font-family: 'Outfit', sans-serif !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
div.dataTables_paginate .paginate_button:hover {
  background: linear-gradient(135deg, #b34700 0%, #a03d00 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 8px rgba(204, 82, 0, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* Botão de página atual (ativo) - mais escuro */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
div.dataTables_paginate .paginate_button.current,
div.dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg, #a03d00 0%, #8a3300 100%) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(204, 82, 0, 0.4) !important;
  transform: none !important;
  font-weight: 700 !important;
}

/* Elementos dentro do botão atual DEVEM ser brancos */
.dataTables_wrapper .dataTables_paginate .paginate_button.current a,
.dataTables_wrapper .dataTables_paginate .paginate_button.current span,
.dataTables_wrapper .dataTables_paginate .paginate_button.current *,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover a,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover span,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover *,
div.dataTables_paginate .paginate_button.current a,
div.dataTables_paginate .paginate_button.current span,
div.dataTables_paginate .paginate_button.current *,
div.dataTables_paginate .paginate_button.current:hover a,
div.dataTables_paginate .paginate_button.current:hover span,
div.dataTables_paginate .paginate_button.current:hover * {
  color: #fff !important;
  font-weight: 700 !important;
}

/* Botões desabilitados */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
div.dataTables_paginate .paginate_button.disabled,
div.dataTables_paginate .paginate_button.disabled:hover {
  background: #e0e0e0 !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 0.6 !important;
}

/* Links e spans dentro de botões desabilitados também ficam brancos */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled a,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled span,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled *,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover a,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover span,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover *,
div.dataTables_paginate .paginate_button.disabled a,
div.dataTables_paginate .paginate_button.disabled span,
div.dataTables_paginate .paginate_button.disabled *,
div.dataTables_paginate .paginate_button.disabled:hover a,
div.dataTables_paginate .paginate_button.disabled:hover span,
div.dataTables_paginate .paginate_button.disabled:hover * {
  color: #ffffff !important;
}

/* Container de paginação */
.dataTables_wrapper .dataTables_paginate,
div.dataTables_paginate {
  margin-top: 1rem !important;
}

/* Ajusta espaçamento entre botões */
.dataTables_wrapper .dataTables_paginate span .paginate_button,
div.dataTables_paginate span .paginate_button {
  margin: 0 0.125rem !important;
}

/* Garante que os números/links dentro dos botões fiquem brancos */
.dataTables_wrapper .dataTables_paginate .paginate_button *,
.dataTables_wrapper .dataTables_paginate .paginate_button a,
.dataTables_wrapper .dataTables_paginate .paginate_button a:link,
.dataTables_wrapper .dataTables_paginate .paginate_button a:visited,
.dataTables_wrapper .dataTables_paginate .paginate_button span,
.dataTables_wrapper .dataTables_paginate .paginate_button .page-link,
.dataTables_wrapper .dataTables_paginate .page-link,
.dataTables_wrapper .dataTables_paginate .pagination .page-item:not(.disabled) .page-link,
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link,
div.dataTables_paginate .paginate_button *,
div.dataTables_paginate .paginate_button a,
div.dataTables_paginate .paginate_button a:link,
div.dataTables_paginate .paginate_button a:visited,
div.dataTables_paginate .paginate_button span,
div.dataTables_paginate .paginate_button .page-link,
div.dataTables_paginate .page-link,
div.dataTables_paginate .pagination .page-item:not(.disabled) .page-link,
div.dataTables_paginate .pagination .page-item.active .page-link {
  color: #fff !important;
  text-decoration: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover *,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover a,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover a:link,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover a:visited,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover span,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover .page-link,
.dataTables_wrapper .dataTables_paginate .page-link:hover,
.dataTables_wrapper .dataTables_paginate .pagination .page-item:not(.disabled) .page-link:hover,
div.dataTables_paginate .paginate_button:hover *,
div.dataTables_paginate .paginate_button:hover a,
div.dataTables_paginate .paginate_button:hover a:link,
div.dataTables_paginate .paginate_button:hover a:visited,
div.dataTables_paginate .paginate_button:hover span,
div.dataTables_paginate .paginate_button:hover .page-link,
div.dataTables_paginate .page-link:hover,
div.dataTables_paginate .pagination .page-item:not(.disabled) .page-link:hover {
  color: #fff !important;
  text-decoration: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current *,
.dataTables_wrapper .dataTables_paginate .paginate_button.current a,
.dataTables_wrapper .dataTables_paginate .paginate_button.current a:link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current a:visited,
.dataTables_wrapper .dataTables_paginate .paginate_button.current span,
.dataTables_wrapper .dataTables_paginate .paginate_button.current .page-link,
.dataTables_wrapper .dataTables_paginate .page-link.current,
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link,
div.dataTables_paginate .paginate_button.current *,
div.dataTables_paginate .paginate_button.current a,
div.dataTables_paginate .paginate_button.current a:link,
div.dataTables_paginate .paginate_button.current a:visited,
div.dataTables_paginate .paginate_button.current span,
div.dataTables_paginate .paginate_button.current .page-link,
div.dataTables_paginate .page-link.current,
div.dataTables_paginate .pagination .page-item.active .page-link {
  color: #fff !important;
  text-decoration: none !important;
}

/* Reforço: paginação Bootstrap dentro do DataTables */
.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link,
.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link *,
div.dataTables_paginate .pagination .page-item .page-link,
div.dataTables_paginate .pagination .page-item .page-link * {
  color: #fff !important;
}

/* 60.4 Pagination — laranja FrotiX (consolidado) */
.page-item .page-link,
.dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: linear-gradient(135deg, #cc5200 0%, #b34700 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(204, 82, 0, 0.3) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.active,
.dataTables_wrapper .page-item.active .page-link,
.page-item.active .page-link {
    background: linear-gradient(135deg, #a03d00 0%, #8a3300 100%) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .page-item .page-link:hover,
.page-item .page-link:hover {
    background: linear-gradient(135deg, #b34700 0%, #a03d00 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Força cor branca em todos os elementos filhos (links, spans) */
.dataTables_wrapper .dataTables_paginate .paginate_button *,
.dataTables_wrapper .page-item .page-link * {
    color: #ffffff !important;
}

/* 60.4.1 Pagination — texto branco em todos os estados */

/* Estado NORMAL */
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled) a,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled) span,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled),
div.dataTables_paginate .paginate_button:not(.disabled) a,
div.dataTables_paginate .paginate_button:not(.disabled) span,
div.dataTables_paginate .paginate_button:not(.disabled),
.page-item:not(.disabled) .page-link,
.page-item:not(.disabled) .page-link a,
.page-item:not(.disabled) .page-link span {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Estado HOVER - Mantém cor branca no hover */
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):hover a,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):hover span,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):hover,
div.dataTables_paginate .paginate_button:not(.disabled):hover a,
div.dataTables_paginate .paginate_button:not(.disabled):hover span,
div.dataTables_paginate .paginate_button:not(.disabled):hover,
.page-item:not(.disabled) .page-link:hover,
.page-item:not(.disabled) .page-link:hover a,
.page-item:not(.disabled) .page-link:hover span {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Estado ATIVO/CURRENT - Mantém cor branca no estado ativo */
.dataTables_wrapper .dataTables_paginate .paginate_button.current a,
.dataTables_wrapper .dataTables_paginate .paginate_button.current span,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.active a,
.dataTables_wrapper .dataTables_paginate .paginate_button.active span,
.dataTables_wrapper .dataTables_paginate .paginate_button.active,
div.dataTables_paginate .paginate_button.current a,
div.dataTables_paginate .paginate_button.current span,
div.dataTables_paginate .paginate_button.current,
div.dataTables_paginate .paginate_button.active a,
div.dataTables_paginate .paginate_button.active span,
div.dataTables_paginate .paginate_button.active,
.page-item.active .page-link,
.page-item.active .page-link a,
.page-item.active .page-link span {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Links específicos - Força cor branca em TODOS os estados de link */
.dataTables_wrapper .dataTables_paginate a:link:not(.disabled),
.dataTables_wrapper .dataTables_paginate a:visited:not(.disabled),
.dataTables_wrapper .dataTables_paginate a:hover:not(.disabled),
.dataTables_wrapper .dataTables_paginate a:active:not(.disabled),
div.dataTables_paginate a:link:not(.disabled),
div.dataTables_paginate a:visited:not(.disabled),
div.dataTables_paginate a:hover:not(.disabled),
div.dataTables_paginate a:active:not(.disabled) {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Botões de navegação específicos (Previous, Next, First, Last) */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:not(.disabled),
.dataTables_wrapper .dataTables_paginate .paginate_button.next:not(.disabled),
.dataTables_wrapper .dataTables_paginate .paginate_button.first:not(.disabled),
.dataTables_wrapper .dataTables_paginate .paginate_button.last:not(.disabled),
div.dataTables_paginate .paginate_button.previous:not(.disabled),
div.dataTables_paginate .paginate_button.next:not(.disabled),
div.dataTables_paginate .paginate_button.first:not(.disabled),
div.dataTables_paginate .paginate_button.last:not(.disabled) {
    background: linear-gradient(135deg, #cc5200 0%, #b34700 100%) !important;
    color: #ffffff !important;
}

/* Links dentro dos botões de navegação */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:not(.disabled) a,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:not(.disabled) a,
.dataTables_wrapper .dataTables_paginate .paginate_button.first:not(.disabled) a,
.dataTables_wrapper .dataTables_paginate .paginate_button.last:not(.disabled) a,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:not(.disabled) span,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:not(.disabled) span,
.dataTables_wrapper .dataTables_paginate .paginate_button.first:not(.disabled) span,
.dataTables_wrapper .dataTables_paginate .paginate_button.last:not(.disabled) span,
div.dataTables_paginate .paginate_button.previous:not(.disabled) a,
div.dataTables_paginate .paginate_button.next:not(.disabled) a,
div.dataTables_paginate .paginate_button.first:not(.disabled) a,
div.dataTables_paginate .paginate_button.last:not(.disabled) a,
div.dataTables_paginate .paginate_button.previous:not(.disabled) span,
div.dataTables_paginate .paginate_button.next:not(.disabled) span,
div.dataTables_paginate .paginate_button.first:not(.disabled) span,
div.dataTables_paginate .paginate_button.last:not(.disabled) span {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* REGRA ULTRA ESPECÍFICA - Pega qualquer link ou span dentro de qualquer botão de paginação */
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled) > a,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled) > span,
div.dataTables_paginate .paginate_button:not(.disabled) > a,
div.dataTables_paginate .paginate_button:not(.disabled) > span,
.dataTables_wrapper .dataTables_paginate span .paginate_button:not(.disabled) a,
div.dataTables_paginate span .paginate_button:not(.disabled) a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* REGRA FINAL - texto da paginação ativa sempre branco e visível */
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link:link,
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link:visited,
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link:hover,
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current a,
.dataTables_wrapper .dataTables_paginate .paginate_button.current span,
.dataTables_wrapper .dataTables_paginate .paginate_button.current *,
div.dataTables_paginate .pagination .page-item.active .page-link,
div.dataTables_paginate .pagination .page-item.active .page-link:link,
div.dataTables_paginate .pagination .page-item.active .page-link:visited,
div.dataTables_paginate .pagination .page-item.active .page-link:hover,
div.dataTables_paginate .pagination .page-item.active .page-link:focus,
div.dataTables_paginate .paginate_button.current,
div.dataTables_paginate .paginate_button.current a,
div.dataTables_paginate .paginate_button.current span,
div.dataTables_paginate .paginate_button.current *,
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:link,
.pagination .page-item.active .page-link:visited,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus,
.pagination .page-item.active .page-link *,
.e-pager .e-currentitem,
.e-pager .e-currentitem:hover,
.e-pager .e-currentitem:focus,
.e-pager .e-currentitem *,
.e-pager .e-currentitem .e-icons,
.e-grid .e-pager .e-currentitem,
.e-grid .e-pager .e-currentitem:hover,
.e-grid .e-pager .e-currentitem:focus,
.e-grid .e-pager .e-currentitem *,
.k-pager-wrap .k-selected,
.k-pager-wrap .k-selected:hover,
.k-pager-wrap .k-selected:focus,
.k-pager-wrap .k-selected *,
.k-pager .k-selected,
.k-pager .k-selected:hover,
.k-pager .k-selected:focus,
.k-pager .k-selected * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* =============================================================================
   70 TOOLTIPS — Bootstrap + Syncfusion (tema único)
   ============================================================================= */

/* ================================================================
   TOOLTIPS SYNCFUSION - PADRÃO FROTIX (Azul sem bordas, sem seta)
   ================================================================ */
.e-tooltip-wrap {
  background: linear-gradient(135deg, #3d5771 0%, #4a6b8a 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-shadow: 0 3px 12px rgba(61, 87, 113, 0.35) !important;
  z-index: 99999 !important;
  pointer-events: none;
}

.e-tooltip-wrap .e-tip-content,
.e-tooltip-wrap .e-tooltip-content {
  background-color: transparent !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  display: block !important;
  visibility: visible !important;
  padding: 0 !important;
}

.e-tooltip-wrap.e-popup {
  background: linear-gradient(135deg, #3d5771 0%, #4a6b8a 100%) !important;
}

/* Ocultar seta do tooltip - Padrão FrotiX */
.e-tooltip-wrap .e-arrow-tip,
.e-tooltip-wrap .e-arrow-tip-outer,
.e-tooltip-wrap .e-arrow-tip-inner,
.e-arrow-tip-outer.e-tip-bottom,
.e-arrow-tip-outer.e-tip-top,
.e-arrow-tip-outer.e-tip-left,
.e-arrow-tip-outer.e-tip-right,
.e-arrow-tip-inner.e-tip-bottom,
.e-arrow-tip-inner.e-tip-top,
.e-arrow-tip-inner.e-tip-left,
.e-arrow-tip-inner.e-tip-right {
  display: none !important;
}
/* Tema específico para Alertas (azul claro) */
.e-tooltip-wrap.ftx-theme-alertas {
  background: linear-gradient(135deg, #c8e6f5 0%, #d4effa 100%) !important;
  border: 1px solid #8ec5e0 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(79, 148, 170, 0.35) !important;
  padding: 8px 12px !important;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #2d4859 !important;
  max-width: 300px !important;
}

.e-tooltip-wrap.ftx-theme-alertas .e-tip-content,
.e-tooltip-wrap.ftx-theme-alertas .e-tooltip-content {
  background: transparent !important;
  color: #2d4859 !important;
  line-height: 1.4 !important;
}

.e-tooltip-wrap.ftx-theme-alertas .e-arrow-tip,
.e-tooltip-wrap.ftx-theme-alertas .e-arrow-tip-outer,
.e-tooltip-wrap.ftx-theme-alertas .e-arrow-tip-inner {
  display: none !important;
}
/* Bootstrap tooltip: sem seta */
.tooltip .tooltip-arrow {
  display: none !important;
}

/* ================================================================
   TOASTS (Syncfusion EJ2) - DESIGN MODERNO
   ================================================================ */
.e-toast-container {
  background: transparent !important;
  backdrop-filter: none !important;
  pointer-events: none;
  z-index: 2147483647 !important;
}

.e-toast-container .e-toast.app-toast {
  display: inline-flex !important;
  width: auto !important;
  min-width: 350px !important;
  max-width: 500px !important;
  margin: 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #fff !important;
  overflow: hidden !important;
  padding: 16px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  backdrop-filter: blur(10px);
  animation: slideInRight 0.3s ease-out;
}

.e-toast-container .e-toast.app-toast .e-toast-message,
.e-toast-container .e-toast.app-toast .e-toast-content {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #fff !important;
  opacity: 1 !important;
  border: none !important;
  width: 100%;
}

.e-toast-container .e-toast.app-toast i {
  font-size: 48px !important;
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0 !important;
}

.e-toast-container .e-toast.app-toast .e-toast-message > div,
.e-toast-container .e-toast.app-toast .e-toast-content > div {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #fff !important;
  flex-grow: 1 !important;
}

.e-toast.app-toast.toast-green {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
}

.e-toast.app-toast.toast-red {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
}

.e-toast.app-toast.toast-amber {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
}

.e-toast.app-toast.toast-green .app-toast-fa {
  --fa-primary-color: #fff;
  --fa-secondary-color: #a7f3d0;
  --fa-secondary-opacity: 0.9;
}

.e-toast.app-toast.toast-red .app-toast-fa {
  --fa-primary-color: #fff;
  --fa-secondary-color: #fecaca;
  --fa-secondary-opacity: 0.9;
}

.e-toast.app-toast.toast-amber .app-toast-fa {
  --fa-primary-color: #fff;
  --fa-secondary-color: #fde68a;
  --fa-secondary-opacity: 0.9;
}

.e-toast.app-toast .e-toast-close-icon,
.e-toast.app-toast .e-toast-close-icon-btn {
  display: none !important;
}

.e-toast.app-toast:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

@media (prefers-reduced-motion: reduce) {
  .e-toast-container .e-toast.app-toast {
    animation: none;
  }
}

/* ================================================================
   TOOLTIPS PADRÃO FROTIX - AZUL PETRÓLEO
   Estilo unificado para todas as tooltips do sistema
   ================================================================ */
.tooltip-ftx-azul {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif !important;
}

.tooltip-ftx-azul .tooltip-inner {
  background-color: #154c62 !important;
  color: #ffffff !important;
  font-size: 0.75rem !important; /* Letras menores */
  font-weight: 500 !important;
  padding: 0.375rem 0.625rem !important; /* Padding compacto */
  border-radius: 0.5rem !important; /* Cantos bem arredondados */
  border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Borda branca fina translúcida */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important; /* Sombra suave */
  max-width: 300px !important;
  text-align: left !important;
  line-height: 1.4 !important;
}

/* Sem setas - estilo FrotiX */
.tooltip-ftx-azul .tooltip-arrow {
  display: none !important;
}

/* Fallback para garantir que setas nunca apareçam */
.tooltip-ftx-azul.bs-tooltip-top .tooltip-arrow::before,
.tooltip-ftx-azul.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip-ftx-azul.bs-tooltip-start .tooltip-arrow::before,
.tooltip-ftx-azul.bs-tooltip-end .tooltip-arrow::before {
  display: none !important;
}

/* =============================================================================
   80 NAVIGATION — nav-syncfusion, menu lateral
   ============================================================================= */

/* ================================================================
   DROPDOWN MOTORISTA COM FOTO (GLOBAL)
   Aplicado a lstMotorista (Index) e cmbMotorista (Upsert)
   ================================================================ */
#lstMotorista_popup .e-dropdownbase .e-list-item,
.lstMotorista_popup .e-dropdownbase .e-list-item,
#cmbMotorista_popup .e-dropdownbase .e-list-item,
.cmbMotorista_popup .e-dropdownbase .e-list-item {
  min-height: 60px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  transition: background-color 0.3s;
}

#lstMotorista_popup .e-dropdownbase .e-list-item img,
.lstMotorista_popup .e-dropdownbase .e-list-item img,
#cmbMotorista_popup .e-dropdownbase .e-list-item img,
.cmbMotorista_popup .e-dropdownbase .e-list-item img {
  height: 45px;
  width: 45px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 10px;
  transition: transform 0.3s ease;
}

#lstMotorista_popup .e-dropdownbase .e-list-item:hover,
.lstMotorista_popup .e-dropdownbase .e-list-item:hover,
#cmbMotorista_popup .e-dropdownbase .e-list-item:hover,
.cmbMotorista_popup .e-dropdownbase .e-list-item:hover {
  background-color: #f0f8ff;
}

#lstMotorista_popup .e-dropdownbase .e-list-item:hover img,
.lstMotorista_popup .e-dropdownbase .e-list-item:hover img,
#cmbMotorista_popup .e-dropdownbase .e-list-item:hover img,
.cmbMotorista_popup .e-dropdownbase .e-list-item:hover img {
  transform: scale(1.2);
}

/* Centralização do conteúdo nos ComboBox com imagem */
.lstMotorista .e-input-group .e-input,
.lstMotorista .e-control-wrapper .e-input,
#lstMotorista .e-input-group .e-input,
#lstMotorista .e-control-wrapper .e-input,
.cmbMotorista .e-input-group .e-input,
.cmbMotorista .e-control-wrapper .e-input,
#cmbMotorista .e-input-group .e-input,
#cmbMotorista .e-control-wrapper .e-input {
  display: flex;
  align-items: center;
}

.lstMotorista .e-input-group .e-input img,
.lstMotorista .e-control-wrapper .e-input img,
#lstMotorista .e-input-group .e-input img,
#lstMotorista .e-control-wrapper .e-input img,
.cmbMotorista .e-input-group .e-input img,
.cmbMotorista .e-control-wrapper .e-input img,
#cmbMotorista .e-input-group .e-input img,
#cmbMotorista .e-control-wrapper .e-input img {
  height: 30px;
  width: 30px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 8px;
}

/* ================================================================
   TABELAS STRIPED - AZUL CLARO FROTIX (PADRÃO GLOBAL)
   Aplica a TODAS as tabelas do sistema
   Base: #E3F2FD | Hover: #C0E0F8 | Header: #4a6fa5
   ================================================================ */

/* TODAS as tabelas - Linhas ímpares azul claro */
.table > tbody > tr:nth-of-type(odd),
.table > tbody > tr:nth-of-type(odd) > td,
.table > tbody > tr:nth-of-type(odd) > th,
table.table-striped tbody tr:nth-of-type(odd),
table.table-striped tbody tr:nth-of-type(odd) td,
table.table-bordered tbody tr:nth-of-type(odd),
table.table-bordered tbody tr:nth-of-type(odd) td,
table.dataTable tbody tr:nth-of-type(odd),
table.dataTable tbody tr:nth-of-type(odd) td,
table.dataTable tbody tr.odd,
table.dataTable tbody tr.odd td,
.dataTables_wrapper table tbody tr:nth-of-type(odd),
.dataTables_wrapper table tbody tr:nth-of-type(odd) td {
  --bs-table-striped-bg: #e3f2fd !important;
  --bs-table-accent-bg: #e3f2fd !important;
  background-color: #e3f2fd !important;
}

/* TODAS as tabelas - Linhas pares fundo branco */
.table > tbody > tr:nth-of-type(even),
.table > tbody > tr:nth-of-type(even) > td,
.table > tbody > tr:nth-of-type(even) > th,
table.table-striped tbody tr:nth-of-type(even),
table.table-striped tbody tr:nth-of-type(even) td,
table.table-bordered tbody tr:nth-of-type(even),
table.table-bordered tbody tr:nth-of-type(even) td,
table.dataTable tbody tr:nth-of-type(even),
table.dataTable tbody tr:nth-of-type(even) td,
table.dataTable tbody tr.even,
table.dataTable tbody tr.even td,
.dataTables_wrapper table tbody tr:nth-of-type(even),
.dataTables_wrapper table tbody tr:nth-of-type(even) td {
  background-color: #ffffff !important;
}

/* TODAS as tabelas - Hover azul mais intenso */
.table > tbody > tr:hover,
.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th,
table.dataTable tbody tr:hover,
table.dataTable tbody tr:hover td,
.dataTables_wrapper table tbody tr:hover,
.dataTables_wrapper table tbody tr:hover td {
  background-color: #c0e0f8 !important;
}

/* Linha selecionada - azul mais visível */
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected td {
  background-color: #a0d0f0 !important;
}

/* ================================================================
   TABELAS - BORDAS PADRÃO FROTIX
   Corrige a remoção de bordas pelo app.bundle.css
   O .table.table-striped (sem .table-bordered) estava sem bordas
   Importante: border-collapse deve ser 'separate' para bordas visíveis
   ================================================================ */

/* Garante que tabelas tenham bordas colapsadas mas visíveis */
.table,
table.table-striped,
table.dataTable,
.dataTables_wrapper table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Borda externa da tabela completa */
.table:not(.table-borderless):not(.table-border-0),
table.table-striped:not(.table-borderless):not(.table-border-0),
table.dataTable:not(.table-borderless):not(.table-border-0),
.dataTables_wrapper table:not(.table-borderless):not(.table-border-0) {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 4px;
  overflow: hidden;
}

/* Borda padrão para todas as células de tabela */
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td,
table.table-striped thead > tr > th,
table.table-striped thead > tr > td,
table.table-striped tbody > tr > th,
table.table-striped tbody > tr > td,
table.table-striped tfoot > tr > th,
table.table-striped tfoot > tr > td,
table.dataTable thead > tr > th,
table.dataTable thead > tr > td,
table.dataTable tbody > tr > th,
table.dataTable tbody > tr > td,
table.dataTable tfoot > tr > th,
table.dataTable tfoot > tr > td,
.dataTables_wrapper table thead > tr > th,
.dataTables_wrapper table thead > tr > td,
.dataTables_wrapper table tbody > tr > th,
.dataTables_wrapper table tbody > tr > td {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Borda do header - mais sutil */
.table > thead > tr > th,
table.table-striped thead > tr > th,
table.dataTable thead > tr > th,
.dataTables_wrapper table thead > tr > th {
  border-bottom: 2px solid rgba(0, 0, 0, 0.15) !important;
}

/* Remove borda duplicada entre células adjacentes */
.table > thead > tr > th + th,
.table > thead > tr > td + td,
.table > tbody > tr > th + th,
.table > tbody > tr > td + td,
table.table-striped thead > tr > th + th,
table.table-striped thead > tr > td + td,
table.table-striped tbody > tr > th + th,
table.table-striped tbody > tr > td + td,
table.dataTable thead > tr > th + th,
table.dataTable thead > tr > td + td,
table.dataTable tbody > tr > th + th,
table.dataTable tbody > tr > td + td {
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Borda entre header e body */
.table > thead + tbody > tr:first-child > td,
.table > thead + tbody > tr:first-child > th,
table.table-striped thead + tbody > tr:first-child > td,
table.table-striped thead + tbody > tr:first-child > th,
table.dataTable thead + tbody > tr:first-child > td,
table.dataTable thead + tbody > tr:first-child > th {
  border-top: 2px solid rgba(0, 0, 0, 0.15) !important;
}

/*表格内部的列表容器也需要边框*/
.panel .table,
.card .table,
.panel-body .table,
.card-body .table {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 4px;
  overflow: hidden;
}

/* =============================================================================
   90 EFFECTS — Ripple, glow, spinner, loading
   ============================================================================= */

/* ================================================================
   BOtíO btn-nfs - Adicionar Novo Requisitante
   ================================================================ */
.btn.btn-nfs,
a.btn.btn-nfs,
button.btn-nfs {
  background-color: #4a6b8a !important;
  border-color: #3a5a7a !important;
  color: white !important;
  box-shadow: 0 0 8px rgba(74, 107, 138, 0.5), 0 2px 4px rgba(74, 107, 138, 0.3) !important;
  transition: all 0.3s ease, transform 0.2s ease !important;
  border-radius: 0.375rem !important;
  border: none;
  position: relative;
}

.btn.btn-nfs:hover,
a.btn.btn-nfs:hover,
button.btn-nfs:hover {
  background-color: #3a5a7a !important;
  border-color: #2a4a6a !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(74, 107, 138, 0.8),
    0 6px 12px rgba(74, 107, 138, 0.5) !important;
  color: white !important;
  filter: brightness(1.1) !important;
}

.btn.btn-nfs:active,
.btn.btn-nfs:focus,
a.btn.btn-nfs:active,
a.btn.btn-nfs:focus,
button.btn-nfs:active,
button.btn-nfs:focus {
  background-color: #2a4a6a !important;
  border-color: #1a3a5a !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(74, 107, 138, 0.35) !important;
  color: white !important;
}

.btn.btn-nfs:disabled,
.btn.btn-nfs.disabled,
a.btn.btn-nfs:disabled,
a.btn.btn-nfs.disabled,
button.btn-nfs:disabled,
button.btn-nfs.disabled {
  background-color: #6a8ba8 !important;
  border-color: #6a8ba8 !important;
  box-shadow: none !important;
  filter: none;
  transform: none !important;
  opacity: 0.6;
  cursor: not-allowed;
}

button.btn-nfs,
a.btn-nfs,
input.btn-nfs {
  background-color: #4a6b8a !important;
  border-color: #3a5a7a !important;
  color: white !important;
  box-shadow: 0 0 8px rgba(74, 107, 138, 0.5), 0 2px 4px rgba(74, 107, 138, 0.3) !important;
  transition: all 0.3s ease, transform 0.2s ease !important;
  border-radius: 0.375rem !important;
}

button.btn-nfs:hover,
a.btn-nfs:hover,
input.btn-nfs:hover {
  background-color: #3a5a7a !important;
  border-color: #2a4a6a !important;
  animation: buttonWiggle 0.5s ease-in-out !important;
  box-shadow: 0 0 20px rgba(74, 107, 138, 0.8),
    0 6px 12px rgba(74, 107, 138, 0.5) !important;
  color: white !important;
  filter: brightness(1.1) !important;
}

button.btn-nfs:active,
button.btn-nfs:focus,
a.btn-nfs:active,
a.btn-nfs:focus,
input.btn-nfs:active,
input.btn-nfs:focus {
  background-color: #2a4a6a !important;
  border-color: #1a3a5a !important;
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 0 0 0.2rem rgba(74, 107, 138, 0.35) !important;
  color: white !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn-nfs,
  .btn.btn-nfs,
  a.btn.btn-nfs,
  button.btn-nfs {
    transition: none;
    animation: none !important;
    transform: none !important;
  }
}

/* ================================================================
   CORREÇÕES DE POPUP SYNCFUSION
   ================================================================ */
.e-dropdown-popup,
.e-popup,
.e-ddl.e-popup-open,
.e-dropdownbase .e-list-parent,
.e-dropdowntree-popup {
  z-index: 10001 !important;
}

.e-dropdowntree .e-ddt-icon,
.e-dropdown .e-input-group-icon,
.e-ddl .e-input-group-icon {
  float: right !important;
  position: relative !important;
  right: 0 !important;
}

.e-dropdown-popup {
  position: absolute !important;
}

/* ================================================================
   CORREÇÕES DE POPUP KENDO
   Kendo anexa os popups (calendário do DatePicker, lista do TimePicker/
   DropDownList/ComboBox etc.) diretamente ao <body>, fora do modal — sem
   este reforço de z-index eles renderizam ATRÁS do modal Bootstrap
   (z-index 1055) e de outros widgets, como visto em Qualidade de Dados.
   ================================================================ */
.k-animation-container,
.k-popup,
.k-list-container,
.k-calendar-container {
  z-index: 10001 !important;
}

/* ================================================================
   ALERTAS MENU (SINO)
   ================================================================ */
.alertas-menu-footer {
  padding: 0.75rem 1rem;
  background: #3d5771;
  border-top: 1px solid #2d4559;
  border-radius: 0 0 0.5rem 0.5rem;
  text-align: center;
}

.alertas-menu-footer a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.alertas-menu-footer a:hover {
  color: #0ea5e9;
  text-decoration: underline;
}

.alertas-vazio {
  padding: 2rem;
  text-align: center;
  color: #6b7280;
  background: transparent;
}

.alertas-vazio i {
  font-size: 3rem;
  color: #d1d5db;
  margin-bottom: 1rem;
  display: block;
}

.alertas-vazio p {
  margin: 0;
  font-size: 0.9rem;
}

.alertas-menu-body::-webkit-scrollbar {
  width: 6px;
}

.alertas-menu-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.alertas-menu-body::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 3px;
}

.alertas-menu-body::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

.alerta-item-acoes {
  display: flex;
  gap: 5px;
}

/* Estilos dos botões de ação dos alertas — definidos em alertassino.css */

/* ================================================================
   BOTÕES EM TABELAS - TAMANHO, BADGE E AVATAR (GLOBAL FROTI X)
   Uso: adicione .ftx-table na <table> e (opcional) .ftx-actions no TD de ações
   ================================================================ */
.ftx-table .ftx-badge-status {
  font-size: var(--ftx-badge-font) !important;
  padding: var(--ftx-badge-pad-v) var(--ftx-badge-pad-h) !important;
  border-radius: var(--ftx-badge-radius) !important;
  line-height: 1.1;
  font-weight: 600;
  text-transform: capitalize !important;
}

/* ================================================================
   BADGES DE STATUS EM DATATABLES - TEXTO EM CAMEL CASE
   Aplica text-transform: capitalize a todos os badges de status
   ================================================================ */
.ftx-badge-status,
.ftx-status-badge,
.ftx-manut-badge,
.ftx-ocorrencia-badge,
.ftx-viagem-badge,
.badge-ativo,
.badge-inativo,
table.dataTable td .badge,
.dataTables_wrapper .badge {
  text-transform: capitalize !important;
}

/* ================================================================
   ÍCONES DUOTONE EM BADGES DE STATUS - DESTAQUE NO ELEMENTO INTERNO
   Diminui a opacidade da camada secundária (círculo) para destacar
   o símbolo interno (check/xmark) que é a camada primária
   ================================================================ */
.ftx-badge-status i.fa-duotone,
.ftx-status-badge i.fa-duotone,
.badge-ativo i.fa-duotone,
.badge-inativo i.fa-duotone,
table.dataTable td .badge i.fa-duotone {
  --fa-primary-color: #fff;
  --fa-secondary-color: #fff;
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 0.3;
}

.ftx-table .ftx-actions a.btn,
.ftx-table .ftx-actions button.btn {
  width: var(--ftx-icon-btn);
  height: var(--ftx-icon-btn);
  padding: 0 !important;
  margin: 2px;
  border-radius: 0.35rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ftx-action-icon);
}

#tblLavador .ftx-actions a.btn,
#tblLavador .ftx-actions button.btn {
  width: var(--ftx-icon-btn);
  height: var(--ftx-icon-btn);
  padding: 0 !important;
  margin: 2px;
  border-radius: 0.35rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ftx-action-icon);
}

.btn-icon-28 {
  width: var(--ftx-icon-btn);
  height: var(--ftx-icon-btn);
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.35rem;
  font-size: var(--ftx-action-icon);
}

/* ================================================================
   PADRÃO FROTIX - BOTÕES DE AÇÃO EM TABELAS (data-ejtip)
   ================================================================ */
th.ftx-coluna-acao,
th[data-ftx-coluna-acao="true"] {
  text-align: center !important;
}

/* Container de ações centralizado */
.ftx-actions,
td .text-center,
td > div.text-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

/* Botão de ação padrão em tabelas */
.btn-icon-28,
.ftx-btn-acao {
  width: 28px;
  height: 28px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: visible; /* Ripple externo */
}

.btn-icon-28:hover:not(.disabled):not(:disabled),
.ftx-btn-acao:hover:not(.disabled):not(:disabled) {
  animation: buttonWiggle 0.5s ease-in-out !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

.btn-icon-28 i,
.ftx-btn-acao i {
  font-size: 0.85rem;
  line-height: 1;
  color: #fff !important;
}

/* Cores de botões de ação */
.btn-icon-28.btn-azul,
.ftx-btn-acao.btn-azul {
  background: linear-gradient(135deg, #3d5771 0%, #2d4559 100%) !important;
  color: #fff !important;
}

.btn-icon-28.btn-azul:hover:not(.disabled),
.ftx-btn-acao.btn-azul:hover:not(.disabled) {
  animation: buttonWiggle 0.5s ease-in-out !important;
  background: linear-gradient(135deg, #2d4559 0%, #1e3040 100%) !important;
}

.btn-icon-28.btn-vinho,
.ftx-btn-acao.btn-vinho {
  background: linear-gradient(135deg, #561d2d 0%, #3d1520 100%) !important;
  color: #fff !important;
}

.btn-icon-28.btn-vinho:hover:not(.disabled),
.ftx-btn-acao.btn-vinho:hover:not(.disabled) {
  animation: buttonWiggle 0.5s ease-in-out !important;
  background: linear-gradient(135deg, #3d1520 0%, #2a0e16 100%) !important;
}

.btn-icon-28.btn-verde,
.ftx-btn-acao.btn-verde {
  background: linear-gradient(135deg, #27ae60 0%, #219a52 100%) !important;
  color: #fff !important;
}

.btn-icon-28.btn-verde:hover:not(.disabled),
.ftx-btn-acao.btn-verde:hover:not(.disabled) {
  animation: buttonWiggle 0.5s ease-in-out !important;
  background: linear-gradient(135deg, #219a52 0%, #1a7a40 100%) !important;
}

.btn-icon-28.btn-amarelo,
.ftx-btn-acao.btn-amarelo {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #fff !important;
}

.btn-icon-28.btn-amarelo:hover:not(.disabled),
.ftx-btn-acao.btn-amarelo:hover:not(.disabled) {
  animation: buttonWiggle 0.5s ease-in-out !important;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
}

.btn-icon-28.btn-terracota,
.ftx-btn-acao.btn-terracota {
  background: linear-gradient(135deg, #cc5500 0%, #b54b00 100%) !important;
  color: #fff !important;
}

.btn-icon-28.btn-terracota:hover:not(.disabled),
.ftx-btn-acao.btn-terracota:hover:not(.disabled) {
  animation: buttonWiggle 0.5s ease-in-out !important;
  background: linear-gradient(135deg, #b54b00 0%, #993f00 100%) !important;
}

/* Estado desabilitado */
.btn-icon-28.disabled,
.btn-icon-28:disabled,
.ftx-btn-acao.disabled,
.ftx-btn-acao:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.ftx-table .ftx-avatar,
.ftx-table .ftx-avatar-img,
.ftx-table img.ftx-avatar-img {
  width: var(--ftx-avatar) !important;
  height: var(--ftx-avatar) !important;
  min-width: var(--ftx-avatar) !important;
  max-width: var(--ftx-avatar) !important;
  min-height: var(--ftx-avatar) !important;
  max-height: var(--ftx-avatar) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ftx-table .ftx-avatar {
  overflow: hidden !important;
  position: relative !important;
}

.ftx-table .ftx-row-gap {
  gap: 8px !important;
  height: auto !important;
}

/* ================================================================
   EFEITO RIPPLE - PADRÃO FROTIX
   Adicionar ao final do frotix.css (após a seção de Modais)
   ================================================================ */

/* ===== KEYFRAME DO RIPPLE ===== */


/* ===== CONTAINER DO RIPPLE ===== */
.ftx-ripple {
  position: relative;
  overflow: visible;
  /* Permite ripple externo (fora do botão) */
}

/* ===== CÍRCULO DO RIPPLE ===== */
.ftx-ripple-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  animation: ftxRippleAnim 600ms ease-out forwards;
  /* Tamanho base - será ajustado via JS */
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
}

/* ===== RIPPLE BRANCO (para botões escuros) ===== */
.ftx-ripple-light .ftx-ripple-circle,
.btn-vinho .ftx-ripple-circle,
.btn-azul .ftx-ripple-circle,
.btn-verde .ftx-ripple-circle,
.btn-terracota .ftx-ripple-circle,
.btn-dinheiro .ftx-ripple-circle,
.btn-primary .ftx-ripple-circle,
.btn-secondary .ftx-ripple-circle,
.btn-success .ftx-ripple-circle,
.btn-danger .ftx-ripple-circle,
.btn-info .ftx-ripple-circle,
.btn-dark .ftx-ripple-circle,
.btn-nfs .ftx-ripple-circle,
[class*="btn-icon-28"] .ftx-ripple-circle,
[class*="btn-acao-ftx"] .ftx-ripple-circle {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.2) 40%,
    transparent 70%
  );
}

/* ===== RIPPLE INTENSO PARA BOTÕES LARANJA ===== */
.btn-header-orange .ftx-ripple-circle,
.btn-fundo-laranja .ftx-ripple-circle {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.6) 30%,
    rgba(255, 255, 255, 0.3) 55%,
    transparent 75%
  );
  animation-duration: 800ms;
  width: 120px;
  height: 120px;
  margin-left: -60px;
  margin-top: -60px;
}

/* ===== RIPPLE ESCURO (para botões claros) ===== */
.ftx-ripple-dark .ftx-ripple-circle,
.btn-warning .ftx-ripple-circle,
.btn-light .ftx-ripple-circle,
.btn-outline-secondary .ftx-ripple-circle,
.btn-outline-primary .ftx-ripple-circle,
.btn-outline-success .ftx-ripple-circle,
.btn-outline-warning .ftx-ripple-circle,
.btn-outline-danger .ftx-ripple-circle,
.btn-outline-info .ftx-ripple-circle,
.btn-outline-light .ftx-ripple-circle,
.btn-link .ftx-ripple-circle {
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    transparent 70%
  );
}

/* ===== APLICAÇÃO AUTOMÁTICA EM BOTÕES ===== */
/* Todos os botões Bootstrap e FrotiX recebem overflow:visible e position:relative */
/* overflow:visible permite ripple externo (efeito "pedra na água" fora do botão) */
.btn,
[class*="btn-"],
button[type="button"],
button[type="submit"],
.btn-icon-28,
.btn-acao-ftx {
  position: relative;
  overflow: visible;
}

/* ===== VARIANTE MAIS SUTIL (opcional) ===== */
.ftx-ripple-subtle .ftx-ripple-circle {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.1) 40%,
    transparent 70%
  );
  animation-duration: 500ms;
}

/* ===== VARIANTE MAIS INTENSA (opcional) ===== */
.ftx-ripple-intense .ftx-ripple-circle {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.35) 40%,
    transparent 70%
  );
  animation-duration: 700ms;
}

/* ===== DESABILITAR RIPPLE EM ELEMENTOS ESPECÍFICOS ===== */
.no-ripple,
.btn[disabled],
.btn.disabled,
[aria-disabled="true"] {
  overflow: visible !important;
}

.no-ripple .ftx-ripple-circle {
  display: none !important;
}

/* ================================================================
   NAVEGAÇÃO SYNCFUSION TREEVIEW - ESTILOS GLOBAIS
   ================================================================ */

/* Container da navegação Syncfusion */
.nav-syncfusion {
  padding: 0;
  margin: 0;
}

/* Remove estilos padrão do TreeView Syncfusion */
.nav-syncfusion .e-treeview {
  background: transparent !important;
  border: none !important;
}

.nav-syncfusion .e-treeview .e-ul {
  padding: 0;
  margin: 0;
  background: transparent !important;
}

.nav-syncfusion .e-treeview .e-list-item {
  padding: 0;
  margin: 0;
  background: transparent !important;
}

.nav-syncfusion .e-treeview .e-text-content {
  padding: 0 !important;
  background: transparent !important;
}

/* Link do menu Syncfusion */
.nav-syncfusion .nav-link {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  position: relative;
  transition: background-color 0.2s ease;
}

.nav-syncfusion .nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
  color: #fff;
}

/* Ícones duotone na navegação Syncfusion */
.nav-syncfusion .nav-icon.fa-duotone {
  --fa-primary-color: #a0aec0;
  --fa-secondary-color: #c67750;
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
  margin-right: 10px;
}

/* Ícones de subitens (níveis 1 e 2) */
.nav-syncfusion .nivel-1 .nav-icon.fa-duotone,
.nav-syncfusion .nivel-2 .nav-icon.fa-duotone {
  --fa-primary-color: #b0bcc8;
  --fa-secondary-color: #d4917a;
  font-size: 0.95rem;
}

/* Indentação hierárquica */
.nav-syncfusion .nivel-0 .nav-link {
  padding-left: 15px;
}
.nav-syncfusion .nivel-1 .nav-link {
  padding-left: 30px;
}
.nav-syncfusion .nivel-2 .nav-link {
  padding-left: 45px;
}

/* Seta de expansão */
.nav-syncfusion .e-treeview .e-icons.e-icon-collapsible,
.nav-syncfusion .e-treeview .e-icons.e-icon-expandable {
  color: #b1d4e0 !important;
  font-size: 0.8rem;
}

/* Bolinha de seleção - lado direito */
.nav-syncfusion .selection-dot {
  display: none;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.35rem;
  color: #c67750 !important;
}

.nav-syncfusion .e-list-item.e-active .selection-dot,
.nav-syncfusion .e-list-item.ftx-active .selection-dot,
.nav-syncfusion .nav-link.active .selection-dot {
  display: inline-block;
}

/* Item ativo - fundo amarelo translúcido com borda */
.nav-syncfusion .e-list-item.e-active > .e-text-content > .nav-link,
.nav-syncfusion .e-list-item.ftx-active > .e-text-content > .nav-link,
.nav-syncfusion .nav-link.active {
  background: rgba(255, 193, 7, 0.15) !important;
  border-left: 3px solid #ffc107;
}

/* Texto do menu */
.nav-syncfusion .nav-text {
  flex: 1;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 20px;
}

/* Remove fullRow highlight padrão do Syncfusion */
.nav-syncfusion .e-treeview .e-fullrow {
  display: none !important;
}

/* =============================================================================
   95 VENDOR PATCHES — Kendo license, Syncfusion fixes globais
   ============================================================================= */

/* ===================================================== */
/* Kendo UI License Warning Suppression                  */
/* Suprime banners e watermarks de licença trial do      */
/* Kendo UI 2025.x (licença perpétua expirada 2024-05-23)*/
/* ===================================================== */

/* 1) Banner amarelo (#k-license-banner) e variantes de classe */
.k-licensing-warning,
[class*="k-license-"],
[class*="k-trial"],
.k-trial-text,
[id*="k-license"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* 2) Watermark via Shadow DOM (Kendo UI 2025.x)
   O watermark é um div filho direto do container .k-widget/.k-editor
   injetado via attachShadow({mode:"closed"}) com PNG base64.
   Tem MutationObserver de proteção que re-adiciona se removido via JS.
   CSS display:none NÃO dispara o MutationObserver - é a solução correta. */
.k-widget > div[style*="pointer-events: none"][style*="position: absolute"],
.k-editor > div[style*="pointer-events: none"][style*="position: absolute"] {
    display: none !important;
    visibility: hidden !important;
}

/* ======== KENDO COMBOBOX - ORIGEM/DESTINO ======== */
/* autoWidth: true + .Popup(AppendTo("body")) cuida do dimensionamento.
   Removido bloco de largura fixa 450px que impedia o autoWidth. */

/* ======== AUDITORIA DE REGISTRO — BONECO DE CRIAÇÃO ======== */
/* Boneco com "+" (fa-user-plus) em duotone verde escuro / verde claro, exibido acima dos
   botões de fechar de todo cadastro, ao lado do nome de quem criou o registro.
   Aplicado pelo AuditoriaRegistroViewModel (partial _AuditoriaRegistro), por auditoria.js
   (cadastros em modal) e pela página de Viagem (lblUsuarioCriacao). */
.fa-duotone.ftx-icone-criacao {
    --fa-primary-color: #1F3A6E;
    --fa-secondary-color: #5B7DB8;
    --fa-secondary-opacity: 1;
}

/* Espaçamento entre o boneco e o texto "Criado por: Nome". */
.auditoria-evento label i,
#lblUsuarioCriacao i.ftx-icone-criacao {
    margin-right: 0.5rem;
}

/* Container dos bonecos dentro de modais: separado dos botões do rodapé. */
.ftx-auditoria-modal {
    margin-bottom: 0.75rem;
}

/* ================================================================
   PADRÃO VISUAL DE BOTÕES (2026-10-04)
   Catálogo: wwwroot/json/padroes-visuais.json | TagHelper <ftx-botao> | FtxBotoes (JS)
   ================================================================ */

/* Ícones duotone dentro de botões coloridos: brancos, sem precisar de style inline.
   Sem !important: um style inline explícito continua valendo. */
.btn:is(.btn-azul, .btn-vinho, .btn-verde, .btn-header-orange, .btn-fundo-laranja, .btn-voltar,
        .btn-terracota, .btn-amarelo, .btn-foto, .btn-marrom, .btn-preto) i.fa-duotone,
.btn-close-modal i.fa-duotone {
  --fa-primary-color: #fff;
  --fa-secondary-color: rgba(255, 255, 255, 0.7);
}

/* Exportar/abrir PDF: terracota (mesmo tom dos botões de exportação do DataTables) */
.btn.btn-terracota:not(.btn-icon-28) {
  background: linear-gradient(135deg, #cc5500 0%, #b54b00 100%);
  color: #fff !important;
  border: none;
  border-radius: 0.375rem;
  transition: all 0.3s ease, transform 0.2s ease;
}

.btn.btn-terracota:not(.btn-icon-28):hover,
.btn.btn-terracota:not(.btn-icon-28):focus {
  background: linear-gradient(135deg, #b54b00 0%, #8f3c00 100%);
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}