/* Guias de configuracion de Novrix Tech — Fase 47.
   GENERADO NO: este fichero se edita a mano; los HTML de guia si se generan.

   POR QUE UNA HOJA APARTE Y NO ESTILOS EN LINEA

   El resto del sitio lleva los estilos en el atributo style de cada elemento,
   que para una landing de una pantalla es llevadero. Una guia tiene diez
   capitulos, siete tablas y diecinueve bloques de consola; en linea seria
   ilegible y se repetiria en cada guia nueva. Aparte, ademas, se cachea una vez
   y sirve para todas.

   LA PALETA NO ES LA DEL ARTEFACTO DE ORIGEN

   El diseño de partida traia IBM Plex desde Google Fonts y un teal propio.
   Aqui serian una segunda marca dentro de la misma pagina, y la primera
   peticion externa de todo el sitio: Inter va autoalojada a proposito.

   EL ACENTO DE TEXTO NO ES EL CIAN DE LA MARCA

   Medido con la formula de contraste de la WCAG sobre blanco:

       #06B6D4  cian de la marca   2.43   NO llega a 4.5
       #0891B2  un paso mas oscuro 3.68   NO llega
       #0E7490  cyan-700           5.36   OK

   Asi que el cian de la marca se queda donde NO es texto (barras, la viñeta
   del rotulo, el borde del capitulo activo) y el texto usa #0E7490. En la
   consola, sobre navy, el cian vivo da 7.35 y ahi si se usa. */

.g-doc{
  --tinta:#0F172A; --tinta-2:#475569; --tinta-3:#64748B;
  --linea:#E2E8F0; --linea-2:#F1F5F9;
  --fondo:#FFFFFF; --fondo-2:#F8FAFC;
  --acento:#0E7490;        /* texto: 5.36 sobre blanco */
  --acento-vivo:#06B6D4;   /* adorno: nunca texto sobre blanco */
  --consola:#0F172A; --consola-txt:#CBD5E1; --consola-prompt:#22D3EE;
  --consola-com:#7C93A8; --consola-ok:#6EE7B7;
  --nota:#1D4ED8;    --nota-bg:#EFF6FF;
  --cuidado:#B45309; --cuidado-bg:#FFFBEB;
  --aviso:#B91C1C;   --aviso-bg:#FEF2F2;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --ancho-texto:72ch;
}

/* ---------- armazon ---------- */
.g-doc{display:grid;grid-template-columns:280px minmax(0,1fr);max-width:1200px;margin:0 auto;
  align-items:start;color:var(--tinta)}
.g-lateral{position:sticky;top:72px;align-self:start;max-height:calc(100vh - 72px);
  overflow-y:auto;border-right:1px solid var(--linea);padding:32px 20px 48px 28px}
.g-lateral .g-rotulo{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);margin:0 0 14px;display:flex;align-items:center;gap:8px}
.g-lateral .g-rotulo::before{content:"";width:8px;height:8px;border-radius:2px;
  background:var(--acento-vivo);flex:none}
.g-lateral ol{list-style:none;margin:0;padding:0;counter-reset:cap;font-size:13.5px}
.g-lateral ol>li{counter-increment:cap;margin:1px 0}
.g-lateral a{display:block;text-decoration:none;color:var(--tinta-2);padding:5px 9px;
  border-radius:6px;line-height:1.4}
.g-lateral ol>li>a::before{content:counter(cap) ".\00a0\00a0";color:var(--acento);
  font-weight:700;font-variant-numeric:tabular-nums}
.g-lateral a:hover{background:var(--linea-2);color:var(--tinta)}
.g-lateral a[aria-current="true"]{background:var(--linea-2);color:var(--tinta);font-weight:600;
  box-shadow:inset 2px 0 0 var(--acento-vivo)}
.g-lateral ul{list-style:none;margin:0 0 4px;padding:0 0 0 22px;font-size:12.5px}
.g-lateral ul a{padding:3px 9px;color:var(--tinta-3)}

.g-cuerpo{padding:0 clamp(20px,4vw,56px) 96px;min-width:0}

/* ---------- cabecera del documento ---------- */
.g-cab{padding:44px 0 26px;border-bottom:2px solid var(--tinta);margin-bottom:6px}
.g-cab .g-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--acento);font-weight:700;margin:0}
.g-cab h1{font-size:clamp(28px,3.6vw,40px);line-height:1.1;margin:14px 0 12px;font-weight:800;
  letter-spacing:-.01em;text-wrap:balance}
