/* backend/static/css/styles.css */

:root {
    /* Fontes Base */
    --font-family-sans-serif: 'Inter', sans-serif;
    --font-family-headings: 'Poppins', sans-serif;

    /* Paleta de Cores Principal (Inspirada no dashboard-redesign e Bootstrap) */
    --color-primary: #3037c5;
    --color-primary-darker: #0056b3; /* Usado para header popular no pricing_page */
    --color-primary-bs: #1332bc;
    --color-primary-bs-darker:rgb(70, 135, 226);
    --color-primary-bs-rgb: 13, 110, 253; /* Para box-shadow focus dos botões e formulários */

    --color-secondary: #6c757d;
    --color-secondary-darker: #5c636a;

    --color-success: #064729;
    --color-success-dark: #198754;
    --color-success-darker: #157347;


    --color-danger: #e74c3c;
    --color-danger-bs: #dc3545;
    --color-danger-border-light: #FFCDD2; /* Para h5.desafios-title */


    --color-warning: #f1c40f; /* Usado para badge "MAIS POPULAR" */
    --color-warning-bs: #ffc107;
    --color-warning-text-bs: #000;
    --color-warning-text-bs-rgb: 0, 0, 0; /* Cor do texto para fundos warning (amarelo) */


    --color-info: #17a2b8;
    --color-info-darker: #31d2f2; /* Usado em hover de btn-info */
    --color-info-bs: #0dcaf0;
    --color-info-text-bs: #000;

    /* Cores de Texto */
    --color-text-default: #444444;
    --color-text-headings: #34495e;
    --color-text-headings-badge-popular: #212529; /* Texto para o badge popular, como no modelo */
    --color-text-muted: #6c757d;
    --color-text-light: #f8f9fa;
    --color-text-white: #ffffff;
    --color-text-white-rgb: 255, 255, 255;
    --color-text-link: var(--color-primary-darker);
    --color-text-strikethrough: #adb5bd; /* Cor para texto com line-through (preço original) */


    /* Cores de Fundo */
    --color-bg-body: #f8f9fa;
    --color-bg-container: #ffffff;
    --color-bg-light: #f8f9fa;
    --color-bg-dark: #34495e;
    --color-bg-subtle-blue: #eaf4ff;
    --color-bg-subtle-blue-alt: #dcefff;

    /* Cores específicas do Quiz */
    --color-quiz-options-border: #D7CFE5;
    --color-quiz-column-header-bg: #B2D7E5;

    /* Cores para highlights de interpretação */
    --color-highlight-desc-bg: #e2f0cb;
    --color-highlight-desc-border: #aed581;
    --color-highlight-desc-text: #558b2f;

    --color-highlight-char-bg: #fff8e1;
    --color-highlight-char-border: #ffe082;
    --color-highlight-char-text: #b96f00;

    --color-highlight-strong-bg: #e8f5e9;
    --color-highlight-strong-border: #a5d6a7;
    --color-highlight-strong-text: #1b5e20;

    --color-highlight-tendency-bg: #e7f5ff;
    --color-highlight-tendency-border: #6abaff;
    --color-highlight-tendency-text: #004085;

    --color-highlight-reflection-bg: #fff3cd;
    --color-highlight-reflection-border: #ffcc80;
    --color-highlight-reflection-text: #856404;

    /* Sombras mais pronunciadas */
    --shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.40);

    /* Bordas */
    --border-radius-sm: 0.25rem; /* 4px */
    --border-radius-md: 0.5rem;  /* 8px */
    --border-radius-lg: 1rem;    /* 16px */
    --border-color-default: #dee2e6;
    --border-color-light: #e0e0e0;
    --border-color-lighter: #f0f0f0;

    /* Espaçamentos (Base: 1rem = 14px com html font-size: 14px) */
    --spacing-xs: 0.25rem;  /* ~3.5px */
    --spacing-sm: 0.5rem;   /* 7px */
    --spacing-md: 1rem;     /* 14px */
    --spacing-lg: 1.5rem;   /* 21px */
    --spacing-xl: 2rem;     /* 28px */
    --spacing-xxl: 3rem;    /* 42px */
}

/* Estilos Gerais */
/* Versão: 1.0.60 - Ajuste cor texto .btn-success */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    scroll-behavior: smooth;
    font-size: 14px;
}

body {
    font-family: var(--font-family-sans-serif); /* Inter */
    line-height: 1.6;
    color: var(--color-text-default);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-bg-body);
}

/* Adicionado/Modificado: Garante que elementos comuns de texto usem a fonte sans-serif */
p, ul, ol, li, span, small, label, .form-text {
     font-family: var(--font-family-sans-serif); /* Inter */
}


h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings); /* Poppins */
    color: var(--color-text-headings);
}

.container {
    margin: var(--spacing-lg) auto;
    padding: 0;
    background-color: var(--color-bg-container);
    box-shadow: var(--shadow-md);
    border-radius: var(--border-radius-md);
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.dashboard-container-transparent {
    background-color: transparent !important;
    box-shadow: none !important;
    margin: 0 auto;
    padding: 0;
    border-radius: 0;
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.individual-dashboard-page,
.b2b-dashboard-page {
    width: 100%;
    flex-grow: 1;
}

@media (max-width: 767.98px) {
    .container:not(.dashboard-container-transparent) {
        margin-top: 0; margin-bottom: 0; border-radius: 0;
        box-shadow: none !important;
        background-color: var(--color-bg-container);
    }
    .dashboard-container-transparent {
         margin-top: 0; margin-bottom: 0; border-radius: 0;
    }
}

.quiz-page { padding: 0 !important; }
.quiz-page > * { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.quiz-page .progress-container,
.quiz-page .warning-timer-block,
.quiz-page #question-content-wrapper { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.quiz-page .options-container { padding-left: 0; padding-right: 0; }

#report-content {
    background-color: var(--color-bg-container);
    padding: var(--spacing-lg);
    width: 100%;
}

header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-color-default);
    background-color: var(--color-bg-container);
}
header p.lead { color: var(--color-text-muted); font-size: 1.1em; margin-top: var(--spacing-sm); }

section { border-radius: var(--border-radius-md); padding: 0; margin-bottom: var(--spacing-xl); }
#assessment { display: block; padding: var(--spacing-lg); }

.report-title {
    color: var(--color-primary-darker);
    margin-bottom: 0.8em;
    font-size: 1.85rem;
    border-bottom: 2px solid var(--border-color-light);
    padding-bottom: var(--spacing-sm);
    text-align: center;
}

