@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #eef0f6;
  --panel: #ffffff;
  --border: #dde0ea;
  --text: #1c1e29;
  --muted: #868ba0;
  --brand: #e11d6f;
  --none-bg: #f2f3f8;
  --none-border: #d8dbe6;
  --none-text: #9195a8;
  --pending-bg: #fff8e8;
  --pending-border: #e29b0e;
  --pending-text: #a15c00;
  --approved-bg: #eafbf1;
  --approved-border: #1fa855;
  --approved-text: #128a41;
  --locked-bg: #f4f5f9;
  --locked-border: #e4e6ee;
  --locked-text: #c7cad8;
  --opt-bg: #f7f0ff;
  --opt-border: #9333ea;
  --opt-text: #7e22ce;
  --cursando-bg: #eaf2ff;
  --cursando-border: #3b82f6;
  --cursando-text: #1d4ed8;
  --expired-bg: #fdecec;
  --expired-border: #dc2626;
  --expired-text: #b91c1c;
  --titulo-color: #a16207;
  --topbar-bg: rgba(255,255,255,0.85);
  --grid-line: rgba(20,20,40,0.035);
  --shadow: rgba(20,20,50,0.12);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0f14;
    --panel: #13151c;
    --border: #1f2130;
    --text: #dde1f0;
    --muted: #4a4f6a;
    --brand: #fb5fa0;
    --none-bg: #181b26;
    --none-border: #2a2f45;
    --none-text: #6b718f;
    --pending-bg: #1a1608;
    --pending-border: #f59e0b;
    --pending-text: #fbbf24;
    --approved-bg: #071812;
    --approved-border: #22c55e;
    --approved-text: #4ade80;
    --locked-bg: #111318;
    --locked-border: #1a1d28;
    --locked-text: #2e3248;
    --opt-bg: #130d1a;
    --opt-border: #a855f7;
    --opt-text: #c084fc;
    --cursando-bg: #071a2e;
    --cursando-border: #3b82f6;
    --cursando-text: #60a5fa;
    --expired-bg: #2a0e0e;
    --expired-border: #ef4444;
    --expired-text: #fca5a5;
    --titulo-color: #eab308;
    --topbar-bg: rgba(13,15,20,0.95);
    --grid-line: rgba(255,255,255,0.018);
    --shadow: rgba(0,0,0,0.55);
  }
}
:root[data-theme="light"] {
  --bg: #eef0f6; --panel: #ffffff; --border: #dde0ea; --text: #1c1e29; --muted: #868ba0; --brand: #e11d6f;
  --none-bg: #f2f3f8; --none-border: #d8dbe6; --none-text: #9195a8;
  --pending-bg: #fff8e8; --pending-border: #e29b0e; --pending-text: #a15c00;
  --approved-bg: #eafbf1; --approved-border: #1fa855; --approved-text: #128a41;
  --locked-bg: #f4f5f9; --locked-border: #e4e6ee; --locked-text: #c7cad8;
  --opt-bg: #f7f0ff; --opt-border: #9333ea; --opt-text: #7e22ce;
  --cursando-bg: #eaf2ff; --cursando-border: #3b82f6; --cursando-text: #1d4ed8;
  --expired-bg: #fdecec; --expired-border: #dc2626; --expired-text: #b91c1c;
  --titulo-color: #a16207;
  --topbar-bg: rgba(255,255,255,0.85); --grid-line: rgba(20,20,40,0.035); --shadow: rgba(20,20,50,0.12);
}
:root[data-theme="dark"] {
  --bg: #0d0f14; --panel: #13151c; --border: #1f2130; --text: #dde1f0; --muted: #4a4f6a; --brand: #fb5fa0;
  --none-bg: #181b26; --none-border: #2a2f45; --none-text: #6b718f;
  --pending-bg: #1a1608; --pending-border: #f59e0b; --pending-text: #fbbf24;
  --approved-bg: #071812; --approved-border: #22c55e; --approved-text: #4ade80;
  --locked-bg: #111318; --locked-border: #1a1d28; --locked-text: #2e3248;
  --opt-bg: #130d1a; --opt-border: #a855f7; --opt-text: #c084fc;
  --cursando-bg: #071a2e; --cursando-border: #3b82f6; --cursando-text: #60a5fa;
  --expired-bg: #2a0e0e; --expired-border: #ef4444; --expired-text: #fca5a5;
  --titulo-color: #eab308;
  --topbar-bg: rgba(13,15,20,0.95); --grid-line: rgba(255,255,255,0.018); --shadow: rgba(0,0,0,0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width:100%; height:100%; overflow:hidden; font-family:'Outfit',sans-serif; background:var(--bg); color:var(--text); }
/* iOS: con un input enfocado dentro de un modal, sin esto la página se reacomoda al abrir
   el teclado y el overlay fixed queda desalineado del resto del contenido */
body.modal-open { position:fixed; }

/* TOP BAR */
#topbar {
  position:fixed; top:0; left:0; right:0; z-index:200; min-height:50px;
  background:var(--topbar-bg); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:8px 16px;
  flex-wrap:wrap; row-gap:6px;
}
#topbar h1 { font-size:15px; font-weight:800; letter-spacing:-.3px; white-space:nowrap; }
#topbar h1 em { font-style:normal; color:var(--brand); }
.tb-div { width:1px; height:22px; background:var(--border); flex-shrink:0; }
.tb-row { display:contents; }
.tb-stat { display:flex; align-items:center; gap:5px; }
.tb-dot { width:7px; height:7px; border-radius:50%; }
.tb-dot.none { background:var(--none-border); }
.tb-dot.locked { background:var(--locked-border); }
.tb-dot.pending { background:var(--pending-border); }
.tb-dot.expired { background:var(--expired-border); }
.tb-dot.cursando { background:var(--cursando-border); }
.tb-dot.approved { background:var(--approved-border); }
.tb-dot.opt { background:var(--opt-border); }
.tb-lbl { font-family:'Outfit',sans-serif; font-size:10px; color:var(--muted); }
.tb-val { font-family:'Outfit',sans-serif; font-size:11px; font-weight:600; }
.tb-val.a { color:var(--approved-text); }
.tb-val.p { color:var(--pending-text); }
.prog-track { width:110px; height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.prog-fill { height:100%; background:linear-gradient(90deg,#f59e0b,#22c55e); border-radius:2px; transition:width .4s; }
.prog-pct { font-family:'Outfit',sans-serif; font-size:10px; color:var(--muted); min-width:28px; }

.btn { font-family:'Outfit',sans-serif; font-size:10px; padding:5px 11px; background:transparent; border:1px solid var(--border); color:var(--muted); border-radius:6px; cursor:pointer; transition:all .2s; white-space:nowrap; }
.btn:hover { border-color:var(--muted); color:var(--text); }
.btn-opt { border-color:#a855f755; color:var(--opt-text); }
.btn-opt:hover { border-color:var(--opt-border); background:#a855f710; }
.btn-opt.active { border-color:var(--opt-border); background:#a855f715; color:var(--opt-text); }
.btn-opt.highlight { animation:btn-opt-pulse 1s ease-in-out infinite; }
/* Deshabilitado en la UI a pedido: la lógica de resetAll() queda intacta para pruebas por consola */
#btn-limpiar { display:none; }
@keyframes btn-opt-pulse {
  0%,100% { box-shadow:0 0 0 0 #a855f755; border-color:var(--opt-border); }
  50% { box-shadow:0 0 0 5px #a855f700; border-color:var(--opt-border); }
}

#career-dropdown { position:relative; }
#career-dropdown-btn {
  font-family:'Outfit',sans-serif; font-size:10.5px; padding:5px 8px;
  background:var(--none-bg); border:1px solid var(--border); color:var(--text);
  border-radius:6px; cursor:pointer; max-width:280px;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
#career-dropdown-btn:hover { border-color:var(--muted); }
#career-dropdown-label { overflow:hidden; text-overflow:ellipsis; }
.career-dropdown-arrow { width:12px; height:12px; flex-shrink:0; color:var(--muted); transition:transform .15s; }
#career-dropdown.open .career-dropdown-arrow { transform:rotate(180deg); }
#career-dropdown-list {
  position:fixed; z-index:600;
  display:none; flex-direction:column; gap:1px;
  max-height:340px; overflow-y:auto; overflow-x:hidden;
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:5px; box-shadow:0 8px 32px var(--shadow);
}
#career-dropdown.open #career-dropdown-list { display:flex; }
.career-opt {
  display:flex; align-items:center; gap:7px; padding:7px 10px; border-radius:6px;
  font-size:12px; color:var(--text); cursor:pointer; white-space:nowrap; transition:background .1s;
}
.career-opt:hover { background:rgba(128,128,128,0.12); }
.career-opt.selected { background:var(--brand); color:#fff; }
.career-opt-check { width:12px; flex-shrink:0; opacity:0; font-size:11px; }
.career-opt.selected .career-opt-check { opacity:1; }

#career-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.plan-chip {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-weight:700; font-size:9.5px; letter-spacing:.3px;
  padding:3px 8px; border-radius:6px; border:1.5px solid; line-height:1.3; white-space:nowrap;
}
.plan-chip.plan-code { color:var(--muted); border-color:var(--border); }

/* LEGEND */
#legend {
  position:fixed; bottom:12px; left:50%; transform:translateX(-50%); z-index:200;
  display:flex; gap:4px; align-items:center;
  background:var(--topbar-bg); backdrop-filter:blur(10px);
  border:1px solid var(--border); border-radius:30px; padding:5px 14px;
  max-width:92vw; overflow-x:auto;
}

/* Barra de progreso flotante, centrada entre el zoom (izq) y los íconos (der) */
#progress-float {
  position:fixed; bottom:12px; left:50%; transform:translateX(-50%); z-index:200;
  display:flex; align-items:center; gap:8px;
  background:var(--topbar-bg); backdrop-filter:blur(10px);
  border:1px solid var(--border); border-radius:30px; padding:8px 16px;
}
/* En mobile no entra centrada entre el zoom y los íconos: se muestra en la fila de optativas */
.prog-wrap-mobile { display:none; }
.leg-item { display:flex; align-items:center; gap:5px; font-family:'Outfit',sans-serif; font-size:10px; color:var(--muted); white-space:nowrap; }
.leg-box { width:11px; height:11px; border-radius:3px; border:1.5px solid; }
.leg-box.none { background:var(--none-bg); border-color:var(--none-border); }
.leg-box.pending { background:var(--pending-bg); border-color:var(--pending-border); }
.leg-box.expired { background:var(--expired-bg); border-color:var(--expired-border); }
.leg-box.cursando { background:var(--cursando-bg); border-color:var(--cursando-border); }
.leg-box.approved { background:var(--approved-bg); border-color:var(--approved-border); }
.leg-box.locked { background:var(--locked-bg); border-color:var(--locked-border); }
.leg-sep { width:1px; height:14px; background:var(--border); margin:0 2px; flex-shrink:0; }

/* FESTEJO AL COMPLETAR EL PLAN */
#confetti-layer { position:fixed; inset:0; z-index:890; overflow:hidden; pointer-events:none; }
.confetti-piece { position:absolute; top:-20px; width:9px; height:14px; opacity:.9; animation:confetti-fall linear forwards; }
@keyframes confetti-fall {
  0% { transform:translateY(0) rotate(0deg); opacity:1; }
  100% { transform:translateY(105vh) rotate(600deg); opacity:.4; }
}
#congrats-banner {
  position:fixed; top:66px; left:50%; z-index:900;
  display:flex; align-items:center; gap:14px;
  background:var(--panel); border:1px solid var(--brand); border-radius:14px;
  padding:14px 20px; box-shadow:0 12px 40px var(--shadow); max-width:calc(100vw - 32px);
  font-family:'Outfit',sans-serif; font-size:14px; font-weight:600; color:var(--text);
  opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;
  transform:translateX(-50%) translateY(-14px);
}
#congrats-banner.show { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
#congrats-close { background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; flex-shrink:0; }
#congrats-close:hover { color:var(--text); }

/* CORNER ICONS */
#corner-icons { position:fixed; bottom:12px; right:16px; z-index:200; display:flex; gap:6px; transition:opacity .2s ease; }
/* Con el cajón de optativas abierto, estos botones quedan tapando las últimas materias de
   la lista: se ocultan mientras esté abierto (no hacen falta para navegar el cajón). */
#canvas-wrap.drawer-open ~ #corner-icons { opacity:0; pointer-events:none; }
.icon-btn {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--topbar-bg); backdrop-filter:blur(10px);
  border:1px solid var(--border); color:var(--muted);
  cursor:pointer; transition:all .15s; text-decoration:none;
}
.icon-btn:hover { color:var(--text); border-color:var(--muted); transform:translateY(-1px); }
#sync-btn.active { color:var(--approved-text); border-color:var(--approved-border); }
#sync-btn.hint-glow { animation:sync-btn-pulse 1s ease-in-out infinite; }
@keyframes sync-btn-pulse {
  0%,100% { box-shadow:0 0 0 0 #22c55e55; border-color:var(--approved-border); }
  50% { box-shadow:0 0 0 5px #22c55e00; border-color:var(--approved-border); }
}
.icon-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.icon-btn.gh svg { fill:currentColor; stroke:none; width:15px; height:15px; }
.icon-btn.coffee svg { fill:currentColor; stroke:none; width:15px; height:15px; }
.chip-btn {
  height:32px; padding:0 14px; border-radius:16px;
  display:flex; align-items:center; gap:6px;
  background:var(--topbar-bg); backdrop-filter:blur(10px);
  border:1px solid var(--border); color:var(--muted);
  font-family:'Outfit',sans-serif; font-size:12px; font-weight:600;
  cursor:pointer; transition:all .15s; white-space:nowrap;
}
.chip-btn:hover { color:var(--text); border-color:var(--muted); transform:translateY(-1px); }
.chip-btn svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* AVISO SUTIL DE GUARDADO (toast, para quienes no descubren el disquete solos) */
#save-hint-toast {
  position:fixed; z-index:250;
  background:var(--panel); border:1px solid var(--approved-border); border-radius:8px;
  padding:7px 12px; font-family:'Outfit',sans-serif; font-size:11.5px; color:var(--text);
  box-shadow:0 4px 16px var(--shadow); white-space:nowrap;
  opacity:0; transform:translateY(4px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
#save-hint-toast.show { opacity:1; transform:translateY(0); pointer-events:auto; }

/* SYNC PANEL */
#sync-panel {
  position:fixed; z-index:600; display:none; flex-direction:column; gap:10px;
  width:260px; max-width:calc(100vw - 16px);
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:14px; box-shadow:0 8px 32px var(--shadow);
  font-family:'Outfit',sans-serif; font-size:12px; color:var(--text);
}
#sync-panel.open { display:flex; }
#sync-hint { color:var(--muted); font-size:11px; line-height:1.4; }
#sync-login-row { display:flex; gap:6px; }
#sync-login-row input {
  flex:1; min-width:0; padding:7px 10px;
  background:var(--bg); border:1px solid var(--border); border-radius:7px;
  font-family:'Outfit',sans-serif; font-size:12px; color:var(--text); outline:none;
}
#sync-login-row input:focus { border-color:var(--brand); }
#sync-login-row button {
  font-weight:700; padding:7px 12px; border-radius:7px; border:1px solid var(--brand);
  background:transparent; color:var(--brand); cursor:pointer; transition:all .15s;
}
#sync-login-row button:hover { background:var(--brand); color:#fff; }
#sync-logged-row { display:none; align-items:center; justify-content:space-between; gap:8px; }
#sync-chip {
  display:flex; align-items:center; gap:6px; font-weight:600;
  padding:5px 10px; border-radius:20px; background:var(--none-bg); border:1px solid var(--border);
}
#sync-logged-row button {
  font-family:'Outfit',sans-serif; font-size:11.5px; font-weight:600; white-space:nowrap;
  padding:6px 10px; border-radius:7px; border:1px solid var(--approved-border);
  background:transparent; color:var(--approved-text); cursor:pointer; transition:all .15s;
}
#sync-logged-row button:hover { background:var(--approved-border); color:#fff; }
#sync-logout-btn {
  display:none; align-self:flex-start; font-family:'Outfit',sans-serif; font-size:11px;
  color:var(--muted); background:none; border:none; cursor:pointer; text-decoration:underline; padding:0;
}
#sync-logout-btn:hover { color:var(--text); }
#sync-panel.logged-in #sync-hint,
#sync-panel.logged-in #sync-login-row { display:none; }
#sync-panel.logged-in #sync-logged-row,
#sync-panel.logged-in #sync-logout-btn { display:flex; }
#sync-msg { font-size:10.5px; color:var(--muted); min-height:13px; }

