/* ═══════════════════════════════════════════════════════════════════════
   Tokens e componentes compartilhados por login.php, index.php e
   usuarios.php — paleta e tipografia alinhadas ao site institucional
   (Quicksand + Montserrat, roxo #7C3AED / ink #241546).
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --cf-purple:#7C3AED;   --cf-purple-tint:#EDE9FE;   --cf-purple-deep:#5B21B6;
  --cf-teal:#0EA5E9;     --cf-teal-tint:#E0F4FD;
  --cf-coral:#FB7185;    --cf-coral-tint:#FFE9EC;
  --cf-green:#16A34A;    --cf-green-tint:#E3F6EA;
  --cf-amber:#9A3412;    --cf-amber-tint:#FDF1DD;    --cf-amber-border:#F3D9A8;
  --cf-r1:#400166; --cf-r2:#550286; --cf-r3:#6806B5; --cf-r4:#7A00E6; --cf-r5:#9F39F7;
  --cf-ink:#241546;
  --cf-ink-soft:#4A4363;
  --cf-body:#4A4363;
  --cf-muted:#6B6480;
  --cf-body-60: rgba(36,21,70,.60);
  --cf-body-45: rgba(36,21,70,.45);
  --cf-paper:#FFFFFF;
  --cf-cream:#FBF9F4;
  --cf-lavender-bg:#F3F0FC;
  --cf-hairline:#E5E1F0;
  --cf-hairline-strong:#D6CFEA;
  --cf-shadow: 0 1px 3px rgba(36,21,70,.05), 0 10px 26px -14px rgba(36,21,70,.18);
  --cf-shadow-hover: 0 10px 24px -8px rgba(36,21,70,.22);
  --cf-radius:14px;
  --cf-radius-sm:9px;
  --cf-radius-pill:999px;
  --cf-font-display:'Quicksand', Georgia, serif;
  --cf-font-body:'Montserrat', Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--cf-font-body);
  background:var(--cf-cream);
  color:var(--cf-ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
button{font-family:inherit;}
a{color:inherit;}

/* ── header ─────────────────────────────────────────── */
.cf-header{
  background:var(--cf-paper);
  color:var(--cf-ink);
  padding:18px 32px;
  border-bottom:1px solid var(--cf-hairline);
}
.cf-header-inner{
  max-width:1320px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.cf-brand{display:flex; align-items:center; gap:9px; min-width:0;}
.cf-brand-mark{height:22px;width:auto;flex:none;display:block;}
.cf-brand-divider{width:1px;height:26px;background:var(--cf-hairline-strong);flex:none;margin:0 4px;}
.cf-brand-text h1{
  font-family:var(--cf-font-display);
  font-size:19px;font-weight:700;letter-spacing:-.1px;
  margin:0;color:var(--cf-ink);
}
.cf-header-meta{display:flex;gap:9px;flex-wrap:wrap;align-items:center;}
.cf-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;
  padding:6px 13px;border-radius:var(--cf-radius-pill);
  white-space:nowrap;color:var(--cf-ink-soft);
  background:var(--cf-lavender-bg);
  border:1px solid var(--cf-hairline-strong);
}
.cf-chip--link{text-decoration:none;cursor:pointer;transition:background .15s;}
.cf-chip--link:hover{background:#fff;box-shadow:var(--cf-shadow-hover);}
.cf-chip--role-gestor{color:var(--cf-purple-deep);background:var(--cf-purple-tint);border-color:transparent;}

/* ── main content shell ─────────────────────────────── */
.cf-content{max-width:1320px;margin:0 auto;padding:40px 32px 90px;}
.cf-intro-tag{
  font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--cf-purple);margin-bottom:12px;
}
.cf-intro h2{
  font-family:var(--cf-font-display);
  font-size:32px;font-weight:700;letter-spacing:-.6px;line-height:1.16;
  margin:0 0 14px;color:var(--cf-ink);
}
.cf-intro p{
  font-size:15px;color:var(--cf-body);max-width:64ch;line-height:1.65;margin:0 0 32px;
}

