/* E-Feito — Finanças: cartas das missões e ticket (v0.8.0) */

/* ===== mesa de jogo (fundo das cartas) ===== */
.efin-mesa {
  background:
    radial-gradient(900px 420px at 30% -10%, #0f1b17, transparent 70%),
    #070d0b;
  border-color: rgba(255,255,255,.06);
}

/* o Hoje passa a caber 3 cartas lado a lado e nunca estoura a largura */
.efin-hoje { grid-template-columns: minmax(0, 1fr); max-width: 760px; width: 100%; }
.efin-main > .efin-hoje { grid-column: 1 / -1; }

/* ===== mão de cartas ===== */
.efin-mao { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px 18px; justify-items: center; margin: 14px 0 6px; }
.efin-carta-col { width: 100%; max-width: 250px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.efin-carta-acoes { justify-content: center; margin-top: 2px; }

.efin-carta {
  --cor: #2f8f5b;
  position: relative; width: 100%; aspect-ratio: 63 / 88; box-sizing: border-box;
  background: #14171a; border-radius: 14px; padding: 8px;
  box-shadow: 0 16px 28px -14px #000d, 0 0 0 1px #000;
  font-family: 'Inter', system-ui, sans-serif; color: #15181b;
  transition: transform .18s ease, box-shadow .18s ease;
}
.efin-carta:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: 0 22px 34px -14px #000e, 0 0 0 1px #000; }
.efin-carta--treino { --cor: #2f8f5b; }
.efin-carta--cigarro { --cor: #7b8087; }
.efin-carta--cerveja { --cor: #d79a2b; }
.efin-carta--ifood { --cor: #d0432c; }
.efin-carta--mercado { --cor: #2a9d8f; }
.efin-carta--conveniencia { --cor: #5a6ee0; }
.efin-carta--bar { --cor: #b44fd0; }
.efin-carta--cofre { --cor: #c9a227; }
.efin-carta--contas { --cor: #3aa6c9; }
.efin-carta--limites { --cor: #8fbf3a; }
.efin-carta--rara { --cor: #e6b422; }
/* rara: moldura dourada brilhante; trancada fica apagada, com cadeado */
.efin-carta--rara .efin-carta-miolo { background: linear-gradient(135deg, #f6e08a, #d9a92a 45%, #f3d56a 70%, #b98a14); box-shadow: inset 0 0 18px #fff6; }
.efin-rara-cadeado { display: none !important; }   /* o cadeado vem por cima de qualquer arte (desenho ou imagem) */
.efin-carta--trancada .efin-carta-arte > svg, .efin-carta--trancada .efin-carta-arte > img { filter: grayscale(.8) brightness(.7); }
.efin-carta--trancada .efin-carta-arte::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M32 46V34a18 18 0 0 1 36 0v12' fill='none' stroke='%23e6b422' stroke-width='8' stroke-linecap='round'/%3E%3Crect x='22' y='44' width='56' height='42' rx='9' fill='%2314110a' stroke='%23e6b422' stroke-width='5'/%3E%3Ccircle cx='50' cy='62' r='6.5' fill='%23e6b422'/%3E%3Crect x='47' y='65' width='6' height='12' rx='2' fill='%23e6b422'/%3E%3C/svg%3E") center / auto 64% no-repeat; filter: drop-shadow(0 2px 6px #000a); }
.efin-carta--trancada .efin-carta-miolo { filter: saturate(.6) brightness(.9); }

.efin-carta-miolo {
  height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 5px; min-height: 0;
  padding: 6px; border-radius: 8px; border: 2px solid var(--cor);
  background: linear-gradient(180deg, #dcd9d1, #c9c6bd);
}
.efin-carta-topo, .efin-carta-tipo {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: #f4f2ec; border-radius: 6px; padding: 3px 7px; box-shadow: inset 0 0 0 1px #0002;
}
.efin-carta-nome { font-weight: 700; font-size: 15px; letter-spacing: -.01em; line-height: 1.15; }
.efin-carta-custo { background: var(--cor); color: #fff; border-radius: 99px; padding: 2px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.efin-carta-arte { position: relative; flex: 0 0 auto; height: 38%; border-radius: 5px; overflow: hidden; background: #0b0f0e; box-shadow: inset 0 0 0 1px #0007, 0 0 0 1px #0002; }
.efin-carta-svg, .efin-carta-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.efin-carta-tipo { font-size: 11.5px; font-weight: 500; padding: 2px 7px; }
.efin-carta-gema { width: 11px; height: 11px; border-radius: 50%; background: var(--cor); box-shadow: 0 0 0 2px #f4f2ec, 0 0 0 3px #0006; }
.efin-carta-texto { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: #f8f6f1; border-radius: 6px; padding: 7px 8px 6px; box-shadow: inset 0 0 0 1px #0002; }
.efin-carta-texto p { margin: 0 0 4px; font-size: 12.5px; line-height: 1.32; color: #1d2024; }
.efin-carta-texto small { font-size: 11px; line-height: 1.35; color: #50555c; }
.efin-carta-linha { margin-top: auto; padding-top: 5px; border-top: 1px solid #0002; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11.5px; font-weight: 600; color: #1d2024; }
.efin-carta-cont { background: #14171a; color: #fff; border-radius: 6px; padding: 1px 9px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; font-weight: 500; }
.efin-carta-cont--ok { background: #2f8f5b; }
.efin-carta-cont--erro { background: #c4452f; }
.efin-carta--estourou .efin-carta-miolo { border-color: #c4452f; }

/* ===== ticket (cupom térmico) ===== */

.efin-ticket-palco { min-width: 0; overflow-x: auto; margin: 14px 0 4px; padding: 18px 0 6px; display: flex; justify-content: center; background: radial-gradient(500px 260px at 50% 0, #0f1b17, transparent 70%), #070d0b; border-radius: 10px; }
.efin-ticket {
  --z: 7px;
  width: 302px; max-width: 100%; box-sizing: border-box; background: #ececE7; color: #22262b;
  font: 400 13px/1.45 'Courier Prime', 'Courier New', monospace; padding: 18px 18px 30px;
  box-shadow: 0 18px 30px -12px #000a;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--z) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--z) 100%;
}
.efin-ticket * { box-sizing: border-box; }
.efin-t-centro { text-align: center; }
.efin-t-marca { font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: .12em; }
.efin-t-sub { color: #5b6068; font-size: 12px; }
.efin-t-tr { border: 0; border-top: 2px dashed #9a9a94; margin: 10px 0; }
.efin-t-linha { display: flex; justify-content: space-between; gap: 10px; }
.efin-t-linha b { white-space: nowrap; }
/* ticket do treino */
.efin-t-v--m { font-size: 26px; }
.efin-t-ex { margin: 0 0 8px; }
.efin-t-ex--p > .efin-t-linha { font-weight: 700; }
.efin-t-ex .efin-t-barra { color: #5b6068; margin: 2px 0 0; }
.efin-t-grande { margin: 6px 0 2px; text-align: center; }
.efin-t-v { display: block; font-weight: 700; font-size: 38px; line-height: 1.1; }
.efin-t-r { display: block; font-size: 12px; color: #5b6068; }
.efin-t-sec { font-weight: 700; margin: 2px 0 4px; }
.efin-t-barra { white-space: pre; font-size: 13px; margin-bottom: 3px; }
.efin-t-alerta { background: #22262b; color: #ececE7; padding: 6px 8px; margin: 6px 0; font-weight: 700; }
.efin-t-cod { display: flex; gap: 2px; height: 34px; margin: 12px 10px 4px; align-items: stretch; }
.efin-t-cod i { display: block; background: #22262b; }
.efin-t-rodape { text-align: center; font-size: 12px; margin-top: 4px; }

/* ===== impressão: só o ticket, em 80 mm (o JS põe uma cópia dele direto no <body>) ===== */
#efin-print-ticket { display: none; }
@media print {
  @page { size: 80mm 297mm; margin: 0; }
  body.efin-imp-ticket { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body.efin-imp-ticket > *:not(#efin-print-ticket) { display: none !important; }
  body.efin-imp-ticket #efin-print-ticket { display: block !important; width: 80mm; }
  body.efin-imp-ticket #efin-print-ticket .efin-ticket { width: 80mm; max-width: none; box-shadow: none; -webkit-mask: none; mask: none; padding: 4mm 4mm 8mm; background: #fff; color: #000; }
}

@media (prefers-reduced-motion: reduce) { .efin-carta, .efin-carta:hover { transition: none; transform: none; } }

/* ===== bloco "Saldo hoje / Livre para gastar" ===== */
.efin-hoje-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 6px 0 10px; }
.efin-hoje-duo > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.efin-hoje-duo .efin-hoje-rot { margin: 0; }
.efin-hoje-duo .efin-hoje-val { display: block; margin: 0; font-size: 30px; }
.efin-hoje-v2 { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 30px; font-weight: 500; letter-spacing: -.03em; color: var(--ef-smoke, #9aa3ad); }
@media (max-width: 380px) { .efin-hoje-duo .efin-hoje-val, .efin-hoje-v2 { font-size: 24px; } }

/* mapa de calor dos horários */
.efin-calor { width: 100%; height: auto; display: block; margin: 6px 0; }
.efin-c-cel { fill: #ffffff14; }
.efin-c-cel--on { fill: #e8b84a; }

/* ===== v0.9.0: tela cheia, colunas automáticas, cartões de ação fechados ===== */
.efin-shell:not(.efin-shell--estreito) { max-width: none; width: 100%; padding: 12px 16px 64px; }
@media (min-width: 700px) { .efin-shell:not(.efin-shell--estreito) { padding: 12px 28px 64px; } }
.efin-shell:not(.efin-shell--estreito) .efin-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; align-items: start; }
@media (min-width: 1700px) { .efin-shell:not(.efin-shell--estreito) .efin-main { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); } }
.efin-shell:not(.efin-shell--estreito) .efin-card,
.efin-shell:not(.efin-shell--estreito) .efin-mescard,
.efin-shell:not(.efin-shell--estreito) .efin-hero,
.efin-shell:not(.efin-shell--estreito) .efin-stats,
.efin-shell:not(.efin-shell--estreito) .efin-mes { margin: 0; }
.efin-shell:not(.efin-shell--estreito) .efin-main > .efin-aviso,
.efin-shell:not(.efin-shell--estreito) .efin-main > .efin-mes,
.efin-shell:not(.efin-shell--estreito) .efin-main > .efin-stats,
.efin-shell:not(.efin-shell--estreito) .efin-main > .efin-ano-grid,
.efin-shell:not(.efin-shell--estreito) .efin-main .efin-cheio,
.efin-shell:not(.efin-shell--estreito) .efin-main .efin-span { grid-column: 1 / -1; }
/* a tela Hoje deixa seus cartões direto na grade da página */
.efin-main > .efin-hoje { display: contents; max-width: none; width: auto; }
.efin-hoje .efin-card { margin: 0; }
/* galeria do Detalhes: mesma grade, sem colunas de texto */
.efin-shell:not(.efin-shell--estreito) .efin-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; align-items: start; column-count: auto; columns: auto; }
.efin-shell:not(.efin-shell--estreito) .efin-galeria > .efin-card { margin: 0; }
/* faixa de cima da Hoje */
.efin-hoje-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 24px; }
.efin-hoje-trio > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.efin-hoje-trio .efin-hoje-val, .efin-hoje-trio .efin-hoje-v2 { display: block; margin: 0; font-size: clamp(22px, 2.6vw, 32px); overflow-wrap: anywhere; line-height: 1.2; }
.efin-hoje-trio small { display: block; color: #9a9a9a; font-size: 12px; }
.efin-hoje-dia { margin: 14px 0 0; color: #9a9a9a; font-size: 13px; }
.efin-como { margin-top: 8px; }
.efin-como summary { cursor: pointer; color: #9a9a9a; font-size: 13px; }
.efin-como p { margin: 8px 0 0; }
/* cartões que abrem e fecham: título e frase de apoio, sem pular a altura */
details.efin-card.efin-detalhe > summary { min-height: 44px; }
.efin-mao { gap: 20px 14px; }

/* meta da dívida (longo prazo) */
.efin-meta-divida .efin-barra--meta { height: 12px; margin: 6px 0 10px; }
.efin-meta-val { font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 4px; }
.efin-meta-val small { font-size: 13px; color: #9a9a9a; font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0; }

/* v0.10.0: no celular as cartas viram uma fileira que desliza para o lado (a Hoje deixa de ter 6.000 px de altura).
   Cada carta ocupa quase a largura da tela e a próxima aparece pela borda, mostrando que dá para deslizar. */
@media (max-width: 700px) {
  .efin-mao { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; justify-content: flex-start; align-items: flex-start;
    padding: 4px 2px 14px; margin-left: -4px; margin-right: -4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .efin-mao > .efin-carta-col { flex: 0 0 min(280px, 80%); scroll-snap-align: center; }
  .efin-mao:focus-visible { outline: 2px solid #3399ff; outline-offset: 2px; border-radius: 12px; }
}
@media (prefers-reduced-motion: no-preference) { .efin-mao { scroll-behavior: smooth; } }