/* public/assets/suntzu.css */
/* Sun Tzu SEO — Design System (SE Ranking feel)
   - Escopo: body.suntzu
   - Tokens: bg/surface/border/ink/muted + mint/sky
   - Componentes: cards, KPI, botões, badges, alerts, stepper
*/

body.suntzu{
  --suntzu-bg:        #F7FBF9;
  --suntzu-surface:   #FFFFFF;
  --suntzu-border:    #D7E3DC;
  --suntzu-ink:       #0F172A;
  --suntzu-muted:     #64748B;

  --suntzu-mint-50:   #ECFDF5;
  --suntzu-mint-100:  #D1FAE5;
  --suntzu-mint-200:  #A7F3D0;
  --suntzu-mint-600:  #059669;

  --suntzu-sky-50:    #EFF6FF;
  --suntzu-sky-100:   #DBEAFE;
  --suntzu-sky-600:   #2563EB;

  --suntzu-warn-50:   #FFF7ED;
  --suntzu-warn-600:  #C2410C;

  --suntzu-ok-50:     var(--suntzu-mint-50);
  --suntzu-ok-600:    var(--suntzu-mint-600);

  --suntzu-shadow:    0 10px 30px rgba(2, 6, 23, .08);
  --suntzu-radius:    16px;
  --suntzu-radius-sm: 12px;

  background: var(--suntzu-bg);
  color: var(--suntzu-ink);
}

body.suntzu a{ color: inherit; }
body.suntzu ::selection{ background: var(--suntzu-mint-100); }

body.suntzu .suntzu-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

body.suntzu .suntzu-page-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 16px;
}
body.suntzu .suntzu-page-title h1{
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}
body.suntzu .suntzu-page-title p{
  margin-top: 6px;
  color: var(--suntzu-muted);
  font-size: 14px;
}

body.suntzu .suntzu-card{
  background: var(--suntzu-surface);
  border: 1px solid var(--suntzu-border);
  border-radius: var(--suntzu-radius);
  box-shadow: var(--suntzu-shadow);
}
body.suntzu .suntzu-card .suntzu-card-hd{
  padding: 16px 16px 0 16px;
}
body.suntzu .suntzu-card .suntzu-card-bd{
  padding: 16px;
}
body.suntzu .suntzu-card .suntzu-card-ft{
  padding: 0 16px 16px 16px;
}

body.suntzu .suntzu-grid{
  display:grid;
  gap: 14px;
}
@media (min-width: 900px){
  body.suntzu .suntzu-grid--2{ grid-template-columns: 1fr 1fr; }
  body.suntzu .suntzu-grid--3{ grid-template-columns: 1fr 1fr 1fr; }
}

body.suntzu .suntzu-kpi{
  padding: 14px;
  border-radius: var(--suntzu-radius-sm);
  border: 1px solid var(--suntzu-border);
  background: linear-gradient(180deg, rgba(236, 253, 245, .55), rgba(255,255,255,1));
}
body.suntzu .suntzu-kpi .label{
  font-size: 12px;
  color: var(--suntzu-muted);
}
body.suntzu .suntzu-kpi .value{
  margin-top: 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
body.suntzu .suntzu-kpi .hint{
  margin-top: 6px;
  font-size: 12px;
  color: var(--suntzu-muted);
}

body.suntzu .suntzu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
  text-decoration:none;
  user-select:none;
  transition: transform .06s ease, filter .2s ease, background-color .2s ease, border-color .2s ease;
}
body.suntzu .suntzu-btn:active{ transform: translateY(1px); }
body.suntzu .suntzu-btn:focus{ outline: none; }
body.suntzu .suntzu-btn:focus-visible{
  outline: 3px solid rgba(37, 99, 235, .25);
  outline-offset: 2px;
}

body.suntzu .suntzu-btn--mint{
  background: var(--suntzu-mint-600);
  color: #fff;
}
body.suntzu .suntzu-btn--mint:hover{ filter: brightness(1.05); }

body.suntzu .suntzu-btn--sky{
  background: var(--suntzu-sky-600);
  color: #fff;
}
body.suntzu .suntzu-btn--sky:hover{ filter: brightness(1.05); }

body.suntzu .suntzu-btn--ghost{
  background: transparent;
  border-color: var(--suntzu-border);
  color: var(--suntzu-ink);
}
body.suntzu .suntzu-btn--ghost:hover{
  background: rgba(15, 23, 42, .03);
}

