/* EL NINJA · Panel frontend (scope: #ninja-front) */
#ninja-front{
  --ink:#101418; --surface:#1A2027; --surface2:#20272F; --line:#2A323C;
  --text:#E9E4D8; --muted:#8B94A0; --jade:#3ECF8E; --coral:#FF6B5E;
  --brand:#E63946; --amber:#F2C14E;
  background:var(--ink); color:var(--text);
  font-family:'Inter',sans-serif; font-size:15px;
  border-radius:0; padding:0;
  width:100vw; max-width:none;
  margin:0 0 0 calc(50% - 50vw);
  overflow:hidden; min-height:100vh;
}
#ninja-front .fbody{max-width:1500px;margin:0 auto}
#ninja-front .hoy-grid{display:grid;grid-template-columns:minmax(340px,460px) 1fr;gap:26px;align-items:start}
@media(max-width:900px){#ninja-front .hoy-grid{grid-template-columns:1fr}}
#ninja-front .ftabs,#ninja-front .fhead{padding-left:max(22px,calc(50vw - 750px + 22px));padding-right:max(22px,calc(50vw - 750px + 22px))}
#ninja-front *{box-sizing:border-box}
#ninja-front h1,#ninja-front h2,#ninja-front h3,#ninja-front .big-time{font-family:'Archivo',sans-serif;color:var(--text)}
#ninja-front button{font-family:'Inter',sans-serif;cursor:pointer;border:none}
#ninja-front input,#ninja-front select,#ninja-front textarea{
  font-family:'Inter',sans-serif;background:var(--ink);border:1px solid var(--line);
  color:var(--text);border-radius:10px;padding:12px 14px;font-size:15px;outline:none;width:100%;
}
#ninja-front input:focus,#ninja-front select:focus,#ninja-front textarea:focus{border-color:var(--brand)}
#ninja-front .num{font-variant-numeric:tabular-nums}
#ninja-front .muted{color:var(--muted)}
#ninja-front .mt{margin-top:14px}
#ninja-front .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* header */
#ninja-front .fhead{display:flex;align-items:center;gap:14px;padding:18px 22px;background:var(--surface);border-bottom:1px solid var(--line)}
#ninja-front .fhead .slash{display:inline-block;width:30px;height:3px;background:var(--brand);transform:rotate(-8deg);border-radius:2px}
#ninja-front .fhead img.flogo{max-height:30px;max-width:120px;object-fit:contain}
#ninja-front .fhead b{font-family:'Archivo';letter-spacing:1.5px;font-size:15px}
#ninja-front .fhead .sp{flex:1}
#ninja-front .avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:700;color:#fff;font-size:14px;flex-shrink:0}
#ninja-front .avatar img{width:100%;height:100%;object-fit:cover}
#ninja-front .fhead a{color:var(--muted);font-size:12px;text-decoration:none}
#ninja-front .fhead a:hover{color:var(--coral)}

/* tabs */
#ninja-front .ftabs{display:flex;gap:6px;padding:14px 22px 0;background:var(--surface);border-bottom:1px solid var(--line)}
#ninja-front .ftabs button{background:transparent;color:var(--muted);padding:10px 16px;border-radius:10px 10px 0 0;font-size:14px;font-weight:600;transition:color .15s}
#ninja-front .ftabs button.on{color:var(--text);background:var(--ink);box-shadow:inset 0 3px 0 var(--brand)}
#ninja-front .fbody{padding:26px 22px}
#ninja-front .fview{display:none}
#ninja-front .fview.active{display:block;animation:nffade .25s ease}
@keyframes nffade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* login */
#ninja-front .flogin{max-width:360px;margin:60px auto;padding:0 20px 60px;text-align:center}
#ninja-front .flogin .slash{display:inline-block;width:50px;height:4px;background:var(--brand);transform:rotate(-8deg);border-radius:2px;margin-bottom:14px}
#ninja-front .flogin h1{font-size:24px;letter-spacing:2px;margin:0 0 4px}
#ninja-front .flogin p{color:var(--muted);font-size:13px;margin:0 0 24px}
#ninja-front .flogin input{margin-bottom:12px;text-align:center}
#ninja-front .err{color:var(--coral);font-size:13px;min-height:18px;margin-top:10px}

/* buttons */
#ninja-front .btn{background:var(--brand);color:#fff;border-radius:10px;padding:13px 22px;font-weight:700;font-size:14px;transition:opacity .15s,transform .1s;width:100%}
#ninja-front .btn:hover{opacity:.9}
#ninja-front .btn:active{transform:scale(.98)}
#ninja-front .btn.auto{width:auto}
#ninja-front .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
#ninja-front .btn.ghost:hover{border-color:var(--brand)}
#ninja-front .btn.mini{padding:7px 13px;font-size:12.5px;width:auto}
#ninja-front .btn.danger{background:transparent;border:1px solid var(--coral);color:var(--coral)}

