/* Estilo General */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f4f7f6; color: #333; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } /* Contenedor Principal */ .container { width: 100%; max-width: 800px; background-color: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); text-align: center; } /* Títulos */ h1 { color: #1a237e; margin-bottom: 30px; } /* --- INICIO DE LOS NUEVOS ESTILOS PARA EL MENÚ PRINCIPAL --- */ /* --- ESTILOS MEJORADOS PARA UN PANEL ADAPTABLE --- */ /* Definición de variables de color para tema claro y oscuro */ :root { /* Tema Claro (Padrão) */ --cor-fundo: #f4f7f6; --cor-container: #ffffff; --cor-borda: #e0e0e0; --cor-sombra: rgba(0, 0, 0, 0.08); --cor-texto-principal: #1a237e; --cor-texto-card: #3f51b5; --cor-icone: #3f51b5; } /* Tema Oscuro ("Modo Taller") - se puede activar en el futuro con JS */ /* .dark-mode { */ body.dark-mode { /* Para probar, puedes añadir class="dark-mode" a la etiqueta en header.php */ --cor-fundo: #121212; --cor-container: #1e1e1e; --cor-borda: #444; --cor-sombra: rgba(255, 255, 255, 0.1); --cor-texto-principal: #bb86fc; --cor-texto-card: #cfcfcf; --cor-icone: #bb86fc; } /* Aplicamos las variables */ body { background-color: var(--cor-fundo); } .container { background-color: var(--cor-container); box-shadow: 0 4px 15px var(--cor-sombra); } h1 { color: var(--cor-texto-principal); } .menu-principal { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 25px; padding: 20px 0; } .card-menu { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: var(--cor-container); color: var(--cor-texto-card); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 15px; text-decoration: none; font-size: 1rem; font-weight: 600; /* Un poco menos grueso que 'bold' */ text-align: center; aspect-ratio: 1 / 1; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .card-menu:hover { transform: translateY(-5px); box-shadow: 0 10px 25px var(--cor-sombra); border-color: var(--cor-icone); } .icone-menu { color: var(--cor-icone); width: 48px; /* Tamaño fijo para los iconos SVG */ height: 48px; margin-bottom: 15px; } /* --- Estilos para Formularios --- */ .form-orcamento { text-align: left; } fieldset { border: 2px solid #e0e0e0; border-radius: 8px; padding: 20px; margin-bottom: 25px; } legend { font-size: 1.2rem; font-weight: bold; color: #3f51b5; padding: 0 10px; } .form-group { margin-bottom: 15px; } label { display: block; font-weight: bold; margin-bottom: 5px; } input[type="text"], input[type="number"], textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; box-sizing: border-box; /* Importante para que el padding no afecte el ancho */ } textarea { resize: vertical; min-height: 80px; } .tabela-itens { width: 100%; border-collapse: collapse; margin-top: 20px; } .tabela-itens th, .tabela-itens td { border: 1px solid #ddd; padding: 12px; text-align: left; } .tabela-itens th { background-color: #f2f2f2; font-weight: bold; } .total-orcamento { text-align: right; margin-top: 20px; font-size: 1.8rem; font-weight: bold; color: #1a237e; } /* Botón para acciones secundarias */ .btn-secundario { padding: 10px 15px; font-size: 1rem; font-weight: bold; color: #ffffff; background-color: #28a745; /* Verde para "Añadir" */ border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s ease; } .btn-secundario:hover { background-color: #218838; } .btn-remover { background-color: #dc3545; /* Rojo para "Remover" */ } .btn-remover:hover { background-color: #c82333; } /* Botón para acciones principales (grande) */ .btn-grande { display: block; /* Para que ocupe todo el ancho */ width: 100%; padding: 15px; font-size: 1.2rem; font-weight: bold; color: #ffffff; background-color: #3f51b5; /* Color principal del tema */ border: none; border-radius: 8px; cursor: pointer; text-align: center; transition: background-color 0.3s ease, transform 0.2s ease; margin-top: 20px; /* Espacio superior */ } .btn-grande:hover { background-color: #303f9f; /* Un tono más oscuro para el hover */ transform: translateY(-2px); /* Un ligero efecto de elevación */ } /* --- Estilos para Resultados de Búsqueda --- */ #resultados_busca { position: relative; } .resultado-item, .resultado-item-none { padding: 10px; border: 1px solid #ddd; border-top: none; background-color: #fff; } .resultado-item { cursor: pointer; } .resultado-item:hover { background-color: #f0f0f0; } /* --- Estilo para Mensajes de Notificación --- */ .mensagem-sucesso { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; padding: 15px; margin-bottom: 20px; border-radius: 8px; text-align: center; font-size: 1.1rem; } /* --- Estilos para la Tabla de Presupuestos --- */ .tabela-container { width: 100%; overflow-x: auto; /* Para responsividad en pantallas pequeñas */ } .tabela-orcamentos { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.95rem; } .tabela-orcamentos th, .tabela-orcamentos td { border: 1px solid #ddd; padding: 12px 15px; text-align: left; } .tabela-orcamentos th { background-color: #f2f2f2; font-weight: bold; color: #333; } .tabela-orcamentos tbody tr:nth-child(even) { background-color: #f9f9f9; } .tabela-orcamentos tbody tr:hover { background-color: #f1f1f1; } /* Estilos para los botones de acción en la tabla */ .btn-acao { display: inline-block; padding: 8px 12px; font-size: 0.9rem; font-weight: bold; color: #ffffff; background-color: #3f51b5; border-radius: 5px; text-decoration: none; text-align: center; transition: background-color 0.3s; } .btn-acao:hover { background-color: #303f9f; } /* Estilos para el Status */ .status { padding: 5px 10px; border-radius: 15px; color: #fff; font-weight: bold; font-size: 0.8rem; text-transform: uppercase; } .status.pendente { background-color: #ff9800; } .status.aprovado { background-color: #4caf50; } .status.rejeitado { background-color: #f44336; } /* --- Estilos para la Página de Detalles del Presupuesto --- */ .body-detalhe { background-color: #e9e9e9; /* Un fondo gris claro para la página pública */ display: block; /* Sobrescribir flexbox para una página normal */ } .orcamento-detalhe-container { max-width: 800px; margin: 30px auto; padding: 40px; background-color: #fff; border: 1px solid #ddd; box-shadow: 0 0 15px rgba(0,0,0,0.05); } .orcamento-header { display: flex; justify-content: space-between; border-bottom: 2px solid #333; padding-bottom: 20px; margin-bottom: 20px; } .info-empresa { text-align: right; font-size: 0.9rem; color: #555; } .info-empresa p { margin: 2px 0; } .logo-empresa h1 { margin: 0; } .logo-empresa p { margin: 0; color: #666; } .info-principal { text-align: center; margin-bottom: 30px; } .info-principal h2 { margin-bottom: 10px; } .dados-cliente-veiculo { display: flex; justify-content: space-between; background-color: #f9f9f9; padding: 20px; border-radius: 8px; margin-bottom: 30px; } .dados-cliente-veiculo h3 { margin-top: 0; } .tabela-itens-detalhe { width: 100%; border-collapse: collapse; } .tabela-itens-detalhe th, .tabela-itens-detalhe td { border: 1px solid #eee; padding: 12px; } .tabela-itens-detalhe th { background-color: #f2f2f2; } .tabela-itens-detalhe td:first-child, .tabela-itens-detalhe td:nth-child(3) { text-align: center; } .tabela-itens-detalhe td:last-child, .tabela-itens-detalhe td:nth-child(4) { text-align: right; } .orcamento-totais { margin-top: 30px; text-align: right; font-size: 1.1rem; } .orcamento-totais .valor-final { font-size: 1.4rem; font-weight: bold; color: #1a237e; } .area-cliente-acoes { margin-top: 40px; padding: 20px; text-align: center; border: 2px dashed #3f51b5; border-radius: 8px; } .form-acoes { margin-top: 15px; } .btn-acao-cliente { padding: 15px 30px; font-size: 1.2rem; font-weight: bold; color: #fff; border: none; border-radius: 8px; cursor: pointer; margin: 0 10px; } .btn-acao-cliente.aprovar { background-color: #4caf50; } .btn-acao-cliente.aprovar:hover { background-color: #45a049; } .btn-acao-cliente.rejeitar { background-color: #f44336; } .btn-acao-cliente.rejeitar:hover { background-color: #e53935; } /* --- Estilos para IMPRESIÓN --- */ @media print { body, .body-detalhe { background-color: #fff; margin: 0; } .orcamento-detalhe-container { max-width: 100%; margin: 0; padding: 0; border: none; box-shadow: none; } .area-cliente-acoes { display: none; /* Ocultar botones de acción al imprimir */ } /* --- INICIO: MEJORAS DE IMPRESIÓN PARA LA AUDITORÍA --- */ /* 1. Forzar un salto de página antes de la sección de auditoría */ .anexo-impressao { page-break-before: always; padding-top: 40px; /* Añadir un margen superior en la nueva página */ } /* 2. Asegurar que la grilla de imágenes se imprima correctamente */ .anexo-impressao .auditoria-grid { background-color: #fff !important; /* Fondo blanco para ahorrar tinta */ display: grid !important; grid-template-columns: 1fr 1fr !important; /* Crea una grilla de 2 columnas */ gap: 5px !important; align-items: start; } /* 3. Hacer que las marcas de daño sean más visibles en la impresión */ .anexo-impressao .marca-dano { -webkit-print-color-adjust: exact !important; /* Fuerza la impresión de colores en Chrome/Safari */ color-adjust: exact !important; /* Estándar para forzar la impresión de colores */ font-size: 18px !important; /* Reduce el tamaño de la 'X' */ } /* 4. Anular los estilos en línea y hacer que las imágenes se ajusten a la nueva grilla */ .anexo-impressao .vista-carro { width: 100% !important; /* Anula el ancho en línea para que se ajuste a la grilla */ border: none !important; /* Quita el borde para un look más limpio */ box-shadow: none !important; } /* --- INICIO: ESTILOS PARA EL FOOTER DE IMPRESIÓN CON QR --- */ .print-footer { display: block; /* Asegura que el contenedor sea visible en la impresión */ margin-top: 40px; text-align: center; } .qr-code-print { display: inline-block; /* Para centrarlo correctamente */ padding: 15px; border: 1px solid #ccc; border-radius: 8px; } .qr-code-print p { font-size: 0.8rem; color: #555; } } /* --- Estilos Adicionales para Lista de Presupuestos --- */ .versao-badge { font-size: 0.8rem; color: #777; font-weight: normal; } .coluna-acoes { white-space: nowrap; /* Evita que los botones se rompan en dos líneas */ } .btn-acao { margin: 2px; } .btn-acao.ver { background-color: #3f51b5; } .btn-acao.editar { background-color: #ff9800; } .btn-acao.compartilhar { background-color: #009688; } .btn-acao.imprimir { background-color: #607d8b; } .btn-acao.eliminar { background-color: #f44336; } .status.versionado { background-color: #607d8b; } .status.cancelado { background-color: #f44336; } /* --- Estilos para Linha Clicável --- */ .linha-clicavel { cursor: pointer; } /* --- Estilos para Tabela Responsiva (Visão Vertical no Celular) --- */ @media screen and (max-width: 768px) { /* --- Estilos Responsivos para a Tabela de Itens nos Formulários --- */ .tabela-itens thead { display: none; } .tabela-itens tr { display: block; border-bottom: 2px solid #eee; margin-bottom: 10px; padding-bottom: 10px; } .tabela-itens td { display: flex; justify-content: space-between; text-align: right; padding: 8px 0; } .tabela-itens td:last-child { padding-top: 10px; } .tabela-itens td::before { content: attr(data-label); font-weight: bold; text-align: left; margin-right: 15px; } /* --- MEJORAS RESPONSIVAS PARA A LISTA DE ORÇAMENTOS --- */ /* Centraliza os botões de filtro para um look mais limpo */ .area-filtros { justify-content: center; } /* Transforma a coluna de ações em uma lista vertical */ .tabela-orcamentos td.coluna-acoes { display: flex; flex-direction: column; /* Apila los elementos verticalmente */ align-items: flex-end; /* Los alinea a la derecha */ gap: 8px; /* Espacio entre los botones */ justify-content: center; } /* Ajusta o formulário do botão "Cancelar" para o layout vertical */ .tabela-orcamentos td.coluna-acoes form { width: 100%; /* Ocupa toda a largura da coluna de botões */ } /* Garante que todos os botões na coluna de ações tenham a mesma largura */ .tabela-orcamentos td.coluna-acoes .btn-acao, .tabela-orcamentos td.coluna-acoes button { width: 100%; box-sizing: border-box; /* Garante que o padding não afete a largura total */ } .tabela-orcamentos thead { /* Oculta os cabeçalhos da tabela no modo celular */ display: none; } .tabela-orcamentos tr { /* Transforma cada linha em um bloco tipo "card" */ display: block; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .tabela-orcamentos td { /* Organiza as células verticalmente */ display: flex; justify-content: space-between; /* Alinha o label e o valor */ text-align: right; /* Alinha o texto do valor à direita */ padding: 12px; border: none; border-bottom: 1px solid #eee; } .tabela-orcamentos td:last-child { border-bottom: none; /* Remove a borda do último item (Ações) */ } .tabela-orcamentos td::before { /* Adiciona o label (que pegamos do atributo data-label) à esquerda */ content: attr(data-label); font-weight: bold; text-align: left; margin-right: 15px; } .coluna-acoes { justify-content: center; /* Centraliza os botões de ação */ } .coluna-acoes::before { display: none; /* Oculta o label "Ações" que não é necessário */ } } /* --- Estilos para la Barra de Búsqueda --- */ .area-busca { margin-bottom: 25px; } .form-busca { display: flex; width: 100%; max-width: 600px; margin: 0 auto; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; /* Para que los bordes redondeados se apliquen bien */ } .form-busca input[type="text"] { flex-grow: 1; /* Hace que el campo de texto ocupe todo el espacio disponible */ border: none; padding: 15px; font-size: 1rem; } .form-busca input[type="text"]:focus { outline: none; /* Quita el borde azul al hacer foco */ } .btn-busca { padding: 0 25px; border: none; background-color: #3f51b5; color: white; font-size: 1rem; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; } .btn-busca:hover { background-color: #303f9f; } /* --- Estilos para Botão Flutuante (Home) --- */ .btn-flutuante-home { position: fixed; /* Fica fixo na tela */ bottom: 25px; right: 25px; width: 60px; height: 60px; background-color: #3f51b5; color: white; border-radius: 50%; /* Deixa o botão redondo */ display: flex; align-items: center; justify-content: center; font-size: 2rem; /* Tamanho do ícone da casa */ text-decoration: none; box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: background-color 0.3s ease, transform 0.2s ease; } .btn-flutuante-home:hover { background-color: #303f9f; transform: scale(1.1); /* Efeito de zoom ao passar o mouse */ } /* --- Estilos para Botões de Filtro de Status --- */ .area-filtros { display: flex; justify-content: center; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; /* Para que os botões se ajustem em telas pequenas */ } .btn-filtro { padding: 10px 20px; border: 1px solid #ddd; background-color: #f9f9f9; color: #555; border-radius: 20px; text-decoration: none; font-weight: bold; font-size: 0.9rem; transition: all 0.3s ease; } .btn-filtro:hover { background-color: #e9e9e9; border-color: #ccc; } .btn-filtro.ativo { background-color: #3f51b5; color: white; border-color: #3f51b5; } /* --- Estilos para Página de Confirmação do Cliente --- */ .confirmacao-cliente { text-align: center; padding: 40px 20px; border-radius: 8px; } .confirmacao-cliente.sucesso { background-color: #e8f5e9; /* Verde claro */ border: 2px solid #4caf50; } .confirmacao-cliente.erro { background-color: #ffebee; /* Rojo claro */ border: 2px solid #f44336; } .confirmacao-cliente h1 { margin-top: 0; color: #333; } .confirmacao-cliente p { font-size: 1.2rem; line-height: 1.6; } .btn-voltar { display: inline-block; margin-top: 20px; padding: 12px 25px; background-color: #6c757d; color: white; text-decoration: none; font-weight: bold; border-radius: 6px; transition: background-color 0.3s ease; } .btn-voltar:hover { background-color: #5a6268; } .status.rejeitado { background-color: #757575; color: #fff; } /* Un color gris para 'Rejeitado' */ .status.a-fazer { background-color: #0288d1; } /* Azul para 'A Fazer' */ .status.em-andamento { background-color: #f57c00; } /* Naranja para 'Em Andamento' */ .status.finalizada { background-color: #388e3c; } /* Verde oscuro para 'Finalizada' */ /* --- Estilos para a Página de Gestão de OS --- */ .os-gerenciar-container { display: flex; gap: 30px; flex-wrap: wrap; } .coluna-info { flex: 1; min-width: 300px; } .coluna-itens { flex: 1; min-width: 300px; } .coluna-info hr { margin: 20px 0; border: 0; border-top: 1px solid #eee; } .area-acoes-mecanico { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; } .btn-acao-mecanico { padding: 12px 20px; font-size: 1rem; font-weight: bold; color: #fff; border: none; border-radius: 6px; cursor: pointer; text-decoration: none; text-align: center; } .btn-acao-mecanico.iniciar { background-color: #0288d1; } .btn-acao-mecanico.finalizar { background-color: #388e3c; } .btn-acao-mecanico.salvar-obs { background-color: #6c757d; } .status-servico-container { background-color: #f0f8ff; /* AliceBlue, un azul muy claro */ border: 2px solid #b0e0e6; /* PowderBlue, un borde suave */ border-radius: 8px; padding: 20px; margin-bottom: 30px; text-align: center; } .status-servico-container h3 { margin-top: 0; margin-bottom: 15px; color: #1a237e; } .status-servico-container .status { font-size: 1.2rem; /* Un poco más grande para destacar */ } /* --- Estilos para a Página de Estoque --- */ .menu-acoes-estoque { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; } .menu-acoes-estoque .btn-acao { background-color: #0275d8; font-size: 1rem; padding: 12px 20px; } .status.recebida { background-color: #5cb85c; } /* Estilo para campos de seleção (dropdown) */ .input-select { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; background-color: white; } .area-acoes-admin { margin-top: 30px; padding: 20px; background-color: #f5f5f5; border-radius: 8px; text-align: center; } /* --- Estilos para o Modal de Novo Produto --- */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: flex-start; /* Alinea el modal en la parte superior */ overflow-y: auto; /* Permite el desplazamiento vertical si el contenido es muy grande */ padding: 20px 0; /* Añade un poco de espacio superior e inferior */ z-index: 1000; } .modal-content { background-color: white; padding: 30px; border-radius: 8px; width: 90%; max-width: 500px; } .modal-content h2 { margin-top: 0; } .modal-content input[readonly] { background-color: #e9ecef; cursor: not-allowed; } .modal-acoes { margin-top: 20px; text-align: right; } /* --- Estilo para o botão de cadastrar novo item --- */ .btn-cadastrar-novo { background: none; border: none; color: #3f51b5; font-weight: bold; cursor: pointer; display: inline; padding: 5px; margin-left: 10px; } .btn-cadastrar-novo:hover { text-decoration: underline; } .status.cancelada { background-color: #f44336; } /* --- Estilos para o Histórico de Estoque --- */ .alteracao-positiva { color: #388e3c; /* Verde */ font-weight: bold; } .alteracao-negativa { color: #f44336; /* Rojo */ font-weight: bold; } /* --- Estilos para o Painel Financeiro --- */ .resumo-financeiro { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 40px; } .card-financeiro { background-color: #f9f9f9; padding: 25px; border-radius: 8px; text-align: center; border-left: 5px solid; } .card-financeiro h4 { margin-top: 0; font-size: 1.1rem; color: #555; } .card-financeiro p { font-size: 2rem; font-weight: bold; margin-bottom: 0; } .card-financeiro.receita { border-color: #4caf50; color: #4caf50; } .card-financeiro.despesa { border-color: #f44336; color: #f44336; } .card-financeiro.lucro { border-color: #3f51b5; color: #3f51b5; } /* Status para OS Paga */ .status.paga { background-color: #2e7d32; } /* --- Estilos para o Filtro do Painel Financeiro --- */ .area-filtros-financeiro { background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 30px; display: flex; justify-content: center; } .form-filtro { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .form-group-filtro { display: flex; align-items: center; gap: 8px; } .form-group-filtro label { font-weight: bold; } /* --- Estilos para o Detalhe do Relatório Financeiro --- */ #relatorio_detalhe_container { margin-top: 30px; padding: 25px; background-color: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef; } .btn-fechar-relatorio { display: block; margin: 20px auto 0 auto; padding: 10px 25px; background-color: #6c757d; color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; } .btn-fechar-relatorio:hover { background-color: #5a6268; } /* Adicionar cursor de ponteiro nas cards clicáveis */ .card-financeiro[data-relatorio] { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card-financeiro[data-relatorio]:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); } /* --- Estilos para mejorar los Radio Buttons --- */ .radio-group-container { display: flex; /* Pone las opciones una al lado de la otra */ gap: 25px; /* Espacio entre las opciones */ margin-top: 10px; } .radio-option { display: flex; /* Pone el círculo y el texto en la misma línea */ align-items: center; /* Centra verticalmente el círculo con el texto */ cursor: pointer; } .radio-option label { margin-bottom: 0; /* Anula el margen que tenían las etiquetas por defecto */ font-weight: normal; /* Opcional: hace el texto menos pesado */ } .radio-option input[type="radio"] { margin-right: 8px; /* Espacio entre el círculo y el texto */ } /* --- Estilos para Botão Flutuante (Perfil/Conta) --- */ .btn-flutuante-perfil { position: fixed; top: 25px; right: 25px; width: 50px; height: 50px; background-color: #6c757d; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; text-decoration: none; box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: all 0.3s ease; z-index: 999; } .btn-flutuante-perfil:hover { background-color: #5a6268; transform: scale(1.1); } /* --- Estilos para o Rodapé do Orçamento com Logotipo --- */ .rodape-orcamento { display: flex; /* Activa Flexbox */ justify-content: space-between; /* Empuja los ítems a los extremos */ align-items: flex-end; /* Alinea los ítems en la parte de abajo */ margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; } .logo-rodape img { max-width: 150px; /* Ajusta el tamaño máximo del logo */ height: auto; } .orcamento-totais { margin-top: 0; /* Quitamos el margen que tenía antes */ } /* --- ESTILOS RESPONSIVOS PARA A PÁGINA DE DETALHES --- */ @media screen and (max-width: 768px) { /* Ajuste para o cabeçalho principal */ .orcamento-header { flex-direction: column; /* Apila los elementos verticalmente */ gap: 15px; align-items: flex-start; /* Alinea todo a la izquierda */ } .orcamento-header .info-empresa { text-align: left; /* Corrige la alineación del texto */ } /* Ajuste para a seção de dados do cliente/veículo */ .dados-cliente-veiculo { flex-direction: column; /* También se apila verticalmente */ gap: 15px; } /* Transformação da tabela de itens em "cards" */ .tabela-itens-detalhe thead { display: none; /* Oculta los encabezados de la tabla */ } .tabela-itens-detalhe tr { display: block; border: 1px solid #eee; border-radius: 8px; margin-bottom: 10px; padding: 10px; } .tabela-itens-detalhe td { display: flex; justify-content: space-between; text-align: right; padding: 8px 0; border-bottom: 1px solid #f2f2f2; } .tabela-itens-detalhe td:last-child { border-bottom: none; } .tabela-itens-detalhe td::before { content: attr(data-label); /* Mostra a etiqueta do data-label */ font-weight: bold; text-align: left; margin-right: 15px; } /* Ajuste para o rodapé com logo e totais */ .rodape-orcamento { flex-direction: column; align-items: center; /* Centraliza tudo no celular */ gap: 20px; } .rodape-orcamento .orcamento-totais { width: 100%; /* Ocupa toda a largura */ text-align: right; } } /* --- ESTILOS PARA O NOVO PAINEL DE ESTOQUE --- */ /* Contenedor para acciones y búsqueda */ .acoes-e-busca-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; } .menu-acoes-estoque { gap: 10px; } .area-busca-estoque .form-busca { max-width: 350px; } /* A grade que contém os cards */ .grid-produtos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } /* O estilo de cada card de produto */ .card-produto { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; flex-direction: column; transition: box-shadow 0.3s ease, transform 0.3s ease; } .card-produto:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.1); } .card-produto-header { padding: 15px; border-bottom: 1px solid #eee; } .card-produto-header h3 { margin: 0; font-size: 1.2rem; color: #3f51b5; } .card-produto-body { padding: 15px; flex-grow: 1; /* Faz o corpo do card crescer */ } .card-produto-body p { margin: 0 0 10px 0; } .card-produto-footer { padding: 15px; background-color: #f9f9f9; border-top: 1px solid #eee; display: flex; gap: 10px; } /* Cores para o status do estoque */ .status-estoque { float: right; margin-top: -24px; padding: 5px 12px; border-radius: 15px; color: white; font-size: 0.8rem; font-weight: bold; } .status-estoque.alto { background-color: #4caf50; /* Verde */ } .status-estoque.baixo { background-color: #ff9800; /* Naranja */ } .status-estoque.zerado { background-color: #f44336; /* Rojo */ } /* --- Estilos para os Botões de Ordenação --- */ .area-ordenar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 10px; background-color: #f8f9fa; border-radius: 8px; } .area-ordenar span { font-weight: bold; color: #555; } .btn-ordenar { padding: 8px 15px; background-color: #fff; border: 1px solid #ddd; border-radius: 20px; color: #333; text-decoration: none; font-size: 0.9rem; transition: all 0.2s ease; } .btn-ordenar.ativo, .btn-ordenar:hover { background-color: #3f51b5; color: white; border-color: #3f51b5; } .status.cotação { background-color: #0275d8; } .input-tabela { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } /* --- Estilos para os campos na tabela de edição de compra --- */ .campo-tabela-vertical { padding-top: 10px !important; padding-bottom: 10px !important; } .campo-tabela-vertical label { display: block; /* Hace que la etiqueta ocupe su propia línea */ font-size: 0.85rem; font-weight: bold; margin-bottom: 5px; color: #555; text-align: left; /* Alinea la etiqueta a la izquierda */ } /* --- Estilo para o Botão Flutuante da Lixeira --- */ .btn-flutuante-lixeira { position: fixed; bottom: 95px; /* Posição um pouco acima do botão de 'home' */ right: 25px; width: 50px; height: 50px; background-color: #757575; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; text-decoration: none; box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: all 0.3s ease; z-index: 998; } .btn-flutuante-lixeira:hover { background-color: #616161; transform: scale(1.1); } /* --- ESTILOS PARA A ALERTA DE PREÇO NEGATIVO --- */ /* Borda vermelha para o card inteiro */ .card-produto.alerta-preco { border-color: #f44336; /* Rojo */ border-width: 2px; } /* Cor vermelha para o texto do preço de venda */ .card-produto .texto-alerta-preco { color: #f44336; /* Rojo */ font-weight: bold; } /* Opcional: fazer o título também ficar vermelho para mais destaque */ .card-produto.alerta-preco .card-produto-header h3 { color: #f44336; } .status.custo { background-color: #f0ad4e; } .status.venda { background-color: #5bc0de; } /* --- Estilos para a Seção de Auditoria do Veículo --- */ .auditoria-container { margin-top: 30px; margin-bottom: 30px; padding: 20px; border: 1px solid #eee; border-radius: 8px; background-color: #fafafa; } .auditoria-container h3 { margin-top: 0; text-align: center; color: #333; } .auditoria-diagrama-container svg { width: 100%; height: auto; max-width: 600px; display: block; margin: 15px auto; } .auditoria-notas { margin-top: 15px; padding: 15px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; } .auditoria-notas p { margin-top: 5px; margin-bottom: 0; white-space: pre-wrap; /* Respeta los saltos de línea */ } /* --- ESTILOS PARA PÁGINAS PÚBLICAS (INDEX E LOGIN) --- */ .body-publico, .body-login { display: flex; justify-content: center; align-items: flex-start; /* Alinea al principio */ min-height: 100vh; background-color: #f4f7f6; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .landing-container, .login-container { width: 100%; max-width: 800px; padding: 30px 40px; background-color: #ffffff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); margin-top: 40px; margin-bottom: 40px; } .landing-header { text-align: center; border-bottom: 1px solid #eee; padding-bottom: 25px; margin-bottom: 25px; } .landing-logo { max-width: 150px; margin-bottom: 15px; } .landing-header h1 { font-size: 2.8rem; color: #1a237e; margin: 0; } .slogan { font-size: 1.1rem; color: #555; margin-top: 10px; } .landing-section { margin-bottom: 30px; text-align: center; } .landing-section h2 { color: #333; border-bottom: 2px solid #3f51b5; display: inline-block; padding-bottom: 5px; margin-bottom: 20px; } .landing-section p { font-size: 1.1rem; color: #666; line-height: 1.6; } .btn-whatsapp { display: inline-flex; align-items: center; justify-content: center; background-color: #25D366; color: white; padding: 15px 30px; border-radius: 30px; text-decoration: none; font-weight: bold; font-size: 1.1rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn-whatsapp:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); } .map-container { border-radius: 8px; overflow: hidden; margin-top: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .map-container iframe { width: 100%; height: 400px; border: 0; } .landing-footer { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; } /* Ajustes para el Login */ .login-container h1 { font-size: 2.5rem; color: #1a237e; margin-bottom: 10px; } .subtitulo-login { color: #666; margin-bottom: 30px; } .form-login .form-group { text-align: left; margin-bottom: 20px; } .form-login label { font-weight: bold; margin-bottom: 8px; display: block; } .form-login input[type="text"], .form-login input[type="password"] { width: 100%; padding: 15px; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; box-sizing: border-box; } .mensagem-erro { color: #c0392b; background-color: #f9e3e1; border: 1px solid #c0392b; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; } .login-footer { margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px; } .login-footer a { color: #6c757d; text-decoration: none; font-weight: bold; } .login-footer a:hover { text-decoration: underline; } /* Reutilizamos el estilo de los inputs de otros formularios */ .form-login input[type="text"], .form-login input[type="password"] { width: 100%; padding: 15px; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; box-sizing: border-box; } .mensagem-erro { color: #c0392b; background-color: #f9e3e1; border: 1px solid #c0392b; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; } .login-footer { margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px; } .login-footer a { color: #6c757d; text-decoration: none; font-weight: bold; } .login-footer a:hover { text-decoration: underline; } /* --- Estilos para Botão Flutuante (Logout) --- */ .btn-flutuante-logout { position: fixed; /* Lo posicionamos 65px más abajo que el botón de perfil (top: 25px + 50px de alto + 10px de espacio) */ top: 85px; right: 25px; width: 50px; height: 50px; background-color: #d9534f; /* Un color rojo para indicar 'salida' */ color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; text-decoration: none; box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: all 0.3s ease; z-index: 998; /* Un índice un poco menor que el de perfil para que no se superponga si hay efectos */ } .btn-flutuante-logout:hover { background-color: #c9302c; transform: scale(1.1); } /* --- Estilos para o Header e Footer Público --- */ .public-header { width: 100%; background-color: #ffffff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 15px 30px; position: fixed; /* Fica fixo no topo */ top: 0; left: 0; z-index: 1000; box-sizing: border-box; } .header-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .header-logo a { font-size: 1.5rem; font-weight: bold; color: #1a237e; text-decoration: none; } .btn-login { background-color: #3f51b5; color: white; padding: 10px 20px; border-radius: 6px; text-decoration: none; font-weight: bold; transition: background-color 0.3s ease; } .btn-login:hover { background-color: #303f9f; } /* Ajuste no container principal para não ficar escondido atrás do header */ .landing-container { margin-top: 100px; /* Aumenta o espaço no topo */ } .public-footer { width: 100%; text-align: center; padding: 20px; margin-top: 30px; color: #6c757d; font-size: 0.9rem; } .public-footer p { margin: 5px 0; } .link-armaweb { color: #FFD700; /* Dorado */ font-weight: bold; text-decoration: none; } .link-armaweb:hover { text-decoration: underline; } /* --- CORRECCIÓN RESPONSIVA PARA O HEADER PÚBLICO --- */ @media screen and (max-width: 480px) { /* Reducimos el espaciado general del header */ .public-header { padding: 10px 15px; } /* Hacemos el nombre de la empresa un poco más pequeño */ .header-logo a { font-size: 1.2rem; } /* Hacemos el botón de login más compacto */ .btn-login { padding: 8px 12px; font-size: 0.85rem; } /* Ajustamos el margen superior del contenido principal */ .landing-container { margin-top: 80px; } } .permissoes-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; } .permissao-item { display: flex; align-items: center; background-color: #f9f9f9; padding: 10px; border-radius: 6px; } .permissao-item input { margin-right: 10px; } /* --- Estilos para o Modal de Auditoria --- */ #modal_auditoria .modal-content { max-width: 95%; /* Usamos un ancho porcentual para que se adapte */ width: 500px; /* Un ancho fijo máximo para pantallas grandes */ } /* --- Estilos para a Seção de Auditoria do Veículo (Dentro do Modal y en Detalhe) --- */ .auditoria-container { margin-top: 30px; margin-bottom: 30px; padding: 20px; border: 1px solid #eee; border-radius: 8px; background-color: #fafafa; } .auditoria-container h3 { margin-top: 0; text-align: center; color: #333; } .auditoria-diagrama-container svg { width: 100%; height: auto; max-width: 450px; /* Ancho máximo del diagrama */ display: block; margin: 5px auto; cursor: crosshair; /* Cambia el cursor para indicar que se puede hacer clic */ } .auditoria-notas { margin-top: 15px; padding: 15px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; } .auditoria-notas p { margin-top: 5px; margin-bottom: 0; white-space: pre-wrap; /* Respeta los saltos de línea de las notas */ } /* --- Estilos para Botones de Acción del Mecánico (en Modales) --- */ .btn-acao-mecanico { padding: 12px 20px; font-size: 1rem; font-weight: bold; color: #fff; border: none; border-radius: 6px; cursor: pointer; text-decoration: none; text-align: center; transition: opacity 0.2s ease; } .btn-acao-mecanico:hover { opacity: 0.9; } /* Color para "Salvar" o "Finalizar" */ .btn-acao-mecanico.finalizar { background-color: #388e3c; /* Verde */ } /* Color para "Cancelar" o "Eliminar" */ .btn-acao-mecanico.eliminar { background-color: #d9534f; /* Rojo */ } /* Color neutro para acciones secundarias como "Limpar Marcas" */ .btn-acao-mecanico { background-color: #777; /* Gris */ } /* --- Estilos para la nueva Auditoría de Vehículos con Imágenes --- */ .auditoria-grid { display: flex; flex-direction: column; gap: 15px; justify-items: center; align-items: center; padding: 10px; background-color: #f0f2f5; border-radius: 8px; } .vista-carro { position: relative; /* Clave para posicionar las marcas */ cursor: crosshair; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; } .vista-carro img { display: block; width: 100%; height: auto; } /* El contenedor donde se añadirán las marcas de daño */ .marcas-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* Estilo para la marca de daño (una "X" roja) */ .marca-dano { position: absolute; width: 20px; height: 20px; color: red; font-size: 24px; font-weight: bold; line-height: 20px; text-align: center; transform: translate(-50%, -50%); /* Centra la X en el punto del clic */ pointer-events: none; /* Evita que la marca intercepte clics futuros */ user-select: none; /* Evita que el texto de la marca sea seleccionable */ } /* Ocultar el footer de impresión por defecto en la pantalla */ .print-footer { display: none; } /* --- Estilos para o Histórico de Observações da OS --- */ .historico-observacoes { max-height: 300px; overflow-y: auto; border: 1px solid #eee; border-radius: 6px; padding: 10px; margin-bottom: 20px; background-color: #fdfdfd; } .obs-item { border-bottom: 1px solid #f0f0f0; padding-bottom: 10px; margin-bottom: 10px; } .obs-item:last-child { border-bottom: none; margin-bottom: 0; } .obs-meta { margin: 0 0 5px 0; font-size: 0.85rem; color: #555; } .obs-texto { margin: 0; white-space: pre-wrap; } /* --- Estilos para Paginación y Nuevos Filtros --- */ .area-busca-e-filtros { background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 30px; } .area-busca-e-filtros .form-busca { margin-bottom: 15px; } .paginacao { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 30px; } .paginacao a { display: inline-block; padding: 8px 14px; border: 1px solid #ddd; background-color: #fff; color: #3f51b5; text-decoration: none; border-radius: 6px; font-weight: bold; transition: all 0.2s ease; } .paginacao a:hover { background-color: #f0f2f5; } .paginacao a.ativo { background-color: #3f51b5; color: white; border-color: #3f51b5; }