/* Dash CC — identidade navy/dourado/Georgia, mobile-first */
:root {
  --navy: #031426; --navy2: #092a49; --deep: #020d19; --ink: #0a2035;
  --paper: #fbf8f2; --cream: #f4eee4; --gold: #d6a463; --pale: #f1cf9c; --bronze: #9c6f35;
  --ok: #1e7d4f; --ok-bg: #e3f2e9; --alerta: #935e10; --alerta-bg: #fdf3df;
  --ruim: #b3261e; --ruim-bg: #fdeceb; --info: #1f4e79; --info-bg: #e8eef5;
  --roxo: #5b3d8f; --roxo-bg: #efe9f7;
  --borda: rgba(10, 32, 53, .12); --sombra: 0 10px 30px -12px rgba(2, 13, 25, .25);
  --curva: cubic-bezier(.16, 1, .3, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: Arial, Helvetica, sans-serif; background: var(--paper); color: var(--ink);
  min-height: 100dvh; -webkit-font-smoothing: antialiased;
}
.serif { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.serif em { font-style: italic; color: var(--gold); }
.oculto { display: none !important; }
.sem-margem { margin: 0 !important; }
button { font-family: inherit; cursor: pointer; }

/* ── Login ── */
.tela-login {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(160deg, #0b2135, var(--navy) 55%, var(--deep));
}
.cartao-login {
  width: 100%; max-width: 360px; background: var(--paper); border-radius: 18px;
  padding: 34px 28px; text-align: center; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
}
.login-logo { width: 72px; height: 72px; object-fit: contain; }
.cartao-login h1 { font-size: 30px; color: var(--navy); margin-top: 10px; }
.login-sub { font-size: 12px; color: rgba(10, 32, 53, .55); letter-spacing: .12em; text-transform: uppercase; margin: 6px 0 24px; }
.cartao-login label { display: block; text-align: left; font-size: 11px; font-weight: bold; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); margin-bottom: 6px; }
.cartao-login input {
  width: 100%; padding: 13px 14px; border: 1px solid var(--borda); border-radius: 10px;
  font-size: 16px; margin-bottom: 16px; background: #fff;
}
.cartao-login input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.login-erro { color: var(--ruim); font-size: 13px; margin-top: 12px; }
.login-dica { font-size: 12px; color: rgba(10, 32, 53, .55); margin-top: 14px; line-height: 1.5; }
.login-conta {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  background: var(--cream); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; font-size: 13px;
}
.link-trocar { background: none; border: none; color: var(--bronze); font-size: 12px; font-weight: bold; text-decoration: underline; padding: 0; }
.campo-codigo { letter-spacing: .5em; text-align: center; font-size: 22px; }
@keyframes etapa-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
#etapa-codigo:not(.oculto) { animation: etapa-in .32s var(--curva); }

/* ── Botões ── */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(120deg, #f1cf9c, #d6a463 55%, #c08c4e); color: var(--navy);
  font-size: 12px; font-weight: bold; letter-spacing: .12em; text-transform: uppercase;
  border: none; border-radius: 10px; padding: 13px 20px; width: 100%;
  box-shadow: 0 10px 24px -10px rgba(214, 164, 99, .6);
}
.btn-gold.compacto { width: auto; padding: 11px 16px; }
.btn-gold:active { transform: translateY(1px); }
.btn-gold:disabled { opacity: .6; }
.btn-fantasma { background: none; border: 1px solid var(--borda); color: var(--ink); border-radius: 8px; padding: 10px 14px; font-size: 12px; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; }
.btn-mini { background: var(--navy); color: var(--pale); border: none; border-radius: 8px; padding: 8px 12px; font-size: 11px; font-weight: bold; letter-spacing: .06em; text-transform: uppercase; }
.btn-mini.claro { background: var(--cream); color: var(--ink); }
.btn-mini.perigo { background: var(--ruim-bg); color: var(--ruim); }
.btn-chip {
  display: inline-flex; align-items: center; gap: 5px; background: var(--cream); color: var(--ink);
  border: 1px solid var(--borda); border-radius: 99px; padding: 7px 12px; font-size: 11.5px;
  font-weight: bold; text-decoration: none; transition: transform .18s var(--curva), background .18s;
}
.btn-chip:active { transform: scale(.96); }
.btn-chip.avanca { background: var(--navy); color: var(--pale); border-color: var(--navy); }
.btn-chip.vira { background: linear-gradient(120deg, #f1cf9c, #d6a463); color: var(--navy); border: none; }
.btn-chip.zap { background: #e8f8ee; color: #0f7a3d; border-color: #bfe6cd; }
.btn-chip.ok { background: var(--ok-bg); color: var(--ok); border-color: #bfe0cc; }

/* ── Shell ── */
.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  background: var(--navy); color: #fff; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top));
}
.topo-logo { width: 38px; height: 38px; object-fit: contain; }
.topo-titulo { flex: 1; line-height: 1.25; }
.topo-titulo strong { display: block; font-size: 15px; letter-spacing: .08em; }
.topo-titulo span { font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.topo .btn-fantasma { border-color: rgba(255, 255, 255, .3); color: #fff; padding: 8px 12px; }

.abas {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex;
  background: var(--deep); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid rgba(255, 255, 255, .08);
}
.abas button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: rgba(255, 255, 255, .55); font-size: 10px;
  font-weight: bold; letter-spacing: .08em; text-transform: uppercase; padding: 10px 4px 12px; position: relative;
}
.abas button .ico { font-size: 18px; line-height: 1; }
.abas button.ativa { color: var(--gold); }
.badge { position: absolute; top: 4px; right: 22%; background: var(--gold); color: var(--navy); border-radius: 99px; font-size: 10px; min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px; }
.conteudo { padding: 18px 16px 96px; max-width: 1240px; margin: 0 auto; }

@media (min-width: 900px) {
  .abas { position: sticky; top: 62px; bottom: auto; background: var(--navy); border-top: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .abas button { flex-direction: row; gap: 8px; font-size: 12px; padding: 13px; }
  .badge { position: static; margin-left: 6px; }
  .conteudo { padding-bottom: 40px; }
}

/* ── Tiles ── */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 22px; }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 16px; box-shadow: var(--sombra); }
.tile .rotulo { font-size: 10px; font-weight: bold; letter-spacing: .14em; text-transform: uppercase; color: rgba(10, 32, 53, .55); }
.tile .valor { font-family: Georgia, serif; font-size: clamp(22px, 5.5vw, 30px); color: var(--navy); margin-top: 6px; }
.tile.destaque { background: var(--navy); border-color: var(--navy); }
.tile.destaque .rotulo { color: var(--gold); }
.tile.destaque .valor { color: var(--pale); }

/* ── Seções ── */
.secao-titulo { font-family: Georgia, serif; font-size: 20px; color: var(--navy); margin: 22px 0 12px; }
.barra-titulo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.barra-titulo .btn-gold { margin-left: auto; }
.dica-arrasta { font-size: 11px; color: rgba(10, 32, 53, .45); font-style: italic; }
.lista { display: flex; flex-direction: column; gap: 10px; }
.item { background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 14px 16px; box-shadow: var(--sombra); }
.item.compacto { padding: 10px 12px; box-shadow: none; }
.item-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.item-nome { font-family: Georgia, serif; font-size: 17px; color: var(--navy); flex: 1; min-width: 120px; }
.item-sub { font-size: 12.5px; color: rgba(10, 32, 53, .6); margin-top: 4px; }
.item-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.valor-forte { font-family: Georgia, serif; font-size: 16px; color: var(--navy); }
.vazio { text-align: center; color: rgba(10, 32, 53, .5); padding: 40px 16px; font-size: 14px; }
.vazio .serif { font-size: 18px; color: var(--ink); display: block; margin-bottom: 6px; }
.barra-acao { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.barra-acao input[type="search"] { flex: 1; min-width: 160px; padding: 11px 14px; border: 1px solid var(--borda); border-radius: 10px; font-size: 15px; background: #fff; }

/* ── KANBAN ── */
.kanban {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84vw; gap: 12px;
  overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.kanban::-webkit-scrollbar { height: 8px; }
.kanban::-webkit-scrollbar-thumb { background: rgba(10, 32, 53, .2); border-radius: 99px; }
@media (min-width: 760px) { .kanban { grid-auto-columns: 300px; } }
@media (min-width: 1100px) { .kanban { grid-auto-columns: minmax(220px, 1fr); overflow-x: visible; } }

.col { scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; }
.col-topo {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  border-radius: 12px 12px 0 0; color: #fff; font-size: 12px; font-weight: bold;
  letter-spacing: .08em; text-transform: uppercase;
}
.col-ico { font-size: 14px; }
.col-nome { flex: 1; }
.col-qtd { background: rgba(255, 255, 255, .25); border-radius: 99px; min-width: 22px; text-align: center; padding: 1px 7px; }
.cor-ouro { background: linear-gradient(120deg, #d6a463, #c08c4e); color: var(--navy); }
.cor-ouro .col-qtd { background: rgba(3, 20, 38, .18); }
.cor-azul { background: linear-gradient(120deg, #2b628f, var(--info)); }
.cor-roxo { background: linear-gradient(120deg, #6f4bab, var(--roxo)); }
.cor-verde { background: linear-gradient(120deg, #2a9c66, var(--ok)); }
.cor-verde-escuro { background: linear-gradient(120deg, #1e7d4f, #145c39); }
.cor-cinza { background: linear-gradient(120deg, #5b6b7c, #43536b); }
.cor-vermelho { background: linear-gradient(120deg, #c8483f, var(--ruim)); }
.col-corpo {
  flex: 1; background: rgba(10, 32, 53, .045); border: 1px solid var(--borda); border-top: none;
  border-radius: 0 0 12px 12px; padding: 10px; display: flex; flex-direction: column; gap: 10px;
  min-height: 120px; transition: background .2s, box-shadow .2s;
}
.col-corpo.sobre { background: rgba(214, 164, 99, .18); box-shadow: inset 0 0 0 2px var(--gold); }
.col-vazia { text-align: center; color: rgba(10, 32, 53, .3); font-size: 20px; padding: 14px 0; }

.card {
  background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 12px;
  box-shadow: 0 4px 14px -8px rgba(2, 13, 25, .3); cursor: grab;
  transition: transform .22s var(--curva), box-shadow .22s;
  animation: card-in .34s var(--curva) both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(2, 13, 25, .45); }
.card.arrastando { opacity: .45; transform: rotate(-1.5deg) scale(.97); cursor: grabbing; }
.card-topo { display: flex; align-items: flex-start; gap: 8px; }
.card-nome { font-family: Georgia, serif; font-size: 16px; color: var(--navy); flex: 1; line-height: 1.25; }
.card-menu { background: none; border: none; color: rgba(10, 32, 53, .4); font-size: 18px; line-height: 1; padding: 0 2px; }
.card-menu:hover { color: var(--bronze); }
.card-sub { font-size: 12px; color: rgba(10, 32, 53, .62); margin-top: 4px; }
.card-msg {
  font-size: 12px; color: rgba(10, 32, 53, .72); background: var(--paper); border-radius: 8px;
  padding: 8px 10px; margin-top: 8px; max-height: 62px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.card-msg.destaque { max-height: none; -webkit-line-clamp: unset; margin-bottom: 6px; }
.card-data { font-size: 10.5px; color: rgba(10, 32, 53, .4); margin-top: 6px; letter-spacing: .06em; text-transform: uppercase; }
.card-valor { font-family: Georgia, serif; font-size: 17px; color: var(--navy); margin-top: 8px; }
.care-tag { font-family: Arial, sans-serif; font-size: 10.5px; color: var(--ok); background: var(--ok-bg); border-radius: 99px; padding: 2px 7px; margin-left: 4px; }
.tag-tipo {
  display: inline-block; background: var(--navy); color: var(--pale); font-size: 10px; font-weight: bold;
  letter-spacing: .08em; text-transform: uppercase; border-radius: 99px; padding: 3px 9px; margin-top: 7px;
}
.card-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }

/* barra de pagamento */
.pg { margin-top: 10px; }
.pg-barra { height: 6px; border-radius: 99px; background: rgba(10, 32, 53, .1); overflow: hidden; }
.pg-barra span { display: block; height: 100%; border-radius: 99px; background: var(--gold); transition: width .7s var(--curva); }
.pg.pago .pg-barra span { background: var(--ok); }
.pg-txt { display: block; font-size: 11px; font-weight: bold; margin-top: 5px; color: rgba(10, 32, 53, .6); }
.pg.pago .pg-txt { color: var(--ok); }
.pg.parcial .pg-txt { color: var(--alerta); }
.pg.aberto .pg-txt { color: rgba(10, 32, 53, .55); }
.pg.no-modal { margin-bottom: 14px; }

.arquivo { margin-top: 22px; }
.arquivo summary { cursor: pointer; font-size: 12px; font-weight: bold; letter-spacing: .1em; text-transform: uppercase; color: rgba(10, 32, 53, .5); padding: 10px 0; }
.arquivo .lista { margin-top: 8px; }

/* ── Modal ── */
.modal-fundo { position: fixed; inset: 0; z-index: 50; background: rgba(2, 13, 25, .55); display: grid; place-items: center; padding: 16px; animation: fundo-in .2s ease; }
@keyframes fundo-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--paper); border-radius: 18px; width: 100%; max-width: 540px;
  max-height: 90dvh; overflow: auto; padding: 22px; animation: modal-in .34s var(--curva);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.modal h2 { font-family: Georgia, serif; font-size: 20px; color: var(--navy); margin-bottom: 8px; }
.modal h2.titulo-hist { margin-top: 22px; }
.modal-sub { font-size: 12.5px; color: rgba(10, 32, 53, .6); margin-bottom: 12px; }
.modal label { display: block; font-size: 10.5px; font-weight: bold; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); margin: 12px 0 5px; }
.modal input, .modal select, .modal textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--borda); border-radius: 10px;
  font-size: 15px; font-family: inherit; background: #fff;
}
.modal input:focus, .modal select:focus, .modal textarea:focus { outline: 2px solid var(--gold); }
.modal .modal-acoes { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.modal .modal-acoes .btn-gold { flex: 1; min-width: 140px; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 520px) { .grade-2 { grid-template-columns: 1fr; } }

/* chips de etapa (radio virando pílula colorida) */
.chips-etapa { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip-etapa {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 9px 14px;
  font-size: 12px; font-weight: bold; color: #fff; border: none; cursor: pointer;
  opacity: .42; filter: saturate(.5); transition: opacity .22s, filter .22s, transform .22s var(--curva);
}
.chip-etapa input { display: none; }
.chip-etapa:hover { opacity: .75; }
.chip-etapa:has(input:checked), .chip-etapa.atual { opacity: 1; filter: none; transform: scale(1.04); box-shadow: 0 8px 20px -10px rgba(2, 13, 25, .6); }
.chip-etapa.cor-ouro { color: var(--navy); }

/* ── Toast ── */
.toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--navy); color: #fff; border-radius: 12px; padding: 12px 20px; font-size: 14px;
  z-index: 90; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .5); max-width: 92vw; text-align: center;
  animation: toast-in .3s var(--curva);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (min-width: 900px) { .toast { bottom: 28px; } }

/* ── Confete / comemoração ── */
.confete-caixa { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; }
.confete-caixa i {
  position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px;
  animation-name: cai; animation-timing-function: cubic-bezier(.3, .6, .5, 1); animation-fill-mode: forwards;
}
@keyframes cai {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(760deg); opacity: .15; }
}
.confete-texto {
  position: absolute; left: 50%; top: 32%; transform: translateX(-50%);
  background: var(--navy); color: var(--pale); font-family: Georgia, serif; font-size: 21px;
  padding: 16px 28px; border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .7);
  white-space: nowrap; animation: selo 2.6s var(--curva) forwards; text-align: center;
}
@keyframes selo {
  0% { opacity: 0; transform: translateX(-50%) scale(.6); }
  14% { opacity: 1; transform: translateX(-50%) scale(1.06); }
  22% { transform: translateX(-50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .confete-caixa { display: none; }
}

/* ── Puxar para atualizar ───────────────────────────────── */
/* impede o "puxar" nativo do Chrome de competir com o nosso */
html, body { overscroll-behavior-y: contain; }

.puxar {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 60px);
  left: 50%;
  z-index: 30;
  transform: translate(-50%, -60px);
  opacity: 0;
  pointer-events: none;
  transition: transform .28s var(--curva), opacity .28s;
}
.puxar.solto { transition: transform .42s var(--curva), opacity .3s; }
.puxar-anel {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  box-shadow: 0 8px 22px -8px rgba(2, 13, 25, .7);
  border: 1px solid rgba(214, 164, 99, .35);
}
.puxar.pronto .puxar-anel { background: var(--gold); color: var(--navy); }
.puxar.girando .puxar-anel {
  animation: puxar-gira .8s linear infinite;
  background: var(--gold);
  color: var(--navy);
}
.puxar.girando svg { opacity: .35; }
@keyframes puxar-gira { to { transform: rotate(360deg); } }

.btn-icone {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  border-radius: 10px;
  width: 38px;
  height: 38px;
  font-size: 17px;
  line-height: 1;
  transition: transform .5s var(--curva), border-color .2s;
}
.btn-icone:hover { border-color: var(--gold); color: var(--gold); }
.btn-icone.girando { animation: puxar-gira .7s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .puxar.girando .puxar-anel, .btn-icone.girando { animation: none; }
}

/* o botao de atualizar so aparece no desktop: no celular o gesto de puxar resolve */
@media (min-width: 900px) {
  .btn-icone { display: grid; place-items: center; }
}