/* =====================================================================
cashmaq-ios.css — skin premium estilo app iOS para o CashMAQ.
ADITIVA e REVERSIVEL: carregada POR ULTIMO no de cada pagina.
So toca cor / raio / sombra / borda / tipografia / transicao.
NAO altera layout, posicionamento, fluxos, JS ou estrutura dos cards.
Paleta CashMAQ: navy #0A2540 (superficies escuras) + verde #16A34A (acao).
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
/* marca — paleta do logo CashMaq: navy "Cash" + verde gradiente "Maq" */
--cm-navy: #1f2e44;
--cm-navy-2: #283b57;
--cm-navy-3: #33496b;
--cm-green: #2fa32b;
--cm-green-dark: #1f8c22;
--cm-green-light: #5fc341;
--cm-green-soft: rgba(47, 163, 43, 0.10);
--cm-green-ring: rgba(47, 163, 43, 0.16);
/* superficies iOS */
--cm-bg: #f6f7f9;
--cm-card: #ffffff;
--cm-card-2: #fbfbfd;
/* texto Apple-like */
--cm-text: #1d1d1f;
--cm-text-2: #48484a;
--cm-muted: #86868b;
/* semanticas iOS */
--cm-red: #ff3b30;
--cm-red-dark: #d70015;
--cm-orange: #ff9500;
--cm-blue: #0a84ff;
/* hairlines e sombras em camadas */
--cm-hairline: rgba(0, 0, 0, 0.08);
--cm-hairline-strong: rgba(0, 0, 0, 0.14);
/* v4: sombra em 3 camadas (contato + chave + ambiente), tintada de navy */
--cm-shadow-sm: 0 1px 2px rgba(18, 30, 48, 0.05), 0 4px 10px rgba(18, 30, 48, 0.04);
--cm-shadow-md: 0 1px 2px rgba(18, 30, 48, 0.04), 0 8px 20px rgba(18, 30, 48, 0.06),
0 24px 48px rgba(18, 30, 48, 0.06);
--cm-shadow-lg: 0 2px 4px rgba(18, 30, 48, 0.05), 0 16px 36px rgba(18, 30, 48, 0.09),
0 48px 90px rgba(18, 30, 48, 0.10);
--cm-shadow-navy: 0 10px 30px rgba(18, 30, 48, 0.20);
/* v4: materiais de vidro */
--cm-glass-navy: rgba(28, 41, 62, 0.80);
--cm-glass-card: rgba(255, 255, 255, 0.88);
--cm-blur: saturate(180%) blur(22px);
--cm-spring: cubic-bezier(0.34, 1.3, 0.5, 1);
/* superficies escuras — tom v3 "leve": navy do logo (verde so acento) */
--cm-deep: #1f2e44;
--cm-deep-2: #283b57;
--cm-deep-3: #33496b;
/* raios iOS — tom v2 "maiores" */
--cm-r-sm: 12px;
--cm-r-md: 15px;
--cm-r-lg: 20px;
--cm-r-xl: 26px;
--cm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* ------------------------------------------------------------------ */
/* Base global */
/* ------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
'Segoe UI', Roboto, sans-serif !important;
background-color: var(--cm-bg) !important;
color: var(--cm-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .h1, .h2, .h3 {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
letter-spacing: -0.022em;
color: var(--cm-text);
font-weight: 700;
}
::selection { background: var(--cm-green-soft); color: var(--cm-green-dark); }
/* scrollbar discreta estilo macOS */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.18);
border-radius: 99px;
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.30); background-clip: content-box; }
/* anel de foco acessivel e elegante */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: none !important;
box-shadow: 0 0 0 4px var(--cm-green-ring) !important;
border-radius: var(--cm-r-sm);
}
/* (sem cor global em — paginas legadas usam sem classe como botao) */
img { image-rendering: -webkit-optimize-contrast; }
/* ------------------------------------------------------------------ */
/* Top bar (todas as telas logadas) — navy CashMAQ com vidro */
/* ------------------------------------------------------------------ */
.top-bar {
background: linear-gradient(135deg, var(--cm-deep) 0%, var(--cm-deep-2) 60%, var(--cm-deep-3) 100%) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: var(--cm-shadow-navy);
}
.top-bar .hamburger { color: #ffffff !important; opacity: 0.95; transition: opacity 0.18s var(--cm-ease), transform 0.18s var(--cm-ease); }
.top-bar .hamburger:hover { opacity: 1; transform: scale(1.06); }
.top-bar a { color: #ffffff; }
/* ------------------------------------------------------------------ */
/* Sidebar / drawer — navy profundo com vidro */
/* ------------------------------------------------------------------ */
.sidebar {
background-color: rgba(24, 35, 53, 0.97) !important;
-webkit-backdrop-filter: saturate(160%) blur(18px);
backdrop-filter: saturate(160%) blur(18px);
box-shadow: 8px 0 40px rgba(0, 0, 0, 0.35);
border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar a {
color: rgba(255, 255, 255, 0.62) !important;
font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif !important;
font-size: 17px !important;
font-weight: 600;
letter-spacing: -0.01em;
border-radius: var(--cm-r-md);
margin: 2px 10px;
transition: color 0.18s var(--cm-ease), background 0.18s var(--cm-ease), padding-left 0.18s var(--cm-ease);
}
.sidebar a:hover {
color: #ffffff !important;
background: rgba(255, 255, 255, 0.07);
}
.sidebar .closebtn { border-radius: 99px; margin: 0; }
.sidebar .closebtn:hover { background: transparent; }
.sidebar hr { border-top: 1px solid rgba(255, 255, 255, 0.10) !important; margin: 12px 18px !important; }
/* ------------------------------------------------------------------ */
/* Launcher home (.navegacao) — tiles premium */
/* ------------------------------------------------------------------ */
.navegacao ul li a {
background: var(--cm-card);
color: var(--cm-deep-2) !important;
border: 1px solid var(--cm-hairline) !important;
border-radius: var(--cm-r-lg) !important;
box-shadow: var(--cm-shadow-sm);
font-weight: 600;
letter-spacing: -0.01em;
transition: transform 0.22s var(--cm-ease), box-shadow 0.22s var(--cm-ease),
background 0.22s var(--cm-ease), color 0.22s var(--cm-ease), border-color 0.22s var(--cm-ease);
}
.navegacao ul li a i { color: var(--cm-green); transition: color 0.22s var(--cm-ease), transform 0.22s var(--cm-ease); }
.navegacao ul li a:hover {
background: var(--cm-deep-2) !important;
color: #ffffff !important;
border-color: var(--cm-deep-2) !important;
transform: translateY(-3px);
box-shadow: var(--cm-shadow-lg);
}
.navegacao ul li a:hover i { color: var(--cm-green-light); transform: scale(1.08); }
.navegacao ul li a:active { transform: translateY(-1px) scale(0.99); }
/* ------------------------------------------------------------------ */
/* Cards genericos */
/* ------------------------------------------------------------------ */
.card, #formContent, .form-container, .panel, .box, .content-card {
background: var(--cm-card);
border: 1px solid var(--cm-hairline) !important;
border-radius: var(--cm-r-lg) !important;
box-shadow: var(--cm-shadow-md) !important;
}
.card { overflow: hidden; }
.card-header {
background: var(--cm-card-2) !important;
border-bottom: 1px solid var(--cm-hairline) !important;
font-weight: 700;
letter-spacing: -0.01em;
}
.card-footer { background: var(--cm-card-2) !important; border-top: 1px solid var(--cm-hairline) !important; }
/* ------------------------------------------------------------------ */
/* Botoes — pill iOS, verde CashMAQ como acao primaria */
/* ------------------------------------------------------------------ */
button, .btn, input[type='submit'], input[type='button'], a.button {
font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif !important;
font-weight: 600;
letter-spacing: -0.01em;
border-radius: var(--cm-r-md) !important;
transition: transform 0.16s var(--cm-ease), box-shadow 0.2s var(--cm-ease),
background 0.2s var(--cm-ease), filter 0.2s var(--cm-ease), opacity 0.2s var(--cm-ease);
}
button:active, .btn:active, input[type='submit']:active, a.button:active { transform: scale(0.97); }
/* confirmacoes/salvar -> verde CashMAQ (NAO cobre button[type=submit]
generico: formularios de exclusao tambem usam submit) */
.btn-success, input[type='submit'], .btn-submit,
.btn-salvar, .save-btn, .submit-btn {
background: linear-gradient(180deg, var(--cm-green-light) 0%, var(--cm-green) 100%) !important;
border-color: var(--cm-green) !important;
color: #ffffff !important;
box-shadow: 0 1px 2px rgba(22, 163, 74, 0.25), 0 8px 22px rgba(22, 163, 74, 0.28);
}
.btn-success:hover, input[type='submit']:hover, .btn-submit:hover {
background: linear-gradient(180deg, var(--cm-green) 0%, var(--cm-green-dark) 100%) !important;
border-color: var(--cm-green-dark) !important;
box-shadow: 0 2px 4px rgba(22, 163, 74, 0.30), 0 12px 30px rgba(22, 163, 74, 0.34);
transform: translateY(-1px);
}
input[type='submit']:disabled, .btn-submit:disabled { filter: saturate(0.6); opacity: 0.55; }
/* secundarios / outline */
.btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary {
background: var(--cm-card) !important;
color: var(--cm-text) !important;
border: 1px solid var(--cm-hairline-strong) !important;
box-shadow: var(--cm-shadow-sm);
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover {
background: var(--cm-card-2) !important;
border-color: var(--cm-deep-2) !important;
color: var(--cm-deep) !important;
}
/* perigo — iOS red */
.btn-danger, .delete-btn, .btn-excluir {
background: linear-gradient(180deg, #ff453a 0%, var(--cm-red) 100%) !important;
border-color: var(--cm-red) !important;
color: #fff !important;
box-shadow: 0 1px 2px rgba(255, 59, 48, 0.25), 0 8px 22px rgba(255, 59, 48, 0.24);
}
.btn-danger:hover { background: linear-gradient(180deg, var(--cm-red) 0%, var(--cm-red-dark) 100%) !important; }
.btn-warning { background: linear-gradient(180deg, #ffb340 0%, var(--cm-orange) 100%) !important; border-color: var(--cm-orange) !important; color: #fff !important; }
.btn-info { background: linear-gradient(180deg, #409cff 0%, var(--cm-blue) 100%) !important; border-color: var(--cm-blue) !important; color: #fff !important; }
/* ------------------------------------------------------------------ */
/* Formularios — campos iOS */
/* ------------------------------------------------------------------ */
input[type='text'], input[type='email'], input[type='password'], input[type='number'],
input[type='tel'], input[type='search'], input[type='url'], input[type='date'],
select, textarea, .form-control, .form-select {
font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif !important;
background: var(--cm-card) !important;
border: 1px solid var(--cm-hairline-strong) !important;
border-radius: var(--cm-r-md) !important;
color: var(--cm-text) !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
transition: border-color 0.18s var(--cm-ease), box-shadow 0.18s var(--cm-ease);
}
input:focus, select:focus, textarea:focus, .form-control:focus, .form-select:focus {
border-color: var(--cm-green) !important;
box-shadow: 0 0 0 4px var(--cm-green-ring) !important;
outline: none !important;
}
::placeholder { color: var(--cm-muted) !important; opacity: 1; }
label, .form-label { color: var(--cm-text-2); font-weight: 600; letter-spacing: -0.005em; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--cm-green); }
/* ------------------------------------------------------------------ */
/* Tabelas — data premium */
/* ------------------------------------------------------------------ */
table, .table { border-color: var(--cm-hairline) !important; }
table thead th, .table thead th, table th {
background: var(--cm-card-2) !important;
color: var(--cm-muted) !important;
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--cm-hairline-strong) !important;
}
table td, .table td { border-color: var(--cm-hairline) !important; color: var(--cm-text-2); }
table tbody tr, .table tbody tr { transition: background 0.15s var(--cm-ease); }
table tbody tr:hover, .table tbody tr:hover, .table-hover tbody tr:hover { background: var(--cm-green-soft) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(0, 0, 0, 0.015) !important; }
td, th { font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------------ */
/* Modais — folha iOS */
/* ------------------------------------------------------------------ */
.modal-content {
border: 1px solid var(--cm-hairline) !important;
border-radius: var(--cm-r-xl) !important;
box-shadow: var(--cm-shadow-lg) !important;
background: var(--cm-card) !important;
}
.modal-header { border-bottom: 1px solid var(--cm-hairline) !important; }
.modal-footer { border-top: 1px solid var(--cm-hairline) !important; }
.modal-backdrop.show, .modal-backdrop { background-color: rgba(15, 24, 38, 0.50) !important; }
/* ------------------------------------------------------------------ */
/* Badges, alerts, misc */
/* ------------------------------------------------------------------ */
.badge { border-radius: 99px !important; font-weight: 700; letter-spacing: 0.02em; }
.badge-success, .bg-success { background-color: var(--cm-green) !important; }
.badge-danger, .bg-danger { background-color: var(--cm-red) !important; }
.badge-warning, .bg-warning { background-color: var(--cm-orange) !important; }
.badge-primary, .bg-primary { background-color: var(--cm-deep-2) !important; }
.alert { border-radius: var(--cm-r-md) !important; border: 1px solid var(--cm-hairline) !important; box-shadow: var(--cm-shadow-sm); }
.alert-success { background: #f0fdf4 !important; color: #14532d !important; border-color: rgba(22, 163, 74, 0.25) !important; }
.alert-danger { background: #fff1f0 !important; color: #7f1d1d !important; border-color: rgba(255, 59, 48, 0.25) !important; }
.alert-warning { background: #fffbeb !important; color: #78350f !important; border-color: rgba(255, 149, 0, 0.30) !important; }
.alert-info { background: #f0f3f8 !important; color: #12233b !important; border-color: rgba(10, 132, 255, 0.25) !important; }
hr { border-top: 1px solid var(--cm-hairline); }
.text-primary { color: var(--cm-green-dark) !important; }
.text-muted { color: var(--cm-muted) !important; }
/* paginacao bootstrap */
.page-link { color: var(--cm-green-dark) !important; border-color: var(--cm-hairline) !important; border-radius: var(--cm-r-sm); margin: 0 2px; }
.page-item.active .page-link { background: var(--cm-green) !important; border-color: var(--cm-green) !important; color: #fff !important; }
/* nav pills / tabs */
.nav-pills .nav-link.active { background: var(--cm-deep-2) !important; }
.nav-tabs .nav-link.active { border-color: var(--cm-hairline) var(--cm-hairline) transparent !important; }
.nav-link { color: var(--cm-text-2); }
.nav-link:hover { color: var(--cm-green-dark); }
/* dropdowns */
.dropdown-menu {
border: 1px solid var(--cm-hairline) !important;
border-radius: var(--cm-r-md) !important;
box-shadow: var(--cm-shadow-lg) !important;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
.dropdown-item:hover { background: var(--cm-green-soft) !important; color: var(--cm-green-dark) !important; }
/* list groups */
.list-group-item { border-color: var(--cm-hairline) !important; }
.list-group-item:first-child { border-top-left-radius: var(--cm-r-md); border-top-right-radius: var(--cm-r-md); }
.list-group-item:last-child { border-bottom-left-radius: var(--cm-r-md); border-bottom-right-radius: var(--cm-r-md); }
/* ================================================================== */
/* Refinamentos guiados pela auditoria dos templates */
/* ================================================================== */
/* Paginas modernas (caixa, add_machine, emitir_pulsos, maquinas_online,
editar/gerenciar_caixa, pos_criado...) usam var(--primary) azul PixPro.
Redefinindo os tokens, headers/gradientes/icones re-tematizam em navy. */
:root {
--primary: #283b57;
--primary-dark: #1f2e44;
}
/* topbars alternativas: auth e (maquinas_online) */
.auth-topbar, body > header {
background: linear-gradient(135deg, var(--cm-deep) 0%, var(--cm-deep-2) 60%, var(--cm-deep-3) 100%) !important;
box-shadow: var(--cm-shadow-navy);
}
/* sidebar variante #mySidebar (maquinas_online, profile) */
#mySidebar {
background-color: rgba(24, 35, 53, 0.97) !important;
-webkit-backdrop-filter: saturate(160%) blur(18px);
backdrop-filter: saturate(160%) blur(18px);
box-shadow: 8px 0 40px rgba(0, 0, 0, 0.35);
border-right: 1px solid rgba(255, 255, 255, 0.06);
}
#mySidebar a {
color: rgba(255, 255, 255, 0.62) !important;
font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif !important;
font-weight: 600;
border-radius: var(--cm-r-md);
transition: color 0.18s var(--cm-ease), background 0.18s var(--cm-ease);
}
#mySidebar a:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.07); }
/* footer: dark intencional — de preto puro para navy premium */
footer {
background: linear-gradient(180deg, #182335 0%, #0e1624 100%) !important;
color: rgba(255, 255, 255, 0.78) !important;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
footer a { color: rgba(255, 255, 255, 0.85) !important; }
footer a:hover { color: #ffffff !important; }
/* botoes estruturais (busca / acao neutra): azul PixPro -> verde profundo */
.btn-main-action, .btn-search, .btn-primary {
background: linear-gradient(180deg, var(--cm-deep-3) 0%, var(--cm-deep) 100%) !important;
border-color: var(--cm-deep) !important;
color: #ffffff !important;
box-shadow: 0 1px 2px rgba(18, 30, 48, 0.20), 0 8px 22px rgba(18, 30, 48, 0.20);
}
.btn-main-action:hover, .btn-search:hover, .btn-primary:hover {
background: linear-gradient(180deg, var(--cm-deep-2) 0%, #182a41 100%) !important;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(18, 30, 48, 0.24), 0 12px 30px rgba(18, 30, 48, 0.26);
}
/* perigo: variantes encontradas nos templates */
.delete-button, .profile-actions .delete-button {
background: linear-gradient(180deg, #ff453a 0%, var(--cm-red) 100%) !important;
border-color: var(--cm-red) !important;
color: #fff !important;
}
/* cards de dado/maquina/KPI: SO raio+sombra+hover — preserva as bordas
coloridas de status (border-left/top informativas) */
.card-item, .machine-card, .machine-card-new, .action-card, .card-box,
.gs-card, .kpi, .summary-card, .section-card, .insights-card, .chart-card,
.menu-card, .info-card, .profile-container, .m-row {
border-radius: var(--cm-r-lg) !important;
box-shadow: var(--cm-shadow-sm);
transition: transform 0.22s var(--cm-ease), box-shadow 0.22s var(--cm-ease);
}
.card-item:hover, .machine-card:hover, .machine-card-new:hover,
.action-card:hover, .menu-card:hover, .info-card:hover {
box-shadow: var(--cm-shadow-md);
}
/* logo nas topbars: corrige o 70x80 esticado do CSS legado */
.top-bar img, .top-bar .freepix-logo, header .freepix-logo {
height: 36px !important;
width: auto !important;
max-width: 150px !important;
object-fit: contain;
}
/* titulos gigantes legados (2.5-3em) -> escala premium */
.welcome-message h1 { font-size: clamp(1.5rem, 3vw, 1.9rem) !important; letter-spacing: -0.02em; }
/* accent line dos tiles do launcher: azul PixPro -> navy+verde CashMAQ */
body.panel-app .menu-card::before {
background: linear-gradient(90deg, var(--cm-deep-3), var(--cm-green-light)) !important;
}
/* modais custom das telas de caixa/pulsos */
.modal-box {
border-radius: var(--cm-r-xl) !important;
box-shadow: var(--cm-shadow-lg) !important;
border: 1px solid var(--cm-hairline);
}
.modal-overlay {
background: rgba(15, 24, 38, 0.50) !important;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
/* pills de status: acabamento (mantem as cores semanticas das paginas) */
.mcn-status, .status-badge, .m-status-pill, .badge-on, .badge-off,
.badge-block, .mc-total-badge, .badge-method, .provider-badge, .helper-pill {
border-radius: 999px !important;
font-weight: 700;
letter-spacing: 0.01em;
}
/* ================================================================== */
/* V4 — camada premium: vidro, luz, volume e fisica de toque */
/* (auditoria: home tem 2o