/*
 * CSS da área do cliente, escrito à mão como o do painel: sem build, vai para o servidor como
 * está. Pensado primeiro para o celular (decisão dele na Fase 3): uma coluna, alvos de toque de
 * pelo menos 44 px, fonte de 16 px nos campos para o iPhone não dar zoom ao tocar neles.
 */

:root {
    --tinta:        #1c1917;
    --tinta-fraca:  #57534e;
    --papel:        #fbf7f4;
    --papel-alto:   #ffffff;
    --linha:        #e7e0da;
    --destaque:     #c2185b;
    --destaque-escuro: #9c1349;
    --erro:         #b91c1c;
    --erro-fundo:   #fef2f2;
    --bom:          #15803d;
    --bom-fundo:    #f0fdf4;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--tinta);
    background: var(--papel);
}

a { color: var(--destaque); }

/* --- Topo --- */

.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--papel-alto);
    border-bottom: 1px solid var(--linha);
}

.topo .marca {
    font-weight: 700;
    color: var(--tinta);
    text-decoration: none;
}

.topo form { margin: 0; }

/* --- Miolo --- */

.miolo {
    max-width: 30rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.miolo.largo { max-width: 60rem; }

h1 { font-size: 1.375rem; margin: 0 0 0.25rem; }

.subtitulo { margin: 0 0 1.5rem; color: var(--tinta-fraca); }

.cartao {
    padding: 1.25rem;
    background: var(--papel-alto);
    border: 1px solid var(--linha);
    border-radius: 8px;
}

/* --- Formulário --- */

.campo { margin-bottom: 1rem; }

.campo label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.campo input[type="email"],
.campo input[type="password"],
.campo input[type="tel"],
.campo input[type="text"] {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 16px;
    color: inherit;
    background: var(--papel-alto);
    border: 1px solid var(--linha);
    border-radius: 6px;
}

.campo input:focus {
    outline: 2px solid var(--destaque);
    outline-offset: -1px;
    border-color: var(--destaque);
}

.campo .dica { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--tinta-fraca); }

.marcar {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
    font-size: 0.9375rem;
}

.marcar input { width: 1.25rem; height: 1.25rem; margin: 0.125rem 0 0; flex: none; }

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--destaque);
    border: 1px solid transparent;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
}

.botao:hover { background: var(--destaque-escuro); }

.botao-largo { width: 100%; }

.botao-discreto {
    color: var(--tinta-fraca);
    background: transparent;
    border-color: var(--linha);
}

.botao-discreto:hover { color: var(--tinta); background: var(--papel); }

.rodape-do-formulario { margin: 1.25rem 0 0; text-align: center; font-size: 0.9375rem; }

/* --- Avisos --- */

.erros, .aviso {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
}

.erros { color: var(--erro); background: var(--erro-fundo); }
.erros ul { margin: 0; padding-left: 1.25rem; }
.erros li + li { margin-top: 0.25rem; }

.aviso-bom { color: var(--bom); background: var(--bom-fundo); }

/* --- Texto corrido (aviso de privacidade) --- */

.texto h2 { font-size: 1.0625rem; margin: 1.75rem 0 0.5rem; }
.texto p, .texto li { color: var(--tinta); }
.texto ul { padding-left: 1.25rem; }

.rascunho {
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    color: #92400e;
    background: #fffbeb;
    border: 1px dashed #f59e0b;
    border-radius: 6px;
}

/* --- Editor (Fase 3) --- */

.moldura-do-editor {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
    /* O gesto no canvas é do editor, não da página: sem isto o celular rola ou dá zoom. */
    touch-action: none;
}

.moldura-do-editor canvas {
    box-shadow: 0 1px 4px rgba(28, 25, 23, 0.25);
}

/*
 * Canvas e painéis (etapa 8). No celular, um embaixo do outro; a partir de 52rem, os painéis
 * numa coluna à direita. O canvas mede a largura da moldura para escolher a escala.
 */
