/* Demo · Mejoras y oportunidades de tus cursos (academias) · prefijo dme- · app grande a la izquierda; internet y WhatsApp a la derecha */
.d-mej .app{ left:24px; top:22px; width:636px; height:576px; }
.d-mej .toast{ left:24px; right:340px; margin:0 auto; width:fit-content; top:66px; bottom:auto; }   /* arriba: abajo taparía «Lo que puedes conseguir» */

.dme-area{ position:relative; flex:1; min-width:0; }
.dme-vista{ position:absolute; inset:0; padding:16px 20px 14px; display:flex; flex-direction:column; gap:10px; background:#fff; overflow:hidden; }
.dme-area:not(.v2) .dme-inf, .dme-area.v2 .dme-anal{ display:none; }
.dme-area.v2 .dme-inf{ animation:entra .5s var(--ease) both; }
.dme-cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.dme-cab b{ display:block; margin-top:3px; font-size:18px; font-weight:600; letter-spacing:-.015em; }
.dme-cab em{ display:block; margin-top:2px; font-style:normal; font-size:11.5px; color:var(--tinta-60); }
.dme-hora, .dme-nuevo{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:999px; font-size:11.5px; font-weight:500; white-space:nowrap; }
.dme-hora{ background:var(--nieve); color:var(--tinta-60); }
.dme-nuevo{ background:var(--verde-agua); color:var(--verde-osc); }
.dme-hora .ico, .dme-nuevo .ico{ width:12px; height:12px; }

/* Análisis: barra de 5 tramos y una fila por cosa que revisa */
.dme-prog{ display:grid; grid-template-columns:repeat(5, 1fr); gap:4px; }
.dme-prog i{ height:4px; border-radius:2px; background:var(--nieve-2); transition:background .5s; }
.dme-prog i.ok{ background:var(--verde); }
.dme-mods{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.dme-mod{ display:grid; grid-template-columns:32px 1fr 24px; align-items:center; gap:11px; padding:7px 12px; border:1px solid var(--linea); border-radius:10px; background:#fff; }
.dme-ico{ width:32px; height:32px; border-radius:9px; background:var(--nieve); color:var(--tinta-80); display:grid; place-items:center; }
.dme-ico .ico{ width:15px; height:15px; }
.dme-mod b{ display:block; font-size:12.6px; font-weight:600; }
.dme-hall{ margin:1px 0 0; font-size:11.8px; line-height:1.38; color:var(--tinta-80); border-radius:4px; }
.dme-hall .vacio{ color:var(--verde-osc); font-weight:500; }
.dme-est{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; }
.dme-est .ico{ display:none; width:12px; height:12px; stroke-width:2.8; }
.dme-gira{ width:16px; height:16px; border-radius:50%; border:2px solid var(--verde-agua); border-top-color:var(--verde); animation:dme-gira .8s linear infinite; }
@keyframes dme-gira{ to{ transform:rotate(360deg); } }
.dme-est.ok{ background:var(--verde-agua); color:var(--verde-osc); }
.dme-est.ok .ico{ display:block; }
.dme-est.ok .dme-gira{ display:none; }
.dme-mod:has(.dme-est:not(.ok)){ border-color:rgba(60,193,160,.45); box-shadow:0 0 0 3px rgba(60,193,160,.1); }

/* Dónde se para la gente: alumnos que siguen en cada vídeo del módulo 3 */
.dme-ret{ padding:9px 12px 8px; border-radius:10px; background:var(--nieve); }
.dme-ret-cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.dme-ret-al{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:#c2410c; background:#fff1e8; padding:3px 8px; border-radius:999px; }
.dme-ret-al .ico{ width:12px; height:12px; }
.dme-barras{ display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; align-items:end; height:62px; }
.dme-barras span{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:2px; }
.dme-barras i{ display:block; width:100%; height:calc(var(--v) * .44); border-radius:4px 4px 0 0; background:var(--verde); opacity:.75; }
.dme-barras em{ font-style:normal; font-size:9.5px; color:var(--tinta-60); order:-1; }
.dme-barras b{ font-size:9.5px; font-weight:600; color:var(--tinta-45); }
.dme-barras .malo i{ background:#e5484d; opacity:1; }
.dme-barras .malo em, .dme-barras .malo b{ color:#c62828; }
.dme-guardado{ display:flex; align-items:center; gap:7px; margin:0; padding:8px 12px; border-radius:9px; background:var(--tinta); color:#fff; font-size:12px; }
.dme-guardado b{ font-weight:600; color:var(--verde); }
.dme-guardado .ico{ width:13px; height:13px; color:var(--verde); stroke-width:2.8; }

/* Internet: lo que va leyendo */
.dme-web{ position:absolute; z-index:3; left:676px; top:22px; width:300px; height:576px; display:flex; flex-direction:column; background:#fff; border:1px solid var(--linea); border-radius:14px; box-shadow:var(--sombra-3); overflow:hidden; }
.dme-web-cab{ flex:none; display:flex; align-items:center; gap:9px; height:46px; padding:0 14px; border-bottom:1px solid var(--linea); }
.dme-lupa{ width:26px; height:26px; border-radius:7px; background:var(--tinta); color:#fff; display:grid; place-items:center; }
.dme-lupa .ico{ width:14px; height:14px; }
.dme-web-cab b{ font-size:13px; font-weight:600; }
.dme-cont{ margin-left:auto; font-size:11px; color:var(--tinta-45); border-radius:4px; }
.dme-fuentes{ position:relative; flex:1; margin:0; padding:4px 10px; list-style:none; display:flex; flex-direction:column; }
.dme-fuentes:not(:has(.dme-fuente:not(.off)))::before{ content:'Primero revisa tus cursos…'; position:absolute; inset:0; display:grid; place-items:center; font-size:12px; color:var(--tinta-30); }
.dme-fuente{ display:grid; grid-template-columns:24px 1fr; align-items:center; gap:9px; padding:6px 2px; border-bottom:1px dashed var(--linea); }
.dme-fav{ width:24px; height:24px; border-radius:6px; background:var(--c); color:#fff; font-size:11.5px; font-weight:700; display:grid; place-items:center; }
.dme-fuente b{ display:block; font-size:11.2px; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dme-fuente em{ display:block; font-style:normal; font-size:10.4px; line-height:1.32; color:var(--tinta-60); }
.dme-tipo{ display:inline-block; margin-right:5px; font-size:9px; font-weight:600; padding:0 6px; border-radius:999px; background:var(--verde-agua); color:var(--verde-osc); white-space:nowrap; line-height:15px; }
.dme-tipo.comp{ background:var(--ambar-fondo, #fdf3e1); color:var(--ambar, #b7791f); }
.dme-ideas{ flex:none; display:flex; align-items:center; gap:6px; margin:0; padding:9px 14px; border-top:1px solid var(--linea); background:var(--verde-agua); color:var(--verde-osc); font-size:11.5px; font-weight:600; }
.dme-ideas .ico{ width:12px; height:12px; stroke-width:2.8; }

/* WhatsApp con el dueño, encima de la columna de internet */
.dme-wa{ position:absolute; z-index:4; left:668px; top:330px; width:316px; height:268px; display:flex; flex-direction:column; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 -10px 40px -12px rgba(10,10,10,.35), var(--sombra-3); border:1px solid var(--linea); }
.dme-wa-cab{ flex:none; display:flex; align-items:center; gap:9px; height:44px; padding:0 12px; border-bottom:1px solid rgba(11,20,26,.07); }
.dme-wa-logo{ width:26px; height:26px; border-radius:50%; background:#25d366; color:#fff; display:grid; place-items:center; }
.dme-wa-logo .ico{ width:15px; height:15px; }
.dme-wa-cab b{ display:block; font-size:12.6px; font-weight:600; color:#111b21; }
.dme-wa-cab em{ display:block; font-style:normal; font-size:10.5px; color:#667781; }
.dme-wa-cuerpo{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-end; gap:5px; padding:8px 10px; overflow:hidden;
  background-color:#efeae2; background-image:radial-gradient(circle at 1px 1px, rgba(84,101,111,.09) 1px, transparent 1.5px); background-size:14px 14px; }
.dme-wa-cuerpo .wa-msg{ font-size:11.8px; max-width:92%; padding:5px 8px 6px 9px; }

/* La notificación bajo la campana de la app, el cursor y el clic */
.dme-badge{ position:absolute; z-index:6; left:597px; top:31px; min-width:15px; height:15px; padding:0 4px; border-radius:999px; background:#e5484d; color:#fff; font-size:9.5px; font-weight:700; display:grid; place-items:center; box-shadow:0 0 0 2px #fff; }
.dme-notif{ position:absolute; z-index:6; left:304px; top:62px; width:344px; display:flex; flex-direction:column; gap:9px; padding:12px 14px 14px; background:#fff; border:1px solid var(--linea); border-radius:12px;
  box-shadow:0 24px 50px -16px rgba(10,10,10,.45); }
.dme-notif::before{ content:''; position:absolute; top:-6px; right:46px; width:11px; height:11px; background:#fff; border-left:1px solid var(--linea); border-top:1px solid var(--linea); transform:rotate(45deg); }
.dme-n-item{ display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:9px; background:var(--verde-agua); }
.dme-n-ico{ flex:none; width:28px; height:28px; border-radius:8px; background:var(--verde); color:var(--tinta); display:grid; place-items:center; }
.dme-n-ico .ico{ width:14px; height:14px; }
.dme-n-item b{ display:block; font-size:12.6px; font-weight:600; line-height:1.3; }
.dme-n-item em{ display:block; font-style:normal; font-size:11px; color:var(--tinta-60); margin-top:2px; }
.dme-n-btn{ align-self:flex-end; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 14px; border-radius:999px; background:var(--tinta); color:#fff; font-size:12px; font-weight:500; transition:transform .2s, background .2s; }
.dme-n-btn .ico{ width:13px; height:13px; }
.dme-n-btn.pulsado{ transform:scale(.94); background:var(--verde-osc); }
/* cuando el informe ya está abierto, la notificación y el cursor se van */
.d-mej:has(.dme-area.v2) .dme-notif, .d-mej:has(.dme-area.v2) .dme-cursor, .d-mej:has(.dme-area.v2) .dme-badge{ display:none; }
.dme-cursor{ position:absolute; z-index:7; left:604px; top:182px; width:22px; height:22px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.dme-cursor .ico{ width:22px; height:22px; }
.dme-cursor.entra{ animation:dme-cursor .9s cubic-bezier(.22,.8,.24,1) both; }
@keyframes dme-cursor{ from{ opacity:0; transform:translate(70px, 90px); } to{ opacity:1; transform:none; } }

/* El informe */
.dme-scroll{ flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:9px; padding-bottom:10px; position:relative; }
.dme-kpis{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; flex:none; }
.dme-kpis > div{ display:flex; flex-direction:column; gap:1px; padding:8px 11px; border-radius:10px; background:var(--nieve); }
.dme-kpis span{ font-size:11px; color:var(--tinta-60); }
.dme-kpis b{ font-size:19px; font-weight:500; letter-spacing:-.025em; line-height:1.15; }
.dme-kpis em{ font-style:normal; font-size:10.6px; color:var(--tinta-45); }
.dme-bloque{ flex:none; display:flex; flex-direction:column; gap:5px; }
.dme-bl-cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dme-chip{ font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--nieve-2); color:var(--tinta-60); }
.dme-items{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; }
.dme-items li{ display:flex; gap:9px; align-items:flex-start; padding:5px 9px; border-radius:8px; font-size:11.8px; line-height:1.36; color:var(--tinta-80); background:#fff; border:1px solid var(--linea); }
.dme-items b{ font-weight:600; color:var(--tinta); }
.dme-li-ico{ flex:none; width:18px; height:18px; border-radius:6px; display:grid; place-items:center; margin-top:-1px; }
.dme-li-ico .ico{ width:12px; height:12px; }
.dme-mej .dme-li-ico{ color:var(--verde-osc); background:var(--verde-agua); }
.dme-op .dme-li-ico{ color:#2f6fed; background:rgba(47,111,237,.1); }
.dme-pr li{ background:var(--nieve); border-color:transparent; }
.dme-pr .dme-li-ico{ color:var(--tinta); background:#fff; }