:root{
  /* ===== CORES BASE ===== */
  --bg-sidebar:#0f172a;
  --bg-sidebar-2:#1e1b4b;
  --bg-app:#f1f5f9;
  --card:#ffffff;
  --primary:#4f46e5;
  --primary-dark:#4338ca;
  --accent:#d97706;
  --danger:#dc2626;
  --success:#059669;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;

  /* ===== SEMÂNTICAS (para temas futuros) ===== */
  --color-bg-primary: var(--bg-app);
  --color-bg-surface: var(--card);
  --color-bg-sidebar: var(--bg-sidebar);
  --color-bg-sidebar-alt: var(--bg-sidebar-2);
  --color-brand: var(--primary);
  --color-brand-dark: var(--primary-dark);
  --color-brand-bg: #eef2ff;
  --color-accent: var(--accent);
  --color-accent-bg: #fffbeb;
  --color-danger: var(--danger);
  --color-danger-bg: #fef2f2;
  --color-success: var(--success);
  --color-success-bg: #ecfdf5;
  --color-text: var(--text);
  --color-text-muted: var(--muted);
  --color-border: var(--border);
  --color-border-focus: var(--primary);
  --color-overlay: rgba(10,25,35,.55);
  --color-overlay-light: rgba(0,0,0,.03);
  --color-scrollbar: #c3d5de;
  --color-scrollbar-track: transparent;
  --color-input-bg: #fff;
  --color-input-border: var(--border);
  --color-input-focus-ring: rgba(79,70,229,.15);
  --color-btn-primary: var(--primary);
  --color-btn-primary-hover: var(--primary-dark);
  --color-btn-secondary-bg: #fff;
  --color-btn-secondary-text: var(--text);
  --color-btn-secondary-border: var(--border);
  --color-btn-danger: var(--danger);
  --color-btn-danger-hover: #c22347;
  --color-btn-ghost: transparent;
  --color-btn-ghost-hover: var(--text);
  --color-badge-danger: var(--danger);
  --color-badge-accent: var(--accent);
  --color-badge-success: var(--success);
  --color-toast-bg: var(--bg-sidebar);
  --color-toast-text: #fff;
  --color-modal-bg: #fff;
  --color-modal-backdrop: rgba(10,25,35,.55);
  --color-fab-primary-bg: var(--primary);
  --color-fab-primary-text: #fff;
  --color-fab-primary-shadow: rgba(79,70,229,.4);
  --color-fab-secondary-bg: #fff;
  --color-fab-secondary-text: var(--primary);
  --color-fab-secondary-border: var(--border);
  --color-fab-secondary-shadow: rgba(15,23,42,.18);
  --color-fab-dark-bg: #0f172a;
  --color-fab-dark-text: #fff;
  --color-fab-dark-shadow: rgba(15,23,42,.35);
  --color-mobile-nav-bg-start: #0f172a;
  --color-mobile-nav-bg-end: #1e1b4b;
  --color-mobile-nav-border: rgba(255,255,255,.08);
  --color-mobile-nav-item: #94a3b8;
  --color-mobile-nav-item-active: #fff;
  --color-mobile-nav-item-active-bg: rgba(79,70,229,.25);
  --color-update-dot: #f59e0b;
  --color-print-bg: #fff;
  --color-tag-cat-bg: #eef2ff; --color-tag-cat-text: #4338ca;
  --color-tag-low-bg: #fef2f2; --color-tag-low-text: #dc2626;
  --color-tag-ok-bg: #ecfdf5; --color-tag-ok-text: #059669;
  --color-tag-open-bg: #fffbeb; --color-tag-open-text: #b45309;
  --color-tag-progress-bg: #eef2ff; --color-tag-progress-text: #4338ca;
  --color-tag-done-bg: #ecfdf5; --color-tag-done-text: #059669;
  --color-tag-pending-bg: #fffbeb; --color-tag-pending-text: #b45309;
  --color-tag-bought-bg: #ecfdf5; --color-tag-bought-text: #059669;
  --color-panel-header-bg: #f8fafc;
  --color-panel-header-text: var(--muted);
  --color-row-hover: #f8fafc;
  --color-empty-icon: #cbd5e1;
  --color-assistant-bot-bg: #f1f5f9;
  --color-assistant-bot-text: var(--text);
  --color-assistant-user-bg: var(--primary);
  --color-assistant-user-text: #fff;
  --color-assistant-chip-bg: #eef2ff;
  --color-assistant-chip-text: var(--primary-dark);
  --color-assistant-chip-hover: #e0e7ff;
  --color-assistant-input-border: var(--border);
  --color-search-overlay-bg: rgba(10,25,35,.55);
  --color-search-box-bg: var(--card);
  --color-search-input-text: var(--text);
  --color-search-group: var(--muted);
  --color-search-item-hover: #f8fafc;
  --color-search-item-border: var(--border);
  --color-search-title: var(--text);
  --color-search-meta: var(--muted);
  --color-search-kbd-bg: #f8fafc;
  --color-search-kbd-border: var(--border);
  --color-search-kbd-text: var(--muted);
  --color-alert-bg: #fffbeb;
  --color-alert-border: var(--accent);
  --color-alert-crit-bg: #fef2f2;
  --color-alert-crit-border: var(--danger);
  --color-alert-title: var(--text);
  --color-alert-text: var(--muted);
  --color-scan-result-bg: #f8fafc;
  --color-scan-result-border: var(--border);
  --color-qr-reader-bg: #0f172a;
  --color-sidebar-logo-shadow: rgba(255,255,255,.08);
  --color-login-bg-gradient-start: var(--bg-sidebar-2);
  --color-login-bg-gradient-end: var(--bg-sidebar);
  --color-login-decor: rgba(255,255,255,.03);
  --color-login-box-bg: rgba(255,255,255,.98);
  --color-login-box-shadow: rgba(15,23,42,.35);
  --color-login-ico-bg: #0f172a;
  --color-login-ico-text: #fff;
  --color-login-title: var(--bg-sidebar);
  --color-login-subtitle: var(--muted);
  --color-login-label: var(--muted);
  --color-login-input-border: var(--border);
  --color-login-input-focus-border: var(--primary);
  --color-login-input-focus-ring: rgba(79,70,229,.15);
  --color-login-btn-gradient-start: var(--primary);
  --color-login-btn-gradient-end: var(--primary-dark);
  --color-login-btn-shadow: rgba(79,70,229,.35);
  --color-login-error: var(--danger);
  --color-login-hint: var(--muted);
  --color-brand-logo-shadow: rgba(255,255,255,.08);
  --color-brand-logo-mini-bg: #0f172a;

  /* ===== ESPAÇAMENTO (escala 4px base) ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* ===== RAIOS ===== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-full: 9999px;
  --radius-card: 16px;

  /* ===== SOMBRAS ===== */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.08);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,.12), 0 2px 4px rgba(15,23,42,.08);
  --shadow-lg: 0 10px 25px rgba(15,23,42,.15), 0 4px 8px rgba(15,23,42,.1);
  --shadow-xl: 0 20px 50px rgba(15,23,42,.2), 0 8px 16px rgba(15,23,42,.12);
  --shadow-2xl: 0 30px 70px rgba(15,23,42,.35), 0 12px 24px rgba(15,23,42,.2);
  --shadow-login: 0 30px 60px var(--color-login-box-shadow);
  --shadow-fab-primary: 0 10px 25px var(--color-fab-primary-shadow);
  --shadow-fab-secondary: 0 10px 25px var(--color-fab-secondary-shadow);
  --shadow-fab-dark: 0 10px 25px var(--color-fab-dark-shadow);
  --shadow-toast: 0 10px 25px rgba(0,0,0,.3);
  --shadow-modal: 0 30px 70px rgba(15,23,42,.4);
  --shadow-search: 0 30px 70px rgba(15,23,42,.4);
  --shadow-card: var(--shadow-sm);
  --shadow-panel: var(--shadow-sm);
  --shadow-dash-chart: var(--shadow-sm);
  --shadow-stat-card: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-brand-logo: 0 0 0 1px var(--color-brand-logo-shadow);

  /* ===== TRANSIÇÕES ===== */
  --transition-fast: 120ms ease;
  --transition-base: 150ms ease;
  --transition-smooth: 200ms ease;
  --transition-slow: 250ms ease;
  --transition-fab: 200ms ease;

  /* ===== Z-INDEX ===== */
  --z-dropdown: 50;
  --z-sticky: 60;
  --z-modal-backdrop: 100;
  --z-modal: 101;
  --z-search-overlay: 160;
  --z-toast: 200;
  --z-mobile-nav: 209;
  --z-fab: 210;

  /* ===== BREAKPOINTS ===== */
  --bp-mobile: 768px; /* referência apenas: variáveis CSS NÃO funcionam dentro de @media */
  --bp-tablet: 980px; /* idem — use o valor literal nas @media */

  /* ===== FAB POSITIONS ===== */
  --fab-bottom: 22px;
  --fab-right: 22px;
  --fab-assistant-bottom: 90px;
  --fab-notif-bottom: 226px;
  --fab-search-bottom: 158px;
  --fab-scan-bottom: 90px;

  /* ===== MODAL WIDTHS ===== */
  --modal-width: 560px;
  --modal-max-width: 100%;
  --modal-max-height: 88vh;
  --search-width: 640px;
  --search-max-width: 100%;
  --search-max-height: 78vh;
  --assistant-width: 360px;
  --assistant-max-width: calc(100vw - 32px);
  --assistant-height: 480px;
  --assistant-max-height: calc(100vh - 140px);
  --scan-width: 520px;

  /* ===== TIPOGRAFIA ===== */
  --font-family: 'Inter', 'Segoe UI', Roboto, -apple-system, Helvetica, Arial, sans-serif;
  --font-size-xs: 10px;
  --font-size-sm: 11px;
  --font-size-base: 12px;
  --font-size-md: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 15px;
  --font-size-2xl: 16px;
  --font-size-3xl: 18px;
  --font-size-4xl: 20px;
  --font-size-5xl: 22px;
  --font-size-6xl: 24px;
  --font-size-7xl: 28px;
  --font-size-8xl: 34px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ===== LAYOUT ===== */
  --sidebar-width: 230px;
  --sidebar-collapsed-width: 70px;
  --header-height: auto;
  --main-padding-x: 30px;
  --main-padding-y: 26px;
  --main-padding-bottom: 60px;
  --mobile-main-padding: 14px 12px 92px;
  --toolbar-gap: 10px;
  --cards-gap: 16px;
  --panel-gap: 20px;
  --panel-padding: 20px 22px;
  --panel-radius: var(--radius-card);
  --stat-card-padding: 18px 20px;
  --dash-chart-gap: 20px;
  --dash-chart-height: 230px;
  --dash-chart-height-mobile: 200px;

  /* ===== OUTROS ===== */
  --sidebar-bg: linear-gradient(180deg, var(--bg-sidebar), var(--bg-sidebar-2));
  --login-bg: radial-gradient(circle at 20% 20%, var(--color-login-bg-gradient-start), var(--color-login-bg-gradient-end) 70%);
  --login-btn-gradient: linear-gradient(135deg, var(--color-login-btn-gradient-start), var(--color-login-btn-gradient-end));
  --primary-btn-gradient: linear-gradient(135deg, var(--primary), var(--primary-dark));
  --stat-card-alert-bg: linear-gradient(135deg, #fffbeb, #fff);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: var(--font-family);
  background: var(--color-bg-primary);
  color: var(--color-text);
  min-height: 100vh;
}
button{font-family: inherit; cursor: pointer;}
input,select,textarea{font-family: inherit;}
::-webkit-scrollbar{width: 9px; height: 9px;}
::-webkit-scrollbar-thumb{background: var(--color-scrollbar); border-radius: var(--radius-sm);}
::-webkit-scrollbar-track{background: var(--color-scrollbar-track);}

