:root {
  --color-primary: rgb(0, 98, 159);
  --color-on-primary: #FFFFFF;
  --color-primary-container: #D0E4FF;
  --color-on-primary-container: #001D34;

  --color-secondary: #526070;
  --color-on-secondary: #FFFFFF;
  --color-secondary-container: #D6E4F7;
  --color-on-secondary-container: #0F1D2A;

  --color-tertiary: #695779;
  --color-on-tertiary: #FFFFFF;
  --color-tertiary-container: #F0DBFF;
  --color-on-tertiary-container: #241532;

  --color-error: #BA1A1A;
  --color-on-error: #FFFFFF;
  --color-error-container: #FFDAD6;
  --color-on-error-container: #410002;


  --color-background: #FFFFFF;
  --color-on-background: #1A1C1E;
  --color-surface: #FCFCFF;
  --color-on-surface: #1A1C1E;

  --color-surface-variant: #DEE3EB;
  --color-on-surface-variant: #42474E;
  --color-outline: #73777F;

  --color-neutral50: #73777F;
  

  /*Con opacidad*/
  --color-surface-container-lowest: #F9F9FC;
  --color-surface-container-low: #F2F3F9;
  --color-surface-container: #EBEFF6;
  --color-surface-container-high: #E3EAF4;
  --color-surface-container-highest: #E0E9F3;
  --color-surface-container-extra: #DBE6F1;

  /*State layers*/
  --color-primary-opacity: rgba(0, 98, 159, 0.08);
  --color-primary-opacity-medium: rgba(0, 98, 159, 0.12);
  --color-primary-opacity-bold: rgba(0, 98, 159, 0.16);

  --color-on-primary-opacity: rgba(255, 255, 255, 0.08);
  --color-on-primary-opacity-medium: rgba(255, 255, 255, 0.12);
  --color-on-primary-opacity-bold: rgba(255, 255, 255, 0.16);

  --color-secondary-container-opacity: rgba(15, 29, 42, 0.08);
  --color-secondary-container-opacity-medium:rgba(15, 29, 42, 0.12);
  --color-secondary-container-opacity-bold: rgba(15, 29, 42, 0.16);

  --color-on-surface-variant-opacity: rgba(66, 71, 78, 0.08);
  --color-on-surface-variant-opacity-medium: rgba(66, 71, 78, 0.12);
  --color-on-surface-variant-opacity-bold: rgba(66, 71, 78, 0.16);

  --color-on-inverse-surface-opacity: rgba(241, 240, 244, 0.08);
  --color-on-inverse-surface-opacity-medium: rgba(241, 240, 244, 0.12);
  --color-on-inverse-surface-opacity-bold: rgba(241, 240, 244, 0.16);

  --color-tertiary-opacity: rgba(105, 87, 121, 0.08);

   /*State*/
   --color-on-surface-state-opacity: rgba(26, 28, 30, 0.04);
   --color-on-surface-state-opacity-medium: rgba(26, 28, 30, 0.12);
   --color-on-surface-state-opacity-bold: rgba(26, 28, 30, 0.38);

  /*Transicion*/
  --transition-sidebar: all 300ms ease-in-out;

  /*Bootstrap*/
  --bs-link-color-rgb: 0, 98, 159;
  --bs-link-opacity: 1;

}

html {
    scrollbar-gutter: stable;
}

html.login-index {
    scrollbar-gutter: auto;
}

body.swal2-shown{
  padding-right: 0 !important;
}

/* Lucide */
span[data-lucide]{
  display: inline-block;
  width: 1px;
  height: 1.5rem;
}

.lucide.lucide-square-pen,
.lucine.copy-plus,
.lucide.external-link{
  width: 1.25rem;
  height: 1.25rem;
}

/*Icono borrar*/
.btn.btn-icon-primary .fa-trash{
  width: 1.25rem;
}

/* Bootstrap */

.btn.btn-icon-primary{
  color: var(--color-primary);
  background-color: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}

.btn.btn-icon-primary:active{
  border-color: transparent;
  color: var(--color-primary);
}

.btn.btn-icon-primary span{
  font-size: 1rem;
}

.btn.btn-outline-primary:disabled{
  --bs-btn-disabled-color: var(--color-on-surface-state-opacity-bold);
  --bs-btn-disabled-border-color: var(--color-primary-opacity-medium);
}

