/* assets/style.css */
:root{
  --brand:#ed652b;
  --bg:#ffffff;
  --text:#1a1a1a;
  --muted:#6b7280;
  --card-shadow:0 10px 30px rgba(0,0,0,0.08);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#fff 0%, #fff 60%, #fff7f2 100%);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  color:var(--text);
}

/* ---------------- Container ---------------- */
/* Padrão: conteúdo alinhado ao TOPO e CENTRALIZADO horizontalmente */
.container{
  width:100%;
  padding:32px 20px;
  margin:0 auto;
}
.container > .card{           /* centra o card na horizontal */
  margin-left:auto;
  margin-right:auto;
}

/* Páginas que precisam centralização total (ex.: login) */
body.login-page .container,
body.centered-page .container{
  min-height:100%;
  display:flex;
  align-items:center;       /* centraliza verticalmente */
  justify-content:center;   /* centraliza horizontalmente */
}

/* -------------- Card / Tipografia -------------- */
.card{
  width:100%;
  max-width:420px;
  background:var(--bg);
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  overflow:hidden;
  border:1px solid #f2f2f2;
}

.card-header{
  background:var(--brand);
  color:#fff;
  padding:24px;
  text-align:center;
}
.card-header h1{
  margin:0 0 6px;
  font-size:22px;
  letter-spacing:.3px;
}
.card-header p{margin:0; opacity:.9}

.card-body{padding:24px}

.form-group{margin-bottom:16px}
label{display:block; margin-bottom:6px; font-weight:600}
.input{
  width:100%; padding:12px 14px;
  border:1px solid #e5e7eb; border-radius:12px;
  outline:none; transition:.2s border,color,box-shadow;
  background:#fff;
}
.input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(237,101,43,.15);
}

.actions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 16px; border-radius:12px; border:none;
  font-weight:700; cursor:pointer; transition:.2s transform,box-shadow,opacity,background;
}
.btn-primary{
  background:var(--brand); color:#fff;
  box-shadow:0 8px 20px rgba(237,101,43,.25);
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-secondary{
  background:#fff; color:var(--brand); border:1px solid var(--brand);
}
.helper{font-size:13px; color:var(--muted); margin-top:8px}

/* Branding do cabeçalho laranja com logotipo */
.brand{
  display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:18px
}
.brand .logo{
  width:42px; height:42px; border-radius:50%;
  background:#fff; border:2px solid #fff; outline:4px solid rgba(237,101,43,.25);
  display:flex; align-items:center; justify-content:center; color:var(--brand); font-weight:900
}
.brand .name{font-weight:900; color:#fff; letter-spacing:.4px}

/* Rodapé */
.footer{
  text-align:center; font-size:12px; color:var(--muted); padding:18px
}

/* Links */
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}