/* ===================================================================
   DIALOG STYLES - Professional & Responsive Design
   Material Design 3 inspired with accessibility features
   =================================================================== */

/* Dialog Container */
.wp-dialog {
  width: 100%;
  max-width: 100%;
}

/* Dialog Header */
.wp-dialog-header {
  display: flex;
  align-items: flex-start;
  gap: 12.8px;
  margin-bottom: 19.2px;
  padding-bottom: 16px;
  border-bottom: 1.6px solid #E5E7EB;
}

.wp-dialog-icon {
  flex-shrink: 0;
  width: 44.8px;
  height: 44.8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border-radius: 12.8px;
  border: 1.6px solid #93C5FD;
}

.wp-dialog-icon .material-icons {
  font-size: 25.6px;
  color: #1E40AF;
}

.wp-dialog-title-content {
  flex: 1;
  min-width: 0;
}

.wp-dialog-title {
  margin: 0;
  font-size: 19.2px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  margin-bottom: 3.2px;
}

.wp-dialog-subtitle {
  margin: 0;
  font-size: 11.2px;
  color: #6B7280;
  line-height: 1.5;
}

/* Section Labels */
.wp-section-label {
  display: flex;
  align-items: center;
  gap: 6.4px;
  font-size: 11.2px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 0;
}

.wp-section-label .material-icons {
  font-size: 16px;
  color: #6B7280;
}

/* Custom Alert Styles */
.wp-alert {
  display: flex;
  gap: 9.6px;
  padding: 11.2px 12.8px;
  border-radius: 8px;
  border: 1.2px solid;
  margin-bottom: 6.4px;
}

.wp-alert-warning {
  background: #FFFBEB;
  border-color: #FCD34D;
}

.wp-alert-info {
  background: #EFF6FF;
  border-color: #93C5FD;
}

.wp-alert-success {
  background: #F0FDF4;
  border-color: #86EFAC;
}

.wp-alert-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wp-alert-warning .wp-alert-icon .material-icons {
  color: #D97706;
  font-size: 17.6px;
}

.wp-alert-info .wp-alert-icon .material-icons {
  color: #2563EB;
  font-size: 17.6px;
}

.wp-alert-success .wp-alert-icon .material-icons {
  color: #059669;
  font-size: 17.6px;
}

.wp-alert-content {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6.4px;
}

/* Info Card */
.wp-info-card-dialog {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 9.6px;
  padding: 12.8px;
  margin-bottom: 12.8px;
}

.wp-info-card-dialog-header {
  display: flex;
  align-items: center;
  gap: 9.6px;
  margin-bottom: 9.6px;
}

.wp-info-card-dialog-header .material-icons {
  font-size: 25.6px;
  color: #3B82F6;
}

.wp-info-card-dialog-content {
  display: flex;
  flex-direction: column;
  gap: 4.8px;
}

.wp-info-card-dialog-label {
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wp-info-card-dialog-value {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}

/* Dialog Actions (Footer) */
.wp-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9.6px;
  margin-top: 19.2px;
  padding-top: 16px;
  border-top: 1px solid #E5E7EB;
}

/* Dialog Buttons */
.wp-dialog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6.4px;
  min-width: 96px;
  font-weight: 600;
  font-size: 11.2px;
  transition: all 0.2s ease;
}

.wp-dialog-btn .material-icons {
  font-size: 16px;
}

.wp-dialog-btn-text {
  display: inline;
}

.wp-dialog-btn-cancel {
  border-radius: 6.4px;
}

.wp-dialog-btn-primary {
  border-radius: 6.4px;
  min-width: 144px;
}

/* Spinner Animation */
@keyframes wp-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.wp-spin {
  animation: wp-spin 1s linear infinite;
}

/* ===================================================================
   RADZEN DIALOG ANIMATION OVERRIDES - Smooth & Professional
   =================================================================== */

/* Backdrop - Smooth fade in - APLICA A TODOS LOS MODALES
   NO overflow:hidden — Radzen 9 appends dropdown panels to document.body,
   but the stacking context must stay clean so position:fixed panels render correctly
   NO backdrop-filter on wrapper — backdrop-filter creates a stacking context that traps
   position:fixed children (dropdown panels). Apply blur on the pseudo-element instead. */
.rz-dialog-wrapper {
  animation: dialogBackdropFadeIn 0.2s ease-out !important;
  background: rgba(15, 23, 42, 0.35) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1100 !important;
}

/* Prevent body scroll and layout shift when dialog opens */
body:has(.rz-dialog-wrapper) {
  overflow: hidden !important;
  padding-right: 0 !important;
}

@keyframes dialogBackdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Dialog Container - Opacity-only animation (NO transform = no new stacking context)
   CRITICAL: transform on a position:fixed ancestor breaks child fixed positioning (dropdown panels)
   See: https://bugs.chromium.org/p/chromium/issues/detail?id=20574 */
.rz-dialog {
  animation: dialogSmoothEntry 0.25s cubic-bezier(0.34, 1, 0.64, 1) !important;
}

@keyframes dialogSmoothEntry {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Dialog Content - Ensure no transform conflicts */
.rz-dialog-content {
  transform: none !important;
}

/* Radzen 9.1.0: .rz-dialog default is overflow:hidden — this is CORRECT.
   Dropdown panels (.rz-dropdown-panel) are moved to document.body by Radzen JS
   (document.body.appendChild(popup)), so they are NOT clipped by the dialog.
   overflow:hidden must stay to clip old tab content when switching RadzenTabs
   (prevents ghosting of previous tab content). */

/* Scrollable content area inside dialog — independent of the overflow fix above */
.rz-dialog-content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Dialog-scoped Radzen input geometry fix for real modal markup. */
.rz-dialog-content .rz-numeric,
.rz-dialog-content .rz-datepicker {
  padding: 0 !important;
}

.rz-dialog-content .rz-datepicker > .rz-inputtext,
.rz-dialog-content .rz-numeric > .rz-numeric-input {
  box-sizing: border-box;
}

/* Closing animation - Opacity-only fade (no transform to preserve stacking context) */
.rz-dialog-wrapper.rz-dialog-closing {
  animation: dialogBackdropFadeOut 0.15s ease-in !important;
}

.rz-dialog-wrapper.rz-dialog-closing .rz-dialog {
  animation: dialogSmoothExit 0.15s ease-in !important;
}

@keyframes dialogBackdropFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes dialogSmoothExit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Readonly Info Section */
.wp-readonly-section {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 12.8px;
  margin: 12.8px 0;
}

.wp-readonly-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 9.6px;
}

