/*START::GLOBAL STYLES*/
:root {
  --bg-color: #F6FAFF;
  --text-color-body: #5E6E82;
  --text-blue-intro: #1F1E41;
  --border: #D8E2EF;
  --bg-button: #F6FAFF;
  --bg-button-hover: #dbeafc;
  --border-width: 1.5px;
  --altura-comp-nav: 35px;
  --bg-nav-darkMode: #2b3035;
  --color-checkbox: #40638E;
  --border-color-checkbox: #ADB5BD;
  --border-color-green: #98D19A;
  --color-green: #347D16;
  --background-green: #ECFFF3;
  --bg-grid-card: #fff;
  --bg-label-product: #74C686;
  --bg-label-country: #FFC107;
  --bg-label-language: #E97B86;
  --bg-label-category: #58AAFF;
  --bg-label-indication: #67C3D0;
  --border-radius-img: 9px;
  --bg-filtro: color-mix(in srgb, var(--bg-color), 3% black);

}

body {
  background-color: #F6FAFF;
}

body.loading {
  cursor: wait;
}

a[disabled], .disabled {
  pointer-events: none;
  opacity: 0.4;
  cursor: default;
}

.text-body-ap {
  color: var(--text-color-body);
}

.text-body-blue-intro {
  color: var(--text-blue-intro);
}

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

/* #home-folders{
  background-color: var(--bg-grid-card);
  margin-top: 25px;
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.03);
} */

/* Buttons */
.btn {
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
  border-width: var(--border-width);
  border-style: solid;
  height: var(--altura-comp-nav);
  display: flex;
  align-items: center;

  i.bi {
    font-size: 1rem;
    padding-right: 7px;
  }

  &.active {
    color: var(--text-color-body);
    border-color: var(--text-color-body);
  }

  &.btn-ap-primary {
    border-color: var(--border);
    color: var(--text-color-body);
    background: var(--bg-button);

    &:hover {
      background-color: var(--bg-button-hover);
    }
  }

  &.btn-ap-secondary {
    border-color: var(--border);
    color: var(--text-color-body);
    background: white;

    &:hover {
      background-color: var(--bg-button-hover);
    }
  }

  &.btn-ap-green {
    border-color: var(--border-color-green);
    color: var(--color-green);
    background: var(--background-green);

    &:hover {
      background-color: #c0edbc;
      color: #24650a;
    }
  }
}

/*END::GLOBAL STYLES*/

/* START::NAV */
/* badge */

.badge {
  &.user {
    /* background: var(--bg-button); */
    color: var(--text-color-body);
    font-size: 13px;
    font-weight: 600;
    padding: 8px;
    height: var(--altura-comp-nav);

    i.bi {
      font-size: 1.3rem;
      padding-right: 7px;
      color: #04BEDB;
    }
  }
}

/* Buscador */
nav form {
  width: 25%;
}

.search-container {
  position: relative;
  display: inline-block;
  width: -webkit-fill-available;

  svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color-body);
    z-index: 6;
  }

  .custom-search {
    padding-left: 35px;
    /* Espacio para el icono */
    border: 1.5px solid var(--border);
    color: var(--text-color-body);
    height: var(--altura-comp-nav);

    &::placeholder {
      color: #ADB5BD;
      opacity: 1;
    }
  }

  .custom-ctrlk {
    color: #889BB2;
    background: #EEF3F9;
    border: 1.5px solid var(--border);
    border-radius: 5px !important;
    /* align-content: center; */
    /* font-size: 16px; */
    /* line-height: 10px; */
    height: 20px;
    /* padding: 7px 10px; */
    font-size: 11.5px;
    font-weight: 500;
    padding-left: 3px;
    padding-right: 3px;
    position: absolute;
    right: 33px;
    top: 8px;
    line-height: 9px;
  }
}

/* Pais */
select.custom {
  border: none;
  color: var(--text-color-body);
  font-size: 0.9rem;
  font-weight: 600;
  padding-left: 8px;
  /* background-color: #ffffff00; */
  padding-block-start: 8px;
  padding-block-end: 8px;
  height: var(--altura-comp-nav);

  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%235E6E82" class="bi bi-caret-down-fill" viewBox="0 0 16 16"%3E%3Cpath d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/%3E%3C/svg%3E');

  &:hover {
    background-color: var(--bg-button-hover);
  }
}

