/* ========================================================================= Kanban — camada de estilo própria, sobre o Bootstrap 5.3. O Bootstrap cuida dos componentes (modal, dropdown, form, alerta); este arquivo cuida da identidade: cor, densidade, cantos e sombra. O tema escuro sai do atributo data-bs-theme="dark" no . ========================================================================= */ /* ---------- Tokens ------------------------------------------------------ */ :root { --k-radius: 12px; --k-radius-sm: 8px; --k-gap: 0.75rem; --k-accent: #4f46e5; --k-accent-soft: rgba(79, 70, 229, 0.12); --k-accent-text: #fff; --k-bg: #f4f5f8; --k-surface: #ffffff; --k-surface-2: #eceef3; --k-border: #dfe2ea; --k-text: #1a1c24; --k-muted: #6b7280; --k-ok: #16a34a; --k-warn: #d97706; --k-danger: #dc2626; --k-ok-soft: rgba(22, 163, 74, 0.12); --k-warn-soft: rgba(217, 119, 6, 0.14); --k-danger-soft: rgba(220, 38, 38, 0.12); --k-shadow: 0 1px 2px rgba(16, 18, 27, 0.06), 0 2px 8px rgba(16, 18, 27, 0.05); --k-shadow-lg: 0 8px 30px rgba(16, 18, 27, 0.14); --k-nav: #14161f; } [data-bs-theme='dark'] { --k-accent: #818cf8; --k-accent-soft: rgba(129, 140, 248, 0.18); --k-accent-text: #0d0f16; --k-bg: #0d0f16; --k-surface: #171a24; --k-surface-2: #1f2330; --k-border: #2b3040; --k-text: #e6e8ef; --k-muted: #949bb0; --k-ok: #4ade80; --k-warn: #fbbf24; --k-danger: #f87171; --k-ok-soft: rgba(74, 222, 128, 0.14); --k-warn-soft: rgba(251, 191, 36, 0.14); --k-danger-soft: rgba(248, 113, 113, 0.14); --k-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.3); --k-shadow-lg: 0 10px 36px rgba(0, 0, 0, 0.55); --k-nav: #12141d; } /* Repassa os tokens para as variáveis do próprio Bootstrap, para que os componentes nativos herdem a paleta sem sobrescrita caso a caso. */ :root, [data-bs-theme='dark'] { --bs-body-bg: var(--k-bg); --bs-body-color: var(--k-text); --bs-border-color: var(--k-border); --bs-secondary-color: var(--k-muted); --bs-primary: var(--k-accent); --bs-link-color: var(--k-accent); --bs-link-hover-color: var(--k-accent); --bs-border-radius: var(--k-radius-sm); --bs-border-radius-lg: var(--k-radius); } /* ---------- Base -------------------------------------------------------- */ html, body { height: 100%; } body { background: var(--k-bg); color: var(--k-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 0.9375rem; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; font-weight: 600; } ::selection { background: var(--k-accent-soft); } /* Barra de rolagem discreta — o quadro tem muita rolagem horizontal. */ * { scrollbar-width: thin; scrollbar-color: var(--k-border) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--k-border); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background-color: var(--k-muted); background-clip: content-box; } /* ---------- Navbar ------------------------------------------------------ */ .k-nav { background: var(--k-nav); border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 0.5rem 1rem; position: sticky; top: 0; z-index: 1030; } .k-nav__brand { display: inline-flex; align-items: center; gap: 0.5rem; color: #fff; font-weight: 650; letter-spacing: -0.02em; text-decoration: none; } .k-nav__brand:hover { color: #fff; } .k-nav__logo { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #6366f1, #a855f7); display: grid; place-items: center; color: #fff; font-size: 0.75rem; font-weight: 700; } .k-nav__link { color: rgba(255, 255, 255, 0.66); text-decoration: none; font-size: 0.875rem; padding: 0.35rem 0.6rem; border-radius: var(--k-radius-sm); transition: background 0.15s, color 0.15s; } .k-nav__link:hover, .k-nav__link.is-active { color: #fff; background: rgba(255, 255, 255, 0.09); } .k-nav__btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--k-radius-sm); background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.8); transition: background 0.15s, color 0.15s; } .k-nav__btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; } /* ---------- Avatar ------------------------------------------------------ */ .k-avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--k-accent); color: var(--k-accent-text); font-size: 0.7rem; font-weight: 650; letter-spacing: 0.02em; flex: 0 0 auto; user-select: none; } .k-avatar--sm { width: 24px; height: 24px; font-size: 0.6rem; } .k-avatar--lg { width: 40px; height: 40px; font-size: 0.85rem; } /* Pilha de avatares sobrepostos, para os responsáveis do card. */ .k-avatars { display: inline-flex; } .k-avatars .k-avatar + .k-avatar { margin-left: -5px; } .k-avatars .k-avatar { box-shadow: 0 0 0 2px var(--k-surface); } /* ---------- Superfícies ------------------------------------------------- */ .k-card { background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius); box-shadow: var(--k-shadow); } .k-muted { color: var(--k-muted); } .k-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; line-height: 1.5; background: var(--k-surface-2); color: var(--k-muted); white-space: nowrap; } .k-chip--ok { background: var(--k-ok-soft); color: var(--k-ok); } .k-chip--warn { background: var(--k-warn-soft); color: var(--k-warn); } .k-chip--danger { background: var(--k-danger-soft); color: var(--k-danger); } .k-chip--accent { background: var(--k-accent-soft); color: var(--k-accent); } /* ---------- Botões ------------------------------------------------------ */ .btn { font-size: 0.875rem; font-weight: 550; } .btn-primary { --bs-btn-bg: var(--k-accent); --bs-btn-border-color: var(--k-accent); --bs-btn-color: var(--k-accent-text); --bs-btn-hover-bg: color-mix(in srgb, var(--k-accent) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--k-accent) 85%, #000); --bs-btn-hover-color: var(--k-accent-text); --bs-btn-active-bg: color-mix(in srgb, var(--k-accent) 75%, #000); --bs-btn-active-color: var(--k-accent-text); } .btn-ghost { background: transparent; border: 1px solid transparent; color: var(--k-muted); } .btn-ghost:hover { background: var(--k-surface-2); color: var(--k-text); } /* ---------- Formulários ------------------------------------------------- */ .form-control, .form-select { background: var(--k-surface); border-color: var(--k-border); color: var(--k-text); font-size: 0.875rem; } .form-control:focus, .form-select:focus { background: var(--k-surface); border-color: var(--k-accent); color: var(--k-text); box-shadow: 0 0 0 3px var(--k-accent-soft); } .form-control::placeholder { color: var(--k-muted); opacity: 0.7; } .form-label { font-size: 0.8rem; font-weight: 600; color: var(--k-muted); margin-bottom: 0.3rem; } .form-check-input:checked { background-color: var(--k-accent); border-color: var(--k-accent); } /* ---------- Modal, dropdown, alerta ------------------------------------- */ .modal-content { background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius); box-shadow: var(--k-shadow-lg); } .dropdown-menu { --bs-dropdown-bg: var(--k-surface); --bs-dropdown-border-color: var(--k-border); --bs-dropdown-link-color: var(--k-text); --bs-dropdown-link-hover-bg: var(--k-surface-2); --bs-dropdown-link-hover-color: var(--k-text); border-radius: var(--k-radius-sm); box-shadow: var(--k-shadow-lg); font-size: 0.875rem; padding: 0.3rem; } .dropdown-item { border-radius: 6px; } .alert { border: 1px solid var(--k-border); background: var(--k-surface); color: var(--k-text); border-radius: var(--k-radius-sm); box-shadow: var(--k-shadow); font-size: 0.875rem; } .alert-success { border-left: 3px solid var(--k-ok); } .alert-warning { border-left: 3px solid var(--k-warn); } .alert-danger, .alert-error { border-left: 3px solid var(--k-danger); } .alert-info { border-left: 3px solid var(--k-accent); } /* ---------- Avisos ------------------------------------------------------ Canto superior direito, abaixo da navbar. Não empurram o conteúdo e sempre ficam por cima do modal (que o Bootstrap coloca em 1055). ------------------------------------------------------------------------ */ .k-avisos { position: fixed; top: calc(51px + 0.75rem); right: 0.9rem; z-index: 1085; width: min(400px, calc(100vw - 1.8rem)); display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } .k-aviso { pointer-events: auto; display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.65rem 0.75rem; background: var(--k-surface); border: 1px solid var(--k-border); border-left: 3px solid var(--k-muted); border-radius: var(--k-radius-sm); box-shadow: var(--k-shadow-lg); font-size: 0.83rem; line-height: 1.45; animation: k-aviso-entra 0.22s ease-out; } @keyframes k-aviso-entra { from { opacity: 0; transform: translateX(14px) scale(0.98); } to { opacity: 1; transform: none; } } .k-aviso.is-saindo { opacity: 0; transform: translateX(14px); transition: opacity 0.2s, transform 0.2s; } .k-aviso__icone { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 0.1rem; color: var(--k-muted); } .k-aviso__icone svg { width: 100%; height: 100%; display: block; } .k-aviso__texto { flex: 1 1 auto; min-width: 0; color: var(--k-text); word-break: break-word; } .k-aviso__fechar { flex: 0 0 auto; border: 0; background: transparent; color: var(--k-muted); font-size: 1.15rem; line-height: 1; padding: 0 0.1rem; border-radius: 4px; } .k-aviso__fechar:hover { color: var(--k-text); background: var(--k-surface-2); } .k-aviso--success { border-left-color: var(--k-ok); } .k-aviso--success .k-aviso__icone { color: var(--k-ok); } .k-aviso--warning { border-left-color: var(--k-warn); } .k-aviso--warning .k-aviso__icone { color: var(--k-warn); } .k-aviso--error, .k-aviso--danger { border-left-color: var(--k-danger); } .k-aviso--error .k-aviso__icone, .k-aviso--danger .k-aviso__icone { color: var(--k-danger); } .k-aviso--info, .k-aviso--debug { border-left-color: var(--k-accent); } .k-aviso--info .k-aviso__icone, .k-aviso--debug .k-aviso__icone { color: var(--k-accent); } /* Na tela de login não há navbar: o aviso sobe. */ body:not(:has(.k-nav)) .k-avisos { top: 0.9rem; } /* ---------- Tela de login ----------------------------------------------- */ .k-login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(1000px 500px at 15% -10%, var(--k-accent-soft), transparent 60%), radial-gradient(800px 400px at 110% 110%, var(--k-accent-soft), transparent 60%), var(--k-bg); } .k-login__box { width: min(460px, 100%); } /* ---------- Utilidades -------------------------------------------------- */ .k-stack { display: flex; flex-direction: column; gap: var(--k-gap); } .k-row { display: flex; align-items: center; gap: 0.5rem; } .k-grow { flex: 1 1 auto; min-width: 0; } .k-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .k-empty { text-align: center; color: var(--k-muted); padding: 3rem 1rem; font-size: 0.875rem; } /* Indicador de requisição do HTMX. */ .htmx-indicator { opacity: 0; transition: opacity 0.15s; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } /* ========================================================================= Quadro — colunas, cards, modal e painel lateral ========================================================================= */ .k-board-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--k-border); background: var(--k-surface); } /* Quem cede espaço é o nome do projeto, que já sai truncado — os botões da direita ficam inteiros, numa linha só. Sem isso, "Editar projeto" e "Equipe e atividade" quebram no meio e a barra vira duas linhas. */ .k-board-head > .btn, .k-board-head > .dropdown > .btn, .k-board-head > a.btn { white-space: nowrap; flex: 0 0 auto; } .k-board-head > .dropdown { flex: 0 0 auto; } .k-board-head__title { font-size: 1.05rem; font-weight: 650; margin: 0; letter-spacing: -0.02em; } .k-board-wrap { overflow-x: auto; padding: 1rem; flex: 1 1 auto; } .k-board { display: flex; gap: 0.75rem; align-items: flex-start; min-height: calc(100vh - 190px); } /* ---------- Coluna ------------------------------------------------------ */ .k-col { flex: 0 0 296px; width: 296px; background: var(--k-surface-2); border: 1px solid var(--k-border); border-radius: var(--k-radius); display: flex; flex-direction: column; max-height: calc(100vh - 170px); } .k-col--restricted { border-color: color-mix(in srgb, var(--k-warn) 45%, var(--k-border)); background: color-mix(in srgb, var(--k-warn) 5%, var(--k-surface-2)); } .k-col__head { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.65rem 0.5rem; flex: 0 0 auto; } .k-col__grip { cursor: grab; color: var(--k-muted); opacity: 0.55; display: inline-flex; flex: 0 0 auto; } .k-col__grip:hover { opacity: 1; } .k-col__grip:active { cursor: grabbing; } .k-col__name { font-size: 0.8rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--k-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .k-col__count { font-size: 0.72rem; font-weight: 600; color: var(--k-muted); background: var(--k-surface); border: 1px solid var(--k-border); border-radius: 999px; padding: 0 0.4rem; flex: 0 0 auto; } .k-col__body { overflow-y: auto; padding: 0 0.5rem; flex: 1 1 auto; min-height: 12px; } .k-col__foot { padding: 0.5rem; flex: 0 0 auto; } .k-col__add { width: 100%; border: 1px dashed var(--k-border); background: transparent; color: var(--k-muted); border-radius: var(--k-radius-sm); padding: 0.4rem; font-size: 0.82rem; transition: background 0.15s, color 0.15s, border-color 0.15s; } .k-col__add:hover { background: var(--k-surface); color: var(--k-text); border-color: var(--k-accent); } /* Coluna vazia: alvo de soltura visível mesmo sem card. */ .k-col__empty { border: 1px dashed var(--k-border); border-radius: var(--k-radius-sm); color: var(--k-muted); font-size: 0.78rem; text-align: center; padding: 1.1rem 0.5rem; margin-bottom: 0.5rem; } /* ---------- Card na coluna ---------------------------------------------- */ .k-item { background: var(--k-surface); border: 1px solid var(--k-border); border-left: 3px solid transparent; border-radius: var(--k-radius-sm); padding: 0.55rem 0.65rem; margin-bottom: 0.5rem; cursor: pointer; box-shadow: var(--k-shadow); transition: border-color 0.15s, transform 0.08s, box-shadow 0.15s; } .k-item:hover { border-color: var(--k-accent); border-left-color: var(--k-accent); } .k-item:active { transform: scale(0.995); } .k-item--blocked { border-left-color: var(--k-warn); } .k-item--overdue { border-left-color: var(--k-danger); } .k-item__title { font-size: 0.855rem; font-weight: 550; line-height: 1.35; margin: 0 0 0.2rem; word-break: break-word; } .k-item__desc { font-size: 0.76rem; color: var(--k-muted); line-height: 1.4; margin: 0 0 0.4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .k-item__meta { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.35rem; } .k-item__icons { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--k-muted); font-size: 0.72rem; } .k-item__icons span { display: inline-flex; align-items: center; gap: 0.18rem; } /* Estados do arraste (SortableJS). */ .k-ghost { opacity: 0.35; } .k-chosen { box-shadow: var(--k-shadow-lg); } .k-drag { transform: rotate(1.5deg); } /* ---------- Modal do card ----------------------------------------------- */ .k-modal .modal-dialog { max-width: min(1240px, calc(100vw - 2rem)); margin: 1rem auto; } .k-modal .modal-content { height: calc(100vh - 2rem); } .k-modal__head { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--k-border); flex: 0 0 auto; } .k-modal__body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); /* A linha precisa de `minmax(0, 1fr)`: linha `auto` cresce com o conteúdo e estoura a altura fixa do .modal-content — a linha do tempo cheia empurrava o rodapé para fora da tela e o scroll de dentro nunca chegava a existir. */ grid-template-rows: minmax(0, 1fr); flex: 1 1 auto; min-height: 0; } @media (max-width: 992px) { .k-modal__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; } .k-modal .modal-content { height: auto; max-height: calc(100vh - 2rem); } } .k-modal__left { overflow-y: auto; padding: 1rem 1.1rem 1.5rem; min-width: 0; } .k-modal__right { border-left: 1px solid var(--k-border); background: var(--k-surface-2); display: flex; flex-direction: column; min-width: 0; min-height: 0; } @media (max-width: 992px) { .k-modal__right { border-left: 0; border-top: 1px solid var(--k-border); } } .k-modal__foot { border-top: 1px solid var(--k-border); padding: 0.6rem 1rem; display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; } .k-section { margin-bottom: 1.25rem; } .k-section__title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--k-muted); margin-bottom: 0.45rem; display: flex; align-items: center; gap: 0.4rem; } /* ---------- Linha do tempo ---------------------------------------------- */ .k-timeline { overflow-y: auto; flex: 1 1 auto; padding: 0.85rem 1rem; min-height: 0; } .k-timeline__filtros { display: flex; gap: 0.3rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--k-border); flex: 0 0 auto; } .k-filtro { border: 1px solid var(--k-border); background: var(--k-surface); color: var(--k-muted); border-radius: 999px; padding: 0.12rem 0.6rem; font-size: 0.75rem; font-weight: 550; } .k-filtro.is-active { background: var(--k-accent); border-color: var(--k-accent); color: var(--k-accent-text); } .k-tl-item { display: flex; gap: 0.55rem; padding: 0.3rem 0; } .k-tl-item--atividade { font-size: 0.78rem; color: var(--k-muted); align-items: baseline; } .k-tl-item--atividade strong { color: var(--k-text); font-weight: 600; } .k-tl-time { font-size: 0.7rem; color: var(--k-muted); flex: 0 0 auto; white-space: nowrap; } .k-tl-comment { background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius-sm); padding: 0.5rem 0.65rem; width: 100%; min-width: 0; } .k-tl-comment__body { font-size: 0.83rem; white-space: pre-wrap; word-break: break-word; margin: 0.2rem 0 0; } .k-tl-novo { border-top: 1px solid var(--k-border); padding: 0.7rem 1rem; background: var(--k-surface); flex: 0 0 auto; } /* ---------- Painel lateral do quadro ------------------------------------ */ .k-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); background: var(--k-surface); border-left: 1px solid var(--k-border); box-shadow: var(--k-shadow-lg); z-index: 1045; display: flex; flex-direction: column; } .k-panel__head { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--k-border); } .k-panel__tabs { display: flex; gap: 0.3rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--k-border); flex-wrap: wrap; } .k-panel__body { overflow-y: auto; padding: 0.9rem 1rem; flex: 1 1 auto; } .k-metric { background: var(--k-surface-2); border: 1px solid var(--k-border); border-radius: var(--k-radius-sm); padding: 0.5rem 0.6rem; } .k-metric__n { font-size: 1.25rem; font-weight: 700; line-height: 1.1; } .k-metric__l { font-size: 0.7rem; color: var(--k-muted); } /* ---------- Editor Quill ------------------------------------------------ */ .ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--k-border) !important; } .ql-toolbar.ql-snow { border-radius: var(--k-radius-sm) var(--k-radius-sm) 0 0; background: var(--k-surface-2); } .ql-container.ql-snow { border-radius: 0 0 var(--k-radius-sm) var(--k-radius-sm); background: var(--k-surface); font-family: inherit; font-size: 0.875rem; } .ql-editor { min-height: 160px; color: var(--k-text); } .ql-editor.ql-blank::before { color: var(--k-muted); font-style: normal; } .ql-editor img { max-width: 100%; height: auto; border-radius: 6px; } /* Ícones da barra do Quill no tema escuro. */ [data-bs-theme='dark'] .ql-snow .ql-stroke { stroke: var(--k-text); } [data-bs-theme='dark'] .ql-snow .ql-fill { fill: var(--k-text); } [data-bs-theme='dark'] .ql-snow .ql-picker { color: var(--k-text); } [data-bs-theme='dark'] .ql-snow .ql-picker-options { background: var(--k-surface); } /* Descrição já salva, renderizada fora do editor. */ .k-rich { font-size: 0.875rem; line-height: 1.55; word-break: break-word; } .k-rich img { max-width: 100%; height: auto; border-radius: 6px; margin: 0.4rem 0; } .k-rich p:last-child { margin-bottom: 0; } .k-rich blockquote { border-left: 3px solid var(--k-border); padding-left: 0.75rem; color: var(--k-muted); margin-left: 0; } .k-rich pre { background: var(--k-surface-2); border: 1px solid var(--k-border); border-radius: 6px; padding: 0.6rem; font-size: 0.8rem; overflow-x: auto; } /* ---------- Critério de aceite ------------------------------------------ */ .k-crit { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; margin-bottom: 0.3rem; border-radius: var(--k-radius-sm); background: var(--k-surface-2); border: 1px solid var(--k-border); } /* Critério obrigatório se distingue pela cor da caixa, não por um ícone. */ .k-crit--req { border-color: color-mix(in srgb, var(--k-warn) 45%, var(--k-border)); background: color-mix(in srgb, var(--k-warn) 7%, var(--k-surface-2)); } .k-crit__req { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; color: var(--k-muted); padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid var(--k-border); background: var(--k-surface); cursor: pointer; user-select: none; white-space: nowrap; } .k-crit__req .form-check-input { width: 0.85rem; height: 0.85rem; margin: 0; cursor: pointer; } .k-crit--req .k-crit__req { color: var(--k-warn); border-color: color-mix(in srgb, var(--k-warn) 55%, transparent); background: var(--k-warn-soft); } .k-crit--req .k-crit__req .form-check-input:checked { background-color: var(--k-warn); border-color: var(--k-warn); } /* Filtro de status do quadro, no cabeçalho. */ a.k-filtro { text-decoration: none; } a.k-filtro:hover { border-color: var(--k-accent); color: var(--k-text); } a.k-filtro.is-active:hover { color: var(--k-accent-text); } /* ---------- Barra de tamanho e alinhamento da imagem -------------------- */ .k-editor-wrap { position: relative; } .k-img-barra { position: absolute; z-index: 20; display: flex; gap: 0.35rem; padding: 0.25rem; background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius-sm); box-shadow: var(--k-shadow-lg); } .k-img-barra__grupo { display: inline-flex; gap: 0.15rem; padding-right: 0.35rem; border-right: 1px solid var(--k-border); } .k-img-barra__grupo:last-child { border-right: 0; padding-right: 0; } .k-img-barra button { border: 0; background: transparent; color: var(--k-muted); border-radius: 5px; padding: 0.1rem 0.4rem; font-size: 0.72rem; font-weight: 600; line-height: 1.6; } .k-img-barra button:hover { background: var(--k-surface-2); color: var(--k-text); } .k-img-barra button.is-active { background: var(--k-accent); color: var(--k-accent-text); } .ql-editor img { cursor: pointer; } .ql-editor img.k-img-selecionada { outline: 2px solid var(--k-accent); outline-offset: 2px; } /* A descrição salva respeita o alinhamento escolhido; o contêiner limpa o float. */ .k-rich::after { content: ''; display: block; clear: both; } /* ---------- Atalhos de login (só em DEBUG) ------------------------------ */ .k-atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.35rem; max-height: 260px; overflow-y: auto; } .k-atalho { display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.5rem; border: 1px solid var(--k-border); border-radius: var(--k-radius-sm); background: var(--k-surface); text-align: left; min-width: 0; transition: border-color 0.15s, background 0.15s; } .k-atalho:hover { border-color: var(--k-accent); background: var(--k-accent-soft); } .k-atalho__texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .k-atalho__nome { font-size: 0.78rem; font-weight: 600; color: var(--k-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .k-atalho__meta { font-size: 0.68rem; color: var(--k-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Painel de confirmação dentro do modal ----------------------- Não é um segundo Bootstrap Modal de propósito: modal empilhado sobre modal não funciona de forma confiável no Bootstrap 5 (abria e fechava na hora). ----------------------------------------------------------------------- */ .k-confirm { position: absolute; inset: 0; z-index: 15; display: grid; place-items: center; padding: 1rem; background: color-mix(in srgb, var(--k-bg) 72%, transparent); backdrop-filter: blur(2px); border-radius: var(--k-radius); animation: k-confirm-entra 0.15s ease-out; } @keyframes k-confirm-entra { from { opacity: 0; } to { opacity: 1; } } .k-confirm__caixa { width: min(420px, 100%); background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius); box-shadow: var(--k-shadow-lg); padding: 1rem 1.1rem; } /* Número ao lado de cada filtro de status; é trocado por swap fora de banda. */ .k-filtro__n { opacity: 0.75; font-variant-numeric: tabular-nums; }