/* ============================================================
   VELOTEK — CONCEITO C "ENERGIA"
   Vibrante, amigável, mascote-first. Amarelo protagonista.
   ============================================================ */

:root {
  /* Amarelos protagonistas */
  --y-50:  #FFFBEB;
  --y-100: #FFF3C4;
  --y-200: #FFE69A;
  --y-300: #FFD23F;
  --y-400: #FFC93C;
  --y-500: #FBB900;
  --y-600: #E0A300;
  --y-700: #B98400;

  /* Azuis */
  --b-100: #E4F0FB;
  --b-300: #3B9AE1;
  --b-400: #2563C9;
  --b-500: #1E5BB8;
  --b-600: #16468F;
  --b-700: #0F3266;

  /* Apoios alegres */
  --coral:  #FF7A59;
  --coral-d:#E85F3D;
  --mint:   #22C55E;
  --mint-d: #16A34A;
  --purple: #7C6BF0;
  --purple-d:#5C49D6;

  /* Neutros quentes */
  --n-900: #1B1A17;
  --n-700: #44403C;
  --n-500: #78716C;
  --n-400: #A8A29E;
  --n-200: #E7E5E4;
  --n-100: #F1EEEA;
  --n-50:  #FAFAF9;
  --white: #FFFFFF;

  --radius-sm: 12px;
  --radius:    18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --pill: 999px;

  --shadow-sm: 0 2px 8px rgba(27,26,23,.06);
  --shadow:    0 8px 24px rgba(27,26,23,.10);
  --shadow-lg: 0 18px 50px rgba(27,26,23,.16);
  --shadow-y:  0 12px 30px rgba(251,185,0,.32);
  --shadow-b:  0 12px 30px rgba(30,91,184,.28);

  --ease: cubic-bezier(.34,1.56,.64,1);

  --ff-head: 'Baloo 2', 'Poppins', system-ui, sans-serif;
  --ff-body: 'Nunito', 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-body);
  color: var(--n-900);
  background:
    radial-gradient(1200px 600px at 12% -5%, var(--y-100), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, var(--b-100), transparent 55%),
    var(--n-50);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4 { font-family: var(--ff-head); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
button, input, select, textarea { font-family: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.hidden { display: none !important; }
.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }

:focus-visible { outline: 3px solid var(--b-400); outline-offset: 2px; border-radius: 6px; }

/* blobs decorativos */
.blob { position:absolute; border-radius:48% 52% 60% 40% / 50% 45% 55% 50%; filter: blur(.5px); z-index:0; }

/* =====================  PORTAL  ===================== */
.portal {
  min-height: 100vh;
  place-items: center;
  padding: 40px 20px;
  position: relative; overflow: hidden;
}
.stage.portal.active { display: grid; }
.portal .blob.b1 { width: 460px; height:460px; background: var(--y-300); opacity:.45; top:-120px; left:-120px; }
.portal .blob.b2 { width: 520px; height:520px; background: var(--b-300); opacity:.22; bottom:-180px; right:-150px; }
.portal .blob.b3 { width: 240px; height:240px; background: var(--coral); opacity:.18; top:50%; left:8%; }

.portal-card {
  position: relative; z-index:2;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 44px 40px 38px;
  width: min(960px, 100%);
  text-align: center;
  border: 1px solid var(--n-200);
}
.portal-logo { height: 64px; margin: 0 auto 6px; }
.portal-card .tagline { color: var(--n-500); font-weight: 700; margin-bottom: 4px; }
.portal-card h1 { font-size: clamp(28px, 4vw, 42px); margin: 18px 0 8px; }
.portal-card h1 .hl { color: var(--y-600); }
.portal-card .sub { color: var(--n-500); max-width: 560px; margin: 0 auto 30px; font-size: 16px; font-weight:600; }

.portal-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 720px){ .portal-choices { grid-template-columns: 1fr; } }

.choice {
  border-radius: var(--radius-lg);
  padding: 26px 24px 24px;
  cursor: pointer; border: none; text-align: left;
  position: relative; overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s;
  color: var(--white);
}
.choice:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.choice.app  { background: linear-gradient(150deg, var(--y-400), var(--y-600)); color: var(--n-900); }
.choice.op   { background: linear-gradient(150deg, var(--b-400), var(--b-600)); }
.choice .mascot-mini { position:absolute; right:-14px; bottom:-14px; width:140px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.18)); }
.choice .kicker { font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:12px; opacity:.85; }
.choice h3 { font-size: 24px; margin: 6px 0 8px; max-width: 70%; }
.choice p  { font-size: 14px; font-weight:600; max-width: 64%; opacity:.92; }
.choice .go {
  margin-top: 18px; display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.85); color: var(--n-900);
  padding: 9px 16px; border-radius: var(--pill); font-weight:800; font-size:13px;
}
.choice.op .go { background: var(--y-400); }
.portal-foot { margin-top: 28px; color: var(--n-400); font-size: 13px; font-weight:700; }

/* =====================  STAGE / VIEW SWITCH  ===================== */
.stage { display: none; }
.stage.active { display: block; }

.back-portal {
  position: fixed; left: 16px; bottom: 16px; z-index: 90;
  background: var(--white); border:1px solid var(--n-200);
  border-radius: var(--pill); padding: 9px 16px; font-weight:800; font-size:13px;
  box-shadow: var(--shadow); cursor:pointer; color: var(--n-700);
  display:inline-flex; align-items:center; gap:8px;
}
.back-portal:hover { background: var(--y-400); border-color: var(--y-500); }

