/* =========================================================================
   Componentes reutilizáveis
   ========================================================================= */

/* ---------- botões ---------- */
.btn{
  --btn-fundo: var(--superficie);
  --btn-borda: var(--borda-forte);
  --btn-cor: var(--tinta);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font:inherit; font-weight:550; font-size:.95rem;
  padding:.62em 1.05em; min-height:44px;      /* alvo de toque confortável */
  background:var(--btn-fundo); color:var(--btn-cor);
  border:1px solid var(--btn-borda); border-radius:var(--r-p);
  cursor:pointer; transition:var(--transicao);
  transition-property:background-color,border-color,transform,box-shadow;
  white-space:nowrap; text-decoration:none;
}
.btn:hover{ background:var(--superficie-2); border-color:var(--tinta-3) }
.btn:active{ transform:translateY(1px) }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none }

.btn--principal{ --btn-fundo:var(--luz); --btn-borda:var(--luz); --btn-cor:#fff }
.btn--principal:hover{ --btn-fundo:var(--luz-clara); --btn-borda:var(--luz-clara) }
:root[data-tema="escuro"] .btn--principal{ --btn-cor:#0a1f1d }

.btn--ambar{ --btn-fundo:var(--ambar); --btn-borda:var(--ambar); --btn-cor:#fff }
.btn--ambar:hover{ --btn-fundo:var(--ambar-claro); --btn-borda:var(--ambar-claro) }
:root[data-tema="escuro"] .btn--ambar{ --btn-cor:#2b1d06 }

.btn--fantasma{ --btn-fundo:transparent; --btn-borda:transparent }
.btn--fantasma:hover{ --btn-fundo:var(--superficie-2); --btn-borda:var(--borda) }
.btn--perigo{ --btn-cor:var(--granada); --btn-borda:color-mix(in srgb,var(--granada) 40%,transparent) }
.btn--perigo:hover{ --btn-fundo:var(--granada-fundo) }
.btn--pequeno{ min-height:34px; padding:.35em .7em; font-size:.85rem }

.btn--bloco{ width:100% }

/* ---------- cartões ---------- */
.cartao{
  background:var(--superficie); border:1px solid var(--borda);
  border-radius:var(--r-m); box-shadow:var(--sombra-1);
}
.cartao__cabeca{
  display:flex; align-items:center; gap:.6rem;
  padding:.85rem 1.1rem; border-bottom:1px solid var(--borda);
}
.cartao__cabeca h3{ font-size:.78rem; font-family:var(--f-texto); font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; color:var(--tinta-3) }
.cartao__fonte{ margin-left:auto; font-size:.75rem; color:var(--tinta-3) }
.cartao__corpo{ padding:1.1rem }

/* ---------- campos ---------- */
.campo{ display:block }
.campo__rotulo{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-3); margin-bottom:.35rem;
}
.campo__dica{ font-size:.8rem; color:var(--tinta-3); margin-top:.35rem }
input,select,textarea{
  width:100%; font:inherit; font-size:.95rem; color:var(--tinta);
  background:var(--papel); border:1px solid var(--borda-forte);
  border-radius:var(--r-p); padding:.6em .75em; min-height:44px;
  transition:border-color var(--transicao), box-shadow var(--transicao);
}
textarea{ min-height:96px; resize:vertical; line-height:1.6 }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--luz);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--luz) 20%, transparent);
}
input::placeholder,textarea::placeholder{ color:var(--tinta-3) }
select{
  appearance:none; padding-right:2.2rem; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.1rem) 1.25rem, calc(100% - .8rem) 1.25rem;
  background-size:5px 5px; background-repeat:no-repeat;
}

/* ---------- etiquetas ---------- */
.etiqueta{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.8rem; font-weight:600; padding:.28em .7em;
  border-radius:999px; border:1px solid var(--borda-forte);
  background:var(--superficie); color:var(--tinta-2);
}
.etiqueta--luz{ background:var(--luz-fundo); border-color:color-mix(in srgb,var(--luz) 45%,transparent); color:var(--luz) }
.etiqueta--ambar{ background:var(--ambar-fundo); border-color:color-mix(in srgb,var(--ambar) 45%,transparent); color:var(--ambar) }
.etiqueta--granada{ background:var(--granada-fundo); border-color:color-mix(in srgb,var(--granada) 45%,transparent); color:var(--granada) }

