/* PW7 Auth — telas de login no padrão da suite (tokens em /ui/pw7-tokens.css) */
:root { --app-accent: var(--color-brand); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; font-size: 15px; line-height: 1.45; }
a { color: var(--app-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; letter-spacing: inherit; color: inherit; }

.ic { display: inline-block; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic.sm { width: 15px; height: 15px; }
.ic.lg { width: 22px; height: 22px; }

/* fundo */
.fundo { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.fundo::before { content: ""; position: absolute; left: 50%; top: -38vh; width: 120vh; height: 80vh; transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-brand) 16%, transparent), transparent 70%); filter: blur(10px); }
.fundo::after { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--color-hair) 1px, transparent 0); background-size: 22px 22px;
  mask: linear-gradient(to bottom, #000 0%, transparent 60%); -webkit-mask: linear-gradient(to bottom, #000 0%, transparent 60%); }

/* coluna central */
.centro { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 16px; gap: 20px; }
.marca { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.marca img { height: 22px; width: auto; }
[data-theme="dark"] .marca img { filter: invert(1) hue-rotate(180deg) brightness(1.2); }
.marca .pw7-eyebrow { padding-left: 10px; border-left: 1px solid var(--color-line); }

.cartao { width: 100%; max-width: 408px; background: var(--color-surface); border: 1px solid var(--color-hair); border-radius: var(--radius-xl2);
  box-shadow: var(--shadow-float); padding: 30px 28px 26px; animation: surgir 320ms var(--ease-apple) both; }
@keyframes surgir { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
.cartao h1 { font-family: var(--font-display); font-size: 25px; line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 6px; font-weight: 650; }
.cartao .sub { color: var(--color-mute); margin: 0 0 22px; font-size: 14.5px; }

.chip-app { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 6px; border-radius: 999px; background: var(--color-fill);
  font-size: 13px; color: var(--color-ink-2); margin: 0 0 16px; }
.chip-app .bola { width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; color: #fff; }
.chip-app .bola .ic { width: 13px; height: 13px; }

/* segmentado */
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--color-fill); border-radius: 12px; padding: 3px; margin-bottom: 18px; position: relative; }
.seg button { border: 0; background: transparent; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 13.5px; color: var(--color-mute);
  display: flex; align-items: center; justify-content: center; gap: 7px; position: relative; z-index: 1; transition: color 200ms var(--ease-apple); }
.seg button[aria-selected="true"] { color: var(--color-ink); }
.seg .pilula { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 9px; background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05); transition: transform 280ms var(--ease-apple); }
.seg[data-lado="2"] .pilula { transform: translateX(100%); }

/* campos */
.campo { display: block; margin-bottom: 14px; }
.campo > span { display: block; font-size: 13px; color: var(--color-ink-2); margin: 0 0 6px; font-weight: 500; }
.entrada { position: relative; display: flex; align-items: center; }
.entrada .ic { position: absolute; left: 13px; color: var(--color-faint); pointer-events: none; }
.entrada input, .entrada select, input.simples, select.simples { width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--color-line); background: var(--color-canvas);
  padding: 0 14px 0 40px; outline: none; transition: border-color 160ms, box-shadow 160ms; }
input.simples, select.simples { padding-left: 12px; height: 38px; border-radius: 10px; }
.entrada input:focus, input.simples:focus, select.simples:focus { border-color: color-mix(in srgb, var(--app-accent) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-accent) 14%, transparent); }
.entrada .olho { position: absolute; right: 6px; width: 32px; height: 32px; border: 0; background: transparent; border-radius: 8px; color: var(--color-faint); cursor: pointer; display: grid; place-items: center; }
.entrada .olho:hover { background: var(--color-fill); color: var(--color-ink-2); }
.linha-entre { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 18px; font-size: 13.5px; color: var(--color-mute); }
.linha-entre label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
input[type="checkbox"] { accent-color: var(--app-accent); width: 15px; height: 15px; }

