/* ============================================================================
   PORTAL VITRINI v2 (HOL-780). Padrão aprendido no CRM do ERP da Berry:
   barra lateral escura com contadores, cabeçalho com alertas, cartões de número
   que filtram, barra de filtros, tabela com cabeçalho e 1ª coluna fixos, ficha com
   próxima ação e linha do tempo. Cores e tipografia da marca Vitrini (tokens).
   Depende de vitrini-tokens.css e app.css (importar antes). Sem biblioteca externa.
   ========================================================================== */

/* barra lateral: petróleo e creme OFICIAIS da marca (mesmos valores do tema escuro dos tokens) */
.shell{
  --sb-bg:#10262B; --sb-text:#F6F0E4; --sb-muted:#ADBCBD; --sb-line:#2C4449; --sb-hover:#16323A;
  display:grid; grid-template-columns:236px minmax(0,1fr); min-height:100dvh; background:var(--v-bg);
}
.lateral{
  background:var(--sb-bg); color:var(--sb-text); position:sticky; top:0; height:100dvh;
  display:flex; flex-direction:column; overflow-y:auto;
}
.lateral__marca{ padding:var(--v-s4) var(--v-s4) var(--v-s3); border-bottom:1px solid var(--sb-line); }
.lateral .wordmark{ color:var(--sb-text); font-size:1.2rem; }
.lateral__quem{ display:block; margin-top:2px; font-size:var(--v-fs-caption); color:var(--sb-muted); overflow-wrap:anywhere; }
.lateral__nav{ padding:var(--v-s3) 0; flex:1; display:flex; flex-direction:column; }
.lateral__grupo{ font-size:var(--v-fs-overline); text-transform:uppercase; letter-spacing:var(--v-tracking-label);
  color:var(--sb-muted); padding:var(--v-s3) var(--v-s4) var(--v-s1); }
.nav2{
  display:flex; align-items:center; gap:var(--v-s3); width:100%; text-align:left;
  padding:10px var(--v-s4); background:none; border:0; border-left:3px solid transparent;
  color:var(--sb-text); font:inherit; font-size:var(--v-fs-small); cursor:pointer; text-decoration:none;
}
.nav2:hover{ background:var(--sb-hover); }
.nav2[aria-current="page"]{ background:var(--sb-hover); border-left-color:var(--v-accent); font-weight:var(--v-fw-bold); }
.nav2 svg{ width:17px; height:17px; flex:none; opacity:.8; }
.nav2__n{
  margin-left:auto; min-width:22px; text-align:center; font-size:var(--v-fs-caption); font-weight:var(--v-fw-bold);
  background:var(--v-danger); color:#10262B; border-radius:var(--v-radius-pill); padding:0 7px;
}
.nav2__n--neutro{ background:var(--sb-line); color:var(--sb-text); }
.lateral__rodape{ padding:var(--v-s3) var(--v-s4); border-top:1px solid var(--sb-line); font-size:var(--v-fs-caption); color:var(--sb-muted); display:flex; gap:var(--v-s3); align-items:center; flex-wrap:wrap; }
.lateral__rodape a, .lateral__rodape button{ color:var(--sb-text); background:none; border:0; padding:0; font:inherit; cursor:pointer; text-decoration:underline; }