.wp-readonly-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 12.8px;
}

.wp-readonly-field {
  display: flex;
  flex-direction: column;
  gap: 3.2px;
}

.wp-readonly-label {
  font-size: 11px;
  color: #6B7280;
  font-weight: 500;
}

.wp-readonly-value {
  font-size: 11.2px;
  font-weight: 600;
  color: #111827;
}

/* ===================================================================
   RESPONSIVE - Mobile Optimization (<614.4px)
   =================================================================== */

@media (max-width: 767px) {
  /* Header más compacto */
  .wp-dialog-header {
    gap: 9.6px;
    margin-bottom: 16px;
    padding-bottom: 12.8px;
  }

  .wp-dialog-icon {
    width: 38.4px;
    height: 38.4px;
    border-radius: 9.6px;
  }

  .wp-dialog-icon .material-icons {
    font-size: 22.4px;
  }

  .wp-dialog-title {
    font-size: 16px;
  }

  .wp-dialog-subtitle {
    font-size: 11px;
  }

  /* Actions stack vertically */
  .wp-dialog-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .wp-dialog-btn {
    width: 100%;
    min-width: unset;
  }

  .wp-dialog-btn-primary {
    min-width: unset;
  }

  /* Hide long button text on very small screens */
  .wp-dialog-btn-text {
    display: inline;
  }
}

/* ===================================================================
   RESPONSIVE - Very Small Screens (256px)
   =================================================================== */

@media (max-width: 374px) {
  .wp-dialog-header {
    gap: 8px;
    margin-bottom: 12.8px;
    padding-bottom: 11.2px;
  }

  .wp-dialog-icon {
    width: 35.2px;
    height: 35.2px;
  }

  .wp-dialog-icon .material-icons {
    font-size: 19.2px;
  }

  .wp-dialog-title {
    font-size: 14.4px;
  }

  .wp-dialog-subtitle {
    font-size: 11px;
  }

  .wp-section-label {
    font-size: 11px;
  }

  .wp-alert {
    padding: 9.6px;
  }

  /* Shorten button text on smallest screens */
  .wp-dialog-btn-text {
    font-size: 11px;
  }
}

/* ===================================================================
   ACCESSIBILITY & FOCUS STATES
   =================================================================== */

.wp-dialog-btn:focus-visible {
  outline: 2.4px solid #BFDBFE;
  outline-offset: 1.6px;
}

.wp-alert:focus-within {
  box-shadow: 0 0 0 2.4px rgba(59, 130, 246, 0.1);
}

/* CRITICAL: Radzen closePopup() hides panels via onanimationend callback.
   popup.onanimationend = function() { popup.style.display = 'none'; }
   popup.classList.add('rz-close');
   If the rz-close CSS animation is overridden or never fires, the panel stays visible forever.
   Force the animation with !important so animationend ALWAYS fires.
   animation-fill-mode:forwards keeps opacity:0 as visual fallback. */
.rz-close {
  animation: 0.2s ease-in-out rz-close !important;
  animation-fill-mode: forwards !important;
}

