/* =============================
   ENTRADAS DE BLOG Y COMENTARIOS
   ============================= */
.blog-entry {
  background: rgba(20, 20, 30, 0.92);
  border-radius: 1.1rem;
  margin-bottom: 1.5rem;
  padding: 1.2rem 1.2rem 1rem 1.2rem;
  box-shadow: 0 0 16px #00fff7aa, 0 0 32px #ff00c8aa;
  border: 2px solid #00fff7;
  transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
  animation: blog-entry-fadein 0.7s cubic-bezier(.77, 0, .18, 1);
}

@keyframes blog-entry-fadein {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.blog-entry__title {
  font-size: 1.3rem;
  color: var(--color-cyan);
  text-shadow: 0 0 8px #00fff7, 0 0 16px #ff00c8;
  margin: 0 0 0.5rem 0;
  font-family: 'Orbitron', 'Audiowide', Arial, sans-serif;
}

.blog-entry__content {
  color: var(--color-white);
  font-size: 1.05rem;
  margin: 0 0 0.7rem 0;
  line-height: 1.5;
}

.blog-entry__date {
  font-size: 0.95rem;
  color: #39ff14;
  text-shadow: 0 0 8px #39ff14;
  font-family: 'Audiowide', 'Orbitron', Arial, sans-serif;
}

/* Personalización por sección */
.section--cyberpunk .blog-entry {
  border-color: #ff00c8;
  box-shadow: 0 0 24px #ff00c8, 0 0 48px #00fff7;
}

.section--steampunk .blog-entry {
  border-color: #b08d57;
  box-shadow: 0 0 32px #b08d57, 0 0 64px #3e2c1c;
  background: rgba(60, 40, 20, 0.92);
}

.section--steampunk .blog-entry__title {
  color: #b08d57;
  text-shadow: 0 0 8px #b08d57, 0 0 16px #fff8e1;
}

.section--steampunk .blog-entry__date {
  color: #e6d8a7;
  text-shadow: 0 0 8px #e6d8a7;
}

.section--fantasy .blog-entry {
  border-color: #e6d8a7;
  box-shadow: 0 0 24px #39ff14, 0 0 48px #e6d8a7;
  background: rgba(20, 40, 30, 0.92);
}

.section--gothic .blog-entry {
  border-color: #6d2177;
  box-shadow: 0 0 24px #6d2177, 0 0 48px #000;
  background: rgba(30, 10, 40, 0.92);
}

.section--urban-magic .blog-entry {
  border-color: #7f5cff;
  box-shadow: 0 0 24px #7f5cff, 0 0 48px #00fff7;
  background: rgba(30, 30, 60, 0.92);
}

/* COMENTARIOS */
.comment {
  background: rgba(20, 20, 30, 0.85);
  border-radius: 0.8rem;
  margin-bottom: 1rem;
  padding: 0.8rem 1rem 0.7rem 1rem;
  box-shadow: 0 0 8px #00fff7aa, 0 0 16px #ff00c8aa;
  border: 1.5px solid #00fff7;
  position: relative;
  animation: comment-fadein 0.6s cubic-bezier(.77, 0, .18, 1);
}

@keyframes comment-fadein {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.comment__text {
  color: var(--color-white);
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
}

.comment__author {
  font-size: 0.95rem;
  color: var(--color-cyan);
  margin-right: 1.2rem;
  font-family: 'Audiowide', 'Orbitron', Arial, sans-serif;
}

.comment__timestamp {
  font-size: 0.9rem;
  color: #39ff14;
  font-family: 'Orbitron', Arial, sans-serif;
}

/* Personalización por sección para comentarios */
.section--cyberpunk .comment {
  border-color: #ff00c8;
  box-shadow: 0 0 12px #ff00c8, 0 0 24px #00fff7;
}

.section--steampunk .comment {
  border-color: #b08d57;
  box-shadow: 0 0 12px #b08d57, 0 0 24px #3e2c1c;
  background: rgba(60, 40, 20, 0.85);
}

.section--steampunk .comment__author {
  color: #b08d57;
}

.section--steampunk .comment__timestamp {
  color: #e6d8a7;
}

.section--fantasy .comment {
  border-color: #e6d8a7;
  box-shadow: 0 0 12px #39ff14, 0 0 24px #e6d8a7;
  background: rgba(20, 40, 30, 0.85);
}

.section--gothic .comment {
  border-color: #6d2177;
  box-shadow: 0 0 12px #6d2177, 0 0 24px #000;
  background: rgba(30, 10, 40, 0.85);
}

.section--urban-magic .comment {
  border-color: #7f5cff;
  box-shadow: 0 0 12px #7f5cff, 0 0 24px #00fff7;
  background: rgba(30, 30, 60, 0.85);
}

.blog-entry--animate-in {
  animation: blog-entry-fadein 0.7s cubic-bezier(.77, 0, .18, 1);
}

.comment--animate-in {
  animation: comment-fadein 0.6s cubic-bezier(.77, 0, .18, 1);
}

.blog-entry__comments {
  margin-top: 1.1rem;
  padding-left: 1.2rem;
  border-left: 2px solid #00fff7;
}

.blog-entry__comment {
  margin-bottom: 0.7rem;
}

.blog-entry__comment-form {
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(20, 20, 30, 0.85);
  border-radius: 0.7rem;
  padding: 0.7rem 0.7rem 0.7rem 1rem;
  box-shadow: 0 0 8px #00fff7aa, 0 0 16px #ff00c8aa;
  border: 1.5px solid #00fff7;
  position: relative;
  animation: form-fadein 0.7s cubic-bezier(.77, 0, .18, 1);
}

.blog-entry__comment-form input,
.blog-entry__comment-form textarea {
  font-size: 0.98rem;
  border-radius: 0.5rem;
  border: 1.5px solid #00fff7;
  background: #181828;
  color: var(--color-white);
  padding: 0.5rem 0.8rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: none;
}

.blog-entry__comment-form input:focus,
.blog-entry__comment-form textarea:focus {
  border-color: #ff00c8;
  box-shadow: 0 0 8px #ff00c8, 0 0 16px #00fff7;
}

.blog-entry__comment-form__submit {
  font-size: 1rem;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1.2rem;
  background: linear-gradient(90deg, #00fff7 0%, #ff00c8 100%);
  color: #0f0f0f;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 8px #00fff7, 0 0 16px #ff00c8;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, filter 0.2s;
}

.blog-entry__comment-form__submit:hover {
  filter: brightness(1.2) contrast(1.2);
}

.blog-entry__comment-form__counter {
  align-self: flex-end;
  font-size: 0.93rem;
  color: #00fff7;
  margin-top: -0.3rem;
  margin-bottom: 0.1rem;
  transition: color 0.2s;
}

.blog-entry__comment-form__counter--warn {
  color: #ffae00;
}

.blog-entry__comment-form__counter--error {
  color: #ff003c;
  font-weight: bold;
}

.blog-entry__comment-form__feedback {
  min-height: 1.1em;
  font-size: 0.97rem;
  color: #39ff14;
  margin-top: 0.1em;
  opacity: 0;
  transition: opacity 0.3s;
  text-align: left;
}

.blog-entry__comment-form__feedback--show {
  opacity: 1;
}

.blog-entry__comment-form__feedback--error {
  color: #ff003c;
  animation: shake 0.4s;
}