/* ===========================================================================
   ÍNDICE DE PAINÉIS — El Misti
   Tokens copiados de Times/Time de TI/design-system/tokens/tokens.css
   (o painel vive fora dessa árvore de pastas — ver README do Design System,
   seção "Como usar num dashboard novo": copiar valores, não linkar path
   relativo entre repositórios diferentes). Mesma paleta e mesmos nomes que
   uso-paineis/dashboard/public/styles.css, de propósito — é a mesma família
   de painéis internos, tem que parecer a mesma casa.
   =========================================================================== */
:root {
  --color-brand-primary: #1B5E20;
  --color-brand-primary-light: #2E7D32;
  --color-brand-primary-bg: #E8F5E9;
  --color-brand-dark: #0D2818;

  --color-surface: #f5f7f5;
  --color-surface-card: #ffffff;
  --color-border: #d5e0d5;

  --color-text: #1a2e1a;
  --color-text-muted: #5f7060;
  --color-heading: var(--color-brand-dark);

  --color-success-text: #2E7D32;
  --color-danger-text: #C62828;
  --color-info-text: #1565C0;
  --color-warning-text: #BF360C;
  --color-accent-text: #00695C;

  --color-success-fill: #2E7D32;
  --color-danger-fill: #C62828;
  --color-info-fill: #1565C0;
  --color-warning-fill: #F9A825;
  --color-accent-fill: #00897B;

  --color-table-head-bg: var(--color-brand-primary-bg);
  --color-hover-bg: var(--color-brand-primary-bg);

  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  --fs-2xs: 9px;
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-base: 12px;
  --fs-md: 13px;
  --fs-lg: 14px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-base: 1.3;
  --lh-relaxed: 1.5;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(0,40,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);

  --touch-target: 44px;
}

[data-theme="dark"] {
  --color-surface: #10160f;
  --color-surface-card: #1a231a;
  --color-border: #2c3a2c;
  --color-text: #e6ede6;
  --color-text-muted: #8fa08f;
  --color-heading: #eafaea;

  --color-success-text: #81C784;
  --color-danger-text: #EF5350;
  --color-info-text: #64B5F6;
  --color-warning-text: #FFCC80;
  --color-accent-text: #4DB6AC;

  --color-table-head-bg: rgba(46,125,50,.22);
  --color-hover-bg: rgba(46,125,50,.14);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
}

*{box-sizing:border-box;margin:0;padding:0}
/* O atributo [hidden] empata em especificidade com qualquer classe que
   declare display (ex.: .acesso-box{display:flex}) — sem isto, o elemento
   "escondido" ainda aparece, porque o CSS de autor vem depois do stylesheet
   do navegador na cascata. Uma regra só, no topo, resolve pra sempre. */
[hidden]{display:none !important}
body{
  font-family:var(--font-body);
  font-size:var(--fs-sm);
  background:var(--color-surface);
  color:var(--color-text);
  line-height:var(--lh-base);
}

/* ---------- Header (COMPONENTS.md > Header) ---------- */
.header{background:var(--color-brand-dark);color:#fff;padding:var(--sp-2) var(--sp-4);display:flex;align-items:center;gap:var(--sp-3)}
.header-logo-img{height:28px;width:auto}
.header-title{flex:1;text-align:left;font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:.5px}
.header-sub{font-size:var(--fs-2xs);opacity:.65;display:block;margin-top:1px;font-weight:var(--fw-regular);letter-spacing:.2px}

.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;flex-shrink:0}
.theme-toggle:hover{background:rgba(255,255,255,.15)}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}
@media(max-width:768px){.theme-toggle{width:var(--touch-target);height:var(--touch-target)}}

