html, body {
    margin: 0;
    display: flex;
    flex-direction: column;
}
main {
    flex: 1;
}
.shippori-mincho-b1-regular {
    font-family: "Shippori Mincho B1", serif;
    font-weight: 400;
    font-style: normal;
    }
.rocknroll-one-regular {
    font-family: "RocknRoll One", serif;
    font-weight: 400;
    font-style: normal;
    }

/* ======================================================================
   Integridade visual de formulários (independente do tema)

   O preflight do Tailwind aplica `color: inherit` aos controles de
   formulário, e o tema define `body { color: var(--font_color) }`. Em
   temas com fonte clara (ex.: "Azul" #deddda, "Verde" #d2ffad), os
   inputs herdavam texto quase branco e ficavam ilegíveis no fundo claro.

   Estas regras garantem um piso de contraste. Como usam seletores de
   ELEMENTO (especificidade 0,0,1) e este arquivo carrega depois do
   output.css, elas vencem o preflight — mas qualquer utilitário Tailwind
   (text-*, bg-*) aplicado diretamente no campo continua prevalecendo.
   ====================================================================== */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="hidden"]),
textarea,
select {
    color: #1f2937;
    background-color: #ffffff;
}

input::placeholder,
textarea::placeholder {
    color: #9ca3af;
    opacity: 1;
}

/* Algumas engines herdam a cor do tema nas opções do <select> */
select option {
    color: #1f2937;
    background-color: #ffffff;
}

/* Checkboxes e radios nativos: cor de marcação visível e consistente,
   usando a cor secundária do tema (com fallback azul). Não afeta toggles
   customizados, que usam `class="sr-only peer"` e não são pintados pelo
   accent-color. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color_2, #2563eb);
}

/* ======================================================================
   Largura padrão das telas (desktop)

   Padroniza TODAS as telas (exceto check-in) para ocupar 85% da largura
   no desktop, eliminando a variação de largura que dependia do conteúdo.
   Cada view traz um container próprio com max-w-* variado (max-w-4xl,
   screen-2xl, md...); o .page-shell impõe a largura, e o max-width:none
   nos filhos diretos faz esse padrão prevalecer (vence os utilitários por
   especificidade/!important). No mobile (< lg) as telas seguem 100%.
   ====================================================================== */

/* O wrapper é flex-col e as views usam mx-auto; em flex, margin auto
   DESATIVA o stretch e encolhe o item pro tamanho do conteúdo — no mobile
   isso fazia o conteúdo largo (ex.: barra de abas) estourar a viewport. Por
   isso forçamos largura cheia e zeramos as margens auto em TODAS as larguras,
   fazendo o container de topo de cada view preencher o shell (e as regiões
   com overflow-x-auto rolarem internamente em vez de empurrar a página). */
.page-shell > * {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (min-width: 1024px) {
    .page-shell {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }
}