/* Visor del manual de uso. Compartido por el formulario y el panel.
   Sin dependencias: se carga con una etiqueta <link> y ya. */

.man-fab{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:max(14px, env(safe-area-inset-bottom)); z-index:9000;
  border:0; border-radius:999px; padding:11px 22px; cursor:pointer;
  font:700 14px/1 system-ui,-apple-system,"Segoe UI",sans-serif; color:#fff;
  background:#1f2937; box-shadow:0 6px 22px rgba(0,0,0,.30);
}
.man-fab:hover{ background:#111827; }
.man-fab:active{ transform:translateX(-50%) scale(.97); }

/* Montado en la barra superior de la página: deja de flotar y se comporta
   como un botón más de la barra, sin tapar nada. */
.man-fab.man-enbarra{
  position:static; transform:none; bottom:auto; left:auto; z-index:auto;
  padding:7px 13px; font-size:13px; border-radius:8px; box-shadow:none;
  white-space:nowrap;
}
.man-fab.man-enbarra:active{ transform:scale(.97); }

.man-ov{ position:fixed; inset:0; z-index:9001; background:rgba(15,23,42,.55); display:none; }
.man-ov.on{ display:block; }
.man-wrap{ position:absolute; inset:0; overflow:auto; -webkit-overflow-scrolling:touch; padding:14px; }

.man-doc{
  position:relative; max-width:880px; margin:0 auto 40px; background:#fff;
  border-radius:16px; padding:22px 26px 34px;
  font:15px/1.62 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:#1f2937;
}
.man-cerrar{
  position:sticky; top:0; float:right; margin:-6px -8px 0 0; z-index:2;
  border:0; background:#e5e7eb; color:#111827; border-radius:999px;
  width:34px; height:34px; font:700 17px/1 system-ui; cursor:pointer;
}
.man-cerrar:hover{ background:#d1d5db; }

.man-doc h1{ font-size:25px; margin:0 0 6px; color:#111827; }
.man-doc h2{ font-size:19px; margin:30px 0 10px; padding-top:16px; color:#a4161a;
             border-top:2px solid #f1f5f9; }
.man-doc h3{ font-size:16px; margin:20px 0 6px; color:#111827; }
.man-doc p{ margin:9px 0; }
.man-doc img{ display:block; width:100%; height:auto; margin:14px 0;
              border:1px solid #e5e7eb; border-radius:10px; }
.man-intro{ color:#4b5563; font-size:15.5px; }
.man-req{ color:#c0392b; font-weight:800; }
.man-tip{ color:#6b7280; font-size:13.5px; }

.man-tldr{ background:#f0f9ff; border:1px solid #bae6fd; border-radius:12px;
           padding:12px 15px; margin:14px 0 6px; }

.man-lista{ margin:8px 0 8px 4px; padding-left:20px; }
.man-lista li{ margin:5px 0; }
.man-num{ list-style:decimal; }

.man-nota{ border-left:4px solid #94a3b8; background:#f8fafc; border-radius:0 10px 10px 0;
           padding:11px 14px; margin:14px 0; font-size:14.5px; }
.man-nota.man-ojo{ border-left-color:#d97706; background:#fffbeb; }
.man-nota.man-mal{ border-left-color:#c0392b; background:#fef2f2; }

.man-comparar{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; }
.man-comparar>div{ border-radius:10px; padding:11px 14px; font-size:14.5px; }
.man-bien{ background:#f0fdf4; border:1px solid #bbf7d0; }
.man-mal2{ background:#fef2f2; border:1px solid #fecaca; }

.man-tabla{ width:100%; border-collapse:collapse; margin:14px 0; font-size:14.5px; }
.man-tabla th,.man-tabla td{ border:1px solid #e5e7eb; padding:8px 10px; text-align:left;
                             vertical-align:top; }
.man-tabla th{ background:#f8fafc; font-weight:700; }

.man-faq dt{ font-weight:700; margin:14px 0 3px; color:#111827; }
.man-faq dd{ margin:0 0 0 0; color:#374151; }

.man-cierre{ margin-top:30px; padding-top:16px; border-top:2px solid #f1f5f9;
             color:#6b7280; font-size:14px; }

@media (max-width:640px){
  .man-doc{ padding:18px 16px 28px; border-radius:12px; }
  .man-doc h1{ font-size:21px; }
  .man-doc h2{ font-size:17.5px; }
  .man-comparar{ grid-template-columns:1fr; }
  .man-tabla{ font-size:13.5px; }
  .man-tabla th,.man-tabla td{ padding:6px 7px; }
}