/* Interface do gerador de cardapios da Gi Cruz.
 *
 * Mesma paleta da folha impressa -- amostrada por pixel do template do Canva.
 * O usuario e um senhor com pressa, no celular, na vespera do evento: tipo grande,
 * alvo de toque grande, um caminho so. Nada de menu.
 */

:root {
    --creme: #FAF8F5;
    --vinho: #5C1A22;
    --vinho-borda: #571621;
    --dourado: #D69A3A;
    --areia: #F0E1C7;
    --tinta: #2B1418;
    --cinza: #7A6A6C;
    --erro: #9B2C2C;

    --raio: 10px;
    --sombra: 0 1px 2px rgba(43, 20, 24, .06), 0 8px 24px rgba(43, 20, 24, .07);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--creme);
    color: var(--tinta);
    -webkit-text-size-adjust: 100%;
}

/* ------------------------------------------------------------------ login */

.tela-login {
    display: flex; align-items: center; justify-content: center;
    min-height: 100dvh; padding: 24px;
}

.cartao-login {
    width: 100%; max-width: 26rem; text-align: center;
    background: #fff; border-radius: var(--raio); box-shadow: var(--sombra);
    padding: 32px 28px 36px;
}

/* O selo e um recorte retangular do Canva, com o creme da folha embutido no fundo.
   Sobre o cartao branco isso aparece como um quadrado de tom diferente. O logo e
   circular, entao o recorte redondo resolve sem precisar editar o PNG. */
.selo-login {
    width: 132px; height: 132px; object-fit: contain;
    border-radius: 50%; margin-bottom: 12px;
}

.cartao-login h1 {
    font-size: 26px; font-weight: 700; color: var(--vinho); letter-spacing: .01em;
}

.cartao-login .sub { color: var(--cinza); margin: 6px 0 22px; font-size: 15px; }

label {
    display: block; text-align: left; font-size: 14px; font-weight: 600;
    color: var(--vinho); margin: 14px 0 6px;
}

input[type="text"], input[type="password"], textarea, input[type="number"] {
    width: 100%; font: inherit; font-size: 17px;
    padding: 13px 14px; border: 1.5px solid #E4D9D3; border-radius: var(--raio);
    background: #fff; color: var(--tinta);
}

input:focus, textarea:focus, select:focus {
    outline: 3px solid rgba(214, 154, 58, .35); outline-offset: 1px;
    border-color: var(--dourado);
}

button {
    font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
    width: 100%; margin-top: 22px; padding: 14px 18px;
    background: var(--vinho); color: #fff;
    border: none; border-radius: var(--raio);
}

button:hover { background: var(--vinho-borda); }
button:active { transform: translateY(1px); }

.erro {
    background: #FDECEC; color: var(--erro); border: 1px solid #F5C6C6;
    border-radius: var(--raio); padding: 11px 13px; font-size: 15px;
    margin-bottom: 6px; text-align: left;
}

/* -------------------------------------------------------------- aplicacao */

.topo-app {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px 18px; background: var(--vinho); color: #fff; font-size: 15px;
}
.topo-app .marca strong { font-weight: 800; }
.topo-app .quem { opacity: .85; font-size: 14px; }
.topo-app a { color: var(--areia); }

.app { max-width: 46rem; margin: 0 auto; padding: 18px 16px 60px; }

.zona {
    background: #fff; border-radius: var(--raio); box-shadow: var(--sombra);
    padding: 22px 20px; margin-bottom: 18px;
}
.zona.oculta { display: none; }

.zona h2 {
    font-size: 19px; color: var(--vinho); display: flex; align-items: center; gap: 10px;
}
.passo {
    display: inline-grid; place-items: center; width: 28px; height: 28px;
    border-radius: 50%; background: var(--dourado); color: #fff;
    font-size: 15px; font-weight: 800;
}

.ajuda { color: var(--cinza); font-size: 14.5px; margin: 8px 0 4px; }
.ajuda em { color: var(--vinho); font-style: normal; }
.opcional { color: var(--cinza); font-weight: 400; }

textarea { resize: vertical; min-height: 8rem; line-height: 1.45; }

.estado { font-size: 14.5px; margin-top: 10px; min-height: 1.2em; }
.estado.bom { color: #2E6B3E; }
.estado.ruim { color: var(--erro); }

button.secundario { background: #fff; color: var(--vinho); border: 1.5px solid var(--vinho); }
button.secundario:hover { background: var(--creme); }
button.secundario.destaque { background: var(--dourado); border-color: var(--dourado); color: #fff; }

.botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.botoes button { flex: 1 1 10rem; margin-top: 16px; }

button.link {
    width: auto; margin: 0; padding: 4px 6px; background: none; color: var(--vinho);
    font-size: 14.5px; font-weight: 600; text-decoration: underline;
}
button.link:hover { background: none; color: var(--vinho-borda); }
button.link.apagar { color: var(--erro); }

/* tabela editavel */
.secao-bloco {
    border: 1.5px solid #EEE3DC; border-radius: var(--raio);
    padding: 14px; margin-top: 14px; background: #FFFDFB;
}
.s-titulo { font-weight: 700; }
.s-nota { margin-top: 8px; font-size: 15px; }
.item-linha { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.item-linha .i-nome { flex: 1 1 auto; }
.item-linha .i-preco { flex: 0 0 6.5rem; text-align: right; }
.secao-rodape { display: flex; justify-content: space-between; margin-top: 10px; }

/* previa */
/* A folha entra em tamanho real (794x1123 = A4 a 96dpi) e o JS a reduz por
   transform ate caber na largura da caixa. A caixa recebe a altura ja escalada,
   senao sobraria um buraco branco embaixo da previa. */
.previa-caixa {
    margin-top: 14px; border: 1.5px solid #EEE3DC; border-radius: var(--raio);
    overflow: hidden; background: var(--creme);
    min-height: 12rem;
}
#previa {
    display: block; border: 0; transform-origin: top left;
    width: 794px; height: 1123px;
}

/* salvos */
.salvos { list-style: none; margin-top: 10px; }
.salvos li {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid #F2E9E4;
}
.salvos li .quando { color: var(--cinza); font-size: 13.5px; margin-left: auto; }

/* O "x" de remover item e alvo de dedo, nao de mouse: 44px e o minimo confortavel. */
.item-linha .apagar {
    flex: 0 0 auto; width: 44px; min-height: 44px;
    font-size: 20px; line-height: 1; text-decoration: none;
}

@media (max-width: 30rem) {
    .app { padding: 12px 10px 48px; }
    .zona { padding: 18px 14px; }
    /* Nome ocupa a linha inteira; preco fica curto ao lado do "x" em vez de esticar
       ate a borda, que fazia um campo de 6 digitos parecer campo de texto longo. */
    .item-linha { flex-wrap: wrap; }
    .item-linha .i-nome { flex: 1 1 100%; }
    .item-linha .i-preco { flex: 0 1 8rem; }
}