.principal{ min-width:0; display:flex; flex-direction:column; }
.cabeca{
  display:flex; justify-content:space-between; align-items:center; gap:var(--v-s4); flex-wrap:wrap;
  padding:var(--v-s4) var(--v-s6); background:var(--v-surface); border-bottom:1px solid var(--v-line);
  position:sticky; top:0; z-index:var(--v-z-sticky);
}
.cabeca h1{ font-size:1.25rem; margin:0; letter-spacing:var(--v-tracking-tight); }
.cabeca__sub{ margin:2px 0 0; font-size:var(--v-fs-small); color:var(--v-text-muted); max-width:70ch; }
.cabeca__acoes{ display:flex; gap:var(--v-s2); align-items:center; flex-wrap:wrap; }
.sino{ display:inline-flex; align-items:center; gap:var(--v-s2); }
.sino__n{ background:var(--v-text-subtle); color:var(--v-surface); border-radius:var(--v-radius-pill); padding:0 8px; font-weight:var(--v-fw-bold); font-size:var(--v-fs-caption); }
.sino--tem .sino__n{ background:var(--v-danger); color:var(--v-surface); }
.tela{ padding:var(--v-s5) var(--v-s6) var(--v-s7); min-width:0; }
.tela:focus{ outline:none; }
.rodape2{ padding:var(--v-s3) var(--v-s6); border-top:1px solid var(--v-line); color:var(--v-text-subtle); font-size:var(--v-fs-caption); }
.migalha{ font-size:var(--v-fs-small); margin:0 0 var(--v-s3); color:var(--v-text-muted); }
.migalha a, .migalha button{ color:var(--v-info); background:none; border:0; padding:0; font:inherit; text-decoration:underline; cursor:pointer; }

/* números que filtram */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--v-s3); margin-bottom:var(--v-s4); }
.kpi{
  display:flex; flex-direction:column; gap:2px; text-align:left; font:inherit; color:inherit; cursor:pointer;
  background:var(--v-surface); border:1px solid var(--v-line); border-radius:var(--v-radius-sm); padding:var(--v-s3) var(--v-s4);
}
.kpi:hover, .kpi:focus-visible{ border-color:var(--v-line-strong); }
.kpi[aria-pressed="true"]{ border-color:var(--v-accent); box-shadow:inset 0 -3px 0 var(--v-accent); }
.kpi__r{ font-size:var(--v-fs-overline); text-transform:uppercase; letter-spacing:var(--v-tracking-label); color:var(--v-text-subtle); }
.kpi__v{ font-size:1.6rem; font-weight:var(--v-fw-bold); line-height:1.1; font-variant-numeric:tabular-nums; }
.kpi__v--risco{ color:var(--v-danger); } .kpi__v--atencao{ color:var(--v-warning); } .kpi__v--ok{ color:var(--v-success); }
.kpi__n{ font-size:var(--v-fs-caption); color:var(--v-text-subtle); }

/* barra de filtros */
.filtros{ display:flex; gap:var(--v-s2); flex-wrap:wrap; align-items:center; margin-bottom:var(--v-s3); }
.filtros select, .filtros input{
  font:inherit; font-size:var(--v-fs-small); padding:9px var(--v-s3); min-height:40px;
  background:var(--v-surface); color:var(--v-text); border:1px solid var(--v-line-strong); border-radius:var(--v-radius-xs);
}
.filtros input[type=search]{ flex:1; min-width:180px; }
.conta{ font-size:var(--v-fs-small); color:var(--v-text-muted); margin:0 0 var(--v-s2); max-width:none; }

