/*Importaciones de CSS*/
@import url("Componentes/editControl.css");
@import url("Componentes/dropList.css");
@import url("Componentes/pageControl.css");
/*@import url("Componentes/segmentedControl.css");*/
@import url("Componentes/datagridControl2.css");
@import url("Componentes/contenedorDivResp.css");
/* Fin de importaciones de CSS */
@font-face {
  font-family: Questrial;
  src: url("../fonts/Questrial-Regular.ttf");
}

* {
  font-family: Questrial !important;
  scrollbar-width: thin !important; /* "auto" or "thin" */
  scrollbar-color: rgb(var(--primary-color)) rgba(220, 216, 216, 0.2) !important;
}

#jsMovInventario_1100_header {
  background-color: rgb(var(--primary-color)) !important;
}
#jsMovInventario_1100_label {
  color: rgb(var(--primary-color-text));
  font-size: 18px;
  top: 2px !important;
}

.omnis-complexgrid-row:hover {
  background-color: rgb(var(--primary-color), 0.2) !important;
}
.pageheadershadow {
  box-shadow:
    0 8px 20px rgba(210, 210, 210, 0.35),
    0 2px 8px rgba(200, 200, 200, 0.15);
  border: 2px solid rgba(var(--primary-color), 0.3);
}

.contentFotos {
  background-color: rgba(var(--primary-color), 0.1) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}
.rowscpxpreviewfact {
  box-shadow:
    0 4px 8px rgba(220, 216, 216, 0.35),
    0 2px 4px rgba(200, 200, 200, 0.15);
  border: 2px solid rgba(var(--primary-color), 0.1) !important;
}
.txtcpxpewrows {
  background-color: rgba(var(--primary-color), 0.1) !important;
  border: 1px solid rgba(var(--primary-color), 0.2) !important;
}

.txttotalprevfact {
  background-color: rgba(var(--primary-color), 0.2) !important;
  border: 2px solid rgba(var(--primary-color), 0.4) !important;
}
.txttotalprevfactpago {
  background-color: rgba(179, 179, 179, 0.1) !important;
  border: 2px solid rgba(var(--primary-color), 0.4) !important;
}
a ins.jstree-icon {
  width: 24px !important;
  height: 24px !important;
  margin-top: -4px !important;
  min-width: 24px;
}

.omnisform {
  width: 100% !important;
}

/*Presupuestos*/
/*Tengo un div con la clase pgheaderpres*/
/* y dentro tengo 4 div con la clase phdata*/
/*Necesito que los div phdata se distribuyan en tamaños iguales dinamicamente*/
/* convertir la pagina del pagedpane en flex */
/* paneles Q */

/* ============================================
   DISTRIBUCIÓN DINÁMICA DE phdata-frame
   Funciona con 2, 3, 4 o 5 paneles automáticamente
   ============================================ */

/* Cuando hay exactamente 2 paneles */
.pgheaderpres .phdata-frame:nth-last-child(2):nth-child(1),
.pgheaderpres .phdata-frame:nth-last-child(1):nth-child(2) {
  width: 50% !important;
  height: 100% !important;
  top: 0% !important;
}

.pgheaderpres .phdata-frame:nth-last-child(2):nth-child(1) { left: 0% !important; }
.pgheaderpres .phdata-frame:nth-last-child(1):nth-child(2) { left: 50% !important; }

/* Cuando hay exactamente 3 paneles */
.pgheaderpres .phdata-frame:nth-last-child(3):nth-child(1),
.pgheaderpres .phdata-frame:nth-last-child(2):nth-child(2),
.pgheaderpres .phdata-frame:nth-last-child(1):nth-child(3) {
  width: 33.333% !important;
  height: 100% !important;
  top: 0% !important;
}

.pgheaderpres .phdata-frame:nth-last-child(3):nth-child(1) { left: 0% !important; }
.pgheaderpres .phdata-frame:nth-last-child(2):nth-child(2) { left: 33.333% !important; }
.pgheaderpres .phdata-frame:nth-last-child(1):nth-child(3) { left: 66.666% !important; }

