/* ============================================================
   Rio da Lua — identidade "noite de lua à beira do rio"
   Céu noturno + lua refletida na água · superfícies cor de areia
   Display: Fraunces · UI: Albert Sans
   ============================================================ */

:root{
  --bg:#F6F1E7;            /* areia clara */
  --surface:#FFFDF8;
  --surface2:#EFE7D7;
  --ink:#20303A;           /* azul-tinta profundo */
  --muted:#71807F;
  --line:#E5DBC7;
  --accent:#136E6B;        /* verde-mar profundo */
  --accent-ink:#0C5350;
  --accent-soft:#DDEDE7;
  --gold:#B98A2F;          /* dourado-lua */
  --gold-soft:#F5E8C8;
  --ok:#2E7D4F;  --ok-soft:#E1F0E3;
  --warn:#A5691C; --warn-soft:#F7EACF;
  --crit:#B04430; --crit-soft:#F7E1DA;
  --night1:#0B1626; --night2:#0F2F3C; --night3:#12494F;
  --moon:#F6EBCF;
  --shadow:0 1px 2px rgba(32,48,58,.05), 0 10px 30px rgba(32,48,58,.08);
  --shadow-lift:0 2px 4px rgba(32,48,58,.06), 0 16px 40px rgba(32,48,58,.13);
  --r:18px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B131B;
    --surface:#121E29;
    --surface2:#182835;
    --ink:#EAE2CE;
    --muted:#8DA0A5;
    --line:#233746;
    --accent:#3BA79E;
    --accent-ink:#7FD6CB;
    --accent-soft:#11322F;
    --gold:#D9AE55;
    --gold-soft:#33290F;
    --ok:#4CBB7F;  --ok-soft:#12301D;
    --warn:#DBA346; --warn-soft:#33260D;
    --crit:#DF7257; --crit-soft:#3A190F;
    --night1:#060D18; --night2:#0B2531; --night3:#0E3B41;
    --moon:#F2E5C4;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 34px rgba(0,0,0,.45);
    --shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.55);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Albert Sans", "Segoe UI", sans-serif;
  font-size:15px; line-height:1.55;
  background-image:
    radial-gradient(1200px 500px at 50% -220px, color-mix(in srgb, var(--gold) 7%, transparent), transparent 70%);
}
.wrap{max-width:1100px; margin:0 auto; padding:14px 16px 80px}
.narrow{max-width:520px}
a{color:var(--accent-ink)}
::selection{background:var(--gold-soft); color:var(--ink)}

h1,h2,h3,.kpi b,.brand-name{
  font-family:"Fraunces", Georgia, serif;
  font-weight:560; letter-spacing:.005em;
}

/* ---------- header: céu noturno com lua na água ---------- */
header.sky{
  position:relative; overflow:hidden;
  border-radius:22px; margin-bottom:22px;
  padding:22px 24px 24px;
  background:linear-gradient(158deg, var(--night1) 4%, var(--night2) 58%, var(--night3) 120%);
  color:var(--moon);
  box-shadow:var(--shadow-lift);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  animation:skyIn .6s cubic-bezier(.2,.7,.25,1) backwards;
}
@keyframes skyIn{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
.sky .stars{
  position:absolute; inset:0; pointer-events:none; opacity:.85;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 28%, rgba(246,235,207,.9), transparent 55%),
    radial-gradient(1px 1px at 26% 62%, rgba(246,235,207,.55), transparent 55%),
    radial-gradient(1.2px 1.2px at 38% 18%, rgba(246,235,207,.75), transparent 55%),
    radial-gradient(1px 1px at 55% 44%, rgba(246,235,207,.5), transparent 55%),
    radial-gradient(1.5px 1.5px at 67% 15%, rgba(246,235,207,.85), transparent 55%),
    radial-gradient(1px 1px at 79% 55%, rgba(246,235,207,.5), transparent 55%),
    radial-gradient(1.2px 1.2px at 90% 30%, rgba(246,235,207,.7), transparent 55%);
}
.moon-wrap{position:relative; width:64px; height:64px; flex-shrink:0}
.moon-wrap .crescent{
  position:absolute; top:-2px; left:6px; width:52px; height:52px;
  color:var(--moon);
  filter:drop-shadow(0 0 10px rgba(246,235,207,.45)) drop-shadow(0 0 26px rgba(246,235,207,.18));
}
.moon-wrap .ripples{position:absolute; left:0; right:0; bottom:-2px; display:flex; flex-direction:column; align-items:center; gap:3px}
.moon-wrap .ripples i{display:block; height:2px; border-radius:2px; background:rgba(246,235,207,.55)}
.moon-wrap .ripples i:nth-child(1){width:34px; animation:ripple 3.2s ease-in-out infinite}
.moon-wrap .ripples i:nth-child(2){width:22px; opacity:.6; animation:ripple 3.2s .5s ease-in-out infinite}
.moon-wrap .ripples i:nth-child(3){width:12px; opacity:.35; animation:ripple 3.2s 1s ease-in-out infinite}
@keyframes ripple{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.72)}}
.sky-brand{position:relative}
.sky-brand .over{
  display:flex; align-items:center; gap:9px;
  font-size:10.5px; letter-spacing:.4em; text-transform:uppercase; text-indent:.4em;
  color:color-mix(in srgb, var(--moon) 62%, transparent); margin-bottom:1px;
}
.sky-brand .over::before,.sky-brand .over::after{
  content:""; height:1px; width:20px;
  background:color-mix(in srgb, var(--moon) 45%, transparent);
}
.sky-brand h1.brand-name{
  margin:0; font-size:24px; line-height:1.2; font-weight:640;
  text-transform:uppercase; letter-spacing:.055em; color:var(--moon);
}
.sky-brand p{margin:2px 0 0; font-size:13px; color:color-mix(in srgb, var(--moon) 70%, transparent)}
.sky .spacer{flex:1}
.sky .who{font-size:13px; color:color-mix(in srgb, var(--moon) 75%, transparent)}
.sky .who b{color:var(--moon); font-weight:600}
.sky .who a{color:var(--gold); text-decoration:none; margin-left:10px; border-bottom:1px solid color-mix(in srgb, var(--gold) 45%, transparent)}

