/* ==========================================================================
   STATUS DA VPS · estilos do painel (complementa stamina.css)
   ========================================================================== */

html { background: var(--stm-fundo); }
.so-claro { display: none !important; }
[data-tema="claro"] .so-claro { display: block !important; }
[data-tema="claro"] .so-escuro { display: none !important; }
[hidden] { display: none !important; }

.stm-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */
.login {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--stm-gutter);
  min-height: 100vh;
  padding-left: var(--stm-margem);
}
.login-col {
  grid-column: 1 / span 5;
  display: flex;
  flex-direction: column;
  gap: var(--stm-e-8);
  padding-block: var(--stm-e-7);
  max-width: 30rem;
}
.login-logo { height: 30px; width: auto; align-self: flex-start; }
.login-texto { margin-top: auto; }
.login-texto .stm-lede { margin-top: var(--stm-e-5); }
.login-form { display: flex; flex-direction: column; gap: var(--stm-e-5); align-items: flex-start; }
.login-form .stm-campo { width: 100%; }
.login-form .stm-input { width: 100%; }
.login-erro { white-space: normal; }
.login-rodape { margin-top: auto; }
.login-img { grid-column: 7 / -1; margin: 0; position: relative; overflow: hidden; }
.login-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; padding-right: var(--stm-margem); }
  .login-col { grid-column: 1; max-width: none; gap: var(--stm-e-7); padding-block: var(--stm-e-6); }
  .login-img { display: none; }
  .login-texto { margin-top: var(--stm-e-6); }
}

/* --------------------------------------------------------------------------
   Topo e cabeçalho do painel
   -------------------------------------------------------------------------- */
.marca { display: flex; align-items: center; gap: var(--stm-e-4); min-width: 0; }
.marca-sep { width: 1px; height: 18px; background: var(--stm-linha-forte); flex: none; }
.marca .stm-micro { white-space: nowrap; }
.topo-acoes { display: flex; align-items: center; gap: var(--stm-e-3); }
.topo-acoes form { margin: 0; }

.painel { display: flex; flex-direction: column; gap: var(--stm-e-6); padding-block: var(--stm-e-7) var(--stm-e-9); }
.cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--stm-e-5); flex-wrap: wrap; margin-bottom: var(--stm-e-3); }
.cabeca .stm-eyebrow { margin-bottom: var(--stm-e-4); }
.cabeca-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: var(--stm-e-3); }
.cabeca-botoes { display: flex; gap: var(--stm-e-3); flex-wrap: wrap; justify-content: flex-end; }
.progresso { min-height: 1.4em; color: var(--stm-texto-3); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .cabeca-acoes { align-items: flex-start; width: 100%; }
  .cabeca-botoes { justify-content: flex-start; }
  .marca .stm-micro, .marca-sep { display: none; }
}

.aviso-erro { gap: var(--stm-e-3); }
.aviso-erro p { color: var(--stm-texto-2); }

/* KPIs */
.stm-kpi .stm-legenda { color: var(--stm-texto-2); }
.stm-kpi-v small { white-space: nowrap; }
.stm-kpi .stm-delta { flex-wrap: wrap; }

/* Linha de dois blocos */
.linha-2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--stm-gutter); }
@media (max-width: 1100px) { .linha-2 { grid-template-columns: minmax(0, 1fr); } }

.vazio-g { padding: var(--stm-e-6) 0; color: var(--stm-texto-3); }

/* Alterados por último */
.recentes .stm-lista > li { gap: var(--stm-e-4); align-items: baseline; padding: 0.85rem 0; min-width: 0; }
.recentes .rec-data { flex: none; width: 4.75rem; font-size: var(--stm-t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--stm-texto-3); font-variant-numeric: tabular-nums; }
.recentes .rec-nome { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.recentes .rec-nome a { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--stm-t-legenda); }
.recentes .rec-nome a:hover { text-decoration: underline; text-underline-offset: 3px; }
.recentes .rec-nome > span { font-size: var(--stm-t-micro); color: var(--stm-texto-3); }
.recentes .rec-nome a.u { display: flex; }
.recentes .rec-nome a.u:hover { text-decoration: none; }

/* --------------------------------------------------------------------------
   Lista de sites
   -------------------------------------------------------------------------- */
.lista-card { gap: var(--stm-e-5); }
.tabela-sites { display: flex; flex-direction: column; }
.lista-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--stm-e-5); flex-wrap: wrap; }
.lista-topo .stm-legenda { margin-top: var(--stm-e-2); }
.busca { min-height: 2.75rem; width: 16rem; max-width: 100%; font-size: .9rem; }
.stm-filtros .stm-select { min-height: 2.75rem; font-size: .9rem; }
.busca::-webkit-search-cancel-button { filter: grayscale(1); }