/* logout */
a.custom-log-out {
  border-radius: 0.375rem;
  padding-top: .3rem;
  padding-bottom: .4rem;
  position: relative;
  bottom: 1px;
  height: var(--altura-comp-nav);

  &:hover {
    background: var(--bg-button-hover);
  }
}

/* END:: NAV */

/* START:: THEME COLOR SELECTOR */
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}


.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--text-color-body);
  --bs-btn-hover-color: var(--text-color-body);
  --bs-btn-hover-bg: var(--bg-button-hover);
  /* --bd-violet-bg: #712cf9;*/
  /* --bd-violet-rgb: 112.520718, 44.062154, 249.437846; */
  /* --bs-btn-bg: var(--bd-violet-bg); */
  /* --bs-btn-border-color: none; */
  /* --bs-btn-hover-border-color: #6528e0; */
  /* --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); */
  /* --bs-btn-active-color: red; */
  /* --bs-btn-active-bg: #5a23c8;*/
  /*  --bs-btn-active-border-color: #5a23c8; */
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  font-family: "bootstrap-icons";
  content: "\F229";
  width: 10px;
  font-size: 10px;
  padding-inline-start: 6px;
  border-top: 0 solid;
  border-right: 0 solid transparent;
  border-bottom: 0;
  border-left: 0 solid transparent;
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--text-color-body);
  text-decoration: none;
  background-color: var(--bg-button-hover) !important;
}

.btn.show {
  color: var(--text-color-body);
  background-color: var(--bg-button-hover);
  border-color: #ffffff00;
}

.bd-mode-toggle {
  z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important;
}

/* END::THEME COLOR SELECTOR */

/*START::FILTROS*/

#filter {
  background-color: var(--bg-filtro);
  padding: 15px 25px 20px 20px !important;
  border-radius: 10px;
  translate: 0 15px;
  border: 1px solid var(--border);

  width: 280px !important;
  height: fit-content;
  /* height: 100vh !important; */

  .dropdown-toggle {
    outline: 0;
  }

  .btn {
    font-size: 16px;
    color: var(--text-color-body);
    display: flex;
    align-items: center;

    svg {
      stroke: var(--text-color-body);
      width: 17px;
      margin-right: 6px;
    }

  }

  .btn-toggle {
    padding: .25rem .5rem;
    font-weight: 600;
  }

  .btn-toggle::after {
    width: 1em;
    line-height: 0;
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235E6E82' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
    transition: transform .35s ease;
    transform-origin: .5em 50%;
    margin-left: auto;
  }

  [data-bs-theme="dark"] .btn-toggle::after {
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  }

  .btn-toggle[aria-expanded="true"]::after {
    transform: rotate(90deg);
  }

  .btn-toggle-nav a {
    padding: .1875rem .5rem;
    margin-top: .125rem;
    margin-left: 1.25rem;
  }

  .scrollarea {
    overflow-y: auto;
  }

  .form-check {
    padding-left: 32px;

    input:checked[type=checkbox] {
      background-color: var(--color-checkbox);
      border-color: var(--color-checkbox);
    }

    .form-check-input[type=checkbox] {
      border-color: var(--border-color-checkbox);
    }

    label {
      font-size: 15px;
      color: var(--text-color-body);
    }
  }
}

/*END::FILTROS*/

