/* ============================================================ Kalorify — Design System (dark, modern, clean) Self-contained. No frameworks. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root{ --bg:#0a0c10; --bg-grad:radial-gradient(1200px 600px at 80% -10%, rgba(34,197,94,.10), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(59,130,246,.08), transparent 55%); --panel:#13161d; --panel-2:#181c24; --panel-3:#1e232c; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --txt:#e9ebf1; --muted:#9aa1ad; --muted-2:#6b7280; --accent:#22c55e; --accent-2:#16a34a; --accent-ink:#04230f; --cal:#22c55e; --pro:#ff6a3d; --carb:#8b5cf6; --fat:#3b82f6; --danger:#ef4444; --radius:18px; --radius-sm:12px; --shadow:0 10px 40px -12px rgba(0,0,0,.6); --sidebar-w:248px; } /* ===== TEMA CLARO (opcional; por defecto SIEMPRE el oscuro) ===== Se activa con . Solo redefine los tokens; el verde de marca y los colores de macros se mantienen. */ html[data-theme="light"]{ /* Paleta clara tipo "Slate" (neutro frío, MUY probado y compatible con el verde de marca). Fondo gris suave + tarjetas blancas con sombra y borde nítido = no se ve "lavado". */ --bg:#eceff4; --bg-grad:radial-gradient(1100px 560px at 85% -10%, rgba(34,197,94,.10), transparent 60%), radial-gradient(820px 460px at 0% 0%, rgba(59,130,246,.06), transparent 55%); --panel:#ffffff; --panel-2:#f3f6fa; --panel-3:#e8edf4; --line:#e2e8f0; --line-2:#cbd5e1; --txt:#0f172a; --muted:#5b6878; --muted-2:#94a3b8; --shadow:0 1px 2px rgba(15,23,42,.06), 0 14px 30px -16px rgba(15,23,42,.20); } /* Tema claro: el MARCO (sidebar/topbar) y algunos detalles tienen color oscuro fijo -> overrides con mayor especificidad (pisan el bg oscuro). NUNCA toca el tema oscuro. */ html[data-theme="light"] .k-sidebar{background:rgba(255,255,255,.88);border-right-color:var(--line)} html[data-theme="light"] .k-topbar{background:rgba(248,250,253,.85);border-bottom-color:var(--line)} html[data-theme="light"] .k-nav a.is-active{color:#15803d;border-color:rgba(34,197,94,.28)} html[data-theme="light"] .k-card{box-shadow:var(--shadow)} html[data-theme="light"] .kf-cw-say b{color:var(--txt)} html[data-theme="light"] .kf-cw-ic:hover{color:var(--txt)} html[data-theme="light"] .kf-cw{border-color:var(--line)} *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); background-image:var(--bg-grad); background-attachment:fixed; color:var(--txt); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; /* red de seguridad: nunca scroll horizontal */ overflow-wrap:break-word; /* corta palabras/URLs largas en móvil */ } a{color:inherit;text-decoration:none} h1,h2,h3,h4,h5{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.2} p{margin:0} img{max-width:100%;display:block} ::selection{background:rgba(34,197,94,.3)} input,select,textarea,button{font-family:inherit} /* scrollbar */ *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:#2a2f3a;border-radius:20px;border:2px solid transparent;background-clip:padding-box} *::-webkit-scrollbar-thumb:hover{background:#3a4150;background-clip:padding-box} /* ---------- helpers ---------- */ .k-muted{color:var(--muted)} .k-flex{display:flex} .k-center{align-items:center} .k-between{justify-content:space-between} .k-wrap{flex-wrap:wrap} .k-grow{flex:1} .k-gap8{gap:8px}.k-gap12{gap:12px}.k-gap16{gap:16px}.k-gap24{gap:24px} .k-mt8{margin-top:8px}.k-mt16{margin-top:16px}.k-mt24{margin-top:24px} .k-mb8{margin-bottom:8px}.k-mb16{margin-bottom:16px}.k-mb24{margin-bottom:24px} .k-hide{display:none} /* ---------- chips / badges ---------- */ .k-chip{ display:inline-flex;align-items:center;gap:7px; padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600; background:var(--panel-3);border:1px solid var(--line);color:var(--muted); } .k-chip.is-accent{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35);color:#86efac} .k-chip.is-xs{padding:3px 9px;font-size:11px;gap:5px;font-weight:600} .k-chip-dot{width:7px;height:7px;border-radius:50%;background:currentColor} /* ---------- buttons ---------- */ .k-btn{ --b:var(--accent); display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:11px 20px;border-radius:12px;font-weight:600;font-size:14.5px; cursor:pointer;border:1px solid transparent;transition:.18s ease;white-space:nowrap; background:linear-gradient(180deg,#28d765,var(--accent-2));color:var(--accent-ink); box-shadow:0 6px 20px -8px rgba(34,197,94,.6); } .k-btn:hover{transform:translateY(-1px);filter:brightness(1.05)} .k-btn:active{transform:translateY(0)} .k-btn.is-ghost{background:var(--panel-2);color:var(--txt);border-color:var(--line-2);box-shadow:none} .k-btn.is-ghost:hover{background:var(--panel-3);border-color:var(--line-2)} .k-btn.is-danger{background:rgba(239,68,68,.12);color:#fca5a5;border-color:rgba(239,68,68,.3);box-shadow:none} .k-btn.is-block{width:100%} .k-btn.is-sm{padding:8px 14px;font-size:13px;border-radius:10px} /* ---------- cards ---------- */ .k-card{ background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid var(--line);border-radius:var(--radius);padding:22px; } .k-card.is-flat{background:var(--panel);box-shadow:none} .k-card-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px} .k-card-title{font-size:16px;font-weight:700} .k-card-sub{font-size:13px;color:var(--muted);margin-top:2px} /* ---------- forms ---------- */ .k-field{margin-bottom:18px} .k-label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px} .k-input,.k-select,.k-textarea{ width:100%;padding:12px 14px;border-radius:12px;font-size:14.5px; background:var(--panel-3);border:1px solid var(--line);color:var(--txt); transition:.15s ease;outline:none; } .k-input::placeholder,.k-textarea::placeholder{color:var(--muted-2)} .k-input:focus,.k-select:focus,.k-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,197,94,.15);background:var(--panel)} .k-input:disabled{opacity:.55;cursor:not-allowed} .k-textarea{min-height:120px;resize:vertical} .k-select{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px} .k-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .k-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} /* rejilla de tarjetas auto-responsive: el min(100%,..) evita desbordes en móvil */ .k-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px} .k-input-pass{position:relative} .k-input-pass .k-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);cursor:pointer;font-size:18px;user-select:none} /* ---------- file upload ---------- */ .k-upload{ position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center; border:1.5px dashed var(--line-2);border-radius:14px;min-height:120px; padding:26px;text-align:center;background:var(--panel-3);cursor:pointer;transition:.15s; } .k-upload:hover{border-color:var(--accent);background:var(--panel)} .k-upload input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer} .k-upload .k-up-ico{font-size:26px;color:var(--accent);margin-bottom:6px} .k-upload-prev{max-width:100%;max-height:160px;border-radius:12px;margin-top:12px;object-fit:cover} /* ============================================================ App shell (dashboard) ============================================================ */ .k-app{display:flex;min-height:100vh} .k-sidebar{ width:var(--sidebar-w);flex-shrink:0;position:fixed;inset:0 auto 0 0;height:100vh;height:100dvh; background:rgba(13,16,21,.7);backdrop-filter:blur(14px); border-right:1px solid var(--line);display:flex;flex-direction:column; padding:22px 16px calc(22px + env(safe-area-inset-bottom));z-index:40; overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; } .k-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 22px} .k-brand-logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center; background:linear-gradient(135deg,#28d765,var(--accent-2));color:var(--accent-ink);font-weight:800;font-size:18px; box-shadow:0 6px 18px -6px rgba(34,197,94,.7)} .k-brand-name{font-weight:800;font-size:17px;letter-spacing:-.02em} .k-brand-sub{font-size:11px;color:var(--muted);font-weight:500;margin-top:-2px} .k-nav{display:flex;flex-direction:column;gap:4px;margin-top:6px} .k-nav-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);font-weight:700;padding:14px 12px 6px} .k-nav a{ display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px; color:var(--muted);font-weight:600;font-size:14.5px;transition:.15s; } .k-nav a svg{width:20px;height:20px;flex-shrink:0} .k-nav a:hover{background:var(--panel-2);color:var(--txt)} .k-nav a.is-active{background:rgba(34,197,94,.12);color:#a7f3c4;border:1px solid rgba(34,197,94,.25)} .k-sidebar-foot{margin-top:auto} .k-main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column} .k-topbar{ position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px; padding:16px 30px;background:rgba(10,12,16,.72);backdrop-filter:blur(12px);border-bottom:1px solid var(--line); } .k-topbar > .k-flex{min-width:0} .k-topbar h1{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .k-burger{display:none;background:var(--panel-2);border:1px solid var(--line);color:var(--txt); width:40px;height:40px;border-radius:10px;cursor:pointer;font-size:18px;flex-shrink:0} .k-user{display:flex;align-items:center;gap:10px} .k-avatar{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#3b82f6,#8b5cf6); display:grid;place-items:center;font-weight:700;color:#fff;font-size:14px} .k-user-name{font-size:14px;font-weight:600;line-height:1.1} .k-user-role{font-size:11.5px;color:var(--muted)} .k-content{padding:30px;max-width:1240px;width:100%;margin:0 auto} /* ---------- macro stat cards ---------- */ .k-macros{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px} .k-macro{position:relative;overflow:hidden} .k-macro::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--c)} .k-macro-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .k-macro-name{font-size:13px;color:var(--muted);font-weight:600} .k-macro-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center; background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)} .k-macro-val{font-size:27px;font-weight:800;letter-spacing:-.03em} .k-macro-val small{font-size:14px;color:var(--muted-2);font-weight:600} .k-bar{height:6px;border-radius:999px;background:var(--panel-3);margin-top:12px;overflow:hidden} .k-bar > span{display:block;height:100%;border-radius:999px;background:var(--c);transition:width .6s ease} .k-bar.is-over > span{background:var(--danger)} /* ---------- table / list ---------- */ .k-list{display:flex;flex-direction:column} .k-list-head,.k-row{display:grid;grid-template-columns:1fr 130px 120px 90px;align-items:center;gap:14px} .k-list-head{padding:0 6px 12px;border-bottom:1px solid var(--line);font-size:12px;text-transform:uppercase; letter-spacing:.06em;color:var(--muted-2);font-weight:700} .k-row{padding:14px 6px;border-bottom:1px solid var(--line);transition:.15s} .k-row:hover{background:var(--panel-2)} .k-row:last-child{border-bottom:none} .k-row-name{font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .k-row-actions{display:flex;gap:8px;justify-content:flex-end} .k-icon-btn{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--panel-3); border:1px solid var(--line);color:var(--muted);transition:.15s} .k-icon-btn:hover{color:var(--txt);border-color:var(--line-2)} .k-icon-btn.is-danger:hover{color:#fca5a5;border-color:rgba(239,68,68,.4)} .k-thumb{width:46px;height:46px;border-radius:10px;object-fit:cover;border:1px solid var(--line)} .k-empty{text-align:center;padding:48px 20px;color:var(--muted)} .k-empty .k-up-ico{font-size:34px;color:var(--muted-2);margin-bottom:10px} .k-pagehead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px} .k-quick{display:flex;gap:10px;flex-wrap:wrap} /* settings two-col rows */ .k-setting{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start} .k-setting .k-set-left h5{font-size:15px;margin-bottom:4px} .k-setting .k-set-left p{font-size:13px;color:var(--muted)} /* ============================================================ Auth pages ============================================================ */ .k-auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr} .k-auth-aside{ position:relative;overflow:hidden;padding:54px;display:flex;flex-direction:column;justify-content:space-between; background:linear-gradient(160deg,#0e1f15,#0a0c10 60%);border-right:1px solid var(--line); } .k-auth-aside::after{content:'';position:absolute;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle,rgba(34,197,94,.25),transparent 65%);top:-120px;right:-120px;filter:blur(10px)} .k-auth-aside .k-brand{padding:0;position:relative;z-index:2} .k-auth-pitch{position:relative;z-index:2} .k-auth-pitch h2{font-size:34px;line-height:1.15;margin-bottom:16px} .k-auth-pitch p{color:var(--muted);max-width:420px;margin-bottom:26px} .k-auth-feats{display:flex;flex-direction:column;gap:14px} .k-auth-feat{display:flex;gap:12px;align-items:flex-start} .k-auth-feat .k-fi{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center; background:rgba(34,197,94,.12);color:var(--accent)} .k-auth-feat b{display:block;font-size:14.5px} .k-auth-feat span{font-size:13px;color:var(--muted)} .k-auth-main{display:flex;align-items:center;justify-content:center;padding:40px 24px} .k-auth-card{width:100%;max-width:400px} .k-auth-card h3{font-size:26px;margin-bottom:6px} .k-auth-card .k-sub{color:var(--muted);margin-bottom:28px;font-size:14px} .k-auth-foot{text-align:center;margin-top:22px;color:var(--muted);font-size:14px} .k-auth-foot a{color:var(--accent);font-weight:600} .k-row-between{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px} .k-check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);cursor:pointer} .k-check input{width:17px;height:17px;accent-color:var(--accent)} .k-link{color:var(--accent);font-weight:600;font-size:13.5px} /* ============================================================ Landing ============================================================ */ .k-land{max-width:1140px;margin:0 auto;padding:26px 24px 80px} .k-topnav{display:flex;align-items:center;justify-content:space-between;padding:6px 0 0} .k-hero{padding:90px 0 60px;text-align:center;position:relative} .k-hero .k-chip{margin-bottom:22px} .k-hero h1{font-size:62px;line-height:1.04;letter-spacing:-.04em;margin-bottom:20px} .k-hero h1 .k-grad{background:linear-gradient(120deg,#28d765,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent} .k-hero p{font-size:18px;color:var(--muted);max-width:600px;margin:0 auto 32px} .k-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .k-hero-glow{position:absolute;width:680px;height:480px;left:50%;top:0;transform:translateX(-50%); background:radial-gradient(circle,rgba(34,197,94,.18),transparent 60%);filter:blur(20px);z-index:-1} .k-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px} .k-feat{padding:24px} .k-feat .k-fi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px; background:color-mix(in srgb,var(--c,#22c55e) 15%,transparent);color:var(--c,#22c55e)} .k-feat h4{font-size:16.5px;margin-bottom:7px} .k-feat p{font-size:14px;color:var(--muted)} .k-section-title{text-align:center;margin:64px 0 8px} .k-section-title h2{font-size:36px;letter-spacing:-.03em} .k-section-title p{color:var(--muted);margin-top:8px} .k-land-cta{margin-top:64px;text-align:center;padding:54px 24px; background:linear-gradient(160deg,rgba(34,197,94,.10),var(--panel-2));border:1px solid var(--line);border-radius:24px} .k-land-cta h2{font-size:32px;margin-bottom:12px} .k-land-cta p{color:var(--muted);margin-bottom:24px} .k-foot{margin-top:60px;padding-top:24px;border-top:1px solid var(--line);display:flex; align-items:center;justify-content:space-between;color:var(--muted);font-size:13.5px;flex-wrap:wrap;gap:12px} /* ---------- macro rings (donut en tiempo real) ---------- */ .k-ring-wrap{position:relative;width:108px;height:108px;margin:2px auto 0} .k-ring{width:108px;height:108px;transform:rotate(-90deg)} .k-ring-bg{fill:none;stroke:var(--panel-3);stroke-width:3.2} .k-ring-fg{fill:none;stroke:var(--c);stroke-width:3.2;stroke-linecap:round;transition:stroke-dasharray .6s ease} .k-ring-fg.is-over{stroke:var(--danger)} .k-ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05} .k-ring-label b{font-size:21px;font-weight:800;letter-spacing:-.02em} .k-ring-label span{font-size:11px;color:var(--muted);margin-top:2px} .k-ring-name{text-align:center;font-size:13px;color:var(--muted);font-weight:600;margin-top:10px} .k-ring-card{display:flex;flex-direction:column;align-items:center} .k-daytoggle{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden} .k-daytoggle button{background:var(--panel-2);color:var(--muted);border:0;padding:7px 14px;font-size:12.5px;font-weight:600;cursor:pointer} .k-daytoggle button.is-active{background:rgba(34,197,94,.15);color:#a7f3c4} /* ---------- notification bell ---------- */ .k-bell{position:relative;width:42px;height:42px;border-radius:11px;display:grid;place-items:center; color:var(--muted);background:var(--panel-2);border:1px solid var(--line);transition:.15s} .k-bell:hover{color:var(--txt);border-color:var(--line-2)} .k-bell-dot{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px; background:var(--danger);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg)} /* water drops (resumen) */ .w-drop{font-size:22px;line-height:1;opacity:.2;transition:.15s ease;filter:grayscale(.4)} .w-drop.is-on{opacity:1;filter:none;transform:translateY(-1px)} /* flash / alerts */ .k-alert{padding:12px 16px;border-radius:12px;font-size:13.5px;margin-bottom:18px; background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#fca5a5} /* ---------- modal ---------- */ .k-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px} .k-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(3px)} .k-modal-card{position:relative;z-index:1;max-width:520px;width:100%;max-height:88vh;overflow:auto} .k-modal-x{position:absolute;top:12px;right:12px;background:var(--panel-3);border:1px solid var(--line); color:var(--muted);width:32px;height:32px;border-radius:9px;cursor:pointer;font-size:14px;line-height:1} .k-modal-x:hover{color:var(--txt);border-color:var(--line-2)} /* ============================================================ Responsive ============================================================ */ @media (max-width:1000px){ .k-auth{grid-template-columns:1fr} .k-auth-aside{display:none} .k-feat-grid,.k-grid-3{grid-template-columns:1fr 1fr} .k-macros{grid-template-columns:1fr 1fr} } @media (max-width:760px){ .k-sidebar{transform:translateX(-100%);transition:transform .25s ease;width:min(86vw,300px)} .k-sidebar.is-open{transform:translateX(0)} .k-main{margin-left:0;overflow-x:hidden} .k-burger{display:grid;place-items:center} .k-topbar{padding:13px 14px;gap:10px} .k-topbar h1{font-size:16px} .k-user-meta{display:none} /* en móvil solo el avatar */ .k-content{padding:16px} .k-card{padding:18px} .k-cards{gap:12px} .k-macros,.k-feat-grid,.k-grid-2,.k-grid-3{grid-template-columns:1fr} .k-setting{grid-template-columns:1fr;gap:14px} .k-hero h1{font-size:38px} .k-list-head{display:none} .k-row{grid-template-columns:1fr auto;gap:8px} .k-row > .k-row-col-hide{display:none} .k-sidebar-backdrop.is-open{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:35} } @media (max-width:420px){ .k-content{padding:13px} .k-card{padding:15px} .k-btn{padding:10px 15px;font-size:13.5px} .k-avatar,.k-bell{width:36px;height:36px} .k-macro-val{font-size:23px} } /* ===================== Acciones rápidas (FAB) + Instalar app (PWA) ===================== */ .k-fab-wrap{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:33; display:none;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none} /* El contenedor NO intercepta clics (área vacía click-through); solo el botón y las acciones abiertas son clicables. Evita tapar lo que haya debajo (p.ej. el editor de avatar). */ .k-fab-btn,.k-fab-wrap.is-open .k-fab-actions{pointer-events:auto} .k-fab-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px; opacity:0;transform:translateY(10px) scale(.97);pointer-events:none;transition:opacity .2s ease,transform .2s ease} .k-fab-wrap.is-open .k-fab-actions{opacity:1;transform:none;pointer-events:auto} .k-fab-action{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px; font-weight:700;font-size:14px;color:#1a1205;background:linear-gradient(135deg,#ffe14d,#f5c518); box-shadow:0 8px 22px -8px rgba(245,197,24,.85);white-space:nowrap; opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease} .k-fab-wrap.is-open .k-fab-action{opacity:1;transform:none} .k-fab-wrap.is-open .k-fab-action:nth-child(1){transition-delay:.16s} .k-fab-wrap.is-open .k-fab-action:nth-child(2){transition-delay:.11s} .k-fab-wrap.is-open .k-fab-action:nth-child(3){transition-delay:.06s} .k-fab-wrap.is-open .k-fab-action:nth-child(4){transition-delay:.02s} .k-fab-action.is-coach{background:linear-gradient(135deg,#7df3a8,#22c55e);color:#04130a; box-shadow:0 8px 24px -6px rgba(34,197,94,.9)} .k-fab-emoji{font-size:18px;line-height:1} .k-fab-btn{width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center; background:linear-gradient(135deg,#ff5a5f,#e11d2a);color:#fff; box-shadow:0 12px 30px -8px rgba(225,29,42,.9);transition:transform .25s ease} .k-fab-btn svg{width:26px;height:26px;transition:transform .25s ease} .k-fab-wrap.is-open .k-fab-btn{transform:rotate(45deg)} .k-install{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:33; display:none;align-items:center;gap:8px;padding:11px 15px;border-radius:999px;border:none;cursor:pointer; font-weight:800;font-size:13.5px;color:#04130a;background:linear-gradient(135deg,#7df3a8,#22c55e); box-shadow:0 10px 26px -8px rgba(34,197,94,.9)} .k-install.is-show{display:inline-flex;animation:kfPageIn .3s ease} .k-install-x{margin-left:2px;opacity:.65;font-weight:800;padding:0 2px} @media (max-width:760px){ .k-fab-wrap{display:flex} } /* ===================== Macros: anillo concéntrico único (móvil) ===================== */ .k-macros-ring{display:none;text-align:center} .k-multiring-wrap{position:relative;width:min(220px,66vw);margin:4px auto 0;aspect-ratio:1/1} .k-multiring{width:100%;height:100%;display:block;overflow:visible} .k-mr-bg{fill:none;stroke:var(--panel-3);stroke-width:5} .k-mr-fg{fill:none;stroke-width:5;stroke-linecap:round;transition:stroke-dasharray .8s cubic-bezier(.4,0,.2,1)} .k-multiring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none} .k-multiring-center b{font-size:26px;font-weight:800;line-height:1.05} .k-multiring-center span{font-size:11px;color:var(--muted);font-weight:600} .k-macros-legend{display:grid;grid-template-columns:1fr 1fr;gap:11px 16px;margin-top:20px;text-align:left} .k-legend-row{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0} .k-legend-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0} .k-legend-name{color:var(--muted);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .k-legend-val{margin-left:auto;font-weight:700;white-space:nowrap} .k-legend-val small{color:var(--muted-2);font-weight:500} @media (max-width:760px){ .k-macros{display:none} .k-macros-ring{display:block} }