/* --- FUNDAÇÃO E VARIÁVEIS --- */
:root {
    --primary-color: #005A8D;   /* Um azul mais sóbrio e profissional */
    --secondary-color: #009688; /* Verde azulado para destaque (mantive a inspiração) */
    --light-gray: #f4f7f5;     /* Fundo suave para seções */
    --text-color: #333;        /* Cor do texto principal */
    --heading-color: #1a3a53;  /* Cor para títulos */
    --base-font: 'Poppins', sans-serif;
}

body {
    font-family: var(--base-font);
    color: var(--text-color);
    background-color: #fff;
}

h5 {
  font-family: Arial, sans-serif;
  font-size: 1em;
  color: rgb(0, 0, 0);
  text-decoration: none;
}

/* Esta é a nova classe que adicionamos no PHP */
.conteudo-centralizado {
    text-align: center; /* Centraliza todo o texto e elementos inline dentro desta div */
}

/* 
  Esta regra é mais específica e garante que o H5 DENTRO 
  do nosso card também seja centralizado, sobrescrevendo a regra geral.
*/
.conteudo-centralizado h5 {
    text-align: center; /* ou 'inherit' para herdar do pai */
}

/* --- NAVEGAÇÃO --- */
nav {
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Sombra mais sutil */
}

nav .brand-logo {
    color: var(--primary-color);
    font-weight: 600;
}

nav ul a {
    color: #555;
    font-weight: 500;
}

nav .sidenav-trigger i {
    color: var(--primary-color);
}

.dropdown-content li > a, .dropdown-content li > span {
    color: var(--primary-color);
}

/* --- SEÇÃO HERO --- */
/* --- Opção 2: Pontos Delicados --- */
.hero-section {
    background-color: #f4f8ff;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23dce5e0' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
    padding: 60px 0;
    margin-bottom: 40px;
    border-bottom: 1px solid #e0e0e0;
}

.hero-section h1.header {
    color: var(--heading-color);
    font-weight: 700;
    font-size: 2.8rem;
}

.hero-section p.subtitle {
    font-size: 1.2rem;
    color: #666;
    font-weight: 400;
}

/* --- CARTÕES DE AÇÃO --- */
.action-cards-container {
    padding: 20px 0;
}

.card {
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #eaf4fa; /* << ADICIONE ESTA LINHA (um azul bem claro) */
}

.card.hoverable:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 90, 141, 0.1); /* Sombra sutil no hover */
}

.card .card-content {
    text-align: center;
    padding: 30px;
}

.card .card-icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
    margin: 0 auto 20px auto;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    font-size: 36px;
}

.card .card-icon i {
    line-height: inherit; /* Alinha o ícone verticalmente */
}

.card .card-title {
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 10px;
}

.card .card-action {
    background-color: transparent !important; /* Remove fundo cinza do Materialize */
    border-top: 1px solid #e0e0e0;
    padding: 20px;
    text-align: center;
}

.btn, .btn:hover, .btn:focus {
    background-color: var(--primary-color);
    border-radius: 50px; /* Botão em formato de pílula */
    text-transform: none; /* Tira o CAPS LOCK */
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* --- SEÇÃO DO IFRAME --- */
.iframe-section {
    padding: 60px 0;
    background-color: #fff;
}

.iframe-section .header {
    color: var(--heading-color);
    font-weight: 600;
}

.iframe-wrapper {
    margin-top: 30px;
    border-radius: 8px;
    overflow: hidden; /* Garante que o iframe respeite as bordas arredondadas */
    border: 1px solid #ddd;
}

/* --- RODAPÉ --- */
.page-footer {
    background-color: var(--heading-color);
    padding-top: 40px;
}

/* --- AJUSTES PARA MOBILE --- */
@media only screen and (max-width: 600px) {
    .hero-section {
        padding: 40px 0;
    }
    .hero-section h1.header {
        font-size: 2.2rem;
    }
    .card {
        margin-bottom: 20px;
    }

    /* Bloco corrigido abaixo */
    nav .brand-logo {
        font-size: 1.4rem;
        left: 56px;
        transform: translateX(0);
    }
}

/* --- ANIMAÇÕES SUTIS --- */

/* 1. Define a animação: de baixo para cima com fade-in */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Aplica a animação aos elementos que queremos animar */
.hero-section,
.card,
.iframe-section .header,
.iframe-section p,
.iframe-wrapper {
  /* A animação se chama 'fadeInUp', dura 0.6s e tem uma curva de aceleração suave */
  animation: fadeInUp 0.6s ease-out forwards;
}

/* --- ESTILO DO LOGO NO HERO --- */
.hero-logo {
    text-align: center;
    margin-bottom: 30px; /* Espaço entre o logo e o título */
}

.hero-logo img {
    max-width: 280px;  /* Define uma largura máxima para o logo */
    height: auto;      /* Mantém a proporção */
    opacity: 0.7;      /* Deixa o logo preto um pouco mais suave e integrado */
}

/* --- ESTILOS DO CARD DE SOLICITAÇÃO (Coloque no final do seu moderno.css) --- */

.panel-primary {
  border-color: var(--primary-color);
}
.panel-primary > .panel-heading {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}
.panel-primary > .panel-heading p {
    margin: 0;
    padding: 5px 0;
    font-weight: 500;
}

/* Container que centraliza o conteúdo */
.conteudo-centralizado {
    text-align: center;
    margin-bottom: 20px; /* Espaço entre o conteúdo e o alerta de status */
}

/* Estilo para os títulos 'Nome do paciente' e 'Procedimento' */
.conteudo-centralizado h5 {
    font-size: 0.9em; /* Tamanho um pouco menor para o rótulo */
    font-weight: bold;
    color: #555;
    margin-bottom: 3px;
    text-transform: uppercase; /* Deixa os rótulos em caixa alta */
    letter-spacing: 0.5px;
}

/* Estilo para a informação em si (o nome e o procedimento) */
.conteudo-centralizado p {
    font-size: 1.2em; /* Tamanho maior para a informação importante */
    color: var(--text-color);
    margin: 0;
}

/* Bloco que agrupa o título e o texto do procedimento */
.procedimento-bloco {
    margin-top: 15px;
}

/* Remove a margem inferior do último alerta dentro do corpo do painel */
.panel-body .alert:last-child {
    margin-bottom: 0;
}

/* Estiliza o rodapé do painel (data de atualização) */
.panel-footer {
    font-size: 0.9em;
}