.btn{
  --bs-btn-border-radius: 2rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-line-height: 1;
}
.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  
  --bs-btn-disabled-bg: var(--color-primary-opacity-medium);
  --bs-btn-disabled-border-color: var(--color-primary-opacity-medium);
  --bs-btn-disabled-color: rgba(var(--color-on-surface), 0.38);
}

.btn-primary:focus-visible {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-focus-box-shadow: 0;
}

.btn-secondary {
  --bs-btn-bg: var(--color-secondary-container);
  --bs-btn-border-color: var(--color-secondary-container);
  --bs-btn-color: var(--color-on-secondary-container);
}

.btn-outline-primary:focus-visible{
  --bs-btn-bg: var(--color-on-primary);
  --bs-btn-hover-color: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-neutral50);
  --bs-btn-hover-bg:var(--color-on-primary);
  --bs-btn-focus-box-shadow: 0;
}

.btn-outline-primary{
  --bs-btn-border-color: var(--color-neutral50);
  --bs-btn-color: var(--color-primary);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-primary);
  --bs-btn-active-border-color: var(--color-neutral50);
}

.btn-outline-secondary{
  --bs-btn-border-color: transparent;
  --bs-btn-color: var(--color-primary);
}

.btn-group-sm > .btn, 
.btn-sm {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.8125rem;
  --bs-btn-font-weight: 400;
}
.btn-group-lg > .btn, 
.btn-lg {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 1.25rem;
}

.btn-primary:hover{
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color:var(--color-primary);
  box-shadow:  
  0 1px 3px 1px rgba(0, 0, 0, 0.15),
  0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

.btn-secondary:hover {
  --bs-btn-hover-bg: var(--color-secondary-container);
  --bs-btn-hover-border-color: var(--color-secondary-container);
  --bs-btn-hover-color: var(--color-on-secondary-container);
  box-shadow:  
  0 1px 3px 1px rgba(0, 0, 0, 0.15),
  0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

.btn-outline-primary:hover{
  --bs-btn-hover-border-color: var(--color-neutral50);
  --bs-btn-hover-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-opacity);
}

.btn-outline-secondary:hover{
  --bs-btn-hover-border-color: var(--color-primary-opacity);
  --bs-btn-hover-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-opacity);
}

.btn-primary:active{
  --bs-btn-active-bg: var(--color-primary);
  --bs-btn-active-border-color: var(--color-primary);
}

.btn-secondary:active {
  --bs-btn-active-bg: var(--color-secondary-container);
  --bs-btn-active-border-color: var(--color-secondary-container);
  --bs-btn-active-color: var(--color-on-secondary-container);
}

.btn-outline-primary:active{
  --bs-btn-active-border-color: var(--color-neutral50);
  --bs-btn-active-color: var(--color-primary);
  --bs-btn-active-bg: var(--color-on-primary);
}

.btn-outline-active:active{
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-color: var(--color-primary);
  --bs-btn-active-bg: transparent;
}

.btn-link {
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color:var(--color-primary);
  --bs-btn-box-shadow: none;
  --bs-btn-focus-shadow-rgb: none;
  text-decoration: none;
}

/* Swal2 - bottones */
div:where(.swal2-container) div:where(.swal2-actions) {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 0 auto;
}

div:where(.swal2-container) button:where(.swal2-styled) {
  border: 1px solid transparent;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
  border-color: 1px solid var(--bs-btn-hover-border-color);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):hover{
  box-shadow:  
  0 1px 3px 1px rgba(0, 0, 0, 0.15),
  0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):focus-visible {
  box-shadow: none;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny) {
  margin-left: auto;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel) {
  border: 1px solid var(--color-secondary-container);
  border-radius: 2rem;
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
  font-size: 0.875rem;
  margin-left: auto;
}

div:where(.swal2-container) .swal2-cancel:hover {
  --bs-btn-hover-bg: var(--color-secondary-container);
  --bs-btn-hover-border-color: var(--color-secondary-container);
  --bs-btn-hover-color: var(--color-on-secondary-container);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

div:where(.swal2-container) div:where(.swal2-actions):not(.swal2-loading) .swal2-styled:hover {
  background-image: none;
}

.swal2-actions button{
  min-width: 6rem;
}

.swal-text-left .swal2-html-container {
    z-index: 2;
}

#swal_tablecolumn{
  width: 20%;
}

