/* Peças de movimento do visual novo (5.9): ver telas/comum/pecas.js. Cores da marca; nada segue o mouse. */

/* contador que vira */
.pc-contador { display: flex; gap: 6px; padding: 10px; border-radius: 18px; background: linear-gradient(180deg, #2A64B8, #123F80);
  box-shadow: 0 0 0 2px rgba(154,202,238,.35), 0 18px 40px rgba(0,0,0,.35), 0 0 44px rgba(46,155,230,.3); flex: none; }
.pc-flap { position: relative; width: 52px; height: 72px; perspective: 360px; font-size: 54px; font-weight: 800; color: #0F2A40; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; }
.pc-meia { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: linear-gradient(180deg, #FFFFFF, #E9EEF4); }
.pc-meia span { position: absolute; left: 0; right: 0; height: 72px; line-height: 72px; text-align: center; }
.pc-cima { top: 0; border-radius: 8px 8px 0 0; }
.pc-baixo { bottom: 0; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #E4EAF1, #FFFFFF); }
.pc-baixo span { top: -36px; }
.pc-vira { transform-origin: 50% 100%; z-index: 2; backface-visibility: hidden; }
.pc-cai { transform-origin: 50% 0; z-index: 2; backface-visibility: hidden; }
.pc-flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(15,42,64,.35); z-index: 3; }

/* peças do mês que viram */
.pc-tabuleiro { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; perspective: 700px; }
.pc-peca { position: relative; width: 96px; height: 70px; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,1.4,.5,1); }
.pc-peca > .pc-frente, .pc-peca > .pc-verso { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; display: grid; place-items: center; text-align: center;
  font-size: 12px; font-weight: 650; padding: 6px; line-height: 1.2; overflow-wrap: anywhere; }
.pc-frente { background: linear-gradient(150deg, #2E7FD0, #0B4E96); color: rgba(255,255,255,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px rgba(4,30,70,.3); }
.pc-verso { background: #fff; color: #0F2A40; transform: rotateY(180deg); box-shadow: 0 0 0 2px #9ACAEE, 0 8px 18px rgba(4,30,70,.2); }
.pc-verso i { display: block; font-style: normal; font-size: 18px; color: #1F9D62; line-height: 1; margin-bottom: 2px; }
.pc-peca.pc-chegou { transform: rotateY(180deg); }
/* 5.9 completa: quatro situações (o ✓ verde é só do aceito) e a peça que falta vira atalho */
.pc-frente small { display: block; margin-top: 3px; font-size: 10px; font-weight: 600; opacity: .9; }
.pc-frente i { display: block; font-style: normal; font-size: 15px; line-height: 1; margin-bottom: 2px; }
a.pc-frente { text-decoration: none; cursor: pointer; transition: transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s; }
a.pc-frente:hover, a.pc-frente:focus-visible { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 12px 22px rgba(4,30,70,.4); }
a.pc-frente:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pc-peca.pc-gira { animation: pc-giro 1.2s cubic-bezier(.3,1.2,.5,1); }
@keyframes pc-giro { to { transform: rotateY(360deg); } }
.pc-verso.pc-verso-chegou { background: linear-gradient(150deg, #E6F1FB, #C9DFF3); }
.pc-verso.pc-verso-chegou i { color: #0075BD; }
.pc-recusado .pc-frente { background: linear-gradient(150deg, #F7B04C, #E08A1E); color: #fff; }
.pc-resolvido .pc-frente { background: linear-gradient(150deg, #EEF2F6, #D9E1E9); color: #3E4F5E; }
.pc-previsao { display: block; margin-top: 2px; font-size: 12px; color: #9ACAEE; }
.pc-verso small { display: block; font-size: 10.5px; font-weight: 600; color: #5E6E7E; }

/* linha do tempo luminosa (fundo escuro) */
.pc-tempo { position: relative; padding-left: 34px; }
.pc-tempo::before { content: ""; position: absolute; left: 12px; top: 10px; bottom: 10px; width: 2px; background: rgba(154,202,238,.25); }
.pc-trilho { position: absolute; left: 12px; top: 10px; width: 2px; height: 0; background: linear-gradient(180deg, #9ACAEE, #2E9BE6);
  box-shadow: 0 0 12px #2E9BE6; transition: height 1.6s cubic-bezier(.2,.8,.2,1); }
.pc-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pc-passo { position: relative; font-size: 13.5px; color: rgba(255,255,255,.55); transition: color .4s; }
.pc-passo b { display: block; font-size: 15px; font-weight: 650; }
.pc-passo::before { content: ""; position: absolute; left: -29px; top: 2px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(154,202,238,.4);
  background: #0A3463; transition: all .4s; }
.pc-passo.pc-aceso { color: #fff; }
.pc-passo.pc-aceso[data-estado="feita"]::before { background: #2E9BE6; border-color: #9ACAEE; box-shadow: 0 0 12px #2E9BE6; }
.pc-passo.pc-aceso[data-estado="atual"]::before { border-color: #fff; animation: pc-pulsa 1.6s ease-in-out infinite; }
@keyframes pc-pulsa { 50% { box-shadow: 0 0 0 7px rgba(46,155,230,.25); } }

/* pasta de vidro que recebe (fundo escuro) */
.pc-vidro { position: relative; display: grid; place-items: center; height: 220px; perspective: 900px; }
.pc-pasta { position: relative; width: 190px; height: 132px; margin-top: 40px; }
.pc-fundo { position: absolute; inset: 0; border-radius: 6px 14px 14px 14px; background: linear-gradient(180deg, rgba(46,155,230,.45), rgba(0,90,180,.55)); border: 1px solid rgba(154,202,238,.6); }
.pc-fundo::before { content: ""; position: absolute; left: -1px; top: -20px; width: 76px; height: 22px; border-radius: 10px 14px 0 0;
  background: rgba(46,155,230,.45); border: 1px solid rgba(154,202,238,.6); border-bottom: 0; }
.pc-frente-vidro { position: absolute; left: -6px; right: -6px; bottom: -4px; height: 98px; border-radius: 14px; z-index: 5; color: #fff;
  background: linear-gradient(170deg, rgba(90,170,240,.55), rgba(8,70,160,.78)); border: 1px solid rgba(190,225,250,.85);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transform: rotateX(16deg); transform-origin: 50% 100%;
  box-shadow: 0 0 30px rgba(46,155,230,.55), inset 0 1px 0 rgba(255,255,255,.6); display: grid; place-items: center; text-align: center; }
.pc-frente-vidro b { display: block; font-size: 30px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(4,30,70,.55); }
.pc-frente-vidro small { display: block; font-size: 12px; opacity: .92; text-shadow: 0 1px 6px rgba(4,30,70,.55); }
.pc-folha { position: absolute; left: 50%; width: 104px; height: 132px; margin-left: -52px; top: -150px; border-radius: 8px; z-index: 3; opacity: 0;
  background: linear-gradient(180deg, #fff, #E8F0F8); box-shadow: 0 8px 20px rgba(0,0,0,.25); padding: 12px; }
.pc-folha::before { content: ""; display: block; height: 7px; width: 60%; border-radius: 4px; background: #9ACAEE; box-shadow: 0 14px 0 #DCE6F0, 0 27px 0 #DCE6F0, 0 40px 0 #DCE6F0; }
.pc-chao { position: absolute; bottom: 10px; width: 240px; height: 24px; border-radius: 50%; background: radial-gradient(closest-side, rgba(46,155,230,.6), transparent); }

@media (prefers-reduced-motion: reduce) { .pc-peca, .pc-trilho, .pc-passo, .pc-passo::before { transition: none; } .pc-passo.pc-aceso[data-estado="atual"]::before { animation: none; } }
html.modo-calmo .pc-peca, html.modo-calmo .pc-trilho { transition: none; }
html.modo-calmo .pc-passo.pc-aceso[data-estado="atual"]::before { animation: none; }