@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


.search-icon {
  margin: 4px 0 0 6px;
  width: 20px !important;
  /* Cambia el tamaño del ancho */
  height: 20px !important;
  /* Cambia el tamaño del alto */
  cursor: pointer;
}


.user-info {
  display: flex;
  align-items: center;
  /* Alinea verticalmente los elementos */
}

.user-info__left {
  margin-right: 10px;
  /* Espacio entre la imagen y el texto */
}

.user-info__right {
  flex-grow: 30;
  /* Incrementa el espacio que ocupa el texto */
}

.user-info__right2 {
  margin-left: auto;
  padding-left: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 120px;
}



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  --font-primary: 'Roboto', sans-serif;
  --font-size: 24px;
  --bg-primary: #E9EAE4;
  --font-color: #000;
  --logo-dot-color: #f1928D;
  font-size: 20px;
}

body {
  font-family: var(--font-primary) !important;
  background-color: var(--bg-primary);
  font-size: var(--font-size) !important;
  color: var(--font-color) !important;
  fill: var(--font-color) !important;
}

/*ESTILOS AGREGADOS PARA BLOGUI */
.imagen_perfil_header2 {
  margin-top: 5px;
  position: relative;
  display: inline-block;
  width: 80px;
  height: 85px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border-radius: 10%;
}

.nomybutton {
  display: flex;
  margin-bottom: -10px;
  width: 100%;
  gap: 18px;
}

.nomybutton p {
  text-align: left;
}

.seguidoscomtxt {
  margin-left: 8px;
  padding: 2px 2px;
  color: #000;
  text-align: justify;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dark .seguidoscomtxt {
  margin-left: 8px;
  color: white;
  text-align: justify;
  padding: 2px 2px;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.seguidoscomtxt2 {
  font-style: italic;
  cursor: pointer;
  font-size: 10px;
  margin-top: 8px;
}

.dark .seguidoscomtxt2 {
  color: white;
}

.font-tinos2 {
  font-size: 18px !important;
  font-weight: 500;
  width: 100%;
}

.seguidoscomtxt3 {
  font-size: 13px !important;
  margin-top: 7px;
  display: flex;
  width: 100%;
}

.foto_comunidad {
  display: flex;
  width: 30%;
}

.articles-container2 {
  width: 105%;
  height: auto;
  border-radius: 12px;
  color: white;
  font-size: 10px;
  border: 0px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 35px;
}

.login-button {
  width: 219.364px;
  height: 38.5714px;
  text-align: center;
  text-size-adjust: 100%;
  background-color: #fff;
  border: solid 0.714286px rgb(218, 220, 224);
  border-radius: 4px;
  color: black !important;
  font-weight: normal !important;
  text-shadow: none !important;
  -webkit-text-fill-color: black !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.google-button {
  width: 219.364px;
  height: 38.5714px;

  background-color: #fff;
  border: solid 0.714286px rgb(218, 220, 224);
  border-radius: 4px;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 8px auto;
  gap: 10px;

  color: black !important;
  font-weight: normal !important;
  text-shadow: none !important;
  -webkit-text-fill-color: black !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;

}


.google-button span {

  font-size: 15px !important;
  text-align: center;
  font-weight: 500;

}

.popup-container__buttons2 {
  display: flex;
  justify-content: flex-start;
}

.semi-round2 {
  border-radius: 15px;
  border: none;
  width: 64px;
  height: 20px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #848484;
  margin-top: 5px;
}

.semi-round2 span {
  font-size: 10px;
  cursor: pointer;
}

.botonfoll {
  font-size: 10px !important;
  text-align: center !important;
  line-height: 1 !important;
}

.semi-round2 p {
  font-size: 8px;
  margin: 0;
  color: #ea806e;
}

.semi-round2 a {
  text-decoration: none;
  color: #000;
}

/*FIN ESTILOS AGREGADOS PARA BLOGUI */

p {
  font-size: 24px;
}

h1 {
  font-size: 80px;
  margin-bottom: 0.5em;
}

h2 {
  font-size: 60px;
  margin-bottom: 0.5em;
}

h3 {
  font-size: 48px;
  margin-bottom: 0.5em;
}

h4 {
  font-size: 40px;
  margin-bottom: 0.5em;
}

h5 {
  font-size: 30px;
  margin-bottom: 0.5em;
}

h6 {
  font-size: 24px;
  margin-bottom: 0.5em;
}

main {
  /* margin-top: 8%; */
}

.font-montserrat {
  font-family: 'Montserrat', sans-serif !important;
}

.font-tinos {
  font-family: 'Tinos', serif !important;
}

.font-roboto {
  font-family: 'Roboto Serif', sans-serif !important;
}

.font-roboto_ {
  font-family: 'Roboto', sans-serif !important;
}

.dark {
  --bg-primary: #363636;
  --font-color: #F2EFE6;

}

.dark nav svg {
  fill: #F2EFE6;
}

.icon-costum-comment path{
  fill: #f1928D !important;

}

.dark .nav-main {
  background-color: #171717;
  color: #F2EFE6;
}

.dark .menu-categories li a {
  box-shadow: none;
}

.dark .bg-1 {
  background-color: #F2EFE6;
  color: black;
}

.none {
  display: none !important;
}

.auto {
  width: auto !important;
}

/**
* NAV *             -> aprox. line 112 
* Banner *          -> aprox. line 212
* Buttons *         -> aprox. line 232
* Inputs - Text *   -> aprox. line 277
* Hero *            -> aprox. line 307
* Hero Article *    -> aprox. line 353
* Categorias *      -> aprox. line 417
* Articles *        -> aprox. line 519
* Login *           -> aprox. line 658
* Footer *          -> aprox. line 740
* Price Elements *  -> aprox. line 845
* Create Articles * -> aprox. line 965
* CKEditor *        -> aprox. line 1061
* Article View *    -> aprox. line 1116
* Media Queries *   -> aprox. line 1135


*/
/* ================= NAV ================= */
#logo {
  width: 126px;
  height: auto;
  object-fit: cover;

}

#logo path#change {
  fill: #000;
}

.nav-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #F2EFE6;
  ;
  height: 101px;
  color: #000;
  top: 0;
  position: fixed;
  z-index: 900;
}

.nav-main img {
  width: 126px;
  object-fit: cover;
}

@media (max-width: 400px) {
  .nav-main img {
    width: 100px;
  }
}

.nav-dark {
  background-color: #000 !important;
  color: #F2EFE6;

}

.nav-dark a path {
  fill: #F2EFE6;
}

.nav-main input {
  margin-left: 10px;
}

#nav-left {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  margin: 0 10px;
}

#nav-right {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  margin: 0 10px;

}

#nav-right>* {
  margin: 0 10px;
}

#nav-right a {
  display: flex;
  align-items: center;
  justify-content: center;
}

#nav-right a img {
  width: 40px;
}

#read {
  background-color: #F8F8F8;
  color: #848484;
  padding: 10px 30px;
  border: 1px solid #F8F8F8;
  width: 215px;
  height: 32px;
  font-size: 12px;
  border-radius: 20px;
}

#read:placeholder-shown {
  color: #848484;
}

#read::placeholder {
  color: #848484;
}

#read:focus {
  outline: none;
  border: 1px solid #F1928D;
  transition: border 0.5s ease-in-out;
}

#read1 {
  background-color: #F8F8F8;
  color: #848484;
  padding: 10px 30px;
  border: 1px solid #F8F8F8;
  width: 215px;
  height: 32px;
  font-size: 12px;
  border-radius: 20px;
}

#read1:placeholder-shown {
  color: #848484;
}

#read1::placeholder {
  color: #848484;
}

#read1:focus {
  outline: none;
  border: 1px solid #F1928D;
  transition: border 0.5s ease-in-out;
}

.h-icon {
  cursor: pointer;
}

.h-icon,
.h-icon svg,
.h-icon,
.h-icon * svg {
  transition: all 150ms ease-in;
}

.h-icon:hover {
  color: #f1928d;
  fill: #f1928d;

}

.h-icon:hover,
.h-icon:hover>svg,
.h-icon:hover>span svg {
  fill: #f1928d !important;
}

.btn-login,
.btn-register {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-login {
  border: 1px solid #EA806E !important;
  color: #CCC !important;
}

.btn-register {
  background-color: #FEFAFA;
  color: #848484 !important;
}


/** Banner*/
#title-container {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: calc(100vh - 101px);
  padding: 20px;
  margin-top: 101px;
  background-color: #000;
  color: #fff;
}

img.banner-blogui {
  width: 100%;
  height: auto;
  overflow: hidden;
  object-fit: cover;
}

/*  Buttons **/
button {
  cursor: pointer;
}

.semi-round {
  border-radius: 15px;
  border: none;
  width: 64px;
  height: 30px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #848484;
}

.large-button {
  width: 192px;
  height: 32px;
  font-size: 18px;
  background-color: #D9D9D9;
}

.orange-button {
  border: 1px solid #F1928D;
  background-color: transparent;
}

.semi-round span {
  font-size: 12px;
  cursor: pointer;
}

.round {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  margin-left: -20px !important;
}

.btn-inicio {
  font-size: 12px;
}

/** Input - TEXT */
.input-txt {
  width: 340px;
  height: 40px;
  padding: 0px 5px;
  border: none;
  color: #000000;
}

.input-txt::placeholder {
  color: #D6D5D5;
}

textarea.input-txt {
  padding: 5px;
  text-align: start;
  margin: 0px;
  height: 300px;
  resize: none;
}

.border-bottom {
  border-bottom: 1px solid #D6D5D5 !important;
}

.input-txt:focus {
  outline: none;

}

/* ===================Hero =================== */

.hero {
  display: flex;
  flex-direction: column;
  padding: 0px 20px;
  margin: 40px 30px;
  overflow: hidden;

}

.hero__title::before {
  content: '';
  top: -20px;
  position: absolute;
  width: 200px;
  height: 2px;
  border-radius: 1px;
  background-color: #D6D5D5;
  z-index: 100;
}

.hero__title {
  position: relative;
  margin-top: 20px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: start;

}

.hero__title h1 {
  margin-top: 15px;
}

.hero__desc {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 0px 20px;
}

.hero__desc p {
  max-width: 650px;
}

/* =================== Hero articles======================== */

#hero-articles {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 1000%;
  height: auto;
  padding: 10px;
  padding-top: 40px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.hero-article {
  position: relative;
  width: 220px;
  height: 100%;
  margin: 10px;
  text-align: center;
  padding: 1px;
}

.hero-text {
  width: 450px;
  height: 200px;
  margin: 10px;
  padding: 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  text-align: center;
}

.hero-text p {
  font-size: 20px;
  height: 80px;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.hero-text a {
  font-size: 20px;
  height: 80px;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.menu-configuracion {}

.progress-container {
  width: 100%;
  height: 6px;
  background-color: #CECCCC;
  border-radius: 3px;
  position: relative;
  margin-top: 20px;
}

.progress-indicator {
  height: 100%;
  background-color: #F1928D;
  width: 0;
  border-radius: 3px;
  position: absolute;
  left: 0;
  transition: width 0.3s ease;
}

.divider {
  height: 0.1px;
  background-color: #ccc;

}

.abajoProgress {
  display: flex;
  flex-direction: column;

}

/** Categorias **/
#categories {
  display: flex;
  padding: 10px;
  color: #000;
  width: auto;
  margin: 0px auto 0px auto;
}

.menu-categories {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 10px;
  padding-bottom: 30px;
  color: #000;
  width: 367.5px !important;
  height: 49px !important;
  margin: 0px auto;
  overflow-y: hidden;
  overflow-x: auto;
}

.categories-no-session {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 10px;
  padding-bottom: 30px;
  color: #000;
  width: 570px;
  margin: 0px auto;
  overflow-y: hidden;
  overflow-x: auto;
  border-radius: 15.08px !important;
}

.dark .categories-no-session li a {
  box-shadow: none;
}

.categories-no-session::-webkit-scrollbar,
.blogui-scroll::-webkit-scrollbar {
  height: 2px;
  width: 2px;
}

/* Color del fondo de la barra de scroll */
.categories-no-session::-webkit-scrollbar-track,
.blogui-scroll::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

/* Color del thumb de la barra de scroll */
.categories-no-session::-webkit-scrollbar-thumb,
.blogui-scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #ccc;
}

/* Color del thumb de la barra de scroll cuando se está haciendo scroll */
.categories-no-session::-webkit-scrollbar-thumb:hover,
.blogui-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #a9a9a9;
}

/* Ocultar la flecha de arriba en la barra de scroll */
.categories-no-session::-webkit-scrollbar-button:start:decrement,
.blogui-scroll::-webkit-scrollbar-button:start:decrement {
  display: none;
}

/* Ocultar la flecha de abajo en la barra de scroll */
.categories-no-session::-webkit-scrollbar-button:end:increment,
.blogui-scroll::-webkit-scrollbar-button:end:increment {
  display: none;
}


.categories-no-session::after {
  content: '';
  position: absolute;
  display: block;
  width: 90%;
  height: 1px;
  bottom: -10px;
  background-color: #D6D5D5;
}

.categories-no-session li {
  position: relative;
  list-style: none;
  width: 104px;
  min-width: 104px;
  height: 38px;
  display: flex;
  align-items: center;
  margin: 0 4px;
  background-color: transparent;
  /*background-color: #F2EFE6; */
}

.categories-no-session li:after {
  content: '';
  position: absolute;
  display: block;
  width: 0.5px;
  height: 90%;
  right: -4px;
  background-color: #D6D5D5;
}

.categories-no-session li a {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 1px;
  font-size: 10px;
  /*box-shadow: 0px 4px 4px 0px #D6D5D5;*/
  cursor: pointer;
  border-radius: 20%;
  color: rgb(0, 0, 0);
  text-decoration: none;
}

.categories-no-session li a:hover {
  color: gray;
}

.dark .categories-no-session li a {
  color: #ffffff;
}

.dark .categories-no-session li a:hover {
  color: gray;
}

.categories-my-profile {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 10px;
  padding-bottom: 30px;
  color: #000;
  width: 570px;
  margin: 0px auto;
  overflow-y: hidden;
  overflow-x: auto;
  border-radius: 15.08px !important;
}

.dark .categories-my-profile li a {
  box-shadow: none;
}

.categories-my-profile::-webkit-scrollbar,
.blogui-scroll::-webkit-scrollbar {
  height: 2px;
  width: 2px;
}

/* Color del fondo de la barra de scroll */
.categories-my-profile::-webkit-scrollbar-track,
.blogui-scroll::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

/* Color del thumb de la barra de scroll */
.categories-my-profile::-webkit-scrollbar-thumb,
.blogui-scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #ccc;
}

/* Color del thumb de la barra de scroll cuando se está haciendo scroll */
.categories-my-profile::-webkit-scrollbar-thumb:hover,
.blogui-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #a9a9a9;
}

/* Ocultar la flecha de arriba en la barra de scroll */
.categories-my-profile::-webkit-scrollbar-button:start:decrement,
.blogui-scroll::-webkit-scrollbar-button:start:decrement {
  display: none;
}

/* Ocultar la flecha de abajo en la barra de scroll */
.categories-my-profile::-webkit-scrollbar-button:end:increment,
.blogui-scroll::-webkit-scrollbar-button:end:increment {
  display: none;
}


.categories-my-profile::after {
  content: '';
  position: absolute;
  display: block;
  width: 90%;
  height: 1px;
  bottom: -10px;
  background-color: #D6D5D5;
}

.categories-my-profile li {
  position: relative;
  list-style: none;
  width: 104px;
  min-width: 104px;
  height: 38px;
  display: flex;
  align-items: center;
  margin: 0 4px;
  background-color: transparent;
  /*background-color: #F2EFE6; */
}

.categories-my-profile li:after {
  content: '';
  position: absolute;
  display: block;
  width: 0.5px;
  height: 90%;
  right: -4px;
  background-color: #D6D5D5;
}

.categories-my-profile li a {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 1px;
  font-size: 10px;
  /*box-shadow: 0px 4px 4px 0px #D6D5D5;*/
  cursor: pointer;
  border-radius: 20%;
  color: rgb(0, 0, 0);
  text-decoration: none;
}

.categories-my-profile li a:hover {
  color: gray;
}

.dark .categories-my-profile li a {
  color: #ffffff;
}

.dark .categories-my-profile li a:hover {
  color: gray;
}

/* Ancho de la barra de scroll */
.menu-categories::-webkit-scrollbar,
.blogui-scroll::-webkit-scrollbar {
  height: 2px;
  width: 2px;
}

/* Color del fondo de la barra de scroll */
.menu-categories::-webkit-scrollbar-track,
.blogui-scroll::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

/* Color del thumb de la barra de scroll */
.menu-categories::-webkit-scrollbar-thumb,
.blogui-scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #ccc;
}

/* Color del thumb de la barra de scroll cuando se está haciendo scroll */
.menu-categories::-webkit-scrollbar-thumb:hover,
.blogui-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #a9a9a9;
}

/* Ocultar la flecha de arriba en la barra de scroll */
.menu-categories::-webkit-scrollbar-button:start:decrement,
.blogui-scroll::-webkit-scrollbar-button:start:decrement {
  display: none;
}

/* Ocultar la flecha de abajo en la barra de scroll */
.menu-categories::-webkit-scrollbar-button:end:increment,
.blogui-scroll::-webkit-scrollbar-button:end:increment {
  display: none;
}


.menu-categories::after {
  content: '';
  position: absolute;
  display: block;
  width: 90%;
  height: 1px;
  bottom: -10px;
  background-color: #D6D5D5;
}

.menu-categories li {
  position: relative;
  list-style: none;
  width: 100px;
  height: 32.04px;
  display: flex;
  align-items: center;
  margin: 0 4px;
  /*background-color: #F2EFE6; */
}

.menu-categories li:after {
  content: '';
  position: absolute;
  display: block;
  width: 0.5px;
  height: 90%;
  right: -4px;
  /*background-color: #D6D5D5;*/
}

.menu-categories li a {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 32.04px;
  margin: 1px;
  font-size: 15px;
  /*box-shadow: 0px 4px 4px 0px #D6D5D5;*/
  cursor: pointer;
  border-radius: 8px;
  color: black;
  text-decoration: none;
}

/*.menu-categories li a:hover{
  color: gray;
}*/
.dark .menu-categories li a {
  color: #363636;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
}

.menu-categories li a {
  color: #fafafa;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
}

.menu-categories a.active-category {
  background: #F1928D;
  color: white;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
}

/*.dark .menu-categories li a {
  color: #ffffff;
}*/
.dark .menu-categories li a:hover {
  text-decoration: none;
}

/* carrusel comunidad mobil */
.categories-comunidad {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 1px;
  background-color: #848484;
  /* Color gris claro */
  border-radius: 8px;
  width: 570px;
  margin: 0 auto;
  overflow-y: hidden;
  overflow-x: auto;
  gap: 12px;
}

.dark .categories-comunidad {
  background-color: #F1F1F1;
  /* Color gris claro */
}

.dark .categories-comunidad li a {
  box-shadow: none;
}

.categories-comunidad::-webkit-scrollbar,
.blogui-scroll::-webkit-scrollbar {
  height: 2px;
  width: 2px;
}

/* Color del fondo de la barra de scroll */
.categories-comunidad::-webkit-scrollbar-track,
.blogui-scroll::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

/* Color del thumb de la barra de scroll */
.categories-comunidad::-webkit-scrollbar-thumb,
.blogui-scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #ccc;
}

/* Color del thumb de la barra de scroll cuando se está haciendo scroll */
.categories-comunidad::-webkit-scrollbar-thumb:hover,
.blogui-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #a9a9a9;
}

/* Ocultar la flecha de arriba en la barra de scroll */
.categories-comunidad::-webkit-scrollbar-button:start:decrement,
.blogui-scroll::-webkit-scrollbar-button:start:decrement {
  display: none;
}

/* Ocultar la flecha de abajo en la barra de scroll */
.categories-comunidad::-webkit-scrollbar-button:end:increment,
.blogui-scroll::-webkit-scrollbar-button:end:increment {
  display: none;
}


.categories-comunidad::after {
  content: '';
  position: absolute;
  display: block;
  width: 90%;
  height: 1px;
  bottom: -10px;
  background-color: #D6D5D5;
}

.categories-comunidad li {
  position: relative;
  list-style: none;
  width: 104px;
  min-width: 104px;
  height: 38px;
  display: flex;
  align-items: center;
  margin: 0 4px;
  /*background-color: #F2EFE6; */
}

.categories-comunidad li:after {
  content: '';
  position: absolute;
  display: block;
  width: 0.5px;
  height: 90%;
  right: -4px;
  /*background-color: #D6D5D5;*/
}

.categories-comunidad li a {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 32.04px;
  margin: 1px;
  font-size: 15px;
  /* box-shadow: 0px 4px 4px 0px #D6D5D5; */
  cursor: pointer;
  border-radius: 8px;
  color: black;
  text-decoration: none !important;
}

.categories-comunidad li a:hover {
  color: gray;
}

.dark .categories-comunidad li a {
  color: #ffffff;
}

.dark .categories-comunidad li a:hover {
  color: gray;
}

/** ================================= Articles ===================================== **/
.articles {
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 10px;
}

.articles._2columns p {
  font-size: 10.82px;
}

.articles.articles._2columns h5 {
  font-size: 19.38px;
}

.articles._2columns span {
  font-size: 7px;
}

.articles._2columns {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin-top: 0px;
  padding-top: 0px;
}

.articles._2columns>.resume-article.large,
.resume-article-nosession.large,
.articles._2columns>.resume-article:nth-child(even):last-child,
.resume-article-nosession:nth-child(even):last-child {
  border: none;
  width: auto;
  max-width: 900px;
  min-width: 500px;
}

.articles._2columns>.resume-article.large .content-article {
  width: 70%;
  padding: 10px;
}

.articles._2columns>.resume-article-nosession.large .content-article {
  width: 70%;
  padding: 10px;
}

.articles._2columns>.resume-article {
  position: relative;
  justify-content: center;
  align-items: center;
  margin: 0;
  min-height: 150px;
  max-height: 185px;
  height: auto;
  box-shadow: none;
}

.articles._2columns>.resume-article-nosession {
  position: relative;
  justify-content: center;
  align-items: center;
  margin: 0;
  min-height: 150px;
  max-height: 185px;
  height: auto;
  box-shadow: none;
}

.articles._2columns>.resume-article:nth-child(even):not(.large)::after {
  position: absolute;
  content: '';
  width: 1px;
  height: 100%;
  right: -2px;
  background-color: #a9a9a9;
}

.articles._2columns>.resume-article-nosession :nth-child(even):not(.large)::after {
  position: absolute;
  content: '';
  width: 1px;
  height: 100%;
  right: -2px;
  background-color: #a9a9a9;
}

.articles._2columns>.resume-article-nosession :not(.large)::before {
  position: absolute;
  content: '';
  width: 101%;
  height: 1px;
  top: 0px;
  background-color: #a9a9a9;
}

.articles._2columns>.resume-article:not(.large)::before {
  position: absolute;
  content: '';
  width: 101%;
  height: 1px;
  top: 0px;
  background-color: #a9a9a9;
}

.articles._2columns>.resume-article>.content-article {
  justify-content: center;
  height: 165px;
  width: 455px;
}

.articles._2columns>.resume-article-nosession>.content-article {
  justify-content: center;
  height: 165px;
  width: 455px;
}

.resume-article-nosession,
.resume-article {
  display: flex;
}

.resume-article p,
.resume-article u>i {
  align-items: center;
  display: flex;
  font-size: 13.22px;
}

.resume-article-nosession p,
.resume-articl-nosession u>i {
  align-items: center;
  display: flex;
  font-size: 13.22px;
}

.content-article {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 440px;
  height: 220px;
}

.image-article {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 205px;
}

.image-article img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.body-article {
  display: flex;
  justify-content: flex-start;
  text-align: justify;
  align-items: center;
  font-size: 14px;
  padding-top: 13px;
  margin-bottom: 8px;
}

.body-article p {
  margin-left: 1px;
  color: #000;
}

.dark .body-article p {
  color: white;
}

.body-article p {
  display: -webkit-box;
  /* Permite limitar líneas */
  -webkit-line-clamp: 1;
  /* Limita a 2 líneas */
  -webkit-box-orient: vertical;
  /* Dirección del texto */
  overflow: hidden;
  /* Oculta el texto excedente */
  text-overflow: ellipsis;
  /* Agrega los puntos suspensivos */
  max-height: 3.2em;
  /* Ajusta la altura máxima para coincidir con 2 líneas */
  line-height: 1.6em;
  /* Define la altura de cada línea */
}

.body-article-popup {
  display: flex;
  justify-content: flex-start;
  text-align: justify;
  align-items: center;
  margin: 20px 0px 20px 0px;
  font-size: 12px;
}

.fecha-article {
  display: flex;
  justify-content: flex-start;
  padding-left: 0px;
  margin-bottom: 2px;
  margin-left: 2px;
}

.fecha-article p {
  border-bottom-width: 11px;
  margin-bottom: 0px;
  font-size: 13.2px;
  color: #000;
}

.dark .fecha-article p {
  color: white;
}

.titulo-article {
  padding-bottom: 11px;
  margin: 0;
}

.titulo-article h5 {
  margin-bottom: 0px;
  font-weight: 300;
  font-size: 22.22px;
  color: #000;
}

.dark .titulo-article h5 {
  color: white;
}

.menu-header__user p {
  margin-bottom: 0px;
}

.titulo-article .link {
  text-decoration: none;
  color: var(--font-primary);
}

.author-article {
  font-size: 14px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-bottom: 10px;
}

.author-article img {
  width: 35.62px !important;
  height: 35.62px !important;
  object-fit: cover;
  border-radius: 15% !important;
  margin-right: 4px;
  margin-left: 1px;
  margin-top: 10px;
  margin-bottom: 10px;
  -webkit-border-radius: 15%;
  -moz-border-radius: 15%;
  -ms-border-radius: 15%;
  -o-border-radius: 15%;
}

.author-article p {
  margin-bottom: 0px;
  color: #000;
}

.dark .author-article p {
  color: white;
}

.author-article a {
  color: #000 !important;
}

.dark .author-article a {
  color: white !important;
}

.credits-article {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}




.credits-article {
  display: flex;
  align-items: center;
  margin: 6px 0;
  max-height: 20px;
}

.sponsor-article {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 20px;
  height: 20px;
  margin: 6px 0;
}

.line {
  width: 1px;
  height: 80%;
  background-color: #b9b9b9;
  left: 0;

}

