/* ============================================================
   CASA — Design System
   Superfícies em camadas · tipografia calibrada para dark
   motion com mola · ícones de traço (nunca emoji como ícone)
   ============================================================ */
:root {
  /* superfícies: elevação por luz, não por sombra pesada */
  --preto: #08090B;
  --carvao: #0D0F13;
  --grafite: #131519;
  --grafite-2: #191C22;
  --grafite-3: #21252C;
  --linha: rgba(255,255,255,.07);
  --linha-forte: rgba(255,255,255,.12);

  /* tinta */
  --branco: #F7F6F3;
  --texto: #E7E6E2;
  --texto-2: #8B919C;
  --texto-3: #626873;

  /* marca */
  --ouro: #C9A227;
  --ouro-claro: #E8CB63;
  --ouro-suave: rgba(201,162,39,.13);

  /* estados */
  --verde: #3FA46A;
  --verde-claro: #6FD39A;
  --vermelho: #D9534F;
  --vermelho-claro: #F09490;
  --azul: #5B87D6;
  --azul-claro: #93B4EE;
  --roxo: #9070D8;

  /* forma */
  --raio: 14px;
  --raio-sm: 10px;
  --raio-lg: 20px;
  --grad-ouro: linear-gradient(135deg, #E8CB63, #C9A227 60%, #A5811A);

  /* profundidade */
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --sombra-alta: 0 2px 4px rgba(0,0,0,.4), 0 20px 48px -16px rgba(0,0,0,.8);
  --brilho-ouro: 0 0 0 1px rgba(201,162,39,.35), 0 8px 28px -10px rgba(201,162,39,.35);

  /* movimento */
  --mola: cubic-bezier(.22,1,.36,1);
  --suave: cubic-bezier(.4,0,.2,1);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--preto);
  color: var(--texto);
  font-size: 14.5px; line-height: 1.55; min-height: 100dvh;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02','cv03','cv04','ss01';
}
h1,h2,h3,h4 { font-family: 'Outfit','Inter',sans-serif; letter-spacing: -.015em; color: var(--branco); font-weight: 700; }
h1 { font-size: 25px; } h2 { font-size: 19px; } h3 { font-size: 16px; } h4 { font-size: 14px; }
a { color: var(--ouro-claro); text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 14.5px; color: var(--texto); }
img, svg, video { max-width: 100%; }
::selection { background: rgba(201,162,39,.3); }
svg.ico { flex-shrink: 0; vertical-align: -.18em; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--raio-sm); font-weight: 600; font-size: 13.5px;
  transition: background .16s var(--suave), border-color .16s, transform .12s var(--mola), box-shadow .16s;
  user-select: none; white-space: nowrap; letter-spacing: -.005em;
}
.btn:active { transform: scale(.975); }
.btn-ouro { background: var(--grad-ouro); color: #16120A; box-shadow: 0 1px 2px rgba(0,0,0,.3); font-weight: 700; }
.btn-ouro:hover { filter: brightness(1.07); box-shadow: 0 4px 16px -4px rgba(201,162,39,.5); }
.btn-ghost { background: var(--grafite-2); color: var(--texto); border: 1px solid var(--linha); }
.btn-ghost:hover { background: var(--grafite-3); border-color: var(--linha-forte); }
.btn-danger { background: rgba(217,83,79,.12); color: var(--vermelho-claro); border: 1px solid rgba(217,83,79,.2); }
.btn-danger:hover { background: rgba(217,83,79,.2); }
.btn-success { background: rgba(63,164,106,.13); color: var(--verde-claro); border: 1px solid rgba(63,164,106,.22); }
.btn-sm { padding: 6.5px 12px; font-size: 12.5px; border-radius: 9px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Cards ---------- */
.card {
  background: var(--grafite); border-radius: var(--raio); padding: 20px;
  border: 1px solid var(--linha); box-shadow: var(--sombra);
}
.card-hover { transition: transform .22s var(--mola), border-color .2s, box-shadow .2s; cursor: pointer; }
.card-hover:hover { transform: translateY(-2px); border-color: rgba(201,162,39,.32); box-shadow: var(--sombra-alta); }

/* ---------- Formulários ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; font-size: 11.5px; color: var(--texto-2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .07em; }
.input, .field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--linha-forte); border-radius: var(--raio-sm);
  background: var(--carvao); outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255,255,255,.18); }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(201,162,39,.16); background: var(--grafite);
}
.field textarea { resize: vertical; min-height: 72px; line-height: 1.6; }
.field select option { background: var(--grafite); }
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { color-scheme: dark; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3.5px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: -.005em; }
.badge-ouro { background: var(--ouro-suave); color: var(--ouro-claro); }
.badge-verde { background: rgba(63,164,106,.14); color: var(--verde-claro); }
.badge-vermelho { background: rgba(217,83,79,.14); color: var(--vermelho-claro); }
.badge-azul { background: rgba(91,135,214,.15); color: var(--azul-claro); }
.badge-roxo { background: rgba(144,112,216,.15); color: #BFA9F0; }
.badge-cinza { background: rgba(255,255,255,.06); color: var(--texto-2); }

/* ---------- Tabelas ---------- */
.tabela-wrap { overflow-x: auto; border-radius: var(--raio); }
table.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th { text-align: left; padding: 10px 16px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); background: var(--carvao); border-bottom: 1px solid var(--linha); white-space: nowrap; font-weight: 700; }
.tabela td { padding: 11px 16px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: none; }
.tabela tbody tr { transition: background .12s; }
.tabela tbody tr:hover td { background: rgba(255,255,255,.025); }
.num-tab, .tabela td b { font-variant-numeric: tabular-nums; }

/* ---------- Avatares / progresso ---------- */
.avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: #16120A; flex-shrink: 0; font-family: 'Outfit'; background: var(--grad-ouro); letter-spacing: -.02em; }
.prog { height: 6px; background: rgba(255,255,255,.07); border-radius: 99px; overflow: hidden; }
.prog > div { height: 100%; border-radius: 99px; background: var(--grad-ouro); transition: width .9s var(--mola); }

/* ---------- Status: ponto + texto (nunca emoji) ---------- */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot-verde { background: var(--verde-claro); box-shadow: 0 0 0 3px rgba(63,164,106,.14); }
.dot-ouro { background: var(--ouro-claro); box-shadow: 0 0 0 3px rgba(201,162,39,.14); }
.dot-vermelho { background: var(--vermelho-claro); box-shadow: 0 0 0 3px rgba(217,83,79,.14); }
.dot-cinza { background: var(--texto-3); box-shadow: 0 0 0 3px rgba(255,255,255,.05); }
.st { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }

/* ---------- Seções ---------- */
.secao { display: flex; align-items: center; gap: 12px; margin: 30px 0 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--texto-3); }
.secao::after { content: ''; flex: 1; height: 1px; background: var(--linha); }
.secao + .sub { color: var(--texto-2); font-size: 13px; margin: -6px 0 14px; }

