/* ==========================================================
   Netco Signer – Brand Overrides
   Primary: #a900ff  |  Font: Poppins
   ========================================================== */

/* Sin transición global — el switch es instantáneo vía overlay JS */

/* ══════════════════════════════════════════
   VARIABLES
   ══════════════════════════════════════════ */
:root {
  --ns-primary:      #a900ff;
  --ns-primary-soft: #e2aaff;

  /* Light */
  --ns-bg:           #f6f6f9;
  --ns-surface:      #ffffff;
  --ns-surface-2:    #f0f0f4;
  --ns-border:       rgba(84,89,95,.15);
  --ns-input-bg:     #ffffff;
  --ns-input-border: rgba(84,89,95,.22);
  --ns-text:         #6b7280;
  --ns-text-main:    #374151;
  --ns-text-bright:  #111827;
}

body.ns-dark {
  /* Dark — zinc palette, comfortable contrast */
  --ns-bg:           #18181b;
  --ns-surface:      #27272a;
  --ns-surface-2:    #323236;
  --ns-border:       rgba(255,255,255,.08);
  --ns-input-bg:     #323236;
  --ns-input-border: rgba(255,255,255,.12);
  --ns-text:         #a1a1aa;
  --ns-text-main:    #d4d4d8;
  --ns-text-bright:  #f4f4f5;
}

/* ══════════════════════════════════════════
   BASE
   ══════════════════════════════════════════ */
html, body {
  background: var(--ns-bg) !important;
  min-height: 100%;
}
/* html no hereda variables de body — override explícito */
html.ns-dark {
  background: #18181b !important;
}

/* ══════════════════════════════════════════
   FUENTE — POPPINS PARA TODO
   ══════════════════════════════════════════ */
.swagger-ui,
.swagger-ui * {
  font-family: "Poppins", sans-serif !important;
}

/* ══════════════════════════════════════════
   COLORES BASE
   ══════════════════════════════════════════ */
.swagger-ui {
  color: var(--ns-text-main) !important;
  background: transparent !important;
}

.swagger-ui .renderedMarkdown p,
.swagger-ui .renderedMarkdown li,
.swagger-ui .markdown p,
.swagger-ui .markdown li,
.swagger-ui .parameter__name,
.swagger-ui .parameter__type,
.swagger-ui .response-col_status,
.swagger-ui .responses-inner h4,
.swagger-ui .opblock-description-wrapper p,
.swagger-ui .model,
.swagger-ui .model-title,
.swagger-ui .prop-type,
.swagger-ui .prop-format {
  color: var(--ns-text) !important;
}

.swagger-ui a { color: var(--ns-primary) !important; }
.swagger-ui a:hover { filter: brightness(.85); }

/* ══════════════════════════════════════════
   TOPBAR — fix fondo negro interno
   ══════════════════════════════════════════ */
