/* =========================================================
   Arviabim — CSS base compartilhado do pacote de apps
   Extraído do Editor de Favoritos em Lote 3.0
   ========================================================= */

:root{
  --bg:#1F3F73; --panel:#ffffff; --panel2:#eaf1fe; --line:#d7e4fb;
  --ink:#16243f; --ink-dim:#4a5d80; --ink-faint:#8b9cb8;
  --accent:#4A86E8; --accent-dim:#dce9fc;
  --ok:#1f7a4d; --warn:#a6650b; --err:#b3342f;
  --mono:'SF Mono',ui-monospace,'Cascadia Code',monospace;
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
input[type=checkbox]{accent-color: var(--accent)}

body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px; line-height:1.5;
  min-height:100vh;
}

/* ---------- Layout ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:32px 24px 80px}
.wrap-narrow{max-width:460px; margin:0 auto; padding:32px 24px 80px}

/* ---------- Header ---------- */
header{margin-bottom:28px}
header h1{font-size:20px; font-weight:650; margin:0 0 4px; letter-spacing:-.01em; color:#fff}
header p{color:rgba(255,255,255,.78); margin:0; font-size:13px}

.brand-header{display:flex; align-items:center; gap:18px}
.brand-logo{height:26px; width:auto; opacity:.95; flex-shrink:0; filter:brightness(0) invert(1)}
.brand-divider{width:1px; height:28px; background:rgba(255,255,255,.35); flex-shrink:0}
.brand-txt{min-width:0; flex:1}
.brand-txt h1{font-size:19px}
.brand-nav{display:flex; gap:14px; align-items:center; flex-shrink:0}
.brand-nav a{color:rgba(255,255,255,.85); text-decoration:none; font-size:12.5px; font-weight:500}
.brand-nav a:hover{color:#fff; text-decoration:underline}
.brand-nav .user-pill{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  padding:5px 11px; border-radius:20px; font-size:12px; color:#fff;
}

/* ---------- Cards ---------- */
.content-card{
  background:var(--panel); border-radius:16px; padding:28px 28px 24px;
  box-shadow:0 12px 40px rgba(10,22,42,.25);
}
.card{
  background:var(--panel); border-radius:16px; padding:24px 28px;
  box-shadow:0 12px 40px rgba(10,22,42,.25);
  margin-bottom:20px;
}
.card:last-of-type{margin-bottom:0}
.card-title{
  font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent);
  font-weight:700; margin-bottom:18px;
}

/* ---------- Section titles ---------- */
section{margin-top:28px}
section:first-of-type{margin-top:0}
.section-title{
  font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint);
  font-weight:650; margin-bottom:10px;
}

/* ---------- Formulários ---------- */
.form-group{margin-bottom:16px}
.form-group label{
  display:block; font-size:12px; font-weight:600; color:var(--ink-dim);
  margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;
}
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=password]{
  width:100%; padding:10px 12px; border:1px solid var(--line);
  border-radius:8px; font-size:14px; background:#fff; color:var(--ink);
  font-family:inherit; transition:border-color .15s, box-shadow .15s;
}
.form-group input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
}
.form-group .hint{
  font-size:11.5px; color:var(--ink-faint); margin-top:5px;
}