.card {
    background-color: var(--color-bg-container);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color-light);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
}
.card:hover {
    /* transform: translate3d(-0.35rem); */
    /* box-shadow: var(--shadow-hover); */
}
.card-header {
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-bg-light);
    border-bottom: 1px solid var(--border-color-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 {
    margin-bottom: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text-headings); /* Cor padrão para títulos em card-header */
}

.card-header.text-white h1,
.card-header.text-white h2,
.card-header.text-white h3,
.card-header.text-white h4,
.card-header.text-white h5,
.card-header.text-white h6 {
    color: inherit;
}

.card-body {
    padding: var(--spacing-lg);
}
.card-body p, .card-body ul, .card-body li {
    font-size: 1rem;
}
.card-footer {
    background-color: var(--color-bg-light);
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-color-light);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.interpretation-block h4 {
    color: var(--color-text-headings);
    margin-top: 0;
    margin-bottom: 0.8em;
    font-size: 1.15rem;
    border-bottom: 1px solid var(--border-color-lighter);
    padding-bottom: var(--spacing-xs);
    font-weight: bold;
}
.interpretation-block h5 {
    color: var(--color-info);
    margin-top: 1.2em;
    margin-bottom: 0.5em;
    font-size: 1rem;
    font-weight: 600;
}
.interpretation-block > div:first-of-type h5,
.interpretation-block > .highlight-section:first-of-type h5 { margin-top: 0.5em !important; }

.landing-page { background-color: var(--color-bg-container); padding: var(--spacing-lg) var(--spacing-md) var(--spacing-xxl) var(--spacing-md); }
.landing-logo {
    display: block; margin-left: auto; margin-right: auto;
    max-width: 12.85rem;  height: auto; margin-bottom: 1rem;
}
@media (max-width: 767.98px) {
    .landing-logo { max-width: 10.7rem;  }
    .landing-page h1.display-5 { font-size: 1.8rem; }
    .landing-page h2.h4 { font-size: 1.1rem; }
    .landing-page h3 { font-size: 1.3rem; }
}
.preparation-section {
    background-color: var(--color-bg-light);
    padding: var(--spacing-lg) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color-default);
}
@media (max-width: 767.98px) { .preparation-section { padding: var(--spacing-lg) var(--spacing-md); } }
.instruction-item { display: flex; align-items: flex-start; gap: var(--spacing-md); }
.instruction-icon { flex-shrink: 0; width: 2.14rem;  text-align: center; margin-top: var(--spacing-xs); }
.instruction-icon i.bi { font-size: 1.6em; line-height: 1; }
.instruction-text { font-size: 0.95em; line-height: 1.5; }
.instruction-text strong.text-uppercase { font-weight: 700; letter-spacing: 0.5px; }
.start-button { font-weight: 500; }

.progress-container { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
#progress-text { font-size: 0.85em; }
.warning-timer-block { margin-bottom: var(--spacing-lg); font-size: 0.9em; padding: var(--spacing-sm) var(--spacing-sm) !important; }
.moved-timer {
    text-align: center; font-size: 1em; font-weight: 500; padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--color-bg-light);
    border-radius: var(--border-radius-sm);
    transition: background-color 0.3s ease-out, color 0.3s ease-out, opacity 0.3s ease-out;
}
.moved-timer.hidden { opacity: 0; pointer-events: none; }
.timer-container span#countdown { font-weight: bold; color: var(--color-danger); margin: 0 var(--spacing-xs); display: inline-block; min-width: 1.5em; text-align: center; }
.timer-container span { display: inline-block; }
#question-content-wrapper {
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    margin-top: 0;
}
#question-content-wrapper.fading-out { opacity: 0; transform: scale(0.95); pointer-events: none; }
.options-container { border: 1px solid var(--color-quiz-options-border); border-radius: var(--border-radius-sm); overflow: hidden; }
.column-header {
    display: grid; grid-template-columns: 4fr 1fr 1fr;
    background-color: var(--color-quiz-column-header-bg);
    color: var(--color-text-headings);
    padding: var(--spacing-sm) var(--spacing-sm); font-weight: bold; text-align: center; align-items: center; font-size: 0.9em;
}
.column-header > div:first-child { text-align: left; padding-left: var(--spacing-sm); }
#options-list { display: flex; flex-direction: column; }
.option-item {
    display: grid !important; grid-template-columns: 4fr 1fr 1fr; padding: 0;
    border-bottom: 1px solid var(--color-quiz-options-border);
    align-items: stretch; min-height: 3.2rem;  transition: background-color 0.2s ease;
}
.option-item:last-child { border-bottom: none; }
.option-text {
    font-weight: 500; padding: var(--spacing-sm) var(--spacing-sm); display: flex; align-items: center;
    border-right: 1px solid var(--border-color-lighter); font-size: 0.95em;
}

/* --- INÍCIO MODIFICAÇÕES PARA VISIBILIDADE DOS RADIO BUTTONS (Mantido) --- */
.radio-container {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: var(--spacing-sm) 0;
    border-right: 1px solid var(--border-color-lighter);
    position: relative; /* Essencial para posicionar o input */
    transition: background-color 0.2s ease;
    width: 100%;
    height: 100%; /* Ajuda a centralizar verticalmente */
}

.radio-container:last-child { border-right: none; }

/* Estiliza o input nativo para ser mais visível */
.radio-container input[type="radio"] {
    /* Remover estilos nativos para estilizar */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    cursor: pointer;
    width: 1.4rem; /* Ajustado levemente para melhor visibilidade */
    height: 1.4rem; /* Ajustado levemente para melhor visibilidade */
    margin: 0;
    flex-shrink: 0; /* Evita que o item encolha no flex container */

    /* Estilos customizados para o estado normal (não selecionado) */
    border: 2px solid var(--color-secondary); /* Borda cinza sutil */
    border-radius: 50%; /* Formato circular */
    background-color: var(--color-bg-container); /* Fundo branco */
    box-sizing: border-box; /* Inclui borda no tamanho */
    position: relative; /* Para o ponto central */
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Transições suaves */
}

/* Estilos para o estado focado (acessibilidade) */
.radio-container input[type="radio"]:focus {
    outline: none; /* Remove o outline padrão */
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-bs-rgb), 0.4); /* Sombra sutil azul */
}

/* Estilos para o estado selecionado (checked) */
.radio-container input[type="radio"]:checked {
    border-color: var(--color-primary-darker); /* Borda na cor primária escura */
    background-color: var(--color-bg-container); /* Mantém fundo branco */
}