.g-cab .g-bajada{font-size:17px;color:var(--tinta-2);margin:0;font-weight:300;line-height:1.6;
  max-width:60ch}
.g-ficha{margin:26px 0 0;border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.g-ficha table{width:100%;border-collapse:collapse;font-size:13px}
.g-ficha td{padding:9px 14px;border-bottom:1px solid var(--linea-2);vertical-align:top}
.g-ficha tr:last-child td{border-bottom:0}
.g-ficha td:first-child{width:170px;color:var(--tinta-3);font-weight:500;background:var(--fondo-2)}

/* ---------- texto ---------- */
.g-cuerpo section{padding-top:30px}
.g-cuerpo h2{font-size:25px;font-weight:800;margin:1.1em 0 .45em;letter-spacing:-.01em;
  text-wrap:balance;scroll-margin-top:88px}
.g-cuerpo h3{font-size:18px;font-weight:700;margin:1.8em 0 .4em;scroll-margin-top:88px}
.g-cuerpo h4{font-size:15px;font-weight:600;margin:1.6em 0 .35em;scroll-margin-top:88px}
.g-cuerpo .num{color:var(--acento);font-variant-numeric:tabular-nums;margin-right:.5em}
.g-cuerpo p,.g-cuerpo li{max-width:var(--ancho-texto);font-size:15.5px;line-height:1.7}
.g-cuerpo p{margin:.7em 0;color:var(--tinta-2)}
.g-cuerpo li{color:var(--tinta-2);margin:.3em 0}
.g-cuerpo strong{font-weight:600;color:var(--tinta)}
.g-cuerpo a{color:var(--acento);text-underline-offset:2px}
.g-cuerpo .g-entrada{font-size:17px;color:var(--tinta-2);line-height:1.65}
.g-cuerpo ul,.g-cuerpo ol.g-lista{padding-left:1.3em;margin:.6em 0}
.g-fin{border:0;border-top:1px solid var(--linea);margin:44px 0 0}
.g-pie-doc{margin-top:20px;font-size:12.5px;color:var(--tinta-3);line-height:1.6}
.g-pie-doc p{max-width:none;font-size:12.5px;color:var(--tinta-3)}

/* ---------- consola ---------- */
.g-doc pre{background:var(--consola);color:var(--consola-txt);border-radius:10px;
  padding:16px 18px;overflow-x:auto;font-size:13px;line-height:1.65;margin:1em 0;
  font-family:var(--mono);-webkit-text-size-adjust:100%}
.g-doc pre .c{color:var(--consola-com)}
.g-doc pre .p{color:var(--consola-prompt)}
.g-doc pre .o{color:var(--consola-ok)}
.g-doc :is(p,li,td) code{background:var(--linea-2);color:var(--tinta);padding:.1em .4em;
  border-radius:4px;font-size:.88em;border:1px solid var(--linea);font-family:var(--mono)}
.g-doc pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.g-rot{font-size:12.5px;font-weight:600;color:var(--tinta-2);margin:1.6em 0 -.2em;
  display:flex;align-items:center;gap:8px;max-width:none}
.g-rot::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--acento-vivo);flex:none}
.g-rot .g-so{font-weight:400;color:var(--tinta-3)}
.g-rot+pre{margin-top:.7em}

/* ---------- tablas ---------- */
.g-tabla{overflow-x:auto;margin:1.1em 0;border:1px solid var(--linea);border-radius:12px}
.g-tabla table{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--fondo);
  min-width:520px}
.g-tabla th{background:var(--fondo-2);color:var(--tinta);text-align:left;padding:10px 14px;
  font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
  white-space:nowrap;border-bottom:1px solid var(--linea)}
.g-tabla td{padding:9px 14px;border-bottom:1px solid var(--linea-2);vertical-align:top;
  color:var(--tinta-2);line-height:1.55}
.g-tabla tr:last-child td{border-bottom:0}
.g-tabla td.m,.g-tabla td .m{font-family:var(--mono);font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--tinta)}
.g-tabla td.puerto{font-family:var(--mono);font-weight:700;color:var(--acento)}

/* ---------- avisos ---------- */
.g-aviso{display:grid;grid-template-columns:4px 1fr;gap:0 16px;margin:1.3em 0;
  border:1px solid var(--linea);border-radius:10px;overflow:hidden;background:var(--fondo)}