.footer-article {
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.social-icons,
.info-article {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  height: 100%;

}

.social-icons a,
.info-article a {
  height: 20px;
  display: flex;
  align-items: center;
  margin-right: 10px;
  text-decoration: none;
  color: #8c8a8a;
  cursor: pointer;
  user-select: none;


}

.social-icons a span,
.info-article a span {
  margin-left: 5px;
  font-size: 12px;
  font-style: italic;
}

/* =================== Login ==================================*/
.wrapp {
  display: flex;
  justify-content: space-between;
}

.banner,
.form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50%;
  height: 100vh;
}

.banner h6 {
  font-weight: 400;
}

.input-form {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.password-form {
  display: flex;
  flex-direction: row;
  position: relative;
  margin: 14px 0;
  width: 340px;
}

.error-msg {
  position: absolute;
  padding: 3px;
  border-radius: 3px;
  width: 100%;
  top: 100%;
  z-index: 1000;
  color: #ed6b64 !important;
  font-size: 9px;
}

.form a,
.form p {
  color: #000;
  font-weight: 400;
  margin: 5px 0;
}

.form-registro {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.form_link {
  font-size: 12px;
}

.form .banner-blogui {
  display: none;
}

.header-form {
  text-align: center;
  padding: 20px;
  position: relative;
}

.header-form h2 {
  position: relative;
}

.header-form h2:after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: -10px;
  width: 70%;
  height: 1px;
  background-color: #000;
}

.input-form label {
  font-weight: bold;
}

.checkbox-login label {
  font-weight: bold;
}

.banner {
  background-color: #363636;
  align-items: center;
}

/* =================== Footer ==================================*/

.content-footer {
  margin-top: 20px;
  width: 100%;
  background: #171717;
  height: 335px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10 !important;
  position: relative;
}

.content-footer .logo {
  width: 250px;
  display: flex;
  align-items: center;
}

.logo a img {
  width: 100%;
  object-fit: cover;
}

.left-footer,
.right-footer {
  margin: 0 30px;
}

.left-footer {
  padding-top: 25px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 100%;

}

.right-footer {
  padding: 40px 0px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 100%;

}

.policy {
  color: #D9D9D9;
  margin: 5px 0px;
}

.policy a {
  font-size: 20px;
  color: #D9D9D9;
  text-decoration: none;

}

.title-news {
  color: #D9D9D9;
  margin-bottom: 15px;
}

.title-news h6 {
  font-weight: 500;
  margin: 0;
}

.input-news {
  width: 460px;
  height: 60px;
  position: relative;
  color: #D9D9D9;
  margin-bottom: 5px;
}

.input-news input {
  width: 100%;
  height: 100%;
  border: 1px solid #D9D9D9;
  background: none;
  color: #D9D9D9;
  padding: 0px 100px 0px 20px;
}

.input-news button {
  height: 100%;
  position: absolute;
  right: 0;
  border: none;
  border-left: 1px solid #D9D9D9;
  background: none;
  color: #D9D9D9;
  padding: 0px 15px;
}

.social-icons__footer {
  display: flex;
  align-self: start;
  margin: 5px 5px;
  overflow: hidden;
}

.social-icons__footer a {
  width: 60px;
  height: 60px;
  padding: 5px;
  display: flex;
  align-items: center;
}

/* =================== Prices Elements ==================================*/
.price__main {
  padding: 20px 10px;
  display: flex;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
}


.price-element svg {
  width: 24px;
  height: 24px;
}

.bg-1 {
  background-color: #363636 n;
  fill: #EA806E !important;
}



.bg-2 {
  background-color: #EA806E;
}

.bg-2 .feature__icon svg {
  fill: #D6D5D5 !important;
}

.price-element {
  width: 447px;
  height: 477px;
  margin: 10px 20px;
  position: relative;
  overflow: hidden;
}

.price-container {
  width: 100%;
  height: 477px;
  border-radius: 10px;
  padding: 0 30px;
  color: #F2EFE6;


}

.price-table {

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;

}

.price-table__header,
.price-table__price,
.price-table__features,
.price-table__footer {
  padding-top: 40px;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

.price-table__footer {
  padding-bottom: 40px;
}

.price-table__price span,
.price-table__header h3 {
  font-size: 40px;
}

.price-table__features {
  position: relative;
  flex-direction: column;
  list-style: none;
  display: flex;
}

.price-table__feature {
  width: 100%;
  position: relative;
  display: flex;
  margin-bottom: 10px;
  align-items: start;
  text-align: left;
}

.price-table__button {
  max-width: 150px;
  max-height: 40px;
  padding: 10px 20px;
  border: none;
  letter-spacing: 3px;
  cursor: pointer;
}

.feature__icon {
  width: 26px;
  height: 26px;
  margin-right: 10px;
}

.feature__icon svg {
  width: 100%;
}

.bg-1 .feature__icon svg {
  fill: #EA806E !important;
}

.feature__text {
  width: 100%;
}

/*  =============================== Create Articles =================================*/
.articulo__input {
  width: 100%;
  font-weight: 700;
  background: none;
  border: none;
  color: #000000;
  padding: 0 5px;
  font-size: 30px;
  box-sizing: border-box;
  height: auto;
  resize: none;
  overflow: hidden;
  min-height: 2em;
  /* Reducir la altura mínima */
  /*margin-top: 25px !important;*/
  margin-bottom: -40px;
}

.dark .articulo__input {
  color: #C3C3C3;
}

.dark .articulo__input .articulo__input_titulo {
  color: #C3C3C3 !important;
}

.articulo__input:focus {
  outline: none;
  /* border: #C3C3C3 1px solid; */

}

.articulo__input::placeholder {
  color: #C3C3C3;
}

.articulo__input:focus::placeholder {
  color: transparent;

}

.articulo__input.articulo__descripcion {
  border-top: 1px solid #a9a9a9;
  font-weight: 400;
  font-size: 24px;
  resize: none;
}

.articulo__input.articulo__titulo {
  font-weight: 400;
  font-size: 30px;
  resize: none;
}

.articulo__input.articulo__contenido {

  font-weight: 400;
  height: 900px;
  font-size: 20px;
  overflow-x: hidden;
}



/* Color de los hipervinculos */
.contenido a {
  color: #f1928D;
  /*text-decoration: none;  elimina el subrayado del enlace */
  font-size: 16px;
}

/*
.contenido a:hover {
  color: #f1928D;
}*/

/* .contenido li {
  list-style-position: inside;
} */


.menu__articulo {
  display: flex;
  list-style: none;
  width: 150px;
  height: 25px;
  align-items: center;
  justify-content: space-evenly;
  background-color: #D9D9D9;
  border-radius: 11px;
}

.menu__articulo__seccion {
  display: flex;
  height: 14px;
  min-width: calc(15px*2);
  align-items: center;
  justify-content: center;


}

.menu__articulo__seccion--icon {
  display: flex;
  align-items: center;
  width: 15px;
  height: 15px;
  justify-content: center;

}

.menu__articulo__seccion--icon a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu__articulo a,
.menu__articulo svg {
  font-size: 14px;
  width: 14px;
  height: 10px;
  color: #696969 !important;
  fill: #696969;
}

.articulo p {
  margin-top: 1em;
  margin-bottom: 1em;
}

.articulo h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  margin-top: 1.5em;
  margin-bottom: 1em;
}

.menu_seccion__line {
  position: relative;
}

.menu_seccion__line::after {
  content: "";
  position: absolute;
  width: 1px !important;
  height: 100%;
  background-color: #FFF;
  border-radius: 1px;
  top: 0px;
  right: 0px;
}

.container__crear__articulo {
  width: 750px;
  padding: 2px;
  margin-top: 140px;
  margin-bottom: 60px;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
}

.view-programar {
  top: 0px;
  background-color: #727272e6;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  z-index: 899;
  color: #171717;
}

.card-programar {
  position: relative;
  width: 314px;
  /*height: 202px;*/
  background-color: #FEFAFA;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /*padding: 0px 13px;*/
  align-items: center;
  height: auto;
  padding: 13px;
}

.card-programar p.title {
  margin-top: 17px;
  margin-bottom: 11px;
  font-size: 13px;
  font-weight: 600;
}

.card-programar p.descripcion {
  font-size: 11px;
  font-weight: 400;
  margin-bottom: 32px;
}

.card-programar .buttons-programar input[type="button"] {
  cursor: pointer;
  /*width: 60px;
  height: 20px;*/
  font-size: 11px;
  margin: 0px 12px;
  color: #FEFAFA;
  /*padding: 0px;*/
  width: auto;
  height: auto;
  padding: 5px 10px;

}

.form__input option[value=""] {
  color: #999;
  /* Color gris para el texto de previsualización */
  font-style: italic;
  /* O estilo cursivo para distinguirlo */
}

.inputs-programar {
  width: 236px;
  display: flex;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 23px
}

.buttons-programar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.inputs-programar input {
  width: 50%;
  height: 25px;
  font-size: 9px;
  text-align: center;
}

.inputs-programar select {
  width: 37%;
  height: 27px;
  font-size: 11px;
  text-align: center;
}

.inputs-programar option {
  padding: 16px;
  font-size: 10px;
  border-radius: 12px;
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0px solid;
  /* box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);*/
  ;
  box-shadow: none !important;
}

/* ================================ CKeditor articulo =================================  */
#editor {
  height: auto;
  padding-bottom: 60px;
  min-height: 80px;
  /* max-height: 560px;  */
  margin-bottom: 60px;
}

.editor-buttons {
  width: 100%;
  height: 59px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  color: #F8F8F8;
  bottom: 0px !important;
  left: 0;
  background-color: transparent;
  z-index: 999;
}

#editor a {
  text-decoration-color: #E77069;
  color: #E77069;
  font-size: 20px !important;
}

#editor p {
  font-size: 20px !important;
}

#editor p i {
  font-size: 20px !important;
}

#editor p strong {
  font-size: 20px !important;
}

#editor ul li {
  font-size: 20px !important;
}

.contenido a {
  text-decoration-color: #E77069;
  color: #E77069;
  font-size: 20px !important;
}

.contenido p {
  font-size: 20px !important;
}

.contenido p i {
  font-size: 20px !important;
}

.contenido p strong {
  font-size: 20px !important;
}

.contenido ul li {
  font-size: 20px !important;
}

.editor-buttons button {
  background-color: #363636;
  color: #F0F0F0 !important;
  width: auto;
  padding: 0 8px;
  margin: 0 31px;
}

.dark .editor-buttons button {
  background-color: #F0F0F0;
  color: #363636 !important;
  width: auto;
  padding: 0 8px;
}

.editor-buttons button span {
  font-size: 10px;
  width: 64px;
  margin: 0px 0px;
}

.editor-buttons :nth-child(2) span {
  width: 81px;
  font-size: 14px !important;
  color: #FFF;
}

.dark .ck-editor__editable_inline {
  /* border: 1px solid #d6d5d5 !important; */
  border: none !important;
}

.ck-editor__editable_inline {
  /* border: 1px solid #d6d5d5 !important; */
  border: none !important;
}

.ck-focused {
  box-shadow: none !important;
}

.ck::after,
.ck::before {
  display: none !important;
}

.ck-powered-by {
  display: none !important;
}

.ck-fake-selection-container,
.ck.ck-reset_all.ck-widget__type-around {
  display: hidden !important;
}

/** ============== Tagify */
.tags {
  border-top: 1px solid #aaaaaa17;
  padding-top: 5px;
  margin-top: 40px;
  display: flex;
  width: 100%;
  height: auto;
  flex-wrap: wrap;
  overflow: hidden;
}

.tags a {
  color: #fdbbb0;
  margin-left: 5px;
  font-size: 15px;
}

.tagify {
  width: 100% !important;
  --tag-bg: #F2EFE6;
  --tag-hover: transparent;
  --tag-remove-bg: #e5d6d64d;
  border: none;
  color: #000000;
}

.dark .tagify {
  --tag-bg: #3d3838;
  color: #CCC !important;
}

.dark .tagify__tag-text {
  color: #CCC !important;
}

.tagify--focus {
  --tags-border-color: #f1928d;
}

.tagify__tag>div::before {
  border-radius: 20px;
  border: 1px solid #f1928d;
}

.tagify__tag-text {
  color: #000000;
}

.tagify--empty .tagify__input::before {
  color: #CfCfCf;
}

.dark .tagify__input::before {
  --placeholder-color-focus: #AAAA;
}

.dark .tagify__tag__removeBtn {
  color: #F2EFE6;
}

/* ============== Article View ============== **/

.article {
  margin-top: 40px;
  width: 55%;
  margin-bottom: 40px;
}

.dark .article {
  color: #C3C3C3 !important;
}

.contenido p,
.contenido p i,
.contenido p a {
  font-weight: 400 !important;
}

.contenido p strong {
  font-weight: 700 !important;
}

.article__header p {
  margin-top: 20px;
  font-weight: 400;
  margin-left: 0px;
}

.article__header h5 {
  margin: 0px;
  font-size: 37px;
  font-weight: 700;
}

div.user-info {
  display: flex;
  margin-top: 13px;
}

.user-info__left img {
  width: 61px;
  height: 61px;

}

.user-info__left {
  margin-right: 19px;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.user-info__right {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.user-info__right p {
  font-size: 16px;
  margin-bottom: 0px;
  margin-right: 10%;
  margin-top: 2px !important;
}

.user-info__right .user_name {
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 2px;
}

.user-info__right .user_biografia p {
  font-weight: 400;
}

.article__separator {
  margin-top: 15px;
  margin-bottom: 15px;
  height: 23px;
  background-color: #e1e1e1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border: none;
}

.article_color {
  background-color: #e1e1e1
}

.dark .article_color {
  background-color: #565656;
}

.article__separator-icons {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.separator-icon {
  display: flex;
  align-items: center;
  gap: 4px;
}

.separator-icon .icon {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  line-height: 1;
  color: #B9B9B9 !important;
  flex-shrink: 0;
}

.separator-icon .icon svg {
  width: 15px;
  height: 15px;
  fill: currentColor !important;
  stroke: none;
  flex-shrink: 0;
}

.separator-icon a#coment {
  gap: 4px;
}

.separator-icon a#coment span {
  font-size: 11px;
  line-height: 1;
  color: #AAAA;
}

.separator-icon a[onclick*="abrirModal"] svg {
  fill: #AAAA;
  stroke: none;
}

.contenido {
  display: flex;
  flex-direction: column;
}

.contenido figure {
  position: relative;
  padding: 3px;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  background: #00000004;
  justify-content: center;
}

figure img {
  display: inline-block;
  width: 80%;
  object-fit: contain;
}

figure .btn-ocultar {
  background: none;
  border: none;
  color: #ea806e;
  color: #fdbbb0;
  font-size: 10px;
  text-decoration: underline;
}

/* ================================ user =============================*/
.popup-container {
  width: 360px;
  height: 85%;
  position: fixed;
  z-index: 100000;
  background-color: #DEDEDE;
  border-radius: 12px;
  right: 20px;
  top: 110px;
}

.popup-content {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
  margin-top: 40px;
  max-height: 180px;

}

.popup-content p {
  color: black;
}

.popup-content a {
  color: inherit;
  text-decoration: none;
  color: black;
}

.popup-content span {
  color: grey;
  font-size: 14px;
}

.info-popup {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  height: 100%;
}

.popup-container-2columns {
  width: 360px;
  height: 148px;
  z-index: 100000;
  background-color: #DEDEDE;
  border-radius: 12px;
  right: 20px;
  top: 110px;
  display: flex;
}

.popup-container__left {
  width: 40%;
  height: 100%;
  overflow: hidden;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.popup-container__img {
  width: 100%;
  height: 100%;
}

.popup-container__img img {
  width: 148px;
  height: 148px;
  object-fit: cover;
}

.popup-container__right {
  position: relative;
  width: 60%;
  height: 100%;
  padding: 15px 25px 15px 15px;
}

.popup-container__right p.name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #171717;
}

.popup-container__right p.user {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: #A5A5A5;
}

.popup-container__body {
  margin-top: 45px;
  display: flex;
  margin-left: -26px;
}

.body__left,
.body__right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}

.body__left p.text,
.body__right p.text {
  width: 100%;
  font-size: 13px;
  font-weight: 400;
  color: #A5A5A5;
  margin: 0;
  display: flex;
  justify-content: center;
}


.popup-button__close {
  top: 10px;
  right: 10px;
  border: none;
  background: none;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  padding: 0;
  position: absolute;
}

.popup-button__floating {
  border: none;
  top: 40%;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  right: -10px;
  transform: translate(50% 50%);
  background-color: #D9D9D9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-container__buttons {
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;
  justify-content: flex-start;
  width: 90%;
  gap: 10px;
}

.popup-article {
  max-height: 35%;
}

/*  VISTA DEL PERFIL */

.cabecera-perfil {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.bio-container {
  display: flex;
  margin-bottom: 4%;
  margin-top: 4%;
  margin-left: 25%;
  margin-right: 20%;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;

}

.vistas-perfil-container {
  display: flex;
  margin-left: 25%;
  margin-top: 5%;
}


.contenedor-botones {
  display: grid;
  width: 50%;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0 auto;
}

.contenedor-botones-borde {
  margin-left: 15%;
  width: 70%;
  color: gray;
  height: 1px;
}

.boton-perfil {
  background-color: #ffffff;
  border: 1px solid #000;
  color: #000;
  padding: 0.7rem 0.7rem;
  font-size: 16px;
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  /* Esquinas superiores redondeadas */
  transition: box-shadow 0.3s, transform 0.3s;
}

.boton-perfil:hover {
  box-shadow: 0 0 10px rgba(211, 118, 118, 0.3);
  /* Sombreado al pasar el ratón */
}

.boton-perfil.activado {
  background-color: #f1928D;
  /* Cambiar el color al hacer clic */
  transform: scale(1.15);
  /* Aumentar tamaño al hacer clic */
}

.boton-perfil:active,
.boton-perfil:focus {
  outline: none;
  /* Eliminar el contorno al hacer clic */
}

.dark .boton-perfil {
  color: black;
}

.dropbtn {
  background-color: #f1928D;
  color: white;
  padding: 12px 26px;
  font-size: 14px;
  /* Incremento del tamaño de la letra en 3px */
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* background-image: url("../images/flecha.svg"); */
  background-repeat: no-repeat;
  background-size: 12px;
  background-position-x: 90%;
  background-position-y: 50%;
  padding-right: 24px;
  border: none;
  margin: 0;
  width: 130px;
  /* Asegura que el botón tenga un tamaño constante */
  text-align: center;
  box-sizing: border-box;
  /* Incluye padding dentro del ancho total */
}

.dropbtn.no-follow {
  background-color: #f1928D;
  color: white;
  border-radius: 20px;
  width: 130px;
  /* Igual ancho que el botón principal */
  padding: 12px 26px;
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #e9857e;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  width: 130px;
  /* Mismo ancho que el botón principal */
  border-radius: 25px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding: 0;
  white-space: nowrap;
  text-align: center;
}

.dropdown-content a {
  color: black;
  padding: 12px 26px;
  font-size: 13px;
  text-decoration: none;
  display: block;
  text-align: center;
  white-space: nowrap;
  border-radius: 20px;
  width: 130px;
  /* Igual ancho que el botón principal */
  box-sizing: border-box;
}

.dropdown a:hover {
  background-color: #ffffff;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #000000;
  overflow: auto;
  border-radius: 30px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 0;
}

.dropdown-menu a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.configIcons {
  display: none;
}

.show {
  display: block;
}

/* ================================ * COMENTARIOS * ====================================*/
.blogui-comentario {
  width: 100%;
  padding: 15px !important;
  max-width: 100%;
  background: none !important;
  margin-top: 20px;
  overflow-y: auto;
  position: static !important; /* Se comporta normalmente en el flujo de la página */
  display: block;
  margin: 0 !important;
}

.dark .blogui-comentario {
  background-color: #3F3D3D;
}

.dark .blogui-comentario .content__comentario a,
.dark .blogui-comentario .content__comentario p,
.dark .blogui-comentario .content__comentario span,
.dark .blogui-comentario .content__comentario a.icon {
  color: white !important;
}

/* Modo claro (por defecto) */
#editor p,
#editor p i,
#editor p strong {
  color: black !important;
}

/* Modo oscuro */
.dark #editor p,
.dark #editor p i,
.dark #editor p strong {
  color: #C3C3C3 !important;
}

.blogui-comentario .btn-option {
  width: 18px;
  height: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border: none;
  background: none;
  margin: 2px;
  fill: rgba(176, 165, 165, 0.637)
}

.blogui-comentario .content__comentario {
  width: 100%;
  /*margin-top: 25px;*/
  /*border-top: 1px solid #a5a5a521;*/
}

.content__comentario .header__comentario {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
}

.content__comentario .header__comentario img {
  width: 40px;
  height: auto;
}

.content__comentario * .user-info {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
}

.content__comentario .user-info p,
.content__comentario .user-info p a {
  font-size: 16px;
}

.content__comentario .body__comentario {
  margin: 10px 0px;
}

.content__comentario .body__comentario p:first-child {
  font-size: 14px;
  font-weight: 400;
}

.content__comentario .user-info p:last-child {
  font-size: 12px;
  font-weight: 300;
}

.sidebar__crear {
  width: 100%;
  right: 0px;
  color: #363636;
  margin-top: 101px;
  position: fixed;
  padding-bottom: 100px;
}

.sidebar__crear svg {
  fill: #363636;

}

.dark .sidebar__crear {
  color: #F2EFE6;
}

.dark .sidebar__crear svg {
  fill: #F2EFE6;

}

.sidebar__header {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 10px;
}

.sidebar__header img {
  margin-inline-end: 10px;
}

.sidebar__nube_txt {
  position: relative;
  width: 100px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: 10px;
}

.sidebar__nube_txt-title {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;

}

.input__border {
  margin-top: 40px !important;
  border-radius: 10px;
  border: 2px solid #363636;
  background: none;
  resize: none;
  margin: 10px;
  padding: 5px;
  font-size: 12px;
  color: #363636;
}

.border-none {
  border: none;
}

.input__border:focus,
.input__border:focus {
  outline: none;

}

.dark .input__border {
  border-color: #FEFAFAFA;
  color: #FEFAFAFA;
}


textarea.input__border {
  height: 150px;
  width: 100%;
}

.sidebar__form__input {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.sidebar__crear label {
  margin: 0px 10px;

}

.sidebar__crear form {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  flex-direction: column;
}

.sidebar__close-btn {
  margin-top: 5px;
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
  fill: #363636;
}

.dark .sidebar__close-btn {
  fill: #FEFAFA;
}

.sidebar__footer_btns {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
}

.btn__border {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 20px;
  margin-bottom: 10px;
  border: 1px solid;
  border-radius: 6px;
  border-color: #363636;
  font-size: 11px;
  color: #363636;
  font-weight: 700;
  background: none;
  text-decoration: none;
  margin: 5px;
}

.dark .btn__border {
  color: #D9D9D9;
  border-color: #D9D9D9;
}

#scrollIzq {
  transform: rotate(90deg);
  cursor: pointer;
  width: 24px;
  height: auto;
}

#scrollDer {
  transform: rotate(-90deg);
  cursor: pointer;
  width: 24px;
  height: auto;
}

.containerScroll {
  display: flex;
  align-items: center
}

.articles.horizontal {
  flex-direction: row;
  width: auto;
  max-width: 840px;
  padding: 0px 10px;
  margin-left: 20px;
  margin-right: 20px;
  height: 380px !important;
  overflow: hidden;
  overflow-x: auto;
  align-items: center;
  justify-content: flex-start;



}

.articles.horizontal .resume-article,
.resume-article-nosession {
  margin: 0px;
  padding: 5px 0px;
}

.header-icons-mobile {

  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  padding: 0 0px;
  margin-right: 0;
}

.header-icons-mobile>a {
  margin-right: 15px;

}


/* ================================= Media Queries ==================================  */

@media only screen and (max-width: 1300px) {
  .boton-perfil {
    padding: 0.6rem 0.6rem;
    font-size: 12px;
    border-radius: 10px 10px 0 0;
    /* Esquinas superiores redondeadas */
  }

  .cabecera-perfil>h3 {
    font-size: 32px;
  }

  h3 {
    font-size: 30px;
  }

  .bio-container>p {
    font-size: 14px;
  }

}

@media only screen and (max-width: 900px) {
  .content-article {
    display: block;
    height: auto;
  }

  .boton-perfil {
    padding: 0.5rem 0.5rem;
    font-size: 8px;
    border-radius: 10px 10px 0 0;
    /* Esquinas superiores redondeadas */
  }

  .bio-container>p {
    font-size: 12px;
  }

}

@media only screen and (max-width: 1000px) {
  #scrollDer {
    height: 30px;
  }

  #scrollIzq {
    height: 30px;
  }

  .articles.horizontal {
    max-width: 400px;
    height: 11rem;
  }

}

@media only screen and (max-width: 1000px) {
  p {
    font-size: 16px;

  }

  p strong {
    font-size: 16px;
  }

  .user-info__right>p {
    font-size: 13px !important;
    margin-top: 2px !important;
  }

  .article__header>h5 {
    font-size: 23px !important;
  }

  .article__header>p {
    font-size: 20px;
  }

  /* Ajustos del perfil*/
  .cabecera-perfil {
    margin-top: 20px;
  }

}