/* Ponto central quando selecionado */
.radio-container input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 0.7rem; /* Tamanho do ponto central */
    height: 0.7rem; /* Tamanho do ponto central */
    border-radius: 50%;
    background-color: var(--color-primary-darker); /* Cor do ponto central */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centraliza o ponto */
    z-index: 1; /* Garante que o ponto fique sobre o fundo */
}

/* Estilos para o container quando o radio button dentro está selecionado */
.radio-container input[type="radio"]:checked {
    background-color: var(--color-bg-subtle-blue-alt); /* Fundo do container destacado */
}


@media (hover: hover) and (pointer: fine) {
    .option-item:hover { background-color: var(--color-bg-subtle-blue); }
    /* Adicionado hover para o container do radio button */
    .radio-container:hover { background-color: var(--color-bg-subtle-blue-alt); }
}
/* --- FIM MODIFICAÇÕES PARA VISIBILIDADE DOS RADIO BUTTONS (Mantido) --- */


#quiz-completion {
    text-align: center; padding: var(--spacing-xl) var(--spacing-md); margin-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color-lighter);
    opacity: 0; display: none; transition: opacity 0.5s ease-in-out;
}
#quiz-completion.visible { display: block; opacity: 1; }
#quiz-completion h2 { color: var(--color-success-dark); margin-bottom: var(--spacing-md); font-size: 1.6em; }
#quiz-completion p { font-size: 1em; color: var(--color-text-muted); margin-bottom: var(--spacing-xl); }
#quiz-completion .completion-message { margin-bottom: var(--spacing-xl); font-size: 1.05em; }
#quiz-completion .completion-actions { margin-top: var(--spacing-lg); }

.results-page { background-color: var(--color-bg-container); }
.results-page .report-title { font-size: 1.8em; color: var(--color-text-headings); margin-bottom: 0.5rem; }
.results-page .user-info { font-size: 0.9em; margin-bottom: 2rem; color: var(--color-text-muted); }
.report-logo {
  display: block; margin-left: auto; margin-right: auto;
  max-width: 17.85rem;  height: auto; margin-bottom: 1rem;
}
.summary-and-scores-grid { display: grid; gap: var(--spacing-lg); align-items: start; margin-bottom: var(--spacing-xl); }
@media (min-width: 768px) {
    .summary-and-scores-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
    .summary-and-scores-grid > .card { height: 100%; }
}

/* --- CORREÇÃO: Ajuste de fonte para o resumo do perfil na web --- */
.profile-summary-markdown p {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
}

@media (max-width: 767.98px) {
    #report-content { padding: var(--spacing-md) var(--spacing-sm) !important; }
    .quiz-page > * { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
    .quiz-page .warning-timer-block { padding: var(--spacing-xs) var(--spacing-sm) !important; }
    .quiz-page #question-content-wrapper { padding-left: 0; padding-right: 0; }
    .content-section .card-body { padding: var(--spacing-md) var(--spacing-sm) !important; }
    #formacao-academica .interpretation-block { padding-left: 0 !important; padding-right: 0 !important; padding-top: var(--spacing-md); padding-bottom: 0; border-left: none !important; border-right: none !important; margin-bottom: 0; border-top: none; border-bottom: none; background-color: transparent !important; border: none !important; }
    .interpretation-block:not(#formacao-academica .interpretation-block) { padding: var(--spacing-sm) var(--spacing-xs) !important; border: 1px solid var(--border-color-lighter); background-color: var(--color-bg-container); }
    .interpretation-block:not(#formacao-academica .interpretation-block) > .highlight-section,
    .interpretation-block:not(#formacao-academica .interpretation-block) > .alert,
    section[id^="analise-profissional"] .interpretation-block > div[class*="highlight-priority-"] { padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-md) !important; margin-left: calc(-1 * var(--spacing-xs)); margin-right: calc(-1 * var(--spacing-xs)); border-radius: 0; }
    .interpretation-block:not(#formacao-academica .interpretation-block) > .highlight-section,
    .interpretation-block:not(#formacao-academica .interpretation-block) > .alert { border-left-width: 4px; }
    section[id^="analise-profissional"] .interpretation-block > div[class*="highlight-priority-"] { border-left-width: 5px; }
    body .summary-and-scores-grid { grid-template-columns: 1fr !important; display: block; gap: 0; margin-bottom: var(--spacing-lg); }
    body .summary-and-scores-grid > div { margin-bottom: var(--spacing-md); width: 100%; }
    body .summary-and-scores-grid > div:last-child { margin-bottom: 0; }
    .chart-full-width { margin-bottom: var(--spacing-lg); }
    .chart-full-width .card-body { padding: var(--spacing-sm) var(--spacing-xs); }
    .chart-full-width .card-body canvas { max-width: 100%; height: auto !important; min-height: 17.85rem;  }
    .chart-full-width .card-header h3 { font-size: 1.1em; }
    .interpretation-block p, .interpretation-block ul, .interpretation-block li { font-size: 0.98em; }
    h4 { font-size: 1.15em; } h5 { font-size: 1.05em; }
    .quick-links { margin-bottom: var(--spacing-md); padding: var(--spacing-xs) var(--spacing-sm); font-size: 0.9em; background-color: var(--color-bg-light); border: 1px solid var(--border-color-default); border-radius: var(--border-radius-sm); text-align: center;}
    .actions .btn { padding: 0.5rem 1rem; font-size: 0.95rem; margin: var(--spacing-xs); }
    #formacao-academica .interpretation-block .markdown-content { background-color: var(--color-bg-light); padding: var(--spacing-lg) var(--spacing-md) !important; margin-left: 0; margin-right: 0; border-radius: 0; width: 100%; box-sizing: border-box; border-top: 1px solid var(--border-color-light); border-bottom: 1px solid var(--border-color-light); margin-top: 0; margin-bottom: 0; }
    #formacao-academica .interpretation-block .markdown-content > *:first-child { margin-top: 0 !important; }
    #formacao-academica .interpretation-block .markdown-content > *:last-child { margin-bottom: 0 !important; }
    .report-logo { max-width: 7.14rem;  }
}
.chart-column .card-body, .scores-column .card-body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 10.7rem;  }
.summary-column .card-body ul { padding-left: 0; margin-bottom: 0.5rem; list-style: none; }
.summary-column .card-body li { margin-bottom: 0.4rem; display: flex; align-items: center; font-size: 0.95em; }
.scores-list { list-style: none; padding-left: 0; margin-top: 0.5rem; text-align: left; display: inline-block; }
.disc-color-indicator { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; margin-right: 0.5rem; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, 0.1); }
.chart-full-width { margin-bottom: var(--spacing-xl); }

/* Estilos para Tabelas */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: none;
    background-color: transparent;
}
table.score-details-table,
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-md);
    font-size: 0.9rem;
    border: none;
    background-color: transparent;
    box-shadow: none;
}
table th, table td {
    border: 1px solid var(--border-color-light);
    padding: var(--spacing-sm) var(--spacing-sm);
    text-align: left;
    vertical-align: middle;
}
table th {
    background-color: var(--color-bg-light);
    font-weight: 600;
    color: var(--color-text-headings);
    border-bottom-width: 2px;
    text-align: center;
}
.card .table {
    border: 1px solid var(--border-color-default);
    background-color: var(--color-bg-container);
    box-shadow: none;
    margin-top: 0;
}
.card .table-responsive {
    box-shadow: none;
    background-color: transparent;
}

