/* Trios — complementa amor-quadrado-app.css (mesmo visual aprovado). */
/* Lateral proporcional à espessura: 6 mm é linha fina; 3 cm aparece grossa. */
.fm-trio-app .fm-aq-app__tile,.fm-aq-app--portal.fm-trio-app .fm-aq-app__tile{box-shadow:var(--edge,1px) var(--edge,1px) 0 var(--aq-edge),0 6px 14px -6px rgba(0,0,0,.35)}
.fm-trio-app .is-wall .fm-aq-app__tile{box-shadow:var(--edge,1px) var(--edge,1px) 0 var(--aq-edge),0 calc(var(--sh,1px)*4) calc(var(--sh,1px)*8) rgba(35,25,15,.26),0 1px 2px rgba(0,0,0,.12)}
.fm-trio-app .fm-aq-app__edbox{box-shadow:var(--edge,1.5px) var(--edge,1.5px) 0 var(--aq-edge),0 12px 30px -10px rgba(0,0,0,.4)}
.fm-trio-app__pack button{cursor:default;opacity:1}
.fm-trio-app .fm-trio-app__pack button:disabled{opacity:1;color:var(--aq-ink)}
.fm-trio-app .fm-trio-app__pack{grid-template-columns:1fr}
.fm-trio-app .fm-trio-app__sizes--1{grid-template-columns:minmax(0,180px)}
.fm-trio-app .fm-trio-app__sizes--2{grid-template-columns:repeat(2,1fr)}
.fm-trio-app .fm-trio-app__sizes--4{grid-template-columns:repeat(4,1fr);gap:6px}
.fm-trio-app .fm-trio-app__sizes--4 .fm-aq-app__size{padding:6px 3px}
.fm-trio-app .fm-trio-app__sizes--4 .fm-aq-app__size b{font-size:12px}
.fm-trio-app .fm-trio-app__sizes--4 .fm-aq-app__pr{font-size:12px}
.fm-trio-app .fm-trio-app__sizes--4 .fm-aq-app__size small{font-size:12px}
.fm-trio-app .fm-trio-app__wrap{display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:0;font-size:13px;color:var(--aq-muted)}
.fm-trio-app__wrap[aria-checked="true"] .fm-aq-app__tg{background:var(--aq-accent)}
.fm-trio-app__wrap[aria-checked="true"] .fm-aq-app__tg::after{transform:translateX(16px)}
.fm-trio-app__message{width:100%;border:1.5px solid var(--aq-line);border-radius:12px;padding:10px 12px;font:inherit;font-size:16px;line-height:1.45;resize:vertical;background:var(--aq-panel);color:var(--aq-ink)}
.fm-trio-app__message:focus{outline:2px solid var(--aq-accent);outline-offset:1px;border-color:var(--aq-accent)}
/* Trio Redondo: quadros, recorte e editor em círculo */
.fm-trio-app--round .fm-aq-app__tile,.fm-trio-app--round .fm-aq-app__photo,.fm-trio-app--round .fm-aq-app__empty,.fm-trio-app--round .fm-aq-app__spin,.fm-trio-app--round .fm-aq-app__edbox{border-radius:50%!important}
.fm-trio-app--round .fm-aq-app__tile.is-selected{outline-offset:3px}
.fm-trio-app--round .fm-aq-app__cchip{left:50%;top:6px;transform:translateX(-50%)}
.fm-trio-app__dot{display:inline-block;border-radius:50%;background:#fff;border:1.5px solid #8f8a82;box-shadow:1px 1px 0 #3a3835;margin:0 1px}
.fm-trio-app--round .fm-aq-app__box{align-items:center}
/* Quadrinhos de mesa (Trio de Quadrinhos, Trio Spotify, Duo Spotify) */
@font-face{font-family:"FCF Reenie";src:url("fonts/reenie-beanie.ttf") format("truetype");font-display:swap}
.fm-trio-app--cards .fm-aq-app__tile{background:#fff}
.fm-trio-app--black .fm-aq-app__tile{background:#161616}
.fm-trio-app--cards .fm-aq-app__tile .fm-aq-app__photo,.fm-trio-app--cards .fm-aq-app__tile .fm-aq-app__empty,.fm-trio-app--cards .fm-aq-app__tile .fm-aq-app__spin{inset:auto;left:5.77%;top:4.81%;width:88.46%;height:73.72%}
.fm-trio-app--black .fm-aq-app__tile .fm-aq-app__photo{background:#2a2826}
.fm-trio-app--black .fm-aq-app__tile .fm-aq-app__empty{background:#2a2826;border-color:#4a4642;color:#a39d94}
.fm-trio-app__cap{position:absolute;left:6%;right:6%;top:89.4%;transform:translateY(-50%);text-align:center;font-family:"FCF Reenie","Reenie Beanie",cursive;color:#2a2a2a;line-height:.9;white-space:nowrap;overflow:hidden;pointer-events:none}
.fm-trio-app__cap.is-two{white-space:normal;max-height:2.1em}
.fm-trio-app__cap.is-empty{color:#a29c93}
.fm-trio-app--black .fm-trio-app__cap{color:#f3f0ea}
.fm-trio-app--black .fm-trio-app__cap.is-empty{color:#a7a29a}
/* 1.0.12: a legenda é clicável na prévia (abre o campo ali mesmo); no computador, o contorno mostra onde clicar. */
.fm-trio-app__cap.is-editable{pointer-events:auto;cursor:text;border-radius:.15em}
@media (hover:hover){.fm-trio-app__cap.is-editable:hover{outline:1.5px dashed rgba(214,40,79,.65);outline-offset:.08em}}
.fm-trio-app__heart{display:inline-block;width:.85em;height:.85em;vertical-align:-.1em;margin-left:.2em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fm-trio-app__cap.is-code{font-size:1.25em}
.fm-trio-app__code{display:block;height:1.9em;width:auto;margin:0 auto;fill:currentColor}
/* A regra geral .fm-aq-app svg (ícones de 20 px) deixava o código do Spotify minúsculo. */
.fm-aq-app .fm-trio-app__code{width:auto;height:1.9em;fill:currentColor;stroke:none}
.fm-trio-app__capedit{display:flex;gap:8px;align-items:center;margin:8px 0 2px}
.fm-trio-app__capedit input{flex:1;min-width:0;border:1.5px solid var(--aq-line);border-radius:12px;padding:9px 12px;font:inherit;font-size:16px;background:var(--aq-panel);color:var(--aq-ink)}
.fm-trio-app__capedit input:focus{outline:2px solid var(--aq-accent);outline-offset:1px;border-color:var(--aq-accent)}
.fm-aq-app .fm-trio-app__heartbtn{display:flex;align-items:center;gap:4px;border:1.5px solid var(--aq-line);border-radius:12px;background:var(--aq-panel);padding:8px 10px;font-size:13px;white-space:nowrap}
.fm-aq-app .fm-trio-app__heartbtn[aria-pressed="true"]{border-color:var(--aq-accent);background:var(--aq-soft);color:var(--aq-accent)}
.fm-trio-app__heartbtn .fm-trio-app__heart{margin:0;width:16px;height:16px}
/* Cena "Na mesa": tampo de madeira, sem sofá nem rodapé */
.fm-aq-app__scene.is-table .fm-aq-app__sofa{display:none}
.fm-aq-app__scene.is-table .fm-aq-app__floor{background:linear-gradient(180deg,#d9c4a5 0,#c8ae8a 14%,#b99d78 100%)}
.fm-aq-app__scene.is-table .fm-aq-app__floor::before{display:none}
.fm-aq-app__scene.is-table .fm-aq-app__walllabel{color:var(--aq-ink);opacity:1}
/* ==========================================================================
   Rodada 4 (P9): só os trios. As regras comuns aos trios e às coleções estão no fim de amor-quadrado-app.css.
   O trio-app.js não mudou: ele é cópia exata do modelo congelado admin-models/v6/trio-app.js, e o teste
   trio-export-bounds.cjs exige essa igualdade. Por isso, aqui só entra o que se resolve com CSS.
   ========================================================================== */
/* Prazo canônico (versão curta) na Revisão. Enquanto o JS dos trios não pode mudar, o texto vem do CSS
   (o leitor de tela lê o conteúdo gerado). Quando a nota trouxer a classe --review (proposta do JS), esta regra sai sozinha. */
.fm-trio-app [data-step="2"] .fm-aq-app__note:not(.fm-aq-app__note--review)::after{content:" Prazo já inclui 3 dias úteis de confecção."}
.fm-trio-app [data-step="2"] .fm-aq-app__note{line-height:1.4;text-wrap:balance}
/* Alvos de 44 px (R11): legenda e coração dos quadrinhos, no editor */
.fm-trio-app .fm-trio-app__capedit input{min-height:46px}
.fm-trio-app .fm-trio-app__heartbtn{min-height:46px}
/* Revisão sem a lista de pendências: a margem da lista vazia não ocupa a tela */
.fm-trio-app .fm-aq-app__issues:empty{margin:0}
/* Celular baixo (até 699 px de altura): corpo do painel e nota um pouco mais justos (a grade da Revisão está no bloco comum) */
@media (max-width:899px) and (max-height:699px){
  .fm-trio-app .fm-aq-app__body{padding-top:8px;padding-bottom:10px}
  .fm-trio-app [data-step="2"] .fm-aq-app__note{margin-top:6px;font-size:12px}
}
/* Rótulo visível do campo da legenda e da música (usado pela proposta do JS; sem o elemento, não faz nada) */
.fm-trio-app .fm-trio-app__caplabel{display:block;margin:8px 0 0;font-size:12.5px;font-weight:500;color:var(--aq-muted)}
.fm-trio-app .fm-trio-app__caplabel+.fm-trio-app__capedit{margin-top:4px}