/* =============================
   FORMULARIOS DE ENTRADA Y COMENTARIO
   ============================= */
.blog-form,
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
  padding: 1.2rem 1rem 1rem 1rem;
  border-radius: 1.1rem;
  background: rgba(20, 20, 30, 0.85);
  box-shadow: 0 0 16px #00fff7aa, 0 0 32px #ff00c8aa;
  border: 2px solid #00fff7;
  position: relative;
  animation: form-fadein 0.7s cubic-bezier(.77, 0, .18, 1);
}

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

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

.blog-form__title,
.blog-form__content,
.comment-form__author,
.comment-form__text {
  font-family: inherit;
  font-size: 1rem;
  border-radius: 0.6rem;
  border: 2px solid #00fff7;
  background: #181828;
  color: var(--color-white);
  padding: 0.7rem 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: none;
}

.blog-form__title:focus,
.blog-form__content:focus,
.comment-form__author:focus,
.comment-form__text:focus {
  border-color: #ff00c8;
  box-shadow: 0 0 8px #ff00c8, 0 0 16px #00fff7;
}

.blog-form__submit,
.comment-form__submit {
  font-family: inherit;
  font-size: 1.05rem;
  border: none;
  border-radius: 0.7rem;
  padding: 0.7rem 1.5rem;
  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;
  position: relative;
  overflow: hidden;
}

.blog-form__submit:hover,
.comment-form__submit:hover {
  filter: brightness(1.2) contrast(1.2);
  animation: glitch-btn 0.4s linear alternate;
}

@keyframes glitch-btn {
  0% {
    box-shadow: 0 0 8px #00fff7, 0 0 16px #ff00c8;
  }

  50% {
    box-shadow: 0 0 24px #ff00c8, 0 0 32px #00fff7;
  }

  100% {
    box-shadow: 0 0 8px #00fff7, 0 0 16px #ff00c8;
  }
}

.blog-form__feedback,
.comment-form__feedback {
  min-height: 1.2em;
  font-size: 1rem;
  color: #39ff14;
  margin-top: 0.2em;
  opacity: 0;
  transition: opacity 0.3s;
  text-align: left;
}

.blog-form__feedback--show,
.comment-form__feedback--show {
  opacity: 1;
}

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

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-8px);
  }

  40% {
    transform: translateX(8px);
  }

  60% {
    transform: translateX(-6px);
  }

  80% {
    transform: translateX(6px);
  }

  100% {
    transform: translateX(0);
  }
}

/* Temática: Cyberpunk */
.blog-form--cyberpunk,
.comment-form--cyberpunk {
  border-color: #ff00c8;
  box-shadow: 0 0 24px #ff00c8, 0 0 48px #00fff7;
  background: rgba(10, 10, 20, 0.92);
}

