/* Réplica 4) FOLHA DO LEITE  (Inter, azul #517EB8 / índigo #2E2F91 no web, azul #165DFF no app). Telas em 2x. */
.leite { font-family: Inter, sans-serif; color: #24263A; }
.leite.nb-conteudo { background: #F2F4F8; }

/* web: barra do topo */
.lt-nav { position: absolute; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; gap: 26px; padding: 0 22px; color: #fff; background: linear-gradient(90deg, #517EB8, #4696CD 60%, #53A5DB); z-index: 3; }
.lt-logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.lt-logo i { width: 24px; height: 26px; background: #fff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: inset 0 0 0 6px #2E2F91; }
.lt-nav nav { display: flex; gap: 6px; font-size: 13px; font-weight: 500; }
.lt-nav nav span { padding: 7px 12px; border-radius: 7px; opacity: .85; }
.lt-nav nav .on { background: rgba(255,255,255,.18); opacity: 1; }
.lt-user { margin-left: auto; display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.lt-user b { width: 28px; height: 28px; border-radius: 50%; background: #2E2F91; display: grid; place-items: center; font-size: 11px; }
.lt-main { position: absolute; top: 54px; left: 0; right: 0; bottom: 0; overflow: hidden; }
.lt-pag { padding: 20px 24px; }

.lt-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.lt-titulo h4 { font-size: 22px; font-weight: 700; color: #2E2F91; margin-right: auto; letter-spacing: -.02em; }
.lt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 8px; padding: 9px 14px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.lt-btn .ic { font-size: 15px; }
.lt-btn.verde { background: linear-gradient(90deg, #439881, #53CA03); color: #fff; }
.lt-btn.azul { background: #2E2F91; color: #fff; }
.lt-btn.linha { border: 1.5px solid #C9D3E3; color: #2E2F91; background: #fff; }
.lt-btn.largo { width: 100%; margin-top: 10px; }
.lt-filtros { display: flex; gap: 8px; margin-bottom: 12px; font-size: 12px; color: #61667D; }
.lt-filtros span { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #DDE3EC; border-radius: 8px; padding: 7px 11px; }
.lt-filtros b { color: #24263A; font-weight: 600; }
.lt-filtros .lt-busca { margin-left: auto; width: 210px; color: #9AA0B3; }

.lt-tab { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #DDE3EC; border-radius: 10px; overflow: hidden; font-size: 12.5px; }
.lt-tab th { background: #2E2F91; color: #fff; text-align: left; font-weight: 600; padding: 10px 14px; font-size: 11.5px; letter-spacing: .02em; }
.lt-tab td { padding: 9px 14px; border-top: 1px solid #EDF0F5; white-space: nowrap; }
.lt-tab td b { display: block; font-weight: 600; }
.lt-tab td small { color: #8A90A6; font-size: 11px; }
.lt-acoes { display: inline-flex; gap: 6px; }
.lt-acoes i { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; color: #fff; }
.lt-acoes .v { background: #4696CD; } .lt-acoes .l { background: #F0A23B; } .lt-acoes .x { background: #FF0042; }
#ltNova { display: none; }
#ltNova.on { display: table-row; animation: lt-brilho 2.2s ease-out; }
@keyframes lt-brilho { 0%, 40% { background: #E3F7E9; } 100% { background: #fff; } }

/* web: gerar */
.lt-migalha { font-size: 12px; color: #7C829A; margin-bottom: 14px; }
.lt-gerar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lt-form, .lt-proc { background: #fff; border: 1px solid #DDE3EC; border-radius: 12px; padding: 20px 22px; }
.lt-form h4 { font-size: 19px; font-weight: 700; color: #2E2F91; margin-bottom: 14px; }
.lt-form label { display: block; font-size: 11.5px; font-weight: 600; color: #61667D; margin: 12px 0 6px; }
.lt-campo { display: flex; align-items: center; justify-content: space-between; height: 40px; border: 1.5px solid #CDD5E2; border-radius: 8px; padding: 0 12px; font-size: 13px; }
.lt-campo .ic { color: #8A90A6; font-size: 15px; }
.lt-campo.curto { width: 170px; }
.lt-campo span.digitando::after { content: "|"; color: #2E2F91; margin-left: 1px; }
.lt-dica { font-size: 11.5px; color: #8A90A6; margin: 14px 0 6px; }
.lt-proc h5 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.lt-passo { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid #EDF0F5; opacity: .3; transition: opacity .3s; }
.lt-passo > .ic { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: #DDE3EC; color: #fff; flex: none; transition: background .3s; }
.lt-passo b { display: block; font-size: 13px; }
.lt-passo small { font-size: 11.5px; color: #7C829A; }
.lt-passo.on { opacity: 1; }
.lt-passo.on > .ic { background: #43A35B; }

/* web: folha em PDF */
.lt-pdfbox { position: absolute; inset: 0; background: #5D6271; display: grid; grid-template-columns: 1fr 230px; gap: 18px; padding: 16px 20px 0; }
.lt-papel { background: #fff; padding: 20px 24px; box-shadow: 0 4px 16px rgba(0,0,0,.3); font-size: 11px; }
.lt-pcab { display: flex; justify-content: space-between; align-items: start; border-bottom: 2px solid #2E2F91; padding-bottom: 9px; margin-bottom: 10px; }
.lt-pcab b { display: block; font-size: 14px; color: #2E2F91; letter-spacing: .02em; }
.lt-pcab small { color: #7C829A; font-size: 11px; }
.lt-pcab i { width: 22px; height: 24px; background: #2E2F91; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.lt-pdados { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.lt-pdados span { font-weight: 600; font-size: 11px; }
.lt-pdados small { display: block; font-weight: 400; color: #8A90A6; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; }
.lt-ptab { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.lt-ptab th { background: #EEF0F8; color: #2E2F91; text-align: right; font-weight: 600; padding: 5px 8px; font-size: 10px; }
.lt-ptab td { text-align: right; padding: 4.5px 8px; border-bottom: 1px solid #EEF0F5; }
.lt-ptab th:first-child, .lt-ptab td:first-child { text-align: left; }
.lt-ptab tr.tot td { font-weight: 700; border-top: 1.5px solid #2E2F91; border-bottom: 0; }
.lt-resumo { background: #fff; border-radius: 12px; padding: 18px; align-self: start; }
.lt-resumo small { font-size: 11.5px; color: #7C829A; }
.lt-resumo > b { display: block; font-size: 26px; font-weight: 700; color: #1F7A3F; letter-spacing: -.02em; margin: 2px 0; }
.lt-resumo p { font-size: 12px; color: #61667D; }
.lt-mini { display: grid; gap: 6px; margin: 14px 0 6px; font-size: 12px; }
.lt-mini span { display: flex; align-items: center; gap: 7px; }
.lt-mini i { width: 8px; height: 8px; border-radius: 50%; }
.lt-mini .c { background: #43A35B; } .lt-mini .d { background: #FF0042; }
.lt-mini b { margin-left: auto; font-weight: 600; }
.lt-toast { position: absolute; left: 20px; bottom: 16px; display: flex; gap: 8px; align-items: center; background: #1C1E2B; color: #fff; border-radius: 10px; padding: 10px 14px; font-size: 12.5px; font-weight: 500; opacity: 0; transform: translateY(10px); transition: .4s; }
.lt-toast .ic { color: #6BE08C; }
.lt-toast.on { opacity: 1; transform: none; }

/* app do produtor */
.leite.cel-conteudo { background: #FAFAFA; }
.lt-appbar { position: absolute; top: 0; left: 0; right: 0; height: 104px; padding: 50px 18px 0; display: flex; align-items: center; gap: 14px; background: #165DFF; color: #fff; font-size: 19px; z-index: 2; }
.lt-appbar .ic { font-size: 21px; }
.lt-appbar b { font-weight: 600; }
.lt-burger { display: grid; gap: 4px; }
.lt-burger i { width: 19px; height: 2.5px; background: #fff; border-radius: 2px; }
.lt-acao { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.lt-cpag { position: absolute; top: 104px; left: 0; right: 0; bottom: 0; padding: 16px; overflow: hidden; }
.lt-lat { background: linear-gradient(135deg, #1A47C9, #165DFF); color: #fff; border-radius: 18px; padding: 16px 18px; margin-bottom: 14px; }
.lt-lat small { font-size: 11.5px; opacity: .8; }
.lt-lat b { display: block; font-size: 18px; font-weight: 700; margin: 2px 0; }
.lt-lat span { font-size: 12px; background: rgba(255,255,255,.2); border-radius: 99px; padding: 3px 9px; }
.lt-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lt-tile { position: relative; background: #fff; border-radius: 20px; box-shadow: 0 3px 12px rgba(22,93,255,.1); padding: 18px 14px; display: grid; justify-items: center; gap: 10px; }
.lt-tile span { width: 54px; height: 54px; border-radius: 16px; background: #EAF0FF; color: #165DFF; display: grid; place-items: center; font-size: 26px; }
.lt-tile b { font-size: 14.5px; font-weight: 600; color: #272727; }
.lt-tile em { position: absolute; top: 10px; right: 10px; font-style: normal; font-size: 10px; font-weight: 600; background: #FFF0E0; color: #FF7800; border-radius: 99px; padding: 2px 7px; }
.lt-ultima { display: flex; align-items: center; gap: 12px; margin-top: 14px; background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 3px 12px rgba(0,0,0,.05); }
.lt-ultima > .ic { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: #E8F7EE; color: #22A35A; }
.lt-ultima small { font-size: 11.5px; color: #929497; }
.lt-ultima b { display: block; font-size: 14.5px; }

.lt-rola #ltRolo { transition: transform 1.4s cubic-bezier(.4, 0, .2, 1); }
.lt-rola #ltRolo.desce { transform: translateY(-262px); }
.lt-periodo { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid #D6E0FF; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-weight: 500; margin-bottom: 12px; }
.lt-periodo .ic { color: #165DFF; font-size: 17px; }
.lt-soma { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-bottom: 12px; }
.lt-soma span { background: #fff; border-radius: 14px; padding: 11px 13px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.lt-soma small { font-size: 11px; color: #929497; }
.lt-soma b { display: block; font-size: 20px; font-weight: 700; color: #165DFF; letter-spacing: -.02em; }
.lt-coleta { background: #fff; border-radius: 20px; box-shadow: 0 3px 12px rgba(0,0,0,.06); padding: 13px 16px; margin-bottom: 10px; }
.lt-ccab { display: flex; align-items: center; gap: 9px; padding-bottom: 9px; border-bottom: 1px solid #EEF0F3; margin-bottom: 8px; }
.lt-ccab .ic { color: #165DFF; font-size: 18px; }
.lt-ccab b { font-size: 14px; }
.lt-ccab em { margin-left: auto; font-style: normal; font-weight: 700; font-size: 16px; color: #165DFF; }
.lt-coleta dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12.5px; }
.lt-coleta dt { color: #165DFF; font-weight: 600; }
.lt-coleta dd { color: #272727; text-align: right; }

.lt-gcard { background: #fff; border-radius: 20px; box-shadow: 0 3px 12px rgba(0,0,0,.06); padding: 14px 14px 10px; margin-bottom: 12px; position: relative; }
.lt-gcard > b { font-size: 14px; font-weight: 600; }
.lt-linha { width: 100%; margin-top: 6px; }
.lt-linha .grade path { stroke: #EEF0F3; stroke-width: 1; }
.lt-linha .traco { fill: none; stroke: #165DFF; stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lt-linha .area { fill: #165DFF; opacity: 0; transition: opacity .6s .9s; }
.lt-linha .pts circle { fill: #fff; stroke: #165DFF; stroke-width: 2.5; opacity: 0; transition: opacity .3s 1s; }
.lt-linha .eixo text { font-size: 10px; fill: #929497; text-anchor: middle; font-family: Inter, sans-serif; }
.lt-linha.on .traco { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease-out; }
.lt-linha.on .area { opacity: .08; }
.lt-linha.on .pts circle { opacity: 1; }
.lt-tip { position: absolute; left: 158px; top: 30px; background: #272727; color: #fff; font-size: 11px; font-weight: 600; border-radius: 7px; padding: 5px 8px; opacity: 0; transform: translateY(4px); transition: .3s; }
.lt-tip.on { opacity: 1; transform: none; }
.lt-pz { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.lt-pz svg { width: 108px; flex: none; }
.lt-pz svg circle { transition: stroke-dasharray .9s ease-out; }
#ltPizza { opacity: 0; transform: rotate(-30deg) scale(.9); transition: .7s; }
#ltPizza.on { opacity: 1; transform: none; }
.lt-pz ul { list-style: none; display: grid; gap: 7px; font-size: 12.5px; flex: 1; }
.lt-pz li { display: flex; align-items: center; gap: 7px; }
.lt-pz li i { width: 10px; height: 10px; border-radius: 3px; }
.lt-pz li b { margin-left: auto; font-weight: 600; }