/* =====================================================================
   VISUAL DO AMIGO SECRETO
   Usa as cores do site (variáveis de _nucleo/estilo.css), então
   funciona nos modos claro e escuro. Classes começam com .as-
   O vermelho de Natal (--as-natal) é só desta ferramenta.
   Sem animação contínua: só um efeito curto ao revelar o nome.
   ===================================================================== */
.as, .as-pagina { --as-natal: #C8102E; --as-natal-suave: #FDECEE; --as-natal-texto: #A10D25; --as-verde: #11804F; }
[data-tema="escuro"] .as, [data-tema="escuro"] .as-pagina { --as-natal: #FF6B7F; --as-natal-suave: #3A1419; --as-natal-texto: #FF8D9C; --as-verde: #4CD39A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .as, :root:not([data-tema="claro"]) .as-pagina { --as-natal: #FF6B7F; --as-natal-suave: #3A1419; --as-natal-texto: #FF8D9C; --as-verde: #4CD39A; }
}

/* ---------- Base ---------- */
.as { display: grid; gap: 1rem; margin-top: .4rem; }
.as [hidden] { display: none !important; }
.as-duas { display: grid; gap: 1rem; min-width: 0; }
.as-cartao, .as-resultado, .as-rev { padding: 1.1rem 1rem 1.2rem; min-width: 0; }
.as-tit { display: flex; align-items: center; gap: .5rem; font-size: 1.12rem; margin: 0 0 .9rem; }
.as-tit-2 { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--borda); }
.as-num { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--as-natal); color: #fff; font-size: .82rem; font-weight: 800; }
.as-ajuda { font-size: .86rem; color: var(--texto-2); line-height: 1.5; margin: .6rem 0 0; }
.as-explica { color: var(--texto-2); margin: 0 0 .9rem; }
.as-rotulo { margin: .8rem 0 .4rem; font-size: .9rem; font-weight: 650; color: var(--titulo); }
.as-link { border: 0; background: none; padding: 0; font: inherit; font-size: .88rem; color: var(--primaria); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.as-contagem { margin: 0; padding: .6rem .9rem; border-radius: 14px; background: var(--as-natal-suave); color: var(--titulo); font-weight: 600; font-size: .95rem; text-align: center; }
.as-contagem b { color: var(--as-natal-texto); }

/* ---------- Grupos salvos ---------- */
.as-grupos { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.as-grupos .as-rotulo { margin: 0; }
.as-grupos .chips, .as-atalhos { display: flex; flex-wrap: wrap; gap: .4rem; }
.as [aria-pressed="true"].chip { background: var(--as-natal); border-color: var(--as-natal); color: #fff; }
.as-atalhos { margin: -.3rem 0 .9rem; }

/* ---------- Campos ---------- */
.as-campo { display: grid; gap: .35rem; margin-bottom: .8rem; font-size: .9rem; font-weight: 650; color: var(--titulo); min-width: 0; }
.as-campo small { font-weight: 500; color: var(--texto-2); }
.as-campo input, .as-campo select, .as-campo textarea, .as-regra-add select, .as-desejos-edit input { width: 100%; min-width: 0; min-height: 48px; border: 1.5px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie); padding: .5rem .75rem; font: inherit; font-size: 1rem; font-weight: 600; color: var(--titulo); outline: none; }
.as-campo textarea { min-height: 64px; resize: vertical; font-weight: 500; }
.as-campo input:focus, .as-campo select:focus, .as-campo textarea:focus, .as-regra-add select:focus, .as-desejos-edit input:focus { border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-suave); }
.as-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
.as-com-unidade { display: flex; align-items: center; gap: .5rem; }
.as-com-unidade em { font-style: normal; font-weight: 700; color: var(--texto-2); }
.as-com-unidade input { max-width: 160px; }
.as-erro { margin: .9rem 0 0; padding: .7rem .85rem; border-radius: 12px; background: #FDECEC; color: var(--perigo); font-weight: 650; font-size: .92rem; }
[data-tema="escuro"] .as-erro { background: #3A1A1A; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .as-erro { background: #3A1A1A; } }

/* ---------- Participantes ---------- */
.as-add { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 .6rem; align-items: end; }
.as-add .as-campo { margin-bottom: .6rem; }
.as-add .btn { min-height: 48px; margin-bottom: .6rem; }
.as-pessoas { list-style: none; counter-reset: as-p; margin: .8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.as-pessoas li { counter-increment: as-p; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .25rem .25rem .7rem; border: 1px solid var(--borda); border-radius: 99px; background: var(--superficie); font-weight: 650; color: var(--titulo); max-width: 100%; }
.as-pessoas li::before { content: counter(as-p); font-size: .72rem; font-weight: 800; color: var(--texto-2); }
.as-p-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-pessoas small { font-size: .7rem; color: var(--as-verde); font-weight: 700; }
.as-tirar { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; font-size: 1.2rem; line-height: 1; color: var(--texto-2); }
.as-conta { margin: .6rem 0 0; font-size: .88rem; font-weight: 650; color: var(--texto-2); }

/* ---------- Regras ---------- */
.as-regras-bloco { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--borda); }
.as-regras-bloco summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 750; color: var(--titulo); }
.as-regras-bloco summary small { font-weight: 500; color: var(--texto-2); }
.as-regra-add { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .5rem; align-items: center; margin-top: .8rem; }
.as-regra-add > span { font-size: .82rem; font-weight: 650; color: var(--texto-2); }
.as-regra-add .btn { grid-column: 1 / -1; }
.as-regras { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .4rem; }
.as-regras li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem .3rem .3rem .8rem; border-radius: 12px; background: var(--superficie-2); font-weight: 650; color: var(--titulo); }
.as-regras em { font-style: normal; font-weight: 500; color: var(--texto-2); }
.as-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; margin: 1.2rem 0 0; cursor: pointer; }
.as-check input { width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--as-natal); }
.as-check b { display: block; color: var(--titulo); }
.as-check small { display: block; font-size: .84rem; color: var(--texto-2); line-height: 1.45; }
.as-sortear { width: 100%; margin-top: 1.2rem; min-height: 54px; font-size: 1.05rem; background: var(--as-natal); border-color: var(--as-natal); color: #fff; }
[data-tema="escuro"] .as-sortear { color: #1A0609; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .as-sortear, :root:not([data-tema="claro"]) .as-acoes .btn:first-child, :root:not([data-tema="claro"]) .as-l-enviar { color: #1A0609; } }
.as-privado { margin: 1rem 0 0; font-size: .82rem; line-height: 1.6; color: var(--texto-2); }
.as-privado svg { display: inline-block; width: 16px; height: 16px; margin-right: .25rem; vertical-align: -3px; color: var(--sucesso); }
.as-privado .as-link { font-size: .82rem; }

/* ---------- Resultado ---------- */
.as-vazio { text-align: center; padding: .6rem .3rem; }
.as-vazio .as-tit { justify-content: center; }
.as-vazio-ico { font-size: 3.4rem; line-height: 1; margin: .2rem 0 .6rem; }
.as-passos { text-align: left; margin: 0 auto 1.1rem; max-width: 420px; padding-left: 1.3rem; color: var(--texto-2); }
.as-passos li { margin: .45rem 0; }
.as-passos b { color: var(--titulo); }
.as-exemplo-aviso { margin: 0 0 .9rem; padding: .55rem .75rem; border-radius: 12px; background: var(--superficie-2); font-size: .86rem; color: var(--texto-2); }
.as-progresso { margin: 0 0 .9rem; }
.as-trilho { height: 12px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.as-trilho span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--as-verde), #5EE6C8); transition: width .3s; }
.as-progresso p { margin: .4rem 0 0; font-size: .86rem; font-weight: 700; color: var(--titulo); }
.as-mudou { padding: .7rem .85rem; border-radius: 12px; background: #FFF4DB; color: #7A4F00; font-size: .92rem; }
[data-tema="escuro"] .as-mudou { background: #3A2E10; color: #FFD37A; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .as-mudou { background: #3A2E10; color: #FFD37A; } }
.as-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.as-l { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .4rem; align-items: center; padding: .45rem .45rem .45rem .8rem; border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); }
.as-l-nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem; min-width: 0; font-weight: 750; color: var(--titulo); overflow-wrap: anywhere; }
.as-l-nome small { font-size: .74rem; font-weight: 650; color: var(--as-verde); }
.as-l-check { color: var(--as-verde); }
.as-l-ok { background: var(--superficie-2); }
.as-l-enviar { min-height: 42px; padding: .3rem .8rem; background: #1FA855; border-color: #1FA855; color: #fff; }
.as-l-enviar svg { width: 18px; height: 18px; }
.as-l-ok .as-l-enviar { background: var(--superficie); border-color: var(--borda); color: var(--titulo); }
.as-l-copiar { width: 42px; height: 42px; }
.as-acoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin-top: 1rem; }
.as-acoes .btn { min-width: 0; }
.as-acoes .btn:first-child { background: var(--as-natal); border-color: var(--as-natal); color: #fff; }
[data-tema="escuro"] .as-acoes .btn:first-child, [data-tema="escuro"] .as-l-enviar { color: #1A0609; }

/* ---------- Página do participante ---------- */
.as-rev-cabeca { margin-bottom: 0; }
.as-rev { text-align: center; max-width: 560px; margin: 0 auto; width: 100%; }
.as-rev-grupo { margin: 0 0 .3rem; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--as-natal-texto); }
.as-rev-ola { margin: 0 0 .5rem; font-size: 1.5rem; }
.as-presente { display: grid; justify-items: center; gap: .4rem; width: 100%; margin: .6rem 0 .2rem; padding: 1.3rem 1rem; border: 2px dashed var(--as-natal); border-radius: 20px; background: var(--as-natal-suave); font: inherit; font-weight: 800; font-size: 1.05rem; color: var(--as-natal-texto); cursor: pointer; }
.as-presente-ico { font-size: 4rem; line-height: 1; }
.as-presente:focus-visible { outline: 3px solid var(--primaria); outline-offset: 3px; }
.as-rev-pre { margin: .4rem 0 0; font-weight: 650; color: var(--texto-2); }
.as-rev-nome { margin: .2rem 0 .3rem; font-family: var(--fonte-titulo, inherit); font-size: clamp(2.1rem, 10vw, 3.2rem); font-weight: 800; line-height: 1.1; color: var(--as-natal-texto); overflow-wrap: anywhere; }
.as-rev-nome.as-escondido { filter: blur(14px); user-select: none; }
.as-surgir { animation: as-surgir .6s ease-out 1; }
@keyframes as-surgir { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .as-surgir { animation: none; } }
.as-fatos { display: grid; gap: .5rem; margin: 1rem 0 0; text-align: left; }
.as-fatos div { display: grid; gap: .1rem; padding: .6rem .75rem; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); }
.as-fatos dt { font-size: .78rem; font-weight: 650; color: var(--texto-2); }
.as-fatos dd { margin: 0; display: grid; overflow-wrap: anywhere; }
.as-fatos strong { font-size: 1rem; color: var(--titulo); }
.as-fatos small { font-size: .8rem; font-weight: 650; color: var(--as-natal-texto); }
.as-recado { margin: .8rem 0 0; padding: .7rem .85rem; border-radius: 12px; background: var(--superficie-2); text-align: left; overflow-wrap: anywhere; }
.as-proximos { display: grid; gap: .5rem; margin-top: 1rem; text-align: left; }
.as-proximo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: center; padding: .75rem .9rem; border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); text-decoration: none; color: var(--titulo); }
.as-proximo > span:first-child { font-size: 1.6rem; }
.as-proximo small { display: block; font-size: .82rem; color: var(--texto-2); }