table.score-details-table td:first-child { text-align: left; padding-left: var(--spacing-md); font-weight: 600; color: var(--color-text-headings); }
table.score-details-table td:last-child { font-weight: 600; background-color: var(--color-bg-light); color: var(--color-text-headings); text-align: center; }
table.score-details-table td:nth-child(2), table.score-details-table td:nth-child(3) { color: var(--color-text-muted); font-size: 0.95em; text-align: center; }
table tr:hover {
    background-color: var(--color-bg-subtle-blue);
}
/* Fim Estilos para Tabelas */

.quick-links { background-color: var(--color-bg-light); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius-sm); margin-bottom: var(--spacing-xl); border: 1px solid var(--border-color-default); text-align: center; }
.quick-links small { font-size: 0.9em; }
.quick-links a { margin: 0 var(--spacing-sm); font-weight: 500; color: var(--color-text-link); text-decoration: none; }
.quick-links a:hover { text-decoration: underline !important; }

.content-section .interpretation-block { padding: var(--spacing-md); border: 1px solid var(--border-color-lighter); border-radius: var(--border-radius-sm); margin-bottom: var(--spacing-lg); background-color: var(--color-bg-container); }
.content-section .interpretation-block:last-child { margin-bottom: 0; }
.interpretation-block p { text-align: left; line-height: 1.6; margin-bottom: 1em; font-size: 0.9rem; }
.interpretation-block p:last-child { margin-bottom: 0; }
.interpretation-block ul { list-style: disc; margin-left: var(--spacing-lg); padding-left: 0; margin-bottom: 1rem; font-size: 0.9rem; }
.interpretation-block li { margin-bottom: 0.5em; }

.interpretation-block > .highlight-section {
    border-left-width: 4px; border-left-style: solid;
    padding: var(--spacing-md) var(--spacing-lg); margin: var(--spacing-lg) 0; border-radius: var(--border-radius-sm);
    border-top: 1px solid; border-right: 1px solid; border-bottom: 1px solid;
}
.interpretation-block > .highlight-section h5 { margin-top: 0 !important; font-weight: bold; }
.interpretation-block > .highlight-section p { margin-bottom: 0; font-size: 0.95em; text-align: left; }
.interpretation-block > .highlight-description {
    background-color: var(--color-highlight-desc-bg);
    border-left-color: var(--color-highlight-desc-border);
    border-color: var(--color-highlight-desc-border);
}
.interpretation-block > .highlight-description h5 { color: var(--color-highlight-desc-text) !important; }
.interpretation-block > .highlight-characteristics {
    background-color: var(--color-highlight-char-bg);
    border-left-color: var(--color-highlight-char-border);
    border-color: var(--color-highlight-char-border);
}
.interpretation-block > .highlight-characteristics h5 { color: var(--color-highlight-char-text) !important; }
.interpretation-block > .highlight-pontos-fortes {
    background-color: var(--color-highlight-strong-bg);
    border-left-color: var(--color-highlight-strong-border);
    border-color: var(--color-highlight-strong-border);
}
.interpretation-block > .highlight-pontos-fortes h5 { color: var(--color-highlight-strong-text) !important; }

.interpretation-block > .alert {
    padding: var(--spacing-md) var(--spacing-lg); margin: var(--spacing-lg) 0; border-radius: var(--border-radius-sm);
    font-size: 0.95em; line-height: 1.5; margin-left: 0; margin-right: 0;
    border: 1px solid transparent; border-left-width: 4px; border-left-style: solid;
}
.interpretation-block > .alert strong { font-weight: bold; }
.interpretation-block > .alert p { margin-bottom: 0; font-size: inherit; line-height: inherit; }
.interpretation-block > .alert.alert-info,
.interpretation-block > .alert.highlight-tendency {
    background-color: var(--color-highlight-tendency-bg);
    border-left-color: var(--color-highlight-tendency-border);
    border-color: var(--color-highlight-tendency-border);
    color: var(--color-highlight-tendency-text);
}
.interpretation-block > .alert.alert-info strong,
.interpretation-block > .alert.highlight-tendency strong { color: var(--color-highlight-tendency-text); }
.interpretation-block > .alert.alert-warning,
.interpretation-block > .alert.highlight-reflection {
    background-color: var(--color-highlight-reflection-bg);
    border-left-color: var(--color-highlight-reflection-border);
    border-color: var(--color-highlight-reflection-border);
    color: var(--color-highlight-reflection-text);
}
.interpretation-block > .alert.alert-warning strong,
.interpretation-block > .alert.highlight-reflection strong { color: var(--color-highlight-reflection-text); }

section[id^="analise-profissional"] .interpretation-block > div[class*="highlight-priority-"] {
    padding: 1em 1.25em; margin-bottom: 1rem;
    border: 1px solid var(--border-color-default);
    border-left-width: 5px; border-left-style: solid;
    border-radius: var(--border-radius-sm); background-color: var(--color-bg-container);
}
section[id^="analise-profissional"] .interpretation-block > div[class*="highlight-priority-"] p { font-size: 0.95em; line-height: 1.5; margin-bottom: 0; }
section[id^="analise-profissional"] .interpretation-block > div.highlight-priority-high {
    background-color: var(--color-highlight-reflection-bg) !important;
    border-color: var(--color-highlight-reflection-border) !important;
    border-left-color: var(--color-warning) !important;
}
section[id^="analise-profissional"] .interpretation-block > div.highlight-priority-high h5 { color: var(--color-highlight-reflection-text) !important; }
section[id^="analise-profissional"] .interpretation-block > div.highlight-priority-medium {
    background-color: var(--color-highlight-tendency-bg) !important;
    border-color: var(--color-highlight-tendency-border) !important;
    border-left-color: var(--color-info) !important;
}
section[id^="analise-profissional"] .interpretation-block > div.highlight-priority-medium h5 { color: var(--color-highlight-tendency-text) !important; }
section[id^="analise-profissional"] .interpretation-block > div.highlight-priority-basic {
    background-color: var(--color-bg-light) !important;
    border-color: var(--border-color-default) !important;
    border-left-color: var(--color-secondary) !important;
}
section[id^="analise-profissional"] .interpretation-block > div.highlight-priority-basic h5 { color: var(--color-text-headings) !important; }

