/* ==================================================================
   KAPAY · Animacion del planning en movil
   ------------------------------------------------------------------
   Port a CSS/JS puro de la composicion de Claude Design
   "kapay-mobile-anim.jsx" (04_DESIGN/Assets/Website/mobile-animation/).

   El original es React + Motion dentro de un bundle de 1,1 MB que
   incluye react, react-dom y babel. Aqui se reimplementa: el DOM se
   construye UNA vez con la misma geometria del fuente (SW/SH, colX,
   cardY, chipX y las mismas curvas de easing) y por fotograma solo se
   escriben opacidad, transform, color y algun texto.

   Diferencia con el fuente, deliberada: el original dibuja el telefono
   dentro de un lienzo de 1080x1920 y escala la pantalla x2,2749. Aqui
   la pantalla se compone a su tamaño real (390x844) y es el escenario
   entero el que escala, asi que el texto se rasteriza nitido en vez de
   ampliado.

   Todo es reversible: quitar el <link> y el <script> de index.html.
   ================================================================== */

:root{
  /* Naranja de marca (main.css). El fuente traia el #db7521 de la app. */
  --km-accent:  var(--primary, #F58220);
  --km-accent-d:var(--primary-dark, #DE7016);
  --km-soft:    #FDF0E4;
  --km-ink:     #212121;
  --km-sub:     #757575;
  --km-green:   #0f7a4f;
  --km-label:   #c4c9d4;
}

/* --- Escenario ---------------------------------------------------- */
.km-stage{ position:relative; width:100%; }
.km-scale{ position:absolute; left:0; top:0; transform-origin:top left; }

/* Carcasa: marco fino, no un mockup fotografico. */
.km-phone{
  position:absolute; left:0; top:0; width:390px; height:844px;
  border-radius:44px; overflow:hidden; background:#f7f8fa;
  border:1px solid rgba(22,33,62,.12);
  box-shadow:0 30px 80px rgba(22,33,62,.14), 0 4px 14px rgba(22,33,62,.05);
  font-family:'DM Sans', system-ui, sans-serif; color:var(--km-ink);
  text-align:left; line-height:normal;
}
.km-phone *{ box-sizing:border-box; }
.km-screen{
  position:absolute; left:0; top:0; width:390px; height:844px;
  background:#f7f8fa; transform-origin:top left;
}
.km-phone svg{ display:block; flex-shrink:0; }

/* --- Barra de estado y cabecera ----------------------------------- */
.km-status{
  position:absolute; left:0; right:0; top:0; height:52px; background:#fff;
  display:flex; align-items:flex-end; justify-content:space-between; padding:0 26px 8px;
}
.km-status b{ font-size:13px; font-weight:700; }
.km-status span{ display:flex; align-items:center; gap:5px; }

.km-head{
  position:absolute; left:0; right:0; top:52px; height:54px; background:#fff;
  border-bottom:1px solid #edeff3; display:flex; align-items:center; padding:0 12px; gap:2px;
}
.km-head b{ flex:1; text-align:center; font-size:15px; font-weight:700; color:#1a1a2e; }
.km-today{
  display:inline-flex; align-items:center; height:30px; padding:0 12px; margin-left:4px;
  border:1px solid #dfe3ea; border-radius:8px; font-size:12.5px; font-weight:600; color:#4b5563;
}

/* --- Franja de llegadas ------------------------------------------- */
.km-arr{
  position:absolute; left:0; right:0; top:106px; height:108px;
  background:#f2f9f5; border-bottom:1px solid #dcece3;
}
.km-arr-t{
  position:absolute; left:18px; top:12px; display:flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--km-green);
}

/* ficha de alumno sin asignar */
.km-chip{
  position:absolute; width:156px; height:58px; background:#fff;
  border:1px solid #e3ece8; border-radius:12px;
  display:flex; align-items:center; gap:9px; padding:0 11px;
  box-shadow:0 1px 2px rgba(22,33,62,.05);
}
.km-chip-n{
  font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.km-chip-s{ font-size:10.5px; color:#8b9aa6; margin-top:1px; }
.km-gap{
  position:absolute; width:156px; height:58px;
  border:1px dashed #b7d5c5; border-radius:12px; background:rgba(255,255,255,.4);
}

/* avatar de iniciales */
.km-av{
  border-radius:50%; background:var(--km-soft); color:var(--km-accent-d);
  font-weight:700; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}

/* --- Carril de instructor ----------------------------------------- */
.km-lane{
  position:absolute; top:220px; width:354px; height:538px;
  background:#fff; border-radius:18px; border:1px solid #e8eaef;
  box-shadow:0 2px 10px rgba(22,33,62,.05);
}
.km-lane-h{
  height:58px; border-bottom:1px solid #f1f2f5;
  display:flex; align-items:center; gap:10px; padding:0 14px;
}
.km-lane-n{ font-size:14.5px; font-weight:700; }
.km-lane-c{ font-size:11.5px; color:#9aa2ae; margin-top:1px; }
.km-lane-i{ font-size:11.5px; font-weight:600; color:#9aa2ae; }

/* --- Tarjeta de clase --------------------------------------------- */
.km-card{
  position:absolute; width:338px; height:86px; background:#fff;
  border:1px solid #e8eaef; border-radius:14px; padding:12px 14px;
  box-shadow:0 1px 2px rgba(22,33,62,.05);
}
.km-card-t{ display:flex; align-items:center; gap:8px; }
.km-card-t i{ width:4px; height:16px; border-radius:4px; background:#3B82F6; }
.km-card-t b{ font-size:14px; font-weight:700; }
.km-card-t s{ flex:1; }
.km-lvl{
  display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:11px;
  background:#eef2ff; color:#3f51b5; font-size:11px; font-weight:600; text-decoration:none;
}
.km-card-m{ font-size:12.5px; color:var(--km-sub); margin-top:5px; }
.km-card-s{ display:flex; align-items:center; gap:6px; margin-top:8px; }
.km-stu{
  display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px 0 4px;
  border-radius:11px; background:#f6f7f9; font-size:11px; color:#5b6472; font-weight:500;
}

/* hueco vacio de las 12:00 */
.km-slot{
  position:absolute; width:338px; height:58px;
  border:1.5px dashed #dbe0e8; border-radius:14px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:13px; font-weight:600; color:#aab1bd;
}

/* --- Paginador y barra inferior ----------------------------------- */
.km-dots{
  position:absolute; left:0; right:0; top:764px; height:8px;
  display:flex; justify-content:center; align-items:center; gap:7px;
}
.km-dots span{ width:7px; height:7px; border-radius:7px; background:#d8dce3; }

.km-nav{
  position:absolute; left:0; right:0; bottom:0; height:60px; background:#fff;
  border-top:1px solid #e0e0e0; box-shadow:0 -2px 8px rgba(0,0,0,.08);
  display:flex; align-items:center;
}
.km-nav span{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; }
.km-nav em{ font-style:normal; font-size:9px; font-weight:600; letter-spacing:.2px; color:#888; }
.km-nav .on em{ color:var(--km-accent-d); }

/* --- Hoja "New Lesson" -------------------------------------------- */
.km-sheet{
  position:absolute; left:0; right:0; top:52px; bottom:0; background:#fbfaf8;
  border-radius:22px 22px 0 0; overflow:hidden;
  box-shadow:0 -14px 40px rgba(22,33,62,.16);
}
.km-sheet-h{
  height:56px; border-bottom:1px solid #f0ede8; background:#fff;
  display:flex; align-items:center; padding:0 16px; gap:10px;
}
.km-sheet-h b{ flex:1; font-size:18px; font-weight:700; color:#1a1a2e; }
.km-sched{
  display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 10px;
  border:1px solid #e2e5ea; border-radius:8px; font-size:12.5px; font-weight:600; color:#4b5563;
}
.km-slabel{
  position:absolute; font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--km-label);
}
.km-field{ position:absolute; }
.km-field-l{ font-size:11.5px; font-weight:600; color:#6b7280; margin-bottom:6px; }
.km-field-b{
  height:46px; background:#fff; border-radius:11px; border:1px solid #d8dce3;
  display:flex; align-items:center; padding:0 12px; gap:8px;
}
.km-field-v{
  flex:1; min-width:0; font-size:14px; font-weight:500;
  white-space:nowrap; overflow:hidden;
}
.km-durs{ display:flex; gap:8px; }
.km-durs span{
  flex:1; height:42px; border-radius:11px; border:1px solid #d8dce3; background:#fff;
  color:#5b6472; font-size:13.5px; font-weight:500;
  display:flex; align-items:center; justify-content:center;
}
.km-durs span.on{
  border-color:var(--km-accent); background:var(--km-soft); color:#b45309; font-weight:700;
}
.km-ends{ font-size:12px; color:#8a919e; margin-top:8px; }
.km-ends b{ font-weight:700; color:#4b5563; }
.km-enrolled{
  display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:10px;
  background:var(--km-soft); color:#b45309; font-size:11px; font-weight:700;
}
.km-search{
  position:absolute; height:44px; background:#fff; border-radius:11px; border:1px solid #d8dce3;
  display:flex; align-items:center; gap:8px; padding:0 12px;
}
.km-search span{ flex:1; font-size:13.5px; color:#9ca3af; }
.km-search b{ font-size:11.5px; font-weight:700; color:var(--km-accent-d); }
.km-roster{
  position:absolute; height:56px; background:#fff; border:1px solid #ebebeb;
  border-radius:13px; padding:0 12px; display:flex; align-items:center; gap:10px;
}
.km-roster-n{ font-size:13.5px; font-weight:600; }
.km-roster-m{ font-size:11px; color:#9ca3af; margin-top:2px; }
.km-sheet-f{
  position:absolute; left:0; right:0; bottom:0; height:84px; background:#fff;
  border-top:1px solid #f0ede8; display:flex; align-items:center; gap:12px; padding:0 16px;
}
.km-cancel{
  display:inline-flex; align-items:center; justify-content:center; height:50px; padding:0 22px;
  border-radius:12px; border:1px solid #dfe3ea; color:#5b6472; font-size:15px; font-weight:600;
}
.km-save{
  flex:1; display:inline-flex; align-items:center; justify-content:center; height:50px;
  border-radius:12px; background:#e5e7eb; color:#9ca3af; font-size:15.5px; font-weight:700;
}

/* --- Dedo --------------------------------------------------------- */
.km-ring{
  position:absolute; width:68px; height:68px; border-radius:68px;
  border:2px solid var(--km-accent);
}
.km-cursor{
  position:absolute; width:44px; height:44px; border-radius:44px;
  background:rgba(22,33,62,.16); border:2px solid rgba(255,255,255,.85);
  box-shadow:0 4px 12px rgba(22,33,62,.22);
}

/* Sin animacion si el sistema lo pide: se congela un fotograma. */
@media (prefers-reduced-motion:reduce){
  .km-ring, .km-cursor{ display:none; }
}