@import 'bootstrap/scss/functions';

@import 'variables';

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

// Include any default map overrides here
$azul: #003d79;
$dorado: #d59f0f;

$custom-colors: (
  'azul': $azul,
  'dorado': $dorado,
);

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

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

@import 'gradients';
@import 'extends';
@import 'table';
@import 'utilities';
@import 'sidebar';
@import 'hover';
@import 'tabs';
@import 'animation';
@import './global.scss';

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg)
    brightness(200%);
}

//Add additional custom code here

@include media-breakpoint-up(lg) {
  .bd-layout {
    display: grid;
    grid-template-areas: 'sidebar main';
    grid-template-columns: 1fr 5fr;
    gap: $spacer * 1.5;
  }
}

@include media-breakpoint-up(lg) {
  .bd-sidebar {
    grid-area: sidebar;
    position: sticky;
    top: ($spacer * 3);
    height: calc(100vh - 6rem);
  }
}

ul.list-unstyled li {
  padding: 0.5rem 0;
  a {
    color: $azul;
    transition: color 0.2s;
    text-decoration: none;
    &:hover {
      color: $dorado;
    }
  }
}

.card {
  @extend .bg-white, .text-dark, .rounded, .shadow-sm;
  display: inline-block;
  position: relative;
  width: 100%;
  margin-bottom: 1.5rem;

  .card-image {
    position: relative;
    overflow: hidden;
    margin: -1.5rem 1rem 0;
    cursor: pointer;
    @extend .rounded;
    @extend .shadow;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80%; // ajusta según el tamaño deseado
      background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
      pointer-events: none;
      z-index: 1;
    }

    img {
      @extend .img-fluid, .rounded;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }

    .card-caption {
      position: absolute;
      bottom: 5px;
      left: 15px;
      color: #fff;
      font-weight: bold;
      font-size: 1.25rem;
      text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5);
      z-index: 2;
    }

    .card-description {
      > p {
        margin: 0;
      }
    }
  }

  .table {
    @extend .p-3;
  }

  .ftr {
    @extend .mt-3;

    div {
      display: inline-block;
    }

    .author {
      @extend .text-muted;
    }

    .stats {
      float: right;
      line-height: 30px;
      font-size: 0.875rem;
      position: relative;
      top: 1px;
    }
  }
}

.cursor-pointer {
  cursor: pointer;
}

input {
  --bs-body-bg: #fff;
}

.required {
  position: relative;
  &::after {
    content: '*';
    position: absolute;
    color: red;
    font-weight: bold;
    margin-left: 10px;
  }
}

.preguntas {
  @include media-breakpoint-up(md) {
    margin-inline: 5rem;
  }

  @include media-breakpoint-up(lg) {
    margin-inline: 14rem;
  }
}

.table-white {
  --bs-table-bg: #fff;
}