/* Calendario CSS Customizado */
 ul,
 ol,
 li {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 #demo {
     width: 300px;
     margin: 30px auto;
 }

 p {
     margin: 0;
 }


 .calendar {
     padding-bottom: 0 !important;
     margin-bottom: 0 !important;
 }


 .calendar-hd {
     height: 70px !important;
     margin-top: 20px !important;
 }





 .check-card.active-card {
     border: 2px solid var(--highlight-color, #4CAF50);
     background-color: rgba(76, 175, 80, 0.05);
 }

 .check-card .icon-check-1 {
     display: block;
 }

 .check-card .icon-check-2 {
     display: none;
 }

 .check-card.active-card .icon-check-1 {
     display: none;
 }

 .check-card.active-card .icon-check-2 {
     display: block;
 }

 .clicavel {
     cursor: pointer !important;
 }

 .grayscale {
     filter: grayscale(100%) !important;
 }

 .desativado {
     /* opacity: 0.5 !important; */
     pointer-events: none !important;
     filter: grayscale(1) !important;
 }


 .desativadoChaVencida {
     /* opacity: 0.5 !important; */
     pointer-events: none !important;
     filter: grayscale(1) !important;
 }



 /* Container para desktop - simula smartphone */
 .desktop-container {
     max-width: 500px !important;
     width: 100% !important;
     margin: 0 auto !important;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) !important;
     border-radius: 20px !important;
     overflow: hidden !important;
     position: relative !important;
     background: #fff !important;
     min-height: 100vh !important;
     transform: translateZ(0) !important;
     /* Força aceleração de hardware */
 }

 /* Ajustes para o container desktop */
 .desktop-container .header {
     border-radius: 20px 20px 0 0 !important;
 }

.desktop-container .footer-bar-6 {
    border-radius: 0 0 20px 20px !important;
}

/* 2025-01-13 01:15 @filipemontt - Adicionar padding-bottom ao footer para melhor espaçamento */
#footer-bar.footer-bar-6 {
    padding-bottom: 15px !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

#footer-bar.footer-bar-6 a {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Garantir que os ícones e textos fiquem centralizados */
#footer-bar.footer-bar-6 a i {
    margin-bottom: 2px !important;
}

#footer-bar.footer-bar-6 a span {
    margin-top: 0 !important;
    line-height: 1.2 !important;
}

/* Solução alternativa caso a primeira não funcione - forçar altura mínima */
#footer-bar.footer-bar-6 {
    min-height: 80px !important;
}

