/* ---------------------------------------------------------------------
   TOKENS
--------------------------------------------------------------------- */
.pcti-app{
  --page:      #eef1f7;
  --surface:   #ffffff;
  --surface-2: #e8edf6;
  --ink:       #0b1220;
  --ink-2:     #3d4a63;
  --muted:     #6b7690;
  --line:      #dbe1ec;
  --line-strong:#c1c9da;

  --accent:      #2563eb;
  --accent-ink:  #1e3a8a;
  --accent-soft: #dbe6fc;
  --on-accent:   #f7faff;
  --brand-plate: #060910;

  --good:     #0ca30c;
  --warning:  #d98c00;
  --serious:  #ec835a;
  --critical: #d03b3b;

  --good-soft:#dcefd6;
  --warn-soft:#faedcf;
  --crit-soft:#f6dbd8;

  --cat-1: #2a78d6; /* rede */
  --cat-2: #eb6834; /* impressora */
  --cat-3: #1baf7a; /* email */
  --cat-4: #c98500; /* acesso */
  --cat-5: #c14f7d; /* software */
  --cat-6: #3a8f3a; /* hardware */
  --cat-7: #6a55c9; /* outro */
  --cat-8: #0e9aa7; /* dúvidas */
  --cat-9: #9c5b1f; /* remanejo */
  --cat-10:#7a51b8; /* periféricos */
  --cat-11:#118a5c; /* insumos */
  --cat-12:#b0432f; /* treinamento */
  --cat-13:#4a6fa8; /* compras */

  /* cores dos post-its das Anotações — entram como tinta: o card recebe uma
     mistura delas com o fundo, então a mesma lista serve nos dois temas */
  --nota-1:#d9a41f; --nota-2:#2f9b57; --nota-3:#2f7fd4; --nota-4:#cf5f8e;
  --nota-5:#d9682b; --nota-6:#7a5cc9; --nota-7:#6a7383;

  --seq-100:#cde2fb; --seq-250:#86b6ef; --seq-400:#3987e5; --seq-500:#256abf; --seq-650:#104281;

  --radius: 10px;
  --radius-sm: 6px;
  --font-head: "Barlow Semi Condensed", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --shadow-card: 0 1px 2px rgba(23,33,27,0.06);
  --shadow-pop:  0 12px 32px rgba(23,33,27,0.18);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pcti-app{
    --page:      #060910;
    --surface:   #0d131c;
    --surface-2: #131b26;
    --ink:       #f0f4ff;
    --ink-2:     #c3cbe0;
    --muted:     #8892ab;
    --line:      #1e2733;
    --line-strong:#2c3646;

    --accent:      #3b82f6;
    --accent-ink:  #bcd2ff;
    --accent-soft: #16233d;
    --on-accent:   #f7faff;
    --brand-plate: #060910;

    --good:     #3fc23f;
    --warning:  #e3a83a;
    --serious:  #f0946c;
    --critical: #e66767;

    --good-soft:#183420;
    --warn-soft:#3a2f14;
    --crit-soft:#3a1c1c;

    --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #33c795; --cat-4: #d99a1f;
    --cat-5: #d97ba0; --cat-6: #4fa84f; --cat-7: #8b7ae0;
    --cat-8: #22b8c7; --cat-9: #c9793f;
    --cat-10:#a385e0; --cat-11:#2eb583;
    --cat-12:#e2705a; --cat-13:#7e9fd4;

    --nota-1:#e3b64a; --nota-2:#45b972; --nota-3:#5aa0e8; --nota-4:#e07fa8;
    --nota-5:#e88a52; --nota-6:#9b82e0; --nota-7:#8a93a5;

    --seq-100:#16233d; --seq-250:#1d3a63; --seq-400:#3987e5; --seq-500:#6badf5; --seq-650:#a9d0fb;

    --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-pop:  0 20px 44px rgba(0,0,0,0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] .pcti-app{
  --page:      #060910;
  --surface:   #0d131c;
  --surface-2: #131b26;
  --ink:       #f0f4ff;
  --ink-2:     #c3cbe0;
  --muted:     #8892ab;
  --line:      #1e2733;
  --line-strong:#2c3646;

  --accent:      #3b82f6;
  --accent-ink:  #bcd2ff;
  --accent-soft: #16233d;
  --on-accent:   #f7faff;
  --brand-plate: #060910;

  --good:     #3fc23f;
  --warning:  #e3a83a;
  --serious:  #f0946c;
  --critical: #e66767;

  --good-soft:#183420;
  --warn-soft:#3a2f14;
  --crit-soft:#3a1c1c;

  --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #33c795; --cat-4: #d99a1f;
  --cat-5: #d97ba0; --cat-6: #4fa84f; --cat-7: #8b7ae0;
  --cat-8: #22b8c7; --cat-9: #c9793f;
  --cat-10:#a385e0; --cat-11:#2eb583;
  --cat-12:#e2705a; --cat-13:#7e9fd4;

  --nota-1:#e3b64a; --nota-2:#45b972; --nota-3:#5aa0e8; --nota-4:#e07fa8;
  --nota-5:#e88a52; --nota-6:#9b82e0; --nota-7:#8a93a5;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-pop:  0 20px 44px rgba(0,0,0,0.55);
  color-scheme: dark;
}

.pcti-app, .pcti-app *{box-sizing:border-box;}
.pcti-app{
  background:var(--page);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.pcti-app h1,.pcti-app h2,.pcti-app h3,.pcti-app .font-head{font-family:var(--font-head); font-weight:700; letter-spacing:.01em; text-wrap:balance;}
.pcti-app .mono,.pcti-app .tabular,.pcti-app input,.pcti-app select,.pcti-app textarea{font-variant-numeric:tabular-nums;}
.pcti-app .mono{font-family:var(--font-mono);}
.pcti-app button{font-family:inherit; cursor:pointer;}
.pcti-app a{color:inherit;}
.pcti-app ::selection{background:var(--accent-soft); color:var(--accent-ink);}

/* ---------------------------------------------------------------------
   SHELL
--------------------------------------------------------------------- */
.pcti-app .shell{
  display:grid;
  grid-template-columns:224px 1fr;
  min-height:100vh;
  transition:grid-template-columns .18s ease;
}
.pcti-app .rail{
  background:var(--surface);
  border-right:1px solid var(--line);
  padding:20px 14px;
  display:flex;
  flex-direction:column;
  gap:22px;
  position:relative;
}

/* ---- botão de recolher/exibir o menu ---- */
.pcti-app .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.pcti-app .brand{display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:2px 2px 14px;}
.pcti-app .brand-plate{
  background:var(--brand-plate);
  border-radius:9px;
  padding:11px 13px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07);
}
.pcti-app .brand-plate img{display:block; width:100%; height:auto;}
.pcti-app .brand-text{display:flex; flex-direction:column; line-height:1.25; padding-left:2px;}
.pcti-app .brand-text b{font-family:var(--font-head); font-size:13.5px; font-weight:600; color:var(--ink-2);}
.pcti-app .brand-text span{font-size:10.5px; color:var(--muted); letter-spacing:.04em;}

.pcti-app .rail-nav{display:flex; flex-direction:column; gap:2px;}
.pcti-app .nav-btn,.pcti-app .rail-toggle{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px;
  border:none; background:transparent; color:var(--ink-2);
  border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:500;
  text-align:left;
}
.pcti-app .nav-btn svg,.pcti-app .rail-toggle svg{width:17px; height:17px; flex:none; opacity:.8;}
.pcti-app .nav-btn:hover,.pcti-app .rail-toggle:hover{background:var(--surface-2); color:var(--ink);}
.pcti-app .nav-btn:hover svg,.pcti-app .rail-toggle:hover svg{opacity:1;}

/* Só o que é específico do botão de recolher. Precisa vir DEPOIS do bloco
   acima: mesma especificidade, quem vem por último vence. */
.pcti-app .rail-toggle{
  align-self:flex-end; justify-content:center;
  width:36px; height:34px; padding:0; flex:none;
  margin:-6px -4px -12px 0;
  cursor:pointer;
}
.pcti-app .rail-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.pcti-app .nav-btn.active{background:var(--accent-soft); color:var(--accent-ink); font-weight:600;}
.pcti-app .nav-btn.active svg{opacity:1;}
.pcti-app .nav-count{
  margin-left:auto; font-family:var(--font-mono); font-size:11px;
  color:var(--muted); background:var(--surface-2);
  padding:1px 6px; border-radius:20px;
}
.pcti-app .nav-btn.active .nav-count{color:var(--accent-ink); background:rgba(0,0,0,0.06);}

.pcti-app .rail-foot{margin-top:auto; display:flex; flex-direction:column; gap:8px;}
.pcti-app .mascote{display:flex; justify-content:center; margin-top:-10px;}
.pcti-app .mascote img{width:100%; max-width:150px; height:auto; image-rendering:pixelated;}
.pcti-app .status-chip{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; color:var(--muted);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:7px 9px;
}
.pcti-app .status-dot{width:7px; height:7px; border-radius:50%; background:var(--good); flex:none;}
.pcti-app .status-dot.off{background:var(--critical);}

/* ---------------------------------------------------------------------
   MAIN
--------------------------------------------------------------------- */
/* min-width:0 é obrigatório: como item de grid, o padrão é min-width:auto,
   e aí a área principal se recusa a encolher abaixo do conteúdo (a tabela
   larga), empurrando a página inteira para o lado no tablet/celular. */
.pcti-app .main{padding:22px 26px 60px; max-width:1180px; min-width:0;}
.pcti-app .topbar{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-bottom:20px; flex-wrap:wrap;
}
.pcti-app .topbar h1{font-size:24px; margin:0 0 3px;}
.pcti-app .topbar .sub{color:var(--muted); font-size:12.5px;}
.pcti-app .topbar-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}

.pcti-app .field{display:flex; flex-direction:column; gap:3px;}
.pcti-app .seg{display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface);}
.pcti-app .seg-btn{
  border:none; background:transparent; color:var(--ink-2);
  font-family:var(--font-body); font-size:13px; font-weight:500;
  /* mesma caixa do .btn (8px 13px + borda), senão fica um degrau na barra */
  padding:8px 13px; cursor:pointer; white-space:nowrap; line-height:1.25;
}
.pcti-app .seg-btn + .seg-btn{border-left:1px solid var(--line);}
.pcti-app .seg-btn:hover{background:var(--surface-2);}
.pcti-app .seg-btn.is-on{background:var(--accent); color:var(--on-accent);}
.pcti-app .seg-btn svg{width:15px; height:15px; display:block;}
.pcti-app #temaSeg .seg-btn{padding:0 9px; min-height:32px; display:flex; align-items:center;}
.pcti-app .field label{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600;}
.pcti-app input,.pcti-app select,.pcti-app textarea{
  font-size:13.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); padding:7px 9px;
  font-family:var(--font-body);
}
.pcti-app input.mono,.pcti-app select.mono{font-family:var(--font-mono);}
.pcti-app textarea{resize:vertical; min-height:64px; font-family:var(--font-body);}
.pcti-app input:focus,.pcti-app select:focus,.pcti-app textarea:focus,.pcti-app button:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px;
}

