/* ============================================================
   planeacion.css — Levsek identity (navy + azul, DM Sans/Mono)
   Original layout using Levsek's own brand tokens.
   ============================================================ */
:root{
  --navy:#050f1c; --navy2:#0b1d30; --blue:#1666f2; --blue2:#3d8bff;
  --g1:#f7f9fc; --g2:#edf1f7; --g3:#c8d4e3;
  --ink:#0d1b2a; --ink2:#3a4f66; --ink3:#6b7e94;
  --ok:#21b573; --no:#e05260;
  --font:'DM Sans',system-ui,sans-serif; --mono:'DM Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:#dde4ed;color:var(--ink);padding:2.5rem 1rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.doc{max-width:980px;margin:0 auto;background:#fff;box-shadow:0 8px 48px rgba(5,15,28,.22);overflow:hidden}

/* header */
.hdr{background:var(--navy);padding:2rem 3rem;position:relative;overflow:hidden}
.hdr::after{content:'';position:absolute;top:0;right:0;width:240px;height:100%;background:var(--blue);clip-path:polygon(40% 0,100% 0,100% 100%,0 100%);opacity:.12}
.hdr-line{position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue) 0%,var(--blue2) 40%,transparent 100%)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:1rem}
.brand img{height:46px;filter:brightness(0) invert(1)}
.brand .name{font-family:var(--mono);font-size:1.7rem;font-weight:500;color:#fff;letter-spacing:.12em;line-height:1}
.doc-type{text-align:right}
.doc-type .lbl{font-size:.56rem;letter-spacing:.25em;text-transform:uppercase;color:#4a7090;display:block;margin-bottom:.35rem}
.doc-type .ttl{font-size:1.7rem;font-weight:300;color:#fff;line-height:1}
.doc-type .ttl strong{font-weight:500;color:var(--blue2)}

/* meta */
.meta{background:var(--g1);border-bottom:1px solid var(--g2);padding:.85rem 3rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.meta .num{font-family:var(--mono);font-size:.8rem;color:var(--ink);font-weight:500}
.meta .est{font-size:.74rem;color:var(--ink3);text-align:right}
.meta .est b{color:var(--blue);font-weight:600}

/* body */
.body{padding:2.2rem 3rem;display:flex;flex-direction:column;gap:1.9rem}
.sec-label{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:.7rem}
.lead{font-size:.92rem;color:var(--ink2);line-height:1.7}
.lead b{color:var(--ink)}

/* 2-col scope */
.scope{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.scope .col{background:var(--g1);border-left:2px solid var(--g3);padding:1rem 1.2rem}
.scope .col.yes{border-left-color:var(--ok)}
.scope .col.no{border-left-color:var(--no)}
.scope h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem}
.scope .yes h4{color:var(--ok)} .scope .no h4{color:var(--no)}
.scope ul{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.scope li{font-size:.78rem;color:var(--ink2);line-height:1.5;padding-left:1.4rem;position:relative}
.scope li i{position:absolute;left:0;top:.15rem;font-size:.85rem}
.scope .yes li i{color:var(--ok)} .scope .no li i{color:var(--no)}

/* user stories */
.stories{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.story{background:var(--g1);border:1px solid var(--g2);border-radius:8px;padding:.85rem 1rem}
.story .role{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--blue);border-radius:999px;padding:3px 9px;display:inline-block;margin-bottom:.5rem}
.story p{font-size:.79rem;color:var(--ink2);line-height:1.55}
.story p b{color:var(--ink)}

/* timeline / phases */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;position:relative}
.phase{border:1px solid var(--g2);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.phase .top{background:var(--navy);color:#fff;padding:.8rem 1rem}
.phase .top .n{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--blue2)}
.phase .top .t{font-weight:500;font-size:.95rem;margin-top:.15rem}
.phase .top .dur{font-size:.68rem;color:#9bb6d4;margin-top:.25rem}
.phase .in{padding:.85rem 1rem}
.phase ul{list-style:none;display:flex;flex-direction:column;gap:.35rem}
.phase li{font-size:.74rem;color:var(--ink2);line-height:1.45;padding-left:1rem;position:relative}
.phase li::before{content:'';position:absolute;left:0;top:.5rem;width:5px;height:5px;border-radius:50%;background:var(--blue)}

/* stack badges */
.stack{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.tech{background:var(--g1);border:1px solid var(--g2);border-radius:8px;padding:.9rem 1rem;text-align:left}
.tech .ic{width:36px;height:36px;border-radius:8px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:18px;margin-bottom:.55rem}
.tech .k{font-weight:600;font-size:.85rem}
.tech .d{font-size:.72rem;color:var(--ink3);line-height:1.45;margin-top:.2rem}

/* generic bullet grid */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:.45rem 1.5rem}
.bul{font-size:.79rem;color:var(--ink2);line-height:1.55;padding-left:1.3rem;position:relative}
.bul i{position:absolute;left:0;top:.12rem;color:var(--blue);font-size:.85rem}
.bul b{color:var(--ink)}

/* android version table */
.vtable{width:100%;border-collapse:collapse;font-size:.78rem}
.vtable th{background:var(--navy);color:#dce8f7;text-align:left;padding:.6rem .85rem;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;font-weight:400}
.vtable td{padding:.7rem .85rem;border-bottom:1px solid var(--g2);color:var(--ink2);vertical-align:top}
.vtable td b{color:var(--ink)}
.vtable tr:last-child td{border-bottom:0}
.vchip{font-family:var(--mono);font-size:.72rem;color:var(--blue);font-weight:500}

/* inversión */
.invest{background:var(--navy);color:#fff;border-radius:10px;padding:1.3rem 1.6rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;position:relative;overflow:hidden}
.invest::after{content:'';position:absolute;top:0;right:0;width:180px;height:100%;background:var(--blue);clip-path:polygon(40% 0,100% 0,100% 100%,0 100%);opacity:.16}
.invest .l{position:relative;z-index:1}
.invest .l .k{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:#7aafd4;display:block}
.invest .l .s{font-size:.78rem;color:#c3d6ea;margin-top:.3rem}
.invest .amt{position:relative;z-index:1;font-family:var(--mono);font-size:2rem;font-weight:500;color:#fff;line-height:1}
.invest .amt small{font-size:.85rem;color:var(--blue2);font-weight:400}

/* impacto cards */
.impact{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.imp{display:flex;gap:.7rem;align-items:flex-start;background:var(--g1);border:1px solid var(--g2);border-radius:8px;padding:.75rem .9rem}
.imp .ic{width:30px;height:30px;flex:none;border-radius:7px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:15px}
.imp p{font-size:.78rem;color:var(--ink2);line-height:1.5}
.imp p b{color:var(--ink)}

/* licencia anual */
.lic{margin-top:1.1rem;border:1px solid var(--g2);border-radius:10px;overflow:hidden}
.lic-row{display:grid;grid-template-columns:1fr 1fr}
.lic-yr{padding:1rem 1.2rem}
.lic-yr+.lic-yr{border-left:1px solid var(--g2)}
.lic-yr .t{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);display:block}
.lic-yr .n{font-family:var(--mono);font-size:1.45rem;font-weight:500;color:var(--navy);display:block;margin:.25rem 0}
.lic-yr .n small{font-size:.78rem;color:var(--ink3)}
.lic-yr .d{font-size:.74rem;color:var(--ink2);line-height:1.45}
.lic-yr.alt{background:var(--g1)}
.lic-yr.alt .n{color:var(--blue)}
.lic-why{font-size:.8rem;color:var(--ink2);line-height:1.6;padding:.95rem 1.2rem;border-top:1px solid var(--g2);background:var(--g1)}
.lic-why b{color:var(--ink)}
.lic-why .h{color:var(--blue);font-weight:600}

/* capacidades */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.cap{background:var(--g1);border:1px solid var(--g2);border-radius:9px;padding:1rem 1.1rem}
.cap .v{font-family:var(--mono);font-size:1.7rem;font-weight:500;color:var(--blue);line-height:1}
.cap .k{font-size:.76rem;color:var(--ink2);margin-top:.4rem;line-height:1.4}
.cap .k b{color:var(--ink)}
@media (max-width:560px){.caps{grid-template-columns:1fr 1fr}}

/* footer */
.ftr{background:var(--navy);position:relative;overflow:hidden}
.ftr::before{content:'';position:absolute;top:0;left:0;width:200px;height:100%;background:var(--blue);clip-path:polygon(0 0,60% 0,100% 100%,0 100%);opacity:.1}
.ftr-line{height:2px;background:linear-gradient(90deg,var(--blue) 0%,var(--blue2) 30%,transparent 80%)}
.ftr-in{padding:.85rem 2rem;display:flex;align-items:center;justify-content:center;gap:1.4rem;position:relative;z-index:1;font-size:.7rem;color:#fff;flex-wrap:wrap}
.ftr-in a{color:#fff;text-decoration:none}
.ftr-brand{font-family:var(--mono);letter-spacing:.08em}
.ftr-sep{color:#3a6080}

@media (max-width:820px){
  .body,.hdr,.meta{padding-left:1.4rem;padding-right:1.4rem}
  .scope,.stories,.phases,.stack,.cols2{grid-template-columns:1fr}
}
@media print{ body{background:none;padding:0} .doc{box-shadow:none;max-width:100%} @page{margin:0;size:A4} }