/* =====================================================================
   QrSistema - Web
   wwwroot/css/estilos.css
   ---------------------------------------------------------------------
   Estilos globais do sistema (fonte, fundo, cores básicas), iguais ao
   preview do dono. O estilo de cada tela fica no .razor.css dela.
   ===================================================================== */

:root {
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    background: #f1f5f9;
    color: #0f172a;
}

button {
    font: inherit;
}

/* O Blazor foca o h1 ao trocar de tela; sem contorno para não poluir. */
h1:focus {
    outline: none;
}

/* ===== Validação de formulários (classes padrão do Blazor) ===== */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* ===== Faixa exibida quando um pedaço da tela falha (ErrorBoundary) ===== */
.blazor-error-boundary {
    background: #b32121;
    color: #fff;
    padding: 1rem;
    border-radius: 8px;
}

.blazor-error-boundary::after {
    content: "Ocorreu um erro nesta parte da tela.";
}

/* ===== Páginas de erro e de tela não encontrada ===== */
.pagina-erro,
.pagina-nao-encontrada {
    max-width: 720px;
    margin: 48px auto;
    padding: 0 24px;
}

.pagina-erro h1,
.pagina-nao-encontrada h1 {
    font-size: 1.8rem;
    font-weight: 800;
}

.pagina-erro h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #64748b;
}