/* ============================================================
   IEbridge — documentación.

   Rehecha el 2026-09-30 sobre extensionbooster.net/docs (medido,
   no a ojo), con nuestros colores y nuestra fuente: una portada
   con tarjetas (/docs) y una página por tema (/docs/install…).
   Índice pegajoso de 256 px a la izquierda y el contenido a la
   derecha, hasta 896 px. Por debajo de 980 px el índice pasa
   DEBAJO del contenido: arriba empujaba el tema fuera de la
   pantalla.

   Reutiliza las variables y la tipografía de styles.css; aquí
   solo va lo propio de la documentación.
   ============================================================ */

.docs-wrap{width:min(calc(100% - 32px),1184px);margin:0 auto;
  padding:calc(var(--header-h) + 40px) 0 96px}

.docs-layout{display:grid;grid-template-columns:256px minmax(0,896px);column-gap:32px;
  align-items:start}

/* ── Índice ─────────────────────────────────────────────── */
.docs-toc{position:sticky;top:calc(var(--header-h) + 24px);
  max-height:calc(100vh - var(--header-h) - 48px);overflow-y:auto;padding:0 8px 8px 0}
.docs-toc-group+.docs-toc-group{margin-top:20px}
.docs-toc-title{margin:0 0 6px;padding-left:12px;font-size:12px;font-weight:700;line-height:16px;
  color:var(--slate-500)}
.docs-toc ul{margin:0;padding:0;list-style:none}
.docs-toc li+li{margin-top:2px}
.docs-toc a{display:block;padding:6px 12px;border-radius:6px;font-size:14px;line-height:20px;
  color:var(--slate-500);transition:background-color .15s,color .15s}
.docs-toc a:hover{background:var(--slate-50);color:var(--slate-900)}
.docs-toc a.is-active{background:var(--slate-100);color:var(--slate-900);font-weight:600}

/* ── Columna de contenido ───────────────────────────────── */
.docs-body{min-width:0}

/* Cabecera: la de la portada y la de cada tema son la misma pieza. */
.docs-head{padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--slate-200)}
.docs-head h1,.docs-sec>h1{margin:0;font-size:clamp(28px,4vw,36px);font-weight:700;line-height:1.1;
  letter-spacing:-.03em;color:var(--slate-900)}
.docs-lead,.docs-page-lead{max-width:786px;margin:12px 0 0;font-size:18px;line-height:1.625;color:var(--slate-500)}

/* Migas de pan, solo en los temas. */
.docs-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 16px;
  font-size:14px;line-height:20px;color:var(--slate-500)}
.docs-sec .docs-crumbs a{color:var(--slate-500);font-weight:400}
.docs-sec .docs-crumbs a:hover{color:var(--blue-600)}
.docs-crumbs [aria-current]{color:var(--slate-900)}
.docs-crumbs span[aria-hidden]{color:var(--slate-300)}

/* ── Portada: grupos de tarjetas ────────────────────────── */
.docs-group{margin:40px 0 16px;font-size:24px;font-weight:700;line-height:1.25;letter-spacing:-.02em;
  color:var(--slate-900)}
.docs-head+.docs-group{margin-top:0}
.docs-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.docs-card{position:relative;display:block;padding:17px 44px 18px 17px;border:1px solid var(--slate-200);
  border-radius:12px;background:#fff;transition:border-color .15s,box-shadow .15s}
.docs-card:hover{border-color:var(--blue-300);box-shadow:var(--shadow-card)}
.docs-card h3{margin:0;font-size:16px;font-weight:700;line-height:1.4;color:var(--slate-900)}
.docs-card p{margin:6px 0 0;font-size:14px;line-height:1.6;color:var(--slate-500)}
.docs-card-arrow{position:absolute;top:19px;right:17px;width:16px;height:16px;fill:none;stroke:var(--slate-500);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s,transform .15s}
.docs-card:hover .docs-card-arrow{stroke:var(--blue-600);transform:translateX(2px)}

/* ── Un tema ────────────────────────────────────────────── */
/* La entradilla cierra la cabecera con la misma raya que la portada. */
.docs-sec>.docs-page-lead{padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--slate-200)}
.docs-sec>h2{margin:36px 0 12px;font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--slate-900)}
.docs-sec>h3{margin:32px 0 10px;font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--slate-900)}
.docs-sec p{max-width:760px;margin:0 0 16px;font-size:16px;line-height:1.7;color:var(--slate-600)}
.docs-sec>p.docs-page-lead{max-width:786px;font-size:18px;line-height:1.625;color:var(--slate-500)}
.docs-sec ul,.docs-sec ol{max-width:760px;margin:0 0 18px;padding-left:22px;
  font-size:16px;line-height:1.7;color:var(--slate-600)}
