/* Estrutura das páginas do framework: layout, cartão, formulário, botões,
 * lista. Sem cor, fonte nem medida própria: tudo vem de theme.css. Funciona
 * em tela de celular (uma coluna, alvos de toque de --df-touch). */
* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--df-bg);
    color: var(--df-text);
    font-family: var(--df-font);
    font-size: var(--df-font-size);
}
a { color: var(--df-accent); }
.df-header, .df-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--df-gap);
    padding: var(--df-gap);
}
.df-footer { color: var(--df-muted); margin-top: auto; }
.df-header nav { display: flex; gap: var(--df-gap); }
.df-brand { font-weight: 700; text-decoration: none; color: var(--df-text); }
.df-main { flex: 1; display: flex; justify-content: center; padding: var(--df-gap); }
.df-card {
    width: 100%;
    max-width: var(--df-card-max);
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    box-shadow: var(--df-shadow);
    padding: var(--df-gap);
    display: flex;
    flex-direction: column;
    gap: var(--df-gap);
}
.df-card h1, .df-card h2 { margin: 0; }
.df-muted { color: var(--df-muted); margin: 0; }
.df-form { display: flex; flex-direction: column; gap: var(--df-gap); }
.df-field { display: flex; flex-direction: column; gap: calc(var(--df-gap) / 4); }
.df-field input {
    min-height: var(--df-touch);
    padding: 0 calc(var(--df-gap) / 2);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    font: inherit;
    color: var(--df-text);
    background: var(--df-surface);
}
.df-btn {
    min-height: var(--df-touch);
    padding: 0 var(--df-gap);
    border: 0;
    border-radius: var(--df-radius);
    background: var(--df-accent);
    color: var(--df-accent-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.df-btn[disabled] { opacity: 0.6; cursor: default; }
.df-btn-quiet { background: transparent; color: var(--df-accent); border: 1px solid var(--df-border); }
.field-error, .form-error { color: var(--df-error); margin: 0; }
.form-ok { color: var(--df-ok); margin: 0; }
.df-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--df-gap) / 2); }
.df-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: calc(var(--df-gap) / 2); }
[hidden] { display: none !important; }
@media (max-width: 480px) {
    .df-main { padding: calc(var(--df-gap) / 2); }
    .df-header nav { width: 100%; justify-content: space-between; }
}