/* ============================================================
      MINI ERP - MATERIAL DESIGN 3
      CSS organizado com variáveis e suporte a Dark Mode
      ============================================================ */

      /* --- VARIÁVEIS GLOBAIS (LIGHT MODE) --- */
      :root {
          /* Paleta Primária (Alterada dinamicamente via JS) */
          --md-sys-color-primary: #007AFF;
          /* Azul Mac Padrão */
          --md-sys-color-primary-hover: #0056b3;
          --md-sys-color-primary-light: #E5F0FF;
          --md-sys-color-on-primary: #FFFFFF;
          --md-sys-color-primary-container: #E5F0FF;
          --md-sys-color-on-primary-container: #003366;

          /* Superfícies e Fundos (O Segredo do conforto visual) */
          --md-sys-color-background: #F5F5F7;
          /* Cinza bem suave estilo fundo de painel Apple */
          --md-sys-color-on-background: #1D1D1F;
          /* Preto suave para leitura */
          --md-sys-color-surface: #FFFFFF;
          /* Cartões brancos para dar contraste com o fundo */
          --md-sys-color-surface-variant: #F0F0F0;
          --md-sys-color-on-surface: #1D1D1F;
          --md-sys-color-outline: #D2D2D7;
          /* Cor de borda Apple */

          /* Estados */
          --md-sys-color-error: #FF3B30;
          --md-sys-color-on-error: #FFFFFF;
          --md-sys-color-success: #34C759;
          --md-sys-color-warning: #FF9500;

          /* Cores Neutras */
          --color-border: #E5E5EA;
          --color-border-light: #F2F2F7;
          --color-text-primary: #1D1D1F;
          --color-text-secondary: #86868B;
          --color-text-muted: #999999;
          --color-bg-subtle: #F5F5F7;
          --color-bg-card: #FFFFFF;

          /* Toolbar (Vidro Translúcido claro) */
          --toolbar-bg: rgba(255, 255, 255, 0.85);
          --toolbar-bg-hover: rgba(255, 255, 255, 1);
          --toolbar-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
          --toolbar-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.08);
          --toolbar-text: #1D1D1F;
          --toolbar-inset: none;

          /* Sidebar */
          --sidebar-width-closed: 72px;
          --sidebar-width-open: 260px;
          --sidebar-bg: #FFFFFF;
          --sidebar-active-bg: #F2F2F7;
          --sidebar-active-text: var(--md-sys-color-primary);

          /* Espaçamentos e Raios */
          --radius-sm: 8px;
          --radius-md: 12px;
          --radius-lg: 16px;
          --radius-xl: 24px;
          --radius-pill: 100px;

          /* Sombras suaves */
          --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
          --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
          --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
      }

      /* ============================================================
      RESET & BASE
      ============================================================ */
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: 'Roboto', sans-serif;
      }

      body {
          background-color: var(--color-bg-subtle);
          color: var(--md-sys-color-on-background);
          font-size: 14px;
          height: 100vh;
          overflow: hidden;
      }


      .lp-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 50px;
          background: rgba(255, 255, 255, 0.9);
          backdrop-filter: blur(10px);
          position: fixed;
          width: 100%;
          top: 0;
          z-index: 100;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      }

      .lp-hero {
          height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: 0 20px;
          background-image: radial-gradient(circle at 0% 0%, rgba(0, 90, 193, 0.08) 0px, transparent 40%),
              radial-gradient(circle at 100% 100%, rgba(103, 80, 164, 0.05) 0px, transparent 40%);
      }

      .lp-hero h1 {
          font-size: 3rem;
          color: #1a1c1e;
          margin-bottom: 20px;
      }

      .lp-hero p {
          font-size: 1.2rem;
          color: #555;
          max-width: 600px;
          margin: 0 auto 40px auto;
          line-height: 1.6;
      }

      /* Modal de Login Oculto */
      #loginModal {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.4);
          backdrop-filter: blur(5px);
          display: none;
          align-items: center;
          justify-content: center;
          z-index: 1000;
      }

      #loginModal.active {
          display: flex;
      }

      /* ============================================================
      UTILITIES
      ============================================================ */
      .hidden {
          display: none !important;
      }

      .flex {
          display: flex;
      }

      .flex-col {
          flex-direction: column;
      }

      .items-center {
          align-items: center;
      }

      .justify-center {
          justify-content: center;
      }

      .justify-between {
          justify-content: space-between;
      }

      .justify-end {
          justify-content: flex-end;
      }

      .gap-2 {
          gap: 0.5rem;
      }

      .gap-4 {
          gap: 1rem;
      }

      .w-full {
          width: 100%;
      }

      .text-center {
          text-align: center;
      }

      .text-right {
          text-align: right;
      }

      .font-bold {
          font-weight: 700;
      }

      .cursor-pointer {
          cursor: pointer;
      }

      .relative {
          position: relative;
      }

      /* ============================================================
      ICONS
      ============================================================ */
      .material-icons {
          font-family: 'Material Icons';
          font-weight: normal;
          font-style: normal;
          font-size: 24px;
          display: inline-block;
          line-height: 1;
          text-transform: none;
          letter-spacing: normal;
          word-wrap: normal;
          white-space: nowrap;
          direction: ltr;
          vertical-align: middle;
      }

      /* ============================================================
      BUTTONS
      ============================================================ */
      .btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 0.5rem 1rem;
          border-radius: var(--radius-pill);
          font-weight: 500;
          border: none;
          cursor: pointer;
          transition: all 0.2s ease;
          gap: 6px;
          font-size: 0.875rem;
          text-transform: uppercase;
          letter-spacing: 0.5px;
      }

      .btn:active {
          transform: scale(0.98);
      }

      .btn-primary {
          background-color: var(--md-sys-color-primary);
          color: var(--md-sys-color-on-primary);
          box-shadow: var(--shadow-1);
      }

      .btn-primary:hover {
          background-color: var(--md-sys-color-primary-hover);
          box-shadow: var(--shadow-2);
      }

      .btn-secondary {
          background-color: var(--md-sys-color-secondary-container);
          color: var(--md-sys-color-on-surface);
      }

      .btn-secondary:hover {
          background-color: #C0CAE8;
      }

      .btn-danger {
          background-color: var(--md-sys-color-error);
          color: var(--md-sys-color-on-error);
      }

      .btn-danger:hover {
          background-color: #920808;
      }

      .btn-success {
          background-color: var(--md-sys-color-success);
          color: #fff;
      }

      .btn-warning {
          background-color: var(--md-sys-color-warning);
          color: #fff;
      }

      .btn-ghost {
          background: transparent;
          color: var(--md-sys-color-on-surface);
      }

      .btn-ghost:hover {
          background-color: rgba(0, 0, 0, 0.05);
      }

      .btn-sm {
          padding: 4px 8px;
          font-size: 0.75rem;
      }

      /* ============================================================
      INPUTS & FORMS
      ============================================================ */
      .form-group {
          margin-bottom: 1rem;
      }

      label {
          display: block;
          margin-bottom: 0.4rem;
          font-size: 0.85rem;
          font-weight: 500;
          color: var(--md-sys-color-secondary);
      }

      input,
      select,
      textarea {
          width: 100%;
          padding: 10px 12px;
          border: 1px solid var(--md-sys-color-outline);
          border-radius: 4px;
          font-size: 0.95rem;
          background-color: var(--md-sys-color-surface);
          color: var(--md-sys-color-on-surface);
          transition: border-color 0.2s;
      }

      input:focus,
      select:focus,
      textarea:focus {
          outline: none;
          border-color: var(--md-sys-color-primary);
          border-width: 2px;
          padding: 9px 11px;
      }

      .input-icon-wrapper {
          position: relative;
          display: flex;
          align-items: center;
      }

      .input-icon-wrapper .material-icons {
          position: absolute;
          left: 10px;
          color: var(--md-sys-color-outline);
      }

      .input-icon-wrapper input {
          padding-left: 40px;
      }

      /* ============================================================
      CARDS
      ============================================================ */
      .card {
          background-color: var(--md-sys-color-surface);
          border-radius: var(--radius-lg);
          padding: 1px;
          box-shadow: var(--shadow-1);
          margin-bottom: 1rem;
      }

      /* ============================================================
      SIDEBAR
      ============================================================ */
      .sidebar {
          position: fixed;
          left: 0;
          top: 0;
          height: 100%;
          width: var(--sidebar-width-closed);
          background: var(--sidebar-bg);
          padding: 6px 10px;
          z-index: 100;
          transition: all 0.4s ease;
          box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
          display: flex;
          flex-direction: column;
      }

      .sidebar.open {
          width: var(--sidebar-width-open);
      }

      .logo-details {
          height: 60px;
          display: flex;
          align-items: center;
          position: relative;
          margin-bottom: 1rem;
          padding-left: 12px;
          /* Espaço para o logo não colar na borda esquerda */
      }

      .logo-details .icon {
          opacity: 0;
          transition: all 0.4s ease;
          color: var(--md-sys-color-primary);
          font-size: 28px;
      }

      .sidebar.open .logo-details .icon {
          opacity: 1;
      }

      .sidebar-logo-img {
          width: 36px;
          /* Tamanho exato para ficar perfeito quando o menu está encolhido */
          height: 36px;
          object-fit: contain;
          transition: all 0.4s ease;
          flex-shrink: 0;
      }

      .sidebar.open .sidebar-logo-img {
          width: 44px;
          /* Fica um pouquinho maior e com mais destaque quando a barra abre */
          height: 44px;
      }

      .logo_name {
          color: var(--md-sys-color-on-surface);
          font-size: 18px;
          /* Ajuste suave para encaixar perfeitamente */
          font-weight: 700;
          opacity: 0;
          pointer-events: none;
          /* MÁGICA: Isso impede que o texto invisível bloqueie o seu botão! */
          transition: all 0.4s ease;
          white-space: nowrap;
          margin-left: 10px;
      }

      .sidebar.open .logo_name {
          opacity: 1;
          pointer-events: auto;
          /* Devolve a interatividade quando a barra abre */
      }

      /* Botão antigo do menu (mantido por compatibilidade, escondido) */
      #btn-menu {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          font-size: 24px;
          text-align: center;
          cursor: pointer;
          color: var(--md-sys-color-on-surface);
          width: 50px;
      }

      .sidebar.open #btn-menu {
          text-align: right;
          width: auto;
      }

      .sidebar #btn-menu {
          display: none !important;
      }

      .nav-list {
          flex-grow: 1;
          overflow-y: auto;
          overflow-x: hidden;
          list-style: none;
      }

      .nav-list::-webkit-scrollbar {
          width: 5px;
      }

      .nav-list::-webkit-scrollbar-thumb {
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 5px;
      }

      .sidebar li {
          position: relative;
          margin: 8px 0;
      }

      .sidebar li a {
          display: flex;
          height: 48px;
          width: 100%;
          border-radius: 24px;
          align-items: center;
          text-decoration: none;
          transition: all 0.2s ease;
          background: transparent;
          color: var(--md-sys-color-on-surface);
      }

      .sidebar li a:hover {
          background: var(--md-sys-color-surface-variant);
      }

      .sidebar li.active a {
          background: var(--sidebar-active-bg);
          color: var(--sidebar-active-text);
          font-weight: 500;
      }

      .sidebar li a .material-icons {
          min-width: 50px;
          text-align: center;
          line-height: 50px;
      }

      .sidebar li a .links_name {
          font-size: 15px;
          white-space: nowrap;
          opacity: 0;
          pointer-events: none;
          transition: 0.3s;
      }

      .sidebar.open li a .links_name {
          opacity: 1;
          pointer-events: auto;
      }

      /* Tooltip da sidebar */
      .sidebar li .tooltip {
          position: absolute;
          top: -20px;
          left: calc(100% + 15px);
          z-index: 3;
          background: var(--md-sys-color-on-surface);
          color: #fff;
          padding: 6px 12px;
          border-radius: 4px;
          font-size: 12px;
          opacity: 0;
          white-space: nowrap;
          pointer-events: none;
          transition: 0s;
      }

      .sidebar li:hover .tooltip {
          opacity: 1;
          top: 50%;
          transform: translateY(-50%);
          transition: all 0.4s ease;
      }

      .sidebar.open li .tooltip {
          display: none;
      }

      /* Profile (rodapé da sidebar) */
      .profile-content {
          margin-top: auto;
          padding: 10px 14px;
          transition: all 0.4s ease;
          overflow: hidden;
          display: flex;
          align-items: center;
          min-height: 60px;
      }

      .sidebar:not(.open) .profile-content {
          padding: 10px 5px;
          justify-content: center;
      }

      .profile-details {
          display: flex;
          align-items: center;
          opacity: 0;
          pointer-events: none;
          white-space: nowrap;
          transition: all 0.4s ease;
      }

      .sidebar.open .profile-details {
          opacity: 1;
          pointer-events: auto;
      }

      .profile-user-icon {
          font-size: 30px;
          color: var(--md-sys-color-primary);
          margin-right: 10px;
          min-width: 30px;
      }

      .name_job {
          display: flex;
          flex-direction: column;
      }

      .name_job .name {
          font-size: 14px;
          font-weight: 600;
          color: var(--md-sys-color-on-surface);
      }

      .name_job .job {
          font-size: 11px;
          color: var(--md-sys-color-secondary);
      }

      #log_out {
          position: absolute;
          right: 15px;
          cursor: pointer;
          color: var(--md-sys-color-error);
          transition: all 0.2s ease;
      }

      /* ============================================================
      MAIN LAYOUT
      ============================================================ */
      .home-section {
          position: relative;
          background: var(--md-sys-color-background);
          min-height: 100vh;
          left: var(--sidebar-width-closed);
          width: calc(100% - var(--sidebar-width-closed));
          transition: all 0.4s ease;
          z-index: 2;
      }

      .sidebar.open~.home-section {
          left: var(--sidebar-width-open);
          width: calc(100% - var(--sidebar-width-open));
      }

      .content-area {
          height: calc(100vh - 60px);
          overflow-y: auto;
          padding-bottom: 20px;
      }

      /* ============================================================
      TABLES
      ============================================================ */
      .table-container {
          width: 100%;
          overflow-x: auto;
          border: 1px solid var(--color-border);
          border-radius: 8px;
      }

      table {
          width: 100%;
          border-collapse: collapse;
          background: #fff;
      }

      thead {
          background-color: #F8F9FA;
          border-bottom: 2px solid var(--color-border);
      }

      th {
          text-align: left;
          padding: 12px 16px;
          font-size: 0.8rem;
          text-transform: uppercase;
          color: var(--md-sys-color-secondary);
          font-weight: 600;
      }

      td {
          padding: 12px 16px;
          border-bottom: 1px solid var(--color-border-light);
          color: var(--md-sys-color-on-surface);
      }

      tr:hover {
          background-color: #F8FDFF;
      }

      /* ============================================================
      SEARCH DROPDOWN
      ============================================================ */
      .search-results-dropdown {
          background-color: #FFFFFF;
          position: absolute;
          width: 100%;
          max-height: 250px;
          overflow-y: auto;
          border: 1px solid var(--color-border);
          border-top: none;
          border-radius: 0 0 8px 8px;
          box-shadow: var(--shadow-2);
          z-index: 50;
      }

      .search-item {
          padding: 10px 16px;
          cursor: pointer;
          border-bottom: 1px solid #f0f0f0;
      }

      .search-item:hover {
          background-color: #F0F7FF;
      }

      /* ============================================================
      MODALS
      ============================================================ */
      .modal-overlay {
          position: fixed;
          inset: 0;
          background-color: rgba(0, 0, 0, 0.5);
          backdrop-filter: blur(4px);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 10000;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.3s;
      }

      .modal-overlay:not(.hidden) {
          opacity: 1;
          pointer-events: auto;
      }

      .modal-content {
          background: #fff;
          width: 100%;
          max-width: 600px;
          max-height: 90vh;
          border-radius: var(--radius-xl);
          box-shadow: var(--shadow-3);
          display: flex;
          flex-direction: column;
          overflow: hidden;
          transform: translateY(20px);
          transition: transform 0.3s;
      }

      .modal-overlay:not(.hidden) .modal-content {
          transform: translateY(0);
      }

      .modal-lg {
          max-width: 900px;
      }

      .modal-header {
          padding: 20px 24px;
          border-bottom: 1px solid #f0f0f0;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }

      .modal-header h3 {
          font-size: 1.25rem;
          font-weight: 500;
      }

      .modal-body {
          padding: 24px;
          overflow-y: auto;
      }

      .modal-footer {
          padding: 16px 24px;
          background: #F8F9FA;
          display: flex;
          justify-content: flex-end;
          gap: 10px;
      }

      /* ============================================================
      BADGES
      ============================================================ */
      .badge {
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 0.75rem;
          font-weight: 600;
          text-transform: uppercase;
      }

      .badge-warning {
          background: #FFF4E5;
          color: #663C00;
      }

      .badge-primary {
          background: #E8F0FE;
          color: #1967D2;
      }

      .badge-success {
          background: #E6F4EA;
          color: #137333;
      }

      .badge-danger {
          background: #FCE8E6;
          color: #C5221F;
      }

      /* ============================================================
      LOADER
      ============================================================ */
      .loader-overlay {
          position: fixed;
          inset: 0;
          background: rgba(255, 255, 255, 0.8);
          z-index: 2000;
          display: flex;
          justify-content: center;
          align-items: center;
          backdrop-filter: blur(2px);
      }

      .spinner {
          width: 48px;
          height: 48px;
          border: 5px solid #FFF;
          border-bottom-color: var(--md-sys-color-primary);
          border-radius: 50%;
          display: inline-block;
          box-sizing: border-box;
          animation: rotation 1s linear infinite;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      @keyframes rotation {
          0% {
              transform: rotate(0deg);
          }

          100% {
              transform: rotate(360deg);
          }
      }

      /* ============================================================
      ALERTS
      ============================================================ */
      #alertContainer {
          position: fixed;
          top: 20px;
          right: 20px;
          z-index: 3000;
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      .alert-box {
          background: #323232;
          color: #fff;
          padding: 12px 16px;
          border-radius: 8px;
          box-shadow: var(--shadow-3);
          display: flex;
          align-items: center;
          justify-content: space-between;
          min-width: 300px;
          animation: slideIn 0.3s ease;
      }

      .alert-success {
          background: var(--md-sys-color-success);
      }

      .alert-error {
          background: var(--md-sys-color-error);
      }

      .alert-warning {
          background: var(--md-sys-color-warning);
          color: #000;
      }

      @keyframes slideIn {
          from {
              transform: translateX(100%);
              opacity: 0;
          }

          to {
              transform: translateX(0);
              opacity: 1;
          }
      }

      /* ============================================================
      LOGIN VIEW
      ============================================================ */
      .login-wrapper {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100vh;
          width: 100vw;
          /* Fundo claro com gradientes suaves (estilo Apple) */
          background-color: #f4f7f9;
          background-image:
              radial-gradient(circle at 0% 0%, rgba(0, 90, 193, 0.08) 0px, transparent 40%),
              radial-gradient(circle at 100% 100%, rgba(103, 80, 164, 0.05) 0px, transparent 40%);
          overflow-y: auto;
          overflow-x: hidden;
          z-index: 1;
      }

      /* Container Principal Dividido */
      .login-container {
          display: flex;
          width: 100%;
          max-width: 1200px;
          height: 100vh;
          z-index: 2;
      }

      /* Lado Esquerdo - Branding */
      .login-left {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 40px;
          color: #1a1c1e;
          /* Texto escuro */
      }

      .brand-content {
          max-width: 400px;
          animation: slideInLeft 0.8s cubic-bezier(0.23, 1, 0.32, 1);
      }

      .brand-logo {
          max-width: 290px;
          margin-bottom: 25px;
          filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
      }

      .brand-subtitle {
          font-size: 1.5rem;
          line-height: 1.4;
          font-weight: 300;
          color: #555;
          /* Cinza escuro para leitura agradável */
      }

      .brand-subtitle strong {
          color: var(--md-sys-color-primary);
          /* Azul do sistema */
          font-weight: 700;
      }

      /* Lado Direito - Formulário */
      .login-right {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 40px;
      }

      /* O EFEITO VIDRO CLARO (LIGHT GLASS PANEL) */
      .glass-panel {
          width: 100%;
          max-width: 420px;
          background: rgba(255, 255, 255, 0.75);
          /* Branco com 75% de opacidade */
          backdrop-filter: blur(24px) saturate(150%);
          /* Desfoque mais forte para tema claro */
          -webkit-backdrop-filter: blur(24px) saturate(150%);
          border: 1px solid rgba(255, 255, 255, 0.9);
          /* Borda branca forte para dar relevo */
          border-radius: 24px;
          padding: 50px 40px;
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
          /* Sombra bem leve */
          color: #333;
          animation: slideInRight 0.8s cubic-bezier(0.23, 1, 0.32, 1);
      }

      .login-header {
          text-align: center;
          margin-bottom: 35px;
      }

      .login-header h2 {
          font-size: 1.8rem;
          font-weight: 700;
          margin-bottom: 8px;
          color: #1a1c1e;
          /* Título bem escuro */
      }

      /* Ajustes dos Inputs para o tema Claro */
      .glass-panel label {
          color: #555;
          font-size: 0.85rem;
          margin-bottom: 6px;
          font-weight: 600;
      }

      .glass-panel input {
          background: rgba(255, 255, 255, 0.9);
          border: 1px solid #d1d5db;
          color: #333;
          border-radius: 12px;
          height: 50px;
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
      }

      .glass-panel input:focus {
          background: #ffffff;
          border-color: var(--md-sys-color-primary);
          box-shadow: 0 0 0 4px rgba(0, 90, 193, 0.1);
      }

      .glass-panel .input-icon-wrapper .material-icons {
          color: #888;
      }

      .glass-panel .login-btn {
          height: 54px;
          font-size: 1.1rem;
          border-radius: 14px;
          background: var(--md-sys-color-primary);
          border: none;
          box-shadow: 0 8px 15px -5px var(--md-sys-color-primary);
          transition: all 0.3s ease;
      }

      .glass-panel .login-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 12px 20px -5px var(--md-sys-color-primary);
      }

      .login-footer {
          text-align: center;
          margin-top: 40px;
          font-size: 0.75rem;
          color: #888;
          letter-spacing: 1px;
      }

      .login-footer span {
          font-size: 0.65rem;
          opacity: 0.8;
      }

      /* Animações de entrada */
      @keyframes slideInLeft {
          from {
              opacity: 0;
              transform: translateX(-40px);
          }

          to {
              opacity: 1;
              transform: translateX(0);
          }
      }

      @keyframes slideInRight {
          from {
              opacity: 0;
              transform: translateX(40px);
          }

          to {
              opacity: 1;
              transform: translateX(0);
          }
      }


      /* RESPONSIVO MOBILE - LOGIN */
      @media (max-width: 768px) {
          .login-wrapper {
              align-items: flex-start;
              /* Faz o conteúdo começar do topo na rolagem */
          }

          .login-container {
              flex-direction: column;
              height: auto;
              min-height: 100vh;
              padding: 20px 0;
          }

          .login-left {
              flex: none;
              padding: 5px 20px 10px 20px;
              display: flex;
              justify-content: center;
              /* Centraliza o bloco na tela */
          }

          .brand-content {
              display: flex;
              flex-direction: row;
              /* Coloca Logo e Slogan lado a lado */
              align-items: center;
              /* Alinha no meio verticalmente */
              text-align: left;
              /* O texto do slogan alinhado à esquerda */
              gap: 20px;
              /* Espaçamento entre a logo e o texto */
          }

          .brand-logo {
              max-width: 250px;
              /* Diminui a logo no mobile para caber ao lado do texto */
              margin-bottom: 0;
              /* Tira a margem de baixo, já que estão lado a lado */
          }

          .brand-subtitle {
              font-size: 1.1rem;
              margin: 0;
          }

          .login-right {
              padding: 10px 20px 50px 20px;
              /* Espaço extra embaixo para facilitar rolagem */
              align-items: flex-start;
          }

          .glass-panel {
              padding: 40px 25px;
          }
      }

      /* ============================================================
      GLOBAL HEADER E BOTÕES
      ============================================================ */
      .global-header {
          position: sticky;
          top: 0;
          z-index: 95;
          background: rgba(255, 255, 255, 0.85);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          border-bottom: 1px solid var(--color-border);
          padding: 0 12px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
      }

      /* Botão de menu (Hamburguer) */
      .global-header .menu-toggle-btn {
          width: 44px;
          height: 44px;
          min-width: 44px;
          margin-right: 8px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          border: none;
          position: relative;
          z-index: 10;
          flex-shrink: 0;
          background: var(--md-sys-color-primary);
          /* Puxa a cor do sistema */
          color: #FFFFFF;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          transition: all 0.2s ease;
      }

      .global-header .menu-toggle-btn:hover {
          filter: brightness(0.9);
          transform: translateY(-2px);
      }

      .global-header .menu-toggle-btn .material-icons {
          font-size: 22px;
          color: #FFFFFF;
      }

      /* Container das ações da toolbar */
      .toolbar-actions {
          display: flex;
          align-items: center;
          gap: 8px;
          flex: 1;
          justify-content: flex-end;
          overflow-x: auto;
          scrollbar-width: none;
      }

      .toolbar-actions::-webkit-scrollbar {
          display: none;
      }

      /* Botões de Ação (+, Imprimir, etc) */
      .toolbar-btn {
          width: 40px;
          height: 40px;
          min-width: 40px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          border: none;
          position: relative;
          flex-shrink: 0;
          background: var(--md-sys-color-primary);
          /* Puxa a cor do sistema */
          color: #FFFFFF;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          transition: all 0.2s ease;
      }

      .toolbar-btn:hover {
          filter: brightness(0.9);
          transform: translateY(-2px);
      }

      .toolbar-btn .material-icons {
          font-size: 20px;
          color: #FFFFFF;
      }

      /* Tooltip dos botões */
      .toolbar-btn[title]:hover::after,
      .global-header .menu-toggle-btn[title]:hover::after {
          content: attr(title);
          position: absolute;
          bottom: -32px;
          left: 50%;
          transform: translateX(-50%);
          background: rgba(0, 0, 0, 0.85);
          color: #fff;
          padding: 6px 12px;
          border-radius: 6px;
          font-size: 12px;
          font-weight: 500;
          white-space: nowrap;
          z-index: 100;
          pointer-events: none;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
          animation: tooltipFadeIn 0.2s ease;
      }

      @keyframes tooltipFadeIn {
          from {
              opacity: 0;
              transform: translateX(-50%) translateY(-4px);
          }

          to {
              opacity: 1;
              transform: translateX(-50%) translateY(0);
          }
      }

      /* ============================================================
      TOOLBAR SEARCH (expansível)
      ============================================================ */
      .toolbar-search {
          display: flex;
          align-items: center;
          border-radius: 10px;
          overflow: hidden;
          height: 40px;
          width: 40px;
          transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
          flex-shrink: 0;
          background: var(--md-sys-color-surface-variant);
          /* Fundo cinza claro */
      }

      .toolbar-search.expanded {
          width: 250px;
          background: #FFFFFF;
          border: 1px solid var(--md-sys-color-primary);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      }

      .toolbar-search .search-icon-btn {
          width: 40px;
          height: 40px;
          min-width: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          background: transparent;
          border: none;
          color: var(--color-text-secondary);
          flex-shrink: 0;
          transition: all 0.2s;
      }

      .toolbar-search.expanded .search-icon-btn {
          color: var(--md-sys-color-primary);
      }

      .toolbar-search .search-icon-btn .material-icons {
          font-size: 20px;
      }

      .toolbar-search input {
          flex: 1;
          border: none;
          background: transparent;
          padding: 0 12px 0 4px;
          outline: none;
          font-size: 0.9rem;
          color: var(--md-sys-color-on-surface);
          opacity: 0;
          width: 0;
          transition: opacity 0.25s ease 0.1s;
      }

      .toolbar-search.expanded input {
          opacity: 1;
          width: auto;
      }

      .toolbar-search .search-clear {
          display: none;
          width: 28px;
          height: 28px;
          min-width: 28px;
          border-radius: 50%;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          background: rgba(0, 0, 0, 0.05);
          border: none;
          color: #666;
          margin-right: 6px;
      }

      .toolbar-search.expanded .search-clear {
          display: flex;
      }

      .toolbar-search .search-clear .material-icons {
          font-size: 16px;
      }

      /* ============================================================
      TOOLBAR TABS (Produtos, Financeiro)
      ============================================================ */
      .toolbar-tabs {
          display: flex;
          align-items: center;
          gap: 4px;
          padding: 4px;
          border-radius: 10px;
          height: 40px;
          flex-shrink: 0;
          background: var(--md-sys-color-surface-variant);
          /* Fundo cinza */
      }

      .toolbar-tab {
          padding: 0 14px;
          height: 32px;
          border: none;
          border-radius: 6px;
          cursor: pointer;
          font-size: 0.8rem;
          font-weight: 600;
          white-space: nowrap;
          display: flex;
          align-items: center;
          gap: 6px;
          transition: all 0.2s ease;
          background: transparent;
          color: var(--color-text-secondary);
      }

      .toolbar-tab .material-icons {
          font-size: 18px;
          color: var(--color-text-secondary);
      }

      .toolbar-tab:hover {
          color: var(--md-sys-color-on-surface);
      }

      .toolbar-tab.active {
          background: #FFFFFF;
          /* Pílula branca quando ativa */
          color: var(--md-sys-color-primary);
          /* Texto na cor do sistema */
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
      }

      .toolbar-tab.active .material-icons {
          color: var(--md-sys-color-primary);
      }

      /* ============================================================
      PDV GRID LAYOUT
      ============================================================ */
      .pdv-grid {
          display: grid;
          grid-template-columns: 2fr 1fr;
          gap: 24px;
          padding: 24px;
      }

      #pdvView-PDV {
          display: grid;
          grid-template-columns: 1fr 380px;
          gap: 15px;
          height: calc(100vh - 70px);
          overflow: hidden;
          padding: 5px;
      }

      .pdv-left-panel,
      .pdv-right-panel {
          background: #fff;
          border: 1px solid var(--color-border);
          border-radius: 8px;
          display: flex;
          flex-direction: column;
          height: 100%;
          overflow: hidden;
      }

      .pdv-inputs-header {
          padding: 15px;
          border-bottom: 1px solid #eee;
          background: #fff;
          z-index: 5;
      }

      .pdv-table-scroll-area {
          flex-grow: 1;
          overflow-y: auto;
          padding: 0;
          background: #fff;
      }

      .pdv-summary-content {
          flex-grow: 1;
          overflow-y: auto;
          padding: 20px;
      }

      .pdv-actions-footer {
          padding: 15px;
          border-top: 1px solid #eee;
          background: #f8f9fa;
          margin-top: auto;
      }

      .summary-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;
          font-size: 0.95rem;
      }

      .summary-total {
          display: flex;
          justify-content: space-between;
          margin-top: 16px;
          padding-top: 16px;
          border-top: 1px solid #e0e0e0;
          font-size: 1.25rem;
          font-weight: 700;
          color: var(--md-sys-color-primary);
      }

      /* ============================================================
      PDV ORDER ACCORDION
      ============================================================ */
      .pdv-order-item {
          background: #fff;
          border: 1px solid var(--color-border);
          border-radius: 12px;
          margin-bottom: 12px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
          overflow: hidden;
          transition: all 0.3s ease;
          display: flex;
          flex-direction: column;
      }

      .pdv-order-item:hover {
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
          transform: translateY(-1px);
      }

      .pdv-order-item.open {
          border-color: var(--md-sys-color-primary);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .pdv-order-item.open .order-header {
          background-color: #f0f7ff;
          border-bottom: 1px solid var(--color-border);
      }

      .pdv-order-item .order-details {
          display: none;
          padding: 16px;
          background: #fafafa;
          border-top: 1px solid #eee;
          opacity: 0;
          transform: translateY(-10px);
      }

      .pdv-order-item.open .order-details {
          display: block !important;
          animation: slideDown 0.3s ease forwards;
      }

      .pdv-caixa-layout {
          display: grid;
          /* Proporção 3.5 para 1.5 é aprox 70/30 (Melhor que 80/20 pra não espremer botões de pgto) */
          grid-template-columns: 3.5fr 1.5fr;
          gap: 20px;
          padding: 20px;
          flex: 1;
          /* Ocupa o restante da tela abaixo do header */
          overflow: hidden;
          /* Trava rolagem geral */
      }

      .pdv-caixa-panel {
          display: flex;
          flex-direction: column;
          background: #fff;
          border-radius: 12px;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
          border: 1px solid var(--color-border);
          overflow: hidden;
          height: 100%;
      }

      @media (max-width: 768px) {
          .pdv-caixa-layout {
              grid-template-columns: 1fr !important;
              /* Em celular volta a ficar um embaixo do outro */
              overflow-y: auto !important;
              /* Libera a rolagem da tela no celular */
          }
      }

      /* O botão de "FINALIZAR VENDA" fica fixo e pregado no rodapé do celular */
      .pdv-caixa-footer-btn {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          background: #fff !important;
          padding: 15px !important;
          box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
          z-index: 1000;
          border-top: 1px solid var(--color-border);
      }

      /* Grid Base (Computador) */
      .order-header {
          display: grid;
          grid-template-columns: 85px 100px 1fr auto auto;
          gap: 15px;
          align-items: center;
          padding: 14px 16px;
          background: #fff;
          transition: background 0.2s;
      }

      .order-header:hover {
          background: #f8f9fa;
      }

      @keyframes slideDown {
          from {
              opacity: 0;
              transform: translateY(-10px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .order-actions {
          flex-wrap: wrap !important;
          justify-content: flex-end;
          gap: 8px;
      }

      .detail-section-title {
          font-size: 0.75rem;
          text-transform: uppercase;
          color: #888;
          font-weight: 700;
          margin-bottom: 4px;
          letter-spacing: 0.5px;
      }

      .detail-text {
          font-size: 0.95rem;
          color: #333;
          font-weight: 500;
      }

      .info-grid-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 15px;
          padding: 10px 0;
          border-bottom: 1px dashed #eee;
      }

      .info-full-row {
          padding: 10px 0;
          border-bottom: 1px dashed #eee;
      }

      /* ============================================================
      FILTER PANEL
      ============================================================ */
      #pdvFilterPanel {
          background-color: #f8f9fa;
          border-bottom: 1px solid var(--color-border);
          overflow: hidden;
          transition: all 0.3s ease-in-out;
      }

      #pdvFilterPanel:not(.hidden) {
          display: block;
          animation: slideDownFilter 0.3s ease;
      }

      @keyframes slideDownFilter {
          from {
              opacity: 0;
              transform: translateY(-10px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .filter-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 20px;
          padding: 20px 24px;
      }

      .date-filter-row {
          display: flex;
          align-items: center;
          gap: 8px;
          background: #fff;
          border: 1px solid var(--md-sys-color-outline);
          border-radius: 4px;
          padding: 6px 10px;
          height: 38px;
      }

      .date-filter-row select {
          border: none;
          background: transparent;
          padding: 0;
          font-size: 0.85rem;
          cursor: pointer;
          outline: none;
          width: 100%;
      }

      #customDateRange {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px;
          margin-top: 10px;
          animation: fadeIn 0.3s ease;
      }

      @keyframes fadeIn {
          from {
              opacity: 0;
              transform: translateY(-5px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      /* ============================================================
      CLIENT CARDS
      ============================================================ */
      .client-card {
          background: #fff;
          border: 1px solid var(--color-border);
          border-radius: 12px;
          overflow: hidden;
          transition: all 0.3s ease;
          display: flex;
          flex-direction: column;
          width: 100%;
          margin-bottom: 10px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
      }

      .client-card:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          transform: translateY(-1px);
          border-color: #cbd5e1;
      }

      .client-card.open {
          border-color: var(--md-sys-color-primary);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .client-card.open .client-header {
          background-color: #f0f7ff;
          border-bottom: 1px solid var(--color-border);
      }

      .client-header {
          padding: 7px 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;
          background: #fff;
      }

      .client-details {
          display: none;
          padding: 20px;
          background: #fafafa;
          animation: slideDownClient 0.3s ease forwards;
      }

      .client-card.open .client-details {
          display: block;
      }

      @keyframes slideDownClient {
          from {
              opacity: 0;
              transform: translateY(-10px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .detail-label {
          font-size: 0.75rem;
          color: #666;
          text-transform: uppercase;
          font-weight: 700;
          margin-bottom: 4px;
          letter-spacing: 0.5px;
      }

      .detail-value {
          font-size: 0.95rem;
          color: var(--md-sys-color-on-background);
          font-weight: 500;
          margin-bottom: 12px;
          word-break: break-word;
      }

      .info-box {
          background-color: #f8f9fa;
          border: 1px solid #eef2f6;
          border-radius: 8px;
          padding: 12px 16px;
          margin-bottom: 12px;
      }

      .detail-row {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          gap: 16px;
      }

      .label-icon {
          font-size: 14px;
          vertical-align: text-bottom;
          margin-right: 4px;
          opacity: 0.7;
      }

      /* ============================================================
      PRODUTOS TABLE
      ============================================================ */
      #produtosTableBody tr {
          background-color: #fff;
          transition: all 0.2s;
      }

      #produtosTableBody td {
          padding: 16px 12px;
          border-bottom: 8px solid var(--color-bg-subtle);
      }

      #produtosTableBody tr:hover {
          transform: scale(1.002);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
          z-index: 10;
      }

      /* ============================================================
      NOTIFICATIONS
      ============================================================ */
      #notification-container {
          position: fixed;
          top: 20px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 999999;
          width: 100%;
          max-width: 450px;
          display: flex;
          flex-direction: column;
          align-items: center;
          pointer-events: none;
          padding: 10px;
      }

      .notification {
          pointer-events: auto;
          width: 95%;
          margin-bottom: 12px;
          padding: 14px 18px;
          border-radius: 18px;
          background: rgba(255, 255, 255, 0.85);
          backdrop-filter: blur(20px) saturate(180%);
          -webkit-backdrop-filter: blur(20px) saturate(180%);
          border: 1px solid rgba(255, 255, 255, 0.4);
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
          display: flex;
          align-items: flex-start;
          gap: 14px;
          transform: translateY(-150%);
          opacity: 0;
          transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
      }

      .notification.show {
          transform: translateY(0);
          opacity: 1;
      }

      .notification.hide {
          transform: translateY(-150%);
          opacity: 0;
      }

      .notification-icon {
          font-size: 24px !important;
          flex-shrink: 0;
      }

      .notification.success .notification-icon {
          color: var(--md-sys-color-success);
      }

      .notification.error .notification-icon {
          color: var(--md-sys-color-error);
      }

      .notification.warning .notification-icon {
          color: #f0ad4e;
      }

      .notification-message {
          flex-grow: 1;
          font-size: 14px;
          color: #1d1d1f;
          line-height: 1.4;
          font-weight: 500;
      }

      .notification-close {
          background: rgba(0, 0, 0, 0.06);
          border: none;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          color: #86868b;
          flex-shrink: 0;
      }

      .notif-btn-group {
          display: flex;
          gap: 8px;
          justify-content: flex-end;
          margin-top: 10px;
      }

      .notif-btn {
          border: none;
          padding: 6px 16px;
          border-radius: 10px;
          font-size: 12px;
          font-weight: bold;
          cursor: pointer;
          transition: 0.2s;
      }

      .btn-yes {
          background: var(--md-sys-color-primary);
          color: white;
      }

      .btn-no {
          background: rgba(0, 0, 0, 0.08);
          color: #475569;
      }

      .notif-btn:hover {
          opacity: 0.8;
          transform: scale(1.05);
      }

      /* ============================================================
      PRINT STYLES
      ============================================================ */
      @media print {
          body>*:not(#receiptPrintArea) {
              display: none !important;
          }

          body,
          html {
              background: #fff;
              height: auto;
              overflow: visible;
              margin: 0;
              padding: 0;
          }

          #receiptPrintArea {
              display: block !important;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
          }

          .coupon-container {
              font-family: 'Courier New', monospace;
              width: 76mm;
              margin: 0 auto;
              font-size: 12px;
          }

          .coupon-divider {
              border-top: 1px dashed #000;
              margin: 5px 0;
          }

          .coupon-row {
              display: flex;
              justify-content: space-between;
          }

          .coupon-title {
              font-weight: bold;
              text-align: center;
              font-size: 14px;
          }

          .a4-container {
              font-family: 'Roboto', Arial, sans-serif;
              width: 100%;
              max-width: 210mm;
              margin: 0 auto;
              font-size: 14px;
              color: #333;
          }

          .a4-header {
              display: flex;
              justify-content: space-between;
              border-bottom: 3px solid var(--md-sys-color-primary);
              padding-bottom: 15px;
              margin-bottom: 20px;
          }

          .a4-title-box {
              text-align: right;
          }

          .a4-doc-title {
              font-size: 26px;
              font-weight: 800;
              color: var(--md-sys-color-primary);
              margin-bottom: 5px;
              text-transform: uppercase;
          }

          .a4-company-name {
              font-size: 20px;
              font-weight: bold;
              color: #222;
              margin-bottom: 5px;
          }

          .a4-company-info {
              font-size: 12px;
              color: #666;
              line-height: 1.4;
          }

          .a4-client-box {
              border: 1px solid #ddd;
              padding: 15px;
              border-radius: 8px;
              margin-bottom: 20px;
              background: #fcfcfc;
              display: grid;
              grid-template-columns: 1fr 1fr;
              gap: 10px;
          }

          .a4-client-box p {
              margin: 0;
              font-size: 13px;
              line-height: 1.5;
          }

          .a4-table {
              width: 100%;
              border-collapse: collapse;
              margin-bottom: 20px;
              border: 1px solid #ddd;
          }

          .a4-table th {
              background: #f5f7fa;
              color: #333;
              padding: 12px 10px;
              text-align: left;
              font-size: 12px;
              text-transform: uppercase;
              border-bottom: 2px solid #ddd;
          }

          .a4-table td {
              border-bottom: 1px solid #eee;
              padding: 12px 10px;
              font-size: 13px;
              vertical-align: top;
          }

          .a4-totals-wrapper {
              display: flex;
              justify-content: flex-end;
              margin-bottom: 40px;
          }

          .a4-totals {
              width: 350px;
              border: 1px solid #ddd;
              border-radius: 8px;
              padding: 15px;
              background: #fcfcfc;
          }

          .a4-totals-row {
              display: flex;
              justify-content: space-between;
              margin-bottom: 8px;
              font-size: 14px;
          }

          .a4-totals-row.total {
              font-size: 18px;
              font-weight: bold;
              color: var(--md-sys-color-primary);
              border-top: 1px solid #ddd;
              padding-top: 10px;
              margin-top: 10px;
          }

          .a4-signatures {
              display: flex;
              justify-content: space-around;
              margin-top: 60px;
              page-break-inside: avoid;
          }

          .a4-sign-line {
              width: 40%;
              border-top: 1px solid #333;
              text-align: center;
              padding-top: 5px;
              font-size: 13px;
              font-weight: 500;
          }

          .a4-footer {
              text-align: center;
              font-size: 11px;
              color: #888;
              border-top: 1px solid #eee;
              padding-top: 10px;
              margin-top: 20px;
              page-break-inside: avoid;
          }
      }

      /* ============================================================
      📱 RESPONSIVO - TABLET (769px - 1024px)
      ============================================================ */
      @media (min-width: 769px) and (max-width: 1024px) {
          .pdv-grid {
              grid-template-columns: 1fr;
          }

          #pdvFilterPanel .filter-grid {
              grid-template-columns: repeat(2, 1fr) !important;
          }
      }

      /* ============================================================
      📱 RESPONSIVO - MOBILE (até 768px)
      CONSOLIDADO EM UM ÚNICO BLOCO
      ============================================================ */
      /* ============================================================
      📱 RESPONSIVO - MOBILE (até 768px)
      ============================================================ */
      @media (max-width: 768px) {

          /* Sidebar vira drawer */
          .sidebar {
              left: -260px;
              width: 260px !important;
              transition: all 0.3s ease;
          }

          .sidebar.open {
              left: 0;
              box-shadow: 10px 0 50px rgba(0, 0, 0, 0.3);
          }

          .home-section {
              left: 0 !important;
              width: 100% !important;
          }

          /* Backdrop do menu mobile */
          .sidebar-backdrop {
              display: none;
              position: fixed;
              inset: 0;
              background: rgba(0, 0, 0, 0.45);
              z-index: 99;
              backdrop-filter: blur(2px);
              -webkit-backdrop-filter: blur(2px);
              animation: fadeInBackdrop 0.25s ease;
          }

          .sidebar-backdrop.active {
              display: block;
          }

          @keyframes fadeInBackdrop {
              from {
                  opacity: 0;
              }

              to {
                  opacity: 1;
              }
          }

          /* Global header mobile */
          .global-header {
              padding: 0 8px;
              height: 56px;
          }

          .global-header .menu-toggle-btn {
              width: 40px;
              height: 40px;
              min-width: 40px;
          }

          .global-header .menu-toggle-btn .material-icons {
              font-size: 20px;
          }

          .global-header .menu-toggle-btn[title]:hover::after {
              display: none;
          }

          /* Toolbar buttons mobile */
          .toolbar-btn {
              width: 40px;
              height: 40px;
              min-width: 40px;
          }

          .toolbar-btn .material-icons {
              font-size: 20px;
          }

          .toolbar-btn[title]:hover::after {
              display: none;
          }

          /* Toolbar search mobile */
          .toolbar-search.expanded {
              position: absolute;
              left: 8px;
              right: 8px;
              width: calc(100% - 16px);
              z-index: 10;
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          }

          /* Toolbar tabs mobile */
          .toolbar-tabs {
              height: 40px;
          }

          .toolbar-tab {
              padding: 0 10px;
              height: 32px;
              font-size: 0.7rem;
          }

          .toolbar-tab .material-icons {
              font-size: 16px;
          }

          /* PDV mobile */
          #pdvView-PDV {
              display: flex;
              flex-direction: column;
              height: auto;
              overflow: visible;
          }

          /* Ajuste do Painel Direito (Para não cortar os botões) */
          .pdv-right-panel {
              height: auto !important;
              overflow: visible !important;
          }

          .pdv-summary-content {
              overflow-y: visible !important;
              padding-bottom: 100px !important;
          }

          /* Faz os botões ficarem fixos no rodapé da tela no celular */
          .pdv-actions-footer {
              position: fixed !important;
              bottom: 0;
              left: 0;
              width: 100%;
              z-index: 900;
              background: #f8f9fa;
              box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.15);
              border-top: 1px solid #ddd;
              margin: 0;
              padding: 12px 15px !important;
          }

          .pdv-table-scroll-area {
              max-height: 400px;
          }

          .pdv-grid {
              grid-template-columns: 1fr;
              padding: 12px;
          }

          /* Filter panel mobile */
          #pdvFilterPanel .filter-grid {
              grid-template-columns: 1fr !important;
              gap: 12px !important;
              padding: 15px !important;
          }

          #pdvFilterPanel .filter-grid .form-group:nth-child(1) {
              order: 1;
          }

          #pdvFilterPanel .filter-grid .form-group:nth-child(2) {
              order: 3;
          }

          #pdvFilterPanel .filter-grid .form-group:nth-child(3) {
              order: 2;
          }

          #pdvFilterPanel .filter-grid .flex.gap-4 {
              flex-wrap: wrap;
              gap: 8px !important;
          }

          #pdvFilterPanel .filter-grid .flex.gap-4 label {
              font-size: 0.85rem;
          }

          #pdvFilterPanel>div:last-child {
              padding: 12px 15px !important;
          }

          #pdvFilterPanel>div:last-child button {
              flex: 1;
          }

          /* ============================================================
             PADRÃO UNIFICADO DE CARDS MOBILE (PEDIDOS, CLIENTES, PRODUTOS)
             ============================================================ */

          /* 1. Base idêntica para todos os cartões (estilo Apple) */
          .pdv-order-item,
          .client-card,
          #produtosTableBody tr {
              background: #ffffff !important;
              border-radius: 16px !important;
              border: 1px solid #E5E5EA !important;
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
              margin-bottom: 12px !important;
              overflow: hidden;
              transition: transform 0.2s ease;
          }

          /* --- CARD DE PEDIDOS --- */
          .order-header {
              grid-template-columns: 1fr auto !important;
              /* 2 Colunas */
              grid-template-rows: auto auto auto !important;
              /* 3 Linhas */
              gap: 8px 0 !important;
              /* Espaço entre as linhas */
              padding: 16px 20px !important;
              /* Respiro igual para todos */
          }

          /* Linha 1: ID na esquerda, Badge na direita */
          .order-header>div:nth-child(1) {
              grid-column: 1;
              grid-row: 1;
          }

          .order-header>div:nth-child(2) {
              grid-column: 2;
              grid-row: 1;
              text-align: right;
          }

          /* Linha 2: Nome do Cliente grande e destacado */
          .order-header>.data-cliente {
              grid-column: 1 / -1;
              grid-row: 2;
              font-size: 1.15rem !important;
              color: #111 !important;
              font-weight: 600;
          }

          /* Oculta ícone solto */
          .order-header>.data-entrega-icon {
              display: none !important;
          }

          /* Linha 3: Forma de Pagto e Total */
          .order-header>div:nth-child(5) {
              grid-column: 1 / -1;
              grid-row: 3;
              display: flex;
              justify-content: space-between !important;
              align-items: center;
              width: 100%;
              margin-left: 0 !important;
              padding-top: 12px !important;
              border-top: 1px dashed #E5E5EA;
              /* Divisão charmosa */
          }

          .order-header>div:nth-child(5)>.data-total {
              margin-left: auto;
          }

          /* --- CARD DE CLIENTES --- */
          .client-header {
              padding: 16px 20px !important;
          }

          /* --- CARD DE PRODUTOS --- */
          .hidden-mobile {
              display: none !important;
          }

          #contentProdutosServicos .table-container {
              border: none !important;
              background: transparent !important;
          }

          #produtosTableBody {
              display: flex;
              flex-direction: column;
              padding: 4px;
          }

          #produtosTableBody tr {
              display: grid !important;
              grid-template-columns: 50px 1fr auto;
              grid-template-areas:
                  "icone nome acoes"
                  "icone sku acoes"
                  "icone preco acoes"
                  "icone estoque acoes";
              padding: 16px !important;
              align-items: center;
              gap: 4px 12px;
          }

          #produtosTableBody td {
              padding: 0 !important;
              border: none !important;
          }

          #produtosTableBody td:nth-child(1) {
              grid-area: icone;
              display: flex;
              justify-content: center;
          }

          #produtosTableBody td:nth-child(2) {
              grid-area: nome;
              font-size: 1.05rem;
          }

          #produtosTableBody td:nth-child(3) {
              grid-area: sku;
          }

          #produtosTableBody td:nth-child(4) {
              grid-area: preco;
              color: var(--md-sys-color-primary);
              font-size: 1.1rem;
          }

          #produtosTableBody td:nth-child(5) {
              grid-area: estoque;
          }

          #produtosTableBody td:nth-child(6) {
              grid-area: acoes;
              display: flex;
              flex-direction: column;
              gap: 8px;
          }
      }

      /* PDV CAIXA STYLES */
      .pdv-caixa-layout {
          display: grid;
          grid-template-columns: 1fr 400px;
          height: calc(100vh - 85px);
          gap: 20px;
          padding: 20px;
          background: var(--md-sys-color-background);
          overflow: hidden;
      }

      .pdv-caixa-panel {
          display: flex;
          flex-direction: column;
          background: #fff;
          border-radius: 16px;
          box-shadow: var(--shadow-1);
          border: 1px solid var(--color-border);
          overflow: hidden;
          height: 100%;
      }

      .pdv-caixa-footer-btn {
          padding: 15px;
          border-top: 1px solid var(--color-border);
          background: #fafafa;
          position: relative;
      }

      .pdv-caixa-pay-btn {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 15px;
          border: 2px solid #e0e0e0;
          border-radius: 12px;
          cursor: pointer;
          transition: all 0.2s;
          background: #fff;
          gap: 8px;
          font-weight: 500;
          color: #555;
      }

      .pdv-caixa-pay-btn:hover {
          border-color: var(--md-sys-color-primary);
          background: #f0f7ff;
          color: var(--md-sys-color-primary);
      }

      .pdv-caixa-pay-btn.selected {
          border-color: var(--md-sys-color-primary);
          background: var(--md-sys-color-primary);
          color: #fff;
          box-shadow: 0 4px 10px rgba(0, 90, 193, 0.3);
      }

      .pdv-caixa-cart-item {
          display: grid;
          grid-template-columns: 1fr auto auto auto;
          gap: 15px;
          align-items: center;
          padding: 12px;
          background: #f8f9fa;
          border-radius: 8px;
          border: 1px solid #eee;
      }

      .pdv-caixa-cart-item-name {
          font-weight: 600;
          color: #333;
      }

      .pdv-caixa-cart-item-price {
          font-size: 0.9rem;
          color: #666;
      }

      /* ============================================================
      📱 RESPONSIVO - EXTRA SMALL (até 480px)
      ============================================================ */
      @media (max-width: 480px) {
          .toolbar-tab span:not(.material-icons) {
              display: none;
          }

          .toolbar-tab {
              padding: 0 8px;
          }
      }

      #finEyeIcon {
          cursor: pointer;
          color: var(--color-text-secondary);
          transition: color 0.2s;
      }

      #finEyeIcon:hover {
          color: var(--md-sys-color-primary);
      }

      /* Estilos da Barra Office (Ribbon) */
      .office-ribbon {
          background: #f3f2f1;
          border-bottom: 1px solid #d2d0ce;
          font-family: 'Segoe UI', Roboto, sans-serif;
          user-select: none;
      }

      .ribbon-tabs {
          display: flex;
          background: #fff;
          padding-left: 10px;
          border-bottom: 1px solid #e1dfdd;
      }

      .ribbon-tab {
          padding: 8px 16px;
          font-size: 13px;
          cursor: pointer;
          color: #605e5c;
          margin-top: 5px;
      }

      .ribbon-tab.active {
          background: #f3f2f1;
          border: 1px solid #e1dfdd;
          border-bottom: none;
          color: #0078d4;
          font-weight: 600;
      }

      .ribbon-toolbar {
          display: flex;
          padding: 5px 10px;
          gap: 15px;
          height: 80px;
          align-items: center;
      }

      .ribbon-group {
          display: flex;
          align-items: center;
          gap: 5px;
          border-right: 1px solid #c8c6c4;
          padding-right: 15px;
          height: 100%;
      }

      .ribbon-btn {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background: transparent;
          border: 1px solid transparent;
          padding: 5px 10px;
          border-radius: 4px;
          cursor: pointer;
          color: #323130;
          min-width: 60px;
          transition: 0.1s;
      }

      .ribbon-btn:hover {
          background: #e1dfdd;
          border-color: #c8c6c4;
      }

      .ribbon-btn .material-icons {
          font-size: 24px;
          margin-bottom: 4px;
          color: #0078d4;
      }

      .ribbon-btn.action-btn .material-icons {
          color: #107c41;
      }

      /* Desenho de Planta Baixa / Esquadrias */
      .canvas-box {
          background: #e0e0e0;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          transition: all 0.3s ease;
          box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
          border: 2px solid #555;
      }

      .canvas-text {
          font-weight: bold;
          color: #333;
          text-shadow: 1px 1px 0 #fff;
          z-index: 2;
          text-align: center;
      }

      /* Layout do Workspace */
      .workspace-layout {
          display: flex;
          height: calc(100vh - 120px);
          overflow: hidden;
          background: #faf9f8;
      }

      .workspace-sidebar {
          width: 300px;
          background: #fff;
          border-right: 1px solid #e1dfdd;
          overflow-y: auto;
          padding: 15px;
      }

      .workspace-main {
          flex: 1;
          padding: 24px;
          overflow-y: auto;
      }


      /* ============================================================
   PDV CAIXA FULLSCREEN (FRENTE DE LOJA)
   ============================================================ */
      #pdvCaixaFullScreen {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
          width: 100vw !important;
          height: 100vh !important;
          background: #f4f7f9;
          z-index: 100000 !important;
          display: none;
          flex-direction: column;
          overflow: hidden;
      }

      #pdvCaixaFullScreen:not(.hidden) {
          display: flex !important;
      }

      /* Esconde sidebar quando o PDV está aberto */
      #pdvCaixaFullScreen:not(.hidden)~.sidebar {
          display: none !important;
      }

      body.pdv-caixa-open .sidebar,
      body.pdv-caixa-open .home-section {
          display: none !important;
      }

      /* Modais que abrem DENTRO do PDV */
      #loadPedidoModal,
      #posVendaModal {
          z-index: 200000 !important;
      }

      /* ============================================================
   HEADER DO PDV
   ============================================================ */
      .pdv-header {
          height: 72px;
          min-height: 72px;
          background: #ffffff;
          border-bottom: 3px solid var(--md-sys-color-primary);
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          align-items: center;
          padding: 0 28px;
          flex-shrink: 0;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      }

      .pdv-header-left {
          display: flex;
          align-items: center;
          gap: 18px;
      }

      .pdv-header-left img {
          height: 38px;
          width: auto;
      }

      .pdv-store-info {
          display: flex;
          flex-direction: column;
          gap: 2px;
      }

      #pdvCaixaHeaderStore {
          font-weight: 800;
          font-size: 1.15rem;
          margin: 0;
          color: #1d1d1f;
          letter-spacing: -0.3px;
      }

      .pdv-operator-box {
          display: flex;
          align-items: center;
          gap: 5px;
          color: var(--md-sys-color-primary);
          font-weight: 600;
          font-size: 0.78rem;
          opacity: 0.9;
      }

      .pdv-operator-box .material-icons {
          font-size: 16px;
      }

      .pdv-header-center {
          text-align: center;
          justify-self: center;
      }

      #pdvCaixaHeaderTime {
          font-size: 2rem;
          font-weight: 900;
          line-height: 1;
          color: #1d1d1f;
          letter-spacing: -1px;
      }

      #pdvCaixaHeaderDate {
          font-size: 0.82rem;
          color: #6b7280;
          font-weight: 500;
          margin-top: 1px;
      }

      .pdv-header-right {
          display: flex;
          justify-content: flex-end;
          align-items: center;
      }

      .btn-sair-pdv {
          background: #fef2f2;
          color: #dc2626;
          border: 1.5px solid #fecaca;
          padding: 9px 18px;
          border-radius: 10px;
          font-weight: 700;
          font-size: 0.85rem;
          cursor: pointer;
          display: flex;
          gap: 7px;
          align-items: center;
          transition: all 0.2s ease;
      }

      .btn-sair-pdv:hover {
          background: #dc2626;
          color: #fff;
          border-color: #dc2626;
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
      }

      .btn-sair-pdv .material-icons {
          font-size: 18px;
      }

      /* ============================================================
   CORPO DO PDV (70% / 30%)
   ============================================================ */
      .pdv-container {
          flex: 1;
          display: grid;
          grid-template-columns: 7fr 3fr;
          height: calc(100vh - 72px);
          /* ← corrigido para 72px */
          overflow: hidden;
      }

      /* ---- LADO ESQUERDO ---- */
      .pdv-main-content {
          background: #f8fafc;
          border-right: 2px solid #e2e8f0;
          display: flex;
          flex-direction: column;
          padding: 20px;
          overflow: hidden;
      }

      /* Barra de busca */
      .pdv-search-bar {
          display: flex;
          gap: 15px;
          align-items: flex-end;
          background: #ffffff;
          padding: 16px 20px;
          border-radius: 12px;
          border: 1px solid #e5e7eb;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
          margin-bottom: 20px;
          flex-shrink: 0;
      }

      .pdv-search-bar label {
          font-weight: 900;
          font-size: 0.7rem;
          color: #64748b;
          margin-bottom: 6px;
          display: block;
          letter-spacing: 0.5px;
      }

      .search-box-ident,
      .search-box-item {
          flex: 2;
          position: relative;
      }

      .search-box-load {
          width: 150px;
          flex-shrink: 0;
      }

      .pdv-search-bar input {
          width: 100%;
          height: 48px;
          border: 2px solid #e2e8f0;
          border-radius: 8px;
          font-size: 1.05rem;
          font-weight: 600;
          padding: 0 12px 0 42px;
          transition: all 0.2s;
      }

      .pdv-search-bar input:focus {
          border-color: var(--md-sys-color-primary);
          background: #f0f7ff;
          outline: none;
      }

      .btn-carregar-pdv {
          height: 48px;
          background: #64748b;
          color: #fff;
          border-radius: 8px;
          font-weight: 700;
          width: 100%;
          cursor: pointer;
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          transition: all 0.2s;
      }

      .btn-carregar-pdv:hover {
          background: #334155;
      }

      /* Cliente selecionado */
      .pdv-selected-box {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 48px;
          background: #e0f2fe;
          border: 2px solid #0284c7;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 12px;
          z-index: 10;
      }

      #pdvCaixaClientName {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 85%;
          font-size: 0.95rem;
          font-weight: 700;
          color: #0369a1;
      }

      /* Área do carrinho */
      .pdv-cart-area {
          flex: 1;
          background: #fff;
          border-radius: 12px;
          overflow-y: auto;
          border: 1px solid #e2e8f0;
          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
      }

      /* Empty state */
      #pdvCaixaEmptyState {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;
          color: #9ca3af;
          gap: 12px;
      }

      #pdvCaixaEmptyState .material-icons {
          font-size: 64px;
          opacity: 0.25;
      }

      /* Tabela */
      #pdvCaixaTable {
          width: 100%;
          border-collapse: collapse;
          table-layout: fixed;
      }

      #pdvCaixaTable thead th {
          position: sticky;
          top: 0;
          background: #1d1d1f;
          color: #fff;
          padding: 14px 12px;
          z-index: 5;
          text-transform: uppercase;
          font-size: 0.75rem;
          letter-spacing: 0.8px;
      }

      #pdvCaixaTable tbody td {
          padding: 12px;
          border-bottom: 1px solid #f1f5f9;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      #pdvCaixaTable th:nth-child(1),
      #pdvCaixaTable td:nth-child(1) {
          width: 45%;
      }

      #pdvCaixaTable th:nth-child(2),
      #pdvCaixaTable td:nth-child(2) {
          width: 10%;
          text-align: center;
      }

      #pdvCaixaTable th:nth-child(3),
      #pdvCaixaTable td:nth-child(3) {
          width: 15%;
          text-align: right;
      }

      #pdvCaixaTable th:nth-child(4),
      #pdvCaixaTable td:nth-child(4) {
          width: 20%;
          text-align: right;
      }

      #pdvCaixaTable th:nth-child(5),
      #pdvCaixaTable td:nth-child(5) {
          width: 10%;
          text-align: center;
      }

      /* ---- LADO DIREITO ---- */
      .pdv-sidebar-right {
          background: #fff;
          display: flex;
          flex-direction: column;
          overflow-y: auto;
      }

      .pdv-totals-box {
          background: #1d1d1f;
          color: #fff;
          padding: 28px 30px;
      }

      .total-row {
          display: flex;
          justify-content: space-between;
          opacity: 0.75;
          font-size: 0.95rem;
          margin-bottom: 8px;
      }

      .total-main {
          margin-top: 18px;
          border-top: 1px dashed rgba(255, 255, 255, 0.25);
          padding-top: 20px;
      }

      .total-main label {
          font-size: 0.8rem;
          font-weight: 800;
          color: var(--md-sys-color-primary);
          letter-spacing: 1.5px;
      }

      #pdvCaixaTotal {
          font-size: 3.4rem;
          font-weight: 900;
          margin: 6px 0 0 0;
          color: #fff;
          line-height: 1;
      }

      .pdv-payment-area {
          padding: 24px;
          flex: 1;
      }

      .payment-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px;
          margin-bottom: 20px;
      }

      .pay-btn {
          height: 62px;
          border: 2px solid #e2e8f0;
          background: #fff;
          border-radius: 10px;
          font-weight: 800;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 4px;
          font-size: 0.72rem;
          color: #64748b;
          transition: all 0.2s;
      }

      .pay-btn .material-icons {
          color: var(--md-sys-color-primary);
          font-size: 22px;
      }

      .pay-btn:hover {
          border-color: var(--md-sys-color-primary);
          background: #f0f7ff;
          color: var(--md-sys-color-primary);
      }

      .pay-btn:active {
          transform: scale(0.97);
      }

      #pdvCaixaChangeBlock {
          background: #dcfce7;
          border: 2px solid #22c55e;
          border-radius: 12px;
          padding: 16px;
          text-align: center;
          margin-top: 18px;
      }

      #pdvCaixaChangeBlock small {
          color: #166534;
          font-weight: 900;
          letter-spacing: 1px;
          font-size: 0.75rem;
      }

      #pdvCaixaChangeValue {
          color: #166534;
          font-size: 2.1rem;
          font-weight: 900;
          margin: 4px 0 0 0;
      }

      .pdv-actions-box {
          padding: 20px;
          background: #fff;
          border-top: 1px solid #e2e8f0;
      }

      #pdvCaixaFinishBtn {
          width: 100%;
          height: 72px;
          background: #22c55e;
          color: #fff;
          border: none;
          border-radius: 12px;
          font-size: 1.4rem;
          font-weight: 900;
          cursor: pointer;
          box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          transition: all 0.25s;
      }

      #pdvCaixaFinishBtn:not(:disabled) {
          background: linear-gradient(135deg, #22c55e, #16a34a);
      }

      #pdvCaixaFinishBtn:hover:not(:disabled) {
          background: #16a34a;
          transform: translateY(-1px);
      }

      #pdvCaixaFinishBtn:disabled {
          background: #cbd5e1;
          opacity: 0.65;
          cursor: not-allowed;
          box-shadow: none;
      }
      
      
      .kanban-container {
            display: flex;
            gap: 20px;
            padding: 20px;
            height: calc(100vh - 100px);
            align-items: flex-start;
        }
        
        .kanban-column {
            flex: 1;
            background: #ebedf0;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            max-height: 100%;
            min-width: 300px;
        }
        
        .kanban-header {
            padding: 15px;
            font-weight: 700;
            color: #444;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .kanban-header .count {
            background: #ccc;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 0.75rem;
        }
        
        .kanban-list {
            padding: 10px;
            flex-grow: 1;
            overflow-y: auto;
        }
        
        .kanban-card {
            background: #fff;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 12px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            cursor: grab;
            border-left: 5px solid var(--md-sys-color-primary);
            transition: transform 0.2s;
        }
        
        .kanban-card:active { cursor: grabbing; transform: scale(1.02); }
        
        .kanban-card .os-id { font-weight: bold; color: var(--md-sys-color-primary); font-size: 0.8rem; }
        .kanban-card .os-client { font-weight: 600; display: block; margin-top: 5px; }
        .kanban-card .os-equip { font-size: 0.85rem; color: #666; margin-top: 5px; }

        /* ============================================================
   APP SWITCHER (ESTILO GOOGLE)
   ============================================================ */
.app-switcher {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 9999;
    font-family: 'Roboto', sans-serif;
}

.app-switcher-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 8px 16px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #1d1d1f;
    font-weight: 500;
}

.app-switcher-btn:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.app-switcher-btn .material-icons {
    font-size: 22px;
    color: #555;
}

/* O Balão (Dropdown) */
.app-switcher-dropdown {
    position: absolute;
    top: 55px;
    left: 0;
    width: 280px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 15px;
    display: none; /* Controlado via JS */
    animation: fadeInScale 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}

.app-switcher-dropdown.active {
    display: block;
}

.app-switcher-header {
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    font-weight: 700;
    margin-bottom: 10px;
    padding-left: 10px;
    letter-spacing: 0.5px;
}

/* Item de App */
.app-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    text-decoration: none;
    color: #1d1d1f;
    border-radius: 12px;
    transition: background 0.2s;
}

.app-item:hover {
    background: #f5f5f7;
}

.app-icon-box {
    width: 40px;
    height: 40px;
    background: #E5F0FF;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007AFF;
}

.app-info {
    display: flex;
    flex-direction: column;
}

.app-name {
    font-size: 14px;
    font-weight: 600;
}

.app-desc {
    font-size: 11px;
    color: #888;
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}