/* Caminho: site/assets/css/admin.css */ /* Zandy HUB - área administrativa, mobile first, tema CLARO padrão + escuro opcional */ :root { /* Marca (constante nos dois temas) */ --laranja: #f58634; --laranja-2: #ffa64d; --laranja-escuro: #dc712e; --azul: #138ba6; --azul-2: #4fd0e6; --areia: #f2e9d8; --fogo: #dc712e; --branco: #fff; --f-display: 'Unbounded', sans-serif; --f-texto: 'Space Grotesk', sans-serif; /* TEMA CLARO (padrão) */ --fundo: #eef1f3; --sup: #ffffff; --sup-2: #f4f7f8; --borda: rgba(20, 40, 55, 0.12); --borda-forte: rgba(20, 40, 55, 0.2); --txt: #16242c; --txt-suave: #5a6b74; --topo-bg: rgba(255, 255, 255, 0.88); --malha: rgba(20, 60, 80, 0.05); --sombra: 0 14px 40px rgba(20, 50, 70, 0.12); --sombra-hover: 0 18px 44px rgba(20, 50, 70, 0.16); /* Status (texto / fundo) tema claro */ --ok: #1a9e5c; --ok-bg: rgba(45, 211, 111, 0.16); --alerta: #9a6a07; --alerta-bg: rgba(255, 200, 60, 0.22); --erro: #c0512a; --erro-bg: rgba(220, 113, 46, 0.16); --info: #0f7f96; --info-bg: rgba(24, 184, 204, 0.16); } /* TEMA ESCURO (classe no ) */ .tema-escuro { --fundo: #06141b; --sup: rgba(255, 255, 255, 0.05); --sup-2: rgba(255, 255, 255, 0.07); --borda: rgba(255, 255, 255, 0.14); --borda-forte: rgba(255, 255, 255, 0.22); --txt: #ffffff; --txt-suave: rgba(255, 255, 255, 0.7); --topo-bg: rgba(6, 20, 27, 0.82); --malha: rgba(255, 255, 255, 0.03); --sombra: 0 14px 40px rgba(0, 0, 0, 0.4); --sombra-hover: 0 16px 40px rgba(0, 0, 0, 0.45); --ok: #5df2a0; --ok-bg: rgba(45, 211, 111, 0.12); --alerta: #ffcf5a; --alerta-bg: rgba(255, 200, 60, 0.1); --erro: #ff8a6b; --erro-bg: rgba(220, 113, 46, 0.12); --info: #5fd8ec; --info-bg: rgba(24, 184, 204, 0.12); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--f-texto); background: radial-gradient(900px 500px at 90% -10%, rgba(245, 134, 52, 0.12), transparent 60%), radial-gradient(700px 450px at 0% 40%, rgba(19, 139, 166, 0.1), transparent 60%), var(--fundo); color: var(--txt); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background 0.3s ease, color 0.3s ease; } .adm-malha { position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(var(--malha) 1px, transparent 1px), linear-gradient(90deg, var(--malha) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(900px 560px at 50% 0%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(900px 560px at 50% 0%, #000 30%, transparent 80%); pointer-events: none; } .adm-orbe { position: fixed; z-index: -1; border-radius: 50%; filter: blur(100px); pointer-events: none; } .adm-orbe-laranja { width: 380px; height: 380px; background: rgba(245, 134, 52, 0.16); top: -140px; right: -100px; } .adm-orbe-azul { width: 340px; height: 340px; background: rgba(19, 139, 166, 0.13); bottom: -140px; left: -120px; } .adm-rotulo { font-family: var(--f-display); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--azul); margin-bottom: 8px; } h1 { font-family: var(--f-display); font-weight: 900; font-size: clamp(1.3rem, 3vw, 1.9rem); margin-bottom: 22px; text-transform: uppercase; background: linear-gradient(92deg, var(--txt) 20%, var(--laranja-escuro) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; } h2 { font-family: var(--f-display); font-size: 0.98rem; margin-bottom: 10px; color: var(--txt); } a { color: var(--azul); text-decoration: none; } /* Topo */ .adm-topo { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 4vw; background: var(--topo-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--borda); } .adm-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; } .adm-logo img { height: 52px; width: auto; filter: drop-shadow(0 0 10px rgba(245, 134, 52, 0.25)); } .adm-logo span { font-family: var(--f-display); font-weight: 900; font-size: 0.8rem; letter-spacing: 0.22em; color: var(--laranja-escuro); border-left: 2px solid rgba(245, 134, 52, 0.5); padding-left: 12px; } .adm-topo nav { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .adm-topo nav a { position: relative; color: var(--txt-suave); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: color 0.2s ease; } .adm-topo nav a:not(.sair):not(.tema-toggle)::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px; background: linear-gradient(90deg, var(--laranja), var(--azul)); transition: width 0.3s ease; } .adm-topo nav a:not(.sair):not(.tema-toggle):hover::after { width: 100%; } .adm-topo nav a:hover { color: var(--txt); } .adm-topo nav .sair { color: var(--erro); border: 1px solid var(--erro-bg); border-radius: 10px; padding: 7px 14px; font-size: 0.82rem; } .adm-topo nav .sair:hover { background: var(--erro-bg); } /* Botão de tema */ .tema-toggle { cursor: pointer; background: var(--sup-2); border: 1px solid var(--borda); border-radius: 999px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; } .tema-toggle:hover { border-color: var(--laranja); } /* Submenus (dropdowns) do menu do HUB */ .adm-drop { position: relative; } .adm-drop-btn { cursor: pointer; background: none; border: 0; color: var(--txt-suave); font-family: var(--f-texto); font-size: 0.92rem; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; padding: 0; } .adm-drop-btn:hover { color: var(--txt); } .adm-caret { font-size: 0.7rem; transition: transform 0.2s ease; } .adm-drop.aberto .adm-caret { transform: rotate(180deg); } .adm-drop.aberto .adm-drop-btn { color: var(--laranja-escuro); } .adm-drop-menu { position: absolute; top: calc(100% + 12px); left: 0; min-width: 220px; display: none; flex-direction: column; gap: 2px; padding: 8px; background: var(--sup); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra-hover); z-index: 30; } .adm-drop.aberto .adm-drop-menu { display: flex; } .adm-drop-menu a { padding: 11px 12px; border-radius: 10px; color: var(--txt); font-size: 0.9rem; white-space: nowrap; } .adm-drop-menu a:hover { background: var(--sup-2); color: var(--laranja-escuro); } .adm-drop-menu a::after { display: none !important; } /* Botão Menu (hambúrguer) do HUB - só no mobile */ .adm-menu-toggle { display: none; align-items: center; gap: 8px; cursor: pointer; background: var(--sup-2); border: 1px solid var(--borda); border-radius: 12px; padding: 9px 14px; color: var(--txt); font-family: var(--f-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; } .adm-menu-barras { display: inline-flex; flex-direction: column; gap: 3px; } .adm-menu-barras i { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; } @media (max-width: 860px) { .adm-menu-toggle { display: inline-flex; } .adm-topo nav { display: none; flex-basis: 100%; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 0 4px; margin-top: 8px; border-top: 1px solid var(--borda); } .adm-topo nav.aberto { display: flex; } .adm-topo nav > a, .adm-drop-btn { padding: 12px 6px; font-size: 1rem; } .adm-topo nav .sair { text-align: center; } .adm-drop { width: 100%; } .adm-drop-btn { width: 100%; justify-content: space-between; } .adm-drop-menu { position: static; box-shadow: none; border: 0; background: transparent; padding: 2px 0 6px 16px; min-width: 0; } .adm-drop-menu a { padding: 12px 6px; } } .adm-main { padding: 26px 4vw 70px; max-width: 1100px; margin: 0 auto; } /* Dashboard */ .hub-saudacao { color: var(--txt-suave); margin-bottom: 20px; font-size: 1.02rem; } .hub-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-bottom: 36px; } .hub-card { position: relative; display: block; text-decoration: none; color: var(--txt); background: var(--sup); border: 1px solid var(--borda); border-radius: 18px; padding: 22px; overflow: hidden; box-shadow: var(--sombra); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .hub-card .hub-emoji { font-size: 2rem; display: block; margin-bottom: 10px; } .hub-card h2 { font-family: var(--f-display); font-size: 1.1rem; margin-bottom: 4px; color: var(--txt); } .hub-card p { color: var(--txt-suave); font-size: 0.88rem; margin-bottom: 12px; } .hub-card:not(.hub-breve):hover { transform: translateY(-5px); border-color: rgba(245, 134, 52, 0.6); box-shadow: var(--sombra-hover), 0 0 26px rgba(245, 134, 52, 0.15); } .hub-gastrobar::before, .hub-cardapio::before, .hub-torneios::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; } .hub-gastrobar::before { background: linear-gradient(90deg, var(--fogo), var(--laranja)); } .hub-cardapio::before { background: linear-gradient(90deg, var(--laranja), var(--laranja-2)); } .hub-torneios::before { background: linear-gradient(90deg, var(--azul), var(--laranja)); } .hub-badge { display: inline-block; font-size: 0.74rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--alerta-bg); border: 1px solid var(--borda); color: var(--laranja-escuro); } .hub-badge.hub-ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); } .hub-badge.hub-alerta { background: var(--alerta-bg); border-color: var(--alerta); color: var(--alerta); } .hub-badge.hub-off { background: var(--sup-2); border-color: var(--borda); color: var(--txt-suave); } .hub-breve { opacity: 0.6; cursor: default; } .hub-breve .hub-emoji { filter: grayscale(0.3); } .hub-secao { font-family: var(--f-display); font-size: 1rem; margin: 10px 0 14px; color: var(--azul); } /* Avisos */ .aviso { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-size: 0.95rem; } .aviso-ok { background: var(--ok-bg); border: 1px solid var(--ok); color: var(--txt); } .aviso-erro { background: var(--erro-bg); border: 1px solid var(--erro); color: var(--txt); } .aviso-alerta { background: var(--alerta-bg); border: 1px solid var(--alerta); color: var(--txt); } .aviso-info { background: var(--info-bg); border: 1px solid var(--info); color: var(--txt); } /* Botões */ .botao { display: inline-block; font-family: var(--f-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em; color: #fff; background: linear-gradient(120deg, var(--laranja), var(--laranja-escuro)); border: 0; border-radius: 11px; padding: 12px 20px; cursor: pointer; text-decoration: none; box-shadow: 0 6px 18px rgba(245, 134, 52, 0.3); transition: transform 0.25s ease, box-shadow 0.25s ease; } .botao:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(245, 134, 52, 0.45); } .botao.fogo { background: linear-gradient(120deg, var(--fogo), #b8531c); } .ligacao { display: inline-flex; align-items: center; font-size: 0.84rem; font-weight: 500; color: var(--txt); background: var(--sup); border: 1px solid var(--borda); border-radius: 10px; padding: 8px 14px; margin-right: 8px; transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .ligacao:hover { transform: translateY(-2px); border-color: var(--azul); color: var(--azul); } /* Botões de ação compactos, modernos */ .mini { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-texto); font-size: 0.8rem; font-weight: 600; line-height: 1; padding: 8px 13px; border-radius: 10px; border: 1px solid var(--borda-forte); background: var(--sup); color: var(--txt); cursor: pointer; text-decoration: none; transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .mini:hover { transform: translateY(-2px); } .mini.ativo, .mini:hover { border-color: var(--laranja); color: var(--laranja-escuro); box-shadow: 0 5px 14px rgba(245, 134, 52, 0.18); } .mini.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); } .mini.ok:hover { box-shadow: 0 5px 14px rgba(45, 211, 111, 0.22); } .mini.alerta { color: var(--alerta); border-color: var(--alerta); background: var(--alerta-bg); } .mini.alerta:hover { box-shadow: 0 5px 14px rgba(255, 200, 60, 0.22); } .mini.erro { color: var(--erro); border-color: var(--erro); background: var(--erro-bg); } .mini.erro:hover { box-shadow: 0 5px 14px rgba(220, 113, 46, 0.25); } .mini:active { transform: translateY(0) scale(0.97); } /* Formulários */ .formulario { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin-top: 10px; } .formulario label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--txt-suave); } .formulario input, .formulario select, .formulario textarea, .em-linha input, .em-linha select { font-family: var(--f-texto); font-size: 1rem; color: var(--txt); background: var(--sup-2); border: 1px solid var(--borda-forte); border-radius: 10px; padding: 11px 14px; } .formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: 2px solid var(--laranja); } .linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .em-linha { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .barra-acoes { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 24px; } .filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } /* Cartões */ .cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin-top: 14px; } .cartao { background: var(--sup); border: 1px solid var(--borda); border-radius: 18px; padding: 20px 22px; box-shadow: var(--sombra); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .cartao:hover { transform: translateY(-4px); border-color: rgba(245, 134, 52, 0.45); box-shadow: var(--sombra-hover), 0 0 22px rgba(245, 134, 52, 0.1); } .cartao h2 { color: var(--laranja-escuro); } .cartao .acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .cartao .acoes a { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 500; color: var(--txt); background: var(--sup-2); border: 1px solid var(--borda); border-radius: 10px; padding: 8px 13px; transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .cartao .acoes a:hover { transform: translateY(-2px); border-color: rgba(245, 134, 52, 0.6); color: var(--laranja-escuro); box-shadow: 0 6px 18px rgba(245, 134, 52, 0.15); } .etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } /* Etiquetas/status premium */ .etq { display: inline-flex; align-items: center; gap: 7px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1; padding: 6px 12px 6px 11px; border-radius: 999px; color: var(--txt); background: var(--sup-2); border: 1px solid var(--borda); white-space: nowrap; } .etq::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; opacity: 0.95; } .etq-inscricoes, .etq-aprovada, .etq-encerrado { color: var(--ok); background: var(--ok-bg); border-color: var(--ok); } .etq-aprovada::before, .etq-inscricoes::before { animation: etq-pulsa 2s ease-in-out infinite; } @keyframes etq-pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(45, 211, 111, 0.6), 0 0 8px currentColor; } 60% { box-shadow: 0 0 0 5px rgba(45, 211, 111, 0), 0 0 8px currentColor; } } .etq-pendente, .etq-alerta, .etq-em_andamento { color: var(--alerta); background: var(--alerta-bg); border-color: var(--alerta); } .etq-recusada, .etq-wo { color: var(--erro); background: var(--erro-bg); border-color: var(--erro); } .etq-grupos, .etq-mata_mata { color: var(--info); background: var(--info-bg); border-color: var(--info); } .etq-papel { color: var(--laranja-escuro); background: var(--alerta-bg); border-color: var(--laranja); } /* Tabelas */ .tabela-rolagem { overflow-x: auto; margin-top: 10px; } table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.92rem; min-width: 560px; } th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--borda); vertical-align: middle; color: var(--txt); } th { font-family: var(--f-display); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--azul); text-transform: uppercase; border-bottom: 1px solid var(--azul); } tbody tr { transition: background 0.2s ease; } tbody tr:hover td { background: var(--sup-2); } tbody tr:last-child td { border-bottom: 0; } .aviso-mini { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 0.68rem; font-weight: 700; color: var(--alerta); } .aviso-mini::before { content: '⏳'; } td .acoes, td.acoes { display: flex; flex-wrap: wrap; gap: 6px; } /* Jogos */ .cartao-jogo .confronto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1rem; } .cartao-jogo .confronto em { color: var(--laranja); font-style: normal; } .venceu { color: var(--ok); } .venceu::after { content: ' ✔'; } .placar-atual { font-family: var(--f-display); font-size: 1.05rem; color: var(--laranja-escuro); margin: 6px 0; } .form-placar .sets { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; font-size: 0.92rem; } .form-placar .sets input { width: 64px; text-align: center; } .form-placar .botao { margin-top: 4px; } /* Chave */ .chave-rolagem { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 14px; } .coluna-fase { min-width: 250px; } .cartao-chave { margin-bottom: 12px; } .confronto-mini { display: flex; flex-direction: column; gap: 4px; font-size: 0.95rem; } .cartao-chave details { margin-top: 8px; font-size: 0.85rem; } .cartao-chave .formulario { gap: 8px; } /* KDS pedidos */ .cartao-pedido .lista-simples li { padding: 4px 0; } .cartao-pedido .etq { font-size: 0.74rem; } .pedido-atrasado { border-color: var(--erro) !important; box-shadow: 0 0 0 1px var(--erro-bg), 0 0 22px rgba(220, 113, 46, 0.2) !important; } .pedido-obs { background: var(--alerta-bg); border-radius: 10px; padding: 8px 12px; font-size: 0.88rem; margin: 8px 0; } .pedido-tempo { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0; padding: 10px 12px; background: var(--sup-2); border: 1px solid var(--borda); border-radius: 10px; font-size: 0.78rem; color: var(--txt-suave); } .pedido-tempo strong { color: var(--txt); font-weight: 700; } .pedido-tempo em { color: var(--azul); font-style: normal; font-weight: 600; } /* Barra do topo do KDS (lançar pedido + utilidades) */ .kds-barra-topo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 4px 0 6px; } .kds-barra-util { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .kds-lancar { margin: 0; font-size: 0.95rem; padding: 14px 26px; display: inline-flex; align-items: center; gap: 8px; } @media (max-width: 560px) { .kds-lancar { flex: 1; justify-content: center; } } /* Banner de alerta de novo pedido */ .kds-alerta { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1200; display: flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: 16px; background: linear-gradient(120deg, var(--fogo), var(--laranja)); color: #fff; box-shadow: 0 14px 40px rgba(220, 113, 46, 0.5); font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; } .kds-alerta[hidden] { display: none !important; } .kds-alerta-icone { font-size: 1.6rem; animation: kds-sino 0.6s ease-in-out infinite; } .kds-alerta-anim { animation: kds-entra 0.4s ease, kds-pulsa 1.2s ease-in-out 0.4s infinite; } @keyframes kds-entra { from { transform: translateX(-50%) translateY(-30px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } } @keyframes kds-pulsa { 0%, 100% { box-shadow: 0 14px 40px rgba(220, 113, 46, 0.5); } 50% { box-shadow: 0 14px 50px rgba(220, 113, 46, 0.9); } } @keyframes kds-sino { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-18deg); } 75% { transform: rotate(18deg); } } /* Modal de configuração das impressoras */ .imp-status { font-size: 0.85rem; padding: 8px 12px; border-radius: 10px; margin: 8px 0 12px; background: var(--sup-2); border: 1px solid var(--borda); color: var(--txt-suave); } .imp-status.imp-ok { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); } .imp-status.imp-erro { color: var(--erro); border-color: var(--erro); background: var(--erro-bg); } .imp-grid { display: flex; flex-direction: column; gap: 8px; } .imp-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .imp-linha > span { font-weight: 600; color: var(--txt); min-width: 110px; } .imp-linha select, .imp-opcoes select { flex: 1; font-family: var(--f-texto); font-size: 0.92rem; color: var(--txt); background: var(--sup-2); border: 1px solid var(--borda-forte); border-radius: 10px; padding: 9px 12px; } .imp-opcoes { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; padding-top: 14px; border-top: 1px solid var(--borda); } .imp-opcoes label { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--txt); } .imp-check input { width: 18px; height: 18px; accent-color: var(--laranja); } .imp-botoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* Pré-visualização da comanda (simula o papel térmico) */ .imp-prev-bloco { margin-bottom: 18px; } .imp-prev-rotulo { font-size: 0.84rem; font-weight: 700; color: var(--txt); margin-bottom: 6px; } .imp-prev-rotulo em { color: var(--erro); font-style: normal; font-weight: 600; } .imp-prev-papel { background: #fff; color: #1a1a1a; margin: 0 auto; border: 1px solid #e2e2e2; border-radius: 3px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22); padding: 16px 12px; overflow-x: auto; font-family: 'Courier New', Courier, monospace; font-size: 12px; line-height: 1.4; white-space: pre; } .imp-prev-48 { width: 380px; max-width: 100%; } .imp-prev-32 { width: 260px; max-width: 100%; } /* Agrupamento por situação */ .kds-grupo { margin-bottom: 30px; } .kds-grupo-titulo { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 1rem; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--borda); color: var(--txt); } .kds-grupo-conta { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--sup-2); border: 1px solid var(--borda); font-size: 0.82rem; font-weight: 700; } .kds-grupo-recebido .kds-grupo-titulo { border-color: var(--info); color: var(--info); } .kds-grupo-em_preparo .kds-grupo-titulo { border-color: var(--alerta); color: var(--alerta); } .kds-grupo-pronto .kds-grupo-titulo { border-color: var(--ok); color: var(--ok); } /* Card do KDS clicável, com botões sempre no rodapé (alinhados na linha) */ .kds-card { cursor: pointer; display: flex; flex-direction: column; } .kds-card:hover { border-color: rgba(245, 134, 52, 0.5); } .kds-itens { flex: 1 1 auto; max-height: 240px; overflow-y: auto; } .kds-card .kds-acoes { margin-top: auto; } /* No modal de detalhe a lista não precisa rolar nem esticar */ .kds-modal-corpo .kds-itens { max-height: none; } /* Botões de atendimento grandes (touch-friendly para tablet) */ .kds-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .kds-acao { display: block; margin: 0; } .kds-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 14px 16px; cursor: pointer; font-family: var(--f-display); font-weight: 700; font-size: 0.95rem; line-height: 1.15; border: 1.5px solid var(--borda-forte); border-radius: 14px; color: #fff; background: var(--azul); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .kds-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); } .kds-btn:active { transform: scale(0.97); } .kds-btn-azul { background: linear-gradient(120deg, var(--azul), #0f7f96); border-color: transparent; } .kds-btn-verde { background: linear-gradient(120deg, #1a9e5c, #15824c); border-color: transparent; } .kds-btn-escuro { background: linear-gradient(120deg, var(--laranja), var(--laranja-escuro)); border-color: transparent; } .kds-btn-cancelar { background: var(--sup); color: var(--erro); border-color: var(--erro); } .kds-btn-claro { background: var(--sup-2); color: var(--txt); border-color: var(--borda-forte); } @media (max-width: 480px) { .kds-acoes { grid-template-columns: 1fr; } } /* Modal de detalhe em tela cheia */ .kds-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 4vw; background: rgba(6, 20, 27, 0.55); backdrop-filter: blur(4px); overflow-y: auto; } .kds-modal[hidden] { display: none !important; } .kds-modal-caixa { position: relative; width: min(640px, 100%); background: var(--sup); border: 1px solid var(--borda); border-radius: 20px; padding: 26px 24px; box-shadow: var(--sombra-hover); margin: auto; } .kds-modal-fechar { position: absolute; top: 12px; right: 16px; background: none; border: 0; font-size: 2rem; line-height: 1; color: var(--txt); cursor: pointer; } .kds-modal-corpo h2 { font-size: 1.5rem; margin: 6px 0 12px; color: var(--laranja-escuro); } .kds-modal-corpo .lista-simples { font-size: 1.05rem; } .kds-modal-corpo .kds-acoes { margin-top: 18px; } /* Modal de confirmação com destaque para o próximo passo */ .kds-confirma { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 6vw; background: rgba(6, 20, 27, 0.62); backdrop-filter: blur(4px); } .kds-confirma[hidden] { display: none !important; } .kds-confirma-caixa { width: min(420px, 100%); background: var(--sup); border: 1px solid var(--borda); border-radius: 20px; padding: 26px 24px; box-shadow: var(--sombra-hover); text-align: center; } .kds-confirma-msg { font-size: 1.1rem; line-height: 1.45; color: var(--txt); margin-bottom: 22px; } .kds-confirma-botoes { display: grid; grid-template-columns: 1fr; gap: 10px; } .kds-confirma-botoes .kds-btn { min-height: 56px; font-size: 1.05rem; } /* Login */ .adm-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 5vw; background: radial-gradient(700px 400px at 80% 0%, rgba(245, 134, 52, 0.16), transparent 60%), radial-gradient(600px 360px at 0% 60%, rgba(19, 139, 166, 0.12), transparent 60%), var(--fundo); } .login-cartao { width: min(380px, 100%); background: var(--sup); border: 1px solid var(--borda); border-radius: 22px; padding: 36px 30px; display: flex; flex-direction: column; gap: 14px; text-align: center; box-shadow: var(--sombra); } .login-cartao img { height: 56px; width: auto; margin: 0 auto; } .login-cartao h1 { font-size: 1rem; letter-spacing: 0.1em; } .login-cartao label { display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 0.88rem; color: var(--txt-suave); } .login-cartao input { width: 100%; font-size: 1rem; color: var(--txt); background: var(--sup-2); border: 1px solid var(--borda-forte); border-radius: 10px; padding: 12px 14px; } .login-cartao form { display: flex; flex-direction: column; gap: 14px; } .login-cartao .botao:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } /* Campo de senha com botão mostrar/ocultar */ .campo-senha { position: relative; display: block; } .campo-senha input { padding-right: 44px; } .olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; font-size: 1.1rem; padding: 6px; line-height: 1; } /* Barra de força da senha */ .forca { height: 6px; border-radius: 999px; background: var(--sup-2); overflow: hidden; margin: 2px 0 8px; } .forca-barra { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 0.25s ease, background 0.25s ease; } /* Checklist de requisitos */ .checklist { list-style: none; display: flex; flex-direction: column; gap: 5px; margin: 0 0 6px; text-align: left; } .checklist li { font-size: 0.8rem; color: var(--txt-suave); display: flex; align-items: center; gap: 8px; transition: color 0.2s ease; } .checklist li::before { content: '○'; color: var(--txt-suave); font-size: 0.9rem; } .checklist li.ok { color: var(--ok); } .checklist li.ok::before { content: '✓'; color: var(--ok); } .match-msg { font-size: 0.82rem; text-align: left; margin-top: -4px; min-height: 1em; } .match-ok { color: var(--ok); } .match-erro { color: var(--erro); } /* Editor de permissões */ .perm-box { border: 1px solid var(--borda); border-radius: 14px; padding: 16px; margin: 6px 0 4px; transition: opacity 0.2s ease; } .perm-box legend { font-family: var(--f-display); font-size: 0.82rem; padding: 0 8px; color: var(--azul); } .perm-presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.85rem; margin-bottom: 14px; color: var(--txt-suave); } .perm-modulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--borda); } .perm-modulo:last-child { border-bottom: 0; } .perm-acoes { display: flex; flex-wrap: wrap; gap: 14px; } .perm-check { display: inline-flex; align-items: center; gap: 7px; font-size: 0.9rem; color: var(--txt); } .perm-check input { width: 18px; height: 18px; accent-color: var(--laranja); } /* Cardápio admin: filtros + lista alinhada com foto */ .cd-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 10px; } .cd-busca { flex: 1; min-width: 200px; font-family: var(--f-texto); font-size: 1rem; color: var(--txt); background: var(--sup-2); border: 1px solid var(--borda-forte); border-radius: 10px; padding: 11px 14px; } .cd-filtros select { font-family: var(--f-texto); font-size: 0.92rem; color: var(--txt); background: var(--sup-2); border: 1px solid var(--borda-forte); border-radius: 10px; padding: 10px 12px; } .cd-contagem { color: var(--txt-suave); font-size: 0.88rem; margin-bottom: 12px; } .cd-adm-lista { display: flex; flex-direction: column; gap: 10px; } .cd-adm-item { display: grid; grid-template-columns: 56px minmax(0, 1.6fr) auto auto; align-items: center; gap: 14px; background: var(--sup); border: 1px solid var(--borda); border-radius: 14px; padding: 10px 14px; box-shadow: var(--sombra); } .cd-adm-foto { width: 56px; height: 56px; border-radius: 11px; overflow: hidden; background: var(--sup-2); display: flex; align-items: center; justify-content: center; border: 1px solid var(--borda); } .cd-adm-foto img { width: 100%; height: 100%; object-fit: cover; } .cd-adm-semfoto { font-size: 1.6rem; opacity: 0.7; } .cd-adm-info { min-width: 0; } .cd-adm-info h3 { font-family: var(--f-display); font-size: 0.98rem; margin-bottom: 6px; color: var(--txt); } .cd-adm-meta { display: flex; flex-wrap: wrap; gap: 6px; } .cd-adm-preco { display: flex; align-items: center; gap: 6px; } .cd-adm-preco span { color: var(--txt-suave); font-size: 0.9rem; } .cd-adm-preco input { width: 84px; font-family: var(--f-texto); font-size: 0.95rem; color: var(--txt); background: var(--sup-2); border: 1px solid var(--borda-forte); border-radius: 9px; padding: 8px 10px; } .cd-adm-acoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .cd-adm-edicoes { display: flex; flex-direction: column; gap: 6px; } .cd-adm-edicoes .cd-adm-preco input { width: 84px; } .cd-paginacao { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 22px 0; } .cd-pag-atual { color: var(--txt-suave); font-size: 0.9rem; } @media (max-width: 760px) { .cd-adm-item { grid-template-columns: 56px 1fr; } .cd-adm-edicoes { grid-column: 2; } .cd-adm-preco { justify-content: flex-start; } .cd-adm-acoes { grid-column: 1 / -1; justify-content: flex-start; } } .bloco { background: var(--sup); border: 1px solid var(--borda); border-radius: 14px; padding: 14px 18px; margin: 14px 0; box-shadow: var(--sombra); } .bloco summary { cursor: pointer; font-family: var(--f-display); font-size: 0.85rem; color: var(--txt); list-style: none; display: flex; align-items: center; gap: 10px; padding: 2px 0; } .bloco summary::-webkit-details-marker { display: none; } .bloco summary::before { content: '▸'; color: var(--laranja); font-size: 0.9rem; transition: transform 0.2s ease; } .bloco[open] summary::before { transform: rotate(90deg); } .bloco summary:hover { color: var(--laranja-escuro); } .lista-simples { list-style: none; display: flex; flex-direction: column; gap: 6px; } /* Zona de manutenção / risco (admin) */ .zona-risco { margin: 30px 0 10px; padding: 20px 22px; border: 1px solid var(--erro); border-radius: 16px; background: var(--erro-bg); box-shadow: var(--sombra); } .zona-risco h2 { font-family: var(--f-display); font-size: 1.05rem; color: var(--erro); margin-bottom: 8px; } .zona-risco p { color: var(--txt); font-size: 0.9rem; margin-bottom: 14px; max-width: 760px; } .zona-risco .botao { margin: 0; } /* Clientes e histórico de pedidos */ .hub-clientes::before, .hub-historico::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; } .hub-clientes::before { background: linear-gradient(90deg, var(--azul), var(--azul-2)); } .hub-historico::before { background: linear-gradient(90deg, var(--laranja-escuro), var(--azul)); } .barra-busca { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 4px; } .barra-busca input[type="search"] { flex: 1; min-width: 220px; font-family: var(--f-texto); font-size: 1rem; color: var(--txt); background: var(--sup-2); border: 1px solid var(--borda-forte); border-radius: 10px; padding: 11px 14px; } .barra-busca input[type="search"]:focus { outline: 2px solid var(--laranja); } .filtros-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 6px 0 14px; padding: 16px; background: var(--sup); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra); } .filtros-form label { display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; color: var(--txt-suave); } .filtros-form input, .filtros-form select { font-family: var(--f-texto); font-size: 0.95rem; color: var(--txt); background: var(--sup-2); border: 1px solid var(--borda-forte); border-radius: 10px; padding: 10px 12px; } .filtros-form input:focus, .filtros-form select:focus { outline: 2px solid var(--laranja); } .filtros-form .filtro-largo { flex: 1; min-width: 200px; } .filtros-form .filtro-largo input { width: 100%; } .filtros-form .mini { margin-bottom: 1px; } .hist-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .tabela-rolavel { overflow-x: auto; margin-top: 10px; border-radius: 14px; } .tabela.tabela, table.tabela { background: var(--sup); border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; box-shadow: var(--sombra); } .tabela th, .tabela td { white-space: nowrap; } .tabela .td-itens { white-space: normal; min-width: 220px; color: var(--txt-suave); font-size: 0.86rem; } .tabela .td-tempos { white-space: nowrap; font-size: 0.8rem; color: var(--txt-suave); } .tabela .td-tempos small { color: var(--azul); font-weight: 600; } .tabela code { font-family: var(--f-texto); font-weight: 700; color: var(--laranja-escuro); background: var(--alerta-bg); border: 1px solid var(--borda); border-radius: 7px; padding: 3px 8px; font-size: 0.82rem; } .tabela a { color: var(--azul); text-decoration: none; font-weight: 600; } .tabela a:hover { color: var(--laranja-escuro); } .ficha-cliente { background: var(--sup); border: 1px solid var(--borda); border-radius: 16px; padding: 20px 22px; margin: 14px 0; box-shadow: var(--sombra); } .ficha-cliente h2 { font-family: var(--f-display); color: var(--laranja-escuro); } .ficha-linhas { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--txt-suave); font-size: 0.9rem; margin-bottom: 12px; } .ficha-numeros { display: flex; flex-wrap: wrap; gap: 8px; } @media (max-width: 560px) { .linha-2 { grid-template-columns: 1fr; } .filtros-form { gap: 10px; } .filtros-form label { flex: 1; min-width: 130px; } }