:root {
  --bs-01: 0px 1px 1px 0px hsla(0, 0%, 0%, 0.14),
    0px 2px 1px -1px hsla(0, 0%, 0%, 0.12), 0px 1px 3px 0px hsla(0, 0%, 0%, 0.2);
  --bs-02: 0px 2px 2px 0px hsla(0, 0%, 0%, 0.14),
    0px 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0px 1px 5px 0px hsla(0, 0%, 0%, 0.2);
  --bs-03: 0px 3px 4px 0px hsla(0, 0%, 0%, 0.14),
    0px 3px 3px -2px hsla(0, 0%, 0%, 0.12), 0px 1px 8px 0px hsla(0, 0%, 0%, 0.2);
  --bs-04: 0px 4px 5px 0px hsla(0, 0%, 0%, 0.14),
    0px 1px 10px 0px hsla(0, 0%, 0%, 0.12),
    0px 2px 4px -1px hsla(0, 0%, 0%, 0.2);
  --bs-06: 0px 6px 10px 0px hsla(0, 0%, 0%, 0.14),
    0px 1px 18px 0px hsla(0, 0%, 0%, 0.12),
    0px 3px 5px -1px hsla(0, 0%, 0%, 0.2);
  --bs-08: 0px 8px 10px 1px hsla(0, 0%, 0%, 0.14),
    0px 3px 14px 2px hsla(0, 0%, 0%, 0.12),
    0px 5px 5px -3px hsla(0, 0%, 0%, 0.2);
  --bs-12: 0px 12px 17px 2px hsla(0, 0%, 0%, 0.14),
    0px 5px 22px 4px hsla(0, 0%, 0%, 0.12),
    0px 7px 8px -4px hsla(0, 0%, 0%, 0.2);
  --bs-16: 0px 16px 24px 2px hsla(0, 0%, 0%, 0.14),
    0px 6px 30px 5px hsla(0, 0%, 0%, 0.12),
    0px 8px 10px -5px hsla(0, 0%, 0%, 0.2);
  --bs-24: 0px 24px 38px 3px hsla(0, 0%, 0%, 0.14),
    0px 9px 46px 8px hsla(0, 0%, 0%, 0.12),
    0px 11px 15px -7px hsla(0, 0%, 0%, 0.2);

  --primary-color-1: #caf0f8;
  --primary-color-2: #ade8f4;
  --primary-color-3: #90e0ef;
  --primary-color-4: #48cae4;
  --primary-color-5: #00b4d8;
  --primary-color-6: #0096c7;
  --primary-color-7: #0077b6;
  --primary-color-8: #023e8a;
  --primary-color-9: #03045e;
  --secondary-color-1: #fbf7b9;
  --secondary-color-2: #f3e495;
  --secondary-color-3: #f2dd7e;
  --secondary-color-4: #f0d767;
  --secondary-color-5: #eed04f;
  --secondary-color-6: #ecca38;
  --secondary-color-7: #ebc321;
  --secondary-color-8: #e9bd0a;
  --secondary-color-9: #c29c08;
  --grey-color-1: #fafafa;
  --grey-color-2: #f5f5f5;
  --grey-color-3: #eeeeee;
  --grey-color-4: #e0e0e0;
  --grey-color-5: #bdbdbd;
  --grey-color-6: #757575;
  --grey-color-7: #616161;
  --grey-color-8: #424242;
  --grey-color-9: #212121;
  --green-color: #05af3d;
  --yellow-color: #f0ad4e;
  --red-color: #ff5555;
  --input-color: #051923;
  --label-color: var(--grey-color-6);
  --focus-color: var(--primary-color-2);
  --main-color: var(--primary-color-5);
  --focus-outline: 3px solid var(--focus-color);
  --input-background: white;

  --input-border-invalid: 1px solid var(--red-color);

  --header-background: var(--grey-color-3);
  --main-background: var(--grey-color-3);
  --sidebar-background: var(--grey-color-6);
  --navbar-background: var(--grey-color-7);
  --card-barckground: var(--grey-color-4);

  --input-font: 400 1em Montserrat;
  --label-font: 500 1em Montserrat;

  --label-size: 0.75rem;

  --input-height: 50px;
  --navbar-size: 50px;
  --sidebar-size: 200px;
  --icon-size: 24px;

  --border-radius: 0.25rem;
  --border-radius-button: 0.75rem;

  --border: 1px solid #e0e0e0;

  --input-disabled-background: var(--grey-color-3);

  --footer-padding: 0 1rem;
  --input-padding-top: 1.25rem;
  --input-padding-right: 0.5rem;
  --input-padding-bottom: 0.25rem;
  --input-padding-left: 0.5rem;
  --input-padding: var(--input-padding-top) var(--input-padding-right)
    var(--input-padding-bottom) var(--input-padding-left);

  --main-transition: 0.25s;

  --input-z-index: 0;
  --label-z-index: 0;
  --input-autocomplete-z-index: 3;
  --header-z-index: 6;
  --sidebar-z-index: 7;
  --footer-z-index: 8;
  --modal-z-index: 9;
  --toast-z-index: 10;

  --dashboard-card-width: 20rem;
  --dashboard-card-border-radius: 0.5rem;

  --tile-size: 6rem;

  --xs-size: 0.25rem;
  --s-size: 0.5rem;
  --m-size: 1rem;
  --l-size: 3rem;

  --xs-font-size: 0.75rem;
  --s-font-size: 0.875rem;
  --m-font-size: 1rem;
  --l-font-size: 1.125rem;
  --xl-font-size: 1.25rem;
}

