/* =====================================
   SISPROM 360 — Página de Manutenção
   Estilo profissional, responsivo, leve e sem dependências externas.
   ===================================== */

:root{
  --bg-start: #0f172a;  /* slate-900 */
  --bg-end:   #020617;  /* slate-950 */
  --card-bg:  rgba(255,255,255,0.06);
  --card-brd: rgba(255,255,255,0.12);
  --text:     #e2e8f0;  /* slate-200 */
  --muted:    #94a3b8;  /* slate-400 */
  --primary:  #22d3ee;  /* cyan-400 */
  --primary-2:#38bdf8;  /* sky-400 */
  --accent:   #818cf8;  /* indigo-400 */
  --ok:       #10b981;  /* emerald-500 */
  --shadow:   rgba(2,6,23,0.6);
}

@media (prefers-color-scheme: light) {
  :root{
    --bg-start: #f8fafc;   /* slate-50 */
    --bg-end:   #e2e8f0;   /* slate-200 */
    --card-bg:  rgba(255,255,255,0.75);
    --card-brd: rgba(15,23,42,0.06);
    --text:     #0f172a;   /* slate-900 */
    --muted:    #475569;   /* slate-600 */
    --primary:  #0ea5e9;   /* sky-500 */
    --primary-2:#22d3ee;   /* cyan-400 */
    --accent:   #6366f1;   /* indigo-500 */
    --ok:       #059669;   /* emerald-600 */
    --shadow:   rgba(15,23,42,0.10);
  }
}

*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(34,211,238,0.15), transparent 50%),
              radial-gradient(1000px 600px at 120% 120%, rgba(129,140,248,0.18), transparent 50%),
              linear-gradient(160deg, var(--bg-start), var(--bg-end));
  display:grid;
  place-items:center;
  overflow:hidden;
}

.wrapper{
  width:min(92vw, 880px);
  padding: clamp(16px, 2.5vw, 24px);
}

.card{
  position:relative;
  background: var(--card-bg);
  border: 1px solid var(--card-brd);
  border-radius: 20px;
  padding: clamp(24px, 3.5vw, 40px);
  box-shadow: 0 20px 60px var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
}

.card::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius: 20px;
  padding:1px;
  background: linear-gradient(135deg, rgba(34,211,238,0.35), rgba(129,140,248,0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color: var(--muted);
  border:1px solid var(--card-brd);
  border-radius:999px;
  padding:6px 10px;
  background: rgba(255,255,255,0.04);
}

.hero{
  margin-top:16px;
  display:flex;
  align-items:center;
  gap: clamp(16px, 3vw, 24px);
}

.icon{
  width:72px; height:72px;
  display:inline-grid; place-items:center;
  color: var(--primary);
  filter: drop-shadow(0 4px 16px rgba(34,211,238,0.35));
  animation: gear 6s linear infinite;
}

@keyframes gear{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}

h1{
  margin:0;
  font-size: clamp(26px, 4vw, 40px);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.1;
}

h1 span{
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitle{
  margin:6px 0 0;
  color: var(--muted);
  font-size: clamp(14px, 1.8vw, 16px);
}

.progress{
  margin: clamp(16px, 3vw, 24px) 0;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,0.08);
  overflow:hidden;
  position:relative;
}

.progress .bar{
  position:absolute;
  inset:0;
  transform: translateX(-60%);
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  background-size: 200% 100%;
  animation: indeterminate 2.2s ease-in-out infinite;
}

@keyframes indeterminate{
  0%   { transform: translateX(-60%); }
  50%  { transform: translateX(0%); }
  100% { transform: translateX(60%); }
}

.details{
  margin: 0 0 clamp(16px, 3vw, 24px);
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
  color: var(--muted);
  font-size: 14px;
}

.details strong{ color: var(--text); font-weight:600; }

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight:600;
  border:1px solid var(--card-brd);
  transition: transform .06s ease, background-color .2s ease, border-color .2s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover{ transform: translateY(-1px); }

.btn.primary{
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  color:#001018;
  border-color: transparent;
}

.btn.ghost{
  background: transparent;
  color: var(--text);
}

.footer{
  margin-top: clamp(16px, 3vw, 24px);
  color: var(--muted);
}

@media (max-width: 560px){
  .hero{ align-items:flex-start; }
  .icon{ width:56px; height:56px; }
}