/* ==========================================================================
   Nexo · componentes de la versión 2
   Acceso, panel administrativo, gráficos, estados vacíos y utilidades.
   Reutiliza los tokens definidos en styles.css.
   ========================================================================== */

.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* --------------------------------- Carga --------------------------------- */
.boot-screen { position:fixed;inset:0;z-index:80;display:grid;place-content:center;justify-items:center;gap:14px;background:var(--bg);color:var(--muted);font-size:11px; }
.boot-screen.hidden { display:none; }
.boot-spinner { width:34px;height:34px;border-radius:50%;border:3px solid var(--purple-soft);border-top-color:var(--purple);animation:nexospin .8s linear infinite; }
@keyframes nexospin { to { transform:rotate(360deg); } }

/* --------------------------------- Acceso --------------------------------- */
body.auth-mode { background:linear-gradient(160deg,#f3f1fb 0%,#f7f7fb 45%,#eef2fa 100%); }
.auth-screen { min-height:100vh;display:grid;place-items:center;padding:32px 18px; }
/* `display:grid` gana al estilo del atributo hidden: hay que ocultarlo explícitamente. */
.auth-screen[hidden] { display:none; }
.auth-card { width:min(470px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:0 26px 60px rgba(39,31,78,.1);padding:clamp(24px,4vw,38px); }
.auth-brand { padding:0;margin-bottom:22px; }
.auth-card h1 { font-size:24px;letter-spacing:-.9px;margin:0 0 7px; }
.auth-lead { color:var(--muted);font-size:11px;line-height:1.6;margin-bottom:20px; }
.auth-tabs { display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#f4f3f8;border-radius:12px;margin-bottom:19px; }
.auth-tabs button { border:0;background:transparent;padding:9px;border-radius:9px;font-size:11px;font-weight:700;color:var(--muted); }
.auth-tabs button.active { background:white;color:var(--purple-dark);box-shadow:var(--shadow-soft); }
.auth-form { display:grid;gap:12px; }
.auth-form label { display:grid;gap:6px;font-size:10px;font-weight:700;color:#666374; }
.auth-form input, .auth-form select { width:100%;border:1px solid var(--line);background:#fbfbfd;border-radius:10px;padding:11px 12px;outline:0;color:var(--ink);font-size:12px; }
.auth-form input:focus, .auth-form select:focus { border-color:#aaa0dd;box-shadow:0 0 0 3px var(--purple-soft); }
.auth-row { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.auth-error { margin:0;background:#fff0ee;color:#9b4b46;border:1px solid #f3d4d0;border-radius:9px;padding:9px 11px;font-size:10px;line-height:1.5; }
.auth-form .primary-button { padding:13px;font-size:12px;margin-top:4px; }
.auth-credit { text-align:center;margin:20px 0 0;font-size:9px;color:var(--muted); }
.auth-credit a { color:var(--purple);font-weight:700; }

/* Accesos de demostración */
.demo-access { margin-top:22px;padding-top:19px;border-top:1px dashed var(--line); }
.demo-access h2 { font-size:11px;text-transform:uppercase;letter-spacing:1.1px;color:#9b98a9;margin:0 0 12px; }
.demo-block { background:#faf9fd;border:1px solid var(--line);border-radius:13px;padding:12px;margin-bottom:10px; }
.demo-block-head { margin-bottom:9px; }
.demo-tag { display:inline-block;font-size:8px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:4px 8px;border-radius:99px; }
.demo-tag.student { background:var(--mint-soft);color:#3f8f6d; }
.demo-tag.admin { background:var(--purple-soft);color:var(--purple-dark); }
.cred { display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 0;font-size:10px; }
.cred > span { color:var(--muted);font-size:9px; }
.cred strong { font-size:10px;overflow-wrap:anywhere; }
.copy-button { border:1px solid var(--line);background:white;border-radius:7px;padding:5px 8px;font-size:8px;font-weight:700;color:var(--muted);white-space:nowrap; }
.copy-button:hover { border-color:#cfc8f1;color:var(--purple); }
.copy-button.copied { background:var(--mint-soft);color:#3f8f6d;border-color:#bfe4d3; }
.use-access { width:100%;margin-top:9px;border:0;background:var(--purple);color:white;border-radius:9px;padding:9px;font-size:10px;font-weight:750; }
.use-access:hover { background:var(--purple-dark); }

/* -------------------------------- Inicio -------------------------------- */
.goal-pill { display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);background:white;border-radius:12px;padding:8px 13px;box-shadow:var(--shadow-soft); }
.goal-pill > span { font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-weight:800; }
.goal-pill strong { font-size:13px; }
.goal-pill.reached { border-color:#bfe4d3;background:var(--mint-soft); }
.goal-pill.reached strong { color:#3f8f6d; }
.focus-actions { display:flex;gap:9px;flex-wrap:wrap; }
.ghost-button { border:1px solid rgba(255,255,255,.35);background:transparent;color:white;border-radius:11px;padding:11px 16px;font-size:11px;font-weight:700; }
.ghost-button:hover { background:rgba(255,255,255,.12); }

.subject-blue { color:#437faa;background:#e8f4fb; }
.subject-cyan { color:#3c8f9b;background:#e6f6f6; }
.subject-rose { color:#bd617d;background:#faeaf0; }
.skill-detail { display:block;margin-top:5px;font-size:7px;color:#a5a2b0; }

.logout-button { border:1px solid var(--line);background:white;color:var(--muted);border-radius:10px;padding:9px;font-size:9px;font-weight:700; }
.logout-button:hover { border-color:#e6b9b9;color:#b45c5c;background:#fff8f8; }

/* --------------------------------- Tutor --------------------------------- */
.chat-list { display:grid;gap:5px;margin-top:14px;max-height:270px;overflow-y:auto; }
.chat-item { display:grid;grid-template-columns:minmax(0,1fr) 26px;align-items:center;border-radius:10px;background:#f8f7fb;border:1px solid transparent; }
.chat-item.active { border-color:#d6cff4;background:#f5f2ff; }
.chat-open { border:0;background:transparent;text-align:left;padding:9px;display:grid;gap:3px;min-width:0; }
.chat-open strong { font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.chat-open small { font-size:7px;color:var(--muted); }
.chat-delete { border:0;background:transparent;color:#b6b3c0;font-size:10px;padding:6px; }
.chat-delete:hover { color:#c26a6a; }
.chat-list-empty { font-size:9px;color:var(--muted);margin:14px 0 0;line-height:1.5; }

.message-bubble { white-space:normal; }
.message-bubble .md-p { margin:0 0 9px; }
.message-bubble .md-p:last-child { margin-bottom:0; }
.message-bubble .md-list { margin:0 0 9px;padding-left:17px; }
.message-bubble .md-list li { margin-bottom:4px; }
.message-bubble .md-heading { font-size:12px;margin:0 0 7px; }
.message-bubble code { background:rgba(111,87,223,.09);padding:1px 4px;border-radius:4px;font-family:"SFMono-Regular",Consolas,monospace;font-size:11px; }
.message-row.user .message-bubble code { background:rgba(255,255,255,.2); }

/* -------------------------------- Práctica -------------------------------- */
.quiz-loading { color:var(--muted);font-size:11px;padding:40px 0;text-align:center; }
.answer-option:disabled { cursor:default; }
.quiz-result { text-align:center;padding:14px 0; }
.result-badge { display:inline-grid;place-items:center;width:78px;height:78px;border-radius:50%;font-size:21px;font-weight:800;margin-bottom:16px; }
.result-badge.great { background:var(--mint-soft);color:#3f8f6d; }
.result-badge.good { background:var(--purple-soft);color:var(--purple-dark); }
.result-badge.work { background:var(--peach-soft);color:#b5773f; }
.quiz-result h2 { margin:0 0 9px;font-size:21px; }
.quiz-result > p { color:var(--muted);font-size:11px;line-height:1.6;max-width:440px;margin:0 auto 22px; }
.result-metrics { display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:22px; }
.result-metrics > div { background:#f9f8fc;border-radius:11px;padding:12px 8px;display:grid;gap:5px; }
.result-metrics small { font-size:7px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;font-weight:800; }
.result-metrics strong { font-size:14px; }
.result-actions { display:flex;gap:9px;justify-content:center;flex-wrap:wrap; }

/* ------------------------------- Biblioteca ------------------------------- */
.library-topics { list-style:none;margin:0 0 13px;padding:0;display:grid;gap:4px; }
.library-topics li { display:flex;justify-content:space-between;gap:8px;font-size:8px;color:var(--muted);background:#f9f8fc;border-radius:7px;padding:5px 8px; }
.library-topics small { color:#a9a6b3; }
.library-actions { display:flex;gap:9px; }
.library-actions button { border:0;background:transparent;color:var(--purple);font-size:8px;font-weight:800; }

/* -------------------------------- Progreso -------------------------------- */
.level-badge { display:flex;align-items:center;gap:11px;border:1px solid var(--line);background:white;border-radius:14px;padding:10px 15px;box-shadow:var(--shadow-soft); }
.level-badge strong { display:block;font-size:13px; }
.level-badge small { color:var(--muted);font-size:8px; }
.ring-wrap { position:relative;display:grid;place-items:center; }
.ring-label { position:absolute;text-align:center;line-height:1.1; }
.ring-label strong { font-size:13px; }
.ring-label small { display:block;font-size:6px;color:var(--muted);margin-top:2px; }

.chart-bars { display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:22px 4px 0;border-bottom:1px solid var(--line); }
.chart-bar-col { flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%; }
.chart-bar { position:relative;width:min(30px,80%);min-height:4px;background:#dedbe9;border-radius:7px 7px 2px 2px;transition:.25s; }
.chart-bar.highlight { background:linear-gradient(#8a75e9,#6f57df);box-shadow:0 5px 13px rgba(111,87,223,.2); }
.chart-bar.empty { background:#eeedf3; }
.chart-bar b { position:absolute;top:-16px;width:100%;text-align:center;font-size:7px;color:#9996a4;font-weight:700;font-style:normal; }
.chart-bar-col > span { font-size:7px;color:#9996a4; }
.area-wrap { margin-top:14px; }
.chart-area { width:100%;height:160px; }
.chart-area-labels { display:flex;justify-content:space-between;margin-top:5px; }
.chart-area-labels span { font-size:7px;color:#9996a4; }
.donut-wrap { display:flex;align-items:center;gap:18px;margin-top:16px;flex-wrap:wrap; }
.chart-legend { display:grid;gap:6px;min-width:0; }
.chart-legend > div { display:flex;align-items:center;gap:7px;font-size:9px;color:var(--muted); }
.chart-legend i { width:9px;height:9px;border-radius:3px;flex:0 0 auto; }
.chart-legend strong { margin-left:auto;color:var(--ink);font-size:9px; }

.activity-feed { display:grid;gap:6px; }
.feed-item { display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;background:#f9f8fc;border-radius:10px;padding:9px 11px; }
.feed-icon { width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--purple-soft);color:var(--purple);font-size:11px; }
.feed-correcta .feed-icon { background:var(--mint-soft);color:var(--mint); }
.feed-incorrecta .feed-icon { background:var(--peach-soft);color:var(--peach); }
.feed-item strong { font-size:9px;display:block; }
.feed-item small { font-size:7px;color:var(--muted); }

/* ------------------------------ Estados vacíos ------------------------------ */
.empty-state { display:grid;justify-items:center;gap:7px;text-align:center;padding:34px 20px;color:var(--muted); }
.empty-icon { width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--purple-soft);color:var(--purple);font-size:19px; }
.empty-state strong { font-size:12px;color:var(--ink); }
.empty-state p { margin:0;font-size:9px;line-height:1.6;max-width:320px; }

/* ---------------------------- Panel administrativo ---------------------------- */
.admin-nav.hidden { display:none; }
.admin-tabs { display:flex;gap:6px;margin-bottom:20px;overflow-x:auto;padding-bottom:3px; }
.admin-tabs button { white-space:nowrap;border:1px solid var(--line);background:white;color:var(--muted);border-radius:99px;padding:9px 15px;font-size:10px;font-weight:700; }
.admin-tabs button.active { background:var(--purple);border-color:var(--purple);color:white; }
.admin-kpis { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px; }
.admin-charts { display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:18px;margin-bottom:18px; }
.admin-block { margin-bottom:18px; }
.admin-block .section-heading { margin-top:0; }
.admin-toolbar { display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px; }
.admin-toolbar h2 { margin:0 0 4px;font-size:17px;letter-spacing:-.35px; }
.admin-toolbar small { color:var(--muted);font-size:9px; }
.admin-toolbar-actions { display:flex;gap:9px;align-items:center;flex-wrap:wrap; }
.admin-search { border:1px solid var(--line);background:white;border-radius:10px;padding:9px 12px;font-size:10px;min-width:210px;outline:0; }
.admin-search:focus { border-color:#aaa0dd;box-shadow:0 0 0 3px var(--purple-soft); }

.table-wrap { overflow-x:auto;background:white;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft); }
.admin-table { width:100%;border-collapse:collapse;min-width:680px; }
.admin-table th { text-align:left;padding:12px 14px;font-size:8px;text-transform:uppercase;letter-spacing:.9px;color:#9b98a9;border-bottom:1px solid var(--line);white-space:nowrap; }
.admin-table td { padding:12px 14px;font-size:10px;border-bottom:1px solid #f2f1f6;color:#5b5869;vertical-align:middle; }
.admin-table tr:last-child td { border-bottom:0; }
.admin-table tr:hover td { background:#fcfbff; }
.cell-strong { display:flex;align-items:center;gap:9px; }
.cell-strong strong { display:block;font-size:10px;color:var(--ink); }
.cell-strong small { display:block;font-size:8px;color:var(--muted);margin-top:2px; }
.cell-wrap { display:block;max-width:340px;line-height:1.5; }
.pill { display:inline-block;padding:4px 8px;border-radius:99px;font-size:8px;font-weight:800; }
.pill.ok { background:var(--mint-soft);color:#3f8f6d; }
.pill.warn { background:var(--peach-soft);color:#b5773f; }
.pill.danger { background:#fdeceb;color:#b4534e; }
.pill.admin { background:var(--purple-soft);color:var(--purple-dark); }
.row-actions { display:flex;gap:6px; }
.mini-button { border:1px solid var(--line);background:white;color:var(--muted);border-radius:8px;padding:6px 10px;font-size:8px;font-weight:700;white-space:nowrap; }
.mini-button:hover { border-color:#cfc8f1;color:var(--purple); }
.mini-button.danger:hover { border-color:#e6b9b9;color:#b45c5c;background:#fff8f8; }

/* Editor a página completa (patrón WooCommerce) */
.editor-header { display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap; }
.editor-header h2 { margin:0;font-size:19px;letter-spacing:-.5px; }
.editor-layout { display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start; }
.editor-main { display:grid;gap:16px;min-width:0; }
.editor-side { display:grid;gap:16px;align-content:start; }
.editor-card { background:white;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:19px; }
.editor-card h3 { margin:0 0 14px;font-size:13px; }
.editor-card-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px; }
.editor-card-head h3 { margin:0; }
.editor-field { display:grid;gap:6px;margin-bottom:12px;font-size:9px;font-weight:700;color:#666374; }
.editor-field input, .editor-field select, .editor-field textarea { width:100%;border:1px solid var(--line);background:#fbfbfd;border-radius:10px;padding:10px 11px;outline:0;color:var(--ink);font-size:10px;font-weight:400; }
.editor-field input:focus, .editor-field select:focus, .editor-field textarea:focus { border-color:#aaa0dd;box-shadow:0 0 0 3px var(--purple-soft); }
.editor-check { display:flex;align-items:center;gap:9px;font-size:9px;font-weight:700;color:#666374;margin-bottom:12px; }
.editor-check input { width:15px;height:15px;accent-color:var(--purple); }
.side-metric { display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:9px;color:var(--muted); }
.side-metric strong { color:var(--ink); }
.side-note { margin:0 0 12px;font-size:8px;color:var(--muted);line-height:1.5; }

.question-list { display:grid;gap:13px; }
.question-row { border:1px solid var(--line);border-radius:13px;padding:14px;background:#fbfafd; }
.question-row-head { display:flex;gap:9px;align-items:flex-start; }
.question-prompt { flex:1;border:1px solid var(--line);border-radius:9px;padding:9px;font-size:10px;resize:vertical;outline:0;background:white;font-family:inherit; }
.question-prompt:focus { border-color:#aaa0dd;box-shadow:0 0 0 3px var(--purple-soft); }
.question-help { margin:9px 0 7px;font-size:8px;color:var(--muted); }
.option-rows { display:grid;gap:6px; }
.option-row { display:grid;grid-template-columns:18px 1fr;gap:9px;align-items:center; }
.option-row input[type="radio"] { width:15px;height:15px;accent-color:var(--purple); }
.option-input { border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:10px;outline:0;background:white;min-width:0; }
.option-input:focus { border-color:#aaa0dd; }
.question-extra { display:grid;grid-template-columns:1fr 1fr 130px;gap:9px;margin-top:11px; }
.question-extra label { display:grid;gap:5px;font-size:8px;font-weight:700;color:#666374; }
.question-extra input, .question-extra select { border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:9px;outline:0;background:white;font-weight:400;min-width:0; }

/* -------------------------------- Pie y flotantes -------------------------------- */
.app-footer { margin:40px clamp(28px,3.4vw,58px) 0;padding:22px 0 34px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap; }
.app-footer p { margin:0;font-size:9px;color:var(--muted); }
.app-footer a { color:var(--purple);font-weight:700; }
.footer-links { display:flex;gap:8px;align-items:center; }

.whatsapp-float { position:fixed;right:20px;bottom:20px;z-index:55;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:white;box-shadow:0 10px 26px rgba(37,211,102,.34);transition:.2s ease; }
.whatsapp-float:hover { transform:translateY(-2px);box-shadow:0 14px 30px rgba(37,211,102,.42); }
body.auth-mode .whatsapp-float { display:none; }

.install-prompt { position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:56;display:flex;align-items:center;gap:12px;background:#29263f;color:white;border-radius:14px;padding:12px 14px;box-shadow:0 16px 34px rgba(26,21,50,.3);width:min(420px,calc(100vw - 32px)); }
.install-prompt.hidden { display:none; }
.install-icon { width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.12);color:#c9bbff;flex:0 0 auto; }
.install-prompt strong { display:block;font-size:10px; }
.install-prompt small { color:#b8b4cd;font-size:8px; }
.install-prompt .primary-button { padding:8px 12px;font-size:9px; }
.install-close { border:0;background:transparent;color:#8f8ba6;font-size:11px;padding:4px; }

.toast.success { background:#2f6b52; }
.toast.error { background:#8e4340; }
.toast.warn { background:#8a6a35; }

/* -------------------------------- Responsive -------------------------------- */
@media (max-width: 1180px) {
  .admin-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-charts { grid-template-columns:1fr; }
  .editor-layout { grid-template-columns:1fr; }
  .editor-side { order:-1; }
}

@media (max-width: 900px) {
  .app-footer { margin-inline:23px; }
  .question-extra { grid-template-columns:1fr; }
}

@media (max-width: 680px) {
  .auth-card { padding:22px 18px; }
  .auth-row { grid-template-columns:1fr; }
  .cred { grid-template-columns:56px minmax(0,1fr);grid-template-areas:"label value" "action action";row-gap:4px; }
  .cred > span { grid-area:label; }
  .cred strong { grid-area:value; }
  .cred .copy-button { grid-area:action;justify-self:start; }
  .dashboard-header .header-actions { display:flex; }
  .dashboard-header .header-actions .avatar { display:none; }
  .goal-pill { padding:7px 10px; }
  .goal-pill strong { font-size:11px; }
  .result-metrics { grid-template-columns:1fr 1fr; }
  .admin-kpis { grid-template-columns:1fr 1fr; }
  .admin-toolbar-actions { width:100%; }
  .admin-search { flex:1;min-width:0; }
  .app-footer { margin-inline:16px;flex-direction:column;align-items:flex-start;gap:8px; }
  .whatsapp-float { width:48px;height:48px;right:14px;bottom:14px; }
  .whatsapp-float svg { width:24px;height:24px; }
  .install-prompt { bottom:76px; }
  .donut-wrap { justify-content:center; }
  .cell-wrap { max-width:220px; }
}

@media (max-width: 420px) {
  .admin-kpis { grid-template-columns:1fr; }
  .result-metrics { grid-template-columns:1fr; }
}