/* [L2] Estilos de seções e pratos do painel. Use os tokens e componentes de base.css. */

/* `hidden` vence o display dos componentes (botões e linhas mostrados/escondidos pelo Stimulus). */
#cardapio-secoes [hidden], .formulario-prato [hidden] { display: none !important; }

.cardapio-subtitulo { margin: var(--espaco-1) 0 0; font-size: var(--texto-sm); }
.cardapio-uso { margin-top: var(--espaco-6); font-size: var(--texto-sm); text-align: center; }

/* Tela Cardápio (spec 003): seções em cartões retráteis ------------------------------------- */
.cabecalho-cardapio { align-items: center; }
.cabecalho-cardapio > div { flex: 1 1 14rem; min-width: 0; }
.cabecalho-cardapio__nova svg { width: 1.125rem; height: 1.125rem; }
@media (max-width: 39.99rem) {
  .cabecalho-cardapio { margin-bottom: var(--espaco-4); }
  .cabecalho-cardapio__nova { width: 100%; }
}

/* Formulário curto de nova seção (frame "nova-secao"). */
#nova-secao:not(:empty) { display: block; margin-bottom: var(--espaco-5); }
.nova-secao { padding: var(--espaco-4); border-color: var(--cor-borda-forte); }
.nova-secao__titulo { font-size: var(--texto-lg); margin-bottom: var(--espaco-3); }
.nova-secao .acoes-formulario { margin-top: var(--espaco-4); }
.horario-opcional { margin: 0 0 var(--espaco-2); }
.horario-opcional__abrir {
  display: inline-flex; align-items: center; gap: var(--espaco-2); min-height: var(--toque);
  font-weight: 700; font-size: var(--texto-sm); cursor: pointer; list-style: none;
  text-decoration: underline; text-decoration-color: var(--giz-verde); text-decoration-thickness: 0.14em;
  text-underline-offset: 0.2em;
}
.horario-opcional__abrir::-webkit-details-marker { display: none; }
.horario-opcional__abrir::before { content: "+"; display: inline-block; width: 0.75em; font-size: var(--texto-lg); line-height: 1; }
.horario-opcional[open] > .horario-opcional__abrir::before { content: "−"; }
.horario-opcional[open] > .horario-opcional__abrir { margin-bottom: var(--espaco-2); }

.cardapio-atalhos {
  display: flex; align-items: center; gap: 0; margin: calc(-1 * var(--espaco-2)) 0 var(--espaco-1);
}
.cardapio-atalhos__contagem { margin-right: auto; font-size: var(--texto-sm); font-weight: 700; color: var(--cor-texto-suave); }
.cardapio-atalhos .botao { min-height: var(--toque); padding-inline: var(--espaco-3); color: var(--cor-texto-suave); font-weight: 600; }
.cardapio-atalhos .botao:hover { color: var(--cor-texto); }

.secoes-cartoes { display: grid; gap: var(--espaco-3); }

.secao-cartao {
  position: relative;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
  box-shadow: var(--sombra);
  scroll-margin-top: 4.5rem; /* o topo do painel é fixo */
}
.secao-cartao:has(> .secao-cartao__detalhes[open]) { border-color: var(--cor-borda-forte); }
/* Menu aberto fica por cima dos cartões seguintes (e dos botões ⋯ deles). */
.secao-cartao:has(> .menu-secao[open]) { z-index: 5; }

