/* Portal Odara — design system (arquitetura/design.md) */
:root {
  /* Paleta */
  --odara-marrom: #4A2E1F;
  --odara-creme: #F5E9D7;
  --odara-dourado: #C9A04E;
  --odara-caramelo: #8B5A2B;
  --odara-off-white: #FAF6EF;
  --sucesso: #2E7D5C;
  --atencao: #C68E17;
  --erro: #B23A3A;
  --info: #5B7AAE;
  --texto-100: #2A1E15;
  --texto-70: #5A4434;
  --texto-50: #847363;
  --texto-30: #B8AB9C;
  --borda-padrao: rgba(74, 46, 31, 0.12);
  /* Tipografia */
  --font-display: "Instrument Serif", "Georgia", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
  /* Espaçamento */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--texto-100);
  background: var(--odara-creme);
  font-size: 16px;
  line-height: 1.5;
}
a { color: var(--odara-caramelo); }

/* Cabeçalho */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-8);
  background: var(--odara-marrom); color: var(--odara-creme);
}
.topbar .brand { font-family: var(--font-display); font-size: 28px; letter-spacing: .01em; }
.topbar .brand small { font-family: var(--font-body); font-size: 13px; opacity: .8; margin-left: 8px; }
.topbar .userbox { display: flex; align-items: center; gap: var(--space-4); font-size: 14px; }
.topbar .userbox a { color: var(--odara-dourado); text-decoration: none; }
.topbar .userbox a:hover { text-decoration: underline; }

.container { max-width: 1080px; margin: 0 auto; padding: var(--space-8); }

/* Card */
.card {
  background: var(--odara-off-white);
  border: 1px solid var(--borda-padrao);
  border-radius: 8px;
  padding: var(--space-6);
  box-shadow: 0 1px 2px rgba(74, 46, 31, 0.04);
}

/* Botões */
.button-primary, .button-secondary, .button-ghost {
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  padding: var(--space-3) var(--space-6); border-radius: 6px;
  border: none; cursor: pointer; transition: background 120ms ease;
}
.button-primary { background: var(--odara-dourado); color: var(--odara-marrom); }
.button-primary:hover { background: #b5901f; }
.button-secondary { background: transparent; color: var(--odara-marrom); border: 1px solid var(--odara-caramelo); }
.button-secondary:hover { background: rgba(139, 90, 43, 0.08); }
.button-ghost { background: transparent; color: var(--erro); padding: var(--space-2) var(--space-3); }
.button-ghost:hover { text-decoration: underline; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* Inputs */
label { display: block; font-size: 13px; color: var(--texto-70); margin-bottom: var(--space-1); font-weight: 600; }
.input, select {
  width: 100%; background: white; border: 1px solid var(--borda-padrao);
  border-radius: 6px; padding: var(--space-3) var(--space-4);
  font-family: var(--font-body); font-size: 16px; color: var(--texto-100);
}
.input:focus, select:focus {
  outline: none; border-color: var(--odara-dourado);
  box-shadow: 0 0 0 3px rgba(201, 160, 78, 0.2);
}

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.login-card { width: 100%; max-width: 380px; }
.login-card h1 { font-family: var(--font-display); font-size: 42px; margin: 0 0 var(--space-2); color: var(--odara-marrom); }
.login-card p.sub { color: var(--texto-50); margin: 0 0 var(--space-6); font-size: 14px; }
.login-card .field { margin-bottom: var(--space-4); }
.login-card .button-primary { width: 100%; }

/* Grid de módulos */
.modulos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-6); }
.modulo-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 120ms ease, box-shadow 120ms ease; }
.modulo-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(74, 46, 31, 0.1); }
.modulo-card .m-nome { font-family: var(--font-display); font-size: 24px; color: var(--odara-marrom); margin-bottom: var(--space-2); }
.modulo-card .m-desc { font-size: 14px; color: var(--texto-70); flex: 1; }
.modulo-card .m-abrir { margin-top: var(--space-4); font-size: 13px; font-weight: 600; color: var(--odara-caramelo); }

.section-title { font-family: var(--font-display); font-size: 28px; color: var(--odara-marrom); margin: var(--space-8) 0 var(--space-4); }
.muted { color: var(--texto-50); font-size: 14px; }

/* Tabelas */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--borda-padrao); }
th { color: var(--texto-50); text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
td.mono, .mono { font-family: var(--font-mono); font-size: 13px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-admin { background: rgba(201, 160, 78, 0.25); color: var(--odara-caramelo); }
.badge-ok { background: rgba(46, 125, 92, 0.15); color: var(--sucesso); }
.badge-off { background: rgba(178, 58, 58, 0.12); color: var(--erro); }

/* Abas */
.tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--borda-padrao); margin-bottom: var(--space-6); }
.tab { padding: var(--space-3) var(--space-4); cursor: pointer; border: none; background: none; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--texto-50); border-bottom: 2px solid transparent; }
.tab.active { color: var(--odara-marrom); border-bottom-color: var(--odara-dourado); }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(42, 30, 21, 0.4); display: none; align-items: center; justify-content: center; padding: var(--space-4); z-index: 50; }
.modal-bg.open { display: flex; }
.modal { background: var(--odara-off-white); border-radius: 10px; padding: var(--space-8); width: 100%; max-width: 460px; max-height: 90vh; overflow: auto; }
.modal h3 { font-family: var(--font-display); font-size: 24px; margin: 0 0 var(--space-4); color: var(--odara-marrom); }

/* Mensagens */
.msg { padding: var(--space-3) var(--space-4); border-radius: 6px; font-size: 14px; margin: var(--space-3) 0; display: none; }
.msg.show { display: block; }
.msg-erro { background: rgba(178, 58, 58, 0.1); color: var(--erro); }
.msg-ok { background: rgba(46, 125, 92, 0.12); color: var(--sucesso); }

.row { display: flex; gap: var(--space-3); align-items: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; }
.spacer { flex: 1; }
.hidden { display: none !important; }