.markdown-content { line-height: 1.6; }
.markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5, .markdown-content h6 {
    margin-top: 1.5em; margin-bottom: 0.8em; font-weight: bold;
    color: var(--color-text-headings); border-bottom: none; padding-bottom: 0;
}
.markdown-content h1 { font-size: 1.5em; border-bottom: 1px solid var(--border-color-lighter); padding-bottom: 0.3em; }
.markdown-content h2 { font-size: 1.4em; } .markdown-content h3 { font-size: 1.3em; }
.markdown-content h4 { font-size: 1.2em; } .markdown-content h5 { font-size: 1.1em; } .markdown-content h6 { font-size: 1em; }
.markdown-content p { margin-bottom: 1em; font-size: 1em; line-height: 1.6; }
.markdown-content ul { list-style: disc; margin-left: 1.25rem; padding-left: 0; margin-bottom: 1em; font-size: 1em; }
.markdown-content ul li { margin-bottom: 0.5em; line-height: 1.5; }
.markdown-content strong { font-weight: bold; }
.markdown-content em { font-style: italic; }
.markdown-content blockquote {
    margin: 1em 2.5rem; padding: 0.5em 0.75rem;
    border-left: 4px solid var(--border-color-default);
    color: var(--color-text-muted);
}

/* --- MODIFICAÇÃO INICIADA --- */
/* Adicionado: Estilo para links dentro do conteúdo Markdown */
.markdown-content a {
    color: #0d6efd; /* Azul tradicional do Bootstrap para alta visibilidade */
    text-decoration: underline;
    font-weight: 500;
}

.markdown-content a:hover {
    color: #0a58ca; /* Azul mais escuro no hover */
    text-decoration: underline;
}
/* --- MODIFICAÇÃO CONCLUÍDA --- */


/* --- Início Modificações Botões (Mantido) --- */
/* ==========================================================================
   Variáveis CSS (Ajustadas para sombras mais fortes e consistência)
   ========================================================================== */
:root {
  /* --border-radius-md: 0.5rem;  Já definido no topo */
  /* --font-family-sans-serif: sans-serif; Já definido no topo */

  /* Cores de exemplo para seus botões (ajuste conforme seu tema) */
  /* --color-primary-bs: #007bff; Já definido no topo */
  /* --color-primary-bs-darker: #0056b3; Já definido no topo */
  /* --color-primary-bs-rgb: 0,123,255; Já definido no topo */
  /* --color-secondary: #6c757d; Já definido no topo */
  /* --color-secondary-darker: #545b62; Já definido no topo */
  /* --color-success: #28a745; Já definido no topo como #90caaf */
  /* --color-success-dark: #1e7e34; Já definido no topo como #198754 */
  /* --color-info-bs: #17a2b8; Já definido no topo */
  /* --color-info-darker: #117a8b; Já definido no topo */
  /* --color-info-text-bs: #fff; Já definido no topo como #000*/
  /* --color-text-white: #fff; Já definido no topo */
  /* --color-text-dark: #212529;  Variável não usada diretamente nos botões aqui */
}

/* ==========================================================================
   Estilos Base para Botões (.btn)
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-family: var(--font-family-sans-serif); /* Inter */
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    transition: color 0.2s ease-in-out,
                background-color 0.2s ease-in-out,
                border-color 0.2s ease-in-out,
                box-shadow 0.2s ease-in-out,
                transform 0.2s ease-in-out;
}

/* ==========================================================================
   Estilos Comuns para Estados de Interação (Aplicados a TODOS os botões)
   ========================================================================== */

.btn:focus,
.btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-bs-rgb), 0.5);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ==========================================================================
   Estilos Específicos por Tipo/Cor de Botão (Refatorados)
   ========================================================================== */

.btn-primary {
    background-color: var(--color-primary-bs);
    color: var(--color-text-white);
    border-color: var(--color-primary-bs);
}
.btn-primary:hover {
    background-color: var(--color-primary-bs-darker);
    border-color: var(--color-primary-bs-darker);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-text-white);
    border-color: var(--color-secondary);
}
.btn-secondary:hover {
    background-color: var(--color-secondary-darker);
    border-color: var(--color-secondary-darker);
}

.btn-success {
    background-color: var(--color-success); /* #90caaf (verde claro) */
    color: var(--color-text-white); /* MODIFICADO: Texto branco para bom contraste */
    border-color: var(--color-success);
}
.btn-success:hover {
    background-color: var(--color-success-dark); /* #198754 (verde escuro) */
    border-color: var(--color-success-dark);
    color: var(--color-text-white);
}
.btn-success:focus {
    background-color: var(--color-success-dark);
    border-color: var(--color-success-dark);
    color: var(--color-text-white);
}


.btn-info {
    background-color: var(--color-info-bs);
    color: var(--color-info-text-bs); /* #000 (preto) */
    border-color: var(--color-info-bs);
}
.btn-info:hover {
    background-color: var(--color-info-darker); /* #31d2f2 (mais escuro que #0dcaf0) mas ainda claro */
    border-color: var(--color-info-darker);
    color: var(--color-text-white); /* Texto branco aqui fica melhor */
}

.btn-light {
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    color: #212529;
}
.btn-light:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
    color: #212529;
}

/* ==========================================================================
   Estilos para Botões Outline (Refatorados para evitar redundância)
   ========================================================================== */

.btn-outline-success {
    color: var(--color-success-dark);
    border-color: var(--color-success-dark);
    background-color: transparent;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
    color: var(--color-text-white);
    background-color: var(--color-success-dark);
    border-color: var(--color-success-dark);
}

/* ==========================================================================
   Classes de Tamanho
   ========================================================================== */
.btn-lg, .btn.large {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
}


/* Estilos Globais para Formulários */
.form-label {
    font-family: var(--font-family-headings); /* Poppins - Corrigido para usar Poppins conforme já definido */
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-headings);
    margin-bottom: var(--spacing-sm);
    display: inline-block;
}

.form-control,
.form-select,
textarea.form-control {
    font-family: var(--font-family-sans-serif); /* Inter */
    font-size: 1rem;
    color: var(--color-text-default);
    background-color: var(--color-bg-container);
    border: 1px solid var(--border-color-default);
    border-radius: var(--border-radius-sm);
    padding: 0.6rem 0.9rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    line-height: 1.5;
    width: 100%;
    box-sizing: border-box;
}
textarea.form-control {
    min-height: calc(1.5em + 1.2rem + 2px);
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-bs-rgb), 0.25);
}

