new_servicio_social_front/src/sass/bootstrap.scss

@import 'bootstrap/scss/functions';

$azul: #003d79;
$dorado: #bd8c01;
$morado: #714dd2;
$verde: #48c78e;

$red-guapa: #9e1d15;
$blue-guapa: #3d6cb4;
$yellow-guapa: #eca728;

$modal-lg: 900px;

body {
    background-color: #f2f2f2 !important;
}

$font-family-sans-serif: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';

@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/variables-dark';

$custom-colors: (
    'azul': $azul,
    'dorado': $dorado,
    'morado': $morado,
    'verde': $verde,
    'red-guapa': $red-guapa,
    'blue-guapa': $blue-guapa,
    'yellow-guapa': $yellow-guapa,
);

// Para el datapicker
.mi-calendario {
  font-family: "Poppins", sans-serif;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #dee2e6; // color tipo Bootstrap
  background-color: #fff;

  .react-datepicker__header {
    background-color: #756e6e; // azul Bootstrap
    color: white;
    border-bottom: none;
  }

  .react-datepicker__current-month,
  .react-datepicker__day-name {
    color: white;
  }

  .react-datepicker__day--selected,
  .react-datepicker__day--keyboard-selected {
    background-color: #0d6efd;
    color: white;
    border-radius: 50%;
  }

  .react-datepicker__day:hover {
    background-color: #e9ecef;
    border-radius: 50%;
  }
}


$theme-colors: map-merge($theme-colors, $custom-colors);

.form-registro {
  .form-floating {
    --bs-body-bg: #f2f2f2;
    --bs-border-width: 0;

    .form-control:focus {
      box-shadow: none;
    }

    .form-TYL {
      width: 50%;
    }

    .form-:focus ~ label {
      color: #666666 !important;
    }

    .form-control:focus ~ label {
      color: #666666 !important;
    }

    border: 0;
    border-bottom: 1px solid #ccc;
  }
}

@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/bootstrap';


.aviso {
  position: relative;
  display: inline-block;
  z-index: 100;

  &::before {
    content: '';
    position: absolute;
    bottom: 55%;
    left: 125%;
    width: 150%;
    height: 2px;
    background-color: $dorado;
    transform: translateY(5px);
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 55%;
    right: 125%;
    width: 150%;
    height: 2px;
    background-color: $dorado;
    transform: translateY(5px);
  }
}

.login {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    bottom: 45%;
    left: 9rem;
    width: 50%;
    height: 2px;
    background-color: $azul;

    @include media-breakpoint-up(md) {
      left: 10rem;
    }
  }
}

.scale {
  transition: transform 0.3s ease-in-out;

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

.scale-2 {
  transition: transform 0.3s ease-in-out;

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

.scale-3 {
  transition: transform 0.3s ease-in-out;

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

.dropdown-toggle::after {
  display: none !important;
}

#nested-dropdown {
  color: #000;
}

.dropdown-item:active,
.dropdown-item:focus {
  color: #000;
  background-color: #f2f2f2;
}

.navbar-toggler:active,
.navbar-toggler:focus {
  border: none !important;
  box-shadow: none !important;
}

.nav.nav-string {
  .nav-item {
    .nav-link {
      text-decoration: underline;
      &.active {
        color: $dorado;
      }
      &:hover {
        color: $azul;
      }
    }
  }
}

#dropdown-basic-button {
  &::before {
    display: none;
  }
}

.full-center {
  //flex-grow-1 d-flex flex-column justify-content-center align-items-center
  @extend .flex-grow-1;
  @extend .d-flex;
  @extend .flex-column;
  @extend .justify-content-center;
  @extend .align-items-center;
}

.minNavbar {
  width: 100%;
  background-color: #d59f0f;
  height: 32px;
}

.mainNavbar {
  width: 100%;
  background-color: #ffffff;
  height: 64px;
}

.bg-hover {
  transition: background-color 0.3s ease-in-out;

  &:hover {
    background-color: #f2f2f2;
  }
}

.titulo-con-lineas {
  color: lighten($azul, 20%);
}

/* .titulo-con-lineas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: lighten($azul, 20%);
  @include media-breakpoint-up(md) {
    text-wrap: nowrap;
  }
}

.titulo-con-lineas::before,
.titulo-con-lineas::after {
  content: '';
  width: 100%;
  height: 2px;
  background-color: lighten($azul, 20%);
}
 */

.imageFlip {
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform 1s;
}
.imageFlip:hover {
  transform: rotateY(360deg);
}