/* Garantir que o conteúdo não fique colado no bottom */
#footer-bar.footer-bar-6::after {
    content: '';
    height: 15px;
    display: block;
}



 /* Indicador visual para desktop */
 .desktop-indicator {
     position: fixed;
     top: 50px;
     right: 20px;
     background: rgba(0, 0, 0, 0.7);
     color: white;
     padding: 5px 10px;
     border-radius: 15px;
     font-size: 12px;
     z-index: 99999;
     display: none;
     pointer-events: none;
     transform: translateZ(0);
     opacity: 0.5;
 }

 /* Ajuste para telas muito grandes */
 @media (min-width: 768px) {
     body {
         background: linear-gradient(135deg, #f7f7f7 0%, #f9f9f9 100%) !important;
         padding: 20px 0 !important;
         min-height: 100vh !important;
     }

     /* Ajustes específicos para o modo desktop */
     body.desktop-mode {
         display: flex !important;
         justify-content: center !important;
         align-items: flex-start !important;
     }

     body.desktop-mode .desktop-container {
         margin-top: 0 !important;
         margin-bottom: 0 !important;
     }
 }

 /* Ajustes para telas muito pequenas (smartphones) */
 @media (max-width: 767px) {
     .desktop-indicator {
         display: none !important;
     }
 }

 /* Garante que o indicador sempre fique no canto da viewport */
 .desktop-indicator {
     position: fixed !important;
     top: 10px !important;
     right: 10px !important;
     z-index: 99999 !important;
     transform: translateZ(0) !important;
 }

 /* Ajuste específico para quando o container está ativo */
 body.desktop-mode .desktop-indicator {
     position: fixed !important;
     top: 10px !important;
     right: 10px !important;
     z-index: 99999 !important;
 }

 /* Correção para menu-hider funcionar corretamente com container desktop */
 .menu-hider {
     position: fixed !important;
     top: -100px !important;
     bottom: -100px !important;
     left: 0px !important;
     right: 0px !important;
     z-index: 100 !important;
     pointer-events: none !important;
     opacity: 0 !important;
     transition: all 300ms ease !important;
 }

 .menu-hider.menu-active {
     opacity: 1 !important;
     pointer-events: all !important;
 }

 /* Garante que o menu-hider funcione mesmo com container desktop */
 body.desktop-mode .menu-hider {
     position: fixed !important;
     top: -100px !important;
     bottom: -100px !important;
     left: 0px !important;
     right: 0px !important;
     z-index: 100 !important;
     background-color: rgba(0, 0, 0, 0.35) !important;
 }

 body.desktop-mode .menu-hider.menu-active {
     opacity: 1 !important;
     pointer-events: all !important;
 }

 /* Força remoção do menu-hider quando não há menu ativo no desktop */
 body.desktop-mode .menu-hider:not(.menu-active) {
     opacity: 0 !important;
     pointer-events: none !important;
     display: none !important;
 }

 /* Garante que o menu-hider seja visível apenas quando necessário */
 .menu-hider:not(.menu-active) {
     opacity: 0 !important;
     pointer-events: none !important;
     display: none !important;
 }

 /* Estilos para o modal de crop de avatar */
 .crop-container {
     position: relative;
     background: #f8f9fa;
     border-radius: 8px;
     overflow: hidden;
     border: 2px solid #e9ecef;
     min-height: 300px;
 }

 /* Responsivo para telas menores */
 @media (max-width: 768px) {
     .crop-container {
         height: 250px !important;
         min-height: 250px !important;
     }
 }

 .crop-container img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
 }

 /* Modal de crop específico */
 #menu-crop-avatar {
     max-height: 90vh !important;
     overflow-y: auto !important;
     display: flex !important;
     flex-direction: column !important;
     width: 100% !important;
     max-width: 100% !important;
     left: 0 !important;
     right: 0 !important;
     margin: 0 !important;
     position: fixed !important;
     z-index: 1000 !important;
 }

 /* Garantir que o modal fique centralizado */
 .menu-hider.menu-active+#menu-crop-avatar,
 .menu-active#menu-crop-avatar {
     top: 50% !important;
     transform: translateY(-50%) !important;
 }

 #menu-crop-avatar .content {
     padding: 20px !important;
     flex: 1 !important;
     overflow-y: auto !important;
 }

 #menu-crop-avatar .menu-title {
     padding: 15px 20px !important;
     border-bottom: 1px solid #e9ecef;
     margin-bottom: 0 !important;
     flex-shrink: 0 !important;
 }

 /* Garantir que o modal tenha altura mínima */
 @media (max-height: 600px) {
     #menu-crop-avatar {
         max-height: 95vh !important;
     }

     .crop-container {
         height: 250px !important;
         min-height: 250px !important;
     }
 }

 @media (max-height: 500px) {
     .crop-container {
         height: 200px !important;
         min-height: 200px !important;
     }
 }

 /* Forçar largura total do modal de crop */
 .menu-box-modal#menu-crop-avatar {
     width: 100vw !important;
     max-width: 100vw !important;
     left: 0 !important;
     right: 0 !important;
     top: 50% !important;
     transform: translateY(-50%) !important;
     margin-left: 0 !important;
     margin-right: 0 !important;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
 }

 /* Ajustar para desktop container */
 body.desktop-mode .menu-box-modal#menu-crop-avatar {
     width: 100% !important;
     max-width: 100% !important;
     left: 0 !important;
     right: 0 !important;
     top: 50% !important;
     transform: translateY(-50%) !important;
 }

 /* Preview do avatar */
 #avatar-preview {
     transition: all 0.3s ease;
     border: 3px solid var(--highlight-color, #007bff);
     box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
 }

 /* Botões do modal */
 .menu-box-modal .btn {
     transition: all 0.3s ease;
     font-weight: 600;
     letter-spacing: 0.5px;
 }

 .menu-box-modal .btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }

 /* Loading state */
 .btn[style*="pointer-events: none"] {
     opacity: 0.7;
     cursor: not-allowed;
 }

 /* Toast de sucesso */
 .toast {
     border: none;
     border-radius: 10px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }

 .toast-header.bg-success {
     background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
     border-radius: 10px 10px 0 0;
 }

 /* Avatar clicável */
 .clicavel {
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .clicavel:hover {
     transform: scale(1.05);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }

 /* Cropper customizado */
 .cropper-container {
     border-radius: 8px;
     overflow: hidden;
     position: relative !important;
 }

 .cropper-view-box {
     border-radius: 50% !important;
     outline: 2px solid #007bff !important;
     outline-offset: -1px !important;
 }

 .cropper-face {
     border-radius: 50% !important;
 }

 .cropper-drag-box {
     background-color: rgba(0, 123, 255, 0.1) !important;
 }

 .cropper-modal {
     background-color: rgba(0, 0, 0, 0.5) !important;
 }

 .cropper-line {
     background-color: #007bff !important;
 }

 .cropper-point {
     background-color: #007bff !important;
     border: 2px solid #ffffff !important;
     width: 12px !important;
     height: 12px !important;
 }

 .cropper-point.point-se {
     border-radius: 50% !important;
 }

 .cropper-point.point-sw {
     border-radius: 50% !important;
 }

 .cropper-point.point-nw {
     border-radius: 50% !important;
 }

 .cropper-point.point-ne {
     border-radius: 50% !important;
 }

 /* Garantir que o cropper seja visível */
 .crop-container .cropper-container {
     display: block !important;
     visibility: visible !important;
     opacity: 1 !important;
 }

 /* CORREÇÃO FORÇADA para menu-hider no desktop */
 @media (min-width: 768px) {
     .menu-hider {
         transition: none !important;
     }

     .menu-hider:not(.menu-active) {
         opacity: 0 !important;
         pointer-events: none !important;
         display: none !important;
         visibility: hidden !important;
     }

     /* Força remoção se não há menu ativo */
     body:not(.has-active-menu) .menu-hider {
         opacity: 0 !important;
         pointer-events: none !important;
         display: none !important;
         visibility: hidden !important;
     }
 }

 /* ============================================================================ */
 /* 2025-09-30 @filipemontt - ESTILOS CUSTOMIZADOS PARA FLATPICKR MOBILE */
 /* ============================================================================ */

 /* Container principal do calendário - FORÇAR CENTRALIZAÇÃO */
 #calendario-inline {
     background: white;
     padding: 0 !important;
     margin-left: auto !important;
     margin-right: auto !important;
     display: block !important;
     width: 320px !important;
     text-align: center !important;
     position: relative !important;
 }

 /* Esconder o input que o Flatpickr cria */
 #calendario-inline.flatpickr-input {
     display: none !important;
     width: 0 !important;
     height: 0 !important;
     padding: 0 !important;
     margin: 0 !important;
     border: none !important;
     position: absolute !important;
     visibility: hidden !important;
 }

 /* Flatpickr calendar (irmão do input, não filho) - FORÇAR CENTRALIZAÇÃO */
 .flatpickr-calendar.inline,
 .flatpickr-calendar.animate.inline {
     width: 320px !important;
     max-width: 320px !important;
     min-width: 320px !important;
     box-shadow: none !important;
     border: none !important;
     background: white !important;
     margin: 15px auto 0 auto !important;
     position: static !important;
     left: auto !important;
     right: auto !important;
     transform: none !important;
     display: block !important;
 }

 /* Forçar remoção de TODAS as bordas e shadows */
 #calendario-inline .flatpickr-calendar.inline {
     box-shadow: none !important;
     border: none !important;
 }

 #calendario-inline .flatpickr-calendar.open {
     box-shadow: none !important;
     border: none !important;
 }

 #calendario-inline .flatpickr-calendar:before,
 #calendario-inline .flatpickr-calendar:after {
     display: none !important;
     border: none !important;
     box-shadow: none !important;
 }

 #calendario-inline .flatpickr-months {
     margin-bottom: 15px;
     background: white;
 }

 #calendario-inline .flatpickr-month {
     background: white;
 }

 #calendario-inline .flatpickr-current-month {
     font-size: 18px;
     font-weight: 600;
     padding: 10px 0;
     color: #333;
 }

 #calendario-inline .flatpickr-monthDropdown-months {
     background: white;
 }

 #calendario-inline .flatpickr-weekdays {
     background: white !important;
     margin-bottom: 5px;
 }

 #calendario-inline .flatpickr-weekday {
     color: #666;
     font-weight: 600;
     font-size: 13px;
     background: white;
 }

 #calendario-inline .flatpickr-days {
     background: white !important;
     border: none !important;
     box-shadow: none !important;
 }

 #calendario-inline .flatpickr-rContainer {
     background: white !important;
     border: none !important;
     box-shadow: none !important;
 }

 #calendario-inline .dayContainer {
     background: white !important;
     border: none !important;
     box-shadow: none !important;
     min-width: 320px !important;
     max-width: 320px !important;
     width: 320px !important;
 }

 /* Remover bordas de TODOS os elementos do calendário */
 #calendario-inline .flatpickr-calendar *,
 #calendario-inline .flatpickr-calendar *:before,
 #calendario-inline .flatpickr-calendar *:after {
     box-shadow: none !important;
 }

 #calendario-inline .flatpickr-day {
     border-radius: 6px;
     margin: 2px;
     font-size: 14px;
     height: 40px;
     line-height: 40px;
     width: 40px;
     max-width: 40px;
     border: none !important;
     background: white;
     color: #333;
 }

 #calendario-inline .flatpickr-day:hover {
     background: #f5f5f5 !important;
     border: none !important;
 }

 #calendario-inline .flatpickr-day.prevMonthDay,
 #calendario-inline .flatpickr-day.nextMonthDay {
     color: #ccc;
     background: white;
 }

 #calendario-inline .flatpickr-day.selected {
     background: var(--highlight-color, #222222) !important;
     border-color: var(--highlight-color, #222222) !important;
     color: white !important;
     font-weight: bold;
 }

 #calendario-inline .flatpickr-day.today {
     border: 2px solid var(--highlight-color, #dbdbdb);
     background: transparent;
     color: var(--highlight-color, #dbdbdb);
     font-weight: bold;
 }

 #calendario-inline .flatpickr-day.today.selected {
     background: var(--highlight-color, #222222) !important;
     color: white !important;
 }

 /* Dias com eventos */
 #calendario-inline .flatpickr-day .evento-indicator {
     position: absolute;
     bottom: 2px;
     left: 50%;
     transform: translateX(-50%);
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background-color: #222222 !important;
 }

 /* Marina fechada */
 #calendario-inline .flatpickr-day.marina-fechada {
     background-color: #f5f5f5 !important;
     color: #ccc !important;
     cursor: not-allowed !important;
     text-decoration: line-through !important;
 }

 #calendario-inline .flatpickr-day.marina-fechada:hover {
     background-color: #f5f5f5 !important;
 }

 /* 2025-09-30 @filipemontt - Datas passadas desabilitadas */
 #calendario-inline .flatpickr-day.flatpickr-disabled,
 .flatpickr-calendar.inline .flatpickr-day.flatpickr-disabled {
     color: #ddd !important;
     cursor: not-allowed !important;
     background-color: #fafafa !important;
 }

 #calendario-inline .flatpickr-day.flatpickr-disabled:hover,
 .flatpickr-calendar.inline .flatpickr-day.flatpickr-disabled:hover {
     background-color: #fafafa !important;
     color: #ddd !important;
 }

 /* Navegação de meses */
 #calendario-inline .flatpickr-prev-month,
 #calendario-inline .flatpickr-next-month,
 .flatpickr-calendar.inline .flatpickr-prev-month,
 .flatpickr-calendar.inline .flatpickr-next-month {
     padding: 10px;
     background: white;
     border: none;
 }

 /* Seta anterior - afastar da borda esquerda */
 #calendario-inline .flatpickr-prev-month,
 .flatpickr-calendar.inline .flatpickr-prev-month {
     padding-left: 25px !important;
 }

 /* Seta próxima - afastar da borda direita */
 #calendario-inline .flatpickr-next-month,
 .flatpickr-calendar.inline .flatpickr-next-month {
     padding-right: 25px !important;
 }

 #calendario-inline .flatpickr-prev-month svg,
 #calendario-inline .flatpickr-next-month svg,
 .flatpickr-calendar.inline .flatpickr-prev-month svg,
 .flatpickr-calendar.inline .flatpickr-next-month svg {
     fill: #666;
 }

 #calendario-inline .flatpickr-prev-month:hover,
 #calendario-inline .flatpickr-next-month:hover,
 .flatpickr-calendar.inline .flatpickr-prev-month:hover,
 .flatpickr-calendar.inline .flatpickr-next-month:hover {
     background: white !important;
 }

 #calendario-inline .flatpickr-prev-month:hover svg,
 #calendario-inline .flatpickr-next-month:hover svg,
 .flatpickr-calendar.inline .flatpickr-prev-month:hover svg,
 .flatpickr-calendar.inline .flatpickr-next-month:hover svg {
     fill: var(--highlight-color, #222) !important;
 }

 /* Remover qualquer borda do innerContainer */
 #calendario-inline .flatpickr-innerContainer {
     background: white !important;
     border: none !important;
     box-shadow: none !important;
 }

 /* Regra FINAL para sobrescrever qualquer estilo padrão do Flatpickr */
 .flatpickr-calendar.inline {
     box-shadow: none !important;
     border: 0 !important;
     border-width: 0 !important;
     outline: none !important;
 }

 /* Card do calendário sem borda */
 .card-style:has(#calendario-inline) {
     border: none !important;
     box-shadow: none !important;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 /* Forçar wrapper do calendário centralizado */
 #calendario-inline:parent,
 [id*="calendario-inline"] {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
 }

 /* Garantir que o flatpickr-wrapper não desloque */
 .flatpickr-wrapper {
     display: block !important;
     width: 320px !important;
     margin-left: auto !important;
     margin-right: auto !important;
     position: static !important;
     left: auto !important;
     right: auto !important;
 }

 /* Remover qualquer float ou position que possa deslocar */
 .flatpickr-calendar,
 #calendario-inline {
     float: none !important;
 }

 /* REGRA FINAL - Forçar centralização absoluta do calendário inline */
 body .flatpickr-calendar.inline,
 body .flatpickr-calendar.animate.inline,
 .card-style .flatpickr-calendar.inline {
     margin: 0 auto !important;
     left: 0 !important;
     right: 0 !important;
     position: static !important;
     float: none !important;
 }

 /* Garantir que o container pai tenha text-align center */
 .card-style:has(#calendario-inline),
 [style*="calendario-inline"] {
     text-align: center !important;
 }

 /* Responsivo - Ajuste apenas para telas muito pequenas */
 @media (max-width: 360px) {
     #calendario-inline {
         padding: 10px 5px !important;
     }

     #calendario-inline .flatpickr-calendar {
         width: 300px !important;
         max-width: 300px !important;
         min-width: 300px !important;
     }

     #calendario-inline .dayContainer {
         width: 300px !important;
         min-width: 300px !important;
         max-width: 300px !important;
     }

     #calendario-inline .flatpickr-day {
         width: 38px;
         height: 38px;
         line-height: 38px;
         max-width: 38px;
         font-size: 13px;
         margin: 1px;
     }

     #calendario-inline .flatpickr-current-month {
         font-size: 16px;
     }

     #calendario-inline .flatpickr-weekday {
         font-size: 12px;
     }
 }

 /* 2025-09-30 14:30 @filipemontt - Estilo dos badges/labels - apenas texto colorido */
 #labelDetalhes {
     text-align: center;
     margin-top: 15px;
     margin-bottom: 15px;
 }

 #labelDetalhes .badge {
     padding: 0 !important;
     line-height: 24px !important;
     background: transparent !important;
     border-radius: 0 !important;
     opacity: 1 !important;
     font-size: 14px !important;
     font-weight: 500 !important;
     display: inline-block !important;
     box-shadow: none !important;
     border: none !important;
 }

 /* Cores específicas por tipo de badge - apenas texto */
 #labelDetalhes .bg-red-dark {
     background: transparent !important;
     color: #dc3545 !important;
 }

 #labelDetalhes .bg-green-dark {
     background: transparent !important;
     color: #28a745 !important;
 }

 #labelDetalhes .bg-blue-dark {
     background: transparent !important;
     color: #007bff !important;
 }

 #labelDetalhes .bg-orange-dark {
     background: transparent !important;
     color: #fd7e14 !important;
 }

/* Ícones dentro dos badges */
#labelDetalhes .badge i {
    margin-right: 6px;
    font-size: 13px;
}

/* 11/10/2025 @filipemontt - Estilo para embarcações com cota suspensa */
.cota-suspensa {
    border: 3px solid #dc3545 !important;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.3) !important;
}

.cota-suspensa:hover {
    box-shadow: 0 0 25px rgba(220, 53, 69, 0.5) !important;
}