@media only screen and (max-width: 767.98px) {
  * {
    font-size: 20px;
  }

  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 30px;
    margin-bottom: 1rem;
  }

  h3 {
    font-size: 24px;
    margin-bottom: 0.7rem;
  }

  h4 {
    font-size: 20px;
  }

  h5 {
    font-size: 16px;
  }

  h6 {
    font-size: 14px;
  }

  p {
    font-size: 8.3px;
  }

  .user-info__right>p {
    font-size: 10px;
  }

  a {
    font-size: 15px;
  }


  /* #nav-left,
  #nav-right {
      align-items: center;
      height: 40px;
      margin: 0 50px;
  } */


  /* Header adjustments */
  #title-container {
    display: none;
  }

  #write-button {
    width: 100%;
    margin-top: 10px;
  }

  #hero-articles {
    display: none;
  }

  /* Categories adjustments */
  #categories,
  .menu-categories {
    width: 85%;
    height: 50px;
  }

  .menu-categories::after {
    display: none;
  }

  .menu-categories li {
    width: 100%;
    height: 100%;
    margin: 4px 2px;
  }

  .menu-categories li a {
    font-size: 12px;
  }


  /* Articles adjustments */
  .articles {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    padding-left: 10%;
    top: 50px;
  }

  .resume-article-nosession,
  .resume-article {
    margin: 10px 0;
  }

  .titulo-article h1 {
    font-size: 20px;
  }

  .sponsor-article {
    display: none;
  }

  .image-article {
    display: none;
  }

  /* Login adjustments */

  .form {
    width: 100%;
    padding: 0px 20px;
  }

  .form .banner-blogui {
    display: block;
    object-fit: cover;
    width: 70%;
  }

  .header-form {
    width: 100%;
  }

  .input-form {
    width: 100%;
  }

  .input-txt {
    width: 100%;
  }

  .wrapp {
    align-items: center;
    justify-content: center;
  }

  .wrapp .banner {
    display: none;
    ;
  }

  .form .large-button {
    width: 70%;
    height: calc(100% - 10px);
  }

  /** Footer adjustments */
  .content-footer {
    flex-direction: column;
    align-items: center;
    height: auto !important;
    padding: 0 10px;
  }

  .left-footer,
  .right-footer {
    width: 100%;
    /* overflow: hidden; */
  }


  .right-footer .input-news {
    width: 100% !important;
    display: flex;
  }

  .social-icons__footer {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
  }

  /** Prices adjustments */
  .price__main {
    flex-direction: column;
    width: 100%;
  }

  .price-element {
    max-width: 100%;
    margin: 10px 0px;
  }

  .price-table__feature p {
    font-size: 20px;
  }

  /* Create Articles adjustements */
  .container__crear__articulo {
    width: 100%;
    padding: 0px 10px;
  }

  /* Ajustos del perfil*/
  .cabecera-perfil {
    margin-top: 80px;
  }

  .articles.horizontal {
    height: 17rem;
    max-width: 380px;
  }

  .articles.horizontal .resume-article {
    margin-right: 20px;
  }

  .articles.horizontal .resume-article .titulo-article {
    margin: 0;
  }

  .articles.horizontal .resume-article .body-article {
    margin-bottom: 13px;
    margin-top: 16px;
  }

  .articles.horizontal .resume-article-nosession {
    margin-right: 20px;
  }

  .articles.horizontal .resume-article-nosession .titulo-article {
    margin: 0;
  }

  .articles.horizontal .resume-article-nosession .body-article {
    margin-bottom: 13px;
    margin-top: 16px;
  }

  .password-form {
    width: 100%;
  }

}

/*MOVIL responsive*/
@media only screen and (max-width: 500px) {

  #nav-right {
    right: 0;
    top: 0;
    margin: 0;
  }

  #nav-right>* {
    margin: 0 5px;
  }

  .articles._2columns>.resume-article.large {
    min-width: auto;
  }

  .articles._2columns>.resume-article.large .content-article {
    width: 900px;
    padding: 5px;
  }

  .articles._2columns>.resume-article-nosession .large {
    min-width: auto;
  }

  .articles._2columns>.resume-article-nosession .large .content-article {
    width: 900px;
    padding: 5px;
  }

  .article {
    width: 85%;
    margin-bottom: 20%;
  }

  .articles._2columns>.resume-article {
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .articles._2columns>.resume-article-nosession {
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
  }

  .short {
    width: 90vw;
  }

  .article__header>p {
    font-size: 15px;
  }

  .user-info__right>p {
    margin-right: 0;
  }

  .fecha-article {
    margin: 0;
  }

  .titulo-article {
    margin: 0;
  }

  .menu-categories>li {
    height: 85%;
    margin: 4px 2px;
  }

  .menu-categories>li>a {
    font-size: 12px;
  }

  .menu-categories {
    padding: 5px;
    margin: 20px 5px;
  }

  .menu-categories::-webkit-scrollbar {
    height: 2px;
    margin-top: 20px;
  }

  .cabecera-perfil {
    display: flow-root;
    margin-left: 0;
  }

  .contenidoPerfil {
    margin-top: 15px;
    display: flex;
    justify-content: center;
  }

  .bio-container {
    text-align: justify;
    margin-left: 10%;
    margin-right: 10%;
  }

  .bio-container>p {
    font-size: 14px;
  }

  .articles._2columns {
    display: none !important;
  }

  .articles._2columns>.resume-article:nth-child(even):not(.large)::after {
    display: none;
  }

  .articles._2columns>.resume-article:not(.large)::before {
    display: none;
  }

  .articles._2columns>.resume-article-nosession :nth-child(even):not(.large)::after {
    display: none;
  }

  .articles._2columns>.resume-article-nosession :not(.large)::before {
    display: none;
  }

  .dropdown {
    margin-right: 0;
    margin-left: 35%;
  }

  .body-article {
    margin: 0;
  }

  .articles__mobile {
    margin: 0 10%;
    display: block !important;
  }


  .mobile-article-container {
    margin: 30px 0px 45px 0px;
    display: flex;
    align-items: center;
  }

  h5 {
    font-size: 14.62px;
  }

  .mobile-titulo-article .link {
    text-decoration: none;
    color: var(--font-primary);
  }

  .mobile-fecha-article {
    margin-bottom: 0.5rem;
  }

  .mobile-body-article {
    text-align: justify;
  }

  .mobile-footer-article {
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
  }

  .contenedor-botones {
    width: 75%;
  }

  .articles.horizontal .resume-article {
    width: 100%;
    margin-left: -15px;
  }

  .articles.horizontal .resume-article .body-article {
    width: 100% !important;
    margin-bottom: 10px;
  }

  .articles.horizontal .resume-article-nosession {
    width: 100%;
    margin-left: -15px;
  }

  .articles.horizontal .resume-article-nosession .body-article {
    width: 100% !important;
    margin-bottom: 10px;
  }

  .articles.horizontal {
    max-width: 400px;
    height: 25rem;

  }

  .containerScroll {
    display: flex;
    align-items: center;
    width: 95%;
    margin-left: 10px;
    margin-right: 10px;
  }

  .dropMenu {
    cursor: pointer;
    width: 20px !important;
  }

  .configIcons {
    display: block;
  }

}

@media only screen and (max-width:500px) {
  .header-icons-mobile {
    display: none;
  }

  #writeButton {
    display: flex !important;
  }

  .configIcons {
    display: block !important;
  }
}

/*MENU LATERAL*/
.menu-lateral {
  width: 60px;
  position: fixed;
  top: 200px;
  left: 2px;
  background-color: transparent;
  z-index: 10;
}

.menu-lateral ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 25px;
  margin-left: 85px;
}

.menu-lateral li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.texto-menuL {
  text-align: center;
  font-size: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.menu-lateral ul li {
  margin: 18px 0;
  display: flex;
  gap: 3px;
  flex-direction: column;
  align-items: center;
  margin-bottom: 18px;
}

.option-href {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  width: 100%;
}

.option-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0px !important;
}

.menu-lateral ul li a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  width: 100%;
}

.menu-lateral ul li a .option-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.menu-lateral ul li a .menu-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease, fill 0.3s ease;
}

/* Estilo para boton de configuracion  */
.menu-lateral ul li #configuracionMenu .option-icon {
  margin-left: -5px;
}

/* Estilo para boton de inicio */
.menu-lateral ul li #homeMenu .option-icon {
  margin-left: -5px;
}

.menu-lateral ul li a .menu-icon svg {
  fill: #363636 !important;
}

.dark .menu-lateral ul li a .menu-icon svg {
  fill: var(--bg-primary) !important;
}




.menu-lateral ul li a:hover .menu-icon use {
  fill: #f57d76;
  margin-left: 30px;
}

.menu-lateral ul li a:hover .menu-icon path {
  fill: #f57d76;
}

.menu-lateral ul li a:hover .menu-icon svg {
  fill: #f1928d;
  transform: scale(1.2);
}



.menu-lateral ul li a::after {
  content: '';
  position: absolute;
  bottom: -20px;
  width: 0;
  height: 2px;
  background-color: #f57d76;
  transition: width 0.3s ease;
}

.menu-lateral ul li a::hover::after {
  width: 55px;
}

/* Línea vertical fija */
.menu-lateral::after {
  content: '';
  position: absolute;
  top: 30px;
  right: -80px;
  /* valor para alinear la línea vertical al lado derecho de los íconos */
  width: 1px;
  height: 95%;
  background-color: #c5c5c5;
}


.menu-lateral ul li a:hover::after {
  width: 50px;
}

div.option-icon svg {
  fill: #363636 !important;
}

.dark div.option-icon svg {
  fill: var(--bg-primary) !important;
}





/* Bloguis en general */
.blogui {
  background: #f0f0f0;
  padding: 20px;
  border: 1px solid #ddd;
  text-align: center;
}

/* Blogui centrado */
.container .resume-article:first-child {
  grid-column: 1 / -1;
  justify-self: center;
}

.container .resume-article-nosession:first-child {
  grid-column: 1 / -1;
  justify-self: center;
}

/* Configuración para 2 columnas desde el segundo blogui */
@media (min-width: 600px) {
  .COLUMNAS {
    grid-template-columns: repeat(2, 1fr);
  }

  .container .resume-article:nth-child(n+2) {
    grid-column: span 1;
  }

  .container .resume-article-nosession:nth-child(n+2) {
    grid-column: span 1;
  }
}


/* Contenedor principal */
.COLUMNAS {
  display: grid;
  gap: 20px;
}

/* Bloguis en general */
.blogui {
  background: #f0f0f0;
  padding: 20px;
  border: 1px solid #ddd;
  text-align: center;
}

/* Blogui centrado */
.COLUMNAS .resume-article:first-child {
  grid-column: 1 / -1;
  justify-self: center;
}

.COLUMNAS .resume-article-nosession:first-child {
  grid-column: 1 / -1;
  justify-self: center;
}

/* Configuración para 2 columnas desde el segundo blogui */
@media (min-width: 600px) {
  .COLUMNAS {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }

  .COLUMNAS .resume-article:nth-child(n+2) {
    grid-column: span 1;
  }

  .COLUMNAS .resume-article:nth-child(even):last-child {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .COLUMNAS .resume-article-nosession:nth-child(n+2) {
    grid-column: span 1;
  }

  .COLUMNAS .resume-article-nosession:nth-child(even):last-child {
    grid-column: 1 / -1;
    justify-self: center;
  }


}

/* Alineación del primer blogui en pantallas pequeñas */
@media (max-width: 599px) {
  .container {
    grid-template-columns: 1fr;
  }

  .container .blogui:first-child {
    justify-self: center;
  }
}

.subtitle {
  font-size: 1.5em;
  /* Ajusta el tamaño según tu preferencia */
  font-weight: bold;
  margin-bottom: 10px;
}

.main-articulos {
  width: 80%;
  height: fit-content;
  position: relative;
  display: flex;
  flex-direction: column;
  /* background-color: rgb(102, 114, 79); */
  margin-top: 200px;
  margin-left: 200px;
  align-items: center;
  justify-content: center;
}

.main-inicio {
  height: fit-content;
  position: relative;
  display: flex;
  flex-direction: column;
  /* background-color: rgb(102, 114, 79); */
  margin-top: 200px;
  margin-left: 10px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  /* que no sobre pase el contenido sobre el nav de arriba */
  z-index: 0.5;
}

.main-comunidad {
  width: 92%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  margin-top: 200px;
  margin-left: 100px;
  align-items: center;
  justify-content: center;
  gap: 50px;
  /* que no sobre pase el contenido sobre el nav de arriba */
  z-index: 0.5;
  padding-top: 20px;
}

.perfil-titulo-comunidad {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.titulo-y-boton {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.perfil-titulo-comunidad h1 {
  font-size: 1.6rem;
  margin-bottom: 0px;
}

.perfil-titulo-comunidad span {
  font-size: 50px;
  color: #f1928D;
}

.dark .verTodos {
  background-color: white;
  border: none;
  color: #f1928D;
  padding: 8px 15px;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 5px;
  transition: background-color 0.3s;
  font-size: 12px;
}

.verTodos {
  background-color: #f1928D;
  color: white;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 5px;
  border: 1px solid #f1928D;
  transition: background-color 0.3s;
  font-size: 12px;
}

.verTodos:hover {
  background-color: white;
  color: #f1928D;
}

.dark .verTodos:hover {
  background-color: #d18074;
  color: white;
}

.perfil-separador-comunidad {
  width: 100%;
  height: 1px;
  background-color: #a9a9a9;

}

.seccion-comunidad {
  display: flex;
  flex-direction: column;
  width: 26%;
  height: 20vw;
}

/* MI PERFIL*/
.perfil-titulo {
  margin-top: -100px;
  margin-left: 50px;
  position: fixed;
  width: 100%;
  background-color: var(--bg-primary);
  z-index: 100;
}

.dark .perfil-titulo {
  background-color: #363636;
  /* Color de fondo oscuro */
  color: #F2EFE6;
  /* Color de texto claro */
}

.perfil-titulo span {
  font-size: 70px;
  color: #f1928D;
}

.perfil-titulo h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 36px;
  font-weight: bold;
  color: #363636;
  margin-bottom: 0;
  margin-left: 20px;
}

.dark .perfil-titulo h1 {
  color: #F2EFE6;
}

.perfil-separador {
  width: 90%;
  height: 1px;
  background-color: #a9a9a9;
  margin-top: 5px;
  margin-bottom: 20px;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background-color: white;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  width: 90%;
  /* Ancho máximo para pantallas pequeñas */
  max-width: 500px;
  /* Ancho máximo del modal */
  border-radius: 8px;
  /* Bordes redondeados */
}

.modal-content {
  display: flex;
  flex-direction: column;
  position: relative;
  /* Necesario para posicionar el botón de cerrar */
}

.close-button-container {
  position: absolute;
  top: 10px;
  right: 10px;
}

.close-button-container button {
  border: 0;
  background-color: transparent;
}

/* Estilos para el pie del modal */
.modal-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  /* Espaciado opcional entre contenido y footer */
}

/* Estilo responsivo para dispositivos pequeños */
@media (max-width: 600px) {
  .modal {
    width: 95%;
    /* Aumenta el ancho en pantallas pequeñas */
    padding: 15px;
    /* Reduce el padding */
  }

  .modal-content p,
  .modal-footer button {
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
  }
}

/* Estilo responsivo para dispositivos medianos */
@media (min-width: 601px) and (max-width: 900px) {
  .modal {
    width: 80%;
    /* Ajuste del ancho en pantallas medianas */
  }
}

.dark .btn-seguir {
  background-color: white;
  color: #e2988f;
  padding: 16px;
  font-size: 10px;
  border-radius: 12px;
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0px solid;
  /* box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); */
  box-shadow: none !important;
}

.btn-seguir {
  background-color: white;
  color: #e2988f;
  padding: 16px;
  font-size: 10px;
  border-radius: 12px;
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e2988f;
}

.articles-container {
  width: auto;
  height: auto;
  padding: 5px;
  border-radius: 12px;
  color: white;
  font-size: 10px;
  border: 0px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 35px;
}

.progresoContenedor {
  width: 250px;
  flex-shrink: 0;
  padding: 10px;
  margin-top: 1rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0);
}

.info-item.btn {
  background-color: white;
  color: #e2988f;
  padding: 16px;
  font-size: 11.41px;
  border-radius: 30px;
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e2988f;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #e2988f;
  width: 80px;
  height: 30px;
  padding: 5px;
  border-radius: 15px;
  color: white;
  font-size: 10px;
  border: 0px;
}

.anclado-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.no-anclado-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: inherit;
}

.anclado-link .icon-path {
  transition: fill 0.3s ease;
}

.anclado-link:hover .icon-path {
  fill: #e2988f;
  cursor: pointer;
}

.no-anclado-link:hover .icon-path {
  fill: #e2988f;
  cursor: pointer;
  animation: blink 1s infinite;
}

.archivar-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.archivar-link:hover .icon-path {
  fill: #e2988f;
  cursor: pointer;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.anclado-link span:hover {
  background-color: #e2988f !important;
  cursor: pointer;
  border: 0px !important;
}

.no-anclado-link span:hover {
  background-color: #e2988f !important;
  cursor: pointer;
  border: 0px !important;
}

/* Estilos de input de imagen de usuario */
.imagen_perfil_header {
  position: relative;
  display: inline-block;
  width: 35.62px !important;
  height: 35.62px !important;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border-radius: 50% !important;
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  -ms-border-radius: 50% !important;
  -o-border-radius: 50% !important;
}

.image-input {
  position: relative;
  display: inline-block;
  width: 100.26px;
  height: 100.26px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border-radius: 0;
  border-radius: 50%;
}

.image-input-wrapper {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.image-input.image-input-outline .image-input-wrapper {
  -webkit-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
  box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
}

/* Para botones cambiar y borrar foto */
.cambiar-foto,
.borrar-foto {
  position: absolute;
  z-index: 20;
  background-color: #e2988f;
  border-radius: 50%;
  padding: 5px;
  cursor: pointer;
  color: #000;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  width: 25px;
  height: 25px;
}

.cambiar-foto {
  font-size: 16px;
  color: black;
  z-index: 999;
  top: 5px;
}

.borrar-foto {
  z-index: 10;
  bottom: 5px;
}

.iconos-modif-borrar {
  position: relative;
  display: inline-block;
}

.contName {
  display: flex;
  flex-direction: row;
  z-index: 0;
}

/** Modal para editar información del perfil */
.form-control {
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  outline: none;
  padding: 10px;
  width: 100%;
  height: auto;
  font-size: 16px;
  resize: none;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
}

.form-control:focus {
  border-bottom: 2px solid #e2988f;
  box-shadow: none;
}

/* Para que el texto largo se muestre completo */
.form-control::placeholder {
  color: #aaa;
  opacity: 1;
}

.bio-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
}

.bio-info p {
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bio-info textarea {
  font-family: 'Roboto', sans-serif !important;
  font-size: 16px !important;
}

.grow-wrap {
  display: grid;
  width: 100%;
}

.grow-wrap>textarea {
  resize: none;
  overflow: hidden;
  border: none;
  border-bottom: 1px solid #ccc;
  padding: 10px;
  font: inherit;
  width: 100%;
}

.char-count {
  font-size: 12px;
  color: #888;
  position: absolute;
  bottom: -9px;
  right: 0;
}

.row.botonesModal {
  display: flex;
  justify-content: flex-end;
  /* Alinear los botones a la derecha */
  align-items: center;
  margin-bottom: 15px;
}

.row.botonesModal button {
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s;
  margin-left: 10px;
}

.btnCerrar {
  background-color: #ccc;
  color: #000;
}

.btnActualizarInfo {
  background-color: #e2988f;
  color: #ffffff;
}

.row.botonesModal button:hover {
  opacity: 0.8;
}

.cambiar-infouser {
  z-index: 20;
  background-color: #e2988f;
  border-radius: 50%;
  padding: 5px;
  cursor: pointer;
  color: #000;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  width: 25px;
  height: 25px;
  margin-top: 8px;
}

@media (min-width: 481px) {
  .menu-lateral {
    top: 200px !important;
    left: 2px;
  }
}

#semi2 {
  border-radius: 15px;
  border: none;
  width: 64px;
  height: 30px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #848484;
}

#semi2 a {
  text-decoration: none;
}

#semi2 p {
  font-size: 9px;
}

.semi-round p {
  font-size: 10px;
  margin: 0;
  color: white;
}

.semi-round a {
  text-decoration: none;
  color: #000;
}

/* RESPONSIVE CSS */
@media only screen and (0px <=width <=885px) {

  #vue-app {
    width: 100%;
    display: flex;
    flex-direction: column;
    /*overflow: hidden;*/
  }

  /* estilos top nav */

  #writeButton {
    position: fixed;
    bottom: 60px;
    right: 10px;
    z-index: 999999 !important;
    width: 50px !important;
    height: 50px !important;
    background-color: #F1928D !important;
    ;
  }

  #writeButton .icon-button svg {
    height: 30px !important;
    width: 30px !important;
  }

  #writeButton .icon-button:hover {
    color: #ffffff !important;
    fill: #ffffff !important;
  }

  .h-icon:hover,
  .h-icon:hover>svg,
  .h-icon:hover>span svg {
    fill: #ffffff !important;
  }

  .search-icon {
    display: none;
  }

  /* estilos inicio */
  .main-inicio {
    width: auto;
    height: fit-content;
    position: relative;
    display: flex;
    flex-direction: column;
    /* background-color: rgb(102, 114, 79); */
    margin-top: 0px;
    margin-left: 0px;
    align-items: center;
    justify-content: center;
    gap: 50px;
    /* que no sobre pase el contenido sobre el nav de arriba */
    z-index: 0.5;
    top: 180px;
  }

  .perfil-titulo {
    width: 100%;
    top: 170px;
    margin-left: 0px;
  }

  .perfil-titulo h1 {
    margin-left: 10%;
    font-size: 24px;
  }

  #read {
    font-size: 14px;
  }

  .link p {
    font-size: 16px !important;
    width: 80%;
  }

  .perfil-separador {
    margin-left: 5%;
    width: 90%;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  #categories {
    width: 88% !important;
    height: 50px !important;
  }

  .menu-categories {
    width: 100%;
    top: 65px;
    display: flex;
    font-size: 20px;
    color: #ffffff !important;
    font-family: 'Roboto Serif', serif;
    font-weight: 400;
    padding-bottom: 10px;
  }

  /*.menu-categories li{
    background-color: #696969;
  }
  .dark .menu-categories li{
    background-color: white;
  }*/
  .menu-categories li a {
    color: #ffffff;
  }

  .dark .menu-categories li a {
    color: #000000;
  }

  .articles {
    margin-top: 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 40px 40px 40px 40px;
    left: auto;
    margin-bottom: 50px;
  }

  .menu-lateral {
    display: flex;
    position: fixed;
    bottom: 0 !important;
    width: 100%;
    height: 70px;
    background-color: #171717;
    /* Color de fondo del menú */
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    /* Sombra ligera */
    left: 0;
    top: auto !important;
    z-index: 100;
  }

  .menu-lateral::after {
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    width: 0px;
    height: 0%;
  }

  .modal-usuarios-content {
    width: 90% !important;
  }

  .menu-lateral ul {
    display: flex;
    width: 100%;
    justify-content: space-around;
    flex-direction: row;
    padding: 0;
    margin: 0;
    list-style-type: none;
    bottom: 0;
    left: 0px;
  }

  .menu-lateral li {
    flex: 1;
    text-align: center;
  }

  .menu-lateral a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    font-size: 12px;
  }

  .option-icon {
    margin-bottom: 1px;
  }

  div.option-icon svg {
    width: 15px !important;
    height: 15px !important;
    fill: var(--bg-primary) !important;
  }

  .dark div.option-icon svg {
    fill: var(--bg-primary) !important;
  }

  .texto-menuL {
    margin: 4px 0 0;
    font-size: 8px;
    font-family: 'Montserrat';
    font-weight: 500;
    color: var(--bg-primary);
  }

  /* estilos mis articulos */
  .main-articulos {
    width: 100%;
    top: 0px;
    margin-left: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 160px;
  }

  .todo {
    width: auto;
    height: fit-content;
    position: relative;
    display: flex;
    flex-direction: column;
    /* background-color: rgb(102, 114, 79); */
    margin-top: 0px;
    margin-left: 0px;
    align-items: center;
    justify-content: center;
    gap: 50px;
    /* que no sobre pase el contenido sobre el nav de arriba */
    z-index: 0.5;
  }

  .todo[style*="background-color: rgb(88, 86, 86)"],
  .todo[style*="background-color:#585656"] {
    color: white;
    /* Aplica a todo el texto dentro */
  }

  .todo[style*="background-color: rgb(88, 86, 86)"] head-article,
  .todo[style*="background-color:#585656"] head-article,
  .todo[style*="background-color: rgb(88, 86, 86)"] body-article,
  .todo[style*="background-color:#585656"] body-article,
  .todo[style*="background-color: rgb(88, 86, 86)"] footer-article,
  .todo[style*="background-color:#585656"] footer-article {
    color: white;
  }

  .todo[style*="background-color: rgb(88, 86, 86)"] p,
  .todo[style*="background-color:#585656"] p,
  .todo[style*="background-color: rgb(88, 86, 86)"] h5,
  .todo[style*="background-color:#585656"] h5,
  .todo[style*="background-color: rgb(88, 86, 86)"] a,
  .todo[style*="background-color:#585656"] a,
  .todo[style*="background-color: rgb(88, 86, 86)"] span,
  .todo[style*="background-color:#585656"] span {
    color: white;
  }

  /* Modo oscuro */
  .dark .todo[style*="background-color: rgb(88, 86, 86)"],
  .dark .todo[style*="background-color:#585656"] {
    color: white;
    /* Aplica a todo el texto dentro */
  }

  .dark .todo[style*="background-color: rgb(88, 86, 86)"] head-article,
  .dark .todo[style*="background-color:#585656"] head-article,
  .dark .todo[style*="background-color: rgb(88, 86, 86)"] body-article,
  .dark .todo[style*="background-color:#585656"] body-article,
  .dark .todo[style*="background-color: rgb(88, 86, 86)"] footer-article,
  .dark .todo[style*="background-color:#585656"] footer-article {
    color: white;
  }

  .dark .todo[style*="background-color: rgb(88, 86, 86)"] p,
  .dark .todo[style*="background-color:#585656"] p,
  .dark .todo[style*="background-color: rgb(88, 86, 86)"] h5,
  .dark .todo[style*="background-color:#585656"] h5,
  .dark .todo[style*="background-color: rgb(88, 86, 86)"] a,
  .dark .todo[style*="background-color:#585656"] a,
  .dark .todo[style*="background-color: rgb(88, 86, 86)"] span,
  .dark .todo[style*="background-color:#585656"] span {
    color: white;
  }

  .bio-container {
    width: auto !important;
  }

  .categories-my-profile {
    padding: 20px;
    margin-top: 15px !important;
  }

  .cabecera-perfil {
    display: flex;
    justify-content: normal;
    align-items: center;
    align-self: center;
    margin-top: 20px !important;
  }

  .image-input {
    width: 74px !important;
    height: 74px !important;
    left: 0px !important;
  }

  .contenidoPerfil {
    width: 70%;
  }

  .contName label {
    margin-top: 0px !important;
  }

  .perfil-info {
    display: flex;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-top: 0px !important;
  }

  .contenidoPerfil h3 {
    font-size: 21.82px !important;
    margin-bottom: 9px !important;
  }

  .contenidoPerfil p {
    font-size: 14px !important;
  }

  .info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #e2988f;
    width: 55px;
    height: 30px;
    padding: 5px;
    border-radius: 15px;
    color: white;
    border: 0px;
  }

  .info-number {
    font-size: 9px !important;
  }

  .info-label {
    font-size: 9px !important;
    color: white !important;
  }

  .dark .btn-seguir {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    width: 55px;
    height: 30px;
    padding: 5px;
    color: #e2988f;
    border: 0px;
    font-size: 9px;
  }

  .btn-seguir {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    width: 55px;
    height: 30px;
    padding: 5px;
    color: #e2988f;
    border: 0px;
    font-size: 9px;
    border: 2px solid #e2988f;
  }

  .container__crear__articulo {
    margin-top: 10px;
  }

  .bio-container p {
    font-size: 14px !important;
  }

  .resume-article-nosession,
  .resume-article.large {
    padding: 0 10px 0 0;
  }

  .dropdown {
    margin-left: 0px !important;
    width: 50px !important;
  }

  /* responsive comunidad */
  .main-comunidad {
    display: none !important;
  }

  .main-comunidad-mobil {
    display: block !important;
    margin-top: 170px;
    width: auto;
  }

  #categories-comunidad {
    display: block !important;
    flex-direction: row;
    width: auto;
  }

  .categories-comunidad {
    display: flex !important;
    flex-direction: row;
    width: 294px;
    margin-left: 40px !important;
    margin-bottom: 20px;
  }

  .dark .categories-comunidad {
    display: flex !important;
    flex-direction: row;
    width: 294px;
    margin-left: 40px;
  }

  .categories-comunidad li {
    width: 25%;
    background-color: none;
    min-width: 20px !important;
  }

  .dark .categories-comunidad li {
    width: 25%;
    background-color: none;
    min-width: 20px !important;
  }

  .categories-comunidad li a {
    font-size: 20px;
    color: #ffffff !important;
    font-family: 'Roboto';
    font-weight: 500;
  }

  .dark .categories-comunidad li a {
    color: rgb(0, 0, 0) !important;
    font-size: 20px;
    font-family: 'Roboto';
    font-weight: 500;
  }

  .articles-container-mobil {
    padding: 0px 40px 40px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 50px;
    padding-left: 30px !important;
  }

  .author-article p,
  a {
    font-size: 14.5px;
  }

  .fecha-article p {
    font-size: 13px;
  }

  .mobile-fecha-article {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }

  .mobile-fecha-article p {
    font-size: 13px;
  }

  .mobile-fecha-article .anclado {
    margin-left: auto;
  }

  .mobile-head-article {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .articles__mobile.editable {
    display: block !important;
    width: 90%;
    padding-left: 20px;
    margin-bottom: 65px;
    margin-top: 20px !important;
  }

  .articles._2columns {
    display: none !important;
  }

  .articles-container-mobil .resume-article {
    display: flex;
    margin-bottom: 20px;
  }

  .articles-container-mobil .resume-article-nosession {
    display: flex;
    margin-bottom: 20px;
  }

  .resume-article-nosession,
  .resume-article {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px !important;
  }

  .resume-article-nosession {
    margin-bottom: 90px !important;
  }

  .content-anclado {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: flex-end;
  }

  .fecha-article p {
    font-size: 11.31px;
    margin-bottom: 5.1px;
  }

  .titulo-article h5 {
    margin-bottom: 11.07px;
    font-weight: 300;
    font-size: 18.62px;
  }

  .titulo-article {
    min-height: 0px !important;
    padding-bottom: 0px !important;
  }

  .author-article p,
  a {
    font-size: 14px;
  }

  #editor li {
    font-size: 14px;
  }

  .body-article {
    padding-top: 9.83px !important;
    margin-bottom: 16px !important;
  }

  .card-programar p.descripcion {
    margin-bottom: 15px;
  }

  .social-icons svg {
    width: 12px;
  }

  .social-icons span {
    font-size: 12px;
  }

  .info-article span {
    font-size: 12px;
  }

  .programadoPara {
    font-size: 5.7px !important;
  }

  .anclado-link svg {
    width: 17px !important;
    height: 17px !important;
  }

  .no-anclado-link svg {
    width: 17px !important;
    height: 17px !important;
  }

  .archivar-link svg {
    width: 17px !important;
    height: 17px !important;
  }

  .content-article {
    justify-content: center;
    height: auto !important;
    width: 100%;
    height: 140px;
  }

  .archivar {
    display: flex;
  }

  .cambiar-infouser {
    height: 18px !important;
    width: 18px !important;
  }

  .article-popup-user {
    display: flex;
    flex-direction: column;
  }

  .sidebar__crear {
    height: 90%;
  }

  .article-popup-user article.resume-article {
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 100%;
  }

  .article-popup-user article.resume-article-.resume-article {
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 100%;
  }

  .mobile-article-container {
    margin: 30px 0px 45px 0px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .articles__mobile {
    margin-top: 45px !important;
  }

  .mobile-titulo-article h5 {
    margin-bottom: 8.07px;
    font-weight: 300;
    font-size: 18.62px;
  }

  .mobile-titulo-article .link {
    text-decoration: none;
    color: var(--font-primary);
  }

  .popup-content {
    margin-top: 10px;
    width: 100%;
    margin-bottom: 0px;
  }

  .info-popup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 100%;
  }

  .popup-container-2columns {
    height: 148px;
    width: 100%;
  }

  .popup-container {
    width: 80%;
  }

  .popup-container__buttons button p {
    font-size: 9px !important;

  }

  .semi-round {
    display: flex;
    height: 22px;
    border-radius: 9px;
    align-items: center;
    justify-content: center;
  }

  .semi-round p {
    font-size: 15px;
    margin: 0;
    color: white;
  }

  .semi-round:first-child p {
    font-size: 13px;
  }

  .semi-round a {
    text-decoration: none;
    color: #000;
  }

  .mobile-body-article p {
    font-size: 13px !important;
  }

  .popup-container__buttons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }

  .popup-container__body {
    margin-top: 0px !important;
  }

  #modal2 {
    width: 350px !important;
    height: 350px !important;
    top: 50% !important;
  }

  .recortarFoto {
    bottom: 15px !important;
    right: 14px !important;
  }

  #editor a {
    font-size: 14.5px !important;
  }

  #editor p {
    font-size: 14.5px !important;
  }

  #editor p strong {
    font-size: 14.5px !important;
  }

  #editor p i {
    font-size: 14.5px !important;
  }

  #editor ul li {
    font-size: 14.5px !important;
  }

  .contenido a {
    font-size: 14.5px !important;
  }

  .contenido p {
    font-size: 14.5px !important;
  }

  .contenido p strong {
    font-size: 14.5px !important;
  }

  .contenido p i {
    font-size: 14.5px !important;
  }

  .contenido ul li {
    font-size: 14.5px !important;
  }
}



