:root {
  --sidebar-width: 292px;
  --topbar-height: 76px;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --ink: #0f172a;
  --muted: #64748b;
  --line: rgba(15, 23, 42, .08);
  --brand: #111827;
  --brand-2: #2563eb;
  --brand-3: #7c3aed;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --shadow-sm: 0 10px 25px rgba(15, 23, 42, .06);
  --shadow-md: 0 18px 50px rgba(15, 23, 42, .10);
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }
body {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, .12), transparent 34rem),
    radial-gradient(circle at top right, rgba(124, 58, 237, .10), transparent 32rem),
    var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.012em;
}

a { color: var(--brand-2); }
.btn { border-radius: 999px; font-weight: 700; letter-spacing: -.01em; }
.btn-primary {
  background: linear-gradient(135deg, var(--brand-2), var(--brand-3));
  border: 0;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .22);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(37, 99, 235, .28); }
.btn-outline-primary { border-color: rgba(37, 99, 235, .26); color: #1d4ed8; background: rgba(37, 99, 235, .04); }
.btn-outline-secondary { border-color: rgba(100, 116, 139, .25); color: #334155; background: rgba(255,255,255,.6); }
.btn-soft { background: #eef2ff; color: #3730a3; border: 0; }
.btn-dark-soft { background: #111827; color: #fff; border: 0; }
.form-control, .form-select, textarea {
  border-radius: 14px !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  background-color: rgba(255, 255, 255, .9) !important;
}
.form-control:focus, .form-select:focus, textarea:focus {
  box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .12) !important;
  border-color: rgba(37, 99, 235, .45) !important;
}
.table { --bs-table-bg: transparent; }
.table thead th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  border-bottom-color: var(--line);
}
.table tbody td { border-bottom-color: rgba(15,23,42,.055); padding: .85rem .6rem; vertical-align: middle; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(96, 165, 250, .18), transparent 15rem),
    radial-gradient(circle at 90% 18%, rgba(168, 85, 247, .16), transparent 16rem),
    linear-gradient(180deg, #0b1120 0%, #111827 60%, #0f172a 100%);
  color: #fff;
  position: fixed;
  inset: 0 auto 0 0;
  padding: 1.15rem;
  overflow-y: auto;
  z-index: 1020;
  box-shadow: 20px 0 60px rgba(15, 23, 42, .18);
}
.sidebar-brand {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem .45rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: .85rem;
}
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #60a5fa, #a78bfa 58%, #f472b6);
  box-shadow: 0 16px 30px rgba(96,165,250,.24);
  color: #fff; font-weight: 900;
}
.brand-title { font-weight: 850; letter-spacing: -.04em; line-height: 1; }
.brand-subtitle { color: rgba(255,255,255,.58); font-size: .78rem; margin-top: .2rem; }
.nav-section { margin-top: 1rem; }
.nav-section-label {
  color: rgba(255,255,255,.42);
  font-size: .70rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  padding: .25rem .55rem;
}
.sidebar a.nav-link {
  color: rgba(255,255,255,.76);
  text-decoration: none;
  display: flex; align-items: center; gap: .7rem;
  padding: .68rem .75rem;
  border-radius: 16px;
  margin-bottom: .12rem;
  font-weight: 650;
  font-size: .94rem;
  border: 1px solid transparent;
}
.sidebar a.nav-link:hover {
  color: #fff; background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.07);
}
.sidebar a.nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(37,99,235,.55), rgba(124,58,237,.42));
  border-color: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 15px 35px rgba(37,99,235,.14);
}
.nav-ico { width: 1.25rem; text-align: center; opacity: .95; }
.sidebar-card {
  margin-top: 1.15rem;
  padding: .9rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  color: rgba(255,255,255,.82);
}
.sidebar-toggle { display: none; }
.content-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  width: calc(100% - var(--sidebar-width));
}
.topbar {
  min-height: var(--topbar-height);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  padding: .85rem 1.35rem;
  position: sticky; top: 0; z-index: 1010;
}
.page-content { padding: 1.4rem; }
.page-title { font-weight: 850; letter-spacing: -.04em; margin: 0; }
.page-subtitle { color: var(--muted); font-size: .94rem; margin-top: .18rem; }
.user-chip {
  display:flex; align-items:center; gap:.55rem; padding:.48rem .72rem;
  background: rgba(255,255,255,.8); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-sm); color: #334155;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display:grid; place-items:center;
  color:#fff; font-weight:800; background: linear-gradient(135deg,#2563eb,#7c3aed);
}
.search-box { max-width: 340px; position: relative; }
.search-box input { padding-left: 2.25rem; }
.search-box:before { content:'⌘'; position:absolute; left:.85rem; top:.48rem; color:#94a3b8; z-index: 2; font-weight:800; }

.hero-card {
  position: relative; overflow:hidden;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(37, 99, 235, .86) 54%, rgba(124,58,237,.82)),
    #111827;
  color: #fff;
  box-shadow: var(--shadow-md);
}
.hero-card:after {
  content:''; position:absolute; right:-5rem; top:-5rem; width: 20rem; height: 20rem;
  border-radius:50%; background: rgba(255,255,255,.10); filter: blur(1px);
}
.hero-card .hero-body { position:relative; z-index:1; padding: 1.35rem; }
.hero-eyebrow { color: rgba(255,255,255,.67); font-weight: 800; text-transform: uppercase; font-size:.72rem; letter-spacing:.12em; }
.hero-title { font-size: clamp(1.55rem, 2.6vw, 2.5rem); font-weight: 900; letter-spacing: -.055em; margin:.2rem 0 .55rem; }
.hero-text { color: rgba(255,255,255,.78); max-width: 760px; }