/* START::ESTRUCTURA GENERAL */
article {
  a {
    text-decoration: none;
  }

  #pagination {
    ul li a.page-link {
      color: var(--text-color-body);

      &.active {
        background-color: var(--border-color-checkbox);
        border-color: var(--border-color-checkbox);
        color: var(--bg-grid-card)
      }
    }
  }

  .intro {
    color: var(--text-blue-intro);

    h1 {
      font-weight: bold;
    }

    h4 {
      width: 55%;
    }

  }

  /*Home*/
  .grid-container {
    display: grid;
    gap: 20px;
    padding: 10px;
    width: fit-content;
    margin: 0 auto;

    .grid-item {
      font-size: 16px;
      font-weight: 500;
      border-radius: 5px;
      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.03);
      min-height: 65px;
      display: flex;
      align-items: center;
      padding-left: 23px;

      :is(i, svg, .iconify) {
        padding-right: 10px;
        width: 42px;
        stroke: var(--text-color-body);
      }

      .iconify,
      svg,
      i.bi {
        display: inline-block;
        color: var(--text-color-body);
        transition: transform 0.5s ease-in-out;

        &:hover {
          transform: rotate(-7deg) scale(1.1);
        }
      }
    }

    &.home {
      grid-template-columns: repeat(3, minmax(285px, 1fr));

      .grid-item {
        background-color: var(--bg-grid-card);
        border: 1.2px solid var(--border);
        color: var(--text-color-body);
        transition: border-color 0.2s;

        &:hover {
          border-color: #c4cdd9;
        }
      }
    }

    &.single {
      grid-template-columns: repeat(1, minmax(285px, 1fr));

      .grid-item {
        background-color: var(--background-green);
        border: 1.2px solid var(--border-color-green);
        color: var(--color-green);

        &:hover {
          border-color: var(--color-green);
        }
      }
    }

  }

  /*General*/
  /* Content base */
  .grid-container-gral {
    display: grid;
    gap: 20px;
    padding: 10px;
    margin: 0 auto;

    .grid-item {
      height: 100%;
      /*per igualar l'altura de totes les cards*/
      background-color: var(--bg-grid-card);
      font-size: 14px;
      border-radius: 10px;
      border: 1.5px solid var(--border);
      color: var(--text-color-body);
      transition: all 0.2s;

      .card-img-top {
        border-top-left-radius: var(--border-radius-img);
        border-top-right-radius: var(--border-radius-img);

        height: 160px;
        width: 100%;
        object-fit: cover;
        /*corta la imagen*/
        /* object-fit: contain;  */
        /* Adapta proporcionalmente, pero sobran partes*/
      }

      &:hover {
        border-color: #c4cdd9;
        /* transform: scale(1.01); */
      }

      .card-title {
        margin-block-end: 0;
      }

      :is(a, i) {
        color: var(--text-color-body);
      }

      .base-card {
        display: flex;
        justify-content: space-between;
        align-items: end;

        i {
          display: inline-block;
          font-size: 18px;
          line-height: 10px;
          transition: transform 0.3s ease-in-out;

          &:hover {
            transform: scale(1.2);
          }

        }

        span {
          font-size: 13px;
        }
      }
    }

    &.subsection {
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

      .grid-item {
        .card-body {
          padding-block-start: 13px;
          padding-block-end: 13px;
        }
      }
    }

    &.general {
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

      .grid-item {
        .card-body {
          padding-block-start: 10px;
          padding-block-end: 5px;
          padding-inline-end: 10px;
          padding-inline-start: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

        .card-title {
          font-size: 13px;
          padding-block-end: 5px;
        }
      }
    }

    &.videos {
      grid-template-columns: repeat(auto-fill, minmax(202px, 1fr));
      gap: 15px;

      .grid-item {
        .card-body {
          padding-block-start: 10px;
          padding-block-end: 5px;
          padding-inline-end: 10px;
          padding-inline-start: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

        .card-title {
          font-size: 13px;
          padding-block-end: 5px;
        }
      }
    }

    &.search {
      gap: 10px;

      .filter-labels {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;

        .badge {
          font-weight: 500;
          padding: 5px 10px;
        }

        .bg-product {
          background-color: var(--bg-label-product);
        }

        .bg-language {
          background-color: var(--bg-label-language);
        }

        .bg-country {
          background-color: var(--bg-label-country);
        }

        .bg-category {
          background-color: var(--bg-label-category);
        }

        .bg-indication {
          background-color: var(--bg-label-indication);
        }

      }

      .grid-item {
        display: flex;
        height: 60px;

        img {
          /* height: 100%;
          width: auto; */
          height: 100%;
          width: 70px;
          object-fit: cover;
          border-top-left-radius: var(--border-radius-img);
          border-bottom-left-radius: var(--border-radius-img);
        }

        .card-body {
          padding-block-start: 5px;
          padding-block-end: 5px;
          padding-inline-end: 10px;
          padding-inline-start: 10px;

          .breadcrumb {
            margin-bottom: 3px;
            font-size: 12px;

          }

          .card-title {
            font-size: 15px;
            font-weight: 600;
          }
        }
      }
    }
  }

  .grid-container-videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(202px, 1fr));
    gap: 15px;
    padding: 10px;
    margin: 0 auto;

    .grid-item {
      background-color: lightblue;
      padding: 20px;
      text-align: center;
      font-size: 18px;
      border-radius: 5px;
    }
  }
}

