del panel. */ .mk-pantalla{--mk-k:1;position:relative;width:1000px;background:var(--papel);color:var(--tinta);font:16px/1.55 var(--txt);text-align:left; pointer-events:none;user-select:none} .mk-pantalla main,.mk-pantalla .mk-main{max-width:1180px;margin:0 auto;padding:26px 24px 30px} .mk-pantalla .mk-main.corto{padding-bottom:6px} /* Margen lateral suficiente para las llamadas cuando la pantalla se reduce mucho. */ .mk-pantalla .mk-main{padding-left:max(24px, calc(34px / var(--mk-k)));padding-right:max(24px, calc(34px / var(--mk-k)))} /* Deshace estilos propios del cuerpo de la documentación que no existen en el panel. */ .doc-cuerpo .mk-pantalla h2{margin-top:0} .doc-cuerpo .mk-pantalla img{border:0;border-radius:0;margin:0} .doc-cuerpo .mk-pantalla .opcion img{border-radius:var(--r1)} .doc-cuerpo .mk-pantalla table{margin:0} .doc-cuerpo .mk-pantalla td,.doc-cuerpo .mk-pantalla th{border:0;border-bottom:1px solid var(--linea)} .doc-cuerpo .mk-pantalla tr:last-child td{border-bottom:0} .mk-pantalla a{text-decoration:underline;cursor:default} .mk-pantalla .nav a,.mk-pantalla .grupo .sub a,.mk-pantalla a.btn,.mk-pantalla .marca,.mk-pantalla .saldo,.mk-pantalla .indice a{text-decoration:none} /* Barra del panel: siempre en su versión de escritorio (el menú móvil ocultaría lo que se señala). */ .mk-pantalla .barra .nav{display:flex} .mk-pantalla .barra .der{display:flex;width:auto} .mk-pantalla .menu-t{display:none} .mk-pantalla .barra .in{flex-wrap:nowrap;gap:12px;padding:0 16px} .mk-estrecho .barra .in,.mk-estrecho .barra .nav{flex-wrap:wrap;row-gap:0} /* Módulos plegables: sin recorte, para que las llamadas numeradas no se corten en el borde. */ .mk-pantalla fieldset.mod-plegable{overflow:visible} .mk-pantalla fieldset.mod-plegable>details>summary{border-radius:calc(var(--r2) - 1px) calc(var(--r2) - 1px) 0 0} .mk-pantalla fieldset.mod-plegable>details:not([open])>summary{border-radius:calc(var(--r2) - 1px)} .mk-pantalla .marca span{display:none} .mk-pantalla .mk-archivo{display:flex;align-items:center;gap:10px;font-size:.93rem} .mk-pantalla .mk-archivo b{font-weight:400;border:1px solid #8f8f9d;background:#e9e9ed;border-radius:3px;padding:1px 8px;font-size:.85rem} .mk-pantalla .mk-audio{display:flex;align-items:center;gap:10px;width:100%;height:36px;font-weight:400;border-radius:999px;background:#f1f3f4;padding:0 14px;font-size:.8rem;color:#333} .mk-pantalla .mk-audio::before{content:"";border-left:9px solid #333;border-top:6px solid transparent;border-bottom:6px solid transparent} .mk-pantalla .mk-audio i{flex:1;height:4px;border-radius:2px;background:#c4c7c5} .mk-pantalla .mk-video{width:100%;max-width:480px;aspect-ratio:16/9;border-radius:var(--r1);background:#0b1b29;display:grid;place-items:center;margin:8px 0} .mk-pantalla .mk-video::before{content:"";width:0;height:0;border-left:26px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent;opacity:.9} /* Llamadas numeradas sobre la pantalla: tamaño constante aunque la pantalla se escale. */ .mk-t{position:relative;outline:calc(2px / var(--mk-k)) solid var(--mk-acento,#c2185b);outline-offset:calc(2px / var(--mk-k))} .mk-c{position:absolute;z-index:3;top:calc(-17px / var(--mk-k));left:calc(-31px / var(--mk-k)); width:calc(26px / var(--mk-k));height:calc(26px / var(--mk-k));border-radius:50%;display:grid;place-items:center; background:#c2185b;color:#fff;font:700 calc(14px / var(--mk-k))/1 var(--txt);font-style:normal;letter-spacing:0; box-shadow:0 0 0 calc(2px / var(--mk-k)) #fff,0 2px 6px rgba(0,0,0,.3);text-decoration:none;text-transform:none} .mk-c.a{left:auto;right:calc(-31px / var(--mk-k))} .mk-c.d{left:auto;right:calc(-36px / var(--mk-k));top:50%;margin-top:calc(-13px / var(--mk-k))} .mk-c.b{top:auto;bottom:calc(-22px / var(--mk-k));left:50%;margin-left:calc(-13px / var(--mk-k))} .mk-c.i{left:calc(-38px / var(--mk-k));top:50%;margin-top:calc(-13px / var(--mk-k))} .mk-ib{display:inline-block} .mk-pantalla details.mk-ib>summary{display:list-item} /* Pasos numerados bajo la pantalla. */ .mk-pie{margin-top:14px} .mk-pasos{list-style:none;counter-reset:mk;padding:0;margin:0;display:grid;gap:8px 22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .mk-pasos li{counter-increment:mk;position:relative;padding-left:36px;min-height:26px} .mk-pasos li::before{content:counter(mk);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%; display:grid;place-items:center;background:#c2185b;color:#fff;font-weight:700;font-size:.85rem} .mk-calculo{margin:14px 0 0;background:var(--azul-c);border-radius:var(--r1);padding:12px 16px;font-size:.95rem} .mk-calculo b{white-space:nowrap} /* Paso a paso navegable (mejora progresiva: sin JS se ven todos los pasos seguidos). */ .mk-flujo{margin:18px 0 28px} .mk-paso-tit{font-size:1.02rem;margin:22px 0 4px} .mk-flujo .mk{margin-top:10px} .mk-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 6px;padding:10px 12px;border:1px solid var(--linea); border-radius:var(--r1);background:#f8fafc} .mk-nav .btn{min-height:40px} .mk-nav-num{display:flex;gap:6px;list-style:none;margin:0;padding:0} .mk-nav-num button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--linea-f);background:#fff;color:var(--tinta); font:700 .92rem var(--txt);cursor:pointer} .mk-nav-num button:hover{border-color:var(--azul);background:var(--azul-c)} .mk-nav-num button[aria-current=step]{background:var(--tinta);border-color:var(--tinta);color:#fff} .mk-nav :focus-visible{outline:3px solid #f0a400;outline-offset:2px} .mk-estado{margin:0 0 0 auto;font-size:.92rem;color:var(--suave);font-weight:600} .mk-flujo.mk-activo .mk-paso-tit{margin-top:12px} @media (max-width:640px){ .mk-nav{gap:8px;flex-wrap:wrap} .mk-nav-num{order:-1;flex-basis:100%;justify-content:center} .mk-nav>.btn{flex:1 1 0} .mk-estado{flex-basis:100%;margin:0;text-align:center} .mk-pasos{grid-template-columns:1fr} .mk-url{font-size:.72rem} } .mk-pie-nav{display:flex;justify-content:space-between;gap:10px;margin-top:14px} .mk-paso-tit:focus{outline:none} .mk-paso-tit:focus-visible{outline:3px solid #f0a400;outline-offset:2px} @media (prefers-reduced-motion:reduce){.mk *{transition:none!important}} /* Pestaña seleccionada del panel ([role=tab][aria-selected=true] en app.css), sin rol ARIA dentro del dibujo. */ .mk-pantalla .btn.mk-tab-on{background:var(--tinta);border-color:var(--tinta);color:#fff;box-shadow:none} /* Corte: parte de la pantalla omitida en el dibujo. */ .mk-pantalla .mk-corte{position:relative;margin:6px -8px 16px;height:26px;display:grid;place-items:center} .mk-pantalla .mk-corte::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--linea-f)} .mk-pantalla .mk-corte span{position:relative;background:var(--hoja);padding:0 12px;font-size:.82rem;color:var(--tenue);font-style:italic} /* Tablas sin recorte: las llamadas numeradas de las celdas no se cortan (el ancho virtual ya evita el desborde). */ .mk-pantalla .tabla{overflow:visible} .mk-pantalla .tabla thead th:first-child{border-top-left-radius:calc(var(--r2) - 1px)} .mk-pantalla .tabla thead th:last-child{border-top-right-radius:calc(var(--r2) - 1px)} @media print{.mk-paso[hidden]{display:block!important}.mk-nav,.mk-pie-nav,.mk-desliza{display:none}} .mk-pantalla .mk-qr{display:block;width:220px;height:220px} /* Menús desplegados de la barra: siempre como en escritorio (en el teléfono app.css los vuelve estáticos). */ .mk-pantalla :is(.nav,.der) .grupo .sub{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:#fff;border:1px solid #dbe4ee;border-radius:12px;box-shadow:0 14px 34px -12px rgba(10,42,68,.35);padding:6px} .mk-pantalla :is(.nav,.der) .grupo .sub a{color:#0a2a44} .mk-pantalla :is(.nav,.der) .grupo .sub a[aria-current=page]{background:#e3f0f8;color:#1a6ea3} .mk-pantalla .der .grupo.usuario .sub{left:auto;right:0;min-width:180px} /* Tablas del texto de la guía (p. ej. permisos por rol): sin desbordar la página en pantallas angostas. */ @media (max-width:640px){ .doc-cuerpo>table{display:block;overflow-x:auto;font-size:.86rem} .doc-cuerpo>table th,.doc-cuerpo>table td{padding:6px 8px} } /* Packs de Cargar créditos (estilo en línea de creditos.html). */ .mk-pantalla .pack .precio-unit{display:block;font-size:.95rem;margin:4px 0 0} .mk-pantalla .pack .ahorro{display:inline-block;margin-top:6px;background:#e6f4ea;color:#0a4d22;border-radius:999px;padding:2px 10px;font-size:.82rem;font-weight:700} /* Editor del módulo: estilos en línea de editor.html (bloques interactivos y «Quitados»). */ .mk-pantalla .ed-quitar-bar{display:flex;justify-content:flex-end;margin:0 0 8px} .mk-pantalla .ed-quitados{margin:12px 0 0;border-top:1px solid var(--linea);padding-top:8px} .mk-pantalla .ed-quitados summary{cursor:pointer;font-weight:700;font-size:.92rem} .mk-pantalla .ed-quitados ul{list-style:none;padding:0;margin:6px 0 0} .mk-pantalla .ed-quitados li{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--linea);font-size:.9rem} .mk-pantalla .ed-bloques{margin-top:18px;border-top:1px solid var(--linea);padding-top:12px} .mk-pantalla .ed-bloques h2{font-size:1rem;margin:0 0 8px} .mk-pantalla .ed-bl{border:1px solid var(--linea);border-radius:10px;padding:10px 12px;margin:0 0 12px} .mk-pantalla .ed-bl legend{font-weight:700;padding:0 6px} .mk-pantalla .ed-bl input,.mk-pantalla .ed-bl textarea{width:100%;box-sizing:border-box} .mk-pantalla .ed-bl-it{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:start;margin:8px 0} .mk-pantalla .ed-bl-n{font-weight:700;color:var(--tenue);padding-top:8px} .mk-pantalla .ed-bl-campos{display:grid;gap:6px} .mk-pantalla .ed-bl-acc{display:flex;gap:4px}.mk-pantalla .ed-bl-acc span{min-width:36px;min-height:36px;display:grid;place-items:center;border:1px solid #767676;border-radius:3px;background:#efefef;font-size:.9rem} .mk-pantalla .ed-bl-nuevo{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .mk-pantalla .ed-bl-nuevo select{width:auto} .mk-pantalla .ed-grid{min-height:0} .mk-pantalla .ed-lista,.mk-pantalla .ed-panel{position:static;max-height:none} .mk-pantalla .ed-barra{position:static} /* Documento impreso (PDF de apuntes o DI) dentro del marco. */ .mk-pantalla .mk-hoja{background:#fff;max-width:720px;margin:0 auto;padding:34px 44px;box-shadow:0 2px 12px rgba(10,42,68,.12);font-family:Georgia,'Times New Roman',serif;color:#1f2430;font-size:.95rem;line-height:1.55} .mk-pantalla .mk-hoja h3{font-family:inherit;font-size:1.15rem;margin:0 0 8px} .mk-pantalla .mk-hoja h4{font-family:inherit;font-size:1rem;margin:16px 0 6px} .mk-pantalla .mk-hoja table{border-collapse:collapse;width:100%;font-size:.9rem} .doc-cuerpo .mk-pantalla .mk-hoja th,.doc-cuerpo .mk-pantalla .mk-hoja td{border:1px solid #9aa9b8;padding:6px 8px;text-align:left;vertical-align:top;background:#fff;color:#1f2430} .mk-pantalla .mk-hoja thead th{background:#eef2f6} .mk-pantalla .mk-visor{background:#525659;padding:18px 12px} /* Lista del editor (#ed-items en app.css, sin id dentro del dibujo). */ .mk-pantalla .mk-ed-li{display:grid;grid-template-columns:72px 1fr auto;gap:8px;align-items:center;padding:7px;border-radius:8px;border:2px solid transparent;margin-bottom:5px} .mk-pantalla .mk-ed-li.act{grid-template-columns:1fr auto} .mk-pantalla .mk-ed-li.sel{border-color:var(--azul);background:var(--azul-c)} .mk-pantalla .mk-ed-li img{width:72px;height:41px;object-fit:cover;border-radius:4px;border:1px solid var(--linea)} .mk-pantalla .mk-ed-li .t{font-size:.84rem;line-height:1.3}.mk-pantalla .mk-ed-li .t small{display:block;color:var(--suave)} .mk-pantalla .ed-lista,.mk-pantalla .ed-panel{overflow:visible} .mk-pantalla .ed-lista{padding-left:max(12px, calc(36px / var(--mk-k)))} .mk-pantalla .ed-panel{padding-left:max(14px, calc(36px / var(--mk-k)))} /* Marca de la organización: estilos en línea de marca.html. */ .mk-pantalla .marca-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start} .mk-pantalla .marca-par{display:flex;gap:10px;align-items:center} .mk-pantalla .marca-muestra{width:48px;height:44px;padding:2px;border:1px solid var(--linea);border-radius:8px;background:#fff;flex:0 0 auto;display:grid} .mk-pantalla .marca-muestra i{display:block;border-radius:5px} .mk-pantalla .marca-par input[type=text]{max-width:9em;font-family:ui-monospace,Menlo,Consolas,monospace} .mk-pantalla .marca-logo-actual img{max-height:56px;max-width:220px;background:#fff;border:1px solid var(--linea);border-radius:8px;padding:6px 10px} .mk-pantalla .mv-leccion{border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:#fff;color:#15233b} .mk-pantalla .mv-barra{display:flex;align-items:center;gap:12px;padding:10px 14px;font-weight:700;font-size:.95rem} .mk-pantalla .mv-logo img{height:28px;width:auto;max-width:120px;background:#fff;border-radius:6px;padding:3px 6px;display:block} .mk-pantalla .mv-cuerpo{padding:14px 16px}.mk-pantalla .mv-tit{font-size:1.2rem;font-weight:800;margin:0 0 6px} .mk-pantalla .mv-boton{display:inline-block;color:#fff;border-radius:10px;padding:9px 16px;font-weight:700;margin-top:4px} .mk-pantalla .marca-vista h3{margin:18px 0 4px}.mk-pantalla .mv-ratios{padding-left:18px;margin:6px 0 10px} .mk-pantalla .mv-portada{margin-top:12px;border-radius:10px;padding:14px 16px;color:#fff;font-weight:800}