/* Colores pasteles principales para CLADES */
:root {
  --pastel-orange: #e17a04;
  --pastel-green: #78d388;
  --pastel-blue: #34d3ef;
  --pastel-red: #c13111;
}

/* Sobrescribir colores primary de Bootstrap */
.bg-primary {
  background-color: var(--pastel-orange) !important;
}

.bg-tertiary {
  background-color: var(--pastel-blue) !important;
}

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

.text-secondary {
  color: var(--pastel-green) !important;
}

.text-tertiary {
  color: var(--pastel-blue) !important;
}

.btn-primary {
  background-color: var(--pastel-orange) !important;
  border-color: var(--pastel-orange) !important;
  color: #333 !important;
}

.btn-primary:hover {
  background-color: #95c9dd !important;
  border-color: #95c9dd !important;
  color: #333 !important;
}

.btn-outline-primary {
  color: var(--pastel-orange) !important;
  border-color: var(--pastel-orange) !important;
}

.btn-outline-primary:hover {
  background-color: var(--pastel-orange) !important;
  border-color: var(--pastel-orange) !important;
  color: #333 !important;
}

/* Sobrescribir colores success de Bootstrap */
.bg-success {
  background-color: var(--pastel-green) !important;
}

.text-success {
  color: var(--pastel-green) !important;
}

.btn-success {
  background-color: var(--pastel-green) !important;
  border-color: var(--pastel-green) !important;
  color: #333 !important;
}

/* Sobrescribir colores danger/accent */
.text-danger {
  color: var(--pastel-blue) !important;
}

.bg-danger {
  background-color: var(--pastel-red) !important;
}

/* Enlaces en colores pasteles */
a {
  color: var(--pastel-orange) !important;
}

a:hover {
  color: #95c9dd !important;
}

/* Navbar active link */
.navbar-nav .nav-link.active {
  color: var(--pastel-orange) !important;
}

/* Form focus states */
.form-control:focus {
  border-color: var(--pastel-orange) !important;
  box-shadow: 0 0 0 0.2rem rgba(168, 216, 234, 0.25) !important;
}

/* Shadow personalizado con colores pasteles */
.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(168, 216, 234, 0.2) !important;
}

.hr-text {
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: black;
  text-align: center;
  height: 1.5em;
  opacity: .5;

  &:before {
    content: '';
    background: linear-gradient(to right, transparent, #818078, transparent);
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
  }

  &:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    color: black;

    padding: 0 .5em;
    line-height: 1.5em;
    color: #1f1c05;
    background-color: #fcfcfa;
  }
}