/* ── buttons ────────────────────────────────────────── */
.cf-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--cf-purple);color:#fff;
  font-family:var(--cf-font-body);font-weight:600;font-size:13.5px;
  padding:11px 20px;border-radius:10px;border:none;
  cursor:pointer;white-space:nowrap;flex:none;text-decoration:none;
  transition:background .2s, transform .2s, box-shadow .2s;
}
.cf-btn:hover{background:var(--cf-purple-deep);transform:translateY(-1px);box-shadow:var(--cf-shadow-hover);}
.cf-btn:active{transform:translateY(0);}
.cf-btn svg{width:15px;height:15px;}
.cf-btn[hidden]{display:none;} /* display:inline-flex above would otherwise beat the UA [hidden] rule */
.cf-btn-secondary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--cf-cream);color:var(--cf-ink);border:1px solid var(--cf-hairline-strong);
  font-weight:600;font-size:13.5px;padding:10px 18px;border-radius:var(--cf-radius-pill);
  cursor:pointer;text-decoration:none;transition:background .15s;
}
.cf-btn-secondary:hover{background:#F2F0F5;}
.cf-btn-delete{
  background:none;border:none;color:#B91C1C;font-weight:600;font-size:12.5px;
  cursor:pointer;padding:10px 6px;text-decoration:none;
}
.cf-btn-delete:hover{text-decoration:underline;}

/* ── form fields (login, modal, gerenciar acessos) ───── */
.cf-field{margin-bottom:16px;}
.cf-field label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--cf-body-60);margin-bottom:6px;
}
.cf-field input[type="text"],
.cf-field input[type="password"],
.cf-field input[type="date"],
.cf-field textarea,
.cf-field select{
  width:100%;font-family:var(--cf-font-body);font-size:13.5px;color:var(--cf-ink);
  padding:10px 12px;border:1px solid var(--cf-hairline-strong);border-radius:var(--cf-radius-sm);
  background:var(--cf-cream);outline:none;
  transition:border-color .15s, background .15s;
}
.cf-field input:focus,.cf-field textarea:focus,.cf-field select:focus{
  border-color:var(--cf-purple);background:#fff;
}
.cf-field textarea{resize:vertical;min-height:60px;font-family:inherit;}
.cf-field-row{display:flex;gap:12px;}
.cf-field-row .cf-field{flex:1;}
.cf-hint{font-size:11px;color:var(--cf-body-45);margin-top:5px;}
.cf-error{
  font-size:12.5px;color:#B91C1C;background:#FEF2F2;border:1px solid #FECACA;
  border-radius:var(--cf-radius-sm);padding:10px 12px;margin:0 0 16px;
}
.cf-notice{
  font-size:12.5px;color:#166534;background:#F0FDF4;border:1px solid #BBF7D0;
  border-radius:var(--cf-radius-sm);padding:10px 12px;margin:0 0 16px;
}

/* ── cards / tables (gerenciar acessos) ──────────────── */
.cf-card{
  background:#fff;border:1px solid var(--cf-hairline);border-radius:var(--cf-radius);
  box-shadow:var(--cf-shadow);padding:24px 26px;
}
.cf-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.cf-table th,.cf-table td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--cf-hairline);}
.cf-table th{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--cf-body-45);}
.cf-table tr:last-child td{border-bottom:none;}
.cf-role-badge{
  display:inline-flex;align-items:center;font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:var(--cf-radius-pill);
}
.cf-role-badge--gestor{background:var(--cf-purple-tint);color:var(--cf-purple-deep);}
.cf-role-badge--leitor{background:var(--cf-lavender-bg);color:var(--cf-muted);}

/* ── footer ─────────────────────────────────────────── */
.cf-footer{
  text-align:center;padding:30px 20px;color:var(--cf-body-45);font-size:12px;
  border-top:1px solid var(--cf-hairline);
}
.cf-footer strong{color:var(--cf-body-60);}
.cf-footer .reset-link{
  display:block;margin-top:6px;font-size:11px;color:var(--cf-body-45);
  text-decoration:underline;cursor:pointer;background:none;border:none;font-family:inherit;
}
.cf-footer .reset-link:hover{color:var(--cf-purple);}

@media (max-width:720px){
  .cf-header{padding:16px 18px;}
  .cf-content{padding:28px 16px 70px;}
  .cf-intro h2{font-size:25px;}
}