, no el del documento (§6 del brief). */ #body.help-page { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink); -webkit-font-smoothing: antialiased; } .help-page .content-wrapper { display: block; /* En px a propósito: bootstrap.css:1079 fija html { font-size: 10px }, así que acá 1rem vale 10px y no 16. No pasar esto a rem. */ max-width: 992px; } .help-page .clear-fix::after { content: ""; display: table; clear: both; } /* 3. Jerarquía de títulos ------------------------------------------------- */ /* En el detalle, el

del cuerpo es la firma del endpoint: va en mono. / .help-page h1 { font-family: var(--mono); font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 12px; word-break: break-word; } / En el listado, cada

abre un grupo de endpoints (un controller). */ .help-page h2 { font-family: var(--sans); font-size: 25px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin: 56px 0 4px; padding-top: 20px; border-top: 1px solid var(--ink); scroll-margin-top: 24px; } /* El primer grupo no lleva regla superior: ya lo separa el borde de la caja. */ .help-page .content-wrapper > h2:first-child, .help-page > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } /* «Petición», «Respuesta» dentro del detalle. */ .help-page h2 + h3, .help-page h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--ink); margin: 32px 0 12px; } /* 4. Texto y enlaces ------------------------------------------------------ */ /* font-family, font-size y line-height NO son redundantes con #body.help-page: slate.css:38 declara `p { font: 12px/1.7em 'Open Sans', arial, sans-serif; }` y el atajo `font` fija tamaño Y familia sobre cada

, así que la herencia desde #body.help-page nunca llega. Sin estas tres declaraciones toda la prosa de la ayuda sale a 12px en Arial ('Open Sans' no tiene @font-face en el bundle), y las reglas de 15px de .api-documentation, .parameter-documentation y .enum-description no pintan un solo carácter, porque todo el texto de esas celdas vive dentro de un

(ApiGroup.cshtml:28,32; Parameters.cshtml:21; EnumTypeModelDescription.cshtml:14,17). `inherit` devuelve el

al tamaño de su celda. No borrar por «redundantes». */ .help-page p { margin: 0 0 12px; font-family: var(--sans); font-size: inherit; line-height: 1.6; color: var(--ink-muted); text-wrap: pretty; } /* El párrafo vacío que emite ApiGroup.cshtml:15 no debe dejar hueco. */ .help-page p:empty { display: none; } .help-page a { color: var(--link); text-decoration: none; transition: color 150ms ease; } .help-page a:hover, .help-page a:focus { color: var(--link-hover); text-decoration: underline; } /* Enlace suelto al modelo de datos (ResultadoCAF, Certificacion…). */ .help-page > a, .help-page div > a { font-family: var(--mono); font-size: 14px; } /* 5. Tablas --------------------------------------------------------------- */ /* No hay envoltorio con scroll (§8.6): la propia tabla resuelve el ancho. */ .help-page-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0 0 24px; background: transparent; border-top: 1px solid var(--ink); } .help-page-table thead th { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); text-align: left; /* Igual que los . Sin esto la th vale el `middle` por defecto y, cuando «Información adicional» envuelve en dos líneas, las otras tres etiquetas quedan centradas contra ese bloque: 9,6px por debajo de la primera línea. Con `top` las cuatro arrancan en la misma. */ vertical-align: top; padding: 14px 12px; border: 0; border-bottom: 1px solid var(--border); background: transparent; /* La cabecera envuelve a propósito, en todos los anchos. Con `nowrap` la th más larga («Información adicional») mide 171,4px en la mono de 12px con su letter-spacing, y `table-layout: fixed` no le da más de 152px de contenido ni con la caja a su ancho máximo: el texto se salía de su columna en todo el escritorio (7,4px por fuera del borde derecho de la tabla a 1280px) y entre 721 y 991px, donde la columna baja a 103,6px, se salía 14,8px por fuera de la caja blanca. Envolviendo entra en dos líneas y ninguna otra th («API», «Nombre», «Tipo», «Valor», «Descripción») llega a envolver. */ } .help-page-table td { vertical-align: top; padding: 16px 12px; border: 0; border-bottom: 1px solid var(--border); word-break: break-word; } .help-page-table tbody tr { transition: background 150ms ease; } .help-page-table tbody tr:hover td { background: var(--surface-hover); } .help-page-table td p { margin: 0; } .help-page-table td p + p { margin-top: 6px; } /* 6. Celdas del listado y de parámetros ----------------------------------- */ /* Los del thead NO llevan clase (§7 del brief) y con table-layout: fixed el reparto lo fija la primera fila. Por eso los anchos se declaran por posición sobre los , distinguiendo tablas de 2, 3 y 4 columnas; los conservan sus clases solo para tipografía. ANTES DE TOCAR UN ANCHO: estos porcentajes están replicados en otros dos bloques, y hay que cambiarlos en los tres o la cabecera deja de alinearse con sus columnas. 1. §11, la media query de móvil (max-width: 720px). Ahí el pasa a `display: table` y el tbody deja de ver los anchos del thead, así que se repiten sobre los . Las tablas de 2 y 3 columnas repiten los de acá; la de 4 lleva un reparto propio de móvil (30/30/22/18). 2. El bloque @media (min-width: 721px) and (max-width: 991px), donde la tabla de 4 columnas usa ese mismo reparto de móvil y el listado sube de 58/42 a 66/34. Cada uno de esos dos bloques tiene su puntero de vuelta hacia acá. */ /* Listado: API | Descripción */ .help-page-table thead th:first-child:nth-last-child(2) { width: 58%; } .help-page-table thead th:first-child:nth-last-child(2) ~ th { width: 42%; } /* Enum: Nombre | Valor | Descripción */ .help-page-table thead th:first-child:nth-last-child(3) { width: 30%; } .help-page-table thead th:first-child:nth-last-child(3) + th { width: 20%; } .help-page-table thead th:first-child:nth-last-child(3) + th + th { width: 50%; } /* Parámetros: Nombre | Descripción | Tipo | Información adicional */ .help-page-table thead th:first-child:nth-last-child(4) { width: 20%; } .help-page-table thead th:first-child:nth-last-child(4) + th { width: 40%; } .help-page-table thead th:first-child:nth-last-child(4) + th + th { width: 20%; } .help-page-table thead th:first-child:nth-last-child(4) + th + th + th { width: 20%; } /* La ruta del endpoint: el método HTTP viene como texto dentro del , así que no hay chip posible sin tocar Razor (§7). Se trata como código. */ .api-name a { font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--ink); } .api-name a:hover, .api-name a:focus { color: var(--accent-ink); text-decoration: none; } .api-documentation, .parameter-documentation { font-size: 15px; color: var(--ink-muted); } .parameter-name { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--accent-ink); } .parameter-type { font-family: var(--mono); font-size: 13px; color: var(--ink-muted); } .parameter-type a { font-size: 13px; } .parameter-annotations { font-size: 13px; color: var(--ink-muted); } .parameter-annotations p { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; } /* 7. Celdas de enum ------------------------------------------------------- */ /* Ganchos que no tenían ninguna regla en la versión anterior. */ .enum-name { font-family: var(--mono); font-size: 14px; color: var(--ink); } .enum-name b { font-weight: 500; } .enum-value { font-family: var(--mono); font-size: 14px; color: var(--accent-ink); } /* Mismo motivo que en §4: el valor del enum viaja dentro de un

(EnumTypeModelDescription.cshtml:14), así que slate.css:38 le impone su familia y `.help-page p` su color, y las dos declaraciones de arriba no llegan al texto. El font-size sí llega, porque §4 declara `inherit`. */ .enum-value p { font-family: var(--mono); color: var(--accent-ink); } .enum-description { font-size: 15px; color: var(--ink-muted); } /* 8. Bloque de ejemplos --------------------------------------------------- */ /* .sample-header imita una pestaña pegada a .sample-content. Se mantiene el gesto, con la paleta de la landing. */ .sample-header { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: #FFFFFF; background: var(--slate-900); margin: 8px 0 0; padding: 8px 14px; border: 0; border-radius: 6px 6px 0 0; } .sample-content { display: block; background: var(--slate-900); border-radius: 0 8px 8px 8px; padding: 20px 24px 24px; margin: 0 0 24px; overflow: hidden; } .sample-content > span { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: #8FA3B5; margin-bottom: 12px; } .sample-content > span b { font-weight: 500; } pre.wrapped { white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 13px; line-height: 1.8; color: #E4ECF3; background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0; overflow-x: auto; } /* 9. Aviso de ejemplo inválido -------------------------------------------- */ /* Solo visible con debug="true". El amarillo anterior no llegaba a AA. */ .warning-message-container { background: #FBF6F0; border: 1px solid #E4C89F; border-radius: 8px; padding: 16px 20px; margin: 0 0 24px; color: #7A4A0F; } .warning-message-container p, .warning-message-container b { color: #7A4A0F; } /* El aviso nunca aparece suelto: InvalidSample.cshtml:6 se pinta desde el @Html.DisplayFor de Samples.cshtml:25, o sea siempre dentro de .sample-content. Ahí su margen inferior de 24px se suma al padding de 24px de la caja azul y deja 48px de fondo debajo, contra los 12px que el del «Ejemplo:» deja arriba. Dentro de la caja el margen inferior sobra; el superior se declara para que el aire no dependa de qué elemento venga antes (span,

 o nada). */