@media only screen and (min-width:885px) and (max-width:1023px) {
  #vue-app {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  /* estilos top nav */
  #writeButton {
    position: fixed;
    bottom: 60px;
    right: 10px;
    z-index: 999999 !important;
    width: 50px !important;
    height: 50px !important;
    background-color: #F1928D !important;
    ;
  }

  #writeButton .icon-button svg {
    height: 30px !important;
    width: 30px !important;
  }

  #writeButton .icon-button:hover {
    color: #ffffff !important;
    fill: #ffffff !important;
  }

  .h-icon:hover,
  .h-icon:hover>svg,
  .h-icon:hover>span svg {
    fill: #ffffff !important;
  }

  .main-inicio {
    width: auto;
    height: fit-content;
    position: relative;
    display: flex;
    flex-direction: column;
    /* background-color: rgb(102, 114, 79); */
    margin-top: 0px;
    margin-left: 0px;
    align-items: center;
    justify-content: center;
    gap: 50px;
    /* que no sobre pase el contenido sobre el nav de arriba */
    z-index: 0.5;
    top: 101px;
  }

  .perfil-titulo {
    width: 100%;
    top: 170px;
    margin-left: 0px;
  }

  .perfil-titulo h1 {
    margin-left: 10%;
    font-size: 26px;
  }

  .perfil-separador {
    margin-left: 10%;
    width: 80%;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  #categories {
    width: 90% !important;
    margin-top: 30px !important;
    height: 60px;
  }

  #categories .menu-categories {
    height: 49px !important;
  }

  .menu-categories {
    /*width: 95% !important;*/
    top: 45px !important;
    display: flex;
    font-size: 22px;
    color: #ffffff !important;
    font-family: 'Roboto Serif', serif;
    font-weight: 400;
    padding-bottom: 10px;
  }

  .menu-categories li {
    background-color: #848484;
  }

  .dark .menu-categories li {
    background-color: #F0F0F0;
  }

  .menu-categories li a {
    color: #ffffff;
    font-size: 12px;
  }

  .search-icon {
    display: none;
  }

  .dark .menu-categories li a {
    color: #000000;
  }

  #writeButton {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    background-color: rgb(242, 239, 230) !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    position: static;
  }

  #writeButton .icon-button svg {
    height: 13px !important;
    width: 13px !important;
  }

  .articles {
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 40px 80px 40px 80px !important;
    left: auto;
    margin-bottom: 50px;
    gap: 30px;
  }

  .articles._2columns {
    margin-top: 30px;
  }

  .content-article {
    width: 100%;
  }

  .resume-article {
    width: 100%;
  }

  .resume-article-nosession {
    width: 100%;
  }

  .menu-lateral {
    display: flex;
    position: fixed;
    bottom: 0 !important;
    width: 100% !important;
    height: 70px !important;
    background-color: #171717 !important;
    /* Color de fondo del menú */
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    /* Sombra ligera */
    left: 0;
    top: auto !important;
    z-index: 100;
  }

  .menu-lateral::after {
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    width: 0px;
    height: 0%;
  }

  .menu-lateral ul {
    display: flex;
    width: 100%;
    justify-content: space-around;
    flex-direction: row;
    padding: 0;
    margin: 0;
    list-style-type: none;
    bottom: 0;
    left: 0px;
  }

  .menu-lateral li {
    flex: 1;
    text-align: center;
  }

  .menu-lateral a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    font-size: 14px;
  }

  .option-icon {
    margin-bottom: 1px;
  }

  div.option-icon svg {
    width: 15px !important;
    height: 15px !important;
    fill: var(--bg-primary) !important;
  }

  .dark div.option-icon svg {
    fill: var(--bg-primary) !important;
  }

  .texto-menuL {
    margin: 4px 0 0;
    font-size: 10px;
    font-family: 'Montserrat';
    font-weight: 500;
    color: var(--bg-primary);
  }

  /* estilos mis articulos */
  .main-articulos {
    width: 100%;
    top: 0px;
    margin-left: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 160px;
  }

  .author-article {
    display: flex;
    /*align-items: flex-start;*/
    justify-content: flex-start;
  }

  .todo {
    width: auto;
    height: fit-content;
    position: relative;
    display: flex;
    flex-direction: column;
    /* background-color: rgb(102, 114, 79); */
    margin-top: 0px;
    margin-left: 0px;
    align-items: center;
    justify-content: center;
    gap: 50px;
    /* que no sobre pase el contenido sobre el nav de arriba */
    z-index: 0.5;
  }

  .bio-container {
    width: auto !important;
  }

  .perfil-titulo {
    margin-top: -100px !important;
  }

  .editor-buttons {
    margin-bottom: 70px;
  }

  .categories-my-profile {
    padding: 20px;
    margin-top: 15px !important;
  }

  .cabecera-perfil {
    display: flex;
    justify-content: normal;
    align-items: center;
    align-self: center;
    margin-top: 20px !important;
  }

  .image-input {
    width: 74px !important;
    height: 74px !important;
    left: 0px !important;
  }

  .contenidoPerfil {
    width: 70%;
  }

  .contName label {
    margin-top: 0px !important;
  }

  .perfil-info {
    display: flex;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-top: 0px !important;
  }

  .contenidoPerfil h3 {
    font-size: 19.82px !important;
    margin-bottom: 9px !important;
  }

  .contenidoPerfil p {
    font-size: 9.37px !important;
  }

  .info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #e2988f;
    width: 50px;
    height: 20px;
    padding: 5px;
    border-radius: 15px;
    color: white;
    border: 0px;
  }

  .info-number {
    font-size: 7px !important;
  }

  .info-label {
    font-size: 7px !important;
    color: white !important;
  }

  .mobile-fecha-article p {
    font-size: 16px !important;
    margin-bottom: 8px;
  }

  .mobile-body-article p {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .mobile-titulo-article h5 {
    font-size: 22px;
    margin-bottom: 13px;
  }

  .social-icons a svg {
    width: 14px;
    height: 14px;
  }

  .social-icons span {
    font-size: 14px;
  }

  .info-article span {
    font-size: 14px;
  }

  .anclado-link svg {
    width: 18px !important;
    height: 18px !important;
  }

  .articles__mobile {
    display: flex;
    flex-direction: column;
    gap: 10px !important;
  }

  .mobile-article-container {
    margin-bottom: 35px !important;
  }

  .bio-container p {
    font-size: 18px !important;
  }

  .contenidoPerfil h3 {
    font-size: 26px !important;
  }

  .contenidoPerfil p {
    font-size: 14px !important;
  }

  .info-item {
    width: 80px !important;
    height: 30px !important;
  }

  .info-item span {
    font-size: 11px !important;
  }

  .btn-seguir {
    width: 80px !important;
    height: 30px !important;
    font-size: 11px !important;
  }

  .profilePic {
    display: flex;
    align-items: center;
    justify-content: center !important;
  }

  .image-input {
    left: 0px !important;
  }

  #imgPerfil {
    width: 80.859px !important;
    height: 80.859px !important;
    margin-left: 0px !important;
  }

  #guardados-app {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
  }

  .main-comunidad {
    margin-left: 0px;
    margin-top: 150px;
    gap: 80px;
  }

  #SeguidosComunidad {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
  }
}

@media only screen and (min-width:1024px) and (max-width: 1280px) {
  .main-comunidad {
    margin-left: 100px !important;
  }

  .articles._2columns>.resume-article.short {
    width: 50%;
  }

  .articles._2columns>.resume-article-nosession.short {
    width: 50%;
  }

  .articles._2columns {
    padding: 0px;
  }

  .main-articulos {
    margin-left: 170px;
  }

  .articles._2columns>.resume-article.short .content-article {
    width: 354px;
  }

  .articles._2columns>.resume-article.large .content-article {
    padding: 40px 20px 30px 30px !important;
  }

  .articles._2columns>.resume-article-nosession.short .content-article {
    width: 354px !important;
  }

  .articles._2columns>.resume-article-nosession.large .content-article {
    padding: 40px 20px 30px 30px !important;
  }

  .popup-container-2columns {
    height: 148px !important;
  }
}

@media only screen and (min-width: 360px) and (max-width: 767px) {
  .search-results {
    top: 132px !important;
    width: 192px !important;
    border-radius: 7px !important;
    right: 0 !important;
    left: auto !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 884px) {
  #read {
    display: block !important;
  }
}

/* FIN DE RESPONSIVE CSS */

/* INICIO ESTILOS DE BOTONES MODAL RECORTAR FOTO DE PERFIL */
#rotateLeft i {
  transform: rotate(180deg);
}

#rotateRight i {
  transform: rotate(0deg);
}

#zoomIn i {
  font-size: 22px;
}

#zoomOut i {
  font-size: 22px;
}

#reset i {
  font-size: 22px;
}

#rotateLeft {
  top: 10px;
}

#rotateRight {
  top: 50px;
}

#zoomIn {
  top: 90px;
}

#zoomOut {
  top: 130px;
}

#reset {
  top: 170px;
}

#closeCrop {
  position: absolute;
  top: -12px;
  left: -13px;
  background-color: #e9857e;
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

.cropper-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
}

.cropper-container button {
  position: absolute;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #e9857e;
  color: white;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

.cropper-container img {
  width: 50px;
  height: 50px;
}

.cropper-container button svg {
  width: 20px;
  height: 20px;
}

.recortarFoto {
  position: absolute;
  bottom: 70px;
  right: 47px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #e9857e;
  color: white;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

#modal2 {
  width: 500px;
  height: 550px;
  top: 330px;
}

/* FIN ESTILOS DE BOTONES MODAL RECORTAR FOTO DE PERFIL */

/* MODAL DE COMUNIDAD */
.modal-usuarios {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

.todoslosusuarios {
  flex: 1;
  overflow-y: auto;
  margin-top: 20px;
  padding-right: 10px;
}

.modal-usuarios-content {
  width: 50%;
  height: 80%;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.modal-usuarios-content h2 {
  color: black;
  font-size: 20px;
  position: relative;
  color: #7a7979;
  width: 100%;
  margin-bottom: 20px;
}

.usuario-item {
  display: flex;
  gap: 15px;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.usuario-foto {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 10%;
  overflow: hidden;
}

.imagen-usuario {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.usuario-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.usuario-header {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}

.usuario-header a {
  text-decoration: none;
}

.usuario-nombre {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.usuario-usuario {
  font-size: 12px;
  color: #555;
  margin: 0;
}

.usuario-info a {
  text-decoration: none;
}

.close-buttonMCom {
  position: absolute;
  top: 10px;
  right: 25px;
  background-color: transparent;
  border: none;
  font-size: 30px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  z-index: 2000;
}

.close-buttonMCom:hover {
  color: #ea806e;
}

.todoslosusuarios {
  flex: 1;
  overflow-y: auto;
  margin-top: 20px;
  padding-right: 10px;

  &::-webkit-scrollbar {
    width: 5px;
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: #EA806E;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb:hover {
    opacity: 1;
    background: #EA806E;
  }
}

.modal-usuarios-content {
  padding: 20px 10px 20px 20px;
}

.modal-content {
  flex: 1;
  overflow-y: auto;
  margin-top: 20px;
  padding-right: 10px;

  &::-webkit-scrollbar {
    width: 5px;
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: #EA806E;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  /* Opcional: Configuración de track */
  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb:hover {
    opacity: 1;
    background: #EA806E;
  }
}


/* Articulos inicio.php */
.card-inicio_art-container .resume-article {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: -20px;
}

.card-inicio_art-container .content-article {
  display: flex;
  flex-direction: column;
  flex: 1;
}

@media (max-width: 4600px) and (min-width: 1022px) {
  .articles .card-inicio_art-container {
    width: 477px !important;
    height: 340px !important;
    max-height: 340px !important;
    position: relative;
    padding-bottom: 60px;
  }

  .dark .articles .card-inicio_art-container {
    width: 477px !important;
    height: 340px !important;
    max-height: 340px !important;
    position: relative;
    padding-bottom: 60px;
  }

  .articles .card-inicio_art-container .footer-section {
    margin-top: auto !important;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
  }

  .articles .card-inicio_art-container .division-article {
    width: 470px !important;
    margin: 10px 0px;
  }

  .articles .card-inicio_art-container .footer-article{
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 1022px) and (min-width: 600px) {
  .articles .card-inicio_art-container {
    width: 477px !important;
    height: max-content !important;
    height: max-content !important;
  }

  .dark .articles .card-inicio_art-container {
    width: 477px !important;
    height: max-content !important;
    height: max-content !important;
  }

  .articles .card-inicio_art-container .footer-section {
    margin-bottom: -25px;
  }
}

@media (max-width: 884px) and (min-width: 600px) {
  .articles .card-inicio_art-container .division-article {
    max-width: calc(100% + 40px) !important;
    width: calc(100% + 40px) !important;
    margin: 10px -30px;
  }

  .dark .articles .card-inicio_art-container .division-article {
    max-width: calc(100% + 40px) !important;
    width: calc(100% + 40px) !important;
    margin: 10px -25px;
  }

  .articles .card-inicio_art-container .resume-article {
    align-items: unset !important;
  }
}

@media (max-width: 600px) and (min-width: 0px) {
  .articles .card-inicio_art-container .resume-article {
    align-items: unset !important;
  }

  .articles .card-inicio_art-container .footer-section {
    margin-bottom: -25px;
  }
}

@media (max-width: 480px) and (min-width: 0px) {
  .articles .card-inicio_art-container .resume-article {
    align-items: unset !important;
    max-height: max-content !important;
  }

  .articles .card-inicio_art-container .division-article {
    max-width: calc(100% + 48px) !important;
    width: calc(100% + 48px) !important;
    margin: 10px -25px;
  }

  .articles .card-inicio_art-container .head-article {
    padding-top: 10px !important;
  }
}

/* Modo Claro */
.card-inicio_art-container {
  width: 630px !important; 
  height: 340px;
  max-height: 340px;
  border-radius: 15px;
  padding: 20px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 30px;
  box-sizing: border-box;
  background-color: #eeeeee;
  flex: 0 0 470px !important;
  max-width: 630px !important;
  margin-left: auto;
  margin-right: auto;
  border: none;
  overflow: visible;
  z-index: 1; 
  display: flex !important;
  flex-direction: column !important;
}

.card-inicio_art-container .resume-article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  flex: 1;
}

.card-inicio_art-container .content-article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  margin-top: 20px !important;
  width: -webkit-fill-available !important;
}

.footer-section {
  margin-top: auto !important; 
  bottom: 0;
}

.posicion-default {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 10;
}

.division-article {
  height: 2px;
  width: -webkit-fill-available !important;
  margin: 10px -20px; 
  border-radius: 1px;
  background: linear-gradient(90deg, #E2988F, #ff8da1, #E2988F, #ffc3cb, #E2988F);
  background-size: 400% 400%;
  animation: animatedBorder 3s ease infinite;
}

.card-inicio_art-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.card-inicio_art-container::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 18px;
  background: linear-gradient(45deg, #E2988F, #E2988F, #E2988F, #E2988F, #E2988F);
  background-size: 400% 400%;
  z-index: -2;
  animation: animatedBorder 3s ease infinite;
}

.card-inicio_art-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #E9EAE4;
  border-radius: 15px;
  z-index: -1;
}

.article-content-preview {
  font-family: 'Roboto', sans-serif;
  font-size: 13.22px;
  font-style: italic;
  padding-left: 12px;
  margin-top: 5px;
  margin-bottom: 10px;
  line-height: 1.5;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 60px;
  width: 100%;
  position: relative;
  margin-bottom: 15px;
}

.article-content-preview::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(45deg, #E2988F, #E2988F, #E2988F, #E2988F, #E2988F);
  background-size: 400% 400%;
  animation: animatedBorder 3s ease infinite;
}

.article-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra el contenido del artículo */
}

.footer-article {
  margin-top: auto !important;
}

.categoria-badge {
  font-size: 11px;
  background-color: #fefafa;
  color: #000000;
  padding: 3px 10px;
  border-radius: 12px;
  display: inline-block;
  font-weight: bold;
  border: 1px solid rgba(226, 152, 143, 0.8);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.categoria-badge span {
  color: #000000 !important;
  transition: color 0.3s ease;
}

.categoria-badge:hover {
  background-color: #E2988F;
  color: #ffffff;
}

.categoria-badge:hover span {
  color: #ffffff !important;
}

.card-inicio_art-container .fecha-article p {
  color: #000000;
}

.card-inicio_art-container .titulo-article h5 {
  color: #000000;
  padding-top: 10px;
}

.card-inicio_art-container .body-article p {
  color: #000000;
}

.card-inicio_art-container .author-article span,
.card-inicio_art-container .author-article a {
  color: #000000 !important;
}

.card-inicio_art-container .author-biography p {
  color: #333333 !important;
}

.card-inicio_art-container .social-icons span {
  color: #000000 !important;
}

/* MODO OSCURO */
.dark .card-inicio_art-container {
  width: 630px !important; 
  height: 340px;
  max-height: 340px;
  border-radius: 15px;
  padding: 20px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 30px;
  box-sizing: border-box;
  flex: 0 0 470px !important;
  max-width: 630px !important;
  margin-left: auto;
  margin-right: auto;
  border: none;
  overflow: visible;
  z-index: 1; 
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* Centra verticalmente el contenido */
}

.dark .footer-section {
  margin-top: auto !important; 
}

.dark .division-article {
  height: 2px;
  width: -webkit-fill-available !important;
  margin: 10px -20px; 
  border-radius: 1px;
  background: linear-gradient(90deg, #E2988F, #ff8da1, #E2988F, #ffc3cb, #E2988F);
  background-size: 400% 400%;
  animation: animatedBorder 3s ease infinite;
}

.dark .card-inicio_art-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.dark .card-inicio_art-container::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 18px;
  background: linear-gradient(45deg, #E2988F, #E2988F, #E2988F, #E2988F, #E2988F);
  background-size: 400% 400%;
  z-index: -2;
  animation: animatedBorder 3s ease infinite;
}

.dark .card-inicio_art-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #363636;
  border-radius: 15px;
  z-index: -1;
}

.dark .article-content-preview {
  font-family: 'Roboto', sans-serif;
  font-size: 13.22px;
  font-style: italic;
  padding-left: 12px;
  margin-top: 5px;
  margin-bottom: 10px;
  line-height: 1.5;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 60px;
  width: 100%;
  position: relative;
  margin-bottom: 15px;
}

.author-biography{
  padding-top: 5px;
}

.dark .article-content-preview::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(45deg, #E2988F, #E2988F, #E2988F, #E2988F, #E2988F);
  background-size: 400% 400%;
  animation: animatedBorder 3s ease infinite;
}

.dark .article-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra el contenido del artículo */
}

.dark .footer-article {
  margin-top: auto !important;
}

.dark .categoria-badge {
  font-size: 11px;
  background-color: #545050;
  color: white;
  padding: 3px 10px;
  border-radius: 12px;
  display: inline-block;
  font-weight: bold;
  border: 1px solid rgba(245, 156, 156, 0.8);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dark .categoria-badge span {
  color: #ffffff !important;
  transition: color 0.3s ease;
}

.dark .categoria-badge:hover {
  background-color: #E2988F;
  color: #ffffff;
}

.dark .categoria-badge:hover span {
  color: #ffffff !important;
}

/* Estilos para textos en modo oscuro */
.dark .card-inicio_art-container .fecha-article p {
  color: #ffffff;
}

.dark .card-inicio_art-container .titulo-article h5 {
  color: #ffffff;
  padding-top: 10px;
}

.dark .card-inicio_art-container .body-article p {
  color: #ffffff;
}

.dark .card-inicio_art-container .author-article span,
.dark .card-inicio_art-container .author-article a {
  color: #ffffff !important;
}

.dark .card-inicio_art-container .author-biography p {
  color: #e0e0e0 !important;
}

.dark .card-inicio_art-container .social-icons span {
  color: #ffffff !important;
}

@keyframes animatedBorder {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.icon-perfil {
  stroke: rgba(0, 0, 0, 0.7); 
}

.black .icon-perfil {
  stroke: rgba(255, 255, 255, 0.7); 
}

.share-svg {
    fill: currentColor;
    color: rgba(0, 0, 0, 0.7);
}

.dark .share-svg {
  fill: currentColor;
  color: rgba(255, 255, 255, 0.882);
}

.action-icons {
  display: flex;
  gap: 8px;
  /* Espacio entre iconos */
  align-items: center;
}

.share-icon,
.save-icon {
  display: flex;
  align-items: center;
}

.card-inicio_art-container .content-article {
  height: 173px;
}

/* Modal malito */
.modal-homeShare-contenido {
  background: white;
  padding: 24px;
  border-radius: 16px;
  width: 400px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  transform: scale(0.9) translate(-50%, -50%);
  transition: transform 0.3s ease-in-out;
  margin: auto;
}

.modal-homeShare {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.modal-homeShare.mostrar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-homeShare.mostrar .modal-homeShare-contenido {
  transform: scale(1);
}

.modal-homeShare h2 {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
}

.modal-homeShare-input-container {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding: 12px 0;
  flex-wrap: wrap;
}

#modal-homeShare-input-link {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  background-color: #f7f7f8;
  color: #333;
  outline: none;
  min-width: 60%;
}

button.modal-homeShare-copy-btn {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  background-color: #e2988f;
  color: white;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

button.modal-homeShare-copy-btn:hover {
  background-color: #d17b74;
  transform: translateY(-2px);
}

button.modal-homeShare-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: transparent;
  border: none;
  color: #333;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 1;
}

button.modal-homeShare-close-btn:hover {
  color: #d17b74;
  background-color: rgba(209, 123, 116, 0.1);
}

.modal-homeShare-redes-sociales {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.btn-red {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  margin: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-red:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-red img {
  width: 38px;
  height: 38px;
}

#btn-whatsapp {
  background-color: rgb(255, 255, 255);
}

#btn-facebook {
  background-color: rgb(255, 255, 255);
}

#btn-twitter {
  background-color: rgb(255, 255, 255);
}

#btn-telegram {
  background-color: rgb(255, 255, 255);
}

@media (max-width: 480px) {
  .modal-homeShare-contenido {
    width: 90vw;
    padding: 18px;
    max-height: 75vh;
  }

  .modal-homeShare h2 {
    font-size: 18px;
  }

  #modal-homeShare-input-link {
    font-size: 12px;
  }

  .modal-homeShare-copy-btn {
    font-size: 12px;
    padding: 6px 10px;
    margin: 0 auto;
    display: block;
  }

  .modal-homeShare-btn-red {
    width: 35px;
    height: 35px;
  }

  .modal-homeShare-btn-red img {
    width: 35px;
    height: 35px;
  }
}

#modal-homeShare-alerta-copiado {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #f8a9a9;
  color: white;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 999999; 
}

.modal-homeShare-alerta-oculta {
  display: none;
}

#modal-homeShare-alerta-copiado.mostrar {
  opacity: 1;
  display: flex;
}

body.modal-homeShare-open {
  overflow: hidden;
}

/* Seccion explorar */
.categorias-container {
  padding: 30px;
  border-radius: 8px;
  margin-top: -90px;
  max-width: 600px;
  /* Control the maximum width */
  width: 90%;
  /* Make it responsive but not full width */
}

.dark .categorias-container h2 {
  color: #fff;
  margin-bottom: 20px;
  text-align: center;
  font-size: 1.5rem;
}

.categorias-container h2 {
  color: #333;
  margin-bottom: 20px;
  text-align: center;
  font-size: 1.5rem;
}

.categorias-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  /* This will make the layout more random-looking */
  align-items: flex-start;
}

.dark .categoria-card {
  background-color: transparent;
  border: 1px solid #e57373;
  /* Reddish border like in your image */
  border-radius: 30px;
  padding: 8px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  /* These will help with the random appearance */
  margin: 5px;
  display: inline-block;
}

.categoria-card {
  background-color: transparent;
  border: 1px solid #d32f2f;
  /* Rojo más intenso para mayor contraste */
  border-radius: 30px;
  padding: 8px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 5px;
  display: inline-block;
}

.categoria-card:hover {
  background-color: rgba(229, 115, 115, 0.1);
  transform: translateY(-2px);
}

.categoria-card h3 {
  color: #333;
  /* Texto oscuro para mayor visibilidad */
  margin: 0;
  font-size: 0.9rem;
  font-weight: normal;
}

.dark .categoria-card h3 {
  color: #fff;
  margin: 0;
  font-size: 0.9rem;
  font-weight: normal;
}

/* Optional button to re-shuffle */
.reshuffle-button {
  display: block;
  margin: 20px auto 0;
  background-color: transparent;
  border: 1px solid #e57373;
  color: #fff;
  border-radius: 30px;
  padding: 8px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reshuffle-button:hover {
  background-color: rgba(229, 115, 115, 0.2);
}

/* Seccion Historial inicio.php */
.titulo-article h5 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Estilos tarjeta de lectura*/
#hero-articles {
  position: absolute;
  right: 20px;
  top: 0;
  width: 188px;
  max-width: 25%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0.8rem;
  max-height: 365px;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.content-container {
  display: flex;
  width: 100%;
  position: relative;
  padding: 0 20px;
  padding-bottom: 50px
}

#hero-articles {
  flex: 1;
  max-width: 30%;
}

.card-historial {
  width: 100%;
  min-width: 161.42px;
  height: 76.61px;
  box-sizing: border-box;
}

#hero-articles::-webkit-scrollbar {
  height: 6px;
  width: 5px;
}

