/* Estilo inspirado no design da Apple */

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', sans-serif;
}

/* Estilo para a tela de carregamento */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; /* Fundo branco */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Garante que a tela de carregamento fique acima de outros elementos */
    transition: opacity 0.5s ease-in-out; /* Adiciona uma transição suave de opacidade */
}

.loading-screen.hidden {
    opacity: 0; /* Define a opacidade como 0 quando a classe 'hidden' for aplicada */
}

.loading-spinner {
    border: 4px solid #f3f3f3; /* Cor da borda do spinner */
    border-top: 4px solid #3498db; /* Cor da borda superior do spinner (azul) */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.login-body {
    background-color: #f5f5f7;  /* Fundo claro e neutro */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.geral-body {
    background-color: #f5f5f7;  /* Fundo claro e neutro */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding-top: 20%; /* Ajuste este valor conforme necessário */
    padding-bottom: 20%; /* Ajuste este valor conforme necessário */
}

/* Container principal */

.custon-container {
    /* display: flex; */
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* height: 80%; */
    max-width: 100%;
    padding: 3%;
}

.operacional-container {
    /* display: flex; */
    /* justify-content: space-between; */
    align-items: center;
    width: 90%;
    max-width: 90%;
    padding: 1%;
}

/* Container para a seção esquerda */
.login-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 900px;
    padding: 20px;
}

/* Seção esquerda com o texto de boas-vindas */
.left-side {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
}

.welcome-text h1 {
    font-size: 48px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.welcome-text p {
    font-size: 18px;
    color: #666;
    line-height: 1.5;
}

/* Seção direita com o formulário de login */
.right-side {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Estilo para o formulário */
.apple-form {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);  /* Sombra sutil */
    width: 100%;
    max-width: 350px;  /* Mantém o formulário com uma largura confortável */
}

.apple-form-especifico {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);  /* Sombra sutil */
    width: 100%;
    max-width: 23%;  /* Mantém o formulário com uma largura confortável */
}

.apple-form h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

.apple-table {
    background-color: #fff;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);  /* Sombra sutil */
    max-height: 550px; /* Define uma altura máxima */
    overflow-y: auto;  /* Adiciona a barra de rolagem vertical */
}

/* Estilos para os campos de entrada */
.apple-input {
    width: 100%;
    border: 1px solid #d1d1d6;
    border-radius: 8px;
    padding: 12px;
    font-size: 16px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.apple-input:focus {
    border-color: #0071e3;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.2);
}

/* Botão de login */
.apple-button-login {
    background-color: #0071e3;
    border: none;
    border-radius: 8px;
    color: #fff;
    padding: 12px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s;
}

.apple-button {
    background-color: #0071e3;
    border: none;
    border-radius: 8px;
    color: #fff;
    padding: 12px;
    font-size: 16px;
    cursor: pointer;
    width: 200px;
    transition: background-color 0.3s;
}



.apple-button:hover {
    background-color: #005bb5;
}

/* Adiciona uma borda leve ao redor dos elementos */
.apple-border {
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 5px;
}

/* Estilos para o card */
.apple-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
    transition: transform 0.3s ease; /* Adiciona transição para o efeito de movimento */
}

.apple-card:hover {
    transform: translateY(-5px); /* Eleva o card ao passar o mouse */
}

.apple-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.apple-card p {
    font-size: 16px;
    color: #666;
    line-height: 1.5;
}

.navbar-apple {
    background-color: #f8f8f8;
    border-bottom: 1px solid #e7e7e7;
}
.navbar-apple .navbar-brand {
    font-weight: bold;
    color: #333;
}
.navbar-apple .nav-link {
    color: #333;
}
.navbar-apple .nav-link:hover {
    color: #007aff;
}

th {
    white-space: nowrap;
    min-width: 100px; /* Ajuste o valor conforme necessário */
}

.form-largo {
    margin: 0 auto; /* Centraliza o formulário */    
    background-color: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);  /* Sombra sutil */
    width: 100%;
}

.form-group {
    margin-top: 1px;
    margin-bottom: 1px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Define duas colunas de igual largura */
    gap: 20px; /* Espaçamento entre os campos */
    margin-bottom: 1px;
    margin-top: 1px;
}

.cpf-full {
    grid-column: span 2; /* CPF ocupa a largura total */
}

/* Adiciona a propriedade word-break para evitar que o texto das rows quebre */
.apple-table td {
    word-break: break-all; /* Permite que o texto quebre dentro da célula */
    white-space: nowrap;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;    
}

#camera-container {
    display: flex;
    flex-direction: column;
    /* Alinha os elementos verticalmente */
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    /* Ajusta para altura automática */
    margin: auto;
  }

  #editar-camera-container {
    display: flex;
    flex-direction: column;
    /* Alinha os elementos verticalmente */
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    /* Ajusta para altura automática */
    margin: auto;
  }

  #cameraLoading {
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    /* Para garantir que fique acima do vídeo */
  }

  #editarCameraLoading {
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    /* Para garantir que fique acima do vídeo */
  }

  @keyframes blink {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  #loadingDots span {
    animation: blink 1s infinite;
  }

  #loadingDots span:nth-child(2) {
    animation-delay: 0.2s;
  }

  #loadingDots span:nth-child(3) {
    animation-delay: 0.4s;
  }

  @media (max-width: 768px) {
    .navbar-nav {
        flex-direction: column; /* Alinha os itens da navbar verticalmente */
    }

    .nav-item {
        margin-bottom: 10px; /* Adiciona espaçamento entre os itens */
    }

    .left-side {
        width: 100%;
    }

    .right-side {
        width: 100%;
    }

    .login-container {
        flex-direction: column;
    }

    .custon-container {
        flex-direction: column;
    }

    .operacional-container {
        flex-direction: column;
    }

    .apple-form {
        max-width: 100%;
    }

    .apple-table {
        max-width: 100%;
    }

    .form-grid {
        grid-template-columns: 1fr; /* Define uma coluna */
    }

    .cpf-full {
        grid-column: span 1; /* CPF ocupa a largura total */
    }

}

/* Estilos para o stepper */
.stepper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-left: 0;
    list-style: none;
}
.step {
    text-align: center;
    flex: 1;
    position: relative;
}
.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    right: -50%;
    width: 100%;
    height: 4px;
    background: #dee2e6;
    z-index: 0;
}
.step-circle {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    background: #dc3545;
    color: #fff;
    font-weight: bold;
    z-index: 1;
    position: relative;
}
.step.done .step-circle {
    background: #28a745;
}
.step.doing .step-circle {
    background: #ffc107;
    color: #212529;
}
.step.disabled .step-circle {
    background: #6c757d;
}
.step-label {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}