.sample-content > .warning-message-container {
  margin-top: 12px;
  margin-bottom: 0;
}

/* 10. Foco visible ------------------------------------------------------- */
.help-page a:focus-visible,
.help-page :focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 11. Responsive --------------------------------------------------------- */
/* Hasta 360px. Sin envoltorio disponible, la tabla se vuelve bloque con
   scroll horizontal propio y ancho mínimo legible. */
@media (max-width: 720px) {
  #body.help-page {
    font-size: 15px;
  }

  .help-page h1 { font-size: 19px; }
  .help-page h2 { font-size: 21px; margin-top: 40px; }
  .help-page h3 { font-size: 16px; }

  .help-page-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .help-page-table thead,
  .help-page-table tbody,
  .help-page-table tr {
    display: table;
    width: 100%;
    /* En px a propósito: bootstrap.css:1079 fija html { font-size: 10px }, así
       que acá 1rem vale 10px y no 16. No pasar esto a rem: con 340px la tabla
       comprime las columnas en vez de desplazarse, que es lo que esta regla
       viene a evitar.
       600 y no 544: a 360px, el nombre de parámetro más largo de los ejemplos
       («fechaAutorizacion») mide 143px en la mono de 14px y pide una columna de
       163px con su padding. 544px es el ancho justo para eso y para nada más:
       el reparto 30/30/22/18 de más abajo da 163,2 / 163,2 / 119,7 / 97,9px
       contra los 163 / 102 / 91 / 84px que pide cada columna, así que la
       primera entra por dos décimas de píxel y las otras tres van holgadas.
       Con 600px la primera columna pasa a 180px: 17px de aire donde había 0,2,
       a cambio de que el lector arrastre 56px más, no una pantalla más. */
    min-width: 600px;
    table-layout: fixed;
  }

  /* Con `display: table` en el , cada fila es una tabla independiente: el
     tbody no ve los porcentajes declarados sobre `thead th` (§6) y con
     `table-layout: fixed` reparte sus columnas en partes iguales. Resultado a
     360px: la cabecera no se alinea con sus columnas (hasta 54px de desfase en
     la tabla de 4 columnas, 44px en la de 2). Se repiten los porcentajes por
     posición sobre los , con el mismo truco de :nth-last-child. Las de 2 y
     3 columnas repiten tal cual los de §6; la de 4 lleva un reparto propio de
     móvil, declarado más abajo sobre th y td a la vez. Si cambian los anchos de
     §6, hay que cambiarlos acá también. */

  /* Listado: API | Descripción */
  .help-page-table td:first-child:nth-last-child(2) { width: 58%; }
  .help-page-table td:first-child:nth-last-child(2) ~ td { width: 42%; }

  /* Enum: Nombre | Valor | Descripción */
  .help-page-table td:first-child:nth-last-child(3) { width: 30%; }
  .help-page-table td:first-child:nth-last-child(3) + td { width: 20%; }
  .help-page-table td:first-child:nth-last-child(3) + td + td { width: 50%; }

  /* Parámetros: Nombre | Descripción | Tipo | Información adicional.
     Es la única de las tres que cambia de reparto en móvil. El 20% de §6 son
     120px sobre 600, y los nombres de parámetro son identificadores en
     monoespaciada que el lector va a copiar: partidos a mitad de palabra no
     sirven, y a 360px no puede ensanchar la ventana. Se le da 30% a costa de
     «Descripción», que es prosa y tolera envolver. Medido a 360px, lo que pide
     cada columna para no partir su token más largo: nombre 163px
     («fechaAutorizacion»), descripción 102px («documento»), tipo 91px
     («EstadoCAF»), información 84px («Requerido»).
     th y td llevan el MISMO porcentaje: si se desincronizan vuelve la
     desalineación de cabecera que arregla el bloque de arriba. */
  .help-page-table thead th:first-child:nth-last-child(4),
  .help-page-table td:first-child:nth-last-child(4) { width: 30%; }
  .help-page-table thead th:first-child:nth-last-child(4) + th,
  .help-page-table td:first-child:nth-last-child(4) + td { width: 30%; }
  .help-page-table thead th:first-child:nth-last-child(4) + th + th,
  .help-page-table td:first-child:nth-last-child(4) + td + td { width: 22%; }
  .help-page-table thead th:first-child:nth-last-child(4) + th + th + th,
  .help-page-table td:first-child:nth-last-child(4) + td + td + td { width: 18%; }

  .help-page-table thead th,
  .help-page-table td {
    padding: 12px 10px;
  }

  .sample-content {
    padding: 16px 16px 20px;
  }
}

