:root{
  --bg:#0A0E11; --panel:#12171B; --panel2:#171D22; --border:#232B31; --border-soft:#1B2126;
  --text:#E7EDF0; --muted:#7C8A93; --muted2:#57646C;
  --red:#FF3B30; --amber:#F5A623; --green:#2FD9A8; --blue:#33B1FF;
  --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
::selection{background:var(--red); color:#000;}

/* ---------- LOGIN ---------- */
.login-screen{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 30%, #14191D, #05070A);
}
.login-box{
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:28px; width:100%; max-width:340px; text-align:center;
}
.login-hint{font-size:12.5px; color:var(--muted); margin-bottom:14px; line-height:1.5;}
.login-box input{
  width:100%; background:var(--panel2); border:1px solid var(--border); color:var(--text);
  border-radius:6px; padding:10px 12px; font-size:13px; font-family:var(--font-mono);
}
.login-box input:focus{outline:none; border-color:var(--red);}
.login-error{color:var(--red); font-size:11.5px; margin-top:10px; min-height:14px;}

/* ---------- HEADER / STATUS BAR ---------- */
header{
  display:flex; align-items:center; gap:20px;
  padding:12px 18px; background:linear-gradient(180deg,#14191D,#101418);
  border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px;}
.tally{
  width:10px; height:10px; border-radius:50%; background:var(--red);
  box-shadow:0 0 8px 2px rgba(255,59,48,.55);
  animation:pulse 1.6s ease-in-out infinite; flex-shrink:0;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.brand h1{
  font-family:var(--font-display); font-size:15px; letter-spacing:.14em; font-weight:700; color:var(--text);
}
.brand span{color:var(--muted); font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;}

.pgm{
  display:flex; align-items:center; gap:10px; background:#0D1114; border:1px solid var(--border);
  border-radius:6px; padding:6px 12px; font-family:var(--font-mono);
}
.pgm .lbl{font-size:10px; color:var(--red); letter-spacing:.12em; font-weight:600;}
.pgm .val{font-size:18px; font-weight:600; color:var(--text);}
.bar{width:110px; height:5px; border-radius:3px; background:#232B31; overflow:hidden;}
.bar > i{display:block; height:100%; background:linear-gradient(90deg,var(--red),var(--amber),var(--green)); transition:width .4s ease;}
.pgm .sub{font-size:10px; color:var(--muted);}

.controls{display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap;}
.controls select, .controls button, .controls input[type=text]{
  background:var(--panel2); color:var(--text); border:1px solid var(--border);
  border-radius:5px; padding:7px 10px; font-family:var(--font-body); font-size:12px; cursor:pointer;
}
.controls select:hover, .controls button:hover{border-color:var(--muted2);}
.toggle{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); cursor:pointer; user-select:none;}
.toggle input{accent-color:var(--red); cursor:pointer;}
.btn-primary{background:var(--red)!important; color:#fff!important; border-color:var(--red)!important; font-weight:600; border:none; padding:11px; border-radius:6px; cursor:pointer; font-size:13px;}
.btn-primary:hover{filter:brightness(1.08);}

/* ---------- LEGEND ---------- */
.legend{display:flex; gap:14px; padding:6px 18px; background:#0D1114; border-bottom:1px solid var(--border-soft);
  font-family:var(--font-mono); font-size:10px; color:var(--muted); letter-spacing:.05em; flex-wrap:wrap;}
.legend b{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; vertical-align:middle;}

/* ---------- BOARD ---------- */
#board{
  display:flex; gap:12px; padding:14px 18px; overflow-x:auto; overflow-y:hidden;
  height:calc(100vh - 116px);
}
#board::-webkit-scrollbar{height:9px;}
#board::-webkit-scrollbar-thumb{background:#232B31; border-radius:5px;}
#board::-webkit-scrollbar-track{background:transparent;}

.column{
  min-width:270px; max-width:270px; background:var(--panel); border:1px solid var(--border);
  border-radius:8px; display:flex; flex-direction:column; flex-shrink:0; max-height:100%;
}
.column.dragover{border-color:var(--red); box-shadow:0 0 0 1px var(--red) inset;}
.col-head{padding:10px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px;}
.col-strip{width:4px; height:16px; border-radius:2px; flex-shrink:0;}
.col-head h2{font-family:var(--font-display); font-size:12.5px; font-weight:600; letter-spacing:.03em; flex:1;}
.col-count{font-family:var(--font-mono); font-size:10.5px; color:var(--muted); background:#0D1114;
  border:1px solid var(--border); border-radius:10px; padding:1px 7px;}
.col-body{flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:8px;}
.col-body::-webkit-scrollbar{width:6px;}
.col-body::-webkit-scrollbar-thumb{background:#232B31; border-radius:5px;}
.col-add{margin:0 8px 10px; padding:7px; font-size:11px; color:var(--muted); background:transparent;
  border:1px dashed var(--border); border-radius:6px; text-align:center; cursor:pointer; font-family:var(--font-body);}
.col-add:hover{color:var(--text); border-color:var(--muted2);}

/* ---------- CARD ---------- */
.card{
  background:var(--panel2); border:1px solid var(--border); border-left:3px solid var(--muted2);
  border-radius:6px; padding:9px 10px; cursor:grab; transition:transform .12s ease, border-color .12s ease;
}
.card:hover{border-color:#33404A; transform:translateY(-1px);}
.card.dragging{opacity:.35;}
.card.p-Alta{border-left-color:var(--red);}
.card.p-Media{border-left-color:var(--amber);}
.card.p-Baja{border-left-color:var(--green);}
.card.done{opacity:.5;}
.card.done .card-title{text-decoration:line-through;}
.card-title{font-size:12.5px; font-weight:500; line-height:1.35; margin-bottom:6px;}
.card-meta{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.badge{font-family:var(--font-mono); font-size:9px; letter-spacing:.04em; padding:2px 6px; border-radius:4px; border:1px solid var(--border);}
.badge-mvp{color:#0A0E11; background:var(--blue); border-color:var(--blue); font-weight:700;}
.badge-fase{color:var(--muted);}
.chk-progress{display:flex; align-items:center; gap:5px; margin-top:7px;}
.chk-progress .bar{width:100%; flex:1;}
.chk-progress span{font-family:var(--font-mono); font-size:9.5px; color:var(--muted2);}

/* ---------- MODAL ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(5,7,9,.72); backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; z-index:50; padding:20px;
}
.overlay.open{display:flex;}
.modal{
  background:var(--panel); border:1px solid var(--border); border-radius:10px; width:100%; max-width:520px;
  max-height:86vh; overflow-y:auto; padding:22px;
}
.modal::-webkit-scrollbar{width:6px;}
.modal::-webkit-scrollbar-thumb{background:#232B31; border-radius:5px;}
.modal-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:14px;}
.modal-list{font-family:var(--font-mono); font-size:10px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase;}
.modal h2{font-family:var(--font-display); font-size:17px; margin-top:4px; line-height:1.3;}
.modal .close{background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; line-height:1;}
.modal .close:hover{color:var(--text);}
.modal-row{margin-bottom:16px;}
.modal-label{font-family:var(--font-mono); font-size:10px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; display:block;}
.modal p.desc{font-size:13px; line-height:1.55; color:#C9D2D6;}
.tag-row{display:flex; gap:6px; flex-wrap:wrap;}
.tag{font-family:var(--font-mono); font-size:10px; padding:3px 8px; border-radius:4px; border:1px solid var(--border); color:var(--muted);}
.chk-item{display:flex; align-items:center; gap:8px; padding:6px 0; font-size:12.5px; border-bottom:1px solid var(--border-soft);}
.chk-item:last-child{border-bottom:none;}
.chk-item input{accent-color:var(--green); cursor:pointer; width:14px; height:14px;}
.chk-item.checked span{text-decoration:line-through; color:var(--muted2);}
.dep-list{font-size:12.5px; color:#C9D2D6; line-height:1.6;}
.modal-actions{display:flex; gap:8px; margin-top:20px; flex-wrap:wrap;}
.modal-actions button{
  flex:1; min-width:120px; background:var(--panel2); color:var(--text); border:1px solid var(--border);
  border-radius:6px; padding:9px; font-size:12px; cursor:pointer; font-family:var(--font-body); font-weight:500;
}
.modal-actions button:hover{border-color:var(--muted2);}
.modal-actions .mark-done{background:var(--green); color:#062018; border-color:var(--green); font-weight:700;}
.modal-actions .mark-done.is-done{background:var(--panel2); color:var(--text);}
.move-select{width:100%; margin-top:6px; background:var(--panel2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:8px; font-size:12px;}

footer.hint{
  font-family:var(--font-mono); font-size:10px; color:var(--muted2); text-align:center; padding:6px;
  border-top:1px solid var(--border-soft);
}

@media (max-width: 640px){
  header{gap:10px;}
  .pgm{order:3; width:100%;}
  .controls{order:2;}
}