/* ==========================================================================
   Grace — puente de estilos para DevExpress ASPx
   Distribuciones Grace

   REQUIERE grace-pos.css cargado ANTES (de ahí vienen los tokens --gx-*).

   POR QUÉ EXISTE ESTE ARCHIVO
   DevExpress trae su propio tema y, sin esto, un ASPxTextBox junto a un campo
   nuestro se ven de sistemas distintos: otra tipografía, otro radio de borde,
   otro azul de foco. Aquí se reescribe la piel de los controles que usamos
   para que hablen el idioma visual de la marca.

   TODO VA BAJO .gx
   El tema global de DevExpress (Web.config <devExpress><themes>) se deja
   intacto: las páginas viejas DG* siguen viéndose como hoy. Sólo lo que está
   dentro de un contenedor .gx adopta el diseño nuevo.

   ESPECIFICIDAD
   DevExpress rinde estilos en línea y con selectores propios de alta
   especificidad. Por eso aquí hay !important en más lugares de los que uno
   quisiera: es la única forma de ganarle sin subir a selectores frágiles que
   se rompen al actualizar la librería.
   ========================================================================== */

/* ==========================================================================
   1. TIPOGRAFÍA COMÚN
   ========================================================================== */
.gx .dxeBase,
.gx .dxeTextBox,
.gx .dxbButton,
.gx .dxgvControl,
.gx .dxpcControl,
.gx .dxtcControl,
.gx .dxeCheckBox,
.gx .dxeMemo,
.gx .dxeButtonEdit {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  color: var(--gx-ink) !important;
}

/* ==========================================================================
   2. CAMPOS DE TEXTO — ASPxTextBox, ASPxMemo, ASPxSpinEdit, ASPxDateEdit
   ========================================================================== */
.gx .dxeTextBox,
.gx .dxeMemo,
.gx .dxeButtonEdit,
.gx .dxeSpinEdit {
  background: var(--gx-surface) !important;
  border: 1px solid var(--gx-line-strong) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  transition: border-color .12s ease, box-shadow .12s ease;
}

/* El área editable interna: DevExpress la rinde como <input> anidado. */
.gx .dxeEditArea,
.gx .dxeEditAreaSys {
  background: transparent !important;
  border: 0 !important;
  color: var(--gx-ink) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  padding: 0 11px !important;
  height: 38px !important;
  line-height: 38px !important;
}
.gx .dxeMemo .dxeEditArea,
.gx .dxeMemo .dxeMemoEditArea {
  height: auto !important;
  line-height: 1.5 !important;
  padding: 9px 11px !important;
  resize: vertical;
}

/* Foco: mismo anillo rosa que el resto del sistema. */
.gx .dxeTextBox.dxeFocused,
.gx .dxeMemo.dxeFocused,
.gx .dxeButtonEdit.dxeFocused,
.gx .dxeSpinEdit.dxeFocused,
.gx .dxeTextBoxFocused,
.gx .dxeFocused {
  border-color: var(--gx-ink) !important;
  box-shadow: 0 0 0 3px var(--gx-rose-tint) !important;
}

.gx .dxeErrorCell,
.gx .dxeErrorFrame {
  color: var(--gx-crit) !important;
  font-size: 12.5px !important;
}
.gx .dxeTextBox.dxeInvalid,
.gx .dxeInvalid {
  border-color: var(--gx-crit) !important;
}

/* Texto de ayuda cuando el campo está vacío */
.gx .dxeEditArea::placeholder,
.gx .dxeNullTextEditor .dxeEditArea {
  color: var(--gx-ink-3) !important;
  font-style: normal !important;
}

.gx .dxeDisabled,
.gx .dxeDisabled .dxeEditArea {
  background: var(--gx-surface-2) !important;
  color: var(--gx-ink-3) !important;
}

