:root { color-scheme: light only; --cc-bg-soft: #f7f9fc; --cc-border: #e3e7ef; --cc-text-muted: #6b7280; } /* Força o tema claro do Bulma v1 mesmo quando o SO está em modo escuro. Bulma v1 alterna automaticamente os tokens via prefers-color-scheme; data-theme="light" no tem precedência, e aqui reforçamos o color-scheme para impedir qualquer renderização escura nativa. */ html[data-theme="light"] { color-scheme: light only; } body { display: flex; flex-direction: column; min-height: 100vh; background-color: var(--cc-bg-soft); } main { flex: 1 0 auto; } .footer { flex-shrink: 0; padding: 1.5rem; background-color: #fff; border-top: 1px solid var(--cc-border); } /* ---------- Material Symbols Light (ligaturas) ---------- */ .material-symbols-light { font-family: 'Material Symbols Outlined'; font-weight: 300; font-style: normal; font-size: 1.05em; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } .cc-icon { vertical-align: -2px; } .tag .cc-icon { font-size: 1em; } /* ---------- nav ---------- */ .navbar.is-dark { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); } .navbar-item.is-active { background-color: rgba(255, 255, 255, 0.08); } /* Bulma's .container inside .navbar grows to fit non-shrinking flex children. When the menu is wider than the viewport the centered container overflows equally on both sides — blank bar on the left, items clipped on the right. */ .navbar > .container { width: 100%; max-width: 100%; min-width: 0; margin-inline: auto; padding-inline: 0.75rem; box-sizing: border-box; } @media screen and (min-width: 1024px) { .navbar-menu { flex: 1 1 0; min-width: 0; } .navbar-start, .navbar-end { flex-wrap: wrap; min-width: 0; } .navbar-start .navbar-item, .navbar-end .navbar-item { font-size: 0.875rem; padding-inline: 0.5rem; } .navbar-brand .navbar-item { font-size: 1.125rem; padding-inline: 0; } } /* ---------- fluxo guiado ---------- */ .steps-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; } .steps-item { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.7rem; border-radius: 999px; border: 1px solid var(--cc-border); background: #fff; color: #4a4a4a; font-size: 0.85rem; font-weight: 600; } .steps-item .steps-dot { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; background: #f2f4f8; } .steps-item.is-current { border-color: #3273dc; color: #1f4fa3; background: #edf4ff; } .steps-item.is-current .steps-dot { background: #3273dc; color: #fff; } .steps-item.is-done { border-color: #bde8cc; color: #257953; background: #f1fbf5; } .steps-item.is-done .steps-dot { background: #48c774; color: #fff; } /* ---------- utilitários mínimos (sem equivalente Bulma) ---------- */ .cc-scroll-y-18 { max-height: 18rem; overflow-y: auto; } /* ---------- prontidão (checklist da home) ---------- */ .readiness-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--cc-border); } .readiness-row:last-child { border-bottom: none; } .readiness-row .readiness-text { flex: 1; min-width: 0; } .readiness-row .readiness-text small { display: block; margin-top: 0.1rem; } .readiness-row .readiness-icon { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: 0 0 auto; } .readiness-row.is-ok .readiness-icon { background: #effaf3; color: #257953; } .readiness-row.is-pending .readiness-icon { background: #fff8db; color: #946c00; } /* ---------- modo otimizado (único card + slider) ---------- */ .mode-card { position: relative; border: 2px solid #3273dc; border-radius: 14px; padding: 1.5rem 1.5rem 1.35rem; background: linear-gradient(180deg, #f6faff 0%, #ffffff 65%); box-shadow: 0 8px 24px rgba(50, 115, 220, 0.12); display: block; overflow: hidden; } .mode-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #3273dc, #5aa1ff); } .mode-card .mode-badge { position: absolute; top: 0.85rem; right: 0.85rem; display: inline-flex; align-items: center; font-size: 0.68rem; text-transform: uppercase; font-weight: 700; background: linear-gradient(135deg, #2bb673, #1f9c5f); color: #fff; padding: 0.3rem 0.7rem; border-radius: 99px; letter-spacing: 0.06em; box-shadow: 0 2px 6px rgba(31, 156, 95, 0.25); } .mode-card-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.85rem; padding-right: 5.5rem; } .mode-card .mode-icon { width: 2.75rem; height: 2.75rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #3273dc; color: #fff; flex: 0 0 auto; } .mode-card .mode-icon .cc-icon { font-size: 1.4rem; } .mode-card h3 { font-weight: 700; } .mode-card .mode-desc { color: var(--cc-text-muted); font-size: 0.92rem; line-height: 1.5; margin-bottom: 0; } .mode-card .mode-time-control { margin: 1.1rem -1.5rem -1.35rem; border-top: 1px solid #dde6f4; padding: 1rem 0 1rem; background: rgba(247, 250, 255, 0.6); } .mode-time-header, .mode-time-labels { padding: 0 1.25rem; } .mode-time-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; } /* slider customizado com ticks (edge-to-edge no card) */ .mode-slider { position: relative; padding: 0.25rem 0.5rem 1.1rem; } .mode-slider-input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 24px; background: transparent; outline: none; cursor: pointer; margin: 0; padding: 0; } .mode-slider-input::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, #3273dc 0%, #3273dc var(--cc-slider-fill, 0%), #dbe4f3 var(--cc-slider-fill, 0%), #dbe4f3 100%); } .mode-slider-input::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, #3273dc 0%, #3273dc var(--cc-slider-fill, 0%), #dbe4f3 var(--cc-slider-fill, 0%), #dbe4f3 100%); } .mode-slider-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; border: 3px solid #3273dc; box-shadow: 0 2px 6px rgba(50, 115, 220, 0.35); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; } .mode-slider-input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid #3273dc; box-shadow: 0 2px 6px rgba(50, 115, 220, 0.35); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; } .mode-slider-input:hover::-webkit-slider-thumb, .mode-slider-input:focus-visible::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 3px 10px rgba(50, 115, 220, 0.45); } .mode-slider-input:hover::-moz-range-thumb, .mode-slider-input:focus-visible::-moz-range-thumb { transform: scale(1.12); box-shadow: 0 3px 10px rgba(50, 115, 220, 0.45); } .mode-slider-ticks { position: absolute; left: calc(0.5rem + 10px); right: calc(0.5rem + 10px); bottom: 0.2rem; display: flex; justify-content: space-between; pointer-events: none; } .mode-slider-tick { width: 2px; height: 6px; border-radius: 1px; background: #c5d2e7; } .mode-slider-tick.is-major { height: 10px; background: #8aa3cc; } .mode-time-labels { display: flex; justify-content: space-between; color: var(--cc-text-muted); font-size: 0.78rem; margin-top: 0.1rem; } @media (max-width: 768px) { .mode-card { padding: 1.25rem; } .mode-card-head { padding-right: 0; } .mode-card .mode-badge { position: static; margin-bottom: 0.6rem; display: inline-flex; } } /* ---------- qualidade ---------- */ .quality-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; } .quality-stars { font-size: 1.1em; letter-spacing: 0.06em; } /* ---------- períodos por dia (slots_por_dia da turma) ---------- */ .slots-por-dia-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 0.6rem; align-items: end; } .slots-por-dia-cell { background: #fff; border: 1px solid var(--cc-border); border-radius: 8px; padding: 0.55rem 0.55rem 0.6rem; } .slots-por-dia-cell .label { margin-bottom: 0.3rem !important; text-align: center; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cc-text-muted); } .slots-por-dia-cell .input { font-weight: 600; font-size: 1.05rem; } .slots-por-dia-total { background: #f6f9ff; border-color: #d2deef; text-align: center; } .slots-por-dia-total-value { font-size: 1.6rem; line-height: 1.1; padding-top: 0.15rem; } .slots-por-dia-total-value strong { color: #1f4fa3; } @media (max-width: 768px) { .slots-por-dia-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .slots-por-dia-total { grid-column: 1 / -1; } } /* ---------- carga horária / progresso de currículo ---------- */ .carga-progress { position: relative; height: 1.5rem; background: #eef2f8; border-radius: 99px; overflow: hidden; } .carga-progress .carga-fill { height: 100%; background: #3273dc; transition: width 0.2s ease, background-color 0.2s ease; } .carga-progress.is-incomplete .carga-fill { background: #ffdd57; } .carga-progress.is-over .carga-fill { background: #f14668; } .carga-progress.is-complete .carga-fill { background: #48c774; } .carga-progress .carga-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 600; color: #2c2c2c; } /* ---------- tabela da grade ---------- */ .grade-table { border: 1px solid var(--cc-border); border-radius: 8px; overflow: hidden; background: #fff; } .grade-table th, .grade-table td { vertical-align: middle; min-width: 120px; padding: 0.55rem 0.45rem !important; } .grade-table .grade-day { font-weight: 600; } .grade-cell { font-size: 0.82rem; line-height: 1.25; border: 1px solid #e9ecf3 !important; } .grade-cell strong { display: block; margin-bottom: 2px; } .grade-cell .cell-room { font-size: 0.72rem; color: var(--cc-text-muted); display: block; margin-top: 2px; } /* Células fora do expediente daquela turma (slots_por_dia[d] = 0 ou slot > slots_por_dia[d]). */ .grade-cell--off { background: repeating-linear-gradient( 45deg, #f6f7fb, #f6f7fb 6px, #eef0f7 6px, #eef0f7 12px ) !important; color: transparent; border: 1px dashed #d4d8e3 !important; cursor: default; } .grade-cell--off * { display: none !important; } /* Modo de edição manual da grade */ .grade-editing .grade-cell:not(.grade-cell--off) { cursor: pointer; outline: 1px dashed #c7ccd9; outline-offset: -3px; } .grade-editing .grade-cell[draggable="true"] { cursor: grab; } .grade-editing .grade-cell.is-drop-target { outline: 2px solid #3273dc; outline-offset: -2px; } .grade-editing .grade-cell.is-dragging { opacity: 0.45; } .grade-edit-bar { position: sticky; bottom: 0; z-index: 30; margin-top: 1.5rem; padding: 0.85rem 1rem; background: var(--bulma-scheme-main, #fff); border: 1px solid #e0e3ec; border-radius: 8px; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; } .grade-edit-bar .grade-edit-hint { color: var(--cc-text-muted, #7a7f8c); font-size: 0.85rem; } .grade-edit-bar .grade-edit-actions { display: flex; gap: 0.5rem; } .grade-edit-bar #grade-edit-feedback { flex-basis: 100%; } /* Áreas (com legenda) */ .grade-cell[data-area="exatas"] { background-color: #e3f2ff; } .grade-cell[data-area="humanas"] { background-color: #fff3e0; } .grade-cell[data-area="biologicas"] { background-color: #e8f5e9; } .grade-cell[data-area="linguagens"] { background-color: #fce4ec; } .grade-cell[data-area="geral"] { background-color: #f5f5f5; } .grade-cell[data-area="codigo"], .grade-cell[data-area="programacao"]{ background-color: #ede7f6; } .grade-cell[data-area="matematica"] { background-color: #e3f2ff; } .grade-cell[data-area="sistemas"] { background-color: #f1f8e9; } .grade-cell[data-area="redes"] { background-color: #fff8e1; } .list-plain { list-style: none; padding-left: 0; margin-bottom: 0; } .grade-log-pre { max-height: 16rem; overflow: auto; } .area-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; vertical-align: middle; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; margin-right: 0.35rem; } .area-swatch--exatas { background-color: #e3f2ff; } .area-swatch--humanas { background-color: #fff3e0; } .area-swatch--biologicas { background-color: #e8f5e9; } .area-swatch--linguagens { background-color: #fce4ec; } .area-swatch--geral { background-color: #f5f5f5; } /* ---------- disponibilidade do professor ---------- */ .disp-grid td { padding: 0.25rem 0.4rem !important; } .disp-grid td.is-available { background-color: #e8f5e9; } .disp-grid td.is-unavailable { background-color: #ffe8eb; } .disp-grid td:not(.disp-day-actions) { cursor: pointer; } .disp-grid .disp-toggle { min-width: 2.5rem; width: 100%; font-weight: 600; } .disp-day-actions .button { font-size: 0.75rem; } /* ---------- lista de disciplinas (portal + admin) ---------- */ .prof-disc-panel { border: 1px solid var(--cc-border); border-radius: 6px; padding: 1rem; background: #fafbfc; } .prof-disc-list { border: 1px solid var(--cc-border); border-radius: 4px; background: #fff; } .prof-disc-item { border-bottom: 1px solid var(--cc-border); cursor: pointer; } .prof-disc-item:last-child { border-bottom: none; } .prof-disc-item:hover { background: #f7f9fc; } .tag.is-clickable { cursor: pointer; } .tag.is-clickable:hover { filter: brightness(0.96); } [data-disc-ensino-filters] .button.is-active { border-color: #485fc7; color: #3850b7; } #sec-grade, #sec-disponibilidade, #sec-disciplinas, #prof-disp-section { scroll-margin-top: 1.5rem; } /* ---------- impressão (somente a tabela da grade) ---------- */ /* ---------- geração de grade / barra de progresso ---------- */ #progresso-bar.progress { height: 1.25rem; margin-bottom: 0.75rem; } #progresso-bar.progress.is-indeterminate { animation: grade-progress-pulse 1.6s ease-in-out infinite; } @keyframes grade-progress-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } .grade-progress-frase { margin: 0; font-size: 0.95rem; color: #3e4c63; min-height: 1.4em; transition: opacity 0.25s ease; } @media print { body { background: #fff; } .navbar, .footer, .level, .tags, .no-print, button, details, .breadcrumb { display: none !important; } .section { padding: 0 !important; } .grade-table { box-shadow: none; border: 1px solid #999; } .grade-cell { font-size: 0.75rem; } h2.title.is-4 { font-size: 1rem; } }