/* ===================================
            BLOGS.CSS
       NEXATA INSIGHT MEDIA STUDIO
=================================== */





/* ===================================
              AUTOR
=================================== */


/* AUTOR BOX - ADAPTABLE */
.autor-box{
  width:100%; /* se adapta al contenedor */
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  border-radius:16px;
  overflow:hidden;
  font-family:inherit; /* hereda tu fuente */
}
.autor-contenido{
  display:flex;
  gap:14px;
  padding:16px;
  align-items:center;
  flex-wrap:nowrap;
}
.autor-foto-box{position:relative;flex-shrink:0}
.autor-foto{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid #E5E7EB;display:block}
.estado-online{position:absolute;bottom:2px;right:2px;width:12px;height:12px;background:#22C55E;border:2px solid #fff;border-radius:50%}
.autor-info h2{font-size:15px;font-weight:700;color:#111827;margin:0 0 2px 0;line-height:1.2}
.autor-info p{font-size:12px;color:#6B7280;line-height:1.3;margin:0}
.autor-fecha{display:block;margin-top:6px;font-size:10px;color:#9CA3AF;font-family:monospace}

/* LIVE FEED NEGRO NEON - ADAPTABLE */
.live-feed{width:100%;background:#06080F;border-top:1px solid #1E263B}
.live-head{background:#0F121A;border-bottom:1px solid #1E263B;height:28px;padding:0 12px;display:flex;align-items:center;gap:8px;font-family:monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:#9CA3AF}
.dot{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 10px #22C55E, 0 0 20px rgba(34,197,94,0.5);animation:pulse-green 1.8s infinite;flex-shrink:0}
@keyframes pulse-green{0%,100%{opacity:1}50%{opacity:0.7}}
.live-head b{margin-left:auto;color:#22C55E;font-weight:600}
.live-body{height:36px;display:flex;align-items:center;overflow:hidden}
.ticker{display:flex;gap:28px;white-space:nowrap;animation:mov 20s linear infinite;font-size:12px;color:#C7CDD8;padding-left:12px}
.ticker .s{color:#2A344E}
@keyframes mov{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* responsive */
@media(max-width:480px){.autor-contenido{padding:12px}.ticker{font-size:11px}}


/* ===================================
        BOTONES PARA COMPARTIR
=================================== */

.social {
  margin: 10px 0;
  display: flex;
  gap: 12px;
}

.social a {
  margin-right: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  color: #fff;
  transition: opacity 0.2s, transform 0.2s;
}

.social a:hover {
  opacity: 0.9;
  transform: scale(1.05);
}


/* FACEBOOK */

.social a.facebook {
  background: #3b5998;
}


/* X / TWITTER */

.social a.twitter {
  background: #000000;
}


/* WHATSAPP */

.social a.whatsapp {
  background: #25d366;
}


/* ICONOS */

.social a svg {
  width: 18px;
  height: 18px;
  fill: white;
}


/* ===================================
             COMENTARIOS
=================================== */

.comentarios-box {
  max-width: 800px;
  margin: 30px auto;
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


/* INPUT Y TEXTAREA */

.comentarios-box input,
.comentarios-box textarea {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  box-sizing: border-box;
}


/* ÁREA DEL COMENTARIO */

.comentarios-box textarea {
  min-height: 120px;
  resize: vertical;
}


/* BOTONES */

.comentarios-box button {
  padding: 10px 15px;
  cursor: pointer;
}


/* COMENTARIO INDIVIDUAL */

.comentario {
  padding: 10px;
  margin-top: 10px;
  border-bottom: 1px solid #ddd;
}


/* FECHA DEL COMENTARIO */

.fecha {
  font-size: 12px;
  color: gray;
}


/* ===================================
             RESPONSIVE
=================================== */

@media (max-width: 768px) {
  .btn-feed,
  .btn-contenidos,
  .btn-info {
    display: none;
  }


  /* COMPARTIR */

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

  .social a {
    width: 100%;
    justify-content: center;
    margin-right: 0;
  }


  /* COMENTARIOS */

  .comentarios-box {
    width: 100%;
    margin: 20px auto;
  }

}