/* ============================================================
 * VISUAL "PRANCHA" (escolhido pelo Felipe em 02/11/2026)
 * Azul-marinho profundo na estrutura e nos botões, dourado só em
 * detalhes de marca, cantos arredondados, sombras suaves e uma
 * silhueta de obra bem discreta (marinho mais escuro) no menu.
 * Carregado depois dos outros CSS: só troca cores, letras e cantos.
 * ============================================================ */
:root{
  --bg:#F5F6F8; --surface:#FFFFFF; --surface-2:#F8F9FB; --ink:#121C27; --muted:#5F6B78; --line:#E3E7EC;
  --side:#0E1B2B; --side-ink:#EEF2F6; --side-muted:#8E9EB0; --side-hover:rgba(255,255,255,.07);
  --marinho:#1B3A5C; --marinho-2:#172D45; --marinho-3:#0B1724; --dourado:#C9A35C;
  --gold:#B8862B; --steel:#2F6690; --accent:var(--marinho); --accent-soft:rgba(27,58,92,.09); --on-accent:#FFFFFF;
  --ok:#1F7A4D; --warn:#A8670A; --bad:#C0392F; --ok-soft:rgba(31,122,77,.1); --warn-soft:rgba(168,103,10,.11); --bad-soft:rgba(192,57,47,.1);
  --plan:#A7B2BE; --shadow:0 1px 2px rgba(14,27,43,.05),0 8px 24px rgba(14,27,43,.06);
  --f-display:"Archivo","Segoe UI",system-ui,sans-serif; --f-body:"Archivo","Segoe UI",system-ui,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r:12px;
  --obra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 130'%3E%3Cg fill='none' stroke='%2302070D' stroke-opacity='.42' stroke-width='1.4'%3E%3Cpath d='M0 129H620M150 129V82M175 129V82M200 129V82M225 129V82M150 82H225M150 98H225M150 114H225M440 129V20M454 129V20M440 129L454 115L440 101L454 87L440 73L454 59L440 45L454 31L440 20M440 20L447 6L454 20M372 22H600M372 29H600M447 6L372 22M447 6L600 22M560 29V70M553 70H567M478 129V64M508 129V64M538 129V64M568 129V64M478 64H568M478 86H568M478 108H568M478 64L508 86M508 64L538 86'/%3E%3C/g%3E%3Cg fill='%2302070D' fill-opacity='.3'%3E%3Crect x='250' y='54' width='70' height='75'/%3E%3Crect x='326' y='72' width='46' height='57'/%3E%3Crect x='92' y='96' width='48' height='33'/%3E%3C/g%3E%3C/svg%3E");
  --faixa:linear-gradient(160deg,#172D45 0%,#0B1724 100%);
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0B1520; --surface:#121F2E; --surface-2:#162536; --ink:#E6EBF1; --muted:#93A1B1; --line:#213245;
  --side:#08111B; --side-hover:rgba(255,255,255,.06); --accent:#9DBBDA; --accent-soft:rgba(157,187,218,.12); --on-accent:#0B1520;
  --ok:#5CC08E; --warn:#E6B55C; --bad:#F08378; --plan:#4C5D70; --shadow:0 8px 24px rgba(0,0,0,.3); color-scheme:dark}}
/* Tom de cada empresa ao trocar Todas / ALM / RiccoFlex: marinho, azul-aço da ALM, bronze da RiccoFlex */
body[data-emp="all"]{--accent:var(--marinho)}
body[data-emp="alm"]{--accent:#2F6690; --accent-soft:rgba(47,102,144,.12)}
body[data-emp="rf"]{--accent:#8A6420; --accent-soft:rgba(184,134,43,.14)}
@media (prefers-color-scheme: dark){body[data-emp]{--accent:#9DBBDA} body[data-emp="alm"]{--accent:#8FC0E6} body[data-emp="rf"]{--accent:#E2B866}}

body{font-family:var(--f-body); letter-spacing:-.003em}
h1,h2,h3{font-family:var(--f-display); font-weight:700; letter-spacing:-.015em}

/* Menu lateral marinho com a silhueta de obra no pé */
.side{background:var(--obra) left bottom/180% auto no-repeat, var(--faixa)}
.brand .mk{font-weight:400; letter-spacing:-.01em}
.brand .mk b{color:var(--dourado); font-weight:700}
.nav button{border-radius:10px}
.nav button[aria-current="page"]{background:rgba(255,255,255,.1)}
.nav button[aria-current="page"]::before{background:var(--dourado)}
.nav .tag{background:var(--dourado); color:#1A1405}

/* Topo, cartões e botões */
.top{background:color-mix(in srgb,var(--bg) 90%,transparent)}
.panel,.kpi,.card,.cartao,.semana-mini{border-radius:var(--r)!important; box-shadow:var(--shadow)}
.btn{border-radius:9px}
.btn.primary,.btn.forte,button.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.eyebrow{color:var(--steel); letter-spacing:.12em}
.seg{border-radius:10px}
.seg button[aria-pressed="true"]{background:var(--accent); color:#fff}
@media (prefers-color-scheme: dark){.seg button[aria-pressed="true"]{background:var(--accent); color:#0B1520}}
.ver-como{display:flex; align-items:center; gap:8px; font:500 12px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.ver-como select{font:600 14px var(--f-body); text-transform:none; letter-spacing:0; padding:6px 10px; min-height:0}
.ver-como.on select{background:var(--warn-soft); border-color:var(--warn); color:var(--ink)}
input,select,textarea{border-radius:9px}

/* Celular: barra de atalhos e topo do app da obra */
.b-nav button[aria-current="page"]{color:var(--accent)}
.f-top{background:var(--obra) right 8px bottom/auto 100% no-repeat, var(--faixa)}
.modal,.janela{border-radius:16px}

/* ---------- Topo da tela como carimbo da prancha ---------- */
.head h1{font-weight:700; font-size:32px; letter-spacing:-.02em}
.prancha-head{align-items:flex-end}
.carimbo{display:flex; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.carimbo>div{padding:7px 14px; border-left:1px solid var(--line); min-width:96px}
.carimbo>div:first-child{border-left:0}
.carimbo small{display:block; font:500 10px/1.3 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.carimbo b{font:600 13.5px/1.3 var(--f-mono); color:var(--ink)}
.view>.carimbo{align-self:flex-start}

/* ---------- Notas (o que precisa de ação) ---------- */
.notas{display:grid; grid-template-columns:170px minmax(0,1fr); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.notas>h2{font-size:17px; padding:14px 16px; border-right:1px solid var(--line)}
.notas>h2 small{display:block; font:500 11px/1.4 var(--f-mono); color:var(--muted); letter-spacing:0; margin-top:4px; font-weight:400}
.notas ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.notas li{border-left:1px solid var(--line)}
.notas li:first-child{border-left:0}
.notas li button{all:unset; box-sizing:border-box; cursor:pointer; width:100%; height:100%; padding:12px 16px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 10px; align-content:start}
.notas li button:hover{background:var(--surface-2)}
.notas li button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.notas li i{font:600 12px var(--f-mono); color:var(--steel); font-style:normal; padding-top:3px}
.notas li b{font-size:15px}
.notas li span{grid-column:2; color:var(--muted); font-size:13px}
.notas-ok{margin:0; padding:16px; color:var(--muted)}

/* ---------- Atalhos grandes ---------- */
.atalhos{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.atalho{all:unset; box-sizing:border-box; cursor:pointer; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:15px 16px 14px; display:flex; flex-direction:column; gap:6px; transition:transform .15s, border-color .15s}
.atalho:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.atalho:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.atalho .l1{display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
.atalho .ic{width:42px; height:42px; border-radius:10px; background:var(--accent-soft); display:grid; place-items:center}
.atalho .ic svg{width:22px; height:22px; stroke:var(--accent); fill:none; stroke-width:1.6}
.atalho b{font:700 18px/1.2 var(--f-display); letter-spacing:-.01em; margin-top:4px}
.atalho .d{font-size:13.5px; color:var(--muted); line-height:1.4; flex:1}
.atalho .ir{font:600 12px var(--f-mono); color:var(--accent); letter-spacing:.04em; text-transform:uppercase}
.secao-t{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; margin-top:8px}
.secao-t h1,.secao-t h2{font-size:20px; margin:0}
.secao-t span{color:var(--muted); font-size:14px}
@media (max-width:1100px){.atalhos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.notas{grid-template-columns:1fr}.notas>h2{border-right:0; border-bottom:1px solid var(--line)}.notas li{border-left:0; border-top:1px solid var(--line)}.notas li:first-child{border-top:0}}
@media (max-width:520px){.atalhos{grid-template-columns:1fr 1fr; gap:10px}.atalho{padding:12px}.atalho .d{display:none}.atalho b{font-size:16px}}

/* ---------- Avanço como cota ---------- */
.bar{height:8px; border:0; background:color-mix(in srgb,var(--muted) 14%,transparent)}
.cota{display:flex; flex-direction:column; gap:5px}
.cota-l{position:relative; height:8px; border-radius:4px; background:color-mix(in srgb,var(--muted) 14%,transparent)}
.cota-l i{position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:var(--accent)}
.cota-l u{position:absolute; top:-5px; bottom:-5px; border-left:2px dashed var(--ink); opacity:.55}
.cota-t{font:500 12px var(--f-mono); color:var(--muted)}
.cota-t b{color:var(--ink)}
.feito{display:flex; flex-direction:column; gap:16px}
.feito-l .t{display:flex; justify-content:space-between; gap:10px; margin-bottom:6px}
.feito-l .t span{font:600 13px var(--f-mono); color:var(--accent)}

/* ---------- Contas do orçamento ---------- */
.orc-calc{display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:12px; background:var(--surface-2)}
.orc-calc>div{padding:8px 14px; border-left:1px solid var(--line); flex:1; min-width:120px}
.orc-calc>div:first-child{border-left:0}
.orc-calc small{display:block; font-size:11.5px; color:var(--muted)}
.orc-calc b{font:600 14px var(--f-mono)}
.orc-calc .forte b{color:var(--accent); font-size:16px}
/* Orçamento: "Como cheguei no preço" (só o escritório vê) */
.comp{border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; margin-top:14px; background:var(--surface-2)}
.comp-topo{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap}
.comp h2{font-size:17px; margin:0}
.comp h3{font-size:15px; margin:16px 0 6px}
.comp .seg{margin-bottom:8px}
.comp .acts{margin-top:10px}
.comp-lucro{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.comp-lucro select{width:auto}
.comp-lucro input{width:150px}
.comp-res{margin-top:12px; display:grid; gap:2px; font-size:15px}
.comp-res>div:not(.note){display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid var(--line)}
.comp-res b{font:600 15px var(--f-mono)}
.comp-res .soma{font-weight:600}
.comp-res .forte b{color:var(--accent); font-size:18px}
.comp-res .note{margin-top:8px}
.sem-lucro .lucro, .sem-lucro .campo-custo, .sem-lucro .comp>:not(.comp-topo){display:none !important}
.comp .so-escondido{display:none}
.sem-lucro .comp .so-escondido{display:block}

/* ---------- iPhone (item 2): topo abaixo da barra de hora e bateria ---------- */
.top{padding-top:calc(12px + env(safe-area-inset-top,0px))}
.side{padding-top:calc(22px + env(safe-area-inset-top,0px))}
.f-top{padding-top:calc(14px + env(safe-area-inset-top,0px))}
@media (max-width:900px){.top{padding-top:calc(10px + env(safe-area-inset-top,0px))}}

/* ---------- Tela firme (item 17) e folga embaixo (item 1) ---------- */
html,body{overscroll-behavior:none; background:var(--bg)}
html{background:var(--side)}
.tw,.modal,.side,.list{overscroll-behavior:contain}
@media (max-width:900px){.main{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}.f-body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}}

/* ---------- App da obra: "Sair" à vista no topo ---------- */
.f-acoes{display:flex; align-items:center; gap:8px; flex:none}
.f-sair{all:unset; cursor:pointer; font-size:13px; font-weight:600; padding:7px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.22); color:var(--side-ink)}
.f-sair:active{background:var(--side-hover)}
.f-sair:focus-visible{outline:2px solid var(--dourado); outline-offset:2px}

/* ---------- Tela de entrada no visual Prancha ---------- */
.gate{background:var(--bg)}
.gate .art{background:var(--obra) left bottom/150% auto no-repeat, var(--faixa); padding:56px}
.gate .art canvas{opacity:.35}
.gate .mark{font-weight:400; letter-spacing:-.02em}
.gate .mark b{font-weight:700; color:var(--dourado)}
.gate .cos{font:500 12px/1.4 var(--f-mono); letter-spacing:.14em; color:var(--side-muted); gap:10px 22px}
.gate .txt{max-width:none; align-items:center; padding:40px 24px; position:relative; z-index:1}
.gate .txt>*{width:100%; max-width:440px}
.entrar{background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:34px 32px; display:flex; flex-direction:column; gap:14px}
.entrar h1{font-size:34px; font-weight:700; letter-spacing:-.025em; margin:0}
.entrar .eyebrow{font:500 11.5px var(--f-mono)}
.entrar .entrar-form{display:flex; flex-direction:column; gap:12px; margin-top:4px}
.entrar .btn.grande{min-height:52px; font-size:16.5px; font-weight:600; border-radius:11px}
.entrar input{min-height:50px; font-size:17px}
.entrar .small{border-top:1px solid var(--line); padding-top:14px; margin:4px 0 0}
@media (max-width:900px){
  .gate .art{min-height:0; padding:calc(28px + env(safe-area-inset-top,0px)) 22px 54px; background:var(--obra) right -40px bottom/auto 78% no-repeat, var(--faixa); gap:18px}
  .gate .mark{font-size:36px}
  .gate .cos{font-size:10.5px; letter-spacing:.1em; gap:4px 16px}
  .gate .txt{padding:0 16px 40px; margin-top:-30px}
  .entrar{padding:26px 22px}
  .entrar h1{font-size:30px}
}