.form-control::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

/* Removida regra duplicada para form-check-input[type="radio"] */
.form-check-input {
    accent-color: var(--color-primary-darker);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color-default);
}
.form-check-input:checked {
    background-color: var(--color-primary-darker);
    border-color: var(--color-primary-darker);
}
.form-check-input[type="radio"] { /* Mantida regra específica para radio */
    border-radius: 50%;
}

.form-check-input:focus {
     border-color: var(--color-primary);
     outline: 0;
     box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-bs-rgb),0.25);
}
.form-check-label {
    font-size: 0.95rem;
    color: var(--color-text-default);
    font-family: var(--font-family-sans-serif); /* Inter */
}

.user-info-form label {
     font-family: var(--font-family-headings); /* Poppins */
}
.user-info-form input {
     font-family: var(--font-family-sans-serif); /* Inter */
}

.b2b-filter-section .form-label {
    margin-bottom: var(--spacing-xs);
}
.b2b-filter-section .form-select,
.b2b-filter-section .form-control {
    font-size: 0.9rem;
}
/* Fim Estilos Globais para Formulários */


#loading-overlay {
    position: fixed; inset: 0; background: rgba(255, 255, 255, 0.85);
    z-index: 9999; display: none; justify-content: center; align-items: center;
    flex-direction: column; gap: 1rem; opacity: 0;
    transition: opacity 0.3s ease-in-out; pointer-events: none;
}
#loading-overlay[style*="display: flex"] { opacity: 1; pointer-events: auto; }
#loading-overlay.fade-out { opacity: 0 !important; transition: opacity 0.8s ease-out !important; pointer-events: none; }
#loading-overlay #loading-text { color: var(--color-text-headings); font-size: 1.1em; text-align: center; max-width: 80%; line-height: 1.5; font-family: var(--font-family-sans-serif); /* Inter */ }
#loading-overlay #loading-gif { width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; }

.results-page-container { opacity: 0; transition: opacity 1.2s ease-in-out; }
.results-page-container.visible { opacity: 1; }
.results-page-container:not(.visible) { visibility: hidden; }
.results-page-container.visible { visibility: visible; }

/* --- INÍCIO: NOVOS ESTILOS PARA O BADGE DO GOOGLE CLOUD --- */
.google-cloud-badge {
    height: 28px; /* Altura para alinhar bem com o texto pequeno */
    vertical-align: middle; /* Alinha a imagem com o meio do texto */
    opacity: 0.75;
    transition: opacity 0.2s ease-in-out;
}

.google-cloud-badge:hover {
    opacity: 1;
}

@media (max-width: 767.98px) {
    .google-cloud-badge {
        margin-top: 0.75rem; /* Adiciona espaço acima do logo em telas pequenas onde ele pode quebrar a linha */
    }
}
/* --- FIM: NOVOS ESTILOS PARA O BADGE DO GOOGLE CLOUD --- */


