body { 
    background-color: #0077B6; /* Mudança para fundo azul oceano */ 
}
/* nao sei*/
.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 1rem; /* Adiciona espaçamento no topo para não colar na borda da página */
}

.card {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 0.5cm; /* Garante distância de meio centímetro dos demais objetos */
}

/* Mantém as personalizações anteriores para cor azul oceano e estilo dos elementos */

.form-control {
    border-radius: 4px;
    border: 1px solid #0077B6; /* Borda dos inputs com a cor azul oceano */
}

.btn-primary {
    background-color: #0077B6; /* Botões com a cor azul oceano */
    border-color: #0069d9;
}

.btn-primary:hover {
    background-color: #005f8f; /* Escurece ligeiramente ao passar o mouse */
    border-color: #00527a;
}

label {
    color: #0077B6; /* Cor dos labels ajustada para azul oceano */
}

.mt-5 {
    margin-top: 3rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

/* Estilo para Mensagem de Erro ajustado para centralização e espaçamento */
.error-message p {
    color: #D8000C; /* Cor do texto da mensagem de erro */
    background-color: #FFD2D2; /* Fundo suave para a mensagem de erro */
    border: 1px solid #D8000C; /* Borda da mensagem de erro */
    border-radius: 5px; /* Bordas arredondadas para a mensagem */
    padding: 10px; /* Espaçamento interno da mensagem */
    margin: 0 auto 20px; /* Centraliza a mensagem e adiciona espaço abaixo */
    width: 90%; /* Largura da mensagem de erro para garantir que ela fique centralizada */
    max-width: 600px; /* Máxima largura da mensagem para não ficar muito larga em telas grandes */
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura total */
}

.navbar-dark.bg-primary {
    background-color: #0077B6 !important; /* Ajusta para o azul oceano */
}

.thead-blue th {
    background-color: hsla(212, 74%, 59%, 0.815); /* Cor azul padrão do Bootstrap para exemplo */
    color: white; /* Texto branco para contraste */
}

.calendario-celula {
    width: 14.28%; /* 100% dividido por 7 dias */
    height: 100px; /* Altura fixa para todas as células */
    vertical-align: top;
    position: relative;
}
.calendario-celula .dia {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 0.85em;
}
.calendario-celula .evento {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.livre .bi-plus-circle {
    font-size: 2rem; 
    color: #6c757d; /* Bootstrap's gray */
}
.ocupado, .restrito, .ocupadoOutro {
    color: white;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: 100px; /* Altura fixa para todas as células */
}

.ocupadoOutro {
    background-color: #87b697; /* Bootstrap's blue */
}
.ocupado {
    background-color: #7badca; /* Bootstrap's blue */
}
.restrito {
    background-color: #afafaf; /* Bootstrap's red */
}

.lixeira {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 1.5em; /* Ajuste o tamanho conforme necessário */
}

.lixeira a {
    color: #000; /* A cor do ícone da lixeira, ajuste conforme necessário */
}

.lixeira a:hover {
    color: #ffffff; /* Cor quando o mouse está sobre o ícone da lixeira */
}

.transferir {
    position: absolute;
    bottom: 2px;
    left: 2px;
    font-size: 0.85em; /* Ajuste o tamanho conforme necessário */
}

.transferir a {
    color: #000; /* A cor do ícone da lixeira, ajuste conforme necessário */
}

.transferir a:hover {
    color: #ffffff; /* Cor quando o mouse está sobre o ícone da lixeira */
}
.embarcacao-card {
    border: 1px solid #dee2e6; /* Borda */
    border-radius: 15px; /* Cantos arredondados */
    padding: 15px; /* Espaçamento interno */
    width: 150px; /* Largura */
    text-align: center; /* Texto centralizado */
    background-color: #ffffff; /* Fundo branco */
    cursor: pointer; /* Cursor indicativo de ação */
    transition: background-color 0.3s; /* Transição suave de cores */
    margin: 10px; /* Margem para espaçamento entre as cartas */
    display: inline-block; /* Para que as cartas fiquem uma ao lado da outra */
}

.embarcacao-card:hover {
    background-color: #f2f2f2; /* Fundo cinza quando sobreposto */
}

.embarcacao-card.selecionada {
    background-color: #007bff; /* Fundo azul quando selecionado */
    color: white; /* Texto branco para melhor contraste */
}

.embarcacao-nome {
    font-weight: bold; /* Nome da embarcação em negrito */
    margin-bottom: 1px; /* Espaçamento entre nome e categoria */
}

.embarcacao-categoria {
    font-size: smaller; /* Categoria com tamanho de fonte menor */
    color: #b4b5b6; /* Cor cinza para o texto da categoria */
}

/* Novos estilos para as informações de locações */
.embarcacao-locacoes-info {
    font-size: 0.75rem; /* Tamanho de fonte menor para as informações das locações */
    margin-top: 5px; /* Espaçamento entre as informações e o restante do conteúdo do cartão */
}

.embarcacao-locacoes-info span {
    display: block; /* Exibe cada informação em sua própria linha */
    color: #2b3742; /* Cor para o texto das informações */
}

.custom-context-menu {
    display: none; /* Esse estilo será substituído por 'block' com jQuery */
    position: absolute;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    z-index: 1000; /* Certifique-se de que esteja acima de outros elementos */
    padding: 10px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.custom-context-menu a {
    display: block;
    color: black;
    text-decoration: none;
    padding: 5px 10px;
}

.custom-context-menu a:hover {
    background-color: #f1f1f1;
}

.logo-container {
    text-align: center;
    margin: 20px 0;
    padding: 10px; /* Adiciona um pouco de padding para melhor espaçamento */
    background-color: #fff; /* Fundo branco para a div da logo */
    border-radius: 8px; /* Mantém os cantos arredondados */
    border: 2px solid #ccc; /* Adiciona a borda cinza */
    max-width: 80%;
    margin: 20px auto; /* Centraliza a div da logo */
}

.logo {
    max-width: 200px; /* Ajusta o tamanho máximo da logo */
    height: auto;
}





/* Estilo do botão toggle */
.toggle-switch {
    position: relative;
    width: 48px;
    height: 24px;
    display: inline-block;
}

.toggle-input {
    display: none;
}

.toggle-label {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ddd;
    border-radius: 12px; /* Ajuste proporcional */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.toggle-label:after {
    content: '';
    position: absolute;
    width: 20px; /* 20% menor */
    height: 20px; /* 20% menor */
    top: 2px;
    left: 2px;
    background-color: white;
    border-radius: 50%;
    transition: left 0.3s ease;
}

.toggle-input:checked + .toggle-label {
    background-color: #4caf50;
}

.toggle-input:checked + .toggle-label:after {
    left: 26px; /* Ajustado proporcionalmente */
}


.descricao-parametro {
    font-size: 80%;
    color: #555;
}

/* Login mobile logo — oculto no desktop */
.login-mobile-logo {
    display: none;
}

/* ===== LOGIN MOBILE ===== */
@media (max-width: 768px) {
    body.body-login {
        background: linear-gradient(165deg, #003f5e 0%, #0077B6 55%, #0096cc 100%);
        min-height: 100vh;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
    }

    body.body-login #login-logo-container {
        display: none;
    }

    body.body-login .container {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin-top: 0;
        max-width: 100%;
        width: 100%;
    }

    body.body-login .container:last-child {
        padding: 14px;
        text-align: center;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.35);
    }

    .login-mobile-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 48px 0 28px;
        flex: 1;
        width: 100%;
    }

    .login-mobile-logo img {
        width: calc(100% - 40px);
        max-width: 100%;
        height: auto;
        max-height: 110px;
        object-fit: contain;
        background-color: #ffffff;
        border-radius: 20px;
        padding: 12px 24px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    }

    .login-card-mobile {
        border-radius: 28px !important;
        border: none !important;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2) !important;
        animation: loginSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes loginSlideUp {
        from { transform: translateY(48px); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    .login-card-mobile .card-body {
        padding: 32px 24px 40px !important;
    }

    .login-card-mobile h3 {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: #003f5e !important;
        margin-bottom: 28px !important;
    }

    .login-card-mobile label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        color: #999;
        margin-bottom: 6px;
    }

    .login-card-mobile .form-control {
        height: 52px !important;
        border-radius: 14px !important;
        font-size: 16px !important;
        border: 1.5px solid #e8ecf0 !important;
        background-color: #f7f9fc !important;
        padding: 0 18px !important;
        color: #003f5e !important;
        transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    }

    .login-card-mobile .form-control:focus {
        border-color: #0077B6 !important;
        background-color: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.12) !important;
        outline: none !important;
    }

    .login-card-mobile .btn-primary {
        height: 52px;
        border-radius: 14px;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.4px;
        background: linear-gradient(135deg, #0077B6 0%, #005f8f 100%);
        border: none;
        box-shadow: 0 4px 18px rgba(0, 119, 182, 0.45);
        margin-top: 10px;
        transition: transform 0.1s ease, box-shadow 0.1s ease;
    }

    .login-card-mobile .btn-primary:active:not(:disabled) {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(0, 119, 182, 0.3);
    }

    .login-card-mobile .btn-primary:disabled {
        opacity: 0.45;
        box-shadow: none;
    }

    .login-card-mobile .card-body > a {
        display: block;
        text-align: center;
        margin-top: 20px;
        font-size: 14px;
        color: #0077B6;
        text-decoration: none;
        font-weight: 500;
    }
}

/* ===== MOBILE GERAL ===== */
@media (max-width: 768px) {
    body {
        padding-bottom: 70px;
    }

    .container {
        padding: 10px;
        margin-top: 0.5rem;
    }

    .container:has(.barcos-lista) {
        background: transparent;
        box-shadow: none;
        padding: 8px;
    }

    .mt-5 {
        margin-top: 1rem !important;
    }

    /* Calendário menor no mobile */
    .calendario-celula {
        height: 72px;
    }

    .calendario-celula .evento {
        font-size: 0.65em;
        text-align: center;
        width: 90%;
    }

    .calendario-celula .dia {
        font-size: 0.75em;
    }

    .lixeira {
        font-size: 1em;
    }

    /* Botões com área de toque adequada */
    .btn {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 36px;
    }

    /* Tabelas rolagem horizontal */
    .table-responsive-sm {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}