/* Cabeçalho: o <summary> ocupa o cartão todo; alça (esquerda) e menu (direita) ficam por cima, fora dele. */
.secao-cartao__cabeca {
  display: flex; align-items: flex-start; gap: var(--espaco-2);
  min-height: 4rem; padding: var(--espaco-3) calc(var(--toque) + var(--espaco-3)) var(--espaco-3) 2.25rem;
  list-style: none; cursor: pointer; border-radius: var(--raio);
  -webkit-tap-highlight-color: transparent;
}
.secao-cartao__cabeca::-webkit-details-marker { display: none; }
.secao-cartao__cabeca:hover { background: color-mix(in srgb, var(--cor-superficie-2) 55%, transparent); }
.secao-cartao__cabeca:focus-visible { outline-offset: -3px; }
.secao-cartao__detalhes[open] > .secao-cartao__cabeca { border-radius: var(--raio) var(--raio) 0 0; }
.secao-cartao__seta {
  flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.3rem;
  color: var(--cor-texto-suave); transition: transform 0.15s;
}
.secao-cartao__detalhes[open] > .secao-cartao__cabeca .secao-cartao__seta { transform: rotate(90deg); color: var(--cor-texto); }
.secao-cartao__textos { display: grid; gap: var(--espaco-1); min-width: 0; }
.secao-cartao__nome { margin: 0; font-size: var(--texto-xl); line-height: 1.2; overflow-wrap: anywhere; }
.secao-cartao__resumo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-1) var(--espaco-2); }
.secao-cartao__contagem { font-size: var(--texto-sm); color: var(--cor-texto-suave); font-weight: 600; margin-right: var(--espaco-1); }
.secao-cartao__horario { flex-basis: 100%; font-size: var(--texto-xs); color: var(--cor-texto-suave); font-weight: 600; }
.selo--oculta { background: var(--cor-superficie-2); border-style: dashed; color: var(--cor-texto-suave); }

.secao-cartao > .secao-cartao__alca { position: absolute; left: var(--espaco-2); top: var(--espaco-2); margin: 0; z-index: 1; } /* x igual à alça dos pratos */
.menu-secao { position: absolute; right: var(--espaco-2); top: var(--espaco-2); z-index: 3; }
.menu-secao__botao { list-style: none; color: var(--cor-texto-suave); }
.menu-secao__botao::-webkit-details-marker { display: none; }
.menu-secao__botao svg { width: 1.375rem; height: 1.375rem; }
.menu-secao[open] > .menu-secao__botao { background: var(--cor-superficie-2); color: var(--cor-texto); }
.menu-secao__painel {
  position: absolute; right: 0; top: calc(100% + var(--espaco-1));
  display: grid; min-width: 15rem; padding: var(--espaco-1);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio);
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.18);
}
.menu-secao__painel form { margin: 0; }
.menu-secao__item {
  display: flex; align-items: center; gap: var(--espaco-3); width: 100%;
  min-height: var(--toque); padding: 0 var(--espaco-3);
  border: 0; border-radius: var(--raio-sm); background: transparent; color: var(--cor-texto);
  font: 600 var(--texto-md)/1.2 var(--fonte-texto); text-align: left; text-decoration: none; cursor: pointer;
}
.menu-secao__item:hover { background: var(--cor-superficie-2); }
.menu-secao__item:focus-visible { outline-offset: -3px; }
.menu-secao__item svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--cor-texto-suave); }
.menu-secao__item--perigo, .menu-secao__item--perigo svg { color: var(--cor-perigo); }
.menu-secao__painel > form:last-child { border-top: 1px solid var(--cor-borda); margin-top: var(--espaco-1); padding-top: var(--espaco-1); }

/* Corpo do cartão aberto: lista de pratos colada nas bordas + "Novo prato". */
.secao-cartao__corpo { border-top: 1px solid var(--cor-borda); }
.secao-cartao .lista-pratos { border: 0; border-radius: 0; background: transparent; }
.secao-cartao__vazio {
  margin: 0; padding: var(--espaco-4) var(--espaco-4) 0;
  color: var(--cor-texto-suave); font-size: var(--texto-sm); text-align: center;
}
.secao-cartao__rodape { padding: var(--espaco-3); }
.lista-pratos + .secao-cartao__rodape { border-top: 1px solid var(--cor-borda); }
.secao-cartao__novo { width: 100%; }
.secao-cartao__novo svg { width: 1.125rem; height: 1.125rem; }
.secao-cartao .prato-linha { scroll-margin-top: 4.5rem; }
.secao-cartao .prato-linha:last-child { border-radius: 0; }

@media (min-width: 40rem) {
  .secao-cartao__rodape { display: flex; justify-content: flex-start; padding: var(--espaco-3) var(--espaco-4); }
  .secao-cartao__novo { width: auto; }
  .secao-cartao__vazio { text-align: left; padding-inline: var(--espaco-5); }
}