/* ---------- entrada em cascata ---------- */
.panel,.kpi,.ticket,.banner{animation:rise .5s cubic-bezier(.2,.7,.25,1) backwards}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.kpis>*:nth-child(1),.units>*:nth-child(1){animation-delay:.04s}
.kpis>*:nth-child(2),.units>*:nth-child(2){animation-delay:.09s}
.kpis>*:nth-child(3),.units>*:nth-child(3){animation-delay:.14s}
.kpis>*:nth-child(4),.units>*:nth-child(4){animation-delay:.19s}
.units>*:nth-child(5){animation-delay:.24s}
.units>*:nth-child(6){animation-delay:.29s}
.ticket:nth-of-type(2){animation-delay:.08s}
.ticket:nth-of-type(3){animation-delay:.16s}

/* ---------- painéis e cartões ---------- */
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:18px; box-shadow:var(--shadow);
}
.panel h3{margin:0 0 3px; font-size:17px}
.panel .sub{margin:0 0 12px; font-size:12.5px; color:var(--muted)}
.grid{display:grid; gap:14px}
.units{grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); margin-top:14px}
.cols2{display:grid; gap:14px; grid-template-columns:1fr; margin-top:14px}
@media(min-width:880px){.cols2{grid-template-columns:1.45fr 1fr}}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:6px}
.kpi{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px 12px; box-shadow:var(--shadow);
}
.kpi::after{
  content:""; position:absolute; left:16px; right:auto; bottom:10px; width:26px; height:3px;
  border-radius:3px; background:var(--gold); opacity:.75;
}
.kpi b{display:block; font-size:34px; line-height:1.05; font-weight:500}
.kpi span{display:block; font-size:12px; color:var(--muted); margin-top:2px; margin-bottom:10px}

/* ---------- pills de status ---------- */
.pill{
  font-size:11px; font-weight:650; letter-spacing:.02em;
  padding:4px 11px; border-radius:99px; white-space:nowrap;
  border:1px solid transparent;
}
.pill.ok{background:var(--ok-soft); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 25%, transparent)}
.pill.info{background:var(--accent-soft); color:var(--accent-ink); border-color:color-mix(in srgb, var(--accent) 25%, transparent)}
.pill.warn{background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 30%, transparent)}
.pill.crit{background:var(--crit-soft); color:var(--crit); border-color:color-mix(in srgb, var(--crit) 30%, transparent)}
.pill.mut{background:var(--surface2); color:var(--muted); border-color:var(--line)}

.unit-head{display:flex; align-items:center; justify-content:space-between; gap:8px}
.unit-head h3{font-size:16.5px}
.unit-meta{display:flex; flex-direction:column; gap:4px; margin-top:10px; font-size:13px; color:var(--muted)}
.unit-meta b{color:var(--ink); font-weight:600}

/* ---------- tabelas ---------- */
.tbl-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13px}
th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); padding:6px 8px; border-bottom:1px solid var(--line); font-weight:650;
}
td{padding:8px; border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent); vertical-align:top}
tr:last-child td{border-bottom:none}