.g-aviso .g-barra{grid-row:1/3}
.g-aviso .g-tit{padding:11px 0 2px;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em}
.g-aviso .g-txt{padding:0 18px 13px 0}
.g-aviso .g-txt p{margin:.3em 0;max-width:64ch;font-size:14.5px}
.g-aviso .g-txt p:first-child{margin-top:0}
.g-aviso .g-txt ul{margin:.4em 0}
.g-aviso .g-txt li{font-size:14.5px}
.g-aviso.nota .g-barra{background:var(--nota)}    .g-aviso.nota .g-tit{color:var(--nota)}
.g-aviso.cuidado .g-barra{background:var(--cuidado)} .g-aviso.cuidado .g-tit{color:var(--cuidado)}
.g-aviso.peligro .g-barra{background:var(--aviso)}   .g-aviso.peligro .g-tit{color:var(--aviso)}

/* ---------- rejilla de caracteristicas ---------- */
.g-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;
  margin:1.2em 0}
.g-ficha-c{border:1px solid var(--linea);border-radius:12px;padding:16px 18px;background:var(--fondo)}
.g-ficha-c .g-etq{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--acento);
  font-weight:700;display:block;margin-bottom:8px}
.g-ficha-c h4{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--tinta)}
.g-ficha-c p{margin:0;font-size:13.5px;color:var(--tinta-3);max-width:none;line-height:1.55}

/* ---------- pasos ---------- */
ol.g-pasos{list-style:none;counter-reset:paso;padding:0;margin:1.3em 0}
ol.g-pasos>li{counter-increment:paso;position:relative;padding:1px 0 20px 46px;
  border-left:2px solid var(--linea);margin-left:15px;max-width:none}
ol.g-pasos>li:last-child{border-left-color:transparent;padding-bottom:0}
ol.g-pasos>li::before{content:counter(paso);position:absolute;left:-15px;top:-2px;width:30px;
  height:30px;border-radius:50%;background:var(--acento);color:#FFFFFF;display:grid;
  place-items:center;font-weight:700;font-size:13px;font-family:var(--mono)}
ol.g-pasos>li p{margin:.2em 0 .5em}
ol.g-pasos>li .g-paso-t{font-weight:700;color:var(--tinta);display:block;margin-bottom:2px;
  font-size:15.5px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .g-doc{grid-template-columns:1fr}
  .g-lateral{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--linea);
    padding:20px}
  .g-lateral ol{columns:2;font-size:13px}
  .g-lateral ul{display:none}
  .g-cuerpo{padding-left:20px;padding-right:20px}
  .g-cab{padding-top:28px}
}
@media (max-width:560px){
  .g-lateral ol{columns:1}
  .g-ficha td:first-child{width:120px}
}

/* Sangria francesa en el indice lateral. Sin esto, "9. Consideraciones de
   seguridad" parte en dos lineas y la segunda arranca pegada al borde, debajo
   del numero, en vez de alinearse con el texto del capitulo. */
.g-lateral ol>li>a{padding-left:32px;text-indent:-23px}

/* ---------- indice de la seccion ---------- */
/* 1080px, no 880: es el mismo ancho que usa el hero y el resto del sitio.
   Con 880 el listado arrancaba 100px mas adentro que el titulo de arriba, y esa
   desalineacion se lee como un error de maquetado. El ancho comodo de lectura
   se controla en el parrafo de cada fila, no en el contenedor. */
.g-listado{max-width:1080px;margin:0 auto}
.g-grupo{margin-bottom:44px}
.g-grupo:last-child{margin-bottom:0}
.g-grupo>h2{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#64748B;margin:0 0 4px;padding-bottom:12px;border-bottom:1px solid #E2E8F0;
  display:flex;align-items:center;gap:9px}
.g-grupo>h2::before{content:"";width:9px;height:9px;border-radius:2px;background:#06B6D4;flex:none}
.g-fila{display:block;padding:22px 4px;border-bottom:1px solid #F1F5F9;color:#0F172A;
  text-decoration:none}
.g-fila:last-child{border-bottom:0}
.g-fila:hover{background:#F8FAFC}
.g-fila:hover h3{color:#0E7490}
.g-fila h3{font-size:19px;font-weight:700;margin:0 0 7px;line-height:1.35;color:#0F172A}
.g-fila p{font-size:14.5px;line-height:1.65;color:#64748B;margin:0 0 10px;max-width:68ch}
.g-fila .g-meta{font-size:12.5px;color:#94A3B8;font-weight:500;display:flex;gap:14px;
  flex-wrap:wrap;align-items:center}
.g-fila .g-meta .g-sep{color:#CBD5E1}
@media (max-width:560px){
  .g-fila{padding:18px 0}
  .g-fila h3{font-size:17px}
}