.pcti-app .btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 13px; border-radius:var(--radius-sm);
  border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink); font-size:13px; font-weight:500; line-height:1.25;
  white-space:nowrap;
}
.pcti-app .btn svg{width:14px; height:14px;}
.pcti-app .btn:hover{border-color:var(--muted); background:var(--surface-2);}
.pcti-app .btn-primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600;}
.pcti-app .btn-primary:hover{background:var(--accent-ink); border-color:var(--accent-ink);}
.pcti-app .btn-ghost{border-color:transparent; background:transparent;}
.pcti-app .btn-ghost:hover{background:var(--surface-2);}
.pcti-app .btn-danger{color:var(--critical); border-color:var(--crit-soft); background:var(--crit-soft);}
.pcti-app .btn-danger:hover{background:var(--critical); color:#fff; border-color:var(--critical);}
.pcti-app .btn-sm{padding:5px 9px; font-size:12px;}

/* ---------------------------------------------------------------------
   CARDS / GRID
--------------------------------------------------------------------- */
.pcti-app .card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:18px;
}
.pcti-app .card-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px;}
.pcti-app .card-head h3{font-size:15px; margin:0;}
.pcti-app .card-head .hint{font-size:11.5px; color:var(--muted);}

.pcti-app .kpi-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(178px,1fr)); gap:12px; margin-bottom:16px;}
.pcti-app .kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:6px;
}
.pcti-app .kpi .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600;}
.pcti-app .kpi .val{font-family:var(--font-mono); font-size:26px; font-weight:600; line-height:1;}
.pcti-app .kpi .delta{font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:4px;}
.pcti-app .kpi .delta.up{color:var(--good);}
.pcti-app .kpi .delta.down{color:var(--critical);}

