/* ============================================================================
   MINHA JORNADA (portal do cliente) — Jornada v2, 2026-10-05.
   Só tokens do portal (tokens.css). Prefixo .jv-
   ========================================================================== */
.jv-mut{font-size:12.5px; color:var(--ink-500)}
.jv-emps{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
.jv-emp{border:1px solid var(--border-strong); background:var(--surface); border-radius:var(--r-full); padding:6px 12px; font-size:12.5px; font-weight:600; cursor:pointer}
.jv-emp.on{background:var(--ink-900); color:#fff; border-color:var(--ink-900)}

.jv-marco{display:flex; gap:14px; align-items:center; background:linear-gradient(135deg,var(--success-bg),var(--surface));
  border:1px solid var(--success-bg); border-radius:var(--r-md); padding:14px 16px; margin-bottom:14px}
.jv-marco-ic{font-size:28px}
.jv-marco .btn{margin-left:auto}

.jv-hero{display:grid; grid-template-columns:1.3fr 1fr; gap:18px; background:var(--shell-800); color:var(--shell-text);
  border-radius:var(--r-xl); padding:22px; margin-bottom:14px}
.jv-hero h1{color:#fff; font-size:24px; letter-spacing:-.02em; margin:8px 0 4px; line-height:1.25}
.jv-hero-mut{font-size:13px; color:var(--shell-text-2)}
.jv-cont{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.jv-cont > div{background:var(--shell-700); border:1px solid var(--shell-line); border-radius:var(--r-sm); padding:10px 12px; min-width:74px; text-align:center}
.jv-cont b{display:block; font-family:var(--font-display); font-size:24px; color:#fff}
.jv-cont span{font-size:11px; color:var(--shell-text-2)}
.jv-cont .jv-cont-txt{min-width:auto; text-align:left; display:flex; align-items:center}
.jv-prox{background:var(--surface); color:var(--ink-900); border-radius:var(--r-lg); padding:16px; display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.jv-prox-r{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--brand)}
.jv-prox h3{font-size:16px; margin:0}
.jv-prox .btn{margin-top:6px}
.jv-track{height:8px; width:100%; background:var(--surface-3); border-radius:var(--r-full); overflow:hidden; margin-top:4px}
.jv-track i{display:block; height:100%; background:var(--brand); border-radius:inherit}
.jv-upload{cursor:pointer}
.jv-upload.is-loading{opacity:.6; pointer-events:none}

.jv-card{margin-bottom:14px}
.jv-trilho{display:grid; grid-template-columns:repeat(var(--n,9),minmax(0,1fr)); margin:6px 0 18px}
.jv-fase{display:flex; flex-direction:column; align-items:center; text-align:center; font-size:11.5px; color:var(--ink-500);
  position:relative; cursor:pointer; padding:0 2px; border:0; background:none; font-family:inherit}
.jv-fase:before{content:""; position:absolute; top:15px; left:-50%; width:100%; height:3px; background:var(--surface-3); z-index:0}
.jv-fase:first-child:before{display:none}
.jv-fase.feita:before,.jv-fase.atual:before{background:var(--success)}
.jv-dot{width:32px; height:32px; border-radius:50%; background:var(--surface); border:3px solid var(--surface-3); display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:13px; z-index:1; margin-bottom:6px; color:var(--ink-400)}
.jv-fase.feita .jv-dot{background:var(--success); border-color:var(--success); color:#fff}
.jv-fase.atual .jv-dot{border-color:var(--brand); color:var(--brand); box-shadow:0 0 0 5px var(--brand-50)}
.jv-fase.atual{color:var(--ink-900); font-weight:700}
.jv-fase.sel .jv-dot{outline:2px solid var(--ink-900); outline-offset:3px}
.jv-fase small{display:block; font-weight:500; color:var(--ink-400); font-size:10.5px; margin-top:2px; min-height:13px}

.jv-fase-h{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap}
.jv-fase-h h2{font-size:19px; margin:6px 0 2px}
.jv-blocos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px}
.jv-bl{background:var(--surface-2); border-radius:var(--r-sm); padding:12px}
.jv-bl > b{font-family:var(--font-display); font-size:13px; display:block; margin-bottom:6px}
.jv-bl p{margin:0; font-size:13px; line-height:1.55; color:var(--ink-700)}
.jv-ck{display:flex; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--border); font-size:13px}
.jv-ck .jv-ck-t{flex:1; min-width:0}
.jv-ck .jv-ck-t small{display:block; color:var(--ink-500); font-size:12px; margin-top:2px}
.jv-ck.feito .jv-ck-t > span{color:var(--ink-500)}
.jv-ck .btn{flex-shrink:0}
.jv-ic{width:22px; height:22px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700}
.jv-ic.ok{background:var(--success); border-color:var(--success); color:#fff}
.jv-ic.info{background:var(--surface-2); border-color:var(--border); color:var(--ink-700); font-weight:400}
.jv-form-t{display:block; font-size:13px; margin:14px 0 6px}
.jv-form-g{display:grid; grid-template-columns:1fr 1fr; gap:0 12px}
@media (max-width:560px){.jv-form-g{grid-template-columns:1fr}}
.jv-vant{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.jv-vant li{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; background:var(--surface-2); border-left:3px solid var(--success); font-size:13px}
.jv-vant li span{color:var(--ink-700); line-height:1.5}
@keyframes jvPisca{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px var(--success)}}
.jv-pisca{animation:jvPisca 1.6s ease 2}
.jv-ck:first-of-type{border-top:0}
.jv-ck input{width:18px; height:18px; margin-top:1px; accent-color:var(--success); flex-shrink:0}
.jv-ck small{display:block; font-size:11.5px; color:var(--ink-500)}
.jv-contato{display:flex; gap:10px; align-items:center}
.jv-av{width:38px; height:38px; border-radius:50%; background:var(--shell-700); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0}
.jv-acoes{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap}

.jv-2col{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.jv-doc{display:flex; align-items:center; gap:10px; padding:9px 0; border:0; border-top:1px solid var(--border); font-size:12.5px; width:100%; background:none; font-family:inherit; color:inherit}
.jv-doc:first-of-type{border-top:0}
button.jv-doc{cursor:pointer}
.jv-doc-ic{width:30px; height:36px; border-radius:4px; background:var(--brand-50); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; flex-shrink:0}
.jv-doc-ic.pend{background:var(--warning-bg); color:var(--warning-ink)}
.jv-hist{position:relative; padding-left:18px}
.jv-hist:before{content:""; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:var(--border)}
.jv-hist > div{position:relative; padding:0 0 12px; font-size:12.5px}
.jv-hist > div:before{content:""; position:absolute; left:-17px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--success); border:2px solid var(--surface)}
.jv-nps{border-top:1px solid var(--border); padding-top:10px; margin-top:4px; font-size:13px}
.jv-nps-n{display:flex; gap:4px; margin:8px 0 4px; flex-wrap:wrap}
.jv-nps-n button{width:28px; height:28px; border-radius:6px; border:1px solid var(--border-strong); background:var(--surface); font-size:12px; cursor:pointer}
.jv-nps-n button:hover{background:var(--ink-900); color:#fff}

.jv-trilho-nome{display:none; text-align:center; font-size:12.5px; margin:-8px 0 12px; color:var(--ink-600)}
.jv-trilho-nome b{color:var(--ink-900)}
/* Celular (2026-10-06): todas as fases cabem na tela, sem rolar para o lado —
   bolinhas menores em 9 colunas e o nome só da fase atual/escolhida (o nome
   completo aparece logo abaixo, no título da fase). minmax(0,1fr) evita que o
   conteúdo empurre a largura da página. */
@media(max-width:980px){
  .jv-hero,.jv-blocos,.jv-2col{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .jv-hero{padding:16px} .jv-hero h1{font-size:20px}
  .jv-trilho{gap:0}
  .jv-fase{font-size:0; padding:0}
  .jv-fase small{display:none}
  .jv-dot{width:26px; height:26px; font-size:11px; border-width:2px; margin-bottom:0}
  .jv-fase:before{top:12px; height:2px}
  .jv-fase.atual .jv-dot{box-shadow:0 0 0 3px var(--brand-50)}
  .jv-fase.sel .jv-dot{outline-offset:2px}
  .jv-trilho-nome{display:block}
  .jv-card > .card-head .jv-mut{display:none}
  .jv-cont > div{min-width:64px; padding:8px 10px}
  .jv-cont b{font-size:20px}
  .jv-marco{flex-wrap:wrap} .jv-marco .btn{margin-left:0}
  .jv-msg, .jv-doc b{word-break:break-word}
}