/* lista com rolagem e cabeçalho/1ª coluna fixos */
.lista{ background:var(--v-surface); border:1px solid var(--v-line); border-radius:var(--v-radius-sm); overflow:auto; max-height:min(66vh,640px); }
.lista--solta{ max-height:none; }
.lista table{ border-collapse:separate; border-spacing:0; width:100%; font-size:var(--v-fs-small); }
.lista th{
  position:sticky; top:0; z-index:2; text-align:left; white-space:nowrap; background:var(--v-surface-2);
  font-size:var(--v-fs-overline); text-transform:uppercase; letter-spacing:var(--v-tracking-label); color:var(--v-text-subtle);
  padding:var(--v-s3); border-bottom:1px solid var(--v-line-strong);
}
.lista td{ padding:var(--v-s3); border-bottom:1px solid var(--v-line); vertical-align:top; background:var(--v-surface); }
.lista th:first-child, .lista td:first-child{ position:sticky; left:0; z-index:1; box-shadow:1px 0 0 var(--v-line); }
.lista th:first-child{ z-index:3; }
.lista tr:hover td{ background:var(--v-surface-2); }
.lista tr.l--risco td{ background:color-mix(in srgb,var(--v-danger) 7%,var(--v-surface)); }
.lista tr.l--atencao td{ background:color-mix(in srgb,var(--v-warning) 6%,var(--v-surface)); }
.lista .num{ text-align:right; font-variant-numeric:tabular-nums; }
.lista td .peso{ margin:0; max-width:46ch; }
.lista a.nome, a.nome, button.nome{ font-weight:var(--v-fw-bold); color:var(--v-info); text-decoration:underline; text-underline-offset:2px; background:none; border:0; padding:0; font:inherit; font-weight:var(--v-fw-bold); cursor:pointer; text-align:left; }
.lista .vazio-l{ padding:var(--v-s6); text-align:center; color:var(--v-text-subtle); }
.sub{ font-size:var(--v-fs-caption); color:var(--v-text-subtle); display:block; }
.motivos{ margin:0; padding:0; list-style:none; display:grid; gap:2px; }
.motivos li::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; background:var(--v-danger); }
.motivos li.m--atencao::before{ background:var(--v-warning); border-radius:1px; rotate:45deg; }
.motivos li.m--info::before{ background:var(--v-text-subtle); }

/* semáforo: forma e cor */
.sem{ display:inline-flex; align-items:center; gap:6px; font-weight:var(--v-fw-bold); font-size:var(--v-fs-caption); padding:3px 10px 3px 8px; border-radius:var(--v-radius-pill); white-space:nowrap; border:1px solid currentColor; }
.sem::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.sem--risco{ color:var(--v-danger); background:color-mix(in srgb,var(--v-danger) 10%,transparent); }
.sem--atencao{ color:var(--v-warning); background:color-mix(in srgb,var(--v-warning) 10%,transparent); }
.sem--atencao::before{ border-radius:1px; rotate:45deg; }
.sem--ok{ color:var(--v-success); background:color-mix(in srgb,var(--v-success) 10%,transparent); }
.sem--neutro{ color:var(--v-text-subtle); background:var(--v-surface-2); }
.sem--neutro::before{ background:transparent; border:1.5px solid currentColor; }

/* blocos (cartões de ficha) */
.bloco2{ background:var(--v-surface); border:1px solid var(--v-line); border-radius:var(--v-radius-sm); margin-bottom:var(--v-s4); scroll-margin-top:96px; }
.bloco2__t{ display:flex; justify-content:space-between; align-items:center; gap:var(--v-s3); flex-wrap:wrap; padding:var(--v-s3) var(--v-s4); border-bottom:1px solid var(--v-line); }
.bloco2__t h2{ margin:0; font-size:var(--v-fs-small); text-transform:uppercase; letter-spacing:var(--v-tracking-label); }
.bloco2__c{ padding:var(--v-s4); }
.duas{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--v-s4); align-items:start; }
.tres{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--v-s4); }

/* ficha: título + chips + etapas */
.ficha-t{ display:flex; gap:var(--v-s2); align-items:center; flex-wrap:wrap; margin-bottom:var(--v-s3); }
.ficha-t h2{ margin:0 var(--v-s2) 0 0; font-size:1.5rem; }
.chip{ font-size:var(--v-fs-caption); font-weight:var(--v-fw-label); padding:2px 10px; border-radius:var(--v-radius-pill); border:1px solid var(--v-line-strong); background:var(--v-surface-2); color:var(--v-text-muted); }
.etapas{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(110px,1fr); gap:var(--v-s2); overflow-x:auto; margin-bottom:var(--v-s4); padding-bottom:2px; }
.etapa{ border:1px solid var(--v-line); border-top:4px solid var(--v-line-strong); border-radius:var(--v-radius-xs); padding:var(--v-s2) var(--v-s3); background:var(--v-surface); font-size:var(--v-fs-small); min-height:48px; }
.etapa small{ display:block; color:var(--v-text-subtle); font-size:var(--v-fs-caption); }
.etapa--feita{ border-top-color:var(--v-success); }
.etapa--atual{ border-color:var(--v-accent); border-top-color:var(--v-accent); font-weight:var(--v-fw-bold); background:var(--v-accent-tint); }
.etapa[role=button]{ cursor:pointer; text-align:left; font-family:inherit; color:inherit; }