/* FEEDBACK MODAL */
#feedback-overlay {
  position:fixed; inset:0; z-index:700;
  background:rgba(10,10,20,0.5);
  display:none; align-items:center; justify-content:center;
  padding:16px;
}
#feedback-overlay.show { display:flex; }
#feedback-box {
  position:relative;
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:26px 26px 20px; max-width:420px; width:100%;
  box-shadow:0 20px 60px var(--shadow);
}
#feedback-box h3 { font-size:19px; margin-bottom:14px; color:var(--text); }
#feedback-box p { font-size:13.5px; color:var(--text); line-height:1.55; margin-bottom:12px; }
#feedback-close {
  position:absolute; top:14px; right:14px; background:none; border:none;
  color:var(--muted); font-size:15px; cursor:pointer; line-height:1; padding:4px;
}
#feedback-close:hover { color:var(--text); }
#feedback-text {
  width:100%; min-height:90px; resize:vertical;
  font-family:'Outfit',sans-serif; font-size:13px; color:var(--text);
  background:var(--none-bg); border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; outline:none; margin-bottom:12px; box-sizing:border-box;
}
#feedback-text:focus { border-color:var(--brand); }
#feedback-send {
  font-family:'Outfit',sans-serif; font-weight:600; font-size:13px;
  background:var(--brand); color:#fff; border:none; border-radius:8px;
  padding:9px 18px; cursor:pointer; transition:opacity .15s;
}
#feedback-send:hover { opacity:.85; }
.feedback-note { font-size:12px !important; color:var(--muted) !important; margin-top:14px !important; margin-bottom:0 !important; }
.feedback-note a { color:var(--brand); }

