/* ============================================================
   ClikPas Marketing Engine · Design System
   Light modern theme — clean, professional, airy
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #f0f4f8;
  --bg-2:       #ffffff;
  --bg-3:       #f8fafc;

  --surface:    #ffffff;
  --surface-hov:#f1f5f9;
  --border:     #e2e8f0;
  --border-hov: #cbd5e1;

  --accent-1:   #0284c7;   /* sky-600 */
  --accent-2:   #4f46e5;   /* indigo-600 */
  --accent-3:   #0891b2;   /* cyan-600 */
  --success:    #16a34a;
  --danger:     #dc2626;
  --warn:       #d97706;

  --text-1:     #0f172a;
  --text-2:     #334155;
  --text-3:     #64748b;
  --text-4:     #94a3b8;

  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  16px;

  --font:  'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono:  'Cascadia Code', 'Fira Code', monospace;

  --sidebar-w: 240px;
  --trans: 160ms cubic-bezier(.4,0,.2,1);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow:    0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 32px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.05);
}

html { font-size: 15px; }
body { font-family: var(--font); background: var(--bg); color: var(--text-1);
       line-height: 1.55; -webkit-font-smoothing: antialiased; }
a    { color: inherit; text-decoration: none; }
svg  { display: inline-block; flex-shrink: 0; }


/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-body { min-height: 100vh; display: flex; align-items: center;
              justify-content: center; background: linear-gradient(135deg, #e0f2fe 0%, #ede9fe 100%);
              position: relative; overflow: hidden; }

.login-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.login-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .25; animation: float 9s ease-in-out infinite; }
.orb-1 { width: 480px; height: 480px; background: radial-gradient(circle, #38bdf8, transparent 70%); top: -100px; left: -80px; }
.orb-2 { width: 380px; height: 380px; background: radial-gradient(circle, #818cf8, transparent 70%); bottom: -60px; right: -60px; animation-delay: 3s; }
.orb-3 { width: 260px; height: 260px; background: radial-gradient(circle, #22d3ee, transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-50%); animation-delay: 5s; }

@keyframes float { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-20px) scale(1.03)} }

.login-container { position: relative; z-index: 1; width: 100%; max-width: 420px; padding: 24px; }

.login-card {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow-lg);
}

.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.brand-icon  { width: 44px; height: 44px; flex-shrink: 0; }
.brand-icon.small { width: 36px; height: 36px; }
.brand-icon svg, .brand-icon.small svg { width: 100%; height: 100%; }

.brand-name { display: block; font-size: 1.2rem; font-weight: 700;
              background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
              -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.brand-sub  { display: block; font-size: .75rem; color: var(--text-3); margin-top: 1px; }

.login-desc { font-size: .875rem; color: var(--text-3); margin-bottom: 24px;
              padding-bottom: 24px; border-bottom: 1px solid var(--border); }

.login-form   { display: flex; flex-direction: column; gap: 20px; }
.login-footer { text-align: center; font-size: .75rem; color: var(--text-4); margin-top: 24px; }


/* ============================================================
   FORM FIELDS
   ============================================================ */
.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-group label { font-size: .8rem; font-weight: 600; color: var(--text-2);
                     text-transform: uppercase; letter-spacing: .05em; }

.input-wrap { position: relative; }
.input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
              width: 16px; height: 16px; color: var(--text-4); pointer-events: none; }

.input-wrap input {
  width: 100%; padding: 11px 14px 11px 38px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-1);
  font-size: .9rem; font-family: var(--font); outline: none;
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.input-wrap input:focus {
  border-color: var(--accent-1); background: #fff;
  box-shadow: 0 0 0 3px rgba(2,132,199,.12);
}
.input-wrap input::placeholder { color: var(--text-4); }

.label-hint  { font-size: .72rem; font-weight: 400; color: var(--text-4); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.field-hint  { font-size: .75rem; color: var(--text-4); margin-top: 4px; }
.field-inline { flex-direction: row; align-items: center; }


/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 20px; border: none; border-radius: var(--radius-sm); cursor: pointer;
  font-size: .875rem; font-weight: 600; font-family: var(--font);
  background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);
  color: #fff; box-shadow: 0 2px 8px rgba(2,132,199,.3);
  transition: opacity var(--trans), transform var(--trans), box-shadow var(--trans);
}
.btn-primary:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(2,132,199,.35); }
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary svg { width: 16px; height: 16px; }
.btn-full { width: 100%; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; font-size: .82rem; font-weight: 500; font-family: var(--font);
  background: var(--surface); color: var(--text-2);
  transition: border-color var(--trans), background var(--trans), color var(--trans);
}
.btn-secondary:hover { border-color: var(--border-hov); background: var(--surface-hov); color: var(--text-1); }
.btn-secondary svg { width: 14px; height: 14px; }
.btn-sm { padding: 7px 12px; font-size: .78rem; }


/* ============================================================
   ALERTS
   ============================================================ */
.alert { display: flex; align-items: flex-start; gap: 10px;
         padding: 12px 15px; border-radius: var(--radius-sm); font-size: .875rem; }
.alert svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.alert-error   { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.flash-msg { margin-bottom: 4px; }
.hidden { display: none !important; }


/* ============================================================
   SIDEBAR
   ============================================================ */
.dashboard-body { display: flex; min-height: 100vh; background: var(--bg); }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; height: 100vh;
  padding: 20px 0;
  box-shadow: var(--shadow-sm);
}

.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 0 18px 20px;
                 border-bottom: 1px solid var(--border); margin-bottom: 8px; }