/* When panel has rz-close, block pointer interactions immediately */
.rz-dropdown-panel.rz-close,
.rz-datepicker-panel.rz-close,
.rz-popup.rz-close {
  pointer-events: none !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .wp-spin {
    animation: none;
  }

  .wp-dialog-btn {
    transition: none;
  }

  /* Reduced motion: use instant animation so animationend still fires */
  .rz-close {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}

/* ===================================================================
   RADZEN SIDE DIALOG RESPONSIVE OVERRIDES
   Professional sidebar with responsive behavior
   =================================================================== */

/* Desktop: Professional sidebar styling */
@media (min-width: 768px) {
  .rz-side-dialog-container {
    box-shadow: -3.2px 0 19.2px rgba(0, 0, 0, 0.12) !important;
    border-left: 1px solid #E5E7EB;
  }

  .rz-side-dialog-content {
    background: #FFFFFF;
  }
}

/* Mobile: Full-width optimization */
@media (max-width: 767px) {
  .rz-side-dialog-container {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 100vh !important;
    box-shadow: none !important;
  }

  .rz-side-dialog-content {
    padding: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Adjust dialog padding for mobile */
  .wp-dialog {
    min-height: 100vh;
  }

  .wp-dialog .rz-stack {
    padding: 1rem !important;
  }
}

/* Tablet: Optimized sidebar width */
@media (min-width: 768px) and (max-width: 1023px) {
  .rz-side-dialog-container {
    width: 85vw !important;
    max-width: 416px !important;
  }
}

/* Large Desktop: Maximum sidebar width */
@media (min-width: 1440px) {
  .rz-side-dialog-container {
    max-width: 464px !important;
  }
}

/* Dialog backdrop/mask styling - dark solid overlay, NO backdrop-filter
   backdrop-filter creates a stacking context that traps position:fixed children */
.rz-dialog-mask {
  background: rgba(15, 23, 42, 0.35) !important;
  animation: wp-fadeIn 0.3s ease;
}

/* Wrapper de todos los diálogos — override second declaration (first wins for layout props)
   Remove backdrop-filter here too to avoid stacking context issues */
.rz-dialog-wrapper {
  background: rgba(15, 23, 42, 0.35) !important;
}

/* Enterprise dialog wrapper */
.enterprise-dialog .rz-dialog-wrapper,
.rz-dialog-wrapper:has(.enterprise-dialog) {
  background: rgba(15, 23, 42, 0.35) !important;
}

/* Mask override */
.rz-dialog-mask,
body:has(.enterprise-dialog) .rz-dialog-mask {
  background: rgba(15, 23, 42, 0.35) !important;
}

@keyframes wp-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Smooth slide-in animation override */
.rz-side-dialog-container {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Very Small Screens: Optimize spacing */
@media (max-width: 374px) {
  .wp-dialog .rz-stack {
    padding: 0.75rem !important;
  }
}

/* ===================================================================
   DROPDOWN DATA GRID RESPONSIVE OPTIMIZATION
   Professional mobile-first dropdown for personnel selection
   =================================================================== */

/* Desktop: Standard dropdown behavior */
@media (min-width: 768px) {
  .rz-dropdown-panel,
  .rz-datepicker-panel {
    max-width: 480px !important;
    /*border-radius: 9.6px !important;*/
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
  }

  .rz-dropdown-panel .rz-grid,
  .rz-dropdown-panel .rz-datatable {
    border-radius: 6.4px;
  }
}

/* Radzen 9.x: ensure popup/dropdown always renders above dialog (z-index 1000) */
.rz-popup,
.rz-dropdown-panel,
.rz-datepicker-panel {
  z-index: 2000 !important;
}

/* Mobile & Tablet: Full-width optimized dropdown */
@media (max-width: 767px) {
  /* Dropdown panel - Full width with proper spacing */
  .rz-dropdown-panel,
  .rz-datepicker-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 -3.2px 16px rgba(0, 0, 0, 0.15) !important;
  }

  /* Position at bottom for better UX */
  .rz-dropdown-panel {
    bottom: 0 !important;
    top: auto !important;
    max-height: 70vh !important;
    display: flex;
    flex-direction: column;
  }

  /* CRITICAL: animation must target .rz-open, NOT the bare .rz-dropdown-panel selector.
     Radzen closes popups by adding .rz-close and waiting for animationend on that class.
     If .rz-dropdown-panel { animation: X } loads AFTER Radzen's .rz-close { animation: rz-close }
     in the CSS cascade (same specificity, last wins), our animation overrides rz-close.
     Since wp-slideUp already completed, animationend never re-fires → panel stays visible forever.
     Fix: use .rz-dropdown-panel.rz-open (higher specificity + only active while opening)
     so .rz-close { animation: rz-close } takes effect unobstructed when closing. */
  .rz-dropdown-panel.rz-open {
    animation: wp-slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  @keyframes wp-slideUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* DataGrid inside dropdown - Optimized columns */
  .rz-dropdown-panel .rz-grid,
  .rz-dropdown-panel .rz-datatable {
    font-size: 11.2px !important;
    width: 100% !important;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Table wrapper with horizontal scroll */
  .rz-dropdown-panel .rz-grid-table-wrapper {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll */
    scroll-behavior: smooth;
    /* Hide scrollbar but keep functionality */
    scrollbar-width: thin;
    scrollbar-color: #D1D5DB #F3F4F6;
  }

  .rz-dropdown-panel .rz-grid-table-wrapper::-webkit-scrollbar {
    height: 6.4px;
  }

  .rz-dropdown-panel .rz-grid-table-wrapper::-webkit-scrollbar-track {
    background: #F3F4F6;
    border-radius: 3.2px;
  }

  .rz-dropdown-panel .rz-grid-table-wrapper::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 3.2px;
  }

  .rz-dropdown-panel .rz-grid-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
  }

  .rz-dropdown-panel .rz-grid-table {
    min-width: 100% !important;
    width: max-content !important;
  }

  /* Header optimization */
  .rz-dropdown-panel .rz-grid-thead {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #F9FAFB !important;
  }

  .rz-dropdown-panel .rz-grid-thead th {
    padding: 8px 6.4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #F9FAFB !important;
    color: #374151 !important;
    border-bottom: 1.6px solid #E5E7EB !important;
    white-space: nowrap;
  }

  /* Scroll indicator badge in first header */
  .rz-dropdown-panel .rz-grid-thead th:first-child::before {
    content: '← Desliza →';
    position: absolute;
    top: -19.2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    color: #3B82F6;
    background: rgba(59, 130, 246, 0.1);
    padding: 3.2px 9.6px;
    border-radius: 9.6px;
    white-space: nowrap;
    animation: wp-pulseScroll 2s ease-in-out 0.5s 3;
    pointer-events: none;
  }

  @keyframes wp-pulseScroll {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
  }

  /* Cell optimization */
  .rz-dropdown-panel .rz-grid-tbody td {
    padding: 9.6px 6.4px !important;
    font-size: 11px !important;
    line-height: 1.4;
    vertical-align: middle !important;
  }

  /* Row hover effect */
  .rz-dropdown-panel .rz-grid-tbody tr:hover {
    background: #F3F4F6 !important;
    cursor: pointer;
  }

  /* Selected row highlight */
  .rz-dropdown-panel .rz-grid-tbody tr.rz-state-highlight {
    background: #DBEAFE !important;
  }

  /* Badge optimization */
  .rz-dropdown-panel .rz-badge {
    font-size: 11px !important;
    padding: 3.2px 6.4px !important;
    border-radius: 4.8px;
    font-weight: 600;
  }

  /* Filter input inside dropdown */
  .rz-dropdown-panel .rz-grid-filter {
    padding: 6.4px !important;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .rz-dropdown-panel .rz-grid-filter input {
    width: 100% !important;
    padding: 8px 9.6px !important;
    font-size: 11.2px !important;
    border: 1.2px solid #D1D5DB !important;
    border-radius: 6.4px !important;
  }

  .rz-dropdown-panel .rz-grid-filter input:focus {
    outline: none !important;
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 2.4px rgba(59, 130, 246, 0.1) !important;
  }

  /* Pagination optimization - Professional & Touch-Friendly */
  .rz-dropdown-panel .rz-paginator {
    padding: 9.6px 8px !important;
    border-top: 1.6px solid #E5E7EB !important;
    background: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4.8px !important;
    flex-shrink: 0 !important;
    min-height: 48px !important;
    position: sticky;
    bottom: 0;
    z-index: 10;
    box-shadow: 0 -1.6px 6.4px rgba(0, 0, 0, 0.05);
  }

  /* Pagination buttons - Larger touch targets */
  .rz-dropdown-panel .rz-paginator-element {
    min-width: 35.2px !important;
    height: 35.2px !important;
    font-size: 11.2px !important;
    font-weight: 600 !important;
    border-radius: 6.4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.2px solid #E5E7EB !important;
    background: #FFFFFF !important;
    color: #374151 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
  }

  .rz-dropdown-panel .rz-paginator-element:hover {
    background: #F3F4F6 !important;
    border-color: #D1D5DB !important;
  }

  .rz-dropdown-panel .rz-paginator-element:active {
    transform: scale(0.95);
  }

  /* Current page - Highlighted */
  .rz-dropdown-panel .rz-paginator-element.rz-state-active,
  .rz-dropdown-panel .rz-paginator-page.rz-state-active {
    background: #3B82F6 !important;
    border-color: #3B82F6 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
  }

  /* Disabled pagination buttons */
  .rz-dropdown-panel .rz-paginator-element:disabled,
  .rz-dropdown-panel .rz-paginator-element.rz-state-disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: #F9FAFB !important;
  }

  /* Pagination arrows - Material Icons style */
  .rz-dropdown-panel .rz-paginator-prev,
  .rz-dropdown-panel .rz-paginator-next,
  .rz-dropdown-panel .rz-paginator-first,
  .rz-dropdown-panel .rz-paginator-last {
    min-width: 38.4px !important;
    height: 38.4px !important;
    background: #3B82F6 !important;
    border-color: #3B82F6 !important;
    color: #FFFFFF !important;
  }

  .rz-dropdown-panel .rz-paginator-prev:hover,
  .rz-dropdown-panel .rz-paginator-next:hover,
  .rz-dropdown-panel .rz-paginator-first:hover,
  .rz-dropdown-panel .rz-paginator-last:hover {
    background: #2563EB !important;
    border-color: #2563EB !important;
  }

  .rz-dropdown-panel .rz-paginator-prev:disabled,
  .rz-dropdown-panel .rz-paginator-next:disabled,
  .rz-dropdown-panel .rz-paginator-first:disabled,
  .rz-dropdown-panel .rz-paginator-last:disabled {
    background: #E5E7EB !important;
    border-color: #E5E7EB !important;
    color: #9CA3AF !important;
  }

  /* Page info text */
  .rz-dropdown-panel .rz-paginator-current {
    font-size: 11px !important;
    color: #6B7280 !important;
    font-weight: 600 !important;
    padding: 0 6.4px !important;
    white-space: nowrap;
  }

  /* Compact pagination for small screens */
  .rz-dropdown-panel .rz-paginator-pages {
    display: flex !important;
    gap: 3.2px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 60vw;
  }

  .rz-dropdown-panel .rz-paginator-pages::-webkit-scrollbar {
    display: none;
  }

  /* Empty state */
  .rz-dropdown-panel .rz-grid-empty {
    padding: 32px 16px !important;
    text-align: center;
    color: #6B7280;
    font-size: 11.2px;
  }

  /* Loading state */
  .rz-dropdown-panel .rz-grid-loading {
    padding: 24px 16px !important;
  }

  /* Scroll optimization - Body scrollable */
  .rz-dropdown-panel .rz-grid-tbody {
    overflow-y: auto !important;
    overflow-x: visible !important;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
  }

  /* Horizontal scroll indicator hint */
  .rz-dropdown-panel .rz-grid-table-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.9), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .rz-dropdown-panel .rz-grid-table-wrapper:not(:hover)::after {
    opacity: 1;
  }

  /* Scroll hint animation */
  @keyframes wp-scrollHint {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-8px); }
  }

  .rz-dropdown-panel .rz-grid-table-wrapper[data-scrollable="true"]::after {
    animation: wp-scrollHint 2s ease-in-out 0.5s 3;
  }
}

