/* ========================================================= INSUMOS E FICHAS TÉCNICAS - ANDREIA PESSOA CONFEITARIA Estilos independentes. A página usa .insumos-pagina e os únicos estilos globais pertencem aos modais deste módulo. ========================================================= */ .insumos-pagina { --ins-vinho: #5c2d27; --ins-vinho-forte: #45211d; --ins-texto: #63433f; --ins-suave: #9b7e7a; --ins-rosa: #df6494; --ins-rosa-forte: #c94e7d; --ins-rosa-claro: #fff0f6; --ins-verde: #339a68; --ins-verde-claro: #eaf8f0; --ins-laranja: #e89a16; --ins-laranja-claro: #fff4de; --ins-lilas: #9552d6; --ins-lilas-claro: #f4eaff; --ins-vermelho: #cf4450; --ins-vermelho-claro: #fff0f1; --ins-borda: #edd8dd; --ins-card: #fffdfd; width: 100%; max-width: 1680px; margin: 0 auto; padding: 28px; color: var(--ins-texto); font-family: "Poppins", sans-serif; font-size: 15px; line-height: 1.5; } /* * O modal da ficha técnica é inserido diretamente no , fora de * .insumos-pagina. Por isso ele precisa receber as mesmas variáveis de * cores; sem este bloco, botões, ícones e fundos perdiam o estilo. */ .insumo-modal, .ficha-produto-integracao { --ins-vinho: #5c2d27; --ins-vinho-forte: #45211d; --ins-texto: #63433f; --ins-suave: #9b7e7a; --ins-rosa: #df6494; --ins-rosa-forte: #c94e7d; --ins-rosa-claro: #fff0f6; --ins-verde: #339a68; --ins-verde-claro: #eaf8f0; --ins-laranja: #e89a16; --ins-laranja-claro: #fff4de; --ins-lilas: #9552d6; --ins-lilas-claro: #f4eaff; --ins-vermelho: #cf4450; --ins-vermelho-claro: #fff0f1; --ins-borda: #edd8dd; --ins-card: #fffdfd; } .insumos-pagina *, .insumos-pagina *::before, .insumos-pagina *::after, .insumo-modal *, .insumo-modal *::before, .insumo-modal *::after, .ficha-produto-integracao * { box-sizing: border-box; } .insumos-pagina h1, .insumos-pagina h2, .insumos-pagina p, .insumo-modal h2, .insumo-modal p { margin: 0; } .insumos-pagina button, .insumos-pagina input, .insumos-pagina select, .insumo-modal button, .insumo-modal input, .insumo-modal select { font: inherit; } .insumos-cabecalho, .insumos-painel { border: 1px solid var(--ins-borda); border-radius: 24px; background: rgba(255, 253, 253, 0.97); box-shadow: 0 14px 34px rgba(91, 45, 39, 0.055); } .insumos-cabecalho { position: relative; display: flex; min-height: 210px; align-items: center; justify-content: space-between; gap: 30px; padding: 34px 38px; overflow: hidden; } .insumos-cabecalho::after { content: ""; position: absolute; right: -75px; bottom: -110px; width: 270px; height: 270px; border-radius: 50%; background: var(--ins-rosa-claro); } .insumos-cabecalho > * { position: relative; z-index: 1; } .insumos-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 9px; color: var(--ins-rosa-forte); font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .insumos-cabecalho h1 { color: var(--ins-vinho-forte); font-family: "Playfair Display", serif; font-size: clamp(42px, 4vw, 60px); font-weight: 700; line-height: 1.05; } .insumos-cabecalho p { max-width: 760px; margin-top: 9px; color: #785b56; font-size: 15px; } .insumos-cabecalho-acoes { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; } .btn-insumo-principal, .btn-insumo-secundario, .btn-insumo-limpar, .btn-ler-nota { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 14px; padding: 11px 18px; cursor: pointer; font-weight: 600; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .btn-insumo-principal, .btn-ler-nota { color: #fff; background: var(--ins-rosa); box-shadow: 0 12px 24px rgba(223, 100, 148, 0.2); } .btn-insumo-secundario, .btn-insumo-limpar { color: var(--ins-vinho); border-color: var(--ins-borda); background: #fff; } .btn-insumo-principal:hover, .btn-ler-nota:hover { color: #fff; background: var(--ins-rosa-forte); transform: translateY(-1px); } .btn-insumo-secundario:hover, .btn-insumo-limpar:hover { color: var(--ins-vinho); background: #fff8fa; transform: translateY(-1px); } .btn-ler-nota:disabled { cursor: not-allowed; opacity: 0.55; transform: none; box-shadow: none; } .btn-ler-nota.carregando i { animation: insumo-girar 1s linear infinite; } @keyframes insumo-girar { to { transform: rotate(360deg); } } .insumos-aviso { position: fixed; z-index: 1200; top: 24px; right: 28px; max-width: min(440px, calc(100vw - 40px)); padding: 14px 18px; border: 1px solid var(--ins-borda); border-radius: 14px; color: var(--ins-vinho); background: #fff; box-shadow: 0 18px 38px rgba(73, 35, 30, 0.18); font-weight: 600; } .insumos-aviso.sucesso { color: #277b50; border-color: #bce6ce; background: #effaf4; } .insumos-aviso.erro { color: #a8323c; border-color: #efbbc0; background: #fff3f4; } .insumos-aviso.atencao { color: #8d640c; border-color: #f0cf89; background: #fff9e9; } .insumos-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } .insumo-resumo-card { position: relative; display: flex; min-width: 0; min-height: 145px; align-items: center; gap: 14px; padding: 21px; overflow: hidden; border: 1px solid var(--ins-borda); border-radius: 21px; background: var(--ins-card); } .insumo-resumo-card::after { content: ""; position: absolute; right: -35px; bottom: -47px; width: 110px; height: 110px; border-radius: 50%; opacity: 0.75; } .insumo-resumo-card > span { position: relative; z-index: 1; display: inline-flex; flex: 0 0 auto; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 14px; font-size: 19px; } .insumo-resumo-card > div { position: relative; z-index: 1; min-width: 0; } .insumo-resumo-card small, .insumo-resumo-card strong, .insumo-resumo-card p { display: block; } .insumo-resumo-card small { color: var(--ins-suave); font-size: 11px; } .insumo-resumo-card strong { margin: 3px 0; overflow: hidden; color: var(--ins-vinho-forte); font-family: "Playfair Display", serif; font-size: clamp(23px, 2vw, 31px); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .insumo-resumo-card p { color: var(--ins-suave); font-size: 9px; } .insumo-resumo-card.rosa > span, .insumo-resumo-card.rosa::after { color: var(--ins-rosa); background: var(--ins-rosa-claro); } .insumo-resumo-card.verde > span, .insumo-resumo-card.verde::after { color: var(--ins-verde); background: var(--ins-verde-claro); } .insumo-resumo-card.laranja > span, .insumo-resumo-card.laranja::after { color: var(--ins-laranja); background: var(--ins-laranja-claro); } .insumo-resumo-card.lilas > span, .insumo-resumo-card.lilas::after { color: var(--ins-lilas); background: var(--ins-lilas-claro); } .insumos-painel { margin-top: 22px; padding: 25px; } .insumos-secao-topo { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; } .insumos-secao-topo > div { display: flex; align-items: center; gap: 13px; min-width: 0; } .insumos-secao-topo h2 { color: var(--ins-vinho-forte); font-family: "Playfair Display", serif; font-size: 25px; font-weight: 700; line-height: 1.15; } .insumos-secao-topo p { margin-top: 3px; color: var(--ins-suave); font-size: 12px; } .insumos-secao-icone { display: inline-flex; flex: 0 0 auto; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 14px; font-size: 18px; } .insumos-secao-icone.rosa { color: var(--ins-rosa); background: var(--ins-rosa-claro); } .insumos-secao-icone.verde { color: var(--ins-verde); background: var(--ins-verde-claro); } .insumos-secao-icone.laranja { color: var(--ins-laranja); background: var(--ins-laranja-claro); } .insumos-selo { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; color: var(--ins-rosa-forte); background: var(--ins-rosa-claro); font-size: 10px; font-weight: 600; white-space: nowrap; } .insumos-selo.verde { color: var(--ins-verde); background: var(--ins-verde-claro); } .nota-fluxo-grid { display: grid; grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.8fr); gap: 22px; } .nota-envio-coluna { min-width: 0; padding: 18px; border: 1px solid var(--ins-borda); border-radius: 19px; background: #fffafa; } .nota-dropzone { display: flex; min-height: 280px; align-items: center; justify-content: center; flex-direction: column; padding: 24px; border: 2px dashed #e9b9c9; border-radius: 18px; cursor: pointer; text-align: center; background: #fff; transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; } .nota-dropzone:hover, .nota-dropzone.arrastando { border-color: var(--ins-rosa); background: var(--ins-rosa-claro); transform: translateY(-2px); } .nota-dropzone input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .nota-dropzone-icone { display: inline-flex; width: 66px; height: 66px; align-items: center; justify-content: center; margin-bottom: 14px; border-radius: 19px; color: var(--ins-rosa); background: var(--ins-rosa-claro); font-size: 27px; } .nota-dropzone strong { color: var(--ins-vinho); font-size: 13px; } .nota-dropzone small { max-width: 260px; margin-top: 5px; color: var(--ins-suave); font-size: 10px; } .nota-escolher { display: inline-flex; margin-top: 16px; border-radius: 999px; padding: 8px 13px; color: var(--ins-rosa-forte); background: var(--ins-rosa-claro); font-size: 10px; font-weight: 600; } .nota-preview { overflow: hidden; border: 1px solid var(--ins-borda); border-radius: 17px; background: #fff; } .nota-preview img { display: block; width: 100%; max-height: 330px; object-fit: contain; background: #ede9e8; } .nota-preview > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; } .nota-preview strong { overflow: hidden; color: var(--ins-vinho); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .nota-preview button { border: 0; color: var(--ins-rosa-forte); background: none; cursor: pointer; font-size: 10px; font-weight: 600; } .btn-ler-nota { width: 100%; margin-top: 12px; } .nota-progresso { margin-top: 14px; padding: 13px; border-radius: 14px; background: #fff; } .nota-progresso > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ins-suave); font-size: 10px; } .nota-progresso > div:first-child strong { color: var(--ins-vinho); } .nota-progresso-trilho { height: 7px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: #eee4e7; } .nota-progresso-trilho span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ins-rosa), #9f59d9); transition: width 0.2s ease; } .nota-privacidade { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px; padding: 11px; border-radius: 13px; color: #497b62; background: var(--ins-verde-claro); } .nota-privacidade i { flex: 0 0 auto; } .nota-privacidade p { font-size: 9px; } .nota-conferencia-coluna { min-width: 0; } .nota-conferencia-vazia { display: flex; min-height: 410px; align-items: center; justify-content: center; flex-direction: column; padding: 30px; border: 1px dashed var(--ins-borda); border-radius: 19px; color: var(--ins-suave); text-align: center; background: #fffdfd; } .nota-conferencia-vazia i { margin-bottom: 12px; color: #d79ab0; font-size: 42px; } .nota-conferencia-vazia strong { color: var(--ins-vinho); font-size: 14px; } .nota-conferencia-vazia p { max-width: 360px; margin-top: 5px; font-size: 10px; } .nota-dados-grid, .ficha-dados-grid { display: grid; grid-template-columns: 1.6fr 0.8fr 0.8fr; gap: 13px; } .insumo-campo { min-width: 0; } .insumo-campo label { display: block; margin-bottom: 6px; color: var(--ins-vinho); font-size: 10px; font-weight: 600; } .insumo-campo > small { display: block; margin-top: 4px; color: var(--ins-suave); font-size: 8px; } .insumo-campo input, .insumo-campo select, .insumo-input-moeda, .insumo-input-sufixo, .insumo-pesquisa-input { width: 100%; min-height: 46px; border: 1px solid var(--ins-borda); border-radius: 13px; outline: none; color: var(--ins-texto); background: #fff; } .insumo-campo > input, .insumo-campo > select { padding: 0 13px; } .insumo-campo input:focus, .insumo-campo select:focus, .insumo-input-moeda:focus-within, .insumo-input-sufixo:focus-within, .insumo-pesquisa-input:focus-within { border-color: #e38bab; box-shadow: 0 0 0 3px rgba(223, 100, 148, 0.09); } .insumo-input-moeda, .insumo-input-sufixo, .insumo-pesquisa-input { display: flex; align-items: center; overflow: hidden; } .insumo-input-moeda span, .insumo-input-sufixo span { display: inline-flex; min-height: 44px; align-items: center; padding: 0 12px; color: var(--ins-suave); border-right: 1px solid #f0e3e6; background: #faf6f7; font-size: 10px; white-space: nowrap; } .insumo-input-sufixo span { border-right: 0; border-left: 1px solid #f0e3e6; } .insumo-input-moeda input, .insumo-input-sufixo input, .insumo-pesquisa-input input { min-width: 0; min-height: 44px; flex: 1; border: 0; outline: 0; padding: 0 12px; background: transparent; } .insumo-pesquisa-input i { padding-left: 13px; color: var(--ins-rosa); } .nota-revisao-alerta { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; padding: 12px 14px; border: 1px solid #f1d18e; border-radius: 14px; color: #8b6513; background: #fff9ea; } .nota-revisao-alerta p { font-size: 9px; } .nota-revisao-alerta strong { display: block; font-size: 10px; } .nota-tabela-wrapper, .insumos-tabela-wrapper { width: 100%; overflow-x: auto; border: 1px solid #f0e0e4; border-radius: 15px; } .nota-itens-tabela, .insumos-tabela { width: 100%; min-width: 850px; border-collapse: collapse; } .nota-itens-tabela th, .nota-itens-tabela td, .insumos-tabela th, .insumos-tabela td { padding: 11px 9px; border-bottom: 1px solid #f1e4e7; color: #785d59; font-size: 9px; text-align: left; vertical-align: middle; } .nota-itens-tabela thead th, .insumos-tabela thead th { color: #a27d80; background: #fff9fa; font-size: 8px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .nota-itens-tabela tbody tr:last-child td, .insumos-tabela tbody tr:last-child td, .insumos-tabela tbody tr:last-child th { border-bottom: 0; } .nota-itens-tabela tr.ignorado { opacity: 0.48; background: #f7f4f4; } .nota-itens-tabela input, .nota-itens-tabela select { width: 100%; min-width: 74px; height: 38px; border: 1px solid #eadadd; border-radius: 9px; outline: 0; padding: 0 8px; color: var(--ins-texto); background: #fff; font-size: 9px; } .nota-itens-tabela .item-nome input { min-width: 220px; } .nota-itens-tabela input[type="checkbox"] { width: 17px; min-width: 17px; height: 17px; accent-color: var(--ins-rosa); } .nota-valor-input { display: flex; min-width: 115px; align-items: center; border: 1px solid #eadadd; border-radius: 9px; overflow: hidden; } .nota-valor-input span { padding-left: 8px; color: var(--ins-suave); font-size: 8px; } .nota-valor-input input { min-width: 75px; border: 0; } .nota-remover-item, .ficha-remover-item { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid #f1ced2; border-radius: 10px; color: var(--ins-vermelho); background: var(--ins-vermelho-claro); cursor: pointer; } .nota-sem-itens { padding: 20px; color: var(--ins-suave); text-align: center; } .nota-conferencia-rodape { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 14px; } .nota-conferencia-rodape > div { display: flex; align-items: center; gap: 15px; } .nota-conferencia-rodape > div > span { color: var(--ins-suave); font-size: 10px; white-space: nowrap; } .nota-conferencia-rodape > div > span strong { color: var(--ins-vinho); font-size: 13px; } .insumos-filtros { display: grid; grid-template-columns: minmax(280px, 1.8fr) repeat(2, minmax(160px, 0.8fr)) auto; gap: 13px; align-items: end; margin-bottom: 16px; } .btn-insumo-limpar { min-height: 46px; } .insumo-identificacao { display: flex; min-width: 210px; align-items: center; gap: 10px; } .insumo-identificacao > span { display: inline-flex; flex: 0 0 auto; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 11px; color: var(--ins-rosa); background: var(--ins-rosa-claro); font-size: 15px; } .insumo-identificacao strong, .insumo-identificacao small { display: block; } .insumo-identificacao strong { color: var(--ins-vinho); font-size: 10px; } .insumo-identificacao small { margin-top: 2px; color: var(--ins-suave); font-size: 8px; } .insumos-tabela tbody td > strong { color: var(--ins-vinho); } .insumo-status { display: inline-flex; min-width: 74px; align-items: center; justify-content: center; padding: 6px 9px; border-radius: 999px; font-size: 8px; font-weight: 600; } .insumo-status.disponivel { color: #277a50; background: var(--ins-verde-claro); } .insumo-status.baixo { color: #9b6909; background: var(--ins-laranja-claro); } .insumo-status.zerado { color: #ad3540; background: var(--ins-vermelho-claro); } .insumo-acoes { display: flex; align-items: center; gap: 6px; } .insumo-acoes button { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid var(--ins-borda); border-radius: 10px; color: var(--ins-rosa-forte); background: #fff; cursor: pointer; } .insumo-acoes button.excluir { color: var(--ins-vermelho); background: var(--ins-vermelho-claro); } .insumos-vazio, .ficha-vazia { display: flex; min-height: 150px; align-items: center; justify-content: center; flex-direction: column; padding: 25px; color: var(--ins-suave); text-align: center; } .insumos-vazio i, .ficha-vazia i { margin-bottom: 8px; color: #d89aaf; font-size: 31px; } .insumos-vazio strong, .ficha-vazia strong { color: var(--ins-vinho); font-size: 12px; } .insumos-vazio p, .ficha-vazia p { margin-top: 3px; font-size: 9px; } .ficha-tecnica-painel { margin-bottom: 28px; } .ficha-dados-grid { grid-template-columns: 1.4fr 0.75fr 0.9fr; } .ficha-itens-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 20px 0 12px; } .ficha-itens-cabecalho strong, .ficha-itens-cabecalho span { display: block; } .ficha-itens-cabecalho strong { color: var(--ins-vinho); font-size: 12px; } .ficha-itens-cabecalho span { margin-top: 2px; color: var(--ins-suave); font-size: 9px; } .ficha-itens { display: grid; gap: 10px; } .ficha-item { display: grid; grid-template-columns: auto minmax(240px, 1.5fr) minmax(120px, 0.6fr) minmax(90px, 0.42fr) minmax(115px, 0.55fr) auto; align-items: end; gap: 10px; padding: 13px; border: 1px solid #f0dfe3; border-radius: 15px; background: #fffafa; } .ficha-item-numero { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; align-self: center; border-radius: 9px; color: var(--ins-rosa-forte); background: var(--ins-rosa-claro); font-size: 9px; font-weight: 700; } .ficha-item-custo { min-height: 46px; padding: 7px 10px; border-radius: 11px; background: var(--ins-verde-claro); } .ficha-item-custo small, .ficha-item-custo strong { display: block; } .ficha-item-custo small { color: #58816c; font-size: 8px; } .ficha-item-custo strong { margin-top: 2px; color: var(--ins-verde); font-family: "Playfair Display", serif; font-size: 15px; } .ficha-remover-item { align-self: center; } .ficha-resultado { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)) auto; gap: 12px; align-items: stretch; margin-top: 18px; padding: 15px; border: 1px solid #cce7d7; border-radius: 18px; background: #f7fcf9; } .ficha-resultado > div { min-width: 0; padding: 10px 13px; border-right: 1px solid #dcefe4; } .ficha-resultado small, .ficha-resultado strong { display: block; } .ficha-resultado small { color: #779083; font-size: 9px; } .ficha-resultado strong { margin-top: 2px; overflow: hidden; color: var(--ins-vinho); font-family: "Playfair Display", serif; font-size: 21px; text-overflow: ellipsis; white-space: nowrap; } .ficha-resultado .principal strong { color: var(--ins-verde); font-size: 25px; } /* MODAIS */ body.insumo-modal-aberto { overflow: hidden; } .insumo-modal[hidden] { display: none; } .insumo-modal { position: fixed; z-index: 2000; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: "Poppins", sans-serif; } .insumo-modal-fundo { position: absolute; inset: 0; background: rgba(57, 38, 35, 0.62); backdrop-filter: blur(3px); } .insumo-modal-caixa { position: relative; z-index: 1; width: min(820px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border: 1px solid #ead4da; border-radius: 24px; color: #63433f; background: #fffdfd; box-shadow: 0 26px 60px rgba(49, 24, 21, 0.25); } .insumo-modal-caixa.historico { width: min(900px, 100%); } .insumo-modal-caixa > header { position: sticky; z-index: 3; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-bottom: 1px solid #f0e0e4; background: rgba(255, 253, 253, 0.98); } .insumo-modal-caixa > header > div { display: flex; align-items: center; gap: 12px; } .insumo-modal-caixa h2 { color: #45211d; font-family: "Playfair Display", serif; font-size: 24px; font-weight: 700; } .insumo-modal-caixa header p { margin-top: 2px; color: #9b7e7a; font-size: 10px; } .insumo-modal-fechar { display: inline-flex; flex: 0 0 auto; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid #ecdade; border-radius: 11px; color: #7c5e59; background: #fff; cursor: pointer; } .insumo-modal form { padding: 22px 24px 0; } .insumo-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .insumo-modal-grid .dois, .campos-somente-compra.dois { grid-column: 1 / -1; } .campos-somente-compra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .insumo-modal.modo-edicao .campos-somente-compra { display: none; } .insumo-modal form > footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; margin: 22px -24px 0; padding: 16px 24px; border-top: 1px solid #f0e0e4; background: rgba(255, 253, 253, 0.98); } .historico-conteudo { display: grid; gap: 10px; padding: 20px 24px 24px; } .historico-compra { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 14px; padding: 14px; border: 1px solid #efdee2; border-radius: 15px; background: #fffafa; } .historico-compra small, .historico-compra strong { display: block; } .historico-compra small { color: #9b7e7a; font-size: 8px; } .historico-compra strong { margin-top: 2px; color: #5c2d27; font-size: 10px; } /* INTEGRAÇÃO NO CADASTRO DE PRODUTO */ .ficha-produto-integracao { margin-top: 8px; } .ficha-produto-integracao button { display: grid; width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid #c8e5d4; border-radius: 12px; padding: 9px 11px; color: #2d7f53; background: #effaf4; cursor: pointer; text-align: left; } .ficha-produto-integracao button > i:first-child { font-size: 17px; } .ficha-produto-integracao strong, .ficha-produto-integracao small { display: block; } .ficha-produto-integracao strong { font-size: 9px; } .ficha-produto-integracao small { margin-top: 1px; color: #668b75; font-size: 7px; } .ficha-produto-modal .ficha-produto-caixa { width: min(1120px, 100%); } .ficha-produto-corpo { padding: 20px 24px 24px; } .ficha-produto-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .ficha-produto-resultado { grid-template-columns: repeat(3, minmax(150px, 1fr)) auto; } @media (max-width: 1280px) { .insumos-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nota-fluxo-grid { grid-template-columns: 1fr; } .nota-envio-coluna { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(240px, 1.2fr); gap: 14px; align-items: start; } .nota-dropzone, .nota-preview { grid-row: span 3; } .nota-privacidade, .nota-progresso, .btn-ler-nota { margin-top: 0; } .ficha-item { grid-template-columns: auto minmax(220px, 1.2fr) minmax(110px, 0.55fr) minmax(85px, 0.4fr) minmax(110px, 0.5fr) auto; } } @media (max-width: 980px) { .insumos-cabecalho { align-items: flex-start; flex-direction: column; } .insumos-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .insumos-filtros .pesquisar { grid-column: 1 / -1; } .ficha-dados-grid { grid-template-columns: 1fr 1fr; } .ficha-dados-grid .produto { grid-column: 1 / -1; } .ficha-item { grid-template-columns: auto minmax(0, 1fr) minmax(115px, 0.45fr) minmax(90px, 0.35fr) auto; } .ficha-item-custo { grid-column: 2 / 5; } .ficha-resultado, .ficha-produto-resultado { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ficha-resultado button { grid-column: 1 / -1; } } @media (max-width: 760px) { .insumos-pagina { padding: 15px; } .insumos-cabecalho, .insumos-painel { border-radius: 18px; padding: 20px; } .insumos-cabecalho { min-height: auto; } .insumos-cabecalho-acoes { width: 100%; } .insumos-cabecalho-acoes button { flex: 1 1 180px; } .insumos-secao-topo { align-items: flex-start; flex-direction: column; } .nota-envio-coluna { display: block; } .nota-preview, .nota-progresso, .nota-privacidade, .btn-ler-nota { margin-top: 12px; } .nota-dados-grid, .ficha-dados-grid { grid-template-columns: 1fr; } .ficha-dados-grid .produto { grid-column: auto; } .nota-conferencia-rodape { align-items: stretch; flex-direction: column; } .nota-conferencia-rodape > div { align-items: stretch; flex-direction: column; } .insumo-modal-grid, .campos-somente-compra, .ficha-produto-dados { grid-template-columns: 1fr; } .insumo-modal-grid .dois, .campos-somente-compra.dois { grid-column: auto; } .historico-compra { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .insumos-pagina { padding: 9px; } .insumos-cabecalho h1 { font-size: 39px; } .insumos-cabecalho p { font-size: 12px; } .insumos-resumo, .insumos-filtros, .ficha-resultado, .ficha-produto-resultado { grid-template-columns: 1fr; } .insumos-filtros .pesquisar { grid-column: auto; } .insumo-resumo-card { min-height: 120px; } .ficha-itens-cabecalho { align-items: stretch; flex-direction: column; } .ficha-item { grid-template-columns: auto minmax(0, 1fr) auto; } .ficha-item .insumo-campo { grid-column: 2; } .ficha-item-custo { grid-column: 2; } .ficha-remover-item { grid-column: 3; grid-row: 1; } .ficha-resultado > div { border-right: 0; border-bottom: 1px solid #dcefe4; } .insumo-modal { padding: 8px; } .insumo-modal-caixa { max-height: calc(100vh - 16px); border-radius: 18px; } .insumo-modal-caixa > header { padding: 17px; } .insumo-modal-caixa h2 { font-size: 20px; } .insumo-modal form, .ficha-produto-corpo { padding: 17px 17px 0; } .insumo-modal form > footer { display: grid; grid-template-columns: 1fr; margin: 18px -17px 0; padding: 13px 17px; } .historico-compra { grid-template-columns: 1fr; } } /* ========================================================= AJUSTE VISUAL DA FICHA TÉCNICA DO PRODUTO Mantém o cabeçalho visível, deixa somente o conteúdo interno rolável e reorganiza os ingredientes sem cortar textos e botões. ========================================================= */ .ficha-produto-modal { padding: clamp(10px, 2vw, 24px); } .ficha-produto-modal .ficha-produto-caixa { display: flex; width: min(1040px, 100%); max-height: calc(100dvh - clamp(20px, 4vw, 48px)); flex-direction: column; overflow: hidden; } .ficha-produto-caixa > header { position: relative; top: auto; flex: 0 0 auto; padding: 19px 22px; } .ficha-produto-caixa > header .insumos-secao-icone { flex: 0 0 auto; } .ficha-produto-corpo { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 20px 22px 22px; } .ficha-produto-dados { gap: 12px; padding: 14px; border: 1px solid #f0dfe3; border-radius: 16px; background: #fffafa; } .ficha-produto-modal .ficha-itens-cabecalho { margin-top: 16px; } .ficha-produto-modal .ficha-item { grid-template-columns: 32px minmax(260px, 1.75fr) minmax(115px, 0.55fr) minmax(92px, 0.4fr) minmax(108px, 0.5fr) 38px; gap: 9px; padding: 12px; } .ficha-produto-modal .ficha-item .insumo-campo select { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ficha-produto-modal .ficha-item-custo { display: flex; justify-content: center; flex-direction: column; } .ficha-produto-modal .ficha-produto-resultado { grid-template-columns: repeat(3, minmax(125px, 1fr)) minmax(210px, auto); margin-top: 16px; padding: 13px; box-shadow: 0 12px 28px rgba(51, 154, 104, 0.08); } .ficha-produto-modal .ficha-produto-resultado .btn-insumo-principal { width: 100%; min-width: 210px; } @media (max-width: 900px) { .ficha-produto-modal .ficha-item { grid-template-columns: 32px minmax(0, 1fr) minmax(110px, 0.42fr) 38px; } .ficha-produto-modal .ficha-item .unidade { grid-column: 2; } .ficha-produto-modal .ficha-item-custo { grid-column: 3; } .ficha-produto-modal .ficha-remover-item { grid-column: 4; grid-row: 1; } .ficha-produto-modal .ficha-produto-resultado { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ficha-produto-modal .ficha-produto-resultado .btn-insumo-principal { grid-column: 1 / -1; min-width: 0; } } @media (max-width: 620px) { .ficha-produto-modal { padding: 0; } .ficha-produto-modal .ficha-produto-caixa { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; } .ficha-produto-caixa > header { padding: 15px; } .ficha-produto-caixa > header p { display: none; } .ficha-produto-corpo { padding: 15px; } .ficha-produto-dados, .ficha-produto-modal .ficha-produto-resultado { grid-template-columns: 1fr; } .ficha-produto-modal .ficha-itens-cabecalho { align-items: stretch; flex-direction: column; } .ficha-produto-modal .ficha-itens-cabecalho button { width: 100%; } .ficha-produto-modal .ficha-item { grid-template-columns: 28px minmax(0, 1fr) 38px; align-items: end; } .ficha-produto-modal .ficha-item .insumo-campo, .ficha-produto-modal .ficha-item .quantidade, .ficha-produto-modal .ficha-item .unidade, .ficha-produto-modal .ficha-item-custo { grid-column: 2; } .ficha-produto-modal .ficha-item-numero { grid-column: 1; grid-row: 1; } .ficha-produto-modal .ficha-remover-item { grid-column: 3; grid-row: 1; } .ficha-produto-modal .ficha-produto-resultado > div { border-right: 0; border-bottom: 1px solid #dcefe4; } .ficha-produto-modal .ficha-produto-resultado .btn-insumo-principal { grid-column: auto; } } /* ========================================================= IMPORTAÇÃO EXCLUSIVA PELO LINK DA NFC-E Mantém os elementos antigos da fotografia no HTML para o insumos.js não perder seus IDs, mas remove todos do visual. Este bloco deve permanecer no final do insumos.css. ========================================================= */ /* Remove definitivamente toda a opção de fotografia. */ .insumos-pagina #notaDropzone, .insumos-pagina #notaPreview, .insumos-pagina #btnLerNota, .insumos-pagina #progressoNota, .insumos-pagina .nota-privacidade, .insumos-pagina .nota-link-ou { display: none !important; } /* O link ocupa uma faixa inteira; a conferência fica abaixo. */ .insumos-pagina .nota-fluxo-grid { display: grid !important; width: 100% !important; min-width: 0 !important; grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; } .insumos-pagina .nota-envio-coluna { display: block !important; width: 100% !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } .insumos-pagina #blocoImportacaoNfceLink { display: block !important; width: 100% !important; min-width: 0 !important; } .insumos-pagina .nota-link-importacao { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 22px 24px !important; border: 1px solid var(--ins-borda) !important; border-radius: 18px !important; background: linear-gradient(135deg, rgba(234, 248, 240, 0.72), transparent 42%), #fffdfd !important; box-shadow: 0 10px 28px rgba(91, 45, 39, 0.045) !important; } .insumos-pagina .nota-link-titulo { display: flex !important; width: 100% !important; align-items: center !important; gap: 13px !important; margin: 0 0 17px !important; } .insumos-pagina .nota-link-icone { display: inline-flex !important; flex: 0 0 46px !important; width: 46px !important; height: 46px !important; align-items: center !important; justify-content: center !important; border-radius: 14px !important; color: var(--ins-verde) !important; background: var(--ins-verde-claro) !important; font-size: 19px !important; } .insumos-pagina .nota-link-titulo strong { display: block !important; margin: 0 0 3px !important; color: var(--ins-vinho) !important; font-size: 15px !important; line-height: 1.3 !important; } .insumos-pagina .nota-link-titulo small { display: block !important; max-width: 760px !important; color: var(--ins-suave) !important; font-size: 11px !important; line-height: 1.5 !important; } /* Campo grande para colar o link e botão ao lado. */ .insumos-pagina .nota-link-form { display: grid !important; width: 100% !important; min-width: 0 !important; grid-template-columns: minmax(0, 1fr) minmax(190px, 220px) !important; gap: 12px !important; align-items: stretch !important; } .insumos-pagina .nota-link-form input, .insumos-pagina #urlNotaFiscal { display: block !important; width: 100% !important; min-width: 0 !important; height: 54px !important; margin: 0 !important; padding: 0 17px !important; border: 1px solid #e7cfd6 !important; border-radius: 13px !important; outline: 0 !important; color: var(--ins-vinho) !important; background: #fff !important; box-shadow: none !important; font-size: 13px !important; line-height: 54px !important; text-overflow: ellipsis !important; } .insumos-pagina .nota-link-form input::placeholder, .insumos-pagina #urlNotaFiscal::placeholder { color: #b29a9e !important; opacity: 1 !important; } .insumos-pagina .nota-link-form input:focus, .insumos-pagina #urlNotaFiscal:focus { border-color: var(--ins-rosa) !important; box-shadow: 0 0 0 4px rgba(223, 100, 148, 0.1) !important; } .insumos-pagina .nota-link-form button, .insumos-pagina #btnImportarNotaLink { display: inline-flex !important; width: 100% !important; min-width: 0 !important; min-height: 54px !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 0 !important; padding: 12px 18px !important; border: 0 !important; border-radius: 13px !important; color: #fff !important; background: linear-gradient(135deg, var(--ins-rosa), var(--ins-rosa-forte)) !important; box-shadow: 0 10px 22px rgba(201, 78, 125, 0.2) !important; cursor: pointer !important; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap !important; } .insumos-pagina .nota-link-form button:hover, .insumos-pagina #btnImportarNotaLink:hover { transform: translateY(-1px) !important; filter: brightness(0.98) !important; } .insumos-pagina .nota-link-form button:disabled, .insumos-pagina #btnImportarNotaLink:disabled { transform: none !important; cursor: wait !important; opacity: 0.65 !important; } .insumos-pagina .nota-link-estado { display: block !important; min-height: 18px !important; margin: 10px 2px 0 !important; color: var(--ins-suave) !important; font-size: 10px !important; line-height: 1.45 !important; } .insumos-pagina .nota-link-estado.sucesso { color: var(--ins-verde) !important; } .insumos-pagina .nota-link-estado.erro { color: var(--ins-vermelho) !important; } .insumos-pagina .nota-link-estado.carregando { color: #9b6a0d !important; } .insumos-pagina .nota-conferencia-coluna { width: 100% !important; min-width: 0 !important; } .insumos-pagina .nota-conferencia-vazia { min-height: 270px !important; } /* O texto do cabeçalho passa a falar somente da importação pelo link. */ .insumos-pagina .importar-nota-painel .insumos-secao-topo p { font-size: 0 !important; } .insumos-pagina .importar-nota-painel .insumos-secao-topo p::after { content: "Cole o link oficial da NFC-e e confira os produtos antes de adicionar ao estoque."; color: var(--ins-suave); font-size: 11px; line-height: 1.5; } @media (max-width: 760px) { .insumos-pagina .nota-link-importacao { padding: 18px !important; } .insumos-pagina .nota-link-form { grid-template-columns: minmax(0, 1fr) !important; } .insumos-pagina .nota-link-form button, .insumos-pagina #btnImportarNotaLink { white-space: normal !important; } } @media (max-width: 480px) { .insumos-pagina .nota-link-importacao { padding: 15px !important; border-radius: 15px !important; } .insumos-pagina .nota-link-titulo { align-items: flex-start !important; } .insumos-pagina .nota-link-titulo strong { font-size: 13px !important; } .insumos-pagina .nota-link-form input, .insumos-pagina #urlNotaFiscal { height: 50px !important; padding: 0 13px !important; font-size: 11px !important; line-height: 50px !important; } } /* ========================================================= CORREÇÃO V2 — NOTA MANUAL E AÇÕES DA CONFERÊNCIA Este bloco pertence à versão sem fotografia. Mantém o importador por link e deixa o cadastro manual com o mesmo acabamento visual do restante do painel. ========================================================= */ /* Volta a exibir o texto real do HTML, que agora também fala sobre o preenchimento manual. */ .insumos-pagina .importar-nota-painel .insumos-secao-topo p { font-size: 11px !important; line-height: 1.5 !important; } .insumos-pagina .importar-nota-painel .insumos-secao-topo p::after { content: none !important; } /* Cartão de preenchimento manual. */ .insumos-pagina .nota-manual-importacao { width: 100%; min-width: 0; margin-top: 16px; padding: 21px 23px; border: 1px solid var(--ins-borda); border-radius: 18px; background: linear-gradient(135deg, rgba(255, 240, 246, 0.82), transparent 48%), #fffdfd; box-shadow: 0 10px 28px rgba(91, 45, 39, 0.045); } .insumos-pagina .nota-manual-titulo { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; } .insumos-pagina .nota-manual-icone { display: inline-flex; flex: 0 0 46px; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 14px; color: var(--ins-rosa-forte); background: var(--ins-rosa-claro); font-size: 19px; } .insumos-pagina .nota-manual-titulo strong, .insumos-pagina .nota-manual-titulo small { display: block; } .insumos-pagina .nota-manual-titulo strong { margin-bottom: 3px; color: var(--ins-vinho); font-size: 15px; line-height: 1.3; } .insumos-pagina .nota-manual-titulo small { color: var(--ins-suave); font-size: 11px; line-height: 1.5; } .insumos-pagina .nota-manual-botao, .insumos-pagina #btnIniciarNotaManual { display: inline-flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; gap: 9px; padding: 12px 18px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--ins-rosa), var(--ins-rosa-forte)); box-shadow: 0 10px 22px rgba(201, 78, 125, 0.2); cursor: pointer; font-size: 12px; font-weight: 600; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .insumos-pagina .nota-manual-botao:hover, .insumos-pagina #btnIniciarNotaManual:hover { transform: translateY(-1px); filter: brightness(0.98); box-shadow: 0 14px 27px rgba(201, 78, 125, 0.25); } .insumos-pagina .nota-manual-botao:focus-visible, .insumos-pagina #btnIniciarNotaManual:focus-visible, .insumos-pagina #btnAdicionarLinhaNota:focus-visible, .insumos-pagina #btnCancelarConferenciaNota:focus-visible, .insumos-pagina #btnSalvarCompraNota:focus-visible { outline: 3px solid rgba(223, 100, 148, 0.22); outline-offset: 3px; } .insumos-pagina .nota-manual-importacao > p { margin-top: 11px; color: var(--ins-suave); font-size: 10px; line-height: 1.55; } /* A privacidade continua importante mesmo sem a fotografia. */ .insumos-pagina .nota-privacidade { display: flex !important; width: 100%; margin-top: 14px !important; padding: 13px 15px; border: 1px solid #cfe8d9; border-radius: 14px; } .insumos-pagina .nota-privacidade p { font-size: 10px; line-height: 1.5; } /* Rodapé da conferência: botões alinhados e sem escapar do card. */ .insumos-pagina .nota-conferencia-rodape { width: 100%; min-width: 0; flex-wrap: wrap; padding-top: 15px; border-top: 1px solid #f0e2e5; } .insumos-pagina .nota-conferencia-acoes-secundarias { display: flex; min-width: 0; flex-wrap: wrap; gap: 10px; } .insumos-pagina #btnAdicionarLinhaNota, .insumos-pagina #btnCancelarConferenciaNota, .insumos-pagina #btnSalvarCompraNota { min-height: 46px; border-radius: 13px; white-space: nowrap; } .insumos-pagina #btnSalvarCompraNota { min-width: 205px; } .insumos-pagina #btnSalvarCompraNota:disabled { transform: none; box-shadow: none; cursor: wait; opacity: 0.62; } @media (max-width: 760px) { .insumos-pagina .nota-manual-importacao { padding: 18px; } .insumos-pagina .nota-conferencia-rodape, .insumos-pagina .nota-conferencia-rodape > div { width: 100%; } .insumos-pagina .nota-conferencia-acoes-secundarias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .insumos-pagina #btnAdicionarLinhaNota, .insumos-pagina #btnCancelarConferenciaNota, .insumos-pagina #btnSalvarCompraNota { width: 100%; min-width: 0; white-space: normal; } } @media (max-width: 480px) { .insumos-pagina .nota-manual-importacao { padding: 15px; border-radius: 15px; } .insumos-pagina .nota-manual-titulo { align-items: flex-start; } .insumos-pagina .nota-manual-titulo strong { font-size: 13px; } .insumos-pagina .nota-conferencia-acoes-secundarias { grid-template-columns: 1fr; } } /* ========================================================= CORREÇÃO V3 — CARDS DE RESUMO RESPONSIVOS Evita valores cortados com reticências e organiza os quatro indicadores em monitor, notebook, tablet e celular. ========================================================= */ .insumos-pagina .insumos-resumo { width: 100%; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.25vw, 18px); } .insumos-pagina .insumo-resumo-card { display: grid; min-width: 0; min-height: 158px; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 12px; padding: clamp(17px, 1.5vw, 22px); } .insumos-pagina .insumo-resumo-card > span { width: 46px; height: 46px; } .insumos-pagina .insumo-resumo-card > div { width: 100%; min-width: 0; overflow: visible; } .insumos-pagina .insumo-resumo-card small { min-height: 2.7em; font-size: clamp(9px, 0.75vw, 11px); line-height: 1.35; } .insumos-pagina .insumo-resumo-card strong { min-height: 1.2em; margin: 5px 0 4px; overflow: visible; color: var(--ins-vinho-forte); font-size: clamp(22px, 1.75vw, 27px); line-height: 1.08; letter-spacing: -0.025em; text-overflow: clip; white-space: nowrap; font-variant-numeric: tabular-nums; } .insumos-pagina #resumoUltimaCompra { font-size: clamp(20px, 1.55vw, 25px); } .insumos-pagina .insumo-resumo-card p { max-width: 100%; font-size: clamp(8px, 0.65vw, 9px); line-height: 1.4; } /* Em monitores bem largos, os números ganham mais destaque. */ @media (min-width: 1600px) { .insumos-pagina .insumo-resumo-card { min-height: 170px; grid-template-columns: 52px minmax(0, 1fr); gap: 15px; padding: 24px; } .insumos-pagina .insumo-resumo-card > span { width: 52px; height: 52px; font-size: 21px; } .insumos-pagina .insumo-resumo-card strong { font-size: 30px; } .insumos-pagina #resumoUltimaCompra { font-size: 28px; } } /* Notebook e tablet: duas colunas largas para preservar os valores. */ @media (max-width: 1280px) { .insumos-pagina .insumos-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .insumos-pagina .insumo-resumo-card { min-height: 142px; grid-template-columns: 50px minmax(0, 1fr); padding: 20px; } .insumos-pagina .insumo-resumo-card > span { width: 50px; height: 50px; } .insumos-pagina .insumo-resumo-card small { min-height: auto; font-size: 11px; } .insumos-pagina .insumo-resumo-card strong, .insumos-pagina #resumoUltimaCompra { font-size: clamp(26px, 3vw, 31px); } .insumos-pagina .insumo-resumo-card p { font-size: 9px; } } /* Celular: um card por linha, sem rolagem horizontal. */ @media (max-width: 620px) { .insumos-pagina .insumos-resumo { grid-template-columns: minmax(0, 1fr); gap: 11px; margin-top: 16px; } .insumos-pagina .insumo-resumo-card { width: 100%; min-height: 118px; grid-template-columns: 48px minmax(0, 1fr); gap: 13px; padding: 17px 18px; border-radius: 17px; } .insumos-pagina .insumo-resumo-card > span { width: 48px; height: 48px; } .insumos-pagina .insumo-resumo-card small { min-height: auto; font-size: 10px; } .insumos-pagina .insumo-resumo-card strong, .insumos-pagina #resumoUltimaCompra { font-size: clamp(25px, 8vw, 30px); } .insumos-pagina .insumo-resumo-card p { font-size: 9px; } } @media (max-width: 360px) { .insumos-pagina .insumo-resumo-card { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 15px; } .insumos-pagina .insumo-resumo-card > span { width: 42px; height: 42px; } .insumos-pagina .insumo-resumo-card strong, .insumos-pagina #resumoUltimaCompra { font-size: 24px; } }