/* Dentro do shadow DOM, depois do vivo.css: a verificação e a certidão vivas.
 * Só a diagramação do que o site mostra; as classes são as reais do produto. */

/* ---------- a verificação: três faixas, tudo à vista de uma vez ---------- */
.so-pedaco .mk-card:has(> .mk-verificacao-resumo) {
  margin: 0;
}
.so-pedaco .mk-verificacao-fotos {
  grid-template-columns: minmax(0, 1fr);
}
.so-pedaco .mk-verificacao-foto img {
  max-width: 100%;
}
.so-pedaco .mk-verificacao-resumo > div:last-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}
.so-pedaco .mk-verificacao-resultado {
  grid-column: 1 / -1;
  margin-bottom: 2px;
}
.so-pedaco .mk-verificacao-resumo .mk-detalhe {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.so-pedaco .mk-verificacao-subtitulo {
  margin: 16px 0 8px;
}
.so-pedaco .mk-verificacao-resumo p[data-bloco='risco'] {
  margin: 0;
}

/* desktop: foto à esquerda; pessoa e documento lado a lado; técnicos e risco lado a lado */
@media (min-width: 821px) {
  .so-pedaco .mk-verificacao-resumo {
    grid-template-columns: 188px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  .so-pedaco .mk-verificacao-resumo > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
  .so-pedaco h4[data-bloco='pessoa'] { grid-column: 1; grid-row: 2; }
  .so-pedaco .mk-detalhe[data-bloco='pessoa'] { grid-column: 1; grid-row: 3; }
  .so-pedaco h4[data-bloco='documento'] { grid-column: 2; grid-row: 2; }
  .so-pedaco .mk-detalhe[data-bloco='documento'] { grid-column: 2; grid-row: 3; }
  .so-pedaco h4[data-bloco='tecnicos'] { grid-column: 1; grid-row: 4; }
  .so-pedaco .mk-detalhe[data-bloco='tecnicos'] { grid-column: 1; grid-row: 5; }
  .so-pedaco h4[data-bloco='risco'] { grid-column: 2; grid-row: 4; }
  .so-pedaco p[data-bloco='risco'] { grid-column: 2; grid-row: 5; }
}

/* celular: a ficha numa coluna só, como um documento de identidade (16/10, terceira rodada).
 * No alto, o retrato (112 px) com o resultado ao lado, rente ao pé da foto; o rótulo "Rosto" sai (o retrato se
 * explica). Abaixo, cada grupo com o subtítulo e os campos em linhas rótulo à esquerda, valor à direita, cada um
 * numa linha só. Só componentes do produto (mk-card, mk-detalhe), sem rótulo novo. Toda regra começa pela raiz da
 * cena: os quatro CSS vivos carregam em todos os shadow roots. */
@media (max-width: 820px) {
  :host([data-vivo='verificacao']) .so-pedaco .mk-card:has(> .mk-verificacao-resumo) {
    padding: 18px 18px 20px;
    border: 0;
    border-radius: 22px;
    box-shadow:
      0 1px 2px rgba(20, 21, 19, 0.06),
      0 24px 48px -30px rgba(20, 21, 19, 0.35);
  }
  :host([data-vivo='verificacao']) .so-pedaco .mk-verificacao-resumo {
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 0;
    align-items: start;
  }
  :host([data-vivo='verificacao']) .so-pedaco .mk-verificacao-resumo > div:first-child {
    grid-column: 1;
    grid-row: 1;
  }
  :host([data-vivo='verificacao']) .so-pedaco .mk-verificacao-resumo > div:first-child .mk-verificacao-subtitulo {
    display: none;
  }
  :host([data-vivo='verificacao']) .so-pedaco .mk-verificacao-resumo > div:last-child {
    display: contents;
  }
  :host([data-vivo='verificacao']) .so-pedaco .mk-verificacao-foto img {
    display: block;
    width: 112px;
    max-width: 112px;
    border-radius: 14px;
  }
  :host([data-vivo='verificacao']) .so-pedaco .mk-verificacao-resultado {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0 0 4px;
  }
  :host([data-vivo='verificacao']) .so-pedaco .mk-verificacao-resultado b {
    display: block;
    margin-top: 6px;
    font-size: 26px;
    line-height: 30px;
    letter-spacing: -0.01em;
  }
  :host([data-vivo='verificacao']) .so-pedaco .mk-verificacao-subtitulo {
    grid-column: 1 / -1;
    margin: 28px 0 6px;
    font-size: 15px;
  }
  :host([data-vivo='verificacao']) .so-pedaco h4[data-bloco='pessoa'] { grid-row: 2; }
  :host([data-vivo='verificacao']) .so-pedaco .mk-detalhe[data-bloco='pessoa'] { grid-row: 3; }
  :host([data-vivo='verificacao']) .so-pedaco h4[data-bloco='documento'] { grid-row: 4; }
  :host([data-vivo='verificacao']) .so-pedaco .mk-detalhe[data-bloco='documento'] { grid-row: 5; }
  :host([data-vivo='verificacao']) .so-pedaco h4[data-bloco='tecnicos'] { grid-row: 6; }
  :host([data-vivo='verificacao']) .so-pedaco .mk-detalhe[data-bloco='tecnicos'] { grid-row: 7; }
  :host([data-vivo='verificacao']) .so-pedaco h4[data-bloco='risco'] { grid-row: 8; }
  :host([data-vivo='verificacao']) .so-pedaco p[data-bloco='risco'] {
    grid-column: 1 / -1;
    grid-row: 9;
    padding: 8px 0 0;
    font-size: 15px;
  }
  /* os campos: uma linha cada, rótulo à esquerda e valor à direita, sem fio entre elas (o respiro separa) */
  :host([data-vivo='verificacao']) .so-pedaco .mk-detalhe {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  :host([data-vivo='verificacao']) .so-pedaco .mk-detalhe > div {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-size: 15px;
    line-height: 22px;
    text-align: right;
  }
  :host([data-vivo='verificacao']) .so-pedaco .mk-detalhe .mk-rot {
    flex: none;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-align: left;
    white-space: nowrap;
  }
  :host([data-vivo='verificacao']) .so-pedaco .mk-detalhe .mk-mono {
    font-size: 14px;
  }
  /* o laço parte da ficha real esmaecida, nunca do branco: tudo a 0,14, sem deslocar e sem recortar */
  :host([data-vivo='verificacao']) [data-bloco].oculto,
  :host([data-vivo='verificacao']) .mk-verificacao-foto[data-bloco].oculto {
    opacity: 0.14;
    transform: none;
    clip-path: none;
  }
}

/* ---------- a certidão: a linha do tempo com respiro ---------- */
.so-pedaco .mk-certidao-tempo .mk-tabela-wrap {
  border: 1px solid var(--mk-border);
  border-radius: 10px;
  overflow: hidden;
}
.so-pedaco .mk-certidao-tempo .mk-contexto {
  margin-inline: 2px;
}

@media (min-width: 721px) {
  .so-pedaco .mk-certidao-tempo .mk-tabela :is(td, th) {
    padding: 12px 16px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    vertical-align: top;
  }
  .mk-painel-real.so-pedaco .mk-certidao-tempo .mk-tabela-wrap > .mk-tabela {
    table-layout: auto;
  }
  .mk-painel-real.so-pedaco .mk-certidao-tempo .mk-tabela th:nth-child(1) {
    width: 190px;
  }
  .mk-painel-real.so-pedaco .mk-certidao-tempo .mk-tabela th:nth-child(2) {
    width: auto;
  }
  .mk-painel-real.so-pedaco .mk-certidao-tempo .mk-tabela th:nth-child(3) {
    width: 190px;
  }
  .so-pedaco .mk-certidao-tempo .mk-tabela td.mk-mono {
    white-space: nowrap;
  }
  .so-pedaco .mk-certidao-tempo .mk-evento-descricao {
    display: inline;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* celular: o produto empilha cada linha; aqui ganha moldura e recuo, sem colar na borda */
@media (max-width: 720px) {
  .so-pedaco .mk-certidao-tempo .mk-tabela-wrap {
    border-radius: 10px;
    overflow: hidden;
  }
  .so-pedaco .mk-certidao-tempo .mk-tabela tbody tr {
    padding: 12px 14px;
  }
  .so-pedaco .mk-certidao-tempo .mk-tabela tbody td:nth-child(3) {
    white-space: normal;
  }
  .so-pedaco .mk-certidao-tempo .mk-mono.mk-quebra {
    font-size: 12px;
    letter-spacing: 0;
  }
}

/* a nota que o fato "Leitura não entra" acende: o realce não cola no texto */
.so-pedaco .mk-certidao-tempo p[data-fato] {
  padding: 10px 12px;
}

/* a trilha "Voltar ao mandado" é navegação do painel e não explica nada no site (16/10) */
.so-pedaco .mk-trilha {
  display: none;
}

/* celular, a certidão viva: o que o fato não prova esmaece pela classe .esmaece (opacidade 0,42), posta pelo
 * site.js só no celular. Sai o filter e a folha rola em 700 ms. O que vale no desktop (o :has() com filter, o
 * blur e o mouseleave) fica como está. Toda regra começa pela raiz da cena. */
@media (max-width: 820px) {
  :host([data-vivo='certidao-viva']) .so-pedaco {
    transition:
      transform 0.7s var(--c),
      opacity 0.3s var(--c);
  }
  :host([data-vivo='certidao-viva']) article > section,
  :host([data-vivo='certidao-viva']) .mk-certidao-tempo :is(.mk-tabela-wrap, tbody tr),
  :host([data-vivo='certidao-viva']) .mk-certidao-tempo > p {
    transition:
      opacity 0.45s var(--c),
      box-shadow 0.45s var(--c);
  }
  :host([data-vivo='certidao-viva']) .mk-root:has(.marcado) article > section:not(.marcado):not(:has(.marcado)),
  :host([data-vivo='certidao-viva']) .mk-certidao-tempo:has(tr.marcado) tbody tr:not(.marcado),
  :host([data-vivo='certidao-viva']) .mk-certidao-tempo:has(> .marcado) .mk-tabela-wrap {
    filter: none;
  }
  :host([data-vivo='certidao-viva']) .esmaece {
    opacity: 0.42;
  }
  /* a linha do tempo da folha mostra todas as linhas, sem a altura da fila (vivo-recursos.css vaza para cá) */
  :host([data-vivo='certidao-viva']) .so-pedaco .mk-certidao-tempo .mk-tabela-wrap {
    height: auto;
  }
  :host([data-vivo='certidao-viva']) .so-pedaco .mk-certidao-tempo .mk-tabela :is(tr, thead tr) {
    height: auto;
  }
  :host([data-vivo='certidao-viva']) .so-pedaco .mk-certidao-tempo .mk-tabela :is(td, th) {
    padding: 8px !important;
  }
}

/* celular, os cartões de fato da certidão (hosts novos, data-vivo="certidao-fato"): cada um mostra só a parte da
 * folha que o fato prova, no recorte do cartão. O site.js clona aqui o conteúdo da folha, centra o alvo e acende. */
@media (max-width: 820px) {
  :host([data-vivo='certidao-fato']) {
    height: 100%;
    overflow: hidden;
  }
  :host([data-vivo='certidao-fato']) .so-pedaco {
    padding: 12px 12px 0;
  }
  :host([data-vivo='certidao-fato']) .so-pedaco :is(.mk-trilha, article > header, article > footer) {
    display: none;
  }
  :host([data-vivo='certidao-fato']) .so-pedaco article > section {
    margin: 0;
  }
  :host([data-vivo='certidao-fato'][data-recorte='mensagem']) .so-pedaco article > section:not([data-fato='mensagem']),
  :host([data-vivo='certidao-fato'][data-recorte='prazo']) .so-pedaco article > section:not([data-fato='prazo']),
  :host([data-vivo='certidao-fato'][data-recorte='entrega']) .so-pedaco article > section:not(.mk-certidao-tempo),
  :host([data-vivo='certidao-fato'][data-recorte='leitura']) .so-pedaco article > section:not(.mk-certidao-tempo) {
    display: none;
  }
  /* a linha do tempo empilha cada linha, como o produto no celular (evento, quem afirma, data e hora). O
     vivo-recursos.css força a tabela da fila com !important; aqui, com mais especificidade, desfaz-se isso */
  :host([data-vivo='certidao-fato']) .so-pedaco .mk-certidao-tempo .mk-tabela-wrap {
    height: auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  :host([data-vivo='certidao-fato']) .so-pedaco .mk-certidao-tempo .mk-tabela,
  :host([data-vivo='certidao-fato']) .so-pedaco .mk-certidao-tempo .mk-tabela tbody {
    display: block !important;
    width: 100% !important;
  }
  :host([data-vivo='certidao-fato']) .so-pedaco .mk-certidao-tempo .mk-tabela thead {
    display: none !important;
  }
  :host([data-vivo='certidao-fato']) .so-pedaco .mk-certidao-tempo .mk-tabela tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'evento' 'quem' 'data';
    gap: 2px;
    height: auto;
    padding: 10px 6px;
    border-bottom: 1px solid var(--mk-border, #e4e5df);
  }
  :host([data-vivo='certidao-fato']) .so-pedaco .mk-certidao-tempo .mk-tabela tbody td {
    display: block !important;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible;
    white-space: normal;
  }
  :host([data-vivo='certidao-fato']) .so-pedaco .mk-certidao-tempo .mk-tabela tbody td:nth-child(1) {
    white-space: nowrap;
  }
  /* o que o fato não prova esmaece; o que ele prova leva o marca-texto verde (mesmo verde da linha da entrega) */
  :host([data-vivo='certidao-fato']) .so-pedaco :is(.mk-detalhe > div, section > p, .mk-tabela tbody tr) {
    transition:
      opacity 0.45s var(--c),
      background-color 0.45s var(--c),
      box-shadow 0.45s var(--c);
  }
  :host([data-vivo='certidao-fato']) .so-pedaco .esmaece {
    opacity: 0.42;
  }
  :host([data-vivo='certidao-fato']) .so-pedaco .marca {
    border-radius: 8px;
    background-color: rgba(90, 208, 172, 0.16);
    box-shadow: 0 0 0 6px rgba(90, 208, 172, 0.16);
  }
  /* a nota e a linha da entrega já têm o seu próprio recuo: o verde cobre a própria caixa, sem folga e sem borda */
  :host([data-vivo='certidao-fato']) .so-pedaco :is(.mk-tabela tbody tr, p[data-fato]).marca {
    border-color: transparent;
    box-shadow: none;
  }
}