/* ================================================================
   COPSOQ III Brasil – copsoq3.css
   Cores: #044A29 (verde escuro) · #307A3A (verde médio)
          #d4edda (verde claro)  · #F5C712 (amarelo)
   ================================================================ */

:root {
    --c3-verde:       #044A29;
    --c3-verde-med:   #307A3A;
    --c3-verde-claro: #d4edda;
    --c3-amarelo:     #F5C712;
    --c3-branco:      #ffffff;
    --c3-cinza-f:     #f8f9fa;
    --c3-cinza:       #6c757d;
    --c3-cinza-e:     #343a40;
    --c3-vermelho:    #dc3545;
    --c3-sombra:      0 6px 24px rgba(0,0,0,.12);
    --c3-raio:        14px;
    --c3-trans:       all .3s ease;
}

/* ── Reset ── */
#copsoq3-app, #copsoq3-app * { box-sizing:border-box; font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
#copsoq3-app { max-width:820px; margin:0 auto; padding:20px 16px 50px; }

/* ── Telas ── */
.c3-tela { display:none; }
.c3-tela.ativa { display:block; animation:c3up .4s ease-out; }
@keyframes c3up { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ── Card ── */
.c3-card {
    background:var(--c3-branco);
    border-radius:var(--c3-raio);
    box-shadow:var(--c3-sombra);
    padding:36px 40px;
    margin-bottom:20px;
}
.c3-card-center { text-align:center; padding:60px 40px; }

/* ================================================================
   TELA INÍCIO
   ================================================================ */
.c3-badge {
    display:inline-block;
    background:var(--c3-verde);
    color:var(--c3-branco);
    font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
    padding:5px 14px; border-radius:20px; margin-bottom:14px;
}
.c3-header-intro { text-align:center; margin-bottom:28px; }
.c3-header-intro h1 { font-size:24px; font-weight:700; color:var(--c3-verde); margin:10px 0 6px; line-height:1.3; }
.c3-subtitulo { color:var(--c3-cinza); font-size:14px; margin:0; }

.c3-info-grid {
    display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:24px 0;
}
@media(min-width:560px){ .c3-info-grid{ grid-template-columns:repeat(4,1fr); } }
.c3-info-item {
    background:var(--c3-cinza-f); border-radius:10px; padding:16px 10px;
    text-align:center; display:flex; flex-direction:column; gap:4px;
}
.c3-icon { font-size:22px; }
.c3-info-item strong { font-size:13px; color:var(--c3-verde); }
.c3-info-item span   { font-size:11px; color:var(--c3-cinza); }

.c3-bloco { border-radius:8px; padding:14px 18px; margin:16px 0; font-size:14px; line-height:1.7; }
.c3-bloco-info { background:#f0f7f4; border-left:4px solid var(--c3-verde); color:var(--c3-cinza-e); }
.c3-bloco-info ul { margin:8px 0 0; padding-left:20px; }
.c3-bloco-aviso { background:#fff8e1; border-left:4px solid var(--c3-amarelo); color:#5a4000; }

.c3-consentimento {
    display:flex; align-items:flex-start; gap:10px;
    cursor:pointer; font-size:14px; color:var(--c3-cinza-e);
    margin:20px 0 4px;
}
.c3-consentimento input { margin-top:2px; accent-color:var(--c3-verde); width:16px; height:16px; flex-shrink:0; cursor:pointer; }

/* ================================================================
   BOTÕES
   ================================================================ */
.c3-btn {
    display:inline-block; padding:12px 26px;
    border:none; border-radius:8px;
    font-size:15px; font-weight:600; cursor:pointer;
    transition:var(--c3-trans); text-align:center; text-decoration:none;
}
.c3-btn-primary  { background:var(--c3-verde); color:var(--c3-branco); width:100%; margin-top:12px; }
.c3-btn-primary:hover:not(:disabled) { background:var(--c3-verde-med); }
.c3-btn-primary:disabled  { opacity:.4; cursor:not-allowed; }
.c3-btn-outline  { background:transparent; border:2px solid var(--c3-verde); color:var(--c3-verde); }
.c3-btn-outline:hover { background:var(--c3-verde-claro); }
.c3-btn-success  { background:#198754; color:var(--c3-branco); }
.c3-btn-success:hover { background:#146c43; }

/* ================================================================
   TELA QUESTIONÁRIO
   ================================================================ */
.c3-progresso-wrap { margin-bottom:28px; }
.c3-progresso-topo { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:13px; color:var(--c3-cinza); }
.c3-dominio-chip {
    background:var(--c3-verde-claro); color:var(--c3-verde);
    font-size:11px; font-weight:700; padding:3px 10px; border-radius:12px;
    text-transform:uppercase; letter-spacing:.5px;
}
.c3-barra-fundo { width:100%; height:8px; background:#e9ecef; border-radius:4px; overflow:hidden; }
.c3-barra-fill  { height:100%; background:linear-gradient(90deg,var(--c3-verde),var(--c3-verde-med)); border-radius:4px; transition:width .4s ease; }
.c3-pct-txt { font-size:12px; color:var(--c3-verde); font-weight:700; float:right; margin-top:4px; }

.c3-cod-questao { font-size:12px; color:var(--c3-cinza); margin:0 0 8px; font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.c3-pergunta-txt { font-size:18px; font-weight:600; color:var(--c3-cinza-e); margin:0 0 24px; line-height:1.55; }

.c3-opcoes-lista { display:flex; flex-direction:column; gap:10px; }
.c3-opcao {
    display:flex; align-items:center; gap:14px;
    padding:13px 18px; border:2px solid #e9ecef; border-radius:10px;
    cursor:pointer; font-size:15px; color:var(--c3-cinza-e);
    background:var(--c3-branco); text-align:left; width:100%;
    transition:var(--c3-trans);
}
.c3-opcao:hover      { border-color:var(--c3-verde-med); background:var(--c3-verde-claro); }
.c3-opcao.escolhida  { border-color:var(--c3-verde); background:var(--c3-verde-claro); color:var(--c3-verde); font-weight:600; }
.c3-radio {
    width:20px; height:20px; border-radius:50%; border:2px solid #ccc;
    flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:var(--c3-trans);
}
.c3-opcao.escolhida .c3-radio { background:var(--c3-verde); border-color:var(--c3-verde); }
.c3-opcao.escolhida .c3-radio::after { content:''; width:8px; height:8px; background:#fff; border-radius:50%; }

.c3-nav-btns { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.c3-nav-btns .c3-btn { flex:1; min-width:120px; margin-top:0; }

/* ================================================================
   TELA PROCESSANDO
   ================================================================ */
.c3-spinner {
    width:52px; height:52px;
    border:5px solid var(--c3-verde-claro); border-top-color:var(--c3-verde);
    border-radius:50%; animation:c3spin .9s linear infinite; margin:0 auto 20px;
}
@keyframes c3spin { to{transform:rotate(360deg)} }

/* ================================================================
   TELA RESULTADO
   ================================================================ */
.c3-resultado-cabecalho { text-align:center; margin-bottom:24px; padding-bottom:20px; border-bottom:2px solid var(--c3-cinza-f); }
.c3-resultado-cabecalho h2 { font-size:22px; color:var(--c3-verde); margin:12px 0 4px; }
.c3-data-txt { color:var(--c3-cinza); font-size:13px; margin:6px 0 14px; }
.c3-aviso-resultado { background:#fff8e1; border-radius:8px; padding:10px 16px; font-size:13px; color:#5a4000; }

.c3-legenda-semaforo { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:20px; font-size:13px; font-weight:600; }
.c3-leg { display:flex; align-items:center; gap:5px; }
.c3-leg-verde   { color:#198754; }
.c3-leg-amarelo { color:#997404; }
.c3-leg-vermelho{ color:var(--c3-vermelho); }

/* Domínio */
.c3-dom-bloco { margin-bottom:28px; }
.c3-dom-titulo {
    font-size:14px; font-weight:700; color:var(--c3-verde);
    text-transform:uppercase; letter-spacing:.8px;
    border-bottom:2px solid var(--c3-verde); padding-bottom:8px; margin-bottom:14px;
}

/* Linha de dimensão */
.c3-dim-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #f0f0f0; flex-wrap:wrap; }
.c3-dim-nome { flex:1; min-width:160px; font-size:14px; color:var(--c3-cinza-e); font-weight:500; }
.c3-dim-barra-wrap { flex:2; min-width:100px; height:12px; background:#e9ecef; border-radius:6px; overflow:hidden; position:relative; }
.c3-dim-barra-wrap::after,
.c3-dim-barra-wrap::before { content:''; position:absolute; top:0; width:1px; height:100%; background:rgba(0,0,0,.15); }
.c3-dim-barra-wrap::before { left:33.3%; }
.c3-dim-barra-wrap::after  { left:66.6%; }
.c3-dim-barra { height:100%; border-radius:6px; transition:width .7s ease; }
.c3-dim-score { width:42px; text-align:right; font-weight:700; font-size:14px; }
.c3-dim-sem   { min-width:90px; text-align:center; font-size:12px; font-weight:700; padding:4px 8px; border-radius:12px; }
.c3-sem-verde   { background:#d4edda; color:#155724; }
.c3-sem-amarelo { background:#fff3cd; color:#856404; }
.c3-sem-vermelho{ background:#f8d7da; color:#721c24; }

/* Texto interpretativo */
.c3-dim-interp { font-size:13px; line-height:1.65; color:#555; padding:10px 14px; background:#fff; border-radius:6px; margin-top:6px; border-left:4px solid #ccc; }

/* ── Comportamentos Ofensivos ── */
.c3-ofensivos-bloco {
    background:#fff8f8; border:2px solid #f5c6cb;
    border-radius:var(--c3-raio); padding:24px; margin-bottom:24px;
}
.c3-of-titulo    { font-size:16px; font-weight:700; color:#721c24; margin:0 0 4px; }
.c3-of-subtitulo { font-size:13px; color:var(--c3-cinza); margin:0 0 16px; line-height:1.5; }
.c3-of-item {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 0; border-bottom:1px solid #f5c6cb; font-size:14px; gap:10px; flex-wrap:wrap;
}
.c3-of-item:last-child { border-bottom:none; }
.c3-of-label { flex:1; color:var(--c3-cinza-e); }
.c3-of-badge { font-weight:700; font-size:13px; padding:3px 12px; border-radius:20px; }
.c3-of-sim { background:#f8d7da; color:#721c24; }
.c3-of-nao { background:#d4edda; color:#155724; }
.c3-of-alerta { margin-top:14px; font-size:13px; color:#721c24; font-weight:600; background:#fdecea; padding:10px 14px; border-radius:6px; }

/* ── Rodapé ── */
.c3-rodape-ref { font-size:11px; color:#aaa; margin:20px 0 10px; padding-top:14px; border-top:1px solid #eee; }

/* ── Ações ── */
.c3-acoes-resultado { display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
.c3-acoes-resultado .c3-btn { flex:1; min-width:140px; margin-top:0; }

/* ================================================================
   MODAL E-MAIL
   ================================================================ */
.c3-modal {
    position:fixed; inset:0; background:rgba(0,0,0,.55);
    display:flex; align-items:center; justify-content:center; z-index:9999; padding:20px;
}
.c3-modal-box {
    background:var(--c3-branco); border-radius:var(--c3-raio);
    padding:36px; max-width:420px; width:100%; position:relative; box-shadow:var(--c3-sombra);
}
.c3-modal-box h3 { color:var(--c3-verde); margin:0 0 8px; }
.c3-modal-box p  { color:var(--c3-cinza); font-size:14px; margin:0 0 16px; }
.c3-modal-fechar { position:absolute; top:14px; right:16px; background:none; border:none; font-size:18px; cursor:pointer; color:var(--c3-cinza); }
.c3-input {
    width:100%; padding:12px 14px; border:2px solid #e0e0e0;
    border-radius:8px; font-size:15px; margin-bottom:12px; outline:none; transition:border-color .2s;
}
.c3-input:focus { border-color:var(--c3-verde); }
.c3-msg-email { font-size:13px; margin-top:8px; text-align:center; font-weight:600; }

/* ================================================================
   RESPONSIVO
   ================================================================ */
@media(max-width:560px){
    .c3-card       { padding:22px 16px; }
    .c3-pergunta-txt{ font-size:16px; }
    .c3-dim-nome   { min-width:120px; }
    .c3-acoes-resultado { flex-direction:column; }
}

/* ================================================================
   IMPRESSÃO / PDF
   ================================================================ */
@media print {
    .no-print, .c3-modal { display:none !important; }
    .c3-card { box-shadow:none; border:1px solid #ddd; }
    #copsoq3-app { padding:0; }
    .c3-tela { display:block !important; }
    #tela-inicio, #tela-questionario, #tela-processando { display:none !important; }
}