/* ---------- botões ---------- */
.btn{
  display:inline-block; background:var(--accent); color:#FFFDF8;
  border:none; border-radius:999px; padding:12px 22px;
  font-family:"Albert Sans", sans-serif; font-size:14.5px; font-weight:650;
  cursor:pointer; text-decoration:none; text-align:center;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn:hover:not(:disabled){transform:translateY(-1px); box-shadow:0 10px 22px color-mix(in srgb, var(--accent) 38%, transparent)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:disabled{opacity:.4; cursor:not-allowed; box-shadow:none}
.btn.ghost{background:transparent; color:var(--accent-ink); border:1.5px solid color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow:none}
.btn.ghost:hover:not(:disabled){background:var(--accent-soft); box-shadow:none}
.btn.block{display:block; width:100%}
.btn.warn-line{background:transparent; color:var(--warn); border:1.5px dashed var(--warn); box-shadow:none}
.btn.sm{padding:5px 13px; font-size:12px; box-shadow:none}

/* ---------- tickets ---------- */
.ticket{
  position:relative;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:15px 16px; margin-bottom:12px;
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
a .ticket:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift)}
.ticket .row{display:flex; justify-content:space-between; align-items:center; gap:8px}
.ticket .row b{font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:15.5px}
.ticket small{display:block; color:var(--muted); font-size:12.5px; margin-top:3px}
.ticket small b{color:var(--ink)}
.ticket.prio-alta{border-left:4px solid var(--crit)}

/* ---------- checklist ---------- */
.check{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.check label{
  display:flex; gap:12px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:13px 14px; font-size:14.5px; cursor:pointer; user-select:none;
  transition:background .2s ease, border-color .2s ease;
}
.check label:has(input:checked){
  background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 35%, transparent);
  color:var(--accent-ink);
}
.check input{
  appearance:none; -webkit-appearance:none; margin:0; flex-shrink:0;
  width:24px; height:24px; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--muted) 55%, transparent);
  display:grid; place-items:center; cursor:pointer;
  transition:border-color .2s, background .2s;
}
.check input::before{
  content:"✓"; font-size:14px; font-weight:800; color:#FFFDF8;
  transform:scale(0); transition:transform .18s cubic-bezier(.2,.7,.3,1.4);
}
.check input:checked{background:var(--accent); border-color:var(--accent)}
.check input:checked::before{transform:scale(1)}

/* lua de progresso do checklist */
.moon-progress{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(158deg, var(--night1), var(--night2));
  border-radius:var(--r); padding:14px 16px; margin-top:14px;
  color:var(--moon); box-shadow:var(--shadow);
}
.moon-progress .phase{
  position:relative; width:46px; height:46px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:radial-gradient(circle at 36% 32%, #FBF4DF, var(--moon) 62%, #E2D0A0);
  box-shadow:0 0 16px 2px rgba(246,235,207,.3);
}
.moon-progress .shade{
  position:absolute; inset:-2px; border-radius:50%;
  background:var(--night1); opacity:.94;
  transition:transform .6s cubic-bezier(.3,.7,.3,1);
}
.moon-progress b{display:block; font-family:"Fraunces", Georgia, serif; font-size:16px; font-weight:560}
.moon-progress span{display:block; font-size:12px; color:color-mix(in srgb, var(--moon) 65%, transparent)}

/* ---------- banners ---------- */
.banner{border-radius:var(--r); padding:14px 16px; font-size:14.5px; font-weight:650; margin-bottom:10px; border:1px solid transparent}
.banner small{display:block; font-weight:450; font-size:12.5px; margin-top:3px; opacity:.85}
.banner.ok{background:var(--ok-soft); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 22%, transparent)}
.banner.crit{background:var(--crit-soft); color:var(--crit); border-color:color-mix(in srgb, var(--crit) 22%, transparent)}
.banner.info{background:var(--accent-soft); color:var(--accent-ink); border-color:color-mix(in srgb, var(--accent) 22%, transparent)}
.banner.warn-box{background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 25%, transparent)}

/* ---------- formulários ---------- */
.form-field{margin-bottom:13px}
.form-field span{display:block; font-size:12px; font-weight:650; letter-spacing:.04em; color:var(--muted); margin-bottom:5px; text-transform:uppercase}
.form-field input,.form-field select,.form-field textarea{
  width:100%; padding:12px 14px; font-size:15px;
  font-family:"Albert Sans", sans-serif;
  border:1.5px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ---------- mensagens (outbox) ---------- */
.msg-card{
  border:1px solid var(--line); border-radius:14px; padding:11px 14px; margin-bottom:9px;
  background:var(--surface2);
  border-left:3px solid var(--gold);
}
.msg-card .meta{display:flex; justify-content:space-between; gap:10px; font-size:11.5px; color:var(--muted); margin-bottom:5px; flex-wrap:wrap}
.msg-card pre{margin:0; white-space:pre-wrap; font-family:inherit; font-size:13px; line-height:1.5}

/* ---------- diversos ---------- */
.lead{color:var(--muted); font-size:14px; margin:2px 0 16px}
.lead b{color:var(--ink)}
.section-title{display:flex; justify-content:space-between; align-items:center; margin:24px 0 10px}
.section-title h2{margin:0; font-size:20px; font-weight:560}
.inline-form{display:inline}
.guide-sec h3{margin:0 0 8px; color:var(--accent-ink)}
.guide-sec ul{margin:0; padding-left:20px}
.guide-sec li{margin-bottom:5px}
.login-box{margin-top:26px}
.logo-official{display:block; width:120px; margin:6px auto 14px}
@media (prefers-color-scheme: dark){
  .logo-official{filter:brightness(1.85) saturate(.7)}
}
.demo-hint{font-size:12px; color:var(--muted); margin-top:16px; text-align:center; line-height:1.7}
.demo-hint b{color:var(--ink)}