/* END::ESTRUCTURA GENERAL */

/*START::NAV-OPTION*/
#nav-options {

  a {
    color: var(--text-color-body);

    &:hover {
      color: var(--text-blue-intro);
    }
  }

  .breadcrumb {
    background-color: var(--bg-grid-card);
  }

  .box-03 {
    i.bi {
      cursor: pointer;
      display: inline-block;
      transition: transform 0.3s ease-in-out;

      &:hover {
        transform: scale(1.1);
      }
    }
    span{cursor:pointer}
  }


}

/*START::NAV-OPTION*/

/* START:: LOGIN */

.form-signin {
  max-width: 430px;
  padding: 1rem;
  background-color: #F6FAFF;
  border: 1px solid #D8E2EF;
  border-radius: 10px;
  box-shadow: 0px 3px 4px #eef3f9;


  form {

    .form-floating {
      input {
        color: var(--text-color-body);
        border: 1px solid var(--border);
      }

      label {
        font-size: 16px;
        color: var(--text-color-body)
      }
    }

    .form-check {
      label {
        font-size: 16px;
        color: var(--text-color-body);
      }

      input:checked[type=checkbox] {
        background-color: var(--text-blue-intro);
        border-color: var(--text-blue-intro);
      }
    }

    .btn {

      &.btn-login {
        background-color: var(--text-blue-intro);
        border-color: var(--text-blue-intro);
        text-align: center;
        color: #fff;

        &:hover {
          background-color: #111029;
          border-color: #111029;
        }
      }
    }

    p {
      font-size: 14px;
      line-height: normal;

      a {
        text-decoration: none;
        color: var(--text-color-body);
        font-weight: 600;
      }
    }
  }
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* END:: LOGIN */

/* START:: SALES-REPORT */

#sales-report {

  i {
    vertical-align: 0;
  }

  .card {
    border: 1.5px solid var(--border);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.03);
  }

  label {
    color: var(--text-color-body);
  }

  option[selected] {
    color: var(--text-color-body)
  }


  button.add {
    background-color: #28A745;
    border-color: #28A745;
    margin-bottom: 1px;

    &:hover {
      transform: scale(1.1);
    }
  }

  table {

    h6 {
      font-size: 1.1rem
    }

    font-size: 15px;

    th {
      color: #ADB5BD;
    }

    td:first-child {
      color: var(--text-blue-intro);
      font-weight: 500;
    }

    td {
      color: var(--text-color-body);
      font-weight: 500;
      padding-block-start: 16px;
      padding-block-end: 16px;

      a.icon-link {
        color: var(--text-color-body);

        i {
          transition: transform 0.2s ease;

          &:first-child {
            padding-inline-end: 23px !important;
          }


        }

        &:hover i {
          transform: scale(1.1);
        }
      }

    }
  }
}

/* END:: SALES-REPORT */


/*START::MODE DARK/MODE ==========================================================*/
[data-bs-theme="light"] {

  .logo-dark {
    display: none
  }

  i.custom-edit {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><g fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' color='%235E6E82'><path d='m16.214 4.982l1.402-1.401a1.982 1.982 0 0 1 2.803 2.803l-1.401 1.402m-2.804-2.804l-5.234 5.234c-1.045 1.046-1.568 1.568-1.924 2.205S8.342 14.561 8 16c1.438-.342 2.942-.7 3.579-1.056s1.16-.879 2.205-1.924l5.234-5.234m-2.804-2.804l2.804 2.804'/><path d='M21 12c0 4.243 0 6.364-1.318 7.682S16.242 21 12 21s-6.364 0-7.682-1.318S3 16.242 3 12s0-6.364 1.318-7.682S7.758 3 12 3'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    top: 3.5px;
  }

  .mode-color {
    background-color: #fff;
  }

  .badge {
    &.user {
      background: var(--bg-button);
    }
  }

}