/* =====================  APP — PHONE FRAME  ===================== */
.app-stage {
  min-height: 100vh;
  place-items: center;
  padding: 30px 16px 16px;
  position: relative;
}
.stage.active .app-stage,
.stage.app-stage.active { display: grid; }
.app-stage .blob.ba { width:420px;height:420px;background:var(--y-300);opacity:.4;top:-80px;left:6%; }
.app-stage .blob.bb { width:380px;height:380px;background:var(--b-300);opacity:.2;bottom:-60px;right:8%; }

.phone {
  position: relative; z-index:2;
  width: 390px; max-width: 100%;
  height: 844px; max-height: calc(100vh - 40px);
  background: var(--n-50);
  border-radius: 46px;
  box-shadow: var(--shadow-lg), 0 0 0 12px #111 , 0 0 0 14px #2a2a2a;
  overflow: hidden;
  display: flex; flex-direction: column;
}
@media (max-width: 440px){
  .phone { border-radius: 0; box-shadow:none; height: 100vh; max-height: none; width:100vw; }
  .app-stage { padding: 0; }
}

.statusbar {
  height: 44px; flex: 0 0 44px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 22px; font-size: 13px; font-weight:800; color: var(--n-900);
  background: transparent; position: relative; z-index: 5;
}
.statusbar .sb-icons { display:flex; gap:6px; align-items:center; }
.statusbar .sb-icons svg { width:16px; height:16px; }

.app-screen { flex: 1 1 auto; overflow-y: auto; overflow-x:hidden; position: relative; -webkit-overflow-scrolling: touch; }
.app-screen::-webkit-scrollbar { width: 0; }

.app-screen-pad { padding: 4px 18px 110px; }

/* bottom tab bar */
.tabbar {
  flex: 0 0 auto;
  position: relative; z-index: 6;
  margin: 0 12px 12px; padding: 8px;
  background: var(--white);
  border-radius: var(--pill);
  box-shadow: var(--shadow);
  display: grid; grid-template-columns: repeat(4,1fr); gap: 4px;
  border: 1px solid var(--n-200);
}
.tab {
  border:none; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding: 9px 4px; border-radius: var(--pill);
  color: var(--n-400); font-weight:800; font-size: 11px;
  transition: all .25s var(--ease);
}
.tab svg { width:24px; height:24px; }
.tab.active { background: var(--y-400); color: var(--n-900); transform: translateY(-2px); box-shadow: var(--shadow-y); }
.tab:not(.active):hover { color: var(--n-700); background: var(--n-100); }

/* app screens transitions */
.app-view { display:none; animation: fadeUp .4s var(--ease); }
.app-view.active { display:block; }
@keyframes fadeUp { from { opacity:0; transform: translateY(12px);} to {opacity:1; transform:none;} }

/* ---- App generic bits ---- */
.app-greet { display:flex; align-items:center; gap:12px; padding: 8px 2px 4px; }
.app-greet .hello small { color: var(--n-500); font-weight:800; font-size:13px; }
.app-greet .hello h2 { font-size: 24px; }
.app-greet .ava {
  width:46px;height:46px;border-radius:var(--pill);object-fit:cover;
  border:3px solid var(--y-400); box-shadow: var(--shadow-sm);
}
.bell {
  margin-left:auto; width:44px;height:44px;border-radius:var(--pill);
  background: var(--white); border:1px solid var(--n-200);
  display:grid; place-items:center; cursor:pointer; position:relative;
  box-shadow: var(--shadow-sm);
}
.bell svg{width:22px;height:22px;color:var(--n-700);}
.bell .dot{ position:absolute; top:10px; right:11px; width:9px;height:9px;border-radius:50%;background:var(--coral); border:2px solid var(--white);}

.guide-card {
  position: relative; overflow: hidden;
  margin-top: 14px;
  background: linear-gradient(140deg, var(--y-300), var(--y-500));
  border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow-y);
}
.guide-card .blobx { position:absolute; width:160px;height:160px;border-radius:50%; background: rgba(255,255,255,.25); top:-50px; right:-30px; }
.guide-card h3 { font-size: 19px; max-width: 65%; position:relative; }
.guide-card p { font-size: 13px; font-weight:700; max-width: 62%; margin-top:4px; position:relative; color: var(--n-700);}
.guide-card .mascot { position:absolute; right:-6px; bottom:-8px; width:128px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.2)); }

.section-title { display:flex; align-items:center; justify-content:space-between; margin: 22px 2px 12px; }
.section-title h3 { font-size: 18px; }
.section-title a { color: var(--b-500); font-weight:800; font-size:13px; }

