@charset "UTF-8";
/* ==========================================================================
   Avanzando Hacia el Éxito · One Stop Career Center of Puerto Rico
   css/04-my-path.css

   "Mi camino": the start card, the stages, the next step, the list of steps
   and the obstacles.

   Sections in this file:
   MI PLAN

   index.html loads css/01 to css/07 in this order and the later files build on
   the earlier ones: they reuse the colours and sizes defined in 01 as custom
   properties (var(--brand), var(--ink)…), and where two rules tie, the later
   file wins. Keep the order.
   ========================================================================== */

/* ============================================================
   MI PLAN — the guided path
   ============================================================ */
.plan-empty{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);padding:26px;display:flex;gap:22px;align-items:center;flex-wrap:wrap;
}
.plan-empty .t{flex:1;min-width:260px}
.plan-empty h3{font-size:1.35em;font-weight:800;letter-spacing:-.4px}
.plan-empty p{margin:8px 0 0;color:var(--ink-2)}
.plan-empty .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.plan-empty .promise{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:.88em;font-weight:700;color:var(--ink-3)}
.plan-empty .promise span{display:inline-flex;align-items:center;gap:7px}
.plan-empty .promise svg{width:16px;height:16px;color:var(--ok)}
/* Above an answered plan: the figure stays, and so do the ways to go back. */
.plan-head{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.plan-head .mascot{width:96px}
.plan-head p{margin:0;color:var(--ink-2)}
.plan-head .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
@media(max-width:560px){
  .plan-head{align-items:flex-start;gap:12px}
  .plan-head .mascot{width:68px}
}

/* Stage strip: shows the whole road, so a person can see there is one. */
.stages{display:flex;gap:4px;overflow-x:auto;padding:4px 0 12px;-webkit-overflow-scrolling:touch}
.stage{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:82px;opacity:.42}
.stage .b{width:40px;height:40px;border-radius:50%;background:var(--wash);color:var(--ink-3);display:grid;place-items:center}
.stage .b svg{width:20px;height:20px}
.stage span{font-size:.74em;font-weight:800;color:var(--ink-2);text-align:center;line-height:1.25}
.stage.done{opacity:1}
.stage.done .b{background:var(--ok-tint);color:var(--ok)}
.stage.here{opacity:1}
.stage.here .b{background:var(--brand);color:#fff;box-shadow:0 0 0 4px var(--brand-tint)}
.stage.here span{color:var(--brand)}

/* Next step: exactly one thing to do, never a list to choose from. */
.next{
  background:var(--surface);border:2px solid var(--brand);border-radius:var(--radius-lg);
  padding:24px;box-shadow:0 6px 24px rgba(177,21,26,.10);
}
.next .tagline{display:inline-block;background:var(--brand);color:#fff;border-radius:999px;padding:5px 13px;font-size:.76em;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.next h3{font-size:1.4em;font-weight:800;letter-spacing:-.4px;margin:12px 0 0}
.next p{margin:8px 0 0;color:var(--ink-2)}
.next .meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.82em;font-weight:700;color:var(--ink-2);background:var(--wash);border-radius:999px;padding:5px 12px}
.pill svg{width:14px;height:14px}
.next .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

.barmeter{height:10px;border-radius:999px;background:var(--wash);overflow:hidden;margin:14px 0 8px}
.barmeter i{display:block;height:100%;background:var(--ok);border-radius:999px;transition:width .4s ease}
.barlabel{font-size:.88em;font-weight:700;color:var(--ink-2)}

.steplist{display:grid;gap:12px;margin-top:18px}
.step{
  display:flex;gap:15px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
}
.step .n{width:34px;height:34px;border-radius:10px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;flex:none;font-size:.92em}
.step.done{opacity:.62}
.step.done .n{background:var(--ok)}
.step .t{flex:1;min-width:0}
.step .t b{font-weight:800;display:block}
.step .t p{margin:4px 0 0;font-size:.94em;color:var(--ink-2)}
.step .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* Barriers: named plainly, each with the one thing that clears it. */
.barrier{
  display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;
  padding:15px 18px;margin-bottom:10px;
}
.barrier.clear{border-left-color:var(--ok);background:var(--ok-tint)}
.barrier .ic{width:36px;height:36px;border-radius:10px;background:var(--warn-tint);color:var(--warn);display:grid;place-items:center;flex:none}
.barrier.clear .ic{background:#fff;color:var(--ok)}
.barrier .ic svg{width:19px;height:19px}
.barrier .t{flex:1 1 200px;min-width:0}
.barrier-acts{display:flex;flex-wrap:wrap;gap:8px;align-self:center;max-width:100%}
.barrier .t b{display:block;font-weight:800}
.barrier .t span{display:block;font-size:.92em;color:var(--ink-2);margin-top:3px}

/* ---------- Task router ---------- */
.tasks{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.tasks{grid-template-columns:1fr}}
.task.wide{grid-column:1/-1}
.task{
  display:flex;gap:16px;align-items:flex-start;text-align:left;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px;cursor:pointer;font-family:var(--font);font-size:1em;color:var(--ink);
  box-shadow:var(--shadow-1);transition:border-color .15s,box-shadow .15s,transform .15s;
}
.task:hover{border-color:var(--brand);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.task .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--brand-tint);color:var(--brand)}
.task .ic svg{width:26px;height:26px}
.task.calm .ic{background:var(--calm-tint);color:var(--calm)}
.task .txt{flex:1;min-width:0}
.task .txt b{display:block;font-size:1.08em;font-weight:800;letter-spacing:-.3px}
.task .txt span{display:block;color:var(--ink-2);font-size:.94em;margin-top:5px;overflow-wrap:anywhere}
.task .go{margin-left:auto;align-self:center;color:var(--ink-3);flex:none}
.task .go svg{width:22px;height:22px}

/* ---------- Tools ---------- */
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.tools-grid{grid-template-columns:1fr}}
.tool{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;height:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px;cursor:pointer;font-family:var(--font);font-size:1em;color:var(--ink);
  box-shadow:var(--shadow-1);transition:border-color .15s,box-shadow .15s,transform .15s;
}
.tool:hover{border-color:var(--calm);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.tool .ic{width:50px;height:50px;border-radius:14px;background:var(--calm-tint);color:var(--calm);display:grid;place-items:center;margin-bottom:14px}
.tool .ic svg{width:25px;height:25px}
.tool b{font-size:1.1em;font-weight:800;letter-spacing:-.3px}
.tool p{margin:7px 0 0;color:var(--ink-2);font-size:.94em}
.tool .foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:8px;font-weight:800;color:var(--calm);font-size:.92em}
.tool .foot svg{width:17px;height:17px}
.tool .done-flag{display:inline-flex;align-items:center;gap:6px;font-size:.78em;font-weight:800;color:var(--ok);background:var(--ok-tint);border:1px solid var(--ok-line);border-radius:999px;padding:4px 10px;margin-bottom:12px}
.tool .done-flag svg{width:13px;height:13px}