/* Destaque rápido pro card recém-criado: pulsa 1× e some. */ @keyframes pulse-once { 0% { background-color: #fef3c7; box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6); } 50% { background-color: #fffbeb; box-shadow: 0 0 0 6px rgba(251, 191, 36, 0); } 100% { background-color: #ffffff; box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); } } .animate-pulse-once { animation: pulse-once 1.4s ease-out 1; } /* HTMX indicator pattern: só visível enquanto request rola. */ .htmx-indicator { opacity: 0; transition: opacity 200ms ease; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } /* line-clamp-2 sem plugin (Tailwind CDN não traz @tailwindcss/line-clamp). */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Modo compacto global (classe em via script inline no head). :not(.card-individual-expand) permite que um card seja forçadamente expandido individualmente mesmo quando o global está compacto. */ html.compact-cards article:not(.card-individual-expand) .card-body { display: none; } html.compact-cards article:not(.card-individual-expand) { padding: 0.375rem 0.5rem; } html.compact-cards article:not(.card-individual-expand) h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Override individual: força colapso mesmo quando global está expandido. */ article.card-individual-collapse .card-body { display: none; } article.card-individual-collapse { padding: 0.375rem 0.5rem; } article.card-individual-collapse h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Caret ▾ quando body visível, ▸ quando escondido. */ .caret-right { display: none; } html.compact-cards article:not(.card-individual-expand) .caret-down { display: none; } html.compact-cards article:not(.card-individual-expand) .caret-right { display: inline; } article.card-individual-collapse .caret-down { display: none; } article.card-individual-collapse .caret-right { display: inline; } /* No modo global compacto, se card foi forçado a expandir, mostra ▾ de novo. */ html.compact-cards article.card-individual-expand .caret-down { display: inline; } html.compact-cards article.card-individual-expand .caret-right { display: none; } /* Botão global toggle: label muda com estado. */ .show-when-compact { display: none; } html.compact-cards .show-when-compact { display: inline; } html.compact-cards .show-when-expanded { display: none; } /* Container do kanban em modo "free position": cada coluna é absolute e o user posiciona livremente arrastando o header. Default em grid inicial, depois posições ficam em localStorage. */ #kanban-columns.kanban-free { position: relative; min-height: 85vh; } #kanban-columns.kanban-free > .kanban-column { position: absolute; } /* Colunas do kanban redimensionáveis (largura + altura) pelo handle nativo no canto inferior-direito. Largura e altura salvas em localStorage. */ .kanban-column { resize: both; overflow: auto; min-width: 220px; max-width: 700px; min-height: 200px; max-height: 80vh; } /* Handle de drag pra reordenar colunas: cursor-grab no header da coluna. */ .column-handle { cursor: grab; } .column-handle:active { cursor: grabbing; } /* Widgets flutuantes: position fixed + drag pelo handle. */ .floating-widget { user-select: none; } .floating-widget.dragging { opacity: 0.85; cursor: grabbing; } /* Handle ganha cursor "move" só quando floating (não pinned). */ .floating-widget:not(.pinned) #pomodoro-handle { cursor: move; } /* Pin como bolinha estilizada: vazia/outline quando floating, sólida com halo azul quando pinada. Transição suave entre estados. */ .pomo-pin-dot { display: inline-block; width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 2px solid #d1d5db; background: transparent; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .pomo-pin-dot:hover { border-color: #6b7280; } .floating-widget.pinned .pomo-pin-dot { background: #3b82f6; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); } .floating-widget.pinned .pomo-pin-dot:hover { background: #2563eb; border-color: #2563eb; } /* Pulse leve no card original quando tem shadow ativo na Doing. */ @keyframes ring-pulse-anim { 0%, 100% { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.6); } 50% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3); } } .ring-pulse { animation: ring-pulse-anim 2s ease-in-out infinite; }