/* ---------- Lista de desejos ---------- */
.as-lista { max-width: 640px; }
.as-ver-tit { margin: 0 0 .6rem; font-size: 1.35rem; }
.as-desejos { margin: 0; padding-left: 1.3rem; display: grid; gap: .5rem; }
.as-desejos li { font-weight: 650; color: var(--titulo); overflow-wrap: anywhere; }
.as-desejos a { display: inline-block; font-size: .85rem; font-weight: 700; }
.as-desejos .as-sem { list-style: none; margin-left: -1.3rem; font-weight: 500; color: var(--texto-2); }
.as-desejos-edit { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .6rem; }
.as-desejos-edit li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem; padding: .5rem; border-radius: 14px; background: var(--superficie-2); }
.as-desejos-edit input[data-c="1"] { grid-column: 1; min-height: 42px; font-size: .9rem; font-weight: 500; }
.as-desejos-edit .as-tirar { grid-column: 2; grid-row: 1; align-self: center; }
#as-l-mais { margin-bottom: 1rem; }

/* ---------- Guias ---------- */
.as-guias { display: grid; gap: .5rem; margin: .6rem 0 1.2rem; }
.as-guia { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .75rem .9rem; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); text-decoration: none; color: var(--titulo); }
.as-guia svg { width: 18px; height: 18px; flex: none; color: var(--texto-2); }
.as-ideias { display: grid; gap: .8rem; margin: .6rem 0 1rem; }
.as-ideias-grupo { padding: .8rem .95rem; border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); }
.as-ideias-grupo h3 { margin: 0 0 .4rem; font-size: 1rem; }
.as-ideias-grupo ul { margin: 0; padding-left: 1.2rem; }
.as-ideias-grupo li { margin: .25rem 0; }
.as-ideias-grupo small { color: var(--texto-2); }
.as-nota { font-size: .82rem; color: var(--texto-2); }
.as-h2-ferramenta { font-size: 1.2rem; margin: 1.6rem 0 .2rem; }
.as-artigo-topo { margin-bottom: 0; }

