/* ═════════ 4.0 · pedidos da Joana de 20/10: a 100 % vê-se tudo (app mais compacta), ícones de linha em vez de emojis,
   «Início» com ícone de casa, outros módulos em lista curta, títulos verde-escuro, cartões brancos,
   números com espaço nos milhares, seta para baixo nas linhas que abrem, ficha do cliente arrumada em separadores ═════════ */
/* cores: texto quase preto, títulos verde-escuro, cartões brancos; a cor só onde diz alguma coisa (estados, avisos) */
:root{--bg:#f3f2ee;--sf:#fff;--sf2:#f5f4f0;--bd:#e3e0d9;--tx:#283235;--mu:#6b6f69;--ink:#1c2a2d;--tit:#1d4c4f;--inp:#fff;--mc:#1d4c4f!important}
body{color:var(--tx)}
.r,.kp b,.totbar b,.pg40 b,.mx td,b.nw,.a4 .r,.a4 .tt{font-variant-numeric:tabular-nums}
.topo .tt,.ch h2,.sech,.hg h1,.cfh h1,.modal h3,.lockc h2,details.cx summary,.v2 .card h2,.v2 .vh h1,.zpop .zr b{color:var(--tit)}
.card,.tab,.kp,.sub,.modal,.plb,.hit,.tipo,.opt,.fs,.pld,.mailp,details.cx,details.cx39,.mdp,.notifs,.zpop,.nh{background:#fff}
.kp.tot{background:#f1f7f7}
.msg,.totbar,.pxp{background:var(--sf2)}
.th,.pgh,.mx th{background:var(--sf2)}
.tr.cl:hover,.pk:hover{background:#f6f8f8}
.tr.open{background:#eaf2f2}
.xp{background:#fff;border-top:1px solid var(--bd);box-shadow:inset 3px 0 0 var(--ac)}
.pgm{background:#f7f7f4}
.tile5.lkd{background:#fafaf8}
.comc{background:#eef1f1;color:#3d484a}
.v2{--bg:#f3f2ee;--tx:#283235;--mu:#6b6f69;--bd:#e3e0d9;--hd:#f5f4f0;--m:#2b696e;--s:#e4eded}
.v2view{background:var(--bg)}
.v2 .kcol{background:var(--sf2)}
/* ícones de linha (substituem os emojis) */
svg.i40{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.24em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.i40 .f{fill:currentColor;stroke:none}
.ill40 .b{fill:#e6efef}.ill40 g{stroke:#1d4c4f}
.lkd .ill40 .b,.omb.lkd .ill40 .b{fill:#efeeea}.lkd .ill40 g{stroke:#9a9e98}
/* setas: para baixo quando fechado (abre para baixo), para cima quando aberto */
.tr .cv{font-size:0;display:flex;align-items:center;justify-content:flex-end;color:var(--mu);transform:none!important}
.tr .cv::after{content:'';width:18px;height:18px;background:currentColor;-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;transition:transform .15s}
.tr.open .cv{color:var(--ac)}.tr.open .cv::after{transform:rotate(180deg)}
:root{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
details.cx summary::after{content:'';width:18px;height:18px;background:var(--mu);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;transform:none}
details.cx[open] summary::after{transform:rotate(180deg)}
details.cx39>summary{display:flex;align-items:center;gap:8px}
details.cx39>summary::after{content:'';margin-left:auto;width:16px;height:16px;flex:none;background:var(--mu);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;transition:transform .15s}
details.cx39[open]>summary::after{transform:rotate(180deg)}
/* barra lateral: «Início» com casa, módulo atual, outros módulos em lista curta */
.sb .home40{margin-bottom:8px;color:#fff;font-weight:600}
.sb .home40 .ni{background:none}
.mh .ill40 .b{fill:rgba(255,255,255,.14)}.mh .ill40 g{stroke:#fff}
.mh em.tr40{font-size:11px;font-weight:700;color:#e9b872;font-style:normal;white-space:nowrap;margin-left:auto}
.om40{display:flex;flex-direction:column;gap:1px}
.om40 button{display:flex;align-items:center;gap:8px;min-height:26px;padding:2px 8px;border-radius:7px;font-size:12.5px;font-weight:500;color:#c8dcdc;text-align:left;white-space:nowrap;min-width:0}
.om40 button span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.om40 button:hover{background:rgba(255,255,255,.09);color:#fff}
.om40 button .i40{font-size:13px;opacity:.9}
.om40 button>svg:not(.i40){width:10px;height:10px;margin-left:auto;flex:none;opacity:.7}
.om40 button.lkd{color:#92abac}
.sbl40{display:flex;gap:2px;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.1)}
.sbl40 button{display:flex;align-items:center;padding:5px 8px;border-radius:7px;font-size:12px;font-weight:600;color:#c3d7d7;white-space:nowrap}
.sbl40 button:hover{background:rgba(255,255,255,.09);color:#fff}
.sbt{font-size:10.5px;letter-spacing:.08em;margin:0 6px 4px}
/* ficha do cliente */
.cfd40{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:12px;padding-top:10px;border-top:1px solid var(--bd)}
.cfd40>div{min-width:0;max-width:100%}
/* «Por ativar» e Módulos e Preços: o verde da app, não a cor de cada módulo */
.lockc,.pk,.mdp .fs{--pc:var(--ac)!important;--pl:var(--acl)!important}
.cfd40 span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin-bottom:1px}
.cfd40 b{display:block;font-weight:600;color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfd40 b.up{color:#a5543d}
.kpi40{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:#fff;border:1px solid var(--bd);border-radius:12px;margin-bottom:10px;overflow:hidden}
.kpi40 .kp{border:0;border-left:1px solid var(--bd);border-radius:0;background:none;padding:8px 14px}
.kpi40 .kp:first-child{border-left:0}
.kpi40 .kp.tot{background:#f1f7f7}
.kpi40 .kp b{font-size:17px;line-height:1.3}
.tabs40{display:flex;gap:4px;border-bottom:1px solid var(--bd);margin:-12px -16px 12px;padding:0 10px;overflow-x:auto}
.tabs40 button{display:inline-flex;align-items:center;gap:7px;padding:10px 10px 9px;font-weight:600;font-size:13px;color:var(--mu);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs40 button:hover{color:var(--ink)}
.tabs40 button.on{color:var(--tit);border-bottom-color:var(--tit)}
.tabs40 button i{font-style:normal;font-size:11px;font-weight:700;background:var(--sf2);color:var(--mu);border-radius:9px;padding:0 7px;line-height:18px}
.tabs40 button.on i{background:var(--acl);color:var(--ac)}
.tb40 .chs:first-child{margin-top:0}
.pg40{display:grid;grid-template-columns:100px minmax(0,1fr) 120px;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--bd);font-size:13px}
.pg40:first-child{border-top:0}.pg40 b{text-align:right;color:var(--ink)}
/* tamanhos: tudo mais compacto no computador (a 100 % vê-se o ecrã todo) */
@media (min-width:701px){
 body{font-size:13.5px}
 .app{grid-template-columns:220px minmax(0,1fr)}
 .sb{padding:10px 10px}
 .nb{grid-template-columns:20px minmax(0,1fr) auto;gap:9px;min-height:34px;padding:4px 8px 4px 10px;font-size:13.5px;margin-bottom:1px;border-radius:8px}
 .nb .ni{width:20px;height:20px;background:none;font-size:15px;border-radius:0}
 .nb em{font-size:11.5px}
 .mh{gap:9px;padding:4px 4px 10px;margin:0 0 8px}
 .mh b{font-size:15px}
 .topo{min-height:54px;padding:0 16px 0 22px;gap:10px}
 .topo .tt{font-size:19px}
 .topo .tt small{font-size:12px}
 .corpo{padding:12px 20px 14px}
 .btn{min-height:32px;padding:0 12px;font-size:13px;border-radius:8px;gap:6px}
 .btn.sm{min-height:28px;padding:0 9px;font-size:12px}
 .btn.big{min-height:38px;padding:0 16px;font-size:13.5px}
 .ib{width:30px}.btn.sm.ib{width:28px}
 .inp{min-height:34px;padding:6px 10px;font-size:13px}
 .inp.big{min-height:40px;font-size:16px}
 .filt{margin-bottom:8px}.filt .q svg{top:9px}
 .card{padding:12px 16px;border-radius:12px;margin-bottom:10px}
 .ch{margin-bottom:10px}
 .ch h2{font-size:14px}
 .ch h2 i{width:20px;height:20px;font-size:11px}
 .card.done{padding:8px 16px}.card.done .ch h2{font-size:13.5px}
 .sub{padding:10px 12px}
 .sh{font-size:11px}
 .lbl{font-size:11px}
 .th,.tr{padding:6px 12px}
 .th{font-size:11px}
 .tr{min-height:42px}
 .ic34{width:28px;height:28px;font-size:14px;border-radius:8px}
 .kp{padding:8px 12px}.kp b{font-size:18px}.kp span{font-size:11px}
 .totbar{padding:10px 14px}.totbar b{font-size:14px}.totbar .g b{font-size:19px}
 .opt{min-height:34px;padding:5px 10px;font-size:12.5px}
 .fs{min-height:38px;padding:7px 10px}.fs b{font-size:13px}
 .tipo{min-height:100px;padding:12px 8px 10px}.tipo .e{width:40px;height:40px;font-size:20px}.tipo b{font-size:14.5px}
 .tipos.sm .tipo{min-height:56px}.tipos.sm .tipo .e{width:34px;height:34px;font-size:17px}
 .sech{font-size:17px}
 .agmic{min-height:84px;padding:12px 20px}.agmic .mc{width:54px;height:54px;font-size:24px}.agmic b{font-size:20px}.agmic span span{font-size:14px}
 .agsim{font-size:14px}
 .hb b{font-size:20px}
 .nxt .d b{font-size:16px}.nxt .d span{font-size:13px}
 .plb b{font-size:16px}.plb .pp{font-size:20px}
 .ctl select,.mdb,.bell,.zbtn{height:32px}
 .vc button{padding:5px 9px;font-size:12px}
 .step button{width:30px;height:30px}
 .modal{padding:14px 16px}
 .cfh{grid-template-columns:44px minmax(0,1fr) auto;gap:12px}
 .cfh .av{width:44px;height:44px;border-radius:12px;font-size:17px}
 .cfh h1{font-size:20px}
 .cfh .ct{margin-top:4px}
 /* início: os módulos todos à vista, sem scroll */
 .h40.home{max-width:1180px;padding:22px 8px 8px}
 .h40 .hg h1{font-size:24px}
 .h40 .hg p{font-size:13.5px;margin-top:2px}
 .h40 .tiles{grid-template-columns:repeat(var(--nc,3),minmax(0,1fr));gap:14px;margin-top:18px}
 .h40 .tiles.few{grid-template-columns:repeat(var(--nc),minmax(0,300px));justify-content:center}
 .h40 .tile5{min-height:0;padding:16px 18px;border-radius:14px;display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-areas:"i b" "i s" "e e";column-gap:14px;row-gap:1px;align-items:center;text-align:left}
 .h40 .tile5:hover{border-color:var(--acb);box-shadow:0 6px 18px rgba(35,64,74,.08);transform:none}
 .h40 .tile5 .ill{grid-area:i;margin:0}
 .h40 .tile5 b{grid-area:b;font-size:16px;color:var(--tit);align-self:end}
 .h40 .tile5>span:not(.ill):not(.tlk){grid-area:s;font-size:13px;color:var(--mu);align-self:start}
 .h40 .tile5 em{grid-area:e;justify-self:start;margin-top:12px;font-size:12px;padding:2px 10px;color:var(--ac);background:var(--acl)}
 .h40 .tile5.lkd b{color:var(--mu);opacity:1;filter:none}
 .h40 .tile5.lkd .ill{opacity:1;filter:none}
 .h40 .tile5.lkd em{color:var(--mu);background:#fff}
 .h40 .tlk{top:12px;right:12px;font-size:11px;padding:2px 8px}
 .h40 .hl{margin-top:18px;gap:8px}
 .h40 .hl button{padding:7px 14px;font-size:13px;border-radius:9px;background:#fff}
}
.tile5{--tc:var(--ac);--tl:var(--acl)}
@media (max-width:700px){
 .kpi40{grid-template-columns:1fr}
 .tabs40{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 12px;padding:0;border-bottom:0;overflow:visible}
 .tabs40 button{justify-content:space-between;min-height:44px;padding:6px 12px;border:1px solid var(--bd);border-radius:10px;margin:0;background:#fff}
 .tabs40 button.on{background:var(--acl);border-color:var(--acb)}
 .tlk{font-size:0;gap:0;padding:5px 6px}.tlk svg{width:12px;height:12px}
 .pg40{grid-template-columns:80px minmax(0,1fr) auto}
}