.lista-cab, .linha {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) 4.5rem 7rem 3.5rem 5.25rem 9rem 2.25rem;
  column-gap: var(--stm-e-4);
  align-items: center;
}
.lista-cab {
  padding: 0 .5rem .85rem;
  border-bottom: 1px solid var(--stm-linha-forte);
  font-size: var(--stm-t-micro);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stm-texto-3);
}
.lista-cab .n, .linha .n { text-align: right; font-variant-numeric: tabular-nums; }

.item { border-bottom: 1px solid var(--stm-linha); }
.linha { padding: .95rem .5rem; font-size: var(--stm-t-legenda); color: var(--stm-texto-2); border-radius: 8px; }
.item > .linha { cursor: default; }
.item.tem-paginas > .linha { cursor: pointer; }
.linha:hover { background: color-mix(in srgb, var(--stm-texto) 3%, transparent); }
.linha > div { min-width: 0; }

.c-site { display: flex; flex-direction: column; gap: 2px; }
.c-site a { color: var(--stm-texto); text-decoration: none; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-site a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.c-site .sub { font-size: var(--stm-t-micro); color: var(--stm-texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-site .ext { display: inline-block; width: .8em; height: .8em; margin-left: .35em; vertical-align: -.05em; opacity: .5; }
.linha .stm-status { font-size: var(--stm-t-legenda); }
.linha .cel-ok { color: var(--stm-texto-2); }
.linha .cel-vazia { color: var(--stm-texto-3); }
.linha .stm-status { gap: .5rem; }
.linha .stm-status::before { width: 8px; height: 8px; }

.c-tog button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--stm-texto-2); cursor: pointer;
}
.c-tog button:hover { color: var(--stm-texto); background: var(--stm-superficie-alta); }
.c-tog svg { width: 1.1rem; height: 1.1rem; transition: transform var(--stm-dur) var(--stm-curva); }
.c-tog button[aria-expanded="true"] svg { transform: rotate(180deg); }

.motivos { padding: 0 .5rem .95rem calc(8.5rem + var(--stm-e-4) + .5rem); margin-top: -.35rem; font-size: var(--stm-t-micro); line-height: 1.5; color: var(--stm-texto-2); }
.motivos span + span::before { content: "·"; margin: 0 .5em; color: var(--stm-texto-3); }

/* Páginas internas em árvore: domínio apagado, caminho em destaque */
.paginas { padding-bottom: .5rem; }
.paginas .linha { padding-block: 0; align-items: start; border-radius: 0; }
.paginas .linha > div, .paginas .linha .dados > div { padding-block: .65rem; }
.paginas .c-site { position: relative; align-self: stretch; padding-left: calc(var(--n, 1) * 1.5rem); }
.paginas .nivel-1 { --n: 1; } .paginas .nivel-2 { --n: 2; } .paginas .nivel-3 { --n: 3; } .paginas .nivel-4 { --n: 4; }
.paginas .c-site a { font-size: var(--stm-t-legenda); }
.u { display: inline-flex; align-items: baseline; max-width: 100%; min-width: 0; }
.u .u-host { color: var(--stm-texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 10 auto; min-width: 2.5em; }
.u .u-mae { color: var(--stm-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 4 auto; min-width: 1.5em; }
.u .u-cam { color: var(--stm-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
@media (min-width: 1081px) {
  /* Nas páginas, o endereço ocupa também as colunas Tipo e Páginas */
  .paginas .c-site { grid-column: 2 / span 2; }
}
.u:hover .u-cam { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.c-site a.u:hover { text-decoration: none; }
.u .ext { flex: none; }
.arvore i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--stm-linha-forte); }
.arvore .g1 { left: .45rem; } .arvore .g2 { left: 1.95rem; } .arvore .g3 { left: 3.45rem; } .arvore .g4 { left: 4.95rem; }
.arvore .e { bottom: auto; height: 1.3rem; width: .75rem; background: none; border-left: 1px solid var(--stm-linha-forte); border-bottom: 1px solid var(--stm-linha-forte); border-bottom-left-radius: 5px; }
.arvore .e1 { left: .45rem; } .arvore .e2 { left: 1.95rem; } .arvore .e3 { left: 3.45rem; } .arvore .e4 { left: 4.95rem; }
.paginas .sub, .paginas .motivo-pag { padding-left: 0; }
.paginas .motivo-pag { display: block; font-size: var(--stm-t-micro); color: var(--stm-texto-2); white-space: normal; }
.pag-oculta-info { padding: .25rem .5rem .75rem calc(8.5rem + var(--stm-e-4) + .5rem + 1.5rem); font-size: var(--stm-t-micro); color: var(--stm-texto-3); }

.vazio { padding: var(--stm-e-6) 0; }

/* Tablet e celular: cada site vira um bloco com os dados em duas colunas */
@media (max-width: 1080px) {
  .lista-cab { display: none; }
  .linha {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "sit tog" "site site" "dados dados";
    row-gap: .6rem;
    padding: 1.1rem .25rem;
  }
  .c-sit { grid-area: sit; align-self: center; }
  .c-site { grid-area: site; }
  .c-tog { grid-area: tog; }
  .linha .dados { grid-area: dados; }
  .linha > [data-l] { display: none; }
  .linha .dados { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem var(--stm-e-4); }
  .linha .dados .n { text-align: left; }
  .linha .dados .stm-status { white-space: normal; }
  .linha .dados > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .linha .dados > div::before { content: attr(data-l); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--stm-texto-3); }
  .motivos { padding: 0 .25rem 1.1rem; margin-top: -.5rem; }
  .paginas .linha { grid-template-areas: "sit sit" "site site" "dados dados"; row-gap: .35rem; padding: .8rem .25rem .8rem calc(var(--n, 1) * 1.1rem); position: relative; }
  .paginas .linha > div, .paginas .linha .dados > div { padding-block: 0; }
  .paginas .c-site { padding-left: 0; position: static; }
  .paginas .c-tog { display: none; }
  .arvore i { display: none; }
  .paginas .u { display: block; white-space: normal; overflow-wrap: anywhere; }
  .paginas .u > span { white-space: normal; overflow: visible; }
  .paginas .linha::before { content: ""; position: absolute; left: calc(var(--n, 1) * 1.1rem - .85rem); top: .8rem; width: .55rem; height: .7rem; border-left: 1px solid var(--stm-linha-forte); border-bottom: 1px solid var(--stm-linha-forte); border-bottom-left-radius: 4px; }
  .pag-oculta-info { padding-left: 1.1rem; }
}
@media (min-width: 1081px) {
  .linha .dados { display: contents; }
}

/* Pastas sem domínio */
#outras-lista li { justify-content: space-between; font-size: var(--stm-t-legenda); }
#outras-lista li span:last-child { color: var(--stm-texto-3); font-size: var(--stm-t-micro); letter-spacing: .1em; text-transform: uppercase; }

/* Rodapé */
.stm-rodape { padding-block: 0; line-height: 1.8; }
.stm-rodape span + span::before { content: "·"; margin: 0 .6em; }

/* Gráfico: texto dos rótulos */
.g-rot { fill: var(--stm-texto-2); font: 300 13px var(--stm-fonte); }
.g-lim { stroke: var(--stm-texto-3); stroke-width: 1; stroke-dasharray: 3 4; }
.g-lim-t { fill: var(--stm-texto-3); font: 400 11px var(--stm-fonte); letter-spacing: .08em; }
.stm-tooltip .u { font-size: var(--stm-t-micro); color: var(--stm-texto-2); margin-bottom: .35rem; word-break: break-all; }

/* Carregando */
.carregando { opacity: .55; }
@keyframes pulsar { 50% { opacity: .35; } }
.stm-status.verificando::before { animation: pulsar 1.2s ease-in-out infinite; }

.kpi-l { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (max-width: 1080px) { .so-desk { display: none !important; } }

/* Tela da senha: lembrar e avisos */
.lembrar { display: flex; align-items: center; gap: .6rem; font-size: var(--stm-t-legenda); color: var(--stm-texto-2); cursor: pointer; user-select: none; }
.lembrar input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--stm-roxo); }
.login-aviso { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem 1.5rem; border-radius: var(--stm-raio-card); background: var(--stm-superficie); }
.login-aviso code, .aviso-erro code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; color: var(--stm-texto); word-break: break-all; }

/* Acompanhamento: link para a página exclusiva da LP */
/* Acompanhamento: botão verde para instalar, roxo para abrir os números */
.dados-btn { min-height: 2.125rem; padding: 0 1rem; font-size: .72rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
/* Instalar: pílula verde de contorno (preenche ao passar o mouse); com várias LPs sem código a lista não vira um mar verde */
.dados-instalar { background: transparent; color: var(--stm-verde) !important; box-shadow: inset 0 0 0 1.5px var(--stm-verde); }
.dados-instalar:hover { transform: none; background: var(--stm-verde); color: #000 !important; box-shadow: 0 0 18px rgba(11, 253, 129, .5); }
/* No modo claro o verde não tem contraste como texto: fica a pílula verde cheia, padrão da marca */
[data-tema="claro"] .dados-instalar { background: var(--stm-verde); color: #000 !important; box-shadow: none; }
.dados-ver { background: var(--stm-roxo); color: #fff !important; }
.dados-ver:hover { transform: none; background: #7f61ff; box-shadow: 0 0 18px rgba(109, 75, 255, .6); }
/* SSL: ✅ ou ❌ centralizado na coluna */
.lista-cab .c, .linha .c-ssl { text-align: center; }
.cel-ssl { font-size: 1rem; line-height: 1; cursor: default; }
@media (max-width: 1080px) {
  .linha .c-ssl { text-align: left; }
  .linha .dados > .c-dados { align-items: flex-start; }
  .dados-btn { padding: 0 .8rem; }
}