.swal2-html-container:has(.popup-jalert-campos){
  text-align: left;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny){
  color: var(--color-primary);
  border: 1px solid var(--color-neutral50);
 background-color: var(--color-on-primary);
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny):hover{
  background-color: var(--color-primary-opacity);
}

/*Animacion*/
.swal2-show {
  animation: none;
  transition: none;
}

div:where(.swal2-icon).swal2-info.swal2-icon-show {
  animation: none;
}
div:where(.swal2-icon).swal2-info.swal2-icon-show .swal2-icon-content {
  animation: none;
}

/*Textos*/

div:where(.swal2-container) div:where(.swal2-html-container) {
  font-size: 0.875rem;
  line-height: 1.125rem;
  text-align: left;
  padding: 0.5rem 1.5rem 0;
}

div:where(.swal2-container) h2:where(.swal2-title) {
  font-size: 1.125rem;
  line-height: 1.5rem;
  text-align: left;
  padding: 1.5rem 1.5rem 0;
}

/*Icono del Swall*/
div:where(.swal2-icon).swal2-error.swal2-icon-show {
  animation: none;
}
div:where(.swal2-icon) {
  width: 50px;
  height: 50px;
  border: 2px solid rgba(0,0,0,0);
  
}

div:where(.swal2-icon) .swal2-icon-content {
  font-size: 30px;
}

/* icono X de error */
div:where(.swal2-icon).swal2-error.swal2-icon-show .swal2-x-mark {
 animation: none;
}
.swal2-icon.swal2-error .swal2-x-mark {
  width: 30px;
  height: 30px;
}

div:where(.swal2-icon).swal2-error [class^="swal2-x-mark-line"] {
  top: 24px;
  width: 30px;
  height: 4px;
}

div:where(.swal2-icon).swal2-error [class^="swal2-x-mark-line"][class$="left"] {
  left: 10px;
  transform: rotate(45deg);
}

div:where(.swal2-icon).swal2-error [class^="swal2-x-mark-line"][class$="right"] {
  right: 10px;
  transform: rotate(-45deg);
}

/*Icono success*/
div:where(.swal2-icon).swal2-success [class^="swal2-success-circular-line"][class$="left"],
div:where(.swal2-icon).swal2-success .swal2-success-fix,
div:where(.swal2-icon).swal2-success [class^="swal2-success-circular-line"][class$="right"] {
  display: none;
}

div:where(.swal2-icon).swal2-success .swal2-success-ring {
  border: 0;
}

div:where(.swal2-icon).swal2-success [class^="swal2-success-circular-line"] {
  width: 4.75em;
  height: 5.5em;
}

div:where(.swal2-icon).swal2-success [class^="swal2-success-line"][class$="tip"]{
  width: 12px;
  height: 4px;
  top: 26px;
  left: 13px;
}

div:where(.swal2-icon).swal2-success [class^="swal2-success-line"][class$="long"] {
  width: 22px;
  height: 4px;
  top: 24px;
  right: 9px;
}

div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-circular-line-righ,
div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-tipt,
div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-long,
div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-tip,
div:where(.swal2-icon).swal2-question.swal2-icon-show .swal2-icon-content,
div:where(.swal2-icon).swal2-question.swal2-icon-show{
  animation: none;
}

/* Layout: icono a la izquierda del título y descripción */
div:where(.swal2-container) div:where(.swal2-popup) {
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "close      close"
    "steps      steps"
    "icon       image"
    "icon       title"
    "icon       content"
    "icon       input"
    "icon       file"
    "icon       range"
    "icon       select"
    "icon       radio"
    "icon       checkbox"
    "icon       textarea"
    "icon       validation"
    "actions    actions"
    "footer     footer"
    "timer      timer";
}

