/* Ninja Neumorph - Visual overrides for custom modules only */

/* ===== whatsapp_integration ===== */
.transport-type-info,
.highlighted-field {
  background: linear-gradient(145deg, var(--nm-surface), var(--nm-surface-raised)) !important;
  color: var(--nm-text) !important;
  border-left: 4px solid #7c3aed !important;
  border-radius: 0.65rem;
  box-shadow: var(--nm-shadow-raised-sm);
}

.highlighted-field label {
  color: #7c3aed !important;
}

[class*="request-status-"] {
  display: inline-flex;
  align-items: center;
  border-radius: 999px !important;
  padding: 0.2rem 0.65rem !important;
  border: 0 !important;
  box-shadow: var(--nm-shadow-raised-sm);
  font-weight: 600;
}

.request-status-pendiente { background: color-mix(in srgb, #fef3c7 70%, var(--nm-surface)) !important; color: #92400e !important; }
.request-status-asignado { background: color-mix(in srgb, #dbeafe 70%, var(--nm-surface)) !important; color: #1e3a8a !important; }
.request-status-en-curso { background: color-mix(in srgb, #dcfce7 70%, var(--nm-surface)) !important; color: #166534 !important; }
.request-status-completado { background: color-mix(in srgb, #dcfce7 70%, var(--nm-surface)) !important; color: #166534 !important; }
.request-status-cancelado { background: color-mix(in srgb, #fee2e2 70%, var(--nm-surface)) !important; color: #991b1b !important; }

/* ===== Vertical tabs readability in dark mode ===== */
.vertical-tabs {
  border: 1px solid var(--nm-border-strong);
  border-radius: var(--nm-radius-sm);
  background: var(--nm-surface);
}

.vertical-tabs__menu {
  border-top: 1px solid var(--nm-border-strong);
}

.vertical-tabs__menu-item {
  border: 1px solid var(--nm-border-strong);
  border-top: 0;
  background: var(--nm-surface-raised);
}

.vertical-tabs__menu-item a {
  color: var(--nm-text);
}

.vertical-tabs__menu-item.is-selected {
  background: var(--nm-surface);
}

.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-item-title {
  color: var(--nm-text);
}

/* Neumorph vertical tabs closer to reference style. */
.vertical-tabs__menu {
  padding: 0.35rem !important;
  border-radius: 0.85rem;
  background: linear-gradient(145deg, var(--nm-surface), var(--nm-surface-raised)) !important;
  box-shadow: var(--nm-shadow-raised-sm);
}

.vertical-tabs__menu-item {
  border: 0 !important;
  border-radius: 0.65rem !important;
  margin-bottom: 0.4rem;
  background: transparent !important;
}

.vertical-tabs__menu-item a {
  display: block;
  padding: 0.58rem 0.85rem !important;
  border-radius: 0.65rem !important;
  color: var(--nm-text) !important;
  background: linear-gradient(145deg, var(--nm-surface), var(--nm-surface-raised)) !important;
  box-shadow: var(--nm-shadow-raised-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.vertical-tabs__menu-item a:hover {
  box-shadow: var(--nm-shadow-hover);
  color: var(--nm-text) !important;
}

.vertical-tabs__menu-item.is-selected a {
  background: linear-gradient(145deg, var(--nm-surface-inset), var(--nm-surface)) !important;
  box-shadow: var(--nm-shadow-inset-sm);
}

/* ===== Managed file / details ===== */
details.form-item,
details.js-form-wrapper.form-item {
  border: 1px solid var(--nm-border-strong);
  border-radius: 0.85rem;
  background: var(--nm-surface);
  box-shadow: var(--nm-shadow-raised-sm);
}

details.form-item summary,
details.js-form-wrapper.form-item summary {
  background: linear-gradient(145deg, var(--nm-surface), var(--nm-surface-raised));
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.form-managed-file,
.image-widget.js-form-managed-file {
  border: 1px dashed var(--nm-border-strong);
  border-radius: 0.85rem;
  background: linear-gradient(145deg, var(--nm-surface), var(--nm-surface-raised));
  padding: 1rem;
  box-shadow: var(--nm-shadow-raised-sm);
}

.js-form-file.form-file {
  width: 100%;
  border-radius: 0.75rem;
  background: linear-gradient(145deg, var(--nm-surface-inset), var(--nm-surface));
  box-shadow: var(--nm-shadow-inset-sm);
  border: 1px solid var(--nm-border);
  color: var(--nm-text);
  padding: 0.7rem 0.8rem;
}

/* ===== ninja_transfer file upload from referencia.html ===== */
#file-drop-zone,
.file-drop-zone {
  border: 2px dashed color-mix(in srgb, #7c3aed 50%, var(--nm-border-strong)) !important;
  border-radius: 1rem !important;
  padding: 2rem 1.25rem !important;
  text-align: center;
  background: linear-gradient(145deg, var(--nm-surface), var(--nm-surface-raised)) !important;
  box-shadow: var(--nm-shadow-raised) !important;
  transition: all var(--nm-transition);
}

#file-drop-zone:hover,
#file-drop-zone.drag-over,
.file-drop-zone:hover,
.file-drop-zone.drag-over {
  border-color: #7c3aed !important;
  transform: translateY(-1px);
  box-shadow: var(--nm-shadow-hover) !important;
}

#upload-progress-container {
  background: linear-gradient(145deg, var(--nm-surface), var(--nm-surface-raised)) !important;
  border-radius: 1rem !important;
  box-shadow: var(--nm-shadow-raised-sm);
  border: 1px solid var(--nm-border);
}

#upload-progress-container .progress {
  height: 0.8rem !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, var(--nm-surface-inset), var(--nm-surface)) !important;
  box-shadow: var(--nm-shadow-inset-sm);
}

#upload-progress-container .progress-bar,
#upload-progress-bar {
  background: linear-gradient(90deg, #7c3aed, #a855f7) !important;
  color: #fff !important;
  font-weight: 600;
}