/* ============================================================================
   Design system do Jarvis — refeito 2026-07-18 (só visual; classes e estrutura
   idênticas às de antes, para não mexer em nenhuma funcionalidade).
   Backup do anterior: public/css/jarvis.css.bak-20260718
   ========================================================================== */
:root{
  --blue:#3557E0; --blue2:#5B78EE; --blue-deep:#25368f;
  --accent:#3557E0;
  --display:'Space Grotesk',sans-serif; --sans:'Inter',sans-serif; --mono:'IBM Plex Mono',monospace;
  --radius:14px; --radius-sm:10px;
}
.theme-dark{
  --bg:#090C12; --bg2:#0E131C; --surface:#111621; --surface2:#0E141E;
  --line:rgba(130,160,215,.13); --line2:rgba(130,160,215,.22);
  --text:#E8EDF4; --muted:#96A1B3; --dim:#66717F;
  --accent-ink:#93A9FF; --accent-soft:rgba(93,120,238,.16);
  --good:#3fca8b; --good-soft:rgba(63,202,139,.15);
  --warn:#e8a94f; --warn-soft:rgba(232,169,79,.15);
  --crit:#f0736c; --crit-soft:rgba(240,115,108,.15);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -6px rgba(0,0,0,.45);
}
.theme-light{
  --bg:#F4F6FA; --bg2:#FFFFFF; --surface:#FFFFFF; --surface2:#F8FAFC;
  --line:#E7EBF1; --line2:#D7DEE7;
  --text:#111726; --muted:#59636F; --dim:#8A94A3;
  --accent-ink:#2A46B8; --accent-soft:#ECEFFC;
  --good:#137a52; --good-soft:#E7F5ED;
  --warn:#9c5d09; --warn-soft:#FBEFDC;
  --crit:#c0362f; --crit-soft:#FBE8E7;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 22px -6px rgba(16,24,40,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans); background:var(--bg); color:var(--text); min-height:100vh; transition:background .3s,color .3s; -webkit-font-smoothing:antialiased}
html,body{max-width:100%; overflow-x:hidden}
img,video,canvas,svg{max-width:100%}
.logo-img,.side-logo-img{display:none}
.theme-light .logo-color{display:block}
.theme-dark .logo-darkmode{display:block}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

/* LOGIN */
.login{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative; overflow:hidden}
.login::before{content:""; position:absolute; inset:0;
  background:radial-gradient(900px 500px at 80% -10%, rgba(53,87,224,.12), transparent 60%),radial-gradient(700px 500px at -5% 110%, rgba(91,120,238,.10), transparent 60%);}
.login::after{content:""; position:absolute; inset:0; opacity:.30;
  background:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 80%)}
