/* ======== Look "cristal líquido": capa visual encima de styles.css ======== */
:root{
  --font:'Inter','Segoe UI',system-ui,sans-serif;
  --r1:#ff3b6b;--r2:#34d37a;--r3:#2cb6f0;
  --glass:rgba(26,27,32,.55);--glass-strong:rgba(22,23,28,.82);
  --border:rgba(255,255,255,.11);
  --ease:cubic-bezier(.2,.8,.2,1);
}
html[data-theme=light]{--glass:rgba(255,255,255,.6);--glass-strong:rgba(255,255,255,.9)}
html[data-wall=ash] .wall{background:radial-gradient(ellipse at 10% 0%,#2b2d36,transparent 55%),radial-gradient(ellipse at 100% 100%,#1b2230,transparent 55%),#0a0b0f}
body{font-family:var(--font);letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
button,.btn{border-radius:999px;transition:transform .18s var(--ease),background .2s,box-shadow .2s}
button:active{transform:scale(.95)}
button.pri{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 78%,#fff),var(--accent) 55%,color-mix(in srgb,var(--accent) 85%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 22px color-mix(in srgb,var(--accent) 45%,transparent);font-weight:600}
button.pri:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 28px color-mix(in srgb,var(--accent) 65%,transparent);transform:translateY(-1px)}
button.gl:not(.pri){background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
button.on{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 78%,#fff),var(--accent))!important;color:#fff}

/* Cristal con brillo especular y foco de luz que sigue al cursor */
.card.glass,.col.glass,.pill.glass,.hero,.side.glass{position:relative;overflow:hidden;isolation:isolate}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,-20%),rgba(255,255,255,.12),transparent 62%),linear-gradient(135deg,rgba(255,255,255,.12),transparent 32%,transparent 72%,rgba(255,255,255,.05))}
html[data-glass=solid] .glass::before{display:none}
.glass{border-radius:26px;border-color:var(--border);box-shadow:0 24px 48px -12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.03)}
.card{transition:transform .35s var(--ease),box-shadow .35s}
.card.glass:hover{transform:translateY(-3px)}
.card h3{text-transform:none;letter-spacing:0;font-size:16px;color:var(--text);font-weight:650}
.card h3 small{font-weight:400;color:var(--muted);font-size:13px}

/* Barra superior en píldoras */
.top{display:flex;align-items:center;gap:12px;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none}
.pill{border-radius:999px;display:flex;align-items:center;padding:6px}
.pill h1{font-size:15px;font-weight:650;padding:6px 18px;margin:0}
.pill.tools{gap:4px;padding:5px}
.pill.tools input{background:transparent;border:0;width:170px;padding:7px 12px;outline:none}
.grow{flex:1}
.ib{width:38px;height:38px;border-radius:50%;padding:0;background:transparent;border:0;font-size:16px;position:relative;display:grid;place-items:center}
.ib:hover{background:rgba(255,255,255,.12)}
.ping{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 0 2px var(--glass-strong)}

/* Saludo, chips y botones del inicio */
.greet h1{font-size:clamp(30px,3.4vw,46px);font-weight:750;letter-spacing:-.03em;margin:0}
.greet p{margin:8px 0 0;color:var(--muted)}
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.chip{padding:14px 18px;border-radius:22px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.chip span{display:block;color:var(--muted);font-size:13px}
.chip b{font-size:26px;font-weight:700;letter-spacing:-.02em}.chip b small{font-size:15px;color:var(--muted);font-weight:500}
.cta{display:flex;gap:12px;flex-wrap:wrap}.cta button{padding:13px 24px;font-size:15px}
.cta .pri{flex:1;min-width:220px;max-width:520px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Anillos de actividad */
.ringwrap{display:flex;align-items:center;gap:22px}
.rings{width:150px;height:150px;flex:none}
.rtrack,.rbar{fill:none;stroke-width:9}
.rtrack{opacity:.22}
.rbar{stroke-linecap:round;transform:rotate(-90deg);transform-origin:60px 60px;animation:ringIn 1.1s var(--ease) both}
@keyframes ringIn{from{stroke-dashoffset:var(--C)}}
.rlegend{display:flex;flex-direction:column;gap:12px;flex:1}
.rlegend div{border-left:3px solid var(--c);padding-left:12px}
.rlegend span{display:block;font-size:13px;color:var(--muted)}
.rlegend b{font-size:22px}.rlegend small{font-size:13px;color:var(--muted);font-weight:500}
.fring{position:relative;width:150px;height:150px;flex:none}
.fring svg{width:100%;height:100%}
.rbar.f{animation:none;transform:rotate(-90deg);transition:stroke-dashoffset 1s linear}
.fring .timer{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-size:30px}

/* Tarjeta «Lo siguiente» */
.nexthero{border-radius:20px;padding:18px;margin-bottom:12px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 28%,transparent),color-mix(in srgb,var(--accent) 6%,transparent))}
.nexthero small{color:var(--muted)}.nexthero h4{margin:6px 0 10px;font-size:20px;letter-spacing:-.02em}
.nexthero .meta{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.nexthero-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.who{display:flex;align-items:center;gap:8px;font-size:13px}
.check{width:22px;height:22px;border-radius:50%;padding:0;border:2px solid var(--muted);background:transparent;flex:none}
.check:hover{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 30%,transparent)}

/* Barras de la semana */
.mini{height:150px;gap:10px;align-items:stretch}
.mcol{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;border-radius:14px;background:rgba(127,127,127,.12);padding:6px}
.mcol i{width:100%;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.55),var(--accent));opacity:.75;transform-origin:bottom;animation:grow .8s var(--ease) both}
.mcol.now{background:color-mix(in srgb,var(--accent) 22%,transparent)}.mcol.now i{opacity:1}
.mcol em{font-style:normal;font-size:11px;color:var(--muted)}
@keyframes grow{from{transform:scaleY(0)}}

