/* ═══════════════════════════════════════════════════════
   CIAE Neural Academy v17 — Chat-First UI
   Viewport completo · Sin scroll de página · Responsive
═══════════════════════════════════════════════════════ */
:root{
  --cna-bg:#07111f;--cna-panel:rgba(15,23,42,.90);--cna-panel2:rgba(30,41,59,.70);
  --cna-border:rgba(148,163,184,.18);--cna-border2:rgba(148,163,184,.10);
  --cna-text:#eef6ff;--cna-muted:#7c93b5;--cna-muted2:#4a637d;
  --cna-blue:#3b82f6;--cna-violet:#8b5cf6;--cna-cyan:#22d3ee;
  --cna-sb-w:260px;
  --cna-topbar-h:58px;
  --cna-strip-h:46px;
  --cna-input-h:auto;
  --cna-font:Inter,'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --cna-radius:14px;
}
*,*::before,*::after{box-sizing:border-box}
.cna-hidden{display:none!important}

/* ── LOGIN ── */
.cna-login{min-height:280px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(59,130,246,.12),transparent),#07111f;
  border-radius:24px;font-family:var(--cna-font);color:#dbeafe;text-align:center;padding:40px}
.cna-login-inner strong{display:block;font-size:20px;margin:10px 0}

/* ══════════════════════════════════════════════
   WRAP & APP — ocupa el viewport disponible
══════════════════════════════════════════════ */
.cna-wrap{
  width:100%;
  /* JS calcula el top offset y setea --cna-top */
  margin:0;padding:0;
  font-family:var(--cna-font);
  color:var(--cna-text);
}
.cna-app{
  display:grid;
  grid-template-columns:var(--cna-sb-w) 1fr;
  /* altura se calibra via JS con --cna-available-h */
  height:var(--cna-available-h,calc(100dvh - 80px));
  max-height:var(--cna-available-h,calc(100dvh - 80px));
  min-height:500px;
  background:
    radial-gradient(circle at 20% 0%,rgba(59,130,246,.28),transparent 30%),
    radial-gradient(circle at 90% 5%,rgba(139,92,246,.22),transparent 24%),
    linear-gradient(170deg,#07111f 0%,#0b1628 60%,#130f2f 100%);
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  position:relative;
}

/* ══════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════ */
.cna-sidebar{
  width:var(--cna-sb-w);
  background:rgba(2,6,23,.88);
  border-right:1px solid var(--cna-border2);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  z-index:30;
}

/* Brand */
.cna-sb-brand{
  display:flex;align-items:center;gap:10px;padding:14px 14px 10px;
  border-bottom:1px solid var(--cna-border2);flex-shrink:0;
}
.cna-logo{
  width:40px;height:40px;border-radius:12px;flex:0 0 40px;
  background:#fff;display:grid;place-items:center;overflow:hidden;padding:3px;
}
.cna-logo img{width:100%;height:100%;object-fit:contain;border-radius:9px;display:block}
.cna-sb-brand-text strong{display:block;font-size:16px;color:#fff;line-height:1}
.cna-sb-brand-text small{display:block;font-size:10px;color:var(--cna-muted);margin-top:2px}
.cna-sb-close{display:none;background:none;border:none;color:var(--cna-muted);font-size:18px;cursor:pointer;margin-left:auto;padding:4px 8px;}

/* Score mini */
.cna-sb-score{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  padding:10px 12px 8px;flex-shrink:0;
}
.cna-sc-item{
  background:rgba(255,255,255,.07);border:1px solid var(--cna-border2);
  border-radius:10px;padding:6px 4px;text-align:center;
}
.cna-sc-ic{display:block;font-size:15px}
.cna-sc-v{
  display:block;font-size:18px;font-weight:900;color:#fff;line-height:1;
  transition:transform .15s;
}
.cna-sc-v.bump{animation:score-bump .3s ease}
@keyframes score-bump{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.cna-sc-l{display:block;font-size:9px;color:var(--cna-muted);text-transform:uppercase;margin-top:1px}

/* User */
.cna-sb-user{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-bottom:1px solid var(--cna-border2);flex-shrink:0;
}
.cna-userav{
  width:32px;height:32px;flex:0 0 32px;border-radius:50%;
  display:grid;place-items:center;font-weight:900;font-size:14px;color:#111827;
  background:linear-gradient(135deg,#fbbf24,#fb7185,#a78bfa);
}
.cna-sb-user-info b{display:block;color:#fff;font-size:12px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.cna-sb-user-info small{color:var(--cna-muted);font-size:10px}

/* Guides header */
.cna-sb-guides-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px 6px;flex-shrink:0;
}
.cna-sb-guides-head span{font-size:10px;font-weight:900;letter-spacing:.1em;color:var(--cna-muted);text-transform:uppercase}
.cna-sb-count{
  background:rgba(59,130,246,.24);color:#93c5fd;border-radius:99px;
  padding:1px 8px;font-size:10px;font-weight:900;
}

/* Search */
.cna-sb-search{
  width:calc(100% - 24px);margin:0 12px 6px;height:34px;
  border-radius:10px;border:1px solid var(--cna-border);
  background:rgba(255,255,255,.93);color:#111827;padding:0 12px;
  font-size:13px;outline:none;flex-shrink:0;
}

/* Guide list */
.cna-guide-list{
  flex:1;overflow-y:auto;padding:2px 8px 8px;display:flex;flex-direction:column;gap:3px;
}
.cna-guide-list::-webkit-scrollbar{width:4px}
.cna-guide-list::-webkit-scrollbar-thumb{background:rgba(148,163,184,.3);border-radius:99px}
.cna-no-guides-msg{color:var(--cna-muted);font-size:13px;padding:12px;text-align:center}

/* Guide button (Channel row) */
.cna-guide{
  width:100%;display:flex;align-items:center;gap:9px;
  padding:8px 9px;border-radius:10px;border:none;
  background:transparent;color:var(--cna-text);cursor:pointer;
  text-align:left;transition:.14s ease;min-height:52px;
}
.cna-guide:hover{background:rgba(255,255,255,.07)}
.cna-guide.active{
  background:rgba(59,130,246,.18);
  box-shadow:inset 2px 0 0 #3b82f6;
}
.cna-guide-av{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  display:grid;place-items:center;font-weight:900;font-size:14px;color:#fff;
}
.cna-av-max{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.cna-av-lia{background:linear-gradient(135deg,#a855f7,#7c3aed)}
.cna-guide-info{flex:1;min-width:0}
.cna-guide-info b{
  display:block;color:#fff;font-size:12.5px;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.cna-guide-info small{display:block;color:var(--cna-muted);font-size:10px;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cna-guide-prog{flex:0 0 32px;text-align:right}
.cna-guide-pct-mini{font-size:10px;color:var(--cna-blue);font-weight:700}
.cna-guide-pct-bar{
  display:block;width:32px;height:3px;background:rgba(255,255,255,.12);
  border-radius:99px;margin-top:3px;overflow:hidden;
}
.cna-guide-pct-bar span{display:block;height:100%;background:var(--cna-blue);border-radius:99px}

/* Sidebar nav */
.cna-sb-nav{
  border-top:1px solid var(--cna-border2);padding:8px;flex-shrink:0;
  display:flex;flex-direction:column;gap:3px;
}
.cna-sb-nav button{
  width:100%;background:transparent;border:none;color:var(--cna-muted);
  text-align:left;padding:8px 10px;border-radius:9px;font-size:12.5px;
  font-weight:700;cursor:pointer;transition:.12s;
}
.cna-sb-nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.cna-badge{background:#ec4899;color:#fff;border-radius:99px;font-size:9px;font-weight:900;padding:1px 6px}

/* ══════════════════════════════════════════════
   MAIN — chat-first
══════════════════════════════════════════════ */
.cna-main{
  display:flex;flex-direction:column;
  overflow:hidden;position:relative;min-width:0;
}

/* ── TOP BAR ── */
.cna-topbar{
  height:var(--cna-topbar-h);flex:0 0 var(--cna-topbar-h);
  display:flex;align-items:center;gap:12px;padding:0 16px;
  background:rgba(2,6,23,.70);border-bottom:1px solid var(--cna-border2);
  backdrop-filter:blur(16px);z-index:10;
}
.cna-menu-btn{
  display:none;flex-direction:column;gap:5px;background:none;border:none;
  cursor:pointer;padding:6px;border-radius:8px;flex:0 0 auto;
}
.cna-menu-btn span{display:block;width:20px;height:2px;background:var(--cna-muted);border-radius:2px}
.cna-topbar-tutor-av{
  width:32px;height:32px;flex:0 0 32px;border-radius:50%;
  background:linear-gradient(135deg,#3b82f6,#7c3aed);
  display:grid;place-items:center;position:relative;
}
.cna-pulse-dot{
  width:9px;height:9px;border-radius:50%;background:#38bdf8;
  box-shadow:0 0 12px #38bdf8;animation:cna-blink 1.3s infinite;
  position:absolute;bottom:0;right:0;border:2px solid #07111f;
}
@keyframes cna-blink{50%{opacity:.3}}
.cna-topbar-info{flex:1;min-width:0}
.cna-topbar-info strong{display:block;color:#fff;font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cna-topbar-info small{color:var(--cna-muted);font-size:11px}
.cna-topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.cna-topbar-status{
  font-size:11px;color:#38bdf8;font-weight:700;
  background:rgba(56,189,248,.12);border-radius:99px;padding:3px 10px;
  white-space:nowrap;
}
.cna-topbar-progress{display:flex;align-items:center;gap:7px}
.cna-progress-bar{width:80px;height:5px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden}
.cna-progress-bar div{height:100%;background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:99px;transition:width .5s}
.cna-topbar-progress span{font-size:11px;font-weight:900;color:var(--cna-blue)}

/* ── MODE CHIPS ── */
.cna-mode-strip{
  height:var(--cna-strip-h);flex:0 0 var(--cna-strip-h);
  overflow-x:auto;overflow-y:hidden;
  display:flex;align-items:center;padding:0 12px;
  background:rgba(2,6,23,.50);border-bottom:1px solid var(--cna-border2);
  scrollbar-width:none;gap:0;
}
.cna-mode-strip::-webkit-scrollbar{display:none}
.cna-mode-chips{display:flex;gap:6px;align-items:center;padding:2px 0;flex-shrink:0}
.cna-chip{
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);
  color:#e2e8f0;border-radius:99px;padding:5px 13px;font-size:12.5px;
  font-weight:800;cursor:pointer;transition:.15s;white-space:nowrap;
  font-family:inherit;flex:0 0 auto;
}
.cna-chip:hover{transform:translateY(-1px);opacity:.9}
.cna-chip.active-mode{color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.cna-chip-y     {background:rgba(245,158,11,.22);border-color:rgba(245,158,11,.40);color:#fbbf24}
.cna-chip-o     {background:rgba(249,115,22,.20);border-color:rgba(249,115,22,.38);color:#fb923c}
.cna-chip-r     {background:rgba(239,68,68,.20);border-color:rgba(239,68,68,.36);color:#f87171}
.cna-chip-b     {background:rgba(59,130,246,.20);border-color:rgba(59,130,246,.36);color:#60a5fa}
.cna-chip-g     {background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.34);color:#4ade80}
.cna-chip-fire  {background:rgba(239,68,68,.22);border-color:rgba(249,115,22,.44);color:#fb923c;animation:chip-fire 2s ease-in-out infinite}
@keyframes chip-fire{0%,100%{box-shadow:none}50%{box-shadow:0 0 10px rgba(249,115,22,.5)}}
.cna-chip-p     {background:rgba(139,92,246,.22);border-color:rgba(139,92,246,.40);color:#c4b5fd}
.cna-chip-t     {background:rgba(20,184,166,.18);border-color:rgba(20,184,166,.34);color:#2dd4bf}
.cna-chip-gray  {background:rgba(100,116,139,.18);border-color:rgba(100,116,139,.30);color:#94a3b8}
.cna-chip-y.active-mode  {background:#d97706;border-color:#f59e0b}
.cna-chip-o.active-mode  {background:#ea580c;border-color:#f97316}
.cna-chip-r.active-mode  {background:#dc2626;border-color:#ef4444}
.cna-chip-b.active-mode  {background:#2563eb;border-color:#3b82f6}
.cna-chip-g.active-mode  {background:#16a34a;border-color:#22c55e}
.cna-chip-fire.active-mode{background:#c2410c;border-color:#f97316}
.cna-chip-p.active-mode  {background:#7c3aed;border-color:#8b5cf6}
.cna-chip-t.active-mode  {background:#0d9488;border-color:#14b8a6}
.cna-chip-gray.active-mode{background:#475569;border-color:#64748b}

/* ══════════════════════════════════════════════
   WELCOME / CHAT VACÍO
══════════════════════════════════════════════ */
.cna-welcome{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:24px;text-align:center;
  animation:welcome-in .5s ease forwards;
}
@keyframes welcome-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cna-welcome-avatars{display:flex;gap:-10px;align-items:flex-end;margin-bottom:8px}
.cna-welcome-av{
  width:90px;height:90px;border-radius:50%;overflow:hidden;
  background:rgba(2,6,23,.6);border:3px solid rgba(255,255,255,.1);
  position:relative;flex:0 0 90px;
}
.cna-welcome-av-lia{margin-left:-16px;border-color:rgba(139,92,246,.4)}
.cna-welcome-av-max{border-color:rgba(59,130,246,.4)}
.cna-welcome-av .av-svg-mini{
  position:absolute;width:200%;height:200%;
  top:-18%;left:-50%;
}
.cna-welcome h2{margin:0;color:#fff;font-size:24px;letter-spacing:-.025em}
.cna-welcome p{margin:0;color:var(--cna-muted);font-size:15px}

/* ══════════════════════════════════════════════
   CHAT — protagonista total
══════════════════════════════════════════════ */
.cna-chat{
  flex:1;overflow-y:auto;
  padding:16px 20px 4px;
  display:flex;flex-direction:column;gap:10px;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
}
.cna-chat::-webkit-scrollbar{width:6px}
.cna-chat::-webkit-scrollbar-track{background:transparent}
.cna-chat::-webkit-scrollbar-thumb{background:rgba(148,163,184,.28);border-radius:99px}

/* ── MENSAJE ROW ── */
.cna-msg-row{display:flex;gap:9px;align-items:flex-end;max-width:100%}
.cna-msg-row--user  {flex-direction:row-reverse;align-self:flex-end;max-width:82%}
.cna-msg-row--tutor {flex-direction:row;align-self:flex-start;max-width:88%}
.cna-msg-row--system{justify-content:center;align-self:center;max-width:100%}
.cna-msg-row--break {align-self:center;width:100%;max-width:600px}

/* Mini avatar en burbujas del tutor */
.cna-msg-av{
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;
  overflow:hidden;position:relative;
  background:rgba(15,23,42,.8);
  border:2px solid rgba(255,255,255,.1);
}
.cna-msg-av .av-svg-mini{
  position:absolute;width:200%;height:200%;top:-18%;left:-50%;
}
.cna-msg-av--max{border-color:rgba(59,130,246,.4)}
.cna-msg-av--lia{border-color:rgba(139,92,246,.4)}

/* Cuando está hablando: pulso en el avatar del mensaje más reciente */
.cna-app.is-speaking .cna-msg-av--active{
  animation:av-speaking-ring .6s ease-in-out infinite;
  border-color:#38bdf8;
}
@keyframes av-speaking-ring{0%,100%{box-shadow:0 0 0 0 rgba(56,189,248,.5)}50%{box-shadow:0 0 0 6px rgba(56,189,248,.0)}}

/* Burbuja de mensaje */
.cna-msg-bubble{
  border-radius:18px;padding:11px 15px;
  font-size:14px;line-height:1.58;
  word-break:break-word;
  position:relative;
}

/* Usuario */
.cna-msg-row--user .cna-msg-bubble{
  background:linear-gradient(135deg,#3b82f6,#7c3aed);
  color:#fff;
  border-bottom-right-radius:5px;
}

/* Tutor */
.cna-msg-row--tutor .cna-msg-bubble{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.1);
  color:#dbeafe;
  border-bottom-left-radius:5px;
}
.cna-msg-row--tutor .cna-msg-bubble.from-cache{
  border-color:rgba(34,197,94,.25);
}

/* Header del tutor en la burbuja */
.cna-msg-header{
  display:flex;align-items:center;gap:7px;
  margin-bottom:7px;
}
.cna-msg-name{font-size:11px;font-weight:900;color:#93c5fd;text-transform:uppercase;letter-spacing:.06em}
.cna-source-cache{
  background:rgba(34,197,94,.2);color:#4ade80;border-radius:99px;
  padding:1px 7px;font-size:9px;font-weight:900;
}
.cna-msg-time{font-size:10px;color:rgba(255,255,255,.35);margin-top:6px;text-align:right}

/* Sistema */
.cna-msg-row--system .cna-msg-bubble{
  background:rgba(255,255,255,.06);border:1px solid var(--cna-border2);
  color:var(--cna-muted);font-size:12.5px;text-align:center;border-radius:12px;
  padding:8px 16px;
}

/* Error */
.cna-msg-row--error .cna-msg-bubble{
  background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);color:#fca5a5;
  border-radius:12px;font-size:13px;
}

/* Juego — tarjeta especial */
.cna-msg-row--tutor .cna-msg-bubble.cna-game-card{
  background:rgba(30,41,59,.80);
  border:1px solid rgba(148,163,184,.20);
}

/* ── SCROLL DOWN BUTTON ── */
.cna-scroll-down{
  position:absolute;bottom:160px;right:20px;z-index:15;
  width:38px;height:38px;border-radius:50%;
  background:rgba(59,130,246,.85);border:none;color:#fff;
  font-size:18px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.35);
  transition:.2s;display:grid;place-items:center;
}
.cna-scroll-down:hover{background:#3b82f6;transform:scale(1.08)}

/* ── LOADING ── */
.cna-loading{
  display:none;align-items:center;gap:10px;padding:10px 20px;
  color:var(--cna-muted);font-size:13px;flex-shrink:0;
}
.cna-loading-av{
  width:34px;height:34px;border-radius:50%;
  background:rgba(59,130,246,.2);border:1px solid rgba(59,130,246,.3);
  display:grid;place-items:center;font-size:18px;
  animation:cna-think-pulse 1s ease-in-out infinite;
}
@keyframes cna-think-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.cna-loading-dots{display:flex;gap:5px}
.cna-loading-dots span{
  width:7px;height:7px;border-radius:50%;background:#60a5fa;
  animation:cna-dot .85s infinite;
}
.cna-loading-dots span:nth-child(2){animation-delay:.14s}
.cna-loading-dots span:nth-child(3){animation-delay:.28s}
@keyframes cna-dot{50%{transform:translateY(-5px);opacity:.35}}

/* ── VOICE WAVE ── */
.cna-voice-strip{
  display:none;align-items:center;justify-content:center;gap:4px;
  height:24px;padding:0 20px;flex-shrink:0;
}
.cna-voice-strip.active{display:flex}
.cna-voice-strip span{
  width:4px;border-radius:99px;background:linear-gradient(to top,#38bdf8,#8b5cf6);
  height:4px;
}
.cna-voice-strip.active span{animation:cna-wave .5s infinite ease-in-out}
.cna-voice-strip span:nth-child(2){animation-delay:.07s}
.cna-voice-strip span:nth-child(3){animation-delay:.14s}
.cna-voice-strip span:nth-child(4){animation-delay:.21s}
.cna-voice-strip span:nth-child(5){animation-delay:.28s}
@keyframes cna-wave{45%{height:24px}75%{height:8px}}

/* ── INPUT ZONE ── */
.cna-input-zone{
  flex:0 0 auto;
  padding:10px 16px 12px;
  background:rgba(2,6,23,.70);
  border-top:1px solid var(--cna-border2);
  backdrop-filter:blur(16px);
}
.cna-input-hint{
  font-size:11.5px;color:var(--cna-muted);margin-bottom:8px;
  padding:0 2px;line-height:1.4;
}
.cna-input-row{
  display:flex;gap:8px;align-items:flex-end;margin-bottom:8px;
}
.cna-input-row textarea{
  flex:1;min-height:42px;max-height:120px;resize:none;
  border:1px solid rgba(148,163,184,.28);background:rgba(255,255,255,.96);
  color:#111827;border-radius:12px;padding:10px 14px;font-size:14px;
  font-family:inherit;outline:none;transition:border-color .2s;
  line-height:1.4;
}
.cna-input-row textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.cna-send-btn{
  width:42px;height:42px;border-radius:12px;border:none;flex:0 0 42px;
  background:linear-gradient(135deg,#3b82f6,#7c3aed);
  color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:.15s;
}
.cna-send-btn:hover{transform:scale(1.06);box-shadow:0 6px 16px rgba(59,130,246,.4)}
.cna-input-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cna-act-btn{
  height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--cna-border);
  background:rgba(255,255,255,.07);color:var(--cna-muted);font-size:13px;
  cursor:pointer;transition:.13s;display:inline-flex;align-items:center;
  text-decoration:none;
}
.cna-act-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.cna-btn-stop.active{background:rgba(239,68,68,.22)!important;border-color:rgba(239,68,68,.4)!important}

/* ── REACTION ── */
.cna-reaction{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:50;font-size:60px;pointer-events:none;opacity:0;
}
.cna-reaction.show{animation:reaction-pop .85s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes reaction-pop{
  0%{opacity:0;transform:translate(-50%,-60%) scale(.4)}
  40%{opacity:1;transform:translate(-50%,-70%) scale(1.4)}
  70%{opacity:1;transform:translate(-50%,-80%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-100%) scale(.8)}
}

/* ── AVATAR SVG ANIMATIONS (heredadas) ── */
.av-breathe{animation:av-idle-breathe 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
@keyframes av-idle-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.av-eyelid{transform-box:fill-box;transform-origin:center top;transform:scaleY(0);animation:av-blink-cycle 6s ease-in-out infinite}
.av-eyelid-r{animation-delay:.05s}
@keyframes av-blink-cycle{0%,87%,100%{transform:scaleY(0)}91%,94%{transform:scaleY(1)}}
.av-mouth-smile{opacity:1}.av-mouth-talk{opacity:0;transform-box:fill-box;transform-origin:top center}
.cna-app.is-speaking .av-mouth-smile{opacity:0}
.cna-app.is-speaking .av-mouth-talk{opacity:1;animation:av-talk-open .22s ease-in-out infinite alternate}
@keyframes av-talk-open{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}}
.cna-app.is-thinking .av-breathe{animation:av-think-bob 1s ease-in-out infinite}
@keyframes av-think-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ── OVERLAY VIEW ── */
.cna-overlay-view{
  position:absolute;inset:0;z-index:40;
  background:rgba(7,17,31,.96);
  overflow-y:auto;padding:24px;
  backdrop-filter:blur(8px);
  animation:overlay-in .22s ease;
}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}
.cna-overlay-close{
  background:rgba(255,255,255,.1);border:1px solid var(--cna-border);
  color:#dbeafe;border-radius:10px;padding:7px 16px;cursor:pointer;
  font-size:13px;font-weight:700;margin-bottom:16px;display:inline-flex;align-items:center;gap:6px;
}

/* ── BREAK CARD ── */
.cna-break-card{
  background:linear-gradient(135deg,#0f172a,#1e1b4b 50%,#0f172a);
  border:1px solid rgba(139,92,246,.35);border-radius:20px;
  padding:20px 22px;overflow:hidden;position:relative;
  animation:break-appear .6s cubic-bezier(.34,1.56,.64,1) forwards;
  width:100%;
}
@keyframes break-appear{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.cna-break-card::after{content:'';position:absolute;bottom:-40px;left:-40px;width:160px;height:160px;background:radial-gradient(circle,rgba(139,92,246,.18),transparent 70%);pointer-events:none}
.cna-break-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.cna-break-moon{font-size:38px;animation:moon-float 3s ease-in-out infinite;flex:0 0 auto}
@keyframes moon-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.cna-break-title{margin:0 0 3px;color:#e0e7ff;font-size:19px;font-weight:900}
.cna-break-sub{margin:0;color:#a5b4fc;font-size:13px}
.cna-break-fact{display:flex;align-items:flex-start;gap:10px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.20);border-radius:13px;padding:12px;margin-bottom:10px;color:#ddd6fe;font-size:13px;line-height:1.55}
.cna-break-fact-icon{font-size:20px;flex:0 0 auto}
.cna-break-challenge{display:flex;align-items:flex-start;gap:10px;background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.18);border-radius:13px;padding:12px;margin-bottom:14px;color:#bbf7d0;font-size:13px;line-height:1.55}
.cna-break-challenge-icon{font-size:18px;flex:0 0 auto}
.cna-break-footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid rgba(255,255,255,.07);color:#94a3b8;font-size:12px}
.cna-break-footer strong{color:#fbbf24}
.cna-break-badge{background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#e0e7ff;border-radius:99px;padding:4px 12px;font-size:11px;font-weight:800}

/* ── MAILBOX ── */
.cna-mailbox{color:var(--cna-text);font-family:var(--cna-font)}
.cna-mailbox h2{color:#fff;margin:0 0 14px}
.cna-mail-item{border:1px solid var(--cna-border);background:rgba(255,255,255,.07);border-radius:14px;padding:12px;margin:8px 0}
.cna-mail-unread{border-color:rgba(96,165,250,.4);background:rgba(59,130,246,.12)}
.cna-mail-header{display:flex;justify-content:space-between;margin-bottom:7px}
.cna-mail-header strong{color:#fff;font-size:14px}
.cna-mail-header small{color:var(--cna-muted);font-size:11px}
.cna-mail-body{color:#c7d8f3;font-size:13px;line-height:1.6}

/* ── RESPONSIVE ══════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — Reescritura limpia v22.4
   Un solo bloque, sin contradicciones, mobile-first.
   Objetivo: parece una app nativa en el celu de los chicos.
═══════════════════════════════════════════════════════════════ */

/* ── Tablet: sidebar más angosto ── */
/* ═══════════════════════════════════════════════════════════════
   MOBILE APP — v22.5 — Arquitectura nativa completa
   Bottom Navigation + Bottom Sheets + Chat full height
   Sin hamburger, sin chips invisibles, sin layout roto.
═══════════════════════════════════════════════════════════════ */

/* ── Tablet ── */
@media(max-width:1100px){:root{--cna-sb-w:220px}}

/* ════════════════════════════════════════════════════
   DESKTOP — no cambia nada
════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════
   MOBILE ≤ 860px
════════════════════════════════════════════════════ */
@media(max-width:860px){

  /* ── App: bloque sin bordes ── */
  .cna-app{
    grid-template-columns:1fr !important;
    border-radius:0 !important;
    border:none !important;
    box-shadow:none !important;
    /* Espacio para bottom nav */
    padding-bottom:64px !important;
  }

  /* ── Sidebar: BOTTOM SHEET (sube desde abajo) ── */
  .cna-sidebar{
    position:fixed !important;
    inset:auto 0 0 0 !important;
    width:100% !important;
    max-width:100% !important;
    height:78vh !important;
    max-height:78vh !important;
    border-radius:20px 20px 0 0 !important;
    transform:translateY(100%) !important;
    transition:transform .32s cubic-bezier(.4,0,.2,1) !important;
    z-index:300 !important;
    box-shadow:0 -8px 60px rgba(0,0,0,.7) !important;
    /* Handle de drag arriba */
    padding-top:16px !important;
  }
  .cna-sidebar.open{transform:translateY(0) !important}
  /* Handle visual */
  .cna-sidebar::before{
    content:'';
    position:absolute;
    top:8px;left:50%;
    transform:translateX(-50%);
    width:40px;height:4px;
    background:rgba(255,255,255,.3);
    border-radius:99px;
  }
  /* Overlay cuando está abierto */
  .cna-sidebar.open::after{
    content:'';
    position:fixed;
    inset:0;
    bottom:auto;
    height:22vh;
    background:rgba(0,0,0,.55);
    z-index:-1;
    pointer-events:none;
  }
  .cna-sb-close{display:flex !important}
  .cna-main{grid-column:1 !important}

  /* ── Topbar: limpio y funcional ── */
  .cna-topbar{
    height:56px !important;
    flex:0 0 56px !important;
    padding:0 14px !important;
    gap:10px !important;
    background:rgba(5,11,26,.98) !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }
  /* Ocultar el hamburger — lo reemplaza el bottom nav */
  .cna-menu-btn{display:none !important}
  /* Ocultar elementos secundarios en topbar */
  .cna-topbar-status{display:none !important}
  .cna-topbar-progress{
    display:flex !important;
    gap:5px !important;
  }
  .cna-progress-bar{width:55px !important}
  [data-cna-pct]{font-size:11px !important;font-weight:900 !important}
  .cna-topbar-info strong{font-size:14px !important}
  .cna-topbar-info small{font-size:11px !important;color:#4a637d !important}

  /* ── Mode strip: OCULTO en mobile — lo reemplaza el sheet ── */
  .cna-mode-strip{display:none !important}

  /* ── Welcome: más limpio ── */
  .cna-welcome{
    gap:10px !important;
    padding:20px 16px !important;
    justify-content:center !important;
  }
  .cna-welcome h2{font-size:19px !important;margin:0 !important}
  .cna-welcome-sub-desk{display:none !important}
  .cna-welcome-sub-mob{
    display:block !important;
    font-size:13px !important;
    color:#4a637d !important;
    margin:0 !important;
    text-align:center;
  }
  .cna-welcome-av{width:70px !important;height:70px !important;flex:0 0 70px !important}
  /* Ocultar la grilla mobile que está dentro del welcome
     (se muestra en el sheet, no aquí) */
  .cna-mobile-modes{display:none !important}

  /* ── Chat: todo el espacio libre ── */
  .cna-chat{
    flex:1 1 0 !important;
    min-height:0 !important;
    padding:12px 12px 8px !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .cna-msg-row--user,
  .cna-msg-row--tutor{max-width:93% !important}
  .cna-msg-bubble{
    font-size:14.5px !important;
    padding:11px 14px !important;
    line-height:1.55 !important;
  }
  .cna-msg-av{width:34px !important;height:34px !important;flex:0 0 34px !important}

  /* ── Input zone ── */
  .cna-input-zone{
    padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)) !important;
    background:rgba(5,11,26,.98) !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }
  .cna-input-hint{
    font-size:11.5px !important;color:#4a637d !important;
    margin-bottom:6px !important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .cna-input-row{gap:8px !important;margin-bottom:7px !important}
  .cna-input-row textarea{
    font-size:16px !important;  /* CRÍTICO: evita zoom en iOS */
    min-height:42px !important;
    padding:10px 14px !important;
    border-radius:22px !important;
    line-height:1.4 !important;
  }
  .cna-send-btn{
    width:42px !important;height:42px !important;
    flex:0 0 42px !important;border-radius:50% !important;
  }
  .cna-input-actions{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }
  .cna-input-actions::-webkit-scrollbar{display:none}
  .cna-act-btn{
    width:36px !important;height:36px !important;
    flex:0 0 36px !important;padding:0 !important;
    justify-content:center !important;
    border-radius:10px !important;font-size:16px !important;
    touch-action:manipulation;
  }

  /* ─────────────────────────────────────────
     BOTTOM NAVIGATION — creado por JS
  ───────────────────────────────────────── */
  .cna-bnav{
    position:fixed !important;
    bottom:0;left:0;right:0;
    height:64px;
    background:rgba(5,11,26,.98);
    border-top:1px solid rgba(255,255,255,.1);
    display:flex;
    align-items:stretch;
    z-index:200;
    padding-bottom:env(safe-area-inset-bottom,0px);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
  }
  .cna-bnav-btn{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:3px;border:none;background:transparent;
    cursor:pointer;touch-action:manipulation;
    color:rgba(255,255,255,.45);
    font-family:inherit;transition:.14s;
    padding:0 4px;
  }
  .cna-bnav-btn.active{color:#3b82f6}
  .cna-bnav-btn:active{transform:scale(.92)}
  .cna-bnav-ic{font-size:22px;line-height:1}
  .cna-bnav-lbl{font-size:10.5px;font-weight:800;letter-spacing:.02em}
  /* Indicador activo */
  .cna-bnav-btn.active .cna-bnav-ic{
    background:rgba(59,130,246,.18);
    border-radius:10px;
    padding:2px 12px;
  }

  /* ─────────────────────────────────────────
     SHEET DE MODOS — creado por JS
     Sube desde abajo al tocar el tab Jugar
  ───────────────────────────────────────── */
  .cna-mode-sheet{
    position:fixed;
    inset:auto 0 0 0;
    z-index:300;
    background:linear-gradient(180deg,#0d1529 0%,#07111f 100%);
    border-radius:24px 24px 0 0;
    transform:translateY(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow:0 -8px 60px rgba(0,0,0,.7);
    max-height:88vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .cna-mode-sheet.open{transform:translateY(0)}
  /* Handle */
  .cna-mode-sheet::before{
    content:'';
    display:block;
    width:40px;height:4px;
    background:rgba(255,255,255,.3);
    border-radius:99px;
    margin:12px auto 4px;
    flex-shrink:0;
  }
  .cna-mode-sheet-head{
    padding:0 16px 10px;
    display:flex;justify-content:space-between;align-items:center;
    flex-shrink:0;
  }
  .cna-mode-sheet-title{
    color:#fff;font-size:17px;font-weight:900;
  }
  .cna-mode-sheet-close{
    background:rgba(255,255,255,.12);border:none;color:#fff;
    border-radius:50%;width:30px;height:30px;font-size:14px;
    display:grid;place-items:center;cursor:pointer;touch-action:manipulation;
  }
  .cna-mode-sheet-body{
    overflow-y:auto;padding:0 12px 16px;flex:1;
  }
  .cna-mode-sheet-body::-webkit-scrollbar{display:none}

  /* Tabs dentro del sheet */
  .cna-ms-tabs{
    display:flex;gap:6px;padding:2px 0 10px;
  }
  .cna-ms-tab{
    flex:1;padding:8px;border-radius:10px;border:none;
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.55);
    font-size:13px;font-weight:800;cursor:pointer;
    font-family:inherit;transition:.15s;touch-action:manipulation;
  }
  .cna-ms-tab.active{
    background:rgba(59,130,246,.28);
    border:1.5px solid rgba(59,130,246,.5);
    color:#fff;
  }

  /* Grilla de modos en el sheet */
  .cna-ms-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }
  .cna-ms-grid.hidden{display:none}
  .cna-ms-btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;padding:14px 6px;border-radius:16px;border:none;
    cursor:pointer;font-family:inherit;transition:.16s;
    min-height:84px;touch-action:manipulation;
  }
  .cna-ms-btn:active{transform:scale(.93)}
  .cna-ms-btn .ic{font-size:26px;line-height:1}
  .cna-ms-btn .nm{font-size:12.5px;font-weight:900;color:#fff;line-height:1.1;text-align:center}
  .cna-ms-btn .sm{font-size:10px;color:rgba(255,255,255,.7);text-align:center;line-height:1.2}

  /* Colores */
  .cna-ms-y   {background:linear-gradient(145deg,#f59e0b,#d97706);box-shadow:0 5px 16px rgba(245,158,11,.4)}
  .cna-ms-o   {background:linear-gradient(145deg,#f97316,#ea580c);box-shadow:0 5px 16px rgba(249,115,22,.4)}
  .cna-ms-r   {background:linear-gradient(145deg,#ef4444,#dc2626);box-shadow:0 5px 16px rgba(239,68,68,.4)}
  .cna-ms-b   {background:linear-gradient(145deg,#3b82f6,#2563eb);box-shadow:0 5px 16px rgba(59,130,246,.4)}
  .cna-ms-g   {background:linear-gradient(145deg,#22c55e,#16a34a);box-shadow:0 5px 16px rgba(34,197,94,.4)}
  .cna-ms-fire{background:linear-gradient(145deg,#ef4444,#f97316);box-shadow:0 5px 20px rgba(239,68,68,.5);animation:fire-pulse 2s ease-in-out infinite}
  .cna-ms-p   {background:linear-gradient(145deg,#8b5cf6,#7c3aed);box-shadow:0 5px 16px rgba(139,92,246,.4)}
  .cna-ms-t   {background:linear-gradient(145deg,#14b8a6,#0d9488);box-shadow:0 5px 16px rgba(20,184,166,.4)}
  .cna-ms-gray{background:linear-gradient(145deg,#64748b,#475569);box-shadow:0 5px 13px rgba(100,116,139,.35)}
  /* Herramientas */
  .cna-ms-ta{background:linear-gradient(145deg,#6366f1,#4f46e5);box-shadow:0 5px 16px rgba(99,102,241,.4)}
  .cna-ms-tb{background:linear-gradient(145deg,#22d3ee,#0891b2);box-shadow:0 5px 16px rgba(6,182,212,.4)}
  .cna-ms-tc{background:linear-gradient(145deg,#fbbf24,#d97706);box-shadow:0 5px 16px rgba(251,191,36,.4)}
  .cna-ms-td{background:linear-gradient(145deg,#4ade80,#16a34a);box-shadow:0 5px 16px rgba(74,222,128,.4)}
  .cna-ms-te{background:linear-gradient(145deg,#c084fc,#9333ea);box-shadow:0 5px 16px rgba(192,132,252,.4)}
  .cna-ms-tf{background:linear-gradient(145deg,#f87171,#dc2626);box-shadow:0 5px 16px rgba(248,113,113,.4)}

  /* Overlay oscuro detrás de sheets */
  .cna-sheet-overlay{
    position:fixed;inset:0;z-index:299;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;
    transition:opacity .32s;
  }
  .cna-sheet-overlay.show{opacity:1;pointer-events:all}

  /* Guía activa marcada en el sidebar (sheet de guías) */
  .cna-guide.active{
    background:rgba(59,130,246,.22) !important;
    box-shadow:inset 2.5px 0 0 #3b82f6 !important;
  }

  /* El scroll del sidebar como bottom sheet */
  .cna-sidebar .cna-guide-list{
    flex:1 1 0 !important;
    min-height:0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

/* ════════════════════════════════════════════════════
   ANTI-ZOOM iOS
   font-size < 16px en input = iOS hace zoom
════════════════════════════════════════════════════ */
@media(max-width:860px){
  input[type="text"],input[type="search"],textarea{
    font-size:16px !important;
  }
  /* touch-action: evita doble-tap zoom en botones */
  button,.cna-guide,.cna-act-btn,.cna-send-btn{
    touch-action:manipulation;
  }
}

/* ════════════════════════════════════════════════════
   PANTALLAS ≤ 400px
════════════════════════════════════════════════════ */
@media(max-width:400px){
  .cna-topbar-info strong{font-size:13px !important}
  .cna-ms-btn{min-height:76px !important;padding:11px 4px !important}
  .cna-ms-btn .ic{font-size:22px !important}
  .cna-ms-btn .nm{font-size:11.5px !important}
}

/* Badges caché / memoria */
.cna-source-cache{background:rgba(34,197,94,.2);color:#4ade80;border-radius:99px;padding:1px 7px;font-size:9px;font-weight:900}
.cna-source-memory{background:rgba(139,92,246,.22);color:#c4b5fd;border-radius:99px;padding:1px 7px;font-size:9px;font-weight:900}

/* ═══════════════════════════════════════════════════════
   CIAE Neural Academy v22.6.1 — UX/UI CIAE Pro
   Solo capa visual: no modifica lógica ni flujo AJAX
═══════════════════════════════════════════════════════ */
:root{
  --cna-ciae-navy:#071a3d;
  --cna-ciae-blue:#155eef;
  --cna-ciae-sky:#00b7ff;
  --cna-ciae-gold:#ffbf1b;
  --cna-ciae-pink:#ff3d8b;
  --cna-ciae-green:#19c37d;
  --cna-glass:rgba(255,255,255,.105);
  --cna-glass-strong:rgba(255,255,255,.15);
}
.cna-app{
  background:
    radial-gradient(circle at 8% 5%,rgba(255,191,27,.30),transparent 18%),
    radial-gradient(circle at 93% 10%,rgba(0,183,255,.34),transparent 22%),
    radial-gradient(circle at 55% 110%,rgba(255,61,139,.22),transparent 30%),
    linear-gradient(145deg,#061633 0%,#092a62 48%,#08122b 100%)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 26px 90px rgba(4,18,45,.55), inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.cna-app:before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 72%);
}
.cna-sidebar,.cna-main{position:relative;z-index:1}
.cna-sidebar{background:linear-gradient(180deg,rgba(5,18,45,.95),rgba(5,14,32,.92))!important;backdrop-filter:blur(18px)}
.cna-sb-brand{padding:16px 14px 13px!important;background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03))}
.cna-logo{width:48px!important;height:48px!important;border-radius:17px!important;box-shadow:0 10px 24px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.22)}
.cna-sb-brand-text strong{font-size:18px!important;letter-spacing:-.02em}.cna-sb-brand-text small{font-size:11px!important;color:#b9d7ff!important}
.cna-sb-score{gap:8px!important;padding:12px!important}.cna-sc-item{background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.06))!important;border-color:rgba(255,255,255,.16)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.cna-sc-v{color:#fff8d6!important}.cna-sc-l{color:#b8c9e5!important}.cna-sb-user{background:rgba(255,255,255,.055)}
.cna-sb-guides-head span:first-child{color:#d6e8ff!important}.cna-sb-count{background:linear-gradient(135deg,var(--cna-ciae-gold),#ff7a18)!important;color:#10223f!important;box-shadow:0 6px 16px rgba(255,191,27,.25)}
.cna-sb-search{height:40px!important;border-radius:14px!important;background:rgba(255,255,255,.96)!important;box-shadow:0 10px 22px rgba(0,0,0,.16);font-weight:700;color:#061633!important}
.cna-guide{border:1px solid transparent!important;margin:1px 0}.cna-guide:hover{background:rgba(255,255,255,.11)!important;border-color:rgba(255,255,255,.12)!important;transform:translateX(2px)}
.cna-guide.active{background:linear-gradient(135deg,rgba(21,94,239,.28),rgba(0,183,255,.14))!important;box-shadow:inset 4px 0 0 var(--cna-ciae-gold),0 10px 25px rgba(0,0,0,.18)!important;border-color:rgba(255,255,255,.16)!important}
.cna-guide-av{box-shadow:0 8px 20px rgba(0,0,0,.24)}.cna-av-max{background:linear-gradient(135deg,#00b7ff,#155eef)!important}.cna-av-lia{background:linear-gradient(135deg,#ff3d8b,#8b5cf6)!important}
.cna-sb-nav{gap:7px!important}.cna-sb-nav button{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.10)!important;color:#dcecff!important;border-radius:13px!important}.cna-sb-nav button:hover{background:linear-gradient(135deg,rgba(255,191,27,.20),rgba(0,183,255,.12))!important;color:#fff!important}
.cna-topbar{height:66px!important;flex-basis:66px!important;background:rgba(5,18,45,.72)!important;border-bottom-color:rgba(255,255,255,.14)!important}.cna-topbar-info strong{font-size:16px!important}.cna-topbar-info small{color:#c2d8f5!important}.cna-topbar-status{background:rgba(25,195,125,.16)!important;color:#8df5c7!important;border:1px solid rgba(25,195,125,.25)}
.cna-progress-bar{height:8px!important;background:rgba(255,255,255,.16)!important}.cna-progress-bar div{background:linear-gradient(90deg,var(--cna-ciae-gold),var(--cna-ciae-sky),var(--cna-ciae-pink))!important}.cna-topbar-progress span{color:#fff1aa!important}
.cna-mode-strip{height:58px!important;flex-basis:58px!important;background:rgba(2,10,24,.38)!important}.cna-mode-chips{gap:9px!important}.cna-chip{padding:8px 15px!important;border-radius:16px!important;box-shadow:0 8px 22px rgba(0,0,0,.18);position:relative}.cna-chip:hover:after{content:attr(data-help);position:absolute;left:0;top:calc(100% + 8px);width:235px;padding:10px 12px;border-radius:14px;background:#061633;color:#eaf4ff;border:1px solid rgba(255,255,255,.18);box-shadow:0 14px 34px rgba(0,0,0,.35);font-size:12px;line-height:1.35;white-space:normal;z-index:100}
.cna-welcome{background:radial-gradient(circle at center,rgba(255,255,255,.08),transparent 54%)}.cna-welcome h2{font-size:clamp(26px,4vw,42px)!important;background:linear-gradient(90deg,#fff,#fff0b8,#a7ecff);-webkit-background-clip:text;background-clip:text;color:transparent!important}.cna-welcome p{color:#d5e6ff!important;font-size:16px!important;max-width:680px}.cna-welcome-avatars{filter:drop-shadow(0 18px 36px rgba(0,0,0,.28))}
.cna-chat{padding:20px 24px 8px!important}.cna-msg-bubble{border-radius:22px!important;font-size:15px!important;box-shadow:0 10px 26px rgba(0,0,0,.18)}.cna-msg-row--user .cna-msg-bubble{background:linear-gradient(135deg,#155eef,#00b7ff)!important}.cna-msg-row--tutor .cna-msg-bubble{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.07))!important;border-color:rgba(255,255,255,.16)!important;color:#eef7ff!important}.cna-msg-row--system .cna-msg-bubble{background:rgba(255,191,27,.11)!important;border-color:rgba(255,191,27,.22)!important;color:#fff1bf!important}
.cna-input-zone{background:linear-gradient(180deg,rgba(5,18,45,.55),rgba(5,14,32,.88))!important;border-top:1px solid rgba(255,255,255,.14)!important;padding-top:12px!important}.cna-input-hint{color:#d6e8ff!important;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:8px 12px;margin-bottom:8px}.cna-input-row textarea{border-radius:18px!important;border:1px solid rgba(255,255,255,.18)!important;background:rgba(255,255,255,.96)!important;color:#061633!important;box-shadow:0 14px 32px rgba(0,0,0,.20);font-weight:600}.cna-send-btn{background:linear-gradient(135deg,var(--cna-ciae-gold),#ff7a18)!important;color:#082047!important;box-shadow:0 12px 28px rgba(255,191,27,.28)!important}.cna-act-btn{border-radius:14px!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.13)!important;color:#eef7ff!important}.cna-act-btn:hover{background:rgba(255,191,27,.18)!important;transform:translateY(-1px)}
.cna-overlay-view{background:rgba(4,14,32,.96)!important;backdrop-filter:blur(22px);padding:28px!important}.cna-overlay-close{border-radius:14px!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.16)!important;color:#fff!important;padding:10px 16px!important;margin-bottom:18px!important;cursor:pointer}.cna-help-hero{border:1px solid rgba(255,255,255,.16);border-radius:26px;padding:22px;background:linear-gradient(135deg,rgba(255,191,27,.18),rgba(0,183,255,.12),rgba(255,61,139,.10));box-shadow:0 18px 44px rgba(0,0,0,.24)}.cna-help-hero h2{margin:0 0 8px;color:#fff;font-size:30px}.cna-help-hero p{margin:0;color:#d7e8ff}.cna-help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px}.cna-help-card{border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(255,255,255,.08);padding:16px;box-shadow:0 12px 30px rgba(0,0,0,.18)}.cna-help-card .ic{font-size:28px;display:block;margin-bottom:8px}.cna-help-card strong{display:block;color:#fff;font-size:16px;margin-bottom:5px}.cna-help-card small{color:#bfd3ef;line-height:1.45}.cna-help-steps{counter-reset:paso;margin-top:18px;display:grid;gap:10px}.cna-help-step{counter-increment:paso;display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:14px;color:#dbeafe}.cna-help-step:before{content:counter(paso);width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--cna-ciae-gold),#ff7a18);color:#061633;font-weight:900;flex:0 0 30px}.cna-help-step b{color:#fff}
@media(max-width:860px){.cna-topbar{height:60px!important;flex-basis:60px!important}.cna-mode-strip{display:none!important}.cna-chat{padding:14px 12px 76px!important}.cna-msg-row--user,.cna-msg-row--tutor{max-width:96%!important}.cna-input-zone{padding-bottom:78px!important}.cna-chip:hover:after{display:none}.cna-help-grid{grid-template-columns:1fr}.cna-help-hero h2{font-size:24px}.cna-overlay-view{padding:18px!important}}


/* ═══════════════════════════════════════════════
   v22.7.0 — Sin voces: recursos visuales CIAE
═══════════════════════════════════════════════ */
.cna-visual-strip{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  padding:8px 12px;margin:0 12px 8px;border-radius:18px;
  background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(168,85,247,.16),rgba(245,158,11,.14));
  border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 28px rgba(15,23,42,.16) inset;
}
.cna-visual-strip span{
  font-size:11px;font-weight:900;letter-spacing:.02em;color:#dbeafe;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);
  padding:5px 9px;border-radius:999px;white-space:nowrap;
}
.cna-visual-pulse .cna-topbar-tutor-av,
.cna-visual-pulse .cna-msg-av--active{
  animation:cnaVisualPulse .65s ease both;
}
@keyframes cnaVisualPulse{
  0%{transform:scale(1);filter:saturate(1)}
  45%{transform:scale(1.06);filter:saturate(1.35) drop-shadow(0 0 18px rgba(59,130,246,.55))}
  100%{transform:scale(1);filter:saturate(1)}
}
.cna-study-card{
  max-width:900px;margin:0 auto;color:#eaf3ff;
}
.cna-study-card-head{
  display:flex;align-items:center;gap:14px;padding:18px;border-radius:24px;
  background:linear-gradient(135deg,rgba(37,99,235,.35),rgba(124,58,237,.32),rgba(245,158,11,.2));
  border:1px solid rgba(255,255,255,.18);box-shadow:0 20px 45px rgba(2,6,23,.22);
}
.cna-study-card-head>span{font-size:36px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.25))}
.cna-study-card-head h2{margin:0;color:#fff;font-size:24px;line-height:1.1}
.cna-study-card-head p{margin:5px 0 0;color:#dbeafe;font-size:14px}
.cna-study-card-body{
  margin-top:14px;padding:20px;border-radius:22px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);line-height:1.7;font-size:15px;color:#f8fbff;
}
.cna-study-card-tips{
  margin-top:12px;padding:14px 16px;border-radius:18px;background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.22);color:#dcfce7;font-size:14px;
}
.cna-act-btn[data-cna-study-card]{
  background:linear-gradient(135deg,#f59e0b,#f97316)!important;color:#fff!important;
  box-shadow:0 10px 22px rgba(249,115,22,.28)!important;
}
.cna-help-card{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.cna-help-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(15,23,42,.24);border-color:rgba(96,165,250,.45)!important;}
@media (max-width:860px){
  .cna-visual-strip{margin:0 8px 6px;padding:7px;gap:6px}
  .cna-visual-strip span{font-size:10px;padding:4px 7px}
  .cna-study-card-head{padding:15px;border-radius:20px}
  .cna-study-card-head h2{font-size:20px}
  .cna-study-card-body{font-size:14px;padding:16px}
}

/* ═══════════════════════════════════════════════════════
   v22.8.0 — Paleta CIAE Pastel + Responsive Mobile Pro
   Capa exclusivamente visual: no modifica lógica, AJAX ni flujo interno.
═══════════════════════════════════════════════════════ */
:root{
  --cna-bg:#f7fbff;
  --cna-panel:#ffffff;
  --cna-panel2:#f1f6fd;
  --cna-border:#d9e6f5;
  --cna-border2:#e8f0fa;
  --cna-text:#183153;
  --cna-muted:#6d7f96;
  --cna-muted2:#91a2b8;
  --cna-blue:#7db7ff;
  --cna-violet:#b9a7ff;
  --cna-cyan:#99e4ff;
  --cna-ciae-navy:#24466f;
  --cna-ciae-blue:#8ec5ff;
  --cna-ciae-sky:#aeeaff;
  --cna-ciae-gold:#ffe7a3;
  --cna-ciae-pink:#ffd0e2;
  --cna-ciae-green:#bff3dc;
  --cna-soft-shadow:0 18px 50px rgba(48,86,130,.14);
  --cna-soft-shadow-sm:0 10px 25px rgba(48,86,130,.10);
}
.cna-wrap{color:#183153!important;max-width:100%;overflow-x:hidden!important}
.cna-app{
  background:
    radial-gradient(circle at 8% 3%,rgba(174,234,255,.78),transparent 24%),
    radial-gradient(circle at 90% 8%,rgba(255,208,226,.70),transparent 23%),
    radial-gradient(circle at 58% 112%,rgba(255,231,163,.78),transparent 34%),
    linear-gradient(145deg,#ffffff 0%,#f6fbff 48%,#edf6ff 100%)!important;
  border:1px solid #dbe9f8!important;
  box-shadow:var(--cna-soft-shadow)!important;
  color:#183153!important;
}
.cna-app:before{
  background-image:linear-gradient(rgba(125,183,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(185,167,255,.11) 1px,transparent 1px)!important;
  opacity:.75!important;
}
.cna-sidebar{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(241,247,254,.96))!important;
  border-right:1px solid #dbe8f7!important;
  box-shadow:8px 0 30px rgba(52,86,120,.08)!important;
}
.cna-sb-brand{
  background:linear-gradient(135deg,rgba(142,197,255,.26),rgba(255,255,255,.70),rgba(255,208,226,.22))!important;
  border-bottom:1px solid #e3edf8!important;
}
.cna-sb-brand-text strong,.cna-guide-info b,.cna-topbar-info strong{color:#1f3b5d!important}
.cna-sb-brand-text small,.cna-sb-user-info small,.cna-guide-info small,.cna-sc-l,.cna-sb-guides-head span,.cna-topbar-info small{color:#6f829c!important}
.cna-logo{background:#fff!important;border:1px solid #e2edf8!important;box-shadow:0 12px 24px rgba(77,126,175,.12)!important}
.cna-sc-item,.cna-sb-nav button,.cna-guide,.cna-act-btn,.cna-help-card,.cna-help-step{
  background:rgba(255,255,255,.78)!important;
  border-color:#e2edf8!important;
  color:#24466f!important;
  box-shadow:var(--cna-soft-shadow-sm)!important;
}
.cna-sc-v{color:#315b87!important}.cna-userav{background:linear-gradient(135deg,#dbeafe,#bfdbfe,#fce7f3)!important;color:#24466f!important}
.cna-sb-count{background:linear-gradient(135deg,#dbeafe,#bfdbfe)!important;color:#24466f!important;box-shadow:none!important}
.cna-sb-search,.cna-input-row textarea{
  background:#fff!important;color:#183153!important;border:1px solid #dbe8f7!important;box-shadow:0 10px 24px rgba(72,112,152,.09)!important;
}
.cna-sb-search::placeholder,.cna-input-row textarea::placeholder{color:#8aa0ba!important}
.cna-guide:hover{background:#f2f8ff!important;border-color:#cfe3f7!important;transform:translateX(2px)}
.cna-guide.active{
  background:linear-gradient(135deg,#eaf5ff,#f9fbff,#fff5fb)!important;
  box-shadow:inset 4px 0 0 #8ec5ff,0 12px 30px rgba(93,144,191,.13)!important;
  border-color:#cbe2f9!important;
}
.cna-guide-pct-mini,.cna-topbar-progress span{color:#4f8ed0!important}.cna-guide-pct-bar{background:#e6eef8!important}.cna-guide-pct-bar span{background:linear-gradient(90deg,#8ec5ff,#b9a7ff)!important}
.cna-av-max{background:linear-gradient(135deg,#8ec5ff,#5b9fe8)!important}.cna-av-lia{background:linear-gradient(135deg,#ffd0e2,#b9a7ff)!important;color:#24466f!important}
.cna-topbar{
  background:rgba(255,255,255,.82)!important;
  border-bottom:1px solid #e2edf8!important;
  backdrop-filter:blur(18px)!important;
}
.cna-menu-btn span{background:#4f6e90!important}.cna-topbar-tutor-av{background:linear-gradient(135deg,#dbeafe,#bfdbfe,#ffd0e2)!important;border:1px solid #d9e8f7!important}.cna-pulse-dot{background:#70d6a5!important;box-shadow:0 0 12px #70d6a5!important;border-color:#fff!important}
.cna-topbar-status{background:#edfdf5!important;color:#287c59!important;border:1px solid #c9f0de!important}.cna-progress-bar{background:#e7eff9!important}.cna-progress-bar div{background:linear-gradient(90deg,#8ec5ff,#b9a7ff,#ffd0e2)!important}
.cna-mode-strip{background:rgba(255,255,255,.68)!important;border-bottom:1px solid #e2edf8!important}.cna-chip{background:#ffffff!important;color:#315b87!important;border:1px solid #dbe8f7!important;box-shadow:0 8px 22px rgba(65,105,145,.10)!important}.cna-chip.active,.cna-chip:hover{background:linear-gradient(135deg,#eaf5ff,#f6f1ff)!important;border-color:#bcdaf8!important;color:#24466f!important}
.cna-welcome h2{background:linear-gradient(90deg,#24466f,#4f8ed0,#8a75d6)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}.cna-welcome p{color:#607996!important}
.cna-chat{background:transparent!important}.cna-msg-bubble{background:rgba(255,255,255,.88)!important;color:#203b5d!important;border:1px solid #e1edf8!important;box-shadow:0 14px 32px rgba(75,112,150,.10)!important}.cna-msg-row--user .cna-msg-bubble{background:linear-gradient(135deg,#e8f4ff,#f6fbff)!important;border-color:#cfe3f7!important}.cna-msg-row--system .cna-msg-bubble{background:#fff8e6!important;color:#644b12!important;border-color:#f8e4ae!important}
.cna-input-zone{background:linear-gradient(180deg,rgba(255,255,255,.70),rgba(246,251,255,.96))!important;border-top:1px solid #e2edf8!important}.cna-input-hint{background:#fff!important;border:1px solid #e2edf8!important;color:#5d7490!important;box-shadow:0 8px 20px rgba(65,105,145,.08)!important}.cna-send-btn{background:linear-gradient(135deg,#8ec5ff,#6ba8eb)!important;color:#fff!important;box-shadow:0 12px 26px rgba(92,155,220,.24)!important}.cna-send-btn:hover{filter:saturate(1.08);transform:translateY(-1px)}
.cna-act-btn:hover{background:#eaf5ff!important;color:#24466f!important}.cna-overlay-view{background:rgba(248,252,255,.96)!important;color:#183153!important}.cna-overlay-close{background:#fff!important;color:#24466f!important;border:1px solid #dbe8f7!important;box-shadow:var(--cna-soft-shadow-sm)!important}.cna-help-hero{background:linear-gradient(135deg,#eaf5ff,#ffffff,#fff3f8)!important;border-color:#dbe8f7!important;color:#183153!important}.cna-help-hero h2,.cna-help-card strong,.cna-help-step b,.cna-study-card-head h2{color:#24466f!important}.cna-help-hero p,.cna-help-card small{color:#627892!important}.cna-help-step:before{background:linear-gradient(135deg,#8ec5ff,#b9a7ff)!important;color:#fff!important}
.cna-visual-strip{background:linear-gradient(135deg,#eaf5ff,#f7f3ff,#fff3f8)!important;border-color:#dbe8f7!important;box-shadow:0 10px 24px rgba(75,112,150,.09)!important}.cna-visual-strip span{background:#fff!important;color:#4c6e91!important;border-color:#dbe8f7!important}.cna-study-card{color:#203b5d!important}.cna-study-card-head{background:linear-gradient(135deg,#e8f4ff,#f5f0ff,#fff3f8)!important;border-color:#dbe8f7!important;box-shadow:var(--cna-soft-shadow-sm)!important}.cna-study-card-head p{color:#6a7f99!important}.cna-study-card-body{background:#fff!important;color:#203b5d!important;border-color:#e2edf8!important}.cna-study-card-tips{background:#effdf6!important;color:#287c59!important;border-color:#c9f0de!important}

/* Mobile-first serio */
@media(max-width:860px){
  html,body{max-width:100%!important;overflow-x:hidden!important}
  .cna-wrap{width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding:0!important;overflow:hidden!important}
  .cna-app{
    width:100vw!important;height:100dvh!important;max-height:100dvh!important;min-height:100dvh!important;
    border-radius:0!important;border-left:0!important;border-right:0!important;box-shadow:none!important;
    grid-template-columns:1fr!important;overflow:hidden!important;
  }
  .cna-main{height:100dvh!important;min-height:0!important;overflow:hidden!important;background:transparent!important}
  .cna-topbar{height:62px!important;flex:0 0 62px!important;padding:0 10px!important;gap:9px!important;position:relative!important;z-index:25!important}
  .cna-menu-btn{display:flex!important;width:42px!important;height:42px!important;align-items:center!important;justify-content:center!important;background:#fff!important;border:1px solid #dbe8f7!important;box-shadow:0 8px 18px rgba(75,112,150,.10)!important}
  .cna-topbar-tutor-av{width:36px!important;height:36px!important;flex-basis:36px!important}.cna-topbar-info{min-width:0!important}.cna-topbar-info strong{font-size:14px!important;max-width:46vw!important}.cna-topbar-info small{display:block!important;font-size:10.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:50vw!important}.cna-topbar-right{gap:5px!important}.cna-topbar-status{display:none!important}.cna-topbar-progress{display:none!important}
  .cna-chat{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;padding:12px 10px 122px!important;scroll-padding-bottom:130px!important}
  .cna-msg-row{gap:8px!important;margin-bottom:12px!important}.cna-msg-row--user,.cna-msg-row--tutor{max-width:100%!important}.cna-msg-bubble{max-width:calc(100vw - 62px)!important;border-radius:18px!important;padding:12px 13px!important;font-size:14.5px!important;line-height:1.55!important;overflow-wrap:anywhere!important;word-break:break-word!important}.cna-msg-bubble img,.cna-msg-bubble iframe,.cna-msg-bubble video,.cna-msg-bubble table{max-width:100%!important;height:auto!important}.cna-msg-bubble pre,.cna-msg-bubble code{white-space:pre-wrap!important;overflow-wrap:anywhere!important}.cna-msg-av{width:34px!important;height:34px!important;flex-basis:34px!important}
  .cna-input-zone{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:40!important;padding:9px 10px calc(10px + env(safe-area-inset-bottom))!important;border-radius:22px 22px 0 0!important;box-shadow:0 -16px 38px rgba(75,112,150,.14)!important}.cna-input-hint{font-size:12px!important;margin:0 0 7px!important;padding:7px 10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.cna-input-row{display:grid!important;grid-template-columns:1fr 48px!important;gap:8px!important;align-items:end!important}.cna-input-row textarea{min-height:48px!important;max-height:118px!important;border-radius:17px!important;font-size:16px!important;padding:12px 13px!important;line-height:1.35!important;resize:none!important}.cna-send-btn{width:48px!important;height:48px!important;min-width:48px!important;border-radius:16px!important;padding:0!important;display:grid!important;place-items:center!important;font-size:0!important}.cna-send-btn:before{content:'➤';font-size:21px;line-height:1;color:#fff}.cna-actions,.cna-input-actions{display:flex!important;gap:7px!important;overflow-x:auto!important;padding:7px 1px 0!important;scrollbar-width:none!important}.cna-actions::-webkit-scrollbar,.cna-input-actions::-webkit-scrollbar{display:none}.cna-act-btn{flex:0 0 auto!important;min-height:38px!important;padding:8px 11px!important;border-radius:14px!important;font-size:12px!important;white-space:nowrap!important}
  .cna-sidebar{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:100vw!important;max-width:100vw!important;height:min(82dvh,680px)!important;z-index:350!important;border-radius:26px 26px 0 0!important;transform:translateY(105%)!important;border-right:0!important;border-top:1px solid #dbe8f7!important;box-shadow:0 -24px 60px rgba(75,112,150,.24)!important}.cna-sidebar.open,.cna-sidebar.is-open,.cna-app.sidebar-open .cna-sidebar{transform:translateY(0)!important}.cna-sb-close{display:grid!important;place-items:center!important;color:#4f6e90!important;background:#fff!important;border:1px solid #dbe8f7!important;border-radius:13px!important;width:38px!important;height:38px!important}.cna-sb-brand{padding:12px 14px!important}.cna-logo{width:42px!important;height:42px!important}.cna-sb-score{grid-template-columns:repeat(3,1fr)!important;padding:10px 12px!important}.cna-guide-list{padding:4px 10px 16px!important}.cna-guide{min-height:58px!important;padding:10px!important;border-radius:16px!important}.cna-sb-search{height:44px!important;font-size:16px!important;margin-bottom:9px!important}.cna-sb-nav{padding:10px!important;display:grid!important;grid-template-columns:1fr 1fr!important}.cna-sb-nav button{text-align:center!important;min-height:42px!important}
  .cna-sheet-overlay{background:rgba(36,70,111,.24)!important;backdrop-filter:blur(6px)!important}.cna-mode-sheet{background:#f8fcff!important;color:#183153!important;border-top:1px solid #dbe8f7!important}.cna-ms-btn{box-shadow:0 10px 22px rgba(75,112,150,.10)!important}.cna-ms-btn .nm{color:#24466f!important}.cna-ms-btn .sm{color:#6f829c!important}.cna-ms-y,.cna-ms-o,.cna-ms-r,.cna-ms-b,.cna-ms-g,.cna-ms-fire,.cna-ms-p,.cna-ms-t,.cna-ms-gray,.cna-ms-ta,.cna-ms-tb,.cna-ms-tc,.cna-ms-td,.cna-ms-te,.cna-ms-tf{background:#fff!important;border:1px solid #dbe8f7!important;box-shadow:0 10px 22px rgba(75,112,150,.10)!important}.cna-ms-btn:active{transform:scale(.97)!important;background:#eaf5ff!important}
  .cna-visual-strip{margin:0 8px 8px!important;justify-content:flex-start!important;overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none!important}.cna-visual-strip::-webkit-scrollbar{display:none}.cna-visual-strip span{flex:0 0 auto!important;font-size:10.5px!important}.cna-help-grid{grid-template-columns:1fr!important}.cna-overlay-view{padding:14px!important}.cna-help-hero{padding:16px!important;border-radius:22px!important}.cna-help-hero h2{font-size:22px!important}.cna-study-card-head{align-items:flex-start!important}.cna-study-card-head>span{font-size:30px!important}.cna-study-card-body{line-height:1.6!important}
}
@media(max-width:420px){
  .cna-topbar-info strong{font-size:13px!important;max-width:42vw!important}.cna-topbar-info small{max-width:44vw!important}.cna-msg-bubble{font-size:14px!important;max-width:calc(100vw - 56px)!important}.cna-chat{padding-left:8px!important;padding-right:8px!important}.cna-ms-grid{grid-template-columns:repeat(2,1fr)!important}.cna-sb-nav{grid-template-columns:1fr!important}.cna-input-hint{font-size:11.5px!important}.cna-act-btn{font-size:11.5px!important;padding:8px 10px!important}
}
@media(max-height:640px) and (max-width:860px){
  .cna-topbar{height:56px!important;flex-basis:56px!important}.cna-chat{padding-bottom:112px!important}.cna-input-hint{display:none!important}.cna-sidebar{height:88dvh!important}.cna-guide{min-height:52px!important}.cna-sb-score{display:none!important}
}

/* ═══════════════════════════════════════════════════════
   v22.8.1 — Fix contraste / legibilidad + responsive fino
   Solo CSS: no toca lógica, AJAX ni estructura funcional.
═══════════════════════════════════════════════════════ */
:root{
  --cna-readable:#1e3a5f;
  --cna-readable-2:#355b84;
  --cna-readable-soft:#6b819a;
  --cna-card-white:rgba(255,255,255,.96);
}
.cna-app,
.cna-main,
.cna-sidebar,
.cna-chat,
.cna-input-zone,
.cna-overlay-view{
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}
.cna-sb-brand-text strong,
.cna-sb-user-info b,
.cna-guide-info b,
.cna-topbar-info strong,
.cna-msg-name,
.cna-mail-header strong,
.cna-help-card strong,
.cna-help-step b{
  color:var(--cna-readable)!important;
  opacity:1!important;
  text-shadow:none!important;
}
.cna-sb-brand-text small,
.cna-sb-user-info small,
.cna-guide-info small,
.cna-topbar-info small,
.cna-sc-l,
.cna-sb-guides-head span,
.cna-msg-time,
.cna-input-hint,
.cna-mail-header small{
  color:var(--cna-readable-soft)!important;
  opacity:1!important;
  text-shadow:none!important;
}
.cna-msg-row--tutor .cna-msg-bubble,
.cna-msg-row--tutor .cna-msg-bubble.cna-game-card,
.cna-msg-row--break .cna-msg-bubble,
.cna-msg-row--system .cna-msg-bubble,
.cna-game-card{
  background:var(--cna-card-white)!important;
  color:var(--cna-readable)!important;
  border:1px solid #d8e8f7!important;
  opacity:1!important;
  filter:none!important;
  box-shadow:0 18px 42px rgba(73,112,152,.14)!important;
}
.cna-msg-row--tutor .cna-msg-bubble *,
.cna-msg-row--tutor .cna-msg-bubble.cna-game-card *,
.cna-game-card *,
.cna-study-card *,
.cna-help-card *,
.cna-help-step *,
.cna-break-card *{
  opacity:1!important;
  text-shadow:none!important;
}
.cna-msg-row--tutor .cna-msg-bubble :where(p,span,div,li,small,strong,b,em),
.cna-msg-row--tutor .cna-msg-bubble.cna-game-card :where(p,span,div,li,small,strong,b,em),
.cna-game-card :where(p,span,div,li,small,strong,b,em){
  color:var(--cna-readable)!important;
}
.cna-msg-row--tutor .cna-msg-bubble small,
.cna-game-card small,
.cna-study-card-head p,
.cna-study-card-body small{
  color:var(--cna-readable-2)!important;
}
.cna-msg-name{
  color:#3c83ca!important;
  letter-spacing:.04em!important;
}
.cna-msg-row--user .cna-msg-bubble,
.cna-msg-row--user .cna-msg-bubble *{
  color:#183153!important;
  opacity:1!important;
}
.cna-chip,
.cna-act-btn,
.cna-visual-strip span,
.cna-sb-nav button,
.cna-topbar-status,
.cna-guide-pct-mini,
.cna-topbar-progress span{
  color:var(--cna-readable)!important;
  opacity:1!important;
  font-weight:800!important;
}
.cna-chip.active-mode,
.cna-chip.active,
.cna-chip:hover{
  background:#ffffff!important;
  border-color:#b9d8f5!important;
  color:#21476f!important;
}
.cna-input-row textarea,
.cna-input-row textarea::placeholder,
.cna-sb-search,
.cna-sb-search::placeholder{
  opacity:1!important;
  text-shadow:none!important;
}
.cna-input-row textarea::placeholder{color:#7b91aa!important;font-weight:700!important}
.cna-input-row textarea{color:#163557!important;font-weight:700!important;background:#fff!important}
.cna-scroll-down{background:#75aeea!important;color:#fff!important;opacity:1!important}
.cna-loading,
.cna-loading *{color:var(--cna-readable-2)!important;opacity:1!important}

@media(min-width:861px){
  .cna-chat{
    padding:22px 26px 10px!important;
  }
  .cna-msg-row--tutor{max-width:min(920px,78%)!important}
  .cna-msg-row--user{max-width:min(820px,72%)!important}
  .cna-msg-bubble{
    font-size:15.5px!important;
    line-height:1.62!important;
  }
  .cna-game-card{
    min-width:min(760px,68vw)!important;
  }
  .cna-input-zone{
    background:rgba(250,253,255,.96)!important;
  }
}

@media(max-width:860px){
  .cna-app{background:linear-gradient(160deg,#ffffff 0%,#f5fbff 55%,#eef7ff 100%)!important}
  .cna-topbar{
    background:rgba(255,255,255,.96)!important;
    border-bottom:1px solid #dbe8f7!important;
    box-shadow:0 8px 22px rgba(67,105,145,.08)!important;
  }
  .cna-topbar-info strong{
    color:#1e3a5f!important;
    font-size:14px!important;
    line-height:1.15!important;
  }
  .cna-topbar-info small{color:#657d98!important}
  .cna-chat{
    padding-bottom:136px!important;
  }
  .cna-msg-row--tutor,
  .cna-msg-row--user{
    max-width:100%!important;
  }
  .cna-msg-bubble{
    max-width:calc(100vw - 58px)!important;
    font-size:14.75px!important;
    line-height:1.58!important;
  }
  .cna-msg-row--tutor .cna-msg-bubble,
  .cna-msg-row--tutor .cna-msg-bubble.cna-game-card,
  .cna-game-card{
    background:#ffffff!important;
  }
  .cna-input-zone{
    background:rgba(250,253,255,.98)!important;
    border-top:1px solid #dbe8f7!important;
  }
  .cna-input-hint{
    color:#5b7390!important;
    background:#ffffff!important;
  }
  .cna-sidebar{
    background:#f8fcff!important;
  }
  .cna-sb-nav button,
  .cna-guide,
  .cna-sc-item{
    background:#ffffff!important;
  }
}


/* ═══════════════════════════════════════════════════════
   v22.9.1 — Herramientas visibles también en escritorio
   Mantiene la lógica: solo agrega accesos desktop y mejora contraste
═══════════════════════════════════════════════════════ */
.cna-chip-divider{
  width:1px;
  height:22px;
  background:linear-gradient(180deg,transparent,rgba(21,94,239,.32),transparent);
  margin:0 4px;
  flex:0 0 1px;
}
.cna-chip-tool{
  background:rgba(255,255,255,.86) !important;
  color:#14345f !important;
  border-color:rgba(21,94,239,.28) !important;
  box-shadow:0 6px 18px rgba(15,55,105,.06) !important;
}
.cna-chip-tool:hover{
  background:#ffffff !important;
  color:#0f2f5f !important;
  border-color:rgba(21,94,239,.42) !important;
}
.cna-chip-tool-a{box-shadow:inset 0 -2px 0 rgba(99,102,241,.22),0 6px 18px rgba(15,55,105,.06) !important}
.cna-chip-tool-b{box-shadow:inset 0 -2px 0 rgba(6,182,212,.24),0 6px 18px rgba(15,55,105,.06) !important}
.cna-chip-tool-c{box-shadow:inset 0 -2px 0 rgba(245,158,11,.24),0 6px 18px rgba(15,55,105,.06) !important}
.cna-chip-tool-d{box-shadow:inset 0 -2px 0 rgba(34,197,94,.24),0 6px 18px rgba(15,55,105,.06) !important}
.cna-chip-tool-e{box-shadow:inset 0 -2px 0 rgba(168,85,247,.22),0 6px 18px rgba(15,55,105,.06) !important}
.cna-chip-tool-f{box-shadow:inset 0 -2px 0 rgba(244,63,94,.20),0 6px 18px rgba(15,55,105,.06) !important}

@media(min-width:861px){
  .cna-mode-strip{
    height:auto !important;
    min-height:54px !important;
    padding:8px 12px !important;
  }
  .cna-mode-chips{
    flex-wrap:wrap !important;
    gap:8px !important;
    width:100%;
  }
  .cna-chip{
    min-height:32px;
    padding:7px 14px !important;
    font-size:13px !important;
    line-height:1.1 !important;
  }
}

@media(max-width:860px){
  .cna-chip-divider,
  .cna-chip-tool{display:none !important;}
}

/* ═══════════════════════════════════════════════════════
   v22.9.2 — Toolbar modular desktop sin apretar visual
   Separa juegos, asistencia y herramientas IA. No altera lógica JS/PHP.
═══════════════════════════════════════════════════════ */
@media(min-width:861px){
  .cna-mode-strip{
    height:auto !important;
    min-height:112px !important;
    padding:10px 16px 12px !important;
    overflow:visible !important;
    background:rgba(255,255,255,.82) !important;
    backdrop-filter:blur(18px) saturate(1.15) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.15) !important;
    border-bottom:1px solid rgba(148,163,184,.22) !important;
  }
  .cna-mode-chips-modular{
    display:grid !important;
    grid-template-columns:minmax(360px,1.25fr) minmax(260px,.75fr) minmax(460px,1.35fr) !important;
    align-items:stretch !important;
    gap:10px !important;
    width:100% !important;
    overflow:visible !important;
    white-space:normal !important;
  }
  .cna-chip-group{
    position:relative !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-content:flex-start !important;
    align-items:center !important;
    gap:7px !important;
    min-height:78px !important;
    padding:26px 10px 10px !important;
    border:1px solid rgba(191,219,254,.72) !important;
    border-radius:18px !important;
    background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(239,246,255,.64)) !important;
    box-shadow:0 10px 30px rgba(15,55,105,.055) !important;
  }
  .cna-chip-group-tools{
    background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(248,250,252,.72),rgba(239,246,255,.72)) !important;
  }
  .cna-chip-group-label{
    position:absolute !important;
    top:7px !important;
    left:12px !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;
    height:16px !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
    color:#43638c !important;
    opacity:.92 !important;
    pointer-events:none !important;
  }
  .cna-mode-chips-modular .cna-chip{
    flex:0 1 auto !important;
    min-width:auto !important;
    max-width:100% !important;
    min-height:31px !important;
    padding:7px 12px !important;
    border-radius:999px !important;
    font-size:12.5px !important;
    font-weight:850 !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }
  .cna-chip-divider{display:none !important;}
}
@media(min-width:861px) and (max-width:1360px){
  .cna-mode-strip{min-height:160px !important;}
  .cna-mode-chips-modular{
    grid-template-columns:1fr 1fr !important;
  }
  .cna-chip-group-tools{
    grid-column:1 / -1 !important;
    min-height:70px !important;
  }
}
@media(min-width:861px) and (max-width:1080px){
  .cna-mode-strip{min-height:236px !important;}
  .cna-mode-chips-modular{grid-template-columns:1fr !important;}
  .cna-chip-group{min-height:68px !important;}
  .cna-chip-group-tools{grid-column:auto !important;}
}
@media(max-width:860px){
  .cna-mode-chips-modular .cna-chip-group-label,
  .cna-mode-chips-modular .cna-chip-group-tools,
  .cna-mode-chips-modular .cna-chip-group-assist,
  .cna-mode-chips-modular .cna-chip-group-games{
    display:contents !important;
  }
}

/* v22.9.3 — Herramientas reales separadas del chat/juego */
.cna-tool-result{
  background:linear-gradient(145deg,#ffffff 0%,#f7fbff 100%);
  border:1px solid rgba(91,141,239,.22);
  border-radius:22px;
  box-shadow:0 18px 50px rgba(30,64,175,.10);
  overflow:hidden;
  color:#17345f;
}
.cna-tool-result-head{
  display:flex;align-items:center;gap:14px;
  padding:18px 20px;
  background:linear-gradient(135deg,#eff6ff,#fff7fb);
  border-bottom:1px solid rgba(91,141,239,.16);
}
.cna-tool-result-ic{
  width:48px;height:48px;border-radius:18px;display:grid;place-items:center;
  background:#fff;box-shadow:0 10px 24px rgba(37,99,235,.12);font-size:24px;
}
.cna-tool-result-head h3{margin:0;color:#12325a;font-size:18px;font-weight:900;letter-spacing:-.02em}
.cna-tool-result-head p{margin:3px 0 0;color:#6b7c93;font-size:13px;font-weight:650}
.cna-tool-result-body{padding:18px 20px;font-size:15px;line-height:1.65;color:#17345f}
.cna-tool-result-body h3{margin:2px 0 12px;color:#12325a;font-size:18px;font-weight:900}
.cna-tool-result-body ul,.cna-tool-result-body ol{padding-left:22px;margin:10px 0}
.cna-tool-result-body li{margin:6px 0}
.cna-tool-result-body table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:16px;border:1px solid #dbeafe;background:#fff;margin:12px 0}
.cna-tool-result-body th{background:#eff6ff;color:#12325a;text-align:left;font-weight:900;padding:10px;border-bottom:1px solid #dbeafe}
.cna-tool-result-body td{padding:10px;border-bottom:1px solid #edf2f7;color:#29476f;vertical-align:top}
.cna-tool-result-body tr:last-child td{border-bottom:0}
.cna-tool-result-foot{padding:12px 18px;background:#f8fbff;border-top:1px solid rgba(91,141,239,.12);font-size:13px;color:#52719a;font-weight:750}
@media (max-width:860px){
  .cna-tool-result-head{padding:14px}.cna-tool-result-ic{width:42px;height:42px;border-radius:15px}.cna-tool-result-body{padding:14px;font-size:14px}.cna-tool-result-body table{display:block;overflow-x:auto;white-space:nowrap}.cna-tool-result-head h3{font-size:16px}
}