.card{position:relative; width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:38px 34px; box-shadow:var(--shadow)}
.logo-slot{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:26px}
.logo-img{max-width:200px; height:auto}
.wm-sub{font-family:var(--mono); font-size:10px; letter-spacing:.30em; color:var(--dim); text-transform:uppercase; text-align:center}
.field{margin-bottom:16px}
.field label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:7px}
.field input{width:100%; background:var(--surface2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--text); font-family:var(--sans); font-size:14px; outline:none; transition:.15s}
.field input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.field input::placeholder{color:var(--dim)}
.btn{width:100%; border:none; border-radius:10px; padding:13px; font-family:var(--sans); font-weight:600; font-size:14px; color:#fff; cursor:pointer; background:var(--accent); box-shadow:0 6px 18px -8px rgba(53,87,224,.7); transition:.15s; margin-top:6px}
.btn:hover{filter:brightness(1.06); box-shadow:0 8px 22px -8px rgba(53,87,224,.8)}
.login-foot{text-align:center; margin-top:20px; font-size:12px; color:var(--dim)}
.err{color:var(--crit); font-size:12.5px; margin-bottom:12px}

/* LOGIN em duas colunas: imagem (esquerda, trocável pelo CEO) + formulário (direita) */
.auth-split{display:grid; grid-template-columns:1.05fr 1fr; min-height:100vh}
.auth-visual{background-color:#26307a; background-size:cover; background-position:center; background-repeat:no-repeat;
  background-image:linear-gradient(150deg,#26307a 0%,#3557E0 48%,#5f4bd8 100%)}
.auth-visual.has-img{background-image:none}
.auth-form-side{display:flex; align-items:center; justify-content:center; padding:40px 30px; background:var(--bg)}
.auth-box{width:100%; max-width:380px}
.auth-box h2{font-family:var(--display); font-weight:700; font-size:23px; letter-spacing:-.4px; margin-bottom:6px}
.auth-box .sub{font-size:14px; color:var(--dim); margin-bottom:26px}
@media (max-width:860px){
  .auth-split{grid-template-columns:1fr}
  .auth-visual{display:none}
  .auth-form-side{min-height:100vh}
}
/* Tela/monitor EM PÉ (portrait) e larga o bastante: a imagem vira uma FAIXA no topo em vez de uma
   coluna alta e estreita (que cortava a imagem num filete). Assim fica boa nas duas orientações. */
@media (min-width:861px) and (orientation:portrait){
  .auth-split{grid-template-columns:1fr; grid-template-rows:40vh 1fr}
  .auth-visual{display:block; min-height:40vh}
  .auth-form-side{min-height:auto; padding:36px 30px}
}

/* DASHBOARD */
.dash{display:grid; grid-template-columns:248px 1fr; min-height:100vh}
.side{background:var(--bg2); border-right:1px solid var(--line); padding:18px 14px; display:flex; flex-direction:column; gap:3px}
.side-logo{display:flex; align-items:center; justify-content:center; padding:6px 8px 18px; border-bottom:1px solid var(--line); margin-bottom:12px}
.side-logo-img{width:150px; height:auto}
.nav-label{font-family:var(--mono); font-size:9px; letter-spacing:.22em; color:var(--dim); text-transform:uppercase; padding:14px 10px 6px}
.nav{display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px; color:var(--muted); font-size:13.5px; font-weight:500; cursor:pointer; transition:.15s; text-decoration:none}
.nav svg{width:18px; height:18px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.8}
.nav:hover{background:var(--surface2); color:var(--text)}
.nav.active{color:var(--accent-ink); background:var(--accent-soft); font-weight:600}
.nav.active svg{stroke:var(--accent-ink)}
.nav.soon{opacity:.45; cursor:default}
.nav.soon:hover{background:transparent; color:var(--muted)}
.nav .badge{margin-left:auto; font-family:var(--mono); font-size:8px; color:var(--dim); border:1px solid var(--line2); padding:2px 5px; border-radius:5px; text-transform:uppercase}
.side-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--line)}
.logout{display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:9px; color:var(--muted); font-size:13px; background:none; border:none; cursor:pointer; width:100%; font-family:var(--sans)}
.logout:hover{background:var(--surface2); color:var(--text)}
.main{display:flex; flex-direction:column; min-height:100vh; min-width:0}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; border-bottom:1px solid var(--line); background:var(--bg)}
.topbar h1{font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-.3px}
.crumb{font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--dim); text-transform:uppercase; margin-bottom:4px}
.top-right{display:flex; align-items:center; gap:12px}
.top-left{display:flex; align-items:center; gap:12px; min-width:0}
.menu-toggle{display:none; width:40px; height:40px; flex-shrink:0; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; align-items:center; justify-content:center}
.menu-toggle:hover{color:var(--accent); border-color:var(--accent)}
.menu-toggle svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2}
.side-backdrop{display:none}
.theme-toggle{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.theme-toggle:hover{color:var(--accent);border-color:var(--line2)}
.theme-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.user{display:flex; align-items:center; gap:10px; padding:5px 12px 5px 6px; border:1px solid var(--line); border-radius:30px}
.user .av{width:30px;height:30px;border-radius:50%; background:linear-gradient(135deg,var(--blue),#7a5cf0); display:flex;align-items:center;justify-content:center; color:#fff; font-weight:600; font-size:12px}
.user .un{font-size:12.5px; font-weight:600; line-height:1.1}
.user .ur{font-family:var(--mono); font-size:9px; color:var(--dim); letter-spacing:.1em; text-transform:uppercase}
.content{padding:24px 28px 36px; display:flex; flex-direction:column; gap:20px}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.scard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; position:relative; overflow:hidden; box-shadow:var(--shadow-sm)}
.scard .ico{width:34px;height:34px;border-radius:9px; background:var(--accent-soft); display:flex;align-items:center;justify-content:center; margin-bottom:12px}
.scard .ico svg{width:18px;height:18px;stroke:var(--accent-ink);fill:none;stroke-width:1.9}
.scard .n{font-family:var(--display); font-weight:700; font-size:30px; line-height:1; letter-spacing:-.5px; font-variant-numeric:tabular-nums}
.scard .l{font-size:12px; color:var(--muted); margin-top:5px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm)}
.panel-h{display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-bottom:1px solid var(--line)}
.panel-h h2{font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:-.2px}
.add{font-size:12px; font-weight:600; color:#fff; background:var(--accent); border:none; padding:8px 14px; border-radius:8px; cursor:pointer; text-decoration:none}
.add:hover{filter:brightness(1.06)}
.empty{padding:48px 20px; text-align:center; color:var(--dim); font-size:14px}
.empty svg{width:40px;height:40px;stroke:var(--line2);fill:none;stroke-width:1.5;margin-bottom:12px}
@media (max-width:820px){
  .dash{grid-template-columns:1fr}
  .menu-toggle{display:flex}
  .topbar{padding:14px 16px; gap:10px}
  .topbar h1{font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .top-left .crumb{display:none}
  .top-right{gap:9px; flex-shrink:0}
  .user{padding:4px; border:0}
  .user>div:not(.av){display:none}   /* esconde nome/cargo, mantém só o avatar */
  /* Sidebar vira menu deslizante (off-canvas) pela esquerda. */
  .side{position:fixed; top:0; left:0; bottom:0; width:250px; max-width:82vw; z-index:60; transform:translateX(-100%); transition:transform .25s ease; overflow-y:auto; box-shadow:0 24px 60px -12px rgba(0,0,0,.55)}
  body.menu-open{overflow:hidden}
  body.menu-open .side{transform:translateX(0)}
  .side-backdrop{display:block; position:fixed; inset:0; background:rgba(2,4,10,.55); z-index:55; opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s}
  body.menu-open .side-backdrop{opacity:1; visibility:visible}
  .stats{grid-template-columns:repeat(2,1fr)}
  .content{padding:18px 14px}
  .panel table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
}

.login::before,.login::after{pointer-events:none}
.card{position:relative;z-index:2}

/* modulo equipe e formularios */
.flash{background:var(--good-soft);border:1px solid var(--good);color:var(--good);padding:12px 18px;border-radius:10px;margin-bottom:6px;font-size:13.5px}
.cli{display:flex;align-items:center;gap:11px;font-weight:600}
.who{color:var(--muted)}
.pill{font-family:var(--mono);font-size:10px;letter-spacing:.05em;padding:4px 9px;border-radius:20px;background:var(--accent-soft);color:var(--accent-ink)}
.pill.green{background:var(--good-soft);color:var(--good)}
.avatar-sm{width:34px;height:34px;border-radius:9px;object-fit:cover;border:1px solid var(--line)}
.avatar-ph{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--blue-deep));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:14px}
.link-edit{color:var(--accent-ink);font-size:13px;font-weight:600;text-decoration:none}
.link-edit:hover{text-decoration:underline}
.form{padding:22px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field select{width:100%;background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--text);font-family:var(--sans);font-size:14px;outline:none}
.field select:focus{border-color:var(--accent)}
.field input[type=file]{padding:9px 12px;font-size:13px;color:var(--muted)}
.field .err{display:block;color:var(--crit);font-size:11.5px;margin-top:5px}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);margin-top:4px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--accent)}
.form-actions{display:flex;gap:12px;margin-top:22px;align-items:center}
.form-actions .btn{width:auto;padding:12px 26px;margin-top:0}
.btn-sec{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;border:1px solid var(--line2);padding:8px 16px;border-radius:8px}
.btn-sec:hover{color:var(--text);border-color:var(--accent)}
.btn-danger{background:none;border:1px solid var(--crit);color:var(--crit);padding:11px 20px;border-radius:9px;font-weight:600;font-size:13px;cursor:pointer;font-family:var(--sans)}
.btn-danger:hover{background:var(--crit-soft)}
.photo-current{display:block;width:60px;height:60px;border-radius:10px;object-fit:cover;margin-bottom:8px;border:1px solid var(--line)}
@media (max-width:680px){.form-row{grid-template-columns:1fr}}

