/* CSS Global para Modal JSON - public/styles/json-modal.css */

/* Scrollbar personalizada para el contenedor JSON */
.json-viewer-container::-webkit-scrollbar {
  width: 16px !important;
  height: 16px !important;
  background: transparent !important;
}

.json-viewer-container::-webkit-scrollbar-track {
  background: #161b22 !important;
  border-radius: 8px !important;
  margin: 4px !important;
}

.json-viewer-container::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #30363d, #484f58) !important;
  border-radius: 8px !important;
  border: 1px solid #21262d !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.json-viewer-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #484f58, #6e7681) !important;
  border-color: #30363d !important;
}

.json-viewer-container::-webkit-scrollbar-thumb:active {
  background: linear-gradient(45deg, #6e7681, #8b949e) !important;
  border-color: #484f58 !important;
}

.json-viewer-container::-webkit-scrollbar-corner {
  background: #161b22 !important;
}

/* Fallback para Firefox */
.json-viewer-container {
  scrollbar-width: thick !important;
  scrollbar-color: #484f58 #161b22 !important;
}

/* Estilos del JsonViewer */
.json-viewer {
  font-family: 'SFMono-Regular', 'Monaco', 'Inconsolata', 'Roboto Mono',
    'Consolas', 'Liberation Mono', 'Menlo', monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #d4d4d4 !important;
}

.json-viewer .json-line {
  display: flex !important;
  align-items: center !important;
  min-height: 20px !important;
  margin: 1px 0 !important;
}

.json-viewer .json-line:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 2px !important;
}

.json-viewer .json-indent {
  white-space: pre !important;
  color: transparent !important;
  user-select: none !important;
}

.json-viewer .json-expand-icon {
  cursor: pointer !important;
  margin-right: 4px !important;
  color: #569cd6 !important;
  font-size: 12px !important;
  width: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.json-viewer .json-expand-icon:hover {
  color: #4fc3f7 !important;
}

.json-viewer .json-expand-icon .anticon {
  font-size: 12px !important;
}

.json-viewer .json-key {
  color: #9cdcfe !important;
  font-weight: 500 !important;
}

.json-viewer .json-punctuation {
  color: #d4d4d4 !important;
}

.json-viewer .json-bracket {
  color: #ffd700 !important;
  font-weight: bold !important;
}

.json-viewer .json-ellipsis {
  color: #888 !important;
  margin: 0 4px !important;
}

.json-viewer .json-preview {
  color: #6a9955 !important;
  font-style: italic !important;
  margin-left: 8px !important;
}

.json-viewer .json-value.json-string {
  color: #ce9178 !important;
}

.json-viewer .json-value.json-number {
  color: #b5cea8 !important;
}

.json-viewer .json-value.json-boolean {
  color: #569cd6 !important;
  font-weight: bold !important;
}

.json-viewer .json-value.json-null {
  color: #569cd6 !important;
  font-style: italic !important;
}

.json-viewer .json-content {
  margin-left: 0 !important;
}
