/* ==================================== */
/* CONFIGURAÇÕES GERAIS E BASE          */
/* ==================================== */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #121212; /* Fundo preto escuro */
    color: #f0f0f0; /* Cor do texto branca/clara */
    min-height: 100vh;
    padding-bottom: 70px; /* Adiciona padding para o botão fixo */
}

/* ==================================== */
/* ESTILOS DE CABEÇALHO (TOPO)          */
/* Usado em index.html e agendamento.html */
/* ==================================== */
.header-agendamento {
    text-align: center;
    padding: 20px 0 10px;
    background-color: #1a1a1a; /* Fundo levemente diferente */
    margin-bottom: 20px;
}

.logo-agendamento {
    width: 90px; 
    height: 90px;
    border-radius: 50%;
    margin-bottom: 5px;
    border: 3px solid #ff9900;
}

.header-agendamento h1 {
    font-size: 26px;
    margin: 5px 0 0;
    color: #f0f0f0;
}

.versao {
    color: #888;
    font-size: 14px;
    margin: 0;
}


/* ==================================== */
/* ESTILOS DA TELA DE LOGIN (index.html)*/
/* ==================================== */

/* Container de Login Otimizado para Mobile */
.login-container-mobile {
    background-color: #1e1e1e; /* Fundo levemente mais claro para destacar */
    padding: 30px 15px; 
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); 
    text-align: center;
    width: 90%; 
    max-width: 450px; 
    margin: 30px auto; 
}

/* Botão de Login/Continuar/Finalizar (Ações Principais) - Estilos Base */
.login-form button, 
.btn-finalizar { 
    display: block;
    width: 100%;
    padding: 18px; 
    color: #121212;
    border: none;
    border-radius: 4px;
    font-size: 20px; 
    font-weight: bold;
    cursor: pointer;
    margin-top: 25px; 
    transition: background-color 0.3s;
    margin-bottom: 20px; 
}

/* Estilo para o botão de ENTRAR (Principal) */
.btn-login-principal {
    background-color: #ff9900;
    color: #121212;
    margin-bottom: 20px; 
}

.btn-login-principal:hover {
    background-color: #cc7a00;
}

/* Estilo para inputs (Geral) */
.input-group {
    margin-bottom: 15px;
    text-align: left;
}

.input-group label {
    display: none; 
}

.input-group input, 
.input-data-hora,
.input-data-hora-visual {
    width: 100%;
    padding: 10px;
    border: 1px solid #333;
    border-radius: 4px;
    background-color: #2a2a2a; 
    color: #f0f0f0;
    box-sizing: border-box; 
    font-size: 16px;
}
/* Estilo para selects no admin */
.input-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #333;
    border-radius: 4px;
    background-color: #2a2a2a;
    color: #f0f0f0;
    box-sizing: border-box; 
    font-size: 16px;
    /* Remover setas nativas do select */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/* ==================================== */
/* NOVO: BOTÃO FIXO DE NAVEGAÇÃO        */
/* ==================================== */
.fixed-nav-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #1a1a1a; /* Cor de fundo para destacar */
    padding: 10px 15px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5); /* Sombra para levantar */
    z-index: 1000; /* Garante que fique acima de outros elementos */
    box-sizing: border-box;
    /* Centraliza o conteúdo (limitando o tamanho na horizontal) */
    display: flex;
    justify-content: center;
}

.fixed-nav-bottom .btn-finalizar {
    /* Ajusta o botão dentro do contêiner fixo */
    margin: 0; /* Remove margens que o estilo .btn-finalizar padrão coloca */
    max-width: 450px; /* Limita a largura ao máximo do conteúdo */
}


/* ==================================== */
/* ESTILOS DA TELA DE AGENDAMENTO       */
/* ==================================== */

.agendamento-container {
    padding: 0 15px 50px; 
    max-width: 450px; 
    margin: 0 auto; 
}

.section-title {
    color: #ff9900; 
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 30px 0 15px;
    padding: 0; 
}

/* Card Profissional (Modelo para os cards de serviço) */
.card-profissional {
    background-color: #ff9900; 
    color: #121212;
    padding: 15px; 
    margin: 10px 0; 
    width: auto; 
    border-radius: 8px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.foto-profissional {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
    border: 2px solid #121212;
}

.nome-profissional {
    font-size: 20px;
    font-weight: bold;
}

/* Cards de Serviço - CORREÇÃO DE LAYOUT */
.servicos-lista {
    padding: 0; 
    max-width: none;
    margin: 0;
}

.card-servico {
    /* MUDANÇA: COR E TAMANHO INICIAL (NÃO SELECIONADO) */
    background-color: #ff9900;
    color: #333;
    padding: 15px; /* MAIOR PADDING para igualar o card do profissional */
    margin-bottom: 15px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent; 
    transition: all 0.2s;
    
    /* FORÇA O FLEXBOX PARA CONTROLAR O ESPAÇAMENTO INTERNO */
    display: flex;
    flex-direction: column; /* CRÍTICO: Informações uma abaixo da outra */
    justify-content: center;
    align-items: flex-start; /* Alinha o conteúdo à esquerda */
}

/* AJUSTES DE TEXTO DENTRO DO CARD DE SERVIÇO */
.card-servico h3 {
    font-size: 18px; /* Título maior */
    margin: 0 0 5px 0 !important; /* Margem apenas abaixo do título */
    line-height: 1.2; 
    font-weight: bold;
}

.card-servico p {
    font-size: 18px; /* Tamanho da fonte maior */
    margin: 2px 0 !important; /* Mínima margem entre as linhas de info */
    line-height: 1.2; 
    color: #333; /* Cor das informações secundárias (padrao) */
}
/* FIM DOS AJUSTES DE TEXTO */

.card-servico.selected {
    /* MUDANÇA: COR QUANDO SELECIONADO (Fundo Laranja, Texto Preto) */
    background-color: #333;
    color: #ffffff; 
    border-color: #ffffff;
}

/* CRÍTICO: MUDANÇA DE COR DOS TEXTOS SECUNDÁRIOS QUANDO O CARD É SELECIONADO */
.card-servico.selected h3,
.card-servico.selected p {
    color: #ffffff !important; /* Força cor preta para todo o texto */
}


/* CALENDÁRIO VISUAL */
.calendario-custom {
    background-color: #1e1e1e; 
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    user-select: none;
    margin-bottom: 30px; 
}

.calendario-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0 15px;
    font-weight: bold;
    font-size: 18px;
    color: #f0f0f0;
}