.cardapio-inicio .botao { margin-top: var(--espaco-2); }

/* Linha do prato: no celular, nome e preço em cima; ações do dia a dia embaixo, ao alcance do polegar. */
.prato-linha {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas:
    "alca foto principal"
    "acoes acoes acoes";
  align-items: start;
  gap: var(--espaco-2) var(--espaco-3);
  padding: var(--espaco-3);
  background: var(--cor-superficie);
}
.prato-linha .alca { grid-area: alca; }
.prato-linha__foto { grid-area: foto; }
.prato-linha__principal { grid-area: principal; min-width: 0; display: grid; gap: var(--espaco-1); }
.prato-linha__acoes {
  grid-area: acoes; display: flex; align-items: center; gap: var(--espaco-1);
  padding-left: calc(1.5rem + var(--espaco-3)); /* alinha com a foto */
}
.prato-linha__acoes form { margin: 0; }
.prato-linha__form-esgotado { flex: 1; }
.prato-linha__esgotado { width: 100%; min-height: var(--toque); }

.prato-linha__foto img,
.prato-linha__sem-foto {
  width: 4rem; height: 3rem; border-radius: var(--raio-sm); object-fit: cover;
}
.prato-linha__sem-foto {
  display: grid; place-items: center;
  background: var(--cor-superficie-2); color: var(--cor-texto-suave);
  font-family: var(--fonte-titulo); font-weight: 800; font-size: var(--texto-xl);
}
.prato-linha__nome { text-decoration: none; line-height: 1.3; }
.prato-linha__nome:hover { text-decoration: underline; text-decoration-color: var(--giz-verde); }
.prato-linha__selos { display: flex; gap: var(--espaco-1); flex-wrap: wrap; }
.prato-linha__variacoes { margin: 0; }
.prato-linha__aviso { margin: 0; font-size: var(--texto-xs); font-weight: 700; color: var(--cor-texto-suave); }
.prato-linha .campo__erro { font-size: var(--texto-xs); }

/* Esgotado: cinza, sem sumir (igual ao cardápio). Escondido: mais apagado ainda. */
.prato-linha--esgotado .prato-linha__foto,
.prato-linha--esgotado .prato-linha__nome { opacity: 0.6; }
.prato-linha--esgotado .prato-linha__foto img { filter: grayscale(1); }
.prato-linha--escondido { background: var(--cor-superficie-2); }
.prato-linha--escondido .prato-linha__foto,
.prato-linha--escondido .prato-linha__nome { opacity: 0.55; }

@media (min-width: 40rem) {
  .prato-linha {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "alca foto principal acoes";
    align-items: center;
  }
  .prato-linha__acoes { padding-left: 0; }
  .prato-linha__form-esgotado { flex: none; }
  .prato-linha__esgotado { width: 7rem; }
}

/* Preço na linha */
.preco-inline { display: flex; align-items: center; gap: var(--espaco-1); margin: 0; }
.preco-inline__moeda { font-size: var(--texto-sm); color: var(--cor-texto-suave); font-weight: 700; }
.preco-inline__campo {
  width: 6.5rem; min-height: 2.5rem; padding: var(--espaco-1) var(--espaco-2);
  border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
  background: var(--cor-superficie); color: var(--cor-texto);
  font: 700 max(16px, var(--texto-md)) var(--fonte-texto); font-variant-numeric: tabular-nums;
}
.preco-inline__campo:hover { border-color: var(--cor-borda-forte); }
.preco-inline__campo:focus-visible { outline: 3px solid var(--giz-verde); outline-offset: 0; border-color: var(--grafite); }
.preco-inline__campo::placeholder { color: var(--cor-texto-suave); font-weight: 400; font-style: italic; }
.preco-inline--erro .preco-inline__campo { border: 2px solid var(--cor-perigo); }
.preco-inline__salvar { min-height: 2.5rem; padding-inline: var(--espaco-3); }