/* ==========================================================================
   2b. CUERPO DE VENTANA LARGA — .gx-modal-body

   Una ficha con seis secciones no cabe en la pantalla, y ASPxPopupControl no
   recorta su contenido: la ventana crece hasta que el pie —donde viven
   Guardar y Cancelar— queda debajo del borde inferior. La ventana se vuelve
   una trampa: se ve, no se puede cerrar más que con la equis.

   La solución es que el CUERPO scrollee por dentro y el pie se quede quieto.
   ========================================================================== */
.gx-modal-body {
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Aire para que la barra de scroll no se encime con los campos. */
  padding-right: 6px;
}

/* Portátiles y pantallas bajas: menos alto todavía, o el pie se vuelve a ir. */
@media (max-height: 780px) {
  .gx-modal-body { max-height: 52vh; }
}
@media (max-height: 620px) {
  .gx-modal-body { max-height: 44vh; }
}

/* ==========================================================================
   3. BOTONES — ASPxButton
   ========================================================================== */
.gx .dxbButton {
  border-radius: var(--gx-radius) !important;
  border: 1px solid transparent !important;
  background: var(--gx-surface) !important;
  color: var(--gx-ink-2) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: background-color .12s ease, border-color .12s ease, opacity .12s ease;
}
.gx .dxbButton .dxb {
  padding: 0 16px !important;
  height: 40px !important;
  line-height: 40px !important;
  border: 0 !important;
  background: transparent !important;
}

/* Variante primaria: la única acción negra de cada vista. */
.gx .gx-dx-primary.dxbButton {
  background: var(--gx-ink) !important;
  color: var(--gx-on-ink) !important;
  box-shadow: var(--gx-shadow) !important;
}
.gx .gx-dx-primary.dxbButton:hover { opacity: .9; }
.gx .gx-dx-primary .dxb { color: var(--gx-on-ink) !important; }

/* Variante secundaria */
.gx .gx-dx-ghost.dxbButton {
  background: var(--gx-surface) !important;
  border-color: var(--gx-line-strong) !important;
  color: var(--gx-ink-2) !important;
}
.gx .gx-dx-ghost.dxbButton:hover { border-color: var(--gx-ink-3) !important; }