@media screen, print {
    .report-title { font-size: 1.85rem; }
}
@media print {
    html { font-size: 12pt !important; }
    body {
        width: 210mm; height: auto !important; margin: 0 !important; padding: 0 !important;
        background: var(--color-bg-container) !important;
        color: var(--color-text-default) !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
        display: block !important; font-family: var(--font-family-sans-serif) !important; /* Inter */
    }
    h1,h2,h3,h4,h5,h6 {
        font-family: var(--font-family-headings) !important; /* Poppins */
        color: var(--color-text-headings) !important;
    }
    .container {
        max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
        box-shadow: none !important; border-radius: 0 !important; background-color: transparent !important;
        overflow: visible !important; height: auto !important; display: block !important;
    }
    .content-section { display: block !important; width: 100% !important; height: auto !important; }
    .card, .interpretation-block, .highlight-section, .alert, div[class*="highlight-priority-"], .summary-and-scores-grid > div, .score-details-table tbody tr, .markdown-content p, .markdown-content li, .markdown-content blockquote,
    table {
        page-break-inside: avoid !important;
    }
    h1, h2, h3, h4, h5, h6 { page-break-after: avoid !important; }
    ul, ol, blockquote { page-break-before: avoid !important; }
    .text-center { text-align: center !important; }
    .mb-1 { margin-bottom: 0.2rem !important; } .mb-2 { margin-bottom: 0.4rem !important; } .mb-3 { margin-bottom: 0.8rem !important; } .mb-4 { margin-bottom: 1.2rem !important; }
    .mt-4 { margin-top: 1.2rem !important; } .small { font-size: 0.9em !important; }
    .report-title { font-size: 21pt !important; margin-bottom: 0.4rem !important; padding-bottom: 3px !important; border-color: var(--border-color-default) !important; color: var(--color-primary-darker) !important;}
    .user-info { margin-bottom: 0.8rem !important; font-size: 12pt !important; color: var(--color-text-muted) !important;}
    .report-logo { max-width: 180px !important; margin-bottom: 0.5rem !important; }
    .chart-full-width { margin-bottom: 12px !important; }
    .chart-full-width .card { border: 1px solid var(--border-color-default) !important; box-shadow: none !important; }
    .chart-full-width .card-header { background-color: var(--color-bg-light) !important; padding: 6px 10px !important; }
    .chart-full-width .card-header h3, .chart-full-width .card-header { font-size: 14pt !important; font-weight: 600 !important; color: var(--color-text-headings) !important; margin-bottom: 0 !important;}
    .chart-full-width .card-body img { max-width: 100% !important; height: auto !important; display: block; margin: 5px auto; }
    #report-content > .summary-and-scores-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 15px !important; margin-bottom: 15px !important; align-items: start !important; }
    #report-content > .summary-and-scores-grid > div { border: 1px solid var(--border-color-default) !important; border-radius: var(--border-radius-sm) !important; box-shadow: none !important; background-color: var(--color-bg-container) !important; padding: 0 !important; margin-bottom: 0 !important; width: auto !important; }
    #report-content > .summary-and-scores-grid > div .card-header { background-color: var(--color-bg-light) !important; border-bottom: 1px solid var(--border-color-default) !important; padding: 6px 10px !important; font-weight: 600 !important; text-align: center !important; }
    #report-content > .summary-and-scores-grid > div .card-header h3, #report-content > .summary-and-scores-grid > div .card-header { font-size: 13pt !important; margin: 0 !important; padding: 0 !important; border: none !important; color: var(--color-text-headings) !important; }
    #report-content > .summary-and-scores-grid > div .card-body { padding: 10px !important; }
    #report-content > .summary-and-scores-grid > div .card-body p { font-size: 12pt !important; margin-bottom: 0.4em !important; line-height: 1.4 !important; }
    #report-content > .summary-and-scores-grid > div .card-body p:last-child { margin-bottom: 0 !important; }
    .score-details-table { font-size: 10pt !important; margin-top: 5px !important; border: 1px solid var(--border-color-default) !important; }
    table th, table td { padding: 5px 7px !important; border: 1px solid var(--border-color-default) !important; }
    table th { background-color: var(--color-bg-light) !important; font-weight: 600 !important; color: var(--color-text-headings) !important; }
    .score-details-table td:first-child { padding-left: 8px !important; font-weight: 600 !important; }
    .score-details-table td:last-child { font-weight: 600 !important; background-color: var(--color-bg-light) !important; }
    .score-details-table td:nth-child(2), .score-details-table td:nth-child(3) { font-size: 0.95em !important; }
    .content-section .card { margin-bottom: 15px !important; box-shadow: none !important; border: 1px solid var(--border-color-default) !important; border-radius: var(--border-radius-sm) !important; }
    .content-section .card-header { padding: 0.6rem 1rem !important; background-color: var(--color-bg-light) !important; border-bottom: 1px solid var(--border-color-default) !important; }
    .content-section .card-header h3 { font-size: 16pt !important; margin: 0 !important; padding: 0 !important; border: none !important; color: var(--color-text-headings) !important; }
    .content-section .card-body { padding: 12px 15px !important; }
    .content-section .interpretation-block { padding: 10px 12px !important; margin-bottom: 12px !important; border: 1px solid var(--border-color-lighter) !important; border-left: none !important; border-radius: var(--border-radius-sm) !important; }
    .content-section .interpretation-block:last-child { margin-bottom: 0 !important; }
    .interpretation-block h4 { font-size: 15pt !important; margin-bottom: 0.5em !important; padding-bottom: 3px !important; border-color: var(--border-color-lighter) !important; }
    .interpretation-block h5 { font-size: 14pt !important; margin-top: 1em !important; margin-bottom: 0.4em !important; color: var(--color-info) !important; }
    .interpretation-block p, .interpretation-block ul, .interpretation-block li { font-size: 12pt !important; line-height: 1.45 !important; margin-bottom: 0.6em !important; }
    .interpretation-block ul { margin-bottom: 0.6em !important; margin-left: 18px !important; }
    .interpretation-block li { margin-bottom: 0.3em !important; }
    .interpretation-block > .highlight-section, .interpretation-block > .alert { padding: 10px 15px !important; margin: 12px 0 !important; border: 1px solid !important; border-left: none !important; border-radius: var(--border-radius-sm) !important; }
    .interpretation-block > .highlight-description { background-color: var(--color-highlight-desc-bg) !important; border-color: var(--color-highlight-desc-border) !important; }
    .interpretation-block > .highlight-characteristics { background-color: var(--color-highlight-char-bg) !important; border-color: var(--color-highlight-char-border) !important; }
    .interpretation-block > .highlight-pontos-fortes { background-color: var(--color-highlight-strong-bg) !important; border-color: var(--color-highlight-strong-border) !important; }
    .interpretation-block > .alert.alert-info, .interpretation-block > .alert.highlight-tendency { background-color: var(--color-highlight-tendency-bg) !important; border-color: var(--color-highlight-tendency-border) !important; color: var(--color-highlight-tendency-text) !important; }
    .interpretation-block > .alert.alert-warning, .interpretation-block > .alert.highlight-reflection { background-color: var(--color-highlight-reflection-bg) !important; border-color: var(--color-highlight-reflection-border) !important; color: var(--color-highlight-reflection-text) !important; }
    section[id^="analise-profissional"] .interpretation-block > div[class*="highlight-priority-"] { padding: 0.8em 1em !important; margin-bottom: 0.8em !important; border: 1px solid !important; border-left: none !important; border-radius: var(--border-radius-sm) !important; }
    section[id^="analise-profissional"] .interpretation-block > div.highlight-priority-high { background-color: var(--color-highlight-reflection-bg) !important; border-color: var(--color-highlight-reflection-border) !important; }
    section[id^="analise-profissional"] .interpretation-block > div.highlight-priority-medium { background-color: var(--color-highlight-tendency-bg) !important; border-color: var(--color-highlight-tendency-border) !important; }
    section[id^="analise-profissional"] .interpretation-block > div.highlight-priority-basic { background-color: var(--color-bg-light) !important; border-color: var(--border-color-default) !important; }
    .markdown-content { padding-top: 0.5em !important; }
    .markdown-content p, .markdown-content ul, .markdown-content li { font-size: 12pt !important; }
    .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5, .markdown-content h6 { margin-top: 0.8em !important; margin-bottom: 0.4em !important; }
    .markdown-content blockquote { margin: 0.8em 20px !important; padding: 0.4em 8px !important; font-size: 12pt !important; border-left-width: 3px !important; border-color: var(--border-color-default) !important; }
    .quick-links, .actions, /* .results-page-container.visible, */ .card-footer img, .timer-container, header, #timer-display
    { display: none !important; visibility: hidden !important; }
}

/* Estilos Dashboard B2B */
.b2b-dashboard-page .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color-default);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.b2b-dashboard-page .page-header h1 {
    font-size: 1.7rem;
    color: var(--color-text-headings); /* Poppins */
    margin-bottom: 0;
}

.b2b-dashboard-page .page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.b2b-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.b2b-stat-card {
    padding: 0;
    border-left-width: 4px;
    border-left-style: solid;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--shadow-sm);
}
.b2b-stat-card:hover {
    transform: translate3d(-0.35rem, -0.35rem, 0);
    box-shadow: var(--shadow-hover);
}
.b2b-stat-card .stat-card-content {
    padding: var(--spacing-lg);
    flex-grow: 1;
}

.b2b-stat-card.blue { border-left-color: var(--color-primary); }
.b2b-stat-card.yellow { border-left-color: var(--color-warning-bs); }
.b2b-stat-card.green .stat-icon { background-color: rgba(144, 202, 175, 0.1); color: var(--color-success-dark); }
.b2b-stat-card.green { border-left-color: var(--color-success-dark); }
.b2b-stat-card.red { border-left-color: var(--color-danger-bs); }


.b2b-stat-card .stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.b2b-stat-card .stat-title {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    font-family: var(--font-family-sans-serif); /* Inter */
}

