/* Card de criativo (A v3, aprovado 2026-10-12). Régua fixa: controles de 28px a 8px da
   borda da peça, ícones de 14px, métricas 2×2 em células de 28px, faixa de dados de 6,75rem.
   O motor do mosaico (app.js) conta com essa altura: mudou aqui, muda GALLERY_FOOT_REM. */
:root{
  --cc-cell:#29221E;--cc-good-soft:#1C3324;--cc-bad-soft:#3A1E26;--cc-warn-soft:#3A2E17;
  --cc-glass:rgba(31,26,24,.9);--cc-on-seal:#1D1B18;
  --cc-shadow:0 1px 2px rgba(0,0,0,.4);--cc-shadow-hover:0 12px 28px -10px rgba(0,0,0,.7);
}
:root[data-theme="light"]{
  --cc-cell:#F1EBE1;--cc-good-soft:#E3EEDF;--cc-bad-soft:#F6E1E2;--cc-warn-soft:#F6ECD6;
  --cc-glass:rgba(252,249,243,.94);--cc-on-seal:#FFFFFF;
  --cc-shadow:0 1px 2px rgba(33,25,21,.06);--cc-shadow-hover:0 10px 24px -10px rgba(33,25,21,.28);
}

.cc{--cc-inset:0.5rem;--cc-ctl:1.75rem;position:relative;display:flex;flex-direction:column;box-sizing:border-box;border:1px solid var(--c-line);border-radius:var(--r-outer);background:var(--c-surface);box-shadow:var(--cc-shadow);color:var(--c-text);font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.cc.asset-card,.cc.asset-card:hover,.cc.asset-card.detail-selected{border-top:1px solid var(--c-line);background:var(--c-surface)}
.cc:hover{border-color:var(--c-line-strong);box-shadow:var(--cc-shadow-hover)}
.cc.asset-card:hover{border-color:var(--c-line-strong)}
.cc.selected,.cc.asset-card.selected,.cc.detail-selected,.cc.asset-card.detail-selected{outline:0;border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent),var(--cc-shadow-hover)}
.cc.asset-card.detail-selected::after{content:none}
.cc .card-open,.cc .cc-open{position:absolute;inset:0;z-index:1;width:auto;min-height:0;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.cc .card-open:focus-visible,.cc .cc-open:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}