/* botões */
.btn { height: 44px; border-radius: 12px; border: 1px solid transparent; padding: 0 18px; cursor: pointer; font-weight: 600; font-size: 14.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform 150ms var(--ease-apple), background 160ms, opacity 160ms; }
.btn:active { transform: scale(0.985); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn.primario { background: var(--app-accent); color: #fff; width: 100%; box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 18px color-mix(in srgb, var(--app-accent) 28%, transparent); }
.btn.primario:hover { background: color-mix(in srgb, var(--app-accent) 90%, #000); }
.btn.secundario { background: var(--color-fill); color: var(--color-ink); }
.btn.secundario:hover { background: var(--color-fill-2); }
.btn.pequeno { height: 32px; padding: 0 12px; border-radius: 9px; font-size: 13px; font-weight: 550; }
.btn.fantasma { background: transparent; color: var(--color-ink-2); border-color: var(--color-line); }
.btn.fantasma:hover { background: var(--color-fill); }
.girando { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: girar 700ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* avisos */
.aviso { display: none; align-items: flex-start; gap: 9px; padding: 11px 13px; border-radius: 12px; font-size: 13.5px; margin: 0 0 14px; line-height: 1.4; }
.aviso.ver { display: flex; animation: surgir 220ms var(--ease-apple) both; }
.aviso.erro { background: color-mix(in srgb, var(--color-neg) 10%, transparent); color: color-mix(in srgb, var(--color-neg) 80%, var(--color-ink)); }
.aviso.ok { background: color-mix(in srgb, var(--color-pos) 12%, transparent); color: color-mix(in srgb, #087a40 85%, var(--color-ink)); }
.aviso .ic { margin-top: 1px; }

.rodape { font-size: 12.5px; color: var(--color-faint); text-align: center; max-width: 408px; }
.rodape a { color: var(--color-mute); }

/* painel de demonstração */
.demo { width: 100%; max-width: 408px; border-radius: var(--radius-lg); border: 1px dashed var(--color-line); padding: 14px 16px; background: color-mix(in srgb, var(--color-surface) 70%, transparent); }
.demo .pw7-eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.demo .conta { display: flex; width: 100%; align-items: center; gap: 10px; border: 0; background: transparent; padding: 7px 8px; border-radius: 10px; cursor: pointer; text-align: left; }
.demo .conta:hover { background: var(--color-fill); }
.demo .conta small { color: var(--color-mute); display: block; font-size: 12px; }
.demo .link-saida { display: block; font-size: 12.5px; padding: 6px 8px; border-radius: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo .link-saida:hover { background: var(--color-fill); text-decoration: none; }

.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 650; font-size: 13px; color: #fff; background: var(--ai-gradient); flex: none; }
.avatar.gr { width: 56px; height: 56px; font-size: 19px; }
.papel { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--color-fill); color: var(--color-ink-2); }
.papel.admin { background: color-mix(in srgb, var(--color-brand) 12%, transparent); color: var(--color-brand); }
.papel.cliente { background: color-mix(in srgb, #059669 12%, transparent); color: #047857; }

/* conta e admin: página larga */
.topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 24px; border-bottom: 1px solid var(--color-hair); }
.topo img { height: 18px; }
[data-theme="dark"] .topo img { filter: invert(1) hue-rotate(180deg) brightness(1.2); }
.topo .espaco { flex: 1; }
.topo nav a { color: var(--color-ink-2); padding: 7px 11px; border-radius: 9px; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; }
.topo nav a:hover { background: var(--color-fill); text-decoration: none; }
.topo nav a[aria-current="page"] { background: var(--color-fill); color: var(--color-ink); font-weight: 550; }
.largo { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: 32px 24px 64px; }
.largo h1 { font-family: var(--font-display); font-size: 28px; letter-spacing: -0.025em; margin: 0 0 4px; }
.largo .sub { color: var(--color-mute); margin: 0 0 26px; }
.bloco { background: var(--color-surface); border: 1px solid var(--color-hair); border-radius: var(--radius-xl2); box-shadow: var(--shadow-card); padding: 22px; margin-bottom: 18px; }
.bloco h2 { font-size: 16px; margin: 0 0 14px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.perfil { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.perfil .quem { flex: 1; min-width: 200px; }
.perfil .quem b { font-size: 18px; letter-spacing: -0.015em; display: block; }
.perfil .quem span { color: var(--color-mute); font-size: 14px; }

.grade-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tile { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--color-hair); color: var(--color-ink);
  transition: transform 200ms var(--ease-apple), box-shadow 200ms, background 160ms; background: var(--color-canvas); }
.tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-card); }
.tile .bola { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
.tile span { font-size: 13.5px; font-weight: 550; line-height: 1.2; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-weight: 500; color: var(--color-mute); font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--color-line); }
td { padding: 10px; border-bottom: 1px solid var(--color-hair); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td .mute { color: var(--color-mute); font-size: 12.5px; }
.tabela { overflow-x: auto; }
.form-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; }
.form-linha label span { display: block; font-size: 12.5px; color: var(--color-ink-2); margin-bottom: 5px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { border: 1px solid var(--color-line); background: var(--color-canvas); border-radius: 999px; padding: 4px 10px 4px 7px; font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; color: var(--color-mute); transition: all 160ms var(--ease-apple); }
.chips button .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--color-line); }
.chips button[aria-pressed="true"] { color: var(--color-ink); border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 9%, var(--color-canvas)); }
.chips button[aria-pressed="true"] .ponto { background: var(--c); }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0; background: var(--color-ink); color: var(--color-on-ink);
  padding: 10px 16px; border-radius: 12px; font-size: 13.5px; box-shadow: var(--shadow-float); transition: all 260ms var(--ease-apple); z-index: 50; }
.toast.ver { opacity: 1; transform: translateX(-50%); }

@media (max-width: 520px) {
  .cartao { padding: 24px 20px 22px; border-radius: 20px; }
  .topo { padding: 0 14px; }
  .largo { padding: 22px 14px 48px; }
}