.swagger-ui .topbar {
  background: linear-gradient(90deg, #7c00cc 0%, #a900ff 40%, #d070ff 100%) !important;
  padding: 0 !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: 0 2px 16px rgba(169,0,255,.25) !important;
}

/* Forzar transparencia en TODOS los hijos del topbar */
.swagger-ui .topbar > *,
.swagger-ui .topbar .wrapper,
.swagger-ui .topbar .topbar-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

.swagger-ui .topbar .download-url-wrapper { display: none !important; }

/* Logo */
.swagger-ui .topbar .link {
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  padding: 0 0 0 32px !important;
  height: 64px !important;
}
.swagger-ui .topbar .link img,
.swagger-ui .topbar .link svg { display: none !important; }
.swagger-ui .topbar .link::before {
  content: "" !important;
  display: block !important;
  width: 220px !important;
  height: 38px !important;
  background-image: url("./logo-netco.png") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
  filter: brightness(0) invert(1) !important;
}

@media (max-width: 768px) {
  .swagger-ui .topbar .link::before { width: 170px !important; height: 30px !important; }
  .swagger-ui .topbar .link { padding-left: 16px !important; }
}

/* ══════════════════════════════════════════
   CONTENT WRAPPER
   ══════════════════════════════════════════ */
.swagger-ui .wrapper {
  background: transparent !important;
  max-width: 1200px !important;
}

/* Dark: eliminar fondos blancos y bordes que Swagger pone por defecto */
body.ns-dark,
body.ns-dark #swagger-ui,
body.ns-dark .swagger-ui,
body.ns-dark .swagger-ui .wrapper,
body.ns-dark .swagger-ui .information-container,
body.ns-dark .swagger-ui .scheme-container,
body.ns-dark .swagger-ui .opblock-tag-section {
  background: var(--ns-bg) !important;
  box-shadow: none !important;
}
body.ns-dark .swagger-ui .information-container {
  border: none !important;
}
body.ns-dark .swagger-ui .scheme-container {
  border-bottom: 1px solid var(--ns-border) !important;
}
/* Reset bordes blancos heredados de swagger-ui.css */
body.ns-dark .swagger-ui input,
body.ns-dark .swagger-ui textarea,
body.ns-dark .swagger-ui select,
body.ns-dark .swagger-ui .opblock,
body.ns-dark .swagger-ui .opblock-summary,
body.ns-dark .swagger-ui section.models,
body.ns-dark .swagger-ui .model-container,
body.ns-dark .swagger-ui .dialog-ux .modal-ux,
body.ns-dark .swagger-ui .dialog-ux .modal-ux-header,
body.ns-dark .swagger-ui table thead tr th,
body.ns-dark .swagger-ui table tbody tr td {
  border-color: var(--ns-border) !important;
}

/* ══════════════════════════════════════════
   INFO / TÍTULO
   ══════════════════════════════════════════ */
.swagger-ui .info .title {
  color: var(--ns-text-bright) !important;
  font-weight: 700 !important;
}
.swagger-ui .info .title small {
  background: var(--ns-primary) !important;
  color: #fff !important;
  border-radius: 999px !important;
}
.swagger-ui .info p,
.swagger-ui .renderedMarkdown p {
  color: var(--ns-text) !important;
  line-height: 1.7 !important;
}

body.ns-dark .swagger-ui .info .title { color: var(--ns-text-bright) !important; }
body.ns-dark .swagger-ui h1,
body.ns-dark .swagger-ui h2,
body.ns-dark .swagger-ui h3,
body.ns-dark .swagger-ui h4,
body.ns-dark .swagger-ui h5 { color: var(--ns-text-bright) !important; }
body.ns-dark .swagger-ui .opblock-tag span,
body.ns-dark .swagger-ui label,
body.ns-dark .swagger-ui td,
body.ns-dark .swagger-ui th { color: var(--ns-text-main) !important; }
body.ns-dark .swagger-ui .opblock-summary-path { color: var(--ns-text-bright) !important; }
body.ns-dark .swagger-ui .opblock-summary-description { color: var(--ns-text) !important; }

/* ══════════════════════════════════════════
   INFORMATION CONTAINER
   ══════════════════════════════════════════ */
.swagger-ui .information-container {
  background: var(--ns-surface) !important;
  border-bottom: 1px solid var(--ns-border) !important;
}

/* ══════════════════════════════════════════
   FILTER
   ══════════════════════════════════════════ */
.swagger-ui .filter-container { display: none !important; }

/* ══════════════════════════════════════════
   SECTION TAGS
   ══════════════════════════════════════════ */
.swagger-ui .opblock-tag {
  border-bottom: 1px solid var(--ns-border) !important;
  padding: 12px 0 !important;
  color: var(--ns-text-bright) !important;
}

/* ══════════════════════════════════════════
   CARDS / ENDPOINTS
   ══════════════════════════════════════════ */
.swagger-ui .opblock {
  border-radius: 10px !important;
  border: 1px solid var(--ns-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  overflow: hidden !important;
  background: var(--ns-surface) !important;
}

body.ns-dark .swagger-ui .opblock {
  background: var(--ns-surface) !important;
  border-color: var(--ns-border) !important;
  box-shadow: none !important;
}
body.ns-dark .swagger-ui .opblock-summary { background: transparent !important; }
body.ns-dark .swagger-ui .opblock-body {
  background: var(--ns-surface-2) !important;
  border-top: 1px solid var(--ns-border) !important;
}
body.ns-dark .swagger-ui .opblock-section-header {
  background: var(--ns-surface) !important;
  border-bottom: 1px solid var(--ns-border) !important;
}
body.ns-dark .swagger-ui .opblock-section-header label,
body.ns-dark .swagger-ui .opblock-section-header h4 { color: var(--ns-text-main) !important; }

/* ══════════════════════════════════════════
   BOTONES
   ══════════════════════════════════════════ */
.swagger-ui .btn { border-radius: 8px !important; font-weight: 500 !important; }

.swagger-ui .btn.execute {
  background: var(--ns-primary) !important;
  border-color: var(--ns-primary) !important;
  color: #fff !important;
}
.swagger-ui .btn.execute:hover { filter: brightness(.88); }

.swagger-ui .btn.authorize {
  border-color: var(--ns-primary) !important;
  color: var(--ns-primary) !important;
}
.swagger-ui .btn.authorize svg { fill: var(--ns-primary) !important; }

body.ns-dark .swagger-ui .btn {
  color: var(--ns-text-main) !important;
  border-color: var(--ns-border) !important;
  background: var(--ns-surface-2) !important;
}
body.ns-dark .swagger-ui .btn.execute {
  background: var(--ns-primary) !important;
  border-color: var(--ns-primary) !important;
  color: #fff !important;
}
body.ns-dark .swagger-ui .btn.authorize {
  background: transparent !important;
  border-color: var(--ns-primary) !important;
  color: var(--ns-primary) !important;
}

/* ══════════════════════════════════════════
   INPUTS
   ══════════════════════════════════════════ */
.swagger-ui input[type="text"],
.swagger-ui input[type="password"],
.swagger-ui textarea,
.swagger-ui select {
  border-radius: 8px !important;
  border: 1px solid var(--ns-input-border) !important;
  background: var(--ns-input-bg) !important;
  color: var(--ns-text-main) !important;
}
.swagger-ui input:focus,
.swagger-ui textarea:focus,
.swagger-ui select:focus {
  outline: none !important;
  border-color: var(--ns-primary) !important;
  box-shadow: 0 0 0 3px rgba(169,0,255,.12) !important;
}
body.ns-dark .swagger-ui input::placeholder,
body.ns-dark .swagger-ui textarea::placeholder { color: var(--ns-text) !important; }
body.ns-dark .swagger-ui select option {
  background: var(--ns-surface-2) !important;
  color: var(--ns-text-main) !important;
}

/* ══════════════════════════════════════════
   TABLAS
   ══════════════════════════════════════════ */
body.ns-dark .swagger-ui table { background: transparent !important; }
body.ns-dark .swagger-ui table thead tr th,
body.ns-dark .swagger-ui table thead tr td {
  background: var(--ns-surface-2) !important;
  color: var(--ns-text-main) !important;
  border-bottom: 1px solid var(--ns-border) !important;
}
body.ns-dark .swagger-ui table tbody tr td {
  border-bottom: 1px solid var(--ns-border) !important;
  background: transparent !important;
  color: var(--ns-text-main) !important;
}
body.ns-dark .swagger-ui .parameter__name { color: var(--ns-text-bright) !important; }
body.ns-dark .swagger-ui .parameter__type { color: var(--ns-text) !important; }

/* ══════════════════════════════════════════
   CÓDIGO / RESPUESTAS
   ══════════════════════════════════════════ */
body.ns-dark .swagger-ui .highlight-code pre,
body.ns-dark .swagger-ui .microlight,
body.ns-dark .swagger-ui code {
  background: #111113 !important;
  color: #e4e4e7 !important;
  border: 1px solid var(--ns-border) !important;
  border-radius: 6px !important;
}
body.ns-dark .swagger-ui .responses-inner {
  background: transparent !important;
}
body.ns-dark .swagger-ui .response-col_status { color: #86efac !important; }

/* ══════════════════════════════════════════
   MODELS
   ══════════════════════════════════════════ */
body.ns-dark .swagger-ui section.models {
  background: var(--ns-surface) !important;
  border: 1px solid var(--ns-border) !important;
  border-radius: 10px !important;
}
body.ns-dark .swagger-ui section.models h4 {
  color: var(--ns-text-bright) !important;
  border-bottom: 1px solid var(--ns-border) !important;
}
body.ns-dark .swagger-ui .model-container { background: var(--ns-surface-2) !important; border-radius: 6px !important; }
body.ns-dark .swagger-ui .model-box,
body.ns-dark .swagger-ui .model { background: transparent !important; }
body.ns-dark .swagger-ui .model span,
body.ns-dark .swagger-ui .model-title { color: var(--ns-text-main) !important; }

/* ══════════════════════════════════════════
   MODAL AUTH
   ══════════════════════════════════════════ */
body.ns-dark .swagger-ui .dialog-ux .backdrop-ux { background: rgba(0,0,0,.65) !important; }

/* Modal wrapper */
body.ns-dark .swagger-ui .dialog-ux .modal-ux {
  background: var(--ns-surface) !important;
  border: 1px solid var(--ns-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
  overflow: hidden !important;
}

/* Header */
body.ns-dark .swagger-ui .dialog-ux .modal-ux-header {
  background: var(--ns-surface-2) !important;
  border-bottom: 1px solid var(--ns-border) !important;
  border-radius: 12px 12px 0 0 !important;
}
body.ns-dark .swagger-ui .dialog-ux .modal-ux-header h3,
body.ns-dark .swagger-ui .dialog-ux .modal-ux-header .close-modal {
  color: var(--ns-text-bright) !important;
}

/* Content area — fondo explícito, no transparent */
body.ns-dark .swagger-ui .dialog-ux .modal-ux-content,
body.ns-dark .swagger-ui .dialog-ux .modal-ux-content .auth-container,
body.ns-dark .swagger-ui .dialog-ux .modal-ux-content .auth-container > div,
body.ns-dark .swagger-ui .dialog-ux .modal-ux-content .wrapper,
body.ns-dark .swagger-ui .dialog-ux .modal-ux-content .scopes,
body.ns-dark .swagger-ui .dialog-ux .modal-ux-content .scope-def {
  background: var(--ns-surface) !important;
}

/* Filas de info (Name, In) */
body.ns-dark .swagger-ui .dialog-ux .modal-ux-content .auth-container .wrapper {
  border-bottom: 1px solid var(--ns-border) !important;
}

/* Todo el texto dentro del modal */
body.ns-dark .swagger-ui .dialog-ux .modal-ux-content p,
body.ns-dark .swagger-ui .dialog-ux .modal-ux-content label,
body.ns-dark .swagger-ui .dialog-ux .modal-ux-content h4,
body.ns-dark .swagger-ui .dialog-ux .modal-ux-content h5,
body.ns-dark .swagger-ui .dialog-ux .modal-ux-content span,
body.ns-dark .swagger-ui .dialog-ux .modal-ux-content code {
  color: var(--ns-text-main) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Botón Close */
body.ns-dark .swagger-ui .dialog-ux .modal-ux-content .btn-done {
  background: var(--ns-surface-2) !important;
  border-color: var(--ns-border) !important;
  color: var(--ns-text-main) !important;
}

/* ══════════════════════════════════════════
   TABS
   ══════════════════════════════════════════ */
body.ns-dark .swagger-ui .tab li { color: var(--ns-text) !important; }
body.ns-dark .swagger-ui .tab li.tabitem.active {
  color: var(--ns-primary) !important;
  border-bottom: 2px solid var(--ns-primary) !important;
}

/* ══════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════ */
body.ns-dark * {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
body.ns-dark *::-webkit-scrollbar { width: 5px; height: 5px; }
body.ns-dark *::-webkit-scrollbar-track { background: transparent; }
body.ns-dark *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }
body.ns-dark *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

/* ══════════════════════════════════════════
   TOGGLE BUTTON
   ══════════════════════════════════════════ */
#ns-theme-toggle {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  border: none;
  /* Modo claro: sólido morado, siempre visible */
  background: #a900ff;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-size: .75rem;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 2px 10px rgba(169,0,255,.35);
  user-select: none;
}
#ns-theme-toggle:hover {
  background: #8e00d6;
  box-shadow: 0 4px 16px rgba(169,0,255,.5);
}
#ns-theme-toggle .ns-icon { font-size: .9rem; line-height: 1; }

/* Modo oscuro: zinc discreto */
body.ns-dark #ns-theme-toggle {
  background: var(--ns-surface-2);
  border: 1px solid var(--ns-border);
  color: var(--ns-text-main);
  box-shadow: none;
}
body.ns-dark #ns-theme-toggle:hover {
  background: #3f3f46;
  border-color: rgba(255,255,255,.15);
}