/* Colunas iguais e altura igual: os dois cartões de cada linha começam e
   terminam juntos. O motivo de antes serem 1.3fr/1fr e de altura livre era
   o gráfico de barras em coluna única, que deixava um cartão bem mais alto
   então o alinhamento certinho vale mais do que economizar alguns pixels. */
   .pcti-app que o outro — com as barras em várias colunas as alturas já se parecem,.pcti-app .grid-2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-bottom:14px; align-items:stretch;}
.pcti-app .grid-2 > .card{display:flex; flex-direction:column;}

/* ---------------------------------------------------------------------
   CHARTS
--------------------------------------------------------------------- */
/* Em vez de uma coluna só com barras cada vez mais compridas, o gráfico
   ganha colunas conforme sobra largura. Uma barra de 700px para o valor 1
   parece esticada; três colunas de 300px ficam densas e continuam legíveis. */
.pcti-app .bar-chart{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
  gap:10px 26px;
  align-content:start;
}
.pcti-app .bar-row{display:grid; grid-template-columns:100px minmax(0,1fr) auto; align-items:center; gap:8px; min-width:0;}
.pcti-app .bar-row .cat-label{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-2);}
.pcti-app .cat-dot{width:8px; height:8px; border-radius:2px; flex:none;}
.pcti-app .bar-track{position:relative; height:14px; background:var(--surface-2); border-radius:4px; overflow:hidden;}
.pcti-app .bar-fill{position:absolute; left:0; top:0; bottom:0; border-radius:4px; min-width:3px;}
.pcti-app .bar-row .count{font-family:var(--font-mono); font-size:12.5px; text-align:right; color:var(--ink-2); white-space:nowrap; min-width:34px;}

.pcti-app .status-legend{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:12px;}
.pcti-app .legend-item{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2);}
.pcti-app .legend-swatch{width:9px; height:9px; border-radius:2px;}
.pcti-app .status-stack{display:flex; height:20px; border-radius:6px; overflow:hidden; border:1px solid var(--line); max-width:640px;}
.pcti-app .status-seg{height:100%;}
.pcti-app .status-nums{display:flex; justify-content:space-between; margin-top:10px; max-width:640px;}
.pcti-app .status-num{text-align:center;}
.pcti-app .status-num b{display:block; font-family:var(--font-mono); font-size:19px;}
.pcti-app .status-num span{font-size:11px; color:var(--muted);}

/* ------------------------------------------------------------------
   CALENDÁRIO DE REUNIÕES
------------------------------------------------------------------ */
.pcti-app .cal-card{padding:0; overflow:hidden;}
.pcti-app .cal-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:16px 18px 14px;
}
.pcti-app .cal-nav{display:flex; align-items:center; gap:6px;}
.pcti-app .cal-nav button{
  width:32px; height:32px; padding:0; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2);
  border-radius:50%; cursor:pointer; font-size:16px; line-height:1;
  transition:background .12s, color .12s, border-color .12s;
}
.pcti-app .cal-nav button:hover{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent);}
.pcti-app .cal-mes{
  font-family:var(--font-head); font-size:21px; font-weight:700;
  color:var(--ink); letter-spacing:.01em;
}
.pcti-app .cal-hoje{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2);
  font-family:var(--font-body); font-size:12px; font-weight:600;
  padding:5px 12px; border-radius:999px; cursor:pointer;
}
.pcti-app .cal-hoje:hover{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent);}
.pcti-app .cal-badge{
  background:var(--accent-soft); color:var(--accent-ink);
  font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:999px;
}
.pcti-app .cal-badge.vazio{background:var(--surface-2); color:var(--muted);}
.pcti-app .cal-badge.cancel{background:var(--crit-soft); color:var(--critical);}
.pcti-app .cal-dica{font-size:11.5px; color:var(--muted);}

/* a grade usa gap de 1px sobre um fundo de linha: as "bordas" viram fios
   contínuos, em vez de cada dia ser uma caixa solta */
