/* ==================== Base ==================== */
    body{
      font-family:'Inter','Helvetica Neue',Arial,sans-serif;

      color:#e0e0e0;
      line-height:1.6;
      margin:0;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    .coments {
      background:#1c1c1c;
      display: flex;
      justify-content: center;
      align-items: center; /* centra verticalmente */
      min-height: 300px; /* o la altura que quieras */
      width: 100%;
    }
    
    
    /* ==================== Contenedor principal ==================== */
    .comentarios-container{
      max-width:1260px;
      box-sizing:border-box;
      justify-content: center;
      align-items: center; /* centra verticalmente */
      min-height: 300px; /* o la altura que quieras */
      width: 100%;
      margin-top:20px;
    }
    
    .comentarios-header{
      color:#e0e0e0;
      font-size:22px;
      margin-bottom:18px;
      border-bottom:1px solid #2d2d2d;
      padding-bottom:12px;
      font-weight:600;
    }
    
    /* ==================== Form principal ==================== */
    #comentario-form{
      background:#242424;
      padding:20px;
      border-radius:12px;
      margin-bottom:28px;
      display:flex;
      flex-direction:column;
      gap:12px;
      border:1px solid #313131;
      box-shadow:0 2px 8px rgba(0,0,0,.35);
    }
    
    #comentario-form input[type="text"],
    #comentario-form textarea{
      width:100%;
      padding:12px 14px;
      border:1px solid #3f3f3f;
      border-radius:8px;
      background:#333333;
      color:#e0e0e0;
      font-size:15px;
      outline:none;
      resize:vertical;
      min-height:72px;
      box-sizing:border-box;
      /* Evitar desbordes de texto */
      overflow-wrap:anywhere;      /* moderno */
      word-break:break-word;       /* cadenas largas */
      hyphens:auto;                /* guiones si el idioma lo permite */
    }
    #comentario-form input[type="text"]{ min-height:auto; }
    
    #comentario-form input[type="text"]::placeholder,
    #comentario-form textarea::placeholder{ color:#9a9a9a; }
    
    #comentario-form input[type="text"]:focus,
    #comentario-form textarea:focus{
      border-color:#ff6b6b;
      background:#3a3a3a;
      box-shadow:0 0 0 2px rgba(255,107,107,.28);
    }
    
    #comentario-form input[type="file"]{
      color:#bbb;background:none;border:none;padding:4px 0;font-size:14px;cursor:pointer;align-self:flex-start;
    }
    #comentario-form input[type="file"]::-webkit-file-upload-button{
      background:#555;color:#fff;padding:8px 14px;border-radius:6px;border:none;cursor:pointer;transition:background-color .2s;
    }
    #comentario-form input[type="file"]::-webkit-file-upload-button:hover{ background:#666; }
    
    #comentario-form button[type="submit"]{
      background:#ff4d4d;color:#fff;border:none;padding:10px 18px;border-radius:8px;cursor:pointer;
      transition:background-color .2s ease,box-shadow .2s ease;
      align-self:flex-end;font-size:15px;font-weight:600;letter-spacing:.2px;text-transform:uppercase;
    }
    #comentario-form button[type="submit"]:hover{
      background:#ff3434;box-shadow:0 4px 12px rgba(255,77,77,.36);
    }
    #comentario-form button[type="submit"]:active{ box-shadow:none; }
    
    #imagen-error{
      font-size:.9em;color:#ff6b6b;margin-top:-6px;margin-bottom:2px;padding-left:2px;display:block;
    }
    
    /* ==================== Lista y tarjetas ==================== */
    #lista-comentarios{
      display:flex;flex-direction:column;gap:2px;
    }
    
    .comentario-item{
      display:flex;gap:14px;background:#222; /* más compacto */
      padding:16px;
      border-radius:12px;
      border:1px solid #2d2d2d;
      box-shadow:0 1px 6px rgba(0,0,0,.30);
      position:relative;
    }
    
    /* Respuesta: leve indent y tono */
    .comentario-item.reply{
      margin-left:18px;
      background:#282828;
    }
    
    /* Avatar */
    .comentario-avatar{
      width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #444;flex-shrink:0;align-self:flex-start;
    }
    
    /* Contenido */
    .comentario-contenido{ display:flex;flex-direction:column;flex:1;min-width:0; }
    .comentario-contenido strong{
      font-size:16px;color:#ff6b6b;font-weight:700;margin-bottom:2px;display:block;
    }
    .comentario-contenido p{
      margin:4px 0 8px 0;color:#e0e0e0;line-height:1.55;
      /* Evitar desbordes de texto */
      overflow-wrap:anywhere;
      word-break:break-word;
      hyphens:auto;
      white-space:pre-wrap;
    }
    .comentario-uploaded-image{
      display:block;margin-top:10px;margin-bottom:8px;
      max-width:100%;height:auto;max-height:420px; /* limita altura */
      border-radius:10px;border:1px solid #3a3a3a;
      box-shadow:0 3px 10px rgba(0,0,0,.28);
      object-fit:contain; /* por si se define altura en el futuro */
    }
    .comentario-contenido small{ color:#a3a3a3;font-size:12px;margin-top:auto; }
    
    /* ==================== Hilos / hijos ==================== */
    .children,
    .respuestas-anidadas{
      display:flex;flex-direction:column;gap:3px;margin-top:5px;position:relative;
      margin-left:1px;padding-left:1px;
    }
    
    /* Línea guía vertical para hilos */
    .children::before,
    .respuestas-anidadas::before{
      content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#2f2f2f;border-radius:2px;
    }
    
    /* ==================== Botón Responder ==================== */
    .reply-button{
      background:none;border:none;color:#88bbff;font-size:13px;cursor:pointer;padding:0;margin-top:4px;
      text-align:left;align-self:flex-start;font-weight:600;
    }

    .delete-comment-button{
      background:none;border:none;color:#9088ff;font-size:13px;cursor:pointer;padding:2px 4px;margin-top:4px;
      text-align:left;align-self:flex-start;font-weight:600;
    }

    .reply-button:hover{ color:#cde6ff;text-decoration:underline; }
    
    /* ==================== Formulario de respuesta ==================== */
    .reply-form-container{
      margin-left:18px;margin-top:10px;background:#242424;border:1px solid #313131;border-radius:12px;
      padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.28);
    }
    .reply-form{ display:flex;flex-direction:column;gap:10px; }
    .reply-form input[type="text"],
    .reply-form textarea{
      width:100%;padding:10px 12px;border:1px solid #3f3f3f;border-radius:8px;background:#333333;color:#e0e0e0;font-size:15px;outline:none;resize:vertical;min-height:68px;
      overflow-wrap:anywhere;word-break:break-word;hyphens:auto;white-space:pre-wrap;
    }
    .reply-form input[type="text"]{ min-height:auto; }
    .reply-form input[type="text"]:focus,
    .reply-form textarea:focus{
      border-color:#ff6b6b;background:#3a3a3a;box-shadow:0 0 0 2px rgba(255,107,107,.22);
    }
    .reply-form input[type="file"]{
      color:#bbb;background:none;border:none;padding:4px 0;font-size:14px;cursor:pointer;align-self:flex-start;
    }
    .reply-form input[type="file"]::-webkit-file-upload-button{
      background:#555;color:#fff;padding:8px 14px;border-radius:6px;border:none;cursor:pointer;transition:background-color .2s;
    }
    .reply-form input[type="file"]::-webkit-file-upload-button:hover{ background:#666; }
    .reply-imagen-error{ font-size:.9em;color:#ff6b6b;margin-top:-4px;margin-bottom:2px;padding-left:2px; }
    
    .reply-actions{ display:flex;gap:8px;flex-wrap:wrap; }
    .reply-actions button[type="submit"]{
      background:#ff4d4d;color:#fff;border:none;padding:9px 16px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;
      transition:background-color .2s,box-shadow .2s;
    }
    .reply-actions button[type="submit"]:hover{
      background:#ff3434;box-shadow:0 3px 10px rgba(255,77,77,.30);
    }
    .reply-actions .cancel-reply-btn{
      background:none;border:1px solid #444;color:#cfcfcf;padding:8px 14px;border-radius:8px;cursor:pointer;font-size:14px;
    }
    .reply-actions .cancel-reply-btn:hover{ background:#333; }
    .image-preview{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.image-preview-img{
  max-width:100%;
  height:auto;
  max-height:300px;        /* limita altura de la captura */
  border-radius:10px;
  border:1px solid #3a3a3a;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
  object-fit:contain;
}
.image-preview-remove{
  align-self:flex-start;
  background:#444;
  color:#eaeaea;
  border:1px solid #555;
  border-radius:8px;
  padding:6px 12px;
  cursor:pointer;
  font-size:13px;
}
.image-preview-remove:hover{
  background:#505050;
}

/* Indicador visual de dragover en textarea */
textarea.dropping{
  outline:2px dashed #88bbff;
  background:#2d2d2d;
}


    
    /* ==================== Responsive ==================== */
    @media (max-width:768px){
      .comentarios-container{ margin:24px 12px; }
      #comentario-form{ padding:18px;border-radius:10px; }
      .comentario-item{ padding:16px;border-radius:10px;gap:12px; }
      .comentario-avatar{ width:40px;height:40px; }
      .children,.respuestas-anidadas{ margin-left:14px;padding-left:12px; }
      .reply-form-container{ margin-left:14px;padding:14px;border-radius:10px; }
      .comentario-uploaded-image{ max-height:360px; }
    }
    
    @media (max-width:480px){
      .comentarios-container{ margin:20px 8px; }
      .comentario-item{ padding:14px;border-radius:10px; }
      .comentario-avatar{ width:36px;height:36px; }
      .comentario-uploaded-image{ max-height:300px; }
    }