[data-bs-theme="dark"] {

  .logo-light {
    display: none
  }

  body {
    background-color: #212529;
  }

  i.custom-edit {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><g fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' color='%23bdc9d9'><path d='m16.214 4.982l1.402-1.401a1.982 1.982 0 0 1 2.803 2.803l-1.401 1.402m-2.804-2.804l-5.234 5.234c-1.045 1.046-1.568 1.568-1.924 2.205S8.342 14.561 8 16c1.438-.342 2.942-.7 3.579-1.056s1.16-.879 2.205-1.924l5.234-5.234m-2.804-2.804l2.804 2.804'/><path d='M21 12c0 4.243 0 6.364-1.318 7.682S16.242 21 12 21s-6.364 0-7.682-1.318S3 16.242 3 12s0-6.364 1.318-7.682S7.758 3 12 3'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    top: 3.5px;
  }

  .mode-color {
    background-color: var(--bg-nav-darkMode);
  }

  .form-select {
    background-color: var(--bg-nav-darkMode);
  }

  nav .breadcrumb {
    background-color: #1b1f23 !important;
  }

  --bg-button: #f6faff00;
  --border: #8d949d;
  --bg-button-hover: #ffffff;
  --text-color-body:#bdc9d9;
  --text-blue-intro: #fff;
  --bg-grid-card:#f6faff00;
  --border-color-green: #52c356;
  --color-green: #52c356;
  --background-green: #ECFFF300;
   --bg-filtro: color-mix(in srgb,transparent, 5% #ffffff);

  .btn-ap-secondary {
    background: var(--bg-button);
  }

  .search {
    .filter-labels {
      .badge {
        &.bg-product {
          background-color: #74C68600;
          border: 1px solid var(--bg-label-product);
          color: var(--bg-label-product)
        }

        &.bg-language {
          background-color: #E97B8600;
          border: 1px solid var(--bg-label-language);
          color: var(--bg-label-language);
        }

        &.bg-country {
          background-color: #FFC10700;
          border: 1px solid var(--bg-label-country);
          color: var(--bg-label-country);
        }

        &.bg-category {
          background-color: #58AAFF00;
          border: 1px solid var(--bg-label-category);
          color: var(--bg-label-category);
        }

        &.bg-indication {
          background-color: #67C3D000;
          border: 1px solid var(--bg-label-indication);
          color: var(--bg-label-indication);
        }
      }
    }
  }

  #pagination {
    ul li a.page-link {
      &.active {
        color: #212529;
      }
    }
  }
}

/*END::MODE DARK/MODE ---------------------*/

@media (width < 576px) {

  nav form {
    width: 55%;
  }

  nav select.custom {
    width: 20%;
  }

  nav .nav-link.custom-log-out {
    display: flex;
  }

  nav .nav-link.custom-log-out i {
    width: 25%;
  }

  nav .nav-link.custom-log-out span {
    width: 25%;
  }

  nav .nav-link.custom-log-out span {
    width: 25%;
  }

  nav .nav-link.custom-log-out i.bi::before {
    font-size: 22px;
    vertical-align: -5px;
  }

  nav .nav-item.logout-xs {
    width: 35%;
  }

  /* Estructura HOME */

  div.intro h4 {
    width: 100%;
  }

  /* Estructura general */
  .grid-container.home {
    grid-template-columns: repeat(1, minmax(285px, 1fr)) !important;
  }

  .grid-item .card-title,
  .grid-item h6.card-title {
    font-size: 14px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .intro {
    h4 {
      width: 100%;
    }
  }

  .breadcrumb {
    display: none;
  }

  #modal-preview {
    .modal-body {

      h5,
      p {
        padding-left: 15px;
      }
    }
  }


}