.sidebar-nav { flex: 1; padding: 0 10px; display: flex; flex-direction: column; gap: 2px; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 500; color: var(--text-3);
  transition: background var(--trans), color var(--trans);
}
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.nav-item:hover { background: var(--bg-3); color: var(--text-2); }
.nav-item.active { background: #eff6ff; color: var(--accent-1); font-weight: 600; }

.sidebar-footer { padding: 16px 14px 0; border-top: 1px solid var(--border);
                  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.user-badge { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
               background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
               display: flex; align-items: center; justify-content: center;
               font-size: .8rem; font-weight: 700; color: #fff; }
.user-name { display: block; font-size: .82rem; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { display: block; font-size: .72rem; color: var(--text-3); }

.btn-logout { width: 32px; height: 32px; border-radius: var(--radius-sm); flex-shrink: 0;
              background: var(--bg-3); border: 1px solid var(--border);
              display: flex; align-items: center; justify-content: center;
              color: var(--text-3); transition: color var(--trans), background var(--trans); cursor: pointer; }
.btn-logout:hover { background: #fef2f2; color: var(--danger); border-color: #fecaca; }
.btn-logout svg { width: 15px; height: 15px; }


/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content { margin-left: var(--sidebar-w); flex: 1; min-height: 100vh; display: flex; flex-direction: column; }

.topbar { display: flex; align-items: center; justify-content: space-between;
          padding: 18px 28px; border-bottom: 1px solid var(--border);
          background: var(--surface); position: sticky; top: 0; z-index: 10;
          box-shadow: var(--shadow-sm); }
.page-title { font-size: 1.1rem; font-weight: 700; color: var(--text-1); }
.page-sub   { font-size: .78rem; color: var(--text-3); margin-top: 1px; }

.topbar-status { display: flex; align-items: center; gap: 8px;
                 background: var(--bg-3); border: 1px solid var(--border);
                 padding: 6px 14px; border-radius: 20px; }
.status-dot   { width: 7px; height: 7px; border-radius: 50%; background: var(--success); transition: background var(--trans); }
.status-dot.busy { background: var(--warn); animation: pulse 1s ease-in-out infinite; }
.status-label { font-size: .8rem; font-weight: 500; color: var(--text-2); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }

.inner-content { padding: 24px 28px 40px; display: flex; flex-direction: column; gap: 18px; }


/* ============================================================
   STATS STRIP
   ============================================================ */
.stats-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }

.stat-card {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--trans), box-shadow var(--trans);
}
.stat-card:hover { border-color: var(--border-hov); box-shadow: var(--shadow); }
.stat-card svg   { width: 22px; height: 22px; color: var(--accent-1); flex-shrink: 0; }
.stat-value { display: block; font-size: 1rem; font-weight: 700; color: var(--text-1); }
.stat-label { display: block; font-size: .72rem; color: var(--text-3); margin-top: 1px; }


/* ============================================================
   ACTION SECTION
   ============================================================ */
.action-section { display: flex; flex-direction: column; gap: 16px; }

.action-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.action-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.action-card-header h3 { font-size: .95rem; font-weight: 700; color: var(--text-1); margin-bottom: 3px; }
.action-card-header p  { font-size: .82rem; color: var(--text-3); max-width: 460px; }

/* Botões de geração + help */
.action-buttons { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.btn-action-wrap { display: flex; align-items: center; gap: 4px; }
.btn-action-main {
  display: flex; align-items: center; gap: 6px;
}
.btn-action-ab {
  background: var(--accent-1) !important;
  border-color: var(--accent-1) !important;
}
.btn-action-var {
  background: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
}
.btn-help {
  position: relative;
  width: 22px; height: 22px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--text-3);
  font-size: .72rem; font-weight: 700;
  line-height: 1;
  cursor: help;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--trans), border-color var(--trans), background var(--trans);
}
.btn-help:hover,
.btn-help:focus-visible {
  color: var(--accent-1);
  border-color: #bfdbfe;
  background: #eff6ff;
  outline: none;
}
.btn-help-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  z-index: 50;
  width: 260px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--text-1);
  color: #f8fafc;
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--trans), transform var(--trans), visibility var(--trans);
  pointer-events: none;
}
.btn-help-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; right: 8px;
  border: 6px solid transparent;
  border-top-color: var(--text-1);
}
.btn-help-tooltip strong {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.btn-help-tooltip em {
  font-style: normal;
  color: #7dd3fc;
  font-weight: 600;
}
.btn-help:hover .btn-help-tooltip,
.btn-help:focus-visible .btn-help-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.btn-gerar { padding: 11px 24px; white-space: nowrap; flex-shrink: 0; }

/* Pipeline */
.pipeline { display: flex; align-items: center; }
.pipeline-step { display: flex; align-items: center; gap: 10px; flex: 1; }

.step-dot {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-3); border: 2px solid var(--border);
  transition: border-color var(--trans), background var(--trans), box-shadow var(--trans);
}
.pipeline-step.active .step-dot {
  border-color: var(--accent-1); background: #eff6ff;
  box-shadow: 0 0 0 4px rgba(2,132,199,.12);
  animation: pulse 1s ease-in-out infinite;
}
.pipeline-step.done .step-dot {
  border-color: var(--success); background: #f0fdf4;
  display: flex; align-items: center; justify-content: center;
}
.pipeline-step.done .step-dot::after {
  content: ''; display: block; width: 9px; height: 9px;
  border-right: 2px solid var(--success); border-bottom: 2px solid var(--success);
  transform: rotate(45deg) translate(-1px, -2px);
}
.step-name { font-size: .8rem; font-weight: 600; color: var(--text-2); }
.step-desc { font-size: .71rem; color: var(--text-3); }
.pipeline-step.active .step-name { color: var(--accent-1); }
.pipeline-step.done   .step-name { color: var(--success); }