.pcti-app .cal-grid{
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr));
  gap:1px; background:var(--line);
  border-top:1px solid var(--line);
}
.pcti-app .cal-dow{
  background:var(--surface-2); padding:9px 0 8px; text-align:center;
  font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.pcti-app .cal-day{
  background:var(--surface); min-height:106px; padding:7px 7px 8px;
  cursor:pointer; overflow:hidden; position:relative;
  transition:background .12s;
}
.pcti-app .cal-day:hover{background:var(--surface-2);}
.pcti-app .cal-day.fds{background:color-mix(in srgb, var(--surface-2) 45%, var(--surface));}
.pcti-app .cal-day.fds:hover{background:var(--surface-2);}
.pcti-app .cal-day.fora{background:var(--page);}
.pcti-app .cal-day.fora .cal-num{color:var(--line-strong);}
.pcti-app .cal-num{
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; border-radius:50%; margin-bottom:4px;
}
/* hoje: o número vira um disco, como em qualquer agenda */
.pcti-app .cal-day.hoje .cal-num{background:var(--accent); color:var(--on-accent);}
.pcti-app .cal-ev{
  display:flex; align-items:baseline; gap:5px;
  font-size:10.5px; line-height:1.35; margin-bottom:3px;
  padding:3px 6px; border-radius:5px; cursor:pointer;
  background:var(--accent-soft); color:var(--accent-ink);
  overflow:hidden; white-space:nowrap;
  transition:filter .12s;
}
.pcti-app .cal-ev:hover{filter:brightness(0.94);}
.pcti-app .cal-ev .hh{font-family:var(--font-mono); font-weight:700; flex:none; font-size:10px;}
.pcti-app .cal-ev .tt{overflow:hidden; text-overflow:ellipsis;}
.pcti-app .cal-ev.passou{background:var(--surface-2); color:var(--muted);}
.pcti-app .cal-ev.cancelada{background:var(--crit-soft); color:var(--critical); text-decoration:line-through;}
.pcti-app .cal-mais{display:block; font-size:10px; color:var(--muted); padding-left:6px; margin-top:1px;}

/* próximas reuniões: bloco de data à esquerda, como um cartão de agenda */
.pcti-app .prox-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 4px; border-top:1px solid var(--line); cursor:pointer;
  transition:background .12s;
}
.pcti-app .prox-row:first-of-type{border-top:none;}
.pcti-app .prox-row:hover{background:var(--surface-2);}
.pcti-app .prox-data{
  flex:none; width:48px; text-align:center; border-radius:var(--radius-sm);
  background:var(--surface-2); padding:5px 0 6px;
}
.pcti-app .prox-data b{display:block; font-family:var(--font-mono); font-size:16px; line-height:1.1; color:var(--ink);}
.pcti-app .prox-data span{display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
.pcti-app .prox-row.hoje .prox-data{background:var(--accent); }
.pcti-app .prox-row.hoje .prox-data b,.pcti-app .prox-row.hoje .prox-data span{color:var(--on-accent);}
.pcti-app .prox-info{flex:1; min-width:0;}
.pcti-app .prox-info b{display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:2px;}
.pcti-app .prox-info span{display:block; font-size:11.5px; color:var(--muted);}
.pcti-app .prox-quando{flex:none; font-size:11px; font-weight:600; color:var(--muted);}
.pcti-app .prox-quando.perto{color:var(--accent-ink);}

.pcti-app .trend-wrap{width:100%; max-width:1180px; margin:0 auto; overflow:visible;}
.pcti-app .trend-svg{width:100%; height:176px; display:block; overflow:visible;}
.pcti-app .trend-tip{
  position:absolute; pointer-events:none; background:var(--ink); color:var(--page);
  font-family:var(--font-mono); font-size:11px; padding:4px 7px; border-radius:5px;
  transform:translate(-50%,calc(-100% - 12px)); white-space:nowrap; opacity:0; transition:opacity .1s;
  box-shadow:var(--shadow-pop); z-index:5;
}
/* quando o ponto está no topo, o balão desce em vez de sair do card */
.pcti-app .trend-tip.abaixo{transform:translate(-50%,12px);}
.pcti-app .trend-tip.show{opacity:1;}
.pcti-app .trend-pos{position:relative;}

.pcti-app .donut-layout{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.pcti-app .donut-wrap{position:relative; width:150px; height:150px; flex:none;}
.pcti-app .donut-svg{width:100%; height:100%; display:block; overflow:visible;}
.pcti-app .donut-seg{cursor:default; transition:opacity .12s;}
.pcti-app .donut-seg:hover{opacity:.82;}
.pcti-app .donut-center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none; text-align:center;
}
.pcti-app .donut-center b{font-family:var(--font-mono); font-size:22px; font-weight:600; line-height:1;}
.pcti-app .donut-center span{font-size:10.5px; color:var(--muted); margin-top:3px;}
.pcti-app .donut-legend{display:flex; flex-direction:column; gap:7px; flex:1; min-width:150px; max-width:340px;}
.pcti-app .donut-row{display:flex; align-items:center; gap:8px; font-size:12.5px;}
.pcti-app .donut-row .cat-dot{flex:none;}
.pcti-app .donut-row .name{color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;}
.pcti-app .donut-row .pct{font-family:var(--font-mono); font-size:12px; color:var(--muted); flex:none;}

/* ---------------------------------------------------------------------
   TABLE
--------------------------------------------------------------------- */
.pcti-app .table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);}
.pcti-app table{width:100%; border-collapse:collapse; font-size:13px; min-width:720px;}
.pcti-app thead th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line);
  background:var(--surface-2); white-space:nowrap; position:sticky; top:0;
}
.pcti-app tbody td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
.pcti-app tbody tr:last-child td{border-bottom:none;}
.pcti-app tbody tr:hover{background:var(--surface-2);}
.pcti-app td.num,.pcti-app th.num{font-family:var(--font-mono); white-space:nowrap;}
.pcti-app .row-actions{display:flex; gap:6px; justify-content:flex-end;}

/* ---- colunas de largura ajustável ----
   Com a largura fixada por coluna, o conteúdo que não couber é cortado com
   reticências em vez de quebrar a linha — aí basta arrastar a divisória do
   cabeçalho para ver o resto, sem precisar abrir o registro. */