#hero-articles::-webkit-scrollbar-thumb {
  background: #F1928D;
  border-radius: 6px;
}

#hero-articles::-webkit-scrollbar-thumb:hover {
  background: rgba(248, 138, 138, 0.7);
}

#hero-articles::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

/* Estilo para cada tarjeta (modo claro) */
.card-historial {
  background: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  max-width: 161.42px;
  height: 76.61px;
  flex: 0 0 auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card-historial:hover {
  transform: scale(1.05);
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-historial-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  max-width: 161.42px;
  height: 76.61px;
}

/* Modificaciones en modo oscuro */
body.dark .card-historial {
  background: rgba(255, 255, 255, 0.6);
  color: rgba(0, 0, 0, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

body.dark .card-historial:hover {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.hero-text-link {
  text-decoration: none;
  color: inherit;
}

/* Contenido dentro de la tarjeta */
.hero-text-content p {
  font-size: 0.7rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Progreso de lectura */
.abajoProgress {
  margin-top: -1rem;
}

.progress-container {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  height: 4px;
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-top: -2px;
}

.progress-indicator {
  background: #FF8577;
  height: 100%;
  transition: width 0.3s ease;
}

.divider {
  margin: 0.7rem 0;
}

@media (max-width: 1900px) and (min-width: 1716px) {
  #hero-articles {
    position: absolute;
    right: 100px;
    top: 0;
    width: 188px;
    max-width: 25%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0.8rem;
    max-height: 365px;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .main-inicio {
    margin-left: -150px;
  }
}

@media (max-width: 1715px) and (min-width: 1615px) {
  #hero-articles {
    position: absolute;
    right: 90px;
    top: 0;
    width: 188px;
    max-width: 25%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0.8rem;
    max-height: 365px;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .main-inicio {
    margin-left: -80px;
  }
}

/*Pantallas*/
@media (max-width: 1614px) and (min-width: 1469px) {
  #hero-articles {
    position: absolute;
    right: 90px;
    top: 0;
    width: 188px;
    max-width: 25%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0.8rem;
    max-height: 365px;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #hero-articles {
    overflow-x: auto;
    scrollbar-width: auto;
  }

  #hero-articles::-webkit-scrollbar {
    height: 6px;
  }

  .card-historial {
    flex: 0 0 auto;
    width: 161.42px;
    height: 76.61px;
  }

  .main-inicio {
    margin-left: -50px;
  }
}

@media (max-width: 1468px) and (min-width: 1281px) {
  #hero-articles {
    position: absolute;
    right: 80px;
    top: 0;
    width: 188px;
    max-width: 25%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0.8rem;
    max-height: 365px;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Personalización para navegadores WebKit (Chrome, Edge, Safari) */
  #hero-articles::-webkit-scrollbar {
    height: 6px;
    width: 5px;
  }

  #hero-articles::-webkit-scrollbar-thumb {
    background: #F1928D;
    border-radius: 6px;
  }

  #hero-articles::-webkit-scrollbar-thumb:hover {
    background: rgba(248, 138, 138, 0.7);
  }

  #hero-articles::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
  }

  .card-historial {
    flex: 0 0 auto;
    width: 161.42px;
    height: 76.61px;
  }

  .main-inicio {
    margin-left: 0px;
  }
}

/* fold Revisar*/
@media (max-width: 1280px) and (min-width: 1025px) {
  #hero-articles {
    position: absolute;
    right: 50px;
    top: 0;
    width: 188px;
    max-width: 25%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0.8rem;
    max-height: 365px;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #hero-articles::-webkit-scrollbar {
    height: 6px;
    width: 5px;
  }

  #hero-articles::-webkit-scrollbar-thumb {
    background: #F1928D;
    border-radius: 6px;
  }

  #hero-articles::-webkit-scrollbar-thumb:hover {
    background: rgba(248, 138, 138, 0.7);
  }

  #hero-articles::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
  }

  .touch-device #hero-articles {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .touch-device #hero-articles::-webkit-scrollbar {
    display: none;
  }

  .card-historial {
    flex: 0 0 auto;
    width: 161.42px;
    height: 76.61px;
  }

  .main-inicio {
    margin-left: 0px;
  }
}

@media (max-width: 1152px) and (min-width: 1024px) {
.card-inicio_art-container {
    width: 510px !important;
    max-width: 510px !important;
}

.dark .card-inicio_art-container {
    width: 510px !important;
    max-width: 510px !important;
}
}

@media (max-width: 1025px) and (min-width: 1023px) {
  #hero-articles {
    display: grid;
    grid-template-columns: repeat(10, minmax(150px, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    height: 101px;
    scrollbar-width: none;
    flex-wrap: nowrap;
    align-items: center;
    padding: 1rem;
    gap: 90px;
    max-width: 1100px;
    margin: 0 auto;
    margin-top: -13.2rem;
    scroll-snap-type: x mandatory;
    padding-left: 0px;
    transform: translateX(-20px);
  }

  #hero-articles::-webkit-scrollbar {
    display: none;
  }

  .card-historial {
    flex: 0 0 auto;
    width: 150%;
    max-width: 250px;
    min-height: 69px;
    height: 89%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.6rem;
    border-radius: 12px;
  }

  .abajoProgress {
    margin-top: -0.6rem;
  }

  .progress-container {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    height: 4px;
    overflow: hidden;
    position: relative;
    width: 100%;
    min-width: 100%;
    margin-top: -2px;
  }

  .progress-indicator {
    background: #FF8577;
    height: 100%;
    transition: width 0.3s ease;
  }

  .divider {
    margin: 0.7rem 0;
    width: 100%;
  }

  .menu-categories {
    top: 70px;
  }

  .menu-categories {
    margin-top: 95px !important;
  }

  #hero-articles {
    width: min(calc(380px * 2 + 1rem * 2), calc(87vw - 1px));
  }

  .menu-categories {
    width: 100%;
  }

  .content-container {
    width: 100%;
    margin-top: 90px;
    position: relative;
    z-index: 0;
  }

  .articles {
    padding-top: 0;
  }

  .card-inicio_art-container {
    height: 335px;
    max-height: 355px;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;
  }

    .dark .card-inicio_art-container {
    height: 335px;
    max-height: 355px;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;
  }

  div.content-article {
    height: 200px;
  }

  /* otra seccion */
  .resume-article-nosession {
    width: 250% !important;
    margin: 0 auto;
    min-height: 180px;
    max-height: 220px;
    padding-left: 20px;
    margin-top: -1px !important;
  }
}

@media (max-width: 1023px) and (min-width: 1022px) {
.articless {
    padding: 60px !important;
}
}

@media (max-width: 1022px) and (min-width: 920px) {
.articless {
    padding: 35px !important;
}
}

@media (max-width: 1022px) and (min-width: 920px) {
  #hero-articles {
    display: grid;
    grid-template-columns: repeat(10, minmax(150px, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    height: 101px;
    scrollbar-width: none;
    flex-wrap: nowrap;
    align-items: center;
    padding: 1rem;
    gap: 90px;
    max-width: 1100px;
    margin: 0 auto;
    margin-top: -8.5rem;
    scroll-snap-type: x mandatory;
    padding-left: 0px;
    transform: translateX(-20px);
  }

  .card-inicio_art-container .division-article {
      width: calc(100% + 40px) !important;
  }

  #hero-articles::-webkit-scrollbar {
    display: none;
  }

  .menu-categories {
    margin-top: 95px !important;
  }

  .card-historial {
    flex: 0 0 auto;
    width: 150%;
    max-width: 250px;
    min-height: 69px;
    height: 89%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.6rem;
    border-radius: 12px;
  }

  .abajoProgress {
    margin-top: -0.6rem;
  }

  .progress-container {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    height: 4px;
    overflow: hidden;
    position: relative;
    width: 100%;
    min-width: 100%;
    margin-top: -2px;
  }

  .progress-indicator {
    background: #FF8577;
    height: 100%;
    transition: width 0.3s ease;
  }

  .divider {
    margin: 0.7rem 0;
    width: 100%;
  }

  .menu-categories {
    top: 70px;
  }

  #hero-articles {
    width: min(calc(380px * 2 + 1rem * 2), calc(87vw - 1px));
  }

  .menu-categories {
    width: 100%;
  }

  .content-container {
    width: 100%;
    margin-top: 90px;
    position: relative;
    z-index: 0;
  }

  .articles {
    padding-top: 0;
  }

  section.articles .card-inicio_art-container {
    margin-bottom: 1px;
  }

  section.articles .dark .card-inicio_art-container {
    margin-bottom: 1px;
  }

  .card-inicio_art-container {
    width: 660px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
  }

    .dark .card-inicio_art-container {
    width: 660px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
  }

  div.content-article {
    height: 198px;
  }
}

@media (max-width: 919px) and (min-width: 901px) {
  #hero-articles {
    display: grid;
    grid-template-columns: repeat(10, minmax(150px, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    height: 101px;
    scrollbar-width: none;
    flex-wrap: nowrap;
    align-items: center;
    padding: 1rem;
    gap: 90px;
    max-width: 1100px;
    margin: 0 auto;
    margin-top: -10.2rem;
    scroll-snap-type: x mandatory;
    padding-left: 0px;
    transform: translateX(-20px);
  }

  #hero-articles::-webkit-scrollbar {
    display: none;
  }

  .card-inicio_art-container .division-article {
      width: calc(100% + 40px) !important;
  }

  .menu-categories {
    margin-top: 95px !important;
  }

  .card-historial {
    flex: 0 0 auto;
    width: 150%;
    max-width: 250px;
    min-height: 69px;
    height: 89%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.6rem;
    border-radius: 12px;
  }

  .abajoProgress {
    margin-top: -0.6rem;
  }

  .progress-container {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    height: 4px;
    overflow: hidden;
    position: relative;
    width: 100%;
    min-width: 100%;
    margin-top: -2px;
  }

  .progress-indicator {
    background: #FF8577;
    height: 100%;
    transition: width 0.3s ease;
  }

  .divider {
    margin: 0.7rem 0;
    width: 100%;
  }

  .menu-categories {
    top: 70px;
  }

  #hero-articles {
    width: min(calc(380px * 2 + 1rem * 2), calc(87vw - 1px));
  }

  .menu-categories {
    width: 100%;
  }

  .content-container {
    width: 100%;
    margin-top: 120px;
    position: relative;
    z-index: 0;
  }

  .articles {
    padding-top: 0;
  }

  section.articles .card-inicio_art-container {
    margin-bottom: 1px;
  }

  section.articles .dark .card-inicio_art-container {
    margin-bottom: 1px;
  }

  .card-inicio_art-container {
    width: 660px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
  }

  .dark .card-inicio_art-container {
    width: 660px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
  }
}

@media (max-width: 900px) and (min-width: 885px) {
  #hero-articles {
    display: grid;
    grid-template-columns: repeat(10, minmax(150px, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    height: 101px;
    scrollbar-width: none;
    flex-wrap: nowrap;
    align-items: center;
    padding: 1rem;
    gap: 90px;
    max-width: 1100px;
    margin: 0 auto;
    margin-top: -10.2rem;
    scroll-snap-type: x mandatory;
    padding-left: 0px;
    transform: translateX(-20px);
  }

  .menu-categories {
    margin-top: 95px !important;
  }

  .card-inicio_art-container .division-article {
      width: calc(100% + 40px) !important;
  }

  #hero-articles::-webkit-scrollbar {
    display: none;
  }

  .card-historial {
    flex: 0 0 auto;
    width: 150%;
    max-width: 250px;
    min-height: 69px;
    height: 89%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.6rem;
    border-radius: 12px;
  }

  .abajoProgress {
    margin-top: -0.6rem;
  }

  .progress-container {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    height: 4px;
    overflow: hidden;
    position: relative;
    width: 100%;
    min-width: 100%;
    margin-top: -2px;
  }

  .progress-indicator {
    background: #FF8577;
    height: 100%;
    transition: width 0.3s ease;
  }

  .divider {
    margin: 0.7rem 0;
    width: 100%;
  }

  .menu-categories {
    top: 99px !important;
  }

  #hero-articles {
    width: min(calc(350px * 2 + 1rem * 2), calc(87vw - 1px));
  }

  .menu-categories {
    width: 100%;
  }

  .content-container {
    width: 100%;
    margin-top: 170px;
    position: relative;
    z-index: 0;
  }

  .articles {
    padding-top: 0;
  }

  section.articles .card-inicio_art-container {
    margin-bottom: 1px;
  }

  section.articles .dark .card-inicio_art-container {
    margin-bottom: 1px;
  }

  .card-inicio_art-container {
    width: 660px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
  }

  .dark .card-inicio_art-container {
    width: 660px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
  }
}

/* Nest hub */
@media (max-width: 885px) and (min-width: 768px) {
  #hero-articles {
    display: grid;
    grid-template-columns: repeat(10, minmax(150px, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    height: 101px;
    scrollbar-width: none;
    flex-wrap: nowrap;
    align-items: center;
    padding: 1rem;
    gap: 90px;
    max-width: 1100px;
    margin: 0 auto;
    margin-top: -10.2rem;
    scroll-snap-type: x mandatory;
    padding-left: 0px;
    transform: translateX(-20px);
  }

  #hero-articles::-webkit-scrollbar {
    display: none;
  }

  .menu-categories {
    margin-top: 75px !important;
  }

  .card-inicio_art-container .division-article {
      width: calc(100% + 49px) !important;
      margin: 10px -30px;
  }

  .card-historial {
    flex: 0 0 auto;
    width: 150%;
    max-width: 250px;
    min-height: 69px;
    height: 89%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.6rem;
    border-radius: 12px;
  }

  .abajoProgress {
    margin-top: -0.6rem;
  }

  .progress-container {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    height: 4px;
    overflow: hidden;
    position: relative;
    width: 100%;
    min-width: 100%;
    margin-top: -2px;
  }

  .progress-indicator {
    background: #FF8577;
    height: 100%;
    transition: width 0.3s ease;
  }

  .divider {
    margin: 0.7rem 0;
    width: 100%;
  }

  .menu-categories {
    top: 50px;
  }

  #hero-articles {
    width: min(calc(350px * 2 + 1rem * 2), calc(87vw - 1px));
  }

  .menu-categories {
    width: 100%;
  }

  .content-container {
    width: 100%;
    margin-top: 110px;
    position: relative;
    z-index: 0;
  }

  /*.articles {
    padding-top: 0;
  }*/
  .card-inicio_art-container {
    width: 660px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;
  }

  .dark .card-inicio_art-container {
    width: 660px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;
  }
}

/*tablets*/
@media (max-width: 768px) {
  #hero-articles {
    display: grid;
    grid-template-columns: repeat(10, minmax(150px, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    height: 101px;
    scrollbar-width: none;
    flex-wrap: nowrap;
    align-items: center;
    padding: 1rem;
    gap: 90px;
    max-width: 1100px;
    margin: 0 auto;
    margin-top: -11.6rem;
    scroll-snap-type: x mandatory;
    padding-left: 0px;
    transform: translateX(-30px);
  }

  #hero-articles::-webkit-scrollbar {
    display: none;
  }

  .menu-categories {
    margin-top: 75px !important;
  }

  .card-historial {
    flex: 0 0 auto;
    width: 150%;
    max-width: 250px;
    min-height: 69px;
    height: 89%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.6rem;
    border-radius: 12px;
  }

  .abajoProgress {
    margin-top: -0.6rem;
  }

  .card-inicio_art-container .division-article {
      width: calc(100% + 49px) !important;
      margin: 10px -30px;
  }

  .progress-container {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    height: 4px;
    overflow: hidden;
    position: relative;
    width: 100%;
    min-width: 100%;
    margin-top: -2px;
  }

  .progress-indicator {
    background: #FF8577;
    height: 100%;
    transition: width 0.3s ease;
  }

  .divider {
    margin: 0.7rem 0;
    width: 100%;
  }

  .menu-categories {
    top: 50px;
  }

  #hero-articles {
    width: min(calc(350px * 2 + 1rem * 2), calc(87vw - 1px));
  }

  .menu-categories {
    width: 100%;
  }

  .content-container {
    width: 100%;
    margin-top: 130px;
    position: relative;
    z-index: 0;
  }

  .card-inicio_art-container {
    width: 530px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;
  }

  .dark .card-inicio_art-container {
    width: 530px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;
  }

  .categorias-container {
    margin-top: -150px;
    margin-bottom: 80px;
    z-index: 1;
  }
}

@media (max-width: 600px) {
 .card-inicio_art-container  .division-article {
      width: calc(100% + 45px) !important;
      margin: 10px -28px;
  }

  .card-inicio_art-container {
    width: 390px !important;
    max-width: 390px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-top: 1px;
  }

  .dark .card-inicio_art-container {
    width: 390px !important;
    max-width: 390px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-top: 1px;
  }
}

@media (max-width: 540px) {
  #hero-articles {
    display: grid;
    grid-template-columns: repeat(10, minmax(150px, 1fr));
    gap: 4.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    height: 101px;
    margin-top: -13.2rem;
    scrollbar-width: none;
    margin-left: 32px;
  }

  .menu-categories {
    margin-top: 95px !important;
  }

  .card-inicio_art-container .division-article {
      width: calc(100% + 49px) !important;
      margin: 10px -25px;
  }

  #hero-articles::-webkit-scrollbar {
    display: none;
  }

  #hero-articles {
    width: min(calc(210px * 2 + 1rem * 2), calc(78vw - 1px));
  }

  .card-historial {
    flex: 0 0 auto;
    width: 150%;
    max-width: 250px;
    min-height: 69px;
    height: 89%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.6rem;
    border-radius: 12px;
  }

  .abajoProgress {
    margin-top: -0.6rem;
  }

  .progress-container {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    height: 4px;
    overflow: hidden;
    position: relative;
    width: 100%;
    min-width: 100%;
    margin-top: -2px;
  }

  .progress-indicator {
    background: #FF8577;
    height: 100%;
    transition: width 0.3s ease;
  }

  .divider {
    margin: 0.7rem 0;
    width: 100%;
  }

  .menu-categories {
    top: 50px;
  }

  .menu-categories {
    width: 100%;
  }

  .content-container {
    width: 100%;
    margin-top: 170px;
    position: relative;
    z-index: 0;
  }

  .articles {
    padding-top: 0;
  }

  .card-inicio_art-container {
    width: 390px !important;
    max-width: 390px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-top: 1px;
  }

 .dark .card-inicio_art-container {
    width: 390px !important;
    max-width: 390px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-top: 1px;
  }

  .categorias-container {
    margin-top: -180px;
    margin-bottom: 80px;
    z-index: 1;
  }

  .card-inicio_art-container .resume-article {
    width: 98% !important;
  }
}

@media (max-width: 480px) {
  #hero-articles {
    display: grid;
    grid-template-columns: repeat(10, minmax(150px, 1fr));
    gap: 4.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    height: 101px;
    margin-top: -13.6rem;
    scrollbar-width: none;
    margin-left: 32px;
  }

  #hero-articles::-webkit-scrollbar {
    display: none;
  }

  .card-inicio_art-container .division-article {
      width: calc(100% + 40px) !important;
      margin: 10px -25px;
  }

  .card-inicio_art-container,
  .resume-article {
    width: 100% !important;
    /*min-height: 180px;*/
    max-height: 365px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
  }

  .menu-categories {
    margin-top: 95px !important;
  }

  #hero-articles {
    width: min(calc(160px * 2 + 1rem * 2), calc(80vw - 1px));
  }

  .card-historial {
    flex: 0 0 auto;
    width: 150%;
    max-width: 230px;
    min-height: 69px;
    height: 89%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.6rem;
    border-radius: 12px;
  }

  .abajoProgress {
    margin-top: -0.6rem;
  }

  .progress-container {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    height: 4px;
    overflow: hidden;
    position: relative;
    width: 100%;
    min-width: 100%;
    margin-top: -2px;
  }

  .progress-indicator {
    background: #FF8577;
    height: 100%;
    transition: width 0.3s ease;
  }

  .divider {
    margin: 0.7rem 0;
    width: 100%;
  }

  .menu-categories {
    top: 2px;
  }

  .menu-categories {
    width: 100%;
  }

  .content-container {
    width: 100%;
    margin-top: 160px;
    position: relative;
    z-index: 0;
  }

  .articles {
    padding-top: 0;
  }

  section.articles .card-inicio_art-container .fecha-article {
    margin-left: -20px !important;
  }

  section.articless .card-inicio_art-container .fecha-article {
    margin-left: 0px !important;
  }

  .card-inicio_art-container {
    width: 360px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-top: -60px;
    margin-bottom: 90px;
  }

  .dark .card-inicio_art-container {
    width: 360px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-top: -60px;
    margin-bottom: 90px;
  }

  .titulo-article h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  section.articles .card-inicio_art-container .head-article {
    padding-top: 40px;
  }

  .categorias-container {
    margin-top: -220px;
    margin-bottom: 80px;
    z-index: 1;
  }

  .posicion-default {
    top: -10px;
    right: -5px;
  }
}

