/* Premium Ultra: progress + skeleton */ .progress{ width:100%; height:12px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); overflow:hidden; } .progress > i{ display:block; height:100%; width:35%; background: linear-gradient(90deg, rgba(250,204,21,.85), rgba(34,197,94,.75)); border-radius:999px; animation: indeterminate 1.35s ease-in-out infinite; } @keyframes indeterminate{ 0%{transform:translateX(-110%)} 100%{transform:translateX(340%)} } .skeleton{ position:relative; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius: 14px; overflow:hidden; } .skeleton::after{ content:""; position:absolute; inset:0; transform: translateX(-120%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); animation: shimmer 1.2s infinite; } @keyframes shimmer{ 100%{ transform: translateX(120%); } } .sk-line{ height:12px; margin:10px 0; } .sk-line.big{ height:18px; } .sk-box{ height:220px; width:220px; } @media(max-width:520px){ .sk-box{ width:180px; height:180px; } } .hidden{ display:none !important; } /* ========================= MODO SOL (alto contraste) Ative com: ========================= */ html.sun body{ background:#f7f7f7 !important; color:#0b0f18 !important; } html.sun .card, html.sun .topbar, html.sun .cal, html.sun .slots .slot, html.sun .slots button, html.sun .select, html.sun .input{ background:#ffffff !important; color:#0b0f18 !important; border:2px solid rgba(0,0,0,.15) !important; box-shadow:none !important; } html.sun .muted, html.sun .sub, html.sun .tagline{ color:rgba(0,0,0,.70) !important; } html.sun .btn, html.sun .btn-ghost, html.sun .nav{ background:#ffffff !important; color:#0b0f18 !important; border:2px solid rgba(0,0,0,.25) !important; } html.sun .btn-primary{ background:#ffcc00 !important; color:#111 !important; border:0 !important; } html.sun a{ color:#0b4bff !important; } /* reduz “vidro/blur” que vira espelho no sol */ html.sun *{ backdrop-filter:none !important; } /* ========================= MODO Responsivo ========================= */ @media (max-width: 480px){ .wrap{ padding: 0 12px !important; margin: 14px auto 24px !important; } .cards{ grid-template-columns: 1fr !important; } .card{ padding: 16px !important; border-radius: 16px !important; } /* tipografia mais legível no sol */ body{ font-size: 16px !important; } h2{ font-size: 20px !important; } /* áreas de toque (mín. ~44px) */ .btn, .btn-primary, .btn-ghost, .nav{ min-height: 46px !important; padding: 12px 14px !important; border-radius: 14px !important; } /* inputs maiores */ .select, .input{ min-height: 46px !important; font-size: 16px !important; } /* slots/horários mais “clicáveis” */ .slots .slot, .slots button{ padding: 12px 12px !important; border-radius: 14px !important; } }