.pipeline-connector { flex-grow: 1; max-width: 40px; height: 2px;
                      background: var(--border); margin: 0 4px; border-radius: 1px;
                      transition: background var(--trans); }
.pipeline-connector.done { background: var(--success); }


/* ============================================================
   RESULTADO
   ============================================================ */
.resultado-area { animation: fadeIn .3s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.resultado-grid { display: grid; grid-template-columns: 320px 1fr; gap: 14px; }
.resultado-card { background: var(--surface); border: 1px solid var(--border);
                  border-radius: var(--radius-lg); padding: 18px 20px;
                  display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); }

.card-label { display: flex; align-items: center; gap: 7px;
              font-size: .75rem; font-weight: 600; text-transform: uppercase;
              letter-spacing: .06em; color: var(--text-3); }
.card-label svg { width: 14px; height: 14px; }

.post-image   { width: 100%; border-radius: var(--radius-sm); object-fit: cover;
                border: 1px solid var(--border); background: var(--bg-3); }
.resultado-col { display: flex; flex-direction: column; gap: 14px; }
.legenda-texto { font-size: .875rem; color: var(--text-2); line-height: 1.65;
                 white-space: pre-wrap; max-height: 180px; overflow-y: auto; }
.legenda-textarea { width: 100%; font-size: .875rem; color: var(--text-2); line-height: 1.65;
                     padding: 10px 12px; border-radius: var(--radius-sm);
                     border: 1px solid var(--border); background: var(--bg-3);
                     resize: vertical; min-height: 120px; font-family: inherit; }