@font-face {
  font-family: "Montserrat";
  /* Asegúrate de que la ruta sea correcta */
  src: url("../fonts/Montserrat-VariableFont_wght.ttf")
    format("truetype-variations");
  font-weight: 100 900; /* ESTO ES CLAVE: Define el rango de pesos */
  font-style: normal;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: var(--input-color);
  cursor: pointer;
}

body {
  font-family: "Montserrat", sans-serif;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Montserrat";
  padding: var(--s-size);
  font-size: var(--m-font-size);

  &:focus {
    outline: none;
  }

  &:disabled {
    cursor: default;
    background-color: var(--input-disabled-background);
    /* pointer-events: none; ¿es algo estético o funcional? */
  }
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  text-wrap: balance;
}

h4 {
  font-weight: 600;
}

input {
  /* No sobrecargar para poder hacer que, por ejemplo un button, parezca un input */
  border: none;
  color: var(--input-color);
  font: var(--input-font);
  min-height: var(--input-height);

  &:focus {
    outline: var(--focus-outline);
  }

  &:disabled {
    background-color: var(--input-disabled-background);
  }
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

label {
}

select {
  background-color: var(--input-background);
  border: none;
  border-radius: var(--border-radius);
  outline: none;
  cursor: pointer;
  color: var(--input-color);
  min-height: var(--input-height);
  padding: 0.3rem;
  font-family: var(--input-font);

  &:focus {
    outline: var(--focus-outline);
  }
  &:disabled {
    cursor: default;
    opacity: 1;
    background-color: var(--input-disabled-background);
  }
}

textarea {
  border-radius: var(--border-radius-input);
  border: none;
  font-family: var(--font-input);

  &:focus {
    outline: var(--focus-outline);
  }
  &:disabled {
    background-color: var(--input-disabled-background);
  }
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

details {
  display: flex;
  flex-direction: column;
}

details summary {
  cursor: pointer;
  transition: margin 150ms ease-out;
  min-height: var(--input-height);
  line-height: 3.1rem;
  color: var(--input-color);
}

details[open] summary {
  margin-bottom: 10px;
}

select-all {
  width: var(--input-height);
  cursor: pointer;
}

sign-user {
  cursor: pointer;
}

/* region Layout */

.body {
  display: grid;
  grid-template-areas: "nav content";
  grid-template-rows: none;
  grid-template-columns: var(--sidebar-size) 1fr;
}

.main {
  grid-area: content;
  height: 100dvh;
  overflow: hidden;
  background: var(--main-background);
  display: flex;
  flex-direction: column;
}

#id_sidebar_toggle {
  display: none;
}
#id_sidebar_toggle:checked + .sidebar {
  transform: translateX(0);
}

#id_sidebar_toggle:checked ~ .navbar .bar1 {
  transform: translate(0, 7px) rotate(-45deg);
}
#id_sidebar_toggle:checked ~ .navbar .bar2 {
  opacity: 0;
}
#id_sidebar_toggle:checked ~ .navbar .bar3 {
  transform: translate(0, -7px) rotate(45deg);
}

