/* Estilos Gerais */
body { font-family: 'Inter', sans-serif; }
.card { background-color: white; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); padding: 1.5rem; }
.btn { padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 500; text-align: center; cursor: pointer; transition: all 0.2s; }
.btn-primary { background-color: #4f46e5; color: white; }
.btn-primary:hover { background-color: #4338ca; }
.btn-danger { background-color: #dc2626; color: white; }
.btn-danger:hover { background-color: #b91c1c; }
.btn-secondary { background-color: #e5e7eb; color: #1f2937; }
.btn-secondary:hover { background-color: #d1d5db; }
.input-field { width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; }

/* Estilos para o editor Quill.js */
#quill-editor { min-height: 150px; border: 1px solid #d1d5db; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
#quill-toolbar { border: 1px solid #d1d5db; border-bottom: none; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; background-color: #f9fafb; padding: 0.5rem; }
#quill-toolbar .ql-formats button { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; }
#quill-toolbar .ql-header { height: 2.25rem; vertical-align: middle; font-size: 1rem; }
#insert-equation-btn { font-weight: bold; font-style: italic; }
#insert-equation-btn:hover { background-color: #e5e7eb; }

/* Classes para fontes e estruturas das equações */
.equation-span { vertical-align: middle; font-size: 1.1em; }
.ql-editor .font-math, .font-math { font-family: "STIX Two Math", "Cambria Math", serif !important; font-style: italic !important; }
.ql-editor .font-times, .font-times { font-family: "Times New Roman", Times, serif !important; font-style: italic !important; }
.ql-editor .font-arial, .font-arial { font-family: Arial, Helvetica, sans-serif !important; font-style: italic !important; }
.ql-editor .font-courier, .font-courier { font-family: "Courier New", Courier, monospace !important; }
.fraction { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle; margin: 0 0.2em; font-style: normal; }
.numerator { font-size: 0.8em; line-height: 1; }
.denominator { font-size: 0.8em; line-height: 1; border-top: 1px solid currentColor; }

/* Estilos para imagens, tabelas e gráficos */
#quill-editor img, #question-preview img, #question-text-projector img, #game-question-text img,
#quill-editor svg, #question-preview svg, #question-text-projector svg, #game-question-text svg { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 0.5rem auto; display: block; }
.option-image-preview-container img, .option-display-image { max-height: 100px; width: auto; object-fit: contain; margin: 0.5rem auto; border-radius: 0.375rem; display: block; }
.custom-table { width: 80%; margin: 20px auto; border-collapse: collapse; }
.custom-table th, .custom-table td { border: 1px solid #ccc; padding: 8px; text-align: center; }
.custom-table th { background-color: #007bff; color: white; }
.custom-table tr:nth-child(even){ background-color: #f2f2f2; }
.chart-container, .svg-container, .image-container { width: 100%; max-width: 450px; margin: 15px auto; }
.graph-canvas { border: 1px solid #e2e8f0; background-color: #f8fafc; border-radius: 8px; display: block; margin: 15px auto; width: 100%; max-width: 450px; height: auto; }

/* Alinhamento de texto */
#game-question-text.prose,
#question-preview.prose,
#question-text-projector.prose { text-align: justify; }

/* Estilos de Impressão */
@media print {
    body * { visibility: hidden; }
    #print-area, #print-area * { visibility: visible; }
    #print-area { position: absolute; left: 0; top: 0; width: 100%; }
    .qr-card-print { page-break-inside: avoid; border: 2px dashed #000 !important; }
}
.qr-card-print { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #ccc; border-radius: 1rem; padding: 1rem; position: relative; width: 100%; height: 100%; }
.qr-card-print .qr-code { padding: 1rem; background: white; display: flex; align-items: center; justify-content: center; }
.qr-card-print .answer-marker { position: absolute; font-size: 2.5rem; font-weight: bold; color: #333; }
.qr-card-print .marker-a { top: 0.5rem; }
.qr-card-print .marker-b { right: 0.5rem; top: 50%; transform: translateY(-50%); }
.qr-card-print .marker-c { bottom: 0.5rem; }
.qr-card-print .marker-d { left: 0.5rem; top: 50%; transform: translateY(-50%); }