/* Telefonos */
@media (max-width: 429px) {
  #hero-articles {
    display: grid;
    grid-template-columns: repeat(10, minmax(150px, 1fr));
    gap: 4.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    height: 101px;
    margin-top: -13.6rem;
    scrollbar-width: none;
    margin-left: 32px;
  }

  .posicion-default {
    top: -10px;
    right: -5px;
  }

  #hero-articles::-webkit-scrollbar {
    display: none;
  }

  #hero-articles {
    width: min(calc(140px * 2 + 1rem * 2), calc(87vw - 1px));
  }

  .menu-categories {
    margin-top: 85px !important;
  }

  .card-historial {
    flex: 0 0 auto;
    width: 150%;
    max-width: 250px;
    min-height: 69px;
    height: 89%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.6rem;
    border-radius: 12px;
  }

  .card-inicio_art-container .division-article {
      width: calc(100% + 40px) !important;
      margin: 10px -25px;
  }

  .divider {
    margin: 0.7rem 0;
    width: 100%;
  }

  .card-inicio_art-container .fecha-article {
    margin-left: -20px !important;
  }

  .content-container {
    width: 100%;
    margin-top: 150px;
    position: relative;
    z-index: 0;
  }

  .card-inicio_art-container {
    width: 310px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-bottom: 90px;
  }

  .dark .card-inicio_art-container {
    width: 310px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-bottom: 90px;
  }

  .titulo-article h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .categorias-container {
    margin-top: -220px;
    margin-bottom: 80px;
    z-index: 1;
  }
}

@media (max-width: 390px) {
  #hero-articles {
    display: grid;
    grid-template-columns: repeat(10, minmax(150px, 1fr));
    gap: 4.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    height: 101px;
    margin-top: -13.6rem;
    scrollbar-width: none;
    margin-left: 32px;
  }

  .posicion-default {
    top: -10px;
    right: -5px;
  }

  #hero-articles {
    width: min(calc(120px * 2 + 1rem * 2), calc(87vw - 1px));
  }

  .menu-categories {
    margin-top: 85px !important;
  }

  .card-historial {
    flex: 0 0 auto;
    width: 150%;
    max-width: 250px;
    min-height: 69px;
    height: 89%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.6rem;
    border-radius: 12px;
  }

  .card-inicio_art-container .division-article {
      width: calc(100% + 30px) !important;
      margin: 10px -19px;
  }

  .progress-container {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    height: 4px;
    overflow: hidden;
    position: relative;
    width: 100%;
    min-width: 100%;
    margin-top: -2px;
  }

  .progress-indicator {
    background: #FF8577;
    height: 100%;
    transition: width 0.3s ease;
  }

  .card-inicio_art-container .fecha-article {
    margin-left: -20px !important;
  }

  .content-container {
    width: 100%;
    margin-top: 150px;
    position: relative;
    z-index: 0;
  }

  .card-inicio_art-container {
    width: 290px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
   /*padding: 13px;*/
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-bottom: 90px;
  }

  .dark .card-inicio_art-container {
    width: 290px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    /*padding: 13px;*/
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-bottom: 90px;
  }

  .titulo-article h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .categorias-container {
    margin-top: -220px;
    margin-bottom: 80px;
    z-index: 1;
  }
}

@media (max-width: 360px) {
    .card-inicio_art-container {
    width: 260px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-bottom: 90px;
  }

    .dark .card-inicio_art-container {
    width: 260px !important;
    height: auto;
    max-height: max-content;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    margin-bottom: 90px;
  }

  .posicion-default {
    top: -21px;
    right: -5px;
  }

  .card-inicio_art-container .division-article {
      width: calc(100% + 40px) !important;
      margin: 10px -25px;
  }

  .card-inicio_art-container .fecha-article {
    margin-left: -20px !important;
  }

  #hero-articles {
    display: grid;
    grid-template-columns: repeat(10, minmax(150px, 1fr));
    gap: 4.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    height: 101px;
    margin-top: -13.6rem;
    scrollbar-width: none;
    margin-left: 32px;
  }

  #hero-articles {
    width: min(calc(107px * 2 + 1rem * 2), calc(87vw - 1px));
  }

  .menu-categories {
    margin-top: 85px !important;
  }

  .titulo-article h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .menu-categories li a {
    width: 83px;
  }

  .categorias-container {
    margin-top: -220px;
    margin-bottom: 80px;
    z-index: 1;
  }
}

@media (max-width: 344px) {
  #hero-articles {
    display: grid;
    grid-template-columns: repeat(10, minmax(150px, 1fr));
    gap: 4.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    height: 101px;
    margin-top: -13.5rem;
    scrollbar-width: none;
    margin-left: 32px;
  }

  #hero-articles {
    width: min(calc(95px * 2 + 1rem * 2), calc(80vw - 1px));
  }

  .menu-categories {
    margin-top: 85px !important;
  }

  .card-inicio_art-container .fecha-article {
    margin-left: -20px !important;
  }

  .titulo-article h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card-inicio_art-container .division-article {
      width: calc(100% + 40px) !important;
      margin: 10px -25px;
  }

  .menu-categories li a {
    width: 83px;
  }

  .categorias-container {
    margin-top: -220px;
    margin-bottom: 80px;
    z-index: 1;
  }

  .card-inicio_art-container {
    width: 250px !important;
    height: auto;
    max-height: max-content;
  }

   .dark .card-inicio_art-container {
    width: 250px !important;
    height: auto;
    max-height: max-content;
  }
}

@media (max-width: 300px) {
  #hero-articles {
    display: grid;
    grid-template-columns: repeat(10, minmax(150px, 1fr));
    gap: 4.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    height: 101px;
    margin-top: -13.5rem;
    scrollbar-width: none;
    margin-left: 32px;
  }

  #hero-articles {
    width: min(calc(110px * 2 + 1rem * 2), calc(87vw - 1px));
  }

  .menu-categories {
    margin-top: 85px !important;
  }

  .titulo-article h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 35px;
  }

  .menu-categories li a {
    width: 83px;
  }

  .categorias-container {
    margin-top: -220px;
    margin-bottom: 80px;
    z-index: 1;
  }

  section.articles .head-article {
    padding-top: 40px;
}

  .card-inicio_art-container {
    width: 260px !important;
    height: auto;
    max-height: max-content;
  }

  .dark .card-inicio_art-container {
    width: 260px !important;
    height: auto;
    max-height: max-content;
  }
}

/* Seccion biblioteca tarjetas guardados.php */
.card .articles-container h5 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookmarks-carousel {
  position: relative;
}

.biblioteca-seccion {
  margin-top: 20px;
}

.perfil-titulo-comunidad {
  font-size: 1.6rem;
  margin-bottom: 0;
  padding-left: 10px;
}

.card {
  margin-bottom: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0.3s ease;
  overflow: visible;
  z-index: 1;
  opacity: 1;
  max-width: calc(100% - 20px);
  word-wrap: break-word;
  height: 310px !important;
  justify-content: space-between;
}

.dark .card {
  margin-bottom: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0.3s ease;
  overflow: visible;
  z-index: 1;
  opacity: 1;
  max-width: calc(100% - 20px);
  word-wrap: break-word;
  height: 310px !important;
  justify-content: space-between;
}

.card .resume-article {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
  min-height: 0;
  padding-top: 0;
  justify-content: space-between;
}

.card .content-article {
  flex-direction: column;
  flex: 1;
  width: auto !important;
  min-height: 0;
  overflow: hidden;
}

.card .footer-section {
  margin-top: auto !important;
  flex-shrink: 0;

  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.card::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 8px;
  background: linear-gradient(45deg, #E2988F, #E2988F, #E2988F, #E2988F, #E2988F);
  background-size: 400% 400%;
  z-index: -2;
  animation: animatedBorder 3s ease infinite;
}

.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #E9EAE4;
  border-radius: 8px;
  z-index: -1;
}

.dark .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.dark .card::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 8px;
  background: linear-gradient(45deg, #E2988F, #E2988F, #E2988F, #E2988F, #E2988F);
  background-size: 400% 400%;
  z-index: -2;
  animation: animatedBorder 3s ease infinite;
}

.dark .card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #363636;
  border-radius: 8px;
  z-index: -1;
}

.author-article span,
.social-icons span {
  color: #000000 !important;
}

.dark .author-article span,
.dark .social-icons span {
  color: #ffffff !important;
}

.card p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 1.5;
}

.card:nth-child(odd) {
  color: var(--red-card-text-color);
}

.card:nth-child(even) {
  color: var(--card-text-color);
}

.card:nth-child(even) .saved-action {
  background-color: #333;
  color: #fff;
}

.card:nth-child(n+2) {
  /*margin-top: -40px;*/
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.2);
}

.card:hover {
  z-index: 10;
  transform: scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.card.red-card:hover {
  transform: translateY(-5px);
}

.card.focused {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 -8px 25px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

.btn-guardado:hover {
  background-color: #0056b3;
}

.card .division-article {
  width: calc(100% + 40px) !important; 
  margin: 10px -20px; 
}

@media (max-width: 4500px) and (min-width: 1095px) {
.card, .dark .card {
  height: 285px !important;
}
}

@media (max-width: 1095px) and (min-width: 970px) {
  .card .container-fecha-editar {
    padding-top: 15px;
  }    
  .card .resume-article {
    padding-top: 10px !important;
  }
}

@media (max-width: 980px) and (min-width: 885px) {
  .card .container-fecha-editar {
    height: auto;
    padding-top: 10px !important;
  }
  .card .resume-article {
    padding-top: 20px !important;
  }
}

@media (max-width: 958px) and (min-width: 885px) {
  .dark .card {
    max-width: calc(100% - 0px);
  }
  .card {
    max-width: calc(100% - 0px);
  }
}

@media (max-width: 885px) and (min-width: 600px) {
  .articles-container-mobil {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0 10px;
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100vh;
    overflow-y: hidden;
    overflow-x: hidden;
    padding-top: 10px;
  }

  .card .titulo-article h5{
    padding-top: 10px;
  }

  .card .division-article {
    width: calc(100% + 42px) !important;
    margin: 10px -20px;
  }

  .card .container-fecha-editar {
    height: auto;
    margin-top: 0px;
    width: auto;
  }

  .resume-article-nosession {
    width: 150% !important;
    margin: 0 auto;
    min-height: 180px;
    max-height: 220px;
    padding-left: 20px;
    margin-top: -30px !important;
  }

  .perfil-titulo-comunidad h1 {
    font-size: 1.6rem;
  }

  .perfil-titulo-comunidad h1 {
    font-size: 1.6rem;
    line-height: 1.5;
  }

  .perfil-separador-comunidad {
    margin: 10px 0;
  }

  .card:nth-child(n+2) {
    margin-top: 0px;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.2);
  }
}

@media (max-width: 600px) {

  .saved-container,
  .bookmarks-carousel,
  .highlights-carousel,
  .articles-container,
  .articles-container-mobil {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .card:nth-child(n+2) {
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.2);
  }

  .dark .card:nth-child(n+2) {
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.2);
  }

  .card:nth-child(n+2) {
    margin-top: -45px;
  }

  .dark .card:nth-child(n+2) {
    margin-top: -45px;
  }

  /*.card .posicion-default {
    top: -20px;
  }*/

  .resume-article-nosession {
    width: 180% !important;
    margin: 0 auto;
    min-height: 180px;
    max-height: 220px;
    padding-left: 20px;
    margin-top: -30px !important;
  }

  .perfil-titulo-comunidad h1 {
    font-size: 1.6rem;
    text-align: center;
  }

  .perfil-separador-comunidad {
    width: 80%;
    margin: 10px auto;
  }

  .main-comunidad {
    display: none;
  }

  .main-comunidad-mobil {
    display: block;
  }

  ul.categories-comunidad {
    display: flex;
    /*justify-content: space-around;*/
    list-style: none;
    padding: 0;
    margin: 50px 0;
  }

  ul.categories-comunidad li a {
    text-decoration: none;
    font-size: 1rem;
    color: #333;
  }

  ul.categories-comunidad li a:hover {
    color: #007bff;
  }
}

@media (max-width: 480px) {
.card {
    height: max-content !important;
    justify-content: center;
  }

.card .footer-section {
  bottom: -25px;
  left: 0px;
  right: 0px;
  }
}

@media (max-width: 420px) {
.card .posicion-default {
    top: -20px;
}

.card .container-fecha-editar {
  left: 5px;
}
}

/* Estilos de la vista categorías */
.category {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #363636;
}

.dd {
  border: 1px solid #F1928D;
  color: #ffffff;
  background: none;
  border-radius: 20px;
  padding: 8px 16px;
  margin: 5px 10px;
  transition: all 0.3s;
}

.dd.active {
  background-color: #F1928D;
  color: white;
  transform: scale(1.1);
}

.dd:hover {
  background-color: #F1928D;
  color: white;
}

.dd.disabled {
  border: 1px solid #363636;
  background-color: #363636;
  color: #888888;
  cursor: not-allowed;
  transform: none;
}

.ajustes {
  text-align: center;
  max-width: 600px;
}

.category-btn-siguiente,
.category-btn-regresar {
  border: 1px solid #F1928D;
  color: #ffffff;
  background: none;
  border-radius: 20px;
  padding: 8px 16px;
  margin: 5px;
  transition: all 0.3s;
  font-family: Roboto;
  cursor: pointer;
}

.category-btn-siguiente:hover,
.category-btn-regresar:hover {
  background-color: #F1928D;
  color: white;
}

.category-btn {
  font-family: Roboto;
}

.subtitulo-categoria {
  font-family: montserrat;
  font-size: 20px;
  margin-bottom: 20px;
  color: #ffffff;
}

.titulo-categoria {
  font-family: Roboto serif;
  font-weight: 500;
  margin-top: 30px;
  color: #ffffff;
}

.btn-ajustes {
  margin-top: 60px;
}

/* Estilo general de alertas */
.swal2-custom-popup {
  background-color: #F1928D !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  width: 70% !important;
}
.swal2-toast1 {
  background-color: #F1928D !important; 
  border-radius: 8px !important;      
  box-shadow: none !important;           
  width: 70% !important;
}

.swal2-toast {
  background-color: #F1928D !important; 
  border-radius: 8px !important;      
  box-shadow: none !important;           
  width: 70% !important;
}

.swal2-icon.swal2-success {
  color: white !important;
  border-color: white !important;
}

.swal2-icon.swal2-error {
  color: white;
  border-color: white !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
  border-color: white !important;
}

.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success .swal2-success-line-long {
  background-color: white !important;
}

.swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-icon.swal2-error .swal2-x-mark-line-right {
  background-color: white !important;
}

.swal2-custom-title {
  color: #ffffff !important;
  text-align: left;
}

.swal2-custom-content {
  text-align: left;
  color: #ffffff !important;
}

.swal-tamano-texto {
  font-size: 14px !important;
}

/* Popup-user */
/* Barra de desplazamiento */
.article-popup-user::-webkit-scrollbar {
  width: 6px;
  display: block;
}

.article-popup-user::-webkit-scrollbar-track {
  background: transparent;
}

.article-popup-user::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

/* Tarjeta */
/* Estilos comunes para tarjetas con fondo gris (#585656) y rosa (#E2988F) */
.popup-user-article[style*="background-color: rgb(88, 86, 86)"],
.popup-user-article[style*="background-color:#585656"],
.popup-user-article[style*="background-color: rgb(226, 152, 143)"],
.popup-user-article[style*="background-color:#E2988F"],
.dark .popup-user-article[style*="background-color: rgb(88, 86, 86)"],
.dark .popup-user-article[style*="background-color:#585656"],
.dark .popup-user-article[style*="background-color: rgb(226, 152, 143)"],
.dark .popup-user-article[style*="background-color:#E2988F"] {
  color: white;
}

/* Elementos internos de tarjetas grises y rosas */
.popup-user-article[style*="background-color: rgb(88, 86, 86)"] head-article,
.popup-user-article[style*="background-color:#585656"] head-article,
.popup-user-article[style*="background-color: rgb(88, 86, 86)"] body-article,
.popup-user-article[style*="background-color:#585656"] body-article,
.popup-user-article[style*="background-color: rgb(88, 86, 86)"] footer-article,
.popup-user-article[style*="background-color:#585656"] footer-article,
.popup-user-article[style*="background-color: rgb(226, 152, 143)"] head-article,
.popup-user-article[style*="background-color:#E2988F"] head-article,
.popup-user-article[style*="background-color: rgb(226, 152, 143)"] body-article,
.popup-user-article[style*="background-color:#E2988F"] body-article,
.popup-user-article[style*="background-color: rgb(226, 152, 143)"] footer-article,
.popup-user-article[style*="background-color:#E2988F"] footer-article,
.dark .popup-user-article[style*="background-color: rgb(88, 86, 86)"] head-article,
.dark .popup-user-article[style*="background-color:#585656"] head-article,
.dark .popup-user-article[style*="background-color: rgb(88, 86, 86)"] body-article,
.dark .popup-user-article[style*="background-color:#585656"] body-article,
.dark .popup-user-article[style*="background-color: rgb(88, 86, 86)"] footer-article,
.dark .popup-user-article[style*="background-color:#585656"] footer-article,
.dark .popup-user-article[style*="background-color: rgb(226, 152, 143)"] head-article,
.dark .popup-user-article[style*="background-color:#E2988F"] head-article,
.dark .popup-user-article[style*="background-color: rgb(226, 152, 143)"] body-article,
.dark .popup-user-article[style*="background-color:#E2988F"] body-article,
.dark .popup-user-article[style*="background-color: rgb(226, 152, 143)"] footer-article,
.dark .popup-user-article[style*="background-color:#E2988F"] footer-article {
  color: white;
}

/* Elementos de texto en tarjetas grises y rosas */
.dark .popup-user-article[style*="background-color: rgb(226, 152, 143)"] p,
.dark .popup-user-article[style*="background-color:#E2988F"] p,
.dark .popup-user-article[style*="background-color: rgb(226, 152, 143)"] h5,
.dark .popup-user-article[style*="background-color:#E2988F"] h5,
.dark .popup-user-article[style*="background-color: rgb(226, 152, 143)"] a,
.dark .popup-user-article[style*="background-color:#E2988F"] a,
.dark .popup-user-article[style*="background-color: rgb(226, 152, 143)"] span,
.dark .popup-user-article[style*="background-color:#E2988F"] span .popup-user-article[style*="background-color: rgb(226, 152, 143)"] p,
.popup-user-article[style*="background-color:#E2988F"] p,
.popup-user-article[style*="background-color: rgb(226, 152, 143)"] h5,
.popup-user-article[style*="background-color:#E2988F"] h5,
.popup-user-article[style*="background-color: rgb(226, 152, 143)"] a,
.popup-user-article[style*="background-color:#E2988F"] a,
.popup-user-article[style*="background-color: rgb(226, 152, 143)"] span,
.popup-user-article[style*="background-color:#E2988F"] span {
  color: black !important;
}

.popup-user-article[style*="background-color: rgb(88, 86, 86)"] p,
.popup-user-article[style*="background-color:#585656"] p,
.popup-user-article[style*="background-color: rgb(88, 86, 86)"] h5,
.popup-user-article[style*="background-color:#585656"] h5,
.popup-user-article[style*="background-color: rgb(88, 86, 86)"] h6,
.popup-user-article[style*="background-color:#585656"] h6,
.popup-user-article[style*="background-color: rgb(88, 86, 86)"] a,
.popup-user-article[style*="background-color:#585656"] a,
.popup-user-article[style*="background-color: rgb(88, 86, 86)"] span,
.popup-user-article[style*="background-color:#585656"] span,
.dark .popup-user-article[style*="background-color: rgb(88, 86, 86)"] p,
.dark .popup-user-article[style*="background-color:#585656"] p,
.dark .popup-user-article[style*="background-color: rgb(88, 86, 86)"] h5,
.dark .popup-user-article[style*="background-color:#585656"] h5,
.dark .popup-user-article[style*="background-color: rgb(88, 86, 86)"] a,
.dark .popup-user-article[style*="background-color:#585656"] a,
.dark .popup-user-article[style*="background-color: rgb(88, 86, 86)"] span,
.dark .popup-user-article[style*="background-color:#585656"] span {
  color: white !important;
}

/* Botones en tarjetas grises y rosas */
.popup-user-article[style*="background-color: rgb(88, 86, 86)"] .inicio_art_button,
.popup-user-article[style*="background-color:#585656"] .inicio_art_button,
.popup-user-article[style*="background-color: rgb(226, 152, 143)"] .inicio_art_button,
.popup-user-article[style*="background-color:#E2988F"] .inicio_art_button,
.dark .popup-user-article[style*="background-color: rgb(88, 86, 86)"] .inicio_art_button,
.dark .popup-user-article[style*="background-color:#585656"] .inicio_art_button,
.dark .popup-user-article[style*="background-color: rgb(226, 152, 143)"] .inicio_art_button,
.dark .popup-user-article[style*="background-color:#E2988F"] .inicio_art_button {
  color: white;
  border-color: white;
}

/* Tarjeta blanca */
.popup-user-article[style*="background-color: rgb(242, 239, 230)"],
.popup-user-article[style*="background-color:#F2EFE6"] {
  color: black;
}

.popup-user-article[style*="background-color: rgb(242, 239, 230)"] head-article,
.popup-user-article[style*="background-color:#F2EFE6"] head-article,
.popup-user-article[style*="background-color: rgb(242, 239, 230)"] body-article,
.popup-user-article[style*="background-color:#F2EFE6"] body-article,
.popup-user-article[style*="background-color: rgb(242, 239, 230)"] footer-article,
.popup-user-article[style*="background-color:#F2EFE6"] footer-article {
  color: black;
}

.popup-user-article[style*="background-color: rgb(242, 239, 230)"] p,
.popup-user-article[style*="background-color:#F2EFE6"] p,
.popup-user-article[style*="background-color: rgb(242, 239, 230)"] h5,
.popup-user-article[style*="background-color:#F2EFE6"] h5,
.popup-user-article[style*="background-color: rgb(242, 239, 230)"] a,
.popup-user-article[style*="background-color:#F2EFE6"] a,
.popup-user-article[style*="background-color: rgb(242, 239, 230)"] span,
.popup-user-article[style*="background-color:#F2EFE6"] span {
  color: black !important;
}

.popup-user-article[style*="background-color: rgb(242, 239, 230)"] .inicio_art_button,
.popup-user-article[style*="background-color:#F2EFE6"] .inicio_art_button {
  color: black;
  border-color: black;
}

.article-popup-user {
  border-radius: 14.5px !important;
  max-height: calc(var(--viewport-height) * 0.95 - 250px);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  padding-bottom: 30px;
  padding-top: 40px;
}

.article-popup-user {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.popup-user-article {
  border-radius: 14.5px !important;
  width: 100%;
  max-width: 380px;
  min-height: 60px !important;
  margin: 0 auto;
  flex: 0 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  margin-top: -40px;
  z-index: 1;
}

.popup-user-article:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.2);
  z-index: 10;
  /* Valor alto para que se posicione sobre las demás */
  position: relative;
  /* Asegura que el z-index funcione correctamente */
}

.popup-user-article {
  font-size: 0.85rem;
  padding: 24px 24px 10px 24px;
}

.popup-user-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.profile-section {
  padding-bottom: 15px;
}

.popup-user-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.popup-user-footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;
  padding: 0;
  height: auto;
  min-height: 36px;
  margin-top: 5px;
}

.popup-user-actions {
  position: absolute;
  left: 0;
  max-width: 45%;
  overflow: visible;
}

.popup-user-info {
  position: absolute;
  right: 0;
  max-width: 45%;
  overflow: visible;
}

.popup-user-line {
  height: 14px;
  width: 1px;
  background-color: #ccc;
  margin: 0 5px;
}

.popup-user-actions a,
.popup-user-info a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.popup-user-actions span,
.popup-user-info span {
  font-size: 12px;
  /*color: #333;*/
  margin-left: 4px;
}

.popup-user-info,
.popup-user-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.popup-user-info svg,
.popup-user-actions svg {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.popup-user-actions .save-icon {
  display: none;
}

.popup-user-content p:first-of-type {
  /*margin-top: 5px; */
  font-size: 12px;
  font-weight: 400;
  /*display: none;*/
}

.popup-user-article .popup-user-content {
  font-size: 0.8rem;
}

.popup-user-article:last-child {
  margin-bottom: 20px;
}

.popup-user-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.popup-user-content p {
  font-size: 0.64rem;
  font-weight: 400 !important;
  line-height: 1.2;
}

.popup-user-actions,
.popup-user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  gap: 5px;
}

.popup-user-link h6,
.popup-user-link a,
.popup-user-link a:visited,
.popup-user-link a:hover,
.popup-user-link a:active {
  text-decoration: none !important;
  color: inherit;
}

.popup-user-content h6 {
  font-family: "Roboto Serif", serif;
  font-weight: 400 !important;
  font-size: 1rem;
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /*margin-top: 15px; */
  margin-bottom: 0;
}

.dark .popup-user-content h6 {
  color: black;
}

.popup-user-actions a,
.popup-user-actions a:visited,
.popup-user-actions a:hover,
.popup-user-actions a:active,
.popup-user-info a,
.popup-user-info a:visited,
.popup-user-info a:hover,
.popup-user-info a:active {
  text-decoration: none !important;
  color: inherit;
  display: flex;
  align-items: center;
}

.popup-user-content a {
  text-decoration: none;
}

.popup-user-article .popup-user-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Boton */
.card-button-pop {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: none;
  outline: none;
  border-radius: 50%;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #ffffff;
  text-decoration: none;
  /* Elimina el subrayado */
}

body.dark .card-button-pop {
  color: rgba(0, 0, 0, 0.5) !important;
}

html.dark .card-button-pop {
  color: rgba(0, 0, 0, 0.5) !important;
}

.card-button-pop:hover {
  transform: scale(1.1);
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
}

/* Imagen del autor */
.author-article-popup {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0px;
  width: 10%;
  padding: 2px;
  margin-right: auto;
  position: relative;
  left: 0;
}