/* La banda intermedia: entre el final del bloque de arriba y el ancho en que
   `.container` de bootstrap salta a 970px (bootstrap.css:1595-1597), la caja
   de contenido deja la tabla en 594px a 721px y en 638px a
   768px. Con el reparto de escritorio de §6 la primera columna se queda en
   103,6px de contenido y «tipoDocumento» mide 109px en la mono de 14px: el
   nombre del parámetro se parte a mitad de palabra, que es exactamente lo que
   el bloque de arriba evita en móvil y por el mismo motivo (es un identificador
   que el lector copia). Se le aplica el reparto de móvil, y nada más: acá la
   tabla sigue siendo una tabla normal, sin scroll propio ni tipografía de
   móvil. Si cambian los de §11, hay que cambiarlos acá también.

   El listado tiene el mismo problema y por el mismo motivo, con un token que
   pesa todavía más: la ruta del endpoint, que es lo que el lector copia. Con el
   58% de §6 la columna «API» da 320,5px de contenido a 721px y 346px de 768 a
   991px, y `POST v1/caf/{rut}/descargar/{tipoDocumento}/{cantidad}` mide 421,3px
   en la mono de 13px —382,3px sin el método, que es el trozo que no tiene dónde
   cortar—: salía partida a mitad de identificador («{cant|idad}»). Con el 66%
   la columna pasa a 397,1px de 768 a 991px y la ruta entra entera detrás del
   único corte natural que tiene, el espacio de después de «POST». Lo paga
   «Descripción», que baja de 244px a 192,9px de contenido; es prosa y envuelve.

   Lo que este reparto NO arregla, y no puede: la ruta más larga del listado
   (`POST v1/caf/{rut}/anulacion-masiva/{tipoDocumento}/anular/{folioInicial}/
   {folioFinal}`, 85 caracteres) mide 663,1px, y su tramo de después del guion
   —el único corte natural del medio— otros 444,7px. Para que ese tramo entrara
   harían falta 73,5% a 768px y 78,9% a 721px: eso ya no es un reparto, es
   quedarse sin columna de descripción. Se parte igual, como se parte por debajo
   de 992px con cualquier ancho. Lo mismo por debajo de 743px, donde
   `.container` todavía es fluido y el 66% no llega a los 382,3px. Ver «Fuera de
   alcance» en docs/diseno/help-api/README.md.

   Los porcentajes van sobre `th` y `td` a la vez. Acá la tabla es normal y el
   reparto lo fija la primera fila, así que hoy el `td` es redundante; se declara
   igual para que los dos lados no puedan desincronizarse, que es de donde salió
   la desalineación de cabecera que arregla §11. Los del bloque de 4 columnas se
   quedan solo sobre `thead th`, como los dejó la corrida anterior. */
@media (min-width: 721px) and (max-width: 991px) {
  .help-page-table thead th:first-child:nth-last-child(4) { width: 30%; }
  .help-page-table thead th:first-child:nth-last-child(4) + th { width: 30%; }
  .help-page-table thead th:first-child:nth-last-child(4) + th + th { width: 22%; }
  .help-page-table thead th:first-child:nth-last-child(4) + th + th + th { width: 18%; }

  /* Listado: API | Descripción */
  .help-page-table thead th:first-child:nth-last-child(2),
  .help-page-table td:first-child:nth-last-child(2) { width: 66%; }
  .help-page-table thead th:first-child:nth-last-child(2) ~ th,
  .help-page-table td:first-child:nth-last-child(2) ~ td { width: 34%; }
}

@media (prefers-reduced-motion: reduce) {
  .help-page a,
  .help-page-table tbody tr {
    transition: none;
  }
}

/* 12. Reglas del chasis que no pueden pasar por el minificador ------------ */
/* custom.css viaja dentro del bundle ~/Content/css, que en produccion minifica
   WebGrease 1.6.0 (2013). Estas dos construcciones son posteriores a esa
   version, asi que viven aca, donde el archivo se sirve crudo. El efecto visual
   es el mismo: el CSS no depende de en que hoja este declarado. */

body #page-title h1 a::before {
  content: "\2190\00a0"; /* flecha izquierda */
}

body a:focus-visible,
body :focus-visible {
  outline: 2px solid #0B63A8;
  outline-offset: 3px;
  border-radius: 2px;
}

body #header a:focus-visible {
  outline-color: #E9A65E;
}

del cuerpo es la firma del endpoint: va en mono. */ .help-page h1 { font-family: var(--mono); font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 12px; word-break: break-word; } /* En el listado, cada

del cuerpo es la firma del endpoint: va en mono. / .help-page h1 { font-family: var(--mono); font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 12px; word-break: break-word; } / En el listado, cada