/* ---------- Janela da imagem ---------- */
.as-folha .folha-in { max-width: 460px; }
.as-img-opcoes { display: grid; gap: .5rem; margin: .6rem 0 .8rem; }
.as-img-opcoes .chips { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.as-img-opcoes [aria-checked="true"] { background: var(--primaria); color: var(--sobre-primaria); border-color: var(--primaria); }
.as-img-canvas { display: block; width: auto; height: min(46vh, 440px); max-width: 100%; margin: 0 auto; border-radius: 14px; box-shadow: var(--sombra); aspect-ratio: 9 / 16; }
.as-img-canvas.as-img-post { aspect-ratio: 1 / 1; height: auto; width: min(100%, 320px); }
.as-img-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .9rem; }

/* ---------- Telas maiores ---------- */
@media (min-width: 560px) {
  .as-add { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto; }
  .as-regra-add { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; }
  .as-regra-add .btn { grid-column: auto; }
  .as-acoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-desejos-edit li { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto; }
  .as-desejos-edit input[data-c="1"] { grid-column: 2; min-height: 48px; }
  .as-desejos-edit .as-tirar { grid-column: 3; }
}
@media (min-width: 960px) {
  .as-duas { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
  .as-resultado { position: sticky; top: 84px; }
  .as-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .as-add .btn { grid-column: 1 / -1; }
  .as-guias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  .as-privado, .as-regras-bloco { display: none !important; }
}