/* Very Small Screens (256px-299.2px): Ultra-compact */
@media (max-width: 374px) {
  .rz-dropdown-panel {
    max-height: 75vh !important;
  }

  .rz-dropdown-panel .rz-grid-thead th {
    padding: 6.4px 4.8px !important;
    font-size: 11px !important;
  }

  .rz-dropdown-panel .rz-grid-tbody td {
    padding: 8px 4.8px !important;
    font-size: 11px !important;
  }

  .rz-dropdown-panel .rz-badge {
    font-size: 11px !important;
    padding: 2.4px 4.8px !important;
  }

  .rz-dropdown-panel .rz-grid-filter input {
    padding: 6.4px 8px !important;
    font-size: 11px !important;
  }

  /* Compact pagination for 256px */
  .rz-dropdown-panel .rz-paginator {
    padding: 8px 6.4px !important;
    gap: 3.2px !important;
    min-height: 44.8px !important;
  }

  .rz-dropdown-panel .rz-paginator-element {
    min-width: 32px !important;
    height: 32px !important;
    font-size: 11px !important;
  }

  .rz-dropdown-panel .rz-paginator-prev,
  .rz-dropdown-panel .rz-paginator-next,
  .rz-dropdown-panel .rz-paginator-first,
  .rz-dropdown-panel .rz-paginator-last {
    min-width: 35.2px !important;
    height: 35.2px !important;
  }

  .rz-dropdown-panel .rz-paginator-current {
    font-size: 11px !important;
    padding: 0 4.8px !important;
  }

  .rz-dropdown-panel .rz-paginator-pages {
    max-width: 50vw;
  }
}

/* ===================================================================
   RADZEN INPUT/DROPDOWN RESPONSIVE OPTIMIZATION
   Clean, professional inputs in dialogs
   =================================================================== */

/* All Radzen inputs in dialogs */
.wp-dialog .rz-dropdown,
.wp-dialog .rz-textbox,
.wp-dialog .rz-numeric,
.wp-dialog .rz-datepicker,
.wp-dialog .rz-textarea {
  width: 100% !important;
  /*border-radius: 6.4px !important;*/
  border: 1.2px solid #D1D5DB !important;
  transition: all 0.2s ease;
}

.wp-dialog .rz-dropdown:focus,
.wp-dialog .rz-textbox:focus,
.wp-dialog .rz-numeric:focus,
.wp-dialog .rz-datepicker:focus,
.wp-dialog .rz-textarea:focus {
  outline: none !important;
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 2.4px rgba(59, 130, 246, 0.1) !important;
}

/* Mobile input optimization */
@media (max-width: 767px) {
  .wp-dialog .rz-dropdown,
  .wp-dialog .rz-textbox,
  .wp-dialog .rz-numeric,
  .wp-dialog .rz-datepicker {
    font-size: 12.8px !important; /* Prevents zoom on iOS */
    padding: 9.6px 11.2px !important;
    min-height: 38.4px !important; /* Touch target */
  }

  .wp-dialog .rz-textarea {
    font-size: 12.8px !important;
    padding: 9.6px 11.2px !important;
    min-height: 80px !important;
  }

  /* Dropdown arrow button */
  .wp-dialog .rz-dropdown-trigger-icon {
    font-size: 16px !important;
  }
}

