/* =====================================================
   JSON PATH SELECTOR DIALOG - PROFESSIONAL & CONSISTENT
   ===================================================== */

md-dialog.json-path-selector-dialog {
  width: 900px !important;
  max-width: 95vw !important;
  height: 85vh !important;
  max-height: 85vh !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}



/* =====================================================
   TOOLBAR - PROFESSIONAL LAYOUT (MEJORA: menos gap)
   ===================================================== */

:where(.json-path-selector-dialog) .json-path-toolbar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  min-height: 64px !important;
  flex-shrink: 0 !important;
}

:where(.json-path-selector-dialog) .json-path-toolbar .md-toolbar-tools {
  padding: 0 24px !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important; /* REDUCIDO: de 12px a 8px */
}


/* Icon - Left aligned, same size as title */
:where(.json-path-selector-dialog) .json-path-toolbar .json-path-icon {
  color: white !important;
  font-size: 28px !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}


/* Header Info - Next to icon */
:where(.json-path-selector-dialog) .json-path-toolbar .json-path-header-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

:where(.json-path-selector-dialog) .json-path-toolbar .json-path-header-info h2 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: white !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

:where(.json-path-selector-dialog) .json-path-toolbar .json-path-subtitle {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


/* Spacer */
:where(.json-path-selector-dialog) .json-path-toolbar .md-toolbar-tools > span[flex] {
  flex: 1 1 auto !important;
}


/* Close button */
:where(.json-path-selector-dialog) .json-path-toolbar .md-icon-button {
  color: white !important;
  margin: 0 !important;
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
}

:where(.json-path-selector-dialog) .json-path-toolbar .md-icon-button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
}



/* =====================================================
   CONTENT
   ===================================================== */

:where(.json-path-selector-dialog) .json-path-content {
  flex: 1 !important;
  padding: 24px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #fafafa !important;
}



/* =====================================================
   CURRENT PATH SECTION - COMPACTO Y EN UNA LINEA
   ===================================================== */

