/* ===================================================================== Estilo principal - usa variáveis CSS definidas por paleta em ===================================================================== */ html { height: 100%; } body { background: var(--bg, #f5f6fa); font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1f2430; display: flex; flex-direction: column; min-height: 100vh; } body > footer { margin-top: auto; } h1, h2, h3, .title { font-family: 'Poppins', sans-serif; letter-spacing: -0.01em; } .navbar { border-bottom: 1px solid #eceff3; box-shadow: 0 1px 3px rgba(15, 23, 42, .04); } .navbar-link.has-text-weight-bold { color: var(--primary, #2563eb) !important; box-shadow: inset 0 -3px 0 var(--primary, #2563eb); } .navbar-item, .navbar-link { transition: background .12s ease, color .12s ease; } .navbar-dropdown .navbar-item:hover { background-color: color-mix(in srgb, var(--primary, #2563eb) 8%, white); } .button.is-link { background-color: var(--primary, #2563eb); border: none; } .button.is-link:hover { background-color: var(--secondary, #0ea5e9); } a { color: var(--primary, #2563eb); } .box { border-radius: 16px; box-shadow: 0 2px 14px rgba(15, 23, 42, .06); } .modal-card { border-radius: 10px; } .modal-card-head { border-top-left-radius: 10px; border-top-right-radius: 10px; } .modal-card-foot { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .modal-card-body { overflow-y: auto; max-height: 65vh; } textarea, .textarea { resize: none; } .modal-card-foot { gap: 1rem; } .live-update-banner { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: #1e2a32; color: #fff; padding: .7rem 1.2rem; border-radius: 999px; font-size: .85rem; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 60; } .live-update-banner a { color: #ffc53d; } .table-tools-search { display: inline-block; margin-bottom: .5rem; margin-right: 1rem; max-width: 260px; } .settings-masonry { column-count: 2; column-gap: 1.5rem; } .settings-masonry .settings-card { break-inside: avoid; margin-bottom: 1.5rem; display: inline-block; width: 100%; } @media (max-width: 768px) { .settings-masonry { column-count: 1; } } .site-brand-name { font-family: 'Fredoka', 'Poppins', sans-serif; font-weight: 600; font-size: 1.5rem; line-height: 1; letter-spacing: -0.01em; color: var(--primary, #2563eb); } @media (max-width: 480px) { .site-brand-name { font-size: 1.2rem; } } .board-search-wrap { display: flex; align-items: center; gap: .5rem; max-width: 360px; margin: 0 auto 1.2rem; background: rgba(255,255,255,.92); border-radius: 999px; padding: .4rem .9rem; box-shadow: 0 2px 8px rgba(0,0,0,.08); } .board-search-wrap input { border: none; outline: none; background: transparent; flex: 1; font-size: .9rem; } .post-card.search-match { outline: 3px solid var(--primary, #2563eb); outline-offset: 2px; } .post-card.search-dimmed { opacity: .25; } .btn-read-aloud.is-reading { color: var(--primary, #2563eb); animation: readPulse 1s infinite; } @keyframes readPulse { 50% { opacity: .4; } } /* ==================== Modo escuro ==================== */ html.dark-mode body { background: #14171c; color: #d8dbe2; } html.dark-mode .navbar, html.dark-mode .app-footer { background: #1b1f26 !important; border-color: #2a2f3a; } html.dark-mode .navbar-item, html.dark-mode .navbar-link { color: #d8dbe2 !important; } html.dark-mode .navbar-dropdown { background: #1b1f26; border-color: #2a2f3a; } html.dark-mode .navbar-dropdown .navbar-item:hover { background-color: #262b34; } html.dark-mode .box, html.dark-mode .modal-card-head, html.dark-mode .modal-card-body, html.dark-mode .modal-card-foot, html.dark-mode .table-container, html.dark-mode .settings-card, html.dark-mode .dropdown-content { background: #1e222a; color: #d8dbe2; border-color: #2a2f3a; } html.dark-mode .button-as-link { color: #d8dbe2; } html.dark-mode .button-as-link:hover { background-color: #262b34; } html.dark-mode .dropdown-item { color: #d8dbe2; } html.dark-mode .dropdown-divider { background-color: #2a2f3a; } html.dark-mode .table { background: #1e222a; color: #d8dbe2; } html.dark-mode .table td, html.dark-mode .table th { border-color: #2a2f3a; color: #d8dbe2; } html.dark-mode .table.is-striped tbody tr:not(.is-selected):nth-child(even) { background-color: #23272f; } html.dark-mode .input, html.dark-mode .textarea, html.dark-mode .select select { background: #262b34; border-color: #3a4150; color: #d8dbe2; } html.dark-mode .input::placeholder, html.dark-mode .textarea::placeholder { color: #7d8494; } html.dark-mode .title, html.dark-mode .subtitle, html.dark-mode strong, html.dark-mode label.label { color: #eef0f4; } html.dark-mode .has-text-grey { color: #9aa1af !important; } html.dark-mode .help { color: #9aa1af; } html.dark-mode .notification.is-light { background: #262b2f; color: #d8dbe2; } html.dark-mode .modal-background { background: rgba(10, 12, 16, .8); } html.dark-mode .table-tools-search .input, html.dark-mode hr { border-color: #2a2f3a; } html.dark-mode .dashboard-card, html.dark-mode .class-card { background: #1e222a; border-color: #2a2f3a; } /* A área de dentro de um mural mantém sempre as cores/papel de parede escolhidos pelo professor - o modo escuro não lhe mexe. */ .dropdown-content form { margin: 0; } .button-as-link { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0.375rem 1rem; font-size: 0.875rem; color: #363636; cursor: pointer; font-family: inherit; } .button-as-link:hover { background-color: #f5f5f5; } .pending-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #e53e3e; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.4; margin-left: 6px; vertical-align: middle; white-space: nowrap; animation: badge-pop .25s ease; } .pending-badge i { font-size: 10px; } .board-row-has-pending { border-left: 3px solid #e53e3e; } .board-row-has-pending td:first-child { padding-left: calc(.75em - 3px); } .pending-board-tag { cursor: pointer; font-weight: 600; } .pending-board-tag:hover { background-color: #c53030 !important; color: #fff !important; } html.dark-mode .board-row-has-pending { border-left-color: #fc8181; } @keyframes badge-pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } } .admin-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.75rem; padding-bottom: .75rem; border-bottom: 1px solid #e5e7eb; } .admin-nav-item { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: #4b5563; background: #f3f4f6; transition: background .15s ease, color .15s ease; } .admin-nav-item:hover { background: #e5e7eb; color: #1f2937; } .admin-nav-item.is-active { background: var(--primary, #2563eb); color: #fff; } .table-tools-controls { display: flex; align-items: center; margin-bottom: .6rem; } .is-sortable-th { cursor: pointer; user-select: none; white-space: nowrap; } .is-sortable-th:hover { color: var(--primary, #2563eb); } .sort-icon { font-size: .75em; margin-left: .2em; } .table-tools-pager { display: none; } /* ---- Cartões de murais (dashboard do professor) ---- */ .board-card { border-radius: 16px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; border: 1px solid #eceff3; } .board-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(15, 23, 42, .10); } .board-card .board-card-header { padding: 1.25rem; color: #fff; } .board-card .board-card-icon { font-size: 1.8rem; opacity: .9; } .board-card .board-code { font-family: monospace; letter-spacing: 2px; } .board-card.is-hidden { opacity: .55; } .post-type-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .6rem; } .post-type-option { cursor: pointer; text-align: center; border: 3px solid #e5e7eb; border-radius: 16px; padding: .8rem .4rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; transition: transform .1s ease, border-color .15s ease, background .15s ease; background: #fafafa; } .post-type-option:hover { transform: translateY(-2px); border-color: #cbd5e1; } .post-type-option input { display: none; } .post-type-option .icon { color: #6b7280; font-size: 1.5rem; } .post-type-option-label { font-size: .78rem; font-weight: 700; color: #4b5563; } .post-type-option.is-selected { border-color: var(--primary, #2563eb); background: color-mix(in srgb, var(--primary, #2563eb) 10%, white); } .post-type-option.is-selected .icon, .post-type-option.is-selected .post-type-option-label { color: var(--primary, #2563eb); } .icon-picker-selected-preview { text-align: center; padding: .5rem; margin-bottom: .75rem; border-radius: 8px; background: #f7f8fa; font-size: .85rem; font-weight: 600; } .icon-picker-selected-preview span { font-size: 1.3rem; vertical-align: middle; margin-left: .3rem; } .icon-picker label.is-chosen { background: color-mix(in srgb, var(--primary, #2563eb) 15%, white); box-shadow: 0 0 0 2px var(--primary, #2563eb); } .wallpaper-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .75rem; } .wallpaper-option { cursor: pointer; text-align: center; border: 2px solid transparent; border-radius: 10px; padding: .4rem; } .wallpaper-option:hover { border-color: #cbd5e1; } .wallpaper-option input { display: none; } .wallpaper-option input:checked ~ .wallpaper-swatch, .wallpaper-option:has(input:checked) .wallpaper-swatch { box-shadow: 0 0 0 3px var(--primary, #2563eb); } .wallpaper-swatch { display: block; width: 100%; height: 60px; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); margin-bottom: .3rem; } .wallpaper-label { font-size: .72rem; color: #4b5563; } .wallpaper-preview { display: inline-block; width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(0,0,0,.15); vertical-align: middle; margin-right: .5rem; } .board-edit-section { margin-bottom: 1.25rem; border-left: 4px solid var(--primary, #2563eb); } .board-edit-section .title.is-6 { color: var(--primary, #2563eb); } .icon-picker-trigger { gap: .5rem; } .app-footer { max-height: 100px; overflow: hidden; padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: center; } .app-footer .content { margin: 0; } .board-emoji-icon { font-size: 1em; line-height: 1; display: inline-block; } .board-title-with-icon { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .board-title-icon { font-size: .85em; line-height: 1; } .board-row-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; margin-right: .5rem; font-size: .85rem; vertical-align: middle; } /* ---- Seletor de tipo de mural (board_edit.php) ---- */ .board-type-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; } .board-type-option { border: 2px solid #e5e7eb; border-radius: 14px; padding: 1rem; cursor: pointer; display: flex; flex-direction: column; gap: .25rem; transition: border-color .15s ease, background .15s ease; } .board-type-option:hover { border-color: #cbd5e1; } .board-type-option.is-selected { border-color: var(--primary, #2563eb); background: color-mix(in srgb, var(--primary, #2563eb) 6%, white); } .board-type-option input[type="radio"] { display: none; } .board-type-option .board-type-label { font-weight: 600; } .board-type-option .board-type-desc { font-size: .78rem; color: #6b7280; } /* ---- Banner do mural (largura total) ---- */ .board-header-banner { padding: 2.5rem 0 2rem; color: #fff; background-size: cover; background-position: center; width: 100%; } .board-header-inner { max-width: 1400px; margin: 0 auto; padding: 0 2rem; } .board-header-controls-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; } .board-header-controls-row .board-deadline-badge, .board-header-controls-row .board-timer-display { margin-top: 0; } .board-deadline-badge { display: inline-block; margin-top: .75rem; background: rgba(255,255,255,.22); border-radius: 999px; padding: .35rem .9rem; font-size: .8rem; } .board-deadline-badge.is-closed { background: rgba(220, 38, 38, .35); } /* ---- Área de conteúdo do mural: usa a largura total da janela ---- */ .board-content-fluid { width: 100%; padding: 1.75rem 2rem 6rem; box-sizing: border-box; } /* ---- Botão flutuante "Nova publicação" (FAB), redondo, canto inferior direito ---- */ .fab-new-post { position: fixed; right: 24px; bottom: 24px; width: 62px; height: 62px; border-radius: 50%; background: var(--primary, #2563eb); color: #fff; border: none; font-size: 2rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.25); z-index: 45; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .fab-new-post:hover { transform: scale(1.08); background: var(--secondary, #0ea5e9); box-shadow: 0 10px 26px rgba(0,0,0,.3); } .fab-new-post:active { transform: scale(.97); } /* ---- Layouts por tipo de mural ---- */ .wall-canvas { position: relative; min-height: 520px; border: 1px dashed #e2e5ea; border-radius: 14px; background: rgba(255,255,255,.35); padding: 1rem; } .wall-canvas .post-card { width: 260px; } .stream-list { display: flex; flex-direction: column; gap: 1rem; max-width: 720px; margin: 0 auto; } /* Grelha "puzzle" em masonry (colunas CSS, sem JS) */ .grid-list { column-count: 4; column-gap: 1rem; } .grid-list .post-card { break-inside: avoid; margin-bottom: 1rem; width: 100%; } @media (max-width: 1200px) { .grid-list { column-count: 3; } } @media (max-width: 900px) { .grid-list { column-count: 2; } } @media (max-width: 560px) { .grid-list { column-count: 1; } } /* Prateleira (colunas / estilo Kanban) */ .shelf-board { display: flex; gap: 1.25rem; overflow-x: auto; padding-bottom: 1.5rem; } .shelf-column { flex: 0 0 300px; background: #f1f3f7; border-radius: 14px; padding: .9rem; max-height: calc(100vh - 260px); overflow-y: auto; } .shelf-column-header { font-weight: 700; margin-bottom: .75rem; padding: 0 .25rem; } .wordcloud-board { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.1rem; padding: 3rem 1.5rem; min-height: 300px; text-align: center; } .wordcloud-word { font-family: Poppins, sans-serif; font-weight: 700; line-height: 1; transition: transform .15s ease; cursor: default; } .wordcloud-word:hover { transform: scale(1.08); } .wordcloud-count { font-size: .5em; background: rgba(0,0,0,.08); border-radius: 999px; padding: .1em .4em; margin-left: .15em; vertical-align: super; } .post-card-media-video { position: relative; } .post-media-expand { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } .post-media-expand:hover { background: rgba(0,0,0,.75); } .lightbox-modal-content { display: flex; align-items: center; justify-content: center; max-width: 92vw; } .lightbox-modal-content img, .lightbox-modal-content video { max-width: 92vw; max-height: 88vh; border-radius: 8px; } .timer-control { display: inline-flex; align-items: center; gap: .4rem; } .board-timer-display { display: inline-flex; align-items: center; background: rgba(0,0,0,.35); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; padding: .3rem .8rem; border-radius: 999px; font-size: 1rem; } .board-timer-display.is-ending { background: #dc2626; animation: timerPulse 1s infinite; } @keyframes timerPulse { 50% { opacity: .55; } } .poll-widget { margin-top: .5rem; } .poll-option-btn { display: block; width: 100%; text-align: left; padding: .5rem .8rem; margin-bottom: .4rem; border: 1px solid #d8dce3; border-radius: 8px; background: #fff; cursor: pointer; font-size: .85rem; transition: background .15s ease, border-color .15s ease; } .poll-option-btn:hover { background: #f1f5f9; border-color: var(--primary, #2563eb); } .poll-result-row { position: relative; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: .4rem; padding: .45rem .7rem; overflow: hidden; font-size: .82rem; } .poll-result-row.is-mine { border-color: var(--primary, #2563eb); } .poll-result-bar { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--primary, #2563eb) 18%, white); z-index: 0; transition: width .4s ease; } .poll-result-label, .poll-result-pct { position: relative; z-index: 1; } .poll-result-pct { float: right; font-weight: 700; } .poll-total-votes { font-size: .72rem; color: #9ca3af; margin-top: .2rem; } .shelf-column .post-card { margin-bottom: .85rem; } .shelf-board.is-pros-cons { overflow-x: visible; } .shelf-board.is-pros-cons .shelf-column { flex: 1 1 50%; max-width: 50%; } .shelf-column.is-pros { background: #eafaf0; } .shelf-column.is-cons { background: #fdecec; } .shelf-column.is-pros .shelf-column-header { color: #16a34a; } .shelf-column.is-cons .shelf-column-header { color: #dc2626; } /* Linha do tempo horizontal */ .timeline-board { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; position: relative; padding: 3rem 1rem 2rem; } .timeline-track { position: absolute; top: 3.4rem; left: 1rem; right: 1rem; height: 4px; background: var(--primary, #2563eb); border-radius: 4px; opacity: .3; } .timeline-item { flex: 0 0 260px; position: relative; margin: 0 1rem; } .timeline-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--primary, #2563eb); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--primary, #2563eb); position: absolute; top: -1.9rem; left: 50%; transform: translateX(-50%); } .timeline-date { text-align: center; font-size: .75rem; font-weight: 600; color: #475569; margin-bottom: .6rem; } .post-type-checkboxes { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; border: 1px solid #e5e7eb; border-radius: 10px; padding: .85rem 1rem; background: #fafafa; } .post-card-youtube { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ } .post-card-youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .palette-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; } .palette-option { border: 2px solid #e5e7eb; border-radius: 12px; padding: .75rem; cursor: pointer; text-align: center; transition: border-color .15s ease; } .palette-option:hover { border-color: #cbd5e1; } .palette-option.is-selected { border-color: var(--primary, #2563eb); } .palette-option input { display: none; } .palette-swatches { display: flex; justify-content: center; gap: .3rem; margin-bottom: .4rem; } .palette-swatches span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); display: inline-block; } .palette-name { font-size: .82rem; font-weight: 600; } /* Tela livre ("canvas"): fundo quadriculado, mais espaço */ .wall-canvas.is-canvas-grid { min-height: 700px; background-image: linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px); background-size: 24px 24px; } /* Conversa (backchannel): balões alternados esquerda/direita */ .backchannel-list { display: flex; flex-direction: column; gap: .9rem; max-width: 760px; margin: 0 auto; } .backchannel-item { display: flex; } .backchannel-item .post-card { max-width: 75%; border-radius: 18px; } .backchannel-item.is-left { justify-content: flex-start; } .backchannel-item.is-left .post-card { border-bottom-left-radius: 4px; } .backchannel-item.is-right { justify-content: flex-end; } .backchannel-item.is-right .post-card { border-bottom-right-radius: 4px; } /* Botão de "gosto" (coração) */ .like-btn { border: none; background: transparent; color: #9ca3af; cursor: pointer; font-size: .95rem; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .4rem; border-radius: 8px; transition: background .15s ease, color .15s ease, transform .1s ease; } .like-btn:hover { background: #fef2f2; color: #ef4444; } .like-btn.is-liked { color: #ef4444; } .like-btn:active { transform: scale(.9); } .like-btn .like-count { font-size: .75rem; font-weight: 700; } .like-static { color: #ef4444; font-size: .85rem; padding: .25rem .4rem; } /* Garante que botões e campos dentro do mesmo grupo (ex.: campo + "Copiar") ficam sempre com a mesma altura, para consistência visual */ .field.has-addons .control > .input, .field.has-addons .control > .button, .field.has-addons .control > .select select { height: 2.5em; } /* Comentários mostrados diretamente na publicação (alternativa ao balão) */ .comments-inline { border-top: 1px solid #f1f2f5; padding: .6rem .8rem; } .comments-inline .comments-list { margin-bottom: .4rem; } .comments-inline .comment-item { font-size: .7rem; color: #374151; border-top: 1px dashed #ddd; } .comments-inline .comment-item:first-child { border-top: none; } /* ---- Cartão de publicação: fundo sempre branco, com contorno ---- */ .post-card { border-radius: 14px; box-shadow: 0 2px 10px rgba(15, 23, 42, .07); overflow: hidden; background: #ffffff; border: 2px solid #e5e7eb; display: flex; flex-direction: column; max-width: 100%; transition: box-shadow .15s ease; } .post-card:hover { box-shadow: 0 8px 20px rgba(15, 23, 42, .12); } .post-card-media { width: 100%; max-width: 100%; line-height: 0; } .post-card-media img, .post-card-media video { width: 100%; max-width: 100%; display: block; max-height: 320px; object-fit: cover; } .post-card-body { padding: .9rem 1rem; min-width: 0; /* evita que texto/URLs longas empurrem a largura do cartão */ } .post-card-title { font-weight: 700; margin-bottom: .35rem; overflow-wrap: anywhere; } .post-card-text { font-size: .92rem; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; } .post-card-link { overflow-wrap: anywhere; word-break: break-word; font-size: .9rem; } /* Mapa mental: centro visual + linhas SVG a ligar os cartões */ .wall-canvas.is-mindmap { min-height: 640px; background: radial-gradient(circle at center, #f8fafc, #eef1f5 80%); } .mindmap-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--primary, #2563eb); color: #fff; border-radius: 999px; padding: 1rem 1.4rem; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.2); z-index: 2; max-width: 160px; } .mindmap-hub-icon { display: block; font-size: 1.4rem; } .mindmap-hub-title { display: block; font-size: .78rem; font-weight: 700; margin-top: .2rem; } .mindmap-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .mindmap-lines line { stroke: var(--primary, #2563eb); stroke-width: 2; opacity: .35; } .mindmap-anchor { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--primary, #2563eb); color: var(--primary, #2563eb); display: flex; align-items: center; justify-content: center; font-size: .75rem; cursor: pointer; z-index: 5; box-shadow: 0 2px 6px rgba(0,0,0,.15); transition: background .15s ease, color .15s ease, transform .1s ease; } .mindmap-anchor:hover { background: var(--primary, #2563eb); color: #fff; transform: scale(1.08); } .mindmap-anchor.is-active-link { background: #f59e0b; border-color: #f59e0b; color: #fff; } .mindmap-lines line.mindmap-link-line { stroke: #f59e0b; stroke-width: 2.5; stroke-dasharray: 6 4; opacity: .6; } .post-card.is-link-source { box-shadow: 0 0 0 3px #f59e0b; } .post-card-date { font-size: .7rem; color: #9ca3af; margin: -.15rem 0 .4rem; } .post-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; font-size: .76rem; color: #6b7280; } /* Barra de ícones do cartão (comentários + ações do professor) */ .post-card-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; padding: .4rem .55rem; border-top: 1px solid #f1f2f5; } .comment-bubble-btn { margin-right: auto; border: none; background: transparent; color: #6b7280; cursor: pointer; font-size: .95rem; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .4rem; border-radius: 8px; transition: background .15s ease, color .15s ease; } .comment-bubble-btn:hover { background: #f1f5f9; color: var(--primary, #2563eb); } .comment-bubble-btn .comment-count { background: var(--primary, #2563eb); color: #fff; font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 0 .4rem; line-height: 1.5; } .post-icon-btn { border: none; background: transparent; color: #4b5563; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; } .post-icon-btn:hover { background: #f1f5f9; color: #1f2430; } .post-icon-btn.is-danger:hover { background: #fee2e2; color: #dc2626; } .post-icon-btn.is-success:hover { background: #dcfce7; color: #16a34a; } .post-card-draggable { cursor: grab; user-select: none; touch-action: none; } .post-card-draggable.is-not-draggable { cursor: default; } .post-card-draggable.is-dragging { cursor: grabbing; z-index: 100; box-shadow: 0 14px 30px rgba(0,0,0,.2); opacity: .96; } /* ---- Modal balão de comentários ---- */ .modal-balloon .modal-card { border-radius: 20px; max-width: 420px; position: relative; } .modal-balloon .modal-card-head { border-radius: 20px 20px 0 0; } .modal-balloon .modal-card-body { max-height: 60vh; } .comment-item { border-top: 1px dashed #eee; padding: .5rem 0; font-size: .8rem; color: #374151; overflow-wrap: anywhere; } .comment-item:first-child { border-top: none; } .comment-item .comment-author { font-weight: 600; } .icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: .4rem; max-height: 180px; overflow-y: auto; border: 1px solid #ddd; border-radius: 8px; padding: .5rem; } .icon-picker label { cursor: pointer; text-align: center; padding: .5rem 0; border-radius: 8px; } .icon-picker input { display: none; } .icon-picker input:checked + span { color: var(--primary, #2563eb); } .icon-picker label:hover { background: #f2f4f8; } .color-swatch { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd; cursor: pointer; } .color-swatch.is-selected { box-shadow: 0 0 0 2px var(--primary, #2563eb); } @media (max-width: 768px) { .board-header-inner { padding: 0 1.25rem; } .board-content-fluid { padding: 1.25rem 1rem 6rem; } .fab-new-post { right: 16px; bottom: 16px; width: 56px; height: 56px; font-size: 1.75rem; } }