/* Very small screens */
@media (max-width: 374px) {
  .wp-dialog .rz-dropdown,
  .wp-dialog .rz-textbox,
  .wp-dialog .rz-numeric,
  .wp-dialog .rz-datepicker {
    padding: 8px 9.6px !important;
    min-height: 35.2px !important;
  }
}

/* ===================================================================
   MOBILE 320PX ULTRA-OPTIMIZATION
   Professional, clean, fluid experience
   =================================================================== */

@media (max-width: 767px) {
  /* Stack optimization - Better spacing */
  .wp-dialog .rz-stack {
    gap: 1rem !important;
  }

  /* Row/Column - Always stack on mobile */
  .wp-dialog .rz-row {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .wp-dialog .rz-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Labels - Better readability */
  .wp-dialog .rz-label {
    font-size: 11.2px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 4.8px !important;
    display: block;
  }

  /* Checkboxes - Better touch targets */
  .wp-dialog .rz-chkbox {
    width: 19.2px !important;
    height: 19.2px !important;
  }

  .wp-dialog .rz-chkbox-box {
    width: 19.2px !important;
    height: 19.2px !important;
    border-radius: 4.8px !important;
    border: 1.6px solid #D1D5DB !important;
  }

  .wp-dialog .rz-chkbox-icon {
    font-size: 12.8px !important;
  }

  /* Badges - Compact and readable */
  .wp-dialog .rz-badge {
    font-size: 11px !important;
    padding: 3.2px 8px !important;
    border-radius: 4.8px !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 3.2px;
  }

  /* Alerts - Mobile optimized */
  .wp-dialog .rz-alert {
    padding: 9.6px !important;
    border-radius: 8px !important;
    font-size: 11.2px !important;
  }

  /* Progress indicators */
  .wp-dialog .rz-progressbar-circle {
    width: 32px !important;
    height: 32px !important;
  }

  /* DatePicker popup optimization */
  .rz-datepicker-panel {
    max-height: 85vh !important;
  }

  .rz-calendar {
    width: 100% !important;
    max-width: 100% !important;
  }

  .rz-calendar-table td,
  .rz-calendar-table th {
    padding: 8px 6.4px !important;
    font-size: 11.2px !important;
  }

  /* Timepicker in datepicker */
  .rz-timepicker {
    padding: 9.6px !important;
  }

  .rz-hour-picker input,
  .rz-minute-picker input {
    font-size: 14.4px !important;
    padding: 9.6px !important;
    min-height: 38.4px !important;
  }
}

/* 256px specific - Ultra-compact professional */
@media (max-width: 374px) {
  .wp-dialog .rz-stack {
    gap: 0.875rem !important;
  }

  .wp-dialog .rz-row {
    gap: 0.875rem !important;
  }

  .wp-dialog .rz-label {
    font-size: 11px !important;
  }

  .wp-dialog .rz-badge {
    font-size: 11px !important;
    padding: 2.4px 6.4px !important;
  }

  .wp-dialog .rz-alert {
    padding: 8px !important;
    font-size: 11px !important;
  }

  /* DatePicker calendar cells */
  .rz-calendar-table td,
  .rz-calendar-table th {
    padding: 6.4px 4.8px !important;
    font-size: 11px !important;
  }

  .rz-hour-picker input,
  .rz-minute-picker input {
    font-size: 12.8px !important;
    padding: 8px !important;
    min-height: 35.2px !important;
  }
}

/* ===================================================================
   PROFESSIONAL POLISH - Smooth transitions & interactions
   =================================================================== */

/* Smooth focus transitions */
.wp-dialog .rz-dropdown:focus-within,
.wp-dialog .rz-textbox:focus-within,
.wp-dialog .rz-numeric:focus-within,
.wp-dialog .rz-datepicker:focus-within,
.wp-dialog .rz-textarea:focus-within {
  transform: scale(1.01);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effects for inputs (desktop only) */
@media (min-width: 768px) {
  .wp-dialog .rz-dropdown:hover,
  .wp-dialog .rz-textbox:hover,
  .wp-dialog .rz-numeric:hover,
  .wp-dialog .rz-datepicker:hover {
    border-color: #9CA3AF !important;
    transition: border-color 0.15s ease;
  }
}

/* Disabled state styling */
.wp-dialog .rz-dropdown:disabled,
.wp-dialog .rz-textbox:disabled,
.wp-dialog .rz-numeric:disabled,
.wp-dialog .rz-datepicker:disabled,
.wp-dialog .rz-textarea:disabled {
  background: #F9FAFB !important;
  color: #9CA3AF !important;
  cursor: not-allowed !important;
  opacity: 0.6;
}

/* Error state styling */
.wp-dialog .rz-dropdown.rz-state-error,
.wp-dialog .rz-textbox.rz-state-error,
.wp-dialog .rz-numeric.rz-state-error,
.wp-dialog .rz-datepicker.rz-state-error,
.wp-dialog .rz-textarea.rz-state-error {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 2.4px rgba(239, 68, 68, 0.1) !important;
}

/* Placeholder styling */
.wp-dialog .rz-dropdown::placeholder,
.wp-dialog .rz-textbox::placeholder,
.wp-dialog .rz-numeric::placeholder,
.wp-dialog .rz-textarea::placeholder {
  color: #9CA3AF !important;
  opacity: 1;
}

/* Remove input number spinners on mobile */
@media (max-width: 767px) {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
}

/* ===================================================================
   TERRAVIX DIALOG SYSTEM - Modern & Accessible Design
   Full responsive with AA contrast ratios (4.5:1 minimum)
   Click outside to close functionality included
   =================================================================== */

/* ===================================================================
   RADZEN DIALOG OVERRIDE - Para integración perfecta
   =================================================================== */

/* Ocultar el dialog wrapper default de Radzen */
.rz-dialog-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

.rz-dialog-content {
  background: transparent !important;
  padding: 0 !important;
}

/* Ocultar solo el titlebar de Radzen, no todo el contenido */
.rz-dialog-titlebar,
.rz-dialog-title {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Backdrop Overlay - Click para cerrar */
.tv-dialog-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: none;
  z-index: 1050;
  animation: fadeIn 0.2s ease-out;
  cursor: pointer;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Dialog Container - Centrado */
.tv-dialog-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1051;
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  animation: slideUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: default;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, -45%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* Dialog Content - Card principal */
.tv-dialog-content {
  background: #FFFFFF;
  border-radius: 12.8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 3.2px 9.6px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

/* Header del Dialog */
.tv-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 19.2px;
  border-bottom: 1.6px solid #E5E7EB;
  background: linear-gradient(180deg, #FAFBFC 0%, #FFFFFF 100%);
  flex-shrink: 0;
}

.tv-dialog-header-content {
  display: flex;
  align-items: center;
  gap: 12.8px;
  flex: 1;
  min-width: 0;
}

/* Icon Badge */
.tv-dialog-icon-badge {
  flex-shrink: 0;
  width: 41.6px;
  height: 41.6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  border-radius: 11.2px;
  border: 1.6px solid #93C5FD;
}

.tv-dialog-icon-badge .material-icons {
  font-size: 22.4px;
  color: #1E40AF; /* AA: 10.5:1 */
}

/* Variantes de color para icons */
.tv-dialog-icon-badge-primary {
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  border-color: #93C5FD;
}

.tv-dialog-icon-badge-primary .material-icons {
  color: #1E40AF; /* AA: 10.5:1 */
}

.tv-dialog-icon-badge-success {
  background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
  border-color: #6EE7B7;
}

.tv-dialog-icon-badge-success .material-icons {
  color: #065F46; /* AA: 11.2:1 */
}

.tv-dialog-icon-badge-warning {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-color: #FCD34D;
}

.tv-dialog-icon-badge-warning .material-icons {
  color: #78350F; /* AAA: 11.5:1 */
}

/* Title Section */
.tv-dialog-title-section {
  flex: 1;
  min-width: 0;
}

.tv-dialog-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #111827; /* AAA: 16.1:1 */
  line-height: 1.3;
  margin-bottom: 3.2px;
}

.tv-dialog-subtitle {
  margin: 0;
  font-size: 11.2px;
  color: #6B7280; /* AA: 4.6:1 */
  line-height: 1.5;
}

/* Close Button */
.tv-dialog-close-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #6B7280; /* AA: 4.6:1 */
  cursor: pointer;
  transition: all 0.2s ease;
}

.tv-dialog-close-btn:hover {
  background: #F3F4F6;
  color: #374151; /* AA: 10.2:1 */
}

.tv-dialog-close-btn:active {
  background: #E5E7EB;
  transform: scale(0.95);
}

.tv-dialog-close-btn .material-icons {
  font-size: 19.2px;
}

/* Dialog Body - Scrollable */
.tv-dialog-body {
  flex: 1;
  overflow-y: auto;
  padding: 19.2px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Secciones */
.tv-section {
  display: flex;
  flex-direction: column;
  gap: 6.4px;
}

/* Labels */
.tv-label {
  display: flex;
  align-items: center;
  gap: 4.8px;
  font-size: 11.2px;
  font-weight: 600;
  color: #374151; /* AA: 10.2:1 */
  margin-bottom: 3.2px;
}

.tv-label-icon {
  font-size: 14.4px !important;
  color: #6B7280; /* AA: 4.6:1 */
}

.tv-label-required::after {
  content: "*";
  color: #DC2626; /* AA: 5.9:1 */
  margin-left: 3.2px;
  font-weight: 700;
}

.tv-label-optional {
  font-size: 11px;
  font-weight: 500;
  color: #9CA3AF; /* AA: 3.1:1 for secondary text */
  margin-left: 3.2px;
}

/* Info Cards */
.tv-info-card {
  display: flex;
  gap: 11.2px;
  padding: 12.8px;
  background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
  border: 1.6px solid #E5E7EB;
  border-radius: 9.6px;
}

.tv-info-card-icon {
  flex-shrink: 0;
  width: 35.2px;
  height: 35.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  border-radius: 9.6px;
  border: 1.6px solid #93C5FD;
}

.tv-info-card-icon .material-icons {
  font-size: 19.2px;
  color: #1E40AF; /* AA: 10.5:1 */
}

.tv-info-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3.2px;
}

.tv-info-card-label {
  font-size: 11px;
  font-weight: 600;
  color: #6B7280; /* AA: 4.6:1 */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tv-info-card-value {
  font-size: 12.8px;
  font-weight: 700;
  color: #111827; /* AAA: 16.1:1 */
  line-height: 1.3;
}

.tv-info-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4.8px;
  padding: 3.2px 8px;
  background: #DBEAFE;
  border: 1px solid #93C5FD;
  border-radius: 4.8px;
  font-size: 11px;
  font-weight: 600;
  color: #1E40AF; /* AA: 10.5:1 */
  width: fit-content;
  margin-top: 3.2px;
}

.tv-info-card-badge .material-icons {
  font-size: 12.8px;
}

.tv-info-card-meta {
  display: flex;
  align-items: center;
  gap: 3.2px;
  font-size: 11px;
  color: #6B7280; /* AA: 4.6:1 */
  font-family: 'Courier New', monospace;
  margin-top: 3.2px;
}

.tv-info-card-meta .material-icons {
  font-size: 11.2px;
}

/* Toggle Cards (Radio-style selection) */
.tv-toggle-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 9.6px;
}