.card, .modal-content {
  border: 1px solid rgba(15,23,42,.075);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
}
.card-header { background: rgba(255,255,255,.62); border-bottom: 1px solid rgba(15,23,42,.065); border-radius: var(--radius-md) var(--radius-md) 0 0 !important; }
.card-kpi, .stat-card { border: 0; overflow:hidden; }
.stat-card .card-body { padding: 1rem; }
.stat-icon {
  width: 46px; height: 46px; border-radius: 16px; display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(37,99,235,.13), rgba(124,58,237,.12));
  color: var(--brand-2); font-size: 1.25rem;
}
.stat-value { font-size: 2rem; line-height: 1; font-weight: 900; letter-spacing:-.06em; }
.stat-label { color: var(--muted); font-size:.82rem; font-weight: 760; }
.stat-hint { color: #94a3b8; font-size:.78rem; }

.metric-ring {
  --p: 70;
  width: 112px; height:112px; border-radius:50%;
  display:grid; place-items:center;
  background: conic-gradient(var(--brand-2) calc(var(--p) * 1%), #e2e8f0 0);
  position:relative;
}
.metric-ring:before { content:''; position:absolute; inset:10px; background:#fff; border-radius:50%; }
.metric-ring span { position:relative; font-weight:900; letter-spacing:-.05em; font-size:1.35rem; }
.progress { border-radius: 999px; background: #e2e8f0; height: .55rem; }
.progress-bar { border-radius: 999px; background: linear-gradient(90deg, var(--brand-2), var(--brand-3)); }
.progress-thin { height: .42rem; }

.badge-soft { background: #eef2ff; color: #3730a3; }
.status-pill {
  display:inline-flex; align-items:center; gap:.35rem;
  border-radius:999px; padding:.35rem .62rem; font-weight:800; font-size:.72rem;
  background:#f1f5f9; color:#334155; border: 1px solid rgba(15,23,42,.06);
}
.status-planned { background:#f8fafc; color:#475569; }
.status-draft { background:#eef2ff; color:#3730a3; }
.status-generated { background:#eff6ff; color:#1d4ed8; }
.status-waiting_approval { background:#fff7ed; color:#c2410c; }
.status-approved { background:#ecfdf5; color:#047857; }
.status-scheduled { background:#f0f9ff; color:#0369a1; }
.status-publishing { background:#faf5ff; color:#7e22ce; }
.status-publish_pending { background:#fffbeb; color:#b45309; }
.status-published, .status-publish_simulated { background:#ecfdf5; color:#047857; }
.status-failed, .status-rejected { background:#fef2f2; color:#b91c1c; }

.timeline { position:relative; padding-left: 1.55rem; }
.timeline:before { content:''; position:absolute; top:.3rem; bottom:.3rem; left:.43rem; width:2px; background:#e2e8f0; }
.timeline-item { position:relative; padding-bottom: 1rem; }
.timeline-item:before {
  content:''; position:absolute; left:-1.55rem; top:.18rem; width:.9rem; height:.9rem; border-radius:50%;
  background:#cbd5e1; border:3px solid #fff; box-shadow:0 0 0 1px #e2e8f0;
}
.timeline-item.done:before { background: var(--success); }
.timeline-item.current:before { background: var(--brand-2); }

.empty-state { text-align:center; padding: 2.4rem 1rem; color: var(--muted); }
.empty-state .empty-icon { font-size: 2.2rem; margin-bottom:.5rem; }
.soft-panel { background:#f8fafc; border:1px solid rgba(15,23,42,.06); border-radius: 18px; padding: 1rem; }
.hover-lift { transition: transform .16s ease, box-shadow .16s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.login-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  background:
    radial-gradient(circle at 15% 15%, rgba(96,165,250,.25), transparent 26rem),
    radial-gradient(circle at 80% 20%, rgba(244,114,182,.16), transparent 26rem),
    linear-gradient(135deg, #020617, #111827 55%, #172554);
}
.login-shell { width: min(1050px, 100%); display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.2rem; align-items: stretch; }
.login-story { color:#fff; padding: 2rem; border-radius: 30px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-md); }
.login-story h1 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 950; letter-spacing:-.07em; line-height:.96; }
.login-story p { color: rgba(255,255,255,.72); font-size: 1.02rem; }
.login-card { border-radius: 30px; background: rgba(255,255,255,.96); border:1px solid rgba(255,255,255,.5); box-shadow: var(--shadow-md); }

@media (max-width: 1080px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-toggle { display: inline-flex; }
  .content-wrapper { margin-left:0; width:100%; }
  .login-shell { grid-template-columns: 1fr; }
  .login-story { display:none; }
}
@media (max-width: 720px) {
  .page-content { padding: .85rem; }
  .topbar { padding: .75rem .85rem; }
  .search-box { display:none; }
  .hero-card .hero-body { padding: 1rem; }
  .stat-value { font-size: 1.6rem; }
}


/* Fase 11 — refinamentos premium e ferramentas operacionais */
.metric-value.small-value{font-size:1rem;line-height:1.25;word-break:break-word}
.table-modern td,.table-modern th{vertical-align:middle}
.premium-card .eyebrow{letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;color:#6c63ff;font-weight:800;margin-bottom:.35rem}
.status-pill{display:inline-flex;align-items:center;border-radius:999px;padding:.22rem .62rem;background:rgba(108,99,255,.1);color:#3631a8;font-weight:700;font-size:.78rem}
.audit-note{border-left:3px solid rgba(108,99,255,.35);padding-left:1rem;color:#5b6472}


/* Fase 11 — Polimento UX, mobile/tablet, checks finais e erros amigáveis */
.fw-black { font-weight: 950; letter-spacing: -.06em; }
.glass-score {
  min-width: 148px;
  padding: 1.1rem 1.2rem;
  border-radius: 24px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.quality-check {
  padding: 1rem;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.075);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 24px rgba(15,23,42,.045);
}
.quality-dot {
  width: .72rem; height: .72rem; border-radius: 999px; display: inline-block;
  background: #94a3b8;
  box-shadow: 0 0 0 4px rgba(148,163,184,.12);
}
.quality-ok .quality-dot { background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.13); }
.quality-warning .quality-dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.13); }
.quality-danger .quality-dot { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.13); }
.quality-label {
  border-radius: 999px; padding: .32rem .55rem; font-size: .72rem; font-weight: 850;
  background: #f1f5f9; color: #334155; white-space: nowrap;
}
.quality-ok .quality-label { background: #ecfdf5; color: #047857; }
.quality-warning .quality-label { background: #fff7ed; color: #c2410c; }
.quality-danger .quality-label { background: #fef2f2; color: #b91c1c; }
.error-shell {
  max-width: 720px;
  margin: 4rem auto;
  text-align: center;
  padding: 2.2rem;
  border-radius: 30px;
  border: 1px solid rgba(15,23,42,.075);
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-md);
}
.error-code {
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: .9;
  font-weight: 950;
  letter-spacing: -.1em;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
}
.error-shell p { color: var(--muted); }
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-104%); transition: transform .22s ease; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-toggle { display: inline-flex; }
  .content-wrapper { margin-left: 0; width: 100%; }
  .topbar { min-height: 68px; padding: .7rem .9rem; }
  .page-content { padding: .9rem; }
  .hero-card .hero-body { padding: 1rem; }
  .login-shell { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .page-title { font-size: 1.05rem; }
  .page-subtitle { font-size: .82rem; }
  .stat-value { font-size: 1.55rem; }
  .card-body { padding: .9rem; }
  .btn { width: 100%; margin-bottom: .25rem; }
  .table-responsive { border-radius: 16px; }
  .error-shell { margin: 1.5rem auto; padding: 1.35rem; }
}