/* ===== Copiloto · sistema visual (Apple-like + patrón AI-chat real) ===== */
*{ box-sizing:border-box; margin:0; padding:0; }

:root{
  --base:oklch(0.99 0.004 250); --raised:oklch(0.975 0.005 250); --raised-2:oklch(0.955 0.006 250);
  --border:oklch(0.915 0.006 250); --txt:oklch(0.22 0.01 250); --txt-2:oklch(0.52 0.01 250); --txt-3:oklch(0.64 0.01 250);
  --accent:oklch(0.62 0.16 248); --accent-hov:oklch(0.57 0.17 248); --on-accent:oklch(0.99 0.004 250);
  --shadow-sm:0 1px 2px oklch(0.5 0.02 250 / .07); --shadow-lg:0 14px 40px oklch(0.45 0.02 250 / .12);
  --glass:oklch(0.99 0.004 250 / .72);
  --ease:cubic-bezier(.16,1,.3,1); --col:740px;
  --font:"Geist",-apple-system,system-ui,"Segoe UI",sans-serif;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
}
[data-theme="dark"]{
  --base:oklch(0.17 0.008 255); --raised:oklch(0.21 0.009 255); --raised-2:oklch(0.25 0.01 255);
  --border:oklch(0.29 0.01 255); --txt:oklch(0.95 0.005 255); --txt-2:oklch(0.70 0.01 255); --txt-3:oklch(0.56 0.01 255);
  --accent:oklch(0.68 0.15 248); --accent-hov:oklch(0.73 0.15 248); --on-accent:oklch(0.16 0.01 255);
  --shadow-sm:0 1px 2px oklch(0 0 0 / .25); --shadow-lg:0 18px 48px oklch(0 0 0 / .38); --glass:oklch(0.17 0.008 255 / .70);
}
html,body{ height:100%; } body{ font-family:var(--font); background:var(--base); color:var(--txt);
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.6;
  transition:background-color .45s var(--ease), color .45s var(--ease); }
.sidebar,.composer-inner,.row.user .bubble,.chip,.new,.theme,.nav-i,.rec{ transition:background-color .45s var(--ease), border-color .45s var(--ease), color .25s var(--ease); }
.app{ display:flex; height:100vh; overflow:hidden; }
button{ font:inherit; color:inherit; cursor:pointer; }
[hidden]{ display:none !important; }

/* ===== Área principal: una vista visible por vez ===== */
.main{ flex:1; display:flex; min-width:0; position:relative; }
.view{ flex:1; display:flex; flex-direction:column; min-width:0; position:relative; }

/* ===== Sidebar ===== */
.sidebar{ width:260px; flex-shrink:0; background:var(--raised); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:16px 12px; gap:16px; }
.brand{ display:flex; align-items:center; gap:8px; font-family:var(--font); font-size:16px; font-weight:600;
  letter-spacing:-.01em; padding:4px 6px; }
.brand .mark{ color:var(--accent); }
.new{ font-size:14px; font-weight:500; text-align:left; background:var(--base); border:1px solid var(--border);
  border-radius:11px; padding:10px 12px; transition:background .18s var(--ease); }
.new:hover{ background:var(--raised-2); }
.nav{ display:flex; flex-direction:column; gap:1px; }
.nav-i{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--txt-2); text-align:left;
  background:none; border:none; border-radius:8px; padding:8px 8px;
  transition:background .15s var(--ease), color .15s var(--ease); }
.nav-i .nav-ic{ width:16px; text-align:center; color:var(--txt-3); }
.nav-i:hover{ background:var(--raised-2); color:var(--txt); }
.nav-i.activa{ background:var(--raised-2); color:var(--txt); font-weight:500; }
.nav-i.activa .nav-ic{ color:var(--accent); }
.recents{ display:flex; flex-direction:column; gap:1px; overflow-y:auto; flex:1; min-height:0; }
.rec-label{ font-size:11.5px; font-weight:600; color:var(--txt-3); letter-spacing:.05em; text-transform:uppercase; padding:6px 8px; }
.rec-list{ display:flex; flex-direction:column; gap:1px; }
.rec-vacio{ font-size:12.5px; color:var(--txt-3); padding:6px 8px; }
.rec{ font-size:13.5px; color:var(--txt-2); text-align:left; background:none; border:none; border-radius:8px;
  padding:7px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%;
  transition:background .15s var(--ease); }
.rec:hover{ background:var(--raised-2); color:var(--txt); }
.rec.activa{ background:var(--raised-2); color:var(--txt); }
.foot{ display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--border); padding-top:12px; }
.theme{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--txt-2); background:none;
  border:1px solid var(--border); border-radius:9px; padding:8px 10px; transition:background .15s var(--ease); }
.theme:hover{ background:var(--raised-2); }
.ic-moon{ display:none; } [data-theme="dark"] .ic-sun{ display:none; } [data-theme="dark"] .ic-moon{ display:inline; }
.user{ display:flex; align-items:center; gap:9px; padding:4px 6px; }
.ava{ width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; font-size:11px; font-weight:600; }
.uinfo{ display:flex; flex-direction:column; font-size:13.5px; font-weight:500; }
.uinfo small{ font-size:11.5px; color:var(--txt-3); font-weight:400; font-variant-numeric:tabular-nums; }
.uinfo small.ok{ color:oklch(0.62 0.13 150); }

/* ===== Chat ===== */
.chat{ flex:1; display:flex; flex-direction:column; min-width:0; position:relative; }
.topbar{ position:sticky; top:0; z-index:5; padding:14px 24px; font-size:13px; font-weight:500; color:var(--txt-3);
  background:var(--glass); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); }
.stage{ flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* Estado vacío: saludo + composer + chips centrados */
.hero{ display:none; }
.chat.empty .hero{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; flex:1; padding:0 24px 8vh; }
.chat.empty .messages, .chat.empty .dock{ display:none; }
.chat.empty .hero > *{ animation:fadeUp .6s var(--ease) both; }
.chat.empty .hero > *:nth-child(1){ animation-delay:.02s; }
.chat.empty .hero > *:nth-child(2){ animation-delay:.10s; }
.chat.empty .hero > *:nth-child(3){ animation-delay:.18s; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
#saludo{ font-family:var(--display); font-size:42px; font-weight:500; letter-spacing:-.01em; font-optical-sizing:auto; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:var(--col); }
.chip{ font-size:13px; color:var(--txt-2); background:var(--raised); border:1px solid var(--border);
  border-radius:999px; padding:8px 14px;
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.chip:hover{ background:var(--raised-2); color:var(--txt); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.chip:active{ transform:translateY(0); }

/* Conversación activa */
.messages{ flex:1; overflow-y:auto; padding:8px 0 16px; }
.row{ max-width:var(--col); margin:0 auto; padding:10px 24px; display:flex; }
.row.user{ justify-content:flex-end; }
.bubble{ white-space:pre-wrap; word-wrap:break-word; }
.row.user .bubble{ background:var(--raised-2); border:1px solid var(--border); padding:11px 15px;
  border-radius:16px 16px 4px 16px; max-width:80%; }
.row.assistant .bubble{ max-width:70ch; padding-top:1px; }
/* Línea de progreso en vivo */
.prog{ font-size:13px; color:var(--txt-3); display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.prog::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.1s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ opacity:.3; transform:scale(.8); } 50%{ opacity:1; transform:scale(1); } }

/* Markdown del asistente */
.bubble.md{ white-space:normal; }
.bubble.md p{ margin:0 0 10px; } .bubble.md p:last-child{ margin-bottom:0; }
.bubble.md ul,.bubble.md ol{ margin:6px 0 10px; padding-left:20px; }
.bubble.md li{ margin:3px 0; }
.bubble.md strong{ font-weight:600; }
.bubble.md code{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:13px;
  background:var(--raised-2); border:1px solid var(--border); border-radius:6px; padding:1px 5px; }
.bubble.md pre{ background:var(--raised); border:1px solid var(--border); border-radius:12px; padding:12px 14px;
  overflow-x:auto; margin:8px 0; } .bubble.md pre code{ background:none; border:none; padding:0; }
.bubble.md table{ border-collapse:collapse; margin:8px 0; font-size:13.5px; width:100%; }
.bubble.md th,.bubble.md td{ border:1px solid var(--border); padding:6px 10px; text-align:left; }
.bubble.md th{ background:var(--raised-2); font-weight:600; }
.bubble.md tr:nth-child(even) td{ background:var(--raised); }
.bubble.md h1,.bubble.md h2,.bubble.md h3{ font-size:16px; font-weight:600; margin:10px 0 6px; }
.bubble.md a{ color:var(--accent); text-decoration:none; } .bubble.md a:hover{ text-decoration:underline; }
.anim{ animation:enter .34s var(--ease) both; }
@keyframes enter{ from{ opacity:0; transform:translateY(8px) scale(.99); } to{ opacity:1; transform:none; } }
.typing{ display:inline-flex; gap:4px; padding:6px 2px; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--txt-3); animation:blink 1.2s var(--ease) infinite; }
.typing i:nth-child(2){ animation-delay:.18s; } .typing i:nth-child(3){ animation-delay:.36s; }
@keyframes blink{ 0%,60%,100%{ opacity:.25; } 30%{ opacity:.9; } }

/* ===== Composer (se mueve entre hero y dock) ===== */
.dock{ padding:8px 24px 22px; background:linear-gradient(to top, var(--base) 65%, transparent); }
.chat.empty .composer{ width:100%; max-width:var(--col); }
.composer{ width:100%; }
.dock .composer{ max-width:var(--col); margin:0 auto; }
.composer-inner{ display:flex; align-items:center; gap:8px; background:var(--raised); border:1px solid var(--border);
  border-radius:16px; padding:7px 8px 7px 12px; box-shadow:var(--shadow-sm);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease); }
.composer-inner:focus-within{ border-color:var(--accent); box-shadow:var(--shadow-lg); }
.add{ flex-shrink:0; width:30px; height:30px; border-radius:9px; border:none; background:none; color:var(--txt-3);
  font-size:18px; display:grid; place-items:center; transition:background .15s var(--ease); }
.add:hover{ background:var(--raised-2); color:var(--txt); }
#input{ flex:1; resize:none; border:none; background:none; color:var(--txt); font:inherit; font-size:15px;
  line-height:1.5; padding:7px 0; max-height:200px; outline:none; }
#input::placeholder{ color:var(--txt-3); }
.mode{ flex-shrink:0; font-size:12px; color:var(--txt-3); padding:0 4px; font-variant-numeric:tabular-nums; }
#enviar{ flex-shrink:0; width:34px; height:34px; border:none; border-radius:10px; background:var(--accent);
  color:var(--on-accent); display:grid; place-items:center; transition:background .15s var(--ease), transform .12s var(--ease); }
#enviar:hover{ background:var(--accent-hov); } #enviar:active{ transform:scale(.94); }
#enviar:disabled{ opacity:.4; cursor:default; }

/* ===== Vistas con scroll (Informes / Comisiones / Alumno) ===== */
.view.vista{ display:block; overflow-y:auto; }
.vista-scroll{ max-width:1080px; margin:0 auto; padding:30px 32px 72px; }
.vista-scroll > *{ animation:fadeUp .5s var(--ease) both; }
.vista-head{ margin-bottom:24px; }
.vista-head h1{ font-family:var(--display); font-size:30px; font-weight:500; letter-spacing:-.01em; font-optical-sizing:auto; }
.vista-sub{ color:var(--txt-2); font-size:14px; margin-top:4px; }
.vacio{ color:var(--txt-2); font-size:14px; padding:48px 0; text-align:center; max-width:46ch; margin:0 auto; }

/* ===== Dashboard (grid de paneles + gráficos) ===== */
.dash-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.panel{ background:var(--raised); border:1px solid var(--border); border-radius:20px; padding:18px 18px 16px; min-width:0; }
.panel-wide{ grid-column:1 / -1; }
.panel-t{ font-size:13px; font-weight:600; color:var(--txt-2); letter-spacing:.01em; margin-bottom:14px; }
.chart-box{ position:relative; height:240px; }
.panel-wide .chart-box{ height:280px; }

/* Ranking (lista de filas) */
.ranking{ display:flex; flex-direction:column; }
.rank-row{ display:flex; align-items:center; gap:12px; padding:10px 2px; border-top:1px solid var(--border); }
.rank-row:first-child{ border-top:none; }
.rank-pos{ width:22px; color:var(--txt-3); font-size:13px; font-variant-numeric:tabular-nums; text-align:right; }
.rank-nombre{ flex:1; font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-meta{ color:var(--txt-3); font-size:13px; }
.rank-deuda{ color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums; }

/* ===== Tablas de datos (dashboards / alumno) ===== */
.tabla{ width:100%; border-collapse:collapse; font-size:14px; }
.tabla th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--txt-3); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--border); }
.tabla td{ padding:11px 10px; border-bottom:1px solid var(--border); }
.tabla tr:last-child td{ border-bottom:none; }
.tabla td.num, .tabla th.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* ===== Badges de estado ===== */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500;
  padding:3px 9px; border-radius:999px; border:1px solid var(--border); color:var(--txt-2); background:var(--raised-2); }
.badge.ok{ color:oklch(0.55 0.13 150); }
.badge.warn{ color:oklch(0.58 0.14 75); }
.badge.bad{ color:oklch(0.55 0.18 25); }

/* ===== Comisiones ===== */
.comisiones-list{ display:flex; flex-direction:column; gap:16px; }
.comi{ background:var(--raised); border:1px solid var(--border); border-radius:20px; padding:22px; }
.comi-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px; }
.comi-nombre{ font-family:var(--display); font-size:20px; font-weight:500; }
.comi-stats{ display:flex; flex-wrap:wrap; gap:28px; margin-bottom:16px; }
.stat{ display:flex; flex-direction:column; gap:2px; }
.stat b{ font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.stat span{ font-size:12px; color:var(--txt-3); }
.meter{ height:7px; border-radius:999px; background:var(--raised-2); overflow:hidden; margin-bottom:18px; }
.meter > i{ display:block; height:100%; background:var(--accent); border-radius:999px;
  transition:width .5s var(--ease); }
.comi-sub{ font-size:11.5px; font-weight:600; color:var(--txt-3); letter-spacing:.05em;
  text-transform:uppercase; margin:4px 0 8px; }
.alumno-link{ background:none; border:none; color:var(--accent); cursor:pointer; font:inherit;
  padding:0; text-align:left; }
.alumno-link:hover{ text-decoration:underline; }

/* ===== Vista de un alumno ===== */
.volver{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--txt-2);
  background:var(--raised); border:1px solid var(--border); border-radius:10px; padding:7px 12px;
  margin-bottom:18px; transition:background .15s var(--ease), color .15s var(--ease); }
.volver:hover{ background:var(--raised-2); color:var(--txt); }
.alumno-nombre{ font-family:var(--display); font-size:30px; font-weight:500; letter-spacing:-.01em; }
.alumno-meta{ display:flex; flex-wrap:wrap; gap:20px; color:var(--txt-2); font-size:14px; margin:6px 0 28px; }
.alumno-meta b{ color:var(--txt); font-weight:500; }
.alumno-sec{ font-size:13px; font-weight:600; color:var(--txt-2); letter-spacing:.01em; margin:24px 0 10px; }
.pend-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pend-chip{ font-size:13px; color:var(--txt-2); background:var(--raised); border:1px solid var(--border);
  border-radius:999px; padding:6px 13px; }

/* ===== Login (overlay) ===== */
.login{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:var(--base);
  animation:fadeUp .4s var(--ease) both; }
.login-card{ width:min(360px,90vw); display:flex; flex-direction:column; gap:10px; padding:8px; }
.login-card .brand{ margin-bottom:10px; }
.login-t{ font-family:var(--display); font-size:26px; font-weight:500; letter-spacing:-.01em; }
.login-sub{ color:var(--txt-2); font-size:14px; margin-bottom:8px; }
#login-form{ display:flex; flex-direction:column; gap:10px; }
#login-pass{ font:inherit; font-size:15px; background:var(--raised); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; color:var(--txt); outline:none;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease); }
#login-pass::placeholder{ color:var(--txt-3); }
#login-pass:focus{ border-color:var(--accent); box-shadow:var(--shadow-lg); }
#login-btn{ font:inherit; font-weight:500; background:var(--accent); color:var(--on-accent); border:none;
  border-radius:12px; padding:12px; transition:background .15s var(--ease), transform .12s var(--ease); }
#login-btn:hover{ background:var(--accent-hov); } #login-btn:active{ transform:scale(.98); }
#login-btn:disabled{ opacity:.5; cursor:default; }
.login-error{ color:oklch(0.55 0.18 25); font-size:13px; }

@media (max-width:900px){ .dash-grid{ grid-template-columns:1fr; } .panel-wide{ grid-column:auto; } }
@media (max-width:760px){ .sidebar{ display:none; } .vista-scroll{ padding:22px 18px 60px; } }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }