/* Lemon Gestão — tokens, reset e telas avulsas (login, instalação, erros, páginas públicas).
   O painel em si vem de app.css; cada módulo pode ter assets/css/modules/<nome>.css. */

@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/inter/inter-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/inter/inter-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  /* Superfícies */
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f4f5f7;
  --surface-3: #eceef2;
  --surface-hover: #f7f8fa;
  --border: #e7e9ee;
  --border-strong: #d6dae1;
  --overlay: rgba(14, 17, 23, .38);

  /* Texto */
  --text: #111419;
  --text-2: #424958;
  --muted: #858c99;
  --faint: #aab0bb;

  /* Marca Mundo Lemon. Cada cor tem seu papel, sem misturar:
     verde (--accent) = botões e preenchimentos; ciano (--accent-ink/-soft) = detalhes, ícones, item ativo, links. */
  --brand-cyan: #33d5d5;
  --brand-lime: #c2dd56;
  --accent: #c2dd56;
  --accent-hover: #b3cf45;
  --accent-on: #ffffff;
  --accent-ink: #08807f;
  --accent-soft: #e6f9f9;
  --accent-soft-2: #cbf2f2;
  --accent-ring: rgba(51, 213, 213, .35);

  /* Moldura (topo e bordas em volta do painel, estilo "folha" encaixada): branco puxado pro cinza */
  --frame: #eef0f3;
  --frame-ink: #111419;
  --frame-muted: rgba(17, 20, 25, .55);
  --frame-soft: rgba(17, 20, 25, .045);
  --frame-soft-2: rgba(17, 20, 25, .085);
  --frame-line: rgba(17, 20, 25, .1);

  /* Estados */
  --success: #138a5c; --success-soft: #e7f6ef;
  --warning: #b56a0c; --warning-soft: #fdf3e2;
  --danger: #d03d3d; --danger-soft: #fdeeee;
  --info: #2f6bd8; --info-soft: #eaf1fd;
  --violet: #7553c9; --violet-soft: #f1edfb;
  --teal: #0f8e96; --teal-soft: #e5f6f7;

  /* Forma */
  --r-xs: 6px; --r-sm: 8px; --r: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px;
  --shadow-xs: 0 1px 2px rgba(16, 20, 28, .05);
  --shadow-sm: 0 1px 2px rgba(16, 20, 28, .04), 0 2px 6px rgba(16, 20, 28, .04);
  --shadow: 0 2px 4px rgba(16, 20, 28, .04), 0 8px 24px rgba(16, 20, 28, .07);
  --shadow-lg: 0 12px 28px rgba(16, 20, 28, .10), 0 32px 64px rgba(16, 20, 28, .12);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* Movimento: hover e cor (fast), menus e abas (base), camadas que entram (slow). */
  --dur-fast: 120ms; --dur: 180ms; --dur-slow: 260ms;

  /* Nomes herdados do Painel Master (módulos antigos ainda usam) */
  --mp-primary: var(--accent); --mp-primary-dark: var(--accent-ink); --mp-primary-soft: var(--accent-soft);
  --mp-text: var(--text); --mp-secondary: var(--text-2); --mp-muted: var(--muted);
  --mp-border: var(--border); --mp-border-strong: var(--border-strong);
  --mp-surface: var(--surface); --mp-surface-2: var(--surface-2);
  --mp-success: var(--success); --mp-success-soft: var(--success-soft);
  --mp-warning: var(--warning); --mp-warning-soft: var(--warning-soft);
  --mp-danger: var(--danger); --mp-danger-soft: var(--danger-soft);
  --mp-info: var(--info); --mp-info-soft: var(--info-soft);
  --mp-violet: var(--violet);
}

/* Modo escuro: segue o sistema, a menos que a pessoa tenha escolhido o claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d0f13; --surface: #14171c; --surface-2: #1a1e24; --surface-3: #22272f; --surface-hover: #1b1f26;
    --border: #252a32; --border-strong: #333a44; --overlay: rgba(0, 0, 0, .58);
    --text: #eceef2; --text-2: #b6bcc7; --muted: #8a919d; --faint: #5d6470;
    --accent: #c2dd56; --accent-hover: #cfe56e; --accent-ink: #5fe3e3; --accent-on: #ffffff; --frame: #000000; --frame-ink: #f5f6f7; --frame-muted: rgba(245, 246, 247, .6); --frame-soft: rgba(255, 255, 255, .07); --frame-soft-2: rgba(255, 255, 255, .13); --frame-line: rgba(255, 255, 255, .12);
    --accent-soft: rgba(51, 213, 213, .12); --accent-soft-2: rgba(51, 213, 213, .2); --accent-ring: rgba(51, 213, 213, .35);
    --success: #3cc28b; --success-soft: rgba(60, 194, 139, .13);
    --warning: #e3a03f; --warning-soft: rgba(227, 160, 63, .13);
    --danger: #f06a6a; --danger-soft: rgba(240, 106, 106, .13);
    --info: #6b9cf2; --info-soft: rgba(107, 156, 242, .13);
    --violet: #a68cf0; --violet-soft: rgba(166, 140, 240, .13);
    --teal: #3fc3cb; --teal-soft: rgba(63, 195, 203, .13);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow: 0 4px 16px rgba(0, 0, 0, .4);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0f13; --surface: #14171c; --surface-2: #1a1e24; --surface-3: #22272f; --surface-hover: #1b1f26;
  --border: #252a32; --border-strong: #333a44; --overlay: rgba(0, 0, 0, .58);
  --text: #eceef2; --text-2: #b6bcc7; --muted: #8a919d; --faint: #5d6470;
  --accent: #c2dd56; --accent-hover: #cfe56e; --accent-ink: #5fe3e3; --accent-on: #ffffff; --frame: #000000; --frame-ink: #f5f6f7; --frame-muted: rgba(245, 246, 247, .6); --frame-soft: rgba(255, 255, 255, .07); --frame-soft-2: rgba(255, 255, 255, .13); --frame-line: rgba(255, 255, 255, .12);
  --accent-soft: rgba(51, 213, 213, .12); --accent-soft-2: rgba(51, 213, 213, .2); --accent-ring: rgba(51, 213, 213, .35);
  --success: #3cc28b; --success-soft: rgba(60, 194, 139, .13);
  --warning: #e3a03f; --warning-soft: rgba(227, 160, 63, .13);
  --danger: #f06a6a; --danger-soft: rgba(240, 106, 106, .13);
  --info: #6b9cf2; --info-soft: rgba(107, 156, 242, .13);
  --violet: #a68cf0; --violet-soft: rgba(166, 140, 240, .13);
  --teal: #3fc3cb; --teal-soft: rgba(63, 195, 203, .13);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --shadow: 0 4px 16px rgba(0, 0, 0, .4);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01'; font-optical-sizing: auto;
}
a { color: inherit; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
h1, h2 { letter-spacing: -.02em; }
h3, h4 { letter-spacing: -.01em; }
code, kbd { font-family: var(--mono); font-size: .92em; }
kbd { display: inline-flex; align-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--border); border-bottom-width: 2px; background: var(--surface); color: var(--muted); font-size: 11px; font-family: var(--font); font-weight: 600; justify-content: center; }
::selection { background: var(--accent-soft-2); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Caixas de seleção e rádios: estilo próprio em todo o sistema.
   Quem precisa do nativo usa .native. */
input[type="checkbox"]:not(.native):not(.mp-switch input):not([role="switch"]),
input[type="radio"]:not(.native) {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto; margin: 0; width: 18px; height: 18px;
  border: 1.5px solid var(--border-strong); background: var(--surface) center / 12px 12px no-repeat; cursor: pointer;
  border-radius: 5px; display: inline-grid; place-content: center; vertical-align: -4px;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s;
}
input[type="radio"]:not(.native) { border-radius: 50%; }
input[type="checkbox"]:not(.native):not(.mp-switch input):hover, input[type="radio"]:not(.native):hover { border-color: var(--accent); }
input[type="checkbox"]:not(.native):not(.mp-switch input):active, input[type="radio"]:not(.native):active { transform: scale(.92); }
input[type="checkbox"]:not(.native):not(.mp-switch input):checked {
  background-color: var(--accent); border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 4.9 8.6 9.6 3.6' fill='none' stroke='%2311160a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:not(.native):not(.mp-switch input):indeterminate {
  background-color: var(--accent); border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='%2311160a' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}
input[type="radio"]:not(.native):checked { border-color: var(--accent); border-width: 5.5px; background: var(--accent-on); }
:root[data-theme="dark"] input[type="radio"]:not(.native):checked { background: #fff; }
input[type="checkbox"]:not(.native):focus-visible, input[type="radio"]:not(.native):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
input[type="checkbox"]:not(.native):disabled, input[type="radio"]:not(.native):disabled { opacity: .45; cursor: not-allowed; }

/* Barras de rolagem discretas */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--faint); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Telas avulsas (login, instalação, erros, aceite de contrato) ── */
.au-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface); position: relative; overflow-x: hidden; }
.au-page.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.au-side { position: relative; overflow: hidden; background: #0a0a0b; color: #f3f7e6; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.au-side::before { content: ''; position: absolute; inset: -20% -10% auto auto; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(51, 213, 213, .22), transparent 62%); filter: blur(10px); }
.au-side::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.2px); background-size: 22px 22px; mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); }
.au-side > * { position: relative; z-index: 1; }
.au-side-brand { display: flex; align-items: center; }
.au-side-brand img { width: auto; height: 64px; }
.au-side h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; font-weight: 650; letter-spacing: -.03em; max-width: 460px; }
.au-side h2 em { font-style: normal; color: var(--brand-cyan); }
.au-side p { color: rgba(243, 247, 230, .66); font-size: 14.5px; max-width: 420px; margin-top: 14px; line-height: 1.6; }
.au-side ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.au-side li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: rgba(243, 247, 230, .82); }
.au-side li i { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-content: center; background: rgba(51, 213, 213, .14); color: var(--brand-cyan); font-size: 16px; }
.au-side small { color: rgba(243, 247, 230, .4); font-size: 12px; }
.au-content { display: flex; flex-direction: column; min-height: 100vh; }
.au-main { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: 56px 20px 40px; }
.au-wrap { width: 100%; max-width: 360px; }
.au-wrap.wide { max-width: 540px; }
.au-wrap.doc { max-width: 820px; }
.au-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 28px; }
.au-brand.center { align-items: center; text-align: center; }
.au-brand img { width: 48px; height: 48px; border-radius: 14px; box-shadow: var(--shadow-sm); }
.au-brand img.au-brand-logo { width: auto; height: 84px; border-radius: 0; box-shadow: none; margin-bottom: 6px; }
.au-brand h1 { font-size: 26px; font-weight: 680; letter-spacing: -.025em; line-height: 1.15; }
.au-brand p { color: var(--muted); font-size: 14px; max-width: 340px; }
.au-form { display: flex; flex-direction: column; gap: 16px; }
.au-field { display: flex; flex-direction: column; gap: 7px; }
.au-field > span { font-size: 13px; font-weight: 560; color: var(--text-2); }
.au-input-wrap { position: relative; }
.au-input-wrap > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 18px; pointer-events: none; transition: color .18s; }
.au-input-wrap:focus-within > i { color: var(--accent-ink); }
.au-input {
  width: 100%; height: 46px; padding: 0 14px 0 42px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface);
  font-size: 14.5px; outline: none; box-shadow: var(--shadow-xs); transition: border-color .15s, box-shadow .15s;
}
.au-input.no-icon { padding-left: 14px; }
.au-input:hover { border-color: var(--faint); }
.au-input:focus { border-color: var(--brand-cyan); box-shadow: 0 0 0 4px var(--accent-ring); }
.au-input.code { text-align: center; letter-spacing: .5em; font-size: 22px; font-weight: 700; padding: 0 14px; }
.au-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; width: 34px; height: 34px; border-radius: 9px; color: var(--faint); cursor: pointer; }
.au-toggle:hover { background: var(--surface-2); color: var(--text); }
.au-btn {
  height: 46px; border: 0; border-radius: var(--r-md); background: var(--accent); color: var(--accent-on); font-weight: 650; font-size: 14.5px; cursor: pointer; text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, transform .1s; box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}
.au-btn:hover { background: var(--accent-hover); }
.au-btn:active { transform: scale(.985); }
.au-btn[disabled] { opacity: .65; cursor: progress; }
.au-btn.ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border); box-shadow: none; text-shadow: none; }
.au-btn.ghost:hover { background: var(--surface-2); }
.au-btn.dark { background: var(--text); color: var(--surface); text-shadow: none; }
.au-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); font-size: 13px; line-height: 1.45; }
.au-alert i { font-size: 18px; flex: 0 0 auto; }
.au-alert.error { background: var(--danger-soft); color: var(--danger); }
.au-alert.ok { background: var(--success-soft); color: var(--success); }
.au-alert.info { background: var(--accent-soft); color: var(--accent-ink); }
.au-foot { position: relative; z-index: 1; text-align: center; color: var(--faint); font-size: 12px; padding: 18px; }
.au-link { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.au-link:hover { text-decoration: underline; }
.au-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.au-steps li { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); }
.au-steps li.ok { background: var(--success-soft); border-color: transparent; color: var(--success); }
.au-steps li.err { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.au-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.au-grid .span-2 { grid-column: span 2; }
.au-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--text-2); cursor: pointer; }
.au-check input { margin-top: 2px; }
.au-error-code { font-size: 72px; font-weight: 750; color: var(--surface-3); line-height: 1; letter-spacing: -.04em; }
code.au-code { display: block; padding: 10px 12px; border-radius: 10px; background: #12151b; color: #e2efbd; font-size: 12.5px; white-space: pre-wrap; word-break: break-all; }
@media (max-width: 900px) { .au-page.split { grid-template-columns: 1fr; } .au-side { display: none; } }
@media (max-width: 520px) { .au-grid { grid-template-columns: 1fr; } .au-grid .span-2 { grid-column: auto; } }

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