.pcti-app table.redim{table-layout:fixed;}
.pcti-app table.redim tbody td{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pcti-app table.redim tbody td .chip,.pcti-app table.redim tbody td .pill,.pcti-app table.redim tbody td select{max-width:100%;}
/* O th já é position:sticky, que também serve de referência para o
   absolute da alça. Trocar para relative aqui quebraria o cabeçalho fixo. */
.pcti-app .col-resize{
  /* Toda a alça fica DENTRO do th. Se ela invadisse o vizinho, o fundo do
     th seguinte — que também é sticky e vem depois no HTML — cobriria essa
     parte e o clique nunca chegaria na alça. */
  position:absolute; top:0; right:0; width:10px; height:100%;
  cursor:col-resize; z-index:4; touch-action:none;
  background:transparent;
}
.pcti-app .col-resize::after{
  content:""; position:absolute; top:6px; bottom:6px; right:1px; width:2px;
  border-radius:2px; background:var(--line-strong); opacity:0; transition:opacity .12s;
}
.pcti-app .col-resize:hover::after,.pcti-app .col-resize.ativo::after{opacity:1;}
.pcti-app body.redimensionando{cursor:col-resize; user-select:none;}


/* clicar na linha abre o chamado para editar */
.pcti-app tbody tr[data-open-chamado]{cursor:pointer;}
.pcti-app .click-row{cursor:pointer; margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:var(--radius-sm); transition:background .12s;}
.pcti-app .click-row:hover{background:var(--surface-2);}

/* a coluna de ações acompanha a rolagem horizontal, para nunca ficar fora da tela */
.pcti-app thead th{z-index:2;}
.pcti-app th.col-actions,.pcti-app td.col-actions{
  position:sticky; right:0;
  background:var(--surface);
  box-shadow:-9px 0 9px -9px rgba(0,0,0,0.25);
}
.pcti-app th.col-actions{background:var(--surface-2); z-index:3;}
.pcti-app td.col-actions{z-index:1;}
.pcti-app tbody tr:hover td.col-actions{background:var(--surface-2);}

.pcti-app .chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:500; padding:3px 8px; border-radius:20px;
  white-space:nowrap;
}
.pcti-app .pill{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap;}
.pcti-app .pill-dot{width:6px; height:6px; border-radius:50%;}
.pcti-app .pill.st-aberto{background:var(--crit-soft); color:var(--critical);}
.pcti-app .pill.st-andamento{background:var(--warn-soft); color:#8a5a00;}
.pcti-app .pill.st-concluido{background:var(--good-soft); color:#146a14;}
.pcti-app .pill.st-aguardando{background:var(--seq-100); color:var(--seq-650);}
.pcti-app .pill.st-cancelada{background:var(--crit-soft); color:var(--critical);}
:root[data-theme="dark"] .pcti-app .pill.st-andamento{color:var(--warning);}
:root[data-theme="dark"] .pcti-app .pill.st-concluido{color:var(--good);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pcti-app .pill.st-andamento{color:var(--warning);}
  :root:not([data-theme="light"]) .pcti-app .pill.st-concluido{color:var(--good);}
}

/* ---- envelhecimento (SLA) ---- */
.pcti-app .dh{white-space:nowrap;}

/* código do AnyDesk na lista: dá para clicar e copiar */
.pcti-app .anydesk{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:2px 7px;
  cursor:pointer; white-space:nowrap;
}
.pcti-app .anydesk:hover{border-color:var(--accent); color:var(--accent-ink);}
.pcti-app .anydesk svg{width:12px; height:12px; flex:none; opacity:.6;}
.pcti-app .anydesk:hover svg{opacity:1;}
.pcti-app .anydesk.copiado{border-color:var(--good); color:var(--good);}
.pcti-app .dica-conclusao{margin:0; font-size:11.5px; line-height:1.45; color:var(--muted);}
.pcti-app .hora{font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-left:5px;}
.pcti-app .age{font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:20px; white-space:nowrap; margin-left:6px;}
.pcti-app .age.ok{color:var(--muted);}
.pcti-app .age.warn{background:var(--warn-soft); color:#8a5a00;}
.pcti-app .age.crit{background:var(--crit-soft); color:var(--critical);}

.pcti-app .aging-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line);}
.pcti-app .aging-row:last-child{border-bottom:none;}
.pcti-app .aging-row .t{min-width:0;}
.pcti-app .aging-row .t b{display:block; font-weight:500; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pcti-app .aging-row .t span{font-size:11.5px; color:var(--muted);}

/* ---- troca rápida de status ---- */
.pcti-app select.quick-status{
  font-size:11.5px; font-weight:600; padding:3px 7px; border-radius:20px;
  border:1px solid var(--line-strong); background:var(--surface); max-width:140px;
}
.pcti-app select.quick-status.st-aberto{background:var(--crit-soft); color:var(--critical); border-color:transparent;}
.pcti-app select.quick-status.st-andamento{background:var(--warn-soft); color:#8a5a00; border-color:transparent;}
.pcti-app select.quick-status.st-concluido{background:var(--good-soft); color:#146a14; border-color:transparent;}
.pcti-app select.quick-status.st-aguardando{background:var(--seq-100); color:var(--seq-650); border-color:transparent;}
:root[data-theme="dark"] .pcti-app select.quick-status.st-andamento{color:var(--warning);}
:root[data-theme="dark"] .pcti-app select.quick-status.st-concluido{color:var(--good);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pcti-app select.quick-status.st-andamento{color:var(--warning);}
  :root:not([data-theme="light"]) .pcti-app select.quick-status.st-concluido{color:var(--good);}
}

.pcti-app .pri{font-size:11.5px; font-weight:600;}
.pcti-app .pri-alta{color:var(--critical);}
.pcti-app .pri-media{color:var(--warning);}
.pcti-app .pri-baixa{color:var(--muted);}

.pcti-app .empty{
  text-align:center; padding:34px 20px; color:var(--muted); font-size:13px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.pcti-app .empty svg{width:34px; height:34px; opacity:.5;}

.pcti-app .filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; align-items:flex-end;}
.pcti-app .filters input,.pcti-app .filters select{min-width:120px;}

/* ---------------------------------------------------------------------
   MODAL
--------------------------------------------------------------------- */
.pcti-app .overlay{
  position:fixed; inset:0; background:rgba(15,18,14,0.45);
  display:flex; align-items:flex-start; justify-content:center;
  padding:5vh 16px; overflow-y:auto; z-index:100;
}
.pcti-app .overlay[hidden]{display:none;}
.pcti-app .modal{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-pop); width:100%; max-width:560px; padding:22px;
}
.pcti-app .modal h2{font-size:19px; margin:0 0 3px;}
.pcti-app .modal .sub{color:var(--muted); font-size:12px; margin-bottom:16px;}
.pcti-app .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.pcti-app .form-grid .span2{grid-column:1/-1;}
.pcti-app .modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line);}

.pcti-app .toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--page); padding:10px 16px; border-radius:var(--radius-sm);
  font-size:13px; box-shadow:var(--shadow-pop); z-index:200; opacity:0; pointer-events:none;
  transition:opacity .15s, transform .15s;
}
.pcti-app .toast.show{opacity:1; transform:translateX(-50%) translateY(-4px);}