/* próxima ação e alertas */
.proxima{ border:1px solid var(--v-line); border-left:4px solid var(--v-accent); border-radius:var(--v-radius-sm); background:var(--v-surface); padding:var(--v-s4); margin-bottom:var(--v-s4); display:flex; justify-content:space-between; gap:var(--v-s4); align-items:center; flex-wrap:wrap; }
.proxima__r{ font-size:var(--v-fs-overline); text-transform:uppercase; letter-spacing:var(--v-tracking-label); color:var(--v-text-subtle); margin:0 0 2px; }
.proxima__t{ font-weight:var(--v-fw-bold); font-size:1.0625rem; margin:0; max-width:60ch; }
.proxima__d{ margin:2px 0 0; font-size:var(--v-fs-small); color:var(--v-text-muted); max-width:60ch; }
.proxima--vermelho{ border-left-color:var(--v-danger); }
.proxima--verde{ border-left-color:var(--v-success); }
.alerta{ display:flex; gap:var(--v-s3); align-items:center; justify-content:space-between; flex-wrap:wrap; padding:var(--v-s3) var(--v-s4); border-bottom:1px solid var(--v-line); }
.alerta:last-child{ border-bottom:0; }
.alerta__t{ margin:0; max-width:none; font-size:var(--v-fs-small); flex:1; min-width:200px; }
.alerta__t b{ display:block; }
.alerta--alta{ box-shadow:inset 4px 0 0 var(--v-danger); }
.alerta--media{ box-shadow:inset 4px 0 0 var(--v-warning); }

/* linha do tempo */
.tempo{ list-style:none; margin:0; padding:0; }
.tempo li{ display:grid; grid-template-columns:96px 1fr; gap:var(--v-s3); padding:var(--v-s3) 0; border-bottom:1px solid var(--v-line); font-size:var(--v-fs-small); }
.tempo li:last-child{ border-bottom:0; }
.tempo time{ color:var(--v-text-subtle); font-variant-numeric:tabular-nums; font-size:var(--v-fs-caption); }
.tempo .quem{ display:inline-block; font-size:var(--v-fs-caption); font-weight:var(--v-fw-label); padding:0 8px; margin-right:6px; border-radius:var(--v-radius-pill); border:1px solid var(--v-line-strong); background:var(--v-surface-2); }
.tempo .quem--voce{ border-color:var(--v-accent); background:var(--v-accent-tint); }

/* trilha dos 8 passos */
.t8{ list-style:none; margin:0; padding:0; display:grid; gap:var(--v-s2); }
.t8__p{ display:grid; grid-template-columns:2.25rem 1fr auto; gap:var(--v-s3); align-items:start; padding:var(--v-s3); border:1px solid var(--v-line); border-radius:var(--v-radius-xs); background:var(--v-surface); }
.t8__p--atual{ border-color:var(--v-accent); background:var(--v-accent-tint); }
.t8__p--concluido .t8__n{ background:var(--v-success); border-color:var(--v-success); color:var(--v-surface); }
.t8__n{ width:2rem; height:2rem; border-radius:50%; border:1.5px solid var(--v-line-strong); display:inline-flex; align-items:center; justify-content:center; font-weight:var(--v-fw-bold); }
.t8__t{ font-weight:var(--v-fw-bold); }
.t8__d{ margin:2px 0 0; font-size:var(--v-fs-small); color:var(--v-text-muted); max-width:none; }
.t8__acao{ margin-top:var(--v-s2); display:flex; gap:var(--v-s2); flex-wrap:wrap; align-items:center; }
.t8__dono{ font-size:var(--v-fs-caption); color:var(--v-text-subtle); white-space:nowrap; }