/* Botón alto para cobro y acciones de caja */
.gx .gx-dx-alto .dxb {
  height: var(--gx-tap-lg) !important;
  line-height: var(--gx-tap-lg) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.gx .dxbDisabled,
.gx .dxbDisabled .dxb {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

/* ==========================================================================
   4. CASILLAS — ASPxCheckBox
   ========================================================================== */
.gx .dxichSys,
.gx .dxWeb_edtCheckBoxUnchecked,
.gx .dxWeb_edtCheckBoxChecked {
  border-radius: 4px !important;
}
.gx .dxeCheckBox .dxichSys {
  border: 1px solid var(--gx-line-strong) !important;
  background: var(--gx-surface) !important;
}
.gx .dxeCheckBox .dxichSys.dxichChecked {
  background: var(--gx-ink) !important;
  border-color: var(--gx-ink) !important;
}

/* ==========================================================================
   5. LISTAS DESPLEGABLES — ASPxComboBox
   ========================================================================== */
.gx .dxeListBox,
.gx .dxpcDropDown {
  border: 1px solid var(--gx-line-strong) !important;
  border-radius: 5px !important;
  box-shadow: var(--gx-shadow) !important;
  background: var(--gx-surface) !important;
}
.gx .dxeListBoxItem {
  padding: 8px 11px !important;
  color: var(--gx-ink-2) !important;
}
.gx .dxeListBoxItemHover,
.gx .dxeListBoxItemHover.dxeListBoxItem {
  background: var(--gx-surface-2) !important;
  color: var(--gx-ink) !important;
}
.gx .dxeListBoxItemSelected,
.gx .dxeListBoxItemSelected.dxeListBoxItem {
  background: var(--gx-ink) !important;
  color: var(--gx-on-ink) !important;
}

/* ==========================================================================
   6. REJILLA — ASPxGridView
   Es el control que más se ve en el ERP; aquí se juega la mitad del diseño.
   ========================================================================== */
.gx .dxgvControl {
  background: var(--gx-surface) !important;
  border: 1px solid var(--gx-line) !important;
  border-radius: var(--gx-radius) !important;
  overflow: hidden;
}

.gx .dxgvHeader,
.gx .dxgvHeader td {
  background: var(--gx-surface-2) !important;
  border-bottom: 1px solid var(--gx-line) !important;
  border-right: 0 !important;
  color: var(--gx-ink-3) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
  padding: 10px 16px !important;
  white-space: nowrap;
}

.gx .dxgvDataRow td,
.gx .dxgvDataRowAlt td {
  background: var(--gx-surface) !important;
  border-bottom: 1px solid var(--gx-line) !important;
  border-right: 0 !important;
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  color: var(--gx-ink) !important;
  vertical-align: middle !important;
}

.gx .dxgvDataRowHover td,
.gx .dxgvDataRow:hover td {
  background: var(--gx-surface-2) !important;
}

.gx .dxgvSelectedRow td {
  background: var(--gx-rose-tint) !important;
  color: var(--gx-ink) !important;
}

.gx .dxgvFocusedRow td {
  background: var(--gx-rose-tint) !important;
  color: var(--gx-ink) !important;
}

/* Números a la derecha con cifras alineadas. */
.gx .gx-dx-num,
.gx .gx-dx-num td {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Enlace de acción dentro de una celda.
   Para las columnas que se resuelven en el navegador —abrir una ventana, por
   ejemplo— y no pasan por la columna de comandos de DevExpress. Se pinta igual
   que aquéllas para que la rejilla no tenga dos tipos de enlace. */
.gx .gx-dx-link {
  /* rose-ink y no rose: el rosa institucional da 1.9:1 sobre blanco y no se
     puede leer. La variante -ink es la que pasa AA. */
  color: var(--gx-rose-ink);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.gx .gx-dx-link:hover,
.gx .gx-dx-link:focus-visible { text-decoration: underline; }

/* Pie y paginador */
.gx .dxgvPagerBottomPanel,
.gx .dxgvPagerTopPanel,
.gx .dxgvFooter td {
  background: var(--gx-surface-2) !important;
  border-top: 1px solid var(--gx-line) !important;
  padding: 11px 16px !important;
  font-size: 12.5px !important;
  color: var(--gx-ink-3) !important;
}
.gx .dxpLite .dxp-num,
.gx .dxpLite .dxp-current {
  min-width: 30px;
  height: 30px;
  padding: 0 9px !important;
  border: 1px solid var(--gx-line-strong) !important;
  border-radius: 5px !important;
  background: var(--gx-surface) !important;
  color: var(--gx-ink-2) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  margin: 0 2px !important;
  line-height: 28px !important;
  text-decoration: none !important;
}
.gx .dxpLite .dxp-current {
  background: var(--gx-ink) !important;
  border-color: var(--gx-ink) !important;
  color: var(--gx-on-ink) !important;
}

/* Sin resultados */
.gx .dxgvEmptyDataRow,
.gx .dxgvEmptyDataRow td {
  padding: 48px 20px !important;
  text-align: center !important;
  color: var(--gx-ink-3) !important;
  font-size: 14px !important;
}

/* Filtro y búsqueda de la rejilla */
.gx .dxgvFilterRow td,
.gx .dxgvFilterBar {
  background: var(--gx-surface) !important;
  border-bottom: 1px solid var(--gx-line) !important;
  padding: 8px 16px !important;
}

/* Agrupación */
.gx .dxgvGroupRow td {
  background: var(--gx-surface-2) !important;
  border-bottom: 1px solid var(--gx-line) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gx-ink-2) !important;
  padding: 10px 16px !important;
}

/* ==========================================================================
   7. VENTANAS — ASPxPopupControl
   ========================================================================== */
.gx .dxpcControl,
.gx .dxpc-mainDiv {
  background: var(--gx-surface) !important;
  border: 1px solid var(--gx-line-strong) !important;
  border-radius: 8px !important;
  box-shadow: var(--gx-shadow-lift) !important;
  overflow: hidden;
}
.gx .dxpc-header {
  background: var(--gx-surface) !important;
  border-bottom: 1px solid var(--gx-line) !important;
  padding: 18px 24px 16px !important;
  color: var(--gx-ink) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em;
}
.gx .dxpc-content,
.gx .dxpc-contentWrapper {
  background: var(--gx-surface) !important;
  padding: 20px 24px !important;
  color: var(--gx-ink) !important;
}
.gx .dxpc-footer {
  background: var(--gx-surface) !important;
  border-top: 1px solid var(--gx-line) !important;
  padding: 16px 24px 20px !important;
}
.gx .dxpc-closeBtn { opacity: .5; }
.gx .dxpc-closeBtn:hover { opacity: 1; }

/* Velo detrás de la ventana modal */
.gx .dxpc-modalBackLayer,
.dxpc-modalBackLayer {
  background: var(--gx-scrim) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   8. PESTAÑAS — ASPxPageControl
   ========================================================================== */
.gx .dxtcControl > .dxtc-content,
.gx .dxtc-content {
  background: transparent !important;
  border: 0 !important;
  padding: 20px 0 0 !important;
}
.gx .dxtc-strip,
.gx .dxtc-stripContainer {
  background: var(--gx-surface) !important;
  border-bottom: 1px solid var(--gx-line) !important;
}
.gx .dxtc-tab,
.gx .dxtc-leftIndent,
.gx .dxtc-rightIndent {
  background: transparent !important;
  border: 0 !important;
}
.gx .dxtc-tab .dx-vam,
.gx .dxtc-tab {
  padding: 12px 14px !important;
  color: var(--gx-ink-3) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
.gx .dxtc-activeTab {
  position: relative;
  background: transparent !important;
  color: var(--gx-ink) !important;
}
.gx .dxtc-activeTab::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: -1px;
  height: 2px;
  background: var(--gx-rose);
}

/* ==========================================================================
   9. PANEL DE CARGA — ASPxLoadingPanel
   ========================================================================== */
.gx .dxlpLoadingPanel,
.dxlpLoadingPanel {
  background: var(--gx-surface) !important;
  border: 1px solid var(--gx-line-strong) !important;
  border-radius: var(--gx-radius) !important;
  box-shadow: var(--gx-shadow-lift) !important;
  color: var(--gx-ink-2) !important;
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 14px !important;
}
.dxlpLoadingPanel_Layer,
.dxlp-loadingPanel { background: var(--gx-scrim) !important; }

/* ==========================================================================
   10. TARJETAS — ASPxDataView (catálogo del POS)
   ========================================================================== */
.gx .dxdvControl,
.gx .dxdvFlowLayout {
  background: transparent !important;
  border: 0 !important;
}
.gx .dxdvItem,
.gx .dxdvFlowItem {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  vertical-align: top;
}

/* ==========================================================================
   11. TÁCTIL
   En caja se opera con el dedo: los controles suben a 44 px como el resto.
   ========================================================================== */
@media (hover: none) {
  .gx .dxeEditArea,
  .gx .dxeEditAreaSys {
    height: var(--gx-tap) !important;
    line-height: var(--gx-tap) !important;
  }
  .gx .dxbButton .dxb {
    height: var(--gx-tap) !important;
    line-height: var(--gx-tap) !important;
  }
  .gx .dxeListBoxItem { padding: 12px 11px !important; }
  .gx .dxgvDataRow td { padding: 14px 16px !important; }
  .gx .dxgvDataRowHover td { background: var(--gx-surface) !important; }
}

/* ==========================================================================
   12. IMPRESIÓN
   ========================================================================== */
@media print {
  .gx .dxgvPagerBottomPanel,
  .gx .dxgvPagerTopPanel,
  .gx .dxbButton,
  .gx .dxpcControl { display: none !important; }
  .gx .dxgvControl { border: 0 !important; }
}