/* HELP MODAL */
#help-overlay {
  position:fixed; inset:0; z-index:700;
  background:rgba(10,10,20,0.5);
  display:none; align-items:center; justify-content:center;
  padding:16px;
}
#help-overlay.show { display:flex; }
#help-box {
  position:relative;
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:26px 26px 22px; max-width:460px; width:100%; max-height:80vh; overflow-y:auto;
  box-shadow:0 20px 60px var(--shadow);
}
#help-box h3 { font-size:19px; margin-bottom:14px; color:var(--text); }
.help-disclaimer { font-size:11.5px; color:var(--muted); line-height:1.5; margin-bottom:16px; font-style:italic; }
#help-close {
  position:absolute; top:14px; right:14px; background:none; border:none;
  color:var(--muted); font-size:15px; cursor:pointer; line-height:1; padding:4px;
}
#help-close:hover { color:var(--text); }
.help-list { padding-left:18px; }
.help-list li { font-size:13px; color:var(--text); line-height:1.55; margin-bottom:12px; }
.help-list li:last-child { margin-bottom:0; }
.help-list b { color:var(--brand); }
.help-list-mobile { display:none; }
.help-list-desktop { list-style:none; padding-left:0; }
.help-list-desktop li { display:flex; gap:10px; align-items:flex-start; }
.help-icon { flex-shrink:0; width:20px; text-align:center; font-size:15px; line-height:1.55; }