.legenda-textarea:focus { outline: none; border-color: var(--accent-2); }
.legenda-hint { font-size: .78rem; color: var(--text-3); margin: 6px 0 10px; line-height: 1.45; }
.legenda-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.whatsapp-list { display: flex; flex-direction: column; gap: 7px; }
.wa-item { display: flex; align-items: center; justify-content: space-between;
           padding: 9px 12px; border-radius: var(--radius-sm);
           background: var(--bg-3); border: 1px solid var(--border); }
.wa-nome  { font-size: .85rem; font-weight: 500; color: var(--text-1); }
.wa-badge { font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.wa-badge.ok   { background: #dcfce7; color: #15803d; }
.wa-badge.fail { background: #fee2e2; color: #b91c1c; }


/* ============================================================
   HISTÓRICO
   ============================================================ */
.historico-section { padding-top: 4px; }

.section-title { display: flex; align-items: center; gap: 8px;
                 font-size: .9rem; font-weight: 700; color: var(--text-1);
                 margin-bottom: 14px; padding-top: 20px;
                 border-top: 1px solid var(--border); }
.section-title svg { width: 16px; height: 16px; color: var(--accent-1); }

.historico-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 10px; }

.hist-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm);
  transition: border-color var(--trans), box-shadow var(--trans);
}
.hist-card:hover { border-color: var(--border-hov); box-shadow: var(--shadow); }

