/* Delta Softwares Cloud - Vanilla CSS (no build) */
:root{
  --bg-1:#0b0213;
  --bg-2:#0a0012;
  --txt:#ffffff;
  --muted:#c7c7d2;
  --card:#151027cc;
  --card-hover:#1b1533cc;
  --border:#2e2942;
  --brand:#d946ef;
  --brand-2:#8b5cf6;
  --ok:#22c55e; --warn:#eab308; --bad:#ef4444;
  --shadow:0 10px 30px -10px rgba(217,70,239,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--txt);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(139,92,246,.25), transparent 60%),
    radial-gradient(1200px 600px at -10% 0%, rgba(217,70,239,.25), transparent 60%),
    linear-gradient(180deg, #1a0b2a 0%, var(--bg-2) 30%, #000 100%);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Inter', 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 1rem}

/* Header */
.header{position:sticky;top:0;z-index:40;backdrop-filter:blur(8px);background:rgba(0,0,0,.35);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.brand{display:flex;gap:.75rem;align-items:center}
.logo{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:var(--shadow)}
.brand .title{font-weight:800;line-height:1}
.brand .subtitle{font-size:.72rem;color:#ffffff99;margin-top:.15rem}

/* Menu base (desktop/tablet) */
.menu{display:flex;gap:.4rem;align-items:center}
.menu a{padding:.5rem .8rem;border-radius:.8rem;color:#ffffffcc;border:1px solid transparent}
.menu a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.menu a.active{background:rgba(255,255,255,.18);color:#fff}

/* Footer */
.footer{border-top:1px solid var(--border);color:#ffffff99;padding:1rem 0;margin-top:3rem;font-size:.92rem}
.footer a{color:#ffffffcc}
.footer-wrap{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.footer-links{display:flex;gap:1rem}

/* Grid e Cards */
.grid{display:grid;gap:1rem}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.card:hover{background:var(--card-hover)}
.card-body{padding:1.2rem}
.card-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.card-row.spaced{margin-top:1rem}

.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border-radius:.55rem;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);font-size:.75rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,.18);cursor:pointer;transition:.2s;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.btn.secondary{background:rgba(255,255,255,.08)}
.btn.small{padding:.5rem .8rem;border-radius:.6rem}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}

h1,h2,h3{margin:0}
h1{font-size:2.2rem}
h2{font-size:1.4rem}
.muted{color:#ffffffa3}
.kpi{display:flex;gap:.9rem;align-items:center}
.kpi .icon{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center}
.kpi .value{font-size:1.6rem;font-weight:800}
.status{font-size:.72rem;border-radius:.5rem;padding:.25rem .5rem}
.status.ok{background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.35)}
.status.warn{background:rgba(234,179,8,.18);border:1px solid rgba(234,179,8,.35)}
.status.bad{background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.35)}

.hero{position:relative;border:1px solid var(--border);border-radius:24px;overflow:hidden;padding:2rem;background:linear-gradient(135deg, rgba(139,92,246,.25), rgba(217,70,239,.15));}
.hero .actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.6rem}
.hero-title{font-size:2.4rem;line-height:1.12;margin:.3rem 0 0}
.hero-sub{font-size:1.05rem;color:#ffffffcc}
.canvas{position:absolute;inset:0;height:220px;pointer-events:none}

.section{margin:2rem 0 0}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;gap:.5rem;flex-wrap:wrap}

.img{width:100%;height:180px;object-fit:cover;display:block}
.input,.select,textarea{width:100%;padding:.8rem;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff}
label{font-size:.9rem;color:#ffffffcc}
.row{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media(max-width:720px){.row{grid-template-columns:1fr}}

.skeleton{animation:pulse 2s infinite; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));background-size:200% 100%}
@keyframes pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}
.tag{display:inline-flex;padding:.28rem .5rem;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);border-radius:.5rem;font-size:.72rem;margin-right:.35rem;margin-bottom:.35rem}
.note{font-size:.85rem;color:#ffffffa6}
.gamer{background:radial-gradient(700px 300px at 20% 0%, rgba(255,0,255,.1), transparent 50%), radial-gradient(700px 300px at 100% 30%, rgba(138,43,226,.12), transparent 50%), var(--bg-2);border:1px solid rgba(216,70,239,.25)}
.neon{box-shadow:0 0 50px -10px rgba(217,70,239,.7)}
.toggle{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:.5rem .8rem;background:rgba(255,255,255,.08);cursor:pointer}
.small{font-size:.88rem}

/* ====== NAV detalhes (efeito underline e foco) ====== */
.menu { gap: .25rem; flex-wrap: wrap; scrollbar-gutter: stable both-edges; }
.menu a{
  position: relative; font-weight:600; letter-spacing:.01em; line-height:1;
  padding:.75rem .9rem; border-radius:.8rem; transition:background .2s, transform .2s;
}
.menu a:hover{ transform: translateY(-1px); }
.menu a::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:.4rem; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  opacity:0; transform:scaleX(.6); transform-origin:center; transition:opacity .2s, transform .2s;
}
.menu a:hover::after, .menu a:focus-visible::after{ opacity:1; transform:scaleX(1); }
.menu a.active::after, .menu a[aria-current="page"]::after, .menu a[data-active="true"]::after{ opacity:1; transform:scaleX(1); }
.menu a.active, .menu a[aria-current="page"], .menu a[data-active="true"]{
  background:rgba(255,255,255,.14); color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.menu a:focus-visible{
  outline:2px solid color-mix(in oklab, var(--brand) 70%, white 30%);
  outline-offset:2px; border-radius:.9rem;
}

/* Botão toggle (oculto por padrão; mostrado apenas no phone) */
.menu-toggle{
  display:none; appearance:none;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  border-radius:12px; padding:.6rem .7rem; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .2s, background .2s;
}
.menu-toggle:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.menu-icon{
  position:relative; width:22px; height:2px; background:#fff; border-radius:2px; display:block; transition: background .2s;
}
.menu-icon::before, .menu-icon::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:#fff; border-radius:2px;
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}
.menu-icon::before{ top:-7px; } .menu-icon::after{ top:7px; }
.menu-toggle[aria-expanded="true"] .menu-icon{ background:transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::before{ top:0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after{ top:0; transform: rotate(-45deg); }

/* ====== Responsivo ====== */

/* Tablet landscape / pequenos laptops */
@media (max-width: 1200px) {
  .grid.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}

/* Tablet portrait */
@media (max-width: 992px) {
  .header .nav { gap: .8rem; }
  .menu a { padding: .5rem .75rem; }
  .hero-title { font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.15; }
  .hero .actions { flex-wrap: wrap; gap: .6rem; }
  .hero .actions .btn { min-width: 180px; text-align: center; }
  .card .kpi { gap: .8rem; }
  .card .kpi .value { font-size: 1.25rem; }
  form.section .row { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
  form.section .row > div { min-width:0; }
}

/* ====== Apenas CELULARES (≤ 640px) ====== */
@media (max-width: 640px) {
  .header{ --header-h: 64px; }
  .header .nav{ position:relative; min-height: var(--header-h); }

  .menu-toggle{ display:inline-flex; }         /* mostra botão só no phone */

  /* menu dropdown vertical (fechado) */
  .menu{
    position:absolute; top:calc(var(--header-h) - 6px); right:0; left:0;
    display:flex; flex-direction:column; gap:.35rem;
    padding:.6rem; border-top:1px solid var(--border);
    background: color-mix(in oklab, black 72%, var(--bg-2) 28%);
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 30px -12px rgba(0,0,0,.6);
    max-height: 0; overflow:hidden; opacity: 0; transform: translateY(-6px);
    transition: max-height .28s ease, opacity .2s ease, transform .22s ease;
    z-index: 30;
  }
  .menu.is-open{
    max-height: 70vh; opacity: 1; transform: translateY(0);
    overflow:auto; -webkit-overflow-scrolling: touch;
  }
  .menu a{
    padding: .9rem 1rem; border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06); border-radius:.7rem; flex: 0 0 auto;
  }
  .menu a::after{ bottom:.5rem; }

  .brand{ gap:.75rem; }
  .brand .title{ font-size:1.05rem; }
  .brand .subtitle{ font-size:.8rem; }

  .hero{ text-align:center; }
  .hero > div[style*="max-width"]{ margin-left:auto; margin-right:auto; }
  .hero .badge{ display:inline-block; }
  #heroParticles.canvas{ max-height:200px; }

  .grid.grid-3 { grid-template-columns: 1fr !important; }

  .card .card-body{ padding:1rem; }

  .footer-wrap{ flex-direction:column; align-items:flex-start; gap:.6rem; }
  .footer-links{ overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; }
}

/* Garantia: acima de 640px, menu sempre horizontal e botão some */
@media (min-width: 641px) {
  .menu-toggle{ display: none; }
  .menu{
    position: static; display: flex; flex-direction: row; gap: .4rem;
    max-height: none; opacity: 1; transform: none; overflow: visible;
    background: transparent; border: 0; box-shadow: none;
  }
  .menu.is-open { max-height: none; opacity: 1; transform: none; }
}

/* Mobile pequeno extra */
@media (max-width: 480px) {
  .hero-title{ font-size:1.35rem; }
  #heroParticles.canvas{ max-height:160px; }
  .badge{ display:inline-flex; align-items:center; margin:.2rem .25rem .2rem 0; max-width:100%; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:.25rem; }
  .card .kpi{ justify-content:center; text-align:center; }
  .input, .select, textarea.input{ width:100%; min-height:44px; }
  .actions{ display:flex; flex-direction:column; gap:.6rem; }
  .actions .btn{ width:100%; }
}

/* Ações do formulário */
.form-actions{ display:flex; justify-content:flex-end; gap:.6rem; }
@media (max-width: 768px){
  .form-actions{ justify-content:stretch; }
  .form-actions .btn{ width:100%; }
}

/* Hardening geral */
.container { padding-left: 1rem; padding-right: 1rem; }
.canvas { width: 100%; height: auto; max-height: 260px; display: block; }
.hero .badge { white-space: nowrap; }

/* Respeita prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .menu, .menu a, .menu-toggle, .menu-icon, .menu-icon::before, .menu-icon::after{
    transition: none !important;
  }
}