.sidebar {
  grid-area: nav;
  background-color: var(--sidebar-background);
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  padding: var(--m-size);
  position: sticky;
  top: 0;
  transition: transform var(--main-transition) ease-in-out;
  width: var(--sidebar-size);
  z-index: var(--sidebar-z-index);

  & header a {
    color: var(--grey-color-4);

    &:hover {
      text-decoration: underline;
    }
  }

  & ul li {
    position: relative;
    & a {
      position: relative;
      color: var(--grey-color-2);
    }
    & .collapsible {
      & label {
        cursor: pointer;
      }

      & label::after {
        position: absolute;
        color: var(--grey-color-2);
        content: "\276F";
        width: 1em;
        height: 1em;
        text-align: center;
        transform: rotate(90deg);
        transition: all 0.35s;
        right: 0rem;
        top: 0;
      }

      & input:checked + .collapsible__label::after {
        transform: rotate(270deg);
        right: 0.45rem;
      }

      & input:checked ~ .collapsible__content {
        max-height: 10rem;
        padding-top: 1rem;
      }

      & .collapsible__content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-height: 0;
        overflow: hidden;
        transition: all 0.35s;
        padding-left: 1rem;
      }
    }
  }

  & footer {
    margin-top: auto;

    & a {
      height: 2rem;
      color: white;
      position: relative;
    }
  }
}

.navbar {
  background-color: var(--navbar-background);
  position: sticky;
  bottom: 0;
  grid-area: footer;
  max-height: var(--sidebar-size);
  padding: var(--footer-padding);
  z-index: var(--footer-z-index);

  & .navbar__option {
    & .navbar__text {
      font-size: var(--s-font-size);
      text-align: center;
      width: 100%;
      color: var(--grey-color-4);
    }
  }

  & .navbar__hamburguer {
    margin: auto;

    & .bar1,
    .bar2,
    .bar3 {
      width: 25px;
      height: 2px;
      background-color: var(--grey-color-1);
      margin: 5px 0;
      transition: 0.4s;
      border-radius: 1rem;
    }
  }
}

.main-body {
  /* display: grid; */
  /* justify-items: center;*/
  flex: 1;
  display: flex;
  /*padding: 0 var(--s-size) var(--s-size) var(--s-size);*/
  padding: var(--s-size);
  height: calc(100dvh - var(--navbar-size));
  overflow: auto;
}

@scope (.main-header) {
  display: grid;
  grid-template-columns: 3rem auto 3rem;
  grid-template-areas: "back content option";
  justify-items: center;
  align-items: center;
  height: var(--navbar-size);
  position: sticky;
  top: 0;
  background-color: var(--header-background);
  z-index: var(--header-z-index);

  h1 {
    font-size: min(var(--xl-font-size), 5vw);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 500;
    display: block;
    grid-area: content;
    width: 100%;
    text-align: center;
  }

  .back-button {
    grid-area: back;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
  }
}