.tv-toggle-card {
  display: flex;
  align-items: flex-start;
  gap: 9.6px;
  padding: 12.8px;
  background: #FFFFFF;
  border: 1.6px solid #E5E7EB;
  border-radius: 9.6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.tv-toggle-card:hover {
  border-color: #3B82F6;
  background: #F9FAFB;
  box-shadow: 0 1.6px 6.4px rgba(59, 130, 246, 0.1);
}

.tv-toggle-card.active {
  border-color: #3B82F6;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  box-shadow: 0 3.2px 9.6px rgba(59, 130, 246, 0.15);
}

.tv-toggle-card.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.4px;
  background: linear-gradient(90deg, #3B82F6 0%, #2563EB 100%);
  border-radius: 9.6px 9.6px 0 0;
}

.tv-toggle-card-radio {
  flex-shrink: 0;
  width: 19.2px;
  height: 19.2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tv-toggle-card-radio .material-icons {
  font-size: 19.2px;
  color: #9CA3AF;
  transition: color 0.2s ease;
}

.tv-toggle-card.active .tv-toggle-card-radio .material-icons {
  color: #3B82F6; /* AA: 4.8:1 */
}

.tv-toggle-card-content {
  flex: 1;
  min-width: 0;
}

.tv-toggle-card-title {
  font-size: 12px;
  font-weight: 700;
  color: #374151; /* AA: 10.2:1 */
  margin-bottom: 1.6px;
  line-height: 1.3;
}

.tv-toggle-card-desc {
  font-size: 11px;
  color: #6B7280; /* AA: 4.6:1 */
  line-height: 1.4;
}

.tv-toggle-card.active .tv-toggle-card-title {
  color: #1E40AF; /* AA: 10.5:1 */
}

/* Info Banners */
.tv-info-banner {
  display: flex;
  align-items: center;
  gap: 9.6px;
  padding: 11.2px 12.8px;
  border-radius: 8px;
  border: 1.6px solid;
  font-size: 11.2px;
  font-weight: 500;
  line-height: 1.5;
}

.tv-info-banner .material-icons {
  font-size: 17.6px;
  flex-shrink: 0;
}

.tv-info-banner-info {
  background: #EFF6FF;
  border-color: #93C5FD;
  color: #1E40AF; /* AA: 10.5:1 */
}

.tv-info-banner-warning {
  background: #FFFBEB;
  border-color: #FCD34D;
  color: #92400E; /* AAA: 7.2:1 */
}

.tv-info-banner-success {
  background: #F0FDF4;
  border-color: #86EFAC;
  color: #065F46; /* AA: 11.2:1 */
}

/* Loading State */
.tv-loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9.6px;
  padding: 16px;
  font-size: 11.2px;
  color: #6B7280; /* AA: 4.6:1 */
}

/* Form Rows & Columns */
.tv-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12.8px;
}

