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

/* Fundação visual compartilhada da Plataforma Campos. */
:root {
  --campos-navy: #102a3d;
  --campos-navy-2: #183a4f;
  --campos-teal: #118d86;
  --campos-teal-soft: #dff3f0;
  --campos-coral: #e97357;
  --campos-coral-soft: #fff0eb;
  --campos-paper: #f4f7f7;
  --campos-white: #ffffff;
  --campos-line: #dce6e7;
  --campos-muted: #617582;
  --campos-shadow: 0 18px 48px rgba(16, 42, 61, 0.11);
  --campos-radius-sm: 12px;
  --campos-radius: 18px;
  --campos-radius-lg: 28px;
  --ink: var(--campos-navy);
  --ink2: var(--campos-navy-2);
  --ink-soft: var(--campos-muted);
  --forest: var(--campos-navy);
  --forest-deep: #081d2c;
  --sage: var(--campos-teal);
  --gold: var(--campos-coral);
  --gold-soft: #ffd6ca;
  --paper: var(--campos-paper);
  --paper-alt: #eaf1f1;
  --line: var(--campos-line);
  --teal: var(--campos-teal);
  --teal-soft: var(--campos-teal-soft);
  --coral: var(--campos-coral);
  --muted: var(--campos-muted);
}

html {
  color: var(--campos-navy);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  text-rendering: optimizeLegibility;
}

body {
  min-width: 320px;
  background-color: var(--campos-paper);
  color: var(--campos-navy);
  font-family: "DM Sans", system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .brand, .logo {
  font-family: "Manrope", "DM Sans", system-ui, sans-serif !important;
}

p, li, dd { line-height: 1.6; }
main p, main li, main dd { font-size: max(0.9375rem, 15px); }
label { font-size: max(0.875rem, 14px) !important; }
small { font-size: max(0.75rem, 12px); }
button, input, select, textarea { font: inherit; }
button, [role="button"], input, select, textarea, nav a { font-size: max(0.875rem, 14px); }
input, select, textarea { min-height: 44px; }
button, a, input, select, textarea { outline-color: var(--campos-teal); outline-offset: 3px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--campos-teal) 55%, white); }
::selection { background: var(--campos-teal-soft); color: var(--campos-navy); }

.prototype-note { font-size: max(0.75rem, 12px) !important; }
.sidebar nav a, .mobile-nav a { font-size: max(0.8125rem, 13px) !important; }
.sidebar nav h2 { font-size: max(0.6875rem, 11px) !important; }
.topbar input, .search input { font-size: max(0.875rem, 14px) !important; }

/* Acessos do hóspede e da equipe seguem a mesma assinatura da plataforma. */
.portal, .cadastro, .acesso {
  background: radial-gradient(circle at 84% 12%, rgba(17, 141, 134, 0.13), transparent 30%), var(--campos-paper) !important;
}
.portal, .cadastro { --verde: var(--campos-navy) !important; --dourado: var(--campos-coral) !important; }
.portal .cartao, .cadastro .cartao, .acesso .cartao {
  background: var(--campos-white) !important;
  border-color: var(--campos-line) !important;
  border-radius: var(--campos-radius-lg) !important;
  box-shadow: 14px 14px 0 var(--campos-teal-soft) !important;
}
.portal .rotulo, .cadastro .rotulo, .acesso .rotulo { color: var(--campos-teal) !important; }
.portal h1, .cadastro h1, .acesso h1 { color: var(--campos-navy) !important; }
.portal h1 em { color: var(--campos-teal) !important; }
.portal input, .cadastro input, .cadastro select, .acesso input {
  background: #f9fbfb !important;
  border-color: var(--campos-line) !important;
  border-radius: var(--campos-radius-sm) !important;
}
.portal button, .cadastro button, .acesso button { border-radius: var(--campos-radius-sm) !important; }
.portal .entrar, .cadastro form > button, .acesso form > button.salvar, .acesso form > button:not(.ver) {
  background: var(--campos-navy) !important;
}
.portal .icone, .cadastro .icone { background: var(--campos-navy) !important; color: var(--campos-coral-soft) !important; }

/* Componentes equivalentes das páginas dinâmicas. */
.wrap .painel, .wrap .pessoa, .wrap .reserva, .wrap details, .wrap .box, .wrap article {
  border-color: var(--campos-line) !important;
  border-radius: var(--campos-radius) !important;
  background-color: var(--campos-white) !important;
}
.wrap input, .wrap select, .wrap textarea {
  border-color: var(--campos-line) !important;
  border-radius: var(--campos-radius-sm) !important;
  background-color: #f9fbfb !important;
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  button, [role="button"], input, select, textarea, nav a { font-size: 14px; }
}

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