.area-do-editor {
    display: grid;
    /* `minmax(0, …)`: sem isto a coluna cresce até o conteúdo mínimo, e um nome de camada
       comprido (que não quebra) empurrava a página para 504 px num celular de 390. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 52rem) {
    .area-do-editor { grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; }
}

.palco { min-width: 0; }

.painel {
    padding: 0.75rem;
    background: var(--papel-alto);
    border: 1px solid var(--linha);
    border-radius: 8px;
}

.painel h2 { font-size: 1rem; margin: 0 0 0.5rem; }

.painel-vazio { margin: 0; color: var(--tinta-fraca); font-size: 0.9375rem; }

.lista-de-camadas { list-style: none; margin: 0; padding: 0; }

.lista-de-camadas .camada {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 6px;
}

.lista-de-camadas .camada + .camada { margin-top: 0.125rem; }

.lista-de-camadas .camada.selecionada { background: #fce7f0; }

.lista-de-camadas button {
    min-height: 44px;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--tinta);
    cursor: pointer;
    border-radius: 6px;
}

.lista-de-camadas .rotulo {
    flex: 1;
    min-width: 0;
    padding: 0 0.5rem;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lista-de-camadas .camada.oculta .rotulo { color: var(--tinta-fraca); font-style: italic; }

.lista-de-camadas .icone { width: 44px; flex: none; font-size: 1.1rem; }

.lista-de-camadas .icone[data-acao="visivel"][aria-pressed="true"] { opacity: 0.35; }

.lista-de-camadas button:hover { background: var(--papel); }

.lista-de-camadas button:focus-visible,
.barra-da-camada button:focus-visible,
.barra-da-camada input:focus-visible { outline: 2px solid var(--destaque); outline-offset: 1px; }

.barra-da-camada {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--linha);
}

.barra-da-camada label { display: block; font-size: 0.875rem; color: var(--tinta-fraca); }

.barra-da-camada input {
    width: 100%;
    min-height: 44px;
    margin: 0.25rem 0 0.5rem;
    padding: 0 0.625rem;
    font-size: 16px;
    border: 1px solid var(--linha);
    border-radius: 6px;
}

.barra-da-camada .acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.barra-da-camada .acoes button {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 0 0.75rem;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--tinta);
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: 6px;
    cursor: pointer;
}

.barra-da-camada .acoes button:disabled { opacity: 0.45; cursor: default; }

.barra-da-camada .acoes button.perigo { color: #fff; background: var(--erro); border-color: var(--erro); }

/* O que o template trava nesta camada (Fase 3, etapa 10). */
.barra-da-camada .fixado { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--tinta-fraca); }

.lista-de-camadas .icone:disabled { opacity: 0.3; cursor: default; }

.paineis { display: grid; gap: 1rem; min-width: 0; }

/* Painel de texto (etapa 8b). */
.painel .adicionar {
    width: 100%;
    min-height: 44px;
    font: inherit;
    color: var(--destaque);
    background: var(--papel);
    border: 1px dashed var(--destaque);
    border-radius: 6px;
    cursor: pointer;
}

.painel .adicionar:disabled { opacity: 0.45; cursor: default; }

.formulario-de-texto { margin-top: 0.75rem; }

.formulario-de-texto .campo { margin-bottom: 0.625rem; min-width: 0; }

.formulario-de-texto .campo label,
.formulario-de-texto legend { display: block; font-size: 0.875rem; color: var(--tinta-fraca); }

.formulario-de-texto textarea,
.formulario-de-texto select,
.formulario-de-texto input[type="number"] {
    width: 100%;
    min-height: 44px;
    margin-top: 0.25rem;
    padding: 0.5rem 0.625rem;
    font: inherit;
    font-size: 16px;
    border: 1px solid var(--linha);
    border-radius: 6px;
    background: var(--papel-alto);
}

.formulario-de-texto textarea { resize: vertical; }

.formulario-de-texto input[type="color"] {
    display: block;
    width: 100%;
    height: 44px;
    margin-top: 0.25rem;
    padding: 2px;
    border: 1px solid var(--linha);
    border-radius: 6px;
    background: var(--papel-alto);
}

.formulario-de-texto .linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }

.formulario-de-texto .linha[hidden] { display: none; }

.formulario-de-texto .dica { margin: -0.375rem 0 0.625rem; font-size: 0.8125rem; color: var(--tinta-fraca); }

.formulario-de-texto .marcar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    cursor: pointer;
}

.formulario-de-texto .marcar input { width: 1.25rem; height: 1.25rem; }

.formulario-de-texto .alinhamento { margin: 0 0 0.25rem; padding: 0; border: 0; }

.formulario-de-texto .alinhamento label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 44px;
    margin-right: 0.75rem;
    color: var(--tinta);
    font-size: 1rem;
}

/* Painel de imagens (etapa 8c). */
#painel-imagens .campo { margin-bottom: 0.625rem; }

#painel-imagens label { display: block; font-size: 0.875rem; color: var(--tinta-fraca); }

#painel-imagens input,
#painel-imagens select {
    width: 100%;
    min-height: 44px;
    margin-top: 0.25rem;
    padding: 0.5rem 0.625rem;
    font: inherit;
    font-size: 16px;
    border: 1px solid var(--linha);
    border-radius: 6px;
    background: var(--papel-alto);
}

#painel-imagens .situacao { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--tinta-fraca); }

#painel-imagens .situacao:empty { display: none; }

