/* ============================================================================
   sygma-modal.css — Modales explicativos de Sygma en el explorador de cursos (2026-10-31)
   ----------------------------------------------------------------------------
   Un mismo componente con seis composiciones (banner, izq, der, esquina, centro, asoma, cinta):
   cada pantalla del explorador usa una distinta. Paleta propia (no depende del tema claro/oscuro)
   porque cada imagen de Sygma es de texto blanco u oscuro y necesita su fondo.
   ========================================================================== */
.sm-fondo{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:28px 16px;
  background:rgba(10,4,32,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);overflow:auto;
  animation:sm-fade .22s ease-out both}
.sm-fondo[hidden]{display:none}
.sm{position:relative;width:min(840px,100%);margin:auto;border-radius:28px;overflow:visible;color:#1A0B4E;
  box-shadow:0 40px 90px -30px rgba(10,4,32,.85);animation:sm-sube .3s cubic-bezier(.2,.8,.2,1) both;font-family:'Manrope',system-ui,sans-serif}
.sm *{box-sizing:border-box}
.sm h2{margin:0 0 8px;font-size:clamp(22px,3.2vw,30px);line-height:1.12;letter-spacing:-.025em;font-weight:800}
.sm p{margin:0;font-size:15.5px;line-height:1.5}
.sm img{display:block;max-width:100%;height:auto}
.sm .sm-x{position:absolute;top:14px;right:14px;z-index:5;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  font-size:22px;line-height:1;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#1A0B4E;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.sm-x:hover{background:#fff;transform:scale(1.06)}
.sm-ceja{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;padding:5px 11px;border-radius:99px}

/* Pasos */
.sm-pasos{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;counter-reset:sm}
.sm-pasos li{position:relative;counter-increment:sm;padding:12px 14px 12px 54px;border-radius:16px;font-size:14.5px;line-height:1.45}
.sm-pasos li::before{content:counter(sm);position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:14px;color:#fff;background:linear-gradient(135deg,#6A1FD0,#C42A7E 60%,#FF5320)}
.sm-pasos b{display:block;font-size:15px;margin-bottom:1px}

/* Pie */
.sm-pie{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:20px}
.sm .sm-ok{font:inherit;font-size:15.5px;font-weight:800;border:0;cursor:pointer;color:#fff !important;padding:13px 26px;border-radius:14px;
  background:linear-gradient(120deg,#6A1FD0 0%,#C42A7E 52%,#FF5320 82%,#FF8A00 100%);box-shadow:0 12px 24px -12px rgba(196,42,126,.8);transition:transform .15s,filter .15s}
.sm .sm-ok:hover{transform:translateY(-1px);filter:brightness(1.07)}
.sm .sm-no{font:inherit;font-size:13.5px;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:6px 2px;opacity:.78}
.sm .sm-no:hover{opacity:1}

/* ── A · banner (inicio): portada ancha arriba, tres tarjetas abajo ───────── */
.sm--banner{background:#fff;border-radius:28px;overflow:hidden}
.sm--banner .sm-cab{position:relative;min-height:230px;background:#2a0f78 url(../img/sygma/modal/escena-derecha.webp) right center/cover no-repeat;display:flex;align-items:flex-end;padding:28px 34px}
.sm--banner .sm-cab::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,11,78,.92) 0%,rgba(26,11,78,.55) 46%,transparent 78%)}
.sm--banner .sm-cab > *{position:relative;z-index:1;color:#fff;max-width:480px}
.sm--banner .sm-ceja{background:rgba(255,255,255,.16);color:#fff}
.sm--banner .sm-cuerpo{padding:24px 34px 30px}
.sm--banner .sm-pasos{grid-template-columns:repeat(3,1fr)}
.sm--banner .sm-pasos li{padding:56px 14px 14px;background:#F6F2FF}
.sm--banner .sm-pasos li::before{top:14px;left:14px}
.sm--banner .sm-no{color:#54515F}

/* ── B · izq (DIAN cursos): panel oscuro con el robot a la izquierda ──────── */
.sm--izq{display:grid;grid-template-columns:300px 1fr;background:#fff;border-radius:28px;overflow:hidden}
.sm--izq .sm-lado{background:radial-gradient(circle at 30% 20%,#5B2CC6 0%,#2A0F78 55%,#1A0B4E 100%);display:flex;align-items:center;justify-content:center;padding:26px 18px}
.sm--izq .sm-lado img{width:100%;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45))}
.sm--izq .sm-cuerpo{padding:34px 34px 28px}
.sm--izq .sm-ceja{background:#F1EAFF;color:#6A1FD0}
.sm--izq .sm-pasos li{background:#F6F2FF}
.sm--izq .sm-no{color:#54515F}

/* ── C · der (Docentes cursos): texto a la izquierda, robot a la derecha sobre lavanda ─ */
.sm--der{display:grid;grid-template-columns:1fr 300px;background:#fff;border-radius:28px;overflow:hidden}
.sm--der .sm-lado{order:2;background:linear-gradient(160deg,#F1EAFF 0%,#FBDDEB 60%,#FFE3C8 100%);display:flex;align-items:center;justify-content:center;padding:26px 16px}
.sm--der .sm-lado img{width:100%}
.sm--der .sm-cuerpo{padding:34px 30px 28px 34px}
.sm--der .sm-ceja{background:#FFE9D2;color:#B85600}
.sm--der .sm-pasos li{background:#FBF7FF;border:1px solid #ECE3FF}
.sm--der .sm-no{color:#54515F}

/* ── D · esquina (mapa de cargos DIAN): tarjeta clara, robot asomando por la esquina inferior ─ */
.sm--esquina{background:linear-gradient(150deg,#FFFFFF 0%,#FBF3FF 55%,#FFEFE0 100%);border-radius:28px;overflow:hidden;padding:30px 34px 34px}
.sm--esquina .sm-logo{width:168px;margin-bottom:16px}
.sm--esquina .sm-cuerpo{max-width:520px}
.sm--esquina .sm-ceja{background:#E9F6FF;color:#0B6E99}
.sm--esquina .sm-pasos li{background:#fff;border:1px solid #EFE6FF}
.sm--esquina .sm-robot{position:absolute;right:26px;bottom:20px;width:236px;filter:drop-shadow(0 14px 16px rgba(26,11,78,.25));pointer-events:none}
.sm--esquina .sm-no{color:#54515F}

/* ── E · centro (profesiones): oscuro, rótulo centrado sobre la escena ────── */
.sm--centro{background:#1A0B4E url(../img/sygma/modal/escena-centro.webp) center top/cover no-repeat;border-radius:28px;overflow:hidden;color:#fff;text-align:center;padding:30px 34px 30px}
.sm--centro::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,11,78,.42) 0%,rgba(26,11,78,.86) 36%,rgba(20,8,60,.97) 100%)}
.sm--centro > *{position:relative}
.sm--centro .sm-rotulo{width:210px;margin:0 auto 150px}
.sm--centro .sm-ceja{background:rgba(255,255,255,.14);color:#fff}
.sm--centro p{color:rgba(255,255,255,.88)}
.sm--centro .sm-pasos{grid-template-columns:repeat(3,1fr);text-align:left}
.sm--centro .sm-pasos li{padding:56px 14px 14px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(4px)}
.sm--centro .sm-pasos li::before{top:14px;left:14px}
.sm--centro .sm-pie{justify-content:center}
.sm--centro .sm-no{color:#fff}
.sm--centro .sm-x{background:rgba(255,255,255,.2);color:#fff}

/* ── F · asoma (cargos docentes): el robot sale por encima del borde superior ─ */
.sm--asoma{background:linear-gradient(160deg,#1A0B4E 0%,#2D1180 60%,#4B1BA8 100%);color:#fff;border-radius:28px;margin-top:120px;padding:34px 34px 30px;overflow:visible}
.sm--asoma .sm-robot{position:absolute;right:26px;top:-128px;width:262px;filter:drop-shadow(0 16px 20px rgba(0,0,0,.5));pointer-events:none}
.sm--asoma .sm-cuerpo{padding-right:210px}
.sm--asoma .sm-ceja{background:rgba(255,138,0,.18);color:#FFB347}
.sm--asoma p{color:rgba(255,255,255,.88)}
.sm--asoma .sm-pasos{margin-right:-210px;grid-template-columns:repeat(3,1fr)}
.sm--asoma .sm-pasos li{padding:56px 14px 14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.sm--asoma .sm-pasos li::before{top:14px;left:14px}
.sm--asoma .sm-no{color:#fff}
.sm--asoma .sm-x{background:rgba(255,255,255,.2);color:#fff;top:12px}

/* ── G · cinta (currículo): cinta vertical con el logo y contenido a la derecha ─ */
.sm--cinta{display:grid;grid-template-columns:132px 1fr;background:#fff;border-radius:28px;overflow:hidden}
.sm--cinta .sm-lado{background:linear-gradient(180deg,#6A1FD0 0%,#C42A7E 60%,#FF5320 100%);position:relative;min-height:340px}
.sm--cinta .sm-lado img{position:absolute;left:50%;top:50%;width:330px;max-width:none;transform:translate(-50%,-50%) rotate(-90deg)}
.sm--cinta .sm-cuerpo{padding:34px 34px 28px}
.sm--cinta .sm-ceja{background:#FFE9D2;color:#B85600}
.sm--cinta .sm-pasos{counter-reset:sm}
.sm--cinta .sm-pasos li{background:#FBF7FF;border-left:4px solid #C42A7E;border-radius:6px 16px 16px 6px}
.sm--cinta .sm-no{color:#54515F}

/* Botón «¿Cómo busco aquí?» de la barra lateral */
.sm-ayuda{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);color:#fff;padding:7px 12px;border-radius:99px;margin:8px auto 4px}
.sm-ayuda:hover{background:rgba(255,255,255,.18)}
.sm-ayuda i{font-style:normal;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#FF8A00;color:#1A0B4E;font-weight:800;font-size:12px}

@keyframes sm-fade{from{opacity:0}to{opacity:1}}
@keyframes sm-sube{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sm-fondo,.sm{animation:none}}

/* Móvil: todo en una columna, el robot más pequeño */
@media (max-width:760px){
  .sm--izq,.sm--der,.sm--cinta{grid-template-columns:1fr}
  .sm--izq .sm-lado{padding:18px;max-height:210px}.sm--izq .sm-lado img{width:auto;max-height:170px}
  .sm--der .sm-lado{order:-1;padding:16px;max-height:210px}.sm--der .sm-lado img{width:auto;max-height:170px}
  .sm--izq .sm-cuerpo,.sm--der .sm-cuerpo,.sm--cinta .sm-cuerpo{padding:22px 20px 22px}
  .sm--banner .sm-cab{min-height:170px;padding:20px}
  .sm--banner .sm-cuerpo{padding:20px}
  .sm--banner .sm-pasos,.sm--centro .sm-pasos,.sm--asoma .sm-pasos{grid-template-columns:1fr}
  .sm--banner .sm-pasos li,.sm--centro .sm-pasos li,.sm--asoma .sm-pasos li{padding:12px 14px 12px 54px}
  .sm--banner .sm-pasos li::before,.sm--centro .sm-pasos li::before,.sm--asoma .sm-pasos li::before{top:12px;left:12px}
  .sm--esquina{padding:22px 20px 24px}.sm--esquina .sm-robot{position:static;width:150px;margin:14px 0 0 auto}
  .sm--centro{padding:24px 20px}.sm--centro .sm-rotulo{margin-bottom:96px;width:170px}
  .sm--asoma{margin-top:96px;padding:24px 20px}.sm--asoma .sm-robot{width:170px;top:-92px;right:12px}
  .sm--asoma .sm-cuerpo{padding-right:0;padding-top:34px}.sm--asoma .sm-pasos{margin-right:0}
  .sm--cinta .sm-lado{min-height:88px}.sm--cinta .sm-lado img{width:230px;transform:translate(-50%,-50%) rotate(0)}
}

/* ── Logo de Sygma bajo el formulario de la barra lateral: pequeño y COMPLETO (ancho y alto acotados a la vez) ── */
.expl aside .sm-lado-sygma{margin:10px 0 0;padding:16px 0 4px;display:flex;justify-content:center;pointer-events:none;border-top:1px solid rgba(255,255,255,.10)}
.expl aside .sm-lado-sygma img{display:block;width:auto;height:auto;max-width:min(100%,124px);max-height:58px;object-fit:contain}

/* Botón de ayuda dentro de la página /sygma (hereda el color del texto: funciona en tema claro y oscuro) */
.sm-ayuda.sm-ayuda-pagina{margin:6px 0 0;color:inherit;background:transparent;border:1px solid color-mix(in srgb,currentColor 38%,transparent)}
.sm-ayuda.sm-ayuda-pagina:hover{background:color-mix(in srgb,currentColor 10%,transparent)}

/* Fuentes que Sygma consulta (modal de /sygma): rejilla de enlaces con la entidad como cabecera de color */
.sm-fuentes{margin:20px 0 0}
.sm--asoma .sm-fuentes{margin-right:-210px}
.sm-fuentes h3{margin:0 0 10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;opacity:.9}
.sm-fuentes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sm .sm-fuentes a{--c:#7C4DFF;display:block;height:100%;padding:9px 12px 10px;border-radius:12px;text-decoration:none;color:inherit;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-top:3px solid var(--c);transition:background .15s,transform .15s}
.sm .sm-fuentes a:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.sm-fuentes a small{display:block;font-size:10.5px;letter-spacing:.14em;font-weight:800;opacity:.78;margin-bottom:2px}
.sm-fuentes a b{display:block;font-size:13.5px;line-height:1.25;font-weight:700}
.sm .sm-fuentes .sm-f-cnsc{--c:#FF8A00}.sm .sm-fuentes .sm-f-dian{--c:#D9A21B}.sm .sm-fuentes .sm-f-men{--c:#7C4DFF}.sm .sm-fuentes .sm-f-icfes{--c:#2FA66A}
@media (max-width:760px){.sm--asoma .sm-fuentes{margin-right:0}.sm-fuentes ul{grid-template-columns:repeat(2,1fr)}}