/* [L3] Dados da loja, aparência e horários no painel. Usa os tokens e componentes de base.css. */
.painel-loja { display: grid; gap: var(--espaco-4); }
.painel-loja__dados { display: grid; gap: var(--espaco-2); margin: var(--espaco-3) 0 0; }
.painel-loja__dados div { display: grid; grid-template-columns: minmax(7rem, 35%) 1fr; gap: var(--espaco-3); }
.painel-loja__dados dt { color: var(--cor-texto-suave); font-size: var(--texto-sm); }
.painel-loja__dados dd { margin: 0; overflow-wrap: anywhere; }
.painel-loja__amostra { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--cor-borda-forte); }
.painel-oculto { display: none; }

.painel-form { display: grid; gap: var(--espaco-4); }
.painel-form fieldset { margin: 0; min-width: 0; }
.painel-form legend { float: left; width: 100%; margin-bottom: var(--espaco-4); font: 700 var(--texto-lg)/1.2 var(--fonte-titulo); }
.painel-form legend + * { clear: both; }
.painel-form__acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-3); }
.painel-form__prefixo { display: flex; align-items: center; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-sm); background: var(--cor-superficie); overflow: hidden; }
.painel-form__prefixo span { padding-left: var(--espaco-3); color: var(--cor-texto-suave); white-space: nowrap; }
.campo .painel-form__prefixo input:not([type]) , .campo .painel-form__prefixo input[type="text"] { border: 0; min-width: 0; padding-left: 1px; }
.painel-form__endereco .aviso p { margin: 0; }
.painel-form__endereco .aviso { display: block; }

/* Aparência */
.aparencia { display: grid; gap: var(--espaco-5); }
.aparencia__imagem { display: grid; grid-template-columns: 6rem 1fr; gap: var(--espaco-3); align-items: start; }
.aparencia__imagem img { width: 6rem; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 1px solid var(--cor-borda); background: var(--cor-superficie-2); }
.aparencia__imagem input[type="file"] { max-width: 100%; margin-bottom: var(--espaco-1); font-size: var(--texto-sm); }
.aparencia__cor { width: 4rem; height: var(--toque); padding: 2px; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-sm); background: var(--cor-superficie); cursor: pointer; }
.aparencia__contraste { margin: 0; border-left-color: var(--giz-rosa); background: var(--cor-aviso-fundo); }
.aparencia__contraste[hidden] { display: none; }
.aparencia__temas { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espaco-3); }
.aparencia__tema { position: relative; display: grid; gap: 2px; padding: var(--espaco-2); border: 2px solid var(--cor-borda); border-radius: var(--raio); cursor: pointer; }
.aparencia__tema:has(input:checked) { border-color: var(--cor-texto); box-shadow: 0 0 0 3px var(--giz-verde); }
.aparencia__tema:has(input:focus-visible) { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.aparencia__tema input { position: absolute; opacity: 0; }
.aparencia__tema-nome { font-weight: 700; }
.aparencia__tema-descricao { font-size: var(--texto-xs); color: var(--cor-texto-suave); }
.aparencia__miniatura { display: grid; gap: 4px; height: 4.5rem; padding: 8px; margin-bottom: var(--espaco-1); border-radius: var(--raio-sm); background: var(--m-fundo); }
.aparencia__miniatura span { border-radius: 2px; background: var(--m-linha); }
.aparencia__miniatura span:first-child { width: 55%; background: var(--m-texto); }
.aparencia__tema--grafite { --m-fundo: #141719; --m-texto: #f2f0ea; --m-linha: #2f363b; }
.aparencia__tema--papel { --m-fundo: #f6f1e7; --m-texto: #2b2520; --m-linha: #e0d5c2; }
.aparencia__tema--bistro { --m-fundo: #faf8f4; --m-texto: #1d1b19; --m-linha: #e5dfd5; }
.aparencia__tema--bistro .aparencia__miniatura span:first-child { justify-self: center; width: 40%; }
.aparencia__tema--mercado { --m-fundo: #f1f3ee; --m-texto: #15191c; --m-linha: #ffffff; }
/* Topo do cardápio: cartões-rádio (faixa de cor x banner), envio e recorte do banner. */
.aparencia__topos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espaco-3); }
.aparencia__opcao { position: relative; display: grid; gap: 2px; align-content: start; padding: var(--espaco-2); border: 2px solid var(--cor-borda); border-radius: var(--raio); cursor: pointer; }
.aparencia__opcao:has(input:checked) { border-color: var(--cor-texto); box-shadow: 0 0 0 3px var(--giz-verde); }
.aparencia__opcao:has(input:focus-visible) { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.aparencia__opcao input { position: absolute; opacity: 0; }
.aparencia__mini-topo { position: relative; display: grid; grid-template-rows: 2.25rem .75rem auto auto; justify-items: center; gap: 5px; height: 5rem; margin-bottom: var(--espaco-1); padding-bottom: 8px; overflow: hidden; border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); background: #faf8f4; }
.aparencia__mini-faixa { justify-self: stretch; background: var(--cor-loja, #1e2326); }
.aparencia__opcao--banner .aparencia__mini-faixa { background: radial-gradient(circle at 78% 38%, #f6d78b 0 9%, transparent 10%), linear-gradient(165deg, transparent 55%, #6b4a33 56%), linear-gradient(195deg, transparent 50%, #8a5a3c 51%), linear-gradient(#9cc0d4, #e8c9a0); }
.aparencia__mini-logo { position: absolute; top: 1.5rem; left: 50%; width: 1.5rem; height: 1.5rem; margin-left: -.75rem; border: 2px solid #faf8f4; border-radius: 50%; background: var(--cor-loja, #1e2326); }
.aparencia__mini-linha { width: 50%; height: 5px; margin-top: 2px; border-radius: 2px; background: #d9d2c6; }
.aparencia__mini-linha + .aparencia__mini-linha { width: 32%; margin-top: -2px; }
.aparencia__banner { margin-top: var(--espaco-4); padding-top: var(--espaco-4); border-top: 1px solid var(--cor-borda); }
.aparencia__topo:has(input[value="cor"]:checked) .aparencia__banner { display: none; }
.aparencia__recorte { position: relative; max-width: 30rem; aspect-ratio: 20 / 9; margin-bottom: var(--espaco-2); overflow: hidden; border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); background: var(--cor-superficie-2); }
.aparencia__recorte img { width: 100%; height: 100%; object-fit: cover; }
.aparencia__recorte-vazio { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--espaco-3); color: var(--cor-texto-suave); font-size: var(--texto-sm); text-align: center; }
/* Onde a logo fica no cardápio (centro de baixo): marca tracejada para o dono não pôr texto ali. */
.aparencia__recorte-logo { position: absolute; bottom: -18%; left: 50%; width: 24%; aspect-ratio: 1; transform: translateX(-50%); border: 2px dashed rgb(255 255 255 / .9); border-radius: 50%; background: rgb(0 0 0 / .18); box-shadow: 0 0 0 1px rgb(0 0 0 / .25); }
.aparencia__banner input[type="file"] { width: 100%; max-width: 100%; margin-bottom: var(--espaco-1); font-size: var(--texto-sm); }
.aparencia__banner .botao { justify-self: start; width: auto; }
.aparencia__cor-banner { display: none; }
.aparencia__form:has(input[value="banner"]:checked) .aparencia__cor-banner { display: block; }
.aparencia__previa h2 { margin-bottom: var(--espaco-1); }
.aparencia__celular { width: min(100%, 24.5rem); margin: var(--espaco-3) auto 0; padding: 10px; border-radius: 2.25rem; background: var(--grafite); box-shadow: var(--sombra); }
.aparencia__celular iframe { display: block; width: 100%; height: 40rem; border: 0; border-radius: 1.6rem; background: #fff; }
@media (min-width: 64rem) {
  .conteudo:has(.aparencia) { max-width: 72rem; }
  .aparencia { grid-template-columns: minmax(0, 1fr) 25rem; align-items: start; }
  .aparencia__previa { position: sticky; top: 4.5rem; }
}

/* Horários */
.horarios-semana { display: grid; gap: var(--espaco-2); }
.horarios-dia { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--espaco-2); align-items: center; padding: var(--espaco-2) 0; border: 0; border-top: 1px solid var(--cor-borda); }
.horarios-dia legend { float: left; margin: 0; font: 700 var(--texto-md) var(--fonte-texto); }
.horarios-dia { grid-template-columns: 1fr; }
.horarios-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2); }
.horarios-faixa input { min-height: var(--toque); padding: 0 var(--espaco-2); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-sm); background: var(--cor-superficie); color: var(--cor-texto); font: inherit; font-size: 16px; }
.horarios-faixa__nota { font-size: var(--texto-xs); }
.horarios-erros { margin: 0; padding-left: var(--espaco-4); }
.aparencia [hidden], .painel-form [hidden] { display: none !important; }
.aparencia__imagem > div { min-width: 0; }
.aparencia__imagem input[type="file"] { width: 100%; }