/* ===== ESTILOS BASE ===== */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      box-sizing: border-box;
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 16px;
      line-height: 1.5;
    }
    
    html, body {
      height: 100%;
      width: 100%;
    }

    /* ===== TELA DE LOGIN ===== */
    .tela-login {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .caixa-login {
      background: white;
      padding: 2rem;
      border-radius: 1rem;
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
      width: 90%;
      max-width: 400px;
    }

    .cabecalho-login {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .titulo-login {
      font-size: 1.875rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 0.5rem;
    }

    .subtitulo-login {
      color: #4b5563;
    }

    .formulario-login {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .grupo-formulario {
      display: flex;
      flex-direction: column;
    }

    .etiqueta-formulario {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: #374151;
      margin-bottom: 0.25rem;
    }

    .entrada-formulario {
      width: 100%;
      padding: 0.5rem 1rem;
      border: 1px solid #d1d5db;
      border-radius: 0.5rem;
      font-size: 1rem;
      font-family: inherit;
    }

    .entrada-formulario:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);
      border-color: #2563eb;
    }

    .botao-login {
      width: 100%;
      padding: 0.75rem 1.5rem;
      background-color: #2563eb;
      color: white;
      border: none;
      border-radius: 0.5rem;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .botao-login:hover {
      background-color: #1d4ed8;
    }

    .info-demo {
      margin-top: 1.5rem;
      padding: 1rem;
      background-color: #eff6ff;
      border-radius: 0.5rem;
    }

    .titulo-demo {
      font-size: 0.875rem;
      color: #1e40af;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .usuario-demo {
      font-size: 0.75rem;
      color: #1d4ed8;
      margin: 0.25rem 0;
    }

    /* ===== LAYOUT PRINCIPAL DA APLICAÇÃO ===== */
    .contentor-app {
      height: 100%;
      width: 100%;
      display: flex;
      background-color: white;
    }

    .contentor-app.escondido {
      display: none;
    }

    /* ===== BARRA LATERAL DE NAVEGAÇÃO ===== */
    .barra-lateral {
      width: 16rem;
      background-color: #040053;
      color: white;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
      flex-shrink: 0;
      overflow-y: auto;
      padding: 1rem;
    }

    .cabecalho-barra {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid #1d4ed8;
    }

    .logo-app {
      margin-bottom: 0.75rem;
    }

    .titulo-app {
      font-size: 1.25rem;
      font-weight: 700;
      text-align: center;
    }

    .nome-empresa {
      font-size: 0.75rem;
      opacity: 0.9;
      margin-top: 0.25rem;
    }

    .menu-navegacao {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-bottom: 1.5rem;
    }

    .botao-nav {
      width: 100%;
      padding: 0.75rem 1rem;
      border-radius: 0.25rem;
      background-color: #1d4ed8;
      color: white;
      text-align: left;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      transition: background-color 0.15s;
      cursor: pointer;
      border: none;
      font-family: inherit;
      font-size: 1rem;
    }

    .botao-nav:hover {
      background-color: #0091ff;
    }

    .botao-nav.ativo {
      background-color: #1e40af;
      font-weight: 600;
    }

    .icone-nav {
      font-size: 1.25rem;
    }

    .secao-utilizador {
      padding-top: 1rem;
      border-top: 1px solid #1d4ed8;
    }

    .info-utilizador {
      background-color: #1d4ed8;
      padding: 0.75rem 1rem;
      border-radius: 0.25rem;
    }

    .etiqueta-utilizador {
      font-size: 0.75rem;
      opacity: 0.75;
      margin-bottom: 0.25rem;
    }

    .nome-utilizador {
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .botao-sair {
      width: 100%;
      background-color: #ef4444;
      padding: 0.5rem 0.75rem;
      border-radius: 0.25rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: white;
      transition: background-color 0.15s;
      cursor: pointer;
      border: none;
      font-family: inherit;
    }

    .botao-sair:hover {
      background-color: #dc2626;
    }

    /* ===== ÁREA DE CONTEÚDO PRINCIPAL ===== */
    .conteudo-principal {
      flex: 1;
      overflow: auto;
      background-color: white;
    }

    .envolvedor-pagina {
      padding: 1.5rem;
    }

    .envolvedor-pagina.escondido {
      display: none;
    }

    .cabecalho-pagina {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .titulo-pagina {
      font-size: 1.875rem;
      font-weight: 700;
      color: #1f2937;
    }

    .botao-exportar {
      padding: 0.5rem 1rem;
      background-color: #16a34a;
      color: white;
      border: none;
      border-radius: 0.25rem;
      cursor: pointer;
      font-family: inherit;
      font-size: 0.875rem;
      transition: background-color 0.2s;
    }

    .botao-exportar:hover {
      background-color: #15803d;
    }

    /* ===== ESTATÍSTICAS DO DASHBOARD ===== */
    .grelha-estatisticas {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .cartao-estatistica {
      background-color:  #3555e4;
      padding: 1.5rem;
      border-radius: 0.5rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s;
    }

    .cartao-estatistica:hover {
      transform: translateY(-2px);
    }

    .conteudo-cartao-estatistica {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .info-estatistica {
      flex: 1;
    }

    .etiqueta-estatistica {
      color: white;
      font-size: 0.875rem;
      margin-bottom: 0.25rem;
    }

    .valor-estatistica {
      font-size: 1.875rem;
      font-weight: 700;
    }

    .valor-estatistica {
      color: white;
    }

  
    .icone-estatistica {
      font-size: 2.5rem;
    }

    /* ===== GRÁFICOS ===== */
    .grelha-graficos {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 1.5rem;
      margin-bottom: 1.5rem;
    }

    .contentor-grafico {
      background: white;
      border-radius: 0.5rem;
      padding: 1.5rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      min-height: 350px;
    }

    .titulo-grafico {
      font-size: 1.25rem;
      font-weight: 600;
      color: #374151;
      margin-bottom: 1rem;
    }

    /* ===== FORMULÁRIOS ===== */
    .contentor-formulario {
      background-color: white;
      padding: 1.5rem;
      border-radius: 0.5rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      margin-bottom: 1.5rem;
    }

    .cabecalho-formulario {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .titulo-formulario {
      font-size: 1.25rem;
      font-weight: 600;
      color: #374151;
    }

    .botao-digitalizar {
      padding: 0.5rem 1rem;
      background-color:  #3555e4;
      color: white;
      border: none;
      border-radius: 0.25rem;
      cursor: pointer;
      font-family: inherit;
      font-size: 0.875rem;
      transition: background-color 0.2s;
    }

    .botao-digitalizar:hover {
      background-color: #040053;
    }

    .grelha-formulario {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    @media (min-width: 768px) {
      .grelha-formulario {
        grid-template-columns: repeat(2, 1fr);
      }

      .grelha-formulario .largura-completa {
        grid-column: 1 / -1;
      }
    }

    .campo-formulario {
      display: flex;
      flex-direction: column;
    }

    select {
      width: 100%;
      padding: 0.5rem 0.75rem;
      border: 1px solid #d1d5db;
      border-radius: 0.5rem;
      font-size: 1rem;
      font-family: inherit;
      background-color: white;
    }

    select:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);
      border-color: #2563eb;
    }

    textarea {
      width: 100%;
      padding: 0.5rem 0.75rem;
      border: 1px solid #d1d5db;
      border-radius: 0.5rem;
      font-size: 1rem;
      font-family: inherit;
      resize: vertical;
    }

    textarea:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);
      border-color: #2563eb;
    }

    .botao-submeter {
      width: 100%;
      padding: 0.75rem 1.5rem;
      background-color: #3555e4;
      color: white;
      border: none;
      border-radius: 0.25rem;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .botao-submeter:hover {
      background-color: #040053;
    }

    .botao-submeter.roxo {
      background-color: #9333ea;
    }

    .botao-submeter.roxo:hover {
      background-color: #7e22ce;
    }

    /* ===== CAIXAS DE INFORMAÇÃO ===== */
    .caixa-info {
      padding: 1rem;
      border-radius: 0.5rem;
      margin-top: 1rem;
      border: 1px solid;
    }

    .caixa-info.escondido {
      display: none;
    }

    .caixa-info.azul {
      background-color: #eff6ff;
      border-color: #bfdbfe;
    }

    .titulo-caixa-info {
      font-weight: 600;
      color: #1e3a8a;
      margin-bottom: 0.5rem;
    }

    .texto-caixa-info {
      font-size: 0.875rem;
      color: #1e40af;
    }

    .aviso-caixa-info {
      font-size: 0.875rem;
      color: #dc2626;
      font-weight: 600;
      margin-top: 0.5rem;
    }

    /* ===== LISTAS ===== */
    .contentor-lista {
      background-color: white;
      padding: 1.5rem;
      border-radius: 0.5rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .cabecalho-lista {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .titulo-lista {
      font-size: 1.25rem;
      font-weight: 600;
      color: #374151;
    }

    .itens-lista {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .item-lista {
      border: 1px solid #d1d5db;
      border-radius: 0.5rem;
      padding: 1rem;
      transition: background-color 0.2s;
    }

    .item-lista:hover {
      background-color: #f9fafb;
    }

    .item-lista.stock-baixo {
      border-color: #f87171;
      background-color: #fef2f2;
    }

    .conteudo-item-lista {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .principal-item-lista {
      flex: 1;
      min-width: 200px;
    }

    .titulo-item {
      font-weight: 600;
      font-size: 1.125rem;
      margin-bottom: 0.25rem;
    }

    .detalhe-item {
      font-size: 0.875rem;
      color: #4b5563;
      margin: 0.125rem 0;
    }

    .stock-item {
      font-size: 0.875rem;
      font-weight: 600;
      margin-top: 0.5rem;
    }

    .stock-item.ok {
      color: #15803d;
    }

    .stock-item.baixo {
      color: #b91c1c;
    }

    .previsao-item {
      font-size: 0.875rem;
      color: #ea580c;
      font-weight: 600;
      margin-top: 0.25rem;
    }

    .badge-jit {
      display: inline-block;
      background-color: #10b981;
      color: white;
      font-size: 0.75rem;
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
      font-weight: 600;
      margin-top: 0.5rem;
    }

    .lado-item-lista {
      text-align: right;
    }

    .preco-item {
      font-weight: 700;
      font-size: 1.125rem;
      color: #2563eb;
      margin-bottom: 0.25rem;
    }

    .preco-item.verde {
      color: #16a34a;
    }

    .meta-item {
      font-size: 0.875rem;
      color: #6b7280;
      margin: 0.125rem 0;
    }

    .botao-eliminar {
      padding: 0.25rem 0.75rem;
      background-color: #ef4444;
      color: white;
      font-size: 0.875rem;
      border-radius: 0.25rem;
      cursor: pointer;
      border: none;
      font-family: inherit;
      margin-top: 0.5rem;
      transition: background-color 0.2s;
    }

    .botao-eliminar:hover {
      background-color: #dc2626;
    }

    .estado-vazio {
      text-align: center;
      padding: 2rem;
      color: #6b7280;
    }

    /* ===== RELATÓRIOS ===== */
    .grelha-relatorios {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 1.5rem;
      margin-bottom: 1.5rem;
    }

    .secao-relatorio {
      background-color: white;
      padding: 1.5rem;
      border-radius: 0.5rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .titulo-relatorio {
      font-size: 1.25rem;
      font-weight: 600;
      color: #374151;
      margin-bottom: 1rem;
    }

    .itens-relatorio {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .cartao-relatorio {
      border-left: 4px solid;
      padding: 0.75rem;
      border-radius: 0.25rem;
    }

    .cartao-relatorio.azul {
      border-color: #3b82f6;
      background-color: #eff6ff;
    }

    .cartao-relatorio.laranja {
      border-color: #f97316;
      background-color: #fff7ed;
    }

    .cartao-relatorio.vermelho {
      border-color: #ef4444;
      background-color: #fef2f2;
    }

    .titulo-cartao-relatorio {
      font-weight: 600;
      margin-bottom: 0.25rem;
    }

    .cartao-relatorio.azul .titulo-cartao-relatorio {
      color: #1e3a8a;
    }

    .cartao-relatorio.laranja .titulo-cartao-relatorio {
      color: #7c2d12;
    }

    .cartao-relatorio.vermelho .titulo-cartao-relatorio {
      color: #991b1b;
    }

    .texto-cartao-relatorio {
      font-size: 0.875rem;
      margin: 0.125rem 0;
    }

    .cartao-relatorio.azul .texto-cartao-relatorio {
      color: #1e40af;
    }

    .cartao-relatorio.laranja .texto-cartao-relatorio {
      color: #c2410c;
    }

    .cartao-relatorio.vermelho .texto-cartao-relatorio {
      color: #b91c1c;
    }

    .sucesso-relatorio {
      color: #16a34a;
      font-weight: 600;
    }

    /* ===== SECÇÃO POWER BI ===== */
    .secao-powerbi {
      background-color: white;
      padding: 1.5rem;
      border-radius: 0.5rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .placeholder-powerbi {
      background-color: #f3f4f6;
      padding: 2rem;
      border-radius: 0.5rem;
      text-align: center;
    }

    .texto-powerbi {
      color: #4b5563;
      margin-bottom: 0.5rem;
    }

    .subtexto-powerbi {
      font-size: 0.875rem;
      color: #6b7280;
    }

    .entrada-powerbi {
      margin-top: 1rem;
      padding: 0.5rem 1rem;
      border: 1px solid #d1d5db;
      border-radius: 0.25rem;
      width: 100%;
      max-width: 28rem;
      font-family: inherit;
    }

    .entrada-powerbi:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);
      border-color: #2563eb;
    }

    .botao-powerbi {
      margin-top: 0.5rem;
      padding: 0.5rem 1.5rem;
      background-color: #2563eb;
      color: white;
      border-radius: 0.25rem;
      cursor: pointer;
      border: none;
      font-family: inherit;
      transition: background-color 0.2s;
    }

    .botao-powerbi:hover {
      background-color: #1d4ed8;
    }

    .contentor-powerbi {
      margin-top: 1rem;
      min-height: 400px;
    }

    /* ===== SOBREPOSIÇÃO DO SCANNER ===== */
    .sobreposicao-scanner {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.9);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .sobreposicao-scanner.ativo {
      display: flex;
    }

    .conteudo-scanner {
      background: white;
      padding: 1.5rem;
      border-radius: 0.75rem;
      max-width: 600px;
      width: 90%;
      max-height: 90%;
      overflow-y: auto;
    }

    .cabecalho-scanner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .titulo-scanner {
      font-size: 1.25rem;
      font-weight: 700;
      color: #1f2937;
    }

    .botao-fechar {
      padding: 0.5rem 1rem;
      background-color: #ef4444;
      color: white;
      border: none;
      border-radius: 0.25rem;
      cursor: pointer;
      font-family: inherit;
      transition: background-color 0.2s;
    }

    .botao-fechar:hover {
      background-color: #dc2626;
    }

    #leitor {
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
    }

    .dica-scanner {
      font-size: 0.875rem;
      color: #4b5563;
      margin-top: 1rem;
      text-align: center;
    }

    /* ===== SOBREPOSIÇÃO MODAL ===== */
    .sobreposicao-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .conteudo-modal {
      background: white;
      padding: 1.5rem;
      border-radius: 0.75rem;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
      max-width: 400px;
      width: 90%;
    }

    .texto-modal {
      font-size: 1.125rem;
      margin-bottom: 1rem;
      color: #1f2937;
    }

    .acoes-modal {
      display: flex;
      gap: 0.5rem;
      justify-content: flex-end;
    }

    .botao-cancelar {
      padding: 0.5rem 1rem;
      background-color: #d1d5db;
      border: none;
      border-radius: 0.25rem;
      cursor: pointer;
      font-family: inherit;
      transition: background-color 0.2s;
    }

    .botao-cancelar:hover {
      background-color: #9ca3af;
    }

    .botao-confirmar {
      padding: 0.5rem 1rem;
      background-color: #ef4444;
      color: white;
      border: none;
      border-radius: 0.25rem;
      cursor: pointer;
      font-family: inherit;
      transition: background-color 0.2s;
    }

    .botao-confirmar:hover {
      background-color: #dc2626;
    }

    /* ===== MENSAGEM TOAST ===== */
    .mensagem-toast {
      position: fixed;
      top: 1rem;
      right: 1rem;
      padding: 1rem 1.5rem;
      border-radius: 0.5rem;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
      z-index: 9999;
      color: white;
      font-weight: 500;
    }

    .mensagem-toast.sucesso {
      background-color: #16a34a;
    }

    .mensagem-toast.erro {
      background-color: #dc2626;
    }

    /* ===== FILAMENTOS MÚLTIPLOS (IMPRESSÕES) ===== */
    .lista-filamentos-impressao {
      border: 1px solid #d1d5db;
      border-radius: 0.5rem;
      padding: 1rem;
      margin-top: 0.5rem;
      background-color: #f9fafb;
    }

    .item-filamento-impressao {
      display: flex;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid #e5e7eb;
      align-items: flex-end;
    }

    .item-filamento-impressao:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .campo-filamento {
      flex: 2;
    }

    .campo-peso {
      flex: 1;
    }

    .botao-remover-filamento {
      padding: 0.5rem 0.75rem;
      background-color: #ef4444;
      color: white;
      border: none;
      border-radius: 0.25rem;
      cursor: pointer;
      font-size: 0.875rem;
      font-family: inherit;
      transition: background-color 0.2s;
    }

    .botao-remover-filamento:hover {
      background-color: #dc2626;
    }

    .botao-adicionar-filamento {
      width: 100%;
      padding: 0.5rem 1rem;
      background-color: #2563eb;
      color: white;
      border: none;
      border-radius: 0.25rem;
      cursor: pointer;
      font-size: 0.875rem;
      font-weight: 500;
      font-family: inherit;
      transition: background-color 0.2s;
      margin-top: 0.5rem;
    }

    .botao-adicionar-filamento:hover {
      background-color: #1d4ed8;
    }

    /* ===== DESIGN RESPONSIVO ===== */
    @media (max-width: 768px) {
      .barra-lateral {
        width: 100%;
        max-height: 30%;
      }

      .contentor-app {
        flex-direction: column;
      }

      .grelha-estatisticas {
        grid-template-columns: 1fr;
      }

      .grelha-graficos {
        grid-template-columns: 1fr;
      }

      .grelha-relatorios {
        grid-template-columns: 1fr;
      }

      .cabecalho-pagina {
        flex-direction: column;
        align-items: flex-start;
      }

      .item-filamento-impressao {
        flex-direction: column;
        align-items: stretch;
      }

      .campo-filamento,
      .campo-peso {
        width: 100%;
      }
    }

    /* ===== CLASSES UTILITÁRIAS ===== */
    .escondido {
      display: none;
    }