/* Tema do painel: a identidade visual do "painel de controle" em todas as telas.
   Escuro, chapado, bordas finas de 1 px, rótulos em mono minúsculo, destaque ciano.
   Camadas: `base` para elementos, `components` para as classes do tema. As utilidades do Tailwind vencem os dois,
   então `!p-0`, `text-xs` e afins continuam funcionando sobre os componentes. */

:root {
  --fundo: #070c10;
  --painel: #0b1318;
  --painel-2: #0f1a21;
  --linha: #16232b;
  --metal: #22333d;
  --metal-claro: #35505d;
  --ouro: #6fb8c6;        /* cor de rótulos e títulos de seção (nome histórico) */
  --ouro-claro: #e7eef2;
  --ciano: #3dd6ec;
  --verde: #3ddc84;
  --gas: #3ddc84;
  --mineral: #4aa8ff;
  --ambar: #f5b83d;
  --vermelho: #f0555f;
  --roxo: #b56bff;
  --texto: #e7eef2;
  --texto-fraco: #7d8f99;
  --lateral: 14rem;
  --altura-topo: 3.5rem;
  --altura-barra: 3.5rem; /* compatibilidade */
  --fonte: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", "JetBrains Mono", Consolas, "Courier New", monospace;
  color-scheme: dark;
}