@media (min-width: 769px) {
  .navbar {
    display: none !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .body {
    grid-template-areas:
      "content"
      "footer";
    grid-template-rows: 1fr var(--input-height);
    grid-template-columns: none;
  }

  .main {
    height: 100vh;
    height: 100dvh;
    max-height: calc(100vh - var(--input-height));
    max-height: calc(100dvh - var(--input-height));
    overflow: auto;
  }

  .sidebar {
    height: calc(-webkit-fill-available - var(--navbar-size));
    height: calc(100vh - var(--navbar-size));
    height: calc(100dvh - var(--navbar-size));
    position: fixed;
    width: 100%;
    transform: translateX(-110%);
  }

  .main-body {
    height: calc(100dvh - var(--navbar-size) - var(--navbar-size));
  }
}

/* endregion Layout */

/* region Card */

@scope (.card) {
  background-color: var(--card-barckground);
  border-radius: var(--border-radius);
  max-width: 30rem;
  min-height: 0;
  max-height: 100%;
  padding: var(--s-size);
  position: relative;
  width: min(90vw, 100%);
  width: 90vw;
  scroll-snap-align: center;
  overflow-y: auto;

  &.card--overflow {
    max-height: calc(100vh - var(--input-height) -1px - 3rem);
    overflow-y: auto;

    & save-button {
      bottom: 0 !important;
    }

    @media (max-width: 768px) {
      max-height: calc(
        100vh - var(--input-height) - 1px - var(--navbar-size) - 3rem
      );
    }
  }

  &.card--xl {
    max-width: 80rem;
    width: 100%;
  }

  & .title {
    font-size: var(--m-font-size);
    line-height: 2.4rem;
    padding-left: var(--s-size);
    font-weight: 500;
  }

  & .totals {
    padding-left: var(--s-size);
  }

  & dynamic-list-filter {
    position: relative;
    & [data-selector="filter_search"] {
      & input {
        width: 100%;
        position: relative;
        padding: var(--m-size);
        border-radius: var(--l-size);
      }

      & button {
        position: absolute;
        height: var(--input-height);
        width: var(--input-height);
        right: var(--xs-size);
        top: var(--xs-size);
        color: var(--grey-color-5);

        &.active {
          color: var(--main-color);
        }
      }
    }

    & *[data-selector="filter-menu"] {
      width: 90vw;
      max-width: 30rem;
      padding: var(--s-size);
    }
  }

  & .list {
    background-color: var(--input-background);
    border-radius: var(--border-radius);
    width: 100%;
    padding: var(--s-size);

    &:not(:has(button)) {
      background-color: var(--card-barckground);
    }

    & > li,
    & > .list-item {
      & > button {
        border-radius: var(--border-radius);
        min-height: var(--input-height);
        transition: background-color var(--main-transition);
        width: 100%;
        text-align: left;

        &:focus,
        &:hover {
          background-color: var(--focus-color);
        }

        &.selected {
          outline-offset: -4px;
          outline: 2px solid var(--main-color);

          &:focus,
          &:hover {
            outline: 2px solid var(--main-color);
          }
        }
      }
    }
  }

  & .nav {
    background-color: var(--card-barckground);
    position: sticky;
    display: flex;
    justify-content: flex-end;
    padding: var(--s-size) 0;
    gap: var(--m-size);
    bottom: -0.52rem;
    align-items: center;
    margin-top: 3px; /* Para que no tape el borde de los inputs */

    & .select_mode_checkbox {
      & + div {
        overflow: hidden;
        max-height: 0;
        transition: max-height var(--main-transition) ease-in-out;
      }

      & ~ label {
        cursor: pointer;
        width: var(--input-height);

        & > svg {
          stroke: var(--grey-color-6);
        }
      }
    }

    & .select_mode_checkbox:checked {
      & + div {
        max-height: 200px; /* Ajusta según el contenido real */
      }

      & ~ label > svg {
        stroke: var(--main-color);
      }
    }

    & .actions {
      display: flex;
      gap: var(--s-size);

      & > * {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: var(--input-height);
      }
    }

    & .history-button {
      margin-right: auto;
      cursor: pointer;
      display: flex;
      align-items: center;
      height: var(--input-height);
      width: var(--input-height);
      transition: all var(--main-transition);

      & svg {
        stroke: var(--grey-color-6);
      }
    }
  }

  & select-all > button {
    padding: 0;
  }
}

/* endregion Card */

/* region Button */

.button {
  color: white;
  background-color: var(--main-color);
  border-radius: var(--border-radius);
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  /*display: block;*/
  display: flex;
  font-size: var(--l-font-size);
  line-height: 2rem;
  min-height: var(--input-height);
  min-width: 50px;
  width: fit-content;
  padding: var(--s-size) var(--m-size);
  text-align: center;
  transition: var(--main-transition);
  text-decoration: none;
  font-family: "Montserrat", sans-serif;

  &:focus {
    box-shadow: var(--bs-04);
    outline: none;
  }

  &:hover {
    box-shadow: var(--bs-04);
  }
}

.delete-button {
  color: var(--red-color);
  font-weight: 500;

  &:focus,
  &:hover {
    text-decoration: underline;
  }
}

.underline-button {
  color: var(--main-color);

  &:focus,
  &:hover {
    text-decoration: underline;
  }
}

/* endregion Button */

/* region Link */

.link {
  transition: var(--main-transition);
  border-bottom: 1px solid transparent;

  &:focus,
  &:hover {
    border-bottom: 1px solid currentColor;
  }

  &.active {
    font-weight: 500;
    border-bottom: 1px solid currentColor;
  }
}

/* endregion Link */

/* #region History */

@scope (.histories) {
  color: var(--input-color);
  padding: var(--s-size);
  width: 90vw;
  max-width: 30rem;

  & .history {
    border: 1px solid var(--grey-color-4);
    background-color: var(--grey-color-3);
    padding: var(--s-size);
    border-radius: var(--border-radius);

    & .history__user {
      font-weight: 600;
    }

    & .history__date {
      font-size: var(--s-font-size);
      color: var(--grey-color-6);
    }

    & .history-change__old {
      background: #fee2e2;
      color: #991b1b;
    }

    & .history-change__new {
      background: #dcfce7;
      color: #166534;
      font-weight: 500;
    }
  }
}

/* #region Inputs */

@scope (.input, input-text, input-color, input-time, input-date, input-password, select-single, input-number, text-area, input-autocomplete, input-datetime-quarter, input-datetime-local, select-single, input-signature, input-image) {
  :scope {
    position: relative;
    display: flex;
    /*flex: 1;*/
    min-height: var(--input-height);
  }

  input,
  textarea,
  select {
    flex: 1;
    padding: var(--input-padding);
    color: var(--input-color);
    border-radius: var(--border-radius);
    width: 100%;
    font-size: var(--m-font-size);
  }

  input:read-only:not([type="color"]):not([type="file"]):not([type="range"]) {
    background-color: var(--input-disabled-background);
    cursor: default;
  }

  label {
    position: absolute;
    top: var(--xs-size);
    left: var(--s-size);
    font-size: var(--label-size);
    color: var(--label-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - calc(var(--s-size) * 2));
    text-align: left;

    & .required {
      color: var(--red-color);
    }
  }
}

@scope (input-date) {
  input[type="date"] {
    min-width: 150px;
  }

  input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 120px;
  }
}

