@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inria+Serif:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --sys-black: #111111;
  --sys-white: #ffffff;
  --sys-page: #f7f7f5;
  --sys-soft: #eeeeec;
  --sys-line: #dcdcdc;
  --sys-muted: #6c6c6c;
  --sys-radius: 10px;
  --sys-radius-small: 7px;
  --sys-shadow: 0 6px 20px rgba(17, 17, 17, .08);
  --sys-title: 'Inria Serif', Georgia, serif;
  --sys-body: 'DM Sans', Arial, sans-serif;

  /* Normaliza nomes usados pelas folhas antigas. */
  --ink: var(--sys-black);
  --terracotta: var(--sys-black);
  --accent: var(--sys-black);
  --brand: var(--sys-black);
  --brand-dark: #000000;
  --ivory: var(--sys-page);
  --paper: var(--sys-white);
  --canvas: var(--sys-page);
  --bg: var(--sys-page);
  --color-bg: var(--sys-page);
  --color-accent: var(--sys-black);
  --fonte-texto: var(--sys-body);
  --fonte-titulo: var(--sys-title);
  --fonte-nav: var(--sys-body);
  --raio: var(--sys-radius);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  min-width: 320px;
  color: var(--sys-black);
  font-family: var(--sys-body);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--sys-black); }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(17, 17, 17, .22);
  outline-offset: 3px;
}

input, select, textarea {
  border-color: var(--sys-line);
  border-radius: var(--sys-radius-small);
  background: var(--sys-white);
  color: var(--sys-black);
}
input:focus, select:focus, textarea:focus { border-color: var(--sys-black); box-shadow: 0 0 0 3px rgba(17, 17, 17, .10); }

.card, .panel, .summary-card, .service-card, .review-card, .notification-card,
.modulo-card, .funcionario-card, .access-card, .metric-card, .room-card {
  border-color: var(--sys-line);
  border-radius: var(--sys-radius);
}