/* vehicle card (home) */
.veh-card {
  border-radius: var(--radius-lg); padding: 18px;
  background: linear-gradient(145deg, var(--b-400), var(--b-600));
  color: var(--white); box-shadow: var(--shadow-b); position:relative; overflow:hidden;
}
.veh-card .road { position:absolute; inset:auto 0 0 0; height:60px; background: rgba(255,255,255,.06); }
.veh-card .top { display:flex; justify-content:space-between; align-items:flex-start; }
.veh-card .model { font-family: var(--ff-head); font-size: 22px; }
.veh-card .sub { font-weight:700; opacity:.85; font-size:13px; }
.veh-card .emoji { font-size: 34px; }
.plate {
  display:inline-flex; flex-direction:column; align-items:stretch;
  background:#fff; color:#111; border-radius:8px; overflow:hidden;
  border:2px solid #111; min-width: 116px; box-shadow: var(--shadow-sm);
}
.plate .mb { background:#1351B4; color:#fff; font-size:8px; font-weight:800; text-align:center; padding:2px; letter-spacing:.12em; display:flex; align-items:center; justify-content:center; gap:4px;}
.plate .mb .br { background:#fff; color:#1351B4; border-radius:2px; padding:0 3px; font-size:7px;}
.plate .num { font-family: var(--ff-head); font-weight:800; font-size: 20px; text-align:center; padding:3px 8px 5px; letter-spacing:.06em; }
.veh-card .stats { display:flex; gap:18px; margin-top:16px; }
.veh-card .stats div small{ display:block; opacity:.8; font-size:11px; font-weight:800; }
.veh-card .stats div b{ font-size:16px; font-family:var(--ff-head); }

/* reminder rows */
.reminder {
  display:flex; align-items:center; gap:13px;
  background: var(--white); border:1px solid var(--n-200);
  border-radius: var(--radius); padding: 13px 14px; margin-bottom: 10px;
  box-shadow: var(--shadow-sm); transition: transform .2s var(--ease);
}
.reminder:hover { transform: translateX(3px); }
.reminder .ic { width:44px;height:44px;border-radius:14px; display:grid; place-items:center; flex:0 0 44px; }
.reminder .ic svg{ width:24px;height:24px; }
.reminder b { font-size:15px; display:block; }
.reminder small{ color:var(--n-500); font-weight:700; }
.reminder .when { margin-left:auto; text-align:right; font-weight:800; font-size:12px; color:var(--n-500); }
.ic.warn{background:var(--y-100); color:var(--y-700);}
.ic.info{background:var(--b-100); color:var(--b-500);}
.ic.ok{background:#DCFCE7; color:var(--mint-d);}
.ic.cor{background:#FFE8E1; color:var(--coral-d);}

/* quick shortcuts */
.shortcuts { display:grid; grid-template-columns: repeat(4,1fr); gap:10px; margin-top:6px; }
.shortcut {
  background: var(--white); border:1px solid var(--n-200); border-radius: var(--radius);
  padding: 12px 6px; text-align:center; cursor:pointer; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease); font-weight:800; font-size:11px; color:var(--n-700);
}
.shortcut:hover{ transform: translateY(-4px); border-color: var(--y-400); }
.shortcut .b { width:42px;height:42px;border-radius:14px; margin:0 auto 6px; display:grid;place-items:center;}
.shortcut .b svg{width:22px;height:22px;}

/* generic pills/badges */
.badge { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:var(--pill); font-weight:800; font-size:11.5px; }
.badge.warn{ background:var(--y-100); color:var(--y-700);}
.badge.info{ background:var(--b-100); color:var(--b-500);}
.badge.ok{ background:#DCFCE7; color:var(--mint-d);}
.badge.exec{ background:#EDE9FE; color:var(--purple-d);}
.badge.cor{ background:#FFE8E1; color:var(--coral-d);}
.badge.pf{ background:var(--b-100); color:var(--b-500);}
.badge.pj{ background:#EDE9FE; color:var(--purple-d);}

/* buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer; font-weight:800; border-radius: var(--pill);
  padding: 13px 22px; font-size: 15px; transition: transform .2s var(--ease), box-shadow .2s, filter .2s;
}
.btn svg{ width:18px; height:18px; flex:0 0 18px; }
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn-y { background: var(--y-400); color: var(--n-900); box-shadow: var(--shadow-y); }
.btn-y:hover{ filter: brightness(1.03); }
.btn-b { background: var(--b-500); color:#fff; box-shadow: var(--shadow-b); }
.btn-mint { background: var(--mint); color:#fff; box-shadow: 0 10px 24px rgba(34,197,94,.3); }
.btn-ghost { background: var(--white); color: var(--n-700); border:1.5px solid var(--n-200); }
.btn-coral { background: var(--coral); color:#fff; box-shadow: 0 10px 24px rgba(255,122,89,.3); }
.btn-block{ width:100%; }
.btn-lg{ padding: 16px 24px; font-size: 16px; }

/* timeline (vehicle history + OS) */
.timeline { position: relative; margin-left: 8px; padding-left: 26px; }
.timeline::before { content:''; position:absolute; left:7px; top:6px; bottom:6px; width:3px; background: var(--n-200); border-radius:3px; }
.tl-item { position: relative; margin-bottom: 16px; }
.tl-item .dot { position:absolute; left:-26px; top:2px; width:18px;height:18px;border-radius:50%; background:var(--white); border:4px solid var(--n-400); }
.tl-item.done .dot{ border-color: var(--mint); }
.tl-item.now .dot{ border-color: var(--y-500); box-shadow: 0 0 0 5px var(--y-100); animation: pulse 1.6s infinite; }
.tl-item.next .dot{ border-color: var(--n-200); }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 5px var(--y-100);} 50%{ box-shadow:0 0 0 9px rgba(255,201,60,.18);} }
.tl-card {
  background:var(--white); border:1px solid var(--n-200); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow-sm);
}
.tl-card .hd{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.tl-card b{ font-size:14.5px; }
.tl-card small{ color:var(--n-500); font-weight:700; }
.tl-card .org { display:inline-flex;align-items:center; gap:6px; font-weight:800; font-size:12px; margin-top:6px; }
.org-chip { width:8px;height:8px;border-radius:50%; }

/* generic list card */
.card {
  background: var(--white); border:1px solid var(--n-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 16px; margin-bottom: 12px;
}
.os-card { cursor:pointer; transition: transform .2s var(--ease), box-shadow .2s; }
.os-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--y-300); }
.os-card .row1 { display:flex; align-items:center; justify-content:space-between; }
.os-card .os-id { font-family: var(--ff-head); font-weight:800; color: var(--b-500); }
.os-card h4 { margin: 8px 0 2px; font-size:16px; }
.os-card .meta { color: var(--n-500); font-weight:700; font-size:13px; }
.os-card .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px dashed var(--n-200); }
.os-card .price{ font-family:var(--ff-head); font-weight:800; font-size:18px; }

/* itemized list (orçamento/OS) */
.itemized { background:var(--white); border:1px solid var(--n-200); border-radius:var(--radius-lg); overflow:hidden; }
.itemized .ig-head { background: var(--n-100); padding:9px 16px; font-weight:800; font-size:12px; color:var(--n-500); text-transform:uppercase; letter-spacing:.05em; display:flex; align-items:center; gap:8px;}
.itemized .ig-head svg { width:16px; height:16px; flex:0 0 16px; }
.itline { display:flex; justify-content:space-between; align-items:center; padding: 12px 16px; border-bottom:1px solid var(--n-100); }
.itline:last-child{ border-bottom:none; }
.itline .nm b{ font-size:14.5px; } .itline .nm small{ display:block; color:var(--n-500); font-weight:700; }
.itline .vl{ font-family:var(--ff-head); font-weight:800; }
.total-row { display:flex; justify-content:space-between; align-items:center; padding:16px; background: var(--n-900); color:#fff; }
.total-row span{ font-weight:800; opacity:.8; }
.total-row b{ font-family:var(--ff-head); font-size:26px; color: var(--y-400); }

/* photo grid (checklist) */
.photo-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.photo-grid .ph { aspect-ratio:1; border-radius:14px; overflow:hidden; position:relative; box-shadow: var(--shadow-sm); }
.photo-grid .ph div{ width:100%;height:100%; display:grid; place-items:center; font-size:30px; }
.photo-grid .ph .tag{ position:absolute; left:6px; bottom:6px; background:rgba(0,0,0,.6); color:#fff; font-size:9px; font-weight:800; padding:2px 7px; border-radius:var(--pill); }

/* onboarding */
.onb { height:100%; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.onb .skip { position:absolute; top:14px; right:18px; z-index:5; font-weight:800; color:var(--n-500); cursor:pointer; font-size:13px; }
.onb-track { flex:1; display:flex; transition: transform .5s var(--ease); }
.onb-slide { min-width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 30px 30px 0; position:relative; }
.onb-art { position:relative; width:230px; height:260px; display:grid; place-items:center; margin-bottom: 20px; }
.onb-art .blobz { position:absolute; width:210px;height:210px; border-radius: 46% 54% 58% 42% / 50% 46% 54% 50%; }
.onb-art img{ position:relative; height: 250px; filter: drop-shadow(0 14px 22px rgba(0,0,0,.18)); }
.onb-slide h2{ font-size: 26px; max-width: 280px; }
.onb-slide p{ color: var(--n-500); font-weight:700; margin-top:10px; max-width: 270px; font-size:15px; }
.onb-foot{ padding: 24px 30px 30px; }
.dots{ display:flex; gap:8px; justify-content:center; margin-bottom:20px; }
.dots i{ width:9px;height:9px;border-radius:50%; background: var(--n-200); transition: all .3s var(--ease); }
.dots i.on{ width:26px; background: var(--y-500); }

/* auth (app login) */
.auth-wrap { padding: 6px 26px 30px; text-align:center; }
.auth-hero { position:relative; height: 200px; display:grid; place-items:center; }
.auth-hero .blobz{ position:absolute; width:190px;height:190px;border-radius:50%; background: var(--y-300); opacity:.55; }
.auth-hero img{ position:relative; height: 200px; filter: drop-shadow(0 12px 18px rgba(0,0,0,.16)); }
.auth-tabs { display:flex; background: var(--n-100); border-radius:var(--pill); padding:5px; margin: 6px 0 22px; }
.auth-tabs button{ flex:1; border:none; background:transparent; padding:11px; border-radius:var(--pill); font-weight:800; color:var(--n-500); cursor:pointer; }
.auth-tabs button.on{ background:#fff; color:var(--n-900); box-shadow: var(--shadow-sm); }
.field { text-align:left; margin-bottom: 14px; }
.field label{ display:block; font-weight:800; font-size:13px; margin-bottom:6px; color:var(--n-700); }
.field .inp {
  display:flex; align-items:center; gap:10px;
  background:var(--white); border:1.5px solid var(--n-200); border-radius:var(--radius); padding: 13px 15px;
  transition: border-color .2s, box-shadow .2s;
}
.field .inp:focus-within{ border-color: var(--y-500); box-shadow: 0 0 0 4px var(--y-100); }
.field .inp svg{ width:20px;height:20px; color:var(--n-400); flex:0 0 20px; }
.field .inp input{ border:none; outline:none; background:transparent; flex:1; font-size:15px; font-weight:700; color:var(--n-900); }
.auth-meta { display:flex; justify-content:space-between; align-items:center; margin:2px 0 20px; font-size:13px; font-weight:800; }
.auth-meta a{ color: var(--b-500); }

/* profile */
.prof-head { text-align:center; padding: 14px 0 4px; position:relative; }
.prof-head .ava { width:84px;height:84px;border-radius:var(--pill); object-fit:cover; margin:0 auto 10px; border:4px solid var(--y-400); box-shadow:var(--shadow); }
.prof-head h2{ font-size:22px; } .prof-head p{ color:var(--n-500); font-weight:700; }
.list-tile {
  display:flex; align-items:center; gap:13px; background:var(--white); border:1px solid var(--n-200);
  border-radius:var(--radius); padding:14px; margin-bottom:10px; cursor:pointer; box-shadow:var(--shadow-sm);
  transition: transform .2s var(--ease);
}
.list-tile:hover{ transform: translateX(3px); border-color: var(--y-300); }
.list-tile .ic{ width:42px;height:42px;border-radius:13px; display:grid;place-items:center; flex:0 0 42px; }
.list-tile .ic svg{ width:22px;height:22px; }
.list-tile b{ display:block; font-size:15px; } .list-tile small{ color:var(--n-500); font-weight:700; }
.list-tile .chev{ margin-left:auto; color:var(--n-400); }
.org-tile { display:flex; align-items:center; gap:12px; background:var(--white); border:1px solid var(--n-200); border-radius:var(--radius); padding:13px; margin-bottom:10px; box-shadow:var(--shadow-sm); }
.org-tile .logo{ width:44px;height:44px;border-radius:13px; display:grid;place-items:center; color:#fff; font-family:var(--ff-head); font-weight:800; font-size:18px; flex:0 0 44px; }

/* =====================  OPERATOR  ===================== */
.op-stage { display:none; }
.op-stage.active { display:flex; min-height:100vh; }

.op-sidebar {
  width: 248px; flex:0 0 248px; background: var(--white);
  border-right:1px solid var(--n-200); padding: 20px 16px;
  display:flex; flex-direction:column; position: sticky; top:0; height:100vh;
  transition: width .3s var(--ease), flex-basis .3s var(--ease);
}
.op-sidebar .logo-row { display:flex; align-items:center; gap:10px; padding: 4px 6px 22px; }
.op-sidebar .logo-row img{ height:34px; }
.op-nav { display:flex; flex-direction:column; gap:4px; }
.op-nav .navi {
  display:flex; align-items:center; gap:13px; padding: 12px 14px; border-radius: var(--radius);
  border:none; background:transparent; cursor:pointer; font-weight:800; color:var(--n-500); font-size:14.5px;
  transition: all .2s var(--ease); white-space:nowrap;
}
.op-nav .navi svg{ width:23px;height:23px; flex:0 0 23px; }
.op-nav .navi:hover{ background: var(--n-100); color:var(--n-900); }
.op-nav .navi.active{ background: var(--y-400); color:var(--n-900); box-shadow: var(--shadow-y); }
.op-sidebar .side-foot { margin-top:auto; }
.op-help {
  background: linear-gradient(150deg, var(--b-400), var(--b-600)); color:#fff;
  border-radius: var(--radius-lg); padding: 16px; position:relative; overflow:hidden; text-align:center;
}
.op-help img{ height:96px; margin: -6px auto 4px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.op-help b{ font-size:14px; } .op-help p{ font-size:12px; font-weight:700; opacity:.9; margin:4px 0 10px; }
.op-help .btn{ padding:9px 16px; font-size:13px; width:100%; }

.op-sidebar.collapsed { width: 78px; flex-basis:78px; }
.op-sidebar.collapsed .logo-row span,
.op-sidebar.collapsed .navi span,
.op-sidebar.collapsed .side-foot { display:none; }
.op-sidebar.collapsed .navi{ justify-content:center; }

.op-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.op-topbar {
  position: sticky; top:0; z-index: 30;
  background: rgba(250,250,249,.85); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--n-200);
  display:flex; align-items:center; gap:14px; padding: 14px 26px;
}
.burger { width:42px;height:42px;border-radius:13px; border:1px solid var(--n-200); background:#fff; cursor:pointer; display:grid;place-items:center; }
.burger svg{ width:22px;height:22px; }
.op-search { flex:1; max-width: 440px; display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid var(--n-200); border-radius:var(--pill); padding:10px 16px; }
.op-search svg{ width:19px;height:19px; color:var(--n-400); }
.op-search input{ border:none; outline:none; flex:1; font-weight:700; font-size:14px; background:transparent; }
.op-topbar .spacer{ flex:1; }
.op-tb-btn{ width:44px;height:44px;border-radius:13px; border:1px solid var(--n-200); background:#fff; cursor:pointer; display:grid;place-items:center; position:relative; }
.op-tb-btn svg{ width:21px;height:21px; color:var(--n-700);}
.op-tb-btn .dot{ position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--coral); border:2px solid #fff; }
.op-user{ display:flex; align-items:center; gap:10px; padding-left:6px; }
.op-user img{ width:42px;height:42px;border-radius:var(--pill); border:2.5px solid var(--y-400); }
.op-user .nm{ font-weight:800; font-size:14px; } .op-user .nm small{ display:block; color:var(--n-500); font-weight:700; }

.op-content { padding: 26px; }
.op-view { display:none; animation: fadeUp .4s var(--ease); }
.op-view.active { display:block; }

.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.page-head h1{ font-size: 30px; } .page-head p{ color:var(--n-500); font-weight:700; margin-top:4px; }

/* KPI cards */
.kpis { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom:22px; }
@media (max-width:1100px){ .kpis{ grid-template-columns: repeat(2,1fr);} }
.kpi { border-radius: var(--radius-lg); padding: 18px 18px 16px; color:#fff; position:relative; overflow:hidden; box-shadow: var(--shadow); }
.kpi.y{ background: linear-gradient(150deg, var(--y-400), var(--y-600)); color:var(--n-900); }
.kpi.b{ background: linear-gradient(150deg, var(--b-400), var(--b-600)); }
.kpi.p{ background: linear-gradient(150deg, var(--purple), var(--purple-d)); }
.kpi.m{ background: linear-gradient(150deg, var(--mint), var(--mint-d)); }
.kpi .blobk{ position:absolute; width:120px;height:120px;border-radius:50%; background: rgba(255,255,255,.16); top:-40px; right:-30px; }
.kpi .ic{ width:42px;height:42px;border-radius:13px; background: rgba(255,255,255,.22); display:grid;place-items:center; margin-bottom:12px; }
.kpi .ic svg{ width:23px;height:23px; }
.kpi small{ font-weight:800; opacity:.9; font-size:13px; }
.kpi .v{ font-family: var(--ff-head); font-size: 30px; font-weight:800; margin-top:2px; }
.kpi .trend{ display:inline-flex; align-items:center; gap:4px; font-weight:800; font-size:12px; margin-top:8px; background: rgba(255,255,255,.25); padding:3px 9px; border-radius:var(--pill); }

.op-grid { display:grid; grid-template-columns: 1.6fr 1fr; gap:18px; }
@media (max-width:1100px){ .op-grid{ grid-template-columns:1fr; } }

.panel { background:#fff; border:1px solid var(--n-200); border-radius:var(--radius-lg); padding:20px; box-shadow: var(--shadow-sm); }
.panel .ph{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.panel .ph h3{ font-size:18px; }

/* mini bar chart */
.chart { display:flex; align-items:flex-end; gap:12px; height: 190px; padding-top:10px; }
.chart .bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.chart .bar .col { width: 70%; border-radius: 10px 10px 4px 4px; background: linear-gradient(var(--b-400), var(--b-600)); transition: height .8s var(--ease); position:relative; }
.chart .bar:nth-child(even) .col{ background: linear-gradient(var(--y-400), var(--y-600)); }
.chart .bar small{ font-weight:800; color:var(--n-500); font-size:12px; }
.chart .bar .cap{ font-weight:800; font-size:11px; color:var(--n-400); }

/* table */
.table-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse: collapse; }
table.tbl th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--n-500); font-weight:800; padding: 0 14px 12px; }
table.tbl td { padding: 13px 14px; border-top:1px solid var(--n-100); font-weight:700; font-size:14px; }
table.tbl tr:hover td{ background: var(--y-50); }
.cust-row { display:flex; align-items:center; gap:11px; }
.cust-row .av{ width:38px;height:38px;border-radius:var(--pill); display:grid;place-items:center; color:#fff; font-weight:800; font-family:var(--ff-head); flex:0 0 38px; }
.icon-btn{ width:34px;height:34px;border-radius:10px; border:1px solid var(--n-200); background:#fff; cursor:pointer; display:inline-grid; place-items:center; }
.icon-btn svg{ width:17px;height:17px; color:var(--n-500);}
.icon-btn:hover{ border-color:var(--y-400); }
.pagination{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; }
.pagination .pages{ display:flex; gap:6px; }
.pagination .pages button{ width:36px;height:36px;border-radius:11px; border:1px solid var(--n-200); background:#fff; font-weight:800; cursor:pointer; }
.pagination .pages button.on{ background: var(--y-400); border-color:var(--y-500); }

/* kanban */
.kanban { display:flex; gap:16px; overflow-x:auto; padding-bottom:14px; }
.kcol { flex:0 0 280px; background: var(--n-100); border-radius: var(--radius-lg); padding:12px; }
.kcol .kh{ display:flex; align-items:center; justify-content:space-between; padding: 6px 8px 12px; }
.kcol .kh .nm{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; }
.kcol .kh .nm .pin{ width:11px;height:11px;border-radius:50%; }
.kcol .kh .ct{ background:#fff; border:1px solid var(--n-200); border-radius:var(--pill); font-weight:800; font-size:12px; padding:2px 9px; }
.kcard { background:#fff; border:1px solid var(--n-200); border-radius:var(--radius); padding:14px; margin-bottom:10px; cursor:grab; box-shadow:var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s; }
.kcard:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.kcard .r1{ display:flex; align-items:center; justify-content:space-between; }
.kcard .os{ font-family:var(--ff-head); font-weight:800; color:var(--b-500); font-size:13px; }
.kcard h4{ font-size:15px; margin:8px 0 2px; } .kcard .cust{ color:var(--n-500); font-weight:700; font-size:13px; }
.kcard .r2{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.kcard .price{ font-family:var(--ff-head); font-weight:800; font-size:15px; }
.kcard .ava{ width:28px;height:28px;border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:11px; }

/* op detail */
.detail-grid { display:grid; grid-template-columns: 1.7fr 1fr; gap:18px; }
@media (max-width:1100px){ .detail-grid{ grid-template-columns:1fr; } }
.info-pair { display:flex; gap:14px; flex-wrap:wrap; }
.info-pair .pair{ flex:1; min-width:140px; background:var(--n-50); border:1px solid var(--n-200); border-radius:var(--radius); padding:13px 15px; }
.info-pair .pair small{ color:var(--n-500); font-weight:800; font-size:12px; } .info-pair .pair b{ font-size:15px; display:block; margin-top:2px; }
.op-itemized table{ width:100%; border-collapse:collapse; }
.op-itemized th{ text-align:left; font-size:11px; text-transform:uppercase; color:var(--n-500); font-weight:800; padding:0 12px 10px; }
.op-itemized td{ padding:11px 12px; border-top:1px solid var(--n-100); font-weight:700; font-size:13.5px; }
.op-itemized .vl{ text-align:right; font-family:var(--ff-head); font-weight:800; }

/* empty state */
.empty { text-align:center; padding: 30px 20px; }
.empty img{ height: 180px; margin: 0 auto 14px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.12)); }
.empty h3{ font-size:20px; } .empty p{ color:var(--n-500); font-weight:700; margin:6px auto 18px; max-width:360px; }

/* tabs (settings) */
.tabs-bar { display:flex; gap:6px; background: var(--n-100); border-radius:var(--pill); padding:5px; margin-bottom:22px; width:fit-content; }
.tabs-bar button{ border:none; background:transparent; padding:10px 20px; border-radius:var(--pill); font-weight:800; color:var(--n-500); cursor:pointer; font-size:14px; }
.tabs-bar button.on{ background:#fff; color:var(--n-900); box-shadow:var(--shadow-sm); }
.member-card { display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--n-200); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px; box-shadow:var(--shadow-sm); }
.member-card img{ width:48px;height:48px;border-radius:var(--pill); border:2.5px solid var(--y-400); }
.member-card .nm b{ font-size:15px;} .member-card .nm small{ color:var(--n-500); font-weight:700; }
.member-card .right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.role-pill{ padding:6px 14px; border-radius:var(--pill); font-weight:800; font-size:12.5px; }
.role-pill.admin{ background:var(--y-100); color:var(--y-700);}
.role-pill.mec{ background:var(--b-100); color:var(--b-500);}
.role-pill.fin{ background:#DCFCE7; color:var(--mint-d);}
.role-pill.att{ background:#EDE9FE; color:var(--purple-d);}

.op-tag { font-weight:800; color:var(--n-500); font-size:13px; }
.divider { height:1px; background:var(--n-200); margin:18px 0; }

.float-cta { position: sticky; bottom: 0; }

.note { background: var(--y-50); border:1px dashed var(--y-400); border-radius:var(--radius); padding:12px 14px; font-weight:700; font-size:13px; color:var(--y-700); display:flex; gap:10px; align-items:center; }
.note svg{ width:20px;height:20px; flex:0 0 20px; }

/* =====================  ADIÇÕES — ESTADOS, CHIPS, OFF-CANVAS  ===================== */

/* 1) Skeleton de carregamento */
.skel{ background:linear-gradient(100deg, var(--n-200) 30%, var(--n-100) 50%, var(--n-200) 70%); background-size:200% 100%; animation: skelpulse 1.3s ease-in-out infinite; border-radius:8px; }
@keyframes skelpulse{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
.skel-card{ background:var(--white); border:1px solid var(--n-200); border-radius:var(--radius-lg); padding:16px; margin-bottom:12px; box-shadow:var(--shadow-sm); }
.skel-line{ height:12px; margin-bottom:10px; }
.skel-line.lg{ height:18px; margin-bottom:14px; }
.skel-line:last-child{ margin-bottom:0; }
.skel-row{ display:flex; align-items:center; gap:12px; padding:12px 4px; border-top:1px solid var(--n-100); }
.skel-row .skel.av{ width:38px;height:38px;border-radius:999px;flex:0 0 38px; }
.skel-row .skel.l{ height:12px; flex:1; }

/* 2) State card (vazio / erro) reutilizável */
.state-card{ text-align:center; padding:34px 20px; }
.state-card img{ height:170px; margin:0 auto 14px; filter:drop-shadow(0 10px 16px rgba(27,26,23,.14)); }
.state-card h3{ font-size:20px; }
.state-card p{ color:var(--n-500); font-weight:700; margin:6px auto 18px; max-width:300px; font-size:14px; }

/* 3) Chips (filtros / horários) */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 2px 16px; }
.chip{ border:1.5px solid var(--n-200); background:var(--white); color:var(--n-700); border-radius:var(--pill); padding:8px 16px; font-weight:800; font-size:13px; cursor:pointer; transition: all .2s var(--ease); box-shadow:var(--shadow-sm); }
.chip:hover{ border-color:var(--y-400); transform:translateY(-1px); }
.chip.on{ background:var(--y-400); border-color:var(--y-500); color:var(--n-900); box-shadow:var(--shadow-y); }
.chips.grid{ display:grid; grid-template-columns:repeat(4,1fr); }

/* 4) Off-canvas operador (≤900px) */
.op-scrim{ display:none; position:fixed; inset:0; background:rgba(27,26,23,.45); z-index:40; }
.op-scrim.show{ display:block; }
@media (max-width:900px){
  .op-sidebar{ position:fixed; left:0; top:0; height:100vh; z-index:50; transform:translateX(-100%); box-shadow:var(--shadow-lg); }
  .op-sidebar.open{ transform:translateX(0); }
  .op-sidebar.collapsed{ width:248px; flex-basis:248px; } /* no mobile não colapsa, vira off-canvas */
  .op-content{ padding:18px 14px; }
  .op-topbar{ padding:12px 14px; }
  .op-user .nm{ display:none; }
  .page-head h1{ font-size:24px; }
}
@media (max-width:560px){
  .kpis{ grid-template-columns:1fr; }
  .op-search{ max-width:none; }
}

/* =====================  ADIÇÕES — NOVA OS / AGENDA / ESTOQUE / COMPRAS / FINANCEIRO  ===================== */

/* --- toggle (checklist da Nova OS) --- */
.op-toggle{ width:42px; height:24px; border-radius:var(--pill); background:var(--n-200); position:relative; cursor:pointer; flex:0 0 42px; transition: background .2s var(--ease); }
.op-toggle i{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition: transform .2s var(--ease); }
.op-toggle.on{ background:var(--mint); }
.op-toggle.on i{ transform: translateX(18px); }

/* --- textarea operador --- */
.op-textarea{ width:100%; border:1.5px solid var(--n-200); border-radius:var(--radius); padding:13px 15px; font-weight:700; font-size:14px; color:var(--n-900); resize:vertical; background:var(--white); transition: border-color .2s, box-shadow .2s; }
.op-textarea:focus{ outline:none; border-color:var(--y-500); box-shadow:0 0 0 4px var(--y-100); }

/* --- resumo (Nova OS) --- */
.op-summary .row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--n-100); font-weight:800; }
.op-summary .row:last-child{ border-bottom:none; }
.op-summary .row span{ color:var(--n-500); }
.op-summary .row b{ font-family:var(--ff-head); }

/* --- AGENDA --- */
.ag-nav{ display:flex; align-items:center; gap:8px; }
.ag-scroll{ overflow-x:auto; }
.ag-grid{ display:grid; min-width:760px; }
.ag-corner{ position:sticky; left:0; z-index:2; background:var(--white); border-bottom:1px solid var(--n-200); border-right:1px solid var(--n-200); }
.ag-rhead{ padding:12px 10px; text-align:center; border-bottom:1px solid var(--n-200); border-left:1px solid var(--n-100); }
.ag-rhead .dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.ag-rhead b{ font-size:13.5px; display:block; }
.ag-rhead small{ color:var(--n-500); font-weight:700; font-size:11px; }
.ag-time{ position:sticky; left:0; z-index:1; background:var(--white); height:56px; display:flex; align-items:flex-start; justify-content:flex-end; padding:4px 8px 0; font-weight:800; font-size:11px; color:var(--n-400); border-right:1px solid var(--n-200); border-top:1px solid var(--n-100); }
.ag-cell{ height:56px; border-top:1px solid var(--n-100); border-left:1px solid var(--n-100); position:relative; padding:4px; }
.ag-event{ position:absolute; left:4px; right:4px; top:4px; border-radius:12px; padding:7px 9px; overflow:hidden; box-shadow:var(--shadow-sm); cursor:pointer; transition: transform .15s var(--ease); z-index:1; }
.ag-event:hover{ transform: scale(1.015); z-index:3; box-shadow:var(--shadow); }
.ag-event b{ font-size:12.5px; display:block; line-height:1.15; }
.ag-event small{ display:block; font-weight:700; font-size:10.5px; opacity:.92; margin-top:2px; }
.ag-event .t{ display:inline-block; margin-top:5px; font-weight:800; font-size:10px; background:rgba(255,255,255,.35); padding:1px 7px; border-radius:var(--pill); }
.ag-event.b{ background:linear-gradient(150deg,var(--b-400),var(--b-600)); color:#fff; }
.ag-event.y{ background:linear-gradient(150deg,var(--y-300),var(--y-500)); color:var(--n-900); }
.ag-event.purple{ background:linear-gradient(150deg,var(--purple),var(--purple-d)); color:#fff; }
.ag-event.coral{ background:linear-gradient(150deg,var(--coral),var(--coral-d)); color:#fff; }
.ag-event.mint{ background:linear-gradient(150deg,var(--mint),var(--mint-d)); color:#fff; }
.ag-event.y .t{ background:rgba(0,0,0,.12); }
/* pininho colorido na lista "Próximos de hoje" */
.ag-pin{ display:inline-block; width:14px; height:14px; border-radius:5px; }
.ag-pin.b{ background:var(--b-400); } .ag-pin.y{ background:var(--y-500); } .ag-pin.purple{ background:var(--purple); }
.ag-pin.coral{ background:var(--coral); } .ag-pin.mint{ background:var(--mint); }

/* --- FINANCEIRO: fluxo + mini-chart agrupado --- */
.fin-flow{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:8px; vertical-align:middle; margin-right:4px; }
.fin-flow svg{ width:15px; height:15px; }
.fin-flow.in{ background:#DCFCE7; color:var(--mint-d); }
.fin-flow.out{ background:#FFE8E1; color:var(--coral-d); }
.fin-chart{ height:170px; }
.fin-chart .bar{ gap:6px; }
.fin-bars{ display:flex; align-items:flex-end; gap:5px; height:100%; width:100%; justify-content:center; }
.fin-bars .col{ width:14px; border-radius:8px 8px 4px 4px; transition: height .8s var(--ease); }
.fin-bars .col.in{ background:linear-gradient(var(--mint),var(--mint-d)); }
.fin-bars .col.out{ background:linear-gradient(var(--coral),var(--coral-d)); }
.fin-legend{ display:flex; gap:18px; justify-content:center; margin-top:12px; font-weight:800; font-size:12px; color:var(--n-500); }
.fin-legend span{ display:inline-flex; align-items:center; gap:6px; }
.fin-legend i{ width:12px; height:12px; border-radius:4px; display:inline-block; }
.fin-legend i.in{ background:var(--mint); }
.fin-legend i.out{ background:var(--coral); }

/* avatar quadrado com ícone nas tabelas de estoque */
.tbl .cust-row .av svg{ width:18px; height:18px; }

/* min-width 0 para inputs encolherem dentro de flex (evita estouro horizontal) */
.op-search input{ min-width:0; }

/* colapso responsivo dos grids com override inline (agenda/compras/financeiro) */
@media (max-width:1100px){
  #ov-agenda .detail-grid,
  #ov-compras .detail-grid,
  #ov-financeiro .op-grid{ grid-template-columns:1fr !important; }
}
/* filhos de grid precisam de min-width:0 para a coluna encolher e a tabela rolar internamente */
#ov-os-nova .detail-grid > div,
#ov-agenda .detail-grid > .panel,
#ov-compras .detail-grid > .panel,
#ov-financeiro .op-grid > div{ min-width:0; }
/* op-itemized rola horizontalmente quando a tabela tem muitas colunas (Nova OS, Compras, Caixa) */
.op-itemized{ overflow-x:auto; }
.op-itemized table{ min-width:max-content; }

/* checklist da Nova OS: 2 colunas no desktop, 1 no mobile */
.check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.check-grid .reminder{ min-width:0; }
@media (max-width:560px){ .check-grid{ grid-template-columns:1fr; } }