/* =====================================================
PAPILLON MONTRAS · Portal CSS (Fase 1)
Estilos dentro do portal SPA. Carregado via
`cha_portal_assets_head` directamente no do
template-shell.php do Challenge plugin.
Padrão visual: espelha .pmc-subnav / .pmc-subview do
Media Center, mas com acento terracota (montras).
Estados dos pedidos, brand tags PM/BOW, etc. vivem
abaixo como tokens — serão usados em Fase 2+.
===================================================== */
/* ── Tokens fallback (caso tema < 0.3.4) ── */
.cha-portal {
/* v0.24.0 — Cor Montras dessaturada para alinhar com a família HUB.
#A35846 (oklch ~0.51, 0.09, 33°) entra na faixa dos outros 4 acentos
(L≈0.50-0.55, C≈0.07-0.09) em vez de #9A3D2A "barro" (L≈0.43, C≈0.13). */
--ph-accent-montras: #A35846;
--ph-tint-montras: rgba(163, 88, 70, 0.12);
/* Fallbacks alinhados com papillon-hub v0.3.4 (v0.10.1):
se o tema falhar a carregar tokens.css, estes garantem
que o plugin continua com a paleta canónica. */
--ph-line-strong: rgba(17, 40, 51, 0.18);
--ph-paper-tint: #F2EFE9;
--ph-gold-deep: #917143;
--ph-ink-faint: #6B7E8A;
/* v0.24.0 — Estados harmonizados com paleta HUB (Prompt 01 Tarefa C).
Cada estado tem cor + tint correspondente. Os tints são versões
mais claras (~12-15% alpha sobre paper). */
--mon-state-submetido: #4d5d68; /* neutral ink-faint */
--mon-state-design: var(--ph-accent-montras); /* "casa" Montras */
--mon-state-aprovacao: #C97B3F; /* status-pendente · âmbar */
--mon-state-orcamento: #3F8DAB; /* status-validado · teal claro */
--mon-state-ceo: var(--ph-gold-deep, #917143); /* gold deep */
--mon-state-producao: #756F9B; /* campanhas · lavanda */
--mon-state-envio: #166A8E; /* media · teal escuro */
--mon-state-instalado: #4A8E5E; /* status-pago · verde */
--mon-state-recusado: #8a2f2f; /* erro · mantém */
/* Tints — alpha das cores acima (12-15% sobre paper) */
--mon-state-submetido-tint: rgba(107, 126, 138, 0.12);
--mon-state-design-tint: rgba(163, 88, 70, 0.12);
--mon-state-aprovacao-tint: rgba(201, 123, 63, 0.14);
--mon-state-orcamento-tint: rgba(63, 141, 171, 0.12);
--mon-state-ceo-tint: rgba(145, 113, 67, 0.15);
--mon-state-producao-tint: rgba(117, 111, 155, 0.14);
--mon-state-envio-tint: rgba(22, 106, 142, 0.12);
--mon-state-instalado-tint: rgba(74, 142, 94, 0.14);
--mon-state-recusado-tint: #f1d8d8;
/* v0.24.0 — PM tag agora usa tint terracota nova (#F2E6DF visual ≈ rgba 12%) */
--mon-tag-pm-bg: #F2E6DF;
--mon-tag-pm-fg: var(--ph-accent-montras);
--mon-tag-bow-bg: #dde1ec;
--mon-tag-bow-fg: #1e2a4a;
/* v0.69.0 · Prompt 43A — design handoff tokens (Fase A · 5 modais).
Paleta dedicada para emails/landings/modais — distinta da paleta do
portal (cha-portal continua sobre paper). Não substitui --ph-*; vive
ao lado para superfícies que sigam o novo design system Montras. */
--mon-h-navy: #15242e;
--mon-h-navy-2: #1d3340;
--mon-h-ink: #1c2a32;
--mon-h-muted: #5f6e74;
--mon-h-muted-2: #8a949a;
--mon-h-sand: #ebe6da;
--mon-h-sand-2: #e4ddcd;
--mon-h-cream: #fcfaf5;
--mon-h-cream-2: #f3eee3;
--mon-h-line: #e3dbc9;
--mon-h-gold: #b0863c;
--mon-h-gold-2: #a07634;
--mon-h-gold-soft: #c9a978;
--mon-h-green: #3f7a52;
--mon-h-green-2: #356646;
--mon-h-red: #8e2d2d;
--mon-h-red-2: #7a2727;
--mon-h-red-soft: rgba(142, 45, 45, 0.10);
}
/* =====================================================
v0.24.0 · Prompt 01 — Eyebrows / Labels uniformes
===================================================== */
/* Estilo canónico dos eyebrows (labels uppercase pequenas).
Aplica-se a todas as classes-padrão sem ter de reescrever
cada selector individual. Cada classe-padrão pode override
font-size / letter-spacing se precisar de ajuste fino. */
.cha-portal .mon-pheader__crumbs,
.cha-portal .mon-kpi__lbl,
.cha-portal .mon-kpi__blabel,
.cha-portal .mon-tab,
.cha-portal .mon-quote-amount__lbl,
.cha-portal .mon-waiting,
.cha-portal .mon-reminder,
.cha-portal .mon-supplier__status,
.cha-portal .mon-supplier__stat-l,
.cha-portal .mon-quinzena__badge,
.cha-portal .mon-act-time,
.cha-portal .mon-approval-card__by-l,
.cha-portal .mon-approval-card__waiting,
.cha-portal .mon-approval-card__reminder,
.cha-portal .mon-brand-card__tagline,
.cha-portal .mon-total-area-card__label,
.cha-portal .mon-wref-card__meta,
/* v0.67.9 · Prompt 38 — .mon-qopt__badge REMOVIDO desta lista de
eyebrows. Tem background colorido próprio (verde "confortável" /
amber "tempo limitado") com texto paper definido em :4342/:4343.
Pertencer aqui forçava color: gold-deep que tornava o texto ilegível
(dourado escuro sobre verde ou amber ≈ 1.5:1 contrast · falha WCAG AA). */
.cha-portal .mon-resumo-main-card__title,
.cha-portal .mon-resumo-card__title,
.cha-portal .mon-form-stack__label,
.cha-portal .mon-meus-card__meta,
.cha-portal .mon-meus-card__overdue-badge,
.cha-portal .mon-atelier-supers th,
.cha-portal .mon-detail-orc__forn,
.cha-portal .mon-detail-section__title,
.cha-portal .mon-detail-info__label,
.cha-portal .mon-detail-orc__state,
.cha-portal .mon-ref-ac__tag,
.cha-portal .mon-rel-filters__lbl,
.cha-portal .mon-period-badge,
.cha-portal .mon-placeholder__eyebrow,
.cha-portal .mon-pheader__sub--eyebrow {
color: var(--ph-gold-deep, #917143);
font-weight: 700;
letter-spacing: 0.22em;
}
/* v0.53.0 · Prompt 13D — `.mon-portal-wrap` é o primeiro container
Montras dentro de `#cha-view-montras`. Tem `margin-top: -16px` para
anular o `+16px` de respiro do `.cha-main` padding-top (calc(topbar-h
+ 16)). Antes (até v0.52) o negative margin estava na `.mon-subnav`
mas em mobile o `overflow-x: hidden` no `.mon-portal-wrap` (v0.43
defesa anti-overflow) criava um BFC que bloqueava o margin collapse
entre a subnav e os ancestrais — daí o gap visível inicial no mobile.
Aplicar o negative margin AQUI no wrap resolve a raiz: o wrap sobe
16px dentro de `.cha-main` directamente, sem depender de margin
collapse. Funciona em desktop e mobile. Scoped a Montras (a regra
só aplica a `.mon-portal-wrap` que é Montras-only). */
.cha-portal .mon-portal-wrap {
margin-top: -16px;
}
/* ── Sub-nav (espelha .pmc-subnav exactamente, swap accent) ──
v0.50.0 · Prompt 13 — restaurado padrão pmc-subnav puro.
v0.53.0 · Prompt 13D — `margin-top: -16px` movido para o
`.mon-portal-wrap` (acima neste ficheiro) para escapar ao BFC
do overflow-x:hidden em mobile.
v0.57.0 · Prompt 14 — z-index baixado de 101 para 99: pmc-subnav
usa 101 para tapar shadow do topbar (Media Center) mas no Montras
o subnav sobrepunha-se ao topbar (z=100) ao scrollar em desktop. */
.mon-subnav {
position: sticky;
top: var(--portal-topbar-h);
/* v0.57.0 · Prompt 14 — baixado de 101 para 99. Antes a sub-nav
sobrepunha-se ao topbar (z=100) ao scrollar. O pmc-subnav usa 101
porque precisa de tapar o box-shadow do topbar; aqui o topbar do
Challenge tem shadow ténue que não justifica passar por cima. */
z-index: 99;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: calc((50vw - 50%) + 28px);
padding-right: calc((50vw - 50%) + 28px);
background: var(--ph-paper-tint);
border-bottom: 1px solid var(--ph-line);
display: flex;
align-items: stretch;
height: 46px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.mon-subnav::-webkit-scrollbar { display: none; }
.mon-subnav-item {
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ph-ink-muted);
padding: 0 18px;
border: 0;
background: transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
white-space: nowrap;
transition: color 0.18s var(--ph-ease);
}
.mon-subnav-item:hover { color: var(--ph-ink); }
.mon-subnav-item.active { color: var(--ph-accent-montras); }
.mon-subnav-item.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 18px;
right: 18px;
height: 2px;
background: var(--ph-accent-montras);
}
/* v0.40.0 · Prompt 10C item 1 — icons inline antes do label de cada
subnav primária (atelier, biblioteca, gestão, definições, etc.).
Herda cor de currentColor; opacity sobe quando o item fica active. */
.cha-portal .mon-subnav-item__icon {
width: 16px;
height: 16px;
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
opacity: 0.7;
transition: opacity 0.18s var(--ph-ease);
}
.cha-portal .mon-subnav-item.active .mon-subnav-item__icon { opacity: 1; }
.cha-portal .mon-subnav-item:hover .mon-subnav-item__icon { opacity: 1; }
/* ── Sub-view containers ── */
.mon-subview {
padding: 28px 0;
}
/* ── Page header (espelha .pmc-page-header) ── */
.mon-page-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 24px 0 18px;
border-bottom: 1px solid var(--ph-line);
margin-bottom: 24px;
gap: 16px;
flex-wrap: wrap;
}
.mon-page-eyebrow {
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ph-accent-montras);
margin-bottom: 4px;
}
.mon-page-title {
font-family: var(--ph-serif);
font-size: 28px;
font-weight: 400;
color: var(--ph-ink);
line-height: 1.15;
}
/* ── Placeholder card (Fase 1) ── */
.mon-placeholder {
max-width: 640px;
margin: 48px auto;
padding: 40px 32px;
background: var(--ph-white);
border: 1px solid var(--ph-line);
border-radius: var(--ph-radius-lg, 14px);
box-shadow: var(--ph-shadow-card);
text-align: center;
}
.mon-placeholder__eyebrow {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ph-accent-montras);
margin-bottom: 12px;
}
.mon-placeholder__title {
font-family: var(--ph-serif);
font-weight: 400;
font-size: 28px;
line-height: 1.15;
color: var(--ph-ink);
margin: 0 0 14px;
}
.mon-placeholder__lead {
font-size: 14px;
line-height: 1.6;
color: var(--ph-ink-soft);
margin: 0 auto;
max-width: 480px;
}
.mon-placeholder__meta {
margin-top: 28px;
padding-top: 18px;
border-top: 1px solid var(--ph-line);
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ph-ink-muted);
}
@media (max-width: 767px) {
.mon-placeholder {
margin: 24px 16px;
padding: 28px 20px;
}
.mon-placeholder__title {
font-size: 24px;
}
.mon-page-title {
font-size: 22px;
}
}
/* =====================================================
ATELIER (v0.3.0)
===================================================== */
/* ── Nav 3º nível (Painel/Pedidos/Aprovações/Orçamentos/Calendário) ──
v0.50.0 · Prompt 13 — alinhada ao padrão pmc-subnav.
v0.52.0 · Prompt 13C — atelier-subnav é agora sibling do
`.mon-subview` (não child), movida via JS no renderAtelier.
Aplicado o padrão full-bleed da `.mon-subnav` para coerência
visual (fundo branco de borda a borda do viewport, mesmo padding
lateral que a primária). Removido o margin-top:-28px / margin-
bottom:28px do v0.51 — desnecessários porque já não há padding
do parent para neutralizar. */
.mon-atelier-subnav {
background: var(--ph-white);
border-bottom: 1px solid var(--ph-line);
display: flex;
gap: 0;
align-items: stretch;
margin-top: 0;
margin-bottom: 0;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: calc((50vw - 50%) + 28px);
padding-right: calc((50vw - 50%) + 28px);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
position: sticky;
top: calc(var(--portal-topbar-h) + 46px);
/* v0.57.0 · Prompt 14 — baixado de 100 para 98. Abaixo da primária
(z=99 após v0.57) e abaixo do topbar (z=100). Mantém ordem
correcta no sticky stack. */
z-index: 98;
}
.mon-atelier-subnav::-webkit-scrollbar { display: none; }
/* v0.55.0 · Prompt 13F — Biblioteca/Gestão/Definições também geram
sub-navs secundárias com a mesma classe `.mon-atelier-subnav`, mas
essas vivem DENTRO dos seus subviews (não foram movidas para fora
via JS como a do Atelier no v0.52). O `.mon-subview` parent tem
`padding-top: 28px` que cria 28px de gap entre a sub-nav primária
e a secundária. Fix: para QUALQUER `.mon-atelier-subnav` que seja
primeiro filho de um `.mon-subview`, anular o padding-top do parent
via margin-top: -28px (e repor o espaço com margin-bottom: 28px).
O selector `:first-child` é safe porque a sub-nav vem sempre antes
do conteúdo nos subviews afectados. Não afecta a instância do
Atelier (essa é sibling do `.mon-subview` desde v0.52, não child). */
.cha-portal .mon-subview > .mon-atelier-subnav:first-child {
margin-top: -28px;
margin-bottom: 28px;
}
.mon-atelier-subnav-item {
padding: 12px 14px;
font-family: var(--ph-sans);
font-size: 12.5px;
color: var(--ph-ink-soft);
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
transition: color 0.18s var(--ph-ease);
}
.mon-atelier-subnav-item:hover { color: var(--ph-ink); }
.mon-atelier-subnav-item.active {
color: var(--ph-ink);
border-bottom-color: var(--ph-ink);
font-weight: 500;
}
.mon-atelier-subnav-item .mon-badge-mini {
background: var(--ph-accent-montras);
color: var(--ph-white);
font-size: 9px;
font-family: var(--ph-sans);
padding: 1px 6px;
border-radius: 20px;
letter-spacing: 0.05em;
font-weight: 500;
}
/* ── Page header (Painel + Pedidos) ── */
.mon-pheader {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
}
.mon-pheader__crumbs {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ph-ink-muted);
margin-bottom: 8px;
}
.mon-pheader__title {
font-family: var(--ph-serif);
font-weight: 400;
font-size: 34px;
letter-spacing: -0.02em;
line-height: 1;
margin: 0;
}
.mon-pheader__sub {
color: var(--ph-ink-soft);
font-size: 14px;
margin-top: 6px;
max-width: 540px;
line-height: 1.5;
}
/* v0.33.0 · Prompt 08B item 9 — modifier --wide para a sub das Aprovações
(texto longo "2 pedidos · Lembretes... · Quando aprovado..."). Remove o
constraint de 540px para caber numa só linha em larguras desktop. */
.mon-pheader__sub--wide {
max-width: none;
}
/* Ícone inline em botões (.mon-btn) — usado em "↻ Reenviar todos os lembretes" */
.cha-portal .mon-btn__ic {
display: inline-block;
margin-right: 2px;
font-weight: 700;
}
.mon-pheader__actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
/* ── Buttons ── */
.mon-btn {
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
border: 1px solid transparent;
cursor: pointer;
font-family: var(--ph-sans);
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 0.18s var(--ph-ease), border-color 0.18s var(--ph-ease);
}
.mon-btn--primary { background: var(--ph-ink); color: var(--ph-paper); }
.mon-btn--primary:hover { background: var(--ph-ink-soft); }
.mon-btn--ghost { background: transparent; border-color: var(--ph-line); color: var(--ph-ink); }
.mon-btn--ghost:hover { border-color: var(--ph-line-strong, rgba(17,40,51,0.18)); }
.mon-btn--accent { background: var(--ph-accent-montras); color: var(--ph-white); border-color: var(--ph-accent-montras); }
/* ── Alert banner (Painel) ── */
.mon-alert {
background: linear-gradient(90deg, #fff1e0 0%, #fbeacd 100%);
border: 1px solid #f0d4a8;
border-radius: 10px;
padding: 14px 18px;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 14px;
}
.mon-alert__icon {
width: 32px; height: 32px;
background: var(--ph-accent-challenge, #B8854A);
color: var(--ph-white);
border-radius: 50%;
display: grid; place-items: center;
font-family: var(--ph-serif);
font-size: 16px;
font-weight: 500;
flex-shrink: 0;
}
.mon-alert__body { flex: 1; min-width: 0; }
.mon-alert__title { font-size: 13.5px; font-weight: 500; color: var(--ph-ink); }
.mon-alert__sub { font-size: 12px; color: var(--ph-ink-soft); margin-top: 2px; }
.mon-alert__actions { display: flex; gap: 6px; flex-shrink: 0; }
.mon-alert__btn {
padding: 6px 12px;
border-radius: 5px;
font-size: 11.5px;
font-weight: 500;
cursor: pointer;
font-family: var(--ph-sans);
border: 1px solid transparent;
}
.mon-alert__btn--ghost { background: var(--ph-paper); border-color: var(--ph-line); color: var(--ph-ink-soft); }
.mon-alert__btn--primary { background: var(--ph-ink); color: var(--ph-paper); }
/* ── KPI row (Painel) ── */
/* v0.34.0 · Prompt 08C item 2 — background var(--ph-white) explícito (era
--ph-paper / off-white). As KPIs sem highlight ficam visualmente brancas
sobre a página warm; só .mon-kpi--highlight mantém o tint terracota. */
.mon-kpi-row {
display: grid;
grid-template-columns: 2.4fr 1fr 1fr 1fr;
gap: 0;
border: 1px solid var(--ph-line);
border-radius: 10px;
overflow: hidden;
margin-bottom: 28px;
background: var(--ph-white);
}
.mon-kpi {
padding: 22px 24px;
border-right: 1px solid var(--ph-line);
}
.mon-kpi:last-child { border-right: none; }
.mon-kpi__lbl {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ph-gold-deep);
font-weight: 600;
margin-bottom: 12px;
}
.mon-kpi__val {
font-family: var(--ph-serif);
font-weight: 400;
font-size: 36px;
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 8px;
}
.mon-kpi__val .cur { font-size: 18px; color: var(--ph-ink-muted); } /* v0.71.32 · #8 — € depois do nº (NBSP no JS) */
.mon-kpi__delta { font-size: 11.5px; color: var(--ph-ink-muted); }
.mon-kpi__delta .up { color: var(--mon-state-instalado); font-weight: 500; }
.mon-kpi__delta .down { color: var(--mon-state-recusado); font-weight: 500; }
/* v0.33.0 · Prompt 08B item 2 — destaque âmbar para "N há +48h" no delta
da KPI Aguardam aprovação (chama o olho para a única métrica que pede
atenção; o resto da linha mantém ink-faint). */
.mon-kpi__delta--amber {
color: #806316;
font-weight: 700;
}
.mon-kpi--highlight {
background: linear-gradient(135deg, #F7EBE3 0%, #F2E6DF 100%);
}
.mon-kpi--highlight .mon-kpi__val { color: var(--ph-accent-montras); }
.mon-kpi__spend {
display: grid;
grid-template-columns: auto 1fr;
gap: 24px;
align-items: center;
}
.mon-kpi__breakdown { padding-left: 24px; border-left: 1px solid var(--ph-line); }
.mon-kpi__brow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mon-kpi__brow:last-child { margin-bottom: 0; }
.mon-kpi__bswatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mon-kpi__blabel {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ph-ink-soft);
width: 86px;
}
.mon-kpi__bbar { flex: 1; height: 4px; background: var(--ph-paper-tint); border-radius: 2px; overflow: hidden; }
.mon-kpi__bfill { height: 100%; }
/* v0.42.0 · Prompt 11B item 2 — white-space:nowrap impede que o valor
"320 €" quebre entre número e símbolo monetário em containers estreitos. */
.mon-kpi__bval { font-family: var(--ph-serif); font-size: 15px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
/* ── Content grid (Painel) ── */
.mon-content-grid {
display: grid;
grid-template-columns: 1.7fr 1fr;
gap: 24px;
margin-bottom: 28px;
}
/* ── Card base (Painel + Pedidos) ── */
/* v0.37.0 · Prompt 09C item 7 — background branco explícito (era
--ph-paper que é off-white #FAFAF7). Branco puro alinha com o resto
das cards do HUB e dá melhor contraste sobre o page background. */
.mon-card {
background: var(--ph-white, #FFFFFF);
border: 1px solid var(--ph-line);
border-radius: 10px;
overflow: hidden;
}
.mon-card + .mon-card { margin-top: 20px; }
.mon-card__head {
padding: 16px 22px;
border-bottom: 1px solid var(--ph-line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.mon-card__head h3 {
font-family: var(--ph-serif);
font-weight: 400;
font-size: 17px;
letter-spacing: -0.01em;
margin: 0;
}
.mon-card__tabs { display: flex; gap: 2px; }
/* v0.34.0 · Prompt 08C item 3 — count-note: texto simples no head da card
(substitui o badge ink-filled que parecia botão). Usado em "A aguardar
aprovação · 2 pedidos". */
.cha-portal .mon-card__count-note {
font-family: var(--ph-sans);
font-size: 13px;
color: var(--ph-ink);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.mon-tab {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ph-ink-muted);
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
background: transparent;
border: 0;
}
.mon-tab.active { background: var(--ph-ink); color: var(--ph-paper); }
.mon-card__empty {
padding: 28px 22px;
text-align: center;
font-size: 13px;
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
}
/* ── Quote card (Painel · Orçamentos à tua aprovação) ── */
.mon-quote-card {
background: linear-gradient(135deg, #efe5f5 0%, #e3d4ec 100%);
border-left: 3px solid var(--mon-state-orcamento);
}
.mon-quote-card .mon-card__head {
background: transparent;
border-bottom-color: rgba(90, 61, 122, 0.15);
}
.mon-quote-row {
padding: 14px 22px;
border-bottom: 1px dashed rgba(90, 61, 122, 0.15);
display: flex;
align-items: center;
gap: 14px;
}
.mon-quote-row:last-child { border-bottom: none; }
.mon-quote-thumb {
width: 40px; height: 40px;
border-radius: 6px;
background: var(--mon-state-orcamento);
color: var(--ph-white);
display: grid; place-items: center;
font-family: var(--ph-serif);
font-size: 14px;
flex-shrink: 0;
}
.mon-quote-thumb--ceo { background: var(--ph-gold-deep); }
.mon-quote-info { flex: 1; min-width: 0; }
.mon-quote-info__ph { font-size: 13.5px; font-weight: 500; color: var(--ph-ink); }
.mon-quote-info__det { font-size: 11.5px; color: var(--ph-ink-soft); margin-top: 2px; }
.mon-quote-info__det strong { color: var(--ph-ink); font-weight: 500; }
.mon-quote-amount {
font-family: var(--ph-serif);
font-size: 22px;
font-weight: 500;
color: var(--mon-state-orcamento);
text-align: right;
flex-shrink: 0;
}
.mon-quote-amount__lbl {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ph-ink-muted);
display: block;
margin-bottom: 2px;
font-weight: 500;
}
.mon-quote-amount__cur {
font-size: 14px;
color: rgba(90, 61, 122, 0.6);
/* v0.71.32 · #8 — € depois do nº (NBSP no JS) · margin-right removido */
}
.mon-quote-actions { display: flex; gap: 6px; flex-shrink: 0; }
.mon-qbtn {
padding: 6px 12px;
border-radius: 5px;
font-size: 11px;
font-weight: 500;
cursor: pointer;
font-family: var(--ph-sans);
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px solid transparent;
}
.mon-qbtn--approve { background: var(--mon-state-instalado); color: var(--ph-white); }
.mon-qbtn--decline { background: var(--ph-paper); border-color: var(--ph-line); color: var(--ph-ink-soft); }
.mon-qbtn--ceo {
background: rgba(145, 113, 67, 0.12);
border-color: rgba(145, 113, 67, 0.4);
color: var(--ph-gold-deep);
}
.mon-qbtn--ceo:hover { background: rgba(145, 113, 67, 0.2); }
.mon-quote-row-ceo-note {
background: linear-gradient(90deg, rgba(145,113,67,0.08) 0%, rgba(145,113,67,0.02) 100%);
border-bottom: 1px dashed rgba(145, 113, 67, 0.25);
padding: 10px 22px;
display: flex;
align-items: center;
gap: 10px;
font-size: 11.5px;
}
.mon-quote-row-ceo-note .star {
color: var(--ph-gold-deep);
font-size: 12px;
}
.mon-quote-row-ceo-note .txt {
flex: 1;
color: var(--ph-ink-soft);
}
.mon-quote-row-ceo-note .txt strong { color: var(--ph-ink); font-weight: 500; }
/* ── Priorities (Painel) ──
v0.60.0 · Prompt 16 — padding vertical (14px) MOVIDO do container
para as rows first/last child via padding-top/bottom extra (26px =
14 compensação + 12 padding default da row). Antes o hover background
na 1ª/última row deixava 14px de gap branco entre o tint e a borda
do card. Agora o hover estende-se até ao border-radius do card pai. */
.mon-priorities { padding: 0 22px; }
.mon-priority-row {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 14px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--ph-line);
}
.mon-priority-row:last-child { border-bottom: none; }
/* v0.41.0 · Prompt 11A itens 2/3/4 — linhas das 3 cards do Painel
(Prioridades / A aguardar aprovação / Atividade) ficam clicáveis e
abrem o detalhe do pedido. Cursor + hover tint subtil dão affordance.
v0.44.0 — negative margins laterais (-22px) + padding lateral (22px)
neutralizam a `padding: 14px 22px` dos containers `.mon-priorities`
/ `.mon-approvals-inline` / `.mon-activity` para que o hover
background se estenda edge-to-edge da card (antes ficava confinado
ao box da row, deixando 22px de paper de cada lado por colorir). */
.cha-portal .mon-priority-row[data-pedido-id],
.cha-portal .mon-approval-row[data-pedido-id],
.cha-portal .mon-act-row[data-pedido-id] {
cursor: pointer;
transition: background 0.15s var(--ph-ease);
margin-left: -22px;
margin-right: -22px;
padding-left: 22px;
padding-right: 22px;
}
.cha-portal .mon-priority-row[data-pedido-id]:hover,
.cha-portal .mon-approval-row[data-pedido-id]:hover,
.cha-portal .mon-act-row[data-pedido-id]:hover {
background: var(--ph-paper-tint);
}
/* v0.60.0 · Prompt 16 — primeira/última row do container ganham padding
extra vertical (era 14px no container, agora 14+12=26 nas pontas)
+ border-radius bottom na última row para acompanhar o radius do card.
Resolve o gap branco entre o hover background e a borda do card pai.
Lateral (margin -22px / padding 22px) já vinha do v0.44. */
.cha-portal .mon-priorities > .mon-priority-row:first-child,
.cha-portal .mon-approvals-inline > .mon-approval-row:first-child,
.cha-portal .mon-activity > .mon-act-row:first-child {
padding-top: 26px;
}
.cha-portal .mon-priorities > .mon-priority-row:last-child,
.cha-portal .mon-approvals-inline > .mon-approval-row:last-child,
.cha-portal .mon-activity > .mon-act-row:last-child {
padding-bottom: 26px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
/* v0.34.0 · Prompt 08C item 5 — !important defensivo. v0.33.0 já tinha o
boost de especificidade (.cha-portal) mas screenshots continuavam a mostrar
Playfair italic — provavelmente cache CSS/browser ou outra cascata oculta.
!important garante que NADA pode vencer estas propriedades. */
.cha-portal .mon-priority-num {
font-family: var(--ph-sans) !important;
font-size: 18px !important;
color: var(--ph-ink-faint, #6B7E8A) !important;
text-align: center;
line-height: 1;
font-weight: 700 !important;
font-style: normal !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.cha-portal .mon-priority-row--urgent .mon-priority-num {
color: var(--ph-accent-montras) !important;
}
.mon-priority-info__ph { font-size: 13px; font-weight: 500; margin-bottom: 3px; }
.mon-priority-info__meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--ph-ink-muted);
}
.mon-priority-deadline { text-align: right; }
/* v0.34.0 · Prompt 08C item 6 — label "ENVIAR FORNECEDOR" / "Q.I Jun" passa
de monospace lowercase para sans uppercase com tracking 0.18em (alinhado
com o resto dos eyebrows do sistema). */
.cha-portal .mon-priority-deadline__d {
font-family: var(--ph-sans);
font-size: 9px;
color: var(--ph-ink-faint, #6B7E8A);
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 3px;
}
.mon-priority-deadline__when {
font-family: var(--ph-serif);
font-size: 14px;
font-weight: 500;
}
.mon-priority-deadline__when--urgent { color: var(--ph-accent-montras); }
/* ── Brand tags (já em tokens, repetimos selectores) ── */
.mon-tag {
font-size: 9px;
padding: 2px 7px;
border-radius: 3px;
font-family: var(--ph-sans);
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 500;
display: inline-flex;
align-items: center;
}
.mon-tag--pm { background: var(--mon-tag-pm-bg); color: var(--mon-tag-pm-fg); }
.mon-tag--bow { background: var(--mon-tag-bow-bg); color: var(--mon-tag-bow-fg); }
.mon-tag--both {
background: linear-gradient(90deg, var(--mon-tag-pm-bg) 50%, var(--mon-tag-bow-bg) 50%);
color: var(--ph-ink);
}
/* ── Approvals inline (Painel) ── */
/* v0.60.0 · Prompt 16 — ver nota em .mon-priorities acima. */
.mon-approvals-inline { padding: 0 22px; }
.mon-approval-row {
display: flex;
gap: 12px;
align-items: center;
padding: 10px 0;
border-bottom: 1px dashed var(--ph-line);
}
.mon-approval-row:last-child { border-bottom: none; }
.mon-approval-thumb {
width: 36px; height: 36px;
border-radius: 6px;
background: linear-gradient(135deg, var(--ph-accent-montras), #c46a52);
display: grid; place-items: center;
color: var(--ph-white);
font-family: var(--ph-serif);
font-size: 14px;
flex-shrink: 0;
}
.mon-approval-thumb--bow {
background: linear-gradient(135deg, var(--mon-tag-bow-fg), #3a4a6e);
}
.mon-approval-info { flex: 1; min-width: 0; }
.mon-approval-info__ph { font-size: 12.5px; font-weight: 500; color: var(--ph-ink); }
.mon-approval-info__who { font-size: 11px; color: var(--ph-ink-muted); margin-top: 2px; }
.mon-approval-meta { text-align: right; }
.mon-waiting {
font-family: var(--ph-sans);
font-size: 10px;
color: var(--ph-accent-challenge, #B8854A);
letter-spacing: 0.05em;
}
.mon-waiting--urgent { color: var(--mon-state-recusado); }
.mon-reminder {
font-family: var(--ph-sans);
font-size: 9px;
color: rgba(17, 40, 51, 0.35);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 2px;
}
.mon-reminder::before { content: '↻ '; }
.mon-reminder--sent { color: var(--mon-state-instalado); }
/* v0.33.0 · Prompt 08B item 4 — pill âmbar pulsante "+48H" na card
"A aguardar aprovação" do Painel (entre "há N dias" e "✓ lembrete
enviado"). Reusa @keyframes mon-pulse. */
.cha-portal .mon-approval-meta__reminder-line {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
flex-wrap: wrap;
justify-content: flex-end;
}
.cha-portal .mon-approval-row__overdue-pill {
display: inline-flex;
align-items: center;
gap: 4px;
background: #FAF1D6;
color: #806316;
padding: 1px 8px;
border-radius: 100px;
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.cha-portal .mon-approval-row__overdue-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: #D4A53A;
box-shadow: 0 0 0 3px rgba(212, 165, 58, 0.22);
animation: mon-pulse 2s ease-in-out infinite;
flex-shrink: 0;
}
/* Reset do margin-top do .mon-reminder quando dentro da reminder-line
(já tem gap próprio do flex). */
.cha-portal .mon-approval-meta__reminder-line .mon-reminder { margin-top: 0; }
/* ── Right rail (Painel) ── */
.mon-rail > * + * { margin-top: 20px; }
/* v0.37.0 · Prompt 09C item 4 — supplier card gradiente azulado
(ink-soft → ink) em vez de castanho (#2d2823). Alinha com a paleta navy
do design-system Papillon Lab. */
.mon-supplier {
background: linear-gradient(135deg, var(--ph-ink-soft, #2C4858) 0%, var(--ph-ink) 100%);
color: var(--ph-paper);
border-radius: 10px;
padding: 20px;
position: relative;
overflow: hidden;
}
.mon-supplier::before {
content: '';
position: absolute;
top: 0; right: -40px;
width: 180px; height: 180px;
background: radial-gradient(circle at center, var(--ph-accent-montras) 0%, transparent 60%);
opacity: 0.3;
}
.mon-supplier__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
position: relative;
z-index: 1;
}
.mon-supplier__name {
font-family: var(--ph-serif);
font-size: 17px;
font-weight: 400;
text-transform: uppercase; /* v0.71.34 · #9 — título agnóstico "PEDIDOS POR ESTADO" (string i18n fica sentence-case) */
}
.mon-supplier__sub {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(232, 226, 212, 0.5);
margin-top: 2px;
}
/* v0.33.0 · Prompt 08B item 5 — Boost de especificidade (.cha-portal) +
color: var(--ph-paper) explícito para vencer o eyebrow block do Prompt 01
que estava a forçar gold-deep. A pill ganha agora o dot semântico roxo
de Produção sobre fundo translúcido (legível na card navy). */
.cha-portal .mon-supplier__status {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
background: rgba(232, 226, 212, 0.08);
border: 1px solid rgba(232, 226, 212, 0.18);
color: var(--ph-paper);
padding: 3px 10px;
border-radius: 100px;
}
.cha-portal .mon-supplier__status::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--mon-state-producao, #756F9B);
box-shadow: 0 0 0 3px rgba(117, 111, 155, 0.32);
flex-shrink: 0;
}
.mon-supplier__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
position: relative;
z-index: 1;
}
.mon-supplier__stat-l {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(232, 226, 212, 0.5);
margin-bottom: 4px;
}
.mon-supplier__stat-v {
font-family: var(--ph-serif);
font-size: 22px;
font-weight: 400;
}
.mon-quinzena__head {
padding: 18px 22px;
display: flex;
align-items: center;
gap: 14px;
}
.mon-quinzena__day {
font-family: var(--ph-serif);
font-size: 36px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.02em;
}
.mon-quinzena__day small {
font-size: 13px;
color: var(--ph-ink-muted);
display: block;
}
.mon-quinzena__info { flex: 1; }
.mon-quinzena__title { font-size: 13px; font-weight: 500; color: var(--ph-ink); }
.mon-quinzena__range { font-size: 11px; color: var(--ph-ink-muted); }
/* v0.34.0 · Prompt 08C item 7 — flex-shrink:0 + margin-left:auto defensivos
para garantir que o badge é visível à direita do head, sem ser comprimido
pelo .mon-quinzena__info (flex:1). !important nos tipográficos para vencer
eventual cache CSS. */
.cha-portal .mon-quinzena__badge {
display: inline-flex !important;
align-items: center;
gap: 5px;
background: #FAF1D6 !important;
color: #806316 !important;
font-family: var(--ph-sans) !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
padding: 3px 10px;
border-radius: 100px;
flex-shrink: 0;
margin-left: auto;
white-space: nowrap;
}
.cha-portal .mon-quinzena__badge::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: #D4A53A;
box-shadow: 0 0 0 3px rgba(212, 165, 58, 0.22);
animation: mon-pulse 2s ease-in-out infinite;
flex-shrink: 0;
}
.mon-quinzena__limits {
font-size: 11.5px;
color: var(--ph-ink-muted);
line-height: 1.5;
padding: 10px 12px;
background: var(--ph-paper-tint);
border-radius: 6px;
border-left: 2px solid var(--ph-accent-montras);
margin: 0 22px 18px;
}
.mon-quinzena__limits strong { color: var(--ph-ink); font-weight: 500; }
/* ── Activity (Painel) ── */
/* v0.60.0 · Prompt 16 — ver nota em .mon-priorities acima. */
.mon-activity { padding: 0 22px; }
.mon-act-row {
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 12px;
align-items: start;
padding: 10px 0;
border-bottom: 1px dashed var(--ph-line);
}
.mon-act-row:last-child { border-bottom: none; }
.mon-act-dot {
width: 8px; height: 8px;
border-radius: 50%;
margin-top: 4px;
}
.mon-act-text { font-size: 12.5px; line-height: 1.5; }
.mon-act-text strong { font-weight: 500; }
.mon-act-text .who { color: var(--mon-state-orcamento); font-weight: 500; }
/* v0.34.0 · Prompt 08C item 9 — !important defensivo (mesmo motivo do
.mon-priority-num · cache stubborn ou cascata oculta). */
.cha-portal .mon-act-time {
font-family: var(--ph-sans) !important;
font-size: 10px !important;
color: var(--ph-ink-faint, #6B7E8A) !important;
white-space: nowrap;
font-variant-numeric: tabular-nums !important;
font-style: normal !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
/* ── Pedidos · filter bar ── */
.mon-filter-bar {
display: flex;
gap: 8px;
margin-bottom: 24px;
flex-wrap: wrap;
align-items: center;
}
.mon-filter-chip {
padding: 7px 14px;
border-radius: 20px;
font-size: 12px;
background: var(--ph-paper);
border: 1px solid var(--ph-line);
cursor: pointer;
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
transition: background 0.18s var(--ph-ease), border-color 0.18s var(--ph-ease);
}
.mon-filter-chip:hover { border-color: var(--ph-line-strong, rgba(17,40,51,0.18)); }
.mon-filter-chip.active {
background: var(--ph-ink);
color: var(--ph-paper);
border-color: var(--ph-ink);
}
.mon-filter-divider {
width: 1px;
height: 22px;
background: var(--ph-line);
margin: 0 6px;
}
/* ── Pedidos · table ── */
/* v0.37.0 · Prompt 09C item 8 — remove border do wrap (evita border duplo
com a tabela interna que já tem border próprio). Background mantém-se. */
.mon-table-wrap {
background: var(--ph-paper);
border: none;
border-radius: 10px;
overflow: hidden;
}
.mon-table { width: 100%; border-collapse: collapse; }
.mon-table thead th {
text-align: left;
padding: 11px 22px;
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ph-ink-muted);
font-weight: 500;
background: var(--ph-paper-tint);
border-bottom: 1px solid var(--ph-line);
}
.mon-table tbody td {
padding: 12px 22px;
border-bottom: 1px solid var(--ph-line);
font-size: 13px;
vertical-align: middle;
color: var(--ph-ink);
}
.mon-table tbody tr:hover { background: var(--ph-paper-tint); cursor: pointer; }
.mon-table tbody tr:last-child td { border-bottom: none; }
.mon-table .pedido-ref {
font-family: var(--ph-mono);
font-size: 11px;
color: var(--ph-ink-muted);
}
.mon-table .ph-name { font-weight: 500; }
.mon-table .ph-loc { font-size: 11px; color: var(--ph-ink-muted); margin-top: 2px; }
.mon-table .value {
font-family: var(--ph-serif);
font-size: 15px;
font-weight: 500;
}
.mon-table .value--est { color: var(--ph-ink-muted); font-family: var(--ph-sans); font-variant-numeric: tabular-nums; font-size: 13px; }
/* ── States (badges nos pedidos / atelier)
v0.10.1: escala 9px mono uppercase (alinhado com handoff §3.2)
Tints como variáveis CSS (eram hex literais inline) */
.mon-state {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 9px;
font-family: var(--ph-sans);
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 3px;
font-weight: 500;
}
.mon-state--submetido { background: var(--mon-state-submetido-tint); color: var(--mon-state-submetido); }
.mon-state--design { background: var(--mon-state-design-tint); color: var(--ph-accent-montras); }
.mon-state--aprovacao { background: var(--mon-state-aprovacao-tint); color: var(--ph-accent-challenge, #B8854A); }
.mon-state--orcamento { background: var(--mon-state-orcamento-tint); color: var(--mon-state-orcamento); }
.mon-state--producao { background: var(--mon-state-producao-tint); color: var(--mon-state-producao); }
.mon-state--envio { background: var(--mon-state-envio-tint); color: var(--mon-tag-bow-fg); }
.mon-state--instalado { background: var(--mon-state-instalado-tint); color: var(--mon-state-instalado); }
.mon-state--ceo { background: var(--mon-state-ceo-tint); color: var(--mon-state-ceo); }
.mon-state--recusado { background: var(--mon-state-recusado-tint); color: var(--mon-state-recusado); }
/* TAREFA 2 · Fatia 1b — sub-fases do FORNECEDOR no cartão do comercial (mon-state).
MESMAS cores do detalhe/listagem (mon-pill) → uniformes para todos os utilizadores. */
.mon-state--aguarda_orcamento { background: #e2ecef; color: #3f7d92; }
.mon-state--correccao_pedida { background: #f1e3ec; color: #8e4a72; }
.mon-state--recebido { background: #f0e6d2; color: #9a6b2f; } /* Fatia 2 · "Por aprovar" */
.mon-state--a_espera_ceo { background: #e4e7f2; color: #3b4d73; } /* Fatia 2 · 5.º batente · navy/ardósia */
.mon-state--orcamento_aprovado { background: #dde7d0; color: #5f7d4e; }
/* TAREFA 2 · Fatia 2 — marcador de PROVENIÊNCIA "Valor ajustado" (ocre · SECUNDÁRIO).
Convive com o badge de sub-fase, nunca o substitui. Mais pequeno/esbatido. */
.mon-ajustado-mark {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--ph-sans); font-size: 9px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase; color: #9a7b3a; opacity: 0.92;
}
.mon-ajustado-mark__dot { width: 4px; height: 4px; border-radius: 50%; background: #9a7b3a; }
/* Fatia 2 (polimento) — legenda realojada: marcador ocre "Valor ajustado" + data, 1 linha discreta. */
.mon-ajustado-date { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; font-size: 11px; color: var(--ph-ink-muted, rgba(17,40,51,0.55)); }
.mon-ajustado-date__txt { font-style: italic; }
.mon-ajustado-seal { color: #9a7b3a; font-size: 12px; cursor: default; opacity: 0.85; }
/* ── Modals (overlay) ──
v0.16.1 — z-index 10000 para ficar acima de .mon-detail-overlay (9998)
e .mon-success-overlay (9999). Modais de confirmação têm de aparecer
sobre o modal de detalhe do pedido sem ficarem tapados.
v0.41.0 · Prompt 11A item 9 — #mon-confirm-modal sobe para 10001 para
conseguir aparecer ACIMA de outros modais (.mon-ref-modal de edição,
.mon-modal-approve/decline) que também são .mon-modal-overlay (10000).
Antes o confirm "Remover referência?" abria mas ficava atrás do modal
de edição. */
/* v0.69.0 · Prompt 43A — modal genérico redesenhado para handoff Fase A.
Backdrop sand-2 + diagonal stripe overlay sobre navy 32%. Card cream
radius 22px. Title Playfair 30px 600. Suporta alinhamento esquerdo
(.mon-modal-card--left, usado pelo modal destrutivo "Remover ref"). */
.mon-modal-overlay {
position: fixed;
inset: 0;
background:
linear-gradient(rgba(21, 36, 46, 0.42), rgba(21, 36, 46, 0.42)),
repeating-linear-gradient(135deg, rgba(21, 36, 46, 0.04) 0 12px, rgba(21, 36, 46, 0) 12px 24px),
var(--mon-h-sand-2, #e4ddcd);
display: none;
align-items: center;
justify-content: center;
z-index: 10000;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
padding: 16px;
}
.mon-modal-overlay.is-visible { display: flex; }
/* v0.41.0 · Prompt 11A item 9 — confirm modal acima dos outros modais. */
.cha-portal #mon-confirm-modal { z-index: 10001; }
.mon-modal-card {
background: var(--mon-h-cream, #fcfaf5);
border-radius: 22px;
padding: 40px 38px 34px;
width: 460px;
max-width: 100%;
box-shadow: 0 40px 80px -30px rgba(21, 36, 46, 0.55);
text-align: center;
border: 0;
}
.mon-modal-card--left { text-align: left; }
.mon-modal-icon {
width: 78px; height: 78px;
border-radius: 50%;
display: grid; place-items: center;
margin: 0 auto 22px;
font-family: var(--ph-serif);
font-size: 36px;
font-weight: 600;
color: #fff;
line-height: 1;
}
.mon-modal-card--left .mon-modal-icon { margin: 0 0 18px; }
.mon-modal-icon--approve,
.mon-modal-icon--green { background: var(--mon-h-green, #3f7a52); color: #fff; }
.mon-modal-icon--decline,
.mon-modal-icon--red { background: var(--mon-h-red, #8e2d2d); color: #fff; }
/* Soft (vermelho a 10%) — usado no modal destrutivo "Remover referência" */
.mon-modal-icon--soft-red {
width: 60px; height: 60px;
background: var(--mon-h-red-soft, rgba(142, 45, 45, 0.1));
color: var(--mon-h-red, #8e2d2d);
font-size: 28px;
}
.mon-modal-title {
font-family: var(--ph-serif);
font-size: 30px;
font-weight: 600;
letter-spacing: -0.005em;
margin: 0 0 14px;
color: var(--mon-h-ink, #1c2a32);
/* Algarismos tabulares alinhados — handoff exige para Playfair com números */
font-feature-settings: "tnum" 1, "lnum" 1;
}
.mon-modal-title em { font-style: italic; color: var(--mon-h-gold-2, #a07634); font-weight: 600; }
.mon-modal-desc {
font-size: 15px;
color: var(--mon-h-muted, #5f6e74);
line-height: 1.6;
margin: 0 0 18px;
font-family: var(--ph-sans);
}
.mon-modal-desc b { color: var(--mon-h-ink, #1c2a32); font-weight: 600; }
.mon-modal-summary {
background: var(--ph-paper-tint);
border-radius: 6px;
padding: 12px 14px;
margin-bottom: 20px;
font-size: 12.5px;
}
.mon-modal-summary .ph { font-weight: 500; margin-bottom: 4px; color: var(--ph-ink); }
.mon-modal-summary .det {
font-family: var(--ph-mono);
font-size: 11px;
color: var(--ph-ink-muted);
letter-spacing: 0.05em;
}
.mon-modal-textarea {
width: 100%;
border: 1px solid var(--ph-line);
background: var(--ph-paper-tint);
padding: 10px;
border-radius: 6px;
font-family: var(--ph-sans);
font-size: 13px;
min-height: 60px;
margin-bottom: 16px;
resize: vertical;
color: var(--ph-ink);
}
/* v0.69.0 · Prompt 43A — actions row e botões alinhados ao handoff.
Default: distribuídos com flex:1 (modais centrados como sucesso/erro).
--end: alinhados à direita (modal destrutivo "Remover referência"). */
.mon-modal-actions {
display: flex;
gap: 12px;
justify-content: stretch;
margin-top: 26px;
}
.mon-modal-actions--end {
justify-content: flex-end;
}
.mon-modal-actions--end .mon-modal-btn { flex: 0 0 auto; }
.mon-modal-actions:not(.mon-modal-actions--end) .mon-modal-btn { flex: 1; }
.mon-modal-btn {
padding: 15px 20px;
border-radius: 11px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: var(--ph-sans);
border: 1px solid transparent;
transition: background 0.15s var(--ph-ease), border-color 0.15s var(--ph-ease), opacity 0.15s var(--ph-ease);
}
.mon-modal-btn--cancel,
.mon-modal-btn--outline {
background: var(--mon-h-cream, #fcfaf5);
border-color: var(--mon-h-line, #e3dbc9);
color: var(--mon-h-ink, #1c2a32);
}
.mon-modal-btn--cancel:hover,
.mon-modal-btn--outline:hover { border-color: var(--mon-h-gold-soft, #c9a978); }
.mon-modal-btn--approve,
.mon-modal-btn--green {
background: var(--mon-h-green, #3f7a52);
color: #fff;
}
.mon-modal-btn--approve:hover,
.mon-modal-btn--green:hover { background: var(--mon-h-green-2, #356646); }
.mon-modal-btn--decline,
.mon-modal-btn--danger {
background: var(--mon-h-red, #8e2d2d);
color: #fff;
}
.mon-modal-btn--decline:hover,
.mon-modal-btn--danger:hover { background: var(--mon-h-red-2, #7a2727); }
.mon-modal-btn--navy {
background: var(--mon-h-navy, #15242e);
color: #fff;
}
.mon-modal-btn--navy:hover { background: var(--mon-h-navy-2, #1d3340); }
.mon-modal-btn--gold {
background: var(--mon-h-gold, #b0863c);
color: #fff;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 12px;
}
.mon-modal-btn--gold:hover { background: var(--mon-h-gold-2, #a07634); }
/* ════════════════════════════════════════════════════════════
v0.71.54 · Handoff 2 · Fatia 1 — shell único dos modais de confirmação.
SCOPED a #mon-confirm-modal (os modais de orçamento #mon-modal-approve/
-decline ficam de fora). Só aspeto: cartão #FAFAF7 ~400px, chip 66px
(tint + ícone de linha na cor do estado · sem emoji), Cancelar fantasma
(branco + borda dourada), primário na cor do estado.
════════════════════════════════════════════════════════════ */
#mon-confirm-modal .mon-modal-card {
background: var(--ph-paper, #FAFAF7);
width: 400px;
padding: 34px 34px 28px;
}
/* Chip: 66px, fundo = tint do estado, ícone SVG de linha (currentColor) */
#mon-confirm-modal .mon-modal-icon {
width: 66px;
height: 66px;
color: var(--ph-ink-soft); /* default · sobreposto pelos kinds */
}
#mon-confirm-modal .mon-modal-icon svg {
width: 27px;
height: 27px;
display: block;
}
/* chip-kinds (tint bg + state stroke) — overridem os solid antigos dentro do modal */
#mon-confirm-modal .mon-modal-icon--terracota { background: #F4E4DC; color: #A35846; }
#mon-confirm-modal .mon-modal-icon--amber { background: #FAEBD9; color: #C97B3F; }
#mon-confirm-modal .mon-modal-icon--red { background: #F7E4E1; color: #B23B3B; }
#mon-confirm-modal .mon-modal-icon--purple { background: #E8E5EE; color: #756F9B; }
/* herdadas: approve(verde)/decline(vermelho) passam a tint+linha (mantêm a cor) */
#mon-confirm-modal .mon-modal-icon--approve,
#mon-confirm-modal .mon-modal-icon--green { background: #DDEAE0; color: #4A8E5E; }
#mon-confirm-modal .mon-modal-icon--decline,
#mon-confirm-modal .mon-modal-icon--soft-red { background: #F7E4E1; color: #8E2D2D; }
/* Cancelar fantasma: branco + borda dourada */
#mon-confirm-modal .mon-modal-btn--cancel {
background: var(--ph-white, #fff);
border-color: var(--ph-gold, #D4C0A4);
color: var(--ph-ink);
}
#mon-confirm-modal .mon-modal-btn--cancel:hover {
border-color: var(--ph-gold-deep, #917143);
background: var(--ph-paper-tint, #F2EFE9);
}
/* Primário na cor do estado (spec) */
#mon-confirm-modal .mon-modal-btn--terracota { background: #A35846; color: #fff; }
#mon-confirm-modal .mon-modal-btn--terracota:hover { background: #8f4a3a; }
#mon-confirm-modal .mon-modal-btn--amber { background: #C97B3F; color: #fff; }
#mon-confirm-modal .mon-modal-btn--amber:hover { background: #b16a31; }
#mon-confirm-modal .mon-modal-btn--red { background: #B23B3B; color: #fff; }
#mon-confirm-modal .mon-modal-btn--red:hover { background: #9a3030; }
#mon-confirm-modal .mon-modal-btn--purple { background: #756F9B; color: #fff; }
#mon-confirm-modal .mon-modal-btn--purple:hover { background: #635d86; }
/* v0.69.0 — assinatura logo Papillon HUB no modal (sobre fundo cream). */
.mon-modal-sign {
margin-top: 24px;
display: flex;
justify-content: center;
}
.mon-modal-sign img { width: 128px; height: auto; display: block; }
/* ── WIP placeholder (sub-pages 3-5) ── */
.mon-wip {
padding: 60px 28px;
text-align: center;
}
/* =====================================================
APROVAÇÕES (v0.4.0)
===================================================== */
.mon-approval-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 18px;
}
/* v0.65.7 · Prompt 24 — alinhamento com o padrão `.mon-pedido-card`
(v0.64.1 / Challenge `.cha-sub-card`):
- `border: none` em 3 lados (era 1px solid)
- `border-left: 3px solid` colorido por estado (default neutro)
- `box-shadow` permanente para o contorno subtil (substitui o border 1px)
- `overflow: visible` para a curvatura do border-left ir até ao fim
sem clipar nos cantos
- background white (era paper · uniformizar com Pedidos)
- children `__head` e `__body` recebem border-radius próprio para
que os seus backgrounds (paper-tint no head, white no body) não
"saiam" dos cantos arredondados do card pai. */
.mon-approval-card {
background: var(--ph-white);
border: none;
border-left: 3px solid var(--ph-line-strong);
border-radius: 10px;
box-shadow: var(--ph-shadow-sm, 0 2px 8px -2px rgba(17, 40, 51, 0.08));
overflow: visible;
display: flex;
flex-direction: column;
transition: box-shadow 0.15s var(--ph-ease, ease);
}
.mon-approval-card:hover {
box-shadow: var(--ph-shadow-md, 0 8px 24px -10px rgba(17, 40, 51, 0.15));
}
.mon-approval-card--urgent { border-left-color: var(--mon-state-recusado); }
.mon-approval-card--warn { border-left-color: var(--ph-accent-challenge, #B8854A); }
/* v0.65.7 · Prompt 24 — border-radius nos cantos top para acompanhar
o card pai (que agora tem `overflow: visible`). Sem isto, o background
paper-tint do head ia "sair" dos cantos arredondados do card. */
.mon-approval-card__head {
padding: 12px 18px;
background: var(--ph-paper-tint);
border-bottom: 1px solid var(--ph-line);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.mon-approval-card__id {
font-family: var(--ph-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--ph-ink-muted);
}
/* v0.37.0 · Prompt 09C item 10 — background branco explícito (era
transparente, herdava do parent que pode ser paper/cream). Cards
uniformes com o resto do HUB. */
/* v0.65.7 · Prompt 24 — border-radius nos cantos bottom para acompanhar
o card pai (overflow: visible). Pares com o `__head` lá em cima. */
.cha-portal .mon-approval-card__body {
padding: 18px 20px;
flex: 1;
background: var(--ph-white, #FFFFFF);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
/* v0.33.0 · Prompt 08B item 8 — Boost de especificidade (.cha-portal) para
garantir que a remoção de italic apanha. !important defensivo no font-style
porque há vários sítios no CSS com font-style: italic que podem afectar
via herança/cascada se algum parent set italic. */
.cha-portal .mon-approval-card__ph {
font-family: var(--ph-serif);
font-size: 18px;
font-weight: 500;
font-style: normal !important;
line-height: 1.2;
margin-bottom: 6px;
color: var(--ph-ink);
}
.mon-approval-card__meta {
font-size: 12px;
color: var(--ph-ink-muted);
margin-bottom: 16px;
line-height: 1.5;
}
.mon-approval-card__meta span + span::before { content: ' · '; opacity: 0.5; }
.mon-approval-card__by {
background: var(--ph-paper-tint);
border-radius: 6px;
padding: 12px 14px;
margin-bottom: 14px;
}
.mon-approval-card__by-l {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ph-ink-muted);
margin-bottom: 6px;
}
.mon-approval-card__by-n {
font-size: 13px;
font-weight: 500;
}
.mon-approval-card__by-det {
font-size: 11px;
color: var(--ph-ink-muted);
margin-top: 4px;
}
.mon-approval-card__time {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.mon-approval-card__time-info { min-width: 0; }
.mon-approval-card__waiting {
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--ph-accent-challenge, #B8854A);
}
.mon-approval-card__waiting--urgent { color: var(--mon-state-recusado); }
.mon-approval-card__reminder {
font-family: var(--ph-sans);
font-size: 10px;
color: var(--ph-ink-muted);
letter-spacing: 0.05em;
margin-top: 2px;
}
.mon-approval-card__reminder--sent { color: var(--mon-state-instalado); }
.mon-approval-card__btn {
font-size: 11px;
padding: 6px 12px;
border-radius: 5px;
border: 1px solid var(--ph-line);
background: var(--ph-paper);
color: var(--ph-ink-soft);
cursor: pointer;
font-family: var(--ph-sans);
white-space: nowrap;
flex-shrink: 0;
}
.mon-approval-card__btn:hover { border-color: var(--ph-line-strong, rgba(17,40,51,0.18)); color: var(--ph-ink); }
/* =====================================================
ORÇAMENTOS (v0.4.0)
===================================================== */
.mon-quotes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
gap: 18px;
}
/* v0.67.2 · Prompt 32C — Secções da tab Orçamentos.
v0.67.3 · Prompt 32D — Títulos h2 das secções passam a usar
`.mon-pheader__title` (mesmo estilo do h1 principal · Playfair 34px)
para uniformizar. `.mon-section-h2` apenas ajusta o margin-bottom
(o `.mon-pheader__title` base é `margin: 0` para o h1 do .mon-pheader). */
.cha-portal .mon-orcamentos-section {
margin-bottom: 32px;
}
.cha-portal .mon-orcamentos-section:last-child { margin-bottom: 0; }
.cha-portal .mon-section-h2 {
margin: 0 0 4px;
}
.cha-portal .mon-section-sub {
font-family: var(--ph-sans);
font-size: 13px;
color: var(--ph-ink-soft);
margin: 0 0 18px;
line-height: 1.5;
}
/* v0.67.4 · Prompt 33 — `.mon-section-empty` removida · era para o
empty state da secção 1 ("Sem orçamentos para aprovar neste momento")
que deixou de existir (h1 sub do header já comunica o estado). */
/* v0.67.2 · Prompt 32C — modifier do .mon-approval-card para os cards
"Aguarda resposta do fornecedor" na tab Orçamentos. Reusa toda a
estrutura visual das Aprovações (head + body + by + time + button) ·
só muda o border-left para teal (cor do estado `orcamento`) em vez
da cor default neutra. Se o card tem `--urgent` (waiting >48h), esse
modifier ganha precedência (border vermelho) — mantém-se o pattern
das Aprovações. */
.cha-portal .mon-approval-card--quote-waiting {
border-left-color: var(--mon-state-orcamento, #3F8DAB);
cursor: pointer;
}
.mon-quote-bigcard {
background: var(--ph-paper);
border: 1px solid var(--ph-line);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.mon-quote-bigcard--ceo {
border-left: 3px solid var(--ph-gold-deep);
}
.mon-quote-bigcard__head {
padding: 12px 18px;
background: var(--ph-paper-tint);
border-bottom: 1px solid var(--ph-line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.mon-quote-bigcard--ceo .mon-quote-bigcard__head {
background: linear-gradient(90deg, rgba(145,113,67,0.10) 0%, var(--ph-paper-tint) 100%);
}
.mon-quote-bigcard__id {
font-family: var(--ph-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--ph-ink-muted);
}
.mon-quote-bigcard__tags {
display: flex;
gap: 6px;
align-items: center;
}
.mon-tag--ceo {
background: var(--ph-gold-deep);
color: var(--ph-white);
}
.mon-quote-bigcard__body { padding: 18px 20px; flex: 1; }
.mon-quote-bigcard__ph {
font-family: var(--ph-serif);
font-size: 18px;
font-weight: 500;
line-height: 1.2;
margin-bottom: 6px;
}
.mon-quote-bigcard__meta {
font-size: 12px;
color: var(--ph-ink-muted);
margin-bottom: 18px;
line-height: 1.5;
}
.mon-quote-bigcard__meta span + span::before { content: ' · '; opacity: 0.5; }
.mon-quote-bigcard__amount {
background: var(--ph-paper-tint);
border-left: 3px solid var(--mon-state-orcamento);
padding: 16px 18px;
border-radius: 6px;
margin-bottom: 16px;
}
.mon-quote-bigcard--ceo .mon-quote-bigcard__amount {
background: linear-gradient(135deg, rgba(145,113,67,0.15) 0%, rgba(145,113,67,0.04) 100%);
border-left-color: var(--ph-gold-deep);
}
.mon-quote-bigcard__amount-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.mon-quote-bigcard__amount-l {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ph-ink-muted);
font-weight: 500;
}
.mon-quote-bigcard--ceo .mon-quote-bigcard__amount-l { color: var(--ph-gold-deep); }
.mon-quote-bigcard__amount-v {
font-family: var(--ph-serif);
font-size: 28px;
font-weight: 500;
color: var(--mon-state-orcamento);
line-height: 1;
}
.mon-quote-bigcard--ceo .mon-quote-bigcard__amount-v { color: var(--ph-gold-deep); }
.mon-quote-bigcard__amount-cur {
font-size: 14px;
color: var(--ph-ink-muted);
/* v0.71.32 · #8 — € depois do nº (NBSP no JS) · margin-right removido */
}
.mon-quote-bigcard__breakdown {
display: grid;
grid-template-columns: repeat(2, 1fr); /* v0.71.41 — removida a coluna "Material" (custo derivado, sempre 0) */
gap: 10px;
padding-top: 12px;
border-top: 1px dashed rgba(90, 61, 122, 0.2);
}
.mon-quote-bigcard--ceo .mon-quote-bigcard__breakdown {
border-top-color: rgba(145, 113, 67, 0.3);
}
.mon-quote-bigcard__bk-col { text-align: center; }
.mon-quote-bigcard__bk-l {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ph-ink-muted);
margin-bottom: 2px;
}
.mon-quote-bigcard__bk-v {
font-family: var(--ph-serif);
font-size: 15px;
font-weight: 500;
color: var(--ph-ink);
}
.mon-quote-bigcard__compare {
font-size: 12px;
color: var(--ph-ink-soft);
background: var(--ph-paper-tint);
border-radius: 6px;
padding: 10px 14px;
margin-bottom: 16px;
line-height: 1.5;
}
.mon-quote-bigcard__compare strong { font-weight: 600; color: var(--ph-ink); }
.mon-quote-bigcard__compare--high strong { color: var(--mon-state-recusado); }
.mon-quote-bigcard__compare--low strong { color: var(--mon-state-instalado); }
.mon-quote-bigcard__actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.mon-quote-bigcard__actions .mon-btn {
font-size: 12.5px;
padding: 9px 14px;
}
.mon-quote-bigcard__actions .mon-btn--approve {
background: var(--mon-state-instalado);
color: var(--ph-white);
border-color: var(--mon-state-instalado);
flex: 1;
}
.mon-quote-bigcard__actions .mon-btn--approve:hover {
background: #2f4a2f;
border-color: #2f4a2f;
}
.mon-quote-bigcard__actions--ceo .mon-btn { flex: 1; justify-content: center; }
/* Toast notification (CEO email/link sent) */
.mon-toast {
position: fixed;
bottom: 24px;
right: 24px;
background: var(--ph-ink);
color: var(--ph-paper);
padding: 12px 18px;
border-radius: 8px;
font-size: 13px;
font-family: var(--ph-sans);
box-shadow: var(--ph-shadow-md, 0 8px 24px -10px rgba(17,40,51,0.3));
/* v0.16.1 — toast sempre por cima de modais (10000) e detail (9998) */
z-index: 10001;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.2s var(--ph-ease), transform 0.2s var(--ph-ease);
}
.mon-toast.is-visible {
opacity: 1;
transform: translateY(0);
}
.mon-toast--error { background: var(--mon-state-recusado); }
/* Mobile (≤ 767px) */
@media (max-width: 767px) {
.mon-approval-grid,
.mon-quotes-grid {
grid-template-columns: 1fr;
}
.mon-quote-bigcard__amount-v { font-size: 24px; }
.mon-quote-bigcard__actions { flex-direction: column; }
.mon-quote-bigcard__actions .mon-btn { width: 100%; }
}
/* =====================================================
CALENDÁRIO (v0.5.0)
===================================================== */
.mon-calendar {
background: var(--ph-paper);
border: 1px solid var(--ph-line);
border-radius: 10px;
overflow: hidden;
}
.mon-calendar__head {
padding: 18px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid var(--ph-line);
}
.mon-calendar__title {
font-family: var(--ph-serif);
font-size: 22px;
font-weight: 400;
letter-spacing: -0.01em;
}
.mon-calendar__title .mon-calendar__year {
color: var(--ph-accent-montras);
margin-left: 6px;
}
.mon-calendar__sub {
font-size: 12px;
color: var(--ph-ink-muted);
margin-top: 4px;
line-height: 1.4;
}
.mon-calendar__nav {
display: flex;
gap: 4px;
}
.mon-calendar__nav-btn {
width: 32px;
height: 32px;
border-radius: 5px;
border: 1px solid var(--ph-line);
background: var(--ph-paper);
display: grid;
place-items: center;
cursor: pointer;
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
font-size: 16px;
line-height: 1;
transition: all 0.18s var(--ph-ease);
}
.mon-calendar__nav-btn:hover {
border-color: var(--ph-line-strong, rgba(17,40,51,0.18));
color: var(--ph-ink);
}
.mon-calendar__nav-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.mon-calendar__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
border-top: 1px solid var(--ph-line);
}
.mon-calendar__dayname {
padding: 10px 12px;
background: var(--ph-paper-tint);
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ph-ink-muted);
text-align: left;
border-bottom: 1px solid var(--ph-line);
border-right: 1px solid var(--ph-line);
}
.mon-calendar__dayname:last-child { border-right: none; }
.mon-calendar__day {
padding: 8px 10px;
min-height: 110px;
border-right: 1px solid var(--ph-line);
border-bottom: 1px solid var(--ph-line);
background: var(--ph-paper);
position: relative;
display: flex;
flex-direction: column;
gap: 2px;
}
.mon-calendar__day:nth-child(7n) { border-right: none; }
.mon-calendar__day--faded {
background: var(--ph-paper-tint);
opacity: 0.5;
}
.mon-calendar__day--today {
background: linear-gradient(135deg, #F7EBE3 0%, var(--ph-paper) 100%);
}
.mon-calendar__num {
font-family: var(--ph-serif);
font-size: 18px;
font-weight: 400;
margin-bottom: 4px;
line-height: 1;
}
.mon-calendar__day--today .mon-calendar__num {
color: var(--ph-accent-montras);
font-weight: 500;
}
.mon-calendar__event {
background: var(--ph-accent-montras);
color: var(--ph-white);
font-size: 9px;
padding: 2px 5px;
border-radius: 3px;
font-family: var(--ph-sans);
letter-spacing: 0.04em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: default;
}
.mon-calendar__event--design { background: var(--ph-accent-montras); }
.mon-calendar__event--bow { background: var(--mon-tag-bow-fg, #1e2a4a); }
.mon-calendar__event--dl { background: var(--ph-accent-challenge, #B8854A); }
.mon-calendar__event--install { background: var(--mon-state-instalado, #3d5a3d); }
.mon-calendar__event--quote { background: var(--mon-state-orcamento, #5a3d7a); }
/* v0.37.0 · Prompt 09C item 12 — calendário adapta a mobile (era 7 cols
fixas de 110px min-height = scroll horizontal em <768px). Mobile:
células menores, eventos compactos, máx 2 visíveis por dia. */
@media (max-width: 768px) {
.cha-portal .mon-calendar__head {
padding: 12px 14px;
flex-wrap: wrap;
}
.cha-portal .mon-calendar__title { font-size: 18px; }
.cha-portal .mon-cal-legend { padding: 8px 14px 12px; gap: 8px; }
.cha-portal .mon-cal-legend__chip { font-size: 9.5px; }
.cha-portal .mon-calendar__dayname {
padding: 6px 4px;
font-size: 9px;
letter-spacing: 0.06em;
}
.cha-portal .mon-calendar__day {
padding: 4px 3px;
min-height: 64px;
min-width: 0;
}
.cha-portal .mon-calendar__num {
font-size: 13px;
margin-bottom: 2px;
}
.cha-portal .mon-calendar__event {
font-size: 8px;
padding: 1px 3px;
letter-spacing: 0;
}
/* Máximo 2 eventos visíveis por célula em mobile (resto fica escondido) */
.cha-portal .mon-calendar__day .mon-calendar__event:nth-of-type(n + 3) {
display: none;
}
}
.mon-calendar__quinzena-marker {
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
font-family: var(--ph-sans);
font-size: 8px;
color: rgba(17, 40, 51, 0.25);
letter-spacing: 0.1em;
text-transform: uppercase;
pointer-events: none;
}
/* Empty state quando AJAX falha */
.mon-calendar__empty {
padding: 60px 22px;
text-align: center;
font-family: var(--ph-sans);
color: var(--ph-ink-soft);
}
/* Mobile ≤ 767px */
@media (max-width: 767px) {
.mon-calendar__day {
min-height: 70px;
padding: 4px 5px;
}
.mon-calendar__num { font-size: 14px; margin-bottom: 2px; }
.mon-calendar__event {
font-size: 8px;
padding: 1px 3px;
}
.mon-calendar__dayname {
padding: 6px 5px;
font-size: 8px;
letter-spacing: 0.1em;
}
.mon-calendar__quinzena-marker { font-size: 7px; bottom: 2px; }
.mon-calendar__title { font-size: 18px; }
}
/* =====================================================
BIBLIOTECA · REFERÊNCIAS (v0.6.0)
===================================================== */
.mon-ref-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.mon-ref-tile {
background: var(--ph-paper);
border: 1px solid var(--ph-line);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: transform 0.18s var(--ph-ease), box-shadow 0.18s var(--ph-ease);
}
.mon-ref-tile:hover {
transform: translateY(-2px);
box-shadow: var(--ph-shadow-md, 0 8px 24px -10px rgba(17, 40, 51, 0.15));
}
.mon-ref-tile__image {
background: linear-gradient(135deg, var(--ph-accent-montras), #c46a52);
height: 160px;
position: relative;
display: flex;
align-items: flex-end;
padding: 14px;
color: var(--ph-white);
background-size: cover;
background-position: center;
}
.mon-ref-tile__image::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.35) 100%);
}
/* v0.66.3 · Prompt 29 — `background:` shorthand → `background-image:`.
Antes: o shorthand resetava `background-size` (cover→auto) e
`background-position` (center→0% 0%) ao default, fazendo com que o
thumbnail inline aparecesse no canto top-left em tamanho original.
Agora só sobrepõe o `background-image` (gradient) → cede ao inline
quando há thumbnail · gradient navy fica como fallback quando não há. */
.mon-ref-tile__image--bow {
background-image: linear-gradient(135deg, #3a4a6e, var(--mon-tag-bow-fg, #1e2a4a));
}
.mon-ref-tile__mark {
font-family: var(--ph-serif);
font-size: 16px;
font-weight: 400;
position: relative;
z-index: 1;
}
.mon-ref-tile__mark em {
font-style: italic;
color: rgba(255, 255, 255, 0.7);
}
/* v0.41.0 · Prompt 11A item 7 — placeholder visual quando a ref não tem
imagem (imagem_url null). Sob fundo neutro paper-tint, mostra um icon
SVG "imagem partida" + label "Sem imagem" em vez do brand mark texto
anterior, que era ilegível no gradient colorido. */
.cha-portal .mon-ref-tile__image--empty {
background: var(--ph-paper-tint);
color: var(--ph-ink-muted, rgba(17, 40, 51, 0.55));
align-items: center;
justify-content: center;
padding: 0;
}
.cha-portal .mon-ref-tile__image--empty::before { display: none; }
.cha-portal .mon-ref-tile__placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: var(--ph-ink-muted, rgba(17, 40, 51, 0.55));
position: relative;
z-index: 1;
}
.cha-portal .mon-ref-tile__placeholder svg { display: block; opacity: 0.7; }
.cha-portal .mon-ref-tile__placeholder-l {
font-family: var(--ph-sans);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
}
.mon-ref-tile__type {
position: absolute;
top: 12px;
left: 12px;
background: rgba(255, 255, 255, 0.92);
color: var(--ph-ink);
font-family: var(--ph-sans);
font-size: 8.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 3px 7px;
border-radius: 3px;
font-weight: 500;
z-index: 1;
}
.mon-ref-tile__fav {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
display: grid;
place-items: center;
background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(4px);
border: none;
border-radius: 50%;
font-size: 16px;
line-height: 1;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: all 0.2s ease;
z-index: 2;
padding: 0;
}
.mon-ref-tile__fav:hover {
background: rgba(0, 0, 0, 0.4);
color: #ffd770;
transform: scale(1.1);
}
.mon-ref-tile__fav.is-on {
color: #f0c050;
background: rgba(0, 0, 0, 0.35);
}
.mon-ref-tile__fav:disabled { opacity: 0.6; cursor: wait; }
.mon-ref-tile__body { padding: 14px; }
.mon-ref-tile__name {
font-family: var(--ph-serif);
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
color: var(--ph-ink);
}
.mon-ref-tile__meta {
font-family: var(--ph-sans);
font-size: 9px;
color: var(--ph-ink-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* v0.66.0 · Prompt 27 — data secundária separada do meta principal,
ainda mais pequena e neutra (não compete com a marca/material). */
.mon-ref-tile__date {
font-family: var(--ph-sans);
font-size: 9px;
color: var(--ph-ink-faint, #6B7E8A);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 4px;
}
/* v0.66.4 · Prompt 30 — badge de prioridade no canto top-left da tile.
Pill ink com número branco. z-index acima do gradient ::before. */
.mon-ref-tile__priority {
position: absolute;
top: 8px;
left: 8px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--ph-ink);
color: var(--ph-white, #FFFFFF);
font-family: var(--ph-sans);
font-size: 10px;
font-weight: 700;
display: grid;
place-items: center;
z-index: 2;
box-shadow: 0 1px 4px rgba(17, 40, 51, 0.25);
}
/* v0.66.4 · Prompt 30 — help text abaixo dos inputs do modal de referência. */
.cha-portal .mon-form-stack__help {
margin-top: 6px;
font-family: var(--ph-sans);
font-size: 11px;
color: var(--ph-ink-muted);
line-height: 1.4;
}
/* =====================================================
BIBLIOTECA · MATERIAIS (v0.6.0)
===================================================== */
.mon-materiais-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.mon-material-card {
background: var(--ph-paper);
border: 1px solid var(--ph-line);
border-radius: 10px;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.mon-material-swatch {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 6px;
overflow: hidden;
position: relative;
}
.mon-material-swatch--vinil-opaco { background: linear-gradient(135deg, var(--ph-ink), #2d2823); }
.mon-material-swatch--microperfurado { background: linear-gradient(135deg, var(--ph-ink), #2d2823); }
.mon-material-swatch--microperfurado::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at center, rgba(255,255,255,0.18) 1px, transparent 1.5px);
background-size: 6px 6px;
}
.mon-material-swatch--duratran { background: linear-gradient(135deg, #f0e0c0, #d4b88a); }
.mon-material-swatch--acrilico { background: linear-gradient(135deg, #e8e8e8, #c0c0c0); }
.mon-material-swatch--vinil-recortado{ background: linear-gradient(135deg, var(--ph-accent-montras), #c46a52); }
.mon-material-swatch--magnetico { background: linear-gradient(135deg, #4a4a5e, #2a2a3e); }
.mon-material-swatch--default { background: linear-gradient(135deg, var(--ph-paper-tint), var(--ph-line)); }
.mon-material-card__name {
font-family: var(--ph-serif);
font-size: 18px;
font-weight: 500;
color: var(--ph-ink);
}
.mon-material-card__desc {
font-size: 12.5px;
color: var(--ph-ink-muted);
line-height: 1.5;
flex: 1;
}
.mon-material-card__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding-top: 12px;
border-top: 1px solid var(--ph-line);
}
.mon-mat-stat__l {
font-family: var(--ph-sans);
font-size: 8.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ph-ink-muted);
margin-bottom: 3px;
}
.mon-mat-stat__v {
font-family: var(--ph-serif);
font-size: 15px;
font-weight: 500;
color: var(--ph-ink);
}
/* =====================================================
BIBLIOTECA · FARMÁCIAS (v0.6.0)
===================================================== */
.mon-pharm-card {
background: var(--ph-paper);
border: 1px solid var(--ph-line);
border-radius: 10px;
overflow: hidden;
}
.mon-pharm-header {
display: grid;
grid-template-columns: 56px 1fr 90px 70px 70px 90px;
gap: 14px;
align-items: center;
padding: 12px 18px;
background: var(--ph-paper-tint);
border-bottom: 1px solid var(--ph-line);
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ph-ink-muted);
}
.mon-pharm-row {
display: grid;
grid-template-columns: 56px 1fr 90px 70px 70px 90px;
gap: 14px;
align-items: center;
padding: 14px 18px;
border-bottom: 1px solid var(--ph-line);
cursor: pointer;
transition: background 0.15s var(--ph-ease);
}
.mon-pharm-row:hover { background: var(--ph-paper-tint); }
.mon-pharm-row:last-child { border-bottom: none; }
.mon-pharm-row__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--ph-accent-montras), #c46a52);
color: var(--ph-white);
display: grid;
place-items: center;
font-family: var(--ph-serif);
font-size: 16px;
font-weight: 500;
}
.mon-pharm-row__info-pn {
font-size: 14px;
font-weight: 500;
color: var(--ph-ink);
}
/* v0.70.0 · Prompt 43BC · Tarefa 4B.1 — badge da língua antes do nome. */
.mon-pharm-row__lang {
display: inline-block;
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 2px 5px;
border-radius: 4px;
vertical-align: 1px;
margin-right: 4px;
}
.mon-pharm-row__lang--pt {
background: rgba(22, 106, 142, 0.12);
color: #166A8E;
}
.mon-pharm-row__lang--es {
background: rgba(176, 134, 60, 0.14);
color: var(--mon-h-gold-2, #a07634);
}
.mon-pharm-row__info-pl {
font-size: 11px;
color: var(--ph-ink-muted);
margin-top: 2px;
}
.mon-pharm-mini { text-align: right; }
.mon-pharm-mini__l {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ph-ink-muted);
margin-bottom: 2px;
}
.mon-pharm-mini__v {
font-family: var(--ph-serif);
font-size: 14px;
font-weight: 500;
color: var(--ph-ink);
}
/* v0.36.0 · Prompt 09B item 11 — wrapper dos 4 minis. Em desktop é
transparente (display: contents) para os minis voltarem a fluir nas
colunas certas do grid 6-col da .mon-pharm-row. Em mobile (≤767px) o
wrapper vira grid 2×2 com fundo subtil para os contadores ficarem
legíveis (antes os 4 minis colapsavam todos numa só célula). */
.mon-pharm-row__stats {
display: contents;
}
/* Mobile ≤ 767px — biblioteca */
@media (max-width: 767px) {
.mon-ref-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.mon-ref-tile__image { height: 130px; padding: 10px; }
.mon-ref-tile__mark { font-size: 14px; }
.mon-materiais-grid { grid-template-columns: 1fr; }
/* Farmacias: stack em mobile */
.mon-pharm-header { display: none; }
.mon-pharm-row {
grid-template-columns: 48px 1fr;
grid-template-rows: auto auto;
row-gap: 10px;
}
.mon-pharm-row__avatar { grid-row: 1; grid-column: 1; }
.mon-pharm-row__info { grid-row: 1; grid-column: 2; }
/* v0.36.0 · Prompt 09B item 11 — wrapper de stats em grid 2×2 com fundo
subtil. Antes os 4 minis colapsavam todos no mesmo cell (overlap) e
ficavam ilegíveis. Agora cada contador tem espaço próprio. */
.mon-pharm-row__stats {
display: grid !important; /* override do display:contents do desktop */
grid-template-columns: 1fr 1fr;
gap: 6px 12px;
grid-row: 2;
grid-column: 1 / -1;
background: var(--ph-paper-tint);
border-radius: 6px;
padding: 8px 10px;
}
.mon-pharm-row .mon-pharm-mini {
text-align: left;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.mon-pharm-mini__l {
margin: 0;
font-size: 10px;
color: var(--ph-ink-faint, #6B7E8A);
letter-spacing: 0.08em;
}
.mon-pharm-mini__v {
margin: 0;
font-size: 13px;
font-family: var(--ph-sans);
font-weight: 600;
color: var(--ph-ink);
font-variant-numeric: tabular-nums;
}
}
/* =====================================================
GESTÃO · RELATÓRIOS (v0.7.0)
===================================================== */
.mon-reports-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
margin-bottom: 24px;
}
.mon-chart-card {
background: var(--ph-paper);
border: 1px solid var(--ph-line);
border-radius: 10px;
padding: 20px 22px;
}
.mon-chart-card__title {
font-family: var(--ph-serif);
font-size: 17px;
font-weight: 400;
margin: 0 0 2px;
color: var(--ph-ink);
}
.mon-chart-card__sub {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ph-ink-muted);
margin-bottom: 18px;
}
/* Bar chart (SVG) */
.mon-chart-svg-wrap {
width: 100%;
overflow-x: auto;
}
.mon-chart-svg {
width: 100%;
height: 240px;
display: block;
}
.mon-chart-legend {
display: flex;
gap: 20px;
margin-top: 10px;
padding-top: 14px;
border-top: 1px solid var(--ph-line);
font-size: 12px;
color: var(--ph-ink-soft);
flex-wrap: wrap;
}
.mon-chart-legend__sw {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 2px;
margin-right: 6px;
vertical-align: middle;
}
.mon-chart-empty {
padding: 60px 22px;
text-align: center;
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
font-size: 13px;
}
/* Donut chart */
.mon-donut-wrap {
display: grid;
grid-template-columns: 120px 1fr;
gap: 18px;
align-items: center;
}
.mon-donut-svg {
width: 120px;
height: 120px;
display: block;
}
.mon-donut-legend { display: flex; flex-direction: column; gap: 8px; }
.mon-donut-row {
display: grid;
grid-template-columns: 12px 1fr auto;
align-items: center;
gap: 10px;
font-size: 12.5px;
}
.mon-donut-row__sw {
width: 10px;
height: 10px;
border-radius: 2px;
}
.mon-donut-row__label {
font-weight: 500;
color: var(--ph-ink);
line-height: 1.2;
}
.mon-donut-row__amount {
font-family: var(--ph-sans);
font-size: 10px;
color: var(--ph-ink-muted);
letter-spacing: 0.06em;
margin-top: 2px;
}
.mon-donut-row__pct {
font-family: var(--ph-serif);
font-size: 14px;
font-weight: 500;
color: var(--ph-ink);
}
/* Tabela por comercial */
.mon-comercial-table {
background: var(--ph-paper);
border: 1px solid var(--ph-line);
border-radius: 10px;
overflow: hidden;
}
.mon-comercial-table__head {
padding: 14px 22px;
border-bottom: 1px solid var(--ph-line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.mon-comercial-table__head h3 {
font-family: var(--ph-serif);
font-size: 17px;
font-weight: 400;
margin: 0;
}
/* =====================================================
GESTÃO · FORNECEDORES (v0.7.0)
===================================================== */
/* v0.40.0 · Prompt 10C item 6 — feature card do fornecedor passa de
paper (#FAFAF7) para white explícito. O ::before mantém-se com o
radial-gradient terracota subtil. */
.mon-supplier-feature {
background: var(--ph-white);
border: 1px solid var(--ph-line);
border-radius: 12px;
padding: 28px 32px;
margin-bottom: 24px;
position: relative;
overflow: hidden;
}
.mon-supplier-feature::before {
content: '';
position: absolute;
top: -60px;
right: -60px;
width: 240px;
height: 240px;
background: radial-gradient(circle at center, var(--ph-accent-montras) 0%, transparent 70%);
opacity: 0.08;
pointer-events: none;
}
.mon-supplier-feature__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
position: relative;
z-index: 1;
}
.mon-supplier-feature__name {
font-family: var(--ph-serif);
font-size: 26px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--ph-ink);
margin-bottom: 4px;
}
.mon-supplier-feature__sub {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ph-ink-muted);
}
.mon-supplier-feature__status {
background: var(--mon-state-instalado, #3d5a3d);
color: var(--ph-white);
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 5px 11px;
border-radius: 20px;
font-weight: 500;
}
.mon-supplier-feature__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--ph-line);
position: relative;
z-index: 1;
}
.mon-supp-stat__l {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ph-ink-muted);
margin-bottom: 8px;
}
.mon-supp-stat__v {
font-family: var(--ph-serif);
font-size: 32px;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--ph-ink);
line-height: 1;
margin-bottom: 6px;
}
.mon-supp-stat__v .cur {
font-size: 16px;
color: var(--ph-ink-muted);
/* v0.71.32 · #8 — € depois do nº (NBSP no JS) · margin-right removido */
}
.mon-supp-stat__vd {
font-size: 11px;
color: var(--ph-ink-muted);
line-height: 1.4;
}
.mon-supplier-feature__contact {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
position: relative;
z-index: 1;
}
.mon-supp-contact-row { display: flex; flex-direction: column; gap: 2px; }
.mon-supp-contact-row__l {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ph-ink-muted);
}
.mon-supp-contact-row__v {
font-size: 13px;
color: var(--ph-ink);
}
/* Performance table.
v0.40.0 · Prompt 10C item 6 — wrapper passa a white. Header das colunas
mantém o paper-tint (.mon-perf-table thead th) para preservar a
hierarquia visual da tabela. */
.mon-perf-card {
background: var(--ph-white);
border: 1px solid var(--ph-line);
border-radius: 10px;
overflow: hidden;
}
.mon-perf-table {
width: 100%;
border-collapse: collapse;
}
.mon-perf-table thead th {
text-align: left;
padding: 11px 22px;
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ph-ink-muted);
font-weight: 500;
background: var(--ph-paper-tint);
border-bottom: 1px solid var(--ph-line);
}
.mon-perf-table tbody td {
padding: 12px 22px;
border-bottom: 1px solid var(--ph-line);
font-size: 13px;
vertical-align: middle;
color: var(--ph-ink);
}
.mon-perf-table tbody tr:last-child td { border-bottom: none; }
.mon-perf-bar-cell { width: 30%; min-width: 120px; }
.mon-perf-bar-bg {
height: 6px;
background: var(--ph-paper-tint);
border-radius: 3px;
overflow: hidden;
}
.mon-perf-bar-fill {
height: 100%;
background: var(--mon-state-instalado, #3d5a3d);
transition: width 0.3s var(--ph-ease);
}
.mon-perf-bar-fill--bad { background: var(--ph-accent-challenge, #B8854A); }
/* Mobile ≤ 767px — gestão */
@media (max-width: 767px) {
.mon-reports-grid { grid-template-columns: 1fr; }
.mon-donut-wrap { grid-template-columns: 1fr; justify-items: center; }
.mon-supplier-feature { padding: 20px; }
.mon-supplier-feature__grid { grid-template-columns: 1fr; gap: 18px; }
.mon-supp-stat__v { font-size: 26px; }
.mon-supplier-feature__contact { grid-template-columns: 1fr; }
.mon-perf-table thead { display: none; }
.mon-perf-table tr {
display: block;
padding: 12px 16px;
border-bottom: 1px solid var(--ph-line);
}
.mon-perf-table tr:last-child { border-bottom: none; }
.mon-perf-table td {
display: block;
padding: 3px 0;
border: 0;
}
.mon-perf-table td::before {
content: attr(data-th) ': ';
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ph-ink-muted);
margin-right: 6px;
}
.mon-perf-table td:first-child::before { content: ''; }
.mon-perf-bar-cell { width: 100%; }
}
/* =====================================================
DEFINIÇÕES (v0.8.0)
===================================================== */
.mon-settings-layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 24px;
align-items: start;
}
/* Sidebar */
.mon-settings-nav {
background: var(--ph-paper);
border: 1px solid var(--ph-line);
border-radius: 10px;
overflow: hidden;
position: sticky;
top: calc(var(--portal-topbar-h) + 110px);
}
.mon-settings-nav__header {
padding: 14px 18px;
border-bottom: 1px solid var(--ph-line);
background: var(--ph-paper-tint);
}
.mon-settings-nav__header-l {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ph-ink-muted);
}
.mon-settings-nav__item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
border: 0;
background: transparent;
width: 100%;
text-align: left;
cursor: pointer;
font-family: var(--ph-sans);
font-size: 13px;
color: var(--ph-ink-soft);
border-bottom: 1px solid var(--ph-line);
transition: background 0.15s var(--ph-ease), color 0.15s var(--ph-ease);
}
.mon-settings-nav__item:last-child { border-bottom: none; }
.mon-settings-nav__item:hover { background: var(--ph-paper-tint); color: var(--ph-ink); }
.mon-settings-nav__item.active {
background: var(--ph-paper-tint);
color: var(--ph-accent-montras);
font-weight: 500;
border-left: 3px solid var(--ph-accent-montras);
padding-left: 15px;
}
.mon-settings-nav__icon {
width: 18px;
text-align: center;
font-size: 14px;
opacity: 0.7;
}
/* Content area */
.mon-settings-content {
background: var(--ph-paper);
border: 1px solid var(--ph-line);
border-radius: 10px;
padding: 32px;
min-height: 400px;
}
.mon-settings-section { margin-bottom: 40px; }
.mon-settings-section:last-child { margin-bottom: 0; }
.mon-settings-section__title {
font-family: var(--ph-serif);
font-size: 20px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--ph-ink);
margin: 0 0 8px;
}
.mon-settings-section__desc {
font-size: 13.5px;
color: var(--ph-ink-soft);
line-height: 1.55;
margin: 0 0 22px;
}
.mon-settings-hint {
background: var(--ph-paper-tint);
border-left: 3px solid var(--ph-accent-montras);
border-radius: 6px;
padding: 12px 16px;
font-size: 12.5px;
color: var(--ph-ink-soft);
line-height: 1.55;
margin-bottom: 18px;
}
.mon-settings-hint strong { color: var(--ph-ink); font-weight: 600; }
.mon-readonly-banner {
background: rgba(184, 132, 58, 0.12);
border: 1px solid rgba(184, 132, 58, 0.35);
color: var(--ph-ink-soft);
font-size: 12.5px;
padding: 10px 14px;
border-radius: 6px;
margin-bottom: 18px;
text-align: center;
}
/* Toggle row (4 alertas + 2 canais) */
.mon-toggle-row {
display: flex;
align-items: center;
gap: 18px;
padding: 14px 0;
border-bottom: 1px solid var(--ph-line);
}
.mon-toggle-row:first-of-type { padding-top: 0; }
.mon-toggle-row:last-of-type { border-bottom: none; padding-bottom: 0; }
.mon-toggle-info { flex: 1; min-width: 0; }
.mon-toggle-info__t {
font-size: 14px;
font-weight: 500;
color: var(--ph-ink);
margin-bottom: 4px;
}
.mon-toggle-info__d {
font-size: 12.5px;
color: var(--ph-ink-muted);
line-height: 1.5;
}
.mon-toggle-switch {
flex-shrink: 0;
width: 44px;
height: 24px;
border-radius: 12px;
background: var(--ph-accent-montras);
position: relative;
cursor: pointer;
border: 0;
padding: 0;
transition: background 0.18s var(--ph-ease);
}
.mon-toggle-switch::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
background: var(--ph-white);
border-radius: 50%;
top: 3px;
right: 3px;
transition: all 0.18s var(--ph-ease);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.mon-toggle-switch.is-off { background: var(--ph-line-strong, rgba(17, 40, 51, 0.18)); }
.mon-toggle-switch.is-off::after { right: auto; left: 3px; }
.mon-toggle-switch:disabled { opacity: 0.5; cursor: not-allowed; }
/* Threshold row (CEO €) */
.mon-threshold-row {
display: flex;
align-items: center;
gap: 18px;
padding: 18px;
background: linear-gradient(135deg, rgba(145, 113, 67, 0.08), rgba(145, 113, 67, 0.02));
border: 1px solid rgba(145, 113, 67, 0.25);
border-radius: 8px;
margin-top: 16px;
}
.mon-threshold-row .mon-toggle-info__t { font-weight: 600; }
/* Input field with suffix */
.mon-input-suffix {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
width: 130px;
}
.mon-input-suffix input {
width: 100%;
text-align: right;
padding-right: 30px;
font-family: var(--ph-serif);
font-size: 18px;
font-weight: 500;
color: var(--ph-ink);
background: var(--ph-white);
border: 1px solid var(--ph-line);
border-radius: 6px;
padding: 8px 30px 8px 12px;
outline: none;
transition: border-color 0.15s var(--ph-ease);
}
.mon-input-suffix input:focus {
border-color: var(--ph-accent-montras);
}
.mon-input-suffix__label {
position: absolute;
right: 10px;
font-family: var(--ph-sans);
font-size: 14px;
color: var(--ph-ink-muted);
pointer-events: none;
}
/* Input grid 2-col + single-col groups */
.mon-input-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.mon-input-grid-2:last-of-type { margin-bottom: 0; }
.mon-input-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.mon-input-group__label {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ph-ink-muted);
font-weight: 500;
}
.mon-input-group input[type="text"],
.mon-input-group input[type="number"],
.mon-input-group input[type="email"],
.mon-input-group input[type="time"] {
font-family: var(--ph-sans);
font-size: 14px;
color: var(--ph-ink);
background: var(--ph-white);
border: 1px solid var(--ph-line);
border-radius: 6px;
padding: 9px 12px;
outline: none;
transition: border-color 0.15s var(--ph-ease);
width: 100%;
}
.mon-input-group input:focus {
border-color: var(--ph-accent-montras);
}
.mon-input-group input:disabled {
background: var(--ph-paper-tint);
color: var(--ph-ink-muted);
cursor: not-allowed;
}
.mon-input-group__desc {
font-size: 11.5px;
color: var(--ph-ink-muted);
line-height: 1.4;
margin-top: 2px;
}
.mon-input-group--error input { border-color: var(--mon-state-recusado); }
.mon-input-group__error {
font-size: 11.5px;
color: var(--mon-state-recusado);
margin-top: 2px;
}
/* Save bar (sticky bottom when dirty) */
.mon-savebar {
position: sticky;
bottom: 0;
left: 0;
right: 0;
margin: 24px -32px -32px;
padding: 14px 32px;
background: var(--ph-paper);
border-top: 1px solid var(--ph-line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
box-shadow: 0 -4px 12px -6px rgba(17, 40, 51, 0.12);
z-index: 10;
}
.mon-savebar__status {
font-size: 13px;
color: var(--ph-ink-soft);
}
.mon-savebar__status--dirty { color: var(--ph-accent-challenge, #B8854A); font-weight: 500; }
/* Fornecedores list (read-only) */
.mon-supp-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.mon-supp-list-item {
background: var(--ph-paper);
border: 1px solid var(--ph-line);
border-radius: 8px;
padding: 16px 18px;
}
.mon-supp-list-item--principal {
border-left: 3px solid var(--ph-accent-montras);
}
.mon-supp-list-item__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.mon-supp-list-item__name {
font-family: var(--ph-serif);
font-size: 17px;
font-weight: 500;
color: var(--ph-ink);
}
.mon-supp-list-item__sub {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ph-ink-muted);
margin-top: 2px;
}
.mon-supp-list-item__badge {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
background: var(--ph-accent-montras);
color: var(--ph-white);
padding: 3px 9px;
border-radius: 20px;
font-weight: 500;
}
.mon-supp-list-item__fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 24px;
font-size: 12.5px;
}
.mon-supp-list-item__field-l {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ph-ink-muted);
}
.mon-supp-list-item__field-v {
color: var(--ph-ink);
margin-top: 2px;
}
/* Mobile ≤ 767px — definições.
v0.40.0 · Prompt 10C item 7 — sidebar reescrita como tab-strip
horizontal flat. Antes era um card com border-radius 8px + items
separados por border-right — visualmente camuflado, parecia mais
um grupo de buttons que tabs navegáveis. Agora: container sem
border/background/radius, com border-bottom para colar ao conteúdo;
items sem separadores entre si; active com underline terracota 2px
+ weight 600. Sem hover state (dispositivos touch). */
@media (max-width: 767px) {
.mon-settings-layout {
grid-template-columns: 1fr;
}
.cha-portal .mon-settings-nav {
position: static;
display: flex;
overflow-x: auto;
scrollbar-width: none;
background: transparent;
border: 0;
border-bottom: 1px solid var(--ph-line);
border-radius: 0;
overflow-y: hidden;
padding: 0;
margin-bottom: 16px;
}
.cha-portal .mon-settings-nav::-webkit-scrollbar { display: none; }
.cha-portal .mon-settings-nav__header { display: none; }
.cha-portal .mon-settings-nav__item {
flex-shrink: 0;
border: 0;
border-bottom: 2px solid transparent;
background: transparent;
padding: 10px 14px;
font-size: 12px;
white-space: nowrap;
margin-bottom: -1px;
}
.cha-portal .mon-settings-nav__item:hover {
/* Sem hover state em mobile — destacar só o active. */
background: transparent;
color: var(--ph-ink-soft);
}
.cha-portal .mon-settings-nav__item.active {
background: transparent;
color: var(--ph-accent-montras);
border-left: 0;
border-bottom-color: var(--ph-accent-montras);
padding-left: 14px;
font-weight: 600;
}
.mon-settings-content { padding: 22px 18px; }
.mon-input-grid-2 { grid-template-columns: 1fr; }
.mon-supp-list-item__fields { grid-template-columns: 1fr; }
.mon-savebar { margin: 18px -18px -22px; padding: 12px 18px; flex-wrap: wrap; }
.mon-threshold-row { flex-direction: column; align-items: stretch; gap: 12px; }
.mon-input-suffix { width: 100%; }
}
/* ── Mobile ≤767px ── */
@media (max-width: 767px) {
.mon-pheader {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.mon-pheader__title { font-size: 26px; }
.mon-pheader__actions { width: 100%; flex-wrap: wrap; }
.mon-pheader__actions .mon-btn { flex: 1; justify-content: center; }
/* v0.34.0 · Prompt 08C item 1 — KPIs em grid 2×2 no mobile.
v0.57.0 · Prompt 14 — primeira KPI (Gasto em Publicidade) ocupa
largura inteira porque tem mais conteúdo (barras + valores €
por marca + delta). Tinha breakdown a ser cortado nas 2 colunas
estreitas. Restantes 3 KPIs partilham as 2 colunas abaixo. */
.mon-kpi-row {
grid-template-columns: 1fr 1fr;
}
.mon-kpi {
border-right: 1px solid var(--ph-line);
border-bottom: 1px solid var(--ph-line);
}
/* Layout final no mobile:
┌──────────────────────────┐
│ KPI 1 (Gasto · full) │ border-bottom
├────────────┬─────────────┤
│ KPI 2 │ KPI 3 │ KPI 2 border-right + bottom · KPI 3 border-bottom
├────────────┼─────────────┤
│ KPI 4 │ (vazio) │ KPI 4 sem bordas
└────────────┴─────────────┘
*/
.mon-kpi-row > .mon-kpi:first-child {
grid-column: 1 / -1;
border-right: none;
border-bottom: 1px solid var(--ph-line);
}
.mon-kpi-row > .mon-kpi:nth-child(2) {
border-right: 1px solid var(--ph-line);
border-bottom: 1px solid var(--ph-line);
}
.mon-kpi-row > .mon-kpi:nth-child(3) {
border-right: none;
border-bottom: 1px solid var(--ph-line);
}
.mon-kpi-row > .mon-kpi:nth-child(4),
.mon-kpi:last-child {
border-right: none;
border-bottom: none;
}
.mon-kpi__val { font-size: 28px; }
.mon-kpi__spend { grid-template-columns: 1fr; gap: 16px; }
.mon-kpi__breakdown { padding-left: 0; border-left: none; padding-top: 12px; border-top: 1px solid var(--ph-line); }
.mon-content-grid {
grid-template-columns: 1fr;
}
.mon-quote-row {
flex-wrap: wrap;
row-gap: 10px;
}
.mon-quote-amount { order: 3; }
.mon-quote-actions { order: 4; width: 100%; justify-content: flex-end; }
.mon-table thead { display: none; }
.mon-table, .mon-table tbody, .mon-table tr, .mon-table td { display: block; }
.mon-table tr {
padding: 12px 16px;
border-bottom: 1px solid var(--ph-line);
}
.mon-table tr:last-child { border-bottom: none; }
.mon-table td {
padding: 3px 0;
border-bottom: none;
}
.mon-table td::before {
content: attr(data-th) ': ';
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ph-ink-muted);
margin-right: 6px;
}
.mon-table td:first-child::before { content: ''; }
.mon-supplier__stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
/* v0.52.0 · Prompt 13C — atelier-subnav full-bleed em mobile com
padding lateral apertado (14px em vez de 28px desktop) · padrão
pmc-subnav mobile. Mantém sticky em mobile — se iOS Safari falhar
com 2 sticky stacked, fazer fallback para position:relative aqui.
Por agora confia no sticky (testado no Media Center). */
.cha-portal .mon-atelier-subnav {
padding-left: calc((50vw - 50%) + 14px);
padding-right: calc((50vw - 50%) + 14px);
}
}
/* =====================================================
COMERCIAL · Wizard "Novo pedido" (8 steps) + "Meus pedidos"
v0.11.0 — alinhado com o mockup do formulário mobile (docs/mockups-referencia/papillon_formulario_mobile.html)
Mantém prefix mon- para não colidir com outros plugins.
===================================================== */
/* ── Wizard shell ─────────────────────────────────────── */
.mon-wizard-wrap {
max-width: 540px;
margin: 24px auto;
padding: 0 16px;
}
.mon-wizard-card {
background: var(--ph-paper);
border: 1px solid var(--ph-line);
border-radius: var(--ph-radius-lg, 14px);
box-shadow: var(--ph-shadow-card);
overflow: hidden;
}
/* mform-head (substitui mon-wizard-header da v0.10.0) */
.mon-mform-head {
padding: 22px 22px 14px;
border-bottom: 1px solid var(--ph-line);
background: var(--ph-paper);
}
.mon-mform-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.mon-mform-cancel {
font-family: var(--ph-sans);
font-size: 10px;
color: var(--ph-ink-faint, var(--ph-ink-muted));
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
cursor: pointer;
background: transparent;
border: 0;
padding: 4px 0;
}
.mon-mform-cancel:hover { color: var(--ph-ink); }
/* v0.16.0 — banner em modo edit (mostra ref do pedido a editar) */
.mon-mform-edit-banner {
display: inline-block;
background: var(--ph-tint-montras);
color: var(--ph-accent-montras);
font-family: var(--ph-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: var(--ph-radius-pill, 100px);
margin-bottom: 10px;
}
.mon-mform-title {
font-family: var(--ph-serif);
/* v0.71.55 · Handoff 3 camada 1 — título de passo maior/mais forte (forma do
protótipo · era 24px/500). Serif Playfair · ink. */
font-weight: 600;
font-size: 27px;
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 6px;
color: var(--ph-ink);
}
.mon-mform-title em {
font-style: normal;
color: var(--ph-ink);
font-weight: 500;
}
.mon-mform-step {
font-family: var(--ph-sans);
font-size: 9.5px;
color: var(--ph-gold-deep);
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
}
/* Stepper segmentado: 8 .pseg, accent terracota para done/active */
.mon-mform-progress {
margin-top: 14px;
display: flex;
gap: 3px;
}
.mon-mform-progress .pseg {
flex: 1;
height: 3px;
background: var(--ph-line-strong);
border-radius: 2px;
transition: background 0.25s var(--ph-ease);
}
.mon-mform-progress .pseg.done {
background: var(--ph-accent-montras);
opacity: 0.6;
}
.mon-mform-progress .pseg.active {
background: var(--ph-accent-montras);
box-shadow: 0 0 0 2px var(--mon-state-design-tint);
}
/* Body + footer */
/* v0.37.0 · Prompt 09C item 13 — background branco explícito (era
transparente — herdava paper do parent). Cards interiores ficam com
contraste subtil sobre fundo branco do wizard. */
.mon-mform-body {
padding: 20px 22px 16px;
min-height: 320px;
font-family: var(--ph-sans);
color: var(--ph-ink);
background: var(--ph-white, #FFFFFF);
}
.mon-mform-actions {
position: sticky;
bottom: 0;
padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
background: linear-gradient(to top, var(--ph-paper) 70%, rgba(250, 250, 247, 0.95) 90%, transparent);
/* Prompt 36 — column para o erro de validação ficar acima da row de botões */
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
border-top: 1px solid var(--ph-line);
z-index: 5;
}
/* Prompt 36 — wrapper interno com a row dos botões Back/Next */
.mon-wiz-footer-actions {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
}
/* Prompt 36 — mensagem de erro no footer, visível sem scroll em mobile.
Mesma cor de --ph-danger que .mon-mstep-error mas com background tint
e padding para ressaltar perto do botão "Seguinte". */
.mon-wiz-footer-error {
background: rgba(160, 72, 72, 0.08);
border: 1px solid rgba(160, 72, 72, 0.35);
color: var(--ph-danger, #A04848);
border-radius: 6px;
padding: 8px 12px;
font-size: 12.5px;
font-weight: 500;
font-family: var(--ph-sans);
line-height: 1.35;
}
/* v0.27.0 · Prompt 04 — Botões wizard: 2 rectangulares equilibrados
(back ghost outline + next ink-filled + submit verde no passo 8) */
.mon-mform-btn-back {
flex-shrink: 0;
background: var(--ph-white, #FFF);
border: 1px solid var(--ph-line-strong);
color: var(--ph-ink);
border-radius: var(--ph-radius-md, 10px); /* v0.71.55 — forma do protótipo (era 6px) */
padding: 11px 18px;
height: 44px;
font-size: 13px;
font-weight: 600;
font-family: var(--ph-sans);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.15s var(--ph-ease);
}
.mon-mform-btn-back:hover {
border-color: var(--ph-ink);
}
.mon-mform-btn-back:disabled,
.mon-mform-btn-back[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.mon-mform-btn-next {
flex: 1;
background: var(--ph-ink);
color: var(--ph-paper);
border: 0;
padding: 0 18px;
height: 44px;
border-radius: var(--ph-radius-md, 10px); /* v0.71.55 — forma do protótipo (era 6px) */
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.02em;
font-family: var(--ph-sans);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: opacity 0.15s var(--ph-ease), background 0.15s var(--ph-ease);
}
.mon-mform-btn-next:hover { opacity: 0.92; }
/* Passo 8: CTA final em verde (status-pago) */
.mon-mform-btn-submit {
flex: 1;
background: var(--mon-state-instalado, #4A8E5E);
color: var(--ph-paper);
border: 0;
padding: 0 18px;
height: 44px;
border-radius: var(--ph-radius-md, 10px); /* v0.71.55 — forma do protótipo (era 6px) */
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.02em;
font-family: var(--ph-sans);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: opacity 0.15s var(--ph-ease);
}
.mon-mform-btn-submit:hover { opacity: 0.92; }
.mon-mform-btn-next:disabled,
.mon-mform-btn-next.is-disabled,
.mon-mform-btn-submit:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* ── Step generic ─────────────────────────────────────── */
.mon-mlabel {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ph-ink-soft);
font-weight: 600;
margin: 20px 0 8px;
display: flex;
align-items: center;
gap: 4px;
}
.mon-mlabel:first-child { margin-top: 4px; }
.mon-mlabel.is-required::after {
content: '*';
color: var(--ph-accent-montras);
font-size: 13px;
margin-left: 2px;
}
.mon-mlabel-helper {
font-size: 12px;
color: var(--ph-ink-soft);
margin: -4px 0 12px;
line-height: 1.5;
font-family: var(--ph-sans);
}
.mon-mstep-error {
font-size: 12px;
color: var(--ph-danger, #A04848);
margin-top: 6px;
font-weight: 500;
font-family: var(--ph-sans);
}
.mon-minput,
.mon-mselect {
width: 100%;
border: 1px solid var(--ph-line-strong);
background: var(--ph-white);
padding: 13px 14px;
border-radius: 10px;
font-family: var(--ph-sans);
font-size: 14px;
color: var(--ph-ink);
appearance: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.mon-minput:focus,
.mon-mselect:focus {
outline: none;
/* v0.71.55 · Handoff 3 camada 1 — foco a acento (terracota) + anel acento-tint
(era ink). Coerente com "interativo = terracota". */
border-color: var(--ph-accent-montras);
box-shadow: 0 0 0 3px rgba(163, 88, 70, 0.18);
}
.mon-minput::placeholder,
.mon-mselect::placeholder {
color: var(--ph-ink-faint, var(--ph-ink-muted));
font-family: var(--ph-sans);
font-size: 14px;
}
textarea.mon-minput {
min-height: 80px;
resize: vertical;
font-family: var(--ph-sans);
}
/* Step 1 · pharmacy search */
.mon-pharm-search {
position: relative;
margin-bottom: 14px;
}
.mon-pharm-search .mon-minput { padding-left: 40px; }
.mon-pharm-search::before {
content: '';
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
width: 16px; height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7E8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
background-repeat: no-repeat;
pointer-events: none;
}
.mon-pharm-dropdown {
border: 1px solid var(--ph-line-strong);
border-radius: 10px;
background: var(--ph-white);
margin-top: -2px;
overflow: hidden;
}
.mon-pharm-result {
padding: 12px 14px;
border-bottom: 1px solid var(--ph-line);
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
}
.mon-pharm-result:last-child { border-bottom: none; }
.mon-pharm-result:hover { background: var(--ph-paper-tint); }
.mon-pharm-result.is-highlight { background: var(--mon-state-design-tint); }
.mon-pharm-result .avatar-sm {
width: 32px; height: 32px;
border-radius: 8px;
background: var(--ph-paper-tint);
display: grid; place-items: center;
font-family: var(--ph-serif);
font-size: 13px;
font-weight: 500;
color: var(--ph-ink-soft);
flex-shrink: 0;
}
.mon-pharm-result .info { flex: 1; min-width: 0; }
.mon-pharm-result .pn { font-size: 13.5px; font-weight: 600; color: var(--ph-ink); }
.mon-pharm-result .pl {
font-size: 11px;
color: var(--ph-ink-faint, var(--ph-ink-muted));
margin-top: 1px;
font-family: var(--ph-sans);
letter-spacing: 0.04em;
}
.mon-pharm-result .badge {
font-family: var(--ph-sans);
font-size: 9px;
color: var(--ph-gold-deep);
background: var(--ph-paper-tint);
padding: 3px 8px;
border-radius: 20px;
letter-spacing: 0.08em;
font-weight: 600;
}
.mon-pharm-add-new {
padding: 14px;
text-align: center;
cursor: pointer;
background: var(--ph-paper-tint);
border-top: 1px dashed var(--ph-line-strong);
color: var(--ph-accent-montras);
font-family: var(--ph-sans);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 600;
}
.mon-pharm-selected {
background: linear-gradient(180deg, var(--ph-white) 0%, var(--mon-state-design-tint) 100%);
border: 1.5px solid var(--ph-accent-montras);
border-radius: 12px;
padding: 14px;
display: flex;
align-items: center;
gap: 12px;
}
.mon-pharm-selected .avatar-sm {
background: var(--ph-accent-montras);
color: var(--ph-paper);
}
.mon-pharm-selected .info { flex: 1; min-width: 0; }
.mon-pharm-selected .change {
font-family: var(--ph-sans);
font-size: 9px;
color: var(--ph-accent-montras);
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 600;
cursor: pointer;
background: transparent;
border: 0;
padding: 4px 8px;
}
/* Phone input with country prefix */
.mon-input-phone {
display: flex;
gap: 8px;
}
.mon-input-phone .country {
width: 100px;
flex-shrink: 0;
background: var(--ph-paper-tint);
text-align: center;
font-family: var(--ph-sans);
font-size: 13px;
}
/* ── Step 2 · brand cards + app grid ──────────────────── */
.mon-brand-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.mon-brand-card {
background: var(--ph-paper);
border: 1.5px solid var(--ph-line-strong);
border-radius: 14px;
padding: 20px 12px 16px;
cursor: pointer;
text-align: center;
transition: all 0.15s var(--ph-ease);
position: relative;
}
.mon-brand-card:hover { border-color: var(--ph-ink-faint, var(--ph-ink-muted)); }
.mon-brand-card.is-active {
border-color: var(--ph-accent-montras);
background: linear-gradient(180deg, var(--ph-white) 0%, var(--mon-state-design-tint) 100%);
}
.mon-brand-card.is-active--bow {
border-color: var(--mon-tag-bow-fg);
background: linear-gradient(180deg, var(--ph-white) 0%, var(--mon-tag-bow-bg) 100%);
}
/* v0.37.0 · Prompt 09C item 14 — thumbnails das marcas reduzidas (era 78px,
parecia demasiado grandes vs. resto do wizard). 62px é o tamanho-padrão
de avatar/thumbnail no design-system HUB.
v0.39.0 · Prompt 10B item 1 — passou a usar ![]()
dos SVGs oficiais.
O próprio SVG traz fundo + corners arredondados (rx 10 no viewBox),
por isso o container deixa de precisar de background/border-radius. */
.mon-brand-logo {
width: 62px;
height: 62px;
margin: 0 auto 12px;
display: grid;
place-items: center;
position: relative;
}
.mon-brand-logo__img {
width: 62px;
height: 62px;
display: block;
border-radius: 10px;
}
.mon-brand-card__name {
font-family: var(--ph-serif);
font-size: 22px;
font-weight: 500;
color: var(--ph-ink);
margin-bottom: 6px;
line-height: 1;
}
.mon-brand-card__tagline {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ph-ink-faint, var(--ph-ink-muted));
font-weight: 600;
}
.mon-brand-card.is-active .mon-brand-card__tagline { color: var(--ph-accent-montras); }
.mon-brand-card.is-active--bow .mon-brand-card__tagline { color: var(--mon-tag-bow-fg); }
/* App cards (tipo de aplicação) */
.mon-app-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.mon-app-card {
padding: 14px 12px;
border: 1px solid var(--ph-line-strong);
border-radius: 12px;
background: var(--ph-paper);
text-align: center;
cursor: pointer;
transition: all 0.15s var(--ph-ease);
}
.mon-app-card:hover { border-color: var(--ph-ink-faint, var(--ph-ink-muted)); }
.mon-app-card.is-active {
border-color: var(--ph-accent-montras);
background: linear-gradient(180deg, var(--ph-white) 0%, var(--mon-state-design-tint) 100%);
}
.mon-app-card__ic {
font-size: 24px;
margin-bottom: 6px;
display: block;
line-height: 1;
}
/* v0.71.56 · Handoff 3 camada 2 — ícone de linha (substitui emoji). Cor herda
(ink-soft normal · terracota quando selecionado pela regra .is-active). */
.cha-portal .mon-app-card__ic {
display: flex;
justify-content: center;
color: var(--ph-ink-soft);
}
.cha-portal .mon-app-card__ic svg { width: 26px; height: 26px; display: block; }
.cha-portal .mon-app-card.is-active .mon-app-card__ic { color: var(--ph-accent-montras); }
.mon-app-card__name {
font-family: var(--ph-serif);
font-size: 14.5px;
font-weight: 500;
color: var(--ph-ink);
margin-bottom: 2px;
}
.mon-app-card__desc {
font-size: 10px;
color: var(--ph-ink-faint, var(--ph-ink-muted));
line-height: 1.3;
font-family: var(--ph-sans);
}
.mon-app-card.is-active .mon-app-card__name { color: var(--ph-accent-montras); }
/* ── Step 3 · material cards ──────────────────────────── */
.mon-mat-suggestion {
background: linear-gradient(135deg, var(--ph-paper-tint) 0%, var(--ph-paper) 100%);
border: 1px solid var(--ph-line-strong);
border-left: 3px solid var(--ph-gold);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 16px;
font-size: 12.5px;
line-height: 1.55;
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
}
.mon-mat-suggestion strong { color: var(--ph-gold-deep); font-weight: 600; }
.mon-mat-suggestion .star { color: var(--ph-gold-deep); margin-right: 6px; }
.mon-mat-list { display: flex; flex-direction: column; gap: 8px; }
.mon-mat-card {
border: 1.5px solid var(--ph-line-strong);
border-radius: 12px;
padding: 12px;
cursor: pointer;
background: var(--ph-paper);
display: flex;
align-items: center;
gap: 12px;
transition: all 0.15s var(--ph-ease);
position: relative;
}
.mon-mat-card:hover { border-color: var(--ph-ink-faint, var(--ph-ink-muted)); }
.mon-mat-card.is-active {
border-color: var(--ph-accent-montras);
background: linear-gradient(180deg, var(--ph-white) 0%, var(--mon-state-design-tint) 100%);
}
.mon-mat-card.is-suggested { box-shadow: 0 0 0 1px var(--ph-gold-soft, var(--ph-gold)); }
.mon-mat-card.is-suggested::before {
content: '★';
position: absolute;
top: 8px; right: 10px;
color: var(--ph-gold-deep);
font-size: 12px;
}
.mon-mat-swatch {
width: 64px; height: 100px;
border-radius: 8px;
flex-shrink: 0;
overflow: hidden;
position: relative;
}
.mon-mat-swatch--vinil-opaco { background: linear-gradient(135deg, var(--ph-ink), var(--ph-ink-soft)); }
.mon-mat-swatch--microperfurado { background: var(--ph-ink); position: relative; }
.mon-mat-swatch--microperfurado::after {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.3) 0.8px, transparent 0.8px);
background-size: 4px 4px;
}
.mon-mat-swatch--duratran { background: linear-gradient(135deg, #F0E0C0, #D4B88A); }
.mon-mat-swatch--acrilico { background: linear-gradient(135deg, #E8E8E8, #C0C0C0); }
.mon-mat-swatch--vinil-recortado { background: linear-gradient(135deg, var(--ph-accent-montras), var(--ph-accent-montras-soft, #C46A52)); }
.mon-mat-swatch--magnetico { background: linear-gradient(135deg, #4A4A5E, #2A2A3E); }
/* Prompt 34 — variante --photo para wizard step 3 (background-image inline) */
.mon-mat-swatch--photo {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.mon-mat-info { flex: 1; min-width: 0; }
.mon-mat-info__name {
font-family: var(--ph-serif);
font-size: 15.5px;
font-weight: 500;
margin-bottom: 2px;
color: var(--ph-ink);
}
.mon-mat-info__desc {
font-size: 11.5px;
color: var(--ph-ink-soft);
line-height: 1.4;
font-family: var(--ph-sans);
}
.mon-mat-info__price {
font-family: var(--ph-mono);
font-size: 10px;
color: var(--ph-gold-deep);
letter-spacing: 0.08em;
margin-top: 4px;
font-weight: 600;
}
.mon-mat-check {
width: 22px; height: 22px;
border: 1.5px solid var(--ph-line-strong);
border-radius: 50%;
flex-shrink: 0;
display: grid;
place-items: center;
}
.mon-mat-card.is-active .mon-mat-check {
border-color: var(--ph-accent-montras);
background: var(--ph-accent-montras);
color: var(--ph-paper);
}
.mon-mat-card.is-active .mon-mat-check::after {
content: '✓';
font-size: 13px;
font-weight: 700;
}
/* ── Step 4 · surface cards + total area ──────────────── */
.mon-surf-card {
background: var(--ph-paper);
border: 1px solid var(--ph-line-strong);
border-radius: 12px;
padding: 14px;
margin-bottom: 10px;
position: relative;
}
.mon-surf-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--ph-line);
}
.mon-surf-num {
font-family: var(--ph-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ph-accent-montras);
font-weight: 700;
}
.mon-surf-remove {
background: none;
border: none;
color: var(--ph-danger, #A04848);
font-size: 10px;
cursor: pointer;
font-family: var(--ph-sans);
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
padding: 4px 8px;
}
.mon-surf-dim-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 10px;
}
.mon-surf-dim-label {
font-size: 10px;
color: var(--ph-ink-soft);
margin-bottom: 4px;
font-family: var(--ph-sans);
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
}
.mon-surf-dim-input {
width: 100%;
border: 1px solid var(--ph-line-strong);
background: var(--ph-white);
padding: 12px 14px;
border-radius: 8px;
font-family: var(--ph-sans);
font-size: 16px;
text-align: right;
color: var(--ph-ink);
font-variant-numeric: tabular-nums;
}
.mon-surf-dim-input::placeholder { color: var(--ph-ink-faint, var(--ph-ink-muted)); }
.mon-surf-dim-input:focus {
outline: none;
border-color: var(--ph-ink);
box-shadow: 0 0 0 3px rgba(17, 40, 51, 0.08);
}
.mon-surf-ident-input {
width: 100%;
border: 1px solid var(--ph-line-strong);
background: var(--ph-white);
padding: 10px 14px;
border-radius: 8px;
font-family: var(--ph-sans);
font-size: 13px;
color: var(--ph-ink);
margin-bottom: 10px;
}
.mon-surf-ident-input:focus {
outline: none;
border-color: var(--ph-ink);
box-shadow: 0 0 0 3px rgba(17, 40, 51, 0.08);
}
.mon-surf-summary {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 10px;
border-top: 1px dashed var(--ph-line);
font-size: 11.5px;
color: var(--ph-ink-soft);
}
.mon-surf-summary__area {
font-family: var(--ph-serif);
font-size: 16px;
color: var(--ph-ink);
font-weight: 500;
font-variant-numeric: lining-nums tabular-nums;
}
.mon-surf-add-btn {
width: 100%;
padding: 14px;
background: transparent;
border: 1.5px dashed var(--ph-line-strong);
border-radius: 12px;
color: var(--ph-accent-montras);
cursor: pointer;
font-family: var(--ph-sans);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
margin-top: 4px;
}
.mon-surf-add-btn:hover {
border-color: var(--ph-accent-montras);
background: var(--mon-state-design-tint);
}
.mon-surf-add-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.mon-total-area-card {
background: linear-gradient(135deg, var(--ph-ink-soft) 0%, var(--ph-ink) 100%);
color: var(--ph-paper);
border-radius: 12px;
padding: 16px;
margin-top: 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
.mon-total-area-card__label {
font-family: var(--ph-sans);
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ph-gold);
font-weight: 600;
margin-bottom: 4px;
}
.mon-total-area-card__value {
font-family: var(--ph-serif);
font-size: 26px;
font-weight: 400;
letter-spacing: -0.02em;
font-variant-numeric: lining-nums tabular-nums;
}
.mon-total-area-card__right { text-align: right; }
.mon-total-area-card__estimate {
font-family: var(--ph-serif);
font-size: 22px;
color: var(--ph-gold);
font-variant-numeric: lining-nums tabular-nums;
}
.mon-total-area-card__estimate .cur { font-size: 13px; opacity: 0.8; }
/* ── Step 5 · references gallery ──────────────────────── */
.mon-wref-search {
margin-bottom: 14px;
position: relative;
}
.mon-wref-search .mon-minput {
padding-left: 38px;
font-size: 13px;
padding-top: 10px;
padding-bottom: 10px;
}
.mon-wref-search::before {
content: '';
position: absolute;
left: 12px; top: 50%;
transform: translateY(-50%);
width: 14px; height: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7E8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
background-repeat: no-repeat;
pointer-events: none;
}
.mon-wref-filters {
display: flex;
gap: 6px;
overflow-x: auto;
padding-bottom: 6px;
margin-bottom: 14px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.mon-wref-filters::-webkit-scrollbar { display: none; }
.mon-wref-filter {
padding: 7px 14px;
background: var(--ph-paper);
border: 1px solid var(--ph-line-strong);
border-radius: 20px;
font-size: 11.5px;
color: var(--ph-ink-soft);
white-space: nowrap;
cursor: pointer;
font-family: var(--ph-sans);
}
.mon-wref-filter.is-active {
background: var(--ph-ink);
color: var(--ph-paper);
border-color: var(--ph-ink);
font-weight: 600;
}
.mon-wref-gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.mon-wref-card {
border-radius: 12px;
background: var(--ph-paper);
border: 1px solid var(--ph-line-strong);
overflow: hidden;
cursor: pointer;
position: relative;
transition: all 0.15s var(--ph-ease);
}
.mon-wref-card.is-selected {
border-color: var(--ph-accent-montras);
box-shadow: 0 0 0 2px var(--ph-accent-montras);
}
/* v0.39.0 · Prompt 10B item 7 — thumbnail das referências passa a quadrada
(era 4/5 que cortava conteúdo no eixo vertical). background-size cover
continua a preencher o quadrado sem distorção (equivalente ao
object-fit: cover de uma ![]()
). */
.mon-wref-card__image {
aspect-ratio: 1/1;
background: linear-gradient(135deg, var(--ph-accent-montras-soft, #C46A52), var(--ph-accent-montras));
position: relative;
display: grid;
place-items: center;
border-top-left-radius: 11px;
border-top-right-radius: 11px;
background-size: cover;
background-position: center;
}
/* v0.66.3 · Prompt 29 — mesmo fix que `.mon-ref-tile__image--bow`:
`background:` shorthand → `background-image:` para não resetar
size/position quando o thumbnail inline é aplicado no wizard. */
.mon-wref-card__image--bow {
background-image: linear-gradient(135deg, #3A4A6E, var(--mon-tag-bow-fg));
}
.mon-wref-card__image::before {
content: '';
position: absolute;
inset: 10px;
border: 1px dashed rgba(255,255,255,0.25);
border-radius: 3px;
pointer-events: none;
}
.mon-wref-card__mark {
font-family: var(--ph-serif);
color: var(--ph-paper);
font-size: 18px;
font-weight: 400;
position: relative;
z-index: 1;
}
.mon-wref-card__mark em {
font-style: italic;
color: rgba(255,255,255,0.7);
}
.mon-wref-card__tag {
position: absolute;
top: 6px; left: 6px;
background: rgba(17,40,51,0.55);
backdrop-filter: blur(4px);
color: var(--ph-paper);
font-family: var(--ph-sans);
font-size: 8px;
padding: 2px 7px;
border-radius: 3px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
}
.mon-wref-card__info { padding: 8px 10px; }
.mon-wref-card__name {
font-size: 11.5px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 2px;
color: var(--ph-ink);
font-family: var(--ph-sans);
}
.mon-wref-card__meta {
font-family: var(--ph-sans);
font-size: 9px;
color: var(--ph-ink-faint, var(--ph-ink-muted));
letter-spacing: 0.05em;
}
.mon-wref-card__check {
position: absolute;
top: 8px; right: 8px;
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(8px);
border: 1.5px solid rgba(255,255,255,0.6);
display: grid;
place-items: center;
opacity: 0;
transition: opacity 0.15s var(--ph-ease);
color: var(--ph-paper);
font-size: 13px;
font-weight: 700;
}
.mon-wref-card.is-selected .mon-wref-card__check {
opacity: 1;
background: var(--ph-accent-montras);
border-color: var(--ph-accent-montras);
}
.mon-wref-skip {
padding: 14px;
background: var(--ph-paper-tint);
border-radius: 10px;
text-align: center;
font-size: 12.5px;
color: var(--ph-ink-soft);
margin-top: 14px;
line-height: 1.5;
font-family: var(--ph-sans);
}
.mon-wref-skip__action {
color: var(--ph-accent-montras);
font-family: var(--ph-sans);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
font-style: normal;
font-weight: 600;
background: transparent;
border: 0;
}
.mon-wref-empty {
padding: 28px 16px;
text-align: center;
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
}
/* ── Step 6 · notes & photos (camera/gallery split) ───── */
.mon-mphoto-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 12px;
}
.mon-mphoto-btn {
padding: 18px 10px;
background: var(--ph-paper-tint);
border: 1.5px dashed var(--ph-line-strong);
border-radius: 12px;
text-align: center;
cursor: pointer;
transition: all 0.15s var(--ph-ease);
}
.mon-mphoto-btn:hover {
background: var(--mon-state-design-tint);
border-color: var(--ph-accent-montras);
}
.mon-mphoto-btn__icon {
font-size: 26px;
margin-bottom: 6px;
line-height: 1;
}
/* v0.71.57 · Passo 6 — ícones de linha câmara/galeria (substituem emoji 📷/🖼).
~28px · cor ink herda currentColor (o ponto de obturador da câmara mantém o
override fill="currentColor"). */
.cha-portal .mon-mphoto-btn__icon {
display: flex;
justify-content: center;
color: var(--ph-ink);
}
.cha-portal .mon-mphoto-btn__icon svg { width: 28px; height: 28px; display: block; }
.mon-mphoto-btn__label {
font-size: 13px;
font-weight: 600;
color: var(--ph-ink);
font-family: var(--ph-sans);
}
.mon-mphoto-btn__sub {
font-size: 9px;
color: var(--ph-ink-faint, var(--ph-ink-muted));
margin-top: 3px;
font-family: var(--ph-sans);
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 600;
}
.mon-mphoto-uploaded {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
margin-top: 12px;
}
.mon-mphoto-thumb {
aspect-ratio: 1/1;
border-radius: 8px;
background: linear-gradient(135deg, var(--ph-paper-tint), var(--ph-line-strong));
position: relative;
display: grid;
place-items: center;
overflow: hidden;
}
.mon-mphoto-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mon-mphoto-thumb__pdf {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--ph-paper-warm, var(--ph-paper-tint));
font-family: var(--ph-sans);
font-size: 10px;
color: var(--ph-accent-montras);
letter-spacing: 0.18em;
text-align: center;
padding: 6px;
}
.mon-mphoto-thumb__remove {
position: absolute;
top: 4px; right: 4px;
background: rgba(17, 40, 51, 0.65);
backdrop-filter: blur(4px);
color: var(--ph-paper);
width: 20px; height: 20px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 12px;
cursor: pointer;
border: 0;
}
.mon-mphoto-thumb.is-uploading::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,0.55);
}
/* ── Step 7 · approval / quinzena ─────────────────────── */
.mon-info-note {
font-size: 12.5px;
color: var(--ph-ink-soft);
line-height: 1.55;
padding: 12px 14px;
background: linear-gradient(180deg, var(--mon-state-design-tint) 0%, var(--ph-paper) 100%);
border-radius: 10px;
border-left: 3px solid var(--ph-accent-montras);
margin-bottom: 16px;
font-family: var(--ph-sans);
}
.mon-info-note strong { color: var(--ph-ink); font-weight: 600; }
.mon-quinzena-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.mon-qopt {
border: 1.5px solid var(--ph-line-strong);
border-radius: 12px;
padding: 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
background: var(--ph-paper);
text-align: left;
}
.mon-qopt.is-disabled {
opacity: 0.45;
cursor: not-allowed;
background: var(--ph-paper-tint);
}
.mon-qopt.is-active {
border-color: var(--ph-accent-montras);
background: linear-gradient(180deg, var(--ph-white) 0%, var(--mon-state-design-tint) 100%);
}
.mon-qopt__radio {
width: 22px; height: 22px;
border: 1.5px solid var(--ph-line-strong);
border-radius: 50%;
flex-shrink: 0;
display: grid;
place-items: center;
background: var(--ph-white);
}
.mon-qopt.is-active .mon-qopt__radio { border-color: var(--ph-accent-montras); }
.mon-qopt.is-active .mon-qopt__radio::after {
content: '';
width: 10px; height: 10px;
background: var(--ph-accent-montras);
border-radius: 50%;
}
.mon-qopt__info { flex: 1; min-width: 0; }
.mon-qopt__main {
font-family: var(--ph-serif);
font-size: 17px;
font-weight: 500;
margin-bottom: 2px;
color: var(--ph-ink);
}
.mon-qopt.is-disabled .mon-qopt__main { text-decoration: line-through; }
.mon-qopt__sub {
font-size: 11px;
color: var(--ph-ink-faint, var(--ph-ink-muted));
font-family: var(--ph-sans);
letter-spacing: 0.06em;
}
.mon-qopt__badge {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
padding: 4px 10px;
border-radius: 14px;
background: var(--ph-paper-tint);
color: var(--ph-ink-faint, var(--ph-ink-muted));
}
.mon-qopt__badge--urgent { background: var(--ph-warning, #B8854A); color: var(--ph-paper); }
.mon-qopt__badge--normal { background: var(--ph-success, #3B6D54); color: var(--ph-paper); }
.mon-approval-chips {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
}
.mon-approval-chip {
padding: 14px 8px;
border: 1.5px solid var(--ph-line-strong);
border-radius: 12px;
background: var(--ph-paper);
text-align: center;
cursor: pointer;
font-size: 12px;
line-height: 1.2;
}
.mon-approval-chip.is-active {
border-color: var(--ph-accent-montras);
background: linear-gradient(180deg, var(--ph-white) 0%, var(--mon-state-design-tint) 100%);
}
.mon-approval-chip__ic {
font-size: 20px;
margin-bottom: 6px;
display: block;
line-height: 1;
}
/* v0.71.56 · Handoff 3 camada 2 — ícone de linha (aprovação + entrega).
Cor herda · terracota quando selecionado. */
.cha-portal .mon-approval-chip__ic {
display: flex;
justify-content: center;
color: var(--ph-ink-soft);
}
.cha-portal .mon-approval-chip__ic svg { width: 24px; height: 24px; display: block; }
.cha-portal .mon-approval-chip.is-active .mon-approval-chip__ic { color: var(--ph-accent-montras); }
.mon-approval-chip__label {
font-family: var(--ph-serif);
font-weight: 500;
font-size: 14px;
color: var(--ph-ink);
margin-bottom: 3px;
}
.mon-approval-chip__sub {
font-size: 9px;
color: var(--ph-ink-faint, var(--ph-ink-muted));
font-family: var(--ph-sans);
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
}
/* Urgência chips (Normal / Urgente) */
.mon-urg-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mon-urg-chip {
padding: 10px 16px;
border: 1px solid var(--ph-line-strong);
border-radius: 30px;
font-size: 13.5px;
cursor: pointer;
background: var(--ph-paper);
color: var(--ph-ink-soft);
transition: all 0.15s var(--ph-ease);
font-family: var(--ph-sans);
/* v0.71.56 · Handoff 3 camada 2 — slot de ícone de linha (era só texto).
O ícone herda currentColor → segue a cor do chip (ink-soft normal ·
branco quando .is-active, que tem fundo ink). */
display: inline-flex;
align-items: center;
gap: 7px;
}
.cha-portal .mon-urg-chip__ic { display: flex; }
.cha-portal .mon-urg-chip__ic svg { width: 17px; height: 17px; display: block; }
.mon-urg-chip:hover { border-color: var(--ph-ink-faint, var(--ph-ink-muted)); }
.mon-urg-chip.is-active {
background: var(--ph-ink);
color: var(--ph-paper);
border-color: var(--ph-ink);
}
/* ── Step 8 · resumo (review cards) ───────────────────── */
.mon-resumo-main-card {
background: linear-gradient(135deg, var(--ph-ink-soft) 0%, var(--ph-ink) 100%);
color: var(--ph-paper);
border-radius: 12px;
padding: 16px 18px;
margin-bottom: 10px;
}
.mon-resumo-main-card__title {
font-family: var(--ph-sans);
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ph-gold);
font-weight: 700;
margin-bottom: 8px;
}
.mon-resumo-main-card__name {
font-family: var(--ph-serif);
font-size: 24px;
font-weight: 500;
margin-bottom: 4px;
line-height: 1.1;
letter-spacing: -0.01em;
}
.mon-resumo-main-card__loc {
font-size: 12.5px;
color: rgba(250, 250, 247, 0.7);
margin-bottom: 14px;
font-family: var(--ph-sans);
}
.mon-resumo-main-card__tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.mon-resumo-main-card .mon-tag {
font-family: var(--ph-sans);
font-size: 9px;
padding: 3px 8px;
border-radius: 3px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
}
.mon-resumo-card {
background: var(--ph-paper);
border: 1px solid var(--ph-line-strong);
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 10px;
}
.mon-resumo-card__title {
font-family: var(--ph-sans);
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ph-gold-deep);
font-weight: 700;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.mon-resumo-card__edit {
color: var(--ph-accent-montras);
font-size: 9px;
cursor: pointer;
font-weight: 600;
background: transparent;
border: 0;
padding: 2px 6px;
font-family: var(--ph-sans);
letter-spacing: 0.15em;
}
.mon-resumo-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 6px 0;
font-size: 13px;
gap: 12px;
font-family: var(--ph-sans);
}
.mon-resumo-row .l {
color: var(--ph-ink-faint, var(--ph-ink-muted));
font-size: 11.5px;
flex-shrink: 0;
font-family: var(--ph-sans);
letter-spacing: 0.08em;
}
.mon-resumo-row .v {
text-align: right;
font-weight: 500;
line-height: 1.3;
color: var(--ph-ink);
/* v0.39.0 · Prompt 10B item 4 — medidas longas das superfícies
(ex: identificacao + AxL_cm) saíam fora do ecrã em mobile.
min-width:0 permite que o flex item encolha; word-break/overflow-wrap
forçam a quebra dentro da própria string. */
min-width: 0;
word-break: break-word;
overflow-wrap: break-word;
max-width: 100%;
}
.mon-resumo-row--total {
border-top: 1px dashed var(--ph-line);
padding-top: 10px;
margin-top: 4px;
}
.mon-resumo-row--total .l {
font-weight: 500;
color: var(--ph-ink);
}
.mon-resumo-row--total .v {
font-family: var(--ph-serif);
font-size: 17px;
font-variant-numeric: lining-nums tabular-nums;
}
.mon-resumo-notas {
font-size: 12px;
color: var(--ph-ink-soft);
line-height: 1.5;
font-family: var(--ph-sans);
}
.mon-resumo-notas--empty {
color: var(--ph-ink-faint, var(--ph-ink-muted));
}
.mon-resumo-mini-refs {
display: flex;
gap: 6px;
margin-top: 6px;
}
.mon-resumo-mini-ref {
width: 38px;
height: 48px;
border-radius: 5px;
background: linear-gradient(135deg, var(--ph-accent-montras-soft, #C46A52), var(--ph-accent-montras));
display: grid;
place-items: center;
color: var(--ph-paper);
font-family: var(--ph-serif);
font-size: 13px;
background-size: cover;
background-position: center;
}
.mon-resumo-mini-ref--bow {
background: linear-gradient(135deg, #3A4A6E, var(--mon-tag-bow-fg));
}
/* Modal nova farmácia (mantém o pattern do mon-modal-overlay, mas com form-stack) */
.mon-form-stack {
display: flex;
flex-direction: column;
gap: 14px;
margin: 8px 0 18px;
text-align: left;
}
.mon-form-stack__field { display: flex; flex-direction: column; gap: 6px; }
.mon-form-stack__label {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ph-ink-faint, var(--ph-ink-muted));
}
.mon-form-stack__input {
font-family: var(--ph-sans);
font-size: 14px;
padding: 10px 12px;
border: 1px solid var(--ph-line-strong);
border-radius: 10px;
background: var(--ph-white);
color: var(--ph-ink);
}
.mon-form-stack__input:focus {
outline: none;
border-color: var(--ph-ink);
box-shadow: 0 0 0 3px rgba(17, 40, 51, 0.08);
}
.mon-form-stack__input.has-error {
border-color: var(--ph-danger, #A04848);
}
/* Comercial selector (admin override) */
.mon-comercial-select-wrap {
background: var(--ph-paper-tint);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 14px;
}
.mon-comercial-select-wrap .mon-mlabel { margin-top: 0; margin-bottom: 6px; }
/* ── Success overlay (post-submit) ─ Prompt 43A redesign ──
Modal 01 do handoff: cream card, círculo verde 78×78 com check SVG,
título Playfair 30px, body com "%REF%" em bold ink + tnum/lnum, par
de botões navy + outline (não stacked como em v0.39 · agora row). */
.mon-success-overlay {
position: fixed;
inset: 0;
background:
linear-gradient(rgba(21, 36, 46, 0.42), rgba(21, 36, 46, 0.42)),
repeating-linear-gradient(135deg, rgba(21, 36, 46, 0.04) 0 12px, rgba(21, 36, 46, 0) 12px 24px),
var(--mon-h-sand-2, #e4ddcd);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 16px;
}
.mon-success-overlay.is-visible {
display: flex;
animation: monFadeIn 0.3s var(--ph-ease);
}
.mon-success-card {
max-width: 460px;
width: 100%;
background: var(--mon-h-cream, #fcfaf5);
border-radius: 22px;
padding: 40px 38px 34px;
text-align: center;
box-shadow: 0 40px 80px -30px rgba(21, 36, 46, 0.55);
}
.mon-success-icon {
width: 78px;
height: 78px;
border-radius: 50%;
background: var(--mon-h-green, #3f7a52);
color: #fff;
display: grid;
place-items: center;
margin: 0 auto 22px;
}
.mon-success-icon svg { display: block; }
.mon-success-title {
font-family: var(--ph-serif);
font-size: 30px;
font-weight: 600;
color: var(--mon-h-ink, #1c2a32);
margin: 0 0 14px;
/* Algarismos tabulares para nº de pedido eventual no título */
font-feature-settings: "tnum" 1, "lnum" 1;
}
.mon-success-desc {
font-size: 15px;
line-height: 1.6;
color: var(--mon-h-muted, #5f6e74);
margin: 0 0 24px;
font-family: var(--ph-sans);
}
.mon-success-desc b { color: var(--mon-h-ink, #1c2a32); font-weight: 600; }
.mon-success-actions {
display: flex;
flex-direction: row;
gap: 12px;
}
@media (max-width: 480px) {
.mon-success-actions { flex-direction: column; }
}
.cha-portal .mon-success-actions > button {
flex: 1;
padding: 15px 20px !important;
height: auto !important;
border-radius: 11px !important;
font-family: var(--ph-sans) !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer;
transition: background 0.15s var(--ph-ease), border-color 0.15s var(--ph-ease);
border: 1px solid transparent;
}
.cha-portal .mon-success-actions > button[data-success-view] {
background: var(--mon-h-navy, #15242e);
color: #fff;
}
.cha-portal .mon-success-actions > button[data-success-view]:hover {
background: var(--mon-h-navy-2, #1d3340);
}
.cha-portal .mon-success-actions > button[data-success-new] {
background: var(--mon-h-cream, #fcfaf5);
border-color: var(--mon-h-line, #e3dbc9);
color: var(--mon-h-ink, #1c2a32);
}
.cha-portal .mon-success-actions > button[data-success-new]:hover {
border-color: var(--mon-h-gold-soft, #c9a978);
}
@keyframes monFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Meus pedidos (mantém da v0.10.0) ─────────────────── */
.mon-meus-wrap {
max-width: 720px;
margin: 24px auto;
padding: 0 16px;
}
.mon-meus-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.mon-meus-header__info {
flex: 1;
min-width: 220px;
}
.mon-meus-title {
font-family: var(--ph-serif);
font-size: 26px;
font-weight: 400;
color: var(--ph-ink);
margin: 0 0 4px;
}
.mon-meus-sub {
font-size: 12.5px;
color: var(--ph-ink-soft);
line-height: 1.5;
}
.mon-meus-filters {
display: flex;
gap: 8px;
overflow-x: auto;
margin-bottom: 16px;
scrollbar-width: none;
}
.mon-meus-filters::-webkit-scrollbar { display: none; }
.mon-meus-chip {
font-family: var(--ph-sans);
font-size: 12px;
font-weight: 500;
padding: 7px 14px;
background: var(--ph-paper);
border: 1px solid var(--ph-line-strong);
border-radius: var(--ph-radius-pill, 100px);
color: var(--ph-ink);
cursor: pointer;
white-space: nowrap;
transition: all 0.18s var(--ph-ease);
}
.mon-meus-chip:hover { border-color: var(--ph-accent-montras); }
.mon-meus-chip.is-active {
background: var(--ph-ink);
color: var(--ph-paper);
border-color: var(--ph-ink);
}
.mon-meus-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.mon-meus-card {
background: var(--ph-paper);
border: 1px solid var(--ph-line);
border-radius: var(--ph-radius-lg, 14px);
padding: 14px 16px;
cursor: pointer;
transition: all 0.18s var(--ph-ease);
}
.mon-meus-card:hover {
border-color: var(--ph-line-strong);
box-shadow: var(--ph-shadow-card);
}
.mon-meus-card__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.mon-meus-card__ref {
font-family: var(--ph-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ph-ink-faint, var(--ph-ink-muted));
}
.mon-meus-card__farm {
font-family: var(--ph-serif);
font-size: 17px;
font-weight: 400;
color: var(--ph-ink);
margin: 0 0 4px;
}
.mon-meus-card__meta {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ph-ink-faint, var(--ph-ink-muted));
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.mon-meus-card__foot {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--ph-line);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: var(--ph-ink-soft);
}
.mon-meus-card__value {
font-family: var(--ph-mono);
font-size: 12px;
letter-spacing: 0.08em;
color: var(--ph-ink);
}
.mon-meus-card__value--pending {
color: var(--ph-ink-faint, var(--ph-ink-muted));
font-style: normal;
}
.mon-meus-card.is-overdue {
border-color: var(--ph-danger, #A04848);
}
.mon-meus-card__overdue-badge {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
background: var(--ph-danger, #A04848);
color: var(--ph-paper);
padding: 3px 8px;
border-radius: 100px;
}
.mon-meus-empty {
text-align: center;
padding: 32px 24px;
background: var(--ph-paper-tint);
border-radius: var(--ph-radius-lg, 14px);
color: var(--ph-ink-soft);
}
.mon-meus-empty__title {
font-family: var(--ph-serif);
font-size: 18px;
color: var(--ph-ink);
margin: 0 0 6px;
}
/* "+ Novo pedido" no header Meus pedidos */
.mon-meus-new-btn {
background: var(--ph-accent-montras);
color: var(--ph-paper);
border: 0;
padding: 0 18px;
height: 44px;
border-radius: 22px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
font-family: var(--ph-sans);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
}
.mon-meus-new-btn:hover { background: #862E1F; }
/* ── Modal detalhe meus pedidos (mantém da v0.10.0) ───── */
.mon-detail-overlay {
position: fixed;
inset: 0;
background: rgba(17, 40, 51, 0.65);
backdrop-filter: blur(6px);
display: none;
align-items: flex-end;
justify-content: center;
z-index: 9998;
}
.mon-detail-overlay.is-visible {
display: flex;
animation: monFadeIn 0.25s var(--ph-ease);
}
.mon-detail-card {
width: 100%;
max-width: 640px;
max-height: 90vh;
background: var(--ph-paper);
border-radius: var(--ph-radius-lg, 14px) var(--ph-radius-lg, 14px) 0 0;
overflow-y: auto;
position: relative;
}
.mon-detail-head {
position: sticky;
top: 0;
background: var(--ph-paper-tint);
padding: 16px 20px;
border-bottom: 1px solid var(--ph-line);
display: flex;
justify-content: space-between;
align-items: center;
z-index: 2;
}
.mon-detail-head__title {
font-family: var(--ph-serif);
font-size: 18px;
font-weight: 400;
color: var(--ph-ink);
}
.mon-detail-head__actions {
display: flex;
align-items: center;
gap: 6px;
}
.mon-detail-head__archive {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--ph-white);
border: 1px solid var(--ph-line-strong);
border-radius: var(--ph-radius-pill, 100px);
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
padding: 6px 12px;
cursor: pointer;
transition: all 0.18s var(--ph-ease);
}
.mon-detail-head__archive:hover {
border-color: #b8454a;
color: #b8454a;
}
.mon-detail-head__archive:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.mon-detail-head__archive-ic {
font-size: 13px;
line-height: 1;
}
/* v0.14.0 — Atelier detail modal: linhas clicáveis + action bar + wide variant */
.mon-detail-card--wide {
max-width: 880px;
}
.mon-table tbody tr[data-pedido-id] {
cursor: pointer;
transition: background 0.15s var(--ph-ease);
}
.mon-table tbody tr[data-pedido-id]:hover {
background: var(--ph-paper-tint);
}
.mon-detail-actions-bar {
padding: 14px 20px;
background: var(--ph-paper-tint);
border-bottom: 1px solid var(--ph-line);
}
.mon-detail-actions-bar__row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.mon-detail-actions-bar__empty {
font-family: var(--ph-sans);
font-size: 12px;
color: var(--ph-ink-soft);
}
.mon-action-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--ph-white);
border: 1px solid var(--ph-line-strong);
border-radius: var(--ph-radius-pill, 100px);
color: var(--ph-ink);
font-family: var(--ph-sans);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.04em;
padding: 8px 16px;
cursor: pointer;
transition: all 0.18s var(--ph-ease);
}
.mon-action-btn:hover {
border-color: var(--ph-ink);
}
.mon-action-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.mon-action-btn--primary {
background: var(--ph-accent-montras);
border-color: var(--ph-accent-montras);
color: var(--ph-paper);
}
.mon-action-btn--primary:hover { opacity: 0.9; }
.mon-action-btn--secondary {
background: var(--ph-ink);
border-color: var(--ph-ink);
color: var(--ph-paper);
}
.mon-action-btn--secondary:hover { opacity: 0.9; }
.mon-action-btn--accent {
background: var(--ph-gold-deep, #917143);
border-color: var(--ph-gold-deep, #917143);
color: var(--ph-paper);
}
.mon-action-btn--accent:hover { opacity: 0.9; }
.mon-action-btn__ic {
font-size: 14px;
line-height: 1;
}
/* v0.65.4 · Prompt 21C — tabela de superfícies volta a `table-layout: auto`
(era fixed no v0.65.3) para deixar o browser calcular widths das col
a partir do conteúdo real. Sem ellipsis nas col 3 e 4 (a informação
das dimensões e área é crítica e deve aparecer toda).
Estratégia para garantir cabimento sem cortar:
- `table-layout: auto` (default) — browser distribui espaço.
- `white-space: nowrap` SELECTIVO: só em col 1 (#), col 3 (Dimensões)
e col 4 (Área) — todos curtos com valores previsíveis.
- Col 2 (Identificação) sem nowrap — pode quebrar em 2 linhas se
precisar (é texto livre, único caso onde wrap é aceitável).
- Headers compactos (font 9→8 · letter-spacing 0.16→0.14 · padding
6→4) para não esticar artificialmente as col 3/4.
- Col # com width:28px fixo (só "#N", curtíssimo).
Specificity alta `.cha-portal .mon-dcard .mon-atelier-supers` para
vencer regras posteriores no cascade. */
.cha-portal .mon-dcard .mon-atelier-supers,
.cha-portal .mon-atelier-supers {
width: 100%;
table-layout: auto;
border-collapse: collapse;
font-family: var(--ph-sans);
font-size: 12px;
overflow: hidden;
}
.cha-portal .mon-dcard .mon-atelier-supers th,
.cha-portal .mon-atelier-supers th {
font-family: var(--ph-sans);
font-size: 8px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ph-ink-muted);
padding: 8px 4px;
text-align: left;
border-bottom: 1px solid var(--ph-line);
}
.cha-portal .mon-dcard .mon-atelier-supers td,
.cha-portal .mon-atelier-supers td {
padding: 8px 4px;
border-bottom: 1px solid var(--ph-line);
color: var(--ph-ink);
word-break: normal;
}
.cha-portal .mon-dcard .mon-atelier-supers tfoot td,
.cha-portal .mon-atelier-supers tfoot td {
border-bottom: 0;
padding-top: 10px;
}
/* Col 1 (#) · 28px · "#N" curto · nowrap */
.cha-portal .mon-dcard .mon-atelier-supers th:first-child,
.cha-portal .mon-dcard .mon-atelier-supers td:first-child,
.cha-portal .mon-atelier-supers th:first-child,
.cha-portal .mon-atelier-supers td:first-child {
width: 28px;
padding-left: 0;
white-space: nowrap;
}
/* Col 3 (Dimensões) · "100 × 50 cm" · nowrap + align right (alinha com
col 4) · sem width fixa (auto) */
.cha-portal .mon-dcard .mon-atelier-supers th:nth-child(3),
.cha-portal .mon-dcard .mon-atelier-supers td:nth-child(3),
.cha-portal .mon-atelier-supers th:nth-child(3),
.cha-portal .mon-atelier-supers td:nth-child(3) {
text-align: right;
white-space: nowrap;
}
/* Col 4 (Área) · "0.50 m²" · nowrap + align right · edge direito do card */
.cha-portal .mon-dcard .mon-atelier-supers th:last-child,
.cha-portal .mon-dcard .mon-atelier-supers td:last-child,
.cha-portal .mon-atelier-supers th:last-child,
.cha-portal .mon-atelier-supers td:last-child {
padding-right: 0;
text-align: right;
white-space: nowrap;
}
/* Mobile ultra-estreito (<380px) — fallback de scroll horizontal no
wrapper da tabela. O JS renderiza só `` (sem wrapper), por
isso ajustamos a tabela em si para overflow-x: auto se necessário.
Em prática, com `table-layout: auto` + nowrap nas 3 col curtas, a
tabela cabe em viewports ≥320px. */
@media (max-width: 380px) {
.cha-portal .mon-dcard .mon-atelier-supers {
font-size: 11px;
}
.cha-portal .mon-dcard .mon-atelier-supers th {
font-size: 7px;
padding: 8px 3px;
}
.cha-portal .mon-dcard .mon-atelier-supers td {
padding: 8px 3px;
}
}
.mon-detail-orc__main {
display: flex;
flex-direction: column;
gap: 2px;
}
.mon-detail-orc__forn {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.14em;
color: var(--ph-ink-muted);
text-transform: uppercase;
}
.mon-detail-head__close {
background: transparent;
border: 0;
color: var(--ph-ink-soft);
font-size: 20px;
cursor: pointer;
padding: 4px 8px;
}
.mon-detail-body {
padding: 20px;
}
.mon-detail-section {
margin-bottom: 24px;
}
.mon-detail-section__title {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ph-accent-montras);
margin: 0 0 10px;
}
.mon-detail-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
}
.mon-detail-info__row {
display: flex;
flex-direction: column;
gap: 2px;
}
.mon-detail-info__label {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ph-ink-faint, var(--ph-ink-muted));
}
.mon-detail-info__value {
font-size: 13.5px;
color: var(--ph-ink);
}
.mon-detail-info__row--wide { grid-column: 1 / -1; }
.mon-detail-timeline {
position: relative;
padding-left: 22px;
}
.mon-detail-timeline::before {
content: '';
position: absolute;
top: 8px;
bottom: 8px;
left: 5px;
width: 1px;
background: var(--ph-line);
}
.mon-detail-tl-item {
position: relative;
padding-bottom: 14px;
}
.mon-detail-tl-item::before {
content: '';
position: absolute;
left: -22px;
top: 4px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--ph-accent-montras);
border: 2px solid var(--ph-paper);
box-shadow: 0 0 0 1px var(--ph-line);
}
.mon-detail-tl-item__state {
font-family: var(--ph-sans);
font-size: 12.5px;
font-weight: 600;
color: var(--ph-ink);
}
.mon-detail-tl-item__when {
font-family: var(--ph-mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--ph-ink-faint, var(--ph-ink-muted));
text-transform: uppercase;
margin-top: 2px;
}
.mon-detail-tl-item__nota {
font-size: 12px;
color: var(--ph-ink-soft);
margin-top: 4px;
line-height: 1.5;
}
.mon-detail-tl-item__badge {
display: inline-block;
font-family: var(--ph-sans);
font-size: 8px;
letter-spacing: 0.2em;
text-transform: uppercase;
background: var(--ph-gold-deep, #917143);
color: var(--ph-paper);
padding: 2px 6px;
border-radius: 100px;
margin-left: 6px;
vertical-align: middle;
}
.mon-detail-files {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.mon-detail-file {
aspect-ratio: 1 / 1;
border-radius: var(--ph-radius-md, 10px);
overflow: hidden;
background: var(--ph-paper-tint);
border: 1px solid var(--ph-line);
position: relative;
text-decoration: none;
color: inherit;
}
.mon-detail-file img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.mon-detail-file__pdf {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--ph-paper-warm, var(--ph-paper-tint));
font-family: var(--ph-sans);
font-size: 10px;
color: var(--ph-ink-soft);
letter-spacing: 0.18em;
text-align: center;
padding: 8px;
}
.mon-detail-orcs {
display: flex;
flex-direction: column;
gap: 8px;
}
.mon-detail-orc {
background: var(--ph-paper-tint);
border-radius: var(--ph-radius-md, 10px);
padding: 12px 14px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.mon-detail-orc__value {
font-family: var(--ph-mono);
font-size: 13px;
color: var(--ph-ink);
}
.mon-detail-orc__state {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 100px;
}
.mon-detail-orc__state--aprovado { background: var(--mon-state-instalado-tint); color: var(--ph-success, #3B6D54); }
.mon-detail-orc__state--recusado { background: var(--mon-state-recusado-tint); color: var(--ph-danger, #A04848); }
.mon-detail-orc__state--pendente { background: var(--mon-state-aprovacao-tint); color: var(--ph-warning, #B8854A); }
.mon-detail-empty {
font-size: 12.5px;
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
}
/* v0.68.2 · Prompt 41 — badge informativa no card de Acções quando o
pedido aguarda aprovação do cliente. Visual neutro (não erro) com tint
âmbar para sinalizar "à espera" sem alarmar. Aparece entre o título do
card e os botões Editar/Arquivar. */
.mon-detail-waiting {
display: flex;
align-items: flex-start;
gap: 12px;
background: var(--mon-state-aprovacao-tint, rgba(184, 133, 74, 0.10));
border: 1px solid var(--mon-state-aprovacao, rgba(184, 133, 74, 0.30));
border-radius: var(--ph-radius-md, 10px);
padding: 12px 14px;
margin-bottom: 12px;
}
.mon-detail-waiting__ic {
font-size: 18px;
line-height: 1.2;
flex-shrink: 0;
}
.mon-detail-waiting__body { flex: 1; min-width: 0; }
.mon-detail-waiting__title {
font-family: var(--ph-sans);
font-size: 13px;
font-weight: 600;
color: var(--ph-ink);
line-height: 1.3;
margin-bottom: 4px;
}
.mon-detail-waiting__sub {
font-family: var(--ph-sans);
font-size: 11.5px;
color: var(--ph-ink-soft);
line-height: 1.45;
}
/* Lista mini de superfícies dentro do modal detalhe */
.mon-detail-surf {
background: var(--ph-paper-tint);
border-radius: var(--ph-radius-md, 10px);
padding: 10px 12px;
margin-bottom: 6px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12.5px;
gap: 10px;
}
.mon-detail-surf__num {
font-family: var(--ph-mono);
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ph-accent-montras);
font-weight: 700;
margin-right: 8px;
}
.mon-detail-surf__id {
color: var(--ph-ink);
flex: 1;
min-width: 0;
}
.mon-detail-surf__dim {
font-family: var(--ph-mono);
font-size: 11px;
color: var(--ph-ink-soft);
}
/* Lista mini de referências escolhidas dentro do modal detalhe */
.mon-detail-refs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.mon-detail-ref-tile {
aspect-ratio: 4 / 5;
border-radius: var(--ph-radius-md, 10px);
overflow: hidden;
background: linear-gradient(135deg, var(--ph-accent-montras-soft, #C46A52), var(--ph-accent-montras));
background-size: cover;
background-position: center;
border: 1px solid var(--ph-line);
position: relative;
}
.mon-detail-ref-tile--bow {
background: linear-gradient(135deg, #3A4A6E, var(--mon-tag-bow-fg));
}
/* ── Responsive ───────────────────────────────────────── */
@media (min-width: 640px) {
.mon-detail-info { grid-template-columns: repeat(3, 1fr); }
.mon-detail-files { grid-template-columns: repeat(4, 1fr); }
.mon-detail-refs { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
.mon-wizard-wrap { margin: 12px auto; padding: 0 8px; }
.mon-mform-body { padding: 18px 18px 14px; min-height: 280px; }
.mon-mform-head { padding: 18px 18px 14px; }
.mon-mform-actions { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
.mon-mform-title { font-size: 22px; }
.mon-brand-cards { grid-template-columns: 1fr 1fr; }
.mon-app-grid { grid-template-columns: 1fr 1fr; }
.mon-detail-info { grid-template-columns: 1fr; }
.mon-meus-card__foot {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
}
/* v0.68.3 · Prompt 42 — wizard com menos margem em mobile pequeno.
Ecrãs ≤540px (incluindo iPhone SE 360px) perdiam 84px (23% do viewport)
só em padding lateral. Esta media query overlay reduz cada hop da cadeia
`cha-main → wizard-wrap → mform-head/body/actions/banner` para ganhar
~28px de conteúdo útil sem afectar desktop (>540px) nem mexer no
parent `cha-main` (partilhado com outros plugins). */
@media (max-width: 540px) {
.mon-wizard-wrap { padding: 0; }
.mon-mform-head { padding: 14px 12px 10px; }
.mon-mform-body { padding: 14px 12px 10px; }
.mon-mform-actions { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
.cha-portal .mon-mform-banner { padding: 10px 10px 8px; }
.mon-mform-progress { margin-top: 10px; }
}
/* =====================================================
v0.17.0/v0.17.1 · Sprint 1.2 — Ficheiros de design no Atelier
Reusa exactamente .mon-detail-file dos "Ficheiros do local"
(grid 3-col, aspect 1/1, ~150px). Apenas adiciona o botão
remove × como filho absoluto.
===================================================== */
.mon-design-file__remove {
position: absolute;
top: 4px;
right: 4px;
width: 24px;
height: 24px;
border-radius: 50%;
border: 0;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 17px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s var(--ph-ease), transform 0.15s var(--ph-ease);
z-index: 3;
font-weight: 600;
}
.mon-design-file__remove:hover {
background: var(--mon-state-recusado, #b8454a);
transform: scale(1.08);
}
.mon-design-upload-wrap {
margin-top: 14px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.mon-design-upload-hint {
font-family: var(--ph-sans);
font-size: 11.5px;
color: var(--ph-ink-soft);
line-height: 1.45;
flex: 1;
min-width: 200px;
}
/* =====================================================
v0.18.0 · Sprint 2.1 — Biblioteca · Referências · CRUD
===================================================== */
/* Tile click-cursor + hover lift */
.mon-ref-tile { cursor: pointer; }
.mon-ref-tile:hover .mon-ref-tile__image {
filter: brightness(1.05);
}
/* Variant ghost do action button (usado pelo "Guardar como referência") */
.mon-action-btn--ghost {
background: transparent;
border-color: var(--ph-line-strong);
color: var(--ph-ink-soft);
}
.mon-action-btn--ghost:hover {
border-color: var(--ph-accent-montras, #A35846);
color: var(--ph-accent-montras, #A35846);
background: var(--ph-white);
}
/* Modal de referência — card mais largo que o padrão */
.mon-ref-modal-card {
max-width: 540px;
width: 100%;
}
.mon-ref-form {
display: flex;
flex-direction: column;
gap: 18px;
margin: 20px 0 24px;
}
.mon-ref-form__row {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Dropzone preview */
.mon-ref-dropzone {
border: 1px dashed var(--ph-line-strong, rgba(17, 40, 51, 0.18));
border-radius: var(--ph-radius-md, 10px);
background: var(--ph-paper, #FAFAF7);
padding: 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
transition: border-color 0.18s var(--ph-ease, ease);
}
.mon-ref-dropzone:hover {
border-color: var(--ph-accent-montras, #A35846);
}
.mon-ref-dropzone__preview {
width: 100%;
max-width: 280px;
aspect-ratio: 4/5;
background: var(--ph-paper-tint, #F2EFE9);
background-size: cover;
background-position: center;
border-radius: var(--ph-radius-sm, 8px);
display: grid;
place-items: center;
color: var(--ph-ink-muted, rgba(17, 40, 51, 0.55));
font-family: var(--ph-mono, monospace);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.mon-ref-dropzone__preview:not([data-has-image])::before {
content: 'Sem imagem';
}
.mon-ref-dropzone__hint {
font-family: var(--ph-sans);
font-size: 11px;
color: var(--ph-ink-muted, rgba(17, 40, 51, 0.55));
}
/* Brand toggle (2 botões grandes lado a lado) */
.mon-ref-brand-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.mon-ref-brand-toggle__btn {
background: var(--ph-white, #FFF);
border: 1px solid var(--ph-line-strong, rgba(17, 40, 51, 0.18));
border-radius: var(--ph-radius-md, 10px);
padding: 12px 14px;
font-family: var(--ph-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--ph-ink-soft, #2C4858);
cursor: pointer;
transition: all 0.18s var(--ph-ease, ease);
}
.mon-ref-brand-toggle__btn:hover {
border-color: var(--ph-ink, #112833);
}
.mon-ref-brand-toggle__btn.is-active {
background: var(--ph-ink, #112833);
border-color: var(--ph-ink, #112833);
color: var(--ph-paper, #FAFAF7);
}
/* Autocomplete pedido */
.mon-ref-ac {
position: relative;
}
.mon-ref-ac__clear {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
width: 24px;
height: 24px;
display: grid;
place-items: center;
background: var(--ph-line-strong, rgba(17, 40, 51, 0.18));
color: var(--ph-paper, #FAFAF7);
border: 0;
border-radius: 50%;
font-size: 14px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.mon-ref-ac__clear:hover {
background: var(--ph-ink, #112833);
}
.mon-ref-ac__dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--ph-white, #FFF);
border: 1px solid var(--ph-line-strong, rgba(17, 40, 51, 0.18));
border-radius: var(--ph-radius-md, 10px);
box-shadow: var(--ph-shadow-md, 0 8px 24px -10px rgba(17, 40, 51, 0.15));
max-height: 280px;
overflow-y: auto;
z-index: 10;
}
.mon-ref-ac__item {
width: 100%;
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
border-bottom: 1px solid var(--ph-line, rgba(17, 40, 51, 0.08));
font-family: var(--ph-sans);
}
.mon-ref-ac__item:last-child { border-bottom: none; }
.mon-ref-ac__item:hover { background: var(--ph-paper, #FAFAF7); }
.mon-ref-ac__ref {
font-family: var(--ph-mono);
font-size: 11px;
color: var(--ph-ink);
font-weight: 600;
}
.mon-ref-ac__tag {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.12em;
padding: 2px 7px;
border-radius: 4px;
font-weight: 600;
}
.mon-ref-ac__tag--papillon {
background: var(--ph-tint-challenge, rgba(184, 133, 74, 0.12));
color: var(--ph-gold-deep, #917143);
}
.mon-ref-ac__tag--bow {
background: rgba(22, 106, 142, 0.12);
color: var(--ph-accent-media, #166A8E);
}
.mon-ref-ac__farm {
font-size: 12px;
color: var(--ph-ink-soft, #2C4858);
}
/* Action bar do modal — botão delete fica à esquerda */
.mon-ref-modal-actions {
display: flex;
gap: 10px;
align-items: center;
}
@media (max-width: 767px) {
.mon-ref-modal-card {
max-width: 100%;
margin: 16px;
}
.mon-ref-dropzone__preview {
max-width: 220px;
}
}
/* =====================================================
v0.19.0 · Sprint 2.2 — Materiais CRUD + Fornecedores CRUD
===================================================== */
/* Material swatch — variante photo (background-image) */
.mon-material-swatch--photo {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Card clicável (hover state) */
.mon-material-card {
cursor: pointer;
transition: all 0.2s var(--ph-ease, ease);
}
.mon-material-card:hover {
border-color: var(--ph-accent-montras, #A35846);
transform: translateY(-1px);
box-shadow: var(--ph-shadow-md, 0 8px 24px -10px rgba(17, 40, 51, 0.15));
}
/* Modal materiais — preview mais largo (aspect 3:2) que o de refs (aspect 4:5) */
.mon-ref-dropzone__preview--wide {
aspect-ratio: 3/2;
max-width: 360px;
}
/* Header de section com botão de acção à direita */
.mon-settings-section__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 14px;
}
/* Fornecedor item — clicável (delegação no wrapper) */
.mon-supp-list-item--clickable {
cursor: pointer;
transition: all 0.2s var(--ph-ease, ease);
}
.mon-supp-list-item--clickable:hover {
border-color: var(--ph-accent-montras, #A35846);
background: var(--ph-white, #FFF);
}
.mon-supp-list-item--principal {
border-color: var(--ph-accent-montras, #A35846);
background: linear-gradient(180deg, var(--ph-paper-tint, #F2EFE9), var(--ph-paper, #FAFAF7));
}
/* Botão estrela "marcar como principal" no header do card não-principal */
.mon-supp-list-item__set-principal {
background: transparent;
border: 1px solid var(--ph-line-strong, rgba(17, 40, 51, 0.18));
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 16px;
line-height: 1;
color: var(--ph-ink-soft, #2C4858);
cursor: pointer;
transition: all 0.18s var(--ph-ease, ease);
padding: 0;
flex-shrink: 0;
}
.mon-supp-list-item__set-principal:hover {
border-color: var(--ph-accent-montras, #A35846);
color: var(--ph-accent-montras, #A35846);
background: var(--ph-white, #FFF);
transform: scale(1.08);
}
/* Toggle "marcar como principal" no modal fornecedor */
.mon-forn-toggle {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
}
.mon-forn-toggle input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--ph-accent-montras, #A35846);
}
.mon-forn-toggle__label {
font-family: var(--ph-sans);
font-size: 13px;
font-weight: 600;
color: var(--ph-ink, #112833);
}
.mon-form-stack__hint {
font-family: var(--ph-sans);
font-size: 11.5px;
color: var(--ph-ink-muted, rgba(17, 40, 51, 0.55));
margin-top: 4px;
line-height: 1.45;
}
@media (max-width: 767px) {
.mon-settings-section__head {
flex-direction: column;
align-items: stretch;
}
.mon-ref-dropzone__preview--wide {
max-width: 100%;
}
}
/* =====================================================
v0.21.0 · Sprint 2.3 — Farmácias CRUD + search
===================================================== */
/* Row clicável (hover state) */
.mon-pharm-row--clickable {
cursor: pointer;
transition: background 0.18s var(--ph-ease, ease);
}
.mon-pharm-row--clickable:hover {
background: var(--ph-paper-tint, #F2EFE9);
}
/* Search input no header da página */
.mon-farm-search {
position: relative;
display: flex;
align-items: center;
min-width: 260px;
flex: 1;
max-width: 360px;
}
/* v0.42.0 · Prompt 11B item 8 — `.mon-farm-search__ic` agora é um SVG
inline (era emoji 🔍). currentColor herda a cor do container. */
.mon-farm-search__ic {
position: absolute;
left: 12px;
width: 14px;
height: 14px;
color: var(--ph-ink-muted, rgba(17, 40, 51, 0.55));
pointer-events: none;
display: block;
}
.mon-farm-search__input {
width: 100%;
padding: 10px 36px 10px 36px;
border: 1px solid var(--ph-line-strong, rgba(17, 40, 51, 0.18));
border-radius: var(--ph-radius-pill, 100px);
font-family: var(--ph-sans);
font-size: 13px;
background: var(--ph-white, #FFF);
color: var(--ph-ink, #112833);
transition: border-color 0.18s var(--ph-ease, ease);
}
.mon-farm-search__input::placeholder {
color: var(--ph-ink-muted, rgba(17, 40, 51, 0.55));
}
.mon-farm-search__input:focus {
outline: none;
border-color: var(--ph-accent-montras, #A35846);
}
.mon-farm-search__clear {
position: absolute;
right: 8px;
background: var(--ph-line-strong, rgba(17, 40, 51, 0.18));
border: 0;
width: 22px;
height: 22px;
border-radius: 50%;
color: var(--ph-paper, #FAFAF7);
font-size: 14px;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
padding: 0;
transition: background 0.18s var(--ph-ease, ease);
}
.mon-farm-search__clear:hover {
background: var(--ph-ink, #112833);
}
/* v0.36.0 · Prompt 09B item 12 — variante --block: search ocupa linha
inteira (full-width), sem limite max-width. Usada quando o search vive
numa linha separada acima/abaixo do header (em vez de inline com botões). */
.mon-farm-search--block {
min-width: 0;
max-width: none;
width: 100%;
margin-bottom: 18px;
}
/* Row form split (2 colunas) — para campos curtos como localidade+cp */
.mon-ref-form__split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 767px) {
.mon-farm-search {
min-width: 0;
max-width: 100%;
width: 100%;
}
.mon-ref-form__split {
grid-template-columns: 1fr;
}
}
/* =====================================================
v0.22.0 · Sprint 4 — Filtros Relatórios + period badge
===================================================== */
/* Badge do período no header (mostra a janela actual da query) */
.mon-period-badge {
display: inline-block;
padding: 8px 14px;
background: var(--ph-paper-tint, #F2EFE9);
border: 1px solid var(--ph-line, rgba(17, 40, 51, 0.08));
border-radius: var(--ph-radius-pill, 100px);
font-family: var(--ph-sans);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ph-ink-soft, #2C4858);
font-weight: 600;
}
/* Barra de filtros Relatórios — 3 grupos lado a lado */
.mon-rel-filters {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 18px;
background: var(--ph-white, #FFF);
border: 1px solid var(--ph-line, rgba(17, 40, 51, 0.08));
border-radius: var(--ph-radius-lg, 14px);
padding: 18px 20px;
margin-bottom: 24px;
}
.mon-rel-filters__group {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.mon-rel-filters__lbl {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ph-ink-muted, rgba(17, 40, 51, 0.55));
font-weight: 600;
}
.mon-rel-filters__bar {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
}
.mon-rel-filters__select {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--ph-line-strong, rgba(17, 40, 51, 0.18));
border-radius: var(--ph-radius-md, 10px);
background: var(--ph-white, #FFF);
color: var(--ph-ink, #112833);
font-family: var(--ph-sans);
font-size: 13px;
cursor: pointer;
}
.mon-rel-filters__select:focus {
outline: none;
border-color: var(--ph-accent-montras, #A35846);
}
/* Custom date range inputs */
.mon-rel-custom {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
}
.mon-rel-custom__input {
flex: 1;
min-width: 0;
padding: 8px 10px;
border: 1px solid var(--ph-line-strong, rgba(17, 40, 51, 0.18));
border-radius: var(--ph-radius-md, 10px);
background: var(--ph-white, #FFF);
color: var(--ph-ink, #112833);
font-family: var(--ph-sans);
font-size: 12px;
}
.mon-rel-custom__input:focus {
outline: none;
border-color: var(--ph-accent-montras, #A35846);
}
.mon-rel-custom__sep {
color: var(--ph-ink-muted, rgba(17, 40, 51, 0.55));
font-size: 13px;
flex-shrink: 0;
}
@media (max-width: 900px) {
.mon-rel-filters {
grid-template-columns: 1fr;
}
}
/* =====================================================
v0.26.0 · Prompt 03 — Timeline component (.mon-tl__*)
FROM → TO pills + rail vertical + ordem inversa
===================================================== */
.cha-portal .mon-tl {
margin: 20px 0;
}
.cha-portal .mon-tl__eyebrow {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ph-gold-deep, #917143);
font-weight: 700;
margin-bottom: 16px;
}
.cha-portal .mon-tl__rail {
position: relative;
padding-left: 28px;
}
/* Rail vertical com gradient (terracota no topo · fade para ink-faint) */
.cha-portal .mon-tl__rail::before {
content: '';
position: absolute;
left: 7px;
top: 8px;
bottom: 8px;
width: 1.5px;
background: linear-gradient(
180deg,
var(--ph-accent-montras, #A35846) 0%,
rgba(17, 40, 51, 0.18) 18%,
rgba(17, 40, 51, 0.18) 100%
);
}
.cha-portal .mon-tl__row {
position: relative;
padding-bottom: 22px;
}
.cha-portal .mon-tl__row:last-child { padding-bottom: 0; }
/* Dot à esquerda do row (vazio com border ink-faint por defeito) */
.cha-portal .mon-tl__row::before {
content: '';
position: absolute;
left: -28px;
top: 6px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--ph-white, #FFF);
border: 2.5px solid var(--ph-ink-faint, #6B7E8A);
box-sizing: border-box;
}
/* Dot do latest — cheio em terracota com halo */
.cha-portal .mon-tl__row--latest::before {
background: var(--ph-accent-montras, #A35846);
border-color: var(--ph-accent-montras, #A35846);
box-shadow: 0 0 0 4px rgba(163, 88, 70, 0.12);
}
/* Transition line (pills + arrow inline) */
.cha-portal .mon-tl__transition {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.cha-portal .mon-tl__arrow {
color: var(--ph-ink-faint, #6B7E8A);
font-size: 13px;
font-weight: 600;
}
/* Meta line (author + datetime) */
.cha-portal .mon-tl__meta {
font-family: var(--ph-sans);
font-size: 12.5px;
color: var(--ph-ink-soft, #2C4858);
}
.cha-portal .mon-tl__user {
color: var(--ph-ink, #112833);
font-weight: 600;
}
.cha-portal .mon-tl__sep {
color: var(--ph-ink-faint, #6B7E8A);
}
.cha-portal .mon-tl__time {
color: var(--ph-ink-faint, #6B7E8A);
font-variant-numeric: tabular-nums;
}
/* Note (voz humana — italic permitido aqui, regra do Prompt 02) */
.cha-portal .mon-tl__note {
font-family: var(--ph-serif);
font-style: italic;
font-size: 13.5px;
color: var(--ph-ink-soft, #2C4858);
margin-top: 6px;
line-height: 1.5;
}
/* ── Pills de estado (com dot interno) — usados na timeline + futuramente noutros sítios.
Reutilizam tokens --mon-state-{estado}{,-tint} já definidos no :root. ── */
.cha-portal .mon-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
padding: 4px 11px;
border-radius: 100px;
white-space: nowrap;
}
.cha-portal .mon-pill__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: 0.9;
flex-shrink: 0;
}
/* Variantes de estado (mapeiam para vars HUB já harmonizadas no v0.24.0) */
.cha-portal .mon-pill--submetido { background: var(--mon-state-submetido-tint); color: var(--mon-state-submetido); }
.cha-portal .mon-pill--design { background: var(--mon-state-design-tint); color: var(--mon-state-design); }
.cha-portal .mon-pill--aprovacao { background: var(--mon-state-aprovacao-tint); color: var(--mon-state-aprovacao); }
.cha-portal .mon-pill--orcamento { background: var(--mon-state-orcamento-tint); color: var(--mon-state-orcamento); }
.cha-portal .mon-pill--ceo { background: var(--mon-state-ceo-tint); color: var(--mon-state-ceo); }
.cha-portal .mon-pill--producao { background: var(--mon-state-producao-tint); color: var(--mon-state-producao); }
.cha-portal .mon-pill--envio { background: var(--mon-state-envio-tint); color: var(--mon-state-envio); }
.cha-portal .mon-pill--instalado { background: var(--mon-state-instalado-tint); color: var(--mon-state-instalado); }
.cha-portal .mon-pill--recusado { background: var(--mon-state-recusado-tint); color: var(--mon-state-recusado); }
.cha-portal .mon-pill--arquivado { background: rgba(107, 126, 138, 0.10); color: var(--ph-ink-faint, #6B7E8A); }
/* TAREFA 2 · Fatia 1 — sub-fases derivadas do FORNECEDOR (badge do detalhe · só
apresentação). Cores = pills de timeline (sessão .54) → coerência badge↔timeline. */
.cha-portal .mon-pill--aguarda_orcamento { background: #e2ecef; color: #3f7d92; }
.cha-portal .mon-pill--correccao_pedida { background: #f1e3ec; color: #8e4a72; }
.cha-portal .mon-pill--recebido { background: #f0e6d2; color: #9a6b2f; } /* Fatia 2 · "Por aprovar" */
.cha-portal .mon-pill--a_espera_ceo { background: #e4e7f2; color: #3b4d73; } /* Fatia 2 · 5.º batente · navy/ardósia */
.cha-portal .mon-pill--orcamento_aprovado { background: #dde7d0; color: #5f7d4e; }
/* ── Paleta da timeline (timeline-scoped · harmonização das cores da cronologia) ──
Vive SÓ dentro de .mon-tl (3 classes → vence o .cha-portal .mon-pill--
portal-wide acima por especificidade). NÃO toca nas vars partilhadas
--mon-state-* — essas alimentam badges/KPIs/botões/chips do portal inteiro,
logo ficam intactas. Cobre os selos novos do fluxo de correcção de orçamento
(recebido/correccao/ajustado) + o selo atribuido (atribuição = mostra design).
RECUSADO de propósito NÃO é redefinido aqui → herda o .mon-pill--recusado
acima (mantém #8a2f2f / #f1d8d8, inalterado).
Hex literais deliberados: paleta scoped fechada (excepção consciente à regra
"só vars --ph-*"; não promover a token partilhado). texto / fundo. */
.cha-portal .mon-tl .mon-pill--submetido { color: #6f6a5e; background: #eceae3; }
.cha-portal .mon-tl .mon-pill--atribuido { color: #5d62a0; background: #e9e9f4; }
.cha-portal .mon-tl .mon-pill--design { color: #b15538; background: #f5e2da; }
.cha-portal .mon-tl .mon-pill--orcamento { color: #3f7d92; background: #e2ecef; }
.cha-portal .mon-tl .mon-pill--recebido { color: #9a6b2f; background: #f0e6d2; }
.cha-portal .mon-tl .mon-pill--aprovado { color: #5f7d4e; background: #dde7d0; }
.cha-portal .mon-tl .mon-pill--correccao { color: #8e4a72; background: #f1e3ec; }
.cha-portal .mon-tl .mon-pill--ajustado { color: #8a7a5c; background: #efe9dc; }
/* =====================================================
Cartão de Orçamentos do detalhe (Peça A/B) — activo + aviso + histórico
Reorganização de render sobre rows existentes; nada toca --mon-state-*.
===================================================== */
.cha-portal .mon-detail-orcs--v2 .mon-orc-group { margin-bottom: 20px; }
.cha-portal .mon-detail-orcs--v2 .mon-orc-group:last-child { margin-bottom: 0; }
/* ── Bloco activo (valor corrente) ── */
.cha-portal .mon-orc-active__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cha-portal .mon-orc-active__value {
font-family: var(--ph-serif); font-size: 26px; font-weight: 600; color: var(--ph-ink);
display: inline-flex; align-items: baseline; gap: 8px; line-height: 1.1;
}
.cha-portal .mon-orc-active__prev {
font-size: 15px; font-weight: 500; color: var(--ph-ink-muted); text-decoration: line-through;
}
.cha-portal .mon-orc-active__pill { flex-shrink: 0; align-self: center; }
.cha-portal .mon-orc-active__forn { font-size: 13px; color: var(--ph-ink-soft); margin-top: 3px; }
.cha-portal .mon-orc-active__actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
/* Botões de acção do orçamento (Peça A) */
.cha-portal .mon-orc-btn {
display: inline-flex; align-items: center; gap: 7px;
padding: 11px 18px; border-radius: 10px;
font-family: var(--ph-sans); font-weight: 600; font-size: 14px;
cursor: pointer; border: 1px solid transparent;
transition: background var(--ph-duration) var(--ph-ease), filter var(--ph-duration) var(--ph-ease);
}
.cha-portal .mon-orc-btn__ic { width: 16px; height: 16px; display: inline-flex; }
.cha-portal .mon-orc-btn__ic svg { width: 100%; height: 100%; }
.cha-portal .mon-orc-btn--edit { background: #fff; border-color: #d6cfbf; color: var(--ph-ink); }
.cha-portal .mon-orc-btn--edit:hover { background: var(--ph-paper-tint); }
.cha-portal .mon-orc-btn--reopen { background: #b15538; color: #fff; }
.cha-portal .mon-orc-btn--reopen:hover { filter: brightness(0.94); }
.cha-portal .mon-orc-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.cha-portal .mon-orc-btn--edit[disabled]:hover { background: #fff; }
.cha-portal .mon-orc-btn--reopen[disabled]:hover { background: #b15538; filter: none; }
/* ── Aviso de correcção pendente ── */
.cha-portal .mon-orc-alert {
margin-top: 14px; padding: 14px 16px; border-radius: 12px;
background: #f1e3ec; border: 1px solid rgba(142, 74, 114, 0.25);
}
.cha-portal .mon-orc-alert__msg {
font-family: var(--ph-sans); font-size: 14px; font-weight: 600; color: #8e4a72;
}
.cha-portal .mon-orc-alert__actions { display: flex; gap: 10px; margin-top: 12px; justify-content: flex-end; }
/* ═══ Fatia 2 · PASSO 2/3 — selo do canto (fase viva) + caixa âmbar + substituído ═══ */
/* Selo do canto: maior que o pill de listagem · cor vem de .mon-pill--{cls}. */
.cha-portal .mon-orc-card__selo {
flex-shrink: 0; align-self: center;
padding: 7px 16px; border-radius: 999px;
font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}
.cha-portal .mon-orc-active__value { font-size: 30px; } /* herói mais forte */
.cha-portal .mon-orc-active__suf { font-size: 13px; font-weight: 400; color: var(--ph-ink-muted); letter-spacing: 0; }
/* Editar/Reabrir esvanecidos+inactivos durante correcção (handoff). */
.cha-portal .mon-orc-active__actions--off { opacity: 0.4; pointer-events: none; }
/* Caixa âmbar (contentor de "pendente") — substitui o roxo/rosa. SEM badge lá dentro. */
.cha-portal .mon-orc-amber {
margin-top: 14px; padding: 14px 16px; border-radius: 12px;
background: #fbf4e4; border: 1px solid #ecd9b8;
}
.cha-portal .mon-orc-amber__msg { font-family: var(--ph-sans); font-size: 14.5px; line-height: 1.5; color: #7a6535; }
.cha-portal .mon-orc-amber__obs-label { font-family: var(--ph-sans); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #9c7b46; margin-bottom: 4px; }
.cha-portal .mon-orc-amber__obs { font-family: var(--ph-serif); font-style: italic; font-size: 15px; line-height: 1.45; color: #6b5f48; }
.cha-portal .mon-orc-amber__ceo { font-size: 13px; font-weight: 600; color: #8a5a2e; margin-top: 10px; }
.cha-portal .mon-orc-amber__warn { font-size: 12.5px; color: #7a6535; opacity: 0.92; margin-top: 8px; }
.cha-portal .mon-orc-amber__actions { display: flex; gap: 10px; margin-top: 12px; justify-content: flex-end; flex-wrap: wrap; }
.cha-portal .mon-amber-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 18px; border-radius: 10px;
font-family: var(--ph-sans); font-weight: 600; font-size: 14px; cursor: pointer;
background: #fff; border: 1px solid #e0cf9f; color: #7a6535;
transition: background var(--ph-duration) var(--ph-ease), filter var(--ph-duration) var(--ph-ease);
}
.cha-portal .mon-amber-btn:hover { background: #fdf8ec; }
.cha-portal .mon-amber-btn--approve { background: #5f7d4e; border-color: #5f7d4e; color: #fff; }
.cha-portal .mon-amber-btn--approve:hover { filter: brightness(0.95); }
/* Histórico: selo SUBSTITUÍDO (cinza neutro). */
.cha-portal .mon-pill--substituido { background: #ece9e1; color: #8a8478; }
/* ico-edit.svg (handoff) — tamanho no selo AJUSTADO da tabela (~13px); no botão usa .mon-orc-btn__ic (16px). */
.mon-ajustado-seal .mon-ico-edit { width: 13px; height: 13px; vertical-align: -2px; }
/* ── Histórico colapsável ── */
.cha-portal .mon-orc-hist { margin-top: 16px; border-top: 1px solid var(--ph-line); padding-top: 10px; }
.cha-portal .mon-orc-hist__header {
display: flex; align-items: center; gap: 8px; width: 100%;
background: none; border: 0; padding: 6px 0; cursor: pointer;
font-family: var(--ph-sans); font-size: 11px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--ph-ink-soft);
}
.cha-portal .mon-orc-hist__chevron {
width: 14px; height: 14px; display: inline-flex; color: #b15538;
transition: transform var(--ph-duration) var(--ph-ease);
}
.cha-portal .mon-orc-hist__chevron svg { width: 100%; height: 100%; }
.cha-portal .mon-orc-hist.is-open .mon-orc-hist__chevron { transform: rotate(90deg); }
.cha-portal .mon-orc-hist__title { flex: 0 0 auto; }
.cha-portal .mon-orc-hist__count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px;
background: var(--ph-paper-tint); color: var(--ph-ink-soft);
font-size: 11px; font-weight: 700; letter-spacing: 0;
}
.cha-portal .mon-orc-hist__list { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
/* o atributo [hidden] tem de vencer o display:flex acima (fechado por defeito) */
.cha-portal .mon-orc-hist__list[hidden] { display: none; }
.cha-portal .mon-orc-hist__item {
display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px;
padding: 10px 12px; border-radius: 10px; background: var(--ph-paper-tint);
}
.cha-portal .mon-orc-hist__left { display: flex; align-items: baseline; gap: 10px; }
.cha-portal .mon-orc-hist__val { font-family: var(--ph-serif); font-size: 16px; font-weight: 600; color: var(--ph-ink); }
.cha-portal .mon-orc-hist__date { font-size: 12px; color: var(--ph-ink-muted); }
.cha-portal .mon-orc-hist__obs {
grid-column: 1 / -1; font-family: var(--ph-serif); font-style: italic;
font-size: 13px; color: var(--ph-ink-soft); margin-top: 2px;
}
/* Pills terminais do histórico — card-scoped + esbatidos (mesma identidade de cor
da timeline; só o topo se lê como "o que vale agora"). Hex literais deliberados;
NÃO toca --mon-state-*. AJUSTADO não existe portal-wide → criado aqui. */
.cha-portal .mon-orc-hist .mon-pill { font-size: 9px; opacity: 0.72; }
.cha-portal .mon-orc-hist .mon-pill--aprovado { color: #5f7d4e; background: #dde7d0; }
.cha-portal .mon-orc-hist .mon-pill--recusado { color: #8a2f2f; background: #f1d8d8; }
.cha-portal .mon-orc-hist .mon-pill--ajustado { color: #8a7a5c; background: #efe9dc; }
/* Tijolo 3b — aviso "à espera do fornecedor" (correcção pedida, ainda não recebida).
Tom âmbar/dourado, distinto do aviso "recebida" (rosa/correção). */
.cha-portal .mon-orc-alert--waiting { background: #f3ecdd; border-color: rgba(184, 132, 58, 0.30); }
.cha-portal .mon-orc-alert--waiting .mon-orc-alert__msg { color: #8a6a2e; }
/* Tijolo 3b — modal de pré-visualização do email do ↻ */
.cha-portal .mon-reabrir-overlay,
.mon-reabrir-overlay {
position: fixed; inset: 0; z-index: 10000;
background: rgba(17, 40, 51, 0.45);
display: none; align-items: center; justify-content: center;
padding: 20px;
}
.mon-reabrir__card {
width: 100%; max-width: 560px; min-width: 0; max-height: 88vh; overflow-y: auto;
background: var(--ph-white, #fff); border-radius: 16px;
box-shadow: 0 30px 60px -20px rgba(17,40,51,0.35);
padding: 22px 22px 18px;
}
.mon-reabrir__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mon-reabrir__title { font-family: var(--ph-serif, 'Playfair Display', serif); font-size: 19px; font-weight: 600; color: var(--ph-ink); }
.mon-reabrir__x { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--ph-ink-muted); cursor: pointer; padding: 0 4px; }
.mon-reabrir__meta { border: 1px solid var(--ph-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.mon-reabrir__row { display: flex; gap: 8px; padding: 3px 0; font-size: 13px; line-height: 1.4; }
.mon-reabrir__lbl { flex: 0 0 110px; font-family: var(--ph-sans); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ph-ink-muted); padding-top: 2px; }
.mon-reabrir__val { color: var(--ph-ink); word-break: break-word; }
.mon-reabrir__link { color: #b15538; word-break: break-all; text-decoration: underline; font-size: 12px; }
.mon-reabrir__preview {
border: 1px solid var(--ph-line); border-radius: 10px; padding: 8px;
max-height: 42vh; overflow-x: hidden; overflow-y: auto; background: var(--ph-paper, #FAFAF7); margin-bottom: 12px;
}
.mon-reabrir__preview img { max-width: 100%; height: auto; }
/* Canvas de largura nativa do email; o factor de zoom é aplicado por JS
(monFitReabrirPreview) para caber na largura real do preview em qualquer ecrã. */
.mon-reabrir__scale { width: max-content; transform-origin: top left; }
.mon-reabrir__err { color: #8a2f2f; background: #f1d8d8; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 10px; }
.mon-reabrir__actions { display: flex; gap: 10px; justify-content: flex-end; }
.mon-reabrir__actions .mon-orc-btn--reopen { padding: 11px 18px; border-radius: 10px; font-weight: 600; font-size: 14px; border: 0; cursor: pointer; }
.mon-reabrir__actions .mon-orc-btn--reopen[disabled] { opacity: 0.5; cursor: not-allowed; }
/* =====================================================
v0.27.0 · Prompt 04 — Wizard mobile redesign
===================================================== */
/* ── Alt 1 · Banner persistente no topo do wizard ── */
.cha-portal .mon-mform-banner {
padding: 14px 14px 12px;
display: flex;
gap: 10px;
align-items: flex-start;
border-bottom: 1px solid var(--ph-line);
}
.cha-portal .mon-mform-banner__thumb {
width: 40px;
height: 40px;
border-radius: 8px;
display: grid;
place-items: center;
flex-shrink: 0;
font-family: var(--ph-serif);
font-size: 18px;
font-weight: 500;
line-height: 1;
}
.cha-portal .mon-mform-banner__thumb--placeholder {
background: var(--mon-tag-pm-bg, #F2E6DF);
border: 1px solid var(--ph-accent-montras);
color: var(--ph-accent-montras);
}
.cha-portal .mon-mform-banner__thumb--farmacia {
background: var(--ph-accent-montras);
color: var(--ph-paper, #FAFAF7);
}
.cha-portal .mon-mform-banner__thumb--papillon {
background: var(--mon-tag-pm-bg, #F2E6DF);
color: var(--ph-accent-montras);
font-size: 13px;
}
.cha-portal .mon-mform-banner__thumb--bow {
background: var(--mon-tag-bow-bg, #dde1ec);
color: var(--mon-tag-bow-fg, #1e2a4a);
font-size: 13px;
}
.cha-portal .mon-mform-banner__thumb em {
font-style: italic;
opacity: 0.7;
}
/* v0.41.0 · Prompt 11A item 11 — variante para SVG da marca escolhida.
O próprio SVG traz background+corners (papillon navy / bow teal /
papillon_bow split-diagonal), por isso o container deixa de precisar
de background/border. */
.cha-portal .mon-mform-banner__thumb--brand {
background: transparent;
padding: 0;
overflow: hidden;
}
.cha-portal .mon-mform-banner__thumb--brand img {
width: 40px;
height: 40px;
display: block;
border-radius: 8px;
}
.cha-portal .mon-mform-banner__body {
flex: 1;
min-width: 0;
}
.cha-portal .mon-mform-banner__eyebrow {
font-family: var(--ph-sans);
font-size: 8px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ph-gold-deep, #917143);
font-weight: 700;
}
.cha-portal .mon-mform-banner__title {
font-family: var(--ph-serif);
font-size: 16px;
color: var(--ph-ink);
font-weight: 500;
line-height: 1.15;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cha-portal .mon-mform-banner__meta {
font-family: var(--ph-sans);
font-size: 10px;
color: var(--ph-ink-faint, #6B7E8A);
margin-top: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.02em;
}
.cha-portal .mon-mform-banner__close {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--ph-line-strong);
background: transparent;
display: grid;
place-items: center;
font-size: 16px;
line-height: 1;
color: var(--ph-ink-soft);
flex-shrink: 0;
cursor: pointer;
font-family: var(--ph-sans);
padding: 0;
transition: all 0.15s var(--ph-ease, ease);
}
.cha-portal .mon-mform-banner__close:hover {
border-color: var(--ph-ink);
color: var(--ph-ink);
}
/* ── Alt 2 · Progresso numerado (dots + connectors + label active) ── */
.cha-portal .mon-mform-progress {
padding: 14px 14px 4px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2px;
}
.cha-portal .mon-mform-dot {
width: 18px;
height: 18px;
border-radius: 50%;
display: grid;
place-items: center;
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
flex-shrink: 0;
line-height: 1;
transition: all 0.18s var(--ph-ease, ease);
}
.cha-portal .mon-mform-dot--done {
background: var(--ph-ink);
color: var(--ph-paper, #FAFAF7);
}
.cha-portal .mon-mform-dot--active {
width: 22px;
height: 22px;
background: var(--ph-ink);
color: var(--ph-paper, #FAFAF7);
font-size: 10px;
transform: scale(1.1);
}
.cha-portal .mon-mform-dot--future {
background: var(--ph-paper, #FAFAF7);
border: 1px solid var(--ph-line-strong);
color: var(--ph-ink-faint, #6B7E8A);
}
.cha-portal .mon-mform-connector {
flex: 1;
height: 1px;
min-width: 4px;
}
.cha-portal .mon-mform-connector--done { background: var(--ph-ink); }
.cha-portal .mon-mform-connector--future { background: var(--ph-line-strong); }
.cha-portal .mon-mform-progress-label {
text-align: center;
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
/* v0.71.55 · Handoff 3 camada 1 — rótulo do stepper a gold-deep (convenção
viva de eyebrow · era ink). Terracota fica só p/ interativo/selecionado. */
color: var(--ph-gold-deep);
font-weight: 700;
padding: 4px 0 14px;
}
/* ── Alt 5 · Focus-ring + valid/invalid nos inputs ── */
.cha-portal .mon-minput:focus,
.cha-portal .mon-mselect:focus,
.cha-portal textarea.mon-minput:focus {
/* v0.71.55 · Handoff 3 camada 1 — foco a acento (terracota) + anel acento-tint */
border-color: var(--ph-accent-montras);
outline: none;
box-shadow: 0 0 0 3px rgba(163, 88, 70, 0.18);
}
.cha-portal .mon-minput.is-valid,
.cha-portal .mon-mselect.is-valid {
border-color: var(--mon-state-instalado, #4A8E5E);
background: linear-gradient(135deg, var(--ph-white, #FFF) 0%, rgba(74, 142, 94, 0.04) 100%);
}
.cha-portal .mon-minput.is-invalid,
.cha-portal .mon-mselect.is-invalid {
border-color: var(--mon-state-recusado, #B85555);
background: linear-gradient(135deg, var(--ph-white, #FFF) 0%, rgba(184, 85, 85, 0.04) 100%);
}
/* ── Alt 6 · Resumo passo 8 — dots OK/warn nos headers ── */
.cha-portal .mon-resumo-group__icon {
width: 14px;
height: 14px;
border-radius: 50%;
display: inline-grid;
place-items: center;
font-size: 8px;
font-weight: 700;
line-height: 1;
margin-left: 8px;
vertical-align: middle;
}
.cha-portal .mon-resumo-group__icon--ok {
background: rgba(74, 142, 94, 0.18);
color: var(--mon-state-instalado, #4A8E5E);
}
.cha-portal .mon-resumo-group__icon--warn {
background: rgba(201, 123, 63, 0.16);
color: var(--mon-state-aprovacao, #C97B3F);
}
/* Área total inline ao lado de "N superfícies" */
.cha-portal .mon-resumo-card__area {
font-family: var(--ph-sans);
font-size: 11px;
color: var(--ph-ink-soft);
font-variant-numeric: tabular-nums;
margin-left: 6px;
font-weight: 500;
}
/* =====================================================
v0.28.0 · Prompt 05 — Listagem de pedidos redesenhada
===================================================== */
/* v0.65.0 · Prompt 19 — Header dos Pedidos migrou para o padrão
`.mon-pheader` (igual ao Painel/Aprovações/Orçamentos/Calendário).
As regras antigas que estavam aqui (.mon-pedidos-header / __left /
__title / __count / __new + :hover) foram removidas. Os estilos
estão no bloco `.mon-pheader*` no topo do ficheiro (linhas 374-419).
Migração JS em montras-portal.js linha ~1715. */
/* ── Alt 2 · Search bar ── */
/* v0.65.1 · Prompt 20 — padding lateral 14→0 (os 16px do `.cha-main`
parent são suficientes · search alinha com o resto do conteúdo). */
/* v0.65.8 · Prompt 25 — `padding` → `margin` para que o wrapper tenha
exactamente a altura do input (38px). Antes, com padding 4px top + 10px
bottom, o wrapper tinha 52px e o `top: 50%` do ícone centrava em 26px
(3px abaixo do centro real do input em 23px). Mover para margin
preserva o espaçamento vertical e deixa o ícone centrar naturalmente. */
.cha-portal .mon-pedidos-search {
position: relative;
padding: 0;
margin: 4px 0 10px;
}
/* v0.65.1 · Prompt 20 — `left: 28px` → `14px`. Antes o container tinha
`padding: 4px 14px 10px` e o ícone precisava de 14px (padding) + 14px
(offset dentro do input) = 28px. Agora com `padding lateral 0` no
container, o ícone só precisa de 14px (offset directo dentro do input).
`display: block` defensivo contra subpixel render issues em iOS Safari. */
.cha-portal .mon-pedidos-search__icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
/* v0.65.9 · Prompt 26 — 14→16px (lupa mais visível). */
width: 16px;
height: 16px;
color: var(--ph-ink-muted);
pointer-events: none;
display: block;
}
/* v0.37.0 · Prompt 09C item 6 — alinhamento inicial ao padrão de search.
v0.43.0 · Prompt 11C item 3 — radius pill → radius-sm.
v0.44.0 — config CSS exacta do Media Center conforme spec do user
(height fixo 38px sem padding vertical · padding 0 14 0 38 ·
font-size 12.5 · outline none explicit). */
.cha-portal .mon-pedidos-search__input {
width: 100%;
height: 38px;
padding: 0 14px 0 38px;
border: 1px solid var(--ph-line-strong);
border-radius: var(--ph-radius-sm);
background: var(--ph-white);
font-family: var(--ph-sans);
font-size: 12.5px;
color: var(--ph-ink);
outline: none;
transition: border-color 0.18s var(--ph-ease);
}
.cha-portal .mon-pedidos-search__input:focus {
outline: none;
border-color: var(--ph-accent-montras);
}
.cha-portal .mon-pedidos-search__input::placeholder {
color: var(--ph-ink-muted);
font-style: normal;
}
.cha-portal .mon-pedidos-search__clear {
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
border: 0;
background: var(--ph-line-strong);
color: var(--ph-paper);
font-size: 13px;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
padding: 0;
}
/* ── Alt 3 · 3 dropdowns ── */
.cha-portal .mon-pedidos-filters {
position: relative;
padding: 0 14px 12px;
display: flex;
gap: 6px;
}
.cha-portal .mon-pedidos-filter {
flex: 1;
min-width: 0;
background: var(--ph-white, #FFF);
border: 1px solid var(--ph-line-strong);
border-radius: 100px;
padding: 8px 10px;
font-family: var(--ph-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--ph-ink);
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
cursor: pointer;
transition: border-color 0.15s var(--ph-ease, ease);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
}
.cha-portal .mon-pedidos-filter:hover { border-color: var(--ph-ink); }
.cha-portal .mon-pedidos-filter--active {
border-color: var(--ph-accent-montras);
color: var(--ph-accent-montras);
}
.cha-portal .mon-pedidos-filter__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ph-ink-faint, #6B7E8A);
flex-shrink: 0;
}
.cha-portal .mon-pedidos-filter__icon {
font-size: 14px;
line-height: 1;
}
.cha-portal .mon-pedidos-filter__svg {
flex-shrink: 0;
color: var(--ph-ink-soft);
}
.cha-portal .mon-pedidos-filter__chevron {
color: var(--ph-ink-faint, #6B7E8A);
font-size: 8px;
margin-left: 2px;
}
.cha-portal .mon-pedidos-filter__badge {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ph-accent-montras);
position: absolute;
top: 4px;
right: 8px;
}
/* Dropdown panels */
.cha-portal .mon-pedidos-dropdown {
position: absolute;
top: calc(100% - 4px);
left: 14px;
right: 14px;
background: var(--ph-white, #FFF);
border: 1px solid var(--ph-line-strong);
border-radius: 12px;
box-shadow: var(--ph-shadow-md, 0 8px 24px -10px rgba(17, 40, 51, 0.15));
padding: 6px;
z-index: 50;
max-height: 60vh;
overflow-y: auto;
}
.cha-portal .mon-pedidos-dropdown--wide { padding: 12px; }
.cha-portal .mon-pedidos-dropdown__item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border: 0;
background: transparent;
cursor: pointer;
border-radius: 8px;
font-family: var(--ph-sans);
text-align: left;
}
.cha-portal .mon-pedidos-dropdown__item:hover { background: var(--ph-paper-tint); }
.cha-portal .mon-pedidos-dropdown__item.is-selected {
background: rgba(163, 88, 70, 0.06);
}
.cha-portal .mon-pedidos-dropdown__text {
font-size: 13px;
color: var(--ph-ink);
font-weight: 500;
}
.cha-portal .mon-pedidos-dropdown__count {
font-family: var(--ph-mono);
font-size: 11px;
color: var(--ph-ink-faint, #6B7E8A);
}
.cha-portal .mon-pedidos-dropdown__group {
margin-bottom: 14px;
}
.cha-portal .mon-pedidos-dropdown__group:last-of-type { margin-bottom: 8px; }
.cha-portal .mon-pedidos-dropdown__group-lbl {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ph-gold-deep, #917143);
font-weight: 700;
margin-bottom: 6px;
}
.cha-portal .mon-pedidos-dropdown__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.cha-portal .mon-pedidos-dropdown__chip {
padding: 6px 12px;
border: 1px solid var(--ph-line-strong);
background: var(--ph-white, #FFF);
border-radius: 100px;
font-family: var(--ph-sans);
font-size: 11px;
color: var(--ph-ink);
cursor: pointer;
}
.cha-portal .mon-pedidos-dropdown__chip.is-selected {
background: var(--ph-ink);
border-color: var(--ph-ink);
color: var(--ph-paper);
}
.cha-portal .mon-pedidos-dropdown__select {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--ph-line-strong);
border-radius: 6px;
background: var(--ph-white, #FFF);
font-family: var(--ph-sans);
font-size: 12px;
color: var(--ph-ink);
}
.cha-portal .mon-pedidos-dropdown__footer {
margin-top: 8px;
padding-top: 12px;
border-top: 1px solid var(--ph-line);
}
.cha-portal .mon-pedidos-dropdown__export {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 12px;
border: 1px solid var(--ph-line-strong);
background: var(--ph-white, #FFF);
border-radius: 6px;
font-family: var(--ph-sans);
font-size: 11.5px;
font-weight: 600;
color: var(--ph-ink);
cursor: pointer;
}
.cha-portal .mon-pedidos-dropdown__export:hover { border-color: var(--ph-ink); }
/* ── Alt 4+5 · Cards horizontais ── */
/* v0.65.1 · Prompt 20 — padding lateral 14→0 (os 16px do `.cha-main`
chegam · cards alinham com header/search/toolbar). Bottom mantém 14px. */
.cha-portal .mon-pedidos-list {
padding: 0 0 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
/* v0.65.1 · Prompt 20 — margin lateral 14→0 (alinha com cards e o
resto do conteúdo); padding interno 28 14 mantido (look). */
.cha-portal .mon-pedidos-empty {
padding: 28px 14px;
text-align: center;
font-size: 13px;
color: var(--ph-ink-soft);
font-family: var(--ph-sans);
margin: 0 0 14px;
background: var(--ph-paper-tint);
border-radius: 10px;
}
/* v0.64.0 · Prompt 18C — stripe lateral implementada como `border-left`
directo no card (padrão Challenge `.cha-sub-card`), em vez de elemento
filho `position: absolute`. O `border-radius: 10px` do card faz a
curvatura automaticamente, sem hacks de cascade nem !important.
`data-estado` é adicionado pelo JS em :2354 (montras-portal.js) e
cada estado mapeia a sua cor via attribute selector abaixo.
v0.64.1 · Prompt 18D — alinhamento total com `.cha-sub-card`:
- `border: none` em 3 lados (eram 1px solid · agora só border-left)
- `box-shadow` permanente (era só no hover) · dá o contorno subtil
em vez de border de 1px
- `overflow: visible` (era hidden) · permite a curvatura ir até ao
fim do border-left sem cortar a meio. O conteúdo interno não
precisa de clip · todos os filhos cabem dentro dos limites. */
.cha-portal .mon-pedido-card {
background: var(--ph-white, #FFF);
border: none;
border-left: 3px solid var(--ph-line-strong); /* default neutro; estado sobrepõe abaixo */
border-radius: 10px;
box-shadow: var(--ph-shadow-sm, 0 2px 8px -2px rgba(17, 40, 51, 0.08));
padding: 12px 12px 12px 13px; /* +1px top/bottom para compensar o border 1px removido · 13px left mantém alinhamento visual com o border-left de 3px */
position: relative;
overflow: visible;
cursor: pointer;
transition: border-left-color 0.15s var(--ph-ease, ease), box-shadow 0.15s var(--ph-ease, ease), transform 0.1s var(--ph-ease, ease);
}
.cha-portal .mon-pedido-card:hover {
box-shadow: var(--ph-shadow-md, 0 8px 24px -10px rgba(17, 40, 51, 0.15));
}
.cha-portal .mon-pedido-card:active {
transform: scale(0.99);
}
/* Cores por estado · usa variáveis `--mon-state-*` definidas no :root
do tema (linhas 33-52 do montras-portal.css). */
.cha-portal .mon-pedido-card[data-estado="submetido"] { border-left-color: var(--mon-state-submetido); }
.cha-portal .mon-pedido-card[data-estado="design"] { border-left-color: var(--mon-state-design); }
.cha-portal .mon-pedido-card[data-estado="aprovacao"] { border-left-color: var(--mon-state-aprovacao); }
.cha-portal .mon-pedido-card[data-estado="orcamento"] { border-left-color: var(--mon-state-orcamento); }
.cha-portal .mon-pedido-card[data-estado="ceo"] { border-left-color: var(--mon-state-ceo); }
.cha-portal .mon-pedido-card[data-estado="producao"] { border-left-color: var(--mon-state-producao); }
.cha-portal .mon-pedido-card[data-estado="envio"] { border-left-color: var(--mon-state-envio); }
.cha-portal .mon-pedido-card[data-estado="instalado"] { border-left-color: var(--mon-state-instalado); }
.cha-portal .mon-pedido-card[data-estado="recusado"] { border-left-color: var(--mon-state-recusado); }
.cha-portal .mon-pedido-card__body {
display: flex;
flex-direction: column;
gap: 3px;
}
.cha-portal .mon-pedido-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}
.cha-portal .mon-pedido-card__time {
font-family: var(--ph-sans);
font-size: 10.5px;
color: var(--ph-ink-faint, #6B7E8A);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.cha-portal .mon-pedido-card__farmacia {
font-family: var(--ph-sans);
font-size: 13.5px;
color: var(--ph-ink);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cha-portal .mon-pedido-card__meta,
.cha-portal .mon-pedido-card__meta2 {
font-family: var(--ph-sans);
font-size: 11px;
color: var(--ph-ink-soft);
letter-spacing: 0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cha-portal .mon-pedido-card__bottom {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
gap: 8px;
}
.cha-portal .mon-pedido-card__brand {
padding: 2px 7px;
border-radius: 3px;
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
}
.cha-portal .mon-pedido-card__brand--pap {
background: var(--mon-tag-pm-bg, #F2E6DF);
color: var(--ph-accent-montras);
}
.cha-portal .mon-pedido-card__brand--bow {
background: var(--mon-tag-bow-bg, #DDE1EC);
color: var(--mon-tag-bow-fg, #1E2A4A);
}
.cha-portal .mon-pedido-card__cost {
font-family: var(--ph-sans);
font-size: 13.5px;
color: var(--ph-ink);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.cha-portal .mon-pedido-card__cost--est {
color: var(--ph-ink-faint, #6B7E8A);
font-weight: 500;
}
@media (max-width: 480px) {
.cha-portal .mon-pedidos-filter span:not(.mon-pedidos-filter__dot):not(.mon-pedidos-filter__chevron):not(.mon-pedidos-filter__icon):not(.mon-pedidos-filter__badge) {
/* Em mobile pequeno, esconde label de "Filtros" no botão central · só icon */
}
}
/* =====================================================
v0.29.0 · Prompt 06 — Polish final: empty, focus, hover, notas
===================================================== */
/* ── Fix 1 · Empty orçamentos colapsado ── */
.cha-portal .mon-quote-card-collapsed {
background: var(--ph-paper-tint);
border: 1px solid var(--ph-line);
border-radius: 10px;
padding: 12px 16px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.cha-portal .mon-quote-card-collapsed__title {
font-family: var(--ph-serif);
font-size: 16px;
font-weight: 500;
color: var(--ph-ink);
}
/* v0.32.0 · Prompt 08 ajuste 2 — empty colapsado "Sem orçamentos pendentes"
passa de Playfair italic para Montserrat regular. É um estado quotidiano,
não uma nota humana — não merece tom editorial. */
.cha-portal .mon-panel-empty-inline {
font-family: var(--ph-sans);
font-style: normal;
font-size: 11.5px;
color: var(--ph-ink-faint, #6B7E8A);
}
/* ── Fix 2 · Focus-visible global ── */
.cha-portal .mon-pedidos-filter:focus-visible,
.cha-portal .mon-pedido-card:focus-visible,
.cha-portal .mon-pill:focus-visible,
.cha-portal button:focus-visible,
.cha-portal a:focus-visible,
.cha-portal input:focus-visible,
.cha-portal select:focus-visible,
.cha-portal textarea:focus-visible,
.cha-portal [role="button"]:focus-visible {
outline: 2px solid var(--ph-accent-montras);
outline-offset: 2px;
}
.cha-portal :focus:not(:focus-visible) {
outline: none;
}
/* ── Hover states (genéricos) ── */
.cha-portal .mon-pedidos-filter:active {
transform: scale(0.97);
}
.cha-portal .mon-pill[role="button"]:hover,
.cha-portal .mon-pill.is-clickable:hover {
opacity: 0.85;
cursor: pointer;
}
.cha-portal .mon-atelier-subnav-item:hover:not(.active) {
color: var(--ph-ink);
}
/* ── Fix 4 · Aprovações redesign ── */
/* "AGUARDA APROVAÇÃO DE" — substitui fundo bege por dashed separator */
.cha-portal .mon-approval-card__by {
background: transparent !important;
border-top: 1px dashed var(--ph-line-strong);
padding: 10px 0 0;
margin-top: 8px;
}
/* Btn "Reenviar" individual = primary terracota (era ghost) */
.cha-portal .mon-approval-card__btn--primary {
background: var(--ph-accent-montras);
color: var(--ph-paper);
border: none;
}
.cha-portal .mon-approval-card__btn--primary:hover { opacity: 0.92; }
/* "+48h" pill âmbar pulsante ao lado de "há N dias"
v0.32.0 · Prompt 08 ajuste 7.1 — passa de pill estática terracota-clara
para pill âmbar com dot pulsante, visualmente idêntico ao chip "Atrasados"
da listagem (mesmo @keyframes mon-pulse). */
.cha-portal .mon-approval-card__overdue-pill {
display: inline-flex;
align-items: center;
gap: 4px;
background: #FAF1D6;
color: #806316;
padding: 1px 8px;
border-radius: 100px;
font-family: var(--ph-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-left: 8px;
vertical-align: middle;
}
.cha-portal .mon-approval-card__overdue-pill::before {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background: #D4A53A;
box-shadow: 0 0 0 3px rgba(212, 165, 58, 0.22);
animation: mon-pulse 2s ease-in-out infinite;
flex-shrink: 0;
}
/* Tempo "há N dias" agora sempre neutro (ink-faint), sem urgência colorida */
.cha-portal .mon-approval-card__waiting {
color: var(--ph-ink-faint, #6B7E8A) !important;
font-style: normal !important;
}
/* ── Fix 5 · Calendário ── */
/* Legenda em chips */
/* v0.37.0 · Prompt 09C item 11 — padding lateral 24px (era 0) para alinhar
com o resto do calendário (head também tem padding 18-22px). */
.cha-portal .mon-cal-legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 10px 24px 14px;
border-bottom: 1px solid var(--ph-line);
margin-bottom: 10px;
}
.cha-portal .mon-cal-legend__chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--ph-sans);
font-size: 10.5px;
color: var(--ph-ink-soft, #2C4858);
letter-spacing: 0.02em;
}
.cha-portal .mon-cal-legend__dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
/* "Hoje" com stripe lateral terracota (era fundo tint quase invisível) */
.cha-portal .mon-calendar__day--today {
position: relative;
}
.cha-portal .mon-calendar__day--today::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--ph-accent-montras);
border-radius: 2px 0 0 2px;
}
/* Eventos BOW · teal claro #4A7A9B (era navy escuro contraste fraco) */
.cha-portal .mon-calendar__event--bow {
background: #4A7A9B !important;
color: var(--ph-paper) !important;
}
/* Overflow "+N" quando >4 eventos num dia */
.cha-portal .mon-cal-overflow {
font-family: var(--ph-sans);
font-size: 10px;
color: var(--ph-ink-faint, #6B7E8A);
font-weight: 600;
padding: 2px 4px;
cursor: help;
letter-spacing: 0.04em;
}
/* ── Fix 6 · Detalhe ficheiros lado a lado ── */
.cha-portal .mon-detail-files-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.cha-portal .mon-detail-files-col {
min-width: 0;
}
@media (max-width: 767px) {
.cha-portal .mon-detail-files-row {
grid-template-columns: 1fr;
gap: 0;
}
}
/* =====================================================
v0.30.0 · Prompt 05B — Listagem desktop · toolbar + tabela densa
===================================================== */
/* Esconde os 3 dropdowns antigos (v0.28.0) — substituídos pela toolbar */
.cha-portal .mon-pedidos-filters {
display: none;
}
/* ── Alt 1 · Toolbar inline com pills por estado ── */
/* v0.65.1 · Prompt 20 — padding lateral 14→0 (os 16px do `.cha-main`
chegam · filter pills alinham com o resto). */
.cha-portal .mon-toolbar {
position: relative;
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
padding: 0;
margin-bottom: 14px;
}
/* v0.65.0 · Prompt 19 — alinhamento com `.pmc-filter-pill` do portal MC
(challenge-plugin/portal/css/portal.css linhas 4174-4198). Antes:
font-size 10.5px · padding 6px 12px · weight 500 · letter-spacing 0.02em ·
gap 5px. Agora: 11px · 7px 14px · weight 600 · 0.04em · 6px. Dá visual
ligeiramente maior e mais legível (alinhado com filtros Todos/Publicados/
Rascunho/Lixo do MC). Dot colorido + active ink-fill mantêm-se. */
.cha-portal .mon-toolbar-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--ph-white, #FFF);
border: 1px solid var(--ph-line-strong);
border-radius: var(--ph-radius-pill, 100px);
padding: 7px 14px;
font-family: var(--ph-sans);
font-size: 11px;
color: var(--ph-ink-soft);
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: border-color 0.18s var(--ph-ease, ease), color 0.18s var(--ph-ease, ease), background 0.18s var(--ph-ease, ease);
letter-spacing: 0.04em;
}
.cha-portal .mon-toolbar-pill:hover { border-color: var(--ph-ink); color: var(--ph-ink); }
.cha-portal .mon-toolbar-pill__dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.cha-portal .mon-toolbar-pill__count {
color: var(--ph-ink-muted);
font-weight: 700;
margin-left: 3px;
font-variant-numeric: tabular-nums;
font-size: 11px;
}
/* Active state — pill seleccionado */
.cha-portal .mon-toolbar-pill--active {
background: var(--ph-ink);
border-color: var(--ph-ink);
color: var(--ph-paper);
}
.cha-portal .mon-toolbar-pill--active .mon-toolbar-pill__count {
color: rgba(250, 250, 247, 0.75);
}
/* v0.71.53 — label do chip activo do COMERCIAL: o simples dependia de
herdar o color do botão (paper) e ficava preto sobre o fundo ink (o número,
com regra própria, mantinha-se claro). Damos-lhe regra própria com fallback
literal, igual ao padrão do __count. SCOPED ao comercial (.mon-toolbar SEM
--pedidos) → o admin (.mon-toolbar--pedidos · desktop) e os seus bottom-sheets
(.mon-mchip/.mon-sheet-*) ficam de fora. */
.cha-portal .mon-toolbar:not(.mon-toolbar--pedidos) .mon-toolbar-pill--active > span:not(.mon-toolbar-pill__count) {
color: var(--ph-paper, #FAFAF7);
}
/* Alert · Atrasados dourado. Inactivo: creme + dot dourado + contagem clara.
Activo (v0.71.52 · Fase A): dourado sólido #D4A53A, texto branco, sem dot. */
.cha-portal .mon-toolbar-pill--alert {
background: #FBF3DF;
border-color: rgba(212, 165, 58, 0.40);
color: #8A6D1C;
}
.cha-portal .mon-toolbar-pill--alert.mon-toolbar-pill--active {
background: #D4A53A;
border-color: #D4A53A;
color: var(--ph-paper);
}
.cha-portal .mon-toolbar-pill--alert.mon-toolbar-pill--active .mon-toolbar-pill__count {
color: rgba(250, 250, 247, 0.80);
}
.cha-portal .mon-toolbar-pill__dot--pulse {
background: #D4A53A;
box-shadow: 0 0 0 3px rgba(212, 165, 58, 0.22);
animation: mon-pulse 2s ease-in-out infinite;
}
@keyframes mon-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(212, 165, 58, 0.22); }
50% { box-shadow: 0 0 0 6px rgba(212, 165, 58, 0); }
}
/* v0.41.0 · Prompt 11A item 6 — pill "Arquivados" no toolbar de Pedidos
(admin-only · gate can_archive). v0.71.52 · Fase A — recolor para vermelho
(= eliminado). Inactivo: rosa-pálido + ⌫/texto vermelho. Activo: vermelho
sólido #B23B3B + ⌫/texto branco. */
.cha-portal .mon-toolbar-pill--archived {
background: #F9EAE7;
color: #B23B3B;
border-color: rgba(178, 59, 59, 0.28);
}
.cha-portal .mon-toolbar-pill--archived:hover {
border-color: #B23B3B;
color: #B23B3B;
}
.cha-portal .mon-toolbar-pill--archived.mon-toolbar-pill--active {
background: #B23B3B;
border-color: #B23B3B;
color: var(--ph-paper);
}
.cha-portal .mon-toolbar-pill--archived.mon-toolbar-pill--active .mon-toolbar-pill__count {
color: rgba(250, 250, 247, 0.80);
}
.cha-portal .mon-toolbar-pill__arch-ico {
font-size: 13px;
line-height: 1;
flex-shrink: 0;
}
/* v0.41.0 · Prompt 11A item 6 — botão Restaurar inline em cada row/card
quando filter=archived. Estilo ghost terracota, compact. */
.cha-portal .mon-pedido-restore-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border: 1px solid var(--ph-accent-montras);
background: transparent;
color: var(--ph-accent-montras);
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 100px;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s var(--ph-ease), color 0.15s var(--ph-ease);
}
.cha-portal .mon-pedido-restore-btn:hover {
background: var(--ph-accent-montras);
color: var(--ph-paper);
}
.cha-portal .mon-pedido-restore-btn svg { flex-shrink: 0; }
/* Na tabela, alinha à direita; em mobile cards já fica no flex bottom. */
.cha-portal .mon-pedidos-list--table .col-act { text-align: right; padding-right: 14px; }
/* Divider vertical entre Atrasados e os estados */
.cha-portal .mon-toolbar-divider {
width: 1px;
height: 20px;
background: var(--ph-line-strong);
margin: 0 4px;
}
/* v0.32.0 · Prompt 08 ajuste 7.2 — variante da toolbar para Aprovações:
sem padding horizontal (vive ao nível da shell, não dentro de container
próprio como em Pedidos) e margin-bottom mais generoso (24px). */
.cha-portal .mon-toolbar--aprovacoes {
padding: 0;
margin-bottom: 24px;
}
/* Zona direita · dropdowns + acções */
.cha-portal .mon-toolbar-right {
margin-left: auto;
display: inline-flex;
gap: 5px;
align-items: center;
}
.cha-portal .mon-toolbar-pill--dropdown .mon-toolbar-pill__chevron {
color: var(--ph-ink-faint, #6B7E8A);
font-size: 8px;
margin-left: 3px;
}
.cha-portal .mon-toolbar-pill--filter-on {
border-color: var(--ph-accent-montras);
color: var(--ph-accent-montras);
}
.cha-portal .mon-toolbar-pill--primary {
background: var(--ph-ink);
border-color: var(--ph-ink);
color: var(--ph-paper);
font-weight: 600;
}
.cha-portal .mon-toolbar-pill--primary:hover { opacity: 0.92; }
/* ── v0.71.52 · Fase A — toolbar Pedidos (admin): status-grid (2 linhas) à
esquerda + right-stack (acções em cima · especiais em baixo) à direita.
Scoped a `.mon-toolbar--pedidos` para NÃO afectar a toolbar do comercial
(3 chips · `.mon-toolbar` simples) nem a de Aprovações. As regras de layout
vivem em ≥1024px; em mobile a grelha achata para o scroll horizontal de
hoje (ver @media max-width:1023). ── */
.cha-portal .mon-toolbar-status-grid {
display: flex;
flex-direction: column;
gap: 9px;
min-width: 0;
}
.cha-portal .mon-toolbar-status-row {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
}
.cha-portal .mon-toolbar-right-stack {
display: flex;
flex-direction: column;
gap: 9px;
align-items: flex-end;
flex: none;
}
.cha-portal .mon-toolbar-action-group,
.cha-portal .mon-toolbar-special-group {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
justify-content: flex-end;
}
@media (min-width: 1024px) {
.cha-portal .mon-toolbar--pedidos {
align-items: flex-start;
justify-content: space-between;
flex-wrap: nowrap;
gap: 24px;
}
}
/* ── v0.71.52 · Fase C — barra mobile (3 chips Estado/Filtros/Período) +
bottom-sheets. A barra só aparece ≤1023 (ver @media). Os sheets só
renderizam quando abertos (overlay slide-up). ── */
.cha-portal .mon-pedidos-mobile-bar {
display: none; /* desktop esconde · @media ≤1023 mostra (flex) */
gap: 9px;
margin-bottom: 14px;
}
.cha-portal .mon-mchip {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
background: var(--ph-white, #FFF);
border: 1px solid var(--ph-line-strong);
border-radius: var(--ph-radius-pill, 100px);
padding: 12px 12px;
font-family: var(--ph-sans);
font-size: 13px;
font-weight: 600;
color: var(--ph-ink-soft);
white-space: nowrap;
cursor: pointer;
position: relative;
}
.cha-portal .mon-mchip--active { border-color: var(--ph-ink); color: var(--ph-ink); }
.cha-portal .mon-mchip__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cha-portal .mon-mchip__chevron { font-size: 8px; color: var(--ph-ink-faint, #6B7E8A); }
.cha-portal .mon-mchip__icon { font-size: 14px; line-height: 1; }
.cha-portal .mon-mchip__badge {
width: 7px; height: 7px; border-radius: 50%;
background: var(--ph-accent-montras); flex-shrink: 0;
}
/* Bottom-sheet · overlay + painel a subir de baixo */
.cha-portal .mon-sheet-overlay {
position: fixed;
inset: 0;
z-index: 10002; /* acima do toast (10001) · ver §z-indexes */
background: rgba(17, 40, 51, 0.42);
display: flex;
align-items: flex-end;
}
.cha-portal .mon-sheet {
width: 100%;
background: var(--ph-white, #FFF);
border-radius: 22px 22px 0 0;
padding: 8px 18px 22px;
padding-bottom: max(22px, env(safe-area-inset-bottom));
max-height: 82vh;
overflow-y: auto;
box-shadow: 0 -20px 50px -20px rgba(17, 40, 51, 0.4);
animation: mon-sheet-up 0.22s var(--ph-ease, ease);
}
@keyframes mon-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cha-portal .mon-sheet__handle {
width: 40px; height: 4px; border-radius: 2px;
background: var(--ph-line-strong); margin: 6px auto 10px;
}
.cha-portal .mon-sheet__head {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.cha-portal .mon-sheet__title {
font-family: var(--ph-serif); font-size: 22px; font-weight: 500;
color: var(--ph-ink); margin: 0;
}
.cha-portal .mon-sheet__close {
border: none; background: none; font-size: 26px; line-height: 1;
color: var(--ph-ink-muted); cursor: pointer; padding: 2px 6px;
}
.cha-portal .mon-sheet-opt {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 13px 4px; border: none; background: none;
border-bottom: 1px solid var(--ph-line);
font-family: var(--ph-sans); font-size: 15px; color: var(--ph-ink-soft);
cursor: pointer; text-align: left;
}
.cha-portal .mon-sheet-opt:last-child { border-bottom: none; }
.cha-portal .mon-sheet-opt__l { display: inline-flex; align-items: center; gap: 10px; }
.cha-portal .mon-sheet-opt__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cha-portal .mon-sheet-opt__count {
color: var(--ph-ink-muted); font-weight: 700; font-variant-numeric: tabular-nums;
}
.cha-portal .mon-sheet-opt.is-selected { color: var(--ph-ink); font-weight: 600; }
.cha-portal .mon-sheet-group { padding: 14px 0; border-bottom: 1px solid var(--ph-line); }
.cha-portal .mon-sheet-group:last-of-type { border-bottom: none; }
.cha-portal .mon-sheet-group__lbl {
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ph-gold-deep); font-weight: 700; margin-bottom: 10px;
}
.cha-portal .mon-sheet-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cha-portal .mon-sheet-chip {
padding: 9px 16px; border: 1px solid var(--ph-line-strong);
border-radius: var(--ph-radius-pill, 100px); background: var(--ph-white);
font-family: var(--ph-sans); font-size: 13px; font-weight: 600;
color: var(--ph-ink-soft); cursor: pointer;
}
.cha-portal .mon-sheet-chip.is-selected {
background: var(--ph-ink); border-color: var(--ph-ink); color: var(--ph-paper);
}
.cha-portal .mon-sheet-toggle {
width: 100%; display: flex; align-items: center; justify-content: space-between;
padding: 4px 0; border: none; background: none;
font-family: var(--ph-sans); font-size: 15px; color: var(--ph-ink); cursor: pointer;
}
.cha-portal .mon-sheet-toggle__track {
width: 42px; height: 24px; border-radius: 100px; background: var(--ph-line-strong);
position: relative; transition: background 0.18s var(--ph-ease, ease); flex-shrink: 0;
}
.cha-portal .mon-sheet-toggle__knob {
position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: left 0.18s var(--ph-ease, ease);
}
.cha-portal .mon-sheet-toggle.is-on .mon-sheet-toggle__track { background: #D4A53A; }
.cha-portal .mon-sheet-toggle.is-on .mon-sheet-toggle__knob { left: 21px; }
.cha-portal .mon-sheet__footer { display: flex; gap: 10px; padding-top: 16px; }
.cha-portal .mon-sheet__btn {
flex: 1; padding: 13px; border-radius: var(--ph-radius-md, 10px);
font-family: var(--ph-sans); font-size: 14px; font-weight: 600; cursor: pointer;
}
.cha-portal .mon-sheet__btn--ghost {
background: var(--ph-paper-tint); border: 1px solid var(--ph-line); color: var(--ph-ink-soft);
}
.cha-portal .mon-sheet__btn--primary {
background: var(--ph-ink); border: 1px solid var(--ph-ink); color: var(--ph-paper);
}
/* Período sheet reaproveita o renderPeriodoDropdown vivo → torná-lo inline
(não absolute) dentro do sheet. */
.cha-portal .mon-sheet .mon-pedidos-dropdown {
position: static; border: none; box-shadow: none;
padding: 0; max-height: none; border-radius: 0;
}
.cha-portal .mon-sheet .mon-pedidos-dropdown__item { padding: 13px 4px; }
/* ── Bulk bar ── */
/* v0.65.1 · Prompt 20 — margin lateral 14→0 (alinha com toolbar e cards).
Padding interno mantido (look do bar escuro). */
.cha-portal .mon-bulk-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
margin: 0 0 12px;
background: var(--ph-ink);
color: var(--ph-paper);
border-radius: 8px;
}
.cha-portal .mon-bulk-bar__count {
font-family: var(--ph-sans);
font-size: 12px;
font-weight: 600;
}
.cha-portal .mon-bulk-bar__action {
padding: 6px 12px;
background: rgba(250, 250, 247, 0.12);
border: 1px solid rgba(250, 250, 247, 0.2);
color: var(--ph-paper);
border-radius: 6px;
font-family: var(--ph-sans);
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
.cha-portal .mon-bulk-bar__action:hover { background: rgba(250, 250, 247, 0.2); }
.cha-portal .mon-bulk-bar__cancel {
margin-left: auto;
background: transparent;
border: 0;
color: var(--ph-paper);
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 0 6px;
}
/* ── Alt 2 · Tabela densa desktop ── */
/* v0.37.0 · Prompt 09C item 8 — remove border externa da tabela; a
separação entre rows fica apenas com border-bottom interna. Visual mais
limpo (sem caixa). */
.cha-portal .mon-pedidos-list--table .mon-table {
width: 100%;
border-collapse: collapse;
background: var(--ph-white, #FFF);
border: none;
border-radius: 8px;
overflow: hidden;
/* v0.71.66 — recuo lateral de 14px removido: a tabela alinha agora com o
título (.mon-pheader) e os chips (.mon-toolbar), que assentam na borda
do corredor (.cha-main). Mantém o respiro inferior de 14px. */
margin: 0 0 14px;
max-width: none;
}
.cha-portal .mon-pedidos-list--table .mon-table thead th {
background: var(--ph-paper-tint);
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ph-gold-deep, #917143);
font-weight: 700;
padding: 10px 10px;
text-align: left;
border-bottom: 1px solid var(--ph-line);
}
.cha-portal .mon-pedidos-list--table .mon-table tbody td {
padding: 10px 10px;
border-bottom: 1px solid var(--ph-line);
font-family: var(--ph-sans);
font-size: 11.5px;
color: var(--ph-ink);
vertical-align: middle;
}
.cha-portal .mon-pedidos-list--table .mon-table tbody tr:last-child td {
border-bottom: none;
}
.cha-portal .mon-pedidos-list--table .mon-table tbody tr:hover td {
background: var(--ph-paper-tint);
cursor: pointer;
}
.cha-portal .mon-pedidos-list--table .mon-table tbody tr.is-selected td {
background: rgba(163, 88, 70, 0.05);
}
.cha-portal .mon-pedidos-list--table .col-check {
width: 26px;
padding-left: 14px;
}
.cha-portal .mon-pedidos-list--table .check {
width: 14px;
height: 14px;
margin: 0;
accent-color: var(--ph-accent-montras);
cursor: pointer;
}
.cha-portal .mon-pedidos-list--table .col-id {
font-weight: 600;
font-variant-numeric: tabular-nums;
font-size: 11px;
font-family: var(--ph-mono);
color: var(--ph-ink);
white-space: nowrap;
}
.cha-portal .mon-pedidos-list--table .col-pharmacy { min-width: 180px; }
.cha-portal .mon-pedidos-list--table .col-pharmacy .ph-name {
font-weight: 600;
color: var(--ph-ink);
font-size: 12px;
}
.cha-portal .mon-pedidos-list--table .col-pharmacy .ph-loc {
font-size: 10.5px;
color: var(--ph-ink-faint, #6B7E8A);
margin-top: 1px;
}
.cha-portal .mon-pedidos-list--table .col-val {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 600;
white-space: nowrap;
}
.cha-portal .mon-pedidos-list--table .col-act {
width: 28px;
text-align: center;
padding-right: 14px;
position: relative;
}
.cha-portal .mon-pedidos-list--table .col-ha--alert {
color: #D4A53A;
font-weight: 600;
}
.cha-portal .mon-pedidos-list--table .col-designer--empty {
color: var(--ph-ink-faint, #6B7E8A);
}
/* Linhas com aviso (atrasado) — stripe âmbar à esquerda */
.cha-portal .mon-pedidos-list--table .has-alert td:first-child {
box-shadow: inset 3px 0 0 #D4A53A;
}
/* Menu ⋮ por linha */
.cha-portal .mon-row-menu {
background: transparent;
border: 0;
color: var(--ph-ink-faint, #6B7E8A);
font-size: 16px;
line-height: 1;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
font-family: var(--ph-sans);
}
.cha-portal .mon-row-menu:hover {
background: var(--ph-paper-tint);
color: var(--ph-ink);
}
.cha-portal .mon-row-menu__panel {
position: absolute;
right: 10px;
top: 100%;
z-index: 20;
background: var(--ph-white, #FFF);
border: 1px solid var(--ph-line-strong);
border-radius: 8px;
box-shadow: var(--ph-shadow-md, 0 8px 24px -10px rgba(17, 40, 51, 0.18));
min-width: 140px;
padding: 4px;
display: flex;
flex-direction: column;
}
.cha-portal .mon-row-menu__item {
background: transparent;
border: 0;
padding: 8px 12px;
font-family: var(--ph-sans);
font-size: 12px;
color: var(--ph-ink);
text-align: left;
cursor: pointer;
border-radius: 6px;
white-space: nowrap;
}
.cha-portal .mon-row-menu__item:hover { background: var(--ph-paper-tint); }
.cha-portal .mon-row-menu__item--danger {
color: var(--mon-state-recusado, #B85555);
}
.cha-portal .mon-row-menu__item--danger:hover {
background: rgba(184, 85, 85, 0.08);
}
/* ── Alt 3 · Responsive · desktop tabela / mobile cards ── */
.cha-portal .mon-pedidos-list--table { display: none; }
.cha-portal .mon-pedidos-list--cards { display: block; }
@media (min-width: 1024px) {
.cha-portal .mon-pedidos-list--table { display: block; }
.cha-portal .mon-pedidos-list--cards { display: none; }
.cha-portal .mon-toolbar { flex-wrap: nowrap; }
}
/* v0.36.0 · Prompt 09B item 3 — fix defensivo para scroll glitch em mobile.
A combinação sticky .mon-subnav + scroll bounce no iOS pode causar saltos
ao fazer scroll para cima. overscroll-behavior contém o bounce dentro do
container e -webkit-overflow-scrolling activa o momentum nativo. */
.cha-portal .mon-pedidos-list--cards {
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 1023px) {
/* Mobile · toolbar scroll horizontal · esconde zona direita */
.cha-portal .mon-toolbar {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
}
.cha-portal .mon-toolbar::-webkit-scrollbar { display: none; }
.cha-portal .mon-toolbar { scrollbar-width: none; }
.cha-portal .mon-toolbar-right { display: none; }
/* v0.71.52 · Fase A+C — no mobile a toolbar desktop (status-grid + right-stack)
dá lugar à barra de 3 chips → bottom-sheets. Sem estado degradado:
Atrasados/Arquivados/acções vivem nos sheets, acessíveis no mobile-admin. */
.cha-portal .mon-toolbar--pedidos { display: none; }
.cha-portal .mon-pedidos-mobile-bar { display: flex; }
}
/* =====================================================
v0.31.0 · Prompt 07 — Detalhe do pedido como página
----------------------------------------------------
Substitui o overlay/modal por uma view in-place dentro
de #mon-atelier-page. Estilos scoped a .mon-detail-page
para não colidir com o overlay do Comercial (Meus pedidos)
que continua a usar .mon-detail-head sem este wrapper.
===================================================== */
.cha-portal .mon-detail-page {
padding: 4px 2px 24px;
font-family: var(--ph-sans);
color: var(--ph-ink);
}
/* "‹ Voltar aos pedidos" */
.cha-portal .mon-detail-back {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: none;
padding: 0;
margin-bottom: 22px;
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ph-ink-faint, #6B7E8A);
font-weight: 600;
cursor: pointer;
transition: color var(--ph-duration) var(--ph-ease);
}
.cha-portal .mon-detail-back:hover { color: var(--ph-ink-soft); }
.cha-portal .mon-detail-back__chev { font-size: 14px; line-height: 1; }
/* HEAD: pill acima do h1 + h1 + metadata */
.cha-portal .mon-detail-page .mon-detail-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 26px;
background: transparent;
border: none;
padding: 0;
}
.cha-portal .mon-detail-page .mon-detail-head__left {
min-width: 0;
flex: 1;
}
.cha-portal .mon-detail-page .mon-detail-head__pill {
display: inline-flex;
margin-bottom: 10px;
}
.cha-portal .mon-detail-page .mon-detail-head__title {
font-family: var(--ph-serif);
font-size: 36px;
font-weight: 400;
letter-spacing: -0.5px;
line-height: 1.05;
color: var(--ph-ink);
margin: 0;
}
.cha-portal .mon-detail-page .mon-detail-head__meta {
font-family: var(--ph-sans);
font-size: 12px;
color: var(--ph-ink-faint, #6B7E8A);
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: center;
}
.cha-portal .mon-detail-page .mon-detail-head__id {
font-weight: 600;
color: var(--ph-ink-soft);
font-variant-numeric: tabular-nums;
}
.cha-portal .mon-detail-page .mon-detail-head__sep {
color: var(--ph-ink-faint, #6B7E8A);
opacity: 0.6;
}
.cha-portal .mon-detail-page .mon-detail-head__urgent {
color: #C97B3F; /* status aprovação tone — fonte de "atenção" */
font-weight: 600;
}
/* GRID 3 colunas */
.cha-portal .mon-detail-page .mon-detail-grid {
display: grid;
grid-template-columns: 1.05fr 1.4fr 0.95fr;
gap: 18px;
align-items: start;
}
.cha-portal .mon-detail-page .mon-detail-col { min-width: 0; }
@media (max-width: 1100px) {
.cha-portal .mon-detail-page .mon-detail-grid {
grid-template-columns: 1fr;
}
/* v0.37.0 · Prompt 09C item 5 — order em mobile: Farmácia (1) →
Entrega&Aprovações (3) → Montra+Ficheiros+Histórico (2). Mais útil
para o user móvel ver primeiro CONTACTO + ENTREGA antes do detalhe
pesado da Montra (com ficheiros, timeline, etc.). */
.cha-portal .mon-detail-page .mon-detail-col:nth-child(1) { order: 1; } /* Farmácia */
.cha-portal .mon-detail-page .mon-detail-col:nth-child(3) { order: 2; } /* Entrega & Aprovações + Acções */
.cha-portal .mon-detail-page .mon-detail-col:nth-child(2) { order: 3; } /* Montra + Ficheiros + Orçamentos + Histórico */
}
/* CARD genérica do detalhe.
v0.65.3 · Prompt 21B — `overflow: hidden` defensivo. Sem isto, conteúdo
filho que estoure (ex: tabela de superfícies com headers compridos)
pode aparecer cortado para além do edge direito do card em mobile
estreito. Com `overflow: hidden`, o card faz clip do conteúdo extra. */
.cha-portal .mon-dcard {
background: var(--ph-white);
border: 1px solid var(--ph-line);
border-radius: 12px;
padding: 20px 22px;
margin-bottom: 16px;
overflow: hidden;
}
.cha-portal .mon-dcard:last-child { margin-bottom: 0; }
.cha-portal .mon-dcard__title {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ph-gold-deep);
font-weight: 700;
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--ph-line);
}
.cha-portal .mon-dcard__subtitle {
font-family: var(--ph-sans);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ph-gold-deep);
font-weight: 700;
margin: 18px 0 8px;
}
/* Campos label:value */
.cha-portal .mon-dfield {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px dashed var(--ph-line);
gap: 14px;
}
.cha-portal .mon-dfield:last-child { border-bottom: none; }
.cha-portal .mon-dfield__label {
font-family: var(--ph-sans);
font-size: 11.5px;
color: var(--ph-ink-soft);
font-weight: 500;
flex-shrink: 0;
}
.cha-portal .mon-dfield__value {
font-family: var(--ph-sans);
font-size: 12.5px;
color: var(--ph-ink);
font-weight: 600;
text-align: right;
word-break: break-word;
min-width: 0;
}
.cha-portal .mon-dfield__value--tnum {
font-variant-numeric: tabular-nums;
}
.cha-portal .mon-dfield__value--sm {
font-size: 11.5px;
font-weight: 500;
}
.cha-portal .mon-dfield__value a {
color: var(--ph-accent-montras, #A35846);
text-decoration: none;
}
.cha-portal .mon-dfield__value a:hover { text-decoration: underline; }
.cha-portal .mon-dfield__muted {
color: var(--ph-ink-faint, #6B7E8A);
font-weight: 500;
}
/* v0.42.0 · Prompt 11B item 3 — campo Marca no detalhe passa a mostrar
apenas o logo 64×64 (sem texto, sem background). O próprio SVG já
traz fundo + cantos arredondados (rx 10 no viewBox), por isso o
container fica neutro. As regras .mon-detail-brand do v0.39 (inline
tag com background colorido + texto) deixaram de ser usadas no campo
Marca · não removo as classes para evitar quebrar referências noutros
sítios (defensivo). */
.cha-portal .mon-detail-brand-logo {
width: 64px;
height: 64px;
border-radius: 10px;
background: none;
display: block;
flex-shrink: 0;
}
/* Bloco de notas (Observações / Notas para o Designer) */
.cha-portal .mon-dnote {
margin-top: 14px;
padding: 11px 13px;
background: var(--ph-paper-tint);
border-radius: 8px;
border-left: 2px solid var(--ph-gold);
font-family: var(--ph-sans);
font-size: 12.5px;
color: var(--ph-ink-soft);
line-height: 1.55;
}
.cha-portal .mon-dnote__label {
font-family: var(--ph-sans);
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ph-gold-deep);
font-weight: 700;
margin-bottom: 5px;
}
/* Card "Acções" — stack vertical full-width */
.cha-portal .mon-detail-actions-card .mon-detail-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 12px;
border-radius: 8px;
font-family: var(--ph-sans);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
border: 1px solid transparent;
cursor: pointer;
margin-bottom: 8px;
transition: opacity var(--ph-duration) var(--ph-ease),
background var(--ph-duration) var(--ph-ease),
color var(--ph-duration) var(--ph-ease),
border-color var(--ph-duration) var(--ph-ease);
}
.cha-portal .mon-detail-actions-card .mon-detail-btn:last-child { margin-bottom: 0; }
.cha-portal .mon-detail-actions-card .mon-detail-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.cha-portal .mon-detail-btn__ic {
font-size: 14px;
line-height: 1;
letter-spacing: 0;
}
.cha-portal .mon-detail-btn--primary {
background: var(--ph-accent-montras, #A35846);
color: var(--ph-white);
border-color: var(--ph-accent-montras, #A35846);
}
.cha-portal .mon-detail-btn--primary:hover:not(:disabled) {
opacity: 0.9;
}
.cha-portal .mon-detail-btn--accent {
background: var(--ph-ink);
color: var(--ph-white);
border-color: var(--ph-ink);
}
.cha-portal .mon-detail-btn--accent:hover:not(:disabled) {
opacity: 0.9;
}
.cha-portal .mon-detail-btn--ghost {
background: var(--ph-white);
color: var(--ph-ink);
border-color: var(--ph-line-strong);
}
.cha-portal .mon-detail-btn--ghost:hover:not(:disabled) {
border-color: var(--ph-accent-montras, #A35846);
color: var(--ph-accent-montras, #A35846);
}
/* Files row já existente do Prompt 06 — quando dentro de .mon-dcard,
herda o grid 2-col responsivo. Re-declarado aqui para clareza. */
.cha-portal .mon-dcard .mon-detail-files-row {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 768px) {
.cha-portal .mon-dcard .mon-detail-files-row {
grid-template-columns: 1fr 1fr;
}
}
/* =====================================================
v0.43.0 · Prompt 11C — VISUAIS, LAYOUT E MOBILE
===================================================== */
/* ── Item 3 · Search alinhado ao .pmc-search do Media Center
────────────────────────────────────────────────────────
v0.43.0 iniciou a mudança e v0.44.0 consolidou.
- `.mon-pedidos-search__input`: config exacta MC (regra base
actualizada em [montras-portal.css:6053](#) — já não precisa
de override aqui).
- `.mon-farm-search__input` mantém o padrão exacto MC neste bloco.
Ambos: focus border passa de `--ph-accent-montras` (terracota)
para `--ph-ink` (igual ao MC). */
.cha-portal .mon-farm-search__input {
height: 38px;
padding: 0 14px 0 38px;
border-radius: var(--ph-radius-sm);
font-size: 12.5px;
}
.cha-portal .mon-pedidos-search__input:focus,
.cha-portal .mon-farm-search__input:focus {
border-color: var(--ph-ink);
}
.cha-portal .mon-farm-search__ic { left: 12px; }
/* ── Item 4 · Stripe lateral · v0.64.0 — substituída por `border-left`
directo no `.mon-pedido-card` (padrão Challenge `.cha-sub-card`).
As regras anteriores que estavam aqui (`border-top-left-radius` e
`border-bottom-left-radius: 10px !important` no `.mon-pedido-card__stripe`)
foram removidas — o elemento filho deixou de existir no DOM
(JS :2354). Ver bloco principal nas linhas ~6395 para o
border-left + selectors por `[data-estado]`. */
/* ── Item 6 · Backgrounds brancos em Relatórios
────────────────────────────────────────────────────────
.mon-chart-card e .mon-table dentro de Gestão passam de paper
off-white para white explícito. Cards e tabelas mais "limpos". */
.cha-portal .mon-chart-card {
background: var(--ph-white);
}
.cha-portal .mon-gestao-page .mon-table {
background: var(--ph-white);
}
/* ── Mobile-only fixes ──────────────────────────────────────── */
@media (max-width: 768px) {
/* Item 1 · Painel mobile overflow.
Wrapper geral do Atelier evita scroll horizontal global. Containers
filhos respeitam viewport (`max-width: 100%` + box-sizing). Apanha
as classes reais que ainda saem fora em 360px segundo screenshots
001/002. */
.cha-portal #mon-atelier-page,
.cha-portal #mon-subview-atelier {
overflow-x: hidden;
max-width: 100%;
}
.cha-portal .mon-card,
.cha-portal .mon-supplier,
.cha-portal .mon-kpi-row,
.cha-portal .mon-quinzena-list,
.cha-portal .mon-priorities,
.cha-portal .mon-approvals-inline,
.cha-portal .mon-activity {
max-width: 100%;
box-sizing: border-box;
}
/* Defesa adicional: nenhum conteúdo deve tornar a página >100vw.
v0.55.0 · Prompt 13F — removido `overflow-x: hidden` do
`.mon-portal-wrap` porque criava um BFC que impedia o full-bleed
das sub-navs (`margin-left: calc(50% - 50vw)` ficava clipped pelo
wrap). A defesa anti-overflow page-level está em `html, body`
(v0.45) — suficiente sem precisar de clipping ao nível do wrap. */
.cha-portal .mon-portal-wrap {
max-width: 100vw;
}
/* Item 2 · "A aguardar aprovação" em stack vertical.
A row .mon-approval-row tinha flex horizontal (thumb · info · meta).
Em 360px ficava ilegível. Stack vertical com info+meta a 100% width
dá respiro à coluna do nome da farmácia. */
.cha-portal .mon-approval-row {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.cha-portal .mon-approval-row .mon-approval-info,
.cha-portal .mon-approval-row .mon-approval-meta {
width: 100%;
}
/* Item 4 · Margens laterais menores nos cards mobile.
v0.43: 14→10px. v0.63 (Prompt 18): 10→0 — `.cha-main` parent já tem
`padding-left/right: 16px` em mobile, igual ao Challenge `.cha-sub-card`.
Padding adicional aqui empurrava os cards Montras 10px mais para
dentro que os do Challenge (visual descompassado a olho nu).
v0.63.1 (Prompt 18B): `!important` defensivo. A regra base
`.mon-pedidos-list { padding: 0 14px 14px }` em :6378 tem a mesma
especificidade (0-2-0) e podia vencer por cascade order em
browsers antigos / com cache stale (user reportou padding 14px
no DevTools live mesmo após deploy do v0.63). */
.cha-portal .mon-pedidos-list--cards {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Item 5 · Popups CRUD adaptam a mobile.
`.mon-modal-card` tinha width:420px (com `max-width:100%` que cobria
o caso, mas o padding 28px estava a roubar 56px de conteúdo · ficava
apertado em 360px). Mais: muitos modais têm conteúdo alto e ficavam
sem scroll. Forçar viewport-relative + max-height + overflow-y. */
.cha-portal .mon-modal-overlay {
padding: 10px;
align-items: flex-start;
}
.cha-portal .mon-modal-card {
width: 100%;
max-width: 100%;
max-height: 90vh;
overflow-y: auto;
padding: 18px;
margin: 5vh auto;
border-radius: 12px;
}
/* Tickets internos do modal (form fields, summary, actions) ficam
mais compactos em mobile para evitar overflow horizontal. */
.cha-portal .mon-modal-actions {
flex-wrap: wrap;
gap: 8px;
}
/* =====================================================
v0.45.0 · Prompt 12 — fixes urgentes mobile
===================================================== */
/* v0.50.0 · Prompt 13 — replicação do padrão `.pmc-subnav` em mobile
(só ajuste de padding lateral 28→14). v0.53.0 · Prompt 13E — sticky
desactivado para AMBAS as sub-navs em mobile. Em iOS Safari o
stacking de 2 níveis sticky (subnav primária + atelier-subnav)
causa glitches visuais. `position: relative + top: auto` deixa as
navs scrollarem com o conteúdo. Full-bleed preservado via margin-
left/right do base — só o padding muda em mobile. */
.cha-portal .mon-subnav,
.cha-portal .mon-atelier-subnav {
position: relative;
top: auto;
}
.cha-portal .mon-subnav {
padding-left: calc((50vw - 50%) + 14px);
padding-right: calc((50vw - 50%) + 14px);
}
.cha-portal .mon-subnav-item { padding: 0 14px; }
.cha-portal .mon-subnav-item.active::after { left: 14px; right: 14px; }
/* Item 2 · Painel mobile overflow nuclear.
v0.43 já tinha um pass conservador. v0.45 reforça com !important
defensivo + word-break + flex-wrap para forçar comportamentos que
algumas cards específicas (KPI Orçamentos com label long, priority
row com "ENVIAR FORNECEDOR · Hoje · 18:00") ainda escapavam. */
html, body {
overflow-x: hidden;
}
/* v0.56.0 · Prompt 13G — `.cha-portal .mon-portal-wrap` REMOVIDO
deste grupo selector. A regra acima (v0.55) já removia o
`overflow-x: hidden` do wrap mas era anulada por este group selector
com a mesma especificidade que vinha mais tarde no cascade. Now o
wrap só tem `max-width: 100vw` (mantido pela regra acima) sem o
clipping que impedia o full-bleed das sub-navs. Os outros entries
do grupo (`.cha-portal`, `#mon-atelier-page`, `#mon-subview-atelier`,
`[data-subview="painel"]`) mantêm-se — fornecem defesa anti-overflow
em níveis intermédios sem afectar o full-bleed das sub-navs (que
têm como ancestor directo `.mon-portal-wrap`, não estes). */
.cha-portal,
.cha-portal #mon-atelier-page,
.cha-portal #mon-subview-atelier,
.cha-portal [data-subview="painel"] {
max-width: 100vw;
overflow-x: hidden;
}
.cha-portal .mon-card,
.cha-portal .mon-kpi-row,
.cha-portal .mon-kpi,
.cha-portal .mon-supplier,
.cha-portal .mon-priorities,
.cha-portal .mon-approvals-inline,
.cha-portal .mon-activity,
.cha-portal .mon-quinzena-list {
max-width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
word-break: break-word;
}
/* v0.59.0 · Prompt 15B — headers das cards (.mon-card__head) em
stack vertical em mobile. Antes era flex `space-between` com title
e tabs/count a partilharem a mesma linha, o que em 360px forçava
o título "Prioridades" a partir em 2 ("Priorida / des") e as tabs
"URGÊNCIA"/"QUINZENA" também a partir letras. Stack vertical dá
full-width ao título (cabe naturalmente) e às tabs lado-a-lado
abaixo. Plus white-space:nowrap nas tabs e no count-note para
garantir que nunca partem ("2 pedidos" não vira "2 / pedido / s"). */
.cha-portal .mon-card__head {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 14px 18px;
}
.cha-portal .mon-card__head .mon-tab {
white-space: nowrap;
font-size: 9.5px;
padding: 5px 9px;
}
.cha-portal .mon-card__count-note {
white-space: nowrap;
}
/* v0.58.0 · Prompt 15 — priority rows em layout 2 linhas em mobile.
Antes o grid `32px 1fr auto` em 360px-(padding) ficava com a coluna
auto (deadline) a empurrar o info para muito pouca largura,
causando "PAPILLON" a partir em 3 linhas + "Gôndola · Hugo" partido
+ "ENVIAR FORNECEDOR" em 2 linhas. Agora:
┌──┬──────────────────────────────┐
│01│ Farmácia Salvador · Grijó │
│ │ [PAPILLON] · Gôndola · Hugo │
├──┴──────────────────────────────┤
│ ENVIAR FORNECEDOR · Hoje · 18:00 (direita)
└─────────────────────────────────┘
*/
.cha-portal .mon-priority-row {
display: grid;
grid-template-columns: 28px 1fr;
grid-template-rows: auto auto;
column-gap: 10px;
row-gap: 4px;
padding: 12px 14px;
align-items: start;
}
.cha-portal .mon-priority-num {
grid-column: 1;
grid-row: 1;
font-size: 16px !important;
}
.cha-portal .mon-priority-info {
grid-column: 2;
grid-row: 1;
min-width: 0;
}
/* Brand tag no-wrap: nunca partir "PAPILLON" em letras separadas. */
.cha-portal .mon-priority-info .mon-tag {
white-space: nowrap;
display: inline-block;
}
.cha-portal .mon-priority-info__meta {
display: flex;
flex-wrap: wrap;
gap: 4px 6px;
align-items: center;
}
/* Deadline (2ª linha) ocupa toda a largura e alinha-se à direita. */
.cha-portal .mon-priority-deadline {
grid-column: 1 / -1;
grid-row: 2;
text-align: right;
max-width: 100%;
word-break: keep-all;
}
.cha-portal .mon-priority-deadline__d,
.cha-portal .mon-priority-deadline__when {
white-space: nowrap;
}
}