.grade-de-imagens {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.375rem;
    max-height: 22rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.grade-de-imagens button {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 0.25rem;
    background:
        conic-gradient(#eeeae6 25%, #fff 0 50%, #eeeae6 0 75%, #fff 0) 0 0 / 12px 12px;
    border: 1px solid var(--linha);
    border-radius: 6px;
    cursor: pointer;
}

.grade-de-imagens button:hover { border-color: var(--destaque); }

.grade-de-imagens button:focus-visible { outline: 2px solid var(--destaque); outline-offset: 1px; }

.grade-de-imagens img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* O aviso de dpi (etapa 7). Vazio, não ocupa lugar; a região fica na página para o leitor de tela. */
.aviso-do-editor {
    margin: 0.5rem 0;
    padding: 0.75rem 1rem;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: 6px;
}

.aviso-do-editor:empty {
    padding: 0;
    border: 0;
}

/* --- Área do cliente: meus projetos (Fase 3, etapa 9) --- */

/* Começar em branco ou de um modelo (etapa 10b): uma grade de cartões com a miniatura. */
.comecar { margin-bottom: 1.5rem; }

.opcoes-de-comeco {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.comeco {
    display: grid;
    gap: 0.375rem;
    min-height: 44px;
    padding: 0.5rem;
    color: var(--tinta);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    background: var(--papel-alto);
    border: 1px solid var(--linha);
    border-radius: 6px;
    overflow-wrap: anywhere;
}

.comeco:hover, .comeco:focus-visible { border-color: var(--destaque); }

.miniatura-do-comeco {
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: 4px;
    overflow: hidden;
}

.miniatura-do-comeco.em-branco { border-style: dashed; }

.miniatura-do-comeco img { display: block; width: 100%; height: 100%; object-fit: contain; }

.titulo-da-secao { font-size: 1.125rem; margin: 0 0 0.75rem; }

.lista-de-projetos { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }

.projeto {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--papel-alto);
    border: 1px solid var(--linha);
    border-radius: 8px;
}

.miniatura-do-projeto {
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: 4px;
    overflow: hidden;
}

.miniatura-do-projeto img { display: block; width: 100%; height: 100%; object-fit: contain; }

.sobre-o-projeto { min-width: 0; }

/* Alvo de toque de 44 px, como todo o resto: o nome é o jeito principal de abrir o projeto. */
.nome-do-projeto { display: flex; align-items: center; min-height: 44px; font-weight: 600; overflow-wrap: anywhere; }

.projeto .detalhe { margin: 0.125rem 0 0.5rem; font-size: 0.875rem; color: var(--tinta-fraca); }

.acoes-do-projeto { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.25rem; }

.acoes-do-projeto form { margin: 0; }

.acoes-do-projeto .botao-discreto { min-height: 44px; padding: 0 0.75rem; }

.excluir summary { display: inline-flex; align-items: center; list-style: none; cursor: pointer; border-radius: 6px; }

.excluir summary::-webkit-details-marker { display: none; }

.excluir .perigo {
    min-height: 44px;
    margin-top: 0.25rem;
    padding: 0 0.75rem;
    font: inherit;
    color: #fff;
    background: var(--erro);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.rodape-da-conta { margin-top: 1.5rem; }

/* O nome do projeto e o estado do salvamento, em cima do editor (etapa 9). */
.topo-do-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }

.topo-do-editor label { font-size: 0.875rem; color: var(--tinta-fraca); }

.topo-do-editor input {
    flex: 1 1 14rem;
    min-width: 0;
    min-height: 44px;
    padding: 0 0.625rem;
    font: inherit;
    font-size: 16px;
    border: 1px solid var(--linha);
    border-radius: 6px;
}

.estado-do-salvamento { font-size: 0.875rem; color: var(--tinta-fraca); }

.estado-do-salvamento[data-estado="erro"],
.estado-do-salvamento[data-estado="conflito"] { color: var(--erro); }

.estado-do-salvamento button {
    min-height: 44px;
    padding: 0 0.5rem;
    font: inherit;
    color: var(--destaque);
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

/* Modo modelo do admin (etapa 10b). */
.voltar { margin: 0 0 0.5rem; }

.regras-da-camada { margin: 0 0 0.25rem; font-weight: 600; overflow-wrap: anywhere; }

.regras { display: grid; }

.regra { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; }

/* `display` vence o atributo `hidden`: sem isto, as caixas apareciam sem camada selecionada. */
.regras[hidden], .regra[hidden], .regras-da-camada[hidden] { display: none; }

.regra input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--destaque); }

.dica-do-modelo { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--tinta-fraca); }

/* --- Página inicial em construção (etapa 11) --- */

.em-construcao { margin-top: 2rem; text-align: center; }
.em-construcao .subtitulo { margin: 0; }