/*
 * Lo mínimo para que la referencia se vea de FlotaLista y no de Swagger.
 *
 * NO se repinta Swagger UI entero. Quien lee esto es alguien integrando, y
 * conoce esa interfaz: cambiarle la forma le cuesta tiempo a cambio de nada. Lo
 * que sí se hace es enmarcarla —cabecera, entradilla y tipografía del sitio— y
 * apagar los dos gestos que sobran: la barra de Swagger y el selector de
 * servidor, que aquí no tiene nada que seleccionar.
 *
 * Las fuentes son las del sistema a propósito. Esta carpeta no autohospeda los
 * woff2 del sitio: son 80 KB para una página que se visita una vez, al integrar,
 * y que ya carga 1,5 MB de Swagger. La marca la pone el color, no la letra.
 */

:root {
  --marino: #004e64;
  --marino-noche: #00394a;
  --naranja-fuerte: #c2410c;
  --pizarra: #1e1e24;
  --tinta-suave: #5b6270;
  --nube: #edeef0;
  --patio: #f5f6f8;
  --borde: #dddee3;
  --blanco: #ffffff;
  --texto: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--pizarra);
  font-family: var(--texto);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Foco visible en todo, también dentro de Swagger: se navega con teclado. */
:focus-visible {
  outline: 2px solid var(--naranja-fuerte);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.cabecera {
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
}
.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  max-width: 1200px;
  min-height: 64px;
  margin: 0 auto;
  padding: 0.5rem 1.25rem;
}
.cabecera__marca {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.022em;
  color: var(--pizarra);
  text-decoration: none;
}
.cabecera__nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; }
.cabecera__nav a { color: var(--tinta-suave); font-size: 0.9375rem; text-decoration: none; }
.cabecera__nav a:hover { color: var(--marino); text-decoration: underline; }

/* ── Entradilla ───────────────────────────────────────────────────────────── */
.intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 1.25rem 1.5rem;
}
.intro h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
}
.intro__entrada {
  max-width: 62ch;
  margin: 0;
  color: var(--tinta-suave);
  font-size: 1.125rem;
}

/* Los tres hechos que hay que saber ANTES de leer el contrato entero. Van arriba
   porque los tres ahorran una tarde: que no se ejecuta, que la llave está
   acotada, y cuál es el límite por minuto. */
.intro__hechos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  max-width: 1200px;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.intro__hechos li {
  padding: 1rem 1.25rem;
  background: var(--patio);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--marino);
  border-radius: 4px;
  color: var(--tinta-suave);
  font-size: 0.9375rem;
}
.intro__hechos strong { color: var(--pizarra); }

.intro__nota {
  max-width: 70ch;
  margin: 1.5rem 0 0;
  color: var(--tinta-suave);
  font-size: 0.875rem;
}

/* ── El explorador ────────────────────────────────────────────────────────── */
.swagger-marco { max-width: 1200px; margin: 0 auto; padding: 0 0.25rem 3rem; }

/* La barra negra de Swagger con su logo y su caja de URL: fuera. Es marca
   ajena en nuestro dominio, y la caja invita a cargar OTRO contrato. */
.swagger-ui .topbar { display: none; }

/* El selector de servidor: fuera. Hay un solo servidor y es relativo, así que
   solo puede confundir. Cuando api.flotalista.com se publique, esta regla se
   quita junto con `supportedSubmitMethods` en iniciador.js. */
.swagger-ui .scheme-container { display: none; }

/* El bloque de información duplica el h1 y la entradilla de arriba. */
.swagger-ui .information-container { display: none; }

.swagger-ui { font-family: var(--texto); }
.swagger-ui .info .title,
.swagger-ui .opblock-tag { color: var(--pizarra); }
.swagger-ui .btn.authorize { border-color: var(--marino); color: var(--marino); }
.swagger-ui .btn.authorize svg { fill: var(--marino); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}