:root { --azul:#0b3a66; --azul2:#04162b; --verde2:#8dc63f; --texto:#1f2937; --tenue:#64748b; --borde:#dfe6ee; --fondo:#f7f8fa; }
* { box-sizing:border-box; }
body { margin:0; font-family:Montserrat, Arial, sans-serif; color:var(--texto); background:var(--fondo); font-size:14px; }
.cab { background:linear-gradient(120deg, var(--azul2), var(--azul)); color:#fff; }
.cab-in { max-width:1400px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.cab h1 { margin:0; font-size:22px; font-weight:800; }
.cab nav { margin-left:auto; } .cab nav a { color:#fff; border:1px solid rgba(255,255,255,.4); padding:8px 14px; border-radius:8px; text-decoration:none; font-weight:600; }
.logo { width:52px; height:52px; object-fit:contain; }
.eyebrow { color:var(--verde2); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:800; }
main { max-width:1400px; margin:0 auto; padding:16px; }
.lead { font-size:16px; line-height:1.55; max-width:980px; margin:4px 0 10px; }
.estados { display:flex; gap:8px; flex-wrap:wrap; }
.st { display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap; }
.st.hecho { background:#dcf3e3; color:#16683a; } .st.curso { background:#dbeafe; color:#1e40af; } .st.pend { background:#fdf0d2; color:#8a5d00; } .st.futuro { background:#e8edf3; color:#475569; }
.lienzo-wrap { position:relative; margin:14px 0 24px; }
.lienzo { background-color:#f3f4f6; background-image:radial-gradient(#cfd5dd 1px, transparent 1px); background-size:22px 22px; border:1px solid var(--borde); border-radius:14px; height:min(78vh, 760px); overflow:hidden; cursor:grab; touch-action:none; }
.lienzo.arrastrando { cursor:grabbing; }
.lienzo svg { width:100%; height:100%; display:block; }
.nodo { cursor:pointer; } .nodo:hover circle.base, .nodo:focus circle.base { stroke:#fff; stroke-width:5; filter:url(#sombra2); }
.nodo:focus { outline:none; }
.zoom { position:absolute; left:12px; bottom:44px; display:flex; flex-direction:column; gap:6px; }
.zoom button { width:30px; height:30px; border-radius:50%; border:1px solid var(--borde); background:#fff; font-size:15px; cursor:pointer; }
.ayuda { color:var(--tenue); font-size:12px; margin:6px 2px 0; }
.detalle { position:absolute; right:14px; top:14px; width:min(360px, calc(100% - 28px)); background:#fff; border:1px solid var(--borde); border-radius:14px; padding:16px 18px; box-shadow:0 10px 30px rgba(4,22,43,.18); max-height:calc(100% - 28px); overflow:auto; }
.detalle h2 { margin:8px 0 6px; font-size:18px; color:var(--azul); }
.detalle p { margin:0 0 8px; line-height:1.5; } .detalle ul { margin:0 0 8px 18px; padding:0; } .detalle li { margin:4px 0; }
.cerrar { position:absolute; right:10px; top:10px; border:0; background:transparent; font-size:16px; cursor:pointer; color:var(--tenue); }
.tenue { color:var(--tenue); }
h2.sec { font-size:18px; color:var(--azul); margin:8px 0 12px; }
.fases { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; }
.fase { background:#fff; border:1px solid var(--borde); border-radius:14px; padding:14px 16px; border-top:5px solid var(--c, var(--azul)); }
.fase .num { font-size:12px; font-weight:800; color:var(--c, var(--azul)); letter-spacing:.08em; text-transform:uppercase; }
.fase h3 { margin:4px 0 8px; font-size:16px; }
.fase p { margin:0 0 8px; color:var(--tenue); font-size:13px; line-height:1.45; }
.fase ul { list-style:none; margin:0; padding:0; }
.fase li { display:flex; gap:8px; align-items:flex-start; padding:5px 0; border-bottom:1px dashed var(--borde); font-size:13px; }
.fase li:last-child { border-bottom:0; }
.fase li i { flex:0 0 16px; height:16px; border-radius:50%; border:2px solid #cbd5e1; margin-top:1px; }
.fase li.ok i { background:#2e9e4f; border-color:#2e9e4f; }
.fase li.ok i::after { content:'✓'; color:#fff; font-size:10px; font-style:normal; display:block; text-align:center; line-height:12px; }
.fase li.ok span { color:var(--tenue); }
.dos { display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:12px; margin-top:24px; }
.card { background:#fff; border:1px solid var(--borde); border-radius:14px; padding:14px 16px; min-width:0; }
.tabla { width:100%; border-collapse:collapse; font-size:13px; }
.tabla th { text-align:left; background:var(--azul); color:#fff; padding:8px 10px; }
.tabla td { border-bottom:1px solid var(--borde); padding:8px 10px; vertical-align:top; }
.decis { margin:0; padding-left:20px; line-height:1.5; } .decis li { margin:0 0 8px; }
.pie { text-align:center; color:var(--tenue); font-size:12px; padding:20px; }
@media (max-width:640px) { .dos { grid-template-columns:1fr; } .lienzo { height:62vh; } }