/* botão-etiqueta (alternável) */
.alternavel{
  font:inherit; cursor:pointer; min-height:36px;
  transition:var(--transicao); transition-property:background-color,border-color,color;
}
.alternavel:hover{ border-color:var(--tinta-3) }
.alternavel[aria-pressed="true"]{
  background:var(--luz); border-color:var(--luz); color:#fff;
}
:root[data-tema="escuro"] .alternavel[aria-pressed="true"]{ color:#0a1f1d }

/* ---------- estados vazios ---------- */
.vazio{ text-align:center; padding:2.5rem 1.25rem; color:var(--tinta-3) }
.vazio strong{ display:block; font-family:var(--f-titulo); font-size:1.15rem; color:var(--tinta-2); margin-bottom:.4rem }
.vazio p{ max-width:44ch; margin:0 auto 1rem; font-size:.9rem }

/* ---------- aviso ---------- */
.aviso{
  display:flex; gap:.75rem; padding:.85rem 1rem;
  border:1px solid color-mix(in srgb,var(--ambar) 35%,transparent);
  background:var(--ambar-fundo); border-radius:var(--r-m);
  font-size:.88rem; color:var(--tinta-2);
}
.aviso svg{ flex:none; width:20px; height:20px; color:var(--ambar) }

/* ---------- recado flutuante ---------- */
.recado{
  position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:400;
  transform:translate(-50%,10px); opacity:0; pointer-events:none;
  background:var(--tinta); color:var(--papel);
  padding:.65rem 1.15rem; border-radius:999px; font-size:.88rem; font-weight:550;
  box-shadow:var(--sombra-3); transition:var(--transicao); transition-property:opacity,transform;
}
.recado[data-visivel="true"]{ opacity:1; transform:translate(-50%,0) }
@media (min-width:900px){ .recado{ bottom:24px } }

/* ---------- diálogo ---------- */
dialog{
  border:1px solid var(--borda); border-radius:var(--r-g); padding:0;
  background:var(--superficie); color:var(--tinta);
  box-shadow:var(--sombra-3); max-width:min(560px,calc(100vw - 2rem)); width:100%;
}
dialog::backdrop{ background:rgba(20,16,12,.55); backdrop-filter:blur(3px) }
.dialogo__cabeca{ display:flex; align-items:center; gap:.75rem; padding:1.1rem 1.25rem .5rem }
.dialogo__cabeca h2{ font-size:1.25rem }
.dialogo__corpo{ padding:.5rem 1.25rem 1.25rem }
.dialogo__pe{ display:flex; gap:.6rem; justify-content:flex-end; padding:0 1.25rem 1.25rem }

/* ---------- barra de progresso ---------- */
.medidor{ height:6px; background:var(--superficie-2); border-radius:99px; overflow:hidden }
.medidor > i{ display:block; height:100%; border-radius:99px; transition:width 320ms cubic-bezier(.2,.7,.3,1) }

/* O "×" de remover dentro de uma etiqueta precisa de área de toque própria,
   senão vira um alvo de 10 px. A exceção é o botão que abre a descrição: ele
   é o próprio texto da etiqueta e não pode caber num quadrado de 22 px. */
.etiqueta button:not(.etiqueta__abrir){
  display:grid; place-items:center;
  width:22px; height:22px; flex:none; margin:-2px -6px -2px 0;
  border:none; background:none; cursor:pointer;
  color:var(--tinta-3); font-size:1rem; line-height:1; border-radius:50%;
}
.etiqueta button:not(.etiqueta__abrir):hover{ background:var(--granada-fundo); color:var(--granada) }

/* A etiqueta cresce com o texto e nunca passa da largura da caixa. */
.etiqueta{ max-width:100%; text-align:left }
.etiqueta__abrir{ min-width:0; overflow-wrap:anywhere }