/* ===================================================================== ProAprova Redação — Frontend (base) Reproduz os estilos do plugin original e moderniza o que é seguro. ATENÇÃO: o bloco "FOLHA PAUTADA" mantém medidas IDÊNTICAS ao original (line-height 38px, 1140px, grid 36.5px/38px, fonte 19px). Não alterar. ===================================================================== */ :root { /* Tokens originais (mantidos para compatibilidade com var() inline) */ --pa-blue: #0073e6; --pa-dark: #1f2937; --pa-text-gray: #4b5563; --pa-bg: #f8fafc; --pa-line: #cbd5e1; --pa-red-margin: #ef4444; /* Tokens novos (apenas para o refino visual) */ --pa-blue-600: #005bb5; --pa-border: #e5e7eb; --pa-muted: #64748b; --pa-success: #10b981; --pa-success-600: #059669; --pa-success-bg: #dcfce7; --pa-warning: #f59e0b; --pa-radius: 14px; --pa-radius-sm: 10px; --pa-radius-pill: 999px; --pa-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06); --pa-shadow-md: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04); --pa-shadow-lg: 0 12px 30px rgba(15, 23, 42, .10); --pa-ease: cubic-bezier(.2, .7, .3, 1); --pa-t: .22s var(--pa-ease); /* --- Superfícies e tinta --- */ --pa-surface: #ffffff; --pa-surface-2: #f3f4f6; --pa-divider: #f1f5f9; --pa-ink: #111827; /* --- Folha pautada --- Só as CORES da folha vivem aqui. As medidas (38px de pauta, 1140px de altura, grid 36.5px) continuam fixas no bloco da folha: mexer nelas desalinha o texto das linhas. */ --pa-paper-bg: #fafafa; --pa-paper-border: #d1d5db; --pa-paper-num: #9ca3af; /* --- Estados --- */ --pa-success-text: #166534; --pa-warning-bg: #fef3c7; --pa-warning-text: #d97706; --pa-info-bg: #e0f2fe; color-scheme: light; } /* ===================================================================== MODO ESCURO --------------------------------------------------------------------- Só as cores mudam: nenhuma medida da folha pautada é tocada. A classe vai em , aplicada pelo JavaScript, para alcançar também o fundo da página — sem isso a plataforma ficaria como uma ilha escura cercada pelo branco do tema. ===================================================================== */ html.pa-tema-dark { /* Azul clareado: o original perde contraste sobre fundo escuro */ --pa-blue: #4d9aff; --pa-blue-600: #7ab5ff; --pa-dark: #e8ebf0; --pa-text-gray: #b4bdcc; --pa-muted: #9aa5b8; --pa-surface: #1d2432; --pa-surface-2: #232b3b; --pa-divider: #262f3f; --pa-bg: #161b26; --pa-border: #2c3547; --pa-ink: #e8ebf0; /* A folha acompanha o tema: uma página branca acesa num editor escuro cansa a vista justamente na tela em que o aluno passa mais tempo. */ --pa-paper-bg: #1a2130; --pa-paper-border: #313b4e; --pa-paper-num: #6b7688; --pa-line: #39435a; /* Pauta */ --pa-red-margin: #c25555; /* Margem: vermelho suavizado */ --pa-success: #34d399; --pa-success-600: #5ceac6; --pa-success-bg: #10312a; --pa-success-text: #6ee7b7; --pa-warning: #fbbf24; --pa-warning-bg: #33270f; --pa-warning-text: #f5d98a; --pa-info-bg: #12303f; --pa-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3); --pa-shadow-md: 0 4px 12px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .3); --pa-shadow-lg: 0 12px 30px rgba(0, 0, 0, .55); color-scheme: dark; } /* Fundo da página no escuro. */ html.pa-tema-dark, html.pa-tema-dark body { background-color: var(--pa-bg); } /* ------------------------------- Shell ------------------------------- */ .pa-app { font-family: 'Inter', 'Roboto', 'Segoe UI', sans-serif; color: var(--pa-text-gray); max-width: 1200px; margin: 0 auto; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .pa-topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; } .pa-page-title { margin: 0; color: var(--pa-dark); font-size: 22px; font-weight: 800; letter-spacing: -.01em; } .pa-header { display: flex; justify-content: space-between; align-items: center; background: var(--pa-surface); padding: 20px 25px; border: 1px solid var(--pa-border); border-radius: var(--pa-radius); box-shadow: var(--pa-shadow-md); margin-bottom: 25px; gap: 20px; position: relative; z-index: 10; } .pa-title-area { display: flex; align-items: center; gap: 15px; flex: 1; } .pa-title-area h2 { margin: 0; font-size: 20px; color: var(--pa-dark); font-weight: 800; letter-spacing: -.01em; } /* ------------------------------ Botões ------------------------------ */ .pa-btn-back { background: var(--pa-surface-2); color: var(--pa-text-gray); padding: 9px 16px; border-radius: var(--pa-radius-sm); text-decoration: none; font-weight: 600; font-size: 14px; border: 1px solid var(--pa-border); white-space: nowrap; transition: background var(--pa-t), transform var(--pa-t), box-shadow var(--pa-t); display: inline-flex; align-items: center; gap: 8px; } .pa-btn-back:hover { background: var(--pa-border); transform: translateY(-1px); } .pa-btn-back:active { transform: translateY(0); } .pa-btn-back:focus-visible { outline: 3px solid rgba(0, 115, 230, .35); outline-offset: 2px; } /* Modificador escuro (botão "Minhas Redações") */ .pa-btn-dark { background: var(--pa-dark); color: var(--pa-surface); border-color: var(--pa-dark); } .pa-btn-dark:hover { background: var(--pa-ink); color: var(--pa-surface); } .pa-btn-pdf { flex-shrink: 0; background: var(--pa-surface); color: var(--pa-blue); border: 2px solid var(--pa-blue); padding: 10px 20px; border-radius: var(--pa-radius-sm); text-decoration: none !important; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; transition: background var(--pa-t), color var(--pa-t), transform var(--pa-t), box-shadow var(--pa-t); cursor: pointer; z-index: 20; position: relative; } .pa-btn-pdf:hover { background: var(--pa-blue); color: var(--pa-surface); transform: translateY(-1px); box-shadow: var(--pa-shadow-md); } .pa-btn-pdf:focus-visible { outline: 3px solid rgba(0, 115, 230, .35); outline-offset: 2px; } .pa-btn-pdf.disabled { opacity: .55; cursor: not-allowed; } .pa-btn-pdf.disabled:hover { background: var(--pa-surface); color: var(--pa-blue); transform: none; box-shadow: none; } /* --------------------------- Workspace ------------------------------ */ .pa-workspace { display: flex; gap: 30px; align-items: flex-start; } .pa-sidebar { width: 40%; background: var(--pa-surface); padding: 25px; border-radius: var(--pa-radius); border: 1px solid var(--pa-border); position: sticky; top: 20px; max-height: 85vh; overflow-y: auto; color: var(--pa-text-gray); font-size: 15px; box-shadow: var(--pa-shadow-sm); } .pa-sidebar.hidden { display: none; } .pa-sidebar-title { margin-top: 0; font-size: 16px; color: var(--pa-blue); text-transform: uppercase; letter-spacing: .04em; } .pa-main { flex-grow: 1; overflow: hidden; padding-bottom: 40px; } .pa-toggle-btn { background: var(--pa-dark); color: var(--pa-surface); border: none; padding: 10px 18px; border-radius: var(--pa-radius-sm); cursor: pointer; font-size: 13px; font-weight: 600; margin-bottom: 15px; display: inline-flex; align-items: center; gap: 6px; transition: background var(--pa-t), transform var(--pa-t); } .pa-toggle-btn:hover { background: var(--pa-ink); transform: translateY(-1px); } /* ============================ FOLHA PAUTADA ========================== Valores IDÊNTICOS ao original — não alterar (alinhamento das linhas). ==================================================================== */ .pa-paper { background: var(--pa-paper-bg); border: 1px solid var(--pa-paper-border); border-radius: 4px; box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.05); display: flex; max-width: 950px; margin: 0 auto; padding: 30px 40px; box-sizing: border-box; } .pa-margins { width: 40px; flex-shrink: 0; border-right: 2px solid var(--pa-red-margin); margin-right: 15px; } .pa-line-num { height: 38px; line-height: 38px; font-size: 13px; color: var(--pa-paper-num); user-select: none; font-family: sans-serif; } .pa-lines-container { flex-grow: 1; position: relative; height: 1140px; background-image: linear-gradient(transparent 36.5px, var(--pa-line) 36.5px); background-size: 100% 38px; } .pa-textarea { width: 100%; height: 1140px; line-height: 38px !important; font-size: 19px !important; font-family: 'Georgia', serif; color: var(--pa-ink); background: transparent; border: none; outline: none; resize: none; padding: 0 10px 0 0 !important; margin: 0 !important; vertical-align: top; box-sizing: border-box; overflow: hidden; white-space: pre-wrap; word-break: break-all; display: block; } /* ==================== FIM DA FOLHA PAUTADA (não alterar) ============= */ .pa-submit-btn { background: var(--pa-success); color: var(--pa-surface); border: none; width: 100%; max-width: 950px; display: block; margin: 30px auto 0 auto; padding: 20px; border-radius: var(--pa-radius); font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; transition: background var(--pa-t), transform var(--pa-t), box-shadow var(--pa-t); } .pa-submit-btn:hover { background: var(--pa-success-600); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 185, 129, .25); } .pa-submit-btn:active { transform: translateY(0); } /* ------------------------ Painel do aluno --------------------------- */ .pa-history-card { background: var(--pa-surface); border-radius: var(--pa-radius); border: 1px solid var(--pa-border); padding: 22px; margin-bottom: 20px; box-shadow: var(--pa-shadow-sm); transition: box-shadow var(--pa-t), transform var(--pa-t); } .pa-history-card:hover { box-shadow: var(--pa-shadow-md); } .pa-history-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; border-bottom: 1px solid var(--pa-divider); padding-bottom: 15px; gap: 12px; } .pa-history-date { color: var(--pa-muted); font-size: 13px; } .pa-history-title { margin: 5px 0 0 0; color: var(--pa-dark); font-size: 18px; } .pa-history-pending { color: var(--pa-muted); margin: 0; font-size: 14px; } .pa-status-badge { padding: 6px 14px; border-radius: var(--pa-radius-pill); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } .pa-badge-pendente { background: var(--pa-warning-bg); color: var(--pa-warning-text); } .pa-badge-corrigida { background: var(--pa-success-bg); color: var(--pa-success-text); } .pa-feedback-box { background: var(--pa-bg); border-left: 4px solid var(--pa-blue); padding: 20px; margin-top: 15px; border-radius: 0 var(--pa-radius-sm) var(--pa-radius-sm) 0; } .pa-feedback-head { margin: 0 0 10px 0; color: var(--pa-dark); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pa-feedback-nota { color: var(--pa-blue); font-size: 22px; font-weight: 800; } .pa-feedback-text { white-space: pre-wrap; } /* --------------------------- Empty states --------------------------- */ .pa-empty { background: var(--pa-surface); padding: 48px 30px; text-align: center; border-radius: var(--pa-radius); border: 1px solid var(--pa-border); box-shadow: var(--pa-shadow-sm); color: var(--pa-muted); } .pa-empty-icon { font-size: 40px; margin-bottom: 10px; } .pa-empty h3 { color: var(--pa-paper-num); margin: 0 0 6px 0; font-weight: 700; } .pa-empty p { margin: 0; color: var(--pa-muted); } /* ------------------------- Sucesso de envio ------------------------- */ .pa-success-box { background: var(--pa-success-bg); padding: 34px; border-radius: var(--pa-radius); text-align: center; box-shadow: var(--pa-shadow-sm); } .pa-success-box h2 { color: var(--pa-success-text); margin: 0 0 8px 0; } .pa-success-box p { color: var(--pa-success-text); margin: 0 0 6px 0; } .pa-success-back { margin: 15px auto 0 auto; display: inline-flex; } /* ---------------------------- Paginação ----------------------------- */ .pa-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 40px; } .pa-page-link { padding: 8px 14px; background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-radius-sm); color: var(--pa-text-gray); text-decoration: none; font-weight: 600; transition: background var(--pa-t), color var(--pa-t), border-color var(--pa-t), transform var(--pa-t); font-size: 14px; } .pa-page-link:hover { background: var(--pa-surface-2); color: var(--pa-dark); border-color: var(--pa-paper-border); transform: translateY(-1px); } .pa-page-active { background: var(--pa-blue); color: var(--pa-surface) !important; border-color: var(--pa-blue); } .pa-page-active:hover { background: var(--pa-blue-600); color: var(--pa-surface); border-color: var(--pa-blue-600); } /* --------------------- Acessibilidade / motion ---------------------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* --------------------------------------------------------------------- * Botão "Voltar ao Painel" * * Fica FORA de .pa-app (é prefixado pelo controller, antes do wrapper de * cada tela), então repete o max-width de .pa-app para alinhar com o * conteúdo em vez de encostar na borda da página. * ------------------------------------------------------------------ */ /* Barra superior: agrupa o voltar e o alternador de tema. Repete o max-width de .pa-app porque é prefixada FORA do wrapper de cada tela. */ .pa-topo-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1200px; margin: 0 auto 14px; font-family: 'Inter', 'Roboto', 'Segoe UI', sans-serif; } .pa-tema-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; padding: 0; background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-radius-pill); color: var(--pa-text-gray); cursor: pointer; transition: color var(--pa-t), border-color var(--pa-t); } .pa-tema-btn:hover, .pa-tema-btn:focus-visible { color: var(--pa-blue); border-color: var(--pa-blue); } .pa-tema-btn svg { display: block; } /* Um ícone por estado: sol no escuro (a ação é clarear), lua no claro. */ .pa-tema-btn .pa-ico-sol { display: none; } html.pa-tema-dark .pa-tema-btn .pa-ico-sol { display: block; } html.pa-tema-dark .pa-tema-btn .pa-ico-lua { display: none; } .pa-voltar-painel { margin: 0; font-family: 'Inter', 'Roboto', 'Segoe UI', sans-serif; } .pa-voltar-painel__link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 10px; border: 1px solid var(--pa-border); border-radius: 999px; background: var(--pa-surface); color: var(--pa-text-gray); font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; transition: color .15s ease, border-color .15s ease; } .pa-voltar-painel__link:hover, .pa-voltar-painel__link:focus { color: var(--pa-blue); border-color: var(--pa-blue); }