.b2b-stat-card .stat-icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.b2b-stat-card.blue .stat-icon { background-color: rgba(var(--color-primary-bs-rgb), 0.1); color: var(--color-primary); }
.b2b-stat-card.yellow .stat-icon { background-color: rgba(255, 193, 7, 0.1); color: var(--color-warning-bs); }
.b2b-stat-card.red .stat-icon { background-color: rgba(220, 53, 69, 0.1); color: var(--color-danger-bs); }


.b2b-stat-card .stat-value {
    font-family: var(--font-family-headings); /* Poppins */
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.b2b-stat-card.blue .stat-value { color: var(--color-primary); }
.b2b-stat-card.yellow .stat-value { color: var(--color-warning-bs); }
.b2b-stat-card.green .stat-value { color: var(--color-success-dark); }
.b2b-stat-card.red .stat-value { color: var(--color-danger-bs); }

.b2b-stat-card .stat-description {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-family: var(--font-family-sans-serif); /* Inter */
}

.b2b-dashboard-page .card .table {
    margin-bottom: 0;
}
.b2b-dashboard-page .card .table th {
    font-weight: 600;
    color: var(--color-text-headings); /* Poppins */
    font-size: 0.95rem;
    font-family: var(--font-family-headings); /* Poppins */
}
.b2b-dashboard-page .card .table td {
    font-size: 0.9rem;
    vertical-align: middle;
    font-family: var(--font-family-sans-serif); /* Inter */
}

.b2b-filter-section {
    background-color: var(--color-bg-light);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--border-color-default);
}

.b2b-filter-section .btn {
    font-size: 0.9rem;
}
/* Fim Estilos Dashboard B2B */

/* --- INÍCIO: ESTILO SUMÁRIO EXECUTIVO (WEB) --- */
#rh-summary-section-web {
    border: 1px solid #c9bda6;
    border-radius: 8px;
    background-color: #fcfaf3;
    margin-bottom: 2rem;
    overflow: hidden;
}
#rh-summary-section-web .summary-header {
    background-color: #6d5d3b;
    color: #ffffff;
    padding: 1rem 1.5rem;
}
#rh-summary-section-web .summary-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-family: 'Poppins', sans-serif;
    color: #ffffff; /* <-- CORREÇÃO APLICADA AQUI */
}
#rh-summary-section-web .summary-content {
    padding: 1.5rem;
}
#rh-summary-section-web .perfil-combinado-text {
    font-style: italic;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    border-left: 3px solid #6d5d3b;
    padding-left: 1rem;
}
#rh-summary-section-web h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #4b422f;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e0d8c5;
}
#rh-summary-section-web ul {
    list-style: none;
    padding-left: 0;
}
#rh-summary-section-web ul li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}
#rh-summary-section-web ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #6d5d3b;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1;
}
#rh-summary-section-web p {
    line-height: 1.6;
}
/* --- FIM: ESTILO SUMÁRIO EXECUTIVO (WEB) --- */

/* --- INÍCIO: ESTILOS PARA CHECKOUT E LOGOS DE PAGAMENTO --- */

/* Barra de Logos na Página de Preços */
.payment-logos-container {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color-default);
}

.payment-logos-container .logos-title {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-md);
}

.payment-logos-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.payment-logos-bar img {
    height: 28px; /* Altura padronizada para os logos */
    max-width: 80px; /* Evita que logos muito largos dominem */
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.payment-logos-bar img:hover {
    opacity: 1;
}


/* Seletor de Método de Pagamento no Modal */
.payment-method-selector {
    display: flex;
    border: 1px solid var(--border-color-default);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
}

.payment-method-option {
    flex: 1;
    text-align: center;
    padding: var(--spacing-md) var(--spacing-sm);
    cursor: pointer;
    background-color: var(--color-bg-light);
    color: var(--color-text-muted);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    border-right: 1px solid var(--border-color-default);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-weight: 500;
}

.payment-method-option:last-child {
    border-right: none;
}

.payment-method-option input[type="radio"] {
    display: none; /* O input real fica escondido */
}

.payment-method-option img {
    height: 20px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.payment-method-option:hover {
    background-color: var(--color-bg-subtle-blue);
}

/* A classe .active será adicionada via JS ao clicar */
.payment-method-option.active {
    background-color: var(--color-bg-container);
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: inset 0 -3px 0 0 var(--color-primary);
}

.payment-method-option.active img {
    opacity: 1;
}

/* Conteúdo do Formulário de Pagamento */
.payment-form-content {
    display: none; /* Escondido por padrão, controlado por JS */
    min-height: 200px; /* Evita que o modal "pule" de tamanho */
    align-items: center;
    justify-content: center;
}

.payment-form-content.active {
    display: block;
}

/* Estilos para o campo de Cartão de Crédito com ícone */
.card-number-wrapper {
    position: relative;
}

.card-brand-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    height: 24px;
    width: auto;
    transition: opacity 0.3s ease;
}

/* Layout para Validade e CVV */
.card-details-group {
    display: flex;
    gap: var(--spacing-md);
}

.card-details-group .form-group {
    flex: 1;
}

/* Seções de Resultado para PIX e Boleto */
#pix-result-container, #boleto-result-container {
    text-align: center;
    padding: var(--spacing-lg);
    border: 1px dashed var(--border-color-default);
    border-radius: var(--border-radius-md);
    background-color: var(--color-bg-light);
}

#pix-qr-code {
    max-width: 200px;
    height: auto;
    margin: 0 auto var(--spacing-md) auto;
    display: block;
    border: 5px solid var(--color-bg-container);
    box-shadow: var(--shadow-sm);
}

#pix-copy-code-input, #boleto-barcode-input {
    word-break: break-all;
    background-color: var(--color-bg-subtle-blue-alt);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-family: monospace;
    text-align: center;
}

#boleto-result-container .boleto-icon {
    font-size: 3rem;
    color: var(--color-secondary);
    margin-bottom: var(--spacing-md);
}

/* Classe utilitária para esconder elementos */
.hidden {
    display: none !important;
}

/* --- FIM: ESTILOS PARA CHECKOUT E LOGOS DE PAGAMENTO --- */

/* Correção para ocultar o cursor de texto na página de avaliação */
.quiz-page .option-text,
.quiz-page .radio-container input[type="radio"] {
    caret-color: transparent;
    user-select: none; /* Previne a seleção de texto, que também pode mostrar o cursor */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE */
}
/* Estilo do cursor durante o processamento de pagamento */
body.body-processing {
    cursor: wait !important;
}

body.body-processing * {
    cursor: wait !important;
}