@layer base {
  html { background: var(--fundo); font-size: 125%; }
  body.tema {
    margin: 0; min-height: 100vh; font-family: var(--fonte); color: var(--texto); background: var(--fundo);
    background-image: radial-gradient(ellipse at 60% -20%, rgba(61, 214, 236, .05), transparent 55%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background: rgba(61, 214, 236, .28); }
  * { scrollbar-color: #2a4350 transparent; scrollbar-width: thin; }

  .pagina h1 { margin: 0 0 .3rem; font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; color: var(--texto); }
  .pagina h1 + p { color: var(--texto-fraco); }
  .pagina h2 { font: 600 .74rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ciano); }
  .pagina h3 { letter-spacing: .01em; }
  .pagina a { color: var(--ciano); }
  .pagina a:hover { text-decoration: underline; }
  .pagina a.campo-link, .pagina a.btn, .pagina a.menu-item, .pagina a.caixa { text-decoration: none; }
  .pagina code, .pagina kbd { font-family: var(--mono); font-size: .8em; }
  .pagina code { background: #0a1217; border: 1px solid var(--linha); border-radius: 3px; padding: 0 .3em; color: #9fe7f3; }
  .pagina pre { background: #0a1217 !important; border: 1px solid var(--linha) !important; border-radius: 4px !important; color: #c4dde4 !important; font-family: var(--mono); }
  .pagina hr { border-color: var(--linha); }
  .pagina table { border-collapse: collapse; }
  .pagina thead { background: transparent; color: var(--texto-fraco) !important; font-family: var(--mono); letter-spacing: .12em; }
  .pagina input[type="checkbox"] { accent-color: #3dd6ec; }
  .pagina details > summary { list-style: none; }
  .pagina details > summary::-webkit-details-marker { display: none; }
  .pagina details > summary::before { content: "▸"; display: inline-block; margin-right: .5rem; color: var(--ciano); transition: transform .15s; }
  .pagina details[open] > summary::before { transform: rotate(90deg); }
  .pagina .rounded-lg, .pagina .rounded-xl, .pagina .rounded { border-radius: 4px; }
  .pagina span.rounded-full { border-radius: 3px; }
  .pagina .shadow-sm { box-shadow: none; }
}

@layer components {
  /* ------------------------------------------------ casco: lateral + coluna (topo e página) */
  .shell { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }
  .coluna { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
  @media (max-width: 900px) { .shell { grid-template-columns: 1fr; } }

  .lateral {
    position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 0 .55rem .75rem;
    background: #090f13; border-right: 1px solid var(--linha);
  }
  /* celular e tablet estreito: a lateral vira uma gaveta que abre pelo botão do topo */
  .hamb { display: none; width: 2.3rem; height: 2.3rem; flex: none; place-items: center; background: none; border: 1px solid var(--metal); border-radius: 3px; color: var(--texto); cursor: pointer; }
  .hamb svg { width: 1.25rem; height: 1.25rem; }
  .lateral-fundo { display: none; }
  @media (max-width: 900px) {
    .hamb { display: grid; }
    .lateral { position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; width: min(17rem, 86vw); height: 100vh; transform: translateX(-102%); transition: transform .18s ease; overflow-y: auto; box-shadow: none; }
    .lateral.aberta { transform: none; box-shadow: 8px 0 30px rgba(0, 0, 0, .55); }
    .status-sistema { display: none; }
    .lateral-fundo.aberta { display: block; position: fixed; z-index: 55; inset: 0; background: rgba(2, 6, 9, .62); }
  }

  .marca { display: flex; align-items: center; gap: .6rem; height: var(--altura-topo); padding: 0 .45rem; color: var(--texto); text-decoration: none !important;
    font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: .78rem; flex: none; }
  .marca svg { width: 1.75rem; height: 1.75rem; flex: none; filter: drop-shadow(0 0 5px rgba(61, 214, 236, .5)); }
  .marca small { color: var(--ciano); font-weight: 700; }

  .menu { flex: 1; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; padding-top: .35rem; }
  .menu-grupo { margin: 1.15rem .55rem .35rem; font: 500 .62rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #7d8f99; }
  .menu-grupo:first-child { margin-top: .35rem; }
  .menu-item {
    position: relative; display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; font-size: .9rem; color: #b9c7ce !important;
    border-radius: 3px; text-decoration: none !important;
  }
  .menu-item svg { width: 1.125rem; height: 1.125rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
  .menu-item:hover { color: var(--texto) !important; background: rgba(255, 255, 255, .035); }
  .menu-item.ativo { color: var(--texto) !important; background: rgba(61, 214, 236, .07); }
  .menu-item.ativo svg { stroke: var(--ciano); opacity: 1; }
  .menu-item.ativo::before { content: ""; position: absolute; left: -.55rem; top: 0; bottom: 0; width: 3px; background: var(--ciano); box-shadow: 0 0 10px rgba(61, 214, 236, .6); }
  .menu-item .contagem { margin-left: auto; min-width: 1.3rem; padding: 0 .35rem; text-align: center; font: 700 .68rem var(--mono); background: var(--ambar); color: #1a1000; border-radius: 3px; }

  .status-sistema { flex: none; margin-top: .6rem; padding: .8rem .9rem; border: 1px solid var(--linha); border-radius: 4px; background: #0a1116; font-family: var(--mono); font-size: .8rem; color: #b9c7ce; }
  .status-sistema small { display: block; margin-bottom: .45rem; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: #7d8f99; }
  .status-sistema b { color: var(--verde); font-weight: 600; }
  .status-sistema div { line-height: 1.6; }
  .status-sistema .batimento { display: flex; align-items: center; gap: .45rem; margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--linha); color: var(--verde); font-weight: 600; }
  .status-sistema .batimento svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
  .status-sistema .batimento.morto { color: var(--vermelho); }

  .topo {
    position: sticky; top: 0; z-index: 30; height: var(--altura-topo); display: flex; align-items: center; gap: 1.1rem; padding: 0 1.1rem;
    background: rgba(9, 15, 19, .92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linha); flex: none;
  }
  .topo .espaco { flex: 1; }
  .topo-titulo { display: flex; align-items: center; gap: .55rem; font: 600 .78rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ciano); }
  .topo-titulo svg, .icone-btn svg, .usuario summary svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .chip { display: flex; align-items: baseline; gap: .4rem; font-family: var(--mono); color: var(--texto); text-decoration: none !important; }
  .chip small { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: #7d8f99; }
  .chip b { font-size: .82rem; font-weight: 600; }
  .chip.alerta b { color: var(--vermelho); }
  .conexao { display: flex; align-items: center; gap: .5rem; font: 600 .78rem var(--mono); color: var(--verde); }
  .conexao b { font-weight: 600; }
  .led { width: 9px; height: 9px; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 8px var(--vermelho); flex: none; }
  .led.vivo { background: var(--verde); box-shadow: 0 0 8px var(--verde); }
  .led:not(.vivo) + b { color: var(--vermelho); }
  .icone-btn { position: relative; display: grid; place-items: center; width: 2rem; height: 2rem; color: #b9c7ce; border-radius: 3px; }
  .icone-btn:hover { background: rgba(255, 255, 255, .05); color: var(--texto); }
  .icone-btn .ponto { position: absolute; top: .3rem; right: .35rem; width: 7px; height: 7px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 6px var(--ambar); }
  .usuario { position: relative; }
  .usuario summary { display: flex; align-items: center; gap: .25rem; cursor: pointer; color: #b9c7ce; list-style: none; }
  .usuario summary::-webkit-details-marker, .usuario summary::before { display: none !important; }
  .avatar { display: grid; place-items: center; width: 2rem; height: 2rem; font: 700 .8rem var(--mono); color: var(--texto); background: #10202a; border: 1px solid var(--metal-claro); border-radius: 3px; }
  .usuario-menu { position: absolute; right: 0; top: 2.6rem; min-width: 11rem; padding: .7rem .8rem; background: #0c151b; border: 1px solid var(--metal); border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, .55); font-size: .85rem; }
  .usuario-menu button { margin-top: .5rem; padding: 0; background: none; border: 0; color: var(--ciano); cursor: pointer; font: inherit; }
  @media (max-width: 700px) { .conexao b { display: none; } }

  .pagina { min-width: 0; flex: 1; padding: 1.7rem 2rem 3rem; }
  .pagina-larga { padding: 0; display: flex; flex-direction: column; }
  .pagina > .conteudo { max-width: 74rem; margin: 0 auto; }
  .pagina-larga > .conteudo { max-width: none; flex: 1; display: flex; flex-direction: column; min-height: 0; }
  @media (max-width: 700px) { .pagina { padding: 1rem; } }

  /* ------------------------------------------------ painel (caixa) */
  .caixa { position: relative; padding: 1.15rem 1.25rem; border: 1px solid var(--linha); border-radius: 4px; background: var(--painel); }
  a.caixa:hover, .caixa.clicavel:hover { border-color: #2a6f7d; background: #0d181e; text-decoration: none !important; }

  /* ------------------------------------------------ botões e campos */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .5rem .95rem; cursor: pointer;
    font: 600 .8rem var(--fonte); color: #eafcff; white-space: nowrap; text-decoration: none !important;
    background: #1c7386; border: 1px solid #2792a8; border-radius: 3px; transition: background .12s, border-color .12s;
  }
  .btn:hover { background: #22879d; border-color: #3dd6ec; }
  .btn:active { transform: translateY(1px); }
  .btn:disabled { opacity: .4; cursor: not-allowed; }
  .btn.btn-sec { color: var(--texto); background: transparent; border-color: var(--metal-claro); }
  .btn.btn-sec:hover { background: rgba(255, 255, 255, .05); border-color: #5a7a88; }
  .btn.btn-perigo { color: #ff9aa2; background: rgba(240, 85, 95, .07); border-color: #7a2e36; }
  .btn.btn-perigo:hover { background: rgba(240, 85, 95, .15); border-color: #b04450; }

  .campo {
    display: block; width: 100%; padding: .5rem .7rem; font: .88rem var(--fonte); color: var(--texto); border-radius: 3px;
    background: #091015; border: 1px solid #1f313b;
  }
  .campo:focus { outline: none; border-color: var(--ciano); box-shadow: 0 0 0 1px rgba(61, 214, 236, .35); }
  .campo::placeholder { color: #7d8f99; }
  .campo[readonly] { opacity: .75; }
  select.campo { appearance: auto; }
  /* mesma altura para campo e seleção: as linhas do formulário alinham por cima e por baixo */
  input.campo:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select.campo { height: 2.55rem; box-sizing: border-box; }
  input.campo[type="color"] { height: 2.55rem; padding: .2rem; }
  textarea.campo { box-sizing: border-box; line-height: 1.45; }
  .rotulo-campo { display: block; margin-bottom: .3rem; font: 500 .62rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-fraco); }

  /* ------------------------------------------------ selos de estado */
  .selo-estado { display: inline-block; padding: 1px 7px; font: 600 .64rem var(--mono); letter-spacing: .1em; text-transform: uppercase; border-radius: 3px; background: color-mix(in srgb, currentColor 11%, transparent); white-space: nowrap; }
  .selo-estado.ok { color: var(--verde); }
  .selo-estado.rodando { color: var(--ciano); }
  .selo-estado.falha { color: var(--vermelho); }
  .selo-estado.atencao { color: var(--ambar); }
  .selo-estado.neutro { color: var(--texto-fraco); }
  .etiqueta { display: inline-block; padding: 0 .4rem; font: 600 .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texto); background: #12222b; border: 1px solid var(--metal); border-radius: 3px; }

  /* ------------------------------------------------ avisos */
  .aviso { margin-bottom: 1.2rem; padding: .7rem 1rem; font-size: .88rem; border: 1px solid; border-left-width: 3px; background: var(--painel); border-radius: 3px; }
  .aviso.ok { color: #a9eaf5; border-color: #1f7488; }
  .aviso.erro { color: #ffb3ba; border-color: #a43a48; }

  /* ------------------------------------------------ páginas soltas (entrar, instalar, erro) */
  body.tema-centro { display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
  .cartao-entrada { width: 100%; max-width: 26rem; }
  .cartao-entrada .marca { justify-content: center; margin-bottom: 1.2rem; height: auto; font-size: 1rem; }
  .cartao-entrada .marca svg { width: 2.125rem; height: 2.125rem; }
}

@layer components {
  .status-sistema .modelo-linha { margin-top: .3rem; color: #7d8f99; font-size: .68rem; word-break: break-all; }
  .ajuda { position: relative; }
  .ajuda summary { list-style: none; cursor: pointer; }
  .ajuda summary::-webkit-details-marker, .ajuda summary::before { display: none !important; }
  .ajuda-menu { width: 21rem; line-height: 1.5; }
  .ajuda-menu p { margin: .3rem 0 .8rem; font-size: .78rem; color: #b9c7ce; }
  .ajuda-menu kbd { padding: 0 .3rem; border: 1px solid var(--metal-claro); border-radius: 3px; }
}

@layer components {
  /* lateral: tipografia e ritmo como no painel de referência */
  .marca { font-size: .95rem; letter-spacing: .2em; gap: .7rem; padding: 0 .6rem; }
  .marca svg { width: 2rem; height: 2rem; }
  .menu-item { padding: .66rem .85rem; font-size: .96rem; gap: .85rem; }
  .menu-item svg { width: 1.25rem; height: 1.25rem; }
  .menu-grupo { margin: 1.35rem .7rem .4rem; font-size: .6rem; color: #7d8f99; }
  .menu-item.ativo { background: rgba(255, 255, 255, .05); }
  .menu-item.ativo::before { left: -.55rem; width: 4px; }
  .status-sistema { margin: .6rem .15rem 0; padding: 1rem 1.1rem; font-size: .84rem; }
  .status-sistema small { font-size: .62rem; margin-bottom: .6rem; }
}

@layer components {
  .marca { font-size: .84rem; letter-spacing: .15em; white-space: nowrap; }
  .status-sistema { font-size: .77rem; padding: .95rem .95rem; }
}

@layer components {
  .menu-item svg, .topo-titulo svg, .icone-btn svg, .usuario summary svg, .status-sistema .batimento svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
  .menu-item svg { stroke-width: 1.5; }
  .status-sistema .batimento svg { stroke-width: 1.8; }
}

/* Dados compartilhados: linhas alinhadas em colunas */
@layer components {
  .cp-grupo { margin-bottom: 2rem; }
  .cp-grupo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--linha); }
  .cp-grupo-topo h2 { margin: 0; }
  .cp-contagem { font: 500 .68rem var(--mono); letter-spacing: .08em; color: var(--texto-fraco); }
  .cp-lista { display: flex; flex-direction: column; gap: .5rem; }
  .cp-item { padding: 0; }
  .cp-item > summary { display: grid; grid-template-columns: 1fr auto 11rem; align-items: center; column-gap: 1rem; padding: .85rem 1.1rem; cursor: pointer; text-align: left; }
  .cp-item > summary:hover { background: rgba(255, 255, 255, .025); }
  .cp-item > summary::before { display: none; }
  .cp-titulo { position: relative; padding-left: 1.4rem; font-weight: 500; text-align: left; }
  .cp-titulo::before { content: "▸"; position: absolute; left: 0; color: var(--ciano); transition: transform .15s; }
  .cp-item[open] .cp-titulo::before { transform: rotate(90deg); }
  .cp-caminho { justify-self: end; color: #7d8f99 !important; background: none !important; border: 0 !important; font-size: .7rem !important; }
  .cp-estado { justify-self: end; text-align: right; font: 600 .66rem var(--mono); letter-spacing: .06em; white-space: nowrap; }
  .cp-estado.ok { color: var(--verde); }
  .cp-estado.vazio { color: var(--ambar); }
  .cp-form { padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--linha); display: flex; flex-direction: column; gap: .7rem; }
  .cp-ajuda { margin: .9rem 0 0; font-size: .8rem; color: var(--texto-fraco); line-height: 1.5; }
  .cp-usado { margin: 0; font-size: .75rem; color: var(--texto-fraco); }
  .cp-usado span { font: 600 .6rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #7d8f99; margin-right: .4rem; }
  .cp-rodape { display: flex; align-items: center; gap: 1rem; }
  .cp-nota { font: .7rem var(--mono); color: #7d8f99; }
  @media (max-width: 900px) { .cp-item > summary { grid-template-columns: 1fr; row-gap: .3rem; } .cp-caminho, .cp-estado { justify-self: start; padding-left: 1.4rem; text-align: left; } }
}

.oculto-visual { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }