/* Centro de Ayuda NYXIVO — estilo limpio tipo Notion/Zendesk */
:root{
  /* Paleta de marca NYXIVO (azul, igual que el modal de login y la home) */
  --ay:#2563eb; --ay2:#1d4ed8; --ay-grad:linear-gradient(135deg,#60a5fa 0%,#3b82f6 50%,#1d4ed8 100%);
  --ink:#0f172a; --muted:#64748b; --soft:#f8fafc; --line:#e2e8f0;
}
.ay-body{ background:var(--soft); color:var(--ink); font-family:"Segoe UI",system-ui,sans-serif; }
.ay-wrap{ max-width:1080px; margin:0 auto; padding:1.5rem 1.1rem 4rem; }

/* Botón de regresar premium (reutilizable) */
.ay-back{ position:fixed; top:18px; left:18px; z-index:1000; display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--ay); border:1px solid var(--line); border-radius:999px; padding:.55rem 1rem .55rem .85rem;
  font-weight:600; font-size:.88rem; text-decoration:none; box-shadow:0 6px 18px rgba(15,23,42,.10);
  transition:transform .18s ease, box-shadow .18s ease, gap .18s ease, color .18s ease, border-color .18s ease; }
.ay-back:hover{ transform:translateY(-1px); gap:.65rem; color:var(--ay2); border-color:#bfdbfe; box-shadow:0 10px 26px rgba(37,99,235,.20); }
.ay-back .bi{ font-size:1rem; transition:transform .18s ease; }
.ay-back:hover .bi{ transform:translateX(-3px); }
.ay-back:focus-visible{ outline:3px solid rgba(59,130,246,.45); outline-offset:2px; }

/* Hero + buscador */
.ay-hero{ position:relative; overflow:hidden; background:var(--ay-grad); color:#fff; border-radius:28px; padding:3rem 2rem 2.6rem; text-align:center; box-shadow:0 22px 50px rgba(37,99,235,.32); }
.ay-hero::before{ content:""; position:absolute; top:-40%; right:-10%; width:55%; height:180%; background:radial-gradient(closest-side, rgba(255,255,255,.22), transparent 70%); pointer-events:none; }
.ay-hero::after{ content:""; position:absolute; left:-12%; bottom:-60%; width:45%; height:160%; background:radial-gradient(closest-side, rgba(255,255,255,.14), transparent 70%); pointer-events:none; }
.ay-hero > *{ position:relative; z-index:1; }
.ay-logo{ height:50px; width:auto; margin:0 auto 1.1rem; display:block; filter:drop-shadow(0 6px 16px rgba(0,0,0,.28)); }
.ay-hero h1{ font-weight:800; font-size:2rem; margin:0 0 .4rem; }
.ay-hero p{ opacity:.9; margin:0 0 1.4rem; }
.ay-search{ max-width:640px; margin:0 auto; position:relative; }
.ay-search input{ width:100%; border:2px solid transparent; border-radius:16px; padding:1.05rem 1rem 1.05rem 3rem; font-size:1.05rem; box-shadow:0 12px 30px rgba(0,0,0,.20); transition:border-color .18s ease, box-shadow .18s ease; }
.ay-search input:focus{ outline:none; border-color:rgba(255,255,255,.85); box-shadow:0 14px 36px rgba(0,0,0,.28); }
.ay-search .ay-ico{ position:absolute; left:1.05rem; top:50%; transform:translateY(-50%); font-size:1.2rem; color:var(--ay); }

/* Secciones */
.ay-sec-title{ font-weight:800; font-size:1.18rem; margin:2.2rem 0 1.1rem; display:flex; align-items:center; gap:.6rem; }
.ay-sec-title::before{ content:""; width:5px; height:1.1em; border-radius:999px; background:var(--ay-grad); }
.ay-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:1rem; }

/* Tarjetas */
.ay-card{ position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.2rem 1.3rem; text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; display:block; }
.ay-card::before{ content:""; position:absolute; top:0; left:0; bottom:0; width:4px; background:var(--ay-grad); transform:scaleY(0); transform-origin:top; transition:transform .2s ease; }
.ay-card:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(37,99,235,.14); border-color:#bfdbfe; }
.ay-card:hover::before{ transform:scaleY(1); }
.ay-card:focus-visible{ outline:3px solid rgba(59,130,246,.45); outline-offset:2px; }
.ay-card .ay-cat{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:13px; background:#eff6ff; font-size:1.3rem; }
.ay-card h3{ font-size:1.02rem; font-weight:700; margin:.6rem 0 .3rem; }
.ay-card p{ font-size:.85rem; color:var(--muted); margin:0 0 .7rem; line-height:1.5; }
.ay-meta{ display:flex; gap:.5rem; flex-wrap:wrap; }
.ay-chip{ font-size:.72rem; background:#eff6ff; color:#1d4ed8; border-radius:999px; padding:.12rem .55rem; font-weight:600; }
.ay-chip.t{ background:#ecfdf5; color:#047857; }
.ay-chip.d-facil{ background:#dcfce7; color:#166534; }
.ay-chip.d-media{ background:#fef9c3; color:#854d0e; }
.ay-chip.d-avanzada{ background:#fee2e2; color:#991b1b; }

/* Categoría con tarjetas */
.ay-catbox{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.4rem 1.6rem; margin-bottom:1.2rem; transition:box-shadow .18s ease; }
.ay-catbox:hover{ box-shadow:0 10px 30px rgba(15,23,42,.06); }
.ay-cathead{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.1rem; }
.ay-cat-ico{ flex:0 0 48px; width:48px; height:48px; border-radius:14px; background:#eff6ff; display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.ay-catbox h2{ font-size:1.12rem; font-weight:800; margin:0; }
.ay-catbox .ay-catdesc{ color:var(--muted); font-size:.85rem; margin:.1rem 0 0; }
.ay-arts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:.6rem; }
.ay-art{ position:relative; display:flex; gap:.65rem; align-items:center; padding:.7rem .8rem; border-radius:13px; text-decoration:none; color:inherit; border:1px solid var(--line); background:#fff; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.ay-art:hover{ transform:translateY(-2px); border-color:#bfdbfe; box-shadow:0 8px 20px rgba(37,99,235,.10); }
.ay-art:focus-visible{ outline:3px solid rgba(59,130,246,.45); outline-offset:2px; }
.ay-art-ico{ flex:0 0 32px; width:32px; height:32px; border-radius:9px; background:#eff6ff; color:var(--ay); display:flex; align-items:center; justify-content:center; }
.ay-art-tx{ min-width:0; }
.ay-art small{ color:var(--muted); }
.ay-art-go{ margin-left:auto; color:#cbd5e1; transition:transform .15s ease, color .15s ease; }
.ay-art:hover .ay-art-go{ color:var(--ay); transform:translateX(3px); }

/* Detalle de artículo */
.ay-article{ display:grid; grid-template-columns:1fr; gap:1.5rem; max-width:820px; margin:0 auto; }
.ay-crumbs{ max-width:820px; margin:0 auto .9rem; display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; font-size:.82rem; color:var(--muted); }
.ay-crumbs a{ color:var(--ay); text-decoration:none; font-weight:600; }
.ay-crumbs a:hover{ text-decoration:underline; }
.ay-crumbs .sep{ color:#cbd5e1; }
.ay-crumbs .cur{ color:var(--ink); font-weight:600; }
.ay-doc{ position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:20px; padding:2rem 2.2rem; box-shadow:0 4px 18px rgba(15,23,42,.04); }
.ay-doc::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--ay-grad); }
.ay-doc h1{ font-size:1.75rem; font-weight:800; margin:.4rem 0 .2rem; letter-spacing:-.01em; }
.ay-summary{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin:1.2rem 0 1.7rem; }
.ay-summary > div{ background:#f8fafc; border:1px solid var(--line); border-radius:13px; padding:.7rem .9rem; font-size:.9rem; }
.ay-summary b{ display:block; color:var(--muted); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.2rem; }
@media(max-width:560px){ .ay-summary{ grid-template-columns:1fr; } .ay-doc{ padding:1.3rem; } }
.ay-related{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.2rem 1.4rem; max-width:820px; margin:1.2rem auto 0; }
.ay-related h3{ font-size:1rem; font-weight:800; margin:0 0 .8rem; }
.ay-feedback{ text-align:center; margin:1.5rem auto 0; max-width:820px; color:var(--muted); }
.ay-feedback button{ border:1px solid var(--line); background:#fff; border-radius:10px; padding:.4rem .9rem; margin:0 .3rem; cursor:pointer; font-weight:600; }
.ay-feedback button:hover{ border-color:var(--ay); color:var(--ay); }

/* Progreso de la Academia */
.ay-progreso{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.1rem 1.3rem; margin:1.4rem 0 .5rem; }
.ay-prog-top{ display:flex; justify-content:space-between; align-items:center; font-weight:700; margin-bottom:.6rem; }
.ay-prog-pct{ color:var(--ay); font-weight:800; font-size:1.1rem; }
.ay-prog-bar{ height:10px; background:#eff6ff; border-radius:999px; overflow:hidden; }
.ay-prog-fill{ height:100%; width:0; background:linear-gradient(90deg,var(--ay),var(--ay2)); border-radius:999px; transition:width .5s ease; }
.ay-prog-txt{ color:var(--muted); font-size:.85rem; margin-top:.5rem; }

/* Marca de "leído" en tarjetas/links */
.ay-card.ay-leido{ position:relative; }
.ay-card.ay-leido::after,.ay-art.ay-leido::after{ content:"✓ leída"; font-size:.7rem; font-weight:700; color:#047857; background:#ecfdf5; border-radius:999px; padding:.05rem .5rem; }
.ay-card.ay-leido::after{ position:absolute; top:.7rem; right:.7rem; }
.ay-art.ay-leido::after{ margin-left:auto; align-self:center; }
.ay-art{ align-items:center; }

/* Respaldo IA Alaia */
.ay-ia-cta{ display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap; margin:1.4rem 0 .4rem; color:var(--muted); font-size:.9rem; }
.ay-ia-cta button, .ay-empty button{ border:0; background:linear-gradient(135deg,var(--ay),var(--ay2)); color:#fff; font-weight:700; border-radius:10px; padding:.55rem 1rem; cursor:pointer; }
.ay-ia-cta button:hover, .ay-empty button:hover{ filter:brightness(1.08); }
.ay-ia{ max-width:760px; margin:1rem auto 0; }
.ay-ia-card{ background:#fff; border:1px solid #bfdbfe; border-radius:16px; padding:1.1rem 1.3rem; box-shadow:0 8px 24px rgba(37,99,235,.1); }
.ay-ia-head{ font-weight:800; color:var(--ay); margin-bottom:.6rem; }
.ay-ia-txt{ line-height:1.6; }
.ay-ia-prods{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.8rem; }
.ay-ia-foot{ margin-top:.9rem; font-size:.82rem; color:var(--muted); }
/* Citas a guías en la respuesta IA */
.ay-ia-cites{ margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--line); }
.ay-ia-cites b{ display:block; font-size:.82rem; color:var(--muted); margin-bottom:.45rem; }
.ay-ia-cites a{ display:inline-flex; align-items:center; gap:.4rem; font-size:.83rem; font-weight:600; color:var(--ay); text-decoration:none; border:1px solid var(--line); border-radius:8px; padding:.35rem .6rem; margin:.15rem .3rem .15rem 0; transition:background .15s ease, border-color .15s ease; }
.ay-ia-cites a:hover{ background:#eff6ff; border-color:#bfdbfe; }

/* Preguntas sugeridas en el hero */
.ay-suggest{ margin-top:1rem; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:center; }
.ay-suggest > span{ color:rgba(255,255,255,.9); font-size:.82rem; font-weight:600; }
.ay-suggest a{ background:rgba(255,255,255,.16); color:#fff; border-radius:999px; padding:.3rem .85rem; font-size:.82rem; text-decoration:none; transition:background .15s ease; }
.ay-suggest a:hover{ background:rgba(255,255,255,.30); }

/* Pregunta sobre esta página */
.ay-askpage{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.2rem 1.4rem; margin:1.2rem auto 0; max-width:820px; }
.ay-askpage h3{ font-size:1rem; font-weight:800; margin:0 0 .8rem; }
.ay-ask-form{ display:flex; gap:.6rem; }
.ay-ask-form input{ flex:1; min-width:0; border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem; font-size:.92rem; }
.ay-ask-form input:focus{ outline:none; border-color:var(--ay); box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.ay-ask-form button{ background:var(--ay-grad); color:#fff; border:0; border-radius:12px; padding:0 1.1rem; font-size:1.1rem; cursor:pointer; }
.ay-askpage .ay-ia{ margin-top:1rem; max-width:none; }
.ay-ia-loading{ display:flex; gap:.4rem; }
.ay-ia-loading span{ width:9px; height:9px; border-radius:50%; background:var(--ay); opacity:.4; animation:ayblink 1s infinite; }
.ay-ia-loading span:nth-child(2){ animation-delay:.2s; } .ay-ia-loading span:nth-child(3){ animation-delay:.4s; }
@keyframes ayblink{ 0%,100%{opacity:.3;transform:translateY(0);} 50%{opacity:1;transform:translateY(-3px);} }

/* Empty / sin resultados */
.ay-empty{ text-align:center; color:var(--muted); padding:2.5rem 1rem; }

/* ---- Contenido de las guías (formato pasos) ---- */
.guia .paso{ display:flex; gap:1rem; align-items:flex-start; margin:1.1rem 0; }
.guia .paso .n{ flex:0 0 36px; height:36px; border-radius:50%; background:var(--ay); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; }
.guia h2{ font-size:1.25rem; font-weight:800; margin:1.6rem 0 .8rem; display:flex; gap:.5rem; align-items:center; }
.guia .nota{ border-left:5px solid #10b981; background:#ecfdf5; border-radius:10px; padding:.8rem 1rem; margin:1rem 0; }
.guia .aviso{ border-left:5px solid #ef4444; background:#fef2f2; border-radius:10px; padding:.8rem 1rem; margin:1rem 0; }
.guia .cuento{ border-left:5px solid #fb923c; background:#fff7ed; border-radius:10px; padding:.8rem 1rem; margin:1rem 0; }
.guia table{ width:100%; border-collapse:collapse; margin:.6rem 0; }
.guia th,.guia td{ text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--line); font-size:.92rem; }
.guia th{ background:#f8fafc; }
.guia code{ background:#0f172a; color:#e2e8f0; padding:.1rem .45rem; border-radius:6px; font-size:.85rem; }
.guia .video{ position:relative; padding-bottom:56.25%; height:0; border-radius:14px; overflow:hidden; margin:1rem 0; }
.guia .video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Resaltado de término buscado */
mark{ background:#fef08a; color:inherit; padding:0 .12em; border-radius:3px; }

/* Checklist interactivo dentro de las guías (.ay-checklist) */
.guia .ay-checklist{ list-style:none; padding:0; margin:1rem 0; }
.guia .ay-checklist li{ display:flex; align-items:flex-start; gap:.65rem; padding:.6rem .85rem; border:1px solid var(--line); border-radius:11px; margin-bottom:.5rem; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.guia .ay-checklist li::before{ content:""; flex:0 0 20px; width:20px; height:20px; border:2px solid #cbd5e1; border-radius:6px; margin-top:.05rem; transition:.15s ease; }
.guia .ay-checklist li:hover{ background:#f8fafc; }
.guia .ay-checklist li.done{ background:#ecfdf5; border-color:#bbf7d0; color:#475569; }
.guia .ay-checklist li.done::before{ content:"✓"; color:#fff; background:#16a34a; border-color:#16a34a; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:800; }

.guia h2::before{ content:""; width:4px; height:1em; border-radius:999px; background:var(--ay-grad); }

/* Feedback / relacionadas más refinados */
.ay-feedback button{ transition:transform .15s ease, border-color .15s ease, color .15s ease; }
.ay-feedback button:hover{ transform:translateY(-1px); }

@media (max-width:560px){ .ay-hero h1{ font-size:1.5rem; } .ay-doc{ padding:1.3rem; } .ay-back span.ay-back-tx{ display:none; } }

/* ===== Búsqueda instantánea (command palette) ===== */
.ay-search input{ padding-right:4.2rem; }
.ay-kbd{ position:absolute; right:.7rem; top:50%; transform:translateY(-50%); font:600 .72rem/1 "Segoe UI",system-ui,sans-serif; color:#64748b; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:7px; padding:.3rem .5rem; pointer-events:none; }
@media(max-width:560px){ .ay-kbd{ display:none; } .ay-search input{ padding-right:1rem; } }
.ay-instant{ position:absolute; left:0; right:0; top:calc(100% + .55rem); background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 60px rgba(15,23,42,.25); overflow:hidden auto; text-align:left; z-index:40; max-height:62vh; }
.ay-instant[hidden]{ display:none; }
.ay-i-row{ display:flex; align-items:center; gap:.75rem; padding:.7rem .9rem; cursor:pointer; color:var(--ink); text-decoration:none; border-bottom:1px solid #f1f5f9; }
.ay-i-row:last-child{ border-bottom:0; }
.ay-i-row.active{ background:#eff6ff; }
.ay-i-ico{ flex:0 0 32px; width:32px; height:32px; border-radius:9px; background:#eff6ff; color:var(--ay); display:flex; align-items:center; justify-content:center; }
.ay-i-row.active .ay-i-ico{ background:#dbeafe; }
.ay-i-tx{ min-width:0; flex:1; }
.ay-i-tx b{ font-weight:600; font-size:.92rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ay-i-tx small{ color:var(--muted); font-size:.77rem; }
.ay-i-go{ color:#cbd5e1; font-size:.8rem; }
.ay-i-ai .ay-i-ico{ background:linear-gradient(135deg,#dbeafe,#ede9fe); }
.ay-i-ai b{ color:var(--ay); }
.ay-i-empty{ padding:1.1rem; color:var(--muted); font-size:.88rem; text-align:center; }
.ay-i-head{ padding:.45rem .9rem; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; background:#f8fafc; }

/* ===== Conteo de guías por categoría ===== */
.ay-cat-count{ margin-left:auto; align-self:center; font-size:.74rem; font-weight:700; color:var(--ay); background:#eff6ff; border-radius:999px; padding:.25rem .7rem; white-space:nowrap; }

/* ===== Detalle con "En esta página" (TOC) ===== */
.ay-detail{ display:grid; grid-template-columns:1fr; gap:1.6rem; max-width:820px; margin:0 auto; }
@media(min-width:980px){ .ay-detail{ grid-template-columns:minmax(0,1fr) 220px; max-width:1080px; align-items:start; } }
.ay-toc{ display:none; }
@media(min-width:980px){ .ay-toc{ display:block; position:sticky; top:84px; } }
.ay-toc-title{ text-transform:uppercase; letter-spacing:.06em; font-size:.7rem; font-weight:700; color:var(--muted); margin:0 0 .7rem .85rem; }
.ay-toc a{ display:block; padding:.4rem .85rem; color:var(--muted); text-decoration:none; border-left:2px solid var(--line); font-size:.85rem; line-height:1.35; transition:color .15s ease, border-color .15s ease; }
.ay-toc a:hover{ color:var(--ay); }
.ay-toc a.active{ color:var(--ay); border-color:var(--ay); font-weight:600; }

/* ===== Barra de progreso de lectura ===== */
.ay-read{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--ay-grad); z-index:1100; transition:width .08s linear; }

/* ===== Academia: rutas por módulo (cursos + línea de avance) ===== */
.ay-continue{ display:flex; align-items:center; gap:.9rem; background:var(--ay-grad); color:#fff; border-radius:16px; padding:.9rem 1.2rem; margin:0 0 1.5rem; text-decoration:none; box-shadow:0 12px 30px rgba(37,99,235,.28); transition:transform .18s ease, box-shadow .18s ease; }
.ay-continue:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(37,99,235,.38); color:#fff; }
.ay-continue-ico{ flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.ay-continue-tx{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.ay-continue-tx small{ opacity:.85; font-size:.75rem; }
.ay-continue-tx b{ font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ay-continue-go{ margin-left:auto; font-size:1.2rem; }

.ay-course{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.4rem 1.6rem; margin-bottom:1.2rem; transition:box-shadow .18s ease; }
.ay-course:hover{ box-shadow:0 10px 30px rgba(15,23,42,.06); }
.ay-course-done{ border-color:#bbf7d0; }
.ay-course-head{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.ay-course-info{ flex:1; min-width:160px; }
.ay-course-info h2{ font-size:1.12rem; font-weight:800; margin:0; }
.ay-course-prog{ text-align:right; min-width:130px; }
.ay-course-pct{ font-weight:800; color:var(--ay); font-size:1.05rem; }
.ay-mini-bar{ height:6px; background:#eff6ff; border-radius:999px; overflow:hidden; margin:.3rem 0; }
.ay-mini-fill{ height:100%; width:0; background:var(--ay-grad); border-radius:999px; transition:width .6s ease; }
.ay-course-count{ color:var(--muted); font-size:.74rem; }

.ay-path{ position:relative; padding:.2rem 0; }
.ay-path::before{ content:""; position:absolute; left:18px; top:24px; bottom:24px; width:2px; background:var(--line); }
.ay-path-fill{ position:absolute; left:18px; top:24px; width:2px; height:0; background:var(--ay-grad); transition:height .6s ease; }
.ay-step{ position:relative; z-index:1; display:flex; gap:.9rem; align-items:center; padding:.3rem 0; }
.ay-step-node{ flex:0 0 38px; width:38px; height:38px; border-radius:50%; background:#fff; border:2px solid var(--line); color:#94a3b8; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; transition:.2s; }
.ay-step-node .chk{ display:none; font-size:1.05rem; }
.ay-step.done .ay-step-node{ background:var(--ay); border-color:var(--ay); color:#fff; }
.ay-step.done .ay-step-node .num{ display:none; }
.ay-step.done .ay-step-node .chk{ display:inline; }
.ay-step.current .ay-step-node{ border-color:var(--ay); color:var(--ay); box-shadow:0 0 0 4px rgba(59,130,246,.16); }
.ay-step-body{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:.5rem .85rem; border:1px solid transparent; border-radius:12px; text-decoration:none; color:inherit; transition:background .15s ease, border-color .15s ease; }
.ay-step-body:hover{ background:#f8fafc; border-color:var(--line); }
.ay-step.current .ay-step-body{ background:#eff6ff; }
.ay-step-title{ font-weight:600; font-size:.95rem; }
.ay-step-meta{ font-size:.78rem; color:var(--muted); margin-top:.1rem; display:flex; gap:.5rem; align-items:center; }
.ay-step-state{ margin-left:auto; font-weight:700; color:var(--ay); }
.ay-step.done .ay-step-state{ color:#16a34a; }
@media(max-width:560px){ .ay-course-prog{ text-align:left; min-width:0; flex:1; } }

/* ===== Página principal: menú de clases lateral (tipo Udemy) ===== */
.ay-home{ display:grid; grid-template-columns:1fr; gap:1.4rem; align-items:start; }
@media(min-width:980px){ .ay-home{ grid-template-columns:290px minmax(0,1fr); } }
.ay-home-main{ min-width:0; }
.ay-nav{ background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 4px 18px rgba(15,23,42,.04); }
@media(min-width:980px){ .ay-nav{ position:sticky; top:18px; max-height:calc(100vh - 36px); overflow-y:auto; } }
.ay-nav-title{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--muted); padding:1rem 1.2rem .3rem; }
.ay-nav-toggle{ display:none; }
.ay-nav-mod{ border-top:1px solid #f1f5f9; }
.ay-nav-mod-head{ display:flex; align-items:center; gap:.6rem; width:100%; background:#fff; border:0; padding:.8rem 1.2rem; cursor:pointer; text-align:left; color:var(--ink); }
.ay-nav-mod-head .ico{ font-size:1.15rem; }
.ay-nav-mod-head .nm{ flex:1; min-width:0; font-weight:700; font-size:.9rem; }
.ay-nav-prog{ display:block; color:var(--muted); font-weight:500; font-size:.72rem; margin-top:.1rem; }
.ay-nav-mod-head .bi-chevron-down{ color:#94a3b8; transition:transform .2s ease; }
.ay-nav-mod.open .ay-nav-mod-head .bi-chevron-down{ transform:rotate(180deg); }
.ay-nav-mod.open .ay-nav-mod-head{ background:#f8fafc; }
.ay-nav-lessons{ list-style:none; margin:0; padding:0 0 .4rem; display:none; }
.ay-nav-mod.open .ay-nav-lessons{ display:block; }
.ay-nav-lessons a{ display:flex; align-items:center; gap:.55rem; padding:.45rem 1.2rem .45rem 1.5rem; text-decoration:none; color:var(--muted); font-size:.83rem; border-left:3px solid transparent; transition:background .15s ease, color .15s ease; }
.ay-nav-lessons a:hover{ background:#eff6ff; color:var(--ay); border-left-color:var(--ay); }
.ay-nav-lessons li.done a{ color:var(--ink); }
.ay-nav-lessons .chk{ flex:0 0 16px; color:#cbd5e1; font-size:.95rem; line-height:1; }
.ay-nav-lessons .chk .full{ display:none; color:#16a34a; }
.ay-nav-lessons li.done .chk .empty{ display:none; }
.ay-nav-lessons li.done .chk .full{ display:inline; }
.ay-nav-lessons .nv-t{ min-width:0; }
@media(max-width:979px){
  .ay-nav-toggle{ display:flex; width:100%; align-items:center; justify-content:space-between; background:#fff; border:0; padding:1rem 1.2rem; font-weight:700; cursor:pointer; color:var(--ink); }
  .ay-nav-toggle .bi-chevron-down{ transition:transform .2s ease; }
  .ay-nav-panel{ display:none; }
  .ay-nav.open .ay-nav-panel{ display:block; border-top:1px solid var(--line); }
  .ay-nav.open .ay-nav-toggle .bi-chevron-down{ transform:rotate(180deg); }
}

/* ===== Course player: temario lateral (estilo Udemy) ===== */
.ay-wrap-wide{ max-width:1140px; }
.ay-player{ display:grid; grid-template-columns:1fr; gap:1.4rem; align-items:start; }
@media(min-width:980px){ .ay-player{ grid-template-columns:310px minmax(0,1fr); } }
.ay-curriculum{ background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 4px 18px rgba(15,23,42,.04); }
@media(min-width:980px){ .ay-curriculum{ position:sticky; top:18px; } }
.ay-curr-toggle{ display:none; }
.ay-curr-head{ display:flex; align-items:center; gap:.7rem; padding:1.1rem 1.2rem .8rem; }
.ay-curr-meta b{ display:block; font-size:.95rem; }
.ay-curr-meta small{ color:var(--muted); font-size:.78rem; }
.ay-curr-bar{ height:6px; background:#eff6ff; margin:0 1.2rem; border-radius:999px; overflow:hidden; }
.ay-curr-fill{ height:100%; width:0; background:var(--ay-grad); transition:width .5s ease; }
.ay-curr-list{ list-style:none; margin:.6rem 0 0; padding:0; }
@media(min-width:980px){ .ay-curr-list{ max-height:calc(100vh - 230px); overflow-y:auto; } }
.ay-curr-item a{ display:flex; align-items:center; gap:.7rem; padding:.7rem 1.2rem; text-decoration:none; color:var(--ink); border-left:3px solid transparent; transition:background .15s ease; }
.ay-curr-item a:hover{ background:#f8fafc; }
.ay-curr-item.current a{ background:#eff6ff; border-left-color:var(--ay); }
.ay-curr-check{ flex:0 0 20px; color:#cbd5e1; font-size:1.1rem; line-height:1; }
.ay-curr-check .full{ display:none; color:#16a34a; }
.ay-curr-item.done .ay-curr-check .empty{ display:none; }
.ay-curr-item.done .ay-curr-check .full{ display:inline; }
.ay-curr-tx{ flex:1; min-width:0; }
.ay-curr-tx .t{ font-size:.86rem; font-weight:600; display:block; }
.ay-curr-item.current .ay-curr-tx .t{ color:var(--ay); }
.ay-curr-tx small{ color:var(--muted); font-size:.74rem; }
.ay-curr-now{ color:var(--ay); font-size:1.1rem; }

@media(max-width:979px){
  .ay-curr-toggle{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:.5rem; background:#fff; border:0; padding:1rem 1.2rem; font-weight:700; font-size:.95rem; cursor:pointer; color:var(--ink); }
  .ay-curr-toggle .bi-chevron-down{ transition:transform .2s ease; }
  .ay-curr-panel{ display:none; border-top:1px solid var(--line); }
  .ay-curriculum.open .ay-curr-panel{ display:block; }
  .ay-curriculum.open .ay-curr-toggle .bi-chevron-down{ transform:rotate(180deg); }
}

/* Anterior / Siguiente lección */
.ay-prevnext{ display:flex; justify-content:space-between; gap:1rem; margin-top:1.4rem; }
.ay-prevnext .pn{ display:flex; align-items:center; gap:.65rem; flex:1 1 0; min-width:0; background:#fff; border:1px solid var(--line); border-radius:14px; padding:.8rem 1rem; text-decoration:none; color:inherit; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.ay-prevnext .pn:hover{ transform:translateY(-2px); border-color:#bfdbfe; box-shadow:0 8px 20px rgba(37,99,235,.10); }
.ay-prevnext .pn.next{ justify-content:flex-end; text-align:right; }
.ay-prevnext .pn small{ color:var(--muted); font-size:.72rem; display:block; }
.ay-prevnext .pn b{ font-size:.88rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ay-prevnext > span{ flex:1 1 0; }
@media(max-width:560px){ .ay-prevnext .pn b{ display:none; } .ay-prevnext .pn{ flex:0 0 auto; } }

/* ===== Quiz ===== */
.ay-quiz{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.6rem 1.8rem; box-shadow:0 4px 18px rgba(15,23,42,.04); }
.ay-quiz-head{ display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.2rem; }
.ay-quiz-head h1{ font-size:1.4rem; font-weight:800; margin:0; }
.ay-quiz-head p{ color:var(--muted); font-size:.9rem; margin:.2rem 0 0; }
.ay-q{ border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem; margin:0 0 1rem; transition:border-color .15s, background .15s; }
.ay-q legend{ font-weight:700; font-size:.98rem; padding:0 .3rem; }
.ay-opt{ display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem; border-radius:10px; cursor:pointer; transition:background .12s; }
.ay-opt:hover{ background:#f8fafc; }
.ay-opt input{ accent-color:var(--ay); width:18px; height:18px; }
.ay-q.ok{ border-color:#bbf7d0; background:#f0fdf4; }
.ay-q.bad{ border-color:#fecaca; background:#fef2f2; }
.ay-quiz-btn{ display:inline-flex; align-items:center; gap:.5rem; background:var(--ay-grad); color:#fff; border:0; border-radius:12px; padding:.7rem 1.2rem; font-weight:700; cursor:pointer; text-decoration:none; transition:filter .15s ease, transform .15s ease; margin-top:.4rem; }
.ay-quiz-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); color:#fff; }
.ay-quiz-btn.ghost{ background:#fff; color:var(--ay); border:1px solid var(--line); }
.ay-quiz-result{ margin-top:1.2rem; border-radius:14px; padding:1.2rem; text-align:center; }
.ay-quiz-result .big{ font-size:1.4rem; font-weight:800; margin-bottom:.3rem; }
.ay-quiz-result.pass{ background:#f0fdf4; border:1px solid #bbf7d0; }
.ay-quiz-result.fail{ background:#fff7ed; border:1px solid #fed7aa; }

/* ===== Certificado ===== */
.ay-cert{ background:#fff; border-radius:18px; padding:1rem; box-shadow:0 10px 40px rgba(15,23,42,.12); }
.ay-cert-border{ border:3px solid var(--ay); border-radius:14px; padding:2.4rem 2rem; text-align:center; position:relative;
  background:radial-gradient(circle at 12% 0%, rgba(96,165,250,.10), transparent 42%), radial-gradient(circle at 88% 100%, rgba(37,99,235,.10), transparent 42%); }
.ay-cert-logo{ height:46px; margin-bottom:1rem; }
.ay-cert-kicker{ text-transform:uppercase; letter-spacing:.25em; font-size:.8rem; font-weight:700; color:var(--ay); }
.ay-cert-sub{ color:var(--muted); margin-top:1.2rem; font-size:.85rem; }
.ay-cert-name{ font-size:2rem; font-weight:800; margin:.2rem 0; font-family:Georgia, "Times New Roman", serif; }
.ay-cert-text{ color:var(--muted); font-size:.9rem; }
.ay-cert-module{ font-size:1.3rem; font-weight:800; color:var(--ink); margin:.4rem 0 1.6rem; }
.ay-cert-foot{ display:flex; justify-content:space-around; align-items:flex-end; gap:1rem; margin-top:1.4rem; }
.ay-cert-foot > div{ flex:1; }
.ay-cert-foot .ln{ display:block; height:1px; background:#cbd5e1; margin-bottom:.3rem; }
.ay-cert-foot small{ display:block; color:var(--muted); font-size:.7rem; }
.ay-cert-foot b{ font-size:.95rem; }
.ay-cert-seal{ font-size:2.4rem; flex:0 0 auto !important; }
.ay-cert-actions{ display:flex; gap:.7rem; justify-content:center; margin-top:1.2rem; }
.ay-cert-lock{ text-align:center; background:#fff; border:1px solid var(--line); border-radius:18px; padding:2.5rem 1.5rem; }
.ay-cert-lock .ico{ font-size:3rem; }
.ay-cert-lock h2{ font-weight:800; margin:.6rem 0 .3rem; }
.ay-cert-lock p{ color:var(--muted); }

/* ===== Logros / medallas ===== */
.ay-badges{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.1rem 1.3rem; margin:0 0 1.2rem; }
.ay-badges h3{ font-size:1rem; font-weight:800; margin:0 0 .8rem; display:flex; gap:.5rem; align-items:center; }
.ay-badge-grid{ display:flex; gap:.8rem; flex-wrap:wrap; }
.ay-badge{ flex:1 1 130px; min-width:118px; text-align:center; border:1px solid var(--line); border-radius:14px; padding:.9rem .6rem; opacity:.5; filter:grayscale(1); transition:opacity .2s ease, filter .2s ease, border-color .2s ease; }
.ay-badge.on{ opacity:1; filter:none; border-color:#bfdbfe; background:#f8fbff; }
.ay-badge .em{ font-size:1.8rem; }
.ay-badge .bt{ font-weight:700; font-size:.82rem; margin-top:.3rem; }
.ay-badge .bd{ font-size:.72rem; color:var(--muted); }

/* ===== Pie de curso (quiz/certificado) ===== */
.ay-course-foot{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--line); }
.ay-course-foot a{ display:inline-flex; align-items:center; gap:.4rem; font-size:.83rem; font-weight:700; text-decoration:none; border-radius:10px; padding:.45rem .85rem; border:1px solid var(--line); color:var(--ay); transition:background .15s ease, border-color .15s ease; }
.ay-course-foot a:hover{ background:#eff6ff; border-color:#bfdbfe; }
.ay-curr-foot{ display:flex; gap:.5rem; flex-wrap:wrap; padding:.8rem 1.2rem; border-top:1px solid var(--line); }
.ay-curr-foot a{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:700; text-decoration:none; color:var(--ay); border:1px solid var(--line); border-radius:9px; padding:.4rem .7rem; transition:background .15s ease, border-color .15s ease; }
.ay-curr-foot a:hover{ background:#eff6ff; border-color:#bfdbfe; }

/* Toast de logro */
.ay-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:#0f172a; color:#fff; border-radius:14px; padding:.9rem 1.2rem; box-shadow:0 16px 40px rgba(0,0,0,.3); z-index:100001; display:flex; align-items:center; gap:.8rem; opacity:0; transition:.3s ease; max-width:92vw; }
.ay-toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
.ay-toast a{ color:#93c5fd; font-weight:700; text-decoration:none; white-space:nowrap; }

/* Impresión: solo el certificado */
@media print{
  body * { visibility:hidden !important; }
  .ay-cert, .ay-cert * { visibility:visible !important; }
  .ay-cert{ position:absolute; left:0; top:0; width:100%; box-shadow:none; }
  .no-print{ display:none !important; }
}

/* Accesibilidad: respeta reduce-motion (desactiva transforms/animaciones) */
@media (prefers-reduced-motion: reduce){
  .ay-card, .ay-art, .ay-back, .ay-back .bi, .ay-art-go, .ay-card::before, .ay-feedback button, .ay-prog-fill,
  .ay-mini-fill, .ay-path-fill, .ay-continue, .ay-step-node, .ay-course, .ay-curr-fill, .ay-prevnext .pn,
  .ay-curr-toggle .bi-chevron-down{ transition:none !important; }
  .ay-card:hover, .ay-art:hover, .ay-back:hover, .ay-continue:hover, .ay-prevnext .pn:hover{ transform:none !important; }
  .ay-ia-loading span{ animation:none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK PREMIUM OVERRIDE — mismo lenguaje que el modal de login (login-modal-dark)
   Dark slate + azul brand (#3b82f6/#60a5fa), glow azul, bordes celestes sutiles.
   ════════════════════════════════════════════════════════════════════════════ */
.ay-body{
  --ink:#e8eef9;
  --muted:#94a3b8;
  --line:rgba(148,197,253,.14);
  --soft:#070c18;
  --ay:#3b82f6; --ay2:#60a5fa;
  background:
    radial-gradient(1100px 560px at 50% -8%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(900px 520px at 88% 6%, rgba(96,165,250,.08), transparent 55%),
    #070c18 !important;
  color:var(--ink);
}

/* ── Superficie de cristal oscuro reutilizable ── */
.ay-body .ay-card,
.ay-body .ay-art,
.ay-body .ay-catbox,
.ay-body .ay-doc,
.ay-body .ay-related,
.ay-body .ay-progreso,
.ay-body .ay-askpage,
.ay-body .ay-course,
.ay-body .ay-ia-card{
  background:linear-gradient(160deg, rgba(15,23,42,.74) 0%, rgba(22,32,50,.74) 100%);
  border:1px solid var(--line);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.55);
}
.ay-body .ay-card:hover,
.ay-body .ay-art:hover,
.ay-body .ay-catbox:hover,
.ay-body .ay-course:hover{
  border-color:rgba(96,165,250,.45);
  box-shadow:0 16px 38px -14px rgba(0,0,0,.7), 0 0 0 1px rgba(96,165,250,.16), 0 0 40px -22px rgba(59,130,246,.5);
}
.ay-body .ay-ia-card{ border-color:rgba(96,165,250,.30); }

/* ── HÉROE: igual que el contenedor del modal de login ── */
.ay-body .ay-hero{
  background:linear-gradient(160deg,#0f172a 0%,#1e293b 60%,#162032 100%);
  border:1px solid rgba(148,197,253,.18);
  border-top:2px solid #3b82f6;
  box-shadow:0 25px 60px -12px rgba(0,0,0,.6), 0 0 70px -24px rgba(59,130,246,.4);
}
.ay-body .ay-hero::before{ background:radial-gradient(closest-side, rgba(96,165,250,.22), transparent 70%); }
.ay-body .ay-hero::after{ background:radial-gradient(closest-side, rgba(59,130,246,.16), transparent 70%); }

/* ── Buscador ── */
.ay-body .ay-search input{
  background:rgba(8,13,26,.66);
  color:#e8eef9;
  border:2px solid rgba(148,197,253,.20);
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.ay-body .ay-search input::placeholder{ color:#7c8aa3; }
.ay-body .ay-search input:focus{ border-color:#3b82f6; box-shadow:0 14px 36px rgba(0,0,0,.5), 0 0 0 4px rgba(59,130,246,.18); }
.ay-body .ay-search .ay-ico{ color:#60a5fa; }
.ay-body .ay-kbd{ background:rgba(148,197,253,.10); border-color:rgba(148,197,253,.22); color:#cbd5e1; }

/* ── Botón Volver ── */
.ay-body .ay-back{
  background:rgba(15,23,42,.7); color:#cbd5e1; border:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.ay-body .ay-back:hover{ color:#93c5fd; border-color:rgba(96,165,250,.45); box-shadow:0 10px 26px rgba(0,0,0,.5); }

/* ── Burbujas de icono ── */
.ay-body .ay-card .ay-cat,
.ay-body .ay-cat-ico,
.ay-body .ay-art-ico,
.ay-body .ay-i-ico{ background:rgba(59,130,246,.16); color:#93c5fd; }

/* ── Chips ── */
.ay-body .ay-chip{ background:rgba(59,130,246,.16); color:#93c5fd; }
.ay-body .ay-chip.t{ background:rgba(16,185,129,.16); color:#6ee7b7; }
.ay-body .ay-chip.d-facil{ background:rgba(16,185,129,.18); color:#6ee7b7; }
.ay-body .ay-chip.d-media{ background:rgba(245,158,11,.18); color:#fcd34d; }
.ay-body .ay-chip.d-avanzada{ background:rgba(239,68,68,.18); color:#fca5a5; }
.ay-body .ay-cat-count{ background:rgba(59,130,246,.16); color:#93c5fd; }

/* ── Dropdown de búsqueda instantánea ── */
.ay-body .ay-instant{ background:#0c1426; border:1px solid var(--line); box-shadow:0 24px 60px rgba(0,0,0,.6); }
.ay-body .ay-i-row.active{ background:rgba(59,130,246,.14); }
.ay-body .ay-i-head{ background:rgba(148,197,253,.06); color:#7c8aa3; }

/* ── Barras / mini-superficies ── */
.ay-body .ay-summary > div{ background:rgba(8,13,26,.6); border-color:var(--line); }
.ay-body .ay-prog-bar,
.ay-body .ay-mini-bar{ background:rgba(148,197,253,.12); }
.ay-body .ay-step-node{ background:rgba(15,23,42,.8); border-color:var(--line); color:#7c8aa3; }
.ay-body .ay-feedback button{ background:rgba(15,23,42,.7); border-color:var(--line); color:#cbd5e1; }

/* ── Sugerencias del héroe (ya translúcidas, refuerzo de contraste) ── */
.ay-body .ay-suggest a{ background:rgba(148,197,253,.14); color:#e8eef9; }

/* ── Badge "leída" ── */
.ay-body .ay-card.ay-leido::after,
.ay-body .ay-art.ay-leido::after{ background:rgba(16,185,129,.18); color:#6ee7b7; }

/* ── Cuerpo del artículo (clase .guia) ── */
.ay-body .guia .nota{ background:rgba(16,185,129,.10); border-left-color:#10b981; color:#d1fae5; }
.ay-body .guia .cuento{ background:rgba(251,146,60,.10); border-left-color:#fb923c; color:#fde9d6; }
.ay-body .guia .aviso{ background:rgba(245,158,11,.10); border-left-color:#f59e0b; color:#fef3c7; }
.ay-body .guia th{ background:rgba(148,197,253,.08); color:#e8eef9; }
.ay-body .guia td{ border-color:var(--line); }
.ay-body .guia code{ background:#0b1220; color:#93c5fd; }
.ay-body .guia .ay-checklist li:hover{ background:rgba(148,197,253,.06); }
.ay-body .guia .ay-checklist li.done{ background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.35); color:#cbd5e1; }

/* ── Citas de la IA ── */
.ay-body .ay-ia-cites a{ color:#93c5fd; border-color:var(--line); }
.ay-body .ay-ia-cites a:hover{ background:rgba(59,130,246,.14); border-color:rgba(96,165,250,.45); }

/* ── Sidebar de módulos (tipo Udemy) ── */
.ay-body .ay-nav{ background:linear-gradient(160deg, rgba(15,23,42,.74) 0%, rgba(22,32,50,.74) 100%); border:1px solid var(--line); box-shadow:0 10px 30px -12px rgba(0,0,0,.55); }
.ay-body .ay-nav-title{ color:#8aa0bf; }
.ay-body .ay-nav-mod{ border-top:1px solid rgba(148,197,253,.10); }
.ay-body .ay-nav-mod-head{ background:transparent; color:var(--ink); }
.ay-body .ay-nav-mod.open .ay-nav-mod-head{ background:rgba(59,130,246,.12); }
.ay-body .ay-nav-mod-head .nm{ color:var(--ink); }
.ay-body .ay-nav-prog{ color:#8aa0bf; }
.ay-body .ay-nav-mod-head .bi-chevron-down{ color:#64748b; }
.ay-body .ay-nav-toggle{ background:transparent; color:var(--ink); }
.ay-body .ay-nav-lessons a{ color:#b3c0d6; }
.ay-body .ay-nav-lessons a:hover{ background:rgba(59,130,246,.12); color:#93c5fd; border-left-color:#3b82f6; }
.ay-body .ay-nav-lessons li.done a{ color:var(--ink); }
.ay-body .ay-nav-lessons .chk{ color:#475569; }
.ay-body .ay-nav-lessons .chk .full{ color:#34d399; }

/* ── Logros / medallas ── */
.ay-body .ay-badges{ background:linear-gradient(160deg, rgba(15,23,42,.74) 0%, rgba(22,32,50,.74) 100%); border:1px solid var(--line); box-shadow:0 10px 30px -12px rgba(0,0,0,.55); }
.ay-body .ay-badge{ background:rgba(8,13,26,.5); border:1px solid var(--line); }
.ay-body .ay-badge.on{ background:rgba(59,130,246,.14); border-color:rgba(96,165,250,.45); }
.ay-body .ay-badge .bt{ color:var(--ink); }
.ay-body .ay-badge .bd{ color:#8aa0bf; }

/* ── Progreso de la academia (texto sobre cristal oscuro) ── */
.ay-body .ay-progreso .ay-prog-top,
.ay-body .ay-prog-txt{ color:var(--ink); }
.ay-body .ay-prog-pct,
.ay-body .ay-prog-txt .ay-prog-n{ color:#60a5fa; }

/* ── Currículo del artículo (sidebar de lecciones) ── */
.ay-body .ay-curriculum{ background:linear-gradient(160deg, rgba(15,23,42,.74) 0%, rgba(22,32,50,.74) 100%); border:1px solid var(--line); box-shadow:0 10px 30px -12px rgba(0,0,0,.55); }
.ay-body .ay-curr-toggle{ background:transparent; color:var(--ink); }
.ay-body .ay-curr-meta b{ color:var(--ink); }
.ay-body .ay-curr-meta small{ color:#8aa0bf; }
.ay-body .ay-curr-bar{ background:rgba(148,197,253,.12); }
.ay-body .ay-curr-item a{ color:var(--ink); }
.ay-body .ay-curr-item a:hover{ background:rgba(59,130,246,.10); }
.ay-body .ay-curr-item.current a{ background:rgba(59,130,246,.16); border-left-color:#3b82f6; }
.ay-body .ay-curr-check{ color:#475569; }
.ay-body .ay-curr-check .full{ color:#34d399; }
.ay-body .ay-curr-tx .t{ color:var(--ink); }
.ay-body .ay-curr-item.current .ay-curr-tx .t{ color:#93c5fd; }
.ay-body .ay-curr-tx small{ color:#8aa0bf; }
.ay-body .ay-curr-now{ color:#60a5fa; }
.ay-body .ay-curr-foot{ border-top-color:var(--line); }
.ay-body .ay-curr-foot a{ color:#93c5fd; border-color:var(--line); }
.ay-body .ay-curr-foot a:hover{ background:rgba(59,130,246,.14); border-color:rgba(96,165,250,.45); }

/* ── Navegación anterior / siguiente ── */
.ay-body .ay-prevnext .pn{ background:linear-gradient(160deg, rgba(15,23,42,.74) 0%, rgba(22,32,50,.74) 100%); border:1px solid var(--line); }
.ay-body .ay-prevnext .pn:hover{ border-color:rgba(96,165,250,.45); box-shadow:0 8px 20px rgba(0,0,0,.5); }
.ay-body .ay-prevnext .pn small{ color:#8aa0bf; }

/* ── Rutas de aprendizaje: pasos (hover y estado actual con contraste) ── */
.ay-body .ay-step-title{ color:var(--ink); }
.ay-body .ay-step-body:hover{ background:rgba(59,130,246,.12); border-color:rgba(96,165,250,.30); }
.ay-body .ay-step.current .ay-step-body{ background:rgba(59,130,246,.16); border-color:rgba(96,165,250,.30); }
.ay-body .ay-step.done .ay-step-state{ color:#34d399; }
.ay-body .ay-course-done{ border-color:rgba(16,185,129,.40); }

/* ── Botones de pie de curso (Quiz del módulo / Certificado) ── */
.ay-body .ay-course-foot{ border-top-color:var(--line); }
.ay-body .ay-course-foot a{ color:#93c5fd; border-color:var(--line); }
.ay-body .ay-course-foot a:hover{ background:rgba(59,130,246,.14); border-color:rgba(96,165,250,.45); }

/* ── Página de Quiz ── */
.ay-body .ay-quiz{ background:linear-gradient(160deg, rgba(15,23,42,.74) 0%, rgba(22,32,50,.74) 100%); border:1px solid var(--line); box-shadow:0 10px 30px -12px rgba(0,0,0,.55); }
.ay-body .ay-quiz-head p{ color:#8aa0bf; }
.ay-body .ay-opt:hover{ background:rgba(59,130,246,.12); }

/* ════════════════════════════════════════════════════════════════════════════
   MÓVIL — refinamiento responsive (hero, buscador, sugerencias y secciones)
   Solo diseño: compacta alturas, mejora el buscador y la legibilidad táctil.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width:600px){
  .ay-body .ay-wrap{ padding:1.1rem .8rem 3rem; }

  /* Botón "Volver": más compacto y alineado con la barra de progreso superior */
  .ay-body .ay-back{ top:12px; left:12px; padding:.5rem .72rem; font-size:.85rem; }

  /* Hero: menos altura desperdiciada, jerarquía más ajustada */
  .ay-body .ay-hero{ padding:2.3rem 1.15rem 1.7rem; border-radius:22px; }
  .ay-body .ay-logo{ height:40px; margin-bottom:.75rem; }
  .ay-body .ay-hero h1{ font-size:1.42rem; line-height:1.22; margin:0 0 .35rem; }
  .ay-body .ay-hero p{ font-size:.88rem; margin:0 0 1.05rem; }

  /* Buscador: más compacto y placeholder que no se corte feo a la derecha
     (corte limpio con … si excede; en móvil el JS usa un placeholder corto) */
  .ay-body .ay-search input{
    font-size:.92rem; padding:.8rem .9rem .8rem 2.55rem; border-radius:14px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .ay-body .ay-search .ay-ico{ left:.85rem; font-size:1rem; }
  .ay-body .ay-search .ay-kbd{ display:none; } /* en móvil no aplica el atajo Ctrl K */

  /* Sugerencias: etiqueta en su propia línea y chips centrados/"tocables" */
  .ay-body .ay-suggest{ gap:.4rem; margin-top:.9rem; }
  .ay-body .ay-suggest > span{ flex-basis:100%; text-align:center; margin-bottom:.15rem; }
  .ay-body .ay-suggest a{ padding:.4rem .9rem; }

  /* Títulos de sección y tarjetas con espaciado adaptado al móvil */
  .ay-body .ay-sec-title{ font-size:1.08rem; margin:1.8rem 0 .9rem; }
  .ay-body .ay-progreso,
  .ay-body .ay-badges{ padding:1rem 1.05rem; }
  .ay-body .ay-course,
  .ay-body .ay-catbox{ padding:1.15rem 1.1rem; }
  .ay-body .ay-course-head{ gap:.7rem; }
  .ay-body .ay-cat-ico{ flex:0 0 42px; width:42px; height:42px; font-size:1.3rem; }

  /* Toggle "Contenido del curso": más alto y fácil de pulsar */
  .ay-body .ay-nav-toggle{ padding:.95rem 1.05rem; }
}

/* Teléfonos muy estrechos (≤360 px) */
@media (max-width:360px){
  .ay-body .ay-hero{ padding:2rem 1rem 1.5rem; }
  .ay-body .ay-hero h1{ font-size:1.28rem; }
  .ay-body .ay-hero p{ font-size:.84rem; }
  .ay-body .ay-search input{ font-size:.9rem; padding-left:2.5rem; }
  /* Logros: 2 por fila siempre legibles */
  .ay-body .ay-badge{ flex:1 1 calc(50% - .4rem); min-width:0; padding:.8rem .5rem; }
  .ay-body .ay-badge .em{ font-size:1.6rem; }
  .ay-body .ay-badge .bt{ font-size:.78rem; }
  .ay-body .ay-badge .bd{ font-size:.68rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   CONTRASTE EN TEMA OSCURO — Quiz y Certificado
   El dark-override no cubría los estados de pregunta/resultado (quedaban con
   fondo claro y texto claro = ilegible) ni el texto del certificado (papel
   blanco con texto claro heredado). Aquí se corrige sin tocar el HTML.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Quiz: tarjetas de pregunta sobre superficie de cristal oscuro ── */
.ay-body .ay-q{
  background:linear-gradient(160deg, rgba(15,23,42,.72) 0%, rgba(22,32,50,.72) 100%);
  border:1px solid var(--line);
}
.ay-body .ay-q legend{ color:var(--ink); }
.ay-body .ay-opt{ color:var(--ink); }
.ay-body .ay-opt:hover{ background:rgba(59,130,246,.14); }

/* Estados tras "Calificar": tintes oscuros legibles (antes pasteles claros) */
.ay-body .ay-q.ok{ background:rgba(16,185,129,.13); border-color:rgba(16,185,129,.45); }
.ay-body .ay-q.bad{ background:rgba(239,68,68,.13); border-color:rgba(239,68,68,.45); }
.ay-body .ay-q.ok legend,
.ay-body .ay-q.ok .ay-opt,
.ay-body .ay-q.bad legend,
.ay-body .ay-q.bad .ay-opt{ color:var(--ink); }

/* ── Quiz: caja de resultado (Aprobado / Casi…) ── */
.ay-body .ay-quiz-result{ color:var(--ink); }
.ay-body .ay-quiz-result.pass{ background:rgba(16,185,129,.13); border:1px solid rgba(16,185,129,.45); }
.ay-body .ay-quiz-result.fail{ background:rgba(251,146,60,.13); border:1px solid rgba(251,146,60,.45); }
.ay-body .ay-quiz-result .big{ color:var(--ink); }
.ay-body .ay-quiz-result p{ color:#cbd5e1; }

/* Botón "fantasma" (Reintentar / Volver): cristal oscuro en vez de blanco */
.ay-body .ay-quiz-btn.ghost{
  background:rgba(15,23,42,.7); color:#93c5fd; border:1px solid var(--line);
}
.ay-body .ay-quiz-btn.ghost:hover{ background:rgba(59,130,246,.14); border-color:rgba(96,165,250,.45); color:#bfdbfe; }

/* ── Certificado: el papel sigue blanco; se oscurece el TEXTO para que sea
   legible (y queda perfecto también al imprimir/descargar PDF) ── */
.ay-body .ay-cert-name{ color:#0f172a; }
.ay-body .ay-cert-module{ color:#0f172a; }
.ay-body .ay-cert-text{ color:#475569; }
.ay-body .ay-cert-sub{ color:#475569; }
.ay-body .ay-cert-foot small{ color:#64748b; }
.ay-body .ay-cert-foot b{ color:#0f172a; }
.ay-body .ay-cert-foot .ln{ background:#cbd5e1; }

/* ── Certificado bloqueado (aún sin aprobar): tarjeta de cristal oscuro ── */
.ay-body .ay-cert-lock{
  background:linear-gradient(160deg, rgba(15,23,42,.74) 0%, rgba(22,32,50,.74) 100%);
  border:1px solid var(--line);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.55);
}
.ay-body .ay-cert-lock h2{ color:var(--ink); }
.ay-body .ay-cert-lock p{ color:var(--muted); }

/* ── Resaltado de término buscado: texto oscuro sobre el amarillo (antes
   heredaba el texto claro del tema oscuro = ilegible) ── */
.ay-body mark{ color:#0f172a; }

/* ── Input "¿Tienes una pregunta sobre esta página?": cristal oscuro como el
   buscador principal (antes input blanco con texto claro heredado) ── */
.ay-body .ay-ask-form input{
  background:rgba(8,13,26,.66); color:#e8eef9; border-color:rgba(148,197,253,.20);
}
.ay-body .ay-ask-form input::placeholder{ color:#7c8aa3; }
.ay-body .ay-ask-form input:focus{ border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.18); }

/* ════════════════════════════════════════════════════════════════════════════
   FIX DESBORDE — la página no carga reset, así que los controles con width:100%
   + padding + borde se salían del contenedor (el buscador "se pasaba" a los
   lados). border-box los mantiene dentro de su caja.
   ════════════════════════════════════════════════════════════════════════════ */
.ay-body input, .ay-body textarea, .ay-body select, .ay-body button{ box-sizing:border-box; }
.ay-search, .ay-search input{ box-sizing:border-box; max-width:100%; }

/* ════════════════════════════════════════════════════════════════════════════
   MENÚ MÓVIL INFERIOR del Centro de Ayuda (mismo lenguaje que la home):
   Volver + accesos rápidos. Solo se muestra en móvil.
   ════════════════════════════════════════════════════════════════════════════ */
.ay-mobnav{ display:none; }
@media (max-width:600px){
  .ay-mobnav{
    position:fixed; left:0; right:0; bottom:0; z-index:1200;
    display:flex; align-items:stretch; justify-content:space-around;
    background:rgba(10,16,30,.92);
    -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
    border-top:1px solid rgba(148,197,253,.16);
    box-shadow:0 -10px 30px rgba(0,0,0,.5);
    padding-bottom:env(safe-area-inset-bottom, 0);
  }
  .ay-mobnav a, .ay-mobnav button{
    flex:1 1 0; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
    background:none; border:0; cursor:pointer; text-decoration:none;
    color:#9fb1cc; font-size:.66rem; font-weight:600; letter-spacing:.02em;
    padding:.5rem .2rem; min-height:60px; font-family:inherit;
    transition:color .15s ease, transform .15s ease;
  }
  .ay-mobnav a:active, .ay-mobnav button:active{ color:#60a5fa; transform:translateY(1px); }
  .ay-mobnav .bi{ font-size:1.22rem; line-height:1; }
  .ay-mobnav span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .ay-mobnav a.ay-mobnav-back{ color:#93c5fd; }

  /* En móvil el menú inferior reemplaza al botón flotante "Volver" superior */
  .ay-body .ay-back{ display:none !important; }
  /* Espacio para que el contenido no quede tapado por la barra inferior */
  .ay-body .ay-wrap{ padding-bottom:86px; }
}