/*
 * Tema de Scalar (@scalar/api-reference) mapeado a los tokens --dv-* de portal.css: guías y
 * referencia se ven como una sola pieza, con la tipografía y el color del tenant. Las variables
 * --scalar-* son las que define el propio paquete (theme: 'none' en portal.js: no carga su tema ni
 * sus fuentes). Claro y oscuro salen de los tokens --dv-*, que ya cambian con el toggle del portal;
 * no se redefinen por modo.
 */
:root :is(.light-mode, .dark-mode),
.dv-route-reference {
  /* Alto REAL del header sticky (barra de marca + barra de navegación; el valor mobile lo cambia portal.css). */
  --scalar-custom-header-height: var(--dv-header-h, 108px);

  --scalar-font: var(--dv-font);
  --scalar-font-code: var(--dv-mono);
  --scalar-radius: 8px;
  --scalar-radius-lg: 12px;
  --scalar-radius-xl: 12px;

  --scalar-background-1: var(--dv-bg);
  --scalar-background-2: var(--dv-surface);
  --scalar-background-3: var(--dv-surface-2);
  --scalar-background-accent: var(--dv-tint);
  --scalar-color-1: var(--dv-text);
  --scalar-color-2: var(--dv-text-2);
  --scalar-color-3: var(--dv-text-2);
  --scalar-color-accent: var(--dv-link);
  --scalar-border-color: var(--dv-border);

  --scalar-color-green: var(--dv-get);
  --scalar-color-blue: var(--dv-post);
  --scalar-color-orange: var(--dv-put);
  --scalar-color-yellow: var(--dv-put);
  --scalar-color-red: var(--dv-delete);
  --scalar-color-purple: var(--dv-link);
  --scalar-color-query: var(--dv-link);

  --scalar-link-color: var(--dv-link);
  --scalar-link-color-hover: var(--dv-link);
  --scalar-button-1: var(--dv-accent);
  --scalar-button-1-hover: color-mix(in srgb, var(--dv-accent) 88%, black);
  --scalar-button-1-color: var(--dv-on-accent);

  --scalar-sidebar-background-1: var(--dv-surface);
  --scalar-sidebar-color-1: var(--dv-text);
  --scalar-sidebar-color-2: var(--dv-text-2);
  --scalar-sidebar-border-color: var(--dv-border);
  --scalar-sidebar-item-hover-background: var(--dv-surface-2);
  --scalar-sidebar-item-hover-color: var(--dv-text);
  --scalar-sidebar-item-active-background: var(--dv-tint);
  --scalar-sidebar-color-active: var(--dv-text);
  --scalar-sidebar-font-weight-active: 700;
  --scalar-sidebar-indent-border-active: var(--dv-accent);
  --scalar-sidebar-search-background: var(--dv-bg);
  --scalar-sidebar-search-color: var(--dv-text-2);
  --scalar-sidebar-search-border-color: var(--dv-border);
}

/* Títulos de Scalar en la tipografía de títulos del tenant (el resto hereda --scalar-font). */
.dv-route-reference :is(.scalar-app h1, .scalar-app h2, .scalar-app h3) { font-family: var(--dv-font-head); }

/*
 * Menú lateral de la referencia (clases medidas en @scalar/api-reference 1.72.3, ver standalone.js):
 *   - cada TAG es un título de sección: `li[data-sidebar-id]` cuyo primer hijo es `.group/group-button`;
 *   - cada OPERACIÓN es un renglón `a.group/button` dentro de `ul.group/items`: etiqueta `.group/button-label` + la pastilla del
 *     método `.sidebar-heading-type` (con `--method-color` puesto inline, por eso va con !important);
 *   - el botón de copiar de los bloques de código es `button.scalar-code-copy`.
 * Estas reglas no llevan capa y por eso le ganan a las utilidades de Scalar (que viven en @layer).
 */

/* Títulos de sección: los tags (Booking flow, Transfers, ...). */
.dv-route-reference li[data-sidebar-id]:has(> .group\/group-button) { margin-top: 14px; }
.dv-route-reference li[data-sidebar-id]:has(> .group\/group-button) > .group\/group-button > a {
  font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--dv-text-2);
}
.dv-route-reference li[data-sidebar-id]:has(> .group\/group-button) > .group\/group-button > a:hover { color: var(--dv-text); }

/* Operaciones: un renglón, nombre corto con puntos suspensivos y el método como pastilla a la derecha. */
.dv-route-reference ul.group\/items > li > a.group\/button { align-items: center; }
.dv-route-reference ul.group\/items > li > a.group\/button .group\/button-label {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.dv-route-reference .sidebar-heading-type.sidebar-heading-type {
  --pill: var(--method-color, var(--dv-text-2));
  height: auto; align-self: center; margin-left: 8px; padding: 1px 7px; line-height: 16px; font-size: 10px; letter-spacing: .04em;
  /* Texto: el color del método mezclado con el del texto del portal, para llegar a AA en claro y en oscuro. */
  color: color-mix(in srgb, var(--pill) 72%, var(--dv-text));
  background: color-mix(in srgb, var(--pill) 12%, var(--dv-bg));
  border: 1px solid color-mix(in srgb, var(--pill) 38%, var(--dv-bg)); border-radius: 999px;
}
.dv-route-reference .sidebar-heading-type--get { --method-color: var(--dv-get) !important; }
.dv-route-reference .sidebar-heading-type--post { --method-color: var(--dv-post) !important; }
.dv-route-reference :is(.sidebar-heading-type--put, .sidebar-heading-type--patch) { --method-color: var(--dv-put) !important; }
.dv-route-reference .sidebar-heading-type--delete { --method-color: var(--dv-delete) !important; }

/* "Copy code sample": siempre visible (no sólo al pasar el mouse) y con un blanco de 32px. */
.dv-route-reference button.scalar-code-copy {
  opacity: 1 !important; width: 32px; height: 32px; margin: 0; padding: 7px; top: 6px; right: 6px;
  color: var(--dv-text); background: var(--dv-surface-2); border: 1px solid var(--dv-border); border-radius: 6px;
}
.dv-route-reference button.scalar-code-copy:hover { color: var(--dv-text); background: var(--dv-tint); border-color: var(--dv-accent); }
/* El botón queda sobre el bloque: la primera línea no pasa por debajo. */
.dv-route-reference [aria-label="Code sample"] { padding-right: 48px; }

/* Botón de copiar de los bloques ```json de las descripciones (lo agrega portal.js): igual al "Copy code sample" de Scalar. */
.dv-route-reference pre[data-dv-copy-ready] { position: relative; padding-right: 48px; }
.dv-route-reference .dv-md-copy {
  position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; font-size: 14px; line-height: 1; cursor: pointer;
  color: var(--dv-text); background: var(--dv-surface-2); border: 1px solid var(--dv-border); border-radius: 6px;
}
.dv-route-reference .dv-md-copy:hover { background: var(--dv-tint); border-color: var(--dv-accent); }