/* ==========================================================================
   KDT SCANS - ENGAGE SYSTEM (FUSIÓN FINAL)
   ========================================================================== */

/* 1. CONTENEDOR PRINCIPAL */
.kdt-wrapper {
  background-color: #111318;
  color: #e5e7eb;
  font-family: 'Roboto', 'Segoe UI', sans-serif;
  padding: 25px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
  margin-top: 30px;
  box-sizing: border-box;
}
.kdt-wrapper * { box-sizing: border-box; }

/* ==========================================================================
   2. REACCIONES GLOBALES (SIN CUADROS, SOLO ICONOS)
   ========================================================================== */
.kdt-global-reacts {
  display: flex;
  justify-content: center;
  gap: 20px; /* Espacio entre ellas */
  padding: 10px 0 25px 0;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-wrap: wrap;
}

.kdt-react {
  /* ELIMINAR BORDES Y FONDOS */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 5px;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
}

/* Efecto al pasar el mouse (Solo movimiento, sin fondo) */
.kdt-react:hover {
  transform: translateY(-5px) scale(1.1);
  background: transparent !important;
}

/* Ajuste de la imagen del Emoji */
.kdt-react .emoji, 
.kdt-react .emoji img {
  width: 38px !important; /* Tamaño Grande */
  height: 38px !important;
  display: block;
  margin: 0 auto 5px auto;
  filter: none !important; /* Asegura colores vivos */
}

