body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #e0f2f7; /* Um azul claro suave */
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Estilos da Barra de Navegação (Estilo Antigo) --- */
nav {
    background-color: #00796b; /* Um verde-azulado mais escuro */
    padding: 15px 0;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

nav a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    margin: 0 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

nav a:hover {
    background-color: #004d40; /* Verde-azulado mais escuro no hover */
}

/* --- Conteúdo Principal da Página --- */
.content {
    flex: 1;
    max-width: 1200px; /* Largura máxima para o contêiner de conteúdo */
    margin: 30px auto;
    padding: 30px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center; /* Centraliza o conteúdo principal (como o h1) */
}

h1 {
    color: #00796b; /* Cor principal do consultório */
    margin-bottom: 25px;
}

/* --- Estilos Gerais para Botões (Estilo Antigo) --- */
button {
    padding: 12px 30px;
    font-size: 1.1em;
    color: white;
    background-color: #00796b; /* Verde-azulado principal */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

button:hover {
    background-color: #004d40; /* Hover mais escuro */
}

/* --- Estilos para Mensagens Flash --- */
.flashes {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.flashes li {
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}

.flashes .success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.flashes .danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.flashes .info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.info-message {
    color: #6c757d;
    font-size: 0.9em;
    margin-top: 10px;
}

/* --- ESTILOS DO FORMULÁRIO (APLICADOS AO ESTILO ANTIGO) --- */
form { /* Alvo: o elemento <form> */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza os itens do formulário */
    width: 100%; /* Garante que o formulário ocupe a largura do contêiner */
    max-width: 900px; /* Largura máxima para o formulário */
    margin: 0 auto; /* Centraliza o formulário dentro do .content */
    text-align: left; /* Alinha o conteúdo do formulário à esquerda */
}

/* Novo contêiner para o layout de grid/colunas */
.form-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Duas colunas de largura igual */
    gap: 30px; /* Espaço entre as colunas */
    width: 100%; /* Ocupa a largura total do formulário */
    margin-bottom: 20px; /* Espaço abaixo do grid */
    max-width: 800px; /* Largura máxima para o grid de campos */
}

.form-column {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaço entre os grupos de campos dentro da coluna */
}

.form-group { /* Estilo para cada par label/input */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha label/input à esquerda dentro do grupo */
    width: 100%;
}

form label {
    margin-bottom: 5px; /* Reduz espaço abaixo do label */
    font-weight: bold;
    color: #555;
    display: block; /* Garante que o label ocupe sua própria linha */
    width: 100%; /* Ocupa a largura total do form-group */
    text-align: left; /* Alinha o texto do label à esquerda */
}

form input[type="text"],
form input[type="password"],
form input[type="date"],
form input[type="tel"], /* Adicionado para telefone/celular */
form input[type="email"], /* Adicionado para email */
form select /* Adicionado para select (Raça/Cor) */
{
    width: 100%; /* Faz o input preencher a largura total do form-group */
    padding: 10px;
    margin-bottom: 0; /* Removido margin-bottom para controle pelo gap do form-column */
    border: 1px solid #b2dfdb; /* Borda mais suave */
    border-radius: 5px;
    font-size: 1em;
    text-align: left; /* Alinha o texto digitado à esquerda */
}

/* Ajustes para campos específicos (se necessário, mas agora a maioria é 100%) */
/* Removido o ajuste específico para codigo_cliente, pois ele foi removido */

/* Ajuste para o CPF */
.form-group input#cpf {
    width: 70%; /* Exemplo: CPF um pouco menor que o padrão */
    max-width: 300px;
}

/* Estilo para o campo de senha (fora das colunas) */
.password-group {
    width: 100%; /* Ocupa a largura total do formulário */
    max-width: 400px; /* Largura máxima para o campo de senha */
    margin: 0 auto 20px auto; /* Centraliza e adiciona margem inferior */
    text-align: left; /* Alinha o conteúdo à esquerda */
}

.password-group label,
.password-group input {
    width: 100%; /* Faz o label e input da senha ocuparem a largura total do seu grupo */
}

.webcam-instructions {
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 1em;
    color: #444;
    text-align: center; /* Garante que a instrução da webcam permaneça centralizada */
    width: 100%; /* Ocupa a largura total do formulário */
}

#webcamVideo { /* Alvo: o elemento #webcamVideo */
    width: 100%;
    max-width: 400px;
    height: auto;
    background-color: #000;
    border: 2px solid #b2dfdb;
    border-radius: 8px;
    margin-bottom: 20px;
    transform: scaleX(-1); /* Espelha a imagem da webcam */
}

/* --- ESTILOS DO DASHBOARD (ATUALIZADOS) --- */
.patient-details-grid, .registration-info {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas para detalhes */
    gap: 20px;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 15px;
    background-color: #f8fcfc;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.registration-info {
    grid-template-columns: 1fr; /* Informações de cadastro em uma única coluna */
    max-width: 600px; /* Limita a largura para informações de cadastro */
    margin-left: auto;
    margin-right: auto;
}

.patient-details-grid ul, .registration-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.patient-details-grid li, .registration-info li {
    margin-bottom: 8px;
    line-height: 1.4;
}

.patient-details-grid strong, .registration-info strong {
    color: #004d40;
}


/* --- RESPONSIVIDADE --- */
@media (max-width: 768px) {
    .content {
        margin: 20px auto;
        padding: 20px;
        max-width: 95%; /* Ajusta para ocupar mais espaço em telas menores */
    }
    nav a {
        margin: 0 5px;
        padding: 8px 15px;
    }
    /* Ajustes de formulário para telas menores */
    form {
        max-width: 95%; /* Formulário ocupa mais espaço em telas menores */
    }
    .form-grid-container {
        grid-template-columns: 1fr; /* Uma coluna em telas menores */
        gap: 0; /* Remove gap entre colunas quando empilhadas */
        max-width: 100%; /* Ocupa a largura total do formulário */
    }
    .form-column {
        gap: 15px; /* Mantém o espaçamento entre os campos empilhados */
    }
    form label,
    form input[type="text"],
    form input[type="password"],
    form input[type="date"],
    form input[type="tel"],
    form input[type="email"],
    form select {
        width: 100%; /* Inputs e labels ocupam largura total do form-group */
    }
    .form-group input#cpf { /* Ajuste do CPF para 100% em mobile */
        width: 100%;
        max-width: unset;
    }
    .password-group {
        max-width: 100%; /* Campo de senha ocupa largura total em telas pequenas */
    }
    /* Dashboard responsivo */
    .patient-details-grid, .registration-info {
        grid-template-columns: 1fr; /* Uma coluna em telas menores */
        gap: 10px;
    }
}

@media (max-width: 480px) {
    nav {
        padding: 10px 0;
    }
    nav a {
        display: block; /* Links de navegação empilhados */
        margin: 5px auto;
        width: 90%;
        text-align: center;
    }
}