@charset "utf-8";

/* ----------------------------------
Name: global.css
Version: 1.0.0
Autor: Fragmenta Soluciones Digitales
Website: https://www.fragmenta.mx
----------------------------------- */

/* ===================================
    Reset
====================================== */
*,
*::before,
*::after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
html { font-size: 16px !important;}
body {
     font-family: 'Plus jakarta sans', sans-serif !important;
     -webkit-font-smoothing: antialiased;
     font-smooth: antialiased;
     /* font-size: 16px; */
     font-weight: 400;
     line-height: auto;
     color:#171819;
     background-color: #fff;
     margin: 0px;
}
body, html {min-height: 100%; -moz-osx-font-smoothing: grayscale;}

section{
  position: relative;
   overflow-x:clip;
}


a, a:active, a:focus { color: #2F254D;; text-decoration: none;transition:all .5s ease;}
a:hover, a:active{color: #2F254D; text-decoration: none; cursor: pointer;transition:all .5s ease;}
/*a:focus, a:active, button:focus, button:active, .btn-main.active.focus, .btn-main.active:focus, .btn-main.focus, .btn-main:active.focus, .btn-main:active:focus, .btn-main:focus {outline: none; box-shadow: none; } */

/*footer a, footer a:active, footer a:focus { color: #ffffff; text-decoration: none; font-size: 12px; line-height: 20px;}*/
/*footer a:hover, footer a:active{color: #1158A0; text-decoration: none; cursor: pointer;}
footer a:focus, footer a:active, footer button:focus, footer button:active, footer .btn-main.active.focus, footer .btn-main.active:focus, footer .btn-main.focus, footer .btn-main:active.focus, footer .btn-main:active:focus,footer  .btn-main:focus {outline: none; box-shadow: none; }

/*img {max-width:100%; height:auto; }*/


/* ===================================
    Typography
====================================== */
b, strong{font-weight: 700;}

/* heading */
h1, h2, h3, h4, h5, h6 {font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: 0;color: #171819;}

h1, .h1 {font-size:1.875rem; line-height:130%; font-weight: 400;}
h2, .h2 {font-size:1.5rem; line-height:130%; font-weight: 400;}
h3, .h3 {font-size:1.25rem; line-height:130%; font-weight: 400;}
h4, .h4 {font-size:1rem; line-height:130%; font-weight: 400;}
h5, .h5 {font-size:0.875rem; line-height:130%; font-weight: 400;}
h6, .h6 {font-size:0.75rem; line-height:150%; font-weight: 400;}

p {font-size:0.875rem;font-weight: 400;line-height:150%;}
.small {font-size:0.75rem;font-weight: 400;line-height:150%;}


/* md  */ @media (min-width: 768px) {

    h1, .h1 {font-size:2.125rem; line-height:130%; font-weight: 400;}
    h2, .h2 {font-size:1.75rem; line-height:130%; font-weight: 400;}
    h3, .h3 {font-size:1.5rem; line-height:130%; font-weight: 400;}
    h4, .h4 {font-size:1.25rem; line-height:130%; font-weight: 400;}
    h5, .h5 {font-size:1rem; line-height:130%; font-weight: 400;}
    h6, .h6 {font-size:0.875rem; line-height:150%; font-weight: 400;}

    p {font-size:1rem;font-weight: 400;line-height:150%;}
    .small {font-size:0.875rem;font-weight: 400;line-height:150%;}


} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

    h1, .h1 {font-size:2.375rem; line-height:130%; font-weight: 400;}
    h2, .h2 {font-size:2rem; line-height:130%; font-weight: 400;}

} /* ipad Landscape */

.text-main{color:#545C7D;}
.text-alt{color:#584CDB;}

.text-expired{color:#999DAE;}

/* ===================================
    Button
====================================== */

/*Main btn*/


.main-btn{
  border-radius:10px;
  padding:8px 14px;
  font-weight:600;
  background:#584CDB;
  border-color:#584CDB;
  color:#fff;
  transition:all .5s ease;
}
.main-btn:hover{
  background:#D6D5EE;
  border-color:#D6D5EE;
  color:#584CDB;
  transition:all .5s ease;
}

/*Links*/

.link-main{
  color:#584CDB;
  font-weight: 600;
  text-decoration:none;
  transition:all .5s ease;
}
.link-main:hover{ text-decoration:underline; color: #D6D5EE;transition:all .5s ease; }


/*Delete btn*/


.btn-delete{
  border-radius:10px;
  padding:8px 14px;
  font-weight:600;
  background:transparent;
  border: 1px solid #E00D0D;
  color:#E00D0D;
  transition:all .5s ease;
      align-items: center;
    display: flex;
    gap: 5px;

}

.btn-delete svg{
    width: 18px;
}

.btn-delete:hover{
  background:#D6D5EE;
  border-color:#D6D5EE;
  color:#584CDB;
  transition:all .5s ease;
}

/* Icon Button */
.icon-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #D6D5EE;
  color: #584CDB;
  padding: 5px;
  transition:all .5s ease;
}

.icon-btn svg{
    width: 20px;
    transition:all .5s ease;
}

.icon-btn:hover{
    background: #584CDB;
    transition:all .5s ease;
}

.icon-btn:hover path{
    stroke:#fff;
}

.icon-btn.is-active{
  outline: 2px solid #584CDB;
  background:  #D6D5EE;
}


/* Options Button */
.btn-options {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  color: #999DAD;
  padding: 5px;
  transition:all .5s ease;
}

.btn-options i{
    font-size: 22px;
}

/* ===================================
    Contenedores
====================================== */

/* Header */
.page-head{
  background: #F6F7FB;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  padding: 20px 20px;
  margin-bottom: 15px;
}

/* Filters */
.filters-bar {
  background: #F6F7FB;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 15px;
}

.orden-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* texto */
.orden-wrapper::before {
  content: "Ordenar por:";
  color: #6b7280;
  font-size: 14px;
  margin-right: 5px;
}

/* select*/
.select-orden {
  border: 0;
  background-color: transparent;
  color: #584CDB;
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;

  padding-right: 28px;
  height: auto;
  min-height: unset;
  max-width: 80%;
}

.select-orden:focus {
  outline: none;
  box-shadow: none;
}

/*Contents form*/

.main-form-card {
  background: #F6F7FB;
  border-radius: 16px;
  overflow: hidden;
}

.main-form-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 80px;
  padding: 20px;
  background: #F6F7FB;
}

.main-form-info h5 {
  font-weight: 700;
  margin-bottom: 10px;
}

.main-form-info p {
  font-size: 13px;
  line-height: 1.6;
  color: #7a8095;
  margin: 0;
}

.main-form-fields .form-label {
  font-size: 14px;
  font-weight: 600;
  color: #171819;
  margin-bottom: 6px;
}

.main-form-fields .form-label span {
  color: #E00D0D;
}

.main-form-fields .form-control,
.main-form-fields .form-select {
  height: 42px;
  border-radius: 8px;
  border: 1px solid #d9dce7;
  font-size: 13px;
  color: #545C7D;
  background-color: #fff;
}

.main-form-fields textarea.form-control {
  min-height: 86px;
  height: auto;
  resize: none;
  padding-top: 10px;
}

.form-control-muted {
  background: #D7DBE1 !important;
}

.input-icon-wrap {
  position: relative;
}


.input-icon-wrap i {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #67708a;
  pointer-events: none;
}

.main-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
  background: #fff;
}

.action-cancel {
  color: #6c63ff !important;
  font-size: 13px;
  font-weight: 600;
}

.action-save {
  min-width: 96px;
  height: 40px;
  border-radius: 8px;
  font-weight: 600;
}

@media (max-width: 991.98px) {
  .main-form-grid {
    grid-template-columns: 1fr;
    gap:20px;
  }

  .main-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .main-form-actions > div {
    justify-content: flex-end;
  }
}


/* ===================================
    Tablas
====================================== */

/* Table card */
.table-wrap {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
}

.orbit-table thead th {
  background: #545C7D;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 0;
  padding: 10px 8px;
}

.orbit-table tbody td {
  font-size: 12px;
  padding: 10px 8px;
  border-top: 1px solid #D4D4D6
}

.dropdown-item {
        color: #545C7D;
    font-weight: 600;
    font-size: 14px;
}

.dropdown-item svg{
    width: 16px;
    height: 16px;
}

.dropdown-item:focus, .dropdown-item:hover{
        color: #584CDB;
    background-color: transparent;
}

.dropdown-item:hover path{
    fill: #584CDB;
}


.tag-service{
    display: inline-block;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1;
    color: #545C7D;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 999px;
    background: #F6F7FB;
}


/* Pills estado */

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.status-ok {
  background: #E6FFE4;
  color: #208D38;
}

.status-expired {
  background: #999DAE;
  color: #fff;
}

.status-renew {
  background: #FFE6CD;
  color:#FA7319;
}

.status-renew-warn {
  background: #FFF1F1;
  color:#E00D0D;
}

.status-stop {
  background: #F6F7FB;
  color:#545C7D;
}


/* Pager */
.pager {
  margin-top: 16px;
}


/* ===================================
    Paginador
====================================== */

.custom-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.custom-pagination .page-item {
  font-size: 16px;
  color: #2C3248;
  text-decoration: none;
  transition: all 0.2s ease;
}

.custom-pagination .page-item:hover {
  color: #584CDB;
}

.custom-pagination .page-item.active {
  width: 32px;
  height: 32px;
  background: #584CDB;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}


/* ===================================
    Grid
====================================== */

.grid-1fr{grid-template-columns: 1fr;}
.grid-50{grid-template-columns: 1fr 1fr}
.no-gap{gap:0px;}
.gap-10{gap:10px;}
.gap-20{gap:20px;}
.gap-30{gap:30px;}
.gap-40{gap:40px;}
.gap-50{gap:50px;}
.gap-100{gap:100px;}
.order-1{order:1!important;}
.order-2{order:2!important;}


/* ===================================
    Responsive
====================================== */

/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {


} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {



/*Grid*/
.sm-grid-80{grid-template-columns: 80% 1fr;}
.sm-grid-75{grid-template-columns: 75% 1fr;}
.sm-grid-70{grid-template-columns: 70% 1fr;}
.sm-grid-65{grid-template-columns: 65% 1fr;}
.sm-grid-60{grid-template-columns: 60% 1fr;}
.sm-grid-55{grid-template-columns: 55% 1fr;}
.sm-grid-50{grid-template-columns: 1fr 1fr;}
.sm-grid-45{grid-template-columns: 45% 1fr;}
.sm-grid-35{grid-template-columns: 35% 1fr;}
.sm-grid-30{grid-template-columns: 30% 1fr;}
.sm-grid-3fr{grid-template-columns: repeat(3,1fr);}
.sm-no-gap{gap:0px;}
.sm-gap-10{gap:10px;}
.sm-gap-20{gap:20px;}
.sm-gap-30{gap:30px;}
.sm-gap-40{gap:40px;}
.sm-gap-50{gap:50px;}
.sm-gap-100{gap:100px;}
.sm-order-1{order:1!important;}
.sm-order-2{order:2!important;}



}
/* md  */ @media (min-width: 768px) {


/*Grid*/
.md-grid-80{grid-template-columns: 80% 1fr;}
.md-grid-75{grid-template-columns: 75% 1fr;}
.md-grid-70{grid-template-columns: 70% 1fr;}
.md-grid-65{grid-template-columns: 65% 1fr;}
.md-grid-60{grid-template-columns: 60% 1fr;}
.md-grid-55{grid-template-columns: 55% 1fr;}
.md-grid-50{grid-template-columns: 1fr 1fr;}
.md-grid-45{grid-template-columns: 45% 1fr;}
.md-grid-40{grid-template-columns: 40% 1fr;}
.md-grid-35{grid-template-columns: 35% 1fr;}
.md-grid-30{grid-template-columns: 30% 1fr;}
.md-grid-3fr{grid-template-columns: repeat(3,1fr);}
.md-no-gap{gap:0px;}
.md-gap-10{gap:10px;}
.md-gap-20{gap:20px;}
.md-gap-30{gap:30px;}
.md-gap-40{gap:40px;}
.md-gap-50{gap:50px;}
.md-gap-100{gap:100px;}
.md-order-1{order:1!important;}
.md-order-2{order:2!important;}



} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

/*Grid*/
.lg-grid-80{grid-template-columns: 80% 1fr;}
.lg-grid-75{grid-template-columns: 75% 1fr;}
.lg-grid-70{grid-template-columns: 70% 1fr;}
.lg-grid-65{grid-template-columns: 65% 1fr;}
.lg-grid-60{grid-template-columns: 60% 1fr;}
.lg-grid-55{grid-template-columns: 55% 1fr;}
.lg-grid-50{grid-template-columns: 1fr 1fr;}
.lg-grid-45{grid-template-columns: 45% 1fr;}
.lg-grid-40{grid-template-columns: 40% 1fr;}
.lg-grid-35{grid-template-columns: 35% 1fr;}
.lg-grid-30{grid-template-columns: 30% 1fr;}
.lg-grid-3fr{grid-template-columns: repeat(3,1fr);}
.lg-no-gap{gap:0px;}
.lg-gap-10{gap:10px;}
.lg-gap-20{gap:20px;}
.lg-gap-30{gap:30px;}
.lg-gap-40{gap:40px;}
.lg-gap-50{gap:50px;}
.lg-gap-100{gap:100px;}
.lg-order-1{order:1!important;}
.lg-order-2{order:2!important;}


} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {}
/* xxl */ @media (min-width: 1400px) {}