/* Contador y Etiqueta */
.kdt-react .count {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

.kdt-react .label {
  font-size: 11px;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 600;
  margin-top: 2px;
  opacity: 0.8;
}
.kdt-react:hover .label { color: #f97316; opacity: 1; }


/* ==========================================================================
   FILTROS Y FORMULARIO
   ========================================================================== */
.kdt-sort-filters {
  display: flex; gap: 12px; margin-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 15px;
}

.kdt-sort-btn {
  background: transparent; border: none; color: #6b7280; font-size: 13px; font-weight: 600; cursor: pointer; padding: 5px 10px; position: relative;
}
.kdt-sort-btn:hover, .kdt-sort-btn.active { color: #fb923c; }
.kdt-sort-btn.active::after {
  content: ''; position: absolute; bottom: -16px; left: 0; width: 100%; height: 2px; background: #fb923c;
}

/* PERFIL */
.kdt-profile { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.kdt-profile .kdt-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #2a2e38; }
.kdt-profile span { font-weight: 700; color: #fff; font-size: 14px; }

/* INPUT */
.kdt-form {
  background: #1f2128; /* Tu fondo original */
  border-radius: 8px; padding: 16px; margin-bottom: 32px; border: 1px solid #2a2e38;
}
.kdt-form:focus-within { border-color: #f97316; }

.kdt-format-toolbar { display: flex; gap: 8px; margin-bottom: 12px; border-bottom: 1px solid #2a2e38; padding-bottom: 10px; }
.kdt-format-btn { background: rgba(255,255,255,0.05); border: none; color: #aaa; width: 28px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; }
.kdt-format-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

#kdt-text { width: 100%; min-height: 80px; background: transparent; border: none; color: #e5e7eb; font-size: 14px; resize: vertical; outline: none; }

.kdt-row { display: flex; justify-content: flex-end; margin-top: 10px; }
.kdt-btn {
  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  color: white; border: none; padding: 8px 24px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer;
}
.kdt-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }


/* ==========================================================================
   3. LISTA DE COMENTARIOS (ESTRUCTURA ROBUSTA)
   ========================================================================== */
.kdt-list { display: flex; flex-direction: column; gap: 0; }

.kdt-item {
  position: relative;
  /* Espacio reservado a la izquierda para el avatar */
  padding-left: 60px; 
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* CABECERA Y AVATAR */
.kdt-head {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

/* Avatar Flotante Absoluto (Para que no rompa el diseño) */
.kdt-head img.kdt-avatar {
  position: absolute !important;
  top: 20px; /* Alineado con el padding-top */
  left: 0;
  width: 45px !important;
  height: 45px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #2a2e38;
}

/* Meta Data */
.kdt-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kdt-author { color: #fff; font-weight: 700; font-size: 14px; }
.kdt-date { color: #6b7280; font-size: 12px; }

/* Contenido */
.kdt-content {
  color: #d1d5db;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
  word-wrap: break-word;
}

/* Footer (Likes/Reply) */
.kdt-footer { display: flex; align-items: center; gap: 15px; }
.kdt-votes { display: flex; gap: 10px; }

/* Botones pequeños del footer */
.kdt-vote-up, .kdt-vote-down, .kdt-reply {
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  color: #6b7280; font-size: 12px; font-weight: 600;
  transition: color 0.2s;
}
.kdt-vote-up:hover, .kdt-vote-down:hover, .kdt-reply:hover { color: #fff; }

/* Iconos SVG pequeños en blanco y negro */
.kdt-vote-up .emoji img, .kdt-vote-down .emoji img, .kdt-reply .emoji img {
  width: 16px; height: 16px;
  filter: grayscale(100%) brightness(200%); /* Blanco */
  opacity: 0.6;
}
.kdt-vote-up:hover .emoji img, .kdt-vote-down:hover .emoji img, .kdt-reply:hover .emoji img {
  opacity: 1;
}

/* Acciones (Editar/Borrar) */
.kdt-actions {
  position: absolute; top: 15px; right: 0;
  display: flex; gap: 8px; opacity: 0; transition: opacity 0.2s;
}
.kdt-item:hover .kdt-actions { opacity: 1; }
.kdt-actions button {
  background: none; border: none; padding: 0; cursor: pointer; opacity: 0.5;
}
.kdt-actions button img { width: 14px; height: 14px; filter: grayscale(100%); }
.kdt-actions button:hover { opacity: 1; transform: scale(1.1); }

/* ==========================================================================
   FOOTER: ACCIONES Y EMOJIS B/N
   ========================================================================== */
.kdt-footer { display: flex; align-items: center; gap: 15px; }
.kdt-votes { display: flex; gap: 10px; }

/* Botones */
.kdt-vote-up, .kdt-vote-down, .kdt-reply {
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  color: #6b7280; font-size: 13px; font-weight: 600;
  transition: color 0.2s;
}

.kdt-vote-up:hover, .kdt-vote-down:hover, .kdt-reply:hover { color: #e5e7eb; }

/* --- AQUÍ LA MAGIA DEL BLANCO Y NEGRO --- */
/* Solo para los botones del footer y acciones de edición */
.kdt-votes .emoji, 
.kdt-actions .emoji,
.kdt-reply .emoji {
  font-size: 16px; /* Tamaño normal */
  filter: grayscale(100%) brightness(1.5) opacity(0.6); /* B/N y sutil */
  transition: all 0.2s;
}

/* Al hacer hover, se vuelven blancos brillantes */
.kdt-vote-up:hover .emoji, 
.kdt-vote-down:hover .emoji {
  filter: grayscale(100%) brightness(200%) opacity(1);
}

/* BOTONES DE EDICIÓN (Hover en el comentario) */
.kdt-actions {
  margin-left: auto; display: flex; gap: 8px; opacity: 0; transition: opacity 0.2s;
}
.kdt-item:hover .kdt-actions { opacity: 1; }

.kdt-edit, .kdt-del, .kdt-pin {
  background: none; border: none; cursor: pointer; opacity: 0.6; padding: 0;
}
.kdt-edit:hover, .kdt-del:hover, .kdt-pin:hover { opacity: 1; }

/* ==========================================================================
   4. SISTEMA DE RESPUESTAS (SHOW REPLIES BUTTON)
   ========================================================================== */

/* Contenedor del colapso */
.kdt-replies-collapsed {
  margin-top: 10px;
}

/* BOTÓN "SHOW REPLIES" ESTILIZADO */
.kdt-show-replies {
  background: transparent;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #f97316; /* Color Naranja KDT */
  border-radius: 20px;
  transition: background 0.2s;
  
  /* Importante: Alineación */
  margin-left: -5px; /* Pequeño ajuste visual */
}

.kdt-show-replies:hover {
  background: rgba(249, 115, 22, 0.1); /* Fondo naranja muy suave */
}

.kdt-show-replies .emoji img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  filter: none; /* Mantener color o ajustar según gusto */
}

/* CONTENEDOR DE RESPUESTAS (La línea vertical) */
.kdt-replies {
  display: flex;
  flex-direction: column; /* Las respuestas una debajo de otra */
  width: 100%;           /* Ocupar todo el ancho */
  
  /* Estilo visual de jerarquía */
  margin-top: 15px;
  margin-left: 0;        /* Ajustado a 0 porque ya tiene padding el padre */
  padding-left: 20px;
  border-left: 3px solid #2a2e38; /* Línea vertical más visible */
}

/* Ajuste específico para los items que son respuestas */
.kdt-replies .kdt-item {
  padding-left: 50px; /* Un poco menos de espacio para avatar pequeño */
  border-bottom: none;
  padding-top: 15px;
  padding-bottom: 5px;
}

/* Esto asegura que el avatar no se mueva al cambiar a columna */
.kdt-head img.kdt-avatar {
  position: absolute !important;
  top: 20px; 
  left: 0;
  width: 45px !important;
  height: 45px !important;
  border-radius: 50%;
  border: 2px solid #2a2e38;
}

/* Ajuste para avatar en respuestas (más pequeño) */
.kdt-replies .kdt-head img.kdt-avatar {
  width: 35px !important;
  height: 35px !important;
  top: 15px;
}

/* ==========================================================================
   5. RESPONSIVE MÓVIL
   ========================================================================== */
@media (max-width: 640px) {
  .kdt-wrapper { padding: 15px; }
  
  /* En móvil, quitamos la estructura absoluta para evitar cortes */
  .kdt-item { padding-left: 0; }
  
  .kdt-head img.kdt-avatar {
    position: relative !important;
    top: auto; left: auto;
    margin-right: 12px;
    width: 40px !important; height: 40px !important;
    display: inline-block;
    vertical-align: middle;
  }
  
  .kdt-replies {
    margin-left: 5px;
    padding-left: 10px;
    border-left: 2px solid #2a2e38;
  }
  
  /* Botón Show Replies en móvil */
  .kdt-show-replies { margin-left: 0; }
}

/* ==========================================================================
   RESPUESTAS (NESTING LIMPIO)
   ========================================================================== */
.kdt-replies {
  margin-top: 15px;
  border-left: 2px solid #2a2e38; /* Línea sólida vertical */
  padding-left: 20px; /* Espacio entre línea y respuestas */
  /* No ponemos margin-left aquí para que ocupe todo el ancho disponible bajo el padre */
}

/* ITEM DE RESPUESTA */
.kdt-replies .kdt-item {
  padding-left: 45px; /* Menos espacio para el avatar (es más pequeño) */
  padding-top: 15px; padding-bottom: 15px;
  border-bottom: none; /* Las respuestas no suelen llevar línea divisoria fuerte */
}

/* AVATAR DE RESPUESTA (Más pequeño) */
.kdt-replies .kdt-head .kdt-avatar {
  width: 30px !important;
  height: 30px !important;
  top: 15px; /* Ajuste vertical */
}

/* RESPONSIVE */
@media (max-width: 640px) {
  .kdt-wrapper { padding: 15px; }
  .kdt-item { padding-left: 0; } /* En móvil quitamos la columna forzada */
  
  .kdt-head .kdt-avatar {
    position: relative !important; /* Avatar vuelve al flujo normal */
    top: auto; left: auto;
    margin-right: 12px;
    vertical-align: middle;
    display: inline-block;
  }
  
  .kdt-replies { margin-left: 10px; padding-left: 10px; border-left: 2px solid #2a2e38; }
  .kdt-replies .kdt-item { padding-left: 0; }
}