/* As telas do produto depois de entrar (Figma v4). Cor índigo e destaque provisórios (docs/PRODUCT.md), até a prancha de cor ser aprovada. */
.produto {
  --cor: #3A3F6B; --destaque: #f0a96d; --fundo: #fffefb; --linha: #dcd6cb; --texto: #1a221f; --suave: #59625c; --perigo: #a03528;
  margin: 0; max-width: none; padding: 0; display: block; background: var(--fundo); color: var(--texto); min-height: 100dvh;
  font-family: system-ui, sans-serif; font-size: 16px;
}
.produto *, .produto *::before, .produto *::after { box-sizing: border-box; }
.produto [hidden] { display: none !important; }
.pr-palco { max-width: 560px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; position: relative; }
.produto button { font-family: inherit; cursor: pointer; }
.produto button:focus-visible, .produto input:focus-visible, .produto textarea:focus-visible { outline: 3px solid var(--destaque); outline-offset: 2px; }

.pr-topo { display: flex; align-items: center; gap: 12px; padding: 20px 20px 8px; position: relative; }
.pr-marca { width: 28px; height: 28px; border-radius: 50%; background: var(--cor); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pr-marca i { width: 11px; height: 11px; border-radius: 50%; background: var(--destaque); }
.pr-nome { font-weight: 700; color: var(--cor); font-size: 17px; flex-grow: 1; }
.pr-seta { width: 48px; height: 48px; margin-right: -12px; border: 0; background: transparent; color: var(--cor); font-size: 24px; line-height: 1; }
.pr-menu { position: absolute; right: 20px; top: 64px; width: min(270px, calc(100% - 40px)); background: #fff; border: 1px solid var(--linha); border-radius: 16px; box-shadow: 0 10px 30px rgba(26, 34, 31, .16); overflow: hidden; z-index: 5; }
.pr-item { display: block; width: 100%; min-height: 48px; padding: 0 16px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--linha); font-size: 16px; color: var(--texto); }
.pr-item:last-child { border-bottom: 0; }
.pr-perigo { color: var(--perigo); }

.pr-titulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 16px; }
.pr-titulo { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 30px; font-weight: 700; }
.pr-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--cor); color: #fff; font-size: 16px; font-weight: 700; }
.pr-botao:disabled { background: #eceae3; color: var(--suave); cursor: default; }
.pr-largo { width: 100%; min-height: 56px; font-size: 18px; }
.pr-claro { background: transparent; color: var(--cor); border: 2px solid var(--cor); }
.pr-perigoso { background: var(--perigo); }

.pr-lista { display: flex; flex-direction: column; gap: 12px; padding: 0 20px 28px; }
.pr-cartao { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; padding: 16px; background: #fff; border: 1px solid var(--linha); border-radius: 16px; color: var(--texto); }
.pr-cartao-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pr-cartao-nome { font-size: 17px; line-height: 1.25; }
.pr-cartao-resumo { font-size: 14px; color: var(--suave); }
.pr-selo { flex-shrink: 0; padding: 4px 10px; border-radius: 8px; background: #ebe8e0; color: var(--suave); font-size: 13px; font-weight: 700; }
.pr-selo-novo { background: #fbe3cf; color: #7a3d10; }
.pr-erro, .pr-aviso { margin: 0; font-size: 15px; font-weight: 700; color: var(--perigo); text-align: center; }
.pr-aviso:empty { display: none; }

.pr-topo-tela { display: flex; align-items: center; gap: 6px; padding: 16px 20px 8px 8px; }
.pr-voltar { width: 48px; height: 48px; border: 0; background: transparent; color: var(--texto); font-size: 30px; line-height: 1; }
.pr-titulo-tela { margin: 0; font-size: 19px; font-weight: 700; }
.pr-corpo { flex-grow: 1; display: flex; flex-direction: column; gap: 16px; padding: 8px 20px 28px; }
.pr-rotulo { display: flex; flex-direction: column; gap: 8px; font-size: 16px; font-weight: 700; }
.pr-campo { width: 100%; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--linha); border-radius: 12px; background: #fff; font: inherit; font-weight: 400; font-size: 17px; color: var(--texto); }
.pr-area { padding: 12px 16px; line-height: 1.5; resize: vertical; }
.pr-busca { border-color: var(--cor); border-width: 2px; min-height: 120px; }
.pr-achado { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--suave); overflow-wrap: anywhere; }
.pr-achado:empty { display: none; }
.pr-reconhecido strong { color: var(--texto); }
.pr-traducoes { display: flex; flex-direction: column; gap: 4px; }
.pr-traducoes strong { color: var(--texto); }
.pr-traducoes p { margin: 0; }
.pr-traducoes em { font-style: normal; opacity: 0.8; }
.pr-fichas { display: flex; gap: 8px; overflow-x: auto; padding: 2px 20px 6px; margin: 0 -20px; scrollbar-width: none; }
.pr-fichas::-webkit-scrollbar { display: none; }
.pr-ficha { flex-shrink: 0; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1.5px solid var(--linha); background: #fff; color: var(--texto); font-size: 15px; font-weight: 500; white-space: nowrap; }
.pr-ficha[aria-pressed="true"] { background: var(--cor); border-color: var(--cor); color: #fff; }
.pr-acompanhar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--linha); border-radius: 16px; }
.pr-acompanhar div { display: flex; flex-direction: column; gap: 2px; }
.pr-acompanhar span { font-size: 14px; color: var(--suave); }
.pr-chave { flex-shrink: 0; position: relative; width: 52px; height: 32px; border: 0; border-radius: 16px; background: #cfcbc0; padding: 0; }
.pr-chave i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: left .15s; }
.pr-chave[aria-checked="true"] { background: var(--cor); }
.pr-chave[aria-checked="true"] i { left: 23px; }
.pr-excluir { align-self: flex-start; min-height: 48px; padding: 0; border: 0; background: transparent; color: var(--perigo); font-size: 16px; font-weight: 700; }
.pr-rodape { position: sticky; bottom: 0; padding: 12px 20px 20px; background: var(--fundo); border-top: 1px solid var(--linha); }
.pr-quadro { margin: 0; padding: 14px; background: #fff; border: 1px solid var(--linha); border-radius: 14px; line-height: 1.45; }
.pr-embreve { margin: 0; padding: 24px 20px; color: var(--suave); }

.pr-fundo { position: fixed; inset: 0; background: rgba(26, 34, 31, .45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 10; font-family: system-ui, sans-serif; }
.pr-dialogo { width: min(420px, 100%); background: #fff; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; color: #1a221f; }
.pr-dialogo h2 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.pr-dialogo p { margin: 0; line-height: 1.45; }
.pr-dialogo-botoes { display: flex; gap: 10px; justify-content: flex-end; }
.pr-dialogo-botoes .pr-botao { flex: 1; }
@media (min-width: 900px) {
  .pr-palco { padding-top: 12px; }
  .pr-lista { gap: 14px; }
}

/* A entrada some quando o produto aparece (o display da entrada comum venceria o atributo hidden). */
#entrada[hidden] { display: none !important; }

/* Aviso depois de buscar (vídeos novos, nada novo, cota do YouTube esgotada). */
.pr-nota { margin: 0 20px 16px; padding: 12px 16px; border-radius: 12px; background: #fbe3cf; color: #5c2d0b; font-size: 15px; line-height: 1.4; }

/* Tema por dentro (Figma v4, tela 04): topo com o nome e o +, chips, vídeos com a Sugestão da IA na caixa lilás e o aviso de desfazer. */
.pr-topo-tema { padding-right: 20px; }
.pr-titulo-tema { flex-grow: 1; min-width: 0; overflow-wrap: anywhere; font-size: 20px; }
.pr-mais { flex-shrink: 0; width: 48px; height: 48px; border: 0; border-radius: 12px; background: var(--cor); color: #fff; font-size: 28px; line-height: 1; }
.pr-acoes { display: flex; justify-content: flex-end; padding: 0 20px 8px; }
.pr-buscar { min-height: 44px; font-size: 15px; }
.pr-chips { padding: 4px 20px 12px; margin: 0; }
.pr-video { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--linha); border-radius: 16px; }
.pr-video-topo { display: flex; gap: 12px; align-items: flex-start; }
.pr-miniatura { flex-shrink: 0; position: relative; width: 104px; height: 70px; border-radius: 10px; background: linear-gradient(135deg, #e6e1f3, #d4cdea); }
.pr-duracao { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 5px; background: #1a221f; color: #fff; font-size: 12px; font-weight: 700; }
.pr-video-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pr-video-titulo { color: var(--texto); font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; text-decoration: none; }
.pr-video-titulo:hover { text-decoration: underline; }
.pr-video-linha { font-size: 14px; color: var(--suave); }
.pr-estrelas { font-size: 15px; color: #b8741a; letter-spacing: 2px; }
.pr-sugestao { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: #eeeaf8; border: 1px solid #d6cfec; }
.pr-sugestao p { margin: 0; line-height: 1.4; }
.pr-sugestao-rotulo { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #4a3f87; }
.pr-sugestao-base { font-size: 13px; color: var(--suave); }
.pr-decidir { display: flex; gap: 10px; }
.pr-decidir .pr-botao { flex: 1; width: auto; min-height: 52px; font-size: 16px; }
.pr-desfazer { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 16px; width: min(420px, calc(100% - 32px)); padding: 6px 8px 6px 18px; border-radius: 14px; background: #1a221f; color: #fff; box-shadow: 0 10px 30px rgba(26, 34, 31, .3); }
.pr-desfazer span { flex-grow: 1; }
.pr-desfazer-botao { min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: #ffd9b8; font-size: 16px; font-weight: 700; }
@media (min-width: 900px) {
  .pr-video { padding: 16px; }
  .pr-miniatura { width: 132px; height: 88px; }
}

/* Conectar IAs e a tela de consentimento (app/conectar-ias.js) */
.pr-endereco { display: flex; gap: 8px; align-items: stretch; }
.pr-endereco .pr-campo { flex: 1; min-width: 0; font-size: 15px; }
.pr-copiar { flex-shrink: 0; min-height: 52px; }
.pr-ia-titulo { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.pr-passos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; line-height: 1.4; }
.pr-suave { margin: 0; color: var(--suave); font-size: 14px; }
.pr-rodape-duplo { display: flex; flex-direction: column; gap: 10px; }

/* Conta */
.pr-conta-email { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #fff; border: 1px solid var(--linha); border-radius: 16px; }
.pr-conta-rotulo { font-size: 14px; color: var(--suave); }
.pr-conta-valor { font-size: 17px; overflow-wrap: anywhere; }
.pr-aviso-ok { color: var(--cor); }
.pr-sair { color: var(--perigo); border-color: var(--perigo); }

/* Ajuda: seções que abrem e fecham. */
.pr-secao { background: #fff; border: 1px solid var(--linha); border-radius: 14px; }
.pr-secao-titulo { min-height: 52px; padding: 14px 16px; font-size: 17px; font-weight: 700; cursor: pointer; display: flex; align-items: center; }
.pr-secao[open] .pr-secao-titulo { padding-bottom: 6px; }
.pr-secao-texto { margin: 0; padding: 0 16px 12px; line-height: 1.5; overflow-wrap: anywhere; }
.pr-secao-titulo:focus-visible { outline: 3px solid var(--destaque); outline-offset: 2px; border-radius: 14px; }