/* ajuste de respiro da tabela */
table{border-spacing:0}
th{padding:13px 22px !important; font-size:10px !important; white-space:nowrap; color:var(--dim); text-transform:uppercase; letter-spacing:.05em; font-weight:700}
td{padding:15px 22px !important; vertical-align:middle}
.cli{gap:14px}
.avatar-sm{width:44px; height:44px; border-radius:50%}
.avatar-ph{width:44px; height:44px; border-radius:50%; font-size:16px}
td .who, td.who{white-space:normal; word-break:break-word}
.pill{display:inline-block; white-space:nowrap}
.link-edit{margin-left:4px; padding:6px 14px; border:1px solid var(--line2); border-radius:8px; display:inline-block}
.link-edit:hover{border-color:var(--accent); text-decoration:none; background:var(--accent-soft)}
table tr td:last-child{text-align:right; white-space:nowrap}

/* logo placeholder de cliente */
.clogo{width:38px;height:38px;border-radius:9px;background:var(--accent-soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:13px;color:var(--accent-ink);flex-shrink:0}

/* modulo marca / dna */
.field textarea{width:100%;background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--text);font-family:var(--sans);font-size:14px;outline:none;resize:vertical;line-height:1.5}
.field textarea:focus{border-color:var(--accent)}
.form-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.color-field input[type=color],.field input[type=color]{width:100%;height:46px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);cursor:pointer;padding:4px}
.swatch{display:inline-block;width:18px;height:18px;border-radius:5px;margin-right:5px;border:1px solid var(--line2);vertical-align:middle}
@media (max-width:680px){.form-row3{grid-template-columns:1fr}}