/* CANVAS */
#canvas-wrap { position:fixed; top:50px; left:0; right:0; bottom:0; overflow:auto; cursor:grab; transition:right .35s cubic-bezier(.4,0,.2,1); }
#canvas-wrap.grabbing { cursor:grabbing; }
#canvas-wrap.drawer-open { right:360px; }
#canvas-scaler { position:relative; }
#canvas { position:relative; transform-origin:0 0; transition:transform .15s; }

#zoom-controls {
  position:fixed; bottom:12px; left:16px; z-index:200;
  display:flex; align-items:center; gap:6px;
  background:var(--topbar-bg); backdrop-filter:blur(10px);
  border:1px solid var(--border); border-radius:30px; padding:4px 6px;
  transition:opacity .2s ease;
}
#zoom-controls .icon-btn { width:26px; height:26px; padding:0; }
#zoom-controls .icon-btn svg { width:13px; height:13px; }
#zoom-pct { font-size:10px; color:var(--muted); min-width:34px; text-align:center; cursor:pointer; user-select:none; }
#zoom-pct:hover { color:var(--text); }
#svg-layer { position:absolute; top:0; left:0; pointer-events:none; overflow:visible; }

/* NODE */
.node {
  position:absolute; width:148px; border-radius:10px; border:1.5px solid;
  padding:8px 10px 7px; cursor:pointer; transition:transform .15s, box-shadow .15s; user-select:none;
}
.node:hover { transform:scale(1.05); z-index:10; }
.node.drop-hover { outline:2px dashed var(--opt-border); outline-offset:2px; }
/* Mientras se arrastra una optativa, evita que el navegador seleccione texto de por medio */
body.opt-dragging, body.opt-dragging * { user-select:none !important; -webkit-user-select:none !important; }
/* Ghost que sigue al puntero durante el drag & drop propio de optativas (ver optativas-drag.js) */
.opt-drag-ghost {
  position:fixed; top:0; left:0; z-index:1000; pointer-events:none;
  background:var(--panel); border:1.5px solid var(--opt-border); color:var(--opt-text);
  font-family:'Outfit',sans-serif; font-size:11px; font-weight:600;
  padding:6px 12px; border-radius:8px; box-shadow:0 6px 20px var(--shadow);
  max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (pointer:fine) { .node.opt-slot { cursor:grab; } }
.node.locked { background:var(--locked-bg); border-color:var(--locked-border); cursor:not-allowed; opacity:.45; }
.node.none { background:var(--none-bg); border-color:var(--none-border); }
.node.none:hover { border-color:var(--muted); box-shadow:0 0 12px var(--shadow); }
.node.pending { background:var(--pending-bg); border-color:var(--pending-border); box-shadow:0 0 10px #f59e0b1a; }
.node.pending:hover { box-shadow:0 0 18px #f59e0b33; }
.node.expired { background:var(--expired-bg); border-color:var(--expired-border); box-shadow:0 0 10px #dc26261a; }
.node.expired:hover { box-shadow:0 0 18px #dc262633; }
.node.cursando { background:var(--cursando-bg); border-color:var(--cursando-border); box-shadow:0 0 10px #3b82f61a; }
.node.cursando:hover { box-shadow:0 0 18px #3b82f633; }
.node.approved { background:var(--approved-bg); border-color:var(--approved-border); box-shadow:0 0 10px #22c55e1a; }
.node.approved:hover { box-shadow:0 0 18px #22c55e33; }
/* El borde punteado de los slots de Optativa siempre va del color del botón "Optativas",
   sin importar el estado (aprobada/cursando/etc.) — el resto de los colores sigue igual. */
.node.opt-slot, .node.opt-slot:hover { border-color:var(--opt-border); }
.node-code { font-family:'Outfit',sans-serif; font-size:8px; margin-bottom:3px; }
.node.locked .node-code { color:var(--locked-border); }
.node.none .node-code { color:var(--none-border); }
.node.pending .node-code { color:var(--pending-text); }
.node.expired .node-code { color:var(--expired-text); }
.node.cursando .node-code { color:var(--cursando-text); }
.node.approved .node-code { color:var(--approved-text); }
.node-name { font-size:11px; font-weight:600; line-height:1.32; margin-bottom:6px; }
.node.locked .node-name { color:var(--locked-text); }
.node.none .node-name { color:var(--none-text); }
.node.pending .node-name { color:var(--pending-text); }
.node.expired .node-name { color:var(--expired-text); }
.node.cursando .node-name { color:var(--cursando-text); }
.node.approved .node-name { color:var(--approved-text); }
.node-footer { display:flex; align-items:center; justify-content:space-between; }
.node-badge { font-family:'Outfit',sans-serif; font-size:8px; padding:2px 6px; border-radius:20px; }
.node.none .node-badge { background:var(--none-border); color:var(--muted); }
.node.pending .node-badge { background:var(--pending-bg); color:var(--pending-text); }
.node.expired .node-badge { background:var(--expired-bg); color:var(--expired-text); }
.node.cursando .node-badge { background:var(--cursando-bg); color:var(--cursando-text); }
.node.approved .node-badge { background:var(--approved-bg); color:var(--approved-text); }
.node-nota { font-family:'Outfit',sans-serif; font-size:11px; font-weight:600; width:34px; padding:1px 4px; border-radius:4px; border:none; outline:none; background:transparent; cursor:text; text-align:center; color:inherit; }
.node.approved .node-nota { color:var(--approved-text); }
.node.pending .node-nota { color:var(--pending-text); }
.node.expired .node-nota { color:var(--expired-text); }
.node.cursando .node-nota { color:var(--cursando-text); }
.node-nota::placeholder { font-size:8px; color:var(--muted); font-weight:400; }
.node-nota:focus { background:rgba(128,128,128,0.12); }

/* COLUMN HEADERS */
.col-label { position:absolute; top:8px; text-align:center; font-family:'Outfit',sans-serif; font-size:9px; color:var(--muted); letter-spacing:.8px; pointer-events:none; opacity:.7; }
.col-sep { position:absolute; top:0; bottom:0; width:1px; background:var(--border); opacity:.5; pointer-events:none; }
.col-sep-year { width:2px; opacity:1; }
/* Marca el corte entre el título intermedio (Técnico) y el título final del plan.
   La altura de la línea y la posición de la etiqueta se calculan en JS (setupCareerGeometry)
   según dónde termina realmente el contenido de esas columnas, no todo el canvas. */
.col-sep-titulo { width:3px; background:var(--titulo-color); opacity:1; z-index:5; }
.titulo-marker {
  position:absolute; transform:translateX(-50%);
  font-family:'Outfit',sans-serif; font-size:9px; font-weight:700; color:var(--titulo-color);
  background:var(--panel); border:1px solid var(--titulo-color); border-radius:14px; padding:5px 10px;
  white-space:normal; text-align:center; line-height:1.35; width:max-content; max-width:190px;
}

/* OPTATIVAS DRAWER */
#drawer {
  position:fixed; top:50px; right:-360px; bottom:0; width:360px; z-index:150;
  background:var(--panel); border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  transition:right .35s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
#drawer.open { right:0; }
#drawer.drop-hover { box-shadow:inset 0 0 0 2px var(--opt-border); }

#drawer-header {
  padding:16px 18px 12px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
#drawer-header h2 { font-size:14px; font-weight:700; margin-bottom:2px; }
#drawer-header h2 span { color:var(--opt-text); }
#drawer-header p { font-family:'Outfit',sans-serif; font-size:10px; color:var(--muted); }

#drawer-search {
  margin:10px 18px 0;
  padding:7px 10px;
  background:var(--bg); border:1px solid var(--border); border-radius:7px;
  font-family:'Outfit',sans-serif; font-size:11px; color:var(--text);
  outline:none; width:calc(100% - 36px);
  transition:border-color .2s;
}
#drawer-search:focus { border-color:#a855f766; }
#drawer-search::placeholder { color:var(--muted); }

#drawer-filters {
  display:flex; gap:6px; padding:10px 18px 0; flex-shrink:0; flex-wrap:wrap;
}
.filter-btn {
  display:inline-flex; align-items:center;
  font-family:'Outfit',sans-serif; font-size:9px; padding:3px 9px;
  border-radius:20px; border:1px solid var(--border); background:transparent;
  color:var(--muted); cursor:pointer; transition:all .15s;
}
.filter-btn:hover { border-color:var(--muted); color:var(--text); }
.filter-btn.active { border-color:var(--opt-border); color:var(--opt-text); background:#a855f710; }
.filter-btn.f-approved.active { border-color:var(--approved-border); color:var(--approved-text); background:#22c55e10; }
.filter-btn.f-pending.active { border-color:var(--pending-border); color:var(--pending-text); background:#f59e0b10; }
.filter-btn.f-cursando.active { border-color:var(--cursando-border); color:var(--cursando-text); background:#3b82f610; }
.filter-btn.f-none.active { border-color:var(--none-border); color:var(--none-text); background:#8890b010; }
.filter-btn.f-expired.active { border-color:var(--expired-border); color:var(--expired-text); background:#dc262610; }
/* La cantidad de materias en ese estado solo se ve al tocar el filtro. El ancho cambia de
   una sola vez (sin transición) para que el acomodo del flex-wrap no "rebote" a los demás
   filtros durante la animación; solo la opacidad se anima, para que no aparezca de golpe. */
.filter-count {
  display:inline-block; max-width:0; overflow:hidden; white-space:nowrap;
  opacity:0; margin-left:0; font-weight:700;
  transition:opacity .2s ease;
}
.filter-btn.active .filter-count { max-width:30px; opacity:1; margin-left:4px; }

#opt-add-row {
  display:flex; gap:6px; padding:10px 18px; border-bottom:1px solid var(--border); flex-shrink:0;
}
#opt-add-suggestion {
  display:none; align-items:center; gap:8px; flex-shrink:0;
  padding:0 18px 10px; border-bottom:1px solid var(--border);
  font-family:'Outfit',sans-serif; font-size:11px; color:var(--muted);
}
#opt-add-suggestion button {
  font-family:'Outfit',sans-serif; font-size:10.5px; font-weight:600; white-space:nowrap;
  padding:4px 9px; border-radius:6px; border:1px solid var(--opt-border); background:transparent;
  color:var(--opt-text); cursor:pointer;
}
#opt-add-suggestion button:hover { background:var(--opt-border); color:#fff; }
#opt-add-row input {
  flex:1; min-width:0; padding:7px 10px;
  background:var(--bg); border:1px solid var(--border); border-radius:7px;
  font-family:'Outfit',sans-serif; font-size:11px; color:var(--text); outline:none;
}
#opt-add-row input:focus { border-color:var(--brand); }
#opt-add-row input::placeholder { color:var(--muted); }
#opt-add-row button {
  font-family:'Outfit',sans-serif; font-size:11px; font-weight:600; white-space:nowrap;
  padding:7px 12px; border-radius:7px; border:1px solid var(--brand); background:transparent;
  color:var(--brand); cursor:pointer; transition:all .15s;
}
#opt-add-row button:hover { background:var(--brand); color:#fff; }
#opt-add-row button:disabled { border-color:var(--border); color:var(--muted); cursor:default; background:transparent; }
.opt-card-custom-del {
  background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px;
  padding:0 2px; line-height:1;
}
.opt-card-custom-del:hover { color:var(--expired-text); }
.opt-card-assign {
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
  opacity:.75; transition:opacity .15s;
}
.opt-card-assign:hover { opacity:1; }
.opt-card-assign-row { margin-top:4px; }
.opt-card-assign-row .opt-card-assign {
  font-family:'Outfit',sans-serif; font-size:8.5px; font-weight:600; color:var(--opt-text);
}

#drawer-list {
  flex:1; overflow-y:auto; padding:10px 18px 20px;
  display:flex; flex-direction:column; gap:6px;
}
#drawer-list::-webkit-scrollbar { width:4px; }
#drawer-list::-webkit-scrollbar-track { background:transparent; }
#drawer-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.opt-card {
  border-radius:8px; border:1.5px solid; padding:9px 11px;
  cursor:pointer; transition:all .15s; user-select:none;
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
}
.opt-card.none { background:var(--none-bg); border-color:var(--none-border); }
.opt-card.none:hover { border-color:var(--muted); }
.opt-card.pending { background:var(--pending-bg); border-color:var(--pending-border); box-shadow:0 0 8px #f59e0b15; }
.opt-card.expired { background:var(--expired-bg); border-color:var(--expired-border); box-shadow:0 0 8px #dc262615; }
.opt-card.cursando { background:var(--cursando-bg); border-color:var(--cursando-border); box-shadow:0 0 8px #3b82f615; }
.opt-card.approved { background:var(--approved-bg); border-color:var(--approved-border); box-shadow:0 0 8px #22c55e15; }
.opt-card-left { flex:1; min-width:0; }
.opt-card-name { font-size:12px; font-weight:600; line-height:1.3; margin-bottom:3px; }
.opt-card.none .opt-card-name { color:var(--none-text); }
.opt-card.pending .opt-card-name { color:var(--pending-text); }
.opt-card.expired .opt-card-name { color:var(--expired-text); }
.opt-card.cursando .opt-card-name { color:var(--cursando-text); }
.opt-card.approved .opt-card-name { color:var(--approved-text); }
.opt-card-prereq { font-family:'Outfit',sans-serif; font-size:8.5px; color:var(--muted); line-height:1.4; }
.opt-card-prereq.blocked { color:#c0392b; }
.opt-card-slot { font-family:'Outfit',sans-serif; font-size:8.5px; color:var(--opt-text); font-weight:600; margin-top:3px; }
.opt-card.assigned { border-style:solid; box-shadow:0 0 0 1px var(--opt-border); }
@media (pointer:fine) { .opt-card { cursor:grab; } }
.opt-card-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.opt-state-dot { width:8px; height:8px; border-radius:50%; margin-top:2px; }
.opt-card.none .opt-state-dot { background:var(--none-border); }
.opt-card.pending .opt-state-dot { background:var(--pending-border); }
.opt-card.expired .opt-state-dot { background:var(--expired-border); }
.opt-card.cursando .opt-state-dot { background:var(--cursando-border); }
.opt-card.approved .opt-state-dot { background:var(--approved-border); }
.opt-empty { font-family:'Outfit',sans-serif; font-size:11px; color:var(--muted); text-align:center; padding:30px 0; font-style:italic; }

/* CATEGORY HEADER */
.opt-cat-header {
  font-family:'Outfit',sans-serif; font-size:9px; color:var(--muted);
  letter-spacing:1px; text-transform:uppercase;
  padding:8px 0 4px; border-bottom:1px solid var(--border); margin-bottom:2px;
}

/* TOOLTIP */
#tooltip {
  position:fixed; z-index:500;
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  padding:9px 12px; font-size:11px; max-width:210px;
  pointer-events:none; opacity:0; transition:opacity .12s;
  font-family:'Outfit',sans-serif; line-height:1.5;
  box-shadow:0 8px 24px var(--shadow);
}
#tooltip.show { opacity:1; }
#tt-name { font-family:'Outfit',sans-serif; font-size:13px; font-weight:700; margin-bottom:3px; color:var(--text); }
#tt-sub { color:var(--muted); font-size:10px; }
#tt-pre { color:var(--muted); font-size:10px; margin-top:3px; }
#tt-dep { color:var(--opt-text); font-size:9.5px; margin-top:3px; }
#tt-expiry { color:var(--pending-text); font-size:9.5px; margin-top:3px; display:none; }
#tt-hint { color:#3b82f6; font-size:9px; margin-top:5px; font-style:italic; }

/* CONTEXT MENU */
#ctx-menu {
  position:fixed; z-index:600;
  background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:5px; min-width:155px;
  display:none; box-shadow:0 8px 32px var(--shadow);
}
.ctx-item { padding:6px 11px; border-radius:5px; font-size:12px; cursor:pointer; display:flex; align-items:center; gap:7px; transition:background .1s; color:var(--text); }
.ctx-item:hover { background:rgba(128,128,128,0.12); }
.ctx-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.ctx-dot.none { background:var(--none-border); }
.ctx-dot.cursando { background:var(--cursando-border); }
.ctx-dot.pending { background:var(--pending-border); }
.ctx-dot.approved { background:var(--approved-border); }
.ctx-sep { height:1px; background:var(--border); margin:3px 0; }

/* CONFIRM MODAL */
#confirm-overlay, #pending-date-overlay {
  position:fixed; inset:0; z-index:700;
  background:rgba(10,10,20,0.5);
  display:none; align-items:center; justify-content:center;
  padding:16px;
}
#confirm-overlay.show, #pending-date-overlay.show { display:flex; }
#confirm-box, #pending-date-box {
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:22px 22px 16px; max-width:360px; width:100%;
  box-shadow:0 20px 60px var(--shadow);
}
#confirm-msg, .confirm-msg { font-size:14px; color:var(--text); line-height:1.5; margin-bottom:18px; white-space:pre-line; }
#confirm-actions, .confirm-actions { display:flex; justify-content:flex-end; gap:8px; }
#confirm-actions button, .confirm-actions button {
  font-family:'Outfit',sans-serif; font-size:13px; font-weight:600; padding:8px 16px;
  border-radius:8px; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--muted);
  transition:opacity .15s;
}
#confirm-actions button:hover, .confirm-actions button:hover { opacity:.75; }
#confirm-actions button.primary, .confirm-actions button.primary { background:var(--brand); color:#fff; border-color:var(--brand); }
#pending-date-input {
  -webkit-appearance:none; appearance:none;
  width:100%; margin-bottom:18px; padding:8px 10px;
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
  font-family:'Outfit',sans-serif; font-size:13px; color:var(--text); outline:none;
  text-align:center;
}
#pending-date-input::-webkit-date-and-time-value { text-align:center; }
#pending-date-input:focus { border-color:var(--brand); }
.badge-edit-date { cursor:pointer; margin-left:4px; opacity:.7; }
.badge-edit-date:hover { opacity:1; }

@media (max-width:820px) {
  #topbar { gap:10px; }
  .tb-lbl { display:none; }
  #career-dropdown-btn { max-width:150px; }
  .prog-track { width:70px; }
  #tb-creditos, #tb-noncur, #tb-locked, #tb-expired { display:none; }
  .tb-div-sep { display:none; }
  .tb-row { display:flex; flex:1 1 100%; align-items:center; gap:8px 12px; flex-wrap:wrap; }
  #tb-row-main .tb-div { display:none; }
  #tb-row-main .tb-lbl { display:inline; }
  #tb-row-opt { gap:10px; width:100%; }
  #progress-float { display:none; }
  .prog-wrap-mobile { display:contents; }
  #tb-row-opt .prog-track { order:1; flex:1 1 auto; width:auto; }
  #tb-row-opt .prog-pct { order:2; }
  #tb-row-opt .tb-stat { order:3; }
  #tb-row-opt #btn-drawer { order:4; }
  #tb-row-opt .btn:not(.btn-opt) { order:5; }
  .titulo-marker { display:none; }
  .col-sep-titulo { width:2px; bottom:0; }
  .filter-count { display:none; }
  /* Con menos de 16px, iOS Safari hace zoom automático al enfocar un input/textarea */
  #feedback-text, #drawer-search, #opt-add-row input, #sync-login-row input { font-size:16px; }
}

/* Espacio seguro para el home indicator / notch del iPhone */
#legend, #corner-icons, #zoom-controls, #progress-float {
  bottom: calc(12px + env(safe-area-inset-bottom));
}

@media (max-width:700px) {
  /* La leyenda de colores ya está explicada en el modal de ayuda (?) */
  #legend { display:none; }
  .icon-btn.gh { display:none; }
  .help-list-desktop { display:none; }
  .help-list-mobile { display:block; }
  .chip-label { display:none; }
  .chip-btn { padding:0; width:32px; justify-content:center; }
  #corner-icons { gap:5px; right:10px; }
  #zoom-controls { left:10px; }
  /* En mobile el cajón ocupa casi todo el ancho, así que el zoom sí se sigue ocultando
     (a diferencia de desktop, donde queda visible con el cajón abierto). */
  #canvas-wrap.drawer-open ~ #zoom-controls { opacity:0; pointer-events:none; }
  #feedback-box, #confirm-box, #help-box { padding:20px 18px 16px; max-height:85vh; }
}