/* UI compacta para Radzen y controles generales */
.compact-ui {
  font-family: inherit;
  font-size: 14px; /* tamaño base para desktop */
  line-height: 1.2;
}

/* Controles */
.compact-ui .rz-dropdown .rz-dropdown-label,
.compact-ui .rz-inputtext,
.compact-ui .rz-dropdown .rz-dropdown-panel .rz-list-item,
.compact-ui .rz-button .rz-button-label,
.compact-ui .rz-text {
  font-size: 0.85rem;
}

/* Alturas y paddings más pequeñas */
.compact-ui .rz-inputtext,
.compact-ui .rz-dropdown .rz-dropdown-label,
.compact-ui .rz-button,
.compact-ui input,
.compact-ui select,
.compact-ui textarea {
  height: 32px;
  padding: 4px 8px;
  font-size: 0.85rem;
  box-sizing: border-box;
}

/* Botones */
.compact-ui .rz-button {
  padding: 4px 8px;
  border-radius: 4px;
}

/* DataGrid más compacto */
.compact-ui .rz-datatable .rz-datatable-table th,
.compact-ui .rz-datatable .rz-datatable-table td {
  padding: 6px 8px;
  font-size: 0.82rem;
  /* permitir que elementos overflow visibles salgan del celda */
  overflow: visible;
  white-space: nowrap;
}

.compact-ui .rz-datatable .rz-datatable-row {
  min-height: 36px;
}

/* DropDown list items */
.compact-ui .rz-dropdown .rz-dropdown-panel .rz-list .rz-list-item {
  padding: 6px 8px;
  font-size: 0.82rem;
}

/* Iconos e imágenes */
.compact-ui img {
  max-width: 140px;
  height: auto;
}

/* Reducir márgenes de filas/columnas */
.compact-ui .rz-row,
.compact-ui .rz-column,
.compact-ui .rz-stack {
  margin: 0;
  gap: 0.4rem;
}

/* Media queries para tablets y móviles */
@media (max-width: 1024px) {
  .compact-ui { font-size: 13px; }
  .compact-ui .rz-inputtext,
  .compact-ui .rz-dropdown .rz-dropdown-label,
  .compact-ui .rz-button { height: 30px; font-size: 0.82rem; }
  .compact-ui .rz-datatable .rz-datatable-row { min-height: 34px; }
}

@media (max-width: 480px) {
  .compact-ui { font-size: 12px; }
  .compact-ui .rz-inputtext,
  .compact-ui .rz-dropdown .rz-dropdown-label,
  .compact-ui .rz-button { height: 28px; padding: 3px 6px; font-size: 0.78rem; }
  .compact-ui .rz-datatable .rz-datatable-table th,
  .compact-ui .rz-datatable .rz-datatable-table td { padding: 4px 6px; font-size: 0.76rem; }
  .compact-ui img { max-width: 120px; }
}

/* Ajustes específicos para dropdown de artículos: mostrar 7 caracteres y manejar overflow */
.compact-ui .articulo-dropdown {
  /* usar ancho mínimo concreto y permitir que exceda la celda visualmente */
  display: inline-block;
  min-width: calc(7ch + 3rem); /* espacio para 7 caracteres + icon/padding */
  width: auto;
  max-width: none;
  box-sizing: border-box;
}

/* Alineación a la izquierda del texto del label del dropdown y quitar padding izquierdo/derecho */
.compact-ui .articulo-dropdown .rz-dropdown-label,
.compact-ui .articulo-dropdown .rz-inputtext {
  text-align: left !important;
  /* Quitar padding horizontal pero mantener padding vertical */
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* Forzar que el propio componente padre permita overflow visible (para que el control no se corte) */
.compact-ui .rz-datatable .rz-datatable-table td,
.compact-ui .rz-datatable .rz-datatable-table th {
  overflow: visible;
}

/* Asegura que el panel desplegable se muestre por encima y no quede oculto */
.compact-ui .rz-dropdown .rz-dropdown-panel {
  z-index: 2000;
}

/* Si Radzen renderiza el panel en el body, asegurar que el label del control no esté centrado por otras reglas */
.compact-ui .rz-dropdown .rz-dropdown-label {
  display: block;
}

/* Ajustes responsive opcionales */
@media (max-width: 480px) {
  .compact-ui .articulo-dropdown {
    min-width: calc(7ch + 2rem);
  }
  .compact-ui .articulo-dropdown .rz-dropdown-label,
  .compact-ui .articulo-dropdown .rz-inputtext {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    font-size: 0.78rem;
  }
}