@media (min-width: 640px) {
  .tv-form-row {
    grid-template-columns: repeat(12, 1fr);
  }

  .tv-form-col-6 {
    grid-column: span 6;
  }

  .tv-form-col-12 {
    grid-column: span 12;
  }
}

.tv-form-col {
  display: flex;
  flex-direction: column;
  gap: 6.4px;
}

/* Input & Dropdown Styles */
.tv-input,
.tv-dropdown,
.tv-textarea {
  width: 100%;
  padding: 9.6px 11.2px;
  border: 1.6px solid #D1D5DB;
  border-radius: 6.4px;
  font-size: 11.2px;
  color: #111827; /* AAA: 16.1:1 */
  background: #FFFFFF;
  transition: all 0.2s ease;
}

.tv-input:hover,
.tv-dropdown:hover,
.tv-textarea:hover {
  border-color: #9CA3AF;
}

.tv-input:focus,
.tv-dropdown:focus,
.tv-textarea:focus {
  outline: none;
  border-color: #3B82F6;
  box-shadow: 0 0 0 2.4px rgba(59, 130, 246, 0.1);
}

.tv-textarea {
  resize: vertical;
  min-height: 64px;
  font-family: inherit;
}

/* Radzen Components Styling dentro de TerraVix Dialogs */
.tv-dialog-body .rz-dropdown,
.tv-dialog-body .rz-textbox,
.tv-dialog-body .rz-numeric,
.tv-dialog-body .rz-datepicker,
.tv-dialog-body .rz-textarea,
.tv-dialog-body .rz-dropdown-panel,
.tv-dialog-body .rz-datepicker-calendar {
  width: 100% !important;
  border: 1.6px solid #D1D5DB !important;
  /*border-radius: 6.4px !important;*/
  font-size: 11.2px !important;
  transition: all 0.2s ease !important;
}

.tv-dialog-body .rz-dropdown:hover,
.tv-dialog-body .rz-textbox:hover,
.tv-dialog-body .rz-numeric:hover,
.tv-dialog-body .rz-datepicker:hover,
.tv-dialog-body .rz-textarea:hover {
  border-color: #9CA3AF !important;
}

.tv-dialog-body .rz-dropdown:focus,
.tv-dialog-body .rz-textbox:focus,
.tv-dialog-body .rz-numeric:focus,
.tv-dialog-body .rz-datepicker:focus,
.tv-dialog-body .rz-textarea:focus {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 2.4px rgba(59, 130, 246, 0.1) !important;
}

/* DropDownDataGrid específico - alineación perfecta */
.tv-dialog-body .rz-dropdown-panel {
  margin-top: 3.2px !important;
  border: 1.6px solid #3B82F6 !important;
  border-radius: 6.4px !important;
  box-shadow: 0 6.4px 19.2px rgba(0, 0, 0, 0.15) !important;
  max-height: 256px !important;
  overflow: hidden !important;
}

.tv-dialog-body .rz-dropdown-items {
  max-height: 224px !important;
  overflow-y: auto !important;
}

.tv-dialog-body .rz-dropdown-item {
  padding: 8px 11.2px !important;
  font-size: 11.2px !important;
  color: #374151 !important;
  transition: background 0.15s ease !important;
}

.tv-dialog-body .rz-dropdown-item:hover {
  background: #F3F4F6 !important;
}

.tv-dialog-body .rz-dropdown-item.rz-state-highlight {
  background: #EFF6FF !important;
  color: #1E40AF !important;
  font-weight: 600 !important;
}

/* Filtro del dropdown */
.tv-dialog-body .rz-dropdown-filter-container {
  padding: 9.6px !important;
  border-bottom: 1.6px solid #E5E7EB !important;
  background: #F9FAFB !important;
}

.tv-dialog-body .rz-dropdown-filter {
  width: 100% !important;
  padding: 8px 9.6px !important;
  border: 1.6px solid #D1D5DB !important;
  border-radius: 4.8px !important;
  font-size: 11.2px !important;
}

.tv-dialog-body .rz-dropdown-filter:focus {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 2.4px rgba(59, 130, 246, 0.1) !important;
}

