/* ==========================================================================
   Shoopet — Componentes
   Um único padrão para todo o sistema. Nunca criar variações locais.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botão
   -------------------------------------------------------------------------- */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    height: 42px;
    padding: 0 var(--e4);
    border: 1px solid transparent;
    border-radius: var(--raio);
    font-size: var(--texto-pequeno);
    font-weight: 550;
    letter-spacing: -.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao),
                color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}

.botao:active { transform: translateY(1px); }

.botao svg { width: 17px; height: 17px; flex-shrink: 0; }

.botao[disabled],
.botao[aria-disabled="true"] {
    opacity: .5;
    pointer-events: none;
}

/* Primário — a única ação principal da tela. */
.botao--primario {
    background: var(--cor-primaria);
    color: var(--texto-invertido);
    box-shadow: var(--sombra-1);
}
.botao--primario:hover { background: var(--cor-primaria-hover); color: var(--texto-invertido); }

/* Secundário — ações de apoio. */
.botao--secundario {
    background: var(--fundo);
    color: var(--texto);
    border-color: var(--borda);
    box-shadow: var(--sombra-1);
}
.botao--secundario:hover { background: var(--fundo-secundario); border-color: var(--borda-forte); color: var(--texto); }

/* Discreto — ações terciárias, sem peso visual. */
.botao--discreto {
    background: transparent;
    color: var(--texto-secundario);
}
.botao--discreto:hover { background: var(--fundo-secundario); color: var(--texto); }

/* Perigo — exclusões. */
.botao--perigo {
    background: var(--erro);
    color: var(--texto-invertido);
}
.botao--perigo:hover { background: #DC2626; color: var(--texto-invertido); }

.botao--pequeno { height: 34px; padding: 0 var(--e3); font-size: var(--texto-mini); }
.botao--largo   { width: 100%; }

/* Radio/checkbox escondido dentro de um botão (ex.: escolha de Tipo em Financeiro). */
.botao input[type="radio"],
.botao input[type="checkbox"] {
    appearance: none;
    width: 0; height: 0;
    margin: 0 !important;
}

.botao--secundario:has(input:checked) {
    background: var(--cor-primaria-suave);
    border-color: var(--cor-primaria);
    color: var(--cor-primaria-hover);
}

/* --------------------------------------------------------------------------
   Campos de formulário
   -------------------------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: var(--e2); }

.campo__rotulo {
    font-size: var(--texto-pequeno);
    font-weight: 500;
    color: var(--texto);
}

.campo__opcional { color: var(--texto-suave); font-weight: 400; }

.entrada,
.selecao,
.area-texto {
    width: 100%;
    min-height: 42px;
    padding: 0 var(--e3);
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    font-size: var(--texto-pequeno);
    color: var(--texto);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.area-texto { padding: var(--e3); min-height: 96px; resize: vertical; line-height: 1.55; }

.entrada::placeholder,
.area-texto::placeholder { color: var(--texto-suave); }

.entrada:focus,
.selecao:focus,
.area-texto:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: var(--foco);
}

.selecao {
    appearance: none;
    padding-right: var(--e6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--e3) center;
    cursor: pointer;
}

.campo--erro .entrada,
.campo--erro .selecao,
.campo--erro .area-texto { border-color: var(--erro); }

.campo__erro { font-size: var(--texto-mini); color: var(--erro); }

.campo__ajuda { font-size: var(--texto-mini); color: var(--texto-secundario); }

/* Duas colunas lado a lado dentro de um formulário (ex.: telefone + e-mail). */
.par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }

@media (max-width: 520px) {
    .par { grid-template-columns: 1fr; }
}

/* Campo de pesquisa — presente em quase todos os módulos. */
.pesquisa { position: relative; display: flex; align-items: center; }

.pesquisa svg {
    position: absolute;
    left: var(--e3);
    width: 17px; height: 17px;
    color: var(--texto-suave);
    pointer-events: none;
}

.pesquisa .entrada { padding-left: 40px; }

/* --------------------------------------------------------------------------
   Linha de item — usada no formulário de Novo Pedido
   -------------------------------------------------------------------------- */

.linha-pedido {
    display: grid;
    grid-template-columns: 1fr 88px 96px 32px;
    gap: var(--e2);
    align-items: center;
}

