/* =========================================================================== Memorial Rosa de Saron — Sistema de Gestão Funerária Identidade sóbria: grafite, papel, bronze discreto. Sem cor vibrante. Mobile-first; adapta para desktop a partir de 900px. TEMA: dois conjuntos de tokens (claro/escuro). O tema segue o sistema operacional por padrão e pode ser fixado pelo botão do cabeçalho, que grava data-tema="claro" ou "escuro" no . TIPOGRAFIA: Lora (títulos, serifada e calorosa) + Source Sans 3 (texto e interface, alta legibilidade). Ambas via Google Fonts, com pilha de fallback do sistema caso o notebook esteja sem internet na apresentação. =========================================================================== */ /* ------------------------------------------------------------- TOKENS ---- */ :root{ /* --- tema claro (padrão) --- */ --papel:#f1efeb; --papel-2:#e6e2db; --card:#ffffff; --campo:#ffffff; --tinta:#1f2429; --tinta-2:#4c545c; --tinta-3:#69727b; --linha:#dbd5cc; --linha-2:#ebe7e0; --bronze:#8a6d3b; --bronze-claro:#b3946a; --bronze-suave:#f0e9dc; --ok:#3d6349; --ok-bg:#e6efe8; --alerta:#8a3535; --alerta-bg:#f7e9e9; --aviso:#84631e; --aviso-bg:#f8f0da; --info:#365570; --info-bg:#e7eef5; --topo-bg:#1f2429; --topo-tinta:#f3f1ed; --btn-bg:#e6e2db; --btn-fg:#1f2429; --btn-principal-bg:#1f2429; --btn-principal-fg:#ffffff; --barra-trilho:#e0dbd3; --tabela-cab:#efece6; --tabela-hover:#faf8f5; --modal-veu:rgba(24,27,30,.55); --sombra:0 1px 2px rgba(31,36,41,.05), 0 6px 18px rgba(31,36,41,.06); --sombra-forte:0 12px 44px rgba(31,36,41,.24); --raio:11px; --serif:'Lora',Georgia,'Times New Roman',serif; --sans:'Source Sans 3','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif; --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; --alt-header:58px; --alt-nav:66px; color-scheme:light; } /* --- tema escuro: por preferência do sistema --- */ @media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]){ --papel:#14181b; --papel-2:#1e2429; --card:#1b2025; --campo:#232930; --tinta:#e9e6e1; --tinta-2:#b5bbc2; --tinta-3:#88919a; --linha:#333b43; --linha-2:#272e35; --bronze:#c3a370; --bronze-claro:#d8bd92; --bronze-suave:#2b2820; --ok:#7fb28d; --ok-bg:#1c2823; --alerta:#dd8c8c; --alerta-bg:#2c1e1e; --aviso:#d5b573; --aviso-bg:#2a2418; --info:#8fb2d0; --info-bg:#1b242d; --topo-bg:#0e1114; --topo-tinta:#e9e6e1; --btn-bg:#2a3138; --btn-fg:#e9e6e1; --btn-principal-bg:#c3a370; --btn-principal-fg:#14181b; --barra-trilho:#2a3138; --tabela-cab:#232930; --tabela-hover:#212830; --modal-veu:rgba(6,8,10,.68); --sombra:0 1px 2px rgba(0,0,0,.34), 0 6px 18px rgba(0,0,0,.30); --sombra-forte:0 12px 44px rgba(0,0,0,.58); color-scheme:dark; } } /* --- tema escuro: fixado pelo botão --- */ :root[data-tema="escuro"]{ --papel:#14181b; --papel-2:#1e2429; --card:#1b2025; --campo:#232930; --tinta:#e9e6e1; --tinta-2:#b5bbc2; --tinta-3:#88919a; --linha:#333b43; --linha-2:#272e35; --bronze:#c3a370; --bronze-claro:#d8bd92; --bronze-suave:#2b2820; --ok:#7fb28d; --ok-bg:#1c2823; --alerta:#dd8c8c; --alerta-bg:#2c1e1e; --aviso:#d5b573; --aviso-bg:#2a2418; --info:#8fb2d0; --info-bg:#1b242d; --topo-bg:#0e1114; --topo-tinta:#e9e6e1; --btn-bg:#2a3138; --btn-fg:#e9e6e1; --btn-principal-bg:#c3a370; --btn-principal-fg:#14181b; --barra-trilho:#2a3138; --tabela-cab:#232930; --tabela-hover:#212830; --modal-veu:rgba(6,8,10,.68); --sombra:0 1px 2px rgba(0,0,0,.34), 0 6px 18px rgba(0,0,0,.30); --sombra-forte:0 12px 44px rgba(0,0,0,.58); color-scheme:dark; } /* ---------------------------------------------------------------- BASE --- */ *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} body{ font-family:var(--sans); background:var(--papel); color:var(--tinta); font-size:16px; line-height:1.55; letter-spacing:.005em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; /* sem transition em cor/fundo: propriedades animadas que dependem de custom properties não reavaliam quando o tema troca, e a tela ficaria com a cor antiga. A troca de tema é instantânea de propósito. */ } h1,h2,h3,h4{ font-family:var(--serif);font-weight:600;margin:0; letter-spacing:-.005em;line-height:1.25;color:var(--tinta); } button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit} a{color:var(--info)} .oculto{display:none !important} /* dinheiro e datas alinham em coluna */ .num,.valor,.carne-linha b,table.tab td.num,table.tab th.num{font-variant-numeric:tabular-nums} /* ---------------------------------------------------------------- LOGIN --- */ #tela-login{ min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px 16px; background:radial-gradient(1200px 520px at 50% -10%, #343a41 0%, #21262b 55%, #14171a 100%); } .login-box{width:100%;max-width:440px;background:var(--card);border-radius:16px;box-shadow:var(--sombra-forte);overflow:hidden} .login-topo{padding:30px 26px 22px;text-align:center;border-bottom:1px solid var(--linha-2);background:var(--card)} .marca-simbolo{ width:58px;height:58px;margin:0 auto 14px;border-radius:50%; border:1.5px solid var(--bronze);display:flex;align-items:center;justify-content:center; font-family:var(--serif);font-size:27px;color:var(--bronze);background:var(--bronze-suave); } .login-topo h1{font-size:23px;letter-spacing:-.01em} .login-topo p{margin:7px 0 0;font-size:12px;color:var(--tinta-3);letter-spacing:.09em;text-transform:uppercase;font-weight:600} .login-corpo{padding:22px 26px 28px} .campo{margin-bottom:14px} .campo label{display:block;font-size:12.5px;font-weight:600;color:var(--tinta-2);margin-bottom:6px;letter-spacing:.01em} .campo input,.campo select,.campo textarea{ width:100%;padding:11px 12px;border:1px solid var(--linha);border-radius:9px; background:var(--campo);color:var(--tinta); } .campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--bronze-suave);border-color:var(--bronze)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:11px 17px;border-radius:9px;border:1px solid transparent;cursor:pointer; font-weight:600;font-size:14.5px;letter-spacing:.005em; background:var(--btn-bg);color:var(--btn-fg);transition:filter .12s, transform .06s; } .btn:hover{filter:brightness(1.06)} :root[data-tema="escuro"] .btn:hover{filter:brightness(1.16)} .btn:active{transform:translateY(1px)} .btn-principal{background:var(--btn-principal-bg);color:var(--btn-principal-fg)} .btn-bronze{background:var(--bronze);color:var(--btn-principal-fg)} .btn-linha{background:var(--card);border-color:var(--linha);color:var(--tinta-2)} .btn-perigo{background:var(--alerta);color:#fff} :root[data-tema="escuro"] .btn-perigo{color:#1a1010} .btn-bloco{width:100%} .btn-pequeno{padding:7px 12px;font-size:13px;border-radius:8px} .btn:disabled{opacity:.45;cursor:not-allowed} .perfis-demo{margin-top:22px;border-top:1px dashed var(--linha);padding-top:17px} .perfis-demo > p{margin:0 0 11px;font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--tinta-3);font-weight:700} .perfil-btn{ width:100%;display:flex;gap:12px;align-items:center;text-align:left; background:var(--card);border:1px solid var(--linha);border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:pointer; } .perfil-btn:hover{border-color:var(--bronze);background:var(--bronze-suave)} .perfil-av{width:36px;height:36px;border-radius:50%;background:var(--papel-2);color:var(--tinta-2); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto;font-family:var(--serif)} .perfil-txt strong{display:block;font-size:14px;color:var(--tinta)} .perfil-txt span{font-size:12px;color:var(--tinta-3)} .aviso-demo{margin-top:16px;font-size:11.5px;color:var(--tinta-3);text-align:center;line-height:1.5} /* --------------------------------------------------------------- LAYOUT --- */ #app{display:none} #app.ativo{display:block} .topo{ position:fixed;top:0;left:0;right:0;height:var(--alt-header);z-index:40; background:var(--topo-bg);color:var(--topo-tinta);display:flex;align-items:center;gap:10px;padding:0 12px; box-shadow:0 2px 12px rgba(0,0,0,.18); } .topo-marca{display:flex;align-items:center;gap:9px;flex:0 0 auto} .topo-marca .sig{width:32px;height:32px;border-radius:50%;border:1px solid rgba(195,163,112,.6); display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;color:#dcc59a} .topo-marca b{display:none;font-family:var(--serif);font-size:16px;font-weight:600;white-space:nowrap} .topo-marca small{display:none} @media(min-width:660px){ .topo-marca b{display:block} .topo-marca small{display:block;font-size:10px;opacity:.6;letter-spacing:.09em;text-transform:uppercase} } .topo-busca{flex:1;position:relative;min-width:0} .topo-busca input{ width:100%;min-width:0;padding:9px 10px 9px 33px;border-radius:22px; border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09); color:var(--topo-tinta);font-size:14px; } .topo-busca input::placeholder{color:rgba(255,255,255,.5)} .topo-busca input:focus{outline:none;background:rgba(255,255,255,.16);border-color:rgba(195,163,112,.6)} .topo-busca .lupa{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.6;font-size:13px} .topo-acoes{display:flex;align-items:center;gap:6px;flex:0 0 auto} .chip-unidade{ background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);color:var(--topo-tinta); border-radius:16px;padding:5px 10px;font-size:12px;cursor:pointer;max-width:88px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto; } @media(min-width:660px){.chip-unidade{max-width:180px}} .btn-tema{ width:34px;height:34px;border-radius:50%;flex:0 0 auto;cursor:pointer; background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);color:var(--topo-tinta); display:flex;align-items:center;justify-content:center;padding:0; } .btn-tema:hover{background:rgba(255,255,255,.18)} .avatar-topo{width:34px;height:34px;border-radius:50%;background:var(--bronze);color:#211a10;border:none; font-weight:700;font-size:13px;cursor:pointer;font-family:var(--serif);flex:0 0 auto} .conteudo{padding:calc(var(--alt-header) + 14px) 12px calc(var(--alt-nav) + 28px);max-width:1180px;margin:0 auto} .barra-nav-lateral{display:none} /* ------------------------------------------------------------ BOTTOM NAV -- */ .nav-inferior{ position:fixed;bottom:0;left:0;right:0;height:var(--alt-nav);z-index:40; background:var(--card);border-top:1px solid var(--linha);display:flex; padding-bottom:env(safe-area-inset-bottom); } .nav-inferior button{ flex:1;background:none;border:none;cursor:pointer;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:4px;color:var(--tinta-3);padding:6px 2px; } .nav-inferior button .ic{font-size:19px;line-height:1} .nav-inferior button .rot{font-size:10.5px;font-weight:600;letter-spacing:.01em} .nav-inferior button.sel,.nav-inferior button.sel .rot{color:var(--bronze)} /* ---------------------------------------------------------- BOTTOM SHEET -- */ .sheet-fundo{position:fixed;inset:0;background:var(--modal-veu);z-index:60;display:none} .sheet-fundo.ativo{display:block} .sheet{ position:fixed;left:0;right:0;bottom:0;background:var(--papel);z-index:61; border-radius:18px 18px 0 0;padding:8px 12px calc(18px + env(safe-area-inset-bottom)); transform:translateY(100%);transition:transform .2s ease;max-height:82vh;overflow:auto; border-top:1px solid var(--linha); } .sheet.ativo{transform:translateY(0)} .sheet-alca{width:42px;height:4px;background:var(--linha);border-radius:3px;margin:6px auto 13px} .sheet h3{font-size:16px;margin:4px 4px 11px;color:var(--tinta-2)} .grade-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .item-menu{ background:var(--card);border:1px solid var(--linha);border-radius:12px;padding:14px 6px;cursor:pointer; display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;color:var(--tinta-2); } .item-menu:hover{border-color:var(--bronze)} .item-menu .ic{font-size:21px} .item-menu .rot{font-size:12px;font-weight:600;line-height:1.3} .item-menu.bloqueado{opacity:.5} .item-menu.bloqueado .rot::after{content:' 🔒'} /* ------------------------------------------------------------- ELEMENTOS -- */ .cabecalho-pagina{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:4px 0 16px;flex-wrap:wrap} .cabecalho-pagina h2{font-size:23px} .cabecalho-pagina p{margin:4px 0 0;font-size:13px;color:var(--tinta-3)} .acoes-pagina{display:flex;gap:7px;flex-wrap:wrap} .cartao{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);margin-bottom:13px;overflow:hidden} .cartao-topo{padding:13px 15px;border-bottom:1px solid var(--linha-2);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} .cartao-topo h3{font-size:16.5px} .cartao-topo .sub{font-size:12px;color:var(--tinta-3);margin-top:3px} .cartao-corpo{padding:15px} .cartao-corpo.sem-pad{padding:0} .grade{display:grid;gap:10px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(2,1fr)} .kpi{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);padding:13px;box-shadow:var(--sombra)} .kpi .rotulo{font-size:11px;text-transform:uppercase;letter-spacing:.085em;color:var(--tinta-3);font-weight:700} .kpi .valor{font-family:var(--serif);font-size:22px;margin-top:6px;color:var(--tinta);line-height:1.18} .kpi .nota{font-size:12px;color:var(--tinta-3);margin-top:5px} .kpi.destaque{border-left:3px solid var(--bronze)} .kpi.ruim .valor{color:var(--alerta)} .kpi.bom .valor{color:var(--ok)} .etq{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap} .etq-ok{background:var(--ok-bg);color:var(--ok)} .etq-alerta{background:var(--alerta-bg);color:var(--alerta)} .etq-aviso{background:var(--aviso-bg);color:var(--aviso)} .etq-info{background:var(--info-bg);color:var(--info)} .etq-neutro{background:var(--papel-2);color:var(--tinta-2)} .filtros{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px} .filtros input,.filtros select{padding:9px 11px;border:1px solid var(--linha);border-radius:9px;background:var(--campo);color:var(--tinta);font-size:14px} .filtros input[type=search],.filtros input.cresce{flex:1;min-width:150px} /* controle segmentado: navegação por seções que funciona como filtro */ .segmento{ display:flex;gap:5px;overflow-x:auto;padding:5px;margin-bottom:15px; background:var(--papel-2);border:1px solid var(--linha);border-radius:13px; -webkit-overflow-scrolling:touch;scrollbar-width:none; } .segmento::-webkit-scrollbar{display:none} .segmento button{ flex:1 0 auto;white-space:nowrap;padding:10px 15px;border:none;border-radius:9px; background:none;color:var(--tinta-2);font-weight:600;font-size:14px;cursor:pointer; } .segmento button:hover{color:var(--tinta)} .segmento button.sel{background:var(--card);color:var(--bronze);box-shadow:var(--sombra)} .tabela-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch} table.tab{width:100%;border-collapse:collapse;font-size:14px;min-width:560px} table.tab th{ text-align:left;padding:10px 13px;background:var(--tabela-cab);color:var(--tinta-2); font-size:11px;text-transform:uppercase;letter-spacing:.075em;font-weight:700; border-bottom:1px solid var(--linha);white-space:nowrap; } table.tab td{padding:11px 13px;border-bottom:1px solid var(--linha-2);vertical-align:middle} table.tab tbody tr:hover{background:var(--tabela-hover)} table.tab tr.clicavel{cursor:pointer} table.tab td.num,table.tab th.num{text-align:right;white-space:nowrap} table.tab tr.linha-alerta td{background:var(--alerta-bg)} table.tab tfoot td{font-weight:700;background:var(--tabela-cab);border-top:1px solid var(--linha)} .lista{list-style:none;margin:0;padding:0} .lista li{padding:12px 15px;border-bottom:1px solid var(--linha-2);display:flex;gap:10px;align-items:center;justify-content:space-between} .lista li:last-child{border-bottom:none} .lista .principal{font-weight:600;font-size:14.5px} .lista .secundario{font-size:12.5px;color:var(--tinta-3);margin-top:3px} .vazio{padding:28px 16px;text-align:center;color:var(--tinta-3);font-size:14px;line-height:1.6} .linha-dado{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--linha-2);font-size:14px} .linha-dado:last-child{border-bottom:none} .linha-dado span:first-child{color:var(--tinta-3)} .linha-dado span:last-child{text-align:right;font-weight:600} .barra{height:9px;background:var(--barra-trilho);border-radius:5px;overflow:hidden} .barra > i{display:block;height:100%;background:var(--bronze);border-radius:5px} .barra.verde > i{background:var(--ok)} .barra.vermelha > i{background:var(--alerta)} .grafico-barras{display:flex;align-items:flex-end;gap:10px;height:155px;padding:8px 4px 0} .grafico-barras .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%} .grafico-barras .haste{width:100%;max-width:54px;background:linear-gradient(180deg,var(--bronze-claro),var(--bronze));border-radius:5px 5px 0 0;min-height:3px} .grafico-barras .cap{font-size:11px;color:var(--tinta-3);text-align:center;line-height:1.25} .grafico-barras .vlr{font-size:11px;font-weight:700;color:var(--tinta-2);font-variant-numeric:tabular-nums} .aviso-bloqueio{ background:var(--aviso-bg);border:1px solid var(--aviso);border-left-width:4px; border-radius:var(--raio);padding:17px;color:var(--tinta); } .aviso-bloqueio h3{color:var(--aviso);font-size:17px;margin-bottom:7px} .aviso-bloqueio p{margin:0;font-size:14px;line-height:1.6} .faixa-demo{ background:var(--info-bg);border:1px dashed var(--info);border-radius:9px;padding:10px 13px; font-size:13px;color:var(--info);margin-bottom:13px;line-height:1.55; } /* ---------------------------------------------------------------- MODAL --- */ .modal-fundo{position:fixed;inset:0;background:var(--modal-veu);z-index:70;display:none;align-items:flex-end;justify-content:center} .modal-fundo.ativo{display:flex} .modal{ background:var(--papel);width:100%;max-width:740px;max-height:92vh;overflow:auto; border-radius:16px 16px 0 0;box-shadow:var(--sombra-forte); } .modal-topo{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--linha); padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;z-index:2} .modal-topo h3{font-size:17.5px} .modal-topo .fechar{background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:var(--tinta-3);padding:0 4px} .modal-corpo{padding:15px 16px} .modal-rodape{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--linha); padding:12px 16px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap} .toast{ position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:calc(var(--alt-nav) + 16px); background:var(--topo-bg);color:var(--topo-tinta);padding:12px 18px;border-radius:24px;font-size:14px;z-index:90; box-shadow:var(--sombra-forte);opacity:0;pointer-events:none; transition:opacity .2s ease, transform .2s ease;max-width:90vw;text-align:center; border:1px solid var(--linha); } .toast.ativo{opacity:1;transform:translateX(-50%) translateY(0)} .toast.erro{background:var(--alerta);color:#fff;border-color:var(--alerta)} .toast.ok{background:var(--ok);color:#fff;border-color:var(--ok)} .rodape-demo{text-align:center;padding:20px 12px 8px;font-size:12px;color:var(--tinta-3);line-height:1.6} .rodape-demo button{margin-top:8px} /* ========================================================================== DOCUMENTOS (carnê, contrato) — são folhas de papel: ficam SEMPRE claros, nos dois temas, porque representam o que sai na impressora. ========================================================================== */ .folha{ background:#ffffff;color:#1a1a1a; --f-linha:#cfcfcf;--f-fraco:#5c5c5c;--f-forte:#1a1a1a; } .folha h1,.folha h2,.folha h3,.folha h4{color:#1a1a1a} .carne-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px} .carne-folha{background:#fff;color:#1a1a1a;padding:14px;margin:0 auto;max-width:800px;min-width:640px;border-radius:8px} .carne-parcela{ border:1px solid #333;border-radius:4px;margin-bottom:9px;display:flex;overflow:hidden; font-family:var(--sans);font-size:11.5px;background:#fff;color:#1a1a1a; } .carne-canhoto{width:33%;border-right:1px dashed #333;padding:9px 10px;background:#fafafa} .carne-principal{flex:1;padding:9px 11px} .carne-parcela h4{font-family:var(--serif);font-size:13px;margin:0 0 5px;color:#1a1a1a} .carne-linha{display:flex;justify-content:space-between;gap:8px;padding:2px 0;border-bottom:1px dotted #ccc} .carne-cab{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #333;padding-bottom:9px;margin-bottom:11px} .carne-cab .emp{font-family:var(--serif);font-size:17px;font-weight:700} .carne-cab .cnpj{font-size:10.5px;color:#555} .carne-parcela.paga{background:#f4f7f4} .carne-selo{ display:inline-block;border:1.5px solid #3d6349;color:#3d6349;border-radius:3px; padding:1px 6px;font-size:10px;font-weight:700;transform:rotate(-4deg); } .carne-selo.atraso{border-color:#8a3535;color:#8a3535} .contrato-folha{background:#fff;color:#1a1a1a;padding:18px;font-size:13.5px;line-height:1.7;max-width:800px;margin:0 auto;border-radius:8px} .contrato-folha h2{text-align:center;font-size:17px;margin-bottom:5px;color:#1a1a1a} .contrato-folha .sub-c{text-align:center;font-size:12px;color:#666;margin-bottom:18px} .contrato-folha h4{margin:16px 0 6px;font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:#1a1a1a} .contrato-folha ol{padding-left:19px;margin:6px 0} .contrato-folha ol li{margin-bottom:8px;text-align:justify} .contrato-folha table.tab{color:#1a1a1a} .contrato-folha table.tab th{background:#eee;color:#333} .contrato-folha table.tab td{border-bottom-color:#ddd} .assinaturas{display:flex;gap:28px;margin-top:36px} .assinaturas div{flex:1;text-align:center;border-top:1px solid #333;padding-top:6px;font-size:12px} /* ========================================================== CARTÃO BENEFÍCIOS */ .cartao-beneficio{ background:linear-gradient(135deg,#2b3036 0%,#3d454d 52%,#1f2429 100%);color:#f2ece1; border-radius:15px;padding:18px;box-shadow:var(--sombra-forte);position:relative;overflow:hidden; border:1px solid rgba(195,163,112,.32); } .cartao-beneficio::after{ content:'';position:absolute;right:-46px;top:-46px;width:165px;height:165px;border-radius:50%; border:1px solid rgba(195,163,112,.22); } .cartao-beneficio::before{ content:'';position:absolute;right:-84px;bottom:-84px;width:210px;height:210px;border-radius:50%; border:1px solid rgba(242,236,225,.07); } .cb-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;position:relative} .cb-marca{font-family:var(--serif);font-size:14px;letter-spacing:.07em;color:#dcc59a} .cb-categoria{ font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; border:1px solid rgba(220,197,154,.6);color:#dcc59a;border-radius:14px;padding:3px 11px;white-space:nowrap; } .cb-nome{font-family:var(--serif);font-size:20px;margin-top:20px;position:relative;line-height:1.2} .cb-numero{font-family:var(--mono);font-size:14px;letter-spacing:.22em;margin-top:8px;color:#e6ddcd;position:relative} .cb-rodape{display:flex;justify-content:space-between;gap:14px;margin-top:16px;font-size:11.5px;position:relative} .cb-rodape .rot{opacity:.62;text-transform:uppercase;letter-spacing:.07em;font-size:9.5px;display:block} .cb-rodape b{font-weight:600} .parceiro{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border-bottom:1px solid var(--linha-2)} .parceiro:last-child{border-bottom:none} .parceiro-ic{ width:40px;height:40px;border-radius:10px;flex:0 0 auto;background:var(--bronze-suave);color:var(--bronze); display:flex;align-items:center;justify-content:center;font-size:19px; } .parceiro-txt{flex:1;min-width:0} .parceiro-txt .nome{font-weight:700;font-size:14.5px} .parceiro-txt .cat{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-3);font-weight:600;margin-top:1px} .parceiro-txt .ben{font-size:13.5px;color:var(--tinta-2);margin-top:5px;line-height:1.5} .parceiro-txt .end{font-size:12px;color:var(--tinta-3);margin-top:4px} .parceiro-desc{ flex:0 0 auto;font-family:var(--serif);font-size:19px;font-weight:700;color:var(--bronze); text-align:right;line-height:1.1; } .parceiro-desc small{display:block;font-family:var(--sans);font-size:10px;font-weight:600; text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-3)} .res-grupo{margin-bottom:15px} .res-grupo h4{font-size:12px;text-transform:uppercase;letter-spacing:.085em;color:var(--tinta-3);margin-bottom:7px} /* ------------------------------------------------------------- DESKTOP ---- */ @media(min-width:900px){ .nav-inferior{display:none} .conteudo{padding:calc(var(--alt-header) + 20px) 24px 44px 254px;max-width:1420px} .barra-nav-lateral{ display:block;position:fixed;top:var(--alt-header);left:0;bottom:0;width:232px;background:var(--card); border-right:1px solid var(--linha);overflow-y:auto;padding:12px 11px 30px;z-index:30; } .barra-nav-lateral .grupo{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--tinta-3); font-weight:700;padding:13px 10px 6px} .barra-nav-lateral button{ width:100%;display:flex;align-items:center;gap:11px;background:none;border:none;cursor:pointer; padding:10px;border-radius:9px;color:var(--tinta-2);font-size:14px;text-align:left;font-weight:500; } .barra-nav-lateral button:hover{background:var(--papel-2);color:var(--tinta)} .barra-nav-lateral button.sel{background:var(--bronze-suave);color:var(--bronze);font-weight:700} .barra-nav-lateral button.bloqueado{opacity:.45} .barra-nav-lateral button .ic{font-size:16px;width:20px;text-align:center;flex:0 0 auto} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .modal-fundo{align-items:center;padding:22px} .modal{border-radius:16px} .toast{bottom:26px} .grafico-barras{height:195px} .segmento{display:inline-flex} } /* --------------------------------------------------------------- PRINT ---- */ @media print{ @page{size:A4 portrait;margin:12mm} /* Impressão sempre em papel branco, mesmo com o sistema em tema escuro. Os três seletores existem para empatar em especificidade com o bloco :root:not([data-tema="claro"]) do prefers-color-scheme e vencer por vir depois no arquivo — sem isso, imprimir no tema escuro sairia preto. */ :root, :root:not([data-tema="claro"]), :root[data-tema="escuro"]{ --papel:#fff;--papel-2:#f2f2f2;--card:#fff;--campo:#fff; --tinta:#000;--tinta-2:#333;--tinta-3:#555; --linha:#999;--linha-2:#ccc;--tabela-cab:#eee;--tabela-hover:#fff; color-scheme:light; } body{background:#fff;color:#000;font-size:11px} .topo,.nav-inferior,.barra-nav-lateral,.modal-topo,.modal-rodape,.rodape-demo, .filtros,.segmento,.acoes-pagina,.faixa-demo,.nao-imprime,.sheet,.sheet-fundo,.toast{display:none !important} .conteudo{padding:0 !important;max-width:none} body.imprimindo .conteudo{display:none !important} .modal-fundo{display:none !important} .modal-fundo.imprimir{position:static;display:block !important;background:none;padding:0} .modal{max-width:none;max-height:none;box-shadow:none;border-radius:0;background:#fff;overflow:visible} .modal-corpo{padding:0} .cartao{box-shadow:none;border:none;margin:0} .carne-rolagem{overflow:visible !important} .carne-folha{min-width:0 !important;max-width:none;padding:0} .carne-parcela{page-break-inside:avoid;border-color:#000} .contrato-folha{padding:0} .contrato-folha h4{page-break-after:avoid} .assinaturas{page-break-inside:avoid} .cartao-beneficio{background:#fff !important;color:#000 !important;border:1.5px solid #333;box-shadow:none; -webkit-print-color-adjust:exact;print-color-adjust:exact} .cartao-beneficio .cb-marca,.cartao-beneficio .cb-categoria,.cartao-beneficio .cb-numero{color:#333} table.tab{min-width:0;font-size:10px} table.tab th{background:#eee !important;-webkit-print-color-adjust:exact;print-color-adjust:exact} .so-impressao{display:block !important} } .so-impressao{display:none}