/* =====================================================
   MAQUETA DEL PANEL — construida en HTML/CSS
   Diseñada a 1120 x 566 px. app.js la escala al ancho
   disponible con transform:scale, así que todas las
   medidas de aquí son fijas a propósito.
   ===================================================== */

.mk-wrap{
  position:relative;width:100%;overflow:hidden;
  aspect-ratio:var(--mkw) / var(--mkh);
  border-radius:15px;border:1px solid var(--bd-d);
  background:var(--navy);
  box-shadow:0 34px 78px -26px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04);
}
.mk{
  width:calc(var(--mkw) * 1px);height:calc(var(--mkh) * 1px);
  transform-origin:top left;
  font-family:'Inter',sans-serif;color:var(--tx-d);
  font-size:13px;line-height:1.5;letter-spacing:0;
  user-select:none;
}
.mk-shell{display:flex;width:100%;height:100%}
.mk-phone .mk-wrap,.mk-phone{border-radius:18px}
.mk-lime{color:var(--lime)}
.mk-center{text-align:center}
.mk-b{font-weight:500}
.mk-d{color:#8A95AD;font-size:9.5px}

/* ---------- barra lateral ---------- */
.mk-side{width:186px;flex:0 0 186px;background:#0C1322;border-right:1px solid #1E2840;display:flex;flex-direction:column}
.mk-brand{padding:13px 15px;border-bottom:1px solid #1E2840}
/* El CRM real muestra el logotipo dentro de una placa azul marino */
.mk-logo{display:inline-flex;background:#1B2A6B;border-radius:7px;padding:6px 8px}
.mk-brandmark{height:26px;width:auto;display:block}
.mk-pbar .mk-logo,.mk-mbar .mk-logo{padding:7px 10px}
.mk-pbar .mk-brandmark{height:30px}
.mk-mbar .mk-brandmark{height:30px}
.mk-school{padding:11px 15px;border-bottom:1px solid #1E2840}
.mk-k{font-size:7px;letter-spacing:.13em;text-transform:uppercase;color:#5B6680;font-weight:600}
.mk-school b{display:block;font-size:10.5px;font-weight:600;color:var(--lime);margin-top:4px}
.mk-grp{padding:12px 9px 0}
.mk-grp .mk-k{padding:0 8px;margin-bottom:7px}
.mk-nav{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:7px;color:#8A95AD;font-size:10.5px;font-weight:500;margin-bottom:1px;position:relative}
.mk-nav svg{width:13px;height:13px;flex:0 0 13px;opacity:.85}
.mk-nav.on{background:#16233C;color:var(--tx-d);font-weight:600}
.mk-nav.on::before{content:'';position:absolute;left:-9px;top:7px;bottom:7px;width:2.5px;background:var(--lime);border-radius:0 3px 3px 0}
.mk-nav .mk-pill{margin-left:auto;background:#F0524B;color:#fff;font-size:8px;font-weight:700;min-width:15px;height:15px;border-radius:8px;display:grid;place-items:center;padding:0 4px}
.mk-side-foot{margin-top:auto;border-top:1px solid #1E2840;padding:11px 15px;display:flex;align-items:center;gap:8px}
.mk-av{width:25px;height:25px;border-radius:6px;background:var(--lime);color:#0A0F1E;font-size:9.5px;font-weight:700;display:grid;place-items:center;flex:0 0 25px}
.mk-side-foot b{display:block;font-size:10px;font-weight:600}
.mk-side-foot span{display:block;font-size:8px;color:#5B6680;margin-top:1px}

/* ---------- área principal ---------- */
.mk-main{flex:1;min-width:0;display:flex;flex-direction:column}
.mk-top{height:52px;flex:0 0 52px;border-bottom:1px solid #1E2840;display:flex;align-items:center;padding:0 20px;gap:10px}
.mk-top h4{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.mk-cap{width:11px;height:11px;color:var(--lime);display:block;margin-bottom:2px}
.mk-btn{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 11px;border-radius:7px;font-size:10.5px;font-weight:600;border:1px solid transparent}
.mk-btn svg{width:11px;height:11px}
.mk-btn.amber{background:rgba(245,166,35,.13);color:#F5A623;border-color:rgba(245,166,35,.3)}
.mk-btn.lime{background:var(--lime);color:#0A0F1E}
.mk-body{padding:17px 20px;flex:1;display:flex;flex-direction:column;min-height:0}

.mk-hi{font-family:'Bricolage',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.03em}
.mk-sub{display:flex;align-items:center;gap:6px;font-size:9.5px;color:#8A95AD;margin-top:5px}
.mk-sub svg{width:11px;height:11px;color:#5B6680}

/* tarjetas de indicadores */
.mk-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:15px}
.mk-card{background:#131B2E;border:1px solid #1E2840;border-radius:9px}
.mk-kpi{padding:13px 14px 14px}
.mk-kpi .mk-ic{width:25px;height:25px;border-radius:7px;background:#1B2440;display:grid;place-items:center;margin-bottom:10px}
.mk-kpi .mk-ic svg{width:12px;height:12px}
.mk-kpi .mk-lbl{font-size:7.5px;letter-spacing:.11em;text-transform:uppercase;color:#8A95AD;font-weight:600}
.mk-kpi .mk-val{font-family:'JB',monospace;font-size:18px;font-weight:700;margin-top:6px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mk-kpi .mk-ft{font-size:9px;color:#5B6680;margin-top:7px}

/* zona inferior */
.mk-low{display:grid;grid-template-columns:1fr 274px;gap:14px;margin-top:14px;flex:1;min-height:0}
.mk-pad{padding:14px 16px}
.mk-ttl{font-size:11.5px;font-weight:600;letter-spacing:-.01em}
.mk-st{font-size:9px;color:#5B6680;margin-top:2px}

/* tabla */
.mk-tbl{width:100%;border-collapse:collapse;margin-top:13px}
.mk-tbl th{font-size:7.5px;letter-spacing:.11em;text-transform:uppercase;color:#5B6680;font-weight:600;text-align:left;padding:0 0 9px}
.mk-tbl td{padding:8.5px 0;border-top:1px solid #1E2840;font-size:10.5px}
.mk-tbl .mk-mono{font-family:'JB',monospace;font-variant-numeric:tabular-nums}
.mk-row{opacity:0;transform:translateY(6px)}
.mk-live .mk-row{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mk-live .mk-row:nth-child(1){transition-delay:.30s}
.mk-live .mk-row:nth-child(2){transition-delay:.38s}
.mk-live .mk-row:nth-child(3){transition-delay:.46s}
.mk-live .mk-row:nth-child(4){transition-delay:.54s}
.mk-live .mk-row:nth-child(5){transition-delay:.62s}
.mk-live .mk-row:nth-child(6){transition-delay:.70s}

.mk-tag{display:inline-flex;align-items:center;gap:4px;height:19px;padding:0 7px;border-radius:5px;font-size:8.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.mk-tag svg{width:9px;height:9px}
.mk-green{background:rgba(62,207,142,.13);color:#3ECF8E}
.mk-amber{background:rgba(245,166,35,.13);color:#F5A623}
.mk-violet{background:rgba(124,107,245,.15);color:#9C90FF}
.mk-blue{background:rgba(76,141,255,.14);color:#7FAEFF}
.mk-limet{background:rgba(195,245,60,.13);color:var(--lime)}
.mk-slate{background:#1B2440;color:#8A95AD}

/* métodos de pago */
.mk-met{margin-bottom:12px}
.mk-met-h{display:flex;align-items:center;gap:6px;font-size:10.5px}
.mk-met-h svg{width:11px;height:11px}
.mk-met-h b{font-weight:500}
.mk-met-h span{margin-left:auto;color:#8A95AD;font-size:9.5px;font-family:'JB',monospace}
.mk-bar{height:4px;border-radius:2px;background:#1B2440;overflow:hidden;margin-top:6px}
.mk-bar i{display:block;height:100%;border-radius:2px;width:0;transition:width 1.05s cubic-bezier(.22,.61,.36,1)}
.mk-live .mk-bar i{width:var(--w)}
.mk-amt{font-family:'JB',monospace;font-size:8.5px;color:#5B6680;margin-top:5px}

.mk-alert{background:rgba(245,166,35,.07);border:1px solid rgba(245,166,35,.22);border-radius:8px;padding:11px 12px;margin-top:14px}
.mk-alert-h{display:flex;align-items:center;gap:6px;color:#F5A623;font-size:10px;font-weight:600}
.mk-alert-h svg{width:11px;height:11px}
.mk-alert p{font-family:'JB',monospace;font-size:8.5px;color:#8A95AD;margin-top:6px}
.mk-alert p b{color:#F5A623;font-weight:400}

/* En pantallas chicas el panel completo quedaría ilegible:
   se sustituye por la vista que realmente usa un papá. */
.stage-phones{display:none}
@media (max-width:860px){
  .stage-main > .mk-wrap{display:none}   /* solo el panel del hero */
  .stage-phones{
    display:flex;justify-content:center;gap:14px;
    max-width:430px;margin:0 auto;
  }
}

@media (prefers-reduced-motion:reduce){
  .mk-row{opacity:1;transform:none}
  .mk-bar i{width:var(--w);transition:none}
}

/* =====================================================
   PANTALLAS ADICIONALES
   ===================================================== */

/* ---------- detalle de alumno ---------- */
.mk-crumb{display:flex;align-items:center;gap:6px;color:#5B6680;font-size:9.5px;margin-bottom:11px}
.mk-crumb svg{width:11px;height:11px}
.mk-head{display:flex;align-items:center;gap:14px;padding:13px 15px}
.mk-face{width:42px;height:42px;border-radius:10px;background:#1B2A6B;display:grid;place-items:center;
  font-size:15px;font-weight:700;color:var(--lime);flex:0 0 42px}
.mk-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.mk-btn.ghost{background:transparent;color:#8A95AD;border-color:#27324D}
.mk-kpis-3{grid-template-columns:repeat(3,1fr)}
.mk-kpi-s{padding:11px 13px 12px}
.mk-low-a{grid-template-columns:1fr 250px}
.mk-total{display:flex;align-items:center;padding-top:10px;margin-top:8px;border-top:1px solid #1E2840}
.mk-total span{font-size:10px;color:#8A95AD}
.mk-total b{margin-left:auto;font-size:13px;font-weight:700}
.mk-tutor{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.mk-tutor b{display:block;font-size:10.5px;font-weight:600}
.mk-tutor span{display:block;font-size:8.5px;color:#5B6680;margin-top:1px}
.mk-contact{font-size:9px;color:#8A95AD;line-height:1.85}
.mk-av-row{display:flex;gap:8px;padding:8px 0;border-top:1px solid #1E2840}
.mk-av-row span{width:11px;height:11px;color:#5B6680;flex:0 0 11px;margin-top:2px;display:block}
.mk-av-row svg{width:11px;height:11px}
.mk-av-row b{display:block;font-size:9.5px;font-weight:500}
.mk-av-row i{display:block;font-style:normal;font-size:8px;color:#5B6680;margin-top:2px}

/* ---------- caja de cobros ---------- */
.mk-low-c{grid-template-columns:1fr 254px;margin-top:0}
.mk-search-row{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.mk-search{flex:1;display:flex;align-items:center;gap:8px;background:#182142;border:1px solid #1E2840;
  border-radius:7px;padding:7px 11px;color:#5B6680;font-size:10px}
.mk-search svg{width:11px;height:11px}
.mk-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.mk-tile{background:#182142;border:1px solid #1E2840;border-radius:8px;padding:10px 11px}
.mk-tile.on{background:rgba(195,245,60,.07);border-color:rgba(195,245,60,.4)}
.mk-tile-ic{width:22px;height:22px;border-radius:6px;background:#1B2440;display:grid;place-items:center;
  color:#8A95AD;margin-bottom:8px}
.mk-tile.on .mk-tile-ic{color:var(--lime)}
.mk-tile-ic svg{width:11px;height:11px}
.mk-tile b{display:block;font-size:10px;font-weight:600;line-height:1.3}
.mk-tile i{display:block;font-style:normal;font-size:8.5px;color:#5B6680;margin-top:3px}
.mk-tile span{display:block;font-size:11.5px;font-weight:700;margin-top:7px}
.mk-tile.on span{color:var(--lime)}
.mk-till{display:flex;flex-direction:column}
.mk-student{display:flex;align-items:center;gap:9px;background:#182142;border:1px solid #27324D;
  border-radius:8px;padding:9px 10px;margin-bottom:11px}
.mk-student b{display:block;font-size:10px;font-weight:600}
.mk-student span{display:block;font-size:8.5px;color:#5B6680;margin-top:1px}
.mk-av-s{width:22px;height:22px;font-size:8.5px;background:#1B2A6B;color:#C3F53C;border-radius:6px;
  display:grid;place-items:center;flex:0 0 22px;font-weight:700}
.mk-sel{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid #1E2840}
.mk-sel b{display:block;font-size:10px;font-weight:500}
.mk-sel i{display:block;font-style:normal;font-size:8.5px;color:#5B6680;margin-top:2px}
.mk-sel span{margin-left:auto;font-size:10.5px;font-weight:500}
.mk-till-foot{margin-top:auto;padding-top:12px}
.mk-line{display:flex;align-items:center;font-size:10px;color:#8A95AD;padding:4px 0}
.mk-line b{margin-left:auto;color:var(--tx-d);font-weight:500;font-size:10.5px}
.mk-line-b{border-bottom:1px solid #1E2840;padding:7px 0}
.mk-line-t{border-top:1px solid #1E2840;margin-top:7px;padding-top:10px}
.mk-line-t span{font-size:11.5px;font-weight:600;color:var(--tx-d)}
.mk-big{font-size:17px !important;font-weight:700 !important;letter-spacing:-.02em}
.mk-mps{display:flex;gap:5px;margin:11px 0 10px}
.mk-mp{flex:1;border:1px solid #27324D;border-radius:7px;padding:8px 3px;text-align:center;color:#8A95AD}
.mk-mp.on{border-color:var(--lime);background:rgba(195,245,60,.08);color:var(--lime)}
.mk-mp svg{width:12px;height:12px;display:block;margin:0 auto 5px}
.mk-mp b{display:block;font-size:8px;font-weight:600;line-height:1.25}
.mk-mp i{display:none}
.mk-pay{background:var(--lime);color:#0A0F1E;border-radius:8px;padding:10px;text-align:center;
  font-size:11.5px;font-weight:700}

/* ---------- portal de padres ---------- */
.mk-portal{width:100%;height:100%;display:flex;flex-direction:column;background:var(--navy)}
.mk-pbar{display:flex;align-items:center;padding:12px 26px;border-bottom:1px solid #1E2840}
.mk-pbody{padding:24px 26px;flex:1}
.mk-psub{display:flex;align-items:center;gap:6px;color:#8A95AD;font-size:10px}
.mk-psub svg{width:12px;height:12px;color:var(--lime)}
.mk-ptitle{font-family:'Bricolage',sans-serif;font-size:27px;font-weight:700;letter-spacing:-.035em;margin-top:8px}
.mk-ptitle-m{font-size:22px}
.mk-pmeta{font-size:10.5px;color:#8A95AD;margin-top:6px}
.mk-pgrid{display:grid;grid-template-columns:1fr 274px;gap:24px;margin-top:20px;align-items:start}
.mk-prow{display:flex;align-items:center;margin-bottom:11px}
.mk-prow b{font-size:12px;font-weight:600}
.mk-prow span{margin-left:auto;font-size:10px;color:#5B6680}
.mk-con{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid #1E2840;
  border-radius:9px;background:#182142;margin-bottom:8px}
.mk-con.on{border-color:rgba(195,245,60,.45);background:rgba(195,245,60,.06)}
.mk-box{width:17px;height:17px;border-radius:5px;border:1.5px solid #27324D;flex:0 0 17px;
  display:grid;place-items:center}
.mk-box.on{background:var(--lime);border-color:var(--lime);color:#0A0F1E}
.mk-box svg{width:11px;height:11px;stroke-width:3.2}
.mk-con b{display:flex;align-items:center;font-size:11.5px;font-weight:600}
.mk-con i{display:block;font-style:normal;font-size:9.5px;color:#5B6680;margin-top:3px}
.mk-con span{margin-left:auto;font-size:12px;font-weight:600}
.mk-note{height:17px;padding:0 6px;font-size:8px;margin-left:7px}
.mk-hint{display:flex;align-items:center;gap:9px;background:rgba(76,141,255,.06);
  border:1px solid rgba(76,141,255,.22);border-radius:9px;padding:11px 13px;margin-top:13px}
.mk-hint svg{width:13px;height:13px;color:#7FAEFF;flex:0 0 13px}
.mk-hint span{font-size:9.5px;color:#8A95AD;line-height:1.5}
.mk-tot-l{font-size:11.5px;font-weight:600;color:var(--tx-d)}
.mk-pm-lbl{font-size:10px;font-weight:600;margin:16px 0 9px}
.mk-pms{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:13px}
.mk-pms .mk-mp{padding:10px 5px}
.mk-pms .mk-mp b{font-size:9.5px}
.mk-pms .mk-mp i{display:block;font-style:normal;font-size:7.5px;color:#5B6680;margin-top:2px}
.mk-pms .mk-mp.on i{color:rgba(195,245,60,.7)}
.mk-safe{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:10px;
  color:#5B6680;font-size:8.5px}
.mk-safe svg{width:10px;height:10px}

/* ---------- pantallas de celular ---------- */
.mk-mob{width:100%;height:100%;background:var(--navy);padding:16px 17px;display:flex;flex-direction:column}
.mk-mbar{display:flex;align-items:center;margin-bottom:16px}
.mk-warn{display:flex;gap:9px;background:rgba(245,166,35,.07);border:1px solid rgba(245,166,35,.25);
  border-radius:9px;padding:10px 12px;margin:14px 0 15px}
.mk-warn svg{width:13px;height:13px;color:#F5A623;flex:0 0 13px;margin-top:1px}
.mk-warn span{font-size:10.5px;color:#8A95AD;line-height:1.45}
.mk-warn b{color:var(--tx-d);font-weight:600}
.mk-mlbl{font-size:11.5px;font-weight:600;margin-bottom:9px}
.mk-mlbl-t{margin-top:15px;padding-top:15px;border-top:1px solid #1E2840}
.mk-mob .mk-con{padding:10px 12px}
.mk-mob .mk-con b{font-size:11.5px}
.mk-mob .mk-con span{font-size:11.5px}
.mk-mfoot{margin-top:auto;padding-top:14px;border-top:1px solid #1E2840}
.mk-mfoot .mk-line{padding-bottom:11px}
.mk-mfoot .mk-line span{font-size:11.5px}
.mk-mfoot .mk-pay{padding:12px;font-size:12.5px;border-radius:9px}

/* ---------- comprobante ---------- */
.mk-rcpt{padding:22px 17px}
.mk-ok{text-align:center;margin-bottom:18px}
.mk-ok-c{width:48px;height:48px;border-radius:50%;background:rgba(62,207,142,.13);
  border:1.5px solid rgba(62,207,142,.4);display:grid;place-items:center;margin:0 auto 13px;color:#3ECF8E}
.mk-ok-c svg{width:22px;height:22px;stroke-width:2.4}
.mk-ticket{background:#131B2E;border:1px solid #1E2840;border-radius:11px;position:relative}
.mk-ticket-h{padding:16px 16px 15px;text-align:center;border-bottom:1.5px dashed #27324D}
.mk-amount{font-size:27px;font-weight:700;color:var(--lime);margin-top:7px;letter-spacing:-.02em}
.mk-folio{font-size:9.5px;color:#5B6680;margin-top:7px}
.mk-notch{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--navy);top:97px}
.mk-notch.l{left:-8px}
.mk-notch.r{right:-8px}
.mk-ticket-b{padding:12px 16px 14px}
.mk-det{display:flex;padding:5px 0;font-size:9.5px}
.mk-det span{color:#5B6680}
.mk-det b{margin-left:auto;font-weight:400;font-size:9.5px}
.mk-ticket-f{border-top:1.5px dashed #27324D;padding:11px 16px;display:flex;align-items:center}
.mk-uuid{margin-left:auto;font-size:8px;color:#5B6680}
.mk-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.mk-act{border:1px solid #27324D;border-radius:9px;padding:11px;text-align:center;color:#8A95AD}
.mk-act svg{width:13px;height:13px;display:block;margin:0 auto 6px}
.mk-act b{font-size:10px;font-weight:600}
.mk-next{background:#182142;border:1px solid #1E2840;border-radius:9px;padding:12px 13px;margin-top:14px}
.mk-next-t{display:block;font-size:10.5px;font-weight:600;margin-bottom:6px}
.mk-next .mk-line span{display:block;font-size:10px;color:#8A95AD}
.mk-next .mk-line i{display:block;font-style:normal;font-size:8.5px;color:#5B6680;margin-top:2px}
.mk-foot-note{text-align:center;color:#5B6680;font-size:8.5px;margin-top:auto;padding-top:16px}

/* =====================================================
   COLOCACIÓN DE LAS MAQUETAS EN CADA SECCIÓN
   El ancho se deriva de un presupuesto de ALTURA usando
   --mkr (proporción ancho/alto), para que nunca se
   recorten dentro del bloque pineado.
   ===================================================== */

/* proceso pineado */
.pv .mk-wrap{width:min(100%, calc(min(48vh, 420px) * var(--mkr)))}
.pv.duo{gap:16px}
.pv.duo .mk-wrap{width:min(48%, calc(min(46vh, 400px) * var(--mkr)))}

/* pestañas de audiencias */
.tp-vis .mk-wrap{width:min(100%, calc(min(54vh, 430px) * var(--mkr)))}

/* flotantes y respaldo móvil del hero */
.stage-phones .mk-wrap{width:calc(50% - 7px)}

/* pantallas de poca altura */
@media (min-width:1081px) and (max-height:790px){
  .pv .mk-wrap{width:min(100%, calc(min(42vh, 330px) * var(--mkr)))}
  .pv.duo .mk-wrap{width:min(48%, calc(min(40vh, 310px) * var(--mkr)))}
}

/* tablet y móvil: el proceso se pinea en 1 columna; acotamos por presupuesto de alto */
@media (max-width:1080px){
  .pv .mk-wrap{width:min(100%, calc(min(30vh,266px) * var(--mkr)));max-width:560px;margin:0 auto}
  .pv.duo .mk-wrap{width:min(48%, calc(min(29vh,258px) * var(--mkr)));max-width:150px}
  .tp-vis .mk-wrap{width:100%;max-width:640px}
}

/* Un item de grid con max-width mayor que el contenedor ensancha la pista
   (el mínimo automático es min-content). minmax(0,1fr) y min-width:0 lo evitan. */
@media (max-width:1080px){
  .tp{grid-template-columns:minmax(0,1fr)}
  .proc-grid{grid-template-columns:minmax(0,1fr)}
  .tp-vis,.proc-vis,.mk-wrap{min-width:0}
}