/* Telas de exemplo do Point, feitas em HTML/CSS (não são prints). Compartilhadas pelas três direções.
   Nomes: só a equipe autorizada (Thiago, Aline, André, João Luiz); o resto aparece por iniciais. */

.av{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--t-claro);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:-.01em}
.av.g{background:#ECEFEE;color:#3E4B49}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--t-claro);color:var(--ink)}
.pill.ok::before{background:var(--t)}
.pill.pausa{background:var(--amb-bg);color:#7A4A00}
.pill.aus{background:var(--red-bg);color:#8E2A22}
.pill.neutro{background:#ECEFEE;color:#3E4B49}
.pill.nob::before{display:none}

/* ---------- janela do painel ---------- */
.janela{container-type:inline-size;background:#fff;border-radius:22px;box-shadow:var(--sombra);overflow:hidden;color:var(--lt);font-size:14px;line-height:1.35;text-align:left}
.janela .jt{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.janela .jt .ttl{font-weight:700;font-size:15px;letter-spacing:-.01em}
.janela .jt .sub{font-size:12.5px;color:var(--lt2)}
.janela .jt .dir{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--lt2)}
.janela .jt .ao-vivo{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ttx)}
.janela .jt .ao-vivo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--t);box-shadow:0 0 0 4px rgba(0,191,166,.18);animation:pulso 2s var(--ease) infinite}
@keyframes pulso{50%{box-shadow:0 0 0 7px rgba(0,191,166,0)}}
.janela .jt .ao-vivo.ontem{color:var(--lt2)}
.janela .jt .ao-vivo.ontem::before,.ao.ontem::before{background:#C3CBC9;box-shadow:none;animation:none}
.jmini{width:30px;height:30px;border-radius:9px;background:var(--ink);display:grid;place-items:center;flex:none}
.jmini svg{width:18px;height:18px}

/* contadores do quadro */
.cont{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:16px 20px 6px}
.cont div{padding:12px 14px;border-radius:14px;background:var(--paper)}
.cont b{display:block;font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.cont span{font-size:12.5px;color:var(--lt2);display:flex;align-items:center;gap:6px}
.cont span::before{content:"";width:7px;height:7px;border-radius:50%}
.cont .c1 span::before{background:var(--t)}
.cont .c2 span::before{background:#E09A2D}
.cont .c3 span::before{background:#D2554B}

/* linhas do quadro */
.linhas{padding:6px 12px 12px}
.linha{display:grid;grid-template-columns:34px minmax(0,1.5fr) minmax(0,1fr) 92px;align-items:center;gap:12px;padding:10px 8px;border-radius:12px}
.linha+.linha{border-top:1px solid var(--line)}
.linha .n b{display:block;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linha .n span{font-size:12px;color:var(--lt2)}
.linha .h{font-size:12.5px;color:var(--lt2);display:flex;flex-direction:column;gap:2px}
.linha .h em{font-style:normal;color:var(--lt);font-weight:600}
.linha .h .fora{color:#7A4A00;font-weight:700}
.linha .pill{justify-self:end}
@container (max-width:460px){
  .linha{grid-template-columns:30px minmax(0,1fr) 84px;gap:10px}
  .linha .h{display:none}
  .cont{gap:8px;padding:14px 14px 4px}
  .cont div{padding:10px}
  .cont b{font-size:22px}
  .janela .jt .dir .tx{display:none}
}

/* ---------- espelho do mês ---------- */
.tab{width:100%;border-collapse:collapse;font-size:13px}
.tab th{padding:10px 12px;text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--lt3);border-bottom:1px solid var(--line);white-space:nowrap}
.tab td{padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tab tr:last-child td{border-bottom:0}
.tab td.pos{color:var(--ttx);font-weight:700}
.tab td.neg{color:#8E2A22;font-weight:700}
.tab td.mut{color:var(--lt3)}
.tab .fer td{background:#F7FBFA;color:var(--lt2)}
.tab .aj td:first-child{box-shadow:inset 3px 0 0 #E09A2D}
.tab-box{overflow-x:auto;padding:4px 8px 8px}
@container (max-width:520px){ .tab .op{display:none} }

/* ---------- pedido de ajuste ---------- */
.ajuste{padding:18px 20px 20px}
.ajuste .q{display:flex;align-items:center;gap:12px}
.ajuste .q b{display:block;font-weight:600}
.ajuste .q span{font-size:12.5px;color:var(--lt2)}
.ajuste dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--paper);font-size:13px}
.ajuste dt{color:var(--lt2)}
.ajuste dd{font-weight:600}
.ajuste dd s{color:var(--lt3);font-weight:500}
.ajuste .bts{display:flex;gap:8px;margin-top:14px}
.ajuste .bts span{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 18px;border-radius:99px;font-size:13.5px;font-weight:700}
.ajuste .bts .ap{background:var(--t);color:var(--ink)}
.ajuste .bts .re{border:1px solid rgba(11,31,28,.16)}
.ajuste .orig{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--lt2)}
.ajuste .orig svg{width:16px;height:16px;color:var(--ttx);flex:none}

/* ---------- banco de horas ---------- */
.banco{padding:18px 20px 20px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.banco .anel{width:112px;height:112px;position:relative}
.banco .anel svg{width:100%;height:100%;transform:rotate(-90deg)}
.banco .anel circle{fill:none;stroke-width:10}
.banco .anel .bg{stroke:#ECEFEE}
.banco .anel .fg{stroke:var(--t);stroke-linecap:round}
.banco .anel b{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;font-weight:700;letter-spacing:-.03em}
.banco ul{display:grid;gap:8px;font-size:13px}
.banco li{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.banco li:last-child{border:0;padding:0}
.banco li span{color:var(--lt2)}
.banco li b{font-weight:700}

/* ---------- exportação para a folha ---------- */
.planilha .tab td:not(:first-child),.planilha .tab th:not(:first-child){text-align:right}
.planilha .rod{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 20px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--lt2)}
.planilha .rod .bt{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:99px;background:var(--ink);color:#fff;font-weight:700;font-size:13px}
.planilha .rod .bt svg{width:15px;height:15px}

/* ---------- mapa com cerca ---------- */
.mapa{position:relative;overflow:hidden;background:#F2F5F4}
.mapa svg.ruas{position:absolute;inset:0;width:100%;height:100%}
.mapa .ruas path{fill:none;stroke:#fff;stroke-linecap:round}
.mapa .ruas .q{fill:#E8EDEC;stroke:none}
.mapa .ruas .v{fill:#DDF3EE;stroke:none}
.cerca-c{position:absolute;border-radius:50%;border:2px solid var(--t);background:radial-gradient(circle,rgba(0,191,166,.16),rgba(0,191,166,.06) 70%);transform:translate(-50%,-50%)}
.cerca-c::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--t);animation:onda 3s var(--ease-out) infinite;opacity:0}
@keyframes onda{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.45);opacity:0}}
.pino{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center}
.pino .av{box-shadow:0 0 0 3px #fff,0 10px 24px -8px rgba(11,31,28,.45)}
.pino::after{content:"";width:2px;height:10px;background:#fff;box-shadow:0 0 0 1px rgba(11,31,28,.08)}
.pino.fora .av{background:var(--amb-bg);color:#7A4A00}
.rotulo{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:0 14px 34px -16px rgba(11,31,28,.4),0 0 0 1px rgba(11,31,28,.06)}
.rotulo i{width:8px;height:8px;border-radius:50%;background:var(--t);flex:none}
.rotulo.av-a i{background:#E09A2D}

/* ---------- tela do app (encaixada na tela do celular da foto; tudo em cqw) ---------- */
.app{position:absolute;overflow:hidden;background:#fff;container-type:inline-size;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--lt);font-family:var(--sans)}
.app .ilha{position:absolute;left:50%;top:3%;width:30%;height:3.4%;margin-left:-15%;border-radius:99px;background:#0B1F1C}
.app .a-top{width:100%;display:flex;align-items:center;justify-content:space-between;padding:17cqw 9cqw 0}
.app .a-top .pw{font-size:10cqw;color:var(--ink)}
.app .a-top .av{width:13cqw;height:13cqw;font-size:4.6cqw}
.app .a-hora{margin-top:8cqw;font-size:23cqw;font-weight:700;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.app .a-dia{margin-top:2cqw;font-size:5.4cqw;color:var(--lt2)}
.app .a-self{position:relative;margin-top:8cqw;width:40cqw;height:40cqw;border-radius:50%;background:linear-gradient(160deg,#E3F7F3,#C9EEE7);display:grid;place-items:center;box-shadow:0 0 0 1.4cqw #fff,0 0 0 2.2cqw var(--t)}
.app .a-self svg{width:58%;height:58%;color:var(--ttx)}
.app .a-self i{position:absolute;right:0;bottom:2cqw;width:12cqw;height:12cqw;border-radius:50%;background:var(--t);display:grid;place-items:center;box-shadow:0 0 0 1.2cqw #fff}
.app .a-self i svg{width:7cqw;height:7cqw;color:var(--ink)}
.app .a-loc{margin-top:7cqw;display:inline-flex;align-items:center;gap:2.4cqw;padding:2.6cqw 4.4cqw;border-radius:99px;background:var(--t-claro);font-size:5cqw;font-weight:700;color:var(--ink)}
.app .a-loc svg{width:5.6cqw;height:5.6cqw}
.app .a-bt{margin-top:auto;margin-bottom:10cqw;width:80%;padding:5.4cqw 0;border-radius:99px;background:var(--t);color:var(--ink);font-size:6cqw;font-weight:800;letter-spacing:-.01em}
.app .a-ok{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4cqw;background:var(--t);color:var(--ink);opacity:0}
.app .a-ok span{display:grid;place-items:center;width:30cqw;height:30cqw;border-radius:50%;background:#fff}
.app .a-ok span svg{width:16cqw;height:16cqw}
.app .a-ok b{font-size:9cqw;line-height:1.1;letter-spacing:-.02em}
.app .a-ok em{font-style:normal;font-size:5.4cqw;font-weight:600}

/* ---------- tela do painel encaixada no tablet ---------- */
.tab-tela{position:absolute;overflow:hidden;background:#fff;container-type:inline-size;font-family:var(--sans);color:var(--lt);text-align:left}
.tab-tela .tt{display:flex;align-items:center;gap:2cqw;padding:3.4cqw 4cqw 2.4cqw;border-bottom:.3cqw solid var(--line)}
.tab-tela .tt .pw{font-size:4.2cqw;color:var(--ink)}
.tab-tela .tt span{margin-left:auto;font-size:2.4cqw;font-weight:700;color:var(--ttx)}
.tab-tela .tc{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;padding:3cqw 4cqw 1cqw}
.tab-tela .tc div{padding:2cqw 2.4cqw;border-radius:2.4cqw;background:var(--paper)}
.tab-tela .tc b{display:block;font-size:6cqw;line-height:1;letter-spacing:-.04em}
.tab-tela .tc span{font-size:2.3cqw;color:var(--lt2)}
.tab-tela .tl{padding:1cqw 4cqw}
.tab-tela .tl div{display:flex;align-items:center;gap:2cqw;padding:1.6cqw 0;border-bottom:.3cqw solid var(--line);font-size:2.6cqw}
.tab-tela .tl div:last-child{border:0}
.tab-tela .tl .av{width:5.4cqw;height:5.4cqw;font-size:2cqw}
.tab-tela .tl b{font-weight:600}
.tab-tela .tl .pill{margin-left:auto;height:4cqw;padding:0 1.8cqw;font-size:2.1cqw}
.tab-tela .tl .pill::before{width:1.1cqw;height:1.1cqw}