/* Entrada escalonada al cambiar de vista */
.enter>*{animation:rise .55s var(--ease) both}
.enter>*:nth-child(2){animation-delay:.05s}.enter>*:nth-child(3){animation-delay:.1s}.enter>*:nth-child(4){animation-delay:.15s}.enter>*:nth-child(n+5){animation-delay:.2s}
.enter .dash>.card{animation:rise .6s var(--ease) both}
.enter .dash>.card:nth-child(2){animation-delay:.08s}.enter .dash>.card:nth-child(3){animation-delay:.16s}.enter .dash>.card:nth-child(n+4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}}
.wall::before,.wall::after{animation:drift 22s ease-in-out infinite alternate}
.wall::after{animation-duration:28s;animation-direction:alternate-reverse}
@keyframes drift{to{transform:translate(6vw,4vh) scale(1.12)}}
.nav a,.nav a.on{border-radius:999px}
.task,.row{border-radius:16px}
dialog{border-radius:26px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Barra de pestañas flotante en móvil */
@media(max-width:860px){
  body{padding-bottom:92px}
  .app{grid-template-columns:minmax(0,1fr);padding:12px;gap:14px}
  .me{display:none}
  .nav a{align-self:center}
  .side{position:fixed!important;left:12px;right:12px;bottom:12px;top:auto;z-index:15;height:auto;border-radius:999px;padding:6px;overflow-x:auto;flex-direction:row;scrollbar-width:none}
  .nav{display:flex;gap:2px;width:100%;justify-content:space-between}
  .nav a{flex-direction:column;gap:2px;padding:8px 10px;font-size:10px;align-items:center;min-width:54px;white-space:nowrap}
  .pill.tools input{width:90px}
  .fab{bottom:96px}.ai{bottom:96px}
  .rings,.fring{width:128px;height:128px}
  .ringwrap{gap:16px}
}
.card a,.top a{text-decoration:none}

/* ---- Proyectos, Insights, Equipo, Ajustes ---- */
@media(min-width:760px){.dash>.c6{grid-column:span 6}}
@media(min-width:1180px){.dash>.c6{grid-column:span 6}}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}
.proj{--pc:var(--accent);display:flex;flex-direction:column;gap:14px;background-image:radial-gradient(420px circle at 0% 0%,color-mix(in srgb,var(--pc) 22%,transparent),transparent 60%)}
.proj-head,.phead{display:flex;align-items:center;gap:14px}
.proj h4,.person h4{margin:0;font-size:18px;letter-spacing:-.02em}
.proj small,.person small{color:var(--muted)}
.pring{position:relative;width:64px;height:64px;flex:none}
.pring svg{width:100%;height:100%}
.pring b{position:absolute;inset:0;display:grid;place-items:center;font-size:14px}
.pring .rtrack,.pring .rbar{stroke-width:7}
.proj-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px}
.proj-meta b{color:var(--text);font-weight:600}
.tl{display:flex;flex-direction:column;gap:2px;position:relative;margin:2px 0}
.ms{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:12px;cursor:pointer;position:relative}
.ms:hover{background:rgba(127,127,127,.12)}
.ms input{position:absolute;opacity:0;pointer-events:none}
.ms i{width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);flex:none;display:grid;place-items:center;transition:all .25s var(--ease)}
.ms.done i{background:var(--pc);border-color:var(--pc);box-shadow:0 0 12px color-mix(in srgb,var(--pc) 60%,transparent)}
.ms.done i::after{content:"✓";color:#fff;font-size:12px;font-weight:700}
.ms.done span{text-decoration:line-through;opacity:.55}
.ms:focus-within i{outline:2px solid var(--accent);outline-offset:2px}

.dtrack,.dseg{fill:none;stroke-width:12}
.dtrack{stroke:rgba(127,127,127,.2)}
.dseg{stroke-linecap:butt;animation:dIn 1s var(--ease) both}
@keyframes dIn{from{opacity:0}}
.hb{display:grid;grid-template-columns:minmax(80px,1.1fr) 2fr 34px;align-items:center;gap:12px;font-size:13px}
.hb span{display:flex;align-items:center;gap:8px;text-transform:capitalize;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hb b{text-align:right}
.hb .bar{height:10px}
.hb .bar i{animation:barIn .9s var(--ease) both;transform-origin:left}
@keyframes barIn{from{transform:scaleX(0)}}
.mcol{position:relative}.mv{font-size:12px;font-weight:600}

.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.person{display:flex;flex-direction:column;gap:12px}
.avwrap{position:relative;display:inline-block}
.status{position:absolute;right:0;bottom:0;width:14px;height:14px;border-radius:50%;background:var(--ok);border:3px solid var(--glass-strong)}
.status.off{background:var(--muted)}
.mail{word-break:break-all}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.pstats div{padding:10px 4px;border-radius:14px;background:rgba(127,127,127,.12)}
.pstats b{display:block;font-size:20px}.pstats small{font-size:11px}

.setrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--border)}
.setrow:first-of-type{border-top:0}
.setrow>span{font-weight:600;min-width:80px}
.swgrid{display:flex;gap:10px;flex-wrap:wrap}
.sw{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border-radius:18px;background:transparent;border:2px solid transparent;font-size:11px;color:var(--muted)}
.sw i{width:44px;height:44px;border-radius:14px;display:block;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 10px rgba(0,0,0,.3)}
.sw.on{border-color:var(--accent);color:var(--text);background:rgba(127,127,127,.12)}
.hint{color:var(--muted);font-size:13px;line-height:1.5;margin:10px 0 14px}