/*
==================================================
  Simulado ABC - Custom Stylesheet
==================================================
  TABELA DE CONTEÚDOS
--------------------------------------------------
  1.  VARIÁVEIS E ESTILOS GLOBAIS
      1.1. Variáveis CSS
      1.2. Estilos Gerais (body, links, etc.)

  2.  ESTILOS DO SITE PÚBLICO (Landing Page, Cadastro)
      2.1. Cabeçalho e Navegação
      2.2. Seção Hero
      2.3. Seção Features (Cards)
      2.4. Seção Sobre Nós
      2.5. Seção de Estatísticas
      2.6. Formulário de Cadastro
      2.7. Rodapé
      2.8. Ajustes Responsivos do Site Público

  3.  ESTILOS DO SISTEMA AUTENTICADO (Dashboard, Login)
      3.1. Ajustes Gerais do Sistema
      3.2. Páginas de Login / Recuperação de Senha
      3.3. Dashboard (Cards e Gráfico)
      3.4. Questões / Gabarito
      3.5. Componentes Personalizados (Inputs, Botões, Checkbox)
      3.6. Ajustes Responsivos do Sistema
==================================================
*/

/* =========================================
   1. VARIÁVEIS E ESTILOS GLOBAIS
========================================= */

/* 1.1. Variáveis CSS (da página de cadastro) */
:root {
    --logo-blue: #004080;        /* Azul escuro da logo */
    --logo-green: #27ae60;       /* Verde da logo */
    --logo-orange: #f39c12;      /* Laranja da logo */

    --primary-blue: var(--logo-blue);
    --secondary-green: var(--logo-green);
    --accent-orange: var(--logo-orange);

    --light-bg: #f0f8ff;         /* Azul bebê muito suave */
    --dark-bg: #1a2b42;          /* Azul marinho profundo */
    --text-dark: #333;
    --text-light: #fefefe;
    --border-light: #e0e0e0;
}

/* 1.2. Estilos Gerais (body, links, etc.) */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--light-bg);
    color: var(--text-dark);
    line-height: 1.6;
    scroll-behavior: smooth;
}

/* Links genéricos (do login) */
.link-cadastro,
.link-voltar {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
}

.link-cadastro:hover,
.link-voltar:hover {
    text-decoration: underline;
}

/* =========================================
   2. ESTILOS DO SITE PÚBLICO
========================================= */

/* 2.1. Cabeçalho e Navegação */
header {
    background-color: #fff;
    padding: 10px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    max-height: 180px;
    margin-right: 30px;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav ul li {
    margin-left: 35px;
}

nav a {
    text-decoration: none;
    color: var(--primary-blue);
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 1.15rem;
    padding: 5px 0;
    position: relative;
}

nav a:hover,
nav a.active {
    color: var(--secondary-green);
    font-weight: 700;
}

nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -5px;
    left: 0;
    background-color: var(--secondary-green);
    transition: width 0.3s ease;
}

nav a:hover::after,
nav a.active::after {
    width: 100%;
}

.cta-button {
    background-color: var(--primary-blue);
    color: white;
    border: none;
    padding: 14px 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: 700;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cta-button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.cta-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 2.2. Seção Hero */
.hero {
    padding: 120px 20px;
    text-align: center;
    background-color: var(--light-bg);
    color: var(--text-dark);
    position: relative;
    z-index: 1;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: -1;
}

.hero h1 {
    margin-bottom: 25px;
    font-size: 3.2em;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary-blue);
}

.hero p {
    font-size: 1.3em;
    margin-bottom: 50px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
    color: #555;
}

.hero .cta-button {
    background-color: var(--secondary-green);
    box-shadow: 0 6px 12px rgba(39, 174, 96, 0.3);
}

.hero .cta-button:hover {
    background-color: #219d54;
}

/* 2.3. Seção Features (Cards) */
.features {
    padding: 80px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    background-color: #fff;
    max-width: 1200px;
    margin: 0 auto;
}

.features .card { /* Usando seletor mais específico para evitar conflito com Bootstrap */
    padding: 40px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.07);
    background-color: #fff;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.features .card h3 {
    color: var(--primary-blue);
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 1.8em;
    font-weight: 700;
}

.features .card p {
    color: #666;
    font-size: 1.1em;
    line-height: 1.7;
}