.author-info-left {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.author-article-popup .author-image {
  width: 19.74px;
  height: 19.74px;
  border-radius: 15%;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 4px;
  /* separación a la derecha */
}

.author-article-popup .author-prefix {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-size: 12px;
}

.author-article-popup .author-name-popup {
  font-size: 12px;
  text-decoration: underline;
  color: inherit;
  font-style: italic;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: visible;
  min-width: 50px;
  display: inline-block;
}

.author-article-popup a {
  display: inline-flex;
  align-items: center;
}

.hidden-date-popup {
  margin-top: 5px !important;
}

@media (max-width: 1489px) and (min-width: 1200px) {
  .article-popup-user {
    max-height: calc(var(--viewport-height) * 0.93 - 210px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    padding-bottom: 30px;
  }

  /* Barra de desplazamiento */
  .article-popup-user::-webkit-scrollbar {
    width: 6px;
    display: block;
  }

  .article-popup-user::-webkit-scrollbar-track {
    background: transparent;
  }

  .article-popup-user::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
  }
}

@media (max-width: 1199px) and (min-width: 933px) {
  .article-popup-user {
    max-height: calc(var(--viewport-height) * 0.93 - 210px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    padding-bottom: 30px;
  }

  /* Barra de desplazamiento */
}

@media (max-width: 1199px) and (min-width: 933px) {
  .article-popup-user {
    max-height: calc(var(--viewport-height) * 0.93 - 210px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    padding-bottom: 30px;
  }

  /* Barra de desplazamiento */
  .article-popup-user::-webkit-scrollbar {
    width: 6px;
    display: block;
  }

  .article-popup-user::-webkit-scrollbar-track {
    background: transparent;
  }

  .article-popup-user::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
  }
}

@media (max-width: 1024px) and (min-width: 600px) {
  .popup-container__right {
    position: relative;
    width: 60%;
    height: 100%;
    padding: 20px 20px 12px 15x;
  }
}

/* Dispositivos moviles */
@media (max-width: 932px) and (min-width: 414px) {
  .article-popup-user {
    width: 100%;
    max-height: calc(98vh - 250px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    padding-bottom: 30px;
    padding-top: 43px;
  }

  .popup-user-article {
    /*width: 200px;*/
    max-width: 580px;
    min-height: 60px !important;
    margin: 0 auto;
    flex: 0 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    margin-top: -44px;
  }
}

@media (max-width: 412px) {
  .article-popup-user {
    max-height: calc(91vh - 210px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    padding-bottom: 30px;
  }
}

@media (max-width: 390px) {
  .article-popup-user {
    max-height: calc(88.7vh - 210px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    padding-bottom: 30px;
  }

  .popup-container {
    width: 80%;
    height: 82%;
  }
}

@media (max-width: 375px) {
  .article-popup-user {
    max-height: calc(86.2vh - 210px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    padding-bottom: 30px;
  }

  .popup-container {
    width: 80%;
    height: 78%;
  }

  .popup-container-2columns {
    height: 148px;
  }
}

@media (max-width: 344px) {
  .article-popup-user {
    max-height: calc(89vh - 210px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    padding-bottom: 30px;
  }

  .popup-container {
    width: 80%;
    height: 82%;
  }

  .popup-container-2columns {
    height: 148px;
  }
}

@media (max-width: 1024px) and (min-width: 600px) {
  .popup-container__right {
    position: relative;
    width: 60%;
    height: 100%;
    padding: 20px 20px 12px 15x;
  }
}

/* Dispositivos moviles */
@media (max-width: 932px) and (min-width: 414px) {
  .article-popup-user {
    width: 100%;
    max-height: calc(98vh - 250px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    padding-bottom: 30px;
    padding-top: 43px;
  }

  .popup-user-article {
    /*width: 200px;*/
    max-width: 580px;
    min-height: 60px !important;
    margin: 0 auto;
    flex: 0 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    margin-top: -44px;
  }
}

@media (max-width: 412px) {
  .article-popup-user {
    max-height: calc(91vh - 210px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    padding-bottom: 30px;
  }
}

@media (max-width: 390px) {
  .article-popup-user {
    max-height: calc(88.7vh - 210px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    padding-bottom: 30px;
  }

  .popup-container {
    width: 80%;
    height: 82%;
  }
}

@media (max-width: 375px) {
  .article-popup-user {
    max-height: calc(86.2vh - 210px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    padding-bottom: 30px;
  }

  .popup-container {
    width: 80%;
    height: 78%;
  }

  .popup-container-2columns {
    height: 148px;
  }
}

@media (max-width: 344px) {
  .article-popup-user {
    max-height: calc(89vh - 210px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    padding-bottom: 30px;
  }

  .popup-container {
    width: 80%;
    height: 82%;
  }

  .popup-container-2columns {
    height: 148px;
  }
}

/* Iconos en base a color tarjeta */
.like-icon path {
  fill: #8c8a8a;
}

.like-icon.liked path {
  fill: #f1928d;
}

.comment-icon path {
  fill: #8c8a8a;
}

/*.save-icon use {
  fill: #8c8a8a;
}

.save-icon.saved use {
  fill: #f1928d;
}*/

.menu-body{
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none; 
  -ms-overflow-style: none; 
}

.menu-body::-webkit-scrollbar {
  display: none;                /* Chrome, Safari y Edge */
}

ul .notification{
  list-style: none;
  width: 100%;
}

.notification {
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 10px 0;
  max-height: 200px;
  color: rgb(23, 23, 23);
}

.notification:hover {
  background-color: #CCC;
  cursor: pointer;
}

.notification .notification-image{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.notification .notification-image svg{
  fill: var(--logo-dot-color) !important;
  width: 20px;
  height: 18px;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(20%) translateY(30%);
}
.notification .notification-text{
  width: fit-content;
  padding-left: 5px;
}
.notification .notification-time {
  min-width: 25px;
  max-width: 25px;
  margin-left: auto;
  justify-self: flex-end;
  align-self: flex-end;
  height: 35px;
  display: flex;
  align-items: center;
  text-align: end;
  justify-content: flex-end;
  color: var(--logo-dot-color);
}

.notification .notification-time p {
  font-size: 8px;
}

.notification p{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}

.notification p strong{
  font-size: 11px;
}

.notification a{
  text-decoration: none;
  color: rgb(23, 23, 23);
}

.notification img{
  height: 100%;
  width: 100%;
}

.rounded-square {
  background-color: #FEFAFA;
  border-radius: .175rem;
  height: 35px;
  width: 35px;
  overflow: hidden;
}

.dot-icon-div {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

}

.dot-icon{

  width: 10px;
  height: 10px;
  background-color: var(--logo-dot-color);
  border-radius: 100%;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(50%) translateY(50%);

}

/* popup */
/* rosa */
.popup-user-article[style*="rgb(226, 152, 143)"] .like-icon path,
.popup-user-article[style*="e2988f"] .like-icon path,
.popup-user-article[style*="E2988F"] .like-icon path {
  fill: #333;
}

.popup-user-article[style*="rgb(226, 152, 143)"] .like-icon.liked path,
.popup-user-article[style*="e2988f"] .like-icon.liked path,
.popup-user-article[style*="E2988F"] .like-icon.liked path {
  fill: #ffffff !important;
}

.popup-user-article[style*="rgb(226, 152, 143)"] .comment-icon path,
.popup-user-article[style*="e2988f"] .comment-icon path,
.popup-user-article[style*="E2988F"] .comment-icon path {
  fill: #333 !important;
}

.popup-user-article[style*="rgb(226, 152, 143)"] .save-icon use,
.popup-user-article[style*="e2988f"] .save-icon use,
.popup-user-article[style*="E2988F"] .save-icon use {
  fill: #333;
}

.popup-user-article[style*="rgb(226, 152, 143)"] .save-icon.saved use,
.popup-user-article[style*="e2988f"] .save-icon.saved use,
.popup-user-article[style*="E2988F"] .save-icon.saved use {
  fill: #ffffff !important;
}

/* gris */
.popup-user-article[style*="background-color:#585656"] .like-icon path,
.popup-user-article[style*="background-color: #585656"] .like-icon path,
.popup-user-article[style*="background-color:rgb(88, 86, 86)"] .like-icon path,
.popup-user-article[style*="background-color: rgb(88, 86, 86)"] .like-icon path {
  fill: #ffffff;
}

.popup-user-article[style*="background-color:#585656"] .like-icon.liked path,
.popup-user-article[style*="background-color: #585656"] .like-icon.liked path,
.popup-user-article[style*="background-color:rgb(88, 86, 86)"] .like-icon.liked path,
.popup-user-article[style*="background-color: rgb(88, 86, 86)"] .like-icon.liked path {
  fill: #f1928d !important;
}

.popup-user-article[style*="background-color:#585656"] .comment-icon path,
.popup-user-article[style*="background-color: #585656"] .comment-icon path,
.popup-user-article[style*="background-color:rgb(88, 86, 86)"] .comment-icon path,
.popup-user-article[style*="background-color: rgb(88, 86, 86)"] .comment-icon path {
  fill: #ffffff !important;
}

.popup-user-article[style*="background-color:#585656"] .save-icon use,
.popup-user-article[style*="background-color: #585656"] .save-icon use,
.popup-user-article[style*="background-color:rgb(88, 86, 86)"] .save-icon use,
.popup-user-article[style*="background-color: rgb(88, 86, 86)"] .save-icon use {
  fill: #ffffff;
}

.popup-user-article[style*="background-color:#585656"] .save-icon.saved use,
.popup-user-article[style*="background-color: #585656"] .save-icon.saved use,
.popup-user-article[style*="background-color:rgb(88, 86, 86)"] .save-icon.saved use,
.popup-user-article[style*="background-color: rgb(88, 86, 86)"] .save-icon.saved use {
  fill: #f1928d !important;
}

/* mensajes de no data */
/* Estilos base */
.no-perfiles-mensaje,
.mensaje-info {
  text-align: center;
  padding: 20px;
  margin: 20px 0;
  border-radius: 8px;
  font-size: 18px;
  color: #6c757d;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 5;
  /* Asegura que esté por encima de otros elementos */
  font-weight: bold;
  /* Mayor peso para mejor visibilidad */
}

.dark .no-perfiles-mensaje,
.dark .mensaje-info {
  color: #fff;
}

/* Media Queries */
/* Para pantallas de hasta 1000px */
@media (max-width: 1024px) {
  .input__border {
    margin-top: 20px !important;
  }

  .sidebar__close-btn {
    margin-top: 128px;
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    fill: #363636;
  }
}

@media (max-width: 1000px) {

  .no-perfiles-mensaje,
  .mensaje-info {
    padding: 18px;
    margin: 18px 0;
    font-size: 17px;
  }

  .sidebar__close-btn {
    margin-top: 80px;
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    fill: #363636;
  }
}

/* Para pantallas de hasta 800px */
@media (max-width: 800px) {

  .no-perfiles-mensaje,
  .mensaje-info {
    padding: 16px;
    margin: 16px 0;
    font-size: 16px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .sidebar__close-btn {
    margin-top: 80px;
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    fill: #363636;
  }
}

/* Para pantallas de hasta 750px */
@media (max-width: 750px) {

  .no-perfiles-mensaje,
  .mensaje-info {
    padding: 15px;
    margin: 15px auto;
    font-size: 15px;
    width: 92%;
  }

  .sidebar__close-btn {
    margin-top: 80px;
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    fill: #363636;
  }
}

/* Para pantallas de hasta 540px */
@media (max-width: 540px) {

  .no-perfiles-mensaje,
  .mensaje-info {
    padding: 14px;
    margin: 14px auto;
    font-size: 14px;
    width: 94%;
    font-weight: 500;
  }
}

/* Para pantallas de hasta 480px */
@media (max-width: 480px) {

  .no-perfiles-mensaje,
  .mensaje-info {
    padding: 12px;
    margin: -50px auto;
    font-size: 14px;
    width: 96%;
  }
}

/* Para pantallas de hasta 390px */
@media (max-width: 390px) {

  .no-perfiles-mensaje,
  .mensaje-info {
    padding: 10px;
    margin: -50px auto;
    font-size: 13px;
    width: 98%;
    font-weight: 600;
  }
}

/* Mi perfil */ 
.card-mis-articulos {
  position: relative;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 600px;
  margin-top: 20px;
}

.card-mis-articulos .resume-article {
  padding: 10px;
}

.card-mis-articulos:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.card-mis-articulos::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 8px;
  background: linear-gradient(45deg, #E2988F, #E2988F, #E2988F, #E2988F, #E2988F);
  background-size: 400% 400%;
  z-index: -2;
  animation: animatedBorder 3s ease infinite;
}

.card-mis-articulos::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #E9EAE4;
  border-radius: 8px;
  z-index: -1;
}

.dark .card-mis-articulos {
  position: relative;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 600px;
  margin-top: 20px;
}

.dark .card-mis-articulos:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.dark .card-mis-articulos::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 8px;
  background: linear-gradient(45deg, #E2988F, #E2988F, #E2988F, #E2988F, #E2988F);
  background-size: 400% 400%;
  z-index: -2;
  animation: animatedBorder 3s ease infinite;
}

.dark .card-mis-articulos::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #363636;
  border-radius: 8px;
  z-index: -1;
}

.circle-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
  /* Oscurece el área fuera del círculo */
  pointer-events: none;
}

#imagecrop {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.articles._2columns.no-bio-margin {
  margin-top: 20px;
}

.card-mis-articulos .division-article {
  width: calc(100% + 46px) !important;
  margin: 10px -35px;
}

.card-mis-articulos .content-article {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: -webkit-fill-available;
  height: max-content;
}

.card-mis-articulos .container-fecha-editar {
  width: 440px;
}

.card-mis-articulos .body-article {
  padding-top: 0px;
}

@media only screen and (min-width: 7000px) and (max-width: 7500px) {
  .bio-container {
    width: 9.5% !important;
  }
}

@media only screen and (min-width: 5600px) and (max-width: 6000px) {
  .bio-container {
    width: 12% !important;
  }
}

@media only screen and (min-width: 4300px) and (max-width: 4500px) {
  .bio-container {
    width: 16% !important;
  }
}

@media only screen and (min-width: 3401px) and (max-width: 3900px) {
  .bio-container {
    width: 23% !important;
  }
}


@media only screen and (min-width: 2790px) and (max-width: 3000px) {
  .bio-container {
    width: 23% !important;
  }
}

@media only screen and (min-width: 2500px) and (max-width: 2789px) {
  .bio-container {
    width: 27% !important;
  }
}

@media only screen and (min-width: 2301px) and (max-width: 2499px) {
  .bio-container {
    width: 30% !important;
  }
}

@media only screen and (min-width: 2201px) and (max-width: 2300px) {
  .bio-container {
    width: 33% !important;
  }
}

@media only screen and (min-width: 2201px) and (max-width: 2300px) {
  .bio-container {
    width: 33% !important;
  }
}

@media only screen and (min-width: 2121px) and (max-width: 2200px) {
  .bio-container {
    width: 33% !important;
  }
}

@media only screen and (min-width: 2051px) and (max-width: 2120px) {
  .bio-container {
    width: 34% !important;
  }
}

@media only screen and (min-width: 1951px) and (max-width: 2050px) {
  .bio-container {
    width: 36% !important;
  }
}

@media only screen and (min-width: 1701px) and (max-width: 1950px) {
  .bio-container {
    width: 38% !important;
  }
}

@media only screen and (min-width: 1900px) and (max-width: 1950px) { 
  .articles._2columns { 
    width: 50% !important; 
  }
}

@media only screen and (min-width: 1500px) and (max-width: 1700px) {
  .bio-container {
    width: 44% !important;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1499px) {
  .bio-container {
    width: 50% !important;
  }
}

@media only screen and (min-width: 1311px) and (max-width: 1399px) {
  .bio-container {
    width: 52% !important;
  }
}

@media only screen and (min-width: 1281px) and (max-width: 1310px) {
  .bio-container {
    width: 54% !important;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1280px) {
  .bio-container {
    width: 57% !important;
  }
}

@media only screen and (min-width: 1100px) and (max-width: 1199px) {
  .bio-container {
    width: 62% !important;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1099px) {
  .bio-container {
    width: 68% !important;
  }
}

@media only screen and (min-width: 941px) and (max-width: 1023px) {
  .card-mis-articulos {
    width: 600px;
    max-height: max-content;
  }

  .articles__mobile.editable {
    width: 36%;
  }

  .bio-container {
    width: 70% !important;
  }

  .container-fecha-editar {
    height: 42px;
    margin-top: -10px;
    width: 200px;
  }
  .card-masblogs {
    width: 290px !important;
  }
}

@media only screen and (min-width: 885px) and (max-width: 940px) {
  .bio-container {
    width: 70% !important;
  }

  .card-mis-articulos, .dark .card-mis-articulos {
    width: 600px;
    max-height: max-content;
    margin-top: 0px;
    margin-bottom: 20px;
  }

  .container-fecha-editar {
    height: 42px;
    margin-top: -10px;
    width: 200px;
  }

  .articles__mobile.editable {
    margin-top: 0px !important;
    width: 36%;
  }
  .card-masblogs {
    width: 290px !important;
  }
}

@media only screen and (min-width: 799px) and (max-width: 885px) {
  .articles__mobile.editable {
    margin-top: 0px !important;
    width: 53%;
  }

  .bio-container {
    width: 73% !important;
  }

  .articles.articles._2columns h5 {
    font-size: 13.03px !important;
  }

  .articles._2columns p {
    font-size: 11.31px !important;
  }

  .card-mis-articulos, .dark .card-mis-articulos {
    width: 550px !important;
    max-height: max-content;
    margin-bottom: 20px !important;
  }

  .card-mis-articulos .resume-article {
    padding-left: 30px;
  }

  .container-fecha-editar {
    width: 390px !important;
    }
  .card-masblogs {
      width: 290px !important;
  }
}

@media only screen and (min-width: 700px) and (max-width: 798px) {
  .articles__mobile.editable {
    margin-top: 0px !important;
    width: 60%;
  }

  .bio-container {
    width: 73% !important;
  }

  .card-mis-articulos, .dark .card-mis-articulos {
    width: 510px !important;
    max-height: max-content;
    margin-bottom: 20px !important;
  }

  .card-mis-articulos .resume-article {
    padding-left: 30px;
  }

  .container-fecha-editar {
    width: 350px !important;
  }
}

@media only screen and (min-width: 600px) and (max-width: 700px) {
  .articles__mobile.editable {
    margin-top: 0px !important;
    width: 72%;
  }

  .bio-container {
    width: 73% !important;
  }

  .card-mis-articulos, .dark .card-mis-articulos {
    width: 450px !important;
    max-height: max-content;
    margin-bottom: 20px !important;
  }

  .card-mis-articulos .resume-article {
    padding-left: 30px;
  }

  .container-fecha-editar {
    width: 290px !important;
  }
}

@media only screen and (min-width: 541px) and (max-width: 600px) {
  .articles__mobile.editable {
    margin-top: 0px !important;
    width: 78%;
  }

  .bio-container {
    width: 72% !important;
  }

  .card-mis-articulos, .dark .card-mis-articulos {
    width: 420px !important;
    max-height: max-content;
    margin-bottom: 20px !important;
  }

  .card-mis-articulos .resume-article {
    padding-left: 30px;
  }

  .container-fecha-editar {
    width: 250px !important;
  }
}

@media only screen and (min-width: 480px) and (max-width: 541px) {
  .articles__mobile.editable {
    margin-top: 0px !important;
    width: 78%;
  }

  .bio-container {
    width: 80% !important;
  }

  .card-mis-articulos, .dark .card-mis-articulos {
    width: 370px !important;
    max-height: max-content;
    margin-bottom: 20px !important;
  }

  .card-mis-articulos .resume-article {
    padding-left: 30px;
  }

  .container-fecha-editar {
    width: 210px !important;
  }
}

@media (max-width: 480px) {
  .articles__mobile.editable {
    margin-top: 0px !important;
    width: 78%;
  }

  .bio-container {
    width: 78% !important;
  }

  .card-mis-articulos .titulo-article h5 {
     padding-top: 10px;
  }

  .card-mis-articulos, .dark .card-mis-articulos {
    width: 340px !important;
    max-height: max-content;
    margin-bottom: 20px !important;
  }

  .card-mis-articulos .resume-article {
    padding-left: 30px;
  }

  .container-fecha-editar {
    width: 190px !important;
  }

  .card-mis-articulos .posicion-default {
    top: -0px;
    right: 10px;
  }

  .card-mis-articulos .division-article {
    width: calc(100% + 42px) !important;
    margin: 10px -35px;
}
}

@media (max-width: 412px) {
  .articles__mobile.editable {
    margin-top: 0px !important;
    width: 78%;
  }

  .bio-container {
    width: 78% !important;
  }

  .card-mis-articulos, .dark .card-mis-articulos {
    width: 340px !important;
    max-height: max-content;
    margin-bottom: 20px !important;
  }

  .card-mis-articulos .resume-article {
    padding-left: 30px;
  }

  .card-mis-articulos .posicion-default {
    top: -0px;
    right: 10px;
  }

  .container-fecha-editar {
    width: 190px !important;
  }
}

@media (max-width: 390px) {
  .articles__mobile.editable {
    margin-top: 0px !important;
    width: 84%;
  }

  .bio-container {
    width: 78% !important;
  }

  .card-mis-articulos, .dark .card-mis-articulos {
    width: 300px !important;
    max-height: max-content;
    margin-bottom: 20px !important;
  }

  .card-mis-articulos .resume-article {
    padding-left: 30px;
  }

  .container-fecha-editar {
    width: 150px !important;
  }
  
  .card-mis-articulos .posicion-default {
    top: -0px;
    right: 10px;
  }
}

@media (max-width: 360px) {
  .articles__mobile.editable {
    margin-top: 0px !important;
    width: 89%;
  }

  .bio-container {
    width: 78% !important;
  }

  .card-mis-articulos, .dark .card-mis-articulos {
    width: 280px !important;
    max-height: max-content;
    margin-bottom: 20px !important;
  }

  .card-mis-articulos .resume-article {
    padding-left: 30px;
  }

  .container-fecha-editar {
    width: 140px !important;
  }
  
  .card-mis-articulos .posicion-default {
    top: -0px;
    right: 10px;
  }
}

@media (max-width: 344px) {
  .articles__mobile.editable {
    margin-top: 0px !important;
    width: 89%;
  }

  .bio-container {
    width: 78% !important;
  }

  .card-mis-articulos, .dark .card-mis-articulos {
    width: 260px !important;
    max-height: max-content;
    margin-bottom: 20px !important;
  }

  .card-mis-articulos .resume-article {
    padding-left: 30px;
  }

  .container-fecha-editar {
    width: 120px !important;
  }
  
  .card-mis-articulos .posicion-default {
    top: -0px;
    right: 10px;
  }
}

@media (max-width: 300px) {
  .articles__mobile.editable {
    margin-top: 0px !important;
    width: 115%;
  }

  .bio-container {
    width: 78% !important;
  }

  .card-mis-articulos, .dark .card-mis-articulos {
    width: 220px !important;
    max-height: max-content;
    margin-bottom: 20px !important;
  }

  .card-mis-articulos .resume-article {
    padding-left: 30px;
  }

  .container-fecha-editar {
    width: 110px !important;
  }
  
  .card-mis-articulos .posicion-default {
    top: -0px;
    right: 10px;
  }
}

/* ================= Texto Justificado ===================== */
.not-justified-text p,
.not-justified-text div,
.not-justified-text section,
.not-justified-text h1,
.not-justified-text h2,
.not-justified-text h3,
.not-justified-text textarea
{
  text-align: left;
  hyphens: none;
}
.justified-text p,
.justified-text div,
.justified-text section,
.justified-text h1,
.justified-text h2,
.justified-text h3,
.justified-text textarea
{
  text-align: justify;
  hyphens: auto;
}
/* ================= Fin Texto Justificado ===================== */

/* ==================== Fuentes ===================== */
.roboto-text a,
.roboto-text p,
.roboto-text div,
.roboto-text section,
.roboto-text h1,
.roboto-text h2,
.roboto-text h3,
.roboto-text textarea,
.roboto-text ul li,
.roboto-text ol li,
.roboto-text figcaption,
.roboto-text #editor a,
.roboto-text #editor p,
.roboto-text #editor div,
.roboto-text #editor section,
.roboto-text #editor h1,
.roboto-text #editor h2,
.roboto-text #editor h3,
.roboto-text #editor textarea,
.roboto-text #editor ul li,
.roboto-text #editor ol li 
{
  font-family: 'Roboto';
}
.roboto-serif-text a,
.roboto-serif-text p,
.roboto-serif-text div,
.roboto-serif-text section,
.roboto-serif-text h1,
.roboto-serif-text h2,
.roboto-serif-text h3,
.roboto-serif-text textarea,
.roboto-serif-text ul li,
.roboto-serif-text ol li,
.roboto-serif-text figcaption, 
.roboto-serif-text #editor a,
.roboto-serif-text #editor p,
.roboto-serif-text #editor div,
.roboto-serif-text #editor section,
.roboto-serif-text #editor h1,
.roboto-serif-text #editor h2,
.roboto-serif-text #editor h3,
.roboto-serif-text #editor textarea,
.roboto-serif-text #editor ul li,
.roboto-serif-text #editor ol li
{
  font-family: 'Roboto serif';
}
/* ==================== Fin Fuentes ===================== */

/* ==================== Comentarios ===================== */
.separador-seccion{
  border: none;
  border-top: #000 1px solid;
  width: 55%;
  padding-top: 25px;
  margin-top: 25px;
}
.dark .separador-seccion{
  border-top: #fff 1px solid;
}
#section-comentarios-art{
  width: 55%;/*la misma que tiene la seccion de articulo*/
}
@media only screen and (min-width:360px) and (max-width: 884px) {
  #section-comentarios-art, .separador-seccion{
    width: 85%;
  }
  .container-comentar i{
    font-size: 16px;
  }
}


.comentarios-container{
  width: 100%; 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start; 
  gap: 15px;
}
.text-center{
  text-align: center;
}
.resumen-comentarios span, .resumen-comentarios a{
  font-size: 14px !important;
}
.cont-com .dark #editor p,
.cont-com .dark #editor p i,
.cont-com .dark #editor p strong {
  color: #fff !important;
}
.input-com{
  color: #000;
  font-size: 12px;
}
.dark .input-com{
  color: #fff;
}
.cont-com{
  background-color: #b3b3b3;
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cont-com-txt{
  display: flex;
  flex-direction: column;
  width: 95%;
}
.comm-null{
  text-align: center;
  font-style: italic;
  padding: 15px 0;
  font-size: 18px;
}
.dark .cont-com{
  background-color: #8f8f8f;
}
.btn-comenta{
  cursor: pointer;
  padding-left: 15px;
}
.user-com{
  display:flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.user-photo img{
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 20%;
}
.photo-comentario img{/*las fotos de los comentarios hechos estaran mas pequeñas*/
  width: 50px;
  height: 50px;
}
.user-info-com{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 5px;
}
.com-nombre{
  font-size: 18px;
  color: #000;
  font-weight: 600;
}
.dark .com-nombre{
  color: #fff;
}
.com-user, .com-fecha{
  font-size: 12px;
  color: #505050;
  font-weight: 400;
}
.dark .com-user, .dark .com-fecha{
  color: #c7c7c7;
}
/*estilo de los hilos*/
.thread-respuestas{
  margin: 0 !important;
  padding: 0 !important;
}
.thread-respuestas .comentarios-mostrar{
  margin-left: 0;
}
.thread-res-comp{
  font-size: 14px;
}
.blogui-comentario > .comentarios-mostrar > .content__comentario > .thread-res-comp{
  margin-left: 30px;
}
.respuesta-coment{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px;
}
.info-resp, .info-resp b{
  font-size: 14px;
}
.cancel-resp{
  cursor: pointer;
}
.container-comentar {
  margin-bottom: 40px;
}

.comentarios-mostrar {
  /*margin-top: 20px;*/
  margin-left: 30px;
}

.content__comentario {
  padding-top: 20px;
  position: relative;
}

.blogui-comentario .content__comentario span{
  font-size: 16px;;
}

.thread-respuestas .comm-null{
  display: none;
}

.swal2-popup.swal-alertasesion-bg {
  height: auto !important;
}

.swal-alertasesion-bg .swal2-icon{
  margin: 0 !important;
}

.swal-alerta-sesion-cancel {
 font-size: 16px !important;
 background-color: #aba9a9 !important;
}

.swal-alerta-sesion-confirm{
  font-size: 16px !important;
  background-color: #F1928D !important;
}
/* estilos para editor (input) de comentario */
.cont-com  #editor .ck-placeholder::before{
  color: #d6d6d6 !important;
}

.btn-ver-respuestas{
  cursor: pointer;
}

.cont-com #editor p,
.cont-com #editor p i,
.cont-com #editor p strong,
.cont-com #editor p br {
  color: #000;
  font-size: 14px !important;
}

.dark .cont-com #editor p,
.dark .cont-com #editor p i,
.dark .cont-com #editor p strong,
.dark .cont-com #editor p br {
  color: #fff !important;
}

.cont-com #editor .ck-content p {
    /* resume-article change the default p diplay in the ckeditor, los movi de la vista */
  display: block;
}
.cont-com #editor {
  position: relative;
  z-index: 1;
  margin-bottom: 0 !important;
  padding: 3px 6px !important;
  font-family: "Roboto", serif !important;
  font-size: 12px !important;
  line-height: 1.5;
  overflow: hidden;
  background: none !important;
  border: none !important;
  outline: none;
  display: flex;
  justify-content: center;
  text-overflow: ellipsis;
  min-height: 30px !important;
  max-height: 80px !important;
  white-space: wrap;
}
.cont-com #editor p{
  overflow-y: auto;
  margin: 0 !important;
}
.cont-com #editor p, .cont-com #editor p i, .cont-com #editor p strong, .cont-com #editor ul li{
  color: #000;
  font-size: 12px;
  margin: 0;
  font-family: "Roboto", serif !important;
}
.cont-com #editor::-webkit-scrollbar {
  display: none;
}
.cont-com #editor ol {
  font-size: inherit;
}
.icons-respuestas a {
  color: #000;
}
.dark .icons-respuestas a {
  color: #fff;
}
.resumen-comentarios{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 5px;
}
.resumen-comentarios img{
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 20%;
}

@media only screen and (max-width: 500px) {
  .cont-com-txt{
    width: 92% !important;
  }
  .btn-comenta{
    padding-left: 0 !important;
  }
  .resumen-comentarios {
    gap: 6px;
  }
  .resumen-comentarios span, .resumen-comentarios a{
    font-size: 12px !important;
  }
  .com-nombre {
    font-size: 16px;
  }
  .com-user, .com-fecha {
    font-size: 10px;
  }
  .user-photo img {
    width: 60px;
    height: 60px;
  }
  .user-photo.photo-comentario img {
    width: 45px;
    height: 45px;
  }
  .resumen-comentarios img {
    width: 18px;
    height: 18px;
  }
  .cont-com #editor p, .cont-com #editor p i, .cont-com #editor p strong, .cont-com #editor p br {
    color: #000;
    font-size: 12px !important;
  }
  .container-comentar {
    margin-bottom: 30px;
  }
  .respuesta-coment {
    padding: 4px;
  }
  .info-resp, .info-resp b {
    font-size: 12px;
  }
}
/* Mostrar mensaje de 'cargando' cuando no se ha cargado por completo la pagina */
.hidden-contenido{
  visibility: hidden;
}
.cargando-message{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #363636e5;
  z-index: 900;
  position: absolute;
  top: 0;
  transition: opacity 0.3s ease-out, visibility 0.3s;
}
.cargando-message span{
  padding: 4px 12px;
  border-radius: 10px;
  background-color: #fff;
  color: #000;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #e2988f;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* seccion mas bloguis */
/* Clase principal de la tarjeta */
.card-masblogs .resume-article {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: -20px;
}

.card-masblogs .content-article {
    display: flex;
    flex-direction: column;
    flex: 1; 
}

.card-masblogs {
    position: relative;
    width: 400px;
    height: 330px !important;
    border-radius: 14.46px;
    flex-shrink: 0; 
    margin-right: 2px; 
    display: flex; /* Añadir flexbox */
    flex-direction: column; /* Dirección vertical */
}

.card-masblogs:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.card-masblogs::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 8px;
  background: linear-gradient(45deg, #E2988F, #E2988F, #E2988F, #E2988F, #E2988F);
  background-size: 400% 400%;
  z-index: -2;
  animation: animatedBorder 3s ease infinite;
}

.card-masblogs::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #E9EAE4;
  border-radius: 8px;
  z-index: -1;
}

.card-masblogs:last-child {
    margin-right: 0; 
}

.dark .card-masblogs {
    position: relative;
    width: 400px;
    height: 330px !important;
    border-radius: 14.46px;
    flex-shrink: 0; 
    margin-right: 2px;
}

.dark .card-masblogs:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.dark .card-masblogs::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 8px;
  background: linear-gradient(45deg, #E2988F, #E2988F, #E2988F, #E2988F, #E2988F);
  background-size: 400% 400%;
  z-index: -2;
  animation: animatedBorder 3s ease infinite;
}

.dark .card-masblogs::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #363636;
  border-radius: 8px;
  z-index: -1;
}

.dark .card-masblogs:last-child {
    margin-right: 0; 
}

.articles.horizontal {
    flex-direction: row;
    width: auto;
    max-width: 840px;
    margin-left: 20px;
    margin-right: 20px;
    height: 380px !important;
    overflow: hidden;
    overflow-x: auto;
    align-items: center;
    justify-content: flex-start;
    display: flex;
    gap: 20px;
}

@media (min-width: 1200px) and (max-width: 4000px) {
  .articles.horizontal .card-masblogs{
    max-width: 840px;
    scroll-snap-type: x mandatory;
  }

  .card-masblogs,
  .dark .card-masblogs {
    width: 400px;
    scroll-snap-align: start;
  }

  .articles.horizontal .card-masblogs{
    scroll-behavior: smooth;
  }

  .card-masblogs .division-article {
    width: 400px !important;
    margin: 10px -30px;
  }
}

@media (min-width: 1023px) and (max-width: 1200px) {
  .card-masblogs,
  .dark .card-masblogs {
    width: 300px;
    height: 330px !important;
    scroll-snap-align: start;
  }

  .card-masblogs .division-article {
    width: 300px !important;
    margin: 10px -30px;
  }
}

@media (min-width: 885px) and (max-width: 1023px) {
  .card-masblogs,
  .dark .card-masblogs {
    width: 290px;
    height: 355px !important;
    min-width: 290px;
            margin-bottom: 30px;
  }

  .card-masblogs .titulo-article h5 {
    padding-top: 10px;
  }

  .card-masblogs .division-article {
    width: 290px !important;
    margin: 10px -30px;
  }

  .card-masblogs .container-fecha-editar {
    align-items: center !important;
  }
}

@media (min-width: 800px) and (max-width: 885px) {
  .card-masblogs,
  .dark .card-masblogs {
    width: 290px;
    height: 330px !important;
    min-width: 290px;
  }

  .card-masblogs .titulo-article h5 {
    padding-top: 10px;
  }

  .card-masblogs .division-article {
    width: 290px !important;
    margin: 10px -25px;
  }
}

@media (min-width: 650px) and (max-width: 800px) {
  .card-masblogs,
  .dark .card-masblogs {
    width: 290px;
    min-width: 290px;
    margin-right: 10px;
    height: 340px !important;
  }

  .card-masblogs .titulo-article h5 {
    padding-top: 10px;
  }

  .card-masblogs .body-article {
    margin-top: 0px !important;
  }

  .card-masblogs .division-article {
    width: 290px !important;
    margin: 10px -25px;
  }
}

@media (min-width: 480px) and (max-width: 650px) {
  .card-masblogs,
  .dark .card-masblogs {
    width: 290px;
    min-width: 290px;
    margin-right: 10px;
    height: 345px !important;
  }

  .card-masblogs .titulo-article h5 {
    padding-top: 10px;
  }

  .card-masblogs .body-article {
    margin-top: 0px !important;
  }

  .card-masblogs .division-article {
    width: 290px !important;
    margin: 10px -25px;
  }
}

@media (max-width: 480px) {
  .card-masblogs,
  .dark .card-masblogs {
    width: 290px;
    min-width: 290px;
    margin-right: 10px;
    height: 340px !important;
  }

  .card-masblogs .titulo-article h5 {
    padding-top: 10px;
  }

  .card-masblogs .body-article {
    margin-top: 0px !important;
  }

  .card-masblogs .posicion-default {
    top: -5px;
    right: 15px;
  }

  .card-masblogs .division-article {
    width: 290px !important;
    margin: 10px -25px;
  }
}

@media (max-width: 429px) {
  .card-masblogs .posicion-default {
    top: -5px;
    right: 15px;
  }
}

@media (max-width: 420px) {
  .card-masblogs,
  .dark .card-masblogs {
    width: 290px;
    min-width: 290px;
    margin-right: 10px;
    height: 340px !important;
  }

  .card-masblogs .titulo-article h5 {
    padding-top: 10px;
  }

  .card-masblogs .body-article {
    margin-top: 0px !important;
  }

  .card-masblogs .posicion-default {
    top: -5px;
    right: 15px;
  }

  .card-masblogs .division-article {
    width: 290px !important;
    margin: 10px -25px;
  }
}

@media (max-width: 380px) {
  .card-masblogs,
  .dark .card-masblogs {
    width: 290px;
    min-width: 290px;
    margin-right: 10px;
    height: 340px !important;
  }

  .card-masblogs .titulo-article h5 {
    padding-top: 10px;
  }

  .card-masblogs .body-article {
    margin-top: 0px !important;
  }

  .card-masblogs .division-article {
    width: 290px !important;
    margin: 10px -25px;
  }
}

@media (max-width: 360px) {
  .card-masblogs,
  .dark .card-masblogs {
    width: 270px;
    min-width: 270px;
    margin-right: 10px;
    height: 340px !important;
  }

  .card-masblogs .titulo-article h5 {
    padding-top: 10px;
  }

  .card-masblogs .body-article {
    margin-top: 0px !important;
  }

  .card-masblogs .division-article {
    width: 270px !important;
    margin: 10px -25px;
  }
}

@media (max-width: 344px) {
  .card-masblogs,
  .dark .card-masblogs {
    width: 250px;
    min-width: 250px;
    margin-right: 10px;
    height: 340px !important;
  }

  .card-masblogs .titulo-article h5 {
    padding-top: 10px;
  }

  .card-masblogs .body-article {
    margin-top: 0px !important;
  }

  .card-masblogs .division-article {
    width: 250px !important;
    margin: 10px -25px;
  }
}

.articles.horizontal .card-masblogs{
  scroll-snap-type: x mandatory;
}

.card-masblogs {
  scroll-snap-align: start;
}

/* Configuracion */
.menu-configuracion {
  padding-top: 20px;
  margin-bottom: 30px;
}

.opciones-menu {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 800px;
  margin: 0 auto;
}

.fila {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.opcion-menu {
  width: 377.94px;
  height: 65.13px;
  background-color: #1a1a1a;
  color: #ffffff;
  border: none;
  border-radius: 15px;
  padding: 0 20px;
  font-size: 25px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: background-color 0.3s ease;
  box-sizing: border-box;
}

.opcion-menu:hover {
  background-color: rgba(26, 26, 26, 0.67);
}

a:hover {
  text-decoration: none !important;
}

.icono {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 12px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Forzar color rosa */
  filter: brightness(0) saturate(100%) invert(74%) sepia(17%) saturate(1640%) hue-rotate(314deg) brightness(100%) contrast(94%);
}

/* Iconos específicos */
.perfil-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F1928D"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
}

.idioma-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F1928D"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>');
}