.pcti-app .banner{
  display:flex; align-items:center; gap:8px; font-size:12.5px;
  background:var(--warn-soft); color:#8a5a00; border:1px solid #e7cb8d;
  padding:8px 12px; border-radius:var(--radius-sm); margin-bottom:16px;
}
:root[data-theme="dark"] .pcti-app .banner{color:var(--warning);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pcti-app .banner{color:var(--warning);}}

.pcti-app .tab-panel[hidden]{display:none;}
.pcti-app .section-note{font-size:12px; color:var(--muted); margin:-6px 0 14px;}
.pcti-app [hidden]{display:none !important;}

/* ---------------------------------------------------------------------
   IMPRESSÃO / PDF — vira um relatório mensal limpo
--------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   ANOTAÇÕES — quadro de post-its
   A cor escolhida entra como "tinta" (--nota) e o card é montado por
   color-mix em cima do fundo do tema. Assim a mesma lista de cores
   funciona no claro e no escuro, sem duas paletas para manter.
--------------------------------------------------------------------- */
.pcti-app .notas-board{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(236px, 1fr));
  gap:14px;
  align-items:start;
}
.pcti-app .nota{
  --nota:var(--nota-1);
  position:relative;
  display:flex; flex-direction:column; gap:8px;
  padding:14px 15px 12px;
  border-radius:var(--radius);
  background:color-mix(in srgb, var(--nota) 13%, var(--surface));
  border:1px solid color-mix(in srgb, var(--nota) 34%, transparent);
  border-top:3px solid var(--nota);
  box-shadow:var(--shadow-card);
  cursor:pointer;
  text-align:left;
  min-width:0;
}
.pcti-app .nota:hover{border-color:color-mix(in srgb, var(--nota) 60%, transparent);}
.pcti-app .nota:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.pcti-app .nota h3{
  margin:0; font-family:var(--font-head); font-size:14.5px; font-weight:600;
  color:var(--ink); line-height:1.3; overflow-wrap:anywhere;
}
.pcti-app .nota p{
  margin:0; font-size:13px; line-height:1.5; color:var(--ink-2);
  white-space:pre-wrap; overflow-wrap:anywhere;
  /* o card é um resumo; o texto inteiro fica no modal de edição */
  display:-webkit-box; -webkit-line-clamp:9; -webkit-box-orient:vertical; overflow:hidden;
}
.pcti-app .nota footer{
  display:flex; align-items:center; gap:8px;
  margin-top:auto; padding-top:8px;
  border-top:1px solid color-mix(in srgb, var(--nota) 22%, transparent);
  font-size:11px; color:var(--muted);
}
.pcti-app .nota footer .btn{margin-left:auto;}
.pcti-app .nota-vazia{font-style:italic; color:var(--muted);}

