p , h1 , h2 , h3 , h4 , h5, span {
  font-family: Poppins, Helvetica, "sans-serif";

}


/* You can add global styles to this file, and also import other style files */
.text-color-primary{
  color: var(--color-primary);
}


.mc-date--marked{
  background-color:  rgba(152, 193, 205, 0.936);
  color:white!important;
}

.stext-color-primary{
  color:var(--color-primary);
}

.stext-color-gray{
  color:gray;
}

.stext-color-red{
  color:rgb(235, 31, 31);
}

.text-link-color{
  color: var(--color-link)
}

.btn.btn-primary{
  background-color: var(--color-primary);
}

.btn:hover.btn-primary:hover{
  background-color:  var(--color-link);
}

.stext-color-dark{
  color:#616161!important;
}

.stext-color-black{
  color:black!important;
}

.btn-full{
  width: 100%;
}

gn3-root {
  display: block;
  height: 100%;
}

.gn3-page {
  .gn3-page-header {
    font-size: 1.5em;
    font-weight: bold;
    border: 1px solid #d2d6e2;
    border-bottom: 1px solid #d2d6e2 !important;
    border-top: 1px solid #f0f1f2 !important;
    background-color: transparent !important;
    border-radius: 0px !important;

    .gn3-page-header-toolbar .btn {
      margin-right: 10px !important;
    }
  }

  .gn3-page-header .gn3-btnRegresar span {
    color: #ff8300;
    font-size: 1rem;
  }

  .gn3-page-header-subtitle {
    background-color: transparent !important;
  }

  .gn3-page-body {
    padding: 5px 0px;
  }

  .gn3-page-content {
    
  }

  .gn3-page-content>.card-body {
    padding: 15px 20px !important;
  }

  /* GRID */
  .gn3-grid {
    border: none !important;

    .e-gridheader {
      background: rgb(33, 47, 119) !important;
      background: linear-gradient(90deg,
          rgba(33, 47, 119, 1) 0%,
          rgba(72, 97, 220, 1) 100%) !important;
      border-radius: 15px !important;
      padding: 5px;
      margin-top: 5px;
      margin-bottom: 5px;

      .e-headercontent>.e-table {
        background-color: transparent !important;
      }

      .e-headercell {
        background-color: rgb(62, 88, 181) !important;
        background-color: transparent !important;

        .e-headertext {
          color: white !important;
        }

        .e-sortfilterdiv {
          color: white !important;
        }

        .e-icon-filter {
          color: white !important;
        }
      }
    }

    .e-selectionbackground {
      background-color: rgb(240, 251, 255) !important;
    }

    .e-pager .e-pagercontainer .e-nextpagedisabled {
      border-radius: 50px;
    }

    .e-pager .e-pagercontainer .e-lastpagedisabled {
      border-radius: 50px;
    }

    .e-pager .e-pagercontainer .e-prevpagedisabled {
      border-radius: 50px !important;
    }

    .e-pager .e-pagercontainer .e-firstpagedisabled {
      border-radius: 50px;
    }

    .e-pager .e-spacing,
    .e-pager .e-numericitem:hover,
    .e-pager .e-currentitem {
      border-radius: 15px;
    }
  }

  /* Schedule */
  .gn3-schedule {
    border: transparent;

    .e-schedule-table .e-current-date .e-date-header {
      background: #66bb6a;
    }

    .e-subject {
      border-radius: 20px;
    }

    .e-schedule-toolbar .e-toolbar-items {
      background: linear-gradient(90deg,
          rgba(33, 47, 119, 1) 0%,
          rgba(72, 97, 220, 1) 100%) !important;
      border-radius: 10px;

      .e-tbar-btn {
        background: transparent;

        .e-tbar-btn-text {
          color: white;
        }

        .e-btn-icon {
          color: white;
        }
      }
    }

    .e-calendar .e-content td.e-selected span.e-day,
    .e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {
      background-color: #e38b16 !important;
      border-radius: 20px;
    }

    .e-btn.e-flat.e-primary,
    .e-css.e-btn.e-flat.e-primary {
      color: #e38b16 !important;
    }

    .e-calendar .e-content.e-year td.e-selected>span.e-day {
      color: white;
    }

    .e-calendar .e-content.e-decade td.e-selected>span.e-day {
      color: white;
    }

    .e-btn.e-flat.e-primary:hover,
    .e-css.e-btn.e-flat.e-primary:hover {
      color: #e38b16;
      background-color: transparent;
      border-color: transparent;
    }

    .e-calendar .e-content.e-year td>span.e-day {
      background-color: transparent;
    }

    .e-header .e-year {
      background-color: transparent !important;
    }

    .align-events {
      display: flex;
      align-items: center;
    }

    .e-schedule .e-timeline-view .e-resource-left-td,
    .e-schedule .e-timeline-month-view .e-resource-left-td {
      width: 250px !important;
    }

    .evento-clickeable {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      display: flex;
      align-items: center;
      padding-right: 1rem;
      cursor: pointer;
      background: transparent; /* El color lo pone el ngStyle */
    }

  }

  /* Grid Widget  */
  .gn3-grid-widget:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  }

  .gn3-grid-widget:active {
    transform: scale(0.95);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
  }

  .gn3-grid-widget {
    border-radius: 20px;
    cursor: pointer;

    .gn3-widget-title {
      color: white;
    }

    .card-body {
      padding: 10px 20px;
    }

    .gn3-widget-icon {
      color: white;
      font-size: 2.5rem;
    }

    .gn3-widget-counter {
      color: white;
      font-size: 2rem;
    }

    .gn3-widget-text {
      color: white;
      font-size: 1rem;
    }

    .gn3-widget-text-secondary {
      color: white;
      font-size: 0.9rem;
    }

    .gn3-widget-counter-secondary {
      color: white;
      font-size: 0.9rem;
    }

    /* 
    / SELECT OPTIONS / */
    .gn3-widget-options {
      color: white;
      font-size: 0.9rem;
      background-color: transparent;
      border: none;
      padding: 0px;
      margin: 0px;

      .e-ddl-icon {
        background-color: transparent !important;
      }
    }

    /* / SELECT OPTIONS END / */
  }

  .gn3-grid-widget.gn3-widget-primary {
    background-image: linear-gradient(to top,
        rgb(66, 177, 251) 0%,
        rgba(172, 220, 255, 0.904) 100%);
  }

  .gn3-grid-widget.gn3-widget-green {
    background-color: #66bb6a;
    background-image: linear-gradient(to top, #0fd850 0%, #f9f047 100%);

    background-image: linear-gradient(to top, #28c76f 0%, #81fbb8 100%);
  }

  .gn3-grid-widget.gn3-widget-red {
    background-color: #e57373;
    background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
  }

  .gn3-grid-widget.gn3-widget-orange {
    background-color: #ffa726;
    background-image: linear-gradient(to top, #f55555 0%, #fccf31 100%);
  }

  .gn3-grid-widget.gn3-widget-blue {
    background-color: #4fc3f7;
    background-image: linear-gradient(to top, #0396ff 0%, #abdcff 100%);
  }

  .gn3-grid-widget.gn3-widget-purple {
    background-image: linear-gradient(#e2b0ff 10%, #9f44d3 100%);
  }

  .gn3-grid-widget.gn3-widget-brown {
    background-color: #a1887f;
  }

  .gn3-grid-widget.gn3-widget-gray {
    background-color: #90a4ae;
    background: linear-gradient(-180deg, #bcc5ce 0%, #929ead 98%),
      radial-gradient(at top left,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(0, 0, 0, 0.3) 100%);
    background-blend-mode: screen;
  }

  .gn3-grid-widget.gn3-widget-pink {
    background-image: linear-gradient(#f6ceec 0%, #d939cd 100%);
  }

  .gn3-grid-widget.gn3-widget-yellow {
    background-image: linear-gradient(#fdeb71 10%, #f8d800 100%);
  }

  .gn3-color-blue {
    color: #4fc3f7;
  }

  .gn3-color-orange {
    color: #ffa726;
  }

  .gn3-color-red {
    color: #e57373;
  }

  .gn3-color-green {
    color: #66bb6a;
  }

  .gn3-color-pink {
    color: #d939cd;
  }

  .gn3-color-purple {
    color: #9f44d3;
  }

  .gn3-color-yellow {
    color: #f8d800;
  }

  /* Badge */
  .gn3-bagde {
    color: white;
    display: inline-block;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 0.8rem;

    .gn3-badge-icon {
      font-size: 1.2rem;
    }

    .gn3-badge-text {
      font-size: 0.8rem;
    }

    .gn3-badge-counter {
      font-size: 1.2rem;
    }

    /* Checkbox */
    input[type='checkbox'] {
      vertical-align: middle;
    }

    /* Colores */
    &.gn3-badge-primary {
      background-color: #4fc3f7;
    }

    &.gn3-badge-green {
      background-color: #66bb6a;
    }

    &.gn3-badge-red {
      background-color: #e57373;
    }

    &.gn3-badge-orange {
      background-color: #ffa726;
    }

    &.gn3-badge-blue {
      background-color: #4fc3f7;
    }

    &.gn3-badge-blue-dark {
      background-color: #0041ce;
    }

    &.gn3-badge-purple {
      background-color: #ba68c8;
    }

    &.gn3-badge-brown {
      background-color: #a1887f;
    }

    &.gn3-badge-gray {
      background-color: #90a4ae;
    }

    &.gn3-badge-lightorange {
      background-color: #f78a4f;

    }
  }

  /* Chat  */
  .gn3-chat-style {
    .textarea_chat {
      border-radius: 10px;
      border: 1px solid #817e7e36;
      height: 80px;
      resize: none;
      font-size: 13px;
    }

    .cabeceros_chat {
      font-size: 1.1em;
      font-weight: bold;
      margin-left: 30px;
    }

    .datos_chat {
      font-size: 1em;
      font-weight: medium;
      margin-left: 30px;
    }

    .card .card-footer {
      background-color: #d2c8c836;
      border-radius: 10px;
    }

    .fondo_chat {
      background-color: white;
      border-radius: 5px;
      border: 1px solid #817e7e36;
    }

    .color_msg_log {
      background-color: #dcf8c6;
    }

    .color_msg_user {
      background-color: #f6f1fc;
    }

    .avatar-name-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #a1ceff;
    /* Color de fondo del avatar */
    color: white;
    /* Color de la letra */
    font-weight: bold;
    font-size: 1.2em;
    width: 35px;
    /* Tamaño del círculo */
    height: 35px;
    /* Tamaño del círculo */
    text-align: center;
    border-radius: 50%;
    /* Hace que sea un círculo */
}
  }

  /* Uploader */
  .gn3-uploader {

    .e-upload .e-file-select-wrap .e-btn,
    .e-upload .e-upload-actions .e-btn,
    .e-bigger.e-small .e-upload .e-file-select-wrap .e-btn,
    .e-bigger.e-small .e-upload .e-upload-actions .e-btn {
      background-color: rgba(33, 47, 119, 1);
      color: white;
      text-transform: capitalize;
      border-radius: 5px;
    }

    .e-upload.e-control-wrapper,
    .e-bigger.e-small .e-upload.e-control-wrapper {
      border: solid 1px #c7c7c7;
    }
  }

  /*Signature*/
  .gn3-signature {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;

    .lista {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .imagen {
      border: 1px solid #d3d3d3;
      background-color: #ffffe1;
    }
  }


  /*iconos i*/
  .color-icon {
    .marcajes {
      color: black;
    }

  }



}

/* Foto */
.gn3-foto-circular {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #f0f0f0;
}

.gn3-foto-user {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}


/* Input Text Focus Border */

input[type="text"].form-control, 
input[type="password"].form-control
{
  border: 1.5px solid #ced4da;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"].form-control:hover,
input[type="password"].form-control:hover 
{
  border: 1.5px solid var(--color-primary)!important;
}

input[type="text"].form-control:focus, 
input[type="password"].form-control:focus
{
  border: 1.5px solid var(--color-link)!important; 
  outline: none;
}

.btn-control-minus,
.btn-control-plus
{
  font-size: 2rem;
  padding: 0 16px;
  min-width: 40px;
}


/* Modales Layout */

.e-dialog {
  .gn3-page-header-subtitle {
    background-color: transparent !important;
    border-color: transparent !important;
  }
}


/* Aumenta el ancho máximo del tooltip de Intro.js */
.introjs-tooltip {
  max-width: 600px !important; /* O el ancho que prefieras */
  min-width: 400px !important;
}

/* Fix para el scroll interno del sidebar */
#kt_sidebar.drawer.drawer-end {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#kt_sidebar.drawer.drawer-end .sidebar-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background-color: var(--color-light);
  background-color: var(--bs-sidebar-bg, var(--color-light));
  position: relative;
  transition: background-color 0.3s ease;
}