/* ---------- LOGIN ---------- */
#login-screen{
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--login-bg);
  position: relative; overflow: hidden;
}
#login-screen::before{
  content: "❄"; position: absolute; font-size: 340px; color: var(--color-login-decor);
  top: -80px; right: -60px; transform: rotate(15deg);
}
.login-box{
  background: var(--color-login-box-bg); width: 380px; max-width: 92vw; padding: 38px 34px 30px;
  border-radius: var(--radius-4xl); box-shadow: var(--shadow-login); z-index: 2;
}
.login-logo{display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2);}
.login-logo .ico{
  width: 46px; height: 46px; border-radius: var(--radius-xl); background: var(--color-login-ico-bg);
  display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--color-login-ico-text); flex-shrink: 0; overflow: hidden;
}
.login-logo .ico img{width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box;}
.login-logo h1{font-size: 20px; margin: 0; color: var(--color-login-title);}
.login-logo p{margin: 0; font-size: var(--font-size-sm); color: var(--color-login-subtitle);}
.login-box label{font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-login-label); display: block; margin: var(--space-4) 0 var(--space-2); text-transform: uppercase; letter-spacing: .04em;}
.login-box input{
  width: 100%; padding: 11px 13px; border-radius: var(--radius-lg); border: 1.5px solid var(--color-login-input-border); font-size: var(--font-size-lg); outline: none; transition: var(--transition-fast);
}
.login-box input:focus{border-color: var(--color-login-input-focus-border); box-shadow: 0 0 0 3px var(--color-login-input-focus-ring);}
.login-btn{
  width: 100%; margin-top: 22px; padding: 12px; border: none; border-radius: var(--radius-xl);
  background: var(--login-btn-gradient); color: #fff; font-weight: var(--font-weight-bold); font-size: 14.5px;
  letter-spacing: .02em; box-shadow: var(--shadow-fab-primary);
}
.login-btn:hover{filter: brightness(1.07);}
.login-btn:disabled{opacity:.55;cursor:wait;}
.login-error{color: var(--color-login-error); font-size: 12.5px; margin-top: 12px; text-align: center; min-height: 16px; font-weight: var(--font-weight-semibold);}
.login-hint{margin-top: 18px; font-size: var(--font-size-xs); color: var(--color-login-hint); text-align: center; line-height: 1.5;}

