/* =====================================================================
   f5node.es - manuales y documentacion
   Solo lo cargan docs.html y doc.html. La portada no arrastra nada de
   esto. Depende de las variables de f5node.css, que va antes.
   ===================================================================== */

/* =====================================================================
   INDICE DE MANUALES (docs.html)
   ===================================================================== */
.docs-tools{display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap; margin-bottom:26px}
.docs-search{display:flex; flex-direction:column; gap:7px; flex:1 1 280px; max-width:380px}
.docs-search input{
  width:100%; padding:11px 14px; background:var(--void-2); color:var(--ink);
  border:1px solid var(--line); font-family:var(--mono); font-size:12.5px;
  transition:border-color .18s;
}
.docs-search input::placeholder{color:var(--ink-faint)}
.docs-search input:focus{outline:none; border-color:var(--cyan)}
.docs-tools .filters{flex:1 1 auto}

.doc-cat + .doc-cat{margin-top:44px}
.doc-cat-head{padding-top:22px; border-top:1px solid var(--line); margin-bottom:20px; scroll-margin-top:90px}
.doc-cat-head h2{font-size:23px; font-weight:800}
.doc-cat-head p{color:var(--ink-dim); font-size:14px; margin:7px 0 0; max-width:60ch}

.doc-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.doc-card{
  display:flex; flex-direction:column; gap:9px; padding:20px 22px;
  border:1px solid var(--line); background:var(--void-2); transition:border-color .18s;
}
.doc-card:hover{border-color:rgba(255,255,255,.18)}
.doc-card::before{left:-1px; top:0; bottom:0; width:3px}
.doc-card h3{font-size:17px; font-weight:700; line-height:1.15}
.doc-card p{color:var(--ink-dim); font-size:13.5px; margin:0; flex:1}
.doc-card-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px}
.doc-card-tags{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}

.tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cyan-deep); border:1px solid var(--line); padding:3px 7px; white-space:nowrap;
}
a.tag:hover{border-color:var(--cyan); color:var(--cyan)}

/* =====================================================================
   LECTOR DE UN MANUAL (doc.html)
   Tres columnas: el arbol de manuales, el texto y el indice de la
   pagina. Por debajo de 1080 px las dos columnas laterales se pliegan
   en un <details>, que en escritorio va abierto y sin flecha.
   ===================================================================== */
.doc-shell{display:grid; grid-template-columns:232px minmax(0,1fr) 200px; gap:40px; padding-block:30px 20px; align-items:start}

.doc-nav,.doc-toc{position:sticky; top:88px; max-height:calc(100vh - 112px); overflow:auto; overscroll-behavior:contain}
.doc-nav > summary,.doc-toc > summary{display:none}
.doc-nav-cat{display:block; padding:16px 0 8px}
.doc-nav ul{list-style:none; margin:0; padding:0}
.doc-nav li a{
  display:block; padding:6px 0 6px 13px; font-size:13.5px; color:var(--ink-dim);
  border-left:1px solid var(--line); transition:color .18s, border-color .18s;
}
.doc-nav li a:hover{color:var(--ink); border-left-color:var(--ink-faint)}
.doc-nav li a[aria-current="page"]{color:var(--red); border-left-color:var(--red)}

.doc-toc ul{list-style:none; margin:8px 0 0; padding:0}
.doc-toc li a{
  display:block; padding:5px 0 5px 12px; font-size:12.5px; line-height:1.4;
  color:var(--ink-faint); border-left:1px solid var(--line); transition:color .18s, border-color .18s;
}
.doc-toc li.lvl-3 a{padding-left:24px; font-size:12px}
.doc-toc li a:hover{color:var(--ink-dim)}
.doc-toc li a.is-active{color:var(--cyan); border-left-color:var(--cyan)}

/* ---- cabecera del manual ---- */
.doc-crumbs{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px; flex-wrap:wrap}
.doc-crumbs a{color:var(--cyan-deep)}
.doc-crumbs a:hover{color:var(--cyan)}
.doc-mast h1{font-size:clamp(29px,3.6vw,44px); line-height:.96; font-weight:800; text-wrap:balance}
.doc-mast .lede{color:var(--ink-dim); font-size:16px; margin:16px 0 0; max-width:60ch}
.doc-meta{display:flex; gap:26px; flex-wrap:wrap; margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}
.doc-meta > span{display:flex; flex-direction:column; gap:3px}
.doc-tags{display:flex; gap:7px; flex-wrap:wrap; margin-top:16px}
.doc-cargando{color:var(--ink-faint); font-family:var(--mono); font-size:12px}

/* ---- cuerpo del manual ---- */
.doc-body{margin-top:34px; font-size:15.5px; line-height:1.72; color:var(--ink-dim); max-width:74ch}
.doc-body > *:first-child{margin-top:0}
.doc-body h2{font-size:25px; font-weight:800; color:var(--ink); margin:46px 0 14px; padding-top:22px; border-top:1px solid var(--line); scroll-margin-top:90px}
.doc-body h3{font-size:18.5px; font-weight:700; color:var(--ink); margin:32px 0 10px; scroll-margin-top:90px}
.doc-body h4{font-size:15.5px; font-weight:700; color:var(--ink); margin:24px 0 8px}
.doc-body p{margin:0 0 16px}
.doc-body strong{color:var(--ink); font-weight:600}
.doc-body a{color:var(--cyan); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.doc-body a:hover{color:var(--ink)}
.doc-body ul,.doc-body ol{margin:0 0 16px; padding-left:22px}
.doc-body li{margin:5px 0}
.doc-body li::marker{color:var(--red)}
.doc-body hr{border:0; border-top:1px solid var(--line); margin:34px 0}
.doc-body code{font-family:var(--mono); font-size:13px; color:var(--cyan); background:rgba(var(--cyan-rgb),.07); padding:1px 6px}
.doc-body mark{background:rgba(var(--red-rgb),.16); color:var(--ink); padding:1px 4px; box-shadow:inset 0 -1px 0 rgba(var(--red-rgb),.5)}
.doc-body blockquote{margin:0 0 16px; padding:2px 0 2px 18px; border-left:2px solid var(--line); color:var(--ink-faint)}

/* ---- bloques de codigo ---- */
.doc-code{border:1px solid var(--line); background:var(--void-2); margin:0 0 20px}
.doc-code-head{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:9px 14px; background:var(--panel); border-bottom:1px solid var(--line-soft)}
.doc-code-name{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-dim)}
.doc-code-head .cbtn{padding:5px 11px; font-size:9.5px}
.doc-code pre{margin:0; padding:14px 16px; overflow-x:auto; font-family:var(--mono); font-size:12.5px; line-height:1.75; color:var(--ink-dim)}

/* ---- avisos ---- */
.doc-callout{border:1px solid var(--line); border-left-width:3px; background:var(--void-2); padding:15px 18px; margin:0 0 20px}
.doc-callout-t{font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:6px}
.doc-callout-b > *:last-child{margin-bottom:0}
.doc-callout.is-nota{border-left-color:var(--cyan)}
.doc-callout.is-nota .doc-callout-t{color:var(--cyan)}
.doc-callout.is-aviso{border-left-color:var(--red)}
.doc-callout.is-aviso .doc-callout-t{color:var(--red)}
.doc-callout.is-cuidado{border-left-color:var(--warn)}
.doc-callout.is-cuidado .doc-callout-t{color:var(--warn)}
.doc-callout.is-truco{border-left-color:var(--ok)}
.doc-callout.is-truco .doc-callout-t{color:var(--ok)}

/* ---- tablas ---- */
.doc-table{overflow-x:auto; margin:0 0 20px; border:1px solid var(--line)}
.doc-body table{border-collapse:collapse; width:100%; font-size:14px}
.doc-body th,.doc-body td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line-soft)}
.doc-body th{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-deep); background:var(--panel); white-space:nowrap}
.doc-body tr:last-child td{border-bottom:0}

/* ---- capturas y videos ----
   El pie de foto es la cursiva suelta que marked deja detras de la
   imagen, la misma convencion que neoncm.es/manuales.php. */
.doc-zoom{display:block; width:100%; padding:0; border:1px solid var(--line); background:var(--void-2); cursor:zoom-in; transition:border-color .18s}
.doc-zoom:hover{border-color:var(--cyan-deep)}
/* Las imagenes del cuerpo son capturas y van a todo el ancho, pero las
   de dentro de una tabla son iconos de 16 px: si heredan el width:100%
   revientan la fila. */
.doc-body img{display:block; width:100%; height:auto}
.doc-body td img,.doc-body th img{display:inline-block; width:auto; max-width:22px; vertical-align:middle}
.doc-body p.doc-pie{margin-top:-8px; font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); line-height:1.6}
.doc-body p.doc-pie em{font-style:normal}

.doc-media{margin:0 0 20px}
.doc-media video{display:block; width:100%; border:1px solid var(--line); background:#000}
.doc-media figcaption{margin-top:7px; font-family:var(--mono); font-size:11.5px; color:var(--ink-faint)}

.doc-yt{position:relative; display:grid; place-items:center; gap:10px; aspect-ratio:16/9; width:100%; border:1px solid var(--line); background:linear-gradient(150deg,var(--panel),var(--void-2)); cursor:pointer}
.doc-yt:hover{border-color:var(--red)}
.doc-yt-play{display:grid; place-items:center; width:64px; height:64px; color:var(--red); border:2px solid var(--red); border-radius:50%; transition:background .18s, color .18s}
.doc-yt:hover .doc-yt-play{background:var(--red); color:#0b0b10}
.doc-yt-k{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.doc-yt.is-on{display:block; cursor:default; border-color:var(--line)}
.doc-yt iframe{display:block; width:100%; height:100%; border:0}

/* ---- visor de capturas ---- */
.doc-lightbox{border:0; padding:0; background:transparent; max-width:100vw; max-height:100vh}
.doc-lightbox::backdrop{background:rgba(4,4,7,.92)}
.doc-lightbox figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:12px}
.doc-lightbox-shot{position:relative}
.doc-lightbox img{display:block; border:1px solid var(--line)}
.doc-lightbox-close{
  position:absolute; top:-1px; right:-1px; display:grid; place-items:center;
  width:38px; height:38px; background:var(--red); color:#0b0b10;
}
.doc-lightbox figcaption{font-family:var(--mono); font-size:12px; color:var(--ink-dim); text-align:center; max-width:70ch}

/* ---- anterior y siguiente ---- */
.doc-vecinos{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:52px; padding-top:26px; border-top:1px solid var(--line)}
.doc-vecino{display:flex; flex-direction:column; gap:5px; padding:16px 18px; border:1px solid var(--line); transition:border-color .18s}
.doc-vecino:hover{border-color:var(--red)}
.doc-vecino b{font-family:var(--display); font-weight:700; font-size:15.5px; text-transform:uppercase; color:var(--ink)}
.doc-vecino.is-next{grid-column:2; text-align:right; align-items:flex-end}
.doc-vecino.is-prev{grid-column:1}

.doc-fallo{border:1px solid var(--line); border-left:3px solid var(--red); background:var(--void-2); padding:24px 26px; color:var(--ink-dim)}
.doc-fallo code{font-family:var(--mono); font-size:13px; color:var(--cyan)}
.doc-fallo .btn{margin-top:8px}

@media (max-width:1080px){
  .doc-shell{grid-template-columns:1fr; gap:22px}
  .doc-nav,.doc-toc{position:static; max-height:none; overflow:visible; border:1px solid var(--line); background:var(--void-2)}
  .doc-nav > summary,.doc-toc > summary{display:block; padding:13px 16px; cursor:pointer; list-style:none}
  .doc-nav > summary::-webkit-details-marker,.doc-toc > summary::-webkit-details-marker{display:none}
  .doc-nav > summary::after,.doc-toc > summary::after{content:"+"; float:right; color:var(--red); font-family:var(--mono)}
  .doc-nav[open] > summary::after,.doc-toc[open] > summary::after{content:"\2013"}
  .doc-nav-in,.doc-toc ul{padding:0 16px 14px}
  .doc-toc{order:-1}

  /* La cabecera pasa de 66 a ~110 px al bajar el menu a su propia linea,
     asi que el ancla tiene que dejar mas hueco o el titulo queda debajo. */
  .doc-body h2,.doc-body h3,.doc-cat-head{scroll-margin-top:126px}
}
@media (max-width:760px){
  .doc-body{font-size:15px}
  .doc-vecinos{grid-template-columns:1fr}
  .doc-vecino.is-next{grid-column:1; text-align:left; align-items:flex-start}
  .doc-meta{gap:18px}
}