/* Interfaces de exemplo. Aroeira é uma marca fictícia; os sistemas são genéricos.
   Tudo em em: a mesma peça aparece pequena na abertura e legível nos capítulos.
   .is-traco em qualquer ancestral transforma a peça em desenho de projeto. */

.ui{--u-bg:#fbf9f5;--u-bg2:#f1ede5;--u-bg3:#e9e4da;--u-ink:#1c2621;--u-ink2:#56605b;--u-ink3:#848c87;--u-line:#e2ddd2;
  --u-acc:#0b6a50;--u-acc2:#e0efe8;--u-ar:#a4492b;--u-ar2:#f4e4da;--u-gold:#e5a82e;--u-gold2:#fbeccc;--u-coral:#cf5f43;--u-coral2:#fbe3dc;
  position:relative;width:100%;height:100%;overflow:hidden;background:var(--u-bg);color:var(--u-ink);border-radius:.9em;font-family:var(--sans);line-height:1.25;
  box-shadow:0 0 0 1px rgb(18 35 28/.07),0 .2em .5em rgb(18 35 28/.06),0 2em 4em -2em rgb(18 35 28/.42)}
[data-skin="noite"] .ui,[data-skin="nucleo"] .ui{box-shadow:0 0 0 1px rgb(255 255 255/.07),0 0 3.2em -.6em var(--glow),0 2.4em 4.8em -2em rgb(0 0 0/.85)}
.ui p{margin:0}
.ui b{font-weight:650}