.linha-pedido__quantidade { text-align: center; }
.linha-pedido__subtotal { text-align: right; font-size: var(--texto-pequeno); }

@media (max-width: 560px) {
    .linha-pedido { grid-template-columns: 1fr; }
    .linha-pedido__subtotal { text-align: left; }
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.card {
    background: var(--fundo-elevado);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-1);
}

.card__corpo { padding: var(--e5); }

.card__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    padding: var(--e4) var(--e5);
    border-bottom: 1px solid var(--borda);
}

.card__titulo { font-size: var(--texto-base); font-weight: 600; }

/* --------------------------------------------------------------------------
   Badge — status
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
    height: 24px;
    padding: 0 var(--e2);
    border-radius: var(--raio-pequeno);
    font-size: var(--texto-mini);
    font-weight: 500;
    background: var(--fundo-secundario);
    color: var(--texto-secundario);
}

.badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: var(--raio-circulo);
    background: currentColor;
}

.badge--sucesso { background: var(--sucesso-suave); color: #15803D; }
.badge--aviso   { background: var(--aviso-suave);   color: #B45309; }
.badge--erro    { background: var(--erro-suave);    color: #B91C1C; }
.badge--info    { background: var(--cor-primaria-suave); color: var(--cor-primaria-hover); }

/* --------------------------------------------------------------------------
   Alerta — mensagens de retorno
   -------------------------------------------------------------------------- */

.alerta {
    display: flex;
    align-items: center;
    gap: var(--e2);
    padding: var(--e3) var(--e4);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    font-size: var(--texto-pequeno);
    background: var(--fundo);
    color: var(--texto);
}

.alerta--sucesso { background: var(--sucesso-suave); border-color: #BBF7D0; color: #166534; }
.alerta--erro    { background: var(--erro-suave);    border-color: #FECACA; color: #991B1B; }
.alerta--aviso   { background: var(--aviso-suave);   border-color: #FDE68A; color: #92400E; }

/* --------------------------------------------------------------------------
   Tabela — deve parecer uma lista moderna, nunca uma planilha
   -------------------------------------------------------------------------- */

.tabela { width: 100%; border-collapse: collapse; }

.tabela th {
    padding: var(--e3) var(--e5);
    text-align: left;
    font-size: var(--texto-mini);
    font-weight: 500;
    color: var(--texto-secundario);
    background: var(--fundo-secundario);
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
}

.tabela th:first-child, .tabela td:first-child { padding-left: var(--e5); }
.tabela th:last-child,  .tabela td:last-child  { padding-right: var(--e5); text-align: right; }

.tabela td {
    padding: var(--e4) var(--e5);
    font-size: var(--texto-pequeno);
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
}

.tabela tbody tr { transition: background var(--transicao); }
.tabela tbody tr:hover { background: var(--fundo-secundario); }
.tabela tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Estado vazio — sempre convida para a próxima ação
   -------------------------------------------------------------------------- */

.estado-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--e8) var(--e5);
}

.estado-vazio__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    margin-bottom: var(--e4);
    border-radius: var(--raio-grande);
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria);
}

.estado-vazio__icone svg { width: 26px; height: 26px; }

.estado-vazio__titulo { font-size: var(--texto-h3); margin-bottom: var(--e2); }

.estado-vazio__texto {
    font-size: var(--texto-pequeno);
    color: var(--texto-secundario);
    max-width: 380px;
    margin-bottom: var(--e5);
}

/* --------------------------------------------------------------------------
   Página limpa — login e erros
   -------------------------------------------------------------------------- */

.pagina-limpa {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--e5);
    background:
        radial-gradient(1000px 420px at 50% -10%, var(--cor-primaria-suave), transparent 70%),
        var(--fundo);
}

.pagina-limpa__conteudo { width: 100%; max-width: 420px; }

/* --------------------------------------------------------------------------
   Drawer — painel lateral para criar e editar sem perder o contexto
   -------------------------------------------------------------------------- */

.drawer {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    justify-content: flex-end;
    background: rgba(15, 23, 42, 0);
    transition: background var(--transicao);
}

.drawer.aberto { background: rgba(15, 23, 42, .35); }

