new_servicio_social_front/src/sass/bootstrap.scss

@import 'bootstrap/dist/css/bootstrap.min.css';

$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';



$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: if(variable-exists("theme-colors"), map-merge($theme-colors, $custom-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;
  }
}



.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;

    @media (min-width: 768px) {
      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 {
  /* Equivalent of Bootstrap utility classes without using @extend */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  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);
}

/* Utility classes for custom colors (restore bg-<name> / text-<name> used in JSX)
   These are minimal helpers so we don't need to import Bootstrap SCSS utilities. */
.bg-azul { background-color: #003d79 !important; }
.text-azul { color: #003d79 !important; }
.bg-dorado { background-color: #bd8c01 !important; }
.text-dorado { color: #bd8c01 !important; }
.bg-morado { background-color: #714dd2 !important; }
.bg-light-morado { background-color: #d6c9f7 !important; }
.text-morado { color: #714dd2 !important; }
.bg-verde { background-color: #48c78e !important; }
.text-verde { color: #48c78e !important; }
.bg-red-guapa { background-color: #9e1d15 !important; }
.text-red-guapa { color: #9e1d15 !important; }
.bg-blue-guapa { background-color: #3d6cb4 !important; }
.text-blue-guapa { color: #3d6cb4 !important; }
.bg-yellow-guapa { background-color: #eca728 !important; }
.text-yellow-guapa { color: #eca728 !important; }

/* Restore common Bootstrap text utilities if overridden */
.text-white { color: #fff !important; }
.text-dark { color: #000 !important; }
.text-muted { color: #6c757d !important; }
.text-body { color: var(--bs-body-color, #212529) !important; }
.fw-bold { font-weight: 700 !important; }