/* ============================================================
   COMPARTIR ESTA AYUDA  —  copiar enlace · WhatsApp · correo
   Lo inyecta _menu_ayuda.php en TODOS los manuales, incluso
   dentro del marco del índice (?embed=1).
   ============================================================ */
.ayuda-compartir-btn {
    display:inline-flex !important; align-items:center !important; gap:6px !important;
    flex:0 0 auto !important;
    height:36px !important; padding:0 13px !important; border-radius:9px !important;
    border:1px solid rgba(22,163,74,.95) !important; background:rgba(22,163,74,.9) !important;
    color:#fff !important; font-size:12.5px !important; font-weight:600 !important;
    text-decoration:none !important; cursor:pointer !important;
}
.ayuda-compartir-btn:hover { background:#16a34a !important; color:#fff !important; }

.ayuda-compartir-panel {
    position:fixed; inset:0; background:rgba(15,23,42,.55);
    display:none; align-items:center; justify-content:center;
    z-index:9999; padding:16px;
}
.ayuda-compartir-panel.abierto { display:flex; }

.ayuda-compartir-caja {
    background:#fff; border-radius:10px; max-width:520px; width:100%;
    padding:20px; box-shadow:0 18px 50px rgba(0,0,0,.3);
}
.ayuda-compartir-caja h3 { margin:0 0 6px 0; font-size:1.05rem; color:#0f172a; }
.ayuda-compartir-caja p  { margin:0 0 12px 0; font-size:.85rem; color:#475569; line-height:1.5; }
.ayuda-compartir-caja input[type="text"] {
    width:100%; padding:9px 10px; border:1px solid #cbd5e1; border-radius:6px;
    font-size:.82rem; color:#0f172a; background:#f8fafc;
}

/* A quién se le manda (opcional): número de WhatsApp / correo */
.ayuda-compartir-destino { margin-top:12px; }
.ayuda-compartir-destino label {
    display:block; font-size:.75rem; font-weight:700; color:#334155;
    text-transform:uppercase; letter-spacing:.03em; margin-bottom:4px;
}
.ayuda-compartir-destino input { margin-bottom:8px; }
.ayuda-compartir-nota { font-size:.74rem; color:#64748b; margin:0 0 2px 0 !important; }

.ayuda-compartir-estado { font-size:.82rem; line-height:1.45; margin-top:10px; min-height:1px; }
.ayuda-compartir-estado.bien { color:#15803d; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:6px; padding:8px 10px; }
.ayuda-compartir-estado.malo { color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; border-radius:6px; padding:8px 10px; }

.ayuda-compartir-acciones { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.ayuda-compartir-acciones button,
.ayuda-compartir-acciones a {
    flex:1; min-width:150px; white-space:nowrap; text-align:center; padding:9px 12px;
    border-radius:6px; border:0; font-size:.85rem; font-weight:700; cursor:pointer;
    text-decoration:none;
}
.acc-copiar   { background:#0891b2; color:#fff; }
.acc-whatsapp { background:#25d366; color:#fff; }
.acc-correo   { background:#2563eb; color:#fff; }
.acc-cerrar   { background:#e2e8f0; color:#0f172a; }
.ayuda-compartir-acciones a:hover,
.ayuda-compartir-acciones button:hover { filter:brightness(1.06); }
.ayuda-compartir-acciones button[disabled] { opacity:.6; cursor:progress; }

@media (max-width:520px) {
    .ayuda-compartir-acciones button,
    .ayuda-compartir-acciones a { flex:1 1 100%; }
}

/* ============================================================
   POR TEMA (#1230) — un botoncito en cada encabezado del manual
   Lo cuelga _ayuda_compartir.js en los encabezados con `id`
   (los mismos destinos del índice «Contenido»). Manda el manual
   abierto en ESE tema, no en el principio de la página.
   ============================================================ */
.ayuda-tema-btn {
    display:inline-flex; align-items:center; gap:5px;
    vertical-align:middle; margin-left:10px;
    padding:2px 9px; border-radius:20px;
    border:1px solid #bbf7d0; background:#f0fdf4; color:#15803d;
    font-size:11.5px; font-weight:700; font-family:inherit;
    line-height:1.7; white-space:nowrap; cursor:pointer;
    opacity:.75; transition:opacity .15s, background .15s, color .15s;
}
.ayuda-tema-btn:hover { opacity:1; background:#25d366; border-color:#25d366; color:#fff; }
.ayuda-tema-btn i { font-size:12px; }

/* En pantallas angostas el rótulo se come el ancho: queda solo el icono.
   El botón NO se achica con él: en el celular se toca con el dedo, así que
   se le deja alto y ancho de toque (mínimo 30 px). */
@media (max-width:700px) {
    .ayuda-tema-btn span { display:none; }
    .ayuda-tema-btn {
        opacity:1; padding:0 10px;
        min-width:34px; min-height:30px; justify-content:center;
    }
    .ayuda-tema-btn i { font-size:15px; }
}

/* El ancla no debe quedar pegada al borde de arriba (ni bajo una franja fija). */
.ayuda-content h2[id], .ayuda-content h3[id], .ayuda-content section[id] { scroll-margin-top:90px; }

/* Al imprimir el manual, el botón no pinta nada. */
@media print { .ayuda-tema-btn, .ayuda-compartir-btn { display:none !important; } }

/* Rótulo del panel: dice si va el manual completo o un tema. */
.ayuda-compartir-alcance {
    display:none; margin:0 0 10px 0; padding:8px 10px;
    background:#f0f9ff; border:1px solid #bae6fd; border-radius:6px;
    font-size:.8rem; color:#075985; line-height:1.5;
}
.ayuda-compartir-alcance.visible { display:block; }
.ayuda-compartir-alcance a { color:#0369a1; font-weight:700; }

/* ── «Compartir desde este teléfono» (#1230) ──────────────────
   Sale del WhatsApp del PROPIO usuario (navigator.share), no del
   nuestro: se elige el contacto de la lista, sin escribir el número.
   Nace oculto y el JS lo muestra SOLO donde el compartir del sistema
   existe de verdad — un botón que no hace nada es peor que nada. */
.acc-nativo { display:none; background:#0f766e; color:#fff; }
.acc-nativo.disponible { display:block; flex:1 1 100%; }