.blog-form--cyberpunk .blog-form__submit,
.comment-form--cyberpunk .comment-form__submit {
  background: linear-gradient(90deg, #ff00c8 0%, #00fff7 100%);
  color: #0f0f0f;
}

.blog-form--cyberpunk .blog-form__submit:hover,
.comment-form--cyberpunk .comment-form__submit:hover {
  animation: glitch-btn 0.4s linear alternate;
}

/* Temática: Steampunk */
.blog-form--steampunk,
.comment-form--steampunk {
  border-color: #b08d57;
  box-shadow: 0 0 24px #b08d57, 0 0 48px #3e2c1c;
  background: rgba(60, 40, 20, 0.92);
  font-family: 'Georgia', 'Times New Roman', serif;
}

.blog-form--steampunk .blog-form__submit,
.comment-form--steampunk .comment-form__submit {
  background: linear-gradient(90deg, #b08d57 0%, #3e2c1c 100%);
  color: #fff8e1;
  font-family: 'Georgia', 'Times New Roman', serif;
  box-shadow: 0 0 12px #b08d57;
}

.blog-form--steampunk .blog-form__submit:hover,
.comment-form--steampunk .comment-form__submit:hover {
  filter: brightness(1.2) contrast(1.2);
}

/* Temática: Alta Fantasía */
.blog-form--fantasy,
.comment-form--fantasy {
  border-color: #e6d8a7;
  box-shadow: 0 0 24px #39ff14, 0 0 48px #e6d8a7;
  background: rgba(20, 40, 30, 0.92);
  font-family: 'Dancing Script', 'Orbitron', cursive;
  position: relative;
}

.blog-form--fantasy::before,
.comment-form--fantasy::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  background: repeating-linear-gradient(90deg, #e6d8a7 0 2px, transparent 2px 12px);
  opacity: 0.3;
  pointer-events: none;
  border-radius: 1.1rem 1.1rem 0 0;
}

.blog-form--fantasy .blog-form__submit,
.comment-form--fantasy .comment-form__submit {
  background: linear-gradient(90deg, #e6d8a7 0%, #39ff14 100%);
  color: #0f0f0f;
  font-family: 'Dancing Script', 'Orbitron', cursive;
  box-shadow: 0 0 12px #e6d8a7;
}

.blog-form--fantasy .blog-form__submit:hover,
.comment-form--fantasy .comment-form__submit:hover {
  filter: brightness(1.2) contrast(1.2);
}

/* Temática: Gótico */
.blog-form--gothic,
.comment-form--gothic {
  border-color: #6d2177;
  box-shadow: 0 0 24px #6d2177, 0 0 48px #000;
  background: linear-gradient(120deg, #1a0033 80%, #2d002d 100%);
  font-family: 'UnifrakturCook', 'Orbitron', cursive;
  position: relative;
}

.blog-form--gothic::before,
.comment-form--gothic::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  background: linear-gradient(90deg, #6d2177 0%, #000 100%);
  opacity: 0.2;
  pointer-events: none;
  border-radius: 1.1rem 1.1rem 0 0;
}

.blog-form--gothic .blog-form__submit,
.comment-form--gothic .comment-form__submit {
  background: linear-gradient(90deg, #6d2177 0%, #000 100%);
  color: #fff;
  font-family: 'UnifrakturCook', 'Orbitron', cursive;
  box-shadow: 0 0 12px #6d2177;
}

.blog-form--gothic .blog-form__submit:hover,
.comment-form--gothic .comment-form__submit:hover {
  filter: brightness(1.2) contrast(1.2);
}

/* Temática: Magia Urbana */
.blog-form--urban-magic,
.comment-form--urban-magic {
  border-color: #7f5cff;
  box-shadow: 0 0 24px #7f5cff, 0 0 48px #00fff7;
  background: linear-gradient(120deg, #1a1a2e 80%, #3a3a72 100%);
  font-family: 'Audiowide', 'Orbitron', Arial, sans-serif;
  position: relative;
}

.blog-form--urban-magic::before,
.comment-form--urban-magic::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  background: repeating-linear-gradient(90deg, #7f5cff 0 2px, transparent 2px 12px);
  opacity: 0.3;
  pointer-events: none;
  border-radius: 1.1rem 1.1rem 0 0;
}

.blog-form--urban-magic .blog-form__submit,
.comment-form--urban-magic .comment-form__submit {
  background: linear-gradient(90deg, #7f5cff 0%, #00fff7 100%);
  color: #0f0f0f;
  font-family: 'Audiowide', 'Orbitron', Arial, sans-serif;
  box-shadow: 0 0 12px #7f5cff;
}

.blog-form--urban-magic .blog-form__submit:hover,
.comment-form--urban-magic .comment-form__submit:hover {
  filter: brightness(1.2) contrast(1.2);
}

.comment-form__counter {
  align-self: flex-end;
  font-size: 0.95rem;
  color: #00fff7;
  margin-top: -0.5rem;
  margin-bottom: 0.2rem;
  transition: color 0.2s;
}

.comment-form__counter--warn {
  color: #ffae00;
}

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

.blog-form__counter {
  align-self: flex-end;
  font-size: 0.97rem;
  color: #39ff14;
  margin-top: -0.5rem;
  margin-bottom: 0.2rem;
  transition: color 0.2s;
}

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

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

@media (max-width: 900px) {

  .blog-form,
  .comment-form {
    padding: 0.7rem 0.3rem 0.7rem 0.3rem;
  }

  .blog-form__title,
  .blog-form__content,
  .comment-form__author,
  .comment-form__text {
    font-size: 0.98rem;
    padding: 0.5rem 0.7rem;
  }

  .blog-form__submit,
  .comment-form__submit {
    font-size: 0.98rem;
    padding: 0.5rem 1rem;
  }
}