.docs-sec li{margin:0 0 8px}
.docs-sec li::marker{color:var(--slate-400)}
.docs-sec strong{color:var(--slate-900);font-weight:600}
.docs-sec a{color:var(--blue-600);font-weight:500}

/* Bloque de aviso: lo que puede salir mal si se ignora. */
.docs-note{max-width:760px;margin:0 0 18px;padding:14px 16px;border:1px solid var(--slate-200);
  border-left:3px solid var(--blue-600);border-radius:0 8px 8px 0;background:var(--slate-50);
  font-size:15px;line-height:1.65;color:var(--slate-600)}
.docs-sec p.docs-note{font-size:15px}
.docs-note strong{color:var(--slate-900)}
/* Los temas que solo sirven con Enterprise lo dicen bajo el título, con
   el mismo azul que el distintivo del plan en los paneles. */
.docs-plan{display:inline-block;margin:12px 0 0;padding:3px 11px;border-radius:999px;
  background:var(--blue-50);color:var(--blue-700);font-size:13px;font-weight:600}
.docs-sec p.docs-plan{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--blue-700)}

code,.docs-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px}
.docs-sec code{padding:2px 6px;border:1px solid var(--slate-200);border-radius:4px;
  background:var(--slate-50);color:var(--slate-800)}
pre.docs-code{max-width:760px;margin:0 0 18px;padding:14px 16px;overflow-x:auto;border:1px solid var(--slate-200);
  border-radius:8px;background:var(--slate-50);line-height:1.6;color:var(--slate-800)}
pre.docs-code code{padding:0;border:0;background:none}

/* ── Anterior / siguiente ───────────────────────────────── */
.docs-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:48px 0 0;
  padding-top:32px;border-top:1px solid var(--slate-200)}
.docs-pager a{display:flex;flex-direction:column;gap:4px;padding:14px 18px;border:1px solid var(--slate-200);
  border-radius:12px;transition:border-color .15s}
.docs-pager a:hover{border-color:var(--blue-300)}
.docs-pager-next{grid-column:2;align-items:flex-end;text-align:right}
.docs-pager-label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--slate-500)}
.docs-pager-label svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.docs-pager-title{font-size:15px;font-weight:600;color:var(--slate-900)}
.docs-pager a:hover .docs-pager-title{color:var(--blue-700)}

/* ── Bloque final de contacto ───────────────────────────── */
.docs-help{margin-top:48px;padding:24px 26px;border:1px solid var(--slate-200);border-radius:12px;
  background:var(--slate-50)}
.docs-help h2{margin:0 0 8px;font-size:20px;color:var(--slate-900)}
.docs-help p{margin:0 0 16px;font-size:15px;line-height:1.65;color:var(--slate-600)}

@media(max-width:980px){
  .docs-layout{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .docs-toc{order:2;position:static;max-height:none;overflow:visible;padding:32px 0 0;
    border-top:1px solid var(--slate-200)}
}
@media(max-width:640px){
  .docs-wrap{padding-top:calc(var(--header-h) + 28px)}
  .docs-cards,.docs-pager{grid-template-columns:minmax(0,1fr)}
  .docs-pager-next{grid-column:auto}
  .docs-help{padding:20px 18px}
}