.politicas-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F1928D"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>');
}

.contacto-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F1928D"><path d="M20 0H4v2h16V0zM4 24h16v-2H4v2zM20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 2.75c1.24 0 2.25 1.01 2.25 2.25s-1.01 2.25-2.25 2.25S9.75 10.24 9.75 9 10.76 6.75 12 6.75zM17 17H7v-1.5c0-1.67 3.33-2.5 5-2.5s5 .83 5 2.5V17z"/></svg>');
}

.eliminados-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F1928D"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
}

.bloqueados-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F1928D"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"/></svg>');
}

.preferencias-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F1928D"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
}

.actividad-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F1928D"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 14l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/></svg>');
}

.seccion-vista {
  background-color: #1a1a1a;
  border-radius: 15px;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.header-seccion {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #333;
  padding-bottom: 15px;
}

.btn-volver {
  background-color: transparent; 
  color: white;
  border: none;
  border-radius: 80px;
  padding: 8px 8px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.icono-volver {
  margin-right: 5px;
  font-size: 18px;
  color: white; 
  transition: color 0.3s ease; 
}
.btn-volver:hover .icono-volver {
  color: #F1928D; 
}

.header-seccion h2 {
  font-size: 24px;
  margin: 0;
}

.contenido-seccion {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.imagenConf {
  width: 200px;
  height: 200px;
  background-image: url('ruta/a/tu/imagen.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 20px;
}

.link-terminos {
  color: #F1928D;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 15px;
  display: inline-block;
}

/***********************
 ** TyC & EdC
 ************************/

.tc-container {
  width: calc(100% - 40px); 
  max-width: 1200px; 
  margin: 0 auto; 
  background-color: #2a2a2a;
  border-radius: 14px;
  padding: 1.5rem;
  box-sizing: border-box; 
  height: auto; 
}

.tc-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tc-title {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  margin-bottom: 1rem;
}

.tc-title::before {
  content: "←";
  font-size: 1rem;
  color: #ffffff;
  margin-right: 15px;
}

.tc-title:hover::before {
  content: "←";
  font-size: 1rem;
  color: #f77b7b;
}

.tc-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
  background-color: #222222;
  padding: 5px;
}

.tc-tab {
  padding: 6.4px 12.8px;
  font-size: 14.6px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background-color: transparent;
  color: #bfbfbf;
  cursor: pointer;
  transition: background-color 0.2s ease;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -ms-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
}


.tc-tab:hover {
  padding: 6.4px 12.8px;
  font-size: 14.6px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background-color: #3a3a3a;
  color: #bfbfbf;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tc-tab.tc-active {
  background-color: #f77b7b;
  color: white;
}

.tc-content-box {
  background-color: #222222;
  padding: 1.2rem;
  border-radius: 10px;
  line-height: 1.5;
  font-size: 0.85rem;
  color: #cccccc;
  box-shadow: inset 0 0 0 1px #2e2e2e;
  max-height: 50vh; 
  min-height: 250px; 
  overflow-y: auto;
  margin-bottom: 20px; /* Add some space at the bottom */
}

/* Scrollbar para .tc-content-box en navegadores Webkit (Chrome, Edge, Opera, Safari) */
.tc-content-box::-webkit-scrollbar {
  width: 5px;
}

.tc-content-box::-webkit-scrollbar-track {
  background: #f77b7b;
}

.tc-content-box::-webkit-scrollbar-thumb {
  background-color: #f77b7b;
  border-radius: 5px;
  border: 2px solid #f77b7b;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

/* Scrollbar para .tc-content-box en Firefox */
.tc-content-box {
  scrollbar-width: thin;
  scrollbar-color: #f77b7b #222222;
}

.tc-content-box h2 {
  font-size: 17.6px;
  font-weight: 700;
  margin-bottom: 9.6px;
  color: #ffffff;
}

.tc-content-box h3 {
  font-size: 15.2px;
  font-weight: 600;
  margin-bottom: 6.4px;
  color: #ffffff;
}

.tc-content-box p {
  font-size: 14.4px;
  line-height: 1.6;
  margin-bottom: 9.6px;
  color: #f0f0f0;
}

.tc-content-box ul {
  padding-left: 20px;
  margin-bottom: 10px;
  list-style-type: disc;
}

.tc-content-box ul li {
  font-size: 14.4px;
  line-height: 1.6;
  color: #f0f0f0;
  margin-bottom: 9.6px;
}

@media screen and (max-width: 1024px) {
  .opcion-menu {
    width: 344.94px;
    height: 65.13px;
    font-size: 22px;
  }

  .fila {
    gap: 15px;
  }
}

@media screen and (max-width: 767px) {
  .opcion-menu {
    width: 100%;
    height: 60px;
    font-size: 20px;
  }

  .fila {
    gap: 10px;
  }
}

@media screen and (max-width: 539px) {
  .fila {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .opcion-menu {
    width: 100%;
    height: 55px;
    font-size: 18px;
  }

  .opciones-menu {
    width: 100%;
  }
}

@media screen and (max-width: 419px) {
  .tc-container {
    margin-bottom: 60px; 
    padding-bottom: 1.8rem; 
  }
  
  .tc-content-box {
    margin-bottom: 0px;
    max-height: 45vh;
  }
}

path.noti-follow-icon{
  fill: #F1928D !important;
}

/* Tamaño específico solo para el SVG de follow */
#menu-header .notification .notification-image svg[viewBox="0 0 512 512"] {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  min-height: 24px;
}

/* Estilos para la sección de perfil */
:root {
  --primary-bg: #202020;
  --secondary-bg: #151515;
  --input-bg: #2c2c2c;
  --text-color: #ffffff;
  --muted-text: #b5b5b5;
  --accent-color: #e87979;
  --border-radius-lg: 15px;
  --border-radius-md: 10px;
  --border-radius-sm: 4px;
  --standard-padding: 20px;
  --standard-margin: 20px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Estilos para el contenedor padre */
.configPerfil-contenedor {
  background-color: var(--primary-bg);
  border-radius: var(--border-radius-lg);
  padding: var(--standard-padding);
  margin: var(--standard-margin) auto;
  width: calc(100% - 40px);
  max-width: 1600px;
  margin-bottom: 50px;
}

.configPerfil-header-padre {
  display: flex;
  align-items: center;
  margin-bottom: var(--standard-margin);
  padding-left: 10px;
}

.configPerfil-btn-volver {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 8px;
}

.configPerfil-icono-volver {
  margin-right: 5px;
}

.configPerfil-header-padre h2 {
  font-size: clamp(24px, 5vw, 35px);
  margin: 0;
  padding-left: 10px;
}

/* Secciones principales */
.configPerfil-seccion-vista,
.configPerfil-seccion-password {
  background-color: var(--secondary-bg);
  border-radius: var(--border-radius-md);
  padding: var(--standard-padding);
  margin: 0 auto var(--standard-margin);
  width: 100%;
  max-width: 100%;
}

.configPerfil-contenido-seccion {
  padding: 10px 0;
}

/* Formulario de perfil */
.configPerfil-perfil-form {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  width: 100%;
}

/* Avatar container */
.configPerfil-avatar-container {
  grid-row: span 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.image-input {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  margin-bottom: 10px;
}

.image-input-wrapper {
  width: 100%;
  height: 100%;
}

.configPerfil-cambiar-avatar {
  font-size: 12px;
  color: var(--muted-text);
  text-align: center;
  cursor: pointer;
}

.borrar-foto {
  position: absolute;
  top: 0;
  right: 15%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}

.configPerfil-form-grupo {
  margin-bottom: 15px;
  text-align: left;
}

.configPerfil-form-grupo.configPerfil-biografia {
  grid-column: 2 / span 2;
}

.configPerfil-form-etiqueta {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
  color: var(--muted-text);
}

.configPerfil-form-input {
  width: 100%;
  padding: 10px;
  background-color: var(--input-bg);
  border: none;
  border-radius: var(--border-radius-sm);
  color: var(--text-color);
}

textarea.configPerfil-form-input {
  min-height: 80px;
  resize: none;
}

.grow-wrap {
  position: relative;
  width: 100%;
}

.char-count {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 12px;
  color: var(--muted-text);
}

/* Botón guardar */
.configPerfil-guardar-btn {
  background-color: var(--accent-color);
  color: var(--text-color);
  border: none;
  border-radius: var(--border-radius-sm);
  padding: 8px 15px;
  font-size: 12px;
  cursor: pointer;
  margin-left: auto;
  display: block;
}

/* Sección de contraseña */
.configPerfil-password-titulo {
  font-size: clamp(18px, 4vw, 20px);
  margin-bottom: 15px;
  color: var(--text-color);
}

.configPerfil-password-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.configPerfil-nueva-pass {
  grid-column: 1;
}

.configPerfil-confirmar-pass {
  grid-column: 2;
}

.configPerfil-seccion-password .configPerfil-guardar-btn {
  margin-top: 15px;
  grid-column: 3;
  align-self: end;
}

.password-container {
  position: relative;
  display: flex;
  width: 100%;
}

/* Error message */
.error-msg {
  color: #F1928D;
  font-size: 12px;
  margin: 5px 0 15px;
  grid-column: 1 / -1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .configPerfil-perfil-form {
    grid-template-columns: 1fr;
  }
  
  .configPerfil-avatar-container {
    grid-row: 1;
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
  }
  
  .image-input {
    margin-bottom: 0;
  }
  
  .configPerfil-cambiar-avatar {
    margin-top: 0;
  }
  
  .borrar-foto {
    top: 0;
    right: auto;
    left: 75px;
  }
  
  .configPerfil-form-grupo.configPerfil-biografia {
    grid-column: 1;
  }
  
  .configPerfil-password-form {
    grid-template-columns: 1fr;
  }
  
  .configPerfil-password-form .configPerfil-form-grupo {
    grid-column: 1;
  }
  
  .configPerfil-seccion-password {
    height: auto;
    min-height: 300px;
  }
  
  .configPerfil-seccion-password .configPerfil-guardar-btn {
    grid-column: 1;
  }

  textarea.configPerfil-form-input {
    min-height: 120px; 
  }
}

@media (max-width: 480px) {
  .configPerfil-contenedor {
    padding: 15px;
  }
  
  .configPerfil-seccion-vista,
  .configPerfil-seccion-password {
    padding: 15px;
  }
  
  .configPerfil-header-padre h2 {
    font-size: 22px;
  }
  
  .configPerfil-password-titulo {
    font-size: 18px;
  }
  .configPerfil-form-grupo.configPerfil-biografia {
    margin-bottom: 25px; 
  }
  
  textarea.configPerfil-form-input {
    min-height: 150px; 
  }
}

@media (max-width: 320px) {
  .configPerfil-contenedor {
    padding: 10px;
    width: calc(100% - 20px);
  }
  
  .configPerfil-seccion-vista,
  .configPerfil-seccion-password {
    padding: 10px;
  }
  textarea.configPerfil-form-input {
    min-height: 210px; 
  }
}

  /* Título y contenido */
  .swal2-custom-title,
  .swal2-custom-content,
  .swal2-custom-text,
  .swal2-html-container p,
  .swal2-title,
  .swal2-content {
      color: #ffffff;
      text-align: left;
  }

  .swal2-custom-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 5px;
  }

  .swal2-custom-content,
  .swal2-custom-text {
      font-size: 14px;
  }

  .swal2-icon.swal2-success,
  .swal2-icon.swal2-error,
  .swal2-custom-icon {
      color: white;
      border-color: white;
  }

  .swal2-icon.swal2-warning {
    color: white !important;
    border-color: white !important;
   }

   .my-custom-modal-class .my-custom-warning-icon {
    color: #f1928d !important;
    border-color: #f1928d !important;
   } 

  /* Elementos internos de los iconos */
  .swal2-success-line-tip,
  .swal2-success-line-long,
  .swal2-x-mark-line-left,
  .swal2-x-mark-line-right {
      background-color: white;
  }

  .password-container .toggle-password-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .password-container .toggle-password-icon svg {
    display: block;
  }

  /* Sobreescritura para texto blanco en toast */
  .swal2-popup.swal2-toast * {
      color: white;
  }

  .swal2-title {
      color: #595959;
  }

  .swal2-content {
      color: #595959;
      text-align: center;
  }

  .configPerfil-error-mensaje {
    color: #ff6b6b;
    font-size: 0.85rem;
    margin-top: 5px;
}

.configPerfil-olvido-password {
    color: var(--muted-text);
    font-size: 0.65rem;
    text-decoration: none;
    display: block;
    margin-top: 10px;
    cursor: pointer;
}

.configPerfil-olvido-password:hover {
    color: #495057;
    text-decoration: underline;
}

.swal2-custom-button-cancel {
    background-color: #6c757d !important;
    color: white !important;
}

.swal2-custom-pink .swal2-icon.swal2-success .swal2-success-ring {
  border-color: #f1928d !important;
}

.swal2-custom-pink .swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: #f1928d !important;
}

.swal2-custom-pink .swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-custom-pink .swal2-icon.swal2-success .swal2-success-line-long {
  background-color: #f1928d !important;
}

/* Estilos para el tooltip de requisitos de contraseña */
.password-tooltip {
  background-color: transparent; 
  border: none; 
  border-radius: 0; 
  padding: 6px 0; 
  margin-top: 4px; 
  font-size: 12px !important;
  color: var(--muted-text);
  position: relative;
  z-index: 10;
}

.password-tooltip ul {
  list-style-type: none;
  padding-left: 0; 
  margin: 0;
}

.password-tooltip li {
  margin-bottom: 4px; 
  line-height: 1.3;
}

.password-tooltip li:last-child {
  margin-bottom: 0;
}

.password-tooltip li.valid {
  color: #f1928d;
}

.contText{
  border-top: 1px solid #a9a9a9;
  position: relative;
}
#editor {
  min-height: 80px;
  position: relative;
  z-index: 1;
}
.editor-placeholder {
  position: absolute;
  left: 12px;
  top: 12px;
  color: #aaa;
  font-style: italic;
  pointer-events: none;
  z-index: 2;
  user-select: none;
}