/* telas/vitrine.css (M28) — carrossel de concursos (cards e diálogo das 7 áreas da 2ª fase), /concursos, central do concurso,
   capinhas SVG (mesma arte do gerador raster) e as telas do admin (vitrine e capinhas).
   Só tokens do design system (C §3; cores das capinhas = --capa-N-*); nenhuma cor literal. Componentes (.carrossel, .cartao-capa,
   .btn, .campo, .selo, .dialogo) são do M02; aqui ficam só a composição e os elementos próprios. */
@layer telas {
  /* ------------------------------------------------------------ faixa do carrossel */
  .vitrine { margin-block: var(--sp-2) var(--sp-6); min-width: 0; }
  .vitrine .cartao-capa[data-fixo="sim"] .cartao-capa__titulo { color: var(--accent-text); }
  .vitrine-capa { display: block; width: 100%; height: 100%; object-fit: cover; }

  /* ------------------------------------------------------------ capinha SVG (reserva e prévia) */
  .vcapa { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .cartao-capa__capa > .vcapa { height: 100%; }
  .vcapa__listra { fill: var(--capa-texto); opacity: .06; }
  .vcapa__luz-a { stop-color: var(--capa-texto); stop-opacity: .22; }
  .vcapa__luz-b { stop-color: var(--capa-texto); stop-opacity: 0; }
  .vcapa__silhueta { fill: var(--capa-texto); fill-opacity: .16; stroke: var(--capa-texto); stroke-opacity: .55; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .vcapa__icone { color: var(--capa-texto); opacity: .28; }
  .vcapa__sobre { fill: var(--capa-texto); font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: .12em; }
  .vcapa__titulo { fill: var(--capa-texto); font-family: var(--font-ui); font-weight: 800; letter-spacing: -0.03em; }
  .vcapa__sub { fill: var(--capa-texto); fill-opacity: .94; font-family: var(--font-ui); font-weight: 600; }
  .vcapa--1 .vcapa__a { stop-color: var(--capa-1-a); } .vcapa--1 .vcapa__b { stop-color: var(--capa-1-b); }
  .vcapa--2 .vcapa__a { stop-color: var(--capa-2-a); } .vcapa--2 .vcapa__b { stop-color: var(--capa-2-b); }
  .vcapa--3 .vcapa__a { stop-color: var(--capa-3-a); } .vcapa--3 .vcapa__b { stop-color: var(--capa-3-b); }
  .vcapa--4 .vcapa__a { stop-color: var(--capa-4-a); } .vcapa--4 .vcapa__b { stop-color: var(--capa-4-b); }
  .vcapa--5 .vcapa__a { stop-color: var(--capa-5-a); } .vcapa--5 .vcapa__b { stop-color: var(--capa-5-b); }
  .vcapa--6 .vcapa__a { stop-color: var(--capa-6-a); } .vcapa--6 .vcapa__b { stop-color: var(--capa-6-b); }

  /* ------------------------------------------------------------ 7 áreas da 2ª fase (diálogo e central) */
  .vitrine-dialogo__texto { margin-bottom: var(--sp-5); }
  .vitrine-areas { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
  .vitrine-area {
    display: grid; gap: var(--sp-1); padding: var(--sp-4); min-height: var(--alvo-min); border-radius: var(--r-lg); border: 1px solid var(--border);
    background: var(--surface); color: var(--text); text-decoration: none;
    transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-1) var(--ease-out);
  }
  .vitrine-area .i { width: 28px; height: 28px; color: var(--accent-text); margin-bottom: var(--sp-2); }
  .vitrine-area:hover, .vitrine-area[aria-current="true"] { border-color: var(--accent-border); background: var(--accent-soft); box-shadow: var(--sh-2); }
  .vitrine-area:hover { transform: translateY(-2px); }
  .vitrine-area__nome { font-weight: 800; }
  .vitrine-area__meta { font-size: var(--fs-sm); color: var(--text-3); }

  /* ------------------------------------------------------------ /concursos */
  .vitrine-pagina { display: grid; gap: var(--sp-6); padding-block: var(--sp-4) var(--sp-12); min-width: 0; }
  .vitrine-cabeca { display: grid; gap: var(--sp-1); }
  .vitrine-grade { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); list-style: none; padding: 0; margin: 0; }
  .vitrine-grade__item { min-width: 0; display: grid; }
  .vitrine-grade__item > .cartao-capa { height: 100%; }

  /* ------------------------------------------------------------ central do concurso */
  .vitrine-central { padding-block: var(--sp-4) var(--sp-16); min-width: 0; }
  .central-heroi { display: grid; gap: var(--sp-6); align-items: center; padding: var(--sp-5); border-radius: var(--r-2xl); border: 1px solid var(--border);
    background: var(--surface); box-shadow: var(--sh-1); }
  @media (min-width: 900px) { .central-heroi { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: var(--sp-8); gap: var(--sp-10); } }
  .central-heroi__capa { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2); aspect-ratio: 16 / 9; background: var(--surface-3); }
  .central-heroi__capa > img, .central-heroi__capa > svg { width: 100%; height: 100%; object-fit: cover; display: block; }
  .central-heroi__texto { display: grid; gap: var(--sp-3); min-width: 0; }
  .central-heroi__titulo { font-size: var(--fs-2xl); line-height: 1.15; overflow-wrap: anywhere; }
  .central-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); list-style: none; padding: 0; margin: 0; color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
  .central-meta li { display: inline-flex; align-items: center; gap: var(--sp-1); }
  .central-meta .i { color: var(--accent-text); }
  .central-datas { display: grid; gap: var(--sp-1); }
  .central-contagem { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; color: var(--text-2); }
  .central-contagem__num { font-size: var(--fs-num); font-weight: 800; color: var(--accent-text); line-height: 1; font-variant-numeric: tabular-nums; }
  .central-acoes { margin-top: var(--sp-2); }
  .central-regras { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); list-style: none; padding: 0; margin: 0; }
  .central-regra { display: grid; gap: var(--sp-1); padding: var(--sp-4); }
  .central-regra__icone .i { width: 24px; height: 24px; color: var(--accent-text); }
  .central-regra__rotulo { font-size: var(--fs-sm); color: var(--text-3); font-weight: 600; }
  .central-regra__valor { font-size: var(--fs-md); }
  .central-lista { display: grid; gap: var(--sp-3); list-style: none; padding: 0; margin: 0; }
  @media (min-width: 900px) { .central-lista--provas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .central-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-4); min-height: var(--alvo-min);
    color: var(--text); text-decoration: none; }
  .central-item__icone .i { width: 22px; height: 22px; color: var(--accent-text); }
  .central-item__num { font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .central-item__texto { display: grid; gap: var(--sp-1); min-width: 0; }
  .central-item__texto strong { overflow-wrap: anywhere; }
  .central-item__num { min-width: 3.2em; }
  .central-item[data-estado="em-preparacao"] { background: var(--surface-2); }
  .central-exame { display: grid; gap: var(--sp-1); align-content: start; min-width: 0; }
  .central-exame > .btn-link { justify-self: start; padding-inline: var(--sp-4); }
  .central-exame__tentativas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
  .central-mais { margin-top: var(--sp-3); }
  .central-mais__resumo { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--alvo-min); padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); color: var(--accent-text); font-weight: 700; cursor: pointer;
    list-style: none; margin-bottom: var(--sp-3); }
  .central-mais__resumo::-webkit-details-marker { display: none; }
  .central-mais__resumo .i { transition: transform var(--dur-2) var(--ease-out); }
  .central-mais[open] > .central-mais__resumo .i { transform: rotate(180deg); }
  .central-compartilhar { display: grid; gap: var(--sp-2); }

  /* edital verticalizado */
  .edital { display: grid; gap: var(--sp-3); }
  .edital__disciplina { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
  .edital__resumo { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); min-height: var(--alvo-min); cursor: pointer; list-style: none; font-weight: 700; }
  .edital__resumo::-webkit-details-marker { display: none; }
  .edital__resumo > .i { margin-left: auto; transition: transform var(--dur-2) var(--ease-out); }
  .edital__disciplina[open] > .edital__resumo > .i { transform: rotate(180deg); }
  .edital__nome { min-width: 0; overflow-wrap: anywhere; }
  .edital__pct { font-variant-numeric: tabular-nums; color: var(--accent-text); }
  .edital__topicos { list-style: none; margin: 0; padding: 0 var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-2); }
  .edital__topico { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); align-items: center; }
  @media (min-width: 900px) { .edital__topico { grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) auto; } }
  .edital__texto { overflow-wrap: anywhere; }

  /* ------------------------------------------------------------ admin: vitrine */
  .vitrine-admin { display: grid; gap: var(--sp-4); min-width: 0; }
  .vitrine-admin__cabeca { align-items: end; }
  .vitrine-admin__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
  .vitrine-admin__item { display: grid; gap: var(--sp-3); grid-template-columns: auto 120px minmax(0, 1fr); align-items: center; padding: var(--sp-3);
    transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
  @media (min-width: 1024px) { .vitrine-admin__item { grid-template-columns: auto 160px minmax(0, 1fr) auto; } }
  /* Inativo/encerrado: só a capinha esmaece (o texto mantém o contraste AA) e a borda fica tracejada. */
  .vitrine-admin__item[data-situacao="inativo"], .vitrine-admin__item[data-situacao="encerrado"] { border-style: dashed; background: var(--surface-2); }
  .vitrine-admin__item[data-situacao="inativo"] .vitrine-admin__capa, .vitrine-admin__item[data-situacao="encerrado"] .vitrine-admin__capa { opacity: .55; filter: grayscale(.7); }
  .vitrine-admin__item[data-arrastando] { opacity: .55; box-shadow: var(--sh-3); }
  .vitrine-admin__item[data-alvo] { outline: var(--foco-largura) dashed var(--accent); outline-offset: 2px; }
  .vitrine-admin__alca { display: grid; justify-items: center; gap: var(--sp-1); }
  .vitrine-admin__arrastar { cursor: grab; touch-action: none; }
  .vitrine-admin__trava .i { color: var(--text-3); }
  .vitrine-admin__pos { font-size: var(--fs-xs); color: var(--text-3); font-weight: 700; font-variant-numeric: tabular-nums; }
  .vitrine-admin__capa { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-3); }
  .vitrine-admin__capa > img, .vitrine-admin__capa > svg { width: 100%; height: 100%; object-fit: cover; display: block; }
  .vitrine-admin__textos { display: grid; gap: var(--sp-1); min-width: 0; }
  .vitrine-admin__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .vitrine-admin__detalhes { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
  .vitrine-admin__detalhes span { display: inline-flex; align-items: center; gap: var(--sp-1); overflow-wrap: anywhere; }
  .vitrine-admin__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; grid-column: 1 / -1; }
  @media (min-width: 1024px) { .vitrine-admin__acoes { grid-column: auto; justify-content: end; } }
  .vitrine-admin__form { display: inline-flex; gap: var(--sp-1); margin: 0; }
  .vitrine-previa { margin-inline: auto; width: 100%; max-width: 100%; padding: var(--sp-4); border: 1px dashed var(--border-strong); border-radius: var(--r-xl);
    background: var(--bg); overflow: hidden; transition: max-width var(--dur-3) var(--ease-out); }
  .vitrine-previa[data-largura="390"] { max-width: 390px; }
  .vitrine-previa[data-largura="768"] { max-width: 768px; }
  .vitrine-previa[data-largura="1280"] { max-width: 1280px; }
  .vitrine-previa[data-largura="tv"] { max-width: 1280px; font-size: 1.35em; }
  .vitrine-previa[data-largura="tv"] .carrossel { --carrossel-item: 15rem; }
  .vitrine-previa[data-largura="tv"] .carrossel__setas { display: none; }

  /* admin: formulário do card */
  .vitrine-form { display: grid; gap: var(--sp-4); max-width: var(--w-conteudo); }
  .vitrine-form__bloco { display: grid; gap: var(--sp-4); padding: var(--sp-5); }
  .vitrine-form__grade { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); align-items: start; }
  .vitrine-form__nota { align-self: center; }
  .vitrine-form__simulados { display: grid; gap: var(--sp-2); border: 0; padding: 0; margin: 0; }
  .vitrine-form__capa { display: grid; gap: var(--sp-5); }
  @media (min-width: 900px) { .vitrine-form__capa { grid-template-columns: 320px minmax(0, 1fr); align-items: start; } }
  .vitrine-form__capa-atual { display: grid; gap: var(--sp-2); }
  .vitrine-form__capa-atual > img, .vitrine-form__capa-atual > svg { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh-1); aspect-ratio: 16 / 9; object-fit: cover; }
  .vitrine-form__recentes { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
  .vitrine-form__acoes { position: sticky; bottom: 0; padding-block: var(--sp-3); background: var(--bg); z-index: 1; }

  /* ------------------------------------------------------------ admin: capinhas */
  .vitrine-capas .secao { margin-top: var(--sp-6); min-width: 0; }
  .capas-gerador { display: grid; gap: var(--sp-5); }
  @media (min-width: 1100px) { .capas-gerador { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
  .capas-gerador__form { display: grid; gap: var(--sp-4); padding: var(--sp-5); }
  .capas-gerador__acoes { align-items: center; }
  .capas-subtitulo { font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); margin-bottom: var(--sp-2); }
  .capas-grade { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); min-width: 0; max-width: 100%; list-style: none; padding: 0; margin: 0; }
  .capas-grade--previa { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: var(--sp-3); }
  .capas-grade--mini { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: var(--sp-2); }
  .capas-grade__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); min-width: 0; align-content: start; }
  .capas-grade__item > * { min-width: 0; max-width: 100%; }
  .capas-grade__item.cartao { padding: var(--sp-2); }
  .capas-grade__item > img, .capas-grade__item > svg { width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-md); object-fit: cover; display: block; }
  .capas-grade__acoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); padding-inline: var(--sp-1); }
  .capas-grade__acoes .linha { flex-wrap: wrap; min-width: 0; }
  .capas-grade__acoes .btn { max-width: 100%; min-width: 0; white-space: normal; text-align: center; height: auto; }
  .capas-lote { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
  .capas-lote__estado { font-weight: 600; color: var(--text-2); }
  .capas-resultado:empty { display: none; }
  .capas-sugestao { display: grid; gap: var(--sp-2); padding: var(--sp-3); }
  .capas-sugestao__lista { display: grid; gap: var(--sp-1); margin: 0; }
  .capas-sugestao__lista div { display: flex; gap: var(--sp-2); }
  .capas-sugestao__lista dt { color: var(--text-3); min-width: 9em; }
  .capa-opcao { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; border: 2px solid transparent; cursor: pointer; }
  .capa-opcao input { position: absolute; inset: var(--sp-1) auto auto var(--sp-1); z-index: 1; width: 20px; height: 20px; accent-color: var(--accent); }
  .capa-opcao:has(input:checked) { border-color: var(--accent); box-shadow: var(--sh-2); }
  .capa-opcao:has(input:focus-visible) { outline: var(--foco-largura) solid var(--ring); outline-offset: 2px; }
  .capa-opcao img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  .capa-opcao__vazia { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; padding: var(--sp-2); text-align: center; }

  /* envio com recorte 16:9 */
  .capas-envio { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-5); }
  .capas-envio > * { min-width: 0; }
  .capas-envio__arquivo { min-height: var(--alvo-min); width: 100%; max-width: 100%; min-width: 0; }
  .recorte { display: grid; gap: var(--sp-4); }
  .recorte[hidden] { display: none; }
  @media (min-width: 900px) { .recorte { grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr); align-items: start; } }
  .recorte__palco { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--surface-3); touch-action: none; user-select: none; max-height: 70vh; }
  .recorte__palco:focus-visible { outline: var(--foco-largura) solid var(--ring); outline-offset: 2px; }
  .recorte__imagem { display: block; width: 100%; height: auto; pointer-events: none; }
  .recorte__caixa { position: absolute; border: 2px solid var(--capa-texto); box-shadow: 0 0 0 100vmax var(--scrim); border-radius: var(--r-xs); cursor: move; }
  .recorte__lado { display: grid; gap: var(--sp-3); }
  .recorte__previa { width: 100%; max-width: 320px; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-md); background: var(--surface-3); box-shadow: var(--sh-1); }

  /* ------------------------------------------------------------ TV (10 pés) e movimento */
  :root[data-modo="tv"] .vitrine { margin-block: var(--sp-4) var(--sp-8); }
  :root[data-modo="tv"] .central-heroi { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  :root[data-modo="tv"] .vitrine-area { padding: var(--sp-5); }
  @media (prefers-reduced-motion: reduce) {
    .vitrine-area:hover { transform: none; }
    .vitrine-previa { transition: none; }
  }
  :root[data-movimento="reduzido"] .vitrine-area:hover { transform: none; }
}