/*
 * Capa oscura sobre Swagger UI.
 *
 * Swagger UI 10 ya trae un tema oscuro propio bajo `html.dark-mode`; dark.js lo deja
 * encendido siempre. Esta hoja se monta encima para dos cosas: bajar el fondo a un
 * negro mas profundo y cambiar los acentos al terracota de la app, para que el API y
 * el front se lean como una sola cosa.
 *
 * Los selectores llevan el prefijo `html.dark-mode` a proposito: sin el pierden la
 * especificidad contra las reglas del tema propio de Swagger.
 */

:root {
  --sw-fondo: #0d0d0e;
  --sw-panel: #151518;
  --sw-panel-alto: #1c1c20;
  --sw-borde: #2a2a30;
  --sw-texto: #e6e1da;
  --sw-texto-suave: #a49c93;
  --sw-acento: #c25a3a;
  --sw-acento-claro: #e08b5f;
  --sw-ok: #4e7a5a;
  --sw-error: #c96a6a;
}

/* Los colores de los metodos (GET azul, POST verde, PUT naranja, DELETE rojo) se
   dejan como estan: son una convencion que se lee de un vistazo. */

html.dark-mode,
html.dark-mode body,
html.dark-mode .swagger-ui {
  color-scheme: dark;
  background: var(--sw-fondo);
}

/* ── Barra superior ──────────────────────────────────────────────────────── */

html.dark-mode .swagger-ui .topbar {
  padding: 12px 0;
  background: #000;
  border-bottom: 1px solid var(--sw-borde);
}

html.dark-mode .swagger-ui .topbar .download-url-wrapper .download-url-button {
  color: #fff6f0;
  background: var(--sw-acento);
  border-color: var(--sw-acento);
}

/* ── Cabecera del documento ──────────────────────────────────────────────── */

html.dark-mode .swagger-ui .info .title small.version-stamp {
  background: var(--sw-acento);
}

html.dark-mode .swagger-ui .info a,
html.dark-mode .swagger-ui .info .base-url a,
html.dark-mode .swagger-ui a.nostyle,
html.dark-mode .swagger-ui .opblock .opblock-summary-operation-id {
  color: var(--sw-acento-claro);
}

html.dark-mode .swagger-ui .markdown code,
html.dark-mode .swagger-ui .renderedMarkdown code {
  color: var(--sw-acento-claro);
  background: var(--sw-panel-alto);
}

/* Los titulos de grupo (Resumen, Personas, Pagos...) toman el acento de la app. */
html.dark-mode .swagger-ui .opblock-tag {
  color: var(--sw-acento-claro);
  border-bottom-color: var(--sw-borde);
}

html.dark-mode .swagger-ui .opblock-tag:hover {
  background: rgba(255, 255, 255, 0.03);
}

html.dark-mode .swagger-ui .opblock-tag small {
  color: var(--sw-texto-suave);
}

/* ── Paneles ─────────────────────────────────────────────────────────────── */

html.dark-mode .swagger-ui .scheme-container,
html.dark-mode .swagger-ui section.models {
  background: var(--sw-panel);
  border: 1px solid var(--sw-borde);
  box-shadow: none;
}

html.dark-mode .swagger-ui .opblock .opblock-section-header {
  background: var(--sw-panel-alto);
  border-bottom: 1px solid var(--sw-borde);
  box-shadow: none;
}

html.dark-mode .swagger-ui section.models .model-container {
  background: var(--sw-panel-alto);
}

html.dark-mode .swagger-ui section.models .model-container:hover {
  background: #24242a;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

html.dark-mode .swagger-ui .btn.execute {
  color: #fff6f0;
  background: var(--sw-acento);
  border-color: var(--sw-acento);
}

html.dark-mode .swagger-ui .btn.execute:hover {
  background: var(--sw-acento-claro);
  border-color: var(--sw-acento-claro);
}

html.dark-mode .swagger-ui .btn.authorize {
  color: var(--sw-ok);
  border-color: var(--sw-ok);
}

html.dark-mode .swagger-ui .btn.authorize svg {
  fill: var(--sw-ok);
}

html.dark-mode .swagger-ui .btn.cancel {
  color: var(--sw-error);
  border-color: var(--sw-error);
}

html.dark-mode .swagger-ui .btn:hover {
  box-shadow: none;
}

/* ── Formularios ─────────────────────────────────────────────────────────── */

html.dark-mode .swagger-ui input[type='text'],
html.dark-mode .swagger-ui input[type='password'],
html.dark-mode .swagger-ui input[type='search'],
html.dark-mode .swagger-ui input[type='email'],
html.dark-mode .swagger-ui input[type='number'],
html.dark-mode .swagger-ui textarea,
html.dark-mode .swagger-ui select {
  color: var(--sw-texto);
  background: var(--sw-panel-alto);
  border: 1px solid var(--sw-borde);
}

html.dark-mode .swagger-ui input::placeholder,
html.dark-mode .swagger-ui textarea::placeholder {
  color: #6d665e;
}

/* Foco visible: sin esto es facil perderse tabulando por el formulario. */
html.dark-mode .swagger-ui button:focus-visible,
html.dark-mode .swagger-ui input:focus-visible,
html.dark-mode .swagger-ui select:focus-visible,
html.dark-mode .swagger-ui textarea:focus-visible,
html.dark-mode .swagger-ui .opblock-summary-control:focus-visible {
  outline: 2px solid var(--sw-acento-claro);
  outline-offset: 2px;
}

/* ── Codigo y ejemplos ───────────────────────────────────────────────────── */

html.dark-mode .swagger-ui .highlight-code > .microlight,
html.dark-mode .swagger-ui .body-param__example,
html.dark-mode .swagger-ui .example {
  color: #d9d3cb !important;
  background: #000 !important;
}

/* ── Modal de autorizacion ───────────────────────────────────────────────── */

html.dark-mode .swagger-ui .dialog-ux .modal-ux {
  background: var(--sw-panel);
  border: 1px solid var(--sw-borde);
}

html.dark-mode .swagger-ui .dialog-ux .modal-ux-header {
  background: var(--sw-panel-alto);
  border-bottom: 1px solid var(--sw-borde);
}

html.dark-mode .swagger-ui .dialog-ux .backdrop-ux {
  background: rgba(0, 0, 0, 0.78);
}

/* ── Movil ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  html.dark-mode .swagger-ui .wrapper {
    padding: 0 12px;
  }

  html.dark-mode .swagger-ui .opblock-summary-path {
    max-width: 100%;
    word-break: break-all;
  }
}