.button, .btn, .primary-button, .button-primary, .btn-primary, .btn-primario,
button.primary-button, button.button-primary, button.btn-primary {
  border: 1px solid var(--sys-black);
  border-radius: var(--sys-radius-small);
  background: var(--sys-black) !important;
  color: var(--sys-white) !important;
}
.button:hover, .btn:hover, .primary-button:hover, .button-primary:hover, .btn-primary:hover, .btn-primario:hover { background: #000 !important; }

.button-secondary, .button-muted, .btn-secondary, .btn-secundario, .secondary-button {
  border: 1px solid var(--sys-line);
  border-radius: var(--sys-radius-small);
  background: var(--sys-white) !important;
  color: var(--sys-black) !important;
}
.button-secondary:hover, .button-muted:hover, .btn-secondary:hover, .btn-secundario:hover, .secondary-button:hover { background: var(--sys-soft) !important; }
.button-danger, .botao-acao.excluir, .delete-btn {
  border-color: #e4b8b4;
  background: var(--sys-white) !important;
  color: #a62b24 !important;
}

.badge, .status, .tag, .filter, .tab, .screen-nav a, .mode-switch { border-radius: 999px; }

.auth-screen, .register-screen, .access-page, .painel, .app-shell { background-color: var(--sys-page); }
.auth-content, .register-content, .access-panel { background-color: var(--sys-white); }

@media (max-width: 700px) {
  .button, .btn, .primary-button, .button-primary, .btn-primary, .btn-primario { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.simple-screen {
  min-height: 100vh;
  padding: 28px 20px 60px;
  background: var(--sys-page);
}
.simple-header {
  width: min(1120px, 100%);
  margin: 0 auto 26px;
}
.simple-header__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.simple-header__nav a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid var(--sys-line);
  border-radius: 999px;
  background: var(--sys-white);
  color: #4d4d4d;
  font-size: .78rem;
  font-weight: 600;
}
.simple-header__nav a:hover, .simple-header__nav a.active { border-color: var(--sys-black); background: var(--sys-black); color: var(--sys-white); }
.simple-kicker { margin: 0 0 6px; color: var(--sys-muted); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.simple-header h1 { margin: 0; font-family: var(--sys-title); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 600; line-height: 1.1; }
.simple-header p:not(.simple-kicker) { margin: 8px 0 0; color: var(--sys-muted); }
.simple-main { width: min(1120px, 100%); margin: 0 auto; }
.simple-card { padding: clamp(22px, 4vw, 40px); border: 1px solid var(--sys-line); border-radius: var(--sys-radius); background: var(--sys-white); box-shadow: var(--sys-shadow); }
.simple-card h2 { margin: 0 0 8px; font-family: var(--sys-title); font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 600; }
.simple-card > p { color: var(--sys-muted); }
.simple-form { display: grid; gap: 17px; margin-top: 24px; }
.simple-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.simple-form label { display: grid; gap: 7px; color: var(--sys-black); font-size: .82rem; font-weight: 700; }
.simple-form input, .simple-form select, .simple-form textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--sys-line); border-radius: var(--sys-radius-small); background: var(--sys-white); }
.simple-form textarea { min-height: 120px; resize: vertical; }
.simple-form__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.simple-form__actions .button, .simple-form__actions .btn { min-width: 150px; }
.notice-card { max-width: 700px; margin: 8vh auto 0; text-align: center; }
.notice-card__icon { display: grid; width: 58px; height: 58px; margin: 0 auto 20px; place-items: center; border-radius: 50%; background: #e2f8ee; color: #21875d; font-size: 1.8rem; font-weight: 700; }
.notice-card__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.notice-card__actions .button { min-width: 150px; }

@media (max-width: 640px) {
  .simple-screen { padding: 20px 14px 44px; }
  .simple-form__grid { grid-template-columns: 1fr; }
  .simple-form__actions, .notice-card__actions { flex-direction: column; }
  .simple-form__actions .button, .notice-card__actions .button { width: 100%; }
}

body { background-color: var(--sys-page) !important; }
.btn-gold, .btn-dark, .button-dark {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sys-black);
  border-radius: var(--sys-radius-small);
  background: var(--sys-black) !important;
  color: var(--sys-white) !important;
  text-decoration: none;
}
.btn-gold:hover, .btn-dark:hover, .button-dark:hover { background: #000 !important; }
.link-btn, .text-button { color: var(--sys-black); }

/* Cabeçalhos por perfil — padrão comum do projeto */
.profile-header {
  background: var(--sys-black);
  color: var(--sys-white);
  border-bottom: 1px solid #252525;
}
.profile-header__inner {
  width: min(1240px, calc(100% - 40px));
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.profile-brand {
  display: inline-flex;
  color: #fff;
  text-decoration: none;
  align-items: center;
  gap: 12px;
  font-family: var(--sys-title);
  font-size: 1.15rem;
  letter-spacing: .05em;
}
.profile-brand__mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #fff;
  border-radius: 8px;
  font-family: var(--sys-title);
  font-size: 1.1rem;
  font-weight: 700;
}
.profile-brand small {
  display: block;
  margin-top: 2px;
  color: #bababa;
  font-family: var(--sys-body);
  font-size: .7rem;
  letter-spacing: .02em;
}
.profile-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.profile-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: right;
}
.profile-identity-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.profile-identity-link:hover strong,
.profile-identity-link:focus-visible strong {
  text-decoration: underline;
}
.profile-identity__icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #555;
  border-radius: 50%;
  background: #242424;
  color: #fff;
}
.profile-identity__icon svg { width: 18px; height: 18px; }
.profile-identity__copy { display: grid; gap: 2px; }
.profile-identity__copy small { color: #aaa; font-size: .68rem; }
.profile-identity__copy strong { color: #fff; font-size: .86rem; }
.profile-identity__copy span { color: #cfcfcf; font-size: .7rem; }
.profile-switch {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid #666;
  border-radius: var(--sys-radius-small);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.profile-switch:hover { background: #fff; color: #111; }
.profile-nav {
  background: #fff;
  border-bottom: 1px solid var(--sys-line);
  box-shadow: 0 3px 14px rgb(17 17 17 / 6%);
}
.profile-nav__inner {
  width: min(1240px, calc(100% - 40px));
  min-height: 54px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
}
.profile-nav a {
  display: inline-flex;
  min-height: 35px;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  color: #5d5d5d;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}
.profile-nav a:hover, .profile-nav a.active { background: var(--sys-black); color: #fff; }
.guest-header .profile-header__right { gap: 10px; }
.guest-header .profile-identity__copy span { display: none; }

@media (max-width: 720px) {
  .profile-header__inner { width: min(100% - 28px, 640px); min-height: auto; padding: 16px 0; align-items: flex-start; flex-direction: column; }
  .profile-header__right { width: 100%; justify-content: space-between; }
  .profile-nav__inner { width: calc(100% - 28px); min-height: 50px; }
  .profile-switch { font-size: .68rem; }
}

.guest-profile {
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.25);
}
.guest-profile .profile-identity__copy strong { font-size: .72rem; white-space: nowrap; }
.guest-profile .profile-identity__icon { width: 30px; height: 30px; }
@media (max-width: 720px) {
  .guest-profile { padding-left: 0; border-left: 0; }
  .guest-profile .profile-identity__copy strong { font-size: .7rem; }
}

/* Tipografia comum para todas as áreas. */
h1, h2, h3, h4, .page-title, .main-title, .pagina-titulo, .grupo-titulo {
  font-family: var(--sys-title) !important;
}
body, button, input, select, textarea {
  font-family: var(--sys-body) !important;
}
