/* =========================================================================
   camino.css — "Tu camino al examen" (plan.html#camino) y su franja en el
   widget Hoy del inicio. Lo arma pintarCamino()/barraCamino() en plan.js.
   Prefijo cm- (ojo: .c, .hbar y .plan ya existen en grado).
   ========================================================================= */
.cmCab{padding:18px 20px}
.cmNums{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.cmNums div{background:#f7f6fb;border:1px solid #e5e3f1;border-radius:14px;padding:12px;text-align:center}
.cmNums b{display:block;font-size:1.5rem;color:#111d39;letter-spacing:-.02em;line-height:1.1}
.cmNums small{font-size:.74rem;color:#5b7280;line-height:1.3}

/* franja de etapas */
.cmBarra{display:flex;align-items:stretch;gap:3px;position:relative;padding-top:20px}
.cmYo{position:absolute;top:0;left:0;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#39169a}
.cmYo::after{content:"";position:absolute;left:8px;top:14px;border:5px solid transparent;border-top-color:#39169a}
.cmSeg{min-width:34px;display:flex;align-items:center;gap:5px;justify-content:center;background:var(--ec);color:#fff;border-radius:8px;padding:7px 6px;font-size:.72rem;font-weight:800;overflow:hidden;white-space:nowrap}
.cmSeg i{font-style:normal;overflow:hidden;text-overflow:ellipsis}
.cmSeg.on{box-shadow:0 0 0 3px #fff,0 0 0 5px #7f55ff}
.cmFlag{flex:none;display:flex;align-items:center;justify-content:center;width:30px;font-size:1.05rem;background:#111d39;border-radius:8px}

/* ruta vertical */
.cmRuta{position:relative;margin:18px 0 0;padding-left:0}
.cmEt{position:relative;display:grid;grid-template-columns:48px 1fr;gap:12px;padding-bottom:18px}
.cmEt::before{content:"";position:absolute;left:23px;top:44px;bottom:0;width:3px;border-radius:3px;background:linear-gradient(var(--ec,#d2cfe3),#e2dfee)}
.cmEt:last-child::before{display:none}
.cmNodo{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.35rem;background:#fff;border:3px solid var(--ec,#111d39);box-shadow:0 8px 18px -10px rgba(17,29,57,.6);position:relative;z-index:1}
.cmEt.ahora .cmNodo{background:var(--ec);box-shadow:0 0 0 5px rgba(127,85,255,.35)}
.cmEt.examen .cmNodo{background:#111d39;border-color:#7f55ff}
.cmCaja{background:#fff;border:1px solid #e3e1f0;border-left:4px solid var(--ec,#111d39);border-radius:16px;padding:14px 16px;box-shadow:0 10px 26px -20px rgba(17,29,57,.5);min-width:0}
.cmEt.examen .cmCaja{background:linear-gradient(135deg,#111d39,#1f3162);color:#ece9fa;border-left-color:#7f55ff}
.cmEt.examen h3{color:#fff}
.cmEt.examen p b{color:#a78bfa}
.cmCaja h3{margin:0 0 2px;font-size:1.06rem;color:#111d39}
.cmCaja>p{margin:6px 0 0;font-size:.88rem;line-height:1.55;color:#6130e8}
.cmEt.examen .cmCaja>p{color:#ddd3ff}
.cmFechas{font-size:.78rem!important;font-weight:700;color:#6b8191!important;margin:0!important}
.cmAqui{display:inline-block;font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#ffffff;background:linear-gradient(135deg,#8b5cff,#6d3cf5);border-radius:99px;padding:3px 10px;margin-bottom:6px}
.cmStats{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.cmStats span{font-size:.74rem;font-weight:700;border-radius:8px;padding:4px 9px;background:#f3f2f9;color:#1f3162}
.cmStats .t-apr,.cmSem u.t-apr,.cmFila .k.t-apr{background:#f1ecff;color:#6d3cf5}
.cmStats .t-pra,.cmSem u.t-pra,.cmFila .k.t-pra{background:#dfd4fd;color:#2d1179}
.cmStats .t-rep,.cmSem u.t-rep,.cmFila .k.t-rep{background:#e3f5ea;color:#1d6b40}
.cmAreas{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.cmA{font-size:.72rem;font-weight:700;border-radius:99px;padding:3px 9px;border:1.5px solid var(--ac);color:var(--ac)}
.cmLlega{font-size:.82rem!important;margin-top:8px!important}
.cmLlega b{color:#1d6b40}

/* semanas */
.cmSem{border:1px solid #e5e3f1;border-radius:12px;margin-top:10px;background:#fbfbfd}
.cmSem.hoy{border-color:#ad94f0;background:#f7f4ff}
.cmSem summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;flex-wrap:wrap}
.cmSem summary::-webkit-details-marker{display:none}
.cmSem summary .ttl{font-weight:800;font-size:.86rem;color:#111d39}
.cmSem summary .ttl::before{content:"▸ ";color:#39169a}
.cmSem[open] summary .ttl::before{content:"▾ "}
.cmSem summary .cnt{display:flex;gap:5px}
.cmSem u{text-decoration:none;font-size:.72rem;font-weight:800;border-radius:7px;padding:2px 7px}
.cmFila{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:start;padding:4px 12px}
.cmFila .k{font-size:.72rem;font-weight:800;border-radius:7px;padding:3px 7px;text-align:center}
.cmFila div{display:flex;flex-wrap:wrap;gap:4px}
.cmT{font-size:.74rem;font-weight:600;border-radius:7px;padding:3px 8px;background:#fff;border:1px solid #e5e3f1;border-left:3px solid var(--ac,#9aabb7);color:#1f3162}
.cmT.mas{border-left-color:#d7d4e9;color:#6b8191}
.cmDias{list-style:none;margin:8px 0 0;padding:0 12px 10px;display:grid;gap:4px}
.cmDias li{display:grid;grid-template-columns:58px 1fr;gap:8px;font-size:.78rem;align-items:start;border-top:1px dashed #e5e3f1;padding-top:5px}
.cmDias li.hoy .dd{color:#39169a}
.cmDias .dd{font-weight:800;color:#6130e8}
.cmDias .bb{display:flex;flex-wrap:wrap;gap:4px}
.cmDias .bb i{font-style:normal;border-radius:6px;padding:2px 7px}
.cmDias .bb i.t-apr{background:#f1ecff;color:#6130e8}
.cmDias .bb i.t-pra{background:#dfd4fd;color:#2b1174}
.cmDias .bb i.t-rep{background:#e3f5ea;color:#1d6b40}
.cmDias .bb i.hecho{text-decoration:line-through;opacity:.6}
.cmDias em{color:#9aabb7;font-style:normal}
@media(max-width:600px){
  .cmEt{grid-template-columns:36px 1fr;gap:9px}
  .cmEt::before{left:17px;top:36px}
  .cmNodo{width:36px;height:36px;font-size:1rem}
  .cmFila{grid-template-columns:1fr}
  .cmFila .k{justify-self:start}
  .cmSeg i{display:none}
}

/* franja en el widget Hoy del inicio (plan-hoy.js) */
.hw-camino{display:block;text-decoration:none;color:inherit;margin:12px 0 2px;padding:10px 12px 10px;border:1.5px solid #e5e3f1;border-radius:14px;background:#fbfbfd;position:relative;z-index:1}
.hw-camino:hover{border-color:#ad94f0}
.hw-camino .cmBarra{padding-top:18px}
.hw-camino .lk{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:.8rem;font-weight:700;color:#6130e8}
.hw-camino .lk b{color:#1f3162}
#camino:target,#camino:focus{outline:none!important;box-shadow:none!important;border:0!important}

.cmAviso{margin:12px 0 0;padding:11px 14px;border-radius:12px;background:#ece5ff;border:1px solid #ad94f0;color:#2b1174;font-size:.86rem;line-height:1.55}
.cmAviso a{font-weight:800;color:#2d1179}

/* =========================================================================
   Camino estilo Duolingo (06-10-2026). Lo arma pintarCamino() en plan.js.
   Va sobre el fondo claro de la app, sin tablero propio; prefijo cd-.
   ========================================================================= */
.cdTablero{margin:10px 0 30px}
.cdStats{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cdStats span{background:#fff;border:1px solid #e2e6ef;border-radius:99px;padding:6px 14px;font-size:.9rem;font-weight:800;box-shadow:0 6px 16px -12px rgba(17,29,57,.5)}
.cdStats .r{color:#e0761b}.cdStats .h{color:#1d8a52}.cdStats .x{color:#6d3cf5}
.cdProg{height:8px;max-width:560px;margin:0 auto;border-radius:99px;background:#e2dff0;overflow:hidden}
.cdProg span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2fbf71,#1d8a52)}
.cdCamino{max-width:560px;margin:0 auto;padding:4px 0 20px}

.cdBanner{border-radius:18px;padding:16px 18px;margin:28px 0 24px;background:var(--ec,#6d3cf5);color:#fff;position:relative;overflow:hidden;box-shadow:0 6px 0 0 color-mix(in srgb,var(--ec,#6d3cf5) 60%,#000)}
.cdBanner.ok{background:#e4f6ec;color:#17603a;box-shadow:0 6px 0 0 #bfe5cf;border:1px solid #bfe5cf}
.cdBanner.fut{background:#fff;color:#111d39;box-shadow:0 6px 0 0 #dcd8ea;border:1px solid #e2e6ef}
.cdBanner small{display:block;font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.cdBanner b{display:block;font-size:1.12rem;margin-top:3px;color:inherit}
.cdBanner p{margin:6px 0 0;font-size:.84rem;opacity:.9;line-height:1.45;max-width:82%;color:inherit}
.cdBanner .ic{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:2.2rem}
.cdBanner.fut small{color:var(--ec,#6d3cf5);opacity:1}
.cdBanner.fut p{color:#5b6477}
.cdBanner.cdMeta{text-align:center;margin-top:34px}

.cdSem{display:flex;align-items:center;gap:12px;margin:16px 0 8px;color:#6b7491;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.cdSem::before,.cdSem::after{content:"";flex:1;height:1px;background:#d9d6e8}
.cdSem.ok{color:#1d8a52}

.cdFila{height:96px;position:relative}
.cdFila.hoy{height:170px}
.cdFila.ex{height:130px}
.cdNodo{position:absolute;top:10px;left:50%;width:84px;height:72px;margin-left:-42px;border:none;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;font:inherit}
.cdFila.hoy .cdNodo{top:74px}
.cdNodo .lado{position:absolute;left:0;right:0;top:12px;height:60px;border-radius:50%;background:var(--s)}
.cdNodo .cara{position:absolute;left:0;right:0;top:0;height:60px;border-radius:50%;background:var(--c);display:flex;align-items:center;justify-content:center;transition:transform .08s;
  background-image:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.35),rgba(255,255,255,0) 60%)}
.cdNodo:active .cara{transform:translateY(8px)}
.cdNodo .e{font-size:1.5rem;line-height:1}
.cdNodo.ok{--c:#2fbf71;--s:#1c8a4e}
.cdNodo.lk{--c:#e6e3f1;--s:#c9c4dc}
.cdNodo.lk .cara{background-image:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.7),rgba(255,255,255,0) 60%)}
.cdNodo.hoy{--c:#8b5cff;--s:#4b23c9}
.cdNodo.hoy .cara{background-image:radial-gradient(ellipse at 50% 40%,#f1ecff 0 22%,#b49bff 40%,#8b5cff 70%);box-shadow:0 0 30px 4px rgba(139,92,255,.45)}
.cdNodo.hoy::before{content:"";position:absolute;left:-12px;right:-12px;top:-8px;height:86px;border-radius:50%;border:3px solid rgba(139,92,255,.55);animation:cdLate 1.8s ease-out infinite}
@keyframes cdLate{from{transform:scale(.92);opacity:1}to{transform:scale(1.18);opacity:0}}
.cdNodo.ex{width:104px;height:84px;margin-left:-52px;top:2px;--c:#1f3162;--s:#111d39}
.cdNodo.ex .lado{top:14px;height:70px}.cdNodo.ex .cara{height:70px}
.cdNodo.lk:hover::after,.cdNodo.sel::after,.cdNodo.ex:hover::after{content:"";position:absolute;left:-9px;right:-9px;top:-6px;height:84px;border-radius:50%;border:2.5px solid #8b5cff}
.cdNodo.ex.sel::after,.cdNodo.ex:hover::after{height:96px}
.cdLuz{position:absolute;left:50%;top:22px;width:62px;margin-left:-31px;height:78px;background:linear-gradient(rgba(139,92,255,0),rgba(139,92,255,.25));border-radius:8px 8px 0 0;pointer-events:none}
.cdGlobo{position:absolute;left:50%;top:6px;z-index:1;margin-left:-19px;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid #d6ccfb;display:flex;align-items:center;justify-content:center;font-weight:900;color:#4b23c9;box-shadow:0 6px 14px -8px rgba(75,35,201,.6)}
.cdGlobo span{font-size:.62rem;letter-spacing:.06em;display:block;animation:cdFlota 2.4s ease-in-out infinite}
@keyframes cdFlota{50%{transform:translateY(-5px)}}

.cdEtq{position:absolute;top:20px;width:190px}
.cdEtq .chip{display:inline-block;font-size:.66rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#4b23c9;background:#f1ecff;border:1px solid #d6ccfb;border-radius:7px;padding:3px 8px}
.cdEtq p{margin:6px 0 0;font-size:.86rem;color:#2a3350;font-weight:600;line-height:1.35}
.cdEtq.ex .chip{color:#111d39;background:#e6e9f3;border-color:#c9cfe2}
.cdInfo{position:absolute;top:18px;width:200px;line-height:1.3}
.cdInfo small{display:block;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6b7491}
.cdInfo b{display:block;font-size:.9rem;margin-top:3px;color:#111d39;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdInfo span{display:block;font-size:.76rem;color:#6b7491;margin-top:2px}
.cdInfo.ok small{color:#1d8a52}.cdInfo.ok b{color:#17603a}
.cdInfo.lk b{color:#4a5270}

/* hoja de abajo */
#cdHoja .cdVelo{position:fixed;inset:0;z-index:90;background:rgba(17,29,57,.35);opacity:0;pointer-events:none;transition:opacity .2s}
#cdHoja .cdIn{position:fixed;left:50%;bottom:0;z-index:91;width:min(560px,100%);transform:translate(-50%,105%);transition:transform .25s ease;background:#fff;color:#17213b;border:1px solid #e2e6ef;border-bottom:none;border-radius:22px 22px 0 0;padding:18px 18px 26px;box-shadow:0 -20px 50px -20px rgba(17,29,57,.5);max-height:80vh;overflow-y:auto}
#cdHoja.on .cdVelo{opacity:1;pointer-events:auto}
#cdHoja.on .cdIn{transform:translate(-50%,0)}
#cdHoja h2{margin:0;font-size:1.08rem;color:#111d39}
#cdHoja .s{margin:3px 0 12px;font-size:.8rem;color:#5b6477}
.cdBl{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:#f6f5fb;border:1px solid #ebe9f4;margin-top:7px;color:#17213b;text-decoration:none}
a.cdBl:hover{background:#f1ecff;border-color:#d6ccfb}
.cdBl .i{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex:none}
.cdBl .i.apr{background:#f1ecff}.cdBl .i.pra{background:#e3ecfb}.cdBl .i.rep{background:#e3f5ea}
.cdBl b{display:block;font-size:.88rem}
.cdBl small{font-size:.74rem;color:#5b6477}
.cdBl .m{margin-left:auto;font-size:.76rem;font-weight:800;color:#5b6477;white-space:nowrap}
.cdBl.hecho b{color:#17603a}
.cdCta{display:block;width:100%;margin-top:14px;font:inherit;font-weight:900;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;border:none;border-radius:14px;padding:14px;cursor:pointer;color:#fff;background:#8b5cff;box-shadow:0 5px 0 0 #4b23c9}
.cdCta:active{transform:translateY(5px);box-shadow:none}
.cdNota{margin:14px 0 0;font-size:.82rem;color:#5b6477;line-height:1.45}
.cdNota.ok{color:#1d8a52;font-weight:800}

@media (max-width:560px){
  .cdEtq{width:118px}
  .cdInfo{width:140px}
  .cdInfo b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}

.cdVerPasado{display:block;margin:6px auto 0;font:inherit;font-size:.82rem;font-weight:800;color:#1d8a52;background:#e4f6ec;border:1px solid #bfe5cf;border-radius:99px;padding:8px 16px;cursor:pointer}
.cdVerPasado:hover{background:#d6f0e1}
.cdPasado{opacity:.6;transition:opacity .2s}
.cdPasado:hover{opacity:1}
.cdPasado[hidden]{display:none}

/* etapas que vienen, cerradas; y semanas de la etapa actual en una fila */
.cdBanner.cdLock{background:#f6f5fb;border:1.5px dashed #cfc9e4;box-shadow:none;margin:22px 0}
.cdBanner.cdLock small{color:#7d7799}
.cdBanner.cdLock b{color:#4a5270}
.cdBanner.cdLock .ic{font-size:1.6rem;opacity:.6}
.cdSemFila{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:10px 0;font:inherit;text-align:left;background:#fff;border:1px solid #e2e6ef;border-radius:14px;padding:12px 16px;cursor:pointer;color:#111d39;box-shadow:0 6px 16px -14px rgba(17,29,57,.6)}
.cdSemFila:hover{border-color:#c9b8f7}
.cdSemFila span{font-size:.88rem;font-weight:800}
.cdSemFila em{font-style:normal;font-size:.78rem;font-weight:700;color:#6b7491;text-align:right;max-width:55%}
.cdSemFila.on{background:#f6f5fb}