@charset "UTF-8";
/* =====================================================================
   TCloud Vault — folha de estilo do painel
   Direção visual: "cofre de aço" — chapa escura, tipografia industrial,
   latão como acento de selo/chave. Sem dependência de CDN.
   ===================================================================== */

/* ---------- Fontes locais ---------- */
@font-face { font-family:'Archivo'; src:url('../vendor/fonts/files/archivo-latin-600-normal.woff2') format('woff2');
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../vendor/fonts/files/archivo-latin-700-normal.woff2') format('woff2');
             font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Plex'; src:url('../vendor/fonts/files/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Plex'; src:url('../vendor/fonts/files/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Plex'; src:url('../vendor/fonts/files/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Plex'; src:url('../vendor/fonts/files/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
             font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'PlexMono'; src:url('../vendor/fonts/files/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'PlexMono'; src:url('../vendor/fonts/files/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'PlexMono'; src:url('../vendor/fonts/files/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
             font-weight:600; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --breu:#0f1220;
  --breu-2:#171b2c;
  --tinta:#141826;
  --tinta-2:#3a4058;
  --tinta-3:#6e7488;
  --papel:#eef0f6;
  --superficie:#ffffff;
  --borda:#e2e5ee;
  --borda-forte:#cfd4e2;

  --cofre:#2b3a8f;
  --cofre-2:#3b4cb0;
  --cofre-luz:#e9ecf9;
  --latao:#b4842c;
  --latao-luz:#f8f0dd;

  --ok:#12795c;      --ok-luz:#e3f4ee;
  --aviso:#b8641b;   --aviso-luz:#fdefe0;
  --falha:#ad2138;   --falha-luz:#fbe7ea;

  /* ---- tokens que mudam entre os temas ----
     Cada um destes existe porque uma cor literal quebraria o tema escuro. Ao
     acrescentar um elemento novo, use estes; cor escrita à mão só se ela for a
     mesma nos dois temas — texto branco sobre botão colorido, por exemplo. */
  --superficie-2:#fafbfd;     /* cabeçalho de tabela, linha sob o cursor */
  --linha:#f0f2f7;            /* divisória entre linhas */
  --neutro-fundo:#eef0f6;     /* selo neutro, trecho de dados, botão fantasma */
  --medidor-fundo:#e6e9f2;    /* trilho das barras de ocupação */
  --cofre-borda:#c3caea;
  --latao-borda:#e6cfa0;
  --latao-texto:#8a6516;
  --falha-2:#d3455c;          /* texto de falha sobre fundo claro */
  --aviso-2:#d2762a;

  /* A lateral e a tela de entrada já eram escuras: no tema claro elas não mudam,
     e no escuro só ganham um tom de contraste. */
  --lateral-fundo:#0f1220;
  --lateral-texto:#cdd3e4;
  --lateral-fraco:#7c86a5;
  --login-texto:#a8b2cd;

  --entrada-fundo:#ffffff;    /* área de digitação */
  --interruptor-botao:#ffffff;/* a peça que desliza */
  --topo-fundo:rgba(255,255,255,.88);
  --sombra-cor:16,20,40;      /* usado nas sombras, com opacidade variável */

  --raio:12px;
  --raio-s:8px;
  --sombra:0 1px 2px rgba(16,20,40,.05), 0 8px 24px -12px rgba(16,20,40,.18);
  --sombra-alta:0 18px 48px -18px rgba(16,20,40,.35);
  --lateral:250px;
  --topo:62px;
  --fonte-display:'Archivo','Plex',system-ui,sans-serif;
  --fonte:'Plex',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fonte-dados:'PlexMono',ui-monospace,Consolas,monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

/* Ícones em linha: sem tamanho explícito o SVG assume 300x150 e estoura o layout.
   Esta é a medida padrão; regras mais específicas (botões, menu, estado vazio) mandam. */
svg{ width:17px; height:17px; flex:0 0 auto; display:inline-block; vertical-align:middle; }
svg[width],svg[height]{ width:auto; height:auto; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--fonte); font-size:14px; line-height:1.5;
  color:var(--tinta); background:var(--papel);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--cofre); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ font-family:var(--fonte-display); font-weight:700; letter-spacing:-.02em; margin:0; }
:focus-visible{ outline:2px solid var(--cofre-2); outline-offset:2px; border-radius:4px; }
::selection{ background:var(--cofre); color:#fff; }

/* ---------- Estrutura ---------- */
.layout{ min-height:100vh; }

.lateral{
  position:fixed; inset:0 auto 0 0; width:var(--lateral); z-index:60;
  background:var(--breu); color:var(--lateral-texto); display:flex; flex-direction:column;
  transition:transform .22s ease;
}
.lateral__marca{
  display:flex; align-items:center; gap:11px; padding:18px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.lateral__logo{
  width:34px; height:34px; border-radius:9px; flex:0 0 34px;
  background:linear-gradient(150deg,var(--cofre-2),var(--cofre) 60%,#1c2568);
  display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.lateral__logo svg{ width:19px; height:19px; }
.lateral__nome{ font-family:var(--fonte-display); font-weight:700; font-size:15.5px; color:#fff; letter-spacing:-.02em; line-height:1.1; }
.lateral__sub{ font-size:10.5px; color:var(--lateral-fraco); letter-spacing:.09em; text-transform:uppercase; }

.nav{ padding:12px 10px 18px; overflow-y:auto; flex:1; }
.nav__grupo{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--lateral-fraco);
  padding:16px 10px 7px; font-weight:600;
}
.nav__item{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--raio-s);
  color:var(--lateral-texto); font-size:13.5px; font-weight:500; margin-bottom:2px; position:relative;
}
.nav__item:hover{ background:rgba(255,255,255,.06); text-decoration:none; color:#fff; }
.nav__item.ativo{ background:rgba(59,76,176,.26); color:#fff; }
.nav__item.ativo::before{
  content:''; position:absolute; left:-10px; top:8px; bottom:8px; width:3px;
  background:var(--latao); border-radius:0 3px 3px 0;
}
.nav__item svg{ width:17px; height:17px; flex:0 0 17px; opacity:.85; }
.nav__badge{
  margin-left:auto; background:var(--falha); color:#fff; font-size:10.5px; font-weight:700;
  padding:1px 6px; border-radius:20px; font-family:var(--fonte-dados);
}
.lateral__rodape{ padding:14px 16px; border-top:1px solid rgba(255,255,255,.07); font-size:11px; color:var(--lateral-fraco); }

.principal{ margin-left:var(--lateral); min-height:100vh; display:flex; flex-direction:column; }

.topo{
  position:sticky; top:0; z-index:40; height:var(--topo);
  background:var(--topo-fundo); backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--borda); display:flex; align-items:center; gap:14px; padding:0 22px;
}
.topo__titulo{ font-family:var(--fonte-display); font-size:16.5px; font-weight:700; letter-spacing:-.02em; }
.topo__trilha{ font-size:11.5px; color:var(--tinta-3); }
.topo__acoes{ margin-left:auto; display:flex; align-items:center; gap:9px; }
.menu-btn{ display:none; }

.conteudo{ padding:22px; flex:1; max-width:1500px; width:100%; }

/* ---------- Componentes ---------- */
.cartao{
  background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio);
  box-shadow:var(--sombra);
}
.cartao__topo{
  padding:15px 18px; border-bottom:1px solid var(--borda);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.cartao__titulo{ font-family:var(--fonte-display); font-size:14.5px; font-weight:700; letter-spacing:-.01em; }
.cartao__desc{ font-size:12px; color:var(--tinta-3); margin-top:2px; }
.cartao__corpo{ padding:18px; }
.cartao__topo .btn{ margin-left:auto; }

.grade{ display:grid; gap:16px; }
.grade--4{ grid-template-columns:repeat(4,1fr); }
.grade--3{ grid-template-columns:repeat(3,1fr); }
.grade--2{ grid-template-columns:repeat(2,1fr); }
.grade--fluida{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }

/* Indicadores */
.kpi{ background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio); padding:16px 17px; box-shadow:var(--sombra); }
.kpi__rotulo{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-3); font-weight:600; }
.kpi__valor{ font-family:var(--fonte-display); font-size:29px; font-weight:700; letter-spacing:-.03em; margin-top:6px; line-height:1; font-variant-numeric:tabular-nums; }
.kpi__nota{ font-size:11.5px; color:var(--tinta-3); margin-top:7px; display:flex; align-items:center; gap:5px; }
.kpi--ok .kpi__valor{ color:var(--ok); }
.kpi--falha .kpi__valor{ color:var(--falha); }
.kpi--aviso .kpi__valor{ color:var(--aviso); }
.kpi--critico .kpi__valor{ color:var(--falha); }

/* Botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--fonte); font-size:13px; font-weight:600; line-height:1;
  padding:9px 15px; border-radius:var(--raio-s); border:1px solid transparent;
  cursor:pointer; transition:.15s ease; white-space:nowrap; text-decoration:none;
}
.btn:hover{ text-decoration:none; }
.btn svg{ width:15px; height:15px; }
.btn--primario{ background:var(--cofre); color:#fff; }
.btn--primario:hover{ background:var(--cofre-2); color:#fff; }
.btn--neutro{ background:var(--superficie); color:var(--tinta); border-color:var(--borda-forte); }
.btn--neutro:hover{ background:var(--superficie-2); }
.btn--latao{ background:var(--latao); color:#fff; }
.btn--latao:hover{ filter:brightness(1.07); color:#fff; }
.btn--perigo{ background:var(--falha); color:#fff; }
.btn--perigo:hover{ filter:brightness(1.07); color:#fff; }
.btn--fantasma{ background:transparent; color:var(--tinta-2); }
.btn--fantasma:hover{ background:var(--neutro-fundo); }
.btn--p{ padding:6px 10px; font-size:12px; }
.btn--icone{ padding:8px; }
.btn--icone svg{ width:16px; height:16px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* Selos de estado */
.selo{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  padding:3px 9px; border-radius:20px; white-space:nowrap; letter-spacing:.01em;
}
.selo::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.selo--ok{ background:var(--ok-luz); color:var(--ok); }
.selo--aviso{ background:var(--aviso-luz); color:var(--aviso); }
.selo--falha{ background:var(--falha-luz); color:var(--falha); }
.selo--neutro{ background:var(--neutro-fundo); color:var(--tinta-3); }
.selo--info{ background:var(--cofre-luz); color:var(--cofre); }
.selo--pulsa::before{ animation:pulsa 1.4s infinite; }
@keyframes pulsa{ 0%,100%{opacity:1} 50%{opacity:.25} }

.etiqueta{
  font-family:var(--fonte-dados); font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding:2px 7px; border-radius:5px; background:var(--neutro-fundo); color:var(--tinta-2);
}
.etiqueta--full{ background:var(--cofre-luz); color:var(--cofre); }
.etiqueta--inc{ background:var(--latao-luz); color:var(--latao); }

/* Tabelas */
.tabela-envolve{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.tabela{ width:100%; border-collapse:collapse; font-size:13px; }
table.tabela th{
  text-align:left; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-3); font-weight:600; padding:10px 14px; border-bottom:1px solid var(--borda);
  background:var(--superficie-2); white-space:nowrap; position:sticky; top:0; z-index:1;
}
table.tabela td{ padding:12px 14px; border-bottom:1px solid var(--linha); vertical-align:middle; }
table.tabela tbody tr:hover{ background:var(--superficie-2); }
table.tabela tbody tr:last-child td{ border-bottom:none; }
.td-num{ text-align:right; font-family:var(--fonte-dados); font-variant-numeric:tabular-nums; }
.td-acoes{ text-align:right; white-space:nowrap; }
.dados{ font-family:var(--fonte-dados); font-size:12px; }
.principal-cel{ font-weight:600; }
.sub-cel{ font-size:11.5px; color:var(--tinta-3); margin-top:2px; }

/* Formulários */
.campo{ margin-bottom:15px; }
.campo__rotulo{ display:block; font-size:12px; font-weight:600; color:var(--tinta-2); margin-bottom:6px; }
.campo__dica{ font-size:11.5px; color:var(--tinta-3); margin-top:5px; }
.entrada, .selecao, textarea.entrada{
  width:100%; padding:9px 12px; font-family:var(--fonte); font-size:13.5px; color:var(--tinta);
  background:var(--entrada-fundo); border:1px solid var(--borda-forte); border-radius:var(--raio-s); transition:.15s;
}
.entrada:focus, .selecao:focus, textarea.entrada:focus{
  outline:none; border-color:var(--cofre-2); box-shadow:0 0 0 3px rgba(59,76,176,.14);
}
.entrada--mono{ font-family:var(--fonte-dados); font-size:12.5px; }
textarea.entrada{ resize:vertical; min-height:82px; }
.selecao{ appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e7488' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:15px; padding-right:32px; }
.linha-campos{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
.linha-campos--3{ grid-template-columns:repeat(3,1fr); }

.interruptor{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.interruptor input{ position:absolute; opacity:0; width:0; height:0; }
.interruptor__trilho{
  width:40px; height:22px; border-radius:20px; background:var(--borda-forte); position:relative; transition:.18s; flex:0 0 40px;
}
.interruptor__trilho::after{
  content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:var(--interruptor-botao); transition:.18s; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.interruptor input:checked + .interruptor__trilho{ background:var(--cofre); }
.interruptor input:checked + .interruptor__trilho::after{ transform:translateX(18px); }
.interruptor input:focus-visible + .interruptor__trilho{ outline:2px solid var(--cofre-2); outline-offset:2px; }
.interruptor__texto{ font-size:13px; font-weight:500; }

/* Barra de ocupação */
.medidor{ height:8px; border-radius:8px; background:var(--medidor-fundo); overflow:hidden; }
.medidor__preenche{ height:100%; background:linear-gradient(90deg,var(--cofre-2),var(--cofre)); border-radius:8px; transition:width .4s ease; }
.medidor--alerta .medidor__preenche{ background:linear-gradient(90deg,var(--aviso-2),var(--aviso)); }
.medidor--critico .medidor__preenche{ background:linear-gradient(90deg,var(--falha-2),var(--falha)); }
.medidor-legenda{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--tinta-3); margin-top:6px; font-family:var(--fonte-dados); }

/* ---------------------------------------------------------------
   Elemento assinatura: a fita da cadeia de restauração.
   Cada elo é um ponto de restauração; a falha de um elo aparece
   como ruptura visível na fita.
   --------------------------------------------------------------- */
.fita{ display:flex; align-items:stretch; gap:0; overflow-x:auto; padding:4px 2px 10px; }
.elo{
  position:relative; flex:0 0 auto; min-width:96px; padding:11px 13px 12px;
  background:var(--superficie); border:1px solid var(--borda-forte); border-right-width:0;
  display:flex; flex-direction:column; gap:3px;
}
.elo:first-child{ border-radius:var(--raio-s) 0 0 var(--raio-s); }
.elo:last-child{ border-right-width:1px; border-radius:0 var(--raio-s) var(--raio-s) 0; }
.elo--full{ background:linear-gradient(180deg,var(--cofre-luz),var(--superficie)); border-color:var(--cofre-borda); }
.elo--full .elo__tipo{ color:var(--cofre); }
.elo--inc .elo__tipo{ color:var(--latao); }
.elo__tipo{ font-family:var(--fonte-dados); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.elo__data{ font-size:12px; font-weight:600; letter-spacing:-.01em; }
.elo__tam{ font-family:var(--fonte-dados); font-size:11px; color:var(--tinta-3); }
.elo::after{
  content:''; position:absolute; right:-5px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%; background:var(--superficie);
  border:2px solid var(--borda-forte); z-index:2;
}
.elo:last-child::after{ display:none; }
.elo--rompido{ border-color:var(--falha); background:var(--falha-luz); }
.elo--rompido::after{ border-color:var(--falha); border-style:dashed; }
.elo--atual{ box-shadow:inset 0 -3px 0 var(--latao); }
.fita-vazia{ font-size:12.5px; color:var(--tinta-3); padding:16px; text-align:center; border:1px dashed var(--borda-forte); border-radius:var(--raio-s); }

/* Lista de atividade */
.atividade{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--linha); }
.atividade:last-child{ border-bottom:none; }
.atividade__marca{ width:8px; height:8px; border-radius:50%; margin-top:6px; flex:0 0 8px; background:var(--tinta-3); }
.atividade__marca--ok{ background:var(--ok); }
.atividade__marca--falha{ background:var(--falha); }
.atividade__marca--aviso{ background:var(--aviso); }
.atividade__texto{ font-size:13px; }
.atividade__meta{ font-size:11.5px; color:var(--tinta-3); margin-top:2px; }

/* Estado vazio */
.vazio{ text-align:center; padding:34px 22px; }
.vazio svg{ width:26px; height:26px; color:var(--borda-forte); margin-bottom:9px; opacity:.7; }
.vazio__titulo{ font-family:var(--fonte-display); font-size:14px; font-weight:700; margin-bottom:4px; }
.vazio__texto{ font-size:13px; color:var(--tinta-3); max-width:420px; margin:0 auto 16px; }

/* Abas */
.abas{ display:flex; gap:3px; border-bottom:1px solid var(--borda); margin-bottom:18px; overflow-x:auto; }
.aba{
  padding:10px 15px; font-size:13px; font-weight:600; color:var(--tinta-3);
  border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; background:none; border-top:0; border-left:0; border-right:0;
  font-family:var(--fonte);
}
.aba:hover{ color:var(--tinta); }
.aba.ativa{ color:var(--cofre); border-bottom-color:var(--cofre); }
.painel-aba{ display:none; }
.painel-aba.ativo{ display:block; }

/* Filtros */
.filtros{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.filtros .campo{ margin-bottom:0; min-width:150px; }

/* Paginação */
.paginacao{ display:flex; gap:5px; justify-content:center; padding:16px; flex-wrap:wrap; }
.paginacao a, .paginacao span{
  min-width:33px; height:33px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--raio-s); font-size:13px; font-weight:600; border:1px solid var(--borda);
  color:var(--tinta-2); background:var(--superficie); padding:0 9px;
}
.paginacao a:hover{ background:var(--superficie-2); text-decoration:none; }
.paginacao .atual{ background:var(--cofre); color:#fff; border-color:var(--cofre); }

/* Modal */
.modal-fundo{
  position:fixed; inset:0; background:rgba(15,18,32,.55); backdrop-filter:blur(3px);
  z-index:80; display:none; align-items:flex-start; justify-content:center; padding:26px 16px; overflow-y:auto;
}
.modal-fundo.aberto{ display:flex; }
.modal{
  background:var(--superficie); border-radius:var(--raio); width:100%; max-width:720px; box-shadow:var(--sombra-alta);
  animation:sobe .2s ease; margin:auto;
}
.modal--largo{ max-width:960px; }
@keyframes sobe{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none;} }
.modal__topo{ padding:17px 20px; border-bottom:1px solid var(--borda); display:flex; align-items:center; gap:12px; }
.modal__titulo{ font-family:var(--fonte-display); font-size:16px; font-weight:700; }
.modal__fechar{ margin-left:auto; background:none; border:none; cursor:pointer; color:var(--tinta-3); padding:6px; border-radius:6px; }
.modal__fechar:hover{ background:var(--neutro-fundo); color:var(--tinta); }
.modal__corpo{ padding:20px; max-height:calc(100vh - 220px); overflow-y:auto; }
.modal__rodape{ padding:15px 20px; border-top:1px solid var(--borda); display:flex; gap:9px; justify-content:flex-end; background:var(--superficie-2); border-radius:0 0 var(--raio) var(--raio); }

/* Login */
.login{ min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; }
.login__arte{
  background:radial-gradient(120% 100% at 15% 0%,#26306e 0%,var(--breu) 55%);
  color:#fff; padding:52px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
}
.login__arte::after{
  content:''; position:absolute; right:-140px; bottom:-160px; width:460px; height:460px; border-radius:50%;
  border:1px solid rgba(255,255,255,.09); box-shadow:0 0 0 60px rgba(255,255,255,.03);
}
.login__titulo{ font-family:var(--fonte-display); font-size:38px; font-weight:700; line-height:1.08; letter-spacing:-.035em; max-width:12ch; }
.login__texto{ color:var(--login-texto); font-size:14.5px; max-width:44ch; margin-top:16px; }
.login__lista{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:11px; position:relative; z-index:1; }
.login__lista li{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--lateral-texto); }
.login__lista svg{ width:17px; height:17px; color:var(--latao); flex:0 0 17px; margin-top:1px; }
.login__form{ display:flex; align-items:center; justify-content:center; padding:40px 26px; background:var(--superficie); }
.login__caixa{ width:100%; max-width:370px; }

/* Miscelânea */
.pilha{ display:flex; flex-direction:column; gap:16px; }
.linha{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.espaco{ flex:1; }
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}
.texto-fraco{ color:var(--tinta-3); }
.texto-p{ font-size:12px; }
.texto-dir{ text-align:right; }
.nowrap{ white-space:nowrap; }
.copiavel{ cursor:pointer; border-bottom:1px dashed var(--borda-forte); }
.copiavel:hover{ border-bottom-color:var(--cofre); color:var(--cofre); }
.grafico-caixa{ position:relative; height:250px; }
.oculto{ display:none !important; }

/* Barra de progresso do carregamento */
#barra-carga{
  position:fixed; top:0; left:0; height:2px; width:0; background:var(--latao);
  z-index:200; transition:width .25s ease, opacity .3s; box-shadow:0 0 8px var(--latao);
}

/* ---------- Responsivo ---------- */
@media (max-width:1180px){
  .grade--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:980px){
  :root{ --lateral:0px; }
  .lateral{ transform:translateX(-260px); width:250px; box-shadow:var(--sombra-alta); }
  .lateral.aberta{ transform:none; }
  .principal{ margin-left:0; }
  .menu-btn{ display:inline-flex; }
  .grade--3,.grade--2{ grid-template-columns:1fr; }
  .login{ grid-template-columns:1fr; }
  .login__arte{ padding:34px 26px; }
  .login__titulo{ font-size:29px; }
  .veu-lateral{ position:fixed; inset:0; background:rgba(15,18,32,.5); z-index:55; }
}
@media (max-width:640px){
  .conteudo{ padding:14px; }
  .topo{ padding:0 14px; }
  .grade--4{ grid-template-columns:1fr 1fr; }
  .kpi__valor{ font-size:24px; }
  .linha-campos, .linha-campos--3{ grid-template-columns:1fr; }
  .cartao__topo{ padding:13px 14px; }
  .cartao__corpo{ padding:14px; }
  table.tabela th, table.tabela td{ padding:10px; }
  .modal__corpo{ max-height:calc(100vh - 190px); }
  .topo__trilha{ display:none; }
}
@media (max-width:420px){
  .grade--4{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

@media print{
  .lateral,.topo,.btn,.paginacao{ display:none !important; }
  .principal{ margin-left:0; }
  .cartao{ box-shadow:none; border-color:var(--borda); }
}

/* Nota lateral com ícone */
.nota{ display:flex; gap:11px; align-items:flex-start; }
.nota svg{ width:16px; height:16px; color:var(--latao); margin-top:2px; }
.nota__titulo{ font-weight:600; font-size:13px; margin-bottom:3px; }
.nota__texto{ font-size:12.5px; color:var(--tinta-3); line-height:1.65; max-width:78ch; }

/* Bloco de log / saída bruta */
.bloco-log{
  background:var(--breu); color:var(--lateral-texto); border-radius:var(--raio-s);
  padding:14px 16px; font-family:var(--fonte-dados); font-size:11.5px; line-height:1.6;
  max-height:340px; overflow:auto; white-space:pre-wrap; word-break:break-word; margin:0;
}

/* Andamento da execução em curso ---------------------------------------- */
.andamento{ display:flex; flex-direction:column; gap:7px; }
.andamento__topo{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.andamento__rotina{ font-weight:650; color:var(--tinta); }
.andamento__agente{ font-size:12px; color:var(--tinta-fraca); }
.andamento__pct{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; color:var(--cofre); }
.andamento__trilho{
  height:8px; border-radius:99px; background:var(--cofre-luz); overflow:hidden; position:relative;
}
.andamento__preenchido{
  height:100%; border-radius:99px; background:linear-gradient(90deg, var(--cofre), var(--cofre-2));
  transition:width .6s ease;
}
.andamento__linha{ font-size:12.5px; color:var(--tinta-fraca); }
/* Etapa longa é informação, não alerta: o backup está bem. Cor neutra, sem
   peso — quem lê precisa entender que não há nada a fazer. */
.andamento__etapa-longa{ color:var(--tinta-2); }

/* Silêncio de verdade é aviso: pode exigir alguém indo até a máquina. */
.andamento__silencio{ color:var(--latao); font-weight:600; }
.andamento--vazio{ color:var(--tinta-fraca); font-size:13.5px; }

/* ---------------------------------------------------------------------------
   Baixar o agente
   --------------------------------------------------------------------------- */

/* Faixa de destaque: a versão e o botão são a razão da tela, e precisavam
   parecer isso. Antes o botão ficava perdido no meio do texto. */
.baixar-destaque{ border-color:var(--cofre-2); }
.baixar-destaque__corpo{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.baixar-destaque__marca{
  flex:0 0 auto;
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  background:linear-gradient(160deg, var(--cofre) 0%, var(--cofre-2) 100%);
  color:#fff;
}
.baixar-destaque__marca svg{ width:26px; height:26px; }

.baixar-destaque__texto{ flex:1 1 260px; min-width:0; }
.baixar-destaque__eyebrow{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinta-3); margin-bottom:3px;
}
.baixar-destaque__versao{ font-size:20px; font-weight:800; color:var(--tinta); line-height:1.2; }
.baixar-destaque__meta{ margin-top:5px; font-size:12.5px; color:var(--tinta-2); }

.baixar-destaque__acao{ flex:0 0 auto; text-align:right; }
.baixar-destaque__arquivo{ margin-top:7px; font-size:11px; color:var(--tinta-3); }

/* Notas da versão: uma linha por mudança, com marcador discreto */
.lista-notas{ list-style:none; padding:0; margin:0; }
.lista-notas li{
  position:relative; padding:0 0 0 20px; margin-bottom:9px;
  font-size:13.5px; line-height:1.5; color:var(--tinta);
}
.lista-notas li:last-child{ margin-bottom:0; }
.lista-notas li::before{
  content:""; position:absolute; left:2px; top:8px;
  width:6px; height:6px; border-radius:50%; background:var(--cofre-2);
}

/* O hash é longo e precisa quebrar sem estourar o cartão */
.hash-arquivo{
  word-break:break-all; line-height:1.6; font-size:12px;
  background:var(--papel); border:1px solid var(--borda);
  border-radius:8px; padding:9px 11px;
}

.codigo-ativacao{
  display:inline-block; padding:5px 10px;
  border-radius:8px; letter-spacing:.09em; font-weight:700; font-size:13px;
  background:var(--latao-luz); color:var(--latao-texto);
  border:1px solid var(--latao-borda);
}

/* Passos numerados: o número encabeça, a explicação fica abaixo */
.passos-instalacao{ list-style:none; counter-reset:passo; padding:0; margin:0; }
.passos-instalacao li{
  counter-increment:passo;
  position:relative; padding:0 0 0 42px; margin-bottom:16px;
}
.passos-instalacao li:last-child{ margin-bottom:0; }
.passos-instalacao li::before{
  content:counter(passo);
  position:absolute; left:0; top:-1px;
  width:27px; height:27px; border-radius:9px;
  background:var(--cofre); color:#fff;
  font-size:12.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
/* Só o strong que é filho direto do item vira título: um <strong> dentro da
   explicação ("Em execução") deve continuar em linha. */
.passos-instalacao > li > strong{ display:block; font-size:14px; color:var(--tinta); margin-bottom:2px; }
.passos-instalacao > li > span{ display:block; font-size:13px; color:var(--tinta-2); line-height:1.55; }
.passos-instalacao > li > span strong{ display:inline; color:var(--tinta); }

@media (max-width:720px){
  .baixar-destaque__corpo{ flex-direction:column; align-items:flex-start; gap:14px; }

  /* Sem isto o texto mantém a base de 260px e abre um vão até o botão */
  .baixar-destaque__texto{ flex:0 0 auto; width:100%; }
  .baixar-destaque__acao{ width:100%; text-align:left; }
  .baixar-destaque__acao .btn{ width:100%; justify-content:center; }
}

/* ===========================================================================
   Tema escuro

   Não é o tema claro com as cores invertidas: fundo puro preto com texto puro
   branco cansa a vista em turno de expediente, e as cores de situação —
   sucesso, aviso, falha — perdem legibilidade se mantiverem o tom do tema
   claro. Aqui o fundo é o azul-breu da marca, e as cores de situação são
   clareadas até passarem no contraste sobre ele.

   A lateral já era escura nos dois temas. No escuro ela ganha um tom levemente
   distinto do conteúdo, para a estrutura da página continuar legível.
   =========================================================================== */
[data-tema="escuro"]{
  --breu:#0b0e18;
  --breu-2:#12162a;

  /* texto: nunca branco puro — reduz o brilho sem perder contraste */
  --tinta:#e7eaf5;
  --tinta-2:#b9c0d6;
  --tinta-3:#8a92ab;

  --papel:#0f1220;            /* fundo da área de conteúdo */
  --superficie:#171b2c;       /* cartões */
  --superficie-2:#1d2236;     /* cabeçalho de tabela, linha sob o cursor */
  --borda:#2a3049;
  --borda-forte:#3a4160;
  --linha:#232941;
  --neutro-fundo:#232941;
  --medidor-fundo:#232941;

  --cofre:#4a5cc4;            /* clareado: o azul do tema claro some no escuro */
  --cofre-2:#5e70da;
  --cofre-luz:#1e2547;
  --cofre-borda:#39427a;

  --latao:#d9a746;
  --latao-luz:#2b2415;
  --latao-borda:#4a3d1c;
  --latao-texto:#e8c67c;

  --ok:#3fbf92;      --ok-luz:#12291f;
  --aviso:#e0913c;   --aviso-luz:#2e2113;
  --falha:#e05c6e;   --falha-luz:#2e1620;
  --falha-2:#ef8894;
  --aviso-2:#eaa963;

  --lateral-fundo:#0b0e18;
  --lateral-texto:#c3cade;
  --lateral-fraco:#767e9b;
  --login-texto:#a8b2cd;

  --entrada-fundo:#12162a;
  --interruptor-botao:#e7eaf5;   /* claro: precisa contrastar com o trilho */
  --topo-fundo:rgba(15,18,32,.88);
  --sombra-cor:0,0,0;
  --sombra:0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.6);
  --sombra-alta:0 18px 48px -18px rgba(0,0,0,.75);

  color-scheme: dark;   /* barras de rolagem e campos nativos acompanham */
}

/* ---- ajustes que a troca de paleta não resolve sozinha ---- */

[data-tema="escuro"] .lateral{ background:var(--lateral-fundo); }

/* A marca da lateral tem gradiente próprio, que no escuro fica pesado demais */
[data-tema="escuro"] .lateral__logo{
  background:linear-gradient(150deg,var(--cofre-2),var(--cofre) 60%,#141a3a);
}

/* Botão neutro no escuro: fundo de superfície, e não branco */
[data-tema="escuro"] .btn--neutro{ background:var(--superficie-2); color:var(--tinta); }
[data-tema="escuro"] .btn--neutro:hover{ background:var(--borda); }

/* Campos: fundo próprio, mais escuro que o cartão, para a área de digitação
   se distinguir sem depender só da borda */
[data-tema="escuro"] .entrada,
[data-tema="escuro"] input[type="text"],
[data-tema="escuro"] input[type="email"],
[data-tema="escuro"] input[type="password"],
[data-tema="escuro"] input[type="number"],
[data-tema="escuro"] input[type="date"],
[data-tema="escuro"] input[type="time"],
[data-tema="escuro"] select,
[data-tema="escuro"] textarea{
  background:var(--breu-2);
  color:var(--tinta);
  border-color:var(--borda-forte);
}
[data-tema="escuro"] ::placeholder{ color:var(--tinta-3); }

/* Ícones de calendário e relógio dos campos nativos ficam pretos no escuro */
[data-tema="escuro"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-tema="escuro"] input[type="time"]::-webkit-calendar-picker-indicator{
  filter:invert(1) opacity(.65);
}

/* Diálogos do SweetAlert2 acompanham o tema */
[data-tema="escuro"] .swal2-popup{
  background:var(--superficie) !important;
  color:var(--tinta) !important;
  border:1px solid var(--borda);
}
[data-tema="escuro"] .swal2-title,
[data-tema="escuro"] .swal2-html-container{ color:var(--tinta) !important; }
[data-tema="escuro"] .swal2-input,
[data-tema="escuro"] .swal2-textarea{
  background:var(--breu-2) !important;
  color:var(--tinta) !important;
  border-color:var(--borda-forte) !important;
}

/* Tela de entrada: a caixa do formulário é clara no tema claro e escura aqui */
[data-tema="escuro"] .login__caixa{ background:var(--papel); }

/* Impressão sai sempre em claro: papel é branco nos dois temas */
@media print{
  [data-tema="escuro"]{
    --papel:#ffffff; --superficie:#ffffff; --superficie-2:#fafbfd;
    --tinta:#141826; --tinta-2:#3a4058; --tinta-3:#6e7488;
    --borda:#e2e5ee; --linha:#f0f2f7; --neutro-fundo:#eef0f6;
  }
}

/* ---------------------------------------------------------------------------
   Botão de troca de tema
   --------------------------------------------------------------------------- */
.tema-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border:1px solid var(--borda);
  border-radius:10px;
  background:transparent;
  color:var(--tinta-2);
  cursor:pointer;
  transition:background .15s, color .15s;
}
.tema-btn:hover{ background:var(--neutro-fundo); color:var(--tinta); }
.tema-btn svg{ width:18px; height:18px; }

/* Mostra o ícone do tema que será aplicado ao clicar, não o atual:
   o botão anuncia o resultado, não o estado. */
.tema-btn .tema-btn__sol{ display:none; }
[data-tema="escuro"] .tema-btn .tema-btn__sol{ display:block; }
[data-tema="escuro"] .tema-btn .tema-btn__lua{ display:none; }

@media (pointer:coarse){
  .tema-btn{ width:44px; height:44px; }
}

/* ---------------------------------------------------------------------------
   Filtros da tela de rotinas

   O campo de busca é o que mais se usa aqui — num acesso de provedor, é por ele
   que se chega a uma rotina específica entre dezenas. Por isso ele cresce e os
   seletores ficam com largura fixa, em vez de todos disputarem espaço igual.
   --------------------------------------------------------------------------- */
.filtros--rotinas{ align-items:flex-end; row-gap:12px; }

.filtros--rotinas .campo--cresce{ flex:1 1 320px; min-width:240px; }
.filtros--rotinas .campo{ flex:0 0 auto; min-width:170px; }
.filtros--rotinas .btn{ flex:0 0 auto; }

/* O botão alinha com a base dos campos, não com o rótulo acima deles */
.filtros--rotinas .btn{ margin-bottom:1px; }

@media (max-width:900px){
  /* Em tela estreita, busca ocupa a linha inteira e os seletores se dividem */
  .filtros--rotinas .campo--cresce{ flex:1 1 100%; }
  .filtros--rotinas .campo{ flex:1 1 45%; min-width:0; }
  .filtros--rotinas .btn{ flex:1 1 auto; justify-content:center; }
}

/* ---------------------------------------------------------------------------
   Resposta do agente dentro de um formulário

   Bloco próprio, separado dos campos: sem isso, a mensagem de espera aparecia
   solta entre um campo e o rótulo do seguinte, parecendo legenda de outro
   campo. Vazio, não ocupa espaço nenhum.
   --------------------------------------------------------------------------- */
.resposta-agente:empty{ display:none; }
.resposta-agente{ margin:4px 0 18px; }
.resposta-agente .nota{ margin:0; }
.resposta-agente .cartao{ background:var(--superficie-2); }

/* Contador de pendências técnicas: são coisas a resolver, não falhas em curso.
   Cor de atenção, e não de alerta — a diferença importa para quem bate o olho
   no menu e decide o que fazer agora. */
.nav__badge--aviso{ background:var(--latao); }

/* ---------------------------------------------------------------------------
   Cofre: a tabela mais larga do painel

   Oito colunas, e uma delas é um nome de arquivo de setenta caracteres com o
   hash embaixo. No monitor do provedor cabia; em tela menor, cada coluna virava
   uma tira de duas letras por linha, e o nome do arquivo — o dado que se
   procura aqui — ficava ilegível.

   A saída não é diminuir a fonte: é dar largura a quem precisa e tirar de quem
   não precisa.
   --------------------------------------------------------------------------- */
.tabela--cofre{ table-layout:fixed; width:100%; }

.tabela--cofre th, .tabela--cofre td{ overflow-wrap:anywhere; }

/*
 * As larguras somam exatamente 100%.
 *
 * A primeira versão dava 38% ao arquivo E um min-width de 260px. Com
 * table-layout fixed, um mínimo maior que a fatia estoura a tabela: ela fica
 * mais larga que o container e aparece a barra de rolagem, com a coluna de
 * ações do lado de fora. Foi o que aconteceu.
 *
 * Aqui não há mínimo nenhum. O que precisa de espaço ganha percentual; o resto
 * cede.
 */
.tabela--cofre .col-arquivo{ width:32%; }
.tabela--cofre .col-cliente{ width:12%; }
.tabela--cofre .col-rotina{ width:14%; }
.tabela--cofre .col-tipo{ width:8%; }
.tabela--cofre .col-tamanho{ width:8%; text-align:right; }
.tabela--cofre .col-data{ width:8%; }

/* Três botões de ícone lado a lado: 6% de 1500px são 90px, e não cabem.
   Percentual generoso aqui evita a rolagem horizontal. */
.tabela--cofre .col-acao{ width:10%; }
.tabela--cofre td.td-acoes{ white-space:nowrap; }

/* O hash não precisa caber inteiro: precisa caber o começo, que é o que se
   compara de olho. O resto vem no title, para copiar. */
.cofre-hash{
  display:block;
  font-size:10.5px;
  color:var(--tinta-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}



@media (max-width:900px){
  /* Abaixo disso a tabela vira cartões (ver responsivo.css), e a largura fixa
     atrapalharia. */
  .tabela--cofre{ table-layout:auto; }
  .tabela--cofre .col-arquivo,
  .tabela--cofre .col-cliente,
  .tabela--cofre .col-rotina,
  .tabela--cofre .col-tipo,
  .tabela--cofre .col-tamanho,
  .tabela--cofre .col-data,
  .tabela--cofre .col-acao{ width:auto; }

  .cofre-hash{ white-space:normal; overflow:visible; text-overflow:clip; }
}