/* ---------- Lista de ações ---------- */
.acoes-lista { display: flex; flex-direction: column; }
.acao { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--linha); font-size: 13.5px; }
.acao:last-child { border-bottom: none; }
.acao .faz { margin-left: auto; flex-shrink: 0; }
.acao .faz a, .acao .faz button { font-size: 12.5px; font-weight: 600; color: var(--ouro-claro); padding: 5px 10px; border-radius: 8px; transition: background .15s; }
.acao .faz a:hover, .acao .faz button:hover { background: var(--ouro-suave); }

/* ---------- Modal / toast ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(4,5,7,.7); backdrop-filter: blur(10px) saturate(1.2);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; animation: fadeIn .2s var(--suave); }
.modal { background: var(--grafite); border: 1px solid var(--linha-forte); border-radius: var(--raio-lg); width: 100%; max-width: 580px;
  max-height: 92dvh; overflow-y: auto; padding: 24px; box-shadow: var(--sombra-alta);
  animation: modalIn .32s var(--mola); }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.97); } }
.modal h3 { font-size: 17px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal .fechar { font-size: 20px; color: var(--texto-3); padding: 2px 9px; border-radius: 8px; line-height: 1.4; transition: all .15s; }
.modal .fechar:hover { background: var(--grafite-3); color: var(--texto); }
@keyframes fadeIn { from { opacity: 0 } }
@keyframes slideUp { from { opacity: 0; transform: translateY(22px) } }
#toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); }
.toast { padding: 12px 16px; border-radius: 12px; font-weight: 600; font-size: 13.5px; box-shadow: var(--sombra-alta);
  animation: slideUp .32s var(--mola); display: flex; gap: 10px; align-items: center; border: 1px solid var(--linha-forte); backdrop-filter: blur(8px); }
.toast-ok { background: rgba(24,42,32,.96); color: #9EE0BB; }
.toast-erro { background: rgba(46,26,25,.96); color: #F0A9A6; }

/* ---------- Utilitários ---------- */
.flex { display: flex; align-items: center; gap: 11px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 3px; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--texto-2); font-size: 12.5px; }
.mt { margin-top: 14px; } .mb { margin-bottom: 14px; }
.grid { display: grid; gap: 14px; }
.center { text-align: center; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vazio { text-align: center; padding: 42px 20px; color: var(--texto-2); font-size: 13.5px; }
.vazio .emoji { font-size: 34px; display: block; margin-bottom: 10px; opacity: .5; }
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 3px 2px 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { padding: 8px 15px; border-radius: 99px; background: var(--grafite-2); border: 1px solid var(--linha);
  font-weight: 600; font-size: 13px; white-space: nowrap; color: var(--texto-2); transition: all .18s var(--mola); }
.chip:hover { border-color: var(--linha-forte); color: var(--texto); }
.chip.ativo { background: var(--grad-ouro); color: #16120A; border-color: transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2A2F38; border-radius: 99px; border: 2px solid var(--preto); }
::-webkit-scrollbar-thumb:hover { background: #363C47; }
::-webkit-scrollbar-track { background: transparent; }