/******* !!!  PRUEBAS.   ESTILOS DEL DESIGN SYSTEM !!! ***************/
/* Deben estar embebidos en los estilos de /lib */

.pwa-container {
  --ui-base-padding: 8px;
  --ui-base-gap: 8px;
  --ui-base-border-radius: 8px;

  --ui-color-bg-info: #F3F8FB;

  --ui-spacing-lg: 24px;
}


/* Clases utilitarias para layout */
.pwa-container .ui--row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ui-base-gap);
}

.pwa-container .ui--row>* {
  flex: 1;
}


/** UiCard **/
.pwa-container .UiCard {
  border: 1px solid #ccc;
  margin: 8px 0;
}

.pwa-container .UiCard__slot {
  padding: var(--ui-base-padding);
}

.pwa-container .UiCard__slot p {
  margin: 0;
}

.pwa-container .UiCard__item {
  font-size: 1.2rem;
}

.pwa-container .UiCard__item .UiItem__text {
  font-weight: bold;
}

.pwa-container .UiCard.ui-card--info {
  border: none;
  border-radius: var(--ui-base-border-radius);
  background-color: var(--ui-color-bg-info);
}

.pwa-container a>.UiCard:hover {
  background-color: var(--ui-color-hover);
}


/** UiItem **/

.pwa-container .UiItem {
  /* --ui-item-padding: 4px 8px; */
  border-radius: var(--ui-base-border-radius);
}

/* UiItem dentro de <a> */
.pwa-container a>.UiItem:hover {
  background-color: var(--ui-color-hover);
}



/** Formularios **/
.pwa-container fieldset>.UiInput {
  margin-bottom: 1em;
}

.pwa-container form:invalid button[type=submit] {
  opacity: 0.6;
}

#phidias_search .UiDialog__dialog {
    background-color: var(--ui-color-z1);
}

/* .QueryContainer */
.QueryContainer__table {
  width: 100%;
}

.QueryContainer__table th,
.QueryContainer__table td {
  border-right: 1px solid var(--ui-table-color-border);
  border-bottom: 1px solid var(--ui-table-color-border);
}

.QueryContainer__table th:first-child,
.QueryContainer__table td:first-child {
  border-left: 1px solid var(--ui-table-color-border);
}

.QueryContainer__table thead {
  background-color: var(--ui-table-color-header);
}

.QueryContainer__table thead td {
  font-size: 1em;
  text-align: left;
  border-top: 1px solid var(--ui-table-color-border);
  background-color: var(--ui-table-color-header);
}

.QueryContainer__table tbody {
  background-color: var(--ui-table-color-cell);
}

.QueryContainer__table tbody td {
  padding: 2px 8px;
  vertical-align: top;
}

.QueryContainer.--fullscreen {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  overflow: auto;

  background-color: var(--ui-color-background);
}

.QueryContainer thead {
  position: sticky;
  top: 0;
  z-index: 3;
}

.QueryContainer__toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  padding: 4px;
  justify-content: space-between;
}

.QueryContainer__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px;
  justify-content: space-between;
}

.QueryContainer__toolbar input[type=search] {
  flex: 1;
  min-width: 0;
}

.QueryContainer__toolbarButton {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;

  border-radius: 4px;
  user-select: none;
  cursor: pointer;

  font-size: 0.9rem;
}

.QueryContainer__toolbarButton:hover {
  background-color: var(--ui-color-hover);
}

.QueryContainer__paginator {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}

.QueryContainer__paginator>span {
  font-weight: bold;
  padding: 2px 6px;
  font-size: 0.9em;
  user-select: none;
}

.QueryContainer__paginator button {
  background-color: transparent;
  color: inherit;
}

.QueryContainer__paginator button:hover {
  background-color: var(--ui-color-hover);
}

.QueryContainer__paginator button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Loading bar */
.QueryContainer.--loading .QueryContainer__body {
  position: relative;
}

.QueryContainer.--loading .QueryContainer__body::after {
  content: '';
  border: 2px solid var(--ui-color-primary);
  border-radius: 2px;
  display: block;

  position: absolute;
  top: 0;
  z-index: 9;

  animation: borealisBar 2s linear infinite;
}

@keyframes borealisBar {
  0% {
    left: 0%;
    right: 100%;
    width: 0%;
  }

  20% {
    left: 0%;
    right: 75%;
    width: 40%;
  }

  85% {
    right: 0%;
    left: 75%;
    width: 20%;
  }

  100% {
    left: 100%;
    right: 0%;
    width: 0%;
  }
}

/* Table header cells */
.TableHeader {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  min-height: 30px;

  user-select: none;
}

.TableHeader__text {
  flex: 1;
  height: 100%;

  text-align: left;
  padding: 4px 8px;
  font-size: 0.9em;
}

.TableHeader__button {
  cursor: pointer;
  width: 30px;
  height: 30px;
  margin-left: auto;
}

.TableHeader__button:hover {
  background-color: var(--ui-color-hover);
}

.TableHeader__action {
  --ui-item-padding: 6px 8px;
  font-size: 0.9em;
  cursor: pointer;
  user-select: none;
}

.TableHeader__action:hover {
  background-color: #ffffff38;
}


.QueryContainer__table th.--sortable .TableHeader {
  cursor: pointer;
  white-space: nowrap;
}

.QueryContainer__table th.--sortable:hover {
  background-color: var(--ui-color-hover);
}

/* .QueryContainer__table th.--sortable.--sorting {
  background-color: #ff8;
} */

.QueryContainer__table th.--sortable.--sorting .TableHeader::before {
  /* content: '🠙'; */
  content: '▴';
  color: var(--ui-color-primary);
}

.QueryContainer__table th.--sortable.--sorting.--desc .TableHeader::before {
  /* content: '🠛'; */
  content: '▾';
}

.QueryContainer .StmtOp__face {
  background-color: #fff;
}


.QueryContainer__popupActions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #fff;
  padding: 4px;
}

.QueryContainer__popupActions a {
  display: block;
  color: inherit;
}

.QueryContainer__popupActions .UiItem {
  --ui-item-padding: 8px;
  cursor: pointer;
  font-size: 0.8rem;
  border-radius: 4px;
}

.QueryContainer__popupActions .UiItem:hover {
  background-color: #ffffff55;
}

.QueryContainer__popupActions .--danger {
  margin-top: 1em;
}
.QueryContainer__popupActions .--danger:hover {
  background-color: var(--ui-color-danger);
}

/* QueryColumnManager */
.QueryColumnManager {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  margin-bottom: 3em;
}

.QueryColumnManager__visible,
.QueryColumnManager__hidden {
  flex: 1;
}

.UiButtonWithIcon {
    padding-left: 27px !important;
    background-position: 7px 50%;
}

.simple-modal {
  overflow: auto;
  bottom: 10px;
}