/* cartões de contratado / catálogo */
.cartoes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--v-s3); }
.cargo{ background:var(--v-surface); border:1px solid var(--v-line); border-radius:var(--v-radius-sm); padding:var(--v-s4); display:flex; flex-direction:column; gap:var(--v-s2); text-align:left; font:inherit; color:inherit; }
button.cargo{ cursor:pointer; } button.cargo:hover{ border-color:var(--v-line-strong); }
.cargo__n{ font-weight:var(--v-fw-bold); font-size:1.0625rem; margin:0; }
.cargo__e{ font-size:var(--v-fs-caption); color:var(--v-text-subtle); margin:0; }
.cargo__f{ font-size:var(--v-fs-small); color:var(--v-text-muted); margin:0; max-width:none; }
.selo{ font-size:var(--v-fs-overline); font-weight:var(--v-fw-bold); text-transform:uppercase; letter-spacing:var(--v-tracking-label); padding:1px 8px; border-radius:var(--v-radius-pill); border:1px solid var(--v-accent); color:var(--v-accent-ink); background:var(--v-accent-tint); align-self:flex-start; }
.fl{ margin:0 0 var(--v-s3); padding-left:1.1rem; font-size:var(--v-fs-small); max-width:none; }
.fl li{ margin-bottom:2px; }

/* conversa dentro da ficha */
.conv{ max-height:380px; overflow-y:auto; padding:var(--v-s2) 0; }
.nota-interna{ border-style:dashed; }

.dado-ficticio{ font-size:var(--v-fs-caption); color:var(--v-warning); font-weight:var(--v-fw-bold); }
.entrar{ max-width:30rem; margin:12vh auto; padding:0 var(--v-s5); }
.erro-tela{ border:1px solid var(--v-danger); border-radius:var(--v-radius-sm); padding:var(--v-s4); background:color-mix(in srgb,var(--v-danger) 8%,var(--v-surface)); }
.erro-tela b{ color:var(--v-danger); }

/* celular: o menu vira faixa no topo, como no CRM da Berry */
@media (max-width:900px){
  .shell{ grid-template-columns:minmax(0,1fr); }
  .lateral{ position:static; height:auto; overflow:visible; }
  .lateral__marca{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--v-s3); border-bottom:0; padding-bottom:var(--v-s2); }
  .lateral__nav{ flex-direction:row; flex-wrap:wrap; padding:0 var(--v-s2) var(--v-s3); }
  .lateral__grupo{ display:none; }
  .nav2{ width:auto; border-left:0; border-bottom:3px solid transparent; padding:9px var(--v-s3); }
  .nav2[aria-current="page"]{ border-bottom-color:var(--v-accent); }
  .nav2 svg{ display:none; }
  .lateral__rodape{ display:none; }
  .cabeca{ position:static; padding:var(--v-s4); }
  .tela{ padding:var(--v-s4) var(--v-s4) var(--v-s7); }
  .duas{ grid-template-columns:minmax(0,1fr); }
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tempo li{ grid-template-columns:1fr; gap:2px; }
  .t8__p{ grid-template-columns:2.25rem 1fr; }
  .t8__dono{ grid-column:2; }
  .rodape2{ padding:var(--v-s3) var(--v-s4); }
}
@media print{ .lateral,.cabeca{ display:none !important; } .shell{ display:block; } }

.barra{ height:8px; background:var(--v-surface-3); border-radius:var(--v-radius-pill); overflow:hidden; }
.barra i{ display:block; height:100%; background:var(--v-accent); }
.filtros select{ width:auto; min-width:11rem; max-width:100%; }
.filtros input[type=search]{ width:auto; flex:1 1 180px; }
.cargo .sem, .cargo .selo{ align-self:flex-start; }