/* ===== THEME AZUL (final, vence tudo) ===== */
:root{
  --accent: #7bd3ff;
  --accent-strong: #4fc3ff;
  --accent-glow: rgba(123,211,255,.20);
  --badge-bg: #0b2331;
  --badge-border: #1b4f6d;
  --badge-text: #cfefff;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background-color: #0f0f0f; font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  overflow-x: hidden;
}

/* Canvas de fundo */
canvas#bg { position: fixed; top: 0; left: 0; z-index: 0; width: 100vw; height: 100vh; display:block; }
body > *:not(canvas) { position: relative; z-index: 1; }

/* Header */
.logo { height: 80px; width: auto; display: block; margin: 0 auto; }
header {
  text-align: center; padding: 20px 10px;
  background-color: rgba(28, 28, 28, 0.2); backdrop-filter: blur(4px);
  border-bottom: 1px solid #7bd3ff44;
}
header img.logo-principal { max-width: 180px; margin-bottom: 10px; }
header img.simbolo-ti { max-width: 120px; margin:10px auto 0; display:block; }

h1 {
  margin: 10px 0 0; font-size: 2em; color: var(--accent);
  background-color: rgba(28, 28, 28, 0.4); backdrop-filter: blur(6px);
  padding: 20px; border-bottom: 1px solid #7bd3ff44;
}
p { color: #aaa; font-size: 0.95em; }

/* ===== CARDS (3 por linha em desktop) ===== */
.container {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
  padding: 40px 20px; max-width: 920px; margin: auto;
}
.card {
  background: #1a1a1a; border-radius: 10px; padding: 20px;
  box-shadow: 0 0 10px var(--accent-glow); transition: 0.3s;
  width: 280px; max-width: 280px; flex: 0 0 auto;
  text-align: center;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 0 14px #7bd3ff55; }
.card h2 { font-size: 1.2em; margin-bottom: 10px; color: var(--accent); }
.card p { font-size: 0.95em; color: #ccc; margin-bottom: 15px; }
.card a {
  display: inline-block; text-decoration: none; color: #000; background-color: var(--accent);
  padding: 8px 16px; border-radius: 5px; transition: 0.2s; font-weight: bold;
}
.card a:hover { background-color: var(--accent-strong); }

/* Botão flutuante */
.floating-button {
  position: fixed; bottom: 30px; right: 20px; background-color: #1c1c1c; color: var(--accent);
  border: 2px solid var(--accent); padding: 10px 16px; border-radius: 50px; text-decoration: none;
  box-shadow: 0 0 10px #7bd3ff33; font-weight: bold; z-index: 2;
}
.floating-button:hover { background-color: var(--accent); color: #000; }

/* Form padrão */
form.formbox {
  margin: 30px auto; max-width: 520px; background-color: #1c1c1c;
  padding: 20px; border-radius: 10px; box-shadow: 0 0 10px #7bd3ff33;
}
label { display: block; margin: 10px 0 5px; text-align: left; }
input, select, textarea {
  width: 100%; padding: 10px; border-radius: 5px; border: none; margin-bottom: 15px;
  background-color: #2c2c2c; color: #fff; font-size: 1em;
}
input[type="file"] { padding: 6px; }
button.btn {
  background-color: var(--accent); color: #000; padding: 12px 20px; font-size: 1em;
  border: none; border-radius: 8px; cursor: pointer; font-weight: bold;
}
button.btn:hover { background-color: var(--accent-strong); }

a.voltar {
  position: fixed; bottom: 30px; right: 20px; background-color: var(--accent); color: #000;
  padding: 10px 16px; border-radius: 50px; text-decoration: none; box-shadow: 0 0 10px var(--accent-glow);
  font-weight: bold; z-index: 999;
}

/* Status box */
#status {
  display: none; margin: 16px auto 0; padding: 10px 12px; border-left: 4px solid; border-radius: 6px;
  text-align: left; max-width: 520px; word-wrap: break-word; white-space: pre-wrap;
}

/* Badges e ícones */
.badge{
  display:inline-block; padding:6px 10px; border:1px solid var(--badge-border); border-radius: 999px;
  background: var(--badge-bg); color: var(--badge-text); font-size:.85rem;
}

.card .icon{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; margin-right:10px; }
.card .icon svg{ filter: drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 14px var(--glow)); transition: transform .15s ease, filter .2s ease; }
.card .icon:hover svg{ transform: scale(1.06); }
.c2 { color:#2196F3; --glow: rgba(33,150,243,.55); }

/* Grid utilitário (ainda pode ser usado dentro de páginas) */
.columns .card{ width:auto !important; max-width:none !important; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .row{ grid-template-columns:1fr; } }

/* ===== MODAL (centralizado e azul claro) ===== */
#modalBackdrop{
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  z-index: 9999; padding: 16px; background: rgba(0,0,0,.55);
}
#modalBackdrop.show{ display: flex; }
.modal{
  width: min(520px, 92vw);
  background:#101317;
  border:1px solid #1c4c6b;
  border-radius:16px; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.modal h2{ margin:0 0 8px; color:#bfecff; }
.modal p{ margin:0 0 12px; color:#d9f3ff; }
.hashbox{
  display:flex; gap:8px; align-items:center;
  background:#0d1b26; border:1px solid #2b6285; color:#bfecff;
  padding:10px; border-radius:10px; margin:10px 0 14px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
.hashbox code{ font-size:1.05rem; }
.modal .actions{ display:flex; gap:10px; justify-content:flex-end; }
.btn-ghost{
  background:transparent; color:#cfefff; border:1px solid #2b6285;
  padding:10px 14px; border-radius:8px; cursor:pointer;
}
.btn-ghost:hover{ background:#112536; }

/* Força tema azul */
h1{ color: var(--accent); }
button.btn{ background: var(--accent); color:#000; }
button.btn:hover{ background: var(--accent-strong); }
a.voltar{ background: var(--accent); color:#000; box-shadow:0 0 10px var(--accent-glow); }
.ticket h3{ color: var(--accent); }

/* FIX HARD: 3 cards por linha em desktop (flex) */
.container{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:16px !important;
  max-width: 920px !important;   /* 3 x 280 + gaps */
  margin: 40px auto !important;
  padding: 0 10px !important;
}
.container > .card{
  width: 280px !important;
  max-width: 280px !important;
  flex: 0 0 auto !important;
  display: block !important;
}
/* Labels dos formulários (ajuste visual) */
form.formbox label {
  color: var(--accent);       /* azul claro */
  font-weight: 600;           /* levemente mais forte */
  display: block;
  margin: 10px 0 5px;
}
/* Transparência nos cards e formulários */
.card,
form.formbox {
  background: rgba(26,26,26,0.75);  /* preto com 75% opacidade */
  backdrop-filter: blur(6px);       /* efeito "vidro fosco" */
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(123,211,255,0.25); /* borda azul clara suave */
}
.badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;font-size:.85rem;border:1px solid rgba(255,255,255,.12)}
.badge-open{background:#0b2a20;border-color:#1f6f52;color:#b6ffe0}
.badge-progress{background:#1c2740;border-color:#2c5fb8;color:#d9e6ff}
.badge-resolved{background:#12251d;border-color:#2a8a5e;color:#b9ffdf}
.badge-cancel{background:#2a1a1a;border-color:#9b3636;color:#ffd6d6}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}

/* Overlay de loading */
.loading-backdrop{
  position:fixed; inset:0; display:none; place-items:center; z-index:9999;
  background:rgba(10,14,12,.55); backdrop-filter: blur(8px);
}
.loading-card{
  min-width: 260px; max-width: 90vw; padding:18px 20px; border-radius:16px;
  background:#0e1512; border:1px solid #2b5e45; box-shadow: 0 10px 40px rgba(0,0,0,.5);
  color:#d9ffe7; text-align:center; font: 500 15px/1.4 ui-sans-serif,system-ui;
}
.spinner{
  width:36px; height:36px; margin:0 auto 12px; border-radius:50%;
  border:3px solid #2b5e45; border-top-color:#8ef7c3; animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }
.loading-msg small{ color:#9fe9c9; opacity:.9; }

/* card de busca ocupa toda a linha */
.card.busca {
  grid-column: 1 / -1;  /* faz o card pegar toda a largura da grid */
}

/* clareando itens internos */
.ramal-item {
  background: #1a2940;   /* azul mais claro que antes */
  border: 1px solid #2f4f80;
}

.ramal-pill {
  background: #224d8f;
  border: 1px solid #3d70c7;
}