/* ---------- Aviso de honestidade (mesmo padrão de uso-paineis) ---------- */
.honestidade-banner{display:flex;align-items:flex-start;gap:var(--sp-2);background:rgba(249,168,37,.14);border-bottom:1px solid rgba(249,168,37,.35);padding:var(--sp-2) var(--sp-3);flex-wrap:wrap}
.honestidade-icon{color:var(--color-warning-fill);font-size:14px;flex-shrink:0;line-height:1.4}
.honestidade-text{font-size:var(--fs-sm);color:var(--color-text);flex:1;min-width:220px;line-height:var(--lh-relaxed)}
.honestidade-text strong{color:var(--color-heading)}
.honestidade-more-btn{min-height:28px;padding:2px 10px;border:1px solid rgba(249,168,37,.5);border-radius:var(--radius-sm);background:transparent;color:var(--color-warning-text);font-size:var(--fs-xs);font-weight:var(--fw-semibold);cursor:pointer;flex-shrink:0;align-self:center}
.honestidade-more-btn:hover{background:rgba(249,168,37,.15)}
.honestidade-detalhe{display:none;width:100%;font-size:var(--fs-xs);color:var(--color-text-muted);line-height:var(--lh-relaxed);padding-top:var(--sp-2);border-top:1px dashed rgba(249,168,37,.35);margin-top:var(--sp-1)}
.honestidade-detalhe.aberto{display:block}
.honestidade-detalhe p + p{margin-top:var(--sp-1)}

/* ---------- Busca ---------- */
.busca-bar{background:var(--color-surface-card);border-bottom:1px solid var(--color-border);padding:var(--sp-2) var(--sp-3);display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.busca-input{flex:1;min-width:200px;min-height:var(--touch-target);padding:0 var(--sp-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--fs-md);background:var(--color-surface);color:var(--color-text)}
.busca-input::placeholder{color:var(--color-text-muted)}
.busca-input:focus{outline:none;border-color:var(--color-brand-primary-light);box-shadow:0 0 0 2px rgba(46,125,50,.2)}
.busca-contagem{font-size:var(--fs-xs);color:var(--color-text-muted);white-space:nowrap}

/* ---------- Tabela (desktop) — mesmo componente de COMPONENTS.md > Tabela ranqueada, com colunas próprias desta tela ---------- */
.table-scroll{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.data-table th{background:var(--color-table-head-bg);padding:var(--sp-2) var(--sp-3);text-align:left;font-weight:var(--fw-bold);color:var(--color-heading);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.3px;border-bottom:2px solid var(--color-brand-primary);white-space:nowrap}
.data-table th.sortable{cursor:pointer;user-select:none}
.data-table th.sortable:hover{background:var(--color-hover-bg)}
.data-table th.sortable .sort-arrow{font-size:8px;opacity:.5;margin-left:3px}
.data-table th.sortable.sort-active .sort-arrow{opacity:1;color:var(--color-brand-primary-light)}
.uso-periodo-th{font-size:var(--fs-2xs);text-transform:none;font-weight:var(--fw-regular);opacity:.85}
.data-table td{padding:var(--sp-3);border-bottom:1px solid var(--color-border);vertical-align:top}
.data-table tr:hover td{background:var(--color-hover-bg)}

/* ---------- Coluna Painel ---------- */
.painel-cel{max-width:280px;white-space:normal}
.painel-nome{font-weight:var(--fw-bold);color:var(--color-heading);display:block;font-size:var(--fs-md)}
.painel-desc{font-size:var(--fs-xs);color:var(--color-text-muted);line-height:var(--lh-relaxed);display:block;margin-top:2px}
.painel-desc em{font-style:italic}

/* ---------- Coluna Uso ---------- */
.uso-cel{min-width:200px;white-space:normal}
.uso-stats{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-xs);color:var(--color-text-muted)}
.uso-item strong{color:var(--color-text);font-variant-numeric:tabular-nums}
.uso-carregando{color:var(--color-text-muted);font-size:var(--fs-xs);font-style:italic}
.uso-indisponivel{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:var(--fs-xs);color:var(--color-text-muted)}
.btn-retry-uso{min-height:26px;padding:2px 10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:transparent;color:var(--color-info-text);font-size:var(--fs-2xs);font-weight:var(--fw-semibold);cursor:pointer}
.btn-retry-uso:hover{background:var(--color-hover-bg)}
.badge-orfao{display:inline-block;padding:2px 8px;border-radius:8px;font-size:9px;font-weight:var(--fw-bold);background:rgba(95,112,96,.14);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px}

/* ---------- Coluna Ações ---------- */
.acoes-cel{min-width:150px}
.acoes-grupo{display:flex;flex-direction:column;gap:var(--sp-1);align-items:flex-start}
.btn-abrir{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 var(--sp-3);border-radius:var(--radius-sm);background:var(--color-brand-primary);color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-decoration:none;white-space:nowrap}
.btn-abrir:hover{background:var(--color-brand-primary-light)}
.btn-copiar{min-height:32px;padding:0 var(--sp-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-card);color:var(--color-text);font-size:var(--fs-xs);font-weight:var(--fw-semibold);cursor:pointer;white-space:nowrap}
.btn-copiar:hover{background:var(--color-hover-bg)}
.btn-copiar.copiado{border-color:var(--color-success-text);color:var(--color-success-text)}

/* ---------- Coluna Acesso ---------- */
.acesso-cel{min-width:170px}
.acesso-wrap{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.acesso-hint{font-size:var(--fs-2xs);color:var(--color-text-muted)}
.btn-revelar{min-height:32px;padding:0 var(--sp-3);border:1px solid var(--color-brand-primary-light);border-radius:var(--radius-sm);background:transparent;color:var(--color-brand-primary-light);font-size:var(--fs-xs);font-weight:var(--fw-semibold);cursor:pointer;white-space:nowrap}
.btn-revelar:hover{background:var(--color-brand-primary-bg)}
.btn-revelar:disabled{opacity:.6;cursor:default}
.acesso-box{width:100%;min-width:190px;background:var(--color-surface);border:1px dashed rgba(249,168,37,.5);border-radius:var(--radius-sm);padding:var(--sp-2);display:flex;flex-direction:column;gap:3px}
.acesso-linha{display:flex;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-xs)}
.acesso-rotulo{color:var(--color-text-muted);font-weight:var(--fw-semibold)}
.acesso-valor{font-family:var(--font-mono);color:var(--color-heading);font-weight:var(--fw-semibold);word-break:break-all;text-align:right}
.acesso-aviso{font-size:var(--fs-2xs);color:var(--color-warning-text);line-height:var(--lh-relaxed);margin-top:2px}
.acesso-erro{font-size:var(--fs-xs);color:var(--color-danger-text)}

/* ---------- Cartões (mobile) — mesmos dados da tabela, layout empilhado ---------- */
.paineis-cards{display:none;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3)}
.painel-card{background:var(--color-surface-card);border-radius:var(--radius-md);padding:var(--sp-3);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--sp-3)}
.painel-card-head{display:flex;flex-direction:column;gap:2px}
.painel-card-uso{display:flex;flex-direction:column;gap:var(--sp-1);padding-top:var(--sp-2);border-top:1px solid var(--color-border)}
.uso-titulo{font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px}
.uso-periodo-card{font-size:var(--fs-2xs);color:var(--color-text-muted)}
.painel-card-acoes{display:flex;gap:var(--sp-2)}
.painel-card-acoes .btn-abrir,.painel-card-acoes .btn-copiar{flex:1;min-height:var(--touch-target)}
.painel-card .acesso-wrap{padding-top:var(--sp-2);border-top:1px solid var(--color-border)}
.painel-card .btn-revelar{min-height:var(--touch-target);width:100%}

/* ---------- Estado vazio (busca sem resultado) ---------- */
.empty-msg{text-align:center;padding:var(--sp-6) var(--sp-4);color:var(--color-text-muted);font-size:var(--fs-sm)}

/* ---------- Rodapé ---------- */
.rodape{padding:var(--sp-4) var(--sp-3) var(--sp-6);text-align:center;font-size:var(--fs-xs);color:var(--color-text-muted)}

/* ---------- Responsivo: tabela vira cartões abaixo de 768px ---------- */
@media(max-width:768px){
  .header-title{font-size:var(--fs-md)}
  .table-scroll{display:none}
  .paineis-cards{display:flex}
  .busca-bar{padding:var(--sp-3)}
}