.hist-header  { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.hist-date    { font-size: .72rem; font-family: var(--mono); color: var(--text-4); }
.hist-destino { font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 20px;
                background: #eff6ff; color: var(--accent-1); border: 1px solid #bfdbfe; white-space: nowrap; }
.hist-texto   { font-size: .82rem; color: var(--text-2); line-height: 1.6; }
.hist-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.hist-btn-editar {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border: 1px solid #c7d2fe; border-radius: 20px;
  background: #eef2ff; color: var(--accent-2); font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: background var(--trans), border-color var(--trans);
}
.hist-btn-editar:hover { background: #e0e7ff; border-color: var(--accent-2); }
.hist-btn-editar svg { width: 13px; height: 13px; }
.hist-btn-disabled {
  font-size: .75rem; color: var(--text-4); font-style: italic;
}
.post-status-banner {
  margin-bottom: 14px; padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: .84rem; font-weight: 500; line-height: 1.45;
}
.post-status-banner.banner-aprovado {
  background: #dcfce7; color: #166534; border: 1px solid #bbf7d0;
}
.post-status-banner.banner-recusado {
  background: #fee2e2; color: #991b1b; border: 1px solid #fecaca;
}
.post-status-banner.banner-pendente {
  background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
}
.hist-img-link { display: inline-flex; align-items: center; gap: 5px;
                 font-size: .75rem; color: var(--text-3); transition: color var(--trans); }
.hist-img-link:hover { color: var(--accent-1); }
.hist-img-link svg { width: 13px; height: 13px; }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px;
               padding: 48px; color: var(--text-4); text-align: center; }
.empty-state svg { width: 36px; height: 36px; opacity: .4; }
.empty-state p { font-size: .875rem; color: var(--text-3); max-width: 300px; }
.empty-state strong { color: var(--text-2); }


/* ============================================================
   SIDEBAR EXTRAS
   ============================================================ */
.nav-divider { height: 1px; background: var(--border); margin: 8px 12px; }

.nav-item-admin { color: var(--text-3); }
.nav-item-admin:hover,
.nav-item-admin.active { background: #fef9ec; color: #92400e; }
.nav-item-admin.active  { border: 1px solid #fde68a; }

.nav-admin-tag { margin-left: auto; font-size: .65rem; font-weight: 700;
                 background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
                 padding: 1px 6px; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em; }


/* ============================================================
   FORMULÁRIO DE CONFIGURAÇÕES
   ============================================================ */
.config-form { display: flex; flex-direction: column; gap: 20px; max-width: 780px; }

.config-secao {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.secao-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px;
  background: var(--bg-3); border-bottom: 1px solid var(--border);
}
.secao-icone { font-size: 1.3rem; line-height: 1; }
.secao-titulo { font-size: .95rem; font-weight: 700; color: var(--text-1); }

.secao-campos { padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; }

.cfg-textarea {
  width: 100%; padding: 10px 14px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-1);
  font-size: .875rem; font-family: var(--font); line-height: 1.6;
  resize: vertical; min-height: 90px; outline: none;
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.cfg-textarea:focus {
  border-color: var(--accent-1); background: #fff;
  box-shadow: 0 0 0 3px rgba(2,132,199,.1);
}
.cfg-textarea::placeholder { color: var(--text-4); }

.config-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.admin-badge {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--text-3);
}
.admin-badge svg { width: 15px; height: 15px; color: var(--warn); flex-shrink: 0; }


/* ============================================================
   CONTEXTO CARD
   ============================================================ */
.contexto-card {
  background: #f0f9ff; border: 1px solid #bae6fd;
  border-radius: var(--radius-lg); padding: 16px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.contexto-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ctx-item:empty { display: none; }
.ctx-item {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #bae6fd;
  border-radius: 20px; padding: 5px 12px;
  font-size: .78rem; color: #0369a1; font-weight: 500;
}

/* Badges de tipo de post */
.badge-tipo { font-size: .65rem; font-weight: 700; padding: 2px 7px;
              border-radius: 20px; text-transform: uppercase; letter-spacing: .04em; }
.badge-tipo-turismo    { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.badge-tipo-tecnologia { background: #ede9fe; color: #4c1d95; border: 1px solid #ddd6fe; }
.badge-tipo-urgencia   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Badges de formato de post */
.badge-formato { font-size: .65rem; font-weight: 700; padding: 2px 7px;
                 border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; }
.badge-formato-reels { background: #fdf2f8; color: #9d174d; border: 1px solid #fbcfe8; }
.badge-formato-shorts { background: #fef2f2; color: #991b1b; border: 1px solid #fee2e2; }
.badge-formato-story { background: #fff7ed; color: #9a3412; border: 1px solid #ffedd5; }
.badge-formato-carrossel { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.badge-formato-post_estatico { background: #f0fdfa; color: #075985; border: 1px solid #ccfbf1; }


/* Status badges */
.badge-status { font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; text-transform: capitalize; }
.badge-status-pendente  { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.badge-status-aprovado  { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.badge-status-recusado  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Decisão card */
.decisao-card { margin-top: 12px; }
.decisao-hint { font-size: .82rem; color: var(--text-2); margin: 8px 0 12px; }
.decisao-actions { display: flex; gap: 10px; }
.btn-aprovar, .btn-recusar {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 8px; font-size: .85rem; font-weight: 600;
  border: none; cursor: pointer; transition: opacity .15s;
}
.btn-aprovar:disabled, .btn-recusar:disabled { opacity: .45; cursor: not-allowed; }
.btn-aprovar { background: #16a34a; color: #fff; }
.btn-aprovar:hover:not(:disabled) { background: #15803d; }
.btn-recusar { background: #dc2626; color: #fff; }
.btn-recusar:hover:not(:disabled) { background: #b91c1c; }
.btn-aprovar svg, .btn-recusar svg { width: 16px; height: 16px; }

/* Solicitar alteração */
.revisao-card { margin-top: 0; }
.revisao-hint { font-size: .82rem; color: var(--text-3); margin-bottom: 12px; }
.revisao-aviso {
  font-size: .8rem; color: var(--warn); background: #fffbeb;
  border: 1px solid #fde68a; border-radius: var(--radius-sm);
  padding: 8px 10px; margin-bottom: 10px;
}
.revisao-card.revisao-bloqueada { opacity: .65; pointer-events: none; }
.revisao-opcoes { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px; }
.revisao-check {
  display: flex; align-items: center; gap: 8px;
  font-size: .84rem; color: var(--text-2); cursor: pointer; user-select: none;
}
.revisao-check input { width: 16px; height: 16px; accent-color: var(--accent-1); cursor: pointer; }
.revisao-campo { margin-bottom: 10px; }
.revisao-campo label {
  display: block; font-size: .78rem; font-weight: 600;
  color: var(--text-2); margin-bottom: 4px;
}
.revisao-campo textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-family: var(--font); font-size: .84rem;
  color: var(--text-1); background: var(--bg-3); resize: vertical; min-height: 56px;
}
.revisao-campo textarea:focus {
  outline: none; border-color: var(--accent-1); background: #fff;
}
.btn-revisar {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px; padding: 9px 16px; border: none; border-radius: var(--radius-sm);
  background: var(--accent-2); color: #fff; font-size: .84rem; font-weight: 600;
  cursor: pointer; transition: opacity var(--trans), transform var(--trans);
}
.btn-revisar:hover:not(:disabled) { opacity: .92; transform: translateY(-1px); }
.btn-revisar:disabled { opacity: .5; cursor: not-allowed; }
.btn-revisar svg { width: 16px; height: 16px; }
.decisao-feedback { margin-top: 10px; font-size: .82rem; font-weight: 600; padding: 6px 12px; border-radius: 6px; }
.feedback-ok       { background: #dcfce7; color: #166534; }
.feedback-recusado { background: #fee2e2; color: #991b1b; }


/* ============================================================
   CRUD TABLE
   ============================================================ */
.crud-table-wrap { overflow-x: auto; border-radius: var(--radius-lg);
                   border: 1px solid var(--border); background: var(--surface);
                   box-shadow: var(--shadow-sm); }
.crud-table { width: 100%; border-collapse: collapse; }
.crud-table thead tr { background: var(--bg-3); border-bottom: 1px solid var(--border); }
.crud-table th { padding: 11px 16px; text-align: left; font-size: .73rem; font-weight: 700;
                 text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); white-space: nowrap; }
.crud-table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--trans); }
.crud-table tbody tr:last-child { border-bottom: none; }
.crud-table tbody tr:hover { background: var(--bg-3); }
.crud-table td { padding: 12px 16px; font-size: .875rem; color: var(--text-2); }

.td-nome    { font-weight: 600; color: var(--text-1); }
.td-date    { font-family: var(--mono); font-size: .78rem; color: var(--text-3); }
.td-empty   { text-align: center; color: var(--text-3); padding: 32px; }
.td-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }

.code-tag { font-family: var(--mono); font-size: .8rem;
            background: #f1f5f9; border: 1px solid var(--border);
            padding: 2px 8px; border-radius: 4px; color: var(--accent-3); }

.phone-tag { display: inline-flex; align-items: center; gap: 5px;
             font-family: var(--mono); font-size: .82rem; color: var(--text-2); }
.phone-tag svg { width: 13px; height: 13px; color: var(--success); }

.badge { font-size: .72rem; font-weight: 600; padding: 3px 10px;
         border-radius: 20px; white-space: nowrap; }
.badge-ok  { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.badge-off { background: #f1f5f9; color: var(--text-3); border: 1px solid var(--border); }
.badge-ativo { font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.badge-on  { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }

/* Nav group label */
.nav-group-label { font-size: .67rem; font-weight: 700; text-transform: uppercase;
                   letter-spacing: .08em; color: var(--text-3); padding: 4px 14px 2px;
                   display: block; }

/* External link */
.link-ext { color: var(--accent-1); font-size: .82rem; text-decoration: none; }
.link-ext:hover { text-decoration: underline; }

/* Monitoramento */
.monit-section { margin-top: 24px; }
.monit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-top: 14px; }
.monit-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
              padding: 16px; box-shadow: var(--shadow-sm); }
.monit-card.monit-erro { border-color: #fecaca; background: #fff5f5; }
.monit-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.monit-nome  { font-weight: 700; font-size: .9rem; color: var(--text-1); }
.monit-data  { font-size: .73rem; color: var(--text-3); font-family: var(--mono); }
.monit-url   { font-size: .73rem; color: var(--accent-1); margin-bottom: 6px;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monit-titulo { font-size: .82rem; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.monit-conteudo { font-size: .8rem; color: var(--text-2); line-height: 1.55;
                  white-space: pre-line; max-height: 160px; overflow-y: auto; }
#monitorFeedback { margin: 12px 0; }

/* Download toast */
.download-toast { position: fixed; bottom: 24px; right: 24px; z-index: 999;
  padding: 12px 20px; border-radius: 10px; font-size: .85rem; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,.15); max-width: 420px; transition: opacity .3s; }
.download-toast.hidden      { display: none; }
.download-toast-info  { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.download-toast-ok    { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.download-toast-erro  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Estabelecimentos */
.estab-section { margin-bottom: 28px; }
.estab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; }
.estab-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
              padding: 14px 16px; box-shadow: var(--shadow-sm); }
.estab-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.estab-nome { font-weight: 700; font-size: .88rem; color: var(--text-1); line-height: 1.3; }
.estab-info { display: flex; flex-direction: column; gap: 6px; }
.estab-campo { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--text-2); }
.estab-campo svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-3); }
.estab-campo a { color: var(--accent-1); text-decoration: none; }
.estab-campo a:hover { text-decoration: underline; }
.badge-tipo-osm    { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd;
                     font-size:.65rem; font-weight:700; padding:2px 7px; border-radius:99px; white-space:nowrap; }
.badge-tipo-manual { background: #fef9c3; color: #854d0e; border: 1px solid #fef08a;
                     font-size:.65rem; font-weight:700; padding:2px 7px; border-radius:99px; white-space:nowrap; }
.text-muted { color: var(--text-3); }

.btn-icon { width: 30px; height: 30px; border-radius: var(--radius-sm); flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            background: var(--bg-3); border: 1px solid var(--border); cursor: pointer;
            color: var(--text-3); transition: color var(--trans), background var(--trans), border-color var(--trans); }
.btn-icon:hover { color: var(--accent-1); border-color: #bfdbfe; background: #eff6ff; }
.btn-icon-danger:hover { color: var(--danger); border-color: #fecaca; background: #fef2f2; }
.btn-icon svg { width: 14px; height: 14px; }
.inline-form { display: inline; }


/* ============================================================
   CRUD FORM
   ============================================================ */
.form-wrap { max-width: 500px; background: var(--surface); border: 1px solid var(--border);
             border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.crud-form { display: flex; flex-direction: column; gap: 20px; }

/* Toggle */
.toggle-label { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; font-size: .875rem; color: var(--text-2); }
.toggle-input { display: none; }
.toggle-track { width: 38px; height: 20px; border-radius: 10px; background: #e2e8f0;
                border: 1px solid var(--border); position: relative; flex-shrink: 0;
                transition: background var(--trans), border-color var(--trans); }
.toggle-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
                border-radius: 50%; background: #94a3b8;
                transition: transform var(--trans), background var(--trans); }
.toggle-input:checked + .toggle-track { background: #dbeafe; border-color: var(--accent-1); }
.toggle-input:checked + .toggle-track .toggle-thumb { transform: translateX(18px); background: var(--accent-1); }

.form-actions { display: flex; align-items: center; gap: 10px; padding-top: 6px; }


/* ============================================================
   SPINNER
   ============================================================ */
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35);
           border-top-color: #fff; border-radius: 50%;
           animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hov); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .stats-strip    { grid-template-columns: repeat(2,1fr); }
  .resultado-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  :root { --sidebar-w: 0px; }
  .sidebar { display: none; }
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .action-card-header { flex-direction: column; }
  .action-buttons { width: 100%; }
  .btn-action-wrap { flex: 1 1 100%; }
  .btn-action-main { flex: 1; justify-content: center; }
  .btn-help-tooltip {
    right: auto; left: 0; width: min(280px, calc(100vw - 48px));
  }
  .btn-help-tooltip::after { right: auto; left: 8px; }
  .pipeline { flex-wrap: wrap; gap: 10px; }
  .pipeline-connector { display: none; }
  .topbar, .inner-content { padding-left: 16px; padding-right: 16px; }
}