/* ---------- Botões ---------- */
.btn{
  display:inline-block; padding:10px 20px; border-radius:8px; font-size:13.5px;
  font-weight:600; cursor:pointer; border:none; font-family:inherit;
  transition:filter .15s, transform .1s;
  text-decoration:none;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:#fff}
.btn-secondary{background:var(--panel2); color:var(--ink); border:1px solid var(--line)}
.btn-block{display:block; width:100%; text-align:center}
.btn-danger{background:var(--err); color:#fff}

/* ---------- Alerts ---------- */
.alert{padding:11px 14px; border-radius:8px; font-size:13px; margin-bottom:16px}
.alert-ok{background:#eaf7ef; color:var(--ok); border:1px solid #c5e5d1}
.alert-err{background:#fde8e8; color:var(--err); border:1px solid #f5c7c5}
.alert-warn{background:#fbf3d9; color:var(--warn); border:1px solid #e8d69b}
.alert-info{background:var(--accent-dim); color:#2e63c9; border:1px solid #b8d0f4}

/* ---------- Tabelas ---------- */
table{width:100%; border-collapse:collapse; font-size:13px}
thead th{
  text-align:left; color:var(--ink-faint); font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.04em; padding:0 10px 8px; border-bottom:1px solid var(--line);
}
tbody td{padding:9px 10px; border-bottom:1px solid var(--line)}
tbody tr:hover{background:var(--panel2)}

/* ---------- Pílulas / badges ---------- */
.pill{
  display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600;
}
.pill-free{background:var(--panel2); color:var(--ink-dim)}
.pill-pago{background:#eaf7ef; color:var(--ok)}
.pill-admin{background:#fde8e8; color:var(--err)}
.pill-bloqueado{background:#fbf3d9; color:var(--warn)}

/* ---------- Hub / grid de apps ---------- */
.apps-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:16px;
}
.app-card{
  background:var(--panel); border-radius:14px; padding:22px 24px 18px;
  box-shadow:0 6px 22px rgba(10,22,42,.18);
  border:1px solid transparent; transition:transform .15s, box-shadow .15s, border-color .15s;
  display:flex; flex-direction:column; gap:16px;
}
.app-card.available{cursor:pointer}
.app-card.available:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(10,22,42,.25);
  border-color:var(--accent);
}
.app-card.locked{opacity:.7; background:var(--panel2)}

.app-body{display:flex; gap:18px; align-items:flex-start}
.app-icon{
  flex-shrink:0; width:56px; height:56px; border-radius:50%;
  background:var(--panel2); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.app-icon svg{width:32px; height:32px; display:block}
.app-card.available:hover .app-icon{background:var(--accent-dim)}

.app-text{min-width:0; flex:1}
.app-card h3{margin:0 0 5px; font-size:15px; font-weight:650; color:var(--ink); letter-spacing:-.01em}
.app-card p{margin:0; font-size:12.5px; color:var(--ink-dim); line-height:1.5}

.app-foot{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding-top:14px; border-top:1px solid var(--line);
}
.app-foot .abrir{color:var(--accent); font-size:12.5px; font-weight:600}

a.app-card,
a.app-card:link,
a.app-card:visited,
a.app-card:hover,
a.app-card:active{color:inherit; text-decoration:none}
a.app-card h3,
a.app-card p,
a.app-card .abrir{text-decoration:none}
a.app-card h3{color:var(--ink)}
a.app-card p{color:var(--ink-dim)}

/* ---------- Banner promocional (hub) ---------- */
.promo-section{margin-top:32px}
.promo-hero{
  background:linear-gradient(135deg, rgba(74,134,232,.18) 0%, rgba(74,134,232,.06) 100%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:32px;
  display:flex; align-items:center; gap:32px;
}
.promo-hero-body{flex:1; min-width:0}
.promo-eyebrow{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#a8c5f5;
  background:rgba(255,255,255,.08); padding:4px 10px; border-radius:20px;
  margin-bottom:12px;
}
.promo-hero h2{
  margin:0 0 10px; font-size:22px; font-weight:650; color:#fff;
  letter-spacing:-.015em; line-height:1.25;
}
.promo-hero p{
  margin:0 0 20px; font-size:14px; color:rgba(255,255,255,.75); line-height:1.55;
  max-width:520px;
}
.promo-cta{
  display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
  padding:11px 22px; border-radius:8px; font-size:13.5px; font-weight:600;
  transition:filter .15s, transform .1s;
}
.promo-cta:hover{filter:brightness(1.1)}
.promo-cta:active{transform:translateY(1px)}
.promo-hero-art{flex-shrink:0; width:200px; opacity:.9}
.promo-hero-art svg{width:100%; height:auto; display:block}

.promo-services{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}
.promo-svc{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:18px 20px; text-decoration:none;
  transition:background .15s, border-color .15s, transform .15s;
  display:block;
}
.promo-svc:hover{
  background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.25);
  transform:translateY(-2px);
}
.promo-svc-icon{
  width:38px; height:38px; border-radius:10px;
  background:rgba(74,134,232,.2); color:#a8c5f5;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.promo-svc-icon svg{width:22px; height:22px}
.promo-svc h3{
  margin:0 0 6px; font-size:14px; font-weight:650; color:#fff;
  letter-spacing:-.01em;
}
.promo-svc p{
  margin:0; font-size:12.5px; color:rgba(255,255,255,.65); line-height:1.5;
}

@media (max-width: 640px){
  .promo-hero{flex-direction:column-reverse; padding:24px; text-align:center; gap:20px}
  .promo-hero-body{text-align:center}
  .promo-hero-art{width:140px}
  .promo-hero p{margin-left:auto; margin-right:auto}
}

/* ---------- Footer ---------- */
.brand-footer{
  margin-top:32px; text-align:center; font-size:12px; color:rgba(255,255,255,.6);
}
.brand-footer a{color:rgba(255,255,255,.85); text-decoration:none}
.brand-footer a:hover{color:#fff}

/* ---------- Utilidades ---------- */
.text-center{text-align:center}
.mt-0{margin-top:0} .mt-1{margin-top:8px} .mt-2{margin-top:16px} .mt-3{margin-top:24px}
.mb-0{margin-bottom:0} .mb-1{margin-bottom:8px} .mb-2{margin-bottom:16px} .mb-3{margin-bottom:24px}
.divider{height:1px; background:var(--line); margin:20px 0}
.small{font-size:12px; color:var(--ink-faint)}
.link{color:var(--accent); text-decoration:none; font-weight:500}
.link:hover{text-decoration:underline}