/* ===================================================================== Rotina — folha de estilo única Tokens conforme o handoff de design. Sem framework, sem build. --------------------------------------------------------------------- Tipografia: - Google Sans Flex (interface) — variável, servida pelo CDN do Fontsource - Google Sans Code (números e rótulos) — via Google Fonts, no - PT Serif (textos de apoio) — via Google Fonts, no Google Sans / Product Sans, a fonte de marca da Google, tem licença restrita e NÃO pode ser usada aqui. Google Sans Flex e Google Sans Code são as versões abertas (livres inclusive para uso comercial). ===================================================================== */ @font-face{ font-family:"Google Sans Flex"; font-style:normal; font-display:swap; font-weight:1 1000; src:url(https://cdn.jsdelivr.net/fontsource/fonts/google-sans-flex:vf@latest/latin-wght-normal.woff2) format("woff2-variations"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Google Sans Flex"; font-style:normal; font-display:swap; font-weight:1 1000; src:url(https://cdn.jsdelivr.net/fontsource/fonts/google-sans-flex:vf@latest/latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ --background: oklch(0.9600 0.0110 240); --foreground: oklch(0.1807 0.0207 239.8394); --card: oklch(1 0 0); --primary: oklch(0.6236 0.1833 147.4139); --primary-foreground: oklch(0.9813 0.0100 238.5069); --muted: oklch(0.9396 0.0204 243.4220); --muted-foreground: oklch(0.4501 0.0191 239.4931); --accent: oklch(0.6999 0.1796 150.1066); --destructive: oklch(0.6207 0.2306 24.9164); --border: oklch(0.8999 0.0196 240.7516); --chart-1: oklch(0.6236 0.1833 147.4139); --chart-2: oklch(0.6236 0.1833 230); --chart-3: oklch(0.6236 0.1833 55); --chart-4: oklch(0.6236 0.1833 300); --chart-5: oklch(0.6207 0.2306 24.9164); --radius: 12px; --sombra: 0 1px 2px hsl(220 25% 20% / .06), 0 4px 14px hsl(220 25% 20% / .07); --sans: "Google Sans Flex", "Google Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --serif: "PT Serif", ui-serif, Georgia, serif; --mono: "Google Sans Code", ui-monospace, SFMono-Regular, monospace; } @media (prefers-color-scheme: dark){ :root{ --background: oklch(0.1289 0.0199 238.9108); --foreground: oklch(0.9513 0.0101 238.5127); --card: oklch(0.1807 0.0207 239.8394); --primary: oklch(0.7007 0.1804 148.9872); --primary-foreground: oklch(0.1004 0.0209 233.5083); --muted: oklch(0.2296 0.0204 243.4220); --muted-foreground: oklch(0.6499 0.0194 240.1577); --accent: oklch(0.7211 0.1805 150.0521); --border: oklch(0.2791 0.0203 242.6079); } } *{box-sizing:border-box;margin:0;padding:0} [hidden]{display:none !important} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} html{background:var(--background)} body{background:var(--background);color:var(--foreground);font-family:var(--sans); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; max-width:430px;margin:0 auto; padding:calc(20px + env(safe-area-inset-top)) 20px calc(104px + env(safe-area-inset-bottom)); min-height:100vh;line-height:1.5} button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none;text-align:left} a{color:var(--primary);text-decoration:none} :focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px} h1{font-size:27px;font-weight:600;letter-spacing:-.025em;line-height:1.2} h2{font-size:16px;font-weight:600;letter-spacing:-.01em} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)} .serif{font-family:var(--serif);font-style:italic;color:var(--muted-foreground);font-size:13px;line-height:1.5} /* -------------------------------------------------------- cabeçalho */ header{padding:0 0 4px;display:flex;justify-content:space-between;align-items:flex-start;gap:14px} header h1{margin-top:10px} .streak{display:flex;align-items:baseline;gap:5px;background:var(--muted);border-radius:999px; padding:7px 14px;white-space:nowrap;flex:0 0 auto;margin-top:2px} .streak b{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--primary)} .streak span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase; color:var(--muted-foreground)} /* -------------------------------------------------------- faixa da semana */ .week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:22px 0 26px;text-align:center} .week .dow{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted-foreground);margin-bottom:10px} .week .bola{width:38px;height:38px;border-radius:50%;background:var(--muted);margin:0 auto; border:1px solid var(--border);display:grid;place-items:center;color:transparent} .week .bola.feito{background:var(--primary);color:#fff} .week .bola.hoje{background:var(--card);border:2px solid var(--foreground)} .week .bola.feito{border-color:var(--primary)} /* -------------------------------------------------------- cards */ .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--sombra);padding:18px;margin-bottom:14px} .card + .seg{margin-top:22px} .view > .card:last-child{margin-bottom:0} .card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px} .card-head h2.mini{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.1em; text-transform:uppercase;color:var(--muted-foreground)} .rotulo{font-size:15px;font-weight:500;margin-bottom:9px;display:block} .tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted-foreground);white-space:nowrap} .vazio{font-family:var(--serif);font-style:italic;color:var(--muted-foreground);font-size:13.5px; text-align:center;padding:22px 8px;line-height:1.5} /* -------------------------------------------------------- lista de exercícios */ .ex{display:flex;align-items:center;gap:12px;padding:17px 0;border-bottom:1px solid var(--border)} .ex:last-child{border-bottom:none} .ex-toque{flex:1;min-width:0} .ex-nome{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em} .ex-dose{display:block;font-family:var(--mono);font-size:12px;color:var(--muted-foreground);margin-top:6px} .chev{color:var(--muted-foreground);display:flex;align-items:center;flex:0 0 auto} .check{flex:0 0 30px;height:30px;border-radius:50%;background:var(--muted);border:1px solid var(--border); display:grid;place-items:center;color:transparent;transition:.15s} .check.on{background:var(--primary);border-color:var(--primary);color:#fff} .ok{color:var(--primary);display:flex;align-items:center} .ex-nome{overflow-wrap:anywhere} /* -------------------------------------------------------- pílulas */ .pills{display:flex;gap:7px;flex-wrap:wrap} .pill{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase; background:var(--muted);color:var(--muted-foreground);border-radius:999px;padding:8px 13px;white-space:nowrap} .pill.on{background:var(--primary);color:var(--primary-foreground)} .pills.num .pill{padding:8px 11px;min-width:34px;text-align:center} .seg{display:flex;background:var(--muted);border-radius:999px;padding:4px;margin-bottom:18px} .seg a{flex:1;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.06em; text-transform:uppercase;padding:9px 4px;border-radius:999px;color:var(--muted-foreground)} .seg a.on{background:var(--primary);color:var(--primary-foreground);font-weight:700} /* -------------------------------------------------------- métricas */ .metrics{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:14px} .metric{background:var(--card);border:1px solid var(--border);border-radius:var(--radius); padding:16px 14px;box-shadow:var(--sombra)} .metric .rot{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)} .val{display:block;font-weight:600;letter-spacing:-.03em;line-height:1.1} .metric .val{font-size:24px;margin:10px 0 7px} .metric .sub{font-family:var(--mono);font-size:11px;line-height:1.4;color:var(--muted-foreground);display:block} .metric .sub.bom{color:var(--primary)} .metric .sub.ruim{color:var(--destructive)} /* -------------------------------------------------------- gráficos */ .grafico{width:100%;display:block;overflow:visible} .legenda{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-family:var(--mono); font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-foreground)} .legenda i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle} .grade{display:grid;grid-template-columns:repeat(12,1fr);gap:3px} .grade .col{display:grid;grid-template-rows:repeat(7,1fr);gap:3px} .grade .q{aspect-ratio:1;border-radius:2.5px;background:var(--muted)} .grade .q.t1{background:color-mix(in oklab, var(--primary) 30%, var(--muted))} .grade .q.t2{background:color-mix(in oklab, var(--primary) 62%, var(--muted))} .grade .q.t3{background:var(--primary)} .cobertura{display:grid;grid-template-columns:58px repeat(7,1fr);gap:5px;align-items:center} .cobertura .rot{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;color:var(--muted-foreground)} .cobertura .c{aspect-ratio:1;border-radius:4px;background:var(--muted)} .cobertura .c.on{background:var(--primary)} .aviso{border:1px solid var(--destructive);border-radius:var(--radius);padding:14px;margin-bottom:12px; background:var(--card);font-size:14px;line-height:1.55} .aviso b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:var(--destructive);margin-bottom:6px} /* -------------------------------------------------------- linha do tempo */ .evento{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--border)} .evento:first-child{border-top:none;padding-top:0} .evento .qd{font-family:var(--mono);font-size:11px;color:var(--muted-foreground);flex:0 0 52px} .evento .tx{flex:1;font-size:14px} .evento .og{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;color:var(--muted-foreground)} /* -------------------------------------------------------- formulários */ label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted-foreground);margin-bottom:8px} input,select,textarea{width:100%;font-family:inherit;font-size:16px;color:var(--foreground); background:var(--background);border:1px solid var(--border);border-radius:10px;padding:13px 14px; transition:border-color .15s} input:focus,select:focus,textarea:focus{border-color:var(--primary);outline:none} textarea{font-size:15px;resize:vertical} .campo{margin-bottom:16px;min-width:0} .linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:12px;align-items:end} .linha.wrap{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .linha-hobby{display:grid;grid-template-columns:84px 1fr;gap:12px} .linha-acao{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end} .linha-acao .campo{flex:1 1 140px;min-width:0;margin-bottom:0} .linha-acao > input{flex:1 1 140px;min-width:0} .linha-acao .btn{flex:0 0 auto;white-space:nowrap;padding:12px 18px} /* -------------------------------------------------------- blocos de rotina */ .bloco-linha{border-top:1px solid var(--border);padding:16px 0} .bloco-linha:first-child{border-top:none;padding-top:0} .bloco-topo{display:flex;align-items:center;gap:11px;margin-bottom:12px} .bloco-rot{flex:1;font-size:14.5px;font-weight:500} .bloco-salvar{margin-top:12px} .bloco-ex .card-head .check{flex:0 0 30px} .bebe-mini{display:block;text-decoration:none;color:inherit} .linha .campo{margin-bottom:16px} input[type="date"]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%} input[type="time"]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%; text-align:center;font-variant-numeric:tabular-nums} /* -------------------------------------------------------- linha só de ação (empilha em vez de estourar) */ .linha-vert{display:flex;flex-direction:column;gap:12px} .linha-vert input{width:100%} .btn{display:block;width:100%;background:var(--primary);color:var(--primary-foreground);font-weight:600; font-size:15px;padding:15px;border-radius:var(--radius);text-align:center;letter-spacing:-.01em} .btn.ghost{background:var(--card);color:var(--foreground);border:1px solid var(--border)} .btn:disabled{opacity:.55} .toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:4px 0} .toggle span{font-size:14px} .toggle input{appearance:none;-webkit-appearance:none;width:46px;height:27px;border-radius:999px; background:var(--muted);position:relative;flex:0 0 46px;transition:.18s;border:none;padding:0} .toggle input::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%; background:var(--card);box-shadow:var(--sombra);transition:.18s} .toggle input:checked{background:var(--primary)} .toggle input:checked::after{transform:translateX(19px)} .token{display:block;font-family:var(--mono);font-size:11px;word-break:break-all;background:var(--muted); padding:11px;border-radius:9px;line-height:1.5} .conta-email{font-family:var(--mono);font-size:12px;color:var(--muted-foreground); margin-bottom:16px;word-break:break-word} .btn.sair{display:flex;align-items:center;justify-content:center;gap:9px; background:transparent;border:1px solid var(--destructive);color:var(--destructive)} .btn.sair svg{flex:0 0 auto} /* -------------------------------------------------------- programas */ .prog-info{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--muted-foreground); background:var(--muted);padding:11px 13px;border-radius:10px;margin:2px 0 6px} .prog-ativo{margin-bottom:6px} .prog-nome{font-size:15px;font-weight:600;display:flex;justify-content:space-between;gap:10px;align-items:baseline} .prog-tam{font-family:var(--mono);font-size:10px;text-transform:uppercase;color:var(--muted-foreground);flex:0 0 auto} .prog-dia{font-family:var(--mono);font-size:12px;color:var(--primary);margin-top:6px} .barra{height:6px;border-radius:999px;background:var(--muted);margin:12px 0 16px;overflow:hidden} .barra span{display:block;height:100%;background:var(--primary);border-radius:999px} .card.prog{padding:18px} .prog .pills{margin:12px 0} .prog .btn{margin-top:4px} .prog.bloqueado{opacity:.6} .prog-aviso{font-family:var(--mono);font-size:11px;color:var(--destructive);margin-top:10px} #lista-programas.recolhido{display:none} /* -------------------------------------------------------- plano e dieta */ .plano{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)} .plano:last-child{border-bottom:none} .plano .dia{font-family:var(--mono);font-size:11px;color:var(--muted-foreground);flex:0 0 46px;text-transform:uppercase} .plano .nm{flex:1;font-size:15px;font-weight:500} .plano.folga .nm{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--muted-foreground)} .ok{color:var(--primary);font-weight:700} .ref{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border)} .ref:last-child{border-bottom:none} .ref .hr{font-family:var(--mono);font-size:11px;color:var(--muted-foreground);flex:0 0 44px;padding-top:3px} .ref p{font-size:15px;line-height:1.45} .ref small{font-family:var(--mono);font-size:10px;text-transform:uppercase;color:var(--muted-foreground)} /* -------------------------------------------------------- modal */ .modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center} .modal .fundo{position:absolute;inset:0;background:hsl(0 0% 0% / .45)} .folha{position:relative;background:var(--card);width:100%;max-width:430px;max-height:86vh;overflow-y:auto; border-radius:18px 18px 0 0;padding:22px 20px calc(30px + env(safe-area-inset-bottom));animation:sobe .22s ease} @keyframes sobe{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}} .folha-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .folha h2{font-size:21px;margin-top:5px} .folha h3{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted-foreground);margin:20px 0 7px} .folha p{font-size:15px;line-height:1.6} .folha .dose{font-family:var(--mono);font-size:13px;color:var(--primary);margin-top:10px} #m-cuidados{font-family:var(--serif);font-style:italic} .folha .carga{display:flex;gap:10px;align-items:flex-end;margin-top:6px} .folha .carga input{flex:1;font-family:var(--mono);font-size:15px} .folha .carga button{flex:0 0 auto;background:var(--primary);color:var(--primary-foreground); font-weight:600;font-size:14px;padding:12px 18px;border-radius:10px} .fechar{font-size:17px;color:var(--muted-foreground);padding:4px 6px} /* -------------------------------------------------------- navegação */ .view{display:none} .view.on{display:block} nav{position:fixed;bottom:0;left:0;right:0;max-width:430px;margin:0 auto;background:var(--card); border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(4,1fr); padding-bottom:env(safe-area-inset-bottom);z-index:30} nav button{padding:11px 2px 13px;display:flex;flex-direction:column;align-items:center;gap:6px; color:var(--muted-foreground);font-family:var(--sans);font-size:11px;font-weight:500; text-align:center;line-height:1.1} nav button.on{color:var(--primary)} nav svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round} /* -------------------------------------------------------- bebê */ .bebe-tab{flex:1;text-align:center} .bebe-sub{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted-foreground);margin:16px 0 6px} .bebe-sub:first-child{margin-top:0} .bebe-item{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--border)} .bebe-cat .bebe-sub + .bebe-item, .bebe-item:first-of-type{border-top:none} .bebe-nome{flex:1;font-size:14.5px} .bebe-nome.feito{color:var(--muted-foreground);text-decoration:line-through} .bebe-del{color:var(--muted-foreground);opacity:.5;flex:0 0 auto;padding:4px} .bebe-del:active{opacity:1} /* -------------------------------------------------------- avisos e login */ .toast{position:fixed;left:20px;right:20px;bottom:96px;max-width:390px;margin:0 auto;background:var(--foreground); color:var(--background);padding:13px 16px;border-radius:10px;font-size:14px;z-index:70;line-height:1.45} .offline{position:fixed;top:0;left:0;right:0;background:var(--destructive);color:#fff;font-family:var(--mono); font-size:10px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:5px;z-index:80} .erro{border:1px solid var(--destructive);color:var(--destructive);padding:11px 13px;border-radius:10px; font-size:14px;margin-bottom:16px} body.tela-login{display:flex;align-items:center;justify-content:center; min-height:100vh;min-height:100dvh;max-width:none;padding:24px} .login-box{width:100%;max-width:352px;background:var(--card);border:1px solid var(--border); border-radius:16px;box-shadow:var(--sombra);padding:32px 26px 28px} .login-box .marca{display:flex;align-items:center;gap:11px;margin-bottom:10px} .login-box .marca svg{flex:0 0 auto} .login-box h1{font-size:25px;line-height:1} .login-sub{font-size:14px;color:var(--muted-foreground);margin:0 0 26px;line-height:1.5;font-family:var(--sans)} .login-box .campo{margin-bottom:18px} .login-box .btn{margin-top:24px} .esqueleto{background:var(--muted);border-radius:8px;height:14px;margin-bottom:8px;animation:pulsa 1.4s ease-in-out infinite} @keyframes pulsa{0%,100%{opacity:1}50%{opacity:.55}} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}