div:where(.swal2-container) button:where(.swal2-close)                           { grid-area: close; }
div:where(.swal2-container) ul:where(.swal2-progress-steps)                      { grid-area: steps; }
div:where(.swal2-container) div:where(.swal2-icon)                               { grid-area: icon; align-self: flex-start; margin: 1.75rem 0 0.5rem 1.5rem; }
div:where(.swal2-container) img:where(.swal2-image)                              { grid-area: image; }
div:where(.swal2-container) h2:where(.swal2-title)                               { grid-area: title; }
div:where(.swal2-container) div:where(.swal2-html-container)                     { grid-area: content; }
div:where(.swal2-container) input:where(.swal2-input)                            { grid-area: input; }
div:where(.swal2-container) input:where(.swal2-file)                             { grid-area: file; }
div:where(.swal2-container) div:where(.swal2-range)                              { grid-area: range; }
div:where(.swal2-container) select:where(.swal2-select)                          { grid-area: select; }
div:where(.swal2-container) div:where(.swal2-radio)                              { grid-area: radio; }
div:where(.swal2-container) label:where(.swal2-checkbox)                         { grid-area: checkbox; }
div:where(.swal2-container) textarea:where(.swal2-textarea)                      { grid-area: textarea; }
div:where(.swal2-container) div:where(.swal2-validation-message)                 { grid-area: validation; }
div:where(.swal2-container) div:where(.swal2-actions)                            { grid-area: actions; }
div:where(.swal2-container) div:where(.swal2-footer)                             { grid-area: footer; }
div:where(.swal2-container) div:where(.swal2-timer-progress-bar-container)       { grid-area: timer; }

/* Alineación izquierda de labels y Select2 */
.swal-text-left .swal2-popup .form-label {
    text-align: left;
    display: block;
    width: 100%;
}

.swal-text-left .select2-container--default .select2-selection--single .select2-selection__rendered {
    text-align: left;
}

.swal-text-left .select2-container--default .select2-results__option {
    text-align: left;
}

.swal-container-left .swal2-html-container p{
  margin-bottom: 0.5rem;
}

.swal-full{
  min-width: 80%;
}

.swal-fullMedium{
  min-width: 60%;
}

.swal-full table tr th,
.swal-full table tr td{
  text-align: left;
  font-size: 0.875rem;
}


/* Dropdown */

.btn.dropdown-toggle {
  border: 1px solid var(--color-neutral50);
  border-radius: 0.5rem;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2rem;
  color: var(--color-on-secondary-container);
}

.btn.dropdown-toggle::after {
  margin-left: 0.5rem;
}


.dropdown-menu {
  --bs-dropdown-min-width: 100%;
  --bs-dropdown-padding-y: 0;
  --bs-dropdown-font-size: 0.875rem;
  --bs-dropdown-border-color: rgba(0,0,0,0.15);
  --bs-dropdown-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 
                            0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --bs-dropdown-border-radius:0.5rem;
  overflow: hidden;
}

.dropdown-item:focus, .dropdown-item:hover {
  --bs-dropdown-link-hover-color:var(--color-on-secondary-container);
  --bs-dropdown-link-hover-bg: #1A1C1E1F;
}

.dropdown-item.active, .dropdown-item:active {
  --bs-dropdown-link-active-color: var(--color-on-surface-variant);
  --bs-dropdown-link-active-bg: var(--color-secondary-container);
}

.dropdown-item {
  --bs-dropdown-item-padding-y:0.5rem;
  --bs-dropdown-item-padding-x:0.5rem;
  --bs-dropdown-link-color: var(--color-on-surface-variant);
}


/* Card */

.card-header {
  --bs-card-cap-padding-y:1rem;
  --bs-card-cap-padding-x: 1.5rem;
  padding-bottom: 0.5rem;
}

.card-body {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1.5rem;
}

/* Modal */

.modal-backdrop {
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.4;
}

.modal-content .modal-header {
  --bs-modal-header-border-width: 0;
}

.modal-content .modal-footer {
  --bs-modal-footer-border-width: 0;
}

/* Primary */

.border-primary {
  border-color: var(--color-primary)!important;
}

.alert-primary {
  --bs-alert-color: var(--color-primary);
  --bs-alert-bg: var(--color-surface-container-lowest);
  --bs-alert-border-color: var(--color-surface-container-lowest);
  --bs-alert-link-color: var(--color-primary);
}

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

/* Swal */

.swal-wide{
    width:850px !important;
}

/* COLS */
.row .col-trash-icon {
    flex: 0 0 auto;
    width: 3%;
}