/* =============================================================================
   css/comum.css — ESTILOS COMUNS ÀS DUAS TELAS (Palestrando)
   =============================================================================
   A cor principal vem do js/config.js (COR_FUNDO_SISTEMA) pela variável --cor-sistema.
   ============================================================================= */

:root { --cor-sistema: #0E4D64; }

.bg-sistema    { background-color: var(--cor-sistema); }
.text-sistema  { color: var(--cor-sistema); }
.border-sistema{ border-color: var(--cor-sistema); }

.btn-primaria { background-color: var(--cor-sistema); color: #fff; }
.btn-primaria:hover:not(:disabled) { filter: brightness(1.15); }
.btn-primaria:disabled { background-color: #cbd5e1; color: #fff; cursor: not-allowed; }

/* Botões de escolha (tipo, resultado, interesse, materiais) */
.opcao {
    border: 1.5px solid #e2e8f0; background: #fff; color: #334155;
    border-radius: 0.75rem; cursor: pointer; transition: all .15s; user-select: none;
}
.opcao:hover { border-color: #94a3b8; }
.opcao.ativa { border-color: var(--cor-opcao, var(--cor-sistema)); background: color-mix(in srgb, var(--cor-opcao, var(--cor-sistema)) 10%, white); color: var(--cor-opcao, var(--cor-sistema)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-opcao, var(--cor-sistema)) 15%, transparent); }

.campo {
    width: 100%; border: 1px solid #cbd5e1; border-radius: 0.75rem; padding: 0.7rem 0.8rem;
    font-size: 0.875rem; background: #fff; color: #1e293b;
}
.campo:focus { outline: none; box-shadow: 0 0 0 2px var(--cor-sistema); border-color: transparent; }
.rotulo { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #64748b; margin-bottom: 0.25rem; display: block; letter-spacing: .02em; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

@keyframes jp-pulso { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .55); } 70% { box-shadow: 0 0 0 16px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } }
.pulso { animation: jp-pulso 1.8s infinite; }

@media print {
    .no-print { display: none !important; }
    body { background: white; }
}

/* Selo "Plus" (módulos adicionais: js/config.js → MODULOS_PLUS) */
.selo-plus { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: #6d28d9; background: #ede9fe; border: 1px solid #c4b5fd; border-radius: 999px; padding: 1px 7px; vertical-align: middle; }