/* Badge dentro de dropdown */
.tv-dialog-body .rz-dropdown-item .rz-badge {
  font-size: 11px !important;
  padding: 2.4px 6.4px !important;
  border-radius: 3.2px !important;
  font-weight: 600 !important;
}

/* Readonly Section */
.tv-readonly-section {
  padding: 12.8px;
  background: #F9FAFB;
  border: 1.6px solid #E5E7EB;
  border-radius: 8px;
}

.tv-readonly-header {
  display: flex;
  align-items: center;
  gap: 6.4px;
  font-size: 11px;
  font-weight: 700;
  color: #6B7280; /* AA: 4.6:1 */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 9.6px;
}

.tv-readonly-header .material-icons {
  font-size: 12.8px;
}

.tv-readonly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12.8px;
}

.tv-readonly-item {
  display: flex;
  flex-direction: column;
  gap: 3.2px;
}

.tv-readonly-label {
  font-size: 11px;
  font-weight: 600;
  color: #6B7280; /* AA: 4.6:1 */
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.tv-readonly-value {
  font-size: 11.2px;
  font-weight: 600;
  color: #111827; /* AAA: 16.1:1 */
  line-height: 1.4;
}

/* Status Badges */
.tv-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4.8px;
  padding: 3.2px 8px;
  border-radius: 4.8px;
  font-size: 11px;
  font-weight: 600;
  border: 1.2px solid;
  width: fit-content;
}

.tv-status-active {
  background: #D1FAE5;
  border-color: #6EE7B7;
  color: #065F46; /* AA: 11.2:1 */
}

.tv-status-active .material-icons {
  font-size: 12.8px;
  color: #059669;
}

.tv-status-inactive {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #991B1B; /* AA: 9.8:1 */
}

.tv-status-inactive .material-icons {
  font-size: 12.8px;
  color: #DC2626;
}

/* Dialog Footer */
.tv-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9.6px;
  padding: 16px 19.2px;
  border-top: 1.6px solid #E5E7EB;
  background: #FAFBFC;
  flex-shrink: 0;
}

/* Buttons */
.tv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6.4px;
  padding: 9.6px 19.2px;
  border: 1.6px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-height: 35.2px; /* Touch-friendly */
}

.tv-btn .material-icons {
  font-size: 16px;
}

.tv-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Button Secondary */
.tv-btn-secondary {
  background: #FFFFFF;
  border-color: #D1D5DB;
  color: #374151; /* AA: 10.2:1 */
}

.tv-btn-secondary:hover:not(:disabled) {
  background: #F9FAFB;
  border-color: #9CA3AF;
  box-shadow: 0 1.6px 6.4px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.tv-btn-secondary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 3.2px rgba(0, 0, 0, 0.06);
}

/* Button Primary */
.tv-btn-primary {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  border-color: #3B82F6;
  color: #FFFFFF; /* AAA: 9.2:1 */
  box-shadow: 0 1.6px 6.4px rgba(59, 130, 246, 0.3);
}

.tv-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  border-color: #2563EB;
  box-shadow: 0 3.2px 11.2px rgba(59, 130, 246, 0.4);
  transform: translateY(-1.6px);
}

.tv-btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1.6px 6.4px rgba(59, 130, 246, 0.3);
}

/* Button Success */
.tv-btn-success {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border-color: #10B981;
  color: #FFFFFF; /* AAA: 3.4:1 - needs improvement for AAA */
  box-shadow: 0 1.6px 6.4px rgba(16, 185, 129, 0.3);
}

.tv-btn-success:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border-color: #059669;
  box-shadow: 0 3.2px 11.2px rgba(16, 185, 129, 0.4);
  transform: translateY(-1.6px);
}

.tv-btn-success:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1.6px 6.4px rgba(16, 185, 129, 0.3);
}

/* Spin Animation */
@keyframes tv-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.tv-spin {
  animation: tv-spin 1s linear infinite;
}

/* Scroll dentro del dialog */
.tv-dialog-body::-webkit-scrollbar {
  width: 6.4px;
}

.tv-dialog-body::-webkit-scrollbar-track {
  background: #F3F4F6;
  border-radius: 3.2px;
}

.tv-dialog-body::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 3.2px;
}

.tv-dialog-body::-webkit-scrollbar-thumb:hover {
  background: #9CA3AF;
}

/* Prevenir scroll del body cuando el dialog está abierto */
body.tv-dialog-open {
  overflow: hidden !important;
}

/* Asegurar que el backdrop de Radzen no interfiera */
.rz-dialog-mask {
  display: none !important;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
  .tv-dialog-container {
    width: 95%;
    max-width: none;
  }

  .tv-dialog-header {
    padding: 16px;
  }

  .tv-dialog-body {
    padding: 16px;
  }

  .tv-dialog-footer {
    flex-direction: column-reverse;
    padding: 12.8px 16px;
  }

  .tv-btn {
    width: 100%;
  }

  .tv-dialog-icon-badge {
    width: 35.2px;
    height: 35.2px;
  }

  .tv-dialog-icon-badge .material-icons {
    font-size: 19.2px;
  }

  .tv-dialog-title {
    font-size: 14.4px;
  }

  .tv-dialog-subtitle {
    font-size: 11px;
  }

  .tv-toggle-cards {
    grid-template-columns: 1fr;
  }

  .tv-readonly-grid {
    grid-template-columns: 1fr;
  }

  /* Dropdowns en móvil - ocupan todo el ancho */
  .tv-dialog-body .rz-dropdown-panel {
    left: 8px !important;
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }
}

/* ===================================================================
   FINAL OVERRIDE - Backdrop oscuro sólido en TODOS los modales
   =================================================================== */

/* Aplicar a cualquier wrapper de diálogo de Radzen */
div.rz-dialog-wrapper,
body > div.rz-dialog-wrapper,
.rz-dialog-wrapper {
  background: rgba(15, 23, 42, 0.35) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Aplicar a cualquier mask de diálogo */
div.rz-dialog-mask,
body > div.rz-dialog-mask,
.rz-dialog-mask {
  background: rgba(15, 23, 42, 0.35) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Selector ultra específico para StatusChangeModal */
body:has(.rz-dialog) .rz-dialog-wrapper,
body:has(.rz-dialog) .rz-dialog-mask {
  background: rgba(15, 23, 42, 0.35) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}