body.suntzu .suntzu-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 5px 10px;
  font-weight: 800;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid var(--suntzu-border);
  background: #fff;
}
body.suntzu .suntzu-badge--mint{
  background: var(--suntzu-mint-50);
  border-color: var(--suntzu-mint-200);
  color: var(--suntzu-mint-600);
}
body.suntzu .suntzu-badge--sky{
  background: var(--suntzu-sky-50);
  border-color: var(--suntzu-sky-100);
  color: var(--suntzu-sky-600);
}
body.suntzu .suntzu-badge--warn{
  background: var(--suntzu-warn-50);
  border-color: #FED7AA;
  color: var(--suntzu-warn-600);
}

body.suntzu .suntzu-alert{
  border-radius: var(--suntzu-radius-sm);
  border: 1px solid var(--suntzu-border);
  background: #fff;
  padding: 12px 14px;
}
body.suntzu .suntzu-alert--info{
  border-color: var(--suntzu-sky-100);
  background: linear-gradient(180deg, rgba(239,246,255,.85), #fff);
}
body.suntzu .suntzu-alert--ok{
  border-color: var(--suntzu-mint-200);
  background: linear-gradient(180deg, rgba(236,253,245,.85), #fff);
}
body.suntzu .suntzu-alert--warn{
  border-color: #FED7AA;
  background: linear-gradient(180deg, rgba(255,247,237,.85), #fff);
}

body.suntzu .suntzu-steps{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
body.suntzu .suntzu-step{
  flex: 1 1 220px;
  border-radius: 14px;
  border: 1px solid var(--suntzu-border);
  background: #fff;
  padding: 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  text-decoration:none;
}
body.suntzu .suntzu-step .k{
  font-size: 12px;
  color: var(--suntzu-muted);
  font-weight: 800;
}
body.suntzu .suntzu-step .t{
  margin-top: 2px;
  font-size: 14px;
  font-weight: 900;
}
body.suntzu .suntzu-step--active{
  border-color: var(--suntzu-mint-200);
  box-shadow: 0 10px 25px rgba(5,150,105,.12);
}
body.suntzu .suntzu-step--done{
  border-color: var(--suntzu-mint-100);
  background: linear-gradient(180deg, rgba(236,253,245,.55), #fff);
}

@media (prefers-reduced-motion: reduce){
  body.suntzu .suntzu-btn{ transition:none; }
}


/* SUNTZU_EXCEPTION_STATES_V1 */
.suntzu-state{
  border:1px solid var(--suntzu-border, #e2e8f0);
  border-radius:18px;
  padding:18px;
  background:var(--suntzu-surface, #ffffff);
  box-shadow:0 10px 30px rgba(15,23,42,.04);
}
.suntzu-state-compact{
  padding:14px;
}
.suntzu-state-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.32rem .62rem;
  border-radius:999px;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.02em;
  margin-bottom:10px;
}
.suntzu-state-title{
  font-size:1rem;
  font-weight:700;
  color:var(--suntzu-ink, #0f172a);
}
.suntzu-state-sub{
  margin-top:6px;
  color:var(--suntzu-muted, #64748b);
  line-height:1.6;
}
.suntzu-state-actions{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.suntzu-state-empty{
  background:#f8fafc;
  border-color:#e2e8f0;
}
.suntzu-state-empty .suntzu-state-badge{
  background:#e2e8f0;
  color:#334155;
}

.suntzu-state-info{
  background:#f0f9ff;
  border-color:#bae6fd;
}
.suntzu-state-info .suntzu-state-badge{
  background:#dbeafe;
  color:#1d4ed8;
}

.suntzu-state-warning{
  background:#fffbeb;
  border-color:#fde68a;
}
.suntzu-state-warning .suntzu-state-badge{
  background:#fef3c7;
  color:#92400e;
}

.suntzu-state-success{
  background:#ecfdf5;
  border-color:#a7f3d0;
}
.suntzu-state-success .suntzu-state-badge{
  background:#d1fae5;
  color:#065f46;
}

.suntzu-state-error{
  background:#fef2f2;
  border-color:#fecaca;
}
.suntzu-state-error .suntzu-state-badge{
  background:#fee2e2;
  color:#991b1b;
}