body { /* Corpo da página */
    background: #fce4ec; /* Fundo */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fonte */
    font-size: 18px; /* Tamanho do texto */
    margin: 0; /* Remove margem */
    padding: 20px; /* Espaçamento interno */
}

/* ================================
   TÍTULO
   ================================ */

h2 { /* Título h2 */
    background: #ad1457; /* Fundo */
    color: white; /* Cor do texto */
    text-align: center; /* Centraliza */
    padding: 20px; /* Espaçamento */
    border-radius: 10px; /* Arredonda bordas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
}

/* ================================
   BANNER
   ================================ */

#banner { /* Imagem do banner */
    width: 100%; /* Largura total */
    height: auto; /* Altura automática */
    border-radius: 15px; /* Bordas arredondadas */
    margin-bottom: 20px; /* Espaço inferior */
}

/* ================================
   MENU
   ================================ */

.menu { /* Lista do menu */
    background: #212121; /* Fundo */
    padding: 15px; /* Espaçamento */
    list-style: none; /* Remove marcadores */
    text-align: left; /* Alinha à esquerda */
    border-radius: 5px; /* Bordas arredondadas */
}

.menu li { /* Itens do menu */
    display: inline; /* Deixa em linha */
    margin-right: 25px; /* Espaço entre itens */
}

.menu li a { /* Links do menu */
    color: #f8bbd0; /* Cor do link */
    text-decoration: none; /* Remove sublinhado */
    text-transform: uppercase; /* Letras maiúsculas */
    font-weight: bold; /* Texto em negrito */
    font-size: 20px; /* Tamanho da fonte */
}

.menu li a:hover { /* Mouse sobre o link */
    color: white; /* Muda a cor */
    border-bottom: 2px solid white; /* Linha inferior */
}

/* ================================
   FORMULÁRIO
   ================================ */

fieldset { /* Área do formulário */
    border: 3px solid #ad1457; /* Borda */
    border-radius: 15px; /* Arredonda bordas */
    background: white; /* Fundo */
    padding: 25px; /* Espaçamento */
}

legend { /* Título do formulário */
    font-weight: bold; /* Negrito */
    padding: 0 10px; /* Espaçamento */
    color: #ad1457; /* Cor do texto */
}

#nome { /* Campo nome */
    width: 95%; /* Largura */
    padding: 12px; /* Espaçamento */
    font-size: 18px; /* Tamanho da fonte */
    border: 1px solid #ccc; /* Borda */
    border-radius: 5px; /* Arredonda bordas */
}

/* ================================
   BOTÕES
   ================================ */

.botao{ /* Botão */
    margin-top: 15px; /* Espaço superior */
    padding: 10px 20px; /* Espaçamento */
    background: #ad1457; /* Fundo */
    color: white; /* Texto */
    border: none; /* Remove borda */
    border-radius: 5px; /* Bordas arredondadas */
    cursor: pointer; /* Cursor de clique */
    font-size: 16px; /* Tamanho da fonte */
}

.botao:hover { /* Mouse sobre botão */
    background: #880e4f; /* Muda o fundo */
}

/* ================================
   RODAPÉ
   ================================ */

#rodape { /* Rodapé */
    text-align: center; /* Centraliza */
    margin-top: 30px; /* Espaço superior */
    font-size: 14px; /* Tamanho do texto */
}

/* ================================
   TABELA DE HORÁRIOS
   ================================ */

.tabela-horario { /* Tabela */
    margin: 40px auto; /* Centraliza */
    border-collapse: collapse; /* Junta bordas */
    width: 70%; /* Largura */
    font-family: Arial, sans-serif; /* Fonte */
    font-size: 20px; /* Tamanho do texto */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra */
    background-color: #ffffff; /* Fundo branco */
}

.tabela-horario th { /* Cabeçalho */
    background-color: #c2185b; /* Fundo */
    color: white; /* Texto */
    padding: 14px; /* Espaçamento */
    text-align: center; /* Centraliza */
}

.tabela-horario td { /* Células */
    padding: 12px; /* Espaçamento */
    text-align: center; /* Centraliza */
    border: 1px solid #ddd; /* Borda */
}
/* Define as linhas pares da tabela
    tr:nth-child(even) → significa "filho de posição par".
*/
.tabela-horario tr:nth-child(even) { 
       background-color: #fce4ec; /* Fundo rosa */
}

/* ================================
   COMPROVANTE
   ================================ */

.comprovante { /* Área do comprovante */
    border: 2px solid #ad1457; /* Borda */
    padding: 20px; /* Espaçamento */
    margin-top: 20px; /* Espaço superior */
    background: white; /* Fundo */
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
}

.titulo-comprovante { /* Título */
    color: #ad1457; /* Cor */
    margin-top: 0; /* Remove margem */
}
#btn-contraste {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;

    padding: 12px 18px;

    background-color: #ffffff;
    color: #000000;

    border: 3px solid #000000;
    border-radius: 8px;

    font-size: 16px;
    font-weight: bold;

    cursor: pointer;
}

/* Destaque para navegação pelo teclado */
#btn-contraste:focus {
    outline: 4px solid #ffcc00;
    outline-offset: 3px;
}

/* Efeito ao passar o mouse */
#btn-contraste:hover {
    background-color: #eeeeee;
}


/* ================================
   MODO ALTO CONTRASTE
   ================================ */

body.alto-contraste {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Título */
body.alto-contraste h2 {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff;
}

/* Menu */
body.alto-contraste .menu {
    background-color: #000000 !important;
    border: 2px solid #ffffff;
}

body.alto-contraste .menu a {
    color: #ffff00 !important;
    text-decoration: underline;
}

/* Área branca do conteúdo */
body.alto-contraste > div {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff;
}

/* Títulos e textos */
body.alto-contraste h3,
body.alto-contraste p,
body.alto-contraste li,
body.alto-contraste label {
    color: #ffffff !important;
}

/* Tabela */
body.alto-contraste .tabela-horario {
    background-color: #000000 !important;
    color: #ffffff !important;
}

body.alto-contraste .tabela-horario th {
    background-color: #ffff00 !important;
    color: #000000 !important;
}

body.alto-contraste .tabela-horario td {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #ffffff;
}

/* Campos do formulário */
body.alto-contraste input,
body.alto-contraste textarea {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff;
}

/* Botão ENVIAR */
body.alto-contraste .botao {
    background-color: #ffff00 !important;
    color: #000000 !important;
    border: 2px solid #ffffff;
}

/* Rodapé */
body.alto-contraste #rodape {
    color: #ffffff !important;
}

/* Banner */
body.alto-contraste #banner {
    border: 3px solid #ffffff;
}

/* Botão de contraste quando estiver ativado */
body.alto-contraste #btn-contraste {
    background-color: #ffff00;
    color: #000000;
    border-color: #ffffff;
}