.cc-ico{width:0.875rem;height:0.875rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cc-ico-fill{fill:currentColor;stroke:none}

/* Peça */
.cc-media{position:relative;overflow:hidden;border-radius:calc(var(--r-outer) - 1px) calc(var(--r-outer) - 1px) 0 0;background:var(--c-surface-2)}
.cc-media .thumb-wrap{border-radius:0;background:var(--c-surface-2)}
.cc-media .thumb-wrap.cc-contain img{object-fit:contain}
.cc-ctl{position:absolute;z-index:3;display:flex;align-items:center;gap:0.375rem}
.cc-ctl.tl{top:var(--cc-inset);left:var(--cc-inset)}.cc-ctl.tr{top:var(--cc-inset);right:var(--cc-inset)}
.cc-ctl.bl{bottom:var(--cc-inset);left:var(--cc-inset)}.cc-ctl.br{bottom:var(--cc-inset);right:var(--cc-inset)}
.cc-box{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:0.375rem;height:var(--cc-ctl);min-width:var(--cc-ctl);margin:0;padding:0 0.5rem;border:1px solid var(--c-line);border-radius:var(--r-pill);background:var(--cc-glass);color:var(--c-text);font:600 0.75rem/1 var(--ff-sans);white-space:nowrap;text-decoration:none;cursor:pointer}
.cc-box.sq{width:var(--cc-ctl);padding:0}
.cc-box:hover{border-color:var(--c-text)}
.cc-box:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
span.cc-box{cursor:default}
/* A régua global de toque (min-height 44px em todo button) não estica a caixa: no toque, a área cresce invisível em volta dela. */
.cc-box{min-height:0}
@media (pointer:coarse){button.cc-box,a.cc-box{position:relative}button.cc-box::after,a.cc-box::after{content:"";position:absolute;inset:-0.5rem}}
.cc-am{padding:0 0.625rem 0 0.5rem;background:var(--c-surface);font-weight:500}
.cc-check{border:1.5px solid var(--c-line-strong);border-radius:0.5rem;color:transparent}
.cc-check[aria-pressed="true"]{border-color:var(--c-accent);background:var(--c-accent);color:var(--c-on-fill)}
.cc-seal{display:inline-grid;place-items:center;width:1.125rem;height:1.125rem;border-radius:50%;background:var(--cc-seal);color:var(--cc-on-seal);font:600 0.625rem/1 var(--ff-sans)}
.cc-seals{display:inline-flex}
.cc-seals .cc-seal{box-shadow:0 0 0 2px var(--cc-glass)}
.cc-seals .cc-seal+.cc-seal{margin-left:-0.125rem}
.cc-rest{transition:opacity .15s}
@media (hover:hover){
  .cc .cc-hover{opacity:0;transition:opacity .15s}
  .cc:hover .cc-hover,.cc:has(:focus-visible) .cc-hover,.cc.selected .cc-ctl.tl{opacity:1}
  .cc:hover .cc-rest,.cc:has(:focus-visible) .cc-rest{opacity:0}
}

/* Camada densa: sobe no mouse por cima da parte de baixo da peça. */
.cc-peek{position:absolute;z-index:2;left:var(--cc-inset);right:var(--cc-inset);bottom:var(--cc-inset);display:grid;grid-template-columns:0.875rem auto minmax(0,1fr);align-items:center;gap:0.375rem 0.5rem;max-height:calc(100% - 2 * var(--cc-inset) - var(--cc-ctl) - 0.5rem);margin:0;overflow:hidden;padding:0.625rem 0.75rem;box-sizing:border-box;border:1px solid var(--c-line);border-radius:0.625rem;background:var(--c-surface);box-shadow:0 8px 24px -12px rgba(0,0,0,.35);font:400 0.75rem/1rem var(--ff-sans);opacity:0;transform:translateY(0.25rem);transition:opacity .15s,transform .15s;pointer-events:none}
.cc:hover .cc-peek,.cc:has(:focus-visible) .cc-peek{opacity:1;transform:none}
.cc-peek dt{display:contents}
.cc-peek dt .cc-ico{color:var(--c-text-3)}
.cc-peek dt span{color:var(--c-text-3);white-space:nowrap}
.cc-peek dd{margin:0;overflow:hidden;color:var(--c-text);font-weight:500;text-align:right;text-overflow:ellipsis;white-space:nowrap}
.cc-peek dd.good{color:var(--c-good)}.cc-peek dd.bad{color:var(--c-bad)}.cc-peek dd.warn{color:var(--c-warn)}
.cc-peek dt.wide span{grid-column:2/-1}
.cc-peek dd.wide{display:-webkit-box;grid-column:2/-1;margin-top:-0.25rem;overflow-wrap:anywhere;text-align:left;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}

/* Faixa de dados: altura fixa (título 20 + respiro 8 + 2 linhas de 28 + vão 4, com 10 de borda). */
.cc-foot{position:relative;z-index:2;box-sizing:border-box;height:6.75rem;padding:0.625rem;container-type:inline-size;pointer-events:none}
.cc-foot .cc-title b,.cc-foot .cc-code,.cc-foot .cc-kpi{pointer-events:auto}
.cc-title{display:flex;align-items:center;gap:0.5rem;height:1.25rem;margin:0;color:var(--c-text);font:600 0.875rem/1.25rem var(--ff-sans)}
.cc-title b{flex:1;min-width:0;overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.cc-code{display:inline-flex;flex:none;align-items:center;gap:0.25rem;max-width:45%;height:1.25rem;padding:0 0.375rem 0 0.3125rem;box-sizing:border-box;border-radius:0.3125rem;background:var(--cc-cell);color:var(--c-text-2);font:500 0.75rem/1 var(--ff-mono)}
.cc-code span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-code .cc-ico{width:0.75rem;height:0.75rem;color:var(--c-text-3)}
.cc-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.25rem;margin:0.5rem 0 0}
.cc-kpi{display:flex;align-items:center;gap:0.25rem;min-width:0;height:1.75rem;padding:0 0.5rem;box-sizing:border-box;border-radius:0.375rem;background:var(--cc-cell);container-type:inline-size;cursor:default}
.cc-kpi dt{display:flex;flex:1;align-items:center;gap:0.25rem;min-width:0;margin:0;color:var(--c-text-3);font:500 0.75rem/1rem "Roboto Condensed",var(--ff-sans);letter-spacing:.005em;white-space:nowrap}
.cc-kpi dt span{overflow:hidden;text-overflow:ellipsis}
.cc-kpi dd{display:inline-flex;align-items:center;gap:0.125rem;margin:0;color:var(--c-text);font:600 0.8125rem/1 var(--ff-sans);white-space:nowrap}
.cc-kpi dd .cc-arrow{width:0.75rem;height:0.75rem;stroke-width:2}
.cc-kpi.main{background:var(--c-accent)}
.cc-kpi.main dt{color:color-mix(in srgb,var(--c-on-fill) 72%,transparent)}
.cc-kpi.main dd{color:var(--c-on-fill);font-size:0.9375rem}
.cc-kpi.good{background:var(--cc-good-soft)}.cc-kpi.good dt,.cc-kpi.good dd .cc-arrow{color:var(--c-good)}
.cc-kpi.bad{background:var(--cc-bad-soft)}.cc-kpi.bad dt,.cc-kpi.bad dd .cc-arrow{color:var(--c-bad)}
.cc-kpi.warn{background:var(--cc-warn-soft)}.cc-kpi.warn dt{color:var(--c-warn)}
/* Rótulo sempre visível em condensada; célula estreita condensa também o número antes de cortar o nome. */
@container (max-width:8.25rem){.cc-kpi:not(.main) dd{font-size:0.75rem}.cc-kpi.main dd{font-size:0.875rem}.cc-kpi dd{font-family:"Roboto Condensed",var(--ff-sans);letter-spacing:0}}
/* Célula estreita: o "R$" sai (ícone e nome já dizem dinheiro), o chip principal desce um passo e o respiro aperta. */
@container (max-width:7.5rem){.cc-kpi .cc-cur{display:none}.cc-kpi.main dd{font-size:0.8125rem}}
@container (max-width:4.75rem){.cc-kpi dt span{display:none}}
@container (max-width:4.5rem){.cc-kpi dd .cc-arrow{display:none}}
@container (max-width:15rem){.cc-kpi{padding:0 0.375rem}}
@container (max-width:12rem){.cc-kpis>.cc-kpi:nth-child(n+3){display:none}}

/* Família: duas lâminas atrás do card dizem "aqui tem várias versões" sem texto. */
.cc.is-family::before,.cc.is-family::after{content:"";position:absolute;z-index:-1;height:1rem;border:1px solid var(--c-line);border-bottom:0;border-radius:var(--r-outer) var(--r-outer) 0 0}
.cc.is-family::before{left:0.625rem;right:0.625rem;top:-0.3125rem;background:var(--c-surface-2)}
.cc.is-family::after{left:1.25rem;right:1.25rem;top:-0.625rem;background:var(--c-surface-3)}

/* Grades de Carrosséis e Variações: mesma coluna do protótipo. */
#carouselsView .carousel-library-grid.cc-grid,#familiesView .family-grid.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:1.5rem 1rem;align-items:start;isolation:isolate}
#familiesView .family-grid.cc-grid{padding-top:0.625rem}

/* Toque: sem camada densa; Ads Manager vira só o ícone; seleção e selos ficam à vista. */
@media (hover:none){
  .cc-peek{display:none}
  .cc-am span{display:none}
  .cc-am{width:var(--cc-ctl);padding:0}
}

@media (max-width:47.99rem){
  #carouselsView .carousel-library-grid.cc-grid,#familiesView .family-grid.cc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 0.75rem}
  .cc-foot{padding:0.5rem}
  .cc-grid .cc-foot{height:auto}
  .cc-kpi{padding:0 0.375rem}
  .cc-am span{display:none}
  .cc-am{width:var(--cc-ctl);padding:0}
}

/* Acervo no celular: lista compacta (miniatura, título, número que ordena), como antes. */
@media (max-width:47.5rem){
  .virtual-masonry .asset-card.cc{display:grid;height:4.5rem;grid-template-columns:3rem minmax(0,1fr) 4.75rem;grid-template-rows:minmax(0,1fr);overflow:hidden;border-radius:var(--r-inner);box-shadow:none}
  .virtual-masonry .asset-card.cc .cc-media{grid-column:1;grid-row:1;width:3rem;height:100%;border-radius:calc(var(--r-inner) - 1px) 0 0 calc(var(--r-inner) - 1px)}
  .virtual-masonry .asset-card.cc .cc-media .thumb-wrap{width:3rem;height:100%;aspect-ratio:auto}
  .virtual-masonry .asset-card.cc .cc-ctl:not(.tl),.virtual-masonry .asset-card.cc .cc-peek,.virtual-masonry .asset-card.cc .cc-kpis,.virtual-masonry .asset-card.cc .cc-code{display:none}
  .virtual-masonry .asset-card.cc .cc-ctl.tl{top:0.25rem;left:0.25rem;opacity:1}
  .virtual-masonry .asset-card.cc .cc-check{width:1.25rem;min-width:0;height:1.25rem;border-radius:0.3125rem}
  .virtual-masonry .asset-card.cc .cc-check::after{content:"";position:absolute;inset:-0.25rem -1.375rem -1.375rem -0.25rem}
  .virtual-masonry .asset-card.cc .cc-check{position:relative}
  .virtual-masonry .asset-card.cc .cc-foot{grid-column:2;grid-row:1;display:grid;align-content:center;height:auto;padding:0 0.625rem}
  .virtual-masonry .asset-card.cc .cc-title{height:auto}
  .virtual-masonry .asset-card.cc .cc-title b{display:-webkit-box;white-space:normal;line-height:1.25;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .virtual-masonry .asset-card.cc .foot-mobile-score{position:relative;z-index:2;pointer-events:none}
}