/* content modifyers --------------------------------------------------- */

.containerZero {
  padding-right: 0;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
  max-width: 100%;
}

.sticky-top-nav{
  /*position: -webkit-sticky;*/
  position: sticky;
  top: 0;
  z-index: 40;
}

/* sidebar --------------------------------------------------- */

.text-sidebar {
  color: #6b6b6b;
}
.wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
}
#sidebar {
  min-width: 250px;
  max-width: 250px;
  background-color: #fff;
  color: #6b6b6b;
  transition: all 0.3s;
  border-right: 1px solid rgba(0, 0, 0, 0.125);
  
  height: calc(100vh - 71.22px);
  max-height: calc(100vh - 71.22px);
  overflow-y: auto;

  /*position: -webkit-sticky;*/
  position: sticky;
  top: 71.22px;
  
}
#sidebar.active {
  margin-left: -250px;
}
#sidebar .sidebar-header {
  padding: 20px;
}
#sidebar ul.components {
  padding-bottom: 100px;
}

#sidebar ul p {
  color: #6b6b6b;
  padding: 10px;
}
#sidebar ul li a {
  padding: 10px 10px 10px 25px;
  font-size: 1.1em;
  display: block;
  color: #6b6b6b;
  text-decoration: none;
}
#sidebar ul li a:hover {
  /*background-color: #fed7b9;*/
  background-color: var(--main-theme-color-lighter);
}
#sidebar ul li.active > a/*, #sidebar a[aria-expanded="true"]*/ {
  /*color: #FD9D50;*/
  color: var(--main-theme-color);
}
#sidebar ul li a i {
  padding-right: 10px;
}
a[data-toggle="collapse"] {
  position: relative;
}
#sidebar .dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
#sidebar ul ul a {
  font-size: 0.9em !important;
  padding-left: 55px !important;
  /*background: #e5b200;*/
}
ul.CTAs {
  padding: 20px;
}
ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}
#sidebar a.download {
  background: #6b6b6b;
  color: #ffcc19;
}
/*
a.article, a.article:hover {
  background: #e5b200 !important;
  color: #6b6b6b !important;
}
*/

/* --------------------------------------------------- */

#sidebar .sidebar-header {
  display: flex;
}
#sidebar .profile-acronym-container {
  width: 30%;
  display: flex;
  /*background-color: yellow;*/
  justify-content: center;
}
#sidebar .profile-info-container {
  width: 70%;
  display: flex;
  flex-direction: column;
  /*background-color: dodgerblue;*/
}
#sidebar .profile-info-container .name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#sidebar .profile-info-container .email {
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#sidebar .profile-info-container .badge {
  padding: 10px 0 0 0;
}
.img-like-acronym {
  width: 45px;
  height: 45px;
  border-radius: 22.5px;
  display:flex; 
  justify-content: center;
  align-items: center;
  /*background-color: #fe5572;*/
  background-color: var(--acronym-color);
  font-size: 19px;
  color: #fff;
}
/*
.img-like-acronym span {
  font-size: 19px;
  color: #fff;
}
*/
.img-like-acronym.light {
  font-weight: bold;
  background-color: #fff;
  /*color: #fe5572;*/
  color: var(--acronym-color);
}
/*
.img-like-acronym.light span {
  color: #fe5572;
  font-weight: bold;
}
*/
.img-like-acronym.light:hover {
  font-weight: normal;
  /*background-color: #fe5572;*/
  background-color: var(--acronym-color);
  color: #fff;
  text-decoration: none;
}
/*
.img-like-acronym.light span:hover {
  color: #fff;
  font-weight: bold;
}
*/
/*
#sidebar .ep-badge {
  background-color: #FE7E5F;
  border-radius: 5px;
  color: #fff;
}
#sidebar .ep-badge.credit {
  font-size: 15px;
  padding-top: 7px;
  padding-bottom: 7px;
}
*/
#sidebar a.credit-block {
  /*color: #FD9D50;*/
  color:  var(--main-theme-color);
}
#sidebar a.credit-block:hover {
  text-decoration: none;
  /*color: #c86b1e;*/
  color: var(--main-theme-color-dark);
}
#sidebar .credit-amount {
  font-weight: bold;
  font-size: 1.1rem;
  padding-top: 5px;
}
#sidebar .separator {
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  margin-right: 10px;
  margin-left: 10px;
}
/* notificaciones: se reemplazó #sidebarCollapse por .navbar-mobile-actions como elemento
   posicionado, para poder alinear el botón Menú junto a la campana (mobile) con flexbox.
   Reglas originales comentadas abajo por si se necesita restaurar. */
/*
#sidebarCollapse {
  position: absolute;
  left: 20px;
}
*/
.navbar-mobile-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* mediaqueries ----------------------------------------------------- */

@media (max-width: 767.98px) {
  /* notificaciones: 767.98px (no 768px) para no coincidir con navbar-expand-md de
     Bootstrap, que activa el nav de escritorio (selector de franquicia incluido) desde
     min-width:768px. A 768px exacto los dos rangos se traslapaban: aparecía el selector
     de franquicia (contenido desktop) a la vez que .navbar-mobile-actions seguía en
     modo mobile, chocando con el botón Menú. */
  #sidebar {
    margin-left: -250px;
  }
  #sidebar.active {
    margin-left: 0;
  }
  /*
  #sidebarCollapse span {
    display: none;
  }
  */
  /*
  #sidebarCollapse {
    right: 20px;
  }
  */
  .navbar-mobile-actions {
    position: absolute;
    right: 20px;
  }
  #sidebar {
    position: fixed;
    z-index: 30;
  }
  /* On mobile, keep the navbar in the same positioning scheme (fixed) as
     the sidebar so both stay anchored to the same viewport reference while
     scrolling the main content; mixing sticky + fixed here is what let the
     sidebar render over the navbar mid-scroll. */
  .sticky-top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }
  .wrapper {
    padding-top: 65.31px;
  }
  /* notificaciones: .navbar-mobile-actions quedó position:absolute (fuera del flex del
     navbar), así que el logo ya no cede espacio para él. En pantallas angostas (320px)
     el logo (150px default, hasta 300px en logos de cliente) invade la zona reservada
     para campana + Menú. Le ponemos un tope para que nunca choque. */
  .navbar-brand {
    max-width: calc(100% - 150px);
    overflow: hidden;
  }
  .navbar-brand img {
    max-width: 100%;
    height: auto;
  }
}
@media (min-width: 768px) {
  /* notificaciones: en escritorio .navbar-mobile-actions ya no necesita position:absolute
     (eso era solo para anclarlo a la derecha en mobile) — se queda en el flex normal del
     navbar, junto al logo, y #navbarSupportedContent (flex-grow:1) empuja el resto. */
  .navbar-mobile-actions {
    margin-right: 16px;
  }
}

@media (min-width: 768px) AND (max-width: 768px) {
  #navbarSupportedContent a#navbarDropdown {
    display: none;
  }
}