@scope (select-single) {
  select {
    padding-left: var(--xs-size);
  }
}

@scope (input-color) {
  input {
    background-color: var(--input-background);
  }
}

@scope (input-checkbox) {
  label {
    display: flex;
    position: relative;
    cursor: pointer;
    color: var(--label-color);
    gap: 0.25rem;
    align-items: center;
    font-size: var(--label-size);
    flex-direction: column;
    border-radius: var(--border-radius);
    align-items: baseline;
    transition: background 0.2s;
    padding-left: var(--s-size);

    &:hover .switch:before {
      background: linear-gradient(to bottom, #fff 0%, var(--grey-color-4) 100%);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    }
  }

  .switch {
    display: inline-block;
    background: white;
    border-radius: 16px;
    width: 58px;
    height: 32px;
    position: relative;
    vertical-align: middle;
    transition: all 0.25s;

    &:before,
    &:after {
      content: "";
    }

    &:before {
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to bottom, #fff 0%, var(--grey-color-3) 100%);
      border-radius: 50%;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
      width: 24px;
      height: 24px;
      position: absolute;
      top: 4px;
      left: 4px;
      transition: all 0.25s;
    }
  }

  input {
    position: absolute;
    visibility: hidden;
    display: grid;
    width: auto;

    &:checked + .switch {
      background: var(--primary-color-7);
    }

    &:checked + .switch:before {
      left: 30px;
    }
  }
}

@scope (input-autocomplete) {
  .field-button {
    display: flex;
    flex-wrap: wrap;
    gap: var(--xs-size);
    padding: var(--input-padding);
    background-color: var(--input-background);
    border-radius: var(--border-radius);
    flex: 1;

    &:focus {
      outline: var(--focus-outline);
    }

    &:has(input:invalid) {
      border: var(--input-border-invalid);
    }
  }

  .all-option {
    color: var(--grey-color-6);
  }

  .field-button--multiple {
    padding-bottom: var(--input-height);
  }

  input {
    padding: var(--s-size);
  }

  .input {
    & label {
      width: calc(100% - calc(var(--s-size) * 2) - 1rem); /* Hueco botón 'x' */
    }
  }

  [data-selector="search_wrapper"] {
    display: flex;
    flex-direction: column;
    padding: var(--s-size);
    gap: var(--s-size);
    position: absolute;
    max-height: 28rem;
    height: fit-content;
    width: 100%;
    top: 100%;
    box-shadow: 0 5px 5px 0 var(--grey-color-5);
    border-top: 1px solid var(--grey-color-4);
    z-index: var(--input-autocomplete-z-index);
  }

  .list {
    padding: var(--s-size);
    max-height: calc(
      28rem - var(--s-size) * 4
    ); /* Ajusta según el padding y gap del contenedor */
    overflow-y: auto;
    overflow-x: hidden;

    flex: 1; /* Permite que la lista crezca para ocupar el espacio disponible */

    & > li {
      display: flex;
      min-height: var(--input-height);
      color: var(--input-color);
      align-items: center;
    }

    &:has(.option) {
      background-color: var(--input-background);
    }
  }

  .new {
    width: var(--input-height);
    display: flex;
    color: var(--primary-color-6);
    height: var(--input-height);
    justify-content: center;
    align-items: center;
    margin-right: 0.25rem;
  }

  .edit {
    width: var(--input-height);
    transition: var(--main-transition);

    &:hover {
      color: var(--primary-color-7);
    }
  }

  [data-action="clear"] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 0 2rem 2rem;

    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 11px;
      right: calc(var(--xs-size) + 1px);
      width: 13px;
      height: 1px;
      background-color: var(--grey-color-7);
    }

    &::before {
      transform: rotate(45deg);
    }

    &::after {
      transform: rotate(-45deg);
    }
  }

  .multiple-option {
    border-bottom: var(--input-border-bottom);
    cursor: pointer;
    background-color: var(--grey-color-3);
    border-radius: var(--border-radius);
    /*max-width: 6rem;*/
    width: fit-content;
    /*white-space: nowrap; A veces no cabe el contenido */
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all var(--main-transition);
    padding: 0.5rem;

    &:hover {
      box-shadow: var(--bs-02);
    }
  }

  .arrow {
    border: solid var(--grey-color-6);
    border-width: 0 1px 1px 0;
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    display: inline-block;
    padding: 3px;
    transition: transform 0.2s ease-in-out;
    pointer-events: none;
  }

  .right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

  .left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
  }

  .up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
  }

  .down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
}

