/* ==================================================================
   KAPAY · Animaciones nativas de la home
   ------------------------------------------------------------------
   Port a JS/CSS puro de dos composiciones hechas en Claude Design:

     "Kapay Product Animation" -> .ka-panel (planning / whiteboard)

   El bloque .ks-* de la composicion "student -> payment" se retiro:
   lo sustituye css/kapay-chain.css.

   El original es React + Motion a 1920x1080. Aqui solo se conserva la
   GEOMETRIA (la calcula el JS con las mismas formulas del fuente) y el
   ASPECTO (que vive en este fichero, como clases). El JS solo toca por
   frame: opacity, transform, color y texto.

   Todo es reversible: basta con quitar el <link> y el <script> de
   index.html: la maquetacion de la home no depende de este fichero.
   ================================================================== */

:root{
  /* Naranja del sitio (--primary) en vez del #F58220 de la app, para que
     la animacion se lea como parte de la pagina y no como una captura. */
  --ka-orange:      #F58220;
  --ka-orange-ink:  #DE7016;
  --ka-orange-soft: #fef0e6;
  --ka-indigo:      #3f51b5;
  --ka-indigo-l:    #e8eaf6;
  --ka-ink:         #212121;
  --ka-sub:         #757575;
  --ka-line:        #e0e0e0;
  --ka-colbg:       #f5f7fa;
  --ka-colhead:     #edf2f7;
  --ka-blue:        #3b82f6;
  --ka-navy:        #16213e;
  --ka-green:       #059669;
  --ka-ok:          #2e7d32;
}

/* --- Escenario: escala el panel al ancho disponible --------------- */
.ka-stage{ position:relative; width:100%; }
.ka-scale{ position:absolute; left:0; top:0; transform-origin:top left; }
.ka-stage svg{ display:block; flex-shrink:0; }

/* ==================================================================
   1 · PLANNING  (whiteboard + modal "New Lesson")
   ================================================================== */
.ka-panel{
  position:absolute; inset:0; overflow:hidden;
  background:#fff; border:1px solid #ececf1; border-radius:20px;
  box-shadow:0 30px 70px rgba(22,33,62,.10), 0 4px 14px rgba(22,33,62,.05);
  font-family:'DM Sans', system-ui, sans-serif; color:var(--ka-ink);
  text-align:left; line-height:normal;
}
.ka-panel *{ box-sizing:border-box; }

/* toolbar */
.ka-toolbar{ position:absolute; left:0; right:0; top:0; height:56px; border-bottom:1px solid #e9ecef; }
.ka-tb-l{ position:absolute; left:16px; top:11px; height:34px; display:flex; align-items:center; gap:4px; }
.ka-tb-r{ position:absolute; right:16px; top:11px; height:34px; display:flex; align-items:center; gap:8px; }
.ka-date{ font-size:15px; font-weight:700; color:#1a1a2e; min-width:220px; text-align:center; }
.ka-btn{ display:inline-flex; align-items:center; gap:4px; height:34px; padding:0 12px;
  border:1px solid #d1d5db; border-radius:8px; font-size:13px; font-weight:600; color:#374151; white-space:nowrap; }
.ka-btn.pad{ padding:0 14px; margin-left:4px; }
.ka-seg{ display:flex; height:34px; border:1px solid #d1d5db; border-radius:8px; overflow:hidden; }
.ka-seg > span{ display:flex; align-items:center; gap:5px; padding:0 12px;
  font-size:13px; font-weight:500; color:#6b7280; white-space:nowrap; background:#fff; }
.ka-seg > span + span{ border-left:1px solid #d1d5db; }
.ka-seg > span.on{ background:#eceef5; color:#1a1a2e; }

/* franja de llegadas / salidas */
.ka-flow{ position:absolute; left:0; right:0; border-bottom:1px solid #eef0f2;
  display:flex; align-items:center; gap:12px; padding:0 16px; }
.ka-flow span.i{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:#6b7280; }
.ka-flow .sp{ flex:1; }
.ka-flow .det{ display:inline-flex; align-items:center; gap:1px; font-size:11px; font-weight:600; color:#9ca3af; }

/* bolsa de alumnos sin asignar */
.ka-pool{ position:absolute; left:0; right:0; background:#fbfaf7;
  border-bottom:1px solid var(--ka-line); padding:8px 16px 10px; }
.ka-pool-head{ display:flex; align-items:center; gap:6px; height:22px; }
.ka-pool-head b{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ka-ink); }
.ka-pool-count{ min-width:18px; height:18px; padding:0 6px; border-radius:9px;
  background:rgba(5,150,105,.12); color:#047857; font-size:11px;
  display:flex; align-items:center; justify-content:center; }
.ka-pool-hint{ margin-left:auto; font-size:10px; font-weight:500; color:var(--ka-sub); }

/* tarjeta de alumno */
.ka-card{ position:absolute; height:34px; background:#fff; border-radius:6px;
  border:1px solid var(--ka-line); box-shadow:0 1px 3px rgba(0,0,0,.08);
  display:flex; align-items:center; padding:0 8px; gap:8px; }
.ka-card.pool{ border-left:3px solid var(--ka-green); }
.ka-card.drag{ border-left:3px solid var(--ka-indigo); }
.ka-card-av{ width:24px; height:24px; border-radius:24px; background:var(--ka-indigo-l);
  flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.ka-card-nm{ flex:1; min-width:0; font-size:12px; font-weight:500; color:var(--ka-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ka-ph{ position:absolute; height:34px; border-radius:6px;
  background:rgba(63,81,181,.04); border:2px dashed rgba(63,81,181,.3); }

/* regla horaria */
.ka-ruler{ position:absolute; border-bottom:1px solid var(--ka-line); }
.ka-ruler .lbl{ position:absolute; left:0; top:0; height:100%; border-right:1px solid var(--ka-line); }
.ka-ruler .hr{ position:absolute; top:0; bottom:0; border-left:1px solid var(--ka-line);
  padding-left:6px; display:flex; align-items:center; }
.ka-ruler .hr span{ font-size:12px; font-weight:600; color:var(--ka-sub); letter-spacing:.02em; }

/* carriles de instructor */
.ka-lane-lbl{ position:absolute; border-right:1px solid var(--ka-line); background:#fff;
  display:flex; align-items:center; gap:5px; padding:8px 10px; }
.ka-lane-lbl.sep, .ka-lane-track.sep{ border-bottom:1px solid var(--ka-line); }
.ka-lane-lbl b{ font-size:12px; font-weight:600; color:var(--ka-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ka-lane-n{ margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  background:rgba(63,81,181,.10); color:var(--ka-indigo); font-size:11px; font-weight:600;
  display:flex; align-items:center; justify-content:center; }
.ka-lane-track{ position:absolute;
  background-image:linear-gradient(to right, var(--ka-line) 1px, transparent 1px);
  background-size:180px 100%; }
.ka-now{ position:absolute; width:2px; background:#ef4444; }

/* columna de clase */
.ka-col{ position:absolute; background:var(--ka-colbg); border:1px solid var(--ka-line);
  border-left:3px solid var(--ka-blue); border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.ka-col-head{ height:74px; padding:8px 10px; background:var(--ka-colhead);
  border-bottom:1px solid var(--ka-line); border-radius:8px 8px 0 0; }
.ka-col-t1{ display:flex; align-items:baseline; gap:5px; }
.ka-col-t1 b{ font-size:12px; font-weight:600; color:var(--ka-ink); line-height:1.2; }
.ka-col-t1 i{ font-size:10px; font-style:normal; color:var(--ka-sub); }
.ka-col-t2{ display:flex; align-items:center; gap:4px; margin-top:4px; }
.ka-col-t2 em{ font-style:normal; font-size:11px; font-weight:500; color:var(--ka-sub);
  background:rgba(63,81,181,.07); border-radius:4px; padding:1px 5px; }
.ka-col-t2 s{ text-decoration:none; font-size:11px; color:#bbb; }
.ka-col-t3{ display:flex; align-items:center; gap:3px; margin-top:4px; font-size:11px; color:var(--ka-sub); }
.ka-col-list{ position:relative; min-height:48px; }

/* boton flotante */
.ka-fab{ position:absolute; right:20px; bottom:20px; width:36px; height:36px; border-radius:36px;
  background:#1a1a2e; opacity:.75; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.2); }

/* rango vacio seleccionado antes de abrir el modal */
.ka-slotsel{ position:absolute; border-radius:8px;
  background:rgba(63,81,181,.07); border:1px solid rgba(63,81,181,.4); }

/* --- modal "New Lesson" --- */
.ka-backdrop{ position:absolute; inset:0; background:rgba(22,33,62,.32); }
.ka-modal{ position:absolute; background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.08); }
.ka-mhead{ height:60px; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; padding:0 24px; gap:8px; }
.ka-mhead b{ font-size:17px; font-weight:600; letter-spacing:-.2px; color:#1a1a1a; }
.ka-mhead .sp{ flex:1; }
.ka-mhead .lb{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#9ca3af; }
.ka-mhead .st{ display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; margin-right:8px;
  background:#f5f5f5; border-radius:8px; font-size:13px; font-weight:500; color:#444; }
.ka-rail{ position:absolute; left:0; width:320px; background:#fbfaf8; padding:20px 20px 8px; }
.ka-rail-grp{ padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid #f0ece8; }
.ka-rail-grp.last{ padding-bottom:0; margin-bottom:0; border-bottom:none; }
.ka-slabel{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#c4c9d4; margin-bottom:8px; }
.ka-field{ margin-bottom:6px; }
.ka-field > span{ display:block; font-size:11.5px; font-weight:500; color:#6b7280; margin-bottom:3px; }
.ka-input{ height:40px; border-radius:5px; background:#fff; border:1px solid #dadce3;
  display:flex; align-items:center; padding:0 10px; gap:8px; }
.ka-input b{ flex:1; min-width:0; font-size:13px; font-weight:500; color:var(--ka-ink);
  white-space:nowrap; overflow:hidden; }
.ka-row2{ display:flex; gap:8px; }
.ka-durs{ display:flex; gap:6px; }
.ka-durs span{ flex:1; text-align:center; padding:7px 4px; font-size:12px; font-weight:600;
  border-radius:8px; background:#fff; border:1px solid #d1d5db; color:#6b7280; }
.ka-durs span.on{ background:var(--ka-orange-soft); border-color:var(--ka-orange); color:var(--ka-orange-ink); }
.ka-endsat{ font-size:11.5px; color:#6b7280; margin-top:4px; }
.ka-endsat b{ color:#1a1a1a; font-weight:600; }
.ka-vsep{ position:absolute; width:1px; background:#f0f0f0; }
.ka-right{ position:absolute; background:#fffdfb; }
.ka-sp-head{ position:absolute; display:flex; align-items:center; gap:10px; }
.ka-sp-head .lb{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#c4c9d4; }
.ka-sp-head .cnt{ font-size:12.5px; color:#6b7280; }
.ka-sp-head .cnt b{ color:var(--ka-orange-ink); font-weight:700; }
.ka-combo{ position:absolute; background:#fff; border-radius:10px; border:1px solid #d1d5db;
  display:flex; align-items:center; gap:8px; padding:0 12px; }
.ka-combo .ph{ flex:1; font-size:13px; color:#9ca3af; }
.ka-combo .mt{ font-size:11.5px; font-weight:700; color:var(--ka-orange-ink); }
.ka-empty{ position:absolute; border:1px dashed #e5e0d8; border-radius:12px; background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ka-empty b{ font-size:13.5px; font-weight:600; color:#6b7280; margin:10px 0 4px; }
.ka-empty i{ font-style:normal; font-size:12px; color:#9ca3af; }
.ka-roster{ position:absolute; background:#fff; border:1px solid #ebebeb; border-radius:12px; padding:11px 14px; }
.ka-roster .top{ display:flex; align-items:center; gap:12px; }
.ka-roster .av{ width:34px; height:34px; border-radius:34px; background:var(--ka-orange-soft);
  color:var(--ka-orange-ink); font-size:12px; font-weight:700; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; }
.ka-roster .txt{ flex:1; min-width:0; }
.ka-roster .txt b{ display:block; font-size:14px; font-weight:600; color:#1a1a1a; line-height:1.25; }
.ka-roster .txt i{ display:block; font-style:normal; font-size:12px; color:#6b7280; margin-top:2px; }
.ka-roster .pill{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px;
  border-radius:15px; border:1px solid #d1d5db; background:#fff;
  font-size:12.5px; font-weight:600; color:#6b7280; flex-shrink:0; }
.ka-roster .x{ width:26px; height:26px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ka-roster .stay{ margin-left:46px; margin-top:8px; font-size:11.5px; color:#9ca3af; }
.ka-mfoot{ position:absolute; left:0; right:0; bottom:0; height:62px; border-top:1px solid #f0f0f0;
  background:#fff; display:flex; align-items:center; gap:14px; padding:0 24px; }
.ka-mfoot .cancel{ display:inline-flex; align-items:center; padding:9px 18px; border-radius:8px;
  border:1px solid #ddd; color:#555; font-size:13.5px; font-weight:500; }
.ka-mfoot .warn{ font-size:12.5px; color:#b45309; }
.ka-mfoot .sp{ flex:1; }
.ka-mfoot .save{ display:inline-flex; align-items:center; padding:10px 20px; border-radius:8px;
  background:#e5e7eb; color:#9ca3af; font-size:13.5px; font-weight:600; }

/* cursor */
.ka-ring{ position:absolute; width:44px; height:44px; border-radius:44px; border:2px solid var(--ka-orange); }
.ka-cursor{ position:absolute; filter:drop-shadow(0 3px 6px rgba(0,0,0,.28)); pointer-events:none; }

/* ==================================================================
   2 · Reglas del panel
   ------------------------------------------------------------------
   El bloque "HOME v2" que habia aqui maquetaba el hero anterior
   (.home .hero, .hero-anim, .system-section...). Esa home ya no existe:
   la actual vive en css/home.css con clases propias con prefijo .kh-.
   ================================================================== */

/* Por debajo de 860px el panel escala tanto que el texto interior deja
   de leerse. La home lo sustituye por la lista de pasos en texto. */
@media (max-width:860px){
  .ka-mount{ display:none; }
}

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