/* TIMER */
#ninja-front .timer-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;text-align:center;margin-bottom:20px}
#ninja-front .timer-ring{width:190px;height:190px;border-radius:50%;margin:8px auto 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:5px solid var(--line);transition:border-color .3s;position:relative}
#ninja-front .timer-ring.running{border-color:var(--jade);animation:pulse 2s ease-in-out infinite}
#ninja-front .timer-ring.paused{border-color:var(--amber)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(62,207,142,.25)}50%{box-shadow:0 0 0 14px rgba(62,207,142,0)}}
@media(prefers-reduced-motion:reduce){#ninja-front .timer-ring.running{animation:none}}
#ninja-front .big-time{font-size:36px;font-weight:800;letter-spacing:1px;font-variant-numeric:tabular-nums}
#ninja-front .timer-state{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin-top:4px}
#ninja-front .timer-proj{font-size:13px;color:var(--muted);margin-bottom:14px;min-height:18px}
#ninja-front .timer-btns{display:flex;gap:10px;justify-content:center}
#ninja-front .tbtn{width:58px;height:58px;border-radius:50%;font-size:20px;display:flex;align-items:center;justify-content:center;transition:transform .1s,opacity .15s;color:#fff}
#ninja-front .tbtn:active{transform:scale(.92)}
#ninja-front .tbtn.play{background:var(--jade);color:#0b241a}
#ninja-front .tbtn.pause{background:var(--amber);color:#3a2c05}
#ninja-front .tbtn.stop{background:var(--coral);color:#3d100c}
#ninja-front .tbtn:disabled{opacity:.3;cursor:not-allowed}

/* listas de tareas */
#ninja-front .titem{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;display:flex;gap:12px;align-items:center;animation:nffade .2s ease}
#ninja-front .titem .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
#ninja-front .titem .tmain{flex:1;min-width:0}
#ninja-front .titem .tproj{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
#ninja-front .titem .tdesc{font-size:14px;margin-top:2px;word-break:break-word}
#ninja-front .titem .tmin{font-family:'Archivo';font-weight:700;font-size:15px;white-space:nowrap}
#ninja-front .titem .lock{font-size:13px;color:var(--muted)}
#ninja-front .day-head{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1.4px;margin:18px 0 10px;display:flex;justify-content:space-between}

/* form fields */
#ninja-front .flabel{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin:12px 0 6px}
#ninja-front .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){#ninja-front .fgrid{grid-template-columns:1fr}}
#ninja-front .panelbox{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:16px}
#ninja-front .panelbox h3{margin:0 0 8px;font-size:15px}
#ninja-front details.acc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0;margin-bottom:16px;overflow:hidden}
#ninja-front details.acc summary{padding:16px 18px;cursor:pointer;font-weight:600;font-size:14px;list-style:none}
#ninja-front details.acc summary::-webkit-details-marker{display:none}
#ninja-front details.acc[open] summary{border-bottom:1px solid var(--line)}
#ninja-front details.acc .inner{padding:16px 18px}
#ninja-front .empty{text-align:center;padding:40px 16px;color:var(--muted)}

/* modal */
#ninja-front .fmodal-bg{position:fixed;inset:0;background:rgba(8,10,13,.75);z-index:9999;display:flex;align-items:flex-start;justify-content:center;padding:30px 16px;overflow-y:auto;backdrop-filter:blur(2px)}
#ninja-front .fmodal{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;width:100%;max-width:480px;animation:nfpop .22s ease}
@keyframes nfpop{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:none}}
#ninja-front .fmodal h3{margin:0 0 14px;font-size:16px}
#ninja-front .fmodal .m-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}

#ninja-ftoast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,10px);background:#20272F;border:1px solid #2A323C;border-left:3px solid #3ECF8E;padding:13px 20px;border-radius:10px;font-size:13px;color:#E9E4D8;opacity:0;transition:.25s;z-index:99999;max-width:90vw;font-family:'Inter',sans-serif}
#ninja-ftoast.show{opacity:1;transform:translate(-50%,0)}
#ninja-ftoast.error{border-left-color:#FF6B5E}

@media(max-width:600px){
  #ninja-front{margin:0;border-radius:0;min-height:100vh}
  #ninja-front .fbody{padding:16px}
  #ninja-front .ftabs{padding:10px 12px 0;overflow-x:auto}
}

/* ------- PROJECT PICKER ------- */
#ninja-front .pk-btn{display:flex;align-items:center;gap:10px;width:100%;background:var(--ink);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:12px 14px;font-size:15px;text-align:left;transition:border-color .15s}
#ninja-front .pk-btn:hover{border-color:var(--brand)}
#ninja-front .pk-btn .pk-lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ninja-front .pk-btn .pk-lbl.placeholder{color:var(--muted)}
#ninja-front .pk-btn .pk-caret{color:var(--muted);font-size:12px}
#ninja-front .pk-list{max-height:52vh;overflow-y:auto;margin-top:12px;border:1px solid var(--line);border-radius:10px;background:var(--ink)}
#ninja-front .pk-group{position:sticky;top:0;display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--surface2);font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);border-bottom:1px solid var(--line)}
#ninja-front .pk-group img{width:18px;height:18px;border-radius:4px;object-fit:cover}
#ninja-front .pk-item{padding:12px 16px;cursor:pointer;border-bottom:1px solid rgba(42,50,60,.5);transition:background .12s;font-size:14.5px}
#ninja-front .pk-item:last-child{border-bottom:none}
#ninja-front .pk-item:hover{background:var(--surface2)}
#ninja-front .pk-item.sel{box-shadow:inset 3px 0 0 var(--brand);background:var(--surface2)}
#ninja-front .pk-item .sub{font-size:11px;color:var(--muted)}
#ninja-front .dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ------- PERFIL ------- */
#ninja-front .perfil-grid{display:grid;grid-template-columns:280px 1fr;gap:26px;align-items:start;max-width:940px}
@media(max-width:700px){#ninja-front .perfil-grid{grid-template-columns:1fr}}
#ninja-front .perfil-foto{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px 22px;text-align:center}
#ninja-front .perfil-foto .avatar{margin:0 auto;border:3px solid var(--line)}