.calendario-header button {
    background: none;
    border: none;
    color: #ff9900; 
    font-size: 24px;
    cursor: pointer;
    padding: 5px 10px;
}

.calendario-dias-semana {
    display: grid;
    grid-template-columns: repeat(7, 1fr); 
    text-align: center;
    font-size: 14px;
    color: #888;
    padding-bottom: 5px;
    border-bottom: 1px solid #333;
}

.calendario-dias-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); 
    text-align: center;
    padding-top: 10px;
}

.dia-celula {
    padding: 10px 5px;
    margin: 2px;
    font-size: 16px;
    font-weight: bold;
    color: #f0f0f0;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px; 
}

.dia-celula.outro-mes {
    color: #555;
    cursor: default;
}

.dia-celula.selected-day {
    background-color: #ff9900;
    color: #121212;
    border: 2px solid #ff9900;
}

.dia-celula.indisponivel {
    color: #d9534f;
    cursor: not-allowed;
    text-decoration: line-through;
}

.dia-celula:hover:not(.indisponivel):not(.outro-mes) {
    background-color: #333;
}


/* Grid de Horários */
.horarios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px;
    margin-top: 15px;
}

.placeholder-horario {
    grid-column: 1 / -1; 
    text-align: center;
    color: #888;
    padding: 20px;
}

/* Botões Individuais de Horário */
.horario-btn {
    background-color: #333;
    color: #f0f0f0;
    padding: 15px 5px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, border 0.2s;
}

.horario-btn.selected {
    background-color: #ff9900;
    color: #121212;
}

.horario-btn:disabled {
    background-color: #1e1e1e;
    color: #555;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Botões de Navegação (Voltar/Próximo) */
.botoes-navegacao {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 40px;
}

.btn-navegacao {
    padding: 15px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    width: 50%;
    transition: background-color 0.3s;
}

.btn-voltar {
    background-color: #333;
    color: #f0f0f0;
    border: none;
}

/* Estilo para o botão DESABILITADO (geral) */
.btn-finalizar:disabled,
.btn-proximo:disabled {
    background-color: #555 !important;
    color: #888 !important;
    cursor: not-allowed;
}

/* ==================================== */
/* ESTILOS DE ADMIN (admin.html)        */
/* ==================================== */

/* Ajusta o cabeçalho do Admin (que não usa o .header-agendamento) */
.admin-header {
    background-color: #ff9900;
    color: #121212;
    padding: 15px 0;
    text-align: center;
    margin-bottom: 20px;
}
.admin-header h1 {
    margin: 0;
    font-size: 24px;
}
.admin-section {
    background-color: #1e1e1e;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
}
.admin-section h2 {
    color: #ff9900;
    margin-top: 0;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
/* Estilo para lista de itens de admin (serviços/horários/agendamentos) */
.admin-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2a2a2a;
    padding: 10px 1px;
    margin-bottom: 10px;
    border-radius: 4px;
}
.admin-item-info {
    flex-grow: 1;
}
.admin-item-actions button {
    background-color: #cc7a00;
    border: none;
    color: white;
    padding: 5px 10px;
    margin-left: 10px;
    border-radius: 3px;
    cursor: pointer;
}
.admin-item-actions button:hover {
    background-color: #ff9900;
}

.admin-controls-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 10px;
}

/* Estilos da LISTA DE NAVEGAÇÃO (CORRIGIDA) */
.admin-nav-list {
    /* Lista que contém os itens */
    list-style: none; /* remove marcadores de lista */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
}
.admin-nav-item {
    /* Item de navegação individual */
    background-color: #1e1e1e;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    /* Linhas CRÍTICAS para visual de botão */
    display: flex; 
    justify-content: space-between;
    align-items: center;
    font-weight: bold; /* Garante que o texto principal seja forte */
}
.admin-nav-item:hover {
    background-color: #2a2a2a;
}
/* Remover margem de tags dentro do nav item, se houver */
.admin-nav-item > span, .admin-nav-item > div {
    margin: 0;
}

/* Estilo para a Configuração Semanal de Horários */
.horarios-semanais-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #333;
}
.horarios-semanais-container span {
    font-weight: bold;
}
.horarios-semanais-container .horarios-detalhe {
    color: #ccc;
    font-size: 14px;
}

/* Aumenta o espaçamento dos botões de controle do Admin */
.admin-list-item .admin-item-actions button {
    padding: 8px 12px;
}