/* barras de janela */
.u-bar{height:2.2em;display:flex;align-items:center;gap:.36em;padding:0 .85em;background:var(--u-bg2);border-bottom:1px solid var(--u-line);flex:none}
.u-bar i{width:.56em;height:.56em;border-radius:50%;background:#d5cfc4}
.u-bar span{margin-left:.6em;height:1.4em;padding:0 .8em;border-radius:.7em;background:#fff;color:var(--u-ink2);font-size:.72em;display:flex;align-items:center;min-width:45%}
.u-tt{height:2.6em;display:flex;align-items:center;gap:.55em;padding:0 1em;border-bottom:1px solid var(--u-line);background:var(--u-bg);flex:none}
.u-tt b{font-size:.95em}
.u-tt span{font-size:.82em;color:var(--u-ink2)}
.u-tt .u-dot{width:.55em;height:.55em;border-radius:50%;background:var(--u-acc)}
.u-tt em{margin-left:auto;font-style:normal;font-size:.72em;color:var(--u-ink3)}

/* aparelho */
.u-phone{position:relative;width:100%;height:100%;border-radius:2.1em;background:#17211d;padding:.5em;
  box-shadow:0 0 0 1px rgb(255 255 255/.05) inset,0 2em 4em -2em rgb(18 35 28/.5)}
[data-skin="noite"] .u-phone,[data-skin="nucleo"] .u-phone{box-shadow:0 0 0 1px rgb(255 255 255/.08) inset,0 0 3em -.6em var(--glow),0 2.4em 4.8em -2em rgb(0 0 0/.85)}
.u-phone>.ui{border-radius:1.65em;box-shadow:none}
.u-notch{position:absolute;z-index:3;top:.95em;left:50%;width:3.6em;height:.95em;margin-left:-1.8em;border-radius:.6em;background:#17211d}
.u-tablet{position:relative;width:100%;height:100%;border-radius:1.4em;background:#17211d;padding:.6em;box-shadow:0 2em 4em -2em rgb(18 35 28/.5)}
[data-skin="noite"] .u-tablet,[data-skin="nucleo"] .u-tablet{box-shadow:0 0 0 1px rgb(255 255 255/.08) inset,0 0 3em -.6em var(--glow),0 2.4em 4.8em -2em rgb(0 0 0/.85)}
.u-tablet>.ui{border-radius:.9em;box-shadow:none}

/* botões e etiquetas dentro das interfaces */
.u-btn{display:inline-flex;align-items:center;justify-content:center;height:2.3em;padding:0 1.1em;border-radius:1.2em;background:var(--u-ink);color:#fff;font-size:.85em;font-weight:600;font-style:normal;white-space:nowrap}
.u-btn.gold{background:var(--u-gold);color:#141008}
.u-btn.line{background:transparent;color:var(--u-ink);box-shadow:inset 0 0 0 1px var(--u-line)}
.u-pill{display:inline-flex;align-items:center;gap:.35em;height:1.6em;padding:0 .6em;border-radius:.8em;font-size:.72em;font-weight:600;background:var(--u-bg2);color:var(--u-ink2);white-space:nowrap}
.u-pill.ok{background:var(--u-acc2);color:var(--u-acc)}
.u-pill.now{background:var(--u-gold2);color:#7a5410}
.u-pill.warn{background:var(--u-coral2);color:var(--u-coral)}
.u-pill i{width:.5em;height:.5em;border-radius:50%;background:currentColor}

/* ---------- site da Aroeira ---------- */
.ui-site{--ar:var(--u-ar);background:#fbf7f1;display:flex;flex-direction:column}
.as-nav{height:3.1em;display:flex;align-items:center;gap:1.1em;padding:0 1.2em;border-bottom:1px solid #efe7db;flex:none}
.as-logo{display:flex;align-items:center;gap:.45em;font-size:1.05em;letter-spacing:-.01em;color:#2a1f19}
.as-logo i{width:1.1em;height:1.1em;border-radius:50% 50% 50% 0;background:var(--ar);transform:rotate(-45deg)}
.as-nav span{font-size:.78em;color:#6c5f55}
.as-btn{display:inline-flex;align-items:center;justify-content:center;height:2.4em;padding:0 1.2em;border-radius:1.2em;background:var(--ar);color:#fff;font-style:normal;font-weight:600;font-size:.88em;white-space:nowrap;box-shadow:0 .5em 1em -.6em rgb(164 73 43/.8)}
.as-btn.sm{height:2em;padding:0 .9em;font-size:.72em;margin-left:auto;box-shadow:none}
.as-hero{display:grid;grid-template-columns:1fr 1fr;gap:1.1em;padding:1.3em 1.2em 1em;align-items:center}
.as-k{font-size:.68em;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ar)}
.as-h{margin-top:.35em!important;font-family:var(--display);font-weight:560;font-size:1.9em;line-height:1.02;letter-spacing:-.03em;color:#2a1f19}
.as-p{margin-top:.6em!important;font-size:.82em;line-height:1.4;color:#6c5f55}
.as-copy .as-btn{margin-top:.9em}
.as-img{aspect-ratio:1/1.05;border-radius:.7em}
.as-sub{font-size:.66em;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8b7d71;margin-bottom:.55em!important}
.as-proof{padding:.4em 1.2em .9em}
.as-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em}
.as-row .img{aspect-ratio:4/3;border-radius:.45em}
.as-blog{padding:.2em 1.2em 1.1em}
.as-post{display:flex;justify-content:space-between;align-items:baseline;gap:.8em;padding:.55em 0;border-top:1px solid #efe7db;font-size:.8em}
.as-post b{font-weight:600;color:#2a1f19}
.as-post span{flex:none;font-size:.88em;color:#8b7d71}
.as-wa{position:absolute;right:1em;bottom:1em;width:3.1em;height:3.1em;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 .6em 1.4em -.4em rgb(37 211 102/.7)}
.as-wa svg{width:1.6em;height:1.6em;fill:#fff}

/* ilustração de cozinha (feita em CSS, sem foto) */
.kitchen{position:relative;overflow:hidden;--k-up:#f6f1e9;--k-door:#f3eee5;--k-wall:#ebe2d3;--k-floor:#d6c5ab;
  background:linear-gradient(180deg,var(--k-wall) 0 72%,var(--k-floor) 72% 100%)}
.kitchen .kw{position:absolute;left:60%;top:13%;width:25%;height:28%;border-radius:.12em;background:linear-gradient(170deg,#e7efed 0 55%,#d3e0dd 55%);box-shadow:0 0 0 .22em #f8f4ee}
.kitchen .ku{position:absolute;left:6%;top:10%;width:48%;height:25%;border-radius:.1em;
  background:repeating-linear-gradient(90deg,var(--k-up) 0 calc(33.33% - .12em),rgb(0 0 0/.12) calc(33.33% - .12em) 33.33%);box-shadow:0 .35em .5em -.35em rgb(0 0 0/.3)}
.kitchen .kt{position:absolute;left:4%;right:4%;top:53%;height:4.5%;background:#4f4136;border-radius:.08em}
.kitchen .kl{position:absolute;left:4%;right:4%;top:57.5%;height:27%;
  background:repeating-linear-gradient(90deg,var(--k-door) 0 calc(25% - .12em),rgb(0 0 0/.14) calc(25% - .12em) 25%);box-shadow:inset 0 -.35em 0 rgb(0 0 0/.08)}
.kitchen .kp{position:absolute;left:24%;top:0;width:1px;height:23%;background:#3a2f27}
.kitchen .kp::after{content:"";position:absolute;left:-.45em;bottom:-.5em;width:.9em;height:.55em;border-radius:.45em .45em .1em .1em;background:#2d2620;box-shadow:0 .3em 1em .2em rgb(255 214 150/.45)}
.kitchen.k2{--k-door:#7f8c6b;--k-up:#eef0e6;--k-wall:#e9e6da}
.kitchen.k3{--k-door:#b88a5d;--k-up:#efe2d0;--k-wall:#efe7dc}
.kitchen.k4{--k-door:#3d4643;--k-up:#ece9e3;--k-wall:#e4e1da;--k-floor:#c9bba6}

/* ---------- WhatsApp ---------- */
.ui-wa{display:flex;flex-direction:column;background:#ece5dc}
.wa-top{display:flex;align-items:center;gap:.55em;padding:1.9em .8em .65em;background:#0e5a4b;color:#fff;flex:none}
.wa-av{width:1.9em;height:1.9em;border-radius:50%;background:#a4492b;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.85em}
.wa-top b{display:block;font-size:.88em}
.wa-top span{display:block;font-size:.66em;opacity:.8}
.wa-body{flex:1;display:flex;flex-direction:column;gap:.45em;padding:.7em .6em;overflow:hidden}
.bub{max-width:86%;padding:.5em .65em .55em;border-radius:.75em;font-size:.76em;line-height:1.32;background:#fff;color:#1c2621;box-shadow:0 1px 0 rgb(0 0 0/.06)}
.bub.in{align-self:flex-start;border-top-left-radius:.2em}
.bub.out{align-self:flex-end;background:#d7f4cd;border-top-right-radius:.2em}
.bub small{display:block;margin-top:.2em;text-align:right;font-size:.8em;color:#7b867f}
.wa-sys{align-self:center;padding:.35em .7em;border-radius:.6em;background:#fbefd5;color:#6d4c0e;font-size:.66em;font-weight:600}

/* ---------- cartão do BlogPost ---------- */
.ui-blogcard{padding:.9em 1em;display:flex;flex-direction:column;gap:.45em}
.bc-k{display:flex;align-items:center;gap:.45em;font-size:.66em;font-weight:600;letter-spacing:.06em;color:var(--u-acc)}
.bc-k img{width:1.4em;height:1.4em}
.bc-t{font-family:var(--display);font-weight:560;font-size:1.12em;line-height:1.08;letter-spacing:-.02em}
.bc-m{font-size:.66em;color:var(--u-ink3)}

/* ---------- CRM ---------- */
.ui-crm{display:flex;flex-direction:column}
.crm-cols{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:.55em;padding:.7em;background:var(--u-bg2)}
.crm-col{display:flex;flex-direction:column;gap:.45em;min-width:0}
.crm-col>p{display:flex;justify-content:space-between;align-items:center;font-size:.7em;font-weight:600;color:var(--u-ink2);padding:0 .1em}
.crm-col>p i{font-style:normal;color:var(--u-ink3);font-weight:500}
.crm-card{padding:.5em .55em;border-radius:.45em;background:#fff;box-shadow:0 1px 0 rgb(0 0 0/.06);display:flex;flex-direction:column;gap:.15em;min-width:0}
.crm-card b{font-size:.74em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-card span{font-size:.64em;color:var(--u-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-card.hot{box-shadow:0 0 0 .14em var(--u-acc),0 .4em .8em -.4em rgb(11 106 80/.5)}

/* ---------- agenda ---------- */
.ui-agenda{display:flex;flex-direction:column}
.ag-grid{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:.3em;padding:.6em .7em .7em}
.ag-day{display:flex;flex-direction:column;gap:.3em;min-width:0}
.ag-day>p{font-size:.62em;font-weight:600;color:var(--u-ink3);text-align:center}
.ag-day i{display:block;height:1.6em;border-radius:.3em;background:var(--u-bg2)}
.ag-day i.bk{background:var(--u-bg3)}
.ag-day i.new{background:var(--u-acc2);box-shadow:inset 0 0 0 .12em var(--u-acc)}

/* ---------- painel da diretoria ---------- */
.ui-painel{display:flex;flex-direction:column}
.pn-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;padding:.75em .8em .35em}
.pn-kpi{padding:.5em .6em;border-radius:.5em;background:var(--u-bg2)}
.pn-kpi span{display:block;font-size:.6em;color:var(--u-ink2);white-space:nowrap}
.pn-kpi b{display:block;margin-top:.1em;font-family:var(--display);font-weight:560;font-size:1.35em;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pn-chart{flex:1;display:flex;align-items:flex-end;gap:.45em;padding:.5em .9em .4em;min-height:0}
.pn-chart i{flex:1;border-radius:.2em .2em 0 0;background:var(--u-acc);opacity:.85}
.pn-chart i:nth-child(odd){opacity:.55}
.pn-foot{display:flex;align-items:center;gap:.45em;padding:.45em .9em .7em;font-size:.64em;color:var(--u-ink2)}

/* ---------- fila de produção ---------- */
.ui-fila{display:flex;flex-direction:column}
.fl-rows{flex:1;display:flex;flex-direction:column;gap:.4em;padding:.6em .7em}
.fl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15em .5em;align-items:center;padding:.5em .6em;border-radius:.5em;background:var(--u-bg2)}
.fl-row b{font-size:.74em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-row span{font-size:.62em;color:var(--u-ink2)}
.fl-row .u-pill{grid-row:1/3;grid-column:2}
.fl-row.hot{background:#fff;box-shadow:0 0 0 .14em var(--u-acc)}

/* ---------- agentes de IA ---------- */
.ui-agents{display:flex;flex-direction:column;justify-content:center;gap:.5em;padding:.7em .8em}
.ag-chips{display:flex;gap:.4em;flex-wrap:wrap}
.ag-chip{display:inline-flex;align-items:center;gap:.4em;height:2em;padding:0 .7em;border-radius:1em;background:var(--u-acc2);color:var(--u-acc);font-size:.7em;font-weight:600;white-space:nowrap}
.ag-chip::before{content:"";width:.55em;height:.55em;border-radius:50%;background:currentColor}
.ag-note{display:flex;align-items:center;gap:.45em;font-size:.64em;color:var(--u-ink2)}
.ag-note::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--u-gold)}

/* ---------- integrações (ERP, estoque, nota) ---------- */
.ui-erp{display:flex;flex-direction:column}
.erp-nodes{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;align-items:center;padding:.6em .8em;position:relative}
.erp-nodes::before{content:"";position:absolute;left:12%;right:12%;top:50%;height:1px;background:var(--u-acc);opacity:.5}
.erp-n{position:relative;z-index:1;padding:.55em .4em;border-radius:.5em;background:#fff;box-shadow:0 0 0 1px var(--u-line);text-align:center}
.erp-n b{display:block;font-size:.74em}
.erp-n span{display:block;margin-top:.15em;font-size:.6em;color:var(--u-ink2)}

/* ---------- app de instalação ---------- */
.ui-app{display:flex;flex-direction:column;background:#fbf9f5}
.app-top{padding:1.9em .8em .6em;background:#1f2a25;color:#fff;flex:none}
.app-top span{display:block;font-size:.62em;opacity:.75}
.app-top b{display:block;margin-top:.15em;font-size:.86em}
.app-list{list-style:none;margin:0;padding:.6em .65em;display:flex;flex-direction:column;gap:.38em;flex:1}
.app-list li{display:flex;align-items:center;gap:.45em;font-size:.66em;padding:.45em .5em;border-radius:.45em;background:var(--u-bg2)}
.app-list li::before{content:"";flex:none;width:.95em;height:.95em;border-radius:.25em;box-shadow:inset 0 0 0 .12em var(--u-ink3)}
.app-list li.ok::before{box-shadow:none;background:var(--u-acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.2L9.6 3.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.app-cta{margin:0 .65em .9em;height:2.4em;border-radius:1.2em;background:var(--u-gold);color:#141008;display:grid;place-items:center;font-size:.7em;font-weight:700;flex:none}

/* ---------- portal do cliente ---------- */
.ui-portal{display:flex;flex-direction:column;background:#fbf7f1}
.pt-top{padding:1.9em .8em .55em;display:flex;align-items:center;gap:.45em;flex:none}
.pt-top .as-logo{font-size:.8em}
.pt-card{margin:.2em .65em;padding:.65em .7em;border-radius:.6em;background:#fff;box-shadow:0 1px 0 rgb(0 0 0/.06)}
.pt-card span{display:block;font-size:.6em;color:var(--u-ink2)}
.pt-card b{display:block;margin-top:.1em;font-size:.86em}
.pt-steps{list-style:none;margin:.55em .65em;padding:0 0 0 .2em;display:flex;flex-direction:column;gap:.5em;flex:1}
.pt-steps li{position:relative;display:flex;align-items:center;gap:.55em;font-size:.64em;color:var(--u-ink3)}
.pt-steps li::before{content:"";flex:none;width:.8em;height:.8em;border-radius:50%;box-shadow:inset 0 0 0 .14em var(--u-line);background:#fff}
.pt-steps li.ok{color:var(--u-ink2)}
.pt-steps li.ok::before{background:var(--u-acc);box-shadow:none}
.pt-steps li.now{color:var(--u-ink);font-weight:650}
.pt-steps li.now::before{background:var(--u-gold);box-shadow:0 0 0 .25em var(--u-gold2)}

/* ---------- planilha, e-mail e formulário de ERP (cena Conectar) ---------- */
.ui-sheet{display:flex;flex-direction:column}
.sh-grid{flex:1;display:grid;grid-template-columns:3.2em 1.3fr 1.2fr .8fr;grid-auto-rows:1.85em;font-size:.72em;background:var(--u-line);gap:1px;align-content:start}
.sh-grid span{background:#fff;padding:0 .5em;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--u-ink2)}
.sh-grid .hd{background:#f4f6f3;color:var(--u-ink3);font-weight:600;font-size:.92em}
.sh-grid .new{background:#fffbea;color:var(--u-ink)}
.ui-mail{display:flex;flex-direction:column}
.ml-f{display:flex;gap:.5em;padding:.5em .9em;border-bottom:1px solid var(--u-line);font-size:.7em;color:var(--u-ink2)}
.ml-f b{color:var(--u-ink3);font-weight:500;width:3.6em;flex:none}
.ml-body{padding:.7em .9em;font-size:.72em;line-height:1.5;color:var(--u-ink2)}
.ml-body .fill{color:var(--u-ink)}
.ui-erpf{display:flex;flex-direction:column}
.ef-f{padding:.55em .9em 0}
.ef-f label{display:block;font-size:.6em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--u-ink3)}
.ef-f span{display:flex;align-items:center;margin-top:.25em;height:2em;padding:0 .6em;border-radius:.35em;background:#fff;box-shadow:inset 0 0 0 1px var(--u-line);font-size:.74em;color:var(--u-ink)}
.ef-f span.err{box-shadow:inset 0 0 0 .14em var(--u-coral);background:var(--u-coral2)}

/* campo que se preenche (cópia manual) */
.typed{display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;vertical-align:bottom}

/* ---------- traço: a mesma peça como desenho de projeto ----------
   Vale para o palco inteiro (.is-traco acima da .ui) e para um bloco isolado dentro de uma interface
   (.ui .is-traco), com a cor de linha de cada contexto. */
.is-traco{--tline:var(--line);--ttext:var(--fg3)}
.ui .is-traco{--tline:#aaa397;--ttext:#7d857f}
.is-traco,.is-traco *{background:transparent!important;box-shadow:none!important;color:var(--ttext)!important;text-shadow:none!important}
.is-traco :is(.ui,.u-phone,.u-tablet,.t-box,.u-btn,.as-btn,.bub,.crm-card,.pn-kpi,.fl-row,.ag-chip,.erp-n,.app-list li,.pt-card,.app-cta,.wa-sys,.u-pill,.ag-day i,.u-bar span,.ef-f span,.as-wa,.u-notch,.u-bar i,.as-logo i,.wa-av,.u-dot,.pn-chart i,.ia-card,.rl-card){outline:1px solid var(--tline);outline-offset:-1px}
.is-traco :is(.u-bar,.u-tt,.as-nav,.wa-top,.app-top){border-bottom:1px solid var(--tline)!important}
.is-traco .pn-chart i{opacity:1}
.is-traco .erp-nodes::before{background:var(--tline)!important}
.is-traco .img{outline:1px solid var(--tline);outline-offset:-1px;
  background:linear-gradient(to top right,transparent calc(50% - .6px),var(--tline) 50%,transparent calc(50% + .6px)),linear-gradient(to bottom right,transparent calc(50% - .6px),var(--tline) 50%,transparent calc(50% + .6px))!important}
.is-traco .img>*{display:none}
.is-traco .sh-grid{gap:0}
.is-traco .sh-grid span{outline:1px solid var(--tline);outline-offset:-.5px}
.is-traco .as-wa svg{display:none}
.is-traco :is(.app-list li,.pt-steps li)::before{background:transparent!important;box-shadow:inset 0 0 0 1px var(--tline)!important}

/* materializar: duas faces do mesmo bloco, a de traço por cima até o bloco ser construído */
.mat{position:relative}
.mat>.mat-t{position:absolute;inset:0;pointer-events:none;transition:opacity .55s var(--ease)}
.mat>.mat-b{transition:opacity .55s var(--ease) .08s}
.mat:not(.built)>.mat-b{opacity:0}
.mat.built>.mat-t{opacity:0;transition-delay:.1s}