/* bloco de campos dentro de um modal, com um título discreto */
.pcti-app .sub-secao{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  font-weight:600; color:var(--muted);
  padding-top:4px; margin-bottom:10px;
  border-top:1px solid var(--line);
}
.pcti-app td.ficha{font-size:12px; color:var(--ink-2); max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* dentro da tabela de largura ajustável o teto sai de cena: a coluna manda */
.pcti-app table.redim td.ficha{max-width:none;}
.pcti-app .col-titulo{max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pcti-app table.redim .col-titulo{max-width:none;}

/* seletor de cor dentro do modal */
.pcti-app .cores{display:flex; flex-wrap:wrap; gap:9px;}
.pcti-app .cor-op{
  width:30px; height:30px; padding:0; border-radius:50%;
  border:2px solid transparent; cursor:pointer;
  background:var(--c);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent);
}
.pcti-app .cor-op[aria-checked="true"]{
  border-color:var(--surface);
  box-shadow:0 0 0 2px var(--c);
}
.pcti-app .cor-op:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

/* ---------------------------------------------------------------------
   MENU RECOLHIDO
   A coluna encolhe para só os ícones, em vez de sumir: assim continua dando
   para trocar de aba com um clique, sem precisar reabrir o menu antes.
   Vem depois das regras do .rail de propósito — mesma força, quem vem
   depois vence.
--------------------------------------------------------------------- */
.pcti-app .shell.rail-off{grid-template-columns:62px 1fr;}
/* O espaço que a coluna devolveu vira largura útil para o conteúdo: sem
   teto, o painel ocupa a janela inteira. Quem mantém os gráficos legíveis
   nessa largura é o .bar-chart, que ganha colunas em vez de esticar barras. */
.pcti-app .shell.rail-off .main{max-width:none;}

.pcti-app .rail-off .rail{padding:20px 9px; gap:14px;}
.pcti-app .rail-off .rail-toggle{align-self:center; margin:-6px 0 0; width:44px;}
.pcti-app .rail-off .rail-toggle svg{width:19px; height:19px;}
.pcti-app .rail-off .brand{display:none;}
.pcti-app .rail-off .brand-plate,.pcti-app .rail-off .brand-text,.pcti-app .rail-off .mascote,.pcti-app .rail-off #connLabel{display:none;}

.pcti-app .rail-off .nav-btn{justify-content:center; padding:11px 0; gap:0; position:relative;}
.pcti-app .rail-off .nav-txt{display:none;}
.pcti-app .rail-off .nav-btn svg{width:19px; height:19px;}
/* O contador vira um selo sobre o ícone, para a informação não sumir.
   O anel na cor do fundo recorta o selo do ícone — sem ele os dois se
   misturam e nenhum dos dois fica legível. */
.pcti-app .rail-off .nav-count{
  position:absolute; top:2px; right:2px; margin:0;
  font-size:9px; line-height:1.55; padding:0 3.5px; min-width:13px; text-align:center;
  background:var(--surface-2); color:var(--muted);
  box-shadow:0 0 0 2px var(--surface);
}
.pcti-app .rail-off .nav-btn.active .nav-count{box-shadow:0 0 0 2px var(--accent-soft);}
.pcti-app .rail-off .status-chip{
  justify-content:center; width:26px; height:26px; margin:0 auto;
  padding:0; border-radius:50%;
}

/* ---------------------------------------------------------------------
   RESPONSIVO
   Fica no FIM da folha de propósito: com a mesma especificidade, quem vem
   depois vence. Quando estas regras estavam no meio do arquivo, as regras
   base declaradas abaixo delas as anulavam e o celular não mudava nada.
--------------------------------------------------------------------- */

/* ------------------------------- tablet ------------------------------ */
@media (max-width: 900px){
  .pcti-app .grid-2{grid-template-columns:1fr;}
}

@media (max-width: 860px){
  .pcti-app .shell{grid-template-columns:1fr;}
  .pcti-app .rail{
    position:sticky; top:0; z-index:30;
    flex-direction:column; gap:10px;
    padding:10px 12px 8px;
    border-right:none; border-bottom:1px solid var(--line);
    transition:transform .22s ease;
    will-change:transform;
  }
  /* Rolando para baixo a barra sai da frente e devolve a tela inteira para
     o conteúdo; rolando para cima ela volta na hora, sem precisar subir
     até o topo da página. */
  .pcti-app .rail.rail-escondida{transform:translateY(-102%);}
  .pcti-app .rail .brand{flex-direction:row; align-items:center; gap:10px; padding:0; margin:0;}
  .pcti-app .rail .brand-plate{width:132px; flex:none; padding:7px 9px;}
  .pcti-app .rail .brand-text{display:none;}
  .pcti-app .rail-foot,.pcti-app .mascote{display:none;}
  /* no celular o menu já é uma barra no topo — recolher não faz sentido,
     e a classe não pode sequestrar o layout */
  .pcti-app .rail-toggle{display:none;}
  .pcti-app .shell.rail-off{grid-template-columns:1fr;}
  .pcti-app .shell.rail-off .main{max-width:none;}
  .pcti-app .rail-off .rail{padding:10px 12px 8px; gap:10px;}
  .pcti-app .rail-off .nav-btn{flex-direction:column; gap:3px; padding:7px 2px; position:static;}
  .pcti-app .rail-off .nav-txt{display:block;}
  .pcti-app .rail-off .nav-count{position:static; font-size:10px; padding:1px 5px; min-width:0;}

  /* As abas dividem a largura em vez de rolar para o lado. São 6 agora,
     então viram duas fileiras de 3 — com 6 colunas cada uma ficaria com
     menos de 60px e o rótulo não caberia. */
  .pcti-app .rail-nav{display:grid; grid-template-columns:repeat(3, 1fr); gap:4px;}
  .pcti-app .nav-btn{
    flex-direction:column; gap:3px; padding:7px 2px;
    font-size:11px; text-align:center; justify-content:center;
  }
  .pcti-app .nav-btn svg{width:17px; height:17px;}
  .pcti-app .nav-count{margin:0; font-size:10px; padding:1px 5px;}

  .pcti-app .main{padding:16px 14px 48px;}
  .pcti-app .topbar{align-items:stretch; gap:12px; margin-bottom:16px;}
  .pcti-app .topbar h1{font-size:20px;}
  .pcti-app .topbar-actions{gap:6px;}

  .pcti-app .kpi-row{grid-template-columns:repeat(2,1fr); gap:10px;}
  .pcti-app .card{padding:14px;}
}

/* ------------------------------- celular ----------------------------- */
@media (max-width: 620px){
  .pcti-app .main{padding:14px 12px 44px;}
  .pcti-app .topbar h1{font-size:19px;}
  .pcti-app .topbar-actions{width:100%;}
  /* botões de ação ocupam a linha inteira, ficando fáceis de tocar */
  .pcti-app .topbar-actions .btn{flex:1; justify-content:center;}
  .pcti-app .topbar-actions .seg{width:100%;}
  .pcti-app .topbar-actions .seg-btn{flex:1;}
  .pcti-app .topbar-actions .field{flex:1; min-width:140px;}
  .pcti-app #monthField{flex:1 1 100%;}
  .pcti-app .topbar-actions .field input,.pcti-app .topbar-actions .field select{width:100%;}

  /* alvo de toque mínimo confortável */
  .pcti-app .btn,.pcti-app .seg-btn{min-height:40px;}
  .pcti-app input,.pcti-app select,.pcti-app textarea{font-size:16px;}   /* evita o zoom automático do iOS */

  .pcti-app .kpi{padding:12px;}
  .pcti-app .kpi .val{font-size:26px;}
  .pcti-app .kpi .lbl{font-size:10px;}

  /* filtros em duas colunas, busca ocupando a linha */
  .pcti-app .filters{gap:8px;}
  .pcti-app .filters .field{flex:1 1 calc(50% - 4px); min-width:0;}
  .pcti-app .filters .field input,.pcti-app .filters .field select{min-width:0; width:100%;}
  .pcti-app .filters .field:nth-last-child(2){flex:1 1 100%;}
  .pcti-app .filters .btn{flex:1 1 100%;}

  /* ---- tabelas viram cartões: 10 colunas não cabem num celular ---- */
  .pcti-app .table-wrap{border:none; background:none; overflow:visible; border-radius:0;}
  .pcti-app table{min-width:0; display:block; font-size:13.5px;}
  .pcti-app thead{display:none;}
  .pcti-app tbody{display:block;}
  .pcti-app tbody tr{
    display:block; background:var(--surface);
    border:1px solid var(--line); border-radius:var(--radius);
    margin-bottom:10px; padding:10px 12px;
  }
  .pcti-app tbody tr:hover{background:var(--surface);}
  .pcti-app tbody td{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    border:none; padding:5px 0; text-align:right; max-width:none !important;
    white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
  }
  .pcti-app tbody td::before{
    content:attr(data-rot); flex:none; text-align:left;
    font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--muted);
  }
  .pcti-app tbody td:empty,.pcti-app tbody td[data-rot=""]::before{content:none;}
  /* o título é o que importa no cartão: linha inteira, sem rótulo */
  .pcti-app tbody td[data-rot="Título"]{
    display:block; text-align:left; font-weight:600; font-size:14.5px;
    color:var(--ink); padding:2px 0 8px; max-width:none;
  }
  .pcti-app tbody td[data-rot="Título"]::before{content:none;}
  .pcti-app tbody td[data-rot="Nome"]{
    display:block; text-align:left; font-weight:600; font-size:14.5px;
    color:var(--ink); padding:2px 0 6px;
  }
  .pcti-app tbody td[data-rot="Nome"]::before{content:none;}
  .pcti-app tbody td.num{text-align:right;}
  /* a coluna de ações deixa de ser fixa e vira uma faixa no rodapé do cartão */
  .pcti-app th.col-actions,.pcti-app td.col-actions,.pcti-app tbody tr:hover td.col-actions{position:static; box-shadow:none; background:transparent;}
  .pcti-app td.col-actions{padding-top:10px; margin-top:4px; border-top:1px solid var(--line);}
  .pcti-app td.col-actions::before{content:none;}
  .pcti-app td.col-actions .row-actions{width:100%; justify-content:flex-end; gap:8px;}
  .pcti-app tbody tr td:first-child.num{
    display:block; text-align:left;
    font-family:var(--font-mono); font-size:12px; color:var(--muted);
    padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:4px;
  }
  .pcti-app tbody tr td:first-child.num::before{content:none;}
  /* linha de "nenhum resultado" ocupa o cartão inteiro */
  .pcti-app tbody td[colspan]{display:block; text-align:center; padding:0;}
  .pcti-app tbody td[colspan]::before{content:none;}
  .pcti-app select.quick-status{width:auto;}
  .pcti-app .empty{padding:20px 14px;}
  .pcti-app tbody td .empty::before{content:none;}

  /* ---- calendário ---- */
  .pcti-app .cal-head{padding:12px 12px 10px; gap:8px;}
  .pcti-app .cal-mes{font-size:15.5px; white-space:nowrap;}
  .pcti-app .cal-dica{display:none;}
  .pcti-app .cal-badge{font-size:10.5px; padding:4px 9px;}
  .pcti-app .cal-dow{font-size:9px; padding:7px 0 6px; letter-spacing:.04em;}
  .pcti-app .cal-day{min-height:62px; padding:4px 3px;}
  .pcti-app .cal-num{font-size:11px; min-width:20px; height:20px; margin-bottom:2px;}
  /* o título não cabe em ~50px: fica só o horário, e a lista abaixo dá o resto */
  .pcti-app .cal-ev{font-size:9.5px; padding:2px 3px; justify-content:center; gap:0;}
  .pcti-app .cal-ev .tt{display:none;}
  .pcti-app .cal-ev .hh{font-size:9.5px;}
  .pcti-app .cal-mais{font-size:9px; padding-left:2px;}

  .pcti-app .prox-data{width:42px;}
  .pcti-app .prox-info b{font-size:13px;}
  .pcti-app .prox-quando{font-size:10.5px;}

  /* ---- modais ocupam a tela ---- */
  .pcti-app .overlay{padding:0; align-items:stretch;}
  .pcti-app .modal{
    max-width:none; min-height:100%; border-radius:0; border:none;
    padding:18px 16px 24px;
  }
  .pcti-app .form-grid{grid-template-columns:1fr;}
  .pcti-app .form-grid .span2{grid-column:auto;}
  .pcti-app .modal-actions{flex-wrap:wrap; gap:8px;}
  .pcti-app .modal-actions .btn{flex:1 1 calc(50% - 4px); justify-content:center;}
  .pcti-app .modal-actions #btnExcluirChamado,.pcti-app .modal-actions #btnExcluirReuniao{flex:1 1 100%; order:3;}
  .pcti-app .modal-actions span{display:none;}

  /* a tabela vira cartão: largura de coluna e alças não se aplicam */
  .pcti-app table.redim{table-layout:auto;}
  .pcti-app table.redim tbody td{overflow:visible; text-overflow:clip; white-space:normal;}
  .pcti-app .col-resize{display:none;}
  .pcti-app .col-titulo{max-width:none; white-space:normal;}

  .pcti-app .notas-board{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px;}
  .pcti-app .nota{padding:12px 13px 10px;}

  .pcti-app .donut-layout{gap:12px;}
  .pcti-app .status-nums{gap:10px;}
  .pcti-app .toast{left:12px; right:12px; bottom:12px; text-align:center;}
}