:where(.json-path-selector-dialog) .current-path-section {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  border: 2px solid #9c27b0;
  border-radius: 8px;
  padding: 12px 20px;
  margin-bottom: 16px; /* REDUCIDO: de 20px a 16px para hacer espacio al preview */
  box-shadow: 0 2px 8px rgba(156, 39, 176, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
}

:where(.json-path-selector-dialog) .current-path-label {
  font-size: 14px;
  font-weight: 600;
  color: #6a1b9a;
  white-space: nowrap;
}

:where(.json-path-selector-dialog) .current-path-value {
  flex: 1;
  min-width: 0;
}

:where(.json-path-selector-dialog) .current-path-value code {
  background: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  color: #4a148c;
  display: inline-block;
  border: 1px solid #ce93d8;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* =====================================================
   PATH PREVIEW SECTION - Muestra el valor extraído
   ===================================================== */

:where(.json-path-selector-dialog) .path-preview-section {
  margin-bottom: 20px;
  animation: slideIn 0.3s ease-out;
}


/* Preview Success */
:where(.json-path-selector-dialog) .preview-success {
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
  border: 2px solid #4caf50;
  border-radius: 8px;
  padding: 14px 18px;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
}

:where(.json-path-selector-dialog) .preview-success .preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(76, 175, 80, 0.2);
}

:where(.json-path-selector-dialog) .preview-success .preview-icon.success {
  color: #4caf50 !important;
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
}

:where(.json-path-selector-dialog) .preview-success .preview-title {
  font-size: 13px;
  font-weight: 600;
  color: #2e7d32;
}

:where(.json-path-selector-dialog) .preview-success .preview-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:where(.json-path-selector-dialog) .preview-success .preview-type {
  font-size: 12px;
  color: #558b2f;
  font-weight: 500;
}

:where(.json-path-selector-dialog) .preview-success .preview-type .type-badge {
  background: rgba(76, 175, 80, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  color: #2e7d32;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 11px;
}

:where(.json-path-selector-dialog) .preview-success .preview-value {
  background: white;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #c8e6c9;
  max-height: 120px;
  overflow-y: auto;
}

:where(.json-path-selector-dialog) .preview-success .preview-value code {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  color: #2e7d32;
  word-break: break-all;
  white-space: pre-wrap;
}


/* Preview Error */
:where(.json-path-selector-dialog) .preview-error {
  background: linear-gradient(135deg, #ffebee 0%, #ffe0e0 100%);
  border: 2px solid #f44336;
  border-radius: 8px;
  padding: 14px 18px;
  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.15);
}

:where(.json-path-selector-dialog) .preview-error .preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(244, 67, 54, 0.2);
}

:where(.json-path-selector-dialog) .preview-error .preview-icon.error {
  color: #f44336 !important;
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
}

:where(.json-path-selector-dialog) .preview-error .preview-title {
  font-size: 13px;
  font-weight: 600;
  color: #c62828;
}

:where(.json-path-selector-dialog) .preview-error .preview-content {
  background: white;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid #ffcdd2;
}

:where(.json-path-selector-dialog) .preview-error .error-message {
  margin: 0;
  font-size: 13px;
  color: #c62828;
  font-family: 'Monaco', 'Courier New', monospace;
}



/* =====================================================
   INSTRUCTIONS SECTION
   ===================================================== */

:where(.json-path-selector-dialog) .instructions-section {
  background: #e3f2fd;
  border-left: 4px solid #2196f3;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

:where(.json-path-selector-dialog) .instruction-icon {
  color: #2196f3 !important;
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0;
  margin-top: 2px;
}

:where(.json-path-selector-dialog) .instructions-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #1565c0;
}



/* =====================================================
   JSON SAMPLE SECTION (MEJORA: icono alineado a izquierda)
   ===================================================== */

:where(.json-path-selector-dialog) .json-sample-section {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}







:where(.json-path-selector-dialog) .json-viewer-container {
  padding: 20px;
  background: #1e1e1e;
  max-height: 500px;
  overflow-y: auto;
}



/* =====================================================
   JSON TREE VIEWER - COLORES VS CODE
   ===================================================== */

:where(.json-path-selector-dialog) .json-viewer {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.8;
  color: #d4d4d4;
  white-space: pre;
}

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

.json-value {
  color: #ce9178;
}

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

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

.json-value.boolean {
  color: #569cd6;
}

.json-value.null {
  color: #569cd6;
}

.json-object,
.json-array {
  color: #d4d4d4;
}

.json-bracket {
  color: #d4d4d4;
  font-weight: bold;
}

.json-comma {
  color: #d4d4d4;
}


/* Array index label */
.array-index-label {
  color: #4ec9b0 !important;
  font-weight: 600 !important;
  background: rgba(78, 201, 176, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 4px;
}



/* =====================================================
   JSON FIELD SELECTION - PURPURA ARMONIOSO
   ===================================================== */

.json-field {
  display: inline-block;
  padding: 3px 8px;
  margin: 0 2px;
  border-radius: 4px;
  transition: all 0.15s ease;
  position: relative;
}

.json-field.selectable {
  cursor: pointer;
  border: 2px solid transparent;
}

.json-field.selectable:hover {
  background: rgba(156, 39, 176, 0.2) !important;
  border-color: rgba(156, 39, 176, 0.5) !important;
  box-shadow: 0 0 8px rgba(156, 39, 176, 0.3);
  transform: translateY(-1px);
}

.json-field.selectable:active {
  transform: translateY(0);
}

.json-field.selected {
  background: rgba(156, 39, 176, 0.35) !important;
  border-color: #9c27b0 !important;
  box-shadow: 0 0 12px rgba(156, 39, 176, 0.5);
}

.json-field.selected:hover {
  background: rgba(156, 39, 176, 0.4) !important;
}

.json-field.non-selectable {
  cursor: not-allowed;
  opacity: 0.5;
  border: 2px solid transparent;
}



/* =====================================================
   FOOTER ACTIONS
   ===================================================== */

.json-path-actions {
  background: white !important;
  border-top: 2px solid #e0e0e0 !important;
  padding: 16px 24px !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05) !important;
  flex-shrink: 0 !important;
  min-height: 74px !important;
  display: flex !important;
  align-items: center !important;
}






/* Clear Button - Orange */
:where(.json-path-selector-dialog) .footer-btn.btn-clear {
  background: linear-gradient(135deg, #ff9800 0%, #fb8c00 100%) !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3) !important;
}

:where(.json-path-selector-dialog) .footer-btn.btn-clear:hover {
  background: linear-gradient(135deg, #f57c00 0%, #ef6c00 100%) !important;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4) !important;
  transform: translateY(-2px) !important;
}


/* Cancel Button - Neutral */
:where(.json-path-selector-dialog) .footer-btn.btn-cancel {
  background: #f5f5f5 !important;
  color: #666 !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: none !important;
}

:where(.json-path-selector-dialog) .footer-btn.btn-cancel:hover {
  background: #e0e0e0 !important;
  transform: translateY(-1px) !important;
}


/* Save Button - Purple gradient (consistente) */
:where(.json-path-selector-dialog) .footer-btn.btn-save {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}

:where(.json-path-selector-dialog) .footer-btn.btn-save:hover:not([disabled]) {
  background: linear-gradient(135deg, #5568d3 0%, #6441a5 100%) !important;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.5) !important;
  transform: translateY(-2px) !important;
}

:where(.json-path-selector-dialog) .footer-btn.btn-save[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: #e0e0e0 !important;
  color: #999 !important;
  box-shadow: none !important;
}



/* =====================================================
   SCROLLBAR
   ===================================================== */

:where(.json-path-selector-dialog) .json-path-content::-webkit-scrollbar,
:where(.json-path-selector-dialog) .json-viewer-container::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

:where(.json-path-selector-dialog) .json-path-content::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 5px;
}

:where(.json-path-selector-dialog) .json-viewer-container::-webkit-scrollbar-track {
  background: #2d2d2d;
  border-radius: 5px;
}

:where(.json-path-selector-dialog) .json-path-content::-webkit-scrollbar-thumb,
:where(.json-path-selector-dialog) .json-viewer-container::-webkit-scrollbar-thumb {
  background: #bdbdbd;
  border-radius: 5px;
}

:where(.json-path-selector-dialog) .json-viewer-container::-webkit-scrollbar-thumb {
  background: #555;
}

:where(.json-path-selector-dialog) .json-path-content::-webkit-scrollbar-thumb:hover,
:where(.json-path-selector-dialog) .json-viewer-container::-webkit-scrollbar-thumb:hover {
  background: #9e9e9e;
}

:where(.json-path-selector-dialog) .json-viewer-container::-webkit-scrollbar-thumb:hover {
  background: #666;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1024px) {
  md-dialog.json-path-selector-dialog {
    width: 95vw !important;
  }
}

@media (max-width: 768px) {
  md-dialog.json-path-selector-dialog {
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
  }

  :where(.json-path-selector-dialog) .json-path-toolbar .md-toolbar-tools {
    padding: 0 16px !important;
    gap: 6px !important;
  }

  :where(.json-path-selector-dialog) .json-path-toolbar .json-path-header-info h2 {
    font-size: 16px !important;
  }

  :where(.json-path-selector-dialog) .json-path-toolbar .json-path-subtitle {
    font-size: 12px !important;
  }

  :where(.json-path-selector-dialog) .json-path-content {
    padding: 16px !important;
  }

  :where(.json-path-selector-dialog) .json-viewer {
    font-size: 12px !important;
  }

  
}