/* ===================================================================== EMOSE Backoffice — caso.css Estilos EXCLUSIVOS do ecrã "Cockpit de Caso" (#/caso/:code, servido por caso.js). Ver o cabeçalho de styles.css (secção "OWNERSHIP / WHO USES WHAT") para a fronteira exacta: aquele ficheiro já define os tokens (secção 1), o reset/tipografia base (secção 2), os primitivos partilhados .card/.pill/.btn/.icon-btn/.state-panel/.spinner (secção 3) e — importante — o próprio padrão .pipeline/.station/.connector (secção 8), que caso.js REUTILIZA tal e qual (is-done/is-active/ is-pending/is-locked) para desenhar o progresso ao vivo de um caso. Este ficheiro NÃO redefine nada disso — só acrescenta as classes que só fazem sentido neste ecrã: cabeçalho do caso, grelha do cockpit, cartão de pedido de informação/aprovação, painel de contexto, recibos, entregáveis, a linha do tempo, e (NOVO) o painel "Detalhe do passo". FONTE: as regras abaixo são extraídas quase byte-a-byte de docs/design/emose-backoffice-cockpit.html (protótipo estático já aprovado) — mesmos tokens (--red-*, --cat-*, --success/--warning/ --error/--info, --text*, --surface*, --sunken, --border*, --hairline, --radius-*, --shadow-*), só sem repetir o que styles.css já define. Três pequenas diferenças deliberadas em relação ao protótipo, todas comentadas no sítio: (1) o formulário "Só falta isto" no protótipo tinha 2 campos de texto livre (local de estacionamento/quilometragem) que a tarefa não pediu — por isso os primitivos .field/.form-grid/ .input-suffix (só usados por esses 2 campos) não são portados aqui, para não ficar CSS morto; (2) ".tone-danger" e ".approval-card" são NOVOS (o protótipo estático só mostrava o caso WAITING_FOR_INFORMATION, nunca o de aprovação) — ver comentário na secção 5; (3) o painel "Detalhe do passo" (secção 10) também é NOVO e sem equivalente no protótipo — o mais próximo que existe é o ".blueprint-detail"/.bd-* de styles.css (usado por blueprints.js, ecrã irmão só-leitura), cujo par de tokens por tipo (info/action/decision/deliverable/event) esta secção espelha deliberadamente para as duas "etiquetas de tipo" da app se lerem como a MESMA linguagem visual — mas .step-detail-icon/ .step-type-pill são classes PRÓPRIAS (não .bd-icon/.bd-type), porque vivem dentro de um cartão inteiro da coluna lateral, não de uma barra sob o próprio pipeline como em blueprints.js. SECÇÕES 1. Cabeçalho do caso (case-header-card + category-chip + state-pill) 2. Grelha do cockpit (2 colunas) 3. Cartão genérico "card-head" (ícone + título, usado por 4 cartões) 4. Pedido de informação (formulário inline) 5. Aprovação da Direcção (NOVO — sem equivalente no protótipo) 6. Contexto / recibos / entregáveis (coluna lateral) 7. Linha do tempo 8. Link "← Fila" + notas inline (validação/erro) — NOVOS 9. Responsivo (só o que é específico deste ecrã — o resto já está em styles.css secção 9) 10. Detalhe do passo (NOVO) — estações do pipeline clicáveis (.station.is-selected + foco, âmbito ".cockpit-grid" para nunca tocar no ".is-defined" de blueprints.js) + o painel em si (.step-detail-*) que substitui a pilha por omissão da coluna lateral quando uma estação está seleccionada. ===================================================================== */ /* --------------------------------------------------------------------- 1. Cabeçalho do caso --------------------------------------------------------------------- */ .case-header-card{display:flex;flex-direction:column;gap:16px;} .case-header-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .case-id{font-size:26px;font-weight:700;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;color:var(--text);} .case-client{font-size:17px;font-weight:600;color:var(--text2);} /* --cat-current tem var(--cat-auto) como omissão (igual ao protótipo, que só desenhava Automóvel) — caso.js sobrepõe-a inline (style="--cat- current:var(--cat-health)" etc.) via categoryFor() quando o produto do caso tiver uma linha diferente. Todos os tokens de categoria já existem em styles.css (--cat-auto/health/home/life/travel/accident/savings); isto só os liga ao componente sem obrigar cada linha a ter a sua própria regra CSS. */ .category-chip{ --cat-current: var(--cat-auto); display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px; background:color-mix(in srgb, var(--cat-current) 13%, var(--surface)); font-weight:700;font-size:13.5px;color:var(--cat-current); } .category-chip .cat-icon{width:26px;height:26px;border-radius:50%;background:var(--cat-current);display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 26px;} .category-chip .cat-icon svg{width:15px;height:15px;} .state-pill-wrap{display:flex;flex-direction:column;gap:2px;margin-left:auto;align-items:flex-end;} .state-code{font-size:10px;font-weight:700;color:var(--text3);font-family:'SF Mono',ui-monospace,'Courier New',monospace;letter-spacing:.01em;} .case-header-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--hairline);} .meta-group{display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:var(--text2);font-size:13.5px;font-weight:600;} .meta-item{display:flex;align-items:center;gap:6px;} .meta-item svg{width:15px;height:15px;color:var(--text3);flex:0 0 15px;} .meta-item b{color:var(--text);font-weight:700;} .progress-meter{display:flex;align-items:center;gap:10px;flex:0 0 auto;} .progress-label{font-size:12.5px;font-weight:800;color:var(--text2);white-space:nowrap;} .progress-track{width:170px;height:6px;border-radius:999px;background:var(--sunken);overflow:hidden;} .progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg, var(--red-bright), var(--red-primary));} /* --------------------------------------------------------------------- 2. Grelha do cockpit — 62/38, colapsa para 1 coluna em ecrãs estreitos (ver secção 9). .pipeline-card/.station/.connector/... dentro de .col-main vêm de styles.css secção 8 (partilhado com blueprints.js). --------------------------------------------------------------------- */ .cockpit-grid{display:grid;grid-template-columns:62fr 38fr;gap:22px;align-items:start;min-width:0;} .col-main{display:flex;flex-direction:column;gap:22px;min-width:0;} .col-side{display:flex;flex-direction:column;gap:22px;min-width:0;} /* --------------------------------------------------------------------- 3. "card-head" genérico — ícone redondo + título, usado pelos cartões de contexto/recibos/entregáveis/timeline. Não existe em styles.css (que só tem .card cru) — específico deste ecrã. --------------------------------------------------------------------- */ .card-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;} .card-head-icon{width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;} .card-head-icon svg{width:18px;height:18px;} .card-head-icon.tone-info{background:var(--info);} .card-head-icon.tone-warning{background:var(--warning);} .card-head-icon.tone-success{background:var(--success);} .card-head-icon.tone-neutral{background:var(--cat-neutral);} /* tone-danger é NOVO (não existe em styles.css) — só o cartão de aprovação da Direcção o usa, para se ler mais urgente/bloqueador do que o tone-warning do pedido de informação normal. Candidato a subir para styles.css se outro ecrã vier a precisar do mesmo tom. */ .card-head-icon.tone-danger{background:var(--error);} /* --------------------------------------------------------------------- 4. Pedido de informação (formulário inline em "Só falta isto") --------------------------------------------------------------------- */ .info-request-card,.approval-card{display:flex;flex-direction:column;gap:20px;} .info-request-head{display:flex;align-items:flex-start;gap:13px;} .info-request-head .card-head-icon{margin-top:1px;} .info-request-head .headings{flex:1;min-width:0;} .info-request-copy{font-size:14px;color:var(--text2);line-height:1.55;margin-top:-6px;} .known-block .known-rows{display:flex;flex-direction:column;} .known-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--hairline);} .known-row:last-child{border-bottom:none;} .k-label{flex:0 0 150px;font-size:13px;color:var(--text3);font-weight:600;} .k-value{flex:1;font-size:14.5px;font-weight:600;color:var(--text);min-width:0;} .source-tag{flex:0 0 auto;font-size:10.5px;font-weight:800;color:var(--text3);background:var(--sunken);padding:3px 9px;border-radius:999px;white-space:nowrap;} .gap-block{display:flex;flex-direction:column;gap:18px;} .field-label{font-size:12.5px;font-weight:700;color:var(--text2);} .field-label em{color:var(--text3);font-style:normal;font-weight:600;} .choice-block{display:flex;flex-direction:column;gap:10px;} .chip-group{display:flex;gap:8px;flex-wrap:wrap;} .chip-group input[type="radio"]{position:absolute;opacity:0;width:0;height:0;} .chip-group label{display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;border:1.5px solid var(--border);font-size:13.5px;font-weight:700;color:var(--text2);cursor:pointer;transition:all .15s;} .chip-group label:hover{border-color:var(--border-strong);} .chip-group input[type="radio"]:checked + label{background:linear-gradient(135deg, var(--red-bright), var(--red-deep));border-color:transparent;color:#fff;} .chip-group input[type="radio"]:focus-visible + label{outline:2px solid var(--red-primary);outline-offset:2px;} .checkbox-group{display:flex;gap:18px;flex-wrap:wrap;} .checkbox-row{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;} .checkbox-row input[type="checkbox"]{width:18px;height:18px;accent-color:var(--red-primary);cursor:pointer;} /* --------------------------------------------------------------------- 5. Aprovação da Direcção — NOVO, sem equivalente no protótipo estático (esse só desenhava o caso WAITING_FOR_INFORMATION). Reutiliza as classes .info-request-head/.info-request-copy/.known-block/.known-row da secção 4 acima — só ".approval-card" (já incluída na regra de layout no topo da secção 4) e ".tone-danger" (secção 3) são acrescentos reais. --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- 6. Contexto / recibos / entregáveis (coluna lateral) --------------------------------------------------------------------- */ .context-rows{display:flex;flex-direction:column;} .context-row{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid var(--hairline);} .context-row:last-child{border-bottom:none;} .c-label{font-size:13px;color:var(--text3);font-weight:600;flex:0 0 auto;} .c-value-wrap{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0;} .c-value{font-size:14.5px;font-weight:700;color:var(--text);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .c-value.is-amount{color:var(--red-deep);} .receipt-list{display:flex;flex-direction:column;gap:16px;} .receipt{display:flex;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--hairline);} .receipt:last-child{border-bottom:none;padding-bottom:0;} .receipt-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--sunken);color:var(--text2);} .receipt-icon svg{width:16px;height:16px;} .receipt.is-executed .receipt-icon{background:var(--success-surf);color:var(--success);} .receipt.is-degraded .receipt-icon{background:var(--warning-surf);color:var(--warning);} .receipt-body{flex:1;min-width:0;} .receipt-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;} .receipt-name{font-size:13.5px;font-weight:700;color:var(--text);} .receipt-meta{font-size:12px;color:var(--text2);margin-top:4px;} .receipt-meta.muted{color:var(--text3);} .receipt-meta code{font-family:'SF Mono',ui-monospace,'Courier New',monospace;background:var(--sunken);padding:1px 6px;border-radius:6px;font-size:11px;color:var(--text2);} .receipt-actions{margin-top:10px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;} .deliverable-list{display:flex;flex-direction:column;gap:12px;} .deliverable{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;border:1px solid var(--hairline);} .deliverable.is-ready{background:var(--success-surf);border-color:transparent;} [data-theme="dark"] .deliverable.is-ready{background:color-mix(in srgb, var(--success) 16%, var(--surface));} .deliverable.is-pending{background:var(--sunken);} .deliverable-icon{width:36px;height:36px;flex:0 0 36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--success);box-shadow:var(--shadow-sm);} .deliverable.is-pending .deliverable-icon{color:var(--text3);box-shadow:none;} .deliverable-icon svg{width:17px;height:17px;} .deliverable-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;} .deliverable-name{font-size:13.5px;font-weight:700;color:var(--text);} .deliverable-meta{font-size:11.5px;color:var(--text2);} .deliverable.is-pending .deliverable-name{color:var(--text2);} .deliverable.is-pending .deliverable-meta{color:var(--text3);} .deliverable .icon-btn{width:34px;height:34px;flex:0 0 34px;background:var(--surface);} /* --------------------------------------------------------------------- 7. Linha do tempo --------------------------------------------------------------------- */ .timeline-card .card-head{margin-bottom:6px;} .timeline{display:flex;flex-direction:column;margin-top:8px;} .tl-item{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--hairline);} .tl-item:last-child{border-bottom:none;} .tl-time{flex:0 0 52px;font-size:12px;font-weight:700;color:var(--text3);font-variant-numeric:tabular-nums;} .tl-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;} .tl-dot.field{background:var(--info);} .tl-dot.action{background:var(--red-primary);} .tl-dot.deliverable{background:var(--success);} .tl-dot.decision{background:var(--warning);} .tl-text{flex:1;min-width:0;font-size:13.5px;color:var(--text2);} .tl-text b{color:var(--text);font-weight:700;} .tl-text .source-tag{margin-left:6px;} /* --------------------------------------------------------------------- 8. Link "← Fila" + notas inline de validação/erro — NOVOS (sem equivalente no protótipo estático, que não tinha estados de carregamento/erro por ser HTML estático). --------------------------------------------------------------------- */ .back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--text2);align-self:flex-start;} .back-link:hover{color:var(--red-deep);} .inline-note{font-size:12.5px;font-weight:700;color:var(--error);margin:0;} /* --------------------------------------------------------------------- 9. Responsivo — só .cockpit-grid (o resto — rail/topbar/etc. — já está em styles.css secção 9, incl. o aviso explícito de que regras deste ecrã pertencem aqui, não lá). --------------------------------------------------------------------- */ @media (max-width:1080px){ .cockpit-grid{grid-template-columns:1fr;} } /* --------------------------------------------------------------------- 10. Detalhe do passo (NOVO) — ver cabeçalho do ficheiro e caso.js secção 3.x. Duas partes: 10a. Estações clicáveis — extensão de .station/.pipeline (styles.css secção 8, partilhado com blueprints.js) só para ESTE ecrã. Âmbito sob ".cockpit-grid" (classe que só existe aqui, nunca em blueprints.js) para nenhuma regra poder alguma vez aplicar-se às estações do ecrã Blueprints — não precisa de saber nada sobre ".is-defined"/".is-selected" de lá, e vice-versa. 10b. O cartão .step-detail-card em si — a coluna lateral inteira quando uma estação está seleccionada. --------------------------------------------------------------------- */ /* --- 10a. Estações clicáveis -------------------------------------- */ .cockpit-grid .station{cursor:pointer;} .cockpit-grid .station:hover{background:var(--sunken);} /* .is-active já tem o seu próprio fundo (--red-pale claro / --selected escuro, styles.css) — hover não deve apagá-lo, só mantê-lo. */ .cockpit-grid .station.is-active:hover{background:var(--red-pale);} [data-theme="dark"] .cockpit-grid .station.is-active:hover{background:var(--selected);} .cockpit-grid .station:focus{outline:none;} /* Mesmo padrão exacto de foco que blueprints.js já usa em ".station.is-defined:focus-visible" (styles.css) — só o teclado (Tab) mostra o anel, nunca um clique de rato. */ .cockpit-grid .station:focus-visible{outline:2px solid var(--red-primary);outline-offset:2px;} /* Por cima de is-done/is-active/is-pending (nenhum dos quais define box-shadow ao nível da estação, excepto is-active — a maior especificidade dos 3 selectores abaixo, +1 classe, garante que ESTA regra ganha mesmo contra .is-active). Fundo --selected (light+dark já definidos no token, sem precisar de override [data-theme="dark"] próprio) + anel --red-primary para se ler inequivocamente como "seleccionado", distinto do simples "é o passo actual".*/ .cockpit-grid .station.is-selected{background:var(--selected);box-shadow:0 0 0 2px var(--red-primary);} /* --- 10b. O cartão de detalhe --------------------------------------- */ .step-detail-card{display:flex;flex-direction:column;gap:18px;} /* Botão "← Voltar ao resumo" — reusa a classe .back-link (secção 8) tal e qual para ler-se como a MESMA affordance do "← Fila" do topo da página, só que aqui um