body {
  font-family: Arial, sans-serif;
  background: #f2f2f2;
  margin: 0;
  padding: 0;
}

.topo {
  background: #f8f9fb;
  border-bottom: 2px solid #ddd;
  
  /* LAYOUT DESKTOP: Título e Logo (Voice Clinic) lado a lado e centralizados */
  display: flex;
  flex-direction: row; 
  align-items: center; 
  justify-content: center; 
  padding: 15px 30px; 
}

/* Regra para o logo do Voice Clinic no topo */
.logo {
  height: 95px; /* AUMENTADO */
  width: auto;
  max-width: 90px; /* AUMENTADO */
  border-radius: 8px;
  margin-left: 10px; 
}

/* Estilo para o TÍTULO (Sistema de Pré-Diagnóstico) */
.titulo-topo {
    text-align: right; 
    font-size: 1.7rem; /* Aumento ligeiro para compensar o logo maior */
    margin: 0; 
    color: #333;
    line-height: 1.2; 
    white-space: nowrap; 
}

/* O container principal do conteúdo */
.container {
  max-width: 900px; 
  margin: 20px auto; 
  background: #fff;
  border-radius: 12px;
  padding: 40px 50px; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  position: relative; 
}

/* ESTILOS DE TÍTULOS E COMPONENTES */
h2 { 
  text-align: center; 
  color: #333;
  margin-top: 5px; 
  margin-bottom: 10px; 
}
h1 { 
  text-align: center; 
  color: #333; 
  margin-top: 25px; 
  margin-bottom: 10px;
}
h3 { 
  text-align: center; 
  color: #333; 
  margin-top: 15px; 
  margin-bottom: 0px; 
}
.hint { 
  text-align: center; 
  color: #666; 
  margin-bottom: 15px; 
}

/* Agrupa todos os botões e ajusta o espaçamento */
.controls {
  display: flex;
  justify-content: center;
  gap: 20px; 
  margin-top: 10px; 
  margin-bottom: 20px; 
}

button {
  font-size: 16px;
  padding: 12px 20px; 
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: #007bff;
  color: #fff;
  transition: background 0.3s;
}

button:hover {
  background: #0056b3;
}

/* Estilo para o novo botão (Página Exemplo) */
#redirectBtn {
  background: #6c757d; 
}
#redirectBtn:hover {
  background: #5a6268;
}

.output {
  text-align: center;
  margin-top: 15px; 
}
.output p {
    margin-top: 0px; 
    margin-bottom: 10px; 
}

/* CLASSE ESSENCIAL PARA O FORMATO DO ALERTA (CARD) */
.card {
  margin-top: 10px; 
  padding: 20px; 
  border-radius: 10px;
  font-weight: bold;
  font-size: 20px; 
  color: #fff; 
  margin-left: auto;
  margin-right: auto; 
  display: block; 
  width: 60%; 
  text-transform: uppercase;
}

/* CLASSES ESSENCIAIS PARA AS CORES DOS ALERTAS */
.vermelho { background-color: #e53935; }
.amarelo  { background-color: #fbc02d; color: #000; }
.verde    { background-color: #43a047; }
.cinza    { background-color: #9e9e9e; }

.info {
  margin-top: 60px; 
  color: #555;
  font-size: 15px; 
}
.info h3 {
    margin-bottom: 10px; 
    margin-top: 0; 
}
.info ul {
    margin-top: 0px; 
    margin-bottom: 0px; 
    padding-left: 20px;
    text-align: left; 
    list-style-position: outside; 
}
.info li {
    margin-bottom: 5px; 
}

/* --- ESTILO PARA O RODAPÉ (SENAC) --- */
.rodape {
    position: absolute;
    bottom: 25px; 
    right: 25px; 
    padding: 0;
    margin: 0;
}

.logo-senac-rodape {
    height: 140px; /* AUMENTADO */
    max-width: 310px; /* AUMENTADO */
    opacity: 0.85; 
}

/* --- AJUSTES PARA TELAS INTERMEDIÁRIAS (1024px) --- */
@media (max-width: 1024px) {
  .container {
    max-width: 750px; 
    padding: 30px 40px;
  }
}

/* --- AJUSTES PARA MOBILE (max-width: 600px) --- */
@media (max-width: 600px) {
  .topo {
    flex-direction: column; 
    align-items: center; 
    padding: 10px 10px;
  }
  .titulo-topo {
    white-space: normal; 
    text-align: center; 
    font-size: 1.3rem;
    order: 2; 
    margin-top: 5px; 
  }
  .logo {
    height: 95px; /* AUMENTADO NO MOBILE */
    max-width: 90px; /* AUMENTADO NO MOBILE */
    margin-left: 0; 
    order: 1; 
  }
  .controls {
    flex-wrap: wrap; 
    gap: 10px;
  }
  .card {
    width: 80%;
  }
  .logo-senac-rodape {
    height: 90px; /* AUMENTADO NO MOBILE */
    max-width: 190px; /* AUMENTADO NO MOBILE */
  }
  .rodape {
    bottom: 10px; 
    right: 10px;
  }
}