/* Las fuentes de shinkansen.finance: Inter para el texto y Poppins para los títulos.
   El sitio usa Inter 300 sobre fondo oscuro; acá el texto queda en 400 porque en modo claro
   el 300 se lee débil y el feedback del 27-oct fue justamente de bajo contraste. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@700&display=swap');

:root {
  --scalar-font: 'Inter', system-ui, sans-serif;
}

/* Scalar fija el peso de sus títulos con selectores más específicos (h1.t-editor__heading,
   utilidades font-medium): el peso va con !important o los títulos de las guías quedan en 600. */
.scalar-app :is(h1, h2, h3, h4, h5, h6) {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  font-weight: 700 !important;
}

.light-mode {
  --scalar-color-accent: #007A54;
  --scalar-background-1: #FFFFFF;
  --scalar-background-2: #F4F6F7;
  --scalar-background-3: #E9EDEF;
  --scalar-border-color: #D8DDE3;
  --scalar-color-1: #13201D;
  /* Grises secundarios más oscuros: el #6B7773 anterior quedaba en 4,3:1 sobre el fondo del menú */
  --scalar-color-2: #3B4643;
  --scalar-color-3: #56625E;
  /* Scalar deja links, menú y botón del header en negro en modo claro: se pasan al verde de marca */
  --scalar-link-color: #007A54;
  --scalar-link-color-hover: #005C3F;
  --scalar-sidebar-color-active: #007A54;
  --scalar-sidebar-item-active-background: #E6F2ED;
  --scalar-sidebar-indent-border-active: #007A54;
  --scalar-button-1: #007A54;
  --scalar-button-1-color: #FFFFFF;
  --scalar-button-1-hover: #005C3F;
}

.dark-mode {
  /* Verde primario de shinkansen.finance (hsl 160 60% 45%) */
  --scalar-color-accent: #2EB88A;
  --scalar-background-1: #0E1B18;
  --scalar-background-2: #172623;
  --scalar-background-3: #20302C;
  --scalar-border-color: #2A3B37;
  --scalar-color-1: #F2F5F4;
  --scalar-color-2: #C9D2CF;
  --scalar-color-3: #A3AEAA;
  /* Igual que en modo claro: links, menú activo y botones en el verde de marca, no en el default de Scalar */
  --scalar-link-color: #2EB88A;
  --scalar-link-color-hover: #5DD4A6;
  --scalar-sidebar-color-active: #2EB88A;
  --scalar-sidebar-item-active-background: #173A30;
  --scalar-sidebar-indent-border-active: #2EB88A;
  --scalar-button-1: #2EB88A;
  --scalar-button-1-color: #0E1B18;
  --scalar-button-1-hover: #1B986E;
}

/* En la introducción de cada API Reference, Scalar muestra un panel "Client Libraries" que solo
   elige el lenguaje de los ejemplos y muestra su nombre ("Shell Curl"), sin código: se lee como un
   ejemplo roto. Cada endpoint trae su propio selector de lenguaje con el ejemplo, así que el panel
   de la introducción se oculta. Clase interna de Scalar: revisar en cada upgrade. */
.scalar-reference-intro-clients {
  display: none;
}

/* La grilla de <scalar-grid> trae las columnas como estilo inline y no colapsa en el teléfono.
   Clase interna de Scalar: revisar en cada upgrade. */
@media (max-width: 720px) {
  .t-editor__grid-element { grid-template-columns: 1fr !important; }
}

/* Título del banner de la portada: es un <scalar-heading> para que la pestaña tome ese título,
   con el estilo del banner y no el de un h1 del tema. */
.sk-hero-title h1 {
  color: #F2F5F4;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 12px;
}

/* Scalar arma los diagramas mermaid con svg-pan-zoom y la rueda del mouse activada sin opción
   para apagarla: al hacer scroll por la página, el diagrama bajo el cursor se acerca o aleja en
   vez de dejar pasar el scroll. Sin eventos de puntero en el SVG la rueda vuelve a mover la
   página; el zoom queda en los botones y en el teclado del contenedor.
   Clase interna de Scalar: revisar en cada upgrade. */
.t-editor__mermaid-wrapper svg {
  pointer-events: none;
}

/* Bloques de código con una barra arriba, como en la doc de Stripe: el lenguaje a la izquierda y el botón
   de copiar a la derecha, fuera de la fila del código. Scalar pone el botón encima del código y, en las
   líneas largas, tapa texto y deja asomar letras a su derecha. Los bloques con pestañas
   (.t-editor__code-group) ya traen su barra y no se tocan. */
.scalar-app .t-editor__code-container:not(.t-editor__code-group .t-editor__code-container, .t-editor__prompt .t-editor__code-container) {
  margin-top: var(--scalar-block-spacing);
  padding-top: 36px;
  border-radius: var(--scalar-radius-md);
  background: var(--scalar-background-2);
  box-shadow: 0 0 0 var(--scalar-border-width) var(--scalar-border-color);
}
.scalar-app .t-editor__code-container:not(.t-editor__code-group .t-editor__code-container, .t-editor__prompt .t-editor__code-container) > pre.t-editor__code {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: inset 0 var(--scalar-border-width) 0 var(--scalar-border-color);
}
.scalar-app .t-editor__code-container:not(.t-editor__code-group .t-editor__code-container, .t-editor__prompt .t-editor__code-container)::before {
  content: var(--sk-code-label, attr(data-lang));
  position: absolute;
  top: 0;
  left: 16px;
  height: 36px;
  display: flex;
  align-items: center;
  font-family: var(--scalar-font);
  font-size: var(--scalar-small);
  color: var(--scalar-color-2);
}
.scalar-app .t-editor__code-container:not(.t-editor__code-group .t-editor__code-container, .t-editor__prompt .t-editor__code-container) > .language-button {
  top: 4px;
  right: 6px;
}
/* El lenguaje ya está en la barra: el botón muestra solo el ícono, y "Copy" al pasar el mouse. */
.scalar-app .t-editor__code-container:not(.t-editor__code-group .t-editor__code-container, .t-editor__prompt .t-editor__code-container) > .language-button .lang-label-language {
  display: none;
}
/* Nombres para la barra; el resto muestra el lenguaje tal como viene en el markdown. */
.t-editor__code-container:is([data-lang="sh" i], [data-lang="shell" i], [data-lang="bash" i]) { --sk-code-label: "Terminal"; }
.t-editor__code-container:is([data-lang="plaintext" i], [data-lang="text" i]) { --sk-code-label: "Texto"; }
.t-editor__code-container[data-lang="json" i] { --sk-code-label: "JSON"; }
.t-editor__code-container[data-lang="http" i] { --sk-code-label: "HTTP"; }
.t-editor__code-container[data-lang="csv" i] { --sk-code-label: "CSV"; }
.t-editor__code-container[data-lang="python" i] { --sk-code-label: "Python"; }
.t-editor__code-container[data-lang="javascript" i] { --sk-code-label: "JavaScript"; }
.t-editor__code-container[data-lang="csharp" i] { --sk-code-label: "C#"; }
.t-editor__code-container[data-lang="ruby" i] { --sk-code-label: "Ruby"; }
.t-editor__code-container[data-lang="php" i] { --sk-code-label: "PHP"; }
.t-editor__code-container[data-lang="java" i] { --sk-code-label: "Java"; }