/* =====================================================================
   ProAprova Redação — Responsivo
   A regra @media(max-width:900px) abaixo é IDÊNTICA à do plugin original.
   Os blocos seguintes apenas adicionam polimento para telas menores.
   A "folha pautada" NÃO é alterada aqui (preserva o alinhamento das linhas).
   ===================================================================== */

/* --- Regra original preservada --- */
@media (max-width: 900px) {
    .pa-header { flex-direction: column; align-items: flex-start; }
    .pa-title-area { width: 100%; }
    .pa-btn-pdf { width: 100%; justify-content: center; }
    .pa-workspace { flex-direction: column; }
    .pa-sidebar { width: 100%; position: static; }
}

/* --- Refinamentos adicionais (tablet) --- */
@media (max-width: 900px) {
    .pa-topbar { flex-direction: column; align-items: stretch; }
    .pa-topbar .pa-btn-dark { justify-content: center; }
    .pa-sidebar { max-height: none; margin-bottom: 20px; }
}

/* --- Celular --- */
@media (max-width: 640px) {
    .pa-grid { grid-template-columns: 1fr; gap: 18px; }
    .pa-header { padding: 16px 18px; border-radius: 12px; }
    .pa-page-title { font-size: 20px; }
    .pa-title-area h2 { font-size: 18px; }

    .pa-history-head { flex-direction: column; }
    .pa-status-badge { align-self: flex-start; }
    .pa-feedback-head { flex-direction: column; gap: 4px; }

    .pa-pagination { gap: 6px; }
    .pa-page-link { padding: 7px 12px; font-size: 13px; }
}

/* --- Admin em telas menores --- */
@media (max-width: 782px) {
    .pa-admin .pa-input-group { flex-direction: column; align-items: stretch; }
    .pa-admin .pa-input-group .pa-upload-btn { width: 100%; }
    .pa-envio-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .pa-envio-status { align-self: flex-start; }
}