/* ---------- APP LAYOUT ---------- */
#app{display: none; min-height: 100vh;}
.app-shell{display: flex; min-height: 100vh;}
.sidebar{
  width: var(--sidebar-width); flex-shrink: 0; background: var(--sidebar-bg);
  color: #dce9ef; display: flex; flex-direction: column; padding: var(--space-5) 0; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand{display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); border-bottom: 1px solid var(--color-sidebar-logo-shadow); margin-bottom: var(--space-3);}
.sidebar .brand .ico{
  width: 38px; height: 38px; border-radius: var(--radius-xl); background: var(--color-login-ico-bg);
  display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; overflow: hidden;
}
.sidebar .brand .ico img{width: 100%; height: 100%; object-fit: contain; padding: 2px; box-sizing: border-box;}
.sidebar .brand h2{font-size: var(--font-size-2xl); margin: 0; color: #fff; line-height: 1.2;}
.sidebar .brand small{color: #87a3b3; font-size: var(--font-size-xs);}
.nav-item{
  display: flex; align-items: center; gap: var(--space-3); padding: 11px var(--space-5); font-size: var(--font-size-md); color: #aec3cf;
  cursor: pointer; border-left: 3px solid transparent; transition: var(--transition-fast); font-weight: var(--font-weight-medium);
}
.nav-item .em{font-size: 16px; width: 20px; text-align: center; display: inline-flex; align-items: center; justify-content: center;}
.nav-item .em svg{width: 18px; height: 18px; stroke-width: 2; flex-shrink: 0;}
.perm-ico svg{width: 16px; height: 16px; stroke-width: 2; flex-shrink: 0;}
.nav-item:hover{background: var(--color-overlay-light); color: #fff;}
.nav-item.active{background: rgba(79,70,229,.25); border-left-color: var(--primary); color: #fff;}
.nav-badge{
  margin-left: auto; background: var(--color-badge-danger); color: #fff; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  padding: 1px 7px; border-radius: var(--radius-full);
}
.sidebar-footer{margin-top: auto; padding: var(--space-4) var(--space-5) 0; border-top: 1px solid var(--color-sidebar-logo-shadow);}
.sidebar-user{display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-md); color: #c4d7e0; margin-bottom: var(--space-3);}
.sidebar-user .av{width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #3a2a04; font-weight: var(--font-weight-extrabold); display: flex; align-items: center; justify-content: center; font-size: 12px;}
.logout-btn{width: 100%; background: rgba(255,255,255,.08); border: none; color: #dce9ef; padding: 8px; border-radius: var(--radius-md); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold);}
.logout-btn:hover{background: rgba(255,255,255,.16);}

.main{flex: 1; min-width: 0; padding: var(--main-padding-y) var(--main-padding-x) var(--main-padding-bottom);}
.topbar{display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: var(--space-3);}
.topbar h1{font-size: var(--font-size-5xl); margin: 0; color: var(--bg-sidebar);}
.topbar p{margin: 2px 0 0; color: var(--muted); font-size: var(--font-size-md);}
.btn{
  border: none; border-radius: var(--radius-xl); padding: 9px 16px; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); background: var(--color-btn-primary); color: #fff;
  display: inline-flex; align-items: center; gap: 6px; transition: var(--transition-fast);
}
.btn:hover{background: var(--color-btn-primary-hover);}
.btn.secondary{background: var(--color-btn-secondary-bg); color: var(--color-btn-secondary-text); border: 1.5px solid var(--color-btn-secondary-border);}
.btn.secondary:hover{border-color: var(--primary); color: var(--primary);}
.btn.danger{background: var(--color-btn-danger);}
.btn.danger:hover{background: var(--color-btn-danger-hover);}
.btn.ghost{background: var(--color-btn-ghost); color: var(--color-btn-ghost-hover); padding: 6px 10px;}
.btn.ghost:hover{color: var(--text);}
.btn.small{padding: 6px 11px; font-size: var(--font-size-base);}

.cards-row{display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--cards-gap); margin-bottom: 24px;}
.stat-card{background: var(--card); border-radius: var(--radius-card); padding: var(--stat-card-padding); box-shadow: var(--shadow-stat-card); border: 1px solid var(--border);}
.stat-card .top{display: flex; justify-content: space-between; align-items: flex-start;}
.stat-card .em{font-size: 22px; display: inline-flex; color: var(--primary);}
.stat-card .em svg{width: 24px; height: 24px; stroke-width: 1.8;}
.stat-card.alert .em{color: var(--accent);}
.stat-card.ok .em{color: var(--success);}
.stat-card .num{font-size: 28px; font-weight: var(--font-weight-extrabold); margin: 8px 0 2px; color: var(--bg-sidebar);}
.stat-card .lbl{font-size: 12.5px; color: var(--muted); font-weight: var(--font-weight-semibold);}
.stat-card.alert{border-color: #fde68a; background: var(--stat-card-alert-bg);}
.stat-card.alert .num{color: var(--accent);}
.stat-card.ok{border-color: #a7f3d0;}
.stat-card.ok .num{color: var(--success);}

.panel{background: var(--card); border-radius: var(--panel-radius); padding: var(--panel-padding); box-shadow: var(--shadow-panel); border: 1px solid var(--border); margin-bottom: var(--panel-gap);}
.panel h3{margin: 0 0 14px; font-size: var(--font-size-xl); color: var(--bg-sidebar); display: flex; align-items: center; gap: 8px;}
.two-col{display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--panel-gap);}
.dash-charts{display: grid; grid-template-columns: 1fr 1fr; gap: var(--dash-chart-gap); margin-bottom: var(--panel-gap);}
.dash-chart-card{background: var(--card); border-radius: var(--radius-card); padding: 18px 18px 14px; box-shadow: var(--shadow-dash-chart); border: 1px solid var(--border);}
.dash-chart-card h4{margin: 0 0 12px; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--bg-sidebar); display: flex; align-items: center; gap: 6px;}
.dash-chart-wrap{position: relative; height: var(--dash-chart-height);}
@media (max-width: 980px){
  .two-col{grid-template-columns: 1fr;}
  .sidebar{width: var(--sidebar-collapsed-width);}
  .sidebar .brand h2,.sidebar .brand small,.nav-item span.lbl,.sidebar-user span,.logout-btn span{display: none;}
  .nav-item{justify-content: center;}
  .sidebar-user{justify-content: center;}
  .dash-charts{grid-template-columns: 1fr;}
  .dash-chart-wrap{height: var(--dash-chart-height-mobile);}
}

table{width: 100%; border-collapse: collapse; font-size: var(--font-size-md);}
th{text-align: left; padding: 9px 10px; background: var(--color-panel-header-bg); color: var(--color-panel-header-text); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid var(--border);}
td{padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle;}
tr:hover td{background: #e0e7ff;}
.tag{display: inline-block; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);}
.tag.cat{background: var(--color-tag-cat-bg); color: var(--color-tag-cat-text);}
.tag.low{background: var(--color-tag-low-bg); color: var(--color-tag-low-text);}
.tag.ok{background: var(--color-tag-ok-bg); color: var(--color-tag-ok-text);}
.tag.open{background: var(--color-tag-open-bg); color: var(--color-tag-open-text);}
.tag.progress{background: var(--color-tag-progress-bg); color: var(--color-tag-progress-text);}
.tag.done{background: var(--color-tag-done-bg); color: var(--color-tag-done-text);}
.tag.pending{background: var(--color-tag-pending-bg); color: var(--color-tag-pending-text);}
.tag.bought{background: var(--color-tag-bought-bg); color: var(--color-tag-bought-text);}

.toolbar{display: flex; gap: var(--toolbar-gap); flex-wrap: wrap; align-items: center; margin-bottom: 16px;}
.toolbar input,.toolbar select{padding: 9px 11px; border: 1.5px solid var(--border); border-radius: var(--radius-md); font-size: var(--font-size-md); min-width: 150px; outline: none;}
.toolbar input:focus,.toolbar select:focus{border-color: var(--primary);}
.search-wrap{flex: 1; min-width: 180px;}
.search-wrap input{width: 100%;}
.empty-state{text-align: center; padding: 40px 10px; color: var(--muted);}
.empty-state .em{font-size: 34px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center;}
.empty-state .em svg{width: 38px; height: 38px; stroke-width: 1.5; color: var(--color-empty-icon);}

.modal-overlay{
  display: none; position: fixed; inset: 0; background: var(--color-modal-backdrop); z-index: var(--z-modal-backdrop);
  align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.show{display: flex;}
.modal{background: var(--color-modal-bg); border-radius: var(--radius-3xl); width: var(--modal-width); max-width: var(--modal-max-width); max-height: var(--modal-max-height); overflow-y: auto; box-shadow: var(--shadow-modal);}
.modal-head{display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--color-modal-bg); z-index: 2;}
.modal-head h3{margin: 0; font-size: var(--font-size-2xl);}
.modal-close{background: none; border: none; font-size: 20px; color: var(--muted);}
.modal-body{padding: 20px 22px;}
.modal-foot{padding: 16px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; background: var(--color-modal-bg);}
.form-row{margin-bottom: 14px;}
.form-row label{display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px;}
.form-row input,.form-row select,.form-row textarea{
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-md); font-size: var(--font-size-lg); outline: none;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color: var(--primary);}
.form-grid2{display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.form-hint{font-size: 11.5px; color: var(--muted); margin-top: 4px;}

/* Botão de tirar foto (usado ao finalizar OS). No celular é o único jeito de
   chegar na câmera, então precisa parecer clicável e ter alvo de toque bom. */
.foto-tiro{
  width: 84px; height: 84px; border-radius: 12px;
  background: var(--bg-sidebar);
  display: block; position: relative; overflow: hidden;
  cursor: pointer; flex-shrink: 0;
  border: 2px dashed var(--border);
  transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.foto-tiro:active{ border-color: var(--primary); background: #e7f3f6; }
.foto-tiro-conteudo{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.foto-tiro-icone{ font-size: 30px; line-height: 1; }
.foto-tiro-faixa{
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(15,23,42,.72); color: #fff;
  font-size: 9.5px; text-align: center; padding: 3px 0; font-weight: 700;
  letter-spacing: .03em;
}
/* o input existe só para acionar a câmera pelo label; escondemos sem tirar do
   fluxo (display:none impede o clique em alguns navegadores) */
.foto-tiro-input{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.items-add-row{display: flex; gap: 8px; align-items: flex-end; margin-bottom: 10px;}
.items-add-row>div{flex: 1;}
.items-list{border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-top: 8px;}
.items-list .it{display: flex; justify-content: space-between; padding: 8px 12px; font-size: var(--font-size-md); border-bottom: 1px solid var(--border);}
.items-list .it:last-child{border-bottom: none;}
.items-list .it button{background: none; border: none; color: var(--danger); font-weight: var(--font-weight-bold);}

.badge-dot{display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;}

/* ---------- REALCE DE LINHA (material que você está olhando / resultado de busca) ----------
   Sem isso a linha do material que você abriu fica igual às outras e você não
   enxerga onde ele está na lista. */
tr.row-highlight>td{
  background: var(--color-row-highlight-bg, #fff3c4) !important;
  border-top-color: var(--color-row-highlight-border, #fbbf24);
  border-bottom-color: var(--color-row-highlight-border, #fbbf24);
}
tr.row-highlight>td:first-child{
  box-shadow: inset 4px 0 0 var(--color-row-highlight-bar, #f59e0b);
}
tr.row-highlight>td strong{
  color: var(--color-row-highlight-text, #92400e);
}
mark.hl{
  background: var(--color-mark-bg, #fde047);
  color: var(--color-mark-text, #422006);
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 800;
  box-shadow: 0 0 0 1px rgba(245,158,11,.35);
}
/* variáveis dedicadas: mudando aqui, muda o realce inteiro */
:root{
  --color-row-highlight-bg: #fff3c4;
  --color-row-highlight-border: #fbbf24;
  --color-row-highlight-bar: #f59e0b;
  --color-row-highlight-text: #92400e;
  --color-mark-bg: #fde047;
  --color-mark-text: #422006;
}

.palette-row{display: flex; gap: 10px; flex-wrap: wrap;}
.palette-opt{width: 70px; height: 52px; border-radius: var(--radius-lg); cursor: pointer; border: 3px solid transparent; position: relative; overflow: hidden;}
.palette-opt.selected{border-color: var(--text);}
.palette-opt span{position: absolute; bottom: 3px; left: 5px; font-size: 9px; color: #fff; font-weight: var(--font-weight-bold); text-shadow: 0 1px 2px rgba(0,0,0,.5);}

.user-card,.tech-card{border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;}
.user-card .name{font-weight: var(--font-weight-bold); font-size: var(--font-size-md);}
.user-card .meta{font-size: 11.5px; color: var(--muted); margin-top: 2px;}
.chip-list{display: flex; flex-wrap: wrap; gap: 8px;}
.chip{background: var(--color-row-hover); border: 1px solid var(--border); padding: 6px 12px; border-radius: var(--radius-full); font-size: 12.5px; display: flex; align-items: center; gap: 8px;}
.chip button{background: none; border: none; color: var(--danger); font-weight: var(--font-weight-extrabold); font-size: var(--font-size-md);}

.alert-box{border-left: 4px solid var(--color-alert-border); background: var(--color-alert-bg); padding: 14px 16px; border-radius: var(--radius-lg); margin-bottom: 12px;}
.alert-box.crit{border-left-color: var(--color-alert-crit-border); background: var(--color-alert-crit-bg);}
.alert-box h4{margin: 0 0 6px; font-size: var(--font-size-md); color: var(--color-alert-title);}
.alert-box p{margin: 0; font-size: 12.5px; color: var(--color-alert-text);}
.alert-actions{display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;}

.print-only{display:none;}
@media print{
  @page{margin:10mm;size:A4;}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  html,body{margin:0!important;padding:0!important;height:auto!important;overflow:visible!important;background:#fff!important;}
  #login-screen,#app,#global-search-overlay,#mobile-bottom-nav,#toast,.modal-overlay,#assistant-fab,.assistant-panel,#notif-fab,#global-search-btn,#scan-fab{display:none!important;}
  #print-area{display:block!important;position:static!important;float:none!important;width:100%!important;max-width:100%!important;margin:0!important;padding:10px 14px!important;box-sizing:border-box!important;overflow:visible!important;height:auto!important;visibility:visible!important;}
  #print-area *{visibility:visible!important;}
  #print-area.print-only{display:block!important;}
  #print-area table{width:100%!important;table-layout:fixed!important;word-wrap:break-word!important;}
  #print-area th,#print-area td{word-break:break-word!important;overflow-wrap:anywhere!important;white-space:normal!important;vertical-align:top!important;}
  #print-area thead{display:table-header-group;}
  #print-area tr{page-break-inside:avoid;}
}

/* toast */
#toast{position: fixed; bottom: var(--fab-bottom); right: var(--fab-right); background: var(--color-toast-bg); color: var(--color-toast-text); padding: 13px 20px; border-radius: var(--radius-lg);
  font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); box-shadow: var(--shadow-toast); z-index: var(--z-toast); opacity: 0; transform: translateY(10px); transition: var(--transition-slow);}
#toast.show{opacity: 1; transform: translateY(0);}
.setor-tabs{display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 0;}
.setor-tab{background: transparent; border: none; border-bottom: 3px solid transparent; padding: 9px 14px; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--muted); cursor: pointer; border-radius: var(--radius-sm) var(--radius-sm) 0 0;}
.setor-tab:hover{background: var(--color-overlay-light);}
.setor-tab.active{color: var(--primary-dark); border-bottom-color: var(--primary);}

/* ---------- Assistente Inteligente (chat flutuante) ---------- */
#assistant-fab{
  position: fixed; right: var(--fab-right); bottom: var(--fab-bottom); z-index: var(--z-fab); display: none;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--color-fab-primary-bg); color: var(--color-fab-primary-text); align-items: center; justify-content: center;
  box-shadow: var(--shadow-fab-primary); cursor: pointer; transition: var(--transition-fab);
}
#assistant-fab:hover{background: var(--primary-dark); transform: translateY(-2px);}
#assistant-fab svg{width: 26px; height: 26px;}
.assistant-panel{
  position: fixed; right: var(--fab-right); bottom: var(--fab-assistant-bottom); z-index: var(--z-fab);
  width: var(--assistant-width); max-width: var(--assistant-max-width); height: var(--assistant-height); max-height: var(--assistant-max-height);
  background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(.97); pointer-events: none; transition: var(--transition-smooth);
}
.assistant-panel.open{opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;}
.assistant-head{background: var(--primary); color: #fff; padding: 14px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;}
.assistant-head small{opacity: .85;}
.assistant-close{background: rgba(255,255,255,.15); border: none; color: #fff; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; cursor: pointer; flex-shrink: 0;}
.assistant-chips{display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border);}
.assistant-chips span{background: var(--color-assistant-chip-bg); color: var(--color-assistant-chip-text); border-radius: var(--radius-full); padding: 6px 11px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; white-space: nowrap;}
.assistant-chips span:hover{background: var(--color-assistant-chip-hover);}
.assistant-log{flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px;}
.assistant-msg-bot,.assistant-msg-user{max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: var(--font-size-md); line-height: 1.5; white-space: pre-wrap;}
.assistant-msg-bot{background: var(--color-assistant-bot-bg); color: var(--color-assistant-bot-text); align-self: flex-start; border-bottom-left-radius: 4px;}
.assistant-msg-user{background: var(--color-assistant-user-bg); color: var(--color-assistant-user-text); align-self: flex-end; border-bottom-right-radius: 4px;}
.assistant-input-row{display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border);}
.assistant-input-row input{flex: 1; border: 1px solid var(--color-assistant-input-border); border-radius: var(--radius-full); padding: 9px 14px; font-size: var(--font-size-md);}
.assistant-input-row button{background: var(--primary); color: #fff; border: none; border-radius: var(--radius-full); padding: 9px 16px; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold);}
#conn-status{font-size: 10.5px; margin-bottom: 10px; color: #8fd8b8;}
.logout-btn.backup{margin-bottom: 6px;}
#notif-fab{position: fixed; right: var(--fab-right); bottom: var(--fab-notif-bottom); z-index: var(--z-fab); width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--color-fab-secondary-bg); color: var(--color-fab-secondary-text); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-fab-secondary); cursor: pointer; transition: var(--transition-fab); border: 1.5px solid var(--color-fab-secondary-border); font-size: 22px;}
#notif-badge{position: absolute; top: 4px; right: 4px; background: var(--color-badge-danger); color: #fff; font-size: var(--font-size-xs); font-weight: var(--font-weight-extrabold); padding: 1px 6px; border-radius: var(--radius-full); display: none; min-width: 18px; text-align: center;}
#global-search-btn{position: fixed; right: var(--fab-right); bottom: var(--fab-search-bottom); z-index: var(--z-fab); width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--color-fab-secondary-bg); color: var(--color-fab-secondary-text); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-fab-secondary); cursor: pointer; transition: var(--transition-fab); border: 1.5px solid var(--color-fab-secondary-border); font-size: 22px;}
#global-search-btn:hover{transform: translateY(-2px); box-shadow: 0 14px 28px rgba(15,23,42,.22);}
#scan-fab{position: fixed; right: var(--fab-right); bottom: var(--fab-scan-bottom); z-index: var(--z-fab); width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--color-fab-dark-bg); color: var(--color-fab-dark-text); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-fab-dark); cursor: pointer; transition: var(--transition-fab);}
#scan-fab:hover{transform: translateY(-2px); filter: brightness(1.15);}
#scanner-box{width: var(--scan-width); max-width: 100%;}
#qr-reader{width: 100%; border-radius: var(--radius-xl); overflow: hidden; background: var(--color-qr-reader-bg);}
#qr-reader video{width: 100%!important;}
.scan-result{background: var(--color-scan-result-bg); border: 1px solid var(--color-scan-result-border); border-radius: var(--radius-lg); padding: 12px; font-size: var(--font-size-md); margin-top: 10px;}
.assistant-input-row button:hover{background: var(--primary-dark);}
#global-search-overlay{display: none; position: fixed; inset: 0; background: var(--color-search-overlay-bg); z-index: var(--z-search-overlay); align-items: flex-start; justify-content: center; padding: 72px 16px 16px;}
#global-search-overlay.show{display: flex;}
.global-search-box{background: var(--color-search-box-bg); border-radius: var(--radius-2xl); width: var(--search-width); max-width: var(--search-max-width); max-height: var(--search-max-height); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-search); border: 1px solid var(--border);}
.global-search-input-row{display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border);}
.global-search-input-row input{flex: 1; border: none; outline: none; font-size: 15px; font-weight: var(--font-weight-semibold); color: var(--color-search-input-text);}
.global-search-results{overflow-y: auto; max-height: 62vh; padding: 8px 8px 12px;}
.global-search-group{margin: 10px 0 6px; font-size: var(--font-size-xs); font-weight: var(--font-weight-extrabold); color: var(--color-search-group); letter-spacing: .04em; text-transform: uppercase; padding: 0 8px;}
.global-search-item{display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-lg); cursor: pointer; border: 1px solid transparent;}
.global-search-item:hover{background: var(--color-search-item-hover); border-color: var(--color-search-item-border);}
.global-search-item .title{font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--color-search-title);}
.global-search-item .meta{font-size: 11.5px; color: var(--color-search-meta); margin-top: 2px;}
.global-search-kbd{font-size: var(--font-size-xs); font-weight: var(--font-weight-extrabold); color: var(--color-search-kbd-text); border: 1px solid var(--color-search-kbd-border); border-radius: var(--radius-sm); padding: 4px 7px; background: var(--color-search-kbd-bg);}
.global-search-icon{font-size: 18px;}
.global-search-hint{padding: 16px;}
#mobile-bottom-nav{display: none;}
/* Modal aberto: esconde a barra inferior do celular e os botões flutuantes,
   que ficavam por cima dos botões do formulário (ex: Salvar da OS) */
body.modal-aberto #mobile-bottom-nav,
body.modal-aberto #notif-fab,
body.modal-aberto #global-search-btn,
body.modal-aberto #scan-fab,
body.modal-aberto #assistant-fab{display:none!important;}
/* Tela de login: esconde barra inferior e flutuantes (ficavam por cima do cartão) */
body.na-tela-login #mobile-bottom-nav,
body.na-tela-login #notif-fab,
body.na-tela-login #global-search-btn,
body.na-tela-login #scan-fab,
body.na-tela-login #assistant-fab{display:none!important;}
@media (max-width: 768px){
  .app-shell{flex-direction: column;}
  .sidebar{display: none!important;}
  .main{padding: var(--mobile-main-padding);}
  .topbar{flex-direction: column; align-items: stretch;}
  .topbar h1{font-size: 18px;}
  .cards-row{grid-template-columns: 1fr 1fr; gap: 10px;}
  .stat-card{padding: 12px;}
  .stat-card .num{font-size: 22px;}
  .panel{padding: 14px;}
  .toolbar{flex-direction: column; align-items: stretch;}
  .toolbar input,.toolbar select,.search-wrap{width: 100%; min-width: 0;}
  table{font-size: 12.5px; display: block; overflow-x: auto; white-space: nowrap;}
  .modal{width: 100%; max-height: 92vh; margin: 8px; border-radius: 14px;}
  .dash-charts{grid-template-columns: 1fr;}
  .dash-chart-wrap{height: var(--dash-chart-height-mobile);}
  #mobile-bottom-nav{display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, var(--color-mobile-nav-bg-start), var(--color-mobile-nav-bg-end)); border-top: 1px solid var(--color-mobile-nav-border); z-index: var(--z-mobile-nav); padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; gap: 0;}
  /* min-width:0 é indispensável: sem isso o flexbox recusa encolher o botão
     abaixo da largura do texto e a barra estoura a tela do celular em vez de
     cortar o rótulo com reticências. */
  #mobile-bottom-nav button{flex: 1 1 0%; min-width: 0; background: none; border: none; color: var(--color-mobile-nav-item); display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); padding: 8px 2px; border-radius: var(--radius-lg);}
  #mobile-bottom-nav button.active{color: var(--color-mobile-nav-item-active); background: var(--color-mobile-nav-item-active-bg);}
  #mobile-bottom-nav button .em{font-size: 18px; line-height: 1;}
  #mobile-bottom-nav button .em svg{width: 20px; height: 20px;}
  /* Rótulo sempre em uma linha: sem isso, "Manutenção Preventiva" quebra em
     três linhas e a barra invade o conteúdo da tela. */
  #mobile-bottom-nav button .rot{
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
  }
  /* Barra apertada (6 botões ou mais): as ações ficam só com o ícone, que já
     se reconhece sozinho, e sobra largura para os nomes das telas. */
  #mobile-bottom-nav.nav-apertado button.acao .rot{display: none;}
  #mobile-bottom-nav.nav-apertado button.acao .em{font-size: 20px;}
  #mobile-bottom-nav.nav-apertado button.acao{padding: 8px 0;}
  #update-dot{display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-update-dot); margin-left: 6px; vertical-align: middle;}
  #scan-fab,#global-search-btn,#notif-fab{display:flex!important;width:48px;height:48px;right:14px;}
#scan-fab{bottom:134px;}
#global-search-btn{bottom:190px;}
#notif-fab{bottom:246px;}
/* Kanban de OS empilhado no celular: rola pra baixo em vez de pro lado */
.os-kanban{flex-direction:column!important;overflow-x:visible!important;}
.os-kanban-col{min-width:0!important;}
  #assistant-fab{bottom: 74px; right: 14px; width: 52px; height: 52px;}
  .user-card{flex-direction: column; align-items: stretch; gap: 8px;}
  .user-card .btn{width: 100%; justify-content: center; padding: 10px; font-size: var(--font-size-md);}
  .form-grid2{grid-template-columns: 1fr;}
  .items-add-row{flex-direction: column; align-items: stretch;}
}


/* ---------- LOGO NA BARRA LATERAL ---------- */
.sidebar .brand.brand-logo-full{display: block; padding: 0 12px 14px;}
.sidebar .brand-logo-img{display: block; width: 100%; height: auto; border-radius: var(--radius-xl); box-shadow: var(--shadow-brand-logo);}
.sidebar .brand-logo-mini{display: none; width: 40px; height: 40px; object-fit: contain; margin: 0 auto; border-radius: var(--radius-lg); background: var(--color-brand-logo-mini-bg);}
@media (max-width: 980px){
  .sidebar .brand.brand-logo-full{padding: 0 0 14px;}
  .sidebar .brand-logo-img{display: none;}
  .sidebar .brand-logo-mini{display: block;}
}

/* ---------- LOGO NA TELA DE LOGIN ---------- */
.login-logo-img{display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 14px; border-radius: var(--radius-2xl);}
.login-box .login-logo{display: block; text-align: center; margin-bottom: 6px;}
.login-box .login-logo .ico,.login-box .login-logo h1{display: none;}

/* ---------- ÍCONES PADRONIZADOS ---------- */
.icon{
  width:1em;height:1em;flex-shrink:0;
  stroke-width:var(--icon-stroke,2);
  stroke:var(--icon-color,currentColor);
  stroke-linecap:round;stroke-linejoin:round;
}
.icon > svg{width:100%;height:100%;}