@import './design-system/variables/aurea.css';
@import './design-system/forms.css';
@import './design-system/query-container.css';
@import './design-system/dashboard.css';

.pwa-container {
  --ui-base-padding: 8px;
  --ui-base-gap: 8px;
  --ui-base-border-radius: 8px;
  --ui-color-bg-info: #F3F8FB;
  --ui-spacing-lg: 24px;
}

body {
  font-weight: 400;
  color: var(--ui-color-foreground);
  font-size: var(--ui-font-size-body);
  font-family: var(--phidias-font-secondary);
  background-color: var(--ui-color-background);
}

h1 {
  font-size: var(--ui-font-size-h1);
  font-weight: 500 !important;
}

h2 {
  font-size: var(--ui-font-size-h2);
}

h3 {
  font-size: var(--ui-font-size-h3);
}

h4 {
  font-size: var(--ui-font-size-h4);
}

small {
  font-size: var(--ui-font-size-small);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 500;
  color: var(--ui-color-z4);
  font-family: var(--phidias-font-family);
}

legend,
label,
span.label,
.MenuItem,
#phidias_toolbar .UiItem__text {
  font-family: var(--phidias-font-family);
}

/* 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;
}

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

/* Dialog (dialog-polyfill) */
dialog {
  top: 0 !important; /* Corrige posicion en dialogos de dialog-polyfill */
}
dialog + .backdrop { /* Estilos de background de dialog-polyfill */
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}

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


/* Notice global */
.ux-notice {
  position: fixed;
  bottom: 1%;
  width: 900px;
  left: 0;
  right: 0;
  margin: auto;
}

.ux-notice .UiAlert {
  max-width: 100% !important;
}

@media screen and (max-width: 1048px) {
  .ux-notice {
    width: 90%;
  }
}

@media screen and (max-width: 599px) {
  .UiDialog__dialog {
    width: unset;
    margin-left: 7px;
    margin-right: 7px;
  }

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

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