.drawer__painel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    height: 100%;
    background: var(--fundo);
    box-shadow: var(--sombra-3);
    transform: translateX(100%);
    transition: transform var(--transicao);
}

.drawer.aberto .drawer__painel { transform: translateX(0); }

.drawer__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    padding: var(--e5);
    border-bottom: 1px solid var(--borda);
    flex-shrink: 0;
}

.drawer__titulo { font-size: var(--texto-h3); }
.drawer__subtitulo { font-size: var(--texto-pequeno); color: var(--texto-secundario); margin-top: 2px; }

.drawer__fechar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--raio-pequeno);
    color: var(--texto-secundario);
    flex-shrink: 0;
    transition: background var(--transicao);
}

.drawer__fechar:hover { background: var(--fundo-secundario); color: var(--texto); }

.drawer__corpo {
    flex: 1;
    overflow-y: auto;
    padding: var(--e5);
    display: grid;
    gap: var(--e4);
    align-content: start;
}

.drawer__rodape {
    display: flex;
    justify-content: flex-end;
    gap: var(--e3);
    padding: var(--e4) var(--e5);
    border-top: 1px solid var(--borda);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Modal — ações rápidas e confirmações
   -------------------------------------------------------------------------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--e5);
    background: rgba(15, 23, 42, 0);
    transition: background var(--transicao);
}

.modal.aberto { background: rgba(15, 23, 42, .35); }

.modal__caixa {
    width: 100%;
    max-width: 400px;
    background: var(--fundo);
    border-radius: var(--raio-grande);
    box-shadow: var(--sombra-3);
    padding: var(--e5);
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transition: opacity var(--transicao), transform var(--transicao);
}

.modal.aberto .modal__caixa { opacity: 1; transform: translateY(0) scale(1); }

.modal__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-bottom: var(--e4);
    border-radius: var(--raio);
    background: var(--erro-suave);
    color: var(--erro);
}

.modal__titulo { font-size: var(--texto-h3); margin-bottom: var(--e2); }
.modal__texto { font-size: var(--texto-pequeno); color: var(--texto-secundario); margin-bottom: var(--e5); }

.modal__acoes { display: flex; justify-content: flex-end; gap: var(--e3); }

/* Drawer e Modal escondidos não ocupam espaço nem recebem clique/tab. */
.drawer[hidden],
.modal[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Autenticação — login, cadastro e estados da conta
   -------------------------------------------------------------------------- */

.autenticacao__marca { display: flex; justify-content: center; margin-bottom: var(--e6); }

.autenticacao__titulo {
    font-size: var(--texto-h2);
    text-align: center;
    margin-bottom: var(--e2);
}

.autenticacao__texto {
    text-align: center;
    font-size: var(--texto-pequeno);
    color: var(--texto-secundario);
    margin-bottom: var(--e5);
}

.autenticacao__rodape {
    text-align: center;
    font-size: var(--texto-pequeno);
    color: var(--texto-secundario);
    margin-top: var(--e5);
}

.formulario { display: grid; gap: var(--e4); }

/* Campo de senha com o botão "Mostrar" dentro. */
.senha { position: relative; display: flex; align-items: center; }
.senha .entrada { padding-right: 84px; }

.senha__ver {
    position: absolute;
    right: var(--e2);
    padding: var(--e1) var(--e2);
    border-radius: var(--raio-pequeno);
    font-size: var(--texto-mini);
    font-weight: 500;
    color: var(--texto-secundario);
    transition: color var(--transicao), background var(--transicao);
}

.senha__ver:hover { color: var(--texto); background: var(--fundo-secundario); }

/* --------------------------------------------------------------------------
   Página de erro
   -------------------------------------------------------------------------- */

.erro { text-align: center; }

.erro__codigo {
    display: inline-block;
    margin-bottom: var(--e5);
    font-size: var(--texto-mini);
    font-weight: 550;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cor-primaria);
}

.erro__titulo { font-size: var(--texto-h1); margin-bottom: var(--e3); }

.erro__texto {
    color: var(--texto-secundario);
    font-size: var(--texto-pequeno);
    margin: 0 auto var(--e6);
    max-width: 340px;
}

.erro__marca { display: flex; justify-content: center; margin-bottom: var(--e6); }