@scope (input-password ) {
  button {
    position: absolute;
    right: 0;
    height: 100%;
    min-width: 50px;
    padding: 0.7rem;
    width: 50px;
  }
}

@scope (input-datetime-quarter) {
  label {
    cursor: pointer;
  }

  button {
    border-radius: var(--border-radius);
    transition: var(--main-transition);
    background-color: var(--input-background);
    width: var(--input-height);
    height: var(--input-height);

    &:focus {
      box-shadow: var(--bs-04);
    }

    &:hover {
      box-shadow: var(--bs-04);
    }
  }
}

@scope (input-signature) {
  dialog {
    background-color: var(--card-barckground);
  }
  canvas {
    border-radius: var(--border-radius);
    cursor: crosshair;
    background-color: var(--input-background);
    width: 100%;
    height: 100%;
  }
  [data-selector="field-button"] {
    border-bottom: var(--input-border-bottom);
    border-radius: var(--border-radius);
    cursor: pointer;
    display: flex;
    background-color: var(--input-background);
    width: 100%;
    height: 150px;
  }
  img {
    margin-left: auto;
    margin-top: var(--input-padding-top);
    object-fit: contain;
    width: 100%;
    max-width: 300px;
    height: calc(100% - var(--input-padding-top));
  }
}

@scope (count-bubble) {
  :scope {
    position: absolute;
    background: var(--red-color);
    color: var(--white-color);
    border-radius: 100%;
    font-size: 0.5rem;
    top: 0;
    right: 0;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

[data-formset-action] {
  border-radius: var(--border-radius);
  transition: var(--main-transition);
  color: white;
  background-color: var(--grey-color-6);
  width: var(--input-height);
  height: var(--input-height);

  &:hover {
    box-shadow: var(--bs-04);
  }
}

@scope (input-project-line) {
  .prices {
    font-size: var(--xs-font-size);
    display: flex;
    justify-content: space-between;

    & > * {
      flex: 2;
      text-align: right;
    }

    & .per,
    .minuts,
    .equal {
      flex: 1;
      text-align: center;
      color: var(--grey-color-5);
    }
  }
  .free_reference {
    color: var(--grey-color-6);
    font-style: italic;
    font-size: var(--s-font-size);
  }
}

@scope (input-image) {
  :scope {
    min-width: 100px;
    display: flex;
    flex-direction: column;
    background-color: var(--input-background);
  }
  button {
    height: var(--input-height);
    padding: var(--s-size);

    & > svg > g > path {
      stroke: var(--grey-color-7);
    }

    & > svg > path {
      fill: var(--grey-color-7);
    }
  }
  input[type="file"]::file-selector-button {
    border: 2px solid var(--grey-color-3);
    padding: 0.2em 0.4em;
    border-radius: 0.2em;
    background-color: var(--grey-color-2);
    transition: 1s;
    font-family: "Montserrat", sans-serif;
    cursor: pointer;
  }
  .preview {
    margin: auto;
    padding: var(--input-padding);
    max-height: 12rem;
    max-inline-size: 100%;
    block-size: auto;
    object-fit: contain;
    cursor: pointer;
  }
  .dialog {
    max-inline-size: 100%;
    block-size: auto;
    object-fit: contain;
  }
}

.input-prefix {
  position: relative;
  & > .prefix {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    padding: var(--input-padding);
    color: var(--grey-color-5);
    height: 100%;
    z-index: calc(var(--input-z-index) + 1);
  }
}

.input-prefix .prefix + * > input,
.input-prefix .prefix + * > select {
  padding-left: 2rem;
}
/* endregion Inputs */

.grid-columns {
  display: grid;
  grid-auto-flow: column;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-equal {
  & > * {
    flex: 1;
  }
}

.justify-center-safe {
  justify-content: safe center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

.items-center {
  align-items: center;
}

.gap-xs {
  gap: var(--xs-size);
}
.gap-s {
  gap: var(--s-size);
}
.gap-m {
  gap: var(--m-size);
}
.gap-l {
  gap: var(--l-size);
}

.column-gap-xs {
  column-gap: var(--xs-size);
}
.column-gap-s {
  column-gap: var(--s-size);
}
.column-gap-m {
  column-gap: var(--m-size);
}
.column-gap-l {
  column-gap: var(--l-size);
}

.padding-s {
  padding: var(--s-size);
}
.padding-m {
  padding: var(--m-size);
}
.padding-l {
  padding: var(--l-size);
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.tile {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--input-background);
  transition: all var(--main-transition);
  border-radius: var(--border-radius);
  overflow: hidden;

  /* Only apply hover effect when not disabled (by class or attribute) */
  &:not(.disabled):not([disabled]):hover {
    box-shadow: var(--bs-04);
  }
}

.tile-1x1 {
  width: calc(var(--tile-size));
  height: calc(var(--tile-size));
  padding: var(--m-size) var(--s-size) var(--s-size) var(--s-size);
  justify-content: space-between;
  align-items: center;
  gap: var(--s-size);
  text-align: center;
}

.tile-2x1 {
  width: calc(var(--tile-size) * 2);
  height: calc(var(--tile-size));
  padding: var(--m-size);
}

.tile-2x2 {
  width: calc(var(--tile-size) * 2);
  height: calc(var(--tile-size) * 2);
  padding: var(--m-size);
}

.tile-3x3 {
  width: calc(var(--tile-size) * 3);
  height: calc(var(--tile-size) * 3);
  padding: var(--l-size);
}

.tile-4x4 {
  width: calc(var(--tile-size) * 4);
  height: calc(var(--tile-size) * 4);
  padding: var(--l-size);
}

.text-center {
  text-align: center;
}

.text-xs {
  font-size: var(--xs-font-size);
}

.text-s {
  font-size: var(--s-font-size);
}

.text-green {
  color: var(--green-color);
}

.text-red {
  color: var(--red-color);
}

.line-through {
  text-decoration: line-through;
}

.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden !important;
}

.input-invalid {
  background-color: #ffe9e9;
}

.flip-horizontal {
  transform: scaleX(-1);
}

.pointer-events-none {
  pointer-events: none;
}

.monospace {
  font-feature-settings: "tnum";
}

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.obsolete {
  opacity: 0.25;
}