/* telas bem estreitas */
@media (max-width: 380px){
  .pcti-app .nav-btn{font-size:10px;}
  .pcti-app .rail .brand-plate{width:112px;}
  .pcti-app .cal-day{min-height:54px;}
  .pcti-app .cal-ev .hh{font-size:9px;}
}

@media print{
  .pcti-app{background:#fff;}
  .pcti-app .shell,.pcti-app .shell.rail-off{grid-template-columns:1fr; min-height:0;}
  .pcti-app .rail{border-right:none; background:none; padding:0 0 10px;}
  .pcti-app .rail-nav,.pcti-app .rail-foot,.pcti-app .mascote,.pcti-app .rail-toggle{display:none;}
  .pcti-app .rail-off .brand-plate,.pcti-app .rail-off .brand-text{display:block;}
  .pcti-app .brand{padding:0 0 6px;}
  .pcti-app .brand-plate{max-width:190px;}
  .pcti-app .main{padding:0; max-width:none;}
  .pcti-app .topbar-actions,.pcti-app .filters,.pcti-app .row-actions,.pcti-app .overlay,.pcti-app .toast,.pcti-app .banner,.pcti-app #painelEmptyState .btn{display:none !important;}
  .pcti-app .card,.pcti-app .kpi{break-inside:avoid; page-break-inside:avoid; box-shadow:none;}
  .pcti-app .notas-board{grid-template-columns:repeat(2, 1fr);}
  .pcti-app .nota{break-inside:avoid; page-break-inside:avoid; box-shadow:none; cursor:auto;}
  .pcti-app .nota p{-webkit-line-clamp:none; display:block; overflow:visible;}
  .pcti-app .nota footer .btn{display:none;}
  .pcti-app .col-resize{display:none;}
  .pcti-app table.redim{table-layout:auto;}
  .pcti-app table.redim tbody td,.pcti-app .col-titulo{overflow:visible; text-overflow:clip; white-space:normal; max-width:none;}
  .pcti-app .trend-tip{display:none;}
  .pcti-app a[data-tab]{display:none;}
}