/* Tutorial guiado: panel flotante, linea de puntos hacia el control y recuadro del resultado. */
:root{--guia:#e8590c;--guia-suave:rgba(232,89,12,.16)}
#btnTutorial{border:1px solid var(--guia);background:transparent;color:#ffb38a;padding:3px 12px;cursor:pointer;border-radius:2px;font-size:12px;font-weight:bold}
#btnTutorial:hover{background:rgba(232,89,12,.18)}
#btnTutorial[aria-pressed="true"]{background:var(--guia);color:#fff}

.guia{position:fixed;z-index:55;width:320px;max-width:calc(100vw - 24px);background:#fff;color:#1f2430;border:1px solid #c9ccd3;border-radius:6px;box-shadow:0 10px 34px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);display:flex;flex-direction:column;max-height:min(80vh,640px);font:13px/1.45 Arial,Helvetica,sans-serif;right:14px;top:60px}
.guia[hidden]{display:none!important}
.guia-cab{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:grab;background:#f1f2f5;border-bottom:1px solid #dcdee4;border-radius:6px 6px 0 0;touch-action:none;user-select:none}
.guia-cab:active{cursor:grabbing}
.guia-cab .agarre{color:#8a8f9c;font-size:13px;letter-spacing:-1px}
.guia-cab .quien{font-weight:bold;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--guia)}
.guia-cab .cuenta{margin-left:auto;font:11px Consolas,monospace;color:#8a8f9c}
.guia-x{border:0;background:none;color:#8a8f9c;cursor:pointer;font-size:15px;line-height:1;padding:2px 4px;border-radius:3px}
.guia-x:hover{color:#1f2430;background:#dcdee4}
.guia-cuerpo{padding:11px 13px 6px;overflow-y:auto;flex:1 1 auto;min-height:0}
.guia-cuerpo h3{font-size:14px;margin:0 0 5px;color:#1f2430}
.guia-caso{font-size:11.5px;line-height:1.45;background:#eef3ff;border:1px solid #b9c8f0;border-radius:4px;padding:7px 9px;margin:0 0 9px;color:#1f2a4d}
.guia-caso[hidden]{display:none}
.guia-caso ul{margin:4px 0 0;padding-left:16px}
.guia-pregunta{font-size:12.5px;line-height:1.55;color:#3c4252;margin:0 0 9px}
.guia-mueve{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.45;background:var(--guia-suave);border-left:2px solid var(--guia);padding:7px 9px;border-radius:0 4px 4px 0;margin-bottom:9px;color:#3c4252}
.guia-estado{font-size:11.5px;line-height:1.4;padding:6px 9px;border-radius:4px;margin:0 0 9px}
.guia-estado[hidden]{display:none}
.guia-estado.falta{background:#fff4d6;border:1px solid #e6c45c;color:#5c4700}
.guia-estado.hecho{background:#e3f6e8;border:1px solid #7cc492;color:#14532d}
.guia-estado.hecho::before{content:"✓ "}
.guia-cuerpo textarea{width:100%;min-height:74px;resize:vertical;font:inherit;font-size:12px;line-height:1.5;padding:7px 8px;border:1px solid #c9ccd3;border-radius:4px;background:#f8f9fb;color:#1f2430;box-sizing:border-box}
.guia-cuerpo textarea:focus{outline:2px solid var(--guia);outline-offset:-1px}
.guia-pie{display:flex;align-items:center;gap:7px;padding:9px 11px;flex-wrap:wrap;border-top:1px solid #dcdee4;background:#f1f2f5;border-radius:0 0 6px 6px}
.guia-nav{border:1px solid #c9ccd3;background:#fff;color:#3c4252;border-radius:4px;width:30px;height:28px;cursor:pointer;font-size:14px;line-height:1}
.guia-nav:hover:not(:disabled){border-color:#8a8f9c;color:#1f2430}
.guia-nav:disabled{opacity:.35;cursor:default}
.guia-puntos{display:flex;gap:3px;margin:0 auto;flex-wrap:wrap;justify-content:center;max-width:150px}
.guia-puntos i{width:7px;height:7px;border-radius:50%;background:#c9ccd3;display:block;cursor:pointer}
.guia-puntos i.aqui{background:var(--guia)}
.guia-puntos i.listo{background:var(--guia);opacity:.45}
.guia-chico{border:1px solid #c9ccd3;background:#fff;color:#6b7080;border-radius:4px;padding:4px 7px;font-size:10.5px;cursor:pointer}
.guia-chico:hover{color:#1f2430;border-color:#8a8f9c}
.guia-fin{flex:1 1 100%;margin-top:2px;font-weight:bold;font-size:11.5px;padding:7px 10px;border-radius:4px;cursor:pointer;border:1px solid var(--guia);background:var(--guia);color:#fff}

/* El control del que habla el paso. La misma regla esta en Volumina. */
.guia-objetivo{outline:2px solid var(--guia)!important;outline-offset:3px;border-radius:3px;box-shadow:0 0 0 6px var(--guia-suave)}
@media (prefers-reduced-motion:no-preference){
  .guia-objetivo{animation:guiapulso 1.9s ease-in-out infinite}
  @keyframes guiapulso{0%,100%{box-shadow:0 0 0 5px var(--guia-suave)}50%{box-shadow:0 0 0 10px var(--guia-suave)}}
}
#guiaMarcas{position:fixed;inset:0;z-index:54;pointer-events:none}
#guiaSvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.guia-halo{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-dasharray:0 11;opacity:.9}
.guia-linea{fill:none;stroke:var(--guia);stroke-width:4;stroke-linecap:round;stroke-dasharray:0 11}
.guia-punta{fill:var(--guia);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.guia-origen{fill:var(--guia);stroke:#fff;stroke-width:2}
@media (prefers-reduced-motion:no-preference){
  .guia-halo,.guia-linea{animation:guiaflujo .5s linear infinite}
  @keyframes guiaflujo{to{stroke-dashoffset:-11px}}
}
.guia-mira{position:absolute;border:2px dashed var(--guia);border-radius:5px;background:rgba(232,89,12,.07)}
.guia-mira::after{content:"resultado";position:absolute;top:-9px;left:9px;font:bold 9px/1 Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--guia);padding:3px 6px;border-radius:3px;white-space:nowrap}

/* Informe: solo existe al imprimir. */
#informe{display:none}
@media print{
  html,body{height:auto!important;overflow:visible!important;background:#fff!important;color:#111!important}
  body>*:not(#informe){display:none!important}
  #informe{display:block;font:11pt/1.45 Georgia,'Times New Roman',serif;color:#111;padding:0 4mm}
  #informe h1{font:bold 17pt Arial,sans-serif;margin:0 0 3pt}
  #informe .nombre{font:10pt Arial,sans-serif;margin:0 0 8pt}
  #informe .nombre span{display:inline-block;width:90mm;border-bottom:.7pt solid #555}
  #informe .sub{font:9pt Arial,sans-serif;color:#555;margin:0 0 10pt}
  #informe h2.sec{font:bold 12pt Arial,sans-serif;margin:14pt 0 5pt;padding-bottom:2pt;border-bottom:1.5pt solid #e8590c;break-after:avoid}
  #informe h3{font:bold 10.5pt Arial,sans-serif;margin:9pt 0 3pt;break-after:avoid}
  #informe .chip{font:normal 8pt Arial,sans-serif;color:#555;border:.7pt solid #999;border-radius:3pt;padding:0 4pt;margin-left:6pt}
  #informe section{break-inside:avoid;margin-bottom:7pt}
  #informe .q{font-size:9.5pt;color:#333;margin:0 0 3pt}
  #informe .lbl{font:bold 8pt Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#777;margin:0 0 1pt}
  #informe .resp{border:.7pt solid #aaa;border-radius:2pt;padding:4pt 6pt;min-height:22pt;white-space:pre-wrap;font-size:10.5pt}
  #informe table{border-collapse:collapse;width:100%;font:9.5pt Arial,sans-serif}
  #informe th{text-align:left;vertical-align:top;width:34mm;padding:2pt 6pt 2pt 0;color:#444}
  #informe td{padding:2pt 0;border-bottom:.4pt solid #ddd}
  #informe .pie{font:8.5pt Arial,sans-serif;color:#555;margin-top:12pt;border-top:.7pt solid #aaa;padding-top:4pt}
}