/* Alça de arrastar + subir/descer */
.alca {
  display: grid; place-items: center; align-self: center;
  width: 1.5rem; height: var(--toque); margin-left: calc(-1 * var(--espaco-1));
  color: var(--cor-texto-suave); cursor: grab; touch-action: none; user-select: none;
  -webkit-user-select: none;
}
.alca svg { width: 1.25rem; height: 1.25rem; }
.ordenando, .ordenando * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

/* Item pego: fica fixo (o JS põe top/left/transform) e "levantado" sobre a lista. */
.arrastando {
  z-index: 50; opacity: 1; will-change: transform;
  border-radius: var(--raio-sm);
  box-shadow: 0 18px 38px -8px rgb(28 34 38 / 0.32), 0 4px 12px rgb(28 34 38 / 0.14);
  outline: 2px solid var(--giz-verde); outline-offset: -2px;
  transition: box-shadow 0.18s ease-out;
}
.secao-cartao.arrastando { border-radius: var(--raio); }
.prato-linha.arrastando { border-top-color: transparent; }
/* Seção pega com o cartão aberto: só o cabeçalho viaja (o corpo volta ao soltar). */
.secao-cartao.arrastando .secao-cartao__corpo { display: none; }
.secao-cartao.arrastando .secao-cartao__detalhes > .secao-cartao__cabeca { border-radius: var(--raio); }
/* Assentando: a sombra volta ao normal junto com o movimento final. */
.arrastando.assentando { box-shadow: var(--sombra); outline-color: transparent; transition: box-shadow 0.2s ease-out, outline-color 0.2s; }
.prato-linha.arrastando.assentando { box-shadow: none; }

/* Espaço reservado no lugar de destino (mesma altura do item; o tracejado fica um pouco para dentro). */
.ordenar-espaco { list-style: none; position: relative; box-sizing: border-box; margin: 0; padding: 0; }
.ordenar-espaco::before {
  content: ""; position: absolute; inset: var(--espaco-1) var(--espaco-2);
  border: 2px dashed color-mix(in srgb, var(--giz-verde) 70%, var(--cor-borda-forte));
  border-radius: var(--raio-sm);
  background: color-mix(in srgb, var(--giz-verde) 10%, transparent);
}
.secoes-cartoes > .ordenar-espaco::before { inset: 0; border-radius: var(--raio); }

/* Realce rápido depois de mover (verde-giz que some). Atrás do conteúdo, por cima do fundo. */
.prato-linha { position: relative; }
.ordenar-realce { isolation: isolate; z-index: 2; } /* por cima do vizinho com quem troca */
.ordenar-realce::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: color-mix(in srgb, var(--giz-verde) 38%, transparent);
  animation: ordenar-realce 0.65s ease-out forwards;
}
@keyframes ordenar-realce { from { opacity: 1; } to { opacity: 0; } }
/* Sem movimento: realce estático curto (o JS tira a classe), sem sombra animada. */
@media (prefers-reduced-motion: reduce) {
  .ordenar-realce::after { animation: none; opacity: 0.8; }
  .arrastando { transition: none; }
}
.mover { margin: 0; }
.botao--icone svg { width: 1.25rem; height: 1.25rem; }
.lista-pratos > :first-child .mover--subir,
.lista-pratos > :last-child .mover--descer { visibility: hidden; }

/* Formulário da seção ------------------------------------------------------------------------ */
.horario-secao { margin: 0 0 var(--espaco-5); padding: var(--espaco-4); }
.horario-secao > legend { padding: 0 var(--espaco-2); }
.dias { border: 0; margin: var(--espaco-3) 0; padding: 0; }
.dias legend { margin-bottom: var(--espaco-2); }
.horas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-3); }
.horas .campo { margin-bottom: 0; }

/* Formulário do prato --------------------------------------------------------------------- */
.formulario-prato fieldset, .formulario-secao fieldset { min-width: 0; }
.formulario-prato > fieldset:not(.cartao) { border: 0; padding: 0; margin: 0 0 var(--espaco-5); }
.formulario-prato legend { padding: 0; margin-bottom: var(--espaco-1); }
.campo--curto input { max-width: 12rem; }
.campo-moeda { display: flex; align-items: center; gap: var(--espaco-2); font-weight: 700; color: var(--cor-texto-suave); }

.lista-erros { margin: var(--espaco-1) 0 0; padding-left: 1.2em; }

/* Foto */
.bloco-foto { margin: 0 0 var(--espaco-5); padding: var(--espaco-4); }
.bloco-foto > legend { padding: 0 var(--espaco-2); }
.bloco-foto__corpo { display: grid; gap: var(--espaco-3); }
.bloco-foto__quadro {
  aspect-ratio: 4 / 3; width: 100%; max-width: 20rem;
  border-radius: var(--raio-sm); overflow: hidden;
  background: var(--cor-superficie-2); display: grid; place-items: center;
}
.bloco-foto__quadro img { width: 100%; height: 100%; object-fit: cover; }
.bloco-foto__quadro svg { width: 3rem; height: 3rem; color: var(--cor-texto-suave); }
.bloco-foto__quadro--vazio { border: 2px dashed var(--cor-borda); }
.bloco-foto__botoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; }
.bloco-foto__botoes label { cursor: pointer; }
.bloco-foto input[type="file"]:focus-visible + label { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.bloco-foto__nome:empty, .bloco-foto .campo__erro:empty { display: none; }
.bloco-foto .campo__ajuda { margin-top: var(--espaco-2); }
@media (min-width: 40rem) {
  .bloco-foto__corpo { grid-template-columns: 16rem 1fr; align-items: center; }
  .bloco-foto__botoes { flex-direction: column; align-items: flex-start; }
}

/* Variações e adicionais */
.itens-com-preco__lista { display: grid; gap: var(--espaco-2); margin: var(--espaco-2) 0; }
.item-com-preco {
  display: grid; grid-template-columns: minmax(0, 1fr) 7rem var(--toque);
  gap: var(--espaco-2); align-items: end;
  padding: var(--espaco-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
  background: var(--cor-superficie);
}
.item-com-preco .campo { margin: 0; }
.item-com-preco label { font-size: var(--texto-xs); }
.item-com-preco__erro { grid-column: 1 / -1; }
.item-com-preco.campo--erro { border-color: var(--cor-perigo); }

/* Chips (etiquetas e dias): checkbox de verdade, com cara de pílula. */
.chips { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin-top: var(--espaco-2); }
.chip { position: relative; display: inline-flex; }
.chip input {
  position: absolute; inset: 0; opacity: 0; margin: 0; pointer-events: none; /* o toque vai para o rótulo */
}
.chip label {
  display: inline-flex; align-items: center; gap: var(--espaco-1);
  min-height: var(--toque); padding: 0 var(--espaco-4);
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-pilula);
  background: var(--cor-superficie); color: var(--cor-texto);
  font-weight: 700; font-size: var(--texto-sm); cursor: pointer; user-select: none;
}
.chip input:checked + label {
  background: var(--giz-verde); color: var(--grafite); border-color: color-mix(in srgb, var(--grafite) 30%, var(--giz-verde));
}
.chip input:checked + label::before { content: "✓"; }
.chip input:focus-visible + label { outline: 3px solid var(--cor-foco); outline-offset: 2px; }

.campo-visivel { margin-top: var(--espaco-2); }
.campo-visivel label { font-weight: 700; }
.campo-visivel + .campo__ajuda { margin: 0 0 var(--espaco-5); }

.acoes-formulario {
  display: flex; gap: var(--espaco-2); flex-wrap: wrap; align-items: center;
  margin-top: var(--espaco-5);
}
@media (max-width: 39.99rem) {
  .acoes-formulario .botao:first-child { flex: 1; }
}

.zona-perigo {
  margin-top: var(--espaco-7); padding-top: var(--espaco-5);
  border-top: 1px solid var(--cor-borda);
}
.botao--perigo-texto { color: var(--cor-perigo); border-color: currentColor; }

/* Aviso "revisar inglês" no formulário do prato (link para /painel/traducoes). */
.ingles-pendente { align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: var(--espaco-5); }

/* Seção com horário que está escondida do cardápio agora. */
.selo--fora-do-horario { background: var(--cor-superficie-2); color: var(--cor-texto); border-style: dashed; }