/* 2.4. Seção Sobre Nós */
.about-us-section {
    padding: 100px 20px;
    background-color: var(--light-bg);
    text-align: center;
    color: var(--text-dark);
}

.about-us-section h2 {
    color: var(--primary-blue);
    margin-bottom: 60px;
    font-size: 2.5em;
    font-weight: 700;
}

.about-us-content {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    text-align: left;
}

.about-us-content .text-block {
    padding: 30px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.07);
}

.about-us-content .text-block h3 {
    color: var(--secondary-green);
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 2em;
    font-weight: 700;
}

.about-us-content .text-block p {
    color: #555;
    font-size: 1.15em;
    line-height: 1.8;
    margin-bottom: 1em;
}

.about-us-content .text-block ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.about-us-content .text-block ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #444;
}

.about-us-content .text-block ul li::before {
    content: '✓';
    color: var(--accent-orange);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

.about-us-content .full-width {
    grid-column: span 2;
}

/* 2.5. Seção de Estatísticas */
.stats {
    background-color: var(--dark-bg);
    padding: 70px 20px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    text-align: center;
    color: var(--text-light);
}

.stat-item {
    margin: 25px;
    flex: 1 1 220px;
}

.stat-item strong {
    font-size: 3.5em;
    color: var(--accent-orange);
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.stat-item span {
    color: var(--text-light);
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 2.6. Formulário de Cadastro */
.registration-form {
    padding: 100px 20px;
    background-color: var(--light-bg);
    text-align: center;
}

.registration-form h2 {
    color: var(--primary-blue);
    margin-bottom: 50px;
    font-size: 2.5em;
    font-weight: 700;
}

.form-fields {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 50px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.form-row>div {
    flex: 1;
    min-width: 150px;
}

.form-row .full-width-field {
    flex: 1 1 100%;
}

.form-fields label {
    text-align: left;
    margin-bottom: 5px;
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 1.05em;
    display: block;
}

.form-fields input,
.form-fields select {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1.1em;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    margin-top: 5px;
}

.form-fields input:focus,
.form-fields select:focus {
    border-color: var(--secondary-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);
}

.form-fields button {
    background-color: var(--secondary-green);
    color: white;
    border: none;
    padding: 18px 35px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2em;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    font-weight: 700;
    margin-top: 20px;
    box-shadow: 0 6px 12px rgba(39, 174, 96, 0.3);
}

.form-fields button:hover {
    background-color: #219d54;
    transform: translateY(-2px);
}

.form-fields button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.checkbox-group {
    display: flex;
    align-items: center;
    text-align: left;
}

.checkbox-group input[type="checkbox"] {
    margin: 0 12px 5px 0;
    width: auto;
    transform: scale(1.2);
}

.checkbox-group label {
    font-weight: normal;
    font-size: 1em;
    margin-bottom: 0;
    color: #666;
}

/* 2.7. Rodapé */
footer {
    background-color: var(--dark-bg);
    color: var(--text-light);
    text-align: center;
    padding: 40px;
    font-size: 1em;
}

/* 2.8. Ajustes Responsivos do Site Público */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        padding: 15px 20px;
    }
    .logo-container {
        flex-direction: column;
        margin-bottom: 15px;
    }
    .logo {
        margin-right: 0;
        margin-bottom: 10px;
        max-height: 120px;
    }
    nav ul {
        flex-direction: column;
        align-items: center;
    }
    nav ul li {
        margin: 8px 0;
    }
    nav a {
        font-size: 1.05rem;
    }
    .cta-button {
        margin-top: 15px;
        width: 100%;
        box-sizing: border-box;
    }
    .hero h1 {
        font-size: 2.2em;
    }
    .hero p {
        font-size: 1.1em;
    }
    .features,
    .testimonial-grid {
        grid-template-columns: 1fr;
    }
    .stats {
        flex-direction: column;
    }
    .stat-item {
        margin: 20px 0;
    }
    .stat-item strong {
        font-size: 3em;
    }
    .registration-form h2 {
        font-size: 2em;
    }
    .form-fields {
        padding: 30px;
    }
    .about-us-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .about-us-content .text-block h3 {
        font-size: 1.6em;
    }
    .about-us-content .text-block p {
        font-size: 1em;
    }
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    .form-row>div {
        min-width: unset;
    }
    .form-fields label {
        margin-top: 15px;
    }
}

@media (min-width: 992px) {
    .about-us-content {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================================
   3. ESTILOS DO SISTEMA AUTENTICADO
========================================= */

/* 3.1. Ajustes Gerais do Sistema */
tr {
    white-space: nowrap;
}

/* 3.2. Páginas de Login / Recuperação de Senha */
body.login-page {
    background-color: #f8f9fa; /* Sobrescreve o fundo global */
}

.login-logo img {
    max-width: 270px;
    margin: 0 auto 20px;
    display: block;
}

.login-box .card {
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.login-card-body {
    padding: 45px;
    border-radius: 15px;
}

.login-box-msg {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
}

/* 3.3. Dashboard (Cards e Gráfico) */
.dashboard-title {
    font-size: 2rem;
    font-weight: bold;
    color: #343a40;
    margin-bottom: 20px;
}

.cards-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.card-dashboard {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: #fff;
    border-radius: 12px;
    width: 220px;
    text-align: center;
    padding: 20px 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-dashboard:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.card-dashboard i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.card-dashboard h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.card-dashboard h2 {
    font-size: 2.2rem;
    margin: 8px 0;
}

.card-dashboard p {
    font-size: 0.85rem;
    margin-bottom: 0;
}

.grafico-container {
    width: 70%;
    margin: 0 auto;
    background: linear-gradient(135deg, #17a2b8, #138496);
    border-radius: 12px;
    padding: 20px;
    color: #fff;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grafico-wrapper {
    width: 100%;
    max-width: 600px;
    text-align: center;
}

#grafico-simulados {
    width: 100% !important;
    height: auto !important;
}

/* 3.4. Questões / Gabarito */
.questao-box {
    width: 100%;
    max-width: 170px;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    text-align: center;
    background-color: #f8f9fa;
    overflow-x: auto;
    margin: 0 auto 20px auto;
}

.questao-box .d-flex {
    white-space: nowrap;
    gap: 8px;
    justify-content: center;
}

.btn-letra {
    width: 36px;
    height: 36px;
    padding: 0;
    line-height: 36px;
    font-weight: bold;
    font-size: 14px;
    border-radius: 0.4rem;
    border: 1px solid #0d6efd;
    text-align: center;
}

.btn-check {
    display: none;
}

.btn-check:checked+.btn-letra {
    background-color: #0d6efd;
    color: #fff;
}

/* 3.5. Componentes Personalizados (Inputs, Botões, Checkbox) */
.btn-search-center {
    margin: auto auto -3px 15px;
    width: 100%;
}

.icheck-primary input[type="checkbox"]+label::before,
.icheck-primary input[type="checkbox"]+label::after {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.icheck-primary input[type="checkbox"]+label::after {
    font-size: 18px;
    line-height: 1;
    width: 100%;
    height: 100%;
}

input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
    visibility: hidden;
}

input[type="file"] {
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    color: #6c757d;
    background-color: #fff;
}

.btn-acessar,
.btn-recuperar {
    font-weight: 500;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1.15rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
    color: #fff;
}

.btn-acessar {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-acessar:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.btn-recuperar {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-recuperar:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* 3.6. Ajustes Responsivos do Sistema */
@media (max-width: 576px) {
    .btn-letra {
        width: 30px;
        height: 30px;
        font-size: 12px;
        line-height: 30px;
    }
    .questao-box {
        min-width: 130px;
        max-width: 100%;
    }
}

/* Cabeçalho do card com título e logo */
.result-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

/* Título não “pula” por causa da logo */
.result-title {
  margin: 0;
  line-height: 1.2;
  font-weight: 700;
  color: #0f3d7a; /* ajuste se tiver var de cor no seu tema */
}

/* Logo responsiva, mantém proporção e não distorce */
.result-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;     /* preserva a proporção */
  object-position: center; /* centraliza dentro da caixa */
  background: #fff;        /* caso a logo tenha fundo transparente */
  border-radius: 10px;     /* levemente arredondada; pode zerar se preferir */
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  flex: 0 0 auto;          /* não deixa a imagem espremer o título */
}

/* Telas menores: reduz a logo */
@media (max-width: 576px) {
  .result-logo {
    width: 56px;
    height: 56px;
  }
}