/* Cuando hay exactamente 4 paneles */
.pgheaderpres .phdata-frame:nth-last-child(4):nth-child(1),
.pgheaderpres .phdata-frame:nth-last-child(3):nth-child(2),
.pgheaderpres .phdata-frame:nth-last-child(2):nth-child(3),
.pgheaderpres .phdata-frame:nth-last-child(1):nth-child(4) {
  width: 25% !important;
  height: 100% !important;
  top: 0% !important;
}

.pgheaderpres .phdata-frame:nth-last-child(4):nth-child(1) { left: 0% !important; }
.pgheaderpres .phdata-frame:nth-last-child(3):nth-child(2) { left: 25% !important; }
.pgheaderpres .phdata-frame:nth-last-child(2):nth-child(3) { left: 50% !important; }
.pgheaderpres .phdata-frame:nth-last-child(1):nth-child(4) { left: 75% !important; }

/* Cuando hay exactamente 5 paneles */
.pgheaderpres .phdata-frame:nth-last-child(5):nth-child(1),
.pgheaderpres .phdata-frame:nth-last-child(4):nth-child(2),
.pgheaderpres .phdata-frame:nth-last-child(3):nth-child(3),
.pgheaderpres .phdata-frame:nth-last-child(2):nth-child(4),
.pgheaderpres .phdata-frame:nth-last-child(1):nth-child(5) {
  width: 20% !important;
  height: 100% !important;
  top: 0% !important;
}

.pgheaderpres .phdata-frame:nth-last-child(5):nth-child(1) { left: 0% !important; }
.pgheaderpres .phdata-frame:nth-last-child(4):nth-child(2) { left: 20% !important; }
.pgheaderpres .phdata-frame:nth-last-child(3):nth-child(3) { left: 40% !important; }
.pgheaderpres .phdata-frame:nth-last-child(2):nth-child(4) { left: 60% !important; }
.pgheaderpres .phdata-frame:nth-last-child(1):nth-child(5) { left: 80% !important; }

/* cadena completa de altura */
.pgheaderpres .phdata,
.pgheaderpres .phdata > div,
.pgheaderpres .phdata > div > div,
.pgheaderpres .omnis-pagedpane-page {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  top: 0 !important;
}

/* frame principal */
.pgpanelhmax-frame {
  width: 100% !important;
}

/* cliente del pagedpane */
.pgpanelhmax {
  width: 100% !important;
}

/* wrappers internos que pone Omnis */
.pgpanelhmax > div {
  width: 100% !important;
}

.pgpanelhmax > div > div {
  width: 100% !important;
}

/* página interna */
.pgpanelhmax .omnis-pagedpane-page {
  width: 100% !important;
}

/* opcional pero recomendado */
.pgpanelhmax-frame,
.pgpanelhmax,
.pgpanelhmax .omnis-pagedpane-page {
  left: 0 !important;
}

.pgpanelhmax .rightpagevalue-frame {
  width: 40% !important;
  left: 60% !important;
}

.pgpanelhmax .rightpagevalue {
  width: 100% !important;
  text-align: right !important;
}

.pgheaderpres .rightpagevalue-frame {
  width: 40% !important;
  left: 60% !important;
}

.pgheaderpres .rightpagevalue {
  width: 100% !important;
  text-align: right !important;
}

/* contenedor visual del panel */
.pgheaderpres .phdata {
  border-radius: 0px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* efecto hover suave */
.pgheaderpres .phdata:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.15s ease !important;
}

/* título del trimestre */
.pgheaderpres .omnis-label-header {
  color: #374151 !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important; 
  border-bottom: 1px solid #f1f3f5 !important;
}

/* label superior (Q1, Q2, etc.) */
.pgheaderpres .omnis-label-frame:first-child .omnis-label { 
  border-bottom: 1px solid #f1f3f5 !important;
}

/* valor principal */
.pgheaderpres .omnis-input {
  color: #1f2937 !important;
  font-weight: 700 !important;
}

/* campo de valor principal (fondo suave) */
.pgheaderpres .omnis-input-frame {
  border-radius: 6px !important;
}

/* campo de porcentaje */
.pgheaderpres .omnis-input-frame:last-child .omnis-input {
  color: #6b7280 !important;
  font-size: 12px !important;
}

/* bordes de los inputs más suaves */
.pgheaderpres .omnis-border-leading,
.pgheaderpres .omnis-border-notch,
.pgheaderpres .omnis-border-trailing {
  border-color: #e5e7eb !important;
}